feat : dernier push avant finalisation de affichage reception finie

2026-02-23 17:44:33 +01:00
parent 0d258ae9c6
commit d47f237bac
11 changed files with 473 additions and 204 deletions
--- a/frontend/components/reception/update-bovin.vue
+++ b/frontend/components/reception/update-bovin.vue
@@ -1,13 +1,10 @@
 <template>
-    <form @submit.prevent="validate">
-    <div
-        class="flex flex-col items-center gap-16">
-        <div
-            class="flex flex-row gap-6 items-center">
+    <form>
+        <div class="flex flex-row justify-between gap-x-12  font-bold uppercase mb-8">
            <div
                v-for="type in bovineType"
                :key="type.id"
-                class="flex flex-row mb-2 gap-6 ">
+            >
                <UiNumberInput
                    :label="type.label"
                    :code="type.code"
@@ -16,52 +13,47 @@
                    :placeholder="0"
                    :min="0"
                    :max="10"
+                    wrapperClass="w-44"
                />
            </div>
-            <div
-                class=" flex flex-row mb-2 gap-6">
-                <UiNumberInput
-                    label="Autres"
-                    v-model="otherQuantity"
-                    :disabled="!auth.isAdmin"
-                />
-            </div>
+
+            <UiNumberInput
+                label="Autres"
+                v-model="otherQuantity"
+                :disabled="!auth.isAdmin"
+                wrapperClass="w-44"
+            />
        </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 {createReceptionBovine, deleteReceptionBovine, getReceptionBovineList, updateReceptionBovine} from "~/services/reception-bovine";
 import {computed, onMounted, reactive, ref, watch} from "vue";
 import {getReception, updateReception} from "~/services/reception";
+
 const toast = useToast()
 const isLoadingBovineType = ref(false)
 const bovineType = ref<BovineTypeData[]>([])
 const bovineQuantities = reactive<Record<string, number | null>>({})
 const otherQuantity = ref<number | null>(0)
+const initialBovineQuantities = ref<Record<string, number | null>>({})
+const initialOtherQuantity = ref<number | null>(0)
 const auth = useAuthStore()
+
 const props = defineProps<{
    idReception: number
+    isValidate: boolean
 }>()
+
 const receptionId = props.idReception
 const reception = await getReception(receptionId)

 const receptionIri = computed(() =>
    receptionId ? `/api/receptions/${receptionId}` : null
 )
+
 const totalBovines = computed(() => {
    const base = Object.values(bovineQuantities).reduce((sum, value) => {
        return sum + (value ?? 0)
@@ -69,6 +61,20 @@ const totalBovines = computed(() => {
    return base + (otherQuantity.value ?? 0)
 })

+const hasBovineChanged = () => {
+    if ((initialOtherQuantity.value ?? 0) !== (otherQuantity.value ?? 0)) {
+        return true
+    }
+
+    for (const [key, value] of Object.entries(bovineQuantities)) {
+        if ((initialBovineQuantities.value[key] ?? 0) !== (value ?? 0)) {
+            return true
+        }
+    }
+
+    return false
+}
+
 const loadBovineType = async () => {
    isLoadingBovineType.value = true
    try {
@@ -111,6 +117,8 @@ watch(
                ? Number(existingOther)
                : 0
        otherQuantity.value = Number.isFinite(parsedOther) ? parsedOther : 0
+        initialBovineQuantities.value = {...selectionMap}
+        initialOtherQuantity.value = otherQuantity.value ?? 0
    },
    {immediate: true}
 )
@@ -151,7 +159,6 @@ async function syncBovineSelections(receptionIri: string) {
            continue
        }
        if (existingMap.has(bovineTypeId)) {
-            // Déjà à jour
            continue
        }
        await createReceptionBovine({
@@ -162,7 +169,18 @@ async function syncBovineSelections(receptionIri: string) {
    }
 }

-async function validate() {
+watch(
+    () => props.isValidate,
+    async (val) => {
+        if (!val) return
+        await runValidate()
+    }
+)
+const runValidate = async () => {
+    if (!hasBovineChanged()) {
+        return
+    }
+    const receptionIri = `/api/receptions/${reception.id}`
    // @TODO Ajouter un composable pour le toaster qui gère les key i18n
    if (totalBovines.value > 52) {
        toast.error({
@@ -172,12 +190,16 @@ async function validate() {
        return
    }

-    await syncBovineSelections(receptionIri.value)
+    await syncBovineSelections(receptionIri)

    await updateReception(receptionId, {
        merchandiseType: null,
        merchandiseDetail: null,
        bovineDetail: otherQuantity.value ? String(otherQuantity.value) : null,
    })
+
+    initialBovineQuantities.value = {...bovineQuantities}
+    initialOtherQuantity.value = otherQuantity.value ?? 0
 }
+
 </script>
--- a/frontend/components/reception/update-merchandise.vue
+++ b/frontend/components/reception/update-merchandise.vue
@@ -1,33 +1,29 @@
 <template>
-    <form @submit.prevent="validate">
-        <div class="flex flex-col items-center gap-16">
+    <form>
            <div
-                class="flex flex-col gap-16 items-center w-full">
-                <UiTextInput
+                class="flex flex-col w-full">
+                <div class="w-full col-start-1 row-start-1">
+                <UiRadioGroup
                    id="merchandise-type"
                    v-model="selectedMerchandiseTypeId"
                    label="Type de marchandises"
-                    :value="reception.merchandiseType?.label"
-                    wrapper-class="w-[550px]"
-                    :disabled="true"
+                    :options="merchandiseTypes.map((type) => ({
+                        value: String(type.id),
+                        label: type.label
+                    }))"
+                    input-class="accent-primary-700 focus:ring-primary-700"
+                    item-class="text-primary-700/50 [&:has(input:checked)]:text-primary-700"
+                    option-label-class="uppercase"
+                    wrapper-class="w-full uppercase "
+                    group-class="grid grid-cols-[335px_337px_355px_200px] w-[160px_160px_200px_200px] mt-9 mb-7"
+                    :disabled="!auth.isAdmin"
                />
-                <div
-                    v-if="merchandiseTypeId && isAutres"
-                    class="flex flex-col w-full max-w-[550px]"
-                >
-                    <UiTextInput
-                        id="merchandise-detail"
-                        :disabled="!auth.isAdmin"
-                        v-model="merchandiseDetail"
-                        label="Préciser"
-                        placeholder="Précisions complémentaires"
-                        :maxlength="255"
-                    />
                </div>

+                <div class=" w-full grid grid-cols-[3fr_1fr] gap-[80px] col-start-2 row-start-1 ">
                <div
                    v-if="merchandiseTypeId && !isGranule"
-                    class="flex gap-4 w-[550px] justify-evenly"
+                    class="flex gap-[187px]"
                >
                    <div
                        v-for="building in buildings"
@@ -38,28 +34,44 @@
                            :value="String(building.id)"
                            :label="building.label"
                            :disabled="!auth.isAdmin"
-                            label-class="text-xl"
+                            input-class="accent-primary-700 focus:ring-primary-700"
+                            label-class="text-xl uppercase"
                        />
                    </div>
                </div>
+                <div
+                    v-if="merchandiseTypeId && isAutres"
+                    class="flex flex-col w-full max-w-[225px]"
+                >
+                    <UiTextInput
+                        id="merchandise-detail"
+                        :disabled="!auth.isAdmin"
+                        v-model="merchandiseDetail"
+                        placeholder="Préciser"
+                        :maxlength="255"
+                    />
+                </div>
+                </div>

                <div
                    v-if="merchandiseTypeId && isGranule"
-                    class="flex flex-col gap-10 w-full max-w-[1100px]"
+                    class="flex flex-col gap-10 w-full col-start-2 row-start-1 "
                >
-                    <div class="grid grid-cols-1 gap-10 md:grid-cols-4">
-                        <div v-for="type in pelletTypes" :key="type.id" class="flex flex-col gap-4">
-                            <p class="font-bold uppercase">{{ type.label }}</p>
+                    <div class="grid grid-cols-1 md:grid-cols-[max-content_max-content_max-content_max-content] justify-between">
+
+                    <div v-for="type in pelletTypes" :key="type.id" class="flex flex-col gap-4">
+                            <p class="mb-1 font-medium uppercase">{{ type.label }}</p>
                            <div
                                v-for="building in buildings"
                                :key="building.id"
-                                class="flex items-center gap-2 text-lg"
+                                class="flex items-center text-lg"
                            >
                                <UiCheckbox
                                    v-model="selectedPelletBuildingIds[String(type.id)]"
                                    :value="String(building.id)"
                                    :label="building.label"
                                    :disabled="!auth.isAdmin"
+                                    input-class="accent-primary-700 focus:ring-primary-700"
                                    label-class="text-lg"
                                />
                            </div>
@@ -67,19 +79,11 @@
                    </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 {computed, onMounted, ref, watch} from 'vue'
 import {getBuildingList} from '~/services/building'
 import {getMerchandiseTypeList} from '~/services/merchandise-type'
 import type {MerchandiseTypeData} from '~/services/dto/merchandise-type-data'
@@ -102,12 +106,17 @@ const selectedBuildingIds = ref<string[]>([])
 const selectedPelletBuildingIds = ref<Record<string, string[]>>({})
 const merchandiseDetail = ref('')
 const auth = useAuthStore()
+const initialMerchandiseTypeId = ref<string | null>(null)
+const initialMerchandiseDetail = ref<string | null>(null)
+const initialBuildingIds = ref<string[]>([])
+const initialPelletSelections = ref<Record<string, string[]>>({})
 const props = defineProps<{
    idReception: number
+    isValidate: boolean
 }>()
 const receptionId = props.idReception
 const reception = await getReception(receptionId)
-const merchandiseTypeId = await reception.receptionType?.id
+const merchandiseTypeId = reception.receptionType?.id

 // Extrait l'ID d'une relation depuis un IRI ou un objet complet.
 const getRelationId = (value: unknown): string | null => {
@@ -142,6 +151,52 @@ const isGranule = computed(() => selectedMerchandiseType.value?.code === MERCHAN
 // Indique si le type est "Autres"
 const isAutres = computed(() => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.AUTRES)

+const hasMerchandiseChanged = () => {
+    const currentTypeId = selectedMerchandiseTypeId.value || null
+    if (initialMerchandiseTypeId.value !== currentTypeId) {
+        return true
+    }
+
+    const currentDetail = isAutres.value ? merchandiseDetail.value.trim() : ''
+    if ((initialMerchandiseDetail.value ?? '') !== currentDetail) {
+        return true
+    }
+
+    const currentBuildings = isGranule.value ? [] : [...selectedBuildingIds.value].sort()
+    const initialBuildings = [...initialBuildingIds.value].sort()
+    if (currentBuildings.length !== initialBuildings.length) {
+        return true
+    }
+    for (let i = 0; i < currentBuildings.length; i += 1) {
+        if (currentBuildings[i] !== initialBuildings[i]) {
+            return true
+        }
+    }
+
+    const currentPellets = normalizePelletSelections(selectedPelletBuildingIds.value)
+    const initialPellets = normalizePelletSelections(initialPelletSelections.value)
+    if (currentPellets.length !== initialPellets.length) {
+        return true
+    }
+    for (let i = 0; i < currentPellets.length; i += 1) {
+        if (currentPellets[i] !== initialPellets[i]) {
+            return true
+        }
+    }
+
+    return false
+}
+
+const normalizePelletSelections = (selections: Record<string, string[]>) => {
+    const pairs: string[] = []
+    for (const [pelletTypeId, buildingIds] of Object.entries(selections)) {
+        for (const buildingId of buildingIds) {
+            pairs.push(`${pelletTypeId}:${buildingId}`)
+        }
+    }
+    return pairs.sort()
+}
+
 // Charge les référentiels et hydrate le formulaire depuis la réception
 onMounted(async () => {
    const [merchandiseTypeList, buildingList, pelletTypeList] = await Promise.all([
@@ -183,14 +238,36 @@ onMounted(async () => {
        }
    }
    selectedPelletBuildingIds.value = selectionMap
+    initialMerchandiseTypeId.value = selectedMerchandiseTypeId.value || null
+    initialMerchandiseDetail.value = isAutres.value ? merchandiseDetail.value.trim() : ''
+    initialBuildingIds.value = [...selectedBuildingIds.value]
+    initialPelletSelections.value = JSON.parse(JSON.stringify(selectedPelletBuildingIds.value))
 })
-// Enregistre les sélections et passe à l'étape suivante
-async function validate() {

+watch(
+    () => props.isValidate,
+    async (val) => {
+        if (!val) return
+        await runValidate()
+    }
+)
+
+const runValidate = async () => {
+    if (!hasMerchandiseChanged()) {
+        return
+    }
    const receptionIri = `/api/receptions/${reception.id}`

+    // 1) supprimer toutes les anciennes associations
+    await clearPelletSelections(receptionIri)
+
+    // 2) update reception (type + détails + buildings non-granulé)
    await updateReception(reception.id, {
-        merchandiseDetail: isAutres.value ? merchandiseDetail.value.trim() : null,
+        merchandiseType: selectedMerchandiseTypeId.value
+            ? `/api/merchandise_types/${selectedMerchandiseTypeId.value}`
+            : null,
+        merchandiseDetail: isAutres.value ? merchandiseDetail.value.trim() :
+            null,
        buildings: isGranule.value
            ? []
            : selectedBuildingIds.value.map((id) => `/api/buildings/${id}`),
@@ -198,11 +275,15 @@ async function validate() {
        bovinesTypes: null,
    })

+    // 3) si granulé ALORS créer les nouvelles associations
    if (isGranule.value) {
        await syncPelletSelections(receptionIri)
-    } else {
-        await clearPelletSelections(receptionIri)
    }
+
+    initialMerchandiseTypeId.value = selectedMerchandiseTypeId.value || null
+    initialMerchandiseDetail.value = isAutres.value ? merchandiseDetail.value.trim() : ''
+    initialBuildingIds.value = [...selectedBuildingIds.value]
+    initialPelletSelections.value = JSON.parse(JSON.stringify(selectedPelletBuildingIds.value))
 }

 // Supprime toutes les associations granulés/bâtiments existantes
@@ -255,4 +336,5 @@ async function syncPelletSelections(receptionIri: string) {
        }
    }
 }
+
 </script>
--- a/frontend/components/reception/update-weight.vue
+++ b/frontend/components/reception/update-weight.vue
@@ -1,6 +1,22 @@
 <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="weight.type"
+                :label="'POIDS'"
+                labelClass="font-bold uppercase text-xl "
+                v-model="weight.weight"
+                :disabled="!auth.isAdmin"
+                :min="0"
+                :max="48000"
+            />
+
+            <UiDateInput
+                label="Date pesée"
+                v-model="sharedWeightMeta.weighedAt"
+                :disabled="!auth.isAdmin"
+            />
+
            <UiNumberInput
                label="Dsd"
                class="col-start-2"
@@ -8,38 +24,7 @@
                v-model="sharedWeightMeta.dsd"
                :disabled="!auth.isAdmin"
            />
-            <UiDateInput
-                label="Date pesée"
-                v-model="sharedWeightMeta.weighedAt"
-                :disabled="!auth.isAdmin"
-            />
        </div>
-        <div class="grid grid-cols-2 gap-x-40 mb-16">
-            <UiNumberInput
-                v-for="weight in form.weights"
-                :key="weight.type"
-                :label="getWeightLabel(weight.type)"
-                labelClass="font-bold uppercase text-xl"
-                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>

@@ -48,12 +33,17 @@ import type {ReceptionFormWeight} from '~/services/dto/reception-data'
 import {getReception} from '~/services/reception'
 import {updateWeight} from "~/services/weight";
 import {useAuthStore} from "~/stores/auth";
+import {ref, watch} from "vue";

 const props = defineProps<{
    idReception: number
+    weightType: string
+    isValidate: boolean
 }>()

 const idReception = props.idReception
+const weightType = props.weightType
+
 const auth = useAuthStore()

 const form = reactive({
@@ -62,6 +52,10 @@ const form = reactive({
        {id: 0, type: 'gross' as const, weight: 0, dsd: null, weighedAt: null}
    ]
 })
+
+const weight = form.weights.find(w => w.type === weightType)
+const initialWeight = ref<{ weight: number | null; dsd: number | null; weighedAt: string | null } | null>(null)
+
 // DSD et date de pesée sont partagés entre tare et gross dans l'UI.
 const sharedWeightMeta = reactive<{
    dsd: number | string | null
@@ -71,8 +65,20 @@ const sharedWeightMeta = reactive<{
    weighedAt: null
 })

-const getWeightLabel = (type: 'tare' | 'gross'): string => {
-    return type === 'tare' ? 'Pesée à vide' : 'Pesée à plein'
+const normalizeMeta = () => {
+    const sharedDsd =
+        sharedWeightMeta.dsd === null || sharedWeightMeta.dsd === undefined || sharedWeightMeta.dsd === ''
+            ? null
+            : Number(sharedWeightMeta.dsd)
+    const sharedWeighedAt =
+        sharedWeightMeta.weighedAt === null || sharedWeightMeta.weighedAt === undefined || sharedWeightMeta.weighedAt === ''
+            ? null
+            : sharedWeightMeta.weighedAt
+
+    return {
+        dsd: Number.isFinite(sharedDsd) ? sharedDsd : null,
+        weighedAt: sharedWeighedAt
+    }
 }

 const hydrateFromReception = (reception: ReceptionFormWeight) => {
@@ -94,6 +100,15 @@ const hydrateFromReception = (reception: ReceptionFormWeight) => {
        sharedWeightMeta.dsd = weightWithMeta.dsd ?? null
        sharedWeightMeta.weighedAt = weightWithMeta.weighedAt ?? null
    }
+
+    if (weight) {
+        const normalized = normalizeMeta()
+        initialWeight.value = {
+            weight: weight.weight ?? null,
+            dsd: normalized.dsd,
+            weighedAt: normalized.weighedAt
+        }
+    }
 }

 onMounted(async () => {
@@ -101,24 +116,48 @@ onMounted(async () => {
    hydrateFromReception(reception)
 })

-async function validate() {
-    const sharedDsd =
-        sharedWeightMeta.dsd === null || sharedWeightMeta.dsd === undefined || sharedWeightMeta.dsd === ''
-            ? null
-            : Number(sharedWeightMeta.dsd)
-    const sharedWeighedAt =
-        sharedWeightMeta.weighedAt === null || sharedWeightMeta.weighedAt === undefined || sharedWeightMeta.weighedAt === ''
-            ? null
-            : sharedWeightMeta.weighedAt
-    for (const weight of form.weights) {
-        if (weight.id) {
-            await updateWeight(weight.id, {
-                weight: weight.weight,
-                dsd: Number.isFinite(sharedDsd) ? sharedDsd : null,
-                weighedAt: sharedWeighedAt
-            })
-        }
+watch(
+    () => props.isValidate,
+    async (val) => {
+        if (!val) return
+        await runValidate()
+    }
+)
+
+const hasChanged = (current: { weight: number | null; dsd: number | null; weighedAt: string | null }) => {
+    if (!initialWeight.value) {
+        return true
+    }
+    return (
+        (current.weight ?? null) !== (initialWeight.value.weight ?? null) ||
+        (current.dsd ?? null) !== (initialWeight.value.dsd ?? null) ||
+        (current.weighedAt ?? null) !== (initialWeight.value.weighedAt ?? null)
+    )
+}
+
+const runValidate = async () => {
+    if (!weight?.id) {
+        return
    }

+    const normalized = normalizeMeta()
+    const current = {
+        weight: weight.weight ?? null,
+        dsd: normalized.dsd,
+        weighedAt: normalized.weighedAt
+    }
+
+    if (!hasChanged(current)) {
+        return
+    }
+
+    await updateWeight(weight.id, {
+        weight: current.weight,
+        dsd: current.dsd,
+        weighedAt: current.weighedAt
+    })
+
+    initialWeight.value = current
 }
+
 </script>
--- 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>
--- 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
            ]"
--- 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 flex-col', 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',
--- 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
--- 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>
--- a/frontend/pages/reception/update/[[id]].vue
+++ b/frontend/pages/reception/update/[[id]].vue
@@ -1,10 +1,15 @@
 <template>

    <form @submit.prevent="validate">
-        <div class="flex items-center justify-between mt-12 mb-8 ">
-            <h1 class="font-bold text-5xl uppercase">Réception {{ receptionLoad?.identificationNumber }}</h1>
-        </div>
-        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-12">
+        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-[60px]">
+            <div class="flex items-center justify-between gap-10 relative">
+                <div class="flex flex-row absolute -left-[60px] justify-between">
+                    <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
+                </div>
+                <h1 class="font-bold text-4xl col-start-1 row-start-1 text-primary-500 uppercase">Réception {{ form.identificationNumber }}</h1>
+                <Icon @click="router.push('/')" name="mdi:printer-outline" size="44" class="cursor-pointer text-primary-500"/>
+            </div>
+
            <!--    Nom de l'utilisateur       -->
            <UiSelect
                id="reception-user"
@@ -16,7 +21,7 @@
                    label: user.username
                }))"
                :loading="isLoadingUsers"
-                wrapper-class="col-start-1 row-start-1"
+                wrapper-class="col-start-1 row-start-2"
            />
            <!--    Date de réception        -->
            <UiDateInput
@@ -24,7 +29,20 @@
                :disabled="!auth.isAdmin"
                v-model="form.receptionDate"
                label="Date de réception"
-                wrapper-class="col-start-1 row-start-2"
+                wrapper-class="col-start-1 row-start-3"
+            />
+            <!--    type de reception        -->
+            <UiSelect
+                id="reception-supplier"
+                v-model="form.receptionTypeId"
+                :disabled="!auth.isAdmin"
+                label="Type de Réception"
+                :options="receptionTypes.map((receptionType) => ({
+                    value: String(receptionType.id),
+                    label: receptionType.label
+                }))"
+                :loading="isLoadingSuppliers"
+                wrapper-class="col-start-1 row-start-4"
            />
            <!--    Fournisseur        -->
            <UiSelect
@@ -37,7 +55,7 @@
                    label: supplier.name
                }))"
                :loading="isLoadingSuppliers"
-                wrapper-class="col-start-1 row-start-3"
+                wrapper-class="col-start-1 row-start-5"
            />
            <!--    Adresse fournisseur        -->
            <UiSelect
@@ -49,7 +67,7 @@
                    label: address.fullAddress
                }))"
                :disabled="(isLoadingSuppliers || supplierAddresses.length === 0) && !auth.isAdmin"
-                wrapper-class="col-start-1 row-start-4"
+                wrapper-class="col-start-2 row-start-1"
            />
            <!--    Camion        -->
            <UiSelect
@@ -62,7 +80,7 @@
                    label: truck.name
                }))"
                :loading="isLoadingTrucks"
-                wrapper-class="col-start-2 row-start-1"
+                wrapper-class="col-start-2 row-start-2"
            />
            <!--    Transporteur        -->
            <UiSelect
@@ -76,7 +94,7 @@
                }))"
                :loading="isLoadingCarriers"
                select-class="h-[34px]"
-                wrapper-class="col-start-2 row-start-2"
+                wrapper-class="col-start-2 row-start-3"
            />
            <!--    Chauffeur (LIOT)        -->
            <UiSelect
@@ -89,10 +107,10 @@
                    label: driver.name
                }))"
                :loading="isLoadingDrivers"
-                wrapper-class="col-start-2 row-start-3"
+                wrapper-class="col-start-2 row-start-4"
            />
            <!--    Plaque d'immatriculation       -->
-            <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-5">
                <UiLicensePlateInput
                    :disabled="!auth.isAdmin"
                    v-model="form.licensePlate"
@@ -111,30 +129,28 @@
                }))"
                :loading="isLoadingVehicles"
                :disabled="(isLoadingVehicles || filteredVehicles.length === 0) && !auth.isAdmin"
-                wrapper-class="col-start-2 row-start-4"
+                wrapper-class="col-start-2 row-start-5"
            />
        </div>
-        <div class="flex justify-center mb-2">
-            <UiButton
-                v-if="auth.isAdmin"
-                type="submit"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] mb-16"
-
-            >
-                Enregistrer
-            </UiButton>
-        </div>
-            <div class="flex justify-evenly gap-y-8 gap-x-40 mb-8 border-b border-slate-400">
+            <div v-if="formIsLoading">
+            <div class="flex justify-evenly gap-y-8 gap-x-41 mb-10 border-b border-primary-500/60">
                <h1
-                    class="font-bold text-3xl uppercase col-start-1 row-start-1 cursor-pointer"
-                    :class="activeTab === 'weights' ? 'underline' : ''"
-                    @click="activeTab = 'weights'"
+                    class="font-bold text-3xl uppercase px-12 col-start-1 row-start-1  cursor-pointer "
+                    :class="activeTab === 'weightsEmpty' ? 'border-b-[6px] border-primary-500 text-primary-500' : 'text-primary-500/50'"
+                    @click="activeTab = 'weightsEmpty'"
                >
-                    pesées
+                    pesée à plein
                </h1>
                <h1
-                    class="font-bold text-3xl uppercase col-start-2 row-start-1 cursor-pointer"
-                    :class="activeTab === 'merchandise' ? 'underline' : ''"
+                    class="font-bold text-3xl uppercase col-start-1 row-start-1 px-12 cursor-pointer "
+                    :class="activeTab === 'weights' ? 'border-b-[6px] border-primary-500 text-primary-500 ' : 'text-primary-500/50'"
+                    @click="activeTab = 'weights'"
+                >
+                    pesée à vide
+                </h1>
+                <h1
+                    class="font-bold text-3xl uppercase px-12 col-start-2 row-start-1 cursor-pointer "
+                    :class="activeTab === 'merchandise' ? 'border-b-[6px] border-primary-500 text-primary-500' : 'text-primary-500/50'"
                    @click="activeTab = 'merchandise'"
                >
                    {{ isMerchandise ? "Marchandise" : "Bovins" }}
@@ -142,22 +158,47 @@
            </div>

            <update-weight
-                v-if="activeTab === 'weights'"
+                v-show="activeTab === 'weights'"
                :idReception="idReception"
+                :weightType="'tare'"
                :disabled="!auth.isAdmin"
+                :isValidate="isValid"
            />
+            <div class="mb-12 ">
+                <update-weight
+                    v-show="activeTab === 'weightsEmpty'"
+                    :idReception="idReception"
+                    :weightType="'gross'"
+                    :disabled="!auth.isAdmin"
+                    :isValidate="isValid"
+                />

-            <update-merchandise
-                v-else-if="activeTab === 'merchandise' && isMerchandise"
-                :idReception="idReception"
-                :disabled="!auth.isAdmin"
-            />
+                <update-merchandise
+                    v-show="activeTab === 'merchandise' && isMerchandise"
+                    :idReception="idReception"
+                    :disabled="!auth.isAdmin"
+                    :isValidate="isValidMerchandise"
+                />

-            <update-bovin
-                v-else
-                :idReception="idReception"
-                :disabled="!auth.isAdmin"
-            />
+                <update-bovin
+                    v-show="activeTab === 'merchandise' && !isMerchandise"
+                    :idReception="idReception"
+                    :disabled="!auth.isAdmin"
+                    :isValidate="isValidBovin"
+
+                />
+            </div>
+                <div class="flex justify-center">
+                <UiButton
+                    v-if="auth.isAdmin"
+                    type="submit"
+                    class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] mb-16"
+
+                >
+                    Enregistrer
+                </UiButton>
+            </div>
+            </div>
    </form>
 </template>

@@ -176,18 +217,24 @@ import type {DriverData} from '~/services/dto/driver-data'
 import {getDriverList} from '~/services/driver'
 import type {VehicleData} from '~/services/dto/vehicle-data'
 import {getVehicleList} from '~/services/vehicle'
-import {SUPPLIER_CODE} from "~/utils/constants";
-import {deleteReceptionBovine, getReceptionBovineList} from "~/services/reception-bovine";
+import {RECEPTION_TYPE_CODES, SUPPLIER_CODE} from "~/utils/constants";
+import {
+    deleteReceptionBovine,
+    getReceptionBovineList,
+} from "~/services/reception-bovine";
 import type {ReceptionData, ReceptionFormData} from "~/services/dto/reception-data";
-import {getReception} from "~/services/reception";
+import {getReception, updateReception} from "~/services/reception";
 import UpdateWeight from "~/components/reception/update-weight.vue";
 import UpdateMerchandise from "~/components/reception/update-merchandise.vue";
 import UpdateBovin from "~/components/reception/update-bovin.vue";
+import {getReceptionTypeList} from "~/services/reception-type";
+import type {ReceptionTypeData} from "~/services/dto/reception-type-data";
+import {computed} from "vue";
+import {updateWeight} from "~/services/weight";
+import {deleteReceptionPelletBuilding, getReceptionPelletBuildingList} from "~/services/reception-pellet-building";

-const activeTab = ref<'weights' | 'merchandise'>('weights')
-const router = useRouter()
-const receptionStore = useReceptionStore()
 const form = reactive<ReceptionFormData>({
+    identificationNumber: null,
    licensePlate: '',
    receptionDate: new Date().toISOString().slice(0, 10),
    receptionTypeId: '',
@@ -199,11 +246,17 @@ const form = reactive<ReceptionFormData>({
    driverId: '',
    vehicleId: ''
 })
+
+const activeTab = ref<'weights' | 'weightsEmpty' | 'merchandise'>('weights')
+const router = useRouter()
+const receptionStore = useReceptionStore()
 const allowAnyLicensePlate = ref(false)
 const isLoading = ref(false)
 const users = ref<UserData[]>([])
 const isLoadingUsers = ref(false)
+const isLoadingTypes = ref(false)
 const suppliers = ref<SupplierData[]>([])
+const receptionTypes = ref<ReceptionTypeData[]>([])
 const isLoadingSuppliers = ref(false)
 const trucks = ref<TruckData[]>([])
 const isLoadingTrucks = ref(false)
@@ -214,23 +267,27 @@ const isLoadingDrivers = ref(false)
 const vehicles = ref<VehicleData[]>([])
 const isLoadingVehicles = ref(false)
 const authStore = useAuthStore()
+const isValid = ref(false)
+const isValidBovin = ref(false)
+const isValidMerchandise = ref(false)
+const formIsLoading = ref(false)
+const route = useRoute()
+const idReception = Number(route.params.id)
+const auth = useAuthStore()
+const isMerchandise = ref(false)

 // Empêche les watchers de reset des champs pendant le remplissage initial
 const isHydrating = ref(false)
-const route = useRoute()
-const idReception = Number(route.params.id)
-const receptionLoad = await getReception(idReception)
-const receptionType = receptionLoad.receptionType
-const auth = useAuthStore()
-const isBtWeight = ref(true)
-const isMerchandise = ref(receptionType.code === 'MARCHANDISES')
+

 // Transporteur sélectionné dans le formulaire
 const selectedCarrier = computed(() =>
    carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
 )
+
 // Indique si le transporteur est LIOT
 const isLiotCarrier = computed(() => selectedCarrier.value?.code === SUPPLIER_CODE.LIOT)
+
 // Adresses disponibles pour le fournisseur sélectionné
 const supplierAddresses = computed(() => {
    const supplierId = Number(form.supplierId)
@@ -239,6 +296,7 @@ const supplierAddresses = computed(() => {
    }
    return suppliers.value.find((supplier) => supplier.id === supplierId)?.addresses ?? []
 })
+
 // Chauffeurs filtrés par transporteur (LIOT)
 const filteredDrivers = computed<DriverData[]>(() => {
    if (!form.carrierId) {
@@ -246,6 +304,7 @@ const filteredDrivers = computed<DriverData[]>(() => {
    }
    return drivers.value.filter((driver) => String(driver.carrier?.id) === form.carrierId)
 })
+
 // Véhicules filtrés par transporteur + type de camion
 const filteredVehicles = computed<VehicleData[]>(() => {
    if (!form.carrierId) {
@@ -259,18 +318,43 @@ const filteredVehicles = computed<VehicleData[]>(() => {
 })

 // Supprime les données bovines si on change de type de réception
-const clearReceptionBovines = async (receptionIri: string) => {
+const clearReceptionBovines = async (receptionId: number) => {
+    const receptionIri = `/api/receptions/${receptionId}`
    const existing = await getReceptionBovineList(receptionIri)
    for (const selection of existing) {
        await deleteReceptionBovine(selection.id)
    }
 }

-const hydrateFromUser = (reception: ReceptionData | null) => {
+const syncMerchandiseFlag = () => {
+    const receptionType =
+        receptionTypes.value.find((type) => String(type.id) === form.receptionTypeId) ?? null
+    isMerchandise.value = receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES
+}
+
+const clearReceptionMerchandise = async (receptionId: number) => {
+    const receptionIri = `/api/receptions/${receptionId}`
+
+    // supprime toutes les associations granulés/bâtiments
+    const existing = await getReceptionPelletBuildingList(receptionIri)
+    for (const selection of existing) {
+        await deleteReceptionPelletBuilding(selection.id)
+    }
+
+    // reset des champs marchandise
+    await updateReception(receptionId, {
+        merchandiseType: null,
+        merchandiseDetail: null,
+        buildings: []
+    })
+}
+
+const hydrateFromReception = (reception: ReceptionData | null) => {
    if (!reception) {
        return
    }
    isHydrating.value = true
+    form.identificationNumber = reception?.identificationNumber ?? ''
    form.licensePlate = reception?.licensePlate ?? ''
    form.receptionDate = reception?.receptionDate ?? new Date().toISOString().slice(0, 10)
    form.userId = reception?.user?.id
@@ -291,7 +375,11 @@ const hydrateFromUser = (reception: ReceptionData | null) => {
    form.driverId = reception?.driver?.id
        ? String(reception.driver.id)
        : ''
+    form.receptionTypeId = reception?.receptionType?.id
+        ? String(reception.receptionType.id)
+        : ''
    isHydrating.value = false
+    syncMerchandiseFlag()
 }

 watch(
@@ -302,8 +390,8 @@ watch(
        }
        isLoading.value = true
        try {
-            const user = await getReception(id)
-            hydrateFromUser(user)
+            const reception = await getReception(id)
+            hydrateFromReception(reception)
        } finally {
            isLoading.value = false
        }
@@ -311,6 +399,14 @@ watch(
    {immediate: true}
 )

+watch(
+    () => form.receptionTypeId,
+    () => {
+        const receptionType = receptionTypes.value.find((type) => String(type.id) === form.receptionTypeId) ?? null
+        isMerchandise.value = receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES
+    }
+)
+
 // Charge la liste des users pour le select
 const loadUsers = async () => {
    isLoadingUsers.value = true
@@ -331,6 +427,15 @@ const loadSuppliers = async () => {
    }
 }

+const loadTypes = async () => {
+    isLoadingTypes.value = true
+    try {
+        receptionTypes.value = await getReceptionTypeList()
+    } finally {
+        isLoadingSuppliers.value = false
+    }
+}
+
 // Charge la liste des camions pour le select
 const loadTrucks = async () => {
    isLoadingTrucks.value = true
@@ -371,7 +476,7 @@ const loadVehicles = async () => {
    }
 }

-// On met le user connecté par défaut dans le select
+// On met l'user connecté par défaut dans le select
 const setDefaultUser = () => {
    if (form.userId) {
        return
@@ -383,6 +488,9 @@ const setDefaultUser = () => {

 // On récupère toutes les données des selects au chargement du composant
 onMounted(async () => {
+    await loadTypes()
+    syncMerchandiseFlag()
+    formIsLoading.value =true
    await loadUsers()
    await loadSuppliers()
    await loadTrucks()
@@ -507,11 +615,10 @@ watch(
        }
    }
 )
-
-// Valide le formulaire et crée/met à jour la réception
 async function validate() {
    const normalizedLicensePlate = form.licensePlate.trim()
    const normalizedReceptionDate = form.receptionDate.trim()
+    const normalizedReceptionTypeId = form.receptionTypeId.trim()
    const normalizedUserId = form.userId.trim()
    const normalizedSupplierId = form.supplierId.trim()
    const normalizedAddressId = form.addressId.trim()
@@ -536,10 +643,14 @@ async function validate() {
    const driverIri = normalizedDriverId
        ? `/api/drivers/${normalizedDriverId}`
        : null
+    const typeIri = normalizedReceptionTypeId
+        ? `/api/reception_types/${normalizedReceptionTypeId}`
+        : null

    const basePayload = {
        licensePlate: normalizedLicensePlate,
        receptionDate: normalizedReceptionDate,
+        receptionType: typeIri,
        user: userIri,
        supplier: supplierIri,
        address: addressIri,
@@ -549,17 +660,27 @@ async function validate() {

    const payload = {
        ...basePayload,
-        ...(isLiotCarrier.value && driverIri ? {driver: driverIri} : {})
+        ...(isLiotCarrier.value && driverIri ? {driver: driverIri} : {}),
    }

    if (idReception) {
-        const updated = await receptionStore.updateReception(idReception, {
+        isValid.value = true
+        isMerchandise.value ? (isValidMerchandise.value = true) : (isValidBovin.value = true)
+        await receptionStore.updateReception(idReception, {
            ...payload
        })
-        if (updated) {
-            await router.push(`/reception/update/${updated.id}`)
+
+        if (isMerchandise.value) {
+            await clearReceptionBovines(idReception)
+        } else {
+            await clearReceptionMerchandise(idReception)
        }
-        router.push("/reception/finish-reception")
+
+        isValid.value = false
+        isValidBovin.value = false
+        isValidMerchandise.value = false
+
+        await router.push("/reception/finish-reception")
        return
    }
 }
--- a/frontend/services/dto/reception-data.ts
+++ b/frontend/services/dto/reception-data.ts
@@ -69,6 +69,7 @@ export type ReceptionPayload = {
 }

 export type ReceptionFormData = {
+    identificationNumber?: null|string,
    licensePlate: string
    receptionDate: string
    receptionTypeId: string
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -8,8 +8,11 @@ export default <Partial<Config>>{
      },
      colors: {
        primary: {
+          700: '#35453C',
          500: '#456452',
+
        }
+
      }
    }
  }