import { Suspense } from 'react'; import { Head } from '@inertiajs/react'; import { LazyAreaChart, LazyBarChart, LazyLineChart, LazyPieChart } from '@/Components/ui/charts'; import { Skeleton } from '@/Components/ui/skeleton'; import DashboardLayout from '@/Layouts/DashboardLayout'; // Loading fallback for charts const ChartLoader = () => (
); const revenueData = [ { month: 'Jan', revenue: 4000, expenses: 2400 }, { month: 'Feb', revenue: 3000, expenses: 1398 }, { month: 'Mar', revenue: 2000, expenses: 9800 }, { month: 'Apr', revenue: 2780, expenses: 3908 }, { month: 'May', revenue: 1890, expenses: 4800 }, { month: 'Jun', revenue: 2390, expenses: 3800 }, { month: 'Jul', revenue: 3490, expenses: 4300 }, ]; const categoryData = [ { name: 'Electronics', value: 400 }, { name: 'Clothing', value: 300 }, { name: 'Food', value: 300 }, { name: 'Books', value: 200 }, { name: 'Other', value: 100 }, ]; const visitorsData = [ { day: 'Mon', visitors: 120, pageViews: 340 }, { day: 'Tue', visitors: 150, pageViews: 420 }, { day: 'Wed', visitors: 180, pageViews: 510 }, { day: 'Thu', visitors: 140, pageViews: 380 }, { day: 'Fri', visitors: 200, pageViews: 560 }, { day: 'Sat', visitors: 90, pageViews: 250 }, { day: 'Sun', visitors: 70, pageViews: 200 }, ]; export default function Charts() { return (

Charts

Theme-aware chart components powered by Recharts.

Revenue vs Expenses

}>

Weekly Visitors

}>

Category Breakdown

}>

Traffic Trend

}>
); }