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/operations/RiderRoutes.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import {
-  Box, Typography, Card, CardContent, Avatar, Chip, Stack, Button, Grid,
+  Box, Typography, Card, Avatar, Chip, Stack, Button, Grid,
   IconButton, List, ListItemButton, ListItemText, Collapse, Tooltip, Divider,
   LinearProgress, Menu, MenuItem, Drawer, Paper
 } from '@mui/material';
@@ -9,6 +9,7 @@ import { MapContainer, TileLayer, Marker, Popup, Polyline, Tooltip as LTooltip,
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 
+import StatCard from '@/components/StatCard';
 import { getRiderRoutes } from '@/api/hub';
 import { getHubContext } from '@/auth/session';
 
@@ -225,24 +226,8 @@ async function fetchRoadRoute(stops) {
 // ════════════════════════════════════════════════════════════════════════════════
 //  Small presentational pieces
 // ════════════════════════════════════════════════════════════════════════════════
-function KpiCard({ icon: Icon, label, value, sub, color, bg }) {
-  return (
-    <Card elevation={0} sx={{ borderRadius: 2, border: '1px solid #ECEEF1', height: '100%' }}>
-      <CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}>
-        <Stack direction="row" alignItems="center" spacing={1.25} sx={{ mb: 1 }}>
-          <Avatar variant="rounded" sx={{ bgcolor: bg, color, width: 34, height: 34, borderRadius: 2 }}>
-            <Icon sx={{ fontSize: 18 }} />
-          </Avatar>
-          <Typography sx={{ fontSize: '0.68rem', color: '#6C757D', fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>
-            {label}
-          </Typography>
-        </Stack>
-        <Typography sx={{ fontSize: '1.5rem', fontWeight: 800, color: '#1A1A2E', lineHeight: 1.1 }}>{value}</Typography>
-        {sub && <Typography variant="caption" color="text.secondary">{sub}</Typography>}
-      </CardContent>
-    </Card>
-  );
-}
+// KPI card — aliased to the shared StatCard so this strip matches every other page.
+const KpiCard = (props) => <StatCard {...props} />;
 
 function DetailRow({ icon: Icon, label, value, valueColor }) {
   if (value === undefined || value === null || value === '') return null;