443 lines
15 KiB
TypeScript
443 lines
15 KiB
TypeScript
import { Head, Link, router } from '@inertiajs/react';
|
|
import type { ColumnDef } from '@tanstack/react-table';
|
|
import { format } from 'date-fns';
|
|
import { ArrowLeft, Paperclip, Pencil, Plus, Trash2 } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { DataTable } from '@/components/data-table';
|
|
import { DateTimeField } from '@/components/datetime-field';
|
|
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
|
|
import { FileUploadField } from '@/components/file-upload-field';
|
|
import { FormDialog } from '@/components/form-dialog';
|
|
import InputError from '@/components/input-error';
|
|
import { PageHeader } from '@/components/page-header';
|
|
import { RowActions } from '@/components/row-actions';
|
|
import { RupiahInput } from '@/components/rupiah-input';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Label } from '@/components/ui/label';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { formatRupiah } from '@/lib/currency';
|
|
import { index as tuitionInvoiceIndex } from '@/routes/admin/finances/tuition-invoices';
|
|
import {
|
|
destroy,
|
|
store,
|
|
update,
|
|
} from '@/routes/admin/finances/tuition-invoices/payments';
|
|
import { formatAcademicTermLabel } from '@/types/academic-term';
|
|
import type { TuitionInvoice } from '@/types/tuition-invoice';
|
|
import type { TuitionPayment } from '@/types/tuition-payment';
|
|
import {
|
|
PaymentMethodLabels,
|
|
PaymentMethods,
|
|
PaymentStatusLabels,
|
|
} from '@/types/tuition-payment';
|
|
|
|
type Props = {
|
|
invoice: TuitionInvoice;
|
|
payments: TuitionPayment[];
|
|
};
|
|
|
|
export default function TuitionPaymentIndex({ invoice, payments }: Props) {
|
|
const [createOpen, setCreateOpen] = useState(false);
|
|
const [editing, setEditing] = useState<TuitionPayment | null>(null);
|
|
const [deleting, setDeleting] = useState<TuitionPayment | null>(null);
|
|
|
|
function handleDelete() {
|
|
if (!deleting) {
|
|
return;
|
|
}
|
|
|
|
router.delete(destroy([invoice.id, deleting.id]), {
|
|
onSuccess: () => setDeleting(null),
|
|
});
|
|
}
|
|
|
|
const paidTotal = payments.reduce(
|
|
(sum, payment) => sum + Number(payment.amount_paid),
|
|
0,
|
|
);
|
|
const amountDue = Number(invoice.amount_due);
|
|
const isFullyPaid = paidTotal >= amountDue;
|
|
|
|
const columns: ColumnDef<TuitionPayment>[] = [
|
|
{
|
|
accessorKey: 'paid_at',
|
|
header: () => <span>Tanggal Bayar</span>,
|
|
cell: ({ row }) =>
|
|
format(new Date(row.original.paid_at), 'd MMM yyyy, HH:mm'),
|
|
},
|
|
{
|
|
accessorKey: 'amount_paid',
|
|
header: () => <span>Jumlah</span>,
|
|
cell: ({ row }) => formatRupiah(row.getValue('amount_paid')),
|
|
},
|
|
{
|
|
accessorKey: 'payment_method',
|
|
header: () => <span>Metode</span>,
|
|
cell: ({ row }) => {
|
|
const method = row.getValue('payment_method') as
|
|
keyof typeof PaymentMethodLabels | null;
|
|
|
|
return method ? PaymentMethodLabels[method] : '-';
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'status',
|
|
header: () => <span className="block text-center">Status</span>,
|
|
meta: {
|
|
className: 'w-[120px] text-center',
|
|
headerClassName: 'w-[120px] text-center',
|
|
},
|
|
cell: ({ row }) => {
|
|
const status = row.getValue('status') as
|
|
keyof typeof PaymentStatusLabels | null;
|
|
|
|
return (
|
|
<div className="flex justify-center">
|
|
{status ? (
|
|
<Badge
|
|
variant={
|
|
status === 'paid'
|
|
? 'default'
|
|
: status === 'partial'
|
|
? 'secondary'
|
|
: 'outline'
|
|
}
|
|
>
|
|
{PaymentStatusLabels[status]}
|
|
</Badge>
|
|
) : (
|
|
<span className="text-muted-foreground">-</span>
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'recorder.full_name',
|
|
header: () => <span>Dicatat Oleh</span>,
|
|
cell: ({ row }) => row.original.recorder?.full_name ?? '-',
|
|
},
|
|
{
|
|
accessorKey: 'proof_name',
|
|
header: () => <span>Bukti</span>,
|
|
cell: ({ row }) => {
|
|
const payment = row.original;
|
|
|
|
if (!payment.proof_url) {
|
|
return <span className="text-muted-foreground">-</span>;
|
|
}
|
|
|
|
return (
|
|
<a
|
|
href={payment.proof_url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center gap-1 text-primary underline underline-offset-4 hover:text-primary/80"
|
|
>
|
|
<Paperclip className="h-3.5 w-3.5" />
|
|
{payment.proof_name}
|
|
</a>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: 'actions',
|
|
header: () => <span className="block text-center">Aksi</span>,
|
|
meta: {
|
|
className: 'w-[100px] text-center',
|
|
headerClassName: 'w-[100px] text-center',
|
|
},
|
|
cell: ({ row }) => (
|
|
<RowActions
|
|
actions={[
|
|
{
|
|
label: 'Edit',
|
|
icon: <Pencil className="h-4 w-4" />,
|
|
onClick: () => setEditing(row.original),
|
|
},
|
|
{
|
|
label: 'Hapus',
|
|
icon: (
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
),
|
|
onClick: () => setDeleting(row.original),
|
|
},
|
|
]}
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Head title="Pembayaran" />
|
|
|
|
<div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
|
|
<PageHeader
|
|
title="Pembayaran"
|
|
actions={
|
|
<Button variant="outline" asChild>
|
|
<Link href={tuitionInvoiceIndex.url()}>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Kembali
|
|
</Link>
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>
|
|
{invoice.student?.user?.profile?.full_name ?? 'N/A'}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-1 text-sm text-muted-foreground">
|
|
<p>
|
|
NIM: {invoice.student?.student_number} ·{' '}
|
|
{invoice.student?.department?.name ?? '-'}
|
|
</p>
|
|
<p>
|
|
Periode:{' '}
|
|
{invoice.academic_term
|
|
? formatAcademicTermLabel(invoice.academic_term)
|
|
: '-'}
|
|
</p>
|
|
<p>
|
|
Jumlah Tagihan: {formatRupiah(invoice.amount_due)}
|
|
</p>
|
|
<p>
|
|
Total Terbayar: {formatRupiah(paidTotal)}{' '}
|
|
{isFullyPaid ? (
|
|
<Badge variant="default" className="ml-1">
|
|
Lunas
|
|
</Badge>
|
|
) : paidTotal > 0 ? (
|
|
<Badge variant="secondary" className="ml-1">
|
|
Sebagian
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="outline" className="ml-1">
|
|
Belum Bayar
|
|
</Badge>
|
|
)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold">
|
|
Riwayat Pembayaran
|
|
</h2>
|
|
{!isFullyPaid && (
|
|
<Button onClick={() => setCreateOpen(true)}>
|
|
<Plus className="h-4 w-4" />
|
|
Tambah Pembayaran
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<DataTable columns={columns} data={payments} />
|
|
|
|
<CreateForm
|
|
open={createOpen}
|
|
onOpenChange={setCreateOpen}
|
|
invoiceId={invoice.id}
|
|
remaining={amountDue - paidTotal}
|
|
/>
|
|
|
|
<EditForm
|
|
key={editing?.id}
|
|
open={editing !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setEditing(null);
|
|
}
|
|
}}
|
|
invoiceId={invoice.id}
|
|
editing={editing}
|
|
remaining={
|
|
editing
|
|
? amountDue -
|
|
(paidTotal - Number(editing.amount_paid))
|
|
: 0
|
|
}
|
|
/>
|
|
|
|
<DeleteConfirmDialog
|
|
target={deleting}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setDeleting(null);
|
|
}
|
|
}}
|
|
title="Hapus Pembayaran"
|
|
description={() =>
|
|
'Apakah Anda yakin ingin menghapus data pembayaran ini? Tindakan ini tidak dapat dibatalkan.'
|
|
}
|
|
onConfirm={handleDelete}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function CreateForm({
|
|
open,
|
|
onOpenChange,
|
|
invoiceId,
|
|
remaining,
|
|
}: {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
invoiceId: number;
|
|
remaining: number;
|
|
}) {
|
|
return (
|
|
<FormDialog
|
|
open={open}
|
|
onOpenChange={onOpenChange}
|
|
title="Tambah Pembayaran"
|
|
action={store(invoiceId)}
|
|
resetOnSuccess
|
|
onSuccess={() => onOpenChange(false)}
|
|
>
|
|
{({ errors }) => (
|
|
<div className="grid gap-4">
|
|
<PaymentFields
|
|
errors={errors}
|
|
resetKey={open ? 'open' : 'closed'}
|
|
remaining={remaining}
|
|
/>
|
|
</div>
|
|
)}
|
|
</FormDialog>
|
|
);
|
|
}
|
|
|
|
function EditForm({
|
|
open,
|
|
onOpenChange,
|
|
invoiceId,
|
|
editing,
|
|
remaining,
|
|
}: {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
invoiceId: number;
|
|
editing: TuitionPayment | null;
|
|
remaining: number;
|
|
}) {
|
|
return (
|
|
<FormDialog
|
|
open={open}
|
|
onOpenChange={onOpenChange}
|
|
title="Edit Pembayaran"
|
|
action={editing ? update([invoiceId, editing.id]) : ''}
|
|
resetOnSuccess
|
|
onSuccess={() => onOpenChange(false)}
|
|
>
|
|
{({ errors }) =>
|
|
editing && (
|
|
<div className="grid gap-4">
|
|
<PaymentFields
|
|
errors={errors}
|
|
editing={editing}
|
|
remaining={remaining}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
</FormDialog>
|
|
);
|
|
}
|
|
|
|
function PaymentFields({
|
|
errors,
|
|
editing,
|
|
resetKey,
|
|
remaining,
|
|
}: {
|
|
errors: Record<string, string>;
|
|
editing?: TuitionPayment;
|
|
resetKey?: string;
|
|
remaining: number;
|
|
}) {
|
|
return (
|
|
<>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="amount_paid">
|
|
Jumlah Dibayar <span className="text-destructive">*</span>
|
|
</Label>
|
|
<RupiahInput
|
|
id="amount_paid"
|
|
name="amount_paid"
|
|
placeholder="1.500.000"
|
|
defaultValue={editing?.amount_paid}
|
|
ariaInvalid={!!errors.amount_paid}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Sisa tagihan: {formatRupiah(remaining)}
|
|
</p>
|
|
<InputError message={errors.amount_paid} />
|
|
</div>
|
|
<DateTimeField
|
|
label="Tanggal & Waktu Bayar"
|
|
name="paid_at"
|
|
required
|
|
defaultValue={editing?.paid_at}
|
|
placeholder="Pilih tanggal bayar"
|
|
error={errors.paid_at}
|
|
maxNow
|
|
/>
|
|
<div className="grid gap-2">
|
|
<Label>
|
|
Metode Pembayaran{' '}
|
|
<span className="text-destructive">*</span>
|
|
</Label>
|
|
<RadioGroup
|
|
name="payment_method"
|
|
defaultValue={editing?.payment_method ?? ''}
|
|
className="flex flex-row gap-4"
|
|
>
|
|
{PaymentMethods.map((method) => (
|
|
<div key={method} className="flex items-center gap-2">
|
|
<RadioGroupItem
|
|
value={method}
|
|
id={`payment_method-${method}`}
|
|
/>
|
|
<Label
|
|
htmlFor={`payment_method-${method}`}
|
|
className="font-normal"
|
|
>
|
|
{PaymentMethodLabels[method]}
|
|
</Label>
|
|
</div>
|
|
))}
|
|
</RadioGroup>
|
|
<InputError message={errors.payment_method} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="notes">Catatan</Label>
|
|
<Textarea
|
|
id="notes"
|
|
name="notes"
|
|
placeholder="Catatan tambahan"
|
|
defaultValue={editing?.notes ?? ''}
|
|
/>
|
|
<InputError message={errors.notes} />
|
|
</div>
|
|
<FileUploadField
|
|
key={resetKey}
|
|
name="proof"
|
|
label="Bukti Pembayaran"
|
|
existingFileName={editing?.proof_name}
|
|
existingFileUrl={editing?.proof_url}
|
|
error={errors.proof}
|
|
/>
|
|
</>
|
|
);
|
|
}
|