siakad-itm/resources/js/pages/admin/manage/course-registrations/columns.tsx

import type { ColumnDef } from '@tanstack/react-table';
import { Check, Eye, X } from 'lucide-react';
import { RowActions } from '@/components/row-actions';
import { Badge } from '@/components/ui/badge';
import { show } from '@/routes/admin/manage/course-registrations';
import type { CourseRegistrationSubmission } from '@/types/course-registration';
import { RegistrationStatusLabels } from '@/types/course-registration';

export type { CourseRegistrationSubmission } from '@/types/course-registration';

type CreateColumnsParams = {
    handleApprove: (submission: CourseRegistrationSubmission) => void;
    handleRejectClick: (submission: CourseRegistrationSubmission) => void;
    canApprove: boolean;
    canReject: boolean;
};

export function createCourseRegistrationColumns(
    params: CreateColumnsParams,
): ColumnDef<CourseRegistrationSubmission>[] {
    const { handleApprove, handleRejectClick, canApprove, canReject } = params;

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

                return (
                    <div>
                        <p className="font-medium">
                            {student?.user?.profile?.full_name ?? 'N/A'}
                        </p>
                        <p className="text-xs text-muted-foreground">
                            {student?.student_number} &middot;{' '}
                            {student?.department?.name ?? '-'}
                        </p>
                    </div>
                );
            },
        },
        {
            id: 'semester',
            header: () => <span className="block text-center">Semester</span>,
            meta: {
                className: 'w-[100px] text-center',
                headerClassName: 'w-[100px] text-center',
            },
            cell: ({ row }) => row.original.student?.current_semester ?? '-',
        },
        {
            id: 'count',
            header: () => <span className="block text-center">Jumlah</span>,
            meta: {
                className: 'w-[100px] text-center',
                headerClassName: 'w-[100px] text-center',
            },
            cell: ({ row }) => row.original.course_registrations.length,
        },
        {
            accessorKey: 'status',
            header: () => <span className="block text-center">Status</span>,
            meta: {
                className: 'w-[140px] text-center',
                headerClassName: 'w-[140px] text-center',
            },
            cell: ({ row }) => {
                const status = row.original.status;

                return (
                    <div className="flex justify-center">
                        <Badge
                            variant={
                                status === 'approved'
                                    ? 'default'
                                    : status === 'rejected'
                                      ? 'destructive'
                                      : 'outline'
                            }
                        >
                            {RegistrationStatusLabels[status]}
                        </Badge>
                    </div>
                );
            },
        },
        {
            id: 'actions',
            header: () => <span className="block text-center">Aksi</span>,
            meta: {
                className: 'w-[130px] text-center',
                headerClassName: 'w-[130px] text-center',
            },
            cell: ({ row }) => {
                const submission = row.original;

                return (
                    <RowActions
                        actions={[
                            {
                                label: 'Lihat Detail',
                                icon: <Eye className="h-4 w-4" />,
                                href: show.url(submission.id),
                            },
                            {
                                label: 'Setujui',
                                icon: <Check className="h-4 w-4" />,
                                iconClassName: 'text-primary',
                                show:
                                    submission.status === 'submitted' &&
                                    canApprove,
                                onClick: () => handleApprove(submission),
                            },
                            {
                                label: 'Tolak',
                                icon: <X className="h-4 w-4" />,
                                iconClassName: 'text-destructive',
                                show:
                                    submission.status === 'submitted' &&
                                    canReject,
                                onClick: () => handleRejectClick(submission),
                            },
                        ]}
                    />
                );
            },
        },
    ];
}