import { Head, useForm, usePage } from '@inertiajs/react'; import { useEffect, useState, type FormEvent } from 'react'; import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import DeleteUser from '@/components/delete-user'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { useInitials } from '@/hooks/use-initials'; import { edit } from '@/routes/profile'; import type { Auth } from '@/types'; type EmployeeInfo = { job_title: string | null; department: string | null; }; type PageProps = { auth: Auth; employeeInfo: EmployeeInfo | null; }; export default function Profile() { const { auth, employeeInfo } = usePage().props; const getInitials = useInitials(); const [avatarPreview, setAvatarPreview] = useState(null); const form = useForm<{ name: string; email: string; phone: string; avatar: File | null; }>({ name: auth.user?.name ?? '', email: auth.user?.email ?? '', phone: auth.user?.phone ?? '', avatar: null, }); useEffect(() => { return () => { if (avatarPreview) { URL.revokeObjectURL(avatarPreview); } }; }, [avatarPreview]); function submit(event: FormEvent) { event.preventDefault(); form.post(ProfileController.update.form().action, { forceFormData: true, preserveScroll: true, onSuccess: () => { form.setData('avatar', null); setAvatarPreview(null); }, }); } return ( <>

Paramètres du profil

{getInitials(auth.user?.name ?? '')} { const file = e.target.files?.[0] ?? null; form.setData('avatar', file); setAvatarPreview((previous) => { if (previous) { URL.revokeObjectURL(previous); } return file ? URL.createObjectURL(file) : null; }); }} />
form.setData('name', e.target.value) } required autoComplete="name" placeholder="Nom complet" />
form.setData('email', e.target.value) } required autoComplete="username" placeholder="Adresse e-mail" />
form.setData('phone', e.target.value) } autoComplete="tel" placeholder="Numéro de téléphone" />
{employeeInfo && (

Informations professionnelles

Ces informations sont gérées par les ressources humaines.

{employeeInfo.job_title ?? '—'}

{employeeInfo.department ?? '—'}

)}
); } Profile.layout = { breadcrumbs: [ { title: 'Mon compte', href: edit(), }, ], };