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

src/pages/nearle/clientPricing/clientPricing.js

@@ -29,7 +29,6 @@ import {
 } from '@mui/material';
 import {
   MdLocalOffer,
-  MdMyLocation,
   MdGroups,
   MdPlace,
   MdSpeed,
@@ -56,66 +55,12 @@ import { OrdersTableSkeleton } from '../orders/OrdersTableSkeleton';
 import { getallpricing, getTenants, fetchAppLocations } from 'pages/api/api';
 import { createAdminPricing, updateAdminPricing, deleteAdminPricing, simulatePricing } from 'pages/api/doormileApi';
 import { enqueueSnackbar } from 'notistack';
+import { DT, tint, soft, edge } from 'themes/dt/tokens';
+import { AccentAvatar } from 'themes/dt/primitives';
 
-// ============================================================================
-// Design tokens — shared with the deliveries / tenants / customers pages so every
-// surface (header, KPI tiles, table, badges) speaks the same visual language.
-// Keep this block in sync with customers.js / deliveries.js.
-// ============================================================================
-const DT = {
-  radiusPill: 999,
-  radiusCard: 14,
-  radiusField: 10,
-  shadowSoft: '0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05)',
-  shadowMd: '0 1px 3px rgba(15, 23, 42, 0.06)',
-  shadowPop: '0 12px 32px rgba(15, 23, 42, 0.12)',
-  textPrimary: '#0f172a',
-  textSecondary: '#64748b',
-  textMuted: '#94a3b8',
-  borderSubtle: '#e2e8f0',
-  borderHover: '#cbd5e1',
-  divider: '#f1f5f9',
-  surface: '#ffffff',
-  surfaceAlt: '#f8fafc',
-  brand: '#662582'
-};
-const a = (c, suffix) => `${c}${suffix}`;
-const tint = (c) => a(c, '08');
-const soft = (c) => a(c, '18');
-const ring = (c) => a(c, '26');
-const edge = (c) => a(c, '55');
-
-const BRAND = '#C01227';
+const BRAND = '#000000';
 const VEHICLE_TYPES = ['Bike', 'Scooter', 'Bicycle', 'Car', 'Van'];
 
-const SoftPaper = (props) => (
-  <Paper
-    {...props}
-    sx={{
-      mt: 0.75,
-      borderRadius: 2,
-      boxShadow: DT.shadowPop,
-      border: '1px solid',
-      borderColor: 'divider',
-      overflow: 'hidden'
-    }}
-  />
-);
-
-const AccentAvatar = ({ color, selected, size = 24, children }) => (
-  <Avatar
-    sx={{
-      width: size,
-      height: size,
-      bgcolor: selected ? color : soft(color),
-      color: selected ? '#fff' : color,
-      transition: 'background-color 0.15s, color 0.15s'
-    }}
-  >
-    {children}
-  </Avatar>
-);
-
 const formatRupees = (value) =>
   new Intl.NumberFormat('en-IN', {
     style: 'currency',
@@ -378,12 +323,7 @@ const ClientsPricing = () => {
               locaName={locaName}
               setAppId={setAppId}
               setLocoName={setLocoName}
-              pill
-              accentColor={BRAND}
-              icon={<MdMyLocation size={14} />}
               placeholder="Select Zone"
-              paperComponent={SoftPaper}
-              sx={{ width: { xs: '100%', sm: 220 }, zIndex: 100 }}
             />
             <Button
               variant="outlined"
@@ -461,16 +401,6 @@ const ClientsPricing = () => {
               onChange={setSearchword}
               onDebouncedChange={setDebouncedSearch}
               placeholder={`Search pricing (ctrl+k)`}
-              sx={{
-                m: 0,
-                width: '100%',
-                borderRadius: DT.radiusField + 'px',
-                bgcolor: DT.surface,
-                '& fieldset': { borderColor: DT.borderSubtle, borderWidth: 1 },
-                '&:hover fieldset': { borderColor: DT.borderHover },
-                '&.Mui-focused fieldset': { borderColor: BRAND, borderWidth: 1.5 },
-                '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` }
-              }}
             />
           </Box>
         </Stack>