From 9ba49cd29c92a51e37ab38e5b4a846872f75b378 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Mon, 9 Mar 2026 22:44:47 +0100
Subject: [PATCH] feat : add Clients page with table and drawer form

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/components/ClientDrawer.vue | 136 +++++++++++++++++++++++++++
 frontend/pages/clients.vue           |  95 +++++++++++++++++++
 2 files changed, 231 insertions(+)
 create mode 100644 frontend/components/ClientDrawer.vue
 create mode 100644 frontend/pages/clients.vue

diff --git a/frontend/components/ClientDrawer.vue b/frontend/components/ClientDrawer.vue
new file mode 100644
index 0000000..a6d6171
--- /dev/null
+++ b/frontend/components/ClientDrawer.vue
@@ -0,0 +1,136 @@
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un client' : 'Ajouter un client'">
+        <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
+            <MalioInputText
+                v-model="form.name"
+                label="Nom"
+                input-class="w-full"
+                :error="touched.name && !form.name.trim() ? 'Le nom est requis' : ''"
+                @blur="touched.name = true"
+            />
+            <MalioInputText
+                v-model="form.email"
+                label="Email"
+                input-class="w-full"
+            />
+            <MalioInputText
+                v-model="form.phone"
+                label="Téléphone"
+                input-class="w-full"
+            />
+            <MalioInputText
+                v-model="form.street"
+                label="Rue"
+                input-class="w-full"
+            />
+            <MalioInputText
+                v-model="form.city"
+                label="Ville"
+                input-class="w-full"
+            />
+            <MalioInputText
+                v-model="form.postalCode"
+                label="Code Postal"
+                input-class="w-full"
+            />
+
+            <div class="mt-6 flex justify-end">
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="isSubmitting"
+                >
+                    Enregistrer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import type { Client, ClientWrite } from '~/services/dto/client'
+
+const props = defineProps<{
+    modelValue: boolean
+    client: Client | null
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'saved'): void
+}>()
+
+const isOpen = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+})
+
+const isEditing = computed(() => !!props.client)
+const isSubmitting = ref(false)
+
+const form = reactive({
+    name: '',
+    email: '',
+    phone: '',
+    street: '',
+    city: '',
+    postalCode: '',
+})
+
+const touched = reactive({
+    name: false,
+    email: false,
+})
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.client) {
+            form.name = props.client.name ?? ''
+            form.email = props.client.email ?? ''
+            form.phone = props.client.phone ?? ''
+            form.street = props.client.street ?? ''
+            form.city = props.client.city ?? ''
+            form.postalCode = props.client.postalCode ?? ''
+        } else {
+            form.name = ''
+            form.email = ''
+            form.phone = ''
+            form.street = ''
+            form.city = ''
+            form.postalCode = ''
+        }
+        touched.name = false
+        touched.email = false
+    }
+})
+
+const { create, update } = useClientService()
+
+async function handleSubmit() {
+    touched.name = true
+    if (!form.name.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: ClientWrite = {
+            name: form.name.trim(),
+            email: form.email.trim() || null,
+            phone: form.phone.trim() || null,
+            street: form.street.trim() || null,
+            city: form.city.trim() || null,
+            postalCode: form.postalCode.trim() || null,
+        }
+
+        if (isEditing.value && props.client) {
+            await update(props.client.id, payload)
+        } else {
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>
diff --git a/frontend/pages/clients.vue b/frontend/pages/clients.vue
new file mode 100644
index 0000000..2ad6bf3
--- /dev/null
+++ b/frontend/pages/clients.vue
@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-neutral-900">Clients</h1>
+            <button
+                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                @click="openCreate"
+            >
+                + Ajouter un client
+            </button>
+        </div>
+
+        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+            <table class="w-full text-left text-sm">
+                <thead class="border-b border-neutral-200 bg-neutral-50">
+                    <tr>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Nom</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Email</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Adresse</th>
+                        <th class="px-4 py-3 font-semibold text-neutral-700">Téléphone</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="client in clients"
+                        :key="client.id"
+                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
+                        @click="openEdit(client)"
+                    >
+                        <td class="px-4 py-3 font-semibold text-primary-500">{{ client.name }}</td>
+                        <td class="px-4 py-3 text-primary-500">{{ client.email ?? '-' }}</td>
+                        <td class="px-4 py-3 text-neutral-700">{{ formatAddress(client) }}</td>
+                        <td class="px-4 py-3 text-primary-500">{{ client.phone ?? '-' }}</td>
+                    </tr>
+                    <tr v-if="clients.length === 0 && !isLoading">
+                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
+                            Aucun client trouvé.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <ClientDrawer
+            v-model="drawerOpen"
+            :client="selectedClient"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Client } from '~/services/dto/client'
+
+useHead({ title: 'Clients' })
+
+const { getAll } = useClientService()
+const clients = ref<Client[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedClient = ref<Client | null>(null)
+
+async function loadClients() {
+    isLoading.value = true
+    try {
+        clients.value = await getAll()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openCreate() {
+    selectedClient.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(client: Client) {
+    selectedClient.value = client
+    drawerOpen.value = true
+}
+
+function formatAddress(client: Client): string {
+    return [client.street, client.postalCode, client.city]
+        .filter(Boolean)
+        .join(', ') || '-'
+}
+
+async function onSaved() {
+    await loadClients()
+}
+
+onMounted(() => {
+    loadClients()
+})
+</script>