updates on the zone selector for the specific login

src/pages/doormile/riders/Riders.jsx

@@ -7,12 +7,13 @@ import {
 import {
   Avatar, Button, ConfirmModal, DataTable, Drawer, EmptyState, Field, Grid, IconButton,
   Input, KpiCard, Modal, PageHeader, SearchInput, Select, SelectContent, SelectItem, SelectTrigger,
-  SelectValue, Stack, StatusBadge, Surface, Tabs, Textarea,
+  SelectValue, Stack, StatusBadge, Surface, Tabs, Textarea, ZoneSelector,
 } from '@/components/ds';
 import {
   useAssignMilerVehicle, useBlockMiler, useMilerLogs, useMilers, useNotifyMiler,
   useRiderSummaryCounts, useVehicles,
 } from '@/lib/doormileHooks';
+import { useZone } from '@/lib/ZoneContext';
 import { formatDoormileTimestamp } from '@/lib/doormileTimestamp';
 import { currency, matchesQuery, orDash, useDebouncedValue } from '@/lib/doormileFormat';
 
@@ -64,17 +65,23 @@ export default function Riders() {
   const assignVehicle = useAssignMilerVehicle();
   const notifyMiler = useNotifyMiler();
 
+  const { selectedZone, isAllZones, matchesZone } = useZone();
+
+  const zoneRiders = useMemo(() => {
+    return (riders || []).filter(matchesZone);
+  }, [riders, matchesZone]);
+
   const counts = useMemo(() => {
-    const list = riders || [];
+    const list = zoneRiders;
     return {
       all: list.length,
       active: list.filter(isActive).length,
       blocked: list.filter((rider) => String(rider.availabilitystatus || '').toLowerCase() === 'blocked').length,
     };
-  }, [riders]);
+  }, [zoneRiders]);
 
   const rows = useMemo(() => {
-    let list = riders || [];
+    let list = zoneRiders;
     if (tab === 'active') list = list.filter(isActive);
     else if (tab === 'blocked') {
       list = list.filter((rider) => String(rider.availabilitystatus || '').toLowerCase() === 'blocked');
@@ -82,7 +89,7 @@ export default function Riders() {
     return list.filter((rider) =>
       matchesQuery(rider, [riderName, 'phone', 'userid', 'city', 'suburb', 'defaultvehicletype'], debouncedSearch)
     );
-  }, [riders, tab, debouncedSearch]);
+  }, [zoneRiders, tab, debouncedSearch]);
 
   const columns = useMemo(
     () => [
@@ -218,7 +225,7 @@ export default function Riders() {
         />
         <KpiCard
           icon={CheckCircle2}
-          value={summary?.available ?? 0}
+          value={summary?.available ?? counts.active}
           label="Available now"
           tone="success"
           index={1}
@@ -226,7 +233,14 @@ export default function Riders() {
         />
         <KpiCard
           icon={Bike}
-          value={summary?.onDelivery ?? 0}
+          value={
+            summary?.onDelivery ??
+            zoneRiders.filter(
+              (r) =>
+                String(r.availabilitystatus || '').toLowerCase() === 'on_delivery' ||
+                String(r.availabilitystatus || '').toLowerCase() === 'ondelivery'
+            ).length
+          }
           label="On delivery"
           tone="accent"
           index={2}
@@ -234,7 +248,7 @@ export default function Riders() {
         />
         <KpiCard
           icon={CircleSlash}
-          value={summary?.inactive ?? 0}
+          value={summary?.inactive ?? counts.blocked}
           label="Offline or blocked"
           tone="neutral"
           index={3}
@@ -256,12 +270,13 @@ export default function Riders() {
             />
           </div>
 
-          <div className="flex min-w-0 flex-1 items-center justify-end gap-2 sm:flex-none">
+          <div className="flex min-w-0 flex-1 flex-wrap items-center justify-end gap-2 sm:flex-none">
+            <ZoneSelector />
             <SearchInput
               value={search}
               onChange={setSearch}
               placeholder="Search by name, phone, id or city"
-              className="w-full sm:w-72"
+              className="w-full sm:w-64"
             />
           </div>
         </div>