feat : creation du composant datatable (WIP)

Merge branch 'develop' into feat/266-creation-composant-datatable
2026-02-16 16:05:04 +01:00 · 2026-02-16 08:06:02 +01:00 · 2026-02-13 16:06:55 +01:00
53 changed files with 697 additions and 498 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,7 +46,6 @@ Ajouter dans le fichier .env du frontend
 * [#324] Creation page admin listing clients
 * [#326] Admin modification creation client
 * [#325] Correction diverses
-* fix layout admin

 ### Changed

--- a/config/packages/api_platform.yaml
+++ b/config/packages/api_platform.yaml
@@ -3,6 +3,8 @@ api_platform:
    version: 1.0.0
    defaults:
        stateless: true
+        pagination_client_items_per_page: true
+        pagination_maximum_items_per_page: 100
        cache_headers:
            vary: ['Content-Type', 'Authorization', 'Origin']
    formats:
--- a/config/reference.php
+++ b/config/reference.php
@@ -1,7 +1,5 @@
 <?php

-declare(strict_types=1);
-
 // This file is auto-generated and is for apps only. Bundles SHOULD NOT rely on its content.

 namespace Symfony\Component\DependencyInjection\Loader\Configurator;
@@ -1472,7 +1470,7 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
 *     mercure?: bool|array{
 *         enabled?: bool|Param, // Default: false
 *         hub_url?: scalar|Param|null, // The URL sent in the Link HTTP header. If not set, will default to the URL for MercureBundle's default hub. // Default: null
- *         include_type?: bool|Param, // Always include @var in updates (including delete ones). // Default: false
+ *         include_type?: bool|Param, // Always include @type in updates (including delete ones). // Default: false
 *     },
 *     messenger?: bool|array{
 *         enabled?: bool|Param, // Default: false
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.0.50'
+    app.version: '0.0.47'
--- a/frontend/components/card-link.vue
+++ b/frontend/components/card-link.vue
@@ -2,7 +2,7 @@

 <template>
    <NuxtLink :to="link">
-        <div class="w-[300px] h-[216px] border border-black rounded-lg p-6 flex flex-col justify-between gap-4">
+        <div class="w-[324px] h-[228px] border border-black rounded-lg p-6 flex flex-col justify-between">
            <div class="flex justify-between">
                <div class="rounded-full w-[80px] h-[80px] bg-[#D9D9D9] flex justify-center items-center">
                    <Icon :name="iconName" style="color: black" size="44" />
@@ -12,12 +12,12 @@
                </div>
            </div>
            <div class="uppercase font-bold">
-                <p class="text-3xl text-primary-500">
-                    <slot name="label">{{ label }}</slot>
-                </p>
+                <p class="text-3xl"> {{ label }} </p>
            </div>
        </div>
        </NuxtLink>
+
+
 </template>

 <script setup lang="ts">
@@ -27,3 +27,4 @@ const props = defineProps<{
    label: string
 }>()
 </script>
+
--- a/frontend/components/reception/reception-bovine-received.vue
+++ b/frontend/components/reception/reception-bovine-received.vue
@@ -2,7 +2,7 @@
    <div
        v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"
        class="flex flex-col items-center gap-16">
-        <h1 class="text-4xl uppercase font-bold text-primary-500">Sélection des races réceptionnées</h1>
+        <h1 class="text-4xl uppercase font-bold">Sélection des races réceptionnées</h1>
        <div
            class="flex flex-row gap-8 items-center">
            <div
--- a/frontend/components/reception/reception-form.vue
+++ b/frontend/components/reception/reception-form.vue
@@ -1,7 +1,7 @@
 <template>
    <form @submit.prevent="validate">
        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
-            <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1 text-primary-500">Réception</h1>
+            <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1">Réception</h1>
            <!--    Nom de l'utilisateur       -->
            <UiSelect
                id="reception-user"
@@ -81,8 +81,21 @@
                select-class="h-[34px]"
                wrapper-class="col-start-2 row-start-3"
            />
+            <!--    Chauffeur (LIOT)        -->
+            <UiSelect
+                id="reception-driver"
+                v-model="form.driverId"
+                label="Nom du chauffeur si LIOT"
+                :options="filteredDrivers.map((driver) => ({
+                    value: String(driver.id),
+                    label: driver.name
+                }))"
+                :loading="isLoadingDrivers"
+                v-if="isLiotCarrier"
+                wrapper-class="col-start-2 row-start-4"
+            />
            <!--    Plaque d'immatriculation       -->
-            <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-5">
                <UiLicensePlateInput
                    v-model="form.licensePlate"
                    v-model:allowAny="allowAnyLicensePlate"
@@ -100,28 +113,15 @@
                }))"
                :loading="isLoadingVehicles"
                :disabled="isLoadingVehicles || filteredVehicles.length === 0"
-                wrapper-class="col-start-2 row-start-4 h-[64px]"
-            />
-            <!--    Chauffeur (LIOT)        -->
-            <UiSelect
-                id="reception-driver"
-                v-model="form.driverId"
-                label="Nom du chauffeur si LIOT"
-                :options="filteredDrivers.map((driver) => ({
-                    value: String(driver.id),
-                    label: driver.name
-                }))"
-                :loading="isLoadingDrivers"
-                v-if="isLiotCarrier"
                wrapper-class="col-start-2 row-start-5"
            />
        </div>
        <div class="flex justify-center">
-            <UiButton
+            <button
                type="submit"
                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
            >Valider
-            </UiButton>
+            </button>
        </div>
    </form>

--- a/frontend/components/reception/reception-product-received.vue
+++ b/frontend/components/reception/reception-product-received.vue
@@ -3,7 +3,7 @@
        <div
            v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"
            class="flex flex-col gap-16 items-center w-full">
-            <h1 class="text-4xl uppercase font-bold text-primary-500">Sélection des marchandises réceptionnnées</h1>
+            <h1 class="text-4xl uppercase font-bold">Sélection des marchandises réceptionnnées</h1>
            <UiSelect
                id="merchandise-type"
                v-model="selectedMerchandiseTypeId"
@@ -47,7 +47,7 @@
            >
                <div class="grid grid-cols-1 gap-10 md:grid-cols-4">
                    <div v-for="type in pelletTypes" :key="type.id" class="flex flex-col gap-4">
-                        <p class="font-bold uppercase text-primary-500">{{ type.label }}</p>
+                        <p class="font-bold uppercase">{{ type.label }}</p>
                        <div
                            v-for="building in buildings"
                            :key="building.id"
--- a/frontend/components/reception/reception-weight.vue
+++ b/frontend/components/reception/reception-weight.vue
@@ -1,9 +1,9 @@
 <template>
    <div class="flex justify-center">
        <div class="flex flex-col items-center w-[660px]">
-            <h1 class="font-bold text-5xl uppercase text-primary-500">{{ title }}</h1>
+            <h1 class="font-bold text-5xl uppercase">{{ title }}</h1>
 <!--@TODO Voir comment faire pour savoir si le pont-bascule et bien connecté + ajouter un icon comme sur la maquette-->
-            <p class="text-primary-500 uppercase text-2xl text-primary-500 mt-2">Pont-bascule connecté</p>
+            <p class="text-primary-500 uppercase text-2xl mt-2">Pont-bascule connecté</p>
            <div
                v-if="showLoadingBox"
                class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[86px]">
@@ -11,27 +11,27 @@
            </div>
            <div v-else-if="displayWeight !== null" class="w-full">
                <div
-                    class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl text-primary-500">
+                    class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl">
                    {{ displayWeight }} kg
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center mt-[54px]">
-        <UiButton
+        <button
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
            @click="fetchWeight"
-        >{{ displayWeight !== null ? 'refaire une pesée' : 'peser' }}</UiButton>
-        <UiButton
+        >{{ displayWeight !== null ? 'refaire une pesee' : 'peser' }}</button>
+        <button
            v-if="displayWeight !== null && !showGenerateReceipt"
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
            @click="saveWeight"
-        >Valider la pesée</UiButton>
-        <UiButton
+        >Valider</button>
+        <button
            v-if="showGenerateReceipt"
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
            @click="printReceipt"
-        >Générer le bon</UiButton>
+        >Générer le bon</button>
    </div>
 </template>

--- a/frontend/components/reception/update-bovin.vue
+++ b/frontend/components/reception/update-bovin.vue
@@ -27,12 +27,12 @@
                />
            </div>
        </div>
-        <UiButton
+        <button
            type="submit"
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
            :disabled="!auth.isAdmin"
        >Valider
-        </UiButton>
+        </button>
    </div>
    </form>
 </template>
--- a/frontend/components/reception/update-merchandise.vue
+++ b/frontend/components/reception/update-merchandise.vue
@@ -67,13 +67,13 @@
                    </div>
                </div>
            </div>
-            <UiButton
+            <button
                v-if="auth.isAdmin"
                type="submit"
                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
                :disabled="!auth.isAdmin"
            >Valider
-            </UiButton>
+            </button>
        </div>
    </form>
 </template>
--- a/frontend/components/reception/update-weight.vue
+++ b/frontend/components/reception/update-weight.vue
@@ -30,14 +30,14 @@
        </div>

        <div class="flex justify-center">
-            <UiButton
+            <button
                v-if="auth.isAdmin"
                type="submit"
                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"

            >
                Valider
-            </UiButton>
+            </button>
        </div>

    </form>
--- a/frontend/components/shipment/shipment-form.vue
+++ b/frontend/components/shipment/shipment-form.vue
@@ -1,7 +1,7 @@
 <template>
    <form @submit.prevent="validate">
        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
-            <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1 text-primary-500">Expédition</h1>
+            <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1">Expédition</h1>
            <!--    Nom de l'utilisateur       -->
            <UiSelect
                id="shipment-user"
@@ -23,11 +23,11 @@
            />
            <!--    Type d'expédition        -->
            <div class="col-start-1 row-start-4 h-[64px]">
-                <div class="flex items-end gap-8 justify-between">
+                <div class="flex items-end gap-8">
                    <UiRadioGroup
                        id="shipment-type"
                        name="shipment-type"
-                        label="Type d'expédition bovine"
+                        label="Type d'expédition"
                        v-model="selectedShipmentTypeId"
                        :options="bovineShipment.map((type) => ({
                            value: String(type.id),
@@ -89,8 +89,21 @@
                }))"
                wrapper-class="col-start-2 row-start-3"
            />
+            <!--  Chauffeur (LIOT)        -->
+            <UiSelect
+                id="shipment-driver"
+                v-model="form.driverId"
+                label="Nom du chauffeur si LIOT"
+                :options="filteredDrivers.map((driver) => ({
+                    value: String(driver.id),
+                    label: driver.name
+                }))"
+                :loading="isLoadingDrivers"
+                wrapper-class="col-start-2 row-start-4"
+                v-if="isLiotCarrier"
+            />
            <!-- Plaque d'immatriculation (hors LIOT)        -->
-            <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-5">
                <UiLicensePlateInput
                    v-model="form.licencePlate"
                    v-model:allowAny="allowAnyLicensePlate"
@@ -108,28 +121,15 @@
                }))"
                :loading="isLoadingVehicles"
                :disabled="isLoadingVehicles || filteredVehicles.length === 0"
-                wrapper-class="col-start-2 row-start-4"
-            />
-            <!--  Chauffeur (LIOT)        -->
-            <UiSelect
-                id="shipment-driver"
-                v-model="form.driverId"
-                label="Nom du chauffeur si LIOT"
-                :options="filteredDrivers.map((driver) => ({
-                    value: String(driver.id),
-                    label: driver.name
-                }))"
-                :loading="isLoadingDrivers"
                wrapper-class="col-start-2 row-start-5"
-                v-if="isLiotCarrier"
            />
        </div>
        <div class="flex justify-center">
-            <UiButton
+            <button
                type="submit"
                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
            >Valider
-            </UiButton>
+            </button>
        </div>
    </form>
 </template>
--- a/frontend/components/shipment/shipment-loading.vue
+++ b/frontend/components/shipment/shipment-loading.vue
@@ -1,14 +1,14 @@
 <template>
-    <div class="flex flex-col items-center gap-[118px]">
-        <h1 class="font-bold text-5xl uppercase text-primary-500">Charment des bovins</h1>
+    <div class="flex flex-col items-center gap-16">
+        <h1 class="font-bold text-5xl uppercase">Charment des bovins</h1>
        <div
            class="w-full flex flex-col items-center justify-center">
            <UiLoadingDots />
        </div>
-        <UiButton
+        <button
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
            @click="goNext"
-        >Peser</UiButton>
+        >Pesée</button>
    </div>
 </template>

--- a/frontend/components/shipment/shipment-weight.vue
+++ b/frontend/components/shipment/shipment-weight.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="flex justify-center">
        <div class="flex flex-col items-center w-[660px]">
-            <h1 class="font-bold text-5xl uppercase text-primary-500">{{ title }}</h1>
+            <h1 class="font-bold text-5xl uppercase">{{ title }}</h1>
 <!--@TODO Voir comment faire pour savoir si le pont-bascule et bien connecté + ajouter un icon comme sur la maquette-->
            <p class="text-primary-500 uppercase text-2xl mt-2">Pont-bascule connecté</p>
            <div
@@ -11,27 +11,27 @@
            </div>
            <div v-else-if="displayWeight !== null" class="w-full">
                <div
-                    class="w-full flex flex-col items-center justify-center border border-primary-500 h-[90px] mt-12 mb-[25px] text-4xl text-primary-500">
+                    class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl">
                    {{ displayWeight }} kg
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center mt-[54px]">
-        <UiButton
+        <button
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
            @click="fetchWeight"
-        >{{ displayWeight !== null ? 'refaire une pesée' : 'peser' }}</UiButton>
-        <UiButton
+        >{{ displayWeight !== null ? 'refaire une pesee' : 'peser' }}</button>
+        <button
            v-if="displayWeight !== null && !showGenerateReceipt"
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
            @click="saveWeight"
-        >Valider la pesée</UiButton>
-        <UiButton
+        >Valider la pesée</button>
+        <button
            v-if="showGenerateReceipt"
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
            @click="printReceipt"
-        >Générer le bon</UiButton>
+        >Générer le bon</button>
    </div>
 </template>

--- a/frontend/components/ui/UiButton.vue
+++ b/frontend/components/ui/UiButton.vue
@@ -1,39 +0,0 @@
-<template>
-    <component
-        :is="'button'"
-        :type="type"
-        :disabled="isDisabled"
-        class="inline-flex items-center justify-center rounded-md"
-        :class="[
-            isDisabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
-            buttonClass
-        ]"
-        v-bind="attrs"
-    >
-        <slot v-if="!loading" />
-        <UiLoadingDots v-else />
-    </component>
-</template>
-
-<script setup lang="ts">
-import {computed, useAttrs} from 'vue'
-
-defineOptions({inheritAttrs: false})
-
-const props = withDefaults(
-    defineProps<{
-        type?: 'button' | 'submit' | 'reset'
-        disabled?: boolean
-        loading?: boolean
-        buttonClass?: string
-    }>(),
-    {
-        disabled: false,
-        loading: false,
-        buttonClass: ''
-    }
-)
-
-const attrs = useAttrs()
-const isDisabled = computed(() => props.disabled || props.loading)
-</script>
--- a/frontend/components/ui/UiCheckbox.vue
+++ b/frontend/components/ui/UiCheckbox.vue
@@ -1,14 +1,14 @@
 <template>
    <div :class="wrapperClass">
        <label
-            class="flex items-center gap-2 cursor-pointer text-primary-500"
+            class="flex items-center gap-2 cursor-pointer"
            :class="labelClass"
        >
            <input
                type="checkbox"
                :checked="checked"
                :disabled="disabled"
-                :class="['cursor-pointer text-primary-500', inputClass]"
+                :class="['cursor-pointer', inputClass]"
                @change="onChange"
            >
            <span v-if="label">{{ label }}</span>
--- a/frontend/components/ui/UiDataTable.vue
+++ b/frontend/components/ui/UiDataTable.vue
@@ -0,0 +1,268 @@
+<template>
+    <div class="mt-6">
+        <table class="min-w-full border-collapse border border-slate-300">
+            <thead class="gap-4 bg-slate-100 px-4 py-3 uppercase tracking-wide">
+            <tr>
+                <th
+                    v-for="column in normalizedColumns"
+                    :key="column.key"
+                    class="border border-slate-300 px-3 py-2 text-left"
+                >
+                    <span>{{ column.label }}</span>
+                </th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-if="loading">
+                <td
+                    class="border border-slate-300 px-3 py-2 text-center text-slate-500"
+                    :colspan="normalizedColumns.length || 1"
+                >
+                    Chargement...
+                </td>
+            </tr>
+            <tr v-else-if="rows.length === 0">
+                <td
+                    class="border border-slate-300 px-3 py-2 text-center text-slate-500"
+                    :colspan="normalizedColumns.length || 1"
+                >
+                    Aucune donnée
+                </td>
+            </tr>
+            <template v-else>
+                <tr
+                    v-for="(row, rowIndex) in rows"
+                    :key="rowIndex"
+                    class="cursor-pointer"
+                    @click="onRowClick(row)"
+                >
+                    <td
+                        v-for="column in normalizedColumns"
+                        :key="column.key"
+                        class="border border-slate-300 px-2 py-2 whitespace-pre-line"
+                    >
+                        {{ formatColumnValue(row, column) }}
+                    </td>
+                </tr>
+            </template>
+            </tbody>
+        </table>
+
+        <div class="flex items-center justify-between">
+            <p class="text-sm text-slate-600">
+                {{ pageLabel }}
+            </p>
+            <div class="flex items-center gap-2 mt-4">
+                <button
+                    type="button"
+                    class="rounded border border-slate-300 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="currentPage <= 1 || loading"
+                    @click="currentPage = currentPage - 1"
+                >
+                    Précédent
+                </button>
+                <button
+                    v-for="(item, index) in paginationItems"
+                    :key="`${item}-${index}`"
+                    type="button"
+                    class="min-w-9 rounded border px-3 py-1 disabled:cursor-default"
+                    :class="typeof item === 'number' && item === currentPage
+                        ? 'border-primary-500 bg-primary-500 text-white'
+                        : 'border-slate-300'"
+                    :disabled="loading || item === '...'"
+                    @click="typeof item === 'number' ? (currentPage = item) : null"
+                >
+                    {{ item }}
+                </button>
+                <button
+                    type="button"
+                    class="rounded border border-slate-300 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="currentPage >= totalPages || loading"
+                    @click="currentPage = currentPage + 1"
+                >
+                    Suivant
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+type Row = Record<string, unknown>
+
+type ColumnConfig = {
+    key: string
+    label?: string
+    format?: (value: unknown, row: Row) => string
+}
+type HydraCollection<T> = {
+    'hydra:member': T[]
+    'hydra:totalItems': number
+}
+type AnyCollection<T> = HydraCollection<T> & {
+    member?: T[]
+    items?: T[]
+    totalItems?: number
+}
+
+const props = withDefaults(defineProps<{
+    url: string
+    columns?: ColumnConfig[]
+    query?: Record<string, unknown>
+    itemsPerPage?: number
+}>(), {
+    columns: () => [],
+    query: () => ({}),
+    itemsPerPage: 10
+})
+
+const api = useApi()
+const emit = defineEmits<{
+    rowClick: [row: Row]
+}>()
+const loading = ref(false)
+const currentPage = ref(1)
+const rows = ref<Row[]>([])
+const total = ref(0)
+
+const normalizedColumns = computed(() => {
+    if (props.columns.length > 0) {
+        return props.columns.map((column) => ({
+            key: column.key,
+            label: column.label ?? column.key,
+            format: column.format
+        }))
+    }
+
+    if (rows.value.length === 0) {
+        return []
+    }
+
+    return Object.keys(rows.value[0])
+        .filter((key) => !key.startsWith('@'))
+        .map((key) => ({
+            key,
+            label: key
+        }))
+})
+
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / props.itemsPerPage)))
+const paginationItems = computed<Array<number | '...'>>(() => {
+    const totalPagesValue = totalPages.value
+    const page = currentPage.value
+
+    if (totalPagesValue <= 7) {
+        return Array.from({ length: totalPagesValue }, (_, index) => index + 1)
+    }
+
+    const pages = new Set<number>([1, totalPagesValue, page - 1, page, page + 1])
+    const sortedPages = Array.from(pages)
+        .filter((value) => value >= 1 && value <= totalPagesValue)
+        .sort((a, b) => a - b)
+
+    const items: Array<number | '...'> = []
+    for (let i = 0; i < sortedPages.length; i++) {
+        const value = sortedPages[i]
+        const previousValue = sortedPages[i - 1]
+        if (previousValue != null && value - previousValue > 1) {
+            items.push('...')
+        }
+        items.push(value)
+    }
+
+    return items
+})
+const pageLabel = computed(() => {
+    if (total.value === 0) {
+        return '0 resultat'
+    }
+    const start = (currentPage.value - 1) * props.itemsPerPage + 1
+    const end = Math.min(currentPage.value * props.itemsPerPage, total.value)
+    return `${start}-${end} sur ${total.value}`
+})
+
+// Surveille pagination et filtres pour recharger la liste ; si les filtres changent, revient d'abord à la page 1.
+watch(
+    () => ({
+        page: currentPage.value,
+        query: props.query,
+        url: props.url,
+        itemsPerPage: props.itemsPerPage
+    }),
+    async (state, previousState) => {
+        const queryChanged = JSON.stringify(state.query ?? {}) !== JSON.stringify(previousState?.query ?? {})
+
+        if (queryChanged && state.page !== 1) {
+            currentPage.value = 1
+            return
+        }
+
+        await loadPage()
+    },
+    {immediate: true, deep: true}
+)
+
+// Construit la requête, charge les données et normalise la réponse, puis met à jour rows et total
+async function loadPage(): Promise<void> {
+    loading.value = true
+
+    try {
+        const requestQuery: Record<string, unknown> = {
+            ...props.query,
+            page: currentPage.value,
+            itemsPerPage: props.itemsPerPage
+        }
+
+        const response = await api.get<AnyCollection<Row> | Row[]>(props.url, requestQuery, {
+            headers: {
+                Accept: 'application/ld+json'
+            }
+        })
+
+        if (Array.isArray(response)) {
+            rows.value = response
+            total.value = response.length
+            return
+        }
+
+        const mappedRows = response['hydra:member'] ?? response.member ?? response.items ?? []
+        rows.value = Array.isArray(mappedRows) ? mappedRows : []
+        total.value = Number(response['hydra:totalItems'] ?? response.totalItems ?? rows.value.length)
+    } finally {
+        loading.value = false
+    }
+}
+
+function onRowClick(row: Row): void {
+    emit('rowClick', row)
+}
+
+// Lit une valeur imbriquée dans une ligne à partir d'un chemin de type "objet.sousObjet.cle".
+function readPath(source: Row, path: string): unknown {
+    return path.split('.').reduce<unknown>((acc, key) => (acc as Row | undefined)?.[key], source)
+}
+
+// Formate une valeur brute pour l'affichage dans une cellule (vide, tableau, objet ou valeur simple).
+function formatCell(value: unknown): string {
+    if (value == null || value === '') return '-'
+    if (Array.isArray(value)) return value.length ? value.map(formatCell).join(', ') : '-'
+    if (typeof value === 'object') {
+        const objectValue = value as Row
+        return String(objectValue.label ?? objectValue.name ?? objectValue.code ?? objectValue.id ?? '[object]')
+    }
+    return String(value)
+}
+
+// Résout la valeur de colonne pour une ligne et applique un formateur personnalisé s'il existe.
+function formatColumnValue(
+    row: Row,
+    column: { key: string; format?: (value: unknown, row: Row) => string }
+): string {
+    const value = readPath(row, column.key)
+    if (column.format) {
+        return column.format(value, row)
+    }
+
+    return formatCell(value)
+}
+</script>
--- a/frontend/components/ui/UiDateInput.vue
+++ b/frontend/components/ui/UiDateInput.vue
@@ -3,7 +3,7 @@
        <label
            v-if="label"
            :for="id"
-            class="font-bold uppercase text-xl text-primary-500"
+            class="font-bold uppercase text-xl"
            :class="labelClass"
        >
            {{ label }}
@@ -14,7 +14,7 @@
            :value="modelValue ?? ''"
            :disabled="disabled"
            v-bind="attrs"
-            class="border-b border-black justify-self-start text-xl text-primary-500 py-[6px] uppercase bg-transparent appearance-none h-[34px]"
+            class="border-b border-black justify-self-start text-xl py-[6px] uppercase bg-transparent appearance-none h-[34px]"
            :class="[
                isEmpty ? 'text-neutral-400' : 'text-black',
                disabled ? 'cursor-not-allowed' : 'cursor-pointer',
--- a/frontend/components/ui/UiNumberInput.vue
+++ b/frontend/components/ui/UiNumberInput.vue
@@ -3,7 +3,7 @@
        <label
            v-if="label"
            :for="id"
-            class="text-xl flex items-center gap-2 text-primary-500"
+            class="text-xl flex items-center gap-2"
            :class="labelClass"
        >
            <span
@@ -25,7 +25,7 @@
            :step="step"
            :disabled="disabled"
            v-bind="attrs"
-            class="border-b border-black text-xl bg-transparent w-16 text-primary-500"
+            class="border-b border-black text-xl bg-transparent w-16"
            :class="[
                isEmpty ? 'text-neutral-400' : 'text-black',
                disabled ? 'cursor-not-allowed' : 'cursor-text',
--- a/frontend/components/ui/UiRadioGroup.vue
+++ b/frontend/components/ui/UiRadioGroup.vue
@@ -2,7 +2,7 @@
    <div :class="['flex flex-col', wrapperClass]">
        <label
            v-if="label"
-            class="font-bold uppercase text-xl text-primary-500"
+            class="font-bold uppercase text-xl"
            :class="labelClass"
        >
            {{ label }}
@@ -16,7 +16,7 @@
                v-for="option in options"
                :key="String(option.value)"
                :for="`${id || 'radio'}-${option.value}`"
-                class="flex items-center gap-2 text-primary-500"
+                class="flex items-center gap-2"
                :class="itemClass"
            >
                <input
--- a/frontend/components/ui/UiSelect.vue
+++ b/frontend/components/ui/UiSelect.vue
@@ -3,7 +3,7 @@
        <label
            v-if="label"
            :for="id"
-            class="font-bold uppercase text-xl text-primary-500"
+            class="font-bold uppercase text-xl"
            :class="labelClass"
        >
            {{ label }}
@@ -13,7 +13,7 @@
            :value="modelValue ?? ''"
            :disabled="disabled || loading"
            v-bind="attrs"
-            class="border-b border-black justify-self-start text-xl text-primary-500 py-[6px] bg-transparent"
+            class="border-b border-black justify-self-start text-xl py-[6px] bg-transparent"
            :class="[
                isEmpty ? 'text-neutral-400' : 'text-black',
                disabled || loading ? 'cursor-not-allowed' : 'cursor-pointer',
--- a/frontend/components/ui/UiTextInput.vue
+++ b/frontend/components/ui/UiTextInput.vue
@@ -3,7 +3,7 @@
        <label
            v-if="label"
            :for="id"
-            class="font-bold uppercase text-xl text-primary-500"
+            class="font-bold uppercase text-xl"
            :class="labelClass"
        >
            {{ label }}
@@ -16,7 +16,7 @@
            :maxlength="maxlength"
            :disabled="disabled"
            v-bind="attrs"
-            class="border-b border-black text-xl py-[6px] bg-transparent text-primary-500"
+            class="border-b border-black text-xl py-[6px] bg-transparent"
            :class="[
                isEmpty ? 'text-neutral-400' : 'text-black',
                disabled ? 'cursor-not-allowed' : 'cursor-text',
--- a/frontend/components/ui/license-plate-input.vue
+++ b/frontend/components/ui/license-plate-input.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="flex flex-col">
-    <label :for="inputId" class="font-bold uppercase text-xl text-primary-500">{{ label }}</label>
+    <label :for="inputId" class="font-bold uppercase text-xl">{{ label }}</label>
      <div class="flex items-end gap-8">
          <input
              :id="inputId"
@@ -9,7 +9,7 @@
              type="text"
              :maxlength="maxLength"
              :placeholder="placeholderText"
-              class="border-b border-black flex-1 min-w-0 text-xl text-primary-500 uppercase h-[36px] py-[6px]"
+              class="border-b border-black flex-1 min-w-0 text-xl uppercase h-[30px]"
              @input="handleInput"
          />
          <UiCheckbox
--- a/frontend/components/ui/stepper.vue
+++ b/frontend/components/ui/stepper.vue
@@ -4,7 +4,7 @@
            <div
                v-for="(label, index) in labels"
                :key="label"
-                class="absolute top-0 whitespace-nowrap text-primary-500"
+                class="absolute top-0 whitespace-nowrap"
                :class="labelClass(index)"
                :style="positionStyle(index)"
            >
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -0,0 +1,112 @@
+<template>
+    <div class="min-h-screen text-neutral-900 grid grid-rows-[85px,1fr]">
+        <!-- HEADER -->
+        <header class="bg-primary-500 z-50 h-[85px]">
+            <div class="h-full w-full px-6 grid grid-cols-[auto,1fr,auto] items-center gap-8">
+                <NuxtLink to="/" class="grid place-items-center">
+          <span class="grid place-items-center bg-white text-xl font-bold uppercase text-primary-500 p-4">
+            LOGO
+          </span>
+                </NuxtLink>
+
+                <nav class="text-2xl font-bold uppercase text-white"></nav>
+
+                <NuxtLink
+                    to="/"
+                    class="text-xl font-bold uppercase text-white transition hover:opacity-80 justify-self-end"
+                >
+                    Quitter le panel admin
+                </NuxtLink>
+            </div>
+        </header>
+
+        <div class="grid grid-cols-[16rem,1fr] h-[calc(100vh-85px)] min-h-0">
+            <aside class="bg-primary-500 text-white min-h-0 flex flex-col justify-between">
+                <div class="flex flex-col gap-4 p-4 font-bold text-xl">
+                    <!-- Liste des liens à ajouter ci-dessous -->
+                    <NuxtLink
+                        to="/admin/dashboard"
+                        custom v-slot="{ href, navigate, isExactActive }">
+                        <a :href="href"
+                           @click="navigate"
+                           :class="isExactActive ? 'opacity-100' : 'opacity-50'">
+                            Tableau de bord
+                        </a>
+                    </NuxtLink>
+                    <NuxtLink
+                        to="/admin/supplier/supplier-list"
+                        custom v-slot="{ href, navigate }">
+                        <a :href="href"
+                           @click="navigate"
+                           :class="route.path.startsWith('/admin/supplier') ? 'opacity-100' : 'opacity-50'">
+                            Fournisseur
+                        </a>
+                    </NuxtLink>
+                    <NuxtLink
+                        to="/admin/carrier/carrier-list"
+                        custom v-slot="{ href, navigate }">
+                        <a :href="href"
+                           @click="navigate"
+                           :class="route.path.startsWith('/admin/carrier') ? 'opacity-100' : 'opacity-50'">
+                            Transporteur
+                        </a>
+                    </NuxtLink>
+                    <NuxtLink to="/admin/user/list" custom v-slot="{ href, navigate }">
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="route.path.startsWith('/admin/user') ? 'opacity-100' : 'opacity-50'"
+                        >
+                            Utilisateurs
+                        </a>
+                    </NuxtLink>
+                    <NuxtLink to="/admin/customer/customer-list" custom v-slot="{ href, navigate }">
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="route.path.startsWith('/admin/customer') ? 'opacity-100' : 'opacity-50'"
+                        >
+                            Clients
+                        </a>
+                    </NuxtLink>
+                </div>
+
+                <div class="p-4">
+
+                    <button
+                        @click="handleLogout"
+                        class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-bold"
+                    >
+                        Déconnexion
+                    </button>
+                    <p class="font-bold text-white text-center pt-2">
+                        v{{ version }}
+                    </p>
+                </div>
+            </aside>
+
+            <main class="min-h-0 overflow-auto px-12 py-12 ">
+                <div class="w-full ">
+                    <slot/>
+                </div>
+            </main>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import {useAuthStore} from '~/stores/auth'
+
+const auth = useAuthStore()
+const {version} = useAppVersion()
+
+const route = useRoute()
+const handleLogout = async () => {
+    try {
+        await auth.logout()
+    } finally {
+        await navigateTo('/login')
+    }
+}
+</script>
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,147 +1,54 @@
 <template>
-    <div class="min-h-screen text-neutral-900 flex flex-col">
-        <!-- HEADER -->
-        <header class="w-full bg-primary-500 py-5 px-6">
-            <div class="flex w-full items-center justify-between">
-                <!-- Burger (mobile) -->
+    <div class="min-h-screen text-neutral-900 grid grid-rows-[85px,1fr]">
+    <header class="w-full border-b border-neutral-200 bg-primary-500">
+            <div class="flex w-full items-center justify-center px-6 py-4">
                <button
                    type="button"
                    class="inline-flex items-center justify-center text-3xl text-white md:hidden"
                    aria-label="Ouvrir le menu"
                    @click="toggleMenu"
                >
-          <span aria-hidden="true" class="flex items-center">
-            <Icon name="mdi:menu" size="44"/>
-          </span>
+                    <span aria-hidden="true" class="flex items-center"><Icon name="mdi:menu" size="44"/></span>
                </button>
-
-                <!-- Logo -->
-                <NuxtLink to="/" class="shrink-0">
-          <span class="flex items-center justify-center bg-white text-xl font-bold uppercase px-6 py-4">
-            LOGO
-          </span>
-                </NuxtLink>
-
-                <!-- NAV centré (desktop) -->
-                <nav
-                    class="hidden md:flex flex-1 items-center justify-center gap-8 text-xl font-bold uppercase text-white"
-                >
-                    <NuxtLink to="/" custom v-slot="{ href, navigate }">
+                <nav class="ml-4 hidden items-center gap-8 text-2xl font-bold uppercase text-white md:flex">
+                    <NuxtLink to="/" custom v-slot="{ href, navigate, isExactActive }">
                        <a
                            :href="href"
                            @click="navigate"
-                            :class="route.path === '/'
-                ? 'opacity-100'
-                : 'opacity-65 hover:opacity-100 transition'"
+                            :class="isExactActive ? 'opacity-100' : 'opacity-50'"
                        >
                            Accueil
                        </a>
                    </NuxtLink>
-
                    <NuxtLink
+                        to="/admin/dashboard" custom v-slot="{ href, navigate, isExactActive }"
                        v-if="auth.isAdmin"
-                        to="/admin/supplier/supplier-list"
-                        custom
-                        v-slot="{ href, navigate }"
                    >
                        <a
                            :href="href"
                            @click="navigate"
-                            :class="route.path.startsWith('/admin/supplier')
-                ? 'opacity-100'
-                : 'opacity-65 hover:opacity-100 transition'"
+                            :class="isExactActive ? 'opacity-100' : 'opacity-50'"
                        >
-                            Fournisseurs
-                        </a>
-                    </NuxtLink>
-
-                    <NuxtLink
-                        v-if="auth.isAdmin"
-                        to="/admin/carrier/carrier-list"
-                        custom
-                        v-slot="{ href, navigate }"
-                    >
-                        <a
-                            :href="href"
-                            @click="navigate"
-                            :class="route.path.startsWith('/admin/carrier')
-                ? 'opacity-100'
-                : 'opacity-65 hover:opacity-100 transition'"
-                        >
-                            Transporteurs
-                        </a>
-                    </NuxtLink>
-
-                    <NuxtLink
-                        v-if="auth.isAdmin"
-                        to="/admin/user/list"
-                        custom
-                        v-slot="{ href, navigate }"
-                    >
-                        <a
-                            :href="href"
-                            @click="navigate"
-                            :class="route.path.startsWith('/admin/user')
-                ? 'opacity-100'
-                : 'opacity-65 hover:opacity-100 transition'"
-                        >
-                            Utilisateurs
-                        </a>
-                    </NuxtLink>
-
-                    <NuxtLink
-                        v-if="auth.isAdmin"
-                        to="/admin/customer/customer-list"
-                        custom
-                        v-slot="{ href, navigate }"
-                    >
-                        <a
-                            :href="href"
-                            @click="navigate"
-                            :class="route.path.startsWith('/admin/customer')
-                ? 'opacity-100'
-                : 'opacity-65 hover:opacity-100 transition'"
-                        >
-                            Clients
+                            Admin
                        </a>
                    </NuxtLink>
                </nav>
-
-                <!-- Spacer mobile (pour centrer visuellement le header si besoin) -->
+                <NuxtLink to="/" class="flex flex-1 items-center justify-center gap-3">
+                  <span
+                      class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
+                  >
+                    LOGO
+                  </span>
+                </NuxtLink>
                <div class="w-[44px] md:hidden"></div>
-
-                <!-- User dropdown à droite (desktop) -->
-                <div v-if="auth.isAuthenticated" class="ml-auto relative hidden md:flex items-center text-white group">
-                    <button
-                        type="button"
-                        class="inline-flex items-center py-2 -my-2 text-xl leading-none transition hover:opacity-80"
-                        aria-haspopup="true"
-                    >
-                        <span class="capitalize font-bold">{{ userDisplayName }}</span>
-                        <span class="ml-[6px] inline-flex items-center font-bold transition-transform group-hover:rotate-180 group-focus-within:rotate-180">
-                            <Icon name="mdi:chevron-down" size="20"/>
-                        </span>
-                    </button>
-
-                    <div
-                        class="absolute right-0 top-full z-10 w-56 rounded-md bg-primary-500 py-2 border-neutral-300 border shadow-lg
-                        opacity-0 invisible pointer-events-none transition
-                        group-hover:opacity-100 group-hover:visible group-hover:pointer-events-auto
-                        group-focus-within:opacity-100 group-focus-within:visible group-focus-within:pointer-events-auto"
-                        role="menu"
-                    >
-                        <button
-                            type="button"
-                            class="w-full px-4 py-2 text-left text-sm font-semibold text-white opacity-85 hover:opacity-100 transition"
-                            @click="handleLogout"
-                        >
-                            Déconnexion
-                        </button>
-                    </div>
-                </div>
+                <button
+                    type="button"
+                    class="ml-auto hidden text-xl font-bold uppercase text-white transition hover:opacity-80 md:inline-flex"
+                    @click="handleLogout"
+                >
+                    Déconnexion
+                </button>
            </div>
-
-            <!-- Overlay (mobile) -->
            <transition
                enter-active-class="transition duration-200 ease-out"
                enter-from-class="opacity-0"
@@ -156,8 +63,6 @@
                    @click="closeMenu"
                />
            </transition>
-
-            <!-- Drawer (mobile) -->
            <transition
                enter-active-class="transition duration-200 ease-out"
                enter-from-class="-translate-x-full"
@@ -168,7 +73,9 @@
            >
                <aside
                    v-if="isMenuOpen"
-                    class="fixed left-0 top-0 z-50 h-full w-full bg-primary-500 px-6 pb-8 pt-6 text-white shadow-xl md:hidden"
+                    class="fixed left-0 top-0 z-50 h-full w-full bg-primary-600 px-6 pb-8 pt-6 text-white shadow-xl md:hidden"
+                    role="dialog"
+                    aria-modal="true"
                >
                    <div class="flex items-center justify-between">
                        <span class="text-2xl font-bold uppercase">Menu</span>
@@ -181,27 +88,12 @@
                            <Icon name="mdi:close" size="44"/>
                        </button>
                    </div>
-
                    <nav class="mt-8 flex flex-col gap-6 text-xl font-bold uppercase">
-                        <NuxtLink to="/admin/dashboard" @click="closeMenu">Accueil</NuxtLink>
-                        <NuxtLink v-if="auth.isAdmin" to="/admin/supplier/supplier-list" @click="closeMenu">
-                            Fournisseurs
-                        </NuxtLink>
-                        <NuxtLink v-if="auth.isAdmin" to="/admin/carrier/carrier-list" @click="closeMenu">
-                            Transporteurs
-                        </NuxtLink>
-                        <NuxtLink v-if="auth.isAdmin" to="/admin/user/list" @click="closeMenu">
-                            Utilisateurs
-                        </NuxtLink>
-                        <NuxtLink v-if="auth.isAdmin" to="/admin/customer/customer-list" @click="closeMenu">
-                            Clients
-                        </NuxtLink>
+                        <NuxtLink to="/" class="opacity-100" @click="closeMenu">Accueil</NuxtLink>
                    </nav>
-
                    <button
-                        v-if="auth.isAuthenticated"
                        type="button"
-                        class="mt-6 text-xl font-bold uppercase"
+                        class="mt-5 text-xl font-bold uppercase"
                        @click="handleLogout"
                    >
                        Déconnexion
@@ -209,10 +101,10 @@
                </aside>
            </transition>
        </header>
-        <main class="mx-auto w-full max-w-[1280px] mt-16">
+        <main class="mx-auto w-full max-w-[1280px]">
            <slot/>
        </main>
-        <footer class="w-full mt-auto bg-primary-500 px-6 py-3">
+        <footer class="w-full mt-8 bg-primary-500 px-6 py-3">
            <p class="font-bold text-white text-right">v{{ version }}</p>
        </footer>
    </div>
@@ -223,11 +115,8 @@ import {useAuthStore} from '~/stores/auth'

 const route = useRoute()
 const auth = useAuthStore()
-const {version} = useAppVersion()
-
 const isMenuOpen = ref(false)
-
-const userDisplayName = computed(() => auth.user?.username ?? 'Utilisateur')
+const {version} = useAppVersion()

 const closeMenu = () => {
    isMenuOpen.value = false
--- a/frontend/pages/admin/carrier/[[id]].vue
+++ b/frontend/pages/admin/carrier/[[id]].vue
@@ -1,19 +1,19 @@

 <template>
    <form @submit.prevent="validate">
-    <div class="flex items-center justify-between">
+    <div class="flex items-center justify-between ">
        <h1 class="text-3xl font-bold uppercase">
            {{ route.params.id ? 'Modifier transporteur' : 'Ajout transporteur' }}
        </h1>

-        <UiButton
+        <button
            type="submit"
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
        >Enregistrer
-        </UiButton>
+        </button>
    </div>

-    <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 py-12">
+    <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
        <UiTextInput
            label = "nom du fournisseur"
            id="carrier-name"
@@ -33,27 +33,19 @@
 <script setup lang="ts">
 import {createCarrier, getCarrier, updateCarrier} from "~/services/carrier";
 import type {CarrierData, CarrierFormData} from "~/services/dto/carrier-data";
-import {computed} from "vue";
 const router = useRouter()
 const route = useRoute()
-const idCarrier = computed(() => resolveId(route.params.id))
+const idCarrier = Number(route.params.id)
 const isLoading = ref(false)
 const isHydrating = ref(false)

-const resolveId = (param: unknown) => {
-    const idStr = Array.isArray(param) ? param[0] : param
-    if (!idStr) return null
-    const id = Number(idStr)
-    return Number.isFinite(id) ? id : null
-}
-
 const form = reactive<CarrierFormData>({
    code:'',
    name:''
 })

 definePageMeta({
-    layout: 'default'
+    layout: 'admin'
 })

 const hydrateFromUser = (carrier: CarrierData | null) => {
@@ -67,7 +59,7 @@ const hydrateFromUser = (carrier: CarrierData | null) => {
 }

 watch(
-    () => idCarrier.value,
+    () => idCarrier,
    async (id) => {
        if (id === null) {
            return
@@ -93,8 +85,8 @@ async function validate() {

    }

-    if(idCarrier.value){
-        await updateCarrier(idCarrier.value, basePayload)
+    if(idCarrier){
+        await updateCarrier(idCarrier, basePayload)
        navigate()
        return
    }
--- a/frontend/pages/admin/carrier/carrier-list.vue
+++ b/frontend/pages/admin/carrier/carrier-list.vue
@@ -1,13 +1,11 @@
 <template>

    <div class="flex items-center justify-between ">
-            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
+            <h1 class="text-3xl font-bold uppercase">listes des transporteurs</h1>
            <NuxtLink
                to="/admin/carrier"
-                class="inline-flex items-center justify-center gap-2 text-xl uppercase bg-primary-500 text-white h-[50px] px-8 rounded"
-            >
-                <Icon name="mdi:plus" size="28"  />
-                Ajouter
+                class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            >Ajouter
            </NuxtLink>
    </div>

@@ -44,7 +42,7 @@ const goToCarrier = (id: number) => {
 }

 definePageMeta({
-    layout: 'default'
+    layout: 'admin'
 })

 onMounted(async () => {
--- a/frontend/pages/admin/customer/[[id]].vue
+++ b/frontend/pages/admin/customer/[[id]].vue
@@ -5,13 +5,13 @@
                {{ customerId ? "Modifications du client" : "Ajout d'un client" }}
            </h1>

-            <UiButton
+            <button
                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
                type="submit"
                :disabled="isLoading || !auth.isAdmin"
            >
                {{ customerId ? "Sauvegarder" : "Ajouter" }}
-            </UiButton>
+            </button>
        </div>

        <div class="grid grid-cols-2 gap-y-8 gap-x-80 mb-10 py-12">
@@ -23,14 +23,14 @@
        <div class="mx-24 mb-4 py-6 border-t border-black"></div>
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-3xl font-bold uppercase">Adresses client</h2>
-            <UiButton
+            <button
                type="button"
                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
                :disabled="customerId === null || !auth.isAdmin"
                @click="goToAddAddress"
            >
                Ajouter
-            </UiButton>
+            </button>
        </div>
        <div class="overflow-x-auto mb-10">
            <table class="w-full border-collapse">
@@ -80,7 +80,7 @@ import {createCustomer, getCustomer, updateCustomer} from "~/services/customer"
 import type {CustomerData, CustomerFormData, CustomerPayload} from "~/services/dto/customer-data"
 import {useAuthStore} from "~/stores/auth"

-definePageMeta({layout: "default"})
+definePageMeta({layout: "admin"})

 const route = useRoute()
 const router = useRouter()
--- a/frontend/pages/admin/customer/address.vue
+++ b/frontend/pages/admin/customer/address.vue
@@ -8,7 +8,7 @@ import { createAddress, getAddress, updateAddress } from "~/services/address"
 import { getCustomer, updateCustomer } from "~/services/customer"
 import type { CustomerData } from "~/services/dto/customer-data"

-definePageMeta({ layout: "default" })
+definePageMeta({ layout: "admin" })

 const route = useRoute()
 const router = useRouter()
--- a/frontend/pages/admin/customer/customer-list.vue
+++ b/frontend/pages/admin/customer/customer-list.vue
@@ -1,13 +1,12 @@
 <template>
    <div class="flex items-center justify-between">
-        <h1 class="text-3xl font-bold uppercase text-primary-500">Liste des Clients</h1>
+        <h1 class="text-3xl font-bold uppercase">Liste des Clients</h1>
        <NuxtLink
            to="/admin/customer"
-            class="inline-flex items-center justify-center gap-2 text-xl uppercase bg-primary-500 text-white h-[50px] px-8 rounded-md"
+            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
            @click="handleAddClick"
        >
-            <Icon name="mdi:plus" size="28"  />
            Ajouter
        </NuxtLink>
    </div>
@@ -94,7 +93,7 @@ import { getCustomerList } from "~/services/customer"
 import type { CustomerData } from "~/services/dto/customer-data"
 import { useAuthStore } from "~/stores/auth"

-definePageMeta({ layout: "default" })
+definePageMeta({ layout: "admin" })

 const customerList = ref<CustomerData[]>([])
 const router = useRouter()
--- a/frontend/pages/admin/dashboard.vue
+++ b/frontend/pages/admin/dashboard.vue
@@ -2,6 +2,6 @@
 </template>
 <script setup lang="ts">
 definePageMeta({
-    layout: 'default'
+    layout: 'admin'
 })
 </script>
--- a/frontend/pages/admin/supplier/[[id]].vue
+++ b/frontend/pages/admin/supplier/[[id]].vue
@@ -5,13 +5,13 @@
                {{ supplierId ? "Modifications du fournisseur" : "Ajout d'un fournisseur" }}
            </h1>

-            <UiButton
+            <button
                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
                type="submit"
                :disabled="isLoading || !auth.isAdmin"
            >
                {{ supplierId ? "Sauvegarder" : "Ajouter" }}
-            </UiButton>
+            </button>
        </div>

        <div class="grid grid-cols-2 gap-y-8 gap-x-80 mb-10 py-12">
@@ -23,14 +23,14 @@
        <div class="mx-24 mb-4 py-6 border-t border-black"></div>
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-3xl font-bold uppercase">Adresses fournisseur</h2>
-            <UiButton
+            <button
                type="button"
                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
                :disabled="supplierId === null || !auth.isAdmin"
                @click="goToAddAddress"
            >
                Ajouter
-            </UiButton>
+            </button>
        </div>
        <div class="overflow-x-auto mb-10">
            <table class="w-full border-collapse">
@@ -80,7 +80,7 @@ import {createSupplier, getSupplier, updateSupplier} from "~/services/supplier"
 import type {SupplierData, SupplierFormData, SupplierPayload} from "~/services/dto/supplier-data"
 import {useAuthStore} from "~/stores/auth"

-definePageMeta({layout: "default"})
+definePageMeta({layout: "admin"})

 const route = useRoute()
 const router = useRouter()
--- a/frontend/pages/admin/supplier/address.vue
+++ b/frontend/pages/admin/supplier/address.vue
@@ -8,7 +8,7 @@ import {createAddress, getAddress, updateAddress} from "~/services/address";
 import {getSupplier, updateSupplier} from "~/services/supplier";
 import type {SupplierData} from "~/services/dto/supplier-data";

-definePageMeta({ layout: "default" })
+definePageMeta({ layout: "admin" })

 const route = useRoute()
 const router = useRouter()
--- a/frontend/pages/admin/supplier/supplier-list.vue
+++ b/frontend/pages/admin/supplier/supplier-list.vue
@@ -1,13 +1,12 @@
 <template>
    <div class="flex items-center justify-between">
-        <h1 class="text-3xl font-bold uppercase text-primary-500">Liste des fournisseurs</h1>
+        <h1 class="text-3xl font-bold uppercase">Liste des fournisseurs</h1>
        <NuxtLink
            to="/admin/supplier"
-            class="inline-flex items-center justify-center gap-2 text-xl uppercase bg-primary-500 text-white h-[50px] px-8 rounded"
+            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
            @click="handleAddClick"
        >
-            <Icon name="mdi:plus" size="28"  />
            Ajouter
        </NuxtLink>
    </div>
@@ -90,7 +89,7 @@ import { getSupplierList } from "~/services/supplier"
 import type { SupplierData } from "~/services/dto/supplier-data"
 import { useAuthStore } from "~/stores/auth"

-definePageMeta({ layout: "default" })
+definePageMeta({ layout: "admin" })

 const supplierList = ref<SupplierData[]>([])
 const router = useRouter()
--- a/frontend/pages/admin/user/[[id]].vue
+++ b/frontend/pages/admin/user/[[id]].vue
@@ -5,15 +5,15 @@
            <h1 class="text-3xl font-bold uppercase">
                {{ userId ? "Modifications de l'utilisateur" : "Ajout d'un utilisateur" }}
            </h1>
-            <UiButton
+            <button
                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
                type="submit"
            >
                {{ userId ? 'Sauvegarder' : 'Ajouter' }}
-            </UiButton>
+            </button>
        </div>

-        <div class="grid gap-y-16 gap-x-40 py-12">
+        <div class="grid gap-y-16 gap-x-40 mb-16">
            <UiTextInput
                id="user-name"
                v-model="form.username"
@@ -39,7 +39,7 @@
 </template>
 <script setup lang="ts">
 definePageMeta({
-    layout: 'default'
+    layout: 'admin'
 })

 import {computed, reactive, ref, watch} from 'vue'
--- a/frontend/pages/admin/user/list.vue
+++ b/frontend/pages/admin/user/list.vue
@@ -1,11 +1,10 @@
 <template>
    <div class="flex items-center justify-between">
-        <h1 class="text-3xl font-bold uppercase text-primary-500">Liste des utilisateurs</h1>
+        <h1 class="text-3xl font-bold uppercase">Liste des utilisateurs</h1>
        <NuxtLink
-            class="inline-flex items-center justify-center gap-2 text-xl uppercase bg-primary-500 text-white h-[50px] px-8 rounded-md"
+            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
            @click="router.push('/admin/user/')"
        >
-            <Icon name="mdi:plus" size="28"  />
            Ajouter
        </NuxtLink>

@@ -39,7 +38,7 @@

 <script setup lang="ts">
 definePageMeta({
-    layout: 'default'
+    layout: 'admin'
 })

 import type {UserData} from "~/services/dto/user-data";
--- a/frontend/pages/datatable.vue
+++ b/frontend/pages/datatable.vue
@@ -0,0 +1,19 @@
+<template>
+    <UiDataTable
+        :columns="columns"
+        url="receptions"
+        :items-per-page="2"
+    />
+</template>
+
+<script setup lang="ts">
+const columns = [
+    {key: 'identificationNumber', label: 'Numero'},
+    {key: 'receptionDate', label: 'Date de livraison'},
+    {key: 'supplier', label: 'Fournisseur'},
+    {key: 'address.fullAddress', label: 'Adresse'},
+    {key: 'receptionType', label: 'Type'},
+    {key: 'weights', label: 'Poids', format: formatWeights}
+]
+</script>
+
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,27 +1,15 @@
 <script setup lang="ts">
 </script>
 <template>
-    <div class="flex flex-wrap justify-center pb-16 gap-12">
+    <div class="flex flex-wrap justify-center mt-8 gap-12 mb-8 md:mb-0">
        <card-link label="NOUVELLE RÉCEPTION" link="/reception" iconName="mdi:truck-outline" />
        <card-link label="NOUVELLE EXPÉDITION" link="/shipment" iconName="mdi:truck-fast-outline" />
        <card-link label="PLAN DE SITE" link="/" iconName="material-symbols:warehouse-outline-rounded" />
-        <card-link link="/reception/waiting-reception" iconName="mdi:truck-remove-outline">
-            <template #label>
-                Réceptions<br>EN ATTENTE
-            </template>
-        </card-link>
-        <card-link link="/shipment/waiting-shipment" iconName="mdi:truck-cargo-container">
-            <template #label>
-                EXPÉDITIONS<br>EN ATTENTE
-            </template>
-        </card-link>
+        <card-link label="RÉCEPTIONS EN ATTENTE" link="/reception/waiting-reception" iconName="mdi:truck-remove-outline" />
+        <card-link label="EXPÉDITIONS EN ATTENTE" link="/shipment/waiting-shipment" iconName="mdi:truck-cargo-container" />
        <card-link label="CASES" link="/" iconName="material-symbols:bottom-sheets-outline" />
        <card-link label="RÉCEPTIONS FINIES" link="/reception/finish-reception" iconName="mdi:truck-check-outline" />
        <card-link label="EXPÉDITIONS FINIES" link="/shipment/finish-shipment" iconName="mdi:truck-delivery-outline" />
-        <card-link link="/" iconName="mdi:cow">
-            <template #label>
-                PASSEPORT<br>DU BOVIN
-            </template>
-        </card-link>
+        <card-link label="PASSEPORT DU BOVIN" link="/" iconName="mdi:cow" />
    </div>
 </template>
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -39,13 +39,13 @@
        />
      </div>

-      <UiButton
+      <button
        type="submit"
        class="w-full rounded-md bg-primary-500 px-4 py-2 text-base font-semibold text-white transition hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-60"
        :disabled="isSubmitting"
      >
        Connexion
-      </UiButton>
+      </button>
          <p class="font-bold">v{{ version }}</p>
      </form>
  </div>
--- a/frontend/pages/reception/[[id]].vue
+++ b/frontend/pages/reception/[[id]].vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex justify-between h-[52px] mb-[80px]">
+    <div class="flex justify-between h-[52px] mt-16 mb-[80px]">
        <div class="flex flex-1 mr-16">
            <UiStepper
                :labels="RECEPTION_STEP_LABELS"
@@ -7,12 +7,12 @@
                @select="handleStepSelect"
            />
        </div>
-        <UiButton
+        <button
            type="button"
            class="flex flex-col justify-center uppercase text-xl bg-black text-white h-[50px] w-[272px] text-center"
            @click="saveAndHold"
        >Mettre en attente
-        </UiButton>
+        </button>
    </div>
    <ReceptionForm v-if="!storeReception || storeReception.currentStep === 0"/>
    <ReceptionWeight v-if="storeReception?.currentStep === 1" mode="gross"/>
--- a/frontend/pages/reception/finish-reception.vue
+++ b/frontend/pages/reception/finish-reception.vue
@@ -1,62 +1,34 @@
 <template>
-    <div class="flex items-center justify-start gap-10">
-            <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
-            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des réceptions finie</h1>
+    <div class="flex items-center justify-start gap-10 mt-16">
+        <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44" class="cursor-pointer"/>
+        <h1 class="text-3xl font-bold uppercase">listes des réceptions finie</h1>
    </div>

-    <div class="px-[86px]">
-        <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>Numéro</div>
-                <div>Date</div>
-                <div>Fournisseur</div>
-                <div>Adresse</div>
-                <div>Type réception</div>
-                <div>Poids</div>
-            </div>
-            <div
-                v-for="reception in receptionList"
-                :key="reception.id"
-                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
-                role="button"
-                tabindex="0"
-                @click="goToReception(reception.id)"
-            >
-                <div>{{ reception.identificationNumber}}</div>
-                <div>{{ reception.receptionDate}}</div>
-                <div>{{ reception.supplier?.name }}</div>
-                <div>{{ reception.address?.fullAddress }}</div>
-                <div>{{ reception.receptionType?.label }}</div>
-                <div>{{ formatWeighing(reception) }}</div>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        :columns="columns"
+        url="receptions"
+        :query="{ isValid: true }"
+        @row-click="goToReception"
+    />
 </template>

 <script setup lang="ts">
-import type {ReceptionData} from "~/services/dto/reception-data";
-import {getReceptionList} from "~/services/reception";
-import type {ShipmentData} from "~/services/dto/shipment-data";

-const receptionList = ref<ReceptionData[]>()
 const router = useRouter()
-
-const formatWeighing = (reception: ReceptionData) => {
-    const gross = reception.weights?.find((weight) => weight.type === 'gross')?.weight
-    const tare = reception.weights?.find((weight) => weight.type === 'tare')?.weight
-
-    if (gross == null || tare == null) {
-        return '—'
-    }
-
-    return `${gross - tare} kg`
+const columns = [
+    {key: 'identificationNumber', label: 'Numero'},
+    {key: 'receptionDate', label: 'Date de livraison'},
+    {key: 'supplier', label: 'Fournisseur'},
+    {key: 'address.fullAddress', label: 'Adresse'},
+    {key: 'receptionType', label: 'Type'},
+    {key: 'weights', label: 'Poids', format: formatWeights}
+]
+type ReceptionRow = {
+    id?: number | string
 }
-
-const goToReception = (id: number) => {
+const goToReception = (row: ReceptionRow) => {
+    const id = Number(row?.id)
+    if (!Number.isFinite(id)) return
    router.push(`/reception/update/${id}`)
 }
-
-onMounted(async () => {
-    receptionList.value = await getReceptionList(true)
-})
 </script>
--- a/frontend/pages/reception/update/[[id]].vue
+++ b/frontend/pages/reception/update/[[id]].vue
@@ -115,14 +115,14 @@
            />
        </div>
        <div class="flex justify-center mb-2">
-            <UiButton
+            <button
                v-if="auth.isAdmin"
                type="submit"
                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] mb-16"

            >
                Enregistrer
-            </UiButton>
+            </button>
        </div>
            <div class="flex justify-evenly gap-y-8 gap-x-40 mb-8 border-b border-slate-400">
                <h1
--- a/frontend/pages/reception/waiting-reception.vue
+++ b/frontend/pages/reception/waiting-reception.vue
@@ -1,13 +1,13 @@
 <template>
-    <div class="flex items-center justify-between">
+    <div class="flex items-center justify-between mt-16">
        <div class="flex items-center gap-10">
-            <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
-            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des réceptions en attente</h1>
+            <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44" class="cursor-pointer"/>
+            <h1 class="text-3xl font-bold uppercase">listes des réceptions en attente</h1>
        </div>
    </div>

    <div class="px-[86px]">
-        <div class="mt-6 border border-slate-200 mb-16">
+        <div class="mt-6 border border-slate-200 mb-16 ">
            <div class="grid grid-cols-5 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
                <div>Fournisseur</div>
                <div>Adresse</div>
--- a/frontend/pages/shipment/[[id]].vue
+++ b/frontend/pages/shipment/[[id]].vue
@@ -1,6 +1,6 @@
 <template>
    <div>
-        <div class="flex justify-between h-[52px] mb-[80px]">
+        <div class="flex justify-between h-[52px] mt-16 mb-[80px]">
            <div class="flex flex-1 mr-16">
                <UiStepper
                    :labels="SHIPMENT_STEP_LABELS"
@@ -9,12 +9,12 @@

                />
            </div>
-            <UiButton
+            <button
                type="button"
                class="flex flex-col justify-center uppercase text-xl bg-black text-white h-[50px] w-[272px] text-center"
                @click="saveAndHold"
            >Mettre en attente
-            </UiButton>
+            </button>
        </div>
        <ShipmentForm v-if="!storeShipment || storeShipment.currentStep === 0" ref="shipmentFormRef"/>
        <ShipmentWeight v-if="storeShipment?.currentStep === 1" mode="gross"/>
--- a/frontend/pages/shipment/finish-shipment.vue
+++ b/frontend/pages/shipment/finish-shipment.vue
@@ -1,47 +1,15 @@
 <template>
-    <div class="flex items-center justify-start gap-10">
-        <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
-        <h1 class="text-3xl font-bold uppercase text-primary-500">listes des expéditions finie</h1>
+    <div class="flex items-center justify-start gap-10 mt-16">
+        <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44" class="cursor-pointer"/>
+        <h1 class="text-3xl font-bold uppercase">listes des expéditions finie</h1>
    </div>

-    <div class="px-[86px]">
-        <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>Numéro</div>
-                <div>Date</div>
-                <div>Client</div>
-                <div>Adresse</div>
-                <div>Type d'expéditon</div>
-                <div>Poids</div>
-            </div>
-            <div
-                v-for="shipment in shipmentList"
-                :key="shipment
-               .id"
-                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
-                role="button"
-                tabindex="0"
-                @click="goShipment(shipment.id)"
-            >
-                <div>{{ shipment.identificationNumber }}</div>
-                <div>{{ shipment.shipmentDate }}</div>
-                <div>{{ shipment.customer?.name }}</div>
-                <div>{{ shipment.address?.fullAddress }}</div>
-                <div>
-                    <template v-if="formatBovinShipmentLines(shipment).length">
-                        <div
-                            v-for="(line, index) in formatBovinShipmentLines(shipment)"
-                            :key="index"
-                            class="leading-5"
-                        >
-                            {{ line }}
-                        </div>
-                    </template>
-                </div>
-                <div>{{ formatWeighing(shipment) }}</div>
-            </div>
-        </div>
-    </div>
+    <UiDataTable
+        :columns="columns"
+        url="shipments"
+        :query="{ isValid: true }"
+        @row-click="goToShipment"
+    />
 </template>

 <script setup lang="ts">
@@ -50,35 +18,20 @@ import {getShipmentList} from "~/services/shipment";

 const shipmentList = ref<ShipmentData[]>()
 const router = useRouter()
-
-const formatWeighing = (shipment: ShipmentData) => {
-    const gross = shipment.weights?.find((weight) => weight.type === 'gross')?.weight
-    const tare = shipment.weights?.find((weight) => weight.type === 'tare')?.weight
-
-    if (gross == null || tare == null) {
-        return '—'
-    }
-
-    return `${gross - tare} kg`
+const columns = [
+    {key: 'identificationNumber', label: 'Numero'},
+    {key: 'shipmentDate', label: 'Date de livraison'},
+    {key: 'customer', label: 'Client'},
+    {key: 'address.fullAddress', label: 'Adresse'},
+    {key: 'bovinShipments', label: 'Type', format:formatBovinShipments},
+    {key: 'weights', label: 'Poids', format: formatWeights}
+]
+type ReceptionRow = {
+    id?: number | string
 }
-
-const formatBovinShipmentLines = (shipment: ShipmentData) => {
-    if (!shipment.bovinShipments?.length) {
-        return []
-    }
-    return shipment.bovinShipments.map((entry) => {
-        const label = typeof entry.shipmentType === 'string'
-            ? entry.shipmentType
-            : entry.shipmentType?.label
-        return `${label ?? '—'} : ${entry.nbBovinSend ?? '—'}`
-    })
-}
-
-const goShipment = (id: number) => {
+const goToShipment = (row: ReceptionRow) => {
+    const id = Number(row?.id)
+    if (!Number.isFinite(id)) return
    router.push(`/shipment/update/${id}`)
 }
-
-onMounted(async () => {
-    shipmentList.value = await getShipmentList(true)
-})
 </script>
--- a/frontend/pages/shipment/waiting-shipment.vue
+++ b/frontend/pages/shipment/waiting-shipment.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="flex items-center justify-between">
+    <div class="flex items-center justify-between mt-16">
        <div class="flex items-center gap-10">
-            <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
-            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des expéditions en attente</h1>
+            <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44" class="cursor-pointer"/>
+            <h1 class="text-3xl font-bold uppercase">listes des expéditions en attente</h1>
        </div>
    </div>

--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -8,7 +8,16 @@ export default <Partial<Config>>{
      },
      colors: {
        primary: {
-          500: '#456452',
+          50: '#f6f9ea',
+          100: '#eaf2cf',
+          200: '#d6e3a4',
+          300: '#c1d47a',
+          400: '#afc85a',
+          500: '#9ebb43',
+          600: '#7e9735',
+          700: '#607228',
+          800: '#414d1a',
+          900: '#24290d'
        }
      }
    }
--- a/frontend/utils/datatable-formatters.ts
+++ b/frontend/utils/datatable-formatters.ts
@@ -0,0 +1,41 @@
+export const formatBovinShipments = (value: unknown): string => {
+    if (!Array.isArray(value) || value.length === 0) return '-'
+    return value.map((item: any) => {
+        const label = item?.shipmentType?.label ?? item?.shipmentType?.code ??
+            'Type inconnu'
+        const qty = item?.nbBovinSend ?? '-'
+        return `${label} (${qty})`
+    }).join(', ')
+}
+
+export const formatWeights = (value: unknown): string => {
+    if (!Array.isArray(value) || value.length === 0) return '-'
+
+    return value
+        .map((item: any) => {
+            const type = item?.type === 'tare'
+                ? 'Poids à vide'
+                : item?.type === 'gross'
+                    ? 'Poids à plein'
+                    : (item?.type ?? 'Poids')
+
+            const weight = item?.weight ?? '-'
+            return `${type}: ${weight}`
+        })
+        .join(', ')
+}
+
+export const formatPelletBuildings = (value: unknown): string => {
+    if (!Array.isArray(value) || value.length === 0) return '-'
+
+    return value
+        .map((item: any) => {
+            const pelletLabel =
+                item?.pelletType?.label ?? item?.pelletType?.code ?? 'Granule inconnu'
+            const buildingLabel =
+                item?.building?.label ?? item?.building?.code ?? 'Bâtiment inconnu'
+
+            return `${pelletLabel} : ${buildingLabel}`
+        })
+        .join('\n')
+}
--- a/src/Command/SeedCommand.php
+++ b/src/Command/SeedCommand.php
@@ -251,8 +251,8 @@ class SeedCommand extends Command
    private function seedShipmentTypes(): void
    {
        $shipmentTypes = [
-            ['label' => 'Boucherie', 'code' => 'BDB'],
-            ['label' => 'Équarrissage', 'code' => 'BE'],
+            ['label' => 'Bovin de boucherie', 'code' => 'BDB'],
+            ['label' => "Bovin d'équarrissage", 'code' => 'BE'],
        ];
        foreach ($shipmentTypes as $type) {
            $this->upsertByCode(ShipmentType::class, $type['code'], static function (ShipmentType $entity) use ($type) {
@@ -540,10 +540,10 @@ class SeedCommand extends Command
                'addresses' => [
                    [
                        'label'       => 'Les producteurs de la marche (LPM)',
-                        'street'      => 'Malonze',
+                        'street'      => 'Rue de Nexon',
                        'street2'     => null,
-                        'postalCode'  => '23300',
-                        'city'        => 'LA SOUTERRAINE',
+                        'postalCode'  => '87000',
+                        'city'        => 'LIMOGES',
                        'countryCode' => 'FR',
                    ],
                ],
@@ -565,15 +565,15 @@ class SeedCommand extends Command
            ],
            [
                'name'      => 'TERRENA',
-                'phone'     => '02.40.98.90.00',
-                'email'     => 'scouillaud@terrena.fr',
+                'phone'     => '02.51.67.17.98',
+                'email'     => null,
                'addresses' => [
                    [
                        'label'       => 'TERRENA',
-                        'street'      => 'LA NOELLE',
-                        'street2'     => 'BP 20199',
-                        'postalCode'  => '44155',
-                        'city'        => 'ANCENIS CEDEX',
+                        'street'      => 'La Blanchardière',
+                        'street2'     => null,
+                        'postalCode'  => '44522',
+                        'city'        => 'MESANGER',
                        'countryCode' => 'FR',
                    ],
                ],
--- a/src/DataFixtures/ReferenceFixtures.php
+++ b/src/DataFixtures/ReferenceFixtures.php
@@ -378,10 +378,10 @@ class ReferenceFixtures extends Fixture
                'addresses' => [
                    [
                        'label'       => 'Les producteurs de la marche (LPM)',
-                        'street'      => 'Malonze',
+                        'street'      => 'Rue de Nexon',
                        'street2'     => null,
-                        'postalCode'  => '23300',
-                        'city'        => 'LA SOUTERRAINE',
+                        'postalCode'  => '87000',
+                        'city'        => 'LIMOGES',
                        'countryCode' => 'FR',
                    ],
                ],
@@ -403,15 +403,15 @@ class ReferenceFixtures extends Fixture
            ],
            [
                'name'      => 'TERRENA',
-                'phone'     => '02.40.98.90.00',
-                'email'     => 'scouillaud@terrena.fr',
+                'phone'     => '02.51.67.17.98',
+                'email'     => null,
                'addresses' => [
                    [
                        'label'       => 'TERRENA',
-                        'street'      => 'LA NOELLE',
-                        'street2'     => 'BP 20199',
-                        'postalCode'  => '44155',
-                        'city'        => 'ANCENIS CEDEX',
+                        'street'      => 'La Blanchardière',
+                        'street2'     => null,
+                        'postalCode'  => '44522',
+                        'city'        => 'MESANGER',
                        'countryCode' => 'FR',
                    ],
                ],
--- a/src/Entity/Supplier.php
+++ b/src/Entity/Supplier.php
@@ -26,7 +26,7 @@ use Symfony\Component\Serializer\Attribute\Groups;
        ),
        new GetCollection(
            normalizationContext: ['groups' => ['supplier:read']],
-            security: "is_granted('ROLE_USER')"
+            security: "is_granted('ROLE_ADMIN')"
        ),
        new Post(
            normalizationContext: ['groups' => ['supplier:read']],
Author	SHA1	Message	Date
kevin	316a20c43a	feat : creation du composant datatable (WIP)	2026-02-16 16:05:04 +01:00
kevin	d16a81630c	Merge branch 'develop' into feat/266-creation-composant-datatable	2026-02-16 08:06:02 +01:00
kevin	d8c0a8b8e3	feat : creation du composant datatable (WIP)	2026-02-13 16:06:55 +01:00