feat(freight:backoffice): added basic frontend integration with auth(login) page

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

@@ -6,14 +6,94 @@ import {
   Navigate,
 } from "react-router-dom";
 import { DashboardLayout, type SidebarItem } from "@edr/ui-common";
+import {
+  LayoutDashboard,
+  Users,
+  CalendarCheck,
+  Package,
+  MapPin,
+  Train,
+  Receipt,
+  FileText,
+  Settings,
+  FileUp,
+} from "lucide-react";
+import {
+  IamLoginPage,
+  LoadingScreen,
+  useAuth,
+  useAuthUser,
+} from "@tria-plc/iamui-common";
 
+import BookingsPage from "./pages/bookings/BookingsPage";
+import BookingDetailPage from "./pages/bookings/BookingDetailPage";
+import NewBookingPage from "./pages/bookings/NewBookingPage";
+import ConsignmentsPage from "./pages/consignments/ConsignmentsPage";
+import ConsignmentDetailPage from "./pages/consignments/ConsignmentDetailPage";
+import TrackingPage from "./pages/tracking/TrackingPage";
+import BillingPage from "./pages/billing/BillingPage";
+import TrainsPage from "./pages/trains/TrainsPage";
 import DashboardPage from "./pages/dashboard/DashboardPage";
+import CustomersPage from "./pages/customers/CustomersPage";
+import CustomerDetailPage from "./pages/customers/CustomerDetailPage";
+import NewCustomerPage from "./pages/customers/NewCustomerPage";
+import DocumentsPage from "./pages/documents/DocumentsPage";
+import DropdownSettingsPage from "./pages/admin/DropdownSettingsPage";
+import FileUploadSettingsPage from "./pages/admin/FileUploadSettingsPage";
 
-const sidebarItems: SidebarItem[] = [{ label: "Dashboard", href: "/" }];
+const sidebarItems: SidebarItem[] = [
+  { label: "Dashboard", href: "/", icon: <LayoutDashboard /> },
+  { label: "Customers", href: "/customers", icon: <Users /> },
+  { label: "Bookings", href: "/bookings", icon: <CalendarCheck /> },
+  { label: "Consignments", href: "/consignments", icon: <Package /> },
+  { label: "Tracking", href: "/tracking", icon: <MapPin /> },
+  { label: "Trains", href: "/trains", icon: <Train /> },
+  { label: "Billing", href: "/billing", icon: <Receipt /> },
+  { label: "Documents", href: "/documents", icon: <FileText /> },
+  { label: "Dropdown Settings", href: "/admin/dropdowns", icon: <Settings /> },
+  {
+    label: "File Upload Settings",
+    href: "/admin/file-uploads",
+    icon: <FileUp />,
+  },
+];
 
 const App = () => {
   const navigate = useNavigate();
   const location = useLocation();
+  const { user, loading } = useAuth();
+  const { logout } = useAuthUser();
+
+  if (loading) {
+    return <LoadingScreen />;
+  }
+
+  if (!user) {
+    return (
+      <Routes>
+        <Route path="/auth" element={<IamLoginPage />} />
+        <Route path="*" element={<Navigate to="/auth" replace />} />
+      </Routes>
+    );
+  }
+
+  const displayName = user.name?.en || user.username || user.email || "User";
+  const userEmail = user.email;
+
+  const handleLogout = () => {
+    logout();
+    [
+      "auth-token",
+      "refresh-token",
+      "auth-user",
+      "current-position-id",
+      "selected-position-id",
+    ].forEach((name) => {
+      document.cookie = `${name}=; Max-Age=0; path=/`;
+    });
+    localStorage.clear();
+    window.location.replace("/auth");
+  };
 
   return (
     <DashboardLayout
@@ -21,9 +101,34 @@ const App = () => {
       sidebarItems={sidebarItems}
       activeHref={location.pathname}
       onNavigate={navigate}
+      enableThemeToggle
+      userName={displayName}
+      userEmail={userEmail}
+      onLogout={handleLogout}
     >
       <Routes>
         <Route path="/" element={<DashboardPage />} />
+        <Route path="/bookings" element={<BookingsPage />} />
+        <Route path="/customers" element={<CustomersPage />} />
+        <Route path="/customers/:id" element={<CustomerDetailPage />} />
+        <Route path="/new-customer" element={<NewCustomerPage />} />
+        <Route path="/bookings/new" element={<NewBookingPage />} />
+        <Route path="/bookings/:id" element={<BookingDetailPage />} />
+        <Route path="/consignments" element={<ConsignmentsPage />} />
+        <Route path="/consignments/:id" element={<ConsignmentDetailPage />} />
+        <Route path="/tracking" element={<TrackingPage />} />
+        <Route path="/trains" element={<TrainsPage />} />
+        <Route path="/billing" element={<BillingPage />} />
+        <Route path="/documents" element={<DocumentsPage />} />
+        <Route
+          path="/admin/dropdowns"
+          element={<DropdownSettingsPage />}
+        />
+        <Route
+          path="/admin/file-uploads"
+          element={<FileUploadSettingsPage />}
+        />
+        <Route path="/user-management" element={<Navigate to="/" replace />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </DashboardLayout>