import { useTranslation } from '@/hooks/use-translation'; import { Head, Link, useForm } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { FormEvent } from 'react'; interface Member { id: number; first_name: string; last_name: string; email: string; phone1: string | null; phone2: string | null; address_line_1: string | null; address_line_2: string | null; city: string | null; state: string | null; zip: string | null; hebrew_name: string | null; father_hebrew_name: string | null; mother_hebrew_name: string | null; date_of_birth: string | null; anniversary_date: string | null; } interface Props { member: Member; } export default function ProfilePage({ member }: Readonly) { const { t } = useTranslation(); // Format date for HTML date input (YYYY-MM-DD) const formatDateForInput = (dateValue: string | null): string => { if (!dateValue) return ''; if (typeof dateValue === 'string') { return dateValue.split('T')[0]; } return ''; }; const { data, setData, put, processing, errors } = useForm({ first_name: member.first_name || '', last_name: member.last_name || '', email: member.email || '', phone1: member.phone1 || '', phone2: member.phone2 || '', address_line_1: member.address_line_1 || '', address_line_2: member.address_line_2 || '', city: member.city || '', state: member.state || '', zip: member.zip || '', hebrew_name: member.hebrew_name || '', father_hebrew_name: member.father_hebrew_name || '', mother_hebrew_name: member.mother_hebrew_name || '', date_of_birth: formatDateForInput(member.date_of_birth), anniversary_date: formatDateForInput(member.anniversary_date), }); const handleSubmit = (e: FormEvent) => { e.preventDefault(); put('/member/profile'); }; return (

{t('My Information')}

{t('Update your personal information')}

{t('Back to Dashboard')}
{/* Personal Information */}

{t('Personal Information')}

setData('first_name', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" required /> {errors.first_name && (

{errors.first_name}

)}
setData('last_name', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" required /> {errors.last_name && (

{errors.last_name}

)}
setData('email', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" required /> {errors.email && (

{errors.email}

)}
setData('date_of_birth', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.date_of_birth && (

{errors.date_of_birth}

)}
setData('anniversary_date', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.anniversary_date && (

{errors.anniversary_date}

)}
{/* Contact Information */}

{t('Contact Information')}

setData('phone1', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.phone1 && (

{errors.phone1}

)}
setData('phone2', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.phone2 && (

{errors.phone2}

)}
{/* Address Information */}

{t('Address')}

setData('address_line_1', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.address_line_1 && (

{errors.address_line_1}

)}
setData('address_line_2', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.address_line_2 && (

{errors.address_line_2}

)}
setData('city', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.city && (

{errors.city}

)}
setData('state', e.target.value)} maxLength={2} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.state && (

{errors.state}

)}
setData('zip', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.zip && (

{errors.zip}

)}
{/* Hebrew Information */}

{t('Hebrew Information')}

setData('hebrew_name', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.hebrew_name && (

{errors.hebrew_name}

)}
setData('father_hebrew_name', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.father_hebrew_name && (

{errors.father_hebrew_name}

)}
setData('mother_hebrew_name', e.target.value)} className="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 dark:bg-gray-900" /> {errors.mother_hebrew_name && (

{errors.mother_hebrew_name}

)}
{/* Submit Button */}
{t('Cancel')}
); }