feat(frontend): init Flutter project with login screen and JWT auth

- Projet Flutter créé manuellement (pubspec.yaml, structure lib/) - Écran de connexion complet avec validation, gestion erreurs, spinner - ApiClient Dio avec intercepteur JWT automatique - AuthProvider (Provider) + AuthService (shared_preferences) - Routing GoRouter avec redirection auth/non-auth - DashboardScreen placeholder - Rapport PFE : ajout Chapitre 5 Frontend (architecture, JWT, login) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-20 20:15:58 +01:00
parent 3816f8b8f1
commit c1dabb486d
9 changed files with 620 additions and 0 deletions
@@ -362,3 +362,119 @@ docker logs rayhan-backend -f
 # Accéder à MySQL
 docker exec -it rayhan-mysql mysql -u root -prayhan_erp_2024 rayhan_erp_db
 ```
+
+---
+
+# Chapitre 5 — Réalisation Frontend (Application Mobile Flutter)
+
+## 5.1 Choix Technologique
+
+L'interface utilisateur de l'ERP Rayhan est développée avec **Flutter**, le framework de Google permettant de créer des applications mobiles multiplateformes (Android et iOS) à partir d'une seule base de code Dart.
+
+### Justification du choix Flutter
+
+| Critère | Flutter | React Native | Natif Android/iOS |
+|---------|---------|--------------|-------------------|
+| Code partagé Android/iOS | 100% | ~85% | 0% |
+| Performance | Excellente | Bonne | Excellente |
+| Courbe d'apprentissage | Moyenne | Moyenne | Élevée |
+| Écosystème packages | Riche | Riche | Natif |
+| Rendu UI | Moteur propre (Skia) | Bridge natif | Natif |
+
+Flutter a été retenu pour sa capacité à produire une application unique couvrant les deux plateformes mobiles majeures, tout en offrant des performances proches du natif grâce à son moteur de rendu indépendant.
+
+## 5.2 Architecture du Projet Flutter
+
+L'architecture adoptée suit le pattern **Provider + Services** :
+
+```
+frontend/
+├── lib/
+│   ├── main.dart                  # Point d'entrée, routing, thème
+│   ├── screens/                   # Écrans de l'application
+│   │   ├── login_screen.dart      # Écran de connexion
+│   │   └── dashboard_screen.dart  # Tableau de bord KPI
+│   ├── providers/                 # Gestion d'état (Provider)
+│   │   └── auth_provider.dart     # État authentification
+│   ├── services/                  # Appels API
+│   │   ├── api_client.dart        # Client Dio + intercepteur JWT
+│   │   └── auth_service.dart      # Service authentification
+│   ├── models/                    # Modèles de données Dart
+│   └── widgets/                   # Composants réutilisables
+├── pubspec.yaml                   # Dépendances Flutter
+└── android/                       # Configuration Android
+```
+
+### Dépendances principales
+
+| Package | Version | Rôle |
+|---------|---------|------|
+| `dio` | ^5.4.0 | Client HTTP avec intercepteurs |
+| `provider` | ^6.1.1 | Gestion d'état réactive |
+| `shared_preferences` | ^2.2.2 | Stockage local du token JWT |
+| `go_router` | ^13.2.0 | Navigation déclarative |
+| `fl_chart` | ^0.67.0 | Graphiques pour le dashboard |
+| `intl` | ^0.19.0 | Formatage dates et nombres |
+
+## 5.3 Authentification et Sécurité
+
+### Flux d'authentification
+
+Le flux d'authentification suit le protocole JWT standard :
+
+1. L'utilisateur saisit son identifiant et mot de passe
+2. L'application envoie une requête `POST /api/auth/signin`
+3. Le serveur retourne un token JWT signé (validité 24h)
+4. Le token est stocké localement via `shared_preferences`
+5. Chaque requête API suivante inclut automatiquement `Authorization: Bearer <token>`
+6. À la déconnexion, le token est supprimé du stockage local
+
+### Intercepteur JWT automatique
+
+La classe `ApiClient` centralise toutes les communications HTTP et injecte automatiquement le token JWT dans les en-têtes via un intercepteur `Dio` :
+
+```dart
+class _AuthInterceptor extends Interceptor {
+  @override
+  void onRequest(RequestOptions options, RequestInterceptorHandler handler) async {
+    final prefs = await SharedPreferences.getInstance();
+    final token = prefs.getString('jwt_token');
+    if (token != null) {
+      options.headers['Authorization'] = 'Bearer $token';
+    }
+    handler.next(options);
+  }
+}
+```
+
+Cette approche centralise la gestion du token et évite sa répétition dans chaque appel API.
+
+### Redirection automatique (GoRouter)
+
+Le routeur détecte l'état d'authentification et redirige automatiquement :
+- Un utilisateur non connecté est redirigé vers `/login`
+- Un utilisateur déjà connecté accédant à `/login` est redirigé vers `/dashboard`
+
+## 5.4 Écran de Connexion
+
+L'écran de connexion (`LoginScreen`) présente une interface épurée et professionnelle :
+
+**Composants UI :**
+- Logo de l'application avec icône usine (représentant l'industrie plasturgie)
+- Titre "RAYHAN ERP" et sous-titre
+- Formulaire de connexion avec validation :
+  - Champ identifiant avec icône
+  - Champ mot de passe avec bouton afficher/masquer
+  - Message d'erreur contextuel en cas d'échec
+  - Bouton de connexion avec indicateur de chargement
+- Footer © SUARL Rayhan
+
+**Gestion des états :**
+- État initial : formulaire vide
+- État chargement : spinner animé, bouton désactivé
+- État erreur : bandeau rouge avec message explicite
+- État succès : redirection automatique vers le dashboard
+
+---
+
+*[Section à compléter avec captures d'écran lors de la finalisation du rapport]*