Created a database for the hospitals and displayed them on frontend

.claude/settings.local.json

@@ -1,7 +1,10 @@
 {
   "permissions": {
     "allow": [
-      "Bash(docker compose:*)"
+      "Bash(docker compose:*)",
+      "Bash(curl:*)",
+      "Bash(python3:*)",
+      "WebSearch"
     ]
   }
 }

frontend/src/components/AmbulancePanel.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useEffect, useRef } from "react";
 import "./AmbulancePanel.css";
 import AmbulanceCard from "./AmbulanceCard";
 
@@ -26,6 +26,7 @@ interface PanelProps {
 	handleViewChange: (view: ActiveView) => void;
 	units: UnitInfo[];
 	onUnitClick: (unit: UnitInfo) => void;
+	focusedUnitId?: string | null;
 }
 
 const STATUS_FILTER_ORDER: { key: UnitStatus; cssClass: string }[] = [
@@ -40,7 +41,25 @@ export default function AmbulancePanel({
 	handleViewChange,
 	units,
 	onUnitClick,
+	focusedUnitId,
 }: PanelProps) {
+	const unitListRef = useRef<HTMLDivElement | null>(null);
+
+	const sortedUnits = useMemo(() => {
+		if (!focusedUnitId) return units;
+		return [...units].sort((a, b) => {
+			if (a.id === focusedUnitId) return -1;
+			if (b.id === focusedUnitId) return 1;
+			return 0;
+		});
+	}, [units, focusedUnitId]);
+
+	useEffect(() => {
+		if (focusedUnitId && unitListRef.current) {
+			unitListRef.current.scrollTop = 0;
+		}
+	}, [focusedUnitId]);
+
 	const statusCounts = useMemo(() => {
 		const counts: Record<string, number> = {};
 		for (const u of units) {
@@ -72,8 +91,8 @@ export default function AmbulancePanel({
 				<h3 className="section-title">Active Units</h3>
 
 				{/* Unit List */}
-				<div className="unit-list">
-					{units.map((u) => (
+				<div className="unit-list" ref={unitListRef}>
+					{sortedUnits.map((u) => (
 						// Wrap the card in a div to handle the click
 						<div
 							key={u.id}

frontend/src/components/CasePanel.tsx

@@ -1,4 +1,5 @@
 // CasesPanel.tsx
+import { useEffect, useRef, useMemo } from "react";
 import "./CasePanel.css";
 import CaseCard, { DispatchInfo } from "./CaseCard";
 import { CaseInfo, CasePriority } from "./types";
@@ -25,6 +26,7 @@ interface PanelProps {
 	onDispatch?: (incidentId: string) => void;
 	dispatchLoading?: boolean;
 	dispatchInfoMap?: Record<string, DispatchInfo>;
+	focusedIncidentId?: string | null;
 }
 
 export default function CasesPanel({
@@ -35,7 +37,26 @@ export default function CasesPanel({
 	onDispatch,
 	dispatchLoading,
 	dispatchInfoMap = {},
+	focusedIncidentId,
 }: PanelProps): JSX.Element {
+	const caseListRef = useRef<HTMLDivElement | null>(null);
+
+	// Sort incidents so the focused one is at the top
+	const sortedIncidents = useMemo(() => {
+		if (!focusedIncidentId) return incidents;
+		return [...incidents].sort((a, b) => {
+			if (a.id === focusedIncidentId) return -1;
+			if (b.id === focusedIncidentId) return 1;
+			return 0;
+		});
+	}, [incidents, focusedIncidentId]);
+
+	// Scroll the list container to the top when a focused incident changes
+	useEffect(() => {
+		if (focusedIncidentId && caseListRef.current) {
+			caseListRef.current.scrollTop = 0;
+		}
+	}, [focusedIncidentId]);
 
 	const priorityCounts: PriorityCounts = incidents.reduce((acc, c) => {
 		acc[c.priority] = (acc[c.priority] || 0) + 1;
@@ -74,13 +95,13 @@ export default function CasesPanel({
 				<h3 className="section-title">Active Cases</h3>
 
 				{/* Case List */}
-				<div className="case-list">
+				<div className="case-list" ref={caseListRef}>
 					{loading ? (
 						<p>Loading incidents...</p>
-					) : incidents.length === 0 ? (
+					) : sortedIncidents.length === 0 ? (
 						<p>No incidents reported.</p>
 					) : (
-						incidents.map((c) => (
+						sortedIncidents.map((c) => (
 							<CaseCard
 								key={c.id}
 								data={c}

frontend/src/components/Dashboard.tsx

@@ -1,4 +1,5 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
+import { Hospital } from "./types";
 import TranscriptPanel from "./TranscriptPanel";
 import MapPanel from "./MapPanel";
 import "./Dashboard.css";
@@ -35,6 +36,8 @@ function vehicleToUnit(v: VehicleData): UnitInfo {
 const Dashboard = () => {
 	const [activeView, setActiveView] = useState<ActiveView>("Ambulances");
 	const [focusedUnit, setFocusedUnit] = useState<UnitInfo | null>(null);
+	const [focusedUnitId, setFocusedUnitId] = useState<string | null>(null);
+	const [focusedIncidentId, setFocusedIncidentId] = useState<string | null>(null);
 	const [selectedSessionId, setSelectedSessionId] = useState<string | null>(
 		null
 	);
@@ -46,9 +49,19 @@ const Dashboard = () => {
 		loading: dispatchLoading,
 		findBest,
 		accept,
+		decline,
 		declineAndReassign,
 	} = useDispatchSuggestion();
 
+	const [hospitals, setHospitals] = useState<Hospital[]>([]);
+	const apiUrl = import.meta.env.VITE_API_URL || "http://localhost:8000";
+	useEffect(() => {
+		fetch(`${apiUrl}/hospitals`)
+			.then((res) => res.json())
+			.then((data) => setHospitals(data))
+			.catch((err) => console.error("Failed to fetch hospitals:", err));
+	}, [apiUrl]);
+
 	// Server-side auto-dispatch handles new incidents now — no client-side callback needed
 	const { incidents } = useIncidents();
 	const activeIncidents = incidents.filter((i) => i.status !== "resolved");
@@ -116,6 +129,16 @@ const Dashboard = () => {
 		setActiveView(view);
 	};
 
+	const handleIncidentClick = (incidentId: string) => {
+		setActiveView("Cases");
+		setFocusedIncidentId(incidentId);
+	};
+
+	const handleAmbulanceClick = (unitId: string) => {
+		setActiveView("Ambulances");
+		setFocusedUnitId(unitId);
+	};
+
 	const renderLeftPanel = () => {
 		if (activeView === "Ambulances") {
 			return (
@@ -124,6 +147,7 @@ const Dashboard = () => {
 					handleViewChange={handleViewChange}
 					units={units}
 					onUnitClick={(unit) => setFocusedUnit(unit)}
+					focusedUnitId={focusedUnitId}
 				/>
 			);
 		} else if (activeView === "Cases") {
@@ -136,6 +160,7 @@ const Dashboard = () => {
 					onDispatch={findBest}
 					dispatchLoading={dispatchLoading}
 					dispatchInfoMap={dispatchInfoMap}
+					focusedIncidentId={focusedIncidentId}
 				/>
 			);
 		} else {
@@ -161,9 +186,15 @@ const Dashboard = () => {
 					focusedUnit={focusedUnit}
 					routes={routes}
 					incidents={activeIncidents}
+					hospitals={hospitals}
 					dispatchSuggestion={suggestion}
 					onAcceptSuggestion={accept}
+					onDismissSuggestion={decline}
 					onDeclineSuggestion={declineAndReassign}
+					onIncidentClick={handleIncidentClick}
+					onDispatch={findBest}
+					dispatchLoading={dispatchLoading}
+					onAmbulanceClick={handleAmbulanceClick}
 				/>
 			</div>
 		</div>

frontend/src/components/MapPanel.tsx

@@ -10,7 +10,8 @@ import "./MapPanel.css";
 import { AmbulanceMapIcon } from "./AmbulanceMapIcon";
 import { IncidentMapIcon } from "./IncidentMapIcon";
 import { UnitInfo } from "./AmbulancePanel";
-import { CaseInfo, CasePriority, DispatchSuggestion } from "./types";
+import { CaseInfo, CasePriority, DispatchSuggestion, Hospital } from "./types";
+import hospitalIcon from "../assets/hospital_map_icon.png";
 
 const getPriorityColor = (p: string) => {
 	switch (p) {
@@ -34,9 +35,15 @@ interface MapPanelProps {
 	focusedUnit: UnitInfo | null;
 	routes?: Array<[string, google.maps.LatLngLiteral[]]>;
 	incidents?: CaseInfo[];
+	hospitals?: Hospital[];
 	dispatchSuggestion?: DispatchSuggestion | null;
 	onAcceptSuggestion?: () => void;
+	onDismissSuggestion?: () => void;
 	onDeclineSuggestion?: () => void;
+	onIncidentClick?: (incidentId: string) => void;
+	onDispatch?: (incidentId: string) => void;
+	dispatchLoading?: boolean;
+	onAmbulanceClick?: (unitId: string) => void;
 }
 
 const PRIORITY_COLORS: Record<CasePriority, string> = {
@@ -97,9 +104,15 @@ export default function MapPanel({
 	focusedUnit,
 	routes = [],
 	incidents = [],
+	hospitals = [],
 	dispatchSuggestion,
 	onAcceptSuggestion,
+	onDismissSuggestion,
 	onDeclineSuggestion,
+	onIncidentClick,
+	onDispatch,
+	dispatchLoading,
+	onAmbulanceClick,
 }: MapPanelProps) {
 	const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
 	const { isLoaded } = useLoadScript({ googleMapsApiKey: apiKey! });
@@ -128,6 +141,7 @@ export default function MapPanel({
 					mapRef.current = map;
 				}}
 				mapContainerStyle={{ width: "100%", height: "100%" }}
+				options={{ clickableIcons: false }}
 			>
 				{units.map((unit) => {
 					const position = parseCoords(unit.coords);
@@ -148,6 +162,8 @@ export default function MapPanel({
 						>
 							<div
 								className={`map-marker-container map-status-${statusClass}${isDispatched ? " map-marker-dispatched" : ""}${isSuggested ? " map-marker-suggested" : ""}`}
+								onClick={() => onAmbulanceClick?.(unit.id)}
+								style={{ cursor: "pointer" }}
 							>
 								<AmbulanceMapIcon className="ambulance-svg" />
 							</div>
@@ -177,7 +193,7 @@ export default function MapPanel({
 								options={{
 									pixelOffset: new google.maps.Size(0, -30),
 								}}
-								onCloseClick={onDeclineSuggestion}
+								onCloseClick={onDismissSuggestion}
 							>
 								<div
 									style={{
@@ -324,7 +340,8 @@ export default function MapPanel({
 							className="map-marker-container"
 							onMouseEnter={() => setHoveredIncidentId(incident.id)}
 							onMouseLeave={() => setHoveredIncidentId(null)}
-							style={{ position: "relative" }}
+							onClick={() => onIncidentClick?.(incident.id)}
+							style={{ position: "relative", cursor: "pointer" }}
 						>
 							<IncidentMapIcon
 								className="incident-svg"
@@ -337,15 +354,18 @@ export default function MapPanel({
 										bottom: "100%",
 										left: "50%",
 										transform: "translateX(-50%)",
-										marginBottom: 8,
+										paddingBottom: 8,
+										zIndex: 10,
+									}}
+								>
+								<div
+									style={{
 										background: "#fff",
 										borderRadius: 8,
 										boxShadow: "0 2px 12px rgba(0,0,0,0.18)",
 										padding: "10px 14px",
 										fontFamily: "sans-serif",
 										minWidth: 180,
-										zIndex: 10,
-										pointerEvents: "none",
 									}}
 								>
 									<div
@@ -415,14 +435,52 @@ export default function MapPanel({
 									>
 										{incident.location}
 									</div>
-									<div style={{ fontSize: 11, color: "#888" }}>
+									<div style={{ fontSize: 11, color: "#888", marginBottom: 8 }}>
 										Reported at {formatTime(incident.reported_at)}
 									</div>
+									{incident.status === "open" && onDispatch && (
+										<button
+											onClick={(e) => {
+												e.stopPropagation();
+												onDispatch(incident.id);
+											}}
+											disabled={dispatchLoading}
+											style={{
+												width: "100%",
+												padding: "6px 0",
+												border: "none",
+												borderRadius: 6,
+												background: dispatchLoading ? "#94a3b8" : "#2563eb",
+												color: "#fff",
+												fontWeight: 600,
+												fontSize: 12,
+												cursor: dispatchLoading ? "not-allowed" : "pointer",
+											}}
+										>
+											{dispatchLoading ? "Finding..." : "Dispatch"}
+										</button>
+									)}
+								</div>
 								</div>
 							)}
 						</div>
 					</OverlayView>
 				))}
+				{hospitals.map((hospital) => (
+					<OverlayView
+						key={`hospital-${hospital.id}`}
+						position={{ lat: hospital.lat, lng: hospital.lon }}
+						mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
+					>
+						<div className="map-marker-container" title={hospital.name}>
+							<img
+								src={hospitalIcon}
+								alt={hospital.name}
+								style={{ width: 40, height: 40 }}
+							/>
+						</div>
+					</OverlayView>
+				))}
 			</GoogleMap>
 		</div>
 	);

frontend/src/components/types.ts

@@ -15,6 +15,13 @@ export interface CaseInfo {
     updated_at: string;
 }
 
+export interface Hospital {
+    id: number;
+    name: string;
+    lat: number;
+    lon: number;
+}
+
 export interface DispatchSuggestion {
     suggestionId: string;
     vehicleId: string;

infrastructure/postgres/init.sql

@@ -61,3 +61,11 @@ CREATE TABLE IF NOT EXISTS incidents (
 CREATE INDEX IF NOT EXISTS idx_incidents_status ON incidents(status);
 CREATE INDEX IF NOT EXISTS idx_incidents_session_id ON incidents(session_id);
 
+-- Hospitals table
+CREATE TABLE IF NOT EXISTS hospitals (
+    id SERIAL PRIMARY KEY,
+    name VARCHAR(255) NOT NULL,
+    lat DECIMAL(10, 8) NOT NULL,
+    lon DECIMAL(11, 8) NOT NULL
+);
+