From cd50372d307b99351f312ab41d57ae680a919e2d Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Wed, 11 Feb 2026 12:44:44 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Correction=20de=20l'erreur=20Sele?=
 =?UTF-8?q?ct.Item=20dans=20le=20formulaire=20de=20cr=C3=A9ation=20de=20r?=
 =?UTF-8?q?=C3=A8gles=20d'automatisme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 client/src/pages/AutomationRules.tsx | 18 +++++++++---------
 todo.md                              |  5 +++++
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/AutomationRules.tsx b/client/src/pages/AutomationRules.tsx
index 7baa25e..22e93f0 100644
--- a/client/src/pages/AutomationRules.tsx
+++ b/client/src/pages/AutomationRules.tsx
@@ -434,14 +434,14 @@ export default function AutomationRules() {
                   <div className="space-y-2">
                     <Label htmlFor="typeAchat">Type d'achat</Label>
                     <Select
-                      value={actions.typeAchat || ""}
-                      onValueChange={(value) => setActions({ ...actions, typeAchat: value || undefined })}
+                      value={actions.typeAchat || "__NONE__"}
+                      onValueChange={(value) => setActions({ ...actions, typeAchat: value === "__NONE__" ? undefined : value })}
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Ne pas modifier" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="">Ne pas modifier</SelectItem>
+                        <SelectItem value="__NONE__">Ne pas modifier</SelectItem>
                         <SelectItem value="CAPEX">CAPEX</SelectItem>
                         <SelectItem value="OPEX">OPEX</SelectItem>
                       </SelectContent>
@@ -451,14 +451,14 @@ export default function AutomationRules() {
                   <div className="space-y-2">
                     <Label htmlFor="serviceConcerne">Service concerné</Label>
                     <Select
-                      value={actions.serviceConcerne || ""}
-                      onValueChange={(value) => setActions({ ...actions, serviceConcerne: value || undefined })}
+                      value={actions.serviceConcerne || "__NONE__"}
+                      onValueChange={(value) => setActions({ ...actions, serviceConcerne: value === "__NONE__" ? undefined : value })}
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Ne pas modifier" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="">Ne pas modifier</SelectItem>
+                        <SelectItem value="__NONE__">Ne pas modifier</SelectItem>
                         {departments?.map((dept) => (
                           <SelectItem key={dept.id} value={dept.name}>
                             {dept.name}
@@ -471,14 +471,14 @@ export default function AutomationRules() {
                   <div className="space-y-2">
                     <Label htmlFor="ventilationComptable">Ventilation comptable</Label>
                     <Select
-                      value={actions.ventilationComptable || ""}
-                      onValueChange={(value) => setActions({ ...actions, ventilationComptable: value || undefined })}
+                      value={actions.ventilationComptable || "__NONE__"}
+                      onValueChange={(value) => setActions({ ...actions, ventilationComptable: value === "__NONE__" ? undefined : value })}
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Ne pas modifier" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="">Ne pas modifier</SelectItem>
+                        <SelectItem value="__NONE__">Ne pas modifier</SelectItem>
                         {allocations?.map((alloc) => (
                           <SelectItem key={alloc.id} value={alloc.name}>
                             {alloc.name}
diff --git a/todo.md b/todo.md
index 10cd82a..e02442a 100644
--- a/todo.md
+++ b/todo.md
@@ -311,3 +311,8 @@
 - [x] Modifier InvoicesBAP.tsx pour afficher les valeurs en vert (auto) et bleu (manuel)
 - [x] Mettre à jour la logique d'édition pour marquer les valeurs comme manuelles
 - [x] Tester l'affichage avec des règles d'automatisme
+
+## Correction erreur Select.Item dans AutomationRules
+- [x] Identifier tous les Select.Item avec valeurs vides dans AutomationRules.tsx
+- [x] Remplacer les valeurs vides par des valeurs par défaut valides
+- [x] Tester la création de nouvelles règles