From 40320d247a821c921d5c6c6e7aaa5625fa7959f7 Mon Sep 17 00:00:00 2001
From: natib21 <yaschalew10@gmail.com>
Date: Mon, 29 Jun 2026 08:37:48 +0000
Subject: [PATCH 1/3] fix

---
 .../src/pages/operations/FirstMilePage.tsx    | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)

diff --git a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
index 1e748cc51..ebec2323c 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
@@ -18,10 +18,12 @@ import {
   Button,
   Card,
   Checkbox,
+  DateInput,
   Divider,
   Group,
   Menu,
   Modal,
+  NumberInput,
   Select,
   SimpleGrid,
   Stack,
@@ -327,6 +329,10 @@ const FirstMilePage = () => {
   const [acceptVehicleValue, setAcceptVehicleValue] = useState<string | null>(null);
   const [bookingSearch, setBookingSearch] = useState("");
 
+  const [distanceOpen, setDistanceOpen] = useState(false);
+  const [distanceValue, setDistanceValue] = useState("");
+  const [distanceDate, setDistanceDate] = useState<Date | null>(null);
+
   const { data: listData, isLoading } = useQuery({
     queryKey: QUERY_KEYS.FIRST_MILE.list(),
     queryFn: async () => {
@@ -379,6 +385,21 @@ const FirstMilePage = () => {
     },
   });
 
+  const updateDistanceMutation = useMutation({
+    mutationFn: ({ id, exactKm }: { id: string; exactKm: number }) =>
+      firstMileService.update(id, { exactKm }),
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.FIRST_MILE.ROOT });
+      if (activeRecord) {
+        toast({ title: "Distance updated", description: `${bookingRef(activeRecord)} → ${distanceValue} km` });
+      }
+      closeDistance();
+    },
+    onError: () => {
+      toast({ title: "Update failed", variant: "destructive" });
+    },
+  });
+
   const acceptMutation = useMutation({
     mutationFn: async ({ reference, vehicleId }: { reference: string; vehicleId: string | null }) => {
       const res = await firstMileService.accept(reference);
@@ -454,6 +475,29 @@ const FirstMilePage = () => {
     acceptMutation.mutate({ reference: selectedBooking.reference, vehicleId: acceptVehicleValue });
   };
 
+  const openDistance = (id: string) => {
+    setActiveId(id);
+    setDistanceValue("");
+    setDistanceDate(new Date());
+    setDistanceOpen(true);
+  };
+
+  const closeDistance = () => {
+    setDistanceOpen(false);
+    setActiveId(null);
+    setDistanceValue("");
+    setDistanceDate(null);
+  };
+
+  const handleSaveDistance = () => {
+    const distance = parseFloat(distanceValue);
+    if (!activeId || isNaN(distance) || distance < 0) {
+      toast({ title: "Invalid distance", description: "Enter a valid distance value.", variant: "destructive" });
+      return;
+    }
+    updateDistanceMutation.mutate({ id: activeId, exactKm: distance });
+  };
+
   const matchesFilter = (r: FirstMileRecord) => {
     switch (statusFilter) {
       case "ALL": return true;
@@ -726,6 +770,11 @@ const FirstMilePage = () => {
                   >
                     View detail
                   </Menu.Item>
+                  <Menu.Item
+                    onClick={() => openDistance(row.original.id)}
+                  >
+                    Add Actual distance
+                  </Menu.Item>
                   {canPrint && (
                     <Menu.Item
                       leftSection={<Printer size={15} />}
@@ -1030,6 +1079,59 @@ const FirstMilePage = () => {
           </Stack>
         )}
       </Modal>
+
+      {/* Add Actual Distance modal */}
+      <Modal
+        opened={distanceOpen}
+        onClose={closeDistance}
+        title={<Text fw={600}>Add Actual Distance</Text>}
+        size="md"
+        radius="lg"
+        centered
+      >
+        <Stack gap="md">
+          {activeRecord && (
+            <Card withBorder padding="md" radius="md" bg="var(--mantine-color-gray-0)">
+              <Stack gap="sm">
+                <Text fw={600} size="sm">{bookingRef(activeRecord)}</Text>
+                <Group justify="space-between">
+                  <Text size="xs" c="dimmed">Customer</Text>
+                  <Text size="sm">{customerName(activeRecord)}</Text>
+                </Group>
+                <Group justify="space-between">
+                  <Text size="xs" c="dimmed">Est. Distance (KM)</Text>
+                  <Text size="sm">{activeRecord.estimatedKm ?? "—"}</Text>
+                </Group>
+              </Stack>
+            </Card>
+          )}
+          <NumberInput
+            label="Actual Distance (KM)"
+            placeholder="Enter distance"
+            value={distanceValue}
+            onChange={(v) => setDistanceValue(String(v ?? ""))}
+            min={0}
+            step={0.1}
+            decimalScale={2}
+          />
+          <DateInput
+            label="Date"
+            placeholder="Select date"
+            value={distanceDate}
+            onChange={setDistanceDate}
+          />
+          <Group justify="flex-end" gap="sm">
+            <Button variant="default" onClick={closeDistance}>Cancel</Button>
+            <Button
+              onClick={handleSaveDistance}
+              loading={updateDistanceMutation.isPending}
+              disabled={!distanceValue}
+            >
+              Save
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </Stack>
   );
 };

From 0d922a132f5a09628e60fe5374c732084da23a9b Mon Sep 17 00:00:00 2001
From: natib21 <yaschalew10@gmail.com>
Date: Mon, 29 Jun 2026 08:46:03 +0000
Subject: [PATCH 2/3] fix

---
 .../backoffice/src/pages/operations/FirstMilePage.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
index ebec2323c..7532e2dbf 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
@@ -18,7 +18,6 @@ import {
   Button,
   Card,
   Checkbox,
-  DateInput,
   Divider,
   Group,
   Menu,
@@ -31,6 +30,7 @@ import {
   TextInput,
   UnstyledButton,
 } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
 
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";

From 17ee6ea292e154c29bf3a197b197820ac0aa7b28 Mon Sep 17 00:00:00 2001
From: natib21 <yaschalew10@gmail.com>
Date: Mon, 29 Jun 2026 08:49:36 +0000
Subject: [PATCH 3/3] fix

---
 .../backoffice/src/pages/operations/FirstMilePage.tsx  | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
index 7532e2dbf..128df06fd 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
@@ -30,7 +30,6 @@ import {
   TextInput,
   UnstyledButton,
 } from "@mantine/core";
-import { DateInput } from "@mantine/dates";
 
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
@@ -331,7 +330,6 @@ const FirstMilePage = () => {
 
   const [distanceOpen, setDistanceOpen] = useState(false);
   const [distanceValue, setDistanceValue] = useState("");
-  const [distanceDate, setDistanceDate] = useState<Date | null>(null);
 
   const { data: listData, isLoading } = useQuery({
     queryKey: QUERY_KEYS.FIRST_MILE.list(),
@@ -478,7 +476,6 @@ const FirstMilePage = () => {
   const openDistance = (id: string) => {
     setActiveId(id);
     setDistanceValue("");
-    setDistanceDate(new Date());
     setDistanceOpen(true);
   };
 
@@ -486,7 +483,6 @@ const FirstMilePage = () => {
     setDistanceOpen(false);
     setActiveId(null);
     setDistanceValue("");
-    setDistanceDate(null);
   };
 
   const handleSaveDistance = () => {
@@ -1114,12 +1110,6 @@ const FirstMilePage = () => {
             step={0.1}
             decimalScale={2}
           />
-          <DateInput
-            label="Date"
-            placeholder="Select date"
-            value={distanceDate}
-            onChange={setDistanceDate}
-          />
           <Group justify="flex-end" gap="sm">
             <Button variant="default" onClick={closeDistance}>Cancel</Button>
             <Button