feat : changelog

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

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

Reviewed-on: #29
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,7 +46,10 @@ Ajouter dans le fichier .env du frontend
 * [#324] Creation page admin listing clients
 * [#326] Admin modification creation client
 * [#325] Correction diverses
-
+* fix layout admin
+* Creation page admin listing bovins
+* Creation page admin ajout/modification bovins
+* [#332] Refonte écran réception terminée
 ### Changed
 
 ### Fixed

config/version.yaml

@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.0.46'
+    app.version: '0.0.51'

frontend/components/card-link.vue

@@ -2,22 +2,22 @@
 
 <template>
     <NuxtLink :to="link">
-        <div class="w-[324px] h-[228px] border border-black rounded-md p-6 flex flex-col justify-between">
+        <div class="w-[300px] h-[216px] border border-primary-700 rounded-lg p-6 flex flex-col justify-between gap-4">
             <div class="flex justify-between">
-                <div class="rounded-full w-[80px] h-[80px] bg-neutral-400 flex justify-center items-center">
-                    <Icon :name="iconName" style="color: black" size="44" />
+                <div class="rounded-full w-[80px] h-[80px] bg-[#D9D9D9] flex justify-center items-center">
+                    <Icon :name="iconName" class="!text-primary-700" size="44" />
                 </div>
                 <div>
                     <Icon name="mdi:plus" style="color: black" size="44"  />
                 </div>
             </div>
             <div class="uppercase font-bold">
-                <p class="text-3xl"> {{ label }} </p>
+                <p class="text-3xl text-primary-700">
+                    <slot name="label">{{ label }}</slot>
+                </p>
             </div>
         </div>
         </NuxtLink>
-
-
 </template>
 
 <script setup lang="ts">
@@ -27,4 +27,3 @@ const props = defineProps<{
     label: string
 }>()
 </script>
-

frontend/components/reception/reception-bovine-received.vue

@@ -1,21 +1,24 @@
 <template>
     <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">Sélection des marchandises réceptionnnées</h1>
+        class="flex flex-col gap-16">
+        <h1 class="text-4xl uppercase font-bold text-primary-500">Sélection des races réceptionnées</h1>
         <div
-            class="flex flex-row gap-8 items-center">
+            class="flex flex-row gap-8 items-center w-full">
             <div
                 v-for="type in bovineType"
                 :key="type.id"
-                class="mt-8 flex flex-row mb-2 gap-6">
+                class="mt-8 flex flex-row mb-2 w-full">
                 <UiNumberInput
+                    :id="type.id"
                     :label="type.label"
                     :code="type.code"
                     v-model="bovineQuantities[String(type.id)]"
                     :placeholder="0"
                     :min="0"
                     :max="10"
+                    class="max-w-[150px]"
+                    wrapper-class="gap-3"
                 />
             </div>
             <div
@@ -23,6 +26,8 @@
                 <UiNumberInput
                     label="Autres"
                     v-model="otherQuantity"
+                    class="max-w-[80px]"
+                    wrapper-class="gap-3"
                 />
             </div>
         </div>
@@ -77,14 +82,14 @@ onMounted(async () => {
 })
 
 watch(
-    () => receptionId.value,
-    async (id) => {
-        if (!id || !receptionIri.value) {
+    [() => receptionId.value, () => bovineType.value],
+    async ([id, types]) => {
+        if (!id || !receptionIri.value || types.length === 0) {
             return
         }
 
         const selectionMap: Record<string, number | null> = {}
-        for (const type of bovineType.value) {
+        for (const type of types) {
             selectionMap[String(type.id)] = 0
         }
 

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">Réception</h1>
+            <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1 text-primary-500">Réception</h1>
             <!--    Nom de l'utilisateur       -->
             <UiSelect
                 id="reception-user"
@@ -81,20 +81,8 @@
                 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"
-                wrapper-class="col-start-2 row-start-4"
-            />
             <!--    Plaque d'immatriculation       -->
-            <div v-if="!isLiotCarrier" class="col-start-2 row-start-5">
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
                 <UiLicensePlateInput
                     v-model="form.licensePlate"
                     v-model:allowAny="allowAnyLicensePlate"
@@ -112,15 +100,28 @@
                 }))"
                 :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">
-            <button
+            <UiButton
                 type="submit"
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
             >Valider
-            </button>
+            </UiButton>
         </div>
     </form>
 

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">Sélection des marchandises réceptionnnées</h1>
+            <h1 class="text-4xl uppercase font-bold text-primary-500">Sélection des marchandises réceptionnnées</h1>
             <UiSelect
                 id="merchandise-type"
                 v-model="selectedMerchandiseTypeId"
@@ -26,7 +26,7 @@
 
             <div
                 v-if="selectedMerchandiseTypeId && !isGranule"
-                class="flex gap-4 w-[550px] justify-evenly"
+                class="flex gap-4 w-[550px] justify-between"
             >
                 <div
                     v-for="building in buildings"
@@ -47,17 +47,17 @@
             >
                 <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">{{ type.label }}</p>
+                        <p class="font-bold uppercase text-primary-500">{{ type.label }}</p>
                         <div
                             v-for="building in buildings"
                             :key="building.id"
-                            class="flex items-center gap-2 text-lg"
+                            class="flex items-center gap-2 text-lg pl-[2px]"
                         >
                             <UiCheckbox
                                 v-model="selectedPelletBuildingIds[String(type.id)]"
                                 :value="String(building.id)"
                                 :label="building.label"
-                                label-class="text-lg"
+                                label-class="text-xl"
                             />
                         </div>
                     </div>

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">{{ title }}</h1>
+            <h1 class="font-bold text-5xl uppercase text-primary-500">{{ 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>
+            <p class="text-primary-500 uppercase text-2xl text-primary-500 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">
+                    class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl text-primary-500">
                     {{ displayWeight }} kg
                 </div>
             </div>
         </div>
     </div>
     <div class="flex justify-center mt-[54px]">
-        <button
+        <UiButton
             class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
             @click="fetchWeight"
-        >{{ displayWeight !== null ? 'refaire une pesee' : 'peser' }}</button>
-        <button
+        >{{ displayWeight !== null ? 'refaire une pesée' : 'peser' }}</UiButton>
+        <UiButton
             v-if="displayWeight !== null && !showGenerateReceipt"
             class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
             @click="saveWeight"
-        >Valider</button>
-        <button
+        >Valider la pesée</UiButton>
+        <UiButton
             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</button>
+        >Générer le bon</UiButton>
     </div>
 </template>
 

frontend/components/reception/update-bovin.vue

@@ -1,13 +1,10 @@
 <template>
-    <form @submit.prevent="validate">
-    <div
-        class="flex flex-col items-center gap-16">
-        <div
-            class="flex flex-row gap-6 items-center">
+    <form>
+        <div class="flex flex-row justify-between gap-x-12  font-bold uppercase mb-8">
             <div
                 v-for="type in bovineType"
                 :key="type.id"
-                class="flex flex-row mb-2 gap-6 ">
+            >
                 <UiNumberInput
                     :label="type.label"
                     :code="type.code"
@@ -16,52 +13,46 @@
                     :placeholder="0"
                     :min="0"
                     :max="10"
+                    wrapperClass="w-44 flex-col"
                 />
             </div>
-            <div
-                class=" flex flex-row mb-2 gap-6">
-                <UiNumberInput
-                    label="Autres"
-                    v-model="otherQuantity"
-                    :disabled="!auth.isAdmin"
-                />
-            </div>
+            <UiNumberInput
+                label="Autres"
+                v-model="otherQuantity"
+                :disabled="!auth.isAdmin"
+                wrapperClass="w-44 flex-col"
+            />
         </div>
-        <button
-            type="submit"
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-            :disabled="!auth.isAdmin"
-        >Valider
-        </button>
-    </div>
     </form>
 </template>
 <script setup lang="ts">
 import type {BovineTypeData} from "~/services/dto/bovine-type-data";
 import {getBovineTypeList} from "~/services/bovine-type";
-import {
-    createReceptionBovine,
-    deleteReceptionBovine,
-    getReceptionBovineList,
-    updateReceptionBovine
-} from "~/services/reception-bovine";
+import {createReceptionBovine, deleteReceptionBovine, getReceptionBovineList, updateReceptionBovine} from "~/services/reception-bovine";
 import {computed, onMounted, reactive, ref, watch} from "vue";
 import {getReception, updateReception} from "~/services/reception";
+
 const toast = useToast()
 const isLoadingBovineType = ref(false)
 const bovineType = ref<BovineTypeData[]>([])
 const bovineQuantities = reactive<Record<string, number | null>>({})
 const otherQuantity = ref<number | null>(0)
+const initialBovineQuantities = ref<Record<string, number | null>>({})
+const initialOtherQuantity = ref<number | null>(0)
 const auth = useAuthStore()
+
 const props = defineProps<{
     idReception: number
+    isValidate: boolean
 }>()
+
 const receptionId = props.idReception
 const reception = await getReception(receptionId)
 
 const receptionIri = computed(() =>
     receptionId ? `/api/receptions/${receptionId}` : null
 )
+
 const totalBovines = computed(() => {
     const base = Object.values(bovineQuantities).reduce((sum, value) => {
         return sum + (value ?? 0)
@@ -69,6 +60,20 @@ const totalBovines = computed(() => {
     return base + (otherQuantity.value ?? 0)
 })
 
+const hasBovineChanged = () => {
+    if ((initialOtherQuantity.value ?? 0) !== (otherQuantity.value ?? 0)) {
+        return true
+    }
+
+    for (const [key, value] of Object.entries(bovineQuantities)) {
+        if ((initialBovineQuantities.value[key] ?? 0) !== (value ?? 0)) {
+            return true
+        }
+    }
+
+    return false
+}
+
 const loadBovineType = async () => {
     isLoadingBovineType.value = true
     try {
@@ -83,14 +88,14 @@ onMounted(async () => {
 })
 
 watch(
-    () => receptionId,
-    async (id) => {
-        if (!id || !receptionIri.value) {
+    [() => receptionId, () => bovineType.value],
+    async ([id, types]) => {
+        if (!id || !receptionIri.value || types.length === 0) {
             return
         }
 
         const selectionMap: Record<string, number | null> = {}
-        for (const type of bovineType.value) {
+        for (const type of types) {
             selectionMap[String(type.id)] = 0
         }
 
@@ -105,12 +110,14 @@ watch(
         }
         Object.assign(bovineQuantities, selectionMap)
 
-        const existingOther = await reception.bovineDetail
+        const existingOther = reception.bovineDetail
         const parsedOther =
-            typeof existingOther === 'string' && existingOther.trim() !== ''
+                typeof existingOther === 'string' && existingOther.trim() !== ''
                 ? Number(existingOther)
                 : 0
         otherQuantity.value = Number.isFinite(parsedOther) ? parsedOther : 0
+        initialBovineQuantities.value = {...selectionMap}
+        initialOtherQuantity.value = otherQuantity.value ?? 0
     },
     {immediate: true}
 )
@@ -151,7 +158,6 @@ async function syncBovineSelections(receptionIri: string) {
             continue
         }
         if (existingMap.has(bovineTypeId)) {
-            // Déjà à jour
             continue
         }
         await createReceptionBovine({
@@ -162,7 +168,18 @@ async function syncBovineSelections(receptionIri: string) {
     }
 }
 
-async function validate() {
+watch(
+    () => props.isValidate,
+    async (val) => {
+        if (!val) return
+        await runValidate()
+    }
+)
+const runValidate = async () => {
+    if (!hasBovineChanged()) {
+        return
+    }
+    const receptionIri = `/api/receptions/${reception.id}`
     // @TODO Ajouter un composable pour le toaster qui gère les key i18n
     if (totalBovines.value > 52) {
         toast.error({
@@ -172,12 +189,16 @@ async function validate() {
         return
     }
 
-    await syncBovineSelections(receptionIri.value)
+    await syncBovineSelections(receptionIri)
 
     await updateReception(receptionId, {
         merchandiseType: null,
         merchandiseDetail: null,
         bovineDetail: otherQuantity.value ? String(otherQuantity.value) : null,
     })
+
+    initialBovineQuantities.value = {...bovineQuantities}
+    initialOtherQuantity.value = otherQuantity.value ?? 0
 }
+
 </script>

frontend/components/reception/update-merchandise.vue

@@ -1,33 +1,29 @@
 <template>
-    <form @submit.prevent="validate">
-        <div class="flex flex-col items-center gap-16">
+    <form>
             <div
-                class="flex flex-col gap-16 items-center w-full">
-                <UiTextInput
+                class="flex flex-col">
+                <div class="w-full col-start-1 row-start-1">
+                <UiRadioGroup
                     id="merchandise-type"
                     v-model="selectedMerchandiseTypeId"
                     label="Type de marchandises"
-                    :value="reception.merchandiseType?.label"
-                    wrapper-class="w-[550px]"
-                    :disabled="true"
+                    :options="merchandiseTypes.map((type) => ({
+                        value: String(type.id),
+                        label: type.label
+                    }))"
+                    input-class="accent-primary-700 focus:ring-primary-700"
+                    item-class="text-primary-700/50 [&:has(input:checked)]:text-primary-700"
+                    option-label-class="uppercase"
+                    wrapper-class="w-full uppercase"
+                    group-class="grid grid-cols-[336px_336px_355px_200px] w-[160px_160px_200px_180px] mt-9 mb-7"
+                    :disabled="!auth.isAdmin"
                 />
-                <div
-                    v-if="merchandiseTypeId && isAutres"
-                    class="flex flex-col w-full max-w-[550px]"
-                >
-                    <UiTextInput
-                        id="merchandise-detail"
-                        :disabled="!auth.isAdmin"
-                        v-model="merchandiseDetail"
-                        label="Préciser"
-                        placeholder="Précisions complémentaires"
-                        :maxlength="255"
-                    />
                 </div>
 
+                <div class="w-full grid grid-cols-[3fr_1fr] gap-12 col-start-2 row-start-1">
                 <div
                     v-if="merchandiseTypeId && !isGranule"
-                    class="flex gap-4 w-[550px] justify-evenly"
+                    class="flex gap-[218px]"
                 >
                     <div
                         v-for="building in buildings"
@@ -38,28 +34,45 @@
                             :value="String(building.id)"
                             :label="building.label"
                             :disabled="!auth.isAdmin"
-                            label-class="text-xl"
+                            input-class="accent-primary-700 focus:ring-primary-700"
+                            label-class="text-xl uppercase"
                         />
                     </div>
                 </div>
+                <div
+                    v-if="merchandiseTypeId && isAutres"
+                    class="flex flex-col justify-self-end max-w-[182px]"
+                >
+                    <UiTextInput
+                        id="merchandise-detail"
+                        :disabled="!auth.isAdmin"
+                        v-model="merchandiseDetail"
+                        placeholder="Préciser"
+                        :maxlength="255"
+                        class="h-6"
+                    />
+                </div>
+                </div>
 
                 <div
                     v-if="merchandiseTypeId && isGranule"
-                    class="flex flex-col gap-10 w-full max-w-[1100px]"
+                    class="flex flex-col gap-10 w-full col-start-2 row-start-1 "
                 >
-                    <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">{{ type.label }}</p>
+                    <div class="grid grid-cols-1 md:grid-cols-[max-content_max-content_max-content_max-content] justify-between">
+
+                    <div v-for="type in pelletTypes" :key="type.id" class="flex flex-col gap-4">
+                            <p class="mb-1 font-medium uppercase">{{ type.label }}</p>
                             <div
                                 v-for="building in buildings"
                                 :key="building.id"
-                                class="flex items-center gap-2 text-lg"
+                                class="flex text-lg"
                             >
                                 <UiCheckbox
                                     v-model="selectedPelletBuildingIds[String(type.id)]"
                                     :value="String(building.id)"
                                     :label="building.label"
                                     :disabled="!auth.isAdmin"
+                                    input-class="accent-primary-700 focus:ring-primary-700"
                                     label-class="text-lg"
                                 />
                             </div>
@@ -67,19 +80,11 @@
                     </div>
                 </div>
             </div>
-            <button
-                v-if="auth.isAdmin"
-                type="submit"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-                :disabled="!auth.isAdmin"
-            >Valider
-            </button>
-        </div>
     </form>
 </template>
 
 <script setup lang="ts">
-import {computed, onMounted, ref} from 'vue'
+import {computed, onMounted, ref, watch} from 'vue'
 import {getBuildingList} from '~/services/building'
 import {getMerchandiseTypeList} from '~/services/merchandise-type'
 import type {MerchandiseTypeData} from '~/services/dto/merchandise-type-data'
@@ -102,12 +107,17 @@ const selectedBuildingIds = ref<string[]>([])
 const selectedPelletBuildingIds = ref<Record<string, string[]>>({})
 const merchandiseDetail = ref('')
 const auth = useAuthStore()
+const initialMerchandiseTypeId = ref<string | null>(null)
+const initialMerchandiseDetail = ref<string | null>(null)
+const initialBuildingIds = ref<string[]>([])
+const initialPelletSelections = ref<Record<string, string[]>>({})
 const props = defineProps<{
     idReception: number
+    isValidate: boolean
 }>()
 const receptionId = props.idReception
 const reception = await getReception(receptionId)
-const merchandiseTypeId = await reception.receptionType?.id
+const merchandiseTypeId = reception.receptionType?.id
 
 // Extrait l'ID d'une relation depuis un IRI ou un objet complet.
 const getRelationId = (value: unknown): string | null => {
@@ -142,6 +152,52 @@ const isGranule = computed(() => selectedMerchandiseType.value?.code === MERCHAN
 // Indique si le type est "Autres"
 const isAutres = computed(() => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.AUTRES)
 
+const hasMerchandiseChanged = () => {
+    const currentTypeId = selectedMerchandiseTypeId.value || null
+    if (initialMerchandiseTypeId.value !== currentTypeId) {
+        return true
+    }
+
+    const currentDetail = isAutres.value ? merchandiseDetail.value.trim() : ''
+    if ((initialMerchandiseDetail.value ?? '') !== currentDetail) {
+        return true
+    }
+
+    const currentBuildings = isGranule.value ? [] : [...selectedBuildingIds.value].sort()
+    const initialBuildings = [...initialBuildingIds.value].sort()
+    if (currentBuildings.length !== initialBuildings.length) {
+        return true
+    }
+    for (let i = 0; i < currentBuildings.length; i += 1) {
+        if (currentBuildings[i] !== initialBuildings[i]) {
+            return true
+        }
+    }
+
+    const currentPellets = normalizePelletSelections(selectedPelletBuildingIds.value)
+    const initialPellets = normalizePelletSelections(initialPelletSelections.value)
+    if (currentPellets.length !== initialPellets.length) {
+        return true
+    }
+    for (let i = 0; i < currentPellets.length; i += 1) {
+        if (currentPellets[i] !== initialPellets[i]) {
+            return true
+        }
+    }
+
+    return false
+}
+
+const normalizePelletSelections = (selections: Record<string, string[]>) => {
+    const pairs: string[] = []
+    for (const [pelletTypeId, buildingIds] of Object.entries(selections)) {
+        for (const buildingId of buildingIds) {
+            pairs.push(`${pelletTypeId}:${buildingId}`)
+        }
+    }
+    return pairs.sort()
+}
+
 // Charge les référentiels et hydrate le formulaire depuis la réception
 onMounted(async () => {
     const [merchandiseTypeList, buildingList, pelletTypeList] = await Promise.all([
@@ -183,14 +239,36 @@ onMounted(async () => {
         }
     }
     selectedPelletBuildingIds.value = selectionMap
+    initialMerchandiseTypeId.value = selectedMerchandiseTypeId.value || null
+    initialMerchandiseDetail.value = isAutres.value ? merchandiseDetail.value.trim() : ''
+    initialBuildingIds.value = [...selectedBuildingIds.value]
+    initialPelletSelections.value = JSON.parse(JSON.stringify(selectedPelletBuildingIds.value))
 })
-// Enregistre les sélections et passe à l'étape suivante
-async function validate() {
 
+watch(
+    () => props.isValidate,
+    async (val) => {
+        if (!val) return
+        await runValidate()
+    }
+)
+
+const runValidate = async () => {
+    if (!hasMerchandiseChanged()) {
+        return
+    }
     const receptionIri = `/api/receptions/${reception.id}`
 
+    // 1) supprimer toutes les anciennes associations
+    await clearPelletSelections(receptionIri)
+
+    // 2) update reception (type + détails + buildings non-granulé)
     await updateReception(reception.id, {
-        merchandiseDetail: isAutres.value ? merchandiseDetail.value.trim() : null,
+        merchandiseType: selectedMerchandiseTypeId.value
+            ? `/api/merchandise_types/${selectedMerchandiseTypeId.value}`
+            : null,
+        merchandiseDetail: isAutres.value ? merchandiseDetail.value.trim() :
+            null,
         buildings: isGranule.value
             ? []
             : selectedBuildingIds.value.map((id) => `/api/buildings/${id}`),
@@ -198,11 +276,15 @@ async function validate() {
         bovinesTypes: null,
     })
 
+    // 3) si granulé ALORS créer les nouvelles associations
     if (isGranule.value) {
         await syncPelletSelections(receptionIri)
-    } else {
-        await clearPelletSelections(receptionIri)
     }
+
+    initialMerchandiseTypeId.value = selectedMerchandiseTypeId.value || null
+    initialMerchandiseDetail.value = isAutres.value ? merchandiseDetail.value.trim() : ''
+    initialBuildingIds.value = [...selectedBuildingIds.value]
+    initialPelletSelections.value = JSON.parse(JSON.stringify(selectedPelletBuildingIds.value))
 }
 
 // Supprime toutes les associations granulés/bâtiments existantes
@@ -255,4 +337,5 @@ async function syncPelletSelections(receptionIri: string) {
         }
     }
 }
+
 </script>

frontend/components/reception/update-weight.vue

@@ -1,41 +1,32 @@
 <template>
-    <form @submit.prevent="validate">
-        <div class="grid grid-cols-2 gap-x-40 gap-y-8 mb-8">
-            <UiTextInput
-                label="Dsd"
-                class="col-start-2"
-                v-model="sharedWeightMeta.dsd"
+    <form>
+        <div class="grid grid-cols-3 gap-x-40 gap-y-8 mb-8">
+            <UiNumberInput
+                :key="weight.type"
+                :label="'POIDS'"
+                labelClass="font-bold uppercase text-xl "
+                v-model="weight.weight"
                 :disabled="!auth.isAdmin"
+                :min="0"
+                :max="48000"
+                wrapper-class="flex-col"
             />
+
             <UiDateInput
                 label="Date pesée"
                 v-model="sharedWeightMeta.weighedAt"
                 :disabled="!auth.isAdmin"
             />
-        </div>
-        <div class="grid grid-cols-2 gap-x-40 mb-16">
+
             <UiNumberInput
-                v-for="weight in form.weights"
-                :key="weight.type"
-                :label="getWeightLabel(weight.type)"
-                labelClass="font-bold uppercase text-xl"
-                v-model="weight.weight"
-                :wrapper-class="weight.type === 'tare' ? 'col-start-1 row-start-1' : 'col-start-2 row-start-1'"
+                label="Dsd"
+                class="col-start-2"
+                labelClass="font-bold uppercase"
+                v-model="sharedWeightMeta.dsd"
                 :disabled="!auth.isAdmin"
+                wrapper-class="flex-col"
             />
         </div>
-
-        <div class="flex justify-center">
-            <button
-                v-if="auth.isAdmin"
-                type="submit"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-
-            >
-                Valider
-            </button>
-        </div>
-
     </form>
 </template>
 
@@ -44,20 +35,27 @@ import type {ReceptionFormWeight} from '~/services/dto/reception-data'
 import {getReception} from '~/services/reception'
 import {updateWeight} from "~/services/weight";
 import {useAuthStore} from "~/stores/auth";
+import {ref, watch} from "vue";
 
 const props = defineProps<{
     idReception: number
+    weightType: string
+    isValidate: boolean
 }>()
 
-const idReception = props.idReception
-const auth = useAuthStore()
-
 const form = reactive({
     weights: [
         {id: 0, type: 'tare' as const, weight: 0, dsd: null, weighedAt: null},
         {id: 0, type: 'gross' as const, weight: 0, dsd: null, weighedAt: null}
     ]
 })
+
+const idReception = props.idReception
+const weightType = props.weightType
+const auth = useAuthStore()
+const weight = form.weights.find(w => w.type === weightType)
+const initialWeight = ref<{ weight: number | null; dsd: number | null; weighedAt: string | null } | null>(null)
+
 // DSD et date de pesée sont partagés entre tare et gross dans l'UI.
 const sharedWeightMeta = reactive<{
     dsd: number | string | null
@@ -67,8 +65,20 @@ const sharedWeightMeta = reactive<{
     weighedAt: null
 })
 
-const getWeightLabel = (type: 'tare' | 'gross'): string => {
-    return type === 'tare' ? 'Pesée à vide' : 'Pesée à plein'
+const normalizeMeta = () => {
+    const sharedDsd =
+        sharedWeightMeta.dsd === null || sharedWeightMeta.dsd === undefined || sharedWeightMeta.dsd === ''
+            ? null
+            : Number(sharedWeightMeta.dsd)
+    const sharedWeighedAt =
+        sharedWeightMeta.weighedAt === null || sharedWeightMeta.weighedAt === undefined || sharedWeightMeta.weighedAt === ''
+            ? null
+            : sharedWeightMeta.weighedAt
+
+    return {
+        dsd: Number.isFinite(sharedDsd) ? sharedDsd : null,
+        weighedAt: sharedWeighedAt
+    }
 }
 
 const hydrateFromReception = (reception: ReceptionFormWeight) => {
@@ -90,6 +100,15 @@ const hydrateFromReception = (reception: ReceptionFormWeight) => {
         sharedWeightMeta.dsd = weightWithMeta.dsd ?? null
         sharedWeightMeta.weighedAt = weightWithMeta.weighedAt ?? null
     }
+
+    if (weight) {
+        const normalized = normalizeMeta()
+        initialWeight.value = {
+            weight: weight.weight ?? null,
+            dsd: normalized.dsd,
+            weighedAt: normalized.weighedAt
+        }
+    }
 }
 
 onMounted(async () => {
@@ -97,24 +116,48 @@ onMounted(async () => {
     hydrateFromReception(reception)
 })
 
-async function validate() {
-    const sharedDsd =
-        sharedWeightMeta.dsd === null || sharedWeightMeta.dsd === undefined || sharedWeightMeta.dsd === ''
-            ? null
-            : Number(sharedWeightMeta.dsd)
-    const sharedWeighedAt =
-        sharedWeightMeta.weighedAt === null || sharedWeightMeta.weighedAt === undefined || sharedWeightMeta.weighedAt === ''
-            ? null
-            : sharedWeightMeta.weighedAt
-    for (const weight of form.weights) {
-        if (weight.id) {
-            await updateWeight(weight.id, {
-                weight: weight.weight,
-                dsd: Number.isFinite(sharedDsd) ? sharedDsd : null,
-                weighedAt: sharedWeighedAt
-            })
-        }
+watch(
+    () => props.isValidate,
+    async (val) => {
+        if (!val) return
+        await runValidate()
+    }
+)
+
+const hasChanged = (current: { weight: number | null; dsd: number | null; weighedAt: string | null }) => {
+    if (!initialWeight.value) {
+        return true
+    }
+    return (
+        (current.weight ?? null) !== (initialWeight.value.weight ?? null) ||
+        (current.dsd ?? null) !== (initialWeight.value.dsd ?? null) ||
+        (current.weighedAt ?? null) !== (initialWeight.value.weighedAt ?? null)
+    )
+}
+
+const runValidate = async () => {
+    if (!weight?.id) {
+        return
     }
 
+    const normalized = normalizeMeta()
+    const current = {
+        weight: weight.weight ?? null,
+        dsd: normalized.dsd,
+        weighedAt: normalized.weighedAt
+    }
+
+    if (!hasChanged(current)) {
+        return
+    }
+
+    await updateWeight(weight.id, {
+        weight: current.weight,
+        dsd: current.dsd,
+        weighedAt: current.weighedAt
+    })
+
+    initialWeight.value = current
 }
+
 </script>

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">Expédition</h1>
+            <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1 text-primary-500">Expédition</h1>
             <!--    Nom de l'utilisateur       -->
             <UiSelect
                 id="shipment-user"
@@ -22,24 +22,27 @@
                 wrapper-class="col-start-1 row-start-3"
             />
             <!--    Type d'expédition        -->
-            <div class="col-start-1 row-start-4">
-                <label class="font-bold uppercase text-xl mb-2">
-                    Type d'expédition
-                </label>
-                <div class="grid grid-cols-2 gap-x-8">
-                    <div
-                        v-for="type in bovineShipment"
-                        :key="type.id"
-                        class="mt-2 flex flex-row gap-6"
-                    >
-                        <UiNumberInput
-                            :label="type.label"
-                            v-model="bovineQuantities[String(type.id)]"
-                            :placeholder="0"
-                            :min="0"
-                            :max="10"
-                        />
-                    </div>
+            <div class="col-start-1 row-start-4 h-[64px]">
+                <div class="flex items-end gap-8 justify-between">
+                    <UiRadioGroup
+                        id="shipment-type"
+                        name="shipment-type"
+                        label="Type d'expédition bovine"
+                        v-model="selectedShipmentTypeId"
+                        :options="bovineShipment.map((type) => ({
+                            value: String(type.id),
+                            label: type.label
+                        }))"
+                    />
+                    <UiNumberInput
+                        id="shipment-type-quantity"
+                        label="Quantité"
+                        v-model="shipmentQuantity"
+                        :placeholder="0"
+                        :min="0"
+                        :max="1200"
+                        :disabled="!selectedShipmentTypeId"
+                    />
                 </div>
             </div>
             <!--    Client        -->
@@ -86,20 +89,8 @@
                 }))"
                 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"
-            />
             <!-- Plaque d'immatriculation (hors LIOT)        -->
-            <div v-if="!isLiotCarrier" class="col-start-2 row-start-5">
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
                 <UiLicensePlateInput
                     v-model="form.licencePlate"
                     v-model:allowAny="allowAnyLicensePlate"
@@ -117,15 +108,28 @@
                 }))"
                 :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">
-            <button
+            <UiButton
                 type="submit"
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
             >Valider
-            </button>
+            </UiButton>
         </div>
     </form>
 </template>
@@ -177,8 +181,9 @@ const isLoadingDrivers = ref(false)
 const authStore = useAuthStore()
 const shipmentStore = useShipmentStore()
 const router = useRouter()
-const bovineQuantities = ref<Record<string, number | null>>({})
 const bovineShipment = ref<ShipmentTypeData[]>([])
+const selectedShipmentTypeId = ref('')
+const shipmentQuantity = ref<number | null>(0)
 // Transporteur sélectionné dans le formulaire
 const selectedCarrier = computed(() =>
     carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
@@ -328,15 +333,21 @@ watch(
         form.driverId = shipment?.driver?.id ? String(shipment.driver.id) : ''
         form.vehicleId = shipment?.vehicle?.id ? String(shipment.vehicle.id) : ''
         if (!shipment || !shipment.bovinShipments) {
-            bovineQuantities.value = {}
+            selectedShipmentTypeId.value = ''
+            shipmentQuantity.value = 0
         } else {
-            const next: Record<string, number | null> = {}
-            for (const entry of shipment.bovinShipments) {
+            const selectedEntry = shipment.bovinShipments.find((entry) => {
                 const typeId = entry.shipmentType?.id
-                if (!typeId) continue
-                next[String(typeId)] = entry.nbBovinSend ?? null
+                return Boolean(typeId) && Number(entry.nbBovinSend ?? 0) > 0
+            }) ?? shipment.bovinShipments.find((entry) => Boolean(entry.shipmentType?.id))
+
+            if (!selectedEntry?.shipmentType?.id) {
+                selectedShipmentTypeId.value = ''
+                shipmentQuantity.value = 0
+            } else {
+                selectedShipmentTypeId.value = String(selectedEntry.shipmentType.id)
+                shipmentQuantity.value = selectedEntry.nbBovinSend ?? 0
             }
-            bovineQuantities.value = next
         }
         isHydrating.value = false
     },
@@ -464,16 +475,22 @@ watch(
     }
 )
 const buildDesiredBovinShipments = () => {
-    return bovineShipment.value
-        .map((type) => {
-            const raw = bovineQuantities.value[String(type.id)]
-            const quantity = raw === null || raw === undefined ? 0 : Number(raw)
-            return {
-                type,
-                quantity: Number.isFinite(quantity) ? Math.max(0, Math.trunc(quantity)) : 0
-            }
-        })
-        .filter((entry) => entry.quantity > 0)
+    const typeId = Number(selectedShipmentTypeId.value)
+    if (!Number.isFinite(typeId)) {
+        return []
+    }
+    const type = bovineShipment.value.find((entry) => entry.id === typeId)
+    if (!type) {
+        return []
+    }
+    const raw = shipmentQuantity.value
+    const quantity = raw === null || raw === undefined ? 0 : Number(raw)
+    const normalizedQuantity = Number.isFinite(quantity) ? Math.max(0, Math.trunc(quantity)) : 0
+    if (normalizedQuantity <= 0) {
+        return []
+    }
+
+    return [{type, quantity: normalizedQuantity}]
 }
 const syncBovinShipments = async (
     shipmentId: number,

frontend/components/shipment/shipment-loading.vue

@@ -0,0 +1,26 @@
+<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="w-full flex flex-col items-center justify-center">
+            <UiLoadingDots />
+        </div>
+        <UiButton
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
+            @click="goNext"
+        >Peser</UiButton>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {useShipmentStore} from "~/stores/shipment";
+
+const shipmentStore = useShipmentStore()
+
+const goNext = async () => {
+    const nextStep = shipmentStore.current.currentStep + 1
+    await shipmentStore.updateShipment(shipmentStore.current.id, {
+        currentStep: nextStep
+    })
+}
+</script>

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">{{ title }}</h1>
+            <h1 class="font-bold text-5xl uppercase text-primary-500">{{ 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-black h-[90px] mt-12 mb-[25px] text-4xl">
+                    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">
                     {{ displayWeight }} kg
                 </div>
             </div>
         </div>
     </div>
     <div class="flex justify-center mt-[54px]">
-        <button
+        <UiButton
             class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
             @click="fetchWeight"
-        >{{ displayWeight !== null ? 'refaire une pesee' : 'peser' }}</button>
-        <button
+        >{{ displayWeight !== null ? 'refaire une pesée' : 'peser' }}</UiButton>
+        <UiButton
             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</button>
-        <button
+        >Valider la pesée</UiButton>
+        <UiButton
             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</button>
+        >Générer le bon</UiButton>
     </div>
 </template>
 

frontend/components/ui/UiButton.vue

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

frontend/components/ui/UiCheckbox.vue

@@ -1,14 +1,14 @@
 <template>
     <div :class="wrapperClass">
         <label
-            class="flex items-center gap-2"
+            class="flex items-center gap-2 cursor-pointer text-primary-700"
             :class="labelClass"
         >
             <input
                 type="checkbox"
                 :checked="checked"
                 :disabled="disabled"
-                :class="inputClass"
+                :class="['h-4 w-4 cursor-pointer text-primary-500', inputClass]"
                 @change="onChange"
             >
             <span v-if="label">{{ label }}</span>

frontend/components/ui/UiDateInput.vue

@@ -3,7 +3,7 @@
         <label
             v-if="label"
             :for="id"
-            class="font-bold uppercase text-xl mb-2"
+            class="font-bold uppercase text-xl text-primary-700"
             :class="labelClass"
         >
             {{ label }}
@@ -14,9 +14,9 @@
             :value="modelValue ?? ''"
             :disabled="disabled"
             v-bind="attrs"
-            class="border-b border-black justify-self-start text-xl pb-[6px] uppercase bg-transparent appearance-none h-[34px]"
+            class="border-b border-primary-700 justify-self-start text-xl text-primary-700 py-[6px] uppercase bg-transparent appearance-none h-[34px]"
             :class="[
-                isEmpty ? 'text-neutral-400' : 'text-black',
+                isEmpty ? 'text-neutral-400' : 'text-primary-700',
                 disabled ? 'cursor-not-allowed' : 'cursor-pointer',
                 inputClass
             ]"

frontend/components/ui/UiNumberInput.vue

@@ -1,9 +1,10 @@
+// flex row passer en class wraper class flex col ainsi que le wfull 34
 <template>
-    <div :class="['flex flex-row items-center gap-2', wrapperClass]">
+    <div :class="['flex', wrapperClass]">
         <label
             v-if="label"
             :for="id"
-            class="text-xl flex items-center"
+            class="text-xl flex items-center gap-2 text-primary-700"
             :class="labelClass"
         >
             <span
@@ -25,7 +26,7 @@
             :step="step"
             :disabled="disabled"
             v-bind="attrs"
-            class="border-b border-black text-xl bg-transparent w-16"
+            class="border-b border-primary-700 justify-self-start text-xl text-primary-700 py-[6px] uppercase bg-transparent appearance-none h-[34px]"
             :class="[
                 isEmpty ? 'text-neutral-400' : 'text-black',
                 disabled ? 'cursor-not-allowed' : 'cursor-text',
@@ -74,14 +75,41 @@ const emit = defineEmits<{
 const attrs = useAttrs()
 const isEmpty = computed(() => props.modelValue === null || props.modelValue === undefined || props.modelValue === '')
 
+const toNumberOrNull = (value: number | string | undefined) => {
+    if (value === undefined || value === '') {
+        return null
+    }
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : null
+}
+
 const onInput = (event: Event) => {
     const target = event.target as HTMLInputElement
     if (target.value === '') {
         emit('update:modelValue', null)
         return
     }
-    const numeric = Math.max(0, Number(target.value))
-    emit('update:modelValue', Number.isNaN(numeric) ? null : numeric)
+    const parsed = Number(target.value)
+    if (!Number.isFinite(parsed)) {
+        emit('update:modelValue', null)
+        return
+    }
+
+    const min = toNumberOrNull(props.min)
+    const max = toNumberOrNull(props.max)
+
+    let numeric = parsed
+    if (min !== null) {
+        numeric = Math.max(min, numeric)
+    } else {
+        numeric = Math.max(0, numeric)
+    }
+    if (max !== null) {
+        numeric = Math.min(max, numeric)
+    }
+
+    target.value = String(numeric)
+    emit('update:modelValue', numeric)
 }
 
 const onKeydown = (event: KeyboardEvent) => {

frontend/components/ui/UiRadioGroup.vue

@@ -0,0 +1,93 @@
+<template>
+    <div :class="['flex flex-col', wrapperClass]">
+        <label
+            v-if="label"
+            class="font-bold uppercase text-xl text-primary-700"
+            :class="labelClass"
+        >
+            {{ label }}
+        </label>
+        <div
+            role="radiogroup"
+            :aria-label="label || id || 'radio-group'"
+            :class="['flex items-center gap-6 mt-1', groupClass]"
+        >
+            <label
+                v-for="option in options"
+                :key="String(option.value)"
+                :for="`${id || 'radio'}-${option.value}`"
+                class="flex items-center gap-2 text-primary-700"
+                :class="itemClass"
+            >
+                <input
+                    :id="`${id || 'radio'}-${option.value}`"
+                    type="radio"
+                    :name="name || id || 'radio-group'"
+                    :value="String(option.value)"
+                    :checked="String(modelValue ?? '') === String(option.value)"
+                    :disabled="disabled"
+                    v-bind="attrs"
+                    class="h-4 w-4 border-primary-700/50 text-primary-700 focus:ring-primary-700"
+                    :class="[
+                        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+                        inputClass
+                    ]"
+                    @change="onChange"
+                >
+                <span class="text-xl" :class="optionLabelClass">
+                    {{ option.label }}
+                </span>
+            </label>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+
+type RadioOption = {
+    value: string | number
+    label: string
+}
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+    defineProps<{
+        id?: string
+        name?: string
+        label?: string
+        modelValue: string | number | null | undefined
+        options: RadioOption[]
+        disabled?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        groupClass?: string
+        itemClass?: string
+        inputClass?: string
+        optionLabelClass?: string
+    }>(),
+    {
+        name: '',
+        label: '',
+        disabled: false,
+        wrapperClass: '',
+        labelClass: '',
+        groupClass: '',
+        itemClass: '',
+        inputClass: '',
+        optionLabelClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: string): void
+}>()
+
+const attrs = useAttrs()
+
+const onChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    emit('update:modelValue', target.value)
+}
+</script>

frontend/components/ui/UiSelect.vue

@@ -3,7 +3,7 @@
         <label
             v-if="label"
             :for="id"
-            class="font-bold uppercase text-xl mb-2"
+            class="font-bold uppercase text-xl text-primary-700"
             :class="labelClass"
         >
             {{ label }}
@@ -13,9 +13,9 @@
             :value="modelValue ?? ''"
             :disabled="disabled || loading"
             v-bind="attrs"
-            class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
+            class="border-b border-primary-700 justify-self-start text-xl text-primary-700 py-[6px] bg-transparent"
             :class="[
-                isEmpty ? 'text-neutral-400' : 'text-black',
+                isEmpty ? 'text-neutral-400' : 'text-primary-700',
                 disabled || loading ? 'cursor-not-allowed' : 'cursor-pointer',
                 selectClass
             ]"
@@ -28,7 +28,7 @@
                 v-for="option in options"
                 :key="option.value"
                 :value="option.value"
-                class="text-black"
+                class="text-primary-700"
             >
                 {{ option.label }}
             </option>

frontend/components/ui/UiTextInput.vue

@@ -3,7 +3,7 @@
         <label
             v-if="label"
             :for="id"
-            class="font-bold uppercase text-xl mb-2"
+            class="font-bold uppercase text-xl text-primary-500"
             :class="labelClass"
         >
             {{ label }}
@@ -16,7 +16,7 @@
             :maxlength="maxlength"
             :disabled="disabled"
             v-bind="attrs"
-            class="border-b border-black text-xl pb-[6px] bg-transparent"
+            class="border-b border-black text-xl py-[6px] bg-transparent text-primary-500"
             :class="[
                 isEmpty ? 'text-neutral-400' : 'text-black',
                 disabled ? 'cursor-not-allowed' : 'cursor-text',

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 mb-2">{{ label }}</label>
+    <label :for="inputId" class="font-bold uppercase text-xl text-primary-500">{{ 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 uppercase h-[30px]"
+              class="border-b border-black flex-1 min-w-0 text-xl text-primary-500 uppercase h-[36px] py-[6px]"
               @input="handleInput"
           />
           <UiCheckbox

frontend/components/ui/stepper.vue

@@ -4,7 +4,7 @@
             <div
                 v-for="(label, index) in labels"
                 :key="label"
-                class="absolute top-0 whitespace-nowrap"
+                class="absolute top-0 whitespace-nowrap text-primary-500"
                 :class="labelClass(index)"
                 :style="positionStyle(index)"
             >

frontend/constants/steps.ts

@@ -1,9 +1,10 @@
 export enum StepLabel {
     Reception = 'Réception',
     GrossWeighing = 'Pesée à plein',
-    Selection = 'Sélection réceptionnées',
+    Selection = 'Sélection réception',
     TareWeighing = 'Pesée à vide',
     Shipment = 'Expédition',
+    ShipmentLoading = 'Chargement',
 }
 
 export const RECEPTION_STEP_LABELS = [
@@ -16,5 +17,6 @@ export const RECEPTION_STEP_LABELS = [
 export const SHIPMENT_STEP_LABELS = [
     StepLabel.Shipment,
     StepLabel.TareWeighing,
+    StepLabel.ShipmentLoading,
     StepLabel.GrossWeighing,
 ]

frontend/layouts/admin.vue

@@ -1,106 +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">
-                        Client
-                    </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,165 @@
 <template>
-    <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">
+    <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) -->
                 <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>
+
+                    <NuxtLink
+                        v-if="auth.isAdmin"
+                        to="/admin/bovin/list"
+                        custom
+                        v-slot="{ href, navigate }"
+                    >
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="route.path.startsWith('/admin/bovin')
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
+                        >
+                            Bovins
                         </a>
                     </NuxtLink>
                 </nav>
-                <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>
+
+                <!-- Spacer mobile (pour centrer visuellement le header si besoin) -->
                 <div class="w-[44px] md:hidden"></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>
+
+                <!-- 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>
             </div>
+
+            <!-- Overlay (mobile) -->
             <transition
                 enter-active-class="transition duration-200 ease-out"
                 enter-from-class="opacity-0"
@@ -63,6 +174,8 @@
                     @click="closeMenu"
                 />
             </transition>
+
+            <!-- Drawer (mobile) -->
             <transition
                 enter-active-class="transition duration-200 ease-out"
                 enter-from-class="-translate-x-full"
@@ -73,9 +186,7 @@
             >
                 <aside
                     v-if="isMenuOpen"
-                    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"
+                    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"
                 >
                     <div class="flex items-center justify-between">
                         <span class="text-2xl font-bold uppercase">Menu</span>
@@ -88,12 +199,30 @@
                             <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>
+                        <NuxtLink v-if="auth.isAdmin" to="/admin/bovin/list" @click="closeMenu">
+                            Bovins
+                        </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 +230,10 @@
                 </aside>
             </transition>
         </header>
-        <main class="mx-auto w-full max-w-[1280px]">
+        <main class="mx-auto w-full max-w-[1280px] mt-16">
             <slot/>
         </main>
-        <footer class="w-full mt-8 bg-primary-500 p-6">
+        <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,9 +244,12 @@ import {useAuthStore} from '~/stores/auth'
 
 const route = useRoute()
 const auth = useAuthStore()
-const isMenuOpen = ref(false)
 const {version} = useAppVersion()
 
+const isMenuOpen = ref(false)
+
+const userDisplayName = computed(() => auth.user?.username ?? 'Utilisateur')
+
 const closeMenu = () => {
     isMenuOpen.value = false
 }

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

@@ -0,0 +1,104 @@
+<template>
+    <form @submit.prevent="validate">
+        <div class="text-primary-500 flex items-center justify-between">
+            <h1 class="text-3xl font-bold uppercase">
+                {{ route.params.id ? 'Modifier bovin' : 'Ajout bovin' }}
+            </h1>
+
+            <UiButton
+                type="submit"
+                :disabled="isLoading || isHydrating"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] hover:opacity-80"
+            >
+                <Icon name="mdi:check" size="28" />
+                {{ isEdit ? 'Modifier' : 'Ajouter' }}
+            </UiButton>
+        </div>
+
+        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 py-12">
+            <UiTextInput label="Nom du bovin" id="bovin-label" v-model="form.label" />
+            <UiTextInput label="Code bovin" id="code-id" v-model="form.code" />
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import {createBovin, getBovin, updateBovin} from "~/services/bovine-type";
+import type {BovineTypeData, BovinFormData} from "~/services/dto/bovine-type-data";
+const router = useRouter()
+const route = useRoute()
+const isLoading = ref(false)
+const isHydrating = ref(false)
+
+function 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 idBovin = computed(() => resolveId(route.params.id))
+const isEdit = computed(() => idBovin.value !== null)
+
+const form = reactive<BovinFormData>({
+    label: '',
+    code: ''
+})
+
+
+const hydrateFromBovin = (bovin: BovineTypeData | null) => {
+    if (!bovin) {
+        return
+    }
+    isHydrating.value = true
+    form.label = bovin.label ?? ''
+    form.code = bovin.code ?? ''
+    isHydrating.value = false
+}
+
+watch(
+    () => idBovin.value,
+    async (id) => {
+        if (id === null) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const bovin = await getBovin(id)
+            hydrateFromBovin(bovin)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+async function validate() {
+    if (isLoading.value || isHydrating.value) return
+
+    const normalizedBovinCode = form.code.trim()
+    const normalizedBovinLabel = form.label.trim()
+
+
+    const basePayload = {
+        label: normalizedBovinLabel,
+        code: normalizedBovinCode
+
+    }
+
+    isLoading.value = true
+    try {
+        if (isEdit.value && idBovin.value !== null) {
+            await updateBovin(idBovin.value, basePayload)
+        } else {
+            await createBovin(basePayload)
+        }
+        await navigate()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+async function navigate(){
+    return router.push("/admin/bovin/list")
+}
+</script>

frontend/pages/admin/bovin/list.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="flex items-center justify-between">
+        <h1 class="text-3xl font-bold text-primary-500 uppercase">Liste des types bovins</h1>
+        <NuxtLink
+            to="/admin/bovin"
+            class="inline-flex items-center justify-center
+                   text-xl text-white uppercase
+                   bg-primary-500 h-[50px] px-8 rounded
+                   hover:opacity-80 gap-2"
+            @click="handleAddClick"
+        >
+            <Icon name="mdi:plus" size="28"  />
+            Ajouter
+        </NuxtLink>
+    </div>
+    <div v-if="auth.isAdmin" class="mt-6 border border-slate-200 mb-16">
+        <div class="max-h-96 overflow-y-auto">
+            <div
+                class="sticky
+                       grid grid-cols-2 gap-4
+                       bg-slate-100 px-4 py-3
+                       font-semibold uppercase
+                       tracking-wide"
+            >
+                <div class="col-span-1">Nom</div>
+                <div class="col-span-1">Code</div>
+            </div>
+            <div v-if="bovinList.length === 0" class="px-4 py-6 text-slate-400">
+                Aucun type de bovin.
+            </div>
+            <div v-else>
+                <div
+                    v-for="bovin in bovinList"
+                    :key="bovin.id"
+                    class="grid grid-cols-2 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
+                    @click="goToBovin(bovin.id)"
+                >
+                    <div class="col-span-1">{{ bovin.label }}</div>
+                    <div class="col-span-1">{{ bovin.code }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
+        Accès réservé aux administrateurs.
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getBovineTypeList } from "~/services/bovine-type"
+import type { BovineTypeData } from "~/services/dto/bovine-type-data"
+import { useAuthStore } from "~/stores/auth"
+
+const bovinList = ref<BovineTypeData[]>([])
+const router = useRouter()
+const auth = useAuthStore()
+
+const goToBovin = (id: number) => {
+    if (!auth.isAdmin) return
+    router.push(`/admin/bovin/${id}`)
+}
+
+const handleAddClick = (event: Event) => {
+    if (auth.isAdmin) return
+    event.preventDefault()
+}
+
+onMounted(async () => {
+    if (!auth.isAdmin) return
+    bovinList.value = await getBovineTypeList()
+})
+</script>

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>
 
-        <button
+        <UiButton
             type="submit"
             class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
         >Enregistrer
-        </button>
+        </UiButton>
     </div>
 
-    <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
+    <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 py-12">
         <UiTextInput
             label = "nom du fournisseur"
             id="carrier-name"
@@ -33,19 +33,27 @@
 <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 = Number(route.params.id)
+const idCarrier = computed(() => resolveId(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: 'admin'
+    layout: 'default'
 })
 
 const hydrateFromUser = (carrier: CarrierData | null) => {
@@ -59,7 +67,7 @@ const hydrateFromUser = (carrier: CarrierData | null) => {
 }
 
 watch(
-    () => idCarrier,
+    () => idCarrier.value,
     async (id) => {
         if (id === null) {
             return
@@ -85,8 +93,8 @@ async function validate() {
 
     }
 
-    if(idCarrier){
-        await updateCarrier(idCarrier, basePayload)
+    if(idCarrier.value){
+        await updateCarrier(idCarrier.value, basePayload)
         navigate()
         return
     }

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

@@ -1,11 +1,13 @@
 <template>
 
     <div class="flex items-center justify-between ">
-            <h1 class="text-3xl font-bold uppercase">listes des transporteurs</h1>
+            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
             <NuxtLink
                 to="/admin/carrier"
-                class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-            >Ajouter
+                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
             </NuxtLink>
     </div>
 
@@ -42,7 +44,7 @@ const goToCarrier = (id: number) => {
 }
 
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 
 onMounted(async () => {

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

@@ -5,13 +5,13 @@
                 {{ customerId ? "Modifications du client" : "Ajout d'un client" }}
             </h1>
 
-            <button
+            <UiButton
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
                 type="submit"
                 :disabled="isLoading || !auth.isAdmin"
             >
                 {{ customerId ? "Sauvegarder" : "Ajouter" }}
-            </button>
+            </UiButton>
         </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>
-            <button
+            <UiButton
                 type="button"
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
                 :disabled="customerId === null || !auth.isAdmin"
                 @click="goToAddAddress"
             >
                 Ajouter
-            </button>
+            </UiButton>
         </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: "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

@@ -1,12 +1,13 @@
 <template>
     <div class="flex items-center justify-between">
-        <h1 class="text-3xl font-bold uppercase">Liste des Clients</h1>
+        <h1 class="text-3xl font-bold uppercase text-primary-500">Liste des Clients</h1>
         <NuxtLink
             to="/admin/customer"
-            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            class="inline-flex items-center justify-center gap-2 text-xl uppercase bg-primary-500 text-white h-[50px] px-8 rounded-md"
             :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
             @click="handleAddClick"
         >
+            <Icon name="mdi:plus" size="28"  />
             Ajouter
         </NuxtLink>
     </div>
@@ -93,7 +94,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

@@ -5,13 +5,13 @@
                 {{ supplierId ? "Modifications du fournisseur" : "Ajout d'un fournisseur" }}
             </h1>
 
-            <button
+            <UiButton
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
                 type="submit"
                 :disabled="isLoading || !auth.isAdmin"
             >
                 {{ supplierId ? "Sauvegarder" : "Ajouter" }}
-            </button>
+            </UiButton>
         </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>
-            <button
+            <UiButton
                 type="button"
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
                 :disabled="supplierId === null || !auth.isAdmin"
                 @click="goToAddAddress"
             >
                 Ajouter
-            </button>
+            </UiButton>
         </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: "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

@@ -1,12 +1,13 @@
 <template>
     <div class="flex items-center justify-between">
-        <h1 class="text-3xl font-bold uppercase">Liste des fournisseurs</h1>
+        <h1 class="text-3xl font-bold uppercase text-primary-500">Liste des fournisseurs</h1>
         <NuxtLink
             to="/admin/supplier"
-            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            class="inline-flex items-center justify-center gap-2 text-xl uppercase bg-primary-500 text-white h-[50px] px-8 rounded"
             :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
             @click="handleAddClick"
         >
+            <Icon name="mdi:plus" size="28"  />
             Ajouter
         </NuxtLink>
     </div>
@@ -89,7 +90,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

@@ -5,15 +5,15 @@
             <h1 class="text-3xl font-bold uppercase">
                 {{ userId ? "Modifications de l'utilisateur" : "Ajout d'un utilisateur" }}
             </h1>
-            <button
+            <UiButton
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
                 type="submit"
             >
                 {{ userId ? 'Sauvegarder' : 'Ajouter' }}
-            </button>
+            </UiButton>
         </div>
 
-        <div class="grid gap-y-16 gap-x-40 mb-16">
+        <div class="grid gap-y-16 gap-x-40 py-12">
             <UiTextInput
                 id="user-name"
                 v-model="form.username"
@@ -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

@@ -1,10 +1,11 @@
 <template>
     <div class="flex items-center justify-between">
-        <h1 class="text-3xl font-bold uppercase">Liste des utilisateurs</h1>
+        <h1 class="text-3xl font-bold uppercase text-primary-500">Liste des utilisateurs</h1>
         <NuxtLink
-            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            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/')"
         >
+            <Icon name="mdi:plus" size="28"  />
             Ajouter
         </NuxtLink>
 
@@ -28,7 +29,7 @@
                     {{ user.username }}
                 </div>
                 <div>
-                    {{ user.roles?.join(', ') || ' ---' }}
+                    {{ getRoleLabels(user.roles) }}
                 </div>
             </div>
         </div>
@@ -38,19 +39,31 @@
 
 <script setup lang="ts">
 definePageMeta({
-    layout: 'admin'
+    layout: 'default'
 })
 
 import type {UserData} from "~/services/dto/user-data";
-import {getAdminUsers, getUsers} from "~/services/auth";
+import {getAdminUsers} from "~/services/auth";
+import {ROLE} from "~/utils/constants";
 
 const userList = ref<UserData[]>([])
 const router = useRouter()
+const roleLabelByValue = new Map(ROLE.map((role) => [role.value, role.label]))
 
 const goToUser = (id: number) => {
     router.push(`/admin/user/${id}`)
 }
 
+const getRoleLabels = (roles?: string[]) => {
+    if (!roles || roles.length === 0) {
+        return ' ---'
+    }
+
+    return roles
+        .map((role) => roleLabelByValue.get(role) ?? role)
+        .join(', ')
+}
+
 onMounted(async () => {
     userList.value = await getAdminUsers()
 })

frontend/pages/index.vue

@@ -1,15 +1,27 @@
 <script setup lang="ts">
 </script>
 <template>
-    <div class="flex flex-wrap justify-center mt-8 gap-8 mb-8 md:mb-0">
+    <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="mdi:warehouse" />
-        <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="mdi:cube-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="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 label="PASSEPORT DU BOVIN" link="/" iconName="mdi:cow" />
+        <card-link link="/" iconName="mdi:cow">
+            <template #label>
+                PASSEPORT<br>DU BOVIN
+            </template>
+        </card-link>
     </div>
 </template>

frontend/pages/login.vue

@@ -39,13 +39,13 @@
         />
       </div>
 
-      <button
+      <UiButton
         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
-      </button>
+      </UiButton>
           <p class="font-bold">v{{ version }}</p>
       </form>
   </div>

frontend/pages/reception/[[id]].vue

@@ -1,29 +1,28 @@
 <template>
-    <div>
-        <div class="flex justify-between h-[52px] mt-6 mb-[80px]">
-            <div class="flex flex-1 mr-16">
-                <UiStepper
-                    :labels="RECEPTION_STEP_LABELS"
-                    :current-step="storeReception?.currentStep ?? 0"
-                    @select="handleStepSelect"
-                />
-            </div>
-            <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</button>
+    <div class="flex justify-between h-[52px] mb-[80px]">
+        <div class="flex flex-1 mr-16">
+            <UiStepper
+                :labels="RECEPTION_STEP_LABELS"
+                :current-step="storeReception?.currentStep ?? 0"
+                @select="handleStepSelect"
+            />
         </div>
-        <ReceptionForm v-if="!storeReception || storeReception.currentStep === 0"/>
-        <ReceptionWeight v-if="storeReception?.currentStep === 1" mode="gross"/>
-        <ReceptionProductReceived
-            v-if="storeReception?.currentStep === 2 &&
-            receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"/>
-        <ReceptionBovineReceived
-            v-if="storeReception?.currentStep === 2 &&
-            receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"/>
-        <ReceptionWeight v-if="storeReception?.currentStep !== null && storeReception?.currentStep >= 3" mode="tare"/>
+        <UiButton
+            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>
     </div>
+    <ReceptionForm v-if="!storeReception || storeReception.currentStep === 0"/>
+    <ReceptionWeight v-if="storeReception?.currentStep === 1" mode="gross"/>
+    <ReceptionProductReceived
+        v-if="storeReception?.currentStep === 2 &&
+            receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"/>
+    <ReceptionBovineReceived
+        v-if="storeReception?.currentStep === 2 &&
+            receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"/>
+    <ReceptionWeight v-if="storeReception?.currentStep !== null && storeReception?.currentStep >= 3" mode="tare"/>
 </template>
 
 <script setup lang="ts">

frontend/pages/reception/finish-reception.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="flex items-center justify-start gap-10">
-            <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44" />
-            <h1 class="text-3xl font-bold uppercase">listes des réceptions finie</h1>
+            <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>
 
-    <div class="ps-20 " >
+    <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>
@@ -27,7 +27,7 @@
                 <div>{{ reception.supplier?.name }}</div>
                 <div>{{ reception.address?.fullAddress }}</div>
                 <div>{{ reception.receptionType?.label }}</div>
-                <div>{{ formatWeighing(reception, 'gross') }} | {{ formatWeighing(reception, 'tare') }}</div>
+                <div>{{ formatWeighing(reception) }}</div>
             </div>
         </div>
     </div>
@@ -36,16 +36,20 @@
 <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, type: 'gross' | 'tare') => {
-    const entry = reception.weights?.find((weight) => weight.type === type)
-    if (!entry || entry.weight == null || entry.dsd == null) {
+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 `${entry.weight} kg`
+
+    return `${gross - tare} kg`
 }
 
 const goToReception = (id: number) => {

frontend/pages/reception/update/[[id]].vue

@@ -1,10 +1,15 @@
 <template>
 
     <form @submit.prevent="validate">
-        <div class="flex items-center justify-between mt-12 mb-8 ">
-            <h1 class="font-bold text-5xl uppercase">Réception {{ receptionLoad?.identificationNumber }}</h1>
-        </div>
-        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-12">
+        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-[60px]">
+            <div class="flex items-center justify-between gap-10 relative">
+                <div class="flex flex-row absolute -left-[60px] justify-between">
+                    <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
+                </div>
+                <h1 class="font-bold text-4xl col-start-1 row-start-1 text-primary-500 uppercase">Réception {{ form.identificationNumber }}</h1>
+                <Icon @click="router.push('/')" name="mdi:printer-outline" size="44" class="cursor-pointer text-primary-500"/>
+            </div>
+
             <!--    Nom de l'utilisateur       -->
             <UiSelect
                 id="reception-user"
@@ -16,7 +21,7 @@
                     label: user.username
                 }))"
                 :loading="isLoadingUsers"
-                wrapper-class="col-start-1 row-start-1"
+                wrapper-class="col-start-1 row-start-2"
             />
             <!--    Date de réception        -->
             <UiDateInput
@@ -24,7 +29,20 @@
                 :disabled="!auth.isAdmin"
                 v-model="form.receptionDate"
                 label="Date de réception"
-                wrapper-class="col-start-1 row-start-2"
+                wrapper-class="col-start-1 row-start-3"
+            />
+            <!--    type de reception        -->
+            <UiSelect
+                id="reception-supplier"
+                v-model="form.receptionTypeId"
+                :disabled="!auth.isAdmin"
+                label="Type de Réception"
+                :options="receptionTypes.map((receptionType) => ({
+                    value: String(receptionType.id),
+                    label: receptionType.label
+                }))"
+                :loading="isLoadingSuppliers"
+                wrapper-class="col-start-1 row-start-4"
             />
             <!--    Fournisseur        -->
             <UiSelect
@@ -37,7 +55,7 @@
                     label: supplier.name
                 }))"
                 :loading="isLoadingSuppliers"
-                wrapper-class="col-start-1 row-start-3"
+                wrapper-class="col-start-1 row-start-5"
             />
             <!--    Adresse fournisseur        -->
             <UiSelect
@@ -49,7 +67,7 @@
                     label: address.fullAddress
                 }))"
                 :disabled="(isLoadingSuppliers || supplierAddresses.length === 0) && !auth.isAdmin"
-                wrapper-class="col-start-1 row-start-4"
+                wrapper-class="col-start-2 row-start-1"
             />
             <!--    Camion        -->
             <UiSelect
@@ -62,7 +80,7 @@
                     label: truck.name
                 }))"
                 :loading="isLoadingTrucks"
-                wrapper-class="col-start-2 row-start-1"
+                wrapper-class="col-start-2 row-start-2"
             />
             <!--    Transporteur        -->
             <UiSelect
@@ -76,7 +94,7 @@
                 }))"
                 :loading="isLoadingCarriers"
                 select-class="h-[34px]"
-                wrapper-class="col-start-2 row-start-2"
+                wrapper-class="col-start-2 row-start-3"
             />
             <!--    Chauffeur (LIOT)        -->
             <UiSelect
@@ -89,10 +107,10 @@
                     label: driver.name
                 }))"
                 :loading="isLoadingDrivers"
-                wrapper-class="col-start-2 row-start-3"
+                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
                     :disabled="!auth.isAdmin"
                     v-model="form.licensePlate"
@@ -111,30 +129,28 @@
                 }))"
                 :loading="isLoadingVehicles"
                 :disabled="(isLoadingVehicles || filteredVehicles.length === 0) && !auth.isAdmin"
-                wrapper-class="col-start-2 row-start-4"
+                wrapper-class="col-start-2 row-start-5"
             />
         </div>
-        <div class="flex justify-center mb-2">
-            <button
-                v-if="auth.isAdmin"
-                type="submit"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] mb-16"
-
-            >
-                Enregistrer
-            </button>
-        </div>
-            <div class="flex justify-evenly gap-y-8 gap-x-40 mb-8 border-b border-slate-400">
+            <div v-if="formIsLoading">
+            <div class="flex justify-evenly gap-y-8 gap-x-41 mb-10 border-b border-primary-500/60">
                 <h1
-                    class="font-bold text-3xl uppercase col-start-1 row-start-1 cursor-pointer"
-                    :class="activeTab === 'weights' ? 'underline' : ''"
-                    @click="activeTab = 'weights'"
+                    class="font-bold text-3xl uppercase px-12 col-start-1 row-start-1  cursor-pointer "
+                    :class="activeTab === 'weightsEmpty' ? 'border-b-[6px] border-primary-500 text-primary-500' : 'text-primary-500/50'"
+                    @click="activeTab = 'weightsEmpty'"
                 >
-                    pesées
+                    pesée à plein
                 </h1>
                 <h1
-                    class="font-bold text-3xl uppercase col-start-2 row-start-1 cursor-pointer"
-                    :class="activeTab === 'merchandise' ? 'underline' : ''"
+                    class="font-bold text-3xl uppercase col-start-1 row-start-1 px-12 cursor-pointer "
+                    :class="activeTab === 'weights' ? 'border-b-[6px] border-primary-500 text-primary-500 ' : 'text-primary-500/50'"
+                    @click="activeTab = 'weights'"
+                >
+                    pesée à vide
+                </h1>
+                <h1
+                    class="font-bold text-3xl uppercase px-12 col-start-2 row-start-1 cursor-pointer "
+                    :class="activeTab === 'merchandise' ? 'border-b-[6px] border-primary-500 text-primary-500' : 'text-primary-500/50'"
                     @click="activeTab = 'merchandise'"
                 >
                     {{ isMerchandise ? "Marchandise" : "Bovins" }}
@@ -142,22 +158,47 @@
             </div>
 
             <update-weight
-                v-if="activeTab === 'weights'"
+                v-show="activeTab === 'weights'"
                 :idReception="idReception"
+                :weightType="'tare'"
                 :disabled="!auth.isAdmin"
+                :isValidate="isValid"
             />
+            <div class="mb-12 ">
+                <update-weight
+                    v-show="activeTab === 'weightsEmpty'"
+                    :idReception="idReception"
+                    :weightType="'gross'"
+                    :disabled="!auth.isAdmin"
+                    :isValidate="isValid"
+                />
 
-            <update-merchandise
-                v-else-if="activeTab === 'merchandise' && isMerchandise"
-                :idReception="idReception"
-                :disabled="!auth.isAdmin"
-            />
+                <update-merchandise
+                    v-show="activeTab === 'merchandise' && isMerchandise"
+                    :idReception="idReception"
+                    :disabled="!auth.isAdmin"
+                    :isValidate="isValidMerchandise"
+                />
 
-            <update-bovin
-                v-else
-                :idReception="idReception"
-                :disabled="!auth.isAdmin"
-            />
+                <update-bovin
+                    v-show="activeTab === 'merchandise' && !isMerchandise"
+                    :idReception="idReception"
+                    :disabled="!auth.isAdmin"
+                    :isValidate="isValidBovin"
+
+                />
+            </div>
+                <div class="flex justify-center">
+                <UiButton
+                    v-if="auth.isAdmin"
+                    type="submit"
+                    class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] mb-16"
+
+                >
+                    Enregistrer
+                </UiButton>
+            </div>
+            </div>
     </form>
 </template>
 
@@ -176,18 +217,21 @@ import type {DriverData} from '~/services/dto/driver-data'
 import {getDriverList} from '~/services/driver'
 import type {VehicleData} from '~/services/dto/vehicle-data'
 import {getVehicleList} from '~/services/vehicle'
-import {SUPPLIER_CODE} from "~/utils/constants";
-import {deleteReceptionBovine, getReceptionBovineList} from "~/services/reception-bovine";
+import {RECEPTION_TYPE_CODES, SUPPLIER_CODE} from "~/utils/constants";
+import {deleteReceptionBovine, getReceptionBovineList,} from "~/services/reception-bovine";
 import type {ReceptionData, ReceptionFormData} from "~/services/dto/reception-data";
-import {getReception} from "~/services/reception";
+import {getReception, updateReception} from "~/services/reception";
 import UpdateWeight from "~/components/reception/update-weight.vue";
 import UpdateMerchandise from "~/components/reception/update-merchandise.vue";
 import UpdateBovin from "~/components/reception/update-bovin.vue";
+import {getReceptionTypeList} from "~/services/reception-type";
+import type {ReceptionTypeData} from "~/services/dto/reception-type-data";
+import {computed} from "vue";
+import {updateWeight} from "~/services/weight";
+import {deleteReceptionPelletBuilding, getReceptionPelletBuildingList} from "~/services/reception-pellet-building";
 
-const activeTab = ref<'weights' | 'merchandise'>('weights')
-const router = useRouter()
-const receptionStore = useReceptionStore()
 const form = reactive<ReceptionFormData>({
+    identificationNumber: null,
     licensePlate: '',
     receptionDate: new Date().toISOString().slice(0, 10),
     receptionTypeId: '',
@@ -199,11 +243,17 @@ const form = reactive<ReceptionFormData>({
     driverId: '',
     vehicleId: ''
 })
+
+const activeTab = ref<'weights' | 'weightsEmpty' | 'merchandise'>('weights')
+const router = useRouter()
+const receptionStore = useReceptionStore()
 const allowAnyLicensePlate = ref(false)
 const isLoading = ref(false)
 const users = ref<UserData[]>([])
 const isLoadingUsers = ref(false)
+const isLoadingTypes = ref(false)
 const suppliers = ref<SupplierData[]>([])
+const receptionTypes = ref<ReceptionTypeData[]>([])
 const isLoadingSuppliers = ref(false)
 const trucks = ref<TruckData[]>([])
 const isLoadingTrucks = ref(false)
@@ -214,23 +264,26 @@ const isLoadingDrivers = ref(false)
 const vehicles = ref<VehicleData[]>([])
 const isLoadingVehicles = ref(false)
 const authStore = useAuthStore()
+const isValid = ref(false)
+const isValidBovin = ref(false)
+const isValidMerchandise = ref(false)
+const formIsLoading = ref(false)
+const route = useRoute()
+const idReception = Number(route.params.id)
+const auth = useAuthStore()
+const isMerchandise = ref(false)
 
 // Empêche les watchers de reset des champs pendant le remplissage initial
 const isHydrating = ref(false)
-const route = useRoute()
-const idReception = Number(route.params.id)
-const receptionLoad = await getReception(idReception)
-const receptionType = receptionLoad.receptionType
-const auth = useAuthStore()
-const isBtWeight = ref(true)
-const isMerchandise = ref(receptionType.code === 'MARCHANDISES')
 
 // Transporteur sélectionné dans le formulaire
 const selectedCarrier = computed(() =>
     carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
 )
+
 // Indique si le transporteur est LIOT
 const isLiotCarrier = computed(() => selectedCarrier.value?.code === SUPPLIER_CODE.LIOT)
+
 // Adresses disponibles pour le fournisseur sélectionné
 const supplierAddresses = computed(() => {
     const supplierId = Number(form.supplierId)
@@ -239,6 +292,7 @@ const supplierAddresses = computed(() => {
     }
     return suppliers.value.find((supplier) => supplier.id === supplierId)?.addresses ?? []
 })
+
 // Chauffeurs filtrés par transporteur (LIOT)
 const filteredDrivers = computed<DriverData[]>(() => {
     if (!form.carrierId) {
@@ -246,6 +300,7 @@ const filteredDrivers = computed<DriverData[]>(() => {
     }
     return drivers.value.filter((driver) => String(driver.carrier?.id) === form.carrierId)
 })
+
 // Véhicules filtrés par transporteur + type de camion
 const filteredVehicles = computed<VehicleData[]>(() => {
     if (!form.carrierId) {
@@ -259,18 +314,43 @@ const filteredVehicles = computed<VehicleData[]>(() => {
 })
 
 // Supprime les données bovines si on change de type de réception
-const clearReceptionBovines = async (receptionIri: string) => {
+const clearReceptionBovines = async (receptionId: number) => {
+    const receptionIri = `/api/receptions/${receptionId}`
     const existing = await getReceptionBovineList(receptionIri)
     for (const selection of existing) {
         await deleteReceptionBovine(selection.id)
     }
 }
 
-const hydrateFromUser = (reception: ReceptionData | null) => {
+const syncMerchandiseFlag = () => {
+    const receptionType =
+        receptionTypes.value.find((type) => String(type.id) === form.receptionTypeId) ?? null
+    isMerchandise.value = receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES
+}
+
+const clearReceptionMerchandise = async (receptionId: number) => {
+    const receptionIri = `/api/receptions/${receptionId}`
+
+    // supprime toutes les associations granulés/bâtiments
+    const existing = await getReceptionPelletBuildingList(receptionIri)
+    for (const selection of existing) {
+        await deleteReceptionPelletBuilding(selection.id)
+    }
+
+    // reset des champs marchandise
+    await updateReception(receptionId, {
+        merchandiseType: null,
+        merchandiseDetail: null,
+        buildings: []
+    })
+}
+
+const hydrateFromReception = (reception: ReceptionData | null) => {
     if (!reception) {
         return
     }
     isHydrating.value = true
+    form.identificationNumber = reception?.identificationNumber ?? ''
     form.licensePlate = reception?.licensePlate ?? ''
     form.receptionDate = reception?.receptionDate ?? new Date().toISOString().slice(0, 10)
     form.userId = reception?.user?.id
@@ -291,7 +371,11 @@ const hydrateFromUser = (reception: ReceptionData | null) => {
     form.driverId = reception?.driver?.id
         ? String(reception.driver.id)
         : ''
+    form.receptionTypeId = reception?.receptionType?.id
+        ? String(reception.receptionType.id)
+        : ''
     isHydrating.value = false
+    syncMerchandiseFlag()
 }
 
 watch(
@@ -302,8 +386,8 @@ watch(
         }
         isLoading.value = true
         try {
-            const user = await getReception(id)
-            hydrateFromUser(user)
+            const reception = await getReception(id)
+            hydrateFromReception(reception)
         } finally {
             isLoading.value = false
         }
@@ -311,6 +395,14 @@ watch(
     {immediate: true}
 )
 
+watch(
+    () => form.receptionTypeId,
+    () => {
+        const receptionType = receptionTypes.value.find((type) => String(type.id) === form.receptionTypeId) ?? null
+        isMerchandise.value = receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES
+    }
+)
+
 // Charge la liste des users pour le select
 const loadUsers = async () => {
     isLoadingUsers.value = true
@@ -331,6 +423,16 @@ const loadSuppliers = async () => {
     }
 }
 
+//charge la liste des types pour le select
+const loadTypes = async () => {
+    isLoadingTypes.value = true
+    try {
+        receptionTypes.value = await getReceptionTypeList()
+    } finally {
+        isLoadingSuppliers.value = false
+    }
+}
+
 // Charge la liste des camions pour le select
 const loadTrucks = async () => {
     isLoadingTrucks.value = true
@@ -371,7 +473,7 @@ const loadVehicles = async () => {
     }
 }
 
-// On met le user connecté par défaut dans le select
+// On met l'user connecté par défaut dans le select
 const setDefaultUser = () => {
     if (form.userId) {
         return
@@ -383,6 +485,9 @@ const setDefaultUser = () => {
 
 // On récupère toutes les données des selects au chargement du composant
 onMounted(async () => {
+    await loadTypes()
+    syncMerchandiseFlag()
+    formIsLoading.value =true
     await loadUsers()
     await loadSuppliers()
     await loadTrucks()
@@ -507,11 +612,10 @@ watch(
         }
     }
 )
-
-// Valide le formulaire et crée/met à jour la réception
 async function validate() {
     const normalizedLicensePlate = form.licensePlate.trim()
     const normalizedReceptionDate = form.receptionDate.trim()
+    const normalizedReceptionTypeId = form.receptionTypeId.trim()
     const normalizedUserId = form.userId.trim()
     const normalizedSupplierId = form.supplierId.trim()
     const normalizedAddressId = form.addressId.trim()
@@ -536,10 +640,14 @@ async function validate() {
     const driverIri = normalizedDriverId
         ? `/api/drivers/${normalizedDriverId}`
         : null
+    const typeIri = normalizedReceptionTypeId
+        ? `/api/reception_types/${normalizedReceptionTypeId}`
+        : null
 
     const basePayload = {
         licensePlate: normalizedLicensePlate,
         receptionDate: normalizedReceptionDate,
+        receptionType: typeIri,
         user: userIri,
         supplier: supplierIri,
         address: addressIri,
@@ -549,17 +657,27 @@ async function validate() {
 
     const payload = {
         ...basePayload,
-        ...(isLiotCarrier.value && driverIri ? {driver: driverIri} : {})
+        ...(isLiotCarrier.value && driverIri ? {driver: driverIri} : {}),
     }
 
     if (idReception) {
-        const updated = await receptionStore.updateReception(idReception, {
+        isValid.value = true
+        isMerchandise.value ? (isValidMerchandise.value = true) : (isValidBovin.value = true)
+        await receptionStore.updateReception(idReception, {
             ...payload
         })
-        if (updated) {
-            await router.push(`/reception/update/${updated.id}`)
+
+        if (isMerchandise.value) {
+            await clearReceptionBovines(idReception)
+        } else {
+            await clearReceptionMerchandise(idReception)
         }
-        router.push("/reception/finish-reception")
+
+        isValid.value = false
+        isValidBovin.value = false
+        isValidMerchandise.value = false
+
+        await router.push("/reception/finish-reception")
         return
     }
 }

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">
         <div class="flex items-center gap-10">
-            <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44" />
-            <h1 class="text-3xl font-bold uppercase">listes des réceptions en attente</h1>
+            <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>
         </div>
     </div>
 
-    <div class="ps-20 " >
-        <div class="mt-6 border border-slate-200 mb-16 ">
+    <div class="px-[86px]">
+        <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>

frontend/pages/shipment/[[id]].vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="flex justify-between h-[52px] mt-6 mb-[80px]">
+        <div class="flex justify-between h-[52px] mb-[80px]">
             <div class="flex flex-1 mr-16">
                 <UiStepper
                     :labels="SHIPMENT_STEP_LABELS"
@@ -9,16 +9,17 @@
 
                 />
             </div>
-            <button
+            <UiButton
                 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
-            </button>
+            </UiButton>
         </div>
         <ShipmentForm v-if="!storeShipment || storeShipment.currentStep === 0" ref="shipmentFormRef"/>
         <ShipmentWeight v-if="storeShipment?.currentStep === 1" mode="gross"/>
-        <ShipmentWeight v-if="storeShipment?.currentStep >= 2" mode="tare"/>
+        <ShipmentLoading v-if="storeShipment?.currentStep === 2"/>
+        <ShipmentWeight v-if="storeShipment?.currentStep === 3" mode="tare"/>
 
     </div>
 </template>

frontend/pages/shipment/finish-shipment.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="flex items-center justify-start gap-10">
-        <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44"/>
-        <h1 class="text-3xl font-bold uppercase">listes des expéditions finie</h1>
+        <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>
 
-    <div class="ps-20 ">
+    <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>
@@ -21,11 +21,11 @@
                 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="goToshipment(shipment.id)"
+                @click="goShipment(shipment.id)"
             >
                 <div>{{ shipment.identificationNumber }}</div>
                 <div>{{ shipment.shipmentDate }}</div>
-                <div>{{ shipment.customer?.label }}</div>
+                <div>{{ shipment.customer?.name }}</div>
                 <div>{{ shipment.address?.fullAddress }}</div>
                 <div>
                     <template v-if="formatBovinShipmentLines(shipment).length">
@@ -38,7 +38,7 @@
                         </div>
                     </template>
                 </div>
-                <div>{{ formatWeighing(shipment, 'gross') }} | {{ formatWeighing(shipment, 'tare') }}</div>
+                <div>{{ formatWeighing(shipment) }}</div>
             </div>
         </div>
     </div>
@@ -51,12 +51,15 @@ import {getShipmentList} from "~/services/shipment";
 const shipmentList = ref<ShipmentData[]>()
 const router = useRouter()
 
-const formatWeighing = (shipment: ShipmentData, type: 'gross' | 'tare') => {
-    const entry = shipment.weights?.find((weight) => weight.type === type)
-    if (!entry || entry.weight == null || entry.dsd == null) {
+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 `${entry.weight} kg`
+
+    return `${gross - tare} kg`
 }
 
 const formatBovinShipmentLines = (shipment: ShipmentData) => {
@@ -71,8 +74,8 @@ const formatBovinShipmentLines = (shipment: ShipmentData) => {
     })
 }
 
-const goToshipment = (id: number) => {
-    //router.push(`/shipment/update/${id}`)
+const goShipment = (id: number) => {
+    router.push(`/shipment/update/${id}`)
 }
 
 onMounted(async () => {

frontend/pages/shipment/waiting-shipment.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="flex items-center justify-between ">
+    <div class="flex items-center justify-between">
         <div class="flex items-center gap-10">
-            <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44"/>
-            <h1 class="text-3xl font-bold uppercase">listes des expéditions en attente</h1>
+            <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>
         </div>
     </div>
 
-    <div class="ps-20 ">
+    <div class="px-[86px]">
         <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>Client</div>

frontend/services/bovine-type.ts

@@ -1,5 +1,5 @@
 import { useApi } from '~/composables/useApi'
-import type {BovineTypeData} from "~/services/dto/bovine-type-data";
+import type { BovineTypeData, BovinPayload } from "~/services/dto/bovine-type-data";
 
 export type BovineTypeListResponse =
     | BovineTypeData[]
@@ -12,12 +12,41 @@ export async function getBovineTypeList(): Promise<BovineTypeData[]> {
     })
 
     if (Array.isArray(response)) {
-        return response
+        return response.map(mapToBovineTypeData)
     }
 
     if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
-        return response['hydra:member']
+        return response['hydra:member'].map(mapToBovineTypeData)
     }
 
     return []
 }
+
+export async function getBovin(id: number): Promise<BovineTypeData> {
+    const api = useApi()
+    const response = await api.get<BovineTypeData>(`bovine_types/${id}`)
+    return mapToBovineTypeData(response)
+}
+
+export async function createBovin(payload: BovinPayload = {}): Promise<BovineTypeData> {
+    const api = useApi()
+    const response = await api.post<BovineTypeData>('bovine_types', toBovineTypePayload(payload))
+    return mapToBovineTypeData(response)
+}
+
+export async function updateBovin(id: number, payload: BovinPayload = {}): Promise<BovineTypeData> {
+    const api = useApi()
+    const response = await api.patch<BovineTypeData>(`bovine_types/${id}`, toBovineTypePayload(payload))
+    return mapToBovineTypeData(response)
+}
+
+const mapToBovineTypeData = (item: BovineTypeData): BovineTypeData => ({
+    id: item.id,
+    label: item.label,
+    code: item.code
+})
+
+const toBovineTypePayload = (payload: BovinPayload): Partial<BovineTypeData> => ({
+    label: payload.label ?? undefined,
+    code: payload.code ?? undefined
+})

frontend/services/dto/address-data.ts

@@ -6,6 +6,7 @@ export interface AddressData {
     postalCode: string
     city: string
     countryCode: string
+    fullAddress: string
 }
 
 export interface AddressFormData {

frontend/services/dto/bovine-type-data.ts

@@ -3,3 +3,13 @@ export interface BovineTypeData{
     label: string
     code: string
 }
+
+export interface BovinFormData {
+    label: string
+    code: string
+}
+
+export type BovinPayload = {
+    label?: string | null
+    code?: string | null
+}

frontend/services/dto/reception-data.ts

@@ -69,6 +69,7 @@ export type ReceptionPayload = {
 }
 
 export type ReceptionFormData = {
+    identificationNumber?: null|string,
     licensePlate: string
     receptionDate: string
     receptionTypeId: string

frontend/tailwind.config.ts

@@ -8,17 +8,11 @@ export default <Partial<Config>>{
       },
       colors: {
         primary: {
-          50: '#f6f9ea',
-          100: '#eaf2cf',
-          200: '#d6e3a4',
-          300: '#c1d47a',
-          400: '#afc85a',
-          500: '#9ebb43',
-          600: '#7e9735',
-          700: '#607228',
-          800: '#414d1a',
-          900: '#24290d'
+          700: '#35453C',
+          500: '#456452',
+
         }
+
       }
     }
   }

migrations/Version20260213114000.php

@@ -0,0 +1,40 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260213114000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Allow only one bovin_shipment row per shipment.';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // Keep one row per shipment (latest id), required before adding unique index.
+        $this->addSql(<<<'SQL'
+            DELETE FROM bovin_shipment bs
+            USING (
+                SELECT id, ROW_NUMBER() OVER (PARTITION BY shipment_id ORDER BY id DESC) AS rn
+                FROM bovin_shipment
+                WHERE shipment_id IS NOT NULL
+            ) d
+            WHERE bs.id = d.id
+              AND d.rn > 1
+            SQL);
+
+        $this->addSql('DROP INDEX IF EXISTS uniq_bovin_shipment');
+        $this->addSql('CREATE UNIQUE INDEX uniq_bovin_shipment_one_type ON bovin_shipment (shipment_id)');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('DROP INDEX IF EXISTS uniq_bovin_shipment_one_type');
+        $this->addSql('CREATE UNIQUE INDEX uniq_bovin_shipment ON bovin_shipment (shipment_id, shipment_type_id)');
+    }
+}

src/Command/SeedCommand.php

@@ -168,6 +168,7 @@ class SeedCommand extends Command
             ['label' => 'Foin', 'code' => 'FOIN'],
             ['label' => 'Paille', 'code' => 'PAILLE'],
             ['label' => 'Granule', 'code' => 'GRANULE'],
+            ['label' => 'Autres', 'code' => 'AUTRES'],
         ];
         foreach ($merchandiseTypes as $type) {
             $this->upsertByCode(MerchandiseType::class, $type['code'], static function (MerchandiseType $entity) use ($type) {
@@ -250,8 +251,8 @@ class SeedCommand extends Command
     private function seedShipmentTypes(): void
     {
         $shipmentTypes = [
-            ['label' => 'Bovin de boucherie', 'code' => 'BDB'],
-            ['label' => "Bovin d'équarrissage", 'code' => 'BE'],
+            ['label' => 'Boucherie', 'code' => 'BDB'],
+            ['label' => 'Équarrissage', 'code' => 'BE'],
         ];
         foreach ($shipmentTypes as $type) {
             $this->upsertByCode(ShipmentType::class, $type['code'], static function (ShipmentType $entity) use ($type) {
@@ -539,10 +540,10 @@ class SeedCommand extends Command
                 'addresses' => [
                     [
                         'label'       => 'Les producteurs de la marche (LPM)',
-                        'street'      => 'Rue de Nexon',
+                        'street'      => 'Malonze',
                         'street2'     => null,
-                        'postalCode'  => '87000',
-                        'city'        => 'LIMOGES',
+                        'postalCode'  => '23300',
+                        'city'        => 'LA SOUTERRAINE',
                         'countryCode' => 'FR',
                     ],
                 ],
@@ -564,15 +565,15 @@ class SeedCommand extends Command
             ],
             [
                 'name'      => 'TERRENA',
-                'phone'     => '02.51.67.17.98',
-                'email'     => null,
+                'phone'     => '02.40.98.90.00',
+                'email'     => 'scouillaud@terrena.fr',
                 'addresses' => [
                     [
                         'label'       => 'TERRENA',
-                        'street'      => 'La Blanchardière',
-                        'street2'     => null,
-                        'postalCode'  => '44522',
-                        'city'        => 'MESANGER',
+                        'street'      => 'LA NOELLE',
+                        'street2'     => 'BP 20199',
+                        'postalCode'  => '44155',
+                        'city'        => 'ANCENIS CEDEX',
                         'countryCode' => 'FR',
                     ],
                 ],

src/DataFixtures/ReferenceFixtures.php

@@ -26,6 +26,7 @@ class ReferenceFixtures extends Fixture
             ['label' => 'Foin', 'code' => 'FOIN'],
             ['label' => 'Paille', 'code' => 'PAILLE'],
             ['label' => 'Granule', 'code' => 'GRANULE'],
+            ['label' => 'Autres', 'code' => 'AUTRES'],
         ];
         foreach ($merchandiseTypes as $type) {
             $merchandiseType = new MerchandiseType()
@@ -377,10 +378,10 @@ class ReferenceFixtures extends Fixture
                 'addresses' => [
                     [
                         'label'       => 'Les producteurs de la marche (LPM)',
-                        'street'      => 'Rue de Nexon',
+                        'street'      => 'Malonze',
                         'street2'     => null,
-                        'postalCode'  => '87000',
-                        'city'        => 'LIMOGES',
+                        'postalCode'  => '23300',
+                        'city'        => 'LA SOUTERRAINE',
                         'countryCode' => 'FR',
                     ],
                 ],
@@ -402,15 +403,15 @@ class ReferenceFixtures extends Fixture
             ],
             [
                 'name'      => 'TERRENA',
-                'phone'     => '02.51.67.17.98',
-                'email'     => null,
+                'phone'     => '02.40.98.90.00',
+                'email'     => 'scouillaud@terrena.fr',
                 'addresses' => [
                     [
                         'label'       => 'TERRENA',
-                        'street'      => 'La Blanchardière',
-                        'street2'     => null,
-                        'postalCode'  => '44522',
-                        'city'        => 'MESANGER',
+                        'street'      => 'LA NOELLE',
+                        'street2'     => 'BP 20199',
+                        'postalCode'  => '44155',
+                        'city'        => 'ANCENIS CEDEX',
                         'countryCode' => 'FR',
                     ],
                 ],

src/Entity/BovinShipment.php

@@ -18,7 +18,7 @@ use Symfony\Component\Serializer\Attribute\Groups;
 
 #[ORM\Entity]
 #[ApiFilter(SearchFilter::class, properties: ['shipment' => 'exact'])]
-#[ORM\UniqueConstraint(name: 'uniq_bovin_shipment', columns: ['shipment_id', 'shipment_type_id'])]
+#[ORM\UniqueConstraint(name: 'uniq_bovin_shipment_one_type', columns: ['shipment_id'])]
 #[ORM\Table(name: 'bovin_shipment')]
 #[ApiResource(
     operations: [

src/Entity/BovineType.php

@@ -7,6 +7,8 @@ namespace App\Entity;
 use ApiPlatform\Metadata\ApiResource;
 use ApiPlatform\Metadata\Get;
 use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Serializer\Attribute\Groups;
 
@@ -20,6 +22,17 @@ use Symfony\Component\Serializer\Attribute\Groups;
         new GetCollection(
             normalizationContext: ['groups' => ['bovine-type:read']],
         ),
+        new Post(
+            normalizationContext: ['groups' => ['bovine-type:read']],
+            denormalizationContext: ['groups' => ['bovine-type:write']],
+            security: "is_granted('ROLE_ADMIN')",
+        ),
+        new Patch(
+            requirements: ['id' => '\d+'],
+            normalizationContext: ['groups' => ['bovine-type:read']],
+            denormalizationContext: ['groups' => ['bovine-type:write']],
+            security: "is_granted('ROLE_ADMIN')",
+        ),
     ],
     security: "is_granted('ROLE_USER')",
 )]
@@ -32,11 +45,11 @@ class BovineType
     private ?int $id = null;
 
     #[ORM\Column(length: 120)]
-    #[Groups(['bovine-type:read', 'reception:read', 'reception-bovine:read'])]
+    #[Groups(['bovine-type:read', 'bovine-type:write', 'reception:read', 'reception-bovine:read'])]
     private ?string $label = null;
 
     #[ORM\Column(length: 50)]
-    #[Groups(['bovine-type:read', 'reception:read', 'reception-bovine:read'])]
+    #[Groups(['bovine-type:read', 'bovine-type:write', 'reception:read', 'reception-bovine:read'])]
     private ?string $code = null;
 
     public function getId(): ?int

src/Entity/Shipment.php

@@ -328,7 +328,7 @@ class Shipment
             return;
         }
 
-        $number                     = sprintf('P-BR-%04d', $this->id);
+        $number                     = sprintf('P-BL-%04d', $this->id);
         $this->identificationNumber = $number;
 
         $args->getObjectManager()

src/Entity/Supplier.php

@@ -26,7 +26,7 @@ use Symfony\Component\Serializer\Attribute\Groups;
         ),
         new GetCollection(
             normalizationContext: ['groups' => ['supplier:read']],
-            security: "is_granted('ROLE_ADMIN')"
+            security: "is_granted('ROLE_USER')"
         ),
         new Post(
             normalizationContext: ['groups' => ['supplier:read']],

templates/shipment_voucher.html.twig

@@ -174,7 +174,7 @@
 
         <td style="width:30%; text-align:right; vertical-align:top; font-size: 14px;">
             <div style="display:inline-block; width:75mm; line-height:1.3;">
-                <strong>{{ shipment.customer ? shipment.customer.label : '-' }}</strong><br>
+                <strong>{{ shipment.customer ? shipment.customer.name : '-' }}</strong><br>
                 <span>{{ shipment.address ? shipment.address.street : '' }}</span><br>
                 {% if shipment.address and shipment.address.street2 %}
                     <span>{{ shipment.address.street2 }}</span><br>
@@ -198,7 +198,7 @@
     </tr>
     <tr>
         <td style="width:55%; text-align:center;">
-            {{ shipment.customer ? shipment.customer.code : '-' }}
+            {{ shipment.customer ? shipment.customer.name : '-' }}
         </td>
         <td style="width:20%; text-align:center; white-space:nowrap;">
             {{ shipment.shipmentDate|date('d/m/Y') }}
@@ -276,7 +276,7 @@
         <td style="width:60%; padding-right:8mm; vertical-align:top;">
             <div class="meta">
                 <p>Transporteur : {{ shipment.carrier ? shipment.carrier.name : '-' }}</p>
-                <p>Mode de livraison : {{ shipment.truck ? shipment.truck.name : '-' }}</p>
+                <p>Mode d'expédition : {{ shipment.truck ? shipment.truck.name : '-' }}</p>
                 <p>Immatriculation : {{ shipment.licencePlate ?? '-' }}</p>
             </div>
         </td>