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

120 lines
4.2 KiB
TypeScript

import type { ColumnDef } from '@tanstack/react-table';
import { Eye, 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 = {
handleView: (log: AcademicAdvisingLog) => void;
handleEdit: (log: AcademicAdvisingLog) => void;
handleDeleteClick: (log: AcademicAdvisingLog) => void;
canUpdate: boolean;
canDelete: boolean;
};
export function createAcademicAdvisingLogColumns(
params: CreateColumnsParams,
): ColumnDef<AcademicAdvisingLog>[] {
const { handleView, handleEdit, handleDeleteClick, canUpdate, canDelete } =
params;
const columns: ColumnDef<AcademicAdvisingLog>[] = [
{
accessorKey: 'students',
header: () => <span>Mahasiswa</span>,
cell: ({ row }) => {
const students = row.original.students;
if (students.length === 0) {
return <span className="text-muted-foreground">-</span>;
}
const visible = students.slice(0, 2);
const remaining = students.length - visible.length;
return (
<div className="space-y-1">
{visible.map((student) => (
<div key={student.id}>
<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>
))}
{remaining > 0 && (
<p className="text-xs text-muted-foreground">
+{remaining} mahasiswa lainnya
</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 ?? '-',
},
];
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: 'Lihat Detail',
icon: <Eye className="h-4 w-4" />,
onClick: () => handleView(row.original),
},
{
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;
}