reponsiveness on the dispatch section
This commit is contained in:
@@ -973,6 +973,7 @@ const Dispatch = ({
|
||||
// per-rider). Kept as a single state flag so we don't entangle it with
|
||||
// viewMode/focused* logic.
|
||||
const [compareOpen, setCompareOpen] = useState(false);
|
||||
const [daySummaryOpen, setDaySummaryOpen] = useState(false);
|
||||
// In controlled mode the parent owns selectedRiderId, so handleRiderFocus only
|
||||
// fires onRiderSelect — focusedRider won't update until the parent re-renders.
|
||||
// This ref lets us defer setCompareOpen(true) until focusedRider is confirmed.
|
||||
@@ -1586,6 +1587,7 @@ const Dispatch = ({
|
||||
// stuck on a step that may not exist in their day.
|
||||
useEffect(() => {
|
||||
setFocusedCompareStep(null);
|
||||
setDaySummaryOpen(false);
|
||||
}, [compareOpen, focusedRider?.id]);
|
||||
|
||||
// Mirror pan/zoom from whichever map the user is driving. Called by
|
||||
@@ -2989,7 +2991,7 @@ const Dispatch = ({
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div id="body" className={sidebarCollapsed ? 'sidebar-collapsed' : ''}>
|
||||
<div id="body" className={`${sidebarCollapsed ? 'sidebar-collapsed' : ''} ${compareOpen ? 'compare-mode' : ''}`.trim()}>
|
||||
<button
|
||||
type="button"
|
||||
className={`sidebar-toggle-tab${sidebarCollapsed ? ' is-collapsed' : ''}`}
|
||||
@@ -4369,8 +4371,13 @@ const Dispatch = ({
|
||||
: '';
|
||||
const total = sum.onTime + sum.late;
|
||||
return (
|
||||
<div className="compare-delta">
|
||||
<div className="compare-delta-title">
|
||||
<div className={`compare-delta is-collapsible${daySummaryOpen ? ' is-expanded' : ' is-collapsed'}`}>
|
||||
<div
|
||||
className="compare-delta-title"
|
||||
onClick={() => setDaySummaryOpen((v) => !v)}
|
||||
style={{ cursor: 'pointer', userSelect: 'none' }}
|
||||
title={daySummaryOpen ? 'Collapse Day Summary' : 'Expand Day Summary'}
|
||||
>
|
||||
<span
|
||||
className="compare-delta-step-badge"
|
||||
style={{ background: focusedRider.color }}
|
||||
@@ -4378,49 +4385,65 @@ const Dispatch = ({
|
||||
<MdPublic />
|
||||
</span>
|
||||
<div className="compare-delta-title-text">
|
||||
<div className="compare-delta-title-main">Day summary</div>
|
||||
<div className="compare-delta-title-main" style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
|
||||
Day summary
|
||||
<span
|
||||
className="compare-delta-toggle-icon"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
transform: daySummaryOpen ? 'rotate(180deg)' : 'rotate(0deg)',
|
||||
transition: 'transform 0.22s cubic-bezier(0.4, 0, 0.2, 1)'
|
||||
}}
|
||||
>
|
||||
<MdExpandMore />
|
||||
</span>
|
||||
</div>
|
||||
<div className="compare-delta-title-sub">
|
||||
Click any step above to scrutinize that delivery
|
||||
{daySummaryOpen
|
||||
? 'Click to collapse summary'
|
||||
: 'Click to expand summary · Click any step above to scrutinize'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="compare-delta-grid">
|
||||
<div className="compare-delta-cell">
|
||||
<span className="compare-delta-cell-label">Total distance</span>
|
||||
<span className="compare-delta-cell-val">
|
||||
{sum.actualKm.toFixed(1)}{' '}
|
||||
<span className="compare-delta-cell-unit">km</span>
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
planned {sum.plannedKm.toFixed(1)} km
|
||||
</span>
|
||||
{daySummaryOpen && (
|
||||
<div className="compare-delta-grid">
|
||||
<div className="compare-delta-cell">
|
||||
<span className="compare-delta-cell-label">Total distance</span>
|
||||
<span className="compare-delta-cell-val">
|
||||
{sum.actualKm.toFixed(1)}{' '}
|
||||
<span className="compare-delta-cell-unit">km</span>
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
planned {sum.plannedKm.toFixed(1)} km
|
||||
</span>
|
||||
</div>
|
||||
<div className={`compare-delta-cell${sum.anomalies > 0 ? ' is-anomaly' : ''}`}>
|
||||
<span className="compare-delta-cell-label">Route deviation</span>
|
||||
<span className={`compare-delta-cell-val ${deltaCls}`}>
|
||||
{sum.kmDeltaPct != null
|
||||
? `${sum.kmDeltaPct > 0 ? '+' : ''}${sum.kmDeltaPct.toFixed(0)}%`
|
||||
: '—'}
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
{sum.anomalies > 0
|
||||
? `${sum.anomalies} step${sum.anomalies > 1 ? 's' : ''} flagged`
|
||||
: 'within plan'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="compare-delta-cell">
|
||||
<span className="compare-delta-cell-label">On-time</span>
|
||||
<span className="compare-delta-cell-val">
|
||||
{sum.onTime}
|
||||
{total > 0 && (
|
||||
<span className="compare-delta-cell-unit">/{total}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
{sum.late > 0 ? `${sum.late} late` : 'all on schedule'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`compare-delta-cell${sum.anomalies > 0 ? ' is-anomaly' : ''}`}>
|
||||
<span className="compare-delta-cell-label">Route deviation</span>
|
||||
<span className={`compare-delta-cell-val ${deltaCls}`}>
|
||||
{sum.kmDeltaPct != null
|
||||
? `${sum.kmDeltaPct > 0 ? '+' : ''}${sum.kmDeltaPct.toFixed(0)}%`
|
||||
: '—'}
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
{sum.anomalies > 0
|
||||
? `${sum.anomalies} step${sum.anomalies > 1 ? 's' : ''} flagged`
|
||||
: 'within plan'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="compare-delta-cell">
|
||||
<span className="compare-delta-cell-label">On-time</span>
|
||||
<span className="compare-delta-cell-val">
|
||||
{sum.onTime}
|
||||
{total > 0 && (
|
||||
<span className="compare-delta-cell-unit">/{total}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
{sum.late > 0 ? `${sum.late} late` : 'all on schedule'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
Reference in New Issue
Block a user