siakad-itm/resources/js/pages/admin/users/administrators/columns.tsx
Yoga Pangestu 2885de2c20 feat: add lecturer and student management pages with CRUD functionality
- Implemented LecturerEdit and LecturerIndex components for managing lecturers.
- Created StudentCreate and StudentEdit components for adding and editing students.
- Developed StudentIndex component for listing students with search and pagination.
- Added department and user types for better type safety.
- Updated routes for lecturers and students, including reset password functionality.
- Removed AppSidebar from dashboard for a cleaner layout.
2026-08-21 14:14:01 +07:00

93 lines
3.2 KiB
TypeScript

import { RowActions } from '@/components/row-actions';
import type { ColumnDef } from '@tanstack/react-table';
import { Key, Pencil, Trash2 } from 'lucide-react';
export type Administrator = {
id: number;
username: string;
email: string;
profile: { full_name: string; phone_number: string; gender: string } | null;
roles: { id: number; name: string }[];
};
type CreateColumnsParams = {
handleEdit: (admin: Administrator) => void;
handleDeleteClick: (admin: Administrator) => void;
handleResetPassword: (admin: Administrator) => void;
};
export function createAdministratorColumns(
params: CreateColumnsParams,
): ColumnDef<Administrator>[] {
const { handleEdit, handleDeleteClick, handleResetPassword } = params;
return [
{
accessorKey: 'profile.full_name',
header: () => <span>Nama Lengkap</span>,
cell: ({ row }) => row.original.profile?.full_name ?? '-',
},
{
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>
),
},
{
id: 'role',
header: () => <span>Role</span>,
cell: ({ row }) => row.original.roles?.[0]?.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 }) => {
const gender = row.original.profile?.gender;
return gender === 'male' ? 'Laki-laki' : gender === 'female' ? 'Perempuan' : '-';
},
},
{
id: 'actions',
header: () => <span className="block text-center">Aksi</span>,
meta: {
className: 'w-[100px] text-center',
headerClassName: 'w-[100px] text-center',
},
cell: ({ row }) => {
const admin = row.original;
return (
<RowActions
actions={[
{
label: 'Edit',
icon: <Pencil className="h-4 w-4" />,
onClick: () => handleEdit(admin),
},
{
label: 'Reset Kata Sandi',
icon: <Key className="h-4 w-4" />,
onClick: () => handleResetPassword(admin),
},
{
label: 'Hapus',
icon: <Trash2 className="h-4 w-4 text-destructive" />,
onClick: () => handleDeleteClick(admin),
},
]}
/>
);
},
},
];
}