87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ColumnDef } from '@tanstack/react-table';
|
|
import { format } from 'date-fns';
|
|
import { CheckCircle2, Clock, Eye, XCircle } from 'lucide-react';
|
|
|
|
const TableColumn = (onVerifyClick: (payment: PaymentHistory) => void): ColumnDef<PaymentHistory>[] => {
|
|
return [
|
|
{
|
|
accessorKey: 'id',
|
|
header: () => <div className="pl-4">ID</div>,
|
|
cell: ({ row }) => <div className="pl-4 font-medium">#{row.original.id}</div>,
|
|
},
|
|
{
|
|
accessorKey: 'user.name',
|
|
header: 'Customer',
|
|
cell: ({ row }) => (
|
|
<div>
|
|
<div className="font-medium">{row.original.user.name}</div>
|
|
<div className="text-muted-foreground text-xs">{row.original.user.email}</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'purchase.title',
|
|
header: 'Item',
|
|
cell: ({ row }) => <div className="max-w-[200px] truncate">{row.original.purchase?.title || 'N/A'}</div>,
|
|
},
|
|
{
|
|
accessorKey: 'amount',
|
|
header: 'Amount',
|
|
cell: ({ row }) => <div className="font-medium">${Number(row.original.amount).toFixed(2)}</div>,
|
|
},
|
|
{
|
|
accessorKey: 'meta.payment_date',
|
|
header: 'Payment Date',
|
|
cell: ({ row }) => (
|
|
<div className="text-sm">
|
|
{row.original.meta?.payment_date ? format(new Date(row.original.meta.payment_date as string), 'MMM dd, yyyy') : 'N/A'}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'meta.status',
|
|
header: 'Status',
|
|
cell: ({ row }) => {
|
|
const status = row.original.meta?.status || 'pending';
|
|
|
|
return (
|
|
<Badge variant={status === 'verified' ? 'default' : status === 'rejected' ? 'destructive' : 'secondary'} className="gap-1">
|
|
{status === 'verified' ? (
|
|
<CheckCircle2 className="h-3 w-3" />
|
|
) : status === 'rejected' ? (
|
|
<XCircle className="h-3 w-3" />
|
|
) : (
|
|
<Clock className="h-3 w-3" />
|
|
)}
|
|
<span>{status as string}</span>
|
|
</Badge>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'created_at',
|
|
header: 'Submitted At',
|
|
cell: ({ row }) => <div className="text-sm">{format(new Date(row.original.created_at), 'MMM dd, yyyy HH:mm')}</div>,
|
|
},
|
|
{
|
|
id: 'actions',
|
|
header: () => <div className="pr-4 text-end">Actions</div>,
|
|
cell: ({ row }) => {
|
|
const status = row.original.meta?.status || 'pending';
|
|
return (
|
|
<div className="flex justify-end gap-2 pr-4">
|
|
<Button size="sm" variant="outline" onClick={() => onVerifyClick(row.original)} className="gap-1">
|
|
<Eye className="h-3 w-3" />
|
|
{status === 'pending' ? 'Verify' : 'View'}
|
|
</Button>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
};
|
|
|
|
export default TableColumn;
|