# Prompt p16 — Administration & Rôles (web) *Contextes requis : ctx-global.md + ctx-web-nextjs.md + ctx-laravel-bff.md* --- ## Profil & Accès - **Rôle** : ADM (Administrateur système) - **Nombre d'utilisateurs** : 2 (+ 1 ADM backup) - **Accès** : gestion totale — utilisateurs, rôles, permissions, IoT, sauvegardes, politique paiements - **Session** : 4h (plus courte pour sécurité), OTP à CHAQUE connexion --- ## Fichiers à créer ``` app/(erp)/admin/page.tsx app/(erp)/admin/utilisateurs/page.tsx app/(erp)/admin/utilisateurs/[id]/page.tsx app/(erp)/admin/roles/page.tsx app/(erp)/admin/permissions/page.tsx app/(erp)/admin/iot-capteurs/page.tsx app/(erp)/admin/politique-paiements/page.tsx app/(erp)/admin/sauvegardes/page.tsx components/admin/UtilisateurTable.tsx components/admin/RolesMatrix.tsx components/admin/PermissionsCheckboxGrid.tsx components/admin/DoubleValidationModal.tsx components/admin/IotCapteursGrid.tsx components/admin/PolitiquePaiementsForm.tsx components/admin/SauvegardesPanel.tsx hooks/useAdmin.ts hooks/useDoubleValidation.ts ``` --- ## Spec UX condensée ``` ┌─────────────────────────────────────────────────────────────────────┐ │ FLOWUP ERP Administration [ADM] │ │ Session: 3h42 restantes OTP expiré dans: 4h 🔒 Mode sécurisé │ ├─────────────────────────────────────────────────────────────────────┤ │ [Utilisateurs][Rôles & Permissions][Capteurs IoT][Politique Paiem.] │ │ [Sauvegardes & PRA] │ ├─────────────────────────────────────────────────────────────────────┤ │ MATRICE PERMISSIONS (16 rôles × modules) │ │ ┌──────────┬────────┬──────┬──────┬──────┬──────┬──────┬─────────┐ │ │ │ MODULE │ CEO │ DG │ CFO │ TRE │ COM │ RRH │ ... │ │ │ ├──────────┼────────┼──────┼──────┼──────┼──────┼──────┼─────────┤ │ │ │ Dashboard│ ☑ R │ ☑ R │ ☑ R │ ☑ R │ ☑ R │ ☑ R │ │ │ │ │ Ventes │ ☑ R │ ☑ R │ ☑ R │ ○ │ ☑ RW│ ○ │ │ │ │ │ Paiements│ ☑ VA │ ☑ VA│ ☑ VA│ ☑ RW│ ○ │ ○ │ │ │ │ │ RH │ ☑ R │ ☑ R │ ○ │ ○ │ ○ │ ☑ RW│ │ │ │ │ ... │ │ │ │ │ │ │ │ │ │ └──────────┴────────┴──────┴──────┴──────┴──────┴──────┴─────────┘ │ │ Légende : R = Lecture · RW = Lecture+Écriture · VA = Validation │ │ │ │ [Enregistrer modifications] ← Déclenche double validation ADM │ ├─────────────────────────────────────────────────────────────────────┤ │ ACTIONS CRITIQUES — Double validation requise (ADM1 + ADM2) │ │ ① Créer un compte Administrateur │ │ ② Réinitialiser un mot de passe │ │ ③ Modifier un rôle utilisateur │ │ ④ Bloquer / Désactiver un utilisateur │ │ ⑤ Exporter les données système │ └─────────────────────────────────────────────────────────────────────┘ ``` ### 16 rôles du système CEO, DG, CFO, TRE (Trésorier), COM (Commercial), RRH, CPT (Comptable), OPE (Opérations), GCG (Courrier/GED), GPR (Gestionnaire Produits), GER (Gérant Station), POM (Pompiste), CHA (Chauffeur), AUD (Auditeur), ADM (Administrateur), SYS (Système/Service) ### Politique paiements — 4 seuils paramétrables - Seuil 1 : validation auto (< X GNF) - Seuil 2 : Trésorier seul (X – Y GNF) - Seuil 3 : CFO + OTP (Y – Z GNF) - Seuil 4 : DG + OTP (Z – W GNF) - > W GNF : CEO + OTP ### 52 capteurs IoT — seuils alertes - Chaque capteur a : seuil_alerte (%), seuil_critique (%), délai_timeout (min) - Modification des seuils nécessite confirmation (pas de double validation) ### Sauvegardes - Backup automatique quotidien (chiffré AES-256) - PRA (Plan de Reprise d'Activité) : procédures documentées - Dernière sauvegarde + statut affiché dans le dashboard ADM --- ## Endpoints BFF ``` GET /api/admin/users Query : ?role={role}&statut=actif|bloque&page={n} Réponse : [{ id: INT, nom: "Bah", prenom: "Fatoumata", email: "fbah@febi-itc.com", role: "CFO", statut: 1|3, derniere_connexion: "2026-05-13T08:00:00Z", otp_active: true }] POST /api/admin/users Body : { nom: "...", prenom: "...", email: "...", role: "...", station_id: INT|null } Réponse : { id: INT, validation_requise: true, validation_token: "..." } // Cette action nécessite double validation PUT /api/admin/users/{id}/role Body : { role: "...", motif: "...", validation_token: "..." } Réponse : { id: INT, role: "...", applied: true } PUT /api/admin/users/{id}/bloquer Body : { motif: "...", validation_token: "..." } Réponse : { id: INT, statut: 3 } POST /api/admin/users/{id}/reset-password Body : { validation_token: "..." } Réponse : { sent: true, email: "..." } GET /api/admin/permissions Réponse : { roles: ["CEO", "DG", ...], modules: ["Dashboard", "Ventes", ...], matrix: { "CEO": { "Dashboard": "R", "Ventes": "R", "Paiements": "VA", ... }, "DG": { ... }, ... } } PUT /api/admin/permissions Body : { matrix: { "CEO": { "Ventes": "RW" }, ... }, validation_token: "..." } Réponse : { applied: true } GET /api/admin/politique-paiements Réponse : { seuil_auto: "5000000", // VARCHAR (GNF) seuil_tresorier: "50000000", // VARCHAR seuil_cfo: "500000000", // VARCHAR seuil_dg: "1000000000", // VARCHAR otp_requis_depuis: "50000000" // VARCHAR } PUT /api/admin/politique-paiements Body : { seuil_auto: "...", seuil_tresorier: "...", seuil_cfo: "...", seuil_dg: "..." } Réponse : { applied: true, effective_at: "..." } GET /api/admin/iot-capteurs Query : ?station_id={id} Réponse : [{ id: INT, station_nom: "...", type: "niveau_cuve"|"debit_pompe", seuil_alerte: "20", seuil_critique: "10", timeout_min: 5, actif: true, derniere_lecture: "..." }] PUT /api/admin/iot-capteurs/{id}/seuils Body : { seuil_alerte: "20", seuil_critique: "10", timeout_min: 5 } Réponse : { id: INT, applied: true } POST /api/admin/double-validation/initier Body : { action: "CREER_ADMIN"|"RESET_MDP"|"MODIFIER_ROLE"|"BLOQUER_USER"|"EXPORT_DATA", params: { ... } } Réponse : { validation_token: "...", expire_in: 300, requiert_second_adm: true } POST /api/admin/double-validation/confirmer Body : { validation_token: "...", second_adm_otp: "123456" } Réponse : { confirmed: true, action_result: { ... } } GET /api/admin/sauvegardes Réponse : [{ id: INT, date: "...", taille_mo: "...", chiffrement: "AES-256", statut: "ok"|"echec", telecharger_url: "..." }] ``` --- ## Règles spécifiques - **RGADM-01** : Les 5 actions critiques nécessitent une double validation : ADM1 initie (génère un token), ADM2 confirme avec son OTP. Impossible d'auto-valider. - **RGADM-02** : Session 4h (pas 8h comme les autres rôles). Un timer visible dans le header affiche le temps restant. Déconnexion automatique à l'expiration. - **RGADM-03** : Montants de seuils = VARCHAR(255). La `PolitiquePaiementsForm` transmet les valeurs en string — jamais de conversion numérique côté client. - **RGADM-04** : La matrice permissions est un tableau de checkboxes avec 3 états : ○ (aucun), R (lecture), RW (lecture+écriture). Certaines cellules sont fixes (ex: CEO sur Dashboard = R, non modifiable). - **RGADM-05** : Toute modification de la matrice permissions déclenche un `DoubleValidationModal` avant `PUT /api/admin/permissions`. - **RGADM-06** : IDs = `number` (INT UNSIGNED). Soft delete = `statut: 3` pour les utilisateurs bloqués (jamais supprimés physiquement). - **RGADM-07** : Les 52 capteurs IoT sont listés avec leur seuil actuel. Modification des seuils = simple confirmation (1 clic), pas de double validation. - **RGADM-08** : L'export de données (action critique n°5) génère un rapport complet chiffré AES-256. L'URL de téléchargement est à usage unique (expire après 1 téléchargement). --- ## Tâche Claude Génère le code complet Next.js 15 TypeScript pour le module Administration & Rôles FlowUp ERP. **Contraintes techniques absolues :** - Palette navy `#1A2157`, blue `#1E5EFF`, cyan `#00C8C0` — Inter + JetBrains Mono - Montants (seuils paiements) = VARCHAR(255) → `string` dans les types TS - IDs = `number` (INT UNSIGNED). Soft delete = `statut: 3` - Double validation = flux à deux étapes avec token (pas de modal simple) - Timer session 4h visible dans le header - Matrice permissions = tableau 16×N avec checkboxes 3 états **Génère dans cet ordre :** 1. Types TypeScript (`types/admin.ts`) 2. Hook `useAdmin.ts` (users, permissions, politique, capteurs) 3. Hook `useDoubleValidation.ts` (initier, confirmer, token, expire) 4. `DoubleValidationModal.tsx` (flux 2 étapes + OTP second ADM) 5. `PermissionsCheckboxGrid.tsx` (matrice 16 rôles × modules, 3 états) 6. `RolesMatrix.tsx` (tableau scrollable horizontal) 7. `PolitiquePaiementsForm.tsx` (4 seuils VARCHAR) 8. `IotCapteursGrid.tsx` (52 capteurs, seuils éditables) 9. `SauvegardesPanel.tsx` (liste + statut + téléchargement) 10. `UtilisateurTable.tsx` (liste + boutons actions critiques) 11. Pages : `page.tsx` (dashboard ADM), `utilisateurs/page.tsx`, `utilisateurs/[id]/page.tsx`, `roles/page.tsx`, `permissions/page.tsx`, `iot-capteurs/page.tsx`, `politique-paiements/page.tsx`, `sauvegardes/page.tsx`