import { Head, usePage } from '@inertiajs/react'; import { useEffect, useState } from 'react'; import { StatCard } from '@/components/cards/stat-card'; import { WelcomeCard } from '@/components/cards/welcome-card'; import { dashboard } from '@/routes'; import type { DashboardPageProps } from '@/types'; import { CustomBarChart } from '../components/charts/bar-chart'; import { CustomPieChart } from '../components/charts/pie-chart'; import { SalesByHourChart } from '../components/charts/sales-by-hour-chart'; export default function Dashboard() { const { auth, stats, salesByHour, paymentMethods, orderStatuses, orderChannels, topProducts, topCustomers } = usePage().props; const [time, setTime] = useState(new Date()); useEffect(() => { const timer = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(timer); }, []); const getTimeTheme = () => { const hour = time.getHours(); if (hour >= 5 && hour < 11) { return { greeting: 'Selamat Pagi', class: 'bg-gradient-to-br from-amber-50 to-orange-100 dark:from-amber-950/40 dark:to-orange-900/40 border-amber-200 dark:border-amber-800/30 shadow-sm', text: 'text-amber-950 dark:text-amber-50', subtext: 'text-amber-900/70 dark:text-amber-200/70', decoration: 'bg-amber-500/10 dark:bg-amber-500/20', pageBackground: 'bg-amber-50/50 dark:bg-amber-950/10', card: 'bg-white/80 dark:bg-amber-900/10 backdrop-blur-sm border-amber-200/50 dark:border-amber-800/20', placeholder: 'stroke-amber-500/20 dark:stroke-amber-400/20' }; } if (hour >= 11 && hour < 15) { return { greeting: 'Selamat Siang', class: 'bg-gradient-to-br from-sky-50 to-blue-100 dark:from-sky-950/40 dark:to-blue-900/40 border-sky-200 dark:border-sky-800/30 shadow-sm', text: 'text-sky-950 dark:text-sky-50', subtext: 'text-sky-900/70 dark:text-sky-200/70', decoration: 'bg-sky-500/10 dark:bg-sky-500/20', pageBackground: 'bg-sky-50/50 dark:bg-sky-950/10', card: 'bg-white/80 dark:bg-sky-900/10 backdrop-blur-sm border-sky-200/50 dark:border-sky-800/20', placeholder: 'stroke-sky-500/20 dark:stroke-sky-400/20' }; } if (hour >= 15 && hour < 19) { return { greeting: 'Selamat Sore', class: 'bg-gradient-to-br from-orange-50 to-purple-100 dark:from-orange-950/40 dark:to-purple-900/40 border-orange-200 dark:border-orange-800/30 shadow-sm', text: 'text-orange-950 dark:text-orange-50', subtext: 'text-orange-900/70 dark:text-orange-200/70', decoration: 'bg-orange-500/10 dark:bg-orange-500/20', pageBackground: 'bg-orange-50/50 dark:bg-orange-950/10', card: 'bg-white/80 dark:bg-orange-900/10 backdrop-blur-sm border-orange-200/50 dark:border-orange-800/20', placeholder: 'stroke-orange-500/20 dark:stroke-orange-400/20' }; } return { greeting: 'Selamat Malam', class: 'bg-gradient-to-br from-slate-900 via-indigo-950 to-black text-white border-indigo-500/20 shadow-indigo-950', text: 'text-indigo-50 drop-shadow-md', subtext: 'text-indigo-200/70 drop-shadow-sm', decoration: 'bg-indigo-500/20', pageBackground: 'bg-slate-100 dark:bg-slate-950', card: 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800', placeholder: 'stroke-slate-300 dark:stroke-slate-700' }; }; const theme = getTimeTheme(); return ( <>
{/* Welcome Section */} {/* Stats Grid */}
{[ { title: "Total Penjualan", stat: stats.total_sales, isCurrency: false }, { title: "Total Pendapatan", stat: stats.total_revenue }, { title: "Total Pengeluaran", stat: stats.total_expenses }, { title: "HPP (Modal)", stat: stats.cogs }, { title: "AOV (Avg Order Value)", stat: stats.aov }, { title: "Profit Margin", stat: stats.profit_margin, isPercentage: true }, { title: "Total Diskon", stat: stats.total_discount }, { title: "Laba Kotor", stat: stats.gross_profit }, { title: "Laba Bersih", stat: stats.net_profit }, { title: "Total Pembelian", stat: stats.total_purchases }, { title: "Produk Terjual", stat: stats.products_sold, isCurrency: false }, { title: "Total Pelanggan", stat: stats.total_customers, isCurrency: false }, ].map((item, index) => (
))}
); } Dashboard.layout = { breadcrumbs: [ { title: 'Dasbor', href: dashboard(), }, ], };