frontend phase 0: app shells, design system & data/contract patterns

Turn the starter into the Balinyaar foundation for the three actor
experiences and lock in the patterns later phases copy.

- Cleanup: remove toastDemo namespace, placeholder home page, and the two
  dead icons; fix BottomBar to use usePathname (locale-aware active tab).
- Three actor shells under (private-routes), no layout above [locale]:
  customer (customer) group with the 5-tab bottom nav; nurse (/nurse) and
  admin (/admin) on the shared sidebar engine. Role model via constants/roles
  + useActorRole (defaults to customer until roles land in f1-b2).
- services/{domain} reference (patients) with a mock behind a config seam,
  hierarchical query keys, deliberate staleTime, and mutation invalidation;
  shared ApiEnvelope/Paginated wire types + unwrap() in lib/api/types.
- Money (integer-safe IRR/Toman) + Shamsi-date utils; toEnglishDigits helper.
- Shared composites, each tested: OtpInput, PhoneNumberField, StepperHeader,
  StatusChip, PlaceholderScreen.
- i18n: seed nav/common/shell/patients in both locales; document namespace
  conventions. Update client/CLAUDE.md Project Structure + fix ColorSchemeScript
  doc drift. Add phase report, STATUS, and REQ-001 (envelope/casing/pagination).

Gate: npm run check + test:ci green (72 tests); build green with NEXT_PUBLIC_API_URL.

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

client/src/layout/CustomerLayout.tsx

@@ -0,0 +1,64 @@
+'use client';
+import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
+import { Box, Stack } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { ErrorBoundary } from '@/components';
+import { CONTENT_MAX_WIDTH } from '@/components/config';
+import { ROUTES } from '@/constants';
+import { LinkToPage } from '@/utils';
+import { useIsMobile } from '@/hooks';
+import { TopBar, BottomBar } from './components';
+import { DarkModeToggleButton } from './components/DarkModeButton';
+import { TOP_BAR_DESKTOP_HEIGHT, TOP_BAR_MOBILE_HEIGHT } from './config';
+
+/**
+ * Customer (family) app shell — the primary, mobile-first experience.
+ * A slim TopBar, a scrollable content column constrained to reading width, and the
+ * 5-tab BottomBar (Home/Bookings/Patients/Wallet/Profile) from the wireframe.
+ * @layout CustomerLayout
+ */
+const CustomerLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  const t = useTranslations('nav');
+  const tShell = useTranslations('shell');
+  const onMobile = useIsMobile();
+
+  const bottomNavItems: Array<LinkToPage> = useMemo(
+    () => [
+      { title: t('home'), path: ROUTES.HOME, icon: 'home' },
+      { title: t('bookings'), path: ROUTES.BOOKINGS, icon: 'bookings' },
+      { title: t('patients'), path: ROUTES.PATIENTS, icon: 'patients' },
+      { title: t('wallet'), path: ROUTES.WALLET, icon: 'wallet' },
+      { title: t('profile'), path: ROUTES.PROFILE, icon: 'profile' },
+    ],
+    [t]
+  );
+
+  return (
+    <Stack sx={{ height: '100dvh' }}>
+      <Stack component="header">
+        <TopBar title={tShell('customer_app')} endNode={<DarkModeToggleButton />} />
+      </Stack>
+
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          overflowY: 'auto',
+          width: '100%',
+          maxWidth: CONTENT_MAX_WIDTH,
+          mx: 'auto',
+          px: 2,
+          py: 2,
+          // AppBar is position: fixed — offset content by the top-bar height.
+          pt: `calc(${onMobile ? TOP_BAR_MOBILE_HEIGHT : TOP_BAR_DESKTOP_HEIGHT} + 8px)`,
+        }}
+      >
+        <ErrorBoundary name="Customer">{children}</ErrorBoundary>
+      </Box>
+
+      <BottomBar items={bottomNavItems} />
+    </Stack>
+  );
+};
+
+export default CustomerLayout;