fix : correction des retours de la V0

frontend/components/address.vue

@@ -1,5 +1,5 @@
 <template>
-    <form @submit.prevent="validateForm">
+    <form :class="{ submitted }" @submit.prevent="validateForm">
         <div class="flex items-center mb-11 justify-between relative">
             <div class="flex flex-row absolute -left-[60px] ">
                 <Icon @click="goBack" name="gg:arrow-left-o" size="40" class="cursor-pointer text-primary-500"/>
@@ -10,11 +10,10 @@
         </div>
 
         <div class="grid grid-cols-2 gap-y-16 gap-x-[200px] mb-16">
-            <UiTextInput id="address-label" v-model="form.label" label="Libellé" />
-            <UiTextInput id="address-street" v-model="form.street" label="Rue" />
+            <UiTextInput id="address-street" v-model="form.street" label="Rue" required />
             <UiTextInput id="address-street2" v-model="form.street2" label="Complément" />
-            <UiTextInput id="address-postalCode" v-model="form.postalCode" label="Code postal" />
-            <UiTextInput id="address-city" v-model="form.city" label="Ville" />
+            <UiTextInput id="address-postalCode" v-model="form.postalCode" label="Code postal" required />
+            <UiTextInput id="address-city" v-model="form.city" label="Ville" required />
             <UiTextInput id="address-country" v-model="form.countryCode" label="Pays (code)" />
         </div>
         <div class="flex justify-center items-center">
@@ -22,6 +21,7 @@
             class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
             type="submit"
             :disabled="isLoading"
+            @click="submitted = true"
         >
             Valider
         </UiButton>
@@ -42,14 +42,14 @@ const props = defineProps<{
 }>()
 
 const isLoading = ref(false)
+const submitted = ref(false)
 
 const emptyForm = (): AddressPayload => ({
-    label: "",
     street: "",
     street2: null,
     postalCode: "",
     city: "",
-    countryCode: "",
+    countryCode: "FR",
 })
 
 const form = reactive<AddressPayload>(emptyForm())
@@ -70,12 +70,11 @@ const backPath = computed(() => {
 
 const hydrateForm = (address?: AddressPayload | null) => {
     const data = address ?? emptyForm()
-    form.label = data.label ?? ""
     form.street = data.street ?? ""
     form.street2 = data.street2 ?? null
     form.postalCode = data.postalCode ?? ""
     form.city = data.city ?? ""
-    form.countryCode = data.countryCode ?? ""
+    form.countryCode = data.countryCode || "FR"
 }
 
 watch(

frontend/components/commun/update-weight.vue

@@ -9,12 +9,14 @@
                 :disabled="!isAdmin"
                 :min="0"
                 wrapper-class="flex-col"
+                required
             />
 
             <UiDateInput
                 label="Date de pesée"
                 v-model="localWeight.weighedAt"
                 :disabled="!isAdmin"
+                required
             />
 
             <UiNumberInput
@@ -24,6 +26,7 @@
                 v-model="localWeight.dsd"
                 :disabled="!isAdmin"
                 wrapper-class="flex-col"
+                required
             />
         </div>
     </form>

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

@@ -1,7 +1,9 @@
 <template>
-    <div
+    <form
         v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"
-        class="flex flex-col gap-16">
+        class="flex flex-col gap-16"
+        @submit.prevent="goNext"
+    >
         <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 w-full">
@@ -31,15 +33,17 @@
                 />
             </div>
         </div>
+        <p class="text-red-500 text-sm" :class="showBovineError ? '' : 'invisible'">
+            Veuillez saisir au moins une race bovine.
+        </p>
         <div class="flex justify-center">
             <UiButton
                 type="submit"
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
-                @click="goNext"
             >Valider
             </UiButton>
         </div>
-    </div>
+    </form>
 </template>
 <script setup lang="ts">
 import type {BovineTypeData} from "~/services/dto/bovine-type-data";
@@ -58,6 +62,7 @@ const toast = useToast()
 const isLoadingBovineType = ref(false)
 const bovineType = ref<BovineTypeData[]>([])
 const receptionStore = useReceptionStore()
+const showBovineError = ref(false)
 const bovineQuantities = reactive<Record<string, number | null>>({})
 const otherQuantity = ref<number | null>(0)
 const receptionId = computed(() => receptionStore.current?.id ?? null)
@@ -169,7 +174,13 @@ async function goNext() {
         return
     }
 
-    // @TODO Ajouter un composable pour le toaster qui gère les key i18n
+    showBovineError.value = false
+
+    if (totalBovines.value === 0) {
+        showBovineError.value = true
+        return
+    }
+
     if (totalBovines.value > 52) {
         toast.error({
             title: 'Erreur',

frontend/components/reception/reception-form.vue

@@ -1,8 +1,7 @@
 <template>
-    <form @submit.prevent="validate">
+    <form :class="{ submitted }" @submit.prevent="validate">
         <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
             <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1 text-primary-500">Réception</h1>
-            <!--    Nom de l'utilisateur       -->
             <UiSelect
                 id="reception-user"
                 v-model="form.userId"
@@ -13,15 +12,15 @@
                 }))"
                 :loading="isLoadingUsers"
                 wrapper-class="col-start-1 row-start-2"
+                required
             />
-            <!--    Date de réception        -->
             <UiDateInput
                 id="reception-date"
                 v-model="form.receptionDate"
                 label="Date de réception"
                 wrapper-class="col-start-1 row-start-3"
+                required
             />
-            <!--    Type de réception        -->
             <UiSelect
                 id="reception-type"
                 v-model="form.receptionTypeId"
@@ -31,8 +30,8 @@
                     label: type.label
                 }))"
                 wrapper-class="col-start-1 row-start-4"
+                required
             />
-            <!--    Fournisseur        -->
             <UiSelect
                 id="reception-supplier"
                 v-model="form.supplierId"
@@ -43,20 +42,17 @@
                 }))"
                 :loading="isLoadingSuppliers"
                 wrapper-class="col-start-1 row-start-5"
+                required
             />
-            <!--    Adresse fournisseur        -->
             <UiSelect
                 id="reception-address"
                 v-model="form.addressId"
                 label="Adresse"
-                :options="supplierAddresses.map((address) => ({
-                    value: String(address.id),
-                    label: address.fullAddress
-                }))"
-                :disabled="isLoadingSuppliers || supplierAddresses.length === 0"
+                :options="addressOptions"
+                :disabled="isLoadingSuppliers || ownerAddresses.length === 0"
                 wrapper-class="col-start-2 row-start-1"
+                required
             />
-            <!--    Camion        -->
             <UiSelect
                 id="reception-truck"
                 v-model="form.truckId"
@@ -67,8 +63,8 @@
                 }))"
                 :loading="isLoadingTrucks"
                 wrapper-class="col-start-2 row-start-2"
+                required
             />
-            <!--    Transporteur        -->
             <UiSelect
                 id="reception-carrier"
                 v-model="form.carrierId"
@@ -80,15 +76,15 @@
                 :loading="isLoadingCarriers"
                 select-class="h-[34px]"
                 wrapper-class="col-start-2 row-start-3"
+                required
             />
-            <!--    Plaque d'immatriculation       -->
             <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
                 <UiLicensePlateInput
                     v-model="form.licensePlate"
                     v-model:allowAny="allowAnyLicensePlate"
+                    required
                 />
             </div>
-            <!--    Immatriculation (LIOT)        -->
             <UiSelect
                 v-if="isLiotCarrier"
                 id="reception-vehicle"
@@ -101,8 +97,8 @@
                 :loading="isLoadingVehicles"
                 :disabled="isLoadingVehicles || filteredVehicles.length === 0"
                 wrapper-class="col-start-2 row-start-4 h-[64px]"
+                required
             />
-            <!--    Chauffeur (LIOT)        -->
             <UiSelect
                 id="reception-driver"
                 v-model="form.driverId"
@@ -114,42 +110,38 @@
                 :loading="isLoadingDrivers"
                 v-if="isLiotCarrier"
                 wrapper-class="col-start-2 row-start-5"
+                required
             />
         </div>
         <div class="flex justify-center">
             <UiButton
                 type="submit"
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+                @click="submitted = true"
             >Valider
             </UiButton>
         </div>
     </form>
-
 </template>
 
 <script setup lang="ts">
-import {useReceptionStore} from '~/stores/reception'
-import type {ReceptionTypeData} from '~/services/dto/reception-type-data'
-import {getReceptionTypeList} from '~/services/reception-type'
-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 {RECEPTION_TYPE_CODES, SUPPLIER_CODE} from "~/utils/constants";
-import {deleteReceptionBovine, getReceptionBovineList} from "~/services/reception-bovine";
-import type {ReceptionFormData} from "~/services/dto/reception-data";
+import { useReceptionStore } from '~/stores/reception'
+import { useFormDataLoading } from '~/composables/useFormDataLoading'
+import { useLiotHandling } from '~/composables/useLiotHandling'
+import { useAddressSync } from '~/composables/useAddressSync'
+import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
+import { getReceptionTypeList } from '~/services/reception-type'
+import type { SupplierData } from '~/services/dto/supplier-data'
+import { getSupplierList } from '~/services/supplier'
+import { RECEPTION_TYPE_CODES } from '~/utils/constants'
+import { deleteReceptionBovine, getReceptionBovineList } from '~/services/reception-bovine'
+import type { ReceptionFormData } from '~/services/dto/reception-data'
 
 const router = useRouter()
 const receptionStore = useReceptionStore()
+const isHydrating = ref(false)
+const submitted = ref(false)
+
 const form = reactive<ReceptionFormData>({
     licensePlate: '',
     receptionDate: new Date().toISOString().slice(0, 10),
@@ -162,62 +154,27 @@ const form = reactive<ReceptionFormData>({
     driverId: '',
     vehicleId: ''
 })
-const allowAnyLicensePlate = ref(false)
+
 const receptionTypes = ref<ReceptionTypeData[]>([])
-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)
 
-// 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)) {
-        return []
-    }
-    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 []
-    }
-    return vehicles.value.filter(
-        (vehicle) =>
-            String(vehicle.carrier?.id) === form.carrierId &&
-            (!form.truckId || String(vehicle.truck?.id) === form.truckId)
-    )
-})
+const { users, trucks, carriers, isLoadingUsers, isLoadingTrucks, isLoadingCarriers, loadCommonData } =
+    useFormDataLoading(form)
+
+const {
+    isLiotCarrier, filteredDrivers, filteredVehicles,
+    isLoadingDrivers, isLoadingVehicles, allowAnyLicensePlate,
+    loadDrivers, loadVehicles
+} = useLiotHandling(form, carriers, isHydrating)
+
+const supplierIdRef = computed(() => form.supplierId)
+const { ownerAddresses, addressOptions } = useAddressSync(form, supplierIdRef, suppliers)
 
 const selectedReceptionType = computed(() =>
     receptionTypes.value.find((type) => String(type.id) === form.receptionTypeId) ?? null
 )
 
-// Supprime les données bovines si on change de type de réception
 const clearReceptionBovines = async (receptionIri: string) => {
     const existing = await getReceptionBovineList(receptionIri)
     for (const selection of existing) {
@@ -225,50 +182,6 @@ const clearReceptionBovines = async (receptionIri: string) => {
     }
 }
 
-// Hydrate le formulaire depuis la réception en cours
-watch(
-    () => receptionStore.current,
-    (reception) => {
-        isHydrating.value = true
-        form.licensePlate = reception?.licensePlate ?? ''
-        form.receptionDate = reception?.receptionDate ?? new Date().toISOString().slice(0, 10)
-        form.receptionTypeId = reception?.receptionType?.id
-            ? String(reception.receptionType.id)
-            : ''
-        form.userId = reception?.user?.id
-            ? String(reception.user.id)
-            : form.userId
-        form.supplierId = reception?.supplier?.id
-            ? String(reception.supplier.id)
-            : ''
-        form.addressId = reception?.address?.id
-            ? String(reception.address.id)
-            : ''
-        form.truckId = reception?.truck?.id
-            ? String(reception.truck.id)
-            : ''
-        form.carrierId = reception?.carrier?.id
-            ? String(reception.carrier.id)
-            : ''
-        form.driverId = reception?.driver?.id
-            ? String(reception.driver.id)
-            : ''
-        isHydrating.value = false
-    },
-    {immediate: true}
-)
-
-// Charge la liste des users pour le select
-const loadUsers = async () => {
-    isLoadingUsers.value = true
-    try {
-        users.value = await getUsers()
-    } finally {
-        isLoadingUsers.value = false
-    }
-}
-
-// Charge la liste des fournisseurs pour le select
 const loadSuppliers = async () => {
     isLoadingSuppliers.value = true
     try {
@@ -278,185 +191,32 @@ const loadSuppliers = async () => {
     }
 }
 
-// Charge la liste des camions pour le select
-const loadTrucks = async () => {
-    isLoadingTrucks.value = true
-    try {
-        trucks.value = await getTruckList()
-    } finally {
-        isLoadingTrucks.value = false
-    }
-}
+watch(
+    () => receptionStore.current,
+    (reception) => {
+        isHydrating.value = true
+        form.licensePlate = reception?.licensePlate ?? ''
+        form.receptionDate = reception?.receptionDate?.slice(0, 10) ?? new Date().toISOString().slice(0, 10)
+        form.receptionTypeId = reception?.receptionType?.id ? String(reception.receptionType.id) : ''
+        form.userId = reception?.user?.id ? String(reception.user.id) : form.userId
+        form.supplierId = reception?.supplier?.id ? String(reception.supplier.id) : ''
+        form.addressId = reception?.address?.id ? String(reception.address.id) : ''
+        form.truckId = reception?.truck?.id ? String(reception.truck.id) : ''
+        form.carrierId = reception?.carrier?.id ? String(reception.carrier.id) : ''
+        form.driverId = reception?.driver?.id ? String(reception.driver.id) : ''
+        isHydrating.value = false
+    },
+    { immediate: true }
+)
 
-// Charge la liste des transporteurs pour le select
-const loadCarriers = async () => {
-    isLoadingCarriers.value = true
-    try {
-        carriers.value = await getCarrierList()
-    } finally {
-        isLoadingCarriers.value = false
-    }
-}
-
-// Charge la liste des chauffeurs pour le select
-const loadDrivers = async () => {
-    isLoadingDrivers.value = true
-    try {
-        drivers.value = await getDriverList()
-    } finally {
-        isLoadingDrivers.value = false
-    }
-}
-
-// Charge la liste des véhicules pour le select
-const loadVehicles = async () => {
-    isLoadingVehicles.value = true
-    try {
-        vehicles.value = await getVehicleList()
-    } finally {
-        isLoadingVehicles.value = false
-    }
-}
-
-// On met le user connecté par défaut dans le select
-const setDefaultUser = () => {
-    if (form.userId) {
-        return
-    }
-    if (authStore.user?.id) {
-        form.userId = String(authStore.user.id)
-    }
-}
-
-// On récupère toutes les données des selects au chargement du composant
 onMounted(async () => {
     receptionTypes.value = await getReceptionTypeList()
-    await loadUsers()
     await loadSuppliers()
-    await loadTrucks()
-    await loadCarriers()
+    await loadCommonData()
     await loadDrivers()
     await loadVehicles()
-    await authStore.ensureSession()
-    setDefaultUser()
 })
 
-// Ajuste driver/vehicle quand le transporteur change (logique LIOT)
-watch(
-    () => [form.supplierId, form.addressId, suppliers.value],
-    () => {
-        if (!form.supplierId) {
-            form.addressId = ''
-            return
-        }
-        if (!form.addressId && supplierAddresses.value.length === 1) {
-            form.addressId = String(supplierAddresses.value[0].id)
-            return
-        }
-        if (!form.addressId) {
-            return
-        }
-        const matches = supplierAddresses.value.some(
-            (address) => String(address.id) === form.addressId
-        )
-        if (!matches) {
-            if (supplierAddresses.value.length === 1) {
-                form.addressId = String(supplierAddresses.value[0].id)
-            } else {
-                form.addressId = ''
-            }
-        }
-    },
-    {immediate: true}
-)
-
-// Valide/auto-sélectionne le véhicule selon camion + transporteur (LIOT)
-watch(
-    () => form.carrierId,
-    () => {
-        if (isHydrating.value) {
-            return
-        }
-        if (!form.carrierId) {
-            form.driverId = ''
-            form.vehicleId = ''
-            return
-        }
-        if (!isLiotCarrier.value) {
-            form.driverId = ''
-            form.vehicleId = ''
-            return
-        }
-        if (filteredDrivers.value.length === 1) {
-            form.driverId = String(filteredDrivers.value[0].id)
-        }
-        if (filteredVehicles.value.length === 1) {
-            form.vehicleId = String(filteredVehicles.value[0].id)
-        }
-    },
-    {immediate: true}
-)
-
-// Récupère la plaque depuis le véhicule choisi (LIOT)
-watch(
-    () => [form.truckId, form.carrierId, vehicles.value],
-    () => {
-        if (!isLiotCarrier.value) {
-            return
-        }
-        if (filteredVehicles.value.length === 1) {
-            form.vehicleId = String(filteredVehicles.value[0].id)
-            return
-        }
-        if (!form.vehicleId) {
-            return
-        }
-        const matches = filteredVehicles.value.some(
-            (vehicle) => String(vehicle.id) === form.vehicleId
-        )
-        if (!matches) {
-            form.vehicleId = ''
-        }
-    },
-    {immediate: true}
-)
-
-// Auto-renseigne le véhicule si la plaque correspond (LIOT)
-watch(
-    () => [form.vehicleId, form.carrierId, vehicles.value],
-    () => {
-        if (!isLiotCarrier.value) {
-            return
-        }
-        if (isHydrating.value) {
-            return
-        }
-        const selected = filteredVehicles.value.find(
-            (vehicle) => String(vehicle.id) === form.vehicleId
-        )
-        if (selected) {
-            form.licensePlate = selected.plate
-            allowAnyLicensePlate.value = false
-        }
-    }
-)
-
-watch(
-    () => [form.licensePlate, form.carrierId, vehicles.value],
-    () => {
-        if (!isLiotCarrier.value || form.vehicleId) {
-            return
-        }
-        const match = filteredVehicles.value.find(
-            (vehicle) => vehicle.plate === form.licensePlate
-        )
-        if (match) {
-            form.vehicleId = String(match.id)
-        }
-    }
-)
-
-// Valide le formulaire et crée/met à jour la réception
 async function validate() {
     const normalizedLicensePlate = form.licensePlate.trim()
     const normalizedReceptionDate = form.receptionDate.trim()
@@ -467,27 +227,14 @@ async function validate() {
     const normalizedTruckId = form.truckId.trim()
     const normalizedCarrierId = form.carrierId.trim()
     const normalizedDriverId = form.driverId.trim()
-    const receptionTypeIri = normalizedReceptionTypeId
-        ? `/api/reception_types/${normalizedReceptionTypeId}`
-        : null
-    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 receptionTypeIri = normalizedReceptionTypeId ? `/api/reception_types/${normalizedReceptionTypeId}` : null
+    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,
@@ -502,7 +249,7 @@ async function validate() {
 
     const payload = {
         ...basePayload,
-        ...(isLiotCarrier.value && driverIri ? {driver: driverIri} : {})
+        ...(isLiotCarrier.value && driverIri ? { driver: driverIri } : {})
     }
 
     if (!receptionStore.current) {
@@ -532,5 +279,4 @@ async function validate() {
         ...payload
     })
 }
-
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-col items-center gap-16">
+    <form :class="['flex flex-col items-center gap-16', { submitted }]" @submit.prevent="goNext">
         <div
             v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"
             class="flex flex-col gap-16 items-center w-full">
@@ -10,6 +10,7 @@
                 label="Type de marchandises"
                 :options="merchandiseTypes.map((type) => ({ value: String(type.id), label: type.label }))"
                 wrapper-class="w-[550px]"
+                required
             />
             <div
                 v-if="selectedMerchandiseTypeId && isAutres"
@@ -21,24 +22,30 @@
                     label="Préciser"
                     placeholder="Précisions complémentaires"
                     :maxlength="255"
+                    required
                 />
             </div>
 
             <div
                 v-if="selectedMerchandiseTypeId && !isGranule"
-                class="flex gap-4 w-[550px] justify-between"
+                class="flex flex-col gap-4 w-[550px]"
             >
-                <div
-                    v-for="building in buildings"
-                    :key="building.id"
-                >
-                    <UiCheckbox
-                        v-model="selectedBuildingIds"
-                        :value="String(building.id)"
-                        :label="building.label"
-                        label-class="text-xl"
-                    />
+                <div class="flex gap-4 justify-between">
+                    <div
+                        v-for="building in buildings"
+                        :key="building.id"
+                    >
+                        <UiCheckbox
+                            v-model="selectedBuildingIds"
+                            :value="String(building.id)"
+                            :label="building.label"
+                            label-class="text-xl"
+                        />
+                    </div>
                 </div>
+                <p class="text-red-500 text-sm" :class="showBuildingError ? '' : 'invisible'">
+                    Veuillez sélectionner au moins un bâtiment.
+                </p>
             </div>
 
             <div
@@ -62,17 +69,20 @@
                         </div>
                     </div>
                 </div>
+                <p class="text-red-500 text-sm" :class="showBuildingError ? '' : 'invisible'">
+                    Veuillez sélectionner au moins un bâtiment.
+                </p>
             </div>
         </div>
         <div class="flex justify-center">
             <UiButton
                 type="submit"
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
-                @click="goNext"
+                @click="submitted = true"
             >Valider
             </UiButton>
         </div>
-    </div>
+    </form>
 </template>
 
 <script setup lang="ts">
@@ -100,6 +110,9 @@ const selectedMerchandiseTypeId = ref('')
 const selectedBuildingIds = ref<string[]>([])
 const selectedPelletBuildingIds = ref<Record<string, string[]>>({})
 const merchandiseDetail = ref('')
+const submitted = ref(false)
+const showBuildingError = ref(false)
+const showPelletBuildingError = ref(false)
 
 // Extrait l'ID d'une relation depuis un IRI ou un objet complet.
 const getRelationId = (value: unknown): string | null => {
@@ -182,6 +195,23 @@ async function goNext() {
         return
     }
 
+    showBuildingError.value = false
+    showPelletBuildingError.value = false
+
+    if (!isGranule.value && !isAutres.value && selectedBuildingIds.value.length === 0) {
+        showBuildingError.value = true
+        return
+    }
+
+    if (isGranule.value) {
+        const hasAnyPelletBuilding = Object.values(selectedPelletBuildingIds.value)
+            .some((ids) => ids.length > 0)
+        if (!hasAnyPelletBuilding) {
+            showPelletBuildingError.value = true
+            return
+        }
+    }
+
     const nextStep = receptionStore.current.currentStep + 1
     const receptionIri = `/api/receptions/${receptionStore.current.id}`
 

frontend/components/reception/reception-weight.vue

@@ -1,95 +0,0 @@
-<template>
-    <div class="flex justify-center">
-        <div class="flex flex-col items-center w-[660px]">
-            <h1 class="font-bold text-5xl uppercase text-primary-500">{{ title }}</h1>
-<!--@TODO Voir comment faire pour savoir si le pont-bascule et bien connecté + ajouter un icon comme sur la maquette-->
-            <p class="text-primary-500 uppercase text-2xl text-primary-500 mt-2">Pont-bascule connecté</p>
-            <div
-                v-if="!displayWeight"
-                class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[86px]">
-                    <UiLoadingDots />
-            </div>
-            <div v-else class="w-full">
-                <div
-                    class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl text-primary-500">
-                    {{ displayWeight }} kg
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="flex justify-center mt-[54px]">
-        <UiButton
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-            @click="fetchWeight"
-        >{{ displayWeight !== null ? 'refaire une pesée' : 'peser' }}</UiButton>
-        <UiButton
-            v-if="displayWeight !== null && !showGenerateReceipt"
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
-            @click="saveWeight"
-        >Valider la pesée</UiButton>
-        <UiButton
-            v-if="showGenerateReceipt"
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
-            @click="printReceipt"
-        >Générer le bon</UiButton>
-    </div>
-</template>
-
-<script setup lang="ts">
-import {computed} from 'vue'
-import { storeToRefs } from 'pinia'
-import { useWeighing } from '~/composables/useWeighing'
-import { usePdfPrinter } from '~/composables/usePdfPrinter'
-import { useReceptionStore } from '~/stores/reception'
-
-const props = defineProps<{
-    mode: 'gross' | 'tare'
-}>()
-
-const router = useRouter()
-const receptionStore = useReceptionStore()
-const { current: storeReception } = storeToRefs(receptionStore)
-const { printPdf } = usePdfPrinter()
-const {
-    displayWeight,
-    title,
-    showLoadingBox,
-    fetchWeight,
-    saveWeight
-} = useWeighing({
-    mode: props.mode,
-    reception: storeReception,
-    updateReception: receptionStore.updateReception,
-    loadReception: receptionStore.loadReception
-})
-// Affiche le bouton de génération du bon à l'étape tare
-const showGenerateReceipt = computed(
-    () => props.mode === 'tare' && displayWeight.value !== null
-)
-
-// Génère le bon de réception, puis clôture la réception
-const printReceipt = async () => {
-    if (!import.meta.client || !receptionStore.current) {
-        return
-    }
-
-    await saveWeight()
-    const reception = receptionStore.current
-    const filename = `${reception.identificationNumber ?? reception.id}_${reception.supplier?.name ?? 'fournisseur'}_${reception.licensePlate ?? 'immat'}.pdf`
-    await printPdf(`/receptions/${reception.id}/receipt`, filename)
-
-    // Laisse le temps a la boite de dialogue d'impression de s'ouvrir.
-    await new Promise((resolve) => setTimeout(resolve, 600))
-
-    const result = await receptionStore.updateReception(receptionStore.current.id, {
-        isValid: true
-    })
-    if (!result) {
-        return
-    }
-
-    receptionStore.clearCurrent()
-    await router.push('/')
-}
-
-</script>

frontend/components/reception/update-merchandise.vue

@@ -1,7 +1,7 @@
 <template>
     <form>
         <div class="flex flex-col">
-            <div class="w-full col-start-1 row-start-1">
+            <div class="w-full relative grid grid-cols-[1fr_200px]">
                 <UiRadioGroup
                     id="merchandise-type"
                     v-model="selectedMerchandiseTypeId"
@@ -13,15 +13,25 @@
                     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"
+                    group-class="grid grid-cols-4 mt-9 mb-7"
                     :disabled="!isAdmin"
                 />
+                <UiTextInput
+                    v-if="isAutres"
+                    id="merchandise-detail"
+                    :disabled="!isAdmin"
+                    v-model="merchandiseDetail"
+                    placeholder="Préciser"
+                    :maxlength="255"
+                    wrapper-class="w-[200px] mt-12 mb-7"
+                />
             </div>
 
-            <div class="w-full grid grid-cols-[3fr_1fr] gap-12 col-start-2 row-start-1">
-                <div
-                    v-if="selectedMerchandiseTypeId && !isGranule"
-                    class="flex gap-[218px]"
+            <div
+                v-if="selectedMerchandiseTypeId && !isGranule"
+                class="w-full grid grid-cols-[1fr_200px]"
+            >
+                <div class="grid grid-cols-4 gap-6"
                 >
                     <div
                         v-for="building in buildings"
@@ -33,31 +43,17 @@
                             :label="building.label"
                             :disabled="!isAdmin"
                             input-class="accent-primary-700 focus:ring-primary-700"
-                            label-class="text-xl uppercase"
+                            label-class="uppercase"
                         />
                     </div>
                 </div>
-
-                <div
-                    v-if="selectedMerchandiseTypeId && isAutres"
-                    class="flex flex-col justify-self-end max-w-[182px]"
-                >
-                    <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"
+                class="grid grid-cols-[1fr_200px] 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 class="grid grid-cols-4 gap-6 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

frontend/components/shipment/shipment-form.vue

@@ -1,8 +1,7 @@
 <template>
-    <form @submit.prevent="validate">
+    <form :class="{ submitted }" @submit.prevent="validate">
         <div class="grid grid-cols-2 h-[461px] items-start gap-y-8 gap-x-40 mb-16">
             <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1 text-primary-500">Expédition</h1>
-            <!--    Nom de l'utilisateur       -->
             <UiSelect
                 id="shipment-user"
                 v-model="form.userId"
@@ -13,15 +12,15 @@
                 }))"
                 :loading="isLoadingUsers"
                 wrapper-class="col-start-1 row-start-2"
+                required
             />
-            <!--    Date de l'éxpedition        -->
             <UiDateInput
                 id="shipment-date"
                 v-model="form.shipmentDate"
                 label="Date du jour"
                 wrapper-class="col-start-1 row-start-3"
+                required
             />
-            <!--    Type d'expédition        -->
             <div class="col-start-1 row-start-4 h-[64px]">
                 <div class="flex w-full items-end gap-[104px]">
                     <UiRadioGroup
@@ -36,6 +35,7 @@
                             value: String(type.id),
                             label: type.label
                         }))"
+                        required
                     />
                     <UiNumberInput
                         id="shipment-type-quantity"
@@ -47,7 +47,6 @@
                     />
                 </div>
             </div>
-            <!--    Client        -->
             <UiSelect
                 id="shipment-customer"
                 v-model="form.customerId"
@@ -58,17 +57,17 @@
                 }))"
                 :loading="isLoadingCustomers"
                 wrapper-class="col-start-1 row-start-5"
+                required
             />
-            <!--    Adresse du client        -->
             <UiSelect
                 id="shipment-address"
                 v-model="form.addressId"
-                :options="customerAddressOptions"
-                :disabled="isLoadingCustomers || customerAddresses.length === 0"
+                :options="addressOptions"
+                :disabled="isLoadingCustomers || ownerAddresses.length === 0"
                 label="Adresse"
                 wrapper-class="col-start-2 row-start-1"
+                required
             />
-            <!--   Camion        -->
             <UiSelect
                 id="shipment-truck"
                 v-model="form.truckId"
@@ -79,8 +78,8 @@
                 }))"
                 :loading="isLoadingTrucks"
                 wrapper-class="col-start-2 row-start-2"
+                required
             />
-            <!--   Transporteur        -->
             <UiSelect
                 id="shipment-carrier"
                 v-model="form.carrierId"
@@ -90,15 +89,15 @@
                     label: carrier.name
                 }))"
                 wrapper-class="col-start-2 row-start-3"
+                required
             />
-            <!-- Plaque d'immatriculation (hors LIOT)        -->
             <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
                 <UiLicensePlateInput
                     v-model="form.licensePlate"
                     v-model:allowAny="allowAnyLicensePlate"
+                    required
                 />
             </div>
-            <!--    Immatriculation (LIOT)        -->
             <UiSelect
                 v-if="isLiotCarrier"
                 id="shipment-vehicle"
@@ -111,8 +110,8 @@
                 :loading="isLoadingVehicles"
                 :disabled="isLoadingVehicles || filteredVehicles.length === 0"
                 wrapper-class="col-start-2 row-start-4"
+                required
             />
-            <!--  Chauffeur (LIOT)        -->
             <UiSelect
                 id="shipment-driver"
                 v-model="form.driverId"
@@ -124,67 +123,35 @@
                 :loading="isLoadingDrivers"
                 wrapper-class="col-start-2 row-start-5"
                 v-if="isLiotCarrier"
+                required
             />
         </div>
         <div class="flex justify-center">
             <UiButton
                 type="submit"
                 class="text-xl mb-16 uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+                @click="submitted = true"
             >Valider
             </UiButton>
         </div>
     </form>
 </template>
+
 <script setup lang="ts">
+import { useFormDataLoading } from '~/composables/useFormDataLoading'
+import { useLiotHandling } from '~/composables/useLiotHandling'
+import { useAddressSync } from '~/composables/useAddressSync'
+import type { CustomerData } from '~/services/dto/customer-data'
+import { getCustomerList } from '~/services/customer'
+import type { ShipmentFormData } from '~/services/dto/shipment-data'
+import { useShipmentStore } from '~/stores/shipment'
+import type { ShipmentTypeData } from '~/services/dto/shipment-type-data'
+import { getShipmentTypeList } from '~/services/shipment-type'
 
-import type {UserData} from '~/services/dto/user-data'
-import type {CustomerData} from '~/services/dto/customer-data'
-import type {TruckData} from '~/services/dto/truck-data'
-import type {CarrierData} from '~/services/dto/carrier-data'
-import type {DriverData} from '~/services/dto/driver-data'
-import type {VehicleData} from '~/services/dto/vehicle-data'
-import type {AddressData} from '~/services/dto/address-data'
-import {getUsers} from '~/services/auth'
-import {getCustomerList} from '~/services/customer'
-import {getTruckList} from '~/services/truck'
-import {getCarrierList} from '~/services/carrier'
-import {getVehicleList} from '~/services/vehicle'
-import {getDriverList} from '~/services/driver'
-import type {ShipmentFormData} from '~/services/dto/shipment-data'
-import {SUPPLIER_CODE} from "~/utils/constants"
-import {useAuthStore} from '~/stores/auth'
-import {useShipmentStore} from '~/stores/shipment'
-import {computed, reactive, ref, watch, onMounted} from 'vue'
-import type {ShipmentTypeData} from "~/services/dto/shipment-type-data";
-import {getShipmentTypeList} from "~/services/shipment-type";
-
-const users = ref<UserData[]>([])
-const customers = ref<CustomerData[]>([])
-const trucks = ref<TruckData[]>([])
-const carriers = ref<CarrierData[]>([])
-const drivers = ref<DriverData[]>([])
-const vehicles = ref<VehicleData[]>([])
-
-const isLoadingUsers = ref(false)
-const isLoadingShipmentTypes = ref(false)
-const isLoadingCustomers = ref(false)
-const isLoadingTrucks = ref(false)
-const isLoadingCarriers = ref(false)
-const isHydrating = ref(false)
-const isLoadingVehicles = ref(false)
-const allowAnyLicensePlate = ref(false)
-const isLoadingDrivers = ref(false)
-const authStore = useAuthStore()
-const shipmentStore = useShipmentStore()
 const router = useRouter()
-const bovineShipment = ref<ShipmentTypeData[]>([])
-const selectedShipmentTypeId = ref('')
-const shipmentQuantity = ref<number | null>(0)
-// Transporteur sélectionné dans le formulaire
-const selectedCarrier = computed(() =>
-    carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
-)
-const isLiotCarrier = computed(() => selectedCarrier.value?.code === SUPPLIER_CODE.LIOT)
+const shipmentStore = useShipmentStore()
+const isHydrating = ref(false)
+const submitted = ref(false)
 
 const form = reactive<ShipmentFormData>({
     userId: '',
@@ -197,58 +164,24 @@ const form = reactive<ShipmentFormData>({
     vehicleId: '',
     licensePlate: '',
 })
-// Adresses liées au client sélectionné
-const customerAddresses = computed<AddressData[]>(() => {
-    const customerId = Number(form.customerId)
-    if (!Number.isFinite(customerId)) {
-        return []
-    }
-    return customers.value.find((customer) => customer.id === customerId)?.addresses ?? []
-})
-// Options pour le select des adresses du client
-const customerAddressOptions = computed(() =>
-    customerAddresses.value
-        .map((address) => ({
-            value: String(address.id),
-            label: address.fullAddress
-        }))
-)
-// Chauffeurs liés au transporteur sélectionné (LIOT)
-const filteredDrivers = computed<DriverData[]>(() => {
-    if (!form.carrierId) {
-        return []
-    }
-    return drivers.value.filter((driver) => String(driver.carrier?.id) === form.carrierId)
-})
-// Véhicules liés au transporteur + camion sélectionnés (LIOT)
-const filteredVehicles = computed<VehicleData[]>(() => {
-    if (!form.carrierId) {
-        return []
-    }
-    return vehicles.value.filter(
-        (vehicle) =>
-            String(vehicle.carrier?.id) === form.carrierId &&
-            (!form.truckId || String(vehicle.truck?.id) === form.truckId)
-    )
-})
-// Chargement des données pour les selects
-const loadUsers = async () => {
-    isLoadingUsers.value = true
-    try {
-        users.value = await getUsers()
-    } finally {
-        isLoadingUsers.value = false
-    }
-}
 
-const loadShipmentType = async () => {
-    isLoadingShipmentTypes.value = true
-    try {
-        bovineShipment.value = await getShipmentTypeList()
-    } finally {
-        isLoadingShipmentTypes.value = false
-    }
-}
+const customers = ref<CustomerData[]>([])
+const isLoadingCustomers = ref(false)
+const bovineShipment = ref<ShipmentTypeData[]>([])
+const selectedShipmentTypeId = ref('')
+const shipmentQuantity = ref<number | null>(0)
+
+const { users, trucks, carriers, isLoadingUsers, isLoadingTrucks, isLoadingCarriers, loadCommonData } =
+    useFormDataLoading(form)
+
+const {
+    isLiotCarrier, filteredDrivers, filteredVehicles,
+    isLoadingDrivers, isLoadingVehicles, allowAnyLicensePlate,
+    loadDrivers, loadVehicles
+} = useLiotHandling(form, carriers, isHydrating)
+
+const customerIdRef = computed(() => form.customerId)
+const { ownerAddresses, addressOptions } = useAddressSync(form, customerIdRef, customers)
 
 const loadCustomers = async () => {
     isLoadingCustomers.value = true
@@ -257,212 +190,51 @@ const loadCustomers = async () => {
     } finally {
         isLoadingCustomers.value = false
     }
+}
 
-}
-const loadTrucks = async () => {
-    isLoadingTrucks.value = true
-    try {
-        trucks.value = await getTruckList()
-    } finally {
-        isLoadingTrucks.value = false
-    }
-}
-const loadCarriers = async () => {
-    isLoadingCarriers.value = true
-    try {
-        carriers.value = await getCarrierList()
-    } finally {
-        isLoadingCarriers.value = false
-    }
-}
-const loadVehicles = async () => {
-    isLoadingVehicles.value = true
-    try {
-        vehicles.value = await getVehicleList()
-    } finally {
-        isLoadingVehicles.value = false
-    }
-}
-const loadDrivers = async () => {
-    isLoadingDrivers.value = true
-    try {
-        drivers.value = await getDriverList()
-    } finally {
-        isLoadingDrivers.value = false
-    }
-}
-// On met le user connecté par défaut dans le select
-const setDefaultUser = () => {
-    if (form.userId) {
-        return
-    }
-    if (authStore.user?.id) {
-        form.userId = String(authStore.user.id)
-    }
-}
-// Chargement initial des données
-onMounted(async () => {
-    await loadShipmentType()
-    await loadUsers()
-    await loadCustomers()
-    await loadTrucks()
-    await loadCarriers()
-    await loadVehicles()
-    await loadDrivers()
-    await authStore.ensureSession()
-    setDefaultUser()
-})
-// Hydrate le formulaire depuis l'expédition en cours
 watch(
     () => shipmentStore.current,
     (shipment) => {
         isHydrating.value = true
         form.licensePlate = shipment?.licensePlate ?? ''
-        form.shipmentDate = shipment?.shipmentDate ?? new Date().toISOString().slice(0, 10)
-        form.userId = shipment?.user?.id ? String(shipment.user.id) :
-            form.userId
-        form.customerId = shipment?.customer?.id ?
-            String(shipment.customer.id) : ''
+        form.shipmentDate = shipment?.shipmentDate?.slice(0, 10) ?? new Date().toISOString().slice(0, 10)
+        form.userId = shipment?.user?.id ? String(shipment.user.id) : form.userId
+        form.customerId = shipment?.customer?.id ? String(shipment.customer.id) : ''
         form.addressId = shipment?.address?.id ? String(shipment.address.id) : ''
         form.truckId = shipment?.truck?.id ? String(shipment.truck.id) : ''
         form.carrierId = shipment?.carrier?.id ? String(shipment.carrier.id) : ''
         form.driverId = shipment?.driver?.id ? String(shipment.driver.id) : ''
         form.vehicleId = shipment?.vehicle?.id ? String(shipment.vehicle.id) : ''
-
-
-        selectedShipmentTypeId.value = shipment?.shipmentType?.id
-            ? String(shipment.shipmentType.id)
-            : ''
-
+        selectedShipmentTypeId.value = shipment?.shipmentType?.id ? String(shipment.shipmentType.id) : ''
         shipmentQuantity.value = shipment?.nbBovinSend ?? 0
-
-
         isHydrating.value = false
     },
-    {immediate: true}
-)
-// Ajuste driver/vehicle quand le transporteur change (logique LIOT)
-watch(
-    () => [form.customerId, form.addressId, customers.value],
-    () => {
-        if (!form.customerId) {
-            form.addressId = ''
-            return
-        }
-        if (!form.addressId && customerAddresses.value.length === 1) {
-            form.addressId = String(customerAddresses.value[0].id)
-            return
-        }
-        if (!form.addressId) {
-            return
-        }
-        const matches = customerAddresses.value.some(
-            (address) => String(address.id) === form.addressId
-        )
-        if (!matches) {
-            if (customerAddresses.value.length === 1) {
-                form.addressId = String(customerAddresses.value[0].id)
-            } else {
-                form.addressId = ''
-            }
-        }
-    },
-    {immediate: true}
-)
-// Valide/auto-sélectionne le véhicule selon camion + transporteur (LIOT)
-const applyLiotDefaults = () => {
-    if (isHydrating.value) {
-        return
-    }
-    if (!form.carrierId) {
-        form.driverId = ''
-        form.vehicleId = ''
-        return
-    }
-    if (!isLiotCarrier.value) {
-        form.driverId = ''
-        form.vehicleId = ''
-        return
-    }
-    if (filteredDrivers.value.length === 1) {
-        form.driverId = String(filteredDrivers.value[0].id)
-    }
-    if (filteredVehicles.value.length === 1) {
-        form.vehicleId = String(filteredVehicles.value[0].id)
-    }
-}
-watch(
-    () => form.carrierId,
-    () => {
-        applyLiotDefaults()
-    },
-    {immediate: true}
+    { immediate: true }
 )
+
+// Extra watcher for LIOT defaults after hydration
 watch(
     () => isHydrating.value,
     (value) => {
-        if (!value) {
-            applyLiotDefaults()
-        }
-    }
-)
-// Récupère la plaque depuis le véhicule choisi (LIOT)
-watch(
-    () => [form.truckId, form.carrierId, vehicles.value],
-    () => {
-        if (!isLiotCarrier.value) {
-            return
-        }
-        if (filteredVehicles.value.length === 1) {
-            form.vehicleId = String(filteredVehicles.value[0].id)
-            return
-        }
-        if (!form.vehicleId) {
-            return
-        }
-        const matches = filteredVehicles.value.some(
-            (vehicle) => String(vehicle.id) === form.vehicleId
-        )
-        if (!matches) {
-            form.vehicleId = ''
-        }
-    },
-    {immediate: true}
-)
-// Auto-renseigne le véhicule si la plaque correspond (LIOT)
-watch(
-    () => [form.vehicleId, form.carrierId, vehicles.value],
-    () => {
-        if (!isLiotCarrier.value) {
-            return
-        }
-        if (isHydrating.value) {
-            return
-        }
-        const selected = filteredVehicles.value.find(
-            (vehicle) => String(vehicle.id) === form.vehicleId
-        )
-        if (selected) {
-            form.licensePlate = selected.plate
-            allowAnyLicensePlate.value = false
-        }
-    }
-)
-watch(
-    () => [form.licensePlate, form.carrierId, form.vehicleId, vehicles.value],
-    () => {
-        if (!isLiotCarrier.value || form.vehicleId) {
-            return
-        }
-        const match = filteredVehicles.value.find(
-            (vehicle) => vehicle.plate === form.licensePlate
-        )
-        if (match) {
-            form.vehicleId = String(match.id)
+        if (!value && isLiotCarrier.value) {
+            if (filteredDrivers.value.length === 1 && !form.driverId) {
+                form.driverId = String(filteredDrivers.value[0].id)
+            }
+            if (filteredVehicles.value.length === 1 && !form.vehicleId) {
+                form.vehicleId = String(filteredVehicles.value[0].id)
+            }
         }
     }
 )
 
+onMounted(async () => {
+    bovineShipment.value = await getShipmentTypeList()
+    await loadCustomers()
+    await loadCommonData()
+    await loadVehicles()
+    await loadDrivers()
+})
+
 const buildPayload = () => {
     const normalizedLicensePlate = form.licensePlate.trim()
     const normalizedShipmentDate = form.shipmentDate.trim()
@@ -472,32 +244,18 @@ const buildPayload = () => {
     const normalizedDriverId = form.driverId.trim()
     const normalizedUserId = form.userId.trim()
     const normalizedAddressId = form.addressId.trim()
-    const customerIri = normalizedCustomerId
-        ? `/api/customers/${normalizedCustomerId}`
-        : null
-    const truckIri = normalizedTruckId
-        ? `/api/trucks/${normalizedTruckId}`
-        : null
-    const carrierIri = normalizedCarrierId
-        ? `/api/carriers/${normalizedCarrierId}`
-        : null
-    const userIri = normalizedUserId
-        ? `/api/users/${normalizedUserId}`
-        : null
-    const driverIri = normalizedDriverId
-        ? `/api/drivers/${normalizedDriverId}`
-        : null
-    const addressIri = normalizedAddressId
-        ? `/api/addresses/${normalizedAddressId}`
-        : null
+
+    const customerIri = normalizedCustomerId ? `/api/customers/${normalizedCustomerId}` : null
+    const truckIri = normalizedTruckId ? `/api/trucks/${normalizedTruckId}` : null
+    const carrierIri = normalizedCarrierId ? `/api/carriers/${normalizedCarrierId}` : null
+    const userIri = normalizedUserId ? `/api/users/${normalizedUserId}` : null
+    const driverIri = normalizedDriverId ? `/api/drivers/${normalizedDriverId}` : null
+    const addressIri = normalizedAddressId ? `/api/addresses/${normalizedAddressId}` : null
     const normalizedShipmentTypeId = selectedShipmentTypeId.value.trim()
-    const shipmentTypeIri = normalizedShipmentTypeId
-        ? `/api/shipment_types/${normalizedShipmentTypeId}`
-        : null
+    const shipmentTypeIri = normalizedShipmentTypeId ? `/api/shipment_types/${normalizedShipmentTypeId}` : null
 
     const rawQuantity = Number(shipmentQuantity.value ?? 0)
-    const normalizedQuantity = Number.isFinite(rawQuantity) ? Math.max(0,
-        Math.trunc(rawQuantity)) : 0
+    const normalizedQuantity = Number.isFinite(rawQuantity) ? Math.max(0, Math.trunc(rawQuantity)) : 0
 
     return {
         licensePlate: normalizedLicensePlate,
@@ -522,15 +280,14 @@ const saveDraft = async () => {
         })
         return
     }
-
     await shipmentStore.updateShipment(shipmentStore.current.id, {
         currentStep: shipmentStore.current.currentStep,
         ...payload
     })
 }
 
-defineExpose({saveDraft})
-// Valide le formulaire et crée/met à jour l'expédition
+defineExpose({ saveDraft })
+
 const validate = async () => {
     const payload = buildPayload()
     if (!shipmentStore.current) {

frontend/components/shipment/shipment-weight.vue

@@ -1,95 +0,0 @@
-<template>
-    <div class="flex justify-center">
-        <div class="flex flex-col items-center w-[660px]">
-            <h1 class="font-bold text-5xl uppercase text-primary-500">{{ title }}</h1>
-<!--@TODO Voir comment faire pour savoir si le pont-bascule et bien connecté + ajouter un icon comme sur la maquette-->
-            <p class="text-primary-500 uppercase text-2xl mt-2">Pont-bascule connecté</p>
-            <div
-                v-if="!displayWeight"
-                class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[86px]">
-                    <UiLoadingDots />
-            </div>
-            <div v-else class="w-full">
-                <div
-                    class="w-full flex flex-col items-center justify-center border border-primary-500 h-[90px] mt-12 mb-[86px] text-4xl text-primary-500">
-                    {{ displayWeight }} kg
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="flex justify-center mt-[54px]">
-        <UiButton
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-            @click="fetchWeight"
-        >{{ displayWeight !== null ? 'refaire une pesée' : 'peser' }}</UiButton>
-        <UiButton
-            v-if="displayWeight !== null && !showGenerateReceipt"
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
-            @click="saveWeight"
-        >Valider la pesée</UiButton>
-        <UiButton
-            v-if="showGenerateReceipt"
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
-            @click="printReceipt"
-        >Générer le bon</UiButton>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useWeighingShipment } from '~/composables/useWeighing'
-import { usePdfPrinter } from '~/composables/usePdfPrinter'
-import { useShipmentStore } from '~/stores/shipment'
-
-const props = defineProps<{
-    mode: 'gross' | 'tare'
-}>()
-
-const router = useRouter()
-const shipmentStore = useShipmentStore()
-const { current: storeShipment } = storeToRefs(shipmentStore)
-const { printPdf } = usePdfPrinter()
-const {
-    displayWeight,
-    title,
-    showLoadingBox,
-    fetchWeight,
-    saveWeight
-} = useWeighingShipment({
-    modeShipment: props.mode,
-    shipment: storeShipment,
-    updateShipment: shipmentStore.updateShipment,
-    loadShipment: shipmentStore.loadShipment
-})
-// Affiche le bouton de génération du bon à l'étape tare
-const showGenerateReceipt = computed(
-    () => props.mode === 'tare' && displayWeight.value !== null
-)
-
-// Génère le bon d'expédition, puis clôture l'expédition
-const printReceipt = async () => {
-    if (!import.meta.client || !shipmentStore.current) {
-        return
-    }
-
-    await saveWeight()
-    const shipment = shipmentStore.current
-    const filename = `${shipment.identificationNumber ?? shipment.id}_${shipment.customer?.label ?? 'client'}_${shipment.licensePlate ?? 'immat'}.pdf`
-    await printPdf(`/shipments/${shipment.id}/receipt`, filename)
-
-    // Laisse le temps a la boite de dialogue d'impression de s'ouvrir.
-    await new Promise((resolve) => setTimeout(resolve, 600))
-
-    const result = await shipmentStore.updateShipment(shipmentStore.current.id, {
-        isValid: true
-    })
-    if (!result) {
-        return
-    }
-
-    shipmentStore.clearCurrent()
-    await router.push('/')
-}
-
-</script>

frontend/components/ui/license-plate-input.vue

@@ -9,6 +9,7 @@
               type="text"
               :maxlength="maxLength"
               :placeholder="placeholderText"
+              :required="required"
               class="border-b border-black flex-1 min-w-0 text-xl text-primary-500 uppercase h-[36px] py-[6px]"
               @input="handleInput"
           />
@@ -32,12 +33,14 @@ type Props = {
   allowAny?: boolean
   label?: string
   id?: string
+  required?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   allowAny: false,
   label: 'Immatriculation',
-  id: 'license-plate'
+  id: 'license-plate',
+  required: false
 })
 
 const emit = defineEmits<{

frontend/components/workflow/workflow-liot-fields.vue

@@ -0,0 +1,57 @@
+<template>
+    <template v-if="!isLiotCarrier">
+        <div :class="wrapperClass">
+            <UiLicensePlateInput
+                v-model="form.licensePlate"
+                v-model:allowAny="allowAnyLicensePlate"
+            />
+        </div>
+    </template>
+    <template v-if="isLiotCarrier">
+        <UiSelect
+            :id="`${idPrefix}-vehicle`"
+            v-model="form.vehicleId"
+            label="Immatriculation"
+            :options="filteredVehicles.map((vehicle) => ({
+                value: String(vehicle.id),
+                label: vehicle.plate
+            }))"
+            :loading="isLoadingVehicles"
+            :disabled="isLoadingVehicles || filteredVehicles.length === 0"
+            :wrapper-class="wrapperClass"
+        />
+        <UiSelect
+            :id="`${idPrefix}-driver`"
+            v-model="form.driverId"
+            label="Nom du chauffeur si LIOT"
+            :options="filteredDrivers.map((driver) => ({
+                value: String(driver.id),
+                label: driver.name
+            }))"
+            :loading="isLoadingDrivers"
+            :wrapper-class="driverWrapperClass"
+        />
+    </template>
+</template>
+
+<script setup lang="ts">
+import type { DriverData } from '~/services/dto/driver-data'
+import type { VehicleData } from '~/services/dto/vehicle-data'
+
+defineProps<{
+    idPrefix: string
+    form: { licensePlate: string; vehicleId: string; driverId: string }
+    isLiotCarrier: boolean
+    allowAnyLicensePlate: boolean
+    filteredVehicles: VehicleData[]
+    filteredDrivers: DriverData[]
+    isLoadingVehicles: boolean
+    isLoadingDrivers: boolean
+    wrapperClass?: string
+    driverWrapperClass?: string
+}>()
+
+defineEmits<{
+    'update:allowAnyLicensePlate': [value: boolean]
+}>()
+</script>

frontend/components/workflow/workflow-waiting-list.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="flex items-center justify-between">
+        <div class="flex items-center gap-10">
+            <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
+            <h1 class="text-3xl font-bold uppercase text-primary-500">{{ title }}</h1>
+        </div>
+    </div>
+
+    <div class="px-[86px]">
+        <div class="mt-6 border border-slate-200 mb-16">
+            <div
+                class="grid gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
+                :style="{ gridTemplateColumns: gridCols }"
+            >
+                <div v-for="col in columns" :key="col.key">{{ col.label }}</div>
+                <div v-if="showActions">Actions</div>
+            </div>
+            <div
+                v-for="item in items"
+                :key="item.id"
+                class="grid gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                :style="{ gridTemplateColumns: gridCols }"
+                role="button"
+                tabindex="0"
+                @click="goToItem(item.id)"
+                @keydown.enter="goToItem(item.id)"
+            >
+                <div v-for="col in columns" :key="col.key">
+                    <slot :name="`cell-${col.key}`" :item="item">
+                        {{ getNestedValue(item, col.key) }}
+                    </slot>
+                </div>
+                <div v-if="showActions" @click.stop>
+                    <slot name="actions" :item="item" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+interface Column {
+    key: string
+    label: string
+}
+
+const props = withDefaults(defineProps<{
+    title: string
+    columns: Column[]
+    items: any[]
+    routePrefix: string
+    showActions?: boolean
+}>(), {
+    showActions: false
+})
+
+const router = useRouter()
+
+const gridCols = computed(() => {
+    const dataCols = props.columns.map(() => '1fr').join(' ')
+    return props.showActions ? `${dataCols} 60px` : dataCols
+})
+
+const goToItem = (id: number) => {
+    router.push(`${props.routePrefix}/${id}`)
+}
+
+const getNestedValue = (obj: any, path: string): string => {
+    const value = path.split('.').reduce((acc, key) => acc?.[key], obj)
+    return value || '—'
+}
+</script>

frontend/components/workflow/workflow-weight.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="flex justify-center">
+        <div class="flex flex-col items-center w-[660px]">
+            <h1 class="font-bold text-5xl uppercase text-primary-500">{{ title }}</h1>
+            <p class="text-primary-500 uppercase text-2xl mt-2">Pont-bascule connecté</p>
+            <div
+                v-if="!displayWeight"
+                class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[86px]">
+                <UiLoadingDots />
+            </div>
+            <div v-else class="w-full">
+                <div
+                    class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl text-primary-500">
+                    {{ displayWeight }} kg
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="flex justify-center mt-[54px]">
+        <UiButton
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            @click="fetchWeight"
+        >{{ displayWeight !== null ? 'refaire une pesée' : 'peser' }}</UiButton>
+        <UiButton
+            v-if="displayWeight !== null && !showGenerateReceipt"
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
+            @click="saveWeight"
+        >Valider la pesée</UiButton>
+        <UiButton
+            v-if="showGenerateReceipt"
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
+            @click="printReceipt"
+        >Générer le bon</UiButton>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { toRef } from 'vue'
+import { useWeighingStep } from '~/composables/steps/useWeighingStep'
+import type { WeightData } from '~/services/dto/weight-data'
+
+const props = defineProps<{
+    mode: 'gross' | 'tare'
+    entityName: 'reception' | 'shipment'
+    apiResource: string
+    titleLabel: string
+    isFinal: boolean
+    entity: any
+    getWeightFromScale: () => Promise<WeightData>
+    updateEntity: (id: number, payload: any) => Promise<any>
+    loadEntity: (id: number) => Promise<any>
+    clearEntity: () => void
+    buildReceiptFilename: (entity: any) => string
+}>()
+
+const entityRef = toRef(props, 'entity')
+
+const {
+    displayWeight,
+    title,
+    fetchWeight,
+    saveWeight,
+    showGenerateReceipt,
+    printReceipt
+} = useWeighingStep({
+    mode: props.mode,
+    entity: entityRef,
+    entityName: props.entityName,
+    apiResource: props.apiResource,
+    titleLabel: props.titleLabel,
+    isFinal: props.isFinal,
+    getWeightFromScale: props.getWeightFromScale,
+    updateEntity: props.updateEntity,
+    loadEntity: props.loadEntity,
+    clearEntity: props.clearEntity,
+    buildReceiptFilename: props.buildReceiptFilename
+})
+</script>