Dodo
390 lines
16 KiB
TypeScript
390 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useMemo, useEffect, useRef } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import { DndContext, DragOverlay, useDroppable, useSensor, useSensors, PointerSensor, type DragEndEvent } from "@dnd-kit/core";
|
|
import { AppShell } from "@/components/app-shell";
|
|
import { MapPageHeader } from "@/components/maps/map-page-header";
|
|
import { PovertyStatsCards } from "@/components/poverty/poverty-stats-cards";
|
|
import { PovertyTrendChart } from "@/components/poverty/poverty-trend-chart";
|
|
import { PovertyDirectory } from "@/components/poverty/poverty-directory";
|
|
import { PovertyInspectorTop, PovertyInspectorBottom } from "@/components/poverty/poverty-inspector";
|
|
import { PovertyHud } from "@/components/poverty/poverty-hud";
|
|
import { TrendingDownIcon } from "@/components/ui/phosphor-icons";
|
|
import { PovertyDisclosureCard } from "@/components/ui/collection-grid-disclosure";
|
|
import type { UserMarker } from "@/components/leaflet-map";
|
|
import type { HouseholdRow, PovertyOverview } from "@/lib/poverty-types";
|
|
import { MarkerPlacementDialog } from "@/components/poverty/marker-placement-dialog";
|
|
import { ReligionDialog } from "@/components/poverty/religion-dialog";
|
|
import { MarkerEditDialog } from "@/components/poverty/marker-edit-dialog";
|
|
import { PovertyHouseholdsTable } from "@/components/poverty/poverty-households-table";
|
|
import { FuzzyPriorityStats } from "@/components/poverty/fuzzy-priority-stats";
|
|
import { toast } from "sonner";
|
|
|
|
const LeafletMap = dynamic(() => import("@/components/leaflet-map"), { ssr: false });
|
|
|
|
const PLACING_LABELS: Record<string, string> = {
|
|
marker: "Data Warga",
|
|
religion: "Rumah Ibadah",
|
|
clinic: "Klinik",
|
|
"food-bank": "Lumbung Pangan",
|
|
school: "Sekolah",
|
|
};
|
|
|
|
function MapDropZone() {
|
|
const { setNodeRef } = useDroppable({ id: "map-canvas" });
|
|
return <div ref={setNodeRef} className="absolute inset-0 z-[1] pointer-events-none" />;
|
|
}
|
|
|
|
export default function PovertyMapPage() {
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
// Initialize deterministically (matches SSR) and hydrate from sessionStorage
|
|
// after mount to avoid a hydration mismatch that regenerates the whole tree.
|
|
const [useLeaflet, setUseLeaflet] = useState(false);
|
|
const [mapStyle, setMapStyle] = useState<"street" | "satellite">("street");
|
|
const [hydrated, setHydrated] = useState(false);
|
|
const [userMarkers, setUserMarkers] = useState<UserMarker[]>([]);
|
|
const [placingMarkerType, setPlacingMarkerType] = useState<string | null>(null);
|
|
const [dragDropEnabled, setDragDropEnabled] = useState(false);
|
|
const [pendingClick, setPendingClick] = useState<{ lat: number; lng: number } | null>(null);
|
|
const [householdsRefreshKey, setHouseholdsRefreshKey] = useState(0);
|
|
const [editingMarker, setEditingMarker] = useState<UserMarker | null>(null);
|
|
const [draggedItemId, setDraggedItemId] = useState<string | null>(null);
|
|
const [households, setHouseholds] = useState<HouseholdRow[]>([]);
|
|
const [householdsLoading, setHouseholdsLoading] = useState(true);
|
|
const [overview, setOverview] = useState<PovertyOverview | null>(null);
|
|
const [selectedHouseholdId, setSelectedHouseholdId] = useState<number | null>(null);
|
|
const mapInstanceRef = useRef<any>(null);
|
|
const mapContainerRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Require a small drag distance before activating dnd, so a plain click on a
|
|
// disclosure item is treated as a tool toggle (not a drag). Without this the
|
|
// click is swallowed and the marker tool never activates — the dialog would
|
|
// then only appear via drag-drop instead of the click-tool → click-map flow.
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
|
|
);
|
|
|
|
const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL ?? "http://localhost:4000";
|
|
|
|
// Dashboard data — households + aggregated overview, straight from the DB.
|
|
useEffect(() => {
|
|
const token = localStorage.getItem("auth_token");
|
|
const headers: Record<string, string> = token ? { Authorization: `Bearer ${token}` } : {};
|
|
|
|
Promise.allSettled([
|
|
fetch(`${BACKEND_URL}/households`, { headers }).then((r) => r.json()),
|
|
fetch(`${BACKEND_URL}/households/stats-overview`, { headers }).then((r) => r.json()),
|
|
]).then(([hhResult, overviewResult]) => {
|
|
if (hhResult.status === "fulfilled" && Array.isArray(hhResult.value)) {
|
|
setHouseholds(hhResult.value as HouseholdRow[]);
|
|
}
|
|
if (overviewResult.status === "fulfilled" && overviewResult.value?.totals) {
|
|
setOverview(overviewResult.value as PovertyOverview);
|
|
}
|
|
setHouseholdsLoading(false);
|
|
});
|
|
}, [householdsRefreshKey]);
|
|
|
|
// Load existing markers when map view opens. Households are reused from the
|
|
// dashboard fetch above; only POIs need their own request here.
|
|
useEffect(() => {
|
|
if (!useLeaflet) return;
|
|
const token = localStorage.getItem("auth_token");
|
|
const headers: Record<string, string> = token ? { Authorization: `Bearer ${token}` } : {};
|
|
|
|
fetch(`${BACKEND_URL}/poi`, { headers })
|
|
.then((r) => r.json())
|
|
.catch(() => [])
|
|
.then((poiRows: any[]) => {
|
|
const hhMarkers: UserMarker[] = households.map((r) => ({
|
|
id: `hh-${r.id}`,
|
|
lat: parseFloat(r.latitude),
|
|
lng: parseFloat(r.longitude),
|
|
type: "marker",
|
|
name: r.head_name,
|
|
meta: {
|
|
poverty_level: r.poverty_level,
|
|
family_count: r.family_count,
|
|
penghasilan: r.penghasilan,
|
|
fuzzy_label: r.fuzzy_label ?? undefined,
|
|
fuzzy_score: r.fuzzy_score != null ? Number(r.fuzzy_score) : undefined,
|
|
notes: r.notes ?? undefined,
|
|
},
|
|
}));
|
|
const poiMarkers: UserMarker[] = (Array.isArray(poiRows) ? poiRows : []).map((r) => ({
|
|
id: `poi-${r.id}`,
|
|
lat: parseFloat(r.latitude),
|
|
lng: parseFloat(r.longitude),
|
|
type: r.religion_subtype ?? r.poi_type,
|
|
name: r.name,
|
|
meta: {
|
|
poi_type: r.poi_type,
|
|
notes: r.notes ?? undefined,
|
|
radius: r.radius_meters ?? 0,
|
|
},
|
|
}));
|
|
setUserMarkers([...hhMarkers, ...poiMarkers]);
|
|
});
|
|
}, [useLeaflet, households]);
|
|
|
|
useEffect(() => {
|
|
setUseLeaflet(sessionStorage.getItem("poverty_useLeaflet") === "true");
|
|
setMapStyle((sessionStorage.getItem("poverty_mapStyle") as "street" | "satellite") ?? "street");
|
|
setHydrated(true);
|
|
}, []);
|
|
|
|
useEffect(() => { if (hydrated) sessionStorage.setItem("poverty_useLeaflet", String(useLeaflet)); }, [useLeaflet, hydrated]);
|
|
useEffect(() => { if (hydrated) sessionStorage.setItem("poverty_mapStyle", mapStyle); }, [mapStyle, hydrated]);
|
|
|
|
function handleDragEnd(event: DragEndEvent) {
|
|
const { active, over } = event;
|
|
setDraggedItemId(null);
|
|
if (over?.id !== "map-canvas") return;
|
|
const itemId = (active.data.current as any)?.itemId as string | undefined;
|
|
if (!itemId || !mapInstanceRef.current) return;
|
|
|
|
// Get drop coordinates in the map container
|
|
const nativeEvent = event.activatorEvent as PointerEvent;
|
|
const rect = mapContainerRef.current?.getBoundingClientRect();
|
|
if (!rect) return;
|
|
|
|
const L = (window as any).L;
|
|
if (!L) return;
|
|
|
|
const x = nativeEvent.clientX + (event.delta?.x ?? 0) - rect.left;
|
|
const y = nativeEvent.clientY + (event.delta?.y ?? 0) - rect.top;
|
|
const latLng = mapInstanceRef.current.containerPointToLatLng(L.point(x, y));
|
|
|
|
setPendingClick({ lat: latLng.lat, lng: latLng.lng });
|
|
setPlacingMarkerType(itemId);
|
|
}
|
|
|
|
const demographics = useMemo(() => {
|
|
const householdMarkers = userMarkers.filter((m) => m.type === "marker");
|
|
return {
|
|
population: householdMarkers.reduce((sum, h) => sum + (h.meta?.family_count ?? 0), 0),
|
|
beneficiaries: householdMarkers.filter((h) => h.meta?.poverty_level === "Extreme" || h.meta?.poverty_level === "Miskin").length,
|
|
socialSecurity: householdMarkers.filter((h) => h.meta?.poverty_level === "Rentan").length,
|
|
};
|
|
}, [userMarkers]);
|
|
|
|
// Default the inspector to the highest-priority household.
|
|
const selectedHousehold = useMemo(() => {
|
|
if (households.length === 0) return null;
|
|
const found = households.find((h) => h.id === selectedHouseholdId);
|
|
if (found) return found;
|
|
return [...households].sort(
|
|
(a, b) => Number(b.fuzzy_score ?? -1) - Number(a.fuzzy_score ?? -1)
|
|
)[0];
|
|
}, [households, selectedHouseholdId]);
|
|
|
|
async function handleMarkerDragEnd(marker: UserMarker, newLat: number, newLng: number) {
|
|
const isHousehold = marker.id.startsWith("hh-");
|
|
const dbId = marker.id.split("-").slice(1).join("-");
|
|
const token = localStorage.getItem("auth_token");
|
|
const headers = { "Content-Type": "application/json", ...(token ? { Authorization: `Bearer ${token}` } : {}) };
|
|
|
|
try {
|
|
const url = isHousehold ? `${BACKEND_URL}/households/${dbId}` : `${BACKEND_URL}/poi/${dbId}`;
|
|
const res = await fetch(url, {
|
|
method: "PUT",
|
|
headers,
|
|
body: JSON.stringify({ latitude: newLat, longitude: newLng }),
|
|
});
|
|
if (!res.ok) throw new Error("Gagal memindahkan penanda");
|
|
|
|
setUserMarkers((prev) =>
|
|
prev.map((m) =>
|
|
m.id === marker.id ? { ...m, lat: newLat, lng: newLng } : m
|
|
)
|
|
);
|
|
toast.success(`Posisi "${marker.name}" berhasil diperbarui`);
|
|
if (isHousehold) {
|
|
setHouseholdsRefreshKey((k) => k + 1);
|
|
}
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Gagal memindahkan penanda");
|
|
}
|
|
}
|
|
|
|
// FULL BLEED MAP LAYOUT
|
|
if (useLeaflet) {
|
|
return (
|
|
<DndContext
|
|
sensors={sensors}
|
|
onDragStart={(e) => setDraggedItemId((e.active.data.current as any)?.itemId ?? null)}
|
|
onDragEnd={handleDragEnd}
|
|
onDragCancel={() => setDraggedItemId(null)}
|
|
>
|
|
<AppShell activePath="/dashboard/poverty" fullBleed onExitFullBleed={() => setUseLeaflet(false)}>
|
|
<div ref={mapContainerRef} className="relative w-full h-full overflow-hidden">
|
|
<MapDropZone />
|
|
{/* Leaflet Map filling the screen */}
|
|
<LeafletMap
|
|
mode="poverty"
|
|
mapStyle={mapStyle}
|
|
userMarkers={userMarkers}
|
|
onMapClick={(lat, lng) => {
|
|
if (placingMarkerType && !editingMarker) {
|
|
setPendingClick({ lat, lng });
|
|
}
|
|
}}
|
|
onMarkerClick={(marker) => {
|
|
if (!placingMarkerType) setEditingMarker(marker);
|
|
}}
|
|
onMapReady={(map) => { mapInstanceRef.current = map; }}
|
|
dragDropEnabled={dragDropEnabled}
|
|
onMarkerDragEnd={handleMarkerDragEnd}
|
|
/>
|
|
|
|
{/* Placing Marker Banner — hidden while the dialog is open */}
|
|
{placingMarkerType && !pendingClick && (
|
|
<div className="absolute top-20 left-1/2 -translate-x-1/2 z-[1000] bg-background/95 backdrop-blur-md border border-primary/20 px-4 py-2 rounded-full shadow-lg flex items-center gap-3 animate-in fade-in slide-in-from-top-4 duration-300 pointer-events-auto">
|
|
<span className="text-xs font-semibold text-foreground flex items-center gap-1.5">
|
|
<span className="h-2 w-2 rounded-full bg-primary animate-pulse" />
|
|
Menempatkan {PLACING_LABELS[placingMarkerType] ?? placingMarkerType.replace("-", " ")}... Klik pada peta untuk menentukan posisi
|
|
</span>
|
|
<button
|
|
onClick={() => setPlacingMarkerType(null)}
|
|
className="text-[10px] uppercase font-bold text-muted-foreground hover:text-foreground border px-2 py-0.5 rounded-full transition-colors"
|
|
>
|
|
Batal
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Floating Legend HUD overlay */}
|
|
<PovertyHud />
|
|
|
|
{/* Floating Collection Grid Disclosure */}
|
|
<div className="absolute bottom-6 right-4 z-[999] max-h-[calc(100vh-8rem)] overflow-y-auto no-scrollbar pointer-events-auto">
|
|
<PovertyDisclosureCard
|
|
mapStyle={mapStyle}
|
|
onMapStyleChange={setMapStyle}
|
|
activeTool={placingMarkerType}
|
|
onToolSelect={setPlacingMarkerType}
|
|
demographics={demographics}
|
|
compact
|
|
dragDropEnabled={dragDropEnabled}
|
|
onDragDropToggle={setDragDropEnabled}
|
|
/>
|
|
</div>
|
|
|
|
{/* Marker Placement Dialog (households + non-religion POIs) */}
|
|
<MarkerPlacementDialog
|
|
open={!!pendingClick && placingMarkerType !== "religion"}
|
|
onOpenChange={(v) => { if (!v) { setPendingClick(null); setPlacingMarkerType(null); } }}
|
|
markerType={placingMarkerType ?? "marker"}
|
|
pendingClick={pendingClick}
|
|
onConfirm={(marker) => {
|
|
setUserMarkers((prev) => [...prev, marker]);
|
|
setPendingClick(null);
|
|
setPlacingMarkerType(null);
|
|
if (marker.type === "marker") setHouseholdsRefreshKey((k) => k + 1);
|
|
}}
|
|
/>
|
|
|
|
{/* Religion Place Dialog */}
|
|
<ReligionDialog
|
|
open={!!pendingClick && placingMarkerType === "religion"}
|
|
onOpenChange={(v) => { if (!v) { setPendingClick(null); setPlacingMarkerType(null); } }}
|
|
pendingClick={pendingClick}
|
|
onConfirm={(marker) => {
|
|
setUserMarkers((prev) => [...prev, marker]);
|
|
setPendingClick(null);
|
|
setPlacingMarkerType(null);
|
|
}}
|
|
/>
|
|
|
|
{/* Marker Edit/Delete Dialog */}
|
|
<MarkerEditDialog
|
|
open={!!editingMarker}
|
|
onOpenChange={(v) => { if (!v) setEditingMarker(null); }}
|
|
marker={editingMarker}
|
|
onUpdated={(updated) => {
|
|
setUserMarkers((prev) => prev.map((m) => m.id === updated.id ? updated : m));
|
|
setEditingMarker(null);
|
|
if (updated.type === "marker") setHouseholdsRefreshKey((k) => k + 1);
|
|
}}
|
|
onDeleted={(deleted) => {
|
|
setUserMarkers((prev) => prev.filter((m) => m.id !== deleted.id));
|
|
setEditingMarker(null);
|
|
if (deleted.type === "marker") setHouseholdsRefreshKey((k) => k + 1);
|
|
}}
|
|
/>
|
|
</div>
|
|
</AppShell>
|
|
|
|
{/* Drag overlay badge */}
|
|
<DragOverlay>
|
|
{draggedItemId && (
|
|
<div className="flex items-center gap-1.5 rounded-full bg-foreground/90 px-3 py-1.5 text-xs font-medium text-background shadow-lg">
|
|
<span className="capitalize">{PLACING_LABELS[draggedItemId] ?? draggedItemId.replace("-", " ")}</span>
|
|
</div>
|
|
)}
|
|
</DragOverlay>
|
|
</DndContext>
|
|
);
|
|
}
|
|
|
|
// STANDARD DASHBOARD LAYOUT (DEFAULT)
|
|
return (
|
|
<AppShell activePath="/dashboard/poverty">
|
|
<div className="flex flex-col gap-6">
|
|
<MapPageHeader
|
|
title="Statistik Kemiskinan"
|
|
description="Statistik kemiskinan langsung dari data warga dan fasilitas yang terpetakan. Buka tampilan Leaflet untuk mengelola marker."
|
|
onOpenMap={() => setUseLeaflet(true)}
|
|
buttonText="Peta Kemiskinan"
|
|
icon={<TrendingDownIcon className="h-4 w-4" />}
|
|
/>
|
|
|
|
{/* Unified Grid Layout */}
|
|
<div className="grid grid-cols-1 gap-px bg-border border rounded-xl overflow-hidden md:grid-cols-2 lg:grid-cols-4 shadow-none">
|
|
{/* Row 1: 4 stats cards (rendered inside PovertyStatsCards as direct children) */}
|
|
<PovertyStatsCards overview={overview} />
|
|
|
|
{/* Row 2: Trend Chart */}
|
|
<div className="md:col-span-2 lg:col-start-1 lg:col-span-3 lg:row-start-2 lg:row-end-3 flex flex-col h-full">
|
|
<PovertyTrendChart monthly={overview?.monthly ?? []} />
|
|
</div>
|
|
|
|
{/* Row 2: Inspector Top */}
|
|
<div className="md:col-span-2 lg:col-start-4 lg:col-span-1 lg:row-start-2 lg:row-end-3 flex flex-col h-full">
|
|
<PovertyInspectorTop selected={selectedHousehold} />
|
|
</div>
|
|
|
|
{/* Row 3: Inspector Bottom */}
|
|
<div className="md:col-span-2 lg:col-start-4 lg:col-span-1 lg:row-start-3 lg:row-end-4 flex flex-col h-full">
|
|
<PovertyInspectorBottom selected={selectedHousehold} />
|
|
</div>
|
|
|
|
{/* Row 3: Directory */}
|
|
<div className="md:col-span-2 lg:col-start-1 lg:col-span-3 lg:row-start-3 lg:row-end-4 flex flex-col h-full">
|
|
<PovertyDirectory
|
|
searchQuery={searchQuery}
|
|
setSearchQuery={setSearchQuery}
|
|
households={households}
|
|
selectedId={selectedHousehold?.id ?? null}
|
|
onSelect={(h) => setSelectedHouseholdId(h.id)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Row 4: Fuzzy Priority Distribution */}
|
|
<FuzzyPriorityStats
|
|
refreshKey={householdsRefreshKey}
|
|
onRecomputed={() => setHouseholdsRefreshKey((k) => k + 1)}
|
|
/>
|
|
|
|
{/* Row 5: Households Table (full width) */}
|
|
<div className="md:col-span-2 lg:col-span-4 flex flex-col h-full">
|
|
<PovertyHouseholdsTable rows={households} loading={householdsLoading} />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</AppShell>
|
|
);
|
|
}
|