Nearle_express/dailygrubs_console
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates on the redesign changes

Browse Source
This commit is contained in:
dharaneesh-r
2026-06-05 08:24:54 +05:30
parent 12341b1a0c
commit 1978b2bb18
7 changed files with 1682 additions and 757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.claude/settings.local.json Normal file
View File

@@ -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'\\)\")"
]
}
}

341
src/pages/nearle/_shared/ordersDesign.js Normal file
View File

@@ -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 };

215
src/pages/nearle/invoice/invoice.js
View File

@@ -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">

270
src/pages/nearle/orders/orders.js
View File

@@ -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}
@@ -445,13 +453,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 +471,45 @@ const Orders = () => {
direction={{ xs: 'column', sm: 'row' }}
alignItems={{ xs: 'flex-start', sm: 'center' }}
justifyContent="space-between"
spacing={{ xs: 1.5, sm: 2 }}
spacing={{ xs: 1, sm: 1.5 }}
>
<Stack direction="row" alignItems="center" spacing={{ xs: 1.25, sm: 1.75 }}>
<Stack direction="row" alignItems="center" spacing={1.25}>
<Avatar
variant="rounded"
sx={{
width: { xs: 40, sm: 48 },
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 +574,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 +585,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 +604,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>
<Typography
sx={{
fontWeight: 800,
color: DT.textPrimary,
lineHeight: 1.1,
fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
}}
>
{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}%
<Stack direction="row" alignItems="baseline" spacing={0.75}>
<Typography
sx={{
fontWeight: 800,
color: DT.textPrimary,
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 && 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 +665,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 +767,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 +919,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,7 +937,8 @@ const Orders = () => {
onScroll={handleScroll}
ref={containerRef}
sx={{
maxHeight: { xs: 'calc(100vh - 220px)', md: 'calc(100vh - 190px)' },
minHeight: 320,
maxHeight: { xs: 'calc(100vh - 320px)', md: 'calc(100vh - 290px)' },
overflow: 'auto',
'&::-webkit-scrollbar': { width: 10, height: 10 },
'&::-webkit-scrollbar-thumb': {
@@ -932,21 +949,21 @@ const Orders = () => {
'&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
}}
>
<Table stickyHeader sx={{ minWidth: { xs: 960, md: 1180 } }}>
<Table stickyHeader size="small" sx={{ minWidth: { xs: 960, md: 1100 } }}>
<TableHead>
<TableRow
sx={{
'& th': {
backgroundColor: DT.surfaceAlt,
color: DT.textSecondary,
fontSize: { xs: 10, md: 11 },
fontSize: 10.5,
fontWeight: 800,
letterSpacing: 0.6,
letterSpacing: 0.5,
textTransform: 'uppercase',
whiteSpace: 'nowrap',
borderBottom: `1px solid ${DT.borderSubtle}`,
py: { xs: 1, md: 1.25 },
px: { xs: 1, md: 1.5 }
py: 0.75,
px: 1
}
}}
>
@@ -967,11 +984,11 @@ const Orders = () => {
<TableBody>
{(isLoadingGetOrders || loading) &&
rows.length === 0 &&
[0, 1, 2, 3, 4, 5].map((_, idx) => (
Array.from({ length: 10 }).map((_, idx) => (
<TableRow key={`sk-${idx}`}>
{Array.from({ length: currentStatus === 'created' ? 11 : 10 }).map((__, ci) => (
<TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}` }}>
<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 +996,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 +1045,17 @@ const Orders = () => {
key={`${row.orderheaderid}-${index}`}
sx={{
cursor: 'pointer',
transition: 'background-color 0.15s',
transition: 'background-color 0.12s, box-shadow 0.12s',
'& td': {
borderBottom: `1px solid ${DT.divider}`,
py: { xs: 1, md: 1.25 },
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 +1074,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 +1195,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>
)}

268
src/pages/nearle/reports/orderSummary.js
View File

@@ -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,80 +350,107 @@ 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
onClick={() => setOpen(true)}
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 0.75,
px: 1.5,
py: 0.875,
py: 0.75,
borderRadius: 999,
cursor: 'pointer',
bgcolor: '#fff',
border: `1.5px solid ${edge('#f59e0b')}`,
color: '#f59e0b',
bgcolor: tint(BRAND),
border: `1.5px solid ${edge(BRAND)}`,
color: BRAND,
fontWeight: 800,
fontSize: 12,
transition: 'all 0.18s',
'&:hover': { borderColor: '#f59e0b', boxShadow: `0 0 0 3px ${ring('#f59e0b')}` }
fontSize: 13
}}
>
<MdCalendarMonth size={14} />
{startdate && enddate
? `${dayjs(startdate).format('DD/MM/YY')} – ${dayjs(enddate).format('DD/MM/YY')}`
: 'All time'}
<MdMyLocation size={14} /> {tenantLocations[0]?.locationname}
</Box>
</Tooltip>
) : (
<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 || ============================================= */}
<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 (
@@ -433,14 +460,15 @@ export default function OrdersReport() {
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)
}
@@ -451,24 +479,24 @@ export default function OrdersReport() {
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}
@@ -477,9 +505,10 @@ export default function OrdersReport() {
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" />
@@ -491,16 +520,17 @@ export default function OrdersReport() {
</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>
@@ -509,13 +539,13 @@ export default function OrdersReport() {
})}
</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',
@@ -526,8 +556,55 @@ export default function OrdersReport() {
direction={{ xs: 'column', md: 'row' }}
spacing={1.25}
alignItems={{ xs: 'stretch', md: 'center' }}
justifyContent="space-between"
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.25,
py: 0.75,
borderRadius: 999,
cursor: 'pointer',
bgcolor: tint('#f59e0b'),
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')}` }
}}
>
<MdCalendarMonth size={14} />
{startdate && enddate
? `${dayjs(startdate).format('DD/MM/YY')} – ${dayjs(enddate).format('DD/MM/YY')}`
: 'All time'}
</Box>
</Tooltip>
<Box
sx={{
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
}}
>
<MdReceiptLong size={12} /> {datestatus}
</Box>
</Stack>
{/* Search */}
<Box sx={{ width: { xs: '100%', md: 320 } }}>
<Box
@@ -569,58 +646,6 @@ export default function OrdersReport() {
)}
</Box>
</Box>
{/* Location filter */}
{tenantLocations?.length === 1 ? (
<Box
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 0.75,
px: 1.5,
py: 0.875,
borderRadius: 999,
bgcolor: tint(BRAND),
border: `1.5px solid ${edge(BRAND)}`,
color: BRAND,
fontWeight: 800,
fontSize: 13
}}
>
<MdMyLocation size={14} /> {tenantLocations[0]?.locationname}
</Box>
) : (
<Autocomplete
options={tenantLocations || []}
value={selectedLocation}
getOptionLabel={(o) => (o ? `${o.locationname} (${o.suburb || ''})` : '')}
PaperComponent={SoftPaper}
onChange={(event, value) => {
setSelectedLocation(value);
setLocationId(value ? value.locationid : 0);
setLocoName(value ? value.locationname : 'All Locations');
}}
renderInput={(params) => (
<TextField
{...params}
placeholder="All Locations"
size="small"
sx={pillFieldSx('#10b981')}
InputProps={{
...params.InputProps,
startAdornment: (
<Stack direction="row" alignItems="center" spacing={0.75} sx={{ pl: 0.5 }}>
<AccentAvatar color="#10b981" size={22} selected>
<MdPlace size={13} />
</AccentAvatar>
</Stack>
)
}}
/>
)}
sx={{ width: { xs: '100%', md: 320 } }}
/>
)}
</Stack>
</Paper>
@@ -628,7 +653,7 @@ export default function OrdersReport() {
<Paper
elevation={0}
sx={{
mt: { xs: 1.5, md: 2 },
mt: { xs: 1, md: 1.25 },
borderRadius: DT.radiusCard / 8,
border: '1px solid',
borderColor: DT.borderSubtle,
@@ -811,8 +836,9 @@ export default function OrdersReport() {
transition: 'background-color 0.15s',
'& td': {
borderBottom: `1px solid ${DT.divider}`,
py: { xs: 1, md: 1.25 },
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) },
@@ -831,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>
@@ -918,8 +944,8 @@ export default function OrdersReport() {
<TableRow>
<TableCell colSpan={13} sx={{ p: 0, borderBottom: `1px solid ${DT.divider}`, bgcolor: DT.surfaceAlt }}>
<Collapse in={openRow === row.locationid} timeout="auto" unmountOnExit>
<Box sx={{ p: { xs: 1.5, md: 2 } }}>
<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>
@@ -975,7 +1001,7 @@ export default function OrdersReport() {
<TableRow
key={`${rider?.firstname}-${ri}`}
sx={{
'& td': { borderBottom: `1px solid ${DT.divider}`, py: 0.875, px: 1 },
'& td': { borderBottom: `1px solid ${DT.divider}`, py: 0.5, px: 1, verticalAlign: 'middle' },
'&:hover': { backgroundColor: DT.surfaceAlt }
}}
>
@@ -1090,8 +1116,8 @@ export default function OrdersReport() {
backgroundColor: tint(BRAND),
borderTop: `2px solid ${edge(BRAND)}`,
borderBottom: 'none',
py: 1.25,
px: 1.5
py: 0.75,
px: 1
},
'& td.band-o': { backgroundColor: soft(C_ORDERS) },
'& td.band-d': { backgroundColor: soft(C_DELIVERIES) },

1114
src/pages/nearle/reports/ordersDetails.js
View File

File diff suppressed because it is too large Load Diff

222
src/pages/nearle/reports/ridersummary.js
View File

@@ -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">