103 lines
3.8 KiB
TypeScript
103 lines
3.8 KiB
TypeScript
import { ColumnDef } from '@tanstack/react-table';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
export interface Activity {
|
|
id: number;
|
|
description: string;
|
|
module: string;
|
|
subject_id: number | string | null;
|
|
causer: string;
|
|
properties: any;
|
|
created_at: string;
|
|
date: string;
|
|
}
|
|
|
|
export function getColumns(): ColumnDef<Activity>[] {
|
|
return [
|
|
{
|
|
accessorKey: 'date',
|
|
header: 'Waktu',
|
|
cell: ({ row }) => (
|
|
<div className="flex flex-col">
|
|
<span className="font-medium text-sm">{row.original.date}</span>
|
|
<span className="text-[10px] text-muted-foreground">{row.original.created_at}</span>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
accessorKey: 'description',
|
|
header: 'Aksi',
|
|
cell: ({ row }) => {
|
|
const label = row.original.description;
|
|
|
|
if (label === 'TAMBAH') {
|
|
return (
|
|
<Badge className="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300 uppercase text-[10px]">
|
|
{label}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
if (label === 'UBAH') {
|
|
return (
|
|
<Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300 uppercase text-[10px]">
|
|
{label}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
if (label === 'HAPUS') {
|
|
return (
|
|
<Badge className="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300 uppercase text-[10px]">
|
|
{label}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Badge variant="outline" className="uppercase text-[10px]">
|
|
{label}
|
|
</Badge>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'module',
|
|
header: 'Modul',
|
|
},
|
|
{
|
|
accessorKey: 'causer',
|
|
header: 'Oleh',
|
|
},
|
|
{
|
|
accessorKey: 'properties',
|
|
header: 'Detail Perubahan',
|
|
cell: ({ row }) => {
|
|
const attributes = row.original.properties?.attributes;
|
|
const old = row.original.properties?.old;
|
|
|
|
if (!attributes) return <span className="text-muted-foreground text-xs italic">-</span>;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-1 py-1 max-w-[400px]">
|
|
{Object.entries(attributes).map(([key, value]) => {
|
|
return (
|
|
<div key={key} className="text-[11px] leading-tight flex flex-wrap items-center gap-1">
|
|
<span className="font-semibold text-indigo-600 dark:text-indigo-400">{key}: </span>
|
|
{old && old[key] !== undefined && String(old[key]) !== String(value) && (
|
|
<span className="text-red-500 line-through opacity-60 italic">
|
|
{String(old[key])}
|
|
</span>
|
|
)}
|
|
{old && old[key] !== undefined && String(old[key]) !== String(value) && <span>→</span>}
|
|
<span className="text-green-600 dark:text-green-400 font-medium">{String(value)}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
},
|
|
];
|
|
}
|