diff --git a/apps/edr-freight-web/backoffice/src/App.tsx b/apps/edr-freight-web/backoffice/src/App.tsx
index 51ee212d7..2591d395c 100644
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -63,11 +63,8 @@ import CustomerDetailPage from "./pages/customers/CustomerDetailPage";
 import CustomersPage from "./pages/customers/CustomersPage";
 import InvoiceDetailPage from "./pages/invoices/InvoiceDetailPage";
 import InvoicesPage from "./pages/invoices/InvoicesPage";
-import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
-import DemoUser2Page from "./pages/dashboard/demo/DemoUser2Page";
 import MyProfilePage from "./pages/dashboard/MyProfilePage";
 import OverviewPage from "./pages/dashboard/OverviewPage";
-import UserManagementHostPage from "./pages/dashboard/user-management/UserManagementHostPage";
 import PaymentsPage from "./pages/payments/PaymentsPage";
 //import EmployeesPage from "./pages/dashboard/user-management/EmployeesPage";
 import { RequirePermission } from "./components/auth/RequirePermission";
@@ -78,11 +75,6 @@ import {
   isEthiopianGl,
   isSuperAdmin,
 } from "./lib/permissions";
-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";
 import FileUploadSettingsPage from "./pages/documents/FileUploadSettingsPage";
 import DropdownSettingsPage from "./pages/dropdown_settings/DropdownSettingsPage";
 import ContractTemplatesPage from "./pages/contract_templates/ContractTemplatesPage";
@@ -661,7 +653,7 @@ const App = () => {
     return (
       <Routes>
         <Route path="/auth" element={<LoginPage />} />
-        <Route path="/um/*" element={<UserManagementHostPage />} />
+        {/* <Route path="/um/*" element={<UserManagementHostPage />} /> */}
         <Route path="/callback" element={<FaydaCallbackPage />} />
         <Route path="*" element={<Navigate to="/auth" replace />} />
       </Routes>
@@ -671,7 +663,7 @@ const App = () => {
   return (
     <Routes>
       {UserManagementRoutes()}
-      <Route path="/um/*" element={<UserManagementHostPage />} />
+      {/* <Route path="/um/*" element={<UserManagementHostPage />} /> */}
       <Route path="/health" element={<HealthCheck />} />
       <Route path="/callback" element={<FaydaCallbackPage />} />
       <Route path="/" element={<Navigate to="/dashboard/overview" replace />} />
@@ -1342,10 +1334,6 @@ const App = () => {
           path="rule-engine/:resource"
           element={<RuleEngineLegacyRedirect />}
         />
-
-        <Route path="user1" element={<DemoUser1Page />} />
-        <Route path="user2" element={<DemoUser2Page />} />
-
         <Route path="org-structure" element={<Navigate to="/um" replace />} />
         <Route path="org-structure/*" element={<Navigate to="/um" replace />} />
       </Route>
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser1Page.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser1Page.tsx
deleted file mode 100644
index e47cb95bd..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser1Page.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { api } from "@/auth/http";
-
-const DemoUser1Page = () => {
-  const [data, setData] = useState<unknown>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const run = async () => {
-      setLoading(true);
-      setError(null);
-
-      try {
-        const response = await api.get("/test_user1");
-        if (cancelled) return;
-        setData(response.data);
-      } catch (e: any) {
-        if (cancelled) return;
-        const message =
-          e?.response?.data?.message ||
-          e?.response?.data?.error ||
-          e?.message ||
-          "Request failed";
-        setError(String(message));
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    };
-
-    void run();
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  return (
-    <div className="p-6">
-      <div className="rounded-2xl border border-border bg-card p-6">
-        <h1 className="text-lg font-semibold text-foreground">User1 Demo</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Calls <code className="font-mono">GET /api/test_user1</code> (requires{' '}
-          <code className="font-mono">can:demo:user1</code>).
-        </p>
-
-        <div className="mt-4">
-          {loading ? <p className="text-sm text-muted-foreground">Loading...</p> : null}
-          {error ? (
-            <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-              {error}
-            </div>
-          ) : null}
-          {!loading && !error ? (
-            <pre className="mt-3 overflow-auto rounded-xl border border-border bg-background p-4 text-xs text-foreground">
-              {JSON.stringify(data, null, 2)}
-            </pre>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DemoUser1Page;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser2Page.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser2Page.tsx
deleted file mode 100644
index 5ef7ad172..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser2Page.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { api } from "@/auth/http";
-
-const DemoUser2Page = () => {
-  const [data, setData] = useState<unknown>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const run = async () => {
-      setLoading(true);
-      setError(null);
-
-      try {
-        const response = await api.get("/test_user2");
-        if (cancelled) return;
-        setData(response.data);
-      } catch (e: any) {
-        if (cancelled) return;
-        const message =
-          e?.response?.data?.message ||
-          e?.response?.data?.error ||
-          e?.message ||
-          "Request failed";
-        setError(String(message));
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    };
-
-    void run();
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  return (
-    <div className="p-6">
-      <div className="rounded-2xl border border-border bg-card p-6">
-        <h1 className="text-lg font-semibold text-foreground">User2 Demo</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Calls <code className="font-mono">GET /api/test_user2</code> (requires{' '}
-          <code className="font-mono">can:demo:user2</code>).
-        </p>
-
-        <div className="mt-4">
-          {loading ? <p className="text-sm text-muted-foreground">Loading...</p> : null}
-          {error ? (
-            <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-              {error}
-            </div>
-          ) : null}
-          {!loading && !error ? (
-            <pre className="mt-3 overflow-auto rounded-xl border border-border bg-background p-4 text-xs text-foreground">
-              {JSON.stringify(data, null, 2)}
-            </pre>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DemoUser2Page;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/org-structure/OrgStructurePage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/org-structure/OrgStructurePage.tsx
deleted file mode 100644
index fdfc522af..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/org-structure/OrgStructurePage.tsx
+++ /dev/null
@@ -1,1604 +0,0 @@
-import { type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@edr/ui-common";
-import {
-  Building2,
-  ChevronRight,
-  FolderTree,
-  Network,
-  Plus,
-  RefreshCw,
-  Save,
-  Search,
-  Trash2,
-  UserPlus,
-  Users,
-} from "lucide-react";
-
-import { api } from "@/auth/http";
-
-interface LocaleText {
-  en?: string;
-  am?: string;
-}
-
-interface OrganizationRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-}
-
-interface UnitRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-  parentUnitId?: string | null;
-}
-
-interface PositionRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-  parentPositionId?: string | null;
-  rank?: number;
-}
-
-interface EmployeeUserRecord {
-  id: string;
-  name?: LocaleText;
-  email?: string;
-  username?: string;
-}
-
-interface EmployeePositionSummary {
-  id: string;
-  position?: {
-    id: string;
-    name?: LocaleText;
-  };
-}
-
-interface EmployeeRecord {
-  id: string;
-  name?: LocaleText;
-  user?: EmployeeUserRecord;
-  status?: string;
-  employeePositions?: EmployeePositionSummary[];
-}
-
-interface PositionTreeNode extends PositionRecord {
-  children: PositionTreeNode[];
-}
-
-interface PositionFormState {
-  id?: string;
-  nameEn: string;
-  nameAm: string;
-  key: string;
-  parentPositionId: string;
-}
-
-interface EmployeeInviteFormState {
-  nameEn: string;
-  nameAm: string;
-  email: string;
-  username: string;
-  phoneNumber: string;
-}
-
-interface ListResponse<T> {
-  count?: number;
-  items?: T[];
-  data?: T[];
-}
-
-const ORG_KEY = "edr_freight";
-const emptyInviteForm: EmployeeInviteFormState = {
-  nameEn: "",
-  nameAm: "",
-  email: "",
-  username: "",
-  phoneNumber: "",
-};
-const emptyPositionForm: PositionFormState = {
-  nameEn: "",
-  nameAm: "",
-  key: "",
-  parentPositionId: "",
-};
-
-const inputClassName =
-  "w-full rounded-xl border border-border bg-background px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 dark:focus:ring-emerald-950";
-const buttonClassName =
-  "inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-60";
-
-const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") => {
-  if (!value) {
-    return fallback;
-  }
-
-  return 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 toInternalKey = (value: string) =>
-  value
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "_")
-    .replace(/^_+|_+$/g, "")
-    .replace(/_+/g, "_");
-
-const buildTree = (positions: PositionRecord[]) => {
-  const nodes = new Map<string, PositionTreeNode>();
-
-  positions.forEach((position) => {
-    nodes.set(position.id, { ...position, children: [] });
-  });
-
-  const roots: PositionTreeNode[] = [];
-
-  nodes.forEach((node) => {
-    if (node.parentPositionId) {
-      const parent = nodes.get(node.parentPositionId);
-
-      if (parent) {
-        parent.children.push(node);
-        return;
-      }
-    }
-
-    roots.push(node);
-  });
-
-  const sortNodes = (items: PositionTreeNode[]) => {
-    items.sort((left, right) => {
-      const rankDiff = (left.rank ?? 0) - (right.rank ?? 0);
-      if (rankDiff !== 0) {
-        return rankDiff;
-      }
-
-      return getLocaleLabel(left.name, left.key).localeCompare(
-        getLocaleLabel(right.name, right.key),
-      );
-    });
-
-    items.forEach((item) => sortNodes(item.children));
-  };
-
-  sortNodes(roots);
-
-  return roots;
-};
-
-const Field = ({ label, children }: { label: string; children: ReactNode }) => (
-  <label className="flex flex-col gap-2 text-sm">
-    <span className="font-medium text-foreground">{label}</span>
-    {children}
-  </label>
-);
-
-const ReadOnlyField = ({ label, value }: { label: string; value: string }) => (
-  <div className="flex flex-col gap-2 text-sm">
-    <span className="font-medium text-foreground">{label}</span>
-    <div className="rounded-xl border border-border bg-muted px-3 py-2.5 text-sm text-card-foreground">
-      {value || "-"}
-    </div>
-  </div>
-);
-
-const TreeNode = ({
-  node,
-  depth = 0,
-  selectedPositionId,
-  onSelect,
-}: {
-  node: PositionTreeNode;
-  depth?: number;
-  selectedPositionId: string | null;
-  onSelect: (node: PositionRecord) => void;
-}) => {
-  const hasChildren = node.children.length > 0;
-  const isSelected = selectedPositionId === node.id;
-
-  return (
-    <li>
-      <button
-        type="button"
-        onClick={() => onSelect(node)}
-        className={`flex w-full items-center gap-2 rounded-xl border px-3 py-2 text-left text-sm shadow-sm transition ${
-          isSelected
-            ? "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-100"
-            : "border-border bg-card text-card-foreground hover:border-emerald-200 hover:bg-emerald-50/80 dark:hover:bg-slate-900"
-        }`}
-        style={{ marginLeft: depth * 14 }}
-      >
-        <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-950/40 dark:text-emerald-300">
-          {hasChildren ? <FolderTree className="h-4 w-4" /> : <Building2 className="h-4 w-4" />}
-        </span>
-        <div className="min-w-0 flex-1">
-          <div className="truncate font-medium">{getLocaleLabel(node.name, node.key)}</div>
-          <div className="truncate text-xs text-muted-foreground">{node.key}</div>
-        </div>
-        {hasChildren ? <ChevronRight className="h-4 w-4 text-muted-foreground" /> : null}
-      </button>
-
-      {hasChildren ? (
-        <ul className="mt-2 space-y-2">
-          {node.children.map((child) => (
-            <TreeNode
-              key={child.id}
-              node={child}
-              depth={depth + 1}
-              selectedPositionId={selectedPositionId}
-              onSelect={onSelect}
-            />
-          ))}
-        </ul>
-      ) : null}
-    </li>
-  );
-};
-
-const OrgStructurePage = () => {
-  const navigate = useNavigate();
-  const { unitId, section } = useParams();
-  const activeSection = section === "employees" ? "employees" : "positions";
-
-  const [organization, setOrganization] = useState<OrganizationRecord | null>(null);
-  const [units, setUnits] = useState<UnitRecord[]>([]);
-  const [positions, setPositions] = useState<PositionRecord[]>([]);
-  const [orgEmployees, setOrgEmployees] = useState<EmployeeRecord[]>([]);
-  const [positionMembers, setPositionMembers] = useState<EmployeeRecord[]>([]);
-  const [selectedPositionId, setSelectedPositionId] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [membersLoading, setMembersLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [actionError, setActionError] = useState<string | null>(null);
-  const [actionSuccess, setActionSuccess] = useState<string | null>(null);
-  const [unitSearch, setUnitSearch] = useState("");
-  const [isCreateUnitOpen, setIsCreateUnitOpen] = useState(false);
-  const [isCreatePositionOpen, setIsCreatePositionOpen] = useState(false);
-  const [isInviteEmployeeOpen, setIsInviteEmployeeOpen] = useState(false);
-  const [isUnitEditing, setIsUnitEditing] = useState(false);
-  const [isPositionEditing, setIsPositionEditing] = useState(false);
-  const [unitNameEn, setUnitNameEn] = useState("");
-  const [unitNameAm, setUnitNameAm] = useState("");
-  const [unitFormKey, setUnitFormKey] = useState("");
-  const [createPositionMode, setCreatePositionMode] = useState<"create-root" | "create-child">(
-    "create-root",
-  );
-  const [positionForm, setPositionForm] = useState<PositionFormState>(emptyPositionForm);
-  const [inviteForm, setInviteForm] = useState<EmployeeInviteFormState>(emptyInviteForm);
-  const [submitting, setSubmitting] = useState(false);
-
-  const selectedUnit = useMemo(
-    () => units.find((item) => item.id === unitId) ?? null,
-    [unitId, units],
-  );
-  const tree = useMemo(() => buildTree(positions), [positions]);
-  const selectedPosition = useMemo(
-    () => positions.find((item) => item.id === selectedPositionId) ?? null,
-    [positions, selectedPositionId],
-  );
-  const filteredUnits = useMemo(() => {
-    const query = unitSearch.trim().toLowerCase();
-    if (!query) {
-      return units;
-    }
-
-    return units.filter((item) => {
-      const label = getLocaleLabel(item.name, item.key).toLowerCase();
-      return label.includes(query) || item.key.toLowerCase().includes(query);
-    });
-  }, [unitSearch, units]);
-  const parentOptions = useMemo(
-    () => positions.filter((item) => item.id !== selectedPositionId),
-    [positions, selectedPositionId],
-  );
-  const selectedPositionParent = useMemo(
-    () => positions.find((item) => item.id === selectedPosition?.parentPositionId) ?? null,
-    [positions, selectedPosition],
-  );
-
-  const resetMessages = () => {
-    setActionError(null);
-    setActionSuccess(null);
-  };
-
-  const resetUnitForm = useCallback(() => {
-    setUnitNameEn("");
-    setUnitNameAm("");
-    setUnitFormKey("");
-  }, []);
-
-  const syncUnitFormFromSelectedUnit = useCallback((unit: UnitRecord | null) => {
-    setUnitNameEn(unit?.name.en ?? "");
-    setUnitNameAm(unit?.name.am ?? "");
-    setUnitFormKey(unit?.key ?? "");
-  }, []);
-
-  const syncPositionFormForCreate = useCallback(
-    (mode: "create-root" | "create-child") => {
-      setCreatePositionMode(mode);
-      setPositionForm({
-        ...emptyPositionForm,
-        parentPositionId: mode === "create-child" && selectedPosition ? selectedPosition.id : "",
-      });
-    },
-    [selectedPosition],
-  );
-
-  const syncPositionFormFromSelectedPosition = useCallback((position: PositionRecord | null) => {
-    if (!position) {
-      setPositionForm(emptyPositionForm);
-      return;
-    }
-
-    setPositionForm({
-      id: position.id,
-      nameEn: position.name.en ?? "",
-      nameAm: position.name.am ?? "",
-      key: position.key,
-      parentPositionId: position.parentPositionId ?? "",
-    });
-  }, []);
-
-  const loadData = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      const organizationsResponse = await api.get<ListResponse<OrganizationRecord>>("/organizations");
-      const organizations = getItems(organizationsResponse.data);
-      const currentOrganization = organizations.find((item) => item.key === ORG_KEY);
-
-      if (!currentOrganization) {
-        throw new Error("EDR Freight organization has not been seeded yet.");
-      }
-
-      const [unitsResponse, employeesResponse] = await Promise.all([
-        api.get<ListResponse<UnitRecord>>(`/units/list/${currentOrganization.id}`),
-        api.get<ListResponse<EmployeeRecord>>(`/employees/${currentOrganization.id}/by-organization`),
-      ]);
-
-      const currentUnits = getItems(unitsResponse.data);
-      let unitPositions: PositionRecord[] = [];
-
-      if (unitId) {
-        const targetUnit = currentUnits.find((item) => item.id === unitId);
-        if (targetUnit) {
-          const positionsResponse = await api.get<ListResponse<PositionRecord>>(
-            `/positions/list/${targetUnit.id}`,
-          );
-          unitPositions = getItems(positionsResponse.data);
-        }
-      }
-
-      setOrganization(currentOrganization);
-      setUnits(currentUnits);
-      setPositions(unitPositions);
-      setOrgEmployees(getItems(employeesResponse.data));
-    } catch (loadError) {
-      setError(
-        loadError instanceof Error
-          ? loadError.message
-          : "Failed to load organization structure.",
-      );
-      setOrganization(null);
-      setUnits([]);
-      setPositions([]);
-      setOrgEmployees([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [unitId]);
-
-  const loadPositionMembers = useCallback(async (positionId: string | null) => {
-    if (!positionId) {
-      setPositionMembers([]);
-      return;
-    }
-
-    setMembersLoading(true);
-
-    try {
-      const response = await api.get<ListResponse<EmployeeRecord>>(
-        `/positions/current/${positionId}/employees`,
-      );
-      setPositionMembers(getItems(response.data));
-    } catch {
-      setPositionMembers([]);
-    } finally {
-      setMembersLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    void loadData();
-  }, [loadData]);
-
-  useEffect(() => {
-    if (!selectedUnit) {
-      resetUnitForm();
-      setSelectedPositionId(null);
-      setIsUnitEditing(false);
-      setIsPositionEditing(false);
-      setIsCreateUnitOpen(false);
-      setIsCreatePositionOpen(false);
-      setIsInviteEmployeeOpen(false);
-      return;
-    }
-
-    syncUnitFormFromSelectedUnit(selectedUnit);
-    setIsUnitEditing(false);
-    setIsPositionEditing(false);
-    setIsCreatePositionOpen(false);
-    setIsInviteEmployeeOpen(false);
-  }, [resetUnitForm, selectedUnit, syncUnitFormFromSelectedUnit]);
-
-  useEffect(() => {
-    if (!positions.length) {
-      setSelectedPositionId(null);
-      setPositionMembers([]);
-      setIsPositionEditing(false);
-      return;
-    }
-
-    if (selectedPositionId && positions.some((item) => item.id === selectedPositionId)) {
-      return;
-    }
-
-    setSelectedPositionId(positions[0].id);
-  }, [positions, selectedPositionId]);
-
-  useEffect(() => {
-    if (!selectedPosition) {
-      setIsPositionEditing(false);
-      setIsInviteEmployeeOpen(false);
-      setPositionForm(emptyPositionForm);
-      setPositionMembers([]);
-      return;
-    }
-
-    setIsPositionEditing(false);
-    syncPositionFormFromSelectedPosition(selectedPosition);
-    void loadPositionMembers(selectedPosition.id);
-  }, [loadPositionMembers, selectedPosition, syncPositionFormFromSelectedPosition]);
-
-  const goToUnit = (nextUnitId: string, nextSection = activeSection) => {
-    navigate(`/dashboard/org-structure/units/${nextUnitId}/${nextSection}`);
-  };
-
-  const handleRefresh = async () => {
-    resetMessages();
-    await loadData();
-  };
-
-  const handleCreateUnit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!organization) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post("/units", {
-        name: { am: unitNameAm.trim(), en: unitNameEn.trim() },
-        key: unitFormKey.trim(),
-        organizationId: organization.id,
-      });
-
-      resetUnitForm();
-      setActionSuccess("Unit created.");
-      setIsCreateUnitOpen(false);
-      await loadData();
-    } catch (saveError) {
-      setActionError(saveError instanceof Error ? saveError.message : "Failed to create unit.");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleUpdateUnit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!organization || !selectedUnit) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.put(`/units/${selectedUnit.id}`, {
-        name: { am: unitNameAm.trim(), en: unitNameEn.trim() },
-        key: unitFormKey.trim(),
-        organizationId: organization.id,
-      });
-
-      setActionSuccess("Unit updated.");
-      setIsUnitEditing(false);
-      await loadData();
-    } catch (saveError) {
-      setActionError(saveError instanceof Error ? saveError.message : "Failed to update unit.");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleDeleteUnit = async () => {
-    if (!selectedUnit || !window.confirm(`Delete unit '${getLocaleLabel(selectedUnit.name, selectedUnit.key)}'?`)) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.delete(`/units/${selectedUnit.id}`);
-      setActionSuccess("Unit deleted.");
-      setSelectedPositionId(null);
-      navigate("/dashboard/org-structure");
-      await loadData();
-    } catch (deleteError) {
-      setActionError(deleteError instanceof Error ? deleteError.message : "Failed to delete unit.");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleSavePosition = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!organization || !selectedUnit) {
-      setActionError("Select a unit before managing positions.");
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      const payload = {
-        id: positionForm.id,
-        name: { am: positionForm.nameAm.trim(), en: positionForm.nameEn.trim() },
-        key: positionForm.key.trim(),
-        unitId: selectedUnit.id,
-        organizationId: organization.id,
-        parentPositionId: positionForm.parentPositionId || null,
-        rank: 0,
-      };
-
-      if (isPositionEditing && positionForm.id) {
-        const existing = positions.find((item) => item.id === positionForm.id);
-        await api.put(`/positions/${positionForm.id}`, payload);
-
-        if ((existing?.parentPositionId ?? "") !== (positionForm.parentPositionId || "")) {
-          await api.patch("/positions/change-parent", {
-            positionId: positionForm.id,
-            newParentId: positionForm.parentPositionId || null,
-          });
-        }
-
-        setActionSuccess("Position updated.");
-        setIsPositionEditing(false);
-      } else {
-        await api.post("/positions", payload);
-        setActionSuccess("Position created.");
-        syncPositionFormForCreate(createPositionMode);
-        setIsCreatePositionOpen(false);
-      }
-
-      await loadData();
-    } catch (saveError) {
-      setActionError(
-        saveError instanceof Error ? saveError.message : "Failed to save position.",
-      );
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleDeletePosition = async () => {
-    if (!selectedPosition) {
-      return;
-    }
-
-    if (!window.confirm(`Delete position '${getLocaleLabel(selectedPosition.name, selectedPosition.key)}'?`)) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.delete(`/positions/${selectedPosition.id}`);
-      setActionSuccess("Position deleted.");
-      await loadData();
-    } catch (deleteError) {
-      setActionError(
-        deleteError instanceof Error ? deleteError.message : "Failed to delete position.",
-      );
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleInviteEmployee = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!selectedPosition) {
-      setActionError("Select a position before inviting an employee.");
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post("/employee-positions/invite", {
-        positionId: selectedPosition.id,
-        username: inviteForm.username.trim(),
-        phoneNumber: inviteForm.phoneNumber.trim(),
-        email: inviteForm.email.trim(),
-        name: { am: inviteForm.nameAm.trim(), en: inviteForm.nameEn.trim() },
-      });
-
-      setInviteForm(emptyInviteForm);
-      setActionSuccess("Employee invited and assigned to the selected position.");
-      setIsInviteEmployeeOpen(false);
-      await Promise.all([loadData(), loadPositionMembers(selectedPosition.id)]);
-    } catch (inviteError) {
-      setActionError(
-        inviteError instanceof Error ? inviteError.message : "Failed to invite employee.",
-      );
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const positionMemberNames = positionMembers.map((item) => ({
-    id: item.id,
-    name: getLocaleLabel(item.name ?? item.user?.name, item.user?.email ?? item.id),
-    email: item.user?.email,
-  }));
-
-  return (
-    <section className="space-y-6 bg-background p-6 text-foreground">
-      <div className="rounded-3xl border border-border bg-linear-to-br from-emerald-100 via-card to-background p-6 shadow-sm dark:from-emerald-950/30 dark:via-card dark:to-background">
-        <div className="flex flex-wrap items-start justify-between gap-4">
-          <div className="flex items-start gap-4">
-            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300">
-              <Network className="h-6 w-6" />
-            </div>
-            <div className="space-y-2">
-              <p className="text-sm font-medium uppercase tracking-[0.2em] text-emerald-700 dark:text-emerald-300">
-                Org structure
-              </p>
-              <h1 className="text-2xl font-semibold text-foreground">Organization management</h1>
-              <p className="max-w-3xl text-sm text-muted-foreground">
-                Manage units, department positions, and employee onboarding for EDR Freight from a
-                single workspace.
-              </p>
-            </div>
-          </div>
-
-          <button
-            type="button"
-            onClick={() => void handleRefresh()}
-            className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-          >
-            <RefreshCw className="h-4 w-4" />
-            Refresh
-          </button>
-        </div>
-      </div>
-
-      {actionSuccess ? (
-        <div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/30 dark:text-emerald-200">
-          {actionSuccess}
-        </div>
-      ) : null}
-
-      {actionError ? (
-        <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-200">
-          {actionError}
-        </div>
-      ) : null}
-
-      {loading ? (
-        <div className="rounded-3xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
-          Loading organization structure...
-        </div>
-      ) : null}
-
-      {!loading && error ? (
-        <div className="rounded-3xl border border-rose-200 bg-rose-50 p-6 text-sm text-rose-700 shadow-sm dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-200">
-          {error}
-        </div>
-      ) : null}
-
-      {!loading && !error ? (
-        <div className="grid gap-6 xl:grid-cols-[340px_minmax(0,1fr)]">
-          <aside className="rounded-3xl border border-border bg-card p-5 shadow-sm">
-            <div className="mb-5 flex items-center justify-between gap-3">
-              <div>
-                <h2 className="text-lg font-semibold text-card-foreground">Units</h2>
-                <p className="text-sm text-muted-foreground">
-                  {organization ? getLocaleLabel(organization.name, organization.key) : ORG_KEY}
-                </p>
-              </div>
-              <button
-                type="button"
-                onClick={() => {
-                  resetUnitForm();
-                  resetMessages();
-                  setIsCreateUnitOpen(true);
-                }}
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                <Plus className="h-4 w-4" />
-                Add
-              </button>
-            </div>
-
-            <div className="relative mb-4">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <input
-                className={`${inputClassName} pl-9`}
-                value={unitSearch}
-                onChange={(event) => setUnitSearch(event.target.value)}
-                placeholder="Search units"
-              />
-            </div>
-
-            {filteredUnits.length ? (
-              <ul className="space-y-2">
-                {filteredUnits.map((item) => {
-                  const isActive = selectedUnit?.id === item.id;
-
-                  return (
-                    <li key={item.id}>
-                      <button
-                        type="button"
-                        onClick={() => goToUnit(item.id)}
-                        className={`flex w-full items-center justify-between rounded-2xl border px-4 py-3 text-left transition ${
-                          isActive
-                            ? "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-100"
-                            : "border-border bg-card text-card-foreground hover:border-emerald-200 hover:bg-emerald-50/80 dark:hover:bg-slate-900"
-                        }`}
-                      >
-                        <div className="min-w-0">
-                          <div className="truncate font-medium">{getLocaleLabel(item.name, item.key)}</div>
-                          <div className="truncate text-xs text-muted-foreground">{item.key}</div>
-                        </div>
-                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                      </button>
-                    </li>
-                  );
-                })}
-              </ul>
-            ) : (
-              <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                No units found.
-              </div>
-            )}
-          </aside>
-
-          <div className="space-y-6">
-            {selectedUnit ? (
-              <>
-                <section className="rounded-3xl border border-border bg-card p-6 shadow-sm">
-                  <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
-                    <div>
-                      <h2 className="text-xl font-semibold text-card-foreground">
-                        {getLocaleLabel(selectedUnit.name, selectedUnit.key)}
-                      </h2>
-                      <p className="text-sm text-muted-foreground">{selectedUnit.key}</p>
-                    </div>
-                    <div className="flex gap-2">
-                      <button
-                        type="button"
-                        disabled={submitting}
-                        onClick={() => {
-                          resetMessages();
-                          syncUnitFormFromSelectedUnit(selectedUnit);
-                          setIsUnitEditing(true);
-                        }}
-                        className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                      >
-                        Edit
-                      </button>
-                      <button
-                        type="button"
-                        disabled={submitting}
-                        onClick={() => void handleDeleteUnit()}
-                        className={`${buttonClassName} border border-rose-300 bg-card text-rose-700 hover:bg-rose-50 dark:border-rose-900 dark:text-rose-300 dark:hover:bg-rose-950/30`}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                        Delete unit
-                      </button>
-                    </div>
-                  </div>
-
-                  {isUnitEditing ? (
-                    <form className="grid gap-4 md:grid-cols-2" onSubmit={handleUpdateUnit}>
-                      <Field label="Unit name (EN)">
-                        <input
-                          className={inputClassName}
-                          value={unitNameEn}
-                          onChange={(event) => setUnitNameEn(event.target.value)}
-                          required
-                        />
-                      </Field>
-                      <Field label="Unit name (AM)">
-                        <input
-                          className={inputClassName}
-                          value={unitNameAm}
-                          onChange={(event) => setUnitNameAm(event.target.value)}
-                          required
-                        />
-                      </Field>
-                      <Field label="Unit key">
-                        <div className="flex gap-2">
-                          <input
-                            className={inputClassName}
-                            value={unitFormKey}
-                            onChange={(event) => setUnitFormKey(event.target.value)}
-                            required
-                          />
-                          <button
-                            type="button"
-                            onClick={() => setUnitFormKey(toInternalKey(unitNameEn))}
-                            className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                          >
-                            Key
-                          </button>
-                        </div>
-                      </Field>
-                      <div className="md:col-span-2 flex flex-wrap gap-3">
-                        <button
-                          type="submit"
-                          disabled={submitting || !unitNameEn.trim() || !unitNameAm.trim() || !unitFormKey.trim()}
-                          className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                        >
-                          <Save className="h-4 w-4" />
-                          Save unit
-                        </button>
-                        <button
-                          type="button"
-                          disabled={submitting}
-                          onClick={() => {
-                            syncUnitFormFromSelectedUnit(selectedUnit);
-                            setIsUnitEditing(false);
-                          }}
-                          className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                        >
-                          Cancel
-                        </button>
-                      </div>
-                    </form>
-                  ) : (
-                    <div className="grid gap-4 md:grid-cols-2">
-                      <ReadOnlyField
-                        label="Unit name (EN)"
-                        value={selectedUnit.name.en ?? getLocaleLabel(selectedUnit.name, selectedUnit.key)}
-                      />
-                      <ReadOnlyField label="Unit name (AM)" value={selectedUnit.name.am ?? ""} />
-                      <ReadOnlyField label="Unit key" value={selectedUnit.key} />
-                    </div>
-                  )}
-                </section>
-
-                <section className="rounded-3xl border border-border bg-card p-6 shadow-sm">
-                  <div className="mb-5 flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4">
-                    <div className="flex gap-2">
-                      <button
-                        type="button"
-                        onClick={() => goToUnit(selectedUnit.id, "positions")}
-                        className={`${buttonClassName} ${
-                          activeSection === "positions"
-                            ? "bg-emerald-600 text-white hover:bg-emerald-700"
-                            : "border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground"
-                        }`}
-                      >
-                        <Building2 className="h-4 w-4" />
-                        Positions
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => goToUnit(selectedUnit.id, "employees")}
-                        className={`${buttonClassName} ${
-                          activeSection === "employees"
-                            ? "bg-emerald-600 text-white hover:bg-emerald-700"
-                            : "border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground"
-                        }`}
-                      >
-                        <Users className="h-4 w-4" />
-                        Employees
-                      </button>
-                    </div>
-                  </div>
-
-                  {activeSection === "positions" ? (
-                    <div className="grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_360px]">
-                      <div>
-                        <div className="mb-4 flex flex-wrap gap-2">
-                          <button
-                            type="button"
-                            disabled={submitting}
-                            onClick={() => {
-                              resetMessages();
-                              syncPositionFormForCreate("create-root");
-                              setIsCreatePositionOpen(true);
-                            }}
-                            className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                          >
-                            <Plus className="h-4 w-4" />
-                            Add root
-                          </button>
-                          <button
-                            type="button"
-                            disabled={submitting || !selectedPosition}
-                            onClick={() => {
-                              resetMessages();
-                              syncPositionFormForCreate("create-child");
-                              setIsCreatePositionOpen(true);
-                            }}
-                            className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                          >
-                            <Plus className="h-4 w-4" />
-                            Add child
-                          </button>
-                        </div>
-
-                        {tree.length ? (
-                          <ul className="space-y-3">
-                            {tree.map((node) => (
-                              <TreeNode
-                                key={node.id}
-                                node={node}
-                                selectedPositionId={selectedPositionId}
-                                onSelect={(position) => {
-                                  resetMessages();
-                                  setSelectedPositionId(position.id);
-                                }}
-                              />
-                            ))}
-                          </ul>
-                        ) : (
-                          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                            No positions yet. Create the first root position for this unit.
-                          </div>
-                        )}
-                      </div>
-
-                      <div className="space-y-4">
-                        <div className="rounded-2xl border border-border bg-muted p-4">
-                          <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
-                            <div>
-                              <div className="text-sm font-medium text-foreground">Position details</div>
-                              <div className="text-sm text-muted-foreground">
-                                {selectedPosition
-                                  ? "View a selected position and edit it only when needed."
-                                  : "Select a position from the tree to inspect its details."}
-                              </div>
-                            </div>
-                            {selectedPosition ? (
-                              <div className="flex flex-wrap gap-2">
-                                <button
-                                  type="button"
-                                  disabled={submitting}
-                                  onClick={() => {
-                                    resetMessages();
-                                    syncPositionFormFromSelectedPosition(selectedPosition);
-                                    setIsPositionEditing(true);
-                                  }}
-                                  className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                                >
-                                  Edit
-                                </button>
-                                <button
-                                  type="button"
-                                  disabled={submitting}
-                                  onClick={() => void handleDeletePosition()}
-                                  className={`${buttonClassName} border border-rose-300 bg-card text-rose-700 hover:bg-rose-50 dark:border-rose-900 dark:text-rose-300 dark:hover:bg-rose-950/30`}
-                                >
-                                  <Trash2 className="h-4 w-4" />
-                                  Delete selected
-                                </button>
-                              </div>
-                            ) : null}
-                          </div>
-
-                          {selectedPosition ? (
-                            isPositionEditing ? (
-                              <form className="space-y-4" onSubmit={handleSavePosition}>
-                                <Field label="Position name (EN)">
-                                  <input
-                                    className={inputClassName}
-                                    value={positionForm.nameEn}
-                                    onChange={(event) =>
-                                      setPositionForm((current) => ({ ...current, nameEn: event.target.value }))
-                                    }
-                                    placeholder="Dispatch"
-                                    required
-                                  />
-                                </Field>
-                                <Field label="Position name (AM)">
-                                  <input
-                                    className={inputClassName}
-                                    value={positionForm.nameAm}
-                                    onChange={(event) =>
-                                      setPositionForm((current) => ({ ...current, nameAm: event.target.value }))
-                                    }
-                                    placeholder="ዲስፓች"
-                                    required
-                                  />
-                                </Field>
-                                <Field label="Position key">
-                                  <div className="flex gap-2">
-                                    <input
-                                      className={inputClassName}
-                                      value={positionForm.key}
-                                      onChange={(event) =>
-                                        setPositionForm((current) => ({ ...current, key: event.target.value }))
-                                      }
-                                      placeholder="dispatch"
-                                      required
-                                    />
-                                    <button
-                                      type="button"
-                                      onClick={() =>
-                                        setPositionForm((current) => ({
-                                          ...current,
-                                          key: toInternalKey(current.nameEn),
-                                        }))
-                                      }
-                                      className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                                    >
-                                      Key
-                                    </button>
-                                  </div>
-                                </Field>
-                                <Field label="Parent position">
-                                  <select
-                                    className={inputClassName}
-                                    value={positionForm.parentPositionId}
-                                    onChange={(event) =>
-                                      setPositionForm((current) => ({
-                                        ...current,
-                                        parentPositionId: event.target.value,
-                                      }))
-                                    }
-                                  >
-                                    <option value="">No parent (root position)</option>
-                                    {parentOptions.map((item) => (
-                                      <option key={item.id} value={item.id}>
-                                        {getLocaleLabel(item.name, item.key)}
-                                      </option>
-                                    ))}
-                                  </select>
-                                </Field>
-                                <div className="flex flex-wrap gap-3">
-                                  <button
-                                    type="submit"
-                                    disabled={
-                                      submitting ||
-                                      !positionForm.nameEn.trim() ||
-                                      !positionForm.nameAm.trim() ||
-                                      !positionForm.key.trim()
-                                    }
-                                    className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                                  >
-                                    <Save className="h-4 w-4" />
-                                    Save position
-                                  </button>
-                                  <button
-                                    type="button"
-                                    disabled={submitting}
-                                    onClick={() => {
-                                      syncPositionFormFromSelectedPosition(selectedPosition);
-                                      setIsPositionEditing(false);
-                                    }}
-                                    className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                                  >
-                                    Cancel
-                                  </button>
-                                </div>
-                              </form>
-                            ) : (
-                              <div className="grid gap-4">
-                                <ReadOnlyField
-                                  label="Position name (EN)"
-                                  value={selectedPosition.name.en ?? getLocaleLabel(selectedPosition.name, selectedPosition.key)}
-                                />
-                                <ReadOnlyField label="Position name (AM)" value={selectedPosition.name.am ?? ""} />
-                                <ReadOnlyField label="Position key" value={selectedPosition.key} />
-                                <ReadOnlyField
-                                  label="Parent position"
-                                  value={selectedPositionParent
-                                    ? getLocaleLabel(
-                                        selectedPositionParent.name,
-                                        selectedPositionParent.key,
-                                      )
-                                    : "No parent (root position)"}
-                                />
-                              </div>
-                            )
-                          ) : (
-                            <div className="rounded-2xl border border-dashed border-border bg-card px-4 py-8 text-center text-sm text-muted-foreground">
-                              Select a position from the tree to view its details.
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
-                      <div className="space-y-6">
-                        <section className="rounded-2xl border border-border bg-muted p-4">
-                          <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
-                            <div className="flex items-center gap-2">
-                              <UserPlus className="h-5 w-5 text-emerald-600 dark:text-emerald-300" />
-                              <h3 className="text-base font-semibold text-card-foreground">
-                                Invite employee
-                              </h3>
-                            </div>
-                            <button
-                              type="button"
-                              disabled={submitting || !selectedPosition}
-                              onClick={() => {
-                                resetMessages();
-                                setInviteForm(emptyInviteForm);
-                                setIsInviteEmployeeOpen(true);
-                              }}
-                              className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                            >
-                              <UserPlus className="h-4 w-4" />
-                              Invite employee
-                            </button>
-                          </div>
-                          {selectedPosition ? (
-                            <div className="space-y-3 text-sm text-muted-foreground">
-                              <p>
-                                New users are created during onboarding and assigned directly to the selected position.
-                              </p>
-                              <ReadOnlyField
-                                label="Target position"
-                                value={getLocaleLabel(selectedPosition.name, selectedPosition.key)}
-                              />
-                            </div>
-                          ) : (
-                            <p className="text-sm text-muted-foreground">
-                              Select a position from the tree first, then onboard employees into it.
-                            </p>
-                          )}
-                        </section>
-
-                        <section>
-                          <h3 className="mb-3 text-base font-semibold text-card-foreground">
-                            Organization employees
-                          </h3>
-                          {orgEmployees.length ? (
-                            <ul className="space-y-3">
-                              {orgEmployees.map((employee) => (
-                                <li
-                                  key={employee.id}
-                                  className="rounded-2xl border border-border bg-muted px-4 py-3"
-                                >
-                                  <div className="font-medium text-card-foreground">
-                                    {getLocaleLabel(employee.name ?? employee.user?.name, employee.id)}
-                                  </div>
-                                  <div className="text-sm text-muted-foreground">
-                                    {employee.user?.email ?? employee.user?.username ?? "No login details"}
-                                  </div>
-                                  {employee.employeePositions?.length ? (
-                                    <div className="mt-2 text-xs text-muted-foreground">
-                                      {employee.employeePositions
-                                        .map((item) => getLocaleLabel(item.position?.name, item.id))
-                                        .join(", ")}
-                                    </div>
-                                  ) : null}
-                                </li>
-                              ))}
-                            </ul>
-                          ) : (
-                            <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                              No employees have been onboarded yet.
-                            </div>
-                          )}
-                        </section>
-                      </div>
-
-                      <aside className="space-y-6">
-                        <section className="rounded-2xl border border-border bg-muted p-4">
-                          <h3 className="text-base font-semibold text-card-foreground">
-                            Position picker
-                          </h3>
-                          <p className="mt-1 text-sm text-muted-foreground">
-                            Employees are invited into a position inside the selected unit.
-                          </p>
-                          {tree.length ? (
-                            <ul className="mt-4 space-y-3">
-                              {tree.map((node) => (
-                                <TreeNode
-                                  key={node.id}
-                                  node={node}
-                                  selectedPositionId={selectedPositionId}
-                                  onSelect={(position) => setSelectedPositionId(position.id)}
-                                />
-                              ))}
-                            </ul>
-                          ) : (
-                            <p className="mt-4 text-sm text-muted-foreground">
-                              Add positions first before onboarding employees.
-                            </p>
-                          )}
-                        </section>
-
-                        <section className="rounded-2xl border border-border bg-muted p-4">
-                          <h3 className="text-base font-semibold text-card-foreground">
-                            Position members
-                          </h3>
-                          {membersLoading ? (
-                            <p className="mt-4 text-sm text-muted-foreground">Loading members...</p>
-                          ) : positionMemberNames.length ? (
-                            <ul className="mt-4 space-y-3">
-                              {positionMemberNames.map((member) => (
-                                <li
-                                  key={member.id}
-                                  className="rounded-2xl border border-border bg-card px-4 py-3"
-                                >
-                                  <div className="font-medium text-card-foreground">{member.name}</div>
-                                  <div className="text-sm text-muted-foreground">
-                                    {member.email ?? "No email recorded"}
-                                  </div>
-                                </li>
-                              ))}
-                            </ul>
-                          ) : (
-                            <p className="mt-4 text-sm text-muted-foreground">
-                              No active members for the selected position yet.
-                            </p>
-                          )}
-                        </section>
-                      </aside>
-                    </div>
-                  )}
-                </section>
-              </>
-            ) : (
-              <section className="rounded-3xl border border-dashed border-border bg-muted p-10 text-center shadow-sm">
-                <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300">
-                  <Network className="h-6 w-6" />
-                </div>
-                <h2 className="mt-5 text-xl font-semibold text-card-foreground">
-                  Choose a unit to manage
-                </h2>
-                <p className="mx-auto mt-2 max-w-xl text-sm text-muted-foreground">
-                  Use the unit list on the left to manage positions and employees strictly inside one selected unit.
-                </p>
-              </section>
-            )}
-          </div>
-        </div>
-      ) : null}
-
-      <Dialog
-        open={isCreateUnitOpen}
-        onOpenChange={(open) => {
-          setIsCreateUnitOpen(open);
-          if (!open) {
-            resetUnitForm();
-          }
-        }}
-      >
-        <DialogContent className="max-h-[90vh] overflow-y-auto rounded-3xl sm:max-w-2xl">
-          <DialogHeader>
-            <DialogTitle className="text-2xl font-bold">Create unit</DialogTitle>
-            <DialogDescription>
-              Add a new unit under the EDR Freight organization.
-            </DialogDescription>
-          </DialogHeader>
-          <form className="space-y-4" onSubmit={handleCreateUnit}>
-            <Field label="Unit name (EN)">
-              <input
-                className={inputClassName}
-                value={unitNameEn}
-                onChange={(event) => setUnitNameEn(event.target.value)}
-                placeholder="Operations"
-                required
-              />
-            </Field>
-            <Field label="Unit name (AM)">
-              <input
-                className={inputClassName}
-                value={unitNameAm}
-                onChange={(event) => setUnitNameAm(event.target.value)}
-                placeholder="ኦፕሬሽንስ"
-                required
-              />
-            </Field>
-            <Field label="Unit key">
-              <div className="flex gap-2">
-                <input
-                  className={inputClassName}
-                  value={unitFormKey}
-                  onChange={(event) => setUnitFormKey(event.target.value)}
-                  placeholder="operations"
-                  required
-                />
-                <button
-                  type="button"
-                  onClick={() => setUnitFormKey(toInternalKey(unitNameEn))}
-                  className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                >
-                  Key
-                </button>
-              </div>
-            </Field>
-            <div className="flex flex-wrap gap-3">
-              <button
-                type="submit"
-                disabled={submitting || !unitNameEn.trim() || !unitNameAm.trim() || !unitFormKey.trim()}
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                <Save className="h-4 w-4" />
-                Create unit
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  resetUnitForm();
-                  setIsCreateUnitOpen(false);
-                }}
-                className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-              >
-                Cancel
-              </button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog
-        open={isCreatePositionOpen}
-        onOpenChange={(open) => {
-          setIsCreatePositionOpen(open);
-          if (!open) {
-            syncPositionFormForCreate(createPositionMode);
-          }
-        }}
-      >
-        <DialogContent className="max-h-[90vh] overflow-y-auto rounded-3xl sm:max-w-2xl">
-          <DialogHeader>
-            <DialogTitle className="text-2xl font-bold">
-              {createPositionMode === "create-child" ? "Create child position" : "Create root position"}
-            </DialogTitle>
-            <DialogDescription>
-              {createPositionMode === "create-child"
-                ? "Add a child position under the currently selected position."
-                : "Add a top-level position for the selected unit."}
-            </DialogDescription>
-          </DialogHeader>
-          <form className="space-y-4" onSubmit={handleSavePosition}>
-            <Field label="Position name (EN)">
-              <input
-                className={inputClassName}
-                value={positionForm.nameEn}
-                onChange={(event) =>
-                  setPositionForm((current) => ({ ...current, nameEn: event.target.value }))
-                }
-                placeholder="Dispatch"
-                required
-              />
-            </Field>
-            <Field label="Position name (AM)">
-              <input
-                className={inputClassName}
-                value={positionForm.nameAm}
-                onChange={(event) =>
-                  setPositionForm((current) => ({ ...current, nameAm: event.target.value }))
-                }
-                placeholder="ዲስፓች"
-                required
-              />
-            </Field>
-            <Field label="Position key">
-              <div className="flex gap-2">
-                <input
-                  className={inputClassName}
-                  value={positionForm.key}
-                  onChange={(event) =>
-                    setPositionForm((current) => ({ ...current, key: event.target.value }))
-                  }
-                  placeholder="dispatch"
-                  required
-                />
-                <button
-                  type="button"
-                  onClick={() =>
-                    setPositionForm((current) => ({
-                      ...current,
-                      key: toInternalKey(current.nameEn),
-                    }))
-                  }
-                  className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                >
-                  Key
-                </button>
-              </div>
-            </Field>
-            <Field label="Parent position">
-              <select
-                className={inputClassName}
-                value={positionForm.parentPositionId}
-                onChange={(event) =>
-                  setPositionForm((current) => ({
-                    ...current,
-                    parentPositionId: event.target.value,
-                  }))
-                }
-              >
-                <option value="">No parent (root position)</option>
-                {parentOptions.map((item) => (
-                  <option key={item.id} value={item.id}>
-                    {getLocaleLabel(item.name, item.key)}
-                  </option>
-                ))}
-              </select>
-            </Field>
-            <div className="flex flex-wrap gap-3">
-              <button
-                type="submit"
-                disabled={
-                  submitting ||
-                  !positionForm.nameEn.trim() ||
-                  !positionForm.nameAm.trim() ||
-                  !positionForm.key.trim()
-                }
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                <Save className="h-4 w-4" />
-                Create position
-              </button>
-              <button
-                type="button"
-                disabled={submitting}
-                onClick={() => {
-                  syncPositionFormForCreate(createPositionMode);
-                  setIsCreatePositionOpen(false);
-                }}
-                className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-              >
-                Cancel
-              </button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog
-        open={isInviteEmployeeOpen}
-        onOpenChange={(open) => {
-          setIsInviteEmployeeOpen(open);
-          if (!open) {
-            setInviteForm(emptyInviteForm);
-          }
-        }}
-      >
-        <DialogContent className="max-h-[90vh] overflow-y-auto rounded-3xl sm:max-w-2xl">
-          <DialogHeader>
-            <DialogTitle className="text-2xl font-bold">Invite employee</DialogTitle>
-            <DialogDescription>
-              Create a new employee account and assign it directly to the selected position.
-            </DialogDescription>
-          </DialogHeader>
-          <form className="space-y-4" onSubmit={handleInviteEmployee}>
-            <Field label="Target position">
-              <div className="rounded-xl border border-border bg-muted px-3 py-2.5 text-sm text-card-foreground">
-                {selectedPosition ? getLocaleLabel(selectedPosition.name, selectedPosition.key) : "No position selected"}
-              </div>
-            </Field>
-            <Field label="Full name (EN)">
-              <input
-                className={inputClassName}
-                value={inviteForm.nameEn}
-                onChange={(event) =>
-                  setInviteForm((current) => ({ ...current, nameEn: event.target.value }))
-                }
-                required
-              />
-            </Field>
-            <Field label="Full name (AM)">
-              <input
-                className={inputClassName}
-                value={inviteForm.nameAm}
-                onChange={(event) =>
-                  setInviteForm((current) => ({ ...current, nameAm: event.target.value }))
-                }
-                required
-              />
-            </Field>
-            <Field label="Email">
-              <input
-                type="email"
-                className={inputClassName}
-                value={inviteForm.email}
-                onChange={(event) =>
-                  setInviteForm((current) => ({ ...current, email: event.target.value }))
-                }
-                required
-              />
-            </Field>
-            <Field label="Username">
-              <input
-                className={inputClassName}
-                value={inviteForm.username}
-                onChange={(event) =>
-                  setInviteForm((current) => ({ ...current, username: event.target.value }))
-                }
-                required
-              />
-            </Field>
-            <Field label="Phone number">
-              <input
-                className={inputClassName}
-                value={inviteForm.phoneNumber}
-                onChange={(event) =>
-                  setInviteForm((current) => ({ ...current, phoneNumber: event.target.value }))
-                }
-                required
-              />
-            </Field>
-            <div className="flex flex-wrap gap-3">
-              <button
-                type="submit"
-                disabled={submitting || !selectedPosition}
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                <UserPlus className="h-4 w-4" />
-                Invite and assign
-              </button>
-              <button
-                type="button"
-                disabled={submitting}
-                onClick={() => {
-                  setInviteForm(emptyInviteForm);
-                  setIsInviteEmployeeOpen(false);
-                }}
-                className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-              >
-                Cancel
-              </button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </section>
-  );
-};
-
-export default OrgStructurePage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/DepartmentsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/DepartmentsPage.tsx
deleted file mode 100644
index 4d2e50920..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/DepartmentsPage.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import FeaturePlaceholder from "@/components/FeaturePlaceholder";
-
-const DepartmentsPage = () => {
-  return (
-    <FeaturePlaceholder
-      title="Departments"
-      description="Organize internal departments and associate user administration with freight business units."
-    />
-  );
-};
-
-export default DepartmentsPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/EmployeesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/EmployeesPage.tsx
deleted file mode 100644
index eecca7a3e..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/EmployeesPage.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-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>>(
-              `/backoffice/organizations/${organizationId}/employees`,
-              {
-                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;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PermissionsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PermissionsPage.tsx
deleted file mode 100644
index 10c5aba25..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PermissionsPage.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-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;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PositionTypesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PositionTypesPage.tsx
deleted file mode 100644
index 55a4df00e..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PositionTypesPage.tsx
+++ /dev/null
@@ -1,1309 +0,0 @@
-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 { CopyPlus, Plus, RefreshCw } from "lucide-react";
-
-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;
-  applicationId?: string | null;
-}
-
-interface ListResponse<T> {
-  count?: number;
-  items?: T[];
-  data?: T[];
-}
-
-const PAGE_SIZE = 1000;
-
-const inputClassName =
-  "w-full rounded-xl border border-border bg-background px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 dark:focus:ring-emerald-950";
-const buttonClassName =
-  "inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-60";
-
-const emptyCreateForm = {
-  copyPermissionFromId: "",
-  key: "",
-  nameAm: "",
-  nameEn: "",
-};
-
-type PositionTypeEditFormState = {
-  key: string;
-  nameAm: string;
-  nameEn: string;
-};
-
-const emptyEditForm: PositionTypeEditFormState = {
-  key: "",
-  nameAm: "",
-  nameEn: "",
-};
-
-const toggleSelection = (
-  currentIds: string[],
-  targetIds: string[],
-  checked: boolean,
-) => {
-  if (checked) {
-    return [...new Set([...currentIds, ...targetIds])];
-  }
-
-  return currentIds.filter((id) => !targetIds.includes(id));
-};
-
-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 [loadingPermissionsCatalog, setLoadingPermissionsCatalog] =
-    useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [selectedPositionType, setSelectedPositionType] =
-    useState<PositionTypeRecord | null>(null);
-  const [allPermissions, setAllPermissions] = useState<PermissionRecord[]>([]);
-  const [permissionsLoading, setPermissionsLoading] = useState(false);
-  const [permissionsError, setPermissionsError] = useState<string | null>(null);
-  const [permissionSearch, setPermissionSearch] = useState("");
-  const [selectedPermissionIds, setSelectedPermissionIds] = useState<string[]>(
-    [],
-  );
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [createForm, setCreateForm] = useState(emptyCreateForm);
-  const [createPermissionSearch, setCreatePermissionSearch] = useState("");
-  const [createPermissionIds, setCreatePermissionIds] = useState<string[]>([]);
-  const [createError, setCreateError] = useState<string | null>(null);
-  const [editForm, setEditForm] =
-    useState<PositionTypeEditFormState>(emptyEditForm);
-
-  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;
-  const availableCopySources = useMemo(
-    () =>
-      positionTypes.filter(
-        (positionType) => positionType.id !== selectedPositionType?.id,
-      ),
-    [positionTypes, selectedPositionType?.id],
-  );
-  const filteredPermissions = useMemo(() => {
-    const query = permissionSearch.trim().toLowerCase();
-
-    return allPermissions.filter((permission) => {
-      if (!query) {
-        return true;
-      }
-
-      const label = getLocaleLabel(
-        permission.name,
-        permission.key,
-      ).toLowerCase();
-      return (
-        label.includes(query) || permission.key.toLowerCase().includes(query)
-      );
-    });
-  }, [allPermissions, permissionSearch]);
-  const filteredCreatePermissions = useMemo(() => {
-    const query = createPermissionSearch.trim().toLowerCase();
-
-    return allPermissions.filter((permission) => {
-      if (!query) {
-        return true;
-      }
-
-      const label = getLocaleLabel(
-        permission.name,
-        permission.key,
-      ).toLowerCase();
-      return (
-        label.includes(query) || permission.key.toLowerCase().includes(query)
-      );
-    });
-  }, [allPermissions, createPermissionSearch]);
-  const allFilteredPermissionIds = filteredPermissions.map(
-    (permission) => permission.id,
-  );
-  const allFilteredCreatePermissionIds = filteredCreatePermissions.map(
-    (permission) => permission.id,
-  );
-  const areAllFilteredPermissionsSelected =
-    allFilteredPermissionIds.length > 0 &&
-    allFilteredPermissionIds.every((id) => selectedPermissionIds.includes(id));
-  const areAllFilteredCreatePermissionsSelected =
-    allFilteredCreatePermissionIds.length > 0 &&
-    allFilteredCreatePermissionIds.every((id) =>
-      createPermissionIds.includes(id),
-    );
-
-  const loadPositionTypes = async (unitId: string) => {
-    const response = await api.get<ListResponse<PositionTypeRecord>>(
-      `/position-types/list-with-commons/${unitId}`,
-      {
-        params: {
-          skip: 0,
-          take: PAGE_SIZE,
-          orderBy: "createdAt:Desc",
-        },
-      },
-    );
-
-    return getItems(response.data);
-  };
-
-  const loadPermissionsForPositionType = async (positionTypeId: string) => {
-    const response = await api.get<ListResponse<PermissionRecord>>(
-      `/position-type-permissions/given-first/${positionTypeId}`,
-    );
-
-    return getItems(response.data);
-  };
-
-  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(() => {
-    let isMounted = true;
-
-    const loadPermissionsCatalog = async () => {
-      setLoadingPermissionsCatalog(true);
-
-      try {
-        const response = await api.get<ListResponse<PermissionRecord>>(
-          "/permissions",
-          {
-            params: {
-              skip: 0,
-              take: 2000,
-            },
-          },
-        );
-
-        if (!isMounted) {
-          return;
-        }
-
-        setAllPermissions(getItems(response.data));
-      } catch {
-        if (!isMounted) {
-          return;
-        }
-
-        setAllPermissions([]);
-      } finally {
-        if (isMounted) {
-          setLoadingPermissionsCatalog(false);
-        }
-      }
-    };
-
-    void loadPermissionsCatalog();
-
-    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 loadItems = async () => {
-      setLoadingPositionTypes(true);
-      setErrorMessage(null);
-
-      try {
-        const items = await loadPositionTypes(selectedUnitId);
-
-        if (!isMounted) {
-          return;
-        }
-
-        setPositionTypes(items);
-      } 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 loadItems();
-
-    return () => {
-      isMounted = false;
-    };
-  }, [selectedUnitId]);
-
-  useEffect(() => {
-    if (!selectedPositionType) {
-      setSelectedPermissionIds([]);
-      setEditForm(emptyEditForm);
-      setPermissionsError(null);
-      setPermissionsLoading(false);
-      setPermissionSearch("");
-      return;
-    }
-
-    setEditForm({
-      key: selectedPositionType.key,
-      nameAm: selectedPositionType.name?.am ?? "",
-      nameEn: selectedPositionType.name?.en ?? "",
-    });
-
-    let isMounted = true;
-
-    const loadPermissions = async () => {
-      setPermissionsLoading(true);
-      setPermissionsError(null);
-
-      try {
-        const items = await loadPermissionsForPositionType(
-          selectedPositionType.id,
-        );
-
-        if (!isMounted) {
-          return;
-        }
-
-        setSelectedPermissionIds(items.map((permission) => permission.id));
-      } catch (error) {
-        if (!isMounted) {
-          return;
-        }
-
-        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]);
-
-  const handleRefresh = async () => {
-    if (!selectedUnitId) {
-      return;
-    }
-
-    setLoadingPositionTypes(true);
-    setErrorMessage(null);
-
-    try {
-      const items = await loadPositionTypes(selectedUnitId);
-      setPositionTypes(items);
-
-      if (selectedPositionType) {
-        const nextSelected =
-          items.find((item) => item.id === selectedPositionType.id) ??
-          selectedPositionType;
-        setSelectedPositionType(nextSelected);
-      }
-    } catch (error) {
-      setErrorMessage(
-        isAxiosError(error)
-          ? (error.response?.data?.message ??
-            "Unable to refresh position types.")
-          : "Unable to refresh position types.",
-      );
-    } finally {
-      setLoadingPositionTypes(false);
-    }
-  };
-
-  const openCreateDialog = () => {
-    setCreateForm(emptyCreateForm);
-    setCreatePermissionIds([]);
-    setCreatePermissionSearch("");
-    setCreateError(null);
-    setIsCreateOpen(true);
-  };
-
-  const handleSelectCopySource = async (positionTypeId: string) => {
-    setCreateForm((current) => ({
-      ...current,
-      copyPermissionFromId: positionTypeId,
-    }));
-
-    if (!positionTypeId) {
-      setCreatePermissionIds([]);
-      return;
-    }
-
-    try {
-      const copiedPermissions =
-        await loadPermissionsForPositionType(positionTypeId);
-      setCreatePermissionIds(
-        copiedPermissions.map((permission) => permission.id),
-      );
-    } catch (error) {
-      setCreateError(
-        isAxiosError(error)
-          ? (error.response?.data?.message ?? "Unable to copy permissions.")
-          : "Unable to copy permissions.",
-      );
-    }
-  };
-
-  const handleCreatePositionType = async (
-    event: React.FormEvent<HTMLFormElement>,
-  ) => {
-    event.preventDefault();
-
-    if (!selectedUnitId) {
-      setCreateError("Select a unit before creating a position type.");
-      return;
-    }
-
-    setSubmitting(true);
-    setCreateError(null);
-
-    try {
-      const response = await api.post<PositionTypeRecord>("/position-types", {
-        key: createForm.key.trim(),
-        name: {
-          am: createForm.nameAm.trim(),
-          en: createForm.nameEn.trim(),
-        },
-        unitId: selectedUnitId,
-      });
-
-      const createdPositionType = response.data;
-
-      await api.post("/position-type-permissions/assign-seconds-for-first", {
-        firstId: createdPositionType.id,
-        secondIds: createPermissionIds,
-      });
-
-      setIsCreateOpen(false);
-      setCreateForm(emptyCreateForm);
-      setCreatePermissionIds([]);
-      await handleRefresh();
-    } catch (error) {
-      setCreateError(
-        isAxiosError(error)
-          ? (error.response?.data?.message ?? "Unable to create position type.")
-          : "Unable to create position type.",
-      );
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleSavePositionTypeChanges = async () => {
-    if (!selectedPositionType) {
-      return;
-    }
-
-    setSubmitting(true);
-    setPermissionsError(null);
-
-    try {
-      if (!selectedPositionType.isSystem) {
-        await api.put(`/position-types/${selectedPositionType.id}`, {
-          key: editForm.key.trim(),
-          name: {
-            am: editForm.nameAm.trim(),
-            en: editForm.nameEn.trim(),
-          },
-          unitId: selectedPositionType.unitId,
-        });
-      }
-
-      await api.post("/position-type-permissions/assign-seconds-for-first", {
-        firstId: selectedPositionType.id,
-        secondIds: selectedPermissionIds,
-      });
-
-      const [refreshedPermissions, refreshedPositionTypes] = await Promise.all([
-        loadPermissionsForPositionType(selectedPositionType.id),
-        selectedUnitId
-          ? loadPositionTypes(selectedUnitId)
-          : Promise.resolve(positionTypes),
-      ]);
-
-      setSelectedPermissionIds(
-        refreshedPermissions.map((permission) => permission.id),
-      );
-      setPositionTypes(refreshedPositionTypes);
-
-      const refreshedSelected = refreshedPositionTypes.find(
-        (item) => item.id === selectedPositionType.id,
-      );
-      if (refreshedSelected) {
-        setSelectedPositionType(refreshedSelected);
-      }
-    } catch (error) {
-      setPermissionsError(
-        isAxiosError(error)
-          ? (error.response?.data?.message ?? "Unable to update position type.")
-          : "Unable to update position type.",
-      );
-    } finally {
-      setSubmitting(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">
-                Position Type
-              </h1>
-              <p className="mt-3 max-w-2xl text-sm text-muted-foreground">
-                Browse position types for a selected organization unit, add new
-                ones, and manage their permissions.
-              </p>
-            </div>
-            <div className="flex items-center gap-2">
-              <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>
-              <button
-                type="button"
-                onClick={() => void handleRefresh()}
-                disabled={!selectedUnitId || loadingPositionTypes}
-                className={`${buttonClassName} border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground`}
-              >
-                <RefreshCw className="h-4 w-4" />
-                Refresh
-              </button>
-              <button
-                type="button"
-                onClick={openCreateDialog}
-                disabled={!selectedUnitId || submitting}
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                <Plus className="h-4 w-4" />
-                New position type
-              </button>
-            </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 and update 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="grid gap-4 rounded-2xl border border-border bg-muted/40 p-4 sm:grid-cols-2">
-                  <label className="flex flex-col gap-2 text-sm">
-                    <span className="font-medium text-foreground">
-                      English name
-                    </span>
-                    <input
-                      className={inputClassName}
-                      value={editForm.nameEn}
-                      onChange={(event) =>
-                        setEditForm((current) => ({
-                          ...current,
-                          nameEn: event.target.value,
-                        }))
-                      }
-                      disabled={selectedPositionType.isSystem}
-                    />
-                  </label>
-                  <label className="flex flex-col gap-2 text-sm">
-                    <span className="font-medium text-foreground">
-                      Amharic name
-                    </span>
-                    <input
-                      className={inputClassName}
-                      value={editForm.nameAm}
-                      onChange={(event) =>
-                        setEditForm((current) => ({
-                          ...current,
-                          nameAm: event.target.value,
-                        }))
-                      }
-                      disabled={selectedPositionType.isSystem}
-                    />
-                  </label>
-                  <label className="flex flex-col gap-2 text-sm sm:col-span-2">
-                    <span className="font-medium text-foreground">Key</span>
-                    <input
-                      className={inputClassName}
-                      value={editForm.key}
-                      onChange={(event) =>
-                        setEditForm((current) => ({
-                          ...current,
-                          key: event.target.value,
-                        }))
-                      }
-                      disabled={selectedPositionType.isSystem}
-                    />
-                  </label>
-                  {selectedPositionType.isSystem ? (
-                    <p className="text-xs text-muted-foreground sm:col-span-2">
-                      System position types keep their name and key, but you can
-                      still manage permissions here.
-                    </p>
-                  ) : null}
-                </div>
-
-                <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">
-                    {selectedPermissionIds.length} permissions selected
-                  </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>
-                ) : (
-                  <div className="space-y-4">
-                    <input
-                      className={inputClassName}
-                      value={permissionSearch}
-                      onChange={(event) =>
-                        setPermissionSearch(event.target.value)
-                      }
-                      placeholder="Search permissions by name or key"
-                    />
-
-                    <label className="flex items-center gap-2 rounded-xl border border-border bg-background px-3 py-2 text-sm">
-                      <input
-                        type="checkbox"
-                        checked={areAllFilteredPermissionsSelected}
-                        onChange={(event) => {
-                          setSelectedPermissionIds((current) =>
-                            toggleSelection(
-                              current,
-                              allFilteredPermissionIds,
-                              event.target.checked,
-                            ),
-                          );
-                        }}
-                      />
-                      <span className="font-medium text-foreground">
-                        Select all
-                      </span>
-                    </label>
-
-                    {loadingPermissionsCatalog ? (
-                      <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                        Loading permissions catalog...
-                      </div>
-                    ) : filteredPermissions.length ? (
-                      <div className="grid max-h-[420px] gap-2 overflow-y-auto pr-1 md:grid-cols-2 xl:grid-cols-3">
-                        {filteredPermissions.map((permission) => (
-                          <label
-                            key={permission.id}
-                            className="flex items-start gap-2 rounded-xl border border-border bg-background px-3 py-2 text-xs"
-                          >
-                            <input
-                              type="checkbox"
-                              checked={selectedPermissionIds.includes(
-                                permission.id,
-                              )}
-                              onChange={(event) => {
-                                setSelectedPermissionIds((current) =>
-                                  event.target.checked
-                                    ? [...current, permission.id]
-                                    : current.filter(
-                                      (item) => item !== permission.id,
-                                    ),
-                                );
-                              }}
-                            />
-                            <div className="min-w-0 leading-4">
-                              <div className="truncate font-medium text-foreground">
-                                {getLocaleLabel(
-                                  permission.name,
-                                  permission.key,
-                                )}
-                              </div>
-                              <div className="truncate text-xs text-muted-foreground">
-                                {permission.key}
-                              </div>
-                            </div>
-                          </label>
-                        ))}
-                      </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 current search.
-                      </div>
-                    )}
-
-                    <div className="flex justify-end gap-2">
-                      <button
-                        type="button"
-                        onClick={() => setSelectedPositionType(null)}
-                        className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                      >
-                        Close
-                      </button>
-                      <button
-                        type="button"
-                        disabled={submitting || loadingPermissionsCatalog}
-                        onClick={() => void handleSavePositionTypeChanges()}
-                        className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                      >
-                        Save changes
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          ) : null}
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
-        <DialogContent className="sm:max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>Create position type</DialogTitle>
-            <DialogDescription>
-              Add a new position type for the selected unit and optionally copy
-              permissions from an existing one.
-            </DialogDescription>
-          </DialogHeader>
-
-          <form
-            className="space-y-4"
-            onSubmit={(event) => void handleCreatePositionType(event)}
-          >
-            <div className="grid gap-4 md:grid-cols-2">
-              <label className="flex flex-col gap-2 text-sm">
-                <span className="font-medium text-foreground">
-                  English name
-                </span>
-                <input
-                  className={inputClassName}
-                  value={createForm.nameEn}
-                  onChange={(event) =>
-                    setCreateForm((current) => ({
-                      ...current,
-                      nameEn: event.target.value,
-                    }))
-                  }
-                />
-              </label>
-
-              <label className="flex flex-col gap-2 text-sm">
-                <span className="font-medium text-foreground">
-                  Amharic name
-                </span>
-                <input
-                  className={inputClassName}
-                  value={createForm.nameAm}
-                  onChange={(event) =>
-                    setCreateForm((current) => ({
-                      ...current,
-                      nameAm: event.target.value,
-                    }))
-                  }
-                />
-              </label>
-
-              <label className="flex flex-col gap-2 text-sm">
-                <span className="font-medium text-foreground">Key</span>
-                <input
-                  className={inputClassName}
-                  value={createForm.key}
-                  onChange={(event) =>
-                    setCreateForm((current) => ({
-                      ...current,
-                      key: event.target.value,
-                    }))
-                  }
-                />
-              </label>
-
-              <label className="flex flex-col gap-2 text-sm">
-                <span className="font-medium text-foreground">
-                  Copy permissions from
-                </span>
-                <Select
-                  value={createForm.copyPermissionFromId || undefined}
-                  onValueChange={(value) => void handleSelectCopySource(value)}
-                >
-                  <SelectTrigger className="w-full rounded-xl bg-background">
-                    <SelectValue placeholder="Optional" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {availableCopySources.map((positionType) => (
-                      <SelectItem key={positionType.id} value={positionType.id}>
-                        {getLocaleLabel(positionType.name, positionType.key)}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </label>
-            </div>
-
-            <div className="space-y-3 rounded-2xl border border-border bg-background/60 p-4">
-              <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">
-                  {createPermissionIds.length} selected
-                </div>
-              </div>
-
-              <input
-                className={inputClassName}
-                value={createPermissionSearch}
-                onChange={(event) =>
-                  setCreatePermissionSearch(event.target.value)
-                }
-                placeholder="Search permissions by name or key"
-              />
-
-              <label className="flex items-center gap-2 rounded-xl border border-border bg-background px-3 py-2 text-sm">
-                <input
-                  type="checkbox"
-                  checked={areAllFilteredCreatePermissionsSelected}
-                  onChange={(event) => {
-                    setCreatePermissionIds((current) =>
-                      toggleSelection(
-                        current,
-                        allFilteredCreatePermissionIds,
-                        event.target.checked,
-                      ),
-                    );
-                  }}
-                />
-                <span className="font-medium text-foreground">Select all</span>
-              </label>
-
-              {loadingPermissionsCatalog ? (
-                <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                  Loading permissions catalog...
-                </div>
-              ) : filteredCreatePermissions.length ? (
-                <div className="grid max-h-[320px] gap-2 overflow-y-auto pr-1 md:grid-cols-2 xl:grid-cols-3">
-                  {filteredCreatePermissions.map((permission) => (
-                    <label
-                      key={permission.id}
-                      className="flex items-start gap-2 rounded-xl border border-border bg-background px-3 py-2 text-xs"
-                    >
-                      <input
-                        type="checkbox"
-                        checked={createPermissionIds.includes(permission.id)}
-                        onChange={(event) => {
-                          setCreatePermissionIds((current) =>
-                            event.target.checked
-                              ? [...current, permission.id]
-                              : current.filter(
-                                (item) => item !== permission.id,
-                              ),
-                          );
-                        }}
-                      />
-                      <div className="min-w-0 leading-4">
-                        <div className="truncate font-medium text-foreground">
-                          {getLocaleLabel(permission.name, permission.key)}
-                        </div>
-                        <div className="truncate text-xs text-muted-foreground">
-                          {permission.key}
-                        </div>
-                      </div>
-                    </label>
-                  ))}
-                </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 current search.
-                </div>
-              )}
-            </div>
-
-            {createForm.copyPermissionFromId ? (
-              <div className="rounded-2xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-700 dark:border-sky-950 dark:bg-sky-950/30 dark:text-sky-300">
-                <div className="flex items-center gap-2">
-                  <CopyPlus className="h-4 w-4" />
-                  The new position type will inherit permissions from the
-                  selected source.
-                </div>
-              </div>
-            ) : null}
-
-            {createError ? (
-              <div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-950 dark:bg-red-950/30 dark:text-red-300">
-                {createError}
-              </div>
-            ) : null}
-
-            <div className="flex justify-end gap-2">
-              <button
-                type="button"
-                onClick={() => setIsCreateOpen(false)}
-                className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                disabled={submitting || !selectedUnitId}
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                Create position type
-              </button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </section>
-  );
-};
-
-export default PositionTypesPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/RolesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/RolesPage.tsx
deleted file mode 100644
index 862df0119..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/RolesPage.tsx
+++ /dev/null
@@ -1,293 +0,0 @@
-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 (
-    <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>
-  );
-};
-
-export default RolesPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementHostPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementHostPage.tsx
deleted file mode 100644
index d473bdc90..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementHostPage.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
-import {
-  UserManagementApp,
-  type UserManagementRuntimeOptions,
-  type UserManagementSessionSeed,
-} from '@tria-plc/iamui';
-import { iamConfig } from './iamConfig';
-
-function readCookieValue(name: string): string | null {
-  const escaped = name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1');
-  const match = document.cookie.match(
-    new RegExp(`(?:^|; )${escaped}=([^;]*)`),
-  );
-
-  return match ? decodeURIComponent(match[1]) : null;
-}
-
-function readInitialSession(): UserManagementSessionSeed | null {
-  const token =
-    localStorage.getItem('fhc-backoffice-auth-token') ??
-    readCookieValue('auth-token');
-
-  if (!token) {
-    return null;
-  }
-
-  const refreshToken =
-    localStorage.getItem('fhc-backoffice-auth-refresh-token') ??
-    readCookieValue('refresh-token') ??
-    undefined;
-
-  return {
-    token,
-    refreshToken,
-    rememberMe: true,
-  };
-}
-
-export default function UserManagementHostPage() {
-  const mountRef = useRef<HTMLDivElement | null>(null);
-  const rootRef = useRef<Root | null>(null);
-  const unmountTimerRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    const mountNode = mountRef.current;
-
-    if (!mountNode) {
-      return;
-    }
-
-    if (unmountTimerRef.current !== null) {
-      window.clearTimeout(unmountTimerRef.current);
-      unmountTimerRef.current = null;
-    }
-
-    if (!rootRef.current) {
-      rootRef.current = createRoot(mountNode);
-    }
-
-    const apiBaseUrl = import.meta.env.VITE_BASE_API_URL.replace(/\/+$/, '');
-    const runtime: UserManagementRuntimeOptions = {
-      basename: '/um',
-      apiBaseUrl,
-      apiUrl: `${apiBaseUrl}/api`,
-      recordApiUrl: `${apiBaseUrl}/api`,
-      chronicleUrl: `${apiBaseUrl}/api`,
-      auditApiUrl: `${apiBaseUrl}/api`,
-    };
-
-    rootRef.current.render(
-      <UserManagementApp
-        config={iamConfig}
-        runtime={runtime}
-        session={{
-          initialSession: readInitialSession(),
-          enableEmbeddedAuthBridge: false,
-        }}
-      />,
-    );
-
-    return () => {
-      unmountTimerRef.current = window.setTimeout(() => {
-        rootRef.current?.unmount();
-        rootRef.current = null;
-        unmountTimerRef.current = null;
-      }, 0);
-    };
-  }, []);
-
-  return <div ref={mountRef} style={{ position: 'fixed', inset: 0 }} />;
-}
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementPage.tsx
deleted file mode 100644
index 317d50842..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementPage.tsx
+++ /dev/null
@@ -1,2311 +0,0 @@
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
-import { isAxiosError } from "axios";
-import {
-  Badge,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@edr/ui-common";
-import {
-  Building2,
-  ChevronRight,
-  FolderTree,
-  MoreHorizontal,
-  Network,
-  RefreshCw,
-  Search,
-  ShieldCheck,
-  UserCheck,
-  UserMinus,
-  Users,
-} from "lucide-react";
-
-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;
-  parentUnitId?: string | null;
-}
-
-interface PositionRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-  parentPositionId?: string | null;
-  positionTypeId?: string | null;
-  rank?: number;
-}
-
-interface PositionTypeRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-}
-
-interface EmployeeUserRecord {
-  id: string;
-  name?: LocaleText;
-  email?: string;
-  phoneNumber?: string;
-  username?: string;
-}
-
-interface EmployeePositionSummary {
-  id: string;
-  position?: {
-    id: string;
-    name?: LocaleText;
-  };
-}
-
-interface EmployeeRecord {
-  id: string;
-  name?: LocaleText;
-  user?: EmployeeUserRecord;
-  status?: string;
-  employeePositions?: EmployeePositionSummary[];
-}
-
-interface RoleRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-}
-
-interface PositionTreeNode extends PositionRecord {
-  children: PositionTreeNode[];
-}
-
-interface OrganizationConfigurationRecord {
-  id: string;
-  organizationId: string;
-  maximumNumberOfUnits?: number | null;
-  canCreateBranchByItself?: boolean;
-  canStartReceivingRecord?: boolean;
-}
-
-interface PositionFormState {
-  id?: string;
-  nameEn: string;
-  nameAm: string;
-  key: string;
-  parentPositionId: string;
-  positionTypeId: string;
-}
-
-interface UnitFormState {
-  nameEn: string;
-  nameAm: string;
-  key: string;
-}
-
-interface EmployeeInviteFormState {
-  nameEn: string;
-  nameAm: string;
-  email: string;
-  username: string;
-  phoneNumber: string;
-}
-
-interface ListResponse<T> {
-  count?: number;
-  items?: T[];
-  data?: T[];
-}
-
-const RESERVED_ROLE_KEYS = new Set(["super_admin", "organization_admin", "unit_admin"]);
-
-const emptyInviteForm: EmployeeInviteFormState = {
-  nameEn: "",
-  nameAm: "",
-  email: "",
-  username: "",
-  phoneNumber: "",
-};
-
-const emptyUnitForm: UnitFormState = {
-  nameEn: "",
-  nameAm: "",
-  key: "",
-};
-
-const emptyPositionForm: PositionFormState = {
-  nameEn: "",
-  nameAm: "",
-  key: "",
-  parentPositionId: "",
-  positionTypeId: "",
-};
-
-const inputClassName =
-  "w-full rounded-xl border border-border bg-background px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 dark:focus:ring-emerald-950";
-const buttonClassName =
-  "inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-60";
-
-const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") => {
-  if (!value) {
-    return fallback;
-  }
-
-  return 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 mergeEmployeesByUser = (employees: EmployeeRecord[]) => {
-  const employeesByUserId = new Map<string, EmployeeRecord>();
-
-  for (const employee of employees) {
-    const userId = employee.user?.id;
-
-    if (!userId) {
-      employeesByUserId.set(employee.id, employee);
-      continue;
-    }
-
-    const existing = employeesByUserId.get(userId);
-
-    if (!existing) {
-      employeesByUserId.set(userId, employee);
-      continue;
-    }
-
-    const existingPositions = existing.employeePositions ?? [];
-    const nextPositions = employee.employeePositions ?? [];
-    const mergedPositions = Array.from(
-      new Map(
-        [...existingPositions, ...nextPositions].map((position) => [position.id, position]),
-      ).values(),
-    );
-
-    employeesByUserId.set(userId, {
-      ...existing,
-      ...employee,
-      id: existing.id,
-      name: existing.name ?? employee.name,
-      status: existing.status ?? employee.status,
-      user: existing.user ?? employee.user,
-      employeePositions: mergedPositions,
-    });
-  }
-
-  return [...employeesByUserId.values()];
-};
-
-const toInternalKey = (value: string) =>
-  value
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "_")
-    .replace(/^_+|_+$/g, "")
-    .replace(/_+/g, "_");
-
-const buildTree = (positions: PositionRecord[]) => {
-  const nodes = new Map<string, PositionTreeNode>();
-
-  positions.forEach((position) => {
-    nodes.set(position.id, { ...position, children: [] });
-  });
-
-  const roots: PositionTreeNode[] = [];
-
-  nodes.forEach((node) => {
-    if (node.parentPositionId) {
-      const parent = nodes.get(node.parentPositionId);
-
-      if (parent) {
-        parent.children.push(node);
-        return;
-      }
-    }
-
-    roots.push(node);
-  });
-
-  const sortNodes = (items: PositionTreeNode[]) => {
-    items.sort((left, right) => {
-      const rankDiff = (left.rank ?? 0) - (right.rank ?? 0);
-      if (rankDiff !== 0) {
-        return rankDiff;
-      }
-
-      return getLocaleLabel(left.name, left.key).localeCompare(
-        getLocaleLabel(right.name, right.key),
-      );
-    });
-
-    items.forEach((item) => sortNodes(item.children));
-  };
-
-  sortNodes(roots);
-
-  return roots;
-};
-
-const getErrorMessage = (error: unknown, fallback: string) => {
-  if (isAxiosError(error)) {
-    const message = error.response?.data?.message;
-    if (typeof message === "string") {
-      return message;
-    }
-    if (Array.isArray(message) && typeof message[0] === "string") {
-      return message[0];
-    }
-  }
-
-  return error instanceof Error ? error.message : fallback;
-};
-
-const Field = ({ label, children }: { label: string; children: ReactNode }) => (
-  <label className="flex flex-col gap-2 text-sm">
-    <span className="font-medium text-foreground">{label}</span>
-    {children}
-  </label>
-);
-
-const ManagementDialog = ({
-  open,
-  title,
-  description,
-  onOpenChange,
-  children,
-}: {
-  open: boolean;
-  title: string;
-  description?: string;
-  onOpenChange: (open: boolean) => void;
-  children: ReactNode;
-}) => (
-  <Dialog open={open} onOpenChange={onOpenChange}>
-    <DialogContent className="sm:max-w-2xl">
-      <DialogHeader>
-        <DialogTitle>{title}</DialogTitle>
-        {description ? <DialogDescription>{description}</DialogDescription> : null}
-      </DialogHeader>
-      {children}
-    </DialogContent>
-  </Dialog>
-);
-
-const TreeNode = ({
-  node,
-  depth = 0,
-  selectedPositionId,
-  onSelect,
-  expandedDepartmentIds,
-  onToggleExpand,
-  onInviteUser,
-  onAssignUser,
-  onAddSubDepartment,
-  onEdit,
-  onDelete,
-  disabled,
-}: {
-  node: PositionTreeNode;
-  depth?: number;
-  selectedPositionId: string | null;
-  onSelect: (node: PositionRecord) => void;
-  expandedDepartmentIds: Set<string>;
-  onToggleExpand: (nodeId: string) => void;
-  onInviteUser: (node: PositionRecord) => void;
-  onAssignUser: (node: PositionRecord) => void;
-  onAddSubDepartment: (node: PositionRecord) => void;
-  onEdit: (node: PositionRecord) => void;
-  onDelete: (node: PositionRecord) => void;
-  disabled?: boolean;
-}) => {
-  const hasChildren = node.children.length > 0;
-  const isSelected = selectedPositionId === node.id;
-  const isExpanded = expandedDepartmentIds.has(node.id);
-
-  return (
-    <li className="group">
-      <div
-        className={`flex w-full items-center gap-2 rounded-xl border px-3 py-2 text-left text-sm shadow-sm transition ${
-          isSelected
-            ? "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-100"
-            : "border-border bg-card text-card-foreground hover:border-emerald-200 hover:bg-emerald-50/80 dark:hover:bg-slate-900"
-        }`}
-        style={{ marginLeft: depth * 14 }}
-      >
-        {hasChildren ? (
-          <button
-            type="button"
-            onClick={(event) => {
-              event.stopPropagation();
-              onToggleExpand(node.id);
-            }}
-            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition hover:bg-accent hover:text-accent-foreground"
-            disabled={disabled}
-            aria-label={isExpanded ? "Collapse department" : "Expand department"}
-          >
-            <ChevronRight
-              className={`h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : "rotate-0"}`}
-            />
-          </button>
-        ) : (
-          <span className="h-7 w-7 shrink-0" aria-hidden="true" />
-        )}
-        <button
-          type="button"
-          onClick={() => onSelect(node)}
-          className="flex min-w-0 flex-1 items-center gap-2 text-left"
-          disabled={disabled}
-        >
-        <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-950/40 dark:text-emerald-300">
-          {hasChildren ? <FolderTree className="h-4 w-4" /> : <Building2 className="h-4 w-4" />}
-        </span>
-        <div className="min-w-0 flex-1">
-          <div className="truncate font-medium">{getLocaleLabel(node.name, node.key)}</div>
-          <div className="truncate text-xs text-muted-foreground">{node.key}</div>
-        </div>
-        {hasChildren ? <ChevronRight className="h-4 w-4 text-muted-foreground" /> : null}
-        </button>
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              disabled={disabled}
-              onClick={(event) => event.stopPropagation()}
-              className="ml-auto inline-flex h-9 w-9 items-center justify-center rounded-xl border border-border bg-card text-card-foreground opacity-0 transition group-hover:opacity-100 group-focus-within:opacity-100 hover:bg-accent hover:text-accent-foreground"
-              aria-label="Position actions"
-            >
-              <MoreHorizontal className="h-4 w-4" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault();
-                onInviteUser(node);
-              }}
-            >
-              Add User
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault();
-                onAssignUser(node);
-              }}
-            >
-              Assign User
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault();
-                onAddSubDepartment(node);
-              }}
-            >
-              Add Sub-department
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault();
-                onEdit(node);
-              }}
-            >
-              Edit Department
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              variant="destructive"
-              onSelect={(event) => {
-                event.preventDefault();
-                onDelete(node);
-              }}
-            >
-              Delete Department
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      {hasChildren && isExpanded ? (
-        <ul className="mt-2 space-y-2">
-          {node.children.map((child) => (
-            <TreeNode
-              key={child.id}
-              node={child}
-              depth={depth + 1}
-              selectedPositionId={selectedPositionId}
-              onSelect={onSelect}
-              expandedDepartmentIds={expandedDepartmentIds}
-              onToggleExpand={onToggleExpand}
-              onInviteUser={onInviteUser}
-              onAssignUser={onAssignUser}
-              onAddSubDepartment={onAddSubDepartment}
-              onEdit={onEdit}
-              onDelete={onDelete}
-              disabled={disabled}
-            />
-          ))}
-        </ul>
-      ) : null}
-    </li>
-  );
-};
-
-const UserManagementPage = () => {
-  const { user } = useAuth();
-  const [organizations, setOrganizations] = useState<OrganizationRecord[]>([]);
-  const [units, setUnits] = useState<UnitRecord[]>([]);
-  const [positions, setPositions] = useState<PositionRecord[]>([]);
-  const [positionTypes, setPositionTypes] = useState<PositionTypeRecord[]>([]);
-  const [orgEmployees, setOrgEmployees] = useState<EmployeeRecord[]>([]);
-  const [positionMembers, setPositionMembers] = useState<EmployeeRecord[]>([]);
-  const [selectedOrgConfiguration, setSelectedOrgConfiguration] =
-    useState<OrganizationConfigurationRecord | null>(null);
-  const [expandedDepartmentIds, setExpandedDepartmentIds] = useState<Set<string>>(new Set());
-  const [orgAdminUserIds, setOrgAdminUserIds] = useState<Set<string>>(new Set());
-  const [unitAdminUserIds, setUnitAdminUserIds] = useState<Set<string>>(new Set());
-  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);
-  const [selectedUnitId, setSelectedUnitId] = useState<string | null>(null);
-  const [selectedPositionId, setSelectedPositionId] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [membersLoading, setMembersLoading] = useState(false);
-  const [orgEmployeesLoading, setOrgEmployeesLoading] = useState(false);
-  const [positionTypesLoading, setPositionTypesLoading] = useState(false);
-  const [actionError, setActionError] = useState<string | null>(null);
-  const [actionSuccess, setActionSuccess] = useState<string | null>(null);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [positionTypesError, setPositionTypesError] = useState<string | null>(null);
-  const [submitting, setSubmitting] = useState(false);
-  const [unitSearch, setUnitSearch] = useState("");
-  const [positionSearch, setPositionSearch] = useState("");
-  const [employeeSearch, setEmployeeSearch] = useState("");
-  const [assignSearch, setAssignSearch] = useState("");
-  const [unitForm, setUnitForm] = useState<UnitFormState>(emptyUnitForm);
-  const [positionForm, setPositionForm] = useState<PositionFormState>(emptyPositionForm);
-  const [inviteForm, setInviteForm] = useState<EmployeeInviteFormState>(emptyInviteForm);
-  const [roleIds, setRoleIds] = useState<string[]>([]);
-  const [availableRoles, setAvailableRoles] = useState<RoleRecord[]>([]);
-  const [rolesLoading, setRolesLoading] = useState(false);
-  const [isCreateUnitOpen, setIsCreateUnitOpen] = useState(false);
-  const [isEditUnitOpen, setIsEditUnitOpen] = useState(false);
-  const [isCreatePositionOpen, setIsCreatePositionOpen] = useState(false);
-  const [isEditPositionOpen, setIsEditPositionOpen] = useState(false);
-  const [isInviteEmployeeOpen, setIsInviteEmployeeOpen] = useState(false);
-  const [isAssignEmployeeOpen, setIsAssignEmployeeOpen] = useState(false);
-  const [isManageRolesOpen, setIsManageRolesOpen] = useState(false);
-  const [selectedRoleUser, setSelectedRoleUser] = useState<EmployeeRecord | null>(null);
-  const [createPositionMode, setCreatePositionMode] = useState<"create-root" | "create-child">(
-    "create-root",
-  );
-
-  const isSuperAdmin = Boolean(user?.roles?.some((role) => role.key === "super_admin"));
-  const allowedOrgIds = useMemo(
-    () => new Set((user?.employee ?? []).map((employee) => employee.organizationId).filter(Boolean)),
-    [user?.employee],
-  );
-
-  // Both paths are already scoped server-side: super admins get every org from
-  // /organizations, org/unit admins get only theirs from my-admin-organizations.
-  // So no client-side re-filtering (allowedOrgIds, from employee.organizationId,
-  // wouldn't include orgs administered without an employee record there).
-  const visibleOrganizations = organizations;
-  void allowedOrgIds;
-
-  const selectedOrganization = useMemo(
-    () => visibleOrganizations.find((item) => item.id === selectedOrgId) ?? null,
-    [selectedOrgId, visibleOrganizations],
-  );
-  const selectedUnit = useMemo(
-    () => units.find((item) => item.id === selectedUnitId) ?? null,
-    [selectedUnitId, units],
-  );
-  const selectedPosition = useMemo(
-    () => positions.find((item) => item.id === selectedPositionId) ?? null,
-    [positions, selectedPositionId],
-  );
-  const positionTree = useMemo(() => buildTree(positions), [positions]);
-  const parentOptions = useMemo(
-    () => positions.filter((item) => item.id !== selectedPositionId),
-    [positions, selectedPositionId],
-  );
-  const unitsAllowedLabel =
-    selectedOrgConfiguration?.maximumNumberOfUnits == null
-      ? "∞"
-      : `${selectedOrgConfiguration.maximumNumberOfUnits}`;
-
-  const filteredUnits = useMemo(() => {
-    const query = unitSearch.trim().toLowerCase();
-    if (!query) {
-      return units;
-    }
-
-    return units.filter((item) => {
-      const label = getLocaleLabel(item.name, item.key).toLowerCase();
-      return label.includes(query) || item.key.toLowerCase().includes(query);
-    });
-  }, [unitSearch, units]);
-
-  const filteredPositionTree = useMemo(() => {
-    const query = positionSearch.trim().toLowerCase();
-    if (!query) {
-      return positionTree;
-    }
-
-    const filterNode = (node: PositionTreeNode): PositionTreeNode | null => {
-      const label = `${getLocaleLabel(node.name, node.key)} ${node.key}`.toLowerCase();
-      const matchingChildren = node.children
-        .map((child) => filterNode(child))
-        .filter(Boolean) as PositionTreeNode[];
-
-      if (label.includes(query) || matchingChildren.length) {
-        return { ...node, children: matchingChildren };
-      }
-
-      return null;
-    };
-
-    return positionTree.map((node) => filterNode(node)).filter(Boolean) as PositionTreeNode[];
-  }, [positionSearch, positionTree]);
-
-  const filteredPositionMembers = useMemo(() => {
-    const query = employeeSearch.trim().toLowerCase();
-    if (!query) {
-      return positionMembers;
-    }
-
-    return positionMembers.filter((employee) => {
-      const name = getLocaleLabel(employee.name ?? employee.user?.name, employee.user?.email ?? employee.id).toLowerCase();
-      const email = employee.user?.email?.toLowerCase() ?? "";
-      const username = employee.user?.username?.toLowerCase() ?? "";
-      return name.includes(query) || email.includes(query) || username.includes(query);
-    });
-  }, [employeeSearch, positionMembers]);
-
-  const assignableEmployees = useMemo(() => {
-    const query = assignSearch.trim().toLowerCase();
-    return orgEmployees.filter((employee) => {
-      const label = getLocaleLabel(employee.name ?? employee.user?.name, employee.user?.email ?? employee.id).toLowerCase();
-      const email = employee.user?.email?.toLowerCase() ?? "";
-      if (!query) {
-        return true;
-      }
-      return label.includes(query) || email.includes(query);
-    });
-  }, [assignSearch, orgEmployees]);
-
-  const resetMessages = () => {
-    setActionError(null);
-    setActionSuccess(null);
-  };
-
-  const loadOrganizations = useCallback(async () => {
-    setLoading(true);
-    setLoadError(null);
-
-    try {
-      // Super admins may list every organization (needs can:find_all:organization).
-      // Org/unit admins are scoped to the orgs they administer via my-admin-organizations.
-      const endpoint = isSuperAdmin
-        ? "/organizations"
-        : "/organizations/with-admin-flag";
-      const response = await api.get<ListResponse<OrganizationRecord>>(endpoint);
-      const nextOrganizations = getItems(response.data);
-      setOrganizations(nextOrganizations);
-    } catch (error) {
-      setLoadError(getErrorMessage(error, "Failed to load organizations."));
-    } finally {
-      setLoading(false);
-    }
-  }, [isSuperAdmin]);
-
-  const loadOrgEmployees = useCallback(async (organizationId: string) => {
-    setOrgEmployeesLoading(true);
-
-    try {
-      const response = await api.get<ListResponse<EmployeeRecord>>(
-        `/backoffice/organizations/${organizationId}/employees`,
-      );
-      setOrgEmployees(mergeEmployeesByUser(getItems(response.data)));
-    } catch {
-      setOrgEmployees([]);
-    } finally {
-      setOrgEmployeesLoading(false);
-    }
-  }, []);
-
-  const loadOrgAdmins = useCallback(async (organizationId: string) => {
-    try {
-      const response = await api.get<ListResponse<EmployeeRecord>>(
-        `/organizations/org-admins/${organizationId}`,
-      );
-      setOrgAdminUserIds(
-        new Set(getItems(response.data).map((employee) => employee.user?.id).filter(Boolean) as string[]),
-      );
-    } catch {
-      setOrgAdminUserIds(new Set());
-    }
-  }, []);
-
-  const loadUnitAdmins = useCallback(async (unitId: string | null) => {
-    if (!unitId) {
-      setUnitAdminUserIds(new Set());
-      return;
-    }
-
-    try {
-      const response = await api.get<ListResponse<EmployeeRecord>>(`/units/unit-admins/${unitId}`);
-      setUnitAdminUserIds(
-        new Set(getItems(response.data).map((employee) => employee.user?.id).filter(Boolean) as string[]),
-      );
-    } catch {
-      setUnitAdminUserIds(new Set());
-    }
-  }, []);
-
-  const loadUnits = useCallback(async (organizationId: string) => {
-    try {
-      const response = await api.get<ListResponse<UnitRecord>>(`/units/list/${organizationId}`);
-      setUnits(getItems(response.data));
-    } catch (error) {
-      setLoadError(getErrorMessage(error, "Failed to load units."));
-      setUnits([]);
-    }
-  }, []);
-
-  const loadOrganizationConfiguration = useCallback(async (organizationId: string) => {
-    try {
-      const response = await api.get<ListResponse<OrganizationConfigurationRecord>>(
-        `/organization-configurations/list/${organizationId}`,
-      );
-      setSelectedOrgConfiguration(getItems(response.data)[0] ?? null);
-    } catch {
-      setSelectedOrgConfiguration(null);
-    }
-  }, []);
-
-  const loadPositions = useCallback(async (unitId: string) => {
-    try {
-      const response = await api.get<ListResponse<PositionRecord>>(`/positions/list/${unitId}`);
-      setPositions(getItems(response.data));
-    } catch (error) {
-      setLoadError(getErrorMessage(error, "Failed to load positions."));
-      setPositions([]);
-    }
-  }, []);
-
-  const loadPositionTypes = useCallback(async (unitId: string) => {
-    setPositionTypesLoading(true);
-    setPositionTypesError(null);
-
-    try {
-      const response = await api.get<ListResponse<PositionTypeRecord>>(
-        `/position-types/list-with-commons/${unitId}?take=1000&skip=0&orderBy=createdAt:Desc`,
-      );
-      setPositionTypes(getItems(response.data));
-    } catch (error) {
-      const message = getErrorMessage(error, "Failed to load position types.");
-      setPositionTypes([]);
-      setPositionTypesError(message);
-      throw error;
-    } finally {
-      setPositionTypesLoading(false);
-    }
-  }, []);
-
-  const loadPositionMembers = useCallback(async (positionId: string | null) => {
-    if (!positionId) {
-      setPositionMembers([]);
-      return;
-    }
-
-    setMembersLoading(true);
-
-    try {
-      const response = await api.get<ListResponse<EmployeeRecord>>(
-        `/positions/current/${positionId}/employees`,
-      );
-      setPositionMembers(getItems(response.data));
-    } catch {
-      setPositionMembers([]);
-    } finally {
-      setMembersLoading(false);
-    }
-  }, []);
-
-  const refreshOrganizations = useCallback(async () => {
-    await loadOrganizations();
-  }, [loadOrganizations]);
-
-  const refreshSelectedOrg = useCallback(async () => {
-    if (!selectedOrgId) {
-      setUnits([]);
-      setPositions([]);
-      setPositionMembers([]);
-      setOrgEmployees([]);
-      setSelectedOrgConfiguration(null);
-      return;
-    }
-
-    await Promise.all([
-      loadUnits(selectedOrgId),
-      loadOrgEmployees(selectedOrgId),
-      loadOrgAdmins(selectedOrgId),
-      loadOrganizationConfiguration(selectedOrgId),
-    ]);
-  }, [loadOrgAdmins, loadOrgEmployees, loadOrganizationConfiguration, loadUnits, selectedOrgId]);
-
-  const refreshSelectedUnit = useCallback(async () => {
-    if (!selectedUnitId) {
-      setPositions([]);
-      setPositionTypes([]);
-      setPositionTypesError(null);
-      setPositionMembers([]);
-      setUnitAdminUserIds(new Set());
-      return;
-    }
-
-    await Promise.all([
-      loadPositions(selectedUnitId),
-      loadPositionTypes(selectedUnitId),
-      loadUnitAdmins(selectedUnitId),
-    ]);
-  }, [loadPositionTypes, loadPositions, loadUnitAdmins, selectedUnitId]);
-
-  useEffect(() => {
-    void loadOrganizations();
-  }, [loadOrganizations]);
-
-  useEffect(() => {
-    if (!visibleOrganizations.length) {
-      setSelectedOrgId(null);
-      setSelectedOrgConfiguration(null);
-      setUnits([]);
-      setPositions([]);
-      setPositionMembers([]);
-      setOrgEmployees([]);
-      return;
-    }
-
-    if (selectedOrgId && visibleOrganizations.some((organization) => organization.id === selectedOrgId)) {
-      return;
-    }
-
-    setSelectedOrgId(visibleOrganizations[0]?.id ?? null);
-    setSelectedOrgConfiguration(null);
-    setUnits([]);
-    setPositions([]);
-    setPositionMembers([]);
-    setOrgEmployees([]);
-  }, [selectedOrgId, visibleOrganizations]);
-
-  useEffect(() => {
-    if (!selectedOrgId) {
-      return;
-    }
-
-    void refreshSelectedOrg();
-  }, [refreshSelectedOrg, selectedOrgId]);
-
-  useEffect(() => {
-    if (!selectedOrgId) {
-      setUnits([]);
-      setPositions([]);
-      setPositionTypes([]);
-      setPositionTypesError(null);
-      setSelectedUnitId(null);
-      setSelectedPositionId(null);
-      setExpandedDepartmentIds(new Set());
-      setPositionMembers([]);
-      setOrgEmployees([]);
-      setOrgAdminUserIds(new Set());
-      setSelectedOrgConfiguration(null);
-      return;
-    }
-  }, [selectedOrgId]);
-
-  useEffect(() => {
-    if (!selectedOrgId || !selectedUnitId) {
-      return;
-    }
-
-    if (units.some((unit) => unit.id === selectedUnitId)) {
-      return;
-    }
-
-    setSelectedUnitId(units[0]?.id ?? null);
-  }, [selectedOrgId, selectedUnitId, units]);
-
-  useEffect(() => {
-    if (!selectedOrgId || !units.length) {
-      return;
-    }
-
-    if (selectedUnitId && units.some((unit) => unit.id === selectedUnitId)) {
-      return;
-    }
-
-    setSelectedUnitId(units[0]?.id ?? null);
-  }, [selectedOrgId, selectedUnitId, units]);
-
-  useEffect(() => {
-    if (!selectedUnitId) {
-      setPositions([]);
-      setPositionTypes([]);
-      setPositionTypesError(null);
-      setSelectedPositionId(null);
-      setExpandedDepartmentIds(new Set());
-      setPositionMembers([]);
-      setUnitAdminUserIds(new Set());
-      return;
-    }
-  }, [selectedUnitId]);
-
-  useEffect(() => {
-    if (!selectedUnitId) {
-      return;
-    }
-
-    void refreshSelectedUnit();
-  }, [refreshSelectedUnit, selectedUnitId]);
-
-  useEffect(() => {
-    if (!selectedUnitId || !selectedPositionId) {
-      return;
-    }
-
-    if (!positions.some((position) => position.id === selectedPositionId)) {
-      setSelectedPositionId(null);
-    }
-  }, [positions, selectedPositionId, selectedUnitId]);
-
-  useEffect(() => {
-    if (!selectedPositionId) {
-      setPositionMembers([]);
-      return;
-    }
-  }, [selectedPositionId]);
-
-  useEffect(() => {
-    void loadPositionMembers(selectedPositionId);
-  }, [loadPositionMembers, selectedPositionId]);
-
-  const handleRefresh = async () => {
-    resetMessages();
-    await Promise.all([
-      refreshOrganizations(),
-      selectedOrgId ? refreshSelectedOrg() : Promise.resolve(),
-      selectedUnitId ? refreshSelectedUnit() : Promise.resolve(),
-      loadPositionMembers(selectedPositionId),
-    ]);
-  };
-
-  const handleSelectOrganization = async (organizationId: string) => {
-    setSelectedOrgId(organizationId);
-    setSelectedUnitId(null);
-    setSelectedPositionId(null);
-    setExpandedDepartmentIds(new Set());
-    setUnits([]);
-    setPositions([]);
-    setPositionMembers([]);
-    setOrgEmployees([]);
-    setOrgAdminUserIds(new Set());
-    setUnitAdminUserIds(new Set());
-    setSelectedOrgConfiguration(null);
-    resetMessages();
-
-    try {
-      await Promise.all([
-        loadUnits(organizationId),
-        loadOrgEmployees(organizationId),
-        loadOrgAdmins(organizationId),
-        loadOrganizationConfiguration(organizationId),
-      ]);
-    } catch {
-      // Individual loaders already handle their own error state.
-    }
-  };
-
-  const handleSelectUnit = async (unitId: string) => {
-    setSelectedUnitId(unitId);
-    setSelectedPositionId(null);
-    setExpandedDepartmentIds(new Set());
-    setPositions([]);
-    setPositionTypes([]);
-    setPositionTypesError(null);
-    setPositionMembers([]);
-    setUnitAdminUserIds(new Set());
-    resetMessages();
-  };
-
-  const handleToggleDepartment = (departmentId: string) => {
-    setExpandedDepartmentIds((current) => {
-      const next = new Set(current);
-      if (next.has(departmentId)) {
-        next.delete(departmentId);
-      } else {
-        next.add(departmentId);
-      }
-      return next;
-    });
-  };
-
-  const openCreateSubDepartmentDialog = async (parent: PositionRecord) => {
-    if (!selectedUnit) {
-      setActionError("Select a unit before creating a department.");
-      return;
-    }
-
-    resetMessages();
-
-    try {
-      await loadPositionTypes(selectedUnit.id);
-      setSelectedPositionId(parent.id);
-      setExpandedDepartmentIds((current) => new Set(current).add(parent.id));
-      setCreatePositionMode("create-child");
-      setPositionForm({
-        ...emptyPositionForm,
-        parentPositionId: parent.id,
-      });
-      setIsCreatePositionOpen(true);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to load position types."));
-    }
-  };
-
-  const openInviteForDepartment = (position: PositionRecord) => {
-    setSelectedPositionId(position.id);
-    resetMessages();
-    setIsInviteEmployeeOpen(true);
-  };
-
-  const openAssignForDepartment = (position: PositionRecord) => {
-    setSelectedPositionId(position.id);
-    resetMessages();
-    setIsAssignEmployeeOpen(true);
-  };
-
-  const openCreateUnitDialog = () => {
-    setUnitForm(emptyUnitForm);
-    resetMessages();
-    setIsCreateUnitOpen(true);
-  };
-
-  const openEditUnitDialog = (unit: UnitRecord) => {
-    setUnitForm({
-      nameEn: unit.name.en ?? "",
-      nameAm: unit.name.am ?? "",
-      key: unit.key,
-    });
-    resetMessages();
-    setIsEditUnitOpen(true);
-  };
-
-  const openCreatePositionDialog = async (
-    mode: "create-root" | "create-child",
-    unitId = selectedUnit?.id,
-  ) => {
-    if (!unitId) {
-      setActionError("Select a unit before creating a department.");
-      return;
-    }
-
-    resetMessages();
-
-    try {
-      await loadPositionTypes(unitId);
-      setCreatePositionMode(mode);
-      setPositionForm({
-        ...emptyPositionForm,
-        parentPositionId: mode === "create-child" && selectedPosition ? selectedPosition.id : "",
-      });
-      setIsCreatePositionOpen(true);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to load position types."));
-    }
-  };
-
-  const openEditPositionDialog = async (position: PositionRecord) => {
-    if (!selectedUnit) {
-      setActionError("Select a unit before editing a department.");
-      return;
-    }
-
-    resetMessages();
-
-    try {
-      await loadPositionTypes(selectedUnit.id);
-      setPositionForm({
-        id: position.id,
-        nameEn: position.name.en ?? "",
-        nameAm: position.name.am ?? "",
-        key: position.key,
-        parentPositionId: position.parentPositionId ?? "",
-        positionTypeId: position.positionTypeId ?? "",
-      });
-      setIsEditPositionOpen(true);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to load position types."));
-    }
-  };
-
-  const handleCreateUnit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!selectedOrganization) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post("/units", {
-        name: { am: unitForm.nameAm.trim(), en: unitForm.nameEn.trim() },
-        key: unitForm.key.trim(),
-        organizationId: selectedOrganization.id,
-      });
-      setActionSuccess("Unit created.");
-      setIsCreateUnitOpen(false);
-      await refreshSelectedOrg();
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to create unit."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleUpdateUnit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!selectedOrganization || !selectedUnit) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.put(`/units/${selectedUnit.id}`, {
-        name: { am: unitForm.nameAm.trim(), en: unitForm.nameEn.trim() },
-        key: unitForm.key.trim(),
-        organizationId: selectedOrganization.id,
-      });
-      setActionSuccess("Unit updated.");
-      setIsEditUnitOpen(false);
-      await refreshSelectedOrg();
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to update unit."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleDeleteUnit = async (unit: UnitRecord) => {
-    if (!unit) {
-      return;
-    }
-
-    if (!window.confirm(`Delete unit '${getLocaleLabel(unit.name, unit.key)}'?`)) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.delete(`/units/${unit.id}`);
-      setActionSuccess("Unit deleted.");
-      await refreshSelectedOrg();
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to delete unit."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleSavePosition = async (event: React.FormEvent<HTMLFormElement>, isEditing: boolean) => {
-    event.preventDefault();
-    if (!selectedOrganization || !selectedUnit) {
-      setActionError("Select a unit before managing positions.");
-      return;
-    }
-
-    if (!positionForm.positionTypeId) {
-      setActionError("Select a position type before saving the department.");
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      const payload = {
-        id: positionForm.id,
-        name: { am: positionForm.nameAm.trim(), en: positionForm.nameEn.trim() },
-        key: positionForm.key.trim(),
-        unitId: selectedUnit.id,
-        organizationId: selectedOrganization.id,
-        parentPositionId: positionForm.parentPositionId || null,
-        positionTypeId: positionForm.positionTypeId,
-        rank: 0,
-      };
-
-      if (isEditing && positionForm.id) {
-        const existing = positions.find((item) => item.id === positionForm.id);
-        await api.put(`/positions/${positionForm.id}`, payload);
-
-        if ((existing?.parentPositionId ?? "") !== (positionForm.parentPositionId || "")) {
-          await api.patch("/positions/change-parent", {
-            positionId: positionForm.id,
-            newParentId: positionForm.parentPositionId || null,
-          });
-        }
-
-        setActionSuccess("Position updated.");
-        setIsEditPositionOpen(false);
-      } else {
-        await api.post("/positions", payload);
-        setActionSuccess("Position created.");
-        setIsCreatePositionOpen(false);
-      }
-
-      await refreshSelectedUnit();
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to save position."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleDeletePosition = async (position: PositionRecord) => {
-    if (!position) {
-      return;
-    }
-
-    if (!window.confirm(`Delete position '${getLocaleLabel(position.name, position.key)}'?`)) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.delete(`/positions/${position.id}`);
-      setActionSuccess("Position deleted.");
-      await refreshSelectedUnit();
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to delete position."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleInviteEmployee = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!selectedPosition) {
-      setActionError("Select a position before inviting an employee.");
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post("/employee-positions/invite", {
-        positionId: selectedPosition.id,
-        username: inviteForm.username.trim(),
-        phoneNumber: inviteForm.phoneNumber.trim(),
-        email: inviteForm.email.trim(),
-        name: { am: inviteForm.nameAm.trim(), en: inviteForm.nameEn.trim() },
-      });
-      setInviteForm(emptyInviteForm);
-      setActionSuccess("Employee invited and assigned to the selected position.");
-      setIsInviteEmployeeOpen(false);
-      await Promise.all([loadOrgEmployees(selectedOrgId!), loadPositionMembers(selectedPosition.id)]);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to invite employee."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleAssignEmployee = async (employeeId: string) => {
-    if (!selectedPosition) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post("/employee-positions/assign", {
-        positionId: selectedPosition.id,
-        employeeId,
-      });
-      setActionSuccess("Employee assigned to the selected position.");
-      setIsAssignEmployeeOpen(false);
-      setAssignSearch("");
-      await Promise.all([loadOrgEmployees(selectedOrgId!), loadPositionMembers(selectedPosition.id)]);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to assign employee."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleToggleUserActivation = async (employee: EmployeeRecord) => {
-    if (!employee.user?.id) {
-      return;
-    }
-
-    const isInactive = employee.status?.toLowerCase() === "inactive";
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.patch(
-        `/users/${isInactive ? "activate-user" : "deactivate-user"}/${employee.user.id}`,
-      );
-      setActionSuccess(isInactive ? "User activated." : "User deactivated.");
-      await Promise.all([loadOrgEmployees(selectedOrgId!), loadPositionMembers(selectedPositionId)]);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to update user status."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleAdminRoleMutation = async (
-    endpoint: string,
-    payload: { organizationId?: string; unitId?: string; userId: string },
-    successMessage: string,
-  ) => {
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post(endpoint, payload);
-      setActionSuccess(successMessage);
-      await Promise.all([
-        selectedOrgId ? loadOrgAdmins(selectedOrgId) : Promise.resolve(),
-        loadUnitAdmins(selectedUnitId),
-      ]);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to update admin role."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const openManageRolesDialog = async (employee: EmployeeRecord) => {
-    if (!selectedOrgId || !employee.user?.id) {
-      return;
-    }
-
-    setRolesLoading(true);
-    resetMessages();
-    setSelectedRoleUser(employee);
-    setIsManageRolesOpen(true);
-
-    try {
-      const [rolesResponse, assignedResponse] = await Promise.all([
-        api.get<ListResponse<RoleRecord>>("/roles"),
-        api.get<RoleRecord[]>(`/backoffice/organizations/${selectedOrgId}/employee-users/${employee.user.id}/roles`),
-      ]);
-      const roles = getItems(rolesResponse.data).filter((role) => !RESERVED_ROLE_KEYS.has(role.key));
-      setAvailableRoles(roles);
-      setRoleIds(getItems(assignedResponse.data).map((role) => role.id));
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to load user roles."));
-      setAvailableRoles([]);
-      setRoleIds([]);
-    } finally {
-      setRolesLoading(false);
-    }
-  };
-
-  const handleSaveRoles = async () => {
-    if (!selectedOrgId || !selectedRoleUser?.user?.id) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.put(
-        `/backoffice/organizations/${selectedOrgId}/employee-users/${selectedRoleUser.user.id}/roles`,
-        { roleIds },
-      );
-      setActionSuccess("User roles updated.");
-      setIsManageRolesOpen(false);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to update user roles."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <section className="space-y-6 bg-background p-6 text-foreground">
-      <div className="rounded-3xl border border-border bg-linear-to-br from-emerald-100 via-card to-background p-6 shadow-sm dark:from-emerald-950/30 dark:via-card dark:to-background">
-        <div className="flex flex-wrap items-start justify-between gap-4">
-          <div className="flex items-start gap-4">
-            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300">
-              <Network className="h-6 w-6" />
-            </div>
-            <div className="space-y-2">
-              <p className="text-sm font-medium uppercase tracking-[0.2em] text-emerald-700 dark:text-emerald-300">
-                User management
-              </p>
-              <h1 className="text-2xl font-semibold text-foreground">Organization workspace</h1>
-              <p className="max-w-3xl text-sm text-muted-foreground">
-                Manage organizations, branches, departments, team members, and admin access from a
-                single SmartOffice-style workspace.
-              </p>
-            </div>
-          </div>
-
-          <button
-            type="button"
-            onClick={() => void handleRefresh()}
-            className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-          >
-            <RefreshCw className="h-4 w-4" />
-            Refresh
-          </button>
-        </div>
-      </div>
-
-      {actionSuccess ? (
-        <div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/30 dark:text-emerald-200">
-          {actionSuccess}
-        </div>
-      ) : null}
-
-      {actionError ? (
-        <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-200">
-          {actionError}
-        </div>
-      ) : null}
-
-      {loadError ? (
-        <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-200">
-          {loadError}
-        </div>
-      ) : null}
-
-      {loading ? (
-        <div className="rounded-3xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
-          Loading user management workspace...
-        </div>
-      ) : (
-        <div className="grid gap-6 xl:grid-cols-4">
-          <aside className="rounded-3xl border border-border bg-card p-5 shadow-sm">
-            <div className="mb-5 flex items-center justify-between gap-3">
-              <div>
-                <h2 className="text-lg font-semibold text-card-foreground">Organization</h2>
-                <p className="text-sm text-muted-foreground">
-                  {isSuperAdmin ? "All organizations" : "Assigned organizations"}
-                </p>
-              </div>
-            </div>
-
-            {visibleOrganizations.length ? (
-              <ul className="space-y-2">
-                {visibleOrganizations.map((organization) => {
-                  const isActive = selectedOrgId === organization.id;
-                  const isDisabled = !isSuperAdmin;
-
-                  return (
-                    <li key={organization.id} className="group">
-                      <div
-                        className={`flex w-full items-center gap-2 rounded-2xl border px-4 py-3 text-left transition ${
-                          isActive
-                            ? "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-100"
-                            : "border-border bg-card text-card-foreground hover:border-emerald-200 hover:bg-emerald-50/80 dark:hover:bg-slate-900"
-                        } ${isDisabled ? "cursor-default" : ""}`}
-                      >
-                        <button
-                          type="button"
-                          disabled={isDisabled}
-                          onClick={() => void handleSelectOrganization(organization.id)}
-                          className="flex min-w-0 flex-1 items-center justify-between gap-2 text-left"
-                        >
-                          <div className="min-w-0">
-                            <div className="truncate font-medium">
-                              {getLocaleLabel(organization.name, organization.key)}
-                            </div>
-                            <div className="truncate text-xs text-muted-foreground">{organization.key}</div>
-                          </div>
-                          {!isSuperAdmin ? (
-                            <Badge className="bg-sky-100 text-sky-700">Assigned</Badge>
-                          ) : (
-                            <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                          )}
-                        </button>
-
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <button
-                              type="button"
-                              disabled={submitting}
-                              onClick={(event) => event.stopPropagation()}
-                              className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-border bg-card text-card-foreground opacity-0 transition group-hover:opacity-100 group-focus-within:opacity-100 hover:bg-accent hover:text-accent-foreground"
-                              aria-label="Organization actions"
-                            >
-                              <MoreHorizontal className="h-4 w-4" />
-                            </button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onSelect={(event) => {
-                                event.preventDefault();
-                                void handleSelectOrganization(organization.id);
-                                openCreateUnitDialog();
-                              }}
-                            >
-                              Create unit
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </li>
-                  );
-                })}
-              </ul>
-            ) : (
-              <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                No organizations available.
-              </div>
-            )}
-
-          </aside>
-
-          <aside className="rounded-3xl border border-border bg-card p-5 shadow-sm">
-            <div className="mb-5 flex items-center justify-between gap-3">
-              <div>
-                <h2 className="text-lg font-semibold text-card-foreground">Units</h2>
-                <p className="text-sm text-muted-foreground">
-                  {selectedOrganization
-                    ? getLocaleLabel(selectedOrganization.name, selectedOrganization.key)
-                    : "Select an organization"}
-                </p>
-              </div>
-              <div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
-                {`${units.length}/${unitsAllowedLabel}`}
-              </div>
-            </div>
-
-            <div className="relative mb-4">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <input
-                className={`${inputClassName} pl-9`}
-                value={unitSearch}
-                onChange={(event) => setUnitSearch(event.target.value)}
-                placeholder="Search units"
-              />
-            </div>
-
-            {filteredUnits.length ? (
-              <ul className="space-y-2">
-                {filteredUnits.map((item) => {
-                  const isActive = selectedUnit?.id === item.id;
-
-                  return (
-                    <li key={item.id} className="group">
-                      <div
-                        className={`flex w-full items-center gap-2 rounded-2xl border px-4 py-3 text-left transition ${
-                          isActive
-                            ? "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-100"
-                            : "border-border bg-card text-card-foreground hover:border-emerald-200 hover:bg-emerald-50/80 dark:hover:bg-slate-900"
-                        }`}
-                      >
-                        <button
-                          type="button"
-                          onClick={() => void handleSelectUnit(item.id)}
-                          className="flex min-w-0 flex-1 items-center justify-between gap-2 text-left"
-                        >
-                          <div className="min-w-0">
-                            <div className="truncate font-medium">{getLocaleLabel(item.name, item.key)}</div>
-                            <div className="truncate text-xs text-muted-foreground">{item.key}</div>
-                          </div>
-                          <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                        </button>
-
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <button
-                              type="button"
-                              disabled={submitting}
-                              onClick={(event) => event.stopPropagation()}
-                              className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-border bg-card text-card-foreground opacity-0 transition group-hover:opacity-100 group-focus-within:opacity-100 hover:bg-accent hover:text-accent-foreground"
-                              aria-label="Unit actions"
-                            >
-                              <MoreHorizontal className="h-4 w-4" />
-                            </button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onSelect={(event) => {
-                                event.preventDefault();
-                                void (async () => {
-                                  await handleSelectUnit(item.id);
-                                  await openCreatePositionDialog("create-root", item.id);
-                                })();
-                              }}
-                            >
-                              Add Department
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              onSelect={(event) => {
-                                event.preventDefault();
-                                setSelectedUnitId(item.id);
-                                openEditUnitDialog(item);
-                              }}
-                            >
-                              Edit Unit
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              variant="destructive"
-                              onSelect={(event) => {
-                                event.preventDefault();
-                                setSelectedUnitId(item.id);
-                                void handleDeleteUnit(item);
-                              }}
-                            >
-                              Delete Unit
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </li>
-                  );
-                })}
-              </ul>
-            ) : (
-              <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                {selectedOrganization ? "No units found." : "Select an organization to load units."}
-              </div>
-            )}
-          </aside>
-
-          <aside className="rounded-3xl border border-border bg-card p-5 shadow-sm">
-            <div className="mb-5 flex items-center justify-between gap-3">
-              <div>
-                <h2 className="text-lg font-semibold text-card-foreground">Departments</h2>
-                <p className="text-sm text-muted-foreground">
-                  {selectedUnit ? getLocaleLabel(selectedUnit.name, selectedUnit.key) : "Select a unit"}
-                </p>
-              </div>
-            </div>
-
-            <div className="relative mb-4">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <input
-                className={`${inputClassName} pl-9`}
-                value={positionSearch}
-                onChange={(event) => setPositionSearch(event.target.value)}
-                placeholder="Search departments"
-              />
-            </div>
-
-            {filteredPositionTree.length ? (
-              <ul className="space-y-2">
-                {filteredPositionTree.map((node) => (
-                  <TreeNode
-                    key={node.id}
-                    node={node}
-                    selectedPositionId={selectedPositionId}
-                    onSelect={(position) => setSelectedPositionId(position.id)}
-                    expandedDepartmentIds={expandedDepartmentIds}
-                    onToggleExpand={handleToggleDepartment}
-                    onInviteUser={openInviteForDepartment}
-                    onAssignUser={openAssignForDepartment}
-                    onAddSubDepartment={openCreateSubDepartmentDialog}
-                    onEdit={(position) => {
-                      setSelectedPositionId(position.id);
-                      void openEditPositionDialog(position);
-                    }}
-                    onDelete={(position) => {
-                      setSelectedPositionId(position.id);
-                      void handleDeletePosition(position);
-                    }}
-                    disabled={!selectedUnit || submitting}
-                  />
-                ))}
-              </ul>
-            ) : (
-              <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                {selectedUnit ? "No departments found." : "Select a unit to load departments."}
-              </div>
-            )}
-          </aside>
-
-          <section className="rounded-3xl border border-border bg-card p-5 shadow-sm">
-              <div className="mb-5">
-                <div>
-                  <h2 className="text-lg font-semibold text-card-foreground">Team members</h2>
-                  <p className="text-sm text-muted-foreground">
-                    {selectedPosition
-                      ? `${getLocaleLabel(selectedPosition.name, selectedPosition.key)} in ${getLocaleLabel(selectedUnit?.name, selectedUnit?.key ?? "")}`
-                      : "Select a department"}
-                  </p>
-                </div>
-              </div>
-
-              <div className="relative mb-4">
-                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                <input
-                  className={`${inputClassName} pl-9`}
-                  value={employeeSearch}
-                  onChange={(event) => setEmployeeSearch(event.target.value)}
-                placeholder="Search team members"
-                />
-              </div>
-
-              {membersLoading ? (
-                <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                  Loading team members...
-                </div>
-              ) : filteredPositionMembers.length ? (
-                <div className="space-y-3">
-                  {filteredPositionMembers.map((employee) => {
-                    const userId = employee.user?.id;
-                    const isOrgAdmin = Boolean(userId && orgAdminUserIds.has(userId));
-                    const isUnitAdmin = Boolean(userId && unitAdminUserIds.has(userId));
-                    const displayName = getLocaleLabel(
-                      employee.name ?? employee.user?.name,
-                      employee.user?.email ?? employee.id,
-                    );
-                    const assignedPositions = employee.employeePositions
-                      ?.map((position) => getLocaleLabel(position.position?.name, position.position?.id ?? ""))
-                      .filter(Boolean)
-                      .join(", ");
-
-                    return (
-                      <article
-                        key={employee.id}
-                        className="rounded-2xl border border-border bg-background p-4 shadow-sm"
-                      >
-                        <div className="flex flex-wrap items-start justify-between gap-4">
-                          <div className="space-y-2">
-                            <div className="flex flex-wrap items-center gap-2">
-                              <h3 className="text-base font-semibold text-foreground">{displayName}</h3>
-                              {isOrgAdmin ? (
-                                <Badge className="bg-green-100 text-green-700">Org admin</Badge>
-                              ) : null}
-                              {isUnitAdmin ? (
-                                <Badge className="bg-sky-100 text-sky-700">Unit admin</Badge>
-                              ) : null}
-                              {employee.status ? (
-                                <Badge className="bg-gray-100 text-gray-700">{employee.status}</Badge>
-                              ) : null}
-                            </div>
-                            <div className="text-sm text-muted-foreground">
-                              {employee.user?.email || employee.user?.username || "No contact info"}
-                            </div>
-                            {assignedPositions ? (
-                              <div className="text-sm text-muted-foreground">
-                                Current positions: {assignedPositions}
-                              </div>
-                            ) : null}
-                          </div>
-
-                          <div className="flex flex-wrap gap-2">
-                            <button
-                              type="button"
-                              disabled={!userId || submitting}
-                              onClick={() => void handleToggleUserActivation(employee)}
-                              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                            >
-                              {employee.status?.toLowerCase() === "inactive" ? (
-                                <>
-                                  <UserCheck className="h-4 w-4" />
-                                  Activate
-                                </>
-                              ) : (
-                                <>
-                                  <UserMinus className="h-4 w-4" />
-                                  Deactivate
-                                </>
-                              )}
-                            </button>
-
-                            <button
-                              type="button"
-                              disabled={!userId || !selectedOrgId || submitting}
-                              onClick={() =>
-                                void handleAdminRoleMutation(
-                                  isOrgAdmin
-                                    ? "/user-roles/remove-org-admin-role"
-                                    : "/user-roles/assign-org-admin-role",
-                                  {
-                                    organizationId: selectedOrgId ?? undefined,
-                                    userId: userId!,
-                                  },
-                                  isOrgAdmin ? "Organization admin removed." : "Organization admin assigned.",
-                                )
-                              }
-                              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                            >
-                              <ShieldCheck className="h-4 w-4" />
-                              {isOrgAdmin ? "Remove org admin" : "Make org admin"}
-                            </button>
-
-                            <button
-                              type="button"
-                              disabled={!userId || !selectedUnitId || submitting}
-                              onClick={() =>
-                                void handleAdminRoleMutation(
-                                  isUnitAdmin
-                                    ? "/user-roles/remove-unit-admin-role"
-                                    : "/user-roles/assign-unit-admin-role",
-                                  {
-                                    unitId: selectedUnitId ?? undefined,
-                                    userId: userId!,
-                                  },
-                                  isUnitAdmin ? "Unit admin removed." : "Unit admin assigned.",
-                                )
-                              }
-                              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                            >
-                              <ShieldCheck className="h-4 w-4" />
-                              {isUnitAdmin ? "Remove unit admin" : "Make unit admin"}
-                            </button>
-
-                            <button
-                              type="button"
-                              disabled={!userId || !selectedOrgId || submitting}
-                              onClick={() => void openManageRolesDialog(employee)}
-                              className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                            >
-                              <Users className="h-4 w-4" />
-                              Manage roles
-                            </button>
-                          </div>
-                        </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 team members found for this department.
-                </div>
-              )}
-          </section>
-        </div>
-      )}
-
-      <ManagementDialog
-        open={isCreateUnitOpen}
-        onOpenChange={setIsCreateUnitOpen}
-        title="Create unit"
-        description="Add a new branch under the selected organization."
-      >
-        <form className="space-y-4" onSubmit={handleCreateUnit}>
-          <Field label="English name">
-            <input
-              className={inputClassName}
-              value={unitForm.nameEn}
-              onChange={(event) => setUnitForm((current) => ({ ...current, nameEn: event.target.value }))}
-            />
-          </Field>
-          <Field label="Amharic name">
-            <input
-              className={inputClassName}
-              value={unitForm.nameAm}
-              onChange={(event) => setUnitForm((current) => ({ ...current, nameAm: event.target.value }))}
-            />
-          </Field>
-          <Field label="Key">
-            <div className="flex gap-2">
-              <input
-                className={inputClassName}
-                value={unitForm.key}
-                onChange={(event) => setUnitForm((current) => ({ ...current, key: event.target.value }))}
-              />
-              <button
-                type="button"
-                className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                onClick={() => setUnitForm((current) => ({ ...current, key: toInternalKey(current.nameEn) }))}
-              >
-                Generate
-              </button>
-            </div>
-          </Field>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsCreateUnitOpen(false)}
-              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-            >
-              Cancel
-            </button>
-            <button type="submit" disabled={submitting} className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}>
-              Save unit
-            </button>
-          </div>
-        </form>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isEditUnitOpen}
-        onOpenChange={setIsEditUnitOpen}
-        title="Edit unit"
-        description="Update the selected branch."
-      >
-        <form className="space-y-4" onSubmit={handleUpdateUnit}>
-          <Field label="English name">
-            <input
-              className={inputClassName}
-              value={unitForm.nameEn}
-              onChange={(event) => setUnitForm((current) => ({ ...current, nameEn: event.target.value }))}
-            />
-          </Field>
-          <Field label="Amharic name">
-            <input
-              className={inputClassName}
-              value={unitForm.nameAm}
-              onChange={(event) => setUnitForm((current) => ({ ...current, nameAm: event.target.value }))}
-            />
-          </Field>
-          <Field label="Key">
-            <input
-              className={inputClassName}
-              value={unitForm.key}
-              onChange={(event) => setUnitForm((current) => ({ ...current, key: event.target.value }))}
-            />
-          </Field>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsEditUnitOpen(false)}
-              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-            >
-              Cancel
-            </button>
-            <button type="submit" disabled={submitting} className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}>
-              Save changes
-            </button>
-          </div>
-        </form>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isCreatePositionOpen}
-        onOpenChange={setIsCreatePositionOpen}
-        title={createPositionMode === "create-root" ? "Create root position" : "Create child position"}
-        description="Add a department or sub-department under the selected branch."
-      >
-        <form className="space-y-4" onSubmit={(event) => void handleSavePosition(event, false)}>
-          <Field label="English name">
-            <input
-              className={inputClassName}
-              value={positionForm.nameEn}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, nameEn: event.target.value }))
-              }
-            />
-          </Field>
-          <Field label="Amharic name">
-            <input
-              className={inputClassName}
-              value={positionForm.nameAm}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, nameAm: event.target.value }))
-              }
-            />
-          </Field>
-          <Field label="Key">
-            <div className="flex gap-2">
-              <input
-                className={inputClassName}
-                value={positionForm.key}
-                onChange={(event) => setPositionForm((current) => ({ ...current, key: event.target.value }))}
-              />
-              <button
-                type="button"
-                className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                onClick={() => setPositionForm((current) => ({ ...current, key: toInternalKey(current.nameEn) }))}
-              >
-                Generate
-              </button>
-            </div>
-          </Field>
-          <Field label="Position type">
-            <Select
-              value={positionForm.positionTypeId || undefined}
-              onValueChange={(value) =>
-                setPositionForm((current) => ({ ...current, positionTypeId: value }))
-              }
-              disabled={positionTypesLoading || submitting}
-            >
-              <SelectTrigger className="w-full rounded-xl">
-                <SelectValue
-                  placeholder={positionTypesLoading ? "Loading position types..." : "Select position type"}
-                />
-              </SelectTrigger>
-              <SelectContent>
-                {positionTypes.map((positionType) => (
-                  <SelectItem key={positionType.id} value={positionType.id}>
-                    {getLocaleLabel(positionType.name, positionType.key)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            {positionTypesError ? (
-              <p className="mt-2 text-xs text-destructive">{positionTypesError}</p>
-            ) : null}
-          </Field>
-          <Field label="Parent position">
-            <select
-              className={inputClassName}
-              value={positionForm.parentPositionId}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, parentPositionId: event.target.value }))
-              }
-            >
-              <option value="">No parent</option>
-              {parentOptions.map((position) => (
-                <option key={position.id} value={position.id}>
-                  {getLocaleLabel(position.name, position.key)}
-                </option>
-              ))}
-            </select>
-          </Field>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsCreatePositionOpen(false)}
-              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-            >
-              Cancel
-            </button>
-            <button type="submit" disabled={submitting} className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}>
-              Save position
-            </button>
-          </div>
-        </form>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isEditPositionOpen}
-        onOpenChange={setIsEditPositionOpen}
-        title="Edit position"
-        description="Update the selected department or move it under a different parent."
-      >
-        <form className="space-y-4" onSubmit={(event) => void handleSavePosition(event, true)}>
-          <Field label="English name">
-            <input
-              className={inputClassName}
-              value={positionForm.nameEn}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, nameEn: event.target.value }))
-              }
-            />
-          </Field>
-          <Field label="Amharic name">
-            <input
-              className={inputClassName}
-              value={positionForm.nameAm}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, nameAm: event.target.value }))
-              }
-            />
-          </Field>
-          <Field label="Key">
-            <input
-              className={inputClassName}
-              value={positionForm.key}
-              onChange={(event) => setPositionForm((current) => ({ ...current, key: event.target.value }))}
-            />
-          </Field>
-          <Field label="Position type">
-            <Select
-              value={positionForm.positionTypeId || undefined}
-              onValueChange={(value) =>
-                setPositionForm((current) => ({ ...current, positionTypeId: value }))
-              }
-              disabled={positionTypesLoading || submitting}
-            >
-              <SelectTrigger className="w-full rounded-xl">
-                <SelectValue
-                  placeholder={positionTypesLoading ? "Loading position types..." : "Select position type"}
-                />
-              </SelectTrigger>
-              <SelectContent>
-                {positionTypes.map((positionType) => (
-                  <SelectItem key={positionType.id} value={positionType.id}>
-                    {getLocaleLabel(positionType.name, positionType.key)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            {positionTypesError ? (
-              <p className="mt-2 text-xs text-destructive">{positionTypesError}</p>
-            ) : null}
-          </Field>
-          <Field label="Parent position">
-            <select
-              className={inputClassName}
-              value={positionForm.parentPositionId}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, parentPositionId: event.target.value }))
-              }
-            >
-              <option value="">No parent</option>
-              {parentOptions.map((position) => (
-                <option key={position.id} value={position.id}>
-                  {getLocaleLabel(position.name, position.key)}
-                </option>
-              ))}
-            </select>
-          </Field>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsEditPositionOpen(false)}
-              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-            >
-              Cancel
-            </button>
-            <button type="submit" disabled={submitting} className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}>
-              Save changes
-            </button>
-          </div>
-        </form>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isInviteEmployeeOpen}
-        onOpenChange={setIsInviteEmployeeOpen}
-        title="Invite employee"
-        description="Create and assign a new employee to the selected position."
-      >
-        <form className="space-y-4" onSubmit={handleInviteEmployee}>
-          <Field label="English name">
-            <input
-              className={inputClassName}
-              value={inviteForm.nameEn}
-              onChange={(event) => setInviteForm((current) => ({ ...current, nameEn: event.target.value }))}
-            />
-          </Field>
-          <Field label="Amharic name">
-            <input
-              className={inputClassName}
-              value={inviteForm.nameAm}
-              onChange={(event) => setInviteForm((current) => ({ ...current, nameAm: event.target.value }))}
-            />
-          </Field>
-          <Field label="Email">
-            <input
-              className={inputClassName}
-              type="email"
-              value={inviteForm.email}
-              onChange={(event) => setInviteForm((current) => ({ ...current, email: event.target.value }))}
-            />
-          </Field>
-          <Field label="Username">
-            <input
-              className={inputClassName}
-              value={inviteForm.username}
-              onChange={(event) => setInviteForm((current) => ({ ...current, username: event.target.value }))}
-            />
-          </Field>
-          <Field label="Phone number">
-            <input
-              className={inputClassName}
-              value={inviteForm.phoneNumber}
-              onChange={(event) =>
-                setInviteForm((current) => ({ ...current, phoneNumber: event.target.value }))
-              }
-            />
-          </Field>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsInviteEmployeeOpen(false)}
-              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-            >
-              Cancel
-            </button>
-            <button type="submit" disabled={submitting} className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}>
-              Send invite
-            </button>
-          </div>
-        </form>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isAssignEmployeeOpen}
-        onOpenChange={setIsAssignEmployeeOpen}
-        title="Assign existing employee"
-        description="Browse all employees in the selected organization and assign one to the selected position."
-      >
-        <div className="space-y-4">
-          <div className="relative">
-            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <input
-              className={`${inputClassName} pl-9`}
-              value={assignSearch}
-              onChange={(event) => setAssignSearch(event.target.value)}
-              placeholder="Search organization employees"
-            />
-          </div>
-
-          <div className="max-h-[420px] space-y-2 overflow-y-auto pr-1">
-            {orgEmployeesLoading ? (
-              <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                Loading organization employees...
-              </div>
-            ) : assignableEmployees.length ? (
-              assignableEmployees.map((employee) => {
-                const displayName = getLocaleLabel(
-                  employee.name ?? employee.user?.name,
-                  employee.user?.email ?? employee.id,
-                );
-                const assignedPositions = employee.employeePositions
-                  ?.map((position) => getLocaleLabel(position.position?.name, position.position?.id ?? ""))
-                  .filter(Boolean)
-                  .join(", ");
-
-                return (
-                  <div
-                    key={employee.id}
-                    className="flex items-start justify-between gap-3 rounded-2xl border border-border bg-background p-4"
-                  >
-                    <div className="space-y-1">
-                      <div className="font-medium text-foreground">{displayName}</div>
-                      <div className="text-sm text-muted-foreground">
-                        {employee.user?.email || employee.user?.phoneNumber || "No contact info"}
-                      </div>
-                      {assignedPositions ? (
-                        <div className="text-sm text-muted-foreground">
-                          Existing positions: {assignedPositions}
-                        </div>
-                      ) : null}
-                    </div>
-                    <button
-                      type="button"
-                      disabled={submitting}
-                      onClick={() => void handleAssignEmployee(employee.id)}
-                      className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                    >
-                      Assign
-                    </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 employees found for this organization.
-              </div>
-            )}
-          </div>
-        </div>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isManageRolesOpen}
-        onOpenChange={setIsManageRolesOpen}
-        title="Manage roles"
-        description={
-          selectedRoleUser
-            ? `Assign organization-scoped roles for ${getLocaleLabel(selectedRoleUser.name ?? selectedRoleUser.user?.name, selectedRoleUser.user?.email ?? selectedRoleUser.id)}.`
-            : undefined
-        }
-      >
-        <div className="space-y-4">
-          {rolesLoading ? (
-            <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>
-          ) : (
-            <div className="max-h-[420px] space-y-2 overflow-y-auto pr-1">
-              {availableRoles.map((role) => (
-                <label
-                  key={role.id}
-                  className="flex items-center gap-3 rounded-2xl border border-border bg-background px-4 py-3 text-sm"
-                >
-                  <input
-                    type="checkbox"
-                    checked={roleIds.includes(role.id)}
-                    onChange={(event) => {
-                      setRoleIds((current) =>
-                        event.target.checked
-                          ? [...current, role.id]
-                          : current.filter((currentRoleId) => currentRoleId !== role.id),
-                      );
-                    }}
-                  />
-                  <div>
-                    <div className="font-medium text-foreground">{getLocaleLabel(role.name, role.key)}</div>
-                    <div className="text-xs text-muted-foreground">{role.key}</div>
-                  </div>
-                </label>
-              ))}
-              {!availableRoles.length ? (
-                <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                  No assignable roles available.
-                </div>
-              ) : null}
-            </div>
-          )}
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsManageRolesOpen(false)}
-              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              disabled={submitting || rolesLoading}
-              onClick={() => void handleSaveRoles()}
-              className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-            >
-              Save roles
-            </button>
-          </div>
-        </div>
-      </ManagementDialog>
-    </section>
-  );
-};
-
-export default UserManagementPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UsersPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UsersPage.tsx
deleted file mode 100644
index 70d58d313..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UsersPage.tsx
+++ /dev/null
@@ -1,825 +0,0 @@
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
-import { isAxiosError } from "axios";
-import {
-  Badge,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@edr/ui-common";
-import { Network, RefreshCw, Search, UserCheck, UserMinus, Users } from "lucide-react";
-
-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 EmployeeUserRecord {
-  id: string;
-  name?: LocaleText;
-  email?: string;
-  phoneNumber?: string;
-  username?: string;
-}
-
-interface EmployeePositionSummary {
-  id: string;
-  position?: {
-    id: string;
-    name?: LocaleText;
-  };
-}
-
-interface EmployeeRecord {
-  id: string;
-  name?: LocaleText;
-  user?: EmployeeUserRecord;
-  status?: string;
-  employeePositions?: EmployeePositionSummary[];
-}
-
-interface RoleRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-}
-
-interface UserFormState {
-  nameEn: string;
-  nameAm: string;
-  email: string;
-  username: string;
-  phoneNumber: string;
-  assignOrganizationAdmin: boolean;
-}
-
-interface ListResponse<T> {
-  items?: T[];
-  data?: T[];
-}
-
-const RESERVED_ROLE_KEYS = new Set(["super_admin", "organization_admin", "unit_admin"]);
-
-const emptyUserForm: UserFormState = {
-  nameEn: "",
-  nameAm: "",
-  email: "",
-  username: "",
-  phoneNumber: "",
-  assignOrganizationAdmin: false,
-};
-
-const inputClassName =
-  "w-full rounded-xl border border-border bg-background px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 dark:focus:ring-emerald-950";
-const buttonClassName =
-  "inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-60";
-
-const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") => {
-  if (!value) {
-    return fallback;
-  }
-
-  return 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 mergeEmployeesByUser = (employees: EmployeeRecord[]) => {
-  const employeesByUserId = new Map<string, EmployeeRecord>();
-
-  for (const employee of employees) {
-    const userId = employee.user?.id;
-
-    if (!userId) {
-      employeesByUserId.set(employee.id, employee);
-      continue;
-    }
-
-    const existing = employeesByUserId.get(userId);
-
-    if (!existing) {
-      employeesByUserId.set(userId, employee);
-      continue;
-    }
-
-    const existingPositions = existing.employeePositions ?? [];
-    const nextPositions = employee.employeePositions ?? [];
-    const mergedPositions = Array.from(
-      new Map(
-        [...existingPositions, ...nextPositions].map((position) => [position.id, position]),
-      ).values(),
-    );
-
-    employeesByUserId.set(userId, {
-      ...existing,
-      ...employee,
-      id: existing.id,
-      name: existing.name ?? employee.name,
-      status: existing.status ?? employee.status,
-      user: existing.user ?? employee.user,
-      employeePositions: mergedPositions,
-    });
-  }
-
-  return [...employeesByUserId.values()];
-};
-
-const getErrorMessage = (error: unknown, fallback: string) => {
-  if (isAxiosError(error)) {
-    const message = error.response?.data?.message;
-    if (typeof message === "string") {
-      return message;
-    }
-    if (Array.isArray(message) && typeof message[0] === "string") {
-      return message[0];
-    }
-  }
-
-  return error instanceof Error ? error.message : fallback;
-};
-
-const Field = ({ label, children }: { label: string; children: ReactNode }) => (
-  <label className="flex flex-col gap-2 text-sm">
-    <span className="font-medium text-foreground">{label}</span>
-    {children}
-  </label>
-);
-
-const ManagementDialog = ({
-  open,
-  title,
-  description,
-  onOpenChange,
-  children,
-}: {
-  open: boolean;
-  title: string;
-  description?: string;
-  onOpenChange: (open: boolean) => void;
-  children: ReactNode;
-}) => (
-  <Dialog open={open} onOpenChange={onOpenChange}>
-    <DialogContent className="sm:max-w-2xl">
-      <DialogHeader>
-        <DialogTitle>{title}</DialogTitle>
-        {description ? <DialogDescription>{description}</DialogDescription> : null}
-      </DialogHeader>
-      {children}
-    </DialogContent>
-  </Dialog>
-);
-
-const UsersPage = () => {
-  const { user } = useAuth();
-  const [organizations, setOrganizations] = useState<OrganizationRecord[]>([]);
-  const [orgEmployees, setOrgEmployees] = useState<EmployeeRecord[]>([]);
-  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);
-  const [orgUserSearch, setOrgUserSearch] = useState("");
-  const [createUserForm, setCreateUserForm] = useState<UserFormState>(emptyUserForm);
-  const [availableRoles, setAvailableRoles] = useState<RoleRecord[]>([]);
-  const [roleIds, setRoleIds] = useState<string[]>([]);
-  const [selectedRoleUser, setSelectedRoleUser] = useState<EmployeeRecord | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [orgEmployeesLoading, setOrgEmployeesLoading] = useState(false);
-  const [rolesLoading, setRolesLoading] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [actionError, setActionError] = useState<string | null>(null);
-  const [actionSuccess, setActionSuccess] = useState<string | null>(null);
-  const [isCreateUserOpen, setIsCreateUserOpen] = useState(false);
-  const [isManageRolesOpen, setIsManageRolesOpen] = useState(false);
-
-  const isSuperAdmin = Boolean(user?.roles?.some((role) => role.key === "super_admin"));
-  const allowedOrgIds = useMemo(
-    () => new Set((user?.employee ?? []).map((employee) => employee.organizationId).filter(Boolean)),
-    [user?.employee],
-  );
-
-  const visibleOrganizations = useMemo(() => {
-    if (isSuperAdmin) {
-      return organizations;
-    }
-
-    return organizations.filter((organization) => allowedOrgIds.has(organization.id));
-  }, [allowedOrgIds, isSuperAdmin, organizations]);
-
-  const selectedOrganization = useMemo(
-    () => visibleOrganizations.find((item) => item.id === selectedOrgId) ?? null,
-    [selectedOrgId, visibleOrganizations],
-  );
-
-  const filteredOrgEmployees = useMemo(() => {
-    const query = orgUserSearch.trim().toLowerCase();
-
-    return orgEmployees.filter((employee) => {
-      const label = getLocaleLabel(
-        employee.name ?? employee.user?.name,
-        employee.user?.email ?? employee.id,
-      ).toLowerCase();
-      const email = employee.user?.email?.toLowerCase() ?? "";
-      const username = employee.user?.username?.toLowerCase() ?? "";
-
-      if (!query) {
-        return true;
-      }
-
-      return label.includes(query) || email.includes(query) || username.includes(query);
-    });
-  }, [orgEmployees, orgUserSearch]);
-
-  const resetMessages = () => {
-    setActionError(null);
-    setActionSuccess(null);
-  };
-
-  const loadOrganizations = useCallback(async () => {
-    setLoading(true);
-    setLoadError(null);
-
-    try {
-      const response = await api.get<ListResponse<OrganizationRecord>>("/organizations");
-      setOrganizations(getItems(response.data));
-    } catch (error) {
-      setLoadError(getErrorMessage(error, "Failed to load organizations."));
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const loadOrgEmployees = useCallback(async (organizationId: string) => {
-    setOrgEmployeesLoading(true);
-
-    try {
-      const response = await api.get<ListResponse<EmployeeRecord>>(
-        `/backoffice/organizations/${organizationId}/employees`,
-      );
-      setOrgEmployees(mergeEmployeesByUser(getItems(response.data)));
-    } catch {
-      setOrgEmployees([]);
-    } finally {
-      setOrgEmployeesLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    void loadOrganizations();
-  }, [loadOrganizations]);
-
-  useEffect(() => {
-    if (!visibleOrganizations.length) {
-      setSelectedOrgId(null);
-      setOrgEmployees([]);
-      return;
-    }
-
-    if (selectedOrgId && visibleOrganizations.some((organization) => organization.id === selectedOrgId)) {
-      return;
-    }
-
-    setSelectedOrgId(visibleOrganizations[0]?.id ?? null);
-  }, [selectedOrgId, visibleOrganizations]);
-
-  useEffect(() => {
-    if (!selectedOrgId) {
-      setOrgEmployees([]);
-      return;
-    }
-
-    void loadOrgEmployees(selectedOrgId);
-  }, [loadOrgEmployees, selectedOrgId]);
-
-  const handleRefresh = async () => {
-    resetMessages();
-    await Promise.all([
-      loadOrganizations(),
-      selectedOrgId ? loadOrgEmployees(selectedOrgId) : Promise.resolve(),
-    ]);
-  };
-
-  const handleSelectOrganization = async (organizationId: string) => {
-    setSelectedOrgId(organizationId);
-    setOrgEmployees([]);
-    resetMessages();
-
-    try {
-      await loadOrgEmployees(organizationId);
-    } catch {
-      // Loader already handles fallback state.
-    }
-  };
-
-  const openCreateUserDialog = () => {
-    if (!selectedOrgId) {
-      setActionError("Select an organization before adding a user.");
-      return;
-    }
-
-    setCreateUserForm(emptyUserForm);
-    resetMessages();
-    setIsCreateUserOpen(true);
-  };
-
-  const openManageRolesDialog = async (employee: EmployeeRecord) => {
-    if (!selectedOrgId || !employee.user?.id) {
-      return;
-    }
-
-    setRolesLoading(true);
-    resetMessages();
-    setSelectedRoleUser(employee);
-    setIsManageRolesOpen(true);
-
-    try {
-      const [rolesResponse, assignedResponse] = await Promise.all([
-        api.get<ListResponse<RoleRecord>>("/roles"),
-        api.get<RoleRecord[]>(`/backoffice/organizations/${selectedOrgId}/employee-users/${employee.user.id}/roles`),
-      ]);
-      const roles = getItems(rolesResponse.data).filter((role) => !RESERVED_ROLE_KEYS.has(role.key));
-      setAvailableRoles(roles);
-      setRoleIds(getItems(assignedResponse.data).map((role) => role.id));
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to load user roles."));
-      setAvailableRoles([]);
-      setRoleIds([]);
-    } finally {
-      setRolesLoading(false);
-    }
-  };
-
-  const handleCreateUser = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!selectedOrgId) {
-      setActionError("Select an organization before adding a user.");
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      const response = await api.post<EmployeeRecord>(
-        `/backoffice/organizations/${selectedOrgId}/users`,
-        {
-          username: createUserForm.username.trim(),
-          phoneNumber: createUserForm.phoneNumber.trim(),
-          email: createUserForm.email.trim(),
-          name: {
-            am: createUserForm.nameAm.trim(),
-            en: createUserForm.nameEn.trim(),
-          },
-          assignOrganizationAdmin: createUserForm.assignOrganizationAdmin,
-        },
-      );
-
-      const shouldAssignOrganizationAdmin = createUserForm.assignOrganizationAdmin;
-      setCreateUserForm(emptyUserForm);
-      setIsCreateUserOpen(false);
-      setActionSuccess(
-        shouldAssignOrganizationAdmin
-          ? "User created as organization admin. Default password: 12345678."
-          : "User created. Default password: 12345678.",
-      );
-      await loadOrgEmployees(selectedOrgId);
-
-      if (!shouldAssignOrganizationAdmin) {
-        await openManageRolesDialog(response.data);
-      }
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to create user."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleSaveRoles = async () => {
-    if (!selectedOrgId || !selectedRoleUser?.user?.id) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.put(
-        `/backoffice/organizations/${selectedOrgId}/employee-users/${selectedRoleUser.user.id}/roles`,
-        { roleIds },
-      );
-      setActionSuccess("User roles updated.");
-      setIsManageRolesOpen(false);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to update user roles."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleToggleUserActivation = async (employee: EmployeeRecord) => {
-    if (!employee.user?.id) {
-      return;
-    }
-
-    const isInactive = employee.status?.toLowerCase() === "inactive";
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.patch(`/users/${isInactive ? "activate-user" : "deactivate-user"}/${employee.user.id}`);
-      setActionSuccess(isInactive ? "User activated." : "User deactivated.");
-      if (selectedOrgId) {
-        await loadOrgEmployees(selectedOrgId);
-      }
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to update user status."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <section className="space-y-6 bg-background p-6 text-foreground">
-      <div className="rounded-3xl border border-border bg-linear-to-br from-emerald-100 via-card to-background p-6 shadow-sm dark:from-emerald-950/30 dark:via-card dark:to-background">
-        <div className="flex flex-wrap items-start justify-between gap-4">
-          <div className="flex items-start gap-4">
-            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300">
-              <Network className="h-6 w-6" />
-            </div>
-            <div className="space-y-2">
-              <p className="text-sm font-medium uppercase tracking-[0.2em] text-emerald-700 dark:text-emerald-300">
-                User management
-              </p>
-              <h1 className="text-2xl font-semibold text-foreground">Users</h1>
-              <p className="max-w-3xl text-sm text-muted-foreground">
-                Create organization users, activate or deactivate access, and assign organization-scoped roles.
-              </p>
-            </div>
-          </div>
-
-          <button
-            type="button"
-            onClick={() => void handleRefresh()}
-            className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-          >
-            <RefreshCw className="h-4 w-4" />
-            Refresh
-          </button>
-        </div>
-      </div>
-
-      {actionSuccess ? (
-        <div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/30 dark:text-emerald-200">
-          {actionSuccess}
-        </div>
-      ) : null}
-
-      {actionError ? (
-        <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-200">
-          {actionError}
-        </div>
-      ) : null}
-
-      {loadError ? (
-        <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-200">
-          {loadError}
-        </div>
-      ) : null}
-
-      {loading ? (
-        <div className="rounded-3xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
-          Loading users workspace...
-        </div>
-      ) : (
-        <div className="grid gap-6 xl:grid-cols-4">
-          <aside className="rounded-3xl border border-border bg-card p-5 shadow-sm">
-            <div className="mb-5">
-              <h2 className="text-lg font-semibold text-card-foreground">Organization</h2>
-              <p className="text-sm text-muted-foreground">
-                {isSuperAdmin ? "All organizations" : "Assigned organizations"}
-              </p>
-            </div>
-
-            {visibleOrganizations.length ? (
-              <ul className="space-y-2">
-                {visibleOrganizations.map((organization) => {
-                  const isActive = selectedOrgId === organization.id;
-                  const isDisabled = !isSuperAdmin;
-
-                  return (
-                    <li key={organization.id}>
-                      <button
-                        type="button"
-                        disabled={isDisabled}
-                        onClick={() => void handleSelectOrganization(organization.id)}
-                        className={`flex w-full items-center justify-between gap-2 rounded-2xl border px-4 py-3 text-left transition ${
-                          isActive
-                            ? "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-100"
-                            : "border-border bg-card text-card-foreground hover:border-emerald-200 hover:bg-emerald-50/80 dark:hover:bg-slate-900"
-                        } ${isDisabled ? "cursor-default" : ""}`}
-                      >
-                        <div className="min-w-0">
-                          <div className="truncate font-medium">
-                            {getLocaleLabel(organization.name, organization.key)}
-                          </div>
-                          <div className="truncate text-xs text-muted-foreground">{organization.key}</div>
-                        </div>
-                        {!isSuperAdmin ? <Badge className="bg-sky-100 text-sky-700">Assigned</Badge> : null}
-                      </button>
-                    </li>
-                  );
-                })}
-              </ul>
-            ) : (
-              <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                No organizations available.
-              </div>
-            )}
-
-            <button
-              type="button"
-              disabled={!selectedOrgId || submitting}
-              onClick={openCreateUserDialog}
-              className={`${buttonClassName} mt-4 w-full bg-emerald-600 text-white hover:bg-emerald-700`}
-            >
-              Add user to organization
-            </button>
-          </aside>
-
-          <section className="rounded-3xl border border-border bg-card p-5 shadow-sm xl:col-span-3">
-            <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
-              <div>
-                <h2 className="text-lg font-semibold text-card-foreground">Users</h2>
-                <p className="text-sm text-muted-foreground">
-                  {selectedOrganization
-                    ? `Manage users in ${getLocaleLabel(selectedOrganization.name, selectedOrganization.key)}`
-                    : "Select an organization"}
-                </p>
-              </div>
-              <div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
-                {orgEmployees.length} users
-              </div>
-            </div>
-
-            <div className="relative mb-4">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <input
-                className={`${inputClassName} pl-9`}
-                value={orgUserSearch}
-                onChange={(event) => setOrgUserSearch(event.target.value)}
-                placeholder="Search users"
-              />
-            </div>
-
-            {orgEmployeesLoading ? (
-              <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                Loading users...
-              </div>
-            ) : filteredOrgEmployees.length ? (
-              <div className="space-y-3">
-                {filteredOrgEmployees.map((employee) => {
-                  const userId = employee.user?.id;
-                  const displayName = getLocaleLabel(
-                    employee.name ?? employee.user?.name,
-                    employee.user?.email ?? employee.id,
-                  );
-                  const assignedPositions = employee.employeePositions
-                    ?.map((position) => getLocaleLabel(position.position?.name, position.position?.id ?? ""))
-                    .filter(Boolean)
-                    .join(", ");
-
-                  return (
-                    <article
-                      key={employee.id}
-                      className="rounded-2xl border border-border bg-background p-4 shadow-sm"
-                    >
-                      <div className="flex flex-wrap items-start justify-between gap-4">
-                        <div className="space-y-2">
-                          <div className="flex flex-wrap items-center gap-2">
-                            <h3 className="text-base font-semibold text-foreground">{displayName}</h3>
-                            {employee.status ? (
-                              <Badge className="bg-gray-100 text-gray-700">{employee.status}</Badge>
-                            ) : null}
-                          </div>
-                          <div className="text-sm text-muted-foreground">
-                            {employee.user?.email || employee.user?.username || "No contact info"}
-                          </div>
-                          <div className="text-sm text-muted-foreground">
-                            {assignedPositions ? `Current positions: ${assignedPositions}` : "No positions assigned."}
-                          </div>
-                        </div>
-
-                        <div className="flex flex-wrap gap-2">
-                          <button
-                            type="button"
-                            disabled={!userId || submitting}
-                            onClick={() => void handleToggleUserActivation(employee)}
-                            className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                          >
-                            {employee.status?.toLowerCase() === "inactive" ? (
-                              <>
-                                <UserCheck className="h-4 w-4" />
-                                Activate
-                              </>
-                            ) : (
-                              <>
-                                <UserMinus className="h-4 w-4" />
-                                Deactivate
-                              </>
-                            )}
-                          </button>
-
-                          <button
-                            type="button"
-                            disabled={!userId || !selectedOrgId || submitting}
-                            onClick={() => void openManageRolesDialog(employee)}
-                            className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                          >
-                            <Users className="h-4 w-4" />
-                            Manage roles
-                          </button>
-                        </div>
-                      </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">
-                {selectedOrganization
-                  ? "No users found for this organization."
-                  : "Select an organization to load users."}
-              </div>
-            )}
-          </section>
-        </div>
-      )}
-
-      <ManagementDialog
-        open={isCreateUserOpen}
-        onOpenChange={setIsCreateUserOpen}
-        title="Add user"
-        description={
-          selectedOrganization
-            ? `Create a loginable user in ${getLocaleLabel(selectedOrganization.name, selectedOrganization.key)}. Default password: 12345678.`
-            : "Create a loginable user in the selected organization."
-        }
-      >
-        <form className="space-y-4" onSubmit={handleCreateUser}>
-          <Field label="English name">
-            <input
-              className={inputClassName}
-              value={createUserForm.nameEn}
-              onChange={(event) => setCreateUserForm((current) => ({ ...current, nameEn: event.target.value }))}
-            />
-          </Field>
-          <Field label="Amharic name">
-            <input
-              className={inputClassName}
-              value={createUserForm.nameAm}
-              onChange={(event) => setCreateUserForm((current) => ({ ...current, nameAm: event.target.value }))}
-            />
-          </Field>
-          <Field label="Email">
-            <input
-              className={inputClassName}
-              type="email"
-              value={createUserForm.email}
-              onChange={(event) => setCreateUserForm((current) => ({ ...current, email: event.target.value }))}
-            />
-          </Field>
-          <Field label="Username">
-            <input
-              className={inputClassName}
-              value={createUserForm.username}
-              onChange={(event) => setCreateUserForm((current) => ({ ...current, username: event.target.value }))}
-            />
-          </Field>
-          <Field label="Phone number">
-            <input
-              className={inputClassName}
-              value={createUserForm.phoneNumber}
-              onChange={(event) => setCreateUserForm((current) => ({ ...current, phoneNumber: event.target.value }))}
-            />
-          </Field>
-          <label className="flex items-start gap-3 rounded-2xl border border-border bg-background px-4 py-3 text-sm">
-            <input
-              type="checkbox"
-              checked={createUserForm.assignOrganizationAdmin}
-              onChange={(event) =>
-                setCreateUserForm((current) => ({
-                  ...current,
-                  assignOrganizationAdmin: event.target.checked,
-                }))
-              }
-            />
-            <div>
-              <div className="font-medium text-foreground">Create as organization admin</div>
-              <div className="text-xs text-muted-foreground">
-                Also assigns built-in org admin access and the freight org manager role.
-              </div>
-            </div>
-          </label>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsCreateUserOpen(false)}
-              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-            >
-              Cancel
-            </button>
-            <button type="submit" disabled={submitting} className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}>
-              Create user
-            </button>
-          </div>
-        </form>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isManageRolesOpen}
-        onOpenChange={setIsManageRolesOpen}
-        title="Manage roles"
-        description={
-          selectedRoleUser
-            ? `Assign organization-scoped roles for ${getLocaleLabel(selectedRoleUser.name ?? selectedRoleUser.user?.name, selectedRoleUser.user?.email ?? selectedRoleUser.id)}.`
-            : undefined
-        }
-      >
-        <div className="space-y-4">
-          {rolesLoading ? (
-            <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>
-          ) : (
-            <div className="max-h-[420px] space-y-2 overflow-y-auto pr-1">
-              {availableRoles.map((role) => (
-                <label
-                  key={role.id}
-                  className="flex items-center gap-3 rounded-2xl border border-border bg-background px-4 py-3 text-sm"
-                >
-                  <input
-                    type="checkbox"
-                    checked={roleIds.includes(role.id)}
-                    onChange={(event) => {
-                      setRoleIds((current) =>
-                        event.target.checked
-                          ? [...current, role.id]
-                          : current.filter((currentRoleId) => currentRoleId !== role.id),
-                      );
-                    }}
-                  />
-                  <div>
-                    <div className="font-medium text-foreground">{getLocaleLabel(role.name, role.key)}</div>
-                    <div className="text-xs text-muted-foreground">{role.key}</div>
-                  </div>
-                </label>
-              ))}
-              {!availableRoles.length ? (
-                <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                  No assignable roles available.
-                </div>
-              ) : null}
-            </div>
-          )}
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsManageRolesOpen(false)}
-              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              disabled={submitting || rolesLoading}
-              onClick={() => void handleSaveRoles()}
-              className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-            >
-              Save roles
-            </button>
-          </div>
-        </div>
-      </ManagementDialog>
-    </section>
-  );
-};
-
-export default UsersPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/iamConfig.ts b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/iamConfig.ts
deleted file mode 100644
index ec27b5c76..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/iamConfig.ts
+++ /dev/null
@@ -1,207 +0,0 @@
-import type { DesignConfig } from "@tria-plc/iamui";
-
-import {
-  FREIGHT_BRAND,
-  FREIGHT_BRAND_LIGHT,
-  freightBrand,
-} from "@/theme/freight-brand";
-
-export const iamConfig: DesignConfig = {
-  brand: {
-    appName: "EDR Freight Backoffice",
-    logoUrl: "/assets/logo.svg",
-  },
-  colors: {
-    primary: FREIGHT_BRAND,
-    primaryForeground: "#ffffff",
-    secondary: "#f4f7fb",
-    background: "#f7f9fb",
-    foreground: "#0f172a",
-    border: "#eef1f4",
-    muted: "#f1f5f9",
-    mutedForeground: "#64748b",
-    card: "#ffffff",
-    sidebar: "#ffffff",
-    danger: "#ef4444",
-  },
-  typography: {
-    fontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
-    headingFontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
-    baseFontSize: "15px",
-    fontWeight: "500",
-  },
-  shape: {
-    radius: "1rem",
-  },
-  shadows: {
-    card: "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
-    dropdown: "0 12px 30px rgba(15, 23, 42, 0.12)",
-    modal: "0 20px 45px rgba(15, 23, 42, 0.2)",
-  },
-  components: {
-    buttonDefaultVariant: "filled",
-    inputDefaultSize: "sm",
-    inputRadius: "md",
-    modalRadius: "lg",
-    tableHighlightOnHover: true,
-  },
-  layout: {
-    userManagementView: "classic",
-    showTopBar: true as any,
-    sidebarWidth: "280px",
-    sidebarCollapsedWidth: "80px",
-    headerHeight: "80px",
-    contentMaxWidth: "none",
-    sidebarBackground: "#ffffff",
-    sidebarColor: "#475569",
-    sidebarMutedColor: "#94a3b8",
-    sidebarActiveBackground:
-      "linear-gradient(135deg, rgba(45, 191, 149, 0.14) 0%, rgba(27, 158, 122, 0.06) 100%)",
-    sidebarActiveColor: FREIGHT_BRAND,
-    sidebarHoverBackground: "#f5f7fa",
-    sidebarBorder: "#eef1f4",
-    sidebarRail: `linear-gradient(180deg, ${FREIGHT_BRAND_LIGHT} 0%, ${FREIGHT_BRAND} 100%)`,
-    sidebarBrandLabel: "EDR Freight",
-    sidebarBrandSublabel: "Backoffice Console",
-    menuBackground: "#ffffff",
-    menuActiveColor: FREIGHT_BRAND,
-    menuActiveBorderColor: FREIGHT_BRAND,
-    menuColor: "#64748b",
-    menuHoverColor: "#0f172a",
-    modalAccentColor: `linear-gradient(135deg, ${FREIGHT_BRAND_LIGHT} 0%, ${FREIGHT_BRAND} 100%)`,
-    modalHeaderBackground: "#ffffff",
-    modalHeaderEditBackground: "#ffffff",
-    modalIconBackground: freightBrand.mutedBg,
-    modalIconColor: FREIGHT_BRAND,
-    modalTitleColor: "#0f172a",
-    modalFocusColor: FREIGHT_BRAND,
-    modalSurface: "#ffffff",
-  },
-  appearance: {
-    colorScheme: "light",
-    slots: {
-      root: {
-        styles: {
-          background: "#f7f9fb",
-          color: "#0f172a",
-          fontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
-        },
-      },
-      shell: {
-        styles: {
-          background: "#f7f9fb",
-        },
-      },
-      content: {
-        styles: {
-          background: "#f7f9fb",
-        },
-      },
-      page: {
-        styles: {
-          background: "#ffffff",
-          border: "1px solid #eef1f4",
-          borderRadius: "24px",
-          boxShadow:
-            "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
-        },
-      },
-      card: {
-        styles: {
-          background: "#ffffff",
-          border: "1px solid #eef1f4",
-          borderRadius: "20px",
-          boxShadow:
-            "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
-        },
-      },
-      sidebar: {
-        styles: {
-          background: "#ffffff",
-          border: "1px solid #eef1f4",
-          borderRadius: "16px",
-          boxShadow:
-            "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
-        },
-      },
-      "sidebar-brand": {
-        styles: {
-          minHeight: "80px",
-          borderBottom: "1px solid #f1f5f9",
-        },
-      },
-      topbar: {
-        styles: {
-          background: "#ffffff",
-          border: "1px solid #eef1f4",
-          borderRadius: "16px",
-          boxShadow:
-            "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
-        },
-      },
-      "topbar-panel": {
-        styles: {
-          background: "#f7f9fb",
-          border: "1px solid #eef1f4",
-          borderRadius: "12px",
-        },
-      },
-      "topbar-user-summary": {
-        styles: {
-          borderRadius: "14px",
-        },
-      },
-      table: {
-        styles: {
-          background: "#ffffff",
-          border: "1px solid #eef1f4",
-          borderRadius: "20px",
-          overflow: "hidden",
-        },
-      },
-      "table-header": {
-        styles: {
-          background: "#f8fafc",
-        },
-      },
-      modal: {
-        styles: {
-          borderRadius: "24px",
-          overflow: "hidden",
-        },
-      },
-      "modal-header": {
-        styles: {
-          background: "#ffffff",
-          borderBottom: "1px solid #eef1f4",
-        },
-      },
-    },
-    customCss: `
-      [data-um-app="user-management"] {
-        --um-page-gap: 20px;
-      }
-
-      [data-um-app="user-management"] h1,
-      [data-um-app="user-management"] h2,
-      [data-um-app="user-management"] h3,
-      [data-um-app="user-management"] h4,
-      [data-um-app="user-management"] h5,
-      [data-um-app="user-management"] h6 {
-        letter-spacing: -0.02em;
-        color: #0f172a;
-      }
-
-      [data-um-app="user-management"] [data-um-slot="sidebar-item"][aria-current="page"] {
-        box-shadow: inset 3px 0 0 ${FREIGHT_BRAND};
-      }
-
-      [data-um-app="user-management"] button,
-      [data-um-app="user-management"] input,
-      [data-um-app="user-management"] select,
-      [data-um-app="user-management"] textarea {
-        font-family: 'Outfit', var(--font-sans), system-ui, sans-serif;
-      }
-    `,
-  },
-};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/route.tsx b/apps/edr-freight-web/backoffice/src/user-management/route.tsx
index 910712d5d..76d3182ad 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/route.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/route.tsx
@@ -6,20 +6,15 @@ import { isSuperAdmin } from "@/lib/permissions";
 import { WithPermission } from "@/shared/hooks/useHas";
 import PendingExternalUsers from "@/super-admin/components/externalUsers/PendingExternalUsers";
 import TemplatePage from "@/super-admin/components/templates/components/templates";
-import UserManagementPage from "@/pages/dashboard/user-management/UserManagementPage";
-
 import CreatePositionPage from "./pages/position-management/create";
 import EditPositionPage from "./pages/position-management/edit";
 import PositionManagementPage from "./pages/position-management";
 import MigratedDataManagementPage from "./pages/position-management/MigratedDataManagementPage";
 import UserPositionApprovalPage from "./pages/UserPositionApprovalPage";
 import ViewMigratedDataPage from "./components/MigratedRecords/ViewMigratedDataPage";
-import ContentManagement from "./components/content/ContentManagement";
-import { BulkUserUpload } from "./bulkUpload/bulkUpload";
 import AllRecordsPage from "./all-records/pages/AllRecordsPage";
 import AllRecordDetailsPage from "./all-records/pages/AllRecordDetailsPage";
 import Branding from "./web-Management/Branding/Branding";
-import { WebManagementHomePage } from "./web-Management/webManagement";
 import { AppLayout } from "./Applayout";
 import ActivityLogPage from "@/pages/ActivityLogPage";
 import AdminRegistrationPage from "@/pages/Organizations/AdminRegistrationPage";
@@ -46,6 +41,7 @@ import ConfigurationPage from "@/pages/ConfigurationPage";
 import { SidebarProvider } from "@/shared/common/ui/sidebar";
 import { AuthProvider as UmAuthProvider } from "@/shared/context/AuthContext";
 import { PermissionProvider } from "@/shared/context/PermissionContext";
+import UserManagementPage from "@/pages/UserManagementPage";
 
 /**
  * Provider shell for the vendored IAM UI. Feeds its Auth + Permission contexts