From 3fe108d38aabd02a52693fc307bfcd63dccffd8a Mon Sep 17 00:00:00 2001
From: Matthieu <contact@malio.fr>
Date: Wed, 24 Jun 2026 09:07:13 +0200
Subject: [PATCH] feat(directory) : add editable Information tab on
 client/prospect detail

Add an Information tab (first, active by default) to the client and prospect
detail pages so base fields can be edited directly from the record. Client:
name/email/phone. Prospect: name/company/status/email/phone/source/notes.
Fields are edited in memory and persisted only on explicit save (PATCH),
matching the Contact/Address tabs pattern.
---
 frontend/i18n/locales/fr.json                 |   8 ++
 .../pages/directory/clients/[id].vue          |  60 +++++++++-
 .../pages/directory/prospects/[id].vue        | 109 +++++++++++++++++-
 3 files changed, 174 insertions(+), 3 deletions(-)

diff --git a/frontend/i18n/locales/fr.json b/frontend/i18n/locales/fr.json
index 9c9c74a..95ed502 100644
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -934,12 +934,20 @@
   "directory": {
     "title": "Répertoire",
     "tabs": {
+      "info": "Informations",
       "clients": "Clients",
       "prospects": "Prospects",
       "contact": "Contact",
       "address": "Adresse",
       "report": "Rapport"
     },
+    "info": {
+      "fields": {
+        "name": "Nom",
+        "email": "Email",
+        "phone": "Téléphone"
+      }
+    },
     "clients": {
       "add": "Ajouter un client",
       "empty": "Aucun client trouvé."
diff --git a/frontend/modules/directory/pages/directory/clients/[id].vue b/frontend/modules/directory/pages/directory/clients/[id].vue
index 6cbe09e..d0b18db 100644
--- a/frontend/modules/directory/pages/directory/clients/[id].vue
+++ b/frontend/modules/directory/pages/directory/clients/[id].vue
@@ -8,6 +8,39 @@
         <p v-if="loading">{{ $t('common.loading') }}</p>
         <template v-else-if="client">
             <MalioTabList v-model="activeTab" :tabs="tabs">
+                <template #info>
+                    <div class="flex flex-col gap-4 pt-6">
+                        <div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]">
+                            <MalioInputText
+                                class="col-span-2"
+                                :model-value="info.name"
+                                :label="$t('directory.info.fields.name')"
+                                :error="infoTouched.name && !info.name.trim() ? $t('prospects.validation.nameRequired') : ''"
+                                @update:model-value="info.name = $event"
+                                @blur="infoTouched.name = true"
+                            />
+                            <MalioInputText
+                                :model-value="info.email"
+                                :label="$t('directory.info.fields.email')"
+                                @update:model-value="info.email = $event"
+                            />
+                            <MalioInputText
+                                :model-value="info.phone"
+                                :label="$t('directory.info.fields.phone')"
+                                @update:model-value="info.phone = $event"
+                            />
+                        </div>
+                        <div class="flex justify-center pt-2">
+                            <MalioButton
+                                button-class="w-auto px-6"
+                                :label="$t('common.save')"
+                                :disabled="savingInfo"
+                                @click="saveInfo"
+                            />
+                        </div>
+                    </div>
+                </template>
+
                 <template #contact>
                     <div class="flex flex-col gap-4 pt-6">
                         <DirectoryContactBlock
@@ -110,19 +143,44 @@ const {
 const client = ref<Client | null>(null)
 const loading = ref(true)
 
-const activeTab = ref('contact')
+const activeTab = ref('info')
 const tabs = [
+    { key: 'info', label: t('directory.tabs.info'), icon: 'mdi:information-outline' },
     { key: 'contact', label: t('directory.tabs.contact'), icon: 'mdi:account-outline' },
     { key: 'address', label: t('directory.tabs.address'), icon: 'mdi:map-marker-outline' },
     { key: 'report', label: t('directory.tabs.report'), icon: 'mdi:file-document-outline' },
 ]
 
+// Champs de base de la fiche, édités en mémoire et persistés au clic sur
+// « Enregistrer » (PATCH), comme les onglets Contact/Adresse.
+const info = reactive({ name: '', email: '', phone: '' })
+const infoTouched = reactive({ name: false })
+const savingInfo = ref(false)
+
+async function saveInfo(): Promise<void> {
+    infoTouched.name = true
+    if (!info.name.trim() || savingInfo.value) return
+    savingInfo.value = true
+    try {
+        client.value = await clientService.update(id, {
+            name: info.name.trim(),
+            email: info.email.trim() || null,
+            phone: info.phone.trim() || null,
+        })
+    } finally {
+        savingInfo.value = false
+    }
+}
+
 function goBack(): void {
     router.push('/directory')
 }
 
 onMounted(async () => {
     client.value = await clientService.getById(id)
+    info.name = client.value.name ?? ''
+    info.email = client.value.email ?? ''
+    info.phone = client.value.phone ?? ''
     await load()
     loading.value = false
 })
diff --git a/frontend/modules/directory/pages/directory/prospects/[id].vue b/frontend/modules/directory/pages/directory/prospects/[id].vue
index a67fd46..f2604b5 100644
--- a/frontend/modules/directory/pages/directory/prospects/[id].vue
+++ b/frontend/modules/directory/pages/directory/prospects/[id].vue
@@ -8,6 +8,62 @@
         <p v-if="loading">{{ $t('common.loading') }}</p>
         <template v-else-if="prospect">
             <MalioTabList v-model="activeTab" :tabs="tabs">
+                <template #info>
+                    <div class="flex flex-col gap-4 pt-6">
+                        <div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]">
+                            <MalioInputText
+                                class="col-span-2"
+                                :model-value="info.name"
+                                :label="$t('prospects.fields.name')"
+                                :error="infoTouched.name && !info.name.trim() ? $t('prospects.validation.nameRequired') : ''"
+                                @update:model-value="info.name = $event"
+                                @blur="infoTouched.name = true"
+                            />
+                            <MalioInputText
+                                :model-value="info.company"
+                                :label="$t('prospects.fields.company')"
+                                @update:model-value="info.company = $event"
+                            />
+                            <MalioSelect
+                                v-model="info.status"
+                                :label="$t('prospects.fields.status')"
+                                :options="statusOptions"
+                                group-class="w-full"
+                            />
+                            <MalioInputText
+                                :model-value="info.email"
+                                :label="$t('prospects.fields.email')"
+                                @update:model-value="info.email = $event"
+                            />
+                            <MalioInputText
+                                :model-value="info.phone"
+                                :label="$t('prospects.fields.phone')"
+                                @update:model-value="info.phone = $event"
+                            />
+                            <MalioInputText
+                                class="col-span-2"
+                                :model-value="info.source"
+                                :label="$t('prospects.fields.source')"
+                                @update:model-value="info.source = $event"
+                            />
+                            <MalioInputTextArea
+                                class="col-span-2"
+                                :model-value="info.notes"
+                                :label="$t('prospects.fields.notes')"
+                                @update:model-value="info.notes = $event"
+                            />
+                        </div>
+                        <div class="flex justify-center pt-2">
+                            <MalioButton
+                                button-class="w-auto px-6"
+                                :label="$t('common.save')"
+                                :disabled="savingInfo"
+                                @click="saveInfo"
+                            />
+                        </div>
+                    </div>
+                </template>
+
                 <template #contact>
                     <div class="flex flex-col gap-4 pt-6">
                         <DirectoryContactBlock
@@ -77,7 +133,7 @@
 </template>
 
 <script setup lang="ts">
-import type { Prospect } from '~/modules/directory/services/dto/prospect'
+import type { Prospect, ProspectStatus } from '~/modules/directory/services/dto/prospect'
 import { useProspectService } from '~/modules/directory/services/prospects'
 
 definePageMeta({ middleware: ['admin'] })
@@ -110,19 +166,68 @@ const {
 const prospect = ref<Prospect | null>(null)
 const loading = ref(true)
 
-const activeTab = ref('contact')
+const activeTab = ref('info')
 const tabs = [
+    { key: 'info', label: t('directory.tabs.info'), icon: 'mdi:information-outline' },
     { key: 'contact', label: t('directory.tabs.contact'), icon: 'mdi:account-outline' },
     { key: 'address', label: t('directory.tabs.address'), icon: 'mdi:map-marker-outline' },
     { key: 'report', label: t('directory.tabs.report'), icon: 'mdi:file-document-outline' },
 ]
 
+const statusOptions = [
+    { label: t('prospects.status.new'), value: 'new' },
+    { label: t('prospects.status.contacted'), value: 'contacted' },
+    { label: t('prospects.status.qualified'), value: 'qualified' },
+    { label: t('prospects.status.won'), value: 'won' },
+    { label: t('prospects.status.lost'), value: 'lost' },
+]
+
+// Champs de base de la fiche, édités en mémoire et persistés au clic sur
+// « Enregistrer » (PATCH), comme les onglets Contact/Adresse.
+const info = reactive<{
+    name: string
+    company: string
+    email: string
+    phone: string
+    status: ProspectStatus
+    source: string
+    notes: string
+}>({ name: '', company: '', email: '', phone: '', status: 'new', source: '', notes: '' })
+const infoTouched = reactive({ name: false })
+const savingInfo = ref(false)
+
+async function saveInfo(): Promise<void> {
+    infoTouched.name = true
+    if (!info.name.trim() || savingInfo.value) return
+    savingInfo.value = true
+    try {
+        prospect.value = await prospectService.update(id, {
+            name: info.name.trim(),
+            company: info.company.trim() || null,
+            email: info.email.trim() || null,
+            phone: info.phone.trim() || null,
+            status: info.status,
+            source: info.source.trim() || null,
+            notes: info.notes.trim() || null,
+        })
+    } finally {
+        savingInfo.value = false
+    }
+}
+
 function goBack(): void {
     router.push('/directory')
 }
 
 onMounted(async () => {
     prospect.value = await prospectService.getById(id)
+    info.name = prospect.value.name ?? ''
+    info.company = prospect.value.company ?? ''
+    info.email = prospect.value.email ?? ''
+    info.phone = prospect.value.phone ?? ''
+    info.status = prospect.value.status ?? 'new'
+    info.source = prospect.value.source ?? ''
+    info.notes = prospect.value.notes ?? ''
     await load()
     loading.value = false
 })