@joewinke/jatui 0.1.23 → 0.1.24

package/src/lib/components/MapView.svelte

@@ -1,341 +0,0 @@
-<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>