104 lines
4.9 KiB
TypeScript
104 lines
4.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Eye, Baby, Search } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
|
|
interface AkunBalita {
|
|
id: number
|
|
nama_orang_tua: string
|
|
nama_anak: string
|
|
}
|
|
|
|
interface Props {
|
|
data: AkunBalita[]
|
|
}
|
|
|
|
export function KelolaDataTable({ data }: Props) {
|
|
const [search, setSearch] = useState('')
|
|
|
|
const filtered = data.filter(d =>
|
|
d.nama_orang_tua?.toLowerCase().includes(search.toLowerCase()) ||
|
|
d.nama_anak?.toLowerCase().includes(search.toLowerCase())
|
|
)
|
|
|
|
return (
|
|
<>
|
|
{/* Search */}
|
|
<div className="flex items-center gap-3 mb-5">
|
|
<div className="relative flex-1 max-w-sm">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Cari nama ibu atau nama anak..."
|
|
value={search}
|
|
onChange={e => setSearch(e.target.value)}
|
|
className="w-full pl-9 pr-4 py-2.5 border-2 border-gray-200 rounded-lg text-sm focus:outline-none focus:border-black transition-colors"
|
|
/>
|
|
</div>
|
|
<span className="text-xs text-gray-400 font-semibold">
|
|
{filtered.length} dari {data.length} data
|
|
</span>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div className="rounded-xl border-2 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] overflow-hidden">
|
|
{/* Header */}
|
|
<div className="grid grid-cols-[60px_1fr_1fr_120px] bg-black text-white px-6 py-4 text-xs font-bold uppercase tracking-widest">
|
|
<span className="text-center text-gray-400">#</span>
|
|
<span>Nama Ibu / Orang Tua</span>
|
|
<span>Nama Anak</span>
|
|
<span className="text-center">Aksi</span>
|
|
</div>
|
|
|
|
{/* Rows */}
|
|
{filtered.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-16 gap-3 text-gray-300">
|
|
<Baby className="w-12 h-12 opacity-30" />
|
|
<p className="font-semibold text-gray-400">Tidak ada data ditemukan</p>
|
|
</div>
|
|
) : (
|
|
filtered.map((row, idx) => (
|
|
<div
|
|
key={row.id}
|
|
className={`grid grid-cols-[60px_1fr_1fr_120px] items-center px-6 py-4 border-b border-gray-100 hover:bg-orange-50/50 transition-colors ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/40'}`}
|
|
>
|
|
{/* Index */}
|
|
<div className="flex justify-center">
|
|
<span className="w-7 h-7 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center text-xs font-bold text-gray-500">
|
|
{idx + 1}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Nama Ibu */}
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="w-8 h-8 rounded-full bg-orange-100 border border-orange-200 flex items-center justify-center text-orange-700 text-xs font-bold flex-shrink-0">
|
|
{row.nama_orang_tua?.charAt(0).toUpperCase() ?? '?'}
|
|
</div>
|
|
<span className="text-sm font-semibold truncate">{row.nama_orang_tua ?? '-'}</span>
|
|
</div>
|
|
|
|
{/* Nama Anak */}
|
|
<div className="flex items-center gap-2">
|
|
<Baby className="w-3.5 h-3.5 text-gray-300 flex-shrink-0" />
|
|
<span className="text-sm text-gray-700 truncate">{row.nama_anak ?? '-'}</span>
|
|
</div>
|
|
|
|
{/* Aksi — navigate ke halaman detail */}
|
|
<div className="flex justify-center">
|
|
<Link
|
|
href={`/dashboard/kelola-data/${row.id}`}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 bg-orange-500 text-white text-xs font-bold rounded-lg hover:bg-orange-600 transition-all shadow-[2px_2px_0px_0px_rgba(0,0,0,0.3)] hover:shadow-none hover:translate-x-[1px] hover:translate-y-[1px]"
|
|
>
|
|
<Eye className="w-3.5 h-3.5" />
|
|
Review
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|