From bd81bbfc2c4baff04a81194c652189b219f80099 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 17 Jul 2026 11:15:58 +0300
Subject: [PATCH] style: sidebar improvmetn

---
 apps/edr-freight-web/backoffice/src/App.tsx   | 432 +++++++++---------
 .../src/components/layout/FreightSidebar.tsx  |  34 +-
 .../backoffice/src/components/layout/types.ts |   2 +-
 3 files changed, 237 insertions(+), 231 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/App.tsx b/apps/edr-freight-web/backoffice/src/App.tsx
index 0da9fe3f0..81a8552e7 100644
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -18,6 +18,7 @@ import {
   Send,
   Settings,
   ShieldCheck,
+  Settings2,
   Ship,
   SlidersHorizontal,
   Train,
@@ -142,14 +143,9 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <LayoutDashboard />,
       },
       {
-        label: "Staff",
-        href: "/user-management",
-        icon: <Users />,
-      },
-      {
-        label: "Bookings",
-        href: "/dashboard/booking-requests",
-        icon: <FileText />,
+        label: "Customers",
+        href: "/dashboard/customers",
+        icon: <Building2 />,
       },
       {
         label: "Contracts",
@@ -157,6 +153,11 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <FileSignature />,
         permission: FREIGHT_PERMS.contracts.view,
       },
+      {
+        label: "Bookings",
+        href: "/dashboard/booking-requests",
+        icon: <FileText />,
+      },
       // Operations hub: clearance-document review for contracts WITHOUT
       // customs clearing (contract-level for one-time, per-booking for general).
       {
@@ -165,11 +166,6 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <ShieldCheck />,
         permission: FREIGHT_PERMS.contracts.opsClearanceReview,
       },
-      {
-        label: "Customers",
-        href: "/dashboard/customers",
-        icon: <Building2 />,
-      },
       {
         label: "Payments",
         href: "/dashboard/payments",
@@ -186,183 +182,185 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
     ],
   },
   {
-    title: "Operations",
+    // title: "Port & Terminal",
     items: [
       {
-        label: "Clearance",
-        href: "/dashboard/contracts/clearance",
-        icon: <ShieldCheck />,
-        permission: [
-          FREIGHT_PERMS.contracts.clearanceReview,
-          FREIGHT_PERMS.contracts.clearanceEtActions,
+        label: "Operations",
+        icon: <Settings />,
+        children: [
+          {
+            label: "Clearance",
+            href: "/dashboard/contracts/clearance",
+            icon: <ShieldCheck />,
+            permission: [
+              FREIGHT_PERMS.contracts.clearanceReview,
+              FREIGHT_PERMS.contracts.clearanceEtActions,
+            ],
+          },
+          {
+            label: "Shipment Requests",
+            href: "/dashboard/shipment-requests",
+            icon: <Send />,
+            permission: FREIGHT_PERMS.contracts.createBooking,
+          },
+          // Operations Path A queue: per-booking self-clearance review for
+          // GENERAL non-customs booking instances (and legacy self-clear bookings).
+          {
+            label: "Self-Clearance Review",
+            href: "/dashboard/contracts/ops-clearance",
+            icon: <ShieldCheck />,
+            permission: FREIGHT_PERMS.contracts.opsClearanceReview,
+          },
+          {
+            label: "GL Djibouti Clearance",
+            href: "/dashboard/gl-djibouti/clearance",
+            icon: <Ship />,
+            permission: FREIGHT_PERMS.contracts.clearanceDjActions,
+          },
+          {
+            label: "Train Schedules",
+            href: "/dashboard/operations/train-scheduling-v2",
+            icon: <Train />,
+            permission: FREIGHT_PERMS.trainScheduling.view,
+          },
+          {
+            label: "Batch Board",
+            href: "/dashboard/operations/batch-board",
+            icon: <LayoutGrid />,
+            permission: FREIGHT_PERMS.trainScheduling.view,
+          },
+          {
+            label: "First Mile",
+            href: "/dashboard/operations/first-mile",
+            icon: <Truck />,
+            permission: FREIGHT_PERMS.firstMile.view,
+          },
+          {
+            label: "Last Mile",
+            href: "/dashboard/operations/last-mile",
+            icon: <Truck />,
+            permission: FREIGHT_PERMS.lastMile.view,
+          },
         ],
       },
       {
-        label: "Shipment Requests",
-        href: "/dashboard/shipment-requests",
-        icon: <Send />,
-        permission: FREIGHT_PERMS.contracts.createBooking,
-      },
-      // Operations Path A queue: per-booking self-clearance review for
-      // GENERAL non-customs booking instances (and legacy self-clear bookings).
-      {
-        label: "Self-Clearance Review",
-        href: "/dashboard/contracts/ops-clearance",
-        icon: <ShieldCheck />,
-        permission: FREIGHT_PERMS.contracts.opsClearanceReview,
-      },
-      {
-        label: "GL Djibouti Clearance",
-        href: "/dashboard/gl-djibouti/clearance",
-        icon: <Ship />,
-        permission: FREIGHT_PERMS.contracts.clearanceDjActions,
-      },
-      {
-        label: "Train Schedules",
-        href: "/dashboard/operations/train-scheduling-v2",
-        icon: <Train />,
-        permission: FREIGHT_PERMS.trainScheduling.view,
-      },
-      {
-        label: "Batch Board",
-        href: "/dashboard/operations/batch-board",
-        icon: <LayoutGrid />,
-        permission: FREIGHT_PERMS.trainScheduling.view,
-      },
-      {
-        label: "First Mile",
-        href: "/dashboard/operations/first-mile",
+        label: "Fleet Management",
         icon: <Truck />,
-        permission: FREIGHT_PERMS.firstMile.view,
-      },
-      {
-        label: "Last Mile",
-        href: "/dashboard/operations/last-mile",
-        icon: <Truck />,
-        permission: FREIGHT_PERMS.lastMile.view,
-      },
-    ],
-  },
-  {
-    title: "Fleet Management",
-    items: [
-      {
-        label: "Fleet Dashboard",
-        href: "/dashboard/fleet-dashboard",
-        icon: <LayoutDashboard />,
-        permission: FREIGHT_PERMS.fleetDashboard.view,
-      },
-      {
-        label: "Routes",
-        href: "/dashboard/routes",
-        icon: <Network />,
-        permission: FREIGHT_PERMS.fleet.view,
-      },
-      {
-        label: "Locomotives",
-        href: "/dashboard/locomotives",
-        icon: <Train />,
-        permission: FREIGHT_PERMS.fleet.view,
-      },
-      {
-        label: "Train Builder",
-        href: "/dashboard/train-builder",
-        icon: <Hammer />,
-        permission: FREIGHT_PERMS.fleet.view,
-      },
+        children: [
+          {
+            label: "Fleet Dashboard",
+            href: "/dashboard/fleet-dashboard",
+            icon: <LayoutDashboard />,
+            permission: FREIGHT_PERMS.fleetDashboard.view,
+          },
+          {
+            label: "Routes",
+            href: "/dashboard/routes",
+            icon: <Network />,
+            permission: FREIGHT_PERMS.fleet.view,
+          },
+          {
+            label: "Locomotives",
+            href: "/dashboard/locomotives",
+            icon: <Train />,
+            permission: FREIGHT_PERMS.fleet.view,
+          },
+          {
+            label: "Train Builder",
+            href: "/dashboard/train-builder",
+            icon: <Hammer />,
+            permission: FREIGHT_PERMS.fleet.view,
+          },
 
-      // {
-      //   label: "Wagon types",
-      //   href: "/dashboard/wagon-types",
-      //   icon: <Boxes />,
-      // },
-      {
-        label: "Wagons",
-        href: "/dashboard/wagons",
-        icon: <Truck />,
-        permission: FREIGHT_PERMS.fleet.view,
+          // {
+          //   label: "Wagon types",
+          //   href: "/dashboard/wagon-types",
+          //   icon: <Boxes />,
+          // },
+          {
+            label: "Wagons",
+            href: "/dashboard/wagons",
+            icon: <Truck />,
+            permission: FREIGHT_PERMS.fleet.view,
+          },
+          {
+            label: "Vehicles",
+            href: "/dashboard/vehicles",
+            icon: <Truck />,
+            permission: FREIGHT_PERMS.vehicles.view,
+          },
+          {
+            label: "Drivers",
+            href: "/dashboard/drivers",
+            icon: <Users />,
+            permission: FREIGHT_PERMS.drivers.view,
+          },
+          {
+            label: "Track Vehicles",
+            href: "/dashboard/tracking",
+            icon: <MapPin />,
+            permission: FREIGHT_PERMS.tracking.view,
+          },
+          {
+            label: "Fuel Purchases",
+            href: "/dashboard/fuel-purchases",
+            icon: <Truck />,
+            permission: FREIGHT_PERMS.fuel.view,
+          },
+          {
+            label: "Fuel Analytics",
+            href: "/dashboard/fuel-stats",
+            icon: <Truck />,
+            permission: FREIGHT_PERMS.fuel.view,
+          },
+          {
+            label: "Maintenance",
+            href: "/dashboard/maintenance",
+            icon: <Truck />,
+            permission: FREIGHT_PERMS.maintenance.view,
+          },
+          {
+            label: "Work Orders",
+            href: "/dashboard/work-orders",
+            icon: <SlidersHorizontal />,
+            permission: FREIGHT_PERMS.maintenance.view,
+          },
+          {
+            label: "Compliance & Alerts",
+            href: "/dashboard/compliance",
+            icon: <ShieldCheck />,
+            permission: FREIGHT_PERMS.fleet.view,
+          },
+          {
+            label: "Incidents",
+            href: "/dashboard/incidents",
+            icon: <FileText />,
+            permission: FREIGHT_PERMS.fleet.view,
+          },
+          {
+            label: "Procurement",
+            href: "/dashboard/procurement",
+            icon: <Package />,
+            permission: FREIGHT_PERMS.fleet.view,
+          },
+          {
+            label: "Financial Reports",
+            href: "/dashboard/financial-reports",
+            icon: <Wallet />,
+            permission: FREIGHT_PERMS.fleetReports.view,
+          },
+          // {
+          //   label: "Containers",
+          //   href: "/dashboard/containers",
+          //   icon: <Container />,
+          // },
+          // {
+          //   label: "Cargoes",
+          //   href: "/dashboard/cargoes",
+          //   icon: <Package />,
+          // },
+        ],
       },
-      {
-        label: "Vehicles",
-        href: "/dashboard/vehicles",
-        icon: <Truck />,
-        permission: FREIGHT_PERMS.vehicles.view,
-      },
-      {
-        label: "Drivers",
-        href: "/dashboard/drivers",
-        icon: <Users />,
-        permission: FREIGHT_PERMS.drivers.view,
-      },
-      {
-        label: "Track Vehicles",
-        href: "/dashboard/tracking",
-        icon: <MapPin />,
-        permission: FREIGHT_PERMS.tracking.view,
-      },
-      {
-        label: "Fuel Purchases",
-        href: "/dashboard/fuel-purchases",
-        icon: <Truck />,
-        permission: FREIGHT_PERMS.fuel.view,
-      },
-      {
-        label: "Fuel Analytics",
-        href: "/dashboard/fuel-stats",
-        icon: <Truck />,
-        permission: FREIGHT_PERMS.fuel.view,
-      },
-      {
-        label: "Maintenance",
-        href: "/dashboard/maintenance",
-        icon: <Truck />,
-        permission: FREIGHT_PERMS.maintenance.view,
-      },
-      {
-        label: "Work Orders",
-        href: "/dashboard/work-orders",
-        icon: <SlidersHorizontal />,
-        permission: FREIGHT_PERMS.maintenance.view,
-      },
-      {
-        label: "Compliance & Alerts",
-        href: "/dashboard/compliance",
-        icon: <ShieldCheck />,
-        permission: FREIGHT_PERMS.fleet.view,
-      },
-      {
-        label: "Incidents",
-        href: "/dashboard/incidents",
-        icon: <FileText />,
-        permission: FREIGHT_PERMS.fleet.view,
-      },
-      {
-        label: "Procurement",
-        href: "/dashboard/procurement",
-        icon: <Package />,
-        permission: FREIGHT_PERMS.fleet.view,
-      },
-      {
-        label: "Financial Reports",
-        href: "/dashboard/financial-reports",
-        icon: <Wallet />,
-        permission: FREIGHT_PERMS.fleetReports.view,
-      },
-      // {
-      //   label: "Containers",
-      //   href: "/dashboard/containers",
-      //   icon: <Container />,
-      // },
-      // {
-      //   label: "Cargoes",
-      //   href: "/dashboard/cargoes",
-      //   icon: <Package />,
-      // },
-    ],
-  },
-  {
-    title: "Port & Terminal",
-    items: [
       {
         label: "Imports",
         href: "/dashboard/import-warehouse",
@@ -437,35 +435,37 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
           },
         ],
       },
-    ],
-  },
-  {
-    title: "Warehouse Management",
-    items: [
       {
-        label: "Warehouse Dashboard",
-        href: "/dashboard/warehouse-dashboard",
-        icon: <LayoutDashboard />,
-      },
-      {
-        label: "Warehouses",
-        href: "/dashboard/warehouses",
+        label: "Warehouse Management",
         icon: <Container />,
-      },
-      {
-        label: "Allocation & Fees",
-        href: "/dashboard/warehouse-rules",
-        icon: <SlidersHorizontal />,
-      },
-      {
-        label: "Fee Invoices",
-        href: "/dashboard/warehouse-fee-invoices",
-        icon: <Wallet />,
+        children: [
+          {
+            label: "Warehouse Dashboard",
+            href: "/dashboard/warehouse-dashboard",
+            icon: <LayoutDashboard />,
+          },
+          {
+            label: "Warehouses",
+            href: "/dashboard/warehouses",
+            icon: <Container />,
+          },
+          {
+            label: "Allocation & Fees",
+            href: "/dashboard/warehouse-rules",
+            icon: <SlidersHorizontal />,
+          },
+          {
+            label: "Fee Invoices",
+            href: "/dashboard/warehouse-fee-invoices",
+            icon: <Wallet />,
+          },
+        ],
       },
     ],
   },
   {
-    title: "Administration",
+    title: "Freight configuration",
+    mutedTitle: true,
     items: [
       {
         label: "File settings",
@@ -485,12 +485,6 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <ScrollText />,
         permission: FREIGHT_PERMS.admin,
       },
-    ],
-  },
-  {
-    title: "Freight configuration",
-    mutedTitle: true,
-    items: [
       {
         label: "Configuration",
         href: "/dashboard/configuration",
@@ -513,6 +507,12 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <SlidersHorizontal />,
         children: getCategorySidebarChildren("rules"),
       },
+
+      {
+        label: "Staff",
+        href: "/user-management",
+        icon: <Users />,
+      },
     ],
   },
 ];
@@ -599,7 +599,10 @@ const findActiveSidebarLabel = (
 ): string | undefined => {
   const path = pathname.toLowerCase();
   const candidates = flattenSidebarItems(sections)
-    .map(({ href, label }) => ({ label, href: href.split("?")[0].toLowerCase() }))
+    .map(({ href, label }) => ({
+      label,
+      href: href.split("?")[0].toLowerCase(),
+    }))
     .sort((a, b) => b.href.length - a.href.length);
 
   return candidates.find(
@@ -674,10 +677,7 @@ const App = () => {
       <Routes>
         <Route path="/auth" element={<LoginPage />} />
         {/* <Route path="/um/*" element={<UserManagementHostPage />} /> */}
-        <Route
-          path="um/set-password"
-          element={<SetPassword />}
-        />
+        <Route path="um/set-password" element={<SetPassword />} />
         <Route path="/callback" element={<FaydaCallbackPage />} />
         <Route path="*" element={<Navigate to="/auth" replace />} />
       </Routes>
diff --git a/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx b/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
index 698b0fc2c..91429356c 100644
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
@@ -92,7 +92,9 @@ const FreightSidebar = ({
         walk(item.children, key);
       });
     };
-    sections.forEach((section) => walk(section.items, section.title));
+    sections.forEach((section, i) =>
+      walk(section.items, section?.title ?? "" + i++),
+    );
     return acc;
   }, [sections, isHrefActive, branchActive]);
 
@@ -126,6 +128,7 @@ const FreightSidebar = ({
             opened={isOpen}
             classNames={navClassNames(active)}
             onClick={() => toggle(key)}
+            childrenOffset="sm"
             rightSection={
               <Box
                 component="span"
@@ -142,7 +145,7 @@ const FreightSidebar = ({
                   size={16}
                   className="text-edr-muted transition-transform duration-200"
                   style={{
-                    transform: isOpen ? "rotate(-180deg)" : "rotate(180deg)",
+                    transform: isOpen ? "rotate(-180deg)" : "rotate(0deg)",
                   }}
                 />
               </Box>
@@ -166,6 +169,7 @@ const FreightSidebar = ({
           active={active}
           component={Link}
           classNames={navClassNames(active)}
+          onClick={onClose}
           to={item.href!}
         />
       );
@@ -177,19 +181,21 @@ const FreightSidebar = ({
     () =>
       sections.map((section) => (
         <Box key={section.title}>
-          <Text
-            size="xs"
-            tt="uppercase"
-            px="sm"
-            mb={6}
-            className={"text-edr-muted!"}
-            style={{ fontWeight: 500, fontSize: 10, letterSpacing: "0.05em" }}
-          >
-            {section.title}
-          </Text>
+          {section.title && (
+            <Text
+              size="xs"
+              tt="uppercase"
+              px="sm"
+              mb={6}
+              className={"text-edr-muted!"}
+              style={{ fontWeight: 500, fontSize: 10, letterSpacing: "0.05em" }}
+            >
+              {section.title}
+            </Text>
+          )}
           <Stack gap={2}>
             {section.items.map((item, i) =>
-              renderItem(item, itemKey(section.title, item, i)),
+              renderItem(item, itemKey(section.title ?? "" + i, item, i)),
             )}
           </Stack>
         </Box>
@@ -257,7 +263,7 @@ const FreightSidebar = ({
         px="sm"
         pb="md"
       >
-        <Stack gap="lg">{renderedSections}</Stack>
+        <Stack gap="md">{renderedSections}</Stack>
       </AppShell.Section>
     </AppShell.Navbar>
   );
diff --git a/apps/edr-freight-web/backoffice/src/components/layout/types.ts b/apps/edr-freight-web/backoffice/src/components/layout/types.ts
index 051f28839..2129e05e5 100644
--- a/apps/edr-freight-web/backoffice/src/components/layout/types.ts
+++ b/apps/edr-freight-web/backoffice/src/components/layout/types.ts
@@ -12,7 +12,7 @@ export interface SidebarItem {
 
 export interface SidebarSection {
   /** Section label shown above a group of nav items (e.g. "Main menu"). */
-  title: string;
+  title?: string;
   items: SidebarItem[];
   /** When true, section title uses muted grey instead of dark text. */
   mutedTitle?: boolean;