add checkbox

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 }) => (

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 }) => (