import InputError from '@/Components/InputError'; import InputLabel from '@/Components/InputLabel'; import PrimaryButton from '@/Components/PrimaryButton'; import TextInput from '@/Components/TextInput'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { PageProps } from '@/types'; import { Paginated } from '@/types/crm'; import { Head, router, useForm } from '@inertiajs/react'; import { FormEventHandler, ReactNode, useState } from 'react'; type UserRow = { id: number; name: string; email: string; crm_role: string; account_status: string; created_at: string; }; type Props = PageProps<{ users: Paginated; filters: { search: string }; roleLabels: Record; statusLabels: Record; stats: { total: number; active: number; commercials: number; supervisors: number }; flash?: { success?: string | null }; }>; export default function UsersIndex({ users, filters, roleLabels, statusLabels, stats, flash }: Props) { const [search, setSearch] = useState(filters.search); const form = useForm({ name: '', email: '', password: '', password_confirmation: '', crm_role: 'commercial', account_status: 'active', }); const submit: FormEventHandler = (event) => { event.preventDefault(); form.post(route('users.store'), { onSuccess: () => form.reset() }); }; return ( }>
{flash?.success &&
{flash.success}
}

Inviter un utilisateur

form.setData('name', event.target.value)} className="mt-1 w-full" /> form.setData('email', event.target.value)} className="mt-1 w-full" />
form.setData('password', event.target.value)} className="mt-1 w-full" /> form.setData('password_confirmation', event.target.value)} className="mt-1 w-full" /> Inviter l'utilisateur
{ event.preventDefault(); router.get(route('users.index'), { search }); }} className="flex justify-between gap-3 border-b border-slate-100 p-4">

Annuaire des accès

setSearch(event.target.value)} placeholder="Nom ou email..." />
{users.data.map((user) => ( ))}
UtilisateurRôleStatutCréé le

{user.name}

{user.email}

 {roleLabels[user.crm_role] ?? user.crm_role} {new Date(user.created_at).toLocaleDateString('fr-FR')}
); } function Title() { return

Utilisateurs

Gérez les utilisateurs et leurs accès au CRM

; } function Metric({ label, value }: { label: string; value: number }) { return

{label}

{value}

; } function Field({ label, id, children }: { label: string; id: string; children: ReactNode }) { return
{children}
; } function Badge({ status, label }: { status: string; label: string }) { const color = status === 'active' ? 'bg-emerald-50 text-emerald-700' : status === 'suspended' ? 'bg-rose-50 text-rose-700' : 'bg-amber-50 text-amber-700'; return {label}; }