updated the ui
This commit is contained in:
@@ -35,6 +35,9 @@ import {
|
||||
MdSpeed,
|
||||
MdExplore,
|
||||
MdAccessTime,
|
||||
MdOutlineInventory2,
|
||||
MdOutlineTwoWheeler,
|
||||
MdOutlineAccessTime,
|
||||
MdGpsFixed,
|
||||
MdPower,
|
||||
MdSearch,
|
||||
@@ -72,7 +75,7 @@ import logger from '../../../utils/logger';
|
||||
// emerald for the actual GPS trail (signals "live / real" data). Per-step
|
||||
// distinction in Combined view is carried by the numbered drop pins, which
|
||||
// keep STEP_PALETTE so the timeline link to a specific delivery survives.
|
||||
const COMBINED_PLANNED_COLOR = '#6366f1';
|
||||
const COMBINED_PLANNED_COLOR = '#662582';
|
||||
const COMBINED_ACTUAL_COLOR = '#10b981';
|
||||
|
||||
const toNum = (v) => {
|
||||
@@ -2453,16 +2456,16 @@ const Dispatch = ({
|
||||
const estMeters = activeOrder ? calculateEstMeters(r.id, activeOrder) : null;
|
||||
|
||||
return (
|
||||
<div key={r.id} className="rcard" onClick={() => handleRiderFocus(r)} style={{ animationDelay: `${i * 0.05}s` }}>
|
||||
<div key={r.id} className="rcard" onClick={() => handleRiderFocus(r)} style={{ animationDelay: `${i * 0.05}s`, borderLeft: `3px solid ${r.color}` }}>
|
||||
<div className="rcard-top">
|
||||
<div className="rcard-emo" style={{ background: `${r.color}18`, borderColor: `${r.color}50`, color: r.color }}><MdTwoWheeler /></div>
|
||||
<div className="rcard-emo" style={{ background: '#f1f5f9', borderColor: '#e2e8f0', color: '#64748b' }}><MdTwoWheeler /></div>
|
||||
<div className="rcard-info">
|
||||
<div className="rcard-name">{r.riderName}</div>
|
||||
<div className="rcard-zone">{r.orders[0]?.zone_name || locationName || 'Local'} · {new Set(r.orders.map(o => o.trip_number || 1)).size} trips</div>
|
||||
</div>
|
||||
<div
|
||||
className={`rcard-badge ${isDone ? 'is-done' : ''}`}
|
||||
style={isDone ? undefined : { background: `${r.color}18`, color: r.color }}
|
||||
style={isDone ? undefined : { background: '#f1f5f9', color: '#475569' }}
|
||||
title={`${delivered} delivered of ${total} total`}
|
||||
>
|
||||
{delivered}/{total}
|
||||
@@ -5115,7 +5118,7 @@ const Dispatch = ({
|
||||
style={{
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
background: compareOpen
|
||||
? 'linear-gradient(135deg, #6366f1, #3b82f6)'
|
||||
? 'linear-gradient(135deg, #662582, #9255AB)'
|
||||
: '#fff',
|
||||
marginLeft: 8,
|
||||
color: compareOpen ? '#fff' : undefined
|
||||
@@ -5713,9 +5716,9 @@ const Dispatch = ({
|
||||
to "was today big or small?" is the first thing visible. */}
|
||||
<div className="da-section">
|
||||
<div className="da-hero-row">
|
||||
<div className="da-hero-card" style={{ borderTopColor: activeMeta.color }}>
|
||||
<div className="da-hero-icon" style={{ background: `${activeMeta.color}22`, color: activeMeta.color }}>
|
||||
<MdInventory2 />
|
||||
<div className="da-hero-card">
|
||||
<div className="da-hero-icon" style={{ background: '#6625821f', color: '#662582' }}>
|
||||
<MdOutlineInventory2 />
|
||||
</div>
|
||||
<div className="da-hero-value">{analysisFormatNum(fleet.total_orders)}</div>
|
||||
<div className="da-hero-label">Total Orders</div>
|
||||
@@ -5725,9 +5728,9 @@ const Dispatch = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="da-hero-card" style={{ borderTopColor: '#0ea5e9' }}>
|
||||
<div className="da-hero-icon" style={{ background: '#0ea5e922', color: '#0ea5e9' }}>
|
||||
<MdTwoWheeler />
|
||||
<div className="da-hero-card">
|
||||
<div className="da-hero-icon" style={{ background: '#0ea5e91f', color: '#0ea5e9' }}>
|
||||
<MdOutlineTwoWheeler />
|
||||
</div>
|
||||
<div className="da-hero-value">{analysisFormatNum(fleet.total_riders)}</div>
|
||||
<div className="da-hero-label">Active Riders</div>
|
||||
@@ -5737,9 +5740,9 @@ const Dispatch = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="da-hero-card" style={{ borderTopColor: '#8b5cf6' }}>
|
||||
<div className="da-hero-icon" style={{ background: '#8b5cf622', color: '#8b5cf6' }}>
|
||||
<MdAccessTime />
|
||||
<div className="da-hero-card">
|
||||
<div className="da-hero-icon" style={{ background: '#8b5cf61f', color: '#8b5cf6' }}>
|
||||
<MdOutlineAccessTime />
|
||||
</div>
|
||||
<div className="da-hero-value">
|
||||
{fleet.total_duration_minutes != null ? `${fleet.total_duration_minutes}` : '—'}
|
||||
|
||||
Reference in New Issue
Block a user