Finalisation réception marchandise, ajout de composant UI et ajout de fixtures (!7)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [x] Pas de régression
- [ ] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [x] CHANGELOG modifié

Reviewed-on: https://gitea.malio.fr/MALIO-DEV/Ferme/pulls/7
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

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"
@@ -10,20 +16,21 @@
         </div>
         <ReceptionForm v-if="!storeReception || storeReception.currentStep === 0"/>
         <ReceptionWeight v-if="storeReception?.currentStep === 1" mode="gross"/>
-        <ReceptionUnloading v-if="storeReception?.currentStep === 2"/>
+        <ReceptionProductReceived v-if="storeReception?.currentStep === 2"/>
         <ReceptionWeight v-if="storeReception?.currentStep !== null && storeReception?.currentStep >= 3" mode="tare"/>
     </div>
 </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>