updates on the ui design and desing updates

src/components/nearle_components/CLAUDE.md

@@ -19,55 +19,49 @@ These components are imported across every page. Changes here have **fan-out imp
 |---|---|---|
 | `PageHeader.js` | Page title + live subtitle + action slot | ✅ **Astryx** — `Heading`/`Text`/`HStack`/`StatusDot` |
 | `StatCard.js` | KPI / metric tile | ✅ **Astryx** — `Card`/`Text`/`Center`/`Skeleton` |
+| `StatusBadge.js` | Per-row lifecycle badge | ✅ **Astryx** — `Badge` driven by `themes/dt/status.js` |
+| `StatusTabs.js` | Status filter strip with counts | ✅ **Astryx** — `TabList`/`Tab`/`Badge` |
 | `DebounceSearchBar.js` | 500ms-debounced search with ⌘/Ctrl+K focus | ✅ **Astryx** — `TextInput`; **no `sx` prop** (see §4) |
-| `LocationAutocomplete.js` | Zone picker on every operator page | MUI — has `pill` variant matching DT system |
-| `LoaderWithImage.js` | Inline branded spinner for "loading more" rows | MUI |
+| `TableLoader.js` | Inline table loading rows | ✅ **Astryx** — use this, not `OrdersTableSkeleton` |
+| `LocationAutocomplete.js` | Zone picker on every operator page | ✅ **Astryx** |
+| `AddressAutocomplete.js` | Nominatim address search | ✅ **Astryx** — `TextInput` + hand-rolled list (`Typeahead` has no freeSolo) |
+| `LoaderWithImage.js` | Inline branded spinner for "loading more" rows | ✅ **Astryx** |
 | `GlobalToast.js` | Global toast wrapper | ✅ Used at root |
-| `SearchBar.js` | Non-debounced search input | Legacy — prefer `DebounceSearchBar` |
-| `TableLoader.js` | Inline table loading state | Legacy — prefer `OrdersTableSkeleton` |
-| `TitleCard.js` | Old page header | ⛔ **Legacy** — do not use on new pages. The replacement is `PageHeader.js`. |
+
+Every component in this folder is on Astryx. `SearchBar.js` and `TitleCard.js` were deleted during the migration — if you find a reference to either, it's stale: use `DebounceSearchBar` and `PageHeader`.
 
 ---
 
-## 2. Design system token discipline
+## 2. Design system discipline
 
-The `DT` design tokens (palette, alpha helpers, `pillFieldSx`, `SoftPaper`, `AccentAvatar`) are documented in the root `CLAUDE.md` §6 and the source-of-truth implementation is the token block near the top of `src/pages/nearle/deliveries/deliveries.js` (search for `const DT = {`).
+The design system is documented in the root `CLAUDE.md` §6. Read it before editing anything here.
 
-**Hard rules when editing components here:**
+**Hard rules when editing components in this folder:**
 
-- **Universal brand colour is `#C01227`** (Doormile Express red — from `themes/theme/default.js` `primary.main`). Every brand surface (page header, dialog header, KPI primary tile, search bars, edit-action buttons, scrollbars) uses this. Gradient pair: `#C01227 → #D25463`.
-- **Semantic status palette is distinct** from the brand. Use these for lifecycle indicators only: sky `#0ea5e9`, emerald `#10b981`, amber `#f59e0b`, red `#ef4444`, status-purple `#8b5cf6`, cyan `#06b6d4`, teal `#14b8a6`, orange `#f97316`, muted `#94a3b8`, indigo `#6366f1` (Accepted status). Don't replace these with brand red — operators colour-code on them.
-- Don't introduce a colour from `theme.palette` for new surfaces — those are Mantis defaults and don't match the DT system. Use the hex values above directly.
-- Border radii: `12` (inner), `16` (card), `999` (pill). No other values.
-- Shadows: `DT.shadowSoft` / `DT.shadowMd` / `DT.shadowPop`. No raw `box-shadow` strings.
-
-> Some existing redesigned pages (`deliveries.js`) still use `#6366f1` as the brand accent — this is a legacy from the first design pass. `customers.js` and the `createorder1` Saved-Address dialog are already on `#C01227`. When you next edit one of the legacy pages, migrate it to brand red in the same PR.
+- **The brand is black** (`DT.brand`, pinned as `--color-accent` in `themes/astryx.js`). Colour carries *meaning only* — chrome stays neutral. Read the accent as `var(--color-accent)`, never a literal `#000000`.
+- **Never render a status by picking a colour by hand.** Use `<StatusBadge status={…}/>`, or `getStatusMeta()` from `themes/dt/status.js` if you need the parts. It resolves backend enums, aliases, and casing, and degrades to a neutral badge for unknown states.
+- **A raw hex is acceptable in exactly one situation**: a caller-supplied status accent that the token system can't express — `StatCard`'s `color` prop and `AccentAvatar`. Everything else uses `var(--color-*)`, `var(--spacing-*)`, `var(--radius-*)`.
+- **No `<div>`/`<span>` for layout.** `HStack`, `VStack`, `Grid`, `Center`, `Stack`.
+- **No `sx` prop** — it doesn't exist in Astryx. Restyle through `themes/astryx.js` so every call site moves together.
+- **Check the real API before using a component**: `npx -y @astryxdesign/cli component <Name>`. (`yarn dlx` from the generated block does not work — `yarn` is not on PATH.)
 
 ---
 
-## 3. `LocationAutocomplete` — the `pill` prop is opt-in
-
-The component supports two visual modes, controlled by the `pill` prop:
+## 3. `LocationAutocomplete` — the zone picker
 
 ```jsx
-// Default (legacy, "Select Zones" label, outlined TextField) — used by old pages
-<LocationAutocomplete setAppId={...} setLocoName={...} />
-
-// Pill variant — used by all redesigned pages (deliveries, tenants, pricing, customers)
 <LocationAutocomplete
-  pill
-  accentColor="#6366f1"
-  icon={<MdMyLocation size={14} />}
+  locaName={locaName}
+  setAppId={setAppId}
+  setLocoName={setLocoName}
+  setPage={setPage}          // optional — resets pagination on zone change
   placeholder="Select Zone"
-  paperComponent={SoftPaper}
-  setAppId={...}
-  setLocoName={...}
 />
 ```
 
-- **For any new page:** use `pill`. Always.
-- **For existing legacy pages (orders, invoice, riders, etc.):** keep the default until that page is redesigned. Don't change them piecemeal.
-- The `accentColor` defaults to `#6366f1` — only override when the page's accent is different (rare).
+- The old `pill` / `accentColor` / `icon` / `paperComponent` props are **gone**. There is one visual mode now: appearance comes from the Astryx theme, so the picker looks identical on every page. If you find a call site passing them, it's stale.
+- The list is derived from `GET /admin/hubs`, not a real zones endpoint — the `applocationid` "zone" concept was jupiter-only and most list endpoints on the new backend don't accept it as a filter. Don't assume selecting a zone actually filters a page you haven't checked (root `CLAUDE.md` §11).
+
 
 ---
 
@@ -93,10 +87,10 @@ The component supports two visual modes, controlled by the `pill` prop:
 
 Only when:
 1. Used by **two or more pages** in production code.
-2. Has its own internal state or shortcuts (otherwise just use an `AccentAvatar` + `Box` inline).
+2. Has its own internal state or shortcuts (otherwise compose Astryx primitives inline).
 3. The component encapsulates a non-trivial pattern that's been duplicated more than twice.
 
-Don't add a wrapper that just renames an MUI primitive (e.g. `<NearleButton>`). Don't add a component that's a single instance of a styled `Paper`.
+Don't add a wrapper that just renames an Astryx primitive (e.g. `<NearleButton>`) — restyle it in the theme instead. Don't add a component that's a single instance of a styled `Card`.
 
 ---
 
@@ -109,10 +103,19 @@ Don't add a wrapper that just renames an MUI primitive (e.g. `<NearleButton>`).
 > to `14` and the restrained set. That drift is what made pages stop looking
 > alike.
 
-`DT`, the alpha helpers (`a`/`tint`/`soft`/`ring`/`edge`), `pillFieldSx`, and
-the table chrome (`tableScrollSx`/`tableHeadSx`/`tableRowSx`) live in
-`src/themes/dt/tokens.js`. `SoftPaper` and `AccentAvatar` live in
-`src/themes/dt/primitives.js`. **Import them. Never re-declare them in a page.**
+The same failure repeated with status: five pages each grew a private
+`STATUS_META`, and they disagreed on what to call the same order — that is why
+`themes/dt/status.js` now exists.
+
+`DT`, the raw `STATUS` hexes, and the alpha helpers (`a`/`tint`/`soft`/`ring`/`edge`)
+live in `src/themes/dt/tokens.js`. Lifecycle rendering lives in
+`src/themes/dt/status.js`. `TableScroll` and `AccentAvatar` live in
+`src/themes/dt/primitives.js`. The theme itself lives in `src/themes/astryx.js`.
+**Import them. Never re-declare them in a page.**
+
+The `pillFieldSx` / `table*Sx` exports in `tokens.js` are MUI-only and marked
+⛔ LEGACY — they exist solely for the pages awaiting conversion and are deleted
+with the MUI dependency. Don't add a call site.
 
 If a page genuinely needs a different value, it should be a new named export in
 the shared module, not a local override — that way the divergence is visible in

src/components/nearle_components/StatusBadge.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+
+import { Badge } from '@astryxdesign/core/Badge';
+
+import { getStatusMeta } from 'themes/dt/status';
+
+// ==============================|| STATUS BADGE ||============================== //
+// The per-row lifecycle indicator for every operator table.
+//
+// This replaces the hand-rolled "soft pill" that each page used to build out of
+// an <AccentAvatar> plus a tinted <Box> — six near-identical copies that drifted
+// on padding, radius, and icon size. Astryx's Badge already is that pill, so the
+// only thing worth sharing is the status → variant lookup, which now lives in
+// themes/dt/status.js.
+//
+//   <StatusBadge status={row.orderstatus} />
+//
+// `status` accepts a canonical key (`pending`), a raw backend enum
+// (`miler_assigned`), or any casing — getStatusMeta resolves all three and
+// falls back to a neutral badge showing the raw string, so an unmapped status
+// is visible rather than silently blank.
+//
+// Pass `label` only to override the registry's wording for a page-specific
+// nuance; the default keeps every page calling the same state the same thing,
+// which is the whole point of the registry.
+
+export default function StatusBadge({ status, label, showIcon = true }) {
+  const meta = getStatusMeta(status);
+  const Icon = meta.icon;
+
+  return <Badge variant={meta.badge} label={label ?? meta.label} icon={showIcon ? <Icon size={14} /> : undefined} />;
+}
+
+StatusBadge.propTypes = {
+  status: PropTypes.string,
+  label: PropTypes.node,
+  showIcon: PropTypes.bool
+};

src/components/nearle_components/StatusTabs.js

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+
+import { TabList, Tab } from '@astryxdesign/core/TabList';
+import { Badge } from '@astryxdesign/core/Badge';
+
+import { getStatusMeta } from 'themes/dt/status';
+
+// ==============================|| 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).
+//
+//   <StatusTabs
+//     value={currentStatus}
+//     onChange={setCurrentStatus}
+//     tabs={[
+//       { status: 'pending', count: batchCounts.uncoveredLength },
+//       { status: 'delivered', count: batchCounts.coveredLength }
+//     ]}
+//   />
+//
+// 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.
+//
+// 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.
+
+export default function StatusTabs({ value, onChange, tabs, size = 'md', hasDivider = true }) {
+  return (
+    <TabList value={value} onChange={onChange} size={size} hasDivider={hasDivider}>
+      {tabs.map((tab) => {
+        const meta = getStatusMeta(tab.status);
+        const Icon = meta.icon;
+        const hasCount = tab.count !== undefined && tab.count !== null;
+
+        return (
+          <Tab
+            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}
+          />
+        );
+      })}
+    </TabList>
+  );
+}
+
+StatusTabs.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      status: PropTypes.string.isRequired,
+      label: PropTypes.node,
+      count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      isUrgent: PropTypes.bool
+    })
+  ).isRequired,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  hasDivider: PropTypes.bool
+};