add service-types and cargo-types CRUD modules with pagination, filtering

apps/edr-freight-web/backoffice/src/App.tsx

@@ -5,6 +5,9 @@ import { LayoutDashboard, Network } from "lucide-react";
 import { useAuth } from "./auth/useAuth";
 import LoginPage from "./pages/auth/LoginPage";
 import OverviewPage from "./pages/dashboard/OverviewPage";
+import EmployeesPage from "./pages/dashboard/user-management/EmployeesPage";
+import PermissionsPage from "./pages/dashboard/user-management/PermissionsPage";
+import RolesPage from "./pages/dashboard/user-management/RolesPage";
 import UserManagementPage from "./pages/dashboard/user-management/UserManagementPage";
 import LoadingScreen from "./components/LoadingScreen";
 
@@ -18,6 +21,20 @@ const sidebarItems: SidebarItem[] = [
     label: "User management",
     href: "/dashboard/user-management",
     icon: <Network />,
+    children: [
+      {
+        label: "Employees",
+        href: "/dashboard/user-management/employees",
+      },
+      {
+        label: "Permissions",
+        href: "/dashboard/user-management/permissions",
+      },
+      {
+        label: "Roles",
+        href: "/dashboard/user-management/roles",
+      },
+    ],
   },
 ];
 
@@ -67,6 +84,9 @@ const App = () => {
       <Route path="/dashboard" element={<DashboardShell />}>
         <Route path="overview" element={<OverviewPage />} />
         <Route path="user-management" element={<UserManagementPage />} />
+        <Route path="user-management/employees" element={<EmployeesPage />} />
+        <Route path="user-management/permissions" element={<PermissionsPage />} />
+        <Route path="user-management/roles" element={<RolesPage />} />
         <Route path="org-structure" element={<Navigate to="/dashboard/user-management" replace />} />
         <Route path="org-structure/*" element={<Navigate to="/dashboard/user-management" replace />} />
       </Route>

apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/EmployeesPage.tsx

@@ -0,0 +1,321 @@
+import { useEffect, useState } from "react";
+import { isAxiosError } from "axios";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@edr/ui-common";
+
+import { api } from "@/auth/http";
+import { useAuth } from "@/auth/useAuth";
+
+interface LocaleText {
+  en?: string;
+  am?: string;
+}
+
+interface EmployeeUserRecord {
+  id: string;
+  name?: LocaleText;
+  email?: string;
+  phoneNumber?: string;
+  username?: string;
+}
+
+interface EmployeePositionSummary {
+  id: string;
+  position?: {
+    id: string;
+    name?: LocaleText;
+    key?: string;
+  };
+}
+
+interface EmployeeRecord {
+  id: string;
+  name?: LocaleText;
+  status?: string;
+  user?: EmployeeUserRecord;
+  employeePositions?: EmployeePositionSummary[];
+}
+
+interface ListResponse<T> {
+  count?: number;
+  items?: T[];
+  data?: T[];
+}
+
+const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") =>
+  value?.en ?? value?.am ?? fallback;
+
+const getItems = <T,>(payload: ListResponse<T> | T[] | undefined | null) => {
+  if (!payload) {
+    return [] as T[];
+  }
+
+  if (Array.isArray(payload)) {
+    return payload;
+  }
+
+  return payload.items ?? payload.data ?? [];
+};
+
+const getEmployeeDisplayName = (employee: EmployeeRecord) =>
+  getLocaleLabel(
+    employee.name ?? employee.user?.name,
+    employee.user?.email ?? employee.user?.username ?? employee.id,
+  );
+
+const EmployeesPage = () => {
+  const { user } = useAuth();
+  const [employees, setEmployees] = useState<EmployeeRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [selectedEmployee, setSelectedEmployee] = useState<EmployeeRecord | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+    const organizationIds = Array.from(
+      new Set(
+        (user?.employee ?? [])
+          .map((employee) => employee.organizationId)
+          .filter((organizationId): organizationId is string => Boolean(organizationId)),
+      ),
+    );
+
+    const loadEmployees = async () => {
+      setLoading(true);
+      setErrorMessage(null);
+
+      if (!organizationIds.length) {
+        setEmployees([]);
+        setErrorMessage("No employee organization scope is available for this account.");
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const responses = await Promise.all(
+          organizationIds.map((organizationId) =>
+            api.get<ListResponse<EmployeeRecord>>(
+              `/employees/${organizationId}/by-organization`,
+              {
+                params: {
+                  skip: 0,
+                  take: 1000,
+                },
+              },
+            ),
+          ),
+        );
+
+        if (!isMounted) {
+          return;
+        }
+
+        const uniqueEmployees = Array.from(
+          new Map(
+            responses
+              .flatMap((response) => getItems(response.data))
+              .map((employee) => [employee.id, employee]),
+          ).values(),
+        );
+
+        setEmployees(
+          uniqueEmployees.sort((left, right) =>
+            getEmployeeDisplayName(left).localeCompare(getEmployeeDisplayName(right)),
+          ),
+        );
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        setErrorMessage(
+          isAxiosError(error)
+            ? error.response?.data?.message ?? "Unable to load employees."
+            : "Unable to load employees.",
+        );
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void loadEmployees();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [user]);
+
+  return (
+    <section className="p-6">
+      <div className="space-y-6 rounded-2xl border border-border bg-card p-8 shadow-sm">
+        <div className="space-y-3">
+          <p className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
+            User Management
+          </p>
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-semibold text-foreground">Employees</h1>
+              <p className="mt-3 max-w-2xl text-sm text-muted-foreground">
+                Browse employees within your accessible scope and open a record to review contact and position details.
+              </p>
+            </div>
+            <div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
+              {employees.length} employees
+            </div>
+          </div>
+        </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 employees...
+          </div>
+        ) : errorMessage ? (
+          <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>
+        ) : employees.length ? (
+          <div className="overflow-x-auto rounded-2xl border border-border">
+            <table className="min-w-[980px] w-full border-collapse text-left text-sm">
+              <thead className="bg-muted/60 text-muted-foreground">
+                <tr>
+                  <th className="px-4 py-3 font-medium">Name</th>
+                  <th className="px-4 py-3 font-medium">Username</th>
+                  <th className="px-4 py-3 font-medium">Email</th>
+                  <th className="px-4 py-3 font-medium">Phone</th>
+                  <th className="px-4 py-3 font-medium">Status</th>
+                  <th className="px-4 py-3 font-medium">Positions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {employees.map((employee) => {
+                  const positions = employee.employeePositions?.map((item) => getLocaleLabel(item.position?.name, item.position?.key ?? "Unnamed")) ?? [];
+
+                  return (
+                    <tr
+                      key={employee.id}
+                      onClick={() => setSelectedEmployee(employee)}
+                      className="cursor-pointer border-t border-border bg-background transition hover:bg-accent/20"
+                    >
+                      <td className="px-4 py-3 font-medium text-foreground">{getEmployeeDisplayName(employee)}</td>
+                      <td className="px-4 py-3 text-muted-foreground">{employee.user?.username ?? "-"}</td>
+                      <td className="px-4 py-3 text-muted-foreground">{employee.user?.email ?? "-"}</td>
+                      <td className="px-4 py-3 text-muted-foreground">{employee.user?.phoneNumber ?? "-"}</td>
+                      <td className="px-4 py-3 text-muted-foreground">{employee.status ?? "-"}</td>
+                      <td className="px-4 py-3 text-muted-foreground">{positions.join(", ") || "-"}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            No employees are available in your scope.
+          </div>
+        )}
+      </div>
+
+      <Dialog open={Boolean(selectedEmployee)} onOpenChange={(open) => !open && setSelectedEmployee(null)}>
+        <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {selectedEmployee ? getEmployeeDisplayName(selectedEmployee) : "Employee details"}
+            </DialogTitle>
+            <DialogDescription>
+              {selectedEmployee
+                ? "Review the employee profile, contact information, and assigned positions."
+                : undefined}
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedEmployee ? (
+            <div className="space-y-6">
+              <div className="grid gap-4 rounded-2xl border border-border bg-muted/40 p-4 sm:grid-cols-2">
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Employee name
+                  </p>
+                  <p className="mt-2 text-sm font-semibold text-foreground">
+                    {getEmployeeDisplayName(selectedEmployee)}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Status
+                  </p>
+                  <p className="mt-2 text-sm font-semibold text-foreground">
+                    {selectedEmployee.status ?? "-"}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Username
+                  </p>
+                  <p className="mt-2 text-sm text-foreground">{selectedEmployee.user?.username ?? "-"}</p>
+                </div>
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Email
+                  </p>
+                  <p className="mt-2 text-sm text-foreground">{selectedEmployee.user?.email ?? "-"}</p>
+                </div>
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Phone
+                  </p>
+                  <p className="mt-2 text-sm text-foreground">{selectedEmployee.user?.phoneNumber ?? "-"}</p>
+                </div>
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Employee ID
+                  </p>
+                  <p className="mt-2 font-mono text-sm text-foreground">{selectedEmployee.id}</p>
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <div className="flex items-center justify-between gap-3">
+                  <h2 className="text-sm font-semibold text-foreground">Assigned positions</h2>
+                  <div className="rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
+                    {selectedEmployee.employeePositions?.length ?? 0} positions
+                  </div>
+                </div>
+
+                {selectedEmployee.employeePositions?.length ? (
+                  <div className="grid gap-3 md:grid-cols-2">
+                    {selectedEmployee.employeePositions.map((item) => (
+                      <article
+                        key={item.id}
+                        className="rounded-2xl border border-border/70 bg-background/80 p-4 shadow-sm"
+                      >
+                        <p className="truncate text-sm font-semibold text-foreground">
+                          {getLocaleLabel(item.position?.name, item.position?.key ?? "Unnamed")}
+                        </p>
+                        <p className="mt-1 truncate font-mono text-xs text-muted-foreground/90">
+                          {item.position?.key ?? "-"}
+                        </p>
+                      </article>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+                    No positions are assigned to this employee.
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </section>
+  );
+};
+
+export default EmployeesPage;

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

@@ -0,0 +1,265 @@
+import { useEffect, useState } from "react";
+import { isAxiosError } from "axios";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@edr/ui-common";
+
+import { api } from "@/auth/http";
+
+interface LocaleText {
+  en?: string;
+  am?: string;
+}
+
+interface PermissionRecord {
+  id: string;
+  key: string;
+  name?: LocaleText;
+  applicationId?: string | null;
+}
+
+interface ApplicationRecord {
+  id: string;
+  key: string;
+  name?: LocaleText;
+}
+
+interface ListResponse<T> {
+  count?: number;
+  items?: T[];
+  data?: 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;
+
+const getItems = <T,>(payload: ListResponse<T> | T[] | undefined | null) => {
+  if (!payload) {
+    return [] as T[];
+  }
+
+  if (Array.isArray(payload)) {
+    return payload;
+  }
+
+  return payload.items ?? payload.data ?? [];
+};
+
+const sortPermissions = (items: PermissionRecord[]) =>
+  [...items].sort((left, right) =>
+    getLocaleLabel(left.name, left.key).localeCompare(
+      getLocaleLabel(right.name, right.key),
+    ),
+  );
+
+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);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadPageData = async () => {
+      setLoading(true);
+      setErrorMessage(null);
+
+      try {
+        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(permissionsResponse.data));
+        const applicationItems = [...getItems(applicationsResponse.data)].sort((left, right) =>
+          getLocaleLabel(left.name, left.key).localeCompare(
+            getLocaleLabel(right.name, right.key),
+          ),
+        );
+
+        setPermissions(items);
+        setApplications(applicationItems);
+        setCount(permissionsResponse.data.count ?? items.length);
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        setErrorMessage(
+          isAxiosError(error)
+            ? error.response?.data?.message ?? "Unable to load permissions."
+            : "Unable to load permissions.",
+        );
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void loadPageData();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  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);
+    setErrorMessage(null);
+
+    try {
+      const response = await api.get<ListResponse<PermissionRecord>>("/permissions", {
+        params: {
+          skip: permissions.length,
+          take: PAGE_SIZE,
+        },
+      });
+
+      const nextItems = sortPermissions(getItems(response.data));
+
+      setPermissions((current) => [...current, ...nextItems]);
+      setCount(response.data.count ?? permissions.length + nextItems.length);
+    } catch (error) {
+      setErrorMessage(
+        isAxiosError(error)
+          ? error.response?.data?.message ?? "Unable to load more permissions."
+          : "Unable to load more permissions.",
+      );
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
+  return (
+    <section className="p-6">
+      <div className="space-y-6 rounded-2xl border border-border bg-card p-8 shadow-sm">
+        <div className="space-y-3">
+          <p className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
+            User Management
+          </p>
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-semibold text-foreground">Permissions</h1>
+              <p className="mt-3 max-w-2xl text-sm text-muted-foreground">
+                Browse the full IAM permission catalog for the freight backoffice environment.
+              </p>
+            </div>
+            <div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
+              {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...
+          </div>
+        ) : errorMessage ? (
+          <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>
+        ) : filteredPermissions.length ? (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+            {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"
+              >
+                <div className="min-w-0 space-y-1">
+                  <p className="truncate text-sm font-semibold leading-5 text-foreground">
+                    {getLocaleLabel(permission.name, permission.key)}
+                  </p>
+                  <p className="truncate font-mono text-xs text-muted-foreground/90">
+                    {permission.key}
+                  </p>
+                </div>
+              </article>
+            ))}
+          </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 match the selected application.
+          </div>
+        )}
+
+        {hasMore ? (
+          <div className="flex items-center justify-between gap-4 rounded-2xl border border-border bg-background px-4 py-3">
+            <p className="text-sm text-muted-foreground">
+              Showing {permissions.length} of {count} permissions.
+            </p>
+            <button
+              type="button"
+              onClick={() => void handleLoadMore()}
+              disabled={loadingMore}
+              className="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              {loadingMore ? "Loading..." : "Load more"}
+            </button>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+export default PermissionsPage;

apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/RolesPage.tsx

@@ -1,11 +1,292 @@
-import FeaturePlaceholder from "@/components/FeaturePlaceholder";
+import { useEffect, useState } from "react";
+import { isAxiosError } from "axios";
+import { Shield } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@edr/ui-common";
+
+import { api } from "@/auth/http";
+
+interface LocaleText {
+  en?: string;
+  am?: string;
+}
+
+interface RoleRecord {
+  id: string;
+  key: string;
+  name?: LocaleText;
+}
+
+interface PermissionRecord {
+  id: string;
+  key: string;
+  name?: LocaleText;
+}
+
+interface ListResponse<T> {
+  items?: T[];
+  data?: T[];
+}
+
+const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") =>
+  value?.en ?? value?.am ?? fallback;
+
+const getItems = <T,>(payload: ListResponse<T> | T[] | undefined | null) => {
+  if (!payload) {
+    return [] as T[];
+  }
+
+  if (Array.isArray(payload)) {
+    return payload;
+  }
+
+  return payload.items ?? payload.data ?? [];
+};
 
 const RolesPage = () => {
+  const [roles, setRoles] = useState<RoleRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [selectedRole, setSelectedRole] = useState<RoleRecord | null>(null);
+  const [rolePermissions, setRolePermissions] = useState<PermissionRecord[]>([]);
+  const [rolePermissionsLoading, setRolePermissionsLoading] = useState(false);
+  const [rolePermissionsError, setRolePermissionsError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadRoles = async () => {
+      setLoading(true);
+      setErrorMessage(null);
+
+      try {
+        const response = await api.get<ListResponse<RoleRecord>>("/roles");
+
+        if (!isMounted) {
+          return;
+        }
+
+        setRoles(
+          getItems(response.data).sort((left, right) =>
+            getLocaleLabel(left.name, left.key).localeCompare(
+              getLocaleLabel(right.name, right.key),
+            ),
+          ),
+        );
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        setErrorMessage(
+          isAxiosError(error)
+            ? error.response?.data?.message ?? "Unable to load roles."
+            : "Unable to load roles.",
+        );
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void loadRoles();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!selectedRole) {
+      setRolePermissions([]);
+      setRolePermissionsError(null);
+      setRolePermissionsLoading(false);
+      return;
+    }
+
+    let isMounted = true;
+
+    const loadRolePermissions = async () => {
+      setRolePermissionsLoading(true);
+      setRolePermissionsError(null);
+
+      try {
+        const response = await api.get<ListResponse<PermissionRecord>>(
+          `/role-permissions/given-first/${selectedRole.id}`,
+        );
+
+        if (!isMounted) {
+          return;
+        }
+
+        setRolePermissions(
+          getItems(response.data).sort((left, right) =>
+            getLocaleLabel(left.name, left.key).localeCompare(
+              getLocaleLabel(right.name, right.key),
+            ),
+          ),
+        );
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        setRolePermissionsError(
+          isAxiosError(error)
+            ? error.response?.data?.message ?? "Unable to load role details."
+            : "Unable to load role details.",
+        );
+      } finally {
+        if (isMounted) {
+          setRolePermissionsLoading(false);
+        }
+      }
+    };
+
+    void loadRolePermissions();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [selectedRole]);
+
   return (
-    <FeaturePlaceholder
-      title="Roles"
-      description="Define backoffice access roles, capability groups, and permission boundaries for freight administration."
-    />
+    <section className="p-6">
+      <div className="space-y-6 rounded-2xl border border-border bg-card p-8 shadow-sm">
+        <div className="space-y-3">
+          <p className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
+            User Management
+          </p>
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-semibold text-foreground">Roles</h1>
+              <p className="mt-3 max-w-2xl text-sm text-muted-foreground">
+                Browse freight backoffice roles and their internal keys in a simple grid view.
+              </p>
+            </div>
+            <div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
+              {roles.length} roles
+            </div>
+          </div>
+        </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 roles...
+          </div>
+        ) : errorMessage ? (
+          <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>
+        ) : roles.length ? (
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+            {roles.map((role) => (
+              <button
+                key={role.id}
+                type="button"
+                onClick={() => setSelectedRole(role)}
+                className="rounded-2xl border border-border bg-background p-5 text-left transition hover:border-border/80 hover:bg-accent/20"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 text-sky-600 dark:bg-sky-950/40 dark:text-sky-300">
+                    <Shield className="h-5 w-5" />
+                  </div>
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-semibold text-foreground">
+                      {getLocaleLabel(role.name, role.key)}
+                    </p>
+                    <p className="truncate text-xs text-muted-foreground">{role.key}</p>
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+        ) : (
+          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            No roles available.
+          </div>
+        )}
+      </div>
+
+      <Dialog open={Boolean(selectedRole)} onOpenChange={(open) => !open && setSelectedRole(null)}>
+        <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{selectedRole ? getLocaleLabel(selectedRole.name, selectedRole.key) : "Role details"}</DialogTitle>
+            <DialogDescription>
+              {selectedRole
+                ? `Review the permission set assigned to ${getLocaleLabel(selectedRole.name, selectedRole.key)}.`
+                : undefined}
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedRole ? (
+            <div className="space-y-6">
+              <div className="grid gap-4 rounded-2xl border border-border bg-muted/40 p-4 sm:grid-cols-2">
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Role name
+                  </p>
+                  <p className="mt-2 text-sm font-semibold text-foreground">
+                    {getLocaleLabel(selectedRole.name, selectedRole.key)}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Role key
+                  </p>
+                  <p className="mt-2 font-mono text-sm text-foreground">{selectedRole.key}</p>
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <div className="flex items-center justify-between gap-3">
+                  <h2 className="text-sm font-semibold text-foreground">Permissions</h2>
+                  <div className="rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
+                    {rolePermissions.length} permissions
+                  </div>
+                </div>
+
+                {rolePermissionsLoading ? (
+                  <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+                    Loading role details...
+                  </div>
+                ) : rolePermissionsError ? (
+                  <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">
+                    {rolePermissionsError}
+                  </div>
+                ) : rolePermissions.length ? (
+                  <div className="grid gap-3 md:grid-cols-2">
+                    {rolePermissions.map((permission) => (
+                      <article
+                        key={permission.id}
+                        className="rounded-2xl border border-border/70 bg-background/80 p-4 shadow-sm"
+                      >
+                        <p className="truncate text-sm font-semibold leading-5 text-foreground">
+                          {getLocaleLabel(permission.name, permission.key)}
+                        </p>
+                        <p className="mt-1 truncate font-mono text-xs text-muted-foreground/90">
+                          {permission.key}
+                        </p>
+                      </article>
+                    ))}
+                  </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 assigned to this role.
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </section>
   );
 };