Merge branch 'refs/heads/develop' into feat/332-refonte-reception-terminee

# Conflicts: # .idea/workspace.xml # CHANGELOG.md # frontend/pages/reception/update/[[id]].vue
2026-02-26 09:14:50 +01:00
parent e1f7d28f0d 6766985713
commit a4b48712fc
52 changed files with 2688 additions and 110 deletions
--- a/frontend/components/address.vue
+++ b/frontend/components/address.vue
@@ -8,11 +8,12 @@
            </div>

            <button
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
                type="submit"
                :disabled="isLoading"
            >
-                {{ props.address? "Sauvegarder" : "Ajouter" }}
+                <Icon :name="props.address ? 'mdi:check' : 'mdi:plus'" size="28" />
+                {{ props.address? "Valider" : "Ajouter" }}
            </button>
        </div>

@@ -22,7 +23,7 @@
            <UiTextInput id="address-street2" v-model="form.street2" label="Complément" />
            <UiTextInput id="address-postalCode" v-model="form.postalCode" label="Code postal" />
            <UiTextInput id="address-city" v-model="form.city" label="Ville" />
-            <UiTextInput id="address-country" v-model="form.countryCode" label="Pays" />
+            <UiTextInput id="address-country" v-model="form.countryCode" label="Pays (code)" />
        </div>
    </form>
 </template>
--- a/frontend/components/reception/reception-bovine-received.vue
+++ b/frontend/components/reception/reception-bovine-received.vue
@@ -31,11 +31,14 @@
                />
            </div>
        </div>
-        <button
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-            @click="goNext"
-        >Valider
-        </button>
+        <div class="flex justify-center">
+            <UiButton
+                type="submit"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+                @click="goNext"
+            >Valider
+            </UiButton>
+        </div>
    </div>
 </template>
 <script setup lang="ts">
--- a/frontend/components/reception/reception-product-received.vue
+++ b/frontend/components/reception/reception-product-received.vue
@@ -64,11 +64,14 @@
                </div>
            </div>
        </div>
-        <button
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-            @click="goNext"
-        >Valider
-        </button>
+        <div class="flex justify-center">
+            <UiButton
+                type="submit"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+                @click="goNext"
+            >Valider
+            </UiButton>
+        </div>
    </div>
 </template>

--- a/frontend/components/shipment/shipment-form.vue
+++ b/frontend/components/shipment/shipment-form.vue
@@ -92,7 +92,7 @@
            <!-- Plaque d'immatriculation (hors LIOT)        -->
            <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
                <UiLicensePlateInput
-                    v-model="form.licencePlate"
+                    v-model="form.licensePlate"
                    v-model:allowAny="allowAnyLicensePlate"
                />
            </div>
@@ -193,7 +193,7 @@ const form = reactive<ShipmentFormData>({
    carrierId: '',
    driverId: '',
    vehicleId: '',
-    licencePlate: '',
+    licensePlate: '',
 })
 // Adresses liées au client sélectionné
 const customerAddresses = computed<AddressData[]>(() => {
@@ -315,7 +315,7 @@ watch(
    () => shipmentStore.current,
    (shipment) => {
        isHydrating.value = true
-        form.licencePlate = shipment?.licencePlate ?? ''
+        form.licensePlate = shipment?.licensePlate ?? ''
        form.shipmentDate = shipment?.shipmentDate ?? new Date().toISOString().slice(0, 10)
        form.userId = shipment?.user?.id ? String(shipment.user.id) :
            form.userId
@@ -441,19 +441,19 @@ watch(
            (vehicle) => String(vehicle.id) === form.vehicleId
        )
        if (selected) {
-            form.licencePlate = selected.plate
+            form.licensePlate = selected.plate
            allowAnyLicensePlate.value = false
        }
    }
 )
 watch(
-    () => [form.licencePlate, form.carrierId, vehicles.value],
+    () => [form.licensePlate, form.carrierId, vehicles.value],
    () => {
        if (!isLiotCarrier.value || form.vehicleId) {
            return
        }
        const match = filteredVehicles.value.find(
-            (vehicle) => vehicle.plate === form.licencePlate
+            (vehicle) => vehicle.plate === form.licensePlate
        )
        if (match) {
            form.vehicleId = String(match.id)
@@ -462,7 +462,7 @@ watch(
 )

 const buildPayload = () => {
-    const normalizedLicensePlate = form.licencePlate.trim()
+    const normalizedLicensePlate = form.licensePlate.trim()
    const normalizedShipmentDate = form.shipmentDate.trim()
    const normalizedCustomerId = form.customerId.trim()
    const normalizedTruckId = form.truckId.trim()
@@ -498,7 +498,7 @@ const buildPayload = () => {
        Math.trunc(rawQuantity)) : 0

    return {
-        licencePlate: normalizedLicensePlate,
+        licensePlate: normalizedLicensePlate,
        shipmentDate: normalizedShipmentDate,
        customer: customerIri,
        truck: truckIri,
--- a/frontend/components/shipment/shipment-weight.vue
+++ b/frontend/components/shipment/shipment-weight.vue
@@ -75,7 +75,7 @@ const printReceipt = async () => {

    await saveWeight()
    const shipment = shipmentStore.current
-    const filename = `${shipment.identificationNumber ?? shipment.id}_${shipment.customer?.label ?? 'client'}_${shipment.licencePlate ?? 'immat'}.pdf`
+    const filename = `${shipment.identificationNumber ?? shipment.id}_${shipment.customer?.label ?? 'client'}_${shipment.licensePlate ?? 'immat'}.pdf`
    await printPdf(`/shipments/${shipment.id}/receipt`, filename)

    // Laisse le temps a la boite de dialogue d'impression de s'ouvrir.
--- a/frontend/composables/useWeighing.ts
+++ b/frontend/composables/useWeighing.ts
@@ -111,7 +111,7 @@ export const useWeighingShipment = ({

    const displayWeight = computed(() => weightData.value?.weight ?? currentWeightEntry.value?.weight ?? null)
    const displayDsd = computed(() => weightData.value?.dsd ?? currentWeightEntry.value?.dsd ?? '-')
-    const title = computed(() => (modeShipment === 'gross' ? 'Pesée à plein' : 'Pesée à vide'))
+    const title = computed(() => (modeShipment === 'gross' ? 'Pesée à vide' : 'Pesée à plein'))
    const showLoadingBox = computed(
        () => isFetching.value || (displayWeight.value === null && currentWeightEntry.value === null)
    )
--- a/frontend/pages/admin/bovin/[[id]].vue
+++ b/frontend/pages/admin/bovin/[[id]].vue
@@ -8,10 +8,10 @@
            <UiButton
                type="submit"
                :disabled="isLoading || isHydrating"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] hover:opacity-80"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
            >
-                <Icon name="mdi:check" size="28" />
-                {{ isEdit ? 'Modifier' : 'Ajouter' }}
+                <Icon :name="isEdit ? 'mdi:check' : 'mdi:plus'" size="28" />
+                {{ isEdit ? 'Valider' : 'Ajouter' }}
            </UiButton>
        </div>

--- a/frontend/pages/admin/carrier/[[id]].vue
+++ b/frontend/pages/admin/carrier/[[id]].vue
@@ -8,8 +8,10 @@

        <UiButton
            type="submit"
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
-        >Enregistrer
+            class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2 justify-self-end"
+        >
+            <Icon name="mdi:check" size="28" />
+            Valider
        </UiButton>
    </div>

@@ -52,10 +54,6 @@ const form = reactive<CarrierFormData>({
    name:''
 })

-definePageMeta({
-    layout: 'default'
-})
-
 const hydrateFromUser = (carrier: CarrierData | null) => {
    if (!carrier) {
        return
--- a/frontend/pages/admin/carrier/carrier-list.vue
+++ b/frontend/pages/admin/carrier/carrier-list.vue
@@ -4,7 +4,7 @@
            <h1 class="text-3xl font-bold uppercase text-primary-500">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"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
            >
                <Icon name="mdi:plus" size="28"  />
                Ajouter
@@ -43,10 +43,6 @@ const goToCarrier = (id: number) => {
    router.push(`/admin/carrier/${id}`)
 }

-definePageMeta({
-    layout: 'default'
-})
-
 onMounted(async () => {
    carrierList.value = await getCarrierList(false)
 })
--- a/frontend/pages/admin/customer/[[id]].vue
+++ b/frontend/pages/admin/customer/[[id]].vue
@@ -6,11 +6,12 @@
            </h1>

            <UiButton
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
                type="submit"
                :disabled="isLoading || !auth.isAdmin"
            >
-                {{ customerId ? "Sauvegarder" : "Ajouter" }}
+                <Icon :name="customerId ? 'mdi:check' : 'mdi:plus'" size="28" />
+                {{ customerId ? "Valider" : "Ajouter" }}
            </UiButton>
        </div>

@@ -25,10 +26,11 @@
            <h2 class="text-3xl font-bold uppercase">Adresses client</h2>
            <UiButton
                type="button"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
                :disabled="customerId === null || !auth.isAdmin"
                @click="goToAddAddress"
            >
+                <Icon name="mdi:plus" size="28" />
                Ajouter
            </UiButton>
        </div>
@@ -80,8 +82,6 @@ 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"})
-
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
--- a/frontend/pages/admin/customer/address.vue
+++ b/frontend/pages/admin/customer/address.vue
@@ -8,8 +8,6 @@ import { createAddress, getAddress, updateAddress } from "~/services/address"
 import { getCustomer, updateCustomer } from "~/services/customer"
 import type { CustomerData } from "~/services/dto/customer-data"

-definePageMeta({ layout: "default" })
-
 const route = useRoute()
 const router = useRouter()
 const customerId = computed(() => Number(route.query.customerId))
--- a/frontend/pages/admin/customer/customer-list.vue
+++ b/frontend/pages/admin/customer/customer-list.vue
@@ -3,7 +3,7 @@
        <h1 class="text-3xl font-bold uppercase text-primary-500">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="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
            @click="handleAddClick"
        >
@@ -94,8 +94,6 @@ import { getCustomerList } from "~/services/customer"
 import type { CustomerData } from "~/services/dto/customer-data"
 import { useAuthStore } from "~/stores/auth"

-definePageMeta({ layout: "default" })
-
 const customerList = ref<CustomerData[]>([])
 const router = useRouter()
 const auth = useAuthStore()
--- a/frontend/pages/admin/dashboard.vue
+++ b/frontend/pages/admin/dashboard.vue
@@ -1,7 +0,0 @@
-<template>
-</template>
-<script setup lang="ts">
-definePageMeta({
-    layout: 'default'
-})
-</script>
--- a/frontend/pages/admin/supplier/[[id]].vue
+++ b/frontend/pages/admin/supplier/[[id]].vue
@@ -6,11 +6,12 @@
            </h1>

            <UiButton
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
                type="submit"
                :disabled="isLoading || !auth.isAdmin"
            >
-                {{ supplierId ? "Sauvegarder" : "Ajouter" }}
+                <Icon :name="supplierId ? 'mdi:check' : 'mdi:plus'" size="28" />
+                {{ supplierId ? "Valider" : "Ajouter" }}
            </UiButton>
        </div>

@@ -25,10 +26,11 @@
            <h2 class="text-3xl font-bold uppercase">Adresses fournisseur</h2>
            <UiButton
                type="button"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
                :disabled="supplierId === null || !auth.isAdmin"
                @click="goToAddAddress"
            >
+                <Icon name="mdi:plus" size="28" />
                Ajouter
            </UiButton>
        </div>
@@ -80,8 +82,6 @@ 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"})
-
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
--- a/frontend/pages/admin/supplier/address.vue
+++ b/frontend/pages/admin/supplier/address.vue
@@ -8,8 +8,6 @@ import {createAddress, getAddress, updateAddress} from "~/services/address";
 import {getSupplier, updateSupplier} from "~/services/supplier";
 import type {SupplierData} from "~/services/dto/supplier-data";

-definePageMeta({ layout: "default" })
-
 const route = useRoute()
 const router = useRouter()
 const supplierId = computed(() => { return Number(route.query.supplierId) })
--- a/frontend/pages/admin/supplier/supplier-list.vue
+++ b/frontend/pages/admin/supplier/supplier-list.vue
@@ -3,7 +3,7 @@
        <h1 class="text-3xl font-bold uppercase text-primary-500">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="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
            @click="handleAddClick"
        >
@@ -90,8 +90,6 @@ import { getSupplierList } from "~/services/supplier"
 import type { SupplierData } from "~/services/dto/supplier-data"
 import { useAuthStore } from "~/stores/auth"

-definePageMeta({ layout: "default" })
-
 const supplierList = ref<SupplierData[]>([])
 const router = useRouter()
 const auth = useAuthStore()
--- a/frontend/pages/admin/user/[[id]].vue
+++ b/frontend/pages/admin/user/[[id]].vue
@@ -6,10 +6,11 @@
                {{ userId ? "Modifications de l'utilisateur" : "Ajout d'un utilisateur" }}
            </h1>
            <UiButton
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
                type="submit"
            >
-                {{ userId ? 'Sauvegarder' : 'Ajouter' }}
+                <Icon :name="userId ? 'mdi:check' : 'mdi:plus'" size="28" />
+                {{ userId ? 'Valider' : 'Ajouter' }}
            </UiButton>
        </div>

@@ -38,10 +39,6 @@
    </form>
 </template>
 <script setup lang="ts">
-definePageMeta({
-    layout: 'default'
-})
-
 import {computed, reactive, ref, watch} from 'vue'
 import {ROLE} from '~/utils/constants'
 import {createUser, updateUser, getUser} from '~/services/auth'
--- a/frontend/pages/admin/user/list.vue
+++ b/frontend/pages/admin/user/list.vue
@@ -2,8 +2,8 @@
    <div class="flex items-center justify-between">
        <h1 class="text-3xl font-bold uppercase text-primary-500">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"
-            @click="router.push('/admin/user/')"
+            to="/admin/user"
+            class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
        >
            <Icon name="mdi:plus" size="28"  />
            Ajouter
@@ -38,10 +38,6 @@


 <script setup lang="ts">
-definePageMeta({
-    layout: 'default'
-})
-
 import type {UserData} from "~/services/dto/user-data";
 import {getAdminUsers} from "~/services/auth";
 import {ROLE} from "~/utils/constants";
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -4,7 +4,7 @@
    <div class="flex flex-wrap justify-center pb-16 gap-12">
        <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 label="PLAN DE SITE" link="/infrastructure/building" iconName="material-symbols:warehouse-outline-rounded" />
        <card-link link="/reception/waiting-reception" iconName="mdi:truck-remove-outline">
            <template #label>
                Réceptions<br>EN ATTENTE
@@ -15,7 +15,7 @@
                EXPÉDITIONS<br>EN ATTENTE
            </template>
        </card-link>
-        <card-link label="CASES" link="/" iconName="material-symbols:bottom-sheets-outline" />
+        <card-link label="CASES" link="/infrastructure/case" 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">
--- a/frontend/pages/infrastructure/building.vue
+++ b/frontend/pages/infrastructure/building.vue
@@ -0,0 +1,242 @@
+<template>
+    <div class="min-h-screen">
+        <!-- En-tête de page avec retour et titre -->
+        <div class="flex items-center justify-between mb-8">
+            <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">bâtiments</h1>
+            </div>
+        </div>
+
+        <div class="px-[86px] space-y-6">
+            <!-- Liste des bâtiments + rendu du plan de chaque bâtiment -->
+            <div
+                v-for="entry in buildingLayouts"
+                :key="entry.building.id"
+            >
+                <div class="font-semibold tracking-wide text-primary-500">
+                    {{ entry.building.label || `Bâtiment ${entry.building.id}` }}
+                </div>
+
+                <div class="py-4">
+                    <!-- Aucun layout disponible pour ce bâtiment -->
+                    <div v-if="!entry.layout" class="text-sm text-slate-400">
+                        Aucun plan de bâtiment.
+                    </div>
+
+                    <!-- Grille CSS : les cases sont positionnées via spanStyle -->
+                    <div v-else class="overflow-auto">
+                        <div class="grid" :style="entry.gridStyle">
+                            <NuxtLink
+                                v-for="cell in entry.cells"
+                                :key="cell.key"
+                                class="relative text-white flex h-[50px] items-center justify-center border-y-[3px] border-y-black bg-white hover:opacity-85 focus-visible:outline-none"
+                                :class="[cell.sideBorderClass, activeLegendStatutId !== null && cell.caseStatusId !== activeLegendStatutId ? 'opacity-35 hover:opacity-70' : '']"
+                                :style="[cell.spanStyle, cell.sideBorderStyle]"
+                                :to="cell.caseId ? `/infrastructure/case?id=${cell.caseId}` : '/infrastructure/case'"
+                                :title="cell.caseStatusLabel ?? undefined"
+                            >
+                                <!-- Le blanc latéral est géré sur ce bloc interne (conditionnel par voisinage) -->
+                                <div
+                                    class="flex h-full w-full items-center justify-center bg-white"
+                                    :class="cell.contentInsetClass"
+                                    :style="cell.caseStyle"
+                                >
+                                    <!-- Numéro de case -->
+                                    {{ cell.display }}
+                                </div>
+                            </NuxtLink>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Légende : survol d'un statut => atténue les autres cases -->
+            <div class="py-4">
+                <!-- 3 zones fixes pour forcer gauche / centre / droite sur toute la largeur -->
+                <div class="grid w-full grid-cols-3 gap-3">
+                    <div
+                        v-for="(statut, index) in statutLegend"
+                        :key="statut.id"
+                        class="flex min-w-0 cursor-pointer items-center gap-2 py-1"
+                        :class="[
+                            index === 0 ? 'justify-self-start' : '',
+                            index === statutLegend.length - 1 ? 'justify-self-end' : '',
+                            index > 0 && index < statutLegend.length - 1 ? 'justify-self-center' : ''
+                        ]"
+                        @mouseenter="activeLegendStatutId = statut.id"
+                        @mouseleave="activeLegendStatutId = null"
+                    >
+                        <span
+                            class="h-5 w-5 border border-slate-300"
+                            :style="statut.couleur ? { backgroundColor: statut.couleur } : {}"
+                        ></span>
+                        <span class="truncate text-sm uppercase text-slate-700">
+                            {{ statut.label }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {BuildingData} from "~/services/dto/building-data"
+import type {BuildingLayoutData} from "~/services/dto/building-layout-data"
+import type {BuildingCasePositionData} from "~/services/dto/building-case-position-data"
+import type {BuildingCaseStatusData} from "~/services/dto/building-case-status-data"
+import {getBuildingList} from "~/services/building"
+import {getStatutList} from "~/services/statut"
+
+definePageMeta({layout: "default"})
+
+const router = useRouter()
+// Données brutes chargées depuis l'API
+const buildingList = ref<BuildingData[]>([])
+const statutLegend = ref<BuildingCaseStatusData[]>([])
+// Statut actuellement survolé dans la légende (pour filtrage visuel)
+const activeLegendStatutId = ref<number | null>(null)
+// Modèle de vue prêt pour le template (layout + cellules + styles de grille)
+const buildingLayouts = computed(() =>
+    buildingList.value.map((building) => {
+        // On affiche uniquement le premier layout du bâtiment
+        const layout = building.layouts?.[0] ?? null
+        const view = layout ? buildLayoutView(layout) : null
+        return {building, layout, cells: view?.cells ?? [], gridStyle: view?.gridStyle ?? {}}
+    })
+)
+
+type GridCell = {
+    key: string
+    caseId: number | null
+    display: string
+    caseStatusId: number | null
+    caseStatusLabel: string | null
+    // Couleur de fond de la case (dépend du statut)
+    caseStyle?: Record<string, string>
+    // Placement dans la grille CSS (colonne/ligne de départ + span)
+    spanStyle: Record<string, string>
+    // Bordures latérales pointillées si la case touche un gap ou le bord du plan
+    sideBorderClass: string
+    // Couleur des bordures pointillées latérales (reprend la couleur de la cellule)
+    sideBorderStyle?: Record<string, string>
+    // Espace blanc interne uniquement côté(s) adjacent(s) à une autre case
+    contentInsetClass: string
+}
+// Type intermédiaire : garde des infos utiles au calcul des bordures, retirées ensuite
+type GridCellDraft = Omit<GridCell, "sideBorderClass" | "sideBorderStyle" | "contentInsetClass"> & { x: number; columnSpan: number }
+
+// Nettoie la couleur de statut pour éviter les chaînes vides / espaces
+const normalizeCaseStatusColor = (value: string | null | undefined): string | null => {
+    const color = (value ?? "").trim()
+    return color.length > 0 ? color : null
+}
+
+// Styles de base communs à toutes les grilles de bâtiments
+const BASE_GRID_STYLE = {gridAutoRows: "1fr", rowGap: "18px", columnGap: "0px", width: "100%"} as const
+
+// Transforme un layout API en structure de rendu (cellules + style de grille)
+const buildLayoutView = (layout: BuildingLayoutData): {
+    cells: GridCell[];
+    gridStyle: Record<string, string>
+} | null => {
+    const rows = layout.rows ?? 0, cols = layout.columns ?? 0
+    if (rows <= 0 || cols <= 0) return null
+
+    // Liste des positions de cases (filtre de sécurité sur les valeurs nulles)
+    const positions = (layout.casePositions ?? []).filter(Boolean) as BuildingCasePositionData[]
+    // Colonnes occupées par au moins une case (sert à détecter les gaps)
+    const occupiedColumns = new Set<number>()
+    // Sécurité : si deux positions ont le même x/y, on garde la première
+    const seenCoordinates = new Set<string>()
+    const cellDrafts: GridCellDraft[] = []
+
+    // Tri visuel : de haut en bas, puis de gauche à droite
+    const positionsSorted = [...positions].sort(
+        (leftPosition, rightPosition) =>
+            (leftPosition.y ?? 1) - (rightPosition.y ?? 1) || (leftPosition.x ?? 1) - (rightPosition.x ?? 1)
+    )
+    for (const position of positionsSorted) {
+        const x = position.x ?? 1
+        const y = position.y ?? 1
+        const coordinateKey = `${x}-${y}`
+        if (seenCoordinates.has(coordinateKey)) continue
+        seenCoordinates.add(coordinateKey)
+
+        // w/h = nombre de colonnes / lignes occupées par la case dans la grille
+        const columnSpan = position.w ?? 1
+        const rowSpan = position.h ?? 1
+
+        // Une case peut couvrir plusieurs colonnes : on les marque toutes comme occupées
+        for (let column = x; column < x + columnSpan; column++) {
+            if (column <= cols) occupiedColumns.add(column)
+        }
+
+        // Métadonnées utiles au rendu / navigation / légende
+        const caseId = (position.buildingCase?.id ?? null) as number | null
+        const caseNumber = (position.buildingCase?.caseNumber ?? null) as number | null
+        const caseStatusId = position.buildingCase?.statut?.id ?? null
+        const caseStatusLabel = position.buildingCase?.statut?.label ?? null
+        const statusColor = normalizeCaseStatusColor(position.buildingCase?.statut?.couleur)
+
+        cellDrafts.push({
+            key: `case-${layout.id}-${position.id}`,
+            x,
+            columnSpan,
+            caseId,
+            display: caseNumber !== null ? String(caseNumber) : "Case",
+            caseStatusId,
+            caseStatusLabel,
+            caseStyle: statusColor ? {backgroundColor: statusColor} : undefined,
+            // Exemple : "14 / span 1" => commence en colonne 14 et occupe 1 colonne
+            spanStyle: {gridColumn: `${x} / span ${columnSpan}`, gridRow: `${y} / span ${rowSpan}`}
+        })
+    }
+
+    // Colonnes vides = gaps visuels (plus étroites dans la grille)
+    const gapColumns = Array.from({length: cols}, (_, i) => i + 1).filter((x) => !occupiedColumns.has(x))
+    const gapSet = new Set(gapColumns)
+
+    // Ajoute les bordures latérales pointillées pour les cases au contact d'un gap ou d'un bord
+    const cells: GridCell[] = cellDrafts.map(({x, columnSpan, ...cell}) => {
+        const touchesLeftGapOrEdge = x === 1 || gapSet.has(x - 1)
+        const touchesRightGapOrEdge = x + columnSpan - 1 === cols || gapSet.has(x + columnSpan)
+        const sideBorderClass = [
+            touchesLeftGapOrEdge ? "border-l-[3px] [border-left-style:dashed]" : "",
+            touchesRightGapOrEdge ? "border-r-[3px] [border-right-style:dashed]" : ""
+        ].filter(Boolean).join(" ")
+        // Les pointillés latéraux reprennent la couleur de la cellule (si un statut en fournit une)
+        const sideBorderStyle = {
+            ...(cell.caseStyle?.backgroundColor && touchesLeftGapOrEdge ? {borderLeftColor: cell.caseStyle.backgroundColor} : {}),
+            ...(cell.caseStyle?.backgroundColor && touchesRightGapOrEdge ? {borderRightColor: cell.caseStyle.backgroundColor} : {})
+        }
+        // Le "blanc" n'est ajouté qu'entre deux cellules adjacentes (pas sur bord/gap)
+        const contentInsetClass = [
+            !touchesLeftGapOrEdge ? "ml-[4px]" : "",
+            !touchesRightGapOrEdge ? "mr-[4px]" : ""
+        ].filter(Boolean).join(" ")
+        return {...cell, sideBorderClass, sideBorderStyle, contentInsetClass}
+    })
+
+    // Les colonnes de gap sont rendues en 24px, les autres occupent l'espace restant
+    const columnsTemplate = Array.from({length: cols}, (_, i) => (gapSet.has(i + 1) ? "24px" : "minmax(0, 1fr)")).join(" ")
+    return {cells, gridStyle: {gridTemplateColumns: columnsTemplate, ...BASE_GRID_STYLE}}
+}
+
+onMounted(async () => {
+    // Chargement initial des bâtiments et de la légende des statuts
+    const buildings = await getBuildingList()
+    const statuts = await getStatutList()
+    buildingList.value = buildings
+    // Tri alphabétique FR pour une légende stable
+    statutLegend.value = [...statuts].sort((a, b) =>
+        (a.label ?? "").localeCompare(b.label ?? "", "fr", {sensitivity: "base"})
+    )
+})
+</script>
--- a/frontend/pages/infrastructure/case.vue
+++ b/frontend/pages/infrastructure/case.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="flex justify-center items-center">
+        <UiButton
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            :disabled="!hasCaseId"
+            @click="printCaseReport"
+        >
+            Imprimer
+        </UiButton>
+    </div>
+</template>
+<script setup lang="ts">
+const route = useRoute()
+const { printPdf } = usePdfPrinter()
+
+const caseId = computed(() => Number(route.query.id))
+const hasCaseId = computed(() => Number.isFinite(caseId.value) && caseId.value > 0)
+
+const printCaseReport = async () => {
+    if (!hasCaseId.value) {
+        return
+    }
+
+    const filename = `tableau_poids_case_${caseId.value}.pdf`
+    await printPdf(`/building_cases/${caseId.value}/weights-report`, filename)
+}
+</script>
--- a/frontend/pages/shipment/waiting-shipment.vue
+++ b/frontend/pages/shipment/waiting-shipment.vue
@@ -38,7 +38,7 @@
                    </template>
                </div>
                <div>{{ shipment.carrier?.name }}</div>
-                <div>{{ shipment.licencePlate }}</div>
+                <div>{{ shipment.licensePlate }}</div>
            </div>
        </div>
    </div>
--- a/frontend/services/dto/building-case-data.ts
+++ b/frontend/services/dto/building-case-data.ts
@@ -0,0 +1,9 @@
+import type { BuildingCaseStatusData } from '~/services/dto/building-case-status-data'
+
+export interface BuildingCaseData {
+    id: number
+    caseNumber: number | null
+    code: string | null
+    capacity: number | null
+    statut?: BuildingCaseStatusData | null
+}
--- a/frontend/services/dto/building-case-position-data.ts
+++ b/frontend/services/dto/building-case-position-data.ts
@@ -0,0 +1,11 @@
+import type { BuildingCaseData } from '~/services/dto/building-case-data'
+
+export interface BuildingCasePositionData {
+    id: number
+    x: number | null
+    y: number | null
+    w: number | null
+    h: number | null
+    renderOrder: string | null
+    buildingCase: BuildingCaseData | null
+}
--- a/frontend/services/dto/building-case-status-data.ts
+++ b/frontend/services/dto/building-case-status-data.ts
@@ -0,0 +1,6 @@
+export interface BuildingCaseStatusData {
+    id: number
+    label: string | null
+    code: string | null
+    couleur: string | null
+}
--- a/frontend/services/dto/building-data.ts
+++ b/frontend/services/dto/building-data.ts
@@ -1,5 +1,8 @@
+import type { BuildingLayoutData } from '~/services/dto/building-layout-data'
+
 export interface BuildingData {
    id: number
    label: string
    code: string
+    layouts?: BuildingLayoutData[] | null
 }
--- a/frontend/services/dto/building-layout-data.ts
+++ b/frontend/services/dto/building-layout-data.ts
@@ -0,0 +1,9 @@
+import type { BuildingCasePositionData } from '~/services/dto/building-case-position-data'
+
+export interface BuildingLayoutData {
+    id: number
+    name: string | null
+    columns: number | null
+    rows: number | null
+    casePositions?: BuildingCasePositionData[] | null
+}
--- a/frontend/services/dto/shipment-data.ts
+++ b/frontend/services/dto/shipment-data.ts
@@ -12,7 +12,7 @@ export interface ShipmentTypeData {
 export type ShipmentData = {
    id: number
    identificationNumber?: string | null
-    licencePlate: string | null
+    licensePlate: string | null
    shipmentDate: string
    currentStep: number
    isValid: boolean
@@ -43,11 +43,11 @@ export type ShipmentFormData = {
    carrierId: string,
    driverId: string,
    vehicleId: string,
-    licencePlate: string,
+    licensePlate: string,
 }

 export type ShipmentPayload = {
-    licencePlate?: string | null
+    licensePlate?: string | null
    shipmentDate?: string
    currentStep?: number
    isValid?: boolean
--- a/frontend/services/statut.ts
+++ b/frontend/services/statut.ts
@@ -0,0 +1,23 @@
+import { useApi } from '~/composables/useApi'
+import type { BuildingCaseStatusData } from '~/services/dto/building-case-status-data'
+
+export type StatutListResponse =
+    | BuildingCaseStatusData[]
+    | { 'hydra:member'?: BuildingCaseStatusData[] }
+
+export async function getStatutList(): Promise<BuildingCaseStatusData[]> {
+    const api = useApi()
+    const response = await api.get<StatutListResponse>('statuts', {}, {
+        toastErrorKey: 'errors.http.get'
+    })
+
+    if (Array.isArray(response)) {
+        return response
+    }
+
+    if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
+        return response['hydra:member']
+    }
+
+    return []
+}