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 Role = { id: number; name: string; label: string | null; }; type ManagedUser = { id: number; name: string; email: string; email_verified_at: string | null; created_at: string; roles: Role[]; }; type PageProps = { auth: Auth; users: PaginatedData; roles: Role[]; filters: TableFilters; }; type UserForm = { name: string; email: string; password: string; roles: number[]; }; const emptyForm: UserForm = { name: '', email: '', password: '', roles: [], }; export default function UsersIndex({ users, roles, 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 = (user: ManagedUser) => { setEditing(user); form.setData({ name: user.name, email: user.email, password: '', roles: user.roles.map((role) => role.id), }); form.clearErrors(); setOpen(true); }; const toggleRole = (roleId: number, checked: boolean) => { form.setData( 'roles', checked ? [...form.data.roles, roleId] : form.data.roles.filter((id) => id !== roleId), ); }; const submit = (event: FormEvent) => { event.preventDefault(); if (editing) { form.put(`/users/${editing.id}`, { preserveScroll: true, onSuccess: () => setOpen(false), }); return; } form.post('/users', { preserveScroll: true, onSuccess: () => setOpen(false), }); }; const destroy = (user: ManagedUser) => { if (!window.confirm(`Delete ${user.name}?`)) { return; } router.delete(`/users/${user.id}`, { preserveScroll: true }); }; return ( <>

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

Name Email Created {users.data.map((user) => ( ))}

Roles	Actions
{user.name}	{user.email}	{user.roles.length ? ( user.roles.map((role) => ( {role.label ?? role.name} )) ) : ( No roles )}	{new Date( user.created_at, ).toLocaleDateString()}	{can('users.update') && ( )} {can('users.delete') && ( )}

); } UsersIndex.layout = { breadcrumbs: [ { title: 'Users', href: '/users', }, ], };