Doormile/doormile_hub_console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update Riders UI layout, refine status chip styling, and remove API documentation file

Browse Source
This commit is contained in:
Thiru-tenext
2026-07-08 18:39:57 +05:30
parent e650ecf88b
commit f53578c520
5 changed files with 23 additions and 906 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/operations/Riders.jsx
View File

@@ -527,10 +527,12 @@ function ProfileDrawer({ rider, onClose, onSave, startInEdit = false }) {
// Close button would hide under the app bar. Lift the whole modal above it.
zIndex: (t) => t.zIndex.modal,
'& .MuiDrawer-paper': {
width: { xs: '100%', sm: 380 },
width: { xs: '100%', sm: 480 },
maxWidth: '100%',
top: { xs: 0, sm: 64 },
height: { xs: '100%', sm: 'calc(100% - 64px)' },
// Run the sheet the full height of the viewport so there is no empty
// strip above the red header (zIndex.modal keeps Close clickable).
top: 0,
height: '100%',
borderTopLeftRadius: { sm: 16 },
display: 'flex',
flexDirection: 'column',
@@ -1185,7 +1187,7 @@ export default function Riders() {
</Stack>
{/* KPIs */}
<Grid container spacing={{ xs: 2, md: 3 }} sx={{ mt: 2, mb: 2 }}>
<Grid container spacing={{ xs: 1.5, sm: 2 }} sx={{ mb: 3 }}>
{[
{ icon: GroupsOutlinedIcon, label: 'On Duty', value: kpi.onDuty, sub: `of ${kpi.total}`, color: '#1A73E8', bg: '#E8F0FE', trend: true },
{ icon: RouteOutlinedIcon, label: 'In Field', value: kpi.onField, sub: 'Active pickups', color: '#1E8E3E', bg: '#E6F4EA' },
@@ -1193,7 +1195,7 @@ export default function Riders() {
{ icon: WarningAmberOutlinedIcon, label: 'SLA Risk', value: kpi.slaRisk, sub: 'Overloaded milers', color: '#D93025', bg: '#FCE8E6' },
{ icon: PaymentsOutlinedIcon, label: 'COP Pending', value: inr(kpi.codToCollect), sub: 'To be collected', color: '#8E24AA', bg: '#F3E5F5' },
].map((k, i) => (
<Grid item xs={6} sm={4} md={2.4} key={i}>
<Grid size={{ xs: 6, md: 2.4 }} key={i}>
<KpiCard {...k} />
</Grid>
))}
@@ -1271,24 +1273,28 @@ export default function Riders() {
{STATUS_CHIPS.map(s => {
const active = statusFilter === s;
const meta = STATUS_META[s] || {};
// Each status carries its own colour; "All" falls back to a neutral dark.
const accent = meta.color || '#1A1A2E';
const tint = meta.bg || '#F8F9FB';
return (
<Chip
key={s}
label={s}
clickable
onClick={() => setStatusFilter(s)}
icon={meta.color ? <CircleRoundedIcon sx={{ fontSize: 10, color: meta.color }} /> : undefined}
icon={meta.color ? <CircleRoundedIcon sx={{ fontSize: 10, color: active ? '#fff' : meta.color }} /> : undefined}
sx={{
height: 38,
px: 1,
borderRadius: 2,
fontSize: '0.82rem',
fontWeight: active ? 700 : 500,
bgcolor: active ? '#1A1A2E' : '#F8F9FB',
color: active ? '#fff' : '#5F6368',
border: active ? 'none' : '1px solid #ECEEF1',
fontWeight: active ? 700 : 600,
bgcolor: active ? accent : tint,
color: active ? '#fff' : accent,
border: active ? 'none' : `1px solid ${alpha(accent, 0.25)}`,
'& .MuiChip-icon': { color: active ? '#fff' : meta.color },
'& .MuiChip-label': { px: 1.25 },
'&:hover': { bgcolor: active ? '#1A1A2E' : '#F1F3F5' }
'&:hover': { bgcolor: active ? accent : alpha(accent, 0.14) }
}}
/>
);