StanfordCS194 · eliaschikwanda · May 22, 2026 · May 21, 2026
diff --git a/nexa/package-lock.json b/nexa/package-lock.json
diff --git a/nexa/package.json b/nexa/package.json
@@ -23,6 +23,7 @@
     "clsx": "^2.1.1",
     "dotenv": "^17.4.2",
     "jose": "^6.2.3",
+    "leaflet": "^1.9.4",
     "lucide-react": "^1.8.0",
     "next": "16.2.4",
     "openai": "^6.34.0",
@@ -36,6 +37,7 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/bcryptjs": "^2.4.6",
+    "@types/leaflet": "^1.9.21",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

diff --git a/nexa/src/app/dashboard/page.tsx b/nexa/src/app/dashboard/page.tsx
@@ -3,8 +3,13 @@ import { redirect } from "next/navigation";
 import { ArrowRight, CheckCircle2, Clock3, ClipboardList } from "lucide-react";
 import { getSession } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
+import { ISSUE_TYPE_LABELS, shortenAddress } from "@/lib/constants";
 import { formatFullDateTime, formatRelativeTime } from "@/lib/utils";
 import { ReportCard } from "@/components/dashboard/report-card";
+import {
+  ReportsMap,
+  type ReportMapPoint,
+} from "@/components/dashboard/reports-map";
 
 export default async function DashboardPage() {
   const session = await getSession();
@@ -28,6 +33,8 @@ export default async function DashboardPage() {
       aiDescription: true,
       address: true,
       imageUrl: true,
+      latitude: true,
+      longitude: true,
       createdAt: true,
     },
   });
@@ -38,6 +45,29 @@ export default async function DashboardPage() {
   ).length;
   const latestReport = reports[0];
 
+  const mapPoints: ReportMapPoint[] = reports
+    .filter(
+      (
+        report,
+      ): report is typeof report & { latitude: number; longitude: number } =>
+        typeof report.latitude === "number" &&
+        Number.isFinite(report.latitude) &&
+        typeof report.longitude === "number" &&
+        Number.isFinite(report.longitude),
+    )
+    .map((report) => ({
+      id: report.id,
+      latitude: report.latitude,
+      longitude: report.longitude,
+      issueLabel:
+        ISSUE_TYPE_LABELS[report.issueType ?? ""] ||
+        report.issueType ||
+        "Uncategorized",
+      shortLocation: shortenAddress(report.address),
+      status: report.status,
+      relativeTime: formatRelativeTime(report.createdAt),
+    }));
+
   return (
     <main className="mx-auto w-full max-w-4xl flex-1 px-6 py-10">
       <div className="flex flex-wrap items-center justify-between gap-4">
@@ -99,6 +129,12 @@ export default async function DashboardPage() {
         </div>
       </div>
 
+      {mapPoints.length > 0 && (
+        <div className="mt-8">
+          <ReportsMap points={mapPoints} />
+        </div>
+      )}
+
       <div className="mt-8">
         {reports.length === 0 ? (
           <div className="ep-card p-8 text-center">

diff --git a/nexa/src/app/globals.css b/nexa/src/app/globals.css
@@ -230,3 +230,91 @@
   border-radius: 0.75rem;
   background: var(--card);
 }
+
+/* Reports map — Leaflet customizations to match the app aesthetic */
+
+.nexa-map-pin {
+  background: transparent !important;
+  border: none !important;
+}
+
+.leaflet-container {
+  font-family:
+    var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
+  background: var(--muted);
+}
+
+.leaflet-popup-content-wrapper {
+  border-radius: 0.625rem;
+  border: 1px solid var(--border);
+  background: var(--card);
+  color: var(--foreground);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+  padding: 0;
+}
+
+.leaflet-popup-content {
+  margin: 0;
+  padding: 0.75rem 0.875rem;
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  min-width: 180px;
+}
+
+.leaflet-popup-tip {
+  background: var(--card);
+  border: 1px solid var(--border);
+}
+
+.nexa-map-popup__label {
+  font-family: var(--font-geist-mono);
+  font-size: 0.65rem;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+  margin: 0;
+}
+
+.nexa-map-popup__title {
+  margin: 0.25rem 0 0;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--foreground);
+  line-height: 1.3;
+}
+
+.nexa-map-popup__meta {
+  margin-top: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.nexa-map-popup__status {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-family: var(--font-geist-mono);
+  font-size: 0.6rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.nexa-map-popup__status--confirmed {
+  background: var(--ep-green-light);
+  color: var(--ep-green);
+}
+
+.nexa-map-popup__status--pending {
+  background: var(--muted);
+  color: var(--muted-foreground);
+}
+
+.nexa-map-popup__time {
+  font-size: 0.7rem;
+  color: var(--muted-foreground);
+}
diff --git a/nexa/src/components/dashboard/reports-map.tsx b/nexa/src/components/dashboard/reports-map.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import type { LatLngTuple, Map as LeafletMap } from "leaflet";
+import { MapPinned } from "lucide-react";
+import "leaflet/dist/leaflet.css";
+
+export interface ReportMapPoint {
+  id: string;
+  latitude: number;
+  longitude: number;
+  issueLabel: string;
+  shortLocation: string;
+  status: string;
+  relativeTime: string;
+}
+
+interface ReportsMapProps {
+  points: ReportMapPoint[];
+}
+
+const CONFIRMED_STATUSES = new Set([
+  "CONFIRMED",
+  "SUBMITTING",
+  "SUBMITTED",
+  "ACKNOWLEDGED",
+  "IN_PROGRESS",
+  "RESOLVED",
+  "CLOSED",
+]);
+
+function pinSvg(color: string): string {
+  return `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 36" width="28" height="36" aria-hidden="true">
+      <defs>
+        <filter id="shadow" x="-30%" y="-10%" width="160%" height="140%">
+          <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" flood-color="rgba(15, 23, 42, 0.35)" />
+        </filter>
+      </defs>
+      <g filter="url(#shadow)">
+        <path d="M14 1c-6.6 0-12 5.3-12 11.8 0 8.8 11 21.5 11.5 22 .3.3.8.3 1.1 0 .5-.5 11.4-13.2 11.4-22C26 6.3 20.6 1 14 1z" fill="${color}" />
+        <circle cx="14" cy="13" r="4.5" fill="#ffffff" />
+      </g>
+    </svg>
+  `;
+}
+
+function formatStatus(status: string): string {
+  return status
+    .toLowerCase()
+    .split("_")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export function ReportsMap({ points }: ReportsMapProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const mapRef = useRef<LeafletMap | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current || points.length === 0) return;
+
+    let cancelled = false;
+
+    (async () => {
+      const leaflet = await import("leaflet");
+      const L = leaflet.default ?? leaflet;
+      if (cancelled || !containerRef.current) return;
+
+      const map = L.map(containerRef.current, {
+        scrollWheelZoom: false,
+        zoomControl: true,
+        attributionControl: true,
+      });
+      mapRef.current = map;
+
+      L.tileLayer(
+        "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
+        {
+          attribution:
+            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+          subdomains: "abcd",
+          maxZoom: 19,
+        },
+      ).addTo(map);
+
+      const latLngs: LatLngTuple[] = [];
+
+      for (const point of points) {
+        const isConfirmed = CONFIRMED_STATUSES.has(point.status);
+        const color = isConfirmed ? "#22c55e" : "#9b87f5";
+
+        const icon = L.divIcon({
+          className: "nexa-map-pin",
+          html: pinSvg(color),
+          iconSize: [28, 36],
+          iconAnchor: [14, 35],
+          popupAnchor: [0, -30],
+        });
+
+        const popupHtml = `
+          <div class="nexa-map-popup">
+            <p class="nexa-map-popup__label">${escapeHtml(point.issueLabel)}</p>
+            <p class="nexa-map-popup__title">${escapeHtml(point.shortLocation || "Location unavailable")}</p>
+            <div class="nexa-map-popup__meta">
+              <span class="nexa-map-popup__status nexa-map-popup__status--${isConfirmed ? "confirmed" : "pending"}">${escapeHtml(formatStatus(point.status))}</span>
+              <span class="nexa-map-popup__time">${escapeHtml(point.relativeTime)}</span>
+            </div>
+          </div>
+        `;
+
+        L.marker([point.latitude, point.longitude], { icon })
+          .addTo(map)
+          .bindPopup(popupHtml, { closeButton: false, offset: [0, -2] });
+
+        latLngs.push([point.latitude, point.longitude]);
+      }
+
+      if (latLngs.length === 1) {
+        map.setView(latLngs[0], 14);
+      } else {
+        map.fitBounds(latLngs, { padding: [40, 40], maxZoom: 14 });
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (mapRef.current) {
+        mapRef.current.remove();
+        mapRef.current = null;
+      }
+    };
+  }, [points]);
+
+  if (points.length === 0) return null;
+
+  return (
+    <div className="ep-card overflow-hidden">
+      <div className="flex items-center gap-2 border-b border-border px-5 py-4">
+        <MapPinned className="size-4 text-muted-foreground" aria-hidden="true" />
+        <span className="font-mono text-xs uppercase tracking-wider text-muted-foreground">
+          Report locations
+        </span>
+        <span className="ml-auto font-mono text-xs text-muted-foreground">
+          {points.length} {points.length === 1 ? "pin" : "pins"}
+        </span>
+      </div>
+      <div
+        ref={containerRef}
+        className="h-[360px] w-full"
+        role="img"
+        aria-label={`Map showing ${points.length} report ${points.length === 1 ? "location" : "locations"}`}
+      />
+    </div>
+  );
+}