feat(freight:backoffice): added login page and basic authorization

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

@@ -1,99 +1,50 @@
-import {
-  useNavigate,
-  useLocation,
-  Routes,
-  Route,
-  Navigate,
-} from "react-router-dom";
+import { Navigate, Outlet, Route, Routes, useLocation, useNavigate } 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 { LayoutDashboard, ShieldCheck, Users, Building2 } from "lucide-react";
 
-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";
+import { useAuth } from "./auth/useAuth";
+import LoginPage from "./pages/auth/LoginPage";
+import OverviewPage from "./pages/dashboard/OverviewPage";
+import UsersPage from "./pages/dashboard/user-management/UsersPage";
+import RolesPage from "./pages/dashboard/user-management/RolesPage";
+import DepartmentsPage from "./pages/dashboard/user-management/DepartmentsPage";
+import LoadingScreen from "./components/LoadingScreen";
 
 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 />,
+    label: "Overview",
+    href: "/dashboard/overview",
+    icon: <LayoutDashboard />,
+  },
+  {
+    label: "User management",
+    href: "/dashboard/user-management",
+    icon: <ShieldCheck />,
+    children: [
+      {
+        label: "Users",
+        href: "/dashboard/user-management/users",
+        icon: <Users />,
+      },
+      {
+        label: "Roles",
+        href: "/dashboard/user-management/roles",
+      },
+      {
+        label: "Departments",
+        href: "/dashboard/user-management/departments",
+        icon: <Building2 />,
+      },
+    ],
   },
 ];
 
-const App = () => {
+const DashboardShell = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const { user, loading } = useAuth();
-  const { logout } = useAuthUser();
+  const { user, logout } = useAuth();
 
-  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");
-  };
+  const displayName = user?.name?.en || user?.username || user?.email || "User";
 
   return (
     <DashboardLayout
@@ -103,36 +54,50 @@ const App = () => {
       onNavigate={navigate}
       enableThemeToggle
       userName={displayName}
-      userEmail={userEmail}
-      onLogout={handleLogout}
+      userEmail={user?.email}
+      onLogout={logout}
     >
-      <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>
+      <Outlet />
     </DashboardLayout>
   );
 };
 
+const App = () => {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return <LoadingScreen />;
+  }
+
+  if (!user) {
+    return (
+      <Routes>
+        <Route path="/auth" element={<LoginPage />} />
+        <Route path="*" element={<Navigate to="/auth" replace />} />
+      </Routes>
+    );
+  }
+
+  return (
+    <Routes>
+      <Route path="/" element={<Navigate to="/dashboard/overview" replace />} />
+      <Route path="/dashboard" element={<Navigate to="/dashboard/overview" replace />} />
+      <Route path="/dashboard" element={<DashboardShell />}>
+        <Route path="overview" element={<OverviewPage />} />
+        <Route
+          path="user-management"
+          element={<Navigate to="/dashboard/user-management/users" replace />}
+        />
+        <Route path="user-management/users" element={<UsersPage />} />
+        <Route path="user-management/roles" element={<RolesPage />} />
+        <Route
+          path="user-management/departments"
+          element={<DepartmentsPage />}
+        />
+      </Route>
+      <Route path="*" element={<Navigate to="/dashboard/overview" replace />} />
+    </Routes>
+  );
+};
+
 export default App;