updates on the redesign changes

.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(node -e \"require\\('@babel/parser'\\).parse\\(require\\('fs'\\).readFileSync\\('src/pages/nearle/reports/orderSummary.js','utf8'\\), { sourceType: 'module', plugins: ['jsx', 'optionalChaining', 'nullishCoalescingOperator', 'classProperties', 'objectRestSpread'] }\\); console.log\\('OK'\\)\")",
+      "Bash(node -e \"require\\('@babel/parser'\\).parse\\(require\\('fs'\\).readFileSync\\('src/pages/nearle/reports/ridersummary.js','utf8'\\), { sourceType: 'module', plugins: ['jsx', 'optionalChaining', 'nullishCoalescingOperator', 'classProperties', 'objectRestSpread'] }\\); console.log\\('OK'\\)\")",
+      "Bash(node -e \"require\\('@babel/parser'\\).parse\\(require\\('fs'\\).readFileSync\\('src/pages/nearle/invoice/invoice.js','utf8'\\), { sourceType: 'module', plugins: ['jsx', 'optionalChaining', 'nullishCoalescingOperator', 'classProperties', 'objectRestSpread'] }\\); console.log\\('OK'\\)\")"
+    ]
+  }
+}

src/pages/nearle/_shared/ordersDesign.js

@@ -0,0 +1,341 @@
+// ============================================================================
+// ordersDesign.js — shared design-system primitives for the operator pages.
+//
+// Source of truth for the look-and-feel established on the Orders Details
+// screen (src/pages/nearle/reports/ordersDetails.js). All other report and
+// list pages import from here so the entire admin panel reads as one product.
+//
+// Exports:
+//   DT, BRAND, BRAND_LIGHT            — palette tokens
+//   tint / soft / ring / edge         — alpha helpers (08 / 18 / 26 / 55 hex)
+//   formatNumberToRupees              — INR currency formatter
+//   STATUS_META                       — semantic per-status meta (label/color/icon)
+//   StatusBadge                       — filled pill, white text on solid color
+//   TimelineCell                      — time-dominant (bold) / date-secondary (muted)
+//   MetricPill                        — small money/number pill for table cells
+//   SoftPaper                         — autocomplete dropdown surface
+//   AccentAvatar                      — colored circular icon avatar
+//   pillFieldSx                       — rounded pill text-field styling
+//   PrimaryButtonSx / SecondaryButtonSx — unified 32-px action-button system
+// ============================================================================
+
+import React from 'react';
+import { Avatar, Box, Paper, Stack, Typography } from '@mui/material';
+import {
+  MdLocalShipping,
+  MdHourglassEmpty,
+  MdCheckCircle,
+  MdCancel,
+  MdAccessTime,
+  MdHistoryToggleOff,
+  MdAssignmentTurnedIn
+} from 'react-icons/md';
+import dayjs from 'dayjs';
+
+// ----------------------------------------------------------------------------
+// Design tokens
+// ----------------------------------------------------------------------------
+export const DT = {
+  radiusPill: 999,
+  radiusCard: 16,
+  shadowSoft: '0 14px 40px rgba(15, 23, 42, 0.10)',
+  shadowMd: '0 8px 24px rgba(15, 23, 42, 0.08)',
+  shadowPop: '0 18px 50px rgba(15, 23, 42, 0.18)',
+  textPrimary: '#0f172a',
+  textSecondary: '#64748b',
+  textMuted: '#94a3b8',
+  borderSubtle: '#e2e8f0',
+  divider: '#f1f5f9',
+  surface: '#ffffff',
+  surfaceAlt: '#f8fafc'
+};
+
+export const BRAND = '#662582';
+export const BRAND_LIGHT = '#9255AB';
+
+const dtA = (c, suffix) => `${c}${suffix}`;
+export const tint = (c) => dtA(c, '08');
+export const soft = (c) => dtA(c, '18');
+export const ring = (c) => dtA(c, '26');
+export const edge = (c) => dtA(c, '55');
+
+// ----------------------------------------------------------------------------
+// Money formatter
+// ----------------------------------------------------------------------------
+export function formatNumberToRupees(value) {
+  return new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: 'INR',
+    minimumFractionDigits: 2
+  }).format(value || 0);
+}
+
+// ----------------------------------------------------------------------------
+// Status meta — colors per brand standard:
+// green=delivered, amber=pending, blue=created/processing,
+// red=cancelled, dark-red=failed, purple=on-hold.
+// ----------------------------------------------------------------------------
+export const STATUS_META = {
+  created:    { label: 'Created',    color: '#3b82f6', icon: MdLocalShipping },
+  pending:    { label: 'Pending',    color: '#f59e0b', icon: MdHourglassEmpty },
+  accepted:   { label: 'Accepted',   color: '#6366f1', icon: MdAssignmentTurnedIn },
+  ready:      { label: 'Accepted',   color: '#6366f1', icon: MdAssignmentTurnedIn },
+  arrived:    { label: 'Arrived',    color: '#06b6d4', icon: MdCheckCircle },
+  picked:     { label: 'Picked',     color: '#8b5cf6', icon: MdLocalShipping },
+  active:     { label: 'Active',     color: '#0ea5e9', icon: MdLocalShipping },
+  modified:   { label: 'Confirmed',  color: '#10b981', icon: MdCheckCircle },
+  confirmed:  { label: 'Confirmed',  color: '#10b981', icon: MdCheckCircle },
+  processing: { label: 'Processing', color: '#3b82f6', icon: MdAccessTime },
+  onhold:     { label: 'On Hold',    color: '#8b5cf6', icon: MdHistoryToggleOff },
+  'on hold':  { label: 'On Hold',    color: '#8b5cf6', icon: MdHistoryToggleOff },
+  closed:     { label: 'Closed',     color: '#06b6d4', icon: MdCheckCircle },
+  completed:  { label: 'Completed',  color: '#10b981', icon: MdCheckCircle },
+  delivered:  { label: 'Delivered',  color: '#10b981', icon: MdCheckCircle },
+  skipped:    { label: 'Skipped',    color: '#f97316', icon: MdCancel },
+  failed:     { label: 'Failed',     color: '#991b1b', icon: MdCancel },
+  cancelled:  { label: 'Cancelled',  color: '#ef4444', icon: MdCancel }
+};
+
+// ----------------------------------------------------------------------------
+// StatusBadge — filled pill, white text on solid color, high-contrast.
+// ----------------------------------------------------------------------------
+export const StatusBadge = ({ status, minWidth = 86 }) => {
+  if (!status) return null;
+  const meta = STATUS_META[String(status).toLowerCase()] || {
+    label: status,
+    color: DT.textMuted,
+    icon: MdHistoryToggleOff
+  };
+  const Icon = meta.icon;
+  return (
+    <Box
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 0.5,
+        px: 1.125,
+        py: 0.375,
+        borderRadius: 999,
+        bgcolor: meta.color,
+        color: '#fff',
+        fontSize: 11,
+        fontWeight: 700,
+        letterSpacing: 0.2,
+        whiteSpace: 'nowrap',
+        minWidth,
+        justifyContent: 'center',
+        boxShadow: `0 1px 2px ${ring(meta.color)}`
+      }}
+    >
+      <Icon size={12} /> {meta.label}
+    </Box>
+  );
+};
+
+// ----------------------------------------------------------------------------
+// TimelineCell — time large/bold/high-contrast, date small/muted/secondary.
+// No decorative dot.
+// ----------------------------------------------------------------------------
+export const TimelineCell = ({ value, utc: useUtc = false }) => {
+  if (!value) {
+    return (
+      <Typography sx={{ fontSize: 12, color: DT.textMuted, fontWeight: 700 }}>—</Typography>
+    );
+  }
+  const d = useUtc ? dayjs(value).utc() : dayjs(value);
+  return (
+    <Stack spacing={0} sx={{ lineHeight: 1.1 }}>
+      <Typography
+        sx={{
+          fontSize: 12.5,
+          fontWeight: 800,
+          color: DT.textPrimary,
+          letterSpacing: 0.1,
+          lineHeight: 1.15
+        }}
+        noWrap
+      >
+        {d.format('hh:mm A')}
+      </Typography>
+      <Typography
+        sx={{
+          fontSize: 10.5,
+          fontWeight: 600,
+          color: DT.textMuted,
+          lineHeight: 1.2
+        }}
+        noWrap
+      >
+        {d.format('DD MMM YYYY')}
+      </Typography>
+    </Stack>
+  );
+};
+
+// ----------------------------------------------------------------------------
+// MetricPill — small money / number pill used in table cells.
+// ----------------------------------------------------------------------------
+export const MetricPill = ({ value, color, icon, isMoney = false }) => {
+  const n = Number(value);
+  const display = isMoney ? formatNumberToRupees(n) : Number.isFinite(n) ? n : value || 0;
+  const isZero = !Number.isFinite(n) || n === 0;
+  if (isZero) {
+    return (
+      <Typography sx={{ fontSize: 11.5, color: DT.textMuted, fontWeight: 700 }}>
+        {display}
+      </Typography>
+    );
+  }
+  return (
+    <Box
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 0.5,
+        px: 0.875,
+        py: 0.25,
+        borderRadius: 999,
+        bgcolor: tint(color),
+        border: `1px solid ${edge(color)}`,
+        color,
+        fontSize: 12,
+        fontWeight: 800,
+        whiteSpace: 'nowrap'
+      }}
+    >
+      {icon}
+      {display}
+    </Box>
+  );
+};
+
+// ----------------------------------------------------------------------------
+// SoftPaper — autocomplete dropdown surface.
+// ----------------------------------------------------------------------------
+export const SoftPaper = (props) => (
+  <Paper
+    {...props}
+    sx={{
+      mt: 0.75,
+      borderRadius: 2,
+      boxShadow: DT.shadowPop,
+      border: '1px solid',
+      borderColor: 'divider',
+      overflow: 'hidden'
+    }}
+  />
+);
+
+// ----------------------------------------------------------------------------
+// AccentAvatar — colored circular icon used inside filter chips & headers.
+// ----------------------------------------------------------------------------
+export const AccentAvatar = ({ color, selected, size = 24, children }) => (
+  <Avatar
+    sx={{
+      width: size,
+      height: size,
+      bgcolor: selected ? color : soft(color),
+      color: selected ? '#fff' : color,
+      transition: 'background-color 0.15s, color 0.15s'
+    }}
+  >
+    {children}
+  </Avatar>
+);
+
+// ----------------------------------------------------------------------------
+// pillFieldSx — rounded pill style for Autocomplete/TextField inputs.
+// ----------------------------------------------------------------------------
+export const pillFieldSx = (color) => ({
+  '& .MuiOutlinedInput-root': {
+    borderRadius: DT.radiusPill + 'px',
+    bgcolor: tint(color),
+    fontWeight: 600,
+    '& fieldset': { borderColor: edge(color), borderWidth: 1.5 },
+    '&:hover fieldset': { borderColor: color },
+    '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(color)}` },
+    '&.Mui-focused fieldset': { borderColor: color, borderWidth: 2 }
+  }
+});
+
+// ----------------------------------------------------------------------------
+// Unified action-button styles — both render at 32px height with same typography.
+// SecondaryButtonSx → outlined (white bg, neutral border)
+// PrimaryButtonSx   → filled brand (purple bg, white text)
+// ----------------------------------------------------------------------------
+export const SecondaryButtonSx = (active = false) => ({
+  height: 32,
+  px: 1.25,
+  borderRadius: 1.5,
+  textTransform: 'none',
+  fontSize: 12.5,
+  fontWeight: 700,
+  letterSpacing: 0.1,
+  bgcolor: '#fff',
+  borderColor: active ? edge(BRAND) : DT.borderSubtle,
+  color: active ? BRAND : DT.textPrimary,
+  '&:hover': {
+    bgcolor: '#fff',
+    borderColor: BRAND,
+    color: BRAND,
+    boxShadow: `0 0 0 3px ${ring(BRAND)}`
+  },
+  '&:focus-visible': { boxShadow: `0 0 0 3px ${ring(BRAND)}` }
+});
+
+export const PrimaryButtonSx = {
+  height: 32,
+  minHeight: 32,
+  px: 1.5,
+  borderRadius: 1.5,
+  bgcolor: BRAND,
+  color: '#fff',
+  textTransform: 'none',
+  fontSize: 12.5,
+  fontWeight: 700,
+  letterSpacing: 0.1,
+  boxShadow: `0 2px 6px ${ring(BRAND)}`,
+  '&:hover': { bgcolor: BRAND_LIGHT, boxShadow: `0 4px 12px ${ring(BRAND)}` },
+  '&:focus-visible': { boxShadow: `0 0 0 3px ${ring(BRAND)}` },
+  '& .MuiButton-startIcon': { mr: 0.75, '& svg': { fontSize: 16 } }
+};
+
+// ----------------------------------------------------------------------------
+// PageHeaderShellSx — the gradient header strip used by every operator page.
+// Spread onto the outer <Paper> element.
+// ----------------------------------------------------------------------------
+export const PageHeaderShellSx = {
+  mb: { xs: 1, md: 1.25 },
+  px: { xs: 1.5, sm: 2 },
+  py: { xs: 1, sm: 1.25 },
+  borderRadius: 2,
+  border: '1px solid',
+  borderColor: DT.borderSubtle,
+  background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
+  boxShadow: DT.shadowMd
+};
+
+// ----------------------------------------------------------------------------
+// CompactKpiCardSx — visual envelope for a compact KPI card.
+// Caller supplies the colored left bar via the `accent` arg.
+// ----------------------------------------------------------------------------
+export const CompactKpiCardSx = (accentColor) => ({
+  position: 'relative',
+  overflow: 'hidden',
+  px: { xs: 1.25, sm: 1.5 },
+  py: { xs: 0.875, sm: 1.125 },
+  borderRadius: 2,
+  border: '1px solid',
+  borderColor: DT.borderSubtle,
+  background: '#fff',
+  transition: 'transform 0.15s, box-shadow 0.15s, border-color 0.15s',
+  '&:hover': {
+    transform: 'translateY(-1px)',
+    boxShadow: DT.shadowMd,
+    borderColor: edge(accentColor)
+  }
+});
+
+// MdAccessTime re-exported so callers can use the inline time icon
+// without an extra react-icons import.
+export { MdAccessTime };

src/pages/nearle/invoice/invoice.js

@@ -173,54 +173,57 @@ const Invoice = () => {
     <>
       {isloader && <Loader />}
 
-      {/* ============================================= || Header || ============================================= */}
+      {/* ============================================= || Header (compact) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mb: { xs: 1.5, md: 2 },
+          mb: { xs: 1, md: 1.25 },
-          p: { xs: 1.5, sm: 2, md: 2.5 },
+          px: { xs: 1.5, sm: 2 },
-          borderRadius: DT.radiusCard / 8,
+          py: { xs: 1, sm: 1.25 },
+          borderRadius: 2,
           border: '1px solid',
           borderColor: DT.borderSubtle,
           background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
           boxShadow: DT.shadowMd
         }}
       >
-        <Stack direction="row" alignItems="center" spacing={{ xs: 1.25, sm: 1.75 }}>
+        <Stack direction="row" alignItems="center" spacing={1.25}>
           <Avatar
+            variant="rounded"
             sx={{
-              width: { xs: 40, sm: 48 },
+              width: 36,
-              height: { xs: 40, sm: 48 },
+              height: 36,
               bgcolor: BRAND,
               color: '#fff',
-              boxShadow: `0 6px 18px ${ring(BRAND)}`
+              borderRadius: 1.5,
+              boxShadow: `0 4px 12px ${ring(BRAND)}`
             }}
           >
-            <MdReceiptLong size={22} />
+            <MdReceiptLong size={19} />
           </Avatar>
-          <Stack>
+          <Stack spacing={0.125}>
             <Typography
               variant="h3"
               sx={{
                 fontWeight: 800,
                 color: DT.textPrimary,
                 lineHeight: 1.1,
-                fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
+                fontSize: { xs: '1.1rem', sm: '1.25rem', md: '1.375rem' }
               }}
             >
               Invoices
             </Typography>
-            <Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
+            <Stack direction="row" alignItems="center" spacing={0.75}>
               <Box
                 sx={{
-                  width: 8,
+                  width: 7,
-                  height: 8,
+                  height: 7,
                   borderRadius: '50%',
                   bgcolor: '#10b981',
-                  boxShadow: '0 0 0 4px rgba(16,185,129,0.18)'
+                  boxShadow: '0 0 0 3px rgba(16,185,129,0.18)'
                 }}
               />
-              <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
+              <Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 600 }}>
                 Live · {INVOICE_STATUS_TABS[value].label}
               </Typography>
             </Stack>
@@ -228,8 +231,8 @@ const Invoice = () => {
         </Stack>
       </Paper>
 
-      {/* ============================================= || KPI Cards || ============================================= */}
+      {/* ============================================= || KPI Cards (compact, clickable) || ============================================= */}
-      <Grid container spacing={{ xs: 1.25, sm: 1.5, md: 2 }}>
+      <Grid container spacing={{ xs: 1, sm: 1.25, md: 1.5 }}>
         {kpiCards.map((item) => {
           const Icon = item.icon;
           const active = value === item.idx;
@@ -242,15 +245,16 @@ const Invoice = () => {
                   cursor: 'pointer',
                   position: 'relative',
                   overflow: 'hidden',
-                  p: { xs: 1.25, sm: 1.75, md: 2.25 },
+                  px: { xs: 1.25, sm: 1.5 },
-                  borderRadius: DT.radiusCard / 8,
+                  py: { xs: 0.875, sm: 1.125 },
+                  borderRadius: 2,
                   border: '1px solid',
                   borderColor: active ? edge(item.color) : DT.borderSubtle,
                   background: '#fff',
-                  boxShadow: active ? `0 6px 24px ${ring(item.color)}` : 'none',
+                  boxShadow: active ? `0 4px 14px ${ring(item.color)}` : 'none',
-                  transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
+                  transition: 'transform 0.15s, box-shadow 0.15s, border-color 0.15s',
                   '&:hover': {
-                    transform: 'translateY(-3px)',
+                    transform: 'translateY(-1px)',
                     boxShadow: DT.shadowMd,
                     borderColor: edge(item.color)
                   }
@@ -261,21 +265,24 @@ const Invoice = () => {
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    right: 0,
+                    bottom: 0,
-                    height: 3,
+                    width: 3,
-                    background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
+                    background: item.color
                   }}
                 />
-                <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
+                <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1} sx={{ pl: 0.5 }}>
-                  <Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
+                  <Stack spacing={0.125} sx={{ minWidth: 0, flex: 1 }}>
                     <Typography
-                      variant="caption"
                       sx={{
                         color: DT.textSecondary,
                         fontWeight: 700,
                         letterSpacing: 0.4,
                         textTransform: 'uppercase',
-                        fontSize: { xs: 10, sm: 11 }
+                        fontSize: 10.5,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        lineHeight: 1.2
                       }}
                     >
                       {item.label} Invoices
@@ -284,9 +291,10 @@ const Invoice = () => {
                       sx={{
                         fontWeight: 800,
                         color: DT.textPrimary,
-                        lineHeight: 1.1,
+                        lineHeight: 1.15,
-                        fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
+                        fontSize: { xs: '0.95rem', sm: '1.1rem', md: '1.2rem' }
                       }}
+                      noWrap
                     >
                       {insightdata && insightdata[item.countKey] != null ? (
                         insightdata[item.countKey]
@@ -296,16 +304,17 @@ const Invoice = () => {
                     </Typography>
                   </Stack>
                   <Avatar
+                    variant="rounded"
                     sx={{
-                      width: { xs: 36, sm: 42, md: 48 },
+                      width: 30,
-                      height: { xs: 36, sm: 42, md: 48 },
+                      height: 30,
                       bgcolor: soft(item.color),
                       color: item.color,
-                      boxShadow: `inset 0 0 0 1px ${edge(item.color)}`,
+                      borderRadius: 1.25,
                       flexShrink: 0
                     }}
                   >
-                    <Icon size={20} />
+                    <Icon size={15} />
                   </Avatar>
                 </Stack>
               </Paper>
@@ -314,14 +323,14 @@ const Invoice = () => {
         })}
       </Grid>
 
-      {/* ============================================= || Status Tabs + Search || ============================================= */}
+      {/* ============================================= || Status Tabs + Search (compact) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mt: { xs: 1.5, md: 2 },
+          mt: { xs: 1, md: 1.25 },
-          p: { xs: 1, md: 1.5 },
+          p: { xs: 0.875, md: 1.125 },
-          borderTopLeftRadius: DT.radiusCard / 8,
+          borderTopLeftRadius: 2,
-          borderTopRightRadius: DT.radiusCard / 8,
+          borderTopRightRadius: 2,
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0,
           border: '1px solid',
@@ -452,14 +461,14 @@ const Invoice = () => {
         </Stack>
       </Paper>
 
-      {/* ============================================= || Table || ============================================= */}
+      {/* ============================================= || Table (dense, sticky header) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
           borderTopLeftRadius: 0,
           borderTopRightRadius: 0,
-          borderBottomLeftRadius: DT.radiusCard / 8,
+          borderBottomLeftRadius: 2,
-          borderBottomRightRadius: DT.radiusCard / 8,
+          borderBottomRightRadius: 2,
           border: '1px solid',
           borderColor: DT.borderSubtle,
           overflow: 'hidden',
@@ -468,7 +477,8 @@ const Invoice = () => {
       >
         <TableContainer
           sx={{
-            maxHeight: 460,
+            minHeight: 320,
+            maxHeight: { xs: 'calc(100vh - 380px)', md: 'calc(100vh - 350px)' },
             overflow: 'auto',
             '&::-webkit-scrollbar': { width: 10, height: 10 },
             '&::-webkit-scrollbar-thumb': {
@@ -479,21 +489,21 @@ const Invoice = () => {
             '&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
           }}
         >
-          <Table stickyHeader sx={{ minWidth: 880 }}>
+          <Table stickyHeader size="small" sx={{ minWidth: 880 }}>
             <TableHead>
               <TableRow
                 sx={{
                   '& th': {
                     backgroundColor: DT.surfaceAlt,
                     color: DT.textSecondary,
-                    fontSize: { xs: 10, md: 11 },
+                    fontSize: 10.5,
                     fontWeight: 800,
-                    letterSpacing: 0.6,
+                    letterSpacing: 0.5,
                     textTransform: 'uppercase',
                     whiteSpace: 'nowrap',
                     borderBottom: `1px solid ${DT.borderSubtle}`,
-                    py: { xs: 1, md: 1.25 },
+                    py: 0.75,
-                    px: { xs: 1, md: 1.5 }
+                    px: 1
                   }
                 }}
               >
@@ -510,11 +520,11 @@ const Invoice = () => {
 
             <TableBody>
               {isloader && filteredList.length === 0 && (
-                [0, 1, 2, 3, 4].map((_, idx) => (
+                Array.from({ length: 10 }).map((_, idx) => (
                   <TableRow key={`sk-${idx}`}>
                     {Array.from({ length: 8 }).map((__, ci) => (
-                      <TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}` }}>
+                      <TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}`, py: 0.625, px: 1 }}>
-                        <Skeleton animation="wave" />
+                        <Skeleton animation="wave" height={20} />
                       </TableCell>
                     ))}
                   </TableRow>
@@ -523,17 +533,50 @@ const Invoice = () => {
 
               {!isloader && filteredList.length === 0 && (
                 <TableRow>
-                  <TableCell colSpan={8} sx={{ py: 6, borderBottom: 'none' }}>
+                  <TableCell colSpan={8} sx={{ py: 7, borderBottom: 'none' }}>
-                    <Stack alignItems="center" spacing={1.5}>
+                    <Stack alignItems="center" spacing={1.25}>
-                      <Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
+                      <Avatar
-                        <MdReceiptLong size={28} />
+                        variant="rounded"
+                        sx={{
+                          width: 56,
+                          height: 56,
+                          bgcolor: soft('#94a3b8'),
+                          color: DT.textMuted,
+                          borderRadius: 2
+                        }}
+                      >
+                        <MdReceiptLong size={26} />
                       </Avatar>
-                      <Typography variant="subtitle1" sx={{ fontWeight: 700, color: DT.textPrimary }}>
+                      <Typography sx={{ fontWeight: 700, color: DT.textPrimary, fontSize: 14 }}>
                         No {INVOICE_STATUS_TABS[value].label.toLowerCase()} invoices
                       </Typography>
-                      <Typography variant="caption" sx={{ color: DT.textSecondary }}>
+                      <Typography sx={{ color: DT.textSecondary, fontSize: 12 }}>
-                        {search ? 'Try a different invoice number.' : 'Switch tabs above to load invoices.'}
+                        {search ? 'Try a different invoice number or clear the search.' : 'Switch tabs above to load invoices.'}
                       </Typography>
+                      {search && (
+                        <Box
+                          component="button"
+                          onClick={() => setSearch('')}
+                          sx={{
+                            mt: 0.5,
+                            border: 'none',
+                            cursor: 'pointer',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: 0.5,
+                            height: 28,
+                            px: 1,
+                            fontSize: 12,
+                            fontWeight: 700,
+                            color: BRAND,
+                            borderRadius: 1.25,
+                            background: 'transparent',
+                            '&:hover': { bgcolor: tint(BRAND) }
+                          }}
+                        >
+                          <MdClear size={14} /> Clear search
+                        </Box>
+                      )}
                     </Stack>
                   </TableCell>
                 </TableRow>
@@ -546,13 +589,17 @@ const Invoice = () => {
                     key={`${item.invoiceno}-${index}`}
                     sx={{
                       cursor: 'pointer',
-                      transition: 'background-color 0.15s',
+                      transition: 'background-color 0.12s, box-shadow 0.12s',
                       '& td': {
                         borderBottom: `1px solid ${DT.divider}`,
-                        py: { xs: 1, md: 1.25 },
+                        py: 0.5,
-                        px: { xs: 1, md: 1.5 }
+                        px: 1,
+                        verticalAlign: 'middle'
                       },
-                      '&:hover': { backgroundColor: DT.surfaceAlt }
+                      '&:hover': {
+                        backgroundColor: tint(BRAND),
+                        boxShadow: `inset 3px 0 0 ${BRAND}`
+                      }
                     }}
                     onClick={() => {
                       setIsLoader(true);
@@ -563,16 +610,16 @@ const Invoice = () => {
                     }}
                   >
                     <TableCell>
-                      <Typography sx={{ fontWeight: 700, color: DT.textSecondary }}>
+                      <Typography sx={{ fontWeight: 700, fontSize: 12, color: DT.textMuted }}>
                         {page * rowsPerPage + index + 1}
                       </Typography>
                     </TableCell>
 
                     <TableCell>
-                      <Typography variant="subtitle2" sx={{ fontWeight: 700, color: DT.textPrimary }} noWrap>
+                      <Typography sx={{ fontSize: 12.5, fontWeight: 700, color: DT.textPrimary, lineHeight: 1.25 }} noWrap>
                         {item.tenantname}
                       </Typography>
-                      <Typography variant="caption" sx={{ color: DT.textSecondary }} noWrap>
+                      <Typography sx={{ fontSize: 11, fontWeight: 600, color: DT.textSecondary, lineHeight: 1.3 }} noWrap>
                         {item.contactperson}
                       </Typography>
                     </TableCell>
@@ -599,31 +646,33 @@ const Invoice = () => {
                     </TableCell>
 
                     <TableCell>
-                      <Stack direction="row" alignItems="center" spacing={0.5}>
+                      {item.transactiondate ? (
-                        <MdCalendarMonth size={12} style={{ color: DT.textMuted, flexShrink: 0 }} />
+                        <Stack spacing={0} sx={{ lineHeight: 1.1 }}>
-                        <Stack>
+                          <Typography sx={{ fontSize: 12.5, fontWeight: 800, color: DT.textPrimary, lineHeight: 1.15 }} noWrap>
-                          <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textPrimary }} noWrap>
+                            {dayjs(item.transactiondate).format('hh:mm A')}
-                            {item.transactiondate ? dayjs(item.transactiondate).format('DD MMM YYYY') : '—'}
                           </Typography>
-                          <Typography variant="caption" sx={{ color: DT.textMuted, fontSize: 10 }} noWrap>
+                          <Typography sx={{ fontSize: 10.5, fontWeight: 600, color: DT.textMuted, lineHeight: 1.2 }} noWrap>
-                            {item.transactiondate ? dayjs(item.transactiondate).format('hh:mm A') : ''}
+                            {dayjs(item.transactiondate).format('DD MMM YYYY')}
                           </Typography>
                         </Stack>
-                      </Stack>
+                      ) : (
+                        <Typography sx={{ fontSize: 12, color: DT.textMuted, fontWeight: 700 }}>—</Typography>
+                      )}
                     </TableCell>
 
                     <TableCell>
-                      <Stack direction="row" alignItems="center" spacing={0.5}>
+                      {item.duedate ? (
-                        <MdAccessTime size={12} style={{ color: DT.textMuted, flexShrink: 0 }} />
+                        <Stack spacing={0} sx={{ lineHeight: 1.1 }}>
-                        <Stack>
+                          <Typography sx={{ fontSize: 12.5, fontWeight: 800, color: DT.textPrimary, lineHeight: 1.15 }} noWrap>
-                          <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textPrimary }} noWrap>
+                            {dayjs(item.duedate).format('hh:mm A')}
-                            {item.duedate ? dayjs(item.duedate).format('DD MMM YYYY') : '—'}
                           </Typography>
-                          <Typography variant="caption" sx={{ color: DT.textMuted, fontSize: 10 }} noWrap>
+                          <Typography sx={{ fontSize: 10.5, fontWeight: 600, color: DT.textMuted, lineHeight: 1.2 }} noWrap>
-                            {item.duedate ? dayjs(item.duedate).format('hh:mm A') : ''}
+                            {dayjs(item.duedate).format('DD MMM YYYY')}
                           </Typography>
                         </Stack>
-                      </Stack>
+                      ) : (
+                        <Typography sx={{ fontSize: 12, color: DT.textMuted, fontWeight: 700 }}>—</Typography>
+                      )}
                     </TableCell>
 
                     <TableCell align="center">

src/pages/nearle/orders/orders.js

@@ -125,17 +125,21 @@ const pillFieldSx = (color) => ({
   }
 });
 
-// Semantic per-row status palette.
+// Semantic per-row status palette — colors per brand standard:
+// green=delivered, amber=pending, blue=created/processing, red=cancelled,
+// dark-red=failed, purple=on-hold.
 const ROW_STATUS_META = {
-  created:    { label: 'Created',    color: '#0ea5e9', icon: MdLocalShipping },
+  created:    { label: 'Created',    color: '#3b82f6', icon: MdLocalShipping },
   pending:    { label: 'Pending',    color: '#f59e0b', icon: MdHourglassEmpty },
-  processing: { label: 'Processing', color: BRAND,     icon: MdAccessTime },
+  processing: { label: 'Processing', color: '#3b82f6', icon: MdAccessTime },
   modified:   { label: 'Confirmed',  color: '#10b981', icon: MdCheckCircle },
   confirmed:  { label: 'Confirmed',  color: '#10b981', icon: MdCheckCircle },
   ready:      { label: 'Accepted',   color: '#6366f1', icon: MdCheckCircle },
   active:     { label: 'Picked',     color: '#8b5cf6', icon: MdLocalShipping },
+  onhold:     { label: 'On Hold',    color: '#8b5cf6', icon: MdHistoryToggleOff },
   closed:     { label: 'Closed',     color: '#06b6d4', icon: MdCheckCircle },
   delivered:  { label: 'Delivered',  color: '#10b981', icon: MdCheckCircle },
+  failed:     { label: 'Failed',     color: '#991b1b', icon: MdCancel },
   cancelled:  { label: 'Cancelled',  color: '#ef4444', icon: MdCancel }
 };
 
@@ -147,6 +151,7 @@ const ORDERS_STATUS_TABS = [
   { idx: 3, status: 'cancelled', label: 'Cancelled', color: '#ef4444', icon: MdCancel,         countKey: 'cancelled' }
 ];
 
+// Filled status badge — high-contrast pill (white text on solid color).
 const StatusBadge = ({ status }) => {
   const meta = ROW_STATUS_META[String(status || '').toLowerCase()] || {
     label: status || '—',
@@ -160,15 +165,18 @@ const StatusBadge = ({ status }) => {
         display: 'inline-flex',
         alignItems: 'center',
         gap: 0.5,
-        px: 1,
+        px: 1.125,
         py: 0.375,
         borderRadius: 999,
-        bgcolor: tint(meta.color),
+        bgcolor: meta.color,
-        border: `1px solid ${edge(meta.color)}`,
+        color: '#fff',
-        color: meta.color,
         fontSize: 11,
-        fontWeight: 800,
+        fontWeight: 700,
-        whiteSpace: 'nowrap'
+        letterSpacing: 0.2,
+        whiteSpace: 'nowrap',
+        minWidth: 86,
+        justifyContent: 'center',
+        boxShadow: `0 1px 2px ${ring(meta.color)}`
       }}
     >
       <Icon size={12} /> {meta.label}
@@ -445,13 +453,14 @@ const Orders = () => {
         </>
       )}
 
-      {/* ============================================= || Header || ============================================= */}
+      {/* ============================================= || Header (compact) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mb: { xs: 1.5, md: 2 },
+          mb: { xs: 1, md: 1.25 },
-          p: { xs: 1.5, sm: 2, md: 2.5 },
+          px: { xs: 1.5, sm: 2 },
-          borderRadius: DT.radiusCard / 8,
+          py: { xs: 1, sm: 1.25 },
+          borderRadius: 2,
           border: '1px solid',
           borderColor: DT.borderSubtle,
           background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
@@ -462,43 +471,45 @@ const Orders = () => {
           direction={{ xs: 'column', sm: 'row' }}
           alignItems={{ xs: 'flex-start', sm: 'center' }}
           justifyContent="space-between"
-          spacing={{ xs: 1.5, sm: 2 }}
+          spacing={{ xs: 1, sm: 1.5 }}
         >
-          <Stack direction="row" alignItems="center" spacing={{ xs: 1.25, sm: 1.75 }}>
+          <Stack direction="row" alignItems="center" spacing={1.25}>
             <Avatar
+              variant="rounded"
               sx={{
-                width: { xs: 40, sm: 48 },
+                width: 36,
-                height: { xs: 40, sm: 48 },
+                height: 36,
                 bgcolor: BRAND,
                 color: '#fff',
-                boxShadow: `0 6px 18px ${ring(BRAND)}`
+                borderRadius: 1.5,
+                boxShadow: `0 4px 12px ${ring(BRAND)}`
               }}
             >
-              <MdLocalShipping size={22} />
+              <MdLocalShipping size={19} />
             </Avatar>
-            <Stack>
+            <Stack spacing={0.125}>
               <Typography
                 variant="h3"
                 sx={{
                   fontWeight: 800,
                   color: DT.textPrimary,
                   lineHeight: 1.1,
-                  fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
+                  fontSize: { xs: '1.1rem', sm: '1.25rem', md: '1.375rem' }
                 }}
               >
                 Orders
               </Typography>
-              <Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
+              <Stack direction="row" alignItems="center" spacing={0.75}>
                 <Box
                   sx={{
-                    width: 8,
+                    width: 7,
-                    height: 8,
+                    height: 7,
                     borderRadius: '50%',
                     bgcolor: '#10b981',
-                    boxShadow: '0 0 0 4px rgba(16,185,129,0.18)'
+                    boxShadow: '0 0 0 3px rgba(16,185,129,0.18)'
                   }}
                 />
-                <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
+                <Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 600 }}>
                   Live · {locoName} · {datestatus}
                 </Typography>
               </Stack>
@@ -563,8 +574,8 @@ const Orders = () => {
         </Stack>
       </Paper>
 
-      {/* ============================================= || KPI Cards || ============================================= */}
+      {/* ============================================= || KPI Cards (compact) || ============================================= */}
-      <Grid container spacing={{ xs: 1.25, sm: 1.5, md: 2 }}>
+      <Grid container spacing={{ xs: 1, sm: 1.25, md: 1.5 }}>
         {kpiCards.map((item) => {
           const Icon = item.icon;
           return (
@@ -574,14 +585,15 @@ const Orders = () => {
                 sx={{
                   position: 'relative',
                   overflow: 'hidden',
-                  p: { xs: 1.25, sm: 1.75, md: 2.25 },
+                  px: { xs: 1.25, sm: 1.5 },
-                  borderRadius: DT.radiusCard / 8,
+                  py: { xs: 0.875, sm: 1.125 },
+                  borderRadius: 2,
                   border: '1px solid',
                   borderColor: DT.borderSubtle,
                   background: '#fff',
-                  transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
+                  transition: 'transform 0.15s, box-shadow 0.15s, border-color 0.15s',
                   '&:hover': {
-                    transform: 'translateY(-3px)',
+                    transform: 'translateY(-1px)',
                     boxShadow: DT.shadowMd,
                     borderColor: edge(item.color)
                   }
@@ -592,55 +604,59 @@ const Orders = () => {
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    right: 0,
+                    bottom: 0,
-                    height: 3,
+                    width: 3,
-                    background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
+                    background: item.color
                   }}
                 />
-                <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
+                <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1} sx={{ pl: 0.5 }}>
-                  <Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
+                  <Stack spacing={0.125} sx={{ minWidth: 0, flex: 1 }}>
                     <Typography
-                      variant="caption"
                       sx={{
                         color: DT.textSecondary,
                         fontWeight: 700,
                         letterSpacing: 0.4,
                         textTransform: 'uppercase',
-                        fontSize: { xs: 10, sm: 11 },
+                        fontSize: 10.5,
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
-                        textOverflow: 'ellipsis'
+                        textOverflow: 'ellipsis',
+                        lineHeight: 1.2
                       }}
                     >
                       {item.label}
                     </Typography>
+                    <Stack direction="row" alignItems="baseline" spacing={0.75}>
                       <Typography
                         sx={{
                           fontWeight: 800,
                           color: DT.textPrimary,
-                        lineHeight: 1.1,
+                          lineHeight: 1.15,
-                        fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
+                          fontSize: { xs: '0.95rem', sm: '1.1rem', md: '1.2rem' }
                         }}
+                        noWrap
                       >
                         {item.value === '' ? <Skeleton sx={{ width: 40 }} animation="wave" /> : item.value}
                       </Typography>
-                    {item.percentage != null && (
+                      {item.percentage != null && item.value !== '' && (
-                      <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 700 }}>
+                        <Typography sx={{ fontSize: 10.5, color: DT.textMuted, fontWeight: 700 }}>
                           {item.percentage}%
                         </Typography>
                       )}
                     </Stack>
+                  </Stack>
                   <Avatar
+                    variant="rounded"
                     sx={{
-                      width: { xs: 36, sm: 42, md: 48 },
+                      width: 30,
-                      height: { xs: 36, sm: 42, md: 48 },
+                      height: 30,
                       bgcolor: soft(item.color),
                       color: item.color,
-                      boxShadow: `inset 0 0 0 1px ${edge(item.color)}`,
+                      borderRadius: 1.25,
                       flexShrink: 0
                     }}
                   >
-                    <Icon size={20} />
+                    <Icon size={15} />
                   </Avatar>
                 </Stack>
               </Paper>
@@ -649,13 +665,13 @@ const Orders = () => {
         })}
       </Grid>
 
-      {/* ============================================= || Filter Bar || ============================================= */}
+      {/* ============================================= || Filter Bar (compact) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mt: { xs: 1.5, md: 2 },
+          mt: { xs: 1, md: 1.25 },
-          p: { xs: 1.25, md: 1.75 },
+          p: { xs: 1, md: 1.125 },
-          borderRadius: DT.radiusCard / 8,
+          borderRadius: 2,
           border: '1px solid',
           borderColor: DT.borderSubtle,
           background: '#fff',
@@ -751,14 +767,14 @@ const Orders = () => {
         </Stack>
       </Paper>
 
-      {/* ============================================= || Status Tabs + Search || ============================================= */}
+      {/* ============================================= || Status Tabs + Search (compact) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mt: { xs: 1.5, md: 2 },
+          mt: { xs: 1, md: 1.25 },
-          p: { xs: 1, md: 1.5 },
+          p: { xs: 0.875, md: 1.125 },
-          borderTopLeftRadius: DT.radiusCard / 8,
+          borderTopLeftRadius: 2,
-          borderTopRightRadius: DT.radiusCard / 8,
+          borderTopRightRadius: 2,
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0,
           border: '1px solid',
@@ -903,14 +919,14 @@ const Orders = () => {
         </Stack>
       </Paper>
 
-      {/* ============================================= || Table || ============================================= */}
+      {/* ============================================= || Table (dense, sticky header) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
           borderTopLeftRadius: 0,
           borderTopRightRadius: 0,
-          borderBottomLeftRadius: DT.radiusCard / 8,
+          borderBottomLeftRadius: 2,
-          borderBottomRightRadius: DT.radiusCard / 8,
+          borderBottomRightRadius: 2,
           border: '1px solid',
           borderColor: DT.borderSubtle,
           overflow: 'hidden',
@@ -921,7 +937,8 @@ const Orders = () => {
           onScroll={handleScroll}
           ref={containerRef}
           sx={{
-            maxHeight: { xs: 'calc(100vh - 220px)', md: 'calc(100vh - 190px)' },
+            minHeight: 320,
+            maxHeight: { xs: 'calc(100vh - 320px)', md: 'calc(100vh - 290px)' },
             overflow: 'auto',
             '&::-webkit-scrollbar': { width: 10, height: 10 },
             '&::-webkit-scrollbar-thumb': {
@@ -932,21 +949,21 @@ const Orders = () => {
             '&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
           }}
         >
-          <Table stickyHeader sx={{ minWidth: { xs: 960, md: 1180 } }}>
+          <Table stickyHeader size="small" sx={{ minWidth: { xs: 960, md: 1100 } }}>
             <TableHead>
               <TableRow
                 sx={{
                   '& th': {
                     backgroundColor: DT.surfaceAlt,
                     color: DT.textSecondary,
-                    fontSize: { xs: 10, md: 11 },
+                    fontSize: 10.5,
                     fontWeight: 800,
-                    letterSpacing: 0.6,
+                    letterSpacing: 0.5,
                     textTransform: 'uppercase',
                     whiteSpace: 'nowrap',
                     borderBottom: `1px solid ${DT.borderSubtle}`,
-                    py: { xs: 1, md: 1.25 },
+                    py: 0.75,
-                    px: { xs: 1, md: 1.5 }
+                    px: 1
                   }
                 }}
               >
@@ -967,11 +984,11 @@ const Orders = () => {
             <TableBody>
               {(isLoadingGetOrders || loading) &&
                 rows.length === 0 &&
-                [0, 1, 2, 3, 4, 5].map((_, idx) => (
+                Array.from({ length: 10 }).map((_, idx) => (
                   <TableRow key={`sk-${idx}`}>
                     {Array.from({ length: currentStatus === 'created' ? 11 : 10 }).map((__, ci) => (
-                      <TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}` }}>
+                      <TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}`, py: 0.625, px: 1 }}>
-                        <Skeleton animation="wave" />
+                        <Skeleton animation="wave" height={20} />
                       </TableCell>
                     ))}
                   </TableRow>
@@ -979,17 +996,45 @@ const Orders = () => {
 
               {!isLoadingGetOrders && rows.length === 0 && (
                 <TableRow>
-                  <TableCell colSpan={currentStatus === 'created' ? 11 : 10} sx={{ py: 6, borderBottom: 'none' }}>
+                  <TableCell colSpan={currentStatus === 'created' ? 11 : 10} sx={{ py: 7, borderBottom: 'none' }}>
-                    <Stack alignItems="center" spacing={1.5}>
+                    <Stack alignItems="center" spacing={1.25}>
-                      <Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
+                      <Avatar
-                        <MdLocalShipping size={28} />
+                        variant="rounded"
+                        sx={{
+                          width: 56,
+                          height: 56,
+                          bgcolor: soft('#94a3b8'),
+                          color: DT.textMuted,
+                          borderRadius: 2
+                        }}
+                      >
+                        <MdLocalShipping size={26} />
                       </Avatar>
-                      <Typography variant="subtitle1" sx={{ fontWeight: 700, color: DT.textPrimary }}>
+                      <Typography sx={{ fontWeight: 700, color: DT.textPrimary, fontSize: 14 }}>
                         No {currentStatus} orders
                       </Typography>
-                      <Typography variant="caption" sx={{ color: DT.textSecondary }}>
+                      <Typography sx={{ color: DT.textSecondary, fontSize: 12 }}>
-                        {searchword ? 'Try a different keyword.' : 'Adjust the filters above to load orders.'}
+                        {searchword ? 'Try a different keyword or clear the search.' : 'Adjust the location, status, or date range above.'}
                       </Typography>
+                      {searchword && (
+                        <Button
+                          size="small"
+                          onClick={() => setSearchword('')}
+                          sx={{
+                            mt: 0.5,
+                            height: 28,
+                            textTransform: 'none',
+                            fontSize: 12,
+                            fontWeight: 700,
+                            color: BRAND,
+                            borderRadius: 1.25,
+                            '&:hover': { bgcolor: tint(BRAND) }
+                          }}
+                          startIcon={<MdClear size={14} />}
+                        >
+                          Clear search
+                        </Button>
+                      )}
                     </Stack>
                   </TableCell>
                 </TableRow>
@@ -1000,13 +1045,17 @@ const Orders = () => {
                   key={`${row.orderheaderid}-${index}`}
                   sx={{
                     cursor: 'pointer',
-                    transition: 'background-color 0.15s',
+                    transition: 'background-color 0.12s, box-shadow 0.12s',
                     '& td': {
                       borderBottom: `1px solid ${DT.divider}`,
-                      py: { xs: 1, md: 1.25 },
+                      py: 0.5,
-                      px: { xs: 1, md: 1.5 }
+                      px: 1,
+                      verticalAlign: 'top'
                     },
-                    '&:hover': { backgroundColor: DT.surfaceAlt }
+                    '&:hover': {
+                      backgroundColor: tint(BRAND),
+                      boxShadow: `inset 3px 0 0 ${BRAND}`
+                    }
                   }}
                 >
                   <TableCell>
@@ -1025,10 +1074,13 @@ const Orders = () => {
                         {row.orderid}
                       </Typography>
                     </Tooltip>
-                    <Stack direction="row" spacing={0.75} alignItems="center" sx={{ mt: 0.25 }}>
+                    <Stack direction="row" spacing={0.5} alignItems="center" sx={{ mt: 0.125 }}>
-                      <MdAccessTime size={11} style={{ color: DT.textMuted }} />
+                      <MdAccessTime size={10} style={{ color: DT.textMuted, flexShrink: 0 }} />
-                      <Typography sx={{ fontSize: 11, color: DT.textSecondary, fontWeight: 600 }} noWrap>
+                      <Typography sx={{ fontSize: 10.5, color: DT.textSecondary, fontWeight: 700 }} noWrap>
-                        {dayjs(row.pickupslot).format('DD/MM/YYYY')} · {dayjs(row.pickupslot).format('hh:mm A')}
+                        {dayjs(row.pickupslot).format('hh:mm A')}
+                      </Typography>
+                      <Typography sx={{ fontSize: 10.5, color: DT.textMuted, fontWeight: 600 }} noWrap>
+                        · {dayjs(row.pickupslot).format('DD MMM YY')}
                       </Typography>
                     </Stack>
                   </TableCell>
@@ -1143,19 +1195,29 @@ const Orders = () => {
               ))}
 
               {rows.length !== 0 && (
-                <TableRow>
+                <TableRow sx={{ '&:hover': { backgroundColor: 'transparent !important' } }}>
-                  <TableCell colSpan={15} rowSpan={3} sx={{ borderBottom: 'none' }}>
+                  <TableCell colSpan={currentStatus === 'created' ? 11 : 10} sx={{ borderBottom: 'none', py: 1, bgcolor: DT.surfaceAlt }}>
-                    <div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
+                    <Stack
-                      {isFetchingNextPage ? (
+                      ref={loadMoreRef}
-                        <CircularProgress size={20} sx={{ color: BRAND }} />
+                      direction="row"
-                      ) : hasNextPage ? (
+                      alignItems="center"
-                        <CircularProgress size={20} sx={{ color: BRAND }} />
+                      justifyContent="center"
+                      spacing={1}
+                      sx={{ minHeight: 32 }}
+                    >
+                      {isFetchingNextPage || hasNextPage ? (
+                        <>
+                          <CircularProgress size={14} sx={{ color: BRAND }} />
+                          <Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 700 }}>
+                            Loading more orders…
+                          </Typography>
+                        </>
                       ) : (
-                        <Typography variant="caption" sx={{ color: DT.textMuted, fontWeight: 700 }}>
+                        <Typography sx={{ fontSize: 11.5, color: DT.textMuted, fontWeight: 700, letterSpacing: 0.3 }}>
-                          No more orders
+                          {rows.length} order{rows.length === 1 ? '' : 's'} · End of list
                         </Typography>
                       )}
-                    </div>
+                    </Stack>
                   </TableCell>
                 </TableRow>
               )}

src/pages/nearle/reports/orderSummary.js

@@ -34,7 +34,6 @@ import {
   MdCheckCircle,
   MdCancel,
   MdMyLocation,
-  MdPlace,
   MdSearch,
   MdClear,
   MdCalendarMonth,
@@ -333,13 +332,14 @@ export default function OrdersReport() {
       {(isLoadingReports || tenantLocationsIsLoading) && <Loader />}
       {(isLoadingReports || tenantLocationsIsLoading) && <CircularLoader />}
 
-      {/* ============================================= || Header || ============================================= */}
+      {/* ============================================= || Header (compact) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mb: { xs: 1.5, md: 2 },
+          mb: { xs: 1, md: 1.25 },
-          p: { xs: 1.5, sm: 2, md: 2.5 },
+          px: { xs: 1.5, sm: 2 },
-          borderRadius: DT.radiusCard / 8,
+          py: { xs: 1, sm: 1.25 },
+          borderRadius: 2,
           border: '1px solid',
           borderColor: DT.borderSubtle,
           background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
@@ -350,61 +350,228 @@ export default function OrdersReport() {
           direction={{ xs: 'column', sm: 'row' }}
           alignItems={{ xs: 'flex-start', sm: 'center' }}
           justifyContent="space-between"
-          spacing={{ xs: 1.5, sm: 2 }}
+          spacing={{ xs: 1, sm: 1.5 }}
         >
-          <Stack direction="row" alignItems="center" spacing={{ xs: 1.25, sm: 1.75 }}>
+          <Stack direction="row" alignItems="center" spacing={1.25}>
             <Avatar
+              variant="rounded"
               sx={{
-                width: { xs: 40, sm: 48 },
+                width: 36,
-                height: { xs: 40, sm: 48 },
+                height: 36,
                 bgcolor: BRAND,
                 color: '#fff',
-                boxShadow: `0 6px 18px ${ring(BRAND)}`
+                borderRadius: 1.5,
+                boxShadow: `0 4px 12px ${ring(BRAND)}`
               }}
             >
-              <MdInsights size={22} />
+              <MdInsights size={19} />
             </Avatar>
-            <Stack>
+            <Stack spacing={0.125}>
               <Typography
                 variant="h3"
                 sx={{
                   fontWeight: 800,
                   color: DT.textPrimary,
                   lineHeight: 1.1,
-                  fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
+                  fontSize: { xs: '1.1rem', sm: '1.25rem', md: '1.375rem' }
                 }}
               >
                 Orders Summary
               </Typography>
-              <Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
+              <Stack direction="row" alignItems="center" spacing={0.75}>
                 <Box
                   sx={{
-                    width: 8,
+                    width: 7,
-                    height: 8,
+                    height: 7,
                     borderRadius: '50%',
                     bgcolor: '#10b981',
-                    boxShadow: '0 0 0 4px rgba(16,185,129,0.18)'
+                    boxShadow: '0 0 0 3px rgba(16,185,129,0.18)'
                   }}
                 />
-                <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
+                <Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 600 }}>
                   Live · {locoName} · {datestatus}
                 </Typography>
               </Stack>
             </Stack>
           </Stack>
 
-          <Tooltip title="Date Filter">
+          {/* Location picker — chip when single, autocomplete when multiple (matches orders page) */}
+          {tenantLocations?.length === 1 ? (
+            <Box
+              sx={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 0.75,
+                px: 1.5,
+                py: 0.75,
+                borderRadius: 999,
+                bgcolor: tint(BRAND),
+                border: `1.5px solid ${edge(BRAND)}`,
+                color: BRAND,
+                fontWeight: 800,
+                fontSize: 13
+              }}
+            >
+              <MdMyLocation size={14} /> {tenantLocations[0]?.locationname}
+            </Box>
+          ) : (
+            <Autocomplete
+              options={tenantLocations || []}
+              value={selectedLocation}
+              getOptionLabel={(o) => (o ? `${o.locationname} (${o.suburb || ''})` : '')}
+              PaperComponent={SoftPaper}
+              onChange={(event, value) => {
+                setSelectedLocation(value);
+                setLocationId(value ? value.locationid : 0);
+                setLocoName(value ? value.locationname : 'All Locations');
+              }}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder="Select Location"
+                  size="small"
+                  sx={{ ...pillFieldSx(BRAND), width: { xs: '100%', sm: 260 } }}
+                  InputProps={{
+                    ...params.InputProps,
+                    startAdornment: (
+                      <Stack direction="row" alignItems="center" spacing={0.75} sx={{ pl: 0.5 }}>
+                        <AccentAvatar color={BRAND} size={22} selected>
+                          <MdMyLocation size={13} />
+                        </AccentAvatar>
+                      </Stack>
+                    )
+                  }}
+                />
+              )}
+              sx={{ width: { xs: '100%', sm: 280 } }}
+            />
+          )}
+        </Stack>
+      </Paper>
+
+      {/* ============================================= || KPI Cards (compact) || ============================================= */}
+      <Grid container spacing={{ xs: 1, sm: 1.25, md: 1.5 }}>
+        {kpiCards.map((item) => {
+          const Icon = item.icon;
+          return (
+            <Grid item key={item.key} xs={6} sm={6} md={item.key === 'charges' ? 4 : 2}>
+              <Paper
+                elevation={0}
+                sx={{
+                  position: 'relative',
+                  overflow: 'hidden',
+                  px: { xs: 1.25, sm: 1.5 },
+                  py: { xs: 0.875, sm: 1.125 },
+                  borderRadius: 2,
+                  border: '1px solid',
+                  borderColor: DT.borderSubtle,
+                  background: '#fff',
+                  transition: 'transform 0.15s, box-shadow 0.15s, border-color 0.15s',
+                  '&:hover': {
+                    transform: 'translateY(-1px)',
+                    boxShadow: DT.shadowMd,
+                    borderColor: edge(item.color)
+                  }
+                }}
+              >
+                <Box
+                  sx={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    width: 3,
+                    background: item.color
+                  }}
+                />
+                <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1} sx={{ pl: 0.5 }}>
+                  <Stack spacing={0.125} sx={{ minWidth: 0, flex: 1 }}>
+                    <Typography
+                      sx={{
+                        color: DT.textSecondary,
+                        fontWeight: 700,
+                        letterSpacing: 0.4,
+                        textTransform: 'uppercase',
+                        fontSize: 10.5,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        lineHeight: 1.2
+                      }}
+                    >
+                      {item.label}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        fontWeight: 800,
+                        color: DT.textPrimary,
+                        lineHeight: 1.15,
+                        fontSize: { xs: '0.95rem', sm: '1.1rem', md: '1.2rem' }
+                      }}
+                      noWrap
+                    >
+                      {isLoadingReports ? (
+                        <Skeleton sx={{ width: 40 }} animation="wave" />
+                      ) : item.isMoney ? (
+                        formatNumberToRupees(item.value)
+                      ) : (
+                        item.value
+                      )}
+                    </Typography>
+                  </Stack>
+                  <Avatar
+                    variant="rounded"
+                    sx={{
+                      width: 30,
+                      height: 30,
+                      bgcolor: soft(item.color),
+                      color: item.color,
+                      borderRadius: 1.25,
+                      flexShrink: 0
+                    }}
+                  >
+                    <Icon size={15} />
+                  </Avatar>
+                </Stack>
+              </Paper>
+            </Grid>
+          );
+        })}
+      </Grid>
+
+      {/* ============================================= || Filter Bar (compact) || ============================================= */}
+      <Paper
+        elevation={0}
+        sx={{
+          mt: { xs: 1, md: 1.25 },
+          p: { xs: 1, md: 1.125 },
+          borderRadius: 2,
+          border: '1px solid',
+          borderColor: DT.borderSubtle,
+          background: '#fff',
+          boxShadow: DT.shadowSoft
+        }}
+      >
+        <Stack
+          direction={{ xs: 'column', md: 'row' }}
+          spacing={1.25}
+          alignItems={{ xs: 'stretch', md: 'center' }}
+          justifyContent={{ xs: 'flex-start', md: 'space-between' }}
+        >
+          {/* Date range + active preset pills (matches orders page) */}
+          <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap" useFlexGap>
+            <Tooltip title="Date Filter" placement="top">
               <Box
                 onClick={() => setOpen(true)}
                 sx={{
                   display: 'inline-flex',
                   alignItems: 'center',
                   gap: 0.75,
-                px: 1.5,
+                  px: 1.25,
-                py: 0.875,
+                  py: 0.75,
                   borderRadius: 999,
                   cursor: 'pointer',
-                bgcolor: '#fff',
+                  bgcolor: tint('#f59e0b'),
                   border: `1.5px solid ${edge('#f59e0b')}`,
                   color: '#f59e0b',
                   fontWeight: 800,
@@ -419,115 +586,25 @@ export default function OrdersReport() {
                   : 'All time'}
               </Box>
             </Tooltip>
-        </Stack>
-      </Paper>
-
-      {/* ============================================= || KPI Cards || ============================================= */}
-      <Grid container spacing={{ xs: 1.25, sm: 1.5, md: 2 }}>
-        {kpiCards.map((item) => {
-          const Icon = item.icon;
-          return (
-            <Grid item key={item.key} xs={6} sm={6} md={item.key === 'charges' ? 4 : 2}>
-              <Paper
-                elevation={0}
-                sx={{
-                  position: 'relative',
-                  overflow: 'hidden',
-                  p: { xs: 1.25, sm: 1.75, md: 2.25 },
-                  borderRadius: DT.radiusCard / 8,
-                  border: '1px solid',
-                  borderColor: DT.borderSubtle,
-                  background: '#fff',
-                  transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
-                  '&:hover': {
-                    transform: 'translateY(-3px)',
-                    boxShadow: DT.shadowMd,
-                    borderColor: edge(item.color)
-                  }
-                }}
-              >
             <Box
               sx={{
-                    position: 'absolute',
+                display: 'inline-flex',
-                    top: 0,
+                alignItems: 'center',
-                    left: 0,
+                gap: 0.5,
-                    right: 0,
+                px: 1,
-                    height: 3,
+                py: 0.5,
-                    background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
+                borderRadius: 999,
-                  }}
+                bgcolor: tint(BRAND),
-                />
+                border: `1px solid ${edge(BRAND)}`,
-                <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
+                color: BRAND,
-                  <Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
+                fontSize: 11,
-                    <Typography
+                fontWeight: 800
-                      variant="caption"
-                      sx={{
-                        color: DT.textSecondary,
-                        fontWeight: 700,
-                        letterSpacing: 0.4,
-                        textTransform: 'uppercase',
-                        fontSize: { xs: 10, sm: 11 },
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis'
               }}
             >
-                      {item.label}
+              <MdReceiptLong size={12} /> {datestatus}
-                    </Typography>
+            </Box>
-                    <Typography
-                      sx={{
-                        fontWeight: 800,
-                        color: DT.textPrimary,
-                        lineHeight: 1.1,
-                        fontSize: { xs: '1.1rem', sm: '1.35rem', md: '1.55rem' }
-                      }}
-                    >
-                      {isLoadingReports ? (
-                        <Skeleton sx={{ width: 40 }} animation="wave" />
-                      ) : item.isMoney ? (
-                        formatNumberToRupees(item.value)
-                      ) : (
-                        item.value
-                      )}
-                    </Typography>
           </Stack>
-                  <Avatar
-                    sx={{
-                      width: { xs: 32, sm: 38, md: 44 },
-                      height: { xs: 32, sm: 38, md: 44 },
-                      bgcolor: soft(item.color),
-                      color: item.color,
-                      boxShadow: `inset 0 0 0 1px ${edge(item.color)}`,
-                      flexShrink: 0
-                    }}
-                  >
-                    <Icon size={18} />
-                  </Avatar>
-                </Stack>
-              </Paper>
-            </Grid>
-          );
-        })}
-      </Grid>
 
-      {/* ============================================= || Filter Bar || ============================================= */}
-      <Paper
-        elevation={0}
-        sx={{
-          mt: { xs: 1.5, md: 2 },
-          p: { xs: 1.25, md: 1.75 },
-          borderRadius: DT.radiusCard / 8,
-          border: '1px solid',
-          borderColor: DT.borderSubtle,
-          background: '#fff',
-          boxShadow: DT.shadowSoft
-        }}
-      >
-        <Stack
-          direction={{ xs: 'column', md: 'row' }}
-          spacing={1.25}
-          alignItems={{ xs: 'stretch', md: 'center' }}
-          justifyContent="space-between"
-        >
           {/* Search */}
           <Box sx={{ width: { xs: '100%', md: 320 } }}>
             <Box
@@ -569,58 +646,6 @@ export default function OrdersReport() {
               )}
             </Box>
           </Box>
-
-          {/* Location filter */}
-          {tenantLocations?.length === 1 ? (
-            <Box
-              sx={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: 0.75,
-                px: 1.5,
-                py: 0.875,
-                borderRadius: 999,
-                bgcolor: tint(BRAND),
-                border: `1.5px solid ${edge(BRAND)}`,
-                color: BRAND,
-                fontWeight: 800,
-                fontSize: 13
-              }}
-            >
-              <MdMyLocation size={14} /> {tenantLocations[0]?.locationname}
-            </Box>
-          ) : (
-            <Autocomplete
-              options={tenantLocations || []}
-              value={selectedLocation}
-              getOptionLabel={(o) => (o ? `${o.locationname} (${o.suburb || ''})` : '')}
-              PaperComponent={SoftPaper}
-              onChange={(event, value) => {
-                setSelectedLocation(value);
-                setLocationId(value ? value.locationid : 0);
-                setLocoName(value ? value.locationname : 'All Locations');
-              }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  placeholder="All Locations"
-                  size="small"
-                  sx={pillFieldSx('#10b981')}
-                  InputProps={{
-                    ...params.InputProps,
-                    startAdornment: (
-                      <Stack direction="row" alignItems="center" spacing={0.75} sx={{ pl: 0.5 }}>
-                        <AccentAvatar color="#10b981" size={22} selected>
-                          <MdPlace size={13} />
-                        </AccentAvatar>
-                      </Stack>
-                    )
-                  }}
-                />
-              )}
-              sx={{ width: { xs: '100%', md: 320 } }}
-            />
-          )}
         </Stack>
       </Paper>
 
@@ -628,7 +653,7 @@ export default function OrdersReport() {
       <Paper
         elevation={0}
         sx={{
-          mt: { xs: 1.5, md: 2 },
+          mt: { xs: 1, md: 1.25 },
           borderRadius: DT.radiusCard / 8,
           border: '1px solid',
           borderColor: DT.borderSubtle,
@@ -811,8 +836,9 @@ export default function OrdersReport() {
                         transition: 'background-color 0.15s',
                         '& td': {
                           borderBottom: `1px solid ${DT.divider}`,
-                          py: { xs: 1, md: 1.25 },
+                          py: 0.5,
-                          px: { xs: 1, md: 1.5 }
+                          px: 1,
+                          verticalAlign: 'middle'
                         },
                         '& td.band-o': { backgroundColor: tint(C_ORDERS) },
                         '& td.band-d': { backgroundColor: tint(C_DELIVERIES) },
@@ -831,11 +857,11 @@ export default function OrdersReport() {
                       </TableCell>
 
                       <TableCell>
-                        <Stack>
+                        <Stack spacing={0.125}>
-                          <Typography variant="subtitle2" sx={{ fontWeight: 700, color: DT.textPrimary }} noWrap>
+                          <Typography sx={{ fontSize: 12.5, fontWeight: 700, color: DT.textPrimary, lineHeight: 1.25 }} noWrap>
                             {row.locationname}
                           </Typography>
-                          <Typography variant="caption" sx={{ color: DT.textMuted }}>
+                          <Typography sx={{ fontSize: 10.5, fontWeight: 600, color: DT.textMuted, lineHeight: 1.3 }}>
                             Id : {row.locationid}
                           </Typography>
                         </Stack>
@@ -918,8 +944,8 @@ export default function OrdersReport() {
                       <TableRow>
                         <TableCell colSpan={13} sx={{ p: 0, borderBottom: `1px solid ${DT.divider}`, bgcolor: DT.surfaceAlt }}>
                           <Collapse in={openRow === row.locationid} timeout="auto" unmountOnExit>
-                            <Box sx={{ p: { xs: 1.5, md: 2 } }}>
+                            <Box sx={{ p: { xs: 1, md: 1.5 } }}>
-                              <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1.25 }}>
+                              <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}>
                                 <AccentAvatar color={BRAND} size={22} selected>
                                   <MdLocalShipping size={12} />
                                 </AccentAvatar>
@@ -975,7 +1001,7 @@ export default function OrdersReport() {
                                         <TableRow
                                           key={`${rider?.firstname}-${ri}`}
                                           sx={{
-                                            '& td': { borderBottom: `1px solid ${DT.divider}`, py: 0.875, px: 1 },
+                                            '& td': { borderBottom: `1px solid ${DT.divider}`, py: 0.5, px: 1, verticalAlign: 'middle' },
                                             '&:hover': { backgroundColor: DT.surfaceAlt }
                                           }}
                                         >
@@ -1090,8 +1116,8 @@ export default function OrdersReport() {
                       backgroundColor: tint(BRAND),
                       borderTop: `2px solid ${edge(BRAND)}`,
                       borderBottom: 'none',
-                      py: 1.25,
+                      py: 0.75,
-                      px: 1.5
+                      px: 1
                     },
                     '& td.band-o': { backgroundColor: soft(C_ORDERS) },
                     '& td.band-d': { backgroundColor: soft(C_DELIVERIES) },

src/pages/nearle/reports/ridersummary.js

@@ -265,13 +265,14 @@ export default function RidersSummary() {
     <>
       {isLoadingReports && <Loader />}
 
-      {/* ============================================= || Header || ============================================= */}
+      {/* ============================================= || Header (compact, standardized actions) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mb: { xs: 1.5, md: 2 },
+          mb: { xs: 1, md: 1.25 },
-          p: { xs: 1.5, sm: 2, md: 2.5 },
+          px: { xs: 1.5, sm: 2 },
-          borderRadius: DT.radiusCard / 8,
+          py: { xs: 1, sm: 1.25 },
+          borderRadius: 2,
           border: '1px solid',
           borderColor: DT.borderSubtle,
           background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
@@ -282,80 +283,87 @@ export default function RidersSummary() {
           direction={{ xs: 'column', sm: 'row' }}
           alignItems={{ xs: 'flex-start', sm: 'center' }}
           justifyContent="space-between"
-          spacing={{ xs: 1.5, sm: 2 }}
+          spacing={{ xs: 1, sm: 1.5 }}
         >
-          <Stack direction="row" alignItems="center" spacing={{ xs: 1.25, sm: 1.75 }}>
+          <Stack direction="row" alignItems="center" spacing={1.25}>
             <Avatar
+              variant="rounded"
               sx={{
-                width: { xs: 40, sm: 48 },
+                width: 36,
-                height: { xs: 40, sm: 48 },
+                height: 36,
                 bgcolor: BRAND,
                 color: '#fff',
-                boxShadow: `0 6px 18px ${ring(BRAND)}`
+                borderRadius: 1.5,
+                boxShadow: `0 4px 12px ${ring(BRAND)}`
               }}
             >
-              <MdGroups size={22} />
+              <MdGroups size={19} />
             </Avatar>
-            <Stack>
+            <Stack spacing={0.125}>
               <Typography
                 variant="h3"
                 sx={{
                   fontWeight: 800,
                   color: DT.textPrimary,
                   lineHeight: 1.1,
-                  fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
+                  fontSize: { xs: '1.1rem', sm: '1.25rem', md: '1.375rem' }
                 }}
               >
                 Riders Summary
               </Typography>
-              <Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
+              <Stack direction="row" alignItems="center" spacing={0.75}>
                 <Box
                   sx={{
-                    width: 8,
+                    width: 7,
-                    height: 8,
+                    height: 7,
                     borderRadius: '50%',
                     bgcolor: '#10b981',
-                    boxShadow: '0 0 0 4px rgba(16,185,129,0.18)'
+                    boxShadow: '0 0 0 3px rgba(16,185,129,0.18)'
                   }}
                 />
-                <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
+                <Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 600 }}>
                   Live · {filteredRows.length} riders · {datestatus}
                 </Typography>
               </Stack>
             </Stack>
           </Stack>
 
-          <Tooltip title="Date Filter">
+          <Tooltip title="Filter by date range" arrow>
-            <Box
+            <Button
               onClick={() => setOpen(true)}
+              disableElevation
+              variant="outlined"
+              size="small"
+              startIcon={<MdCalendarMonth size={15} />}
               sx={{
-                display: 'inline-flex',
+                height: 32,
-                alignItems: 'center',
+                px: 1.25,
-                gap: 0.75,
+                borderRadius: 1.5,
-                px: 1.5,
+                textTransform: 'none',
-                py: 0.875,
+                fontSize: 12.5,
-                borderRadius: 999,
+                fontWeight: 700,
-                cursor: 'pointer',
+                letterSpacing: 0.1,
                 bgcolor: '#fff',
-                border: `1.5px solid ${edge('#f59e0b')}`,
+                borderColor: DT.borderSubtle,
-                color: '#f59e0b',
+                color: DT.textPrimary,
-                fontWeight: 800,
+                '&:hover': {
-                fontSize: 12,
+                  bgcolor: '#fff',
-                transition: 'all 0.18s',
+                  borderColor: BRAND,
-                '&:hover': { borderColor: '#f59e0b', boxShadow: `0 0 0 3px ${ring('#f59e0b')}` }
+                  color: BRAND,
+                  boxShadow: `0 0 0 3px ${ring(BRAND)}`
+                }
               }}
             >
-              <MdCalendarMonth size={14} />
               {startdate && enddate
-                ? `${dayjs(startdate).format('DD/MM/YY')} – ${dayjs(enddate).format('DD/MM/YY')}`
+                ? `${dayjs(startdate).format('DD MMM')} – ${dayjs(enddate).format('DD MMM')}`
                 : 'All time'}
-            </Box>
+            </Button>
           </Tooltip>
         </Stack>
       </Paper>
 
-      {/* ============================================= || KPI Cards || ============================================= */}
+      {/* ============================================= || KPI Cards (compact) || ============================================= */}
-      <Grid container spacing={{ xs: 1.25, sm: 1.5, md: 2 }}>
+      <Grid container spacing={{ xs: 1, sm: 1.25, md: 1.5 }}>
         {kpiCards.map((item) => {
           const Icon = item.icon;
           return (
@@ -365,14 +373,15 @@ export default function RidersSummary() {
                 sx={{
                   position: 'relative',
                   overflow: 'hidden',
-                  p: { xs: 1.25, sm: 1.75, md: 2.25 },
+                  px: { xs: 1.25, sm: 1.5 },
-                  borderRadius: DT.radiusCard / 8,
+                  py: { xs: 0.875, sm: 1.125 },
+                  borderRadius: 2,
                   border: '1px solid',
                   borderColor: DT.borderSubtle,
                   background: '#fff',
-                  transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
+                  transition: 'transform 0.15s, box-shadow 0.15s, border-color 0.15s',
                   '&:hover': {
-                    transform: 'translateY(-3px)',
+                    transform: 'translateY(-1px)',
                     boxShadow: DT.shadowMd,
                     borderColor: edge(item.color)
                   }
@@ -383,24 +392,24 @@ export default function RidersSummary() {
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    right: 0,
+                    bottom: 0,
-                    height: 3,
+                    width: 3,
-                    background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
+                    background: item.color
                   }}
                 />
-                <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
+                <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1} sx={{ pl: 0.5 }}>
-                  <Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
+                  <Stack spacing={0.125} sx={{ minWidth: 0, flex: 1 }}>
                     <Typography
-                      variant="caption"
                       sx={{
                         color: DT.textSecondary,
                         fontWeight: 700,
                         letterSpacing: 0.4,
                         textTransform: 'uppercase',
-                        fontSize: { xs: 10, sm: 11 },
+                        fontSize: 10.5,
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
-                        textOverflow: 'ellipsis'
+                        textOverflow: 'ellipsis',
+                        lineHeight: 1.2
                       }}
                     >
                       {item.label}
@@ -409,9 +418,10 @@ export default function RidersSummary() {
                       sx={{
                         fontWeight: 800,
                         color: DT.textPrimary,
-                        lineHeight: 1.1,
+                        lineHeight: 1.15,
-                        fontSize: { xs: '1.1rem', sm: '1.35rem', md: '1.55rem' }
+                        fontSize: { xs: '0.95rem', sm: '1.1rem', md: '1.2rem' }
                       }}
+                      noWrap
                     >
                       {isLoadingReports ? (
                         <Skeleton sx={{ width: 40 }} animation="wave" />
@@ -423,16 +433,17 @@ export default function RidersSummary() {
                     </Typography>
                   </Stack>
                   <Avatar
+                    variant="rounded"
                     sx={{
-                      width: { xs: 32, sm: 38, md: 44 },
+                      width: 30,
-                      height: { xs: 32, sm: 38, md: 44 },
+                      height: 30,
                       bgcolor: soft(item.color),
                       color: item.color,
-                      boxShadow: `inset 0 0 0 1px ${edge(item.color)}`,
+                      borderRadius: 1.25,
                       flexShrink: 0
                     }}
                   >
-                    <Icon size={18} />
+                    <Icon size={15} />
                   </Avatar>
                 </Stack>
               </Paper>
@@ -441,13 +452,13 @@ export default function RidersSummary() {
         })}
       </Grid>
 
-      {/* ============================================= || Filter Bar || ============================================= */}
+      {/* ============================================= || Filter Bar (compact) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mt: { xs: 1.5, md: 2 },
+          mt: { xs: 1, md: 1.25 },
-          p: { xs: 1.25, md: 1.75 },
+          p: { xs: 1, md: 1.125 },
-          borderRadius: DT.radiusCard / 8,
+          borderRadius: 2,
           border: '1px solid',
           borderColor: DT.borderSubtle,
           background: '#fff',
@@ -542,12 +553,12 @@ export default function RidersSummary() {
         </Stack>
       </Paper>
 
-      {/* ============================================= || Table || ============================================= */}
+      {/* ============================================= || Table (dense, sticky header) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mt: { xs: 1.5, md: 2 },
+          mt: { xs: 1, md: 1.25 },
-          borderRadius: DT.radiusCard / 8,
+          borderRadius: 2,
           border: '1px solid',
           borderColor: DT.borderSubtle,
           overflow: 'hidden',
@@ -556,6 +567,8 @@ export default function RidersSummary() {
       >
         <TableContainer
           sx={{
+            minHeight: 320,
+            maxHeight: { xs: 'calc(100vh - 320px)', md: 'calc(100vh - 300px)' },
             overflow: 'auto',
             '&::-webkit-scrollbar': { width: 10, height: 10 },
             '&::-webkit-scrollbar-thumb': {
@@ -566,21 +579,21 @@ export default function RidersSummary() {
             '&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
           }}
         >
-          <Table sx={{ minWidth: 1300 }}>
+          <Table stickyHeader size="small" sx={{ minWidth: 1300 }}>
             <TableHead>
               <TableRow
                 sx={{
                   '& th': {
                     backgroundColor: DT.surfaceAlt,
                     color: DT.textSecondary,
-                    fontSize: { xs: 10, md: 11 },
+                    fontSize: 10.5,
                     fontWeight: 800,
-                    letterSpacing: 0.6,
+                    letterSpacing: 0.5,
                     textTransform: 'uppercase',
                     whiteSpace: 'nowrap',
                     borderBottom: `1px solid ${DT.borderSubtle}`,
-                    py: { xs: 1, md: 1.25 },
+                    py: 0.75,
-                    px: { xs: 1, md: 1.5 }
+                    px: 1
                   }
                 }}
               >
@@ -606,11 +619,11 @@ export default function RidersSummary() {
             <TableBody>
               {isLoadingReports &&
                 filteredRows.length === 0 &&
-                [0, 1, 2, 3, 4].map((_, idx) => (
+                Array.from({ length: 10 }).map((_, idx) => (
                   <TableRow key={`sk-${idx}`}>
                     {Array.from({ length: 16 }).map((__, ci) => (
-                      <TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}` }}>
+                      <TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}`, py: 0.625, px: 1 }}>
-                        <Skeleton animation="wave" />
+                        <Skeleton animation="wave" height={20} />
                       </TableCell>
                     ))}
                   </TableRow>
@@ -618,17 +631,45 @@ export default function RidersSummary() {
 
               {!isLoadingReports && filteredRows.length === 0 && (
                 <TableRow>
-                  <TableCell colSpan={16} sx={{ py: 6, borderBottom: 'none' }}>
+                  <TableCell colSpan={16} sx={{ py: 7, borderBottom: 'none' }}>
-                    <Stack alignItems="center" spacing={1.5}>
+                    <Stack alignItems="center" spacing={1.25}>
-                      <Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
+                      <Avatar
-                        <MdGroups size={28} />
+                        variant="rounded"
+                        sx={{
+                          width: 56,
+                          height: 56,
+                          bgcolor: soft('#94a3b8'),
+                          color: DT.textMuted,
+                          borderRadius: 2
+                        }}
+                      >
+                        <MdGroups size={26} />
                       </Avatar>
-                      <Typography variant="subtitle1" sx={{ fontWeight: 700, color: DT.textPrimary }}>
+                      <Typography sx={{ fontWeight: 700, color: DT.textPrimary, fontSize: 14 }}>
                         No riders to show
                       </Typography>
-                      <Typography variant="caption" sx={{ color: DT.textSecondary }}>
+                      <Typography sx={{ color: DT.textSecondary, fontSize: 12 }}>
-                        {searchword ? 'Try a different rider name.' : 'Adjust the date range above.'}
+                        {searchword ? 'Try a different rider name or clear the search.' : 'Adjust the date range above.'}
                       </Typography>
+                      {searchword && (
+                        <Button
+                          size="small"
+                          onClick={() => setSearchword('')}
+                          sx={{
+                            mt: 0.5,
+                            height: 28,
+                            textTransform: 'none',
+                            fontSize: 12,
+                            fontWeight: 700,
+                            color: BRAND,
+                            borderRadius: 1.25,
+                            '&:hover': { bgcolor: tint(BRAND) }
+                          }}
+                          startIcon={<MdClear size={14} />}
+                        >
+                          Clear search
+                        </Button>
+                      )}
                     </Stack>
                   </TableCell>
                 </TableRow>
@@ -640,30 +681,35 @@ export default function RidersSummary() {
                   <TableRow
                     sx={{
                       cursor: 'pointer',
-                      transition: 'background-color 0.15s',
+                      transition: 'background-color 0.12s, box-shadow 0.12s',
                       '& td': {
                         borderBottom: `1px solid ${DT.divider}`,
-                        py: { xs: 1, md: 1.25 },
+                        py: 0.625,
-                        px: { xs: 1, md: 1.5 }
+                        px: 1,
+                        verticalAlign: 'middle'
                       },
                       backgroundColor: openRow === row.userid ? tint(BRAND) : 'transparent',
-                      '&:hover': { backgroundColor: openRow === row.userid ? soft(BRAND) : DT.surfaceAlt }
+                      boxShadow: openRow === row.userid ? `inset 3px 0 0 ${BRAND}` : 'none',
+                      '&:hover': {
+                        backgroundColor: openRow === row.userid ? soft(BRAND) : tint(BRAND),
+                        boxShadow: `inset 3px 0 0 ${BRAND}`
+                      }
                     }}
                   >
                     <TableCell>
-                      <Typography sx={{ fontWeight: 700, color: DT.textSecondary }}>{index + 1}</Typography>
+                      <Typography sx={{ fontWeight: 700, fontSize: 12, color: DT.textMuted }}>{index + 1}</Typography>
                     </TableCell>
 
                     <TableCell>
                       <Stack direction="row" alignItems="center" spacing={1}>
-                        <AccentAvatar color={BRAND} size={32} selected>
+                        <AccentAvatar color={BRAND} size={28} selected>
                           {String(row.firstname || '?').charAt(0).toUpperCase()}
                         </AccentAvatar>
-                        <Stack>
+                        <Stack spacing={0.125}>
-                          <Typography variant="subtitle2" sx={{ fontWeight: 700, color: DT.textPrimary }} noWrap>
+                          <Typography sx={{ fontSize: 12.5, fontWeight: 700, color: DT.textPrimary, lineHeight: 1.25 }} noWrap>
                             {row.firstname} {row.lastname}
                           </Typography>
-                          <Typography variant="caption" sx={{ color: DT.textMuted }}>
+                          <Typography sx={{ fontSize: 10.5, fontWeight: 600, color: DT.textMuted, lineHeight: 1.3 }}>
                             Id : {row.userid}
                           </Typography>
                         </Stack>
@@ -823,8 +869,8 @@ export default function RidersSummary() {
                                       <TableRow
                                         key={`${subrow.locationid}-${sridx}`}
                                         sx={{
-                                          '& td': { borderBottom: `1px solid ${DT.divider}`, py: 0.875, px: 1 },
+                                          '& td': { borderBottom: `1px solid ${DT.divider}`, py: 0.5, px: 1 },
-                                          '&:hover': { backgroundColor: DT.surfaceAlt }
+                                          '&:hover': { backgroundColor: tint(BRAND), boxShadow: `inset 3px 0 0 ${BRAND}` }
                                         }}
                                       >
                                         <TableCell align="center">