muhammadraynard
/
TKK_E32231405
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add all task that i have done today

This commit is contained in:
panggilsajarey 2026-03-17 09:42:21 +07:00
parent bcd1f06635
commit 96ecb499b9
14 changed files with 577 additions and 468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/dashboard/kelola-jadwal/InstantScheduleModal.tsx
View File

@ -65,7 +65,7 @@ export function InstantScheduleModal({ isOpen, onClose, adminName }: Props) {
<form action={formAction} className="p-6 flex flex-col gap-5">
<input type="hidden" name="edited_by" value={adminName} />
<input type="hidden" name="jam_mulai" value="08:00" />
<input type="hidden" name="jam_selesai" value="11:00" />
<input type="hidden" name="jam_selesai" value="10:00" />
<div className="p-3 bg-blue-50 border border-blue-200 rounded-xl flex gap-x-2">
<AlertCircle className="w-4 h-4 text-blue-600 flex-shrink-0" />
@ -74,7 +74,7 @@ export function InstantScheduleModal({ isOpen, onClose, adminName }: Props) {
Penjadwalan harus dilakukan minimal 1 hari sebelumnya.
</p>
<p className="text-[10px] text-blue-800 leading-relaxed font-bold uppercase tracking-tight">
Sesi tetap: 08:00 - 11:00 WIB (Selingan 1 Jam).
Sesi: 08-10, 11-13, 14-16 (Selingan 1 Jam).
</p>
</div>
</div>
@ -104,7 +104,7 @@ export function InstantScheduleModal({ isOpen, onClose, adminName }: Props) {
</div>
<div className="h-0.5 w-4 bg-gray-300"></div>
<div className="px-3 py-1.5 bg-black text-white text-sm font-black rounded-lg">
11:00
10:00
</div>
<span className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-auto">Fixed Slot</span>
</div>

184
app/dashboard/kelola-jadwal/JadwalTable.tsx
View File

@ -222,97 +222,101 @@ export function JadwalTable({ data, userName }: Props) {
</div>
{/* Table */}
<div className={`overflow-hidden rounded-2xl border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-colors ${showHistory ? 'bg-slate-50' : 'bg-white'}`}>
<table className="w-full text-left border-collapse">
<thead className={`${showHistory ? 'bg-purple-600' : 'bg-black'} text-white transition-colors`}>
<tr>
<th className="px-6 py-5 text-[10px] font-black uppercase tracking-widest text-center w-20">No</th>
<th className="px-6 py-5 text-[10px] font-black uppercase tracking-widest">Waktu & Sesi</th>
<th className="px-6 py-5 text-[10px] font-black uppercase tracking-widest">Detail Posyandu</th>
<th className="px-6 py-5 text-[10px] font-black uppercase tracking-widest">Oleh Admin</th>
<th className="px-6 py-5 text-[10px] font-black uppercase tracking-widest text-center">Aksi</th>
</tr>
</thead>
<tbody className={`${showHistory ? 'bg-slate-50 divide-purple-100' : 'bg-white divide-gray-100'} divide-y-2`}>
{filteredData.length === 0 ? (
<tr>
<td colSpan={5} className="px-6 py-24 text-center">
<div className="flex flex-col items-center gap-4 text-gray-300">
<div className="p-4 bg-gray-50 rounded-full">
<Calendar className="w-12 h-12 opacity-20" />
</div>
<div className="flex flex-col gap-1">
<p className="font-black text-gray-400">Belum ada jadwal ditemukan</p>
<p className="text-xs font-semibold">Gunakan Penjadwalan Instan untuk membuat jadwal otomatis.</p>
</div>
</div>
</td>
</tr>
) : (
filteredData.map((j, idx) => (
<tr key={j.id} className={`${showHistory ? 'hover:bg-purple-100/50' : 'hover:bg-red-50/30'} transition-colors group`}>
<td className={`px-6 py-6 text-center font-black ${showHistory ? 'text-purple-300' : 'text-gray-300'} group-hover:text-red-300 text-lg`}>
{idx + 1}
</td>
<td className="px-6 py-6">
<div className="flex flex-col gap-1">
<div className={`flex items-center gap-2 ${showHistory ? 'text-purple-600' : 'text-red-600'} font-black`}>
<Clock className="w-4 h-4" />
<span className="text-lg">{j.jam_mulai.slice(0, 5)} - {j.jam_selesai.slice(0, 5)}</span>
</div>
<span className="text-[10px] font-bold uppercase text-gray-400 tracking-widest">
{new Date(j.tanggal).toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long' })}
</span>
</div>
</td>
<td className="px-6 py-6">
<div className="flex flex-col">
<span className={`font-black text-base ${showHistory ? 'text-purple-900' : 'text-gray-900'} group-hover:text-red-600 transition-colors uppercase tracking-tight`}>
{j.detail_posyandu.nama_posyandu}
</span>
<div className="flex items-center gap-2 text-xs text-gray-500 font-semibold mt-1">
<Building2 className="w-3.5 h-3.5" />
<span className="line-clamp-1">{j.detail_posyandu.alamat}</span>
</div>
</div>
</td>
<td className="px-6 py-6">
<div className="flex items-center gap-3">
<div className={`w-8 h-8 rounded-full ${showHistory ? 'bg-purple-100' : 'bg-gray-100'} border-2 border-white shadow-sm flex items-center justify-center text-[10px] font-black group-hover:bg-red-100 transition-colors`}>
{j.diedit_oleh.replace('[HISTORY] ', '').charAt(0).toUpperCase()}
</div>
<span className="text-xs font-bold text-gray-700">{j.diedit_oleh.replace('[HISTORY] ', '')}</span>
</div>
</td>
<td className="px-6 py-6">
<div className="flex items-center justify-center gap-3">
<CetakPDFJadwal jadwal={j} currentAdmin={userName} />
<button
onClick={() => handleEditJadwal(j)}
className="p-2 text-gray-400 hover:text-black hover:bg-gray-100 rounded-lg transition-all"
title="Edit"
>
<Edit3 className="w-4 h-4" />
</button>
<button
onClick={() => handleDeleteJadwal(j.id, j.detail_posyandu.nama_posyandu)}
disabled={isDeleting === j.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 === j.id ? (
<Loader2 className="w-4 h-4 animate-spin" />
) : (
<Trash2 className="w-4 h-4" />
)}
</button>
</div>
</td>
<div className={`rounded-2xl border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-colors ${showHistory ? 'bg-slate-50' : 'bg-white'} overflow-hidden`}>
<div className="overflow-x-auto">
<div className="min-w-[1000px] md:min-w-full">
<table className="w-full text-left border-collapse">
<thead className={`${showHistory ? 'bg-purple-600' : 'bg-black'} text-white transition-colors`}>
<tr>
<th className="px-6 py-5 text-[10px] font-black uppercase tracking-widest text-center w-20">No</th>
<th className="px-6 py-5 text-[10px] font-black uppercase tracking-widest">Waktu & Sesi</th>
<th className="px-6 py-5 text-[10px] font-black uppercase tracking-widest">Detail Posyandu</th>
<th className="px-6 py-5 text-[10px] font-black uppercase tracking-widest">Oleh Admin</th>
<th className="px-6 py-5 text-[10px] font-black uppercase tracking-widest text-center">Aksi</th>
</tr>
))
)}
</tbody>
</table>
</thead>
<tbody className={`${showHistory ? 'bg-slate-50 divide-purple-100' : 'bg-white divide-gray-100'} divide-y-2`}>
{filteredData.length === 0 ? (
<tr>
<td colSpan={5} className="px-6 py-24 text-center">
<div className="flex flex-col items-center gap-4 text-gray-300">
<div className="p-4 bg-gray-50 rounded-full">
<Calendar className="w-12 h-12 opacity-20" />
</div>
<div className="flex flex-col gap-1">
<p className="font-black text-gray-400">Belum ada jadwal ditemukan</p>
<p className="text-xs font-semibold">Gunakan Penjadwalan Instan untuk membuat jadwal otomatis.</p>
</div>
</div>
</td>
</tr>
) : (
filteredData.map((j, idx) => (
<tr key={j.id} className={`${showHistory ? 'hover:bg-purple-100/50' : 'hover:bg-red-50/30'} transition-colors group`}>
<td className={`px-6 py-6 text-center font-black ${showHistory ? 'text-purple-300' : 'text-gray-300'} group-hover:text-red-300 text-lg`}>
{idx + 1}
</td>
<td className="px-6 py-6">
<div className="flex flex-col gap-1">
<div className={`flex items-center gap-2 ${showHistory ? 'text-purple-600' : 'text-red-600'} font-black`}>
<Clock className="w-4 h-4" />
<span className="text-lg">{j.jam_mulai.slice(0, 5)} - {j.jam_selesai.slice(0, 5)}</span>
</div>
<span className="text-[10px] font-bold uppercase text-gray-400 tracking-widest">
{new Date(j.tanggal).toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long' })}
</span>
</div>
</td>
<td className="px-6 py-6">
<div className="flex flex-col">
<span className={`font-black text-base ${showHistory ? 'text-purple-900' : 'text-gray-900'} group-hover:text-red-600 transition-colors uppercase tracking-tight`}>
{j.detail_posyandu.nama_posyandu}
</span>
<div className="flex items-center gap-2 text-xs text-gray-500 font-semibold mt-1">
<Building2 className="w-3.5 h-3.5" />
<span className="line-clamp-1">{j.detail_posyandu.alamat}</span>
</div>
</div>
</td>
<td className="px-6 py-6">
<div className="flex items-center gap-3">
<div className={`w-8 h-8 rounded-full ${showHistory ? 'bg-purple-100' : 'bg-gray-100'} border-2 border-white shadow-sm flex items-center justify-center text-[10px] font-black group-hover:bg-red-100 transition-colors`}>
{j.diedit_oleh.replace('[HISTORY] ', '').charAt(0).toUpperCase()}
</div>
<span className="text-xs font-bold text-gray-700">{j.diedit_oleh.replace('[HISTORY] ', '')}</span>
</div>
</td>
<td className="px-6 py-6">
<div className="flex items-center justify-center gap-3">
<CetakPDFJadwal jadwal={j} currentAdmin={userName} />
<button
onClick={() => handleEditJadwal(j)}
className="p-2 text-gray-400 hover:text-black hover:bg-gray-100 rounded-lg transition-all"
title="Edit"
>
<Edit3 className="w-4 h-4" />
</button>
<button
onClick={() => handleDeleteJadwal(j.id, j.detail_posyandu.nama_posyandu)}
disabled={isDeleting === j.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 === j.id ? (
<Loader2 className="w-4 h-4 animate-spin" />
) : (
<Trash2 className="w-4 h-4" />
)}
</button>
</div>
</td>
</tr>
))
)}
</tbody>
</table>
</div>
</div>
</div>
<InstantScheduleModal

134
app/dashboard/manajemen-akun/pengguna/page.tsx
View File

@ -64,72 +64,76 @@ export default async function KelolaAkunPenggunaPage() {
{/* Table */}
<div className="rounded-xl border-2 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] overflow-hidden">
{/* Table Header */}
<div className="grid grid-cols-[2fr_2fr_1.5fr_1.5fr_auto] bg-black text-white px-6 py-4 text-xs font-bold uppercase tracking-widest">
<span>Nama Orang Tua</span>
<span>Nama Anak</span>
<span>No. WhatsApp</span>
<span>Username</span>
<span className="text-center">Aksi</span>
</div>
{/* Table Rows */}
{!pengguna || pengguna.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 gap-3 text-gray-400">
<Users className="w-12 h-12 opacity-30" />
<p className="font-semibold">Belum ada pengguna terdaftar</p>
</div>
) : (
pengguna.map((user, idx) => (
<div
key={user.id}
className={`grid grid-cols-[2fr_2fr_1.5fr_1.5fr_auto] items-center px-6 py-4 border-b border-gray-100 hover:bg-gray-50 transition-colors ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'}`}
>
{/* Nama Orang Tua */}
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 text-xs font-bold flex-shrink-0">
{user.nama_orang_tua?.charAt(0).toUpperCase() ?? '?'}
</div>
<div>
<p className="font-semibold text-sm leading-none">{user.nama_orang_tua ?? '-'}</p>
<p className="text-[10px] text-gray-400 mt-0.5">
{user.created_at ? new Date(user.created_at).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' }) : '-'}
</p>
</div>
</div>
{/* Nama Anak */}
<div className="flex items-center gap-2">
<Baby className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />
<span className="text-sm truncate">{user.nama_anak ?? '-'}</span>
</div>
{/* No WA */}
<div className="flex items-center gap-2">
<Phone className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />
<span className="text-sm text-gray-600">{user.no_whatsapp ?? '-'}</span>
</div>
{/* Username */}
<div>
<span className="inline-block bg-gray-100 border border-gray-200 text-gray-700 text-xs font-mono px-2 py-1 rounded">
@{user.username}
</span>
</div>
{/* Aksi */}
<div className="flex justify-center">
<Link
href={`/dashboard/manajemen-akun/pengguna/${user.id}`}
className="flex items-center gap-1.5 px-4 py-2 bg-black text-white text-xs font-bold rounded-lg hover:bg-gray-800 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" />
Detail
</Link>
</div>
<div className="overflow-x-auto">
<div className="min-w-[800px] md:min-w-full">
{/* Table Header */}
<div className="grid grid-cols-[2fr_2fr_1.5fr_1.5fr_auto] bg-black text-white px-6 py-4 text-xs font-bold uppercase tracking-widest">
<span>Nama Orang Tua</span>
<span>Nama Anak</span>
<span>No. WhatsApp</span>
<span>Username</span>
<span className="text-center">Aksi</span>
</div>
))
)}
{/* Table Rows */}
{!pengguna || pengguna.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 gap-3 text-gray-400 bg-white">
<Users className="w-12 h-12 opacity-30" />
<p className="font-semibold">Belum ada pengguna terdaftar</p>
</div>
) : (
pengguna.map((user, idx) => (
<div
key={user.id}
className={`grid grid-cols-[2fr_2fr_1.5fr_1.5fr_auto] items-center px-6 py-4 border-b border-gray-100 hover:bg-gray-50 transition-colors ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'}`}
>
{/* Nama Orang Tua */}
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 text-xs font-bold flex-shrink-0">
{user.nama_orang_tua?.charAt(0).toUpperCase() ?? '?'}
</div>
<div>
<p className="font-semibold text-sm leading-none">{user.nama_orang_tua ?? '-'}</p>
<p className="text-[10px] text-gray-400 mt-0.5">
{user.created_at ? new Date(user.created_at).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' }) : '-'}
</p>
</div>
</div>
{/* Nama Anak */}
<div className="flex items-center gap-2">
<Baby className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />
<span className="text-sm truncate">{user.nama_anak ?? '-'}</span>
</div>
{/* No WA */}
<div className="flex items-center gap-2">
<Phone className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />
<span className="text-sm text-gray-600">{user.no_whatsapp ?? '-'}</span>
</div>
{/* Username */}
<div>
<span className="inline-block bg-gray-100 border border-gray-200 text-gray-700 text-xs font-mono px-2 py-1 rounded">
@{user.username}
</span>
</div>
{/* Aksi */}
<div className="flex justify-center">
<Link
href={`/dashboard/manajemen-akun/pengguna/${user.id}`}
className="flex items-center gap-1.5 px-4 py-2 bg-black text-white text-xs font-bold rounded-lg hover:bg-gray-800 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" />
Detail
</Link>
</div>
</div>
))
)}
</div>
</div>
</div>
{/* Footer note */}

238
app/dashboard/manajemen-posyandu/ManajemenPosyanduTable.tsx
View File

@ -96,124 +96,128 @@ export function ManajemenPosyanduTable({ data }: Props) {
</div>
{/* Table */}
<div className="overflow-hidden rounded-2xl border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
<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>
<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>
))
)}
</tbody>
</table>
</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 && (

6
app/dashboard/page.tsx
View File

@ -33,7 +33,7 @@ export default async function DashboardPage() {
return (
<div className="min-h-screen bg-white font-sans text-black flex flex-col">
{/* Header */}
<header className="flex justify-between items-center px-8 py-6 border-b border-gray-100">
<header className="flex justify-between items-center px-4 md:px-8 py-4 md:py-6 border-b border-gray-100">
<div className="flex items-center gap-3">
<div className="p-2 rounded-full border border-black flex items-center justify-center">
<Activity className="h-5 w-5 text-black" />
@ -46,12 +46,12 @@ export default async function DashboardPage() {
<LogoutButton />
</header>
<main className="p-8 max-w-6xl mx-auto">
<main className="p-4 md:p-8 max-w-6xl mx-auto w-full">
{/* Main Single Frame */}
<div className="bg-white rounded-xl border border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] overflow-hidden">
{/* Top Section - Welcome & Clock */}
<div className="p-8 border-b border-black flex flex-col md:flex-row justify-between items-start md:items-center">
<div className="p-6 md:p-8 border-b border-black flex flex-col md:flex-row justify-between items-start md:items-center">
<div>
<h2 className="text-2xl font-bold flex items-center gap-2 mb-2">
<Activity className="h-6 w-6" />

197
app/dashboard/trend-stunting/StuntingChart.tsx
View File

@ -240,45 +240,49 @@ export function StuntingChart({ data, availableYears }: Props) {
<p className="font-semibold text-gray-400">Tidak ada data untuk tahun {selectedYear}</p>
</div>
) : (
<ResponsiveContainer width="100%" height={320}>
{chartType === 'bar' ? (
<BarChart data={chartData} margin={{ top: 4, right: 8, left: -10, bottom: 0 }} barCategoryGap="30%">
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 600 }} axisLine={false} tickLine={false} />
<YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
<Tooltip content={<CustomTooltip />} />
<Legend
wrapperStyle={{ fontSize: 11, fontWeight: 600, paddingTop: 12 }}
formatter={(val) => val === 'stunting' ? 'Stunting' : 'Normal'}
/>
<Bar dataKey="stunting" fill="#ef4444" radius={[4, 4, 0, 0]} />
<Bar dataKey="normal" fill="#10b981" radius={[4, 4, 0, 0]} />
</BarChart>
) : (
<AreaChart data={chartData} margin={{ top: 4, right: 8, left: -10, bottom: 0 }}>
<defs>
<linearGradient id="stuntingGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#ef4444" stopOpacity={0.25} />
<stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
</linearGradient>
<linearGradient id="normalGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#10b981" stopOpacity={0.25} />
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 600 }} axisLine={false} tickLine={false} />
<YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
<Tooltip content={<CustomTooltip />} />
<Legend
wrapperStyle={{ fontSize: 11, fontWeight: 600, paddingTop: 12 }}
formatter={(val) => val === 'stunting' ? 'Stunting' : 'Normal'}
/>
<Area type="monotone" dataKey="normal" stroke="#10b981" strokeWidth={2.5} fill="url(#normalGrad)" dot={{ r: 4, fill: '#10b981' }} />
<Area type="monotone" dataKey="stunting" stroke="#ef4444" strokeWidth={2.5} fill="url(#stuntingGrad)" dot={{ r: 4, fill: '#ef4444' }} />
</AreaChart>
)}
</ResponsiveContainer>
<div className="overflow-x-auto pb-2 -mx-2 px-2">
<div className="min-w-[700px] md:min-w-full">
<ResponsiveContainer width="100%" height={350}>
{chartType === 'bar' ? (
<BarChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }} barCategoryGap="25%">
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 700 }} axisLine={false} tickLine={false} />
<YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#f8fafc' }} />
<Legend
wrapperStyle={{ fontSize: 12, fontWeight: 700, paddingTop: 20 }}
formatter={(val) => val === 'stunting' ? 'Stunting' : 'Normal'}
/>
<Bar dataKey="stunting" fill="#ef4444" radius={[4, 4, 0, 0]} />
<Bar dataKey="normal" fill="#10b981" radius={[4, 4, 0, 0]} />
</BarChart>
) : (
<AreaChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }}>
<defs>
<linearGradient id="stuntingGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#ef4444" stopOpacity={0.25} />
<stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
</linearGradient>
<linearGradient id="normalGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#10b981" stopOpacity={0.25} />
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 700 }} axisLine={false} tickLine={false} />
<YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
<Tooltip content={<CustomTooltip />} />
<Legend
wrapperStyle={{ fontSize: 12, fontWeight: 700, paddingTop: 20 }}
formatter={(val) => val === 'stunting' ? 'Stunting' : 'Normal'}
/>
<Area type="monotone" dataKey="normal" stroke="#10b981" strokeWidth={3} fill="url(#normalGrad)" dot={{ r: 4, fill: '#10b981', strokeWidth: 2, stroke: 'white' }} />
<Area type="monotone" dataKey="stunting" stroke="#ef4444" strokeWidth={3} fill="url(#stuntingGrad)" dot={{ r: 4, fill: '#ef4444', strokeWidth: 2, stroke: 'white' }} />
</AreaChart>
)}
</ResponsiveContainer>
</div>
</div>
)}
</div>
@ -295,63 +299,66 @@ export function StuntingChart({ data, availableYears }: Props) {
<p className="text-sm">Tidak ada data untuk ditampilkan</p>
</div>
) : (
<ResponsiveContainer width="100%" height={220}>
<LineChart data={chartData} margin={{ top: 8, right: 16, left: -10, bottom: 0 }}>
<defs>
<linearGradient id="prevalensiGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#f59e0b" stopOpacity={0.15} />
<stop offset="95%" stopColor="#f59e0b" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" stroke="#fde68a" />
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 600 }} axisLine={false} tickLine={false} />
<YAxis
tick={{ fontSize: 11 }}
axisLine={false}
tickLine={false}
tickFormatter={(v) => `${v}%`}
domain={[0, 100]}
/>
<Tooltip
content={({ active, payload, label }) => {
if (active && payload && payload.length) {
const val = payload[0]?.value as number
return (
<div className="bg-white border-2 border-amber-400 rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] px-4 py-3 text-sm">
<p className="font-bold text-black mb-1">{label}</p>
<div className="flex items-center gap-2">
<span className="w-2.5 h-2.5 rounded-full bg-amber-400 inline-block" />
<span>Prevalensi:</span>
<span className={`font-bold ${val >= 20 ? 'text-red-600' : 'text-emerald-600'}`}>{val}%</span>
</div>
<p className="text-[10px] text-gray-400 mt-1">
{val >= 20 ? '⚠️ Di atas ambang batas (20%)' : '✓ Di bawah ambang batas (20%)'}
</p>
</div>
)
}
return null
}}
/>
{/* Reference line 20% */}
<Line
type="monotone"
dataKey="prevalensi"
stroke="#f59e0b"
strokeWidth={3}
dot={({ cx, cy, payload }) => (
<circle
key={`dot-${payload.month}`}
cx={cx} cy={cy} r={5}
fill={payload.prevalensi >= 20 ? '#ef4444' : '#10b981'}
stroke="white"
strokeWidth={2}
<div className="overflow-x-auto pb-2 -mx-2 px-2">
<div className="min-w-[700px] md:min-w-full">
<ResponsiveContainer width="100%" height={260}>
<LineChart data={chartData} margin={{ top: 10, right: 20, left: -20, bottom: 0 }}>
<defs>
<linearGradient id="prevalensiGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#f59e0b" stopOpacity={0.15} />
<stop offset="95%" stopColor="#f59e0b" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#fde68a" />
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 700 }} axisLine={false} tickLine={false} />
<YAxis
tick={{ fontSize: 11 }}
axisLine={false}
tickLine={false}
tickFormatter={(v) => `${v}%`}
domain={[0, 100]}
/>
)}
activeDot={{ r: 7, stroke: '#f59e0b', strokeWidth: 2 }}
/>
</LineChart>
</ResponsiveContainer>
<Tooltip
content={({ active, payload, label }) => {
if (active && payload && payload.length) {
const val = payload[0]?.value as number
return (
<div className="bg-white border-2 border-amber-400 rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] px-4 py-3 text-sm">
<p className="font-bold text-black mb-1">{label} {selectedYear}</p>
<div className="flex items-center gap-2">
<span className="w-2.5 h-2.5 rounded-full bg-amber-400 inline-block" />
<span>Prevalensi:</span>
<span className={`font-bold ${val >= 20 ? 'text-red-600' : 'text-emerald-600'}`}>{val}%</span>
</div>
<p className="text-[10px] text-gray-400 mt-1 uppercase font-bold tracking-tight">
{val >= 20 ? '⚠️ Di atas ambang batas (20%)' : '✓ Di bawah ambang batas (20%)'}
</p>
</div>
)
}
return null
}}
/>
<Line
type="monotone"
dataKey="prevalensi"
stroke="#f59e0b"
strokeWidth={4}
dot={({ cx, cy, payload }) => (
<circle
key={`dot-${payload.month}`}
cx={cx} cy={cy} r={6}
fill={payload.prevalensi >= 20 ? '#ef4444' : '#10b981'}
stroke="white"
strokeWidth={2}
/>
)}
activeDot={{ r: 8, stroke: '#f59e0b', strokeWidth: 2 }}
/>
</LineChart>
</ResponsiveContainer>
</div>
</div>
)}
<p className="text-[10px] text-amber-500 mt-2 text-center">
● Merah = prevalensi ≥ 20% (tinggi) &nbsp;|&nbsp; ● Hijau = prevalensi &lt; 20% (aman)

12
app/page.tsx
View File

@ -28,7 +28,7 @@ export default function LoginPage() {
</div>
<h1 className="text-2xl font-bold tracking-tight">HealthPortal</h1>
</div>
<p className="text-gray-400 text-sm tracking-widest uppercase">SISTEM INFORMASI KESEHATAN</p>
</div>
<h2 className="text-4xl font-bold mb-8">Panduan Login</h2>
@ -84,8 +84,8 @@ export default function LoginPage() {
</div>
{/* Right Side - Login Form */}
<div className="w-full lg:w-1/2 bg-white text-black flex flex-col items-center justify-center p-8 relative">
<div className="w-full max-w-md bg-white p-8 rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] border border-gray-100 relative z-10 mb-10">
<div className="w-full lg:w-1/2 bg-white text-black flex flex-col items-center justify-center p-4 md:p-8 relative">
<div className="w-full max-w-md bg-white p-6 md:p-8 rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] border border-gray-100 relative z-10 mb-10">
{/* Decorative Elements for Card style */}
<div className="absolute top-0 left-0 w-full h-2 bg-black rounded-t-2xl"></div>
@ -169,11 +169,11 @@ export default function LoginPage() {
</form>
</div>
<div className="flex gap-6 text-xs font-bold text-gray-400 uppercase tracking-widest mt-auto mb-4">
<div className="flex flex-wrap justify-center gap-4 md:gap-6 text-xs font-bold text-gray-400 uppercase tracking-widest mt-auto mb-4 px-4 text-center">
<a href="#" className="hover:text-black transition-colors">Privasi</a>
<span className="text-gray-300">•</span>
<span className="hidden md:inline text-gray-300">•</span>
<a href="#" className="hover:text-black transition-colors">Ketentuan</a>
<span className="text-gray-300">•</span>
<span className="hidden md:inline text-gray-300">•</span>
<a href="#" className="hover:text-black transition-colors">Bantuan</a>
</div>
<div className="text-[10px] text-gray-300 mb-6">

81
app/user-dashboard/lokasi-posyandu/[id]/PosyanduDetailClient.tsx
View File

@ -1,7 +1,7 @@
'use client'
import { useState, useEffect } from 'react'
import { MapPin, Phone, User, ExternalLink, Map as MapIcon, Star, Send, Loader2, Building2 } from 'lucide-react'
import { MapPin, Phone, User, ExternalLink, Map as MapIcon, Star, Send, Loader2, Building2, Calendar, Clock } from 'lucide-react'
import { supabase } from '@/lib/supabase'
import { submitReview } from '../action-review'
import { showSwal } from '@/lib/swal'
@ -19,6 +19,12 @@ interface Posyandu {
nomor_hp: string | null
jabatan: string | null
}[]
jadwal?: {
id: string
tanggal: string
jam_mulai: string
jam_selesai: string
}[]
}
interface Review {
@ -119,6 +125,79 @@ export default function PosyanduDetailClient({ data, userId }: Props) {
</div>
</div>
{/* Jadwal Pelaksanaan Card */}
<div className="bg-white rounded-3xl border-2 border-black shadow-[8px_8px_0px_0px_rgba(239,68,68,0.2)] overflow-hidden">
<div className="p-6 border-b border-gray-100 flex items-center justify-between">
<h3 className="text-base font-black flex items-center gap-3 lowercase">
<Calendar className="w-5 h-5 text-red-600" />
Jadwal Pelaksanaan
</h3>
</div>
<div className="p-0">
<div className="overflow-x-auto">
<div className="min-w-[500px] md:min-w-full">
<table className="w-full text-left border-collapse">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-400">Hari / Tanggal</th>
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-400">Waktu</th>
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-400">Status</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100 italic">
{data.jadwal && data.jadwal.length > 0 ? (
data.jadwal.map((j) => {
const scheduleDate = new Date(j.tanggal)
const today = new Date()
today.setHours(0, 0, 0, 0)
const isUpcoming = scheduleDate >= today
return (
<tr key={j.id} className="hover:bg-gray-50 transition-colors">
<td className="px-6 py-4">
<div className="flex flex-col">
<span className="font-bold text-gray-900">
{scheduleDate.toLocaleDateString('id-ID', { weekday: 'long' })}
</span>
<span className="text-xs text-gray-500 font-semibold">
{scheduleDate.toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
</span>
</div>
</td>
<td className="px-6 py-4">
<div className="flex items-center gap-2 text-red-600 font-black">
<Clock className="w-3.5 h-3.5" />
<span className="text-sm">{j.jam_mulai.slice(0, 5)} - {j.jam_selesai.slice(0, 5)}</span>
</div>
</td>
<td className="px-6 py-4">
{isUpcoming ? (
<span className="px-2 py-1 bg-emerald-50 text-emerald-600 rounded text-[10px] font-black uppercase tracking-widest border border-emerald-100">
Mendatang
</span>
) : (
<span className="px-2 py-1 bg-gray-50 text-gray-400 rounded text-[10px] font-black uppercase tracking-widest border border-gray-100">
Selesai
</span>
)}
</td>
</tr>
)
})
) : (
<tr>
<td colSpan={3} className="px-6 py-10 text-center text-gray-400 italic text-xs font-semibold">
Belum ada jadwal pelaksanaan yang terdaftar.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
{/* Petugas Card */}
<div className="bg-white rounded-3xl border-2 border-black shadow-[8px_8px_0px_0px_rgba(147,51,234,0.3)] overflow-hidden">
<div className="p-6 border-b border-gray-100 flex items-center justify-between">

4
app/user-dashboard/lokasi-posyandu/[id]/page.tsx
View File

@ -23,9 +23,11 @@ export default async function PosyanduDetailPage({ params }: Props) {
.from('detail_posyandu')
.select(`
*,
petugas:petugas_posyandu_lokal(*)
petugas:petugas_posyandu_lokal(*),
jadwal:jadwal_posyandu(*)
`)
.eq('id', id)
.order('tanggal', { foreignTable: 'jadwal_posyandu', ascending: false })
.single()
if (error || !posyandu) {

6
app/user-dashboard/page.tsx
View File

@ -53,7 +53,7 @@ export default async function UserDashboardPage() {
return (
<div className="min-h-screen bg-white font-sans text-black flex flex-col">
{/* Header */}
<header className="flex justify-between items-center px-8 py-6 border-b border-gray-100">
<header className="flex justify-between items-center px-4 md:px-8 py-4 md:py-6 border-b border-gray-100">
<div className="flex items-center gap-3">
<div className="p-2 rounded-full border border-black flex items-center justify-center">
<Activity className="h-5 w-5 text-black" />
@ -66,12 +66,12 @@ export default async function UserDashboardPage() {
<LogoutButton />
</header>
<main className="p-8 max-w-6xl mx-auto">
<main className="p-4 md:p-8 max-w-6xl mx-auto w-full">
{/* Main Single Frame */}
<div className="bg-white rounded-xl border border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] overflow-hidden">
{/* Top Section - Welcome & Clock */}
<div className="p-8 border-b border-black flex flex-col md:flex-row justify-between items-start md:items-center">
<div className="p-6 md:p-8 border-b border-black flex flex-col md:flex-row justify-between items-start md:items-center">
<div>
<h2 className="text-2xl font-bold flex items-center gap-2 mb-2">
<Activity className="h-6 w-6" />

10
app/user-dashboard/perkembangan/page.tsx
View File

@ -97,7 +97,7 @@ export default async function UserPerkembanganPage() {
return (
<div className="min-h-screen bg-white font-sans text-black flex flex-col">
{/* Header */}
<header className="flex justify-between items-center px-8 py-6 border-b border-gray-100 bg-white">
<header className="flex justify-between items-center px-4 md:px-8 py-4 md:py-6 border-b border-gray-100 bg-white">
<div className="flex items-center gap-4">
<Link href="/user-dashboard" className="group flex items-center gap-2 text-sm font-bold hover:text-gray-600 transition-colors">
<div className="p-2.5 rounded-full border-2 border-black flex items-center justify-center group-hover:bg-black group-hover:text-white transition-all shadow-sm">
@ -114,10 +114,10 @@ export default async function UserPerkembanganPage() {
<LogoutButton />
</header>
<main className="p-8 max-w-6xl mx-auto flex-1 w-full flex flex-col gap-10">
<main className="p-4 md:p-8 max-w-6xl mx-auto flex-1 w-full flex flex-col gap-6 md:gap-10">
{/* Hero Profile Section */}
<section className="bg-black text-white rounded-3xl p-8 lg:p-10 flex flex-col lg:flex-row items-center lg:items-end justify-between gap-8 shadow-[12px_12px_0px_0px_rgba(0,0,0,0.1)] relative overflow-hidden">
<section className="bg-black text-white rounded-3xl p-6 md:p-8 lg:p-10 flex flex-col lg:flex-row items-center lg:items-end justify-between gap-8 shadow-[12px_12px_0px_0px_rgba(0,0,0,0.1)] relative overflow-hidden">
{/* Background Decorative Element */}
<div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -mr-32 -mt-32 blur-3xl pointer-events-none" />
@ -181,7 +181,7 @@ export default async function UserPerkembanganPage() {
{/* Chart Column */}
<div className="lg:col-span-8">
<div className="bg-white rounded-3xl border-2 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.05)] h-full">
<div className="bg-white rounded-3xl border-2 border-black p-4 md:p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.05)] h-full">
<GrowthChart data={hasilData ?? []} />
</div>
</div>
@ -190,7 +190,7 @@ export default async function UserPerkembanganPage() {
{/* Bottom Row: Full Width Table */}
<div className="flex flex-col gap-6">
<div className="bg-white rounded-3xl border-2 border-gray-100 p-1">
<div className="p-6 md:p-8">
<div className="p-4 md:p-8">
<StuntingTable data={hasilData ?? []} pengguna={pengguna} />
</div>
</div>

157
app/user-dashboard/trend-stunting/StuntingChart.tsx
View File

@ -210,39 +210,43 @@ export function StuntingChart({ data, availableYears }: Props) {
<p className="font-bold">Data belum tersedia untuk tahun {selectedYear}</p>
</div>
) : (
<ResponsiveContainer width="100%" height={320}>
{chartType === 'bar' ? (
<BarChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
<XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#f8fafc' }} />
<Legend wrapperStyle={{ paddingTop: 20, fontSize: 12, fontWeight: 800 }} iconType="circle" />
<Bar dataKey="stunting" name="Stunting" fill="#ef4444" radius={[4, 4, 0, 0]} />
<Bar dataKey="normal" name="Normal" fill="#10b981" radius={[4, 4, 0, 0]} />
</BarChart>
) : (
<AreaChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
<defs>
<linearGradient id="colorStunting" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#ef4444" stopOpacity={0.1} />
<stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
</linearGradient>
<linearGradient id="colorNormal" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#10b981" stopOpacity={0.1} />
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
<XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} />
<Tooltip content={<CustomTooltip />} />
<Legend wrapperStyle={{ paddingTop: 20, fontSize: 12, fontWeight: 800 }} iconType="circle" />
<Area type="monotone" dataKey="stunting" name="Stunting" stroke="#ef4444" strokeWidth={3} fillOpacity={1} fill="url(#colorStunting)" />
<Area type="monotone" dataKey="normal" name="Normal" stroke="#10b981" strokeWidth={3} fillOpacity={1} fill="url(#colorNormal)" />
</AreaChart>
)}
</ResponsiveContainer>
<div className="overflow-x-auto pb-2 -mx-2 px-2">
<div className="min-w-[700px] md:min-w-full">
<ResponsiveContainer width="100%" height={350}>
{chartType === 'bar' ? (
<BarChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
<XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#f8fafc' }} />
<Legend wrapperStyle={{ paddingTop: 20, fontSize: 12, fontWeight: 800 }} iconType="circle" />
<Bar dataKey="stunting" name="Stunting" fill="#ef4444" radius={[4, 4, 0, 0]} />
<Bar dataKey="normal" name="Normal" fill="#10b981" radius={[4, 4, 0, 0]} />
</BarChart>
) : (
<AreaChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }}>
<defs>
<linearGradient id="colorStunting" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#ef4444" stopOpacity={0.1} />
<stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
</linearGradient>
<linearGradient id="colorNormal" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#10b981" stopOpacity={0.1} />
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
<XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} />
<Tooltip content={<CustomTooltip />} />
<Legend wrapperStyle={{ paddingTop: 20, fontSize: 12, fontWeight: 800 }} iconType="circle" />
<Area type="monotone" dataKey="stunting" name="Stunting" stroke="#ef4444" strokeWidth={3} fillOpacity={1} fill="url(#colorStunting)" dot={{ r: 4, fill: '#ef4444', strokeWidth: 2, stroke: 'white' }} />
<Area type="monotone" dataKey="normal" name="Normal" stroke="#10b981" strokeWidth={3} fillOpacity={1} fill="url(#colorNormal)" dot={{ r: 4, fill: '#10b981', strokeWidth: 2, stroke: 'white' }} />
</AreaChart>
)}
</ResponsiveContainer>
</div>
</div>
)}
</div>
@ -258,48 +262,53 @@ export function StuntingChart({ data, availableYears }: Props) {
<p className="text-sm font-bold opacity-30">Belum ada data prevalensi</p>
</div>
) : (
<ResponsiveContainer width="100%" height={240}>
<LineChart data={chartData} margin={{ top: 10, right: 20, left: -20, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#fef3c7" />
<XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} domain={[0, 100]} />
<Tooltip
content={({ active, payload, label }) => {
if (active && payload && payload.length) {
const val = payload[0].value as number
return (
<div className="bg-white border-2 border-amber-500 rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] px-4 py-3 text-sm">
<p className="font-black text-black mb-1">{label} {selectedYear}</p>
<div className="flex items-center gap-2">
<span className={`w-3 h-3 rounded-full ${val >= 20 ? 'bg-red-500' : 'bg-emerald-500'}`} />
<span className="font-black text-lg">{val}%</span>
</div>
<p className="text-[10px] font-bold mt-1 uppercase tracking-tight">
{val >= 20 ? '🛑 Tinggi' : '✅ Aman'}
</p>
</div>
)
}
return null
}}
/>
<Line
type="monotone"
dataKey="prevalensi"
stroke="#f59e0b"
strokeWidth={4}
dot={({ cx, cy, payload }) => (
<circle
key={`dot-${payload.month}`}
cx={cx} cy={cy} r={6}
fill={payload.prevalensi >= 20 ? '#ef4444' : '#10b981'}
stroke="white"
strokeWidth={2}
<div className="overflow-x-auto pb-2 -mx-2 px-2">
<div className="min-w-[700px] md:min-w-full">
<ResponsiveContainer width="100%" height={260}>
<LineChart data={chartData} margin={{ top: 10, right: 20, left: -20, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#fef3c7" />
<XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} domain={[0, 100]} />
<Tooltip
content={({ active, payload, label }) => {
if (active && payload && payload.length) {
const val = payload[0].value as number
return (
<div className="bg-white border-2 border-amber-500 rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] px-4 py-3 text-sm">
<p className="font-black text-black mb-1">{label} {selectedYear}</p>
<div className="flex items-center gap-2">
<span className={`w-3 h-3 rounded-full ${val >= 20 ? 'bg-red-500' : 'bg-emerald-500'}`} />
<span className="font-black text-lg">{val}%</span>
</div>
<p className="text-[10px] font-bold mt-1 uppercase tracking-tight">
{val >= 20 ? '🛑 Tinggi' : '✅ Aman'}
</p>
</div>
)
}
return null
}}
/>
)}
/>
</LineChart>
</ResponsiveContainer>
<Line
type="monotone"
dataKey="prevalensi"
stroke="#f59e0b"
strokeWidth={4}
dot={({ cx, cy, payload }) => (
<circle
key={`dot-${payload.month}`}
cx={cx} cy={cy} r={6}
fill={payload.prevalensi >= 20 ? '#ef4444' : '#10b981'}
stroke="white"
strokeWidth={2}
/>
)}
activeDot={{ r: 8, stroke: '#f59e0b', strokeWidth: 2 }}
/>
</LineChart>
</ResponsiveContainer>
</div>
</div>
)}
</div>
</div>

2
components/dashboard-footer.tsx
View File

@ -11,7 +11,7 @@ export function DashboardFooter() {
}
return (
<footer className="bg-black text-white py-8 px-8 mt-auto w-full">
<footer className="bg-black text-white py-6 md:py-8 px-4 md:px-8 mt-auto w-full">
<div className="max-w-6xl mx-auto flex flex-col items-center gap-4 text-center">
<div className="flex flex-col items-center gap-2">

8
components/feature-card.tsx
View File

@ -36,13 +36,13 @@ export function FeatureCard({ title, description, icon: Icon, href, color, class
colorStyles[color]
)}>
<div className="flex flex-col items-center text-center h-full">
<div className={cn("w-16 h-16 rounded-full flex items-center justify-center mb-4 border-2 transition-transform group-hover:scale-110", iconBgStyles[color])}>
<Icon className="w-8 h-8" />
<div className={cn("w-12 h-12 sm:w-16 sm:h-16 rounded-full flex items-center justify-center mb-4 border-2 transition-transform group-hover:scale-110", iconBgStyles[color])}>
<Icon className="w-6 h-6 sm:w-8 sm:h-8" />
</div>
<h3 className="text-xl font-bold mb-2 text-black">{title}</h3>
<h3 className="text-lg sm:text-xl font-bold mb-2 text-black">{title}</h3>
{description && (
<p className="text-gray-500 text-sm leading-relaxed">{description}</p>
<p className="text-gray-500 text-xs sm:text-sm leading-relaxed">{description}</p>
)}
</div>
</div>