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)/(customer)/page.tsx

@@ -1,8 +1,100 @@
-import { getTranslations } from 'next-intl/server';
-import { PlaceholderScreen } from '@/components';
+'use client';
+import { FunctionComponent, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useLocale, useTranslations } from 'next-intl';
+import { Box, Paper, Stack, Typography } from '@mui/material';
+import { AppButton, AppIcon, AppLoading } from '@/components';
+import { ROUTES } from '@/constants';
+import { useMe } from '@/services/auth';
+import { usePatients } from '@/services/patients';
 
-export default async function CustomerHomePage() {
-  const t = await getTranslations('nav');
-  const tShell = await getTranslations('shell');
-  return <PlaceholderScreen icon="home" title={t('home')} description={tShell('placeholder_body')} />;
+interface NudgeCardProps {
+  icon: string;
+  title: string;
+  body: string;
+  ctaLabel: string;
+  to: string;
+}
+
+const NudgeCard: FunctionComponent<NudgeCardProps> = ({ icon, title, body, ctaLabel, to }) => (
+  <Paper
+    elevation={0}
+    sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2, display: 'flex', gap: 2 }}
+  >
+    <AppIcon icon={icon} size={28} color="var(--bal-primary)" />
+    <Stack sx={{ gap: 1, flexGrow: 1 }}>
+      <Stack sx={{ gap: 0.25 }}>
+        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+          {title}
+        </Typography>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {body}
+        </Typography>
+      </Stack>
+      <AppButton color="primary" variant="outlined" to={to} sx={{ m: 0, alignSelf: 'flex-start' }}>
+        {ctaLabel}
+      </AppButton>
+    </Stack>
+  </Paper>
+);
+
+/**
+ * A5 — the family Home. First-login gate: a customer with no patients is sent into onboarding
+ * (A3). Once a patient exists it shows the "complete patient record" nudge (and a profile
+ * nudge until the profile is complete). The redirect waits for a settled list so a post-create
+ * refetch never bounces the user back to onboarding.
+ */
+export default function CustomerHomePage() {
+  const t = useTranslations('home');
+  const router = useRouter();
+  const locale = useLocale();
+
+  const { data: me } = useMe();
+  const { data } = usePatients();
+
+  // A customer with no patients is a first-login user → onboarding. `useCreatePatient` primes
+  // the list cache on success, so a just-onboarded user never transiently reads total===0 here
+  // (no bounce back); a genuinely empty list always renders loading, never a flash of Home.
+  const isEmpty = data?.total === 0;
+
+  useEffect(() => {
+    if (isEmpty) router.replace(`/${locale}${ROUTES.ONBOARDING}`);
+  }, [isEmpty, router, locale]);
+
+  if (data == null || isEmpty) {
+    return <AppLoading />;
+  }
+
+  const href = (path: string) => `/${locale}${path}`;
+  const profileComplete = me?.hasCustomerProfile ?? false;
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      <Box>
+        <Typography variant="h5" component="h1">
+          {t('greeting')}
+        </Typography>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {t('subtitle')}
+        </Typography>
+      </Box>
+
+      <NudgeCard
+        icon="patients"
+        title={t('nudge_patient_title')}
+        body={t('nudge_patient_body')}
+        ctaLabel={t('nudge_patient_cta')}
+        to={href(ROUTES.PATIENTS)}
+      />
+      {!profileComplete ? (
+        <NudgeCard
+          icon="profile"
+          title={t('nudge_profile_title')}
+          body={t('nudge_profile_body')}
+          ctaLabel={t('nudge_profile_cta')}
+          to={href(ROUTES.PROFILE)}
+        />
+      ) : null}
+    </Box>
+  );
 }