Merge conflicts resolved

src/pages/Dashboard.jsx

@@ -1,8 +1,9 @@
 import { useState, useEffect, useMemo } from 'react';
 import {
   Grid, Card, Box, Stack, Typography, Button, Divider, LinearProgress, CircularProgress, Alert,
-  Table, TableBody, TableCell, TableHead, TableRow, TableContainer
+  Table, TableBody, TableCell, TableHead, TableRow, TableContainer, useMediaQuery
 } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import ApartmentOutlinedIcon from '@mui/icons-material/ApartmentOutlined';
 import FiberNewOutlinedIcon from '@mui/icons-material/FiberNewOutlined';
@@ -40,7 +41,7 @@ function Panel({ icon: Icon, title, action, color = 'primary', noPadding = false
       <Stack
         direction="row" spacing={1.5} alignItems="center"
         sx={{
-          px: 3, py: 2, borderBottom: 1, borderColor: 'divider',
+          px: { xs: 2, sm: 3 }, py: 2, borderBottom: 1, borderColor: 'divider',
           background: (theme) => `linear-gradient(90deg, ${theme.palette[color].lighter}66 0%, transparent 100%)`
         }}
       >
@@ -50,12 +51,14 @@ function Panel({ icon: Icon, title, action, color = 'primary', noPadding = false
         <Typography variant="h6" sx={{ fontWeight: 700, color: 'grey.800', flexGrow: 1, letterSpacing: '-0.3px' }}>{title}</Typography>
         {action}
       </Stack>
-      <Box sx={{ p: noPadding ? 0 : 3, flexGrow: 1 }}>{children}</Box>
+      <Box sx={{ p: noPadding ? 0 : { xs: 2, sm: 3 }, flexGrow: 1 }}>{children}</Box>
     </Card>
   );
 }
 
 export default function Dashboard() {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const [clients, setClients] = useState([]);
   const [team, setTeam] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -133,6 +136,21 @@ export default function Dashboard() {
           <Panel icon={HistoryOutlinedIcon} title="Recent Clients" color="primary" noPadding>
             {recent.length === 0 ? (
               <EmptyState title="No clients yet" caption="Add a client to see it here." />
+            ) : isMobile ? (
+              <Stack divider={<Divider />}>
+                {recent.map((c) => (
+                  <Stack key={c.id} direction="row" spacing={1.25} alignItems="center" sx={{ px: 2, py: 1.5 }}>
+                    <UserAvatar name={c.name} size={36} />
+                    <Box sx={{ minWidth: 0, flexGrow: 1 }}>
+                      <Typography variant="body2" sx={{ fontWeight: 600, color: 'grey.800' }} noWrap>{c.name}</Typography>
+                      <Typography variant="caption" color="text.secondary" noWrap sx={{ display: 'block' }}>
+                        {[titleCase(c.businessType), c.city].filter(Boolean).join(' · ') || '—'} · {c.parcelVolume.toLocaleString('en-IN')} parcels
+                      </Typography>
+                    </Box>
+                    <StatusChip status={c.status} />
+                  </Stack>
+                ))}
+              </Stack>
             ) : (
               <TableContainer>
                 <Table sx={{ minWidth: 600 }}>