Mayur Shinde
436 lines
20 KiB
React
436 lines
20 KiB
React
import React, { useEffect, useRef } from 'react';
|
||
import { MapContainer, TileLayer, Marker, Polyline, Polygon, Tooltip, useMap } from 'react-leaflet';
|
||
import L from 'leaflet';
|
||
import 'leaflet/dist/leaflet.css';
|
||
import { useTheme } from '../../context/ThemeContext';
|
||
import { DISPATCH_REPS, DISPATCH_RECOMMENDATIONS } from '../../data/mockStore';
|
||
// Shared color taxonomy — same source of truth the Territory Map reads from,
|
||
// so pin colors stay consistent across the app.
|
||
import { REP_STATUS_COLORS, REP_STATUS_LABELS, URGENCY_COLORS } from '../../data/statusTaxonomy';
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Constants
|
||
// ---------------------------------------------------------------------------
|
||
const PLANO_CENTER = [33.055, -96.752];
|
||
const DEFAULT_ZOOM = 12;
|
||
|
||
// Storm polygon — northeast Plano, sweeping toward central
|
||
const STORM_POLYGON = [
|
||
[33.105, -96.745], [33.100, -96.695], [33.078, -96.682],
|
||
[33.051, -96.698], [33.042, -96.725], [33.058, -96.750],
|
||
[33.080, -96.758],
|
||
];
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Custom marker factories
|
||
// ---------------------------------------------------------------------------
|
||
const createRepIcon = (rep, isTopPick) => {
|
||
const color = REP_STATUS_COLORS[rep.status] || '#6B7280';
|
||
const size = isTopPick ? 42 : 36;
|
||
const ring = isTopPick
|
||
? `<div style="position:absolute;inset:-5px;border-radius:50%;border:2px solid ${color};opacity:0.5;animation:repRing 1.6s ease-out infinite;"></div>`
|
||
: '';
|
||
return L.divIcon({
|
||
html: `
|
||
<div style="position:relative;width:${size}px;height:${size}px;">
|
||
${ring}
|
||
<div style="
|
||
width:${size}px;height:${size}px;border-radius:50%;
|
||
background:${color}DD;border:2.5px solid white;
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-size:${isTopPick ? 12 : 11}px;font-weight:900;color:white;
|
||
font-family:system-ui,sans-serif;
|
||
box-shadow:0 3px 10px ${color}60,0 1px 3px rgba(0,0,0,0.25);
|
||
transition:transform 0.2s;
|
||
">${rep.initials}</div>
|
||
<div style="
|
||
position:absolute;bottom:-3px;right:-3px;
|
||
width:10px;height:10px;border-radius:50%;
|
||
background:${color};border:2px solid white;
|
||
"></div>
|
||
</div>`,
|
||
className: '',
|
||
iconSize: [size, size],
|
||
iconAnchor: [size / 2, size / 2],
|
||
});
|
||
};
|
||
|
||
const createLeadIcon = (lead, isSelected) => {
|
||
const color = URGENCY_COLORS[lead.urgency] || '#6B7280';
|
||
const size = isSelected ? 22 : 14;
|
||
const pulse = lead.urgency !== 'standard';
|
||
const radar = isSelected
|
||
? `<div style="position:absolute;inset:-7px;border-radius:50%;border:2px solid ${color};animation:radarPing 1.4s ease-out infinite;"></div>
|
||
<div style="position:absolute;inset:-14px;border-radius:50%;border:1.5px solid ${color};animation:radarPing 1.4s ease-out 0.4s infinite;"></div>`
|
||
: '';
|
||
|
||
return L.divIcon({
|
||
html: `
|
||
<div style="position:relative;width:${size}px;height:${size}px;${pulse && !isSelected ? 'animation:dotPulse 1.6s ease-in-out infinite;' : ''}">
|
||
${radar}
|
||
<div style="
|
||
width:${size}px;height:${size}px;border-radius:50%;
|
||
background:${color};border:2px solid white;
|
||
box-shadow:0 2px 6px ${color}80;
|
||
"></div>
|
||
</div>`,
|
||
className: '',
|
||
iconSize: [size, size],
|
||
iconAnchor: [size / 2, size / 2],
|
||
});
|
||
};
|
||
|
||
const createTravelChipIcon = (text, color) => {
|
||
const label = `⏱ ${text}`;
|
||
return L.divIcon({
|
||
html: `
|
||
<div style="
|
||
background:${color};
|
||
border-radius:999px;
|
||
padding:7px 16px;
|
||
font-size:15px;
|
||
font-weight:900;
|
||
color:#ffffff;
|
||
box-shadow:0 4px 16px rgba(0,0,0,0.45), 0 0 0 3px white, 0 0 0 5px ${color};
|
||
white-space:nowrap;
|
||
font-family:system-ui,sans-serif;
|
||
letter-spacing:0.2px;
|
||
text-shadow:0 1px 3px rgba(0,0,0,0.35);
|
||
pointer-events:none;
|
||
">${label}</div>`,
|
||
className: '',
|
||
iconAnchor: [56, 20],
|
||
});
|
||
};
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// MapController — fits bounds when lead selection changes + fixes tile gaps
|
||
// ---------------------------------------------------------------------------
|
||
const MapController = ({ selectedLeadId, leadPos, repPos, routePath }) => {
|
||
const map = useMap();
|
||
const prevId = useRef(null);
|
||
|
||
// Invalidate size on mount and on every window resize so Leaflet fills
|
||
// the full flex container — prevents the blank tile area on the right.
|
||
// On mobile the map panel is inside a CollapsePanel that animates
|
||
// height 0→auto over 220ms, so we need to wait past that before calling
|
||
// invalidateSize, otherwise Leaflet initialises at near-zero height.
|
||
useEffect(() => {
|
||
const invalidate = () => map.invalidateSize({ animate: false });
|
||
// 50ms covers desktop (no animation). 320ms covers the 220ms collapse
|
||
// animation with margin so tiles fill correctly on mobile/tablet.
|
||
const t1 = setTimeout(invalidate, 50);
|
||
const t2 = setTimeout(invalidate, 320);
|
||
window.addEventListener('resize', invalidate);
|
||
return () => {
|
||
clearTimeout(t1);
|
||
clearTimeout(t2);
|
||
window.removeEventListener('resize', invalidate);
|
||
};
|
||
}, [map]);
|
||
|
||
useEffect(() => {
|
||
if (selectedLeadId === prevId.current) return;
|
||
prevId.current = selectedLeadId;
|
||
|
||
if (!leadPos || !repPos) return;
|
||
|
||
const positions = [leadPos, repPos, ...(routePath || [])].filter(Boolean);
|
||
if (positions.length < 2) return;
|
||
|
||
map.fitBounds(L.latLngBounds(positions), {
|
||
padding: [72, 72],
|
||
maxZoom: 14,
|
||
animate: true,
|
||
duration: 0.7,
|
||
});
|
||
}, [selectedLeadId]); // eslint-disable-line react-hooks/exhaustive-deps
|
||
|
||
return null;
|
||
};
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// CSS animations — injected as a style block
|
||
// ---------------------------------------------------------------------------
|
||
const MAP_STYLES = `
|
||
.dispatch-route {
|
||
stroke-dasharray: 5000;
|
||
stroke-dashoffset: 5000;
|
||
animation: drawRoute 1.1s cubic-bezier(0.4,0,0.2,1) forwards;
|
||
}
|
||
@keyframes drawRoute {
|
||
to { stroke-dashoffset: 0; }
|
||
}
|
||
@keyframes radarPing {
|
||
0% { transform: scale(1); opacity: 0.75; }
|
||
100% { transform: scale(1); opacity: 0; }
|
||
0% { transform: scale(1); }
|
||
100% { transform: scale(2.4); opacity: 0; }
|
||
}
|
||
@keyframes dotPulse {
|
||
0%, 100% { transform: scale(1); opacity: 1; }
|
||
50% { transform: scale(1.3); opacity: 0.7; }
|
||
}
|
||
@keyframes repRing {
|
||
0% { transform: scale(1); opacity: 0.6; }
|
||
100% { transform: scale(1.8); opacity: 0; }
|
||
}
|
||
.leaflet-container { font-family: system-ui, sans-serif; }
|
||
.dispatch-tooltip {
|
||
background: white;
|
||
border: 1px solid rgba(0,0,0,0.08);
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
||
padding: 8px 10px;
|
||
pointer-events: none;
|
||
}
|
||
.dispatch-tooltip::before { display: none; }
|
||
.leaflet-tooltip.dispatch-tooltip { white-space: nowrap; }
|
||
`;
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Main Component
|
||
// ---------------------------------------------------------------------------
|
||
const DispatchMapPanel = ({ selectedLead, dispatchLeads, reps = DISPATCH_REPS, stormMode, accent, isDesktop, mapHeight }) => {
|
||
const { theme } = useTheme();
|
||
|
||
// Top recommendation for the selected lead
|
||
const topRec = selectedLead ? (DISPATCH_RECOMMENDATIONS[selectedLead.id]?.[0] ?? null) : null;
|
||
const topRep = topRec ? reps.find(r => r.id === topRec.repId) : null;
|
||
|
||
// Positions for bounds fitting
|
||
const leadPos = selectedLead
|
||
? [selectedLead.property.lat, selectedLead.property.lng]
|
||
: null;
|
||
const repPos = topRep
|
||
? [topRep.currentLat, topRep.currentLng]
|
||
: null;
|
||
|
||
// Travel time chip — midpoint of route
|
||
const routeMid = topRec?.routePath?.length
|
||
? topRec.routePath[Math.floor(topRec.routePath.length / 2)]
|
||
: null;
|
||
|
||
// Derive estimated drive minutes from top rec factors (driveTime score → minutes)
|
||
const driveMinutes = topRec
|
||
? Math.round(8 + ((100 - topRec.factors.driveTime) / 100) * 22)
|
||
: null;
|
||
|
||
const routeColor = stormMode ? '#F59E0B' : accent;
|
||
|
||
// Explicit pixel height on both the wrapper div and MapContainer.
|
||
// Do NOT use h-full / height:100% — the CollapsePanel ancestor has
|
||
// height:auto so the percentage chain resolves to 0. Inline px values
|
||
// bypass the chain entirely and give Leaflet a reliable offsetHeight.
|
||
// mapHeight prop is computed responsively in LynkDispatchPage (300–520px).
|
||
const mapH = isDesktop ? 'calc(72rem + 2.375rem)' : (mapHeight || '300px');
|
||
|
||
return (
|
||
<div className="relative overflow-hidden" style={{ height: mapH }}>
|
||
{/* Inject map animations */}
|
||
<style>{MAP_STYLES}</style>
|
||
|
||
<MapContainer
|
||
center={PLANO_CENTER}
|
||
zoom={DEFAULT_ZOOM}
|
||
scrollWheelZoom={true}
|
||
zoomControl={false}
|
||
className="w-full"
|
||
style={{ height: mapH, width: '100%' }}
|
||
>
|
||
{/* Tile layer — dark/light aware */}
|
||
<TileLayer
|
||
key={theme}
|
||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||
className={
|
||
theme === 'dark'
|
||
? 'map-tiles filter invert grayscale contrast-100'
|
||
: 'map-tiles'
|
||
}
|
||
/>
|
||
|
||
{/* Fit bounds on lead selection */}
|
||
<MapController
|
||
selectedLeadId={selectedLead?.id}
|
||
leadPos={leadPos}
|
||
repPos={repPos}
|
||
routePath={topRec?.routePath}
|
||
/>
|
||
|
||
{/* Storm polygon */}
|
||
{stormMode && (
|
||
<Polygon
|
||
positions={STORM_POLYGON}
|
||
pathOptions={{
|
||
color: '#F59E0B',
|
||
fillColor: '#F59E0B',
|
||
fillOpacity: 0.13,
|
||
weight: 2,
|
||
dashArray: '6 5',
|
||
opacity: 0.7,
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* Route polyline — animates in with stroke-dashoffset draw */}
|
||
{topRec && (
|
||
<Polyline
|
||
key={selectedLead.id}
|
||
positions={topRec.routePath}
|
||
pathOptions={{
|
||
color: routeColor,
|
||
weight: 3.5,
|
||
opacity: 0.85,
|
||
className: 'dispatch-route',
|
||
lineCap: 'round',
|
||
lineJoin: 'round',
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* Lead pins */}
|
||
{dispatchLeads.map(lead => {
|
||
const urgColor = URGENCY_COLORS[lead.urgency] || '#6B7280';
|
||
const notesSnip = lead.notes
|
||
? (lead.notes.length > 55 ? lead.notes.slice(0, 55) + '…' : lead.notes)
|
||
: null;
|
||
return (
|
||
<Marker
|
||
key={lead.id}
|
||
position={[lead.property.lat, lead.property.lng]}
|
||
icon={createLeadIcon(lead, selectedLead?.id === lead.id)}
|
||
>
|
||
<Tooltip direction="top" offset={[0, -10]} opacity={1} className="dispatch-tooltip">
|
||
<div style={{ fontFamily: 'system-ui,sans-serif', minWidth: 150, maxWidth: 220 }}>
|
||
<p style={{ fontSize: 11, fontWeight: 700, color: '#18181b', marginBottom: 2 }}>
|
||
{lead.customer.name}
|
||
</p>
|
||
<p style={{ fontSize: 10, fontWeight: 700, color: urgColor, marginBottom: 2 }}>
|
||
{lead.urgency.toUpperCase()}
|
||
</p>
|
||
<p style={{ fontSize: 10, color: '#71717a', marginBottom: notesSnip ? 4 : 0 }}>
|
||
{lead.property.address}
|
||
</p>
|
||
{notesSnip && (
|
||
<p style={{ fontSize: 9, color: '#a1a1aa', fontStyle: 'italic', lineHeight: 1.4, borderTop: '1px solid #f0f0f0', paddingTop: 4 }}>
|
||
{notesSnip}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</Tooltip>
|
||
</Marker>
|
||
);
|
||
})}
|
||
|
||
{/* Rep markers */}
|
||
{reps.map(rep => {
|
||
const repColor = REP_STATUS_COLORS[rep.status] || '#6B7280';
|
||
return (
|
||
<Marker
|
||
key={rep.id}
|
||
position={[rep.currentLat, rep.currentLng]}
|
||
icon={createRepIcon(rep, topRep?.id === rep.id)}
|
||
>
|
||
<Tooltip direction="top" offset={[0, -10]} opacity={1} className="dispatch-tooltip">
|
||
<div style={{ fontFamily: 'system-ui,sans-serif', minWidth: 140 }}>
|
||
<p style={{ fontSize: 11, fontWeight: 800, color: repColor, marginBottom: 3 }}>
|
||
{rep.name}
|
||
</p>
|
||
<p style={{ fontSize: 10, color: '#71717a', marginBottom: 1 }}>
|
||
{REP_STATUS_LABELS[rep.status]} · {rep.todayAppointments}/{rep.maxDaily} slots
|
||
</p>
|
||
<p style={{ fontSize: 10, color: '#71717a' }}>
|
||
★ {rep.rating} · {rep.closeRate}% close
|
||
</p>
|
||
</div>
|
||
</Tooltip>
|
||
</Marker>
|
||
);
|
||
})}
|
||
|
||
{/* Travel time chip at route midpoint */}
|
||
{topRec && routeMid && driveMinutes && (
|
||
<Marker
|
||
key={`chip-${selectedLead.id}`}
|
||
position={routeMid}
|
||
icon={createTravelChipIcon(`~${driveMinutes} min`, routeColor)}
|
||
/>
|
||
)}
|
||
</MapContainer>
|
||
|
||
{/* ── Legend overlay — top-left (kept in view; the desktop map is
|
||
~1190px tall, so a bottom-anchored legend sat far below the fold) ── */}
|
||
<div className="absolute top-3 left-3 z-[1000] flex flex-col gap-1.5 pointer-events-none">
|
||
{/* Rep status legend */}
|
||
<div className="rounded-xl border bg-white/90 dark:bg-zinc-900/85 backdrop-blur-md border-zinc-200/80 dark:border-white/[0.08] px-2.5 py-2 shadow-lg">
|
||
<p className="text-[9px] font-black uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mb-1.5">Reps</p>
|
||
<div className="space-y-1">
|
||
{Object.entries(REP_STATUS_COLORS).map(([status, color]) => (
|
||
<div key={status} className="flex items-center gap-1.5">
|
||
<div className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: color }} />
|
||
<span className="text-[10px] font-medium text-zinc-600 dark:text-zinc-300 capitalize">
|
||
{REP_STATUS_LABELS[status]}
|
||
</span>
|
||
<span className="text-[10px] text-zinc-400 ml-1">
|
||
{DISPATCH_REPS.filter(r => r.status === status).length}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Lead urgency legend */}
|
||
<div className="rounded-xl border bg-white/90 dark:bg-zinc-900/85 backdrop-blur-md border-zinc-200/80 dark:border-white/[0.08] px-2.5 py-2 shadow-lg">
|
||
<p className="text-[9px] font-black uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mb-1.5">Leads</p>
|
||
<div className="space-y-1">
|
||
{Object.entries(URGENCY_COLORS).map(([urgency, color]) => (
|
||
<div key={urgency} className="flex items-center gap-1.5">
|
||
<div className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: color }} />
|
||
<span className="text-[10px] font-medium text-zinc-600 dark:text-zinc-300 capitalize">
|
||
{urgency}
|
||
</span>
|
||
<span className="text-[10px] text-zinc-400 ml-1">
|
||
{dispatchLeads.filter(l => l.urgency === urgency).length}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Storm mode overlay label */}
|
||
{stormMode && (
|
||
<div className="absolute top-3 left-1/2 -translate-x-1/2 z-[1000] pointer-events-none">
|
||
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-500/90 backdrop-blur-sm shadow-lg">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
|
||
<span className="text-[10px] font-black uppercase tracking-widest text-white">
|
||
Storm Zone Active
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Selected lead info chip — top right */}
|
||
{selectedLead && topRep && (
|
||
<div className="absolute top-3 right-3 z-[1000] pointer-events-none">
|
||
<div
|
||
className="rounded-xl border px-3 py-2 bg-white/92 dark:bg-zinc-900/85 backdrop-blur-md shadow-lg border-zinc-200/80 dark:border-white/[0.08]"
|
||
style={{ borderLeftWidth: 3, borderLeftColor: routeColor }}
|
||
>
|
||
<p className="text-[9px] font-black uppercase tracking-widest mb-0.5" style={{ color: routeColor }}>
|
||
Route Active
|
||
</p>
|
||
<p className="text-[11px] font-bold text-zinc-900 dark:text-white">{topRep.name}</p>
|
||
<p className="text-[10px] text-zinc-400 mt-0.5 truncate max-w-[140px]">
|
||
→ {selectedLead.property.address}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default DispatchMapPanel;
|