siakad-itm/resources/js/pages/admin/users/lecturers/columns.tsx
Yoga Pangestu 9c03876a71
Some checks failed
tests / ci (pull_request) Has been cancelled
feat: implement user status management with active/inactive toggle
2026-08-30 11:08:08 +07:00

127 lines
4.3 KiB
TypeScript

import type { ColumnDef } from '@tanstack/react-table';
import { Key, Pencil, Trash2 } from 'lucide-react';
import { GenderBadge } from '@/components/gender-badge';
import { RowActions } from '@/components/row-actions';
import { UserActiveSwitch } from '@/components/user-active-switch';
export type Lecturer = {
id: number;
username: string;
email: string;
is_active: boolean;
profile: { full_name: string; phone_number: string; gender: string } | null;
lecturer: {
lecturer_number: string;
department: { name: string } | null;
} | null;
};
type CreateColumnsParams = {
handleEdit: (lecturer: Lecturer) => void;
handleDeleteClick: (lecturer: Lecturer) => void;
handleResetPassword: (lecturer: Lecturer) => void;
handleUserStatusChange: (lecturer: Lecturer, isActive: boolean) => void;
};
export function createLecturerColumns(
params: CreateColumnsParams,
): ColumnDef<Lecturer>[] {
const {
handleEdit,
handleDeleteClick,
handleResetPassword,
handleUserStatusChange,
} = params;
return [
{
id: 'identity',
header: () => <span>NIDN</span>,
cell: ({ row }) => (
<div className="flex flex-col">
<span>{row.original.lecturer?.lecturer_number ?? '-'}</span>
<span className="text-sm text-muted-foreground">
{row.original.profile?.full_name ?? '-'}
</span>
</div>
),
},
{
id: 'account',
header: () => <span>Akun</span>,
cell: ({ row }) => (
<div className="flex flex-col">
<span>{row.original.username}</span>
<span className="text-sm text-muted-foreground">
{row.original.email}
</span>
</div>
),
},
{
accessorKey: 'lecturer.department.name',
header: () => <span>Jurusan</span>,
cell: ({ row }) => row.original.lecturer?.department?.name ?? '-',
},
{
accessorKey: 'profile.phone_number',
header: () => <span>Nomor Telepon</span>,
cell: ({ row }) => row.original.profile?.phone_number ?? '-',
},
{
accessorKey: 'profile.gender',
header: () => <span>Jenis Kelamin</span>,
cell: ({ row }) => (
<GenderBadge gender={row.original.profile?.gender} />
),
},
{
accessorKey: 'is_active',
header: () => <span>Status Akun</span>,
cell: ({ row }) => (
<UserActiveSwitch
isActive={row.original.is_active}
onChange={(isActive) =>
handleUserStatusChange(row.original, isActive)
}
/>
),
},
{
id: 'actions',
header: () => <span className="block text-center">Aksi</span>,
meta: {
className: 'w-[100px] text-center',
headerClassName: 'w-[100px] text-center',
},
cell: ({ row }) => {
const lecturer = row.original;
return (
<RowActions
actions={[
{
label: 'Edit',
icon: <Pencil className="h-4 w-4" />,
onClick: () => handleEdit(lecturer),
},
{
label: 'Reset Kata Sandi',
icon: <Key className="h-4 w-4" />,
onClick: () => handleResetPassword(lecturer),
},
{
label: 'Hapus',
icon: (
<Trash2 className="h-4 w-4 text-destructive" />
),
onClick: () => handleDeleteClick(lecturer),
},
]}
/>
);
},
},
];
}