From d5b372e243a875563d154ebbe6fea316b2c7464e Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Fri, 24 Apr 2026 11:00:20 +0200
Subject: [PATCH] =?UTF-8?q?feat=20:=20bouton=20Ajouter=20sur=20les=20pages?=
 =?UTF-8?q?=20admin=20en=20haut=20=C3=A0=20droite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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     |  75 +++++------
 frontend/pages/admin/carrier/carrier-list.vue |  61 +++++----
 .../pages/admin/customer/customer-list.vue    |  87 ++++++------
 .../pages/admin/supplier/supplier-list.vue    |  87 ++++++------
 frontend/pages/admin/user/list.vue            | 125 +++++++++---------
 5 files changed, 203 insertions(+), 232 deletions(-)

diff --git a/frontend/pages/admin/bovin/bovin-list.vue b/frontend/pages/admin/bovin/bovin-list.vue
index d8916f5..c0889b6 100644
--- a/frontend/pages/admin/bovin/bovin-list.vue
+++ b/frontend/pages/admin/bovin/bovin-list.vue
@@ -1,41 +1,39 @@
 <template>
-    <div class="flex items-center justify-between">
-        <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des types bovins</h1>
-    </div>
+    <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">
-        <UiDataTable
-            v-model:page="page"
-            v-model:per-page="perPage"
-            :columns="columns"
-            :items="items"
-            :total-items="totalItems"
-            :loading="loading"
-            row-clickable
-            @row-click="goToBovin"
-        >
-            <template #header-label>
-                <UiTextInput v-model="filters.label" placeholder="Nom" size="compact" />
-            </template>
-            <template #header-code>
-                <UiTextInput v-model="filters.code" placeholder="Code" size="compact" />
-            </template>
-        </UiDataTable>
-    </div>
-    <div v-else class="mt-7 border border-slate-200 mb-11 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 v-if="auth.isAdmin" class="mt-6 mb-16">
+            <UiDataTable
+                v-model:page="page"
+                v-model:per-page="perPage"
+                :columns="columns"
+                :items="items"
+                :total-items="totalItems"
+                :loading="loading"
+                row-clickable
+                @row-click="goToBovin"
+            >
+                <template #header-label>
+                    <UiTextInput v-model="filters.label" placeholder="Nom" size="compact" />
+                </template>
+                <template #header-code>
+                    <UiTextInput v-model="filters.code" placeholder="Code" size="compact" />
+                </template>
+            </UiDataTable>
+        </div>
+        <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>
 </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()
 })
diff --git a/frontend/pages/admin/carrier/carrier-list.vue b/frontend/pages/admin/carrier/carrier-list.vue
index 7568cad..57c48e5 100644
--- a/frontend/pages/admin/carrier/carrier-list.vue
+++ b/frontend/pages/admin/carrier/carrier-list.vue
@@ -1,36 +1,35 @@
 <template>
-    <div class="flex items-center justify-between">
-        <h1 class="text-4xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
-    </div>
+    <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">
-        <UiDataTable
-            v-model:page="page"
-            v-model:per-page="perPage"
-            :columns="columns"
-            :items="items"
-            :total-items="totalItems"
-            :loading="loading"
-            row-clickable
-            @row-click="goToCarrier"
-        >
-            <template #header-name>
-                <UiTextInput v-model="filters.name" placeholder="Label" size="compact" />
-            </template>
-            <template #header-code>
-                <UiTextInput v-model="filters.code" placeholder="Code" size="compact" />
-            </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 class="mt-6 mb-16">
+            <UiDataTable
+                v-model:page="page"
+                v-model:per-page="perPage"
+                :columns="columns"
+                :items="items"
+                :total-items="totalItems"
+                :loading="loading"
+                row-clickable
+                @row-click="goToCarrier"
+            >
+                <template #header-name>
+                    <UiTextInput v-model="filters.name" placeholder="Label" size="compact" />
+                </template>
+                <template #header-code>
+                    <UiTextInput v-model="filters.code" placeholder="Code" size="compact" />
+                </template>
+            </UiDataTable>
+        </div>
     </div>
 </template>
 
diff --git a/frontend/pages/admin/customer/customer-list.vue b/frontend/pages/admin/customer/customer-list.vue
index 00c2c52..501c1cc 100644
--- a/frontend/pages/admin/customer/customer-list.vue
+++ b/frontend/pages/admin/customer/customer-list.vue
@@ -1,47 +1,45 @@
 <template>
-    <div class="flex items-center justify-between">
-        <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des clients</h1>
-    </div>
+    <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">
-        <UiDataTable
-            v-model:page="page"
-            v-model:per-page="perPage"
-            :columns="columns"
-            :items="items"
-            :total-items="totalItems"
-            :loading="loading"
-            row-clickable
-            @row-click="goToCustomer"
-        >
-            <template #header-name>
-                <UiTextInput v-model="filters.name" placeholder="Nom" size="compact" />
-            </template>
-            <template #header-phone>
-                <UiTextInput v-model="filters.phone" placeholder="Téléphone" size="compact" />
-            </template>
-            <template #header-email>
-                <UiTextInput v-model="filters.email" placeholder="Mail" size="compact" />
-            </template>
-            <template #header-createdBy.username>
-                <UiTextInput v-model="filters['createdBy.username']" placeholder="Créé par" size="compact" />
-            </template>
-        </UiDataTable>
-    </div>
-    <div v-else class="mt-7 border border-slate-200 mb-11 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 v-if="auth.isAdmin" class="mt-6 mb-16">
+            <UiDataTable
+                v-model:page="page"
+                v-model:per-page="perPage"
+                :columns="columns"
+                :items="items"
+                :total-items="totalItems"
+                :loading="loading"
+                row-clickable
+                @row-click="goToCustomer"
+            >
+                <template #header-name>
+                    <UiTextInput v-model="filters.name" placeholder="Nom" size="compact" />
+                </template>
+                <template #header-phone>
+                    <UiTextInput v-model="filters.phone" placeholder="Téléphone" size="compact" />
+                </template>
+                <template #header-email>
+                    <UiTextInput v-model="filters.email" placeholder="Mail" size="compact" />
+                </template>
+                <template #header-createdBy.username>
+                    <UiTextInput v-model="filters['createdBy.username']" placeholder="Créé par" size="compact" />
+                </template>
+            </UiDataTable>
+        </div>
+        <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>
 </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()
 })
diff --git a/frontend/pages/admin/supplier/supplier-list.vue b/frontend/pages/admin/supplier/supplier-list.vue
index c947452..de06256 100644
--- a/frontend/pages/admin/supplier/supplier-list.vue
+++ b/frontend/pages/admin/supplier/supplier-list.vue
@@ -1,47 +1,45 @@
 <template>
-    <div class="flex items-center justify-between">
-        <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des fournisseurs</h1>
-    </div>
+    <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">
-        <UiDataTable
-            v-model:page="page"
-            v-model:per-page="perPage"
-            :columns="columns"
-            :items="items"
-            :total-items="totalItems"
-            :loading="loading"
-            row-clickable
-            @row-click="goToSupplier"
-        >
-            <template #header-name>
-                <UiTextInput v-model="filters.name" placeholder="Nom" size="compact" />
-            </template>
-            <template #header-phone>
-                <UiTextInput v-model="filters.phone" placeholder="Téléphone" size="compact" />
-            </template>
-            <template #header-email>
-                <UiTextInput v-model="filters.email" placeholder="Mail" size="compact" />
-            </template>
-            <template #header-createdBy.username>
-                <UiTextInput v-model="filters['createdBy.username']" placeholder="Créé par" size="compact" />
-            </template>
-        </UiDataTable>
-    </div>
-    <div v-else class="mt-7 border border-slate-200 mb-11 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 v-if="auth.isAdmin" class="mt-6 mb-16">
+            <UiDataTable
+                v-model:page="page"
+                v-model:per-page="perPage"
+                :columns="columns"
+                :items="items"
+                :total-items="totalItems"
+                :loading="loading"
+                row-clickable
+                @row-click="goToSupplier"
+            >
+                <template #header-name>
+                    <UiTextInput v-model="filters.name" placeholder="Nom" size="compact" />
+                </template>
+                <template #header-phone>
+                    <UiTextInput v-model="filters.phone" placeholder="Téléphone" size="compact" />
+                </template>
+                <template #header-email>
+                    <UiTextInput v-model="filters.email" placeholder="Mail" size="compact" />
+                </template>
+                <template #header-createdBy.username>
+                    <UiTextInput v-model="filters['createdBy.username']" placeholder="Créé par" size="compact" />
+                </template>
+            </UiDataTable>
+        </div>
+        <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>
 </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()
 })
diff --git a/frontend/pages/admin/user/list.vue b/frontend/pages/admin/user/list.vue
index 5216f72..f5de52e 100644
--- a/frontend/pages/admin/user/list.vue
+++ b/frontend/pages/admin/user/list.vue
@@ -1,66 +1,64 @@
 <template>
-    <div class="flex items-center justify-between">
-        <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des utilisateurs</h1>
-    </div>
+    <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">
-        <UiDataTable
-            v-model:page="page"
-            v-model:per-page="perPage"
-            :columns="columns"
-            :items="items"
-            :total-items="totalItems"
-            :loading="loading"
-            row-clickable
-            @row-click="goToUser"
-        >
-            <template #header-username>
-                <UiTextInput
-                    v-model="filters.username"
-                    placeholder="Utilisateur"
-                    size="compact"
-                />
-            </template>
-            <template #header-roles>
-                <UiTextInput :model-value="''" placeholder="Role" size="compact" disabled />
-            </template>
-            <template #header-isLocked>
-                <UiSelect
-                    v-model="filters.isLocked"
-                    placeholder="Statut"
-                    :options="statusOptions"
-                    size="compact"
-                />
-            </template>
-            <template #cell-roles="{ item }">
-                {{ getRoleLabels(item.roles) }}
-            </template>
-            <template #cell-isLocked="{ item }">
-                <span
-                    v-if="item.isLocked"
-                    class="inline-block px-2 py-0.5 text-xs font-semibold rounded bg-red-100 text-red-700"
-                >Verrouillé</span>
-                <span
-                    v-else
-                    class="inline-block px-2 py-0.5 text-xs font-semibold rounded bg-green-100 text-green-700"
-                >Actif</span>
-            </template>
-        </UiDataTable>
-    </div>
-    <div v-else class="mt-7 border border-slate-200 mb-11 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 v-if="auth.isAdmin" class="mt-6 mb-16">
+            <UiDataTable
+                v-model:page="page"
+                v-model:per-page="perPage"
+                :columns="columns"
+                :items="items"
+                :total-items="totalItems"
+                :loading="loading"
+                row-clickable
+                @row-click="goToUser"
+            >
+                <template #header-username>
+                    <UiTextInput
+                        v-model="filters.username"
+                        placeholder="Utilisateur"
+                        size="compact"
+                    />
+                </template>
+                <template #header-roles>
+                    <UiTextInput :model-value="''" placeholder="Role" size="compact" disabled />
+                </template>
+                <template #header-isLocked>
+                    <UiSelect
+                        v-model="filters.isLocked"
+                        placeholder="Statut"
+                        :options="statusOptions"
+                        size="compact"
+                    />
+                </template>
+                <template #cell-roles="{ item }">
+                    {{ getRoleLabels(item.roles) }}
+                </template>
+                <template #cell-isLocked="{ item }">
+                    <span
+                        v-if="item.isLocked"
+                        class="inline-block px-2 py-0.5 text-xs font-semibold rounded bg-red-100 text-red-700"
+                    >Verrouillé</span>
+                    <span
+                        v-else
+                        class="inline-block px-2 py-0.5 text-xs font-semibold rounded bg-green-100 text-green-700"
+                    >Actif</span>
+                </template>
+            </UiDataTable>
+        </div>
+        <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>
 </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()
 })