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

src/components/nearle_components/StatCard.js

@@ -1,68 +1,58 @@
 import PropTypes from 'prop-types';
-import { Avatar, Box, Card, CardContent, Skeleton, Stack, Typography } from '@mui/material';
+
+import { Card } from '@astryxdesign/core/Card';
+import { HStack } from '@astryxdesign/core/HStack';
+import { VStack } from '@astryxdesign/core/VStack';
+import { Center } from '@astryxdesign/core/Center';
+import { Text } from '@astryxdesign/core/Text';
+import { Skeleton } from '@astryxdesign/core/Skeleton';
 
 // ==============================|| STAT / KPI CARD (Doormile-style) ||============================== //
 // Clean metric card: muted label, large value, a single soft-tinted rounded
-// avatar holding the icon. No coloured top-stripe, no rainbow — colour appears
-// only in the small avatar so a row of cards reads calm and corporate.
+// tile holding the icon. No coloured top-stripe, no rainbow — colour appears
+// only in the small tile so a row of cards reads calm and corporate.
 //
 // `icon` is a rendered node, e.g. icon={<MdLocalShipping size={20} />}.
-// `color` is a hex accent (defaults to brand purple); `caption` is the small
+// `color` is a hex accent (defaults to brand red); `caption` is the small
 // muted line under the value (e.g. "96% of total").
+//
+// Astryx note: the icon tile keeps an inline `style` because the accent is a
+// per-call hex from the caller (each KPI tile carries its own semantic status
+// colour — see CLAUDE.md's status palette), which Astryx's fixed `variant`
+// and semantic `color` enums can't express. Same escape hatch login.js uses
+// for the brand gradient panel.
 
-export default function StatCard({ title, value, icon, color = '#C01227', caption, loading = false }) {
+export default function StatCard({ title, value, icon, color = '#000000', caption, loading = false }) {
   return (
-    <Card sx={{ height: '100%' }}>
-      <CardContent sx={{ p: { xs: 1.75, md: 2 }, '&:last-child': { pb: { xs: 1.75, md: 2 } } }}>
-        <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}>
-          <Box sx={{ minWidth: 0, flex: 1 }}>
-            <Typography
-              variant="body2"
-              sx={{
-                fontWeight: 500,
-                color: 'text.secondary',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
-              }}
-            >
-              {title}
-            </Typography>
-            {loading ? (
-              <Skeleton variant="rounded" sx={{ width: 72, height: 30, mt: 0.5 }} animation="wave" />
-            ) : (
-              <Typography
-                sx={{
-                  mt: 0.25,
-                  fontWeight: 700,
-                  letterSpacing: '-0.015em',
-                  color: 'grey.800',
-                  lineHeight: 1.15,
-                  fontSize: { xs: '1.375rem', md: '1.5rem' },
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis'
-                }}
-              >
-                {value}
-              </Typography>
-            )}
-            {caption && (
-              <Typography variant="caption" sx={{ display: 'block', mt: 0.5, color: 'text.secondary' }}>
-                {caption}
-              </Typography>
-            )}
-          </Box>
-          {icon && (
-            <Avatar
-              variant="rounded"
-              sx={{ width: 42, height: 42, borderRadius: 2, bgcolor: `${color}14`, color, flexShrink: 0 }}
-            >
-              {icon}
-            </Avatar>
+    <Card height="100%" padding={3}>
+      <HStack justify="between" vAlign="center" gap={1}>
+        <VStack gap={0.5} padding={0} minWidth={0} width="100%">
+          <Text type="supporting" maxLines={1}>
+            {title}
+          </Text>
+          {loading ? (
+            <Skeleton width={72} height={30} radius={2} />
+          ) : (
+            <Text size="2xl" weight="bold" display="block" maxLines={1} hasTabularNumbers>
+              {value}
+            </Text>
           )}
-        </Stack>
-      </CardContent>
+          {caption && (
+            <Text type="supporting" size="sm" display="block">
+              {caption}
+            </Text>
+          )}
+        </VStack>
+        {icon && (
+          <Center
+            width={42}
+            height={42}
+            style={{ flexShrink: 0, borderRadius: 'var(--radius-element)', backgroundColor: `${color}14`, color }}
+          >
+            {icon}
+          </Center>
+        )}
+      </HStack>
     </Card>
   );
 }