feat : finalisation de l'étape 1 "Réception" (formulaire)

2026-01-27 16:59:36 +01:00
parent 9ae073e69e
commit f901d52324
46 changed files with 1977 additions and 88 deletions
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply font-sans;
+  }
+}
--- a/frontend/components/reception/reception-form.vue
+++ b/frontend/components/reception/reception-form.vue
@@ -1,21 +1,213 @@
 <template>
    <form @submit.prevent="validate">
-        <div class="grid grid-cols-1 items-start gap-8 mb-16">
-            <h1 class="font-bold text-5xl uppercase">Réception</h1>
-            <div>
+        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
+            <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1">Réception</h1>
+            <!--    Nom de l'utilisateur       -->
+            <div class="flex flex-col col-start-1 row-start-2">
+                <label for="reception-user" class="font-bold uppercase text-xl mb-2">Nom de l'utilisateur</label>
+                <select
+                    id="reception-user"
+                    v-model="form.userId"
+                    class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
+                    :class="[
+                        form.userId ? 'text-black' : 'text-neutral-400',
+                        isLoadingUsers ? 'cursor-not-allowed' : 'cursor-pointer'
+                    ]"
+                    :disabled="isLoadingUsers"
+                >
+                    <option value="" disabled class="text-neutral-400">Sélectionner</option>
+                    <option
+                        v-for="user in users"
+                        :key="user.id"
+                        :value="String(user.id)"
+                        class="text-black"
+                    >
+                        {{ user.username }}
+                    </option>
+                </select>
+            </div>
+            <!--    Date de réception        -->
+            <div class="flex flex-col col-start-1 row-start-3">
+                <label for="reception-date" class="font-bold uppercase text-xl mb-2">Date de réception</label>
+                <input
+                    id="reception-date"
+                    v-model="form.receptionDate"
+                    type="date"
+                    class="border-b border-black justify-self-start text-xl pb-[6px] uppercase cursor-pointer bg-transparent appearance-none h-[34px]"
+                />
+            </div>
+            <!--    Type de réception        -->
+            <div class="flex flex-col col-start-1 row-start-4">
+                <label for="reception-type" class="font-bold uppercase text-xl mb-2">Type de réception</label>
+                <select
+                    id="reception-type"
+                    v-model="form.receptionTypeId"
+                    class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent cursor-pointer"
+                    :class="form.receptionTypeId ? 'text-black' : 'text-neutral-400'"
+                >
+                    <option value="" disabled class="text-neutral-400">Sélectionner</option>
+                    <option
+                        v-for="type in receptionTypes"
+                        :key="type.id"
+                        :value="String(type.id)"
+                        class="text-black"
+                    >
+                        {{ type.label }}
+                    </option>
+                </select>
+            </div>
+            <!--    Fournisseur        -->
+            <div class="flex flex-col col-start-1 row-start-5">
+                <label for="reception-supplier" class="font-bold uppercase text-xl mb-2">Fournisseur</label>
+                <select
+                    id="reception-supplier"
+                    v-model="form.supplierId"
+                    class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
+                    :class="[
+                        form.supplierId ? 'text-black' : 'text-neutral-400',
+                        isLoadingSuppliers ? 'cursor-not-allowed' : 'cursor-pointer'
+                    ]"
+                    :disabled="isLoadingSuppliers"
+                >
+                    <option value="" disabled class="text-neutral-400">Sélectionner</option>
+                    <option
+                        v-for="supplier in suppliers"
+                        :key="supplier.id"
+                        :value="String(supplier.id)"
+                        class="text-black"
+                    >
+                        {{ supplier.name }}
+                    </option>
+                </select>
+            </div>
+            <!--    Adresse fournisseur        -->
+            <div class="flex flex-col col-start-2 row-start-1">
+                <label for="reception-address" class="font-bold uppercase text-xl mb-2">Adresse</label>
+                <select
+                    id="reception-address"
+                    v-model="form.addressId"
+                    class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
+                    :class="[
+                        form.addressId ? 'text-black' : 'text-neutral-400',
+                        isLoadingSuppliers || supplierAddresses.length === 0
+                            ? 'cursor-not-allowed'
+                            : 'cursor-pointer'
+                    ]"
+                    :disabled="isLoadingSuppliers || supplierAddresses.length === 0"
+                >
+                    <option value="" disabled class="text-neutral-400">Sélectionner</option>
+                    <option
+                        v-for="address in supplierAddresses"
+                        :key="address.id"
+                        :value="String(address.id)"
+                        class="text-black"
+                    >
+                        {{ address.fullAddress }}
+                    </option>
+                </select>
+            </div>
+            <!--    Camion        -->
+            <div class="flex flex-col col-start-2 row-start-2">
+                <label for="reception-truck" class="font-bold uppercase text-xl mb-2">Camion</label>
+                <select
+                    id="reception-truck"
+                    v-model="form.truckId"
+                    class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
+                    :class="[
+                        form.truckId ? 'text-black' : 'text-neutral-400',
+                        isLoadingTrucks ? 'cursor-not-allowed' : 'cursor-pointer'
+                    ]"
+                    :disabled="isLoadingTrucks"
+                >
+                    <option value="" disabled class="text-neutral-400">Sélectionner</option>
+                    <option
+                        v-for="truck in trucks"
+                        :key="truck.id"
+                        :value="String(truck.id)"
+                        class="text-black"
+                    >
+                        {{ truck.name }}
+                    </option>
+                </select>
+            </div>
+            <!--    Transporteur        -->
+            <div class="flex flex-col col-start-2 row-start-3">
+                <label for="reception-carrier" class="font-bold uppercase text-xl mb-2">Transporteur</label>
+                <select
+                    id="reception-carrier"
+                    v-model="form.carrierId"
+                    class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent h-[34px]"
+                    :class="[
+                        form.carrierId ? 'text-black' : 'text-neutral-400',
+                        isLoadingCarriers ? 'cursor-not-allowed' : 'cursor-pointer'
+                    ]"
+                    :disabled="isLoadingCarriers"
+                >
+                    <option value="" disabled class="text-neutral-400">Sélectionner</option>
+                    <option
+                        v-for="carrier in carriers"
+                        :key="carrier.id"
+                        :value="String(carrier.id)"
+                        class="text-black"
+                    >
+                        {{ carrier.name }}
+                    </option>
+                </select>
+            </div>
+            <!--    Chauffeur (LIOT)        -->
+            <div class="flex flex-col col-start-2 row-start-4">
+                <label for="reception-driver" class="font-bold uppercase text-xl mb-2">Nom du chauffeur si LIOT</label>
+                <select
+                    id="reception-driver"
+                    v-model="form.driverId"
+                    class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
+                    :class="[
+                        form.driverId ? 'text-black' : 'text-neutral-400',
+                        isLoadingDrivers ? 'cursor-not-allowed' : 'cursor-pointer'
+                    ]"
+                    :disabled="isLoadingDrivers"
+                >
+                    <option value="" disabled class="text-neutral-400">Sélectionner</option>
+                    <option
+                        v-for="driver in filteredDrivers"
+                        :key="driver.id"
+                        :value="String(driver.id)"
+                        class="text-black"
+                    >
+                        {{ driver.name }}
+                    </option>
+                </select>
+            </div>
+            <!--    Plaque d'immatriculation       -->
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-5">
                <UiLicensePlateInput
                    v-model="form.licensePlate"
                    v-model:allowAny="allowAnyLicensePlate"
                />
            </div>
-            <div class="flex flex-col">
-                <label for="reception-date" class="font-bold uppercase text-xl mb-4">Date de reception</label>
-                <input
-                    id="reception-date"
-                    v-model="form.receptionDate"
-                    type="date"
-                    class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
-                />
+            <!--    Immatriculation (LIOT)        -->
+            <div v-if="isLiotCarrier" class="flex flex-col col-start-2 row-start-5">
+                <label for="reception-vehicle" class="font-bold uppercase text-xl mb-2">Immatriculation</label>
+                <select
+                    id="reception-vehicle"
+                    v-model="form.vehicleId"
+                    class="border-b border-black justify-self-start text-xl pb-[6px] bg-transparent"
+                    :class="[
+                        form.vehicleId ? 'text-black' : 'text-neutral-400',
+                        isLoadingVehicles ? 'cursor-not-allowed' : 'cursor-pointer'
+                    ]"
+                    :disabled="isLoadingVehicles || filteredVehicles.length === 0"
+                >
+                    <option value="" disabled class="text-neutral-400">Sélectionner</option>
+                    <option
+                        v-for="vehicle in filteredVehicles"
+                        :key="vehicle.id"
+                        :value="String(vehicle.id)"
+                        class="text-black"
+                    >
+                        {{ vehicle.plate }}
+                    </option>
+                </select>
            </div>
        </div>
        <div class="flex justify-center">
@@ -30,38 +222,359 @@

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

 type ReceptionFormData = {
    licensePlate: string
    receptionDate: string
+    receptionTypeId: string
+    userId: string
+    supplierId: string
+    addressId: string
+    truckId: string
+    carrierId: string
+    driverId: string
+    vehicleId: string
 }

 const router = useRouter()
 const receptionStore = useReceptionStore()
 const form = reactive<ReceptionFormData>({
    licensePlate: '',
-    receptionDate: new Date().toISOString().slice(0, 10)
+    receptionDate: new Date().toISOString().slice(0, 10),
+    receptionTypeId: '',
+    userId: '',
+    supplierId: '',
+    addressId: '',
+    truckId: '',
+    carrierId: '',
+    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()
+const isHydrating = ref(false)
+const liotCode = 'LIOT'
+const selectedCarrier = computed(() =>
+    carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
+)
+const isLiotCarrier = computed(() => selectedCarrier.value?.code === liotCode)
+const supplierAddresses = computed(() => {
+    const supplierId = Number(form.supplierId)
+    if (!Number.isFinite(supplierId)) {
+        return []
+    }
+    return suppliers.value.find((supplier) => supplier.id === supplierId)?.addresses ?? []
+})
+const filteredDrivers = computed(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return drivers.value.filter((driver) => String(driver.carrier?.id) === form.carrierId)
+})
+const filteredVehicles = computed(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return vehicles.value.filter(
+        (vehicle) =>
+            String(vehicle.carrier?.id) === form.carrierId &&
+            (!form.truckId || String(vehicle.truck?.id) === form.truckId)
+    )
+})

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

+const loadUsers = async () => {
+    isLoadingUsers.value = true
+    try {
+        users.value = await getUsers()
+    } finally {
+        isLoadingUsers.value = false
+    }
+}
+
+const loadSuppliers = async () => {
+    isLoadingSuppliers.value = true
+    try {
+        suppliers.value = await getSupplierList()
+    } finally {
+        isLoadingSuppliers.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 loadDrivers = async () => {
+    isLoadingDrivers.value = true
+    try {
+        drivers.value = await getDriverList()
+    } finally {
+        isLoadingDrivers.value = false
+    }
+}
+
+const loadVehicles = async () => {
+    isLoadingVehicles.value = true
+    try {
+        vehicles.value = await getVehicleList()
+    } finally {
+        isLoadingVehicles.value = false
+    }
+}
+
+const setDefaultUser = () => {
+    if (form.userId) {
+        return
+    }
+    if (authStore.user?.id) {
+        form.userId = String(authStore.user.id)
+    }
+}
+
+onMounted(async () => {
+    receptionTypes.value = await getReceptionTypeList()
+    await loadUsers()
+    await loadSuppliers()
+    await loadTrucks()
+    await loadCarriers()
+    await loadDrivers()
+    await loadVehicles()
+    await authStore.ensureSession()
+    setDefaultUser()
+})
+
+watch(
+    () => [form.supplierId, 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) {
+            form.addressId = ''
+        }
+    },
+    { immediate: true }
+)
+
+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 }
+)
+
+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 }
+)
+
+watch(
+    () => [form.vehicleId, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value) {
+            return
+        }
+        const selected = filteredVehicles.value.find(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (selected) {
+            form.licensePlate = selected.plate
+            allowAnyLicensePlate.value = false
+        } else if (form.vehicleId === '') {
+            form.licensePlate = ''
+        }
+    }
+)
+
+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)
+        }
+    }
+)
+
 async function validate() {
    const normalizedLicensePlate = form.licensePlate.trim()
    const normalizedReceptionDate = form.receptionDate.trim()
+    const normalizedReceptionTypeId = form.receptionTypeId.trim()
+    const normalizedUserId = form.userId.trim()
+    const normalizedSupplierId = form.supplierId.trim()
+    const normalizedAddressId = form.addressId.trim()
+    const normalizedTruckId = form.truckId.trim()
+    const normalizedCarrierId = form.carrierId.trim()
+    const normalizedDriverId = form.driverId.trim()
+    const 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,
+        receptionDate: normalizedReceptionDate,
+        receptionType: receptionTypeIri,
+        user: userIri,
+        supplier: supplierIri,
+        address: addressIri,
+        truck: truckIri,
+        carrier: carrierIri
+    }
+
+    const payload = {
+        ...basePayload,
+        ...(isLiotCarrier.value && driverIri ? { driver: driverIri } : {})
+    }

    if (!receptionStore.current) {
        const created = await receptionStore.createReception({
            currentStep: 1,
-            licensePlate: normalizedLicensePlate,
-            receptionDate: normalizedReceptionDate
+            ...payload
        })
        if (created) {
            await router.push(`/reception/${created.id}`)
@@ -72,8 +585,7 @@ async function validate() {
    const nextStep = receptionStore.current.currentStep + 1
    await receptionStore.updateReception(receptionStore.current.id, {
        currentStep: nextStep,
-        licensePlate: normalizedLicensePlate,
-        receptionDate: normalizedReceptionDate
+        ...payload
    })
 }

--- a/frontend/components/reception/reception-weight.vue
+++ b/frontend/components/reception/reception-weight.vue
@@ -14,10 +14,6 @@
                    class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl">
                    {{ displayWeight }} kg
                </div>
-<!--                <div class="grid grid-cols-2 border border-black text-center">-->
-<!--                    <p class="border-r border-black py-3 text-4xl font-bold">DSD</p>-->
-<!--                    <p class="py-3 text-4xl">{{ displayDsd }}</p>-->
-<!--                </div>-->
            </div>
        </div>
    </div>
--- a/frontend/components/ui/license-plate-input.vue
+++ b/frontend/components/ui/license-plate-input.vue
@@ -1,26 +1,28 @@
 <template>
  <div class="flex flex-col">
-    <label :for="inputId" class="font-bold uppercase text-xl mb-4">{{ label }}</label>
-    <input
-      :id="inputId"
-      :value="modelValue"
-      v-maska="maskOptions"
-      type="text"
-      :maxlength="maxLength"
-      :placeholder="placeholderText"
-      class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
-      @input="handleInput"
-    />
-    <label :for="checkboxId" class="mt-3 flex items-center gap-3 text-sm">
-      <input
-        :id="checkboxId"
-        :checked="allowAny"
-        type="checkbox"
-        class="h-4 w-4 accent-primary-500"
-        @change="toggleAllowAny"
-      />
-      Autoriser un format libre
-    </label>
+    <label :for="inputId" class="font-bold uppercase text-xl mb-2">{{ label }}</label>
+      <div class="flex items-end gap-8">
+          <input
+              :id="inputId"
+              :value="modelValue"
+              v-maska="maskOptions"
+              type="text"
+              :maxlength="maxLength"
+              :placeholder="placeholderText"
+              class="border-b border-black flex-1 min-w-0 text-xl uppercase h-[30px]"
+              @input="handleInput"
+          />
+          <label :for="checkboxId" class="ml-auto flex items-center gap-3 whitespace-nowrap text-sm">
+              <input
+                  :id="checkboxId"
+                  :checked="allowAny"
+                  type="checkbox"
+                  class="h-4 w-4 accent-primary-500"
+                  @change="toggleAllowAny"
+              />
+              Autoriser un format libre
+          </label>
+      </div>
  </div>
 </template>

--- a/frontend/components/ui/stepper.vue
+++ b/frontend/components/ui/stepper.vue
@@ -0,0 +1,84 @@
+<template>
+    <div class="relative w-full">
+        <div class="relative h-[18px] text-[16px] uppercase font-bold text-black mb-3">
+            <div
+                v-for="(label, index) in labels"
+                :key="label"
+                class="absolute top-0 whitespace-nowrap"
+                :class="labelClass(index)"
+                :style="positionStyle(index)"
+            >
+                {{ label }}
+            </div>
+        </div>
+        <div class="relative h-[22px]">
+            <div class="absolute left-0 right-0 top-1/2 h-[2px] -translate-y-1/2 bg-black"></div>
+            <div
+                v-for="(_, index) in labels"
+                :key="index"
+                class="absolute top-1/2 h-[22px] w-[22px] -translate-y-1/2 rounded-full border border-black"
+                :class="[
+                    dotClass(index),
+                    isActive(index) ? 'bg-black' : 'bg-white',
+                    isClickable(index) ? 'cursor-pointer' : 'cursor-not-allowed'
+                ]"
+                :style="positionStyle(index)"
+                @click="handleClick(index)"
+            ></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+    labels: string[]
+    currentStep: number
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+    (e: 'select', step: number): void
+}>()
+
+const stepCount = computed(() => Math.max(props.labels.length, 1))
+
+const positionStyle = (index: number) => {
+    if (stepCount.value <= 1) {
+        return { left: '0%' }
+    }
+    if (index === 0) {
+        return { left: '0%' }
+    }
+    if (index === stepCount.value - 1) {
+        return { right: '0%' }
+    }
+    const percent = (index / (stepCount.value - 1)) * 100
+    return { left: `${percent}%` }
+}
+
+const isMiddle = (index: number) => index > 0 && index < stepCount.value - 1
+const isLast = (index: number) => index === stepCount.value - 1
+
+const dotClass = (index: number) => (isMiddle(index) ? '-translate-x-1/2' : '')
+
+const labelClass = (index: number) => {
+    if (isLast(index)) {
+        return 'text-right'
+    }
+    if (isMiddle(index)) {
+        return 'text-center -translate-x-1/2'
+    }
+    return 'text-left'
+}
+
+const isActive = (index: number) => index === props.currentStep
+
+const isClickable = (index: number) => index <= props.currentStep
+
+const handleClick = (index: number) => {
+    if (!isClickable(index)) {
+        return
+    }
+    emit('select', index)
+}
+</script>
--- a/frontend/composables/useWeighing.ts
+++ b/frontend/composables/useWeighing.ts
@@ -1,6 +1,6 @@
 import type {Ref} from 'vue'
 import {computed, ref} from 'vue'
-import type {ReceptionData, WeightEntryData} from '~/services/dto/reception-data'
+import type {ReceptionData, ReceptionPayload, WeightEntryData} from '~/services/dto/reception-data'
 import type {WeightData} from '~/services/dto/weight-data'
 import {getWeight} from '~/services/reception'
 import {createWeight, updateWeight} from '~/services/weight'
@@ -10,7 +10,7 @@ export type WeighingMode = 'gross' | 'tare'
 type UseWeighingOptions = {
    mode: WeighingMode
    reception: Ref<ReceptionData | null>
-    updateReception: (id: number, payload: Partial<ReceptionData>) => Promise<ReceptionData | null>
+    updateReception: (id: number, payload: ReceptionPayload) => Promise<ReceptionData | null>
    loadReception?: (id: number) => Promise<ReceptionData | null>
 }

--- a/frontend/constants/steps.ts
+++ b/frontend/constants/steps.ts
@@ -0,0 +1,13 @@
+export enum StepLabel {
+    Reception = 'Réception',
+    GrossWeighing = 'Pesée à plein',
+    Selection = 'Sélection réceptionnées',
+    TareWeighing = 'Pesée à vide'
+}
+
+export const RECEPTION_STEP_LABELS = [
+    StepLabel.Reception,
+    StepLabel.GrossWeighing,
+    StepLabel.Selection,
+    StepLabel.TareWeighing
+]
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -14,6 +14,24 @@
      "update": "Impossible de mettre à jour la réception.",
      "weigh": "Impossible de récupérer la pesée."
    },
+    "receptionType": {
+      "list": "Impossible de récupérer la liste des types de réception."
+    },
+    "supplier": {
+      "list": "Impossible de récupérer la liste des fournisseurs."
+    },
+    "truck": {
+      "list": "Impossible de récupérer la liste des camions."
+    },
+    "carrier": {
+      "list": "Impossible de récupérer la liste des transporteurs."
+    },
+    "driver": {
+      "list": "Impossible de récupérer la liste des chauffeurs."
+    },
+    "vehicle": {
+      "list": "Impossible de récupérer la liste des immatriculations."
+    },
    "auth": {
      "login": "Identifiants invalides.",
      "users": "Impossible de récupérer les utilisateurs.",
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -38,7 +38,7 @@
                </button>
            </div>
        </header>
-        <main class="mx-auto w-full max-w-[1050px] px-6 pt-[90px] pb-0">
+        <main class="mx-auto w-full max-w-[1280px] px-6 pt-[85px] pb-0">
            <slot/>
        </main>
    </div>
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -11,7 +11,7 @@ export default defineNuxtConfig({
    'nuxt-toast',
    '@nuxtjs/i18n'
  ],
-  css: ['~/assets/css/toast.css'],
+  css: ['~/assets/css/main.css', '~/assets/css/toast.css'],
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE
--- a/frontend/pages/reception/[[id]].vue
+++ b/frontend/pages/reception/[[id]].vue
@@ -1,7 +1,13 @@
 <template>
    <div>
-        <div class="flex justify-between h-[52px] mb-[90px]">
-            <p class="self-center">Indicateur d’étapes</p>
+        <div class="flex justify-between h-[52px] mb-[80px]">
+            <div class="flex flex-1 mr-16">
+                <UiStepper
+                    :labels="RECEPTION_STEP_LABELS"
+                    :current-step="storeReception?.currentStep ?? 0"
+                    @select="handleStepSelect"
+                />
+            </div>
            <button
                type="button"
                class="flex flex-col justify-center uppercase text-xl bg-black text-white h-[50px] w-[272px] text-center"
@@ -16,14 +22,15 @@
 </template>

 <script setup lang="ts">
-import { useReceptionStore } from '~/stores/reception'
-import { storeToRefs } from 'pinia'
+import {useReceptionStore} from '~/stores/reception'
+import {storeToRefs} from 'pinia'
+import {RECEPTION_STEP_LABELS} from '~/constants/steps'

 const route = useRoute()
 const router = useRouter()

 const receptionStore = useReceptionStore()
-const { current: storeReception } = storeToRefs(receptionStore)
+const {current: storeReception} = storeToRefs(receptionStore)

 const resolveReceptionId = (param: unknown) => {
    const idStr = Array.isArray(param) ? param[0] : param
@@ -44,7 +51,7 @@ watch(
        }
        await receptionStore.loadReception(id)
    },
-    { immediate: true }
+    {immediate: true}
 )

 const saveAndHold = async () => {
@@ -60,4 +67,19 @@ const saveAndHold = async () => {
    })
    await router.push('/')
 }
+
+const handleStepSelect = async (step: number) => {
+    if (!receptionStore.current) {
+        return
+    }
+
+    if (step === receptionStore.current.currentStep) {
+        return
+    }
+
+    await receptionStore.updateReception(receptionStore.current.id, {
+        currentStep: step
+    })
+    await receptionStore.loadReception(receptionStore.current.id)
+}
 </script>
--- a/frontend/services/carrier.ts
+++ b/frontend/services/carrier.ts
@@ -0,0 +1,23 @@
+import { useApi } from '~/composables/useApi'
+import type { CarrierData } from '~/services/dto/carrier-data'
+
+export type CarrierListResponse =
+    | CarrierData[]
+    | { 'hydra:member'?: CarrierData[] }
+
+export async function getCarrierList(): Promise<CarrierData[]> {
+    const api = useApi()
+    const response = await api.get<CarrierListResponse>('carriers', {}, {
+        toastErrorKey: 'errors.carrier.list'
+    })
+
+    if (Array.isArray(response)) {
+        return response
+    }
+
+    if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
+        return response['hydra:member']
+    }
+
+    return []
+}
--- a/frontend/services/driver.ts
+++ b/frontend/services/driver.ts
@@ -0,0 +1,23 @@
+import { useApi } from '~/composables/useApi'
+import type { DriverData } from '~/services/dto/driver-data'
+
+export type DriverListResponse =
+    | DriverData[]
+    | { 'hydra:member'?: DriverData[] }
+
+export async function getDriverList(): Promise<DriverData[]> {
+    const api = useApi()
+    const response = await api.get<DriverListResponse>('drivers', {}, {
+        toastErrorKey: 'errors.driver.list'
+    })
+
+    if (Array.isArray(response)) {
+        return response
+    }
+
+    if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
+        return response['hydra:member']
+    }
+
+    return []
+}
--- a/frontend/services/dto/address-data.ts
+++ b/frontend/services/dto/address-data.ts
@@ -0,0 +1,9 @@
+export interface AddressData {
+    id: number
+    label: string
+    street: string
+    postalCode: string
+    city: string
+    countryCode: string
+    fullAddress?: string
+}
--- a/frontend/services/dto/carrier-data.ts
+++ b/frontend/services/dto/carrier-data.ts
@@ -0,0 +1,5 @@
+export interface CarrierData {
+    id: number
+    name: string
+    code: string
+}
--- a/frontend/services/dto/driver-data.ts
+++ b/frontend/services/dto/driver-data.ts
@@ -0,0 +1,7 @@
+import type { CarrierData } from '~/services/dto/carrier-data'
+
+export interface DriverData {
+    id: number
+    name: string
+    carrier?: CarrierData | null
+}
--- a/frontend/services/dto/reception-data.ts
+++ b/frontend/services/dto/reception-data.ts
@@ -1,3 +1,11 @@
+import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
+import type { UserData } from '~/services/dto/user-data'
+import type { SupplierData } from '~/services/dto/supplier-data'
+import type { AddressData } from '~/services/dto/address-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'
+
 export interface ReceptionData {
    id: number
    licensePlate: string | null
@@ -5,6 +13,13 @@ export interface ReceptionData {
    receptionDate: string
    currentStep: number
    isValid: boolean
+    receptionType?: ReceptionTypeData | null
+    user?: UserData | null
+    supplier?: SupplierData | null
+    address?: AddressData | null
+    truck?: TruckData | null
+    carrier?: CarrierData | null
+    driver?: DriverData | null
 }

 export interface WeightEntryData {
@@ -14,3 +29,17 @@ export interface WeightEntryData {
    weight: number | null
    weighedAt: string | null
 }
+
+export type ReceptionPayload = {
+    licensePlate?: string | null
+    receptionDate?: string
+    currentStep?: number
+    isValid?: boolean
+    receptionType?: string | null
+    user?: string | null
+    supplier?: string | null
+    address?: string | null
+    truck?: string | null
+    carrier?: string | null
+    driver?: string | null
+}
--- a/frontend/services/dto/reception-type-data.ts
+++ b/frontend/services/dto/reception-type-data.ts
@@ -0,0 +1,5 @@
+export interface ReceptionTypeData {
+    id: number
+    label: string
+    code: string
+}
--- a/frontend/services/dto/supplier-data.ts
+++ b/frontend/services/dto/supplier-data.ts
@@ -0,0 +1,7 @@
+import type { AddressData } from '~/services/dto/address-data'
+
+export interface SupplierData {
+    id: number
+    name: string
+    addresses?: AddressData[] | null
+}
--- a/frontend/services/dto/truck-data.ts
+++ b/frontend/services/dto/truck-data.ts
@@ -0,0 +1,4 @@
+export interface TruckData {
+    id: number
+    name: string
+}
--- a/frontend/services/dto/user-data.ts
+++ b/frontend/services/dto/user-data.ts
@@ -1,3 +1,4 @@
 export interface UserData {
+  id: number
  username: string
 }
--- a/frontend/services/dto/vehicle-data.ts
+++ b/frontend/services/dto/vehicle-data.ts
@@ -0,0 +1,9 @@
+import type { CarrierData } from '~/services/dto/carrier-data'
+import type { TruckData } from '~/services/dto/truck-data'
+
+export interface VehicleData {
+    id: number
+    plate: string
+    carrier?: CarrierData | null
+    truck?: TruckData | null
+}
--- a/frontend/services/reception-type.ts
+++ b/frontend/services/reception-type.ts
@@ -0,0 +1,23 @@
+import { useApi } from '~/composables/useApi'
+import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
+
+export type ReceptionTypeListResponse =
+    | ReceptionTypeData[]
+    | { 'hydra:member'?: ReceptionTypeData[] }
+
+export async function getReceptionTypeList(): Promise<ReceptionTypeData[]> {
+    const api = useApi()
+    const response = await api.get<ReceptionTypeListResponse>('reception_types', {}, {
+        toastErrorKey: 'errors.receptionType.list'
+    })
+
+    if (Array.isArray(response)) {
+        return response
+    }
+
+    if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
+        return response['hydra:member']
+    }
+
+    return []
+}
--- a/frontend/services/reception.ts
+++ b/frontend/services/reception.ts
@@ -1,5 +1,5 @@
 import {useApi} from '~/composables/useApi'
-import type {ReceptionData} from '~/services/dto/reception-data'
+import type {ReceptionData, ReceptionPayload} from '~/services/dto/reception-data'
 import type {WeightData} from '~/services/dto/weight-data'

 export async function getReceptionList() {
@@ -16,14 +16,14 @@ export async function getReception(id: number) {
    })
 }

-export async function createReception(payload: Partial<ReceptionData> = {}) {
+export async function createReception(payload: ReceptionPayload = {}) {
    const api = useApi()
    return api.post<ReceptionData>('receptions', payload, {
        toastErrorKey: 'errors.reception.create'
    })
 }

-export async function updateReception(id: number, payload: Partial<ReceptionData>) {
+export async function updateReception(id: number, payload: ReceptionPayload) {
    const api = useApi()
    return api.patch<ReceptionData>(`receptions/${id}`, payload, {
        toastErrorKey: 'errors.reception.update',
--- a/frontend/services/supplier.ts
+++ b/frontend/services/supplier.ts
@@ -0,0 +1,23 @@
+import { useApi } from '~/composables/useApi'
+import type { SupplierData } from '~/services/dto/supplier-data'
+
+export type SupplierListResponse =
+    | SupplierData[]
+    | { 'hydra:member'?: SupplierData[] }
+
+export async function getSupplierList(): Promise<SupplierData[]> {
+    const api = useApi()
+    const response = await api.get<SupplierListResponse>('suppliers', {}, {
+        toastErrorKey: 'errors.supplier.list'
+    })
+
+    if (Array.isArray(response)) {
+        return response
+    }
+
+    if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
+        return response['hydra:member']
+    }
+
+    return []
+}
--- a/frontend/services/truck.ts
+++ b/frontend/services/truck.ts
@@ -0,0 +1,23 @@
+import { useApi } from '~/composables/useApi'
+import type { TruckData } from '~/services/dto/truck-data'
+
+export type TruckListResponse =
+    | TruckData[]
+    | { 'hydra:member'?: TruckData[] }
+
+export async function getTruckList(): Promise<TruckData[]> {
+    const api = useApi()
+    const response = await api.get<TruckListResponse>('trucks', {}, {
+        toastErrorKey: 'errors.truck.list'
+    })
+
+    if (Array.isArray(response)) {
+        return response
+    }
+
+    if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
+        return response['hydra:member']
+    }
+
+    return []
+}
--- a/frontend/services/vehicle.ts
+++ b/frontend/services/vehicle.ts
@@ -0,0 +1,23 @@
+import { useApi } from '~/composables/useApi'
+import type { VehicleData } from '~/services/dto/vehicle-data'
+
+export type VehicleListResponse =
+    | VehicleData[]
+    | { 'hydra:member'?: VehicleData[] }
+
+export async function getVehicleList(): Promise<VehicleData[]> {
+    const api = useApi()
+    const response = await api.get<VehicleListResponse>('vehicles', {}, {
+        toastErrorKey: 'errors.vehicle.list'
+    })
+
+    if (Array.isArray(response)) {
+        return response
+    }
+
+    if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
+        return response['hydra:member']
+    }
+
+    return []
+}
--- a/frontend/stores/reception.ts
+++ b/frontend/stores/reception.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import type { ReceptionData } from '~/services/dto/reception-data'
+import type { ReceptionData, ReceptionPayload } from '~/services/dto/reception-data'
 import { createReception, getReception, updateReception } from '~/services/reception'

 const isReceptionData = (value: unknown): value is ReceptionData => {
@@ -31,7 +31,7 @@ export const useReceptionStore = defineStore('reception', {
      this.current = result
      return result
    },
-    async createReception(payload: Partial<ReceptionData> = {}) {
+    async createReception(payload: ReceptionPayload = {}) {
      this.isLoading = true
      const result = await createReception(payload).finally(() => {
        this.isLoading = false
@@ -43,7 +43,7 @@ export const useReceptionStore = defineStore('reception', {
      this.current = result
      return result
    },
-    async updateReception(id: number, payload: Partial<ReceptionData>) {
+    async updateReception(id: number, payload: ReceptionPayload) {
      this.isLoading = true
      const result = await updateReception(id, payload).finally(() => {
        this.isLoading = false
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -3,6 +3,9 @@ import type { Config } from 'tailwindcss'
 export default <Partial<Config>>{
  theme: {
    extend: {
+      fontFamily: {
+        sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif']
+      },
      colors: {
        primary: {
          50: '#f6f9ea',