178 lines
9.3 KiB
TypeScript
178 lines
9.3 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useMemo } from 'react'
|
|
import { Activity, ChevronDown } from 'lucide-react'
|
|
import { ExportPDFButton } from './ExportPDFButton'
|
|
|
|
interface HasilStunting {
|
|
id: number
|
|
tinggi_badan: number | null
|
|
berat_badan: 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
|
|
}
|
|
|
|
const START_YEAR = 2026
|
|
|
|
export function StuntingTable({ data, pengguna }: Props) {
|
|
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[availableYears.length - 1] ?? 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">
|
|
<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 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>
|
|
</div>
|
|
</div>
|
|
|
|
<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-[1000px]">
|
|
{/* Header */}
|
|
<div className="grid grid-cols-[100px_100px_140px_1fr_160px_160px_120px] bg-black text-white px-6 py-4 text-[10px] font-black uppercase tracking-widest">
|
|
<span className="text-center">Tinggi</span>
|
|
<span className="text-center">Berat</span>
|
|
<span className="text-center">Status</span>
|
|
<span>Pesan / Rekomendasi</span>
|
|
<span className="text-center">Posyandu</span>
|
|
<span className="text-center">Tanggal</span>
|
|
<span className="text-center">Laporan</span>
|
|
</div>
|
|
|
|
{filtered.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-20 gap-3 text-gray-300 bg-white">
|
|
<Activity className="w-12 h-12 opacity-20" />
|
|
<p className="text-sm text-gray-400 font-black uppercase tracking-widest">Data belum tersedia tahun {selectedYear}</p>
|
|
</div>
|
|
) : (
|
|
<div className="divide-y-2 divide-gray-100 bg-white">
|
|
{filtered.map((row) => {
|
|
const isStunting = row.status_stunting === true
|
|
|
|
return (
|
|
<div
|
|
key={row.id}
|
|
className="grid grid-cols-[100px_100px_140px_1fr_160px_160px_120px] items-center px-6 py-6 transition-colors hover:bg-gray-50/50"
|
|
>
|
|
{/* Tinggi Badan */}
|
|
<div className="text-center">
|
|
<span className="font-black text-lg text-black">{row.tinggi_badan ?? '-'}</span>
|
|
{row.tinggi_badan && <span className="text-[10px] text-gray-400 ml-1 font-bold">cm</span>}
|
|
</div>
|
|
|
|
{/* Berat Badan */}
|
|
<div className="text-center">
|
|
<span className="font-black text-lg text-black">{row.berat_badan ?? '-'}</span>
|
|
{row.berat_badan && <span className="text-[10px] text-gray-400 ml-1 font-bold">kg</span>}
|
|
</div>
|
|
|
|
{/* Status Stunting */}
|
|
<div className="flex justify-center">
|
|
{row.status_stunting === null ? (
|
|
<span className="text-xs text-gray-300 font-bold">—</span>
|
|
) : (
|
|
<span className={`inline-flex items-center px-4 py-1.5 rounded-full text-[10px] font-black border uppercase tracking-widest ${isStunting
|
|
? 'bg-red-50 border-red-200 text-red-700 shadow-[2px_2px_0px_0px_rgba(239,68,68,0.1)]'
|
|
: 'bg-emerald-50 border-emerald-200 text-emerald-700 shadow-[2px_2px_0px_0px_rgba(16,185,129,0.1)]'
|
|
}`}>
|
|
{isStunting ? '⚠ Stunting' : '✓ Normal'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Pesan AI — truncated */}
|
|
<div className="pr-6">
|
|
{row.pesan_ai ? (
|
|
<p className="text-[11px] text-gray-600 leading-relaxed font-medium line-clamp-2">
|
|
{row.pesan_ai}
|
|
</p>
|
|
) : (
|
|
<span className="text-xs text-gray-300 italic font-medium">Data sedang diproses...</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Nama Posyandu */}
|
|
<div className="text-center">
|
|
<span className="text-[11px] text-gray-900 font-black uppercase tracking-tight">{row.nama_posyandu ?? '-'}</span>
|
|
</div>
|
|
|
|
{/* Tanggal Upload */}
|
|
<div className="text-center">
|
|
<span className="text-[11px] text-gray-500 font-bold">{formatDate(row.tanggal_upload)}</span>
|
|
</div>
|
|
|
|
{/* Aksi: Cetak PDF */}
|
|
<div className="flex justify-center">
|
|
<ExportPDFButton row={row} allData={data} pengguna={pengguna} />
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|