${vehicle.name}

Unit: ${vehicle.unitCode}

${vehicle.licensePlate ? `

Plate: ${vehicle.licensePlate}

` : ""} ${vehicle.speed !== null ? `

Speed: ${vehicle.speed.toFixed(1)} km/h

` : ""} ${vehicle.fuelLevel !== null ? `

Fuel: ${vehicle.fuelLevel.toFixed(1)}%

` : ""}

`; } // virtual:/apps/web/src/components/Maps/OpenStreetMap.jsx init_injected_globals(); var import_react5 = __toESM(require_react()); function loadLeafletScript() { return new Promise((resolve, reject) => { if (window.L) { resolve(window.L); return; } const link = document.createElement("link"); link.rel = "stylesheet"; link.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"; document.head.appendChild(link); const script = document.createElement("script"); script.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"; script.async = true; script.onload = () => resolve(window.L); script.onerror = reject; document.head.appendChild(script); }); } function OpenStreetMap({ vehicles = [], center, zoom = 12, onVehicleClick }) { const mapRef = (0, import_react5.useRef)(null); const leafletMapRef = (0, import_react5.useRef)(null); const markersRef = (0, import_react5.useRef)(/* @__PURE__ */ new Map()); const loadingRef = (0, import_react5.useRef)(false); const [status, setStatus] = (0, import_react5.useState)("loading"); const [errorMessage, setErrorMessage] = (0, import_react5.useState)(null); (0, import_react5.useEffect)(() => { if (!mapRef.current) return; if (leafletMapRef.current) return; if (loadingRef.current) return; loadingRef.current = true; loadLeafletScript().then((L) => { if (!mapRef.current || leafletMapRef.current) return; const mapCenter = center ? [center.lat, center.lng] : [-1.286389, 36.817223]; leafletMapRef.current = L.map(mapRef.current).setView(mapCenter, zoom); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap', maxZoom: 19 }).addTo(leafletMapRef.current); setTimeout(() => { try { leafletMapRef.current.invalidateSize(); leafletMapRef.current.setView(mapCenter, zoom); } catch { } }, 0); setStatus("ready"); }).catch((error) => { console.error("Error loading Leaflet:", error); setStatus("error"); setErrorMessage("OpenStreetMap failed to load."); }).finally(() => { loadingRef.current = false; }); return () => { if (leafletMapRef.current) { leafletMapRef.current.remove(); leafletMapRef.current = null; } }; }, []); (0, import_react5.useEffect)(() => { if (!leafletMapRef.current || status !== "ready") return; if (center) { leafletMapRef.current.setView( [center.lat, center.lng], leafletMapRef.current.getZoom() ); } if (typeof zoom === "number") { leafletMapRef.current.setZoom(zoom); } }, [center, zoom, status]); (0, import_react5.useEffect)(() => { if (!leafletMapRef.current || !window.L || status !== "ready") return; const L = window.L; markersRef.current.forEach((marker) => marker.remove()); markersRef.current.clear(); for (const vehicle of vehicles) { if (!vehicle.position) continue; const marker = L.marker([vehicle.position.lat, vehicle.position.lng], { icon: L.divIcon({ className: "custom-marker", html: `

`, iconSize: [20, 20] }) }).addTo(leafletMapRef.current); marker.bindPopup(`

${vehicle.name}

Unit: ${vehicle.unitCode}

${vehicle.speed !== null ? `

Speed: ${vehicle.speed.toFixed(1)} km/h

` : ""}

`); marker.on("click", () => { if (onVehicleClick) onVehicleClick(vehicle); }); markersRef.current.set(vehicle.unitId, marker); } }, [vehicles, status, onVehicleClick]); const overlayText = status === "loading" ? "Loading OpenStreetMap\u2026" : status === "error" ? errorMessage || "Map error" : null; return /* @__PURE__ */ React.createElement("div", { className: "relative w-full h-full min-h-[240px] rounded-lg" }, /* @__PURE__ */ React.createElement("div", { ref: mapRef, className: "w-full h-full min-h-[240px] rounded-lg" }), overlayText ? /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-white/70 dark:bg-black/40 rounded-lg" }, /* @__PURE__ */ React.createElement("div", { className: "px-4 py-3 rounded-lg bg-white dark:bg-[#1E1E1E] border border-gray-200 dark:border-gray-700 text-sm text-[#111827] dark:text-[#DEDEDE] max-w-[320px] text-center" }, overlayText)) : null); } function getVehicleColor2(vehicle) { if (!vehicle.lastUpdate) return "#9CA3AF"; const secondsAgo = vehicle.secondsAgo || 0; if (secondsAgo < 300) return "#10B981"; if (secondsAgo < 1800) return "#F59E0B"; return "#EF4444"; } // virtual:/apps/web/src/components/Maps/BingMap.jsx init_injected_globals(); var import_react6 = __toESM(require_react()); function loadBingMapsScript(apiKey) { return new Promise((resolve, reject) => { if (window.Microsoft && window.Microsoft.Maps) { resolve(window.Microsoft.Maps); return; } const script = document.createElement("script"); script.src = `https://www.bing.com/api/maps/mapcontrol?key=${apiKey}&callback=bingMapsReady`; script.async = true; script.defer = true; window.bingMapsReady = () => { resolve(window.Microsoft.Maps); }; script.onerror = reject; document.head.appendChild(script); }); } function BingMap({ vehicles = [], center, zoom = 12, onVehicleClick }) { const mapRef = (0, import_react6.useRef)(null); const bingMapRef = (0, import_react6.useRef)(null); const markersRef = (0, import_react6.useRef)(/* @__PURE__ */ new Map()); const [mapLoaded, setMapLoaded] = (0, import_react6.useState)(false); (0, import_react6.useEffect)(() => { const apiKey = process.env.NEXT_PUBLIC_BING_MAPS_API_KEY; if (!apiKey) { console.warn( "Bing Maps API key not found. Add NEXT_PUBLIC_BING_MAPS_API_KEY to your environment." ); return; } loadBingMapsScript(apiKey).then((Maps) => { if (!mapRef.current) return; const mapCenter = center || { latitude: -1.286389, longitude: 36.817223 }; bingMapRef.current = new Maps.Map(mapRef.current, { center: new Maps.Location( mapCenter.latitude || mapCenter.lat, mapCenter.longitude || mapCenter.lng ), zoom, mapTypeId: Maps.MapTypeId.road, showDashboard: false }); setMapLoaded(true); }).catch((error) => { console.error("Error loading Bing Maps:", error); }); }, [center, zoom]); (0, import_react6.useEffect)(() => { if (!bingMapRef.current || !window.Microsoft || !mapLoaded) return; const Maps = window.Microsoft.Maps; markersRef.current.forEach( (marker) => bingMapRef.current.entities.remove(marker) ); markersRef.current.clear(); vehicles.forEach((vehicle) => { if (!vehicle.position) return; const location = new Maps.Location( vehicle.position.lat, vehicle.position.lng ); const pin = new Maps.Pushpin(location, { title: vehicle.name, color: getVehicleColor3(vehicle) }); Maps.Events.addHandler(pin, "click", () => { if (onVehicleClick) onVehicleClick(vehicle); const infobox = new Maps.Infobox(location, { title: vehicle.name, description: `Unit: ${vehicle.unitCode}
Speed: ${vehicle.speed?.toFixed(1) || "N/A"} km/h` }); infobox.setMap(bingMapRef.current); }); bingMapRef.current.entities.push(pin); markersRef.current.set(vehicle.unitId, pin); }); if (vehicles.length > 0 && vehicles.some((v) => v.position)) { const locations = vehicles.filter((v) => v.position).map((v) => new Maps.Location(v.position.lat, v.position.lng)); const bounds = Maps.LocationRect.fromLocations(locations); bingMapRef.current.setView({ bounds, padding: 50 }); } }, [vehicles, mapLoaded, onVehicleClick]); return /* @__PURE__ */ React.createElement("div", { ref: mapRef, className: "w-full h-full rounded-lg" }); } function getVehicleColor3(vehicle) { if (!vehicle.lastUpdate) return "#9CA3AF"; const secondsAgo = vehicle.secondsAgo || 0; if (secondsAgo < 300) return "#10B981"; if (secondsAgo < 1800) return "#F59E0B"; return "#EF4444"; } // virtual:/apps/web/src/components/Maps/BaiduMap.jsx init_injected_globals(); var import_react7 = __toESM(require_react()); function loadBaiduMapsScript(apiKey) { return new Promise((resolve, reject) => { if (window.BMap) { resolve(window.BMap); return; } const script = document.createElement("script"); script.src = `https://api.map.baidu.com/api?v=3.0&ak=${apiKey}&callback=baiduMapsReady`; script.async = true; window.baiduMapsReady = () => { resolve(window.BMap); }; script.onerror = reject; document.head.appendChild(script); }); } function BaiduMap({ vehicles = [], center, zoom = 12, onVehicleClick }) { const mapRef = (0, import_react7.useRef)(null); const baiduMapRef = (0, import_react7.useRef)(null); const markersRef = (0, import_react7.useRef)(/* @__PURE__ */ new Map()); const [mapLoaded, setMapLoaded] = (0, import_react7.useState)(false); (0, import_react7.useEffect)(() => { const apiKey = process.env.NEXT_PUBLIC_BAIDU_MAPS_API_KEY; if (!apiKey) { console.warn( "Baidu Maps API key not found. Add NEXT_PUBLIC_BAIDU_MAPS_API_KEY to your environment." ); return; } loadBaiduMapsScript(apiKey).then((BMap) => { if (!mapRef.current) return; const mapCenter = center || { lat: 39.916527, lng: 116.397128 }; baiduMapRef.current = new BMap.Map(mapRef.current); const point = new BMap.Point(mapCenter.lng, mapCenter.lat); baiduMapRef.current.centerAndZoom(point, zoom); baiduMapRef.current.enableScrollWheelZoom(true); setMapLoaded(true); }).catch((error) => { console.error("Error loading Baidu Maps:", error); }); }, [center, zoom]); (0, import_react7.useEffect)(() => { if (!baiduMapRef.current || !window.BMap || !mapLoaded) return; const BMap = window.BMap; markersRef.current.forEach( (marker) => baiduMapRef.current.removeOverlay(marker) ); markersRef.current.clear(); vehicles.forEach((vehicle) => { if (!vehicle.position) return; const point = new BMap.Point(vehicle.position.lng, vehicle.position.lat); const marker = new BMap.Marker(point); marker.addEventListener("click", () => { if (onVehicleClick) onVehicleClick(vehicle); const infoWindow = new BMap.InfoWindow(`

${vehicle.name}

Unit: ${vehicle.unitCode}

Speed: ${vehicle.speed?.toFixed(1) || "N/A"} km/h

`); baiduMapRef.current.openInfoWindow(infoWindow, point); }); baiduMapRef.current.addOverlay(marker); markersRef.current.set(vehicle.unitId, marker); }); if (vehicles.length > 0 && vehicles.some((v) => v.position)) { const points = vehicles.filter((v) => v.position).map((v) => new BMap.Point(v.position.lng, v.position.lat)); baiduMapRef.current.setViewport(points); } }, [vehicles, mapLoaded, onVehicleClick]); return /* @__PURE__ */ React.createElement("div", { ref: mapRef, className: "w-full h-full rounded-lg" }); } // virtual:/apps/web/src/components/Maps/TencentMap.jsx init_injected_globals(); var import_react8 = __toESM(require_react()); function loadTencentMapsScript(apiKey) { return new Promise((resolve, reject) => { if (window.TMap) { resolve(window.TMap); return; } const script = document.createElement("script"); script.src = `https://map.qq.com/api/gljs?v=1.exp&key=${apiKey}`; script.async = true; script.onload = () => resolve(window.TMap); script.onerror = reject; document.head.appendChild(script); }); } function TencentMap({ vehicles = [], center, zoom = 12, onVehicleClick }) { const mapRef = (0, import_react8.useRef)(null); const tencentMapRef = (0, import_react8.useRef)(null); const markersRef = (0, import_react8.useRef)([]); const [mapLoaded, setMapLoaded] = (0, import_react8.useState)(false); (0, import_react8.useEffect)(() => { const apiKey = process.env.NEXT_PUBLIC_TENCENT_MAPS_API_KEY; if (!apiKey) { console.warn( "Tencent Maps API key not found. Add NEXT_PUBLIC_TENCENT_MAPS_API_KEY to your environment." ); return; } loadTencentMapsScript(apiKey).then((TMap) => { if (!mapRef.current) return; const mapCenter = center || { lat: 39.916527, lng: 116.397128 }; tencentMapRef.current = new TMap.Map(mapRef.current, { center: new TMap.LatLng(mapCenter.lat, mapCenter.lng), zoom }); setMapLoaded(true); }).catch((error) => { console.error("Error loading Tencent Maps:", error); }); }, [center, zoom]); (0, import_react8.useEffect)(() => { if (!tencentMapRef.current || !window.TMap || !mapLoaded) return; const TMap = window.TMap; markersRef.current.forEach((marker) => marker.setMap(null)); markersRef.current = []; const geometries = vehicles.filter((v) => v.position).map((vehicle) => ({ id: vehicle.unitId, position: new TMap.LatLng(vehicle.position.lat, vehicle.position.lng), properties: vehicle })); if (geometries.length > 0) { const markerLayer = new TMap.MultiMarker({ map: tencentMapRef.current, geometries }); markerLayer.on("click", (evt) => { const vehicle = evt.geometry.properties; if (onVehicleClick) onVehicleClick(vehicle); }); markersRef.current.push(markerLayer); } }, [vehicles, mapLoaded, onVehicleClick]); return /* @__PURE__ */ React.createElement("div", { ref: mapRef, className: "w-full h-full rounded-lg" }); } // virtual:/apps/web/src/components/Maps/GaodeMap.jsx init_injected_globals(); var import_react9 = __toESM(require_react()); function loadGaodeMapsScript(apiKey) { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap); return; } const script = document.createElement("script"); script.src = `https://webapi.amap.com/maps?v=2.0&key=${apiKey}`; script.async = true; script.onload = () => { window.AMap.plugin(["AMap.Scale", "AMap.ToolBar"], () => { resolve(window.AMap); }); }; script.onerror = reject; document.head.appendChild(script); }); } function GaodeMap({ vehicles = [], center, zoom = 12, onVehicleClick }) { const mapRef = (0, import_react9.useRef)(null); const gaodeMapRef = (0, import_react9.useRef)(null); const markersRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map()); const [mapLoaded, setMapLoaded] = (0, import_react9.useState)(false); (0, import_react9.useEffect)(() => { const apiKey = process.env.NEXT_PUBLIC_GAODE_MAPS_API_KEY; if (!apiKey) { console.warn( "Gaode Maps API key not found. Add NEXT_PUBLIC_GAODE_MAPS_API_KEY to your environment." ); return; } loadGaodeMapsScript(apiKey).then((AMap) => { if (!mapRef.current) return; const mapCenter = center || [116.397128, 39.916527]; gaodeMapRef.current = new AMap.Map(mapRef.current, { zoom, center: [ mapCenter.lng || mapCenter[0], mapCenter.lat || mapCenter[1] ], viewMode: "3D" }); setMapLoaded(true); }).catch((error) => { console.error("Error loading Gaode Maps:", error); }); }, [center, zoom]); (0, import_react9.useEffect)(() => { if (!gaodeMapRef.current || !window.AMap || !mapLoaded) return; const AMap = window.AMap; markersRef.current.forEach((marker) => gaodeMapRef.current.remove(marker)); markersRef.current.clear(); vehicles.forEach((vehicle) => { if (!vehicle.position) return; const marker = new AMap.Marker({ position: [vehicle.position.lng, vehicle.position.lat], title: vehicle.name, map: gaodeMapRef.current }); marker.on("click", () => { if (onVehicleClick) onVehicleClick(vehicle); const infoWindow = new AMap.InfoWindow({ content: `

${vehicle.name}

Unit: ${vehicle.unitCode}

Speed: ${vehicle.speed?.toFixed(1) || "N/A"} km/h

` }); infoWindow.open(gaodeMapRef.current, marker.getPosition()); }); markersRef.current.set(vehicle.unitId, marker); }); if (vehicles.length > 0 && vehicles.some((v) => v.position)) { const bounds = vehicles.filter((v) => v.position).map((v) => [v.position.lng, v.position.lat]); gaodeMapRef.current.setFitView(); } }, [vehicles, mapLoaded, onVehicleClick]); return /* @__PURE__ */ React.createElement("div", { ref: mapRef, className: "w-full h-full rounded-lg" }); } // virtual:/apps/web/src/components/Maps/UnifiedMap.jsx var import_lucide_react5 = __toESM(require_lucide_react()); function UnifiedMap({ vehicles = [], center, zoom = 12 }) { const [selectedVehicle, setSelectedVehicle] = (0, import_react10.useState)(null); const defaultProvider = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ? MAP_PROVIDERS.GOOGLE.id : MAP_PROVIDERS.OPENSTREETMAP.id; const [mapProvider, setMapProvider] = (0, import_react10.useState)(() => { if (typeof window !== "undefined") { return localStorage.getItem("mapProvider") || defaultProvider; } return defaultProvider; }); (0, import_react10.useEffect)(() => { if (typeof window !== "undefined") { localStorage.setItem("mapProvider", mapProvider); } }, [mapProvider]); const handleProviderChange = (newProvider) => { setMapProvider(newProvider); setSelectedVehicle(null); }; const handleVehicleClick = (vehicle) => { setSelectedVehicle(vehicle); }; const mapProps = (0, import_react10.useMemo)(() => { return { vehicles, center, zoom, onVehicleClick: handleVehicleClick }; }, [vehicles, center, zoom]); let mapEl = null; if (mapProvider === MAP_PROVIDERS.GOOGLE.id) { mapEl = /* @__PURE__ */ React.createElement(GoogleMap, { ...mapProps }); } else if (mapProvider === MAP_PROVIDERS.OPENSTREETMAP.id) { mapEl = /* @__PURE__ */ React.createElement(OpenStreetMap, { ...mapProps }); } else if (mapProvider === MAP_PROVIDERS.BING.id) { mapEl = /* @__PURE__ */ React.createElement(BingMap, { ...mapProps }); } else if (mapProvider === MAP_PROVIDERS.BAIDU.id) { mapEl = /* @__PURE__ */ React.createElement(BaiduMap, { ...mapProps }); } else if (mapProvider === MAP_PROVIDERS.TENCENT.id) { mapEl = /* @__PURE__ */ React.createElement(TencentMap, { ...mapProps }); } else if (mapProvider === MAP_PROVIDERS.GAODE.id) { mapEl = /* @__PURE__ */ React.createElement(GaodeMap, { ...mapProps }); } else { mapEl = /* @__PURE__ */ React.createElement(OpenStreetMap, { ...mapProps }); } return /* @__PURE__ */ React.createElement("div", { className: "relative w-full h-full" }, /* @__PURE__ */ React.createElement( MapProviderSelector, { currentProvider: mapProvider, onProviderChange: handleProviderChange } ), mapEl, selectedVehicle ? /* @__PURE__ */ React.createElement("div", { className: "absolute bottom-4 left-4 right-4 bg-white dark:bg-[#1E1E1E] rounded-xl border border-gray-200 dark:border-gray-700 p-4 shadow-lg max-w-md" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between mb-3" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h4", { className: "font-semibold text-[#111827] dark:text-[#DEDEDE]" }, selectedVehicle.name), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-[#6B7280] dark:text-[#9CA3AF]" }, selectedVehicle.unitCode)), /* @__PURE__ */ React.createElement( "button", { onClick: () => setSelectedVehicle(null), className: "text-[#6B7280] hover:text-[#111827] dark:text-[#9CA3AF] dark:hover:text-[#DEDEDE]" }, "\u2715" )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-3" }, selectedVehicle.speed !== null ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement( import_lucide_react5.Navigation, { size: 16, className: "text-[#0062FF] dark:text-[#4A90E2]" } ), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-xs text-[#6B7280] dark:text-[#9CA3AF]" }, "Speed"), /* @__PURE__ */ React.createElement("p", { className: "text-sm font-semibold text-[#111827] dark:text-[#DEDEDE]" }, selectedVehicle.speed.toFixed(1), " km/h"))) : null, selectedVehicle.fuelLevel !== null ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement( import_lucide_react5.Fuel, { size: 16, className: "text-[#0062FF] dark:text-[#4A90E2]" } ), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-xs text-[#6B7280] dark:text-[#9CA3AF]" }, "Fuel"), /* @__PURE__ */ React.createElement("p", { className: "text-sm font-semibold text-[#111827] dark:text-[#DEDEDE]" }, selectedVehicle.fuelLevel.toFixed(1), "%"))) : null, selectedVehicle.lastUpdate ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 col-span-2" }, /* @__PURE__ */ React.createElement( import_lucide_react5.Clock, { size: 16, className: "text-[#0062FF] dark:text-[#4A90E2]" } ), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-xs text-[#6B7280] dark:text-[#9CA3AF]" }, "Last Update"), /* @__PURE__ */ React.createElement("p", { className: "text-sm font-semibold text-[#111827] dark:text-[#DEDEDE]" }, formatTimestamp(selectedVehicle.lastUpdate)))) : null)) : null); } function formatTimestamp(timestamp) { const date = new Date(timestamp); const now = /* @__PURE__ */ new Date(); const diffMs = now - date; const diffMins = Math.floor(diffMs / 6e4); if (diffMins < 1) return "Just now"; if (diffMins < 60) return `${diffMins}m ago`; const diffHours = Math.floor(diffMins / 60); if (diffHours < 24) return `${diffHours}h ago`; return date.toLocaleString(); } // virtual:/apps/web/src/app/page.jsx var import_lucide_react6 = __toESM(require_lucide_react()); async function fetchDashboardStats() { const response = await fetch("/api/dashboard/stats"); if (!response.ok) { throw new Error("Failed to fetch dashboard stats"); } return response.json(); } async function fetchUnits(limit = 10) { const response = await fetch(`/api/units?limit=${limit}`); if (!response.ok) { throw new Error("Failed to fetch units"); } return response.json(); } async function fetchRecentAdasEvents(limit = 5) { const response = await fetch(`/api/adas/events?limit=${limit}`); if (!response.ok) { throw new Error("Failed to fetch ADAS events"); } return response.json(); } async function bootstrapAdmin() { const response = await fetch("/api/control-centre/bootstrap-admin", { method: "POST" }); if (!response.ok) { throw new Error("Failed to bootstrap admin"); } return response.json(); } function DashboardPage() { const [selectedVehicle, setSelectedVehicle] = (0, import_react11.useState)(null); const [setupStatus, setSetupStatus] = (0, import_react11.useState)(null); const { data: stats, isLoading: statsLoading, error: statsError, refetch: refetchStats } = useQuery({ queryKey: ["dashboardStats"], queryFn: fetchDashboardStats, refetchInterval: 3e4, retry: false }); const { data: unitsData, isLoading: unitsLoading } = useQuery({ queryKey: ["units"], queryFn: () => fetchUnits(10), refetchInterval: 15e3 }); const { data: adasData, isLoading: adasLoading } = useQuery({ queryKey: ["recentAdasEvents"], queryFn: () => fetchRecentAdasEvents(5), refetchInterval: 2e4 }); const handleSetup = async () => { setSetupStatus("loading"); try { await bootstrapAdmin(); setSetupStatus("success"); setTimeout(() => { window.location.reload(); }, 1500); } catch (error) { console.error("Setup failed:", error); setSetupStatus("error"); } }; const units = unitsData?.units || []; const adasEvents = adasData?.events || []; const getMapCenter = () => { if (selectedVehicle?.tracking) { return { lat: selectedVehicle.tracking.latitude, lng: selectedVehicle.tracking.longitude }; } if (units.length > 0 && units[0].tracking) { return { lat: units[0].tracking.latitude, lng: units[0].tracking.longitude }; } return { lat: -1.286389, lng: 36.817223 }; }; const vehiclesForMap = units.filter((unit) => unit.tracking).map((unit) => ({ unitId: unit.id, name: unit.name, unitCode: unit.unit_id, licensePlate: unit.license_plate, position: { lat: unit.tracking.latitude, lng: unit.tracking.longitude }, heading: unit.tracking.heading, speed: unit.tracking.speed, fuelLevel: unit.tracking.fuel_level, engineStatus: unit.tracking.engine_status, lastUpdate: unit.tracking.timestamp, secondsAgo: Math.floor( (Date.now() - new Date(unit.tracking.timestamp)) / 1e3 ) })); const getSeverityColor = (severity) => { switch (severity) { case "critical": return "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20"; case "high": return "text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-900/20"; case "medium": return "text-yellow-600 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/20"; default: return "text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20"; } }; return /* @__PURE__ */ React.createElement("div", { className: "flex h-screen bg-gray-50 dark:bg-[#121212]" }, /* @__PURE__ */ React.createElement("div", { className: "hidden lg:block" }, /* @__PURE__ */ React.createElement(SidebarNavigation, { activePage: "dashboard" })), /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex flex-col min-w-0 overflow-hidden" }, /* @__PURE__ */ React.createElement(DashboardHeader, { title: "Dashboard" }), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 sm:p-6" }, statsError && /* @__PURE__ */ React.createElement("div", { className: "mb-6 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("h3", { className: "text-blue-900 dark:text-blue-100 font-semibold text-lg mb-2" }, "\u{1F44B} Welcome to GeoTrek!"), /* @__PURE__ */ React.createElement("p", { className: "text-blue-800 dark:text-blue-200 text-sm mb-4" }, "Looks like this is your first time here. Let's set up your account as an admin and create your organization."), /* @__PURE__ */ React.createElement( "button", { onClick: handleSetup, disabled: setupStatus === "loading" || setupStatus === "success", className: "bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white px-6 py-2 rounded-lg font-medium transition-colors" }, setupStatus === "loading" && "Setting up...", setupStatus === "success" && "\u2713 Done! Refreshing...", setupStatus === "error" && "Try Again", !setupStatus && "Complete Setup" ), setupStatus === "error" && /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-red-600 dark:text-red-400 text-sm" }, "Setup failed. Please try again or contact support.")))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6" }, /* @__PURE__ */ React.createElement( StatsCard, { title: "Total Units", value: statsLoading ? "..." : stats?.totalUnits || 0, subtitle: "Registered vehicles", icon: import_lucide_react6.Truck, color: "blue" } ), /* @__PURE__ */ React.createElement( StatsCard, { title: "Active Now", value: statsLoading ? "..." : stats?.activeUnits || 0, subtitle: "Currently tracking", icon: import_lucide_react6.Activity, color: "green" } ), /* @__PURE__ */ React.createElement( StatsCard, { title: "ADAS Alerts", value: statsLoading ? "..." : stats?.adasEvents || 0, subtitle: "Last 24 hours", icon: import_lucide_react6.AlertTriangle, color: "orange" } ), /* @__PURE__ */ React.createElement( StatsCard, { title: "Avg Speed", value: statsLoading ? "..." : `${stats?.avgFleetSpeed || 0}`, subtitle: "km/h fleet average", icon: import_lucide_react6.TrendingUp, color: "blue" } )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6" }, /* @__PURE__ */ React.createElement("div", { className: "lg:col-span-1 space-y-6" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("h2", { className: "text-[#111827] dark:text-[#DEDEDE] font-inter font-semibold text-lg" }, "Recent Units"), /* @__PURE__ */ React.createElement( "a", { href: "/units", className: "text-[#0062FF] dark:text-[#4A90E2] text-sm font-inter hover:underline" }, "View All" )), /* @__PURE__ */ React.createElement( VehicleList, { vehicles: units.slice(0, 5), onSelectVehicle: setSelectedVehicle } )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("h2", { className: "text-[#111827] dark:text-[#DEDEDE] font-inter font-semibold text-lg" }, "Recent ADAS Events"), /* @__PURE__ */ React.createElement( "a", { href: "/adas", className: "text-[#0062FF] dark:text-[#4A90E2] text-sm font-inter hover:underline" }, "View All" )), /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, adasLoading ? /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-[#1E1E1E] rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center" }, /* @__PURE__ */ React.createElement("p", { className: "text-[#6B7280] dark:text-[#9CA3AF] font-inter" }, "Loading...")) : adasEvents.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-[#1E1E1E] rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center" }, /* @__PURE__ */ React.createElement("p", { className: "text-[#6B7280] dark:text-[#9CA3AF] font-inter" }, "No recent ADAS events")) : adasEvents.map((event) => /* @__PURE__ */ React.createElement( "div", { key: event.id, className: "bg-white dark:bg-[#1E1E1E] rounded-xl border border-gray-200 dark:border-gray-700 p-4 hover:shadow-md transition-all duration-200" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between mb-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[#111827] dark:text-[#DEDEDE] font-semibold font-inter text-sm capitalize" }, event.event_type.replace(/_/g, " ")), /* @__PURE__ */ React.createElement("p", { className: "text-[#6B7280] dark:text-[#9CA3AF] text-xs font-inter" }, event.unit_name, " \u2022 ", event.unit_id)), /* @__PURE__ */ React.createElement( "span", { className: `px-2 py-1 rounded-full text-xs font-medium ${getSeverityColor(event.severity)}` }, event.severity )), /* @__PURE__ */ React.createElement("p", { className: "text-[#6B7280] dark:text-[#9CA3AF] text-xs font-inter" }, new Date(event.timestamp).toLocaleString()) ))))), /* @__PURE__ */ React.createElement("div", { className: "lg:col-span-2" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-[#1E1E1E] rounded-xl border border-gray-200 dark:border-gray-700 p-4 sm:p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("h2", { className: "text-[#111827] dark:text-[#DEDEDE] font-inter font-semibold text-lg" }, "Live Tracking"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-1" }, /* @__PURE__ */ React.createElement("div", { className: "w-2 h-2 bg-green-500 rounded-full animate-pulse" }), /* @__PURE__ */ React.createElement("span", { className: "text-xs text-[#6B7280] dark:text-[#9CA3AF] font-inter" }, "Live")))), /* @__PURE__ */ React.createElement("div", { className: "relative h-[500px] sm:h-[600px] rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700" }, /* @__PURE__ */ React.createElement( UnifiedMap, { vehicles: vehiclesForMap, center: getMapCenter(), zoom: 12 } ))))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mt-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-[#1E1E1E] rounded-xl border border-gray-200 dark:border-gray-700 p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-[#6B7280] dark:text-[#9CA3AF] text-sm font-inter mb-1" }, "Active Geofences"), /* @__PURE__ */ React.createElement("h3", { className: "text-[#111827] dark:text-[#DEDEDE] text-2xl font-semibold font-inter" }, statsLoading ? "..." : stats?.activeGeofences || 0)), /* @__PURE__ */ React.createElement("div", { className: "w-12 h-12 bg-[#EDF1FF] dark:bg-[#1A2332] rounded-xl flex items-center justify-center" }, /* @__PURE__ */ React.createElement( import_lucide_react6.MapPin, { size: 24, className: "text-[#0062FF] dark:text-[#4A90E2]" } )))), /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-[#1E1E1E] rounded-xl border border-gray-200 dark:border-gray-700 p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-[#6B7280] dark:text-[#9CA3AF] text-sm font-inter mb-1" }, "Critical Alerts"), /* @__PURE__ */ React.createElement("h3", { className: "text-[#111827] dark:text-[#DEDEDE] text-2xl font-semibold font-inter" }, statsLoading ? "..." : stats?.criticalAdasEvents || 0)), /* @__PURE__ */ React.createElement("div", { className: "w-12 h-12 bg-[#FDEBF0] dark:bg-[#3A1A1A] rounded-xl flex items-center justify-center" }, /* @__PURE__ */ React.createElement( import_lucide_react6.AlertTriangle, { size: 24, className: "text-[#E5383B] dark:text-[#FF7875]" } )))), /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-[#1E1E1E] rounded-xl border border-gray-200 dark:border-gray-700 p-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-[#6B7280] dark:text-[#9CA3AF] text-sm font-inter mb-1" }, "Offline Units"), /* @__PURE__ */ React.createElement("h3", { className: "text-[#111827] dark:text-[#DEDEDE] text-2xl font-semibold font-inter" }, statsLoading ? "..." : stats?.offlineUnits || 0)), /* @__PURE__ */ React.createElement("div", { className: "w-12 h-12 bg-[#F6EED4] dark:bg-[#3D2914] rounded-xl flex items-center justify-center" }, /* @__PURE__ */ React.createElement( import_lucide_react6.Truck, { size: 24, className: "text-[#B88710] dark:text-[#FADB14]" } )))))))); } // virtual:/apps/web/src/app/layout.jsx init_injected_globals(); // virtual:/apps/web/src/components/AutomationHeartbeat.jsx init_injected_globals(); var import_react12 = __toESM(require_react()); async function runAutomation({ lookbackMinutes }) { const res = await fetch("/api/control-centre/automation/run", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ lookbackMinutes }) }); if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error( data?.error || `When POSTing /api/control-centre/automation/run, the response was [${res.status}] ${res.statusText}` ); } return res.json(); } function AutomationHeartbeat() { const runningRef = (0, import_react12.useRef)(false); const { data: user, loading } = useUser_default(); (0, import_react12.useEffect)(() => { if (loading) return; const role = String(user?.role || "user").toLowerCase(); if (!user || role !== "admin") { return; } let intervalId = null; let cancelled = false; const tick = async () => { if (cancelled) return; if (runningRef.current) return; if (typeof document !== "undefined" && document.hidden) { return; } try { runningRef.current = true; await runAutomation({ lookbackMinutes: 5 }); } catch (e) { console.error("AutomationHeartbeat tick failed", e); } finally { runningRef.current = false; } }; tick(); intervalId = setInterval(tick, 5 * 60 * 1e3); return () => { cancelled = true; if (intervalId) clearInterval(intervalId); }; }, [user, loading]); return null; } // virtual:/apps/web/src/app/layout.jsx var queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1e3 * 60 * 5, // 5 minutes cacheTime: 1e3 * 60 * 30, // 30 minutes retry: 1, refetchOnWindowFocus: false } } }); function RootLayout({ children }) { return /* @__PURE__ */ React.createElement("html", { lang: "en" }, /* @__PURE__ */ React.createElement("head", null, /* @__PURE__ */ React.createElement("meta", { charSet: "utf-8" }), /* @__PURE__ */ React.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), /* @__PURE__ */ React.createElement("title", null, "TelematixHub - Fleet Management Platform"), /* @__PURE__ */ React.createElement( "script", { dangerouslySetInnerHTML: { __html: ` (function() { const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); const isDarkMode = darkModeMediaQuery.matches; if (isDarkMode) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } darkModeMediaQuery.addEventListener('change', (e) => { if (e.matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } }); })(); ` } } )), /* @__PURE__ */ React.createElement("body", null, /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(AutomationHeartbeat, null), children))); } // virtual:/__wrapped_entry__.jsx function WrappedPage(props) { let content = /* @__PURE__ */ import_react13.default.createElement(DashboardPage, { ...props }); content = /* @__PURE__ */ import_react13.default.createElement(RootLayout, null, content); return content; } return __toCommonJS(wrapped_entry_exports); })(); /*! Bundled license information: react/cjs/react-jsx-runtime.production.min.js: (** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. *) lucide-react/dist/cjs/lucide-react.js: (** * @license lucide-react v0.358.0 - ISC * * This source code is licensed under the ISC license. * See the LICENSE file in the root directory of this source tree. *) */