feat(directory) : add prospect detail page with contact/address/report tabs

frontend/modules/directory/pages/directory/prospects/[id].vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="flex flex-col gap-6">
+        <div class="flex items-center gap-3 pt-4">
+            <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
+            <h1 class="text-2xl font-bold text-neutral-900">{{ prospect?.name ?? '…' }}</h1>
+        </div>
+
+        <p v-if="loading">{{ $t('common.loading') }}</p>
+        <template v-else-if="prospect">
+            <MalioTabList v-model="activeTab" :tabs="tabs">
+                <template #contact>
+                    <div class="flex flex-col gap-4 pt-6">
+                        <DirectoryContactBlock
+                            v-for="(contact, i) in contacts"
+                            :key="contact.id || `new-${i}`"
+                            :model-value="contact"
+                            :title="$t('directory.contacts.item', { n: i + 1 })"
+                            :removable="contacts.length > 0"
+                            @update:model-value="(v) => onContactInput(i, v)"
+                            @remove="removeContact(i)"
+                        />
+                        <MalioButton
+                            icon-name="mdi:plus"
+                            icon-position="left"
+                            button-class="w-auto px-4"
+                            :label="$t('directory.contacts.add')"
+                            @click="addContact"
+                        />
+                    </div>
+                </template>
+
+                <template #address>
+                    <div class="flex flex-col gap-4 pt-6">
+                        <DirectoryAddressBlock
+                            v-for="(address, i) in addresses"
+                            :key="address.id || `new-${i}`"
+                            :model-value="address"
+                            :title="$t('directory.addresses.item', { n: i + 1 })"
+                            :removable="addresses.length > 0"
+                            @update:model-value="(v) => onAddressInput(i, v)"
+                            @remove="removeAddress(i)"
+                        />
+                        <MalioButton
+                            icon-name="mdi:plus"
+                            icon-position="left"
+                            button-class="w-auto px-4"
+                            :label="$t('directory.addresses.add')"
+                            @click="addAddress"
+                        />
+                    </div>
+                </template>
+
+                <template #report>
+                    <CommercialReportTab :owner="owner" :is-admin="true" />
+                </template>
+            </MalioTabList>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Prospect } from '~/modules/directory/services/dto/prospect'
+import { useProspectService } from '~/modules/directory/services/prospects'
+
+definePageMeta({ middleware: ['admin'] })
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+
+const id = Number(route.params.id)
+const ownerIri = `/api/prospects/${id}`
+const owner = { prospect: ownerIri }
+
+const prospectService = useProspectService()
+const {
+    contacts,
+    addresses,
+    onContactInput,
+    addContact,
+    removeContact,
+    onAddressInput,
+    addAddress,
+    removeAddress,
+    load,
+} = useDirectoryDetail(owner)
+
+const prospect = ref<Prospect | null>(null)
+const loading = ref(true)
+
+const activeTab = ref('contact')
+const tabs = [
+    { 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' },
+]
+
+function goBack(): void {
+    router.push('/directory')
+}
+
+onMounted(async () => {
+    prospect.value = await prospectService.getById(id)
+    await load()
+    loading.value = false
+})
+</script>