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
This commit is contained in:
michaelschal committed 2025-09-01 20:23:25 +00:00
1 parent 5fbdc67153
commit d9120a3e6b
1 file changed
+12 -7
+12 -7
View File
@@ -568,18 +568,23 @@ export default function Dashboard() {
<span className="text-red-400">Aucun magasin</span> <span className="text-red-400">Aucun magasin</span>
) : ( ) : (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{participatingStores.map((participation: any) => ( {participatingStores.map((participation: any) => {
const isCurrentStore = selectedStoreId && participation.groupId === parseInt(selectedStoreId.toString());
const groupColor = participation.group?.color || '#1976D2';
return (
<Badge <Badge
key={participation.groupId} key={participation.groupId}
className={`text-xs ${ className={`text-xs text-white border ${isCurrentStore ? 'ring-2 ring-white ring-offset-1' : ''}`}
selectedStoreId && participation.groupId === parseInt(selectedStoreId.toString()) style={{
? 'bg-green-100 text-green-800 border border-green-300' backgroundColor: groupColor,
: 'bg-gray-100 text-gray-700' borderColor: groupColor
}`} }}
> >
{participation.group.name} {participation.group.name}
</Badge> </Badge>
))} );
})}
</div> </div>
)} )}
</div> </div>