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

src/themes/dt/primitives.js

@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types';
+
+import { Center } from '@astryxdesign/core/Center';
+
+import { DT, soft } from './tokens';
+
+// ============================================================================
+// Shared DT primitives — the tiny components that every DT-styled operator
+// page used to redeclare verbatim at the top of its own file.
+//
+// They were byte-identical in all 6 copies, so the duplication bought nothing
+// and made the pages drift apart whenever one was tweaked. `deliveries.js` is
+// the visual reference for both (see root CLAUDE.md §6).
+// ============================================================================
+
+// Soft popup surface. Under MUI this was a `PaperComponent` handed to every
+// Autocomplete; Astryx's Selector/Typeahead own their own popup chrome, so
+// this now only serves the few hand-rolled dropdowns that remain. Kept as a
+// style object rather than a component for exactly that reason.
+export const softPopupStyle = {
+  marginTop: 6,
+  background: DT.surface,
+  borderRadius: DT.radiusInner + 'px',
+  boxShadow: DT.shadowPop,
+  border: `1px solid ${DT.borderSubtle}`,
+  overflow: 'hidden'
+};
+
+// Scroll container for a table. Astryx's Table renders a bare <table> with no
+// sticky-header or max-height affordance (MUI's TableContainer used to provide that),
+// so pages wrap it in this. The brand-red scrollbar can't be expressed inline
+// — ::-webkit-scrollbar-* are pseudo-elements — hence the one-time <style>.
+export const TableScroll = ({ maxHeight = 'calc(100vh - 260px)', minWidth, children }) => (
+  <>
+    <style>{`
+      .dt-table-scroll { overflow: auto; }
+      .dt-table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
+      .dt-table-scroll::-webkit-scrollbar-track { background-color: ${DT.surfaceAlt}; }
+      .dt-table-scroll::-webkit-scrollbar-thumb {
+        background-color: ${DT.brand}55; border-radius: 8px;
+      }
+      .dt-table-scroll::-webkit-scrollbar-thumb:hover { background-color: ${DT.brand}; }
+      .dt-table-scroll thead th { position: sticky; top: 0; z-index: 2; background-color: ${DT.surfaceAlt}; }
+    `}</style>
+    <div className="dt-table-scroll" style={{ maxHeight }}>
+      <div style={{ minWidth }}>{children}</div>
+    </div>
+  </>
+);
+
+TableScroll.propTypes = {
+  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  children: PropTypes.node
+};
+
+// Colored icon chip — flips between filled and soft based on `selected`.
+// Astryx's own `Avatar` is for people (src / initials / status corner), so a
+// tinted `Center` is the right primitive for an icon swatch. The accent is a
+// caller-supplied hex, hence the inline style.
+export const AccentAvatar = ({ color, selected, size = 24, children }) => (
+  <Center
+    isInline
+    width={size}
+    height={size}
+    style={{
+      flexShrink: 0,
+      borderRadius: '50%',
+      backgroundColor: selected ? color : soft(color),
+      color: selected ? '#fff' : color,
+      transition: 'background-color 0.15s, color 0.15s'
+    }}
+  >
+    {children}
+  </Center>
+);
+
+AccentAvatar.propTypes = {
+  color: PropTypes.string,
+  selected: PropTypes.bool,
+  size: PropTypes.number,
+  children: PropTypes.node
+};