Merge branch 'refs/heads/develop' into feat/poc-identification-bovin

# Conflicts:
#	.idea/workspace.xml
#	frontend/i18n/locales/fr.json
#	frontend/layouts/default.vue

frontend/pages/admin/carrier/[[id]].vue

@@ -0,0 +1,100 @@
+
+<template>
+    <form @submit.prevent="validate">
+    <div class="flex items-center justify-between ">
+        <h1 class="text-3xl font-bold uppercase">
+            {{ route.params.id ? 'Modifier transporteur' : 'Ajout transporteur' }}
+        </h1>
+
+        <button
+            type="submit"
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+        >Enregistrer
+        </button>
+    </div>
+
+    <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
+        <UiTextInput
+            label = "nom du fournisseur"
+            id="carrier-name"
+            v-model="form.name"
+        />
+
+        <UiTextInput
+                label = "code fournisseur"
+                id="code-id"
+                v-model="form.code"
+        />
+    </div>
+    </form>
+
+</template>
+
+<script setup lang="ts">
+import {createCarrier, getCarrier, updateCarrier} from "~/services/carrier";
+import type {CarrierData, CarrierFormData} from "~/services/dto/carrier-data";
+const router = useRouter()
+const route = useRoute()
+const idCarrier = Number(route.params.id)
+const isLoading = ref(false)
+const isHydrating = ref(false)
+
+const form = reactive<CarrierFormData>({
+    code:'',
+    name:''
+})
+
+definePageMeta({
+    layout: 'admin'
+})
+
+const hydrateFromUser = (carrier: CarrierData | null) => {
+    if (!carrier) {
+        return
+    }
+    isHydrating.value = true
+    form.name = carrier.name ?? ''
+    form.code = carrier.code ?? ''
+    isHydrating.value = false
+}
+
+watch(
+    () => idCarrier,
+    async (id) => {
+        if (id === null) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const user = await getCarrier(id)
+            hydrateFromUser(user)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+async function validate() {
+
+    const normalizedCarrierCode = form.code.trim()
+    const normalizedCarrierName = form.name.trim()
+
+    const basePayload = {
+        name: normalizedCarrierName,
+        code: normalizedCarrierCode
+
+    }
+
+    if(idCarrier){
+        await updateCarrier(idCarrier, basePayload)
+        navigate()
+        return
+    }
+    await createCarrier(basePayload)
+    navigate()
+}
+
+function navigate(){
+    router.push("/admin/carrier/carrier-list")
+}
+</script>

frontend/pages/admin/carrier/carrier-list.vue

@@ -0,0 +1,51 @@
+<template>
+
+    <div class="flex items-center justify-between ">
+            <h1 class="text-3xl font-bold uppercase">listes des transporteurs</h1>
+            <NuxtLink
+                to="/admin/carrier"
+                class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            >Ajouter
+            </NuxtLink>
+    </div>
+
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-2 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Label</div>
+                <div>Code</div>
+            </div>
+            <div
+                v-for="carrier in carrierList"
+                :key="carrier.id"
+                class="grid grid-cols-2 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+                @click="goToCarrier(carrier.id)"
+                @keydown.enter="goToCarrier(carrier.id)"
+            >
+                <div>{{ carrier.name}}</div>
+                <div>{{ carrier.code }}</div>
+            </div>
+        </div>
+
+</template>
+
+<script setup lang="ts">
+import type {CarrierData} from "~/services/dto/carrier-data";
+import {getCarrierList} from "~/services/carrier";
+
+const carrierList = ref<CarrierData[]>()
+const router = useRouter()
+
+const goToCarrier = (id: number) => {
+    router.push(`/admin/carrier/${id}`)
+}
+
+definePageMeta({
+    layout: 'admin'
+})
+
+onMounted(async () => {
+    carrierList.value = await getCarrierList(false)
+})
+</script>

frontend/pages/admin/customer/[[id]].vue

@@ -0,0 +1,192 @@
+<template>
+    <form @submit.prevent="validate">
+        <div class="flex items-center justify-between">
+            <h1 class="text-3xl font-bold uppercase">
+                {{ customerId ? "Modifications du client" : "Ajout d'un client" }}
+            </h1>
+
+            <button
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                type="submit"
+                :disabled="isLoading || !auth.isAdmin"
+            >
+                {{ customerId ? "Sauvegarder" : "Ajouter" }}
+            </button>
+        </div>
+
+        <div class="grid grid-cols-2 gap-y-8 gap-x-80 mb-10 py-12">
+            <UiTextInput id="customer-label" v-model="form.label" label="Nom du client" :disabled="!auth.isAdmin"/>
+            <UiTextInput id="customer-code" v-model="form.code" label="Code" :disabled="!auth.isAdmin"/>
+        </div>
+
+        <div class="mx-24 mb-4 py-6 border-t border-black"></div>
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-3xl font-bold uppercase">Adresses client</h2>
+            <button
+                type="button"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                :disabled="customerId === null || !auth.isAdmin"
+                @click="goToAddAddress"
+            >
+                Ajouter
+            </button>
+        </div>
+        <div class="overflow-x-auto mb-10">
+            <table class="w-full border-collapse">
+                <thead>
+                <tr class="text-left border-b border-gray-200">
+                    <th class="py-3 pr-4 text-sm uppercase">Libellé</th>
+                    <th class="py-3 pr-4 text-sm uppercase">Rue</th>
+                    <th class="py-3 pr-4 text-sm uppercase">Complément</th>
+                    <th class="py-3 pr-4 text-sm uppercase">Code postal</th>
+                    <th class="py-3 pr-4 text-sm uppercase">Ville</th>
+                    <th class="py-3 pr-4 text-sm uppercase">Pays</th>
+                </tr>
+                </thead>
+                <tbody>
+                <template v-if="form.addresses.length === 0">
+                    <tr>
+                        <td colspan="6" class="py-4 text-slate-400">
+                            Aucune adresse.
+                        </td>
+                    </tr>
+                </template>
+                <template v-else>
+                    <tr
+                        v-for="(address, index) in form.addresses"
+                        :key="address.id ?? index"
+                        class="border-b border-gray-100 hover:bg-slate-50"
+                        :class="auth.isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
+                        @click="goToEditAddress(address.id ?? null)"
+                    >
+                        <td class="py-3 pr-4">{{ address.label || "—" }}</td>
+                        <td class="py-3 pr-4">{{ address.street || "—" }}</td>
+                        <td class="py-3 pr-4">{{ address.street2 || "—" }}</td>
+                        <td class="py-3 pr-4">{{ address.postalCode || "—" }}</td>
+                        <td class="py-3 pr-4">{{ address.city || "—" }}</td>
+                        <td class="py-3 pr-4">{{ address.countryCode || "—" }}</td>
+                    </tr>
+                </template>
+                </tbody>
+            </table>
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref, watch} from "vue"
+import {createCustomer, getCustomer, updateCustomer} from "~/services/customer"
+import type {CustomerData, CustomerFormData, CustomerPayload} from "~/services/dto/customer-data"
+import {useAuthStore} from "~/stores/auth"
+
+definePageMeta({layout: "admin"})
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+
+const resolveId = (param: unknown) => {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) return null
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+const customerId = computed(() => resolveId(route.params.id))
+const isLoading = ref(false)
+const form = reactive<CustomerFormData>({
+    label: "",
+    code: "",
+    addresses: [],
+})
+
+const goToAddAddress = () => {
+    if (customerId.value === null || !auth.isAdmin) return
+    router.push({
+        path: "/admin/customer/address",
+        query: {
+            customerId: String(customerId.value),
+        },
+    })
+}
+
+const goToEditAddress = (addressId: number | null) => {
+    if (customerId.value === null || addressId === null || !auth.isAdmin) return
+    router.push({
+        path: "/admin/customer/address",
+        query: {
+            customerId: String(customerId.value),
+            addressId: String(addressId),
+        },
+    })
+}
+
+const hydrateFromCustomer = (customer: CustomerData | null) => {
+    if (!customer) return
+    form.label = customer.label ?? ""
+    form.code = customer.code ?? ""
+    if (!Array.isArray(customer.addresses) || customer.addresses.length === 0) {
+        form.addresses = []
+        return
+    }
+    if (typeof customer.addresses[0] === "string") {
+        form.addresses = []
+        return
+    }
+
+    form.addresses = customer.addresses.map((address) => ({
+        id: address.id ?? null,
+        label: address.label ?? "",
+        street: address.street ?? "",
+        street2: address.street2 ?? null,
+        postalCode: address.postalCode ?? "",
+        city: address.city ?? "",
+        countryCode: address.countryCode ?? "",
+    }))
+}
+
+watch(
+    () => customerId.value,
+    async (id) => {
+        if (id === null) return
+        isLoading.value = true
+        try {
+            const customer = await getCustomer(id)
+            hydrateFromCustomer(customer)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+
+async function validate() {
+    if (isLoading.value) return
+    if (!auth.isAdmin) return
+    isLoading.value = true
+
+    try {
+        const label = form.label.trim()
+        const code = form.code.trim()
+
+        const customerPayload: CustomerPayload = {
+            label,
+            code,
+        }
+        let targetId: number | null = null
+
+        if (customerId.value !== null) {
+            await updateCustomer(customerId.value, customerPayload)
+            targetId = customerId.value
+        } else {
+            const created = await createCustomer(customerPayload)
+            targetId = created.id
+        }
+
+        if (targetId !== null) {
+            await router.push(`/admin/customer/${targetId}`)
+        }
+    } finally {
+        isLoading.value = false
+    }
+}
+</script>

frontend/pages/admin/customer/address.vue

@@ -0,0 +1,49 @@
+<template>
+    <Address type="customer" :address="address" @validate="validate"/>
+</template>
+
+<script setup lang="ts">
+import type { AddressData, AddressPayload } from "~/services/address"
+import { createAddress, getAddress, updateAddress } from "~/services/address"
+import { getCustomer, updateCustomer } from "~/services/customer"
+import type { CustomerData } from "~/services/dto/customer-data"
+
+definePageMeta({ layout: "admin" })
+
+const route = useRoute()
+const router = useRouter()
+const customerId = computed(() => Number(route.query.customerId))
+const customer = ref<CustomerData | null>(null)
+const addressId = computed(() => (route.query.addressId !== undefined ? Number(route.query.addressId) : null))
+const address = ref<AddressData | null>(null)
+
+const validate = async (payload: AddressPayload) => {
+    try {
+        if (addressId.value !== null) {
+            await updateAddress(addressId.value, payload)
+        } else {
+            await addAddress(payload)
+        }
+    } finally {
+        await router.push("/admin/customer/" + customerId.value)
+    }
+}
+
+const addAddress = async (payload: AddressPayload) => {
+    const response: AddressData = await createAddress(payload)
+    const addressIRI = `/api/addresses/${response.id}`
+    const existingIris = (customer.value?.addresses ?? [])
+        .map((item: any) => (typeof item === "string" ? item : `/api/addresses/${item.id}`))
+        .filter((iri: string | null) => Boolean(iri)) as string[]
+    const next = [...new Set([...existingIris, addressIRI])]
+
+    return await updateCustomer(customerId.value, { addresses: next })
+}
+
+onMounted(async () => {
+    customer.value = await getCustomer(customerId.value)
+    if (addressId.value !== null) {
+        address.value = await getAddress(addressId.value)
+    }
+})
+</script>

frontend/pages/admin/customer/customer-list.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="flex items-center justify-between">
+        <h1 class="text-3xl font-bold uppercase">Liste des Clients</h1>
+        <NuxtLink
+            to="/admin/customer"
+            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
+            @click="handleAddClick"
+        >
+            Ajouter
+        </NuxtLink>
+    </div>
+
+    <div v-if="auth.isAdmin" class="mt-6 border border-slate-200 mb-16">
+        <div class="max-h-96 overflow-y-auto">
+            <div
+                class="sticky top-0 z-10 grid grid-cols-7 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
+            >
+                <div>Nom</div>
+                <div>Code</div>
+                <div>Rue</div>
+                <div>Complément</div>
+                <div>Code Postal</div>
+                <div>Ville</div>
+                <div>Pays</div>
+            </div>
+
+            <div v-if="customerList.length === 0" class="px-4 py-6 text-slate-400">
+                Aucun fournisseur.
+            </div>
+
+            <div v-for="customer in customerList" :key="customer.id">
+                <div
+                    v-if="!customer.addresses || customer.addresses.length === 0"
+                    class="grid grid-cols-7 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
+                    @click="goToCustomer(customer.id)"
+                >
+                    <div class="truncate">{{ customer.label }}</div>
+                    <div class="truncate">{{ customer.code }}</div>
+                    <div class="col-span-1">Pas d'adresse</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                </div>
+
+                <template v-else-if="customer.addresses.length > 0">
+                    <div
+                        v-for="(address, idx) in customer.addresses"
+                        :key="address.id ?? `${customer.id}-${idx}-${address.street}-${address.postalCode}`"
+                        class="grid grid-cols-7 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
+                        :class="idx > 0 ? 'pl-4 border-l-4 border-l-slate-200 bg-slate-50' : ''"
+                        @click="goToCustomer(customer.id)"
+                    >
+                        <div class="truncate">
+                            {{ idx === 0 ? customer.label : "↳" }}
+                        </div>
+                        <div class="truncate">{{ idx === 0 ? customer.code : ""  }}</div>
+                        <div class="truncate">{{ address.street || "—" }}</div>
+                        <div class="truncate">{{ address.street2 || "—" }}</div>
+                        <div>{{ address.postalCode || "—"  }}</div>
+                        <div class="uppercase truncate">{{ address.city || "—"  }}</div>
+                        <div class="uppercase truncate">{{ address.countryCode || "—" }}</div>
+                    </div>
+                </template>
+
+                <template v-else>
+                    <div
+                        class="grid grid-cols-7 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
+                        @click="goToCustomer(customer.id)"
+                    >
+                        <div class="truncate">{{ customer.label }}</div>
+                        <div class="truncate">{{ customer.code }}</div>
+                        <div class="col-span-5 text-slate-400">
+                            Adresses non chargées
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+    <div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
+        Accès réservé aux administrateurs.
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getCustomerList } from "~/services/customer"
+import type { CustomerData } from "~/services/dto/customer-data"
+import { useAuthStore } from "~/stores/auth"
+
+definePageMeta({ layout: "admin" })
+
+const customerList = ref<CustomerData[]>([])
+const router = useRouter()
+const auth = useAuthStore()
+
+const goToCustomer = (id: number) => {
+    if (!auth.isAdmin) return
+    router.push(`/admin/customer/${id}`)
+}
+
+const handleAddClick = (event: Event) => {
+    if (auth.isAdmin) return
+    event.preventDefault()
+}
+
+onMounted(async () => {
+    if (!auth.isAdmin) return
+    customerList.value = await getCustomerList()
+})
+</script>

frontend/pages/admin/dashboard.vue

@@ -0,0 +1,7 @@
+<template>
+</template>
+<script setup lang="ts">
+definePageMeta({
+    layout: 'admin'
+})
+</script>

frontend/pages/admin/supplier/[[id]].vue

@@ -0,0 +1,197 @@
+<template>
+    <form @submit.prevent="validate">
+        <div class="flex items-center justify-between">
+            <h1 class="text-3xl font-bold uppercase">
+                {{ supplierId ? "Modifications du fournisseur" : "Ajout d'un fournisseur" }}
+            </h1>
+
+            <button
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                type="submit"
+                :disabled="isLoading || !auth.isAdmin"
+            >
+                {{ supplierId ? "Sauvegarder" : "Ajouter" }}
+            </button>
+        </div>
+
+        <div class="grid grid-cols-2 gap-y-8 gap-x-80 mb-10 py-12">
+            <UiTextInput id="supplier-name" v-model="form.name" label="Nom du fournisseur" :disabled="!auth.isAdmin"/>
+            <UiTextInput id="supplier-email" v-model="form.email" label="Email" :disabled="!auth.isAdmin"/>
+            <UiTextInput id="supplier-phone" v-model="form.phone" label="Téléphone" :disabled="!auth.isAdmin"/>
+        </div>
+
+        <div class="mx-24 mb-4 py-6 border-t border-black"></div>
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-3xl font-bold uppercase">Adresses fournisseur</h2>
+            <button
+                type="button"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                :disabled="supplierId === null || !auth.isAdmin"
+                @click="goToAddAddress"
+            >
+                Ajouter
+            </button>
+        </div>
+        <div class="overflow-x-auto mb-10">
+            <table class="w-full border-collapse">
+                <thead>
+                <tr class="text-left border-b border-gray-200">
+                    <th class="py-3 pr-4 text-sm uppercase">Libellé</th>
+                    <th class="py-3 pr-4 text-sm uppercase">Rue</th>
+                    <th class="py-3 pr-4 text-sm uppercase">Complément</th>
+                    <th class="py-3 pr-4 text-sm uppercase">Code postal</th>
+                    <th class="py-3 pr-4 text-sm uppercase">Ville</th>
+                    <th class="py-3 pr-4 text-sm uppercase">Pays</th>
+                </tr>
+                </thead>
+                <tbody>
+                <template v-if="form.addresses.length === 0">
+                    <tr>
+                        <td colspan="6" class="py-4 text-slate-400">
+                            Aucune adresse.
+                        </td>
+                    </tr>
+                </template>
+                <template v-else>
+                    <tr
+                        v-for="(address, index) in form.addresses"
+                        :key="address.id ?? index"
+                        class="border-b border-gray-100 hover:bg-slate-50"
+                        :class="auth.isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
+                        @click="goToEditAddress(address.id ?? null)"
+                    >
+                        <td class="py-3 pr-4">{{ address.label || "—" }}</td>
+                        <td class="py-3 pr-4">{{ address.street || "—" }}</td>
+                        <td class="py-3 pr-4">{{ address.street2 || "—" }}</td>
+                        <td class="py-3 pr-4">{{ address.postalCode || "—" }}</td>
+                        <td class="py-3 pr-4">{{ address.city || "—" }}</td>
+                        <td class="py-3 pr-4">{{ address.countryCode || "—" }}</td>
+                    </tr>
+                </template>
+                </tbody>
+            </table>
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref, watch} from "vue"
+import {createSupplier, getSupplier, updateSupplier} from "~/services/supplier"
+import type {SupplierData, SupplierFormData, SupplierPayload} from "~/services/dto/supplier-data"
+import {useAuthStore} from "~/stores/auth"
+
+definePageMeta({layout: "admin"})
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+
+const resolveId = (param: unknown) => {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) return null
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+const supplierId = computed(() => resolveId(route.params.id))
+const isLoading = ref(false)
+const form = reactive<SupplierFormData>({
+    name: "",
+    email: "",
+    phone: "",
+    addresses: [],
+})
+
+const goToAddAddress = () => {
+    if (supplierId.value === null || !auth.isAdmin) return
+    router.push({
+        path: "/admin/supplier/address",
+        query: {
+            supplierId: String(supplierId.value),
+            fromSupplier: "1",
+        },
+    })
+}
+
+const goToEditAddress = (addressId: number | null) => {
+    if (supplierId.value === null || addressId === null || !auth.isAdmin) return
+    router.push({
+        path: "/admin/supplier/address",
+        query: {
+            supplierId: String(supplierId.value),
+            addressId: String(addressId),
+            fromSupplier: "1",
+        },
+    })
+}
+
+const hydrateFromSupplier = (supplier: SupplierData | null) => {
+    if (!supplier) return
+    form.name = supplier.name ?? ""
+    form.email = supplier.email ?? ""
+    form.phone = supplier.phone ?? ""
+    if (!Array.isArray(supplier.addresses) || supplier.addresses.length === 0) {
+        form.addresses = []
+        return
+    }
+    if (typeof supplier.addresses[0] === "string") {
+        form.addresses = []
+        return
+    }
+
+    form.addresses = supplier.addresses.map((address) => ({
+        id: address.id ?? null,
+        label: address.label ?? "",
+        street: address.street ?? "",
+        street2: address.street2 ?? null,
+        postalCode: address.postalCode ?? "",
+        city: address.city ?? "",
+        countryCode: address.countryCode ?? "",
+    }))
+}
+
+watch(
+    () => supplierId.value,
+    async (id) => {
+        if (id === null) return
+        isLoading.value = true
+        try {
+            const supplier = await getSupplier(id)
+            hydrateFromSupplier(supplier)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+
+async function validate() {
+    if (isLoading.value) return
+    if (!auth.isAdmin) return
+    isLoading.value = true
+
+    try {
+        const name = form.name.trim()
+        const email = (form.email ?? "").trim() || null
+        const phone = (form.phone ?? "").trim() || null
+
+        const supplierPayload: SupplierPayload = {
+            name,
+            email,
+            phone,
+        }
+        let targetId: number | null = null
+
+        if (supplierId.value !== null) {
+            await updateSupplier(supplierId.value, supplierPayload)
+            targetId = supplierId.value
+        } else {
+            const created = await createSupplier(supplierPayload)
+            targetId = created.id
+        }
+
+        await router.push(`/admin/supplier/${targetId}`)
+    } finally {
+        isLoading.value = false
+    }
+}
+</script>

frontend/pages/admin/supplier/address.vue

@@ -0,0 +1,47 @@
+<template>
+    <Address type="supplier" :address="address" @validate="validate"/>
+</template>
+
+<script setup lang="ts">
+import type {AddressData, AddressPayload} from "~/services/address";
+import {createAddress, getAddress, updateAddress} from "~/services/address";
+import {getSupplier, updateSupplier} from "~/services/supplier";
+import type {SupplierData} from "~/services/dto/supplier-data";
+
+definePageMeta({ layout: "admin" })
+
+const route = useRoute()
+const router = useRouter()
+const supplierId = computed(() => { return Number(route.query.supplierId) })
+const supplier = ref<SupplierData|null>(null);
+const addressId = computed(() => { return route.query.addressId !== undefined ? Number(route.query.addressId) : null })
+const address = ref<AddressData|null>(null)
+
+const validate = async (address: AddressPayload) => {
+    try {
+        if (addressId.value !== null) {
+            await updateAddress(addressId.value, address)
+        } else {
+            await addAddress(address)
+        }
+    } finally {
+        await router.push('/admin/supplier/' + supplierId.value)
+    }
+}
+
+const addAddress = async (address: AddressPayload) => {
+    const response: AddressData = await createAddress(address)
+    const addressIRI = `/api/addresses/${response.id}`
+    const existingIris = (supplier.value.addresses ?? []).map((item: any) => `/api/addresses/${item.id}`)
+    const next = [...new Set([...existingIris, addressIRI])]
+
+    return await updateSupplier(supplierId.value, { addresses: next })
+}
+
+onMounted(async () => {
+    supplier.value = await getSupplier(supplierId.value)
+    if (addressId.value !== null) {
+        address.value = await getAddress(addressId.value)
+    }
+})
+</script>

frontend/pages/admin/supplier/supplier-list.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="flex items-center justify-between">
+        <h1 class="text-3xl font-bold uppercase">Liste des fournisseurs</h1>
+        <NuxtLink
+            to="/admin/supplier"
+            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
+            @click="handleAddClick"
+        >
+            Ajouter
+        </NuxtLink>
+    </div>
+
+    <div v-if="auth.isAdmin" class="mt-6 border border-slate-200 mb-16">
+        <div class="max-h-96 overflow-y-auto">
+            <div
+                class="sticky top-0 z-10 grid grid-cols-7 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
+            >
+                <div>Nom</div>
+                <div>Mail</div>
+                <div>Rue</div>
+                <div>Complément</div>
+                <div>Code Postal</div>
+                <div>Ville</div>
+                <div>Pays</div>
+            </div>
+
+            <div v-if="supplierList.length === 0" class="px-4 py-6 text-slate-400">
+                Aucun fournisseur.
+            </div>
+
+            <div v-for="supplier in supplierList" :key="supplier.id">
+                <div
+                    v-if="!supplier.addresses || supplier.addresses.length === 0"
+                    class="grid grid-cols-7 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
+                    @click="goToSupplier(supplier.id)"
+                >
+                    <div class="truncate">{{ supplier.name }}</div>
+                    <div class="truncate">{{ supplier.email }}</div>
+                    <div class="col-span-1">Pas d'adresse</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                </div>
+
+                <template v-else-if="supplier.addresses.length > 0">
+                    <div
+                        v-for="(address, idx) in supplier.addresses"
+                        :key="address.id ?? `${supplier.id}-${idx}-${address.street}-${address.postalCode}`"
+                        class="grid grid-cols-7 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
+                        :class="idx > 0 ? 'pl-4 border-l-4 border-l-slate-200 bg-slate-50' : ''"
+                        @click="goToSupplier(supplier.id)"
+                    >
+                        <div class="truncate">
+                            {{ idx === 0 ? supplier.name : "↳" }}
+                        </div>
+                        <div class="truncate">{{ idx === 0 ? supplier.email : ""  }}</div>
+                        <div class="truncate">{{ address.street || "—" }}</div>
+                        <div class="truncate">{{ address.street2 || "—" }}</div>
+                        <div>{{ address.postalCode || "—"  }}</div>
+                        <div class="uppercase truncate">{{ address.city || "—"  }}</div>
+                        <div class="uppercase truncate">{{ address.countryCode || "—" }}</div>
+                    </div>
+                </template>
+
+                <template v-else>
+                    <div
+                        class="grid grid-cols-7 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
+                        @click="goToSupplier(supplier.id)"
+                    >
+                        <div class="truncate">{{ supplier.name }}</div>
+                        <div class="truncate">{{ supplier.email }}</div>
+                        <div class="col-span-5 text-slate-400">
+                            Adresses non chargées
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+    <div v-else class="mt-6 border border-slate-200 mb-16 px-4 py-6 text-slate-400">
+        Accès réservé aux administrateurs.
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getSupplierList } from "~/services/supplier"
+import type { SupplierData } from "~/services/dto/supplier-data"
+import { useAuthStore } from "~/stores/auth"
+
+definePageMeta({ layout: "admin" })
+
+const supplierList = ref<SupplierData[]>([])
+const router = useRouter()
+const auth = useAuthStore()
+
+const goToSupplier = (id: number) => {
+    if (!auth.isAdmin) return
+    router.push(`/admin/supplier/${id}`)
+}
+
+const handleAddClick = (event: Event) => {
+    if (auth.isAdmin) return
+    event.preventDefault()
+}
+
+onMounted(async () => {
+    if (!auth.isAdmin) return
+    supplierList.value = await getSupplierList()
+})
+</script>

frontend/pages/admin/user/[[id]].vue

@@ -0,0 +1,127 @@
+<template>
+    <form @submit.prevent="validate">
+        <div
+            class="flex items-center justify-between gap-10">
+            <h1 class="text-3xl font-bold uppercase">
+                {{ userId ? "Modifications de l'utilisateur" : "Ajout d'un utilisateur" }}
+            </h1>
+            <button
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                type="submit"
+            >
+                {{ userId ? 'Sauvegarder' : 'Ajouter' }}
+            </button>
+        </div>
+
+        <div class="grid gap-y-16 gap-x-40 mb-16">
+            <UiTextInput
+                id="user-name"
+                v-model="form.username"
+                label="Nom de l'utilisateur"
+            />
+
+            <UiSelect
+                id="user-role"
+                v-model="form.role"
+                label="Rôle de l'utilisateur"
+                :options="ROLE"
+            />
+            <UiTextInput
+                id="user-password"
+                v-model="form.password"
+                label="Mot de passe"
+                type="password"
+
+            />
+
+        </div>
+    </form>
+</template>
+<script setup lang="ts">
+definePageMeta({
+    layout: 'admin'
+})
+
+import {computed, reactive, ref, watch} from 'vue'
+import {ROLE} from '~/utils/constants'
+import {createUser, updateUser, getUser} from '~/services/auth'
+import type {UserData, UserFormData, UserPayload} from '~/services/dto/user-data'
+
+const route = useRoute()
+const router = useRouter()
+const userId = computed(() => resolveUserId(route.params.id))
+const isLoading = ref(false)
+const isHydrating = ref(false)
+
+const resolveUserId = (param: unknown) => {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) {
+        return null
+    }
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+
+
+const form = reactive<UserFormData>({
+    username: '',
+    password: '',
+    role: ''
+})
+
+const hydrateFromUser = (user: UserData | null) => {
+    if (!user) {
+        return
+    }
+    isHydrating.value = true
+    form.username = user.username ?? ''
+    const roles = user.roles ?? []
+    const hasAdmin = roles.includes("ROLE_ADMIN")
+    form.role = hasAdmin ? "ROLE_ADMIN" : "ROLE_USER"
+    form.password = ''
+    isHydrating.value = false
+}
+
+watch(
+    () => userId.value,
+    async (id) => {
+        if (id === null) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const user = await getUser(id)
+            hydrateFromUser(user)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+
+async function validate() {
+
+    const normalizedUsername = form.username.trim()
+    const normalizedRole = form.role.trim()
+    const normalizedPassword = form.password.trim()
+
+    const basePayload: UserPayload = {
+        username: normalizedUsername,
+        roles: normalizedRole ? [normalizedRole] : undefined,
+    }
+    if (normalizedPassword) {
+        basePayload.password = normalizedPassword
+    }
+
+    if (userId.value) {
+        await updateUser(userId.value, basePayload)
+        await router.push(`/admin/user/list/`)
+        return
+    }
+
+    const created = await createUser(basePayload)
+    if (created) {
+        await router.push(`/admin/user/list/`)
+    }
+}
+</script>

frontend/pages/admin/user/list.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="flex items-center justify-between">
+        <h1 class="text-3xl font-bold uppercase">Liste des utilisateurs</h1>
+        <NuxtLink
+            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            @click="router.push('/admin/user/')"
+        >
+            Ajouter
+        </NuxtLink>
+
+    </div>
+
+    <div>
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-3 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Username</div>
+                <div>Role</div>
+            </div>
+            <div
+                v-for="user in userList"
+                :key="user.id"
+                class="grid grid-cols-3 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t items-center"
+                role="button"
+                tabindex="0"
+                @click="goToUser(user.id)"
+            >
+                <div>
+                    {{ user.username }}
+                </div>
+                <div>
+                    {{ user.roles?.join(', ') || ' ---' }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+definePageMeta({
+    layout: 'admin'
+})
+
+import type {UserData} from "~/services/dto/user-data";
+import {getAdminUsers, getUsers} from "~/services/auth";
+
+const userList = ref<UserData[]>([])
+const router = useRouter()
+
+const goToUser = (id: number) => {
+    router.push(`/admin/user/${id}`)
+}
+
+onMounted(async () => {
+    userList.value = await getAdminUsers()
+})
+</script>

frontend/pages/index.vue

@@ -1,55 +1,15 @@
+<script setup lang="ts">
+</script>
 <template>
-    <div>
-        <h1 class="text-3xl font-bold">Liste des receptions</h1>
-        <div class="mt-6 border border-slate-200">
-            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
-                <div>ID</div>
-                <div>Immatriculation</div>
-                <div>Pesée plein</div>
-                <div>Pesée vide</div>
-                <div>Etape</div>
-                <div>Date</div>
-            </div>
-            <div
-                v-for="reception in receptionList"
-                :key="reception.id"
-                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
-                role="button"
-                tabindex="0"
-                @click="goToReception(reception.id)"
-                @keydown.enter="goToReception(reception.id)"
-            >
-                <div>{{ reception.id }}</div>
-                <div>{{ reception.licensePlate }}</div>
-                <div>{{ formatWeighing(reception, 'gross') }}</div>
-                <div>{{ formatWeighing(reception, 'tare') }}</div>
-                <div>{{ reception.currentStep }}</div>
-                <div>{{ reception.receptionDate }}</div>
-            </div>
-        </div>
+    <div class="flex flex-wrap justify-center mt-8 gap-8 mb-8 md:mb-0">
+        <card-link label="NOUVELLE RÉCEPTION" link="/reception" iconName="mdi:truck-outline" />
+        <card-link label="NOUVELLE EXPÉDITION" link="/shipment" iconName="mdi:truck-fast-outline" />
+        <card-link label="PLAN DE SITE" link="/" iconName="mdi:warehouse" />
+        <card-link label="RÉCEPTIONS EN ATTENTE" link="/reception/waiting-reception" iconName="mdi:truck-remove-outline" />
+        <card-link label="EXPÉDITIONS EN ATTENTE" link="/shipment/waiting-shipment" iconName="mdi:truck-cargo-container" />
+        <card-link label="CASES" link="/" iconName="mdi:cube-outline" />
+        <card-link label="RÉCEPTIONS FINIES" link="/reception/finish-reception" iconName="mdi:truck-check-outline" />
+        <card-link label="EXPÉDITIONS FINIES" link="/shipment/finish-shipment" iconName="mdi:truck-delivery-outline" />
+        <card-link label="PASSEPORT DU BOVIN" link="/" iconName="mdi:cow" />
     </div>
 </template>
-
-<script setup lang="ts">
-import type {ReceptionData} from "~/services/dto/reception-data";
-import {getReceptionList} from "~/services/reception";
-
-const receptionList = ref<ReceptionData[]>()
-const router = useRouter()
-
-const goToReception = (id: number) => {
-    router.push(`/reception/${id}`)
-}
-
-const formatWeighing = (reception: ReceptionData, type: 'gross' | 'tare') => {
-    const entry = reception.weights?.find((weight) => weight.type === type)
-    if (!entry || entry.weight == null || entry.dsd == null) {
-        return '—'
-    }
-    return `${entry.weight} kg / ${entry.dsd} dsd`
-}
-
-onMounted(async () => {
-    receptionList.value = await getReceptionList()
-})
-</script>

frontend/pages/login.vue

@@ -46,7 +46,8 @@
       >
         Connexion
       </button>
-    </form>
+          <p class="font-bold">v{{ version }}</p>
+      </form>
   </div>
 </template>
 
@@ -57,6 +58,7 @@ import { useAuthStore } from '~/stores/auth'
 
 const router = useRouter()
 const auth = useAuthStore()
+const { version } = useAppVersion()
 
 definePageMeta({
   layout: 'auth'

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="flex justify-between h-[52px] mb-[80px]">
+        <div class="flex justify-between h-[52px] mt-6 mb-[80px]">
             <div class="flex flex-1 mr-16">
                 <UiStepper
                     :labels="RECEPTION_STEP_LABELS"
@@ -16,7 +16,12 @@
         </div>
         <ReceptionForm v-if="!storeReception || storeReception.currentStep === 0"/>
         <ReceptionWeight v-if="storeReception?.currentStep === 1" mode="gross"/>
-        <ReceptionProductReceived v-if="storeReception?.currentStep === 2"/>
+        <ReceptionProductReceived
+            v-if="storeReception?.currentStep === 2 &&
+            receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"/>
+        <ReceptionBovineReceived
+            v-if="storeReception?.currentStep === 2 &&
+            receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"/>
         <ReceptionWeight v-if="storeReception?.currentStep !== null && storeReception?.currentStep >= 3" mode="tare"/>
     </div>
 </template>
@@ -25,6 +30,7 @@
 import {useReceptionStore} from '~/stores/reception'
 import {storeToRefs} from 'pinia'
 import {RECEPTION_STEP_LABELS} from '~/constants/steps'
+import {RECEPTION_TYPE_CODES} from "~/utils/constants";
 
 const route = useRoute()
 const router = useRouter()

frontend/pages/reception/finish-reception.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="flex items-center justify-start gap-10">
+            <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44" />
+            <h1 class="text-3xl font-bold uppercase">listes des réceptions finie</h1>
+    </div>
+
+    <div class="ps-20 " >
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Numéro</div>
+                <div>Date</div>
+                <div>Fournisseur</div>
+                <div>Adresse</div>
+                <div>Type réception</div>
+                <div>Poids</div>
+            </div>
+            <div
+                v-for="reception in receptionList"
+                :key="reception.id"
+                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+                @click="goToReception(reception.id)"
+            >
+                <div>{{ reception.identificationNumber}}</div>
+                <div>{{ reception.receptionDate}}</div>
+                <div>{{ reception.supplier?.name }}</div>
+                <div>{{ reception.address?.fullAddress }}</div>
+                <div>{{ reception.receptionType?.label }}</div>
+                <div>{{ formatWeighing(reception, 'gross') }} | {{ formatWeighing(reception, 'tare') }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {ReceptionData} from "~/services/dto/reception-data";
+import {getReceptionList} from "~/services/reception";
+
+const receptionList = ref<ReceptionData[]>()
+const router = useRouter()
+
+const formatWeighing = (reception: ReceptionData, type: 'gross' | 'tare') => {
+    const entry = reception.weights?.find((weight) => weight.type === type)
+    if (!entry || entry.weight == null || entry.dsd == null) {
+        return '—'
+    }
+    return `${entry.weight} kg`
+}
+
+const goToReception = (id: number) => {
+    router.push(`/reception/update/${id}`)
+}
+
+onMounted(async () => {
+    receptionList.value = await getReceptionList(true)
+})
+</script>

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

@@ -0,0 +1,567 @@
+<template>
+
+    <form @submit.prevent="validate">
+        <div class="flex items-center justify-between mt-12 mb-8 ">
+            <h1 class="font-bold text-5xl uppercase">Réception {{ receptionLoad?.identificationNumber }}</h1>
+        </div>
+        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-12">
+            <!--    Nom de l'utilisateur       -->
+            <UiSelect
+                id="reception-user"
+                :disabled="!auth.isAdmin"
+                v-model="form.userId"
+                label="Nom de l'utilisateur"
+                :options="users.map((user) => ({
+                    value: String(user.id),
+                    label: user.username
+                }))"
+                :loading="isLoadingUsers"
+                wrapper-class="col-start-1 row-start-1"
+            />
+            <!--    Date de réception        -->
+            <UiDateInput
+                id="reception-date"
+                :disabled="!auth.isAdmin"
+                v-model="form.receptionDate"
+                label="Date de réception"
+                wrapper-class="col-start-1 row-start-2"
+            />
+            <!--    Fournisseur        -->
+            <UiSelect
+                id="reception-supplier"
+                v-model="form.supplierId"
+                :disabled="!auth.isAdmin"
+                label="Fournisseur"
+                :options="suppliers.map((supplier) => ({
+                    value: String(supplier.id),
+                    label: supplier.name
+                }))"
+                :loading="isLoadingSuppliers"
+                wrapper-class="col-start-1 row-start-3"
+            />
+            <!--    Adresse fournisseur        -->
+            <UiSelect
+                id="reception-address"
+                v-model="form.addressId"
+                label="Adresse"
+                :options="supplierAddresses.map((address) => ({
+                    value: String(address.id),
+                    label: address.fullAddress
+                }))"
+                :disabled="(isLoadingSuppliers || supplierAddresses.length === 0) && !auth.isAdmin"
+                wrapper-class="col-start-1 row-start-4"
+            />
+            <!--    Camion        -->
+            <UiSelect
+                id="reception-truck"
+                v-model="form.truckId"
+                :disabled="!auth.isAdmin"
+                label="Camion"
+                :options="trucks.map((truck) => ({
+                    value: String(truck.id),
+                    label: truck.name
+                }))"
+                :loading="isLoadingTrucks"
+                wrapper-class="col-start-2 row-start-1"
+            />
+            <!--    Transporteur        -->
+            <UiSelect
+                id="reception-carrier"
+                v-model="form.carrierId"
+                label="Transporteur"
+                :disabled="!auth.isAdmin"
+                :options="carriers.map((carrier) => ({
+                    value: String(carrier.id),
+                    label: carrier.name
+                }))"
+                :loading="isLoadingCarriers"
+                select-class="h-[34px]"
+                wrapper-class="col-start-2 row-start-2"
+            />
+            <!--    Chauffeur (LIOT)        -->
+            <UiSelect
+                id="reception-driver"
+                v-model="form.driverId"
+                :disabled="!auth.isAdmin"
+                label="Nom du chauffeur si LIOT"
+                :options="filteredDrivers.map((driver) => ({
+                    value: String(driver.id),
+                    label: driver.name
+                }))"
+                :loading="isLoadingDrivers"
+                wrapper-class="col-start-2 row-start-3"
+            />
+            <!--    Plaque d'immatriculation       -->
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
+                <UiLicensePlateInput
+                    :disabled="!auth.isAdmin"
+                    v-model="form.licensePlate"
+                    v-model:allowAny="allowAnyLicensePlate"
+                />
+            </div>
+            <!--    Immatriculation (LIOT)        -->
+            <UiSelect
+                v-if="isLiotCarrier"
+                id="reception-vehicle"
+                v-model="form.vehicleId"
+                label="Immatriculation"
+                :options="filteredVehicles.map((vehicle) => ({
+                    value: String(vehicle.id),
+                    label: vehicle.plate
+                }))"
+                :loading="isLoadingVehicles"
+                :disabled="(isLoadingVehicles || filteredVehicles.length === 0) && !auth.isAdmin"
+                wrapper-class="col-start-2 row-start-4"
+            />
+        </div>
+        <div class="flex justify-center mb-2">
+            <button
+                v-if="auth.isAdmin"
+                type="submit"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] mb-16"
+
+            >
+                Enregistrer
+            </button>
+        </div>
+            <div class="flex justify-evenly gap-y-8 gap-x-40 mb-8 border-b border-slate-400">
+                <h1
+                    class="font-bold text-3xl uppercase col-start-1 row-start-1 cursor-pointer"
+                    :class="activeTab === 'weights' ? 'underline' : ''"
+                    @click="activeTab = 'weights'"
+                >
+                    pesées
+                </h1>
+                <h1
+                    class="font-bold text-3xl uppercase col-start-2 row-start-1 cursor-pointer"
+                    :class="activeTab === 'merchandise' ? 'underline' : ''"
+                    @click="activeTab = 'merchandise'"
+                >
+                    {{ isMerchandise ? "Marchandise" : "Bovins" }}
+                </h1>
+            </div>
+
+            <update-weight
+                v-if="activeTab === 'weights'"
+                :idReception="idReception"
+                :disabled="!auth.isAdmin"
+            />
+
+            <update-merchandise
+                v-else-if="activeTab === 'merchandise' && isMerchandise"
+                :idReception="idReception"
+                :disabled="!auth.isAdmin"
+            />
+
+            <update-bovin
+                v-else
+                :idReception="idReception"
+                :disabled="!auth.isAdmin"
+            />
+    </form>
+</template>
+
+<script setup lang="ts">
+import {useReceptionStore} from '~/stores/reception'
+import type {UserData} from '~/services/dto/user-data'
+import {getUsers} from '~/services/auth'
+import {useAuthStore} from '~/stores/auth'
+import type {SupplierData} from '~/services/dto/supplier-data'
+import {getSupplierList} from '~/services/supplier'
+import type {TruckData} from '~/services/dto/truck-data'
+import {getTruckList} from '~/services/truck'
+import type {CarrierData} from '~/services/dto/carrier-data'
+import {getCarrierList} from '~/services/carrier'
+import type {DriverData} from '~/services/dto/driver-data'
+import {getDriverList} from '~/services/driver'
+import type {VehicleData} from '~/services/dto/vehicle-data'
+import {getVehicleList} from '~/services/vehicle'
+import {SUPPLIER_CODE} from "~/utils/constants";
+import {deleteReceptionBovine, getReceptionBovineList} from "~/services/reception-bovine";
+import type {ReceptionData, ReceptionFormData} from "~/services/dto/reception-data";
+import {getReception} from "~/services/reception";
+import UpdateWeight from "~/components/reception/update-weight.vue";
+import UpdateMerchandise from "~/components/reception/update-merchandise.vue";
+import UpdateBovin from "~/components/reception/update-bovin.vue";
+
+const activeTab = ref<'weights' | 'merchandise'>('weights')
+const router = useRouter()
+const receptionStore = useReceptionStore()
+const form = reactive<ReceptionFormData>({
+    licensePlate: '',
+    receptionDate: new Date().toISOString().slice(0, 10),
+    receptionTypeId: '',
+    userId: '',
+    supplierId: '',
+    addressId: '',
+    truckId: '',
+    carrierId: '',
+    driverId: '',
+    vehicleId: ''
+})
+const allowAnyLicensePlate = ref(false)
+const isLoading = ref(false)
+const users = ref<UserData[]>([])
+const isLoadingUsers = ref(false)
+const suppliers = ref<SupplierData[]>([])
+const isLoadingSuppliers = ref(false)
+const trucks = ref<TruckData[]>([])
+const isLoadingTrucks = ref(false)
+const carriers = ref<CarrierData[]>([])
+const isLoadingCarriers = ref(false)
+const drivers = ref<DriverData[]>([])
+const isLoadingDrivers = ref(false)
+const vehicles = ref<VehicleData[]>([])
+const isLoadingVehicles = ref(false)
+const authStore = useAuthStore()
+
+// Empêche les watchers de reset des champs pendant le remplissage initial
+const isHydrating = ref(false)
+const route = useRoute()
+const idReception = Number(route.params.id)
+const receptionLoad = await getReception(idReception)
+const receptionType = receptionLoad.receptionType
+const auth = useAuthStore()
+const isBtWeight = ref(true)
+const isMerchandise = ref(receptionType.code === 'MARCHANDISES')
+
+// Transporteur sélectionné dans le formulaire
+const selectedCarrier = computed(() =>
+    carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
+)
+// Indique si le transporteur est LIOT
+const isLiotCarrier = computed(() => selectedCarrier.value?.code === SUPPLIER_CODE.LIOT)
+// Adresses disponibles pour le fournisseur sélectionné
+const supplierAddresses = computed(() => {
+    const supplierId = Number(form.supplierId)
+    if (!Number.isFinite(supplierId)) {
+        return []
+    }
+    return suppliers.value.find((supplier) => supplier.id === supplierId)?.addresses ?? []
+})
+// Chauffeurs filtrés par transporteur (LIOT)
+const filteredDrivers = computed<DriverData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return drivers.value.filter((driver) => String(driver.carrier?.id) === form.carrierId)
+})
+// Véhicules filtrés par transporteur + type de camion
+const filteredVehicles = computed<VehicleData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return vehicles.value.filter(
+        (vehicle) =>
+            String(vehicle.carrier?.id) === form.carrierId &&
+            (!form.truckId || String(vehicle.truck?.id) === form.truckId)
+    )
+})
+
+// Supprime les données bovines si on change de type de réception
+const clearReceptionBovines = async (receptionIri: string) => {
+    const existing = await getReceptionBovineList(receptionIri)
+    for (const selection of existing) {
+        await deleteReceptionBovine(selection.id)
+    }
+}
+
+const hydrateFromUser = (reception: ReceptionData | null) => {
+    if (!reception) {
+        return
+    }
+    isHydrating.value = true
+    form.licensePlate = reception?.licensePlate ?? ''
+    form.receptionDate = reception?.receptionDate ?? new Date().toISOString().slice(0, 10)
+    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
+}
+
+watch(
+    () => idReception,
+    async (id) => {
+        if (id === null) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const user = await getReception(id)
+            hydrateFromUser(user)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+
+// Charge la liste des users pour le select
+const loadUsers = async () => {
+    isLoadingUsers.value = true
+    try {
+        users.value = await getUsers()
+    } finally {
+        isLoadingUsers.value = false
+    }
+}
+
+// Charge la liste des fournisseurs pour le select
+const loadSuppliers = async () => {
+    isLoadingSuppliers.value = true
+    try {
+        suppliers.value = await getSupplierList()
+    } finally {
+        isLoadingSuppliers.value = false
+    }
+}
+
+// Charge la liste des camions pour le select
+const loadTrucks = async () => {
+    isLoadingTrucks.value = true
+    try {
+        trucks.value = await getTruckList()
+    } finally {
+        isLoadingTrucks.value = false
+    }
+}
+
+// Charge la liste des transporteurs pour le select
+const loadCarriers = async () => {
+    isLoadingCarriers.value = true
+    try {
+        carriers.value = await getCarrierList()
+    } finally {
+        isLoadingCarriers.value = false
+    }
+}
+
+// Charge la liste des chauffeurs pour le select
+const loadDrivers = async () => {
+    isLoadingDrivers.value = true
+    try {
+        drivers.value = await getDriverList()
+    } finally {
+        isLoadingDrivers.value = false
+    }
+}
+
+// Charge la liste des véhicules pour le select
+const loadVehicles = async () => {
+    isLoadingVehicles.value = true
+    try {
+        vehicles.value = await getVehicleList()
+    } finally {
+        isLoadingVehicles.value = false
+    }
+}
+
+// On met le user connecté par défaut dans le select
+const setDefaultUser = () => {
+    if (form.userId) {
+        return
+    }
+    if (authStore.user?.id) {
+        form.userId = String(authStore.user.id)
+    }
+}
+
+// On récupère toutes les données des selects au chargement du composant
+onMounted(async () => {
+    await loadUsers()
+    await loadSuppliers()
+    await loadTrucks()
+    await loadCarriers()
+    await loadDrivers()
+    await loadVehicles()
+    await authStore.ensureSession()
+    setDefaultUser()
+})
+
+// Ajuste driver/vehicle quand le transporteur change (logique LIOT)
+watch(
+    () => [form.supplierId, form.addressId, suppliers.value],
+    () => {
+        if (!form.supplierId) {
+            form.addressId = ''
+            return
+        }
+        if (!form.addressId && supplierAddresses.value.length === 1) {
+            form.addressId = String(supplierAddresses.value[0].id)
+            return
+        }
+        if (!form.addressId) {
+            return
+        }
+        const matches = supplierAddresses.value.some(
+            (address) => String(address.id) === form.addressId
+        )
+        if (!matches) {
+            if (supplierAddresses.value.length === 1) {
+                form.addressId = String(supplierAddresses.value[0].id)
+            } else {
+                form.addressId = ''
+            }
+        }
+    },
+    {immediate: true}
+)
+
+// Valide/auto-sélectionne le véhicule selon camion + transporteur (LIOT)
+watch(
+    () => form.carrierId,
+    () => {
+        if (isHydrating.value) {
+            return
+        }
+        if (!form.carrierId && idReception == null) {
+            form.driverId = ''
+            form.vehicleId = ''
+            return
+        }
+        if (!isLiotCarrier.value && idReception == null) {
+            form.driverId = ''
+            form.vehicleId = ''
+            return
+        }
+        if (filteredDrivers.value.length === 1) {
+            form.driverId = String(filteredDrivers.value[0].id)
+        }
+        if (filteredVehicles.value.length === 1) {
+            form.vehicleId = String(filteredVehicles.value[0].id)
+        }
+    },
+    {immediate: true}
+)
+
+// Récupère la plaque depuis le véhicule choisi (LIOT)
+watch(
+    () => [form.truckId, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value) {
+            return
+        }
+        if (filteredVehicles.value.length === 1) {
+            form.vehicleId = String(filteredVehicles.value[0].id)
+            return
+        }
+        if (!form.vehicleId) {
+            return
+        }
+        const matches = filteredVehicles.value.some(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (!matches) {
+            form.vehicleId = ''
+        }
+    },
+    {immediate: true}
+)
+
+// Auto-renseigne le véhicule si la plaque correspond (LIOT)
+watch(
+    () => [form.vehicleId, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value) {
+            return
+        }
+        if (isHydrating.value) {
+            return
+        }
+        const selected = filteredVehicles.value.find(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (selected) {
+            form.licensePlate = selected.plate
+            allowAnyLicensePlate.value = false
+        }
+    }
+)
+
+watch(
+    () => [form.licensePlate, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value || form.vehicleId) {
+            return
+        }
+        const match = filteredVehicles.value.find(
+            (vehicle) => vehicle.plate === form.licensePlate
+        )
+        if (match) {
+            form.vehicleId = String(match.id)
+        }
+    }
+)
+
+// Valide le formulaire et crée/met à jour la réception
+async function validate() {
+    const normalizedLicensePlate = form.licensePlate.trim()
+    const normalizedReceptionDate = form.receptionDate.trim()
+    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 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,
+        user: userIri,
+        supplier: supplierIri,
+        address: addressIri,
+        truck: truckIri,
+        carrier: carrierIri
+    }
+
+    const payload = {
+        ...basePayload,
+        ...(isLiotCarrier.value && driverIri ? {driver: driverIri} : {})
+    }
+
+    if (idReception) {
+        const updated = await receptionStore.updateReception(idReception, {
+            ...payload
+        })
+        if (updated) {
+            await router.push(`/reception/update/${updated.id}`)
+        }
+        router.push("/reception/finish-reception")
+        return
+    }
+}
+
+</script>

frontend/pages/reception/waiting-reception.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="flex items-center justify-between ">
+        <div class="flex items-center gap-10">
+            <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44" />
+            <h1 class="text-3xl font-bold uppercase">listes des réceptions en attente</h1>
+        </div>
+    </div>
+
+    <div class="ps-20 " >
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-5 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Fournisseur</div>
+                <div>Adresse</div>
+                <div>Type réception</div>
+                <div>Transporteur</div>
+                <div>Immatriculation</div>
+            </div>
+            <div
+                v-for="reception in receptionList"
+                :key="reception.id"
+                class="grid grid-cols-5 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+                @click="goToReception(reception.id)"
+                @keydown.enter="goToReception(reception.id)"
+            >
+                <div>{{ reception.supplier?.name }}</div>
+                <div>{{ reception.address?.fullAddress }}</div>
+                <div>{{ reception.receptionType?.label }}</div>
+                <div>{{ reception.carrier?.name }}</div>
+                <div>{{ reception.licensePlate }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {ReceptionData} from "~/services/dto/reception-data";
+import {getReceptionList} from "~/services/reception";
+
+const receptionList = ref<ReceptionData[]>()
+const router = useRouter()
+
+const goToReception = (id: number) => {
+        router.push(`/reception/${id}`)
+}
+
+onMounted(async () => {
+    receptionList.value = await getReceptionList(false)
+})
+</script>

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

@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <div class="flex justify-between h-[52px] mt-6 mb-[80px]">
+            <div class="flex flex-1 mr-16">
+                <UiStepper
+                    :labels="SHIPMENT_STEP_LABELS"
+                    :current-step="storeShipment?.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"
+                @click="saveAndHold"
+            >Mettre en attente
+            </button>
+        </div>
+        <ShipmentForm v-if="!storeShipment || storeShipment.currentStep === 0" ref="shipmentFormRef"/>
+        <ShipmentWeight v-if="storeShipment?.currentStep === 1" mode="gross"/>
+        <ShipmentWeight v-if="storeShipment?.currentStep >= 2" mode="tare"/>
+
+    </div>
+</template>
+<script setup lang="ts">
+
+import {SHIPMENT_STEP_LABELS} from "~/constants/steps";
+import {storeToRefs} from "pinia";
+import {useShipmentStore} from "~/stores/shipment";
+import { ref, watch } from 'vue'
+const shipmentStore = useShipmentStore()
+const {current: storeShipment} = storeToRefs(shipmentStore)
+const shipmentFormRef = ref<{ saveDraft: () => Promise<void> } | null>(null)
+
+const route = useRoute()
+const router = useRouter()
+
+const resolveShipmentId = (param: unknown) => {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) {
+        return null
+    }
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+
+watch (
+    () => route.params.id,
+    async (param) => {
+        const id = resolveShipmentId(param)
+        if (id === null) {
+            shipmentStore.clearCurrent()
+            return
+        }
+        await shipmentStore.loadShipment(id)
+    },
+    {immediate: true}
+)
+
+const saveAndHold = async () => {
+    if (shipmentFormRef.value) {
+        await shipmentFormRef.value.saveDraft()
+    }
+    await router.push('/')
+}
+const handleStepSelect = async (step: number) => {
+    if (!shipmentStore.current) {
+        return
+    }
+
+    if (step === shipmentStore.current.currentStep) {
+        return
+    }
+
+    await shipmentStore.updateShipment(shipmentStore.current.id, {
+        currentStep: step
+    })
+    await shipmentStore.loadShipment(shipmentStore.current.id)
+}
+
+
+</script>

frontend/pages/shipment/finish-shipment.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="flex items-center justify-start gap-10">
+        <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44"/>
+        <h1 class="text-3xl font-bold uppercase">listes des expéditions finie</h1>
+    </div>
+
+    <div class="ps-20 ">
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Numéro</div>
+                <div>Date</div>
+                <div>Client</div>
+                <div>Adresse</div>
+                <div>Type d'expéditon</div>
+                <div>Poids</div>
+            </div>
+            <div
+                v-for="shipment in shipmentList"
+                :key="shipment
+               .id"
+                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+                @click="goToshipment(shipment.id)"
+            >
+                <div>{{ shipment.identificationNumber }}</div>
+                <div>{{ shipment.shipmentDate }}</div>
+                <div>{{ shipment.customer?.label }}</div>
+                <div>{{ shipment.address?.fullAddress }}</div>
+                <div>
+                    <template v-if="formatBovinShipmentLines(shipment).length">
+                        <div
+                            v-for="(line, index) in formatBovinShipmentLines(shipment)"
+                            :key="index"
+                            class="leading-5"
+                        >
+                            {{ line }}
+                        </div>
+                    </template>
+                </div>
+                <div>{{ formatWeighing(shipment, 'gross') }} | {{ formatWeighing(shipment, 'tare') }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {ShipmentData} from "~/services/dto/shipment-data";
+import {getShipmentList} from "~/services/shipment";
+
+const shipmentList = ref<ShipmentData[]>()
+const router = useRouter()
+
+const formatWeighing = (shipment: ShipmentData, type: 'gross' | 'tare') => {
+    const entry = shipment.weights?.find((weight) => weight.type === type)
+    if (!entry || entry.weight == null || entry.dsd == null) {
+        return '—'
+    }
+    return `${entry.weight} kg`
+}
+
+const formatBovinShipmentLines = (shipment: ShipmentData) => {
+    if (!shipment.bovinShipments?.length) {
+        return []
+    }
+    return shipment.bovinShipments.map((entry) => {
+        const label = typeof entry.shipmentType === 'string'
+            ? entry.shipmentType
+            : entry.shipmentType?.label
+        return `${label ?? '—'} : ${entry.nbBovinSend ?? '—'}`
+    })
+}
+
+const goToshipment = (id: number) => {
+    //router.push(`/shipment/update/${id}`)
+}
+
+onMounted(async () => {
+    shipmentList.value = await getShipmentList(true)
+})
+</script>

frontend/pages/shipment/waiting-shipment.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="flex items-center justify-between ">
+        <div class="flex items-center gap-10">
+            <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44"/>
+            <h1 class="text-3xl font-bold uppercase">listes des expéditions en attente</h1>
+        </div>
+    </div>
+
+    <div class="ps-20 ">
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-5 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Client</div>
+                <div>Adresse</div>
+                <div>Type d'expéditions</div>
+                <div>Transporteur</div>
+                <div>Immatriculation</div>
+            </div>
+            <div
+                v-for="shipment in shipmentList"
+                :key="shipment.id"
+                class="grid grid-cols-5 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+                @click="goToShipment(shipment.id)"
+                @keydown.enter="goToShipment(shipment.id)"
+            >
+                <div>{{ shipment.customer?.label }}</div>
+                <div>{{ shipment.address?.fullAddress }}</div>
+                <div>
+                    <template v-if="formatBovinShipmentLines(shipment).length">
+                        <div
+                            v-for="(line, index) in formatBovinShipmentLines(shipment)"
+                            :key="index"
+                            class="leading-5"
+                        >
+                            {{ line }}
+                        </div>
+                    </template>
+                </div>
+                <div>{{ shipment.carrier?.name }}</div>
+                <div>{{ shipment.licencePlate }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+import type {ShipmentData} from "~/services/dto/shipment-data";
+import {getShipmentList} from "~/services/shipment";
+
+const shipmentList = ref<ShipmentData[]>()
+const router = useRouter()
+
+const goToShipment = (id: number) => {
+    router.push(`/shipment/${id}`)
+}
+const formatBovinShipmentLines = (shipment: ShipmentData) => {
+    if (!shipment.bovinShipments?.length) {
+        return []
+    }
+    return shipment.bovinShipments.map((entry) => {
+        const label = typeof entry.shipmentType === 'string'
+            ? entry.shipmentType
+            : entry.shipmentType?.label
+        return `${label ?? '—'} : ${entry.nbBovinSend ?? '—'}`
+    })
+}
+
+onMounted(async () => {
+    shipmentList.value = await getShipmentList(false)
+})
+</script>