diff --git a/public/drop-icon.png b/public/drop-icon.png
new file mode 100644
index 0000000..0ed31ad
Binary files /dev/null and b/public/drop-icon.png differ
diff --git a/public/pickup-icon.png b/public/pickup-icon.png
new file mode 100644
index 0000000..1f8d416
Binary files /dev/null and b/public/pickup-icon.png differ
diff --git a/src/components/DateFilterDialog.js b/src/components/DateFilterDialog.js
index 50337c2..07950ec 100644
--- a/src/components/DateFilterDialog.js
+++ b/src/components/DateFilterDialog.js
@@ -29,6 +29,9 @@ const DateFilterDialog = ({ open, onClose, onSelect }) => {
           open={open}
           toggle={onClose}
           id="daterange1"
+          // Reflects the pick already made in this dialog, so reopening it or
+          // adjusting one end does not blank the other.
+          value={selectedRange || undefined}
           onChange={handleDateChange}
           definedRanges={[
             { label: 'Today', startDate: new Date(), endDate: new Date() },
diff --git a/src/components/nearle_components/DateRangePicker.js b/src/components/nearle_components/DateRangePicker.js
index 10c468c..119ec96 100644
--- a/src/components/nearle_components/DateRangePicker.js
+++ b/src/components/nearle_components/DateRangePicker.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 
 import { HStack } from '@astryxdesign/core/HStack';
@@ -19,18 +19,43 @@ import { DateInput } from '@astryxdesign/core/DateInput';
 // Astryx note: DateInput speaks ISO `YYYY-MM-DD` strings, where the MUI
 // DatePicker spoke dayjs objects. The conversion happens here so the
 // `onChange` contract (native Date objects) is unchanged for callers.
-export const DateRangePicker = ({ onChange, definedRanges = [] }) => {
-  const [customStart, setCustomStart] = useState(undefined);
-  const [customEnd, setCustomEnd] = useState(undefined);
+const toISO = (d) => (d ? dayjs(d).format('YYYY-MM-DD') : undefined);
+
+export const DateRangePicker = ({ onChange, definedRanges = [], value }) => {
+  // Seeded from the range the caller is ALREADY filtering by. Without this the
+  // two fields opened blank on a page that was actively filtered — both showing
+  // "Select a date" while the table behind them was narrowed to a window the
+  // operator could no longer see. Confirmed on the Deliveries page: the query
+  // held a range, the inputs held "".
+  const [customStart, setCustomStart] = useState(toISO(value?.startDate));
+  const [customEnd, setCustomEnd] = useState(toISO(value?.endDate));
+
+  // Re-seeded when the caller's range changes underneath us — a preset button
+  // here, or a filter reset on the page — so the fields never disagree with
+  // what is actually being filtered.
+  useEffect(() => {
+    setCustomStart(toISO(value?.startDate));
+    setCustomEnd(toISO(value?.endDate));
+  }, [value?.startDate, value?.endDate]);
 
   const pickPreset = (range) => {
+    setCustomStart(toISO(range.startDate));
+    setCustomEnd(toISO(range.endDate));
     onChange({ startDate: range.startDate, endDate: range.endDate, label: range.label });
   };
 
   const pickCustom = (nextStart, nextEnd) => {
-    if (nextStart && nextEnd) {
-      onChange({ startDate: dayjs(nextStart).toDate(), endDate: dayjs(nextEnd).toDate(), label: undefined });
-    }
+    if (!nextStart || !nextEnd) return;
+
+    // Order enforced, not assumed. Only the END field carried a `min`, so a
+    // start could be set AFTER an end already chosen — and because this fires
+    // as soon as both are present, that emitted an inverted range that filters
+    // to nothing. Swapping is what the operator meant either way; refusing
+    // would just leave the picker silently doing nothing.
+    const a = dayjs(nextStart);
+    const b = dayjs(nextEnd);
+    const [from, to] = a.isAfter(b) ? [b, a] : [a, b];
+    onChange({ startDate: from.toDate(), endDate: to.toDate(), label: undefined });
   };
 
   return (
@@ -51,6 +76,7 @@ export const DateRangePicker = ({ onChange, definedRanges = [] }) => {
           <DateInput
             label="Start date"
             value={customStart}
+            max={customEnd}
             hasClear
             onChange={(v) => {
               setCustomStart(v);
@@ -75,7 +101,13 @@ export const DateRangePicker = ({ onChange, definedRanges = [] }) => {
 
 DateRangePicker.propTypes = {
   onChange: PropTypes.func,
-  definedRanges: PropTypes.array
+  definedRanges: PropTypes.array,
+  // The range currently in force, so the fields can show it. Accepts whatever
+  // dayjs parses — the callers hold ISO strings, the presets hold Dates.
+  value: PropTypes.shape({
+    startDate: PropTypes.any,
+    endDate: PropTypes.any
+  })
 };
 
 export default DateRangePicker;
diff --git a/src/components/nearle_components/PageLayout.js b/src/components/nearle_components/PageLayout.js
index 54cceea..2bded21 100644
--- a/src/components/nearle_components/PageLayout.js
+++ b/src/components/nearle_components/PageLayout.js
@@ -109,12 +109,18 @@ PageShell.propTypes = {
 //
 // minWidth is 200, fitting four across smoothly while keeping labels single-line.
 //
-// gap is 2.5 (10px) — tight, cohesive summary strip.
+// gap is 3 (12px) — clear, visible separation between cards.
 // ---------------------------------------------------------------------------
-export function KpiGrid({ children, minWidth = 200, gap = 2.5, max }) {
+export function KpiGrid({ children, minWidth = 200, gap = 3, max, className = '', style = {} }) {
   const count = Array.isArray(children) ? children.filter(Boolean).length : 1;
   return (
-    <Grid columns={{ minWidth, max: max || Math.max(count, 1), repeat: 'fit' }} gap={gap}>
+    <Grid
+      columns={{ minWidth, max: max || Math.max(count, 1), repeat: 'fit' }}
+      gap={gap}
+      width="100%"
+      className={['dt-kpi-grid', className].filter(Boolean).join(' ') || undefined}
+      style={{ gap: 12, width: '100%', ...style }}
+    >
       {children}
     </Grid>
   );
@@ -124,7 +130,9 @@ KpiGrid.propTypes = {
   children: PropTypes.node,
   minWidth: PropTypes.number,
   gap: PropTypes.number,
-  max: PropTypes.number
+  max: PropTypes.number,
+  className: PropTypes.string,
+  style: PropTypes.object
 };
 
 // ---------------------------------------------------------------------------
@@ -142,7 +150,13 @@ KpiGrid.propTypes = {
 // ---------------------------------------------------------------------------
 export function FilterToolbar({ children, minWidth = 220, max = 3, padding = 4 }) {
   return (
-    <VStack padding={padding} gap={0}>
+    // `dt-filter-toolbar` is the hook the shared filter-control styling keys
+    // off (see globalPolish.css). Scoped to this component on purpose: a
+    // Selector in a FILTER row is a chip and should read as one, while the
+    // same Selector in a form or dialog is a field and must keep the field
+    // shape. Styling `.astryx-selector` globally would flatten that
+    // distinction.
+    <VStack className="dt-filter-toolbar" padding={padding} gap={0}>
       <Grid columns={{ minWidth, max, repeat: 'fit' }} gap={4}>
         {children}
       </Grid>
diff --git a/src/components/nearle_components/SegmentCard.js b/src/components/nearle_components/SegmentCard.js
new file mode 100644
index 0000000..48af1cc
--- /dev/null
+++ b/src/components/nearle_components/SegmentCard.js
@@ -0,0 +1,101 @@
+import PropTypes from 'prop-types';
+
+import { DT } from 'themes/dt/tokens';
+
+// ==============================|| SEGMENT CARD ||============================== //
+//
+// A selectable band: a named range of something, how many fall in it, and one
+// line of supporting detail. Clicking it filters the page to that band.
+//
+//   ┌─────────────────────────────┐
+//   │ PENDING  awaiting rider  [◷]│   label + range, icon chip
+//   │ 12                          │   count, in the band's own colour
+//   │ ( 12 orders · 3 late )      │   meta pill
+//   │ ────────────────────────    │   colour rule
+//   └─────────────────────────────┘
+//
+// ---------------------------------------------------------------------------
+// This is NOT StatCard, deliberately
+// ---------------------------------------------------------------------------
+// StatCard is a passive metric strip, kept ultra-compact (48px) because a KPI
+// row is supporting information above a table and should cost as little
+// vertical space as possible.
+//
+// This is the opposite job. A segment is a CONTROL — it carries a selected
+// state, it is clickable, and it has to hold four pieces of information rather
+// than two. It earns its height because acting on it is the point, not
+// glancing at it. Putting both jobs in one component would mean one of them
+// getting the wrong shape.
+//
+// Use StatCard for "here is the number". Use this for "pick a band".
+//
+// ---------------------------------------------------------------------------
+// Colour
+// ---------------------------------------------------------------------------
+// `color` is a caller-supplied band accent — the same sanctioned raw-hex
+// escape hatch StatCard uses (folder CLAUDE.md §2), because the token system
+// cannot express "whatever this particular band means". It appears in exactly
+// three places: the count, the icon chip tint, and the rule along the bottom.
+// The card's own frame stays neutral so a row of five reads as one set.
+
+const SegmentCard = ({ label, range, value, meta, icon, color = DT.brand, isSelected = false, onClick }) => {
+  const isInteractive = typeof onClick === 'function';
+
+  return (
+    <button
+      type="button"
+      className={`dt-segment-card${isSelected ? ' is-selected' : ''}`}
+      onClick={onClick}
+      disabled={!isInteractive}
+      aria-pressed={isInteractive ? isSelected : undefined}
+      style={{
+        // The selected border is the band's own colour, so which one is active
+        // is legible without reading the labels.
+        borderColor: isSelected ? color : DT.borderSubtle,
+        cursor: isInteractive ? 'pointer' : 'default'
+      }}
+    >
+      <span className="dt-segment-head">
+        <span className="dt-segment-names">
+          <span className="dt-segment-label">{label}</span>
+          {range && <span className="dt-segment-range">{range}</span>}
+        </span>
+        {icon && (
+          <span className="dt-segment-icon" style={{ backgroundColor: `${color}14`, color }} aria-hidden="true">
+            {icon}
+          </span>
+        )}
+      </span>
+
+      <span className="dt-segment-value" style={{ color }}>
+        {value}
+      </span>
+
+      {meta && <span className="dt-segment-meta">{meta}</span>}
+
+      {/* The rule is the band's signature — the one place the colour runs the
+          full width, so a row of cards reads as a spectrum at a glance. */}
+      <span className="dt-segment-rule" style={{ backgroundColor: color }} aria-hidden="true" />
+    </button>
+  );
+};
+
+SegmentCard.propTypes = {
+  /** Band name — rendered uppercase, e.g. "Pending". */
+  label: PropTypes.node,
+  /** The band's definition, e.g. "90+" or "awaiting rider". */
+  range: PropTypes.node,
+  /** The count. The largest thing on the card. */
+  value: PropTypes.node,
+  /** One line of supporting detail, shown as a pill. */
+  meta: PropTypes.node,
+  /** Rendered node, e.g. icon={<MdTimer size={16} />}. */
+  icon: PropTypes.node,
+  /** Band accent hex. Colours the count, the icon chip and the rule. */
+  color: PropTypes.string,
+  isSelected: PropTypes.bool,
+  /** Omit to render a non-interactive card. */
+  onClick: PropTypes.func
+};
+
+export default SegmentCard;
diff --git a/src/components/nearle_components/StatCard.js b/src/components/nearle_components/StatCard.js
index 28422b5..897b49c 100644
--- a/src/components/nearle_components/StatCard.js
+++ b/src/components/nearle_components/StatCard.js
@@ -1,32 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Card } from '@astryxdesign/core/Card';
 import { Skeleton } from '@astryxdesign/core/Skeleton';
-
 import { DT, STATUS } from 'themes/dt/tokens';
 
 // ==============================|| STAT / KPI CARD ||============================== //
 //
-// Ultra-compact, dense, space-efficient enterprise KPI component.
-// Shared across Deliveries, Orders, Pricing, Tenants, Riders, Customers, Hubs,
-// Vehicles, Tripsheets, Exceptions, App Users, Reports and Dispatch.
-//
-// ---------------------------------------------------------------------------
-// ULTRA-COMPACT HORIZONTAL COMPOSITION (~48px target height)
-// ---------------------------------------------------------------------------
-// 1. Icon chip: 26px × 26px with 6px radius and subtle 7% tint (`${accent}12`).
-//    Glyph size normalized to 14px.
-// 2. Value: 18px bold (`lineHeight: 1`, `fontVariantNumeric: 'tabular-nums'`).
-// 3. Label: 12px / 500 in secondary ink (`#64748b`), aligned horizontally on
-//    the same baseline beside the value for maximum space efficiency and instant
-//    (<1s) visual scanning.
-// 4. Tight elevation, flat white surface, 8px rounded corners, 7px 12px padding.
-// 5. Interactive/clickable hover support with smooth 150ms transition. Static
-//    cards remain clean without hover distraction.
-// ---------------------------------------------------------------------------
-
-const MIN_HEIGHT = 48;
+// Replica of the Orders page KPI / SegmentCard design across all console pages.
+// Structure:
+// - Header: uppercase bold label + optional range/caption on left, 28x28 icon chip on right
+// - Value: 24px bold count in the accent colour
+// - Meta: optional pill badge
+// - Rule: inset 2px accent line along the bottom
+// - Active state: full border in the accent colour when selected
 
 const VARIANTS = {
   neutral: STATUS.muted,
@@ -39,186 +25,80 @@ const VARIANTS = {
 
 export default function StatCard({
   title,
+  label,
   value,
   icon,
   color,
   variant = 'brand',
   caption,
+  meta,
+  range,
   loading = false,
   onClick,
   clickable,
+  isSelected = false,
   className = '',
   style = {}
 }) {
   const accent = color || VARIANTS[variant] || DT.brand;
-  const isClickable = Boolean(onClick || clickable);
+  const isInteractive = typeof onClick === 'function' || clickable;
+  const displayLabel = label ?? title;
+  const displayRange = range ?? caption;
 
   return (
-    <Card
-      height="100%"
-      padding={0}
-      elevation="none"
-      className={['dt-stat-card', isClickable ? 'dt-stat-card-clickable' : '', className].filter(Boolean).join(' ')}
-      data-clickable={isClickable ? 'true' : undefined}
+    <button
+      type="button"
+      className={`dt-segment-card dt-stat-card${isSelected ? ' is-selected' : ''}${className ? ` ${className}` : ''}`}
       onClick={onClick}
-      role={isClickable ? 'button' : undefined}
-      tabIndex={isClickable ? 0 : undefined}
-      onKeyDown={
-        isClickable && onClick
-          ? (e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onClick(e);
-              }
-            }
-          : undefined
-      }
+      disabled={!isInteractive}
+      aria-pressed={isInteractive ? isSelected : undefined}
       style={{
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        minHeight: MIN_HEIGHT,
-        maxHeight: 56,
-        padding: '7px 12px',
-        background: DT.surface,
-        border: `1px solid ${DT.borderSubtle}`,
-        borderRadius: 8,
-        boxShadow: '0 1px 2px rgba(15, 23, 42, 0.03)',
-        cursor: isClickable ? 'pointer' : 'default',
-        userSelect: isClickable ? 'none' : 'auto',
-        boxSizing: 'border-box',
-        overflow: 'hidden',
-        width: '100%',
+        borderColor: isSelected ? accent : DT.borderSubtle,
+        cursor: isInteractive ? 'pointer' : 'default',
         ...style
       }}
     >
-      <div
-        className="dt-stat-content"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '8px',
-          width: '100%',
-          minWidth: 0
-        }}
-      >
+      <span className="dt-segment-head">
+        <span className="dt-segment-names">
+          <span className="dt-segment-label">{displayLabel}</span>
+          {displayRange && <span className="dt-segment-range">{displayRange}</span>}
+        </span>
         {icon && (
-          <div
-            className="dt-stat-icon"
-            style={{
-              width: 26,
-              height: 26,
-              minWidth: 26,
-              minHeight: 26,
-              borderRadius: 6,
-              backgroundColor: `${accent}12`,
-              color: accent,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              flexShrink: 0
-            }}
-          >
+          <span className="dt-segment-icon" style={{ backgroundColor: `${accent}14`, color: accent }} aria-hidden="true">
             {icon}
-          </div>
+          </span>
         )}
+      </span>
 
-        <div
-          className="dt-stat-body"
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            minWidth: 0,
-            flex: 1
-          }}
-        >
-          <div
-            className="dt-stat-primary"
-            style={{
-              display: 'flex',
-              alignItems: 'baseline',
-              gap: '6px',
-              minWidth: 0,
-              flexWrap: 'wrap'
-            }}
-          >
-            {loading ? (
-              <Skeleton width={36} height={18} radius={DT.radiusSm} />
-            ) : (
-              <span
-                className="dt-stat-value"
-                style={{
-                  fontFamily: 'var(--font-family-heading, Sora), -apple-system, BlinkMacSystemFont, sans-serif',
-                  fontSize: '18px',
-                  fontWeight: 700,
-                  lineHeight: 1,
-                  letterSpacing: '-0.02em',
-                  color: 'var(--color-text-primary, #0f172a)',
-                  fontVariantNumeric: 'tabular-nums',
-                  whiteSpace: 'nowrap'
-                }}
-              >
-                {value}
-              </span>
-            )}
+      {loading ? (
+        <Skeleton width={50} height={24} radius={DT.radiusSm} />
+      ) : (
+        <span className="dt-segment-value" style={{ color: accent }}>
+          {value}
+        </span>
+      )}
 
-            <span
-              className="dt-stat-label"
-              title={typeof title === 'string' ? title : undefined}
-              style={{
-                fontFamily: 'var(--font-family-body, Inter), -apple-system, BlinkMacSystemFont, sans-serif',
-                fontSize: '12px',
-                fontWeight: 500,
-                lineHeight: 1,
-                color: DT.textSecondary,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                flex: '1 1 auto',
-                minWidth: 0
-              }}
-            >
-              {title}
-            </span>
-          </div>
+      {meta && <span className="dt-segment-meta">{meta}</span>}
 
-          {caption && (
-            <span
-              className="dt-stat-caption"
-              title={typeof caption === 'string' ? caption : undefined}
-              style={{
-                fontFamily: 'var(--font-family-body, Inter), -apple-system, BlinkMacSystemFont, sans-serif',
-                fontSize: '10.5px',
-                lineHeight: '12px',
-                color: DT.textMuted,
-                marginTop: 1,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
-              }}
-            >
-              {caption}
-            </span>
-          )}
-        </div>
-      </div>
-    </Card>
+      <span className="dt-segment-rule" style={{ backgroundColor: accent }} aria-hidden="true" />
+    </button>
   );
 }
 
 StatCard.propTypes = {
   title: PropTypes.node,
+  label: PropTypes.node,
   value: PropTypes.node,
   icon: PropTypes.node,
-  /** Raw accent hex. Takes precedence over `variant`. */
   color: PropTypes.string,
-  /** Semantic alias over the same palette, for call sites not importing STATUS. */
   variant: PropTypes.oneOf(['neutral', 'brand', 'blue', 'green', 'amber', 'red']),
   caption: PropTypes.node,
+  meta: PropTypes.node,
+  range: PropTypes.node,
   loading: PropTypes.bool,
   onClick: PropTypes.func,
   clickable: PropTypes.bool,
+  isSelected: PropTypes.bool,
   className: PropTypes.string,
   style: PropTypes.object
 };
diff --git a/src/components/nearle_components/StatusTabs.js b/src/components/nearle_components/StatusTabs.js
index d787de5..2a696c8 100644
--- a/src/components/nearle_components/StatusTabs.js
+++ b/src/components/nearle_components/StatusTabs.js
@@ -1,19 +1,12 @@
 import PropTypes from 'prop-types';
 
-import { TabList, Tab } from '@astryxdesign/core/TabList';
-import { Badge } from '@astryxdesign/core/Badge';
+import { Grid } from '@astryxdesign/core/Grid';
 
 import { getStatusMeta } from 'themes/dt/status';
+import SegmentCard from './SegmentCard';
 
 // ==============================|| STATUS TABS ||============================== //
-// The top-level status filter strip on every list page.
-//
-// Under MUI these were hand-rolled clickable <Box> pills, because MUI's <Tabs>
-// couldn't carry a count chip or a per-tab accent. Astryx's Tab has an
-// `endContent` slot and a `selectedIcon`, so the pills are now real tabs —
-// which also means arrow-key navigation and correct `role="tab"` semantics
-// come for free instead of being missing (the old pills were plain divs with
-// onClick, which is half of Dispatch.js's outstanding a11y lint errors).
+// The top-level status filter on every list page.
 //
 //   <StatusTabs
 //     value={currentStatus}
@@ -24,34 +17,75 @@ import { getStatusMeta } from 'themes/dt/status';
 //     ]}
 //   />
 //
-// Each tab's `status` resolves through the shared registry for its label and
-// icon, so a page only supplies the ORDER of the tabs and where each count
-// comes from. Pass `label` on an entry to override the registry wording.
+// Each entry's `status` resolves through the shared registry for its label,
+// icon, colour and hint, so a page supplies only the ORDER of the bands and
+// where each count comes from. Pass `label` on an entry to override the
+// registry wording.
 //
-// Counts render as a neutral Badge — informational, not urgent. Astryx's Badge
-// guidance reserves the loud `error` variant for counts that demand action, so
-// a page that wants that (an exceptions queue, say) passes `isUrgent` on the
-// entry rather than every count screaming by default.
+// ---------------------------------------------------------------------------
+// Cards, not a tab strip
+// ---------------------------------------------------------------------------
+// This was a row of Astryx <Tab>s with a count badge. It is now a row of
+// <SegmentCard>s: same props, same behaviour, same registry — only the
+// rendering changed, so no page file needed touching.
+//
+// The strip was doing three jobs with one line of text: naming the band,
+// carrying its count, and being the control that selects it. As cards each of
+// those gets its own place — the name, a hint at what the band MEANS, the
+// count as the largest thing, and the band's share of the total. The selected
+// band is now legible from across the room by its coloured border rather than
+// from a 2px underline.
+//
+// The cost is honest: a card row is taller than a tab strip. That is why the
+// count is the dominant element — the row has to earn the height by being
+// readable at a glance, not just clickable.
+//
+// `size` and `hasDivider` are accepted and ignored. They were part of the
+// TabList API and several pages still pass them; silently accepting them
+// keeps those call sites working rather than spreading unknown props onto a
+// DOM node (see this folder's CLAUDE.md §7 on prop-signature changes).
+
+export default function StatusTabs({ value, onChange, tabs, hideHint }) {
+  // The pill under each count is the band's share of everything shown. It is
+  // computed from the tabs themselves rather than taken as a prop, so it can
+  // never disagree with the numbers printed above it.
+  const total = tabs.reduce((sum, tab) => sum + (Number(tab.count) || 0), 0);
 
-export default function StatusTabs({ value, onChange, tabs, size = 'md', hasDivider = true }) {
   return (
-    <TabList value={value} onChange={onChange} size={size} hasDivider={hasDivider}>
+    // width="100%" is load-bearing. DataCard renders this slot inside a VStack,
+    // which aligns its children to the start rather than stretching them, so
+    // without it the Grid shrinks to a single minWidth column and all eight
+    // bands stack vertically in a container that had room for six across.
+    <Grid
+      columns={{ minWidth: 125, max: Math.max(tabs.length, 1), repeat: 'fit' }}
+      gap={2}
+      width="100%"
+      className="dt-status-tabs-grid"
+      style={{ gap: 8 }}
+    >
       {tabs.map((tab) => {
         const meta = getStatusMeta(tab.status);
         const Icon = meta.icon;
-        const hasCount = tab.count !== undefined && tab.count !== null;
+        const count = Number(tab.count) || 0;
+        // No share line when there is nothing to take a share of — "0% of 0"
+        // is noise, and an empty band should simply say nothing.
+        const share = total > 0 ? `${Math.round((count / total) * 100)}% of ${total}` : null;
 
         return (
-          <Tab
+          <SegmentCard
             key={tab.status}
-            value={tab.status}
             label={tab.label ?? meta.label}
-            icon={<Icon size={15} />}
-            endContent={hasCount ? <Badge variant={tab.isUrgent ? 'error' : 'neutral'} label={tab.count} /> : undefined}
+            range={hideHint ? null : meta.hint}
+            value={count}
+            meta={share}
+            icon={<Icon size={16} />}
+            color={meta.color}
+            isSelected={value === tab.status}
+            onClick={() => onChange?.(tab.status)}
           />
         );
       })}
-    </TabList>
+    </Grid>
   );
 }
 
@@ -66,6 +100,10 @@ StatusTabs.propTypes = {
       isUrgent: PropTypes.bool
     })
   ).isRequired,
+  /** Accepted for call-site compatibility with the previous TabList API. */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  hasDivider: PropTypes.bool
+  /** Accepted for call-site compatibility with the previous TabList API. */
+  hasDivider: PropTypes.bool,
+  /** If true, hides the hint text (meta.hint) on the cards. */
+  hideHint: PropTypes.bool
 };
diff --git a/src/globalPolish.css b/src/globalPolish.css
index 7880383..f940228 100644
--- a/src/globalPolish.css
+++ b/src/globalPolish.css
@@ -157,6 +157,188 @@ body {
   animation: dt-slide-up var(--dt-duration-slow) var(--dt-ease-out);
 }
 
+/* --------------------------------------------------------------------------
+   Segment card (components/nearle_components/SegmentCard.js).
+
+   A selectable band. Structure is a flex column so the meta pill and the
+   colour rule sit at fixed points regardless of how long the label runs, and
+   the rule is pinned to the bottom rather than following the content.
+   -------------------------------------------------------------------------- */
+.dt-segment-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  min-height: 118px;
+  padding: 14px 16px 18px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
+  font: inherit;
+  text-align: left;
+  overflow: hidden;
+  transition: border-color var(--dt-duration-base) var(--dt-ease-out), box-shadow var(--dt-duration-base) var(--dt-ease-out);
+}
+
+.dt-segment-card:not(:disabled):hover {
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07);
+}
+
+.dt-segment-card:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
+}
+
+/* Selected reads through the border colour, set inline from the band accent.
+   A second cue would be redundant — the colour is already unique per band. */
+.dt-segment-card.is-selected {
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+}
+
+.dt-segment-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+}
+
+.dt-segment-names {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+}
+
+.dt-segment-label {
+  font-size: 11.5px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #0f172a;
+}
+
+.dt-segment-range {
+  font-size: 11px;
+  font-weight: 500;
+  color: #94a3b8;
+}
+
+.dt-segment-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  font-size: 15px;
+}
+
+.dt-segment-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+.dt-segment-value {
+  font-family: var(--font-family-heading);
+  font-size: 24px;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+
+.dt-segment-meta {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  font-size: 11px;
+  line-height: 1.4;
+  color: #64748b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Inset from the edges so it reads as a rule belonging to the card, not as a
+   border on it. */
+.dt-segment-rule {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  bottom: 10px;
+  height: 2px;
+  border-radius: 2px;
+}
+
+/* Ensure consistent 12px spacing between KPI cards */
+.dt-kpi-grid {
+  gap: 12px !important;
+}
+
+/* --------------------------------------------------------------------------
+   Filter row.
+
+   Every control in a FilterToolbar is a filter, so they all take the same
+   shape and the same height — the row reads as one set of controls rather
+   than as a Selector, a Button and a search field that happen to sit in a
+   line.
+
+   Only the SHAPE and the hairline move. The fills and text colours are
+   Astryx's own, so nothing here changes the palette.
+   -------------------------------------------------------------------------- */
+.astryx-selector,
+.astryx-selector-trigger,
+.astryx-selector button,
+.astryx-selector [role='combobox'],
+.astryx-text-input,
+.astryx-text-input > div,
+.astryx-text-input input,
+.astryx-button,
+button.astryx-button,
+.dt-filter-toolbar .astryx-selector,
+.dt-filter-toolbar .astryx-text-input,
+.dt-filter-toolbar .astryx-button,
+.dt-deliveries-toolbar .astryx-selector,
+.dt-deliveries-toolbar .astryx-text-input,
+.dt-deliveries-toolbar .astryx-button {
+  border-radius: 6px !important;
+}
+
+.dt-filter-toolbar .astryx-selector,
+.dt-filter-toolbar .astryx-text-input,
+.dt-filter-toolbar .astryx-button,
+.dt-deliveries-toolbar .astryx-selector,
+.dt-deliveries-toolbar .astryx-text-input,
+.dt-deliveries-toolbar .astryx-button {
+  min-height: 36px;
+}
+
+/* The console's own hairline (DT.borderSubtle), the same one every card and
+   table frame uses — so a filter control sits on the page at the same weight
+   as the surfaces around it. */
+.dt-filter-toolbar .astryx-selector,
+.dt-filter-toolbar .astryx-text-input,
+.dt-deliveries-toolbar .astryx-selector,
+.dt-deliveries-toolbar .astryx-text-input {
+  border-color: #e2e8f0;
+}
+
+.dt-filter-toolbar .astryx-selector,
+.dt-filter-toolbar .astryx-button,
+.dt-deliveries-toolbar .astryx-selector,
+.dt-deliveries-toolbar .astryx-button {
+  padding-inline: 12px;
+}
+
 /* --------------------------------------------------------------------------
    KPI / StatCard (Compact Enterprise Metric Strip).
 
diff --git a/src/layout/MainLayout/AppSideNav.js b/src/layout/MainLayout/AppSideNav.js
index bc1ad51..44df06d 100644
--- a/src/layout/MainLayout/AppSideNav.js
+++ b/src/layout/MainLayout/AppSideNav.js
@@ -54,8 +54,17 @@ const AppSideNav = ({ isCollapsed, onCollapsedChange }) => {
         collapsible={{ isCollapsed, onCollapsedChange, buttonLabel: 'Collapse navigation' }}
         style={{
           backgroundColor: DT.surface,
-          borderRight: `1px solid ${DT.borderSubtle}`,
-          boxShadow: '1px 0 3px rgba(15, 23, 42, 0.03)',
+          // One hairline, and nothing else. This edge previously carried a
+          // 1px borderSubtle line AND a box-shadow bleeding 3px to its right;
+          // stacked, they read as a single heavy rule rather than the quiet
+          // separation the chrome is supposed to have.
+          //
+          // The shadow is gone rather than softened — a nav pinned to the
+          // viewport edge is not floating above anything, so the depth cue was
+          // describing a relationship that does not exist. `divider` is the
+          // lighter of the two border tokens; `borderSubtle` stays untouched
+          // because 35 other call sites depend on its current weight.
+          borderRight: '1px solid rgba(0, 0, 0, 0.015)',
           paddingBlock: '12px',
           paddingInline: '8px',
           boxSizing: 'border-box',
@@ -98,9 +107,9 @@ const AppSideNav = ({ isCollapsed, onCollapsedChange }) => {
            space on every side and an icon that read small in a 40px target.
            Setting the font-size is what actually scales the mark. */
         .doormile-side-nav .astryx-side-nav-item[aria-label] .astryx-icon {
-          font-size: 20px !important;
-          width: 20px !important;
-          height: 20px !important;
+          font-size: 18px !important;
+          width: 18px !important;
+          height: 18px !important;
           margin: 0 !important;
           display: flex;
           align-items: center;
@@ -115,7 +124,7 @@ const AppSideNav = ({ isCollapsed, onCollapsedChange }) => {
            to sit comfortably beside it. Still bumped off the inherited 14px,
            which was undersized against a 14px label. */
         .doormile-side-nav .astryx-side-nav-item:not([aria-label]) .astryx-icon {
-          font-size: 17px !important;
+          font-size: 16px !important;
         }
         .doormile-side-nav .astryx-side-nav-item:not([aria-label]) .astryx-icon svg {
           width: 1em;
diff --git a/src/pages/nearle/appUsers/appUsers.js b/src/pages/nearle/appUsers/appUsers.js
index 0077fb3..3197090 100644
--- a/src/pages/nearle/appUsers/appUsers.js
+++ b/src/pages/nearle/appUsers/appUsers.js
@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useState } from 'react';
-import { MdOutlineAdminPanelSettings, MdEdit, MdDeleteOutline, MdAdd, MdArrowUpward, MdArrowDownward, MdUnfoldMore } from 'react-icons/md';
+import React, { useEffect, useMemo, useState } from 'react';
+import { MdOutlineAdminPanelSettings, MdPerson, MdEdit, MdDeleteOutline, MdAdd, MdArrowUpward, MdArrowDownward, MdUnfoldMore } from 'react-icons/md';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { enqueueSnackbar } from 'notistack';
 
@@ -30,6 +30,7 @@ import { Dialog, DialogHeader } from '@astryxdesign/core/Dialog';
 import { Layout, LayoutContent, LayoutFooter } from '@astryxdesign/core/Layout';
 import { TextInput } from '@astryxdesign/core/TextInput';
 import { Selector } from '@astryxdesign/core/Selector';
+import { Badge } from '@astryxdesign/core/Badge';
 import { EmptyState } from '@astryxdesign/core/EmptyState';
 import { Pagination } from '@astryxdesign/core/Pagination';
 import { Table, TableHeader, TableBody, TableRow, TableCell, TableHeaderCell } from '@astryxdesign/core/Table';
@@ -39,6 +40,7 @@ import TableLoader from 'components/nearle_components/TableLoader';
 import DebounceSearchBar from 'components/nearle_components/DebounceSearchBar';
 import PageHeader from 'components/nearle_components/PageHeader';
 import StatCard from 'components/nearle_components/StatCard';
+import StatusBadge from 'components/nearle_components/StatusBadge';
 import { PageShell, KpiGrid, FilterToolbar, DataCard } from 'components/nearle_components/PageLayout';
 import { getAppUsers, createAppUser, updateAppUser, deleteAppUser } from 'pages/api/doormileApi';
 import { DT } from 'themes/dt/tokens';
@@ -205,20 +207,25 @@ const AppUsers = () => {
       {
         id: 'name',
         accessorKey: 'first_name',
-        size: 200,
-        minSize: 150,
-        meta: { label: 'Name' },
-        header: () => <SectionLabel>Name</SectionLabel>,
-        cell: ({ getValue }) => <Text weight="bold">{getValue()}</Text>
-      },
-      {
-        id: 'email',
-        accessorKey: 'email',
-        size: 220,
-        minSize: 160,
-        meta: { label: 'Email' },
-        header: () => <SectionLabel>Email</SectionLabel>,
-        cell: ({ getValue }) => getValue()
+        size: 260,
+        minSize: 200,
+        meta: { label: 'User' },
+        header: () => <SectionLabel>User</SectionLabel>,
+        cell: ({ row }) => (
+          <HStack gap={1.5} vAlign="center">
+            <AccentAvatar color={BRAND} size={28}>
+              <MdPerson size={14} />
+            </AccentAvatar>
+            <VStack gap={0} padding={0} minWidth={0}>
+              <Text weight="bold" maxLines={1} style={{ fontSize: 13, color: DT.textPrimary }}>
+                {row.original.first_name} {row.original.last_name || ''}
+              </Text>
+              <Text type="supporting" color="secondary" maxLines={1} style={{ fontSize: 11 }}>
+                {row.original.email}
+              </Text>
+            </VStack>
+          </HStack>
+        )
       },
       {
         id: 'phone',
@@ -227,16 +234,20 @@ const AppUsers = () => {
         minSize: 110,
         meta: { label: 'Phone' },
         header: () => <SectionLabel>Phone</SectionLabel>,
-        cell: ({ getValue }) => getValue() || '—'
+        cell: ({ getValue }) => (
+          <Text type="supporting" weight="medium" style={{ fontSize: 12 }}>
+            {getValue() || '—'}
+          </Text>
+        )
       },
       {
         id: 'role',
         accessorFn: (row) => roleLabel(row.role),
-        size: 130,
-        minSize: 100,
+        size: 140,
+        minSize: 110,
         meta: { label: 'Role' },
         header: () => <SectionLabel>Role</SectionLabel>,
-        cell: ({ getValue }) => getValue()
+        cell: ({ getValue }) => <Badge variant="neutral" label={getValue()} />
       },
       {
         id: 'status',
@@ -245,7 +256,7 @@ const AppUsers = () => {
         minSize: 100,
         meta: { label: 'Status' },
         header: () => <SectionLabel>Status</SectionLabel>,
-        cell: ({ getValue }) => getValue() || '—'
+        cell: ({ getValue }) => <StatusBadge status={getValue()} />
       },
       {
         id: 'actions',
@@ -312,8 +323,20 @@ const AppUsers = () => {
         />
 
         <KpiGrid>
-          <StatCard title="Total Staff" value={stats.total} icon={<MdOutlineAdminPanelSettings size={20} />} color={BRAND} />
-          <StatCard title="Admins" value={stats.admins} icon={<MdOutlineAdminPanelSettings size={20} />} color="#6366f1" />
+          <StatCard
+            title="Total Staff"
+            value={stats.total}
+            meta={`${stats.total} accounts`}
+            icon={<MdOutlineAdminPanelSettings size={20} />}
+            color={BRAND}
+          />
+          <StatCard
+            title="Admins"
+            value={stats.admins}
+            meta={`${stats.total > 0 ? Math.round((stats.admins / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdOutlineAdminPanelSettings size={20} />}
+            color="#6366f1"
+          />
         </KpiGrid>
 
         <DataCard
diff --git a/src/pages/nearle/assistant/DoormileAI.css b/src/pages/nearle/assistant/DoormileAI.css
index 1df56f5..745eed3 100644
--- a/src/pages/nearle/assistant/DoormileAI.css
+++ b/src/pages/nearle/assistant/DoormileAI.css
@@ -717,6 +717,68 @@ body.dai-docked .astryx-layout-content {
   box-shadow: 0 0 0 3px var(--dai-accent-ring);
 }
 
+/* --------------------------------------------------------------------------
+   Conversation history.
+   
+   A list of rows, not cards: these are destinations, and dense rows scan
+   faster than boxes when you are looking for one you remember.
+   -------------------------------------------------------------------------- */
+.dai-root .dai-history {
+  padding: 4px 0;
+}
+.dai-root .dai-history-row {
+  width: 100%;
+  border-radius: 10px;
+  padding-right: 4px;
+  transition: background-color 140ms ease;
+}
+.dai-root .dai-history-row:hover {
+  background: var(--dai-surface-alt);
+}
+.dai-root .dai-history-open {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  text-align: left;
+  padding: 9px 10px;
+  border: none;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+  border-radius: 10px;
+}
+.dai-root .dai-history-open:focus-visible {
+  outline: 2px solid var(--dai-accent);
+  outline-offset: -2px;
+}
+.dai-root .dai-history-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--dai-text);
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dai-root .dai-history-meta {
+  font-size: 11px;
+  color: var(--dai-text-muted);
+}
+.dai-root .dai-history-empty-title {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--dai-text);
+}
+.dai-root .dai-history-empty {
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--dai-text-muted);
+}
+
 /* Microphone.
    
    Astryx's smallest dictation button is 28px, two short of the send button it
diff --git a/src/pages/nearle/assistant/DoormileAI/AIFlowStep.js b/src/pages/nearle/assistant/DoormileAI/AIFlowStep.js
index 2223298..d3f0ad4 100644
--- a/src/pages/nearle/assistant/DoormileAI/AIFlowStep.js
+++ b/src/pages/nearle/assistant/DoormileAI/AIFlowStep.js
@@ -60,10 +60,15 @@ const AIFlowStep = ({ step, onChoose, onCancel, draft, isBusy }) => {
   if (!options.length) {
     return (
       <VStack className="dai-action" gap={1.5} padding={0}>
+        {/* An empty list must still leave a way forward. The generic message
+            plus a lone Cancel is a dead end, and it is reached exactly when
+            something upstream failed — which is the worst moment to strip the
+            operator of options. A step that can also accept a typed answer
+            says so here via `emptyHint`. */}
         <Text className="dai-field-err">
           {step.id === 'pickuplocationid'
             ? 'This tenant has no saved business locations — add one on the Tenants page before creating an order.'
-            : 'There’s nothing to choose from here.'}
+            : step.emptyHint || 'There’s nothing to choose from here.'}
         </Text>
         <Button label="Cancel" variant="secondary" size="sm" onClick={onCancel} />
       </VStack>
diff --git a/src/pages/nearle/assistant/DoormileAI/AIMessage.js b/src/pages/nearle/assistant/DoormileAI/AIMessage.js
index 40238f0..86073b7 100644
--- a/src/pages/nearle/assistant/DoormileAI/AIMessage.js
+++ b/src/pages/nearle/assistant/DoormileAI/AIMessage.js
@@ -135,7 +135,7 @@ const AssistantMessage = ({ message, onCopy, onSubmitForm, onCancelAction, onCho
         />
       )}
 
-      {['confirmCustomer', 'confirmOrder', 'confirmBulk', 'confirmAssign', 'confirmBatchAssign'].includes(message.form?.kind) && (
+      {['confirmCustomer', 'confirmOrder', 'confirmBulk', 'confirmAssign'].includes(message.form?.kind) && (
         <VStack className="dai-action" gap={1.5} padding={0}>
           {message.form.status === 'open' ? (
             <HStack gap={1.5} padding={0}>
@@ -149,8 +149,6 @@ const AssistantMessage = ({ message, onCopy, onSubmitForm, onCancelAction, onCho
                     ? 'Create order'
                     : message.form.kind === 'confirmAssign'
                     ? 'Assign rider'
-                    : message.form.kind === 'confirmBatchAssign'
-                    ? `Assign ${message.form.draft?.bookingIds?.length || 0} orders`
                     : 'Submit'
                 }
                 variant="primary"
diff --git a/src/pages/nearle/assistant/DoormileAI/AIPanel.js b/src/pages/nearle/assistant/DoormileAI/AIPanel.js
index 156f704..a17087e 100644
--- a/src/pages/nearle/assistant/DoormileAI/AIPanel.js
+++ b/src/pages/nearle/assistant/DoormileAI/AIPanel.js
@@ -2,9 +2,10 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { useLocation } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
-import { LuChevronDown, LuPanelRightOpen, LuPanelRightClose } from 'react-icons/lu';
+import { LuChevronDown, LuPanelRightOpen, LuPanelRightClose, LuHistory, LuTrash2, LuMessageSquare } from 'react-icons/lu';
 
 import { HStack } from '@astryxdesign/core/HStack';
 import { VStack } from '@astryxdesign/core/VStack';
@@ -22,10 +23,10 @@ import { startCustomerFlow, answerStep } from '../customerFlow';
 import { startOrderFlow, answerOrderStep } from '../orderFlow';
 import { startBulkFlow, answerBulkStep, resolveBulkRows, lookupsNeeded, batchCount, GEOCODE_INTERVAL_MS } from '../bulkFlow';
 import { startAssignFlow, answerAssignStep } from '../assignFlow';
-import { executeAssign, executeBatchAssign, describeRider } from '../assignActions';
+import { executeAssign, executeRepeatAssign, describeRider } from '../assignActions';
 import { startRepeatFlow, answerRepeatStep } from '../repeatFlow';
 import { buildRepeatRun, describeDay } from '../repeatRuns';
-import { getPageContext, getFollowUps, toChips } from './pageContext';
+import { getPageContext, getFollowUps, toChips, ORDER_CREATED } from './pageContext';
 import { Spark, LiveIndicator, TypingIndicator } from './AIParts';
 import AIWelcome, { SuggestionChips } from './AIWelcome';
 import AIMessage from './AIMessage';
@@ -46,6 +47,8 @@ import '../DoormileAI.css';
 const ANIMATION_MS = 260;
 const HISTORY_KEY = 'doormileBotHistory';
 const HISTORY_LIMIT = 50;
+const CONVERSATIONS_KEY = 'doormileBotConversations';
+const CONVERSATIONS_LIMIT = 25;
 const PIN_THRESHOLD_PX = 48;
 
 // Dock widths. Each is a percentage of the viewport with a pixel floor — 25vw
@@ -58,10 +61,37 @@ const DOCK_NORMAL = 'max(300px, 25vw)';
 const DOCK_WIDE = 'max(340px, 30vw)';
 const WIDTH_KEY = 'doormileBotWidth';
 
-let nextId = 1;
+// Seeded from the clock, not from 1.
+//
+// Messages are keyed by this id, and a thread is restored from localStorage on
+// mount — but the counter restarted at 1 every page load, so the first new
+// message collided with the first restored one. React then logged "Encountered
+// two children with the same key" (seen live, dozens of times) and is free to
+// duplicate or drop either message; the warning says the behaviour is
+// unsupported.
+//
+// Restoring an ARCHIVED conversation made it worse still: that injects a whole
+// thread of old ids into the middle of a running count.
+//
+// A clock seed removes the class of bug rather than patching one path — every
+// id issued now is larger than every id issued in any earlier session, so new
+// and restored messages cannot occupy the same key.
+let nextId = Date.now();
 const makeId = () => nextId++;
 const now = () => dayjs().format('hh:mm A');
 
+// Reissues every id so a thread is internally unique, whatever it arrived
+// with. Storage written before ids were clock-seeded holds runs like
+// 1,2,3,4,5,6,7,1,2,3 — the counter restarted each session and wrote straight
+// over itself — and React keys off these, so those threads log "two children
+// with the same key" on every single mount until the data itself is repaired.
+//
+// Seeding the counter fixed new writes; this fixes what is already on disk.
+// Ids only need to be unique within a session, so reissuing is safe: nothing
+// persists a reference to one, and setFormStatus matches within the same
+// render tree.
+const withUniqueIds = (messages) => messages.map((m) => ({ ...m, id: makeId() }));
+
 const loadHistory = () => {
   try {
     const raw = localStorage.getItem(HISTORY_KEY);
@@ -71,10 +101,12 @@ const loadHistory = () => {
     // last closed is retired on load. Otherwise a Create button could sit in
     // restored history for days and fire against data the operator can no
     // longer see — the proposal must be regenerated against current state.
-    return parsed.map((m) => {
-      const next = m.flowStep ? { ...m, flowStep: undefined } : m;
-      return next.form?.status === 'open' ? { ...next, form: { ...next.form, status: 'stale' } } : next;
-    });
+    return withUniqueIds(
+      parsed.map((m) => {
+        const next = m.flowStep ? { ...m, flowStep: undefined } : m;
+        return next.form?.status === 'open' ? { ...next, form: { ...next.form, status: 'stale' } } : next;
+      })
+    );
   } catch {
     return [];
   }
@@ -88,13 +120,84 @@ const saveHistory = (messages) => {
   }
 };
 
+// ---------------------------------------------------------------------------
+// Past conversations.
+//
+// HISTORY_KEY holds the CURRENT thread and is overwritten on every message.
+// Before this existed, "New conversation" cleared `messages`, that save effect
+// fired, and the previous conversation was gone — permanently, with no warning
+// and nothing to restore. Archiving first is what makes starting a new chat a
+// safe thing to do rather than a destructive one.
+// ---------------------------------------------------------------------------
+const loadConversations = () => {
+  try {
+    const raw = localStorage.getItem(CONVERSATIONS_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+};
+
+const saveConversations = (list) => {
+  try {
+    localStorage.setItem(CONVERSATIONS_KEY, JSON.stringify(list.slice(0, CONVERSATIONS_LIMIT)));
+  } catch {
+    /* private mode / quota — archives just won't persist */
+  }
+};
+
+// A conversation is named after the first thing the operator asked. That is
+// the only line in a thread that reliably says what it was about — the
+// assistant's own first reply is usually a number with no subject.
+const conversationTitle = (messages) => {
+  const firstAsk = messages.find((m) => m.sender === 'user' && m.text);
+  const raw = (firstAsk?.text || 'Untitled conversation').trim();
+  return raw.length > 58 ? `${raw.slice(0, 57)}…` : raw;
+};
+
 const AIPanel = ({ isOpen, onClose }) => {
+  const queryClient = useQueryClient();
+
+  // The bot writes through its own calls, so the PAGE behind it keeps serving
+  // whatever TanStack cached before the write. Assign a rider from here and the
+  // API is correct immediately, while the Deliveries table still shows the
+  // booking as undispatched — that page selects on `assignedmileruserid`, which
+  // has just changed underneath it. Reported as "it assigned but Deliveries
+  // doesn't show it"; the assignment was real, the table was stale.
+  //
+  // Invalidated broadly and deliberately. Naming each page's keys here would
+  // couple the assistant to every table's cache layout and rot the first time
+  // one changes; TanStack only refetches ACTIVE queries at once, so in practice
+  // this refreshes the page the operator is looking at and marks the rest
+  // stale. CLAUDE.md §7 asks for .refetch() after a mutation, but that only
+  // reaches queries the same component owns — a cross-page write needs the
+  // client.
+  const refreshPageData = useCallback(() => {
+    queryClient.invalidateQueries();
+  }, [queryClient]);
   const { pathname } = useLocation();
   const pageContext = getPageContext(pathname);
 
   const [isMounted, setIsMounted] = useState(isOpen);
   const [isShown, setIsShown] = useState(false);
   const [messages, setMessages] = useState(loadHistory);
+  const [conversations, setConversations] = useState(loadConversations);
+  // 'chat' | 'history'. History is a STATE of the panel, not a route: the
+  // header and composer stay exactly where they are, so it is somewhere you
+  // look rather than somewhere you navigate to and have to find a way out of.
+  const [view, setView] = useState('chat');
+  // Set when a write SUCCEEDS, so the follow-up strip can offer what comes
+  // after an order exists rather than what comes after asking to make one.
+  // Cleared the moment anything else is asked — it describes the last thing
+  // that HAPPENED, not a standing preference.
+  const [outcomeKey, setOutcomeKey] = useState(null);
+  // The orders the LAST write produced. Held so that "Assign order" means
+  // "assign the ones we just made" rather than "name an order for me".
+  //   { ids: string[], booking: object|null }
+  // `booking` is only populated for a single create, where the operator picks
+  // the rider by hand; a batch goes to the optimiser-backed endpoint instead.
+  const [lastCreated, setLastCreated] = useState({ ids: [], booking: null });
   const [value, setValue] = useState('');
   const [isSending, setIsSending] = useState(false);
   const [context, setContext] = useState({ lastIntentId: null, lastParams: null });
@@ -396,7 +499,14 @@ const AIPanel = ({ isOpen, onClose }) => {
               meta: r.deliveryaddress
             }))
           },
-          detail: `Creating them again produces a SECOND set of orders to the same customers — a second real rider to each door. Only do it if that is what you mean.`,
+          detail: [
+            `Creating them again produces a SECOND set of orders to the same customers — a second real rider to each door. Only do it if that is what you mean.`,
+            run.already.some((r) => r.__previousMilerUserId != null)
+              ? 'They are also dispatched straight back to their previous riders, so those riders get the same drops twice.'
+              : null
+          ]
+            .filter(Boolean)
+            .join(' '),
           form: {
             kind: 'confirmBulk',
             status: 'open',
@@ -448,7 +558,17 @@ const AIPanel = ({ isOpen, onClose }) => {
           run.unpriced.length ? `${run.unpriced.length} couldn’t be priced at today’s tariff.` : null,
           run.changed.length
             ? `${run.changed.length} price${run.changed.length === 1 ? '' : 's'} changed since ${describeDay(draft.day)}.`
-            : null
+            : null,
+          // The confirm button now does two things, so it has to say two
+          // things. Creating and then silently dispatching to real riders is
+          // more than "create" promises.
+          (() => {
+            const withRider = run.valid.filter((r) => r.__previousMilerUserId != null).length;
+            if (!withRider) return null;
+            return withRider === run.valid.length
+              ? `All ${withRider} go straight back to the rider who ran them on ${describeDay(draft.day)} — no separate assign step.`
+              : `${withRider} of ${run.valid.length} go straight back to ${describeDay(draft.day)}’s rider; the rest stay pending.`;
+          })()
         ]
           .filter(Boolean)
           .join(' '),
@@ -593,6 +713,7 @@ const AIPanel = ({ isOpen, onClose }) => {
       lastQuestionRef.current = question;
       setValue('');
       setIsPinned(true);
+      setOutcomeKey(null);
       setMessages((prev) => [...prev, { id: makeId(), sender: 'user', text: question, timestamp: now() }]);
       setIsSending(true);
 
@@ -685,7 +806,25 @@ const AIPanel = ({ isOpen, onClose }) => {
           }
 
           if (result.form?.kind === 'assignRider') {
-            const started = await startAssignFlow(result.form.booking);
+            // "Assign a rider" with no order named in the sentence used to go
+            // straight to "Which order? Give me its number" — which, right
+            // after creating thirteen of them, is the assistant asking the
+            // operator to repeat something it just did itself.
+            //
+            // If the last write is still the most recent thing that happened,
+            // that IS the answer to "which order". Only fall through to asking
+            // when the question named no order AND nothing recent was created.
+            // Every assignment goes through the same two questions: which
+            // order, then which rider. There used to be a bulk shortcut here
+            // for a freshly created run, but it routed through the hub console
+            // — an endpoint this console's logins are not granted — so it read
+            // as the fast path and then refused. One flow that works beats two
+            // where the quicker one usually cannot run.
+            //
+            // A run of exactly one still skips the first question: the order is
+            // not in doubt, so asking which one would be theatre.
+            const target = result.form.booking || (lastCreated.ids.length === 1 ? lastCreated.booking : null);
+            const started = await startAssignFlow(target);
             setFlow(started.flow);
             await renderFlowStep(started, finishAssign);
             setIsSending(false);
@@ -773,7 +912,11 @@ const AIPanel = ({ isOpen, onClose }) => {
         setIsSending(false);
       }
     },
-    [context, isSending, flow, renderFlowStep, finishOrder, finishBulk, finishAssign, finishRepeat, push]
+    // `lastCreated` belongs here. Without it this callback closes over the
+    // value from the render in which it was created — the empty array — so the
+    // batch shortcut would look at stale state and never fire, no matter how
+    // many orders had just been made.
+    [context, isSending, flow, renderFlowStep, finishOrder, finishBulk, finishAssign, finishRepeat, push, lastCreated]
   );
 
   const copyMessage = useCallback((m) => {
@@ -784,6 +927,10 @@ const AIPanel = ({ isOpen, onClose }) => {
       .catch(() => OpenToast('Could not copy', 'error', 1500));
   }, []);
 
+  // Wipes the thread without keeping it. The menu labels this destructively
+  // ("Delete this conversation") because that is what it does — it used to be
+  // offered as "New conversation" too, so the safe-sounding option and the
+  // destructive one ran the same code.
   const clearConversation = useCallback(() => {
     setMessages([]);
     setContext({ lastIntentId: null, lastParams: null });
@@ -792,6 +939,59 @@ const AIPanel = ({ isOpen, onClose }) => {
     setIsPinned(true);
   }, []);
 
+  // Archive-then-clear. Returns the new archive so callers that also want to
+  // load something can work from the updated list rather than stale state.
+  const archiveCurrent = useCallback(() => {
+    let next = conversations;
+    if (messages.length > 0) {
+      next = [{ id: `c${Date.now()}`, title: conversationTitle(messages), at: dayjs().toISOString(), messages }, ...conversations].slice(
+        0,
+        CONVERSATIONS_LIMIT
+      );
+      setConversations(next);
+      saveConversations(next);
+    }
+    return next;
+  }, [conversations, messages]);
+
+  const newConversation = useCallback(() => {
+    archiveCurrent();
+    clearConversation();
+    setView('chat');
+  }, [archiveCurrent, clearConversation]);
+
+  // Opening a past conversation archives whatever is on screen first, then
+  // lifts the chosen one OUT of the archive and makes it current — so a thread
+  // is never in two places at once, and reopening one does not silently
+  // duplicate it every time.
+  const openConversation = useCallback(
+    (id) => {
+      const archived = archiveCurrent();
+      const found = archived.find((c) => c.id === id);
+      if (!found) return;
+      const remaining = archived.filter((c) => c.id !== id);
+      setConversations(remaining);
+      saveConversations(remaining);
+      // Archived threads were written by the same broken counter.
+      setMessages(withUniqueIds(found.messages));
+      setContext({ lastIntentId: null, lastParams: null });
+      setFlow(null);
+      setView('chat');
+      pinnedRef.current = true;
+      setIsPinned(true);
+    },
+    [archiveCurrent]
+  );
+
+  const deleteConversation = useCallback(
+    (id) => {
+      const next = conversations.filter((c) => c.id !== id);
+      setConversations(next);
+      saveConversations(next);
+    },
+    [conversations]
+  );
+
   const setFormStatus = useCallback(
     (id, patch) => setMessages((prev) => prev.map((m) => (m.id === id ? { ...m, form: { ...m.form, ...patch } } : m))),
     []
@@ -809,13 +1009,19 @@ const AIPanel = ({ isOpen, onClose }) => {
         const { booking, __rider: rider } = message.form.draft;
         const res = await executeAssign(booking, rider);
         if (res.ok) {
+          refreshPageData();
           setFormStatus(message.id, { status: 'done' });
           setFlow(null);
           push({
             sender: 'assistant',
             text: `${res.bookingLabel} is now with ${describeRider(rider)}.`,
+            // Three outcomes, not two. The old copy assumed a failed push could
+            // only mean "no profile id", so a notify that returned 400 was
+            // reported as a successful notification. Say which one it was.
             detail: res.notified
               ? 'The rider has been notified.'
+              : rider?.milerprofileid
+              ? 'The order is assigned, but the notification failed — tell the rider yourself. See Sources.'
               : 'The assignment went through, but this rider has no profile id so no notification was sent.',
             sourceCalls: res.sourceCalls
           });
@@ -834,42 +1040,20 @@ const AIPanel = ({ isOpen, onClose }) => {
       //
       // batch-assign, never N single assigns: it is the only call that sequences
       // each rider's stops afterwards (doormile-flow.md §4).
-      if (message.form.kind === 'confirmBatchAssign') {
-        const ids = message.form.draft.bookingIds;
-        const res = await executeBatchAssign(ids);
-        if (res.ok) {
-          setFormStatus(message.id, { status: 'done' });
-          push({
-            sender: 'assistant',
-            text: `Assigned ${res.assigned} of ${ids.length} order${ids.length === 1 ? '' : 's'}.`,
-            detail: [
-              res.sequenced ? `${res.sequenced} rider route${res.sequenced === 1 ? '' : 's'} sequenced by the optimiser.` : null,
-              res.notified ? `${res.notified} rider${res.notified === 1 ? '' : 's'} notified.` : null,
-              res.skipped ? `${res.skipped} could not be assigned — no rider in range, most likely.` : null
-            ]
-              .filter(Boolean)
-              .join(' '),
-            sourceCalls: res.sourceCalls
-          });
-        } else {
-          setFormStatus(message.id, { status: 'failed', error: res.message });
-          push({
-            sender: 'assistant',
-            state: { tone: STATUS.error, iconKey: 'warning', title: 'Nothing was assigned', body: res.message },
-            sourceCalls: res.sourceCalls
-          });
-        }
-        return;
-      }
-
       // ---- conversational order: submit what the chat gathered -------------
       if (message.form.kind === 'confirmOrder') {
         const draft = message.form.draft;
         const payload = buildOrderPayload(draft, draft.__pickup);
         const res = await executeCreateOrder(payload);
         if (res.ok) {
+          refreshPageData();
           setFormStatus(message.id, { status: 'done' });
           setFlow(null);
+          // The order now EXISTS, so assigning a rider becomes the next step.
+          // The auto-hand-off below covers the normal path; this covers the
+          // case where it cannot run (no bookingid came back) and gives the
+          // operator the same step as a chip instead of a dead end.
+          setOutcomeKey(ORDER_CREATED);
           push({
             sender: 'assistant',
             text: `Created order ${res.bookingno || res.id || ''}.`.trim(),
@@ -883,6 +1067,7 @@ const AIPanel = ({ isOpen, onClose }) => {
           // replacing them rather than silently overwriting a proximity-scored
           // choice.
           const booking = { bookingid: res.id, bookingno: res.bookingno, ...(res.created || {}) };
+          if (booking.bookingid) setLastCreated({ ids: [booking.bookingid], booking });
           if (booking.bookingid) {
             const started = await startAssignFlow(booking);
             setFlow(started.flow);
@@ -904,6 +1089,7 @@ const AIPanel = ({ isOpen, onClose }) => {
         try {
           const res = await executeCreateCustomer(message.form.payload);
           if (res.ok) {
+            refreshPageData();
             setFormStatus(message.id, { status: 'done' });
             setFlow(null);
             push({
@@ -936,6 +1122,9 @@ const AIPanel = ({ isOpen, onClose }) => {
         // alternative that includes today's existing rows.
         const { rows, invalid, ...shared } = values?.rows ? values : message.form.draft;
         const res = await executeCreateBulk(rows, shared);
+        // Unconditional: a bulk import is normally PARTIAL, so there is no
+        // res.ok to gate on, and any row that landed has changed both tables.
+        refreshPageData();
         // A bulk import is normally a PARTIAL result, so the outcome is reported
         // per row rather than as a single success/failure. Without that, the only
         // safe response to any error is to re-submit everything — which
@@ -944,6 +1133,26 @@ const AIPanel = ({ isOpen, onClose }) => {
           status: res.failed && !res.created ? 'failed' : 'done',
           error: res.failed ? `${res.failed} row(s) failed` : undefined
         });
+        // Partial success still means orders exist and need riders. Only a run
+        // where nothing landed leaves nothing to assign.
+        if (res.created > 0) setOutcomeKey(ORDER_CREATED);
+        // A repeat carries yesterday's rider on each row, so the new copies go
+        // straight back to whoever ran them — no second question. Rows with no
+        // previous rider simply stay pending, and a CSV import has none at all,
+        // so this is a no-op there rather than a special case.
+        const repeatAssign = rows.some((r) => r.__previousMilerUserId != null)
+          ? await executeRepeatAssign(res.createdPairs, rows)
+          : null;
+        if (repeatAssign?.assigned) refreshPageData();
+
+        // Remember exactly which ones, so "Assign order" can act on them —
+        // minus any that just got a rider automatically.
+        const stillUnassigned = repeatAssign
+          ? (res.createdPairs || [])
+              .filter(({ index }) => rows?.[index]?.__previousMilerUserId == null)
+              .map((p) => p.bookingid)
+          : res.createdIds;
+        if (stillUnassigned?.length) setLastCreated({ ids: stillUnassigned, booking: null });
         push({
           sender: 'assistant',
           text: `Created ${res.created} of ${rows.length} order${rows.length === 1 ? '' : 's'}.`,
@@ -954,28 +1163,34 @@ const AIPanel = ({ isOpen, onClose }) => {
                 items: res.failures.map((f) => ({ label: rows[f.index]?.customer_name || `Row ${f.index + 1}`, meta: f.reason }))
               }
             : undefined,
-          detail:
+          detail: [
             res.failed === 0
-              ? `All rows submitted${res.batches > 1 ? ` in ${res.batches} batches` : ''}. They appear on the Orders page under Pending.`
+              ? `All rows submitted${res.batches > 1 ? ` in ${res.batches} batches` : ''}.`
               : `${res.created} landed and ${res.failed} did not. Only the failed rows need re-submitting — re-sending everything would duplicate the ones that worked.`,
+            // Stated plainly, including what was NOT done. An operator who
+            // believes all 13 went back to their riders will not check the
+            // three that stayed pending.
+            repeatAssign?.assigned
+              ? `${repeatAssign.assigned} went straight back to yesterday's rider across ${repeatAssign.riders} rider${
+                  repeatAssign.riders === 1 ? '' : 's'
+                }, notified automatically.`
+              : null,
+            repeatAssign?.skipped ? `${repeatAssign.skipped} had no rider yesterday and are waiting for one.` : null,
+            repeatAssign?.failures?.length
+              ? `${repeatAssign.failures.length} could not be re-assigned — that rider may no longer be active.`
+              : null,
+            // Sequencing is what the hub batch endpoint would have added.
+            repeatAssign?.assigned ? 'Stop order is unchanged from yesterday, not re-optimised.' : null
+          ]
+            .filter(Boolean)
+            .join(' '),
           // Rejected rows plus anything the check had already set aside, in the
           // template's own columns, so they can be fixed and re-uploaded
           // instead of re-sending a file that would double-book what landed.
           downloadRows: [...res.failures.map((f) => ({ ...rows[f.index], error: f.reason })), ...(invalid || [])],
-          sourceCalls: res.sourceCalls
+          sourceCalls: [...(res.sourceCalls || []), ...(repeatAssign?.sourceCalls || [])]
         });
 
-        // Only offered when the endpoint actually returned the ids. No ids means
-        // "cannot offer assignment" — never "nothing was created".
-        if (res.createdIds?.length) {
-          push({
-            sender: 'assistant',
-            text: `Assign ${res.createdIds.length} of them now?`,
-            detail:
-              'Riders are picked by the backend and each one’s stops are sequenced by the route optimiser — that only happens through the batch endpoint, not by assigning one at a time.',
-            form: { kind: 'confirmBatchAssign', status: 'open', draft: { bookingIds: res.createdIds } }
-          });
-        }
         setFlow(null);
         return;
       }
@@ -987,7 +1202,13 @@ const AIPanel = ({ isOpen, onClose }) => {
         const payload = buildOrderPayload(values, values.__pickup);
         const res = await executeCreateOrder(payload);
         if (res.ok) {
+          refreshPageData();
           setFormStatus(message.id, { status: 'done' });
+          // Same as the confirmOrder branch: the order exists, so the next
+          // step is a rider. This path has no auto-hand-off at all, which is
+          // exactly why the chip matters here.
+          setOutcomeKey(ORDER_CREATED);
+          if (res.id) setLastCreated({ ids: [res.id], booking: { bookingid: res.id, bookingno: res.bookingno } });
           push({
             sender: 'assistant',
             text: `Created order ${res.bookingno || res.id || ''}.`.trim(),
@@ -1017,6 +1238,7 @@ const AIPanel = ({ isOpen, onClose }) => {
         const payload = buildCustomerPayload(values);
         const res = await executeCreateCustomer(payload);
         if (res.ok) {
+          refreshPageData();
           setFormStatus(message.id, { status: 'done' });
           push({
             sender: 'assistant',
@@ -1132,7 +1354,7 @@ const AIPanel = ({ isOpen, onClose }) => {
   //   2. the intent's own follow-ups, for a TYPED question the map doesn't
   //      cover — this is what the in-message chips used to render
   //   3. this page's own suggestions, so the strip is never empty
-  const followUps = hasThread ? getFollowUps(lastAsked) : [];
+  const followUps = hasThread ? getFollowUps(outcomeKey || lastAsked) : [];
   const intentFollowUps = hasThread && followUps.length === 0 ? toChips(lastAnswerFollowUps) : [];
   const nextSteps = followUps.length > 0 ? followUps : intentFollowUps;
   const suggestionItems = hasThread
@@ -1190,6 +1412,15 @@ const AIPanel = ({ isOpen, onClose }) => {
                   close button is ambiguous (collapse? navigate? close?),
                   whereas these draw the side panel itself getting wider or
                   narrower, which is literally what the control does. */}
+              <IconButton
+                size="sm"
+                variant="ghost"
+                label={view === 'history' ? 'Back to the conversation' : 'Conversation history'}
+                tooltip={view === 'history' ? 'Back to the conversation' : 'History'}
+                aria-pressed={view === 'history'}
+                icon={view === 'history' ? <LuMessageSquare /> : <LuHistory />}
+                onClick={() => setView((v) => (v === 'history' ? 'chat' : 'history'))}
+              />
               <IconButton
                 size="sm"
                 variant="ghost"
@@ -1203,8 +1434,12 @@ const AIPanel = ({ isOpen, onClose }) => {
                 hasChevron={false}
                 button={{ label: 'Conversation options', icon: <MoreOutlined />, isIconOnly: true, variant: 'ghost', size: 'sm' }}
                 items={[
-                  { label: 'New conversation', onClick: clearConversation },
-                  { label: 'Clear conversation', onClick: clearConversation }
+                  // These were both wired to clearConversation, so the safe
+                  // option and the destructive one did the same thing. Now
+                  // "New" keeps the thread and "Delete" says that it does not.
+                  { label: 'New conversation', onClick: newConversation },
+                  { label: 'Conversation history', onClick: () => setView('history') },
+                  { label: 'Delete this conversation', onClick: clearConversation }
                 ]}
               />
               <IconButton
@@ -1225,7 +1460,38 @@ const AIPanel = ({ isOpen, onClose }) => {
         {/* ---- conversation / welcome ---- */}
         <VStack className="dai-scroll-wrap" gap={0} padding={0}>
           <VStack ref={scrollRef} className="dai-scroll" gap={0} padding={0} onScroll={handleScroll}>
-            {hasThread ? (
+            {view === 'history' ? (
+              <VStack className="dai-history" gap={2} padding={0}>
+                {conversations.length === 0 ? (
+                  <VStack gap={1} padding={0}>
+                    <Text className="dai-history-empty-title">No past conversations yet</Text>
+                    <Text className="dai-history-empty">
+                      Starting a new conversation keeps the current one here, so you can come back to it.
+                    </Text>
+                  </VStack>
+                ) : (
+                  conversations.map((c) => (
+                    <HStack key={c.id} className="dai-history-row" gap={2} padding={0} vAlign="center">
+                      <button type="button" className="dai-history-open" onClick={() => openConversation(c.id)}>
+                        <Text className="dai-history-title">{c.title}</Text>
+                        <Text className="dai-history-meta">
+                          {dayjs(c.at).format('DD MMM · hh:mm A')} · {c.messages.length} message
+                          {c.messages.length === 1 ? '' : 's'}
+                        </Text>
+                      </button>
+                      <IconButton
+                        size="sm"
+                        variant="ghost"
+                        label={`Delete conversation: ${c.title}`}
+                        tooltip="Delete"
+                        icon={<LuTrash2 />}
+                        onClick={() => deleteConversation(c.id)}
+                      />
+                    </HStack>
+                  ))
+                )}
+              </VStack>
+            ) : hasThread ? (
               <VStack className="dai-thread" gap={4} padding={0}>
                 {messages.map((m) => (
                   <AIMessage
@@ -1270,7 +1536,7 @@ const AIPanel = ({ isOpen, onClose }) => {
             conversation the strip drops to this page's four primary
             suggestions — twenty chips permanently above the composer would
             claim ~260px of a panel whose whole job is the conversation. */}
-        {suggestionItems.length > 0 && (
+        {view === 'chat' && suggestionItems.length > 0 && (
           <VStack className="dai-suggestions-bar" data-compact={isCompactStrip} gap={1} padding={0}>
             <Text className="dai-section-label">
               {hasThread ? (nextSteps.length > 0 ? 'Next steps' : 'Ask something else') : 'Suggested questions'}
diff --git a/src/pages/nearle/assistant/DoormileAI/AIRowsStep.js b/src/pages/nearle/assistant/DoormileAI/AIRowsStep.js
index c458ae2..d6d66b4 100644
--- a/src/pages/nearle/assistant/DoormileAI/AIRowsStep.js
+++ b/src/pages/nearle/assistant/DoormileAI/AIRowsStep.js
@@ -100,8 +100,12 @@ const AIRowsStep = ({ onSubmit, onCancel, isBusy }) => {
             </Text>
           )}
 
-          {parsed.errors.slice(0, 5).map((e) => (
-            <Text key={e.line} className="dai-field-err">
+          {/* Keyed by line AND index: one row can fail several validations, so
+              `line` alone is not unique and React logged "two children with the
+              same key" for every repeat — seen live as a 1/2/3 cycle. Same
+              shape the list renderer in AIParts already uses. */}
+          {parsed.errors.slice(0, 5).map((e, i) => (
+            <Text key={`${e.line}-${i}`} className="dai-field-err">
               Line {e.line}: {e.reason}
             </Text>
           ))}
diff --git a/src/pages/nearle/assistant/DoormileAI/pageContext.js b/src/pages/nearle/assistant/DoormileAI/pageContext.js
index 61cbce8..dbb3ca1 100644
--- a/src/pages/nearle/assistant/DoormileAI/pageContext.js
+++ b/src/pages/nearle/assistant/DoormileAI/pageContext.js
@@ -65,7 +65,7 @@ export const CHIP_LABELS = {
   'How many orders this week?': 'Orders this week',
   'Total revenue this week': 'Revenue this week',
   'How many customers do we have?': 'Customers',
-  'Assign a rider': 'Assign rider',
+  'Assign a rider': 'Assign order',
   "Repeat yesterday's orders": 'Repeat yesterday'
 };
 
@@ -81,6 +81,13 @@ const ASSIGN_TEXT = 'Assign a rider';
 // blank create form.
 const REPEAT_TEXT = "Repeat yesterday's orders";
 
+// Not a question — an OUTCOME. AIPanel sets this as the follow-up key when a
+// create or repeat run actually succeeds, so the next steps offered are the
+// ones that follow from an order existing, rather than the ones that follow
+// from having asked to make one. Assigning a rider only makes sense on this
+// side of the write.
+export const ORDER_CREATED = '__orderCreated';
+
 const ORDERS = {
   label: 'Orders',
   suggestions: [
@@ -215,12 +222,14 @@ const FOLLOW_UPS = {
   // duplicate a step the product performs on its own or fire it too early.
   //
   // ASSIGN_TEXT belongs on the questions below that surface orders which
-  // already EXIST and are waiting for a rider.
+  // already EXIST and are waiting for a rider — and on ORDER_CREATED, which is
+  // keyed off the write succeeding rather than off anything that was asked.
   'Create an order': [REPEAT_TEXT, 'How many pending orders today?', 'Which orders are delayed?', 'Create multiple orders'],
   'Create multiple orders': ['How many pending orders today?', 'How many orders today?'],
   [REPEAT_TEXT]: ['How many pending orders today?', 'How many orders today?', 'Orders today vs yesterday'],
   'Create a customer': ['Create an order', 'How many customers do we have?'],
   [ASSIGN_TEXT]: ['How many pending orders today?', 'Which orders are delayed?', 'How many riders are active?'],
+  [ORDER_CREATED]: [ASSIGN_TEXT, 'How many pending orders today?', 'Which orders are delayed?', 'Create an order'],
 
   // --- order volume ---
   "Give me today's operations summary": [
diff --git a/src/pages/nearle/assistant/assignActions.js b/src/pages/nearle/assistant/assignActions.js
index 806833c..c93fe8b 100644
--- a/src/pages/nearle/assistant/assignActions.js
+++ b/src/pages/nearle/assistant/assignActions.js
@@ -1,4 +1,4 @@
-import { getMilers, assignMilerToBooking, batchAssignBookings } from 'pages/api/doormileApi';
+import { getMilers, assignMilerToBooking } from 'pages/api/doormileApi';
 import { buildMilerLookup, notifyRider } from 'pages/api/api';
 
 // ==============================|| Doormile AI — assigning a rider ||============================== //
@@ -95,9 +95,22 @@ export const executeAssign = async (booking, rider) => {
     // CLAUDE.md §9: any mutation that affects a rider is followed by a push.
     // It is deliberately NOT allowed to fail the assignment — the order IS
     // assigned at this point, and reporting otherwise would be a lie.
+    // Whether the push ACTUALLY went out, not whether it could have been
+    // attempted. This used to be reported as `Boolean(rider.milerprofileid)`
+    // — i.e. "this rider has an id, so assume they were told" — which is a
+    // different claim entirely. Caught live: notify returned 400 and the
+    // assistant still said "The rider has been notified."
+    //
+    // The assignment itself is unaffected; it had already landed. But a
+    // dispatcher who believes a rider was pinged does not follow up, and this
+    // bot's whole contract is that it never states something it has not
+    // confirmed.
+    let notified = false;
+
     if (rider.milerprofileid) {
       try {
         await notifyRider(rider.milerprofileid);
+        notified = true;
         sourceCalls.push({
           name: 'notifyRider',
           target: `POST /admin/milers/${rider.milerprofileid}/notify`,
@@ -123,7 +136,7 @@ export const executeAssign = async (booking, rider) => {
       });
     }
 
-    return { ok: true, rider, bookingLabel, notified: Boolean(rider.milerprofileid), sourceCalls };
+    return { ok: true, rider, bookingLabel, notified, sourceCalls };
   } catch (err) {
     // doormileAxios rejects with the response BODY; the status rides on
     // err.httpStatus.
@@ -141,74 +154,99 @@ export const executeAssign = async (booking, rider) => {
   }
 };
 
-// ---- many orders ------------------------------------------------------------
+// ---- repeat a run, keeping each order with the rider who ran it last --------
 //
-// The backend picks the riders here, not the operator: batch-assign spreads the
-// set across riders within range and then sequences each one's stops. Its reply
-// is per-booking, so a partial result is reported per row rather than as a bare
-// success.
-export const executeBatchAssign = async (bookingIds, maxPerRider = 5) => {
+// A repeated run is the SAME drops to the SAME doors. The rider who did them
+// yesterday already knows the buzzer, the gate code and which side of the
+// building to park on, so re-deriving an assignment from scratch throws away
+// the one piece of routing knowledge the previous day produced.
+//
+// Deliberately built on /admin/bookings/:id/assign-miler, one call per order,
+// rather than the hub batch endpoint: batch-assign lets the BACKEND choose
+// riders, which is the opposite of the intent here, and it is refused to every
+// non-hub login anyway (403, confirmed live).
+//
+// The trade-off this accepts: assigning individually does not sequence a
+// rider's stops. Yesterday's run was already sequenced for these same drops,
+// so the ordering is not arbitrary — but it is not recomputed either, and the
+// caller states that rather than implying a fresh optimisation.
+export const executeRepeatAssign = async (createdPairs, rows) => {
   const started = Date.now();
-  const call = {
-    name: 'batchAssignBookings',
-    target: 'POST /hub/bookings/batch-assign',
-    stats: `${bookingIds.length} order${bookingIds.length === 1 ? '' : 's'}`
-  };
 
-  try {
-    const res = await batchAssignBookings(bookingIds, maxPerRider);
-    const duration = `${Date.now() - started}ms`;
-    const results = Array.isArray(res?.results) ? res.results : null;
-    const assigned = Number.isFinite(res?.assigned) ? res.assigned : results?.filter((r) => r.assigned).length;
+  // Only rows whose source order actually had a rider. A blank one is not a
+  // failure — yesterday's copy was never assigned either.
+  const targets = (createdPairs || [])
+    .map(({ index, bookingid }) => ({ bookingid, mileruserid: rows?.[index]?.__previousMilerUserId ?? null }))
+    .filter((t) => t.mileruserid != null);
 
-    const sourceCalls = [
-      {
-        ...call,
-        duration,
-        status: 'complete',
-        stats: `${assigned ?? '?'} assigned, ${res?.riderssequenced ?? 0} rider route${res?.riderssequenced === 1 ? '' : 's'} sequenced`
-      }
-    ];
+  if (!targets.length) {
+    return { ok: true, assigned: 0, skipped: (createdPairs || []).length, failures: [], notified: 0, sourceCalls: [] };
+  }
 
-    // One push per rider, not per order — ten orders to one rider is one buzz.
-    const { lookup } = await loadRiders().catch(() => ({ lookup: null }));
-    const notified = new Set();
-    if (results && lookup) {
-      // eslint-disable-next-line no-restricted-syntax
-      for (const r of results) {
-        const rider = r.mileruserid ? lookup.byUserId.get(String(r.mileruserid)) : null;
-        if (rider?.milerprofileid && !notified.has(rider.milerprofileid)) {
-          notified.add(rider.milerprofileid);
+  const { lookup } = await loadRiders().catch(() => ({ lookup: null }));
+  const assignedRiders = new Set();
+  const failures = [];
+  let assigned = 0;
+
+  // Sequential on purpose. These are writes against real dispatch records, and
+  // firing a burst of them concurrently makes a partial failure much harder to
+  // report accurately — which order did not land, and to whom.
+  // eslint-disable-next-line no-restricted-syntax
+  for (const t of targets) {
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      await assignMilerToBooking(t.bookingid, { mileruserid: Number(t.mileruserid) });
+      assigned += 1;
+      assignedRiders.add(String(t.mileruserid));
+    } catch (err) {
+      failures.push({ bookingid: t.bookingid, reason: err.message || `HTTP ${err.httpStatus || '?'}` });
+    }
+  }
+
+  const sourceCalls = [
+    {
+      name: 'assignMilerToBooking',
+      target: 'POST /admin/bookings/:id/assign-miler',
+      duration: `${Date.now() - started}ms`,
+      status: failures.length ? 'error' : 'complete',
+      stats: `${assigned} of ${targets.length} re-assigned to yesterday's rider`,
+      errorMessage: failures.length ? `${failures.length} could not be assigned` : undefined
+    }
+  ];
+
+  // One push per rider, not per order — a rider getting ten of yesterday's
+  // drops back should feel one buzz, not ten.
+  let notified = 0;
+  if (lookup) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const userid of assignedRiders) {
+      const rider = lookup.byUserId.get(userid);
+      if (rider?.milerprofileid) {
+        try {
           // eslint-disable-next-line no-await-in-loop
-          await notifyRider(rider.milerprofileid).catch(() => {});
+          await notifyRider(rider.milerprofileid);
+          notified += 1;
+        } catch {
+          // Notification failure never fails the assignment — the order IS
+          // assigned by this point. It is reported, not swallowed.
         }
       }
-      sourceCalls.push({
-        name: 'notifyRider',
-        target: '/admin/milers/:id/notify',
-        status: 'complete',
-        stats: `${notified.size} rider${notified.size === 1 ? '' : 's'} notified`
-      });
     }
-
-    return {
-      ok: (assigned ?? 0) > 0,
-      assigned: assigned ?? 0,
-      skipped: res?.skipped ?? Math.max(0, bookingIds.length - (assigned ?? 0)),
-      sequenced: res?.riderssequenced ?? 0,
-      results,
-      notified: notified.size,
-      sourceCalls
-    };
-  } catch (err) {
-    const status = err.httpStatus;
-    const message = status
-      ? `POST /hub/bookings/batch-assign returned ${status}${err.message ? ` — ${err.message}` : ''}. Nothing was assigned.`
-      : `${err.message || 'The request failed'} — nothing was assigned.`;
-    return {
-      ok: false,
-      message,
-      sourceCalls: [{ ...call, duration: `${Date.now() - started}ms`, status: 'error', errorMessage: message }]
-    };
+    sourceCalls.push({
+      name: 'notifyRider',
+      target: 'POST /admin/milers/:id/notify',
+      status: notified === assignedRiders.size ? 'complete' : 'error',
+      stats: `${notified} of ${assignedRiders.size} rider${assignedRiders.size === 1 ? '' : 's'} notified`
+    });
   }
+
+  return {
+    ok: assigned > 0,
+    assigned,
+    skipped: (createdPairs || []).length - targets.length,
+    failures,
+    notified,
+    riders: assignedRiders.size,
+    sourceCalls
+  };
 };
diff --git a/src/pages/nearle/assistant/assignFlow.js b/src/pages/nearle/assistant/assignFlow.js
index ab1bf0c..b5e0570 100644
--- a/src/pages/nearle/assistant/assignFlow.js
+++ b/src/pages/nearle/assistant/assignFlow.js
@@ -1,4 +1,5 @@
 import { scanBookings } from './intents';
+import { getStatusMeta } from 'themes/dt/status';
 import { loadRiders, riderOptions, currentAssignee, describeRider } from './assignActions';
 import { advanceFlow, startFlow, answerFlowStep } from './flowEngine';
 
@@ -25,10 +26,56 @@ import { advanceFlow, startFlow, answerFlowStep } from './flowEngine';
 export const ASSIGN_STEPS = [
   {
     id: 'bookingno',
-    type: 'text',
-    ask: 'Which order? Give me its number — for example DM-BK-0D915D43-33705.',
-    // Seeded by the panel when this follows a create, so it is skipped there.
+    // A SELECT, not a text field.
+    //
+    // This used to ask "Give me its number — for example DM-BK-0D915D43-33705"
+    // and wait for it to be typed. Two problems with that. An operator does not
+    // know the number by heart, so the question sent them to another screen to
+    // go and read one. And it was the fallback reached whenever a create did
+    // not hand back a booking id — so the moment the API response shape was
+    // anything other than expected, "assign the order I just made" turned into
+    // "recite a 20-character reference".
+    //
+    // A list removes the failure mode rather than patching it: unassigned
+    // orders first, because those are the ones anyone is here to assign.
+    //
+    // `resolve` below is kept, so typing a number still works — the engine runs
+    // it for a picked option too, and it already matches on bookingid.
+    type: 'select',
+    ask: 'Which order should I assign?',
+    // The list is built from a live scan, so it can come back empty — an API
+    // failure, or genuinely no bookings. `resolve` below still accepts a typed
+    // number, so say that rather than leaving Cancel as the only way out.
+    emptyHint: 'I couldn’t load the order list. Type the order number instead — for example DM-BK-0D915D43-33705.',
+    // Seeded by the panel when this follows a create, so it is skipped there —
+    // that path goes straight to the rider list.
     when: (d) => !d.booking,
+    options: async () => {
+      const scan = await scanBookings();
+      const { lookup } = await loadRiders().catch(() => ({ lookup: null }));
+
+      return [...(scan.rows || [])]
+        .map((b) => ({ b, holder: lookup ? currentAssignee(b, lookup) : null }))
+        // Unassigned first; the API already returns newest-first, and that
+        // order is preserved within each group by a stable sort.
+        .sort((x, y) => Number(Boolean(x.holder)) - Number(Boolean(y.holder)))
+        // A dropdown is for picking, not for browsing. Past this many the
+        // operator is better served by naming the order.
+        .slice(0, 30)
+        .map(({ b, holder }) => ({
+          value: String(b.bookingid),
+          label: [
+            b.bookingno || `#${b.bookingid}`,
+            // A raw booking carries `status`; `orderstatus` is the mapped
+            // field the LIST pages add. Reading the wrong one made every
+            // option in this dropdown say "Unknown" — seen live.
+            getStatusMeta(b.status ?? b.orderstatus).label,
+            holder ? `held by ${describeRider(holder)}` : 'unassigned'
+          ]
+            .filter(Boolean)
+            .join(' · ')
+        }));
+    },
     resolve: async (raw) => {
       const needle = String(raw || '')
         .trim()
@@ -36,14 +83,32 @@ export const ASSIGN_STEPS = [
       if (!needle) return { error: 'I need an order number.' };
 
       const scan = await scanBookings();
-      const found = scan.rows.find(
-        (b) =>
-          String(b.bookingno || '').toLowerCase() === needle ||
-          String(b.bookingid) === needle ||
-          String(b.bookingno || '')
-            .toLowerCase()
-            .includes(needle)
+
+      // EXACT matches win across the whole list before any fuzzy one is
+      // considered. The old version tested all three conditions per row inside
+      // a single find(), so row ORDER decided the winner: a row whose
+      // bookingno merely CONTAINED the needle could match before the row whose
+      // bookingid actually equalled it.
+      //
+      // That is not theoretical. Picking from the dropdown sends a bare
+      // numeric bookingid as the answer, and every bookingno ends in a digit
+      // run — so "32143" substring-matched DM-BK-81DFAF19-32143 while some
+      // other booking genuinely had id 32143. The assignment then went to a
+      // different order than the one on screen, which reads as "it said it
+      // assigned but nothing updated".
+      const exact = scan.rows.find(
+        (b) => String(b.bookingid) === needle || String(b.bookingno || '').toLowerCase() === needle
       );
+
+      // Substring is a convenience for someone typing part of a reference, so
+      // it needs enough characters to identify one order. Below this it is
+      // guesswork — "1" would match most of the list.
+      const MIN_FUZZY = 4;
+      const found =
+        exact ||
+        (needle.length >= MIN_FUZZY
+          ? scan.rows.find((b) => String(b.bookingno || '').toLowerCase().includes(needle))
+          : null);
       if (!found) {
         return {
           error: scan.truncated
@@ -84,10 +149,34 @@ export const ASSIGN_STEPS = [
       const { milers } = await loadRiders();
       return riderOptions(milers);
     },
-    // The whole miler record travels with the answer: the assign call needs its
-    // `userid` and the notification needs its `milerprofileid`, and those are
-    // different fields on the same record.
-    apply: (d, v, option) => ({ ...d, mileruserid: v, __rider: option?.record })
+    // Resolved rather than taken straight from the clicked option.
+    //
+    // `apply` used to read `option?.record`, which is only populated when a
+    // button was CLICKED. Answer this step by typing — a rider's name, or an
+    // id — and option is undefined, so __rider was undefined, and executeAssign
+    // then threw on `rider.userid` inside its try/catch. The operator saw a
+    // failed assignment with "Cannot read properties of undefined" instead of
+    // an answer.
+    //
+    // Resolving here means both paths produce a real miler record, and a name
+    // that matches nobody gets a sentence rather than a crash.
+    resolve: async (raw) => {
+      const needle = String(raw || '').trim();
+      if (!needle) return { error: 'I need a rider.' };
+
+      const { milers, lookup } = await loadRiders();
+      const rider =
+        lookup?.byUserId?.get(needle) ||
+        lookup?.byName?.get(needle.toLowerCase()) ||
+        (milers || []).find((m) => String(m.userid) === needle) ||
+        (milers || []).find((m) => (m.displayname || m.authname || '').toLowerCase() === needle.toLowerCase());
+
+      if (!rider) return { error: `I couldn't find a rider matching ${raw}. Pick one from the list.` };
+      // Both ids travel: assign-miler needs `userid`, the push needs
+      // `milerprofileid`, and they are different fields on the same record.
+      return { value: { mileruserid: String(rider.userid), rider } };
+    },
+    apply: (d, v) => ({ ...d, mileruserid: v.mileruserid, __rider: v.rider })
   }
 ];
 
diff --git a/src/pages/nearle/assistant/bulkOrderActions.js b/src/pages/nearle/assistant/bulkOrderActions.js
index b01a382..5e36bf7 100644
--- a/src/pages/nearle/assistant/bulkOrderActions.js
+++ b/src/pages/nearle/assistant/bulkOrderActions.js
@@ -202,6 +202,8 @@ export const executeCreateBulk = async (rows, shared) => {
   // The ids of what actually landed, so the run can be handed straight to
   // batch-assign without a re-scan of /admin/bookings to find them again.
   const createdIds = [];
+  // {index, bookingid} — the same ids, but each still tied to its source row.
+  const createdPairs = [];
 
   for (let b = 0; b < batches.length; b += 1) {
     const batch = batches[b];
@@ -209,7 +211,22 @@ export const executeCreateBulk = async (rows, shared) => {
     try {
       // eslint-disable-next-line no-await-in-loop
       const res = await createExpressBookingBulk(batch);
-      const perRow = Array.isArray(res?.data) ? res.data : Array.isArray(res?.results) ? res.results : null;
+      // Three shapes, most-nested first. The live endpoint returns
+      //   { data: { results: [ { index, success, bookingid, bookingno } ] } }
+      // — confirmed against api.doormile.com — and only the two flatter shapes
+      // were checked here. So `res.data` was an object rather than an array,
+      // `res.results` was undefined, perRow fell through to null, and the
+      // whole run was treated as all-or-nothing: the count came out right by
+      // accident (created += batch.length) while EVERY booking id was thrown
+      // away. That is why "Assign the 13 you just created" never appeared —
+      // there were no ids to offer.
+      const perRow = Array.isArray(res?.data?.results)
+        ? res.data.results
+        : Array.isArray(res?.data)
+        ? res.data
+        : Array.isArray(res?.results)
+        ? res.results
+        : null;
 
       if (res?.success === false) {
         failures.push(...batch.map((_, i) => ({ index: b * BULK_MAX + i, reason: res.message || 'Rejected' })));
@@ -228,10 +245,18 @@ export const executeCreateBulk = async (rows, shared) => {
       // rather than inventing a success count.
       if (perRow) {
         perRow.forEach((r, i) => {
-          if (r?.success === false || r?.error) failures.push({ index: b * BULK_MAX + i, reason: r.message || r.error || 'Rejected' });
+          const index = b * BULK_MAX + i;
+          if (r?.success === false || r?.error) failures.push({ index, reason: r.message || r.error || 'Rejected' });
           else {
             created += 1;
-            if (r?.bookingid) createdIds.push(r.bookingid);
+            // Paired with the row it came from, not just collected. A bare list
+            // of ids cannot say WHICH row produced which booking, and the
+            // repeat flow needs exactly that to hand each new order back to the
+            // rider who ran it last time.
+            if (r?.bookingid) {
+              createdIds.push(r.bookingid);
+              createdPairs.push({ index, bookingid: r.bookingid });
+            }
           }
         });
       } else {
@@ -265,6 +290,7 @@ export const executeCreateBulk = async (rows, shared) => {
     // Empty when the endpoint returned no per-row array — the caller must treat
     // "no ids" as "cannot offer assignment", not as "nothing was created".
     createdIds,
+    createdPairs,
     failed: failures.length,
     failures,
     batches: batches.length,
diff --git a/src/pages/nearle/assistant/repeatRuns.js b/src/pages/nearle/assistant/repeatRuns.js
index 4ae1350..df41b48 100644
--- a/src/pages/nearle/assistant/repeatRuns.js
+++ b/src/pages/nearle/assistant/repeatRuns.js
@@ -111,6 +111,11 @@ const toRow = (booking, customer, index) => ({
   itemdescription: booking.parcels?.[0]?.itemdescription || 'Order',
   quantity: Math.max(1, booking.parcels?.length || 1),
   notes: booking.notes || '',
+  // Who ran this drop last time. Carried so the repeat can hand the new order
+  // back to the same rider — they already know the door, the buzzer and the
+  // customer. Null when yesterday's order was never assigned, which is a
+  // normal case and simply means the copy stays pending.
+  __previousMilerUserId: booking.assignedmileruserid ?? null,
   __pickup: {
     address: booking.pickupaddress,
     pincode: booking.pickuppincode,
diff --git a/src/pages/nearle/clients/Tenants.js b/src/pages/nearle/clients/Tenants.js
index 05117f6..cbb93df 100644
--- a/src/pages/nearle/clients/Tenants.js
+++ b/src/pages/nearle/clients/Tenants.js
@@ -1298,33 +1298,33 @@ const Clients1 = () => {
           {KPI_META.map((item) => {
             const Icon = item.icon;
             const value = tenantStatusCounts[item.countKey] ?? 0;
-            // 'total' has no matching entry in STATUS_TABS (there's no "All"
-            // tab) — only the three status tiles switch tabs when clicked.
+            const total = tenantStatusCounts.total ?? 0;
             const tabIdx = STATUS_TABS.findIndex((t) => t.countKey === item.countKey);
             const clickable = tabIdx !== -1;
+            const share =
+              item.countKey === 'total'
+                ? `${value} clients`
+                : total > 0
+                ? `${Math.round((value / total) * 100)}% of ${total}`
+                : null;
+
             return (
-              <div
+              <StatCard
                 key={item.key}
-                role={clickable ? 'button' : undefined}
-                tabIndex={clickable ? 0 : undefined}
+                title={item.label}
+                // "all tenants" dropped — the card is already titled, and the
+                // count beside it says "N clients". `item.hint` is kept so any
+                // card that defines its own gloss still shows it.
+                range={item.hint}
+                value={value ?? 0}
+                meta={share}
+                icon={<Icon size={20} />}
+                color={item.color}
+                loading={getalltenantsIsLoading}
+                clickable={clickable}
+                isSelected={clickable && value0 === tabIdx}
                 onClick={clickable ? () => handleChange(tabIdx) : undefined}
-                onKeyDown={
-                  clickable
-                    ? (e) => {
-                        if (e.key === 'Enter' || e.key === ' ') handleChange(tabIdx);
-                      }
-                    : undefined
-                }
-                style={{ cursor: clickable ? 'pointer' : 'default', height: '100%' }}
-              >
-                <StatCard
-                  title={item.label}
-                  value={value ?? 0}
-                  icon={<Icon size={20} />}
-                  color={item.color}
-                  loading={getalltenantsIsLoading}
-                />
-              </div>
+              />
             );
           })}
         </KpiGrid>
diff --git a/src/pages/nearle/customers/customers.js b/src/pages/nearle/customers/customers.js
index 233df8f..d1e0dc7 100644
--- a/src/pages/nearle/customers/customers.js
+++ b/src/pages/nearle/customers/customers.js
@@ -141,6 +141,7 @@ const Customers = () => {
   const [addressInput, setAddressInput] = useState('');
   const [pickAddress, setPickAddress] = useState({});
   const [latLng, setLatLng] = useState({ latitude: '', longitude: '' });
+  const [activeFilter, setActiveFilter] = useState('all');
   const [sorting, setSorting] = useState([]);
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
   const [columnSizing, setColumnSizing] = useState({});
@@ -148,12 +149,18 @@ const Customers = () => {
   const { data: customers = [], isLoading } = useQuery({ queryKey: ['tenant-customers'], queryFn: getTenantCustomers });
 
   const rows = useMemo(() => {
-    if (!debouncedSearch) return customers;
+    let list = customers;
+    if (activeFilter === 'withEmail') {
+      list = list.filter((c) => Boolean(c.email));
+    } else if (activeFilter === 'withPhone') {
+      list = list.filter((c) => Boolean(c.phone));
+    }
+    if (!debouncedSearch) return list;
     const q = debouncedSearch.toLowerCase().trim();
-    return customers.filter((row) =>
+    return list.filter((row) =>
       [custName(row), custPhone(row), custEmail(row)].filter(Boolean).some((f) => String(f).toLowerCase().includes(q))
     );
-  }, [customers, debouncedSearch]);
+  }, [customers, activeFilter, debouncedSearch]);
 
   const stats = useMemo(() => {
     const total = customers.length;
@@ -389,10 +396,43 @@ const Customers = () => {
         />
 
         <KpiGrid>
-          <StatCard title="Total Customers" value={stats.total} icon={<MdOutlinePeopleAlt size={20} />} color={BRAND} />
-          <StatCard title="With Email" value={stats.withEmail} icon={<MdOutlineMailOutline size={20} />} color="#0ea5e9" />
-          <StatCard title="With Phone" value={stats.withPhone} icon={<MdOutlinePhoneAndroid size={20} />} color="#8b5cf6" />
-          <StatCard title="Total Bookings" value={stats.totalBookings} icon={<MdOutlineReceiptLong size={20} />} color="#10b981" />
+          <StatCard
+            title="Total Customers"
+            value={stats.total}
+            meta={`${stats.total} customers`}
+            icon={<MdOutlinePeopleAlt size={20} />}
+            color={BRAND}
+            clickable
+            isSelected={activeFilter === 'all'}
+            onClick={() => setActiveFilter('all')}
+          />
+          <StatCard
+            title="With Email"
+            value={stats.withEmail}
+            meta={`${stats.total > 0 ? Math.round((stats.withEmail / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdOutlineMailOutline size={20} />}
+            color="#0ea5e9"
+            clickable
+            isSelected={activeFilter === 'withEmail'}
+            onClick={() => setActiveFilter((prev) => (prev === 'withEmail' ? 'all' : 'withEmail'))}
+          />
+          <StatCard
+            title="With Phone"
+            value={stats.withPhone}
+            meta={`${stats.total > 0 ? Math.round((stats.withPhone / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdOutlinePhoneAndroid size={20} />}
+            color="#8b5cf6"
+            clickable
+            isSelected={activeFilter === 'withPhone'}
+            onClick={() => setActiveFilter((prev) => (prev === 'withPhone' ? 'all' : 'withPhone'))}
+          />
+          <StatCard
+            title="Total Bookings"
+            value={stats.totalBookings}
+            meta={`${stats.totalBookings} bookings`}
+            icon={<MdOutlineReceiptLong size={20} />}
+            color="#10b981"
+          />
         </KpiGrid>
 
         <DataCard
diff --git a/src/pages/nearle/deliveries/deliveries.js b/src/pages/nearle/deliveries/deliveries.js
index 223e4ef..8922981 100644
--- a/src/pages/nearle/deliveries/deliveries.js
+++ b/src/pages/nearle/deliveries/deliveries.js
@@ -15,10 +15,6 @@ import {
   MdCheckCircle,
   MdCancel,
   MdInventory2,
-  MdOutlineLocalShipping,
-  MdOutlinePendingActions,
-  MdOutlineCheckCircle,
-  MdOutlineCancel,
   MdKeyboardArrowDown,
   MdKeyboardArrowUp,
   MdArrowDownward,
@@ -89,11 +85,10 @@ import { OpenToast } from 'components/third-party/OpenToast';
 import LocationAutocomplete from 'components/nearle_components/LocationAutocomplete';
 import LoaderWithImage from 'components/nearle_components/LoaderWithImage';
 import PageHeader from 'components/nearle_components/PageHeader';
-import StatCard from 'components/nearle_components/StatCard';
 import StatusBadge from 'components/nearle_components/StatusBadge';
 import StatusTabs from 'components/nearle_components/StatusTabs';
 import TableLoader from 'components/nearle_components/TableLoader';
-import { PageShell, KpiGrid, FilterToolbar, DataCard } from 'components/nearle_components/PageLayout';
+import { PageShell, DataCard } from 'components/nearle_components/PageLayout';
 import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'components/nearle_components/MobileCard';
 import { useIsNarrowViewport } from 'hooks/useIsNarrowViewport';
 
@@ -127,14 +122,6 @@ const STATUS_TABS = [
   { status: 'cancelled', countKey: 'cancelLength' }
 ];
 
-// KPI palette + icons — mirrors the four cards across the top of the page.
-const KPI_META = [
-  { key: 'created', label: 'Created Orders', color: '#0ea5e9', icon: MdOutlineLocalShipping },
-  { key: 'pending', label: 'Pending Orders', color: '#f59e0b', icon: MdOutlinePendingActions },
-  { key: 'delivered', label: 'Delivered Orders', color: '#10b981', icon: MdOutlineCheckCircle },
-  { key: 'cancelled', label: 'Cancelled Orders', color: '#ef4444', icon: MdOutlineCancel }
-];
-
 // Batches mirror the dispatch page's slot definitions so an operator who
 // segments the day there sees the same buckets here. Hours are 24h, half-open
 // [startHour, endHour) — a delivery at exactly endHour falls into the *next*
@@ -479,8 +466,7 @@ const Deliveries = () => {
       setChangeDialogOpen(false);
       if (res.success) {
         logger.info(
-          `Rider changed successfully for order ID ${selectedRow?.orderid}. New Rider: ${
-            selectedRider?.displayname || selectedRider?.authname
+          `Rider changed successfully for order ID ${selectedRow?.orderid}. New Rider: ${selectedRider?.displayname || selectedRider?.authname
           }`
         );
         opentoast('Rider Changed Successfully', 'success');
@@ -773,7 +759,7 @@ const Deliveries = () => {
       },
       {
         id: 'serial',
-        size: 56,
+        size: 54,
         minSize: 48,
         enableSorting: false,
         meta: { label: '#' },
@@ -792,18 +778,13 @@ const Deliveries = () => {
         id: 'status',
         accessorKey: 'orderstatus',
         size: 130,
-        minSize: 100,
+        minSize: 110,
         meta: { label: 'Status' },
         header: () => (
           <Text type="label" weight="bold" color="secondary">
             Status
           </Text>
         ),
-        // The badge explains itself when the value did not come from the
-        // booking. Without this an operator comparing the table against
-        // GET /admin/bookings sees "Active" next to
-        // `"status": "Converted_To_Consignment"` and reasonably assumes the
-        // page is wrong — it isn't; the booking simply stops moving at pickup.
         cell: ({ getValue, row }) =>
           row.original.statusfromconsignment ? (
             <Tooltip
@@ -818,150 +799,106 @@ const Deliveries = () => {
           )
       },
       {
-        id: 'tenant',
-        accessorKey: 'tenantname',
-        size: 170,
-        minSize: 130,
-        meta: { label: 'Tenant' },
+        id: 'orderTenant',
+        accessorFn: (row) => `${row.orderid} ${row.tenantname}`,
+        size: 260,
+        minSize: 210,
+        meta: { label: 'Order & Tenant' },
         header: () => (
           <Text type="label" weight="bold" color="secondary">
-            Tenant
+            Order & Tenant
           </Text>
         ),
-        cell: ({ row }) => (
-          <Tooltip content={row.original.tenantadress || ''}>
-            <VStack gap={0} padding={0}>
-              <Text weight="semibold" maxLines={1}>
-                {row.original.tenantname}
-              </Text>
-              <Text type="supporting" color="secondary" maxLines={1}>
-                {row.original.tenantsuburb}
-              </Text>
-              <Text type="supporting" color="secondary" maxLines={1}>
-                {row.original.applocation}
-              </Text>
-            </VStack>
-          </Tooltip>
-        )
-      },
-      {
-        id: 'orderLocation',
-        accessorFn: (row) => row.orderid,
-        size: 240,
-        minSize: 180,
-        enableSorting: false,
-        meta: { label: 'Order / Location' },
-        header: () => (
-          <Text type="label" weight="bold" color="secondary">
-            Order / Location
-          </Text>
-        ),
-        // Order and delivery are stacked, not side by side. They used to be two
-        // VStacks inside an HStack, and flex items default to `min-width: auto`
-        // — so the order id (`DM-BK-BC87D8B0-30828`, unbreakable and wider than
-        // half the column) refused to shrink and crushed the delivery stack to
-        // zero width. A zero-width cell doesn't hide its text, it wraps it one
-        // character per line, which is what rendered as a vertical strip of
-        // letters. Two 20-character ids never fitted a 220px column; labelling
-        // them and giving each its own line is what actually fixes it, and the
-        // bare "-" separator between them conveyed nothing.
         cell: ({ row }) => {
           const r = row.original;
-          // express-console-api.md: Doormile timestamps are IST wall-clock with
-          // no timezone marker. A Z-suffixed response reinterpreted as local
-          // time shifts by 5:30 — showing the wrong time and sometimes the
-          // wrong day. parseDoormileTimestamp strips that, matching
-          // getRowBatchId above.
           const ordered = parseDoormileTimestamp(r.orderdate);
-          const delivered = parseDoormileTimestamp(r.deliverydate);
           return (
-            <VStack gap={0} padding={0} minWidth={0}>
-              <Tooltip content="Location Name-Suburb">
-                <Text maxLines={1}>{r.locationsuburb ? `${r.locationname}-(${r.locationsuburb})` : r.locationname}</Text>
+            <VStack gap={0.5} padding={0} minWidth={0}>
+              <Tooltip content={`Order ID: ${r.orderid} · Hub: ${r.locationname || '—'}`}>
+                <Text weight="bold" maxLines={1} style={{ fontSize: 13, color: DT.textPrimary, letterSpacing: -0.2 }}>
+                  {r.orderid}
+                </Text>
               </Tooltip>
-
-              <Tooltip content="Order Id">
-                <Text maxLines={1}>{r.orderid}</Text>
-              </Tooltip>
-              <Text type="supporting" color="secondary">
-                Ordered {ordered.format('DD/MM/YYYY · hh:mm A')}
-              </Text>
-
-              <Tooltip content="Delivery Id">
-                <Text maxLines={1}>{r.deliveryid}</Text>
-              </Tooltip>
-              <Text type="supporting" color="secondary">
-                Delivery {delivered.format('DD/MM/YYYY · hh:mm A')}
-              </Text>
+              <HStack gap={1} vAlign="center" minWidth={0}>
+                <Tooltip content={r.tenantadress ? `${r.tenantname} · ${r.tenantadress}` : r.tenantname}>
+                  <Text weight="medium" color="secondary" maxLines={1} style={{ fontSize: 12 }}>
+                    {r.tenantname}
+                  </Text>
+                </Tooltip>
+                <Text type="supporting" color="secondary" style={{ fontSize: 11, flexShrink: 0 }}>
+                  · {ordered.isValid() ? ordered.format('hh:mm A') : '—'}
+                </Text>
+              </HStack>
             </VStack>
           );
         }
       },
       {
-        id: 'pickup',
-        accessorKey: 'pickupcustomer',
-        size: 190,
-        minSize: 140,
-        meta: { label: 'Pickup' },
+        id: 'route',
+        accessorFn: (row) => `${row.pickupcustomer} ${row.deliverycustomer}`,
+        size: 320,
+        minSize: 260,
+        meta: { label: 'Route (Pickup → Drop)' },
         header: () => (
           <Text type="label" weight="bold" color="secondary">
-            Pickup
+            Route (Pickup → Drop)
           </Text>
         ),
-        // pickup — capped to the same maxWidth as drop below, with CSS ellipsis
-        // truncation, so one long address can't stretch this column wider than
-        // its neighbour. row.pickuplocation is just the full raw address (see
-        // fetchDeliveries in api.js), not a pre-shortened name, so the old
-        // `.slice(0, 14)` fallback never actually ran. Full text still
-        // available via the tooltip.
-        cell: ({ row }) => (
-          <VStack gap={0} padding={0} minWidth={0}>
-            <Text weight="semibold" maxLines={1}>
-              {row.original.pickupcustomer}
-            </Text>
-            <Text type="supporting" color="secondary">
-              {row.original.pickupcontactno}
-            </Text>
-            <Tooltip content={row.original.Pickupaddress || ''}>
-              <Text type="supporting" color="secondary" maxLines={1}>
-                {row.original.pickuplocation || row.original.Pickupaddress || '—'}
-              </Text>
+        cell: ({ row }) => {
+          const r = row.original;
+          const pickupAddr = r.pickupsuburb || r.pickuplocation || r.Pickupaddress || '';
+          const dropAddr = r.deliverysuburb || r.deliverylocation || r.deliveryaddress || '';
+          const routeTooltip = (
+            <div style={{ textAlign: 'left', minWidth: 200, maxWidth: 300, whiteSpace: 'normal', color: '#fff' }}>
+              <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start', marginBottom: '8px' }}>
+                <img src="/pickup-icon.png" alt="Pickup" style={{ width: 18, height: 18, marginTop: 2, flexShrink: 0 }} />
+                <div style={{ display: 'flex', flexDirection: 'column' }}>
+                  <span style={{ fontWeight: 'bold', fontSize: '12px' }}>Pickup: {r.pickupcustomer || 'Pickup'} {r.pickupcontactno ? `(${r.pickupcontactno})` : ''}</span>
+                  <span style={{ fontSize: '11px', opacity: 0.9 }}>{r.Pickupaddress || r.pickuplocation || 'No address'}</span>
+                </div>
+              </div>
+              <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
+                <img src="/drop-icon.png" alt="Drop" style={{ width: 18, height: 18, marginTop: 2, flexShrink: 0 }} />
+                <div style={{ display: 'flex', flexDirection: 'column' }}>
+                  <span style={{ fontWeight: 'bold', fontSize: '12px' }}>Drop: {r.deliverycustomer || 'Drop'} {r.deliverycontactno ? `(${r.deliverycontactno})` : ''}</span>
+                  <span style={{ fontSize: '11px', opacity: 0.9 }}>{r.deliveryaddress || r.deliverylocation || 'No address'}</span>
+                </div>
+              </div>
+            </div>
+          );
+
+          return (
+            <Tooltip content={routeTooltip}>
+              <VStack gap={0.5} padding={0} minWidth={0} style={{ cursor: 'pointer' }}>
+                <HStack gap={1} vAlign="center" minWidth={0}>
+                  <img src="/pickup-icon.png" alt="Pickup" style={{ width: 16, height: 16, flexShrink: 0 }} />
+                  <Text weight="semibold" maxLines={1} style={{ fontSize: 12, flexShrink: 0 }}>
+                    {r.pickupcustomer || 'Pickup'}
+                  </Text>
+                  <Text type="supporting" color="secondary" maxLines={1} style={{ fontSize: 11 }}>
+                    {pickupAddr ? `· ${pickupAddr}` : ''}
+                  </Text>
+                </HStack>
+
+                <HStack gap={1} vAlign="center" minWidth={0}>
+                  <img src="/drop-icon.png" alt="Drop" style={{ width: 17, height: 17, flexShrink: 0 }} />
+                  <Text weight="semibold" maxLines={1} style={{ fontSize: 12, flexShrink: 0 }}>
+                    {r.deliverycustomer || 'Drop'}
+                  </Text>
+                  <Text type="supporting" color="secondary" maxLines={1} style={{ fontSize: 11 }}>
+                    {dropAddr ? `· ${dropAddr}` : ''}
+                  </Text>
+                </HStack>
+              </VStack>
             </Tooltip>
-          </VStack>
-        )
-      },
-      {
-        id: 'drop',
-        accessorKey: 'deliverycustomer',
-        size: 190,
-        minSize: 140,
-        meta: { label: 'Drop' },
-        header: () => (
-          <Text type="label" weight="bold" color="secondary">
-            Drop
-          </Text>
-        ),
-        cell: ({ row }) => (
-          <VStack gap={0} padding={0} minWidth={0}>
-            <Text weight="semibold" maxLines={1}>
-              {row.original.deliverycustomer}
-            </Text>
-            <Text type="supporting" color="secondary">
-              {row.original.deliverycontactno}
-            </Text>
-            <Tooltip content={row.original.deliveryaddress || ''}>
-              <Text type="supporting" color="secondary" maxLines={1}>
-                {row.original.deliverylocation || row.original.deliveryaddress || '—'}
-              </Text>
-            </Tooltip>
-          </VStack>
-        )
+          );
+        }
       },
       {
         id: 'rider',
         accessorKey: 'ridername',
-        size: 180,
-        minSize: 140,
+        size: 190,
+        minSize: 150,
         sortUndefined: 'last',
         meta: { label: 'Rider' },
         header: () => (
@@ -972,89 +909,92 @@ const Deliveries = () => {
         cell: ({ row }) => {
           const r = row.original;
           return r.ridername ? (
-            <HStack gap={1.5} vAlign="center">
+            <HStack gap={1.5} vAlign="center" minWidth={0}>
               <AccentAvatar color="#8b5cf6" size={28}>
                 <MdDirectionsBike size={14} />
               </AccentAvatar>
-              <VStack gap={0} padding={0}>
+              <VStack gap={0} padding={0} minWidth={0}>
                 <Text weight="semibold" maxLines={1}>
                   {r.ridername}
                 </Text>
-                <Text type="supporting" color="secondary">
-                  ID #{r.userid} · {r.ridercontact || '—'}
+                <Text type="supporting" color="secondary" maxLines={1} style={{ fontSize: 11 }}>
+                  ID #{r.userid} {r.ridercontact ? `· ${r.ridercontact}` : ''}
                 </Text>
               </VStack>
             </HStack>
           ) : (
-            <Text type="supporting" weight="bold" color="secondary">
+            <Text type="supporting" weight="medium" color="secondary" style={{ fontStyle: 'italic' }}>
               Unassigned
             </Text>
           );
         }
       },
       {
-        id: 'eta',
-        accessorFn: (row) => row.expecteddeliverytime || undefined,
-        size: 100,
-        minSize: 90,
+        id: 'timingRoute',
+        accessorFn: (row) => row.expecteddeliverytime || row.kms,
+        size: 140,
+        minSize: 110,
         sortUndefined: 'last',
-        meta: { label: 'ETA' },
+        meta: { label: 'ETA & Distance' },
         header: () => (
           <Text type="label" weight="bold" color="secondary">
-            ETA
+            ETA & Distance
           </Text>
         ),
-        cell: ({ getValue }) => {
-          const v = getValue();
+        cell: ({ row }) => {
+          const r = row.original;
+          const eta = r.expecteddeliverytime ? parseDoormileTimestamp(r.expecteddeliverytime).format('hh:mm A') : null;
+          const kms = Number(r.kms);
           return (
-            <Text weight="semibold" style={{ whiteSpace: 'nowrap' }}>
-              {v ? parseDoormileTimestamp(v).format('hh:mm A') : '—'}
-            </Text>
+            <VStack gap={0.5} padding={0} minWidth={0}>
+              <Text weight="bold" style={{ fontSize: 12 }}>
+                {eta ? `ETA ${eta}` : 'ETA —'}
+              </Text>
+              {kms ? (
+                <Text type="supporting" color="secondary" style={{ fontSize: 11 }}>
+                  {kms.toFixed(2)} km
+                </Text>
+              ) : (
+                <Text type="supporting" color="secondary" style={{ fontSize: 11 }}>
+                  —
+                </Text>
+              )}
+            </VStack>
           );
         }
       },
       {
-        id: 'kms',
-        accessorFn: (row) => Number(row.kms) || undefined,
-        size: 110,
-        minSize: 90,
+        id: 'amountQty',
+        accessorFn: (row) => Number(row.deliverycharges) || Number(row.deliveryamt),
+        size: 130,
+        minSize: 100,
         sortUndefined: 'last',
-        meta: { label: 'Kms' },
+        meta: { label: 'Amount & Qty' },
         header: () => (
           <Text type="label" weight="bold" color="secondary">
-            Kms
+            Amount & Qty
           </Text>
         ),
-        cell: ({ getValue }) => (
-          <VStack gap={0.5} padding={0}>
-            <MetricPill variant="red" label={`${(getValue() ?? 0).toFixed(2)} km`} tooltip="Planned KMS" />
-          </VStack>
-        )
-      },
-      {
-        id: 'amount',
-        accessorFn: (row) => Number(row.deliverycharges) || undefined,
-        size: 150,
-        minSize: 120,
-        sortUndefined: 'last',
-        meta: { label: 'Amount' },
-        header: () => (
-          <Text type="label" weight="bold" color="secondary">
-            Amount
-          </Text>
-        ),
-        cell: ({ row }) => (
-          <VStack gap={0.5} padding={0}>
-            <MetricPill variant="red" label={`₹ ${row.original.deliverycharges?.toFixed(2) ?? '0.00'}`} tooltip="Delivery Charge" />
-            <MetricPill variant="green" label={`₹ ${row.original.deliveryamt?.toFixed(2) ?? '0.00'}`} tooltip="Delivery Amount" />
-          </VStack>
-        )
+        cell: ({ row }) => {
+          const r = row.original;
+          const amt = r.deliverycharges ?? r.deliveryamt;
+          return (
+            <VStack gap={0.5} padding={0} minWidth={0}>
+              <Text weight="bold" style={{ fontSize: 13, color: DT.textPrimary }}>
+                {amt != null ? `₹ ${Number(amt).toFixed(2)}` : '—'}
+              </Text>
+              <Text type="supporting" color="secondary" style={{ fontSize: 11 }}>
+                {r.Quantity ? `${r.Quantity} items` : '1 parcel'}
+              </Text>
+            </VStack>
+          );
+        }
       },
       {
         id: 'notes',
         accessorKey: 'notes',
-        size: 170,
-        minSize: 120,
+        size: 120,
+        minSize: 90,
         enableSorting: false,
         meta: { label: 'Notes' },
         header: () => (
@@ -1069,7 +1009,7 @@ const Deliveries = () => {
               <Text
                 type="supporting"
                 color="secondary"
-                style={{ maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'inline-block' }}
+                style={{ maxWidth: 110, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'inline-block' }}
               >
                 {v}
               </Text>
@@ -1081,23 +1021,6 @@ const Deliveries = () => {
           );
         }
       },
-      {
-        id: 'qty',
-        accessorKey: 'Quantity',
-        size: 80,
-        minSize: 64,
-        meta: { label: 'Qty' },
-        header: () => (
-          <Text type="label" weight="bold" color="secondary">
-            Qty
-          </Text>
-        ),
-        cell: ({ row }) => (
-          <Text weight="semibold" style={{ color: row.original.Quantity ? undefined : DT.textMuted, whiteSpace: 'nowrap' }}>
-            {row.original.Quantity || '—'}
-          </Text>
-        )
-      },
       {
         id: 'action',
         size: 90,
@@ -1140,8 +1063,7 @@ const Deliveries = () => {
         }
       }
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [tablePagination.pageIndex, tablePagination.pageSize, productCollapse]
+    [tablePagination, buildRowMenuItems, productCollapse]
   );
 
   // Two sources feed one visibility slice: whatever the operator toggled in
@@ -1343,12 +1265,12 @@ const Deliveries = () => {
   const errorMessage = fetchCountIsError
     ? `Error fetching count summary: ${fetchCountError?.message}`
     : ridersListIsError
-    ? `Error fetching riders: ${ridersListError?.message}`
-    : fetchtenantsIsError
-    ? `Error tenant list: ${fetchtenantsError?.message}`
-    : fetchlocationsIsError
-    ? `Error location list: ${fetchlocationsError?.message}`
-    : null;
+      ? `Error fetching riders: ${ridersListError?.message}`
+      : fetchtenantsIsError
+        ? `Error tenant list: ${fetchtenantsError?.message}`
+        : fetchlocationsIsError
+          ? `Error location list: ${fetchlocationsError?.message}`
+          : null;
 
   if (errorMessage) {
     OpenToast(errorMessage, 'error', 2000);
@@ -1366,14 +1288,33 @@ const Deliveries = () => {
   });
 
   // Trims the redundant " Batch" off BATCH_OPTIONS' own label (which stays
-  // full elsewhere, e.g. the empty-state message) — "Afternoon Batch · 89"
-  // was overflowing/wrapping inside the selector's compact trigger, squeezed
-  // to a 200px FilterToolbar track alongside four other filters.
+  // full elsewhere, e.g. the empty-state message) — "Afternoon Batch" was
+  // overflowing/wrapping inside the selector's compact trigger, squeezed to a
+  // 200px FilterToolbar track alongside four other filters.
+  //
+  // The count is NOT in the label any more. It used to be appended as
+  // "Evening · 0", which put a number in the closed trigger where it read as
+  // part of the batch's name, and — on any batch with nothing in it — put a
+  // bare "· 0" in the filter row. A count belongs beside the option it counts,
+  // as a badge, and a zero is better said by absence than by a "0".
   const batchSelectorOptions = BATCH_OPTIONS.map((b) => ({
     value: b.id,
-    label: `${b.label.replace(/ Batch$/, '')} · ${batchTotals[b.id] ?? 0}`
+    label: b.label.replace(/ Batch$/, '')
   }));
 
+  // The count rides in the open menu only. `renderOption` receives the option
+  // data, which carries `value` but not the total, so it is looked up here
+  // rather than smuggled through the label.
+  const renderBatchOption = (option) => {
+    const total = batchTotals[option.value] ?? 0;
+    return (
+      <HStack gap={2} vAlign="center" justify="between" style={{ width: '100%', minWidth: 0 }}>
+        <Text>{option.label}</Text>
+        {total > 0 && <Badge variant="neutral" label={total} />}
+      </HStack>
+    );
+  };
+
   const renderProductDetails = () => (
     <Card padding={0} elevation="none" style={{ margin: 16 }}>
       <HStack gap={2} vAlign="center" padding={2} style={{ borderBottom: `1px solid ${DT.divider}`, background: tint(BRAND) }}>
@@ -1444,9 +1385,8 @@ const Deliveries = () => {
   const emptyDescription =
     selectedBatch === 'all'
       ? `No ${(getStatusMeta(currentStatus)?.label || tabstatus).toLowerCase()} orders for this filter.`
-      : `No ${(getStatusMeta(currentStatus)?.label || tabstatus).toLowerCase()} orders in ${
-          BATCH_OPTIONS.find((b) => b.id === selectedBatch)?.label || 'this batch'
-        }.`;
+      : `No ${(getStatusMeta(currentStatus)?.label || tabstatus).toLowerCase()} orders in ${BATCH_OPTIONS.find((b) => b.id === selectedBatch)?.label || 'this batch'
+      }.`;
 
   return (
     <>
@@ -1454,7 +1394,7 @@ const Deliveries = () => {
         <Loader />
       )}
 
-      <PageShell fill>
+      <PageShell>
         <PageHeader
           title="Deliveries"
           subtitle={`Live · ${locaName || 'All Zones'}`}
@@ -1470,48 +1410,66 @@ const Deliveries = () => {
           }
         />
 
-        {/* All four tiles now read off the same countSourceRows-derived data
-            the StatusTabs pills use (batchTotals/batchCounts), instead of
-            three of them reading a separate, unscoped `fetchCountAPI` call —
-            fetchCountAPI ignores every argument passed to it (see api.js) and
-            returns an ALL-TIME, un-batched, un-dated total, which is why
-            "Pending Orders" could show a number the Pending tab itself
-            disagreed with. Same fix orders.js's KPI row already applies:
-            a tile and its tab must read the same source so they can't drift. */}
-        <KpiGrid>
-          {[
-            { ...KPI_META[0], value: batchTotals.all },
-            { ...KPI_META[1], value: batchCounts.uncoveredLength },
-            { ...KPI_META[2], value: batchCounts.coveredLength },
-            { ...KPI_META[3], value: batchCounts.cancelLength }
-          ].map((item) => {
-            const Icon = item.icon;
-            return (
-              <StatCard
-                key={item.key}
-                title={item.label}
-                value={item.value ?? 0}
-                icon={<Icon size={20} />}
-                color={item.color}
-                loading={countSourceIsLoading}
-              />
-            );
-          })}
-        </KpiGrid>
+        {/* Status segment cards at the top of the page */}
+        <StatusTabs
+          value={currentStatus}
+          onChange={(status) => {
+            const idx = STATUS_TABS.findIndex((t) => t.status === status);
+            if (idx !== -1) handleChangetab(idx);
+          }}
+          tabs={[
+            ...STATUS_TABS.map((t) => ({ status: t.status, count: batchCounts[t.countKey] ?? 0 })),
+            ...(batchCounts.otherLength > 0
+              ? [{ status: 'other', label: `Other (${unmappedStatuses.join(', ')})`, count: batchCounts.otherLength }]
+              : [])
+          ]}
+          size="sm"
+          hasDivider={false}
+          hideHint={true}
+        />
 
-        <DataCard
-          fill
-          toolbar={
-            <FilterToolbar max={5} minWidth={200}>
+        {/* Filters live OUTSIDE the table card.
+            Inside it, the batch/date/tenant/location/rider controls read as
+            part of the table's own chrome — a header band belonging to the
+            rows — when they actually decide WHICH rows exist. Lifting them
+            out makes the card start at the data, and the controls read as
+            what they are: page-level filters acting on the card below. */}
+        <div
+          className="dt-deliveries-toolbar"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+            gap: '10px',
+            padding: '0',
+            width: '100%',
+            boxSizing: 'border-box'
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+              gap: '10px',
+              flex: '1 1 auto',
+              minWidth: 0
+            }}
+          >
+            <div style={{ flex: '1 1 130px', minWidth: 120, maxWidth: 180 }}>
               <Selector
                 label="Batch"
                 isLabelHidden
                 options={batchSelectorOptions}
+                renderOption={renderBatchOption}
                 value={selectedBatch}
                 onChange={(v) => v && setSelectedBatch(v)}
                 placeholder="Batch"
               />
+            </div>
 
+            <div style={{ flexShrink: 0 }}>
               <Button
                 label={
                   startdate && enddate ? `${dayjs(startdate).format('DD MMM')} – ${dayjs(enddate).format('DD MMM')}` : 'Select date range'
@@ -1520,7 +1478,9 @@ const Deliveries = () => {
                 icon={<MdOutlineDateRange size={16} />}
                 onClick={() => setOpen(true)}
               />
+            </div>
 
+            <div style={{ flex: '1 1 160px', minWidth: 155, maxWidth: 240 }}>
               <Selector
                 label="Tenant"
                 isLabelHidden
@@ -1540,7 +1500,9 @@ const Deliveries = () => {
                 isDisabled={appId == null}
                 disabledMessage="Please select your zone first!"
               />
+            </div>
 
+            <div style={{ flex: '1 1 160px', minWidth: 155, maxWidth: 240 }}>
               <Selector
                 label="Location"
                 isLabelHidden
@@ -1560,7 +1522,9 @@ const Deliveries = () => {
                 isDisabled={!tenantid}
                 disabledMessage={appId == null ? 'Please select your Zone and Tenant first!' : 'Please select your Tenant first!'}
               />
+            </div>
 
+            <div style={{ flex: '1 1 160px', minWidth: 155, maxWidth: 240 }}>
               <Selector
                 label="Rider"
                 isLabelHidden
@@ -1573,61 +1537,51 @@ const Deliveries = () => {
                 isDisabled={riderListIsLoading || appId == null}
                 disabledMessage="Please select your zone first!"
               />
-            </FilterToolbar>
-          }
-          tabs={
-            <HStack justify="between" vAlign="center" gap={2} wrap="wrap">
-              <StatusTabs
-                value={currentStatus}
-                onChange={(status) => {
-                  const idx = STATUS_TABS.findIndex((t) => t.status === status);
-                  if (idx !== -1) handleChangetab(idx);
-                }}
-                tabs={[
-                  ...STATUS_TABS.map((t) => ({ status: t.status, count: batchCounts[t.countKey] ?? 0 })),
-                  // Only ever rendered when a status arrived that this page has
-                  // no tab for. Its presence is the signal that the mapping in
-                  // api.js needs extending — the rows are reachable meanwhile.
-                  ...(batchCounts.otherLength > 0
-                    ? [{ status: 'other', label: `Other (${unmappedStatuses.join(', ')})`, count: batchCounts.otherLength }]
-                    : [])
-                ]}
-                size="sm"
-                hasDivider={false}
-              />
-              <HStack gap={2} vAlign="center">
-                <VStack maxWidth={260} width="100%" padding={0} gap={0}>
-                  <DebounceSearchBar value={searchword} onChange={setSearchword} onDebouncedChange={setDebouncedSearch} />
-                </VStack>
+            </div>
+          </div>
 
-                {/* Columns menu — driven by the same `columnVisibility` slice
-                    the tab uses for select/action, so there is one source of
-                    truth for "is this column showing" (same pattern as
-                    orders.js). Only rendered for the desktop table. */}
-                {!isMobile && (
-                  <DropdownMenu
-                    button={{ label: 'Columns', variant: 'secondary', size: 'sm', icon: <MdViewColumn size={16} /> }}
-                    menuWidth={200}
-                    placement="below"
-                  >
-                    {table
-                      .getAllLeafColumns()
-                      .filter((column) => column.getCanHide())
-                      .map((column) => (
-                        <DropdownMenuCheckboxItem
-                          key={column.id}
-                          label={column.columnDef.meta?.label ?? column.id}
-                          value={column.getIsVisible()}
-                          onChange={(checked) => column.toggleVisibility(checked)}
-                          hasCloseOnSelect={false}
-                        />
-                      ))}
-                  </DropdownMenu>
-                )}
-              </HStack>
-            </HStack>
-          }
-        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '10px',
+              flex: '0 1 auto',
+              minWidth: 260,
+              justifyContent: 'flex-end'
+            }}
+          >
+            <div style={{ width: '100%', minWidth: 180, maxWidth: 260 }}>
+              <DebounceSearchBar value={searchword} onChange={setSearchword} onDebouncedChange={setDebouncedSearch} />
+            </div>
+
+            {/* Columns menu — driven by the same `columnVisibility` slice
+                the tab uses for select/action, so there is one source of
+                truth for "is this column showing" (same pattern as
+                orders.js). Only rendered for the desktop table. */}
+            {!isMobile && (
+              <DropdownMenu
+                button={{ label: 'Columns', variant: 'secondary', size: 'sm', icon: <MdViewColumn size={16} /> }}
+                menuWidth={200}
+                placement="below"
+              >
+                {table
+                  .getAllLeafColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      label={column.columnDef.meta?.label ?? column.id}
+                      value={column.getIsVisible()}
+                      onChange={(checked) => column.toggleVisibility(checked)}
+                      hasCloseOnSelect={false}
+                    />
+                  ))}
+              </DropdownMenu>
+            )}
+          </div>
+        </div>
+
+        <DataCard>
           {isMobile ? (
             <MobileCardList scroll>
               {filteredRows.length === 0 && !loading1 && !countSourceLoading && (
@@ -1815,9 +1769,11 @@ const Deliveries = () => {
                     Widths come from header.getSize(), the columnSizing slice
                     the drag handles write to. */}
                   <Table
-                    density="compact"
-                    dividers="none"
+                    density="balanced"
+                    dividers="rows"
                     hasHover
+                    verticalAlign="middle"
+                    aria-label="Deliveries"
                     style={{ tableLayout: 'fixed', width: '100%', minWidth: table.getTotalSize() }}
                   >
                     <TableHeader>
@@ -1850,11 +1806,11 @@ const Deliveries = () => {
                                   onKeyDown={
                                     canSort
                                       ? (e) => {
-                                          if (e.key === 'Enter' || e.key === ' ') {
-                                            e.preventDefault();
-                                            header.column.toggleSorting();
-                                          }
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                          e.preventDefault();
+                                          header.column.toggleSorting();
                                         }
+                                      }
                                       : undefined
                                   }
                                   style={canSort ? { cursor: 'pointer', userSelect: 'none' } : undefined}
@@ -2082,8 +2038,7 @@ const Deliveries = () => {
                   onClick={() => {
                     setLoading1(true);
                     logger.info(
-                      `Initiating rider assignment change for order ID ${selectedRow?.orderid} to rider: ${
-                        selectedRider?.displayname || selectedRider?.authname
+                      `Initiating rider assignment change for order ID ${selectedRow?.orderid} to rider: ${selectedRider?.displayname || selectedRider?.authname
                       }`
                     );
                     changeRiderMutation.mutate({ selectedRider, selectedRow });
@@ -2107,6 +2062,9 @@ const Deliveries = () => {
             open={open}
             toggle={() => setOpen(!open)}
             id="daterange1"
+            // So the fields open showing the window already in force, rather
+            // than blank on an actively filtered table.
+            value={{ startDate: startdate || undefined, endDate: enddate || undefined }}
             onChange={(range) => {
               if (range.label === 'All') {
                 setStartdate('');
diff --git a/src/pages/nearle/dispatch/ActiveSection.js b/src/pages/nearle/dispatch/ActiveSection.js
index aebc922..bfd004b 100644
--- a/src/pages/nearle/dispatch/ActiveSection.js
+++ b/src/pages/nearle/dispatch/ActiveSection.js
@@ -128,7 +128,7 @@ const ActiveSection = ({
         }
         // Rider delivered → reached customer location
         if (old.status === 'active' && cur.status === 'delivered') {
-          OpenToast(`📍 ${cur.riderName} has reached ${cur.customer}'s location`, 'info', 3000);
+          OpenToast(`${cur.riderName} has reached ${cur.customer}'s location`, 'info', 3000);
         }
       });
     }
diff --git a/src/pages/nearle/dispatch/ProfitabilitySection.js b/src/pages/nearle/dispatch/ProfitabilitySection.js
index 4483b1f..b320718 100644
--- a/src/pages/nearle/dispatch/ProfitabilitySection.js
+++ b/src/pages/nearle/dispatch/ProfitabilitySection.js
@@ -492,11 +492,9 @@ export default function ProfitabilitySection({
   const slotKms = activeEnriched.reduce((s, r) => s + r._m.kms, 0);
   const profitCount = activeEnriched.filter((r) => r._m.net >= 0).length;
   const lossCount = activeEnriched.length - profitCount;
-  const totalOrders = enriched.reduce((s, r) => s + (r._m.orders?.length ?? 0), 0);
 
   const dailyIsProfit = totalDailyProfit >= 0;
   const slotIsProfit = slotNet >= 0;
-  const slotMargin = slotRevenue > 0 ? (slotNet / slotRevenue) * 100 : 0;
 
   // Sorted loss-first so the riders needing attention are at the top.
   const sorted = useMemo(() => [...activeEnriched].sort((a, b) => a._m.net - b._m.net), [activeEnriched]);
@@ -518,42 +516,36 @@ export default function ProfitabilitySection({
           value={rupees(Math.abs(totalDailyProfit))}
           icon={dailyIsProfit ? <MdTrendingUp size={20} /> : <MdTrendingDown size={20} />}
           color={moneyColor(dailyIsProfit)}
-          caption="All slots today"
         />
         <StatCard
           title="Riders active"
           value={activeEnriched.length}
           icon={<MdPeopleAlt size={20} />}
           color={STATUS.info}
-          caption={`${profitCount} in profit · ${lossCount} at loss`}
         />
         <StatCard
           title="Total distance"
           value={`${slotKms.toFixed(1)} km`}
           icon={<MdStraighten size={20} />}
           color={STATUS.picked}
-          caption="Cumulative travel distance"
         />
         <StatCard
           title="Slot revenue"
           value={rupees(slotRevenue)}
           icon={<MdAccountBalanceWallet size={20} />}
           color={STATUS.success}
-          caption={`From ${totalOrders} order${totalOrders !== 1 ? 's' : ''}`}
         />
         <StatCard
           title="Slot cost"
           value={rupees(slotCost)}
           icon={<MdPayments size={20} />}
           color={STATUS.error}
-          caption="Fixed + variable"
         />
         <StatCard
           title="Slot net"
           value={`${slotIsProfit ? '+' : ''}${rupees(slotNet)}`}
           icon={<MdOutlineSavings size={20} />}
           color={moneyColor(slotIsProfit)}
-          caption={`${slotMargin >= 0 ? '+' : ''}${slotMargin.toFixed(0)}% margin`}
         />
       </KpiGrid>
 
diff --git a/src/pages/nearle/exceptions/exceptions.js b/src/pages/nearle/exceptions/exceptions.js
index 60feb79..7a630ed 100644
--- a/src/pages/nearle/exceptions/exceptions.js
+++ b/src/pages/nearle/exceptions/exceptions.js
@@ -29,6 +29,7 @@ import { TextInput } from '@astryxdesign/core/TextInput';
 import { TextArea } from '@astryxdesign/core/TextArea';
 import { Selector } from '@astryxdesign/core/Selector';
 import { Badge } from '@astryxdesign/core/Badge';
+import { Tooltip } from '@astryxdesign/core/Tooltip';
 import { Pagination } from '@astryxdesign/core/Pagination';
 import { EmptyState } from '@astryxdesign/core/EmptyState';
 import { Table, TableHeader, TableBody, TableRow, TableCell, TableHeaderCell } from '@astryxdesign/core/Table';
@@ -38,6 +39,7 @@ import TableLoader from 'components/nearle_components/TableLoader';
 import DebounceSearchBar from 'components/nearle_components/DebounceSearchBar';
 import PageHeader from 'components/nearle_components/PageHeader';
 import StatCard from 'components/nearle_components/StatCard';
+import StatusBadge from 'components/nearle_components/StatusBadge';
 import { PageShell, KpiGrid, FilterToolbar, DataCard } from 'components/nearle_components/PageLayout';
 import { getExceptions, createException, updateExceptionStatus, getHubs } from 'pages/api/doormileApi';
 import { DT } from 'themes/dt/tokens';
@@ -189,29 +191,45 @@ const Exceptions = () => {
       {
         id: 'consignment',
         accessorKey: 'consignmentid',
-        size: 170,
-        minSize: 130,
-        meta: { label: 'Consignment' },
-        header: () => <SectionLabel>Consignment</SectionLabel>,
-        cell: ({ getValue }) => <Text weight="semibold">{getValue()}</Text>
-      },
-      {
-        id: 'hub',
-        accessorFn: (row) => hubMap.get(row.hubid)?.hubname || (row.hubid ? `Hub #${row.hubid}` : '—'),
-        size: 150,
-        minSize: 120,
-        meta: { label: 'Hub' },
-        header: () => <SectionLabel>Hub</SectionLabel>,
-        cell: ({ getValue }) => <Text>{getValue()}</Text>
+        size: 200,
+        minSize: 150,
+        meta: { label: 'Consignment & Hub' },
+        header: () => <SectionLabel>Consignment & Hub</SectionLabel>,
+        cell: ({ row }) => {
+          const hub = hubMap.get(row.original.hubid)?.hubname || (row.original.hubid ? `Hub #${row.original.hubid}` : '—');
+          return (
+            <VStack gap={0.5} padding={0} minWidth={0}>
+              <Text weight="bold" style={{ fontSize: 13, color: DT.textPrimary }}>
+                #{row.original.consignmentid}
+              </Text>
+              <Text type="supporting" color="secondary" style={{ fontSize: 11 }}>
+                {hub}
+              </Text>
+            </VStack>
+          );
+        }
       },
       {
         id: 'type',
         accessorKey: 'exceptiontype',
-        size: 150,
-        minSize: 120,
-        meta: { label: 'Type' },
-        header: () => <SectionLabel>Type</SectionLabel>,
-        cell: ({ getValue }) => <Text>{getValue()}</Text>
+        size: 280,
+        minSize: 200,
+        meta: { label: 'Exception Details' },
+        header: () => <SectionLabel>Exception Details</SectionLabel>,
+        cell: ({ row }) => (
+          <VStack gap={0.5} padding={0} minWidth={0}>
+            <Text weight="semibold" maxLines={1} style={{ fontSize: 12 }}>
+              {row.original.exceptiontype || 'Exception'}
+            </Text>
+            {row.original.description && (
+              <Tooltip content={row.original.description}>
+                <Text type="supporting" color="secondary" maxLines={1} style={{ fontSize: 11 }}>
+                  {row.original.description}
+                </Text>
+              </Tooltip>
+            )}
+          </VStack>
+        )
       },
       {
         id: 'severity',
@@ -222,19 +240,6 @@ const Exceptions = () => {
         header: () => <SectionLabel>Severity</SectionLabel>,
         cell: ({ getValue }) => <Badge variant={SEVERITY_BADGE[getValue()] || 'neutral'} label={getValue()} />
       },
-      {
-        id: 'description',
-        accessorKey: 'description',
-        size: 260,
-        minSize: 180,
-        meta: { label: 'Description' },
-        header: () => <SectionLabel>Description</SectionLabel>,
-        cell: ({ getValue }) => (
-          <Text style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} title={getValue()}>
-            {getValue()}
-          </Text>
-        )
-      },
       {
         id: 'status',
         accessorFn: (row) => row.status || 'Open',
@@ -242,15 +247,15 @@ const Exceptions = () => {
         minSize: 110,
         meta: { label: 'Status' },
         header: () => <SectionLabel>Status</SectionLabel>,
-        cell: ({ getValue }) => <Text>{getValue()}</Text>
+        cell: ({ getValue }) => <StatusBadge status={getValue()} />
       },
       {
         id: 'actions',
-        size: 140,
-        minSize: 110,
+        size: 90,
+        minSize: 80,
         enableSorting: false,
         enableResizing: false,
-        meta: { label: 'Actions' },
+        meta: { label: 'Actions', align: 'right' },
         header: () => <SectionLabel>Actions</SectionLabel>,
         cell: ({ row }) =>
           !['Resolved', 'Closed'].includes(row.original.status) ? (
@@ -305,10 +310,34 @@ const Exceptions = () => {
         />
 
         <KpiGrid>
-          <StatCard title="Total" value={stats.total} icon={<MdWarningAmber size={20} />} color={BRAND} />
-          <StatCard title="Open" value={stats.open} icon={<MdWarningAmber size={20} />} color="#f59e0b" />
-          <StatCard title="Critical" value={stats.critical} icon={<MdWarningAmber size={20} />} color="#ef4444" />
-          <StatCard title="Resolved" value={stats.resolved} icon={<MdCheckCircleOutline size={20} />} color="#10b981" />
+          <StatCard
+            title="Total"
+            value={stats.total}
+            meta={`${stats.total} logged`}
+            icon={<MdWarningAmber size={20} />}
+            color={BRAND}
+          />
+          <StatCard
+            title="Open"
+            value={stats.open}
+            meta={`${stats.total > 0 ? Math.round((stats.open / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdWarningAmber size={20} />}
+            color="#f59e0b"
+          />
+          <StatCard
+            title="Critical"
+            value={stats.critical}
+            meta={`${stats.total > 0 ? Math.round((stats.critical / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdWarningAmber size={20} />}
+            color="#ef4444"
+          />
+          <StatCard
+            title="Resolved"
+            value={stats.resolved}
+            meta={`${stats.total > 0 ? Math.round((stats.resolved / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdCheckCircleOutline size={20} />}
+            color="#10b981"
+          />
         </KpiGrid>
 
         <DataCard
diff --git a/src/pages/nearle/hubs/hubs.js b/src/pages/nearle/hubs/hubs.js
index cff6144..165b0ce 100644
--- a/src/pages/nearle/hubs/hubs.js
+++ b/src/pages/nearle/hubs/hubs.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
   MdOutlineWarehouse,
+  MdStorefront,
   MdEdit,
   MdDeleteOutline,
   MdAdd,
@@ -27,6 +28,7 @@ import {
   createPaginatedRowModel
 } from '@tanstack/react-table';
 
+import { Tooltip } from '@astryxdesign/core/Tooltip';
 import { Grid } from '@astryxdesign/core/Grid';
 import { HStack } from '@astryxdesign/core/HStack';
 import { VStack } from '@astryxdesign/core/VStack';
@@ -112,6 +114,7 @@ const Hubs = () => {
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const [dialogOpen, setDialogOpen] = useState(false);
   const [form, setForm] = useState(emptyForm);
+  const [activeFilter, setActiveFilter] = useState('all');
   // Table sorting/resizing/pagination state — mirrors orders.js's/riders.js's
   // /Tenants.js's slices.
   const [sorting, setSorting] = useState([]);
@@ -121,12 +124,20 @@ const Hubs = () => {
   const { data: hubs = [], isLoading } = useQuery({ queryKey: ['admin-hubs'], queryFn: getHubs });
 
   const rows = useMemo(() => {
-    if (!debouncedSearch) return hubs;
+    let list = hubs;
+    if (activeFilter === 'sorting_center') {
+      list = list.filter((h) => h.hubtype === 'sorting_center');
+    } else if (activeFilter === 'delivery_hub') {
+      list = list.filter((h) => h.hubtype === 'delivery_hub');
+    } else if (activeFilter === 'active') {
+      list = list.filter((h) => String(h.status || '').toLowerCase() === 'active');
+    }
+    if (!debouncedSearch) return list;
     const q = debouncedSearch.toLowerCase().trim();
-    return hubs.filter((row) =>
+    return list.filter((row) =>
       [row.hubname, row.hubtype, row.address, row.pincode].filter(Boolean).some((f) => String(f).toLowerCase().includes(q))
     );
-  }, [hubs, debouncedSearch]);
+  }, [hubs, activeFilter, debouncedSearch]);
 
   const stats = useMemo(() => {
     const total = hubs.length;
@@ -239,47 +250,45 @@ const Hubs = () => {
       {
         id: 'hubname',
         accessorKey: 'hubname',
-        size: 220,
-        minSize: 160,
-        meta: { label: 'Hub Name' },
-        header: () => <SectionLabel>Hub Name</SectionLabel>,
-        cell: ({ getValue }) => <Text weight="bold">{getValue()}</Text>
-      },
-      {
-        id: 'hubtype',
-        accessorFn: (row) => (row.hubtype === 'sorting_center' ? 'Sorting Center' : 'Delivery Hub'),
-        size: 150,
-        minSize: 120,
-        meta: { label: 'Type' },
-        header: () => <SectionLabel>Type</SectionLabel>,
-        cell: ({ getValue }) => getValue()
-      },
-      {
-        id: 'city',
-        accessorKey: 'applocationid',
-        size: 100,
-        minSize: 80,
-        meta: { label: 'City' },
-        header: () => <SectionLabel>City</SectionLabel>,
-        cell: ({ getValue }) => getValue() ?? '—'
+        size: 240,
+        minSize: 180,
+        meta: { label: 'Hub' },
+        header: () => <SectionLabel>Hub</SectionLabel>,
+        cell: ({ row }) => (
+          <HStack gap={1.5} vAlign="center">
+            <AccentAvatar color={BRAND} size={28}>
+              <MdStorefront size={14} />
+            </AccentAvatar>
+            <VStack gap={0} padding={0} minWidth={0}>
+              <Text weight="bold" maxLines={1} style={{ fontSize: 13, color: DT.textPrimary }}>
+                {row.original.hubname}
+              </Text>
+              <Text type="supporting" color="secondary" style={{ fontSize: 11 }}>
+                {row.original.hubtype === 'sorting_center' ? 'Sorting Center' : 'Delivery Hub'}
+              </Text>
+            </VStack>
+          </HStack>
+        )
       },
       {
         id: 'address',
         accessorKey: 'address',
-        size: 240,
-        minSize: 160,
-        meta: { label: 'Address' },
-        header: () => <SectionLabel>Address</SectionLabel>,
-        cell: ({ getValue }) => getValue() || '—'
-      },
-      {
-        id: 'pincode',
-        accessorKey: 'pincode',
-        size: 110,
-        minSize: 90,
-        meta: { label: 'Pincode' },
-        header: () => <SectionLabel>Pincode</SectionLabel>,
-        cell: ({ getValue }) => getValue() || '—'
+        size: 320,
+        minSize: 240,
+        meta: { label: 'Address & Location' },
+        header: () => <SectionLabel>Address & Location</SectionLabel>,
+        cell: ({ row }) => (
+          <VStack gap={0.5} padding={0} minWidth={0}>
+            <Tooltip content={row.original.address || ''}>
+              <Text weight="medium" maxLines={1} style={{ fontSize: 12 }}>
+                {row.original.address || '—'}
+              </Text>
+            </Tooltip>
+            <Text type="supporting" color="secondary" style={{ fontSize: 11 }}>
+              {[row.original.pincode, row.original.applocationid ? `City #${row.original.applocationid}` : null].filter(Boolean).join(' · ') || '—'}
+            </Text>
+          </VStack>
+        )
       },
       {
         id: 'status',
@@ -292,8 +301,8 @@ const Hubs = () => {
       },
       {
         id: 'actions',
-        size: 120,
-        minSize: 100,
+        size: 100,
+        minSize: 90,
         enableSorting: false,
         enableResizing: false,
         meta: { label: 'Actions', align: 'right' },
@@ -320,7 +329,6 @@ const Hubs = () => {
         )
       }
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [pagination.pageIndex, pagination.pageSize]
   );
 
@@ -355,10 +363,46 @@ const Hubs = () => {
         />
 
         <KpiGrid>
-          <StatCard title="Total Hubs" value={stats.total} icon={<MdOutlineWarehouse size={20} />} color={BRAND} />
-          <StatCard title="Sorting Centers" value={stats.sorting} icon={<MdOutlineWarehouse size={20} />} color={STATUS.info} />
-          <StatCard title="Delivery Hubs" value={stats.delivery} icon={<MdPlace size={20} />} color={STATUS.delivered} />
-          <StatCard title="Active Hubs" value={stats.active} icon={<MdOutlineCheckCircle size={20} />} color={STATUS.active} />
+          <StatCard
+            title="Total Hubs"
+            value={stats.total}
+            meta={`${stats.total} hubs`}
+            icon={<MdOutlineWarehouse size={20} />}
+            color={BRAND}
+            clickable
+            isSelected={activeFilter === 'all'}
+            onClick={() => setActiveFilter('all')}
+          />
+          <StatCard
+            title="Sorting Centers"
+            value={stats.sorting}
+            meta={`${stats.total > 0 ? Math.round((stats.sorting / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdOutlineWarehouse size={20} />}
+            color={STATUS.info}
+            clickable
+            isSelected={activeFilter === 'sorting_center'}
+            onClick={() => setActiveFilter((prev) => (prev === 'sorting_center' ? 'all' : 'sorting_center'))}
+          />
+          <StatCard
+            title="Delivery Hubs"
+            value={stats.delivery}
+            meta={`${stats.total > 0 ? Math.round((stats.delivery / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdPlace size={20} />}
+            color={STATUS.delivered}
+            clickable
+            isSelected={activeFilter === 'delivery_hub'}
+            onClick={() => setActiveFilter((prev) => (prev === 'delivery_hub' ? 'all' : 'delivery_hub'))}
+          />
+          <StatCard
+            title="Active Hubs"
+            value={stats.active}
+            meta={`${stats.total > 0 ? Math.round((stats.active / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdOutlineCheckCircle size={20} />}
+            color={STATUS.active}
+            clickable
+            isSelected={activeFilter === 'active'}
+            onClick={() => setActiveFilter((prev) => (prev === 'active' ? 'all' : 'active'))}
+          />
         </KpiGrid>
 
         <DataCard
diff --git a/src/pages/nearle/orders/orders.js b/src/pages/nearle/orders/orders.js
index d07f63b..e9b4444 100644
--- a/src/pages/nearle/orders/orders.js
+++ b/src/pages/nearle/orders/orders.js
@@ -35,8 +35,6 @@ import {
   MdLocalShipping,
   MdClear,
   MdNotes,
-  MdMyLocation,
-  MdOutlineFlag,
   MdFlashOn,
   MdCancel,
   MdStraighten,
@@ -65,6 +63,7 @@ import TableLoader from 'components/nearle_components/TableLoader';
 import PageHeader from 'components/nearle_components/PageHeader';
 import DebounceSearchBar from 'components/nearle_components/DebounceSearchBar';
 import { PageShell, DataCard } from 'components/nearle_components/PageLayout';
+import { useIsNarrowViewport } from 'hooks/useIsNarrowViewport';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { fetchPercentageData, createAutomationDeliveries, getallriders, buildMilerLookup, notifyRider } from '../../api/api';
@@ -298,6 +297,7 @@ PlaceCell.propTypes = {
 
 const Orders = () => {
   const navigate = useNavigate();
+  const isMobile = useIsNarrowViewport();
   const tid = localStorage.getItem('tenantid');
   const [tabstatus, setTabstatus] = useState('Pending');
   const [currentStatus, setCurrentStatus] = useState('pending_pickup');
@@ -586,44 +586,63 @@ const Orders = () => {
         }
       },
       {
-        id: 'pickup',
-        accessorKey: 'pickupaddress',
-        size: 320,
+        id: 'route',
+        accessorFn: (row) => `${row.pickupaddress || ''} ${row.deliveryaddress || ''}`,
+        size: 340,
         minSize: 260,
-        meta: { label: 'Pickup' },
-        header: () => <SectionLabel>Pickup</SectionLabel>,
-        cell: ({ getValue, row }) => (
-          <PlaceCell icon={<MdMyLocation size={11} />} primary={getValue() || '—'} secondary={row.original.pickuppincode || ''} />
-        )
-      },
-      {
-        id: 'drop',
-        // The customer join lives in the accessor, so the cell only renders.
-        accessorFn: (row) => {
-          const customer = customerMap?.get(row.appcustomerid);
-          return customer?.firstname || customer?.name || `Customer #${row.appcustomerid ?? '—'}`;
-        },
-        size: 360,
-        minSize: 280,
-        meta: { label: 'Drop' },
-        header: () => <SectionLabel>Drop</SectionLabel>,
-        cell: ({ getValue, row }) => {
-          const customer = customerMap?.get(row.original.appcustomerid);
+        meta: { label: 'Route (Pickup → Drop)' },
+        header: () => <SectionLabel>Route (Pickup → Drop)</SectionLabel>,
+        cell: ({ row }) => {
+          const r = row.original;
+          const customer = customerMap?.get(r.appcustomerid);
+          const dropName = customer?.firstname || customer?.name || (r.appcustomerid ? `Customer #${r.appcustomerid}` : 'Drop Customer');
+          const routeTooltip = (
+            <div style={{ textAlign: 'left', minWidth: 200, maxWidth: 300, whiteSpace: 'normal', color: '#fff' }}>
+              <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start', marginBottom: '8px' }}>
+                <img src="/pickup-icon.png" alt="Pickup" style={{ width: 18, height: 18, marginTop: 2, flexShrink: 0 }} />
+                <div style={{ display: 'flex', flexDirection: 'column' }}>
+                  <span style={{ fontWeight: 'bold', fontSize: '12px' }}>Pickup</span>
+                  <span style={{ fontSize: '11px', opacity: 0.9 }}>{r.pickupaddress || 'No address'} {r.pickuppincode ? `(${r.pickuppincode})` : ''}</span>
+                </div>
+              </div>
+              <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
+                <img src="/drop-icon.png" alt="Drop" style={{ width: 18, height: 18, marginTop: 2, flexShrink: 0 }} />
+                <div style={{ display: 'flex', flexDirection: 'column' }}>
+                  <span style={{ fontWeight: 'bold', fontSize: '12px' }}>Drop</span>
+                  <span style={{ fontSize: '11px', opacity: 0.9 }}>{dropName} {customer?.phone || customer?.contactno ? `(${customer.phone || customer.contactno})` : ''}</span>
+                  <span style={{ fontSize: '11px', opacity: 0.9 }}>{r.deliveryaddress || 'No address'}</span>
+                </div>
+              </div>
+            </div>
+          );
+
           return (
-            <PlaceCell icon={<MdOutlineFlag size={11} />} primary={getValue()} secondary={customer?.phone || customer?.contactno || ''}>
-              <HStack gap={1} vAlign="center" minWidth={0}>
-                <Text type="supporting" color="secondary" maxLines={1}>
-                  {row.original.deliveryaddress || '—'}
-                </Text>
-                {/* Parcel count moved out of its own 64px column — it was "1"
-                    on every row. It belongs next to the delivery it describes,
-                    and only shows when it is not 1, which is the one thing
-                    Astryx's Badge guidance says a badge IS for. */}
-                {(row.original.parcels?.length || 0) > 1 && (
-                  <Badge variant="neutral" icon={<MdInventory2 size={11} />} label={`${row.original.parcels.length} parcels`} />
-                )}
-              </HStack>
-            </PlaceCell>
+            <Tooltip content={routeTooltip}>
+              <VStack gap={0.5} padding={0} minWidth={0} style={{ cursor: 'pointer' }}>
+                <HStack gap={1} vAlign="center" minWidth={0}>
+                  <img src="/pickup-icon.png" alt="Pickup" style={{ width: 16, height: 16, flexShrink: 0 }} />
+                  <Text weight="semibold" maxLines={1} style={{ fontSize: 12, flexShrink: 0 }}>
+                    Pickup
+                  </Text>
+                  <Text type="supporting" color="secondary" maxLines={1} style={{ fontSize: 11 }}>
+                    {r.pickupaddress ? `· ${r.pickupaddress}` : '—'}
+                  </Text>
+                </HStack>
+
+                <HStack gap={1} vAlign="center" minWidth={0}>
+                  <img src="/drop-icon.png" alt="Drop" style={{ width: 17, height: 17, flexShrink: 0 }} />
+                  <Text weight="semibold" maxLines={1} style={{ fontSize: 12, flexShrink: 0 }}>
+                    {dropName}
+                  </Text>
+                  <Text type="supporting" color="secondary" maxLines={1} style={{ fontSize: 11 }}>
+                    {r.deliveryaddress ? `· ${r.deliveryaddress}` : ''}
+                  </Text>
+                  {(r.parcels?.length || 0) > 1 && (
+                    <Badge variant="neutral" icon={<MdInventory2 size={10} />} label={`${r.parcels.length} parcels`} />
+                  )}
+                </HStack>
+              </VStack>
+            </Tooltip>
           );
         }
       },
@@ -927,33 +946,33 @@ const Orders = () => {
           viewport, at any window size, with no viewport arithmetic anywhere on
           this page. See PageLayout.js for why one `:has()` rule is needed to
           make that flex chain resolve. */}
-      <PageShell fill>
+      <PageShell>
         <PageHeader title="Orders" subtitle={`Live · ${locoName} · ${datestatus}`} live />
 
-        <DataCard
-          fill
-          tabs={
-            <HStack justify="between" vAlign="center" gap={2} wrap="wrap">
-              {/* The shared status strip, same component the other list pages
-                  use, so tab chrome — selected indicator, hover, focus ring,
-                  count badge, arrow-key navigation — is identical across the
-                  console instead of re-declared here. Labels stay this page's
-                  own ("Assigned", not the registry's "Accepted") because the
-                  Orders tabs track the OPERATOR's workflow. */}
-              <StatusTabs
-                value={currentStatus}
-                onChange={handleChangetab}
-                hasDivider={false}
-                tabs={ORDERS_STATUS_TABS.map((t) => ({
-                  status: t.status,
-                  label: t.label,
-                  count: t.statuses.reduce((sum, s) => sum + (statusCounts[s] ?? 0), 0)
-                }))}
-              />
+        {/* Status segment cards at the top of the page */}
+        <StatusTabs
+          value={currentStatus}
+          onChange={handleChangetab}
+          hasDivider={false}
+          // The status names carry their own meaning to the people who live in
+          // this page all day — "Pending" does not need "awaiting rider" spelled
+          // out underneath it, and eight glossed labels in a row crowd the
+          // number each card exists to show. Scoped to Orders: the hints stay
+          // on the other list pages, which the same registry feeds.
+          hideHint
+          tabs={ORDERS_STATUS_TABS.map((t) => ({
+            status: t.status,
+            label: t.label,
+            count: t.statuses.reduce((sum, s) => sum + (statusCounts[s] ?? 0), 0)
+          }))}
+        />
 
-              {/* Search + Columns menu share the tab row's right side, so the
-                  whole toolbar — filter tabs, search, column visibility —
-                  reads as one control strip instead of two stacked rows. */}
+        <DataCard
+          tabs={
+            <HStack justify="between" vAlign="center" gap={2} wrap="wrap" style={{ width: '100%' }}>
+              <Text weight="medium" color="secondary">
+                {filteredRows.length} {filteredRows.length === 1 ? 'order' : 'orders'}
+              </Text>
               <HStack gap={2} vAlign="center">
                 <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                   <DebounceSearchBar
@@ -968,24 +987,26 @@ const Orders = () => {
                     the tab uses for the checkbox column, so there is one
                     source of truth for "is this column showing". `getCanHide()`
                     is what keeps the checkbox column out of the list. */}
-                <DropdownMenu
-                  button={{ label: 'Columns', variant: 'secondary', size: 'sm', icon: <MdViewColumn size={16} /> }}
-                  menuWidth={200}
-                  placement="below"
-                >
-                  {table
-                    .getAllLeafColumns()
-                    .filter((column) => column.getCanHide())
-                    .map((column) => (
-                      <DropdownMenuCheckboxItem
-                        key={column.id}
-                        label={column.columnDef.meta?.label ?? column.id}
-                        value={column.getIsVisible()}
-                        onChange={(checked) => column.toggleVisibility(checked)}
-                        hasCloseOnSelect={false}
-                      />
-                    ))}
-                </DropdownMenu>
+                {!isMobile && (
+                  <DropdownMenu
+                    button={{ label: 'Columns', variant: 'secondary', size: 'sm', icon: <MdViewColumn size={16} /> }}
+                    menuWidth={200}
+                    placement="below"
+                  >
+                    {table
+                      .getAllLeafColumns()
+                      .filter((column) => column.getCanHide())
+                      .map((column) => (
+                        <DropdownMenuCheckboxItem
+                          key={column.id}
+                          label={column.columnDef.meta?.label ?? column.id}
+                          value={column.getIsVisible()}
+                          onChange={(checked) => column.toggleVisibility(checked)}
+                          hasCloseOnSelect={false}
+                        />
+                      ))}
+                  </DropdownMenu>
+                )}
               </HStack>
             </HStack>
           }
diff --git a/src/pages/nearle/reports/ordersDetails.js b/src/pages/nearle/reports/ordersDetails.js
index dfd2c9a..6d7b5ee 100644
--- a/src/pages/nearle/reports/ordersDetails.js
+++ b/src/pages/nearle/reports/ordersDetails.js
@@ -12,10 +12,6 @@ import {
   MdCurrencyRupee,
   MdMap,
   MdNoteAlt,
-  MdOutlineLocalShipping,
-  MdOutlineCheckCircle,
-  MdOutlinePendingActions,
-  MdOutlineCancel,
   MdArrowUpward,
   MdArrowDownward,
   MdUnfoldMore
@@ -67,8 +63,7 @@ import DebounceSearchBar from 'components/nearle_components/DebounceSearchBar';
 import LoaderWithImage from 'components/nearle_components/LoaderWithImage';
 import LocationAutocomplete from 'components/nearle_components/LocationAutocomplete';
 import PageHeader from 'components/nearle_components/PageHeader';
-import StatCard from 'components/nearle_components/StatCard';
-import { PageShell, KpiGrid, FilterToolbar, DataCard } from 'components/nearle_components/PageLayout';
+import { PageShell, FilterToolbar, DataCard } from 'components/nearle_components/PageLayout';
 import StatusBadge from 'components/nearle_components/StatusBadge';
 import StatusTabs from 'components/nearle_components/StatusTabs';
 import TableLoader from 'components/nearle_components/TableLoader';
@@ -341,10 +336,6 @@ export default function OrdersDetails() {
     });
     return c;
   }, [allRows]);
-  const total = statusCountByKey.all;
-  const pendingLenght = statusCountByKey.pending;
-  const deliveredLenght = statusCountByKey.delivered;
-  const cancelLenght = statusCountByKey.cancelled;
 
   // The scroll-to-reveal sentinel + IntersectionObserver that used to live
   // here was already dead: the unconditional drain effect above (`if
@@ -476,13 +467,6 @@ export default function OrdersDetails() {
     }
   }, [errormessage]);
 
-  const KPI_META = [
-    { key: 'total', label: 'Total Orders', color: BRAND, icon: MdOutlineLocalShipping, value: total },
-    { key: 'delivered', label: 'Delivered', color: STATUS.delivered, icon: MdOutlineCheckCircle, value: deliveredLenght },
-    { key: 'pending', label: 'Pending', color: STATUS.pending, icon: MdOutlinePendingActions, value: pendingLenght },
-    { key: 'cancelled', label: 'Cancelled', color: STATUS.cancelled, icon: MdOutlineCancel, value: cancelLenght }
-  ];
-
   // A tab/zone/tenant/location/rider/date/search change re-scopes the list,
   // so page 1 is the only page that still means anything — same reset
   // orders.js/riders.js do on their own tables.
@@ -839,7 +823,7 @@ export default function OrdersDetails() {
           Export. They used to be split across the header and a separate filter
           box below, which is why Export kept wrapping onto its own line and
           left that box half empty. */}
-      <PageShell fill>
+      <PageShell>
         {/* Only the primary action lives in the header. The zone picker and
             date range were up here too and the zone picker OVERLAPPED the date
             button — LocationAutocomplete brings its own width and ignores the
@@ -853,25 +837,21 @@ export default function OrdersDetails() {
           action={<Button label="Export" variant="primary" icon={<MdFileDownload size={16} />} onClick={() => setReportDialog(true)} />}
         />
 
-        <KpiGrid>
-          {KPI_META.map((item) => {
-            const Icon = item.icon;
-            return (
-              <StatCard
-                key={item.key}
-                title={item.label}
-                value={item.value ?? 0}
-                icon={<Icon size={20} />}
-                color={item.color}
-                loading={fetchDeliveriesIsLoading}
-              />
-            );
-          })}
-        </KpiGrid>
+        {/* Status segment cards at the top of the page */}
+        <StatusTabs
+          value={currentStatus}
+          onChange={setCurrentStatus}
+          tabs={STATUS_TABS.map((key) => ({ status: key, count: statusCountByKey[key] ?? 0 }))}
+          size="sm"
+          hasDivider={false}
+          // Same as the Orders strip: the status names stand on their own, and
+          // nine glossed labels in a row bury the counts. Set here rather than
+          // stripped from the shared registry, which still feeds Deliveries.
+          hideHint
+        />
 
         {/* Toolbar: Zone · Tenant · Location · Rider · Date · Search. */}
         <DataCard
-          fill
           toolbar={
             <FilterToolbar max={5} minWidth={200}>
               <LocationAutocomplete
@@ -963,14 +943,10 @@ export default function OrdersDetails() {
             </FilterToolbar>
           }
           tabs={
-            <HStack justify="between" vAlign="center" gap={2} wrap="wrap">
-              <StatusTabs
-                value={currentStatus}
-                onChange={setCurrentStatus}
-                tabs={STATUS_TABS.map((key) => ({ status: key, count: statusCountByKey[key] ?? 0 }))}
-                size="sm"
-                hasDivider={false}
-              />
+            <HStack justify="between" vAlign="center" gap={2} wrap="wrap" style={{ width: '100%' }}>
+              <Text weight="medium" color="secondary">
+                {rows.length} {rows.length === 1 ? 'order' : 'orders'}
+              </Text>
               <VStack maxWidth={260} width="100%" padding={0} gap={0}>
                 <DebounceSearchBar
                   value={searchword}
diff --git a/src/pages/nearle/reports/ordersSummary.js b/src/pages/nearle/reports/ordersSummary.js
index 7ca6d35..1cfe102 100644
--- a/src/pages/nearle/reports/ordersSummary.js
+++ b/src/pages/nearle/reports/ordersSummary.js
@@ -311,9 +311,9 @@ export default function OrdersReport() {
   if (isErrorReports) console.warn('ordersSummary error:', reportsError?.message);
 
   const KPI_META = [
-    { key: 'orders', label: 'Total Orders', color: BRAND, icon: MdOutlineLocalShipping, value: stats.totalOrders },
-    { key: 'pending', label: 'Orders Pending', color: '#f59e0b', icon: MdOutlinePendingActions, value: stats.orderPend },
-    { key: 'completed', label: 'Orders Completed', color: '#10b981', icon: MdOutlineCheckCircle, value: stats.orderComplete },
+    { key: 'orders', label: 'Total Orders', color: BRAND, icon: MdOutlineLocalShipping, value: stats.totalOrders, meta: `${stats.totalOrders} orders` },
+    { key: 'pending', label: 'Orders Pending', color: '#f59e0b', icon: MdOutlinePendingActions, value: stats.orderPend, meta: stats.totalOrders > 0 ? `${Math.round((stats.orderPend / stats.totalOrders) * 100)}% of total` : null },
+    { key: 'completed', label: 'Orders Completed', color: '#10b981', icon: MdOutlineCheckCircle, value: stats.orderComplete, meta: stats.totalOrders > 0 ? `${Math.round((stats.orderComplete / stats.totalOrders) * 100)}% of total` : null },
     { key: 'amount', label: 'Total Amount', color: '#0ea5e9', icon: MdOutlineCurrencyRupee, value: formatNumberToRupees(stats.amount) }
   ];
 
@@ -674,7 +674,9 @@ export default function OrdersReport() {
               <StatCard
                 key={item.key}
                 title={item.label}
+                range={item.range}
                 value={item.value ?? 0}
+                meta={item.meta}
                 icon={<Icon size={20} />}
                 color={item.color}
                 loading={isLoadingReports}
diff --git a/src/pages/nearle/reports/ridersSummary.js b/src/pages/nearle/reports/ridersSummary.js
index 3192f1b..ed448c9 100644
--- a/src/pages/nearle/reports/ridersSummary.js
+++ b/src/pages/nearle/reports/ridersSummary.js
@@ -256,9 +256,9 @@ export default function RidersSummary() {
   }, [rows]);
 
   const KPI_META = [
-    { key: 'riders', label: 'Active Riders', color: BRAND, icon: MdDirectionsBike, value: stats.riders },
-    { key: 'orders', label: 'Total Orders', color: '#0ea5e9', icon: MdOutlineLocalShipping, value: stats.orders },
-    { key: 'delivered', label: 'Delivered', color: '#10b981', icon: MdOutlineCheckCircle, value: stats.delivered },
+    { key: 'riders', label: 'Active Riders', color: BRAND, icon: MdDirectionsBike, value: stats.riders, meta: `${stats.riders} riders` },
+    { key: 'orders', label: 'Total Orders', color: '#0ea5e9', icon: MdOutlineLocalShipping, value: stats.orders, meta: `${stats.orders} orders` },
+    { key: 'delivered', label: 'Delivered', color: '#10b981', icon: MdOutlineCheckCircle, value: stats.delivered, meta: stats.orders > 0 ? `${Math.round((stats.delivered / stats.orders) * 100)}% of orders` : null },
     { key: 'amount', label: 'Total Amount', color: '#f59e0b', icon: MdOutlineCurrencyRupee, value: formatNumberToRupees(total) }
   ];
 
@@ -523,7 +523,9 @@ export default function RidersSummary() {
               <StatCard
                 key={item.key}
                 title={item.label}
+                range={item.range}
                 value={item.value ?? 0}
+                meta={item.meta}
                 icon={<Icon size={20} />}
                 color={item.color}
                 loading={isLoadingReports}
diff --git a/src/pages/nearle/riders/riders.js b/src/pages/nearle/riders/riders.js
index bd7f7b7..93f52ab 100644
--- a/src/pages/nearle/riders/riders.js
+++ b/src/pages/nearle/riders/riders.js
@@ -42,6 +42,7 @@ import {
   MdArrowForward,
   MdDelete,
   MdBlock,
+  MdDirectionsBike,
   MdDirectionsCar
 } from 'react-icons/md';
 
@@ -591,19 +592,24 @@ const Riders = () => {
       {
         id: 'rider',
         accessorFn: (row) => row.displayname || row.authname || '—',
-        size: 200,
-        minSize: 160,
+        size: 220,
+        minSize: 180,
         meta: { label: 'Rider' },
         header: () => <SectionLabel>Rider</SectionLabel>,
         cell: ({ getValue, row }) => (
-          <VStack gap={0} padding={0} minWidth={0}>
-            <Text weight="semibold" style={{ whiteSpace: 'nowrap' }}>
-              {getValue()}
-            </Text>
-            <Text type="supporting" color="secondary">
-              {row.original.phone || '—'}
-            </Text>
-          </VStack>
+          <HStack gap={1.5} vAlign="center">
+            <AccentAvatar color="#8b5cf6" size={28}>
+              <MdDirectionsBike size={14} />
+            </AccentAvatar>
+            <VStack gap={0} padding={0} minWidth={0}>
+              <Text weight="bold" maxLines={1} style={{ fontSize: 13, color: DT.textPrimary }}>
+                {getValue()}
+              </Text>
+              <Text type="supporting" color="secondary" style={{ fontSize: 11 }}>
+                {row.original.phone || '—'}
+              </Text>
+            </VStack>
+          </HStack>
         )
       },
       {
@@ -615,13 +621,15 @@ const Riders = () => {
         header: () => <SectionLabel>Address</SectionLabel>,
         cell: ({ row }) => (
           <Tooltip content={row.original.address || ''}>
-            <VStack gap={0} padding={0}>
-              <Text type="supporting" weight="bold" color="secondary" maxLines={1}>
-                {row.original.suburb || (row.original.address ? row.original.address.slice(0, 20) + '…' : '—')}
-              </Text>
-              <Text type="supporting" color="secondary" maxLines={1}>
-                {row.original.city || ''}
+            <VStack gap={0.5} padding={0}>
+              <Text weight="medium" maxLines={1} style={{ fontSize: 12 }}>
+                {row.original.suburb || row.original.address || '—'}
               </Text>
+              {row.original.city && (
+                <Text type="supporting" color="secondary" maxLines={1} style={{ fontSize: 11 }}>
+                  {row.original.city}
+                </Text>
+              )}
             </VStack>
           </Tooltip>
         )
@@ -772,11 +780,23 @@ const Riders = () => {
         <KpiGrid>
           {KPI_META(allRidersSummary).map((item) => {
             const Icon = item.icon;
+            const total = allRidersSummary?.total ?? 0;
+            const share =
+              item.key === 'total'
+                ? `${item.value} riders`
+                : total > 0
+                ? `${Math.round((item.value / total) * 100)}% of ${total}`
+                : null;
+            // Gloss lines dropped, matching the Orders KPI strip: "Active"
+            // does not need "on duty & free" underneath it for people who run
+            // this page all day, and the second line competes with the number
+            // the card exists to show.
             return (
               <StatCard
                 key={item.key}
                 title={item.label}
                 value={item.value ?? 0}
+                meta={share}
                 icon={<Icon size={20} />}
                 color={item.color}
                 loading={riderSummarysLoading}
diff --git a/src/pages/nearle/tripsheets/tripsheets.js b/src/pages/nearle/tripsheets/tripsheets.js
index 6b0614f..408dfa7 100644
--- a/src/pages/nearle/tripsheets/tripsheets.js
+++ b/src/pages/nearle/tripsheets/tripsheets.js
@@ -45,6 +45,7 @@ import Loader from 'components/Loader';
 import TableLoader from 'components/nearle_components/TableLoader';
 import PageHeader from 'components/nearle_components/PageHeader';
 import StatCard from 'components/nearle_components/StatCard';
+import StatusBadge from 'components/nearle_components/StatusBadge';
 import { PageShell, KpiGrid, DataCard } from 'components/nearle_components/PageLayout';
 import {
   getTripsheets,
@@ -207,35 +208,41 @@ const Tripsheets = () => {
       )
     },
     {
-      id: 'sourceHub',
-      accessorFn: (row) => hubMap.get(row.sourcehubid)?.hubname || (row.sourcehubid ? `Hub #${row.sourcehubid}` : '—'),
-      size: 220,
-      minSize: 160,
-      meta: { label: 'Source Hub' },
-      header: () => <SectionLabel>Source Hub</SectionLabel>,
-      cell: ({ getValue }) => <Text weight="semibold">{getValue()}</Text>
-    },
-    {
-      id: 'destinationHub',
-      accessorFn: (row) => hubMap.get(row.destinationhubid)?.hubname || (row.destinationhubid ? `Hub #${row.destinationhubid}` : '—'),
-      size: 220,
-      minSize: 160,
-      meta: { label: 'Destination Hub' },
-      header: () => <SectionLabel>Destination Hub</SectionLabel>,
-      cell: ({ getValue }) => <Text weight="semibold">{getValue()}</Text>
+      id: 'route',
+      accessorFn: (row) => `${hubMap.get(row.sourcehubid)?.hubname || ''} ${hubMap.get(row.destinationhubid)?.hubname || ''}`,
+      size: 320,
+      minSize: 240,
+      meta: { label: 'Route (Source → Destination)' },
+      header: () => <SectionLabel>Route (Source → Destination)</SectionLabel>,
+      cell: ({ row }) => {
+        const src = hubMap.get(row.original.sourcehubid)?.hubname || (row.original.sourcehubid ? `Hub #${row.original.sourcehubid}` : '—');
+        const dest = hubMap.get(row.original.destinationhubid)?.hubname || (row.original.destinationhubid ? `Hub #${row.original.destinationhubid}` : '—');
+        return (
+          <VStack gap={0.5} padding={0} minWidth={0}>
+            <HStack gap={1} vAlign="center" minWidth={0}>
+              <img src="/pickup-icon.png" alt="Pickup" style={{ width: 20, height: 20, flexShrink: 0 }} />
+              <Text weight="semibold" maxLines={1} style={{ fontSize: 12 }}>
+                {src}
+              </Text>
+            </HStack>
+            <HStack gap={1} vAlign="center" minWidth={0}>
+              <img src="/drop-icon.png" alt="Drop" style={{ width: 20, height: 20, flexShrink: 0 }} />
+              <Text type="supporting" color="secondary" maxLines={1} style={{ fontSize: 12 }}>
+                {dest}
+              </Text>
+            </HStack>
+          </VStack>
+        );
+      }
     },
     {
       id: 'status',
       accessorKey: 'status',
-      size: 160,
-      minSize: 120,
+      size: 140,
+      minSize: 110,
       meta: { label: 'Status' },
       header: () => <SectionLabel>Status</SectionLabel>,
-      cell: ({ getValue }) => (
-        <Text type="supporting" color="secondary">
-          {getValue() || '—'}
-        </Text>
-      )
+      cell: ({ getValue }) => <StatusBadge status={getValue()} />
     },
     {
       id: 'actions',
diff --git a/src/pages/nearle/vehicles/vehicles.js b/src/pages/nearle/vehicles/vehicles.js
index db080da..2909d31 100644
--- a/src/pages/nearle/vehicles/vehicles.js
+++ b/src/pages/nearle/vehicles/vehicles.js
@@ -6,6 +6,7 @@ import {
   MdAdd,
   MdBatteryStd,
   MdBatteryFull,
+  MdBatteryChargingFull,
   MdArrowUpward,
   MdArrowDownward,
   MdUnfoldMore
@@ -45,15 +46,16 @@ import { Table, TableHeader, TableBody, TableRow, TableCell, TableHeaderCell } f
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import Loader from 'components/Loader';
+import TableLoader from 'components/nearle_components/TableLoader';
 import DebounceSearchBar from 'components/nearle_components/DebounceSearchBar';
 import PageHeader from 'components/nearle_components/PageHeader';
 import StatCard from 'components/nearle_components/StatCard';
-import TableLoader from 'components/nearle_components/TableLoader';
+import StatusBadge from 'components/nearle_components/StatusBadge';
 import { PageShell, KpiGrid, FilterToolbar, DataCard } from 'components/nearle_components/PageLayout';
 import { getVehicles, createVehicle, updateVehicle, deleteVehicle, getPartners } from 'pages/api/doormileApi';
 import { enqueueSnackbar } from 'notistack';
 import { DT, STATUS } from 'themes/dt/tokens';
-import { TableScroll } from 'themes/dt/primitives';
+import { TableScroll, AccentAvatar } from 'themes/dt/primitives';
 
 const BRAND = DT.brand;
 const VEHICLE_TYPE_OPTIONS = ['Bike', 'Scooter', 'Bicycle', 'Car', 'Van'].map((v) => ({ value: v, label: v }));
@@ -103,6 +105,7 @@ const Vehicles = () => {
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const [dialogOpen, setDialogOpen] = useState(false);
   const [form, setForm] = useState(emptyForm);
+  const [activeFilter, setActiveFilter] = useState('all');
   // Table sorting/resizing/pagination state — mirrors orders.js's/riders.js's
   // slices.
   const [sorting, setSorting] = useState([]);
@@ -114,12 +117,20 @@ const Vehicles = () => {
   const partnerMap = useMemo(() => new Map((partners || []).map((p) => [p.partnerid, p])), [partners]);
 
   const rows = useMemo(() => {
-    if (!debouncedSearch) return vehicles;
+    let list = vehicles;
+    if (activeFilter === 'available') {
+      list = list.filter((v) => String(v.status).toLowerCase() === 'available');
+    } else if (activeFilter === 'lowBattery') {
+      list = list.filter((v) => Number(v.batterypercentage) > 0 && Number(v.batterypercentage) < 20);
+    } else if (activeFilter === 'fullBattery') {
+      list = list.filter((v) => Number(v.batterypercentage) >= 80);
+    }
+    if (!debouncedSearch) return list;
     const q = debouncedSearch.toLowerCase().trim();
-    return vehicles.filter((row) =>
+    return list.filter((row) =>
       [row.vehicleno, row.vehicletype, row.status].filter(Boolean).some((f) => String(f).toLowerCase().includes(q))
     );
-  }, [vehicles, debouncedSearch]);
+  }, [vehicles, activeFilter, debouncedSearch]);
 
   const stats = useMemo(() => {
     const total = vehicles.length;
@@ -234,20 +245,25 @@ const Vehicles = () => {
       {
         id: 'vehicleno',
         accessorKey: 'vehicleno',
-        size: 160,
-        minSize: 130,
-        meta: { label: 'Vehicle No' },
-        header: () => <SectionLabel>Vehicle No</SectionLabel>,
-        cell: ({ getValue }) => <Text weight="bold">{getValue()}</Text>
-      },
-      {
-        id: 'vehicletype',
-        accessorKey: 'vehicletype',
-        size: 130,
-        minSize: 100,
-        meta: { label: 'Type' },
-        header: () => <SectionLabel>Type</SectionLabel>,
-        cell: ({ getValue }) => getValue() || '—'
+        size: 200,
+        minSize: 160,
+        meta: { label: 'Vehicle' },
+        header: () => <SectionLabel>Vehicle</SectionLabel>,
+        cell: ({ row }) => (
+          <HStack gap={1.5} vAlign="center">
+            <AccentAvatar color={BRAND} size={28}>
+              <MdDirectionsCar size={14} />
+            </AccentAvatar>
+            <VStack gap={0} padding={0} minWidth={0}>
+              <Text weight="bold" maxLines={1} style={{ fontSize: 13, color: DT.textPrimary }}>
+                {row.original.vehicleno}
+              </Text>
+              <Text type="supporting" color="secondary" style={{ fontSize: 11 }}>
+                {row.original.vehicletype || 'Vehicle'}
+              </Text>
+            </VStack>
+          </HStack>
+        )
       },
       {
         id: 'partner',
@@ -256,25 +272,41 @@ const Vehicles = () => {
         minSize: 140,
         meta: { label: 'Partner' },
         header: () => <SectionLabel>Partner</SectionLabel>,
-        cell: ({ getValue }) => getValue() || '—'
+        cell: ({ getValue, row }) => (
+          <VStack gap={0} padding={0} minWidth={0}>
+            <Text weight="semibold" maxLines={1} style={{ fontSize: 12 }}>
+              {getValue() || '—'}
+            </Text>
+            {row.original.partnerid && (
+              <Text type="supporting" color="secondary" style={{ fontSize: 11 }}>
+                ID #{row.original.partnerid}
+              </Text>
+            )}
+          </VStack>
+        )
       },
       {
-        id: 'maxweight',
-        accessorKey: 'maxweight',
-        size: 130,
-        minSize: 100,
-        meta: { label: 'Max Weight' },
-        header: () => <SectionLabel>Max Weight</SectionLabel>,
-        cell: ({ getValue }) => getValue() ?? '—'
-      },
-      {
-        id: 'battery',
-        accessorKey: 'batterypercentage',
-        size: 110,
-        minSize: 90,
-        meta: { label: 'Battery' },
-        header: () => <SectionLabel>Battery</SectionLabel>,
-        cell: ({ getValue }) => (getValue() != null ? `${getValue()}%` : '—')
+        id: 'specs',
+        accessorFn: (row) => `${row.maxweight || ''} ${row.batterypercentage || ''}`,
+        size: 160,
+        minSize: 130,
+        meta: { label: 'Weight & Battery' },
+        header: () => <SectionLabel>Weight & Battery</SectionLabel>,
+        cell: ({ row }) => (
+          <VStack gap={0.5} padding={0} minWidth={0}>
+            <Text weight="medium" style={{ fontSize: 12 }}>
+              {row.original.maxweight != null ? `${row.original.maxweight} kg max` : '—'}
+            </Text>
+            {row.original.batterypercentage != null && (
+              <HStack gap={0.5} vAlign="center">
+                <MdBatteryChargingFull size={12} color="#10b981" />
+                <Text type="supporting" color="secondary" style={{ fontSize: 11 }}>
+                  {row.original.batterypercentage}% battery
+                </Text>
+              </HStack>
+            )}
+          </VStack>
+        )
       },
       {
         id: 'status',
@@ -283,12 +315,12 @@ const Vehicles = () => {
         minSize: 100,
         meta: { label: 'Status' },
         header: () => <SectionLabel>Status</SectionLabel>,
-        cell: ({ getValue }) => getValue() || '—'
+        cell: ({ getValue }) => <StatusBadge status={getValue()} />
       },
       {
         id: 'actions',
-        size: 120,
-        minSize: 100,
+        size: 100,
+        minSize: 90,
         enableSorting: false,
         enableResizing: false,
         meta: { label: 'Actions', align: 'right' },
@@ -315,7 +347,6 @@ const Vehicles = () => {
         )
       }
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [partnerMap, pagination.pageIndex, pagination.pageSize]
   );
 
@@ -354,10 +385,46 @@ const Vehicles = () => {
         />
 
         <KpiGrid>
-          <StatCard title="Total Vehicles" value={stats.total} icon={<MdDirectionsCar size={20} />} color={BRAND} />
-          <StatCard title="Available" value={stats.active} icon={<MdDirectionsCar size={20} />} color={STATUS.delivered} />
-          <StatCard title="Low Battery" value={stats.lowBattery} icon={<MdBatteryStd size={20} />} color={STATUS.pending} />
-          <StatCard title="Full Battery" value={stats.fullBattery} icon={<MdBatteryFull size={20} />} color={STATUS.active} />
+          <StatCard
+            title="Total Vehicles"
+            value={stats.total}
+            meta={`${stats.total} vehicles`}
+            icon={<MdDirectionsCar size={20} />}
+            color={BRAND}
+            clickable
+            isSelected={activeFilter === 'all'}
+            onClick={() => setActiveFilter('all')}
+          />
+          <StatCard
+            title="Available"
+            value={stats.active}
+            meta={`${stats.total > 0 ? Math.round((stats.active / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdDirectionsCar size={20} />}
+            color={STATUS.delivered}
+            clickable
+            isSelected={activeFilter === 'available'}
+            onClick={() => setActiveFilter((prev) => (prev === 'available' ? 'all' : 'available'))}
+          />
+          <StatCard
+            title="Low Battery"
+            value={stats.lowBattery}
+            meta={`${stats.total > 0 ? Math.round((stats.lowBattery / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdBatteryStd size={20} />}
+            color={STATUS.pending}
+            clickable
+            isSelected={activeFilter === 'lowBattery'}
+            onClick={() => setActiveFilter((prev) => (prev === 'lowBattery' ? 'all' : 'lowBattery'))}
+          />
+          <StatCard
+            title="Full Battery"
+            value={stats.fullBattery}
+            meta={`${stats.total > 0 ? Math.round((stats.fullBattery / stats.total) * 100) : 0}% of ${stats.total}`}
+            icon={<MdBatteryFull size={20} />}
+            color={STATUS.active}
+            clickable
+            isSelected={activeFilter === 'fullBattery'}
+            onClick={() => setActiveFilter((prev) => (prev === 'fullBattery' ? 'all' : 'fullBattery'))}
+          />
         </KpiGrid>
 
         <DataCard
diff --git a/src/themes/astryx.js b/src/themes/astryx.js
index b5a8508..c9f2c8c 100644
--- a/src/themes/astryx.js
+++ b/src/themes/astryx.js
@@ -93,6 +93,8 @@ export const doormileTheme = defineTheme({
   },
   components: {
     card: { base: { borderRadius: `${DT.radiusCard}px` } },
-    'text-input': { base: { borderRadius: `${DT.radiusField}px` } }
+    'text-input': { base: { borderRadius: `${DT.radiusField}px` } },
+    selector: { base: { borderRadius: `${DT.radiusField}px` } },
+    button: { base: { borderRadius: `${DT.radiusField}px` } }
   }
 });
diff --git a/src/themes/dt/status.js b/src/themes/dt/status.js
index 66a8fa8..e909d34 100644
--- a/src/themes/dt/status.js
+++ b/src/themes/dt/status.js
@@ -26,6 +26,9 @@
 //   dot    — Astryx <StatusDot variant>, which only has five values, so
 //            several lifecycle states collapse onto `accent` here.
 //   icon   — react-icons component (not an element) so callers size it.
+//   hint   — a two-or-three word definition of the state, for surfaces that
+//            show the name and its meaning together (SegmentCard's `range`).
+//            Deliberately terse: it sits beside the label, not under it.
 // ============================================================================
 import {
   MdHourglassEmpty,
@@ -41,16 +44,16 @@ import {
 } from 'react-icons/md';
 
 export const STATUS_META = {
-  all: { label: 'All', color: '#000000', badge: 'neutral', dot: 'neutral', icon: MdList },
-  pending: { label: 'Pending', color: '#f59e0b', badge: 'yellow', dot: 'warning', icon: MdHourglassEmpty },
-  accepted: { label: 'Accepted', color: '#6366f1', badge: 'blue', dot: 'accent', icon: MdPersonPin },
-  arrived: { label: 'Arrived', color: '#06b6d4', badge: 'cyan', dot: 'accent', icon: MdLocationOn },
-  picked: { label: 'Picked', color: '#8b5cf6', badge: 'purple', dot: 'accent', icon: MdInventory2 },
-  active: { label: 'Active', color: '#14b8a6', badge: 'teal', dot: 'success', icon: MdRoute },
-  skipped: { label: 'Skipped', color: '#f97316', badge: 'orange', dot: 'warning', icon: MdSkipNext },
-  delivered: { label: 'Delivered', color: '#10b981', badge: 'green', dot: 'success', icon: MdCheckCircle },
-  cancelled: { label: 'Cancelled', color: '#ef4444', badge: 'error', dot: 'error', icon: MdCancel },
-  inactive: { label: 'Inactive', color: '#ef4444', badge: 'red', dot: 'error', icon: MdCancel }
+  all: { label: 'All', hint: 'every status', color: '#000000', badge: 'neutral', dot: 'neutral', icon: MdList },
+  pending: { label: 'Pending', hint: 'awaiting rider', color: '#f59e0b', badge: 'yellow', dot: 'warning', icon: MdHourglassEmpty },
+  accepted: { label: 'Accepted', hint: 'rider assigned', color: '#6366f1', badge: 'blue', dot: 'accent', icon: MdPersonPin },
+  arrived: { label: 'Arrived', hint: 'at pickup', color: '#06b6d4', badge: 'cyan', dot: 'accent', icon: MdLocationOn },
+  picked: { label: 'Picked', hint: 'parcel collected', color: '#8b5cf6', badge: 'purple', dot: 'accent', icon: MdInventory2 },
+  active: { label: 'Active', hint: 'in transit', color: '#14b8a6', badge: 'teal', dot: 'success', icon: MdRoute },
+  skipped: { label: 'Skipped', hint: 'attempt failed', color: '#f97316', badge: 'orange', dot: 'warning', icon: MdSkipNext },
+  delivered: { label: 'Delivered', hint: 'completed', color: '#10b981', badge: 'green', dot: 'success', icon: MdCheckCircle },
+  cancelled: { label: 'Cancelled', hint: 'not fulfilled', color: '#ef4444', badge: 'error', dot: 'error', icon: MdCancel },
+  inactive: { label: 'Inactive', hint: 'not in service', color: '#ef4444', badge: 'red', dot: 'error', icon: MdCancel }
 };
 
 // Raw backend enums that render as one of the states above. Kept separate from
diff --git a/src/themes/dt/tokens.js b/src/themes/dt/tokens.js
index 3f9e6f9..67bbe15 100644
--- a/src/themes/dt/tokens.js
+++ b/src/themes/dt/tokens.js
@@ -38,11 +38,11 @@ export const DT = {
   // shaped like pills or circles (status chips, avatars, dots). Squaring those
   // doesn't make them consistent, it makes them look broken.
   radiusPill: 999,
-  radiusPage: 20,
-  radiusCard: 16,
-  radiusInner: 12,
-  radiusField: 12,
-  radiusSm: 8,
+  radiusPage: 16,
+  radiusCard: 12,
+  radiusInner: 6,
+  radiusField: 6,
+  radiusSm: 4,
 
   // ---- Elevation -----------------------------------------------------
   // Restrained, low-contrast — corporate (Linear/Stripe), not flashy.