ui phase 1

client/src/app/[locale]/(private-routes)/(customer)/profile/page.tsx

@@ -3,7 +3,7 @@ import { FunctionComponent, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
 import { Box, Divider, MenuItem, Paper, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading, PhoneNumberField } from '@/components';
+import { AppButton, AppIcon, AppLoading, ErrorState, PhoneNumberField } from '@/components';
 import { isIranianMobile } from '@/components/PhoneNumberField';
 import { ROUTES } from '@/constants';
 import { digitsOnly } from '@/utils';
@@ -13,9 +13,14 @@ import type { CustomerProfile } from '@/services/profiles/types';
 
 /** Customer profile — name, preferred language, and the emergency contact. No national-ID KYC. */
 export default function CustomerProfilePage() {
-  const { data: profile, isLoading } = useCustomerProfile();
+  const t = useTranslations('profile');
+  const tc = useTranslations('common');
+  const { data: profile, isLoading, isError, refetch } = useCustomerProfile();
   const { data: me } = useMe();
   if (isLoading) return <AppLoading />;
+  // The form must never render on a failed fetch — it would otherwise show blank/undefined fields
+  // whose save could overwrite server truth.
+  if (isError) return <ErrorState message={t('load_error')} retryLabel={tc('retry')} onRetry={() => refetch()} />;
   // The customer name is owned by `/me` (REQ-007), not `CustomerProfileDto` — prefill it from there so
   // editing the emergency contact never blanks (and re-saves as null) the existing name.
   return (