import { Head, Link } from '@inertiajs/react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import AppLayout from '@/layouts/app-layout'; import { PlusCircle, FileText } from 'lucide-react'; interface Payroll { id: number; employee_name: string; employee_nip: string; period: string; net_salary: number; status: 'pending' | 'paid'; } interface PageProps { payrolls: Payroll[]; } 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' }); } function StatusBadge({ status }: { status: 'pending' | 'paid' }) { return status === 'paid' ? ( Paid ) : ( Pending ); } export default function Index({ payrolls }: PageProps) { return (

Manajemen Payroll

Daftar seluruh payroll yang telah di-generate.

Daftar Slip Gaji {payrolls.length === 0 ? (

Belum ada data payroll.

) : ( # Karyawan Periode Gaji Bersih Status Aksi {payrolls.map((payroll, index) => ( {index + 1}
{payroll.employee_name}
NIP: {payroll.employee_nip}
{formatPeriod(payroll.period)} {formatRupiah(payroll.net_salary)} ))}
)}
); }