WIP

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

@@ -7,6 +7,7 @@ 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 PositionTypesPage from "./pages/dashboard/user-management/PositionTypesPage";
 import RolesPage from "./pages/dashboard/user-management/RolesPage";
 import UserManagementPage from "./pages/dashboard/user-management/UserManagementPage";
 import UsersPage from "./pages/dashboard/user-management/UsersPage";
@@ -42,6 +43,10 @@ const baseSidebarItems: SidebarItem[] = [
         label: "Users",
         href: "/dashboard/user-management/users",
       },
+      {
+        label: "Position Type",
+        href: "/dashboard/user-management/position-types",
+      },
       {
         label: "Employees",
         href: "/dashboard/user-management/employees",
@@ -161,6 +166,7 @@ const App = () => {
 
           <Route path="user-management" element={<UserManagementPage />} />
           <Route path="user-management/users" element={<UsersPage />} />
+          <Route path="user-management/position-types" element={<PositionTypesPage />} />
           <Route path="user-management/employees" element={<EmployeesPage />} />
           <Route path="user-management/permissions" element={<PermissionsPage />} />
           <Route path="user-management/roles" element={<RolesPage />} />
@@ -188,4 +194,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;

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

@@ -0,0 +1,590 @@
+import { useEffect, useMemo, useState } from "react";
+import { isAxiosError } from "axios";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@edr/ui-common";
+
+import { api } from "@/auth/http";
+import { useAuth } from "@/auth/useAuth";
+
+interface LocaleText {
+  en?: string;
+  am?: string;
+}
+
+interface OrganizationRecord {
+  id: string;
+  key: string;
+  name?: LocaleText;
+}
+
+interface UnitRecord {
+  id: string;
+  key: string;
+  name?: LocaleText;
+}
+
+interface PositionTypeRecord {
+  id: string;
+  key: string;
+  name?: LocaleText;
+  isSystem?: boolean;
+  unitId?: string | null;
+  createdAt?: string;
+  updatedAt?: string | null;
+}
+
+interface PermissionRecord {
+  id: string;
+  key: string;
+  name?: LocaleText;
+}
+
+interface ListResponse<T> {
+  count?: number;
+  items?: T[];
+  data?: T[];
+}
+
+const PAGE_SIZE = 1000;
+
+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 formatDate = (value?: string | null) => {
+  if (!value) {
+    return "-";
+  }
+
+  const date = new Date(value);
+
+  if (Number.isNaN(date.getTime())) {
+    return "-";
+  }
+
+  return new Intl.DateTimeFormat("en", {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date);
+};
+
+const PositionTypesPage = () => {
+  const { user } = useAuth();
+  const [organizations, setOrganizations] = useState<OrganizationRecord[]>([]);
+  const [units, setUnits] = useState<UnitRecord[]>([]);
+  const [positionTypes, setPositionTypes] = useState<PositionTypeRecord[]>([]);
+  const [selectedOrgId, setSelectedOrgId] = useState("");
+  const [selectedUnitId, setSelectedUnitId] = useState("");
+  const [loadingOrganizations, setLoadingOrganizations] = useState(true);
+  const [loadingUnits, setLoadingUnits] = useState(false);
+  const [loadingPositionTypes, setLoadingPositionTypes] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [selectedPositionType, setSelectedPositionType] = useState<PositionTypeRecord | null>(null);
+  const [positionTypePermissions, setPositionTypePermissions] = useState<PermissionRecord[]>([]);
+  const [permissionsLoading, setPermissionsLoading] = useState(false);
+  const [permissionsError, setPermissionsError] = useState<string | null>(null);
+
+  const isSuperAdmin = Boolean(user?.roles?.some((role) => role.key === "super_admin"));
+  const allowedOrgIds = useMemo(
+    () =>
+      new Set(
+        (user?.employee ?? [])
+          .map((employee) => employee.organizationId)
+          .filter((organizationId): organizationId is string => Boolean(organizationId)),
+      ),
+    [user?.employee],
+  );
+
+  const visibleOrganizations = useMemo(() => {
+    if (isSuperAdmin) {
+      return organizations;
+    }
+
+    return organizations.filter((organization) => allowedOrgIds.has(organization.id));
+  }, [allowedOrgIds, isSuperAdmin, organizations]);
+
+  const selectedOrganization =
+    visibleOrganizations.find((organization) => organization.id === selectedOrgId) ?? null;
+  const selectedUnit = units.find((unit) => unit.id === selectedUnitId) ?? null;
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadOrganizations = async () => {
+      setLoadingOrganizations(true);
+      setErrorMessage(null);
+
+      try {
+        const response = await api.get<ListResponse<OrganizationRecord>>("/organizations");
+
+        if (!isMounted) {
+          return;
+        }
+
+        setOrganizations(getItems(response.data));
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        setErrorMessage(
+          isAxiosError(error)
+            ? error.response?.data?.message ?? "Unable to load organizations."
+            : "Unable to load organizations.",
+        );
+      } finally {
+        if (isMounted) {
+          setLoadingOrganizations(false);
+        }
+      }
+    };
+
+    void loadOrganizations();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!visibleOrganizations.length) {
+      setSelectedOrgId("");
+      setSelectedUnitId("");
+      setUnits([]);
+      setPositionTypes([]);
+      return;
+    }
+
+    if (selectedOrgId && visibleOrganizations.some((organization) => organization.id === selectedOrgId)) {
+      return;
+    }
+
+    setSelectedOrgId(visibleOrganizations[0]?.id ?? "");
+  }, [selectedOrgId, visibleOrganizations]);
+
+  useEffect(() => {
+    if (!selectedOrgId) {
+      setUnits([]);
+      setSelectedUnitId("");
+      setPositionTypes([]);
+      return;
+    }
+
+    let isMounted = true;
+
+    const loadUnits = async () => {
+      setLoadingUnits(true);
+      setErrorMessage(null);
+      setSelectedUnitId("");
+      setPositionTypes([]);
+
+      try {
+        const response = await api.get<ListResponse<UnitRecord>>(`/units/list/${selectedOrgId}`);
+        const items = getItems(response.data);
+
+        if (!isMounted) {
+          return;
+        }
+
+        setUnits(items);
+        setSelectedUnitId(items[0]?.id ?? "");
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        setUnits([]);
+        setErrorMessage(
+          isAxiosError(error)
+            ? error.response?.data?.message ?? "Unable to load units."
+            : "Unable to load units.",
+        );
+      } finally {
+        if (isMounted) {
+          setLoadingUnits(false);
+        }
+      }
+    };
+
+    void loadUnits();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [selectedOrgId]);
+
+  useEffect(() => {
+    if (!selectedUnitId) {
+      setPositionTypes([]);
+      return;
+    }
+
+    let isMounted = true;
+
+    const loadPositionTypes = async () => {
+      setLoadingPositionTypes(true);
+      setErrorMessage(null);
+
+      try {
+        const response = await api.get<ListResponse<PositionTypeRecord>>(
+          `/position-types/list-with-commons/${selectedUnitId}`,
+          {
+            params: {
+              skip: 0,
+              take: PAGE_SIZE,
+              orderBy: "createdAt:Desc",
+            },
+          },
+        );
+
+        if (!isMounted) {
+          return;
+        }
+
+        setPositionTypes(getItems(response.data));
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        setPositionTypes([]);
+        setErrorMessage(
+          isAxiosError(error)
+            ? error.response?.data?.message ?? "Unable to load position types."
+            : "Unable to load position types.",
+        );
+      } finally {
+        if (isMounted) {
+          setLoadingPositionTypes(false);
+        }
+      }
+    };
+
+    void loadPositionTypes();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [selectedUnitId]);
+
+  useEffect(() => {
+    if (!selectedPositionType) {
+      setPositionTypePermissions([]);
+      setPermissionsError(null);
+      setPermissionsLoading(false);
+      return;
+    }
+
+    let isMounted = true;
+
+    const loadPermissions = async () => {
+      setPermissionsLoading(true);
+      setPermissionsError(null);
+
+      try {
+        const response = await api.get<ListResponse<PermissionRecord>>(
+          `/position-type-permissions/given-first/${selectedPositionType.id}`,
+        );
+
+        if (!isMounted) {
+          return;
+        }
+
+        setPositionTypePermissions(getItems(response.data));
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        setPositionTypePermissions([]);
+        setPermissionsError(
+          isAxiosError(error)
+            ? error.response?.data?.message ?? "Unable to load position type permissions."
+            : "Unable to load position type permissions.",
+        );
+      } finally {
+        if (isMounted) {
+          setPermissionsLoading(false);
+        }
+      }
+    };
+
+    void loadPermissions();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [selectedPositionType]);
+
+  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">Position Type</h1>
+              <p className="mt-3 max-w-2xl text-sm text-muted-foreground">
+                Browse position types for a selected organization unit, including shared system entries.
+              </p>
+            </div>
+            <div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
+              {positionTypes.length} position types
+            </div>
+          </div>
+        </div>
+
+        <div className="grid gap-3 rounded-2xl border border-border bg-background/60 p-4 md:grid-cols-2 xl:grid-cols-[minmax(0,280px)_minmax(0,280px)_1fr] xl:items-end">
+          <div className="space-y-2">
+            <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+              Organization
+            </p>
+            <Select
+              value={selectedOrgId || undefined}
+              onValueChange={setSelectedOrgId}
+              disabled={loadingOrganizations || !visibleOrganizations.length}
+            >
+              <SelectTrigger className="w-full rounded-xl bg-background">
+                <SelectValue placeholder={loadingOrganizations ? "Loading organizations..." : "Select organization"} />
+              </SelectTrigger>
+              <SelectContent>
+                {visibleOrganizations.map((organization) => (
+                  <SelectItem key={organization.id} value={organization.id}>
+                    {getLocaleLabel(organization.name, organization.key)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+              Unit
+            </p>
+            <Select
+              value={selectedUnitId || undefined}
+              onValueChange={setSelectedUnitId}
+              disabled={!selectedOrgId || loadingUnits || !units.length}
+            >
+              <SelectTrigger className="w-full rounded-xl bg-background">
+                <SelectValue placeholder={loadingUnits ? "Loading units..." : "Select unit"} />
+              </SelectTrigger>
+              <SelectContent>
+                {units.map((unit) => (
+                  <SelectItem key={unit.id} value={unit.id}>
+                    {getLocaleLabel(unit.name, unit.key)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <p className="text-sm text-muted-foreground">
+            {selectedOrganization && selectedUnit
+              ? `Showing position types for ${getLocaleLabel(selectedUnit.name, selectedUnit.key)} in ${getLocaleLabel(selectedOrganization.name, selectedOrganization.key)}.`
+              : "Select an organization and unit to load position types."}
+          </p>
+        </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>
+        ) : loadingOrganizations || loadingUnits || loadingPositionTypes ? (
+          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            Loading position types...
+          </div>
+        ) : !visibleOrganizations.length ? (
+          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            No organization scope is available for this account.
+          </div>
+        ) : !selectedOrgId ? (
+          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            Select an organization to continue.
+          </div>
+        ) : !units.length ? (
+          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            No units are available for the selected organization.
+          </div>
+        ) : !selectedUnitId ? (
+          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            Select a unit to load position types.
+          </div>
+        ) : positionTypes.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">Key</th>
+                  <th className="px-4 py-3 font-medium">Scope</th>
+                  <th className="px-4 py-3 font-medium">Unit ID</th>
+                  <th className="px-4 py-3 font-medium">Created At</th>
+                  <th className="px-4 py-3 font-medium">Updated At</th>
+                </tr>
+              </thead>
+              <tbody>
+                {positionTypes.map((positionType) => (
+                  <tr
+                    key={positionType.id}
+                    onClick={() => setSelectedPositionType(positionType)}
+                    className="cursor-pointer border-t border-border bg-background transition hover:bg-accent/20"
+                  >
+                    <td className="px-4 py-3 font-medium text-foreground">
+                      {getLocaleLabel(positionType.name, positionType.key)}
+                    </td>
+                    <td className="px-4 py-3 font-mono text-muted-foreground">{positionType.key}</td>
+                    <td className="px-4 py-3 text-muted-foreground">
+                      {positionType.isSystem ? "System" : "Unit"}
+                    </td>
+                    <td className="px-4 py-3 font-mono text-muted-foreground">
+                      {positionType.unitId ?? "-"}
+                    </td>
+                    <td className="px-4 py-3 text-muted-foreground">
+                      {formatDate(positionType.createdAt)}
+                    </td>
+                    <td className="px-4 py-3 text-muted-foreground">
+                      {formatDate(positionType.updatedAt)}
+                    </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 position types were found for the selected unit.
+          </div>
+        )}
+      </div>
+
+      <Dialog
+        open={Boolean(selectedPositionType)}
+        onOpenChange={(open) => !open && setSelectedPositionType(null)}
+      >
+        <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {selectedPositionType
+                ? getLocaleLabel(selectedPositionType.name, selectedPositionType.key)
+                : "Position type details"}
+            </DialogTitle>
+            <DialogDescription>
+              {selectedPositionType
+                ? `Review the permission set assigned to ${getLocaleLabel(selectedPositionType.name, selectedPositionType.key)}.`
+                : undefined}
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedPositionType ? (
+            <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">
+                    Position type
+                  </p>
+                  <p className="mt-2 text-sm font-semibold text-foreground">
+                    {getLocaleLabel(selectedPositionType.name, selectedPositionType.key)}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Key
+                  </p>
+                  <p className="mt-2 font-mono text-sm text-foreground">
+                    {selectedPositionType.key}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Scope
+                  </p>
+                  <p className="mt-2 text-sm text-foreground">
+                    {selectedPositionType.isSystem ? "System" : "Unit"}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Unit ID
+                  </p>
+                  <p className="mt-2 font-mono text-sm text-foreground">
+                    {selectedPositionType.unitId ?? "-"}
+                  </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">
+                    {positionTypePermissions.length} permissions
+                  </div>
+                </div>
+
+                {permissionsLoading ? (
+                  <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+                    Loading position type permissions...
+                  </div>
+                ) : permissionsError ? (
+                  <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">
+                    {permissionsError}
+                  </div>
+                ) : positionTypePermissions.length ? (
+                  <div className="grid gap-3 md:grid-cols-2">
+                    {positionTypePermissions.map((permission) => (
+                      <article
+                        key={permission.id}
+                        className="rounded-2xl border border-border/70 bg-background/80 p-4 shadow-sm"
+                      >
+                        <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 are assigned to this position type.
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </section>
+  );
+};
+
+export default PositionTypesPage;