Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-26 18:42:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(freight:backoffice): group roles by apps

Browse Source
This commit is contained in:
Michael Abebe
2026-05-28 10:57:20 +03:00
parent 2ccbfe324f
commit 6841c3f4d8
1 changed files with 77 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PermissionsPage.tsx
View File

@@ -1,5 +1,12 @@
import { useEffect, useState } from "react";
import { isAxiosError } from "axios";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@edr/ui-common";
import { api } from "@/auth/http";
@@ -12,6 +19,13 @@ interface PermissionRecord {
id: string;
key: string;
name?: LocaleText;
applicationId?: string | null;
}
interface ApplicationRecord {
id: string;
key: string;
name?: LocaleText;
}
interface ListResponse<T> {
@@ -21,6 +35,8 @@ interface ListResponse<T> {
}
const PAGE_SIZE = 2000;
const ALL_APPLICATIONS_VALUE = "all";
const SYSTEM_APPLICATION_VALUE = "system";
const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") =>
value?.en ?? value?.am ?? fallback;
@@ -46,6 +62,8 @@ const sortPermissions = (items: PermissionRecord[]) =>
const PermissionsPage = () => {
const [permissions, setPermissions] = useState<PermissionRecord[]>([]);
const [applications, setApplications] = useState<ApplicationRecord[]>([]);
const [selectedApplication, setSelectedApplication] = useState(ALL_APPLICATIONS_VALUE);
const [count, setCount] = useState(0);
const [loading, setLoading] = useState(true);
const [loadingMore, setLoadingMore] = useState(false);
@@ -54,26 +72,35 @@ const PermissionsPage = () => {
useEffect(() => {
let isMounted = true;
const loadPermissions = async () => {
const loadPageData = async () => {
setLoading(true);
setErrorMessage(null);
try {
const response = await api.get<ListResponse<PermissionRecord>>("/permissions", {
params: {
skip: 0,
take: PAGE_SIZE,
},
});
const [permissionsResponse, applicationsResponse] = await Promise.all([
api.get<ListResponse<PermissionRecord>>("/permissions", {
params: {
skip: 0,
take: PAGE_SIZE,
},
}),
api.get<ListResponse<ApplicationRecord>>("/applications"),
]);
if (!isMounted) {
return;
}
const items = sortPermissions(getItems(response.data));
const items = sortPermissions(getItems(permissionsResponse.data));
const applicationItems = [...getItems(applicationsResponse.data)].sort((left, right) =>
getLocaleLabel(left.name, left.key).localeCompare(
getLocaleLabel(right.name, right.key),
),
);
setPermissions(items);
setCount(response.data.count ?? items.length);
setApplications(applicationItems);
setCount(permissionsResponse.data.count ?? items.length);
} catch (error) {
if (!isMounted) {
return;
@@ -91,7 +118,7 @@ const PermissionsPage = () => {
}
};
void loadPermissions();
void loadPageData();
return () => {
isMounted = false;
@@ -99,6 +126,17 @@ const PermissionsPage = () => {
}, []);
const hasMore = count > permissions.length;
const filteredPermissions = permissions.filter((permission) => {
if (selectedApplication === ALL_APPLICATIONS_VALUE) {
return true;
}
if (selectedApplication === SYSTEM_APPLICATION_VALUE) {
return !permission.applicationId;
}
return permission.applicationId === selectedApplication;
});
const handleLoadMore = async () => {
setLoadingMore(true);
@@ -142,11 +180,36 @@ const PermissionsPage = () => {
</p>
</div>
<div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
{count || permissions.length} permissions
{filteredPermissions.length} permissions
</div>
</div>
</div>
<div className="grid gap-3 rounded-2xl border border-border bg-background/60 p-4 md:grid-cols-[minmax(0,260px)_1fr] md:items-end">
<div className="space-y-2">
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
Application
</p>
<Select value={selectedApplication} onValueChange={setSelectedApplication}>
<SelectTrigger className="w-full rounded-xl bg-background">
<SelectValue placeholder="Select application" />
</SelectTrigger>
<SelectContent>
<SelectItem value={ALL_APPLICATIONS_VALUE}>All applications</SelectItem>
<SelectItem value={SYSTEM_APPLICATION_VALUE}>System permissions</SelectItem>
{applications.map((application) => (
<SelectItem key={application.id} value={application.id}>
{getLocaleLabel(application.name, application.key)}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<p className="text-sm text-muted-foreground">
Filter the IAM permission catalog by application, or view the shared system permissions that do not belong to any application.
</p>
</div>
{loading ? (
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
Loading permissions...
@@ -155,9 +218,9 @@ const PermissionsPage = () => {
<div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-8 text-center text-sm text-red-700 dark:border-red-950 dark:bg-red-950/30 dark:text-red-300">
{errorMessage}
</div>
) : permissions.length ? (
) : filteredPermissions.length ? (
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{permissions.map((permission) => (
{filteredPermissions.map((permission) => (
<article
key={permission.id}
className="rounded-2xl border border-border/70 bg-background/80 p-4 shadow-sm transition hover:border-border hover:bg-accent/20"
@@ -175,7 +238,7 @@ const PermissionsPage = () => {
</div>
) : (
<div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
No permissions are available in the system.
No permissions match the selected application.
</div>
)}