feat: initial commit with seeded database and premium ui changes

2026-06-11 18:41:42 +07:00
commit edf94ae5c1
1684 changed files with 33073 additions and 0 deletions
@@ -0,0 +1,83 @@
+# 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:
+
+```ts
+{ 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.