# Architecture du Frontend - COOP-CA AMIFOND
 
 ## 1. Vue d'ensemble
 
 Ce document décrit l'architecture technique de l'application frontend du projet COOP-CA AMIFOND. Le projet est une application web moderne construite avec Next.js 15, conçue pour être robuste, évolutive et maintenable.
 
 L'architecture est orientée "feature-based" (par fonctionnalité) et suit le principe de colocation, où les fichiers liés à une même fonctionnalité (composants, hooks, services) sont regroupés.
 
 ## 2. Tech Stack (Pile Technologique)
 
 | Catégorie | Technologie | Rôle |
 |---|---|---|
 | **Framework** | [Next.js](https://nextjs.org/) 15 (App Router) | Framework React pour le rendu côté serveur (SSR) et la génération de sites statiques (SSG). |
 | **Langage** | [TypeScript](https://www.typescriptlang.org/) | Sur-ensemble de JavaScript qui ajoute le typage statique. |
 | **Style & UI** | [Tailwind CSS](https://tailwindcss.com/) v4 | Framework CSS "utility-first" pour un design rapide et personnalisé. |
 | **Composants** | [Shadcn UI](https://ui.shadcn.com/) | Collection de composants d'interface utilisateur réutilisables, accessibles et personnalisables. |
 | **Gestion de l'état serveur** | [TanStack Query](https://tanstack.com/query/latest) v5 | Gestion des requêtes API, du cache, et de la synchronisation des données asynchrones. |
 | **Gestion de l'état client** | [Zustand](https://zustand-demo.pmnd.rs/) | Gestionnaire d'état global minimaliste pour l'état partagé côté client (ex: session utilisateur). |
 | **Client HTTP** | [Axios](https://axios-http.com/) | Client HTTP basé sur les promesses pour effectuer les requêtes vers l'API backend. |
 | **Formulaires** | [React Hook Form](https://react-hook-form.com/) | Gestion performante et flexible des formulaires. |
 | **Validation** | [Zod](https://zod.dev/) | Validation de schémas de données avec inférence de types TypeScript. |
 | **Qualité du code** | ESLint, Prettier, Husky | Outils pour le formatage, l'analyse statique du code et les hooks pre-commit. |
 
 ## 3. Structure des Fichiers
 
 Le projet utilise des alias de chemin (configurés dans `tsconfig.json` et `components.json`) pour des importations propres et une meilleure organisation.
 
 ```
 src/
 ├── app/
 │   ├── (auth)/                 # Routes et logique pour les utilisateurs non authentifiés
 │   │   └── auth/
 │   ├── (main)/                 # Routes et logique pour les utilisateurs authentifiés (dashboard)
 │   │   └── dashboard/
 │   ├── layout.tsx              # Layout racine de l'application
 │   └── not-found.tsx           # Page 404
 │
 ├── components/
 │   ├── auth/                   # Composants spécifiques à l'authentification (ProtectedRoute)
 │   └── ui/                     # Composants Shadcn UI (Button, Card, etc.)
 │
 ├── hooks/
 │   └── auth/                   # Hooks personnalisés pour la logique d'authentification (useLogin, etc.)
 │
 ├── lib/
 │   ├── api-client.ts           # Instance Axios configurée avec intercepteurs
 │   ├── api-config.ts           # Configuration centralisée des endpoints et des clés TanStack Query
 │   └── utils.ts                # Fonctions utilitaires (ex: `cn` de `tailwind-merge`)
 │
 ├── providers/
 │   └── app-providers.tsx       # Composant qui regroupe tous les providers (QueryClient, Theme, etc.)
 │
 ├── services/
 │   └── auth.service.ts         # Fonctions pour interagir avec l'API d'authentification
 │
 ├── stores/
 │   └── auth/
 │       └── auth-store.ts       # Store Zustand pour l'état global d'authentification
 │
 └── types/
     └── auth.ts                 # Définitions des types TypeScript pour l'authentification
 ```
 
 ## 4. Flux de Données et d'Authentification
 
 ### 4.1. Flux d'Authentification
 
 1.  **Formulaire de Connexion** : L'utilisateur soumet ses identifiants via un formulaire géré par `React Hook Form` et validé par `Zod`.
 2.  **Mutation TanStack Query** : Le hook `useLogin` (dans `src/hooks/auth/`) est appelé. Il utilise une mutation de TanStack Query pour envoyer la requête.
 3.  **Service d'Authentification** : La mutation appelle la fonction correspondante dans `auth.service.ts`.
 4.  **Client Axios** : Le service utilise l'instance `apiClient` (`src/lib/api-client.ts`) pour effectuer la requête `POST` vers l'API Django.
 5.  **Réponse de l'API** :
     *   **Succès** : L'API retourne les tokens JWT (access, refresh) et les informations de l'utilisateur.
     *   **Échec** : L'API retourne une erreur (ex: 401 Unauthorized, 400 Bad Request).
 6.  **Mise à jour de l'État** :
     *   **Succès** : Le hook `useLogin` met à jour le store **Zustand** (`auth-store.ts`) avec les informations de l'utilisateur et les tokens. Le store persiste ces informations dans le `localStorage`.
     *   **Échec** : TanStack Query capture l'erreur, qui est affichée à l'utilisateur (via un toast `sonner` par exemple).
 7.  **Intercepteurs Axios** : Pour les requêtes suivantes, l'intercepteur Axios attache automatiquement l'access token au header `Authorization`. Si le token est expiré, un autre intercepteur tente de le rafraîchir en utilisant le refresh token.
 
 ### 4.2. Protection des Routes
 
 - Les routes protégées sont encapsulées dans un composant `ProtectedRoute` (`src/components/auth/protected-route.tsx`).
 - Ce composant vérifie l'état d'authentification dans le store Zustand.
 - Si l'utilisateur n'est pas authentifié (ou n'a pas les permissions requises), il est redirigé vers la page de connexion ou une page d'accès non autorisé.
 
 ## 5. Scripts et Workflow de Développement
 
 Le fichier `package.json` définit les scripts principaux :
 
 - `npm run dev`: Lance le serveur de développement Next.js.
 - `npm run build`: Construit l'application pour la production.
 - `npm run lint`: Analyse le code avec ESLint pour détecter les erreurs et les problèmes de style.
 - `npm run format`: Formate automatiquement tout le code avec Prettier.
 - `npm run prepare`: Installe Husky pour les hooks de pre-commit.
 
 Le hook `pre-commit` de Husky exécute `lint-staged`, qui lance `eslint --fix` sur les fichiers modifiés, garantissant une base de code propre et cohérente.