updates on the profitability

2026-06-15 20:51:04 +05:30
parent b35361d440
commit 7858d42f86
3 changed files with 133 additions and 113 deletions
--- a/src/pages/nearle/dispatch/Dispatch.css
+++ b/src/pages/nearle/dispatch/Dispatch.css
@@ -2238,7 +2238,7 @@
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
 }

 .dispatch-container .trip-sort-pill svg {
@@ -2275,13 +2275,11 @@
 /* Mode-semantic accent on the active pill's icon — picks up the same
   indigo / emerald used on the Compare control + the time-rank badge
   below, so the page reads as a coherent system. */
-.dispatch-container .trip-sort-toggle[data-mode='planned']
-  .trip-sort-pill.is-active svg {
+.dispatch-container .trip-sort-toggle[data-mode='planned'] .trip-sort-pill.is-active svg {
  color: #662582;
 }

-.dispatch-container .trip-sort-toggle[data-mode='time']
-  .trip-sort-pill.is-active svg {
+.dispatch-container .trip-sort-toggle[data-mode='time'] .trip-sort-pill.is-active svg {
  color: #10b981;
 }

@@ -9598,8 +9596,17 @@
 }

@keyframes da-live-pulse {
-  0%, 100% { opacity: 1;   transform: scale(1); }
-  50%      { opacity: 0.4; transform: scale(0.85); }
+
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
 }

 .dispatch-container .da-metric-grid {
@@ -10011,8 +10018,13 @@
 }

@keyframes da-pos-fade {
-  from { opacity: 0; }
-  to   { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }

 .dispatch-container .da-pos-modal-card {
@@ -10030,8 +10042,15 @@
 }

@keyframes da-pos-rise {
-  from { opacity: 0; transform: translateY(12px) scale(0.98); }
-  to   { opacity: 1; transform: translateY(0)    scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }

 .dispatch-container .da-pos-modal-head {
@@ -10652,11 +10671,9 @@
  top: 0;
  bottom: 0;
  background-image:
-    repeating-linear-gradient(
-      135deg,
+    repeating-linear-gradient(135deg,
      #e2e8f0 0 6px,
-      #f1f5f9 6px 12px
-    );
+      #f1f5f9 6px 12px);
  border-left: 1px dashed #cbd5e1;
 }

@@ -10900,6 +10917,7 @@
   (≥ md) is untouched; every rule here is gated inside this media query.
   ========================================================================= */
@media (max-width: 768px) {
+
  /* The standalone page un-does MainCard's 24px padding via negative margin
     + 100vw-ish sizing; keep that, just allow the inner body to grow with
     its stacked children instead of being clipped to a single row height. */
--- a/src/pages/nearle/dispatch/ProfitabilitySection.css
+++ b/src/pages/nearle/dispatch/ProfitabilitySection.css
@@ -83,7 +83,7 @@ body {
   Fixed architecture: NO overflow, NO clipping, NO width:100vw
   ════════════════════════════════════════════════════════════════════════════ */

-.profitability-dashboard {
+.dispatch-container .profitability-dashboard {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
@@ -126,7 +126,7 @@ body {
   HEADER SECTION — Premium Top Header
   ════════════════════════════════════════════════════════════════════════════ */

-.profitability-header {
+.profitability-dashboard .profitability-header {
  width: 100%;
  max-width: 100%;

@@ -252,7 +252,7 @@ body {
  flex-shrink: 0;
 }

-.profitability-kpi-chip {
+.profitability-dashboard .profitability-kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
@@ -329,7 +329,7 @@ body {
   ════════════════════════════════════════════════════════════════════════════ */

 /* Enhanced KPI card interactions */
-.profitability-summary-card {
+.profitability-dashboard .profitability-summary-card {
  position: relative;
  min-width: 0;
  max-width: 100%;
@@ -404,6 +404,7 @@ body {
    opacity: 0;
    transform: scaleY(0.95);
  }
+
  to {
    opacity: 1;
    transform: scaleY(1);
@@ -549,7 +550,7 @@ body {
   CONTROLS BAR — Search, Filter, Sort
   ════════════════════════════════════════════════════════════════════════════ */

-.profitability-controls-bar {
+.profitability-dashboard .profitability-controls-bar {
  width: 100%;
  max-width: 100%;

@@ -588,7 +589,7 @@ body {
  flex-shrink: 0;
 }

-.profitability-search-input {
+.profitability-dashboard .profitability-search-input {
  width: 100%;
  height: 40px;

@@ -619,7 +620,7 @@ body {
  box-shadow: 0 0 0 3px rgba(108, 76, 241, 0.1);
 }

-.profitability-search-input:focus ~ .profitability-search-icon {
+.profitability-search-input:focus~.profitability-search-icon {
  color: var(--primary);
 }

@@ -633,7 +634,7 @@ body {
  border: 1px solid var(--border-light);
 }

-.profitability-tab-btn {
+.profitability-dashboard .profitability-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
@@ -696,7 +697,7 @@ body {
  display: none;
 }

-.profitability-sort-select {
+.profitability-dashboard .profitability-sort-select {
  height: 40px;
  padding: 0 32px 0 var(--space-md);

@@ -790,7 +791,7 @@ body {
   RIDER CARD — Modern Enterprise SaaS Card
   ════════════════════════════════════════════════════════════════════════════ */

-.rider-profitability-card {
+.profitability-dashboard .rider-profitability-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
@@ -825,7 +826,7 @@ body {
  box-shadow: 0 0 0 2px var(--primary-light), var(--shadow-md);
 }

-.rider-card-header {
+.profitability-dashboard .rider-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
@@ -1043,13 +1044,14 @@ body {
    opacity: 0;
    transform: translateY(-8px);
  }
+
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }

-.rider-detail-inner {
+.profitability-dashboard .rider-detail-inner {
  padding: var(--space-lg);
 }

@@ -1060,7 +1062,7 @@ body {
  margin-bottom: var(--space-xl);
 }

-.cost-tile {
+.profitability-dashboard .cost-tile {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
@@ -1170,7 +1172,7 @@ body {
  overflow: hidden;
 }

-.revenue-breakdown-header {
+.profitability-dashboard .revenue-breakdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
@@ -1211,7 +1213,7 @@ body {
  border-collapse: collapse;
 }

-.orders-table thead th {
+.profitability-dashboard .orders-table thead th {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-size: 11px;
@@ -1237,7 +1239,7 @@ body {
  border-bottom: none;
 }

-.orders-table tbody td {
+.profitability-dashboard .orders-table tbody td {
  padding: var(--space-md) var(--space-lg);
  vertical-align: middle;
  font-size: 13px;
@@ -1495,7 +1497,7 @@ body {
    font-size: 12px;
  }

-  .profitability-kpi-chip {
+  .profitability-dashboard .profitability-kpi-chip {
    padding: var(--space-sm) var(--space-md);
    font-size: 11px;
  }
@@ -1504,7 +1506,7 @@ body {
    font-size: 14px;
  }

-  .profitability-summary-card {
+  .profitability-dashboard .profitability-summary-card {
    padding: var(--space-lg);
  }

--- a/src/pages/nearle/reports/ridersLogs.js
+++ b/src/pages/nearle/reports/ridersLogs.js
@@ -125,94 +125,94 @@ const RidersLogs = () => {
            {/* Individuals */}
            {ridersIsLoading || riderIsFetching
              ? Array.from({ length: 10 }).map((_, index) => (
-                  <Fragment key={index}>
-                    <ListItem sx={{ py: 1.5, px: 2 }}>
+                <Fragment key={index}>
+                  <ListItem sx={{ py: 1.5, px: 2 }}>
+                    <ListItemAvatar>
+                      <Skeleton variant="circular" width={24} height={24} />
+                    </ListItemAvatar>
+
+                    <ListItemText
+                      primary={<Skeleton variant="text" width="60%" height={22} />}
+                      secondary={<Skeleton variant="text" width="40%" height={18} />}
+                    />
+
+                    <Stack spacing={0.5} textAlign="right">
+                      <Skeleton variant="text" width={50} height={18} />
+                      <Skeleton variant="text" width={80} height={16} />
+                    </Stack>
+                  </ListItem>
+
+                  <Divider />
+                </Fragment>
+              ))
+              : !isMobile &&
+              riders?.map((row) => {
+                return (
+                  <Fragment key={row.userid}>
+                    <ListItem
+                      sx={{
+                        cursor: 'pointer',
+                        py: 1,
+                        px: 2,
+                        borderRadius: 1,
+                        '&:hover': { bgcolor: theme.palette.secondary.lighter }
+                      }}
+                      secondaryAction={
+                        <Stack textAlign="right" spacing={0.5}>
+                          <Typography variant="body2" noWrap sx={{ color: row.status == 'active' ? 'success.main' : 'error.main' }}>
+                            {row.userid}
+                          </Typography>
+                          <Typography variant="caption" color="text.secondary" noWrap>
+                            {dayjs(row.logdate).format('DD/MM/YYYY hh:mm A')}
+                          </Typography>
+                        </Stack>
+                      }
+                    >
                      <ListItemAvatar>
-                        <Skeleton variant="circular" width={24} height={24} />
+                        <Checkbox
+                          sx={{
+                            color: row.status == 'active' ? 'green' : 'red',
+                            '&.Mui-checked': {
+                              color: row.status == 'active' ? 'green' : 'red'
+                            }
+                          }}
+                          checked={
+                            // INDIVIDUAL CHECKED CONDITION
+                            selectedRiders?.length === 1 && selectedRiders[0]?.userid === row?.userid
+                          }
+                          onChange={(e) => {
+                            if (e.target.checked) {
+                              // SELECT ONE RIDER
+                              setSelectedRiders([row]);
+                            } else {
+                              // UNCHECK -> SELECT ALL
+                              setSelectedRiders(riders);
+                            }
+                          }}
+                        />
                      </ListItemAvatar>

                      <ListItemText
-                        primary={<Skeleton variant="text" width="60%" height={22} />}
-                        secondary={<Skeleton variant="text" width="40%" height={18} />}
-                      />
+                        primary={
+                          <Typography noWrap>
+                            {row.username?.slice(0, 25) || ''}
+                            {row.username?.length > 25 && '...'}

-                      <Stack spacing={0.5} textAlign="right">
-                        <Skeleton variant="text" width={50} height={18} />
-                        <Skeleton variant="text" width={80} height={16} />
-                      </Stack>
+                            {/* {row.status === 'active' && <TaskAltIcon fontSize="small" color="success" sx={{ ml: 1 }} />} */}
+                          </Typography>
+                        }
+                        secondary={
+                          <Typography variant="caption" color="text.secondary" noWrap>
+                            {row.contactno || '##########'}
+                          </Typography>
+                        }
+                      />
                    </ListItem>

                    <Divider />
                  </Fragment>
-                ))
-              : !isMobile &&
-                riders?.map((row) => {
-                  return (
-                    <Fragment key={row.userid}>
-                      <ListItem
-                        sx={{
-                          cursor: 'pointer',
-                          py: 1,
-                          px: 2,
-                          borderRadius: 1,
-                          '&:hover': { bgcolor: theme.palette.secondary.lighter }
-                        }}
-                        secondaryAction={
-                          <Stack textAlign="right" spacing={0.5}>
-                            <Typography variant="body2" noWrap sx={{ color: row.status == 'active' ? 'success.main' : 'error.main' }}>
-                              {row.userid}
-                            </Typography>
-                            <Typography variant="caption" color="text.secondary" noWrap>
-                              {dayjs(row.logdate).format('DD/MM/YYYY hh:mm A')}
-                            </Typography>
-                          </Stack>
-                        }
-                      >
-                        <ListItemAvatar>
-                          <Checkbox
-                            sx={{
-                              color: row.status == 'active' ? 'green' : 'red',
-                              '&.Mui-checked': {
-                                color: row.status == 'active' ? 'green' : 'red'
-                              }
-                            }}
-                            checked={
-                              // INDIVIDUAL CHECKED CONDITION
-                              selectedRiders?.length === 1 && selectedRiders[0]?.userid === row?.userid
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                // SELECT ONE RIDER
-                                setSelectedRiders([row]);
-                              } else {
-                                // UNCHECK -> SELECT ALL
-                                setSelectedRiders(riders);
-                              }
-                            }}
-                          />
-                        </ListItemAvatar>
-
-                        <ListItemText
-                          primary={
-                            <Typography noWrap>
-                              {row.username?.slice(0, 25) || ''}
-                              {row.username?.length > 25 && '...'}
-
-                              {/* {row.status === 'active' && <TaskAltIcon fontSize="small" color="success" sx={{ ml: 1 }} />} */}
-                            </Typography>
-                          }
-                          secondary={
-                            <Typography variant="caption" color="text.secondary" noWrap>
-                              {row.contactno || '##########'}
-                            </Typography>
-                          }
-                        />
-                      </ListItem>
-
-                      <Divider />
-                    </Fragment>
-                  );
-                })}
+                );
+              })}
          </List>

          {/* Mobile: rider rows rendered as app-style cards (same selection behaviour) */}