import { Head, router, useForm, usePage } from '@inertiajs/react'; import { Pencil, Plus, Trash2 } from 'lucide-react'; import { FormEvent, useState } from 'react'; import { PaginationControls, type PaginatedData, SortableHeader, type TableFilters, } from '@/components/data-table-controls'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import type { Auth } from '@/types'; type Permission = { id: number; name: string; label: string | null; group: string | null; }; type Role = { id: number; name: string; label: string | null; users_count: number; created_at: string; permissions: Permission[]; }; type PageProps = { auth: Auth; roles: PaginatedData; permissions: Record; filters: TableFilters; }; type RoleForm = { name: string; label: string; permissions: number[]; }; const emptyForm: RoleForm = { name: '', label: '', permissions: [], }; export default function RolesIndex({ roles, permissions, filters }: PageProps) { const { auth } = usePage().props; const [open, setOpen] = useState(false); const [editing, setEditing] = useState(null); const form = useForm(emptyForm); const can = (permission: string) => auth.permissions.includes(permission); const openCreate = () => { setEditing(null); form.setData(emptyForm); form.clearErrors(); setOpen(true); }; const openEdit = (role: Role) => { setEditing(role); form.setData({ name: role.name, label: role.label ?? '', permissions: role.permissions.map((permission) => permission.id), }); form.clearErrors(); setOpen(true); }; const togglePermission = (permissionId: number, checked: boolean) => { form.setData( 'permissions', checked ? [...form.data.permissions, permissionId] : form.data.permissions.filter((id) => id !== permissionId), ); }; const submit = (event: FormEvent) => { event.preventDefault(); if (editing) { form.put(`/roles/${editing.id}`, { preserveScroll: true, onSuccess: () => setOpen(false), }); return; } form.post('/roles', { preserveScroll: true, onSuccess: () => setOpen(false), }); }; const destroy = (role: Role) => { if (!window.confirm(`Delete ${role.label ?? role.name}?`)) { return; } router.delete(`/roles/${role.id}`, { preserveScroll: true }); }; return ( <>

{can('roles.create') && ( )}

Role Users Created {roles.data.map((role) => ( ))}

Permissions	Actions
{role.label ?? role.name} {role.name}	{role.permissions.map( (permission) => ( {permission.label ?? permission.name} ), )}	{role.users_count}	{new Date( role.created_at, ).toLocaleDateString()}	{can('roles.update') && ( )} {can('roles.delete') && ( )}

); } RolesIndex.layout = { breadcrumbs: [ { title: 'Roles', href: '/roles', }, ], };