Frontend — Vue d'ensemble

Le SIM Frontend est le client web de la plateforme GLOBAL SIM GROUP — une application TanStack Start (React 19, TypeScript 6, Vite 8) client-only qui consomme le backend NestJS en HTTP + JWT. Production : global-sim-group.com.

Ce que couvre cette documentation

L’architecture en couches (core/, features/, routes/, components/)
Le design system « Concierge » (tokens, primitives, conventions visuelles)
La couche API (apiFetch, api:gen, OpenAPI) et la gestion d’état
La session JWT, le refresh rotatif et le modèle de permissions
Les commandes de développement, les tests et les conventions

Démarrage rapide (local)

cd global-sim-group
npm install
npm run dev        # http://localhost:3000

La spec OpenAPI du backend est régénérée en types avec npm run api:gen ; les routes se régénèrent avec npm run generate-routes.

Stack

Couche	Choix
Framework	TanStack Start (React 19, Vite 8, SSR structurelle)
Routage	TanStack Router (routes fichiers, guards `beforeLoad`)
État serveur	TanStack Query (singleton `core/query`)
Formulaires	TanStack Form
Style	Tailwind CSS v4 + tokens CSS variables
Composants	Radix UI / shadcn + primitives maison (`components/ui`)
Icônes	Lucide
Notifications temps réel	Socket.IO
Qualité	Biome (lint/format), Vitest + Testing Library, `tsc --noEmit`
PWA	manifest + service worker

Structure du dépôt

src/
├── routes/            # 123 fichiers de route — colle : guards, layouts
├── features/          # 19 modules métier (residence, pressing, espace-client…)
├── components/
│   ├── ui/            # primitives partagées (Button, Badge, Dialog, Table…)
│   └── layout/        # coquille (AppShell, sidebar, navbars)
├── core/
│   ├── api/           # client HTTP + schéma OpenAPI généré
│   ├── auth/          # session JWT, guards, hooks
│   ├── permissions/   # codes MODULE.ACTION et helpers
│   ├── query/         # queryClient + clés de requêtes
│   ├── forms/         # helpers TanStack Form
│   └── notifications/ # Socket.IO
├── integrations/      # adaptateurs framework (tanstack-query)
└── styles.css         # tokens du design system (source de vérité)

Trois espaces

Espace	Routes	Public
Back-office staff	`/_authenticated/*` (AppShell + sidebar)	Employés selon rôles/permissions
Portail résident	`/_authenticated/residence/portail/*` (même AppShell, bloc nav dédié)	`PORTAIL.VOIR` / `RESIDENT.VOIR`, scopé à `idClient`
Espace client	`/espace-client/*` (ClientShell : sidebar `lg+`, navbar + tab bar mobile)	Clients auto-inscrits

La landing publique (/) est la vitrine marketing — animations riches assumées.

Fichiers générés (jamais édités à la main)

Fichier	Généré par
`src/routeTree.gen.ts`	`npm run generate-routes`
`src/core/api/generated/schema.ts`	`npm run api:gen`

Prochaines étapes

Architecture et conventions de code
Routing et gestion d’état
Couche API
Authentification, autorisation et sécurité
Design system « Concierge » et composants
Développement et tests
Impression des tickets et déploiement Vercel