last mile

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

@@ -1,9 +1,7 @@
 import { useMemo, useState } from "react";
 import {
   ArrowRight,
-  Check,
   Eye,
-  Filter,
   MoreHorizontal,
   RefreshCw,
   Truck,
@@ -217,6 +215,22 @@ const LastMilePage = () => {
     }
   };
 
+  const statusCounts = useMemo(() => {
+    const counts: Record<StatusFilter, number> = {
+      ALL: jobs.length,
+      PAYMENT_PENDING: 0,
+      READY_TO_TRANSIT: 0,
+      DELIVERED: 0,
+      ASSIGNED: 0,
+      UNASSIGNED: 0,
+    };
+    for (const job of jobs) {
+      counts[job.deliveryStatus] += 1;
+      counts[job.status] += 1;
+    }
+    return counts;
+  }, [jobs]);
+
   const filteredJobs = useMemo(() => {
     const term = search.trim().toLowerCase();
     return jobs.filter((job) => {
@@ -433,46 +447,40 @@ const LastMilePage = () => {
       >
         <Stack gap={0}>
           <Box px="md" pt="md" pb="sm" w="100%">
-            <Group justify="space-between" wrap="wrap">
-              <Group gap="sm" wrap="wrap">
+            <Stack gap="sm">
+              <Group justify="space-between" wrap="wrap">
                 <TextInput
                   placeholder="Search deliveries…"
                   value={search}
                   onChange={(e) => setSearch(e.currentTarget.value)}
                   w={260}
                 />
-                <Menu position="bottom-start" width={200} withinPortal>
-                  <Menu.Target>
-                    <Button variant="default" leftSection={<Filter size={16} />}>
-                      {FILTER_OPTIONS.find((o) => o.value === statusFilter)?.label ??
-                        "All statuses"}
-                    </Button>
-                  </Menu.Target>
-                  <Menu.Dropdown>
-                    {FILTER_OPTIONS.map((option) => (
-                      <Menu.Item
-                        key={option.value}
-                        rightSection={
-                          statusFilter === option.value ? <Check size={14} /> : null
-                        }
-                        onClick={() => {
-                          setStatusFilter(option.value);
-                          setPagination((p) => ({ ...p, pageIndex: 0 }));
-                        }}
-                      >
-                        {option.label}
-                      </Menu.Item>
-                    ))}
-                  </Menu.Dropdown>
-                </Menu>
+                <Button
+                  leftSection={<Truck size={16} />}
+                  onClick={() => openAssign(null)}
+                >
+                  Assign Mile
+                </Button>
               </Group>
-              <Button
-                leftSection={<Truck size={16} />}
-                onClick={() => openAssign(null)}
-              >
-                Assign Mile
-              </Button>
-            </Group>
+              <Group gap="xs" wrap="wrap">
+                {FILTER_OPTIONS.map((option) => {
+                  const active = statusFilter === option.value;
+                  return (
+                    <Button
+                      key={option.value}
+                      size="xs"
+                      variant={active ? "filled" : "default"}
+                      onClick={() => {
+                        setStatusFilter(option.value);
+                        setPagination((p) => ({ ...p, pageIndex: 0 }));
+                      }}
+                    >
+                      {option.label} ({statusCounts[option.value]})
+                    </Button>
+                  );
+                })}
+              </Group>
+            </Stack>
           </Box>
 
           <DataTable