import { Head } from '@inertiajs/react' import { Card, CardContent } from '@ui/components/ui/card' import { CalendarClock, Target, TrendingUp } from 'lucide-react' import { FinanceAppLayout } from '@/layouts/finance-app-layout' import { CashOutChart } from './components/CashOutChart' interface ChartDataItem { month: string target: number nominal: number percentage: number } interface DashboardProps { title?: string chartData: ChartDataItem[] summary: { total_target: number total_nominal: number } } const formatCurrency = (value: number) => 'Rp ' + new Intl.NumberFormat('id-ID').format(value ?? 0) export default function Dashboard({ title, chartData, summary }: DashboardProps) { const overallRatio = summary.total_target > 0 ? (summary.total_nominal / summary.total_target) * 100 : 0 return (
{/* Stat Cards */}
{/* Total Target */}

Total Target

{formatCurrency(summary.total_target)}

Budget alokasi tahunan

 {/* Total Scheduling */}

Total Scheduling

{formatCurrency(summary.total_nominal)}

Estimasi pengeluaran terjadwal

 {/* Overall Ratio */}

Overall Ratio

{overallRatio.toFixed(2)}%

{/* Progress bar */}
{/* Cash Out Chart */}
) }