initial commit

src/pages/doormile/deliveries/Deliveries.jsx

@@ -12,7 +12,7 @@ import {
   useUpdateDeliveryStatus,
 } from '@/lib/doormileHooks';
 import { BATCHES, batchRangeLabel, getRowBatchId } from '@/lib/batchBucket';
-import { formatDoormileTimestamp } from '@/lib/doormileTimestamp';
+import { formatDoormileTimestamp, parseDoormileTimestamp } from '@/lib/doormileTimestamp';
 import { currency, exportRows, km as formatKm, matchesQuery, orDash, useDebouncedValue } from '@/lib/doormileFormat';
 
 /**
@@ -111,7 +111,13 @@ export default function Deliveries() {
   const cancelDelivery = useCancelDelivery();
   const notifyMiler = useNotifyMiler();
 
-  const allRows = data?.rows || [];
+  const allRows = useMemo(() => {
+    return [...(data?.rows || [])].sort((a, b) => {
+      const ta = parseDoormileTimestamp(a.orderdate || a.assigntime).valueOf() || 0;
+      const tb = parseDoormileTimestamp(b.orderdate || b.assigntime).valueOf() || 0;
+      return tb - ta;
+    });
+  }, [data?.rows]);
 
   /* Batch, client and rider first, then status, then search — the counts under
      the tabs have to describe the slice the operator has chosen, not the whole
@@ -373,7 +379,12 @@ export default function Deliveries() {
       />
 
       <Stack space="sm">
-        <Tabs tabs={tabs} value={tab} onChange={setTab} />
+        {/* Eight status tabs are far wider than a phone. Scrolled in their own
+            track so the strip moves instead of the whole document — see
+            Orders.jsx for the same fix. */}
+        <div className="-mx-1 max-w-full overflow-x-auto px-1 py-0.5">
+          <Tabs tabs={tabs} value={tab} onChange={setTab} className="shrink-0" />
+        </div>
 
         <ListToolbar
           search={search}
@@ -632,10 +643,10 @@ function OrderDetailDrawer({ row, onClose }) {
           <Surface variant="subtle" padding="sm" radius="lg">
             <dl className="grid grid-cols-2 gap-3">
               {[
-                ['Status', row?.orderstatus],
-                ['Rider', row?.ridername],
-                ['Customer', row?.deliverycustomer],
-                ['Contact', row?.deliverycontactno],
+                ['Status', row?.orderstatus ? <StatusBadge status={row.orderstatus} size="sm" /> : '—'],
+                ['Rider', orDash(row?.ridername)],
+                ['Customer', orDash(row?.deliverycustomer)],
+                ['Contact', orDash(row?.deliverycontactno)],
                 ['Charge', currency(row?.deliverycharges)],
                 ['Distance', formatKm(row?.kms)],
                 ['Placed', formatDoormileTimestamp(row?.orderdate)],
@@ -643,7 +654,7 @@ function OrderDetailDrawer({ row, onClose }) {
               ].map(([label, value]) => (
                 <div key={label}>
                   <dt className="text-caption uppercase tracking-wide text-ink-3">{label}</dt>
-                  <dd className="text-body-sm text-ink-1">{orDash(value)}</dd>
+                  <dd className="text-body-sm text-ink-1">{value}</dd>
                 </div>
               ))}
             </dl>