Lesstime/frontend/modules/directory/pages/directory.vue

<template>
    <div class="flex flex-col gap-6">
        <h1 class="text-2xl font-bold text-neutral-900">
            {{ $t('directory.title') }}
        </h1>

        <MalioTabList v-model="activeTab" :tabs="tabs">
            <!-- Clients -->
            <template #clients>
                <div class="flex min-h-[30rem] flex-col gap-4 pt-10">
                    <div class="flex items-center justify-end">
                        <MalioButton
                            icon-name="mdi:plus"
                            icon-position="left"
                            button-class="w-auto px-4"
                            :label="$t('directory.clients.add')"
                            @click="openCreateClient"
                        />
                    </div>

                    <MalioDataTable
                        :columns="clientColumns"
                        :items="clients"
                        :total-items="clients.length"
                        :empty-message="$t('directory.clients.empty')"
                        @row-click="openEditClient"
                    >
                        <template #cell-email="{ item }">
                            {{ (item as Client).email ?? '—' }}
                        </template>
                        <template #cell-phone="{ item }">
                            {{ (item as Client).phone ?? '—' }}
                        </template>
                        <template #cell-city="{ item }">
                            {{ (item as Client).city ?? '—' }}
                        </template>
                    </MalioDataTable>
                </div>
            </template>

            <!-- Prospects -->
            <template #prospects>
                <div class="flex min-h-[30rem] flex-col gap-4 pt-10">
                    <div class="flex flex-wrap items-end justify-between gap-3">
                        <MalioSelect
                            v-model="statusFilter"
                            :label="$t('prospects.fields.status')"
                            :options="statusOptions"
                            :empty-option-label="$t('directory.prospects.allStatuses')"
                            group-class="w-48"
                        />
                        <MalioButton
                            icon-name="mdi:plus"
                            icon-position="left"
                            button-class="w-auto px-4"
                            :label="$t('directory.prospects.add')"
                            @click="openCreateProspect"
                        />
                    </div>

                    <MalioDataTable
                        :columns="prospectColumns"
                        :items="prospectRows"
                        :total-items="prospectRows.length"
                        :empty-message="$t('directory.prospects.empty')"
                        @row-click="openEditProspect"
                    >
                        <template #cell-status="{ item }">
                            <StatusBadge
                                :label="statusLabel((item as ProspectRow).status)"
                                :variant="statusVariant((item as ProspectRow).status)"
                            />
                        </template>
                        <template #cell-email="{ item }">
                            {{ (item as ProspectRow).email ?? '—' }}
                        </template>
                        <template #cell-phone="{ item }">
                            {{ (item as ProspectRow).phone ?? '—' }}
                        </template>
                        <template #cell-actions="{ item }">
                            <div
                                v-if="!(item as ProspectRow).convertedClient"
                                class="flex justify-end"
                                @click.stop
                            >
                                <MalioButtonIcon
                                    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)"
                                />
                            </div>
                            <span v-else class="text-neutral-300">—</span>
                        </template>
                    </MalioDataTable>
                </div>
            </template>
        </MalioTabList>

        <ClientDrawer
            v-model="clientDrawerOpen"
            :client="selectedClient"
            @saved="loadClients"
        />
        <ProspectDrawer
            v-model="prospectDrawerOpen"
            :prospect="selectedProspect"
            @saved="loadProspects"
        />
    </div>
</template>

<script setup lang="ts">
import type { Client } from '~/modules/directory/services/dto/client'
import { useClientService } from '~/modules/directory/services/clients'
import type { Prospect, ProspectStatus } from '~/modules/directory/services/dto/prospect'
import { useProspectService } from '~/modules/directory/services/prospects'

definePageMeta({ middleware: ['admin'] })

type ProspectRow = Prospect

const { t } = useI18n()
useHead({ title: t('directory.title') })

const clientService = useClientService()
const prospectService = useProspectService()

const activeTab = ref('clients')
const tabs = [
    { key: 'clients', label: t('directory.tabs.clients'), icon: 'mdi:account-tie-outline' },
    { key: 'prospects', label: t('directory.tabs.prospects'), icon: 'mdi:account-search-outline' },
]

// --- Clients ---
const clients = ref<Client[]>([])
const clientDrawerOpen = ref(false)
const selectedClient = ref<Client | null>(null)

const clientColumns = [
    { key: 'name', label: t('prospects.fields.name') },
    { key: 'email', label: t('prospects.fields.email') },
    { key: 'phone', label: t('prospects.fields.phone') },
    { key: 'city', label: t('prospects.fields.city') },
]

async function loadClients() {
    clients.value = await clientService.getAll()
}

function openCreateClient() {
    selectedClient.value = null
    clientDrawerOpen.value = true
}

function openEditClient(item: Record<string, unknown>) {
    selectedClient.value = item as Client
    clientDrawerOpen.value = true
}

// --- Prospects ---
const prospects = ref<Prospect[]>([])
const prospectDrawerOpen = ref(false)
const selectedProspect = ref<Prospect | null>(null)
const statusFilter = ref<ProspectStatus | null>(null)

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 prospectColumns = [
    { key: 'name', label: t('prospects.fields.name') },
    { key: 'company', label: t('prospects.fields.company') },
    { key: 'status', label: t('prospects.fields.status') },
    { key: 'email', label: t('prospects.fields.email') },
    { key: 'phone', label: t('prospects.fields.phone') },
    { key: 'actions', label: '' },
]

const prospectRows = computed<ProspectRow[]>(() => prospects.value)

function statusLabel(status: ProspectStatus): string {
    return t(`prospects.status.${status}`)
}

function statusVariant(status: ProspectStatus): 'neutral' | 'info' | 'success' | 'warning' | 'danger' {
    switch (status) {
        case 'new':
            return 'info'
        case 'contacted':
            return 'warning'
        case 'qualified':
            return 'neutral'
        case 'won':
            return 'success'
        case 'lost':
            return 'danger'
        default:
            return 'neutral'
    }
}

async function loadProspects() {
    prospects.value = await prospectService.getAll(statusFilter.value ?? undefined)
}

function openCreateProspect() {
    selectedProspect.value = null
    prospectDrawerOpen.value = true
}

function openEditProspect(item: Record<string, unknown>) {
    selectedProspect.value = item as Prospect
    prospectDrawerOpen.value = true
}

async function convertProspect(row: ProspectRow) {
    await prospectService.convert(row.id)
    await loadProspects()
}

watch(statusFilter, loadProspects)

onMounted(async () => {
    await Promise.all([loadClients(), loadProspects()])
})
</script>

<style scoped>
/* MalioTabList (lib) : aère les onglets verticalement (espace haut/bas du texte) */
:deep([role="tab"]) {
    padding-top: 0.9rem;
    padding-bottom: 0.25rem;
}
</style>