From 92a5c48e5ec5d83942482458e43700078e68b13c Mon Sep 17 00:00:00 2001
From: sroy <sebastien@yuno.malio.fr>
Date: Thu, 26 Feb 2026 08:25:20 +0000
Subject: [PATCH] =?UTF-8?q?[#332]Refonte=20=C3=A9cran=20r=C3=A9ception=20t?=
 =?UTF-8?q?ermin=C3=A9e=20(!31)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|     #332             |     Refonte écran réception terminée            |

## 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é

Co-authored-by: tristan <tristan@yuno.malio.fr>
Reviewed-on: https://gitea.malio.fr/MALIO-DEV/Ferme/pulls/31
Reviewed-by: Autin <tristan@yuno.malio.fr>
Co-authored-by: sroy <sebastien@yuno.malio.fr>
Co-committed-by: sroy <sebastien@yuno.malio.fr>
---
 .idea/workspace.xml                           |   2 +-
 CHANGELOG.md                                  |   2 +
 frontend/components/card-link.vue             |   6 +-
 .../reception/reception-bovine-received.vue   |  10 +-
 .../components/reception/update-bovin.vue     | 232 ++----
 .../reception/update-merchandise.vue          | 362 ++++-----
 .../components/reception/update-weight.vue    | 149 ++--
 frontend/components/ui/UiCheckbox.vue         |   4 +-
 frontend/components/ui/UiDateInput.vue        |   6 +-
 frontend/components/ui/UiNumberInput.vue      |   7 +-
 frontend/components/ui/UiRadioGroup.vue       |   6 +-
 frontend/components/ui/UiSelect.vue           |   8 +-
 frontend/pages/reception/update/[[id]].vue    | 737 +++++++++++++-----
 frontend/services/dto/reception-data.ts       |  11 +
 frontend/tailwind.config.ts                   |   3 +
 templates/reception_voucher.html.twig         |   9 +
 16 files changed, 883 insertions(+), 671 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b5c707f..0de7a62 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -817,4 +817,4 @@
       <option value=".github/prompts" />
     </promptFileLocations>
   </component>
-</project>
\ No newline at end of file
+</project>
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7abbf83..1680850 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,6 +52,8 @@ Ajouter dans le fichier .env du frontend
 * [#331] Mettre à jour l'entité Shipment et bovin_shipment
 * [#278] Plan du site
 * [#334] Correctifs
+* [#332] Refonte écran réception terminée
+
 ### Changed
 
 ### Fixed
diff --git a/frontend/components/card-link.vue b/frontend/components/card-link.vue
index 0c490a7..cb3f026 100644
--- a/frontend/components/card-link.vue
+++ b/frontend/components/card-link.vue
@@ -2,17 +2,17 @@
 
 <template>
     <NuxtLink :to="link">
-        <div class="w-[300px] h-[216px] border border-black rounded-lg p-6 flex flex-col justify-between gap-4">
+        <div class="w-[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-[#D9D9D9] flex justify-center items-center">
-                    <Icon :name="iconName" style="color: black" size="44" />
+                    <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 text-primary-500">
+                <p class="text-3xl text-primary-700">
                     <slot name="label">{{ label }}</slot>
                 </p>
             </div>
diff --git a/frontend/components/reception/reception-bovine-received.vue b/frontend/components/reception/reception-bovine-received.vue
index f382039..bba1fbe 100644
--- a/frontend/components/reception/reception-bovine-received.vue
+++ b/frontend/components/reception/reception-bovine-received.vue
@@ -1,14 +1,14 @@
 <template>
     <div
         v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"
-        class="flex flex-col items-center gap-16">
+        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"
@@ -17,6 +17,8 @@
                     :placeholder="0"
                     :min="0"
                     :max="10"
+                    class="max-w-[150px]"
+                    wrapper-class="gap-3"
                 />
             </div>
             <div
@@ -24,6 +26,8 @@
                 <UiNumberInput
                     label="Autres"
                     v-model="otherQuantity"
+                    class="max-w-[80px]"
+                    wrapper-class="gap-3"
                 />
             </div>
         </div>
diff --git a/frontend/components/reception/update-bovin.vue b/frontend/components/reception/update-bovin.vue
index f8f827b..5001f12 100644
--- a/frontend/components/reception/update-bovin.vue
+++ b/frontend/components/reception/update-bovin.vue
@@ -1,183 +1,115 @@
 <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"
+                v-for="type in bovineTypes"
                 :key="type.id"
-                class="flex flex-row mb-2 gap-6 ">
+            >
                 <UiNumberInput
                     :label="type.label"
                     :code="type.code"
-                    v-model="bovineQuantities[String(type.id)]"
-                    :disabled="!auth.isAdmin"
+                    v-model="localQuantities[String(type.id)]"
+                    :disabled="!isAdmin"
                     :placeholder="0"
                     :min="0"
                     :max="10"
+                    wrapperClass="w-44 flex-col"
+                    inputClass="font-medium"
                 />
             </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="localOtherQuantity"
+                :disabled="!isAdmin"
+                wrapperClass="w-44 flex-col"
+                inputClass="font-medium"
+            />
         </div>
-        <UiButton
-            type="submit"
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-            :disabled="!auth.isAdmin"
-        >Valider
-        </UiButton>
-    </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 {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 auth = useAuthStore()
+import { onMounted, reactive, ref, watch } from 'vue'
+import { getBovineTypeList } from '~/services/bovine-type'
+import type { BovineTypeData } from '~/services/dto/bovine-type-data'
+import type { ReceptionBovineTypeData } from '~/services/dto/reception-bovine-data'
+
 const props = defineProps<{
-    idReception: number
+    modelValue: ReceptionBovineTypeData[]
+    otherQuantity: number | null
+    isAdmin: 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)
-    }, 0)
-    return base + (otherQuantity.value ?? 0)
-})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: ReceptionBovineTypeData[]): void
+    (event: 'update:otherQuantity', value: number | null): void
+}>()
 
-const loadBovineType = async () => {
-    isLoadingBovineType.value = true
+const bovineTypes = ref<BovineTypeData[]>([])
+const localQuantities = reactive<Record<string, number | null>>({})
+const localOtherQuantity = ref<number | null>(props.otherQuantity ?? 0)
+const isSyncing = ref(false)
+
+function buildEntriesFromLocal(): ReceptionBovineTypeData[] {
+    return bovineTypes.value.map((type) => {
+        const existing = props.modelValue.find((entry) => entry.bovineType.id === type.id)
+        return {
+            id: existing?.id ?? 0,
+            bovineType: type,
+            quantity: localQuantities[String(type.id)] ?? 0
+        }
+    })
+}
+
+function syncLocalFromProps() {
+    isSyncing.value = true
     try {
-        bovineType.value = await getBovineTypeList()
+        for (const key of Object.keys(localQuantities)) {
+            delete localQuantities[key]
+        }
+
+        for (const type of bovineTypes.value) {
+            const existing = props.modelValue.find((entry) => entry.bovineType.id === type.id)
+            localQuantities[String(type.id)] = existing?.quantity ?? 0
+        }
     } finally {
-        isLoadingBovineType.value = false
+        isSyncing.value = false
     }
 }
 
-onMounted(async () => {
-    await loadBovineType()
+watch(
+    () => props.otherQuantity,
+    (value) => {
+        localOtherQuantity.value = value ?? 0
+    }
+)
+
+watch(localOtherQuantity, (value) => {
+    emit('update:otherQuantity', value ?? 0)
 })
 
 watch(
-    [() => receptionId, () => bovineType.value],
-    async ([id, types]) => {
-        if (!id || !receptionIri.value || types.length === 0) {
-            return
-        }
-
-        const selectionMap: Record<string, number | null> = {}
-        for (const type of types) {
-            selectionMap[String(type.id)] = 0
-        }
-
-        const existing = await getReceptionBovineList(receptionIri.value)
-        for (const selection of existing) {
-            const bovineTypeId = String(selection.bovineType.id)
-            selectionMap[bovineTypeId] = selection.quantity ?? 0
-        }
-
-        for (const key of Object.keys(bovineQuantities)) {
-            delete bovineQuantities[key]
-        }
-        Object.assign(bovineQuantities, selectionMap)
-
-        const existingOther = reception.bovineDetail
-        const parsedOther =
-            typeof existingOther === 'string' && existingOther.trim() !== ''
-                ? Number(existingOther)
-                : 0
-        otherQuantity.value = Number.isFinite(parsedOther) ? parsedOther : 0
+    () => props.modelValue,
+    () => {
+        syncLocalFromProps()
     },
-    {immediate: true}
+    { deep: true }
 )
 
-async function syncBovineSelections(receptionIri: string) {
-    const existing = await getReceptionBovineList(receptionIri)
-    const existingMap = new Map<string, { id: number; quantity: number | null }>()
-
-    for (const selection of existing) {
-        const bovineTypeId = String(selection.bovineType.id)
-        existingMap.set(bovineTypeId, {
-            id: selection.id,
-            quantity: selection.quantity ?? 0
-        })
-    }
-
-    // Supprime les entrées supprimées ou modifiées
-    for (const [bovineTypeId, entry] of existingMap.entries()) {
-        const selectedQuantity = bovineQuantities[bovineTypeId] ?? 0
-        if (!selectedQuantity) {
-            await deleteReceptionBovine(entry.id)
-            existingMap.delete(bovineTypeId)
-            continue
+watch(
+    localQuantities,
+    () => {
+        if (isSyncing.value) {
+            return
         }
+        emit('update:modelValue', buildEntriesFromLocal())
+    },
+    { deep: true }
+)
 
-        if (selectedQuantity !== entry.quantity) {
-            await updateReceptionBovine(entry.id, {quantity: selectedQuantity})
-            existingMap.set(bovineTypeId, {
-                id: entry.id,
-                quantity: selectedQuantity
-            })
-        }
-    }
-
-    // Crée les entrées manquantes
-    for (const [bovineTypeId, quantity] of Object.entries(bovineQuantities)) {
-        if (!quantity) {
-            continue
-        }
-        if (existingMap.has(bovineTypeId)) {
-            // Déjà à jour
-            continue
-        }
-        await createReceptionBovine({
-            reception: receptionIri,
-            bovineType: `/api/bovine_types/${bovineTypeId}`,
-            quantity
-        })
-    }
-}
-
-async function validate() {
-    // @TODO Ajouter un composable pour le toaster qui gère les key i18n
-    if (totalBovines.value > 52) {
-        toast.error({
-            title: 'Erreur',
-            message: ('Le total des bovins ne peut pas dépasser 52.')
-        })
-        return
-    }
-
-    await syncBovineSelections(receptionIri.value)
-
-    await updateReception(receptionId, {
-        merchandiseType: null,
-        merchandiseDetail: null,
-        bovineDetail: otherQuantity.value ? String(otherQuantity.value) : null,
-    })
-}
+onMounted(async () => {
+    bovineTypes.value = await getBovineTypeList()
+    syncLocalFromProps()
+    emit('update:modelValue', buildEntriesFromLocal())
+})
 </script>
diff --git a/frontend/components/reception/update-merchandise.vue b/frontend/components/reception/update-merchandise.vue
index cb09c09..e866463 100644
--- a/frontend/components/reception/update-merchandise.vue
+++ b/frontend/components/reception/update-merchandise.vue
@@ -1,33 +1,27 @@
 <template>
-    <form @submit.prevent="validate">
-        <div class="flex flex-col items-center gap-16">
-            <div
-                class="flex flex-col gap-16 items-center w-full">
-                <UiTextInput
+    <form>
+        <div 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"
+                    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="!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>
 
+            <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"
+                    v-if="selectedMerchandiseTypeId && !isGranule"
+                    class="flex gap-[218px]"
                 >
                     <div
                         v-for="building in buildings"
@@ -37,112 +31,174 @@
                             v-model="selectedBuildingIds"
                             :value="String(building.id)"
                             :label="building.label"
-                            :disabled="!auth.isAdmin"
-                            label-class="text-xl"
+                            :disabled="!isAdmin"
+                            input-class="accent-primary-700 focus:ring-primary-700"
+                            label-class="text-xl uppercase"
                         />
                     </div>
                 </div>
 
                 <div
-                    v-if="merchandiseTypeId && isGranule"
-                    class="flex flex-col gap-10 w-full max-w-[1100px]"
+                    v-if="selectedMerchandiseTypeId && isAutres"
+                    class="flex flex-col justify-self-end max-w-[182px]"
                 >
-                    <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
-                                v-for="building in buildings"
-                                :key="building.id"
-                                class="flex items-center gap-2 text-lg"
-                            >
-                                <UiCheckbox
-                                    v-model="selectedPelletBuildingIds[String(type.id)]"
-                                    :value="String(building.id)"
-                                    :label="building.label"
-                                    :disabled="!auth.isAdmin"
-                                    label-class="text-lg"
-                                />
-                            </div>
+                    <UiTextInput
+                        id="merchandise-detail"
+                        :disabled="!isAdmin"
+                        v-model="merchandiseDetail"
+                        placeholder="Préciser"
+                        :maxlength="255"
+                        class="h-6"
+                    />
+                </div>
+            </div>
+
+            <div
+                v-if="selectedMerchandiseTypeId && isGranule"
+                class="flex flex-col gap-10 w-full col-start-2 row-start-1"
+            >
+                <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 text-lg"
+                        >
+                            <UiCheckbox
+                                v-model="selectedPelletBuildingIds[String(type.id)]"
+                                :value="String(building.id)"
+                                :label="building.label"
+                                :disabled="!isAdmin"
+                                input-class="accent-primary-700 focus:ring-primary-700"
+                                label-class="text-lg"
+                            />
                         </div>
                     </div>
                 </div>
             </div>
-            <UiButton
-                v-if="auth.isAdmin"
-                type="submit"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-                :disabled="!auth.isAdmin"
-            >Valider
-            </UiButton>
         </div>
     </form>
 </template>
 
 <script setup lang="ts">
-import {computed, onMounted, ref} from 'vue'
-import {getBuildingList} from '~/services/building'
-import {getMerchandiseTypeList} from '~/services/merchandise-type'
-import type {MerchandiseTypeData} from '~/services/dto/merchandise-type-data'
-import type {BuildingData} from '~/services/dto/building-data'
-import type {PelletTypeData} from '~/services/dto/pellet-type-data'
-import {getPelletTypeList} from '~/services/pellet-type'
-import {
-    createReceptionPelletBuilding,
-    deleteReceptionPelletBuilding,
-    getReceptionPelletBuildingList
-} from '~/services/reception-pellet-building'
-import {MERCHANDISE_TYPE_CODES} from '~/utils/constants'
-import {getReception, updateReception} from "~/services/reception";
+import { computed, onMounted, ref, watch } from 'vue'
+import type { BuildingData } from '~/services/dto/building-data'
+import type { MerchandiseTypeData } from '~/services/dto/merchandise-type-data'
+import type { PelletTypeData } from '~/services/dto/pellet-type-data'
+import type { MerchandiseEntryData } from '~/services/dto/reception-data'
+import { getBuildingList } from '~/services/building'
+import { getMerchandiseTypeList } from '~/services/merchandise-type'
+import { getPelletTypeList } from '~/services/pellet-type'
+import { MERCHANDISE_TYPE_CODES } from '~/utils/constants'
+
+const props = defineProps<{
+    modelValue: MerchandiseEntryData
+    isAdmin: boolean
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: MerchandiseEntryData): void
+}>()
 
 const merchandiseTypes = ref<MerchandiseTypeData[]>([])
 const buildings = ref<BuildingData[]>([])
 const pelletTypes = ref<PelletTypeData[]>([])
+
 const selectedMerchandiseTypeId = ref('')
 const selectedBuildingIds = ref<string[]>([])
 const selectedPelletBuildingIds = ref<Record<string, string[]>>({})
 const merchandiseDetail = ref('')
-const auth = useAuthStore()
-const props = defineProps<{
-    idReception: number
-}>()
-const receptionId = props.idReception
-const reception = await getReception(receptionId)
-const merchandiseTypeId = await reception.receptionType?.id
+const isHydrating = ref(false)
+const isReady = ref(false)
 
-// Extrait l'ID d'une relation depuis un IRI ou un objet complet.
-const getRelationId = (value: unknown): string | null => {
-    if (!value) {
-        return null
+const selectedMerchandiseType = computed(() =>
+    merchandiseTypes.value.find((type) => String(type.id) === selectedMerchandiseTypeId.value) ?? null
+)
+const isGranule = computed(
+    () => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.GRANULE
+)
+const isAutres = computed(
+    () => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.AUTRES
+)
+
+function clonePelletSelections(value: Record<string, string[]>) {
+    const clone: Record<string, string[]> = {}
+    for (const [key, buildingIds] of Object.entries(value)) {
+        clone[key] = [...buildingIds]
     }
-
-    if (typeof value === 'string') {
-        const match = value.match(/\/(\d+)$/)
-        return match ? match[1] : null
-    }
-
-    if (typeof value === 'object' && 'id' in value) {
-        const record = value as { id?: number | string }
-        if (typeof record.id === 'number') {
-            return String(record.id)
-        }
-        if (typeof record.id === 'string') {
-            return record.id
-        }
-    }
-
-    return null
+    return clone
 }
 
-// Type de marchandise sélectionné dans le select
-const selectedMerchandiseType = computed(() =>
-    merchandiseTypes.value.find((type) => String(type.id) === selectedMerchandiseTypeId.value)
-)
-// Indique si le type est "Granulé"
-const isGranule = computed(() => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.GRANULE)
-// Indique si le type est "Autres"
-const isAutres = computed(() => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.AUTRES)
+function ensurePelletKeys() {
+    for (const pelletType of pelletTypes.value) {
+        const key = String(pelletType.id)
+        if (!selectedPelletBuildingIds.value[key]) {
+            selectedPelletBuildingIds.value[key] = []
+        }
+    }
+}
+
+function hydrateFromModelValue(value: MerchandiseEntryData) {
+    isHydrating.value = true
+    try {
+        selectedMerchandiseTypeId.value = value.merchandiseTypeId ?? ''
+        merchandiseDetail.value = value.merchandiseDetail ?? ''
+        selectedBuildingIds.value = [...(value.selectedBuildingIds ?? [])]
+        selectedPelletBuildingIds.value = clonePelletSelections(
+            value.selectedPelletBuildingIds ?? {}
+        )
+        ensurePelletKeys()
+    } finally {
+        isHydrating.value = false
+    }
+}
+
+function emitModelValue() {
+    emit('update:modelValue', {
+        merchandiseTypeId: selectedMerchandiseTypeId.value,
+        merchandiseDetail: merchandiseDetail.value,
+        selectedBuildingIds: [...selectedBuildingIds.value],
+        selectedPelletBuildingIds: clonePelletSelections(selectedPelletBuildingIds.value)
+    })
+}
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        hydrateFromModelValue(value)
+    },
+    { deep: true }
+)
+
+watch(
+    [selectedMerchandiseTypeId, selectedBuildingIds, selectedPelletBuildingIds, merchandiseDetail],
+    () => {
+        if (isHydrating.value || !isReady.value) {
+            return
+        }
+
+        if (isGranule.value) {
+            if (selectedBuildingIds.value.length > 0) {
+                selectedBuildingIds.value = []
+            }
+        } else {
+            for (const key of Object.keys(selectedPelletBuildingIds.value)) {
+                if (selectedPelletBuildingIds.value[key].length > 0) {
+                    selectedPelletBuildingIds.value[key] = []
+                }
+            }
+        }
+
+        if (!isAutres.value && merchandiseDetail.value !== '') {
+            merchandiseDetail.value = ''
+        }
+
+        emitModelValue()
+    },
+    { deep: true }
+)
 
-// Charge les référentiels et hydrate le formulaire depuis la réception
 onMounted(async () => {
     const [merchandiseTypeList, buildingList, pelletTypeList] = await Promise.all([
         getMerchandiseTypeList(),
@@ -153,106 +209,8 @@ onMounted(async () => {
     buildings.value = buildingList
     pelletTypes.value = pelletTypeList
 
-    const currentId = reception.merchandiseType?.id
-    if (currentId) {
-        selectedMerchandiseTypeId.value = String(currentId)
-    }
-    merchandiseDetail.value = reception.merchandiseDetail ?? ''
-
-    selectedBuildingIds.value =
-        reception.buildings?.map((building) => String(building.id)) ?? []
-
-    const existingPelletSelections = reception.pelletBuildings ?? []
-    const selectionMap: Record<string, string[]> = {}
-    for (const selection of existingPelletSelections) {
-        // L'API peut renvoyer les relations comme IRI ou comme objets selon le contexte.
-        const pelletTypeId = getRelationId(selection.pelletType)
-        const buildingId = getRelationId(selection.building)
-        if (!pelletTypeId || !buildingId) {
-            continue
-        }
-        if (!selectionMap[pelletTypeId]) {
-            selectionMap[pelletTypeId] = []
-        }
-        selectionMap[pelletTypeId].push(buildingId)
-    }
-    for (const pelletType of pelletTypes.value) {
-        const key = String(pelletType.id)
-        if (!selectionMap[key]) {
-            selectionMap[key] = []
-        }
-    }
-    selectedPelletBuildingIds.value = selectionMap
+    hydrateFromModelValue(props.modelValue)
+    isReady.value = true
+    emitModelValue()
 })
-// Enregistre les sélections et passe à l'étape suivante
-async function validate() {
-
-    const receptionIri = `/api/receptions/${reception.id}`
-
-    await updateReception(reception.id, {
-        merchandiseDetail: isAutres.value ? merchandiseDetail.value.trim() : null,
-        buildings: isGranule.value
-            ? []
-            : selectedBuildingIds.value.map((id) => `/api/buildings/${id}`),
-        bovineDetail: null,
-        bovinesTypes: null,
-    })
-
-    if (isGranule.value) {
-        await syncPelletSelections(receptionIri)
-    } else {
-        await clearPelletSelections(receptionIri)
-    }
-}
-
-// Supprime toutes les associations granulés/bâtiments existantes
-async function clearPelletSelections(receptionIri: string) {
-    const existing = await getReceptionPelletBuildingList(receptionIri)
-    for (const selection of existing) {
-        await deleteReceptionPelletBuilding(selection.id)
-    }
-}
-// Synchronise les associations granulés/bâtiments avec l'état du formulaire
-async function syncPelletSelections(receptionIri: string) {
-    const existing = await getReceptionPelletBuildingList(receptionIri)
-    const existingMap = new Map<string, number>()
-    for (const selection of existing) {
-        // Construit la table de correspondance avec des IDs normalisés pour éviter les doublons.
-        const pelletTypeId = getRelationId(selection.pelletType)
-        const buildingId = getRelationId(selection.building)
-        if (!pelletTypeId || !buildingId) {
-            continue
-        }
-        const key = `${pelletTypeId}:${buildingId}`
-        existingMap.set(key, selection.id)
-    }
-
-    const desiredEntries: Array<{ pelletTypeId: string; buildingId: string }> = []
-    for (const [pelletTypeId, buildingIds] of Object.entries(selectedPelletBuildingIds.value)) {
-        for (const buildingId of buildingIds) {
-            desiredEntries.push({pelletTypeId, buildingId})
-        }
-    }
-
-    const desiredKeys = new Set(desiredEntries.map(
-        (entry) => `${entry.pelletTypeId}:${entry.buildingId}`
-    ))
-
-    for (const [key, id] of existingMap.entries()) {
-        if (!desiredKeys.has(key)) {
-            await deleteReceptionPelletBuilding(id)
-        }
-    }
-
-    for (const entry of desiredEntries) {
-        const key = `${entry.pelletTypeId}:${entry.buildingId}`
-        if (!existingMap.has(key)) {
-            await createReceptionPelletBuilding({
-                reception: receptionIri,
-                pelletType: `/api/pellet_types/${entry.pelletTypeId}`,
-                building: `/api/buildings/${entry.buildingId}`
-            })
-        }
-    }
-}
 </script>
diff --git a/frontend/components/reception/update-weight.vue b/frontend/components/reception/update-weight.vue
index e5ec053..a37a9e3 100644
--- a/frontend/components/reception/update-weight.vue
+++ b/frontend/components/reception/update-weight.vue
@@ -1,124 +1,63 @@
 <template>
-    <form @submit.prevent="validate">
-        <div class="grid grid-cols-2 gap-x-40 gap-y-8 mb-8">
+    <form>
+        <div class="grid grid-cols-3 gap-x-40 gap-y-8 mb-8">
+            <UiNumberInput
+                :key="localWeight.type"
+                :label="'POIDS'"
+                labelClass="font-bold uppercase text-xl "
+                v-model="localWeight.weight"
+                :disabled="!isAdmin"
+                :min="0"
+                :max="48000"
+                wrapper-class="flex-col"
+            />
+
+            <UiDateInput
+                label="Date pesée"
+                v-model="localWeight.weighedAt"
+                :disabled="!isAdmin"
+            />
+
             <UiNumberInput
                 label="Dsd"
                 class="col-start-2"
                 labelClass="font-bold uppercase"
-                v-model="sharedWeightMeta.dsd"
-                :disabled="!auth.isAdmin"
-            />
-            <UiDateInput
-                label="Date pesée"
-                v-model="sharedWeightMeta.weighedAt"
-                :disabled="!auth.isAdmin"
+                v-model="localWeight.dsd"
+                :disabled="!isAdmin"
+                wrapper-class="flex-col"
             />
         </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"
-                inputClass="w-24"
-                v-model="weight.weight"
-                :wrapper-class="weight.type === 'tare' ? 'col-start-1 row-start-1' : 'col-start-2 row-start-1'"
-                :disabled="!auth.isAdmin"
-                :min="0"
-                :max="48000"
-            />
-        </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]"
-
-            >
-                Valider
-            </UiButton>
-        </div>
-
     </form>
 </template>
 
 <script setup lang="ts">
-import type {ReceptionFormWeight} from '~/services/dto/reception-data'
-import {getReception} from '~/services/reception'
-import {updateWeight} from "~/services/weight";
-import {useAuthStore} from "~/stores/auth";
+import type {WeightEntryData} from '~/services/dto/reception-data'
+import {reactive, watch} from "vue";
 
 const props = defineProps<{
-    idReception: number
+    modelValue: WeightEntryData
+    isAdmin: boolean
 }>()
 
-const idReception = props.idReception
-const auth = useAuthStore()
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: WeightEntryData): void
+}>()
 
-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}
-    ]
-})
-// DSD et date de pesée sont partagés entre tare et gross dans l'UI.
-const sharedWeightMeta = reactive<{
-    dsd: number | string | null
-    weighedAt: string | null
-}>({
-    dsd: null,
-    weighedAt: null
-})
+const localWeight = reactive<WeightEntryData>({...props.modelValue})
 
-const getWeightLabel = (type: 'tare' | 'gross'): string => {
-    return type === 'tare' ? 'Pesée à vide' : 'Pesée à plein'
-}
+watch(
+    () => props.modelValue,
+    (value) => {
+        Object.assign(localWeight, value)
+    },
+    {deep: true}
+)
 
-const hydrateFromReception = (reception: ReceptionFormWeight) => {
-    // On hydrate chaque ligne par son type (tare/gross), sans dépendre d'un index.
-    for (const receptionWeight of reception.weights) {
-        const formWeight = form.weights.find(weight => weight.type === receptionWeight.type)
-        if (formWeight) {
-            Object.assign(formWeight, receptionWeight)
-        }
-    }
-
-    // On récupère une valeur existante pour préremplir les champs partagés.
-    const weightWithMeta = reception.weights.find(weight =>
-        (weight.dsd !== null && weight.dsd !== undefined)
-        || (weight.weighedAt !== null && weight.weighedAt !== undefined && weight.weighedAt !== '')
-    )
-
-    if (weightWithMeta) {
-        sharedWeightMeta.dsd = weightWithMeta.dsd ?? null
-        sharedWeightMeta.weighedAt = weightWithMeta.weighedAt ?? null
-    }
-}
-
-onMounted(async () => {
-    const reception = await getReception(idReception)
-    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(
+    localWeight,
+    (value) => {
+        emit('update:modelValue', {...value})
+    },
+    {deep: true}
+)
 </script>
diff --git a/frontend/components/ui/UiCheckbox.vue b/frontend/components/ui/UiCheckbox.vue
index 39770b0..ea923b7 100644
--- a/frontend/components/ui/UiCheckbox.vue
+++ b/frontend/components/ui/UiCheckbox.vue
@@ -1,14 +1,14 @@
 <template>
     <div :class="wrapperClass">
         <label
-            class="flex items-center gap-2 cursor-pointer text-primary-500"
+            class="flex items-center gap-2 cursor-pointer text-primary-700"
             :class="labelClass"
         >
             <input
                 type="checkbox"
                 :checked="checked"
                 :disabled="disabled"
-                :class="['cursor-pointer text-primary-500', inputClass]"
+                :class="['h-4 w-4 cursor-pointer text-primary-500', inputClass]"
                 @change="onChange"
             >
             <span v-if="label">{{ label }}</span>
diff --git a/frontend/components/ui/UiDateInput.vue b/frontend/components/ui/UiDateInput.vue
index e76e46c..b756cb8 100644
--- a/frontend/components/ui/UiDateInput.vue
+++ b/frontend/components/ui/UiDateInput.vue
@@ -3,7 +3,7 @@
         <label
             v-if="label"
             :for="id"
-            class="font-bold uppercase text-xl text-primary-500"
+            class="font-bold uppercase text-xl 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 text-primary-500 py-[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
             ]"
diff --git a/frontend/components/ui/UiNumberInput.vue b/frontend/components/ui/UiNumberInput.vue
index 11aa52d..eaca5c5 100644
--- a/frontend/components/ui/UiNumberInput.vue
+++ b/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 gap-2 text-primary-500"
+            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 text-primary-500"
+            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',
diff --git a/frontend/components/ui/UiRadioGroup.vue b/frontend/components/ui/UiRadioGroup.vue
index a36a360..7193c73 100644
--- a/frontend/components/ui/UiRadioGroup.vue
+++ b/frontend/components/ui/UiRadioGroup.vue
@@ -2,7 +2,7 @@
     <div :class="['flex flex-col', wrapperClass]">
         <label
             v-if="label"
-            class="font-bold uppercase text-xl text-primary-500"
+            class="font-bold uppercase text-xl text-primary-700"
             :class="labelClass"
         >
             {{ label }}
@@ -16,7 +16,7 @@
                 v-for="option in options"
                 :key="String(option.value)"
                 :for="`${id || 'radio'}-${option.value}`"
-                class="flex items-center gap-2 text-primary-500"
+                class="flex items-center gap-2 text-primary-700"
                 :class="itemClass"
             >
                 <input
@@ -27,7 +27,7 @@
                     :checked="String(modelValue ?? '') === String(option.value)"
                     :disabled="disabled"
                     v-bind="attrs"
-                    class="h-4 w-4 border-slate-300 text-primary-500 focus:ring-primary-500"
+                    class="h-4 w-4 border-primary-700/50 text-primary-700 focus:ring-primary-700"
                     :class="[
                         disabled ? 'cursor-not-allowed' : 'cursor-pointer',
                         inputClass
diff --git a/frontend/components/ui/UiSelect.vue b/frontend/components/ui/UiSelect.vue
index 91f6486..ecc2c71 100644
--- a/frontend/components/ui/UiSelect.vue
+++ b/frontend/components/ui/UiSelect.vue
@@ -3,7 +3,7 @@
         <label
             v-if="label"
             :for="id"
-            class="font-bold uppercase text-xl text-primary-500"
+            class="font-bold uppercase text-xl 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 text-primary-500 py-[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>
diff --git a/frontend/pages/reception/update/[[id]].vue b/frontend/pages/reception/update/[[id]].vue
index c98fc42..0c2f92e 100644
--- a/frontend/pages/reception/update/[[id]].vue
+++ b/frontend/pages/reception/update/[[id]].vue
@@ -1,10 +1,14 @@
 <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('/reception/finish-reception')" 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="printReceipt" name="mdi:printer-outline" size="44" class="cursor-pointer text-primary-500"/>
+            </div>
             <!--    Nom de l'utilisateur       -->
             <UiSelect
                 id="reception-user"
@@ -16,7 +20,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 +28,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 +54,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 +66,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 +79,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 +93,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,7 +106,8 @@
                     label: driver.name
                 }))"
                 :loading="isLoadingDrivers"
-                wrapper-class="col-start-2 row-start-3"
+                wrapper-class="col-start-2 row-start-5"
+                v-if="isLiotCarrier"
             />
             <!--    Plaque d'immatriculation       -->
             <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
@@ -114,80 +132,158 @@
                 wrapper-class="col-start-2 row-start-4"
             />
         </div>
-        <div class="flex justify-center mb-2">
-            <UiButton
-                v-if="auth.isAdmin"
-                type="submit"
-                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 mb-16"
-            >
-                <Icon name="mdi:check" size="28" />
-                Valider
-            </UiButton>
-        </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' : ''"
+                    class="font-bold text-3xl uppercase px-12 col-start-1 row-start-1  cursor-pointer "
+                    :class="activeTab === 'weights' ? 'border-b-[6px] border-primary-500 text-primary-500' : 'text-primary-500/50'"
                     @click="activeTab = 'weights'"
                 >
-                    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 === 'weightsEmpty' ? 'border-b-[6px] border-primary-500 text-primary-500 ' : 'text-primary-500/50'"
+                    @click="activeTab = 'weightsEmpty'"
+                >
+                    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" }}
                 </h1>
             </div>
+                <div class="mb-12 ">
+                    <update-weight
+                        v-show="activeTab === 'weights'"
+                        v-model="grossWeight"
+                        v-if="grossWeight"
+                        :isAdmin="auth.isAdmin"
+                    />
 
-            <update-weight
-                v-if="activeTab === 'weights'"
-                :idReception="idReception"
-                :disabled="!auth.isAdmin"
-            />
+                    <update-weight
+                        v-show="activeTab === 'weightsEmpty'"
+                        v-model="tareWeight"
+                        v-if="tareWeight"
+                        :isAdmin="auth.isAdmin"
+                    />
 
-            <update-merchandise
-                v-else-if="activeTab === 'merchandise' && isMerchandise"
-                :idReception="idReception"
-                :disabled="!auth.isAdmin"
-            />
+                <update-merchandise
+                    v-show="activeTab === 'merchandise' && isMerchandise"
+                    v-model="merchandiseForm"
+                    :isAdmin="auth.isAdmin"
+                />
 
-            <update-bovin
-                v-else
-                :idReception="idReception"
-                :disabled="!auth.isAdmin"
-            />
+                <update-bovin
+                    v-show="activeTab === 'merchandise' && !isMerchandise"
+                    v-model="bovineEntries"
+                    v-model:otherQuantity="bovineOtherQuantity"
+                    :isAdmin="auth.isAdmin"
+                />
+            </div>
+                <div class="flex justify-center">
+                    <UiButton
+                        v-if="auth.isAdmin"
+                        type="submit"
+                        class="inline-flex mb-16 items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2 justify-self-end"
+                    >
+                        <Icon name="mdi:check" size="28" />
+                        Valider
+                    </UiButton>
+                </div>
+            </div>
     </form>
 </template>
 
 <script setup lang="ts">
-import {useReceptionStore} from '~/stores/reception'
-import type {UserData} from '~/services/dto/user-data'
-import {getUsers} from '~/services/auth'
-import {useAuthStore} from '~/stores/auth'
-import type {SupplierData} from '~/services/dto/supplier-data'
-import {getSupplierList} from '~/services/supplier'
-import type {TruckData} from '~/services/dto/truck-data'
-import {getTruckList} from '~/services/truck'
-import type {CarrierData} from '~/services/dto/carrier-data'
-import {getCarrierList} from '~/services/carrier'
-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 type {ReceptionData, ReceptionFormData} from "~/services/dto/reception-data";
-import {getReception} 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 { usePdfPrinter } from '#imports'
+import { computed } from 'vue'
+import UpdateBovin from '~/components/reception/update-bovin.vue'
+import UpdateMerchandise from '~/components/reception/update-merchandise.vue'
+import UpdateWeight from '~/components/reception/update-weight.vue'
+import { getUsers } from '~/services/auth'
+import { getCarrierList } from '~/services/carrier'
+import type { CarrierData } from '~/services/dto/carrier-data'
+import type { DriverData } from '~/services/dto/driver-data'
+import type { ReceptionBovineTypeData } from '~/services/dto/reception-bovine-data'
+import type {
+    MerchandiseEntryData,
+    ReceptionData,
+    ReceptionFormData,
+    WeightEntryData
+} from '~/services/dto/reception-data'
+import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
+import type { SupplierData } from '~/services/dto/supplier-data'
+import type { TruckData } from '~/services/dto/truck-data'
+import type { UserData } from '~/services/dto/user-data'
+import type { VehicleData } from '~/services/dto/vehicle-data'
+import { getDriverList } from '~/services/driver'
+import {
+    createReceptionBovine,
+    deleteReceptionBovine,
+    getReceptionBovineList,
+    updateReceptionBovine
+} from '~/services/reception-bovine'
+import {
+    createReceptionPelletBuilding,
+    deleteReceptionPelletBuilding,
+    getReceptionPelletBuildingList
+} from '~/services/reception-pellet-building'
+import { getReception, updateReception } from '~/services/reception'
+import { getReceptionTypeList } from '~/services/reception-type'
+import { getSupplierList } from '~/services/supplier'
+import { getTruckList } from '~/services/truck'
+import { getVehicleList } from '~/services/vehicle'
+import { createWeight, updateWeight } from '~/services/weight'
+import { useAuthStore } from '~/stores/auth'
+import { useReceptionStore } from '~/stores/reception'
+import { RECEPTION_TYPE_CODES, SUPPLIER_CODE } from '~/utils/constants'
 
-const activeTab = ref<'weights' | 'merchandise'>('weights')
 const router = useRouter()
+const route = useRoute()
+const auth = useAuthStore()
+const authStore = useAuthStore()
 const receptionStore = useReceptionStore()
+const { printPdf } = usePdfPrinter()
+
+const activeTab = ref<'weightsEmpty' | 'weights' | 'merchandise'>('weights')
+const grossWeight = ref<WeightEntryData>(createEmptyWeightEntry('gross'))
+const tareWeight = ref<WeightEntryData>(createEmptyWeightEntry('tare'))
+const bovineEntries = ref<ReceptionBovineTypeData[]>([])
+const bovineOtherQuantity = ref<number | null>(0)
+const merchandiseForm = ref<MerchandiseEntryData>({
+    merchandiseTypeId: '',
+    merchandiseDetail: '',
+    selectedBuildingIds: [],
+    selectedPelletBuildingIds: {}
+})
+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)
+const carriers = ref<CarrierData[]>([])
+const isLoadingCarriers = ref(false)
+const drivers = ref<DriverData[]>([])
+const isLoadingDrivers = ref(false)
+const vehicles = ref<VehicleData[]>([])
+const isLoadingVehicles = ref(false)
+const formIsLoading = ref(false)
+const isMerchandise = ref(false)
+const isHydrating = ref(false)
+
+const idReception = Number(route.params.id)
+
 const form = reactive<ReceptionFormData>({
+    identificationNumber: null,
     licensePlate: '',
     receptionDate: new Date().toISOString().slice(0, 10),
     receptionTypeId: '',
@@ -199,39 +295,11 @@ const form = reactive<ReceptionFormData>({
     driverId: '',
     vehicleId: ''
 })
-const allowAnyLicensePlate = ref(false)
-const isLoading = ref(false)
-const users = ref<UserData[]>([])
-const isLoadingUsers = ref(false)
-const suppliers = ref<SupplierData[]>([])
-const isLoadingSuppliers = ref(false)
-const trucks = ref<TruckData[]>([])
-const isLoadingTrucks = ref(false)
-const carriers = ref<CarrierData[]>([])
-const isLoadingCarriers = ref(false)
-const drivers = ref<DriverData[]>([])
-const isLoadingDrivers = ref(false)
-const vehicles = ref<VehicleData[]>([])
-const isLoadingVehicles = ref(false)
-const authStore = useAuthStore()
 
-// 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)
     if (!Number.isFinite(supplierId)) {
@@ -239,14 +307,12 @@ 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) {
         return []
     }
     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) {
         return []
@@ -258,19 +324,102 @@ const filteredVehicles = computed<VehicleData[]>(() => {
     )
 })
 
-// Supprime les données bovines si on change de type de réception
-const clearReceptionBovines = async (receptionIri: string) => {
+watch(
+    () => idReception,
+    async (id) => {
+        if (id === null) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const reception = await getReception(id)
+            hydrateFromReception(reception)
+            await loadBovineEntries(id)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {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
+    }
+)
+
+function createEmptyWeightEntry(type: 'gross' | 'tare'): WeightEntryData {
+    return {
+        type,
+        dsd: null,
+        weight: null,
+        weighedAt: null
+    }
+}
+
+async function clearReceptionBovines(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) => {
+async function loadBovineEntries(receptionId: number) {
+    const receptionIri = `/api/receptions/${receptionId}`
+    bovineEntries.value = await getReceptionBovineList(receptionIri)
+}
+
+function syncMerchandiseFlag() {
+    const receptionType =
+        receptionTypes.value.find((type) => String(type.id) === form.receptionTypeId) ?? null
+    isMerchandise.value = receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES
+}
+
+function getRelationId(value: unknown): string | null {
+    if (!value) {
+        return null
+    }
+
+    if (typeof value === 'string') {
+        const match = value.match(/\/(\d+)$/)
+        return match ? match[1] : null
+    }
+
+    if (typeof value === 'object' && 'id' in value) {
+        const relation = value as { id?: number | string }
+        if (typeof relation.id === 'number') {
+            return String(relation.id)
+        }
+        if (typeof relation.id === 'string') {
+            return relation.id
+        }
+    }
+
+    return null
+}
+
+async function clearReceptionMerchandise(receptionId: number) {
+    const receptionIri = `/api/receptions/${receptionId}`
+    const existing = await getReceptionPelletBuildingList(receptionIri)
+    for (const selection of existing) {
+        await deleteReceptionPelletBuilding(selection.id)
+    }
+    await updateReception(receptionId, {
+        merchandiseType: null,
+        merchandiseDetail: null,
+        buildings: []
+    })
+}
+
+function 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,28 +440,44 @@ const hydrateFromUser = (reception: ReceptionData | null) => {
     form.driverId = reception?.driver?.id
         ? String(reception.driver.id)
         : ''
+    form.receptionTypeId = reception?.receptionType?.id
+        ? String(reception.receptionType.id)
+        : ''
+
+    const selectionMap: Record<string, string[]> = {}
+    for (const selection of reception?.pelletBuildings ?? []) {
+        const pelletTypeId = getRelationId(selection.pelletType)
+        const buildingId = getRelationId(selection.building)
+        if (!pelletTypeId || !buildingId) {
+            continue
+        }
+        if (!selectionMap[pelletTypeId]) {
+            selectionMap[pelletTypeId] = []
+        }
+        selectionMap[pelletTypeId].push(buildingId)
+    }
+
+    merchandiseForm.value = {
+        merchandiseTypeId: reception?.merchandiseType?.id ? String(reception.merchandiseType.id) : '',
+        merchandiseDetail: reception?.merchandiseDetail ?? '',
+        selectedBuildingIds: reception?.buildings?.map((building) => String(building.id)) ?? [],
+        selectedPelletBuildingIds: selectionMap
+    }
+
+    const parsedOther =
+        typeof reception?.bovineDetail === 'string' && reception.bovineDetail.trim() !== ''
+            ? Number(reception.bovineDetail)
+            : 0
+    bovineOtherQuantity.value = Number.isFinite(parsedOther) ? parsedOther : 0
+    const gross = reception.weights?.find((weight) => weight.type === 'gross') ?? null
+    const tare = reception.weights?.find((weight) => weight.type === 'tare') ?? null
+    grossWeight.value = gross ? { ...gross } : createEmptyWeightEntry('gross')
+    tareWeight.value = tare ? { ...tare } : createEmptyWeightEntry('tare')
     isHydrating.value = false
+    syncMerchandiseFlag()
 }
 
-watch(
-    () => idReception,
-    async (id) => {
-        if (id === null) {
-            return
-        }
-        isLoading.value = true
-        try {
-            const user = await getReception(id)
-            hydrateFromUser(user)
-        } finally {
-            isLoading.value = false
-        }
-    },
-    {immediate: true}
-)
-
-// Charge la liste des users pour le select
-const loadUsers = async () => {
+async function loadUsers() {
     isLoadingUsers.value = true
     try {
         users.value = await getUsers()
@@ -321,8 +486,7 @@ const loadUsers = async () => {
     }
 }
 
-// Charge la liste des fournisseurs pour le select
-const loadSuppliers = async () => {
+async function loadSuppliers() {
     isLoadingSuppliers.value = true
     try {
         suppliers.value = await getSupplierList()
@@ -331,8 +495,16 @@ const loadSuppliers = async () => {
     }
 }
 
-// Charge la liste des camions pour le select
-const loadTrucks = async () => {
+async function loadTypes() {
+    isLoadingTypes.value = true
+    try {
+        receptionTypes.value = await getReceptionTypeList()
+    } finally {
+        isLoadingSuppliers.value = false
+    }
+}
+
+async function loadTrucks() {
     isLoadingTrucks.value = true
     try {
         trucks.value = await getTruckList()
@@ -341,8 +513,7 @@ const loadTrucks = async () => {
     }
 }
 
-// Charge la liste des transporteurs pour le select
-const loadCarriers = async () => {
+async function loadCarriers() {
     isLoadingCarriers.value = true
     try {
         carriers.value = await getCarrierList()
@@ -351,8 +522,7 @@ const loadCarriers = async () => {
     }
 }
 
-// Charge la liste des chauffeurs pour le select
-const loadDrivers = async () => {
+async function loadDrivers() {
     isLoadingDrivers.value = true
     try {
         drivers.value = await getDriverList()
@@ -361,8 +531,7 @@ const loadDrivers = async () => {
     }
 }
 
-// Charge la liste des véhicules pour le select
-const loadVehicles = async () => {
+async function loadVehicles() {
     isLoadingVehicles.value = true
     try {
         vehicles.value = await getVehicleList()
@@ -371,8 +540,7 @@ const loadVehicles = async () => {
     }
 }
 
-// On met le user connecté par défaut dans le select
-const setDefaultUser = () => {
+function setDefaultUser() {
     if (form.userId) {
         return
     }
@@ -381,8 +549,253 @@ const setDefaultUser = () => {
     }
 }
 
-// On récupère toutes les données des selects au chargement du composant
+async function printReceipt() {
+    if (!import.meta.client || !Number.isFinite(idReception) || idReception <= 0) {
+        return
+    }
+
+    const supplierName =
+        suppliers.value.find((supplier) => String(supplier.id) === form.supplierId)?.name ??
+        'fournisseur'
+    const filename = `${form.identificationNumber || idReception}_${supplierName}_${form.licensePlate || 'immat'}.pdf`
+    await printPdf(`/receptions/${idReception}/receipt`, filename)
+
+    // Laisse le temps a la boite de dialogue d'impression de s'ouvrir.
+    await new Promise((resolve) => setTimeout(resolve, 600))
+}
+
+async function saveWeightEntry(entry: WeightEntryData) {
+    if (!idReception || entry.weight === null) {
+        return
+    }
+
+    const payload = {
+        type: entry.type,
+        dsd: entry.dsd ?? null,
+        weight: entry.weight,
+        weighedAt: entry.weighedAt ?? null
+    }
+
+    if (entry.id) {
+        await updateWeight(entry.id, payload)
+        return
+    }
+
+    await createWeight({
+        reception: `api/receptions/${idReception}`,
+        ...payload
+    })
+}
+async function saveBovineEntry(entry: ReceptionBovineTypeData) {
+    if (!idReception || !entry.bovineType || entry.quantity === null || entry.quantity <= 0) {
+        return
+    }
+
+    const payload = {
+        quantity: entry.quantity
+    }
+
+    if (entry.id) {
+        await updateReceptionBovine(entry.id, payload)
+        return
+    }
+
+    await createReceptionBovine({
+        reception: `/api/receptions/${idReception}`,
+        bovineType: `/api/bovine_types/${entry.bovineType.id}`,
+        ...payload
+    })
+}
+
+function getTotalBovines() {
+    const totalTypes = bovineEntries.value.reduce(
+        (sum, entry) => sum + (entry.quantity ?? 0),
+        0
+    )
+    return totalTypes +
+        (bovineOtherQuantity.value ?? 0)
+}
+
+async function syncBovineEntries() {
+    if (!idReception) {
+        return
+    }
+
+    const receptionIri = `/api/receptions/${idReception}`
+    const existing = await getReceptionBovineList(receptionIri)
+    const currentPositive = bovineEntries.value.filter(
+        (entry) => (entry.quantity ?? 0) > 0
+    )
+
+    for (const existingEntry of existing) {
+        const stillPresent = currentPositive.some(
+            (entry) => entry.bovineType.id === existingEntry.bovineType.id
+        )
+        if (!stillPresent) {
+            await deleteReceptionBovine(existingEntry.id)
+        }
+    }
+
+    for (const entry of currentPositive) {
+        await saveBovineEntry(entry)
+    }
+}
+
+async function saveMerchandiseEntry(
+    receptionIri: string,
+    pelletTypeId: string,
+    buildingId: string,
+    existingKeys: Set<string>
+) {
+    const key = `${pelletTypeId}:${buildingId}`
+    if (existingKeys.has(key)) {
+        return
+    }
+    await createReceptionPelletBuilding({
+        reception: receptionIri,
+        pelletType: `/api/pellet_types/${pelletTypeId}`,
+        building: `/api/buildings/${buildingId}`
+    })
+}
+
+async function syncMerchandiseEntries() {
+    if (!idReception) {
+        return
+    }
+
+    const receptionIri = `/api/receptions/${idReception}`
+    const existing = await getReceptionPelletBuildingList(receptionIri)
+    const existingMap = new Map<string, number>()
+    for (const selection of existing) {
+        const pelletTypeId = getRelationId(selection.pelletType)
+        const buildingId = getRelationId(selection.building)
+        if (!pelletTypeId || !buildingId) {
+            continue
+        }
+        existingMap.set(`${pelletTypeId}:${buildingId}`, selection.id)
+    }
+
+    const desiredEntries: Array<{ pelletTypeId: string; buildingId: string }> = []
+    for (const [pelletTypeId, buildingIds] of Object.entries(
+        merchandiseForm.value.selectedPelletBuildingIds
+    )) {
+        for (const buildingId of buildingIds) {
+            desiredEntries.push({ pelletTypeId, buildingId })
+        }
+    }
+    const desiredKeys = new Set(
+        desiredEntries.map((entry) => `${entry.pelletTypeId}:${entry.buildingId}`)
+    )
+
+    for (const [key, selectionId] of existingMap.entries()) {
+        if (!desiredKeys.has(key)) {
+            await deleteReceptionPelletBuilding(selectionId)
+        }
+    }
+
+    const existingKeys = new Set(existingMap.keys())
+    for (const entry of desiredEntries) {
+        await saveMerchandiseEntry(
+            receptionIri,
+            entry.pelletTypeId,
+            entry.buildingId,
+            existingKeys
+        )
+    }
+}
+
+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()
+    const normalizedTruckId = form.truckId.trim()
+    const normalizedCarrierId = form.carrierId.trim()
+    const normalizedDriverId = form.driverId.trim()
+    const userIri = normalizedUserId
+        ? `/api/users/${normalizedUserId}`
+        : null
+    const supplierIri = normalizedSupplierId
+        ? `/api/suppliers/${normalizedSupplierId}`
+        : null
+    const addressIri = normalizedAddressId
+        ? `/api/addresses/${normalizedAddressId}`
+        : null
+    const truckIri = normalizedTruckId
+        ? `/api/trucks/${normalizedTruckId}`
+        : null
+    const carrierIri = normalizedCarrierId
+        ? `/api/carriers/${normalizedCarrierId}`
+        : null
+    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,
+        truck: truckIri,
+        carrier: carrierIri
+    }
+
+    const payload = {
+        ...basePayload,
+        ...(isLiotCarrier.value && driverIri ? { driver: driverIri } : {}),
+    }
+
+    if (idReception) {
+        await receptionStore.updateReception(idReception, {
+            ...payload
+        })
+        await saveWeightEntry(grossWeight.value)
+        await saveWeightEntry(tareWeight.value)
+
+        if (isMerchandise.value) {
+            await clearReceptionBovines(idReception)
+            await updateReception(idReception, {
+                merchandiseType: merchandiseForm.value.merchandiseTypeId
+                    ? `/api/merchandise_types/${merchandiseForm.value.merchandiseTypeId}`
+                    : null,
+                merchandiseDetail: merchandiseForm.value.merchandiseDetail.trim() || null,
+                buildings: merchandiseForm.value.selectedBuildingIds.map(
+                    (buildingId) => `/api/buildings/${buildingId}`
+                ),
+                bovineDetail: null,
+                bovinesTypes: null
+            })
+            await syncMerchandiseEntries()
+        } else {
+                if (getTotalBovines() > 52) {
+                    // toast/erreur UI
+                    return
+                }
+                await clearReceptionMerchandise(idReception)
+                await syncBovineEntries()
+                await updateReception(idReception, {
+                bovineDetail: bovineOtherQuantity.value ? String(bovineOtherQuantity.value) : null
+            })
+        }
+
+        const refreshedReception = await getReception(idReception)
+        hydrateFromReception(refreshedReception)
+
+        return
+    }
+}
+
 onMounted(async () => {
+    await loadTypes()
+    syncMerchandiseFlag()
+    formIsLoading.value = true
     await loadUsers()
     await loadSuppliers()
     await loadTrucks()
@@ -393,7 +806,6 @@ onMounted(async () => {
     setDefaultUser()
 })
 
-// Ajuste driver/vehicle quand le transporteur change (logique LIOT)
 watch(
     () => [form.supplierId, form.addressId, suppliers.value],
     () => {
@@ -419,10 +831,9 @@ watch(
             }
         }
     },
-    {immediate: true}
+    { immediate: true }
 )
 
-// Valide/auto-sélectionne le véhicule selon camion + transporteur (LIOT)
 watch(
     () => form.carrierId,
     () => {
@@ -446,10 +857,9 @@ watch(
             form.vehicleId = String(filteredVehicles.value[0].id)
         }
     },
-    {immediate: true}
+    { immediate: true }
 )
 
-// Récupère la plaque depuis le véhicule choisi (LIOT)
 watch(
     () => [form.truckId, form.carrierId, vehicles.value],
     () => {
@@ -470,10 +880,9 @@ watch(
             form.vehicleId = ''
         }
     },
-    {immediate: true}
+    { immediate: true }
 )
 
-// Auto-renseigne le véhicule si la plaque correspond (LIOT)
 watch(
     () => [form.vehicleId, form.carrierId, vehicles.value],
     () => {
@@ -508,60 +917,4 @@ 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 normalizedUserId = form.userId.trim()
-    const normalizedSupplierId = form.supplierId.trim()
-    const normalizedAddressId = form.addressId.trim()
-    const normalizedTruckId = form.truckId.trim()
-    const normalizedCarrierId = form.carrierId.trim()
-    const normalizedDriverId = form.driverId.trim()
-    const userIri = normalizedUserId
-        ? `/api/users/${normalizedUserId}`
-        : null
-    const supplierIri = normalizedSupplierId
-        ? `/api/suppliers/${normalizedSupplierId}`
-        : null
-    const addressIri = normalizedAddressId
-        ? `/api/addresses/${normalizedAddressId}`
-        : null
-    const truckIri = normalizedTruckId
-        ? `/api/trucks/${normalizedTruckId}`
-        : null
-    const carrierIri = normalizedCarrierId
-        ? `/api/carriers/${normalizedCarrierId}`
-        : null
-    const driverIri = normalizedDriverId
-        ? `/api/drivers/${normalizedDriverId}`
-        : null
-
-    const basePayload = {
-        licensePlate: normalizedLicensePlate,
-        receptionDate: normalizedReceptionDate,
-        user: userIri,
-        supplier: supplierIri,
-        address: addressIri,
-        truck: truckIri,
-        carrier: carrierIri
-    }
-
-    const payload = {
-        ...basePayload,
-        ...(isLiotCarrier.value && driverIri ? {driver: driverIri} : {})
-    }
-
-    if (idReception) {
-        const updated = await receptionStore.updateReception(idReception, {
-            ...payload
-        })
-        if (updated) {
-            await router.push(`/reception/update/${updated.id}`)
-        }
-        router.push("/reception/finish-reception")
-        return
-    }
-}
-
 </script>
diff --git a/frontend/services/dto/reception-data.ts b/frontend/services/dto/reception-data.ts
index b81bfe9..d8cec88 100644
--- a/frontend/services/dto/reception-data.ts
+++ b/frontend/services/dto/reception-data.ts
@@ -41,9 +41,18 @@ export interface WeightEntryData {
     weighedAt: string | null
 }
 
+export interface MerchandiseEntryData {
+    merchandiseTypeId: string
+    merchandiseDetail: string
+    selectedBuildingIds: string[]
+    selectedPelletBuildingIds: Record<string, string[]>
+}
+
 export interface WeightFormData {
     id: number
     weight: number
+    weighedAt : string
+    dsd: number
     type: 'gross' | 'tare'
 }
 
@@ -69,6 +78,7 @@ export type ReceptionPayload = {
 }
 
 export type ReceptionFormData = {
+    identificationNumber?: null|string,
     licensePlate: string
     receptionDate: string
     receptionTypeId: string
@@ -79,6 +89,7 @@ export type ReceptionFormData = {
     carrierId: string
     driverId: string
     vehicleId: string
+    weight?: ReceptionFormWeight | null
 }
 
 export type ReceptionFormWeight = {
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 6111269..edf0f0c 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -8,8 +8,11 @@ export default <Partial<Config>>{
       },
       colors: {
         primary: {
+          700: '#35453C',
           500: '#456452',
+
         }
+
       }
     }
   }
diff --git a/templates/reception_voucher.html.twig b/templates/reception_voucher.html.twig
index 138fbc4..352e998 100644
--- a/templates/reception_voucher.html.twig
+++ b/templates/reception_voucher.html.twig
@@ -220,9 +220,15 @@
 
         <tr class="border-bottom">
             <td>
+                {% if reception.receptionType and reception.receptionType.code == 'BOVINS' %}
                 <strong>
                     Type de bovins
                 </strong>
+                {% else %}
+                <strong>
+                    Type de marchandises
+                </strong>
+                {% endif %}
                 <br><br>
 
                 <div class="bigtable-notes">
@@ -263,6 +269,9 @@
                                 <p>Aucun dépôt de granulés renseigné.</p>
                             {% endfor %}
                         {% else %}
+                            {% if reception.merchandiseType %}
+                                <p><strong>{{ reception.merchandiseType.label }}</strong></p>
+                            {% endif %}
                             {% set buildingLabels = [] %}
                             {% for building in reception.buildings|default([]) %}
                                 {% set buildingLabels = buildingLabels|merge([building.label]) %}