From 12341b1a0ce8ed259e5dbb4574b6f40c3fd5eb09 Mon Sep 17 00:00:00 2001
From: dharaneesh-r <dharaneesh@tenext.in>
Date: Thu, 4 Jun 2026 02:10:19 +0530
Subject: [PATCH] updates on the design in the order summary page and the
 orders details page

---
 src/pages/nearle/reports/orderSummary.js  | 158 ++++++++++++++++++----
 src/pages/nearle/reports/ordersDetails.js |   2 +-
 2 files changed, 135 insertions(+), 25 deletions(-)

diff --git a/src/pages/nearle/reports/orderSummary.js b/src/pages/nearle/reports/orderSummary.js
index b0d070f..b8edcfc 100644
--- a/src/pages/nearle/reports/orderSummary.js
+++ b/src/pages/nearle/reports/orderSummary.js
@@ -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 />
diff --git a/src/pages/nearle/reports/ordersDetails.js b/src/pages/nearle/reports/ordersDetails.js
index 7614773..361f6b2 100644
--- a/src/pages/nearle/reports/ordersDetails.js
+++ b/src/pages/nearle/reports/ordersDetails.js
@@ -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>