From 8857ce01efc89843ac72e50d03315c2c000f2fdf Mon Sep 17 00:00:00 2001 From: Manus Date: Thu, 12 Feb 2026 03:44:28 -0500 Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Impl=C3=A9mentation=20de=20l'assi?= =?UTF-8?q?stant=20de=20cr=C3=A9ation=20guid=C3=A9e=20avec=20interface=20d?= =?UTF-8?q?iff=C3=A9renci=C3=A9e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ **Assistant de création guidée en 3 étapes** L'interface de l'assistant est maintenant complètement différente du mode avancé, offrant une expérience simplifiée et guidée pour les utilisateurs non techniques. **Étape 1 - Conditions simples** - Nom de la règle - Question guidée : "Quand appliquer cette règle ?" - Interface simplifiée : "Le fournisseur [contient/est égal à/commence par] [valeur]" - Validation avant passage à l'étape suivante **Étape 2 - Sélection des actions** - Question guidée : "Que voulez-vous remplir automatiquement ?" - Sélection simple des 3 champs : Type d'achat, Service concerné, Ventilation comptable - Option "Ne pas modifier" pour chaque champ **Étape 3 - Révision et validation** - Récapitulatif visuel dans une Card - Affichage clair du nom, des conditions et des actions - Bouton "Créer la règle" pour finaliser **Navigation intuitive** - Boutons "Annuler" / "Précédent" / "Suivant" - Badge indiquant l'étape courante (Étape X/3) - Validation à chaque étape avant progression - Messages d'erreur clairs si champs obligatoires manquants **Différences Assistant vs Mode avancé** - **Assistant** : Interface simplifiée, 1 condition sur le fournisseur uniquement, navigation par étapes, questions en français naturel - **Mode avancé** : Formulaire complet, conditions multiples avec opérateurs complexes, logique AND/OR, bouton "Tester la règle", tout sur une seule page Architecture technique : - client/src/pages/AutomationRules.tsx : Ajout de la structure conditionnelle wizardMode - client/src/pages/AutomationRules.tsx : Implémentation des 3 étapes avec wizardStep - client/src/pages/AutomationRules.tsx : Navigation avec validation entre les étapes - client/src/pages/AutomationRules.tsx : Séparation complète de l'UI wizard vs avancé - client/src/pages/AutomationRules.tsx : Utilisation de Card pour le récapitulatif Bénéfices utilisateur : - **Accessibilité** : Interface guidée pour les non-techniciens - **Simplicité** : Une seule condition à la fois, focus sur l'essentiel - **Clarté** : Questions en langage naturel, pas de jargon technique - **Sécurité** : Validation à chaque étape, récapitulatif avant création - **Flexibilité** : Choix entre assistant simple et mode avancé selon le besoin --- client/src/pages/AutomationRules.tsx | 254 +++++++++++++++++++++++++-- todo.md | 8 + 2 files changed, 247 insertions(+), 15 deletions(-) diff --git a/client/src/pages/AutomationRules.tsx b/client/src/pages/AutomationRules.tsx index dadac49..de70b16 100644 --- a/client/src/pages/AutomationRules.tsx +++ b/client/src/pages/AutomationRules.tsx @@ -374,23 +374,204 @@ export default function AutomationRules() { - {editingRule ? "Modifier la règle" : "Nouvelle règle"} + + {wizardMode && !editingRule ? ( +
+ Assistant de création + Étape {wizardStep}/3 +
+ ) : ( + editingRule ? "Modifier la règle" : "Nouvelle règle" + )} + - Définissez les conditions (SI) et les actions (ALORS) pour le remplissage automatique + {wizardMode && !editingRule ? ( + wizardStep === 1 ? "Définissez les conditions pour déclencher la règle" : + wizardStep === 2 ? "Choisissez les champs à remplir automatiquement" : + "Vérifiez et validez votre règle" + ) : ( + "Définissez les conditions (SI) et les actions (ALORS) pour le remplissage automatique" + )}
- {/* Rule Name */} -
- - setRuleName(e.target.value)} - placeholder="Ex: Factures Microsoft CAPEX" - /> -
+ {wizardMode && !editingRule ? ( + // WIZARD MODE - Étapes guidées +
+ {wizardStep === 1 && ( + // ÉTAPE 1: Nom et conditions simples +
+
+ + setRuleName(e.target.value)} + placeholder="Ex: Factures Microsoft CAPEX" + /> +
+ +
+

Quand appliquer cette règle ?

+

Définissez les conditions pour déclencher la règle

+ +
+
+ +
+ + { + if (conditions.length === 0) { + setConditions([{ field: "supplierName", operator: "contains", value: e.target.value }]); + } else { + updateCondition(0, "value", e.target.value); + } + }} + placeholder="Ex: Microsoft, Amazon, etc." + className="flex-1" + /> +
+
+
+
+
+ )} + + {wizardStep === 2 && ( + // ÉTAPE 2: Actions +
+
+

Que voulez-vous remplir automatiquement ?

+

Sélectionnez les champs à compléter

+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ )} + + {wizardStep === 3 && ( + // ÉTAPE 3: Révision +
+
+

Récapitulatif de la règle

+

Vérifiez les informations avant de créer

+
+ + + +
+
Nom
+
{ruleName || "(non défini)"}
+
+ +
+
Condition
+
+ Le fournisseur {conditions[0]?.operator === "contains" ? "contient" : conditions[0]?.operator === "equals" ? "est égal à" : "commence par"} "{conditions[0]?.value || "(vide)"}" +
+
+ +
+
Actions
+
+ {actions.typeAchat &&
• Type d'achat : {actions.typeAchat}
} + {actions.serviceConcerne &&
• Service : {actions.serviceConcerne}
} + {actions.ventilationComptable &&
• Ventilation : {actions.ventilationComptable}
} + {!actions.typeAchat && !actions.serviceConcerne && !actions.ventilationComptable && ( +
Aucune action définie
+ )} +
+
+ + +
+ )} +
+ ) : ( + // MODE AVANCÉ - Formulaire complet +
+ {/* Rule Name */} +
+ + setRuleName(e.target.value)} + placeholder="Ex: Factures Microsoft CAPEX" + /> +
{/* Conditions */}
@@ -529,9 +710,50 @@ export default function AutomationRules() {
+ + )} + {wizardMode && !editingRule ? ( + // Navigation wizard + <> + + + + ) : ( + // Navigation mode avancé + <> - + + + )} diff --git a/todo.md b/todo.md index 8abb834..ff4cfe5 100644 --- a/todo.md +++ b/todo.md @@ -325,3 +325,11 @@ - [x] Afficher les résultats du test (nombre de factures affectées) - [x] Ajouter le bouton "Dupliquer" dans la liste des règles - [x] Tester toutes les nouvelles fonctionnalités + +## Assistant de création guidée (interface différenciée) +- [x] Créer l'interface de l'assistant avec navigation par étapes (1/2/3) +- [x] Implémenter l'étape 1 : Questions simples pour les conditions +- [x] Implémenter l'étape 2 : Sélection des actions à appliquer +- [x] Implémenter l'étape 3 : Récapitulatif et validation +- [x] Ajouter la navigation Précédent/Suivant entre les étapes +- [x] Tester le parcours complet de l'assistant