siakad-itm/resources/js/pages/admin/services/academic-advising-logs/columns.tsx

110 lines
3.7 KiB
TypeScript

import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { Pencil, Trash2 } from 'lucide-react';
import { RowActions } from '@/components/row-actions';
import type { AcademicAdvisingLog } from '@/types/academic-advising-log';
export type { AcademicAdvisingLog } from '@/types/academic-advising-log';
type CreateColumnsParams = {
handleEdit: (log: AcademicAdvisingLog) => void;
handleDeleteClick: (log: AcademicAdvisingLog) => void;
canUpdate: boolean;
canDelete: boolean;
};
export function createAcademicAdvisingLogColumns(
params: CreateColumnsParams,
): ColumnDef<AcademicAdvisingLog>[] {
const { handleEdit, handleDeleteClick, canUpdate, canDelete } = params;
const columns: ColumnDef<AcademicAdvisingLog>[] = [
{
accessorKey: 'student.student_number',
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>
);
},
},
{
accessorKey: 'lecturer.user.profile.full_name',
header: () => <span>Dosen Wali</span>,
cell: ({ row }) => {
const lecturer = row.original.lecturer;
return (
<div>
<p className="font-medium">
{lecturer?.user?.profile?.full_name ?? 'N/A'}
</p>
<p className="text-xs text-muted-foreground">
{lecturer?.lecturer_number}
</p>
</div>
);
},
},
{
accessorKey: 'topic',
header: () => <span>Topik</span>,
cell: ({ row }) => row.original.topic ?? '-',
},
{
accessorKey: 'session_date',
header: () => <span>Tanggal Sesi</span>,
cell: ({ row }) => {
const sessionDate = row.original.session_date;
return sessionDate
? format(new Date(sessionDate), 'd MMM yyyy, HH:mm')
: '-';
},
},
];
if (canUpdate || canDelete) {
columns.push({
id: 'actions',
header: () => <span className="block text-center">Aksi</span>,
meta: {
className: 'w-[100px] text-center',
headerClassName: 'w-[100px] text-center',
},
cell: ({ row }) => (
<RowActions
actions={[
{
label: 'Edit',
icon: <Pencil className="h-4 w-4" />,
show: canUpdate,
onClick: () => handleEdit(row.original),
},
{
label: 'Hapus',
icon: (
<Trash2 className="h-4 w-4 text-destructive" />
),
show: canDelete,
onClick: () => handleDeleteClick(row.original),
},
]}
/>
),
});
}
return columns;
}