claude code

frontend/CONTEXT.md

@@ -12,34 +12,29 @@ Tout ce qui est indiqué ici est la référence pour les agents frontend.
 ---
 
 ## Objectif du frontend
-- Parcours utilisateur principaux : <A REMPLIR - PROJET> (exemple: à personnaliser — a supprimer)
-- Responsabilités principales : <A COMPLETER PAR AGENT>
-- Hors périmètre : <A REMPLIR - PROJET> (exemple: à personnaliser — a supprimer)
+- Parcours utilisateur principaux : Lister/rechercher items, consulter détails item avec documents, ajouter/éditer item avec upload fichiers, naviguer hiérarchie locations <!-- complété par codex -->
+- Responsabilités principales : Interface utilisateur responsive, formulaires validation, gestion état local/serveur, upload fichiers, recherche temps réel, affichage photos/documents <!-- complété par codex -->
+- Hors périmètre : Logique métier (déléguée au backend), stockage local complexe (cache géré par React Query), authentification (gérée par backend) <!-- complété par codex -->
 
 ## Interfaces
-- API consommées (API = Interface de Programmation) : <A COMPLETER PAR AGENT>
-- Authentification/autorisation : <A COMPLETER PAR AGENT>
-- Intégrations externes : <A REMPLIR - PROJET> (exemple: ERP existant — a supprimer)
+- API consommées : Backend REST à `/api/v1/` (items, locations, categories, documents, search), client généré depuis OpenAPI ou fetch/axios manuel <!-- complété par codex -->
+- Authentification/autorisation : Optionnelle, si activée = gestion session cookie automatique par navigateur, redirection login si 401 <!-- complété par codex -->
+- Intégrations externes : Aucune intégration externe, consomme uniquement le backend HomeStock <!-- complété par codex -->
 
 ## Architecture UI
-- Framework : <A COMPLETER PAR AGENT>
-- Structure des pages : <A COMPLETER PAR AGENT>
-- Gestion d’état : <A COMPLETER PAR AGENT>
-- Design system / UI kit (bibliothèque de composants) : <A COMPLETER PAR AGENT>
+- Framework : React 18+ avec TypeScript, Vite comme bundler et dev server <!-- complété par codex -->
+- Structure des pages : `/` dashboard, `/items` liste items, `/items/:id` détail item, `/items/new` création, `/locations` gestion locations, routing avec React Router v6 <!-- complété par codex -->
+- Gestion d'état : TanStack Query (React Query) pour état serveur + cache, Context API pour état UI global (theme, navigation), useState/useReducer pour état local <!-- complété par codex -->
+- Design system / UI kit : TailwindCSS pour styling, composants custom inspirés de shadcn/ui (pas de dépendance lourde), palette Gruvbox dark <!-- complété par codex -->
 
 ## Qualité & accessibilité
-- Performance attendue : <A REMPLIR - PROJET> (exemple: à personnaliser — a supprimer)
-- Accessibilité (a11y = accessibilité web) : <A COMPLETER PAR AGENT>
-- Tests (unitaires/E2E = tests de bout en bout) : <A COMPLETER PAR AGENT>
+- Performance attendue : FCP (First Contentful Paint) <1.5s, TTI (Time To Interactive) <3s sur réseau local, bundle JS <500KB gzippé <!-- complété par codex -->
+- Accessibilité : Accessibilité de base (ARIA labels, navigation clavier, contraste WCAG AA), pas de certification stricte WCAG AAA (usage personnel) <!-- complété par codex -->
+- Tests : Vitest pour tests unitaires (hooks, utils), Playwright optionnel pour tests E2E critiques (création item, upload fichier), pas de couverture exhaustive <!-- complété par codex -->
 
 ## Conventions
-- Organisation du code : <A COMPLETER PAR AGENT>
-- Nommage : <A COMPLETER PAR AGENT>
-- Gestion erreurs : <A COMPLETER PAR AGENT>
+- Organisation du code : `frontend/src/` racine, sous-dossiers components/ (composants réutilisables), pages/ (vues complètes), hooks/ (custom hooks), api/ (clients API), utils/ (helpers) <!-- complété par codex -->
+- Nommage : PascalCase pour composants/fichiers React, camelCase pour variables/fonctions, préfixes use pour hooks custom, suffixes Page pour pages complètes <!-- complété par codex -->
+- Gestion erreurs : Error boundaries React pour erreurs render, gestion erreurs API via React Query (onError callbacks), toast notifications pour erreurs utilisateur, fallback UI gracieux <!-- complété par codex -->
 
----
-
-## Exemple (a supprimer)
-- Framework : React + Vite.
-- Pages : `dashboard`, `settings`, `billing`.
-- État : Zustand + React Query.
+---