252 lines
14 KiB
TypeScript
252 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useMemo } from 'react'
|
|
import { Search, Plus, MapPin, Phone, User, Edit3, Trash2, Eye, ExternalLink, Building2 } from 'lucide-react'
|
|
import { PosyanduFormModal } from './PosyanduFormModal'
|
|
import { useRouter } from 'next/navigation'
|
|
import { supabase } from '@/lib/supabase'
|
|
import { showSwal } from '@/lib/swal'
|
|
|
|
interface PosyanduWithPetugas {
|
|
id: string
|
|
nama_posyandu: string
|
|
alamat: string
|
|
kontak: string | null
|
|
latitude: number | null
|
|
longitude: number | null
|
|
link_google_maps: string | null
|
|
petugas?: {
|
|
nama_petugas: string
|
|
nomor_hp: string | null
|
|
jabatan: string | null
|
|
}[]
|
|
}
|
|
|
|
interface Props {
|
|
data: PosyanduWithPetugas[]
|
|
}
|
|
|
|
export function ManajemenPosyanduTable({ data }: Props) {
|
|
const router = useRouter()
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
|
const [selectedPosyandu, setSelectedPosyandu] = useState<PosyanduWithPetugas | null>(null)
|
|
const [isDeleting, setIsDeleting] = useState<string | null>(null)
|
|
|
|
const filteredData = useMemo(() => {
|
|
return data.filter(p =>
|
|
p.nama_posyandu.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
p.alamat.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
p.petugas?.some(petugas => petugas.nama_petugas?.toLowerCase().includes(searchTerm.toLowerCase()))
|
|
)
|
|
}, [data, searchTerm])
|
|
|
|
const handleEdit = (posyandu: PosyanduWithPetugas) => {
|
|
setSelectedPosyandu(posyandu)
|
|
setIsModalOpen(true)
|
|
}
|
|
|
|
const handleDelete = async (id: string, name: string) => {
|
|
const result = await showSwal.confirm(
|
|
'Hapus Data?',
|
|
`Apakah Anda yakin ingin menghapus data Posyandu ${name}? Seluruh data petugas terkait juga akan dihapus.`
|
|
)
|
|
|
|
if (!result.isConfirmed) return
|
|
|
|
setIsDeleting(id)
|
|
try {
|
|
// First delete local petugas (due to FK)
|
|
await supabase.from('petugas_posyandu_lokal').delete().eq('posyandu_id', id)
|
|
// Then delete the posyandu
|
|
const { error } = await supabase.from('detail_posyandu').delete().eq('id', id)
|
|
|
|
if (error) throw error
|
|
|
|
await showSwal.success('Terhapus!', `Data Posyandu ${name} telah berhasil dihapus.`)
|
|
router.refresh()
|
|
} catch (err: any) {
|
|
showSwal.error('Gagal!', `Gagal menghapus data: ${err.message}`)
|
|
} finally {
|
|
setIsDeleting('')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
{/* Action Bar */}
|
|
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<div className="relative w-full md:w-96">
|
|
<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 posyandu, alamat, atau petugas..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2.5 bg-gray-50 border-2 border-gray-100 focus:border-black rounded-xl text-sm font-semibold outline-none transition-all"
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={() => { setSelectedPosyandu(null); setIsModalOpen(true) }}
|
|
className="w-full md:w-auto flex items-center justify-center gap-2 px-6 py-2.5 bg-purple-600 text-white font-bold rounded-xl hover:bg-purple-700 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
Tambah Posyandu Baru
|
|
</button>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div className="rounded-2xl border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<div className="min-w-[900px] md:min-w-full">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead className="bg-black text-white">
|
|
<tr>
|
|
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-center w-16">No</th>
|
|
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest">Informasi Posyandu</th>
|
|
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest">Petugas & Kontak</th>
|
|
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-center">Lokasi</th>
|
|
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-center w-40">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-100">
|
|
{filteredData.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={5} className="px-6 py-20 text-center">
|
|
<div className="flex flex-col items-center gap-2 text-gray-400">
|
|
<Building2 className="w-12 h-12 opacity-20" />
|
|
<p className="font-bold">Tidak ada data posyandu ditemukan</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
filteredData.map((p, idx) => (
|
|
<tr key={p.id} className="hover:bg-purple-50/30 transition-colors group">
|
|
<td className="px-6 py-5 text-center font-black text-gray-300 group-hover:text-purple-300">
|
|
{idx + 1}
|
|
</td>
|
|
<td className="px-6 py-5">
|
|
<div className="flex flex-col">
|
|
<span className="font-black text-base">{p.nama_posyandu}</span>
|
|
<div className="flex items-center gap-1.5 text-gray-500 text-xs mt-1">
|
|
<MapPin className="w-3 h-3 flex-shrink-0" />
|
|
<span className="line-clamp-1">{p.alamat}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-5">
|
|
<div className="flex flex-col gap-2 max-w-[250px]">
|
|
{p.petugas && p.petugas.length > 0 ? (
|
|
p.petugas.map((petugas, i) => (
|
|
<div key={i} className="flex flex-col border-l-2 border-purple-100 pl-3 py-0.5">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-bold text-gray-700 line-clamp-1">
|
|
{petugas.nama_petugas}
|
|
</span>
|
|
{petugas.jabatan && (
|
|
<span className="text-[10px] px-1.5 py-0.5 bg-purple-50 text-purple-600 rounded font-black uppercase tracking-tighter">
|
|
{petugas.jabatan}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{petugas.nomor_hp && (
|
|
<div className="flex items-center gap-1.5 text-[10px] text-gray-400">
|
|
<Phone className="w-2.5 h-2.5" />
|
|
<span>{petugas.nomor_hp}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="flex items-center gap-2 text-gray-400 italic text-xs">
|
|
<User className="w-3 h-3" />
|
|
<span>Belum ada petugas</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-5 text-center">
|
|
{p.link_google_maps ? (
|
|
<a
|
|
href={p.link_google_maps}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-600 rounded-lg text-xs font-bold border border-blue-100 hover:bg-blue-100 transition-colors"
|
|
>
|
|
<ExternalLink className="w-3 h-3" />
|
|
Cek Maps
|
|
</a>
|
|
) : (
|
|
<span className="text-xs text-gray-300 italic">Belum diset</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-5">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button
|
|
onClick={() => handleEdit(p)}
|
|
className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all"
|
|
title="Edit"
|
|
>
|
|
<Edit3 className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(p.id, p.nama_posyandu)}
|
|
disabled={isDeleting === p.id}
|
|
className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all disabled:opacity-50"
|
|
title="Hapus"
|
|
>
|
|
{isDeleting === p.id ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<Trash2 className="w-4 h-4" />
|
|
)}
|
|
</button>
|
|
<div className="w-px h-10 bg-gray-100 mx-1"></div>
|
|
<button
|
|
onClick={() => router.push(`/dashboard/manajemen-posyandu/review/${p.id}`)}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 bg-black text-white rounded-lg text-xs font-black shadow-[3px_3px_0px_0px_rgba(147,51,234,0.5)] hover:shadow-none hover:translate-x-[1px] hover:translate-y-[1px] transition-all"
|
|
>
|
|
<Eye className="w-3.5 h-3.5" />
|
|
REVIEW
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isModalOpen && (
|
|
<PosyanduFormModal
|
|
isOpen={isModalOpen}
|
|
onClose={() => setIsModalOpen(false)}
|
|
selectedData={selectedPosyandu}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Loader2(props: any) {
|
|
return (
|
|
<svg
|
|
{...props}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
|
|
</svg>
|
|
)
|
|
}
|