feat : affichage du compteur de bovins et ajustement des seuils de couleur

- 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>
This commit is contained in:
2026-04-24 11:08:19 +02:00
parent d5b372e243
commit 4cdff1200f
2 changed files with 11 additions and 5 deletions

View File

@@ -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 ''
}

View File

@@ -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 ''
}