fix : panel scrollable plus interface revue

frontend/layouts/admin.vue

@@ -27,7 +27,7 @@
                     <NuxtLink to="/admin/dashboard">
                         Tableau de bord
                     </NuxtLink>
-                    <NuxtLink to="/admin/supplier-list">
+                    <NuxtLink to="/admin/supplier/supplier-list">
                         Fournisseur
                     </NuxtLink>
                     <NuxtLink to="/admin/carrier/carrier-list">

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

@@ -4,7 +4,7 @@
             <h1 class="text-3xl font-bold uppercase">listes des transporteurs</h1>
             <button
                 @Click="goToCarrier()"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] "
             >Ajouter
             </button>
     </div>

frontend/pages/admin/supplier-list.vue

@@ -1,71 +0,0 @@
-<template>
-    <div class="flex items-center justify-between p-4">
-        <h1 class="text-xl font-fullbold uppercase"> Fournisseurs </h1>
-        <NuxtLink to="/admin/supplier"
-           class="flex items-center justify-center uppercase text-xl bg-primary-500 text-white h-[50px] w-[272px]"
-        >
-            Ajouter </NuxtLink>
-    </div>
-    <div class="mt-6 border border-slate-200 mb-16">
-        <div
-            class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
-        >
-            <div>Nom</div>
-            <div>Mail</div>
-            <div>Rue</div>
-            <div>Complément</div>
-            <div>Code Postal</div>
-            <div>Ville</div>
-        </div>
-
-        <div v-for="supplier in supplierList" :key="supplier.id">
-            <template v-if="supplier.addresses?.length">
-                <div
-                    v-for="addr in supplier.addresses"
-                    :key="addr.id"
-                    class="grid grid-cols-6 gap-4 px-4 py-2 "
-                    @click="goToSupplier(supplier.id)"
-                >
-                    <div class="truncate">
-                        {{ supplier.name }}
-                    </div>
-                    <div class="truncate">
-                        {{ supplier.email }}
-                    </div>
-                    <div class="truncate">
-                        {{ addr.street }}
-                    </div>
-                    <div class="truncate">
-                        {{ addr.street2 }}
-                    </div>
-                    <div>{{ addr.postalCode }}</div>
-                    <div class="uppercase truncate">
-                        {{ addr.city }}
-                    </div>
-                </div>
-            </template>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import type {SupplierData} from "~/services/dto/supplier-data"
-import {getSupplierList} from "~/services/supplier"
-
-definePageMeta({layout: "admin"})
-
-const supplierList = ref<SupplierData[]>([])
-const router = useRouter()
-
-
-const goToSupplier = (id: number) => {
-    router.push(`/admin/supplier/${id}`)
-}
-
-onMounted(async () => {
-    supplierList.value = (await getSupplierList(false)) ?? []
-})
-
-</script>
-
-

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

@@ -0,0 +1,74 @@
+<template>
+    <div class="flex items-center justify-between">
+        <h1 class="text-3xl font-bold uppercase"> Fournisseurs </h1>
+        <NuxtLink to="/admin/supplier"
+                  class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+        >
+            Ajouter
+        </NuxtLink>
+    </div>
+    <div class="mt-6 border border-slate-200 mb-16">
+        <div class="max-h-96 overflow-y-auto">
+            <div
+                class="sticky top-0 z-10 grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
+            >
+                <div>Nom</div>
+                <div>Mail</div>
+                <div>Rue</div>
+                <div>Complément</div>
+                <div>Code Postal</div>
+                <div>Ville</div>
+            </div>
+
+            <div v-for="supplier in supplierList" :key="supplier.id">
+                <template v-if="supplier.addresses?.length">
+                    <div
+                        v-for="addr in supplier.addresses"
+                        :key="addr.id"
+                        class="grid grid-cols-6 hover:bg-slate-50 border-t gap-4 px-4 py-2"
+                        @click="goToSupplier(supplier.id)"
+                    >
+                        <div class="truncate">
+                            {{ supplier.name }}
+                        </div>
+                        <div class="truncate">
+                            {{ supplier.email }}
+                        </div>
+                        <div class="truncate">
+                            {{ addr.street }}
+                        </div>
+                        <div class="truncate">
+                            {{ addr.street2 }}
+                        </div>
+                        <div>{{ addr.postalCode }}</div>
+                        <div class="uppercase truncate">
+                            {{ addr.city }}
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {SupplierData} from "~/services/dto/supplier-data"
+import {getSupplierList} from "~/services/supplier"
+
+definePageMeta({layout: "admin"})
+
+const supplierList = ref<SupplierData[]>([])
+const router = useRouter()
+
+
+const goToSupplier = (id: number) => {
+    router.push(`/admin/supplier/${id}`)
+}
+
+onMounted(async () => {
+    supplierList.value = (await getSupplierList(false)) ?? []
+})
+
+</script>
+
+