131 lines
4.6 KiB
JavaScript
131 lines
4.6 KiB
JavaScript
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 (
|
|
<div className="card bg-base-100 shadow-xl">
|
|
<Head title="Dashboard" />
|
|
<div className="card-body">
|
|
<div className="flex items-center mb-6">
|
|
<div className="bg-gradient-to-tr from-blue-400 to-blue-600 p-3 rounded-lg mr-3">
|
|
<Squares2X2Icon className="h-6 w-6 text-white" />
|
|
</div>
|
|
<h1 className="text-2xl font-bold">Dashboard</h1>
|
|
<div className="ml-auto">
|
|
<span className="text-gray-700">Overview</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Kartu info utama */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div className="rounded-lg overflow-hidden bg-gradient-to-r from-orange-300 to-pink-400 text-white p-6">
|
|
<p className="text-xl font-medium mb-4">Pemasukan Bulan Ini</p>
|
|
<p className="text-4xl font-bold mb-6">
|
|
Rp {(Number(monthlyIncome) || 0).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-lg overflow-hidden bg-gradient-to-r from-blue-300 to-blue-500 text-white p-6">
|
|
<p className="text-xl font-medium mb-4">Santri Aktif</p>
|
|
<p className="text-4xl font-bold mb-6">{studentCount || 0}</p>
|
|
</div>
|
|
|
|
<div className="rounded-lg overflow-hidden bg-gradient-to-r from-green-300 to-teal-500 text-white p-6">
|
|
<p className="text-xl font-medium mb-4">Total Saldo Wallet</p>
|
|
<p className="text-4xl font-bold mb-6">
|
|
Rp {(Number(totalBalance) || 0).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grafik Tren Pembayaran */}
|
|
<div className="w-full bg-base-100">
|
|
<div className="rounded-lg p-6 shadow">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-xl font-bold">Tren Pembayaran 12 Bulan Terakhir</h2>
|
|
</div>
|
|
<div className="h-64">
|
|
<Bar data={barChartData} options={barChartOptions} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|