updates on the datepicker on the orders page and the deliveries page

src/pages/doormile/deliveries/Deliveries.jsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import dayjs from 'dayjs';
 import { Ban, Bell, Bike, FileSpreadsheet, Package, PackageSearch, Truck } from 'lucide-react';
 import {
-  Alert, Button, DataTable, Drawer, EmptyState, Field, IconButton, Input,
+  Alert, Button, DataTable, DatePicker, Drawer, EmptyState, Field, IconButton, Input,
   PageHeader, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Modal,
   Stack, StatusBadge, Surface, Tabs, Textarea, ZoneSelector,
 } from '@/components/ds';
@@ -62,7 +63,8 @@ const SETTABLE_STATUSES = [
 ];
 
 export default function Deliveries() {
-  const [range, setRange] = useState({ from: '', to: '' });
+  const todayStr = dayjs().format('YYYY-MM-DD');
+  const [selectedDate, setSelectedDate] = useState(todayStr);
   const [tab, setTab] = useState('all');
   const [batch, setBatch] = useState('all');
   const [search, setSearch] = useState('');
@@ -80,11 +82,17 @@ export default function Deliveries() {
   const [cancelRow, setCancelRow] = useState(null);
   const [cancelReason, setCancelReason] = useState('');
 
+  const dateParams = useMemo(() => {
+    if (!selectedDate || selectedDate === 'all') return { from: '', to: '' };
+    if (typeof selectedDate === 'string') return { from: selectedDate, to: selectedDate };
+    return { from: selectedDate.from || '', to: selectedDate.to || '' };
+  }, [selectedDate]);
+
   const { data, isLoading, isFetching } = useDeliveries({
     page,
     pageSize: 100,
-    from: range.from,
-    to: range.to,
+    from: dateParams.from,
+    to: dateParams.to,
   });
   const { data: counts } = useDeliveryCounts();
   const { data: riders = [] } = useRiderOptions();
@@ -195,7 +203,7 @@ export default function Deliveries() {
      means anything. */
   useEffect(() => {
     setPage(1);
-  }, [tab, batch, tenantId, riderId, debouncedSearch, range.from, range.to]);
+  }, [tab, batch, tenantId, riderId, debouncedSearch, dateParams.from, dateParams.to]);
 
   const columns = useMemo(
     () => [
@@ -375,30 +383,23 @@ export default function Deliveries() {
       <PageHeader
         icon={Truck}
         title="Deliveries"
-        subtitle={`${counts?.total ?? 0} dispatched · ${
-          !range.from && !range.to
+        subtitle={`${batchRows.length} dispatched · ${
+          !dateParams.from && !dateParams.to
             ? 'All dates'
-            : range.from === range.to
-              ? range.from
-              : `${range.from || '…'} → ${range.to || '…'}`
+            : selectedDate === todayStr
+              ? 'Today'
+              : selectedDate === dayjs().subtract(1, 'day').format('YYYY-MM-DD')
+                ? 'Yesterday'
+                : dateParams.from === dateParams.to
+                  ? dayjs(dateParams.from).format('DD MMM YYYY')
+                  : `${dayjs(dateParams.from).format('DD MMM')} → ${dayjs(dateParams.to).format('DD MMM YYYY')}`
         }`}
         actions={
-          <>
-            <Input
-              type="date"
-              value={range.from}
-              onChange={(e) => setRange((current) => ({ ...current, from: e.target.value }))}
-              aria-label="From date"
-              className="w-40"
-            />
-            <Input
-              type="date"
-              value={range.to}
-              onChange={(e) => setRange((current) => ({ ...current, to: e.target.value }))}
-              aria-label="To date"
-              className="w-40"
-            />
-          </>
+          <DatePicker
+            value={selectedDate}
+            onChange={setSelectedDate}
+            allowAll
+          />
         }
       />
 
@@ -418,7 +419,7 @@ export default function Deliveries() {
           actions={
             <Button
               variant="ghost"
-              onClick={() => exportRows(rows, exportColumns, `deliveries-${tab}-${range.from || 'all'}`)}
+              onClick={() => exportRows(rows, exportColumns, `deliveries-${tab}-${dateParams.from || 'all'}`)}
               disabled={rows.length === 0}
             >
               <FileSpreadsheet className="mr-1.5 h-4 w-4" /> Export