From e5ccc26a896d8284569aadac90a0945ba6a830d4 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 03:30:10 -0700
Subject: [PATCH] fix: summarize draft map areas

---
 .../maps/LocationMapBottomSheet.jsx           | 19 ++++++
 frontend/tests/location-map-manager.spec.ts   | 66 +++++++++++++++++++
 2 files changed, 85 insertions(+)

diff --git a/frontend/src/components/maps/LocationMapBottomSheet.jsx b/frontend/src/components/maps/LocationMapBottomSheet.jsx
index 4e05073..0313b70 100644
--- a/frontend/src/components/maps/LocationMapBottomSheet.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheet.jsx
@@ -75,6 +75,8 @@ export default function LocationMapBottomSheet({
     ? Math.max(0, totalAreaCount - hiddenAreaCount)
     : 0;
   const showMapOverview = mode !== "edit" && !selectedObject;
+  const unlinkedAreaCount = mapObjects.filter((object) => !objectZoneId(object)).length;
+  const showDraftOverview = mode === "edit" && editorTool === "edit" && !selectedObject;
   const unmappedItemPreview = visibleUnmappedItems.slice(0, 8);
   const overflowUnmappedItemCount = visibleUnmappedItems.length - unmappedItemPreview.length;
   const hiddenUnmappedItemCount = Math.max(0, unmappedItemCount - visibleUnmappedItems.length);
@@ -233,6 +235,23 @@ export default function LocationMapBottomSheet({
         </div>
       ) : null}
 
+      {showDraftOverview ? (
+        <div className="location-map-overview" aria-label="Draft map summary">
+          <div className="location-map-overview-row">
+            <span>Areas</span>
+            <strong>{totalAreaCount}</strong>
+          </div>
+          <div className="location-map-overview-row">
+            <span>Hidden</span>
+            <strong>{hiddenAreaCount}</strong>
+          </div>
+          <div className="location-map-overview-row">
+            <span>Unlinked</span>
+            <strong>{unlinkedAreaCount}</strong>
+          </div>
+        </div>
+      ) : null}
+
       {mode === "edit" && editorTool === "edit" && selectedObject ? (
         <div className="location-map-object-form">
           <label className="location-map-field-row">
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index b207886..26a7d29 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -746,6 +746,72 @@ test("admin can recover hidden map areas from the empty canvas", async ({ page }
   );
 });
 
+test("admin edit mode summarizes draft areas before selection", async ({ page }) => {
+  await mockMapShell(page);
+
+  const mapState = draftMapState([
+    {
+      id: 1381,
+      location_map_id: 900,
+      zone_id: 501,
+      zone_name: "Bakery",
+      type: "zone",
+      label: "Bakery",
+      x: 40,
+      y: 40,
+      width: 260,
+      height: 160,
+      rotation: 0,
+      locked: false,
+      visible: true,
+      sort_order: 1,
+    },
+    {
+      id: 1382,
+      location_map_id: 900,
+      zone_id: null,
+      zone_name: null,
+      type: "zone",
+      label: "Seasonal Endcap",
+      x: 330,
+      y: 40,
+      width: 220,
+      height: 130,
+      rotation: 0,
+      locked: false,
+      visible: false,
+      sort_order: 2,
+    },
+  ], true);
+
+  await page.route("**/households/1/locations/10/map", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(mapState),
+    });
+  });
+
+  await page.goto("/stores/100/locations/10/map");
+
+  await page.getByRole("button", { name: "Continue Editing" }).click();
+
+  const summary = page.getByLabel("Draft map summary");
+  const areasRow = summary.locator(".location-map-overview-row", { hasText: "Areas" });
+  const hiddenRow = summary.locator(".location-map-overview-row", { hasText: "Hidden" });
+  const unlinkedRow = summary.locator(".location-map-overview-row", { hasText: "Unlinked" });
+  await expect(summary).toBeVisible();
+  await expect(areasRow.locator("strong")).toHaveText("2");
+  await expect(hiddenRow.locator("strong")).toHaveText("1");
+  await expect(unlinkedRow.locator("strong")).toHaveText("1");
+  await expect(page.getByRole("button", { name: "Show Hidden Areas (1)" })).toBeVisible();
+
+  await page.getByRole("button", { name: "Map area Bakery" }).click();
+
+  await expect(page.getByLabel("Draft map summary")).toHaveCount(0);
+  await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
+});
+
 test("admin locked map areas hide resize affordances", async ({ page }) => {
   await mockMapShell(page);