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'; // ─── Types ─────────────────────────────────────────────────────────────────── interface Payroll { id: number; employee_name: string; employee_nip: string; period: string; net_salary: number; status: 'pending' | 'paid'; } interface PageProps { payrolls: Payroll[]; } // ─── Helpers ───────────────────────────────────────────────────────────────── function formatRupiah(value: number): string { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0, }).format(value); } /** Format "2026-04" → "April 2026" */ function formatPeriod(period: string): string { const [year, month] = period.split('-'); const date = new Date(Number(year), Number(month) - 1, 1); return date.toLocaleDateString('id-ID', { month: 'long', year: 'numeric' }); } // ─── Component ─────────────────────────────────────────────────────────────── export default function Index({ payrolls }: PageProps) { return (
{/* Page Header */}

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)} ))}
)}
); } // ─── Sub-component: Status Badge ───────────────────────────────────────────── function StatusBadge({ status }: { status: 'pending' | 'paid' }) { if (status === 'paid') { return ( Paid ); } return ( Pending ); }