import type { ColumnDef } from '@tanstack/react-table'; import { CheckCircle, Pencil, Trash2, XCircle } from 'lucide-react'; import { RowActions } from '@/components/data-display'; import { Badge } from '@/components/ui/badge'; export type LeaveRequest = { id: number; start_date: string; formatted_start_date: string; end_date: string; formatted_end_date: string; total_days: number; status: 'pending' | 'approved' | 'rejected' | 'cancelled'; created_at: string; employee: { user_id: number; user: { user_profile: { full_name: string; }; }; }; }; function getStatusBadge(status: string) { const statusConfig: Record = { pending: { label: 'Menunggu', className: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-100', }, approved: { label: 'Disetujui', className: 'bg-green-100 text-green-800 hover:bg-green-100', }, rejected: { label: 'Ditolak', className: 'bg-red-100 text-red-800 hover:bg-red-100', }, cancelled: { label: 'Dibatalkan', className: 'bg-gray-100 text-gray-800 hover:bg-gray-100', }, }; const config = statusConfig[status] ?? statusConfig.pending; return ( {config.label} ); } type CreateColumnsParams = { handleEdit: (leaveRequest: LeaveRequest) => void; handleDeleteClick: (leaveRequest: LeaveRequest) => void; handleApprove: (leaveRequest: LeaveRequest) => void; handleReject: (leaveRequest: LeaveRequest) => void; can: (permission: string) => boolean; currentUserId: number; }; export function createLeaveRequestColumns( params: CreateColumnsParams, ): ColumnDef[] { const { handleEdit, handleDeleteClick, handleApprove, handleReject, can, currentUserId } = params; const columns: ColumnDef[] = [ { id: 'employee_name', header: () => Oleh, cell: ({ row }) => { const employee = row.original.employee; return ( {employee?.user?.user_profile?.full_name ?? '-'} ); }, }, { accessorKey: 'formatted_start_date', header: () => Tanggal Mulai, cell: ({ row }) => ( {row.getValue('formatted_start_date') as string} ), }, { accessorKey: 'formatted_end_date', header: () => Tanggal Selesai, cell: ({ row }) => ( {row.getValue('formatted_end_date') as string} ), }, { accessorKey: 'total_days', header: () => Hari, cell: ({ row }) => ( {row.getValue('total_days') as number} hari ), }, { accessorKey: 'status', header: () => Status, cell: ({ row }) => ( {getStatusBadge(row.getValue('status') as string)} ), }, ]; if ( can('leave_requests.verify') || can('leave_requests.update') || can('leave_requests.delete') ) { columns.push({ id: 'actions', header: () => Aksi, meta: { className: 'w-[150px] text-center', headerClassName: 'w-[150px] text-center', }, cell: ({ row }) => { const leaveRequest = row.original; return ( ), show: can('leave_requests.verify') && leaveRequest.status === 'pending', onClick: () => handleApprove(leaveRequest), }, { label: 'Tolak', icon: ( ), show: can('leave_requests.verify') && leaveRequest.status === 'pending', onClick: () => handleReject(leaveRequest), }, { label: 'Edit', icon: , show: can('leave_requests.update') && leaveRequest.status === 'pending' && leaveRequest.employee?.user_id === currentUserId, onClick: () => handleEdit(leaveRequest), }, { label: 'Hapus', icon: ( ), show: can('leave_requests.delete') && leaveRequest.status === 'pending' && leaveRequest.employee?.user_id === currentUserId, onClick: () => handleDeleteClick(leaveRequest), }, ]} /> ); }, }); } return columns; }