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

4
src/pages/auth/Login.jsx
View File

@@ -28,8 +28,8 @@ import { setSession } from '@/auth/session';
export default function Login() {
const navigate = useNavigate();
const [show, setShow] = useState(false);
const [auth, setAuth] = useState('hub.coimbatore@doormile.in');
const [pwd, setPwd] = useState('password123');
const [auth, setAuth] = useState('');
const [pwd, setPwd] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');

4
src/pages/operations/Dispatch.jsx
View File

@@ -259,7 +259,7 @@ export default function Dispatch() {
<Card key={m.id} elevation={0} sx={{ borderRadius: 3, border: '1px solid #ECEEF1' }}>
<CardContent sx={{ p: 2.25, '&:last-child': { pb: 2.25 } }}>
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1.5 }} gap={1}>
<Stack direction="row" alignItems="center" gap={1.5} sx={{ minWidth: 0 }}>
<Stack direction="row" alignItems="center" spacing={2.25} sx={{ minWidth: 0 }}>
<Avatar variant="rounded" sx={{ bgcolor: meta.bg, color: meta.color, borderRadius: 2, width: 38, height: 38 }}>
<KindIcon sx={{ fontSize: 20 }} />
</Avatar>
@@ -309,7 +309,7 @@ export default function Dispatch() {
return (
<TableRow key={m.id} hover sx={{ '& td': { borderBottom: '1px solid #F4F6F8', py: 2.25 }, '&:last-child td': { border: 0 } }}>
<TableCell>
<Stack direction="row" alignItems="center" gap={1.5}>
<Stack direction="row" alignItems="center" spacing={2.25}>
<Avatar variant="rounded" sx={{ bgcolor: meta.bg, color: meta.color, borderRadius: 2, width: 38, height: 38 }}>
<KindIcon sx={{ fontSize: 20 }} />
</Avatar>

4
src/pages/operations/RiderRoutes.jsx
View File

@@ -548,14 +548,14 @@ export default function RiderRoutes() {
)}
{/* ── Analysis KPI strip ── */}
<Grid container spacing={2.5} mt={4} sx={{ mb: 2 }}>
<Grid container spacing={{ xs: 1.5, sm: 2 }} mt={4} sx={{ mb: 3 }}>
{[
{ icon: GroupsOutlinedIcon, label: 'Active Milers', value: kpi.activeRiders, sub: `of ${riders.length}`, color: '#1A73E8', bg: '#E8F0FE' },
{ icon: modeCfg.icon, label: modeCfg.label, value: kpi.orders, sub: 'pickups covered', color: '#C01227', bg: alpha('#C01227', 0.1) },
{ icon: CheckCircleRoundedIcon, label: modeCfg.doneLabel, value: kpi.done, sub: `${kpi.fail} missed`, color: '#1E8E3E', bg: '#E6F4EA' },
{ icon: StraightenRoundedIcon, label: 'Distance', value: `${kpi.km} km`, sub: 'fleet total today', color: '#8E24AA', bg: '#F3E5F5' },
].map((k, i) => (
<Grid item xs={6} sm={6} md={3} key={i}><KpiCard {...k} /></Grid>
<Grid size={{ xs: 6, md: 3 }} key={i}><KpiCard {...k} /></Grid>
))}
</Grid>

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) }
}}
/>
);