dstpabuaran.com/resources/js/pages/admin/finance/employee-advance/columns.tsx

import type { ColumnDef } from '@tanstack/react-table';
import { CheckCircle, CircleDollarSign, Pencil, Trash2 } from 'lucide-react';
import { RowActions } from '@/components/row-actions';
import { Badge } from '@/components/ui/badge';

export type EmployeeAdvance = {
    id: number;
    amount: number;
    formatted_amount: string;
    paid_amount: number;
    formatted_paid_amount: string;
    description: string;
    due_date: string;
    formatted_due_date: string;
    status: 'pending' | 'approved' | 'paid' | 'rejected' | 'cancelled';
    created_at: string;
    formatted_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',
        },
        paid: {
            label: 'Dibayar',
            className: 'bg-blue-100 text-blue-800 hover:bg-blue-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: (employeeAdvance: EmployeeAdvance) => void;
    handleDeleteClick: (employeeAdvance: EmployeeAdvance) => void;
    handleApprove: (employeeAdvance: EmployeeAdvance) => void;
    handlePay: (employeeAdvance: EmployeeAdvance) => void;
    can: (permission: string) => boolean;
};

export function createEmployeeAdvanceColumns(
    params: CreateColumnsParams,
): ColumnDef<EmployeeAdvance>[] {
    const { handleEdit, handleDeleteClick, handleApprove, handlePay, can } =
        params;

    return [
        {
            accessorKey: 'formatted_created_at',
            header: () => <span>Tanggal</span>,
            cell: ({ row }) => (
                <span>{row.getValue('formatted_created_at') as string}</span>
            ),
        },
        {
            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_amount',
            header: () => <span>Jumlah</span>,
            cell: ({ row }) => (
                <span className="font-medium text-red-600">
                    - {row.getValue('formatted_amount') as string}
                </span>
            ),
        },
        {
            accessorKey: 'description',
            header: () => <span>Keterangan</span>,
            cell: ({ row }) => (
                <span className="block max-w-[200px] truncate">
                    {row.getValue('description') as string}
                </span>
            ),
        },
        {
            accessorKey: 'formatted_due_date',
            header: () => <span>Jatuh Tempo</span>,
            cell: ({ row }) => (
                <span>
                    {row.getValue('formatted_due_date') as string}
                </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 employeeAdvance = row.original;

                return (
                    <RowActions
                        actions={[
                            {
                                label: 'Setujui',
                                icon: (
                                    <CheckCircle className="h-4 w-4 text-green-600" />
                                ),
                                show:
                                    can('employee_advances.verify') &&
                                    employeeAdvance.status === 'pending',
                                onClick: () => handleApprove(employeeAdvance),
                            },
                            {
                                label: 'Bayar',
                                icon: (
                                    <CircleDollarSign className="h-4 w-4 text-blue-600" />
                                ),
                                show:
                                    can('employee_advances.pay') &&
                                    employeeAdvance.status === 'approved',
                                onClick: () => handlePay(employeeAdvance),
                            },
                            {
                                label: 'Edit',
                                icon: <Pencil className="h-4 w-4" />,
                                show: can('employee_advances.update'),
                                onClick: () => handleEdit(employeeAdvance),
                            },
                            {
                                label: 'Hapus',
                                icon: (
                                    <Trash2 className="h-4 w-4 text-destructive" />
                                ),
                                show: can('employee_advances.delete'),
                                onClick: () =>
                                    handleDeleteClick(employeeAdvance),
                            },
                        ]}
                    />
                );
            },
        },
    ];
}