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

updates on the design in the order summary page and the orders details page

Browse Source
This commit is contained in:
dharaneesh-r
2026-06-04 02:10:19 +05:30
parent 8d0c796ba5
commit 12341b1a0c
2 changed files with 135 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -669,11 +669,67 @@ export default function OrdersReport() {
<TableCell rowSpan={2}>#</TableCell> <TableCell rowSpan={2}>#</TableCell>
<TableCell rowSpan={2}>Location</TableCell> <TableCell rowSpan={2}>Location</TableCell>
<TableCell rowSpan={2} align="center">All</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 Orders
</Typography>
</Stack>
</TableCell> </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 Deliveries
</Typography>
</Stack>
</TableCell> </TableCell>
<TableCell rowSpan={2} align="center">Kms</TableCell> <TableCell rowSpan={2} align="center">Kms</TableCell>
<TableCell rowSpan={2} align="right">Amount</TableCell> <TableCell rowSpan={2} align="right">Amount</TableCell>
@@ -695,12 +751,52 @@ export default function OrdersReport() {
} }
}} }}
> >
<TableCell align="center" sx={{ color: `${C_PENDING} !important` }}>Pending</TableCell> <TableCell
<TableCell align="center" sx={{ color: `${C_COMPLETED} !important` }}>Completed</TableCell> align="center"
<TableCell align="center" sx={{ color: `${C_CANCELLED} !important` }}>Cancelled</TableCell> sx={{
<TableCell align="center" sx={{ color: `${C_PENDING} !important` }}>Pending</TableCell> color: `${C_PENDING} !important`,
<TableCell align="center" sx={{ color: `${C_COMPLETED} !important` }}>Completed</TableCell> bgcolor: `${tint(C_ORDERS)} !important`,
<TableCell align="center" sx={{ color: `${C_CANCELLED} !important` }}>Cancelled</TableCell> 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> </TableRow>
</TableHead> </TableHead>
@@ -718,8 +814,16 @@ export default function OrdersReport() {
py: { xs: 1, md: 1.25 }, py: { xs: 1, md: 1.25 },
px: { xs: 1, md: 1.5 } px: { xs: 1, md: 1.5 }
}, },
'& 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', 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> <TableCell>
@@ -741,23 +845,23 @@ export default function OrdersReport() {
<MetricPill value={row.totalorders} color={BRAND} icon={<MdInventory2 size={11} />} /> <MetricPill value={row.totalorders} color={BRAND} icon={<MdInventory2 size={11} />} />
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-o band-o-first">
<MetricPill value={row.Orderspending} color={C_PENDING} icon={<MdHourglassEmpty size={11} />} /> <MetricPill value={row.Orderspending} color={C_PENDING} icon={<MdHourglassEmpty size={11} />} />
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-o">
<MetricPill value={row.orderscompleted} color={C_COMPLETED} icon={<MdCheckCircle size={11} />} /> <MetricPill value={row.orderscompleted} color={C_COMPLETED} icon={<MdCheckCircle size={11} />} />
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-o band-o-last">
<MetricPill value={row.orderscancelled} color={C_CANCELLED} icon={<MdCancel size={11} />} /> <MetricPill value={row.orderscancelled} color={C_CANCELLED} icon={<MdCancel size={11} />} />
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-d band-d-first">
<MetricPill value={row.deliveriespending} color={C_PENDING} icon={<MdHourglassEmpty size={11} />} /> <MetricPill value={row.deliveriespending} color={C_PENDING} icon={<MdHourglassEmpty size={11} />} />
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-d">
<MetricPill value={row.deliveriescompleted} color={C_COMPLETED} icon={<MdCheckCircle size={11} />} /> <MetricPill value={row.deliveriescompleted} color={C_COMPLETED} icon={<MdCheckCircle size={11} />} />
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-d band-d-last">
<MetricPill value={row.deliveriescancelled} color={C_CANCELLED} icon={<MdCancel size={11} />} /> <MetricPill value={row.deliveriescancelled} color={C_CANCELLED} icon={<MdCancel size={11} />} />
</TableCell> </TableCell>
@@ -988,7 +1092,13 @@ export default function OrdersReport() {
borderBottom: 'none', borderBottom: 'none',
py: 1.25, py: 1.25,
px: 1.5 px: 1.5
} },
'& 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}> <TableCell colSpan={2}>
@@ -1002,22 +1112,22 @@ export default function OrdersReport() {
<TableCell align="center"> <TableCell align="center">
<Typography sx={{ fontWeight: 800, color: DT.textPrimary }}>{totalOrders}</Typography> <Typography sx={{ fontWeight: 800, color: DT.textPrimary }}>{totalOrders}</Typography>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-o band-o-first">
<Typography sx={{ fontWeight: 800, color: C_PENDING }}>{totalOrderPend}</Typography> <Typography sx={{ fontWeight: 800, color: C_PENDING }}>{totalOrderPend}</Typography>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-o">
<Typography sx={{ fontWeight: 800, color: C_COMPLETED }}>{totalOrderComplete}</Typography> <Typography sx={{ fontWeight: 800, color: C_COMPLETED }}>{totalOrderComplete}</Typography>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-o band-o-last">
<Typography sx={{ fontWeight: 800, color: C_CANCELLED }}>{totalOrderCancel}</Typography> <Typography sx={{ fontWeight: 800, color: C_CANCELLED }}>{totalOrderCancel}</Typography>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-d band-d-first">
<Typography sx={{ fontWeight: 800, color: C_PENDING }}>{totalDeliPend}</Typography> <Typography sx={{ fontWeight: 800, color: C_PENDING }}>{totalDeliPend}</Typography>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-d">
<Typography sx={{ fontWeight: 800, color: C_COMPLETED }}>{totalDeliComplete}</Typography> <Typography sx={{ fontWeight: 800, color: C_COMPLETED }}>{totalDeliComplete}</Typography>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center" className="band-d band-d-last">
<Typography sx={{ fontWeight: 800, color: C_CANCELLED }}>{totalDeliCancel}</Typography> <Typography sx={{ fontWeight: 800, color: C_CANCELLED }}>{totalDeliCancel}</Typography>
</TableCell> </TableCell>
<TableCell /> <TableCell />

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

@@ -244,7 +244,7 @@ const TimelineCell = ({ value, color }) => {
<Typography sx={{ fontSize: 11, fontWeight: 700, color: DT.textPrimary }} noWrap> <Typography sx={{ fontSize: 11, fontWeight: 700, color: DT.textPrimary }} noWrap>
{dayjs(value).format('DD/MM/YYYY')} {dayjs(value).format('DD/MM/YYYY')}
</Typography> </Typography>
<Typography sx={{ fontSize: 10, color: DT.textMuted }} noWrap> <Typography sx={{ fontSize: 11, fontWeight: 700, color: DT.textPrimary }} noWrap>
{dayjs(value).format('hh:mm A')} {dayjs(value).format('hh:mm A')}
</Typography> </Typography>
</Stack> </Stack>