feat : bouton Ajouter sur les pages admin en haut à droite

Alignement sur le pattern case.vue : titre et bouton Ajouter sur la même ligne,
wrapper px-[86px] commun, suppression du bouton bottom-centered

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

frontend/pages/admin/bovin/bovin-list.vue

@@ -1,9 +1,18 @@
 <template>
+    <div class="px-[86px]">
         <div class="flex items-center justify-between">
             <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des types bovins</h1>
+            <NuxtLink
+                v-if="auth.isAdmin"
+                to="/admin/bovin"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-6 rounded hover:opacity-80 gap-2"
+            >
+                <Icon name="mdi:plus" size="28" />
+                Ajouter
+            </NuxtLink>
         </div>
 
-    <div v-if="auth.isAdmin" class="mt-7 mb-11">
+        <div v-if="auth.isAdmin" class="mt-6 mb-16">
             <UiDataTable
                 v-model:page="page"
                 v-model:per-page="perPage"
@@ -22,20 +31,9 @@
                 </template>
             </UiDataTable>
         </div>
-    <div v-else class="mt-7 border border-slate-200 mb-11 px-4 py-6 text-slate-400">
+        <div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
             Accès réservé aux administrateurs.
         </div>
-
-    <div class="flex justify-center items-center">
-        <NuxtLink
-            to="/admin/bovin"
-            class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
-            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
-            @click="handleAddClick"
-        >
-            <Icon name="mdi:plus" size="28" />
-            Ajouter
-        </NuxtLink>
     </div>
 </template>
 
@@ -66,11 +64,6 @@ const goToBovin = (bovin: BovineTypeData) => {
     router.push(`/admin/bovin/${bovin.id}`)
 }
 
-const handleAddClick = (event: Event) => {
-    if (auth.isAdmin) return
-    event.preventDefault()
-}
-
 onMounted(() => {
     if (auth.isAdmin) reload()
 })

frontend/pages/admin/carrier/carrier-list.vue

@@ -1,9 +1,17 @@
 <template>
+    <div class="px-[86px]">
         <div class="flex items-center justify-between">
             <h1 class="text-4xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
+            <NuxtLink
+                to="/admin/carrier"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-6 rounded hover:opacity-80 gap-2"
+            >
+                <Icon name="mdi:plus" size="28" />
+                Ajouter
+            </NuxtLink>
         </div>
 
-    <div class="mt-7 mb-11">
+        <div class="mt-6 mb-16">
             <UiDataTable
                 v-model:page="page"
                 v-model:per-page="perPage"
@@ -22,15 +30,6 @@
                 </template>
             </UiDataTable>
         </div>
-
-    <div class="flex justify-center items-center">
-        <NuxtLink
-            to="/admin/carrier"
-            class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
-        >
-            <Icon name="mdi:plus" size="28" />
-            Ajouter
-        </NuxtLink>
     </div>
 </template>
 

frontend/pages/admin/customer/customer-list.vue

@@ -1,9 +1,18 @@
 <template>
+    <div class="px-[86px]">
         <div class="flex items-center justify-between">
             <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des clients</h1>
+            <NuxtLink
+                v-if="auth.isAdmin"
+                to="/admin/customer"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-6 rounded hover:opacity-80 gap-2"
+            >
+                <Icon name="mdi:plus" size="28" />
+                Ajouter
+            </NuxtLink>
         </div>
 
-    <div v-if="auth.isAdmin" class="mt-7 mb-11">
+        <div v-if="auth.isAdmin" class="mt-6 mb-16">
             <UiDataTable
                 v-model:page="page"
                 v-model:per-page="perPage"
@@ -28,20 +37,9 @@
                 </template>
             </UiDataTable>
         </div>
-    <div v-else class="mt-7 border border-slate-200 mb-11 px-4 py-6 text-slate-400">
+        <div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
             Accès réservé aux administrateurs.
         </div>
-
-    <div class="flex justify-center items-center">
-        <NuxtLink
-            to="/admin/customer"
-            class="inline-flex items-center mb-16 justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
-            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
-            @click="handleAddClick"
-        >
-            <Icon name="mdi:plus" size="28" />
-            Ajouter
-        </NuxtLink>
     </div>
 </template>
 
@@ -76,11 +74,6 @@ const goToCustomer = (customer: CustomerData) => {
     router.push(`/admin/customer/${customer.id}`)
 }
 
-const handleAddClick = (event: Event) => {
-    if (auth.isAdmin) return
-    event.preventDefault()
-}
-
 onMounted(() => {
     if (auth.isAdmin) reload()
 })

frontend/pages/admin/supplier/supplier-list.vue

@@ -1,9 +1,18 @@
 <template>
+    <div class="px-[86px]">
         <div class="flex items-center justify-between">
             <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des fournisseurs</h1>
+            <NuxtLink
+                v-if="auth.isAdmin"
+                to="/admin/supplier"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-6 rounded hover:opacity-80 gap-2"
+            >
+                <Icon name="mdi:plus" size="28" />
+                Ajouter
+            </NuxtLink>
         </div>
 
-    <div v-if="auth.isAdmin" class="mt-7 mb-11">
+        <div v-if="auth.isAdmin" class="mt-6 mb-16">
             <UiDataTable
                 v-model:page="page"
                 v-model:per-page="perPage"
@@ -28,20 +37,9 @@
                 </template>
             </UiDataTable>
         </div>
-    <div v-else class="mt-7 border border-slate-200 mb-11 px-4 py-6 text-slate-400">
+        <div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
             Accès réservé aux administrateurs.
         </div>
-
-    <div class="flex justify-center items-center">
-        <NuxtLink
-            to="/admin/supplier"
-            class="inline-flex items-center mb-16 justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
-            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
-            @click="handleAddClick"
-        >
-            <Icon name="mdi:plus" size="28" />
-            Ajouter
-        </NuxtLink>
     </div>
 </template>
 
@@ -76,11 +74,6 @@ const goToSupplier = (supplier: SupplierData) => {
     router.push(`/admin/supplier/${supplier.id}`)
 }
 
-const handleAddClick = (event: Event) => {
-    if (auth.isAdmin) return
-    event.preventDefault()
-}
-
 onMounted(() => {
     if (auth.isAdmin) reload()
 })

frontend/pages/admin/user/list.vue

@@ -1,9 +1,18 @@
 <template>
+    <div class="px-[86px]">
         <div class="flex items-center justify-between">
             <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des utilisateurs</h1>
+            <NuxtLink
+                v-if="auth.isAdmin"
+                to="/admin/user"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-6 rounded hover:opacity-80 gap-2"
+            >
+                <Icon name="mdi:plus" size="28" />
+                Ajouter
+            </NuxtLink>
         </div>
 
-    <div v-if="auth.isAdmin" class="mt-7 mb-11">
+        <div v-if="auth.isAdmin" class="mt-6 mb-16">
             <UiDataTable
                 v-model:page="page"
                 v-model:per-page="perPage"
@@ -47,20 +56,9 @@
                 </template>
             </UiDataTable>
         </div>
-    <div v-else class="mt-7 border border-slate-200 mb-11 px-4 py-6 text-slate-400">
+        <div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
             Accès réservé aux administrateurs.
         </div>
-
-    <div class="flex justify-center items-center">
-        <NuxtLink
-            to="/admin/user"
-            class="inline-flex items-center mb-16 justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
-            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
-            @click="handleAddClick"
-        >
-            <Icon name="mdi:plus" size="28" />
-            Ajouter
-        </NuxtLink>
     </div>
 </template>
 
@@ -104,11 +102,6 @@ const goToUser = (user: UserData) => {
     router.push(`/admin/user/${user.id}`)
 }
 
-const handleAddClick = (event: Event) => {
-    if (auth.isAdmin) return
-    event.preventDefault()
-}
-
 onMounted(() => {
     if (auth.isAdmin) reload()
 })