194 lines
10 KiB
TypeScript
194 lines
10 KiB
TypeScript
import { cookies } from 'next/headers'
|
|
import { redirect } from 'next/navigation'
|
|
import { supabase } from '@/lib/supabase'
|
|
import { LogoutButton } from '@/components/logout-button'
|
|
import { RealtimeClock } from '@/components/realtime-clock'
|
|
import { FeatureCard } from '@/components/feature-card'
|
|
import { Activity, User, Phone, MapPin, Baby, Calendar, UserCheck } from 'lucide-react'
|
|
import { Users, TrendingUp, ClipboardList, Building2 } from 'lucide-react' // Icons for feature cards
|
|
|
|
export default async function UserDashboardPage() {
|
|
const cookieStore = await cookies()
|
|
const sessionCookie = cookieStore.get('user_session')
|
|
|
|
if (!sessionCookie) {
|
|
redirect('/')
|
|
}
|
|
|
|
const session = JSON.parse(sessionCookie.value)
|
|
|
|
if (session.role !== 'user') {
|
|
redirect('/dashboard')
|
|
}
|
|
|
|
// Fetch User Data from akun_balita
|
|
const { data: userResult, error } = await supabase
|
|
.from('akun_balita')
|
|
.select('*')
|
|
.eq('id', session.id)
|
|
.single()
|
|
|
|
if (error || !userResult) {
|
|
return <div>Error loading profile.</div>
|
|
}
|
|
|
|
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">
|
|
<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" />
|
|
</div>
|
|
<div className="flex flex-col justify-center">
|
|
<h1 className="text-xl font-bold leading-none">HealthPortal</h1>
|
|
<p className="text-[10px] text-gray-500 tracking-widest uppercase mt-0.5">USER DASHBOARD</p>
|
|
</div>
|
|
</div>
|
|
<LogoutButton />
|
|
</header>
|
|
|
|
<main className="p-8 max-w-6xl mx-auto">
|
|
{/* 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>
|
|
<h2 className="text-2xl font-bold flex items-center gap-2 mb-2">
|
|
<Activity className="h-6 w-6" />
|
|
Selamat Datang!
|
|
</h2>
|
|
<p className="text-gray-600">
|
|
Bunda <span className="font-bold text-black">{userResult.nama_orang_tua}</span>
|
|
</p>
|
|
|
|
</div>
|
|
<div className="mt-6 md:mt-0">
|
|
<RealtimeClock />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Section - Details Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
|
|
|
{/* Nama Orang Tua */}
|
|
<div className="p-6 border-b md:border-b-0 md:border-r border-black flex flex-col gap-2">
|
|
<div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
|
|
<User className="h-3 w-3" />
|
|
Nama Orang Tua
|
|
</div>
|
|
<div className="text-lg font-bold">{userResult.nama_orang_tua}</div>
|
|
</div>
|
|
|
|
{/* Alamat */}
|
|
<div className="p-6 border-b md:border-b-0 md:border-r border-black flex flex-col gap-2">
|
|
<div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
|
|
<MapPin className="h-3 w-3" />
|
|
Alamat
|
|
</div>
|
|
<div className="text-lg font-bold">{userResult.alamat || '-'}</div>
|
|
</div>
|
|
|
|
{/* No WhatsApp */}
|
|
<div className="p-6 border-b md:border-b-0 border-black flex flex-col gap-2">
|
|
<div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
|
|
<Phone className="h-3 w-3" />
|
|
No WhatsApp
|
|
</div>
|
|
<div className="text-lg font-bold">{userResult.no_whatsapp || userResult.no_telp || '-'}</div>
|
|
</div>
|
|
|
|
{/* Nama Anak (New Row in LG) */}
|
|
<div className="p-6 border-b md:border-b-0 md:border-r border-black border-t flex flex-col gap-2">
|
|
<div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
|
|
<Baby className="h-3 w-3" />
|
|
Nama Anak
|
|
</div>
|
|
<div className="text-lg font-bold">{userResult.nama_anak}</div>
|
|
</div>
|
|
|
|
{/* Jenis Kelamin Anak */}
|
|
<div className="p-6 border-b md:border-b-0 md:border-r border-black border-t flex flex-col gap-2">
|
|
<div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
|
|
<UserCheck className="h-3 w-3" />
|
|
Jenis Kelamin
|
|
</div>
|
|
<div className="text-lg font-bold">{userResult.jenis_kelamin || userResult.jenis_kelamin_anak || '-'}</div>
|
|
</div>
|
|
|
|
{/* Tanggal Lahir */}
|
|
<div className="p-6 border-black border-t flex flex-col gap-2">
|
|
<div className="flex items-center gap-2 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
|
|
<Calendar className="h-3 w-3" />
|
|
Tanggal Lahir
|
|
</div>
|
|
<div className="text-lg font-bold">{userResult.tanggal_lahir || '-'}</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Feature Menu Grid - Placeholder/Same as Admin for now as requested "Same Page" */}
|
|
{/* User usually doesn't manage account same way, but let's keep visual consistency.
|
|
However, "Input Data" doesn't make sense for user.
|
|
I will render a simplified list or maybe "Riwayat" cards.
|
|
But user said "halamannya sama kayak dashboard role 1". I will render the same cards but maybe just visual.
|
|
Actually, if I render buttons that don't work/link to admin pages, it's bad UX.
|
|
I'll render them but maybe change titles to "Riwayat..." if I can guess.
|
|
Refusing to guess: I will render the *layout* but maybe with generic or restricted options.
|
|
Wait, "halaman nya sama kayak dashboard role 1" might mean exact same features?
|
|
Role 1 is Admin. Role 2 is User.
|
|
If I give User "Kelola Data", they can't effectively do it (backend should block).
|
|
I will stick to the safer option: Render the same cards (visual) but maybe point to # or generic user pages.
|
|
Actually, better to show "Riwayat Pemeriksaan", "Kartu Menuju Sehat", etc.
|
|
BUT, I will follow the "same like dashboard role 1" instruction literally for the *Structure* but I'll try to keep the *Cards* if the user implies that.
|
|
The user specifically listed the fields for the top part.
|
|
I'll render the same cards. If they are admin features, so be it (they will likely fail or redirect if clicked).
|
|
Actually, I'll comment them out or replace with "Menu Pengguna" placeholders to avoid confusion?
|
|
No, "User Dashboard" implies user specific features.
|
|
I'll add 3 generic user cards to match the grid look.
|
|
*/}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
|
|
{/* 1. Trend & Statistik Stunting */}
|
|
<FeatureCard
|
|
title="Trend & Statistik Stunting"
|
|
description="Lihat data statistik dan trend stunting di wilayah anda."
|
|
icon={TrendingUp}
|
|
href="#"
|
|
color="blue"
|
|
/>
|
|
|
|
{/* 2. Perkembangan Balita */}
|
|
<FeatureCard
|
|
title="Perkembangan Balita"
|
|
description="Pantau grafik pertumbuhan dan perkembangan anak."
|
|
icon={Baby}
|
|
href="#"
|
|
color="green"
|
|
/>
|
|
|
|
{/* 3. Lokasi Posyandu */}
|
|
<FeatureCard
|
|
title="Lokasi Posyandu"
|
|
description="Temukan lokasi posyandu terdekat dan jadwal kegiatan."
|
|
icon={MapPin}
|
|
href="#"
|
|
color="orange"
|
|
/>
|
|
|
|
{/* 4. Artikel Stunting */}
|
|
<FeatureCard
|
|
title="Artikel Stunting"
|
|
description="Baca artikel dan informasi edukasi pencegahan stunting."
|
|
icon={ClipboardList}
|
|
href="#"
|
|
color="purple"
|
|
/>
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
)
|
|
}
|