feat(dashboard): expandable report cards with photo, description, and short location

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",

nexa/src/app/dashboard/page.tsx

@@ -1,34 +1,15 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ArrowRight, CheckCircle2, Clock3, ClipboardList } from "lucide-react";
-import { ISSUE_TYPE_LABELS } from "@/lib/constants";
 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 { DeleteReportButton } from "@/components/dashboard/delete-report-button";
-
-function formatStatus(status: string): string {
-  return status
-    .toLowerCase()
-    .split("_")
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(" ");
-}
-
-function statusPillClass(status: string): string {
-  switch (status) {
-    case "CONFIRMED":
-      return "bg-ep-green-light text-ep-green";
-    case "RESOLVED":
-    case "CLOSED":
-      return "bg-blue-50 text-blue-700";
-    case "SUBMITTED":
-    case "IN_PROGRESS":
-      return "bg-ep-purple-light text-ep-purple";
-    default:
-      return "bg-muted text-muted-foreground";
-  }
-}
+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();
@@ -51,6 +32,9 @@ export default async function DashboardPage() {
       description: true,
       aiDescription: true,
       address: true,
+      imageUrl: true,
+      latitude: true,
+      longitude: true,
       createdAt: true,
     },
   });
@@ -61,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">
@@ -122,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">
@@ -133,44 +146,7 @@ export default async function DashboardPage() {
         ) : (
           <div className="grid gap-4">
             {reports.map((report) => (
-              <article
-                key={report.id}
-                className="ep-card p-6 transition-colors hover:bg-muted/20"
-              >
-                <div className="flex flex-wrap items-center justify-between gap-3">
-                  <span className="font-mono text-xs uppercase tracking-wider text-muted-foreground">
-                    {ISSUE_TYPE_LABELS[report.issueType ?? ""] ||
-                      report.issueType ||
-                      "Uncategorized"}
-                  </span>
-                  <div className="flex items-center gap-3">
-                    <span
-                      className={`inline-flex rounded-full px-2.5 py-1 font-mono text-xs uppercase tracking-wider ${statusPillClass(report.status)}`}
-                    >
-                      {formatStatus(report.status)}
-                    </span>
-                    <DeleteReportButton reportId={report.id} />
-                  </div>
-                </div>
-
-                <h2 className="mt-4 text-lg font-medium leading-snug">
-                  {report.address || "No location provided"}
-                </h2>
-                <p className="mt-1 text-xs text-muted-foreground">
-                  <time
-                    dateTime={report.createdAt.toISOString()}
-                    title={formatFullDateTime(report.createdAt)}
-                  >
-                    {formatRelativeTime(report.createdAt)}
-                  </time>
-                </p>
-
-                <p className="mt-4 text-sm leading-relaxed text-foreground">
-                  {report.aiDescription ||
-                    report.description ||
-                    "No description"}
-                </p>
-              </article>
+              <ReportCard key={report.id} report={report} />
             ))}
           </div>
         )}

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);
+}