[#203] Réceptions — Parcours de pesée multi-étapes (première partie) (!3)

| Numéro du ticket | Titre du ticket | |------------------|-----------------| | #203 | Réceptions — Parcours de pesée multi-étapes | ## Description de la PR [#203] Réceptions — Parcours de pesée multi-étapes ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #3 Reviewed-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Co-authored-by: AUTIN Tristan <tristan@yuno.malio.fr> Co-committed-by: AUTIN Tristan <tristan@yuno.malio.fr>
2026-01-14 07:17:34 +00:00
parent 9fb0fc12b8
commit 4a77449a41
44 changed files with 1976 additions and 73 deletions
--- a/frontend/components/reception/reception-form.vue
+++ b/frontend/components/reception/reception-form.vue
@@ -0,0 +1,107 @@
+<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 class="flex flex-col">
+                <label for="license-plate" class="font-bold uppercase text-xl mb-4">Immatriculation</label>
+                <input
+                    id="license-plate"
+                    v-model="form.licensePlate"
+                    type="text"
+                    class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
+                />
+                <p v-if="fieldErrors.licensePlate" class="text-red-600 text-sm">{{ fieldErrors.licensePlate }}</p>
+            </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"
+                />
+                <p v-if="fieldErrors.receptionDate" class="text-red-600 text-sm">{{ fieldErrors.receptionDate }}</p>
+            </div>
+        </div>
+        <div class="flex justify-center">
+            <button
+                type="submit"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+            >Valider
+            </button>
+        </div>
+        <p v-if="errorMessage" class="text-red-600 mt-4">{{ errorMessage }}</p>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { z } from 'zod'
+import { mapZodErrors } from '~/utils/zod-errors'
+import { useReceptionStore } from '~/stores/reception'
+
+type ReceptionFormData = {
+    licensePlate: string
+    receptionDate: string
+}
+
+const receptionStore = useReceptionStore()
+const { errorMessage: storeErrorMessage, current: storeReception } = storeToRefs(receptionStore)
+const form = reactive<ReceptionFormData>({
+    licensePlate: '',
+    receptionDate: ''
+})
+const fieldErrors = reactive<Partial<Record<keyof ReceptionFormData, string>>>({
+    licensePlate: undefined,
+    receptionDate: undefined
+})
+const errorMessage = computed(() => storeErrorMessage.value)
+const formSchema = z.object({
+    licensePlate: z
+        .string()
+        .min(1, 'Immatriculation requise.')
+        .max(20, 'Immatriculation trop longue (20 caracteres max).'),
+    receptionDate: z
+        .string()
+        .min(1, 'Date de reception requise.')
+        .regex(/^\d{4}-\d{2}-\d{2}$/, 'Date de reception invalide.')
+})
+
+watch(
+    storeReception,
+    (reception) => {
+        form.licensePlate = reception?.licensePlate ?? ''
+        form.receptionDate = reception?.receptionDate ?? ''
+    },
+    { immediate: true }
+)
+
+async function validate() {
+    if (!receptionStore.current) {
+        return
+    }
+
+    fieldErrors.licensePlate = undefined
+    fieldErrors.receptionDate = undefined
+    const normalizedLicensePlate = form.licensePlate.trim()
+    const normalizedReceptionDate = form.receptionDate.trim()
+    const result = formSchema.safeParse({
+        licensePlate: normalizedLicensePlate,
+        receptionDate: normalizedReceptionDate
+    })
+    if (!result.success) {
+        const errors = mapZodErrors<ReceptionFormData>(result.error)
+        fieldErrors.licensePlate = errors.licensePlate ?? 'Formulaire invalide.'
+        fieldErrors.receptionDate = errors.receptionDate ?? 'Formulaire invalide.'
+        return
+    }
+
+    const nextStep = receptionStore.current.currentStep + 1
+    await receptionStore.updateReception(receptionStore.current.id, {
+        currentStep: nextStep,
+        licensePlate: normalizedLicensePlate || null,
+        receptionDate: normalizedReceptionDate || null
+    })
+}
+
+</script>
--- a/frontend/components/reception/reception-unloading.vue
+++ b/frontend/components/reception/reception-unloading.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="flex flex-col items-center mt-[164px] gap-32">
+        <div class="flex gap-8 items-center justify-center">
+<!--@TODO Prendre en compte que l'on peut aussi décharger de la marchandise-->
+            <h1 class="text-3xl uppercase font-bold">Décharger les bêtes</h1>
+            <UiLoadingDots />
+        </div>
+        <button
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            @click="goNext"
+        >Suivant</button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useReceptionStore } from '~/stores/reception'
+
+const receptionStore = useReceptionStore()
+
+async function goNext() {
+    if (!receptionStore.current) {
+        return
+    }
+
+    const nextStep = receptionStore.current.currentStep + 1
+    await receptionStore.updateReception(receptionStore.current.id, {
+        currentStep: nextStep
+    })
+}
+</script>
--- a/frontend/components/reception/reception-weight.vue
+++ b/frontend/components/reception/reception-weight.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="flex justify-center">
+        <div class="flex flex-col items-center w-[660px]">
+            <h1 class="font-bold text-5xl uppercase">{{ 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="errorMessage || showLoadingBox"
+                class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[86px]">
+                    <p v-if="errorMessage" class="text-red-500">{{ errorMessage }}</p>
+                    <UiLoadingDots v-else />
+            </div>
+            <div v-else-if="displayWeight !== null" 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">
+                    {{ 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>
+    <div class="flex justify-center mt-[54px]">
+        <button
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            @click="fetchWeight"
+        >{{ displayWeight !== null ? 'refaire une pesee' : 'peser' }}</button>
+        <button
+            v-if="displayWeight !== null"
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
+            @click="saveWeight"
+        >Valider la pesée</button>
+    </div>
+
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useWeighing } from '~/composables/useWeighing'
+import { useReceptionStore } from '~/stores/reception'
+
+const props = defineProps<{
+    mode: 'gross' | 'tare'
+}>()
+
+const receptionStore = useReceptionStore()
+const { current: storeReception, errorMessage: storeErrorMessage } = storeToRefs(receptionStore)
+const {
+    displayWeight,
+    displayDsd,
+    title,
+    errorMessage,
+    showLoadingBox,
+    fetchWeight,
+    saveWeight
+} = useWeighing({
+    mode: props.mode,
+    reception: storeReception,
+    updateReception: receptionStore.updateReception,
+    loadReception: receptionStore.loadReception,
+    storeError: storeErrorMessage
+})
+// @TODO Voir comment mettre en place la genération du bon, la validation de la reception et le dernier step
+
+</script>
--- a/frontend/components/ui/loading-dots.vue
+++ b/frontend/components/ui/loading-dots.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="flex items-center gap-2 text-sm uppercase">
+        <span class="loader-dots">
+            <span class="loader-dot"></span>
+            <span class="loader-dot"></span>
+            <span class="loader-dot"></span>
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+.loader-dots {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+}
+
+.loader-dot {
+    width: 20px;
+    height: 20px;
+    border-radius: 9999px;
+    background: currentColor;
+    animation: loader-bounce 1s infinite ease-in-out;
+}
+
+.loader-dot:nth-child(2) {
+    animation-delay: 0.15s;
+}
+
+.loader-dot:nth-child(3) {
+    animation-delay: 0.3s;
+}
+
+@keyframes loader-bounce {
+    0%,
+    80%,
+    100% {
+        transform: scale(0.6);
+        opacity: 0.4;
+    }
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+</style>
--- a/frontend/composables/useApi.ts
+++ b/frontend/composables/useApi.ts
@@ -14,14 +14,25 @@ export type ApiClient = {
 export const useApi = (): ApiClient => {
  const config = useRuntimeConfig()
  const baseURL = config.public.apiBase ?? '/api'
-  const client = $fetch.create({ baseURL })
+  const client = $fetch.create({ baseURL, retry: 0 })

  const request = <T>(
    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
    url: string,
    options: FetchOptions<'json'> = {}
  ) => {
-    return client<T>(url, { ...options, method })
+    const needsJsonBody = method === 'POST' || method === 'PUT'
+    const needsMergePatch = method === 'PATCH'
+
+    const headers = new Headers(options.headers as HeadersInit | undefined)
+
+    if (needsMergePatch && !headers.has('Content-Type')) {
+      headers.set('Content-Type', 'application/merge-patch+json')
+    } else if (needsJsonBody && !headers.has('Content-Type')) {
+      headers.set('Content-Type', 'application/json')
+    }
+
+    return client<T>(url, { ...options, method, headers })
  }

  return {
--- a/frontend/composables/useWeighing.ts
+++ b/frontend/composables/useWeighing.ts
@@ -0,0 +1,109 @@
+import { computed, ref } from 'vue'
+import type { Ref } from 'vue'
+import type { ReceptionData, 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'
+
+export type WeighingMode = 'gross' | 'tare'
+
+type UseWeighingOptions = {
+    mode: WeighingMode
+    reception: Ref<ReceptionData | null>
+    updateReception: (id: number, payload: Partial<ReceptionData>) => Promise<ReceptionData | null>
+    loadReception?: (id: number) => Promise<ReceptionData | null>
+    storeError?: Ref<string | null>
+}
+
+export const useWeighing = ({
+    mode,
+    reception,
+    updateReception,
+    loadReception,
+    storeError
+}: UseWeighingOptions) => {
+    const weightData = ref<WeightData | null>(null)
+    const localErrorMessage = ref<string | null>(null)
+
+    const currentWeightEntry = computed<WeightEntryData | null>(() => {
+        const weights = reception.value?.weights ?? []
+        return weights.find((entry) => entry.type === mode) ?? null
+    })
+
+    const displayWeight = computed(() => weightData.value?.weight ?? currentWeightEntry.value?.weight ?? null)
+    const displayDsd = computed(() => weightData.value?.dsd ?? currentWeightEntry.value?.dsd ?? '-')
+    const title = computed(() => (mode === 'gross' ? 'Pesée à plein' : 'Pesée à vide'))
+    const errorMessage = computed(() => localErrorMessage.value ?? storeError?.value ?? null)
+    const showLoadingBox = computed(() => displayWeight.value === null && !errorMessage.value)
+
+    const fetchWeight = async () => {
+        localErrorMessage.value = null
+        try {
+            weightData.value = await getWeight()
+        } catch (error) {
+            localErrorMessage.value = error?.data?.error ?? error?.message ?? 'Erreur inconnue.'
+        }
+    }
+
+    const saveWeight = async () => {
+        localErrorMessage.value = null
+        if (!reception.value) {
+            localErrorMessage.value = 'Réception introuvable.'
+            return
+        }
+
+        const existingEntry = currentWeightEntry.value
+        const baseDsd = weightData.value?.dsd ?? existingEntry?.dsd ?? null
+        const baseWeight = weightData.value?.weight ?? existingEntry?.weight ?? null
+        const baseWeighedAt = weightData.value?.weighedAt ?? existingEntry?.weighedAt ?? null
+
+        if (baseWeight === null) {
+            localErrorMessage.value = 'Veuillez d’abord peser.'
+            return
+        }
+
+        try {
+            if (existingEntry?.id) {
+                await updateWeight(existingEntry.id, {
+                    type: mode,
+                    dsd: baseDsd,
+                    weight: baseWeight,
+                    weighedAt: baseWeighedAt
+                })
+            } else {
+                await createWeight({
+                    reception: `/receptions/${reception.value.id}`,
+                    type: mode,
+                    dsd: baseDsd,
+                    weight: baseWeight,
+                    weighedAt: baseWeighedAt
+                })
+            }
+        } catch (error) {
+            localErrorMessage.value = error?.data?.error ?? error?.message ?? 'Erreur inconnue.'
+            return
+        }
+
+        const nextStep = reception.value.currentStep + 1
+        await updateReception(reception.value.id, {
+            currentStep: nextStep,
+            isValid: mode === 'tare' ? true : reception.value.isValid
+        })
+
+        if (loadReception) {
+            await loadReception(reception.value.id)
+        }
+    }
+
+    return {
+        weightData,
+        currentWeightEntry,
+        displayWeight,
+        displayDsd,
+        title,
+        errorMessage,
+        showLoadingBox,
+        fetchWeight,
+        saveWeight
+    }
+}
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -23,7 +23,7 @@
                        <a
                            :href="href"
                            @click="navigate"
-                            :class="isActive ? 'opacity-100' : 'opacity-50'"
+                            :class="isReceptionActive ? 'opacity-100' : 'opacity-50'"
                        >
                            Reception
                        </a>
@@ -36,3 +36,8 @@
        </main>
    </div>
 </template>
+
+<script setup lang="ts">
+const route = useRoute()
+const isReceptionActive = computed(() => route.path.startsWith('/reception'))
+</script>
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -2,7 +2,7 @@ export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  ssr: false,
-  modules: ['@nuxtjs/tailwindcss'],
+  modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt'],
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE
@@ -11,4 +11,4 @@ export default defineNuxtConfig({
  typescript: {
    strict: true
  }
-})
+})
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,9 +7,12 @@
      "name": "frontend",
      "hasInstallScript": true,
      "dependencies": {
+        "@pinia/nuxt": "^0.11.3",
        "nuxt": "^4.2.2",
+        "pinia": "^3.0.4",
        "vue": "^3.5.26",
-        "vue-router": "^4.6.4"
+        "vue-router": "^4.6.4",
+        "zod": "^4.3.5"
      },
      "devDependencies": {
        "@nuxtjs/tailwindcss": "^6.14.0"
@@ -56,7 +59,6 @@
      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.5",
@@ -2678,6 +2680,20 @@
        "url": "https://opencollective.com/parcel"
      }
    },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.3.tgz",
+      "integrity": "sha512-7WVNHpWx4qAEzOlnyrRC88kYrwnlR/PrThWT0XI1dSNyUAXu/KBv9oR37uCgYkZroqP5jn8DfzbkNF3BtKvE9w==",
+      "dependencies": {
+        "@nuxt/kit": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": "^3.0.4"
+      }
+    },
    "node_modules/@pkgjs/parseargs": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3512,7 +3528,6 @@
      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.26.tgz",
      "integrity": "sha512-egp69qDTSEZcf4bGOSsprUr4xI73wfrY5oRs6GSgXFTiHrWj4Y3X5Ydtip9QMqiCMCPVwLglB9GBxXtTadJ3mA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/parser": "^7.28.5",
        "@vue/compiler-core": "3.5.26",
@@ -3710,7 +3725,6 @@
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "license": "MIT",
-      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -4092,7 +4106,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@@ -4206,7 +4219,6 @@
      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=8"
      }
@@ -4396,7 +4408,6 @@
      "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
      "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "consola": "^3.2.3"
      }
@@ -7966,7 +7977,6 @@
      "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-4.2.2.tgz",
      "integrity": "sha512-n6oYFikgLEb70J4+K19jAzfx4exZcRSRX7yZn09P5qlf2Z59VNOBqNmaZO5ObzvyGUZ308SZfL629/Q2v2FVjw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@dxup/nuxt": "^0.2.2",
        "@nuxt/cli": "^3.31.1",
@@ -8245,7 +8255,6 @@
      "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.102.0.tgz",
      "integrity": "sha512-xMiyHgr2FZsphQ12ZCsXRvSYzmKXCm1ejmyG4GDZIiKOmhyt5iKtWq0klOfFsEQ6jcgbwrUdwcCVYzr1F+h5og==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@oxc-project/types": "^0.102.0"
      },
@@ -8469,6 +8478,61 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/pinia/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
+    },
    "node_modules/pirates": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
@@ -8523,7 +8587,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -9073,7 +9136,6 @@
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
      "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@@ -9530,7 +9592,6 @@
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.55.1.tgz",
      "integrity": "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/estree": "1.0.8"
      },
@@ -10341,7 +10402,6 @@
      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@alloc/quick-lru": "^5.2.0",
        "arg": "^5.0.2",
@@ -11166,7 +11226,6 @@
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "^0.27.0",
        "fdir": "^6.5.0",
@@ -11523,7 +11582,6 @@
      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
      "integrity": "sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/compiler-dom": "3.5.26",
        "@vue/compiler-sfc": "3.5.26",
@@ -11560,7 +11618,6 @@
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/devtools-api": "^6.6.4"
      },
@@ -11762,7 +11819,6 @@
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
      "license": "ISC",
-      "peer": true,
      "bin": {
        "yaml": "bin.mjs"
      },
@@ -11887,6 +11943,14 @@
      "engines": {
        "node": ">= 14"
      }
+    },
+    "node_modules/zod": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.5.tgz",
+      "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
    }
  }
 }
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,9 +11,12 @@
    "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist"
  },
  "dependencies": {
+    "@pinia/nuxt": "^0.11.3",
    "nuxt": "^4.2.2",
+    "pinia": "^3.0.4",
    "vue": "^3.5.26",
-    "vue-router": "^4.6.4"
+    "vue-router": "^4.6.4",
+    "zod": "^4.3.5"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.14.0"
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,9 +1,21 @@
 <template>
-    <div class="min-h-screen flex items-center justify-center">
-        <h1 class="text-3xl font-bold">Nuxt OK ✅</h1>
+    <div class="">
+        <h1 class="text-3xl font-bold">Liste des receptions</h1>
+        <ul>
+            <li v-for="reception in receptionList" :key="reception.id">
+                <NuxtLink :to="`/reception/${reception.id}`">Réception numéro {{ reception.id}}</NuxtLink>
+            </li>
+        </ul>
    </div>
 </template>

 <script setup lang="ts">
+import type {ReceptionData} from "~/services/dto/reception-data";
+import {getReceptionList} from "~/services/reception";

+const receptionList = ref<ReceptionData[]>()
+
+onMounted(async () => {
+    receptionList.value = await getReceptionList()
+})
 </script>
--- a/frontend/pages/reception/[[id]].vue
+++ b/frontend/pages/reception/[[id]].vue
@@ -0,0 +1,36 @@
+<template>
+    <div v-if="errorMessage" class="text-red-600">{{ errorMessage }}</div>
+    <div v-else>
+        <div class="flex justify-between h-[52px] mb-[90px]">
+            <p class="self-center">Indicateur d’étapes</p>
+            <NuxtLink to="/" class="flex flex-col justify-center uppercase text-xl bg-black text-white h-[50px] w-[272px] text-center">Mettre en attente</NuxtLink>
+        </div>
+        <ReceptionForm v-if="storeReception?.currentStep === 0"/>
+        <ReceptionWeight v-if="storeReception?.currentStep === 1" mode="gross"/>
+        <ReceptionUnloading v-if="storeReception?.currentStep === 2"/>
+        <ReceptionWeight v-if="storeReception?.currentStep === 3" mode="tare"/>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useReceptionStore } from '~/stores/reception'
+import { storeToRefs } from 'pinia'
+
+const route = useRoute()
+const router = useRouter()
+
+const receptionStore = useReceptionStore()
+const { current: storeReception, errorMessage } = storeToRefs(receptionStore)
+
+onMounted(async () => {
+    const raw = route.params.id
+    const idStr = Array.isArray(raw) ? raw[0] : raw
+    const id = idStr ? Number(idStr) : null
+
+    if (id === null) {
+        await receptionStore.createReception()
+    } else {
+        await receptionStore.loadReception(id)
+    }
+})
+</script>
--- a/frontend/services/dto/reception-data.ts
+++ b/frontend/services/dto/reception-data.ts
@@ -0,0 +1,16 @@
+export interface ReceptionData {
+    id: number
+    licensePlate: string | null
+    weights?: WeightEntryData[] | null
+    receptionDate: string
+    currentStep: number
+    isValid: boolean
+}
+
+export interface WeightEntryData {
+    id?: number
+    type: 'gross' | 'tare'
+    dsd: number | null
+    weight: number | null
+    weighedAt: string | null
+}
--- a/frontend/services/dto/weight-data.ts
+++ b/frontend/services/dto/weight-data.ts
@@ -0,0 +1,5 @@
+export interface WeightData {
+    weight: number | null
+    dsd: number | null
+    weighedAt: string | null
+}
--- a/frontend/services/reception.ts
+++ b/frontend/services/reception.ts
@@ -0,0 +1,50 @@
+import { useApi } from '~/composables/useApi'
+import type { ReceptionData } from '~/services/dto/reception-data'
+import type { WeightData } from '~/services/dto/weight-data'
+
+const api = useApi()
+
+export async function getReceptionList() {
+    try {
+        return await api.get<ReceptionData>(`receptions`)
+    } catch (error) {
+        console.error(error.message, error)
+        return error
+    }
+}
+
+export async function getReception(id: number) {
+    try {
+        return await api.get<ReceptionData>(`receptions/${id}`)
+    } catch (error) {
+        console.error(error.message, error)
+        return error
+    }
+}
+
+export async function createReception(payload: Partial<ReceptionData> = {}) {
+    try {
+        return await api.post<ReceptionData>('receptions', payload)
+    } catch (error) {
+        console.error(error.message, error)
+        return error
+    }
+}
+
+export async function updateReception(id: number, payload: Partial<ReceptionData>) {
+    try {
+        return await api.patch<ReceptionData>(`receptions/${id}`, payload)
+    } catch (error) {
+        console.error(error.message, error)
+        return error
+    }
+}
+
+export async function getWeight(): Promise<WeightData> {
+    try {
+        return await api.get<WeightData>('receptions/weigh')
+    } catch (error) {
+        console.error(error.message, error)
+        throw error
+    }
+}
--- a/frontend/services/weight.ts
+++ b/frontend/services/weight.ts
@@ -0,0 +1,30 @@
+import { useApi } from '~/composables/useApi'
+import type { WeightEntryData } from '~/services/dto/reception-data'
+
+const api = useApi()
+
+export type WeightPayload = {
+    reception: string
+    type: 'gross' | 'tare'
+    dsd: number | null
+    weight: number | null
+    weighedAt: string | null
+}
+
+export async function createWeight(payload: WeightPayload) {
+    try {
+        return await api.post<WeightEntryData>('weights', payload)
+    } catch (error) {
+        console.error(error.message, error)
+        throw error
+    }
+}
+
+export async function updateWeight(id: number, payload: Partial<WeightPayload>) {
+    try {
+        return await api.patch<WeightEntryData>(`weights/${id}`, payload)
+    } catch (error) {
+        console.error(error.message, error)
+        throw error
+    }
+}
--- a/frontend/stores/reception.ts
+++ b/frontend/stores/reception.ts
@@ -0,0 +1,72 @@
+import { defineStore } from 'pinia'
+import type { ReceptionData } from '~/services/dto/reception-data'
+import { createReception, getReception, updateReception } from '~/services/reception'
+
+const isReceptionData = (value: unknown): value is ReceptionData => {
+  return Boolean(value && typeof value === 'object' && 'id' in value)
+}
+
+export const useReceptionStore = defineStore('reception', {
+  state: () => ({
+    current: null as ReceptionData | null,
+    isLoading: false,
+    errorMessage: null as string | null
+  }),
+  actions: {
+    setCurrent(reception: ReceptionData | null) {
+      this.current = reception
+    },
+    clearError() {
+      this.errorMessage = null
+    },
+    async loadReception(id: number) {
+      this.isLoading = true
+      this.errorMessage = null
+      try {
+        const result = await getReception(id)
+        if (!isReceptionData(result)) {
+          this.errorMessage = 'Réception introuvable.'
+          this.current = null
+          return null
+        }
+
+        this.current = result
+        return result
+      } finally {
+        this.isLoading = false
+      }
+    },
+    async createReception() {
+      this.isLoading = true
+      this.errorMessage = null
+      try {
+        const result = await createReception()
+        if (!isReceptionData(result)) {
+          this.errorMessage = 'Impossible de créer la réception.'
+          return null
+        }
+
+        this.current = result
+        return result
+      } finally {
+        this.isLoading = false
+      }
+    },
+    async updateReception(id: number, payload: Partial<ReceptionData>) {
+      this.isLoading = true
+      this.errorMessage = null
+      try {
+        const result = await updateReception(id, payload)
+        if (!isReceptionData(result)) {
+          this.errorMessage = 'Impossible de mettre à jour la réception.'
+          return null
+        }
+
+        this.current = result
+        return result
+      } finally {
+        this.isLoading = false
+      }
+    }
+  }
+})
--- a/frontend/utils/zod-errors.ts
+++ b/frontend/utils/zod-errors.ts
@@ -0,0 +1,17 @@
+import type { ZodError } from 'zod'
+
+export type FieldErrors<T extends Record<string, unknown>> = Partial<Record<keyof T, string>>
+
+export const mapZodErrors = <T extends Record<string, unknown>>(error: ZodError<T>): FieldErrors<T> => {
+    const flattened = error.flatten().fieldErrors
+    const result: FieldErrors<T> = {}
+
+    for (const key in flattened) {
+        const message = flattened[key]?.[0]
+        if (message) {
+            result[key as keyof T] = message
+        }
+    }
+
+    return result
+}