From 4cdff1200f3bdc8afa9f5ad0420cab370af84232 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Fri, 24 Apr 2026 11:08:19 +0200
Subject: [PATCH] feat : affichage du compteur de bovins et ajustement des
 seuils de couleur
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ajout (X bovins) à côté du titre sur les pages inventaire et case
- Seuils par âge : 20-22 mois orange, 22-24 mois rouge, 24+ violet
- Couleurs renforcées en -200 / hover -300

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/pages/infrastructure/case.vue |  6 ++++--
 frontend/pages/inventory.vue           | 10 +++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/pages/infrastructure/case.vue b/frontend/pages/infrastructure/case.vue
index 652e1ac..bb6d34c 100644
--- a/frontend/pages/infrastructure/case.vue
+++ b/frontend/pages/infrastructure/case.vue
@@ -13,6 +13,7 @@
                 <h1 class="font-bold text-4xl text-primary-500 uppercase">
                     {{ title }}
                 </h1>
+                <span class="text-lg text-slate-500">({{ totalItems }} bovin{{ totalItems > 1 ? 's' : '' }})</span>
                 <div
                     v-if="hasCaseId"
                     class="bg-primary-500 p-1 rounded-md flex items-center cursor-pointer"
@@ -210,8 +211,9 @@ const formatDate = (date: string | null) => {
 
 const rowClass = (item: BovineData): string => {
     if (item.ageMonths === null || item.ageMonths === undefined) return ''
-    if (item.ageMonths >= 24) return 'bg-red-100 hover:bg-red-200'
-    if (item.ageMonths >= 22) return 'bg-orange-100 hover:bg-orange-200'
+    if (item.ageMonths >= 24) return 'bg-violet-200 hover:bg-violet-300'
+    if (item.ageMonths >= 22) return 'bg-red-200 hover:bg-red-300'
+    if (item.ageMonths >= 20) return 'bg-orange-200 hover:bg-orange-300'
     return ''
 }
 
diff --git a/frontend/pages/inventory.vue b/frontend/pages/inventory.vue
index 40ddfb3..33f5a92 100644
--- a/frontend/pages/inventory.vue
+++ b/frontend/pages/inventory.vue
@@ -9,7 +9,10 @@
                     class="cursor-pointer text-primary-500"
                 />
             </div>
-            <h1 class="font-bold text-3xl uppercase text-primary-500">Inventaire bovins</h1>
+            <div class="flex items-center gap-3">
+                <h1 class="font-bold text-3xl uppercase text-primary-500">Inventaire bovins</h1>
+                <span class="text-lg text-slate-500">({{ totalItems }} bovin{{ totalItems > 1 ? 's' : '' }})</span>
+            </div>
             <button
                 v-if="auth.isAdmin"
                 type="button"
@@ -208,8 +211,9 @@ const formatDate = (date: string | null) => {
 
 const rowClass = (item: BovineData): string => {
     if (item.ageMonths === null || item.ageMonths === undefined) return ''
-    if (item.ageMonths >= 24) return 'bg-red-100 hover:bg-red-200'
-    if (item.ageMonths >= 22) return 'bg-orange-100 hover:bg-orange-200'
+    if (item.ageMonths >= 24) return 'bg-violet-200 hover:bg-violet-300'
+    if (item.ageMonths >= 22) return 'bg-red-200 hover:bg-red-300'
+    if (item.ageMonths >= 20) return 'bg-orange-200 hover:bg-orange-300'
     return ''
 }