import { Head, useForm, Link } from '@inertiajs/react'; import React from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Separator } from '@/components/ui/separator'; import AppLayout from '@/layouts/app-layout'; import { PlusCircle, Trash2 } from 'lucide-react'; 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'; employee: { id: number; name: string; nip: string; position: string; department: string; }; } interface PageProps { payroll: PayrollData; } 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 Edit({ payroll }: PageProps) { const { data, setData, put, processing, errors } = useForm<{ basic_salary: number; details: DetailItem[]; }>({ basic_salary: payroll.basic_salary, details: payroll.details, }); // Hitung net salary const netSalary = data.details.reduce((acc, item) => { return item.type === 'bonus' ? acc + (item.amount || 0) : acc - (item.amount || 0); }, data.basic_salary); const addDetail = () => { setData('details', [...data.details, { name: '', type: 'bonus', amount: 0 }]); }; const updateDetail = (index: number, field: keyof DetailItem, value: string | number) => { const updated = [...data.details]; // @ts-expect-error – dynamic field assignment updated[index][field] = field === 'amount' ? Number(value) : value; setData('details', updated); }; const removeDetail = (index: number) => { setData('details', data.details.filter((_, i) => i !== index)); }; const submit = (e: React.FormEvent) => { e.preventDefault(); put(`/admin/payrolls/${payroll.id}`); }; return (
Edit Payroll

Revisi komponen gaji untuk periode ini. Karyawan dan periode tidak dapat diubah.

{/* Info Payroll (read-only) */}

Karyawan

{payroll.employee.name}

NIP

{payroll.employee.nip}

Jabatan

{payroll.employee.position ?? '-'}

Periode

{formatPeriod(payroll.period)}

{/* ── Gaji Pokok ── */}

1 Gaji Pokok

setData('basic_salary', Number(e.target.value))} className="font-medium" /> {errors.basic_salary && (

{errors.basic_salary}

)}
{/* ── Komponen Bonus / Potongan ── */}

2 Komponen Gaji

{data.details.length === 0 ? (

Belum ada komponen. Klik "Tambah Komponen" untuk menambah bonus atau potongan.

) : (
Nama Komponen Tipe Nominal (Rp)
{data.details.map((item, index) => (
updateDetail(index, 'name', e.target.value)} /> updateDetail(index, 'amount', e.target.value)} />
{errors[`details.${index}.name` as keyof typeof errors] && (

{errors[`details.${index}.name` as keyof typeof errors]}

)}
))}
)}
{/* ── Ringkasan Gaji Bersih ── */}

Total Gaji Bersih (Estimasi)

Gaji Pokok + Bonus − Potongan

{formatRupiah(Math.max(0, netSalary))}

{/* ── Tombol Aksi ── */}
); }