UAS_SIG_WebGIS/frontend/docs/superpowers/specs/2026-06-10-religion-dialog-radius-fix-design.md

Religion Dialog Dropdown + Radius Fix

Problem

1. The religion-edit flow (marker-edit-dialog.tsx) uses an older SelectDropdown (@/components/ui/dropdown) for the religion-type field, while the create flow (religion-dialog.tsx) already uses the shared dropdown-menu.tsx primitives. The two dialogs look inconsistent.
2. The edit dialog only offers 3 religion types (mosque/church/synagogue), while the create dialog offers 7 (+ cathedral, temple, vihara, klenteng). As a side effect, editing a cathedral/temple/vihara/klenteng POI shows no type selector at all (isReligion is false for those types).
3. The edit dialog has no way to change a religion POI's radius, even though the create dialog lets you set one.
4. Radius circles never render on the map. Root cause: the live poi_markers table is missing the radius_meters column entirely — the running pba-new-backend-1 container was built before this column was added to db-init.js / poi.routes.js, so radius data never persists.

Design

1. Shared RadiusSlider component

New file: frontend/components/poverty/radius-slider.tsx.

Extract the slider markup currently inline in religion-dialog.tsx (0-2000m range input, step 50, live value badge, "0 = tidak tampilkan lingkaran" hint). Props:

{ value: number; onChange: (v: number) => void }

Both dialogs render it inside their own <Field label="Radius Jangkauan (meter)">.

2. marker-edit-dialog.tsx

• Replace SelectDropdown with DropdownMenu / DropdownMenuTrigger / DropdownMenuContent / DropdownMenuRadioGroup / DropdownMenuRadioItem from @/components/ui/dropdown-menu, mirroring the trigger styling and icon rendering used in religion-dialog.tsx.
• Expand RELIGION_OPTIONS to the same 7 entries as religion-dialog.tsx (mosque/church/cathedral/temple/vihara/klenteng/synagogue, with Indonesian labels and icons).
• Add radiusMeters state, populated from row.radius_meters ?? 0 in the existing POI-loading useEffect.
• Render <Field label="Radius Jangkauan (meter)"><RadiusSlider .../></Field> only when isReligion.
• On submit, when isReligion: include radius_meters: radiusMeters in the PUT body, and include radius: radiusMeters in the meta passed to onUpdated so the map redraws the circle immediately.
• Remove the now-dead SelectDropdown import.

3. components/ui/dropdown.tsx

Remove the now-unused SelectDropdown / SelectOption / dropdownSpring exports (confirmed unused elsewhere via grep).

4. religion-dialog.tsx

Replace the inline slider block with <RadiusSlider value={radiusMeters} onChange={setRadiusMeters} />. No behavior change, just dedup.

5. Backend DB migration

Run docker compose up -d --build backend from /Users/pangkywaradjodi/pba-new so initDb() re-runs ALTER TABLE poi_markers ADD COLUMN IF NOT EXISTS radius_meters INT DEFAULT 0 against the live database. Verify with \d poi_markers afterward.

Data flow after the fix

• Create (religion-dialog.tsx): POST /poi with radius_meters → now persists correctly once the column exists.
• Edit (marker-edit-dialog.tsx): GET /poi/:id returns radius_meters → loaded into the slider → PUT /poi/:id saves it → onUpdated updates userMarkers → leaflet-map.tsx redraws the circle (existing circle-drawing logic is already correct, it just never received real data).
• Page load: GET /poi already maps radius_meters → meta.radius, so existing POIs with a radius now render circles too.

Testing

• Rebuild backend, confirm radius_meters column exists.
• Manual flow via dev server: create a religion POI with radius > 0 → circle appears. Edit an existing religion POI (including a cathedral/temple/etc.), change type via the new dropdown, adjust radius, save → circle updates. Reload page → circle persists.