dstpabuaran.com/resources/js/pages/admin/hr/leave-request/columns.tsx

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<string, { label: string; className: string }> = {
        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 (
        <Badge variant="secondary" className={config.className}>
            {config.label}
        </Badge>
    );
}

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<LeaveRequest>[] {
    const { handleEdit, handleDeleteClick, handleApprove, handleReject, can, currentUserId } =
        params;

    const columns: ColumnDef<LeaveRequest>[] = [
        {
            id: 'employee_name',
            header: () => <span>Oleh</span>,
            cell: ({ row }) => {
                const employee = row.original.employee;

                return (
                    <span>
                        {employee?.user?.user_profile?.full_name ?? '-'}
                    </span>
                );
            },
        },
        {
            accessorKey: 'formatted_start_date',
            header: () => <span>Tanggal Mulai</span>,
            cell: ({ row }) => (
                <span>
                    {row.getValue('formatted_start_date') as string}
                </span>
            ),
        },
        {
            accessorKey: 'formatted_end_date',
            header: () => <span>Tanggal Selesai</span>,
            cell: ({ row }) => (
                <span>
                    {row.getValue('formatted_end_date') as string}
                </span>
            ),
        },
        {
            accessorKey: 'total_days',
            header: () => <span>Hari</span>,
            cell: ({ row }) => (
                <span className="font-medium">
                    {row.getValue('total_days') as number} hari
                </span>
            ),
        },
        {
            accessorKey: 'status',
            header: () => <span>Status</span>,
            cell: ({ row }) => (
                <span>{getStatusBadge(row.getValue('status') as string)}</span>
            ),
        },
    ];

    if (
        can('leave_requests.verify') ||
        can('leave_requests.update') ||
        can('leave_requests.delete')
    ) {
        columns.push({
            id: 'actions',
            header: () => <span className="block text-center">Aksi</span>,
            meta: {
                className: 'w-[150px] text-center',
                headerClassName: 'w-[150px] text-center',
            },
            cell: ({ row }) => {
                const leaveRequest = row.original;

                return (
                    <RowActions
                        actions={[
                            {
                                label: 'Setujui',
                                icon: (
                                    <CheckCircle className="h-4 w-4 text-green-600" />
                                ),
                                show:
                                    can('leave_requests.verify') &&
                                    leaveRequest.status === 'pending',
                                onClick: () => handleApprove(leaveRequest),
                            },
                            {
                                label: 'Tolak',
                                icon: (
                                    <XCircle className="h-4 w-4 text-red-600" />
                                ),
                                show:
                                    can('leave_requests.verify') &&
                                    leaveRequest.status === 'pending',
                                onClick: () => handleReject(leaveRequest),
                            },
                            {
                                label: 'Edit',
                                icon: <Pencil className="h-4 w-4" />,
                                show:
                                    can('leave_requests.update') &&
                                    leaveRequest.status === 'pending' &&
                                    leaveRequest.employee?.user_id === currentUserId,
                                onClick: () => handleEdit(leaveRequest),
                            },
                            {
                                label: 'Hapus',
                                icon: (
                                    <Trash2 className="h-4 w-4 text-destructive" />
                                ),
                                show:
                                    can('leave_requests.delete') &&
                                    leaveRequest.status === 'pending' &&
                                    leaveRequest.employee?.user_id === currentUserId,
                                onClick: () => handleDeleteClick(leaveRequest),
                            },
                        ]}
                    />
                );
            },
        });
    }

    return columns;
}