feat: add invoice pages and api to the backoffice

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

@@ -12,6 +12,7 @@ import {
   PackageCheck,
   PackageOpen,
   Paperclip,
+  Receipt,
   Send,
   Settings,
   ShieldCheck,
@@ -32,7 +33,11 @@ import {
   useParams,
 } from "react-router-dom";
 
-import { FreightDashboardLayout, type SidebarItem, type SidebarSection } from "@/components/layout";
+import {
+  FreightDashboardLayout,
+  type SidebarItem,
+  type SidebarSection,
+} from "@/components/layout";
 import { useAuth } from "./auth/useAuth";
 import LoadingScreen from "./components/LoadingScreen";
 import LoginPage from "./pages/auth/LoginPage";
@@ -53,6 +58,8 @@ import GlCreateBookingForm from "./components/contracts/GlCreateBookingForm";
 import DocumentClearanceDetailPage from "./pages/bookings/DocumentClearanceDetailPage";
 import CustomerDetailPage from "./pages/customers/CustomerDetailPage";
 import CustomersPage from "./pages/customers/CustomersPage";
+import InvoiceDetailPage from "./pages/invoices/InvoiceDetailPage";
+import InvoicesPage from "./pages/invoices/InvoicesPage";
 import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
 import DemoUser2Page from "./pages/dashboard/demo/DemoUser2Page";
 import MyProfilePage from "./pages/dashboard/MyProfilePage";
@@ -61,7 +68,10 @@ import UserManagementHostPage from "./pages/dashboard/user-management/UserManage
 import PaymentsPage from "./pages/payments/PaymentsPage";
 //import EmployeesPage from "./pages/dashboard/user-management/EmployeesPage";
 import { RequirePermission } from "./components/auth/RequirePermission";
-import { FREIGHT_PERMS, hasPermission as hasFreightPermission } from "./lib/permissions";
+import {
+  FREIGHT_PERMS,
+  hasPermission as hasFreightPermission,
+} from "./lib/permissions";
 import PermissionsPage from "./pages/dashboard/user-management/PermissionsPage";
 import PositionTypesPage from "./pages/dashboard/user-management/PositionTypesPage";
 import RolesPage from "./pages/dashboard/user-management/RolesPage";
@@ -144,6 +154,12 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <Wallet />,
         permission: FREIGHT_PERMS.bookings.view,
       },
+      {
+        label: "Invoices",
+        href: "/dashboard/invoices",
+        icon: <Receipt />,
+        permission: FREIGHT_PERMS.bookings.view,
+      },
       ...demoItems,
     ],
   },
@@ -506,7 +522,10 @@ const App = () => {
       <Route path="/um/*" element={<UserManagementHostPage />} />
       <Route path="/health" element={<HealthCheck />} />
       <Route path="/" element={<Navigate to="/dashboard/overview" replace />} />
-      <Route path="/dashboard" 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="profile" element={<MyProfilePage />} />
@@ -522,8 +541,27 @@ const App = () => {
         />
         <Route path="customers" element={<CustomersPage />} />
         <Route path="customers/:id" element={<CustomerDetailPage />} />
+        <Route
+          path="invoices"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.bookings.view}>
+              <InvoicesPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="invoices/:id"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.bookings.view}>
+              <InvoiceDetailPage />
+            </RequirePermission>
+          }
+        />
         <Route path="booking-requests/new" element={<NewBookingPage />} />
-        <Route path="booking-requests/:id" element={<BookingRequestDetailPage />} />
+        <Route
+          path="booking-requests/:id"
+          element={<BookingRequestDetailPage />}
+        />
         <Route
           path="booking-requests/:id/contract"
           element={<BookingContractPage />}
@@ -536,7 +574,9 @@ const App = () => {
         <Route
           path="clearance/:id"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.bookings.clearanceView}>
+            <RequirePermission
+              permission={FREIGHT_PERMS.bookings.clearanceView}
+            >
               <DocumentClearanceDetailPage />
             </RequirePermission>
           }
@@ -570,7 +610,9 @@ const App = () => {
         <Route
           path="bookings/:bookingId/clearance"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.bookings.clearanceView}>
+            <RequirePermission
+              permission={FREIGHT_PERMS.bookings.clearanceView}
+            >
               <DocumentClearanceDetailPage />
             </RequirePermission>
           }
@@ -578,7 +620,9 @@ const App = () => {
         <Route
           path="shipment-requests"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.contracts.createBooking}>
+            <RequirePermission
+              permission={FREIGHT_PERMS.contracts.createBooking}
+            >
               <ShipmentRequestsPage />
             </RequirePermission>
           }
@@ -586,7 +630,9 @@ const App = () => {
         <Route
           path="shipment-requests/:id"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.contracts.createBooking}>
+            <RequirePermission
+              permission={FREIGHT_PERMS.contracts.createBooking}
+            >
               <ShipmentRequestDetailPage />
             </RequirePermission>
           }
@@ -618,12 +664,20 @@ const App = () => {
             </RequirePermission>
           }
         />
-        <Route path="gl-ethiopia/clearance" element={<LegacyGlEthiopiaClearanceRedirect />} />
-        <Route path="gl-ethiopia/clearance/:id" element={<LegacyGlEthiopiaClearanceRedirect />} />
+        <Route
+          path="gl-ethiopia/clearance"
+          element={<LegacyGlEthiopiaClearanceRedirect />}
+        />
+        <Route
+          path="gl-ethiopia/clearance/:id"
+          element={<LegacyGlEthiopiaClearanceRedirect />}
+        />
         <Route
           path="gl-djibouti/clearance"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.contracts.clearanceDjActions}>
+            <RequirePermission
+              permission={FREIGHT_PERMS.contracts.clearanceDjActions}
+            >
               <GlDjiboutiClearanceListPage />
             </RequirePermission>
           }
@@ -631,7 +685,9 @@ const App = () => {
         <Route
           path="gl-djibouti/clearance/:id"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.contracts.clearanceDjActions}>
+            <RequirePermission
+              permission={FREIGHT_PERMS.contracts.clearanceDjActions}
+            >
               <GlClearanceDetailPage />
             </RequirePermission>
           }
@@ -644,7 +700,9 @@ const App = () => {
         <Route
           path="contracts/:id/create-booking"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.contracts.createBooking}>
+            <RequirePermission
+              permission={FREIGHT_PERMS.contracts.createBooking}
+            >
               <GlCreateBookingForm />
             </RequirePermission>
           }
@@ -655,155 +713,174 @@ const App = () => {
         />
         <Route path="warehouses" element={<WarehouseListPage />} />
         <Route path="warehouses/:id" element={<WarehouseDetailPage />} />
-        <Route path="warehouse-inventory" element={<WarehouseInventoryPage />} />
+        <Route
+          path="warehouse-inventory"
+          element={<WarehouseInventoryPage />}
+        />
         <Route path="import-warehouse" element={<ImportWarehouseFlowPage />} />
         <Route path="export-warehouse" element={<ExportWarehouseFlowPage />} />
         <Route path="arrival-queue" element={<ArrivalQueuePage />} />
         <Route path="loading-queue" element={<LoadingQueuePage />} />
         <Route path="loaded-inventory" element={<LoadedInventoryPage />} />
         <Route path="dispatch-queue" element={<DispatchQueuePage />} />
-        <Route path="export-djibouti-unloading" element={<ExportDjiboutiUnloadingQueuePage />} />
-        <Route path="interchange-documents" element={<InterchangeDocumentsPage />} />
+        <Route
+          path="export-djibouti-unloading"
+          element={<ExportDjiboutiUnloadingQueuePage />}
+        />
+        <Route
+          path="interchange-documents"
+          element={<InterchangeDocumentsPage />}
+        />
         <Route path="inventory-inquiry" element={<InventoryInquiryPage />} />
         <Route path="warehouse-rules" element={<WarehouseRulesPage />} />
-        <Route path="warehouse-fee-invoices" element={<WarehouseInvoicesPage />} />
-        <Route path="warehouse-dashboard" element={<WarehouseDashboardPage />} />
+        <Route
+          path="warehouse-fee-invoices"
+          element={<WarehouseInvoicesPage />}
+        />
+        <Route
+          path="warehouse-dashboard"
+          element={<WarehouseDashboardPage />}
+        />
 
-          <Route
-            path="operations/train-scheduling"
-            element={<Navigate to="/dashboard/operations/train-scheduling-v2" replace />}
-          />
-          <Route
-            path="operations/batch-board"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
-                <BatchBoardPage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="operations/first-mile"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
-                <FirstMilePage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="operations/last-mile"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
-                <LastMilePage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="operations/batch-board/:scheduleId"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
-                <BatchScheduleDetailPage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="operations/train-scheduling-v2"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
-                <TrainScheduleV2ListPage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="operations/train-scheduling-v2/:scheduleId"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
-                <TrainScheduleV2DetailPage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="operations/train-scheduling-v2/:scheduleId/track"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
-                <TrainScheduleTrackPage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="routes"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
-                <RoutesPage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="locomotives"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
-                <FleetResourcePage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="trains"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
-                <FleetResourcePage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="trains/:id"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
-                <TrainDetailPage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="wagons"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
-                <FleetResourcePage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="containers"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
-                <FleetResourcePage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="cargoes"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
-                <FleetResourcePage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="vehicles"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
-                <FleetResourcePage />
-              </RequirePermission>
-            }
-          />
-          <Route
-            path="drivers"
-            element={
-              <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
-                <FleetResourcePage />
-              </RequirePermission>
-            }
-          />
         <Route
           path="operations/train-scheduling"
-          element={<Navigate to="/dashboard/operations/train-scheduling-v2" replace />}
+          element={
+            <Navigate to="/dashboard/operations/train-scheduling-v2" replace />
+          }
+        />
+        <Route
+          path="operations/batch-board"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
+              <BatchBoardPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="operations/first-mile"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
+              <FirstMilePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="operations/last-mile"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
+              <LastMilePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="operations/batch-board/:scheduleId"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
+              <BatchScheduleDetailPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="operations/train-scheduling-v2"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
+              <TrainScheduleV2ListPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="operations/train-scheduling-v2/:scheduleId"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
+              <TrainScheduleV2DetailPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="operations/train-scheduling-v2/:scheduleId/track"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
+              <TrainScheduleTrackPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="routes"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <RoutesPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="locomotives"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <FleetResourcePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="trains"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <FleetResourcePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="trains/:id"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <TrainDetailPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="wagons"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <FleetResourcePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="containers"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <FleetResourcePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="cargoes"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <FleetResourcePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="vehicles"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <FleetResourcePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="drivers"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <FleetResourcePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="operations/train-scheduling"
+          element={
+            <Navigate to="/dashboard/operations/train-scheduling-v2" replace />
+          }
         />
         <Route
           path="operations/batch-board"
@@ -953,9 +1030,15 @@ const App = () => {
         {/* Legacy embedded user management routes */}
         <Route path="user-management" element={<UserManagementPage />} />
         <Route path="user-management/users" element={<UsersPage />} />
-        <Route path="user-management/position-types" element={<PositionTypesPage />} />
+        <Route
+          path="user-management/position-types"
+          element={<PositionTypesPage />}
+        />
         {/* <Route path="user-management/employees" element={<EmployeesPage />} /> */}
-        <Route path="user-management/permissions" element={<PermissionsPage />} />
+        <Route
+          path="user-management/permissions"
+          element={<PermissionsPage />}
+        />
         <Route path="user-management/roles" element={<RolesPage />} />
 
         <Route
@@ -977,7 +1060,9 @@ const App = () => {
 
         <Route
           path="configuration"
-          element={<Navigate to="/dashboard/configuration/cargo-types" replace />}
+          element={
+            <Navigate to="/dashboard/configuration/cargo-types" replace />
+          }
         />
         <Route
           path="configuration/train-scheduling-rules"
@@ -996,8 +1081,14 @@ const App = () => {
           }
         />
         <Route path="configuration/cargo-types" element={<CargoTypesPage />} />
-        <Route path="configuration/cargo-types/:id" element={<CargoTypesPage />} />
-        <Route path="configuration/:resource" element={<RuleEngineResourcePage />} />
+        <Route
+          path="configuration/cargo-types/:id"
+          element={<CargoTypesPage />}
+        />
+        <Route
+          path="configuration/:resource"
+          element={<RuleEngineResourcePage />}
+        />
 
         <Route
           path="rules"
@@ -1007,9 +1098,14 @@ const App = () => {
 
         <Route
           path="rule-engine"
-          element={<Navigate to="/dashboard/configuration/cargo-types" replace />}
+          element={
+            <Navigate to="/dashboard/configuration/cargo-types" replace />
+          }
+        />
+        <Route
+          path="rule-engine/:resource"
+          element={<RuleEngineLegacyRedirect />}
         />
-        <Route path="rule-engine/:resource" element={<RuleEngineLegacyRedirect />} />
 
         <Route path="user1" element={<DemoUser1Page />} />
         <Route path="user2" element={<DemoUser2Page />} />
@@ -1026,9 +1122,7 @@ const App = () => {
 /** Redirect removed milestones page to document clearance. */
 function BookingMilestonesRedirect() {
   const { id } = useParams();
-  return (
-    <Navigate to={`/dashboard/bookings/${id}/clearance`} replace />
-  );
+  return <Navigate to={`/dashboard/bookings/${id}/clearance`} replace />;
 }
 
 /** Redirect legacy GL Ethiopia clearance URLs to the unified document clearance hub. */