From 56adffbf97ba129ad65977acea432fd0ad71314c Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Tue, 23 Sep 2025 13:51:00 +0000
Subject: [PATCH] Update comment icons to reflect new or existing comments

Improve UI by dynamically coloring comment icons based on the presence of comments and updating comment counts immediately after comment actions. This involves invalidating relevant queries in `ReconciliationComments.tsx` and modifying the rendering logic for comment icons and titles in `BLReconciliation.tsx`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1e4433b5-47ab-464c-b663-fea2e53367dd
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/1e4433b5-47ab-464c-b663-fea2e53367dd/awJgdDR
---
 .replit                                          |  4 ----
 client/src/components/ReconciliationComments.tsx |  9 +++++++++
 client/src/pages/BLReconciliation.tsx            | 16 +++++++++++++---
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/.replit b/.replit
index 5548e2e..dce2674 100644
--- a/.replit
+++ b/.replit
@@ -19,10 +19,6 @@ externalPort = 80
 localPort = 33873
 externalPort = 3003
 
-[[ports]]
-localPort = 38213
-externalPort = 5000
-
 [[ports]]
 localPort = 38343
 externalPort = 3000
diff --git a/client/src/components/ReconciliationComments.tsx b/client/src/components/ReconciliationComments.tsx
index 2423894..b630d62 100644
--- a/client/src/components/ReconciliationComments.tsx
+++ b/client/src/components/ReconciliationComments.tsx
@@ -58,6 +58,9 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
         description: "Commentaire ajouté avec succès",
       });
       queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+      // Invalider aussi les queries des livraisons pour mettre à jour le compteur de commentaires
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
       setIsAdding(false);
       setNewComment("");
     },
@@ -81,6 +84,9 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
         description: "Commentaire modifié avec succès",
       });
       queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+      // Invalider aussi les queries des livraisons pour mettre à jour le compteur de commentaires
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
       setEditingId(null);
     },
     onError: (error: any) => {
@@ -103,6 +109,9 @@ export default function ReconciliationComments({ deliveryId, className = "" }: R
         description: "Commentaire supprimé avec succès",
       });
       queryClient.invalidateQueries({ queryKey: [`/api/deliveries/${deliveryId}/reconciliation-comments`] });
+      // Invalider aussi les queries des livraisons pour mettre à jour le compteur de commentaires
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries'] });
+      queryClient.invalidateQueries({ queryKey: ['/api/deliveries/bl'] });
     },
     onError: (error: any) => {
       toast({
diff --git a/client/src/pages/BLReconciliation.tsx b/client/src/pages/BLReconciliation.tsx
index 6e07047..46ad8cf 100644
--- a/client/src/pages/BLReconciliation.tsx
+++ b/client/src/pages/BLReconciliation.tsx
@@ -1200,10 +1200,20 @@ export default function BLReconciliation() {
                                 <div className="flex items-center justify-end space-x-2">
                                   <button
                                     onClick={() => handleOpenCommentModal(delivery)}
-                                    className="transition-colors duration-200 p-1 rounded text-gray-600 hover:text-gray-700 hover:bg-gray-50 opacity-70"
-                                    title="Voir/Gérer les commentaires"
+                                    className={`transition-colors duration-200 p-1 rounded ${
+                                      delivery.reconciliationCommentsCount && delivery.reconciliationCommentsCount > 0
+                                        ? 'text-blue-600 hover:text-blue-700 hover:bg-blue-50'
+                                        : 'text-gray-600 hover:text-gray-700 hover:bg-gray-50'
+                                    } opacity-70`}
+                                    title={`Voir/Gérer les commentaires ${
+                                      delivery.reconciliationCommentsCount ? `(${delivery.reconciliationCommentsCount})` : ''
+                                    }`}
                                   >
-                                    <MessageSquare className="h-4 w-4" />
+                                    <MessageSquare className={`h-4 w-4 ${
+                                      delivery.reconciliationCommentsCount && delivery.reconciliationCommentsCount > 0
+                                        ? 'fill-blue-200'
+                                        : ''
+                                    }`} />
                                   </button>
                                   {(permissions.canEdit('reconciliation') || permissions.canValidate('reconciliation')) && (
                                     <button