feat(freight:backoffice): Added employees page

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

@@ -5,6 +5,7 @@ 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";
@@ -21,6 +22,10 @@ const sidebarItems: SidebarItem[] = [
     href: "/dashboard/user-management",
     icon: <Network />,
     children: [
+      {
+        label: "Employees",
+        href: "/dashboard/user-management/employees",
+      },
       {
         label: "Permissions",
         href: "/dashboard/user-management/permissions",
@@ -79,6 +84,7 @@ 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 />} />

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;