updates on the dispatch page and the css

.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/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js

@@ -210,10 +210,14 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
   const isSelected = selected === menu.id;
   const borderIcon = level === 1 ? <BorderOutlined style={{ fontSize: '1rem' }} /> : false;
   const Icon = menu.icon;
-  const menuIcon = menu.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : borderIcon;
-  const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
+  const menuIcon = menu.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem', color: 'white' }} /> : borderIcon;
+  // const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary';
+  // const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
   const popperId = miniMenuOpened ? `collapse-pop-${menu.id}` : undefined;
   const FlexBox = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' };
+  const textColor = 'white';
+  const iconSelectedColor = 'white';
+  // const isSelected = true;
 
   return (
     <>
@@ -227,9 +231,11 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
             sx={{
               pl: drawerOpen ? `${level * 28}px` : 1.5,
               py: !drawerOpen && level === 1 ? 1.25 : 1,
+
               ...(drawerOpen && {
                 '&:hover': {
-                  bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.light'
+                  // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter'
+                  bgcolor: '#7b1fa2'
                 },
                 '&.Mui-selected': {
                   bgcolor: 'transparent',
@@ -239,13 +245,14 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
               }),
               ...(!drawerOpen && {
                 '&:hover': {
-                  bgcolor: 'primary.light'
+                  bgcolor: 'transparent'
+                  // bgcolor:'#7b1fa2'
                 },
                 '&.Mui-selected': {
                   '&:hover': {
-                    bgcolor: 'white'
+                    bgcolor: 'transparent'
                   },
-                  bgcolor: 'white'
+                  bgcolor: 'transparent'
                 }
               })
             }}
@@ -255,7 +262,10 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                 onClick={handlerIconLink}
                 sx={{
                   minWidth: 28,
-                  color: selected === menu.id ? 'primary.main' : 'white',
+                  // color: selected === menu.id ? 'primary.main' : textColor,
+                  // color: selected === menu.id ? textColor : textColor,
+                  // bgcolor:'white',
+                  // color:'white',
                   ...(!drawerOpen && {
                     borderRadius: 1.5,
                     width: 36,
@@ -264,13 +274,17 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                     justifyContent: 'center',
                     '&:hover': {
                       // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter'
+                      bgcolor: '#7b1fa2',
+                      color: 'white'
                     }
                   }),
                   ...(!drawerOpen &&
                     selected === menu.id && {
-                      // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
+                      bgcolor: 'primary.light',
+                      color: 'primary.main',
                       '&:hover': {
-                        // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
+                        bgcolor: '#7b1fa2',
+                        color: 'primary.main'
                       }
                     })
                 }}
@@ -281,7 +295,12 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
             {(drawerOpen || (!drawerOpen && level !== 1)) && (
               <ListItemText
                 primary={
-                  <Typography variant="h6" color={selected === menu.id ? 'white' : 'white'}>
+                  <Typography
+                    variant="h6"
+                    // color={selected === menu.id ? 'primary' : textColor}
+                    // color={'white'}
+                    color={selected === menu.id ? textColor : textColor}
+                  >
                     {menu.title}
                   </Typography>
                 }
@@ -296,9 +315,22 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
             )}
             {(drawerOpen || (!drawerOpen && level !== 1)) &&
               (miniMenuOpened || open ? (
-                <UpOutlined style={{ fontSize: '0.625rem', marginLeft: 1, color: theme.palette.primary.main }} />
+                <UpOutlined
+                  style={{
+                    fontSize: '0.625rem',
+                    marginLeft: 1,
+                    //  color: theme.palette.primary.main
+                    color: 'white'
+                  }}
+                />
               ) : (
-                <DownOutlined style={{ fontSize: '0.625rem', marginLeft: 1, color: 'white' }} />
+                <DownOutlined
+                  style={{
+                    fontSize: '0.625rem',
+                    marginLeft: 1,
+                    color: 'white'
+                  }}
+                />
               ))}
 
             {!drawerOpen && (
@@ -328,8 +360,8 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                         mt: 1.5,
                         boxShadow: theme.customShadows.z1,
                         backgroundImage: 'none',
-                        border: `1px solid ${theme.palette.primary.main}`,
-                        bgcolor: 'primary.main'
+                        border: `2px solid ${theme.palette.primary.main}`,
+                        width: 'auto'
                       }}
                     >
                       <ClickAwayListener onClickAway={handleClose}>
@@ -373,7 +405,14 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
           >
             <Box onClick={handlerIconLink} sx={FlexBox}>
               {menuIcon && (
-                <ListItemIcon sx={{ my: 'auto', minWidth: !menu.icon ? 18 : 36, color: theme.palette.secondary.dark }}>
+                <ListItemIcon
+                  sx={{
+                    my: 'auto',
+                    minWidth: !menu.icon ? 18 : 36
+                    //  color: theme.palette.secondary.dark
+                    // color:'white'
+                  }}
+                >
                   {menuIcon}
                 </ListItemIcon>
               )}
@@ -386,7 +425,12 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
               )}
               <ListItemText
                 primary={
-                  <Typography variant="body1" color="inherit" sx={{ my: 'auto' }}>
+                  <Typography
+                    variant="body1"
+                    // color="inherit"
+                    // color="white"
+                    sx={{ my: 'auto' }}
+                  >
                     {menu.title}
                   </Typography>
                 }

src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavGroup.js

@@ -26,7 +26,7 @@ import NavCollapse from './NavCollapse';
 import SimpleBar from 'components/third-party/SimpleBar';
 import Transitions from 'components/@extended/Transitions';
 
-import { MenuOrientation, ThemeMode } from 'config';
+import { MenuOrientation } from 'config';
 import useConfig from 'hooks/useConfig';
 import { dispatch, useSelector } from 'store';
 import { activeID } from 'store/reducers/menu';
@@ -227,8 +227,8 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
             item.title &&
             drawerOpen && (
               <Box sx={{ pl: 3, mb: 1.5 }}>
-                <Typography variant="subtitle2" 
-                // color={theme.palette.mode === ThemeMode.DARK ? 'textSecondary' : 'text.secondary'}
+                <Typography
+                  variant="subtitle2"
                   sx={{ color: '#fff' }}
                 >
                   {item.title}

src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js

@@ -9,9 +9,10 @@ import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, u
 
 // project import
 import Dot from 'components/@extended/Dot';
+
 import { MenuOrientation, ThemeMode } from 'config';
 import useConfig from 'hooks/useConfig';
-import { activeItem, openDrawer } from 'store/reducers/menu';
+import { activeItem, openDrawer, setSelectedMenu } from 'store/reducers/menu';
 
 // ==============================|| NAVIGATION - LIST ITEM ||============================== //
 
@@ -35,10 +36,15 @@ const NavItem = ({ item, level }) => {
   }
 
   const Icon = item.icon;
-  const itemIcon = item.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : false;
 
   const isSelected = openItem.findIndex((id) => id === item.id) > -1;
 
+  const itemIcon = item.icon ? (
+    <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem', color: isSelected ? '#662582' : '#fff' }} />
+  ) : (
+    false
+  );
+
   // const { pathname } = useLocation();
   const pathname = document.location.pathname;
 
@@ -59,10 +65,15 @@ const NavItem = ({ item, level }) => {
     if (pathname.includes(item.url)) {
       dispatch(activeItem({ openItem: [item.id] }));
     }
+
     // eslint-disable-next-line
   }, [pathname]);
 
-  const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary';
+  useEffect(() => {
+    dispatch(setSelectedMenu(pathname));
+  }, [pathname]);
+
+  const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : '#fff';
   const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? 'text.primary' : 'primary.main';
 
   return (
@@ -72,14 +83,16 @@ const NavItem = ({ item, level }) => {
           {...listItemProps}
           disabled={item.disabled}
           selected={isSelected}
+          onClick={() => {
+            // dispatch(setSelectedMenu(item));
+          }}
           sx={{
             zIndex: 1201,
             pl: drawerOpen ? `${level * 28}px` : 1.5,
             py: !drawerOpen && level === 1 ? 1.25 : 1,
             ...(drawerOpen && {
-              // bgcolor: 'primary.light',
               '&:hover': {
-                bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.light'
+                bgcolor: '#7b1fa2'
               },
               '&.Mui-selected': {
                 bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter',
@@ -92,41 +105,43 @@ const NavItem = ({ item, level }) => {
               }
             }),
             ...(!drawerOpen && {
+              bgcolor: '#662582',
               '&:hover': {
-                bgcolor: 'primary.light'
+                bgcolor: '#662582'
               },
               '&.Mui-selected': {
                 '&:hover': {
-                  bgcolor: 'white'
+                  bgcolor: 'transparent'
                 },
-                bgcolor: 'white'
+                bgcolor: 'transparent'
               }
             })
           }}
           {...(downLG && {
-            onClick: () => dispatch(openDrawer(false))
+            onClick: () => {
+              dispatch(openDrawer(false));
+            }
           })}
         >
           {itemIcon && (
             <ListItemIcon
               sx={{
                 minWidth: 28,
-                color: isSelected ? iconSelectedColor : 'white',
                 ...(!drawerOpen && {
-                  // borderRadius: 1.5,
+                  borderRadius: 1.5,
                   width: 36,
                   height: 36,
                   alignItems: 'center',
-                  justifyContent: 'center'
-                  // '&:hover': {
-                  //   bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'primary.lighter'
-                  // }
+                  justifyContent: 'center',
+                  '&:hover': {
+                    bgcolor: '#7b1fa2'
+                  }
                 }),
                 ...(!drawerOpen &&
                   isSelected && {
-                    // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
+                    bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
                     '&:hover': {
-                      // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
+                      bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
                     }
                   })
               }}
@@ -137,13 +152,7 @@ const NavItem = ({ item, level }) => {
           {(drawerOpen || (!drawerOpen && level !== 1)) && (
             <ListItemText
               primary={
-                <Typography
-                  variant="h6"
-                  sx={{
-                    ml: 1,
-                    color: isSelected ? theme.palette.primary.main : 'white'
-                  }}
-                >
+                <Typography variant="h6" sx={{ color: isSelected ? iconSelectedColor : textColor, whiteSpace: 'nowrap' }}>
                   {item.title}
                 </Typography>
               }

src/layout/MainLayout/Header/index.js

@@ -9,7 +9,7 @@ import AppBarStyled from './AppBarStyled';
 import HeaderContent from './HeaderContent';
 import IconButton from 'components/@extended/IconButton';
 
-import { MenuOrientation, ThemeMode } from 'config';
+import { MenuOrientation } from 'config';
 import useConfig from 'hooks/useConfig';
 import { dispatch, useSelector } from 'store';
 import { openDrawer } from 'store/reducers/menu';
@@ -32,9 +32,6 @@ const Header = () => {
   // header content
   const headerContent = useMemo(() => <HeaderContent />, []);
 
-  const iconBackColorOpen = theme.palette.mode === ThemeMode.DARK ? 'grey.200' : 'grey.300';
-  const iconBackColor = theme.palette.mode === ThemeMode.DARK ? 'background.default' : 'grey.100';
-
   // common header
   const mainHeader = (
     <Toolbar>
@@ -43,9 +40,6 @@ const Header = () => {
           aria-label="open drawer"
           onClick={() => dispatch(openDrawer(!drawerOpen))}
           edge="start"
-          // color="secondary"
-          // variant="light"
-          // sx={{ color: 'text.primary', bgcolor: drawerOpen ? iconBackColorOpen : iconBackColor, ml: { xs: 0, lg: -2 } }}
           sx={{
             color: '#fff',
             bgcolor: 'transparent',

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/dispatch/Dispatch.css

@@ -1532,6 +1532,92 @@
   margin-left: 4px;
 }
 
+/* ─── Live bike marker (Swiggy/Zomato/Rapido-style) ───────────────────────
+   Center-anchored rounded badge carrying a motorbike glyph, a pulsing "live"
+   ring, and a side label. The container itself is click-through; only the
+   badge + label capture clicks so the wide label area doesn't block the map. */
+.dispatch-container .live-rider-bike {
+  --pin-color: #16a34a;
+  position: relative;
+  width: 160px;
+  height: 44px;
+  pointer-events: none;
+}
+
+.dispatch-container .live-rider-bike-badge {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--pin-color);
+  border: 3px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  pointer-events: auto;
+  z-index: 2;
+}
+
+.dispatch-container .live-rider-bike-pulse {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--pin-color);
+  opacity: 0.45;
+  z-index: 1;
+}
+
+.dispatch-container .live-rider-bike.is-active .live-rider-bike-pulse {
+  animation: live-rider-bike-pulse 1.6s ease-out infinite;
+}
+
+@keyframes live-rider-bike-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  70% {
+    transform: scale(2.2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(2.2);
+    opacity: 0;
+  }
+}
+
+.dispatch-container .live-rider-bike.is-idle .live-rider-bike-badge {
+  opacity: 0.85;
+}
+
+.dispatch-container .live-rider-bike-label {
+  position: absolute;
+  left: 46px;
+  top: 9px;
+  background: var(--pin-color);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  line-height: 1.2;
+  pointer-events: auto;
+}
+
+.dispatch-container .live-rider-bike-label span {
+  font-weight: 500;
+  opacity: 0.85;
+  margin-left: 4px;
+}
+
 /* Body layout */
 .dispatch-container #body {
   flex: 1;
@@ -1949,6 +2035,46 @@
   color: #16a34a;
 }
 
+/* GPS-only rider (live on the road, no active delivery this slot). The card
+   collapses to just the live state — the badge mirrors the map's live bike
+   indicator so the operator reads "tracking position only" at a glance. */
+.dispatch-container .rcard.is-gps-only {
+  border-style: dashed;
+  cursor: default;
+}
+
+/* GPS-only riders have no route to open, so the card is not interactive —
+   suppress the hover lift/shadow that signals "clickable". */
+.dispatch-container .rcard.is-gps-only:hover {
+  transform: none;
+  box-shadow: var(--shadow);
+  border-color: var(--border);
+}
+
+.dispatch-container .rcard-badge.rcard-badge-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(22, 163, 74, 0.12);
+  color: #16a34a;
+  letter-spacing: 0.04em;
+}
+
+.dispatch-container .rcard-live-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #16a34a;
+  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
+  animation: rcard-live-pulse 1.6s ease-out infinite;
+}
+
+@keyframes rcard-live-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
+  70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
+}
+
 .dispatch-container .bar-bg {
   background: var(--bg-sub);
   border-radius: 4px;
@@ -1987,6 +2113,214 @@
   border: 1px solid var(--border);
 }
 
+/* ── Active-delivery card (Active view sidebar) ─────────────────────────────
+   Clean monitoring card: rider avatar + customer/rider header + status pill, a
+   truncated drop-address line, and a footer with the pickup kitchen on the left
+   and distance + ETA-to-drop on the right. `--ad-accent` = owning rider color. */
+.dispatch-container .adcard-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 4px 2px 12px;
+}
+
+.dispatch-container .adcard {
+  position: relative;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 13px 14px 13px 16px;
+  cursor: pointer;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+}
+
+.dispatch-container .adcard::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background: var(--ad-accent, var(--accent));
+  opacity: 0.9;
+  transition: width 0.18s ease;
+}
+
+.dispatch-container .adcard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
+  border-color: var(--ad-accent, var(--accent));
+}
+
+.dispatch-container .adcard:hover::before {
+  width: 5px;
+}
+
+.dispatch-container .adcard.is-active {
+  border-color: var(--ad-accent, var(--accent));
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
+}
+
+.dispatch-container .adcard.is-active::before {
+  width: 5px;
+}
+
+.dispatch-container .adcard-top {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+}
+
+.dispatch-container .adcard-avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 11px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 800;
+  color: #fff;
+  letter-spacing: 0.02em;
+}
+
+.dispatch-container .adcard-titles {
+  flex: 1;
+  min-width: 0;
+}
+
+.dispatch-container .adcard-customer {
+  font-size: 14.5px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dispatch-container .adcard-rider {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-top: 2px;
+  min-width: 0;
+}
+
+.dispatch-container .adcard-status {
+  flex-shrink: 0;
+  align-self: flex-start;
+  font-size: 9.5px;
+  font-weight: 800;
+  padding: 4px 9px;
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+
+.dispatch-container .adcard-addr {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 11px;
+  font-size: 12px;
+  color: var(--text-muted);
+  min-width: 0;
+}
+
+.dispatch-container .adcard-addr .adcard-ic {
+  color: #94a3b8;
+}
+
+.dispatch-container .adcard-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 11px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+}
+
+.dispatch-container .adcard-pickup {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.dispatch-container .adcard-pickup .adcard-ic {
+  color: var(--kitchen);
+}
+
+.dispatch-container .adcard-metrics {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+  font-size: 12px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.dispatch-container .adcard-m {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.dispatch-container .adcard-m-km {
+  color: var(--text-muted);
+}
+
+.dispatch-container .adcard-m-eta {
+  color: var(--ad-accent, var(--accent));
+}
+
+.dispatch-container .adcard-ic {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.dispatch-container .adcard-tx {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+/* Drop address: allow up to two lines instead of one truncated line so long
+   addresses stay readable; the location icon hugs the first line. */
+.dispatch-container .adcard-addr {
+  align-items: flex-start;
+}
+
+.dispatch-container .adcard-addr .adcard-ic {
+  margin-top: 1px;
+}
+
+.dispatch-container .adcard-addr-tx {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+}
+
+
 .dispatch-container .zone-order-change-rider {
   flex-shrink: 0;
   width: 26px;
@@ -2166,6 +2500,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
+  row-gap: 10px;
   border-bottom: 1px solid var(--border);
   background: #fff;
 }
@@ -2186,6 +2522,95 @@
   gap: 12px;
 }
 
+/* Planned / By time segmented control inside the trip header. Wraps onto its
+   own full-width row below the badge + stats (the header is flex-wrap: wrap,
+   and flex-basis: 100% forces the break). Each pill = 50% of the row → a clear
+   "tab bar". Active pill is a white thumb; the mode's semantic color (indigo
+   for Planned, emerald for By time) lands on the active icon so the mode reads
+   at a glance. */
+.dispatch-container .trip-sort-toggle {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  flex-basis: 100%;
+  margin-left: 0;
+  padding: 3px;
+  background: #f1f5f9;
+  border-radius: 10px;
+  position: relative;
+  isolation: isolate;
+}
+
+.dispatch-container .trip-sort-pill {
+  flex: 1 1 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 10px;
+  min-height: 28px;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  color: #64748b;
+  background: transparent;
+  border: 0;
+  border-radius: 7px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.dispatch-container .trip-sort-pill svg {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  display: block;
+  color: #94a3b8;
+  transition: color 0.18s ease, transform 0.18s ease;
+}
+
+.dispatch-container .trip-sort-pill:hover:not(.is-active) {
+  color: #0f172a;
+}
+
+.dispatch-container .trip-sort-pill:hover:not(.is-active) svg {
+  color: #475569;
+}
+
+.dispatch-container .trip-sort-pill:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
+}
+
+.dispatch-container .trip-sort-pill.is-active {
+  color: #0f172a;
+  background: #ffffff;
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.08),
+    0 0 0 1px rgba(15, 23, 42, 0.04),
+    0 2px 6px rgba(15, 23, 42, 0.06);
+}
+
+.dispatch-container .trip-sort-toggle[data-mode='planned']
+  .trip-sort-pill.is-active svg {
+  color: #6366f1;
+}
+
+.dispatch-container .trip-sort-toggle[data-mode='time']
+  .trip-sort-pill.is-active svg {
+  color: #10b981;
+}
+
+/* Undelivered cards while By time is active — sunk to the bottom and dimmed
+   so "not yet delivered" reads at a glance without checking each status pill. */
+.dispatch-container .zone-order-card.is-pending-time {
+  opacity: 0.72;
+}
+
 .dispatch-container .step-wrap {
   padding: 16px;
 }
@@ -5523,6 +5948,30 @@
   text-overflow: ellipsis;
 }
 
+/* Customer (recipient) name — sits directly under the rider name as a
+   secondary, lighter line so the operator sees who the drop is for. */
+.dispatch-container .dispatch-popup .pu-customer {
+  margin-top: 4px;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9) !important;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dispatch-container .dispatch-popup .pu-customer svg {
+  font-size: 15px;
+  opacity: 0.85;
+}
+
+.dispatch-container .dispatch-popup .pu-customer span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .dispatch-container .dispatch-popup .pu-delivery-id {
   margin-top: 6px;
   font-size: 11px;

src/pages/nearle/dispatch/dispatchShared.js

@@ -29,6 +29,28 @@ export const getStatusStyle = (status) =>
 export const FINAL_STATUSES = new Set(['delivered']);
 export const SKIPPED_STATUSES = new Set(['cancelled', 'skipped']);
 
+// An order is "active" (currently in progress) when it's neither completed
+// (delivered) nor skipped/cancelled. The Active view uses this to collapse a
+// rider down to the single delivery they're working on right now.
+export const isActiveDelivery = (o) => {
+  const s = String(o?.orderstatus || '').toLowerCase();
+  return !FINAL_STATUSES.has(s) && !SKIPPED_STATUSES.has(s);
+};
+
+// A rider's single in-progress delivery: the first non-final, non-skipped
+// stop in (trip, step) order. Returns null when the rider has nothing active
+// (everything delivered/cancelled, or GPS-only with no orders).
+export const getActiveOrder = (orders) => {
+  if (!Array.isArray(orders) || !orders.length) return null;
+  const sorted = [...orders].sort((a, b) => {
+    const tA = a.trip_number || 1;
+    const tB = b.trip_number || 1;
+    if (tA !== tB) return tA - tB;
+    return (a.step || 0) - (b.step || 0);
+  });
+  return sorted.find(isActiveDelivery) || null;
+};
+
 // Per-step palette — wider and more deliberately spaced than the rider
 // palette so a 10-stop day reads as 10 distinct colors on the compare
 // map's polylines + pins.

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 },
-          p: { xs: 1.5, sm: 2, md: 2.5 },
-          borderRadius: DT.radiusCard / 8,
+          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
         }}
       >
-        <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 },
-              height: { xs: 40, sm: 48 },
+              width: 36,
+              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,
-                  height: 8,
+                  width: 7,
+                  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 || ============================================= */}
-      <Grid container spacing={{ xs: 1.25, sm: 1.5, md: 2 }}>
+      {/* ============================================= || KPI Cards (compact, clickable) || ============================================= */}
+      <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 },
-                  borderRadius: DT.radiusCard / 8,
+                  px: { xs: 1.25, sm: 1.5 },
+                  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',
-                  transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
+                  boxShadow: active ? `0 4px 14px ${ring(item.color)}` : 'none',
+                  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,
-                    height: 3,
-                    background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
+                    bottom: 0,
+                    width: 3,
+                    background: item.color
                   }}
                 />
-                <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
-                  <Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
+                <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1} sx={{ pl: 0.5 }}>
+                  <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,
-                        fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
+                        lineHeight: 1.15,
+                        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 },
-                      height: { xs: 36, sm: 42, md: 48 },
+                      width: 30,
+                      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 },
-          p: { xs: 1, md: 1.5 },
-          borderTopLeftRadius: DT.radiusCard / 8,
-          borderTopRightRadius: DT.radiusCard / 8,
+          mt: { xs: 1, md: 1.25 },
+          p: { xs: 0.875, md: 1.125 },
+          borderTopLeftRadius: 2,
+          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,
-          borderBottomRightRadius: DT.radiusCard / 8,
+          borderBottomLeftRadius: 2,
+          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 },
-                    px: { xs: 1, md: 1.5 }
+                    py: 0.75,
+                    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}` }}>
-                        <Skeleton animation="wave" />
+                      <TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}`, py: 0.625, px: 1 }}>
+                        <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' }}>
-                    <Stack alignItems="center" spacing={1.5}>
-                      <Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
-                        <MdReceiptLong size={28} />
+                  <TableCell colSpan={8} sx={{ py: 7, borderBottom: 'none' }}>
+                    <Stack alignItems="center" spacing={1.25}>
+                      <Avatar
+                        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 }}>
-                        {search ? 'Try a different invoice number.' : 'Switch tabs above to load invoices.'}
+                      <Typography sx={{ color: DT.textSecondary, fontSize: 12 }}>
+                        {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 },
-                        px: { xs: 1, md: 1.5 }
+                        py: 0.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}>
-                        <MdCalendarMonth size={12} style={{ color: DT.textMuted, flexShrink: 0 }} />
-                        <Stack>
-                          <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textPrimary }} noWrap>
-                            {item.transactiondate ? dayjs(item.transactiondate).format('DD MMM YYYY') : '—'}
+                      {item.transactiondate ? (
+                        <Stack spacing={0} sx={{ lineHeight: 1.1 }}>
+                          <Typography sx={{ fontSize: 12.5, fontWeight: 800, color: DT.textPrimary, lineHeight: 1.15 }} noWrap>
+                            {dayjs(item.transactiondate).format('hh:mm A')}
                           </Typography>
-                          <Typography variant="caption" sx={{ color: DT.textMuted, fontSize: 10 }} noWrap>
-                            {item.transactiondate ? dayjs(item.transactiondate).format('hh:mm A') : ''}
+                          <Typography sx={{ fontSize: 10.5, fontWeight: 600, color: DT.textMuted, lineHeight: 1.2 }} noWrap>
+                            {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}>
-                        <MdAccessTime size={12} style={{ color: DT.textMuted, flexShrink: 0 }} />
-                        <Stack>
-                          <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textPrimary }} noWrap>
-                            {item.duedate ? dayjs(item.duedate).format('DD MMM YYYY') : '—'}
+                      {item.duedate ? (
+                        <Stack spacing={0} sx={{ lineHeight: 1.1 }}>
+                          <Typography sx={{ fontSize: 12.5, fontWeight: 800, color: DT.textPrimary, lineHeight: 1.15 }} noWrap>
+                            {dayjs(item.duedate).format('hh:mm A')}
                           </Typography>
-                          <Typography variant="caption" sx={{ color: DT.textMuted, fontSize: 10 }} noWrap>
-                            {item.duedate ? dayjs(item.duedate).format('hh:mm A') : ''}
+                          <Typography sx={{ fontSize: 10.5, fontWeight: 600, color: DT.textMuted, lineHeight: 1.2 }} noWrap>
+                            {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/invoice/invoicePreview.js

@@ -108,7 +108,7 @@ const InvoicePreview = () => {
             <IconButton
               color="primary"
               onClick={() => {
-                navigate('/invoice');
+                navigate('/nearle/invoice');
               }}
             >
               <FaArrowLeft size={'large'} />

src/pages/nearle/locations/ResponsiveLocationDrawer.js

@@ -1,43 +1,55 @@
-import React, { useState, useEffect, Fragment, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Box,
   Drawer,
   IconButton,
-  Toolbar,
   Typography,
-  AppBar,
   useMediaQuery,
-  Divider,
-  List,
-  ListItem,
-  ListItemText,
   useTheme,
-  ListItemAvatar,
-  Avatar,
   Tooltip,
   TableCell,
-  Chip,
   Stack,
   TableRow,
   TableBody,
   TableHead,
   Table,
   TableContainer,
-  Tabs,
-  Tab,
-  CircularProgress
+  CircularProgress,
+  InputBase,
+  Paper,
+  Avatar,
+  ButtonBase
 } from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
-import SearchBar from 'components/nearle_components/SearchBar';
+import {
+  MdMenu,
+  MdSearch,
+  MdClear,
+  MdPlace,
+  MdStorefront,
+  MdMyLocation,
+  MdAccessTime,
+  MdLocalShipping,
+  MdHourglassEmpty,
+  MdCheckCircle,
+  MdCancel,
+  MdReceiptLong
+} from 'react-icons/md';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { fetchOrders1, gettenantlocations } from '../api/api';
 import Loader from 'components/Loader';
 import CircularLoader from 'components/nearle_components/CircularLoader';
 import { Empty, Skeleton } from 'antd';
-import MainCard from 'components/MainCard';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
-import { CancelOutlined, CheckCircleOutline } from '@mui/icons-material';
+import {
+  DT,
+  BRAND,
+  BRAND_LIGHT,
+  tint,
+  soft,
+  ring,
+  edge,
+  StatusBadge,
+  AccentAvatar
+} from '../_shared/ordersDesign';
 import axios from 'axios';
 import dayjs from 'dayjs';
 var utc = require('dayjs/plugin/utc');
@@ -45,6 +57,15 @@ dayjs.extend(utc);
 
 const drawerWidth = 300;
 
+// Status filter tabs — colors aligned with STATUS_META in the shared design system
+// (blue=created, amber=pending, green=delivered, red=cancelled).
+const STATUS_TABS = [
+  { label: 'Created', value: 'created', color: '#3b82f6', icon: MdLocalShipping },
+  { label: 'Pending', value: 'pending', color: '#f59e0b', icon: MdHourglassEmpty },
+  { label: 'Delivered', value: 'delivered', color: '#10b981', icon: MdCheckCircle },
+  { label: 'Cancelled', value: 'cancelled', color: '#ef4444', icon: MdCancel }
+];
+
 const ResponsiveLocationDrawer = () => {
   const loadMoreRef = useRef();
   const containerRef = useRef();
@@ -71,6 +92,14 @@ const ResponsiveLocationDrawer = () => {
   const [searchword, setSearchword] = useState('');
   const [debouncedSearchword, setDebouncedSearchword] = useState('');
 
+  // Per-status counts keyed by tab value, so the filter pills can show a badge.
+  const statusCounts = {
+    created: createdLenght,
+    pending: pendingLenght,
+    delivered: deliveredlenght,
+    cancelled: cancelledLenght
+  };
+
   useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedSearchLocation(searchLocation);
@@ -87,38 +116,11 @@ const ResponsiveLocationDrawer = () => {
     return () => clearTimeout(handler);
   }, [searchword]);
 
-  const statusMap = [
-    {
-      label: 'Created',
-      value: 'created',
-      count: createdLenght,
-      icon: <AccessTimeIcon color="primary" fontSize="small" />
-    },
-    {
-      label: 'Pending',
-      value: 'pending',
-      count: pendingLenght,
-      icon: <LocalShippingOutlinedIcon color="primary" fontSize="small" />
-    },
-    {
-      label: 'Delivered',
-      value: 'delivered',
-      count: deliveredlenght,
-      icon: <CheckCircleOutline color="primary" fontSize="small" />
-    },
-    {
-      label: 'Cancelled',
-      value: 'cancelled',
-      count: cancelledLenght,
-      icon: <CancelOutlined color="primary" fontSize="small" />
-    }
-  ];
-
-  const handleChangetab = (e, i) => {
+  const handleChangetab = (i) => {
     setSearchword('');
     setRowsPerPage(10);
     setTabvalue(i);
-    setCurrentStatus(statusMap[i].value);
+    setCurrentStatus(STATUS_TABS[i].value);
     setPage(0);
   };
 
@@ -138,9 +140,7 @@ const ResponsiveLocationDrawer = () => {
   //     in the visible list, returning nothing and confusing the operator).
   useEffect(() => {
     if (!Array.isArray(locations) || locations.length === 0) return;
-    const stillVisible =
-      selectedLocation &&
-      locations.some((l) => l.locationid === selectedLocation.locationid);
+    const stillVisible = selectedLocation && locations.some((l) => l.locationid === selectedLocation.locationid);
     if (!stillVisible) setSelectedLocation(locations[0]);
   }, [locations]);
 
@@ -177,7 +177,7 @@ const ResponsiveLocationDrawer = () => {
         }
       },
       {
-        root: document.querySelector('.MuiTableContainer-root'), // 👈 or explicitly TableContainer
+        root: document.querySelector('.MuiTableContainer-root'),
         rootMargin: '0px',
         threshold: 1.0
       }
@@ -240,6 +240,139 @@ const ResponsiveLocationDrawer = () => {
     errMessage && console.log(errMessage);
   }, [errMessage]);
 
+  // Brand-styled scrollbar reused on the sidebar + table.
+  const scrollbarSx = {
+    '&::-webkit-scrollbar': { width: 8, height: 8 },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: edge(BRAND),
+      borderRadius: 8,
+      '&:hover': { backgroundColor: BRAND }
+    },
+    '&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
+  };
+
+  // --------------------------------------------------------------------------
+  // Sidebar — searchable location list. Shared between the desktop persistent
+  // drawer and the mobile temporary drawer.
+  // --------------------------------------------------------------------------
+  const sidebarContent = (
+    <Stack sx={{ height: '100%', bgcolor: '#fff' }}>
+      {/* Sidebar header */}
+      <Box sx={{ px: 1.5, pt: 1.5, pb: 1 }}>
+        <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1.25 }}>
+          <Avatar
+            variant="rounded"
+            sx={{ width: 30, height: 30, bgcolor: BRAND, color: '#fff', borderRadius: 1.5, boxShadow: `0 4px 12px ${ring(BRAND)}` }}
+          >
+            <MdStorefront size={16} />
+          </Avatar>
+          <Stack spacing={0}>
+            <Typography sx={{ fontSize: 13.5, fontWeight: 800, color: DT.textPrimary, lineHeight: 1.1 }}>Locations</Typography>
+            <Typography sx={{ fontSize: 10.5, fontWeight: 600, color: DT.textMuted }}>
+              {Array.isArray(locations) ? `${locations.length} active` : '—'}
+            </Typography>
+          </Stack>
+        </Stack>
+
+        {/* Search pill */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.75,
+            px: 1.25,
+            py: 0.75,
+            borderRadius: 999,
+            bgcolor: tint(BRAND),
+            border: `1.5px solid ${edge(BRAND)}`,
+            transition: 'all 0.18s',
+            '&:focus-within': { borderColor: BRAND, boxShadow: `0 0 0 3px ${ring(BRAND)}` }
+          }}
+        >
+          <MdSearch size={16} style={{ color: BRAND, flexShrink: 0 }} />
+          <InputBase
+            placeholder="Search location"
+            value={searchLocation}
+            onChange={(e) => setSearchLocation(e.target.value)}
+            autoComplete="off"
+            sx={{
+              flex: 1,
+              fontSize: 13,
+              fontWeight: 600,
+              color: DT.textPrimary,
+              '& input::placeholder': { color: DT.textMuted, opacity: 1 }
+            }}
+          />
+          {searchLocation && (
+            <IconButton size="small" onClick={() => setSearchLocation('')} sx={{ p: 0.25, color: BRAND }}>
+              <MdClear size={14} />
+            </IconButton>
+          )}
+        </Box>
+      </Box>
+
+      {/* Location list */}
+      <Box sx={{ flex: 1, overflowY: 'auto', px: 1, pb: 1, ...scrollbarSx }}>
+        {locationIsLoading &&
+          Array.from({ length: 8 }).map((_, i) => (
+            <Box key={i} sx={{ px: 1, py: 1 }}>
+              <Skeleton avatar active paragraph={{ rows: 1 }} title={false} />
+            </Box>
+          ))}
+
+        {!locationIsLoading && Array.isArray(locations) && locations.length === 0 && (
+          <Box sx={{ py: 5 }}>
+            <Empty description="No locations" />
+          </Box>
+        )}
+
+        <Stack spacing={0.5}>
+          {locations?.map((row, index) => {
+            const isSelected = row.locationid === selectedLocation?.locationid;
+            return (
+              <ButtonBase
+                key={index}
+                onClick={() => setSelectedLocation(row)}
+                sx={{
+                  width: '100%',
+                  justifyContent: 'flex-start',
+                  textAlign: 'left',
+                  gap: 1,
+                  px: 1,
+                  py: 0.875,
+                  borderRadius: 2,
+                  position: 'relative',
+                  transition: 'background-color 0.14s, box-shadow 0.14s',
+                  bgcolor: isSelected ? tint(BRAND) : 'transparent',
+                  boxShadow: isSelected ? `inset 3px 0 0 ${BRAND}` : 'none',
+                  '&:hover': { bgcolor: isSelected ? tint(BRAND) : DT.surfaceAlt }
+                }}
+              >
+                <AccentAvatar color={BRAND} selected={isSelected} size={36}>
+                  {row.locationname?.[0]?.toUpperCase() || '?'}
+                </AccentAvatar>
+                <Stack spacing={0} sx={{ minWidth: 0, flex: 1 }}>
+                  <Typography
+                    sx={{ fontSize: 13, fontWeight: 700, color: isSelected ? BRAND : DT.textPrimary, lineHeight: 1.2 }}
+                    noWrap
+                  >
+                    {row.locationname}
+                  </Typography>
+                  <Stack direction="row" alignItems="center" spacing={0.375}>
+                    <MdPlace size={11} style={{ color: DT.textMuted, flexShrink: 0 }} />
+                    <Typography sx={{ fontSize: 11, fontWeight: 600, color: DT.textSecondary }} noWrap>
+                      {row.suburb || '—'}
+                    </Typography>
+                  </Stack>
+                </Stack>
+              </ButtonBase>
+            );
+          })}
+        </Stack>
+      </Box>
+    </Stack>
+  );
+
   return (
     <React.Fragment>
       {locationIsLoading && (
@@ -248,9 +381,8 @@ const ResponsiveLocationDrawer = () => {
         </>
       )}
 
-      <Box sx={{ display: 'flex', width: '100%', height: '100%', position: 'relative' }}>
-        {/* ---------------- LOCAL DRAWER ---------------- */}
-
+      <Box sx={{ display: 'flex', width: '100%', height: '100%', position: 'relative', bgcolor: DT.surfaceAlt }}>
+        {/* ---------------- LOCATION SIDEBAR ---------------- */}
         <Drawer
           variant={isDesktop ? 'persistent' : 'temporary'}
           open={open}
@@ -264,246 +396,252 @@ const ResponsiveLocationDrawer = () => {
               left: 0,
               top: 0,
               height: '100%',
-              overflowY: 'auto',
+              overflow: 'hidden',
+              borderRight: `1px solid ${DT.borderSubtle}`,
               transition: 'transform 0.35s ease-in-out',
-              zIndex: 10,
-
-              /* vertical scrollbar */
-              '&::-webkit-scrollbar:vertical': {
-                width: '7px',
-                opacity: 0,
-                transition: 'opacity 0.3s'
-              },
-
-              /* horizontal scrollbar */
-              '&::-webkit-scrollbar:horizontal': {
-                height: '6px', // thinner horizontal bar
-                opacity: 0,
-                transition: 'opacity 0.3s'
-              },
-
-              /* show scrollbar when hovering drawer */
-              '&:hover::-webkit-scrollbar': {
-                opacity: 1
-              },
-
-              /* thumb styling */
-              '&::-webkit-scrollbar-thumb': {
-                backgroundColor: theme.palette.primary.main,
-                borderRadius: '8px'
-              },
-              '&::-webkit-scrollbar-thumb:hover': {
-                backgroundColor: theme.palette.primary.dark
-              },
-
-              /* track styling */
-              '&::-webkit-scrollbar-track': {
-                backgroundColor: theme.palette.primary.lighter
-              }
+              zIndex: 10
             }
           }}
         >
-          <Box sx={{ position: 'sticky', top: 0, zIndex: 11, border: 'none' }}>
-            <SearchBar
-              value={searchLocation}
-              placeholder="Search Location"
-              onChange={(e) => setSearchLocation(e.target.value)}
-              sx={{
-                width: 'auto',
-                height: 60,
-                bgcolor: 'white',
-
-                '& .MuiOutlinedInput-notchedOutline': {
-                  border: 'none',
-                  borderBottom: '1px solid',
-                  borderColor: theme.palette.secondary.light
-                }
-              }}
-            />
-          </Box>
-          <List sx={{ border: 'none', mt: -1 }}>
-            {locations?.map((row, index) => (
-              <React.Fragment key={index}>
-                <ListItem
-                  sx={{
-                    cursor: 'pointer',
-                    bgcolor: row.locationid == selectedLocation?.locationid ? theme.palette.secondary[200] : 'none',
-                    '&:hover': {
-                      bgcolor: theme.palette.secondary.lighter
-                    }
-                  }}
-                  onClick={() => {
-                    setSelectedLocation(row);
-                  }}
-                >
-                  <ListItemAvatar>
-                    <Avatar
-                      sx={{
-                        bgcolor: 'primary.main', // background color
-                        color: 'white' // text color
-                      }}
-                    >
-                      {row.locationname?.[0]?.toUpperCase() || '?'}
-                    </Avatar>{' '}
-                  </ListItemAvatar>
-                  <ListItemText primary={row.locationname} secondary={row.suburb} />
-                </ListItem>
-                <Divider />
-              </React.Fragment>
-            ))}
-          </List>
+          {sidebarContent}
         </Drawer>
-        {/* -------------- LOCAL PAGE APPBAR -------------- */}
-        <AppBar
-          elevation={0}
-          position="absolute"
-          sx={{
-            top: 0,
-            left: open && isDesktop ? `${drawerWidth}px` : 0,
-            width: open && isDesktop ? `calc(100% - ${drawerWidth}px)` : '100%',
-            transition: 'left 0.3s ease, width 0.3s ease',
-            zIndex: 1100, // BELOW drawer, ABOVE content
-            backgroundColor: 'white',
-            borderBottom: '1px solid',
-            borderColor: theme.palette.secondary.light
-          }}
-        >
-          <Toolbar>
-            <Stack
-              sx={{ width: '100%', borderBottom: '1px soild red' }}
-              display={'flex'}
-              flexDirection={'row'}
-              alignItems={'center'}
-              justifyContent={'space-between'}
-              flexWrap={'wrap'}
-            >
-              <Stack display={'flex'} flexDirection={'row'} alignItems={'center'}>
-                <IconButton color="primary" onClick={toggleDrawer} sx={{ mr: 1 }}>
-                  <MenuIcon />
-                </IconButton>
 
-                <Typography variant="h5" color={'primary'} sx={{ whiteSpace: 'nowrap', ml: 2 }}>
-                  {selectedLocation?.locationname}
-                </Typography>
-              </Stack>
-              <Stack>
-                <SearchBar
-                  value={searchword}
-                  placeholder={'Search Order Details'}
-                  onChange={(e) => setSearchword(e.target.value)}
-                  sx={{
-                    width: 'auto',
-                    height: 40,
-                    bgcolor: 'white',
-                    maxWidth: 800,
-                    borderRadius: 1
-                    // '& .MuiOutlinedInput-notchedOutline': {
-                    //   border: 'none'
-                    // }
-                  }}
-                />
-              </Stack>
-            </Stack>
-          </Toolbar>
-        </AppBar>
-        {/* ---------------- PAGE SCROLLABLE CONTENT ---------------- */}
+        {/* ---------------- MAIN PANEL ---------------- */}
         <Box
           sx={{
             flexGrow: 1,
-            overflow: 'auto',
-            pt: '64px', // Height of AppBar
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
             pl: isDesktop && open ? `${drawerWidth}px` : 0,
-            transition: 'padding-left 0.3s ease',
-            mt: -1
+            transition: 'padding-left 0.3s ease'
+          }}
+        >
+          {/* ---------------- GRADIENT HEADER ---------------- */}
+          <Paper
+            elevation={0}
+            sx={{
+              flexShrink: 0,
+              px: { xs: 1.25, sm: 1.75 },
+              py: { xs: 1, sm: 1.25 },
+              borderRadius: 0,
+              borderBottom: `1px solid ${DT.borderSubtle}`,
+              background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`
             }}
           >
             <Stack
-            display={'flex'}
-            flexDirection={'row'}
-            justifyContent={'space-between'}
-            alignItems={'center'}
-            flexWrap={'wrap-reverse'}
-            gap={2}
+              direction={{ xs: 'column', md: 'row' }}
+              alignItems={{ xs: 'stretch', md: 'center' }}
+              justifyContent="space-between"
+              spacing={{ xs: 1, md: 1.5 }}
+            >
+              <Stack direction="row" alignItems="center" spacing={1.25}>
+                <Tooltip title={open ? 'Hide locations' : 'Show locations'} arrow>
+                  <IconButton
+                    onClick={toggleDrawer}
                     sx={{
-              border: '1px solid ',
-              borderBottom: 0,
-              borderColor: 'bg.main',
-              p: 1.5
+                      width: 34,
+                      height: 34,
+                      borderRadius: 1.5,
+                      bgcolor: '#fff',
+                      border: `1px solid ${DT.borderSubtle}`,
+                      color: BRAND,
+                      '&:hover': { bgcolor: tint(BRAND), borderColor: BRAND }
                     }}
                   >
-            {/* Tabs Wrapper */}
+                    <MdMenu size={18} />
+                  </IconButton>
+                </Tooltip>
 
-            <Tabs value={tabvalue} onChange={handleChangetab} variant="scrollable" scrollButtons="auto" allowScrollButtonsMobile>
-              {statusMap.map((item, index) => (
-                <Tab
-                  key={index}
-                  label={
-                    <Stack direction="row" alignItems="center" spacing={1}>
-                      {item.icon}
-                      <span>{item.label}</span>
-                      <Chip label={item.count} color="primary" variant="light" size="small" />
-                    </Stack>
-                  }
-                />
-              ))}
-            </Tabs>
-          </Stack>
-          <MainCard
-            content={false}
+                <Avatar
+                  variant="rounded"
+                  sx={{ width: 36, height: 36, bgcolor: BRAND, color: '#fff', borderRadius: 1.5, boxShadow: `0 4px 12px ${ring(BRAND)}` }}
+                >
+                  <MdMyLocation size={19} />
+                </Avatar>
+                <Stack spacing={0.125}>
+                  <Typography
+                    variant="h3"
+                    sx={{
+                      fontWeight: 800,
+                      color: DT.textPrimary,
+                      lineHeight: 1.1,
+                      fontSize: { xs: '1.05rem', sm: '1.2rem', md: '1.3rem' }
+                    }}
+                    noWrap
+                  >
+                    {selectedLocation?.locationname || 'Select a location'}
+                  </Typography>
+                  <Stack direction="row" alignItems="center" spacing={0.75}>
+                    <Box sx={{ width: 7, height: 7, borderRadius: '50%', bgcolor: '#10b981', boxShadow: '0 0 0 3px rgba(16,185,129,0.18)' }} />
+                    <Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 600 }} noWrap>
+                      {selectedLocation?.suburb ? `${selectedLocation.suburb} · ` : ''}Live · {dayjs(startdate).format('DD MMM YYYY')}
+                    </Typography>
+                  </Stack>
+                </Stack>
+              </Stack>
+
+              {/* Order search pill */}
+              <Box
                 sx={{
-              overflow: 'hidden',
-              height: 'calc(100vh - 200px)', // adjust as needed
                   display: 'flex',
-              flexDirection: 'column'
+                  alignItems: 'center',
+                  gap: 0.75,
+                  px: 1.25,
+                  py: 0.75,
+                  borderRadius: 999,
+                  bgcolor: '#fff',
+                  border: `1.5px solid ${edge(BRAND)}`,
+                  minWidth: { xs: '100%', md: 280 },
+                  maxWidth: { md: 360 },
+                  transition: 'all 0.18s',
+                  '&:focus-within': { borderColor: BRAND, boxShadow: `0 0 0 3px ${ring(BRAND)}` }
+                }}
+              >
+                <MdSearch size={16} style={{ color: BRAND, flexShrink: 0 }} />
+                <InputBase
+                  placeholder="Search order details"
+                  value={searchword}
+                  onChange={(e) => setSearchword(e.target.value)}
+                  autoComplete="off"
+                  sx={{
+                    flex: 1,
+                    fontSize: 13,
+                    fontWeight: 600,
+                    color: DT.textPrimary,
+                    '& input::placeholder': { color: DT.textMuted, opacity: 1 }
+                  }}
+                />
+                {searchword && (
+                  <IconButton size="small" onClick={() => setSearchword('')} sx={{ p: 0.25, color: BRAND }}>
+                    <MdClear size={14} />
+                  </IconButton>
+                )}
+              </Box>
+            </Stack>
+          </Paper>
+
+          {/* ---------------- STATUS FILTER PILLS ---------------- */}
+          <Box
+            sx={{
+              flexShrink: 0,
+              px: { xs: 1, sm: 1.5 },
+              py: 1,
+              bgcolor: '#fff',
+              borderBottom: `1px solid ${DT.borderSubtle}`,
+              display: 'flex',
+              gap: 0.75,
+              overflowX: 'auto',
+              ...scrollbarSx
+            }}
+          >
+            {STATUS_TABS.map((item, index) => {
+              const isActive = tabvalue === index;
+              const Icon = item.icon;
+              const count = statusCounts[item.value];
+              return (
+                <ButtonBase
+                  key={index}
+                  onClick={() => handleChangetab(index)}
+                  sx={{
+                    flexShrink: 0,
+                    gap: 0.75,
+                    px: 1.25,
+                    py: 0.625,
+                    borderRadius: 999,
+                    fontWeight: 700,
+                    transition: 'all 0.15s',
+                    border: `1.5px solid ${isActive ? item.color : DT.borderSubtle}`,
+                    bgcolor: isActive ? item.color : '#fff',
+                    color: isActive ? '#fff' : DT.textSecondary,
+                    boxShadow: isActive ? `0 4px 12px ${ring(item.color)}` : 'none',
+                    '&:hover': {
+                      borderColor: item.color,
+                      color: isActive ? '#fff' : item.color,
+                      bgcolor: isActive ? item.color : tint(item.color)
+                    }
+                  }}
+                >
+                  <Icon size={14} />
+                  <Typography sx={{ fontSize: 12.5, fontWeight: 700, lineHeight: 1 }}>{item.label}</Typography>
+                  <Box
+                    sx={{
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      minWidth: 20,
+                      height: 18,
+                      px: 0.625,
+                      borderRadius: 999,
+                      fontSize: 10.5,
+                      fontWeight: 800,
+                      bgcolor: isActive ? 'rgba(255,255,255,0.25)' : soft(item.color),
+                      color: isActive ? '#fff' : item.color
+                    }}
+                  >
+                    {count ?? 0}
+                  </Box>
+                </ButtonBase>
+              );
+            })}
+          </Box>
+
+          {/* ---------------- ORDERS TABLE ---------------- */}
+          <Box sx={{ flex: 1, overflow: 'hidden', p: { xs: 1, sm: 1.5 } }}>
+            <Paper
+              elevation={0}
+              sx={{
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                borderRadius: 2,
+                border: `1px solid ${DT.borderSubtle}`,
+                overflow: 'hidden',
+                background: '#fff',
+                boxShadow: DT.shadowSoft
               }}
             >
-            <Fragment>
-              {/* Scrollable table container */}
               <TableContainer
                 onScroll={handleScroll}
                 ref={containerRef}
+                sx={{ flex: 1, overflow: 'auto', ...scrollbarSx }}
+              >
+                <Table stickyHeader size="small">
+                  <TableHead>
+                    <TableRow
                       sx={{
-                  width: '100%',
-                  flex: 1,
-                  overflow: 'auto',
-                  borderBottom: 1,
-                  maxHeight: 'calc(100vh - 225px)',
-                  borderColor: 'divider',
-                  '&::-webkit-scrollbar': { width: '12px' },
-                  '&::-webkit-scrollbar-thumb': {
-                    backgroundColor: theme.palette.primary.main,
-                    borderRadius: '8px'
-                  },
-                  '&::-webkit-scrollbar-thumb:hover': {
-                    backgroundColor: theme.palette.primary.dark
-                  },
-                  '&::-webkit-scrollbar-track': {
-                    backgroundColor: theme.palette.primary.lighter
+                        '& th': {
+                          backgroundColor: DT.surfaceAlt,
+                          color: DT.textSecondary,
+                          fontSize: 10.5,
+                          fontWeight: 800,
+                          letterSpacing: 0.5,
+                          textTransform: 'uppercase',
+                          whiteSpace: 'nowrap',
+                          borderBottom: `1px solid ${DT.borderSubtle}`,
+                          py: 0.75,
+                          px: 1
                         }
                       }}
                     >
-                <Table stickyHeader>
-                  {/* HEADER */}
-                  <TableHead>
-                    <TableRow>
-                      <TableCell sx={{ backgroundColor: theme.palette.secondary.light, position: 'sticky !important' }}>S.No</TableCell>
-                      <TableCell sx={{ backgroundColor: theme.palette.secondary.light, position: 'sticky !important' }}>Orders</TableCell>
-                      <TableCell sx={{ backgroundColor: theme.palette.secondary.light, position: 'sticky !important' }}>Pickup</TableCell>
-                      <TableCell sx={{ backgroundColor: theme.palette.secondary.light, position: 'sticky !important' }}>Drop</TableCell>
-                      <TableCell sx={{ backgroundColor: theme.palette.secondary.light, position: 'sticky !important' }}>Notes</TableCell>
-                      <TableCell sx={{ backgroundColor: theme.palette.secondary.light, position: 'sticky !important' }}>Status</TableCell>
+                      <TableCell sx={{ width: 36 }}>#</TableCell>
+                      <TableCell sx={{ minWidth: 150 }}>Order</TableCell>
+                      <TableCell sx={{ minWidth: 150 }}>Pickup</TableCell>
+                      <TableCell sx={{ minWidth: 150 }}>Drop</TableCell>
+                      <TableCell sx={{ minWidth: 140 }}>Notes</TableCell>
+                      <TableCell sx={{ width: 120 }}>Status</TableCell>
                     </TableRow>
                   </TableHead>
 
-                  {/* BODY */}
                   <TableBody>
                     {/* LOADING STATE */}
                     {loading &&
-                      [...Array(10)].map((_, index) => (
+                      Array.from({ length: 10 }).map((_, index) => (
                         <TableRow key={index}>
-                          {[...Array(6)].map((__, i) => (
-                            <TableCell key={i}>
-                              <Skeleton animation="wave" />
+                          {Array.from({ length: 6 }).map((__, i) => (
+                            <TableCell key={i} sx={{ borderBottom: `1px solid ${DT.divider}`, py: 0.625, px: 1 }}>
+                              <Skeleton.Input active size="small" style={{ width: '100%', height: 18 }} />
                             </TableCell>
                           ))}
                         </TableRow>
@@ -512,8 +650,16 @@ const ResponsiveLocationDrawer = () => {
                     {/* EMPTY STATE */}
                     {!loading && rows?.length === 0 && (
                       <TableRow>
-                        <TableCell colSpan={6} sx={{ minWidth: '100%', height: 500 }} align="center">
-                          <Empty description={'No Orders'} />
+                        <TableCell colSpan={6} sx={{ py: 7, borderBottom: 'none' }}>
+                          <Stack alignItems="center" spacing={1.25}>
+                            <Avatar variant="rounded" sx={{ width: 56, height: 56, bgcolor: soft('#94a3b8'), color: DT.textMuted, borderRadius: 2 }}>
+                              <MdReceiptLong size={26} />
+                            </Avatar>
+                            <Typography sx={{ fontWeight: 700, color: DT.textPrimary, fontSize: 14 }}>No orders found</Typography>
+                            <Typography sx={{ color: DT.textSecondary, fontSize: 12 }}>
+                              {searchword ? 'Try a different keyword or clear the search.' : 'No orders in this status for the selected location.'}
+                            </Typography>
+                          </Stack>
                         </TableCell>
                       </TableRow>
                     )}
@@ -521,83 +667,101 @@ const ResponsiveLocationDrawer = () => {
                     {/* DATA ROWS */}
                     {!loading &&
                       rows?.map((row, index) => (
-                        <TableRow key={index} sx={{ cursor: 'pointer' }}>
-                          <TableCell>{page * rowsPerPage + index + 1}</TableCell>
+                        <TableRow
+                          key={index}
+                          sx={{
+                            cursor: 'pointer',
+                            transition: 'background-color 0.12s, box-shadow 0.12s',
+                            '& td': { borderBottom: `1px solid ${DT.divider}`, py: 0.75, px: 1, verticalAlign: 'top' },
+                            '&:hover': { backgroundColor: tint(BRAND), boxShadow: `inset 3px 0 0 ${BRAND}` }
+                          }}
+                        >
+                          <TableCell>
+                            <Typography sx={{ fontWeight: 700, fontSize: 12, color: DT.textMuted }}>{page * rowsPerPage + index + 1}</Typography>
+                          </TableCell>
 
                           {/* Order Info */}
                           <TableCell>
-                            <Typography variant="body2" noWrap>
+                            <Typography sx={{ fontSize: 12.5, fontWeight: 700, color: DT.textPrimary, lineHeight: 1.25 }} noWrap>
                               {row.orderid}
                             </Typography>
-                            <Typography variant="caption" noWrap>
-                              {dayjs(row.deliverydate).utc().format('DD/MM/YYYY')}
-                            </Typography>
-                            <Typography variant="caption" noWrap>
+                            <Stack direction="row" alignItems="center" spacing={0.5} sx={{ mt: 0.125 }}>
+                              <MdAccessTime size={10} style={{ color: DT.textMuted, flexShrink: 0 }} />
+                              <Typography sx={{ fontSize: 10.5, color: DT.textSecondary, fontWeight: 700 }} noWrap>
                                 {dayjs(row.deliverydate).utc().format('hh:mm A')}
                               </Typography>
+                              <Typography sx={{ fontSize: 10.5, color: DT.textMuted, fontWeight: 600 }} noWrap>
+                                · {dayjs(row.deliverydate).utc().format('DD MMM YY')}
+                              </Typography>
+                            </Stack>
                           </TableCell>
 
                           {/* Pickup */}
                           <TableCell>
-                            <Stack direction="row" spacing={1}>
-                              <Avatar sx={{ width: 25, height: 25 }} />
-                              <Stack>
-                                <Typography variant="caption">{row.pickupcustomer}</Typography>
-                                <Typography variant="caption">{row.pickupcontactno}</Typography>
+                            <Stack spacing={0.125}>
+                              <Typography sx={{ fontSize: 12.5, fontWeight: 700, color: DT.textPrimary, lineHeight: 1.25 }} noWrap>
+                                {row.pickupcustomer || '—'}
+                              </Typography>
+                              <Typography sx={{ fontSize: 11, color: DT.textSecondary, fontWeight: 600, lineHeight: 1.3 }} noWrap>
+                                {row.pickupcontactno}
+                              </Typography>
                               <Tooltip title={row.pickupaddress || ''}>
-                                  <Typography variant="caption">{row.pickupsuburb || row.pickupaddress?.slice(0, 20) || '—'}</Typography>
+                                <Typography sx={{ fontSize: 10.5, color: DT.textMuted, fontWeight: 600, lineHeight: 1.3 }} noWrap>
+                                  {row.pickupsuburb || (row.pickupaddress ? `${row.pickupaddress.slice(0, 20)}…` : '—')}
+                                </Typography>
                               </Tooltip>
                             </Stack>
-                            </Stack>
                           </TableCell>
 
                           {/* Drop */}
                           <TableCell>
-                            <Stack direction="row" spacing={1}>
-                              <Avatar sx={{ width: 25, height: 25 }} />
-                              <Stack>
-                                <Typography variant="caption">{row.deliverycustomer}</Typography>
-                                <Typography variant="caption">{row.deliverycontactno}</Typography>
+                            <Stack spacing={0.125}>
+                              <Typography sx={{ fontSize: 12.5, fontWeight: 700, color: DT.textPrimary, lineHeight: 1.25 }} noWrap>
+                                {row.deliverycustomer || '—'}
+                              </Typography>
+                              <Typography sx={{ fontSize: 11, color: DT.textSecondary, fontWeight: 600, lineHeight: 1.3 }} noWrap>
+                                {row.deliverycontactno}
+                              </Typography>
                               <Tooltip title={row.deliveryaddress || ''}>
-                                  <Typography variant="caption">{row.deliverysuburb || row.deliveryaddress?.slice(0, 20) || '—'}</Typography>
+                                <Typography sx={{ fontSize: 10.5, color: DT.textMuted, fontWeight: 600, lineHeight: 1.3 }} noWrap>
+                                  {row.deliverysuburb || (row.deliveryaddress ? `${row.deliveryaddress.slice(0, 20)}…` : '—')}
+                                </Typography>
                               </Tooltip>
                             </Stack>
-                            </Stack>
                           </TableCell>
 
                           {/* Notes */}
-                          <TableCell>{row.ordernotes}</TableCell>
+                          <TableCell>
+                            <Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 600, lineHeight: 1.35 }}>
+                              {row.ordernotes || '—'}
+                            </Typography>
+                          </TableCell>
 
                           {/* Status */}
                           <TableCell>
-                            <Stack direction="row" spacing={1}>
-                              {row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
-                              {row.orderstatus === 'confirmed' && <Chip label="Confirmed" color="success" size="small" />}
-                              {row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
-                              {row.orderstatus === 'delivered' && <Chip label="Completed" color="primary" size="small" />}
-                              {row.orderstatus === 'processing' && <Chip label="Processing" color="primary" size="small" />}
-                              {row.orderstatus === 'ready' && <Chip label="Accepted" color="info" size="small" />}
-                              {row.orderstatus === 'active' && <Chip label="Picked" color="info" size="small" />}
-                              {row.orderstatus === 'closed' && <Chip label="Closed" color="info" size="small" />}
-                              {row.orderstatus === 'created' && <Chip label="Created" color="secondary" size="small" />}
-                            </Stack>
+                            <StatusBadge status={row.orderstatus} />
                           </TableCell>
                         </TableRow>
                       ))}
+
                     {rows?.length != 0 && (
                       <TableRow>
-                        <TableCell colSpan={6} rowSpan={3}>
-                          <div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
-                            {isFetchingNextPage ? <CircularProgress /> : hasNextPage ? <CircularProgress /> : 'No More Orders'}
-                          </div>
+                        <TableCell colSpan={6} sx={{ borderBottom: 'none' }}>
+                          <Stack ref={loadMoreRef} alignItems="center" justifyContent="center" sx={{ height: 40 }}>
+                            {isFetchingNextPage || hasNextPage ? (
+                              <CircularProgress size={20} sx={{ color: BRAND }} />
+                            ) : (
+                              <Typography sx={{ fontSize: 11.5, fontWeight: 700, color: DT.textMuted }}>No more orders</Typography>
+                            )}
+                          </Stack>
                         </TableCell>
                       </TableRow>
                     )}
                   </TableBody>
                 </Table>
               </TableContainer>
-            </Fragment>
-          </MainCard>
+            </Paper>
+          </Box>
         </Box>
       </Box>
     </React.Fragment>

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),
-        border: `1px solid ${edge(meta.color)}`,
-        color: meta.color,
+        bgcolor: meta.color,
+        color: '#fff',
         fontSize: 11,
-        fontWeight: 800,
-        whiteSpace: 'nowrap'
+        fontWeight: 700,
+        letterSpacing: 0.2,
+        whiteSpace: 'nowrap',
+        minWidth: 86,
+        justifyContent: 'center',
+        boxShadow: `0 1px 2px ${ring(meta.color)}`
       }}
     >
       <Icon size={12} /> {meta.label}
@@ -335,9 +343,11 @@ const Orders = () => {
         }
       },
       {
-        root: document.querySelector('.MuiTableContainer-root'),
-        rootMargin: '0px',
-        threshold: 1.0
+        // The page (viewport) is now the scroll container, not the table.
+        // Prefetch the next page ~400px before the sentinel reaches the bottom.
+        root: null,
+        rootMargin: '0px 0px 400px 0px',
+        threshold: 0
       }
     );
     if (loadMoreRef.current) observer.observe(loadMoreRef.current);
@@ -445,13 +455,14 @@ const Orders = () => {
         </>
       )}
 
-      {/* ============================================= || Header || ============================================= */}
+      {/* ============================================= || Header (compact) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mb: { xs: 1.5, md: 2 },
-          p: { xs: 1.5, sm: 2, md: 2.5 },
-          borderRadius: DT.radiusCard / 8,
+          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%)`,
@@ -462,43 +473,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 },
-                height: { xs: 40, sm: 48 },
+                width: 36,
+                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,
-                    height: 8,
+                    width: 7,
+                    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 +576,8 @@ const Orders = () => {
         </Stack>
       </Paper>
 
-      {/* ============================================= || KPI Cards || ============================================= */}
-      <Grid container spacing={{ xs: 1.25, sm: 1.5, md: 2 }}>
+      {/* ============================================= || KPI Cards (compact) || ============================================= */}
+      <Grid container spacing={{ xs: 1, sm: 1.25, md: 1.5 }}>
         {kpiCards.map((item) => {
           const Icon = item.icon;
           return (
@@ -574,14 +587,15 @@ const Orders = () => {
                 sx={{
                   position: 'relative',
                   overflow: 'hidden',
-                  p: { xs: 1.25, sm: 1.75, md: 2.25 },
-                  borderRadius: DT.radiusCard / 8,
+                  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.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 +606,59 @@ const Orders = () => {
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    right: 0,
-                    height: 3,
-                    background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
+                    bottom: 0,
+                    width: 3,
+                    background: item.color
                   }}
                 />
-                <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
-                  <Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
+                <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1} sx={{ pl: 0.5 }}>
+                  <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,
-                        fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
+                          lineHeight: 1.15,
+                          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 && (
-                      <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 700 }}>
+                      {item.percentage != null && item.value !== '' && (
+                        <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 },
-                      height: { xs: 36, sm: 42, md: 48 },
+                      width: 30,
+                      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 +667,13 @@ const Orders = () => {
         })}
       </Grid>
 
-      {/* ============================================= || Filter Bar || ============================================= */}
+      {/* ============================================= || Filter Bar (compact) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mt: { xs: 1.5, md: 2 },
-          p: { xs: 1.25, md: 1.75 },
-          borderRadius: DT.radiusCard / 8,
+          mt: { xs: 1, md: 1.25 },
+          p: { xs: 1, md: 1.125 },
+          borderRadius: 2,
           border: '1px solid',
           borderColor: DT.borderSubtle,
           background: '#fff',
@@ -751,14 +769,14 @@ const Orders = () => {
         </Stack>
       </Paper>
 
-      {/* ============================================= || Status Tabs + Search || ============================================= */}
+      {/* ============================================= || Status Tabs + Search (compact) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
-          mt: { xs: 1.5, md: 2 },
-          p: { xs: 1, md: 1.5 },
-          borderTopLeftRadius: DT.radiusCard / 8,
-          borderTopRightRadius: DT.radiusCard / 8,
+          mt: { xs: 1, md: 1.25 },
+          p: { xs: 0.875, md: 1.125 },
+          borderTopLeftRadius: 2,
+          borderTopRightRadius: 2,
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0,
           border: '1px solid',
@@ -903,14 +921,14 @@ const Orders = () => {
         </Stack>
       </Paper>
 
-      {/* ============================================= || Table || ============================================= */}
+      {/* ============================================= || Table (dense, sticky header) || ============================================= */}
       <Paper
         elevation={0}
         sx={{
           borderTopLeftRadius: 0,
           borderTopRightRadius: 0,
-          borderBottomLeftRadius: DT.radiusCard / 8,
-          borderBottomRightRadius: DT.radiusCard / 8,
+          borderBottomLeftRadius: 2,
+          borderBottomRightRadius: 2,
           border: '1px solid',
           borderColor: DT.borderSubtle,
           overflow: 'hidden',
@@ -921,8 +939,12 @@ const Orders = () => {
           onScroll={handleScroll}
           ref={containerRef}
           sx={{
-            maxHeight: { xs: 'calc(100vh - 220px)', md: 'calc(100vh - 190px)' },
-            overflow: 'auto',
+            // Single page scroll: the table is NOT height-capped, so it renders at its
+            // full height and the whole page scrolls as one. Scrolling down moves the
+            // KPI cards + header + filter bar off-screen and reveals the full table.
+            // Only horizontal overflow scrolls inside the container (for wide column sets).
+            overflowX: 'auto',
+            overflowY: 'visible',
             '&::-webkit-scrollbar': { width: 10, height: 10 },
             '&::-webkit-scrollbar-thumb': {
               backgroundColor: edge(BRAND),
@@ -932,21 +954,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 },
-                    px: { xs: 1, md: 1.5 }
+                    py: 0.75,
+                    px: 1
                   }
                 }}
               >
@@ -967,11 +989,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}` }}>
-                        <Skeleton animation="wave" />
+                      <TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}`, py: 0.625, px: 1 }}>
+                        <Skeleton animation="wave" height={20} />
                       </TableCell>
                     ))}
                   </TableRow>
@@ -979,17 +1001,45 @@ const Orders = () => {
 
               {!isLoadingGetOrders && rows.length === 0 && (
                 <TableRow>
-                  <TableCell colSpan={currentStatus === 'created' ? 11 : 10} sx={{ py: 6, borderBottom: 'none' }}>
-                    <Stack alignItems="center" spacing={1.5}>
-                      <Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
-                        <MdLocalShipping size={28} />
+                  <TableCell colSpan={currentStatus === 'created' ? 11 : 10} sx={{ py: 7, borderBottom: 'none' }}>
+                    <Stack alignItems="center" spacing={1.25}>
+                      <Avatar
+                        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 }}>
-                        {searchword ? 'Try a different keyword.' : 'Adjust the filters above to load orders.'}
+                      <Typography sx={{ color: DT.textSecondary, fontSize: 12 }}>
+                        {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 +1050,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 },
-                      px: { xs: 1, md: 1.5 }
+                      py: 0.5,
+                      px: 1,
+                      verticalAlign: 'top'
                     },
-                    '&:hover': { backgroundColor: DT.surfaceAlt }
+                    '&:hover': {
+                      backgroundColor: tint(BRAND),
+                      boxShadow: `inset 3px 0 0 ${BRAND}`
+                    }
                   }}
                 >
                   <TableCell>
@@ -1025,10 +1079,13 @@ const Orders = () => {
                         {row.orderid}
                       </Typography>
                     </Tooltip>
-                    <Stack direction="row" spacing={0.75} alignItems="center" sx={{ mt: 0.25 }}>
-                      <MdAccessTime size={11} style={{ color: DT.textMuted }} />
-                      <Typography sx={{ fontSize: 11, color: DT.textSecondary, fontWeight: 600 }} noWrap>
-                        {dayjs(row.pickupslot).format('DD/MM/YYYY')} · {dayjs(row.pickupslot).format('hh:mm A')}
+                    <Stack direction="row" spacing={0.5} alignItems="center" sx={{ mt: 0.125 }}>
+                      <MdAccessTime size={10} style={{ color: DT.textMuted, flexShrink: 0 }} />
+                      <Typography sx={{ fontSize: 10.5, color: DT.textSecondary, fontWeight: 700 }} noWrap>
+                        {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 +1200,29 @@ const Orders = () => {
               ))}
 
               {rows.length !== 0 && (
-                <TableRow>
-                  <TableCell colSpan={15} rowSpan={3} sx={{ borderBottom: 'none' }}>
-                    <div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
-                      {isFetchingNextPage ? (
-                        <CircularProgress size={20} sx={{ color: BRAND }} />
-                      ) : hasNextPage ? (
-                        <CircularProgress size={20} sx={{ color: BRAND }} />
+                <TableRow sx={{ '&:hover': { backgroundColor: 'transparent !important' } }}>
+                  <TableCell colSpan={currentStatus === 'created' ? 11 : 10} sx={{ borderBottom: 'none', py: 1, bgcolor: DT.surfaceAlt }}>
+                    <Stack
+                      ref={loadMoreRef}
+                      direction="row"
+                      alignItems="center"
+                      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 }}>
-                          No more orders
+                        <Typography sx={{ fontSize: 11.5, color: DT.textMuted, fontWeight: 700, letterSpacing: 0.3 }}>
+                          {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 },
-          p: { xs: 1.5, sm: 2, md: 2.5 },
-          borderRadius: DT.radiusCard / 8,
+          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%)`,
@@ -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 },
-                height: { xs: 40, sm: 48 },
+                width: 36,
+                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,
-                    height: 8,
+                    width: 7,
+                    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,
-                py: 0.875,
+                  px: 1.25,
+                  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',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    height: 3,
-                    background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
-                  }}
-                />
-                <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
-                  <Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
-                    <Typography
-                      variant="caption"
-                      sx={{
-                        color: DT.textSecondary,
-                        fontWeight: 700,
-                        letterSpacing: 0.4,
-                        textTransform: 'uppercase',
-                        fontSize: { xs: 10, sm: 11 },
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis'
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 0.5,
+                px: 1,
+                py: 0.5,
+                borderRadius: 999,
+                bgcolor: tint(BRAND),
+                border: `1px solid ${edge(BRAND)}`,
+                color: BRAND,
+                fontSize: 11,
+                fontWeight: 800
               }}
             >
-                      {item.label}
-                    </Typography>
-                    <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>
+              <MdReceiptLong size={12} /> {datestatus}
+            </Box>
           </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,
@@ -669,11 +694,67 @@ export default function OrdersReport() {
                 <TableCell rowSpan={2}>#</TableCell>
                 <TableCell rowSpan={2}>Location</TableCell>
                 <TableCell rowSpan={2} align="center">All</TableCell>
-                <TableCell colSpan={3} align="center" sx={{ color: `${C_ORDERS} !important`, bgcolor: `${tint(C_ORDERS)} !important` }}>
+                <TableCell
+                  colSpan={3}
+                  align="center"
+                  sx={{
+                    bgcolor: `${soft(C_ORDERS)} !important`,
+                    borderLeft: `2px solid ${edge(C_ORDERS)} !important`,
+                    borderRight: `2px solid ${edge(C_ORDERS)} !important`,
+                    py: '6px !important'
+                  }}
+                >
+                  <Stack direction="row" alignItems="center" justifyContent="center" spacing={0.75}>
+                    <Box
+                      sx={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: 20,
+                        height: 20,
+                        borderRadius: 999,
+                        bgcolor: C_ORDERS,
+                        color: '#fff',
+                        boxShadow: `0 4px 10px ${ring(C_ORDERS)}`
+                      }}
+                    >
+                      <MdInventory2 size={12} />
+                    </Box>
+                    <Typography sx={{ fontWeight: 900, fontSize: 12, letterSpacing: 1, color: C_ORDERS }}>
                       Orders
+                    </Typography>
+                  </Stack>
                 </TableCell>
-                <TableCell colSpan={3} align="center" sx={{ color: `${C_DELIVERIES} !important`, bgcolor: `${tint(C_DELIVERIES)} !important` }}>
+                <TableCell
+                  colSpan={3}
+                  align="center"
+                  sx={{
+                    bgcolor: `${soft(C_DELIVERIES)} !important`,
+                    borderLeft: `2px solid ${edge(C_DELIVERIES)} !important`,
+                    borderRight: `2px solid ${edge(C_DELIVERIES)} !important`,
+                    py: '6px !important'
+                  }}
+                >
+                  <Stack direction="row" alignItems="center" justifyContent="center" spacing={0.75}>
+                    <Box
+                      sx={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: 20,
+                        height: 20,
+                        borderRadius: 999,
+                        bgcolor: C_DELIVERIES,
+                        color: '#fff',
+                        boxShadow: `0 4px 10px ${ring(C_DELIVERIES)}`
+                      }}
+                    >
+                      <MdLocalShipping size={12} />
+                    </Box>
+                    <Typography sx={{ fontWeight: 900, fontSize: 12, letterSpacing: 1, color: C_DELIVERIES }}>
                       Deliveries
+                    </Typography>
+                  </Stack>
                 </TableCell>
                 <TableCell rowSpan={2} align="center">Kms</TableCell>
                 <TableCell rowSpan={2} align="right">Amount</TableCell>
@@ -695,12 +776,52 @@ export default function OrdersReport() {
                   }
                 }}
               >
-                <TableCell align="center" sx={{ color: `${C_PENDING} !important` }}>Pending</TableCell>
-                <TableCell align="center" sx={{ color: `${C_COMPLETED} !important` }}>Completed</TableCell>
-                <TableCell align="center" sx={{ color: `${C_CANCELLED} !important` }}>Cancelled</TableCell>
-                <TableCell align="center" sx={{ color: `${C_PENDING} !important` }}>Pending</TableCell>
-                <TableCell align="center" sx={{ color: `${C_COMPLETED} !important` }}>Completed</TableCell>
-                <TableCell align="center" sx={{ color: `${C_CANCELLED} !important` }}>Cancelled</TableCell>
+                <TableCell
+                  align="center"
+                  sx={{
+                    color: `${C_PENDING} !important`,
+                    bgcolor: `${tint(C_ORDERS)} !important`,
+                    borderLeft: `2px solid ${edge(C_ORDERS)} !important`
+                  }}
+                >
+                  Pending
+                </TableCell>
+                <TableCell align="center" sx={{ color: `${C_COMPLETED} !important`, bgcolor: `${tint(C_ORDERS)} !important` }}>
+                  Completed
+                </TableCell>
+                <TableCell
+                  align="center"
+                  sx={{
+                    color: `${C_CANCELLED} !important`,
+                    bgcolor: `${tint(C_ORDERS)} !important`,
+                    borderRight: `2px solid ${edge(C_ORDERS)} !important`
+                  }}
+                >
+                  Cancelled
+                </TableCell>
+                <TableCell
+                  align="center"
+                  sx={{
+                    color: `${C_PENDING} !important`,
+                    bgcolor: `${tint(C_DELIVERIES)} !important`,
+                    borderLeft: `2px solid ${edge(C_DELIVERIES)} !important`
+                  }}
+                >
+                  Pending
+                </TableCell>
+                <TableCell align="center" sx={{ color: `${C_COMPLETED} !important`, bgcolor: `${tint(C_DELIVERIES)} !important` }}>
+                  Completed
+                </TableCell>
+                <TableCell
+                  align="center"
+                  sx={{
+                    color: `${C_CANCELLED} !important`,
+                    bgcolor: `${tint(C_DELIVERIES)} !important`,
+                    borderRight: `2px solid ${edge(C_DELIVERIES)} !important`
+                  }}
+                >
+                  Cancelled
+                </TableCell>
               </TableRow>
             </TableHead>
 
@@ -715,11 +836,20 @@ export default function OrdersReport() {
                         transition: 'background-color 0.15s',
                         '& td': {
                           borderBottom: `1px solid ${DT.divider}`,
-                          py: { xs: 1, md: 1.25 },
-                          px: { xs: 1, md: 1.5 }
+                          py: 0.5,
+                          px: 1,
+                          verticalAlign: 'middle'
                         },
+                        '& td.band-o': { backgroundColor: tint(C_ORDERS) },
+                        '& td.band-d': { backgroundColor: tint(C_DELIVERIES) },
+                        '& td.band-o-first': { borderLeft: `2px solid ${edge(C_ORDERS)}` },
+                        '& td.band-o-last': { borderRight: `2px solid ${edge(C_ORDERS)}` },
+                        '& td.band-d-first': { borderLeft: `2px solid ${edge(C_DELIVERIES)}` },
+                        '& td.band-d-last': { borderRight: `2px solid ${edge(C_DELIVERIES)}` },
                         backgroundColor: openRow === row.locationid ? tint(BRAND) : 'transparent',
-                        '&:hover': { backgroundColor: openRow === row.locationid ? soft(BRAND) : DT.surfaceAlt }
+                        '&:hover': { backgroundColor: openRow === row.locationid ? soft(BRAND) : DT.surfaceAlt },
+                        '&:hover td.band-o': { backgroundColor: soft(C_ORDERS) },
+                        '&:hover td.band-d': { backgroundColor: soft(C_DELIVERIES) }
                       }}
                     >
                       <TableCell>
@@ -727,11 +857,11 @@ export default function OrdersReport() {
                       </TableCell>
 
                       <TableCell>
-                        <Stack>
-                          <Typography variant="subtitle2" sx={{ fontWeight: 700, color: DT.textPrimary }} noWrap>
+                        <Stack spacing={0.125}>
+                          <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>
@@ -741,23 +871,23 @@ export default function OrdersReport() {
                         <MetricPill value={row.totalorders} color={BRAND} icon={<MdInventory2 size={11} />} />
                       </TableCell>
 
-                      <TableCell align="center">
+                      <TableCell align="center" className="band-o band-o-first">
                         <MetricPill value={row.Orderspending} color={C_PENDING} icon={<MdHourglassEmpty size={11} />} />
                       </TableCell>
-                      <TableCell align="center">
+                      <TableCell align="center" className="band-o">
                         <MetricPill value={row.orderscompleted} color={C_COMPLETED} icon={<MdCheckCircle size={11} />} />
                       </TableCell>
-                      <TableCell align="center">
+                      <TableCell align="center" className="band-o band-o-last">
                         <MetricPill value={row.orderscancelled} color={C_CANCELLED} icon={<MdCancel size={11} />} />
                       </TableCell>
 
-                      <TableCell align="center">
+                      <TableCell align="center" className="band-d band-d-first">
                         <MetricPill value={row.deliveriespending} color={C_PENDING} icon={<MdHourglassEmpty size={11} />} />
                       </TableCell>
-                      <TableCell align="center">
+                      <TableCell align="center" className="band-d">
                         <MetricPill value={row.deliveriescompleted} color={C_COMPLETED} icon={<MdCheckCircle size={11} />} />
                       </TableCell>
-                      <TableCell align="center">
+                      <TableCell align="center" className="band-d band-d-last">
                         <MetricPill value={row.deliveriescancelled} color={C_CANCELLED} icon={<MdCancel size={11} />} />
                       </TableCell>
 
@@ -814,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 } }}>
-                              <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1.25 }}>
+                            <Box sx={{ p: { xs: 1, md: 1.5 } }}>
+                              <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}>
                                 <AccentAvatar color={BRAND} size={22} selected>
                                   <MdLocalShipping size={12} />
                                 </AccentAvatar>
@@ -871,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 }
                                           }}
                                         >
@@ -986,9 +1116,15 @@ export default function OrdersReport() {
                       backgroundColor: tint(BRAND),
                       borderTop: `2px solid ${edge(BRAND)}`,
                       borderBottom: 'none',
-                      py: 1.25,
-                      px: 1.5
-                    }
+                      py: 0.75,
+                      px: 1
+                    },
+                    '& td.band-o': { backgroundColor: soft(C_ORDERS) },
+                    '& td.band-d': { backgroundColor: soft(C_DELIVERIES) },
+                    '& td.band-o-first': { borderLeft: `2px solid ${edge(C_ORDERS)}` },
+                    '& td.band-o-last': { borderRight: `2px solid ${edge(C_ORDERS)}` },
+                    '& td.band-d-first': { borderLeft: `2px solid ${edge(C_DELIVERIES)}` },
+                    '& td.band-d-last': { borderRight: `2px solid ${edge(C_DELIVERIES)}` }
                   }}
                 >
                   <TableCell colSpan={2}>
@@ -1002,22 +1138,22 @@ export default function OrdersReport() {
                   <TableCell align="center">
                     <Typography sx={{ fontWeight: 800, color: DT.textPrimary }}>{totalOrders}</Typography>
                   </TableCell>
-                  <TableCell align="center">
+                  <TableCell align="center" className="band-o band-o-first">
                     <Typography sx={{ fontWeight: 800, color: C_PENDING }}>{totalOrderPend}</Typography>
                   </TableCell>
-                  <TableCell align="center">
+                  <TableCell align="center" className="band-o">
                     <Typography sx={{ fontWeight: 800, color: C_COMPLETED }}>{totalOrderComplete}</Typography>
                   </TableCell>
-                  <TableCell align="center">
+                  <TableCell align="center" className="band-o band-o-last">
                     <Typography sx={{ fontWeight: 800, color: C_CANCELLED }}>{totalOrderCancel}</Typography>
                   </TableCell>
-                  <TableCell align="center">
+                  <TableCell align="center" className="band-d band-d-first">
                     <Typography sx={{ fontWeight: 800, color: C_PENDING }}>{totalDeliPend}</Typography>
                   </TableCell>
-                  <TableCell align="center">
+                  <TableCell align="center" className="band-d">
                     <Typography sx={{ fontWeight: 800, color: C_COMPLETED }}>{totalDeliComplete}</Typography>
                   </TableCell>
-                  <TableCell align="center">
+                  <TableCell align="center" className="band-d band-d-last">
                     <Typography sx={{ fontWeight: 800, color: C_CANCELLED }}>{totalDeliCancel}</Typography>
                   </TableCell>
                   <TableCell />

src/pages/nearle/reports/riderLogs.js

@@ -117,9 +117,16 @@ const RidersLogs = () => {
     refetchInterval: 5 * 60 * 1000
   });
 
+  // Only active riders are surfaced on this page — inactive riders are filtered
+  // out entirely before they reach the list, selection, counts, or map.
+  const activeRiders = React.useMemo(
+    () => (riders || []).filter((r) => r.status === 'active'),
+    [riders]
+  );
+
   useEffect(() => {
-    setSelectedRiders(riders);
-  }, [riders]);
+    setSelectedRiders(activeRiders);
+  }, [activeRiders]);
 
   useEffect(() => {
     setOpen(isDesktop);
@@ -140,10 +147,9 @@ const RidersLogs = () => {
     return () => document.removeEventListener('keydown', handleKeyPress);
   }, []);
 
-  // Counts shown in the drawer header.
-  const totalRiders = riders?.length || 0;
-  const activeCount = (riders || []).filter((r) => r.status === 'active').length;
-  const inactiveCount = totalRiders - activeCount;
+  // Counts shown in the drawer header (active riders only).
+  const totalRiders = activeRiders.length;
+  const activeCount = totalRiders;
   const isAllSelected = totalRiders > 0 && selectedRiders?.length === totalRiders;
 
   return (
@@ -195,8 +201,11 @@ const RidersLogs = () => {
               sx={{
                 position: 'sticky',
                 top: 0,
-                zIndex: 2,
-                background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
+                zIndex: 5,
+                // Solid white base UNDER the translucent brand gradient so the
+                // scrolling rider list never shows through the sticky header.
+                backgroundColor: '#fff',
+                backgroundImage: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
                 borderBottom: `1px solid ${DT.borderSubtle}`,
                 p: 1.75
               }}
@@ -250,9 +259,6 @@ const RidersLogs = () => {
                 <SoftPill color={C_ACTIVE} icon={<MdCheckCircle size={11} />}>
                   Active · {activeCount}
                 </SoftPill>
-                <SoftPill color={C_INACTIVE} icon={<MdHighlightOff size={11} />}>
-                  Inactive · {inactiveCount}
-                </SoftPill>
               </Stack>
 
               {/* Pill search */}
@@ -301,7 +307,7 @@ const RidersLogs = () => {
               <Box
                 onClick={() => {
                   if (!isAllSelected) {
-                    setSelectedRiders(riders);
+                    setSelectedRiders(activeRiders);
                   }
                 }}
                 sx={{
@@ -328,7 +334,7 @@ const RidersLogs = () => {
                   checked={isAllSelected}
                   onChange={(e) => {
                     if (e.target.checked) {
-                      setSelectedRiders(riders);
+                      setSelectedRiders(activeRiders);
                     }
                   }}
                   sx={{
@@ -380,7 +386,7 @@ const RidersLogs = () => {
                       </Stack>
                     </ListItem>
                   ))
-                : riders?.map((row) => {
+                : activeRiders.map((row) => {
                     const isSelected = selectedRiders?.length === 1 && selectedRiders[0]?.userid === row?.userid;
                     const statusColor = row.status === 'active' ? C_ACTIVE : C_INACTIVE;
                     const initial = (row.firstname || row.username || '?').charAt(0).toUpperCase();
@@ -422,7 +428,7 @@ const RidersLogs = () => {
                             if (e.target.checked) {
                               setSelectedRiders([row]);
                             } else {
-                              setSelectedRiders(riders);
+                              setSelectedRiders(activeRiders);
                             }
                           }}
                           sx={{

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 },
-          p: { xs: 1.5, sm: 2, md: 2.5 },
-          borderRadius: DT.radiusCard / 8,
+          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%)`,
@@ -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 },
-                height: { xs: 40, sm: 48 },
+                width: 36,
+                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,
-                    height: 8,
+                    width: 7,
+                    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">
-            <Box
+          <Tooltip title="Filter by date range" arrow>
+            <Button
               onClick={() => setOpen(true)}
+              disableElevation
+              variant="outlined"
+              size="small"
+              startIcon={<MdCalendarMonth size={15} />}
               sx={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: 0.75,
-                px: 1.5,
-                py: 0.875,
-                borderRadius: 999,
-                cursor: 'pointer',
+                height: 32,
+                px: 1.25,
+                borderRadius: 1.5,
+                textTransform: 'none',
+                fontSize: 12.5,
+                fontWeight: 700,
+                letterSpacing: 0.1,
                 bgcolor: '#fff',
-                border: `1.5px solid ${edge('#f59e0b')}`,
-                color: '#f59e0b',
-                fontWeight: 800,
-                fontSize: 12,
-                transition: 'all 0.18s',
-                '&:hover': { borderColor: '#f59e0b', boxShadow: `0 0 0 3px ${ring('#f59e0b')}` }
+                borderColor: DT.borderSubtle,
+                color: DT.textPrimary,
+                '&:hover': {
+                  bgcolor: '#fff',
+                  borderColor: BRAND,
+                  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 || ============================================= */}
-      <Grid container spacing={{ xs: 1.25, sm: 1.5, md: 2 }}>
+      {/* ============================================= || KPI Cards (compact) || ============================================= */}
+      <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 },
-                  borderRadius: DT.radiusCard / 8,
+                  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.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,
-                    height: 3,
-                    background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
+                    bottom: 0,
+                    width: 3,
+                    background: item.color
                   }}
                 />
-                <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
-                  <Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
+                <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1} sx={{ pl: 0.5 }}>
+                  <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,
-                        fontSize: { xs: '1.1rem', sm: '1.35rem', md: '1.55rem' }
+                        lineHeight: 1.15,
+                        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 },
-                      height: { xs: 32, sm: 38, md: 44 },
+                      width: 30,
+                      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 },
-          p: { xs: 1.25, md: 1.75 },
-          borderRadius: DT.radiusCard / 8,
+          mt: { xs: 1, md: 1.25 },
+          p: { xs: 1, md: 1.125 },
+          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 },
-          borderRadius: DT.radiusCard / 8,
+          mt: { xs: 1, md: 1.25 },
+          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 },
-                    px: { xs: 1, md: 1.5 }
+                    py: 0.75,
+                    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}` }}>
-                        <Skeleton animation="wave" />
+                      <TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}`, py: 0.625, px: 1 }}>
+                        <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' }}>
-                    <Stack alignItems="center" spacing={1.5}>
-                      <Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
-                        <MdGroups size={28} />
+                  <TableCell colSpan={16} sx={{ py: 7, borderBottom: 'none' }}>
+                    <Stack alignItems="center" spacing={1.25}>
+                      <Avatar
+                        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 }}>
-                        {searchword ? 'Try a different rider name.' : 'Adjust the date range above.'}
+                      <Typography sx={{ color: DT.textSecondary, fontSize: 12 }}>
+                        {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 },
-                        px: { xs: 1, md: 1.5 }
+                        py: 0.625,
+                        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>
-                          <Typography variant="subtitle2" sx={{ fontWeight: 700, color: DT.textPrimary }} noWrap>
+                        <Stack spacing={0.125}>
+                          <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 },
-                                          '&:hover': { backgroundColor: DT.surfaceAlt }
+                                          '& td': { borderBottom: `1px solid ${DT.divider}`, py: 0.5, px: 1 },
+                                          '&:hover': { backgroundColor: tint(BRAND), boxShadow: `inset 3px 0 0 ${BRAND}` }
                                         }}
                                       >
                                         <TableCell align="center">

src/store/reducers/menu.js

@@ -9,6 +9,7 @@ const initialState = {
   openItem: ['dashboard'],
   openComponent: 'buttons',
   selectedID: null,
+  selectedMenu: null,
   drawerOpen: false,
   componentDrawerOpen: true,
   menu: {},
@@ -48,6 +49,10 @@ const menu = createSlice({
 
     hasError(state, action) {
       state.error = action.payload;
+    },
+
+    setSelectedMenu(state, action) {
+      state.selectedMenu = action.payload;
     }
   },
 
@@ -60,4 +65,4 @@ const menu = createSlice({
 
 export default menu.reducer;
 
-export const { activeItem, activeComponent, openDrawer, openComponentDrawer, activeID } = menu.actions;
+export const { activeItem, activeComponent, openDrawer, openComponentDrawer, activeID, setSelectedMenu } = menu.actions;