[#332]Refonte écran réception terminée (!31)

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

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>