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

src/pages/nearle/reports/profitability.js

@@ -1,10 +1,14 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useInfiniteQuery } from '@tanstack/react-query';
 
-// material-ui
-import { Box, Paper, TextField, Typography } from '@mui/material';
 import { MdCalendarMonth } from 'react-icons/md';
 
+import { Card } from '@astryxdesign/core/Card';
+import { HStack } from '@astryxdesign/core/HStack';
+import { VStack } from '@astryxdesign/core/VStack';
+import { EmptyState } from '@astryxdesign/core/EmptyState';
+import { DateInput } from '@astryxdesign/core/DateInput';
+
 import dayjs from 'dayjs';
 import { parseDoormileTimestamp } from 'utils/doormileTimestamp';
 
@@ -37,14 +41,7 @@ import { SKIPPED_STATUSES } from '../dispatch/dispatchShared';
 // same pattern as reports/ordersDetails.js and deliveries.js.
 // ============================================================================
 
-const DT = {
-  radiusCard: 14,
-  shadowSoft: '0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05)',
-  textSecondary: '#64748b',
-  borderSubtle: '#e2e8f0',
-  surface: '#ffffff'
-};
-const BRAND = '#C01227';
+const BRAND = '#000000';
 
 // Profit formulas + batch windows imported from ProfitabilitySection.js
 // (the single source of truth) rather than duplicated here — used to total
@@ -142,47 +139,22 @@ const Profitability = () => {
         subtitle={`Live · ${dayjs(selectedDate).format('DD MMM YYYY')}`}
         live
         action={
-          <Paper
-            elevation={0}
-            sx={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: 1,
-              px: 1.5,
-              py: 0.75,
-              borderRadius: DT.radiusCard + 'px',
-              border: '1px solid',
-              borderColor: DT.borderSubtle,
-              boxShadow: DT.shadowSoft,
-              bgcolor: DT.surface
-            }}
-          >
+          <HStack gap={2} vAlign="center">
             <MdCalendarMonth size={16} color={BRAND} />
-            <TextField
-              type="date"
-              size="small"
-              variant="standard"
-              value={selectedDate}
-              onChange={(e) => e.target.value && setSelectedDate(e.target.value)}
-              InputProps={{ disableUnderline: true }}
-              sx={{ '& input': { fontWeight: 700, color: DT.textSecondary, p: 0 } }}
-            />
-          </Paper>
+            <DateInput label="Report date" isLabelHidden size="sm" value={selectedDate} onChange={(v) => v && setSelectedDate(v)} />
+          </HStack>
         }
       />
 
-      <Box sx={{ mt: { xs: 1.5, md: 2 } }}>
+      <VStack gap={0} padding={0} style={{ marginTop: 16 }}>
         {!isLoading && riders.length === 0 ? (
-          <Paper
-            elevation={0}
-            sx={{ p: 6, textAlign: 'center', borderRadius: DT.radiusCard + 'px', border: '1px solid', borderColor: DT.borderSubtle }}
-          >
-            <Typography sx={{ fontWeight: 700, color: DT.textSecondary }}>No deliveries for {dayjs(selectedDate).format('DD MMM YYYY')}</Typography>
-          </Paper>
+          <Card padding={6}>
+            <EmptyState title={`No deliveries for ${dayjs(selectedDate).format('DD MMM YYYY')}`} />
+          </Card>
         ) : (
           <ProfitabilitySection riders={riders} totalDailyProfit={totalDailyProfit} selectedDate={selectedDate} />
         )}
-      </Box>
+      </VStack>
     </>
   );
 };