"use client"; // Leaflet's and marker-cluster's stylesheets are imported globally in // app/globals.css — see the comment there for why they must not live here. import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet"; import MarkerClusterGroup from "react-leaflet-cluster"; import L from "leaflet"; import { MapPinned, Loader2, Search, X, MapPin, Trash2 } from "lucide-react"; import { cn } from "@/lib/utils"; type MapAsset = { id: string; code: string; name: string; category: string; type: string; is_active: boolean; latitude: number | null; longitude: number | null; }; /** A machine counts as located only with a real, non-null, non-(0,0) pair. */ export function hasCoords(a: MapAsset): boolean { if (a.latitude == null || a.longitude == null) return false; if (a.latitude === 0 && a.longitude === 0) return false; return true; } // Johannesburg / Ekurhuleni — the client operates around Halfway Gardens, // Cosmo City and West Park. Swap this when the fleet spreads nationally. const DEFAULT_CENTER: [number, number] = [-26.05, 28.05]; const DEFAULT_ZOOM = 10; // Tile providers. Light mode stays on OpenStreetMap's standard tiles. Dark mode // uses Esri's World Dark Gray Canvas, which is a genuine dark basemap and needs // no API key. // // Do not switch dark mode back to CARTO (basemaps.cartocdn.com). CARTO retired // keyless basemap access: it now answers every tile request with HTTP 200 and a // 256x256 PNG that is just a dark square watermarked "API KEY REQUIRED". Leaflet // treats that as a valid tile and paints it, so the map fills with the warning // and nothing appears in the console or the network tab as an error. // // OSM's usage policy still forbids heavy/commercial traffic. That is fine for a // handful of staff; move both providers to a paid tier before the site count grows. const TILES = { light: { url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attribution: '© OpenStreetMap contributors', }, dark: { attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ', }, } as const; const ESRI_DARK_SERVICE = "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile"; /** * Esri's ArcGIS REST service is keyless but orders the tile path {z}/{y}/{x} — * the reverse of the {z}/{x}/{y} that every other provider uses and the only * order Leaflet knows how to substitute. Overriding getTileUrl is the whole fix. */ const EsriDarkLayer = L.TileLayer.extend({ getTileUrl(coords: L.Coords) { return `${ESRI_DARK_SERVICE}/${coords.z}/${coords.y}/${coords.x}`; }, }) as unknown as typeof L.TileLayer; /** * react-leaflet always instantiates Leaflet's own TileLayer for , so * the Esri class cannot be slotted in as a prop. Adding it to the map directly * and tearing it down on unmount is the supported way to swap the class. */ function DarkTiles({ attribution }: { attribution: string }) { const map = useMap(); useEffect(() => { // The url argument is never read: getTileUrl above fully overrides it. const layer = new EsriDarkLayer(ESRI_DARK_SERVICE, { attribution }); layer.addTo(map); return () => { map.removeLayer(layer); }; }, [map, attribution]); return null; } const escapeHtml = (s: string) => s.replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[c] as string, ); /** * Leaflet's stock markers point at image files that Webpack rewrites, which * breaks under Next's bundler. A divIcon with inline markup sidesteps asset * resolution entirely and lets the pin carry the machine code and brand colour. */ function badgeIcon(label: string, active: boolean) { const fill = active ? "#00798C" : "#9CA3AF"; const ring = active ? "rgba(0,121,140,0.28)" : "rgba(156,163,175,0.25)"; return L.divIcon({ className: "plant-map-marker", html: `${escapeHtml(label)}`, iconSize: [34, 34], iconAnchor: [17, 17], popupAnchor: [0, -20], }); } /** * Cluster bubble showing how many machines share a point. Sizing steps up with * the count so a glance reads magnitude, and the colour walks the brand's own * ramp — teal for a handful, indigo navy for a full yard. * * `fontSize` and `iconSize` are interpolated from the plugin's 0–10 * `childCount`, which is how markercluster reports cluster density. */ function clusterIcon(cluster: L.MarkerCluster) { const count = cluster.getChildCount(); const density = Math.min(cluster.getChildCount() / 10, 1); const size = Math.round(44 + density * 16); // 44px floor keeps it tappable on a phone const fill = count < 10 ? "#00798C" : count < 50 ? "#30638E" : "#003D5B"; const fontSize = count > 999 ? 13 : count > 99 ? 14 : 15; return L.divIcon({ className: "plant-map-cluster", html: `${count}`, iconSize: [size, size], // Anchor on the centre: a cluster represents a point, not a pin tip. iconAnchor: [size / 2, size / 2], }); } /** Re-centres the map when the caller asks (fit-all, or a list selection). */ function MapController({ focus }: { focus: { lat: number; lng: number; zoom?: number } | null }) { const map = useMap(); useEffect(() => { if (!focus) return; map.flyTo([focus.lat, focus.lng], focus.zoom ?? Math.max(map.getZoom(), 15), { duration: 0.8, }); }, [focus, map]); return null; } export function PlantMap({ assets }: { assets: MapAsset[] }) { const [assetsState, setAssets] = useState(assets); const [query, setQuery] = useState(""); const [showInactive, setShowInactive] = useState(true); const [focus, setFocus] = useState<{ lat: number; lng: number; zoom?: number } | null>(null); const [dark, setDark] = useState(false); const [placingId, setPlacingId] = useState(null); const [saving, setSaving] = useState(false); const [notice, setNotice] = useState(null); // Read the theme class the ThemeProvider puts on . Leaflet needs the // right tile set, and this is cheaper than threading context through here. useEffect(() => { const mq = window.matchMedia("(prefers-color-scheme: dark)"); const read = () => setDark(document.documentElement.classList.contains("dark")); read(); const obs = new MutationObserver(read); obs.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); mq.addEventListener("change", read); return () => { obs.disconnect(); mq.removeEventListener("change", read); }; }, []); const located = useMemo(() => assetsState.filter(hasCoords), [assetsState]); const awaiting = useMemo(() => assetsState.filter((a) => !hasCoords(a)), [assetsState]); const visible = useMemo(() => { const q = query.trim().toLowerCase(); return assetsState .filter((a) => (showInactive ? true : a.is_active)) .filter( (a) => !q || a.code.toLowerCase().includes(q) || a.name.toLowerCase().includes(q) || a.type.toLowerCase().includes(q), ); }, [assetsState, query, showInactive]); const saveCoords = useCallback(async (id: string, lat: number, lng: number) => { setSaving(true); try { const res = await fetch(`/api/assets/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ latitude: lat, longitude: lng }), }); const data = await res.json(); if (!res.ok || !data.ok) throw new Error(data.error || "Could not save location"); setAssets((curr) => curr.map((a) => (a.id === id ? { ...a, latitude: lat, longitude: lng } : a)), ); setNotice("Location saved"); } catch (e: any) { setNotice(e?.message || "Could not save location"); } finally { setSaving(false); } }, []); const clearCoords = useCallback(async (id: string) => { setSaving(true); try { const res = await fetch(`/api/assets/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ latitude: null, longitude: null }), }); const data = await res.json(); if (!res.ok || !data.ok) throw new Error(data.error || "Could not clear location"); setAssets((curr) => curr.map((a) => (a.id === id ? { ...a, latitude: null, longitude: null } : a)), ); setNotice("Location cleared"); } catch (e: any) { setNotice(e?.message || "Could not clear location"); } finally { setSaving(false); } }, []); useEffect(() => { if (!notice) return; const t = window.setTimeout(() => setNotice(null), 2500); return () => window.clearTimeout(t); }, [notice]); const placing = placingId ? assetsState.find((a) => a.id === placingId) : null; return (
{/* ── Map ─────────────────────────────────────────────────────── */}
{dark ? ( ) : ( )} {/* Clustering: machines sharing a point collapse into one numbered bubble. Clicking a bubble zooms to the machines inside it, and markers that genuinely overlap at max zoom spiderfy apart so every machine stays individually reachable. */} {located.map((a) => (
{escapeHtml(a.name)}
{escapeHtml(a.code || "no code")} {a.type ? ` · ${escapeHtml(a.type)}` : ""}
{a.is_active ? "Active" : "Inactive"}
{a.latitude?.toFixed(5)}, {a.longitude?.toFixed(5)}
))} {/* Placing mode — capture the map click outside React's synthetic tree */} {placingId && ( saveCoords(placingId, lat, lng)} disabled={saving} /> )} {/* Legend */}
Active Inactive {located.length > 1 && ( <> Cluster — tap to zoom )}
{/* Nothing located yet */} {located.length === 0 && !placingId && (

No coordinates yet

All {awaiting.length} machines are waiting on the on-site scan sheet. Until it lands, drop a pin manually below to start building the map.

)} {notice && (
{notice}
)}
{/* ── Side panel ──────────────────────────────────────────────── */}
); } /** * Leaflet's own click handler is managed by react-leaflet's internals, so a * tap while "placing" needs its own listener on the container. Registered * imperatively and removed on unmount. */ function MapClickCapture({ onPick, disabled, }: { onPick: (lat: number, lng: number) => void; disabled: boolean; }) { const mapRef = useMap(); const handlerRef = useRef(onPick); handlerRef.current = onPick; useEffect(() => { if (disabled) return; const map = mapRef; const onClick = (e: L.LeafletMouseEvent) => handlerRef.current(e.latlng.lat, e.latlng.lng); map.on("click", onClick); return () => { map.off("click", onClick); }; }, [mapRef, disabled]); return null; }