ui phase 9

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

@@ -1,9 +1,18 @@
 'use client';
 import { FunctionComponent, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
 import { useSnackbar } from 'notistack';
-import { Box, Divider, MenuItem, Paper, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading, ErrorState, PhoneNumberField } from '@/components';
+import { Box, Divider, MenuItem, Skeleton, Stack, TextField, Typography } from '@mui/material';
+import {
+  AppButton,
+  AppIcon,
+  ConfirmDialog,
+  ErrorState,
+  FormDialogShell,
+  PhoneNumberField,
+  ProfileSummary,
+} from '@/components';
 import LocaleSwitcher from '@/components/common/LocaleSwitcher';
 import { isIranianMobile } from '@/components/PhoneNumberField';
 import { ROUTES } from '@/constants';
@@ -13,51 +22,70 @@ import { useCustomerProfile, useUpsertCustomerProfile } from '@/services/profile
 import { useMe, useLogout } from '@/services/auth';
 import type { CustomerProfile } from '@/services/profiles/types';
 
-/** Customer profile — name, preferred language, and the emergency contact. No national-ID KYC. */
+/** Customer profile — the account hub: identity header, grouped rows, emergency-contact status card. */
 export default function CustomerProfilePage() {
   const t = useTranslations('profile');
   const tc = useTranslations('common');
   const { data: profile, isLoading, isError, refetch } = useCustomerProfile();
-  const { data: me } = useMe();
-  if (isLoading) return <AppLoading />;
+  const { data: me, isLoading: meLoading } = useMe();
+
+  if (isLoading || meLoading) return <ProfileSkeleton />;
   // 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 (
-    <CustomerProfileForm initial={profile ?? null} nameFallback={{ firstName: me?.firstName ?? null, lastName: me?.lastName ?? null }} />
+    <AccountHub
+      initial={profile ?? null}
+      nameFallback={{ firstName: me?.firstName ?? null, lastName: me?.lastName ?? null }}
+      phone={me?.phone}
+    />
   );
 }
 
-const CustomerProfileForm: FunctionComponent<{
+const AccountHub: FunctionComponent<{
   initial: CustomerProfile | null;
   nameFallback: { firstName: string | null; lastName: string | null };
-}> = ({ initial, nameFallback }) => {
+  phone?: string;
+}> = ({ initial, nameFallback, phone }) => {
   const t = useTranslations('profile');
-  const ta = useTranslations('address');
   const tc = useTranslations('common');
   const locale = useLocale();
+  const router = useRouter();
   const { enqueueSnackbar } = useSnackbar();
   const upsert = useUpsertCustomerProfile();
+  const logout = useLogout();
+
+  const initialFirstName = initial?.firstName ?? nameFallback.firstName ?? '';
+  const initialLastName = initial?.lastName ?? nameFallback.lastName ?? '';
+  const initialLanguage = initial?.preferredLanguage ?? 'fa';
+  const initialEmergencyName = initial?.defaultEmergencyContactName ?? '';
+  const initialEmergencyPhone = digitsOnly(initial?.defaultEmergencyContactPhone ?? '');
+
+  const [firstName, setFirstName] = useState(initialFirstName);
+  const [lastName, setLastName] = useState(initialLastName);
+  const [language, setLanguage] = useState(initialLanguage);
+  const [emergencyName, setEmergencyName] = useState(initialEmergencyName);
+  const [emergencyPhone, setEmergencyPhone] = useState(initialEmergencyPhone);
+
+  const [personalSheetOpen, setPersonalSheetOpen] = useState(false);
+  const [languageSheetOpen, setLanguageSheetOpen] = useState(false);
+  const [emergencySheetOpen, setEmergencySheetOpen] = useState(false);
+  const [signOutOpen, setSignOutOpen] = useState(false);
 
-  const [firstName, setFirstName] = useState(initial?.firstName ?? nameFallback.firstName ?? '');
-  const [lastName, setLastName] = useState(initial?.lastName ?? nameFallback.lastName ?? '');
-  const [language, setLanguage] = useState(initial?.preferredLanguage ?? 'fa');
-  const [emergencyName, setEmergencyName] = useState(initial?.defaultEmergencyContactName ?? '');
-  const [emergencyPhone, setEmergencyPhone] = useState(digitsOnly(initial?.defaultEmergencyContactPhone ?? ''));
   const [nameError, setNameError] = useState(false);
   const [phoneError, setPhoneError] = useState(false);
 
-  const isComplete = Boolean(initial?.defaultEmergencyContactName && initial?.defaultEmergencyContactPhone);
-
-  const handleSave = () => {
-    const nameInvalid = emergencyName.trim().length === 0;
-    const phoneInvalid = !isIranianMobile(emergencyPhone);
-    setNameError(nameInvalid);
-    setPhoneError(phoneInvalid);
-    if (nameInvalid || phoneInvalid) return;
+  const displayName = [firstName, lastName].filter(Boolean).join(' ').trim() || phone || '';
+  const emergencyComplete = Boolean(emergencyName.trim() && emergencyPhone);
 
+  // Every sheet saves the FULL profile object (the wire upsert has no PATCH semantics) — `patch`
+  // carries just the fields that sheet owns, the rest come from the shared draft state so editing
+  // one section never blanks another (the bug the old flat form was one refactor away from).
+  const save = (
+    patch: Partial<Record<'firstName' | 'lastName' | 'preferredLanguage', string | null>>,
+    onDone: () => void,
+  ) => {
     upsert.mutate(
       {
         defaultEmergencyContactName: emergencyName.trim(),
@@ -65,135 +93,291 @@ const CustomerProfileForm: FunctionComponent<{
         firstName: firstName.trim() || null,
         lastName: lastName.trim() || null,
         preferredLanguage: language,
+        ...patch,
+      },
+      {
+        onSuccess: () => {
+          enqueueSnackbar(t('saved'), { variant: 'success' });
+          onDone();
+        },
       },
-      { onSuccess: () => enqueueSnackbar(t('saved'), { variant: 'success' }) },
     );
   };
 
+  const savePersonal = () =>
+    save({ firstName: firstName.trim() || null, lastName: lastName.trim() || null }, () => setPersonalSheetOpen(false));
+  const saveLanguage = () => save({ preferredLanguage: language }, () => setLanguageSheetOpen(false));
+  const saveEmergency = () => {
+    const nameInvalid = emergencyName.trim().length === 0;
+    const phoneInvalid = !isIranianMobile(emergencyPhone);
+    setNameError(nameInvalid);
+    setPhoneError(phoneInvalid);
+    if (nameInvalid || phoneInvalid) return;
+    save({}, () => setEmergencySheetOpen(false));
+  };
+
+  const personalDirty = firstName !== initialFirstName || lastName !== initialLastName;
+  const languageDirty = language !== initialLanguage;
+  const emergencyDirty = emergencyName !== initialEmergencyName || emergencyPhone !== initialEmergencyPhone;
+
+  const goTo = (path: string) => router.push(`/${locale}${path}`);
+
+  // Shared discard-confirm strings for every FormDialogShell instance below.
+  const closeLabel = tc('close');
+  const discardTitle = tc('discard_title');
+  const discardBody = tc('discard_body');
+  const discardConfirmLabel = tc('discard_confirm');
+  const cancelLabel = tc('cancel');
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 520 }}>
-      <Box>
-        <Typography variant="h5" component="h1">
-          {t('title')}
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {t('subtitle')}
-        </Typography>
-        <Typography variant="body2" sx={{ mt: 0.5, color: isComplete ? 'var(--bal-success)' : 'text.secondary' }}>
-          {isComplete ? t('completion_done') : t('completion_todo')}
-        </Typography>
-      </Box>
+      <ProfileSummary displayName={displayName} phone={phone} initialsFallback={displayName || undefined} />
 
-      <Stack direction={{ xs: 'column', sm: 'row' }} sx={{ gap: 2 }}>
-        <TextField label={t('first_name')} value={firstName} onChange={(e) => setFirstName(e.target.value)} fullWidth />
-        <TextField label={t('last_name')} value={lastName} onChange={(e) => setLastName(e.target.value)} fullWidth />
+      <Stack sx={{ gap: 1 }}>
+        <AccountRow icon="account" label={t('row_personal')} onClick={() => setPersonalSheetOpen(true)} />
+        <EmergencyContactCard
+          complete={emergencyComplete}
+          name={emergencyName}
+          phone={emergencyPhone}
+          onEdit={() => setEmergencySheetOpen(true)}
+        />
+        <AccountRow icon="location" label={t('row_addresses')} onClick={() => goTo(ROUTES.ADDRESSES)} />
+        <AccountRow icon="language" label={t('row_language')} onClick={() => setLanguageSheetOpen(true)} />
+        <AccountRow icon="notifications" label={t('row_notifications')} onClick={() => goTo(ROUTES.NOTIFICATIONS)} />
+        <AccountRow icon="support" label={t('row_support')} onClick={() => goTo(ROUTES.SUPPORT_TICKETS)} />
       </Stack>
 
-      <TextField
-        select
-        label={t('language')}
-        value={language}
-        onChange={(e) => setLanguage(e.target.value)}
-        sx={{ maxWidth: 220 }}
+      {/* Renders nothing for a single-role session — see ActorSwitcher's own doc. */}
+      <ActorSwitcher target="nurse" />
+
+      <Stack sx={{ gap: 1 }}>
+        <Divider sx={{ my: 0.5 }} />
+        <AccountRow icon="logout" label={t('sign_out')} onClick={() => setSignOutOpen(true)} tone="error" />
+      </Stack>
+
+      {/* اطلاعات شخصی */}
+      <FormDialogShell
+        open={personalSheetOpen}
+        title={t('row_personal')}
+        dirty={personalDirty}
+        onClose={() => setPersonalSheetOpen(false)}
+        closeLabel={closeLabel}
+        discardTitle={discardTitle}
+        discardBody={discardBody}
+        discardConfirmLabel={discardConfirmLabel}
+        discardCancelLabel={cancelLabel}
       >
-        <MenuItem value="fa">{t('language_fa')}</MenuItem>
-        <MenuItem value="en">{t('language_en')}</MenuItem>
-      </TextField>
+        <Stack sx={{ gap: 2.5 }}>
+          <TextField label={t('first_name')} value={firstName} onChange={(e) => setFirstName(e.target.value)} fullWidth />
+          <TextField label={t('last_name')} value={lastName} onChange={(e) => setLastName(e.target.value)} fullWidth />
+          <SheetActions onCancel={() => setPersonalSheetOpen(false)} onSave={savePersonal} saving={upsert.isPending} saveLabel={tc('save')} cancelLabel={cancelLabel} />
+        </Stack>
+      </FormDialogShell>
 
-      <Divider />
-
-      <Box>
-        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-          {t('emergency_section')}
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {t('emergency_hint')}
-        </Typography>
-      </Box>
-
-      <TextField
-        label={t('emergency_name')}
-        value={emergencyName}
-        onChange={(e) => {
-          setEmergencyName(e.target.value);
-          if (nameError) setNameError(false);
-        }}
-        error={nameError}
-        fullWidth
-      />
-      <PhoneNumberField
-        label={t('emergency_phone')}
-        value={emergencyPhone}
-        onChange={(value) => {
-          setEmergencyPhone(value);
-          if (phoneError) setPhoneError(false);
-        }}
-        error={phoneError}
-        helperText={phoneError ? t('emergency_phone_invalid') : undefined}
-        fullWidth
-      />
-
-      <AppButton
-        color="primary"
-        variant="contained"
-        onClick={handleSave}
-        disabled={upsert.isPending}
-        sx={{ alignSelf: 'flex-start' }}
+      {/* زبان — the row owns the server-stored preference; the actual UI locale switch is phase 2's LocaleSwitcher, reused verbatim. */}
+      <FormDialogShell
+        open={languageSheetOpen}
+        title={t('row_language')}
+        dirty={languageDirty}
+        onClose={() => setLanguageSheetOpen(false)}
+        closeLabel={closeLabel}
+        discardTitle={discardTitle}
+        discardBody={discardBody}
+        discardConfirmLabel={discardConfirmLabel}
+        discardCancelLabel={cancelLabel}
       >
-        {upsert.isPending ? tc('saving') : t('save')}
-      </AppButton>
-
-      <Divider />
-
-      {/* Address book lives alongside the profile in the customer area; a booking (f7) needs a
-          chosen address, so the entry point is surfaced here on the settings hub. */}
-      <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2, display: 'flex', gap: 2 }}>
-        <AppIcon icon="location" size={28} color="var(--bal-primary)" />
-        <Stack sx={{ gap: 1, flexGrow: 1 }}>
-          <Box>
-            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-              {ta('manage_title')}
+        <Stack sx={{ gap: 2.5 }}>
+          <Stack sx={{ gap: 1 }}>
+            <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+              {t('app_language')}
             </Typography>
             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-              {ta('manage_body')}
+              {t('app_language_hint')}
             </Typography>
-          </Box>
-          <AppButton
-            color="primary"
-            variant="outlined"
-            startIcon="location"
-            to={`/${locale}${ROUTES.ADDRESSES}`}
-            sx={{ alignSelf: 'flex-start' }}
+            <LocaleSwitcher />
+          </Stack>
+          <Divider />
+          <TextField
+            select
+            label={t('language')}
+            value={language}
+            onChange={(e) => setLanguage(e.target.value)}
+            helperText={t('language_hint')}
           >
-            {ta('manage_cta')}
-          </AppButton>
+            <MenuItem value="fa">{t('language_fa')}</MenuItem>
+            <MenuItem value="en">{t('language_en')}</MenuItem>
+          </TextField>
+          <SheetActions onCancel={() => setLanguageSheetOpen(false)} onSave={saveLanguage} saving={upsert.isPending} saveLabel={tc('save')} cancelLabel={cancelLabel} />
         </Stack>
-      </Paper>
+      </FormDialogShell>
 
-      <Divider />
-
-      {/* Account affordances: sign-out has no home anywhere in the customer shell yet (a full hub
-          redesign is deferred to phase 9) — one labeled row is enough for now. */}
-      <Stack sx={{ gap: 1.5 }}>
-        <ActorSwitcher target="nurse" />
-        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+      {/* مخاطب اضطراری */}
+      <FormDialogShell
+        open={emergencySheetOpen}
+        title={t('emergency_section')}
+        dirty={emergencyDirty}
+        onClose={() => setEmergencySheetOpen(false)}
+        closeLabel={closeLabel}
+        discardTitle={discardTitle}
+        discardBody={discardBody}
+        discardConfirmLabel={discardConfirmLabel}
+        discardCancelLabel={cancelLabel}
+      >
+        <Stack sx={{ gap: 2.5 }}>
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {t('app_language')}
+            {t('emergency_hint')}
           </Typography>
-          <LocaleSwitcher />
+          <TextField
+            label={t('emergency_name')}
+            value={emergencyName}
+            onChange={(e) => {
+              setEmergencyName(e.target.value);
+              if (nameError) setNameError(false);
+            }}
+            error={nameError}
+            fullWidth
+          />
+          <PhoneNumberField
+            label={t('emergency_phone')}
+            value={emergencyPhone}
+            onChange={(v) => {
+              setEmergencyPhone(v);
+              if (phoneError) setPhoneError(false);
+            }}
+            error={phoneError}
+            helperText={phoneError ? t('emergency_phone_invalid') : undefined}
+            fullWidth
+          />
+          <SheetActions onCancel={() => setEmergencySheetOpen(false)} onSave={saveEmergency} saving={upsert.isPending} saveLabel={tc('save')} cancelLabel={cancelLabel} />
         </Stack>
-        <SignOutRow />
+      </FormDialogShell>
+
+      <ConfirmDialog
+        open={signOutOpen}
+        title={t('sign_out_confirm_title')}
+        body={t('sign_out_confirm_body')}
+        confirmLabel={t('sign_out')}
+        cancelLabel={cancelLabel}
+        confirmColor="error"
+        onClose={() => setSignOutOpen(false)}
+        onConfirm={() => {
+          setSignOutOpen(false);
+          logout.mutate();
+        }}
+      />
+    </Box>
+  );
+};
+
+const AccountRow: FunctionComponent<{
+  icon: string;
+  label: string;
+  onClick: () => void;
+  tone?: 'default' | 'error';
+}> = ({ icon, label, onClick, tone = 'default' }) => (
+  <Box
+    component="button"
+    type="button"
+    onClick={onClick}
+    sx={{ background: 'none', border: 'none', p: 0, width: '100%', textAlign: 'start', font: 'inherit', cursor: 'pointer' }}
+  >
+    <Stack
+      direction="row"
+      sx={{
+        alignItems: 'center',
+        gap: 1.5,
+        p: 1.5,
+        borderRadius: 2,
+        color: tone === 'error' ? 'var(--bal-error)' : 'text.primary',
+        '&:hover': { bgcolor: 'action.hover' },
+      }}
+    >
+      <AppIcon icon={icon} size={22} color={tone === 'error' ? 'var(--bal-error)' : 'var(--bal-primary)'} />
+      <Typography variant="body1" sx={{ flexGrow: 1, fontWeight: 500 }}>
+        {label}
+      </Typography>
+      {tone !== 'error' ? <AppIcon icon="forward" size={18} color="var(--bal-text-secondary)" /> : null}
+    </Stack>
+  </Box>
+);
+
+const EmergencyContactCard: FunctionComponent<{
+  complete: boolean;
+  name: string;
+  phone: string;
+  onEdit: () => void;
+}> = ({ complete, name, phone, onEdit }) => {
+  const t = useTranslations('profile');
+  return (
+    <Box sx={{ p: 1.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+      <Stack direction="row" sx={{ alignItems: 'center', gap: 1.5 }}>
+        <AppIcon icon={complete ? 'verified' : 'emergency'} size={22} color={complete ? 'var(--bal-success)' : 'var(--bal-warning)'} />
+        <Stack sx={{ flexGrow: 1, gap: 0.25, minWidth: 0 }}>
+          <Typography variant="body1" sx={{ fontWeight: 500 }}>
+            {t('emergency_section')}
+          </Typography>
+          {complete ? (
+            <Stack direction="row" sx={{ alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                {name}
+              </Typography>
+              <Typography
+                component="a"
+                href={`tel:${phone}`}
+                dir="ltr"
+                variant="body2"
+                sx={{ color: 'var(--bal-primary)', textDecoration: 'none' }}
+              >
+                {phone}
+              </Typography>
+            </Stack>
+          ) : (
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              {t('emergency_hint')}
+            </Typography>
+          )}
+        </Stack>
+        <AppButton variant="text" color="primary" onClick={onEdit}>
+          {t('edit')}
+        </AppButton>
       </Stack>
     </Box>
   );
 };
 
-const SignOutRow: FunctionComponent = () => {
-  const t = useTranslations('profile');
-  const { mutate: logout, isPending } = useLogout();
+const SheetActions: FunctionComponent<{
+  onCancel: () => void;
+  onSave: () => void;
+  saving: boolean;
+  saveLabel: string;
+  cancelLabel: string;
+}> = ({ onCancel, onSave, saving, saveLabel, cancelLabel }) => {
+  const tc = useTranslations('common');
   return (
-    <AppButton variant="text" color="error" startIcon="logout" onClick={() => logout()} disabled={isPending} sx={{ alignSelf: 'flex-start' }}>
-      {t('sign_out')}
-    </AppButton>
+    <Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
+      <AppButton variant="text" onClick={onCancel} disabled={saving}>
+        {cancelLabel}
+      </AppButton>
+      <AppButton color="primary" variant="contained" onClick={onSave} disabled={saving}>
+        {saving ? tc('saving') : saveLabel}
+      </AppButton>
+    </Stack>
   );
 };
+
+function ProfileSkeleton() {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 520 }}>
+      <Stack sx={{ alignItems: 'center', gap: 1 }}>
+        <Skeleton variant="circular" width={56} height={56} />
+        <Skeleton variant="text" width={140} />
+        <Skeleton variant="text" width={100} />
+      </Stack>
+      <Stack sx={{ gap: 1 }}>
+        {[0, 1, 2, 3, 4, 5].map((key) => (
+          <Skeleton key={key} variant="rounded" height={56} />
+        ))}
+      </Stack>
+    </Box>
+  );
+}