From d9120a3e6be965aae0beb23f83424b2f0a8ab979 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 20:23:25 +0000
Subject: [PATCH] Update store badges to use configured colors from the
 administration module

Modify the Dashboard component to dynamically set the background and border colors of participating store badges based on the `group.color` property, enhancing visual consistency with store configurations. The `selectedStoreId` prop is used to apply a ring effect to the currently active store.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 98f01874-e00c-4bbe-9d71-b0b338001848
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/98f01874-e00c-4bbe-9d71-b0b338001848/XDIQsDu
---
 client/src/pages/Dashboard.tsx | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index 8080ba9..463854a 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -568,18 +568,23 @@ export default function Dashboard() {
                         <span className="text-red-400">Aucun magasin</span>
                       ) : (
                         <div className="flex flex-wrap gap-1">
-                          {participatingStores.map((participation: any) => (
-                            <Badge 
-                              key={participation.groupId} 
-                              className={`text-xs ${
-                                selectedStoreId && participation.groupId === parseInt(selectedStoreId.toString())
-                                  ? 'bg-green-100 text-green-800 border border-green-300'
-                                  : 'bg-gray-100 text-gray-700'
-                              }`}
-                            >
-                              {participation.group.name}
-                            </Badge>
-                          ))}
+                          {participatingStores.map((participation: any) => {
+                            const isCurrentStore = selectedStoreId && participation.groupId === parseInt(selectedStoreId.toString());
+                            const groupColor = participation.group?.color || '#1976D2';
+                            
+                            return (
+                              <Badge 
+                                key={participation.groupId} 
+                                className={`text-xs text-white border ${isCurrentStore ? 'ring-2 ring-white ring-offset-1' : ''}`}
+                                style={{ 
+                                  backgroundColor: groupColor,
+                                  borderColor: groupColor
+                                }}
+                              >
+                                {participation.group.name}
+                              </Badge>
+                            );
+                          })}
                         </div>
                       )}
                     </div>