updated the ui

This commit is contained in:
2026-06-11 18:09:10 +05:30
parent 251be9afd2
commit f50b4b010c
33 changed files with 1527 additions and 2302 deletions

View File

@@ -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}` : '—'}