Merge branch 'develop' into feat/directory-info-tab

frontend/modules/directory/components/ClientDrawer.vue

@@ -6,21 +6,11 @@
         <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
             <MalioInputText
                 v-model="form.name"
-                label="Nom"
+                label="Nom société"
                 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"
-            />
 
             <div class="mt-6 flex justify-end">
                 <MalioButton
@@ -58,28 +48,16 @@ const isSubmitting = ref(false)
 
 const form = reactive({
     name: '',
-    email: '',
-    phone: '',
 })
 
 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 ?? ''
-        } else {
-            form.name = ''
-            form.email = ''
-            form.phone = ''
-        }
+        form.name = props.client?.name ?? ''
         touched.name = false
-        touched.email = false
     }
 })
 
@@ -93,8 +71,6 @@ async function handleSubmit() {
     try {
         const payload: ClientWrite = {
             name: form.name.trim(),
-            email: form.email.trim() || null,
-            phone: form.phone.trim() || null,
         }
 
         if (isEditing.value && props.client) {

frontend/modules/directory/components/ConfirmDeleteModal.vue

@@ -0,0 +1,58 @@
+<template>
+    <Teleport v-if="modelValue" to="body">
+        <Transition name="modal" appear>
+            <div class="fixed inset-0 z-50 flex items-center justify-center">
+                <div class="absolute inset-0 bg-black/30" @click="cancel" />
+                <div class="relative z-10 w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+                    <h3 class="text-lg font-bold text-neutral-900">{{ title }}</h3>
+                    <p class="mt-3 text-sm text-neutral-600">
+                        {{ message }}
+                    </p>
+                    <div class="mt-6 flex justify-end gap-3">
+                        <MalioButton
+                            variant="tertiary"
+                            :label="$t('common.cancel')"
+                            button-class="w-auto px-4"
+                            @click="cancel"
+                        />
+                        <MalioButton
+                            variant="danger"
+                            :label="$t('common.delete')"
+                            button-class="w-auto px-4"
+                            @click="$emit('confirm')"
+                        />
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    modelValue: boolean
+    title: string
+    message: string
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'confirm'): void
+}>()
+
+function cancel() {
+    emit('update:modelValue', false)
+}
+</script>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+    opacity: 0;
+}
+</style>

frontend/modules/directory/components/ProspectDrawer.vue

@@ -6,41 +6,11 @@
         <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
             <MalioInputText
                 v-model="form.name"
-                :label="$t('prospects.fields.name')"
+                label="Nom société"
                 input-class="w-full"
                 :error="touched.name && !form.name.trim() ? $t('prospects.validation.nameRequired') : ''"
                 @blur="touched.name = true"
             />
-            <MalioInputText
-                v-model="form.company"
-                :label="$t('prospects.fields.company')"
-                input-class="w-full"
-            />
-            <MalioInputText
-                v-model="form.email"
-                :label="$t('prospects.fields.email')"
-                input-class="w-full"
-            />
-            <MalioInputText
-                v-model="form.phone"
-                :label="$t('prospects.fields.phone')"
-                input-class="w-full"
-            />
-            <MalioSelect
-                v-model="form.status"
-                :label="$t('prospects.fields.status')"
-                :options="statusOptions"
-                group-class="w-full"
-            />
-            <MalioInputText
-                v-model="form.source"
-                :label="$t('prospects.fields.source')"
-                input-class="w-full"
-            />
-            <MalioInputTextArea
-                v-model="form.notes"
-                :label="$t('prospects.fields.notes')"
-            />
 
             <div class="mt-6 flex items-center justify-between gap-2">
                 <MalioButton
@@ -69,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import type { Prospect, ProspectStatus, ProspectWrite } from '~/modules/directory/services/dto/prospect'
+import type { Prospect, ProspectWrite } from '~/modules/directory/services/dto/prospect'
 import { useProspectService } from '~/modules/directory/services/prospects'
 
 const props = defineProps<{
@@ -82,8 +52,6 @@ const emit = defineEmits<{
     (e: 'saved'): void
 }>()
 
-const { t } = useI18n()
-
 const isOpen = computed({
     get: () => props.modelValue,
     set: (v) => emit('update:modelValue', v),
@@ -93,30 +61,8 @@ const isEditing = computed(() => !!props.prospect)
 const isConverted = computed(() => !!props.prospect?.convertedClient)
 const isSubmitting = ref(false)
 
-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' },
-]
-
-const form = reactive<{
-    name: string
-    company: string
-    email: string
-    phone: string
-    status: ProspectStatus
-    source: string
-    notes: string
-}>({
+const form = reactive({
     name: '',
-    company: '',
-    email: '',
-    phone: '',
-    status: 'new',
-    source: '',
-    notes: '',
 })
 
 const touched = reactive({
@@ -125,23 +71,7 @@ const touched = reactive({
 
 watch(() => props.modelValue, (open) => {
     if (open) {
-        if (props.prospect) {
-            form.name = props.prospect.name ?? ''
-            form.company = props.prospect.company ?? ''
-            form.email = props.prospect.email ?? ''
-            form.phone = props.prospect.phone ?? ''
-            form.status = props.prospect.status ?? 'new'
-            form.source = props.prospect.source ?? ''
-            form.notes = props.prospect.notes ?? ''
-        } else {
-            form.name = ''
-            form.company = ''
-            form.email = ''
-            form.phone = ''
-            form.status = 'new'
-            form.source = ''
-            form.notes = ''
-        }
+        form.name = props.prospect?.name ?? ''
         touched.name = false
     }
 })
@@ -156,12 +86,6 @@ async function handleSubmit() {
     try {
         const payload: ProspectWrite = {
             name: form.name.trim(),
-            company: form.company.trim() || null,
-            email: form.email.trim() || null,
-            phone: form.phone.trim() || null,
-            status: form.status,
-            source: form.source.trim() || null,
-            notes: form.notes.trim() || null,
         }
 
         if (isEditing.value && props.prospect) {

frontend/modules/directory/pages/directory/index.vue

@@ -31,6 +31,17 @@
                         <template #cell-phone="{ item }">
                             {{ (item as Client).phone ?? '—' }}
                         </template>
+                        <template #cell-actions="{ item }">
+                            <div class="flex justify-end" @click.stop>
+                                <MalioButtonIcon
+                                    icon="mdi:trash-can-outline"
+                                    :aria-label="$t('common.delete')"
+                                    button-class="!bg-red-100 !text-red-700"
+                                    :icon-size="18"
+                                    @click="askDeleteClient(item as Client)"
+                                />
+                            </div>
+                        </template>
                     </MalioDataTable>
                 </div>
             </template>
@@ -75,20 +86,23 @@
                             {{ (item as ProspectRow).phone ?? '—' }}
                         </template>
                         <template #cell-actions="{ item }">
-                            <div
-                                v-if="!(item as ProspectRow).convertedClient"
-                                class="flex justify-end"
-                                @click.stop
-                            >
+                            <div class="flex justify-end gap-2" @click.stop>
                                 <MalioButtonIcon
+                                    v-if="!(item as ProspectRow).convertedClient"
                                     icon="mdi:account-convert"
                                     :aria-label="$t('prospects.convert')"
                                     button-class="!bg-green-100 !text-green-700"
                                     :icon-size="18"
                                     @click="convertProspect(item as ProspectRow)"
                                 />
+                                <MalioButtonIcon
+                                    icon="mdi:trash-can-outline"
+                                    :aria-label="$t('common.delete')"
+                                    button-class="!bg-red-100 !text-red-700"
+                                    :icon-size="18"
+                                    @click="askDeleteProspect(item as ProspectRow)"
+                                />
                             </div>
-                            <span v-else class="text-neutral-300">—</span>
                         </template>
                     </MalioDataTable>
                 </div>
@@ -105,6 +119,13 @@
             :prospect="selectedProspect"
             @saved="onProspectSaved"
         />
+
+        <ConfirmDeleteModal
+            v-model="deleteModalOpen"
+            :title="deleteModalTitle"
+            :message="deleteModalMessage"
+            @confirm="confirmDelete"
+        />
     </div>
 </template>
 
@@ -139,6 +160,7 @@ const clientColumns = [
     { key: 'name', label: t('prospects.fields.name') },
     { key: 'email', label: t('prospects.fields.email') },
     { key: 'phone', label: t('prospects.fields.phone') },
+    { key: 'actions', label: '' },
 ]
 
 async function loadClients() {
@@ -225,6 +247,54 @@ async function onProspectSaved() {
     await Promise.all([loadProspects(), loadClients()])
 }
 
+// --- Suppression (clients & prospects) ---
+type DeleteTarget =
+    | { type: 'client'; item: Client }
+    | { type: 'prospect'; item: Prospect }
+
+const deleteModalOpen = ref(false)
+const deleteTarget = ref<DeleteTarget | null>(null)
+
+const deleteModalTitle = computed(() =>
+    deleteTarget.value?.type === 'prospect'
+        ? t('prospects.deleteConfirmTitle')
+        : t('clients.deleteConfirmTitle'),
+)
+
+const deleteModalMessage = computed(() => {
+    if (!deleteTarget.value) return ''
+    const name = deleteTarget.value.item.name
+    return deleteTarget.value.type === 'prospect'
+        ? t('prospects.deleteConfirmMessage', { name })
+        : t('clients.deleteConfirmMessage', { name })
+})
+
+function askDeleteClient(item: Client) {
+    deleteTarget.value = { type: 'client', item }
+    deleteModalOpen.value = true
+}
+
+function askDeleteProspect(item: Prospect) {
+    deleteTarget.value = { type: 'prospect', item }
+    deleteModalOpen.value = true
+}
+
+async function confirmDelete() {
+    const target = deleteTarget.value
+    if (!target) return
+
+    if (target.type === 'client') {
+        await clientService.remove(target.item.id)
+        await loadClients()
+    } else {
+        await prospectService.remove(target.item.id)
+        await loadProspects()
+    }
+
+    deleteModalOpen.value = false
+    deleteTarget.value = null
+}
+
 watch(statusFilter, loadProspects)
 
 onMounted(async () => {

frontend/modules/directory/services/dto/client.ts

@@ -8,6 +8,6 @@ export type Client = {
 
 export type ClientWrite = {
     name: string
-    email: string | null
-    phone: string | null
+    email?: string | null
+    phone?: string | null
 }

frontend/modules/directory/services/dto/prospect.ts

@@ -19,10 +19,10 @@ export type Prospect = {
 
 export type ProspectWrite = {
     name: string
-    company: string | null
-    email: string | null
-    phone: string | null
-    status: ProspectStatus
-    source: string | null
-    notes: string | null
+    company?: string | null
+    email?: string | null
+    phone?: string | null
+    status?: ProspectStatus
+    source?: string | null
+    notes?: string | null
 }