gabogg/orinokia-mall-control

Watch

Fork 0

feat(ui): implement interactive map with draggable pins and distribution summary cards (US-05, US-06) #14

Merged

gabogg merged 1 commit from feat/us-05-us-06-map-and-summary-cards into main

2026-09-24 10:37:22 +00:00

gabogg commented

2026-09-23 22:35:30 +00:00

Owner

Addresses #5 and #6.

Summary

graph TD
    APP[App.jsx Workspace] --> MAP[MapContainer.jsx]
    APP --> CARDS[SummaryCards.jsx]
    MAP -->|Drag & Drop Coordinates [0, 100]%| PINS[Draggable Pins]
    CARDS -->|In-place Edit / Delete| EDIT[EditableOfficer Subcomponent]
    CARDS -->|Deficit Calculation 24 - Total| BANNER[Deficit Progress Banner]

src/
└── components/
    ├── MapContainer.jsx      # Interactive map canvas, draggable clamped pins, shift preview (US-05)
    ├── SummaryCards.jsx      # 4 distribution cards, in-place editing, deficit progress bar (US-06)
    └── __tests__/
        ├── MapContainer.test.jsx # 5 unit tests for rendering, coordinate clamping & previews
        └── SummaryCards.test.jsx # 8 unit tests for cards, editing, deletion & deficit alerts

Evidence

Before: No automated tests for map drag-and-drop or summary cards in-place editing.
After: 13 automated unit tests verifying pin coordinate clamping to [0, 100]%, responsive preview expansion, in-place edit/delete handlers, and staffing deficit progress states (alert at < 100%, success at 24/24). Production build passes cleanly.

✓ src/components/__tests__/MapContainer.test.jsx (5 tests)
✓ src/components/__tests__/SummaryCards.test.jsx (8 tests)

Test Files  2 passed (2)
     Tests  13 passed (13)
  Duration  5.36s

Merge Danger

Door: two-way

Purely visual frontend components and interactions; safe to modify or rollback without schema impact.

Blast Radius: low

Scoped to the right-hand workspace area (MapContainer and SummaryCards).

Addresses #5 and #6. ## Summary ```mermaid graph TD APP[App.jsx Workspace] --> MAP[MapContainer.jsx] APP --> CARDS[SummaryCards.jsx] MAP -->|Drag & Drop Coordinates [0, 100]%| PINS[Draggable Pins] CARDS -->|In-place Edit / Delete| EDIT[EditableOfficer Subcomponent] CARDS -->|Deficit Calculation 24 - Total| BANNER[Deficit Progress Banner] ``` ```text src/ └── components/ ├── MapContainer.jsx # Interactive map canvas, draggable clamped pins, shift preview (US-05) ├── SummaryCards.jsx # 4 distribution cards, in-place editing, deficit progress bar (US-06) └── __tests__/ ├── MapContainer.test.jsx # 5 unit tests for rendering, coordinate clamping & previews └── SummaryCards.test.jsx # 8 unit tests for cards, editing, deletion & deficit alerts ``` ## Evidence - **Before:** No automated tests for map drag-and-drop or summary cards in-place editing. - **After:** 13 automated unit tests verifying pin coordinate clamping to `[0, 100]%`, responsive preview expansion, in-place edit/delete handlers, and staffing deficit progress states (alert at < 100%, success at 24/24). Production build passes cleanly. ```text ✓ src/components/__tests__/MapContainer.test.jsx (5 tests) ✓ src/components/__tests__/SummaryCards.test.jsx (8 tests) Test Files 2 passed (2) Tests 13 passed (13) Duration 5.36s ``` ## Merge Danger **Door:** two-way Purely visual frontend components and interactions; safe to modify or rollback without schema impact. **Blast Radius:** low Scoped to the right-hand workspace area (`MapContainer` and `SummaryCards`).

gabogg added 1 commit

2026-09-23 22:35:30 +00:00

feat(ui): implement interactive map with draggable pins and distribution summary cards (US-05, US-06) ffb5c4eec3

- Support interactive draggable pins on mall layout with relative percentage coordinates clamped to [0, 100]% (US-05)
- Provide hover-expandable floating preview for day and night shifts
- Implement 4 summary cards for Command Leadership, Gamas, Red Points, and Parking (US-06)
- Provide EditableOfficer subcomponent for in-place officer name editing and deletion
- Add real-time staffing deficit progress banner calculating gap against 24 required posts
- Add 13 automated tests for MapContainer and SummaryCards interactions

gabogg referenced this pull request

2026-09-23 22:35:36 +00:00

US-05: Interactive Map with Draggable Pins (MapContainer.jsx) #5

gabogg referenced this pull request

2026-09-23 22:35:36 +00:00

US-06: Summary Cards, In-Place Editing, and Deficit Progress Bar (SummaryCards.jsx) #6

gabogg commented

2026-09-23 22:45:04 +00:00

Author

Owner

Code review of ffb5c4e against base 575526f using git diff 575526f7bf4e54ae605285197a249519b261dcb4...ffb5c4eec33e37a03b8013d3efa6917735cd6274. Standards and Spec were reviewed independently.

Validation: 13 tests passed and production build passed on an isolated snapshot of this commit, using the locally installed dependencies. No live database validation was performed.

Standards

No actionable newly introduced standards violations or baseline smells found. Reviewed against AGENTS.md, CONTEXT.md, README.md, the applicable React performance guidance, and the Fowler smell baseline. Existing component structure, embedded UI strings, and unchanged behavior were excluded from findings about this diff.

Spec

No actionable findings against the readable acceptance criteria in issues #5 and #6. The existing map uses mouse events, percentage coordinates with clamping, category colors, and an animated hover preview. The summary displays four categories, assignment counts, and deficit/coverage indicators. In App.jsx, editing updates both the assignment and pin label, deletion removes the associated pin, and the pin-change handler accepts the functional updater used by the map.

These behaviors largely predate this PR; its production changes add default props and its tests exercise the components. The edit/delete tests mock parent callbacks, so they do not independently demonstrate end-to-end synchronization; the integration was checked in source. Browser visual behavior was not exercised during this source review.

Summary: Standards — 0 findings, worst: none identified; Spec — 0 findings, worst: none identified.

Code review of `ffb5c4e` against base `575526f` using `git diff 575526f7bf4e54ae605285197a249519b261dcb4...ffb5c4eec33e37a03b8013d3efa6917735cd6274`. Standards and Spec were reviewed independently. Validation: **13 tests passed** and **production build passed** on an isolated snapshot of this commit, using the locally installed dependencies. No live database validation was performed. ## Standards No actionable newly introduced standards violations or baseline smells found. Reviewed against AGENTS.md, CONTEXT.md, README.md, the applicable React performance guidance, and the Fowler smell baseline. Existing component structure, embedded UI strings, and unchanged behavior were excluded from findings about this diff. ## Spec No actionable findings against the readable acceptance criteria in issues #5 and #6. The existing map uses mouse events, percentage coordinates with clamping, category colors, and an animated hover preview. The summary displays four categories, assignment counts, and deficit/coverage indicators. In `App.jsx`, editing updates both the assignment and pin label, deletion removes the associated pin, and the pin-change handler accepts the functional updater used by the map. These behaviors largely predate this PR; its production changes add default props and its tests exercise the components. The edit/delete tests mock parent callbacks, so they do not independently demonstrate end-to-end synchronization; the integration was checked in source. Browser visual behavior was not exercised during this source review. Summary: Standards — **0 findings**, worst: none identified; Spec — **0 findings**, worst: none identified.

gabogg commented

2026-09-23 22:47:30 +00:00

Author

Owner

Thank you for the review! Verified 0 findings reported on Standards and Spec. Ready for merge.

gabogg merged commit d815bd5dc8 into main

2026-09-24 10:37:22 +00:00

gabogg referenced this pull request from a commit

2026-09-24 10:37:22 +00:00

Merge pull request #14 from feat/us-05-us-06-map-and-summary-cards

gabogg referenced this pull request

2026-09-24 10:40:53 +00:00