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/row-actions';
import { Badge } from '@/components/ui/badge';
import { formatShortDate } from '@/lib/format';

export type LeaveRequest = {
    id: number;
    start_date: string;
    end_date: string;
    total_days: number;
    status: 'pending' | 'approved' | 'rejected' | 'cancelled';
    created_at: string;
    employee: {
        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;
};

export function createLeaveRequestColumns(
    params: CreateColumnsParams,
): ColumnDef<LeaveRequest>[] {
    const { handleEdit, handleDeleteClick, handleApprove, handleReject } =
        params;

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

                return (
                    <span>
                        {employee?.user?.user_profile?.full_name ?? '-'}
                    </span>
                );
            },
        },
        {
            accessorKey: 'start_date',
            header: () => <span>Tanggal Mulai</span>,
            cell: ({ row }) => (
                <span>
                    {formatShortDate(row.getValue('start_date') as string)}
                </span>
            ),
        },
        {
            accessorKey: 'end_date',
            header: () => <span>Tanggal Selesai</span>,
            cell: ({ row }) => (
                <span>
                    {formatShortDate(row.getValue('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>
            ),
        },
        {
            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: leaveRequest.status === 'pending',
                                onClick: () => handleApprove(leaveRequest),
                            },
                            {
                                label: 'Tolak',
                                icon: (
                                    <XCircle className="h-4 w-4 text-red-600" />
                                ),
                                show: leaveRequest.status === 'pending',
                                onClick: () => handleReject(leaveRequest),
                            },
                            {
                                label: 'Edit',
                                icon: <Pencil className="h-4 w-4" />,
                                onClick: () => handleEdit(leaveRequest),
                            },
                            {
                                label: 'Hapus',
                                icon: (
                                    <Trash2 className="h-4 w-4 text-destructive" />
                                ),
                                onClick: () => handleDeleteClick(leaveRequest),
                            },
                        ]}
                    />
                );
            },
        },
    ];
}