updates on the design in the order summary page and the orders details page
This commit is contained in:
@@ -669,11 +669,67 @@ export default function OrdersReport() {
|
||||
<TableCell rowSpan={2}>#</TableCell>
|
||||
<TableCell rowSpan={2}>Location</TableCell>
|
||||
<TableCell rowSpan={2} align="center">All</TableCell>
|
||||
<TableCell colSpan={3} align="center" sx={{ color: `${C_ORDERS} !important`, bgcolor: `${tint(C_ORDERS)} !important` }}>
|
||||
Orders
|
||||
<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
|
||||
</Typography>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell colSpan={3} align="center" sx={{ color: `${C_DELIVERIES} !important`, bgcolor: `${tint(C_DELIVERIES)} !important` }}>
|
||||
Deliveries
|
||||
<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
|
||||
</Typography>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell rowSpan={2} align="center">Kms</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 align="center" sx={{ color: `${C_COMPLETED} !important` }}>Completed</TableCell>
|
||||
<TableCell align="center" sx={{ color: `${C_CANCELLED} !important` }}>Cancelled</TableCell>
|
||||
<TableCell align="center" sx={{ color: `${C_PENDING} !important` }}>Pending</TableCell>
|
||||
<TableCell align="center" sx={{ color: `${C_COMPLETED} !important` }}>Completed</TableCell>
|
||||
<TableCell align="center" sx={{ color: `${C_CANCELLED} !important` }}>Cancelled</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
color: `${C_PENDING} !important`,
|
||||
bgcolor: `${tint(C_ORDERS)} !important`,
|
||||
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>
|
||||
</TableHead>
|
||||
|
||||
@@ -718,8 +814,16 @@ export default function OrdersReport() {
|
||||
py: { xs: 1, md: 1.25 },
|
||||
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',
|
||||
'&: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>
|
||||
@@ -741,23 +845,23 @@ export default function OrdersReport() {
|
||||
<MetricPill value={row.totalorders} color={BRAND} icon={<MdInventory2 size={11} />} />
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-o band-o-first">
|
||||
<MetricPill value={row.Orderspending} color={C_PENDING} icon={<MdHourglassEmpty size={11} />} />
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-o">
|
||||
<MetricPill value={row.orderscompleted} color={C_COMPLETED} icon={<MdCheckCircle size={11} />} />
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-o band-o-last">
|
||||
<MetricPill value={row.orderscancelled} color={C_CANCELLED} icon={<MdCancel size={11} />} />
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-d band-d-first">
|
||||
<MetricPill value={row.deliveriespending} color={C_PENDING} icon={<MdHourglassEmpty size={11} />} />
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-d">
|
||||
<MetricPill value={row.deliveriescompleted} color={C_COMPLETED} icon={<MdCheckCircle size={11} />} />
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-d band-d-last">
|
||||
<MetricPill value={row.deliveriescancelled} color={C_CANCELLED} icon={<MdCancel size={11} />} />
|
||||
</TableCell>
|
||||
|
||||
@@ -988,7 +1092,13 @@ export default function OrdersReport() {
|
||||
borderBottom: 'none',
|
||||
py: 1.25,
|
||||
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}>
|
||||
@@ -1002,22 +1112,22 @@ export default function OrdersReport() {
|
||||
<TableCell align="center">
|
||||
<Typography sx={{ fontWeight: 800, color: DT.textPrimary }}>{totalOrders}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-o band-o-first">
|
||||
<Typography sx={{ fontWeight: 800, color: C_PENDING }}>{totalOrderPend}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-o">
|
||||
<Typography sx={{ fontWeight: 800, color: C_COMPLETED }}>{totalOrderComplete}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-o band-o-last">
|
||||
<Typography sx={{ fontWeight: 800, color: C_CANCELLED }}>{totalOrderCancel}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-d band-d-first">
|
||||
<Typography sx={{ fontWeight: 800, color: C_PENDING }}>{totalDeliPend}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-d">
|
||||
<Typography sx={{ fontWeight: 800, color: C_COMPLETED }}>{totalDeliComplete}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<TableCell align="center" className="band-d band-d-last">
|
||||
<Typography sx={{ fontWeight: 800, color: C_CANCELLED }}>{totalDeliCancel}</Typography>
|
||||
</TableCell>
|
||||
<TableCell />
|
||||
|
||||
@@ -244,7 +244,7 @@ const TimelineCell = ({ value, color }) => {
|
||||
<Typography sx={{ fontSize: 11, fontWeight: 700, color: DT.textPrimary }} noWrap>
|
||||
{dayjs(value).format('DD/MM/YYYY')}
|
||||
</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')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user