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:
```
'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

3.5 KiB Raw Blame History