frontend/components/address.vue

@@ -1,23 +1,15 @@
 <template>
     <form @submit.prevent="validateForm">
-        <div class="flex items-center justify-between gap-10">
+        <div class="flex items-center mb-11 justify-between relative">
-            <div>
+            <div class="flex flex-row absolute -left-[60px] ">
-                <h1 class="text-3xl font-bold uppercase">
+                <Icon @click="goBack" name="gg:arrow-left-o" size="40" class="cursor-pointer text-primary-500"/>
-                    {{ props.address ? "Modification d'une adresse" : "Ajout d'une adresse" }}
-                </h1>
             </div>
-
+            <h1 class="text-3xl text-primary-500 font-bold uppercase">
-            <button
+                {{ props.address ? "Modification d'une adresse" : "Ajout d'une adresse" }}
-                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
+            </h1>
-                type="submit"
-                :disabled="isLoading"
-            >
-                <Icon :name="props.address ? '' : 'mdi:plus'" size="28" />
-                {{ props.address? "Valider" : "Ajouter" }}
-            </button>
         </div>
 
-        <div class="grid grid-cols-2 gap-y-16 gap-x-12 mb-16 mt-10">
+        <div class="grid grid-cols-2 gap-y-16 gap-x-[200px] mb-16">
             <UiTextInput id="address-label" v-model="form.label" label="Libellé" />
             <UiTextInput id="address-street" v-model="form.street" label="Rue" />
             <UiTextInput id="address-street2" v-model="form.street2" label="Complément" />
@@ -25,6 +17,16 @@
             <UiTextInput id="address-city" v-model="form.city" label="Ville" />
             <UiTextInput id="address-country" v-model="form.countryCode" label="Pays (code)" />
         </div>
+        <div class="flex justify-center items-center">
+        <button
+            class="inline-flex items-center justify-center text-xl min-w-[194px] text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
+            type="submit"
+            :disabled="isLoading"
+        >
+            <Icon :name="props.address ? '' : 'mdi:plus'" size="28" />
+            {{ props.address? "Valider" : "Ajouter" }}
+        </button>
+        </div>
     </form>
 </template>
 
@@ -53,6 +55,20 @@ const emptyForm = (): AddressPayload => ({
 
 const form = reactive<AddressPayload>(emptyForm())
 
+const backPath = computed(() => {
+    if (props.type === "customer") {
+        const customerId = Number(route.query.customerId)
+        return Number.isFinite(customerId) && customerId > 0
+            ? `/admin/customer/${customerId}`
+            : "/admin/customer/customer-list"
+    }
+
+    const supplierId = Number(route.query.supplierId)
+    return Number.isFinite(supplierId) && supplierId > 0
+        ? `/admin/supplier/${supplierId}`
+        : "/admin/supplier/supplier-list"
+})
+
 const hydrateForm = (address?: AddressPayload | null) => {
     const data = address ?? emptyForm()
     form.label = data.label ?? ""
@@ -76,6 +92,10 @@ const validateForm = () => {
     emit("validate", {...form})
 }
 
+const goBack = () => {
+    router.push(backPath.value)
+}
+
 const emit = defineEmits<{
     (event: 'validate', form: AddressPayload): void
 }>()

frontend/components/ui/UiButton.vue

@@ -3,7 +3,7 @@
         :is="'button'"
         :type="type"
         :disabled="isDisabled"
-        class="inline-flex items-center justify-center rounded-md"
+        class="inline-flex min-w-[194px] items-center justify-center rounded-md"
         :class="[
             isDisabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
             buttonClass

frontend/components/ui/UiTextInput.vue

@@ -3,7 +3,7 @@
         <label
             v-if="label"
             :for="id"
-            class="font-bold uppercase text-xl text-primary-500"
+            class="font-bold uppercase text-xl text-primary-700"
             :class="labelClass"
         >
             {{ label }}
@@ -16,7 +16,7 @@
             :maxlength="maxlength"
             :disabled="disabled"
             v-bind="attrs"
-            class="border-b border-black text-xl py-[6px] bg-transparent text-primary-500"
+            class="border-b border-black text-xl py-[6px] bg-transparent text-primary-700"
             :class="[
                 isEmpty ? 'text-neutral-400' : 'text-black',
                 disabled ? 'cursor-not-allowed' : 'cursor-text',

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

@@ -1,12 +1,23 @@
 <template>
     <form @submit.prevent="validate">
-        <div class="flex items-center justify-between">
+
-            <h1 class="text-3xl font-bold uppercase">
+        <div class="flex items-center relative">
+            <div class="flex flex-row absolute -left-[60px] ">
+                <Icon @click="router.push('/admin/supplier/supplier-list')" name="gg:arrow-left-o" size="40" class="cursor-pointer text-primary-500"/>
+            </div>
+            <h1 class="text-3xl text-primary-500  font-bold uppercase">
                 {{ supplierId ? "Modifications du fournisseur" : "Ajout d'un fournisseur" }}
             </h1>
+        </div>
 
+        <div class="flex flex-cols-3 justify-between mb-11 pt-7">
+            <UiTextInput id="supplier-name" v-model="form.name" label="Nom du fournisseur" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
+            <UiTextInput id="supplier-email" v-model="form.email" label="Email" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
+            <UiTextInput id="supplier-phone" v-model="form.phone" label="Téléphone" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
+        </div>
+        <div class="flex items-center justify-center">
             <UiButton
-                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
+                class="inline-flex items-center mb-[106px] justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
                 type="submit"
                 :disabled="isLoading || !auth.isAdmin"
             >
@@ -15,35 +26,19 @@
             </UiButton>
         </div>
 
-        <div class="grid grid-cols-2 gap-y-8 gap-x-80 mb-10 py-12">
+        <div class="flex items-center justify-between mb-7">
-            <UiTextInput id="supplier-name" v-model="form.name" label="Nom du fournisseur" :disabled="!auth.isAdmin"/>
+            <h2 class="text-3xl text-primary-500 font-bold uppercase">Adresses fournisseur</h2>
-            <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="overflow-x-auto mb-11">
-        <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>
-            <UiButton
-                type="button"
-                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
-                :disabled="supplierId === null || !auth.isAdmin"
-                @click="goToAddAddress"
-            >
-                <Icon name="mdi:plus" size="28" />
-                Ajouter
-            </UiButton>
-        </div>
-        <div class="overflow-x-auto mb-10">
             <table class="w-full border-collapse">
                 <thead>
-                <tr class="text-left border-b border-gray-200">
+                <tr class="text-left border bg-slate-100 border-gray-200">
-                    <th class="py-3 pr-4 text-sm uppercase">Libellé</th>
+                    <th class="py-3 px-4 text-sm uppercase">Libellé</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Rue</th>
+                    <th class="py-3 px-4 text-sm uppercase">Rue</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Complément</th>
+                    <th class="py-3 px-4 text-sm uppercase">Complément</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Code postal</th>
+                    <th class="py-3 px-4 text-sm uppercase">Code postal</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Ville</th>
+                    <th class="py-3 px-4 text-sm uppercase">Ville</th>
-                    <th class="py-3 pr-4 text-sm uppercase">Pays</th>
+                    <th class="py-3 px-4 text-sm uppercase">Pays</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -58,21 +53,32 @@
                     <tr
                         v-for="(address, index) in form.addresses"
                         :key="address.id ?? index"
-                        class="border-b border-gray-100 hover:bg-slate-50"
+                        class="border 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 px-4">{{ address.label || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.street || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.street || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.street2 || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.street2 || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.postalCode || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.postalCode || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.city || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.city || "—" }}</td>
-                        <td class="py-3 pr-4">{{ address.countryCode || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.countryCode || "—" }}</td>
                     </tr>
                 </template>
                 </tbody>
             </table>
         </div>
+        <div class="flex justify-center items-center">
+        <UiButton
+            type="button"
+            class="inline-flex items-center mb-16 justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
+            :disabled="supplierId === null || !auth.isAdmin"
+            @click="goToAddAddress"
+        >
+            <Icon name="mdi:plus" size="28" />
+            Ajouter
+        </UiButton>
+        </div>
     </form>
 </template>
 

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

@@ -1,15 +1,6 @@
 <template>
     <div class="flex items-center justify-between">
         <h1 class="text-3xl font-bold uppercase text-primary-500">Liste des fournisseurs</h1>
-        <NuxtLink
-            to="/admin/supplier"
-            class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
-            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
-            @click="handleAddClick"
-        >
-            <Icon name="mdi:plus" size="28"  />
-            Ajouter
-        </NuxtLink>
     </div>
 
     <div v-if="auth.isAdmin" class="mt-6 border border-slate-200 mb-16">
@@ -83,6 +74,17 @@
     <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>
+    <div class="flex justify-center items-center">
+        <NuxtLink
+            to="/admin/supplier"
+            class="inline-flex items-center mb-16 justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
+            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
+            @click="handleAddClick"
+        >
+            <Icon name="mdi:plus" size="28" />
+            Ajouter
+        </NuxtLink>
+    </div>
 </template>
 
 <script setup lang="ts">