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/components/OtpInput/OtpInput.test.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '../../theme';
+import OtpInput from './OtpInput';
+
+function Harness({ length = 4, onComplete }: { length?: number; onComplete?: (v: string) => void }) {
+  const [value, setValue] = useState('');
+  return (
+    <ThemeProvider>
+      <OtpInput length={length} value={value} onChange={setValue} onComplete={onComplete} aria-label="code" />
+    </ThemeProvider>
+  );
+}
+
+describe('<OtpInput/> component', () => {
+  it('renders one box per length', () => {
+    render(<Harness length={5} />);
+    expect(screen.getAllByRole('textbox')).toHaveLength(5);
+  });
+
+  it('accepts a digit into the first box', async () => {
+    const user = userEvent.setup();
+    render(<Harness length={4} />);
+    const boxes = screen.getAllByRole('textbox') as HTMLInputElement[];
+    await user.type(boxes[0], '7');
+    expect(boxes[0].value).toBe('7');
+  });
+
+  it('normalizes Persian digits', async () => {
+    const user = userEvent.setup();
+    render(<Harness length={4} />);
+    const boxes = screen.getAllByRole('textbox') as HTMLInputElement[];
+    await user.type(boxes[0], '۹');
+    expect(boxes[0].value).toBe('9');
+  });
+
+  it('calls onComplete with the full code once every box is filled', async () => {
+    const user = userEvent.setup();
+    const onComplete = jest.fn();
+    render(<Harness length={4} onComplete={onComplete} />);
+    const boxes = screen.getAllByRole('textbox') as HTMLInputElement[];
+    await user.type(boxes[0], '1');
+    await user.type(boxes[1], '2');
+    await user.type(boxes[2], '3');
+    await user.type(boxes[3], '4');
+    expect(onComplete).toHaveBeenCalledWith('1234');
+  });
+});