"use client"; import { useEffect, useState } from "react"; import useSWR from "swr"; import { ArrowDownAZ, Download, Eye, FilePenLine, ImagePlus, Plus, Printer, Search, SlidersHorizontal, Trash2, User, UserCheck, Users, UsersRound, } from "lucide-react"; import { toast } from "sonner"; import type { Desa, Keluarga, MutasiPenduduk, Paginated, Penduduk, RingkasanPenduduk, RumahTangga, Wilayah, } from "@/lib/types"; import { ApiError, apiSend, fetcher } from "@/lib/api"; import { cetakHtml, escapeHtml, kopDesa } from "@/lib/cetak"; import { unduhCsv } from "@/lib/sekretariat"; import { PageHeader, StatCard } from "@/components/page-header"; import { FotoPenduduk } from "@/components/admin/foto-penduduk"; import { Pagination } from "@/components/pagination"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select } from "@/components/ui/select"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Textarea } from "@/components/ui/textarea"; import { AGAMA_OPTIONS, ASURANSI_OPTIONS, BPJS_KETENAGAKERJAAN_OPTIONS, CACAT_OPTIONS, CARA_KB_OPTIONS, GOLONGAN_DARAH_OPTIONS, HUBUNGAN_OPTIONS, PENDIDIKAN_OPTIONS, PENDIDIKAN_SEDANG_OPTIONS, PEKERJAAN_OPTIONS, PUNYA_TIDAK_OPTIONS, SAKIT_MENAHUN_OPTIONS, STATUS_KAWIN_OPTIONS, STATUS_KTP_OPTIONS, formatNumber, hitungUmur, labelGender, labelHubungan, labelStatusDasar, } from "@/lib/utils"; const STATUS_VARIANT: Record = { HIDUP: "success", MATI: "danger", PINDAH: "warning", HILANG: "secondary", PERGI: "warning", TIDAK_VALID: "secondary", }; const WARGANEGARA_OPTIONS = ["WNI", "WNA", "DUA KEWARGANEGARAAN"]; const emptyFilter = { status: "", statusPenduduk: "", jenisKelamin: "", dusunId: "", rwId: "", rtId: "", agama: "", pendidikan: "", pendidikanSedangDitempuh: "", pekerjaan: "", statusKawin: "", golonganDarah: "", umurMin: "", umurMax: "", tanggalLahirMulai: "", tanggalLahirSampai: "", warganegara: "", statusKtp: "", cacat: "", caraKb: "", sakitMenahun: "", asuransi: "", bpjsKetenagakerjaan: "", adat: "", suku: "", marga: "", punyaTagIdCard: "", punyaKartuKeluarga: "", }; type FormState = Record; const emptyForm: FormState = { nik: "", nama: "", jenisKelamin: "L", tempatLahir: "", tanggalLahir: "", agama: "", pendidikan: "", pekerjaan: "", statusKawin: "", warganegara: "WNI", golonganDarah: "", alamat: "", statusPenduduk: "TETAP", tagIdCard: "", tanggalPeristiwa: "", rtId: "", rumahTanggaId: "", keluargaId: "", hubunganKeluarga: "", statusDasar: "HIDUP", telepon: "", email: "", ayahNama: "", ibuNama: "", keterangan: "", pendidikanSedangDitempuh: "", cacat: "", sakitMenahun: "", caraKb: "", statusKtp: "", asuransi: "", bpjsKetenagakerjaan: "", adat: "", suku: "", marga: "", dapatMembacaHuruf: "", }; function toForm(penduduk: Penduduk): FormState { return { ...emptyForm, nik: penduduk.nik ?? "", nama: penduduk.nama ?? "", jenisKelamin: penduduk.jenisKelamin, tempatLahir: penduduk.tempatLahir ?? "", tanggalLahir: penduduk.tanggalLahir ? penduduk.tanggalLahir.slice(0, 10) : "", agama: penduduk.agama ?? "", pendidikan: penduduk.pendidikan ?? "", pekerjaan: penduduk.pekerjaan ?? "", statusKawin: penduduk.statusKawin ?? "", warganegara: penduduk.warganegara || "WNI", golonganDarah: penduduk.golonganDarah ?? "", alamat: penduduk.alamat ?? "", statusPenduduk: penduduk.statusPenduduk ?? "TETAP", tagIdCard: penduduk.tagIdCard ?? "", tanggalPeristiwa: penduduk.tanggalPeristiwa ? penduduk.tanggalPeristiwa.slice(0, 10) : "", rtId: penduduk.rtId ? String(penduduk.rtId) : "", rumahTanggaId: penduduk.rumahTanggaId ? String(penduduk.rumahTanggaId) : "", keluargaId: penduduk.keluargaId ? String(penduduk.keluargaId) : "", hubunganKeluarga: penduduk.hubunganKeluarga ?? "", statusDasar: penduduk.statusDasar, telepon: penduduk.telepon ?? "", email: penduduk.email ?? "", ayahNama: penduduk.ayahNama ?? "", ibuNama: penduduk.ibuNama ?? "", keterangan: penduduk.keterangan ?? "", pendidikanSedangDitempuh: penduduk.pendidikanSedangDitempuh ?? "", cacat: penduduk.cacat ?? "", sakitMenahun: penduduk.sakitMenahun ?? "", caraKb: penduduk.caraKb ?? "", statusKtp: penduduk.statusKtp ?? "", asuransi: penduduk.asuransi ?? "", bpjsKetenagakerjaan: penduduk.bpjsKetenagakerjaan ?? "", adat: penduduk.adat ?? "", suku: penduduk.suku ?? "", marga: penduduk.marga ?? "", dapatMembacaHuruf: penduduk.dapatMembacaHuruf ?? "", }; } // Dikirim walau kosong supaya API menormalkannya menjadi null (field bisa dibersihkan). const BISA_DIKOSONGKAN = [ "cacat", "caraKb", "statusKtp", "asuransi", "bpjsKetenagakerjaan", "sakitMenahun", "adat", "suku", "marga", "pendidikanSedangDitempuh", "dapatMembacaHuruf", ]; function compact(form: FormState) { const payload: Record = {}; for (const [key, value] of Object.entries(form)) { if (value === "" && !BISA_DIKOSONGKAN.includes(key)) continue; payload[key] = key === "rtId" || key === "keluargaId" || key === "rumahTanggaId" ? Number(value) : value; } return payload; } const KOLOM_PENDUDUK_CSV = [ "NIK", "Tag ID Card", "Nama", "No. KK", "Nama Ayah", "Nama Ibu", "No. Rumah Tangga", "Jenis Kelamin", "Alamat", "Dusun", "RW", "RT", "Pendidikan Dalam KK", "Umur", "Pekerjaan", "Kawin", "Tgl Peristiwa", "Tgl Terdaftar", "Tempat Lahir", "Tanggal Lahir", "Agama", "Golongan Darah", "Status Penduduk", "Status Dasar", ]; function barisPendudukCsv(row: Penduduk) { return [ row.nik, row.tagIdCard ?? "", row.nama, row.keluarga?.noKk ?? "", row.ayahNama ?? "", row.ibuNama ?? "", row.rumahTangga?.nomor ?? "", row.jenisKelamin, row.alamat ?? "", row.rt?.parent?.parent?.nama ?? "", row.rt?.parent?.nama ?? "", row.rt?.nama ?? "", row.pendidikan ?? "", hitungUmur(row.tanggalLahir), row.pekerjaan ?? "", row.statusKawin ?? "", row.tanggalPeristiwa ? row.tanggalPeristiwa.slice(0, 10) : "", row.createdAt ? row.createdAt.slice(0, 10) : "", row.tempatLahir ?? "", row.tanggalLahir ? row.tanggalLahir.slice(0, 10) : "", row.agama ?? "", row.golonganDarah ?? "", row.statusPenduduk === "TIDAK_TETAP" ? "Tidak Tetap" : "Tetap", labelStatusDasar(row.statusDasar), ]; } function tanggalPenduduk(value: string | null) { return value ? new Date(value).toLocaleDateString("id-ID") : "-"; } export default function PendudukPage() { const [page, setPage] = useState(1); const [search, setSearch] = useState(""); const [q, setQ] = useState(""); const [filter, setFilter] = useState(emptyFilter); const [advancedOpen, setAdvancedOpen] = useState(false); const [formOpen, setFormOpen] = useState(false); const [editing, setEditing] = useState(null); const [form, setForm] = useState(emptyForm); const [saving, setSaving] = useState(false); const [deleteTarget, setDeleteTarget] = useState(null); const [deleting, setDeleting] = useState(false); const [detailId, setDetailId] = useState(null); const [exporting, setExporting] = useState(false); const [selected, setSelected] = useState([]); const [aksiTerbuka, setAksiTerbuka] = useState(false); const [saringAlamat, setSaringAlamat] = useState({ dusunId: "", rwId: "" }); const [fotoPilih, setFotoPilih] = useState(null); const [fotoHapus, setFotoHapus] = useState(false); const query = new URLSearchParams({ page: String(page), limit: "10" }); if (q) query.set("q", q); for (const [key, value] of Object.entries(filter)) { if (value) query.set(key, value); } const { data, isLoading, mutate } = useSWR>( `/penduduk?${query.toString()}`, fetcher, ); const { data: ringkasan, mutate: mutateRingkasan } = useSWR( "/penduduk/ringkasan", fetcher, ); const { data: wilayah } = useSWR("/wilayah", fetcher); const { data: keluargaList } = useSWR>( "/keluarga?limit=200", fetcher, ); const { data: rumahTanggaList } = useSWR( "/rumah-tangga", fetcher, ); const { data: desa } = useSWR("/desa", fetcher); const { data: detail } = useSWR( detailId ? `/penduduk/${detailId}` : null, fetcher, ); const rtOptions = (wilayah ?? []).filter((item) => item.level === "RT"); const allRegional = wilayah ?? []; const dusunOptions = allRegional.filter((item) => item.level === "DUSUN"); const rwOptions = filter.dusunId ? allRegional.filter( (item) => item.level === "RW" && item.parentId === Number(filter.dusunId), ) : allRegional.filter((item) => item.level === "RW"); const rtFiltered = filter.rwId ? rtOptions.filter((item) => item.parentId === Number(filter.rwId)) : rtOptions; const rwFormOptions = allRegional.filter( (item) => item.level === "RW" && (!saringAlamat.dusunId || item.parentId === Number(saringAlamat.dusunId)), ); const rtFormOptions = rtOptions.filter( (item) => !saringAlamat.rwId || item.parentId === Number(saringAlamat.rwId), ); const anggota = data?.data ?? []; const filterCount = Object.values(filter).filter(Boolean).length; const adaFilter = Boolean(q) || filterCount > 0; useEffect(() => { setPage(1); }, [q, filter]); function setValue(key: keyof typeof emptyFilter, value: string) { setFilter((current) => ({ ...current, [key]: value, ...(key === "dusunId" ? { rwId: "", rtId: "" } : {}), ...(key === "rwId" ? { rtId: "" } : {}), })); } function resetFilter() { setSearch(""); setQ(""); setFilter(emptyFilter); } function update(key: string, value: string) { setForm((current) => ({ ...current, [key]: value })); } function pilihRt(id: string) { update("rtId", id); const rantai = rantaiWilayah(Number(id) || null); setSaringAlamat({ dusunId: rantai.dusunId, rwId: rantai.rwId }); } function rantaiWilayah(rtId: number | null) { const rt = allRegional.find((item) => item.id === rtId); const rw = rt ? allRegional.find((item) => item.id === rt.parentId) : undefined; const dusun = rw ? allRegional.find((item) => item.id === rw.parentId) : undefined; return { dusunId: String(dusun?.id ?? ""), rwId: String(rw?.id ?? ""), dusun: dusun?.nama ?? "", rw: rw?.nama ?? "", rt: rt?.nama ?? "", }; } function openCreate(preset?: FormState) { setEditing(null); setForm({ ...emptyForm, ...preset }); setSaringAlamat({ dusunId: "", rwId: "" }); setFotoPilih(null); setFotoHapus(false); setFormOpen(true); } function buatNikSementara() { const contoh = anggota.find((warga) => /^\d{16}$/.test(warga.nik))?.nik; const awilayah = (contoh ?? "3303070000000000").slice(0, 6); const acak = Array.from({ length: 10 }, () => Math.floor(Math.random() * 10)).join(""); update("nik", `${awilayah}${acak}`); toast.success("NIK sementara dibuat, silakan periksa kembali"); } function openEdit(penduduk: Penduduk) { setEditing(penduduk); setForm(toForm(penduduk)); const rantai = rantaiWilayah(penduduk.rtId ?? null); setSaringAlamat({ dusunId: rantai.dusunId, rwId: rantai.rwId }); setFotoPilih(null); setFotoHapus(false); setFormOpen(true); } function pilihFoto(event: React.ChangeEvent) { const berkas = event.target.files?.[0]; event.target.value = ""; if (!berkas) return; if (!/image\/(jpeg|png|webp)/i.test(berkas.type)) { toast.error("Foto harus berformat JPG, PNG, atau WEBP"); return; } if (berkas.size > 2 * 1024 * 1024) { toast.error("Ukuran foto maksimal 2 MB"); return; } const pembaca = new FileReader(); pembaca.onload = () => { setFotoPilih(String(pembaca.result)); setFotoHapus(false); }; pembaca.onerror = () => toast.error("Gagal membaca berkas foto"); pembaca.readAsDataURL(berkas); } async function save(event: React.FormEvent) { event.preventDefault(); setSaving(true); try { const payload = compact(form); if (fotoPilih) payload.fotoData = fotoPilih; else if (fotoHapus) payload.fotoData = ""; if (editing) { for (const key of [ "rtId", "keluargaId", "rumahTanggaId", "hubunganKeluarga", "tanggalLahir", "tanggalPeristiwa", ]) { if (!(key in payload)) payload[key] = null; } await apiSend(`/penduduk/${editing.id}`, "PATCH", payload); toast.success("Data penduduk diperbarui"); } else { await apiSend("/penduduk", "POST", payload); toast.success("Penduduk baru ditambahkan"); } setFormOpen(false); setEditing(null); await mutate(); await mutateRingkasan(); } catch (error) { toast.error(error instanceof ApiError ? error.message : "Gagal menyimpan data"); } finally { setSaving(false); } } async function remove() { if (!deleteTarget) return; setDeleting(true); try { await apiSend(`/penduduk/${deleteTarget.id}`, "DELETE"); toast.success("Data penduduk dihapus"); setDeleteTarget(null); await mutate(); await mutateRingkasan(); } catch (error) { toast.error(error instanceof ApiError ? error.message : "Gagal menghapus data"); } finally { setDeleting(false); } } async function ekspor(huruf = false) { setExporting(true); try { const params = new URLSearchParams(); if (q) params.set("q", q); for (const [key, value] of Object.entries(filter)) { if (value) params.set(key, value); } const rows = await fetcher( `/penduduk/ekspor?${params.toString()}`, ); if (huruf) rows.sort((a, b) => a.nama.localeCompare(b.nama, "id")); unduhCsv( `data-penduduk${huruf ? "-huruf" : ""}-${new Date().toISOString().slice(0, 10)}.csv`, KOLOM_PENDUDUK_CSV, rows.map(barisPendudukCsv), ); toast.success(`${rows.length} data penduduk diekspor`); } catch (error) { toast.error(error instanceof ApiError ? error.message : "Gagal mengekspor data"); } finally { setExporting(false); } } function toggleSemua() { const ids = anggota.map((warga) => warga.id); setSelected((current) => ids.length && ids.every((id) => current.includes(id)) ? [] : ids, ); } function toggleSatu(id: number) { setSelected((current) => current.includes(id) ? current.filter((x) => x !== id) : [...current, id], ); } async function hapusTerpilih() { if (!selected.length) return; setAksiTerbuka(false); try { await Promise.all(selected.map((id) => apiSend(`/penduduk/${id}`, "DELETE"))); toast.success(`${selected.length} data penduduk dihapus`); setSelected([]); await mutate(); await mutateRingkasan(); } catch (error) { toast.error( error instanceof ApiError ? error.message : "Gagal menghapus data terpilih", ); } } function unduhTerpilih() { const rows = anggota.filter((warga) => selected.includes(warga.id)); if (!rows.length) return; setAksiTerbuka(false); unduhCsv( `penduduk-terpilih-${new Date().toISOString().slice(0, 10)}.csv`, KOLOM_PENDUDUK_CSV, rows.map(barisPendudukCsv), ); } function cetakDaftar(rows: Penduduk[], judul = "Daftar Penduduk") { if (!rows.length) { toast.error("Belum ada data untuk dicetak"); return; } const isi = ` ${kopDesa(desa, judul)} ${rows .map( (row, index) => ``, ) .join("")}
NoNIKNamaJKUmurAlamatRTStatus
${index + 1}${escapeHtml(row.nik)}${escapeHtml(row.nama)}${row.jenisKelamin}${hitungUmur(row.tanggalLahir)}${escapeHtml(row.alamat ?? "-")}${escapeHtml(row.rt?.nama ?? "-")}${escapeHtml(labelStatusDasar(row.statusDasar))}
`; if (!cetakHtml(judul, isi)) { toast.error("Izinkan pop-up untuk mencetak"); } } function cetakBiodata() { if (!detail) return; const rows: [string, string][] = [ ["NIK", detail.nik], ["Tag ID Card", detail.tagIdCard ?? "-"], ["Nama Lengkap (Tanpa Gelar)", detail.nama], ["Jenis Kelamin", labelGender(detail.jenisKelamin)], ["Agama", detail.agama ?? "-"], ["Status Penduduk", detail.statusPenduduk === "TIDAK_TETAP" ? "Penduduk Tidak Tetap" : "Penduduk Tetap"], ["Status Dasar", labelStatusDasar(detail.statusDasar)], ["Hubungan Dalam Keluarga", detail.hubunganKeluarga ? labelHubungan(detail.hubunganKeluarga) : "-"], ["Nomor Kartu Keluarga", detail.keluarga?.noKk ?? "-"], ["Nomor Rumah Tangga", detail.rumahTangga?.nomor ?? "-"], ["Tempat Lahir", detail.tempatLahir ?? "-"], ["Tanggal Lahir", detail.tanggalLahir ? new Date(detail.tanggalLahir).toLocaleDateString("id-ID", { day: "2-digit", month: "long", year: "numeric", }) : "-"], ["Umur", String(hitungUmur(detail.tanggalLahir))], ["Pendidikan Dalam KK", detail.pendidikan ?? "-"], ["Pekerjaan", detail.pekerjaan ?? "-"], ["Golongan Darah", detail.golonganDarah ?? "-"], ["Status Warga Negara", detail.warganegara], ["Nama Ayah", detail.ayahNama ?? "-"], ["Nama Ibu", detail.ibuNama ?? "-"], ["Dusun", detail.rt?.parent?.parent?.nama ?? "-"], ["RW", detail.rt?.parent?.nama ?? "-"], ["RT", detail.rt?.nama ?? "-"], ["Alamat Sekarang", detail.alamat ?? "-"], ["Nomor Telepon", detail.telepon ?? "-"], ["Email", detail.email ?? "-"], ["Status Perkawinan", detail.statusKawin ?? "-"], ["Tanggal Peristiwa", detail.tanggalPeristiwa ? new Date(detail.tanggalPeristiwa).toLocaleDateString("id-ID") : "-"], ["Keterangan", detail.keterangan ?? "-"], ]; const isi = ` ${kopDesa(desa, "Biodata Penduduk")} ${rows .map( ([label, value]) => ``, ) .join("")}
${escapeHtml(label)}:${escapeHtml(value)}
${ detail.mutasi?.length ? `${detail.mutasi .map( (item) => ``, ) .join("")}
TanggalJenisAsal / TujuanKeterangan
${escapeHtml( new Date(item.tanggal).toLocaleDateString("id-ID"), )}${escapeHtml(item.jenis)}${escapeHtml( item.asalTujuan ?? "-", )}${escapeHtml(item.keterangan ?? "-")}
` : "" }
${escapeHtml((desa?.kecamatan ?? "Cipari").toUpperCase())}, ${new Date().toLocaleDateString("id-ID", { day: "2-digit", month: "long", year: "numeric" })}
Kepala Desa ${escapeHtml((desa?.nama ?? "Mulyadadi").replace(/^Desa\s+/i, ""))}
${escapeHtml(desa?.kepalaDesa ?? "-")}
`; if (!cetakHtml(`Biodata ${detail.nama}`, isi)) { toast.error("Izinkan pop-up untuk mencetak biodata"); } } return (
{aksiTerbuka && (
)}
} />
{ event.preventDefault(); setQ(search.trim()); }} className="relative w-full lg:max-w-sm" > setSearch(event.target.value)} placeholder="Cari nama, NIK, tag ID, atau alamat…" className="pl-9" />
{adaFilter && ( )}
{advancedOpen && (
setValue("umurMin", event.target.value)} placeholder="Min" /> – setValue("umurMax", event.target.value)} placeholder="Maks" />
setValue("pendidikanSedangDitempuh", value)} />
setValue("tanggalLahirMulai", event.target.value)} aria-label="Tanggal lahir mulai" /> – setValue("tanggalLahirSampai", event.target.value)} aria-label="Tanggal lahir sampai" />
setValue("warganegara", value)} /> setValue("statusKtp", value)} /> setValue("cacat", value)} /> setValue("sakitMenahun", value)} /> setValue("caraKb", value)} /> setValue("asuransi", value)} /> setValue("bpjsKetenagakerjaan", value)} /> setValue("punyaTagIdCard", value)} /> setValue("punyaKartuKeluarga", value)} /> setValue("adat", event.target.value)} placeholder="Cari adat" /> setValue("suku", event.target.value)} placeholder="Cari suku" /> setValue("marga", event.target.value)} placeholder="Cari marga" />
)}
{isLoading ? (
{Array.from({ length: 6 }).map((_, index) => (
))}
) : anggota.length ? (
0 && anggota.every((warga) => selected.includes(warga.id)) } onChange={toggleSemua} aria-label="Pilih semua penduduk" className="h-4 w-4 rounded border-input" /> No
Aksi Foto NIK Tag ID Card Nama No. KK Nama Ayah Nama Ibu No. Rumah Tangga Jenis Kelamin Alamat Dusun RW RT Pendidikan Dalam KK Umur Pekerjaan Kawin Tgl Peristiwa Tgl Terdaftar {anggota.map((warga, index) => (
toggleSatu(warga.id)} aria-label={`Pilih ${warga.nama}`} className="h-4 w-4 rounded border-input" /> {index + 1}
{warga.nik} {warga.tagIdCard ?? "-"} {labelStatusDasar(warga.statusDasar)} {warga.keluarga?.noKk ?? "-"} {warga.ayahNama ?? "-"} {warga.ibuNama ?? "-"} {warga.rumahTangga?.nomor ?? "-"} {labelGender(warga.jenisKelamin)} {warga.alamat ?? "-"} {rantaiWilayah(warga.rtId).dusun || "-"} {rantaiWilayah(warga.rtId).rw || "-"} {warga.rt?.nama ?? "-"} {warga.pendidikan ?? "-"} {hitungUmur(warga.tanggalLahir)} {warga.pekerjaan ?? "-"} {warga.statusKawin ?? "-"} {tanggalPenduduk(warga.tanggalPeristiwa)} {tanggalPenduduk(warga.createdAt)} ))}
) : (

Data tidak ditemukan

Coba ubah kata kunci pencarian atau tambah penduduk baru.

)} {data && data.data.length > 0 && ( )} {editing ? "Biodata Penduduk" : "Tambah Penduduk"} Isian mengikuti format biodata penduduk OpenSID. Kolom bertanda * wajib diisi.
{fotoPilih ? ( Pratinjau foto baru ) : ( )} {fotoHapus ? ( Foto akan dihapus ) : fotoPilih ? ( Foto baru siap disimpan ) : null}

Format JPG, PNG, atau WEBP, maksimal 2 MB. Foto tampil pada kolom Foto di daftar Penduduk, Keluarga, dan Rumah Tangga.

{(editing?.foto || fotoPilih) && !fotoHapus && ( )}
update("nik", event.target.value)} placeholder="16 digit NIK" className="flex-1" />
update("nama", event.target.value)} placeholder="Nama sesuai KTP" /> update("tagIdCard", event.target.value)} placeholder="Contoh: TAG-00021" />