fixes

apps/portal/src/app/features/profile/pages/ProfilePage.tsx

@@ -49,7 +49,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useTranslation } from 'react-i18next';
-import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements, getCountryCode, splitPersonName, joinPersonName } from '@ema-platform/ui';
+import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements, getCountryCode } from '@ema-platform/ui';
 import { useApiMutation, useLocalized } from '@ema-platform/api';
 import { PORTAL_PERMISSIONS, setUser, useCurrentProfile, usePermissions } from '@ema-platform/auth';
 import { SUPPORTED_LANGUAGES, type AppLanguage } from '../../../i18n/config';
@@ -89,6 +89,15 @@ function getInitials(name: string, fallback: string) {
   return letters.toUpperCase();
 }
 
+function splitProfileName(fullName: string) {
+  const [firstName = '', middleName = '', ...lastName] = fullName.trim().split(/\s+/);
+  return { firstName, middleName, lastName: lastName.join(' ') };
+}
+
+function formatProfileName({ firstName, middleName, lastName }: Pick<ProfileValues, 'firstName' | 'middleName' | 'lastName'>) {
+  return [firstName, middleName, lastName].filter(Boolean).join(' ');
+}
+
 function normalizeName(name: string) {
   return name.trim().replace(/\s+/g, ' ');
 }
@@ -196,7 +205,7 @@ export function ProfilePage() {
     // already holds so the form does not flash empty on a refetch.
     const currentProfile = resolvedProfile ?? storedProfile;
     if (currentProfile) {
-      const accountName = user?.name?.en ? splitPersonName(user.name.en) : null;
+      const accountName = user?.name?.en ? splitProfileName(user.name.en) : null;
       setLoadedProfile({
         professionId: currentProfile.professionId || currentProfile.profession?.id || '',
         firstName: accountName?.firstName || currentProfile.firstName || '',
@@ -277,7 +286,7 @@ export function ProfilePage() {
 
     setIsSavingProfile(true);
     try {
-      const profileName = splitPersonName(values.nameEn);
+      const profileName = splitProfileName(values.nameEn);
       const saves: Promise<unknown>[] = [
         updateTrigger({
           url: '/auth/update-profile',
@@ -354,7 +363,7 @@ export function ProfilePage() {
   const onSaveProfile = async (values: ProfileValues) => {
     if (!profileId) return;
 
-    const fullName = joinPersonName(values);
+    const fullName = formatProfileName(values);
     if (user && normalizeName(fullName) !== normalizeName(user.name.en)) {
       notify.error(t('profile.nameMismatch'));
       return;

libs/auth/src/lib/pages/SignupPage.tsx

@@ -29,7 +29,7 @@ import { useNavigate, Link } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useApiMutation } from '@ema-platform/api';
-import { useErrorHandler, passwordSchema, PasswordRequirements, joinPersonName } from '@ema-platform/ui';
+import { useErrorHandler, passwordSchema, PasswordRequirements } from '@ema-platform/ui';
 import { AuthShell } from '../components/AuthShell';
 import { loginSuccess, setUser } from '../store/auth.slice';
 import type { AuthUser } from '../types/auth.types';
@@ -124,7 +124,7 @@ export function SignupPage() {
         username: values.username,
         phoneNumber: values.phoneNumber,
         userType: values.userType,
-        name: { en: joinPersonName(values), am: values.nameAm ?? '' },
+        name: { en: values.nameEn, am: values.nameAm ?? '' },
         password: values.password,
         confirmPassword: values.confirmPassword,
       };
@@ -213,30 +213,14 @@ export function SignupPage() {
 
         <form onSubmit={handleSubmit(onSubmit)}>
           <Stack gap="md">
-            <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="md">
-              <TextInput
-                label={t('signup.firstNameLabel', 'First name')}
-                placeholder={t('signup.firstNamePlaceholder', 'Abebe')}
-                leftSection={<IconUser size={18} />}
-                error={errors.firstName?.message}
-                {...register('firstName')}
-              />
+            <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="md">
               <TextInput
                 label={t('signup.nameEnLabel', 'Full name (English)')}
                 placeholder={t('signup.nameEnPlaceholder', 'Abebe Bekele')}
                 leftSection={<IconUser size={18} />}
-                error={errors.middleName?.message}
-                {...register('middleName')}
+                error={errors.nameEn?.message}
+                {...register('nameEn')}
               />
-              <TextInput
-                label={t('signup.lastNameLabel', 'Last name')}
-                placeholder={t('signup.lastNamePlaceholder', 'Bekele')}
-                leftSection={<IconUser size={18} />}
-                error={errors.lastName?.message}
-                {...register('lastName')}
-              />
-            </SimpleGrid>
-
               <TextInput
                 label={t('signup.nameAmLabel', 'Name (Amharic)')}
                 placeholder={t('signup.nameAmPlaceholder', 'ስም')}
@@ -244,6 +228,7 @@ export function SignupPage() {
                 error={errors.nameAm?.message}
                 {...register('nameAm')}
               />
+            </SimpleGrid>
 
             <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="md">
               <TextInput