updates on the ui design and desing updates

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
+};