108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
import { ColumnDef } from '@tanstack/react-table';
|
|
import { Expense } from '@/types';
|
|
import { DataTableColumnHeader } from '@/components/data-table-column-header';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Pencil, Trash2, ImagePlus } from 'lucide-react';
|
|
|
|
interface ColumnProps {
|
|
onEdit: (expense: Expense) => void;
|
|
onDelete: (expense: Expense) => void;
|
|
onPreviewImage: (url: string) => void;
|
|
}
|
|
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat('id-ID', {
|
|
style: 'currency',
|
|
currency: 'IDR',
|
|
minimumFractionDigits: 0,
|
|
}).format(amount);
|
|
};
|
|
|
|
export const getColumns = ({ onEdit, onDelete, onPreviewImage }: ColumnProps): ColumnDef<Expense>[] => [
|
|
{
|
|
accessorKey: "proof_url",
|
|
header: "Bukti",
|
|
cell: ({ row }) => {
|
|
const url = row.original.proof_url;
|
|
return url ? (
|
|
<button onClick={() => onPreviewImage(url)} className="block w-fit">
|
|
<img src={url} alt="Proof" className="h-10 w-10 object-cover rounded-md border hover:opacity-80 transition-opacity" />
|
|
</button>
|
|
) : (
|
|
<div className="h-10 w-10 flex items-center justify-center bg-muted rounded-md border">
|
|
<ImagePlus className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
);
|
|
},
|
|
meta: { title: "Bukti" },
|
|
},
|
|
{
|
|
accessorKey: "user.name",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Pegawai" />
|
|
),
|
|
cell: ({ row }) => row.original.user?.name,
|
|
meta: { title: "Pegawai" },
|
|
},
|
|
{
|
|
accessorKey: "name",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Nama" />
|
|
),
|
|
meta: { title: "Nama" },
|
|
},
|
|
{
|
|
accessorKey: "amount",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Nominal" />
|
|
),
|
|
cell: ({ row }) => formatCurrency(row.original.amount),
|
|
meta: { title: "Nominal" },
|
|
},
|
|
{
|
|
accessorKey: "created_at",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Tanggal" />
|
|
),
|
|
cell: ({ row }) => new Date(row.original.created_at).toLocaleDateString('id-ID', {
|
|
day: '2-digit',
|
|
month: 'long',
|
|
year: 'numeric'
|
|
}),
|
|
meta: { title: "Tanggal" },
|
|
},
|
|
{
|
|
id: "actions",
|
|
header: "Aksi",
|
|
cell: ({ row }) => {
|
|
const expense = row.original;
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className='text-yellow-600' onClick={() => onEdit(expense)}>
|
|
<Pencil className="size-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Ubah</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className='text-red-600' onClick={() => onDelete(expense)}>
|
|
<Trash2 className="size-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Hapus</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
},
|
|
meta: { title: "Aksi" },
|
|
},
|
|
];
|