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

Fix typos and improve readability in Dashboard, Dispatch, RiderRoutes, and Routing components

Browse Source
This commit is contained in:
Thiru-tenext
2026-07-03 11:40:19 +05:30
parent c36f2d5b1d
commit 200831d19c
4 changed files with 82 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/pages/Dashboard.jsx
View File

@@ -47,6 +47,68 @@ const DAY_LABELS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
// ── Doormile-themed range calendar ───────────────────────────────────────────────
// Click a day to set the start, click again to set the end (auto-swaps if reversed).
// In-range days get a soft red wash; the two endpoints are solid brand red.
// Renders two compact months side-by-side (single month on small screens).
// A single compact month grid — kept lightweight so both months render fast.
function MonthGrid({ view, start, end, max, onDay }) {
const gridStart = view.startOf('month').subtract(view.startOf('month').day(), 'day');
const cells = Array.from({ length: 42 }, (_, i) => gridStart.add(i, 'day'));
return (
<Box sx={{ width: 224 }}>
<Typography align="center" sx={{ fontWeight: 700, fontSize: '0.82rem', color: '#212529', mb: 0.75 }}>
{view.format('MMMM YYYY')}
</Typography>
{/* Weekday labels */}
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', mb: 0.25 }}>
{DAY_LABELS.map((d, i) => (
<Typography key={i} align="center" sx={{ fontSize: '0.62rem', fontWeight: 600, color: '#B0B5BA', py: 0.25 }}>
{d}
</Typography>
))}
</Box>
{/* Days */}
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
{cells.map((d) => {
const inMonth = d.month() === view.month();
const isStart = start && d.isSame(start, 'day');
const isEnd = end && d.isSame(end, 'day');
const isEndpoint = isStart || isEnd;
const inRange = start && end && d.isAfter(start, 'day') && d.isBefore(end, 'day');
const isToday = d.isSame(dayjs(), 'day');
const disabled = max && d.isAfter(max, 'day');
return (
<Box key={d.format(DATE_FMT)} sx={{ display: 'flex', justifyContent: 'center', bgcolor: inRange ? alpha(BRAND, 0.07) : 'transparent',
borderTopLeftRadius: isStart ? 6 : 0, borderBottomLeftRadius: isStart ? 6 : 0,
borderTopRightRadius: isEnd ? 6 : 0, borderBottomRightRadius: isEnd ? 6 : 0 }}>
<Box
component="button"
type="button"
disabled={disabled}
onClick={() => onDay(d)}
sx={{
width: 28, height: 28, m: '1px', border: 'none', cursor: disabled ? 'default' : 'pointer',
borderRadius: 1.5, fontSize: '0.72rem', fontFamily: 'inherit',
fontWeight: isEndpoint ? 700 : 500,
color: disabled ? '#D5D9DD' : isEndpoint ? '#fff' : inMonth ? '#3C4043' : '#C4C9CE',
bgcolor: isEndpoint ? BRAND : 'transparent',
boxShadow: isToday && !isEndpoint ? `inset 0 0 0 1.5px ${BRAND}` : 'none',
transition: 'background-color .12s',
'&:hover': { bgcolor: disabled ? 'transparent' : isEndpoint ? '#9E0E20' : alpha(BRAND, 0.1) }
}}
>
{d.date()}
</Box>
</Box>
);
})}
</Box>
</Box>
);
}
function RangeCalendar({ from, to, maxDate, onSelect }) {
const [view, setView] = useState(dayjs(to || from || undefined).startOf('month'));
const [anchorDate, setAnchorDate] = useState(null); // first click while picking a new range
@@ -55,9 +117,6 @@ function RangeCalendar({ from, to, maxDate, onSelect }) {
const end = to ? dayjs(to) : null;
const max = maxDate ? dayjs(maxDate) : null;
const gridStart = view.startOf('month').subtract(view.startOf('month').day(), 'day');
const cells = Array.from({ length: 42 }, (_, i) => gridStart.add(i, 'day'));
const handleDay = (d) => {
if (!anchorDate) {
setAnchorDate(d);
@@ -72,63 +131,23 @@ function RangeCalendar({ from, to, maxDate, onSelect }) {
};
return (
<Box sx={{ p: 2, width: 320 }}>
{/* Month header */}
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 1.5 }}>
<IconButton size="small" onClick={() => setView((v) => v.subtract(1, 'month'))} sx={{ color: '#5F6368' }}>
<ChevronLeftRoundedIcon />
<Box sx={{ px: 1.5, py: 1.5 }}>
{/* Shared nav header spanning both months */}
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 1 }}>
<IconButton size="small" onClick={() => setView((v) => v.subtract(1, 'month'))} sx={{ color: '#9AA0A6', p: 0.5 }}>
<ChevronLeftRoundedIcon fontSize="small" />
</IconButton>
<Typography sx={{ fontWeight: 800, color: '#212529' }}>{view.format('MMMM YYYY')}</Typography>
<IconButton size="small" onClick={() => setView((v) => v.add(1, 'month'))} sx={{ color: '#5F6368' }}>
<ChevronRightRoundedIcon />
<IconButton size="small" onClick={() => setView((v) => v.add(1, 'month'))} sx={{ color: '#9AA0A6', p: 0.5 }}>
<ChevronRightRoundedIcon fontSize="small" />
</IconButton>
</Stack>
{/* Weekday labels */}
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', mb: 0.5 }}>
{DAY_LABELS.map((d, i) => (
<Typography key={i} align="center" sx={{ fontSize: '0.72rem', fontWeight: 700, color: '#9AA0A6', py: 0.5 }}>
{d}
</Typography>
))}
</Box>
{/* Days */}
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', rowGap: 0.25 }}>
{cells.map((d) => {
const inMonth = d.month() === view.month();
const isStart = start && d.isSame(start, 'day');
const isEnd = end && d.isSame(end, 'day');
const isEndpoint = isStart || isEnd;
const inRange = start && end && d.isAfter(start, 'day') && d.isBefore(end, 'day');
const isToday = d.isSame(dayjs(), 'day');
const disabled = max && d.isAfter(max, 'day');
return (
<Box key={d.format(DATE_FMT)} sx={{ display: 'flex', justifyContent: 'center', bgcolor: inRange ? alpha(BRAND, 0.08) : 'transparent',
borderTopLeftRadius: isStart ? 8 : 0, borderBottomLeftRadius: isStart ? 8 : 0,
borderTopRightRadius: isEnd ? 8 : 0, borderBottomRightRadius: isEnd ? 8 : 0 }}>
<Box
component="button"
type="button"
disabled={disabled}
onClick={() => handleDay(d)}
sx={{
width: 36, height: 36, m: '2px', border: 'none', cursor: disabled ? 'default' : 'pointer',
borderRadius: 2, fontSize: '0.85rem', fontFamily: 'inherit',
fontWeight: isEndpoint ? 800 : 600,
color: disabled ? '#CED4DA' : isEndpoint ? '#fff' : inMonth ? '#212529' : '#B9BEC4',
bgcolor: isEndpoint ? BRAND : 'transparent',
boxShadow: isToday && !isEndpoint ? `inset 0 0 0 1.5px ${BRAND}` : 'none',
transition: 'background-color .15s',
'&:hover': { bgcolor: disabled ? 'transparent' : isEndpoint ? '#9E0E20' : alpha(BRAND, 0.12) }
}}
>
{d.date()}
</Box>
</Box>
);
})}
</Box>
<Stack direction="row" spacing={2}>
<MonthGrid view={view} start={start} end={end} max={max} onDay={handleDay} />
<Box sx={{ display: { xs: 'none', sm: 'block' } }}>
<MonthGrid view={view.add(1, 'month')} start={start} end={end} max={max} onDay={handleDay} />
</Box>
</Stack>
</Box>
);
}
@@ -317,11 +336,11 @@ export default function Dashboard() {
onClose={() => setCalAnchor(null)}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
PaperProps={{ sx: { mt: 1, borderRadius: 3, border: '1px solid #ECEEF1', boxShadow: '0 12px 40px rgba(0,0,0,0.14)', overflow: 'hidden' } }}
PaperProps={{ sx: { mt: 1, borderRadius: 2.5, border: '1px solid #EEF0F2', boxShadow: '0 8px 28px rgba(0,0,0,0.10)', overflow: 'hidden' } }}
>
<Box sx={{ px: 2, pt: 2 }}>
<Typography sx={{ fontWeight: 800, color: '#212529' }}>Select date range</Typography>
<Typography variant="caption" color="text.secondary">
<Box sx={{ px: 2, pt: 1.75, pb: 0.5 }}>
<Typography sx={{ fontWeight: 700, fontSize: '0.9rem', color: '#212529' }}>Select date range</Typography>
<Typography variant="caption" sx={{ color: '#8A9099' }}>
{dayjs(range.from).format('DD MMM')} – {dayjs(range.to).format('DD MMM YYYY')} · {dayCount} {dayCount === 1 ? 'day' : 'days'}
</Typography>
</Box>

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

@@ -147,7 +147,7 @@ export default function Dispatch() {
<PageHeader
icon={LocalShippingIcon}
title="Dispatch & Transfer"
subtitle="Group parcels that go out together, check them, and send them — either out for local delivery or transferred to another city hub."
subtitle="Group parcels that go out together, check them, and send them either out for local delivery or transferred to another city hub."
/>
<Grid container spacing={3}>

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

@@ -529,7 +529,7 @@ export default function RiderRoutes() {
<Box>
<Typography variant="h4" sx={{ fontWeight: 800, letterSpacing: '-0.4px', lineHeight: 1.2 }}>Rider Routes</Typography>
<Typography variant="body1" color="text.secondary" sx={{ fontWeight: 500 }}>
Pickups each miler covered today — open any order for full details, or press play to replay the trip.
Pickups each miler covered today open any order for full details, or press play to replay the trip.
</Typography>
</Box>
</Stack>

2
src/pages/operations/Routing.jsx
View File

@@ -146,7 +146,7 @@ export default function Routing() {
<Box sx={{ mb: 4 }}>
<Typography variant="h4" sx={{ fontWeight: 800, color: '#212529', mb: 1 }}>Where Does It Go?</Typography>
<Typography variant="body1" color="text.secondary">
Scan a parcel and we'll tell you exactly what to do with it next — deliver locally, transfer to another city, or set it aside.
Scan a parcel and we'll tell you exactly what to do with it next deliver locally, transfer to another city, or set it aside.
</Typography>
</Box>