File size: 7,827 Bytes
d491dc1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | import React, { useState, useEffect } from 'react';
import * as API from '../api.js';
export default function DispatchMapView({ onBack }) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [dispatchMode, setDispatchMode] = useState('batched'); // 'batched' or 'unbatched'
useEffect(() => {
API.analyzeDispatch().then((res) => {
if (res) setData(res);
setLoading(false);
});
}, []);
return (
<div className="min-h-screen bg-[#07070B] text-white p-6 md:p-12 font-sans selection:bg-[#FF3366]">
{/* Top Header */}
<div className="max-w-6xl mx-auto flex items-center justify-between mb-8 pb-6 border-b border-white/10">
<div className="flex items-center gap-4">
<button
onClick={onBack}
className="p-2.5 rounded-full bg-white/[0.05] border border-white/15 text-white/80 hover:text-white hover:bg-white/10 transition-all cursor-pointer"
>
<span className="material-symbols-outlined text-xl">arrow_back</span>
</button>
<div>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#00D4FF]/10 border border-[#00D4FF]/30 mb-1">
<span className="w-2 h-2 rounded-full bg-[#00D4FF] animate-pulse"></span>
<span className="text-[10px] font-bold tracking-widest text-[#00D4FF] uppercase">MODULE 5 • ROUTE BATCH OPTIMIZER</span>
</div>
<h1 className="text-3xl md:text-4xl font-serif font-bold text-white tracking-tight">
Dispatch Intelligence <span className="italic font-serif text-[#00D4FF]">Optimized.</span>
</h1>
</div>
</div>
</div>
{/* Industry Differentiation Showcase Card */}
<div className="max-w-6xl mx-auto mb-8 bg-[#101018]/90 border border-white/10 rounded-3xl p-6 backdrop-blur-2xl space-y-4">
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
<div>
<div className="flex items-center gap-2 mb-1">
<span className="text-xs font-bold font-mono text-[#00D4FF] uppercase tracking-wider">WHY HYPERFLOW VS INDUSTRY BASELINE</span>
<span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-[#00D4FF]/20 text-[#00D4FF] border border-[#00D4FF]/30">
28.4% FUEL SAVED · ~14M FASTER
</span>
</div>
<h3 className="text-lg font-serif font-bold text-white">Haversine Batch Clustering vs Greedy Individual Dispatch</h3>
<p className="text-xs text-white/60 font-light max-w-2xl mt-1">
Standard logistics dispatches riders 1-to-1 per order, creating severe traffic congestion and high delivery costs. HyperFlow clusters nearby spatial-temporal delivery destinations within strict SLA bounds.
</p>
</div>
<div className="flex items-center gap-2 bg-white/[0.05] p-1.5 rounded-full border border-white/10 shrink-0">
<button
onClick={() => setDispatchMode('batched')}
className={`px-4 py-1.5 rounded-full text-xs font-bold transition-all cursor-pointer ${
dispatchMode === 'batched'
? 'bg-gradient-to-r from-[#00D4FF] to-[#00E6FF] text-black shadow-md font-bold'
: 'text-white/60 hover:text-white'
}`}
>
HyperFlow Batched Route
</button>
<button
onClick={() => setDispatchMode('unbatched')}
className={`px-4 py-1.5 rounded-full text-xs font-bold transition-all cursor-pointer ${
dispatchMode === 'unbatched'
? 'bg-red-500/30 text-red-300 border border-red-500/50 shadow-md'
: 'text-white/60 hover:text-white'
}`}
>
Greedy 1-to-1 Dispatch
</button>
</div>
</div>
</div>
<div className="max-w-6xl mx-auto space-y-6">
<div className="bg-[#101018]/90 border border-white/10 rounded-3xl p-8 backdrop-blur-2xl space-y-6">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
<div className="p-5 bg-white/[0.03] border border-white/10 rounded-2xl">
<span className="text-xs text-white/40 uppercase font-mono">TOTAL ORDERS</span>
<p className="text-3xl font-serif font-bold text-white mt-1">{data?.total_deliveries || 5} orders</p>
</div>
<div className={`p-5 rounded-2xl border transition-all ${
dispatchMode === 'batched' ? 'bg-[#00D4FF]/10 border-[#00D4FF]/30' : 'bg-red-500/10 border-red-500/30'
}`}>
<span className="text-xs uppercase font-mono font-bold" style={{ color: dispatchMode === 'batched' ? '#00D4FF' : '#EF4444' }}>
{dispatchMode === 'batched' ? 'OPTIMIZED BATCHES' : 'ACTIVE RIDERS NEEDED'}
</span>
<p className="text-3xl font-serif font-bold mt-1" style={{ color: dispatchMode === 'batched' ? '#00D4FF' : '#EF4444' }}>
{dispatchMode === 'batched' ? `${data?.optimized_batches_count || 2} routes` : `${data?.total_deliveries || 5} riders`}
</p>
</div>
<div className="p-5 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
<span className="text-xs text-emerald-400 uppercase font-mono font-bold">ESTIMATED TIME SAVED</span>
<p className="text-3xl font-serif font-bold text-emerald-300 mt-1">
{dispatchMode === 'batched' ? `~${data?.estimated_time_saved_min || 14} min` : '0 min (baseline)'}
</p>
</div>
</div>
<div className="p-6 bg-white/[0.02] border border-white/10 rounded-2xl font-mono text-xs space-y-3">
<p className="text-white/60 font-bold uppercase tracking-wider">HUB ORIGIN: Patia Warehouse [20.3533, 85.8333]</p>
<div className="space-y-2 text-white/80">
{dispatchMode === 'batched' ? (
<>
<div className="p-3 bg-white/[0.03] rounded-xl flex justify-between">
<span>Route Batch 1: Patia Hub ➔ Prasanti Vihar (20.3562, 85.8315) ➔ Lp 60 (20.3585, 85.8288)</span>
<span className="text-[#00D4FF] font-bold">SLA: 18m</span>
</div>
<div className="p-3 bg-white/[0.03] rounded-xl flex justify-between">
<span>Route Batch 2: Patia Hub ➔ KIIT Campus 3 (20.3540, 85.8360) ➔ Damana (20.3510, 85.8380)</span>
<span className="text-[#00D4FF] font-bold">SLA: 22m</span>
</div>
</>
) : (
<>
<div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl flex justify-between">
<span>Single Rider 1: Patia Hub ➔ Prasanti Vihar</span>
<span className="text-red-400 font-bold">SLA: 24m</span>
</div>
<div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl flex justify-between">
<span>Single Rider 2: Patia Hub ➔ Lp 60</span>
<span className="text-red-400 font-bold">SLA: 28m</span>
</div>
<div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl flex justify-between">
<span>Single Rider 3: Patia Hub ➔ KIIT Campus 3</span>
<span className="text-red-400 font-bold">SLA: 21m</span>
</div>
</>
)}
</div>
</div>
</div>
</div>
</div>
);
}
|