garage-erp/apps/dashboard/app/(authenticated)/sales/payment-received/page.tsx

"use client"

import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog"
import { PaymentReceivedForm } from "@/modules/payment-received/payment-received-form"
import { PAYMENT_RECEIVED_ROUTES } from "@garage/api"
import {
    BadgeDollarSignIcon,
    CalendarIcon,
    CreditCardIcon,
    HashIcon,
    UserIcon,
    ClipboardListIcon,
} from "lucide-react"
import { getFullName } from "@/shared/utils/getFullName"
import { RelationLink } from "@/shared/components/relation-link"

type PaymentReceivedItem = {
    id: number
    payment_number?: string
    customer_name?: string
    job_card_name?: string
    job_card_number?: string
    payment_mode_name?: string
    amount_received?: string | number
    payment_date?: string
    note?: string
    status?: string
    created_at?: string
}

export default function PaymentReceivedPage() {
    return (
        <ResourcePage<{ list(query?: any): Promise<any>; destroy(id: string): Promise<any> }>
             routeKey={PAYMENT_RECEIVED_ROUTES.INDEX}
             searchable
             searchPlaceholder="Search payments..."
            getClient={(api) => ({
                list: (query?: any) => api.paymentReceived.list(query),
                destroy: (id: string) => api.paymentReceived.destroy(id),
            })}
            headerProps={({ invalidateQuery }) => ({
                actions: (
                    <FormDialog title="Record Payment">
                        {(resourceId) => (
                            <PaymentReceivedForm
                                resourceId={resourceId}
                                onSuccess={invalidateQuery}
                            />
                        )}
                    </FormDialog>
                ),
            })}
            columns={({ actionsColumn }) => [
                {
                    accessorKey: "payment_number",
                    header: ({ column }) => <ColumnHeader column={column} title="Payment #" />,
                    cell: ({ row }) => {
                        const item = row.original as unknown as PaymentReceivedItem
                        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",
                    header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
                    cell: ({ row }) => {
                        const item: any = row.original as unknown as PaymentReceivedItem
                        const customer = item.customer
                        return (
                            <RelationLink
                                href={customer?.id ? `/sales/customers/${customer.id}` : null}
                                icon={UserIcon}
                                label={getFullName(customer) || item.customer_name}
                            />
                        )
                    },
                },
                {
                    accessorKey: "job_card",
                    header: ({ column }) => <ColumnHeader column={column} title="Job Card" />,
                    cell: ({ row }) => {
                        const item: any = row.original as unknown as PaymentReceivedItem
                        const jobCard = item.job_card
                        return (
                            <RelationLink
                                href={jobCard?.id ? `/sales/job-cards/${jobCard.id}` : null}
                                icon={ClipboardListIcon}
                                label={jobCard?.title || item.job_card_name}
                            />
                        )
                    },
                },
                {
                    accessorKey: "amount_received",
                    header: ({ column }) => <ColumnHeader column={column} title="Amount" />,
                    cell: ({ row }) => {
                        const item = row.original as unknown as PaymentReceivedItem
                        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:any = row.original as unknown as PaymentReceivedItem
                        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 unknown as PaymentReceivedItem
                        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 unknown as PaymentReceivedItem
                        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(),
            ]}
        />
    )
}