From db5e1568df5003deee9161e9c462a841b6c8e8d5 Mon Sep 17 00:00:00 2001
From: natib21 <yaschalew10@gmail.com>
Date: Sat, 20 Jun 2026 14:19:02 +0000
Subject: [PATCH] add checkbox

---
 .../src/pages/operations/FirstMilePage.tsx    | 30 ++++++++++++++++++-
 .../src/pages/operations/LastMilePage.tsx     | 30 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 2 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 768803896..a9a0d52c4 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
@@ -15,6 +15,7 @@ import {
   Box,
   Button,
   Card,
+  Checkbox,
   Divider,
   Group,
   Menu,
@@ -381,6 +382,7 @@ const FirstMilePage = () => {
   const [jobs, setJobs] = useState<FirstMileJob[]>(PLACEHOLDER_JOBS);
   const [search, setSearch] = useState("");
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("ALL");
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
 
   const [assignOpen, setAssignOpen] = useState(false);
   const [detailOpen, setDetailOpen] = useState(false);
@@ -528,6 +530,29 @@ const FirstMilePage = () => {
     const headerClassName = ruleEngineTable.headerCell;
     const cellClassName = ruleEngineTable.bodyCell;
     return [
+      {
+        id: "select",
+        size: 40,
+        meta: { headerClassName, cellClassName },
+        header: ({ table }) => (
+          <Checkbox
+            aria-label="Select all"
+            checked={table.getIsAllPageRowsSelected()}
+            indeterminate={
+              table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()
+            }
+            onChange={(e) => table.toggleAllPageRowsSelected(e.currentTarget.checked)}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            aria-label="Select row"
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect()}
+            onChange={row.getToggleSelectedHandler()}
+          />
+        ),
+      },
       {
         id: "bookingRef",
         header: "Booking",
@@ -725,8 +750,11 @@ const FirstMilePage = () => {
             tableOptions={{
               manualPagination: true,
               pageCount,
-              state: { pagination },
+              enableRowSelection: true,
+              getRowId: (row) => row.id,
+              state: { pagination, rowSelection },
               onPaginationChange: setPagination,
+              onRowSelectionChange: setRowSelection,
             }}
             containerClassName="border-0 shadow-none bg-transparent"
             footer={({ table, pagination: footerPagination }) => (
diff --git a/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx b/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
index 932be7702..48181873e 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
@@ -15,6 +15,7 @@ import {
   Box,
   Button,
   Card,
+  Checkbox,
   Divider,
   Group,
   Menu,
@@ -381,6 +382,7 @@ const LastMilePage = () => {
   const [jobs, setJobs] = useState<LastMileJob[]>(PLACEHOLDER_JOBS);
   const [search, setSearch] = useState("");
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("ALL");
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
 
   const [assignOpen, setAssignOpen] = useState(false);
   const [detailOpen, setDetailOpen] = useState(false);
@@ -528,6 +530,29 @@ const LastMilePage = () => {
     const headerClassName = ruleEngineTable.headerCell;
     const cellClassName = ruleEngineTable.bodyCell;
     return [
+      {
+        id: "select",
+        size: 40,
+        meta: { headerClassName, cellClassName },
+        header: ({ table }) => (
+          <Checkbox
+            aria-label="Select all"
+            checked={table.getIsAllPageRowsSelected()}
+            indeterminate={
+              table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()
+            }
+            onChange={(e) => table.toggleAllPageRowsSelected(e.currentTarget.checked)}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            aria-label="Select row"
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect()}
+            onChange={row.getToggleSelectedHandler()}
+          />
+        ),
+      },
       {
         id: "bookingRef",
         header: "Booking",
@@ -725,8 +750,11 @@ const LastMilePage = () => {
             tableOptions={{
               manualPagination: true,
               pageCount,
-              state: { pagination },
+              enableRowSelection: true,
+              getRowId: (row) => row.id,
+              state: { pagination, rowSelection },
               onPaginationChange: setPagination,
+              onRowSelectionChange: setRowSelection,
             }}
             containerClassName="border-0 shadow-none bg-transparent"
             footer={({ table, pagination: footerPagination }) => (