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
+17 -12
+17 -12
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) => {
<Badge const isCurrentStore = selectedStoreId && participation.groupId === parseInt(selectedStoreId.toString());
key={participation.groupId} const groupColor = participation.group?.color || '#1976D2';
className={`text-xs ${
selectedStoreId && participation.groupId === parseInt(selectedStoreId.toString()) return (
? 'bg-green-100 text-green-800 border border-green-300' <Badge
: 'bg-gray-100 text-gray-700' key={participation.groupId}
}`} className={`text-xs text-white border ${isCurrentStore ? 'ring-2 ring-white ring-offset-1' : ''}`}
> style={{
{participation.group.name} backgroundColor: groupColor,
</Badge> borderColor: groupColor
))} }}
>
{participation.group.name}
</Badge>
);
})}
</div> </div>
)} )}
</div> </div>