107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
import type { ColumnDef } from '@tanstack/react-table';
|
|
import { Eye } from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export type FormHistory = {
|
|
id: number;
|
|
causer_id: number;
|
|
module: string;
|
|
event: string;
|
|
description: string;
|
|
attribute_changes: {
|
|
new?: Record<string, unknown>;
|
|
old?: Record<string, unknown>;
|
|
} | null;
|
|
created_at: string;
|
|
formatted_created_at: string;
|
|
causer: {
|
|
id: number;
|
|
username: string;
|
|
full_name: string;
|
|
};
|
|
};
|
|
|
|
const eventBadgeVariant: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
|
|
created: 'default',
|
|
updated: 'secondary',
|
|
deleted: 'destructive',
|
|
};
|
|
|
|
const eventLabel: Record<string, string> = {
|
|
created: 'Ditambahkan',
|
|
updated: 'Diperbarui',
|
|
deleted: 'Dihapus',
|
|
};
|
|
|
|
type CreateColumnsParams = {
|
|
handleDetail: (item: FormHistory) => void;
|
|
};
|
|
|
|
export function createFormHistoryColumns({ handleDetail }: CreateColumnsParams): ColumnDef<FormHistory>[] {
|
|
return [
|
|
{
|
|
accessorKey: 'formatted_created_at',
|
|
header: () => <span>Waktu</span>,
|
|
cell: ({ row }) => (
|
|
<span className="text-sm text-muted-foreground">
|
|
{row.original.formatted_created_at}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'causer',
|
|
header: () => <span>User</span>,
|
|
cell: ({ row }) => (
|
|
<span className="font-medium">
|
|
{row.original.causer?.full_name ?? row.original.causer?.username ?? '-'}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'module',
|
|
header: () => <span>Module</span>,
|
|
cell: ({ row }) => (
|
|
<span>{row.getValue('module') as string}</span>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'event',
|
|
header: () => <span>Aksi</span>,
|
|
cell: ({ row }) => {
|
|
const event = row.getValue('event') as string;
|
|
|
|
return (
|
|
<Badge variant={eventBadgeVariant[event] ?? 'outline'}>
|
|
{eventLabel[event] ?? event}
|
|
</Badge>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'description',
|
|
header: () => <span>Deskripsi</span>,
|
|
cell: ({ row }) => (
|
|
<span>{row.getValue('description') as string}</span>
|
|
),
|
|
},
|
|
{
|
|
id: 'actions',
|
|
header: () => <span className="block text-center">Aksi</span>,
|
|
meta: {
|
|
className: 'w-[80px] text-center',
|
|
headerClassName: 'w-[80px] text-center',
|
|
},
|
|
cell: ({ row }) => (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleDetail(row.original)}
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
),
|
|
},
|
|
];
|
|
}
|