162 lines
7.9 KiB
TypeScript
162 lines
7.9 KiB
TypeScript
"use client"
|
|
import { CrudResource } from '@/shared/data-view/resource-page'
|
|
import { ColumnHeader } from '@/shared/data-view/table-view'
|
|
import { BadgeDollarSignIcon, CalendarIcon, ClipboardListIcon, CreditCardIcon, HashIcon, UserIcon } from 'lucide-react'
|
|
import { PAYMENT_RECEIVED_ROUTES } from '@garage/api'
|
|
import FormDialog from '@/shared/components/form-dialog'
|
|
import { PaymentReceivedForm } from '@/modules/payment-received/payment-received-form'
|
|
import { useInvoice } from './invoice-context'
|
|
import { Card, CardContent } from '@/shared/components/ui/card'
|
|
import { useRouter } from 'next/navigation'
|
|
export default function InvoicePaymentsSection() {
|
|
const invoice = useInvoice()
|
|
const router = useRouter()
|
|
|
|
console.log("InvoicePaymentsSection invoice:", invoice)
|
|
return (
|
|
<div>
|
|
<CrudResource<any>
|
|
extraParams={{ invoice_id: invoice?.id }}
|
|
routeKey={PAYMENT_RECEIVED_ROUTES.INDEX}
|
|
getClient={(api) => ({
|
|
list: (query?: any) => api.paymentReceived.list(query),
|
|
destroy: (id: string) => api.paymentReceived.destroy(id),
|
|
})}
|
|
tableHeader={({ invalidateQuery }) =>
|
|
<Card className='mb-4'>
|
|
<CardContent className='flex justify-between '>
|
|
<h2>Payments</h2>
|
|
<FormDialog title="Record Payment">
|
|
{(resourceId) => (
|
|
|
|
<PaymentReceivedForm
|
|
invoiceId={invoice?.id as string}
|
|
invoiceCustomer={invoice?.customer as any}
|
|
invoiceAmount={invoice?.balance_due as any}
|
|
resourceId={resourceId}
|
|
onSuccess={()=>{router.refresh(); invalidateQuery()}}
|
|
/>
|
|
|
|
)}
|
|
</FormDialog>
|
|
|
|
</CardContent>
|
|
</Card>
|
|
}
|
|
columns={({ actionsColumn }) => [
|
|
{
|
|
accessorKey: "payment_number",
|
|
header: ({ column }) => <ColumnHeader column={column} title="Payment #" />,
|
|
cell: ({ row }) => {
|
|
const item = row.original as any
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<HashIcon className="h-4 w-4 text-muted-foreground" />
|
|
<span className="font-medium">{item.payment_number || "—"}</span>
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "customer_name",
|
|
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
|
|
cell: ({ row }) => {
|
|
const item = row.original as any
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<UserIcon className="h-4 w-4 text-muted-foreground" />
|
|
<span>{item.customer_name || "—"}</span>
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "job_card_name",
|
|
header: ({ column }) => <ColumnHeader column={column} title="Job Card" />,
|
|
cell: ({ row }) => {
|
|
const item = row.original as any
|
|
const label = item.job_card_number || item.job_card_name
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<ClipboardListIcon className="h-4 w-4 text-muted-foreground" />
|
|
<span>{label || "—"}</span>
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "amount_received",
|
|
header: ({ column }) => <ColumnHeader column={column} title="Amount" />,
|
|
cell: ({ row }) => {
|
|
const item = row.original as any
|
|
const amount = item.amount_received
|
|
? Number(item.amount_received).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})
|
|
: "—"
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<BadgeDollarSignIcon className="h-4 w-4 text-emerald-600" />
|
|
<span className="font-semibold text-emerald-700 dark:text-emerald-400">
|
|
{amount}
|
|
</span>
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "payment_mode",
|
|
header: ({ column }) => <ColumnHeader column={column} title="Payment Mode" />,
|
|
cell: ({ row }) => {
|
|
const item = row.original as any
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<CreditCardIcon className="h-4 w-4 text-muted-foreground" />
|
|
<span className="capitalize">{item.payment_mode?.title || "—"}</span>
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "payment_date",
|
|
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
|
|
cell: ({ row }) => {
|
|
const item = row.original as any
|
|
const formatted = item.payment_date
|
|
? new Date(item.payment_date).toLocaleDateString(undefined, {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
})
|
|
: "—"
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<CalendarIcon className="h-4 w-4 text-muted-foreground" />
|
|
<span>{formatted}</span>
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "note",
|
|
header: () => <span>Note</span>,
|
|
enableSorting: false,
|
|
cell: ({ row }) => {
|
|
const item = row.original as any
|
|
const note = item.note
|
|
if (!note) return <span className="text-muted-foreground">—</span>
|
|
return (
|
|
<span className="max-w-50 truncate block" title={note}>
|
|
{note}
|
|
</span>
|
|
)
|
|
},
|
|
},
|
|
// actionsColumn(),
|
|
]}
|
|
></CrudResource>
|
|
</div>
|
|
)
|
|
}
|