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"> <form action={formAction} className="p-6 flex flex-col gap-5">
<input type="hidden" name="edited_by" value={adminName} /> <input type="hidden" name="edited_by" value={adminName} />
<input type="hidden" name="jam_mulai" value="08:00" /> <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"> <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" /> <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. Penjadwalan harus dilakukan minimal 1 hari sebelumnya.
</p> </p>
<p className="text-[10px] text-blue-800 leading-relaxed font-bold uppercase tracking-tight"> <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> </p>
</div> </div>
</div> </div>
@ -104,7 +104,7 @@ export function InstantScheduleModal({ isOpen, onClose, adminName }: Props) {
</div> </div>
<div className="h-0.5 w-4 bg-gray-300"></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"> <div className="px-3 py-1.5 bg-black text-white text-sm font-black rounded-lg">
11:00 10:00
</div> </div>
<span className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-auto">Fixed Slot</span> <span className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-auto">Fixed Slot</span>
</div> </div>

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

@ -222,7 +222,9 @@ export function JadwalTable({ data, userName }: Props) {
</div> </div>
{/* Table */} {/* 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'}`}> <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"> <table className="w-full text-left border-collapse">
<thead className={`${showHistory ? 'bg-purple-600' : 'bg-black'} text-white transition-colors`}> <thead className={`${showHistory ? 'bg-purple-600' : 'bg-black'} text-white transition-colors`}>
<tr> <tr>
@ -314,6 +316,8 @@ export function JadwalTable({ data, userName }: Props) {
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</div>
<InstantScheduleModal <InstantScheduleModal
isOpen={isInstantModalOpen} isOpen={isInstantModalOpen}

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

@ -64,6 +64,8 @@ export default async function KelolaAkunPenggunaPage() {
{/* Table */} {/* Table */}
<div className="rounded-xl border-2 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] overflow-hidden"> <div className="rounded-xl border-2 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] overflow-hidden">
<div className="overflow-x-auto">
<div className="min-w-[800px] md:min-w-full">
{/* Table Header */} {/* 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"> <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 Orang Tua</span>
@ -75,7 +77,7 @@ export default async function KelolaAkunPenggunaPage() {
{/* Table Rows */} {/* Table Rows */}
{!pengguna || pengguna.length === 0 ? ( {!pengguna || pengguna.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 gap-3 text-gray-400"> <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" /> <Users className="w-12 h-12 opacity-30" />
<p className="font-semibold">Belum ada pengguna terdaftar</p> <p className="font-semibold">Belum ada pengguna terdaftar</p>
</div> </div>
@ -131,6 +133,8 @@ export default async function KelolaAkunPenggunaPage() {
)) ))
)} )}
</div> </div>
</div>
</div>
{/* Footer note */} {/* Footer note */}
<p className="text-xs text-gray-400 text-center mt-4"> <p className="text-xs text-gray-400 text-center mt-4">

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

@ -96,7 +96,9 @@ export function ManajemenPosyanduTable({ data }: Props) {
</div> </div>
{/* Table */} {/* Table */}
<div className="overflow-hidden rounded-2xl border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]"> <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"> <table className="w-full text-left border-collapse">
<thead className="bg-black text-white"> <thead className="bg-black text-white">
<tr> <tr>
@ -215,6 +217,8 @@ export function ManajemenPosyanduTable({ data }: Props) {
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</div>
{isModalOpen && ( {isModalOpen && (
<PosyanduFormModal <PosyanduFormModal

6
app/dashboard/page.tsx
View File

@ -33,7 +33,7 @@ export default async function DashboardPage() {
return ( return (
<div className="min-h-screen bg-white font-sans text-black flex flex-col"> <div className="min-h-screen bg-white font-sans text-black flex flex-col">
{/* Header */} {/* 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="flex items-center gap-3">
<div className="p-2 rounded-full border border-black flex items-center justify-center"> <div className="p-2 rounded-full border border-black flex items-center justify-center">
<Activity className="h-5 w-5 text-black" /> <Activity className="h-5 w-5 text-black" />
@ -46,12 +46,12 @@ export default async function DashboardPage() {
<LogoutButton /> <LogoutButton />
</header> </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 */} {/* Main Single Frame */}
<div className="bg-white rounded-xl border border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] overflow-hidden"> <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 */} {/* 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> <div>
<h2 className="text-2xl font-bold flex items-center gap-2 mb-2"> <h2 className="text-2xl font-bold flex items-center gap-2 mb-2">
<Activity className="h-6 w-6" /> <Activity className="h-6 w-6" />

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

@ -240,22 +240,24 @@ export function StuntingChart({ data, availableYears }: Props) {
<p className="font-semibold text-gray-400">Tidak ada data untuk tahun {selectedYear}</p> <p className="font-semibold text-gray-400">Tidak ada data untuk tahun {selectedYear}</p>
</div> </div>
) : ( ) : (
<ResponsiveContainer width="100%" height={320}> <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' ? ( {chartType === 'bar' ? (
<BarChart data={chartData} margin={{ top: 4, right: 8, left: -10, bottom: 0 }} barCategoryGap="30%"> <BarChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }} barCategoryGap="25%">
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" /> <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 600 }} axisLine={false} tickLine={false} /> <XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 700 }} axisLine={false} tickLine={false} />
<YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} /> <YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip />} cursor={{ fill: '#f8fafc' }} />
<Legend <Legend
wrapperStyle={{ fontSize: 11, fontWeight: 600, paddingTop: 12 }} wrapperStyle={{ fontSize: 12, fontWeight: 700, paddingTop: 20 }}
formatter={(val) => val === 'stunting' ? 'Stunting' : 'Normal'} formatter={(val) => val === 'stunting' ? 'Stunting' : 'Normal'}
/> />
<Bar dataKey="stunting" fill="#ef4444" radius={[4, 4, 0, 0]} /> <Bar dataKey="stunting" fill="#ef4444" radius={[4, 4, 0, 0]} />
<Bar dataKey="normal" fill="#10b981" radius={[4, 4, 0, 0]} /> <Bar dataKey="normal" fill="#10b981" radius={[4, 4, 0, 0]} />
</BarChart> </BarChart>
) : ( ) : (
<AreaChart data={chartData} margin={{ top: 4, right: 8, left: -10, bottom: 0 }}> <AreaChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }}>
<defs> <defs>
<linearGradient id="stuntingGrad" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="stuntingGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#ef4444" stopOpacity={0.25} /> <stop offset="5%" stopColor="#ef4444" stopOpacity={0.25} />
@ -266,19 +268,21 @@ export function StuntingChart({ data, availableYears }: Props) {
<stop offset="95%" stopColor="#10b981" stopOpacity={0} /> <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
</linearGradient> </linearGradient>
</defs> </defs>
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" /> <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 600 }} axisLine={false} tickLine={false} /> <XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 700 }} axisLine={false} tickLine={false} />
<YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} /> <YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip />} />
<Legend <Legend
wrapperStyle={{ fontSize: 11, fontWeight: 600, paddingTop: 12 }} wrapperStyle={{ fontSize: 12, fontWeight: 700, paddingTop: 20 }}
formatter={(val) => val === 'stunting' ? 'Stunting' : 'Normal'} 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="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={2.5} fill="url(#stuntingGrad)" dot={{ r: 4, fill: '#ef4444' }} /> <Area type="monotone" dataKey="stunting" stroke="#ef4444" strokeWidth={3} fill="url(#stuntingGrad)" dot={{ r: 4, fill: '#ef4444', strokeWidth: 2, stroke: 'white' }} />
</AreaChart> </AreaChart>
)} )}
</ResponsiveContainer> </ResponsiveContainer>
</div>
</div>
)} )}
</div> </div>
@ -295,16 +299,18 @@ export function StuntingChart({ data, availableYears }: Props) {
<p className="text-sm">Tidak ada data untuk ditampilkan</p> <p className="text-sm">Tidak ada data untuk ditampilkan</p>
</div> </div>
) : ( ) : (
<ResponsiveContainer width="100%" height={220}> <div className="overflow-x-auto pb-2 -mx-2 px-2">
<LineChart data={chartData} margin={{ top: 8, right: 16, left: -10, bottom: 0 }}> <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> <defs>
<linearGradient id="prevalensiGrad" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="prevalensiGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#f59e0b" stopOpacity={0.15} /> <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.15} />
<stop offset="95%" stopColor="#f59e0b" stopOpacity={0} /> <stop offset="95%" stopColor="#f59e0b" stopOpacity={0} />
</linearGradient> </linearGradient>
</defs> </defs>
<CartesianGrid strokeDasharray="3 3" stroke="#fde68a" /> <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#fde68a" />
<XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 600 }} axisLine={false} tickLine={false} /> <XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 700 }} axisLine={false} tickLine={false} />
<YAxis <YAxis
tick={{ fontSize: 11 }} tick={{ fontSize: 11 }}
axisLine={false} axisLine={false}
@ -318,13 +324,13 @@ export function StuntingChart({ data, availableYears }: Props) {
const val = payload[0]?.value as number const val = payload[0]?.value as number
return ( 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"> <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> <p className="font-bold text-black mb-1">{label} {selectedYear}</p>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="w-2.5 h-2.5 rounded-full bg-amber-400 inline-block" /> <span className="w-2.5 h-2.5 rounded-full bg-amber-400 inline-block" />
<span>Prevalensi:</span> <span>Prevalensi:</span>
<span className={`font-bold ${val >= 20 ? 'text-red-600' : 'text-emerald-600'}`}>{val}%</span> <span className={`font-bold ${val >= 20 ? 'text-red-600' : 'text-emerald-600'}`}>{val}%</span>
</div> </div>
<p className="text-[10px] text-gray-400 mt-1"> <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%)'} {val >= 20 ? '⚠️ Di atas ambang batas (20%)' : '✓ Di bawah ambang batas (20%)'}
</p> </p>
</div> </div>
@ -333,25 +339,26 @@ export function StuntingChart({ data, availableYears }: Props) {
return null return null
}} }}
/> />
{/* Reference line 20% */}
<Line <Line
type="monotone" type="monotone"
dataKey="prevalensi" dataKey="prevalensi"
stroke="#f59e0b" stroke="#f59e0b"
strokeWidth={3} strokeWidth={4}
dot={({ cx, cy, payload }) => ( dot={({ cx, cy, payload }) => (
<circle <circle
key={`dot-${payload.month}`} key={`dot-${payload.month}`}
cx={cx} cy={cy} r={5} cx={cx} cy={cy} r={6}
fill={payload.prevalensi >= 20 ? '#ef4444' : '#10b981'} fill={payload.prevalensi >= 20 ? '#ef4444' : '#10b981'}
stroke="white" stroke="white"
strokeWidth={2} strokeWidth={2}
/> />
)} )}
activeDot={{ r: 7, stroke: '#f59e0b', strokeWidth: 2 }} activeDot={{ r: 8, stroke: '#f59e0b', strokeWidth: 2 }}
/> />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</div>
</div>
)} )}
<p className="text-[10px] text-amber-500 mt-2 text-center"> <p className="text-[10px] text-amber-500 mt-2 text-center">
● Merah = prevalensi ≥ 20% (tinggi) &nbsp;|&nbsp; ● Hijau = prevalensi &lt; 20% (aman) ● 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> </div>
<h1 className="text-2xl font-bold tracking-tight">HealthPortal</h1> <h1 className="text-2xl font-bold tracking-tight">HealthPortal</h1>
</div> </div>
<p className="text-gray-400 text-sm tracking-widest uppercase">SISTEM INFORMASI KESEHATAN</p>
</div> </div>
<h2 className="text-4xl font-bold mb-8">Panduan Login</h2> <h2 className="text-4xl font-bold mb-8">Panduan Login</h2>
@ -84,8 +84,8 @@ export default function LoginPage() {
</div> </div>
{/* Right Side - Login Form */} {/* 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 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-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 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 */} {/* Decorative Elements for Card style */}
<div className="absolute top-0 left-0 w-full h-2 bg-black rounded-t-2xl"></div> <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> </form>
</div> </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> <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> <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> <a href="#" className="hover:text-black transition-colors">Bantuan</a>
</div> </div>
<div className="text-[10px] text-gray-300 mb-6"> <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' 'use client'
import { useState, useEffect } from 'react' 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 { supabase } from '@/lib/supabase'
import { submitReview } from '../action-review' import { submitReview } from '../action-review'
import { showSwal } from '@/lib/swal' import { showSwal } from '@/lib/swal'
@ -19,6 +19,12 @@ interface Posyandu {
nomor_hp: string | null nomor_hp: string | null
jabatan: string | null jabatan: string | null
}[] }[]
jadwal?: {
id: string
tanggal: string
jam_mulai: string
jam_selesai: string
}[]
} }
interface Review { interface Review {
@ -119,6 +125,79 @@ export default function PosyanduDetailClient({ data, userId }: Props) {
</div> </div>
</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 */} {/* 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="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"> <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') .from('detail_posyandu')
.select(` .select(`
*, *,
petugas:petugas_posyandu_lokal(*) petugas:petugas_posyandu_lokal(*),
jadwal:jadwal_posyandu(*)
`) `)
.eq('id', id) .eq('id', id)
.order('tanggal', { foreignTable: 'jadwal_posyandu', ascending: false })
.single() .single()
if (error || !posyandu) { if (error || !posyandu) {

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

@ -53,7 +53,7 @@ export default async function UserDashboardPage() {
return ( return (
<div className="min-h-screen bg-white font-sans text-black flex flex-col"> <div className="min-h-screen bg-white font-sans text-black flex flex-col">
{/* Header */} {/* 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="flex items-center gap-3">
<div className="p-2 rounded-full border border-black flex items-center justify-center"> <div className="p-2 rounded-full border border-black flex items-center justify-center">
<Activity className="h-5 w-5 text-black" /> <Activity className="h-5 w-5 text-black" />
@ -66,12 +66,12 @@ export default async function UserDashboardPage() {
<LogoutButton /> <LogoutButton />
</header> </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 */} {/* Main Single Frame */}
<div className="bg-white rounded-xl border border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] overflow-hidden"> <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 */} {/* 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> <div>
<h2 className="text-2xl font-bold flex items-center gap-2 mb-2"> <h2 className="text-2xl font-bold flex items-center gap-2 mb-2">
<Activity className="h-6 w-6" /> <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 ( return (
<div className="min-h-screen bg-white font-sans text-black flex flex-col"> <div className="min-h-screen bg-white font-sans text-black flex flex-col">
{/* Header */} {/* 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"> <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"> <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"> <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 /> <LogoutButton />
</header> </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 */} {/* 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 */} {/* 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" /> <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 */} {/* Chart Column */}
<div className="lg:col-span-8"> <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 ?? []} /> <GrowthChart data={hasilData ?? []} />
</div> </div>
</div> </div>
@ -190,7 +190,7 @@ export default async function UserPerkembanganPage() {
{/* Bottom Row: Full Width Table */} {/* Bottom Row: Full Width Table */}
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<div className="bg-white rounded-3xl border-2 border-gray-100 p-1"> <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} /> <StuntingTable data={hasilData ?? []} pengguna={pengguna} />
</div> </div>
</div> </div>

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

@ -210,9 +210,11 @@ export function StuntingChart({ data, availableYears }: Props) {
<p className="font-bold">Data belum tersedia untuk tahun {selectedYear}</p> <p className="font-bold">Data belum tersedia untuk tahun {selectedYear}</p>
</div> </div>
) : ( ) : (
<ResponsiveContainer width="100%" height={320}> <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' ? ( {chartType === 'bar' ? (
<BarChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}> <BarChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" /> <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
<XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} /> <XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} /> <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} />
@ -222,7 +224,7 @@ export function StuntingChart({ data, availableYears }: Props) {
<Bar dataKey="normal" name="Normal" fill="#10b981" radius={[4, 4, 0, 0]} /> <Bar dataKey="normal" name="Normal" fill="#10b981" radius={[4, 4, 0, 0]} />
</BarChart> </BarChart>
) : ( ) : (
<AreaChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}> <AreaChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }}>
<defs> <defs>
<linearGradient id="colorStunting" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="colorStunting" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#ef4444" stopOpacity={0.1} /> <stop offset="5%" stopColor="#ef4444" stopOpacity={0.1} />
@ -238,11 +240,13 @@ export function StuntingChart({ data, availableYears }: Props) {
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} /> <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} />
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip />} />
<Legend wrapperStyle={{ paddingTop: 20, fontSize: 12, fontWeight: 800 }} iconType="circle" /> <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="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)" /> <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> </AreaChart>
)} )}
</ResponsiveContainer> </ResponsiveContainer>
</div>
</div>
)} )}
</div> </div>
@ -258,7 +262,9 @@ export function StuntingChart({ data, availableYears }: Props) {
<p className="text-sm font-bold opacity-30">Belum ada data prevalensi</p> <p className="text-sm font-bold opacity-30">Belum ada data prevalensi</p>
</div> </div>
) : ( ) : (
<ResponsiveContainer width="100%" height={240}> <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 }}> <LineChart data={chartData} margin={{ top: 10, right: 20, left: -20, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#fef3c7" /> <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#fef3c7" />
<XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} /> <XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
@ -297,9 +303,12 @@ export function StuntingChart({ data, availableYears }: Props) {
strokeWidth={2} strokeWidth={2}
/> />
)} )}
activeDot={{ r: 8, stroke: '#f59e0b', strokeWidth: 2 }}
/> />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</div>
</div>
)} )}
</div> </div>
</div> </div>

2
components/dashboard-footer.tsx
View File

@ -11,7 +11,7 @@ export function DashboardFooter() {
} }
return ( 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="max-w-6xl mx-auto flex flex-col items-center gap-4 text-center">
<div className="flex flex-col items-center gap-2"> <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] colorStyles[color]
)}> )}>
<div className="flex flex-col items-center text-center h-full"> <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])}> <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-8 h-8" /> <Icon className="w-6 h-6 sm:w-8 sm:h-8" />
</div> </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 && ( {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>
</div> </div>