422 lines
22 KiB
TypeScript
422 lines
22 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useMemo } from 'react'
|
|
import { Activity, ChevronDown, Edit, Trash2, X, Loader2 } from 'lucide-react'
|
|
import { CetakPDFButton } from './CetakPDFButton'
|
|
import { deleteHasilStunting, updateHasilStunting } from '@/app/actions'
|
|
import { showSwal } from '@/lib/swal'
|
|
|
|
interface HasilStunting {
|
|
id: number
|
|
tinggi_badan: number | null
|
|
berat_badan: number | null
|
|
z_score: number | null
|
|
status_stunting: boolean | null
|
|
pesan_ai: string | null
|
|
tanggal_upload: string | null
|
|
nama_posyandu: string | null
|
|
}
|
|
|
|
interface Pengguna {
|
|
nama_orang_tua: string
|
|
alamat: string | null
|
|
nama_anak: string
|
|
jenis_kelamin: string | null
|
|
tanggal_lahir: string | null
|
|
}
|
|
|
|
interface Props {
|
|
data: HasilStunting[]
|
|
pengguna: Pengguna
|
|
posyanduList: { nama_posyandu: string }[]
|
|
}
|
|
|
|
const START_YEAR = 2026
|
|
|
|
export function HasilStuntingTable({ data, pengguna, posyanduList }: Props) {
|
|
const [editRecord, setEditRecord] = useState<HasilStunting | null>(null)
|
|
|
|
const handleDelete = async (id: number) => {
|
|
const confirmed = await showSwal.confirm(
|
|
'Hapus Data Pengukuran?',
|
|
'Data pengukuran ini akan dihapus permanen dari riwayat balita!'
|
|
)
|
|
|
|
if (confirmed.isConfirmed) {
|
|
try {
|
|
const res = await deleteHasilStunting(id)
|
|
if (res.success) {
|
|
await showSwal.success('Berhasil!', res.message)
|
|
} else {
|
|
showSwal.error('Gagal!', res.message)
|
|
}
|
|
} catch (err: any) {
|
|
showSwal.error('Gagal!', err.message || 'Terjadi kesalahan.')
|
|
}
|
|
}
|
|
}
|
|
|
|
const availableYears = useMemo(() => {
|
|
const currentYear = new Date().getFullYear()
|
|
const dataYears = Array.from(
|
|
new Set(data.map(d => d.tanggal_upload ? new Date(d.tanggal_upload).getFullYear() : null).filter(Boolean))
|
|
) as number[]
|
|
const maxYear = Math.max(currentYear, ...dataYears, START_YEAR)
|
|
return Array.from(
|
|
new Set([
|
|
...Array.from({ length: maxYear - START_YEAR + 1 }, (_, i) => START_YEAR + i),
|
|
...dataYears,
|
|
])
|
|
).filter(y => y >= START_YEAR).sort((a, b) => a - b)
|
|
}, [data])
|
|
|
|
const [selectedYear, setSelectedYear] = useState<number>(availableYears[0] ?? START_YEAR)
|
|
|
|
const filtered = useMemo(() => {
|
|
return data.filter(d => {
|
|
if (!d.tanggal_upload) return false
|
|
return new Date(d.tanggal_upload).getFullYear() === selectedYear
|
|
})
|
|
}, [data, selectedYear])
|
|
|
|
const formatDate = (d: string | null) => {
|
|
if (!d) return '-'
|
|
return new Date(d).toLocaleDateString('id-ID', {
|
|
day: 'numeric', month: 'short', year: 'numeric'
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
{/* Section Header + Filter */}
|
|
<div className="flex items-center justify-between flex-wrap gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<Activity className="w-4 h-4 text-gray-500" />
|
|
<p className="text-xs font-bold uppercase tracking-widest text-gray-500">Riwayat Hasil Pengukuran</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-bold uppercase tracking-widest text-gray-400">Periode:</span>
|
|
<div className="relative">
|
|
<select
|
|
value={selectedYear}
|
|
onChange={e => setSelectedYear(Number(e.target.value))}
|
|
className="appearance-none border-2 border-black rounded-lg pl-3 pr-8 py-1.5 text-sm font-bold bg-white focus:outline-none shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] cursor-pointer"
|
|
>
|
|
{availableYears.map(year => (
|
|
<option key={year} value={year}>{year}</option>
|
|
))}
|
|
</select>
|
|
<ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 pointer-events-none text-gray-500" />
|
|
</div>
|
|
<span className="text-xs text-gray-400 font-semibold">{filtered.length} data</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div className="rounded-xl border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<div className="min-w-[1050px]">
|
|
{/* Header */}
|
|
<div className="grid grid-cols-[36px_88px_88px_88px_100px_1fr_108px_110px_140px] bg-black text-white px-4 py-3 text-[10px] font-bold uppercase tracking-widest">
|
|
<span className="text-center text-gray-500">#</span>
|
|
<span className="text-center">Panjang</span>
|
|
<span className="text-center">Berat</span>
|
|
<span className="text-center">Z-Score</span>
|
|
<span className="text-center">Status</span>
|
|
<span>Pesan AI</span>
|
|
<span className="text-center">Posyandu</span>
|
|
<span className="text-center">Tgl Upload</span>
|
|
<span className="text-center">Aksi</span>
|
|
</div>
|
|
|
|
{filtered.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 gap-2 text-gray-300">
|
|
<Activity className="w-10 h-10 opacity-30" />
|
|
<p className="text-sm text-gray-400 font-semibold">Tidak ada data untuk tahun {selectedYear}</p>
|
|
</div>
|
|
) : (
|
|
filtered.map((row, idx) => {
|
|
const isStunting = row.status_stunting === true
|
|
|
|
return (
|
|
<div
|
|
key={row.id}
|
|
className={`grid grid-cols-[36px_88px_88px_88px_100px_1fr_108px_110px_140px] items-center px-4 py-3 border-b border-gray-100 text-sm transition-colors ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/40'} hover:bg-orange-50/30`}
|
|
>
|
|
{/* Index */}
|
|
<div className="flex justify-center">
|
|
<span className="text-xs text-gray-400 font-bold">{idx + 1}</span>
|
|
</div>
|
|
|
|
{/* Panjang Badan */}
|
|
<div className="text-center">
|
|
<span className="font-bold">{row.tinggi_badan ?? '-'}</span>
|
|
{row.tinggi_badan && <span className="text-xs text-gray-400 ml-0.5">cm</span>}
|
|
</div>
|
|
|
|
{/* Berat Badan */}
|
|
<div className="text-center">
|
|
<span className="font-bold">{row.berat_badan ?? '-'}</span>
|
|
{row.berat_badan && <span className="text-xs text-gray-400 ml-0.5">kg</span>}
|
|
</div>
|
|
|
|
{/* Z-Score */}
|
|
<div className="text-center">
|
|
<span className="font-bold">{row.z_score ?? '-'}</span>
|
|
{row.z_score !== null && <span className="text-xs text-gray-400 ml-0.5">SD</span>}
|
|
</div>
|
|
|
|
{/* Status Stunting */}
|
|
<div className="flex justify-center">
|
|
{row.status_stunting === null ? (
|
|
<span className="text-xs text-gray-300">—</span>
|
|
) : (
|
|
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold border ${isStunting
|
|
? 'bg-red-50 border-red-200 text-red-700'
|
|
: 'bg-emerald-50 border-emerald-200 text-emerald-700'
|
|
}`}>
|
|
{isStunting ? '⚠ Stunting' : '✓ Normal'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Pesan AI — truncated */}
|
|
<div className="pr-2">
|
|
{row.pesan_ai ? (
|
|
<p className="text-xs text-gray-600 leading-relaxed">
|
|
{row.pesan_ai.length > 80
|
|
? row.pesan_ai.slice(0, 80) + '..........'
|
|
: row.pesan_ai}
|
|
</p>
|
|
) : (
|
|
<span className="text-xs text-gray-300 italic">Tidak ada pesan</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Nama Posyandu */}
|
|
<div className="text-center">
|
|
<span className="text-xs text-gray-600">{row.nama_posyandu ?? '-'}</span>
|
|
</div>
|
|
|
|
{/* Tanggal Upload */}
|
|
<div className="text-center">
|
|
<span className="text-xs text-gray-500">{formatDate(row.tanggal_upload)}</span>
|
|
</div>
|
|
|
|
{/* Aksi: Cetak, Edit, Hapus */}
|
|
<div className="flex justify-center items-center gap-1.5">
|
|
<CetakPDFButton row={row} allData={data} pengguna={pengguna} />
|
|
<button
|
|
onClick={() => setEditRecord(row)}
|
|
className="p-1.5 bg-amber-500 hover:bg-amber-600 text-white rounded-lg transition-all shadow-[1.5px_1.5px_0px_0px_rgba(0,0,0,0.3)] hover:shadow-none hover:translate-x-[0.5px] hover:translate-y-[0.5px]"
|
|
title="Edit Data"
|
|
>
|
|
<Edit className="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(row.id)}
|
|
className="p-1.5 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all shadow-[1.5px_1.5px_0px_0px_rgba(0,0,0,0.3)] hover:shadow-none hover:translate-x-[0.5px] hover:translate-y-[0.5px]"
|
|
title="Hapus Data"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Edit Modal */}
|
|
{editRecord && (
|
|
<EditHasilStuntingModal
|
|
isOpen={!!editRecord}
|
|
onClose={() => setEditRecord(null)}
|
|
record={editRecord}
|
|
posyanduList={posyanduList}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface EditModalProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
record: HasilStunting
|
|
posyanduList: { nama_posyandu: string }[]
|
|
}
|
|
|
|
function EditHasilStuntingModal({ isOpen, onClose, record, posyanduList }: EditModalProps) {
|
|
const [tinggi, setTinggi] = useState(record.tinggi_badan?.toString() || '')
|
|
const [berat, setBerat] = useState(record.berat_badan?.toString() || '')
|
|
const [zScore, setZScore] = useState(record.z_score?.toString() || '')
|
|
const [statusStunting, setStatusStunting] = useState(record.status_stunting === true ? 'true' : 'false')
|
|
const [pesanAi, setPesanAi] = useState(record.pesan_ai || '')
|
|
const [tanggalUpload, setTanggalUpload] = useState(record.tanggal_upload ? record.tanggal_upload.split('T')[0] : '')
|
|
const [namaPosyandu, setNamaPosyandu] = useState(record.nama_posyandu || '')
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
if (!isOpen) return null
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setLoading(true)
|
|
|
|
const formData = new FormData()
|
|
formData.append('id', record.id.toString())
|
|
formData.append('tinggi_badan', tinggi)
|
|
formData.append('berat_badan', berat)
|
|
formData.append('z_score', zScore)
|
|
formData.append('status_stunting', statusStunting)
|
|
formData.append('pesan_ai', pesanAi)
|
|
formData.append('tanggal_upload', tanggalUpload)
|
|
formData.append('nama_posyandu', namaPosyandu)
|
|
|
|
try {
|
|
const res = await updateHasilStunting(null, formData)
|
|
if (res.success) {
|
|
await showSwal.success('Berhasil!', res.message)
|
|
onClose()
|
|
} else {
|
|
showSwal.error('Gagal!', res.message)
|
|
}
|
|
} catch (err: any) {
|
|
showSwal.error('Gagal!', err.message || 'Terjadi kesalahan.')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
|
<div className="bg-white rounded-2xl border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] w-full max-w-lg overflow-hidden animate-in fade-in zoom-in duration-200">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-6 py-5 border-b-2 border-black bg-black text-white">
|
|
<div className="flex items-center gap-2">
|
|
<Activity className="w-5 h-5" />
|
|
<h3 className="font-black text-lg">Edit Data Pengukuran</h3>
|
|
</div>
|
|
<button onClick={onClose} className="p-1.5 rounded-full hover:bg-white/10 transition-colors">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="p-6 flex flex-col gap-4 max-h-[80vh] overflow-y-auto">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Panjang/Tinggi Badan (cm)</label>
|
|
<input
|
|
type="number"
|
|
step="0.1"
|
|
value={tinggi}
|
|
onChange={e => setTinggi(e.target.value)}
|
|
className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none transition-colors"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Berat Badan (kg)</label>
|
|
<input
|
|
type="number"
|
|
step="0.1"
|
|
value={berat}
|
|
onChange={e => setBerat(e.target.value)}
|
|
className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none transition-colors"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Z-Score (SD)</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={zScore}
|
|
onChange={e => setZScore(e.target.value)}
|
|
className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none transition-colors"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Status Stunting</label>
|
|
<select
|
|
value={statusStunting}
|
|
onChange={e => setStatusStunting(e.target.value)}
|
|
className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none bg-white transition-colors"
|
|
required
|
|
>
|
|
<option value="false">Normal</option>
|
|
<option value="true">Stunting</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Posyandu</label>
|
|
<select
|
|
value={namaPosyandu}
|
|
onChange={e => setNamaPosyandu(e.target.value)}
|
|
className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none bg-white transition-colors"
|
|
required
|
|
>
|
|
<option value="">Pilih Posyandu</option>
|
|
{posyanduList.map((p, idx) => (
|
|
<option key={idx} value={p.nama_posyandu}>
|
|
{p.nama_posyandu}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Tanggal Pengukuran</label>
|
|
<input
|
|
type="date"
|
|
value={tanggalUpload}
|
|
onChange={e => setTanggalUpload(e.target.value)}
|
|
className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none transition-colors"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Rekomendasi / Pesan AI</label>
|
|
<textarea
|
|
value={pesanAi}
|
|
onChange={e => setPesanAi(e.target.value)}
|
|
className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none resize-none transition-colors"
|
|
rows={4}
|
|
placeholder="Tulis pesan atau rekomendasi..."
|
|
/>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="flex-1 py-3 border-2 border-black font-bold text-sm rounded-xl hover:bg-gray-50 transition-colors"
|
|
>
|
|
Batal
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="flex-1 py-3 bg-black text-white font-black text-sm rounded-xl hover:bg-gray-800 transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Simpan Perubahan'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|