import { Head, Link, router, usePage } from '@inertiajs/react'; import { Plus, Search, UserCog } from 'lucide-react'; import type { FormEvent } from 'react'; import { useState } from 'react'; import InputError from '@/components/input-error'; import { PageHeading } from '@/components/page-heading'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import type { Paginated } from '@/types'; type Role = { id: number; name: string; description: string | null }; type ManagedUser = { id: number; uuid: string; name: string; email: string; department: string | null; snipe_user_id: number | null; active: boolean; roles: Role[]; }; type UserFormState = { name: string; email: string; department: string; snipeUserId: string; password: string; active: boolean; roles: string[]; }; const roleLabels: Record = { requester: 'Requisitante', approver: 'Aprovador', inventory_operator: 'Operador', administrator: 'Administrador', auditor: 'Auditor', }; export default function UsersIndex({ users, roles, filters, }: { users: Paginated; roles: Role[]; filters: { search?: string; role?: string; status?: string }; }) { const [search, setSearch] = useState(filters.search ?? ''); const [role, setRole] = useState(filters.role ?? ''); const [status, setStatus] = useState(filters.status ?? ''); const [creating, setCreating] = useState(false); function submitFilters(event: FormEvent) { event.preventDefault(); router.get('/administracao/utilizadores', { search: search || undefined, role: role || undefined, status: status || undefined, }); } return ( <>
setCreating((value) => !value)}> Novo utilizador } /> {creating && ( Criar conta institucional router.post( '/administracao/utilizadores', payload(data), { preserveScroll: true, onSuccess: () => setCreating(false), onFinish: finish, }, ) } /> )}
setSearch(event.target.value)} placeholder="Nome, email ou departamento…" />
{users.data.map((user) => (
{user.name}

{user.email} ·{' '} {user.department ?? 'Sem departamento'}

{user.active ? 'Ativo' : 'Inativo'} {user.roles.map((item) => ( {roleLabels[item.name] ?? item.name} ))}
Editar conta e perfis
item.name, ), }} submitLabel="Guardar alterações" onSubmit={(data, finish) => router.put( `/administracao/utilizadores/${user.id}`, payload(data), { preserveScroll: true, onFinish: finish, }, ) } />
))}
{users.last_page > 1 && ( )}
); } function UserForm({ roles, initial, passwordRequired = false, submitLabel, onSubmit, }: { roles: Role[]; initial: UserFormState; passwordRequired?: boolean; submitLabel: string; onSubmit: (data: UserFormState, finish: () => void) => void; }) { const [data, setData] = useState(initial); const [processing, setProcessing] = useState(false); const { errors } = usePage().props; function submit(event: FormEvent) { event.preventDefault(); setProcessing(true); onSubmit(data, () => setProcessing(false)); } function toggleRole(name: string) { setData((current) => ({ ...current, roles: current.roles.includes(name) ? current.roles.filter((item) => item !== name) : [...current.roles, name], })); } return (
setData({ ...data, name: event.target.value }) } required /> setData({ ...data, email: event.target.value }) } required /> setData({ ...data, department: event.target.value }) } /> setData({ ...data, snipeUserId: event.target.value }) } /> setData({ ...data, password: event.target.value }) } required={passwordRequired} />
Perfis
{roles.map((role) => ( ))}
{Object.values(errors).map((message, index) => ( ))}
); } function Field({ label, children, }: { label: string; children: React.ReactNode; }) { return ( ); } function payload(data: UserFormState) { return { name: data.name, email: data.email, department: data.department || null, snipe_user_id: data.snipeUserId ? Number(data.snipeUserId) : null, password: data.password || null, active: data.active, roles: data.roles, }; } UsersIndex.layout = { breadcrumbs: [ { title: 'Administração', href: '/administracao/utilizadores' }, { title: 'Utilizadores', href: '/administracao/utilizadores' }, ], };