import { Head, useForm } from '@inertiajs/react'; import { Building2, Mail, MapPin } from 'lucide-react'; import PortalLayout from '@/layouts/portal-layout'; interface UserData { id: number; name: string; email: string; title: string | null; profession: string | null; membership_number: string | null; institution: { name: string; country: string | null } | null; } export default function Profile({ user }: { user: UserData }) { const { data, setData, put, processing, errors, wasSuccessful } = useForm({ name: user.name, title: user.title ?? '', profession: user.profession ?? '', }); function submit(e: React.FormEvent) { e.preventDefault(); put('/portal/profile'); } return ( <>

Profile

Your personal information and membership details

{/* Read-only info */}

Account Info

{user.email}
{user.membership_number && (
# {user.membership_number}
)} {user.institution && (

{user.institution.name}

{user.institution.country && (

{user.institution.country}

)}
)}
{/* Editable fields */}

Edit Profile

{wasSuccessful && (

Profile updated successfully.

)}
setData('name', e.target.value)} className="w-full rounded-lg border border-border px-4 py-2.5 text-sm text-[#0A2647] focus:outline-none focus:ring-2 focus:ring-[#0A2647]/20" /> {errors.name &&

{errors.name}

}
setData('profession', e.target.value)} placeholder="e.g. Biomedical Engineer, Lecturer" className="w-full rounded-lg border border-border px-4 py-2.5 text-sm text-[#0A2647] focus:outline-none focus:ring-2 focus:ring-[#0A2647]/20" />
); } Profile.layout = (page: React.ReactNode) => {page};