Warehouse Enhancemendt

apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx

@@ -2,6 +2,7 @@ import { type ReactNode, useEffect, useRef, useState } from "react";
 import {
   Bell,
   ChevronDown,
+  FileSignature,
   Languages,
   LogOut,
   MessageSquare,
@@ -10,6 +11,7 @@ import {
   User,
 } from "lucide-react";
 import { Group, Stack, Text, Menu, Tooltip, Box } from "@mantine/core";
+import { useNavigate } from "react-router-dom";
 
 import type { PageMeta } from "./types";
 import "./FreightDashboardHeader.css";
@@ -37,6 +39,7 @@ const FreightDashboardHeader = ({
   theme,
   onToggleTheme,
 }: FreightDashboardHeaderProps) => {
+  const navigate = useNavigate();
   const initials =
     userInitials ??
     (userName
@@ -78,8 +81,8 @@ const FreightDashboardHeader = ({
     <header className="fdh-root">
       <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
         <span className="fdh-eyebrow">
-          <span className="fdh-eyebrow-dot" />
-          Freight Backoffice
+          {/* <span className="fdh-eyebrow-dot" />
+          Freight Backoffice */}
         </span>
         <Text
           fw={700}
@@ -88,9 +91,9 @@ const FreightDashboardHeader = ({
         >
           {pageMeta.title}
         </Text>
-        <Text size="sm" truncate style={{ color: "#94a3b8", lineHeight: 1.35 }}>
+        {/* <Text size="sm" truncate style={{ color: "#94a3b8", lineHeight: 1.35 }}>
           {pageMeta.subtitle}
-        </Text>
+        </Text> */}
       </Stack>
 
       <Group gap={10} wrap="nowrap">
@@ -200,10 +203,22 @@ const FreightDashboardHeader = ({
             <Menu.Divider />
             <Menu.Item
               leftSection={<User size={15} />}
-              onClick={() => setIsUserMenuOpen(false)}
+              onClick={() => {
+                setIsUserMenuOpen(false);
+                navigate("/dashboard/profile");
+              }}
             >
               Profile
             </Menu.Item>
+            <Menu.Item
+              leftSection={<FileSignature size={15} />}
+              onClick={() => {
+                setIsUserMenuOpen(false);
+                navigate("/dashboard/profile#signature");
+              }}
+            >
+              My signature
+            </Menu.Item>
             <Menu.Item
               leftSection={<LogOut size={15} />}
               color="red"

apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx

@@ -79,11 +79,11 @@ const FreightDashboardLayout = ({
             height: "100dvh",
             overflow: "hidden",
             background: "var(--mantine-color-gray-1)",
-            padding: "8px",
+            padding: "0px",
             fontFamily: "'Outfit', var(--font-sans)",
           }}
         >
-          <Box style={{ display: "flex", height: "100%", minHeight: 0, width: "100%", gap: "8px" }}>
+          <Box style={{ display: "flex", height: "100%", minHeight: 0, width: "100%", gap: "5px" }}>
             <FreightSidebar
               sections={sidebarSections}
               activeHref={activeHref}

apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.css

@@ -181,6 +181,22 @@
   transition: transform 220ms ease;
 }
 
+.fsb-chevron-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.fsb-chevron-btn:hover .fsb-chevron {
+  color: #64748b;
+}
+
 /* ---- Nested branch ---- */
 .fsb-branch {
   margin: 2px 0 2px 22px;

apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx

@@ -180,23 +180,37 @@ const FreightSidebar = ({
           href={item.href}
           className="fsb-item"
           data-active={isActive}
-          onClick={(e) => navigateTo(e, item.href!)}
+          onClick={(e) => {
+            if (hasChildren) {
+              setExpanded((current) => ({
+                ...current,
+                [item.href!]: true,
+              }));
+            }
+            navigateTo(e, item.href!);
+          }}
         >
           {item.icon && <span className="fsb-icon">{item.icon}</span>}
           <span className="fsb-item-label">{item.label}</span>
           {hasChildren && (
-            <ChevronDown
-              size={16}
-              className="fsb-chevron"
-              style={{
-                transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
-              }}
+            <button
+              type="button"
+              className="fsb-chevron-btn"
+              aria-label={isOpen ? "Collapse section" : "Expand section"}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 toggleExpanded(item.href!);
               }}
-            />
+            >
+              <ChevronDown
+                size={16}
+                className="fsb-chevron"
+                style={{
+                  transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
+                }}
+              />
+            </button>
           )}
         </a>
 

apps/edr-freight-web/backoffice/src/components/layout/route-meta.ts

@@ -36,6 +36,20 @@ const ROUTE_META: Array<{ prefix: string; meta: PageMeta }> = [
       subtitle: "Dashboard summary and key metrics",
     },
   },
+  {
+    prefix: "/dashboard/profile",
+    meta: {
+      title: "My Profile",
+      subtitle: "Manage your account and signature",
+    },
+  },
+  {
+    prefix: "/dashboard/payments",
+    meta: {
+      title: "Payments",
+      subtitle: "View booking payment transactions",
+    },
+  },
   {
     prefix: "/dashboard/operations/train-scheduling-v2/",
     meta: {
@@ -45,16 +59,9 @@ const ROUTE_META: Array<{ prefix: string; meta: PageMeta }> = [
   },
   {
     prefix: "/dashboard/operations/train-scheduling-v2",
-    meta: {
-      title: "Train Schedules v2",
-      subtitle: "Operational train scheduling with full allocation workflow",
-    },
-  },
-  {
-    prefix: "/dashboard/operations/train-scheduling",
     meta: {
       title: "Train Schedules",
-      subtitle: "Create and manage container train schedules",
+      subtitle: "Operational train scheduling with full allocation workflow",
     },
   },
   {

apps/edr-freight-web/backoffice/src/components/layout/types.ts

@@ -6,6 +6,8 @@ export interface SidebarItem {
   href?: string;
   icon?: ReactNode;
   children?: SidebarItem[];
+  /** Permission key(s) required to see this item; ANY grants access. */
+  permission?: string | string[];
 }
 
 export interface SidebarSection {