import { Head, Link } from '@inertiajs/react'; import { ArrowUpRight, CalendarDays, FileText, FolderKanban, Mail, MailOpen, MonitorSmartphone, Users } from 'lucide-react'; import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { index as messagesIndex } from '@/routes/admin/messages'; import { index as visitorsIndex } from '@/routes/admin/visitors'; type Props = { can: { view_visitors: boolean; view_messages: boolean; view_posts: boolean; view_products: boolean; view_analytics: boolean; }; stats: { total_visitors?: number; visitors_today?: number; unread_messages?: number; published_posts?: number; active_products?: number; total_users?: number; }; visitorsChart: { date: string; label: string; visits: number }[]; deviceChart: { name: string; value: number }[]; consentChart: { name: string; value: number }[]; recentMessages: { id: number; name: string; email: string; subject: string | null; is_read: boolean; created_at_human: string; }[]; recentVisitors: { id: number; visitor_id: string; device_type: string | null; browser: string | null; country: string | null; city: string | null; consent: string; last_visit_human: string; }[]; }; // Warna chart memakai `var(--...)` LITERAL — nilai tema berformat oklch, // jadi `hsl(var(--primary))` tidak valid. `var()` didukung di atribut SVG // (presentation attribute) dan ikut cascade CSS, sehingga otomatis mengikuti // tema light/dark tanpa re-render React. const DEVICE_COLORS: Record = { Desktop: 'var(--primary)', Mobile: 'var(--chart-2)', Tablet: 'var(--chart-3)', }; const CONSENT_COLORS: Record = { Diterima: 'var(--primary)', Ditolak: 'var(--destructive)', Menunggu: 'var(--muted-foreground)', }; const MUTED_40 = 'color-mix(in oklab, var(--muted) 40%, transparent)'; function initials(name: string): string { return name .split(' ') .map((part) => part.charAt(0)) .slice(0, 2) .join('') .toUpperCase(); } export default function Dashboard({ can, stats, visitorsChart, deviceChart, consentChart, recentMessages, recentVisitors }: Props) { const statCards = [ ...(can.view_visitors || can.view_analytics ? [{ title: 'Total Pengunjung', value: stats.total_visitors ?? 0, icon: Users, hint: `${stats.visitors_today ?? 0} kunjungan hari ini`, link: { href: visitorsIndex(), label: 'Lihat analitik' }, }] : []), ...(can.view_messages ? [{ title: 'Pesan Belum Dibaca', value: stats.unread_messages ?? 0, icon: Mail, hint: 'Perlu tanggapan', link: { href: messagesIndex(), label: 'Buka inbox' }, }] : []), ...(can.view_posts ? [{ title: 'Postingan Terbit', value: stats.published_posts ?? 0, icon: FileText, hint: 'Tampil di halaman publik', link: { href: '/admin/posts', label: 'Kelola blog' }, }] : []), ...(can.view_products ? [{ title: 'Produk Aktif', value: stats.active_products ?? 0, icon: FolderKanban, hint: `${stats.total_users ?? 0} akun terdaftar`, link: { href: '/admin/products', label: 'Kelola produk' }, }] : []), ]; const totalVisits = visitorsChart.reduce((sum, row) => sum + row.visits, 0); return (

Dashboard

Ringkasan kunjungan, pesan, dan konten situs Anda.

{(can.view_visitors || can.view_analytics) && ( )}
{/* Stat cards — gaya dashboard-01 */}
{statCards.map((card) => ( {card.title}
{card.value}

{card.hint}

 ))}
{/* Baris utama: chart kunjungan + pesan terbaru */} {(can.view_visitors || can.view_analytics || can.view_messages) && (
{(can.view_visitors || can.view_analytics) && (
Kunjungan 30 Hari Terakhir {totalVisits.toLocaleString('id-ID')} kunjungan tercatat dari pengunjung yang menyetujui cookie.
active && payload?.length ? (

{label}

{payload[0].value}{' '} kunjungan

) : null } />
)} {can.view_messages && (
Pesan Terbaru 5 pesan terakhir yang masuk.
{recentMessages.length === 0 && (

Belum ada pesan masuk.

)} {recentMessages.map((message) => (
{initials(message.name)}

{message.name}

{message.subject ?? 'Tanpa subjek'}

{message.created_at_human} {message.is_read ? : } {message.is_read ? 'Dibaca' : 'Baru'}
))} )}
)} {/* Baris kedua: perangkat + persetujuan cookie + pengunjung terbaru */} {(can.view_visitors || can.view_analytics) && (
Perangkat Pengunjung Distribusi desktop, mobile, dan tablet.
active && payload?.length ? (

{payload[0].payload.name}

{payload[0].value}{' '} pengunjung

) : null } /> {deviceChart.map((entry) => ( ))}
Persetujuan Cookie Respons popup cookie di halaman publik.
{consentChart.map((entry) => ( ))} active && payload?.length ? (

{payload[0].name}

{payload[0].value}{' '} pengunjung

) : null } />
{consentChart.map((entry) => (
{entry.name} {entry.value}
))}
Pengunjung Terbaru Aktivitas terakhir di situs.
{recentVisitors.length === 0 && (

Belum ada data pengunjung.

)} {recentVisitors.map((visitor) => (

{visitor.country ? [visitor.city, visitor.country].filter(Boolean).join(', ') : 'Lokasi tidak diketahui'}

{visitor.browser ?? 'Browser tidak diketahui'} · {visitor.last_visit_human}

{visitor.consent === 'accepted' ? 'Diterima' : visitor.consent === 'declined' ? 'Ditolak' : 'Menunggu'}
))}
)}
); }