Merge branch 'dev' of github.com:Tria-plc/edr-platform into freight/feature/first_mile_invoice

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

@@ -23,6 +23,7 @@ import {
   Users,
   Wallet,
 } from "lucide-react";
+import { useEffect } from "react";
 import {
   Navigate,
   Outlet,
@@ -139,17 +140,17 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <LayoutDashboard />,
       },
       {
-        label: "User Management",
+        label: "Staff",
         href: "/um",
         icon: <Users />,
       },
       {
-        label: "Booking requests",
+        label: "Bookings",
         href: "/dashboard/booking-requests",
         icon: <FileText />,
       },
       {
-        label: "Contract requests",
+        label: "Contracts",
         href: "/dashboard/contract-requests",
         icon: <FileSignature />,
         permission: FREIGHT_PERMS.contracts.view,
@@ -178,7 +179,7 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
     title: "Operations",
     items: [
       {
-        label: "Document Clearance",
+        label: "Clearance",
         href: "/dashboard/contracts/clearance",
         icon: <ShieldCheck />,
         permission: [
@@ -340,7 +341,7 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
     title: "Port & Terminal",
     items: [
       {
-        label: "Import Operations",
+        label: "Imports",
         href: "/dashboard/import-warehouse",
         icon: <PackageOpen />,
         children: [
@@ -372,7 +373,7 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         ],
       },
       {
-        label: "Export Operations",
+        label: "Exports",
         href: "/dashboard/export-warehouse",
         icon: <Truck />,
         children: [
@@ -501,7 +502,8 @@ const isClearanceItem = (item: SidebarItem): boolean =>
 /**
  * Keep only items the user is permitted to see; drop now-empty sections.
  *
- * Position-scoped visibility (super_admin bypasses all of this):
+ * Position-scoped visibility (super_admin sees everything):
+ * - Super Admin → sees all items (all permissions pass, all tabs visible)
  * - Ethiopian GL  → sees ONLY the ET document-clearance page.
  * - Djibouti GL   → sees ONLY the DJ clearance page.
  * - Everyone else → sees everything they have permission for, EXCEPT the two
@@ -511,9 +513,11 @@ const filterSidebarByPermission = (
   sections: SidebarSection[],
   user: ReturnType<typeof useAuth>["user"],
 ): SidebarSection[] => {
-  const superAdmin = isSuperAdmin(user);
-  const etGl = !superAdmin && isEthiopianGl(user);
-  const djGl = !superAdmin && isDjiboutiGl(user);
+  // Superadmin sees every section and item — no permission filtering.
+  if (isSuperAdmin(user)) return sections;
+
+  const etGl = isEthiopianGl(user);
+  const djGl = isDjiboutiGl(user);
 
   const permissionAllowed = (item: SidebarItem): boolean => {
     if (!item.permission) return true;
@@ -524,8 +528,6 @@ const filterSidebarByPermission = (
   };
 
   const itemAllowed = (item: SidebarItem): boolean => {
-    if (superAdmin) return true;
-
     // GL positions are locked to their single clearance page.
     if (etGl) return isEtClearanceItem(item);
     if (djGl) return isDjClearanceItem(item);
@@ -544,6 +546,38 @@ const filterSidebarByPermission = (
     .filter((section) => section.items.length > 0);
 };
 
+const APP_TITLE = "EDR Freight Backoffice";
+
+/** Flatten sidebar sections (incl. nested children) into {href, label} pairs. */
+const flattenSidebarItems = (
+  sections: SidebarSection[],
+): { href: string; label: string }[] =>
+  sections.flatMap((section) =>
+    section.items.flatMap((item) => [
+      ...(item.href ? [{ href: item.href, label: item.label }] : []),
+      ...(item.children ?? [])
+        .filter((child): child is SidebarItem & { href: string } =>
+          Boolean(child.href),
+        )
+        .map((child) => ({ href: child.href, label: child.label })),
+    ]),
+  );
+
+/** Find the sidebar label whose href matches (exactly or as a prefix of) the current path. */
+const findActiveSidebarLabel = (
+  pathname: string,
+  sections: SidebarSection[],
+): string | undefined => {
+  const path = pathname.toLowerCase();
+  const candidates = flattenSidebarItems(sections)
+    .map(({ href, label }) => ({ label, href: href.split("?")[0].toLowerCase() }))
+    .sort((a, b) => b.href.length - a.href.length);
+
+  return candidates.find(
+    ({ href }) => path === href || path.startsWith(`${href}/`),
+  )?.label;
+};
+
 const DashboardShell = () => {
   const navigate = useNavigate();
   const location = useLocation();
@@ -569,6 +603,14 @@ const DashboardShell = () => {
         : null
     : null;
 
+  useEffect(() => {
+    const activeLabel = findActiveSidebarLabel(
+      location.pathname,
+      sidebarSections,
+    );
+    document.title = activeLabel ? `${activeLabel} | ${APP_TITLE}` : APP_TITLE;
+  }, [location.pathname, sidebarSections]);
+
   if (glClearanceHome && !location.pathname.startsWith(glClearanceHome)) {
     return <Navigate to={glClearanceHome} replace />;
   }