From fe00ec0a37828a308cea4b7f10162d0caffab535 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Tue, 12 Aug 2025 11:59:24 +0000
Subject: [PATCH] Add a column showing the difference between invoice and
delivery amounts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Implement the 'Écart' column in the BL reconciliation page, calculating and displaying the difference between the 'Montant BL' and 'Montant Fact.' with conditional coloring based on the deviation amount.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: b163d4c0-de5e-4f4e-a9c0-aed4c7049718
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/b163d4c0-de5e-4f4e-a9c0-aed4c7049718/Is38Tns
---
ECART-COLUMN-FEATURE.md | 154 ++++++++++++++++++++++++++
client/src/pages/BLReconciliation.tsx | 44 ++++++++
2 files changed, 198 insertions(+)
create mode 100644 ECART-COLUMN-FEATURE.md
diff --git a/ECART-COLUMN-FEATURE.md b/ECART-COLUMN-FEATURE.md
new file mode 100644
index 0000000..bdd7124
--- /dev/null
+++ b/ECART-COLUMN-FEATURE.md
@@ -0,0 +1,154 @@
+# Ajout Colonne Écart - Module Rapprochement
+
+## 🎯 Demande Utilisateur
+
+Ajouter une colonne **"Écart"** dans le module rapprochement qui calcule la différence entre le montant BL et le montant Facture.
+
+## ✅ Implementation
+
+### 1. **Structure des Tableaux**
+
+#### **Onglet Manuel**
+```
+| Fournisseur | N° BL | Date Livr. | Montant BL | Ref. Facture | Montant Fact. | **Écart** | Magasin | Actions |
+```
+
+#### **Onglet Automatique**
+```
+| Fournisseur | N° BL | Date Livr. | Date Valid. | Montant BL | Ref. Facture | Montant Fact. | **Écart** | Magasin | Actions |
+```
+
+### 2. **Logique de Calcul**
+
+```typescript
+const blAmount = delivery.blAmount ? parseFloat(delivery.blAmount) : 0;
+const invoiceAmount = delivery.invoiceAmount ? parseFloat(delivery.invoiceAmount) : 0;
+
+if (blAmount && invoiceAmount) {
+ const diff = blAmount - invoiceAmount;
+ // BL > Facture = +XX.XX€ (positif)
+ // BL < Facture = -XX.XX€ (négatif)
+ // BL = Facture = 0.00€ (équilibré)
+}
+```
+
+### 3. **Couleurs Indicatives**
+
+```css
+/* Aucun écart - Parfait */
+diff === 0 → text-green-600
+
+/* Écart faible (≤ 10€) - Attention */
+diffAbs ≤ 10 → text-orange-600
+
+/* Écart important (> 10€) - Problème */
+diffAbs > 10 → text-red-600
+```
+
+### 4. **Affichage par Cas**
+
+#### **Cas Complet** (BL + Facture renseignés)
+- `+15.50€` (BL supérieur de 15.50€)
+- `-8.25€` (Facture supérieure de 8.25€)
+- `0.00€` (Montants identiques)
+
+#### **Cas Incomplet** (données manquantes)
+- `-` (grisé, données insuffisantes)
+
+### 5. **Headers de Colonnes**
+
+```typescript
+// Manuel
+| Écart |
+
+// Automatique
+Écart |
+```
+
+## 🎨 Rendu Visuel
+
+### Exemples d'Affichage
+
+| Montant BL | Montant Fact. | Écart | Couleur |
+|------------|---------------|--------|---------|
+| 150.00€ | 150.00€ | `0.00€` | 🟢 Vert |
+| 155.50€ | 150.00€ | `+5.50€` | 🟠 Orange |
+| 140.00€ | 165.75€ | `-25.75€` | 🔴 Rouge |
+| 100.00€ | - | `-` | ⚪ Gris |
+
+### États Visuels par Seuil
+
+```css
+/* Équilibré - Vert */
+.text-green-600 { color: #16a34a; }
+
+/* Écart modéré - Orange */
+.text-orange-600 { color: #ea580c; }
+
+/* Écart important - Rouge */
+.text-red-600 { color: #dc2626; }
+
+/* Non applicable - Gris */
+.text-gray-400 { color: #9ca3af; }
+```
+
+## 🔧 Code Implementation
+
+### Header (Manuel)
+```typescript
+
+ Écart
+ |
+```
+
+### Cellule Data
+```typescript
+
+ {(() => {
+ const blAmount = delivery.blAmount ? parseFloat(delivery.blAmount) : 0;
+ const invoiceAmount = delivery.invoiceAmount ? parseFloat(delivery.invoiceAmount) : 0;
+ if (blAmount && invoiceAmount) {
+ const diff = blAmount - invoiceAmount;
+ const diffAbs = Math.abs(diff);
+ return (
+ 10 ? 'text-red-600' : 'text-orange-600'
+ }`}>
+ {diff > 0 ? '+' : ''}{diff.toFixed(2)}€
+
+ );
+ }
+ return -;
+ })()}
+ |
+```
+
+## 🧪 Tests de Validation
+
+### Test 1 : Calcul d'Écart
+1. BL: 100.00€, Facture: 95.00€
+2. **Vérifier** : Écart = `+5.00€` (orange)
+
+### Test 2 : Équilibre
+1. BL: 150.00€, Facture: 150.00€
+2. **Vérifier** : Écart = `0.00€` (vert)
+
+### Test 3 : Écart Important
+1. BL: 200.00€, Facture: 185.00€
+2. **Vérifier** : Écart = `+15.00€` (rouge)
+
+### Test 4 : Données Manquantes
+1. BL: 100.00€, Facture: non renseigné
+2. **Vérifier** : Écart = `-` (gris)
+
+## 📊 Status
+
+- ✅ Colonne Écart ajoutée sur onglet Manuel
+- ✅ Colonne Écart ajoutée sur onglet Automatique
+- ✅ Calcul automatique (BL - Facture)
+- ✅ Couleurs indicatives par seuil
+- ✅ Gestion des cas de données manquantes
+- ✅ Format d'affichage cohérent (+/-XX.XX€)
+
+**La colonne Écart permet maintenant de visualiser instantanément les différences entre BL et factures !**
\ No newline at end of file
diff --git a/client/src/pages/BLReconciliation.tsx b/client/src/pages/BLReconciliation.tsx
index 29fa4a6..c2243a9 100644
--- a/client/src/pages/BLReconciliation.tsx
+++ b/client/src/pages/BLReconciliation.tsx
@@ -355,6 +355,9 @@ export default function BLReconciliation() {
Montant Fact.
|
+
+ Écart
+ |
Magasin
|
@@ -415,6 +418,25 @@ export default function BLReconciliation() {
}
+
+ {(() => {
+ const blAmount = delivery.blAmount ? parseFloat(delivery.blAmount) : 0;
+ const invoiceAmount = delivery.invoiceAmount ? parseFloat(delivery.invoiceAmount) : 0;
+ if (blAmount && invoiceAmount) {
+ const diff = blAmount - invoiceAmount;
+ const diffAbs = Math.abs(diff);
+ return (
+ 10 ? 'text-red-600' : 'text-orange-600'
+ }`}>
+ {diff > 0 ? '+' : ''}{diff.toFixed(2)}€
+
+ );
+ }
+ return -;
+ })()}
+ |
{delivery.group?.name}
@@ -546,6 +568,9 @@ export default function BLReconciliation() {
|
Montant Fact.
|
+
+ Écart
+ |
Magasin
|
@@ -613,6 +638,25 @@ export default function BLReconciliation() {
}
+
+ {(() => {
+ const blAmount = delivery.blAmount ? parseFloat(delivery.blAmount) : 0;
+ const invoiceAmount = delivery.invoiceAmount ? parseFloat(delivery.invoiceAmount) : 0;
+ if (blAmount && invoiceAmount) {
+ const diff = blAmount - invoiceAmount;
+ const diffAbs = Math.abs(diff);
+ return (
+ 10 ? 'text-red-600' : 'text-orange-600'
+ }`}>
+ {diff > 0 ? '+' : ''}{diff.toFixed(2)}€
+
+ );
+ }
+ return -;
+ })()}
+ |
{delivery.group?.name}
|