updates on the ui changes and frully removed the mui and converted into astryx and color change

src/themes/dt/tokens.js

@@ -23,7 +23,31 @@ export const DT = {
   divider: '#f1f5f9',
   surface: '#ffffff',
   surfaceAlt: '#f8fafc',
-  brand: '#C01227'
+  brand: '#000000'
+};
+
+// ---------------------------------------------------------------------------
+// Semantic status palette — lifecycle colours, deliberately distinct from the
+// brand (see root CLAUDE.md §6). Pages have historically inlined these hexes;
+// new code should reference STATUS so there is one place to change them.
+// This also replaces the `theme.palette.error/success/...` lookups that used
+// to pull the same colours out of the MUI theme.
+// ---------------------------------------------------------------------------
+export const STATUS = {
+  pending: '#f59e0b', // amber
+  accepted: '#6366f1', // indigo
+  arrived: '#06b6d4', // cyan
+  picked: '#8b5cf6', // light purple
+  active: '#14b8a6', // teal
+  skipped: '#f97316', // orange
+  delivered: '#10b981', // emerald
+  cancelled: '#ef4444', // red
+  info: '#0ea5e9', // sky
+  muted: '#94a3b8', // slate
+  // Aliases for non-lifecycle usage (network banners, validation, …).
+  success: '#10b981',
+  warning: '#f59e0b',
+  error: '#ef4444'
 };
 
 // Quick alpha helpers (hex + percentage suffix).
@@ -54,3 +78,53 @@ export const pillFieldSx = () => ({
   },
   '& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': { color: DT.textMuted }
 });
+
+// ---------------------------------------------------------------------------
+// Table chrome — lifted verbatim from deliveries.js, the design reference for
+// every operator list page (root CLAUDE.md §6). These three used to be
+// copy-pasted into each page's <TableContainer>/<TableHead>/<TableRow>, which
+// is how pages drifted apart (grey scrollbars on some, brand-red on others).
+// Spread them instead of restating the rules:
+//
+//   <TableContainer sx={{ maxHeight: ..., ...tableScrollSx }}>
+//     <Table stickyHeader>
+//       <TableHead><TableRow sx={tableHeadSx}>...
+//       <TableBody><TableRow sx={tableRowSx}>...
+// ---------------------------------------------------------------------------
+
+// Brand-red scrollbar. Track is the page's alt surface so the gutter reads as
+// part of the table rather than a hole in it.
+export const tableScrollSx = {
+  overflow: 'auto',
+  '&::-webkit-scrollbar': { width: '10px', height: '10px', cursor: 'pointer' },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: edge(DT.brand),
+    borderRadius: '8px',
+    cursor: 'pointer',
+    '&:hover': { backgroundColor: DT.brand }
+  },
+  '&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
+};
+
+// Uppercase muted header row on the alt surface.
+export const tableHeadSx = {
+  '& th': {
+    backgroundColor: DT.surfaceAlt,
+    color: DT.textSecondary,
+    fontSize: { xs: 10, md: 11 },
+    fontWeight: 800,
+    letterSpacing: 0.6,
+    textTransform: 'uppercase',
+    whiteSpace: 'nowrap',
+    borderBottom: `1px solid ${DT.borderSubtle}`,
+    py: { xs: 1, md: 1.25 },
+    px: { xs: 1, md: 2 }
+  }
+};
+
+// Body row: hairline divider, tinted hover. No shadow on hover — see the
+// design-system "don'ts" in root CLAUDE.md §6.
+export const tableRowSx = {
+  '& td': { borderBottom: `1px solid ${DT.divider}` },
+  '&:hover': { backgroundColor: DT.surfaceAlt }
+};