98 lines
5.1 KiB
TypeScript
98 lines
5.1 KiB
TypeScript
import React from 'react';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
import { Head } from '@inertiajs/react';
|
|
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
|
import { type BreadcrumbItem } from '@/types';
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Dashboard',
|
|
href: '/dashboard',
|
|
},
|
|
];
|
|
|
|
export default function Dashboard({ auth, patientRegistrations, dailyRevenue, todayStats }) {
|
|
return (
|
|
<AppLayout breadcrumbs={breadcrumbs}>
|
|
<Head title="Dashboard" />
|
|
<div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
|
|
{/* Today's Statistics */}
|
|
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
<div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-sidebar-border/70">
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Pasien Hari Ini</h3>
|
|
<p className="text-2xl font-bold">{todayStats.patient_count}</p>
|
|
</div>
|
|
<div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-sidebar-border/70">
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Pendapatan Hari Ini</h3>
|
|
<p className="text-2xl font-bold">
|
|
{new Intl.NumberFormat('id-ID', {
|
|
style: 'currency',
|
|
currency: 'IDR'
|
|
}).format(todayStats.revenue)}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-sidebar-border/70">
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Pembayaran Tertunda</h3>
|
|
<p className="text-2xl font-bold">{todayStats.pending_payments}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Charts */}
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
{/* Patient Registration Chart */}
|
|
<div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-sidebar-border/70">
|
|
<h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
Jumlah Pasien Mendaftar (7 Hari Terakhir)
|
|
</h3>
|
|
<div className="h-64">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={patientRegistrations}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="date" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Bar dataKey="count" fill="#8884d8" name="Jumlah Pasien" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Revenue Chart */}
|
|
<div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-sidebar-border/70">
|
|
<h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
Pendapatan Harian (7 Hari Terakhir)
|
|
</h3>
|
|
<div className="h-64">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={dailyRevenue}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="date" />
|
|
<YAxis />
|
|
<Tooltip
|
|
formatter={(value) => [
|
|
new Intl.NumberFormat('id-ID', {
|
|
style: 'currency',
|
|
currency: 'IDR'
|
|
}).format(value),
|
|
'Total Pendapatan'
|
|
]}
|
|
/>
|
|
<Legend />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="total"
|
|
stroke="#82ca9d"
|
|
name="Pendapatan"
|
|
activeDot={{ r: 8 }}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|