feat: Implement date range picker and enhance order assignment functionality

- Added DateRangePicker component for selecting date ranges in OrderAssignment.
- Updated OrderAssignment to fetch bookings based on selected date range.
- Enhanced status handling in OrderAssignment with new status chip display logic.
- Refactored KPI card implementation in RiderRoutes and Riders to use shared StatCard component.
- Improved ProfileDrawer to retain rider data during close transition.
- Fixed minor text formatting in Routing component.

src/pages/Dashboard.jsx

@@ -22,7 +22,6 @@ import {
   Divider,
   Popover,
   Alert,
-  Skeleton,
   useMediaQuery,
   Snackbar,
   CircularProgress
@@ -46,6 +45,7 @@ import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
 import ArrowRightAltRoundedIcon from '@mui/icons-material/ArrowRightAltRounded';
 
+import StatCard from '@/components/StatCard';
 import { getDashboard, getInboundVehicles, getActivity, getZones, getHubReport } from '@/api/hub';
 import { getHubContext } from '@/auth/session';
 
@@ -510,33 +510,9 @@ export default function Dashboard() {
           mb: { xs: 3, md: 5 }
         }}
       >
-        {kpiCards.map((s) => {
-          const Icon = s.icon;
-          return (
-            <Card key={s.label} sx={{ height: '100%', position: 'relative', overflow: 'hidden', borderRadius: 2, boxShadow: '0px 2px 14px rgba(38,38,38,0.03)', border: '1px solid #ECEEF1' }}>
-              <CardContent sx={{ p: { xs: 2, sm: 2.5 }, '&:last-child': { pb: { xs: 2, sm: 2.5 } } }}>
-                <Stack direction="row" alignItems="center" spacing={1.75} sx={{ mb: 1.75 }}>
-                  <Avatar sx={{ bgcolor: s.color + '15', color: s.color, width: { xs: 40, sm: 46 }, height: { xs: 40, sm: 46 }, borderRadius: 2, flexShrink: 0 }}>
-                    <Icon fontSize="small" />
-                  </Avatar>
-                  <Typography sx={{ color: '#868E96', fontWeight: 700, lineHeight: 1.3, fontSize: { xs: '0.72rem', sm: '0.78rem' }, textTransform: 'uppercase', letterSpacing: 0.6 }}>
-                    {s.label}
-                  </Typography>
-                </Stack>
-                {loading ? (
-                  <Skeleton variant="text" width="60%" sx={{ fontSize: { xs: '1.5rem', sm: '1.9rem' }, mb: 0.75 }} />
-                ) : (
-                  <Typography sx={{ fontWeight: 800, color: '#212529', fontSize: { xs: '1.5rem', sm: '1.9rem' }, lineHeight: 1.15, mb: 0.75 }}>
-                    {s.value}
-                  </Typography>
-                )}
-                <Typography variant="caption" sx={{ display: 'block', color: '#6c757d', fontWeight: 500 }}>
-                  {s.sub}
-                </Typography>
-              </CardContent>
-            </Card>
-          );
-        })}
+        {kpiCards.map((s) => (
+          <StatCard key={s.label} icon={s.icon} label={s.label} value={s.value} sub={s.sub} color={s.color} loading={loading} />
+        ))}
       </Box>
 
       {/* Operations Grid */}