Rawbank Frontend

Rawbank Frontend

Skills couvrant trois applications frontend Rawbank.

Usage portable : les fichiers references/*.md contiennent code, tokens et patterns inline — ne pas dépendre d'un clone repo ni de chemins absolus machine. Voir references/paths-convention.md.

Vue comparative : references/projects-overview.md
Index complet : references/paths-convention.md

GO-PASS

Stack : React 19 · Vite · Mantine 7 · TypeScript · TanStack Query

Architecture

pages/<domaine>/     → écrans
lib/<domaine>.ts     → types, fetch API
components/          → guards, badges, layout
routes/              → AppRoutes, ProtectedRoute, AccessRoute

Règle : logique API dans lib/, pas dans la page.

Clients API (lib/)

Meta statuts

sales/sale-status-meta.ts, supply/status-meta.ts, stocks/movement-meta.ts, stocks/stock-level-meta.ts, stocks/expiration-meta.ts → SemanticStatusBadge

Guards

MFA parité : voir references/gopass-lib-auth-mfa.md
LDAP/LDAPS (livré V30–V31) : references/gopass-auth-ldap-frontend.md

Pattern liste

1. useSearchParams() + urlSearchParamsToRecord() + parsePaginationParams()
2. useQuery avec clé page/pageSize/filtres
3. PaginationBar + toolbar app-table-toolbar
4. useNotifyMutation + invalidation cache

Styling GO-PASS

• Mantine 7 + classes sémantiques app-* (app-page, app-card, app-table, app-kpi)
• Palette myColor RAWBANK #ff9e1b → #ff9400
• Détail complet : references/gopass-theme-styles.md

Pages clés

Checklist nouvelle page GO-PASS

- [ ] Route AppRoutes + nav-data.ts
- [ ] lib/<domaine>.ts types + fetch
- [ ] hasPermission + flags canXxx API
- [ ] useQuery / useNotifyMutation
- [ ] PaginationBar + useSearchParams
- [ ] SemanticStatusBadge + *-meta.ts
- [ ] Gestion 403
- [ ] Classes app-*

npm run dev:front   # 5173, proxy /api → 8080

Références GO-PASS (autonomes — code inline dans references/)

• references/gopass-pages-pattern.md
• references/gopass-ui-components.md
• references/gopass-lib-auth-mfa.md
• references/gopass-auth-ldap-frontend.md — LDAP/LDAPS + MFA (plan V30)
• references/gopass-theme-styles.md
• references/paths-convention.md

Digibranch — design system Rawbank

Tokens couleur

primary: #ff9e1b          CTA, progression
primary-light: #ffd000     accents dorés
success: #22c55e | error: #ef4444
auth-bg: #0a0a0a          écrans auth dark
dashboard-bg: #ffffff     opérations light
surface-muted: #f8f9fa
radius-md: 12px | radius-lg: 16px
btn-min-height: 48px      tactile kiosk
résolution cible: 1080p

Police : Geist. Détail tokens : references/digibranch-theme-styles.md.

Thèmes contextuels

Règle DRY absolue (kiosk)

Pages = orchestration uniquement. 79 composants dans components/kiosk/. Zéro duplication UI.

Workflow : parcourir components/kiosk/ → paramétrer via props → sinon créer composant générique.

Liste complète : references/digibranch-kiosk-components.md

Digibranch Next.js

Stack : Next.js 16 · React 19 · Mantine 7 · Tailwind 4 · Zod · Serwist PWA

Structure

src/app/(kiosk)/          # Routes kiosk
  page.tsx                # Sélection langue
  auth/                   # Wizard OTP (5 étapes)
  dashboard/
  services/accounts/
  services/statements/    # Hub + 3 wizards
src/components/kiosk/     # 79 composants
src/lib/
  api/kiosk-api-client.ts # kioskFetch Server Actions
  services/               # Logique métier
  domain/, format/, i18n/, auth/
src/config/
  services.ts             # KIOSK_SERVICES catalogue
  statement-types.ts      # Sous-catalogue relevés
  auth-flow.ts            # AUTH_ROUTES, AUTH_WIZARD_TOTAL=5
src/proxy.ts              # Garde routes (pas middleware.ts)

Routes App Router

Catalogue services (déploiement progressif)

// config/services.ts
export type ServiceStatus = "active" | "coming_soon" | "disabled";
export const KIOSK_SERVICES: KioskService[] = [
  { id: "accounts", route: "/services/accounts", status: "active", ... },
  { id: "statements", route: "/services/statements", status: "active", ... },
];

Hub relevés (statement-types.ts) : account-statement, rib, debit-credit-notice.

ServiceGrid lit le catalogue — seuls active sont cliquables ; coming_soon = badge « Bientôt disponible ».

API client (Server Actions)

kioskFetch() dans lib/api/kiosk-api-client.ts :

• Relaie cookies digibranch_sid, digibranch_doc_draft
• Injecte X-Kiosk-Internal-Token, device, branch, locale, X-Request-Id
• Parse ActionResult<T> via parse-kiosk-response.ts
• Ne jamais décoder le cookie session côté client

Server Actions pattern

"use server";
type ActionResult<T> = { ok: true; message; data? } | { ok: false; error; code? };
// Zod validate → service → ActionResult

Garde session (proxy.ts)

• Vérifie cookie sur /dashboard, /services
• Bypass Server Actions (évite ERR-NETWORK sur session expirée)
• Redirect /auth/session-expired

i18n

Locales : fr, en, ln. Custom t(locale, key) — clés auth.*, services.*, statements.*, errors.ERR-*.
Erreurs : resolve-error-message.ts mappe codes ERR-* → message localisé.

Hooks (10+)

useKioskNavigation, useKioskFormAction, useKioskServerAction, useKioskSessionExpired, useStatementWizardShell, useStatementWizardAccount, useDownloadCountdown, useFilteredPagination, useOtpInputLabels, useKioskPageReady

Parcours transactionnel standard

Sélection compte → Saisie → Confirmation → Auth OTP → Succès + reçu/PDF

Checklist feature Digibranch Next

- [ ] Maquette mockups/ si UI nouvelle
- [ ] Composant kiosk existant réutilisé
- [ ] Zod + service lib/services/
- [ ] Server Action ActionResult
- [ ] Entrée catalogue services.ts (status)
- [ ] Traductions fr/en/ln
- [ ] Audit + codes ERR-*
- [ ] Playwright e2e si parcours critique

Digibranch SPA (Vite)

Migration Next → Vite (phases M0–M8). Même contrat API, fidélité visuelle.

Différences vs Next

Dev proxy BFF

Vite injecte headers sécurité comme Next.js. Avertit si KIOSK_INTERNAL_API_TOKEN manquant.

Sync composants

Modifier frontend/src/components/kiosk/ puis synchroniser vers digibranch-kiosk/src/components/kiosk/.

E2E Playwright

digibranch-kiosk/e2e/ : smoke, auth-otp, auth-guard, session-expired.
E2E_WITH_BACKEND=1 pour OTP réel contre Spring Boot.

npm run dev:front   # GO-PASS :5173
npm run dev         # Digibranch Next :3000 ou Vite :3001 selon package

Déploiement prod

digibranch-kiosk/deploy/nginx-kiosk.conf — SPA dist/ + proxy /kiosk/v1/ avec headers injectés.

Références Digibranch (autonomes — tokens + ERR-* inline)

• references/digibranch-kiosk-components.md
• references/digibranch-design-system.md
• references/digibranch-theme-styles.md — variables --kiosk-* inline
• references/digibranch-nextjs-patterns.md
• references/digibranch-vite-spa.md
• references/digibranch-i18n-errors.md
• references/paths-convention.md

Conventions Rawbank partagées

Anti-patterns

GO-PASS : fetch dans useEffect ; ignorer canXxx ; Tailwind ; filtrer ventes GUICHET côté client.

Digibranch : markup dupliqué dans pages ; TransferAccountSelector au lieu de AccountSelector ; hardcoder dashboard ; secrets en VITE_* ; décoder cookie session ; Server Actions sans Zod ; texte en dur sans i18n.

Commun : logique métier dans composants React ; ignorer parité backend↔frontend sur règles auth.