frontend phase 2: onboarding & profiles — customer/patient, nurse profile & bank

Turns a logged-in user into a usable account, consuming the b3 identity-profiles
contract behind the services/{domain} seam.

Services (mock default true; real HTTP clients wired for a one-line flip):
- services/patients: rewritten to b3 PatientDto + client-augmented relation/conditions;
  full CRUD, optimistic soft-archive, cache-splice on create, age<->birthDate helper.
- services/profiles: customer + nurse profile get/upsert + avatar (404->null mapping).
- services/nurse: payout bank accounts + IBAN(Sheba) util + pending-only polling.

Screens: A3->A4 onboarding wizard, E1 patients list/CRUD, A5 home (first-login gate +
nudge), customer profile (no national-ID), nurse profile bootstrap (unverified
placeholder), nurse bank settings (pending/verified/mismatch + make-primary).

Shared composites (each tested): GenderToggle, ConditionChips, RelationSelect,
PatientForm, PatientCard, BankStatusPanel; reuses f0 StepperHeader/StatusChip/PhoneField.
Adds onboarding/home/profile/nurseProfile/bank i18n namespaces (both locales, in sync),
the --bal-primary-soft token, and nurse sidebar Profile + Bank entries.

Contract gaps filed: REQ-005 (patient relation/conditions), REQ-006 (avatar route),
REQ-007 (customer name/language). Gate: check + 112 tests + build all green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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

@@ -0,0 +1,165 @@
+'use client';
+import { ChangeEvent, FunctionComponent, useRef, useState } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useSnackbar } from 'notistack';
+import { Avatar, Box, Paper, Stack, TextField, Typography } from '@mui/material';
+import { AppButton, AppIcon, AppLoading } from '@/components';
+import { ROUTES } from '@/constants';
+import { useNurseProfile, useUpsertNurseProfile, useUploadAvatar } from '@/services/profiles';
+import type { NurseProfile } from '@/services/profiles/types';
+
+const MAX_YEARS = 80;
+
+/** Nurse profile bootstrap (B7 header): avatar + bio + years. Services/availability are deferred (f4). */
+export default function NurseProfilePage() {
+  const { data: profile, isLoading } = useNurseProfile();
+  if (isLoading) return <AppLoading />;
+  return <NurseProfileForm initial={profile ?? null} />;
+}
+
+const NurseProfileForm: FunctionComponent<{ initial: NurseProfile | null }> = ({ initial }) => {
+  const t = useTranslations('nurseProfile');
+  const tc = useTranslations('common');
+  const locale = useLocale();
+  const { enqueueSnackbar } = useSnackbar();
+  const upsert = useUpsertNurseProfile();
+  const uploadAvatar = useUploadAvatar();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(initial?.avatarUrl ?? null);
+  const [bio, setBio] = useState(initial?.bio ?? '');
+  const [years, setYears] = useState(initial ? String(initial.yearsOfExperience) : '');
+  const [yearsError, setYearsError] = useState(false);
+
+  const pickFile = () => fileInputRef.current?.click();
+
+  const onFileSelected = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = '';
+    if (!file) return;
+    uploadAvatar.mutate(file, { onSuccess: (result) => setAvatarUrl(result.url) });
+  };
+
+  const handleSave = () => {
+    const trimmed = years.trim();
+    const yearsNum = trimmed === '' ? 0 : Number(trimmed);
+    const yearsInvalid = !Number.isInteger(yearsNum) || yearsNum < 0 || yearsNum > MAX_YEARS;
+    setYearsError(yearsInvalid);
+    if (yearsInvalid) return;
+
+    upsert.mutate(
+      {
+        bio: bio.trim(),
+        yearsOfExperience: yearsNum,
+        educationLevel: initial?.educationLevel ?? '',
+        educationField: initial?.educationField ?? '',
+        specializationsJson: initial?.specializationsJson ?? '[]',
+        avatarUrl,
+      },
+      { onSuccess: () => enqueueSnackbar(t('saved'), { variant: 'success' }) },
+    );
+  };
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 560 }}>
+      <Box>
+        <Typography variant="h5" component="h1">
+          {t('title')}
+        </Typography>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {t('subtitle')}
+        </Typography>
+      </Box>
+
+      {/* Not bookable until verification (f5) — a neutral placeholder, not the real banner. */}
+      <Paper
+        elevation={0}
+        sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider', borderInlineStartWidth: 4, borderInlineStartColor: 'var(--bal-warning)' }}
+      >
+        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'flex-start' }}>
+          <AppIcon icon="warning" size={24} color="var(--bal-warning)" />
+          <Stack sx={{ gap: 1, flexGrow: 1 }}>
+            <Box>
+              <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+                {t('unverified_title')}
+              </Typography>
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                {t('unverified_body')}
+              </Typography>
+            </Box>
+            <AppButton
+              color="primary"
+              variant="outlined"
+              to={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
+              sx={{ m: 0, alignSelf: 'flex-start' }}
+            >
+              {t('unverified_cta')}
+            </AppButton>
+          </Stack>
+        </Stack>
+      </Paper>
+
+      <Stack direction="row" sx={{ gap: 2, alignItems: 'center' }}>
+        <Avatar src={avatarUrl ?? undefined} sx={{ width: 72, height: 72, bgcolor: 'var(--bal-primary-soft)' }}>
+          {avatarUrl ? null : <AppIcon icon="account" size={36} color="var(--bal-primary)" />}
+        </Avatar>
+        <Stack sx={{ gap: 0.5 }}>
+          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+            {t('photo')}
+          </Typography>
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('photo_hint')}
+          </Typography>
+          <AppButton
+            variant="outlined"
+            color="primary"
+            startIcon="camera"
+            onClick={pickFile}
+            disabled={uploadAvatar.isPending}
+            sx={{ m: 0, mt: 0.5, alignSelf: 'flex-start' }}
+          >
+            {uploadAvatar.isPending ? t('uploading') : t('upload')}
+          </AppButton>
+          <input ref={fileInputRef} type="file" accept="image/*" hidden onChange={onFileSelected} />
+        </Stack>
+      </Stack>
+
+      <TextField
+        label={t('bio')}
+        value={bio}
+        onChange={(e) => setBio(e.target.value)}
+        helperText={t('bio_hint')}
+        multiline
+        minRows={3}
+        fullWidth
+      />
+
+      <TextField
+        label={t('years')}
+        value={years}
+        onChange={(e) => {
+          setYears(e.target.value.replace(/\D/g, '').slice(0, 2));
+          if (yearsError) setYearsError(false);
+        }}
+        error={yearsError}
+        helperText={yearsError ? t('years_invalid') : undefined}
+        slotProps={{ htmlInput: { dir: 'ltr', inputMode: 'numeric', style: { textAlign: 'start' } } }}
+        sx={{ maxWidth: 200 }}
+      />
+
+      <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+        {t('deferred_services')}
+      </Typography>
+
+      <AppButton
+        color="primary"
+        variant="contained"
+        onClick={handleSave}
+        disabled={upsert.isPending}
+        sx={{ m: 0, alignSelf: 'flex-start' }}
+      >
+        {upsert.isPending ? tc('saving') : t('save')}
+      </AppButton>
+    </Box>
+  );
+};