import { Head, Link } from '@inertiajs/react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent } from '@/components/ui/card'; import { Separator } from '@/components/ui/separator'; import AppLayout from '@/layouts/app-layout'; import { Printer, Building2, CalendarDays, Hash } from 'lucide-react'; // ─── Types ─────────────────────────────────────────────────────────────────── interface DetailItem { name: string; type: 'bonus' | 'deduction'; amount: number; } interface PayrollData { id: number; period: string; basic_salary: number; details: DetailItem[]; net_salary: number; status: 'pending' | 'paid'; created_at: string; employee: { name: string; nip: string; position: string; department: string; }; } interface PageProps { payroll: PayrollData; } // ─── Helpers ───────────────────────────────────────────────────────────────── 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('-'); const date = new Date(Number(year), Number(month) - 1, 1); return date.toLocaleDateString('id-ID', { month: 'long', year: 'numeric' }); } // ─── Sub-components ─────────────────────────────────────────────────────────── function InfoCell({ label, value }: { label: string; value: string }) { return (

{label}

{value}

); } function LineItem({ label, value, type = 'neutral', }: { label: string; value: string; type?: 'neutral' | 'bonus' | 'deduction'; }) { const valueClass = type === 'bonus' ? 'text-emerald-600 font-medium' : type === 'deduction' ? 'text-red-500 font-medium' : 'font-medium'; const prefix = type === 'bonus' ? '+ ' : type === 'deduction' ? '− ' : ''; return (

{label} {prefix}{value}

); } function StatusBadge({ status }: { status: 'pending' | 'paid' }) { return status === 'paid' ? ( Lunas ) : ( Belum Dibayar ); } // ─── Main Component ─────────────────────────────────────────────────────────── export default function Show({ payroll }: PageProps) { const bonuses = payroll.details.filter((d) => d.type === 'bonus'); const deductions = payroll.details.filter((d) => d.type === 'deduction'); const totalBonus = bonuses.reduce((s, d) => s + d.amount, 0); const totalDeduction = deductions.reduce((s, d) => s + d.amount, 0); return (

{/* Toolbar — tersembunyi saat print */}

{/* ── Slip Card ── */} {/* ── HEADER ── */}

{/* Nama Perusahaan */}

PT. HRIS Nusantara

Slip Gaji Karyawan

{/* Meta slip */}

{String(payroll.id).padStart(5, '0')}

{payroll.created_at}

{/* ── INFO KARYAWAN ── */}

Informasi Karyawan

{/* ── PERIODE ── */}

Periode Penggajian

{formatPeriod(payroll.period)}

{/* ── RINCIAN GAJI ── */}

{/* Gaji Pokok */}

Komponen Gaji

{/* Bonus */} {bonuses.length > 0 && ( <>

Tambahan

{bonuses.map((item, i) => ( ))}

Subtotal tambahan + {formatRupiah(totalBonus)}

)} {/* Potongan */} {deductions.length > 0 && ( <>

Potongan

{deductions.map((item, i) => ( ))}

Subtotal potongan − {formatRupiah(totalDeduction)}

)}

{/* ── TOTAL GAJI BERSIH ── */}

Total Gaji Bersih

Gaji Pokok {bonuses.length > 0 && ' + Tambahan'} {deductions.length > 0 && ' − Potongan'}

{formatRupiah(payroll.net_salary)}

{/* ── FOOTER ── */}

Dokumen ini diterbitkan secara otomatis oleh sistem HRIS dan sah tanpa tanda tangan basah.

); }