From 00bf870c4f5fab2ed19a3a7dc10d20a5f7f6ee98 Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Mon, 12 Jan 2026 14:47:33 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Ajout=20d'un=20bord=20rouge=20sur?=
 =?UTF-8?q?=20les=20champs=20vides=20du=20formulaire=20d'=C3=A9dition.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 client/src/pages/InvoiceDetail.tsx | 6 ++++++
 todo.md                            | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/client/src/pages/InvoiceDetail.tsx b/client/src/pages/InvoiceDetail.tsx
index 3022678..8e3d679 100644
--- a/client/src/pages/InvoiceDetail.tsx
+++ b/client/src/pages/InvoiceDetail.tsx
@@ -228,6 +228,7 @@ export default function InvoiceDetail() {
                       value={formData.supplierName}
                       onChange={(e) => setFormData({ ...formData, supplierName: e.target.value })}
                       placeholder="Nom du fournisseur"
+                      className={!formData.supplierName ? "border-red-500 border-2" : ""}
                     />
                   ) : (
                     <div className="text-sm mt-1">{invoice.supplierName || "-"}</div>
@@ -242,6 +243,7 @@ export default function InvoiceDetail() {
                       value={formData.invoiceNumber}
                       onChange={(e) => setFormData({ ...formData, invoiceNumber: e.target.value })}
                       placeholder="N° de facture"
+                      className={!formData.invoiceNumber ? "border-red-500 border-2" : ""}
                     />
                   ) : (
                     <div className="text-sm mt-1">{invoice.invoiceNumber || "-"}</div>
@@ -256,6 +258,7 @@ export default function InvoiceDetail() {
                       type="date"
                       value={formData.invoiceDate}
                       onChange={(e) => setFormData({ ...formData, invoiceDate: e.target.value })}
+                      className={!formData.invoiceDate ? "border-red-500 border-2" : ""}
                     />
                   ) : (
                     <div className="text-sm mt-1">
@@ -274,6 +277,7 @@ export default function InvoiceDetail() {
                       value={formData.deliveryNoteNumber}
                       onChange={(e) => setFormData({ ...formData, deliveryNoteNumber: e.target.value })}
                       placeholder="N° de bon de livraison"
+                      className={!formData.deliveryNoteNumber ? "border-red-500 border-2" : ""}
                     />
                   ) : (
                     <div className="text-sm mt-1">{invoice.deliveryNoteNumber || "-"}</div>
@@ -288,6 +292,7 @@ export default function InvoiceDetail() {
                       value={formData.orderNumber}
                       onChange={(e) => setFormData({ ...formData, orderNumber: e.target.value })}
                       placeholder="N° de commande"
+                      className={!formData.orderNumber ? "border-red-500 border-2" : ""}
                     />
                   ) : (
                     <div className="text-sm mt-1">{invoice.orderNumber || "-"}</div>
@@ -304,6 +309,7 @@ export default function InvoiceDetail() {
                       value={formData.totalAmount}
                       onChange={(e) => setFormData({ ...formData, totalAmount: e.target.value })}
                       placeholder="Montant en €"
+                      className={!formData.totalAmount ? "border-red-500 border-2" : ""}
                     />
                   ) : (
                     <div className="text-sm mt-1">
diff --git a/todo.md b/todo.md
index 14e9792..2413c12 100644
--- a/todo.md
+++ b/todo.md
@@ -125,3 +125,7 @@
 ## Correction formulaire d'édition
 - [x] Pré-remplir les valeurs existantes dans le formulaire d'édition de facture
 - [x] Utiliser useEffect pour initialiser les valeurs du formulaire
+
+## Amélioration visuelle formulaire d'édition
+- [x] Ajouter un bord rouge sur les champs vides du formulaire d'édition
+- [x] Identifier visuellement les données manquantes non extraites par l'IA