Fix and UI imporvements
This commit is contained in:
Urtzi Alfaro
@@ -1,9 +1,12 @@
|
||||
/*
|
||||
* Distribution Map Component for Enterprise Dashboard
|
||||
* Shows delivery routes and shipment status across the network
|
||||
* Shows delivery routes and shipment status across the network with real Leaflet map
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { MapContainer, TileLayer, Marker, Polyline, Popup } from 'react-leaflet';
|
||||
import L from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '../ui/Card';
|
||||
import { Badge } from '../ui/Badge';
|
||||
import { Button } from '../ui/Button';
|
||||
@@ -22,6 +25,14 @@ import {
|
||||
} from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
// Fix for default marker icons in Leaflet
|
||||
delete (L.Icon.Default.prototype as any)._getIconUrl;
|
||||
L.Icon.Default.mergeOptions({
|
||||
iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',
|
||||
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',
|
||||
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png',
|
||||
});
|
||||
|
||||
interface RoutePoint {
|
||||
tenant_id: string;
|
||||
name: string;
|
||||
@@ -32,6 +43,7 @@ interface RoutePoint {
|
||||
estimated_arrival?: string;
|
||||
actual_arrival?: string;
|
||||
sequence: number;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
interface RouteData {
|
||||
@@ -40,7 +52,7 @@ interface RouteData {
|
||||
total_distance_km: number;
|
||||
estimated_duration_minutes: number;
|
||||
status: 'planned' | 'in_progress' | 'completed' | 'cancelled';
|
||||
route_points?: RoutePoint[];
|
||||
route_sequence?: RoutePoint[]; // Backend returns route_sequence, not route_points
|
||||
}
|
||||
|
||||
interface ShipmentStatusData {
|
||||
@@ -55,13 +67,22 @@ interface DistributionMapProps {
|
||||
shipments?: ShipmentStatusData;
|
||||
}
|
||||
|
||||
// Helper function to create custom markers
|
||||
const createRouteMarker = (color: string, number: number) => {
|
||||
return L.divIcon({
|
||||
className: 'custom-route-marker',
|
||||
html: `<div style="background-color: ${color}; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.3); font-size: 14px; font-weight: bold; color: white;">${number}</div>`,
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [16, 16]
|
||||
});
|
||||
};
|
||||
|
||||
const DistributionMap: React.FC<DistributionMapProps> = ({
|
||||
routes = [],
|
||||
shipments = { pending: 0, in_transit: 0, delivered: 0, failed: 0 }
|
||||
}) => {
|
||||
const { t } = useTranslation('dashboard');
|
||||
const [selectedRoute, setSelectedRoute] = useState<RouteData | null>(null);
|
||||
const [showAllRoutes, setShowAllRoutes] = useState(true);
|
||||
|
||||
const renderMapVisualization = () => {
|
||||
if (!routes || routes.length === 0) {
|
||||
@@ -87,9 +108,12 @@ const DistributionMap: React.FC<DistributionMapProps> = ({
|
||||
);
|
||||
}
|
||||
|
||||
// Find active routes (in_progress or planned for today)
|
||||
// Find active routes with GPS data
|
||||
const activeRoutes = routes.filter(route =>
|
||||
route.status === 'in_progress' || route.status === 'planned'
|
||||
(route.status === 'in_progress' || route.status === 'planned') &&
|
||||
route.route_sequence &&
|
||||
route.route_sequence.length > 0 &&
|
||||
route.route_sequence.every(point => point.latitude && point.longitude)
|
||||
);
|
||||
|
||||
if (activeRoutes.length === 0) {
|
||||
@@ -115,113 +139,108 @@ const DistributionMap: React.FC<DistributionMapProps> = ({
|
||||
);
|
||||
}
|
||||
|
||||
// Enhanced visual representation with improved styling
|
||||
// Calculate center point (average of all route points)
|
||||
const allPoints = activeRoutes.flatMap(route => route.route_sequence || []);
|
||||
const centerLat = allPoints.reduce((sum, p) => sum + p.latitude, 0) / allPoints.length;
|
||||
const centerLng = allPoints.reduce((sum, p) => sum + p.longitude, 0) / allPoints.length;
|
||||
|
||||
// Real Leaflet map with routes
|
||||
return (
|
||||
<div className="relative h-64 lg:h-96 rounded-xl overflow-hidden border-2" style={{
|
||||
background: 'linear-gradient(135deg, var(--color-info-50) 0%, var(--color-primary-50) 50%, var(--color-secondary-50) 100%)',
|
||||
borderColor: 'var(--border-primary)'
|
||||
}}>
|
||||
{/* Bakery-themed pattern overlay */}
|
||||
<div className="absolute inset-0 opacity-5 bg-pattern" />
|
||||
<div className="relative h-96 rounded-xl overflow-hidden border-2" style={{ borderColor: 'var(--border-primary)' }}>
|
||||
<MapContainer
|
||||
center={[centerLat, centerLng]}
|
||||
zoom={6}
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
scrollWheelZoom={true}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
|
||||
{/* Central Info Display */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div
|
||||
className="w-20 h-20 rounded-2xl flex items-center justify-center mb-3 mx-auto shadow-lg"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-info-100)',
|
||||
}}
|
||||
>
|
||||
<MapIcon className="w-10 h-10" style={{ color: 'var(--color-info-600)' }} />
|
||||
</div>
|
||||
<div className="text-2xl font-bold mb-1" style={{ color: 'var(--text-primary)' }}>
|
||||
{t('enterprise.distribution_map')}
|
||||
</div>
|
||||
<div className="text-sm font-medium px-4 py-2 rounded-full inline-block" style={{
|
||||
backgroundColor: 'var(--color-info-100)',
|
||||
color: 'var(--color-info-900)'
|
||||
}}>
|
||||
{activeRoutes.length} {t('enterprise.active_routes')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Render each route */}
|
||||
{activeRoutes.map((route, routeIdx) => {
|
||||
const points = route.route_sequence || [];
|
||||
const routeColor = route.status === 'in_progress' ? '#3b82f6' : '#f59e0b';
|
||||
|
||||
{/* Glassmorphism Route Info Cards */}
|
||||
<div className="absolute top-4 left-4 right-4 flex flex-wrap gap-2">
|
||||
{activeRoutes.slice(0, 3).map((route, index) => (
|
||||
<div
|
||||
key={route.id}
|
||||
className="glass-effect p-3 rounded-lg shadow-md backdrop-blur-sm max-w-xs"
|
||||
style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
border: '1px solid var(--border-primary)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-info-100)',
|
||||
// Create polyline coordinates
|
||||
const polylinePositions: [number, number][] = points.map(p => [p.latitude, p.longitude]);
|
||||
|
||||
return (
|
||||
<React.Fragment key={route.id}>
|
||||
{/* Route polyline */}
|
||||
<Polyline
|
||||
positions={polylinePositions}
|
||||
pathOptions={{
|
||||
color: routeColor,
|
||||
weight: 4,
|
||||
opacity: 0.7
|
||||
}}
|
||||
>
|
||||
<Route className="w-4 h-4" style={{ color: 'var(--color-info-600)' }} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-semibold text-sm truncate" style={{ color: 'var(--text-primary)' }}>
|
||||
{t('enterprise.route')} {route.route_number}
|
||||
</div>
|
||||
<div className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||||
{route.total_distance_km.toFixed(1)} km • {Math.ceil(route.estimated_duration_minutes / 60)}h
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{activeRoutes.length > 3 && (
|
||||
<div
|
||||
className="glass-effect p-3 rounded-lg shadow-md backdrop-blur-sm"
|
||||
style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
border: '1px solid var(--border-primary)'
|
||||
}}
|
||||
>
|
||||
<div className="text-sm font-semibold" style={{ color: 'var(--text-secondary)' }}>
|
||||
+{activeRoutes.length - 3} more
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
/>
|
||||
|
||||
{/* Status Legend */}
|
||||
{/* Route stop markers */}
|
||||
{points.map((point, idx) => {
|
||||
const markerColor = point.status === 'delivered' ? '#22c55e' :
|
||||
point.status === 'in_transit' ? '#3b82f6' :
|
||||
point.status === 'failed' ? '#ef4444' : '#f59e0b';
|
||||
|
||||
return (
|
||||
<Marker
|
||||
key={`${route.id}-${idx}`}
|
||||
position={[point.latitude, point.longitude]}
|
||||
icon={createRouteMarker(markerColor, point.sequence)}
|
||||
>
|
||||
<Popup>
|
||||
<div className="min-w-[200px]">
|
||||
<div className="font-semibold text-base mb-1">{point.name}</div>
|
||||
<div className="text-sm text-gray-600 mb-2">{point.address}</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
<div>Route: {route.route_number}</div>
|
||||
<div>Stop {point.sequence} of {points.length}</div>
|
||||
<div className="capitalize mt-1">Status: {point.status}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</Marker>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</MapContainer>
|
||||
|
||||
{/* Status Legend Overlay */}
|
||||
<div
|
||||
className="absolute bottom-4 right-4 glass-effect p-4 rounded-lg shadow-lg backdrop-blur-sm space-y-2"
|
||||
className="absolute bottom-4 right-4 glass-effect p-4 rounded-lg shadow-lg backdrop-blur-sm space-y-2 z-[1000]"
|
||||
style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
border: '1px solid var(--border-primary)'
|
||||
}}
|
||||
>
|
||||
<div className="text-xs font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
{activeRoutes.length} {t('enterprise.active_routes')}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: 'var(--color-warning)' }}></div>
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: '#22c55e' }}></div>
|
||||
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
||||
{t('enterprise.pending')}: {shipments.pending}
|
||||
{t('enterprise.delivered')}: {shipments.delivered}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: 'var(--color-info)' }}></div>
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: '#3b82f6' }}></div>
|
||||
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
||||
{t('enterprise.in_transit')}: {shipments.in_transit}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: 'var(--color-success)' }}></div>
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: '#f59e0b' }}></div>
|
||||
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
||||
{t('enterprise.delivered')}: {shipments.delivered}
|
||||
{t('enterprise.pending')}: {shipments.pending}
|
||||
</span>
|
||||
</div>
|
||||
{shipments.failed > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: 'var(--color-error)' }}></div>
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: '#ef4444' }}></div>
|
||||
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
||||
{t('enterprise.failed')}: {shipments.failed}
|
||||
</span>
|
||||
@@ -437,9 +456,9 @@ const DistributionMap: React.FC<DistributionMapProps> = ({
|
||||
</div>
|
||||
|
||||
{/* Timeline of Stops */}
|
||||
{route.route_points && route.route_points.length > 0 && (
|
||||
{route.route_sequence && route.route_sequence.length > 0 && (
|
||||
<div className="ml-6 border-l-2 pl-6 space-y-3" style={{ borderColor: 'var(--border-secondary)' }}>
|
||||
{route.route_points.map((point, idx) => {
|
||||
{route.route_sequence.map((point, idx) => {
|
||||
const getPointStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'delivered':
|
||||
|
||||
Reference in New Issue
Block a user