import React, { useEffect } from 'react'; import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement, } from 'chart.js'; import { Bar } from 'react-chartjs-2'; import { Head, usePage } from '@inertiajs/react'; import { useDispatch } from 'react-redux'; import { setPageTitle } from '@/Components/features/common/headerSlice'; import { Squares2X2Icon } from '@heroicons/react/24/outline'; ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement); const Dashboard = () => { const dispatch = useDispatch(); // Ambil data dari Inertia props const { props } = usePage(); const { monthlyIncome = 0, studentCount = 0, totalBalance = 0, paymentTrend = { labels: [], data: [] }, } = props; useEffect(() => { dispatch(setPageTitle('Dashboard')); }, [dispatch]); const barChartData = { labels: paymentTrend.labels, datasets: [ { label: 'Pemasukan Bulanan', data: paymentTrend.data, backgroundColor: 'rgb(86, 207, 225)', }, ], }; const barChartOptions = { responsive: true, plugins: { legend: { display: false }, title: { display: true, text: 'Tren Pemasukan Bulanan', font: { size: 16, weight: 'bold' }, }, tooltip: { callbacks: { label: function (context) { return `Rp ${context.parsed.y.toLocaleString()}`; }, }, }, }, scales: { x: { grid: { display: false } }, y: { grid: { display: false }, ticks: { callback: function (value) { return `Rp ${value.toLocaleString()}`; }, }, }, }, maintainAspectRatio: false, }; return (

Dashboard

Overview
{/* Kartu info utama */}

Pemasukan Bulan Ini

Rp {(Number(monthlyIncome) || 0).toLocaleString()}

Santri Aktif

{studentCount || 0}

Total Saldo Wallet

Rp {(Number(totalBalance) || 0).toLocaleString()}

{/* Grafik Tren Pembayaran */}

Tren Pembayaran 12 Bulan Terakhir

); }; export default Dashboard;