import { Head, Link } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Users, Building2, Briefcase, UserPlus, Banknote } from 'lucide-react'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend } from 'recharts'; interface DashboardProps { stats: { total_employees: number; total_departments: number; total_positions: number; payroll_realisasi: number; }; genderData: { name: string; value: number; fill: string }[]; deptData: { name: string; employees: number }[]; latestEmployees: { id: number; join_date: string; user: { name: string }; position: { name: string }; department: { name: string }; }[]; currentPeriod: string; } function formatRupiah(value: number): string { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0, }).format(value); } function formatPeriod(period: string): string { const [year, month] = period.split('-'); return new Date(Number(year), Number(month) - 1, 1) .toLocaleDateString('id-ID', { month: 'long', year: 'numeric' }); } export default function Dashboard({ stats, genderData, deptData, latestEmployees, currentPeriod }: DashboardProps) { return (
{/* CARD STATISTIK */}
Total Karyawan
{stats.total_employees}

Pegawai aktif saat ini

 Total Departemen
{stats.total_departments}

Divisi terdaftar

 Total Jabatan
{stats.total_positions}

Posisi pekerjaan

 {/* Card Realisasi Gaji */} Realisasi Gaji Bulan Ini
{formatRupiah(stats.payroll_realisasi)}

Status "Telah Dikirim" · {formatPeriod(currentPeriod)}

{/* Grafik Batang */} Karyawan per Departemen
`${value}`} />
{/* Grafik Donat*/} Komposisi Gender
{genderData.map((entry, index) => ( ))}
{/* TABEL KARYAWAN TERBARU */} Karyawan Terbaru Bergabung Lihat Semua
{latestEmployees.length === 0 ? (

Belum ada data karyawan.

) : latestEmployees.map((emp) => (

{emp.user?.name ?? '-'}

{emp.position?.name ?? '-'} • {emp.department?.name ?? '-'}

{new Date(emp.join_date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })}
))}
); }