feat : export Excel et stats par tranche d'âge sur l'inventaire bovin

- Dépendance phpoffice/phpspreadsheet
- Endpoint GET /bovines/inventory-export : XLSX coloré, header figé, auto-filter, tri birthDate ASC
- Endpoint GET /bovines/inventory-stats : comptes par tranche d'âge (>=24, 22-24, 20-22)
- Bouton Excel à gauche du titre (style icône-only, même design que le bouton impression)
- Légende visuelle avec cartes bordées coloriées
- Ajustement seuils couleurs des lignes en -300 (base) / -400 (hover)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/pages/infrastructure/case.vue

@@ -211,9 +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-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'
+    if (item.ageMonths >= 24) return 'bg-violet-300 hover:bg-violet-400'
+    if (item.ageMonths >= 22) return 'bg-red-300 hover:bg-red-400'
+    if (item.ageMonths >= 20) return 'bg-orange-300 hover:bg-orange-400'
     return ''
 }
 

frontend/pages/inventory.vue

@@ -12,6 +12,14 @@
             <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
+                    class="bg-primary-500 p-1 rounded-md flex items-center cursor-pointer hover:opacity-80"
+                    :class="exporting ? 'cursor-not-allowed opacity-60' : ''"
+                    title="Exporter en Excel"
+                    @click="exportInventory"
+                >
+                    <Icon name="mdi:file-excel-outline" size="32" class="text-white" />
+                </div>
             </div>
             <button
                 v-if="auth.isAdmin"
@@ -25,7 +33,22 @@
             </button>
         </div>
 
-        <div class="mt-6 mb-16">
+        <div class="flex flex-wrap gap-3 mt-4">
+            <div class="flex items-center gap-3 rounded-md border-2 border-violet-300 px-4 py-2">
+                <span class="text-2xl font-bold text-violet-700">{{ stats.over24 }}</span>
+                <span class="text-sm uppercase tracking-wide text-violet-700">≥ 24 mois</span>
+            </div>
+            <div class="flex items-center gap-3 rounded-md border-2 border-red-300 px-4 py-2">
+                <span class="text-2xl font-bold text-red-700">{{ stats.between22And24 }}</span>
+                <span class="text-sm uppercase tracking-wide text-red-700">22 – 24 mois</span>
+            </div>
+            <div class="flex items-center gap-3 rounded-md border-2 border-orange-300 px-4 py-2">
+                <span class="text-2xl font-bold text-orange-700">{{ stats.between20And22 }}</span>
+                <span class="text-sm uppercase tracking-wide text-orange-700">20 – 22 mois</span>
+            </div>
+        </div>
+
+        <div class="mt-6 mb-8">
             <UiDataTable
                 v-model:page="page"
                 v-model:per-page="perPage"
@@ -118,7 +141,52 @@ interface SyncResult {
     total: number
 }
 
+interface InventoryStats {
+    total: number
+    over24: number
+    between22And24: number
+    between20And22: number
+}
+
+const stats = ref<InventoryStats>({
+    total: 0,
+    over24: 0,
+    between22And24: 0,
+    between20And22: 0
+})
+
+const loadStats = async () => {
+    try {
+        stats.value = await api.get<InventoryStats>('bovines/inventory-stats', {}, { toast: false })
+    } catch {
+        // silencieux : l'écran reste utilisable sans la légende
+    }
+}
+
 const syncing = ref(false)
+const exporting = ref(false)
+
+const exportInventory = async () => {
+    if (exporting.value) return
+    exporting.value = true
+    try {
+        const blob = await api.getBlob('bovines/inventory-export')
+        const filename = `inventaire_bovins_${new Date().toISOString().slice(0, 10)}.xlsx`
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = filename
+        a.style.display = 'none'
+        document.body.appendChild(a)
+        a.click()
+        a.remove()
+        setTimeout(() => URL.revokeObjectURL(url), 60_000)
+    } catch {
+        // toast déjà géré par useApi onResponseError
+    } finally {
+        exporting.value = false
+    }
+}
 
 const syncInventory = async () => {
     if (syncing.value) return
@@ -135,6 +203,7 @@ const syncInventory = async () => {
             message: `Créés : ${result.created} · Mis à jour : ${result.updated} · Sortis : ${result.exited} · Total EDNOTIF : ${result.total}`
         })
         reload()
+        loadStats()
     } catch {
         // error toast already handled by useApi onResponseError
     } finally {
@@ -211,11 +280,14 @@ const formatDate = (date: string | null) => {
 
 const rowClass = (item: BovineData): string => {
     if (item.ageMonths === null || item.ageMonths === undefined) return ''
-    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'
+    if (item.ageMonths >= 24) return 'bg-violet-300 hover:bg-violet-400'
+    if (item.ageMonths >= 22) return 'bg-red-300 hover:bg-red-400'
+    if (item.ageMonths >= 20) return 'bg-orange-300 hover:bg-orange-400'
     return ''
 }
 
-onMounted(reload)
+onMounted(() => {
+    reload()
+    loadStats()
+})
 </script>