update on the step number

This commit is contained in:
2026-07-01 12:30:31 +05:30
parent dc9548e8c9
commit 5f7df5b9ab
2 changed files with 63 additions and 21 deletions

View File

@@ -5966,6 +5966,47 @@
letter-spacing: 0.04em;
}
/* Rider/customer/delivery-id stack on the left, Step badge pinned to the
right so operators can read the sequence position without opening the
Details section. */
.dispatch-container .dispatch-popup .pu-header-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.dispatch-container .dispatch-popup .pu-header-left {
min-width: 0;
flex: 1;
}
.dispatch-container .dispatch-popup .pu-header-step {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 4px 10px;
border-radius: 10px;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.dispatch-container .dispatch-popup .pu-header-step-label {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7b1fa2;
}
.dispatch-container .dispatch-popup .pu-header-step-value {
font-size: 15px;
font-weight: 800;
color: #7b1fa2;
white-space: nowrap;
}
/* --- Body sections ---
No scroll: the popup expands to fit its content. Width is the dimension
we constrain (via leaflet's maxWidth prop) so the body grows downward as

View File

@@ -2644,17 +2644,29 @@ const Dispatch = ({
</span>
)}
</div>
<div className="pu-rider">
<MdTwoWheeler /> <span>{o.rider_name || o.ridername || 'Unassigned'}</span>
</div>
{(o.deliverycustomer || o.customername) && (
<div className="pu-customer" title={o.deliverycustomer || o.customername}>
<MdPerson /> <span>{o.deliverycustomer || o.customername}</span>
<div className="pu-header-main">
<div className="pu-header-left">
<div className="pu-rider">
<MdTwoWheeler /> <span>{o.rider_name || o.ridername || 'Unassigned'}</span>
</div>
{(o.deliverycustomer || o.customername) && (
<div className="pu-customer" title={o.deliverycustomer || o.customername}>
<MdPerson /> <span>{o.deliverycustomer || o.customername}</span>
</div>
)}
{o.deliveryid != null && (
<div className="pu-delivery-id">Delivery #{o.deliveryid}</div>
)}
</div>
)}
{o.deliveryid != null && (
<div className="pu-delivery-id">Delivery #{o.deliveryid}</div>
)}
{o.step != null && (
<div className="pu-header-step">
<span className="pu-header-step-label">Step</span>
<span className="pu-header-step-value">
{o.trip_number != null && o.trip_number > 1 ? `T${o.trip_number}·` : ''}{o.step}
</span>
</div>
)}
</div>
</div>
<div className="pu-body">
@@ -2726,17 +2738,6 @@ const Dispatch = ({
</div>
</div>
)}
{o.step != null && (
<div className="pu-detail">
<div className="pu-detail-icon"><MdMyLocation /></div>
<div className="pu-detail-body">
<div className="pu-detail-label">Step</div>
<div className="pu-detail-value">
{o.trip_number != null && o.trip_number > 1 ? `Trip ${o.trip_number} · ` : ''}#{o.step}
</div>
</div>
</div>
)}
</div>
{(o.actualkms != null || o.riderkms != null || estMeters !== null) && (