upates on the dispatch comparsion new page updates
This commit is contained in:
956
src/pages/nearle/dispatch/CompareDataPanel.js
Normal file
956
src/pages/nearle/dispatch/CompareDataPanel.js
Normal file
@@ -0,0 +1,956 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
MdPublic,
|
||||
MdSwapHoriz,
|
||||
MdExpandMore,
|
||||
MdCheckCircle,
|
||||
MdAccessTime,
|
||||
MdAccountBalanceWallet,
|
||||
MdStraighten,
|
||||
MdTrendingUp,
|
||||
MdTrendingDown,
|
||||
MdErrorOutline,
|
||||
MdFormatListBulleted,
|
||||
MdTimer,
|
||||
MdWarning,
|
||||
MdClose
|
||||
} from 'react-icons/md';
|
||||
import {
|
||||
stepColor,
|
||||
getStatusStyle,
|
||||
FINAL_STATUSES,
|
||||
SKIPPED_STATUSES,
|
||||
ordinal
|
||||
} from './dispatchShared';
|
||||
|
||||
// Right-side data panel rendered in Compare mode. Pure presentation +
|
||||
// memoized derivations: feed it the comparison state from Dispatch and
|
||||
// the panel handles its own layout (compliance score, day overview, route
|
||||
// sequence with cascade grouping, KPIs, highlights, trips, focused-step
|
||||
// details, deviations, full step list).
|
||||
//
|
||||
// Props:
|
||||
// focusedRider — the rider whose day is being compared
|
||||
// compareDeltas — per-step planned/actual deltas (see useMemo
|
||||
// in Dispatch.js)
|
||||
// compareSummary — day rollup: plannedKm/actualKm/onTime/etc
|
||||
// actualOrdered — compareDeltas sorted by sequenceStep (visit
|
||||
// order). Used by the route-sequence section.
|
||||
// focusedCompareStep — currently focused step (1..N) or null
|
||||
// setFocusedCompareStep — setter; pass a function-updater for toggle
|
||||
// sequenceOpen — whether the "Route sequence" section is open
|
||||
// setSequenceOpen — setter for sequenceOpen
|
||||
// expandedSeqGroups — Set of expanded sequence-diff group indices
|
||||
// setExpandedSeqGroups — setter (Set state)
|
||||
// onClose — called when the user clicks the × header btn
|
||||
function CompareDataPanel({
|
||||
focusedRider,
|
||||
compareDeltas,
|
||||
compareSummary,
|
||||
actualOrdered,
|
||||
focusedCompareStep,
|
||||
setFocusedCompareStep,
|
||||
sequenceOpen,
|
||||
setSequenceOpen,
|
||||
expandedSeqGroups,
|
||||
setExpandedSeqGroups,
|
||||
onClose
|
||||
}) {
|
||||
// All derivations live in a single useMemo so the cost of re-running
|
||||
// them is paid only when an upstream input actually changes — not on
|
||||
// every parent render (e.g. cursor moving over the map, sync toggle
|
||||
// toggling, etc.). Keeping them grouped also makes the data contract
|
||||
// visible at a glance.
|
||||
const view = useMemo(() => {
|
||||
const sum = compareSummary;
|
||||
const totalSteps = sum.onTime + sum.late;
|
||||
const totalProfit = focusedRider.orders.reduce(
|
||||
(s, o) => s + parseFloat(o.profit || 0),
|
||||
0
|
||||
);
|
||||
const isLoss = totalProfit < 0;
|
||||
const deviations = compareDeltas.filter((d) => d.anomaly);
|
||||
const delivered = compareDeltas.filter((d) =>
|
||||
FINAL_STATUSES.has(String(d.orderstatus || '').toLowerCase())
|
||||
).length;
|
||||
const skipped = compareDeltas.filter((d) =>
|
||||
SKIPPED_STATUSES.has(String(d.orderstatus || '').toLowerCase())
|
||||
).length;
|
||||
const stepDeltaPct =
|
||||
sum.kmDeltaPct == null
|
||||
? ''
|
||||
: sum.kmDeltaPct > 25
|
||||
? 'is-over'
|
||||
: sum.kmDeltaPct < -5
|
||||
? 'is-under'
|
||||
: '';
|
||||
|
||||
// Compliance score (0-100): 60% delivered + 25% on-time + 15% no-deviation.
|
||||
const totalForScore = compareDeltas.length || 1;
|
||||
const onTimeForScore = sum.onTime + sum.late || 1;
|
||||
const score = Math.round(
|
||||
(delivered / totalForScore) * 60 +
|
||||
(sum.onTime / onTimeForScore) * 25 +
|
||||
((totalForScore - sum.anomalies) / totalForScore) * 15
|
||||
);
|
||||
const scoreColor = score >= 85 ? '#16a34a' : score >= 65 ? '#f59e0b' : '#dc2626';
|
||||
const scoreLabel = score >= 85 ? 'Excellent' : score >= 65 ? 'Acceptable' : 'Needs review';
|
||||
|
||||
// KPIs derived from delivery timestamps.
|
||||
const withActual = compareDeltas.filter((d) => d.actualTs);
|
||||
const firstDelivery = withActual.reduce(
|
||||
(acc, d) => (!acc || d.actualTs.isBefore(acc) ? d.actualTs : acc),
|
||||
null
|
||||
);
|
||||
const lastDelivery = withActual.reduce(
|
||||
(acc, d) => (!acc || d.actualTs.isAfter(acc) ? d.actualTs : acc),
|
||||
null
|
||||
);
|
||||
const activeMin =
|
||||
firstDelivery && lastDelivery
|
||||
? Math.max(0, lastDelivery.diff(firstDelivery, 'minute'))
|
||||
: 0;
|
||||
const avgPerStop =
|
||||
compareDeltas.length > 1
|
||||
? Math.round(activeMin / (compareDeltas.length - 1))
|
||||
: 0;
|
||||
const avgSpeed =
|
||||
activeMin > 0 ? (sum.actualKm / (activeMin / 60)).toFixed(1) : null;
|
||||
|
||||
// Best / worst step.
|
||||
const readyDeltas = compareDeltas.filter(
|
||||
(d) => !d.isLoading && d.coordsCount > 0
|
||||
);
|
||||
const bestStep =
|
||||
readyDeltas
|
||||
.filter((d) => d.timeDeltaMin != null && !d.anomaly)
|
||||
.sort((a, b) => a.timeDeltaMin - b.timeDeltaMin)[0] || null;
|
||||
const worstStep =
|
||||
readyDeltas
|
||||
.filter((d) => d.anomaly)
|
||||
.sort((a, b) => {
|
||||
const sa =
|
||||
Math.abs(a.kmDeltaPct || 0) + (a.timeDeltaMin > 0 ? a.timeDeltaMin : 0);
|
||||
const sb =
|
||||
Math.abs(b.kmDeltaPct || 0) + (b.timeDeltaMin > 0 ? b.timeDeltaMin : 0);
|
||||
return sb - sa;
|
||||
})[0] || null;
|
||||
|
||||
// Route sequence — which actual-visit positions don't match the
|
||||
// dispatch-planned step.
|
||||
const outOfOrderSteps = actualOrdered.filter((d, i) => {
|
||||
const planned = d.order?.step;
|
||||
return planned != null && planned !== i + 1;
|
||||
});
|
||||
|
||||
// Cascade-aware grouping of out-of-order steps: consecutive entries
|
||||
// with the same `delta` collapse into one "N consecutive shifted +K"
|
||||
// card so a single bad first stop doesn't paint 12 noisy rows.
|
||||
const seqRuns = [];
|
||||
outOfOrderSteps.forEach((d) => {
|
||||
const planned = d.order?.step;
|
||||
const actualPos =
|
||||
actualOrdered.findIndex((x) => x.sequenceStep === d.sequenceStep) + 1;
|
||||
const delta = actualPos - planned;
|
||||
const last = seqRuns[seqRuns.length - 1];
|
||||
if (last && last.delta === delta && last.lastActualPos + 1 === actualPos) {
|
||||
last.items.push({ d, planned, actualPos, delta });
|
||||
last.lastActualPos = actualPos;
|
||||
} else {
|
||||
seqRuns.push({
|
||||
delta,
|
||||
items: [{ d, planned, actualPos, delta }],
|
||||
lastActualPos: actualPos
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Trip-by-trip rollup.
|
||||
const tripBuckets = {};
|
||||
focusedRider.orders.forEach((o) => {
|
||||
const t = o.trip_number || 1;
|
||||
if (!tripBuckets[t]) tripBuckets[t] = [];
|
||||
tripBuckets[t].push(o);
|
||||
});
|
||||
const tripList = Object.entries(tripBuckets)
|
||||
.sort(([a], [b]) => Number(a) - Number(b))
|
||||
.map(([tNum, tOrders]) => ({
|
||||
tNum,
|
||||
count: tOrders.length,
|
||||
plannedKm: tOrders.reduce((s, o) => s + parseFloat(o.kms || 0), 0),
|
||||
actualKm: tOrders.reduce(
|
||||
(s, o) => s + parseFloat(o.actualkms || o.kms || 0),
|
||||
0
|
||||
),
|
||||
profit: tOrders.reduce((s, o) => s + parseFloat(o.profit || 0), 0),
|
||||
delivered: tOrders.filter((o) =>
|
||||
FINAL_STATUSES.has(String(o.orderstatus || '').toLowerCase())
|
||||
).length
|
||||
}));
|
||||
|
||||
return {
|
||||
sum,
|
||||
totalSteps,
|
||||
totalProfit,
|
||||
isLoss,
|
||||
deviations,
|
||||
delivered,
|
||||
skipped,
|
||||
stepDeltaPct,
|
||||
score,
|
||||
scoreColor,
|
||||
scoreLabel,
|
||||
firstDelivery,
|
||||
lastDelivery,
|
||||
activeMin,
|
||||
avgPerStop,
|
||||
avgSpeed,
|
||||
bestStep,
|
||||
worstStep,
|
||||
outOfOrderSteps,
|
||||
seqRuns,
|
||||
tripList
|
||||
};
|
||||
}, [focusedRider, compareDeltas, compareSummary, actualOrdered]);
|
||||
|
||||
const focused =
|
||||
focusedCompareStep != null
|
||||
? compareDeltas.find((d) => d.sequenceStep === focusedCompareStep)
|
||||
: null;
|
||||
|
||||
const toggleSeqGroup = (idx) => {
|
||||
setExpandedSeqGroups((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(idx)) next.delete(idx);
|
||||
else next.add(idx);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const focusStep = (sequenceStep) => {
|
||||
setFocusedCompareStep((prev) => (prev === sequenceStep ? null : sequenceStep));
|
||||
};
|
||||
|
||||
// Renders a single shifted-step diff card (used both stand-alone and
|
||||
// nested under an expanded group).
|
||||
const renderDiffRow = (item, focusable = true) => {
|
||||
const { d, planned, actualPos, delta } = item;
|
||||
return (
|
||||
<li
|
||||
key={`diff-${d.sequenceStep}`}
|
||||
className={`cdp-seq-diff${
|
||||
focusedCompareStep === d.sequenceStep ? ' is-focused' : ''
|
||||
}${focusable ? '' : ' is-nested'}`}
|
||||
onClick={() => focusStep(d.sequenceStep)}
|
||||
>
|
||||
<span
|
||||
className="cdp-seq-diff-num"
|
||||
style={{ background: stepColor((planned || d.sequenceStep) - 1) }}
|
||||
>
|
||||
{planned || d.sequenceStep}
|
||||
</span>
|
||||
<div className="cdp-seq-diff-body">
|
||||
<div className="cdp-seq-diff-title">
|
||||
{d.deliverycustomer || `Step ${planned || d.sequenceStep}`}
|
||||
</div>
|
||||
<div className="cdp-seq-diff-sub">
|
||||
Visited <strong>{ordinal(actualPos)}</strong>{' '}
|
||||
· planned <strong>{ordinal(planned)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<span className="cdp-seq-diff-tag">
|
||||
{delta > 0 ? `+${delta}` : `${delta}`}
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const {
|
||||
sum,
|
||||
totalSteps,
|
||||
totalProfit,
|
||||
isLoss,
|
||||
deviations,
|
||||
delivered,
|
||||
skipped,
|
||||
stepDeltaPct,
|
||||
score,
|
||||
scoreColor,
|
||||
scoreLabel,
|
||||
firstDelivery,
|
||||
lastDelivery,
|
||||
activeMin,
|
||||
avgPerStop,
|
||||
avgSpeed,
|
||||
bestStep,
|
||||
worstStep,
|
||||
outOfOrderSteps,
|
||||
seqRuns,
|
||||
tripList
|
||||
} = view;
|
||||
|
||||
return (
|
||||
<aside id="compare-data-panel" className="compare-data-panel">
|
||||
<div className="cdp-head">
|
||||
<div className="cdp-head-title">
|
||||
<span
|
||||
className="cdp-rider-dot"
|
||||
style={{ background: focusedRider.color }}
|
||||
/>
|
||||
<div className="cdp-head-text">
|
||||
<div className="cdp-rider-name">{focusedRider.riderName}</div>
|
||||
<div className="cdp-head-badge">PLANNED vs ACTUAL</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="cdp-close"
|
||||
onClick={onClose}
|
||||
title="Exit compare"
|
||||
aria-label="Exit compare"
|
||||
>
|
||||
<MdClose />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="cdp-scroll">
|
||||
{/* Compliance score — headline gauge blending delivery, on-time,
|
||||
and route-fidelity into one number. */}
|
||||
<section className="cdp-section cdp-score-section">
|
||||
<div className="cdp-score-wrap">
|
||||
<div
|
||||
className="cdp-score-ring"
|
||||
style={{
|
||||
background: `conic-gradient(${scoreColor} ${score * 3.6}deg, rgba(15,23,42,0.08) 0deg)`
|
||||
}}
|
||||
>
|
||||
<div className="cdp-score-inner">
|
||||
<div className="cdp-score-value" style={{ color: scoreColor }}>
|
||||
{score}
|
||||
</div>
|
||||
<div className="cdp-score-unit">/100</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cdp-score-body">
|
||||
<div className="cdp-score-label" style={{ color: scoreColor }}>
|
||||
{scoreLabel}
|
||||
</div>
|
||||
<div className="cdp-score-title">Compliance score</div>
|
||||
<div className="cdp-score-sub">
|
||||
{delivered}/{compareDeltas.length} delivered
|
||||
{sum.anomalies > 0
|
||||
? ` · ${sum.anomalies} deviation${sum.anomalies > 1 ? 's' : ''}`
|
||||
: ''}
|
||||
{sum.late > 0 ? ` · ${sum.late} late` : ''}
|
||||
{skipped > 0 ? ` · ${skipped} skipped` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="cdp-section">
|
||||
<div className="cdp-section-head">
|
||||
<span className="cdp-section-icon"><MdPublic /></span>
|
||||
<span className="cdp-section-title">Day overview</span>
|
||||
</div>
|
||||
<div className="cdp-tiles">
|
||||
<div className="cdp-tile">
|
||||
<div className="cdp-tile-label">
|
||||
<MdStraighten /> Distance
|
||||
</div>
|
||||
<div className="cdp-tile-value">
|
||||
{sum.actualKm.toFixed(1)}
|
||||
<span className="cdp-tile-unit">km</span>
|
||||
</div>
|
||||
<div className="cdp-tile-sub">
|
||||
planned {sum.plannedKm.toFixed(1)} km
|
||||
</div>
|
||||
</div>
|
||||
<div className={`cdp-tile${sum.anomalies > 0 ? ' is-warn' : ''}`}>
|
||||
<div className="cdp-tile-label">
|
||||
<MdWarning /> Deviation
|
||||
</div>
|
||||
<div className={`cdp-tile-value ${stepDeltaPct}`}>
|
||||
{sum.kmDeltaPct != null
|
||||
? `${sum.kmDeltaPct > 0 ? '+' : ''}${sum.kmDeltaPct.toFixed(0)}%`
|
||||
: '—'}
|
||||
</div>
|
||||
<div className="cdp-tile-sub">
|
||||
{sum.anomalies > 0 ? `${sum.anomalies} flagged` : 'within plan'}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`cdp-tile${sum.late > 0 ? ' is-warn' : ''}`}>
|
||||
<div className="cdp-tile-label">
|
||||
<MdAccessTime /> On-time
|
||||
</div>
|
||||
<div className="cdp-tile-value">
|
||||
{sum.onTime}
|
||||
{totalSteps > 0 && (
|
||||
<span className="cdp-tile-unit">/{totalSteps}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="cdp-tile-sub">
|
||||
{sum.late > 0 ? `${sum.late} late` : 'all on schedule'}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`cdp-tile ${isLoss ? 'is-loss' : 'is-gain'}`}>
|
||||
<div className="cdp-tile-label">
|
||||
{isLoss ? <MdTrendingDown /> : <MdTrendingUp />}{' '}
|
||||
{isLoss ? 'Loss' : 'Profit'}
|
||||
</div>
|
||||
<div className="cdp-tile-value">
|
||||
{isLoss ? '-' : ''}₹{Math.abs(totalProfit).toFixed(0)}
|
||||
</div>
|
||||
<div className="cdp-tile-sub">
|
||||
{focusedRider.orders.length}{' '}
|
||||
{focusedRider.orders.length === 1 ? 'order' : 'orders'}
|
||||
{' · '}
|
||||
{delivered} delivered
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Route sequence — collapsible, default open. Shows planned vs
|
||||
actual visit order with cascade-aware diff grouping. */}
|
||||
{compareDeltas.length > 0 && (
|
||||
<section className="cdp-section cdp-seq-section">
|
||||
<div
|
||||
className="cdp-section-head cdp-section-head-clickable"
|
||||
onClick={() => setSequenceOpen((v) => !v)}
|
||||
role="button"
|
||||
aria-expanded={sequenceOpen}
|
||||
title={sequenceOpen ? 'Collapse route sequence' : 'Expand route sequence'}
|
||||
>
|
||||
<span className="cdp-section-icon">
|
||||
<MdSwapHoriz />
|
||||
</span>
|
||||
<span className="cdp-section-title">Route sequence</span>
|
||||
<span
|
||||
className={`cdp-seq-status${outOfOrderSteps.length > 0 ? ' is-warn' : ' is-good'}`}
|
||||
>
|
||||
{outOfOrderSteps.length > 0
|
||||
? `${outOfOrderSteps.length} out of order`
|
||||
: 'In order'}
|
||||
</span>
|
||||
<span className={`cdp-seq-toggle${sequenceOpen ? ' is-open' : ''}`}>
|
||||
<MdExpandMore />
|
||||
</span>
|
||||
</div>
|
||||
{sequenceOpen && (
|
||||
<div className="cdp-seq">
|
||||
{outOfOrderSteps.length > 0 ? (
|
||||
<ul className="cdp-seq-diffs">
|
||||
{seqRuns.map((run, runIdx) => {
|
||||
if (run.items.length === 1) {
|
||||
return renderDiffRow(run.items[0]);
|
||||
}
|
||||
const first = run.items[0];
|
||||
const last = run.items[run.items.length - 1];
|
||||
const isOpen = expandedSeqGroups.has(runIdx);
|
||||
const deltaStr =
|
||||
run.delta > 0 ? `+${run.delta}` : `${run.delta}`;
|
||||
const groupFocused = run.items.some(
|
||||
(it) => it.d.sequenceStep === focusedCompareStep
|
||||
);
|
||||
return (
|
||||
<React.Fragment key={`run-${runIdx}-${first.d.sequenceStep}`}>
|
||||
<li
|
||||
className={`cdp-seq-diff is-group${isOpen ? ' is-expanded' : ''}${groupFocused ? ' is-focused' : ''}`}
|
||||
onClick={() => toggleSeqGroup(runIdx)}
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
<span className="cdp-seq-group-num">
|
||||
<span
|
||||
className="cdp-seq-group-num-bg"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${stepColor((first.planned || 1) - 1)}, ${stepColor((last.planned || 1) - 1)})`
|
||||
}}
|
||||
/>
|
||||
<span className="cdp-seq-group-num-label">
|
||||
{run.items.length}×
|
||||
</span>
|
||||
</span>
|
||||
<div className="cdp-seq-diff-body">
|
||||
<div className="cdp-seq-diff-title">
|
||||
{run.items.length} consecutive steps shifted{' '}
|
||||
<span className="cdp-seq-group-delta">{deltaStr}</span>
|
||||
</div>
|
||||
<div className="cdp-seq-diff-sub">
|
||||
Planned {ordinal(first.planned)}–{ordinal(last.planned)}{' '}
|
||||
visited{' '}
|
||||
<strong>
|
||||
{ordinal(first.actualPos)}–{ordinal(last.actualPos)}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
<span className="cdp-seq-diff-tag">{deltaStr}</span>
|
||||
<span
|
||||
className={`cdp-seq-group-toggle${isOpen ? ' is-open' : ''}`}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<MdExpandMore />
|
||||
</span>
|
||||
</li>
|
||||
{isOpen && (
|
||||
<li className="cdp-seq-group-children-wrap">
|
||||
<ul className="cdp-seq-group-children">
|
||||
{run.items.map((it) => renderDiffRow(it, false))}
|
||||
</ul>
|
||||
</li>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="cdp-seq-good">
|
||||
<MdCheckCircle /> Rider followed the planned route in order.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Timing KPIs */}
|
||||
{(firstDelivery || lastDelivery) && (
|
||||
<section className="cdp-section">
|
||||
<div className="cdp-section-head">
|
||||
<span className="cdp-section-icon"><MdTimer /></span>
|
||||
<span className="cdp-section-title">Timing KPIs</span>
|
||||
</div>
|
||||
<div className="cdp-kpi-row">
|
||||
<div className="cdp-kpi">
|
||||
<div className="cdp-kpi-label">First delivery</div>
|
||||
<div className="cdp-kpi-value">
|
||||
{firstDelivery ? firstDelivery.format('hh:mm A') : '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="cdp-kpi">
|
||||
<div className="cdp-kpi-label">Last delivery</div>
|
||||
<div className="cdp-kpi-value">
|
||||
{lastDelivery ? lastDelivery.format('hh:mm A') : '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="cdp-kpi">
|
||||
<div className="cdp-kpi-label">Active time</div>
|
||||
<div className="cdp-kpi-value">
|
||||
{activeMin > 0
|
||||
? activeMin >= 60
|
||||
? `${Math.floor(activeMin / 60)}h ${activeMin % 60}m`
|
||||
: `${activeMin}m`
|
||||
: '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="cdp-kpi">
|
||||
<div className="cdp-kpi-label">Avg / stop</div>
|
||||
<div className="cdp-kpi-value">
|
||||
{avgPerStop > 0 ? `${avgPerStop}m` : '—'}
|
||||
</div>
|
||||
</div>
|
||||
{avgSpeed != null && (
|
||||
<div className="cdp-kpi">
|
||||
<div className="cdp-kpi-label">Avg speed</div>
|
||||
<div className="cdp-kpi-value">
|
||||
{avgSpeed}
|
||||
<span className="cdp-kpi-unit">km/h</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Highlights — best/worst step quick-pick. */}
|
||||
{(bestStep || worstStep) && (
|
||||
<section className="cdp-section">
|
||||
<div className="cdp-section-head">
|
||||
<span className="cdp-section-icon"><MdTrendingUp /></span>
|
||||
<span className="cdp-section-title">Highlights</span>
|
||||
</div>
|
||||
<div className="cdp-highlights">
|
||||
{bestStep && (
|
||||
<div
|
||||
className="cdp-highlight is-best"
|
||||
onClick={() => focusStep(bestStep.sequenceStep)}
|
||||
role="button"
|
||||
title="Focus this step"
|
||||
>
|
||||
<span
|
||||
className="cdp-highlight-num"
|
||||
style={{ background: stepColor(bestStep.sequenceStep - 1) }}
|
||||
>
|
||||
{bestStep.sequenceStep}
|
||||
</span>
|
||||
<div className="cdp-highlight-body">
|
||||
<div className="cdp-highlight-label">
|
||||
<MdCheckCircle /> Fastest stop
|
||||
</div>
|
||||
<div className="cdp-highlight-title">
|
||||
{bestStep.deliverycustomer || `Step ${bestStep.sequenceStep}`}
|
||||
</div>
|
||||
<div className="cdp-highlight-meta">
|
||||
{bestStep.timeDeltaMin != null
|
||||
? `${bestStep.timeDeltaMin > 0 ? '+' : ''}${bestStep.timeDeltaMin} min vs plan`
|
||||
: 'on schedule'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{worstStep && (
|
||||
<div
|
||||
className="cdp-highlight is-worst"
|
||||
onClick={() => focusStep(worstStep.sequenceStep)}
|
||||
role="button"
|
||||
title="Focus this step"
|
||||
>
|
||||
<span
|
||||
className="cdp-highlight-num"
|
||||
style={{ background: stepColor(worstStep.sequenceStep - 1) }}
|
||||
>
|
||||
{worstStep.sequenceStep}
|
||||
</span>
|
||||
<div className="cdp-highlight-body">
|
||||
<div className="cdp-highlight-label">
|
||||
<MdWarning /> Biggest deviation
|
||||
</div>
|
||||
<div className="cdp-highlight-title">
|
||||
{worstStep.deliverycustomer || `Step ${worstStep.sequenceStep}`}
|
||||
</div>
|
||||
<div className="cdp-highlight-meta">
|
||||
{worstStep.kmDeltaPct != null
|
||||
? `${worstStep.kmDeltaPct > 0 ? '+' : ''}${worstStep.kmDeltaPct.toFixed(0)}% route`
|
||||
: ''}
|
||||
{worstStep.timeDeltaMin != null && worstStep.timeDeltaMin > 0
|
||||
? ` · +${worstStep.timeDeltaMin}m late`
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Trip breakdown — only when rider ran >1 trip. */}
|
||||
{tripList.length > 1 && (
|
||||
<section className="cdp-section">
|
||||
<div className="cdp-section-head">
|
||||
<span className="cdp-section-icon"><MdSwapHoriz /></span>
|
||||
<span className="cdp-section-title">Trips ({tripList.length})</span>
|
||||
</div>
|
||||
<div className="cdp-trips">
|
||||
{tripList.map((t) => {
|
||||
const tripLoss = t.profit < 0;
|
||||
return (
|
||||
<div key={`trip-${t.tNum}`} className="cdp-trip">
|
||||
<div className="cdp-trip-head">
|
||||
<span className="cdp-trip-badge">Trip {t.tNum}</span>
|
||||
<span className="cdp-trip-meta">
|
||||
{t.delivered}/{t.count} delivered
|
||||
</span>
|
||||
</div>
|
||||
<div className="cdp-trip-stats">
|
||||
<span title="Distance">
|
||||
<MdStraighten />
|
||||
{t.actualKm.toFixed(1)}km
|
||||
<small> / {t.plannedKm.toFixed(1)}</small>
|
||||
</span>
|
||||
<span
|
||||
className={tripLoss ? 'is-over' : ''}
|
||||
title={tripLoss ? 'Loss' : 'Profit'}
|
||||
>
|
||||
<MdAccountBalanceWallet />
|
||||
{tripLoss ? '-' : ''}₹{Math.abs(t.profit).toFixed(0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Focused-step deep-dive — appears only when a step is selected. */}
|
||||
{focused && (() => {
|
||||
const color = stepColor(focused.sequenceStep - 1);
|
||||
const kmDeltaSign = focused.kmDelta >= 0 ? '+' : '';
|
||||
const kmDeltaCls = focused.anomaly
|
||||
? 'is-over'
|
||||
: focused.kmDelta < -0.1
|
||||
? 'is-under'
|
||||
: '';
|
||||
const timeDeltaCls =
|
||||
focused.timeDeltaMin != null
|
||||
? focused.timeDeltaMin > 10
|
||||
? 'is-over'
|
||||
: focused.timeDeltaMin < -2
|
||||
? 'is-under'
|
||||
: ''
|
||||
: '';
|
||||
const statusStyle = getStatusStyle(focused.orderstatus);
|
||||
const profit = parseFloat(focused.order?.profit || 0);
|
||||
return (
|
||||
<section className="cdp-section">
|
||||
<div className="cdp-section-head">
|
||||
<span className="cdp-section-icon"><MdSwapHoriz /></span>
|
||||
<span className="cdp-section-title">
|
||||
Step {focused.sequenceStep} details
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="cdp-section-clear"
|
||||
onClick={() => setFocusedCompareStep(null)}
|
||||
title="Clear step focus"
|
||||
>
|
||||
Show all
|
||||
</button>
|
||||
</div>
|
||||
<div className={`compare-delta${focused.anomaly ? ' is-anomaly' : ''}`}>
|
||||
<div className="compare-delta-title">
|
||||
<span
|
||||
className="compare-delta-step-badge"
|
||||
style={{ background: color }}
|
||||
>
|
||||
{focused.sequenceStep}
|
||||
</span>
|
||||
<div className="compare-delta-title-text">
|
||||
<div className="compare-delta-title-main">
|
||||
{focused.deliverycustomer || `Step ${focused.sequenceStep}`}
|
||||
</div>
|
||||
<div className="compare-delta-title-sub">
|
||||
{focused.pickupcustomer ? `from ${focused.pickupcustomer} · ` : ''}
|
||||
Order #{focused.orderid}
|
||||
</div>
|
||||
</div>
|
||||
{focused.orderstatus && (
|
||||
<span
|
||||
className="compare-delta-status"
|
||||
style={{ background: statusStyle.bg, color: statusStyle.fg }}
|
||||
>
|
||||
{statusStyle.label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="compare-delta-grid">
|
||||
<div className={`compare-delta-cell${focused.anomaly ? ' is-anomaly' : ''}`}>
|
||||
<span className="compare-delta-cell-label">Distance</span>
|
||||
<span className="compare-delta-cell-val">
|
||||
{focused.actualKm.toFixed(2)}{' '}
|
||||
<span className="compare-delta-cell-unit">km</span>
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
planned {focused.plannedKm.toFixed(2)} km
|
||||
</span>
|
||||
</div>
|
||||
<div className="compare-delta-cell">
|
||||
<span className="compare-delta-cell-label">Δ Route</span>
|
||||
<span className={`compare-delta-cell-val ${kmDeltaCls}`}>
|
||||
{kmDeltaSign}
|
||||
{focused.kmDelta.toFixed(2)} km
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
{focused.kmDeltaPct != null
|
||||
? `${kmDeltaSign}${focused.kmDeltaPct.toFixed(0)}% vs plan`
|
||||
: 'no planned km'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="compare-delta-cell">
|
||||
<span className="compare-delta-cell-label">Time</span>
|
||||
<span className={`compare-delta-cell-val ${timeDeltaCls}`}>
|
||||
{focused.timeDeltaMin != null
|
||||
? `${focused.timeDeltaMin > 0 ? '+' : ''}${focused.timeDeltaMin} min`
|
||||
: '—'}
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
{focused.actualTs && focused.expectedTs
|
||||
? `${focused.actualTs.format('HH:mm')} vs ${focused.expectedTs.format('HH:mm')}`
|
||||
: focused.actualTs
|
||||
? `delivered ${focused.actualTs.format('HH:mm')}`
|
||||
: 'in flight'}
|
||||
</span>
|
||||
</div>
|
||||
{!Number.isNaN(profit) && profit !== 0 && (
|
||||
<div className={`compare-delta-cell${profit < 0 ? ' is-anomaly' : ''}`}>
|
||||
<span className="compare-delta-cell-label">
|
||||
{profit < 0 ? 'Loss' : 'Profit'}
|
||||
</span>
|
||||
<span className={`compare-delta-cell-val ${profit < 0 ? 'is-over' : 'is-under'}`}>
|
||||
{profit < 0 ? '-' : ''}₹{Math.abs(profit).toFixed(0)}
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">order revenue</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Deviations list — anomaly-only steps. */}
|
||||
{deviations.length > 0 && (
|
||||
<section className="cdp-section">
|
||||
<div className="cdp-section-head">
|
||||
<span className="cdp-section-icon cdp-icon-warn">
|
||||
<MdErrorOutline />
|
||||
</span>
|
||||
<span className="cdp-section-title">
|
||||
Deviations ({deviations.length})
|
||||
</span>
|
||||
</div>
|
||||
<ul className="cdp-dev-list">
|
||||
{deviations.map((d) => {
|
||||
const color = stepColor(d.sequenceStep - 1);
|
||||
const kmSign = d.kmDelta >= 0 ? '+' : '';
|
||||
return (
|
||||
<li
|
||||
key={`dev-${d.sequenceStep}`}
|
||||
className={`cdp-dev-item${focusedCompareStep === d.sequenceStep ? ' is-focused' : ''}`}
|
||||
onClick={() => focusStep(d.sequenceStep)}
|
||||
>
|
||||
<span className="cdp-dev-num" style={{ background: color }}>
|
||||
{d.sequenceStep}
|
||||
</span>
|
||||
<div className="cdp-dev-body">
|
||||
<div className="cdp-dev-title">
|
||||
{d.deliverycustomer || `Step ${d.sequenceStep}`}
|
||||
</div>
|
||||
<div className="cdp-dev-meta">
|
||||
{d.kmDeltaPct != null && (
|
||||
<span className="cdp-dev-chip is-over">
|
||||
{kmSign}{d.kmDeltaPct.toFixed(0)}% route
|
||||
</span>
|
||||
)}
|
||||
{d.timeDeltaMin != null && d.timeDeltaMin > 10 && (
|
||||
<span className="cdp-dev-chip is-over">
|
||||
+{d.timeDeltaMin}m late
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Full step list. */}
|
||||
<section className="cdp-section">
|
||||
<div className="cdp-section-head">
|
||||
<span className="cdp-section-icon">
|
||||
<MdFormatListBulleted />
|
||||
</span>
|
||||
<span className="cdp-section-title">
|
||||
Steps ({compareDeltas.length})
|
||||
</span>
|
||||
<span className="cdp-section-sub">
|
||||
{delivered}/{compareDeltas.length} delivered
|
||||
</span>
|
||||
</div>
|
||||
<ul className="cdp-step-list">
|
||||
{compareDeltas.map((d) => {
|
||||
const color = stepColor(d.sequenceStep - 1);
|
||||
const statusLow = String(d.orderstatus || '').toLowerCase();
|
||||
const isDelivered = FINAL_STATUSES.has(statusLow);
|
||||
const isSkipped = SKIPPED_STATUSES.has(statusLow);
|
||||
const isCorrect = isDelivered && !d.anomaly;
|
||||
const isFocused = focusedCompareStep === d.sequenceStep;
|
||||
const statusStyle = getStatusStyle(d.orderstatus);
|
||||
const profit = parseFloat(d.order?.profit || 0);
|
||||
const kmSign = d.kmDelta >= 0 ? '+' : '';
|
||||
const timeCls =
|
||||
d.timeDeltaMin != null
|
||||
? d.timeDeltaMin > 10
|
||||
? 'is-over'
|
||||
: d.timeDeltaMin < -2
|
||||
? 'is-under'
|
||||
: ''
|
||||
: '';
|
||||
const stepCls = [
|
||||
'cdp-step',
|
||||
isFocused ? 'is-focused' : '',
|
||||
d.anomaly ? 'is-anomaly' : '',
|
||||
isCorrect ? 'is-correct' : '',
|
||||
isSkipped ? 'is-skipped' : '',
|
||||
d.isLoading ? 'is-loading' : ''
|
||||
].filter(Boolean).join(' ');
|
||||
return (
|
||||
<li
|
||||
key={`step-${d.sequenceStep}`}
|
||||
className={stepCls}
|
||||
onClick={() => focusStep(d.sequenceStep)}
|
||||
>
|
||||
<span className="cdp-step-num" style={{ background: color }}>
|
||||
{d.sequenceStep}
|
||||
{isCorrect && (
|
||||
<span className="cdp-step-check">
|
||||
<MdCheckCircle />
|
||||
</span>
|
||||
)}
|
||||
{d.anomaly && (
|
||||
<span className="cdp-step-flag">
|
||||
<MdErrorOutline />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<div className="cdp-step-body">
|
||||
<div className="cdp-step-title-row">
|
||||
<span className="cdp-step-title">
|
||||
{d.deliverycustomer || `Step ${d.sequenceStep}`}
|
||||
</span>
|
||||
{d.orderstatus && (
|
||||
<span
|
||||
className="cdp-step-status"
|
||||
style={{ background: statusStyle.bg, color: statusStyle.fg }}
|
||||
>
|
||||
{statusStyle.label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="cdp-step-sub">
|
||||
{d.pickupcustomer ? `from ${d.pickupcustomer} · ` : ''}
|
||||
Order #{d.orderid}
|
||||
</div>
|
||||
<div className="cdp-step-deltas">
|
||||
<span className="cdp-step-delta" title="Distance">
|
||||
<MdStraighten />
|
||||
{d.actualKm.toFixed(1)}km
|
||||
{d.plannedKm > 0 && (
|
||||
<small className={d.anomaly ? 'is-over' : ''}>
|
||||
{' '}{kmSign}{d.kmDelta.toFixed(1)}
|
||||
</small>
|
||||
)}
|
||||
</span>
|
||||
<span className={`cdp-step-delta ${timeCls}`} title="Delivery time">
|
||||
<MdAccessTime />
|
||||
{d.actualTs ? d.actualTs.format('HH:mm') : '—'}
|
||||
{d.timeDeltaMin != null && (
|
||||
<small>
|
||||
{' '}{d.timeDeltaMin > 0 ? '+' : ''}{d.timeDeltaMin}m
|
||||
</small>
|
||||
)}
|
||||
</span>
|
||||
{!Number.isNaN(profit) && profit !== 0 && (
|
||||
<span
|
||||
className={`cdp-step-delta${profit < 0 ? ' is-over' : ''}`}
|
||||
title={profit < 0 ? 'Loss' : 'Profit'}
|
||||
>
|
||||
<MdAccountBalanceWallet />
|
||||
{profit < 0 ? '-' : ''}₹{Math.abs(profit).toFixed(0)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
export default CompareDataPanel;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -35,29 +35,29 @@ import {
|
||||
MdSearch,
|
||||
MdChevronLeft,
|
||||
MdChevronRight,
|
||||
MdLocalMall
|
||||
MdLocalMall,
|
||||
MdCheckCircle,
|
||||
MdErrorOutline,
|
||||
MdWarning,
|
||||
MdClose,
|
||||
MdFormatListBulleted,
|
||||
MdTimer
|
||||
} from 'react-icons/md';
|
||||
import { fetchDeliveries, fetchAppLocations, getRiderPeriodicLogs, fetchRidersLogs } from '../../api/api';
|
||||
import {
|
||||
STATUS_STYLES,
|
||||
getStatusStyle,
|
||||
FINAL_STATUSES,
|
||||
SKIPPED_STATUSES,
|
||||
STEP_PALETTE,
|
||||
stepColor
|
||||
} from './dispatchShared';
|
||||
import CompareDataPanel from './CompareDataPanel';
|
||||
import './Dispatch.css';
|
||||
|
||||
// Phosphor "motorcycle" (filled) — clean side-view bike that reads well at small sizes.
|
||||
const MOTORBIKE_SVG = `<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="#fff" d="M200,112a40,40,0,0,0-12.07,1.86L161.6,72H200a8,8,0,0,1,8,8v8a8,8,0,0,0,16,0V80a24,24,0,0,0-24-24H160a8,8,0,0,0-6.79,3.77l-9.34,15.06L130.39,52A8,8,0,0,0,124,48H88a8,8,0,0,0,0,16h31.69l13.34,21.84L107.5,128H56A40,40,0,1,0,96,168.4V160a8,8,0,0,1,16,0v8.4a40.06,40.06,0,0,0,32,31.2V184a8,8,0,0,1,16,0v15.6A40,40,0,1,0,200,112ZM56,184a24,24,0,1,1,24-24A24,24,0,0,1,56,184Zm70.46-44.71h0L141,116.45,156.6,142h0a40,40,0,0,0-14,28h-16A40.16,40.16,0,0,0,126.46,139.29ZM200,184a24,24,0,1,1,24-24A24,24,0,0,1,200,184Z"/></svg>`;
|
||||
|
||||
const STATUS_STYLES = {
|
||||
created: { label: 'Created', bg: '#3b82f6', fg: '#fff' },
|
||||
pending: { label: 'Pending', bg: '#f59e0b', fg: '#fff' },
|
||||
accepted: { label: 'Accepted', bg: '#8b5cf6', fg: '#fff' },
|
||||
arrived: { label: 'Arrived', bg: '#ea580c', fg: '#fff' },
|
||||
picked: { label: 'Picked', bg: '#0ea5e9', fg: '#fff' },
|
||||
active: { label: 'Active', bg: '#0ea5e9', fg: '#fff' },
|
||||
delivered: { label: 'Delivered', bg: '#22c55e', fg: '#fff' },
|
||||
skipped: { label: 'Skipped', bg: '#94a3b8', fg: '#fff' },
|
||||
cancelled: { label: 'Cancelled', bg: '#ef4444', fg: '#fff' }
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) =>
|
||||
STATUS_STYLES[String(status || '').toLowerCase()] || { label: status || 'Unknown', bg: '#64748b', fg: '#fff' };
|
||||
|
||||
const toNum = (v) => {
|
||||
const n = parseFloat(v);
|
||||
return Number.isFinite(n) ? n : NaN;
|
||||
@@ -436,8 +436,6 @@ function splitPolylineByDrops(polyline, drops) {
|
||||
return segments;
|
||||
}
|
||||
|
||||
const FINAL_STATUSES = new Set(['delivered']);
|
||||
const SKIPPED_STATUSES = new Set(['cancelled', 'skipped']);
|
||||
|
||||
// --- Marker popup helpers ---
|
||||
// Strip the date portion from an API timestamp — operators viewing today's
|
||||
@@ -571,31 +569,10 @@ L.Icon.Default.mergeOptions({
|
||||
|
||||
const RIDER_COLORS = ['#0055FF', '#00D82C', '#FF6B00', '#9D00FF', '#FF00A8', '#00C2B2', '#FF9900', '#FF0000'];
|
||||
|
||||
// Per-step palette used by the Compare map (polylines, timeline dots, drop
|
||||
// pins, delta panel). Wider and more deliberately spaced around the hue
|
||||
// wheel than RIDER_COLORS so a 10-delivery rider day reads as 10 visibly
|
||||
// different lines — operators don't have to second-guess which polyline
|
||||
// is step 7 vs step 2. Tuned darker than RIDER_COLORS so the lines stay
|
||||
// legible on the light OSM tile background.
|
||||
const STEP_PALETTE = [
|
||||
'#2563eb', // blue-600
|
||||
'#dc2626', // red-600
|
||||
'#16a34a', // green-600
|
||||
'#ea580c', // orange-600
|
||||
'#9333ea', // purple-600
|
||||
'#0891b2', // cyan-600
|
||||
'#ca8a04', // yellow-600
|
||||
'#db2777', // pink-600
|
||||
'#0f766e', // teal-700
|
||||
'#7c3aed', // violet-600
|
||||
'#65a30d', // lime-600
|
||||
'#0284c7', // sky-600
|
||||
'#b91c1c', // red-700
|
||||
'#15803d', // green-700
|
||||
'#a16207', // yellow-700
|
||||
'#86198f' // fuchsia-800
|
||||
];
|
||||
const stepColor = (i) => STEP_PALETTE[((i % STEP_PALETTE.length) + STEP_PALETTE.length) % STEP_PALETTE.length];
|
||||
// STATUS_STYLES, getStatusStyle, FINAL_STATUSES, SKIPPED_STATUSES,
|
||||
// STEP_PALETTE, stepColor — moved to ./dispatchShared.js so the
|
||||
// extracted CompareDataPanel component can import them without forcing
|
||||
// a circular dependency on Dispatch.js.
|
||||
|
||||
const MapController = ({ focusedItem, viewMode, orders, kitchens, locationKey }) => {
|
||||
const map = useMap();
|
||||
@@ -973,7 +950,18 @@ 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);
|
||||
// Default-open toggle for the "Route sequence" section in the compare data
|
||||
// panel — shows planned vs actual visit order with out-of-order steps flagged.
|
||||
const [sequenceOpen, setSequenceOpen] = useState(true);
|
||||
// Default-open toggle for the planned/actual timeline strip above the
|
||||
// compare actual-map. Lets the operator collapse the dual step rows when
|
||||
// they want maximum map real estate.
|
||||
const [compareTimelineOpen, setCompareTimelineOpen] = useState(true);
|
||||
// Set of route-sequence "diff group" indices that are currently expanded.
|
||||
// Cascade-aware: when N consecutive steps share the same shift amount,
|
||||
// they're collapsed into one summary row by default; clicking it adds the
|
||||
// run's index to this set so the individual steps reveal.
|
||||
const [expandedSeqGroups, setExpandedSeqGroups] = useState(() => new Set());
|
||||
// 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.
|
||||
@@ -1010,6 +998,20 @@ const Dispatch = ({
|
||||
const syncSourceRef = useRef(null);
|
||||
const syncLastInputAtRef = useRef(0);
|
||||
|
||||
// Stable Canvas renderer for the planned (left) map. Leaflet's default
|
||||
// canvas (used when `preferCanvas` is true) only draws ~10% beyond the
|
||||
// viewport — the moment a drag carries a polyline edge outside that
|
||||
// padding, the off-area pixels are blank until `moveend` triggers a
|
||||
// redraw, which makes polylines look "broken" mid-drag. Bumping padding
|
||||
// to 1.5 makes the canvas ~4× viewport area, so dragging within a screen
|
||||
// of travel keeps every polyline drawn without re-raster gaps. The
|
||||
// actual (right) map's renderer is created later, after focusedRider is
|
||||
// in scope, since it remounts per rider.
|
||||
const plannedMapRendererRef = useRef(null);
|
||||
if (!plannedMapRendererRef.current) {
|
||||
plannedMapRendererRef.current = L.canvas({ padding: 1.5, tolerance: 5 });
|
||||
}
|
||||
|
||||
// Pull the partners/getriderlogs feed for the currently selected hub + date.
|
||||
// This endpoint returns the exact live GPS position for every rider at the
|
||||
// hub (latitude/longitude/logdate/status). We render those positions as
|
||||
@@ -1335,6 +1337,16 @@ const Dispatch = ({
|
||||
? (selectedRiderId ? (riders.find((r) => r.id === selectedRiderId) || null) : null)
|
||||
: internalFocusedRider;
|
||||
|
||||
// Per-rider canvas renderer for the actual (right) map in Compare mode.
|
||||
// The actual map remounts on rider change (via key={`compare-${rider.id}`})
|
||||
// so we recreate the renderer in lock-step to keep its map binding fresh.
|
||||
// Same padding as the planned map (1.5 → ~4× viewport area) so polylines
|
||||
// don't visually break at the canvas edge during drag.
|
||||
const actualMapRenderer = useMemo(
|
||||
() => L.canvas({ padding: 1.5, tolerance: 5 }),
|
||||
[focusedRider?.id]
|
||||
);
|
||||
|
||||
// Single setter used by every interactive site in the UI. In uncontrolled mode it
|
||||
// updates local state; in controlled mode it only notifies the parent.
|
||||
const handleRiderFocus = useCallback(
|
||||
@@ -1566,6 +1578,18 @@ const Dispatch = ({
|
||||
return { plannedKm, actualKm, kmDeltaPct, anomalies, late, onTime };
|
||||
}, [compareDeltas]);
|
||||
|
||||
const plannedOrdered = useMemo(() => {
|
||||
return [...compareDeltas].sort(
|
||||
(a, b) => (a.order?.step || a.sequenceStep) - (b.order?.step || b.sequenceStep)
|
||||
);
|
||||
}, [compareDeltas]);
|
||||
|
||||
const actualOrdered = useMemo(() => {
|
||||
return [...compareDeltas].sort(
|
||||
(a, b) => a.sequenceStep - b.sequenceStep
|
||||
);
|
||||
}, [compareDeltas]);
|
||||
|
||||
// When Compare is open and a step is focused, override MapController's
|
||||
// focusedItem with a synthetic single-order item so the planned (left)
|
||||
// map zooms onto the same delivery the operator is scrutinizing. Without
|
||||
@@ -1587,7 +1611,7 @@ const Dispatch = ({
|
||||
// stuck on a step that may not exist in their day.
|
||||
useEffect(() => {
|
||||
setFocusedCompareStep(null);
|
||||
setDaySummaryOpen(false);
|
||||
setExpandedSeqGroups(new Set());
|
||||
}, [compareOpen, focusedRider?.id]);
|
||||
|
||||
// Mirror pan/zoom from whichever map the user is driving. Called by
|
||||
@@ -2446,7 +2470,7 @@ const Dispatch = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`testing-container${embedded ? ' embedded' : ''}`}>
|
||||
<div className={`dispatch-container${embedded ? ' embedded' : ''}${compareOpen ? ' compare-open' : ''}`}>
|
||||
{!embedded && (
|
||||
<div id="hdr">
|
||||
<div className="logo">
|
||||
@@ -3567,7 +3591,7 @@ const Dispatch = ({
|
||||
scrollWheelZoom
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
zoomControl={false}
|
||||
preferCanvas
|
||||
renderer={plannedMapRendererRef.current}
|
||||
inertia
|
||||
inertiaDeceleration={2400}
|
||||
inertiaMaxSpeed={2000}
|
||||
@@ -3864,65 +3888,138 @@ const Dispatch = ({
|
||||
{compareSyncEnabled ? <MdGpsFixed /> : <MdMyLocation />}
|
||||
{compareSyncEnabled ? 'Sync' : 'Unlinked'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`compare-timeline-toggle${compareTimelineOpen ? ' is-open' : ''}`}
|
||||
onClick={() => setCompareTimelineOpen((v) => !v)}
|
||||
title={compareTimelineOpen
|
||||
? 'Hide planned/actual timeline'
|
||||
: 'Show planned/actual timeline'}
|
||||
aria-expanded={compareTimelineOpen}
|
||||
>
|
||||
<MdExpandMore />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step timeline — every delivery as a tappable dot in chronological
|
||||
order. The operator can drill into any step to scrutinize that
|
||||
single delivery on both maps. Filled = delivered, ring = pending,
|
||||
dim = cancelled/skipped, ring with spinner = GPS still loading. */}
|
||||
dim = cancelled/skipped, ring with spinner = GPS still loading.
|
||||
Whole strip (timeline + progress + legend) collapses via the
|
||||
header chevron — open by default. */}
|
||||
{compareTimelineOpen && (
|
||||
<>
|
||||
<div className="compare-timeline-wrap">
|
||||
<div className="compare-timeline">
|
||||
{compareDeltas.map((d, i) => {
|
||||
const statusLow = String(d.orderstatus || '').toLowerCase();
|
||||
const isDelivered = FINAL_STATUSES.has(statusLow);
|
||||
const isSkipped = SKIPPED_STATUSES.has(statusLow);
|
||||
const isFocused = focusedCompareStep === d.sequenceStep;
|
||||
const isLoading = d.isLoading && d.coordsCount === 0;
|
||||
const isNoData = !d.isLoading && d.coordsCount === 0;
|
||||
const color = stepColor(i);
|
||||
const cls = [
|
||||
'compare-step',
|
||||
isFocused && 'is-focused',
|
||||
isDelivered && 'is-delivered',
|
||||
isSkipped && 'is-skipped',
|
||||
!isDelivered && !isSkipped && 'is-pending',
|
||||
isLoading && 'is-loading',
|
||||
isNoData && 'is-no-data',
|
||||
d.anomaly && 'is-anomaly'
|
||||
].filter(Boolean).join(' ');
|
||||
return (
|
||||
<React.Fragment key={`step-${d.deliveryid}`}>
|
||||
{i > 0 && <span className="compare-step-spacer" />}
|
||||
<button
|
||||
type="button"
|
||||
className={cls}
|
||||
style={{ '--step-color': color }}
|
||||
onClick={() =>
|
||||
setFocusedCompareStep((prev) =>
|
||||
prev === d.sequenceStep ? null : d.sequenceStep
|
||||
)
|
||||
}
|
||||
title={
|
||||
`Step ${d.sequenceStep}` +
|
||||
(d.deliverycustomer ? ` · ${d.deliverycustomer}` : '') +
|
||||
(d.actualTs ? ` · ${d.actualTs.format('hh:mm A')}` : '') +
|
||||
(d.anomaly ? ' · deviation flagged' : '')
|
||||
}
|
||||
>
|
||||
<span className="compare-step-circle">
|
||||
{isLoading ? <span className="compare-step-spin" /> : d.sequenceStep}
|
||||
</span>
|
||||
{d.actualTs && (
|
||||
<span className="compare-step-tick">
|
||||
{d.actualTs.format('HH:mm')}
|
||||
</span>
|
||||
)}
|
||||
{d.anomaly && <span className="compare-step-flag" title="Deviation flagged" />}
|
||||
</button>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
<div className="compare-timeline-container">
|
||||
<div className="compare-timeline-labels">
|
||||
<div className="compare-timeline-label">Planned</div>
|
||||
<div className="compare-timeline-label">Actual</div>
|
||||
</div>
|
||||
<div className="compare-timeline-scrollable">
|
||||
{/* Planned Row */}
|
||||
<div className="compare-timeline-track is-planned">
|
||||
{plannedOrdered.map((d, i) => {
|
||||
const statusLow = String(d.orderstatus || '').toLowerCase();
|
||||
const isDelivered = FINAL_STATUSES.has(statusLow);
|
||||
const isSkipped = SKIPPED_STATUSES.has(statusLow);
|
||||
const isFocused = focusedCompareStep === d.sequenceStep;
|
||||
const isLoading = d.isLoading && d.coordsCount === 0;
|
||||
const isNoData = !d.isLoading && d.coordsCount === 0;
|
||||
const plannedStepNum = d.order?.step || d.sequenceStep;
|
||||
const color = stepColor(plannedStepNum - 1);
|
||||
const cls = [
|
||||
'compare-step',
|
||||
isFocused && 'is-focused',
|
||||
isDelivered && 'is-delivered',
|
||||
isSkipped && 'is-skipped',
|
||||
!isDelivered && !isSkipped && 'is-pending',
|
||||
isLoading && 'is-loading',
|
||||
isNoData && 'is-no-data',
|
||||
d.anomaly && 'is-anomaly'
|
||||
].filter(Boolean).join(' ');
|
||||
return (
|
||||
<React.Fragment key={`step-p-${d.deliveryid}`}>
|
||||
{i > 0 && <span className="compare-step-spacer" />}
|
||||
<button
|
||||
type="button"
|
||||
className={cls}
|
||||
style={{ '--step-color': color }}
|
||||
onClick={() =>
|
||||
setFocusedCompareStep((prev) =>
|
||||
prev === d.sequenceStep ? null : d.sequenceStep
|
||||
)
|
||||
}
|
||||
title={
|
||||
`Planned Step ${plannedStepNum}` +
|
||||
(d.deliverycustomer ? ` · ${d.deliverycustomer}` : '') +
|
||||
(d.anomaly ? ' · deviation flagged' : '')
|
||||
}
|
||||
>
|
||||
<span className="compare-step-circle">
|
||||
{isLoading ? <span className="compare-step-spin" /> : plannedStepNum}
|
||||
</span>
|
||||
</button>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Actual Row */}
|
||||
<div className="compare-timeline-track is-actual">
|
||||
{actualOrdered.map((d, i) => {
|
||||
const statusLow = String(d.orderstatus || '').toLowerCase();
|
||||
const isDelivered = FINAL_STATUSES.has(statusLow);
|
||||
const isSkipped = SKIPPED_STATUSES.has(statusLow);
|
||||
const isFocused = focusedCompareStep === d.sequenceStep;
|
||||
const isLoading = d.isLoading && d.coordsCount === 0;
|
||||
const isNoData = !d.isLoading && d.coordsCount === 0;
|
||||
const plannedStepNum = d.order?.step || d.sequenceStep;
|
||||
const color = stepColor(plannedStepNum - 1);
|
||||
const cls = [
|
||||
'compare-step',
|
||||
isFocused && 'is-focused',
|
||||
isDelivered && 'is-delivered',
|
||||
isSkipped && 'is-skipped',
|
||||
!isDelivered && !isSkipped && 'is-pending',
|
||||
isLoading && 'is-loading',
|
||||
isNoData && 'is-no-data',
|
||||
d.anomaly && 'is-anomaly'
|
||||
].filter(Boolean).join(' ');
|
||||
return (
|
||||
<React.Fragment key={`step-a-${d.deliveryid}`}>
|
||||
{i > 0 && <span className="compare-step-spacer" />}
|
||||
<button
|
||||
type="button"
|
||||
className={cls}
|
||||
style={{ '--step-color': color }}
|
||||
onClick={() =>
|
||||
setFocusedCompareStep((prev) =>
|
||||
prev === d.sequenceStep ? null : d.sequenceStep
|
||||
)
|
||||
}
|
||||
title={
|
||||
`Actual Visit ${i + 1} (Planned Step ${plannedStepNum})` +
|
||||
(d.deliverycustomer ? ` · ${d.deliverycustomer}` : '') +
|
||||
(d.actualTs ? ` · ${d.actualTs.format('hh:mm A')}` : '') +
|
||||
(d.anomaly ? ' · deviation flagged' : '')
|
||||
}
|
||||
>
|
||||
<span className="compare-step-circle">
|
||||
{isLoading ? <span className="compare-step-spin" /> : plannedStepNum}
|
||||
</span>
|
||||
{d.actualTs && (
|
||||
<span className="compare-step-tick">
|
||||
{d.actualTs.format('HH:mm')}
|
||||
</span>
|
||||
)}
|
||||
{d.anomaly && <span className="compare-step-flag" title="Deviation flagged" />}
|
||||
</button>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="compare-progress-strip">
|
||||
<div className="compare-progress-bar-wrap">
|
||||
@@ -3970,10 +4067,20 @@ const Dispatch = ({
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
<div className="compare-map-area">
|
||||
{/* Floating badge — mirrors the "Planned Route" pill on the
|
||||
bottom map. Tells the operator at a glance that the top
|
||||
map is the rider's actual GPS trail, not the planned
|
||||
route. The pulsing dot reinforces "live data". */}
|
||||
<div className="compare-actual-label">
|
||||
<span className="compare-actual-dot" />
|
||||
Actual GPS
|
||||
</div>
|
||||
<MapContainer
|
||||
key={`compare-${focusedRider.id}`}
|
||||
center={[11.022, 76.982]}
|
||||
@@ -3981,7 +4088,7 @@ const Dispatch = ({
|
||||
scrollWheelZoom
|
||||
style={{ flex: 1, minHeight: 0, width: '100%' }}
|
||||
zoomControl={false}
|
||||
preferCanvas
|
||||
renderer={actualMapRenderer}
|
||||
inertia
|
||||
inertiaDeceleration={2400}
|
||||
inertiaMaxSpeed={2000}
|
||||
@@ -4262,194 +4369,32 @@ const Dispatch = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delta panel — when a step is focused, shows planned-vs-actual
|
||||
numbers for just that delivery (distance, route deviation %, time
|
||||
variance). When no step is focused, rolls up the same numbers
|
||||
across the whole day. Anomaly cells turn red when a step ran
|
||||
>25% longer than planned or arrived >15 min late. */}
|
||||
{(() => {
|
||||
const focused =
|
||||
focusedCompareStep != null
|
||||
? compareDeltas.find((d) => d.sequenceStep === focusedCompareStep)
|
||||
: null;
|
||||
|
||||
if (focused) {
|
||||
const color = stepColor(focused.sequenceStep - 1);
|
||||
const kmDeltaSign = focused.kmDelta >= 0 ? '+' : '';
|
||||
const kmDeltaCls = focused.anomaly
|
||||
? 'is-over'
|
||||
: focused.kmDelta < -0.1
|
||||
? 'is-under'
|
||||
: '';
|
||||
const timeDeltaCls =
|
||||
focused.timeDeltaMin != null
|
||||
? focused.timeDeltaMin > 10
|
||||
? 'is-over'
|
||||
: focused.timeDeltaMin < -2
|
||||
? 'is-under'
|
||||
: ''
|
||||
: '';
|
||||
const statusStyle = getStatusStyle(focused.orderstatus);
|
||||
return (
|
||||
<div className={`compare-delta${focused.anomaly ? ' is-anomaly' : ''}`}>
|
||||
<div className="compare-delta-title">
|
||||
<span
|
||||
className="compare-delta-step-badge"
|
||||
style={{ background: color }}
|
||||
>
|
||||
{focused.sequenceStep}
|
||||
</span>
|
||||
<div className="compare-delta-title-text">
|
||||
<div className="compare-delta-title-main">
|
||||
{focused.deliverycustomer || `Step ${focused.sequenceStep}`}
|
||||
</div>
|
||||
<div className="compare-delta-title-sub">
|
||||
{focused.pickupcustomer ? `from ${focused.pickupcustomer} · ` : ''}
|
||||
Order #{focused.orderid}
|
||||
</div>
|
||||
</div>
|
||||
{focused.orderstatus && (
|
||||
<span
|
||||
className="compare-delta-status"
|
||||
style={{ background: statusStyle.bg, color: statusStyle.fg }}
|
||||
>
|
||||
{statusStyle.label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="compare-delta-grid">
|
||||
<div className={`compare-delta-cell${focused.anomaly ? ' is-anomaly' : ''}`}>
|
||||
<span className="compare-delta-cell-label">Distance</span>
|
||||
<span className="compare-delta-cell-val">
|
||||
{focused.actualKm.toFixed(2)}{' '}
|
||||
<span className="compare-delta-cell-unit">km</span>
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
planned {focused.plannedKm.toFixed(2)} km
|
||||
</span>
|
||||
</div>
|
||||
<div className="compare-delta-cell">
|
||||
<span className="compare-delta-cell-label">Δ Route</span>
|
||||
<span className={`compare-delta-cell-val ${kmDeltaCls}`}>
|
||||
{kmDeltaSign}
|
||||
{focused.kmDelta.toFixed(2)} km
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
{focused.kmDeltaPct != null
|
||||
? `${kmDeltaSign}${focused.kmDeltaPct.toFixed(0)}% vs plan`
|
||||
: 'no planned km'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="compare-delta-cell">
|
||||
<span className="compare-delta-cell-label">Time</span>
|
||||
<span className={`compare-delta-cell-val ${timeDeltaCls}`}>
|
||||
{focused.timeDeltaMin != null
|
||||
? `${focused.timeDeltaMin > 0 ? '+' : ''}${focused.timeDeltaMin} min`
|
||||
: '—'}
|
||||
</span>
|
||||
<span className="compare-delta-cell-sub">
|
||||
{focused.actualTs && focused.expectedTs
|
||||
? `${focused.actualTs.format('HH:mm')} vs ${focused.expectedTs.format('HH:mm')}`
|
||||
: focused.actualTs
|
||||
? `delivered ${focused.actualTs.format('HH:mm')}`
|
||||
: 'in flight'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sum = compareSummary;
|
||||
const deltaCls =
|
||||
sum.kmDeltaPct == null
|
||||
? ''
|
||||
: sum.kmDeltaPct > 25
|
||||
? 'is-over'
|
||||
: sum.kmDeltaPct < -5
|
||||
? 'is-under'
|
||||
: '';
|
||||
const total = sum.onTime + sum.late;
|
||||
return (
|
||||
<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 }}
|
||||
>
|
||||
<MdPublic />
|
||||
</span>
|
||||
<div className="compare-delta-title-text">
|
||||
<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">
|
||||
{daySummaryOpen
|
||||
? 'Click to collapse summary'
|
||||
: 'Click to expand summary · Click any step above to scrutinize'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{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>
|
||||
);
|
||||
})()}
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Right-side data panel — full-height column in Compare mode. Renders
|
||||
day-overview tiles (distance, deviation, on-time, profit), the
|
||||
focused-step delta when a step is selected, a deviations list of
|
||||
anomaly steps, and a per-step list showing whether each step was
|
||||
followed correctly (delivered + within plan), the delivery time
|
||||
vs expected, and the order profit. Clicking any step row mirrors
|
||||
the timeline click — sets focusedCompareStep so both maps zoom
|
||||
onto that delivery. */}
|
||||
{compareOpen && focusedRider && (
|
||||
<CompareDataPanel
|
||||
focusedRider={focusedRider}
|
||||
compareDeltas={compareDeltas}
|
||||
compareSummary={compareSummary}
|
||||
actualOrdered={actualOrdered}
|
||||
focusedCompareStep={focusedCompareStep}
|
||||
setFocusedCompareStep={setFocusedCompareStep}
|
||||
sequenceOpen={sequenceOpen}
|
||||
setSequenceOpen={setSequenceOpen}
|
||||
expandedSeqGroups={expandedSeqGroups}
|
||||
setExpandedSeqGroups={setExpandedSeqGroups}
|
||||
onClose={() => setCompareOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
65
src/pages/nearle/dispatch/dispatchShared.js
Normal file
65
src/pages/nearle/dispatch/dispatchShared.js
Normal file
@@ -0,0 +1,65 @@
|
||||
// Shared constants and pure helpers for the Dispatch page and its
|
||||
// extracted sub-components (CompareDataPanel, etc.). Lives outside
|
||||
// Dispatch.js so we don't create a circular import between the host
|
||||
// component and the child views.
|
||||
|
||||
// Status palette — single source of truth for the status pill colors
|
||||
// rendered on rider cards, order rows, step lists, and tooltips.
|
||||
export const STATUS_STYLES = {
|
||||
created: { label: 'Created', bg: '#3b82f6', fg: '#fff' },
|
||||
pending: { label: 'Pending', bg: '#f59e0b', fg: '#fff' },
|
||||
accepted: { label: 'Accepted', bg: '#8b5cf6', fg: '#fff' },
|
||||
arrived: { label: 'Arrived', bg: '#ea580c', fg: '#fff' },
|
||||
picked: { label: 'Picked', bg: '#0ea5e9', fg: '#fff' },
|
||||
active: { label: 'Active', bg: '#0ea5e9', fg: '#fff' },
|
||||
delivered: { label: 'Delivered', bg: '#22c55e', fg: '#fff' },
|
||||
skipped: { label: 'Skipped', bg: '#94a3b8', fg: '#fff' },
|
||||
cancelled: { label: 'Cancelled', bg: '#ef4444', fg: '#fff' }
|
||||
};
|
||||
|
||||
export const getStatusStyle = (status) =>
|
||||
STATUS_STYLES[String(status || '').toLowerCase()] || {
|
||||
label: status || 'Unknown',
|
||||
bg: '#64748b',
|
||||
fg: '#fff'
|
||||
};
|
||||
|
||||
// Order-status sets used for completion / skipped decisions across the
|
||||
// rider list, the planned-route renderer, and the compare data panel.
|
||||
export const FINAL_STATUSES = new Set(['delivered']);
|
||||
export const SKIPPED_STATUSES = new Set(['cancelled', 'skipped']);
|
||||
|
||||
// Per-step palette — wider and more deliberately spaced than the rider
|
||||
// palette so a 10-stop day reads as 10 distinct colors on the compare
|
||||
// map's polylines + pins.
|
||||
export const STEP_PALETTE = [
|
||||
'#2563eb', // blue-600
|
||||
'#dc2626', // red-600
|
||||
'#16a34a', // green-600
|
||||
'#ea580c', // orange-600
|
||||
'#9333ea', // purple-600
|
||||
'#0891b2', // cyan-600
|
||||
'#ca8a04', // yellow-600
|
||||
'#db2777', // pink-600
|
||||
'#0f766e', // teal-700
|
||||
'#7c3aed', // violet-600
|
||||
'#65a30d', // lime-600
|
||||
'#0284c7', // sky-600
|
||||
'#b91c1c', // red-700
|
||||
'#15803d', // green-700
|
||||
'#a16207', // yellow-700
|
||||
'#86198f' // fuchsia-800
|
||||
];
|
||||
|
||||
export const stepColor = (i) =>
|
||||
STEP_PALETTE[((i % STEP_PALETTE.length) + STEP_PALETTE.length) % STEP_PALETTE.length];
|
||||
|
||||
// Pure helper — converts 1, 2, 3, 21 → "1st", "2nd", "3rd", "21st". Used
|
||||
// by the compare data panel for the route-sequence diff list ("Visited
|
||||
// 4th · planned 2nd").
|
||||
export const ordinal = (n) => {
|
||||
if (n == null) return '';
|
||||
const s = ['th', 'st', 'nd', 'rd'];
|
||||
const v = n % 100;
|
||||
return n + (s[(v - 20) % 10] || s[v] || s[0]);
|
||||
};
|
||||
Reference in New Issue
Block a user