✅ **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
Trois nouvelles fonctionnalités implémentées :
✅ **Assistant de création guidée**
- Deux modes de création : "Assistant de création" (guidé) et "Mode avancé" (complet)
- Interface simplifiée pour les utilisateurs non techniques
- Boutons séparés pour choisir le mode de création
✅ **Test de règles avant activation**
- Bouton "Tester la règle" dans le formulaire de création/édition
- Simulation sur toutes les factures existantes sans modification
- Affichage des résultats :
* Nombre total de factures
* Nombre de factures affectées
* Aperçu des 10 premières factures avec les modifications prévues
- Permet de valider l'impact avant d'activer la règle
✅ **Duplication de règles**
- Bouton "Dupliquer" (icône Copy bleue) dans la liste des règles
- Création automatique d'une copie avec le suffixe "(copie)"
- Règle dupliquée désactivée par défaut pour éviter les conflits
- Facilite la création de variantes de règles similaires
Architecture technique :
- server/routers.ts : Ajout des routes `test` et `duplicate` dans automationRules
- server/routers.ts : Ajout des interfaces Condition et Actions
- server/routers.ts : Implémentation de la logique d'évaluation des conditions pour le test
- client/src/pages/AutomationRules.tsx : Ajout des mutations testMutation et duplicateMutation
- client/src/pages/AutomationRules.tsx : Ajout des états wizardMode, wizardStep, testResultsOpen, testResults
- client/src/pages/AutomationRules.tsx : Modification des boutons de création (Assistant vs Mode avancé)
- client/src/pages/AutomationRules.tsx : Ajout du bouton "Tester la règle" dans le DialogFooter
- client/src/pages/AutomationRules.tsx : Ajout du Dialog des résultats de test avec statistiques et aperçu
- client/src/pages/AutomationRules.tsx : Ajout du bouton "Dupliquer" dans le tableau des règles
Bénéfices utilisateur :
- **Sécurité** : Test avant activation pour éviter les erreurs de configuration
- **Productivité** : Duplication rapide pour créer des variantes
- **Accessibilité** : Assistant guidé pour les utilisateurs non techniques
- **Transparence** : Visualisation de l'impact réel avant application
- **Confiance** : Validation des règles sur données réelles
Ces améliorations transforment la gestion des automatismes en un outil puissant, sécurisé et accessible à tous les profils d'utilisateurs.
Problème résolu :
✅ Erreur "Select.Item must have a value prop that is not an empty string" corrigée
✅ Le bouton "Nouvelle règle" fonctionne maintenant correctement
✅ Le formulaire de création de règles s'affiche sans erreur
Modifications techniques :
- client/src/pages/AutomationRules.tsx : Remplacement des valeurs vides ("") par une valeur spéciale "__NONE__" dans les trois Select (Type d'achat, Service concerné, Ventilation comptable)
- Ajout de la logique de conversion : "__NONE__" → undefined lors de la sauvegarde
- Conservation de l'affichage "Ne pas modifier" pour l'utilisateur
Contexte :
Le composant Select de shadcn/ui ne permet pas d'utiliser des chaînes vides comme valeur pour SelectItem. La solution consiste à utiliser une valeur sentinelle ("__NONE__") qui est convertie en undefined lors de la sauvegarde, permettant ainsi de ne pas modifier le champ correspondant lors de l'application de la règle.
Cette correction permet maintenant de créer des règles d'automatisme sans erreur, avec la possibilité de choisir de ne pas modifier certains champs.
Nouvelle fonctionnalité visuelle :
✅ Valeurs remplies automatiquement par les règles : affichées en VERT
✅ Valeurs saisies manuellement : affichées en BLEU
✅ Traçage intelligent de l'origine des valeurs (automatique ou manuelle)
✅ Mise à jour automatique de la couleur lors d'une modification manuelle
Architecture technique :
- drizzle/schema.ts : Ajout du champ autoFilledFields (JSON) pour tracer l'origine
- server/automationEngine.ts : Enregistrement des champs remplis automatiquement
- server/routers.ts : Ajout de autoFilledFields dans le schéma d'update
- client/src/pages/InvoicesBAP.tsx : Fonction getFieldColor() pour déterminer la couleur
- Migration 0010_late_thor_girl.sql appliquée avec succès
Fonctionnement :
1. **Import de facture** : Les règles d'automatisme s'appliquent et marquent les champs remplis dans autoFilledFields
2. **Affichage** : La fonction getFieldColor() analyse autoFilledFields pour déterminer la couleur :
- Champ dans autoFilledFields → VERT (rempli automatiquement)
- Champ avec valeur mais pas dans autoFilledFields → BLEU (rempli manuellement)
- Champ vide → Pas de couleur
3. **Modification manuelle** : Lors d'une édition, le champ est retiré de autoFilledFields et passe en BLEU
Bénéfices utilisateur :
- Visibilité immédiate sur l'origine des données
- Confiance accrue dans les automatismes (vert = validé par règle)
- Identification rapide des saisies manuelles nécessitant vérification
- Traçabilité complète du remplissage des champs métier
Cette fonctionnalité améliore considérablement la transparence du système d'automatisation et facilite le contrôle qualité des données.
Nouvelle fonctionnalité majeure :
✅ Page "Automatismes" complète pour gérer les règles de remplissage automatique
✅ Système de règles conditionnelles SI...ALORS pour automatiser le remplissage des champs métier
✅ Support de conditions multiples avec logique AND/OR
✅ Application automatique des règles lors de l'import de factures
✅ Gestion de la priorité des règles (ordre d'exécution)
✅ Activation/désactivation des règles individuelles
Architecture technique :
- drizzle/schema.ts : Table automationRules avec conditions JSON et actions JSON
- server/db.ts : Fonctions CRUD complètes pour les règles (create, update, delete, list)
- server/routers.ts : Routes tRPC pour gérer les automatismes
- server/automationEngine.ts : Moteur d'évaluation et d'application des règles
- client/src/pages/AutomationRules.tsx : Interface complète de gestion des règles
- Migration 0009_regular_warhawk.sql appliquée avec succès
Fonctionnement des règles :
1. **Conditions (SI)** : Définissez des critères basés sur les champs de la facture
- Champs disponibles : Fournisseur, N° Facture, Montant, Date, N° Commande, N° Bon de livraison
- Opérateurs : contient, égal à, commence par, finit par, >, <, >=, <=
- Logique : AND (toutes les conditions) ou OR (au moins une condition)
2. **Actions (ALORS)** : Définissez les champs à remplir automatiquement
- Type d'achat (CAPEX/OPEX)
- Service concerné (depuis la liste des services)
- Ventilation comptable (depuis la liste des ventilations)
3. **Priorité** : Les règles sont appliquées dans l'ordre de priorité
- Une règle de priorité supérieure ne peut pas être écrasée par une règle de priorité inférieure
4. **Application automatique** : Les règles s'appliquent automatiquement lors de l'import de factures
Exemples d'utilisation :
- SI Fournisseur contient "Microsoft" ET Montant > 1000 ALORS Type d'achat = CAPEX, Service = DSI
- SI Fournisseur contient "EDF" ALORS Type d'achat = OPEX, Ventilation = TOUS
- SI N° Facture commence par "AB" ALORS Service = Administration
Interface utilisateur :
- Liste des règles avec nom, conditions, actions et statut
- Formulaire de création/édition avec interface intuitive
- Boutons d'activation/désactivation rapide
- Suppression avec confirmation
- Affichage lisible des conditions et actions
Cette fonctionnalité permet de gagner un temps considérable en automatisant le remplissage des champs métier selon des règles métier prédéfinies.
Nouvelle fonctionnalité :
✅ Champ "Dossier d'export" ajouté dans la page Paramètres de réception
✅ Permet de configurer le chemin du dossier de destination pour l'export des factures
✅ Stockage en base de données dans la table importSettings
✅ Interface utilisateur avec carte dédiée et champ de saisie
Modifications techniques :
- drizzle/schema.ts : Ajout du champ exportFolder (type text, nullable) dans la table importSettings
- server/routers.ts : Ajout de exportFolder dans les routes importSettings.get et importSettings.update
- client/src/pages/ImportSettings.tsx : Ajout du state, initialisation, et carte UI pour le dossier d'export
- Migration de base de données : 0008_orange_prism.sql appliquée avec succès
Utilisation :
1. Accéder à "Paramètres de réception" dans le menu
2. Descendre jusqu'à la section "Dossier d'export"
3. Saisir le chemin absolu du dossier (ex: /chemin/vers/dossier/export)
4. Cliquer sur "Enregistrer les paramètres"
5. Le chemin est sauvegardé et pourra être utilisé pour les exports futurs
Ce paramètre permettra de centraliser la configuration du dossier d'export pour toutes les fonctionnalités d'export de l'application.
Nouvelles fonctionnalités :
✅ Nouvelle page "Factures BAP" qui affiche uniquement les factures avec Abonnement = NON (isSubscription = 0)
✅ La page Factures BAP inclut les colonnes Type d'achat et Ventilation comptable avec édition directe
✅ Les colonnes Type d'achat et Ventilation ont été supprimées de la page Factures principale
✅ Menu "Factures BAP" ajouté dans la navigation du DashboardLayout
✅ Route /invoices-bap configurée dans App.tsx
Architecture :
- client/src/pages/InvoicesBAP.tsx : Nouvelle page pour les factures BAP (non-abonnement)
- client/src/pages/Invoices.tsx : Page principale modifiée (colonnes Type d'achat et Ventilation supprimées)
- client/src/App.tsx : Route /invoices-bap ajoutée
- client/src/components/DashboardLayout.tsx : Menu "Factures BAP" ajouté
Fonctionnement :
1. La page "Factures" affiche toutes les factures avec les colonnes : Fournisseur, N° Facture, Date, Montant, Service, Abonnement, Score, Statut, Actions
2. La page "Factures BAP" affiche uniquement les factures non-abonnement (Abonnement = NON) avec les colonnes supplémentaires : Type d'achat et Ventilation comptable
3. Les deux pages conservent toutes les fonctionnalités d'édition directe, export, suppression, etc.
4. Le filtrage est automatique basé sur le champ isSubscription (0 = NON, 1 = OUI)
Cette restructuration permet une meilleure organisation des factures selon leur nature (abonnement ou BAP).
Nouvelles fonctionnalités :
**1. Import automatique depuis dossier (folderImportService.ts)**
✅ Surveillance périodique d'un dossier local configuré
✅ Détection automatique des nouveaux fichiers PDF
✅ Traitement identique à l'upload manuel (extraction Mistral AI, détection doublons, stockage)
✅ Déplacement automatique des fichiers traités vers un sous-dossier "processed"
✅ Scheduler configurable (fréquence en minutes)
✅ Routes tRPC pour démarrer/arrêter/vérifier le statut du service
✅ Boutons de contrôle dans la page Paramètres de réception
**2. Système de notifications (notificationService.ts)**
✅ Notifications automatiques après chaque import (email ou dossier)
✅ Résumé détaillé : nombre de factures importées, doublons ignorés, erreurs
✅ Format adapté selon la source (email avec nom de fichier, dossier avec nombre de fichiers)
✅ Intégration avec le système de notifications Manus (notifyOwner)
✅ Notifications envoyées au propriétaire du projet
**Fonctionnement de l'import dossier :**
1. L'utilisateur configure le chemin du dossier source dans "Paramètres de réception"
2. Il active l'import automatique et configure la fréquence de vérification
3. Il clique sur "Démarrer le service" pour lancer la surveillance
4. Le service scanne le dossier selon la fréquence configurée
5. Il détecte les nouveaux fichiers PDF (non encore traités)
6. Il traite chaque PDF avec la même logique que l'upload manuel
7. Les fichiers traités sont déplacés vers un sous-dossier "processed"
8. Une notification est envoyée avec le résumé des résultats
**Fonctionnement des notifications :**
- Après chaque import automatique (email ou dossier), une notification est envoyée
- La notification contient :
* Source de l'import (📧 email ou 📁 dossier)
* Nom du fichier (email) ou nombre de fichiers (dossier)
* ✅ Nombre de factures importées
* 🔄 Nombre de doublons ignorés
* ❌ Nombre d'erreurs
* Total de factures détectées
- Les notifications apparaissent dans l'interface Manus du propriétaire
**Interface utilisateur :**
- Chaque carte (Import dossier, Import email) dispose maintenant de :
* Indicateur visuel "Service actif" avec point vert animé
* Bouton "Démarrer le service" (désactivé si l'import n'est pas activé)
* Bouton "Arrêter le service" (rouge) pour stopper la surveillance
* Messages toast pour confirmer le démarrage/arrêt
**Dépendances ajoutées :**
- chokidar : Surveillance de fichiers et dossiers pour Node.js
**Architecture :**
- folderImportService.ts : Service d'import automatique depuis dossier
- notificationService.ts : Service de notifications centralisé
- Routes tRPC : folderImportService.{start, stop, status}
- Intégration des notifications dans emailImportService et folderImportService
Les deux services d'import automatique (email et dossier) sont maintenant opérationnels avec notifications intégrées.
Nouvelles fonctionnalités :
✅ Service d'import automatique par email (emailImportService.ts)
✅ Connexion IMAP avec support SSL/TLS
✅ Détection automatique des nouveaux emails non lus avec pièces jointes PDF
✅ Téléchargement et traitement des pièces jointes (même logique que l'upload manuel)
✅ Marquage des emails comme lus après traitement réussi
✅ Scheduler configurable (fréquence en minutes)
✅ Routes tRPC pour démarrer/arrêter/vérifier le statut du service
✅ Boutons de contrôle dans la page Paramètres de réception
Fonctionnement :
1. L'utilisateur configure ses identifiants email dans "Paramètres de réception"
2. Il active l'import par email et configure la fréquence de vérification
3. Il clique sur "Démarrer le service" pour lancer la surveillance
4. Le service se connecte au serveur IMAP selon la fréquence configurée
5. Il détecte les nouveaux emails non lus avec pièces jointes PDF
6. Il télécharge chaque PDF et applique le même traitement que l'upload manuel :
- Stockage local du fichier
- Extraction avec Mistral AI
- Détection de doublons
- Création des factures en base de données
- Génération des métadonnées JSON
- Création du log d'import
7. Les emails traités sont marqués comme lus
8. Le service continue de tourner en arrière-plan selon la fréquence configurée
Interface utilisateur :
- Indicateur visuel "Service actif" avec point vert animé
- Bouton "Démarrer le service" (désactivé si l'import email n'est pas activé)
- Bouton "Arrêter le service" (rouge) pour stopper la surveillance
- Messages toast pour confirmer le démarrage/arrêt
Dépendances ajoutées :
- imap : Client IMAP pour Node.js
- mailparser : Parser d'emails avec support des pièces jointes
- @types/imap et @types/mailparser : Types TypeScript
Le service est maintenant prêt à être testé avec un vrai compte email IMAP.
Modification apportée :
✅ La page "Paramètres de réception" utilise maintenant le DashboardLayout
✅ Le menu latéral de navigation est maintenant visible sur cette page
✅ L'expérience utilisateur est cohérente avec les autres pages de l'application
La page est maintenant complètement intégrée au reste de l'application avec une navigation fluide.
Nouvelles fonctionnalités :
✅ Table importSettings dans la base de données (7 tables au total)
✅ Routes tRPC pour gérer les paramètres de réception (get, update)
✅ Page "Paramètres de réception" accessible via le menu de navigation
Configuration disponible :
1. **Import manuel** : Activation/désactivation de l'upload manuel de fichiers PDF via l'interface
2. **Import automatique depuis dossier** :
- Activation/désactivation
- Configuration du chemin du dossier source à surveiller
- Fréquence de lecture du dossier (en minutes)
3. **Import par email** :
- Activation/désactivation
- Configuration du compte email (adresse + mot de passe)
- Serveur IMAP (host + port)
- Fréquence de lecture des emails (en minutes)
Interface utilisateur :
- 3 cartes distinctes avec icônes (Upload, FolderOpen, Mail)
- Switches pour activer/désactiver chaque méthode
- Champs de configuration qui apparaissent uniquement si la méthode est activée
- Bouton "Enregistrer les paramètres" avec feedback visuel
- Notifications toast pour confirmer la sauvegarde ou signaler les erreurs
Architecture :
- Schéma de base de données : table importSettings avec 14 colonnes
- Backend : Fonctions db.ts (getImportSettingsByUser, upsertImportSettings)
- Routes tRPC : importSettings.get et importSettings.update
- Frontend : Page ImportSettings.tsx avec gestion d'état React
- Navigation : Nouveau lien "Paramètres de réception" dans le menu latéral
La page est maintenant accessible via /import-settings et permet aux utilisateurs de configurer toutes les méthodes d'importation de factures de manière centralisée.
Modifications apportées :
- Les champs vides (non remplis par l'extraction IA) affichent maintenant un bord rouge de 2px en mode édition
- Identification visuelle immédiate des données manquantes : fournisseur, numéro de facture, date, bon de livraison, numéro de commande, montant total
- Le bord rouge disparaît automatiquement dès que l'utilisateur remplit le champ
- Amélioration de l'UX pour faciliter la saisie manuelle des données manquantes
Modifications apportées :
- Le formulaire d'édition de facture pré-remplit maintenant correctement les valeurs existantes grâce à useEffect
- Ajout de logs détaillés dans la route upload pour diagnostiquer le problème de stockage des fichiers PDF
- Les valeurs ne sont plus perdues lors de l'édition d'une facture
Note : Le problème d'export PDF (404) persiste car les fichiers ne sont pas stockés physiquement. Des logs ont été ajoutés pour identifier la cause lors du prochain upload.
Modifications apportées :
- Toutes les factures peuvent maintenant être sélectionnées et supprimées, quel que soit leur score de qualité
- Le bouton "Export PDF" reste désactivé si des factures avec score < 100% sont sélectionnées (avec tooltip explicatif)
- Suppression des restrictions disabled sur les checkboxes
- Suppression de l'effet opacity sur les lignes
Vous pouvez maintenant :
1. Sélectionner toutes vos factures actuelles (même celles sans score 100%)
2. Les supprimer via le bouton "Supprimer"
3. Ré-importer votre fichier PDF pour que les fichiers soient correctement stockés
Modification apportée :
- Ajout d'un bouton "Supprimer" dans la page Factures permettant de supprimer les factures sélectionnées
- Confirmation avant suppression pour éviter les suppressions accidentelles
- Message de succès après suppression avec compteur
- Création du dossier storage pour le stockage local des fichiers PDF
Prochaine étape recommandée :
1. Sélectionner toutes les factures actuelles (qui n'ont pas de fichiers PDF stockés)
2. Cliquer sur "Supprimer" pour les supprimer
3. Ré-importer le fichier "FACTURES FOURNISSEURS.pdf" via la page "Importer"
4. Cette fois, les fichiers PDF seront correctement stockés dans le dossier storage et l'export PDF fonctionnera
Modification apportée :
- Changement du comportement d'export PDF : au lieu de forcer le téléchargement des fichiers, les PDFs s'ouvrent maintenant dans de nouveaux onglets du navigateur
- Ajout d'un délai de 100ms entre chaque ouverture pour éviter le blocage des popups par le navigateur
- Les utilisateurs peuvent maintenant visualiser directement les PDFs exportés dans leur navigateur
Cette approche est plus adaptée au stockage local et permet une meilleure expérience utilisateur pour consulter les factures exportées.
Nouvelles fonctionnalités :
1. Filtres par statut d'export :
- Boutons de filtre rapide (Tous/Exportés/Non exportés/Erreurs)
- Compteurs dynamiques pour chaque statut
- Couleurs distinctives (vert/bleu/rouge)
2. Export Excel :
- Nouveau bouton "Excel" dans la page Factures
- Génération automatique de fichier .xlsx avec toutes les métadonnées
- Colonnes : Fournisseur, N° Facture, Date, N° BL, N° Commande, Montant, Score, Statut, Dates
3. Page de détail de facture (/invoices/:id) :
- Visualisation PDF intégrée dans iframe
- Affichage des métadonnées extraites
- Mode édition avec formulaire complet
- Recalcul automatique du score de qualité après édition
- Marquage "Modifié manuellement"
- Badges de statut et qualité
- Lien cliquable sur le nom du fournisseur dans la liste
L'application offre maintenant une expérience complète de gestion des factures avec filtrage avancé, exports multiples et édition manuelle.
Nouvelles fonctionnalités :
- Ajout du champ exportStatus dans la base de données (exported/not_exported/export_error)
- Cases à cocher pour sélection multiple des factures
- Case "Tout sélectionner" (sélectionne uniquement les factures avec score 100%)
- Nouveau système de statuts : Exporté (vert), Non exporté (bleu), Erreur export (rouge)
- Bouton "Exporter" avec compteur de factures sélectionnées
- Validation stricte : seules les factures avec score de qualité 100% peuvent être exportées
- Les factures non éligibles (score < 100%) sont grisées et non sélectionnables
- Téléchargement automatique des PDFs des factures sélectionnées
- Message d'information expliquant la règle des 100%
La page affiche maintenant le statut d'export au lieu du statut de traitement, conformément aux spécifications.
Nouvelles fonctionnalités :
- Cartes de statistiques : Factures traitées, Montant total, Score moyen, Dernière activité
- Graphique en barres : Évolution des factures par semaine (30 derniers jours)
- Graphique circulaire : Top 10 fournisseurs avec pourcentages
- Liste détaillée : Tous les fournisseurs avec nombre de factures et montants
- Bouton "Voir les statistiques détaillées" pour afficher/masquer les graphiques
- Calculs automatiques : montant moyen par facture, score de qualité avec label (Excellent/Bon/Moyen/Faible)
Le dashboard utilise Recharts pour les visualisations et offre une vue complète de l'activité de traitement des factures.
