From 2c7c3528e443b1edd4db7d5751928f1ef70feb49 Mon Sep 17 00:00:00 2001
From: Developer <developer@verde.local>
Date: Mon, 29 Jun 2026 13:22:45 +0800
Subject: [PATCH] feat: implement interactive Barangay polygon map selector in
 Service Areas

---
 .../Api/V1/Auth/LoginController.php           |   2 +-
 .../Controllers/Api/V1/Auth/MeController.php  |   2 +-
 .../Api/V1/Geo/BarangayController.php         |   7 +
 .../Api/V1/Geo/ServiceAreaController.php      |  11 +-
 .../Requests/Geo/UpdateServiceAreaRequest.php |   2 +
 app/Http/Resources/BarangayResource.php       |  12 +
 app/Http/Resources/UserResource.php           |  10 +
 resources/views/admin/service-areas.blade.php | 270 ++++++++++++++++--
 tests/Feature/Api/V1/Geo/ServiceAreaTest.php  |  21 ++
 9 files changed, 304 insertions(+), 33 deletions(-)

diff --git a/app/Http/Controllers/Api/V1/Auth/LoginController.php b/app/Http/Controllers/Api/V1/Auth/LoginController.php
index 652026a..1cbd925 100644
--- a/app/Http/Controllers/Api/V1/Auth/LoginController.php
+++ b/app/Http/Controllers/Api/V1/Auth/LoginController.php
@@ -59,7 +59,7 @@ class LoginController extends ApiController
         $token = $user->createToken($deviceName);
 
         return $this->ok([
-            'user' => new UserResource($user),
+            'user' => new UserResource($user->load(['tenant'])),
             'token' => $token->plainTextToken,
             'token_type' => 'Bearer',
         ], 'Login successful');
diff --git a/app/Http/Controllers/Api/V1/Auth/MeController.php b/app/Http/Controllers/Api/V1/Auth/MeController.php
index bbb05dc..c44238f 100644
--- a/app/Http/Controllers/Api/V1/Auth/MeController.php
+++ b/app/Http/Controllers/Api/V1/Auth/MeController.php
@@ -12,7 +12,7 @@ class MeController extends ApiController
     public function __invoke(Request $request): JsonResponse
     {
         return $this->ok([
-            'user' => new UserResource($request->user()),
+            'user' => new UserResource($request->user()->load(['tenant'])),
         ]);
     }
 }
diff --git a/app/Http/Controllers/Api/V1/Geo/BarangayController.php b/app/Http/Controllers/Api/V1/Geo/BarangayController.php
index 1394182..abf6a6c 100644
--- a/app/Http/Controllers/Api/V1/Geo/BarangayController.php
+++ b/app/Http/Controllers/Api/V1/Geo/BarangayController.php
@@ -18,7 +18,14 @@ class BarangayController extends ApiController
             'q' => ['nullable', 'string', 'max:100'],
         ]);
 
+        $user = $request->user();
         $barangays = Barangay::query()
+            ->when($user && $user->tenant_id, function ($q) use ($user) {
+                $tenant = $user->tenant ?: \App\Models\Tenant::find($user->tenant_id);
+                if ($tenant) {
+                    $q->where('city_municipality_id', $tenant->city_municipality_id);
+                }
+            })
             ->when($request->filled('city'), function ($q) use ($request) {
                 $q->whereHas('cityMunicipality', fn ($c) => $c->where('psgc_code', $request->string('city'))
                     ->orWhere('code', $request->string('city')));
diff --git a/app/Http/Controllers/Api/V1/Geo/ServiceAreaController.php b/app/Http/Controllers/Api/V1/Geo/ServiceAreaController.php
index 1f42a01..177d191 100644
--- a/app/Http/Controllers/Api/V1/Geo/ServiceAreaController.php
+++ b/app/Http/Controllers/Api/V1/Geo/ServiceAreaController.php
@@ -63,7 +63,16 @@ class ServiceAreaController extends ApiController
 
     public function update(UpdateServiceAreaRequest $request, ServiceArea $serviceArea): JsonResponse
     {
-        $serviceArea->update($request->validated());
+        $data = $request->validated();
+        $barangayIds = $data['barangay_ids'] ?? null;
+        unset($data['barangay_ids']);
+
+        DB::transaction(function () use ($serviceArea, $data, $barangayIds) {
+            $serviceArea->update($data);
+            if ($barangayIds !== null) {
+                $serviceArea->barangays()->sync($barangayIds);
+            }
+        });
 
         return $this->ok(
             new ServiceAreaResource($serviceArea->fresh()->loadCount('barangays')),
diff --git a/app/Http/Requests/Geo/UpdateServiceAreaRequest.php b/app/Http/Requests/Geo/UpdateServiceAreaRequest.php
index d1fbc3f..2993b0a 100644
--- a/app/Http/Requests/Geo/UpdateServiceAreaRequest.php
+++ b/app/Http/Requests/Geo/UpdateServiceAreaRequest.php
@@ -28,6 +28,8 @@ class UpdateServiceAreaRequest extends FormRequest
             ],
             'status' => ['sometimes', Rule::in([ServiceArea::STATUS_ACTIVE, ServiceArea::STATUS_INACTIVE])],
             'description' => ['sometimes', 'nullable', 'string', 'max:1000'],
+            'barangay_ids' => ['nullable', 'array'],
+            'barangay_ids.*' => ['integer', 'exists:barangays,id'],
         ];
     }
 }
diff --git a/app/Http/Resources/BarangayResource.php b/app/Http/Resources/BarangayResource.php
index 2771e99..3cafcb6 100644
--- a/app/Http/Resources/BarangayResource.php
+++ b/app/Http/Resources/BarangayResource.php
@@ -9,6 +9,17 @@ class BarangayResource extends JsonResource
 {
     public function toArray(Request $request): array
     {
+        $boundaryPoints = null;
+        if ($this->boundary) {
+            $rings = $this->boundary->getGeometries();
+            $ring = $rings->first();
+            if ($ring) {
+                $boundaryPoints = $ring->getGeometries()
+                    ->map(fn ($p) => ['lat' => $p->latitude, 'lng' => $p->longitude])
+                    ->all();
+            }
+        }
+
         return [
             'id' => $this->id,
             'psgc_code' => $this->psgc_code,
@@ -20,6 +31,7 @@ class BarangayResource extends JsonResource
                 'lat' => $this->centroid->latitude,
                 'lng' => $this->centroid->longitude,
             ] : null,
+            'boundary' => $boundaryPoints,
             'city_municipality' => CityMunicipalityResource::make($this->whenLoaded('cityMunicipality')),
         ];
     }
diff --git a/app/Http/Resources/UserResource.php b/app/Http/Resources/UserResource.php
index e00a2a5..28d6dd9 100644
--- a/app/Http/Resources/UserResource.php
+++ b/app/Http/Resources/UserResource.php
@@ -22,6 +22,16 @@ class UserResource extends JsonResource
             'email_verified_at' => $this->email_verified_at?->toIso8601String(),
             'phone_verified_at' => $this->phone_verified_at?->toIso8601String(),
             'last_login_at' => $this->last_login_at?->toIso8601String(),
+            'tenant' => $this->relationLoaded('tenant') && $this->tenant ? [
+                'id' => $this->tenant->uuid,
+                'name' => $this->tenant->name,
+                'code' => $this->tenant->code,
+                'boundary_polygon' => $this->tenant->boundary_polygon ? (function ($poly) {
+                    $rings = $poly->getGeometries();
+                    $ring = $rings->first();
+                    return $ring ? $ring->getGeometries()->map(fn ($p) => ['lat' => $p->latitude, 'lng' => $p->longitude])->all() : null;
+                })($this->tenant->boundary_polygon) : null,
+            ] : null,
         ];
     }
 }
diff --git a/resources/views/admin/service-areas.blade.php b/resources/views/admin/service-areas.blade.php
index fbe0ab4..daf3516 100644
--- a/resources/views/admin/service-areas.blade.php
+++ b/resources/views/admin/service-areas.blade.php
@@ -1,6 +1,14 @@
 @extends('admin.layouts.app', ['pageTitle' => 'Service Areas'])
 
 @section('page')
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">
+<style>
+    .leaflet-container {
+        font-family: inherit;
+        z-index: 1;
+    }
+</style>
+
 <div class="mx-auto max-w-7xl">
     <header class="mb-6 flex items-end justify-between">
         <div>
@@ -28,48 +36,180 @@
     </div>
 </div>
 
-{{-- Slide-over create form --}}
+{{-- Slide-over create/edit form --}}
 <div id="form-modal" class="hidden">
     <div class="slide-over-mask" data-close></div>
-    <div class="slide-over-panel translate-x-0 p-6">
+    <div class="slide-over-panel translate-x-0 p-6" style="max-width: 1000px; width: 90%;">
         <div class="mb-4 flex items-center justify-between">
-            <h3 class="text-base font-semibold text-neutral-900">New service area</h3>
+            <h3 id="modal-title" class="text-base font-semibold text-neutral-900">New service area</h3>
             <button data-close class="text-neutral-400 hover:text-neutral-600">
                 <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
             </button>
         </div>
-        <form id="create-form" class="space-y-4">
-            <div>
-                <label class="form-label">Name</label>
-                <input name="name" required class="form-input" placeholder="e.g., Quezon City Pilot">
+        <form id="create-form" class="space-y-6">
+            <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
+                <!-- Left Column fields -->
+                <div class="lg:col-span-5 space-y-4">
+                    <div>
+                        <label class="form-label">Name</label>
+                        <input name="name" required class="form-input" placeholder="e.g., Quezon City Pilot">
+                    </div>
+                    <div>
+                        <label class="form-label">Code</label>
+                        <input name="code" required class="form-input" placeholder="e.g., QC-PILOT">
+                    </div>
+                    <div>
+                        <label class="form-label">Status</label>
+                        <select name="status" class="form-select">
+                            <option value="active">Active</option>
+                            <option value="inactive">Inactive</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="form-label">Description</label>
+                        <textarea name="description" rows="4" class="form-textarea" placeholder="Optional notes…"></textarea>
+                    </div>
+                </div>
+                <!-- Right Column map -->
+                <div class="lg:col-span-7 flex flex-col">
+                    <label class="form-label mb-1">Select Barangays on Map</label>
+                    <div id="map-picker" class="w-full rounded-lg border border-neutral-200 bg-neutral-50 h-[380px] min-h-[300px]"></div>
+                    <div class="mt-2 text-xs text-neutral-500 flex items-center justify-between">
+                        <span>Selected: <strong id="selected-count" class="font-bold text-neutral-900">0</strong> Barangays</span>
+                        <button type="button" id="clear-map-selection" class="text-blue-600 hover:text-blue-800 font-medium transition-colors">Clear all</button>
+                    </div>
+                </div>
             </div>
-            <div>
-                <label class="form-label">Code</label>
-                <input name="code" required class="form-input" placeholder="e.g., QC-PILOT">
-            </div>
-            <div>
-                <label class="form-label">Status</label>
-                <select name="status" class="form-select">
-                    <option value="active">Active</option>
-                    <option value="inactive">Inactive</option>
-                </select>
-            </div>
-            <div>
-                <label class="form-label">Description</label>
-                <textarea name="description" rows="3" class="form-textarea" placeholder="Optional notes…"></textarea>
-            </div>
-            <div class="flex justify-end gap-2 pt-2">
+            <div class="flex justify-end gap-2 pt-4 border-t border-neutral-100">
                 <button type="button" data-close class="btn-ghost">Cancel</button>
-                <button type="submit" class="btn-primary">Create</button>
+                <button type="submit" class="btn-primary">Save</button>
             </div>
         </form>
     </div>
 </div>
 
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
 <script type="module">
     const rows = document.getElementById('rows');
     const modal = document.getElementById('form-modal');
 
+    let leafletMap = null;
+    let barangayPolygons = []; // array of { id, layer }
+    let selectedBarangays = new Set();
+    let tenantBoundaryLayer = null;
+    let allBarangays = []; // cache of LGU barangays
+    let editingAreaId = null; // null for create, string uuid for edit
+
+    function awaitLeaflet() {
+        return new Promise(resolve => {
+            const tick = () => window.L ? resolve(window.L) : setTimeout(tick, 50);
+            tick();
+        });
+    }
+
+    async function initMap() {
+        const L = await awaitLeaflet();
+        if (leafletMap) return;
+
+        leafletMap = L.map('map-picker').setView([12.8797, 121.7740], 6); // PH Center
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '&copy; OpenStreetMap'
+        }).addTo(leafletMap);
+    }
+
+    async function drawLguBoundary(L, boundary) {
+        if (tenantBoundaryLayer) {
+            leafletMap.removeLayer(tenantBoundaryLayer);
+            tenantBoundaryLayer = null;
+        }
+        if (!boundary || boundary.length === 0) return;
+
+        const points = boundary.map(p => [p.lat, p.lng]);
+        tenantBoundaryLayer = L.polygon(points, {
+            color: '#94a3b8',
+            weight: 2,
+            dashArray: '5, 5',
+            fillColor: '#cbd5e1',
+            fillOpacity: 0.05,
+            interactive: false
+        }).addTo(leafletMap);
+
+        leafletMap.fitBounds(tenantBoundaryLayer.getBounds());
+    }
+
+    async function fetchAndDrawBarangays(L) {
+        // Clear existing polygons
+        barangayPolygons.forEach(p => leafletMap.removeLayer(p.layer));
+        barangayPolygons = [];
+
+        if (allBarangays.length === 0) {
+            const res = await window.Verde.apiFetch('/api/v1/geo/barangays');
+            if (res.ok) {
+                allBarangays = res.body.data ?? [];
+            }
+        }
+
+        allBarangays.forEach(b => {
+            if (!b.boundary || b.boundary.length === 0) return;
+
+            const points = b.boundary.map(p => [p.lat, p.lng]);
+            const isSelected = selectedBarangays.has(b.id);
+
+            const poly = L.polygon(points, {
+                color: isSelected ? '#16a34a' : '#3b82f6',
+                weight: 1.5,
+                fillColor: isSelected ? '#22c55e' : '#60a5fa',
+                fillOpacity: isSelected ? 0.45 : 0.15
+            }).addTo(leafletMap);
+
+            poly.bindTooltip(b.name, { sticky: true, className: 'text-xs font-semibold px-2 py-1' });
+
+            poly.on('click', () => {
+                toggleBarangaySelection(b.id, poly);
+            });
+
+            barangayPolygons.push({ id: b.id, layer: poly });
+        });
+
+        // Fallback zoom to all barangays if LGU boundary isn't drawn yet
+        if (!tenantBoundaryLayer && barangayPolygons.length > 0) {
+            const group = L.featureGroup(barangayPolygons.map(p => p.layer));
+            leafletMap.fitBounds(group.getBounds());
+        }
+    }
+
+    function toggleBarangaySelection(id, poly) {
+        if (selectedBarangays.has(id)) {
+            selectedBarangays.delete(id);
+            poly.setStyle({
+                color: '#3b82f6',
+                fillColor: '#60a5fa',
+                fillOpacity: 0.15
+            });
+        } else {
+            selectedBarangays.add(id);
+            poly.setStyle({
+                color: '#16a34a',
+                fillColor: '#22c55e',
+                fillOpacity: 0.45
+            });
+        }
+        document.getElementById('selected-count').textContent = selectedBarangays.size;
+    }
+
+    document.getElementById('clear-map-selection').addEventListener('click', () => {
+        selectedBarangays.clear();
+        barangayPolygons.forEach(p => {
+            p.layer.setStyle({
+                color: '#3b82f6',
+                fillColor: '#60a5fa',
+                fillOpacity: 0.15
+            });
+        });
+        document.getElementById('selected-count').textContent = 0;
+    });
+
     function badge(status) {
         const cls = status === 'active' ? 'badge-active' : 'badge-inactive';
         return `<span class="badge ${cls}">${status}</span>`;
@@ -94,16 +234,59 @@
                 <td>${a.barangay_count ?? 0}</td>
                 <td>${badge(a.status)}</td>
                 <td class="text-right">
-                    <button data-id="${a.id}" data-action="delete" class="btn-ghost px-3 py-1 text-xs">Delete</button>
+                    <button data-id="${a.id}" data-action="edit" class="btn-ghost px-3 py-1 text-xs text-blue-600 hover:text-blue-800">Edit</button>
+                    <button data-id="${a.id}" data-action="delete" class="btn-ghost px-3 py-1 text-xs text-red-600 hover:text-red-800 ml-1">Delete</button>
                 </td>
             </tr>
         `).join('');
 
+        rows.querySelectorAll('[data-action="edit"]').forEach(b => {
+            b.addEventListener('click', () => onEdit(b.dataset.id));
+        });
+
         rows.querySelectorAll('[data-action="delete"]').forEach(b => {
             b.addEventListener('click', () => onDelete(b.dataset.id));
         });
     }
 
+    async function onEdit(id) {
+        editingAreaId = id;
+        document.getElementById('modal-title').textContent = 'Edit service area';
+        selectedBarangays.clear();
+        document.getElementById('selected-count').textContent = 0;
+
+        modal.classList.remove('hidden');
+        await initMap();
+
+        const res = await window.Verde.apiFetch(`/api/v1/service-areas/${id}`);
+        if (!res.ok) {
+            window.Verde.toast('Failed to load service area details', 'error');
+            modal.classList.add('hidden');
+            return;
+        }
+        const area = res.body.data;
+        const form = document.getElementById('create-form');
+        form.name.value = area.name;
+        form.code.value = area.code;
+        form.status.value = area.status;
+        form.description.value = area.description ?? '';
+
+        (area.barangays ?? []).forEach(b => selectedBarangays.add(b.id));
+        document.getElementById('selected-count').textContent = selectedBarangays.size;
+
+        setTimeout(async () => {
+            leafletMap.invalidateSize();
+            const L = window.L;
+
+            const meRes = await window.Verde.apiFetch('/api/v1/me');
+            if (meRes.ok && meRes.body.user?.tenant?.boundary_polygon) {
+                await drawLguBoundary(L, meRes.body.user.tenant.boundary_polygon);
+            }
+
+            await fetchAndDrawBarangays(L);
+        }, 100);
+    }
+
     async function onDelete(id) {
         if (!confirm('Delete this service area?')) return;
         const res = await window.Verde.apiFetch(`/api/v1/service-areas/${id}`, { method: 'DELETE' });
@@ -111,24 +294,51 @@
         else window.Verde.toast(res.body?.message ?? 'Delete failed', 'error');
     }
 
-    document.getElementById('new-btn').addEventListener('click', () => modal.classList.remove('hidden'));
+    document.getElementById('new-btn').addEventListener('click', async () => {
+        editingAreaId = null;
+        document.getElementById('modal-title').textContent = 'New service area';
+        document.getElementById('create-form').reset();
+        selectedBarangays.clear();
+        document.getElementById('selected-count').textContent = 0;
+
+        modal.classList.remove('hidden');
+        await initMap();
+
+        setTimeout(async () => {
+            leafletMap.invalidateSize();
+            const L = window.L;
+
+            const meRes = await window.Verde.apiFetch('/api/v1/me');
+            if (meRes.ok && meRes.body.user?.tenant?.boundary_polygon) {
+                await drawLguBoundary(L, meRes.body.user.tenant.boundary_polygon);
+            }
+
+            await fetchAndDrawBarangays(L);
+        }, 100);
+    });
+
     modal.querySelectorAll('[data-close]').forEach(el => el.addEventListener('click', () => modal.classList.add('hidden')));
 
     document.getElementById('create-form').addEventListener('submit', async (e) => {
         e.preventDefault();
         const fd = new FormData(e.target);
         const payload = Object.fromEntries(fd.entries());
-        const res = await window.Verde.apiFetch('/api/v1/service-areas', {
-            method: 'POST',
+        payload.barangay_ids = Array.from(selectedBarangays);
+
+        const url = editingAreaId ? `/api/v1/service-areas/${editingAreaId}` : '/api/v1/service-areas';
+        const method = editingAreaId ? 'PATCH' : 'POST';
+
+        const res = await window.Verde.apiFetch(url, {
+            method: method,
             body: JSON.stringify(payload),
         });
         if (res.ok) {
-            window.Verde.toast('Service area created', 'success');
+            window.Verde.toast(editingAreaId ? 'Service area updated' : 'Service area created', 'success');
             modal.classList.add('hidden');
             e.target.reset();
             load();
         } else {
-            window.Verde.toast(res.body?.message ?? 'Create failed', 'error');
+            window.Verde.toast(res.body?.message ?? 'Save failed', 'error');
         }
     });
 
diff --git a/tests/Feature/Api/V1/Geo/ServiceAreaTest.php b/tests/Feature/Api/V1/Geo/ServiceAreaTest.php
index 96523ac..6bcdd8a 100644
--- a/tests/Feature/Api/V1/Geo/ServiceAreaTest.php
+++ b/tests/Feature/Api/V1/Geo/ServiceAreaTest.php
@@ -152,4 +152,25 @@ class ServiceAreaTest extends TestCase
         $this->assertContains('A', $codes);
         $this->assertNotContains('B', $codes);
     }
+
+    public function test_admin_can_update_service_area_with_barangays(): void
+    {
+        Sanctum::actingAs($this->admin);
+        $area = ServiceArea::factory()->create();
+        $barangay = Barangay::first();
+        $area->barangays()->attach($barangay->id);
+
+        $newBarangays = Barangay::limit(3)->pluck('id')->all();
+
+        $response = $this->patchJson("/api/v1/service-areas/{$area->uuid}", [
+            'name' => 'Updated QC Pilot',
+            'barangay_ids' => $newBarangays,
+        ]);
+
+        $response->assertOk()
+            ->assertJsonPath('data.name', 'Updated QC Pilot')
+            ->assertJsonPath('data.barangay_count', 3);
+
+        $this->assertDatabaseCount('service_area_barangay', 3);
+    }
 }