feat : Ajout de zod, création d'un composant de chargement loading-dots.vue et finalisation du flow d'une reception

frontend/components/reception/reception-form.vue

@@ -1,36 +1,107 @@
 <template>
-    <h1>Formulaire</h1>
-    <button
-        @click="validate"
-        class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-    >Valider
-    </button>
+    <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 isLoading = ref<boolean>(false)
-const errorMessage = ref<string | null>(null)
+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) {
-        errorMessage.value = 'Réception introuvable.'
         return
     }
 
-    isLoading.value = true
-    try {
-        const nextStep = receptionStore.current.currentStep + 1
-        await receptionStore.updateReception(receptionStore.current.id, {
-            currentStep: nextStep
-        })
-    } catch (error) {
-        errorMessage.value = error.error ?? 'Erreur inconnue.'
-    } finally {
-        isLoading.value = false
+    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>

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>

frontend/components/reception/reception-weight.vue

@@ -1,41 +1,110 @@
 <template>
-    <div v-if="weightData">
-        <p>{{ weightData.weight }} kg</p>
-        <p>DSD : {{ weightData.dsd }}</p>
+    <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>
-    <button
-        class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-        @click="getReceptionWeight"
-    >Peser</button>
+    <div class="flex justify-center mt-[54px]">
+        <button
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            @click="getReceptionWeight"
+        >{{ 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="validateWeight"
+        >Valider la pesée</button>
+    </div>
+
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { getWeight } from '~/services/reception'
 import type { WeightData } from '~/services/dto/weight-data'
+import { createWeight, updateWeight } from '~/services/weight'
 import { useReceptionStore } from '~/stores/reception'
 
-const isLoading = ref(false)
+const props = defineProps<{
+    mode: 'gross' | 'tare'
+}>()
+
 const weightData = ref<WeightData | null>(null)
-const errorMessage = ref<string | null>(null)
+const localErrorMessage = ref<string | null>(null)
 const receptionStore = useReceptionStore()
+const { current: storeReception, errorMessage: storeErrorMessage } = storeToRefs(receptionStore)
+const errorMessage = computed(() => localErrorMessage.value ?? storeErrorMessage.value)
+const currentWeightEntry = computed(
+    () => storeReception.value?.weights?.find((entry) => entry.type === props.mode) ?? null
+)
+const displayWeight = computed(() => weightData.value?.weight ?? currentWeightEntry.value?.weight ?? null)
+const displayDsd = computed(() => weightData.value?.dsd ?? currentWeightEntry.value?.dsd ?? '-')
+const title = computed(() => (props.mode === 'gross' ? 'Pesée à plein' : 'Pesée à vide'))
+const showLoadingBox = computed(() => displayWeight.value === null && !errorMessage.value)
 
 async function getReceptionWeight() {
-    isLoading.value = true
+    localErrorMessage.value = null
     try {
         weightData.value = await getWeight()
+    } catch (error) {
+        localErrorMessage.value = error?.data?.error ?? error?.message ?? 'Erreur inconnue.'
+    }
+}
 
-        if (receptionStore.current) {
-            const nextStep = receptionStore.current.currentStep + 1
-            await receptionStore.updateReception(receptionStore.current.id, {
-                dsd: weightData.value?.dsd ?? null,
-                weight: weightData.value?.weight ?? null,
-                currentStep: nextStep
+async function validateWeight() {
+    localErrorMessage.value = null
+
+    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
+
+    try {
+        if (existingEntry?.id) {
+            await updateWeight(existingEntry.id, {
+                type: props.mode,
+                dsd: baseDsd,
+                weight: baseWeight,
+                weighedAt: baseWeighedAt
+            })
+        } else {
+            await createWeight({
+                reception: `/receptions/${storeReception.value.id}`,
+                type: props.mode,
+                dsd: baseDsd,
+                weight: baseWeight,
+                weighedAt: baseWeighedAt
             })
         }
     } catch (error) {
-        errorMessage.value = error.error
-    } finally {
-        isLoading.value = false
+        localErrorMessage.value = error?.data?.error ?? error?.message ?? 'Erreur inconnue.'
+        return
     }
+    // @TODO Voir comment mettre en place la genération du bon, la validation de la reception et le dernier step
+    const nextStep = storeReception.value.currentStep + 1
+    await receptionStore.updateReception(storeReception.value.id, {
+        currentStep: nextStep,
+        isValid: props.mode === 'tare' ? true : storeReception.value.isValid
+    })
+    await receptionStore.loadReception(storeReception.value.id)
 }
+
 </script>

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>

frontend/package-lock.json

@@ -11,7 +11,8 @@
         "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"
@@ -11942,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"
+      }
     }
   }
 }

frontend/package.json

@@ -15,7 +15,8 @@
     "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"

frontend/pages/reception/[[id]].vue

@@ -1,42 +1,36 @@
 <template>
     <div v-if="errorMessage" class="text-red-600">{{ errorMessage }}</div>
-    <div v-if="isLoading" class="text-neutral-600">Chargement...</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 pause</NuxtLink>
+        </div>
         <ReceptionForm v-if="storeReception?.currentStep === 0"/>
-        <ReceptionWeight v-if="storeReception?.currentStep === 1"/>
-        <div v-if="storeReception?.currentStep === 2">Décharger</div>
-        <ReceptionWeight v-if="storeReception?.currentStep === 3"/>
+        <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 { createReception, getReception } from '~/services/reception'
-import type { ReceptionData } from '~/services/dto/reception-data'
 import { useReceptionStore } from '~/stores/reception'
 import { storeToRefs } from 'pinia'
 
 const route = useRoute()
 const router = useRouter()
 
-const isLoading = ref<boolean>(false)
-const errorMessage = ref<string | null>(null)
 const receptionStore = useReceptionStore()
-const { current: storeReception } = storeToRefs(receptionStore)
+const { current: storeReception, isLoading, errorMessage } = storeToRefs(receptionStore)
 
 onMounted(async () => {
-    isLoading.value = true
     const raw = route.params.id
     const idStr = Array.isArray(raw) ? raw[0] : raw
     const id = idStr ? Number(idStr) : null
 
-    try {
-        const result = id === null ? await createReception() : await getReception(id)
-        if (result) {
-            receptionStore.setCurrent(result as ReceptionData)
-        }
-    } catch (error) {
-        errorMessage.value = error.error ?? 'Erreur inconnue.'
+    if (id === null) {
+        await receptionStore.createReception()
+    } else {
+        await receptionStore.loadReception(id)
     }
-    isLoading.value = false
 })
 </script>

frontend/services/dto/reception-data.ts

@@ -1,9 +1,16 @@
 export interface ReceptionData {
     id: number
-    dsd: number | null
     licensePlate: string | null
-    weight: number | 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
+}

frontend/services/dto/weight-data.ts

@@ -1,5 +1,5 @@
 export interface WeightData {
     weight: number | null
     dsd: number | null
-    receptionDate: string
+    weighedAt: string | null
 }

frontend/services/reception.ts

@@ -45,6 +45,6 @@ export async function getWeight(): Promise<WeightData> {
         return await api.get<WeightData>('receptions/weigh')
     } catch (error) {
         console.error(error.message, error)
-        return error
+        throw error
     }
 }

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

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