resolve conflict

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

@@ -94,6 +94,10 @@ import { MaintenancePage } from "./pages/fleet/MaintenancePage";
 import { FinancialReportsPage } from "./pages/fleet/FinancialReportsPage";
 import { FleetDashboard } from "./pages/fleet/FleetDashboard";
 import { TrackingPage } from "./pages/fleet/TrackingPage";
+import CompliancePage from "./pages/fleet/CompliancePage";
+import IncidentsPage from "./pages/fleet/IncidentsPage";
+import WorkOrdersPage from "./pages/fleet/WorkOrdersPage";
+import ProcurementPage from "./pages/fleet/ProcurementPage";
 import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
 import RuleEngineLegacyRedirect from "./pages/ruleEngine/RuleEngineLegacyRedirect";
 import RuleEngineResourcePage from "./pages/ruleEngine/RuleEngineResourcePage";
@@ -212,13 +216,13 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         label: "First Mile",
         href: "/dashboard/operations/first-mile",
         icon: <Truck />,
-        permission: FREIGHT_PERMS.trainScheduling.view,
+        permission: FREIGHT_PERMS.firstMile.view,
       },
       {
         label: "Last Mile",
         href: "/dashboard/operations/last-mile",
         icon: <Truck />,
-        permission: FREIGHT_PERMS.trainScheduling.view,
+        permission: FREIGHT_PERMS.lastMile.view,
       },
     ],
   },
@@ -229,7 +233,7 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         label: "Fleet Dashboard",
         href: "/dashboard/fleet-dashboard",
         icon: <LayoutDashboard />,
-        permission: FREIGHT_PERMS.fleet.view,
+        permission: FREIGHT_PERMS.fleetDashboard.view,
       },
       {
         label: "Routes",
@@ -259,43 +263,67 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         label: "Vehicles",
         href: "/dashboard/vehicles",
         icon: <Truck />,
-        permission: FREIGHT_PERMS.fleet.view,
+        permission: FREIGHT_PERMS.vehicles.view,
       },
       {
         label: "Drivers",
         href: "/dashboard/drivers",
         icon: <Users />,
-        permission: FREIGHT_PERMS.fleet.view,
+        permission: FREIGHT_PERMS.drivers.view,
       },
       {
         label: "Track Vehicles",
         href: "/dashboard/tracking",
         icon: <MapPin />,
-        permission: FREIGHT_PERMS.fleet.view,
+        permission: FREIGHT_PERMS.tracking.view,
       },
       {
         label: "Fuel Purchases",
         href: "/dashboard/fuel-purchases",
         icon: <Truck />,
-        permission: FREIGHT_PERMS.fleet.view,
+        permission: FREIGHT_PERMS.fuel.view,
       },
       {
         label: "Fuel Analytics",
         href: "/dashboard/fuel-stats",
         icon: <Truck />,
-        permission: FREIGHT_PERMS.fleet.view,
+        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.fleet.view,
+        permission: FREIGHT_PERMS.fleetReports.view,
       },
       // {
       //   label: "Containers",
@@ -868,7 +896,7 @@ const App = () => {
         <Route
           path="operations/first-mile"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
+            <RequirePermission permission={FREIGHT_PERMS.firstMile.view}>
               <FirstMilePage />
             </RequirePermission>
           }
@@ -876,7 +904,7 @@ const App = () => {
         <Route
           path="operations/last-mile"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.trainScheduling.view}>
+            <RequirePermission permission={FREIGHT_PERMS.lastMile.view}>
               <LastMilePage />
             </RequirePermission>
           }
@@ -972,7 +1000,7 @@ const App = () => {
         <Route
           path="vehicles"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+            <RequirePermission permission={FREIGHT_PERMS.vehicles.view}>
               <FleetResourcePage />
             </RequirePermission>
           }
@@ -980,7 +1008,7 @@ const App = () => {
         <Route
           path="vehicles/:id"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+            <RequirePermission permission={FREIGHT_PERMS.vehicles.view}>
               <VehicleDetailPage />
             </RequirePermission>
           }
@@ -988,7 +1016,7 @@ const App = () => {
         <Route
           path="drivers"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+            <RequirePermission permission={FREIGHT_PERMS.drivers.view}>
               <FleetResourcePage />
             </RequirePermission>
           }
@@ -996,7 +1024,7 @@ const App = () => {
         <Route
           path="drivers/:id"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+            <RequirePermission permission={FREIGHT_PERMS.drivers.view}>
               <DriverDetailPage />
             </RequirePermission>
           }
@@ -1058,7 +1086,7 @@ const App = () => {
         <Route
           path="fuel-purchases"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+            <RequirePermission permission={FREIGHT_PERMS.fuel.view}>
               <FuelPurchasePage />
             </RequirePermission>
           }
@@ -1066,7 +1094,7 @@ const App = () => {
         <Route
           path="fuel-stats"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+            <RequirePermission permission={FREIGHT_PERMS.fuel.view}>
               <FuelStatsPage />
             </RequirePermission>
           }
@@ -1074,7 +1102,7 @@ const App = () => {
         <Route
           path="maintenance"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+            <RequirePermission permission={FREIGHT_PERMS.maintenance.view}>
               <MaintenancePage />
             </RequirePermission>
           }
@@ -1082,7 +1110,7 @@ const App = () => {
         <Route
           path="financial-reports"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+            <RequirePermission permission={FREIGHT_PERMS.fleetReports.view}>
               <FinancialReportsPage />
             </RequirePermission>
           }
@@ -1090,7 +1118,7 @@ const App = () => {
         <Route
           path="fleet-dashboard"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+            <RequirePermission permission={FREIGHT_PERMS.fleetDashboard.view}>
               <FleetDashboard />
             </RequirePermission>
           }
@@ -1098,11 +1126,43 @@ const App = () => {
         <Route
           path="tracking"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+            <RequirePermission permission={FREIGHT_PERMS.tracking.view}>
               <TrackingPage />
             </RequirePermission>
           }
         />
+        <Route
+          path="compliance"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <CompliancePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="incidents"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <IncidentsPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="work-orders"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.maintenance.view}>
+              <WorkOrdersPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="procurement"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.fleet.view}>
+              <ProcurementPage />
+            </RequirePermission>
+          }
+        />
         <Route
           path="locomotives"
           element={

apps/edr-freight-web/backoffice/src/components/fleet/FleetFormDialog.tsx

@@ -7,6 +7,7 @@ import {
   Group,
   Modal,
   NumberInput,
+  Radio,
   Select,
   MultiSelect,
   SimpleGrid,
@@ -293,6 +294,26 @@ const FleetFormDialog = ({
     // only by verification and never hand-edited.
     const isDisabled = Boolean(field.disabled || field.faydaLocked);
 
+    if (field.type === "radio") {
+      return (
+        <Radio.Group
+          key={field.name}
+          label={field.label}
+          value={value == null ? "" : String(value)}
+          onChange={(next) =>
+            setValues((current) => ({ ...current, [field.name]: next }))
+          }
+          error={error}
+        >
+          <Group gap="lg" mt={6}>
+            {(field.options ?? []).map((o) => (
+              <Radio key={o.value} value={o.value} label={o.label} disabled={isDisabled} />
+            ))}
+          </Group>
+        </Radio.Group>
+      );
+    }
+
     if (field.type === "select") {
       return (
         <Select

apps/edr-freight-web/backoffice/src/components/operations/TruckDetentionModal.tsx

@@ -0,0 +1,245 @@
+import {
+  Alert,
+  Badge,
+  Button,
+  Divider,
+  Group,
+  Loader,
+  Modal,
+  Paper,
+  Stack,
+  Table,
+  Text,
+} from '@mantine/core';
+import { DateTimePicker } from '@mantine/dates';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Receipt } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
+import { useToast } from '@/hooks/use-toast';
+import { lastMileService, type LastMileRecord } from '@/services/last-mile.service';
+
+interface TruckDetentionModalProps {
+  opened: boolean;
+  onClose: () => void;
+  record: LastMileRecord | null;
+}
+
+const money = (amount: number, currency: string) =>
+  `${Number(amount).toLocaleString()} ${currency === 'ETB' ? 'Birr (ETB)' : currency}`;
+
+function Stat({ label, value, strong }: { label: string; value: React.ReactNode; strong?: boolean }) {
+  return (
+    <Paper withBorder p="sm" radius="md" style={{ flex: 1, minWidth: 120 }}>
+      <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+        {label}
+      </Text>
+      <Text size={strong ? 'lg' : 'md'} fw={strong ? 800 : 600}>
+        {value}
+      </Text>
+    </Paper>
+  );
+}
+
+/**
+ * View/override the detention clock (arrival + delivery/return) for a last-mile
+ * leg, preview the per-truck-per-day charge, and generate the detention invoice.
+ */
+export function TruckDetentionModal({ opened, onClose, record }: TruckDetentionModalProps) {
+  const { toast } = useToast();
+  const qc = useQueryClient();
+  const id = record?.id ?? null;
+  const [arrived, setArrived] = useState<Date | null>(null);
+  const [delivered, setDelivered] = useState<Date | null>(null);
+
+  useEffect(() => {
+    setArrived(record?.arrivedAt ? new Date(record.arrivedAt) : null);
+    setDelivered(record?.deliveredAt ? new Date(record.deliveredAt) : null);
+  }, [record?.id, record?.arrivedAt, record?.deliveredAt, opened]);
+
+  const previewQuery = useQuery({
+    queryKey: ['truck-detention-preview', id],
+    queryFn: async () => (await lastMileService.truckDetentionPreview(id as string)).data,
+    enabled: opened && Boolean(id),
+  });
+  const preview = previewQuery.data;
+
+  const saveTimes = useMutation({
+    mutationFn: () =>
+      lastMileService.update(id as string, {
+        arrivedAt: arrived ? arrived.toISOString() : null,
+        deliveredAt: delivered ? delivered.toISOString() : null,
+      }),
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.LAST_MILE.ROOT });
+      void previewQuery.refetch();
+      toast({ title: 'Detention times saved' });
+    },
+    onError: () => toast({ title: 'Save failed', variant: 'destructive' }),
+  });
+
+  const generate = useMutation({
+    mutationFn: () => lastMileService.generateTruckDetentionInvoice(id as string),
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.LAST_MILE.ROOT });
+      toast({ title: 'Truck detention invoice generated' });
+      onClose();
+    },
+    onError: (e: unknown) => {
+      const description = (e as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      toast({ title: 'Detention invoice failed', description, variant: 'destructive' });
+    },
+  });
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      centered
+      size="lg"
+      title={
+        <Text fw={700}>
+          Truck detention{record?.booking?.reference ? ` · ${record.booking.reference}` : ''}
+        </Text>
+      }
+    >
+      <Stack gap="md">
+        <Group grow align="flex-start">
+          <DateTimePicker
+            label="Arrived at"
+            description="Detention clock start"
+            value={arrived}
+            onChange={(v) => setArrived(v ? new Date(v) : null)}
+            clearable
+          />
+          <DateTimePicker
+            label="Delivered / returned at"
+            description="Clock end (blank = still out)"
+            value={delivered}
+            onChange={(v) => setDelivered(v ? new Date(v) : null)}
+            clearable
+          />
+        </Group>
+        <Group justify="flex-end">
+          <Button variant="light" loading={saveTimes.isPending} onClick={() => saveTimes.mutate()}>
+            Save times
+          </Button>
+        </Group>
+
+        <Divider label="Detention preview" labelPosition="left" />
+
+        {previewQuery.isLoading ? (
+          <Group justify="center" py="md">
+            <Loader />
+          </Group>
+        ) : !preview ? (
+          <Alert color="gray" variant="light">
+            No preview available.
+          </Alert>
+        ) : !preview.ruleId ? (
+          <Alert color="orange" variant="light">
+            No active Truck Detention rule matches this booking. Create one under Warehouse → Fee rules
+            (rule type "Truck Detention Cost").
+          </Alert>
+        ) : (
+          <Stack gap="sm">
+            <Group grow>
+              <Stat label="Chargeable days" value={preview.chargeableDays} />
+              <Stat label="Trucks" value={preview.containerCount} />
+              <Stat label="Amount" value={money(preview.amount, preview.currency)} strong />
+            </Group>
+            {preview.endIsOpen && (
+              <Text size="xs" c="orange">
+                Still accruing — no delivery/return time yet. The amount grows until the vehicle is returned.
+              </Text>
+            )}
+            {preview.groups && preview.groups.length > 1 ? (
+              <Table withTableBorder withColumnBorders verticalSpacing="xs" fz="xs">
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>Truck type</Table.Th>
+                    <Table.Th>Trucks</Table.Th>
+                    <Table.Th>Days</Table.Th>
+                    <Table.Th ta="right">Rate / truck / day</Table.Th>
+                    <Table.Th ta="right">Amount</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {preview.groups.map((g, i) => (
+                    <Table.Tr key={i}>
+                      <Table.Td>
+                        {g.vehicleType ?? 'Unknown'}
+                        {!g.ruleId && (
+                          <Text span size="xs" c="red">
+                            {' '}· no rule
+                          </Text>
+                        )}
+                      </Table.Td>
+                      <Table.Td>{g.truckCount}</Table.Td>
+                      <Table.Td>{g.chargeableDays}</Table.Td>
+                      <Table.Td ta="right">{money(g.ratePerDay, preview.currency)}</Table.Td>
+                      <Table.Td ta="right">{money(g.amount, preview.currency)}</Table.Td>
+                    </Table.Tr>
+                  ))}
+                </Table.Tbody>
+              </Table>
+            ) : preview.tiers && preview.tiers.length > 0 ? (
+              <Table withTableBorder withColumnBorders verticalSpacing="xs" fz="xs">
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>From day</Table.Th>
+                    <Table.Th>To day</Table.Th>
+                    <Table.Th>Days</Table.Th>
+                    <Table.Th ta="right">Rate / truck / day</Table.Th>
+                    <Table.Th ta="right">Amount</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {preview.tiers.map((t, i) => (
+                    <Table.Tr key={i}>
+                      <Table.Td>{t.appliedFromDay}</Table.Td>
+                      <Table.Td>{t.appliedToDay}</Table.Td>
+                      <Table.Td>{t.days}</Table.Td>
+                      <Table.Td ta="right">{money(t.ratePerDay, preview.currency)}</Table.Td>
+                      <Table.Td ta="right">{money(t.amount, preview.currency)}</Table.Td>
+                    </Table.Tr>
+                  ))}
+                </Table.Tbody>
+              </Table>
+            ) : (
+              <Text size="sm" c="dimmed">
+                Flat {money(preview.ratePerDay, preview.currency)} per truck per day after the grace window.
+              </Text>
+            )}
+            <Group gap="xs">
+              <Badge variant="light" color="gray">
+                {preview.ruleName ?? 'Detention rule'}
+              </Badge>
+              {preview.billableUnits > 0 && (
+                <Text size="xs" c="dimmed">
+                  {preview.billableUnits} billable truck-day(s)
+                </Text>
+              )}
+            </Group>
+          </Stack>
+        )}
+
+        <Group justify="flex-end" mt="sm">
+          <Button variant="default" onClick={onClose}>
+            Close
+          </Button>
+          <Button
+            color="edr-green"
+            leftSection={<Receipt size={16} />}
+            disabled={!preview || preview.amount <= 0}
+            loading={generate.isPending}
+            onClick={() => generate.mutate()}
+          >
+            Generate invoice
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}

apps/edr-freight-web/backoffice/src/components/warehouses/ContainerItemsModal.tsx

@@ -0,0 +1,211 @@
+import {
+  Alert,
+  Badge,
+  Button,
+  Checkbox,
+  Group,
+  Loader,
+  Modal,
+  Select,
+  Stack,
+  Table,
+  Tabs,
+  Text,
+} from '@mantine/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { FileText } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import { useToast } from '@/hooks/use-toast';
+import {
+  warehouseService,
+  type ContainerItem,
+  type ContainerItemStage,
+} from '@/services/warehouse.service';
+import { extractErrorMessage } from './options';
+import { openPdfBlob } from './pdf';
+
+interface ContainerItemsModalProps {
+  opened: boolean;
+  onClose: () => void;
+  bookingId: string | null;
+  bookingReference?: string | null;
+}
+
+const STAGE_TABS: Array<{ value: string; label: string }> = [
+  { value: 'ALL', label: 'All' },
+  { value: 'RECEIVED', label: 'Received' },
+  { value: 'GRN', label: "GRN'd" },
+  { value: 'LOADED', label: 'Loaded' },
+  { value: 'LEFT', label: 'Left' },
+  { value: 'DELIVERED', label: 'Delivered' },
+];
+
+const STAGE_COLOR: Record<ContainerItemStage, string> = {
+  PENDING: 'gray',
+  RECEIVED: 'blue',
+  GRN: 'teal',
+  LOADED: 'grape',
+  LEFT: 'orange',
+  DELIVERED: 'green',
+};
+
+/** Loadable = not yet on a truck (before LOADED). */
+const isLoadable = (i: ContainerItem) => i.stage === 'PENDING' || i.stage === 'RECEIVED' || i.stage === 'GRN';
+
+export function ContainerItemsModal({ opened, onClose, bookingId, bookingReference }: ContainerItemsModalProps) {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [tab, setTab] = useState('ALL');
+  const [selected, setSelected] = useState<string[]>([]);
+  const [truckId, setTruckId] = useState<string | null>(null);
+
+  const itemsKey = ['container-items', bookingId];
+  const { data: items = [], isLoading } = useQuery({
+    queryKey: itemsKey,
+    queryFn: () => warehouseService.getContainerItems(bookingId as string),
+    enabled: opened && Boolean(bookingId),
+  });
+  const { data: trucks = [] } = useQuery({
+    queryKey: ['ci-trucks', bookingId],
+    queryFn: () => warehouseService.getCustomerTrucks(bookingId as string),
+    enabled: opened && Boolean(bookingId),
+  });
+
+  const visible = useMemo(
+    () => (tab === 'ALL' ? items : items.filter((i) => i.stage === tab)),
+    [items, tab],
+  );
+  const truckOptions = trucks
+    .filter((t) => !(t as { departedAt?: string }).departedAt)
+    .map((t) => ({ value: t.id, label: `${t.plateNumber} · ${t.driverName}` }));
+
+  const loadMutation = useMutation({
+    mutationFn: () => warehouseService.loadTruck(bookingId as string, truckId as string, selected),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: itemsKey });
+      setSelected([]);
+      toast({ title: 'Containers loaded onto truck' });
+    },
+    onError: (e) => toast({ variant: 'destructive', title: 'Load failed', description: extractErrorMessage(e) }),
+  });
+
+  const openExitPaper = async (assignmentId: string, plate: string) => {
+    try {
+      const res = await warehouseService.downloadTruckExitPaper(assignmentId);
+      openPdfBlob(res.data, `exit-${plate}.pdf`);
+    } catch (e) {
+      toast({ variant: 'destructive', title: 'Exit paper not ready', description: extractErrorMessage(e) });
+    }
+  };
+
+  const toggle = (n: string) => setSelected((s) => (s.includes(n) ? s.filter((x) => x !== n) : [...s, n]));
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      centered
+      size="90%"
+      title={<Text fw={700}>Container / bulk items {bookingReference ? `· ${bookingReference}` : ''}</Text>}
+    >
+      <Tabs value={tab} onChange={(v) => setTab(v ?? 'ALL')} mb="sm">
+        <Tabs.List>
+          {STAGE_TABS.map((t) => {
+            const count = t.value === 'ALL' ? items.length : items.filter((i) => i.stage === t.value).length;
+            return (
+              <Tabs.Tab key={t.value} value={t.value} rightSection={<Badge size="xs" variant="light">{count}</Badge>}>
+                {t.label}
+              </Tabs.Tab>
+            );
+          })}
+        </Tabs.List>
+      </Tabs>
+
+      {isLoading ? (
+        <Group justify="center" py="lg">
+          <Loader />
+        </Group>
+      ) : items.length === 0 ? (
+        <Alert color="gray" variant="light">No container or bulk items on this booking.</Alert>
+      ) : (
+        <Stack gap="sm">
+          <Table.ScrollContainer minWidth={900}>
+            <Table striped highlightOnHover verticalSpacing="xs">
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th />
+                  <Table.Th>Container</Table.Th>
+                  <Table.Th>Goods</Table.Th>
+                  <Table.Th>Stage</Table.Th>
+                  <Table.Th>Truck</Table.Th>
+                  <Table.Th>Booking</Table.Th>
+                  <Table.Th>Contract</Table.Th>
+                  <Table.Th>Last mile</Table.Th>
+                  <Table.Th ta="right">Actions</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {visible.map((i) => (
+                  <Table.Tr key={i.containerNumber}>
+                    <Table.Td>
+                      <Checkbox
+                        checked={selected.includes(i.containerNumber)}
+                        onChange={() => toggle(i.containerNumber)}
+                        disabled={!isLoadable(i)}
+                      />
+                    </Table.Td>
+                    <Table.Td><Text fw={600}>{i.containerNumber}</Text></Table.Td>
+                    <Table.Td>{i.goods ?? '—'}</Table.Td>
+                    <Table.Td><Badge color={STAGE_COLOR[i.stage]} variant="light">{i.stage}</Badge></Table.Td>
+                    <Table.Td>{i.truckPlate ?? '—'}</Table.Td>
+                    <Table.Td>{i.bookingReference ?? '—'}</Table.Td>
+                    <Table.Td>{i.contractId ? <Badge variant="outline" color="indigo">Contract</Badge> : '—'}</Table.Td>
+                    <Table.Td>{i.hasLastMile ? <Badge variant="light" color="cyan">EDR</Badge> : <Badge variant="light" color="gray">Self-haul</Badge>}</Table.Td>
+                    <Table.Td ta="right">
+                      {i.truckAssignmentId && (
+                        <Button
+                          size="compact-xs"
+                          variant="light"
+                          color="orange"
+                          leftSection={<FileText size={13} />}
+                          onClick={() => openExitPaper(i.truckAssignmentId as string, i.truckPlate ?? '')}
+                        >
+                          Exit Paper
+                        </Button>
+                      )}
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </Table.ScrollContainer>
+
+          {/* Multiselect → load onto a truck */}
+          <Group justify="space-between" align="flex-end">
+            <Text size="sm" c="dimmed">{selected.length} selected</Text>
+            <Group gap="sm" align="flex-end">
+              <Select
+                label="Load onto truck"
+                placeholder={truckOptions.length ? 'Select truck' : 'No arrived truck'}
+                data={truckOptions}
+                value={truckId}
+                onChange={setTruckId}
+                disabled={truckOptions.length === 0}
+                w={260}
+              />
+              <Button
+                color="edr-green"
+                disabled={selected.length === 0 || !truckId}
+                loading={loadMutation.isPending}
+                onClick={() => loadMutation.mutate()}
+              >
+                Load selected
+              </Button>
+            </Group>
+          </Group>
+        </Stack>
+      )}
+    </Modal>
+  );
+}

apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx

@@ -28,6 +28,8 @@ interface FeePreviewModalProps {
 const LABELS: Record<string, { label: string; color: string }> = {
   DEMURRAGE_FEE: { label: 'Demurrage', color: 'orange' },
   STORAGE_FEE: { label: 'Storage', color: 'teal' },
+  DOUBLE_HANDLING_FEE: { label: 'Double Handling', color: 'grape' },
+  TRUCK_DETENTION_FEE: { label: 'Truck Detention Cost', color: 'blue' },
 };
 
 function fmtDate(iso: string | null) {

apps/edr-freight-web/backoffice/src/components/warehouses/LoadToTrainPanel.tsx

@@ -0,0 +1,307 @@
+import {
+  Alert,
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Table,
+  Text,
+} from '@mantine/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ChevronDown, ChevronRight, TrainFront } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import { useToast } from '@/hooks/use-toast';
+import {
+  warehouseService,
+  type LoadableTrain,
+  type TrainLoadableItem,
+} from '@/services/warehouse.service';
+import { extractErrorMessage } from './options';
+
+const STAGE_COLOR: Record<string, string> = {
+  RECEIVED: 'blue',
+  STORED: 'gray',
+  RESERVED: 'grape',
+  READY_FOR_LOADING: 'teal',
+  LOADED: 'green',
+};
+
+const weight = (w: number | null) => (w == null ? '—' : `${Number(w).toLocaleString()} kg`);
+
+interface BookingGroup {
+  bookingId: string | null;
+  bookingReference: string | null;
+  customerName: string | null;
+  items: TrainLoadableItem[];
+}
+
+function groupByBooking(items: TrainLoadableItem[]): BookingGroup[] {
+  const map = new Map<string, BookingGroup>();
+  for (const i of items) {
+    const key = i.bookingId ?? i.bookingReference ?? 'unknown';
+    let g = map.get(key);
+    if (!g) {
+      g = { bookingId: i.bookingId, bookingReference: i.bookingReference, customerName: i.customerName, items: [] };
+      map.set(key, g);
+    }
+    g.items.push(i);
+  }
+  return [...map.values()];
+}
+
+/**
+ * Load to Train — a datatable of allocated EXPORT trains. Expand a train to see
+ * the bookings allocated to it; expand a booking to see its containers/cargoes
+ * and load the ready ones onto their wagons. Only READY_FOR_LOADING items with an
+ * allocated wagon are selectable.
+ */
+export function LoadToTrainPanel() {
+  const { data: trains = [], isLoading } = useQuery({
+    queryKey: ['loadable-trains'],
+    queryFn: () => warehouseService.getLoadableTrains(),
+  });
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const toggle = (id: string) =>
+    setExpanded((s) => {
+      const next = new Set(s);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+
+  if (isLoading) {
+    return (
+      <Group justify="center" py="lg">
+        <Loader />
+      </Group>
+    );
+  }
+  if (trains.length === 0) {
+    return (
+      <Alert color="gray" variant="light">
+        No allocated EXPORT trains awaiting loading. Trains appear here after train and wagon allocation.
+      </Alert>
+    );
+  }
+
+  return (
+    <Table.ScrollContainer minWidth={720}>
+      <Table verticalSpacing="sm">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th w={40} />
+            <Table.Th>Train</Table.Th>
+            <Table.Th>Route</Table.Th>
+            <Table.Th ta="center">Ready</Table.Th>
+            <Table.Th ta="center">Loaded</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {trains.map((t) => (
+            <TrainRow
+              key={t.scheduleId}
+              train={t}
+              expanded={expanded.has(t.scheduleId)}
+              onToggle={() => toggle(t.scheduleId)}
+            />
+          ))}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
+  );
+}
+
+function TrainRow({ train, expanded, onToggle }: { train: LoadableTrain; expanded: boolean; onToggle: () => void }) {
+  const { data: items = [], isLoading } = useQuery({
+    queryKey: ['train-loadable-items', train.scheduleId],
+    queryFn: () => warehouseService.getTrainLoadableItems(train.scheduleId),
+    enabled: expanded,
+  });
+  const bookings = useMemo(() => groupByBooking(items), [items]);
+  const route =
+    train.origin || train.destination ? `${train.origin ?? '?'} → ${train.destination ?? '?'}` : '—';
+
+  return (
+    <>
+      <Table.Tr style={{ cursor: 'pointer' }} onClick={onToggle}>
+        <Table.Td>{expanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}</Table.Td>
+        <Table.Td>
+          <Group gap="xs" wrap="nowrap">
+            <TrainFront size={16} />
+            <Text fw={600}>{train.trainNumber ?? train.scheduleId.slice(0, 8)}</Text>
+          </Group>
+        </Table.Td>
+        <Table.Td>{route}</Table.Td>
+        <Table.Td ta="center">
+          <Badge color="blue" variant="light">
+            {train.readyCount}
+          </Badge>
+        </Table.Td>
+        <Table.Td ta="center">
+          <Badge color="green" variant="light">
+            {train.loadedCount}
+          </Badge>
+        </Table.Td>
+      </Table.Tr>
+      {expanded && (
+        <Table.Tr>
+          <Table.Td colSpan={5} p={0}>
+            <Box p="sm" bg="var(--mantine-color-gray-0)">
+              {isLoading ? (
+                <Group justify="center" py="md">
+                  <Loader size="sm" />
+                </Group>
+              ) : bookings.length === 0 ? (
+                <Alert color="gray" variant="light">
+                  No arrived containers/cargoes allocated to this train yet.
+                </Alert>
+              ) : (
+                <Stack gap="xs">
+                  {bookings.map((b) => (
+                    <BookingBlock key={b.bookingId ?? b.bookingReference} scheduleId={train.scheduleId} booking={b} />
+                  ))}
+                </Stack>
+              )}
+            </Box>
+          </Table.Td>
+        </Table.Tr>
+      )}
+    </>
+  );
+}
+
+function BookingBlock({ scheduleId, booking }: { scheduleId: string; booking: BookingGroup }) {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const loadedCount = booking.items.filter((i) => i.status === 'LOADED').length;
+  const selectable = booking.items.filter((i) => i.loadable);
+  const allSelected = selectable.length > 0 && selectable.every((i) => selected.includes(i.id));
+  const toggleItem = (id: string) =>
+    setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]));
+  const toggleAll = () =>
+    setSelected((s) =>
+      allSelected ? s.filter((id) => !selectable.some((i) => i.id === id)) : selectable.map((i) => i.id),
+    );
+
+  const loadMutation = useMutation({
+    mutationFn: () => warehouseService.loadItemsOntoTrain(scheduleId, selected),
+    onSuccess: (r) => {
+      queryClient.invalidateQueries({ queryKey: ['train-loadable-items', scheduleId] });
+      queryClient.invalidateQueries({ queryKey: ['loadable-trains'] });
+      setSelected([]);
+      toast({ title: 'Loaded onto train', description: `Loaded ${r.loadedCount}; skipped ${r.skippedCount}.` });
+    },
+    onError: (e) =>
+      toast({ variant: 'destructive', title: 'Load failed', description: extractErrorMessage(e) }),
+  });
+
+  return (
+    <Paper withBorder radius="sm" p="xs">
+      <Group justify="space-between" style={{ cursor: 'pointer' }} onClick={() => setOpen((o) => !o)} wrap="nowrap">
+        <Group gap="xs" wrap="nowrap">
+          {open ? <ChevronDown size={15} /> : <ChevronRight size={15} />}
+          <Text fw={600}>{booking.bookingReference ?? booking.bookingId?.slice(0, 8) ?? '—'}</Text>
+          <Text size="sm" c="dimmed">
+            {booking.customerName ?? '—'}
+          </Text>
+        </Group>
+        <Group gap="xs" wrap="nowrap">
+          <Badge variant="light" color="blue">
+            {booking.items.length} item(s)
+          </Badge>
+          {loadedCount > 0 && (
+            <Badge variant="light" color="green">
+              {loadedCount} loaded
+            </Badge>
+          )}
+        </Group>
+      </Group>
+
+      {open && (
+       <>
+        <Table striped highlightOnHover verticalSpacing="xs" mt="xs">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th w={36}>
+                <Checkbox
+                  checked={allSelected}
+                  indeterminate={!allSelected && selected.length > 0}
+                  onChange={toggleAll}
+                  disabled={selectable.length === 0}
+                />
+              </Table.Th>
+              <Table.Th>Container / Cargo</Table.Th>
+              <Table.Th>Goods</Table.Th>
+              <Table.Th>Weight</Table.Th>
+              <Table.Th>Stage</Table.Th>
+              <Table.Th>Wagon</Table.Th>
+              <Table.Th>Inspection</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {booking.items.map((i) => (
+              <Table.Tr key={i.id}>
+                <Table.Td>
+                  <Checkbox checked={selected.includes(i.id)} onChange={() => toggleItem(i.id)} disabled={!i.loadable} />
+                </Table.Td>
+                <Table.Td>
+                  <Text fw={600}>{i.containerNumber ?? i.cargoType ?? '—'}</Text>
+                </Table.Td>
+                <Table.Td>{i.cargoType ?? '—'}</Table.Td>
+                <Table.Td>{weight(i.weight)}</Table.Td>
+                <Table.Td>
+                  <Badge color={STAGE_COLOR[i.status] ?? 'gray'} variant="light">
+                    {i.status.replace(/_/g, ' ')}
+                  </Badge>
+                </Table.Td>
+                <Table.Td>
+                  {i.wagonNumber ? (
+                    <Badge variant="outline" color="indigo">
+                      {i.wagonNumber}
+                    </Badge>
+                  ) : (
+                    <Text size="xs" c="red">
+                      Not allocated
+                    </Text>
+                  )}
+                </Table.Td>
+                <Table.Td>
+                  {i.inspectionStatus ? (
+                    <Badge size="xs" variant="light" color={i.inspectionStatus === 'PASSED' ? 'green' : 'orange'}>
+                      {i.inspectionStatus}
+                    </Badge>
+                  ) : (
+                    '—'
+                  )}
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+        <Group justify="space-between" align="center" mt="xs">
+          <Text size="xs" c="dimmed">
+            {selected.length} selected · only READY_FOR_LOADING items with a wagon can be loaded
+          </Text>
+          <Button
+            size="compact-sm"
+            color="edr-green"
+            leftSection={<TrainFront size={14} />}
+            disabled={selected.length === 0}
+            loading={loadMutation.isPending}
+            onClick={() => loadMutation.mutate()}
+          >
+            Load {selected.length || ''} onto train
+          </Button>
+        </Group>
+       </>
+      )}
+    </Paper>
+  );
+}

apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx

@@ -62,6 +62,7 @@ import type {
 import { BookingSelect } from './BookingSelect';
 import { DeliverInventoryModal } from './DeliverInventoryModal';
 import { TruckDispatchModal } from './TruckDispatchModal';
+import { ContainerItemsModal } from './ContainerItemsModal';
 import { FeePreviewModal } from './FeePreviewModal';
 import { InspectionReportModal } from './InspectionReportModal';
 import { InventoryDetailModal } from './InventoryDetailModal';
@@ -645,9 +646,15 @@ function TruckEntranceFields({
 function LocationSelects({
   value,
   onChange,
+  allowedYardTypes,
+  allowedZoneTypes,
 }: {
   value: Location;
   onChange: (next: Location) => void;
+  /** When non-empty, only yards of these types are offered (matched to freight). */
+  allowedYardTypes?: string[];
+  /** When non-empty, only zones of these types are offered. */
+  allowedZoneTypes?: string[];
 }) {
   const warehousesQuery = useQuery(
     api.warehouses.list.queryOptions({ input: { filter: { status: 'ACTIVE' } } }),
@@ -673,15 +680,17 @@ function LocationSelects({
     () =>
       (yardsQuery.data ?? [])
         .filter((y) => y.status === 'ACTIVE')
+        .filter((y) => !allowedYardTypes?.length || allowedYardTypes.includes((y as { type?: string }).type ?? ''))
         .map((y) => ({ value: y.id, label: `${y.name} (${y.code})` })),
-    [yardsQuery.data],
+    [yardsQuery.data, allowedYardTypes],
   );
   const zoneOptions = useMemo(
     () =>
       (zonesQuery.data ?? [])
         .filter((z) => z.status === 'ACTIVE')
+        .filter((z) => !allowedZoneTypes?.length || allowedZoneTypes.includes((z as { type?: string }).type ?? ''))
         .map((z) => ({ value: z.id, label: `${z.name} (${z.code})` })),
-    [zonesQuery.data],
+    [zonesQuery.data, allowedZoneTypes],
   );
 
   return (
@@ -1759,6 +1768,29 @@ const importLocationTypesForFreight = (freightType: string | null | undefined) =
 const isImportContainerFreight = (freightType: string | null | undefined) =>
   (freightType ?? '').toUpperCase() === 'CONTAINER';
 
+/**
+ * Yard/zone types valid for the freight being received — used to filter the receive
+ * location pickers so the yard list matches the cargo. Container freight → container
+ * yards only; bulk / break-bulk → bulk, general-cargo, hazardous, or cold-storage.
+ * Union across the given freight types; empty input → no restriction (show all).
+ */
+const yardZoneTypesForFreights = (freightTypes: Array<string | null | undefined>) => {
+  const yardTypes = new Set<string>();
+  const zoneTypes = new Set<string>();
+  for (const freightType of freightTypes) {
+    const normalized = (freightType ?? '').toUpperCase();
+    if (!normalized) continue;
+    if (normalized === 'CONTAINER') {
+      yardTypes.add('CONTAINER_YARD');
+      zoneTypes.add('CONTAINER_ZONE');
+    } else {
+      ['BULK_YARD', 'GENERAL_CARGO_YARD', 'HAZARDOUS_YARD', 'COLD_STORAGE_YARD'].forEach((t) => yardTypes.add(t));
+      ['BULK_ZONE', 'GENERAL_CARGO_ZONE', 'HAZARDOUS_ZONE', 'COLD_STORAGE_ZONE'].forEach((t) => zoneTypes.add(t));
+    }
+  }
+  return { yardTypes: [...yardTypes], zoneTypes: [...zoneTypes] };
+};
+
 const isImportUnloadPending = (item: ImportTrainItem) =>
   !item.currentStatus || item.currentStatus === 'RECEIVED';
 
@@ -2161,6 +2193,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
   const [releaseItem, setReleaseItem] = useState<WarehouseInventoryItem | null>(null);
   const [deliverItem, setDeliverItem] = useState<WarehouseInventoryItem | null>(null);
   const [loadTruckItem, setLoadTruckItem] = useState<WarehouseInventoryItem | null>(null);
+  const [containerItemsItem, setContainerItemsItem] = useState<WarehouseInventoryItem | null>(null);
 
   const allSelected = rows.length > 0 && selected.size === rows.length;
   const someSelected = selected.size > 0 && !allSelected;
@@ -2376,7 +2409,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                   <Table.Td ta="right">
                     <Group gap="xs" justify="flex-end" wrap="nowrap">
                       <Tooltip label="View details" withArrow>
-                        <ActionIcon variant="subtle" color="gray" onClick={() => setViewItem(toInventoryItem(r))}>
+                        <ActionIcon variant="subtle" color="gray" onClick={() => setContainerItemsItem(toInventoryItem(r))}>
                           <Eye size={16} />
                         </ActionIcon>
                       </Tooltip>
@@ -2500,6 +2533,12 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
         bookingId={loadTruckItem?.booking?.id ?? null}
         bookingReference={loadTruckItem?.booking?.reference ?? null}
       />
+      <ContainerItemsModal
+        opened={Boolean(containerItemsItem)}
+        onClose={() => setContainerItemsItem(null)}
+        bookingId={containerItemsItem?.booking?.id ?? null}
+        bookingReference={containerItemsItem?.booking?.reference ?? null}
+      />
     </Stack>
   );
 }
@@ -2880,6 +2919,24 @@ export function WarehouseFlowWorkbench({
   );
   const activeDirection = direction === 'BOTH' ? tab : direction;
 
+  // Match the yard/zone list to the freight being received (container → container
+  // yards, etc). Same query key as the export tab, so React Query dedupes it.
+  const { data: eligibleForLocation = [] } = useQuery(
+    api.warehouses.eligibleBookings.queryOptions({
+      input: { direction: activeDirection },
+      enabled: enabled && activeDirection === 'EXPORT',
+    }),
+  );
+  const { yardTypes: allowedYardTypes, zoneTypes: allowedZoneTypes } = useMemo(
+    () =>
+      yardZoneTypesForFreights(
+        eligibleForLocation
+          .filter((r) => r.direction === activeDirection)
+          .map((r) => r.freightType),
+      ),
+    [eligibleForLocation, activeDirection],
+  );
+
   useEffect(() => {
     if (enabled) setLocation({ warehouseId: '', yardId: '', zoneId: '' });
   }, [enabled, direction]);
@@ -2887,7 +2944,12 @@ export function WarehouseFlowWorkbench({
   return (
     <Stack gap="md">
       {activeDirection === 'EXPORT' && (
-        <LocationSelects value={location} onChange={setLocation} />
+        <LocationSelects
+          value={location}
+          onChange={setLocation}
+          allowedYardTypes={allowedYardTypes}
+          allowedZoneTypes={allowedZoneTypes}
+        />
       )}
 
       {direction === 'BOTH' ? (

apps/edr-freight-web/backoffice/src/pages/fleet/CompliancePage.tsx

@@ -0,0 +1,343 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  Badge,
+  Button,
+  Card,
+  Container,
+  Grid,
+  Group,
+  Loader,
+  Modal,
+  Select,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { Plus, AlertTriangle } from "lucide-react";
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import { useToast } from "@/hooks/use-toast";
+import {
+  complianceService,
+  type ComplianceAlert,
+  type ComplianceRecord,
+  type ComplianceType,
+} from "@/services/compliance.service";
+import { vehiclesService, type Vehicle as VehicleType } from "@/services/vehicles.service";
+
+const COMPLIANCE_TYPES: ComplianceType[] = [
+  "INSPECTION",
+  "INSURANCE",
+  "ROADWORTHINESS",
+  "PERMIT",
+  "TAX",
+];
+
+const severityColor = (severity: ComplianceAlert["severity"]) =>
+  severity === "OVERDUE" ? "red" : "yellow";
+
+const statusColor = (status: ComplianceRecord["status"]) => {
+  if (status === "EXPIRED") return "red";
+  if (status === "EXPIRING") return "yellow";
+  return "green";
+};
+
+const formatDate = (value?: string | null) =>
+  value ? new Date(value).toLocaleDateString() : "—";
+
+const emptyForm = {
+  vehicleId: "",
+  type: "INSPECTION" as ComplianceType,
+  documentNumber: "",
+  issuedDate: "",
+  expiryDate: new Date().toISOString().split("T")[0],
+  notes: "",
+};
+
+export default function CompliancePage() {
+  const { toast } = useToast();
+  const qc = useQueryClient();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [formData, setFormData] = useState(emptyForm);
+
+  const { data: vehiclesData } = useQuery({
+    queryKey: ["vehicles", "compliance-select"],
+    queryFn: async () => {
+      const res = await vehiclesService.getAll({ limit: 1000 });
+      return res.data || [];
+    },
+  });
+
+  const { data: alerts = [], isLoading: isLoadingAlerts } = useQuery({
+    queryKey: ["compliance", "alerts"],
+    queryFn: async () => {
+      const res = await complianceService.getAlerts();
+      return res.data || [];
+    },
+  });
+
+  const { data: records = [], isLoading: isLoadingRecords } = useQuery({
+    queryKey: ["compliance"],
+    queryFn: async () => {
+      const res = await complianceService.list();
+      return res.data || [];
+    },
+  });
+
+  const createMutation = useMutation({
+    mutationFn: async (data: typeof formData) => {
+      const res = await complianceService.create({
+        vehicleId: data.vehicleId,
+        type: data.type,
+        expiryDate: data.expiryDate,
+        documentNumber: data.documentNumber || undefined,
+        issuedDate: data.issuedDate || undefined,
+        notes: data.notes || undefined,
+      });
+      return res.data;
+    },
+    onSuccess: () => {
+      toast({ title: "Compliance record created" });
+      setModalOpen(false);
+      setFormData(emptyForm);
+      qc.invalidateQueries({ queryKey: ["compliance"] });
+      qc.invalidateQueries({ queryKey: ["compliance", "alerts"] });
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Error creating record",
+        description:
+          error?.response?.data?.message || "Failed to create compliance record",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const vehicleOptions =
+    vehiclesData?.map((v: VehicleType) => ({
+      value: v.id,
+      label: `${v.plateNumber ?? v.code ?? v.id} - ${v.manufacturer ?? ""} ${v.model ?? ""}`.trim(),
+    })) || [];
+
+  const vehicleLabel = (record: ComplianceRecord) =>
+    record.vehicle?.plateNumber ||
+    vehiclesData?.find((v) => v.id === record.vehicleId)?.plateNumber ||
+    record.vehicleId;
+
+  const overdueCount = (alerts as ComplianceAlert[]).filter(
+    (a) => a.severity === "OVERDUE",
+  ).length;
+  const dueSoonCount = (alerts as ComplianceAlert[]).filter(
+    (a) => a.severity === "DUE_SOON",
+  ).length;
+
+  return (
+    <Container size="xl" py="xl" px="lg">
+      <Breadcrumbs items={[{ label: "Fleet" }, { label: "Compliance" }]} />
+
+      <Group justify="space-between" mb="lg">
+        <Title order={1}>Compliance & Alerts</Title>
+        <Button
+          leftSection={<Plus size={16} />}
+          onClick={() => setModalOpen(true)}
+          color="edr-green"
+        >
+          New Record
+        </Button>
+      </Group>
+
+      {/* Alerts */}
+      <Group mb="sm" gap="xs">
+        <AlertTriangle size={18} />
+        <Title order={3}>Expiry Alerts</Title>
+        {overdueCount > 0 && (
+          <Badge color="red" variant="light">
+            {overdueCount} overdue
+          </Badge>
+        )}
+        {dueSoonCount > 0 && (
+          <Badge color="yellow" variant="light">
+            {dueSoonCount} due soon
+          </Badge>
+        )}
+      </Group>
+
+      {isLoadingAlerts ? (
+        <Group justify="center" py="md" mb="lg">
+          <Loader size="sm" />
+        </Group>
+      ) : (alerts as ComplianceAlert[]).length === 0 ? (
+        <Card withBorder padding="lg" mb="lg">
+          <Text c="dimmed" ta="center">
+            No compliance items are overdue or due soon. All clear.
+          </Text>
+        </Card>
+      ) : (
+        <Grid mb="lg">
+          {(alerts as ComplianceAlert[]).map((alert, index) => (
+            <Grid.Col
+              key={`${alert.vehicleId}-${alert.kind}-${index}`}
+              span={{ base: 12, sm: 6, md: 4 }}
+            >
+              <Card withBorder padding="md" h="100%">
+                <Group justify="space-between" mb="xs">
+                  <Badge color={severityColor(alert.severity)}>
+                    {alert.severity === "OVERDUE" ? "Overdue" : "Due Soon"}
+                  </Badge>
+                  <Text size="sm" c="dimmed">
+                    {alert.daysUntil < 0
+                      ? `${Math.abs(alert.daysUntil)}d ago`
+                      : `in ${alert.daysUntil}d`}
+                  </Text>
+                </Group>
+                <Text fw={600}>{alert.label}</Text>
+                <Text size="sm" c="dimmed">
+                  {alert.vehiclePlate || alert.vehicleId}
+                </Text>
+                <Text size="sm" mt="xs">
+                  Expires {formatDate(alert.expiryDate)}
+                </Text>
+              </Card>
+            </Grid.Col>
+          ))}
+        </Grid>
+      )}
+
+      {/* Records */}
+      <Title order={3} mb="sm">
+        Compliance Records
+      </Title>
+      <Card withBorder>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Vehicle</Table.Th>
+              <Table.Th>Type</Table.Th>
+              <Table.Th>Document #</Table.Th>
+              <Table.Th>Issued</Table.Th>
+              <Table.Th>Expiry</Table.Th>
+              <Table.Th>Status</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {isLoadingRecords ? (
+              <Table.Tr>
+                <Table.Td colSpan={6}>
+                  <Group justify="center" py="md">
+                    <Loader size="sm" />
+                  </Group>
+                </Table.Td>
+              </Table.Tr>
+            ) : (records as ComplianceRecord[]).length === 0 ? (
+              <Table.Tr>
+                <Table.Td colSpan={6}>
+                  <Text c="dimmed" ta="center" py="md">
+                    No compliance records yet.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            ) : null}
+            {(records as ComplianceRecord[]).map((record) => (
+              <Table.Tr key={record.id}>
+                <Table.Td>{vehicleLabel(record)}</Table.Td>
+                <Table.Td>
+                  <Badge variant="light" size="sm">
+                    {record.type}
+                  </Badge>
+                </Table.Td>
+                <Table.Td>{record.documentNumber || "—"}</Table.Td>
+                <Table.Td>{formatDate(record.issuedDate)}</Table.Td>
+                <Table.Td>{formatDate(record.expiryDate)}</Table.Td>
+                <Table.Td>
+                  <Badge color={statusColor(record.status)} size="sm">
+                    {record.status}
+                  </Badge>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      </Card>
+
+      {/* Modal */}
+      <Modal
+        opened={modalOpen}
+        onClose={() => setModalOpen(false)}
+        title="New Compliance Record"
+        size="lg"
+      >
+        <Stack gap="md">
+          <Select
+            label="Vehicle"
+            placeholder="Select vehicle"
+            data={vehicleOptions}
+            value={formData.vehicleId}
+            onChange={(val) => setFormData({ ...formData, vehicleId: val || "" })}
+            searchable
+            required
+          />
+
+          <Select
+            label="Type"
+            data={COMPLIANCE_TYPES.map((t) => ({ value: t, label: t }))}
+            value={formData.type}
+            onChange={(val) =>
+              setFormData({ ...formData, type: (val as ComplianceType) || "INSPECTION" })
+            }
+            required
+          />
+
+          <TextInput
+            label="Document Number"
+            placeholder="Optional"
+            value={formData.documentNumber}
+            onChange={(e) =>
+              setFormData({ ...formData, documentNumber: e.currentTarget.value })
+            }
+          />
+
+          <TextInput
+            label="Issued Date"
+            type="date"
+            value={formData.issuedDate}
+            onChange={(e) =>
+              setFormData({ ...formData, issuedDate: e.currentTarget.value })
+            }
+          />
+
+          <TextInput
+            label="Expiry Date"
+            type="date"
+            value={formData.expiryDate}
+            onChange={(e) =>
+              setFormData({ ...formData, expiryDate: e.currentTarget.value })
+            }
+            required
+          />
+
+          <TextInput
+            label="Notes"
+            placeholder="Optional notes"
+            value={formData.notes}
+            onChange={(e) => setFormData({ ...formData, notes: e.currentTarget.value })}
+          />
+
+          <Group justify="flex-end">
+            <Button variant="light" onClick={() => setModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => createMutation.mutate(formData)}
+              loading={createMutation.isPending}
+              disabled={!formData.vehicleId || !formData.expiryDate}
+            >
+              Create Record
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Container>
+  );
+}

apps/edr-freight-web/backoffice/src/pages/fleet/DriverDetailPage.tsx

@@ -1,9 +1,10 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   ActionIcon,
   Badge,
+  Button,
   Card,
   Center,
   Container,
@@ -17,11 +18,18 @@ import {
   Timeline,
   Title,
 } from "@mantine/core";
+import { SmartFileInput } from "@edr/ui-common";
+import type { IFileUploadSetting } from "@edr/types/freight";
 import {
   ArrowLeft,
+  Download,
+  Eye,
+  FileText,
   History,
   Route,
   ShieldCheck,
+  Trash2,
+  Upload,
   Truck,
   User,
 } from "lucide-react";
@@ -29,6 +37,8 @@ import {
 import { driversService } from "@/services/drivers.service";
 import { vehiclesService } from "@/services/vehicles.service";
 import { fleetHistoryService, type FleetHistoryEvent } from "@/services/fleet-history.service";
+import { fileUploadSettingsService } from "@/services/fileUploadSettings.service";
+import { useToast } from "@/hooks/use-toast";
 
 const fmtDate = (iso?: string | null) => {
   if (!iso) return "—";
@@ -55,6 +65,178 @@ const Loading = () => (
   <Center py="xl"><Loader size="sm" /></Center>
 );
 
+const fmtSize = (bytes: number) => {
+  if (!bytes) return "—";
+  const kb = bytes / 1024;
+  return kb < 1024 ? `${kb.toFixed(0)} KB` : `${(kb / 1024).toFixed(1)} MB`;
+};
+
+/** Upload-area setting code configured on the File Settings page. */
+const DRIVER_DOCS_CODE = "driver_docs";
+// Field key the FALLBACK setting is keyed on (used only when the "driver_docs"
+// upload area hasn't been configured in File Settings yet).
+const DRIVER_DOCS_KEY = "driver_docs";
+/** Fallback single-field setting so the dropzone still works before an admin
+ *  configures the "driver_docs" area in File Settings. */
+const DRIVER_DOCS_FALLBACK: IFileUploadSetting = {
+  id: "driver-docs-setting",
+  createdAt: "",
+  updatedAt: "",
+  deletedAt: null,
+  code: "driver_docs",
+  label: "Driver documents",
+  description: null,
+  entity: "other",
+  fields: [
+    {
+      id: "driver-docs-field",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "driver-docs-setting",
+      fileKey: DRIVER_DOCS_KEY,
+      fileLabel: "Upload driver document(s)",
+      helpText: "License, national ID, contracts, training certificates, etc.",
+      isRequired: false,
+      isMultiple: true,
+      maxFiles: 20,
+      allowedExtensions: ["pdf", "png", "jpg", "jpeg", "doc", "docx"],
+      maxSizeMb: 10,
+      order: 1,
+    },
+  ],
+};
+
+/** Driver documents upload + view area (files stored under code "driver_docs"). */
+const DriverDocuments = ({ driverId }: { driverId: string }) => {
+  const { toast } = useToast();
+  const qc = useQueryClient();
+  // Files selected per configured field key (SmartFileInput is multi-field).
+  const [selectedMap, setSelectedMap] = useState<Record<string, File | File[] | null>>({});
+  const selectedFiles = Object.values(selectedMap).flatMap((v) =>
+    Array.isArray(v) ? v : v ? [v] : [],
+  );
+
+  // Upload-area configuration from the File Settings page (code "driver_docs").
+  // Falls back to a default field until an admin configures it there.
+  const { data: setting } = useQuery({
+    queryKey: ["file-upload-setting", DRIVER_DOCS_CODE],
+    queryFn: () => fileUploadSettingsService.getByCode(DRIVER_DOCS_CODE),
+    retry: false,
+  });
+  const activeSetting = setting ?? DRIVER_DOCS_FALLBACK;
+
+  const { data: docs = [], isLoading } = useQuery({
+    queryKey: ["driver", driverId, "documents"],
+    queryFn: () => driversService.listDocuments(driverId).then((r) => r.data ?? []),
+    enabled: Boolean(driverId),
+  });
+
+  const uploadMutation = useMutation({
+    mutationFn: (files: File[]) => driversService.uploadDocuments(driverId, files),
+    onSuccess: () => {
+      toast({ title: "Documents uploaded" });
+      void qc.invalidateQueries({ queryKey: ["driver", driverId, "documents"] });
+    },
+    onError: (err: unknown) => {
+      const description =
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+        "Upload failed";
+      toast({ title: "Upload failed", description, variant: "destructive" });
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: (fileId: string) => driversService.removeDocument(driverId, fileId),
+    onSuccess: () => {
+      toast({ title: "Document deleted" });
+      void qc.invalidateQueries({ queryKey: ["driver", driverId, "documents"] });
+    },
+    onError: () => toast({ title: "Delete failed", variant: "destructive" }),
+  });
+
+  // /files/:id is a public inline-serving route; open directly for preview/download.
+  const fileUrl = (fileId: string, download = false) =>
+    `${import.meta.env.VITE_API_URL}/files/${fileId}${download ? "?download=1" : ""}`;
+
+  return (
+    <Card withBorder padding="lg" radius="md">
+      <Stack gap="md" mb="lg">
+        <Text fw={600} size="sm">{activeSetting.label ?? "Upload documents"}</Text>
+        <SmartFileInput
+          file={activeSetting}
+          value={selectedMap}
+          onChange={setSelectedMap}
+        />
+        <Group justify="flex-end">
+          <Button
+            size="xs"
+            leftSection={<Upload size={14} />}
+            loading={uploadMutation.isPending}
+            disabled={selectedFiles.length === 0}
+            onClick={() =>
+              uploadMutation.mutate(selectedFiles, { onSuccess: () => setSelectedMap({}) })
+            }
+          >
+            Upload {selectedFiles.length > 0 ? `(${selectedFiles.length})` : ""}
+          </Button>
+        </Group>
+      </Stack>
+
+      <Text fw={600} size="sm" mb="sm">Uploaded documents ({docs.length})</Text>
+      {isLoading ? (
+        <Loading />
+      ) : docs.length === 0 ? (
+        <Text c="dimmed" size="sm" ta="center" py="md">No documents uploaded yet.</Text>
+      ) : (
+        <Table highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Size</Table.Th>
+              <Table.Th>Uploaded</Table.Th>
+              <Table.Th ta="right">Actions</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {docs.map((doc) => (
+              <Table.Tr key={doc.id}>
+                <Table.Td>
+                  <Group gap="xs" wrap="nowrap">
+                    <FileText size={15} />
+                    <Text size="sm" truncate>{doc.name}</Text>
+                  </Group>
+                </Table.Td>
+                <Table.Td>{fmtSize(doc.size)}</Table.Td>
+                <Table.Td>{fmtDate(doc.createdAt)}</Table.Td>
+                <Table.Td>
+                  <Group gap={4} justify="flex-end" wrap="nowrap">
+                    <ActionIcon variant="subtle" aria-label="View" onClick={() => window.open(fileUrl(doc.id), "_blank")}>
+                      <Eye size={16} />
+                    </ActionIcon>
+                    <ActionIcon variant="subtle" aria-label="Download" onClick={() => window.open(fileUrl(doc.id, true), "_blank")}>
+                      <Download size={16} />
+                    </ActionIcon>
+                    <ActionIcon
+                      variant="subtle"
+                      color="red"
+                      aria-label="Delete"
+                      loading={removeMutation.isPending && removeMutation.variables === doc.id}
+                      onClick={() => removeMutation.mutate(doc.id)}
+                    >
+                      <Trash2 size={16} />
+                    </ActionIcon>
+                  </Group>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      )}
+    </Card>
+  );
+};
+
 const DriverDetailPage = () => {
   const { id = "" } = useParams<{ id: string }>();
   const navigate = useNavigate();
@@ -106,6 +288,7 @@ const DriverDetailPage = () => {
             <Tabs.Tab value="vehicles" leftSection={<Truck size={14} />}>Vehicles</Tabs.Tab>
             <Tabs.Tab value="history" leftSection={<History size={14} />}>History</Tabs.Tab>
             <Tabs.Tab value="trips" leftSection={<Route size={14} />}>Trips</Tabs.Tab>
+            <Tabs.Tab value="documents" leftSection={<FileText size={14} />}>Documents</Tabs.Tab>
           </Tabs.List>
 
           <Tabs.Panel value="overview" pt="lg">
@@ -149,6 +332,10 @@ const DriverDetailPage = () => {
           <Tabs.Panel value="trips" pt="lg">
             <TripsTab driverId={id} />
           </Tabs.Panel>
+
+          <Tabs.Panel value="documents" pt="lg">
+            <DriverDocuments driverId={id} />
+          </Tabs.Panel>
         </Tabs>
       )}
     </Container>

apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx

@@ -394,7 +394,7 @@ const FleetResourcePage = () => {
                       <Group key={filter.key} gap={4} wrap="wrap">
                         <Text size="xs" fw={500} c="dimmed">{filter.label}:</Text>
                         <Group gap={4} wrap="wrap">
-                          {[{ value: "ALL", label: "All" }, ...filter.data].map((option) => (
+                          {filter.data.map((option) => (
                             <Button
                               key={option.value}
                               size="xs"

apps/edr-freight-web/backoffice/src/pages/fleet/IncidentsPage.tsx

@@ -0,0 +1,399 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  Button,
+  Card,
+  Container,
+  Group,
+  Loader,
+  Modal,
+  NumberInput,
+  Select,
+  Stack,
+  Table,
+  Text,
+  Textarea,
+  TextInput,
+  Title,
+  Badge,
+  Grid,
+} from "@mantine/core";
+import { Plus } from "lucide-react";
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import { useToast } from "@/hooks/use-toast";
+import {
+  incidentsService,
+  type Incident,
+  type IncidentSeverity,
+  type IncidentStatus,
+  type IncidentType,
+  type SaveIncidentPayload,
+} from "@/services/incidents.service";
+import { vehiclesService, type Vehicle as VehicleType } from "@/services/vehicles.service";
+import { driversService, type Driver as DriverType } from "@/services/drivers.service";
+
+const TYPE_OPTIONS: IncidentType[] = [
+  "ACCIDENT",
+  "BREAKDOWN",
+  "TRAFFIC_VIOLATION",
+  "THEFT",
+  "OTHER",
+];
+const SEVERITY_OPTIONS: IncidentSeverity[] = ["MINOR", "MODERATE", "MAJOR", "CRITICAL"];
+
+const TYPE_COLORS: Record<IncidentType, string> = {
+  ACCIDENT: "red",
+  BREAKDOWN: "orange",
+  TRAFFIC_VIOLATION: "yellow",
+  THEFT: "grape",
+  OTHER: "gray",
+};
+
+const SEVERITY_COLORS: Record<IncidentSeverity, string> = {
+  MINOR: "gray",
+  MODERATE: "yellow",
+  MAJOR: "orange",
+  CRITICAL: "red",
+};
+
+const STATUS_COLORS: Record<IncidentStatus, string> = {
+  REPORTED: "blue",
+  UNDER_REVIEW: "yellow",
+  CLAIM_FILED: "grape",
+  RESOLVED: "teal",
+  CLOSED: "gray",
+};
+
+const OPEN_STATUSES: IncidentStatus[] = ["REPORTED", "UNDER_REVIEW", "CLAIM_FILED"];
+
+const formatMoney = (value: unknown) =>
+  `ETB ${(Number(value) || 0).toLocaleString("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`;
+
+const initialForm = {
+  type: "ACCIDENT" as IncidentType,
+  severity: "MINOR" as IncidentSeverity,
+  occurredAt: new Date().toISOString().split("T")[0],
+  vehicleId: "",
+  driverId: "",
+  location: "",
+  description: "",
+  damageEstimate: undefined as number | undefined,
+  reportedBy: "",
+};
+
+export default function IncidentsPage() {
+  const { toast } = useToast();
+  const qc = useQueryClient();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [formData, setFormData] = useState(initialForm);
+
+  // Fetch vehicles
+  const { data: vehiclesData } = useQuery({
+    queryKey: ["vehicles", "incidents-select"],
+    queryFn: async () => {
+      const res = await vehiclesService.getAll({ limit: 1000 });
+      return res.data || [];
+    },
+  });
+
+  // Fetch drivers
+  const { data: driversData } = useQuery({
+    queryKey: ["drivers", "incidents-select"],
+    queryFn: async () => {
+      const res = await driversService.getAll({ limit: 1000 });
+      return res.data || [];
+    },
+  });
+
+  // Fetch incidents
+  const { data: incidentsData = [], isLoading } = useQuery({
+    queryKey: ["incidents"],
+    queryFn: async () => {
+      const res = await incidentsService.getAll();
+      return res.data || [];
+    },
+  });
+
+  const createMutation = useMutation({
+    mutationFn: async (data: typeof formData) => {
+      const payload: SaveIncidentPayload = {
+        type: data.type,
+        severity: data.severity,
+        occurredAt: new Date(data.occurredAt).toISOString(),
+        description: data.description,
+      };
+      if (data.vehicleId) payload.vehicleId = data.vehicleId;
+      if (data.driverId) payload.driverId = data.driverId;
+      if (data.location) payload.location = data.location;
+      if (data.damageEstimate != null) payload.damageEstimate = Number(data.damageEstimate);
+      if (data.reportedBy) payload.reportedBy = data.reportedBy;
+      const res = await incidentsService.create(payload);
+      return res.data;
+    },
+    onSuccess: () => {
+      toast({ title: "Incident reported" });
+      setModalOpen(false);
+      setFormData(initialForm);
+      qc.invalidateQueries({ queryKey: ["incidents"] });
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Error reporting incident",
+        description: error?.response?.data?.message || "Failed to report incident",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const vehicleOptions =
+    vehiclesData?.map((v: VehicleType) => ({
+      value: v.id,
+      label: `${v.plateNumber} - ${v.manufacturer} ${v.model}`,
+    })) || [];
+
+  const driverOptions =
+    driversData?.map((d: DriverType) => ({
+      value: d.id,
+      label: `${d.firstName} ${d.lastName}${d.licenseNumber ? ` (${d.licenseNumber})` : ""}`,
+    })) || [];
+
+  const incidents = incidentsData as Incident[];
+  const totalCount = incidents.length;
+  const openCount = incidents.filter((i) => OPEN_STATUSES.includes(i.status)).length;
+  const underReviewCount = incidents.filter((i) => i.status === "UNDER_REVIEW").length;
+  const resolvedCount = incidents.filter((i) => i.status === "RESOLVED").length;
+
+  const vehicleLabel = (incident: Incident) =>
+    incident.vehicle?.plateNumber ||
+    incident.vehicle?.registrationNumber ||
+    incident.vehicleId ||
+    "—";
+
+  const driverLabel = (incident: Incident) => {
+    if (incident.driver) {
+      const name = `${incident.driver.firstName ?? ""} ${incident.driver.lastName ?? ""}`.trim();
+      if (name) return name;
+    }
+    return incident.driverId || "—";
+  };
+
+  return (
+    <Container size="xl" py="xl" px="lg">
+      <Breadcrumbs items={[{ label: "Fleet" }, { label: "Incidents" }]} />
+
+      <Group justify="space-between" mb="lg">
+        <Title order={1}>Accidents &amp; Incidents</Title>
+        <Button leftSection={<Plus size={16} />} onClick={() => setModalOpen(true)} color="edr-green">
+          Report Incident
+        </Button>
+      </Group>
+
+      {/* Stats Cards */}
+      <Grid mb="lg">
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Card withBorder padding="lg">
+            <Text size="sm" c="dimmed" fw={500}>
+              Total Incidents
+            </Text>
+            <Text fw={700} size="lg">
+              {totalCount}
+            </Text>
+          </Card>
+        </Grid.Col>
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Card withBorder padding="lg">
+            <Text size="sm" c="dimmed" fw={500}>
+              Open
+            </Text>
+            <Text fw={700} size="lg">
+              {openCount}
+            </Text>
+          </Card>
+        </Grid.Col>
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Card withBorder padding="lg">
+            <Text size="sm" c="dimmed" fw={500}>
+              Under Review
+            </Text>
+            <Text fw={700} size="lg">
+              {underReviewCount}
+            </Text>
+          </Card>
+        </Grid.Col>
+        <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
+          <Card withBorder padding="lg">
+            <Text size="sm" c="dimmed" fw={500}>
+              Resolved
+            </Text>
+            <Text fw={700} size="lg">
+              {resolvedCount}
+            </Text>
+          </Card>
+        </Grid.Col>
+      </Grid>
+
+      {/* Incidents Table */}
+      <Card withBorder>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Date</Table.Th>
+              <Table.Th>Type</Table.Th>
+              <Table.Th>Severity</Table.Th>
+              <Table.Th>Vehicle</Table.Th>
+              <Table.Th>Driver</Table.Th>
+              <Table.Th align="right">Damage</Table.Th>
+              <Table.Th>Status</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {isLoading ? (
+              <Table.Tr>
+                <Table.Td colSpan={7}>
+                  <Group justify="center" py="md">
+                    <Loader size="sm" />
+                  </Group>
+                </Table.Td>
+              </Table.Tr>
+            ) : incidents.length === 0 ? (
+              <Table.Tr>
+                <Table.Td colSpan={7}>
+                  <Text c="dimmed" ta="center" py="md">
+                    No incidents recorded yet.
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            ) : null}
+            {incidents.map((incident) => (
+              <Table.Tr key={incident.id}>
+                <Table.Td>{new Date(incident.occurredAt).toLocaleDateString()}</Table.Td>
+                <Table.Td>
+                  <Badge size="sm" color={TYPE_COLORS[incident.type]}>
+                    {incident.type.replace(/_/g, " ")}
+                  </Badge>
+                </Table.Td>
+                <Table.Td>
+                  <Badge size="sm" color={SEVERITY_COLORS[incident.severity]}>
+                    {incident.severity}
+                  </Badge>
+                </Table.Td>
+                <Table.Td>{vehicleLabel(incident)}</Table.Td>
+                <Table.Td>{driverLabel(incident)}</Table.Td>
+                <Table.Td align="right">
+                  {incident.damageEstimate != null ? formatMoney(incident.damageEstimate) : "—"}
+                </Table.Td>
+                <Table.Td>
+                  <Badge size="sm" color={STATUS_COLORS[incident.status]} variant="light">
+                    {incident.status.replace(/_/g, " ")}
+                  </Badge>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      </Card>
+
+      {/* Modal */}
+      <Modal opened={modalOpen} onClose={() => setModalOpen(false)} title="Report Incident" size="lg">
+        <Stack gap="md">
+          <Select
+            label="Type"
+            data={TYPE_OPTIONS.map((t) => ({ value: t, label: t.replace(/_/g, " ") }))}
+            value={formData.type}
+            onChange={(val) => setFormData({ ...formData, type: (val as IncidentType) || "ACCIDENT" })}
+            required
+          />
+
+          <Select
+            label="Severity"
+            data={SEVERITY_OPTIONS.map((s) => ({ value: s, label: s }))}
+            value={formData.severity}
+            onChange={(val) =>
+              setFormData({ ...formData, severity: (val as IncidentSeverity) || "MINOR" })
+            }
+            required
+          />
+
+          <TextInput
+            label="Occurred At"
+            type="date"
+            value={formData.occurredAt}
+            onChange={(e) => setFormData({ ...formData, occurredAt: e.currentTarget.value })}
+            required
+          />
+
+          <Select
+            label="Vehicle"
+            placeholder="Select vehicle"
+            data={vehicleOptions}
+            value={formData.vehicleId || null}
+            onChange={(val) => setFormData({ ...formData, vehicleId: val || "" })}
+            clearable
+            searchable
+          />
+
+          <Select
+            label="Driver"
+            placeholder="Select driver"
+            data={driverOptions}
+            value={formData.driverId || null}
+            onChange={(val) => setFormData({ ...formData, driverId: val || "" })}
+            clearable
+            searchable
+          />
+
+          <Textarea
+            label="Description"
+            placeholder="What happened?"
+            value={formData.description}
+            onChange={(e) => setFormData({ ...formData, description: e.currentTarget.value })}
+            minRows={3}
+            required
+          />
+
+          <NumberInput
+            label="Damage Estimate (ETB)"
+            placeholder="0.00"
+            value={formData.damageEstimate}
+            onChange={(val) =>
+              setFormData({ ...formData, damageEstimate: val as number | undefined })
+            }
+            decimalScale={2}
+            min={0}
+            thousandSeparator=","
+          />
+
+          <TextInput
+            label="Location"
+            placeholder="Where did it happen?"
+            value={formData.location}
+            onChange={(e) => setFormData({ ...formData, location: e.currentTarget.value })}
+          />
+
+          <TextInput
+            label="Reported By"
+            placeholder="Optional"
+            value={formData.reportedBy}
+            onChange={(e) => setFormData({ ...formData, reportedBy: e.currentTarget.value })}
+          />
+
+          <Group justify="flex-end">
+            <Button variant="light" onClick={() => setModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => createMutation.mutate(formData)}
+              loading={createMutation.isPending}
+              disabled={!formData.description.trim()}
+            >
+              Report Incident
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Container>
+  );
+}

apps/edr-freight-web/backoffice/src/pages/fleet/ProcurementPage.tsx

@@ -0,0 +1,665 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  Badge,
+  Button,
+  Card,
+  Container,
+  Group,
+  Loader,
+  Modal,
+  NumberInput,
+  Select,
+  Stack,
+  Switch,
+  Table,
+  Tabs,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { Plus } from "lucide-react";
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import { useToast } from "@/hooks/use-toast";
+import { vehiclesService, type Vehicle } from "@/services/vehicles.service";
+import {
+  procurementService,
+  type AssetAcquisition,
+  type AssetDisposal,
+  type Vendor,
+  type AcquisitionType,
+  type AcquisitionStatus,
+  type VendorType,
+  type DisposalMethod,
+} from "@/services/procurement.service";
+
+const money = (x: number | null | undefined) =>
+  `ETB ${(Number(x) || 0).toLocaleString("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`;
+
+const ACQUISITION_TYPES: AcquisitionType[] = ["PURCHASE", "LEASE", "RENTAL"];
+const ACQUISITION_STATUSES: AcquisitionStatus[] = ["ACTIVE", "LEASE_EXPIRING", "DISPOSED"];
+const VENDOR_TYPES: VendorType[] = ["DEALER", "LEASING", "PARTS", "SERVICE", "OTHER"];
+const DISPOSAL_METHODS: DisposalMethod[] = ["SALE", "SCRAP", "RETURN_LEASE", "TRADE_IN"];
+
+const typeBadgeColor = (t: AcquisitionType) =>
+  t === "PURCHASE" ? "green" : t === "LEASE" ? "blue" : "grape";
+const statusBadgeColor = (s: AcquisitionStatus) =>
+  s === "ACTIVE" ? "green" : s === "LEASE_EXPIRING" ? "yellow" : "gray";
+
+const vehicleLabel = (
+  v?: { plateNumber?: string | null; registrationNumber?: string | null } | null,
+  fallback?: string | null,
+) => v?.plateNumber || v?.registrationNumber || fallback || "—";
+
+// Strip empty strings / null / undefined before sending to the API (ValidationPipe rejects "" for UUID fields).
+const clean = <T extends Record<string, unknown>>(obj: T): Partial<T> =>
+  Object.fromEntries(
+    Object.entries(obj).filter(([, v]) => v !== "" && v !== undefined && v !== null),
+  ) as Partial<T>;
+
+const emptyAcquisition = {
+  vehicleId: "",
+  vendorId: "",
+  acquisitionType: "PURCHASE" as AcquisitionType,
+  acquisitionDate: new Date().toISOString().split("T")[0],
+  cost: undefined as number | undefined,
+  usefulLifeMonths: undefined as number | undefined,
+  salvageValue: undefined as number | undefined,
+  leaseStart: "",
+  leaseEnd: "",
+  monthlyPayment: undefined as number | undefined,
+  status: "ACTIVE" as AcquisitionStatus,
+  notes: "",
+};
+
+const emptyVendor = {
+  name: "",
+  type: "" as VendorType | "",
+  contactPerson: "",
+  phone: "",
+  email: "",
+  address: "",
+  isActive: true,
+};
+
+const emptyDisposal = {
+  vehicleId: "",
+  disposalDate: new Date().toISOString().split("T")[0],
+  method: "SALE" as DisposalMethod,
+  salePrice: undefined as number | undefined,
+  buyer: "",
+  notes: "",
+};
+
+export default function ProcurementPage() {
+  const { toast } = useToast();
+  const qc = useQueryClient();
+
+  const [tab, setTab] = useState<string>("acquisitions");
+  const [acqModalOpen, setAcqModalOpen] = useState(false);
+  const [vendorModalOpen, setVendorModalOpen] = useState(false);
+  const [disposalModalOpen, setDisposalModalOpen] = useState(false);
+
+  const [acqForm, setAcqForm] = useState({ ...emptyAcquisition });
+  const [vendorForm, setVendorForm] = useState({ ...emptyVendor });
+  const [disposalForm, setDisposalForm] = useState({ ...emptyDisposal });
+
+  // ---- Queries ----
+  const { data: vehiclesData } = useQuery({
+    queryKey: ["vehicles", "list"],
+    queryFn: async () => {
+      const res = await vehiclesService.getAll({ limit: 1000 });
+      return res.data || [];
+    },
+  });
+
+  const { data: acquisitions = [], isLoading: loadingAcquisitions } = useQuery({
+    queryKey: ["procurement", "acquisitions"],
+    queryFn: async () => {
+      const res = await procurementService.listAcquisitions();
+      return res.data || [];
+    },
+  });
+
+  const { data: vendors = [], isLoading: loadingVendors } = useQuery({
+    queryKey: ["procurement", "vendors"],
+    queryFn: async () => {
+      const res = await procurementService.listVendors();
+      return res.data || [];
+    },
+  });
+
+  const { data: disposals = [], isLoading: loadingDisposals } = useQuery({
+    queryKey: ["procurement", "disposals"],
+    queryFn: async () => {
+      const res = await procurementService.listDisposals();
+      return res.data || [];
+    },
+  });
+
+  const vehicleOptions =
+    vehiclesData?.map((v: Vehicle) => ({
+      value: v.id,
+      label: `${v.plateNumber} - ${v.manufacturer} ${v.model}`,
+    })) || [];
+
+  const vendorOptions = vendors.map((v: Vendor) => ({ value: v.id, label: v.name }));
+
+  // ---- Mutations ----
+  const createAcquisition = useMutation({
+    mutationFn: async () => {
+      const res = await procurementService.createAcquisition(clean(acqForm) as never);
+      return res.data;
+    },
+    onSuccess: () => {
+      toast({ title: "Acquisition recorded" });
+      setAcqModalOpen(false);
+      setAcqForm({ ...emptyAcquisition });
+      qc.invalidateQueries({ queryKey: ["procurement", "acquisitions"] });
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Error recording acquisition",
+        description: error?.response?.data?.message || "Failed to record acquisition",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const createVendor = useMutation({
+    mutationFn: async () => {
+      const res = await procurementService.createVendor(clean(vendorForm) as never);
+      return res.data;
+    },
+    onSuccess: () => {
+      toast({ title: "Vendor created" });
+      setVendorModalOpen(false);
+      setVendorForm({ ...emptyVendor });
+      qc.invalidateQueries({ queryKey: ["procurement", "vendors"] });
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Error creating vendor",
+        description: error?.response?.data?.message || "Failed to create vendor",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const createDisposal = useMutation({
+    mutationFn: async () => {
+      const res = await procurementService.createDisposal(clean(disposalForm) as never);
+      return res.data;
+    },
+    onSuccess: () => {
+      toast({ title: "Disposal recorded" });
+      setDisposalModalOpen(false);
+      setDisposalForm({ ...emptyDisposal });
+      qc.invalidateQueries({ queryKey: ["procurement", "disposals"] });
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Error recording disposal",
+        description: error?.response?.data?.message || "Failed to record disposal",
+        variant: "destructive",
+      });
+    },
+  });
+
+  return (
+    <Container size="xl" py="xl" px="lg">
+      <Breadcrumbs items={[{ label: "Fleet" }, { label: "Procurement" }]} />
+
+      <Group justify="space-between" mb="lg">
+        <Title order={1}>Procurement & Assets</Title>
+      </Group>
+
+      <Tabs value={tab} onChange={(val) => setTab(val || "acquisitions")}>
+        <Tabs.List mb="lg">
+          <Tabs.Tab value="acquisitions">Acquisitions</Tabs.Tab>
+          <Tabs.Tab value="vendors">Vendors</Tabs.Tab>
+          <Tabs.Tab value="disposals">Disposals</Tabs.Tab>
+        </Tabs.List>
+
+        {/* ---- Acquisitions ---- */}
+        <Tabs.Panel value="acquisitions">
+          <Group justify="flex-end" mb="md">
+            <Button
+              leftSection={<Plus size={16} />}
+              onClick={() => setAcqModalOpen(true)}
+              color="edr-green"
+            >
+              New Acquisition
+            </Button>
+          </Group>
+          <Card withBorder>
+            <Table striped highlightOnHover>
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>Vehicle</Table.Th>
+                  <Table.Th>Type</Table.Th>
+                  <Table.Th>Date</Table.Th>
+                  <Table.Th align="right">Cost</Table.Th>
+                  <Table.Th>Status</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {loadingAcquisitions ? (
+                  <Table.Tr>
+                    <Table.Td colSpan={5}>
+                      <Group justify="center" py="md">
+                        <Loader size="sm" />
+                      </Group>
+                    </Table.Td>
+                  </Table.Tr>
+                ) : acquisitions.length === 0 ? (
+                  <Table.Tr>
+                    <Table.Td colSpan={5}>
+                      <Text c="dimmed" ta="center" py="md">
+                        No acquisitions recorded yet.
+                      </Text>
+                    </Table.Td>
+                  </Table.Tr>
+                ) : null}
+                {acquisitions.map((a: AssetAcquisition) => (
+                  <Table.Tr key={a.id}>
+                    <Table.Td>{vehicleLabel(a.vehicle, a.vehicleId)}</Table.Td>
+                    <Table.Td>
+                      <Badge size="sm" color={typeBadgeColor(a.acquisitionType)}>
+                        {a.acquisitionType}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>{new Date(a.acquisitionDate).toLocaleDateString()}</Table.Td>
+                    <Table.Td align="right">{money(a.cost)}</Table.Td>
+                    <Table.Td>
+                      <Badge size="sm" color={statusBadgeColor(a.status)}>
+                        {a.status}
+                      </Badge>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </Card>
+        </Tabs.Panel>
+
+        {/* ---- Vendors ---- */}
+        <Tabs.Panel value="vendors">
+          <Group justify="flex-end" mb="md">
+            <Button
+              leftSection={<Plus size={16} />}
+              onClick={() => setVendorModalOpen(true)}
+              color="edr-green"
+            >
+              New Vendor
+            </Button>
+          </Group>
+          <Card withBorder>
+            <Table striped highlightOnHover>
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>Name</Table.Th>
+                  <Table.Th>Type</Table.Th>
+                  <Table.Th>Contact</Table.Th>
+                  <Table.Th>Phone</Table.Th>
+                  <Table.Th>Email</Table.Th>
+                  <Table.Th>Active</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {loadingVendors ? (
+                  <Table.Tr>
+                    <Table.Td colSpan={6}>
+                      <Group justify="center" py="md">
+                        <Loader size="sm" />
+                      </Group>
+                    </Table.Td>
+                  </Table.Tr>
+                ) : vendors.length === 0 ? (
+                  <Table.Tr>
+                    <Table.Td colSpan={6}>
+                      <Text c="dimmed" ta="center" py="md">
+                        No vendors added yet.
+                      </Text>
+                    </Table.Td>
+                  </Table.Tr>
+                ) : null}
+                {vendors.map((v: Vendor) => (
+                  <Table.Tr key={v.id}>
+                    <Table.Td>{v.name}</Table.Td>
+                    <Table.Td>{v.type ? <Badge size="sm">{v.type}</Badge> : "—"}</Table.Td>
+                    <Table.Td>{v.contactPerson || "—"}</Table.Td>
+                    <Table.Td>{v.phone || "—"}</Table.Td>
+                    <Table.Td>{v.email || "—"}</Table.Td>
+                    <Table.Td>
+                      <Badge size="sm" color={v.isActive ? "green" : "gray"}>
+                        {v.isActive ? "Active" : "Inactive"}
+                      </Badge>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </Card>
+        </Tabs.Panel>
+
+        {/* ---- Disposals ---- */}
+        <Tabs.Panel value="disposals">
+          <Group justify="flex-end" mb="md">
+            <Button
+              leftSection={<Plus size={16} />}
+              onClick={() => setDisposalModalOpen(true)}
+              color="edr-green"
+            >
+              New Disposal
+            </Button>
+          </Group>
+          <Card withBorder>
+            <Table striped highlightOnHover>
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>Vehicle</Table.Th>
+                  <Table.Th>Method</Table.Th>
+                  <Table.Th>Date</Table.Th>
+                  <Table.Th align="right">Sale Price</Table.Th>
+                  <Table.Th>Buyer</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {loadingDisposals ? (
+                  <Table.Tr>
+                    <Table.Td colSpan={5}>
+                      <Group justify="center" py="md">
+                        <Loader size="sm" />
+                      </Group>
+                    </Table.Td>
+                  </Table.Tr>
+                ) : disposals.length === 0 ? (
+                  <Table.Tr>
+                    <Table.Td colSpan={5}>
+                      <Text c="dimmed" ta="center" py="md">
+                        No disposals recorded yet.
+                      </Text>
+                    </Table.Td>
+                  </Table.Tr>
+                ) : null}
+                {disposals.map((d: AssetDisposal) => (
+                  <Table.Tr key={d.id}>
+                    <Table.Td>{d.vehicleId}</Table.Td>
+                    <Table.Td>
+                      <Badge size="sm">{d.method}</Badge>
+                    </Table.Td>
+                    <Table.Td>{new Date(d.disposalDate).toLocaleDateString()}</Table.Td>
+                    <Table.Td align="right">{money(d.salePrice)}</Table.Td>
+                    <Table.Td>{d.buyer || "—"}</Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </Card>
+        </Tabs.Panel>
+      </Tabs>
+
+      {/* ---- Acquisition Modal ---- */}
+      <Modal
+        opened={acqModalOpen}
+        onClose={() => setAcqModalOpen(false)}
+        title="New Acquisition"
+        size="lg"
+      >
+        <Stack gap="md">
+          <Select
+            label="Vehicle"
+            placeholder="Select vehicle"
+            data={vehicleOptions}
+            value={acqForm.vehicleId}
+            onChange={(val) => setAcqForm({ ...acqForm, vehicleId: val || "" })}
+            searchable
+            clearable
+          />
+          <Select
+            label="Vendor"
+            placeholder="Select vendor"
+            data={vendorOptions}
+            value={acqForm.vendorId}
+            onChange={(val) => setAcqForm({ ...acqForm, vendorId: val || "" })}
+            searchable
+            clearable
+          />
+          <Select
+            label="Acquisition Type"
+            data={ACQUISITION_TYPES}
+            value={acqForm.acquisitionType}
+            onChange={(val) =>
+              setAcqForm({ ...acqForm, acquisitionType: (val as AcquisitionType) || "PURCHASE" })
+            }
+            required
+          />
+          <TextInput
+            label="Acquisition Date"
+            type="date"
+            value={acqForm.acquisitionDate}
+            onChange={(e) => setAcqForm({ ...acqForm, acquisitionDate: e.currentTarget.value })}
+            required
+          />
+          <NumberInput
+            label="Cost"
+            placeholder="0.00"
+            value={acqForm.cost}
+            onChange={(val) => setAcqForm({ ...acqForm, cost: val as number | undefined })}
+            decimalScale={2}
+            min={0}
+          />
+          <NumberInput
+            label="Useful Life (months)"
+            placeholder="Optional"
+            value={acqForm.usefulLifeMonths}
+            onChange={(val) =>
+              setAcqForm({ ...acqForm, usefulLifeMonths: val as number | undefined })
+            }
+            decimalScale={0}
+            min={0}
+          />
+          <NumberInput
+            label="Salvage Value"
+            placeholder="0.00"
+            value={acqForm.salvageValue}
+            onChange={(val) => setAcqForm({ ...acqForm, salvageValue: val as number | undefined })}
+            decimalScale={2}
+            min={0}
+          />
+          <TextInput
+            label="Lease Start"
+            type="date"
+            value={acqForm.leaseStart}
+            onChange={(e) => setAcqForm({ ...acqForm, leaseStart: e.currentTarget.value })}
+          />
+          <TextInput
+            label="Lease End"
+            type="date"
+            value={acqForm.leaseEnd}
+            onChange={(e) => setAcqForm({ ...acqForm, leaseEnd: e.currentTarget.value })}
+          />
+          <NumberInput
+            label="Monthly Payment"
+            placeholder="0.00"
+            value={acqForm.monthlyPayment}
+            onChange={(val) =>
+              setAcqForm({ ...acqForm, monthlyPayment: val as number | undefined })
+            }
+            decimalScale={2}
+            min={0}
+          />
+          <Select
+            label="Status"
+            data={ACQUISITION_STATUSES}
+            value={acqForm.status}
+            onChange={(val) =>
+              setAcqForm({ ...acqForm, status: (val as AcquisitionStatus) || "ACTIVE" })
+            }
+          />
+          <TextInput
+            label="Notes"
+            placeholder="Optional notes"
+            value={acqForm.notes}
+            onChange={(e) => setAcqForm({ ...acqForm, notes: e.currentTarget.value })}
+          />
+          <Group justify="flex-end">
+            <Button variant="light" onClick={() => setAcqModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => createAcquisition.mutate()}
+              loading={createAcquisition.isPending}
+              disabled={!acqForm.acquisitionDate}
+            >
+              Save Acquisition
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* ---- Vendor Modal ---- */}
+      <Modal
+        opened={vendorModalOpen}
+        onClose={() => setVendorModalOpen(false)}
+        title="New Vendor"
+        size="lg"
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Name"
+            placeholder="Vendor name"
+            value={vendorForm.name}
+            onChange={(e) => setVendorForm({ ...vendorForm, name: e.currentTarget.value })}
+            required
+          />
+          <Select
+            label="Type"
+            placeholder="Select type"
+            data={VENDOR_TYPES}
+            value={vendorForm.type || null}
+            onChange={(val) => setVendorForm({ ...vendorForm, type: (val as VendorType) || "" })}
+            clearable
+          />
+          <TextInput
+            label="Contact Person"
+            placeholder="Optional"
+            value={vendorForm.contactPerson}
+            onChange={(e) => setVendorForm({ ...vendorForm, contactPerson: e.currentTarget.value })}
+          />
+          <TextInput
+            label="Phone"
+            placeholder="Optional"
+            value={vendorForm.phone}
+            onChange={(e) => setVendorForm({ ...vendorForm, phone: e.currentTarget.value })}
+          />
+          <TextInput
+            label="Email"
+            placeholder="Optional"
+            value={vendorForm.email}
+            onChange={(e) => setVendorForm({ ...vendorForm, email: e.currentTarget.value })}
+          />
+          <TextInput
+            label="Address"
+            placeholder="Optional"
+            value={vendorForm.address}
+            onChange={(e) => setVendorForm({ ...vendorForm, address: e.currentTarget.value })}
+          />
+          <Switch
+            label="Active"
+            checked={vendorForm.isActive}
+            onChange={(e) => setVendorForm({ ...vendorForm, isActive: e.currentTarget.checked })}
+          />
+          <Group justify="flex-end">
+            <Button variant="light" onClick={() => setVendorModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => createVendor.mutate()}
+              loading={createVendor.isPending}
+              disabled={!vendorForm.name}
+            >
+              Save Vendor
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* ---- Disposal Modal ---- */}
+      <Modal
+        opened={disposalModalOpen}
+        onClose={() => setDisposalModalOpen(false)}
+        title="New Disposal"
+        size="lg"
+      >
+        <Stack gap="md">
+          <Select
+            label="Vehicle"
+            placeholder="Select vehicle"
+            data={vehicleOptions}
+            value={disposalForm.vehicleId}
+            onChange={(val) => setDisposalForm({ ...disposalForm, vehicleId: val || "" })}
+            searchable
+            required
+          />
+          <TextInput
+            label="Disposal Date"
+            type="date"
+            value={disposalForm.disposalDate}
+            onChange={(e) =>
+              setDisposalForm({ ...disposalForm, disposalDate: e.currentTarget.value })
+            }
+            required
+          />
+          <Select
+            label="Method"
+            data={DISPOSAL_METHODS}
+            value={disposalForm.method}
+            onChange={(val) =>
+              setDisposalForm({ ...disposalForm, method: (val as DisposalMethod) || "SALE" })
+            }
+            required
+          />
+          <NumberInput
+            label="Sale Price"
+            placeholder="0.00"
+            value={disposalForm.salePrice}
+            onChange={(val) =>
+              setDisposalForm({ ...disposalForm, salePrice: val as number | undefined })
+            }
+            decimalScale={2}
+            min={0}
+          />
+          <TextInput
+            label="Buyer"
+            placeholder="Optional"
+            value={disposalForm.buyer}
+            onChange={(e) => setDisposalForm({ ...disposalForm, buyer: e.currentTarget.value })}
+          />
+          <TextInput
+            label="Notes"
+            placeholder="Optional notes"
+            value={disposalForm.notes}
+            onChange={(e) => setDisposalForm({ ...disposalForm, notes: e.currentTarget.value })}
+          />
+          <Group justify="flex-end">
+            <Button variant="light" onClick={() => setDisposalModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => createDisposal.mutate()}
+              loading={createDisposal.isPending}
+              disabled={!disposalForm.vehicleId || !disposalForm.disposalDate}
+            >
+              Save Disposal
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Container>
+  );
+}

apps/edr-freight-web/backoffice/src/pages/fleet/TrackingPage.tsx

@@ -1,368 +1,500 @@
-import { useState, useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { Container, Grid, Card, Stack, Group, Select, Text, Badge, Button, Box, Table, SimpleGrid } from '@mantine/core';
-import { MapPin, Navigation, Radio, Activity } from 'lucide-react';
-import Breadcrumbs from '@/components/ui/Breadcrumbs';
-import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
-import { vehiclesService } from '@/services/vehicles.service';
-import { freightBrand } from '@/theme/freight-brand';
+import { useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  ActionIcon,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Container,
+  Grid,
+  Group,
+  Modal,
+  Select,
+  SimpleGrid,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import {
+  APIProvider,
+  InfoWindow,
+  Map as GoogleMap,
+  Marker,
+  useMap,
+} from "@vis.gl/react-google-maps";
+import { Activity, Pencil, Plus, Radio, Trash2 } from "lucide-react";
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import { useToast } from "@/hooks/use-toast";
+import { vehiclesService } from "@/services/vehicles.service";
+import { gpsTrackingService, type GpsDevice } from "@/services/gps-tracking.service";
+import { freightBrand } from "@/theme/freight-brand";
 
-interface Vehicle {
-  id: string;
-  registrationNumber: string;
-  plateNumber: string;
-  manufacturer: string;
-  model: string;
-  status?: string;
+// Same default key + env override the portal's LocationPicker uses.
+const GOOGLE_MAPS_API_KEY =
+  import.meta.env.VITE_GOOGLE_MAPS_API_KEY ||
+  "AIzaSyBg4tN31-fgvH_2Ix_TPo6VSfOA2uA5CCI";
+const DEFAULT_CENTER = { lat: 9.03, lng: 38.74 }; // Addis Ababa
+
+const toNum = (v: number | string | null | undefined): number | null =>
+  v == null || v === "" ? null : Number(v);
+
+const deviceLabel = (d: GpsDevice) =>
+  d.vehicle
+    ? [d.vehicle.code, d.vehicle.plateNumber].filter(Boolean).join(" · ")
+    : d.name || d.imei;
+
+const fmtTime = (iso?: string | null) => {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? "—" : d.toLocaleString();
+};
+
+const StatBox = ({ label, value }: { label: string; value: string }) => (
+  <Box p="sm" style={{ backgroundColor: "#f8f9fa", borderRadius: 8 }}>
+    <Text size="xs" c="dimmed">{label}</Text>
+    <Text fw={600} size="sm">{value}</Text>
+  </Box>
+);
+
+type LatLng = { lat: number; lng: number };
+
+/** Flip a flag once the map (and thus the Maps JS classes) is loaded. */
+function ReadyProbe({ onReady }: { onReady: () => void }) {
+  const map = useMap();
+  useEffect(() => {
+    if (map) onReady();
+  }, [map, onReady]);
+  return null;
 }
 
-interface GPSLocation {
+/** Fit the map to the current markers (or center on a single one). */
+function FitBounds({ points }: { points: LatLng[] }) {
+  const map = useMap();
+  useEffect(() => {
+    if (!map || points.length === 0 || typeof google === "undefined") return;
+    if (points.length === 1) {
+      map.setCenter(points[0]);
+      map.setZoom(14);
+      return;
+    }
+    const b = new google.maps.LatLngBounds();
+    points.forEach((p) => b.extend(p));
+    map.fitBounds(b, 60);
+  }, [map, points]);
+  return null;
+}
+
+/** Lazily reverse-geocode a coordinate to a human address. */
+function useAddress(lat: number, lng: number): string | null {
+  const [addr, setAddr] = useState<string | null>(null);
+  useEffect(() => {
+    if (typeof google === "undefined" || !google.maps?.Geocoder) return;
+    setAddr(null);
+    let cancelled = false;
+    new google.maps.Geocoder().geocode({ location: { lat, lng } }, (res, status) => {
+      if (cancelled) return;
+      setAddr(status === "OK" && res?.[0] ? res[0].formatted_address : "Unknown location");
+    });
+    return () => { cancelled = true; };
+  }, [lat, lng]);
+  return addr;
+}
+
+/** Hover popup: label, coordinates, speed/course, and the reverse-geocoded place. */
+function HoverInfo({
+  device,
+  lat,
+  lng,
+  onClose,
+}: {
+  device: GpsDevice;
   lat: number;
   lng: number;
-  speed?: number;
-  heading?: number;
-  lastUpdate?: string;
+  onClose: () => void;
+}) {
+  const address = useAddress(lat, lng);
+  return (
+    <InfoWindow position={{ lat, lng }} pixelOffset={[0, -46]} onCloseClick={onClose}>
+      <div style={{ minWidth: 190, fontSize: 13 }}>
+        <div style={{ fontWeight: 600, marginBottom: 2 }}>{deviceLabel(device)}</div>
+        <div style={{ fontFamily: "monospace" }}>
+          {lat.toFixed(5)}, {lng.toFixed(5)}
+        </div>
+        <div style={{ color: "#555" }}>
+          {toNum(device.lastSpeed) ?? 0} km/h · {device.lastCourse ?? 0}°
+        </div>
+        <div style={{ color: "#777", marginTop: 4 }}>{address ?? "Locating…"}</div>
+      </div>
+    </InfoWindow>
+  );
 }
 
-// Mock GPS data for demo (no real GPS backend exists — these are simulated values)
-const generateMockGPS = (): GPSLocation => ({
-  lat: 9.0 + Math.random() * 0.5,
-  lng: 38.7 + Math.random() * 0.5,
-  speed: Math.floor(Math.random() * 120),
-  heading: Math.floor(Math.random() * 360),
-  lastUpdate: new Date(Date.now() - Math.random() * 300000).toLocaleTimeString(),
-});
+/** Draw the selected vehicle's recent path as a polyline. */
+function RouteTrail({ path }: { path: LatLng[] }) {
+  const map = useMap();
+  useEffect(() => {
+    if (!map || path.length < 2 || typeof google === "undefined") return;
+    const line = new google.maps.Polyline({
+      path,
+      strokeColor: freightBrand.primary,
+      strokeOpacity: 0.85,
+      strokeWeight: 4,
+    });
+    line.setMap(map);
+    return () => line.setMap(null);
+  }, [map, path]);
+  return null;
+}
 
 export function TrackingPage() {
-  const [selectedVehicleId, setSelectedVehicleId] = useState<string | null>(null);
-  const [mapCenter] = useState({ lat: 9.0, lng: 38.8 });
+  const { toast } = useToast();
+  const qc = useQueryClient();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [hoverId, setHoverId] = useState<string | null>(null);
+  const [mapsReady, setMapsReady] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editDevice, setEditDevice] = useState<GpsDevice | null>(null);
+  const [form, setForm] = useState({ imei: "", name: "", vehicleId: "" });
 
-  const { data: vehicles = [] } = useQuery({
-    queryKey: QUERY_KEYS.VEHICLES.list(),
-    queryFn: async () => {
-      const res = await vehiclesService.getAll({ limit: 1000 });
-      return res.data || [];
+  const openRegister = () => {
+    setEditDevice(null);
+    setForm({ imei: "", name: "", vehicleId: "" });
+    setModalOpen(true);
+  };
+  const openEdit = (d: GpsDevice) => {
+    setEditDevice(d);
+    setForm({ imei: d.imei, name: d.name ?? "", vehicleId: d.vehicleId ?? "" });
+    setModalOpen(true);
+  };
+
+  // Poll every 10s so the map tracks live movement.
+  const { data: devices = [] } = useQuery({
+    queryKey: ["gps", "devices"],
+    queryFn: async () => (await gpsTrackingService.listDevices()).data ?? [],
+    refetchInterval: 10_000,
+  });
+
+  const { data: vehiclesData } = useQuery({
+    queryKey: ["vehicles", "all"],
+    queryFn: async () => (await vehiclesService.getAll({ limit: 1000 })).data ?? [],
+  });
+  const vehicleOptions = useMemo(
+    () =>
+      (vehiclesData ?? []).map((v) => ({
+        value: v.id,
+        label: `${v.plateNumber} - ${v.manufacturer} ${v.model}`,
+      })),
+    [vehiclesData],
+  );
+
+  const positioned = useMemo(
+    () =>
+      devices
+        .map((d) => ({ d, lat: toNum(d.lastLat), lng: toNum(d.lastLng) }))
+        .filter((x): x is { d: GpsDevice; lat: number; lng: number } => x.lat != null && x.lng != null),
+    [devices],
+  );
+
+  const selected = devices.find((d) => d.id === selectedId) ?? null;
+  const onlineCount = devices.filter((d) => d.online).length;
+
+  // Route history for the selected device's vehicle (chronological trail).
+  const { data: history = [] } = useQuery({
+    queryKey: ["gps", "history", selected?.vehicleId],
+    queryFn: async () => (await gpsTrackingService.history(selected!.vehicleId!, 300)).data ?? [],
+    enabled: Boolean(selected?.vehicleId),
+  });
+  const trail = useMemo(
+    () => [...history].reverse().map((h) => ({ lat: Number(h.lat), lng: Number(h.lng) })),
+    [history],
+  );
+
+  // Teardrop pin colored by state with a white truck glyph inside.
+  const markerIcon = (d: GpsDevice, selectedFlag: boolean): google.maps.Icon | undefined => {
+    // Maps API loads async — Size/Point classes may not exist yet at first render.
+    if (typeof google === "undefined" || !google.maps?.Size || !mapsReady) return undefined;
+    const color = selectedFlag ? freightBrand.primary : d.online ? "#2f80ed" : "#95a5a6";
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="48" viewBox="0 0 40 48">
+      <path d="M20 2C10 2 2 10 2 20c0 12 18 26 18 26s18-14 18-26C38 10 30 2 20 2Z" fill="${color}" stroke="#ffffff" stroke-width="1.5"/>
+      <g transform="translate(8,7)" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M14 18V6a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h1"/>
+        <path d="M15 18H9"/>
+        <path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14"/>
+        <circle cx="7" cy="18" r="2"/>
+        <circle cx="17" cy="18" r="2"/>
+      </g>
+    </svg>`;
+    return {
+      url: `data:image/svg+xml,${encodeURIComponent(svg)}`,
+      scaledSize: new google.maps.Size(40, 48),
+      anchor: new google.maps.Point(20, 48),
+    };
+  };
+
+  const saveMutation = useMutation({
+    mutationFn: () =>
+      editDevice
+        ? gpsTrackingService.update(editDevice.id, {
+            name: form.name.trim() || undefined,
+            vehicleId: form.vehicleId || null,
+          })
+        : gpsTrackingService.register({
+            imei: form.imei.trim(),
+            name: form.name.trim() || undefined,
+            vehicleId: form.vehicleId || null,
+          }),
+    onSuccess: () => {
+      toast({ title: editDevice ? "Tracker updated" : "Tracker registered" });
+      setModalOpen(false);
+      setEditDevice(null);
+      setForm({ imei: "", name: "", vehicleId: "" });
+      void qc.invalidateQueries({ queryKey: ["gps", "devices"] });
+    },
+    onError: (err: unknown) => {
+      const description =
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ?? "Failed";
+      toast({ title: editDevice ? "Update failed" : "Registration failed", description, variant: "destructive" });
     },
   });
 
-  // Generate mock GPS data for each vehicle
-  const vehiclesWithGPS = useMemo(() => {
-    return (vehicles as Vehicle[]).map((v) => ({
-      ...v,
-      gps: generateMockGPS(),
-    }));
-  }, [vehicles]);
+  const assignMutation = useMutation({
+    mutationFn: ({ id, vehicleId }: { id: string; vehicleId: string | null }) =>
+      gpsTrackingService.update(id, { vehicleId }),
+    onSuccess: () => {
+      toast({ title: "Tracker updated" });
+      void qc.invalidateQueries({ queryKey: ["gps", "devices"] });
+    },
+    onError: () => toast({ title: "Update failed", variant: "destructive" }),
+  });
 
-  // For demo: show all vehicles as trackable (or filter by ACTIVE if status data available)
-  const trackableVehicles = useMemo(
-    () => vehiclesWithGPS.slice(0, 10), // Limit to first 10 for demo
-    [vehiclesWithGPS]
-  );
-
-  const selectedVehicle = trackableVehicles.find(v => v.id === selectedVehicleId);
-  const vehicleOptions = useMemo(
-    () => trackableVehicles.map(v => ({ label: v.registrationNumber, value: v.id })),
-    [trackableVehicles]
-  );
-
-  // Map dimensions
-  const mapWidth = 800;
-  const mapHeight = 500;
-  const pixelsPerLat = mapHeight / 0.6;
-  const pixelsPerLng = mapWidth / 0.6;
-
-  const getMapCoords = (lat: number, lng: number) => ({
-    x: ((lng - (mapCenter.lng - 0.3)) * pixelsPerLng),
-    y: ((mapCenter.lat + 0.3 - lat) * pixelsPerLat),
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => gpsTrackingService.remove(id),
+    onSuccess: () => {
+      toast({ title: "Tracker removed" });
+      setSelectedId(null);
+      void qc.invalidateQueries({ queryKey: ["gps", "devices"] });
+    },
+    onError: () => toast({ title: "Delete failed", variant: "destructive" }),
   });
 
   return (
     <Container size="xl" py="xl" px="lg">
-      <Breadcrumbs items={[{ label: 'Fleet' }, { label: 'Vehicle Tracking' }]} />
+      <Breadcrumbs items={[{ label: "Fleet" }, { label: "Vehicle Tracking" }]} />
 
-      <Stack gap="xl">
-        <Group justify="space-between">
-          <div>
-            <Group gap="xs" align="center">
-              <Text fw={700} size="xl">
-                Real-Time Vehicle Tracking
-              </Text>
-              <Badge color="yellow" variant="light">
-                Simulated GPS
-              </Badge>
-            </Group>
-            <Text c="dimmed" size="sm">
-              Monitor vehicle locations, speed, and status
-            </Text>
-          </div>
-        </Group>
+      <Group justify="space-between" mb="xl">
+        <div>
+          <Text fw={700} size="xl">Real-Time Vehicle Tracking</Text>
+          <Text c="dimmed" size="sm">Live GPS positions from GT06 trackers</Text>
+        </div>
+        <Button leftSection={<Plus size={16} />} color="edr-green" onClick={openRegister}>
+          Register tracker
+        </Button>
+      </Group>
 
-        <Grid>
-          {/* Map Section */}
-          <Grid.Col span={{ base: 12, lg: 8 }}>
-            <Card withBorder p="lg">
-              <Card.Section p="md" withBorder>
-                <Group justify="space-between">
-                  <Text fw={500}>Map View</Text>
-                  <Group gap="xs">
-                    <Badge color="edr-green" leftSection={<Radio size={12} />}>
-                      {trackableVehicles.length} Tracked
-                    </Badge>
-                  </Group>
-                </Group>
-              </Card.Section>
-
-              <Card.Section p="md">
-                <Box style={{ overflowX: 'auto', maxWidth: '100%' }}>
-                  <Box
-                    pos="relative"
-                    style={{
-                      width: mapWidth,
-                      height: mapHeight,
-                      backgroundColor: '#f0f8f7',
-                      border: `2px solid ${freightBrand.primary}`,
-                      borderRadius: '8px',
-                      overflow: 'hidden',
-                    }}
+      <Grid>
+        {/* Map */}
+        <Grid.Col span={{ base: 12, lg: 8 }}>
+          <Card withBorder p="lg">
+            <Card.Section p="md" withBorder>
+              <Group justify="space-between">
+                <Text fw={500}>Live Map</Text>
+                <Badge color="edr-green" leftSection={<Radio size={12} />}>
+                  {onlineCount} online · {positioned.length} located
+                </Badge>
+              </Group>
+            </Card.Section>
+            <Card.Section p="md">
+              <Box style={{ height: 500, width: "100%", borderRadius: 8, overflow: "hidden" }}>
+                <APIProvider apiKey={GOOGLE_MAPS_API_KEY}>
+                  <GoogleMap
+                    defaultCenter={DEFAULT_CENTER}
+                    defaultZoom={7}
+                    gestureHandling="greedy"
+                    disableDefaultUI={false}
+                    style={{ width: "100%", height: "100%" }}
                   >
-                  {/* Grid background */}
-                  <svg
-                    width={mapWidth}
-                    height={mapHeight}
-                    style={{ position: 'absolute', top: 0, left: 0 }}
-                  >
-                    {/* Latitude lines */}
-                    {[0, 1, 2, 3, 4, 5, 6].map(i => (
-                      <line
-                        key={`lat-${i}`}
-                        x1={0}
-                        y1={(i / 6) * mapHeight}
-                        x2={mapWidth}
-                        y2={(i / 6) * mapHeight}
-                        stroke="#e0e0e0"
-                        strokeWidth={1}
+                    <ReadyProbe onReady={() => setMapsReady(true)} />
+                    {positioned.map(({ d, lat, lng }) => (
+                      <Marker
+                        key={d.id}
+                        position={{ lat, lng }}
+                        title={`${deviceLabel(d)}\n${lat.toFixed(5)}, ${lng.toFixed(5)}`}
+                        icon={markerIcon(d, d.id === selectedId)}
+                        onClick={() => setSelectedId(d.id)}
+                        onMouseOver={() => setHoverId(d.id)}
                       />
                     ))}
-                    {/* Longitude lines */}
-                    {[0, 1, 2, 3, 4, 5, 6].map(i => (
-                      <line
-                        key={`lng-${i}`}
-                        x1={(i / 6) * mapWidth}
-                        y1={0}
-                        x2={(i / 6) * mapWidth}
-                        y2={mapHeight}
-                        stroke="#e0e0e0"
-                        strokeWidth={1}
-                      />
-                    ))}
-                  </svg>
-
-                  {/* Vehicle markers */}
-                  {trackableVehicles.map((vehicle) => {
-                    const coords = getMapCoords(vehicle.gps.lat, vehicle.gps.lng);
-                    const isSelected = vehicle.id === selectedVehicleId;
-
-                    return (
-                      <Box
-                        key={vehicle.id}
-                        pos="absolute"
-                        style={{
-                          left: coords.x - 15,
-                          top: coords.y - 15,
-                          width: 30,
-                          height: 30,
-                          cursor: 'pointer',
-                          zIndex: isSelected ? 100 : 10,
-                        }}
-                        onClick={() => setSelectedVehicleId(vehicle.id)}
-                        title={vehicle.registrationNumber}
-                      >
-                        <Box
-                          pos="absolute"
-                          inset={0}
-                          style={{
-                            backgroundColor: isSelected ? freightBrand.primary : '#3498db',
-                            borderRadius: '50%',
-                            border: isSelected ? `3px solid ${freightBrand.primaryDark}` : 'none',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            color: 'white',
-                            fontSize: '16px',
-                            boxShadow: isSelected ? `0 0 0 8px ${freightBrand.ring}` : 'none',
-                          }}
-                        >
-                          <Navigation size={16} />
-                        </Box>
-                      </Box>
-                    );
-                  })}
-
-                  {/* Map labels */}
-                  <Box pos="absolute" bottom={8} left={8} style={{ zIndex: 50 }}>
-                    <Text size="xs" c="dimmed">
-                      📍 Addis Ababa, Ethiopia
-                    </Text>
-                  </Box>
-                  </Box>
-                </Box>
-                <Text size="xs" c="dimmed" mt="xs">
-                  Simulated map — coordinates, speed, and heading are demo values, not live GPS.
+                    {(() => {
+                      const h = positioned.find((p) => p.d.id === hoverId);
+                      return h ? (
+                        <HoverInfo device={h.d} lat={h.lat} lng={h.lng} onClose={() => setHoverId(null)} />
+                      ) : null;
+                    })()}
+                    <FitBounds points={positioned.map((p) => ({ lat: p.lat, lng: p.lng }))} />
+                    {selected?.vehicleId && trail.length > 1 && <RouteTrail path={trail} />}
+                  </GoogleMap>
+                </APIProvider>
+              </Box>
+              {positioned.length === 0 && (
+                <Text size="sm" c="dimmed" ta="center" mt="sm">
+                  No located trackers yet — waiting for GPS fixes.
                 </Text>
-              </Card.Section>
-            </Card>
-          </Grid.Col>
-
-          {/* Sidebar */}
-          <Grid.Col span={{ base: 12, lg: 4 }}>
-            <Stack gap="md">
-              {/* Vehicle Selector */}
-              <Card withBorder p="lg">
-                <Stack gap="md">
-                  <Select
-                    label="Track Vehicle"
-                    placeholder="Select a vehicle to track"
-                    data={vehicleOptions}
-                    value={selectedVehicleId}
-                    onChange={setSelectedVehicleId}
-                    searchable
-                  />
-                  {selectedVehicle && (
-                    <Box p="md" style={{ backgroundColor: freightBrand.mutedBg, borderRadius: '8px' }}>
-                      <Stack gap="sm">
-                        <div>
-                          <Text size="sm" c="dimmed">
-                            Registration
-                          </Text>
-                          <Text fw={600}>{selectedVehicle.registrationNumber}</Text>
-                        </div>
-                        <div>
-                          <Text size="sm" c="dimmed">
-                            Vehicle
-                          </Text>
-                          <Text fw={600}>
-                            {selectedVehicle.manufacturer} {selectedVehicle.model}
-                          </Text>
-                        </div>
-                        <div>
-                          <Text size="sm" c="dimmed">
-                            Status
-                          </Text>
-                          <Badge color={selectedVehicle.status === 'ACTIVE' ? 'edr-green' : 'gray'}>
-                            {selectedVehicle.status || 'Unknown'}
-                          </Badge>
-                        </div>
-                      </Stack>
-                    </Box>
-                  )}
-                </Stack>
-              </Card>
-
-              {/* GPS Details */}
-              {selectedVehicle && (
-                <Card withBorder p="lg">
-                  <Stack gap="md">
-                    <Group justify="space-between">
-                      <Text fw={500}>GPS Location</Text>
-                      <Badge color="edr-green" leftSection={<Activity size={12} />}>
-                        Live
-                      </Badge>
-                    </Group>
-
-                    <SimpleGrid cols={2} spacing="sm">
-                      <Box p="sm" style={{ backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
-                        <Text size="xs" c="dimmed">
-                          Latitude
-                        </Text>
-                        <Text fw={600} size="sm">
-                          {selectedVehicle.gps.lat.toFixed(4)}°
-                        </Text>
-                      </Box>
-                      <Box p="sm" style={{ backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
-                        <Text size="xs" c="dimmed">
-                          Longitude
-                        </Text>
-                        <Text fw={600} size="sm">
-                          {selectedVehicle.gps.lng.toFixed(4)}°
-                        </Text>
-                      </Box>
-                      <Box p="sm" style={{ backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
-                        <Text size="xs" c="dimmed">
-                          Speed
-                        </Text>
-                        <Text fw={600} size="sm">
-                          {selectedVehicle.gps.speed} km/h
-                        </Text>
-                      </Box>
-                      <Box p="sm" style={{ backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
-                        <Text size="xs" c="dimmed">
-                          Heading
-                        </Text>
-                        <Text fw={600} size="sm">
-                          {selectedVehicle.gps.heading}°
-                        </Text>
-                      </Box>
-                    </SimpleGrid>
-
-                    <div>
-                      <Text size="xs" c="dimmed">
-                        Last Update
-                      </Text>
-                      <Text fw={500}>{selectedVehicle.gps.lastUpdate}</Text>
-                    </div>
-
-                    <Button color="edr-green" fullWidth leftSection={<MapPin size={16} />}>
-                      View Full History
-                    </Button>
-                  </Stack>
-                </Card>
               )}
+            </Card.Section>
+          </Card>
+        </Grid.Col>
 
-              {/* Tracked Vehicles List */}
+        {/* Sidebar */}
+        <Grid.Col span={{ base: 12, lg: 4 }}>
+          <Stack gap="md">
+            {selected && (
               <Card withBorder p="lg">
                 <Stack gap="md">
-                  <Text fw={500}>Tracked Vehicles ({trackableVehicles.length})</Text>
-                  <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
-                    <Table>
-                      <Table.Tbody>
-                        {trackableVehicles.map(v => (
-                          <Table.Tr
-                            key={v.id}
-                            style={{
-                              cursor: 'pointer',
-                              backgroundColor: v.id === selectedVehicleId ? freightBrand.mutedBg : 'transparent',
-                            }}
-                            onClick={() => setSelectedVehicleId(v.id)}
-                          >
-                            <Table.Td>
-                              <Stack gap={0}>
-                                <Text size="sm" fw={600}>
-                                  {v.registrationNumber}
-                                </Text>
-                                <Text size="xs" c="dimmed">
-                                  {v.gps.speed} km/h
-                                </Text>
-                              </Stack>
-                            </Table.Td>
-                            <Table.Td align="right">
-                              <Badge
-                                color={v.status === 'ACTIVE' ? 'edr-green' : 'gray'}
-                                size="sm"
-                              >
-                                {v.status || 'N/A'}
-                              </Badge>
-                            </Table.Td>
-                          </Table.Tr>
-                        ))}
-                      </Table.Tbody>
-                    </Table>
+                  <Group justify="space-between">
+                    <Text fw={500}>{deviceLabel(selected)}</Text>
+                    <Group gap="xs">
+                      <Badge color={selected.online ? "edr-green" : "gray"} leftSection={<Activity size={12} />}>
+                        {selected.online ? "Live" : "Offline"}
+                      </Badge>
+                      <ActionIcon variant="subtle" color="red" aria-label="Remove tracker" onClick={() => deleteMutation.mutate(selected.id)}>
+                        <Trash2 size={16} />
+                      </ActionIcon>
+                    </Group>
+                  </Group>
+
+                  <SimpleGrid cols={2} spacing="sm">
+                    <StatBox label="Latitude" value={toNum(selected.lastLat)?.toFixed(5) ?? "—"} />
+                    <StatBox label="Longitude" value={toNum(selected.lastLng)?.toFixed(5) ?? "—"} />
+                    <StatBox label="Speed" value={`${toNum(selected.lastSpeed) ?? 0} km/h`} />
+                    <StatBox label="Course" value={`${selected.lastCourse ?? 0}°`} />
+                    <StatBox label="Voltage" value={selected.voltageLevel != null ? `${selected.voltageLevel}/6` : "—"} />
+                    <StatBox label="GSM" value={selected.gsmLevel != null ? `${selected.gsmLevel}/4` : "—"} />
+                  </SimpleGrid>
+
+                  <div>
+                    <Text size="xs" c="dimmed">IMEI</Text>
+                    <Text fw={500} size="sm">{selected.imei}</Text>
                   </div>
+                  <div>
+                    <Text size="xs" c="dimmed">Last fix</Text>
+                    <Text fw={500} size="sm">{fmtTime(selected.lastFixAt)}</Text>
+                  </div>
+                  {selected.vehicleId && (
+                    <Text size="xs" c="dimmed">
+                      Showing last {trail.length} fixes as a route trail.
+                    </Text>
+                  )}
+
+                  <Select
+                    label="Assigned vehicle"
+                    placeholder="Unassigned"
+                    data={vehicleOptions}
+                    value={selected.vehicleId ?? null}
+                    onChange={(v) => assignMutation.mutate({ id: selected.id, vehicleId: v })}
+                    searchable
+                    clearable
+                  />
                 </Stack>
               </Card>
-            </Stack>
-          </Grid.Col>
-        </Grid>
-      </Stack>
+            )}
+
+            <Card withBorder p="lg">
+              <Stack gap="md">
+                <Text fw={500}>Trackers ({devices.length})</Text>
+                <div style={{ maxHeight: 340, overflowY: "auto" }}>
+                  <Table>
+                    <Table.Tbody>
+                      {devices.map((d) => (
+                        <Table.Tr
+                          key={d.id}
+                          style={{ cursor: "pointer", backgroundColor: d.id === selectedId ? freightBrand.mutedBg : "transparent" }}
+                          onClick={() => setSelectedId(d.id)}
+                        >
+                          <Table.Td>
+                            <Stack gap={0}>
+                              <Text size="sm" fw={600}>{deviceLabel(d)}</Text>
+                              <Text size="xs" c="dimmed">{toNum(d.lastSpeed) ?? 0} km/h · {fmtTime(d.lastFixAt)}</Text>
+                            </Stack>
+                          </Table.Td>
+                          <Table.Td align="right">
+                            <Group gap={6} justify="flex-end" wrap="nowrap">
+                              <Badge color={d.online ? "edr-green" : "gray"} size="sm">{d.online ? "Live" : "Offline"}</Badge>
+                              <ActionIcon
+                                variant="subtle"
+                                size="sm"
+                                aria-label="Edit tracker"
+                                onClick={(e) => { e.stopPropagation(); openEdit(d); }}
+                              >
+                                <Pencil size={15} />
+                              </ActionIcon>
+                            </Group>
+                          </Table.Td>
+                        </Table.Tr>
+                      ))}
+                      {devices.length === 0 && (
+                        <Table.Tr>
+                          <Table.Td colSpan={2}>
+                            <Text size="sm" c="dimmed" ta="center" py="md">No trackers registered yet.</Text>
+                          </Table.Td>
+                        </Table.Tr>
+                      )}
+                    </Table.Tbody>
+                  </Table>
+                </div>
+              </Stack>
+            </Card>
+          </Stack>
+        </Grid.Col>
+      </Grid>
+
+      {/* Register / edit modal */}
+      <Modal
+        opened={modalOpen}
+        onClose={() => setModalOpen(false)}
+        title={editDevice ? "Edit GPS tracker" : "Register GPS tracker"}
+        radius="lg"
+        centered
+      >
+        <Stack gap="md">
+          <TextInput
+            label="IMEI"
+            placeholder="15-digit device IMEI"
+            required
+            disabled={Boolean(editDevice)}
+            value={form.imei}
+            onChange={(e) => setForm({ ...form, imei: e.currentTarget.value })}
+          />
+          <TextInput
+            label="Name"
+            placeholder="Optional label"
+            value={form.name}
+            onChange={(e) => setForm({ ...form, name: e.currentTarget.value })}
+          />
+          <Select
+            label="Vehicle"
+            placeholder="Assign to a vehicle (optional)"
+            data={vehicleOptions}
+            value={form.vehicleId || null}
+            onChange={(v) => setForm({ ...form, vehicleId: v ?? "" })}
+            searchable
+            clearable
+          />
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setModalOpen(false)}>Cancel</Button>
+            <Button
+              loading={saveMutation.isPending}
+              disabled={!form.imei.trim()}
+              onClick={() => saveMutation.mutate()}
+            >
+              {editDevice ? "Save" : "Register"}
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </Container>
   );
 }
+
+export default TrackingPage;

apps/edr-freight-web/backoffice/src/pages/fleet/WorkOrdersPage.tsx

@@ -0,0 +1,830 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  Card,
+  Button,
+  Modal,
+  Stack,
+  Group,
+  Select,
+  TextInput,
+  Textarea,
+  NumberInput,
+  Table,
+  Badge,
+  Text,
+  Title,
+  Container,
+  Tabs,
+  Loader,
+  Switch,
+  ActionIcon,
+} from '@mantine/core';
+import { Plus, Trash2, Pencil, Wrench, Package, ShieldCheck } from 'lucide-react';
+import Breadcrumbs from '@/components/ui/Breadcrumbs';
+import { useToast } from '@/hooks/use-toast';
+import {
+  maintenanceDepthService,
+  type WorkOrder,
+  type WorkOrderStatus,
+  type WorkOrderPriority,
+  type Part,
+  type Warranty,
+} from '@/services/maintenance-depth.service';
+import { vehiclesService, type Vehicle as VehicleType } from '@/services/vehicles.service';
+
+const WORK_ORDER_STATUSES: WorkOrderStatus[] = ['OPEN', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED'];
+const WORK_ORDER_PRIORITIES: WorkOrderPriority[] = ['LOW', 'MEDIUM', 'HIGH', 'URGENT'];
+const PART_CATEGORIES = ['TIRE', 'ENGINE', 'BRAKE', 'ELECTRICAL', 'FILTER', 'FLUID', 'OTHER'];
+
+const etb = (x: number | string | null | undefined) =>
+  `ETB ${(Number(x) || 0).toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`;
+
+const statusColor = (status: string) => {
+  const colors: Record<string, string> = {
+    OPEN: 'edr-blue',
+    IN_PROGRESS: 'edr-amber-soft',
+    COMPLETED: 'edr-green',
+    CANCELLED: 'edr-slate',
+  };
+  return colors[status] || 'edr-slate';
+};
+
+const priorityColor = (priority: string) => {
+  const colors: Record<string, string> = {
+    LOW: 'edr-slate',
+    MEDIUM: 'edr-blue',
+    HIGH: 'edr-amber-soft',
+    URGENT: 'edr-red',
+  };
+  return colors[priority] || 'edr-slate';
+};
+
+const emptyWorkOrder = {
+  vehicleId: '',
+  title: '',
+  description: '',
+  status: 'OPEN' as WorkOrderStatus,
+  priority: 'MEDIUM' as WorkOrderPriority,
+  assignedTo: '',
+  laborCost: 0,
+  partsCost: 0,
+};
+
+const emptyPart = {
+  name: '',
+  sku: '',
+  category: 'TIRE',
+  quantityInStock: 0,
+  reorderLevel: 0,
+  unitCost: 0,
+  location: '',
+};
+
+const emptyWarranty = {
+  vehicleId: '',
+  component: '',
+  provider: '',
+  startDate: '',
+  expiryDate: new Date().toISOString().split('T')[0],
+  coverageNotes: '',
+};
+
+export default function WorkOrdersPage() {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  const [activeTab, setActiveTab] = useState<string | null>('work-orders');
+
+  // Work orders
+  const [statusFilter, setStatusFilter] = useState<string | null>(null);
+  const [openWorkOrderModal, setOpenWorkOrderModal] = useState(false);
+  const [workOrderForm, setWorkOrderForm] = useState(emptyWorkOrder);
+
+  // Parts
+  const [lowStockOnly, setLowStockOnly] = useState(false);
+  const [openPartModal, setOpenPartModal] = useState(false);
+  const [editingPartId, setEditingPartId] = useState<string | null>(null);
+  const [partForm, setPartForm] = useState(emptyPart);
+
+  // Warranties
+  const [openWarrantyModal, setOpenWarrantyModal] = useState(false);
+  const [warrantyForm, setWarrantyForm] = useState(emptyWarranty);
+
+  const { data: vehiclesData } = useQuery({
+    queryKey: ['vehicles', 'all-for-maintenance-depth'],
+    queryFn: async () => {
+      const res = await vehiclesService.getAll({ limit: 1000 });
+      return res.data || [];
+    },
+  });
+
+  const vehicleOptions =
+    vehiclesData?.map((v: VehicleType) => ({
+      value: v.id,
+      label: v.plateNumber
+        ? `${v.plateNumber} - ${v.manufacturer} ${v.model}`
+        : v.registrationNumber || v.id,
+    })) || [];
+
+  const vehicleLabel = (vehicleId: string) =>
+    vehicleOptions.find((o) => o.value === vehicleId)?.label || vehicleId;
+
+  // ---- Work orders queries/mutations ----
+  const { data: workOrders, isLoading: workOrdersLoading } = useQuery({
+    queryKey: ['maintenance-work-orders', statusFilter],
+    queryFn: async () => {
+      const res = await maintenanceDepthService.getWorkOrders({
+        status: (statusFilter as WorkOrderStatus) || undefined,
+      });
+      return res.data || [];
+    },
+  });
+  const workOrderList: WorkOrder[] = Array.isArray(workOrders) ? workOrders : [];
+
+  const createWorkOrderMutation = useMutation({
+    mutationFn: async () => {
+      const res = await maintenanceDepthService.createWorkOrder({
+        vehicleId: workOrderForm.vehicleId,
+        title: workOrderForm.title,
+        description: workOrderForm.description || undefined,
+        status: workOrderForm.status,
+        priority: workOrderForm.priority,
+        assignedTo: workOrderForm.assignedTo || undefined,
+        laborCost: Number(workOrderForm.laborCost) || undefined,
+        partsCost: Number(workOrderForm.partsCost) || undefined,
+      });
+      return res.data;
+    },
+    onSuccess: () => {
+      toast({ title: 'Work order created' });
+      queryClient.invalidateQueries({ queryKey: ['maintenance-work-orders'] });
+      setOpenWorkOrderModal(false);
+      setWorkOrderForm(emptyWorkOrder);
+    },
+    onError: (err: any) => {
+      toast({
+        title: 'Error',
+        description: err?.response?.data?.message ?? 'Failed',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const deleteWorkOrderMutation = useMutation({
+    mutationFn: async (id: string) => {
+      await maintenanceDepthService.deleteWorkOrder(id);
+    },
+    onSuccess: () => {
+      toast({ title: 'Work order deleted' });
+      queryClient.invalidateQueries({ queryKey: ['maintenance-work-orders'] });
+    },
+    onError: (err: any) => {
+      toast({
+        title: 'Error',
+        description: err?.response?.data?.message ?? 'Failed',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  // ---- Parts queries/mutations ----
+  const { data: parts, isLoading: partsLoading } = useQuery({
+    queryKey: ['maintenance-parts', lowStockOnly],
+    queryFn: async () => {
+      const res = await maintenanceDepthService.getParts({ lowStock: lowStockOnly || undefined });
+      return res.data || [];
+    },
+  });
+  const partList: Part[] = Array.isArray(parts) ? parts : [];
+
+  const savePartMutation = useMutation({
+    mutationFn: async () => {
+      const payload = {
+        name: partForm.name,
+        sku: partForm.sku || undefined,
+        category: partForm.category || undefined,
+        quantityInStock: Number(partForm.quantityInStock) || 0,
+        reorderLevel: Number(partForm.reorderLevel) || 0,
+        unitCost: Number(partForm.unitCost) || undefined,
+        location: partForm.location || undefined,
+      };
+      if (editingPartId) {
+        const res = await maintenanceDepthService.updatePart(editingPartId, payload);
+        return res.data;
+      }
+      const res = await maintenanceDepthService.createPart(payload);
+      return res.data;
+    },
+    onSuccess: () => {
+      toast({ title: editingPartId ? 'Part updated' : 'Part created' });
+      queryClient.invalidateQueries({ queryKey: ['maintenance-parts'] });
+      setOpenPartModal(false);
+      setPartForm(emptyPart);
+      setEditingPartId(null);
+    },
+    onError: (err: any) => {
+      toast({
+        title: 'Error',
+        description: err?.response?.data?.message ?? 'Failed',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const deletePartMutation = useMutation({
+    mutationFn: async (id: string) => {
+      await maintenanceDepthService.deletePart(id);
+    },
+    onSuccess: () => {
+      toast({ title: 'Part deleted' });
+      queryClient.invalidateQueries({ queryKey: ['maintenance-parts'] });
+    },
+    onError: (err: any) => {
+      toast({
+        title: 'Error',
+        description: err?.response?.data?.message ?? 'Failed',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  // ---- Warranties queries/mutations ----
+  const { data: warranties, isLoading: warrantiesLoading } = useQuery({
+    queryKey: ['maintenance-warranties'],
+    queryFn: async () => {
+      const res = await maintenanceDepthService.getWarranties();
+      return res.data || [];
+    },
+  });
+  const warrantyList: Warranty[] = Array.isArray(warranties) ? warranties : [];
+
+  const createWarrantyMutation = useMutation({
+    mutationFn: async () => {
+      const res = await maintenanceDepthService.createWarranty({
+        vehicleId: warrantyForm.vehicleId,
+        component: warrantyForm.component,
+        provider: warrantyForm.provider || undefined,
+        startDate: warrantyForm.startDate || undefined,
+        expiryDate: warrantyForm.expiryDate,
+        coverageNotes: warrantyForm.coverageNotes || undefined,
+      });
+      return res.data;
+    },
+    onSuccess: () => {
+      toast({ title: 'Warranty created' });
+      queryClient.invalidateQueries({ queryKey: ['maintenance-warranties'] });
+      setOpenWarrantyModal(false);
+      setWarrantyForm(emptyWarranty);
+    },
+    onError: (err: any) => {
+      toast({
+        title: 'Error',
+        description: err?.response?.data?.message ?? 'Failed',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const deleteWarrantyMutation = useMutation({
+    mutationFn: async (id: string) => {
+      await maintenanceDepthService.deleteWarranty(id);
+    },
+    onSuccess: () => {
+      toast({ title: 'Warranty deleted' });
+      queryClient.invalidateQueries({ queryKey: ['maintenance-warranties'] });
+    },
+    onError: (err: any) => {
+      toast({
+        title: 'Error',
+        description: err?.response?.data?.message ?? 'Failed',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const openPartForEdit = (part: Part) => {
+    setEditingPartId(part.id);
+    setPartForm({
+      name: part.name,
+      sku: part.sku || '',
+      category: part.category || 'OTHER',
+      quantityInStock: part.quantityInStock,
+      reorderLevel: part.reorderLevel,
+      unitCost: Number(part.unitCost) || 0,
+      location: part.location || '',
+    });
+    setOpenPartModal(true);
+  };
+
+  const openPartForCreate = () => {
+    setEditingPartId(null);
+    setPartForm(emptyPart);
+    setOpenPartModal(true);
+  };
+
+  return (
+    <Container size="xl" py="xl" px="lg">
+      <Breadcrumbs items={[{ label: 'Fleet' }, { label: 'Maintenance' }, { label: 'Work Orders' }]} />
+
+      <Group justify="space-between" mb="lg">
+        <Title order={1}>Work Orders &amp; Parts</Title>
+      </Group>
+
+      <Tabs value={activeTab} onChange={setActiveTab}>
+        <Tabs.List>
+          <Tabs.Tab value="work-orders" leftSection={<Wrench size={14} />}>
+            Work Orders
+          </Tabs.Tab>
+          <Tabs.Tab value="parts" leftSection={<Package size={14} />}>
+            Parts / Tires
+          </Tabs.Tab>
+          <Tabs.Tab value="warranties" leftSection={<ShieldCheck size={14} />}>
+            Warranties
+          </Tabs.Tab>
+        </Tabs.List>
+
+        {/* ---- Work Orders tab ---- */}
+        <Tabs.Panel value="work-orders" pt="lg">
+          <Group justify="space-between" mb="md">
+            <Select
+              placeholder="All statuses"
+              data={WORK_ORDER_STATUSES}
+              value={statusFilter}
+              onChange={setStatusFilter}
+              clearable
+              w={220}
+            />
+            <Button
+              onClick={() => setOpenWorkOrderModal(true)}
+              color="edr-green"
+              leftSection={<Plus size={16} />}
+            >
+              New Work Order
+            </Button>
+          </Group>
+
+          <Card withBorder>
+            {workOrdersLoading ? (
+              <Group justify="center" p="xl">
+                <Loader />
+              </Group>
+            ) : workOrderList.length > 0 ? (
+              <Table.ScrollContainer minWidth={800}>
+                <Table striped highlightOnHover>
+                  <Table.Thead>
+                    <Table.Tr>
+                      <Table.Th>Title</Table.Th>
+                      <Table.Th>Vehicle</Table.Th>
+                      <Table.Th>Priority</Table.Th>
+                      <Table.Th>Status</Table.Th>
+                      <Table.Th>Assigned</Table.Th>
+                      <Table.Th>Labor</Table.Th>
+                      <Table.Th>Parts</Table.Th>
+                      <Table.Th>Opened</Table.Th>
+                      <Table.Th />
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {workOrderList.map((wo) => (
+                      <Table.Tr key={wo.id}>
+                        <Table.Td>{wo.title}</Table.Td>
+                        <Table.Td>{vehicleLabel(wo.vehicleId)}</Table.Td>
+                        <Table.Td>
+                          <Badge color={priorityColor(wo.priority)}>{wo.priority}</Badge>
+                        </Table.Td>
+                        <Table.Td>
+                          <Badge color={statusColor(wo.status)}>{wo.status}</Badge>
+                        </Table.Td>
+                        <Table.Td>{wo.assignedTo || '—'}</Table.Td>
+                        <Table.Td>{etb(wo.laborCost)}</Table.Td>
+                        <Table.Td>{etb(wo.partsCost)}</Table.Td>
+                        <Table.Td>{new Date(wo.openedAt).toLocaleDateString()}</Table.Td>
+                        <Table.Td>
+                          <ActionIcon
+                            variant="subtle"
+                            color="edr-red"
+                            onClick={() => deleteWorkOrderMutation.mutate(wo.id)}
+                            aria-label="Delete work order"
+                          >
+                            <Trash2 size={16} />
+                          </ActionIcon>
+                        </Table.Td>
+                      </Table.Tr>
+                    ))}
+                  </Table.Tbody>
+                </Table>
+              </Table.ScrollContainer>
+            ) : (
+              <Text c="dimmed" ta="center" p="xl">
+                No work orders yet
+              </Text>
+            )}
+          </Card>
+        </Tabs.Panel>
+
+        {/* ---- Parts / Tires tab ---- */}
+        <Tabs.Panel value="parts" pt="lg">
+          <Group justify="space-between" mb="md">
+            <Switch
+              label="Low stock only"
+              checked={lowStockOnly}
+              onChange={(e) => setLowStockOnly(e.currentTarget.checked)}
+            />
+            <Button onClick={openPartForCreate} color="edr-green" leftSection={<Plus size={16} />}>
+              New Part
+            </Button>
+          </Group>
+
+          <Card withBorder>
+            {partsLoading ? (
+              <Group justify="center" p="xl">
+                <Loader />
+              </Group>
+            ) : partList.length > 0 ? (
+              <Table.ScrollContainer minWidth={800}>
+                <Table striped highlightOnHover>
+                  <Table.Thead>
+                    <Table.Tr>
+                      <Table.Th>Name</Table.Th>
+                      <Table.Th>SKU</Table.Th>
+                      <Table.Th>Category</Table.Th>
+                      <Table.Th>In Stock</Table.Th>
+                      <Table.Th>Reorder Level</Table.Th>
+                      <Table.Th>Unit Cost</Table.Th>
+                      <Table.Th>Location</Table.Th>
+                      <Table.Th />
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {partList.map((p) => (
+                      <Table.Tr key={p.id}>
+                        <Table.Td>{p.name}</Table.Td>
+                        <Table.Td>{p.sku || '—'}</Table.Td>
+                        <Table.Td>
+                          {p.category ? <Badge variant="light">{p.category}</Badge> : '—'}
+                        </Table.Td>
+                        <Table.Td>
+                          <Group gap="xs">
+                            {p.quantityInStock}
+                            {p.quantityInStock <= p.reorderLevel && (
+                              <Badge color="edr-red" size="sm">
+                                Low stock
+                              </Badge>
+                            )}
+                          </Group>
+                        </Table.Td>
+                        <Table.Td>{p.reorderLevel}</Table.Td>
+                        <Table.Td>{etb(p.unitCost)}</Table.Td>
+                        <Table.Td>{p.location || '—'}</Table.Td>
+                        <Table.Td>
+                          <Group gap={4} wrap="nowrap">
+                            <ActionIcon
+                              variant="subtle"
+                              onClick={() => openPartForEdit(p)}
+                              aria-label="Adjust part"
+                            >
+                              <Pencil size={16} />
+                            </ActionIcon>
+                            <ActionIcon
+                              variant="subtle"
+                              color="edr-red"
+                              onClick={() => deletePartMutation.mutate(p.id)}
+                              aria-label="Delete part"
+                            >
+                              <Trash2 size={16} />
+                            </ActionIcon>
+                          </Group>
+                        </Table.Td>
+                      </Table.Tr>
+                    ))}
+                  </Table.Tbody>
+                </Table>
+              </Table.ScrollContainer>
+            ) : (
+              <Text c="dimmed" ta="center" p="xl">
+                No parts in inventory
+              </Text>
+            )}
+          </Card>
+        </Tabs.Panel>
+
+        {/* ---- Warranties tab ---- */}
+        <Tabs.Panel value="warranties" pt="lg">
+          <Group justify="flex-end" mb="md">
+            <Button
+              onClick={() => setOpenWarrantyModal(true)}
+              color="edr-green"
+              leftSection={<Plus size={16} />}
+            >
+              New Warranty
+            </Button>
+          </Group>
+
+          <Card withBorder>
+            {warrantiesLoading ? (
+              <Group justify="center" p="xl">
+                <Loader />
+              </Group>
+            ) : warrantyList.length > 0 ? (
+              <Table.ScrollContainer minWidth={700}>
+                <Table striped highlightOnHover>
+                  <Table.Thead>
+                    <Table.Tr>
+                      <Table.Th>Component</Table.Th>
+                      <Table.Th>Vehicle</Table.Th>
+                      <Table.Th>Provider</Table.Th>
+                      <Table.Th>Start</Table.Th>
+                      <Table.Th>Expiry</Table.Th>
+                      <Table.Th />
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {warrantyList.map((w) => {
+                      const expired = new Date(w.expiryDate) < new Date();
+                      return (
+                        <Table.Tr key={w.id}>
+                          <Table.Td>{w.component}</Table.Td>
+                          <Table.Td>{vehicleLabel(w.vehicleId)}</Table.Td>
+                          <Table.Td>{w.provider || '—'}</Table.Td>
+                          <Table.Td>
+                            {w.startDate ? new Date(w.startDate).toLocaleDateString() : '—'}
+                          </Table.Td>
+                          <Table.Td>
+                            <Group gap="xs">
+                              {new Date(w.expiryDate).toLocaleDateString()}
+                              <Badge color={expired ? 'edr-red' : 'edr-green'} size="sm">
+                                {expired ? 'Expired' : 'Active'}
+                              </Badge>
+                            </Group>
+                          </Table.Td>
+                          <Table.Td>
+                            <ActionIcon
+                              variant="subtle"
+                              color="edr-red"
+                              onClick={() => deleteWarrantyMutation.mutate(w.id)}
+                              aria-label="Delete warranty"
+                            >
+                              <Trash2 size={16} />
+                            </ActionIcon>
+                          </Table.Td>
+                        </Table.Tr>
+                      );
+                    })}
+                  </Table.Tbody>
+                </Table>
+              </Table.ScrollContainer>
+            ) : (
+              <Text c="dimmed" ta="center" p="xl">
+                No warranties recorded
+              </Text>
+            )}
+          </Card>
+        </Tabs.Panel>
+      </Tabs>
+
+      {/* ---- Work Order modal ---- */}
+      <Modal
+        opened={openWorkOrderModal}
+        onClose={() => setOpenWorkOrderModal(false)}
+        title="New Work Order"
+        size="md"
+      >
+        <Stack gap="md">
+          <Select
+            label="Vehicle"
+            placeholder="Pick a vehicle"
+            data={vehicleOptions}
+            value={workOrderForm.vehicleId || null}
+            onChange={(v) => setWorkOrderForm({ ...workOrderForm, vehicleId: v || '' })}
+            searchable
+            required
+          />
+          <TextInput
+            label="Title"
+            placeholder="e.g., Replace front brake pads"
+            value={workOrderForm.title}
+            onChange={(e) => setWorkOrderForm({ ...workOrderForm, title: e.currentTarget.value })}
+            required
+          />
+          <Textarea
+            label="Description"
+            placeholder="Details of the work needed"
+            value={workOrderForm.description}
+            onChange={(e) =>
+              setWorkOrderForm({ ...workOrderForm, description: e.currentTarget.value })
+            }
+          />
+          <Group grow>
+            <Select
+              label="Priority"
+              data={WORK_ORDER_PRIORITIES}
+              value={workOrderForm.priority}
+              onChange={(v) =>
+                setWorkOrderForm({ ...workOrderForm, priority: (v as WorkOrderPriority) || 'MEDIUM' })
+              }
+            />
+            <Select
+              label="Status"
+              data={WORK_ORDER_STATUSES}
+              value={workOrderForm.status}
+              onChange={(v) =>
+                setWorkOrderForm({ ...workOrderForm, status: (v as WorkOrderStatus) || 'OPEN' })
+              }
+            />
+          </Group>
+          <TextInput
+            label="Assigned To"
+            placeholder="e.g., Mechanic name"
+            value={workOrderForm.assignedTo}
+            onChange={(e) =>
+              setWorkOrderForm({ ...workOrderForm, assignedTo: e.currentTarget.value })
+            }
+          />
+          <Group grow>
+            <NumberInput
+              label="Labor Cost (ETB)"
+              min={0}
+              value={workOrderForm.laborCost}
+              onChange={(v) => setWorkOrderForm({ ...workOrderForm, laborCost: Number(v) || 0 })}
+            />
+            <NumberInput
+              label="Parts Cost (ETB)"
+              min={0}
+              value={workOrderForm.partsCost}
+              onChange={(v) => setWorkOrderForm({ ...workOrderForm, partsCost: Number(v) || 0 })}
+            />
+          </Group>
+          <Group justify="flex-end">
+            <Button variant="light" onClick={() => setOpenWorkOrderModal(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => createWorkOrderMutation.mutate()}
+              loading={createWorkOrderMutation.isPending}
+              disabled={!workOrderForm.vehicleId || !workOrderForm.title}
+            >
+              Create
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* ---- Part modal ---- */}
+      <Modal
+        opened={openPartModal}
+        onClose={() => {
+          setOpenPartModal(false);
+          setEditingPartId(null);
+        }}
+        title={editingPartId ? 'Adjust Part' : 'New Part'}
+        size="md"
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Name"
+            placeholder="e.g., 315/80R22.5 Tire"
+            value={partForm.name}
+            onChange={(e) => setPartForm({ ...partForm, name: e.currentTarget.value })}
+            required
+          />
+          <Group grow>
+            <TextInput
+              label="SKU"
+              placeholder="Optional"
+              value={partForm.sku}
+              onChange={(e) => setPartForm({ ...partForm, sku: e.currentTarget.value })}
+            />
+            <Select
+              label="Category"
+              data={PART_CATEGORIES}
+              value={partForm.category}
+              onChange={(v) => setPartForm({ ...partForm, category: v || 'OTHER' })}
+            />
+          </Group>
+          <Group grow>
+            <NumberInput
+              label="Quantity in Stock"
+              min={0}
+              value={partForm.quantityInStock}
+              onChange={(v) => setPartForm({ ...partForm, quantityInStock: Number(v) || 0 })}
+            />
+            <NumberInput
+              label="Reorder Level"
+              min={0}
+              value={partForm.reorderLevel}
+              onChange={(v) => setPartForm({ ...partForm, reorderLevel: Number(v) || 0 })}
+            />
+          </Group>
+          <Group grow>
+            <NumberInput
+              label="Unit Cost (ETB)"
+              min={0}
+              value={partForm.unitCost}
+              onChange={(v) => setPartForm({ ...partForm, unitCost: Number(v) || 0 })}
+            />
+            <TextInput
+              label="Location"
+              placeholder="e.g., Shelf A3"
+              value={partForm.location}
+              onChange={(e) => setPartForm({ ...partForm, location: e.currentTarget.value })}
+            />
+          </Group>
+          <Group justify="flex-end">
+            <Button
+              variant="light"
+              onClick={() => {
+                setOpenPartModal(false);
+                setEditingPartId(null);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={() => savePartMutation.mutate()}
+              loading={savePartMutation.isPending}
+              disabled={!partForm.name}
+            >
+              {editingPartId ? 'Save' : 'Create'}
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* ---- Warranty modal ---- */}
+      <Modal
+        opened={openWarrantyModal}
+        onClose={() => setOpenWarrantyModal(false)}
+        title="New Warranty"
+        size="md"
+      >
+        <Stack gap="md">
+          <Select
+            label="Vehicle"
+            placeholder="Pick a vehicle"
+            data={vehicleOptions}
+            value={warrantyForm.vehicleId || null}
+            onChange={(v) => setWarrantyForm({ ...warrantyForm, vehicleId: v || '' })}
+            searchable
+            required
+          />
+          <TextInput
+            label="Component"
+            placeholder="e.g., Engine, Transmission"
+            value={warrantyForm.component}
+            onChange={(e) => setWarrantyForm({ ...warrantyForm, component: e.currentTarget.value })}
+            required
+          />
+          <TextInput
+            label="Provider"
+            placeholder="e.g., Manufacturer name"
+            value={warrantyForm.provider}
+            onChange={(e) => setWarrantyForm({ ...warrantyForm, provider: e.currentTarget.value })}
+          />
+          <Group grow>
+            <TextInput
+              label="Start Date"
+              type="date"
+              value={warrantyForm.startDate}
+              onChange={(e) =>
+                setWarrantyForm({ ...warrantyForm, startDate: e.currentTarget.value })
+              }
+            />
+            <TextInput
+              label="Expiry Date"
+              type="date"
+              value={warrantyForm.expiryDate}
+              onChange={(e) =>
+                setWarrantyForm({ ...warrantyForm, expiryDate: e.currentTarget.value })
+              }
+              required
+            />
+          </Group>
+          <Textarea
+            label="Coverage Notes"
+            placeholder="What the warranty covers"
+            value={warrantyForm.coverageNotes}
+            onChange={(e) =>
+              setWarrantyForm({ ...warrantyForm, coverageNotes: e.currentTarget.value })
+            }
+          />
+          <Group justify="flex-end">
+            <Button variant="light" onClick={() => setOpenWarrantyModal(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => createWarrantyMutation.mutate()}
+              loading={createWarrantyMutation.isPending}
+              disabled={!warrantyForm.vehicleId || !warrantyForm.component || !warrantyForm.expiryDate}
+            >
+              Create
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Container>
+  );
+}

apps/edr-freight-web/backoffice/src/pages/fleet/config/vehicles.ts

@@ -29,6 +29,11 @@ const VEHICLE_AVAILABILITY_OPTIONS = [
   { label: "Busy", value: "BUSY" },
 ];
 
+const CURRENCY_OPTIONS = [
+  { label: "ETB", value: "ETB" },
+  { label: "USD", value: "USD" },
+];
+
 export const vehiclesConfig: FleetResourceConfig = {
   slug: "vehicles",
   label: "Vehicles",
@@ -84,12 +89,14 @@ export const vehiclesConfig: FleetResourceConfig = {
     { name: "locationId", label: "Location", type: "select", dynamicOptions: "yards" },
     { name: "estimatedDistanceKm", label: "Estimated Distance (KM)", type: "number" },
     { name: "actualDistanceKm", label: "Actual Distance (KM)", type: "number" },
+    { name: "pricePerKm", label: "Price per KM", type: "number" },
+    { name: "currency", label: "Currency", type: "radio", options: CURRENCY_OPTIONS },
     { name: "status", label: "Status", type: "select", required: true, options: VEHICLE_STATUS_OPTIONS },
     { name: "availability", label: "Availability", type: "select", required: true, options: VEHICLE_AVAILABILITY_OPTIONS },
     { name: "description", label: "Description", type: "textarea" },
   ],
   emptyValues: {
-    code: "",
+    code: "03-ET",
     plateNumber: "",
     powerPlateNo: "",
     trailerPlateNo: "",
@@ -102,6 +109,8 @@ export const vehiclesConfig: FleetResourceConfig = {
     locationId: null,
     estimatedDistanceKm: "",
     actualDistanceKm: "",
+    pricePerKm: "",
+    currency: "ETB",
     status: "ACTIVE",
     availability: "FREE",
     description: "",

apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx

@@ -20,7 +20,7 @@ import type { ColumnDef } from "@edr/ui-common";
 import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
 import {
   ActionIcon,
-  Autocomplete,
+  Alert,
   Badge,
   Box,
   Button,
@@ -54,7 +54,6 @@ import {
 } from "@/services/first-mile.service";
 import { bookingsService } from "@/services/bookings.service";
 import { vehiclesService } from "@/services/vehicles.service";
-import { ratesService } from "@/services/rates.service";
 import type { BookingDetail } from "@/types/booking";
 
 const formatPrice = (amount: number | string | null | undefined, currency = "ETB") =>
@@ -191,7 +190,24 @@ const isPostPaymentPending = (r: FirstMileRecord) =>
 
 // Map API record → display fields used in modals and trip slip
 const bookingRef = (r: FirstMileRecord) => r.booking?.reference ?? r.bookingId;
-const currencyOf = (r: FirstMileRecord) => r.booking?.paymentCurrency ?? "ETB";
+const currencyOf = (r: FirstMileRecord) =>
+  r.vehicle?.currency ??
+  r.vehicleAssignments?.[0]?.vehicle?.currency ??
+  r.booking?.paymentCurrency ??
+  "ETB";
+
+type FmAssignment = NonNullable<FirstMileRecord["vehicleAssignments"]>[number];
+const truckShort = (a: FmAssignment) =>
+  a.vehicle ? [a.vehicle.code, a.vehicle.plateNumber].filter(Boolean).join(" · ") : a.vehicleId;
+/** Billing problems on the trucks that have distance: zero price/km, mixed currency. */
+const billingIssues = (r: FirstMileRecord) => {
+  const trucks = (r.vehicleAssignments ?? []).filter((a) => Number(a.distanceKm) > 0);
+  const zeroPrice = trucks.filter((a) => !(Number(a.vehicle?.pricePerKm) > 0)).map(truckShort);
+  const currencies = [
+    ...new Set(trucks.map((a) => a.vehicle?.currency).filter((c): c is string => Boolean(c))),
+  ];
+  return { zeroPrice, mixedCurrency: currencies.length > 1, currencies };
+};
 const customerName = (r: FirstMileRecord) => r.booking?.company?.name ?? "—";
 const pickupLocation = (r: FirstMileRecord) => r.booking?.firstMilePickupAddress ?? "—";
 const cargoDesc = (r: FirstMileRecord) => {
@@ -480,6 +496,8 @@ const FirstMilePage = () => {
   const [distanceOpen, setDistanceOpen] = useState(false);
   // Per-vehicle actual distance, keyed by vehicleId.
   const [distanceRows, setDistanceRows] = useState<Record<string, string>>({});
+  // Record pending invoice-generation confirmation (shows a summary first).
+  const [invoiceConfirm, setInvoiceConfirm] = useState<FirstMileRecord | null>(null);
   const [warehouseReceiveOpen, setWarehouseReceiveOpen] = useState(false);
   const [warehouseReceiveRecord, setWarehouseReceiveRecord] = useState<FirstMileRecord | null>(null);
 
@@ -500,14 +518,6 @@ const FirstMilePage = () => {
     },
   });
 
-  const { data: ratesData } = useQuery({
-    queryKey: ["rates", "FIRST_MILE"],
-    queryFn: async () => {
-      const res = await ratesService.getByType("FIRST_MILE");
-      return res.data;
-    },
-  });
-
   const { data: paidBookingsData, isLoading: bookingsLoading } = useQuery({
     queryKey: QUERY_KEYS.BOOKINGS.list({ status: "PAID" }),
     queryFn: () => bookingsService.list({ status: "PAID", pageSize: 100 }),
@@ -572,10 +582,17 @@ const FirstMilePage = () => {
       distances: Array<{ vehicleId: string; distanceKm: number }>;
       remainingPayment?: number;
     }) => firstMileService.setDistances(id, distances, remainingPayment),
-    onSuccess: () => {
+    onSuccess: (res) => {
       void qc.invalidateQueries({ queryKey: QUERY_KEYS.FIRST_MILE.list() });
       toast({ title: "Distances saved", description: activeRecord ? bookingRef(activeRecord) : undefined });
+      const updated = res?.data as FirstMileRecord | undefined;
       closeDistance();
+      // Every truck has a distance and it isn't billed yet → offer to invoice now.
+      const trucks = updated?.vehicleAssignments ?? [];
+      const allFilled = trucks.length > 0 && trucks.every((a) => Number(a.distanceKm) > 0);
+      if (updated && allFilled && !updated.invoice) {
+        setInvoiceConfirm(updated);
+      }
     },
     onError: () => {
       toast({ title: "Update failed", variant: "destructive" });
@@ -783,18 +800,9 @@ const FirstMilePage = () => {
       return;
     }
 
-    const total = distances.reduce((s, d) => s + d.distanceKm, 0);
-    let remainingPayment: number | undefined;
-    if (ratesData?.data) {
-      const firstMileRate = ratesData.data.find(
-        (r) => r.rateType === "FIRST_MILE" && (r.status === "LIVE" || r.status === "DRAFT")
-      );
-      if (firstMileRate) {
-        remainingPayment = total * parseFloat(firstMileRate.rateValue);
-      }
-    }
-
-    setDistancesMutation.mutate({ id: activeId, distances, remainingPayment });
+    // Amount is computed server-side per truck (distance × the vehicle's
+    // price/km, in the vehicle's currency) — no flat FIRST_MILE rate.
+    setDistancesMutation.mutate({ id: activeId, distances });
   };
 
   const matchesFilter = (r: FirstMileRecord) => {
@@ -849,6 +857,33 @@ const FirstMilePage = () => {
     return filteredRecords.slice(start, start + pagination.pageSize);
   }, [filteredRecords, pagination]);
 
+  // Billing problems on the leg pending invoice confirmation.
+  const confirmIssues = invoiceConfirm
+    ? billingIssues(invoiceConfirm)
+    : { zeroPrice: [] as string[], mixedCurrency: false, currencies: [] as string[] };
+
+  // Guard invoice generation: block mixed currency, warn (but proceed) on trucks
+  // priced at 0/km.
+  const handleGenerateInvoice = (r: FirstMileRecord) => {
+    const { zeroPrice, mixedCurrency, currencies } = billingIssues(r);
+    if (mixedCurrency) {
+      toast({
+        title: "Mixed truck currencies",
+        description: `Trucks use ${currencies.join(", ")}. Assign trucks that share one currency.`,
+        variant: "destructive",
+      });
+      return;
+    }
+    if (zeroPrice.length) {
+      toast({
+        title: "Truck has no price/km",
+        description: `${zeroPrice.join(", ")} will bill 0 — set Price per KM on the vehicle.`,
+        variant: "destructive",
+      });
+    }
+    generateInvoiceMutation.mutate(r.id);
+  };
+
   const openAssign = (id: string | null) => {
     const resolved = id ?? filteredRecords.find((r) => !isAssigned(r))?.id ?? null;
     const rec = records.find((r) => r.id === resolved);
@@ -1173,7 +1208,7 @@ const FirstMilePage = () => {
                       !(row.original.exactKm != null && row.original.exactKm > 0) ||
                       Boolean(row.original.invoice)
                     }
-                    onClick={() => generateInvoiceMutation.mutate(row.original.id)}
+                    onClick={() => handleGenerateInvoice(row.original)}
                   >
                     {row.original.invoice ? "Invoice generated" : "Generate Invoice"}
                   </Menu.Item>
@@ -1337,21 +1372,29 @@ const FirstMilePage = () => {
                   clearable
                   disabled={assignVehicleOptions.length === 0}
                 />
-                <Autocomplete
+                <Select
                   style={{ flex: 1 }}
                   label={i === 0 ? "Container no." : undefined}
-                  placeholder="Container number"
-                  data={containerOptions.filter(
-                    (n) =>
-                      n === row.containerNumber ||
-                      !vehicleRows.some((r, idx) => idx !== i && r.containerNumber === n),
-                  )}
-                  value={row.containerNumber}
+                  placeholder={containerOptions.length ? "Select container" : "No container numbers"}
+                  data={[
+                    ...containerOptions.filter(
+                      (n) =>
+                        n === row.containerNumber ||
+                        !vehicleRows.some((r, idx) => idx !== i && r.containerNumber === n),
+                    ),
+                    // keep a manual/legacy value selectable even if not in the booking
+                    ...(row.containerNumber && !containerOptions.includes(row.containerNumber)
+                      ? [row.containerNumber]
+                      : []),
+                  ]}
+                  value={row.containerNumber || null}
                   onChange={(value) =>
                     setVehicleRows((prev) =>
-                      prev.map((x, idx) => (idx === i ? { ...x, containerNumber: value } : x)),
+                      prev.map((x, idx) => (idx === i ? { ...x, containerNumber: value ?? "" } : x)),
                     )
                   }
+                  searchable
+                  clearable
                 />
                 {vehicleRows.length > 1 && (
                   <ActionIcon
@@ -1740,6 +1783,77 @@ const FirstMilePage = () => {
           </Group>
         </Stack>
       </Modal>
+
+      {/* Generate Invoice — confirmation summary */}
+      <Modal
+        opened={Boolean(invoiceConfirm)}
+        onClose={() => setInvoiceConfirm(null)}
+        title={<Text fw={600}>Generate Invoice</Text>}
+        size="md"
+        radius="lg"
+        centered
+      >
+        {invoiceConfirm && (
+          <Stack gap="md">
+            <Group justify="space-between">
+              <Text fw={600} size="sm">{bookingRef(invoiceConfirm)}</Text>
+              <Text size="sm" c="dimmed">{customerName(invoiceConfirm)}</Text>
+            </Group>
+            <Card withBorder padding="sm" radius="md" bg="var(--mantine-color-gray-0)">
+              <Stack gap={6}>
+                {(invoiceConfirm.vehicleAssignments ?? []).map((a) => {
+                  const v = a.vehicle;
+                  const label = v ? [v.code, v.plateNumber].filter(Boolean).join(" · ") : a.vehicleId;
+                  return (
+                    <Group key={a.id} justify="space-between" wrap="nowrap">
+                      <Text size="sm">
+                        {label}
+                        {a.containerNumber ? ` · ${a.containerNumber}` : ""}
+                      </Text>
+                      <Text size="sm">{a.distanceKm != null ? `${a.distanceKm} km` : "—"}</Text>
+                    </Group>
+                  );
+                })}
+              </Stack>
+            </Card>
+            <Group justify="space-between">
+              <Text size="sm" c="dimmed">Total distance</Text>
+              <Text size="sm" fw={500}>{invoiceConfirm.exactKm ?? 0} km</Text>
+            </Group>
+            <Group justify="space-between">
+              <Text fw={600}>Invoice amount</Text>
+              <Text fw={700}>{formatPrice(invoiceConfirm.remainingPayment, currencyOf(invoiceConfirm))}</Text>
+            </Group>
+            {confirmIssues.mixedCurrency && (
+              <Alert color="red" variant="light" title="Mixed truck currencies">
+                Trucks use {confirmIssues.currencies.join(", ")}. Assign trucks that share one currency before invoicing.
+              </Alert>
+            )}
+            {confirmIssues.zeroPrice.length > 0 && (
+              <Alert color="yellow" variant="light" title="Truck has no price/km">
+                {confirmIssues.zeroPrice.join(", ")} will bill 0 — set Price per KM on the vehicle.
+              </Alert>
+            )}
+            <Text size="xs" c="dimmed">
+              Generate the delivery-fee invoice now, or close and generate later from the row actions.
+            </Text>
+            <Group justify="flex-end" gap="sm">
+              <Button variant="default" onClick={() => setInvoiceConfirm(null)}>Later</Button>
+              <Button
+                loading={generateInvoiceMutation.isPending}
+                disabled={confirmIssues.mixedCurrency}
+                onClick={() =>
+                  generateInvoiceMutation.mutate(invoiceConfirm.id, {
+                    onSuccess: () => setInvoiceConfirm(null),
+                  })
+                }
+              >
+                Generate Invoice
+              </Button>
+            </Group>
+          </Stack>
+        )}
+      </Modal>
     </Stack>
   );
 };

apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx

@@ -19,7 +19,6 @@ import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
 import {
   ActionIcon,
   Alert,
-  Autocomplete,
   Badge,
   Box,
   Button,
@@ -56,8 +55,8 @@ import {
 } from "@/services/last-mile.service";
 import { vehiclesService } from "@/services/vehicles.service";
 import { driversService, type Driver } from "@/services/drivers.service";
-import { ratesService } from "@/services/rates.service";
 import { ReleaseOrderModal, type ReleaseOrderTruckPrefill } from "@/components/warehouses/ReleaseOrderModal";
+import { TruckDetentionModal } from "@/components/operations/TruckDetentionModal";
 import { LastMileStepper, type LastMileStepState } from "@/components/operations/LastMileSteps";
 
 const formatPrice = (amount: number | string | null | undefined, currency = "ETB") =>
@@ -233,7 +232,24 @@ const computeLastMileSteps = (
 };
 
 const bookingRef = (r: LastMileRecord) => r.booking?.reference ?? r.bookingId;
-const currencyOf = (r: LastMileRecord) => r.booking?.paymentCurrency ?? "ETB";
+const currencyOf = (r: LastMileRecord) =>
+  r.vehicle?.currency ??
+  r.vehicleAssignments?.[0]?.vehicle?.currency ??
+  r.booking?.paymentCurrency ??
+  "ETB";
+
+type LmAssignment = NonNullable<LastMileRecord["vehicleAssignments"]>[number];
+const truckShort = (a: LmAssignment) =>
+  a.vehicle ? [a.vehicle.code, a.vehicle.plateNumber].filter(Boolean).join(" · ") : a.vehicleId;
+/** Billing problems on the trucks that have distance: zero price/km, mixed currency. */
+const billingIssues = (r: LastMileRecord) => {
+  const trucks = (r.vehicleAssignments ?? []).filter((a) => Number(a.distanceKm) > 0);
+  const zeroPrice = trucks.filter((a) => !(Number(a.vehicle?.pricePerKm) > 0)).map(truckShort);
+  const currencies = [
+    ...new Set(trucks.map((a) => a.vehicle?.currency).filter((c): c is string => Boolean(c))),
+  ];
+  return { zeroPrice, mixedCurrency: currencies.length > 1, currencies };
+};
 const customerName = (r: LastMileRecord) => r.booking?.company?.name ?? "—";
 const deliveryLocation = (r: LastMileRecord) => r.booking?.lastMileDeliveryAddress ?? "—";
 const cargoDesc = (r: LastMileRecord) => {
@@ -544,6 +560,7 @@ const LastMilePage = () => {
   const [tripSlipVehicleId, setTripSlipVehicleId] = useState<string | null>(null);
   const [tripSlipSelectOpen, setTripSlipSelectOpen] = useState(false);
   const [activeId, setActiveId] = useState<string | null>(null);
+  const [detentionRecord, setDetentionRecord] = useState<LastMileRecord | null>(null);
   // Multi-vehicle assign: one row per truck — vehicle + the container it carries.
   const [vehicleRows, setVehicleRows] = useState<
     Array<{ vehicleId: string | null; containerNumber: string }>
@@ -581,14 +598,6 @@ const LastMilePage = () => {
     },
   });
 
-  const { data: ratesData } = useQuery({
-    queryKey: ["rates", "LAST_MILE"],
-    queryFn: async () => {
-      const res = await ratesService.getByType("LAST_MILE");
-      return res.data;
-    },
-  });
-
   const records = listData?.data ?? [];
   const existingLastMileBookingIds = useMemo(
     () => new Set(records.map((record) => record.bookingId)),
@@ -667,10 +676,17 @@ const LastMilePage = () => {
       distances: Array<{ vehicleId: string; distanceKm: number }>;
       remainingPayment?: number;
     }) => lastMileService.setDistances(id, distances, remainingPayment),
-    onSuccess: () => {
+    onSuccess: (res) => {
       void qc.invalidateQueries({ queryKey: QUERY_KEYS.LAST_MILE.ROOT });
       toast({ title: "Distances saved", description: activeRecord ? bookingRef(activeRecord) : undefined });
+      const updated = res?.data as LastMileRecord | undefined;
       closeDistance();
+      // Every truck has a distance and it isn't billed yet → offer to invoice now.
+      const trucks = updated?.vehicleAssignments ?? [];
+      const allFilled = trucks.length > 0 && trucks.every((a) => Number(a.distanceKm) > 0);
+      if (updated && allFilled && !updated.invoice) {
+        setInvoiceConfirm(updated);
+      }
     },
     onError: () => {
       toast({ title: "Update failed", variant: "destructive" });
@@ -802,18 +818,9 @@ const LastMilePage = () => {
       return;
     }
 
-    const total = distances.reduce((s, d) => s + d.distanceKm, 0);
-    let remainingPayment: number | undefined;
-    if (ratesData?.data) {
-      const lastMileRate = ratesData.data.find(
-        (r) => r.rateType === "LAST_MILE" && (r.status === "LIVE" || r.status === "DRAFT")
-      );
-      if (lastMileRate) {
-        remainingPayment = total * parseFloat(lastMileRate.rateValue);
-      }
-    }
-
-    distanceMutation.mutate({ id: activeId, distances, remainingPayment });
+    // Amount is computed server-side per truck (distance × the vehicle's
+    // price/km, in the vehicle's currency) — no flat LAST_MILE rate.
+    distanceMutation.mutate({ id: activeId, distances });
   };
 
   const activeRecord = useMemo(
@@ -929,6 +936,11 @@ const LastMilePage = () => {
     [records],
   );
 
+  // Billing problems on the leg pending invoice confirmation.
+  const confirmIssues = invoiceConfirm
+    ? billingIssues(invoiceConfirm)
+    : { zeroPrice: [] as string[], mixedCurrency: false, currencies: [] as string[] };
+
   const filteredRecords = useMemo(() => {
     const term = search.trim().toLowerCase();
     return records.filter((r) => {
@@ -1270,6 +1282,17 @@ const LastMilePage = () => {
             Boolean(releaseRow?.releaseOrderReference) && !releaseRow?.releaseDate && !pastTransit;
           return (
             <Group gap={4} justify="flex-end" wrap="nowrap">
+              {pastTransit && (
+                <Button
+                  size="compact-xs"
+                  variant="light"
+                  color="orange"
+                  leftSection={<Receipt size={13} />}
+                  onClick={() => setDetentionRecord(row.original)}
+                >
+                  Detention
+                </Button>
+              )}
               <Menu
                 position="bottom-end"
                 width={200}
@@ -1360,6 +1383,16 @@ const LastMilePage = () => {
                   >
                     {row.original.invoice ? "Invoice generated" : "Generate Invoice"}
                   </Menu.Item>
+                  {/* Truck detention: set/adjust arrival & return times, preview the
+                      per-truck-per-day charge, and generate its invoice. Available
+                      once the vehicle is en route/delivered (clock has a start). */}
+                  <Menu.Item
+                    leftSection={<Receipt size={15} />}
+                    disabled={!pastTransit}
+                    onClick={() => setDetentionRecord(row.original)}
+                  >
+                    Truck detention
+                  </Menu.Item>
                   {canPrint && (
                     <Menu.Item
                       leftSection={<Printer size={15} />}
@@ -1697,21 +1730,29 @@ const LastMilePage = () => {
                   clearable
                   disabled={assignVehicleOptions.length === 0}
                 />
-                <Autocomplete
+                <Select
                   style={{ flex: 1 }}
                   label={i === 0 ? "Container no." : undefined}
-                  placeholder="Container number"
-                  data={containerOptions.filter(
-                    (n) =>
-                      n === row.containerNumber ||
-                      !vehicleRows.some((r, idx) => idx !== i && r.containerNumber === n),
-                  )}
-                  value={row.containerNumber}
+                  placeholder={containerOptions.length ? "Select container" : "No container numbers"}
+                  data={[
+                    ...containerOptions.filter(
+                      (n) =>
+                        n === row.containerNumber ||
+                        !vehicleRows.some((r, idx) => idx !== i && r.containerNumber === n),
+                    ),
+                    // keep a manual/legacy value selectable even if not in the booking
+                    ...(row.containerNumber && !containerOptions.includes(row.containerNumber)
+                      ? [row.containerNumber]
+                      : []),
+                  ]}
+                  value={row.containerNumber || null}
                   onChange={(value) =>
                     setVehicleRows((prev) =>
-                      prev.map((x, idx) => (idx === i ? { ...x, containerNumber: value } : x)),
+                      prev.map((x, idx) => (idx === i ? { ...x, containerNumber: value ?? "" } : x)),
                     )
                   }
+                  searchable
+                  clearable
                 />
                 {vehicleRows.length > 1 && (
                   <ActionIcon
@@ -1993,6 +2034,16 @@ const LastMilePage = () => {
               <Text fw={600}>Invoice amount</Text>
               <Text fw={700}>{formatPrice(invoiceConfirm.remainingPayment, currencyOf(invoiceConfirm))}</Text>
             </Group>
+            {confirmIssues.mixedCurrency && (
+              <Alert color="red" variant="light" title="Mixed truck currencies">
+                Trucks use {confirmIssues.currencies.join(", ")}. Assign trucks that share one currency before invoicing.
+              </Alert>
+            )}
+            {confirmIssues.zeroPrice.length > 0 && (
+              <Alert color="yellow" variant="light" title="Truck has no price/km">
+                {confirmIssues.zeroPrice.join(", ")} will bill 0 — set Price per KM on the vehicle.
+              </Alert>
+            )}
             <Text size="xs" c="dimmed">
               This creates the delivery-fee invoice. Confirm the distances and amount are correct.
             </Text>
@@ -2000,6 +2051,7 @@ const LastMilePage = () => {
               <Button variant="default" onClick={() => setInvoiceConfirm(null)}>Cancel</Button>
               <Button
                 loading={generateInvoiceMutation.isPending}
+                disabled={confirmIssues.mixedCurrency}
                 onClick={() =>
                   generateInvoiceMutation.mutate(invoiceConfirm.id, {
                     onSuccess: () => setInvoiceConfirm(null),
@@ -2019,6 +2071,12 @@ const LastMilePage = () => {
         item={releaseItem}
         truckPrefill={releaseTruckPrefill}
       />
+
+      <TruckDetentionModal
+        opened={Boolean(detentionRecord)}
+        onClose={() => setDetentionRecord(null)}
+        record={detentionRecord}
+      />
     </Stack>
   );
 };

apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts

@@ -15,7 +15,7 @@ export type ColumnFormat =
   | "entityLabel"
   | "rateLabel";
 
-export type FormFieldType = "text" | "number" | "boolean" | "date" | "email" | "select" | "multiselect" | "textarea";
+export type FormFieldType = "text" | "number" | "boolean" | "date" | "email" | "select" | "multiselect" | "textarea" | "radio";
 
 export interface ResourceColumn {
   id: string;

apps/edr-freight-web/backoffice/src/pages/warehouses/LoadingQueuePage.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Badge, Button, Card, Group, Tabs, Text } from '@mantine/core';
-import { CreditCard, Eye, Truck } from 'lucide-react';
+import { CreditCard, Eye, Truck, TrainFront } from 'lucide-react';
 import { DataTable, type ColumnDef } from '@edr/ui-common';
 
 import { PageContainer, PageHeader } from '@/components/page';
@@ -10,6 +10,7 @@ import {
   VisualEmptyState,
   formatNumber,
 } from '@/components/warehouses';
+import { LoadToTrainPanel } from '@/components/warehouses/LoadToTrainPanel';
 import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { api } from '@/services/api';
@@ -116,6 +117,9 @@ export default function LoadingQueuePage() {
               >
                 Dispatch Queue
               </Tabs.Tab>
+              <Tabs.Tab value="load-train" leftSection={<TrainFront size={14} />}>
+                Load to Train
+              </Tabs.Tab>
             </Tabs.List>
 
             {/* Ready to Load — PAID bookings, can be marked Loaded */}
@@ -169,6 +173,11 @@ export default function LoadingQueuePage() {
                 <InventoryWorkbench items={loadedItems} isLoading={loadedLoading} />
               )}
             </Tabs.Panel>
+
+            {/* Load to Train — per-train arrived containers/cargoes, multiselect → load onto wagons */}
+            <Tabs.Panel value="load-train" pt="md">
+              <LoadToTrainPanel />
+            </Tabs.Panel>
         </Tabs>
       </Card>
     </PageContainer>

apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx

@@ -32,7 +32,22 @@ import {
   useFeeRules,
 } from '@/hooks/useWarehouses';
 import { api } from '@/services/api';
-import { FEE_RULE_TYPES, type FeeRuleType } from '@/types/warehouse';
+import {
+  FEE_RULE_BASES,
+  FEE_RULE_BASIS_LABELS,
+  FEE_RULE_TYPES,
+  FEE_RULE_TYPE_LABELS,
+  VEHICLE_TYPES,
+  type FeeRuleBasis,
+  type FeeRuleType,
+} from '@/types/warehouse';
+
+const RULE_TYPE_COLOR: Record<FeeRuleType, string> = {
+  STORAGE_FEE: 'teal',
+  DEMURRAGE_FEE: 'orange',
+  DOUBLE_HANDLING_FEE: 'grape',
+  TRUCK_DETENTION_FEE: 'blue',
+};
 import { extractErrorMessage, lettersOnly } from '@/components/warehouses/options';
 
 const FREIGHT = [
@@ -353,11 +368,14 @@ function FeeRules() {
   const [form, setForm] = useState({
     name: '',
     ruleType: 'DEMURRAGE_FEE' as FeeRuleType,
+    basis: 'PER_CONTAINER' as FeeRuleBasis,
     freightType: '',
     tradeDirection: '',
     cargoTypeCode: '',
     containerType: '',
+    vehicleType: '',
     freeDays: 3,
+    freeHours: 3,
     ratePerDay: 0,
     tiers: [] as Array<{ fromDay: number; toDay: number | null; ratePerDay: number }>,
     currency: 'USD',
@@ -367,16 +385,27 @@ function FeeRules() {
   const containerTypeOptions = codeOptions(containerTypes);
   const isBulkRule = form.freightType === 'BULK';
   const isContainerRule = form.freightType === 'CONTAINER';
+  // Double handling is a flat per-unit charge (basis × rate), not day-based:
+  // no free days, no progressive tiers.
+  const isDoubleHandling = form.ruleType === 'DOUBLE_HANDLING_FEE';
+  // Truck detention: per truck per day after an HOURS-based grace (default 3h),
+  // with day tiers. Uses "free hours" instead of "free days".
+  const isTruckDetention = form.ruleType === 'TRUCK_DETENTION_FEE';
+  // Double handling + truck detention apply to IMPORT only — trade direction is locked.
+  const isImportOnly = isDoubleHandling || isTruckDetention;
 
   const resetForm = () =>
     setForm({
       name: '',
       ruleType: 'DEMURRAGE_FEE',
+      basis: 'PER_CONTAINER',
       freightType: '',
       tradeDirection: '',
       cargoTypeCode: '',
       containerType: '',
+      vehicleType: '',
       freeDays: 3,
+      freeHours: 3,
       ratePerDay: 0,
       tiers: [],
       currency: 'USD',
@@ -437,13 +466,16 @@ function FeeRules() {
       name: form.name.trim(),
       ruleType: form.ruleType,
       freightType: clean(form.freightType) ?? null,
-      tradeDirection: clean(form.tradeDirection) ?? null,
+      tradeDirection: isImportOnly ? 'IMPORT' : clean(form.tradeDirection) ?? null,
       cargoTypeCode: isBulkRule ? (clean(form.cargoTypeCode) ?? null) : null,
       containerType: isContainerRule ? (clean(form.containerType) ?? null) : null,
-      freeDays: form.freeDays,
+      // Double handling: flat basis × rate. Truck detention: HOURS-based grace.
+      freeDays: isDoubleHandling || isTruckDetention ? 0 : form.freeDays,
       ratePerDay: form.ratePerDay,
       currency: form.currency || 'USD',
-      ...(tiers.length ? { tiers } : {}),
+      ...(isDoubleHandling ? { basis: form.basis } : {}),
+      ...(isTruckDetention ? { freeHours: form.freeHours, vehicleType: clean(form.vehicleType) ?? null } : {}),
+      ...(!isDoubleHandling && tiers.length ? { tiers } : {}),
     };
 
     try {
@@ -514,8 +546,8 @@ function FeeRules() {
               {rules.map((rule) => (
                 <Table.Tr key={rule.id}>
                   <Table.Td>
-                    <Badge color={rule.ruleType === 'DEMURRAGE_FEE' ? 'orange' : 'teal'} variant="light">
-                      {rule.ruleType === 'DEMURRAGE_FEE' ? 'Demurrage' : 'Storage'}
+                    <Badge color={RULE_TYPE_COLOR[rule.ruleType] ?? 'gray'} variant="light">
+                      {FEE_RULE_TYPE_LABELS[rule.ruleType] ?? rule.ruleType}
                     </Badge>
                   </Table.Td>
                   <Table.Td>{rule.name}</Table.Td>
@@ -577,7 +609,7 @@ function FeeRules() {
               label="Rule type"
               data={FEE_RULE_TYPES.map((type) => ({
                 value: type,
-                label: type === 'DEMURRAGE_FEE' ? 'Demurrage' : 'Storage',
+                label: FEE_RULE_TYPE_LABELS[type],
               }))}
               value={form.ruleType}
               onChange={(value) =>
@@ -606,11 +638,23 @@ function FeeRules() {
             />
             <Select
               label="Trade direction"
+              description={isImportOnly ? 'Import only for this fee type' : undefined}
               data={TRADE}
-              value={form.tradeDirection || null}
+              value={isImportOnly ? 'IMPORT' : form.tradeDirection || null}
               onChange={(value) => setForm((f) => ({ ...f, tradeDirection: selectValue(value) }))}
-              clearable
+              disabled={isImportOnly}
+              clearable={!isImportOnly}
             />
+            {isTruckDetention && (
+              <Select
+                label="Truck type"
+                placeholder="Any truck type"
+                data={VEHICLE_TYPES.map((v) => ({ value: v, label: v.charAt(0) + v.slice(1).toLowerCase() }))}
+                value={form.vehicleType || null}
+                onChange={(value) => setForm((f) => ({ ...f, vehicleType: selectValue(value) }))}
+                clearable
+              />
+            )}
             {isBulkRule && (
               <Select
                 label="Cargo type"
@@ -637,14 +681,34 @@ function FeeRules() {
             />
           )}
           <Group grow>
+            {isDoubleHandling ? (
+              <Select
+                label="Basis"
+                data={FEE_RULE_BASES.map((b) => ({ value: b, label: FEE_RULE_BASIS_LABELS[b] }))}
+                value={form.basis}
+                onChange={(value) =>
+                  setForm((f) => ({ ...f, basis: selectValue(value, 'PER_CONTAINER') as FeeRuleBasis }))
+                }
+                allowDeselect={false}
+              />
+            ) : isTruckDetention ? (
+              <NumberInput
+                label="Free hours"
+                description="Grace before detention accrues"
+                min={0}
+                value={form.freeHours}
+                onChange={(value) => setForm((f) => ({ ...f, freeHours: numberValue(value) }))}
+              />
+            ) : (
+              <NumberInput
+                label="Free days"
+                min={0}
+                value={form.freeDays}
+                onChange={(value) => setForm((f) => ({ ...f, freeDays: numberValue(value) }))}
+              />
+            )}
             <NumberInput
-              label="Free days"
-              min={0}
-              value={form.freeDays}
-              onChange={(value) => setForm((f) => ({ ...f, freeDays: numberValue(value) }))}
-            />
-            <NumberInput
-              label="Rate / day"
+              label={isDoubleHandling ? 'Rate / unit' : 'Rate / day'}
               min={0}
               value={form.ratePerDay}
               onChange={(value) => setForm((f) => ({ ...f, ratePerDay: numberValue(value) }))}
@@ -657,6 +721,13 @@ function FeeRules() {
               allowDeselect={false}
             />
           </Group>
+          {isDoubleHandling && (
+            <Text size="xs" c="dimmed">
+              Flat charge — the rate is multiplied by the selected basis (
+              {FEE_RULE_BASIS_LABELS[form.basis]}). No free days or progressive tiers.
+            </Text>
+          )}
+          {!isDoubleHandling && (
           <Stack gap="xs">
             <Group justify="space-between">
               <Text size="sm" fw={600}>
@@ -702,6 +773,7 @@ function FeeRules() {
               </Text>
             )}
           </Stack>
+          )}
           <Group justify="flex-end" mt="sm">
             <Button variant="default" onClick={() => setOpen(false)}>
               Cancel

apps/edr-freight-web/backoffice/src/services/compliance.service.ts

@@ -0,0 +1,73 @@
+import { api as apiClient } from '../auth/http';
+
+export type ComplianceType =
+  | 'INSPECTION'
+  | 'INSURANCE'
+  | 'ROADWORTHINESS'
+  | 'PERMIT'
+  | 'TAX';
+
+export type ComplianceStatus = 'VALID' | 'EXPIRING' | 'EXPIRED';
+
+export type AlertSeverity = 'OVERDUE' | 'DUE_SOON';
+
+export interface ComplianceRecord {
+  id: string;
+  vehicleId: string;
+  vehicle?: {
+    id: string;
+    plateNumber?: string | null;
+    manufacturer?: string | null;
+    model?: string | null;
+  };
+  type: ComplianceType;
+  documentNumber?: string | null;
+  issuedDate?: string | null;
+  expiryDate: string;
+  status: ComplianceStatus;
+  notes?: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ComplianceAlert {
+  vehicleId: string;
+  vehiclePlate?: string;
+  kind: string;
+  label: string;
+  expiryDate: string;
+  daysUntil: number;
+  severity: AlertSeverity;
+}
+
+export interface ComplianceListFilters {
+  vehicleId?: string;
+  type?: ComplianceType;
+}
+
+export interface SaveCompliancePayload {
+  vehicleId: string;
+  type: ComplianceType;
+  documentNumber?: string;
+  issuedDate?: string;
+  expiryDate: string;
+  status?: ComplianceStatus;
+  notes?: string;
+}
+
+export const complianceService = {
+  list: (filters: ComplianceListFilters = {}) => {
+    const params = new URLSearchParams();
+    if (filters.vehicleId) params.set('vehicleId', filters.vehicleId);
+    if (filters.type) params.set('type', filters.type);
+    const qs = params.toString();
+    return apiClient.get<ComplianceRecord[]>(`/compliance${qs ? `?${qs}` : ''}`);
+  },
+  getAlerts: () => apiClient.get<ComplianceAlert[]>('/compliance/alerts'),
+  getById: (id: string) => apiClient.get<ComplianceRecord>(`/compliance/${id}`),
+  create: (data: SaveCompliancePayload) =>
+    apiClient.post<ComplianceRecord>('/compliance', data),
+  update: (id: string, data: Partial<SaveCompliancePayload>) =>
+    apiClient.patch<ComplianceRecord>(`/compliance/${id}`, data),
+  remove: (id: string) => apiClient.delete(`/compliance/${id}`),
+};

apps/edr-freight-web/backoffice/src/services/drivers.service.ts

@@ -39,6 +39,17 @@ export type SaveDriverPayload = Omit<
   'id' | 'createdAt' | 'updatedAt' | 'totalTrips' | 'rating'
 >;
 
+/** A stored driver document (code "driver_docs"). */
+export interface DriverDocument {
+  id: string;
+  name: string;
+  url: string;
+  size: number;
+  mimeType: string;
+  code: string;
+  createdAt: string;
+}
+
 export const driversService = {
   getAll: (filters: DriverListFilters = {}) => {
     const params = new URLSearchParams();
@@ -59,4 +70,18 @@ export const driversService = {
   update: (id: string, data: Partial<SaveDriverPayload>) =>
     apiClient.patch(URL_CONSTANTS.DRIVERS.BY_ID(id), data),
   delete: (id: string) => apiClient.delete(URL_CONSTANTS.DRIVERS.BY_ID(id)),
+
+  // ── Driver documents (upload area code "driver_docs") ──
+  listDocuments: (id: string) =>
+    apiClient.get<DriverDocument[]>(`${URL_CONSTANTS.DRIVERS.BY_ID(id)}/documents`),
+  uploadDocuments: (id: string, files: File[]) => {
+    const form = new FormData();
+    for (const f of files) form.append('files', f);
+    return apiClient.post<DriverDocument[]>(
+      `${URL_CONSTANTS.DRIVERS.BY_ID(id)}/documents`,
+      form,
+    );
+  },
+  removeDocument: (id: string, fileId: string) =>
+    apiClient.delete(`${URL_CONSTANTS.DRIVERS.BY_ID(id)}/documents/${fileId}`),
 };

apps/edr-freight-web/backoffice/src/services/first-mile.service.ts

@@ -47,6 +47,8 @@ export interface FirstMileVehicle {
   trailerPlateNo?: string | null;
   assignedDriverId?: string | null;
   assignedDriverName?: string | null;
+  pricePerKm?: number | string | null;
+  currency?: string | null;
 }
 
 export interface FirstMileRecord {

apps/edr-freight-web/backoffice/src/services/gps-tracking.service.ts

@@ -0,0 +1,48 @@
+import { api } from "@/auth/http";
+
+export interface GpsDevice {
+  id: string;
+  imei: string;
+  name?: string | null;
+  vehicleId?: string | null;
+  vehicle?: {
+    id: string;
+    plateNumber?: string;
+    code?: string | null;
+    manufacturer?: string;
+    model?: string;
+  } | null;
+  status: string;
+  online: boolean;
+  lastSeenAt?: string | null;
+  lastLat?: number | string | null;
+  lastLng?: number | string | null;
+  lastSpeed?: number | string | null;
+  lastCourse?: number | null;
+  lastFixAt?: string | null;
+  voltageLevel?: number | null;
+  gsmLevel?: number | null;
+}
+
+export interface GpsPosition {
+  id: string;
+  lat: number | string;
+  lng: number | string;
+  speed: number | string;
+  course: number;
+  satellites: number;
+  gpsTime: string;
+  alarm: number;
+}
+
+export const gpsTrackingService = {
+  latest: () => api.get<GpsDevice[]>("/gps/positions/latest"),
+  listDevices: () => api.get<GpsDevice[]>("/gps/devices"),
+  history: (vehicleId: string, limit = 200) =>
+    api.get<GpsPosition[]>(`/gps/positions/${vehicleId}/history?limit=${limit}`),
+  register: (data: { imei: string; name?: string; vehicleId?: string | null }) =>
+    api.post<GpsDevice>("/gps/devices", data),
+  update: (id: string, data: { name?: string; vehicleId?: string | null }) =>
+    api.patch<GpsDevice>(`/gps/devices/${id}`, data),
+  remove: (id: string) => api.delete<void>(`/gps/devices/${id}`),
+};

apps/edr-freight-web/backoffice/src/services/incidents.service.ts

@@ -0,0 +1,87 @@
+import { api } from '@/auth/http';
+
+export type IncidentType = 'ACCIDENT' | 'BREAKDOWN' | 'TRAFFIC_VIOLATION' | 'THEFT' | 'OTHER';
+export type IncidentSeverity = 'MINOR' | 'MODERATE' | 'MAJOR' | 'CRITICAL';
+export type IncidentStatus =
+  | 'REPORTED'
+  | 'UNDER_REVIEW'
+  | 'CLAIM_FILED'
+  | 'RESOLVED'
+  | 'CLOSED';
+
+export interface Incident {
+  id: string;
+  vehicleId?: string | null;
+  driverId?: string | null;
+  bookingId?: string | null;
+  type: IncidentType;
+  severity: IncidentSeverity;
+  occurredAt: string;
+  location?: string | null;
+  description: string;
+  /** API sends numeric as string; coerce with Number. */
+  damageEstimate?: number | string | null;
+  status: IncidentStatus;
+  insuranceClaimNumber?: string | null;
+  reportedBy?: string | null;
+  vehicle?: {
+    id: string;
+    plateNumber?: string | null;
+    registrationNumber?: string | null;
+  } | null;
+  driver?: {
+    id: string;
+    firstName?: string | null;
+    lastName?: string | null;
+  } | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface IncidentFilters {
+  vehicleId?: string;
+  driverId?: string;
+  status?: IncidentStatus;
+  type?: IncidentType;
+}
+
+export interface DriverIncidentStats {
+  total: number;
+  byType: Record<string, number>;
+  lastIncidentAt: string | null;
+}
+
+export interface SaveIncidentPayload {
+  vehicleId?: string;
+  driverId?: string;
+  bookingId?: string;
+  type: IncidentType;
+  severity: IncidentSeverity;
+  occurredAt: string;
+  location?: string;
+  description: string;
+  damageEstimate?: number;
+  status?: IncidentStatus;
+  insuranceClaimNumber?: string;
+  reportedBy?: string;
+}
+
+export const incidentsService = {
+  getAll: (filters: IncidentFilters = {}) => {
+    const params = new URLSearchParams();
+    if (filters.vehicleId) params.set('vehicleId', filters.vehicleId);
+    if (filters.driverId) params.set('driverId', filters.driverId);
+    if (filters.status) params.set('status', filters.status);
+    if (filters.type) params.set('type', filters.type);
+    const qs = params.toString();
+    return api.get<Incident[]>(`/incidents${qs ? `?${qs}` : ''}`);
+  },
+  getByDriver: (driverId: string) => api.get<Incident[]>(`/incidents/driver/${driverId}`),
+  getDriverStats: (driverId: string) =>
+    api.get<DriverIncidentStats>(`/incidents/driver/${driverId}/stats`),
+  getById: (id: string) => api.get<Incident>(`/incidents/${id}`),
+  create: (data: SaveIncidentPayload) => api.post<Incident>('/incidents', data),
+  update: (id: string, data: Partial<SaveIncidentPayload>) =>
+    api.patch<Incident>(`/incidents/${id}`, data),
+  delete: (id: string) => api.delete(`/incidents/${id}`),
+};

apps/edr-freight-web/backoffice/src/services/last-mile.service.ts

@@ -1,5 +1,6 @@
 import { api } from '../auth/http';
 import { URL_CONSTANTS } from '@/constants/URLS';
+import type { FeePreview } from '@/types/warehouse';
 
 export const LAST_MILE_STATUSES = [
   'PAYMENT_PENDING',
@@ -47,6 +48,8 @@ export interface LastMileVehicle {
   trailerPlateNo?: string | null;
   assignedDriverId?: string | null;
   assignedDriverName?: string | null;
+  pricePerKm?: number | string | null;
+  currency?: string | null;
 }
 
 export interface LastMileRecord {
@@ -70,6 +73,9 @@ export interface LastMileRecord {
   }>;
   /** Present only when an invoice has actually been generated (not on distance). */
   invoice?: { id: string; number: string; status: string } | null;
+  /** Truck-detention clock: vehicle arrival + delivery/return times. */
+  arrivedAt?: string | null;
+  deliveredAt?: string | null;
   createdAt: string;
   updatedAt: string;
 }
@@ -85,7 +91,7 @@ export const lastMileService = {
   list: (pageSize = 1000) =>
     api.get<LastMileListResponse>(`${LM.BASE}?pageSize=${pageSize}`),
   getById: (id: string) => api.get<LastMileRecord>(LM.BY_ID(id)),
-  update: (id: string, data: { status?: LastMileApiStatus; vehicleId?: string | null; estimatedKm?: number | null; exactKm?: number | null; paid?: boolean }) =>
+  update: (id: string, data: { status?: LastMileApiStatus; vehicleId?: string | null; estimatedKm?: number | null; exactKm?: number | null; paid?: boolean; arrivedAt?: string | null; deliveredAt?: string | null }) =>
     api.patch<LastMileRecord>(LM.BY_ID(id), data),
   accept: (bookingReference: string) =>
     api.post<LastMileRecord>(LM.ACCEPT(encodeURIComponent(bookingReference))),
@@ -102,4 +108,12 @@ export const lastMileService = {
   ) => api.post<LastMileRecord>(`${LM.BASE}/${id}/distances`, { distances, remainingPayment }),
   generateInvoice: (id: string) =>
     api.post<{ id: string; invoiceNumber?: string } | null>(`${LM.BASE}/${id}/invoice`),
+  /** Generate a truck-detention invoice (per truck per day after the grace window). */
+  generateTruckDetentionInvoice: (id: string) =>
+    api.post<{ id: string; invoiceNumber?: string } | null>(
+      `${LM.BASE}/${id}/generate-truck-detention-invoice`,
+    ),
+  /** Preview the truck-detention charge for a last-mile leg. */
+  truckDetentionPreview: (id: string) =>
+    api.get<FeePreview>(`${LM.BASE}/${id}/truck-detention-preview`),
 };

apps/edr-freight-web/backoffice/src/services/maintenance-depth.service.ts

@@ -0,0 +1,130 @@
+import { api } from '@/auth/http';
+
+export type WorkOrderStatus = 'OPEN' | 'IN_PROGRESS' | 'COMPLETED' | 'CANCELLED';
+export type WorkOrderPriority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT';
+
+export interface WorkOrder {
+  id: string;
+  vehicleId: string;
+  title: string;
+  description?: string | null;
+  status: WorkOrderStatus;
+  priority: WorkOrderPriority;
+  assignedTo?: string | null;
+  openedAt: string;
+  closedAt?: string | null;
+  /** API sends numeric as string; coerce with Number. */
+  laborCost?: number | string | null;
+  partsCost?: number | string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface SaveWorkOrderPayload {
+  vehicleId: string;
+  title: string;
+  description?: string;
+  status?: WorkOrderStatus;
+  priority?: WorkOrderPriority;
+  assignedTo?: string;
+  openedAt?: string;
+  closedAt?: string;
+  laborCost?: number;
+  partsCost?: number;
+}
+
+export interface WorkOrderFilters {
+  vehicleId?: string;
+  status?: WorkOrderStatus;
+}
+
+export interface Part {
+  id: string;
+  name: string;
+  sku?: string | null;
+  category?: string | null;
+  quantityInStock: number;
+  reorderLevel: number;
+  /** API sends numeric as string; coerce with Number. */
+  unitCost?: number | string | null;
+  location?: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface SavePartPayload {
+  name: string;
+  sku?: string;
+  category?: string;
+  quantityInStock?: number;
+  reorderLevel?: number;
+  unitCost?: number;
+  location?: string;
+}
+
+export interface PartFilters {
+  category?: string;
+  lowStock?: boolean;
+}
+
+export interface Warranty {
+  id: string;
+  vehicleId: string;
+  component: string;
+  provider?: string | null;
+  startDate?: string | null;
+  expiryDate: string;
+  coverageNotes?: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface SaveWarrantyPayload {
+  vehicleId: string;
+  component: string;
+  provider?: string;
+  startDate?: string;
+  expiryDate: string;
+  coverageNotes?: string;
+}
+
+export const maintenanceDepthService = {
+  // Work Orders
+  getWorkOrders: (filters: WorkOrderFilters = {}) => {
+    const params = new URLSearchParams();
+    if (filters.vehicleId) params.set('vehicleId', filters.vehicleId);
+    if (filters.status) params.set('status', filters.status);
+    const qs = params.toString();
+    return api.get<WorkOrder[]>(`/maintenance/work-orders${qs ? `?${qs}` : ''}`);
+  },
+  getWorkOrder: (id: string) => api.get<WorkOrder>(`/maintenance/work-orders/${id}`),
+  createWorkOrder: (data: SaveWorkOrderPayload) =>
+    api.post<WorkOrder>('/maintenance/work-orders', data),
+  updateWorkOrder: (id: string, data: Partial<SaveWorkOrderPayload>) =>
+    api.patch<WorkOrder>(`/maintenance/work-orders/${id}`, data),
+  deleteWorkOrder: (id: string) => api.delete(`/maintenance/work-orders/${id}`),
+
+  // Parts / Tires
+  getParts: (filters: PartFilters = {}) => {
+    const params = new URLSearchParams();
+    if (filters.category) params.set('category', filters.category);
+    if (filters.lowStock) params.set('lowStock', 'true');
+    const qs = params.toString();
+    return api.get<Part[]>(`/maintenance/parts${qs ? `?${qs}` : ''}`);
+  },
+  createPart: (data: SavePartPayload) => api.post<Part>('/maintenance/parts', data),
+  updatePart: (id: string, data: Partial<SavePartPayload>) =>
+    api.patch<Part>(`/maintenance/parts/${id}`, data),
+  deletePart: (id: string) => api.delete(`/maintenance/parts/${id}`),
+
+  // Warranties
+  getWarranties: (vehicleId?: string) => {
+    const params = new URLSearchParams();
+    if (vehicleId) params.set('vehicleId', vehicleId);
+    const qs = params.toString();
+    return api.get<Warranty[]>(`/maintenance/warranties${qs ? `?${qs}` : ''}`);
+  },
+  createWarranty: (data: SaveWarrantyPayload) =>
+    api.post<Warranty>('/maintenance/warranties', data),
+  deleteWarranty: (id: string) => api.delete(`/maintenance/warranties/${id}`),
+};

apps/edr-freight-web/backoffice/src/services/procurement.service.ts

@@ -0,0 +1,138 @@
+import { api } from "@/auth/http";
+
+export type VendorType = "DEALER" | "LEASING" | "PARTS" | "SERVICE" | "OTHER";
+export type AcquisitionType = "PURCHASE" | "LEASE" | "RENTAL";
+export type AcquisitionStatus = "ACTIVE" | "LEASE_EXPIRING" | "DISPOSED";
+export type DisposalMethod = "SALE" | "SCRAP" | "RETURN_LEASE" | "TRADE_IN";
+
+export interface Vendor {
+  id: string;
+  name: string;
+  type?: VendorType | null;
+  contactPerson?: string | null;
+  phone?: string | null;
+  email?: string | null;
+  address?: string | null;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface AssetAcquisition {
+  id: string;
+  vehicleId?: string | null;
+  vendorId?: string | null;
+  acquisitionType: AcquisitionType;
+  acquisitionDate: string;
+  cost?: number | null;
+  usefulLifeMonths?: number | null;
+  salvageValue?: number | null;
+  leaseStart?: string | null;
+  leaseEnd?: string | null;
+  monthlyPayment?: number | null;
+  status: AcquisitionStatus;
+  notes?: string | null;
+  vehicle?: {
+    id: string;
+    plateNumber?: string | null;
+    registrationNumber?: string | null;
+    manufacturer?: string | null;
+    model?: string | null;
+  } | null;
+  vendor?: Vendor | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface AssetDisposal {
+  id: string;
+  vehicleId: string;
+  disposalDate: string;
+  method: DisposalMethod;
+  salePrice?: number | null;
+  buyer?: string | null;
+  notes?: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface DepreciationResult {
+  method: "STRAIGHT_LINE";
+  cost: number;
+  salvageValue: number;
+  usefulLifeMonths: number;
+  monthsElapsed: number;
+  monthlyDepreciation: number;
+  bookValue: number;
+}
+
+export interface LifecycleResult {
+  vehicleId: string;
+  acquisition: AssetAcquisition | null;
+  disposal: AssetDisposal | null;
+  depreciation: DepreciationResult | null;
+}
+
+export interface CreateVendorPayload {
+  name: string;
+  type?: VendorType;
+  contactPerson?: string;
+  phone?: string;
+  email?: string;
+  address?: string;
+  isActive?: boolean;
+}
+
+export interface CreateAcquisitionPayload {
+  vehicleId?: string;
+  vendorId?: string;
+  acquisitionType: AcquisitionType;
+  acquisitionDate: string;
+  cost?: number;
+  usefulLifeMonths?: number;
+  salvageValue?: number;
+  leaseStart?: string;
+  leaseEnd?: string;
+  monthlyPayment?: number;
+  status?: AcquisitionStatus;
+  notes?: string;
+}
+
+export interface CreateDisposalPayload {
+  vehicleId: string;
+  disposalDate: string;
+  method: DisposalMethod;
+  salePrice?: number;
+  buyer?: string;
+  notes?: string;
+}
+
+export const procurementService = {
+  // Vendors
+  listVendors: () => api.get<Vendor[]>("/procurement/vendors"),
+  createVendor: (data: CreateVendorPayload) => api.post("/procurement/vendors", data),
+  updateVendor: (id: string, data: Partial<CreateVendorPayload>) =>
+    api.patch(`/procurement/vendors/${id}`, data),
+  deleteVendor: (id: string) => api.delete(`/procurement/vendors/${id}`),
+
+  // Acquisitions
+  listAcquisitions: (vehicleId?: string) =>
+    api.get<AssetAcquisition[]>(
+      `/procurement/acquisitions${vehicleId ? `?vehicleId=${vehicleId}` : ""}`,
+    ),
+  getAcquisition: (id: string) => api.get<AssetAcquisition>(`/procurement/acquisitions/${id}`),
+  createAcquisition: (data: CreateAcquisitionPayload) =>
+    api.post("/procurement/acquisitions", data),
+  updateAcquisition: (id: string, data: Partial<CreateAcquisitionPayload>) =>
+    api.patch(`/procurement/acquisitions/${id}`, data),
+  deleteAcquisition: (id: string) => api.delete(`/procurement/acquisitions/${id}`),
+
+  // Disposals
+  listDisposals: () => api.get<AssetDisposal[]>("/procurement/disposals"),
+  createDisposal: (data: CreateDisposalPayload) => api.post("/procurement/disposals", data),
+  deleteDisposal: (id: string) => api.delete(`/procurement/disposals/${id}`),
+
+  // Lifecycle
+  lifecycle: (vehicleId: string) =>
+    api.get<LifecycleResult>(`/procurement/lifecycle/${vehicleId}`),
+};

apps/edr-freight-web/backoffice/src/services/vehicles.service.ts

@@ -38,6 +38,9 @@ export interface Vehicle {
   /** Odometer-derived distances (API sends numeric strings; coerce with Number). */
   estimatedDistanceKm?: number | null;
   actualDistanceKm?: number | null;
+  /** Haulage rate per km + its currency (ETB | USD). */
+  pricePerKm?: number | null;
+  currency?: string | null;
   createdAt: string;
   updatedAt: string;
 }

apps/edr-freight-web/backoffice/src/services/warehouse.service.ts

@@ -63,6 +63,58 @@ import type {
   WarehouseZone,
 } from '@/types/warehouse';
 
+export type ContainerItemStage = 'PENDING' | 'RECEIVED' | 'GRN' | 'LOADED' | 'LEFT' | 'DELIVERED';
+
+export interface ContainerItem {
+  containerNumber: string;
+  goods: string | null;
+  stage: ContainerItemStage;
+  grnNumber: string | null;
+  truckAssignmentId: string | null;
+  truckPlate: string | null;
+  truckArrived: boolean;
+  truckLeft: boolean;
+  bookingReference: string | null;
+  contractId: string | null;
+  hasLastMile: boolean;
+}
+
+/** A pre-dispatch EXPORT train that has inventory waiting to be loaded. */
+export interface LoadableTrain {
+  scheduleId: string;
+  trainNumber: string | null;
+  origin: string | null;
+  destination: string | null;
+  status: string;
+  departureTime: string | null;
+  readyCount: number;
+  loadedCount: number;
+}
+
+/** A container/cargo inventory item assigned to a train, with its allocated wagon. */
+export interface TrainLoadableItem {
+  id: string;
+  bookingId: string | null;
+  bookingReference: string | null;
+  customerName: string | null;
+  containerNumber: string | null;
+  cargoType: string | null;
+  weight: number | null;
+  grnNumber: string | null;
+  inspectionStatus: string | null;
+  status: string;
+  wagonId: string | null;
+  wagonNumber: string | null;
+  sequenceNo: number | null;
+  loadable: boolean;
+}
+
+export interface TrainLoadResult {
+  loadedCount: number;
+  skippedCount: number;
+  results: { inventoryId: string; status: string; reason?: string }[];
+}
+
 const cleanParams = (params: object) =>
   Object.fromEntries(
     Object.entries(params).filter(([, value]) => value !== undefined && value !== '' && value !== null),
@@ -75,6 +127,14 @@ export const warehouseService = {
     return data?.data ?? data ?? [];
   },
 
+  /** Per-container/bulk items of a booking with lifecycle stage + refs. */
+  getContainerItems: async (bookingId: string): Promise<ContainerItem[]> => {
+    const { data } = await apiClient.get(
+      `/warehouse-inventory/bookings/${bookingId}/container-items`,
+    );
+    return data?.data ?? data ?? [];
+  },
+
   /** Booking container numbers not yet loaded onto any truck. */
   getLoadableContainers: async (bookingId: string): Promise<string[]> => {
     const { data } = await apiClient.get(
@@ -96,6 +156,33 @@ export const warehouseService = {
     return data?.data ?? data ?? [];
   },
 
+  // ── Load to Train ─────────────────────────────────────────────────────────
+  /** Pre-dispatch EXPORT trains with inventory waiting to be loaded. */
+  getLoadableTrains: async (): Promise<LoadableTrain[]> => {
+    const { data } = await apiClient.get('/warehouse-inventory/loadable-trains');
+    return data?.data ?? data ?? [];
+  },
+
+  /** Container/cargo items assigned to a train, with allocated wagon + stage. */
+  getTrainLoadableItems: async (scheduleId: string): Promise<TrainLoadableItem[]> => {
+    const { data } = await apiClient.get(
+      `/warehouse-inventory/train/${scheduleId}/loadable-items`,
+    );
+    return data?.data ?? data ?? [];
+  },
+
+  /** Load selected inventory items onto their allocated wagons for a train. */
+  loadItemsOntoTrain: async (
+    scheduleId: string,
+    inventoryIds: string[],
+  ): Promise<TrainLoadResult> => {
+    const { data } = await apiClient.post(
+      `/warehouse-inventory/train/${scheduleId}/load`,
+      { inventoryIds },
+    );
+    return data?.data ?? data ?? { loadedCount: 0, skippedCount: 0, results: [] };
+  },
+
   // ── Warehouses ──────────────────────────────────────────────────────────
   list: (filter?: WarehouseFilter) =>
     apiClient.get<Warehouse[]>(URL_CONSTANTS.WAREHOUSES.BASE, {

apps/edr-freight-web/backoffice/src/types/warehouse.ts

@@ -737,23 +737,56 @@ export interface AllocationRule {
 }
 export type SaveAllocationRulePayload = Omit<AllocationRule, 'id'>;
 
-export const FEE_RULE_TYPES = ['STORAGE_FEE', 'DEMURRAGE_FEE'] as const;
+export const FEE_RULE_TYPES = [
+  'STORAGE_FEE',
+  'DEMURRAGE_FEE',
+  'DOUBLE_HANDLING_FEE',
+  'TRUCK_DETENTION_FEE',
+] as const;
 export type FeeRuleType = (typeof FEE_RULE_TYPES)[number];
 
+/** Human labels for each fee rule type (dropdowns, badges). */
+export const FEE_RULE_TYPE_LABELS: Record<FeeRuleType, string> = {
+  STORAGE_FEE: 'Storage',
+  DEMURRAGE_FEE: 'Demurrage',
+  DOUBLE_HANDLING_FEE: 'Double Handling',
+  TRUCK_DETENTION_FEE: 'Truck Detention Cost',
+};
+
+/** Charge basis for a Double Handling rule (flat rate × the chosen quantity). */
+export const FEE_RULE_BASES = ['PER_CONTAINER', 'PER_TON', 'PER_ITEM'] as const;
+export type FeeRuleBasis = (typeof FEE_RULE_BASES)[number];
+
+export const FEE_RULE_BASIS_LABELS: Record<FeeRuleBasis, string> = {
+  PER_CONTAINER: 'Per Container',
+  PER_TON: 'Per Ton',
+  PER_ITEM: 'Per Item',
+};
+
+/** Vehicle types a Truck Detention rule can be scoped to (rates differ by truck type). */
+export const VEHICLE_TYPES = ['TRUCK', 'VAN', 'CAR', 'BUS', 'TRAILER', 'TANKER', 'FLATBED'] as const;
+export type VehicleTypeCode = (typeof VEHICLE_TYPES)[number];
+
 export interface FeeRule {
   id: string;
   name: string;
   ruleType: FeeRuleType;
+  /** Double-handling charge basis; null for day-based fee types. */
+  basis?: FeeRuleBasis | null;
   priority: number;
   freightType?: string | null;
   tradeDirection?: string | null;
   cargoTypeCode?: string | null;
   containerType?: string | null;
+  /** Truck detention only: scope by vehicle type (null = any). */
+  vehicleType?: string | null;
   facilityId?: string | null;
   warehouseId?: string | null;
   yardId?: string | null;
   zoneId?: string | null;
   freeDays: number;
+  /** Truck detention only: grace window in hours (default 3). */
+  freeHours?: number | null;
   ratePerDay: number;
   tiers?: FeeRuleTier[];
   currency: string;
@@ -776,6 +809,7 @@ export interface FeePreviewTier extends FeeRuleTier {
 
 export interface FeePreview {
   ruleType: FeeRuleType;
+  basis?: FeeRuleBasis | null;
   ruleId: string | null;
   ruleName: string | null;
   freeDays: number;
@@ -792,6 +826,16 @@ export interface FeePreview {
   billableUnits: number;
   amount: number;
   tiers?: FeePreviewTier[];
+  /** Truck detention: per-vehicle-type breakdown. */
+  groups?: Array<{
+    vehicleType: string | null;
+    truckCount: number;
+    chargeableDays: number;
+    ratePerDay: number;
+    amount: number;
+    ruleId: string | null;
+    ruleName: string | null;
+  }>;
 }
 
 export interface AllocationPreviewResult {