import type { ColumnDef } from '@tanstack/react-table'; import { format } from 'date-fns'; import { ClipboardList, Pencil, Trash2, Upload } from 'lucide-react'; import { RowActions } from '@/components/row-actions'; import { Badge } from '@/components/ui/badge'; import { index as submissionsIndex } from '@/routes/admin/academic-classes/assignments/submissions'; import type { Assignment } from '@/types/assignment'; import { AssignmentStatusLabels } from '@/types/assignment'; import { deadlineTextClass, percentageOf } from './utils'; export type { Assignment } from '@/types/assignment'; type CreateColumnsParams = { handleEdit: (assignment: Assignment) => void; handleDeleteClick: (assignment: Assignment) => void; handleSubmitClick: (assignment: Assignment) => void; canUpdate: boolean; canDelete: boolean; canSubmit: boolean; canViewSubmissions: boolean; }; export function createAssignmentColumns( params: CreateColumnsParams, ): ColumnDef[] { const { handleEdit, handleDeleteClick, handleSubmitClick, canUpdate, canDelete, canSubmit, canViewSubmissions, } = params; const columns: ColumnDef[] = [ { accessorKey: 'title', header: () => Judul, cell: ({ row }) => ( {row.getValue('title') as string} ), }, { accessorKey: 'course_class.course.name', header: () => Kelas, cell: ({ row }) => { const courseClass = row.original.course_class; if (!courseClass) { return '-'; } return `${courseClass.course?.code ?? ''} - ${courseClass.course?.name ?? ''}`; }, }, { accessorKey: 'deadline', header: () => Batas Waktu, cell: ({ row }) => { const assignment = row.original; return ( {format( new Date(assignment.deadline), 'd MMM yyyy, HH:mm', )} ); }, }, { accessorKey: 'status', header: () => Status, meta: { className: 'text-center', headerClassName: 'text-center', }, cell: ({ row }) => { const assignment = row.original; return ( {AssignmentStatusLabels[assignment.status]} ); }, }, { id: 'submissions', header: () => Pengumpulan, cell: ({ row }) => { const assignment = row.original; if (canSubmit) { const mySubmission = assignment.submissions?.[0]; return ( {mySubmission?.status === 'submitted' ? 'Sudah Mengumpulkan' : 'Belum Mengumpulkan'} ); } const enrollmentsCount = assignment.course_class?.enrollments_count ?? 0; return (
{assignment.submissions_count.toLocaleString( 'id-ID', )}{' '} / {enrollmentsCount.toLocaleString('id-ID')}{' '} mengumpulkan ( {percentageOf( assignment.submissions_count, enrollmentsCount, )} %) {assignment.graded_submissions_count.toLocaleString( 'id-ID', )}{' '} /{' '} {assignment.submissions_count.toLocaleString( 'id-ID', )}{' '} dinilai ( {percentageOf( assignment.graded_submissions_count, assignment.submissions_count, )} %)
); }, }, ]; columns.push({ id: 'actions', header: () => Aksi, meta: { className: 'w-[160px] text-center', headerClassName: 'w-[160px] text-center', }, cell: ({ row }) => { const assignment = row.original; const mySubmission = assignment.submissions?.[0]; return (
, show: canSubmit && assignment.status === 'open', onClick: () => handleSubmitClick(assignment), }, { label: 'Pengumpulan', icon: , show: canViewSubmissions, href: submissionsIndex.url(assignment.id), }, { label: 'Edit', icon: , show: canUpdate, onClick: () => handleEdit(assignment), }, { label: 'Hapus', icon: ( ), show: canDelete, onClick: () => handleDeleteClick(assignment), }, ]} />
); }, }); return columns; }