Files
Verde-Web/partner-store-maps.md

86 lines
3.5 KiB
Markdown

# Partner Store Maps & Tabbed Management
## Overview
This plan adds visual mapping and tabbed detail management to the **Partner Stores** admin interface, adapting the UX patterns from the Households view.
Currently, the partner stores page is a simple table list without any geographic preview, and store creation lacks map coordinates pinning.
---
## Project Type
**WEB** — Laravel Blade + Leaflet JS.
---
## Success Criteria
- [ ] Table page displays a **Map** link next to each store's address if coordinates exist. Clicking it opens a right-hand sidebar preview map showing the store pinned inside its Barangay boundary.
- [ ] **New Store Modal** displays a side-by-side layout: form inputs on the left, interactive Leaflet map on the right.
- [ ] Selecting a Barangay in the creation form renders its boundary polygon on the map and pins the store's location at the centroid.
- [ ] Row Actions include an **Edit** button that opens a tabbed slide-over panel:
- **Tab 1: Details**: View/edit name, owner, permit number, status, address, commission rate, and coordinates.
- **Tab 2: Inventory**: View code balance, wholesale history, and issue codes.
- [ ] Saving updates coordinates and address on the backend.
- [ ] `npm run build` succeeds.
---
## Gaps Found
| Gap | File | Impact |
|---|---|---|
| `update` API lacks address, barangay, and lat/lng validation | AdminPartnerStoreController.php | Cannot save edited location/address details for existing stores. |
| Missing `barangay_id` raw field in resource | PartnerStoreResource.php | The edit dropdown cannot pre-select the store's current Barangay. |
---
## Proposed Changes
### Component 1: Backend API Enhancements
#### AdminPartnerStoreController.php
- Update `update()` method to validate and accept `address_line`, `barangay_id`, `lat`, `lng`.
- Construct and save the `Point` geometry if both `lat` and `lng` are provided.
#### PartnerStoreResource.php
- Add `barangay_id` key:
```php
'barangay_id' => $this->barangay_id,
```
---
### Component 2: Frontend Layout & Leaflet Map Integration
#### partner-stores.blade.php
- **Main List Page**:
- Add standard Leaflet CSS/JS CDNs at the top.
- Add a right-sidebar map panel `#map-sidebar` (hidden by default).
- Add "Map (lat, lng)" link in the address column. Clicking it opens the sidebar, loads the Barangay boundary polygon, and sets the view to the store's coordinates.
- **Create/Edit Modal**:
- Split `#form-modal` into a two-column layout: Form inputs on the left, map picker on the right.
- Selecting a Barangay in the dropdown fetches its boundary polygon and centroids to center/pin the map picker.
- Click on the map picker sets `#form-lat` and `#form-lng` inputs.
- Add tab buttons at the top of the modal (Details, Inventory) when in Edit mode. Add mode remains flat.
---
## Verification Plan
### Automated Tests
- Run `php artisan test --filter=PartnerStore` to check for regressions in core store logic.
### Manual Verification
- Open Partner Stores, create a new store, select a Barangay, and verify boundary is drawn.
- Pin a location on the map, save, and check if store details and map coordinates save successfully.
- Click "Map" on the list table and verify the store's location and Barangay boundary display correctly in the sidebar map.
- Open the Edit slide-over, verify Barangay and other fields are pre-populated, edit them, and save.
- Ensure that issuing inventory still functions correctly.
## ✅ PHASE X COMPLETE
- PHPUnit Tests: ✅ Pass (5 tests, 15 assertions)
- Vite Compilation: ✅ Success
- Date: 2026-06-29