chore: bump version to v0.0.48

|  | Layout-Admin |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #28
Reviewed-by: Autin <tristan@yuno.malio.fr>
Co-authored-by: Matteo <matteo@yuno.malio.fr>
Co-committed-by: Matteo <matteo@yuno.malio.fr>

CHANGELOG.md

@@ -46,6 +46,7 @@ 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
 

config/packages/api_platform.yaml

@@ -3,8 +3,6 @@ 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:

config/reference.php

@@ -1,5 +1,7 @@
 <?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;
@@ -1470,7 +1472,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 @type in updates (including delete ones). // Default: false
+ *         include_type?: bool|Param, // Always include @var in updates (including delete ones). // Default: false
  *     },
  *     messenger?: bool|array{
  *         enabled?: bool|Param, // Default: false

config/version.yaml

@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.0.47'
+    app.version: '0.0.48'

frontend/components/ui/UiDataTable.vue

@@ -1,268 +0,0 @@
-<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>

frontend/layouts/admin.vue

@@ -1,112 +0,0 @@
-<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>

frontend/layouts/default.vue

@@ -1,54 +1,148 @@
 <template>
-    <div class="min-h-screen text-neutral-900 grid grid-rows-[85px,1fr]">
+    <div class="min-h-screen text-neutral-900 flex flex-col">
-    <header class="w-full border-b border-neutral-200 bg-primary-500">
+        <!-- HEADER -->
-            <div class="flex w-full items-center justify-center px-6 py-4">
+        <header class="w-full bg-primary-500 py-5 px-6">
+            <div class="flex w-full items-center ">
+                <!-- Burger (mobile) -->
                 <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>
-                <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 }">
+                <!-- 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 }">
                         <a
                             :href="href"
                             @click="navigate"
-                            :class="isExactActive ? 'opacity-100' : 'opacity-50'"
+                            :class="route.path === '/'
+                ? 'opacity-100'
+                : 'opacity-65 hover:opacity-100 transition'"
                         >
                             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="isExactActive ? 'opacity-100' : 'opacity-50'"
+                            :class="route.path.startsWith('/admin/supplier')
+                ? 'opacity-100'
+                : 'opacity-65 hover:opacity-100 transition'"
                         >
-                            Admin
+                            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
                         </a>
                     </NuxtLink>
                 </nav>
-                <NuxtLink to="/" class="flex flex-1 items-center justify-center gap-3">
+
-                  <span
+                <!-- Spacer mobile (pour centrer visuellement le header si besoin) -->
-                      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>
-                <button
+
-                    type="button"
+                <!-- User dropdown à droite (desktop) -->
-                    class="ml-auto hidden text-xl font-bold uppercase text-white transition hover:opacity-80 md:inline-flex"
+                <div v-if="auth.isAuthenticated" class="ml-auto relative hidden md:flex items-center text-white">
-                    @click="handleLogout"
+                    <button
-                >
+                        type="button"
-                    Déconnexion
+                        class="inline-flex items-center text-xl leading-none transition hover:opacity-80"
-                </button>
+                        @click="toggleUserMenu"
+                        aria-haspopup="true"
+                        :aria-expanded="isUserMenuOpen ? 'true' : 'false'"
+                    >
+                        <span class="capitalize font-bold">{{ userDisplayName }}</span>
+                        <span class="ml-[6px] inline-flex items-center font-bold">
+                            <Icon v-if="isUserMenuOpen" name="mdi:chevron-up" size="20"/>
+                            <Icon v-else name="mdi:chevron-down" size="20"/>
+                        </span>
+                    </button>
+
+                    <div
+                        v-if="isUserMenuOpen"
+                        class="absolute right-0 top-full z-10 mt-2 w-56 rounded-md bg-primary-500 py-2 border-neutral-300 border shadow-lg"
+                        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>
             </div>
+
+            <!-- Overlay (mobile) -->
             <transition
                 enter-active-class="transition duration-200 ease-out"
                 enter-from-class="opacity-0"
@@ -63,6 +157,8 @@
                     @click="closeMenu"
                 />
             </transition>
+
+            <!-- Drawer (mobile) -->
             <transition
                 enter-active-class="transition duration-200 ease-out"
                 enter-from-class="-translate-x-full"
@@ -88,12 +184,27 @@
                             <Icon name="mdi:close" size="44"/>
                         </button>
                     </div>
+
                     <nav class="mt-8 flex flex-col gap-6 text-xl font-bold uppercase">
-                        <NuxtLink to="/" class="opacity-100" @click="closeMenu">Accueil</NuxtLink>
+                        <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>
                     </nav>
+
                     <button
+                        v-if="auth.isAuthenticated"
                         type="button"
-                        class="mt-5 text-xl font-bold uppercase"
+                        class="mt-6 text-xl font-bold uppercase"
                         @click="handleLogout"
                     >
                         Déconnexion
@@ -101,10 +212,12 @@
                 </aside>
             </transition>
         </header>
-        <main class="mx-auto w-full max-w-[1280px]">
+
+        <main class="mx-auto w-full max-w-[1280px] py-2 flex-1">
             <slot/>
         </main>
-        <footer class="w-full mt-8 bg-primary-500 px-6 py-3">
+
+        <footer class="w-full mt-auto bg-primary-500 px-6 py-3">
             <p class="font-bold text-white text-right">v{{ version }}</p>
         </footer>
     </div>
@@ -115,15 +228,27 @@ import {useAuthStore} from '~/stores/auth'
 
 const route = useRoute()
 const auth = useAuthStore()
-const isMenuOpen = ref(false)
 const {version} = useAppVersion()
 
+const isMenuOpen = ref(false)
+const isUserMenuOpen = ref(false)
+
+const userDisplayName = computed(() => auth.user?.username ?? 'Utilisateur')
+
 const closeMenu = () => {
     isMenuOpen.value = false
 }
 
 const toggleMenu = () => {
     isMenuOpen.value = !isMenuOpen.value
+    // évite d’avoir deux menus ouverts en même temps
+    if (isMenuOpen.value) isUserMenuOpen.value = false
+}
+
+const toggleUserMenu = () => {
+    isUserMenuOpen.value = !isUserMenuOpen.value
+    // idem
+    if (isUserMenuOpen.value) isMenuOpen.value = false
 }
 
 const handleLogout = async () => {
@@ -131,6 +256,7 @@ const handleLogout = async () => {
         await auth.logout()
     } finally {
         closeMenu()
+        isUserMenuOpen.value = false
         await navigateTo('/login')
     }
 }

frontend/pages/admin/carrier/[[id]].vue

@@ -45,7 +45,7 @@ const form = reactive<CarrierFormData>({
 })
 
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 
 const hydrateFromUser = (carrier: CarrierData | null) => {

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

@@ -42,7 +42,7 @@ const goToCarrier = (id: number) => {
 }
 
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 
 onMounted(async () => {

frontend/pages/admin/customer/[[id]].vue

@@ -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: "admin"})
+definePageMeta({layout: "default"})
 
 const route = useRoute()
 const router = useRouter()

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: "admin" })
+definePageMeta({ layout: "default" })
 
 const route = useRoute()
 const router = useRouter()

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

@@ -93,7 +93,7 @@ import { getCustomerList } from "~/services/customer"
 import type { CustomerData } from "~/services/dto/customer-data"
 import { useAuthStore } from "~/stores/auth"
 
-definePageMeta({ layout: "admin" })
+definePageMeta({ layout: "default" })
 
 const customerList = ref<CustomerData[]>([])
 const router = useRouter()

frontend/pages/admin/dashboard.vue

@@ -2,6 +2,6 @@
 </template>
 <script setup lang="ts">
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 </script>

frontend/pages/admin/supplier/[[id]].vue

@@ -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: "admin"})
+definePageMeta({layout: "default"})
 
 const route = useRoute()
 const router = useRouter()

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: "admin" })
+definePageMeta({ layout: "default" })
 
 const route = useRoute()
 const router = useRouter()

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

@@ -89,7 +89,7 @@ import { getSupplierList } from "~/services/supplier"
 import type { SupplierData } from "~/services/dto/supplier-data"
 import { useAuthStore } from "~/stores/auth"
 
-definePageMeta({ layout: "admin" })
+definePageMeta({ layout: "default" })
 
 const supplierList = ref<SupplierData[]>([])
 const router = useRouter()

frontend/pages/admin/user/[[id]].vue

@@ -39,7 +39,7 @@
 </template>
 <script setup lang="ts">
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 
 import {computed, reactive, ref, watch} from 'vue'

frontend/pages/admin/user/list.vue

@@ -38,7 +38,7 @@
 
 <script setup lang="ts">
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 
 import type {UserData} from "~/services/dto/user-data";

frontend/pages/datatable.vue

@@ -1,19 +0,0 @@
-<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>
-

frontend/pages/reception/finish-reception.vue

@@ -1,34 +1,58 @@
 <template>
     <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"/>
+            <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>
+            <h1 class="text-3xl font-bold uppercase">listes des réceptions finie</h1>
     </div>
 
-    <UiDataTable
+    <div class="px-[86px]">
-        :columns="columns"
+        <div class="mt-6 border border-slate-200 mb-16 ">
-        url="receptions"
+            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-        :query="{ isValid: true }"
+                <div>Numéro</div>
-        @row-click="goToReception"
+                <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>Plein : {{ formatWeighing(reception, 'gross') }} <br> Vide : {{ formatWeighing(reception, 'tare') }}</div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
+import type {ReceptionData} from "~/services/dto/reception-data";
+import {getReceptionList} from "~/services/reception";
 
+const receptionList = ref<ReceptionData[]>()
 const router = useRouter()
-const columns = [
+
-    {key: 'identificationNumber', label: 'Numero'},
+const formatWeighing = (reception: ReceptionData, type: 'gross' | 'tare') => {
-    {key: 'receptionDate', label: 'Date de livraison'},
+    const entry = reception.weights?.find((weight) => weight.type === type)
-    {key: 'supplier', label: 'Fournisseur'},
+    if (!entry || entry.weight == null || entry.dsd == null) {
-    {key: 'address.fullAddress', label: 'Adresse'},
+        return '—'
-    {key: 'receptionType', label: 'Type'},
+    }
-    {key: 'weights', label: 'Poids', format: formatWeights}
+    return `${entry.weight} kg`
-]
-type ReceptionRow = {
-    id?: number | string
 }
-const goToReception = (row: ReceptionRow) => {
+
-    const id = Number(row?.id)
+const goToReception = (id: number) => {
-    if (!Number.isFinite(id)) return
     router.push(`/reception/update/${id}`)
 }
+
+onMounted(async () => {
+    receptionList.value = await getReceptionList(true)
+})
 </script>

frontend/pages/shipment/finish-shipment.vue

@@ -4,12 +4,44 @@
         <h1 class="text-3xl font-bold uppercase">listes des expéditions finie</h1>
     </div>
 
-    <UiDataTable
+    <div class="px-[86px]">
-        :columns="columns"
+        <div class="mt-6 border border-slate-200 mb-16 ">
-        url="shipments"
+            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-        :query="{ isValid: true }"
+                <div>Numéro</div>
-        @row-click="goToShipment"
+                <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>Vide : {{ formatWeighing(shipment, 'tare') }} <br>  Plein :{{ formatWeighing(shipment, 'gross') }}</div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -18,20 +50,32 @@ import {getShipmentList} from "~/services/shipment";
 
 const shipmentList = ref<ShipmentData[]>()
 const router = useRouter()
-const columns = [
+
-    {key: 'identificationNumber', label: 'Numero'},
+const formatWeighing = (shipment: ShipmentData, type: 'gross' | 'tare') => {
-    {key: 'shipmentDate', label: 'Date de livraison'},
+    const entry = shipment.weights?.find((weight) => weight.type === type)
-    {key: 'customer', label: 'Client'},
+    if (!entry || entry.weight == null || entry.dsd == null) {
-    {key: 'address.fullAddress', label: 'Adresse'},
+        return '—'
-    {key: 'bovinShipments', label: 'Type', format:formatBovinShipments},
+    }
-    {key: 'weights', label: 'Poids', format: formatWeights}
+    return `${entry.weight} kg`
-]
-type ReceptionRow = {
-    id?: number | string
 }
-const goToShipment = (row: ReceptionRow) => {
+
-    const id = Number(row?.id)
+const formatBovinShipmentLines = (shipment: ShipmentData) => {
-    if (!Number.isFinite(id)) return
+    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) => {
     router.push(`/shipment/update/${id}`)
 }
+
+onMounted(async () => {
+    shipmentList.value = await getShipmentList(true)
+})
 </script>

frontend/utils/datatable-formatters.ts

@@ -1,41 +0,0 @@
-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')
-}