import { Head, Link, useForm } from '@inertiajs/react'; import { ArrowLeft, Calculator } from 'lucide-react'; import { useMemo, useState } from 'react'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { StatusBadge } from '@/components/ui/status-badge'; import { usePermissions } from '@/hooks/use-permissions'; import AppLayout from '@/layouts/app-layout'; import { formatDateID, formatIDR } from '@/lib/formatters'; import { toastError, toastLoading, toastSuccess } from '@/lib/toast'; import financingsRoutes from '@/routes/financing'; import type { BreadcrumbItem } from '@/types'; import type { Financing, FinancingInstallment, PaymentMethod, } from '@/types/financing'; interface PageProps { financing: Financing & { installments: FinancingInstallment[]; }; auth: { user: { role: string; }; }; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Pembiayaan', href: financingsRoutes.index().url, }, { title: 'Catat Pembayaran', href: '', }, ]; export default function RecordPayment({ financing }: PageProps) { const { can, isAdmin } = usePermissions(); const isTeller = can('financing.record_payment') || isAdmin(); console.log(financing); const form = useForm({ financing_id: financing.id.toString(), branch_id: financing.branch_id?.toString() || '', amount: financing.installment_amount || '', payment_method: 'cash' as PaymentMethod, payment_date: new Date().toISOString().split('T')[0], installment_ids: [] as number[], notes: 'Pembayaran Angsuran', }); const [allocationMode, setAllocationMode] = useState<'auto' | 'manual'>( 'auto', ); // Get pending/partial installments sorted by due date const pendingInstallments = useMemo(() => { return financing.installments .filter((i) => i.status === 'pending' || i.status === 'partial') .sort( (a, b) => new Date(a.due_date).getTime() - new Date(b.due_date).getTime(), ); }, [financing.installments]); // Auto-allocation calculation (FIFO - oldest first) const autoAllocation = useMemo(() => { if (allocationMode === 'manual' || !form.data.amount) return null; const amount = Number(form.data.amount); if (amount <= 0) return null; let remaining = amount; const allocation = pendingInstallments .map((installment) => { if (remaining <= 0) { return { installment, principal_amount: 0, margin_amount: 0, total: 0, }; } const outstanding = installment.total_amount - installment.paid_total; const allocated = Math.min(remaining, outstanding); // Allocate proportionally to principal and margin const principalRatio = installment.principal_amount / installment.total_amount; const marginRatio = installment.margin_amount / installment.total_amount; const principalPortion = allocated * principalRatio; const marginPortion = allocated * marginRatio; remaining -= allocated; return { installment, principal_amount: principalPortion, margin_amount: marginPortion, total: allocated, }; }) .filter((a) => a.total > 0); return { allocation, remaining: Math.max(0, remaining), }; }, [form.data.amount, pendingInstallments, allocationMode]); // Manual allocation total const manualTotal = useMemo(() => { return form.data.installment_ids.reduce((total, id) => { const installment = pendingInstallments.find((i) => i.id === id); if (!installment) return total; const outstanding = installment.total_amount - installment.paid_total; return total + outstanding; }, 0); }, [form.data.installment_ids, pendingInstallments]); // Next due date const nextDue = pendingInstallments.find((i) => i.status === 'pending'); const totalOverdue = pendingInstallments.filter( (i) => new Date(i.due_date) < new Date() && i.status !== 'paid', ).length; const handleSubmit = (e: { preventDefault: () => void }) => { e.preventDefault(); const amount = Number(form.data.amount); // Validation if (amount <= 0) { toastError('Jumlah pembayaran harus lebih dari 0'); return; } if (allocationMode === 'manual') { if (form.data.installment_ids.length === 0) { toastError('Pilih minimal satu angsuran untuk mode manual'); return; } if (Math.abs(manualTotal - amount) > 100) { toastError( `Jumlah pembayaran (${formatIDR(amount)}) tidak sesuai dengan total angsuran terpilih (${formatIDR(manualTotal)})`, ); return; } } form.post(financingsRoutes.payments.record().url, { onStart: () => toastLoading('Mencatat pembayaran...'), onSuccess: () => toastSuccess('Pembayaran berhasil dicatat'), onError: () => toastError('Gagal mencatat pembayaran'), }); }; const handleQuickAmount = (amount: number) => { form.setData('amount', amount.toString()); }; const toggleInstallment = (id: number) => { const current = form.data.installment_ids; let newIds: number[]; if (current.includes(id)) { newIds = current.filter((i) => i !== id); } else { newIds = [...current, id]; } // Calculate new total based on selected installments const newTotal = newIds.reduce((total, installmentId) => { const installment = pendingInstallments.find( (i) => i.id === installmentId, ); if (!installment) return total; const outstanding = installment.total_amount - installment.paid_total; return total + outstanding; }, 0); // Update both installment_ids and amount in one call form.setData({ ...form.data, installment_ids: newIds, amount: newTotal.toString(), }); }; if (!isTeller) { return (
Akses Ditolak

Anda tidak memiliki izin untuk mencatat pembayaran.

); } return (
{/* Header */}

Catat Pembayaran

{financing.account_number} • {financing.member.name}
{/* Form Column */}
{/* Payment Form */} Detail Pembayaran {/* Amount */}
form.setData( 'amount', e.target.value, ) } placeholder="Masukkan jumlah pembayaran" required /> {form.errors.amount && ( )} {/* Quick Amount Buttons */}
{nextDue && ( )} {totalOverdue > 0 && ( )}
{/* Payment Method */}
{form.errors.payment_method && ( )}
{/* Payment Date */}
form.setData( 'payment_date', e.target.value, ) } required /> {form.errors.payment_date && ( )}
{/* Notes */}