@joewinke/jatui 0.1.19 → 0.1.21

package/src/lib/components/MapView.svelte

@@ -0,0 +1,341 @@
+<script lang="ts">
+	/**
+	 * MapView — multi-marker Google Maps component.
+	 *
+	 * Generic map for dispatching / field-service use cases. Renders job pins
+	 * (colored by status) and agent pins (colored by availability status) using
+	 * Google Maps Advanced Markers.
+	 *
+	 * API key is passed explicitly — jatui has no $env dependency.
+	 *
+	 * Usage:
+	 *
+	 *   <MapView
+	 *     apiKey={PUBLIC_GOOGLE_MAPS_API_KEY}
+	 *     jobs={jobs}
+	 *     agents={technicians}
+	 *     onJobClick={(job) => openDetail(job)}
+	 *   />
+	 *
+	 * Ported from flush DispatchMap (622L) — steelbridge fork capture (jst-e0d1u.4).
+	 */
+	import { onMount, onDestroy, mount, unmount } from 'svelte';
+	import { loadGoogleMapsAPI, isGoogleMapsLoaded } from '../utils/googleMapsLoader';
+	import UserAvatar from './UserAvatar.svelte';
+	import type { MapJob, MapAgent } from '../types/maps';
+
+	export type { MapJob, MapAgent };
+
+	interface Props {
+		apiKey: string;
+		jobs?: MapJob[];
+		agents?: MapAgent[];
+		/** Default map center — lat/lng. Defaults to West Palm Beach. */
+		defaultCenter?: { lat: number; lng: number };
+		showLegend?: boolean;
+		onJobClick?: (job: MapJob) => void;
+		onAgentClick?: (agent: MapAgent) => void;
+	}
+
+	let {
+		apiKey,
+		jobs = [],
+		agents = [],
+		defaultCenter = { lat: 26.3683, lng: -80.1289 },
+		showLegend = true,
+		onJobClick,
+		onAgentClick
+	}: Props = $props();
+
+	// Job status → hex color (hardcoded by design — not themed, maps sit outside DaisyUI theming)
+	const STATUS_COLORS: Record<string, string> = {
+		pending: '#f59e0b',
+		scheduled: '#3b82f6',
+		in_progress: '#10b981',
+		completed: '#6b7280',
+		cancelled: '#ef4444'
+	};
+
+	let mapContainer: HTMLElement;
+	let map: google.maps.Map;
+	let jobMarkers: any[] = [];
+	let agentMarkers: any[] = [];
+	let AdvancedMarkerElement: any;
+
+	onMount(async () => {
+		if (!apiKey) {
+			console.warn('MapView: No Google Maps API key provided');
+			return;
+		}
+		try {
+			await loadGoogleMapsAPI({ apiKey, libraries: ['geometry', 'marker'] });
+			if (window.google?.maps?.marker) {
+				AdvancedMarkerElement = window.google.maps.marker.AdvancedMarkerElement;
+			}
+			if (isGoogleMapsLoaded()) initializeMap();
+		} catch (e) {
+			console.warn('MapView: Failed to load Google Maps API', e);
+		}
+	});
+
+	onDestroy(() => {
+		clearAllMarkers();
+	});
+
+	async function geocodeAddress(address: string): Promise<{ lat: number; lng: number } | null> {
+		if (!apiKey || !address) return null;
+		try {
+			const res = await fetch(
+				`https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${apiKey}`
+			);
+			const data = await res.json();
+			if (data.status === 'OK' && data.results.length > 0) {
+				const loc = data.results[0].geometry.location;
+				return { lat: loc.lat, lng: loc.lng };
+			}
+		} catch {
+			// silently skip
+		}
+		return null;
+	}
+
+	function initializeMap() {
+		map = new google.maps.Map(mapContainer, {
+			zoom: 10,
+			center: defaultCenter,
+			mapTypeId: google.maps.MapTypeId.ROADMAP,
+			mapId: 'jatui-map-view',
+			styles: [{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'off' }] }]
+		});
+		updateMarkers();
+		fitMapToMarkers();
+	}
+
+	function updateMarkers() {
+		clearAllMarkers();
+		createJobMarkers();
+		createAgentMarkers();
+	}
+
+	function clearAllMarkers() {
+		jobMarkers.forEach((m) => (m.map = null));
+		agentMarkers.forEach((m) => {
+			m.map = null;
+			if (m._component) unmount(m._component);
+		});
+		jobMarkers = [];
+		agentMarkers = [];
+	}
+
+	function createJobMarkers() {
+		jobs.forEach((job) => {
+			if (!job.location?.latitude || !job.location?.longitude) {
+				// Try geocoding if we have an address but no coords
+				if (job.location?.address) {
+					geocodeAddress(job.location.address).then((coords) => {
+						if (coords) placeJobMarker(job, coords);
+					});
+				}
+				return;
+			}
+			placeJobMarker(job, { lat: job.location.latitude, lng: job.location.longitude });
+		});
+	}
+
+	function placeJobMarker(job: MapJob, position: { lat: number; lng: number }) {
+		if (!AdvancedMarkerElement) return;
+
+		const pin = document.createElement('div');
+		pin.style.cssText = `width:24px;height:24px;border-radius:50%;background:${STATUS_COLORS[job.status] ?? STATUS_COLORS.pending};border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.3)`;
+
+		const marker = new AdvancedMarkerElement({
+			position,
+			map,
+			title: `${job.customer?.name ?? 'Unknown'} — ${job.type ?? ''}`,
+			content: pin
+		});
+
+		const infoWindow = new google.maps.InfoWindow({ content: buildJobInfo(job) });
+
+		marker.addListener('click', () => {
+			infoWindow.open(map, marker);
+			onJobClick?.(job);
+		});
+
+		jobMarkers.push(marker);
+		fitMapToMarkers();
+	}
+
+	function createAgentMarkers() {
+		agents.forEach((agent) => {
+			let position: { lat: number; lng: number } | null = null;
+
+			// Priority 1: fresh GPS (< 5 min)
+			if (agent.location?.latitude && agent.location?.longitude) {
+				const ageMins = (agent.location.age_seconds ?? 0) / 60;
+				if (ageMins < 5) position = { lat: agent.location.latitude, lng: agent.location.longitude };
+			}
+
+			// Priority 2: active dispatch job location
+			if (!position && agent.dispatches) {
+				const active = agent.dispatches.find(
+					(d) => d.status === 'in_progress' || d.status === 'en_route'
+				);
+				if (active) {
+					const assignedJob = jobs.find((j) => j.id === active.job_id);
+					if (assignedJob?.location?.latitude && assignedJob?.location?.longitude) {
+						position = { lat: assignedJob.location.latitude, lng: assignedJob.location.longitude };
+					}
+				}
+			}
+
+			if (!position) return;
+
+			const container = document.createElement('div');
+			container.style.cssText = 'display:flex;flex-direction:column;align-items:center;cursor:pointer';
+
+			const avatarEl = document.createElement('div');
+			container.appendChild(avatarEl);
+
+			const label = document.createElement('div');
+			label.style.cssText =
+				'font-size:10px;font-weight:600;white-space:nowrap;margin-top:2px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)';
+			label.textContent = agent.name.split(' ')[0];
+			container.appendChild(label);
+
+			// Mount UserAvatar into the DOM node
+			const avatarComponent = mount(UserAvatar, {
+				target: avatarEl,
+				props: {
+					name: agent.name,
+					email: agent.email,
+					avatarUrl: agent.avatarUrl,
+					size: 'sm',
+					tooltip: false
+				}
+			});
+
+			const marker = new AdvancedMarkerElement({
+				position,
+				map,
+				title: agent.name,
+				content: container
+			});
+
+			const infoWindow = new google.maps.InfoWindow({ content: buildAgentInfo(agent) });
+
+			marker.addListener('click', () => {
+				infoWindow.open(map, marker);
+				onAgentClick?.(agent);
+			});
+
+			marker._component = avatarComponent;
+			agentMarkers.push(marker);
+		});
+	}
+
+	function buildJobInfo(job: MapJob): string {
+		const statusBadge = `<span class="badge badge-sm" style="background:${STATUS_COLORS[job.status] ?? '#888'};color:#fff">${job.status.replace(/_/g, ' ')}</span>`;
+		const priority =
+			job.priority === 'urgent'
+				? `<span class="badge badge-error badge-sm">urgent</span>`
+				: '';
+		return `<div style="padding:8px;min-width:180px;font-family:sans-serif;font-size:13px">
+      <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;font-weight:600">
+        ${job.customer?.name ?? 'Unknown Customer'} ${statusBadge}
+      </div>
+      ${job.type ? `<div><b>Service:</b> ${job.type.replace(/_/g, ' ')}</div>` : ''}
+      ${job.customer?.phone ? `<div><b>Phone:</b> ${job.customer.phone}</div>` : ''}
+      ${job.location?.address ? `<div><b>Address:</b> ${job.location.address}</div>` : ''}
+      ${job.scheduled_at ? `<div><b>Scheduled:</b> ${new Date(job.scheduled_at).toLocaleString()}</div>` : ''}
+      ${priority}
+      ${job.description ? `<div style="margin-top:4px"><b>Notes:</b> ${job.description}</div>` : ''}
+    </div>`;
+	}
+
+	function buildAgentInfo(agent: MapAgent): string {
+		const gpsAge = agent.location?.age_seconds ?? 0;
+		const gpsMins = Math.floor(gpsAge / 60);
+		const hasGps = !!(agent.location?.latitude && agent.location?.longitude);
+		return `<div style="padding:8px;min-width:180px;font-family:sans-serif;font-size:13px">
+      <div style="font-weight:600;margin-bottom:6px">${agent.name}</div>
+      ${agent.status ? `<div><b>Status:</b> ${agent.status}</div>` : ''}
+      ${agent.capacity ? `<div><b>Capacity:</b> ${agent.capacity}</div>` : ''}
+      ${hasGps ? `<div><b>GPS:</b> <span style="color:${gpsMins < 5 ? '#16a34a' : '#d97706'}">${gpsMins < 1 ? 'Live' : `${gpsMins}m ago`}</span></div>` : ''}
+      ${agent.specializations?.length ? `<div><b>Specializations:</b> ${agent.specializations.join(', ')}</div>` : ''}
+      ${agent.vehicle?.name ? `<div><b>Vehicle:</b> ${agent.vehicle.name}</div>` : ''}
+    </div>`;
+	}
+
+	function fitMapToMarkers() {
+		if (!map) return;
+		const all = [...jobMarkers, ...agentMarkers];
+		if (all.length === 0) return;
+
+		const bounds = new google.maps.LatLngBounds();
+		all.forEach((m) => m.position && bounds.extend(m.position));
+		map.fitBounds(bounds);
+
+		const listener = google.maps.event.addListener(map, 'idle', () => {
+			if ((map.getZoom() ?? 0) > 15) map.setZoom(15);
+			google.maps.event.removeListener(listener);
+		});
+	}
+
+	// Reactive: re-render markers when jobs/agents change
+	$effect(() => {
+		if (map) {
+			updateMarkers();
+			fitMapToMarkers();
+		}
+	});
+</script>
+
+<div class="h-full flex flex-col">
+	<div class="map-container flex-1 w-full rounded-lg border border-base-300 overflow-hidden relative">
+		<div bind:this={mapContainer} class="w-full h-full"></div>
+	</div>
+
+	{#if showLegend}
+		<div class="p-3 bg-base-100 border-t border-base-300 flex-shrink-0">
+			<div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
+				<span class="font-semibold">Legend</span>
+
+				<div class="flex items-center gap-2">
+					<span class="font-medium text-xs">Job status</span>
+					<div class="tooltip" data-tip="Pending">
+						<div class="w-3.5 h-3.5 rounded-full" style="background:#f59e0b"></div>
+					</div>
+					<div class="tooltip" data-tip="Scheduled">
+						<div class="w-3.5 h-3.5 rounded-full" style="background:#3b82f6"></div>
+					</div>
+					<div class="tooltip" data-tip="In Progress">
+						<div class="w-3.5 h-3.5 rounded-full" style="background:#10b981"></div>
+					</div>
+					<div class="tooltip" data-tip="Completed">
+						<div class="w-3.5 h-3.5 rounded-full" style="background:#6b7280"></div>
+					</div>
+					<div class="tooltip" data-tip="Cancelled">
+						<div class="w-3.5 h-3.5 rounded-full" style="background:#ef4444"></div>
+					</div>
+				</div>
+
+				<div class="flex items-center gap-2">
+					<span class="font-medium text-xs">Agents</span>
+					<div class="tooltip" data-tip="Available">
+						<div class="w-7 h-7 rounded-full bg-neutral ring-2 ring-offset-1 ring-offset-base-100 ring-success flex items-center justify-center text-neutral-content text-[10px] font-bold">A</div>
+					</div>
+					<div class="tooltip" data-tip="En Route">
+						<div class="w-7 h-7 rounded-full bg-neutral ring-2 ring-offset-1 ring-offset-base-100 ring-warning flex items-center justify-center text-neutral-content text-[10px] font-bold">E</div>
+					</div>
+					<div class="tooltip" data-tip="On Job">
+						<div class="w-7 h-7 rounded-full bg-neutral ring-2 ring-offset-1 ring-offset-base-100 ring-primary flex items-center justify-center text-neutral-content text-[10px] font-bold">W</div>
+					</div>
+					<div class="tooltip" data-tip="Offline">
+						<div class="w-7 h-7 rounded-full bg-neutral ring-2 ring-offset-1 ring-offset-base-100 ring-base-300 flex items-center justify-center text-neutral-content text-[10px] font-bold">O</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>