Migration modular monolith DDD (0.1 → 3.3) (#17)

## Migration modular monolith DDD — Lesstime (0.1 → 3.3)

Cette MR regroupe l'intégralité de la refonte en monolithe modulaire (strangler progressif, additif). Elle remplace les MR stackées de Phase 1 (#12–#16), désormais incluses ici.

**Ne pas merger avant validation fonctionnelle** : branche destinée à être testée telle quelle.

### Périmètre — 9 modules sous `src/Module/`
| Phase | Module | Contenu |
|------|--------|---------|
| 0.1 | (socle) | infrastructure modulaire, `ModuleInterface`, mapping Doctrine par module |
| 0.2 | (socle front) | auto-détection des layers Nuxt sous `frontend/modules/*` |
| 1.1 | **Core** | Identité (User/Auth), Notifications, Notifier |
| 1.2 | Core | RBAC fin (permissions `module.resource.action`, sidebar gated) |
| 1.3 | Core | Audit log (`#[Auditable]`, listener, provider DBAL) |
| 2.1 | **TimeTracking** | TimeEntry + MCP + export |
| 2.2 | **ProjectManagement** | cœur métier Projets/Tâches + 38 MCP tools |
| 2.3 | **Absence** | demandes, soldes, policies, justificatifs |
| 2.4 | **Directory** | Clients (migrés) + **Prospects** (nouveau, conversion → Client) |
| 2.5 | **Mail** | intégration IMAP OVH + liens tâches |
| 2.6 | **Integration** | Gitea / BookStack / Zimbra / Share |
| 3.1 | **Reporting** | rapports transverses (DBAL read-only, 0 import inter-module) |
| 3.2 | **ClientPortal** | portail client (ROLE_CLIENT cloisonné, tickets, notifications) |
| 3.3 | (finition) | nettoyage legacy — `src/Entity` vide, app 100% modulaire |

### Architecture
- Découplage inter-modules par **contrats** (`UserInterface`, `ProjectInterface`, `TaskInterface`, `TaskTagInterface`, `ClientInterface`, `ClientTicketInterface`, `LeaveProfileInterface`) + `resolve_target_entities` 100% modulaire (aucune cible legacy).
- Repositories : interface `Domain/Repository` + implémentation `Infrastructure/Doctrine`, bindées.
- Reporting en DBAL read-only pur (aucun import d'entité d'un autre module).
- Chaque migration de module : déplacement à comportement préservé (API publique et noms d'outils MCP inchangés), migrations **additives** uniquement (zéro destructif).

### Sécurité
- ROLE_CLIENT cloisonné : un utilisateur client n'accède qu'à `/portal` et à ses propres tickets (filtrés par `allowedProjects`), interdit sur toute l'API interne.
- Correctif : interdiction pour un client de créer un lien vers le partage SMB (upload uniquement).

### QA non-régression (branche reconstruite from scratch)
- Migrations from scratch + fixtures : OK.
- Compilation dev + prod : OK.
- **180 tests PHPUnit verts**, php-cs-fixer clean, ~96 routes, **66 outils MCP** tous sous `App\Module\*`.
- Smoke test runtime multi-rôles (admin / ROLE_USER / ROLE_CLIENT) : 44 vérifications HTTP, **0 écart**, cloisonnement client étanche.
- Build Nuxt OK, 9 layers, 0 import legacy résiduel.

### Points à arbitrer (hors périmètre de cette migration)
- Durcissement MCP/IDOR pré-existant (`userId` explicite sans scoping sur certains tools TimeTracking/Absence/TaskDocument) — ticket dédié recommandé.
- Validation fonctionnelle de **Prospect** et **ClientPortal** (conçus depuis les specs disque).
- **Harmonisation visuelle Malio finale** (3.3) — finition esthétique inter-modules laissée au PO.

---

## ⚠️ Déploiement / migration des données — à ne pas oublier

### 1. Resynchroniser les séquences PostgreSQL après tout import/restore de dump
Si la prod (ou tout environnement) est **montée depuis un dump** (`pg_restore` / `COPY`), les lignes sont chargées avec leurs `id` explicites **sans avancer les séquences** → au premier `INSERT` : `duplicate key value violates unique constraint "..._pkey"` (constaté en local sur `notification`, `task`, `time_entry`…).

À lancer **juste après chaque restore/import** :

```sql
DO $$
DECLARE r RECORD; maxid BIGINT; seq TEXT;
BEGIN
  FOR r IN SELECT table_name, column_name FROM information_schema.columns WHERE table_schema='public'
  LOOP
    seq := pg_get_serial_sequence(quote_ident(r.table_name), r.column_name);
    IF seq IS NOT NULL THEN
      EXECUTE format('SELECT COALESCE(MAX(%I),0) FROM %I', r.column_name, r.table_name) INTO maxid;
      PERFORM setval(seq, GREATEST(maxid,1), maxid > 0);
    END IF;
  END LOOP;
END $$;
```

> Ne concerne **pas** une prod qui tourne déjà (séquences avancées organiquement) — uniquement le cas restore/import. Idempotent, sans risque.

### 2. Fix dénormalisation des collections typées-contrat (code, inclus dans la branche)
Les relations **to-many** typées par une interface `Shared\Domain\Contract\*` (`TimeEntry::tags` → `TaskTagInterface`, `Task::collaborators` → `UserInterface`) étaient **indénormalisables par API Platform** (mono-valué OK via IRI, collection KO) → **tout POST/PATCH portant une telle collection renvoyait 400/500**. Corrigé par un dénormaliseur générique `ContractRelationDenormalizer` (réutilise `resolve_target_entities`, zéro couplage par-entité) + test fonctionnel de non-régression.

---------

Co-authored-by: Matthieu <contact@malio.fr>
Reviewed-on: #17

frontend/app/layouts/default.vue

@@ -38,131 +38,47 @@
                     </button>
                 </div>
                 <nav class="flex-1 overflow-hidden" :class="sidebarIsCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
-                    <SidebarLink
-                        to="/"
-                        icon="mdi:view-dashboard-outline"
-                        label="Tableau de bord"
-                        :collapsed="sidebarIsCollapsed"
-                        :class="sidebarIsCollapsed ? 'mt-4' : 'border-t border-secondary-500 pt-6'"
-                        @click="ui.closeMobileSidebar()"
-                    />
-
-                    <!-- Section : Gestion de projet -->
-                    <p v-if="!sidebarIsCollapsed" class="px-4 pt-5 pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400">
-                        Gestion de projet
-                    </p>
-                    <div v-else class="mx-2 my-3 border-t border-secondary-500" />
-                    <SidebarLink
-                        to="/my-tasks"
-                        icon="mdi:clipboard-check-outline"
-                        label="Mes tâches"
-                        :collapsed="sidebarIsCollapsed"
-                        @click="ui.closeMobileSidebar()"
-                    />
-                    <SidebarLink
-                        to="/projects"
-                        icon="mdi:folder-outline"
-                        label="Projets"
-                        :collapsed="sidebarIsCollapsed"
-                        @click="ui.closeMobileSidebar()"
-                    />
-                    <template v-if="currentProjectId">
-                        <SidebarLink
-                            :to="`/projects/${currentProjectId}`"
-                            icon="mdi:view-column-outline"
-                            label="Kanban"
-                            :collapsed="sidebarIsCollapsed"
-                            sub
-                            exact
-                            @click="ui.closeMobileSidebar()"
-                        />
-                        <SidebarLink
-                            :to="`/projects/${currentProjectId}/groups`"
-                            icon="mdi:tag-multiple-outline"
-                            label="Groupes"
-                            :collapsed="sidebarIsCollapsed"
-                            sub
-                            @click="ui.closeMobileSidebar()"
-                        />
-                        <SidebarLink
-                            :to="`/projects/${currentProjectId}/archives`"
-                            icon="mdi:archive-outline"
-                            label="Archives"
-                            :collapsed="sidebarIsCollapsed"
-                            sub
-                            @click="ui.closeMobileSidebar()"
-                        />
-                    </template>
-                    <SidebarLink
-                        to="/time-tracking"
-                        icon="mdi:calendar-edit-outline"
-                        label="Suivi de temps"
-                        :collapsed="sidebarIsCollapsed"
-                        @click="ui.closeMobileSidebar()"
-                    />
-                    <SidebarLink
-                        v-if="isDocumentsVisible"
-                        to="/documents"
-                        icon="mdi:folder-network-outline"
-                        :label="$t('sharedFiles.sidebar.title')"
-                        :collapsed="sidebarIsCollapsed"
-                        @click="ui.closeMobileSidebar()"
-                    />
-                    <div v-if="isMailVisible" class="relative">
-                        <SidebarLink
-                            to="/mail"
-                            icon="mdi:email-outline"
-                            :label="$t('mail.sidebar.title')"
-                            :collapsed="sidebarIsCollapsed"
-                            @click="ui.closeMobileSidebar()"
-                        />
-                        <span
-                            v-if="mailStore.globalUnreadCount > 0"
-                            class="pointer-events-none absolute right-3 top-1/2 flex h-5 min-w-5 -translate-y-1/2 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-bold text-white"
-                            :class="{ 'right-1 top-1 translate-y-0': sidebarIsCollapsed }"
-                            :aria-label="`${mailStore.globalUnreadCount} messages non lus`"
-                        >
-                            {{ mailStore.globalUnreadCount > 99 ? '99+' : mailStore.globalUnreadCount }}
-                        </span>
-                    </div>
-
-                    <!-- Section : Absences -->
-                    <template v-if="isAbsenceSectionVisible">
+                    <!-- Sections dynamiques (/api/sidebar) : navigation globale + sections gated par rôle -->
+                    <template v-for="(section, sIndex) in translatedSections" :key="section.label">
                         <p v-if="!sidebarIsCollapsed" class="px-4 pt-5 pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400">
-                            Absences
-                        </p>
-                        <div v-else class="mx-2 my-3 border-t border-secondary-500" />
-                    </template>
-                    <SidebarLink
-                        v-if="isEmployee"
-                        to="/absences"
-                        icon="mdi:umbrella-beach-outline"
-                        label="Mes absences"
-                        :collapsed="sidebarIsCollapsed"
-                        @click="ui.closeMobileSidebar()"
-                    />
-                    <SidebarLink
-                        v-if="isAdmin"
-                        to="/team-absences"
-                        icon="mdi:calendar-account-outline"
-                        label="Absences équipe"
-                        :collapsed="sidebarIsCollapsed"
-                        @click="ui.closeMobileSidebar()"
-                    />
-
-                    <!-- Section : Administration (admin only) -->
-                    <template v-if="isAdmin">
-                        <p v-if="!sidebarIsCollapsed" class="px-4 pt-5 pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400">
-                            Administration
+                            {{ section.label }}
                         </p>
                         <div v-else class="mx-2 my-3 border-t border-secondary-500" />
                         <SidebarLink
-                            to="/admin"
-                            icon="mdi:cog-outline"
-                            label="Administration"
+                            v-for="item in section.items"
+                            :key="item.to"
+                            :to="item.to"
+                            :icon="item.icon"
+                            :label="item.label"
                             :collapsed="sidebarIsCollapsed"
                             @click="ui.closeMobileSidebar()"
                         />
+
+                        <!-- Items conservés côté client, insérés après la 1re section (cf. décision 3) -->
+                        <template v-if="sIndex === 0">
+                            <!-- Contextuel projet -->
+                            <template v-if="currentProjectId">
+                                <SidebarLink :to="`/projects/${currentProjectId}`" icon="mdi:view-column-outline" label="Kanban" :collapsed="sidebarIsCollapsed" sub exact @click="ui.closeMobileSidebar()" />
+                                <SidebarLink :to="`/projects/${currentProjectId}/groups`" icon="mdi:tag-multiple-outline" label="Groupes" :collapsed="sidebarIsCollapsed" sub @click="ui.closeMobileSidebar()" />
+                                <SidebarLink :to="`/projects/${currentProjectId}/archives`" icon="mdi:archive-outline" label="Archives" :collapsed="sidebarIsCollapsed" sub @click="ui.closeMobileSidebar()" />
+                            </template>
+                            <!-- Feature-flag : Documents -->
+                            <SidebarLink v-if="isDocumentsVisible" to="/documents" icon="mdi:folder-network-outline" :label="$t('sharedFiles.sidebar.title')" :collapsed="sidebarIsCollapsed" @click="ui.closeMobileSidebar()" />
+                            <!-- Feature-flag : Mail + badge -->
+                            <div v-if="isMailVisible" class="relative">
+                                <SidebarLink to="/mail" icon="mdi:email-outline" :label="$t('mail.sidebar.title')" :collapsed="sidebarIsCollapsed" @click="ui.closeMobileSidebar()" />
+                                <span
+                                    v-if="mailStore.globalUnreadCount > 0"
+                                    class="pointer-events-none absolute right-3 top-1/2 flex h-5 min-w-5 -translate-y-1/2 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-bold text-white"
+                                    :class="{ 'right-1 top-1 translate-y-0': sidebarIsCollapsed }"
+                                    :aria-label="`${mailStore.globalUnreadCount} messages non lus`"
+                                >
+                                    {{ mailStore.globalUnreadCount > 99 ? '99+' : mailStore.globalUnreadCount }}
+                                </span>
+                            </div>
+                            <!-- User-flag : Mes absences (isEmployee — non couvert par le gate rôle) -->
+                            <SidebarLink v-if="isEmployee" to="/absences" icon="mdi:umbrella-beach-outline" label="Mes absences" :collapsed="sidebarIsCollapsed" @click="ui.closeMobileSidebar()" />
+                        </template>
                     </template>
                 </nav>
 
@@ -209,8 +125,8 @@
 
 <script setup lang="ts">
 import type { UserData } from '~/services/dto/user-data'
-import type { Project } from '~/services/dto/project'
-import type { TaskTag } from '~/services/dto/task-tag'
+import type { Project } from '~/modules/project-management/services/dto/project'
+import type { TaskTag } from '~/modules/project-management/services/dto/task-tag'
 import { useAppVersion } from '~/composables/useAppVersion'
 import type { HydraCollection } from '~/utils/api'
 import { extractHydraMembers } from '~/utils/api'
@@ -220,10 +136,27 @@ const ui = useUiStore()
 const mailStore = useMailStore()
 const {version} = useAppVersion()
 const route = useRoute()
+const { t } = useI18n()
+const { sections } = useSidebar()
+
+// `/mail` est déclaré dans config/sidebar.php pour le gating module (disabledRoutes),
+// mais son rendu visuel + badge non-lus est géré manuellement ci-dessous (feature-flag Mail).
+// On le filtre des sections dynamiques pour éviter un doublon dans la nav.
+const translatedSections = computed(() =>
+    sections.value.map((section) => ({
+        label: t(section.label),
+        icon: section.icon,
+        items: section.items
+            .filter((item) => item.to !== '/mail')
+            .map((item) => ({
+                label: t(item.label),
+                to: item.to,
+                icon: item.icon,
+            })),
+    })),
+)
 
-const isAdmin = computed(() => (auth.user?.roles ?? []).includes('ROLE_ADMIN'))
 const isEmployee = computed(() => Boolean(auth.user?.isEmployee))
-const isAbsenceSectionVisible = computed(() => isEmployee.value || isAdmin.value)
 
 const isMailVisible = computed(() => {
     const roles: string[] = auth.user?.roles ?? []

frontend/app/middleware/auth.global.ts

@@ -0,0 +1,30 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+    const auth = useAuthStore()
+    const isLogin = to.path === '/login'
+
+    if (!auth.checked) {
+        await auth.ensureSession()
+    }
+
+    if (!isLogin && !auth.isAuthenticated) {
+        return navigateTo('/login')
+    }
+
+    if (isLogin && auth.isAuthenticated) {
+        return navigateTo('/')
+    }
+
+    const { loaded: sidebarLoaded, loadSidebar, resetSidebar } = useSidebar()
+    const { loaded: modulesLoaded, loadModules, resetModules } = useModules()
+
+    if (auth.isAuthenticated) {
+        await Promise.all([
+            sidebarLoaded.value ? Promise.resolve() : loadSidebar(),
+            modulesLoaded.value ? Promise.resolve() : loadModules(),
+        ])
+    } else {
+        // Logout / session expirée : purge l'état partagé pour le prochain login.
+        resetSidebar()
+        resetModules()
+    }
+})

frontend/app/middleware/modules.global.ts

@@ -0,0 +1,15 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+    const auth = useAuthStore()
+    if (!auth.isAuthenticated) {
+        return
+    }
+
+    const { loaded, loadSidebar, isRouteDisabled } = useSidebar()
+    if (!loaded.value) {
+        await loadSidebar()
+    }
+
+    if (isRouteDisabled(to.path)) {
+        return navigateTo('/')
+    }
+})

frontend/components/admin/AdminAbsencePolicyTab.vue

@@ -51,8 +51,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AbsencePolicy } from '~/services/dto/absence'
-import { useAbsenceService } from '~/services/absences'
+import type { AbsencePolicy } from '~/modules/absence/services/dto/absence'
+import { useAbsenceService } from '~/modules/absence/services/absences'
 
 const service = useAbsenceService()
 const rows = ref<AbsencePolicy[]>([])

frontend/components/admin/AdminAuditTab.vue

@@ -0,0 +1,160 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">{{ $t('admin.audit.title') }}</h2>
+        </div>
+
+        <div class="mt-4 flex flex-wrap gap-4">
+            <MalioSelect
+                v-model="entityTypeFilter"
+                :options="entityTypeOptions"
+                :label="$t('admin.audit.filterEntityType')"
+                :empty-option-label="$t('admin.audit.filterEntityTypeAll')"
+                group-class="w-64"
+            />
+            <MalioSelect
+                v-model="actionFilter"
+                :options="actionOptions"
+                :label="$t('admin.audit.filterAction')"
+                :empty-option-label="$t('admin.audit.filterActionAll')"
+                group-class="w-64"
+            />
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="rows"
+            :loading="isLoading"
+            :empty-message="$t('admin.audit.empty')"
+        >
+            <template #cell-performedAt="{ item }">
+                {{ formatDate(item.performedAt) }}
+            </template>
+            <template #cell-entityType="{ item }">
+                {{ entityTypeLabel(item.entityType) }}
+            </template>
+            <template #cell-action="{ item }">
+                {{ actionLabel(item.action) }}
+            </template>
+        </DataTable>
+
+        <div class="mt-4 flex items-center justify-between">
+            <span class="text-sm text-neutral-500">{{ $t('admin.audit.page', { page }) }}</span>
+            <div class="flex gap-2">
+                <MalioButton
+                    variant="secondary"
+                    button-class="w-auto px-4"
+                    :label="$t('admin.audit.previous')"
+                    :disabled="page <= 1 || isLoading"
+                    @click="goToPage(page - 1)"
+                />
+                <MalioButton
+                    variant="secondary"
+                    button-class="w-auto px-4"
+                    :label="$t('admin.audit.next')"
+                    :disabled="!hasNextPage || isLoading"
+                    @click="goToPage(page + 1)"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { AuditLogAction, AuditLogItem } from '~/modules/core/services/audit-logs'
+import { useAuditLogService } from '~/modules/core/services/audit-logs'
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const { t, te } = useI18n()
+
+const PAGE_SIZE = 30
+
+const columns = computed<DataTableColumn[]>(() => [
+    { key: 'performedAt', label: t('admin.audit.date'), primary: true },
+    { key: 'performedBy', label: t('admin.audit.performedBy') },
+    { key: 'entityType', label: t('admin.audit.entityType') },
+    { key: 'action', label: t('admin.audit.action') },
+    { key: 'entityId', label: t('admin.audit.entityId') },
+])
+
+const actionOptions = computed<{ value: AuditLogAction, label: string }[]>(() => [
+    { value: 'create', label: t('audit.action.create') },
+    { value: 'update', label: t('audit.action.update') },
+    { value: 'delete', label: t('audit.action.delete') },
+])
+
+const auditLogService = useAuditLogService()
+
+const rows = ref<AuditLogItem[]>([])
+const entityTypes = ref<string[]>([])
+const totalItems = ref(0)
+const page = ref(1)
+const isLoading = ref(true)
+const entityTypeFilter = ref<string | null>(null)
+const actionFilter = ref<AuditLogAction | null>(null)
+
+const entityTypeOptions = computed<{ value: string, label: string }[]>(() =>
+    entityTypes.value.map((value) => ({ value, label: entityTypeLabel(value) })),
+)
+
+// PAGE_SIZE must match the API default page size. The full-page guard keeps the
+// "next" button accurate even on the last (partial) page.
+const hasNextPage = computed(() => rows.value.length >= PAGE_SIZE && page.value * PAGE_SIZE < totalItems.value)
+
+function entityTypeLabel(value: string): string {
+    const key = `audit.entity.${value}`
+    return te(key) ? t(key) : value
+}
+
+function actionLabel(action: AuditLogAction): string {
+    return t(`audit.action.${action}`)
+}
+
+function formatDate(value: string): string {
+    return new Date(value).toLocaleString('fr-FR', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    })
+}
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        const result = await auditLogService.list({
+            page: page.value,
+            entityType: entityTypeFilter.value ?? undefined,
+            action: actionFilter.value ?? undefined,
+        })
+        rows.value = result.items
+        totalItems.value = result.totalItems
+    } finally {
+        isLoading.value = false
+    }
+}
+
+async function loadEntityTypes() {
+    entityTypes.value = await auditLogService.entityTypes()
+}
+
+function goToPage(target: number) {
+    if (target < 1) {
+        return
+    }
+    page.value = target
+    loadItems()
+}
+
+watch([entityTypeFilter, actionFilter], () => {
+    page.value = 1
+    loadItems()
+})
+
+onMounted(() => {
+    loadItems()
+    loadEntityTypes()
+})
+</script>

frontend/components/admin/AdminBookStackTab.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { useBookStackService } from '~/services/bookstack'
+import { useBookStackService } from '~/modules/integration/services/bookstack'
 
 const { getSettings, saveSettings, testConnection } = useBookStackService()
 

frontend/components/admin/AdminClientTab.vue

@@ -40,8 +40,8 @@
 </template>
 
 <script setup lang="ts">
-import type { Client } from '~/services/dto/client'
-import { useClientService } from '~/services/clients'
+import type { Client } from '~/modules/directory/services/dto/client'
+import { useClientService } from '~/modules/directory/services/clients'
 
 import type { DataTableColumn } from '~/components/ui/DataTable.vue'
 

frontend/components/admin/AdminEffortTab.vue

@@ -30,8 +30,8 @@
 </template>
 
 <script setup lang="ts">
-import type { TaskEffort } from '~/services/dto/task-effort'
-import { useTaskEffortService } from '~/services/task-efforts'
+import type { TaskEffort } from '~/modules/project-management/services/dto/task-effort'
+import { useTaskEffortService } from '~/modules/project-management/services/task-efforts'
 
 import type { DataTableColumn } from '~/components/ui/DataTable.vue'
 

frontend/components/admin/AdminGiteaTab.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { useGiteaService } from '~/services/gitea'
+import { useGiteaService } from '~/modules/integration/services/gitea'
 
 const { getSettings, saveSettings, testConnection } = useGiteaService()
 

frontend/components/admin/AdminMailTab.vue

@@ -140,7 +140,7 @@
 </template>
 
 <script setup lang="ts">
-import { useMailService } from '~/services/mail'
+import { useMailService } from '~/modules/mail/services/mail'
 
 const { getConfiguration, updateConfiguration, testConfiguration } = useMailService()
 

frontend/components/admin/AdminPriorityTab.vue

@@ -37,8 +37,8 @@
 </template>
 
 <script setup lang="ts">
-import type { TaskPriority } from '~/services/dto/task-priority'
-import { useTaskPriorityService } from '~/services/task-priorities'
+import type { TaskPriority } from '~/modules/project-management/services/dto/task-priority'
+import { useTaskPriorityService } from '~/modules/project-management/services/task-priorities'
 
 import type { DataTableColumn } from '~/components/ui/DataTable.vue'
 

frontend/components/admin/AdminRoleTab.vue

@@ -0,0 +1,116 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-neutral-900">{{ $t('admin.roles.title') }}</h2>
+            <MalioButton
+                icon-name="mdi:plus"
+                icon-position="left"
+                button-class="w-auto px-4"
+                :label="$t('admin.roles.addRole')"
+                @click="openCreate"
+            />
+        </div>
+
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            :empty-message="$t('admin.roles.empty')"
+            @row-click="openEdit"
+        >
+            <template #cell-isSystem="{ item }">
+                <span
+                    v-if="item.isSystem"
+                    class="rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-600"
+                >
+                    {{ $t('admin.roles.system') }}
+                </span>
+            </template>
+            <template #cell-permissions="{ item }">
+                <span class="text-neutral-600">{{ item.permissions.length }}</span>
+            </template>
+            <template #actions="{ item }">
+                <MalioButtonIcon
+                    v-if="!item.isSystem"
+                    icon="mdi:delete-outline"
+                    :aria-label="$t('common.delete')"
+                    variant="ghost"
+                    icon-size="20"
+                    button-class="text-neutral-400 hover:text-red-500"
+                    @click.stop="handleDelete(item.id)"
+                />
+            </template>
+        </DataTable>
+
+        <RoleDrawer
+            v-model="drawerOpen"
+            :item="selectedItem"
+            :permissions="permissions"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Role } from '~/modules/core/services/roles'
+import { useRoleService } from '~/modules/core/services/roles'
+import type { Permission } from '~/modules/core/services/permissions'
+import { usePermissionService } from '~/modules/core/services/permissions'
+
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+
+const { t } = useI18n()
+
+const columns = computed<DataTableColumn[]>(() => [
+    { key: 'label', label: t('admin.roles.label'), primary: true },
+    { key: 'code', label: t('admin.roles.code') },
+    { key: 'permissions', label: t('admin.roles.permissions') },
+    { key: 'isSystem', label: '' },
+])
+
+const roleService = useRoleService()
+const permissionService = usePermissionService()
+
+const items = ref<Role[]>([])
+const permissions = ref<Permission[]>([])
+const isLoading = ref(true)
+const drawerOpen = ref(false)
+const selectedItem = ref<Role | null>(null)
+
+async function loadItems() {
+    isLoading.value = true
+    try {
+        items.value = await roleService.list()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+async function loadPermissions() {
+    permissions.value = await permissionService.list()
+}
+
+function openCreate() {
+    selectedItem.value = null
+    drawerOpen.value = true
+}
+
+function openEdit(item: Role) {
+    selectedItem.value = item
+    drawerOpen.value = true
+}
+
+async function handleDelete(id: number) {
+    await roleService.remove(id)
+    await loadItems()
+}
+
+async function onSaved() {
+    await loadItems()
+}
+
+onMounted(() => {
+    loadItems()
+    loadPermissions()
+})
+</script>

frontend/components/admin/AdminShareTab.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import { useShareSettingsService } from '~/services/share-settings'
+import { useShareSettingsService } from '~/modules/integration/services/share-settings'
 
 const { getSettings, saveSettings, testConnection } = useShareSettingsService()
 

frontend/components/admin/AdminTagTab.vue

@@ -37,8 +37,8 @@
 </template>
 
 <script setup lang="ts">
-import type { TaskTag } from '~/services/dto/task-tag'
-import { useTaskTagService } from '~/services/task-tags'
+import type { TaskTag } from '~/modules/project-management/services/dto/task-tag'
+import { useTaskTagService } from '~/modules/project-management/services/task-tags'
 
 import type { DataTableColumn } from '~/components/ui/DataTable.vue'
 

frontend/components/admin/AdminWorkflowTab.vue

@@ -42,8 +42,8 @@
 </template>
 
 <script setup lang="ts">
-import type { Workflow } from '~/services/dto/workflow'
-import { useWorkflowService } from '~/services/workflows'
+import type { Workflow } from '~/modules/project-management/services/dto/workflow'
+import { useWorkflowService } from '~/modules/project-management/services/workflows'
 import type { DataTableColumn } from '~/components/ui/DataTable.vue'
 
 const { t } = useI18n()

frontend/components/admin/AdminZimbraTab.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { useZimbraService } from '~/services/zimbra'
+import { useZimbraService } from '~/modules/integration/services/zimbra'
 
 const { getSettings, saveSettings, testConnection } = useZimbraService()
 

frontend/components/admin/RoleDrawer.vue

@@ -0,0 +1,186 @@
+<template>
+    <MalioDrawer v-model="isOpen">
+        <template #header>
+            <h2 class="text-xl font-bold">
+                {{ isEditing ? $t('admin.roles.editRole') : $t('admin.roles.addRole') }}
+            </h2>
+        </template>
+        <form class="flex flex-col gap-3" @submit.prevent="handleSubmit">
+            <MalioInputText
+                v-model="form.code"
+                :label="$t('admin.roles.code')"
+                input-class="w-full"
+                :disabled="isEditing"
+                :hint="isEditing ? $t('admin.roles.codeImmutable') : $t('admin.roles.codeHint')"
+                :error="touched.code && !codeValid ? $t('admin.roles.codeInvalid') : ''"
+                @blur="touched.code = true"
+            />
+            <MalioInputText
+                v-model="form.label"
+                :label="$t('admin.roles.label')"
+                input-class="w-full"
+                :error="touched.label && !form.label.trim() ? $t('admin.roles.labelRequired') : ''"
+                @blur="touched.label = true"
+            />
+            <MalioInputTextArea
+                v-model="form.description"
+                :label="$t('admin.roles.description')"
+                input-class="w-full"
+            />
+
+            <div class="mt-2">
+                <label class="text-sm font-semibold text-neutral-700">
+                    {{ $t('admin.roles.permissions') }}
+                </label>
+                <p v-if="permissions.length === 0" class="mt-2 text-xs text-neutral-400">
+                    {{ $t('admin.roles.noPermissions') }}
+                </p>
+                <div
+                    v-for="group in groupedPermissions"
+                    :key="group.module"
+                    class="mt-3 rounded-lg border border-neutral-200 p-3"
+                >
+                    <p class="mb-2 text-xs font-bold uppercase tracking-wide text-neutral-500">
+                        {{ group.module }}
+                    </p>
+                    <div class="flex flex-col gap-2">
+                        <label
+                            v-for="perm in group.permissions"
+                            :key="perm.id"
+                            class="flex items-start gap-2 text-sm text-neutral-700"
+                        >
+                            <input
+                                v-model="form.permissions"
+                                type="checkbox"
+                                :value="perm['@id']"
+                                class="mt-0.5 rounded border-neutral-300"
+                            />
+                            <span>
+                                {{ perm.label }}
+                                <span class="block text-xs text-neutral-400">{{ perm.code }}</span>
+                            </span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mt-4 flex justify-end">
+                <MalioButton
+                    :label="$t('common.save')"
+                    button-class="w-auto px-6"
+                    :disabled="isSubmitting"
+                    @click="handleSubmit"
+                />
+            </div>
+        </form>
+    </MalioDrawer>
+</template>
+
+<script setup lang="ts">
+import type { Role, RoleWrite } from '~/modules/core/services/roles'
+import { useRoleService } from '~/modules/core/services/roles'
+import type { Permission } from '~/modules/core/services/permissions'
+
+const props = defineProps<{
+    modelValue: boolean
+    item: Role | null
+    permissions: Permission[]
+}>()
+
+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.item)
+const isSubmitting = ref(false)
+
+const form = reactive({
+    code: '',
+    label: '',
+    description: '',
+    permissions: [] as string[],
+})
+
+const touched = reactive({
+    code: false,
+    label: false,
+})
+
+const codeValid = computed(() => /^[a-z][a-z0-9_]*$/.test(form.code))
+
+const groupedPermissions = computed(() => {
+    const byModule = new Map<string, Permission[]>()
+    for (const perm of props.permissions) {
+        const list = byModule.get(perm.module) ?? []
+        list.push(perm)
+        byModule.set(perm.module, list)
+    }
+    return [...byModule.entries()]
+        .map(([module, permissions]) => ({ module, permissions }))
+        .sort((a, b) => a.module.localeCompare(b.module))
+})
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.item) {
+            form.code = props.item.code
+            form.label = props.item.label
+            form.description = props.item.description ?? ''
+            form.permissions = props.item.permissions
+                .map((p) => p['@id'])
+                .filter((iri): iri is string => !!iri)
+        } else {
+            form.code = ''
+            form.label = ''
+            form.description = ''
+            form.permissions = []
+        }
+        touched.code = false
+        touched.label = false
+    }
+})
+
+const { create, update } = useRoleService()
+
+async function handleSubmit() {
+    touched.code = true
+    touched.label = true
+    if (!form.label.trim()) {
+        return
+    }
+    if (!isEditing.value && !codeValid.value) {
+        return
+    }
+
+    isSubmitting.value = true
+    try {
+        if (isEditing.value && props.item) {
+            const payload: Partial<RoleWrite> = {
+                label: form.label.trim(),
+                description: form.description.trim() || null,
+                permissions: form.permissions,
+            }
+            await update(props.item.id, payload)
+        } else {
+            const payload: RoleWrite = {
+                code: form.code.trim(),
+                label: form.label.trim(),
+                description: form.description.trim() || null,
+                permissions: form.permissions,
+            }
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>

frontend/components/admin/WorkflowDrawer.vue

@@ -96,11 +96,11 @@
 </template>
 
 <script setup lang="ts">
-import type { Workflow, StatusCategory } from '~/services/dto/workflow'
-import { STATUS_CATEGORY_COLOR } from '~/services/dto/workflow'
-import type { TaskStatusWrite } from '~/services/dto/task-status'
-import { useWorkflowService } from '~/services/workflows'
-import { useTaskStatusService } from '~/services/task-statuses'
+import type { Workflow, StatusCategory } from '~/modules/project-management/services/dto/workflow'
+import { STATUS_CATEGORY_COLOR } from '~/modules/project-management/services/dto/workflow'
+import type { TaskStatusWrite } from '~/modules/project-management/services/dto/task-status'
+import { useWorkflowService } from '~/modules/project-management/services/workflows'
+import { useTaskStatusService } from '~/modules/project-management/services/task-statuses'
 
 const { t } = useI18n()
 

frontend/components/share/SharedFilePreview.vue

@@ -167,8 +167,8 @@
 </template>
 
 <script setup lang="ts">
-import type { FileEntry } from '~/services/dto/share'
-import { useShareService } from '~/services/share'
+import type { FileEntry } from '~/modules/integration/services/dto/share'
+import { useShareService } from '~/modules/integration/services/share'
 import { formatFileSize } from '~/utils/format'
 
 const props = defineProps<{

frontend/components/user/UserDrawer.vue

@@ -106,30 +106,43 @@ const touched = reactive({
     password: false,
 })
 
-watch(() => props.modelValue, (open) => {
-    if (open) {
-        if (props.item) {
-            form.username = props.item.username ?? ''
-            form.firstName = props.item.firstName ?? ''
-            form.lastName = props.item.lastName ?? ''
-            form.password = ''
-            form.roles = [...props.item.roles]
-            form.isEmployee = props.item.isEmployee ?? false
-        } else {
-            form.username = ''
-            form.firstName = ''
-            form.lastName = ''
-            form.password = ''
-            form.roles = ['ROLE_USER']
-            form.isEmployee = false
+const { create, update, getById } = useUserService()
+
+function applyUser(user: UserData) {
+    form.username = user.username ?? ''
+    form.firstName = user.firstName ?? ''
+    form.lastName = user.lastName ?? ''
+    form.password = ''
+    form.roles = [...user.roles]
+    form.isEmployee = user.isEmployee ?? false
+}
+
+watch(() => props.modelValue, async (open) => {
+    if (!open) {
+        return
+    }
+
+    touched.username = false
+    touched.password = false
+
+    if (props.item) {
+        applyUser(props.item)
+        try {
+            const full = await getById(props.item.id)
+            applyUser(full)
+        } catch {
+            // Keep the list data if the detailed fetch fails.
         }
-        touched.username = false
-        touched.password = false
+    } else {
+        form.username = ''
+        form.firstName = ''
+        form.lastName = ''
+        form.password = ''
+        form.roles = ['ROLE_USER']
+        form.isEmployee = false
     }
 })
 
-const { create, update } = useUserService()
-
 async function handleSubmit() {
     touched.username = true
     touched.password = true

frontend/middleware/auth.global.ts

@@ -1,16 +0,0 @@
-export default defineNuxtRouteMiddleware(async (to) => {
-    const auth = useAuthStore()
-    const isLogin = to.path === '/login'
-
-    if (!auth.checked) {
-        await auth.ensureSession()
-    }
-
-    if (!isLogin && !auth.isAuthenticated) {
-        return navigateTo('/login')
-    }
-
-    if (isLogin && auth.isAuthenticated) {
-        return navigateTo('/')
-    }
-})

frontend/modules/absence/components/AbsenceBalanceAdjustDrawer.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AbsenceBalance } from '~/services/dto/absence'
-import { useAbsenceService } from '~/services/absences'
+import type { AbsenceBalance } from '~/modules/absence/services/dto/absence'
+import { useAbsenceService } from '~/modules/absence/services/absences'
 
 const props = defineProps<{
     modelValue: boolean

frontend/modules/absence/components/AbsenceBalanceCards.vue

@@ -73,8 +73,7 @@
 </template>
 
 <script setup lang="ts">
-import type { AbsenceBalance } from '~/services/dto/absence'
-import { useAbsenceHelpers } from '~/composables/useAbsenceHelpers'
+import type { AbsenceBalance } from '~/modules/absence/services/dto/absence'
 
 const props = defineProps<{
     balances: AbsenceBalance[]

frontend/modules/absence/components/AbsenceCalendar.vue

@@ -52,9 +52,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AbsenceRequest } from '~/services/dto/absence'
-import { useAbsenceService } from '~/services/absences'
-import { useAbsenceHelpers } from '~/composables/useAbsenceHelpers'
+import type { AbsenceRequest } from '~/modules/absence/services/dto/absence'
+import { useAbsenceService } from '~/modules/absence/services/absences'
 
 const props = defineProps<{
     absences: AbsenceRequest[]

frontend/modules/absence/components/AbsenceDateField.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import type { HalfDay } from '~/services/dto/absence'
+import type { HalfDay } from '~/modules/absence/services/dto/absence'
 
 const props = withDefaults(defineProps<{
     /** ISO date string "YYYY-MM-DD" or null. */

frontend/modules/absence/components/AbsenceDetailDrawer.vue

@@ -135,9 +135,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AbsenceRequest } from '~/services/dto/absence'
-import { useAbsenceService } from '~/services/absences'
-import { useAbsenceHelpers } from '~/composables/useAbsenceHelpers'
+import type { AbsenceRequest } from '~/modules/absence/services/dto/absence'
+import { useAbsenceService } from '~/modules/absence/services/absences'
 
 const props = defineProps<{
     modelValue: boolean

frontend/modules/absence/components/AbsenceRejectDrawer.vue

@@ -26,9 +26,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AbsenceRequest } from '~/services/dto/absence'
-import { useAbsenceService } from '~/services/absences'
-import { useAbsenceHelpers } from '~/composables/useAbsenceHelpers'
+import type { AbsenceRequest } from '~/modules/absence/services/dto/absence'
+import { useAbsenceService } from '~/modules/absence/services/absences'
 
 const props = defineProps<{
     modelValue: boolean

frontend/modules/absence/components/AbsenceRequestDrawer.vue

@@ -105,9 +105,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AbsencePolicy, AbsencePreviewResult, AbsenceType, HalfDay } from '~/services/dto/absence'
-import { useAbsenceService } from '~/services/absences'
-import { useAbsenceHelpers } from '~/composables/useAbsenceHelpers'
+import type { AbsencePolicy, AbsencePreviewResult, AbsenceType, HalfDay } from '~/modules/absence/services/dto/absence'
+import { useAbsenceService } from '~/modules/absence/services/absences'
 
 const props = defineProps<{
     modelValue: boolean

frontend/modules/absence/composables/useAbsenceHelpers.ts

@@ -1,4 +1,4 @@
-import type { AbsenceRequest, AbsenceStatus, AbsenceType, HalfDay } from '~/services/dto/absence'
+import type { AbsenceRequest, AbsenceStatus, AbsenceType, HalfDay } from '~/modules/absence/services/dto/absence'
 
 export type BadgeVariant = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 

frontend/modules/absence/nuxt.config.ts

@@ -0,0 +1 @@
+export default defineNuxtConfig({})

frontend/modules/absence/pages/absences.vue

@@ -69,9 +69,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AbsenceBalance, AbsencePolicy, AbsenceRequest, AbsenceStatus, AbsenceType } from '~/services/dto/absence'
-import { useAbsenceService, type AbsenceRequestFilters } from '~/services/absences'
-import { useAbsenceHelpers } from '~/composables/useAbsenceHelpers'
+import type { AbsenceBalance, AbsencePolicy, AbsenceRequest, AbsenceStatus, AbsenceType } from '~/modules/absence/services/dto/absence'
+import { useAbsenceService, type AbsenceRequestFilters } from '~/modules/absence/services/absences'
 
 type Row = AbsenceRequest & { typeLabelText: string; periodText: string; daysText: string; createdAtText: string }
 

frontend/modules/absence/pages/team-absences.vue

@@ -198,12 +198,11 @@ import type {
     AbsenceRequest,
     AbsenceStatus,
     AbsenceType,
-} from "~/services/dto/absence";
+} from "~/modules/absence/services/dto/absence";
 import {
     useAbsenceService,
     type AbsenceRequestFilters,
-} from "~/services/absences";
-import { useAbsenceHelpers } from "~/composables/useAbsenceHelpers";
+} from "~/modules/absence/services/absences";
 import { useUserService } from "~/services/users";
 import type { UserData } from "~/services/dto/user-data";
 

frontend/modules/core/composables/usePermissions.ts

@@ -0,0 +1,27 @@
+export function usePermissions() {
+    const auth = useAuthStore()
+
+    function isAdmin(): boolean {
+        return auth.user?.roles?.includes('ROLE_ADMIN') ?? false
+    }
+
+    function can(code: string): boolean {
+        if (!auth.user) {
+            return false
+        }
+        if (isAdmin()) {
+            return true
+        }
+        return auth.user.effectivePermissions?.includes(code) ?? false
+    }
+
+    function canAny(codes: string[]): boolean {
+        return codes.some((c) => can(c))
+    }
+
+    function canAll(codes: string[]): boolean {
+        return codes.every((c) => can(c))
+    }
+
+    return { can, canAny, canAll, isAdmin }
+}

frontend/modules/core/nuxt.config.ts

@@ -0,0 +1 @@
+export default defineNuxtConfig({})

frontend/modules/core/services/audit-logs.ts

@@ -0,0 +1,65 @@
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export type AuditLogAction = 'create' | 'update' | 'delete'
+
+export type AuditLogItem = {
+    id: string
+    '@id'?: string
+    entityType: string
+    entityId: string
+    action: AuditLogAction
+    changes: Record<string, unknown>
+    performedBy: string
+    performedAt: string
+    ipAddress: string | null
+    requestId: string | null
+}
+
+export type AuditLogQuery = {
+    page?: number
+    entityType?: string
+    action?: AuditLogAction
+}
+
+export type AuditLogPage = {
+    items: AuditLogItem[]
+    totalItems: number
+}
+
+export type AuditLogEntityTypes = {
+    '@id'?: string
+    entityTypes: string[]
+}
+
+export function useAuditLogService() {
+    const api = useApi()
+
+    async function list(params: AuditLogQuery = {}): Promise<AuditLogPage> {
+        const query: Record<string, unknown> = {}
+        if (params.page !== undefined) {
+            query.page = params.page
+        }
+        if (params.entityType) {
+            query.entity_type = params.entityType
+        }
+        if (params.action) {
+            query.action = params.action
+        }
+
+        const data = await api.get<HydraCollection<AuditLogItem>>('/audit-logs', query)
+        return {
+            items: extractHydraMembers(data),
+            totalItems: data['hydra:totalItems'] ?? data['totalItems'] ?? 0,
+        }
+    }
+
+    async function entityTypes(): Promise<string[]> {
+        // `/audit-log-entity-types` is a single API Platform item resource
+        // (not a hydra collection): it returns `{ entityTypes: string[] }`.
+        const data = await api.get<AuditLogEntityTypes>('/audit-log-entity-types')
+        return data.entityTypes ?? []
+    }
+
+    return { list, entityTypes }
+}

frontend/modules/core/services/permissions.ts

@@ -0,0 +1,22 @@
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export type Permission = {
+    id: number
+    '@id'?: string
+    code: string
+    label: string
+    module: string
+    orphan?: boolean
+}
+
+export function usePermissionService() {
+    const api = useApi()
+
+    async function list(): Promise<Permission[]> {
+        const data = await api.get<HydraCollection<Permission>>('/permissions')
+        return extractHydraMembers(data)
+    }
+
+    return { list }
+}

frontend/modules/core/services/roles.ts

@@ -0,0 +1,50 @@
+import type { Permission } from './permissions'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export type Role = {
+    id: number
+    '@id'?: string
+    code: string
+    label: string
+    description?: string | null
+    isSystem: boolean
+    permissions: Permission[]
+}
+
+export type RoleWrite = {
+    code?: string
+    label: string
+    description?: string | null
+    /** IRIs of the granted permissions (e.g. /api/permissions/3). */
+    permissions: string[]
+}
+
+export function useRoleService() {
+    const api = useApi()
+
+    async function list(): Promise<Role[]> {
+        const data = await api.get<HydraCollection<Role>>('/roles')
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: RoleWrite): Promise<Role> {
+        return api.post<Role>('/roles', payload as Record<string, unknown>, {
+            toastSuccessKey: 'admin.roles.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<RoleWrite>): Promise<Role> {
+        return api.patch<Role>(`/roles/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'admin.roles.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/roles/${id}`, {}, {
+            toastSuccessKey: 'admin.roles.deleted',
+        })
+    }
+
+    return { list, create, update, remove }
+}

frontend/modules/directory/components/ClientDrawer.vue

@@ -21,21 +21,6 @@
                 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">
                 <MalioButton
@@ -50,8 +35,8 @@
 </template>
 
 <script setup lang="ts">
-import type { Client, ClientWrite } from '~/services/dto/client'
-import { useClientService } from '~/services/clients'
+import type { Client, ClientWrite } from '~/modules/directory/services/dto/client'
+import { useClientService } from '~/modules/directory/services/clients'
 
 const props = defineProps<{
     modelValue: boolean
@@ -75,9 +60,6 @@ const form = reactive({
     name: '',
     email: '',
     phone: '',
-    street: '',
-    city: '',
-    postalCode: '',
 })
 
 const touched = reactive({
@@ -91,16 +73,10 @@ watch(() => props.modelValue, (open) => {
             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
@@ -119,9 +95,6 @@ async function handleSubmit() {
             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) {

frontend/modules/directory/components/CommercialReportTab.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="flex flex-col gap-6 pt-6">
+        <!-- Formulaire d'ajout / édition -->
+        <div v-if="isAdmin" class="grid grid-cols-2 gap-x-8 gap-y-3 rounded bg-white p-4 shadow">
+            <MalioInputText
+                class="col-span-2"
+                :label="$t('directory.reports.fields.subject')"
+                v-model="draft.subject"
+            />
+            <MalioSelect
+                :label="$t('directory.reports.fields.type')"
+                v-model="draft.type"
+                :options="typeOptions"
+                group-class="w-full"
+            />
+            <MalioDate
+                :label="$t('directory.reports.fields.occurredAt')"
+                v-model="draft.occurredAt"
+            />
+            <MalioInputTextArea
+                class="col-span-2"
+                :label="$t('directory.reports.fields.body')"
+                v-model="draft.body"
+            />
+            <div class="col-span-2 flex justify-end gap-3">
+                <MalioButton
+                    v-if="editingId"
+                    variant="secondary"
+                    button-class="w-auto px-4"
+                    :label="$t('common.cancel')"
+                    @click="resetDraft"
+                />
+                <MalioButton
+                    button-class="w-auto px-4"
+                    :label="editingId ? $t('common.save') : $t('directory.reports.add')"
+                    :disabled="!draft.subject"
+                    @click="save"
+                />
+            </div>
+        </div>
+
+        <!-- Liste des comptes-rendus -->
+        <div v-for="report in reports" :key="report.id" class="rounded border border-neutral-200 p-4">
+            <div class="flex items-start justify-between">
+                <div>
+                    <p class="font-semibold text-neutral-800">{{ report.subject }}</p>
+                    <p class="text-xs text-neutral-500">
+                        {{ formatDate(report.occurredAt) }} · {{ $t(`directory.reports.types.${report.type}`) }}
+                        <span v-if="report.author"> · {{ report.author.username }}</span>
+                    </p>
+                </div>
+                <div v-if="isAdmin" class="flex gap-2">
+                    <MalioButtonIcon icon="mdi:pencil-outline" :aria-label="$t('common.edit')" @click="edit(report)" />
+                    <MalioButtonIcon icon="mdi:trash-can-outline" button-class="!text-red-600" :aria-label="$t('common.delete')" @click="remove(report.id)" />
+                </div>
+            </div>
+            <p v-if="report.body" class="mt-2 whitespace-pre-wrap text-sm text-neutral-700">{{ report.body }}</p>
+
+            <div class="mt-3 flex flex-col gap-2">
+                <ReportDocumentList
+                    :documents="report.documents ?? []"
+                    :is-admin="isAdmin"
+                    @delete="(id) => removeDocument(report, id)"
+                />
+                <ReportDocumentUpload
+                    v-if="isAdmin"
+                    :report-id="report.id"
+                    @uploaded="reload"
+                />
+            </div>
+        </div>
+
+        <p v-if="!reports.length" class="text-sm text-neutral-400">
+            {{ $t('directory.reports.empty') }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { CommercialReport, CommercialReportWrite, ReportType } from '~/modules/directory/services/dto/commercial-report'
+import { useCommercialReportService } from '~/modules/directory/services/commercial-reports'
+import { useReportDocumentService } from '~/modules/directory/services/report-documents'
+
+const props = defineProps<{
+    owner: { client?: string, prospect?: string }
+    isAdmin: boolean
+}>()
+
+const { t } = useI18n()
+const reportService = useCommercialReportService()
+const documentService = useReportDocumentService()
+
+const reports = ref<CommercialReport[]>([])
+const editingId = ref<number | null>(null)
+
+function emptyDraft(): CommercialReportWrite {
+    return {
+        subject: '',
+        body: null,
+        occurredAt: new Date().toISOString().slice(0, 10),
+        type: 'note',
+        ...props.owner,
+    }
+}
+const draft = ref<CommercialReportWrite>(emptyDraft())
+
+const typeOptions: { label: string, value: ReportType }[] = [
+    { label: t('directory.reports.types.call'), value: 'call' },
+    { label: t('directory.reports.types.meeting'), value: 'meeting' },
+    { label: t('directory.reports.types.email'), value: 'email' },
+    { label: t('directory.reports.types.note'), value: 'note' },
+]
+
+function formatDate(iso: string): string {
+    return new Date(iso).toLocaleDateString('fr-FR')
+}
+
+async function reload(): Promise<void> {
+    reports.value = await reportService.getByOwner(props.owner)
+}
+
+function resetDraft(): void {
+    editingId.value = null
+    draft.value = emptyDraft()
+}
+
+function edit(report: CommercialReport): void {
+    editingId.value = report.id
+    draft.value = {
+        subject: report.subject,
+        body: report.body,
+        occurredAt: report.occurredAt.slice(0, 10),
+        type: report.type,
+        ...props.owner,
+    }
+}
+
+async function save(): Promise<void> {
+    if (editingId.value) {
+        await reportService.update(editingId.value, draft.value)
+    } else {
+        await reportService.create(draft.value)
+    }
+    resetDraft()
+    await reload()
+}
+
+async function remove(id: number): Promise<void> {
+    await reportService.remove(id)
+    await reload()
+}
+
+async function removeDocument(report: CommercialReport, id: number): Promise<void> {
+    await documentService.remove(id)
+    await reload()
+}
+
+onMounted(reload)
+watch(() => props.owner, reload, { deep: true })
+</script>

frontend/modules/directory/components/DirectoryAddressBlock.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="relative grid grid-cols-2 gap-x-8 gap-y-3 rounded bg-white p-4 shadow">
+        <h3 class="col-span-2 text-sm font-semibold text-neutral-700">
+            {{ title }}
+        </h3>
+        <MalioButtonIcon
+            v-if="removable && !readonly"
+            icon="mdi:trash-can-outline"
+            class="absolute right-2 top-2"
+            button-class="!text-red-600"
+            :aria-label="$t('common.delete')"
+            @click="$emit('remove')"
+        />
+
+        <MalioInputText
+            class="col-span-2"
+            :label="$t('directory.addresses.fields.label')"
+            :model-value="modelValue.label ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('label', $event)"
+        />
+        <MalioInputText
+            class="col-span-2"
+            :label="$t('directory.addresses.fields.street')"
+            :model-value="modelValue.street ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('street', $event)"
+        />
+        <MalioInputText
+            class="col-span-2"
+            :label="$t('directory.addresses.fields.streetComplement')"
+            :model-value="modelValue.streetComplement ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('streetComplement', $event)"
+        />
+        <MalioInputText
+            :label="$t('directory.addresses.fields.postalCode')"
+            :model-value="modelValue.postalCode ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('postalCode', $event)"
+        />
+        <MalioInputText
+            :label="$t('directory.addresses.fields.city')"
+            :model-value="modelValue.city ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('city', $event)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Address } from '~/modules/directory/services/dto/address'
+
+const props = defineProps<{
+    modelValue: Address
+    title: string
+    removable?: boolean
+    readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: Address]
+    'remove': []
+}>()
+
+function update(field: keyof Address, value: string): void {
+    emit('update:modelValue', { ...props.modelValue, [field]: value === '' ? null : value })
+}
+</script>

frontend/modules/directory/components/DirectoryContactBlock.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="relative grid grid-cols-2 gap-x-8 gap-y-3 rounded bg-white p-4 shadow">
+        <h3 class="col-span-2 text-sm font-semibold text-neutral-700">
+            {{ title }}
+        </h3>
+        <MalioButtonIcon
+            v-if="removable && !readonly"
+            icon="mdi:trash-can-outline"
+            class="absolute right-2 top-2"
+            button-class="!text-red-600"
+            :aria-label="$t('common.delete')"
+            @click="$emit('remove')"
+        />
+
+        <MalioInputText
+            :label="$t('directory.contacts.fields.lastName')"
+            :model-value="modelValue.lastName ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('lastName', $event)"
+        />
+        <MalioInputText
+            :label="$t('directory.contacts.fields.firstName')"
+            :model-value="modelValue.firstName ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('firstName', $event)"
+        />
+        <MalioInputText
+            class="col-span-2"
+            :label="$t('directory.contacts.fields.jobTitle')"
+            :model-value="modelValue.jobTitle ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('jobTitle', $event)"
+        />
+        <MalioInputText
+            :label="$t('directory.contacts.fields.email')"
+            :model-value="modelValue.email ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('email', $event)"
+        />
+        <MalioInputText
+            :label="$t('directory.contacts.fields.phonePrimary')"
+            :model-value="modelValue.phonePrimary ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('phonePrimary', $event)"
+        />
+        <MalioInputText
+            :label="$t('directory.contacts.fields.phoneSecondary')"
+            :model-value="modelValue.phoneSecondary ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('phoneSecondary', $event)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Contact } from '~/modules/directory/services/dto/contact'
+
+const props = defineProps<{
+    modelValue: Contact
+    title: string
+    removable?: boolean
+    readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: Contact]
+    'remove': []
+}>()
+
+function update(field: keyof Contact, value: string): void {
+    emit('update:modelValue', { ...props.modelValue, [field]: value === '' ? null : value })
+}
+</script>

frontend/modules/directory/components/ProspectDrawer.vue

@@ -0,0 +1,191 @@
+<template>
+    <MalioDrawer v-model="isOpen">
+        <template #header>
+            <h2 class="text-xl font-bold">{{ isEditing ? $t('prospects.editProspect') : $t('prospects.addProspect') }}</h2>
+        </template>
+        <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
+            <MalioInputText
+                v-model="form.name"
+                :label="$t('prospects.fields.name')"
+                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
+                    v-if="isEditing && !isConverted"
+                    :label="$t('prospects.convert')"
+                    variant="secondary"
+                    icon-name="mdi:account-convert"
+                    icon-position="left"
+                    button-class="w-auto px-4"
+                    :disabled="isSubmitting"
+                    @click="handleConvert"
+                />
+                <span v-else-if="isConverted" class="text-sm text-green-700">
+                    {{ $t('prospects.alreadyConverted') }}
+                </span>
+                <span v-else />
+                <MalioButton
+                    :label="$t('common.save')"
+                    button-class="w-auto px-6"
+                    :disabled="isSubmitting"
+                    @click="handleSubmit"
+                />
+            </div>
+        </form>
+    </MalioDrawer>
+</template>
+
+<script setup lang="ts">
+import type { Prospect, ProspectStatus, ProspectWrite } from '~/modules/directory/services/dto/prospect'
+import { useProspectService } from '~/modules/directory/services/prospects'
+
+const props = defineProps<{
+    modelValue: boolean
+    prospect: Prospect | null
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'saved'): void
+}>()
+
+const { t } = useI18n()
+
+const isOpen = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+})
+
+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
+}>({
+    name: '',
+    company: '',
+    email: '',
+    phone: '',
+    status: 'new',
+    source: '',
+    notes: '',
+})
+
+const touched = reactive({
+    name: false,
+})
+
+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 = ''
+        }
+        touched.name = false
+    }
+})
+
+const { create, update, convert } = useProspectService()
+
+async function handleSubmit() {
+    touched.name = true
+    if (!form.name.trim()) return
+
+    isSubmitting.value = true
+    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) {
+            await update(props.prospect.id, payload)
+        } else {
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+async function handleConvert() {
+    if (!props.prospect) return
+    isSubmitting.value = true
+    try {
+        await convert(props.prospect.id)
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>

frontend/modules/directory/components/ReportDocumentList.vue

@@ -0,0 +1,42 @@
+<template>
+    <ul v-if="documents.length" class="flex flex-col gap-2">
+        <li
+            v-for="doc in documents"
+            :key="doc.id"
+            class="flex items-center justify-between rounded border border-neutral-200 px-3 py-2"
+        >
+            <a
+                :href="downloadUrl(doc.id)"
+                target="_blank"
+                rel="noopener"
+                class="flex items-center gap-2 text-sm text-blue-700 hover:underline"
+            >
+                <Icon name="mdi:file-document-outline" />
+                {{ doc.originalName }}
+            </a>
+            <MalioButtonIcon
+                v-if="isAdmin"
+                icon="mdi:trash-can-outline"
+                button-class="!text-red-600"
+                :aria-label="$t('common.delete')"
+                @click="$emit('delete', doc.id)"
+            />
+        </li>
+    </ul>
+    <p v-else class="text-sm text-neutral-400">
+        {{ $t('directory.documents.empty') }}
+    </p>
+</template>
+
+<script setup lang="ts">
+import type { ReportDocument } from '~/modules/directory/services/dto/report-document'
+import { useReportDocumentService } from '~/modules/directory/services/report-documents'
+
+defineProps<{ documents: ReportDocument[], isAdmin: boolean }>()
+defineEmits<{ delete: [id: number] }>()
+
+const { getDownloadUrl } = useReportDocumentService()
+function downloadUrl(id: number): string {
+    return getDownloadUrl(id)
+}
+</script>

frontend/modules/directory/components/ReportDocumentUpload.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="flex items-center gap-3">
+        <input
+            ref="fileInput"
+            type="file"
+            class="hidden"
+            @change="onFileSelected"
+        >
+        <MalioButton
+            icon-name="mdi:paperclip"
+            icon-position="left"
+            button-class="w-auto px-4"
+            :label="$t('directory.documents.add')"
+            :disabled="uploading"
+            @click="fileInput?.click()"
+        />
+        <span v-if="uploading" class="text-sm text-neutral-500">{{ $t('directory.documents.uploading') }}</span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useReportDocumentService } from '~/modules/directory/services/report-documents'
+
+const props = defineProps<{ reportId: number }>()
+const emit = defineEmits<{ uploaded: [] }>()
+
+const service = useReportDocumentService()
+const fileInput = ref<HTMLInputElement | null>(null)
+const uploading = ref(false)
+
+async function onFileSelected(event: Event): Promise<void> {
+    const input = event.target as HTMLInputElement
+    const file = input.files?.[0]
+    if (!file) return
+
+    uploading.value = true
+    try {
+        await service.upload(props.reportId, file)
+        emit('uploaded')
+    } finally {
+        uploading.value = false
+        input.value = ''
+    }
+}
+</script>

frontend/modules/directory/composables/useDirectoryDetail.ts

@@ -0,0 +1,92 @@
+import type { Contact } from '~/modules/directory/services/dto/contact'
+import type { Address } from '~/modules/directory/services/dto/address'
+import { useContactService } from '~/modules/directory/services/contacts'
+import { useAddressService } from '~/modules/directory/services/addresses'
+
+type Owner = { client?: string, prospect?: string }
+
+/**
+ * Logique partagée des fiches détail Client/Prospect : gestion des blocs
+ * répétables Contact et Adresse (chargement, ajout, édition par bloc avec
+ * persistance immédiate, suppression). Paramétré par l'IRI du propriétaire
+ * (`{ client }` ou `{ prospect }`), réutilisé tel quel par les deux pages.
+ */
+export function useDirectoryDetail(owner: Owner) {
+    const contactService = useContactService()
+    const addressService = useAddressService()
+
+    const contacts = ref<Contact[]>([])
+    const addresses = ref<Address[]>([])
+
+    function emptyContact(): Contact {
+        return { id: 0, firstName: null, lastName: null, jobTitle: null, email: null, phonePrimary: null, phoneSecondary: null, ...owner }
+    }
+    function emptyAddress(): Address {
+        return { id: 0, label: null, street: null, streetComplement: null, postalCode: null, city: null, country: 'FR', ...owner }
+    }
+
+    async function onContactInput(index: number, value: Contact): Promise<void> {
+        contacts.value[index] = value
+        await persistContact(index)
+    }
+    async function persistContact(index: number): Promise<void> {
+        const c = contacts.value[index]
+        if (!c) return
+        const payload = { firstName: c.firstName, lastName: c.lastName, jobTitle: c.jobTitle, email: c.email, phonePrimary: c.phonePrimary, phoneSecondary: c.phoneSecondary, ...owner }
+        if (c.id && c.id > 0) {
+            await contactService.update(c.id, payload)
+        } else if (c.lastName || c.firstName) {
+            const created = await contactService.create(payload)
+            contacts.value[index] = created
+        }
+    }
+    function addContact(): void {
+        contacts.value.push(emptyContact())
+    }
+    async function removeContact(index: number): Promise<void> {
+        const c = contacts.value[index]
+        if (c?.id && c.id > 0) await contactService.remove(c.id)
+        contacts.value.splice(index, 1)
+    }
+
+    async function onAddressInput(index: number, value: Address): Promise<void> {
+        addresses.value[index] = value
+        await persistAddress(index)
+    }
+    async function persistAddress(index: number): Promise<void> {
+        const a = addresses.value[index]
+        if (!a) return
+        const payload = { label: a.label, street: a.street, streetComplement: a.streetComplement, postalCode: a.postalCode, city: a.city, country: a.country, ...owner }
+        if (a.id && a.id > 0) {
+            await addressService.update(a.id, payload)
+        } else if (a.street || a.city || a.postalCode) {
+            const created = await addressService.create(payload)
+            addresses.value[index] = created
+        }
+    }
+    function addAddress(): void {
+        addresses.value.push(emptyAddress())
+    }
+    async function removeAddress(index: number): Promise<void> {
+        const a = addresses.value[index]
+        if (a?.id && a.id > 0) await addressService.remove(a.id)
+        addresses.value.splice(index, 1)
+    }
+
+    async function load(): Promise<void> {
+        contacts.value = await contactService.getByOwner(owner)
+        addresses.value = await addressService.getByOwner(owner)
+    }
+
+    return {
+        contacts,
+        addresses,
+        onContactInput,
+        addContact,
+        removeContact,
+        onAddressInput,
+        addAddress,
+        removeAddress,
+        load,
+    }
+}

frontend/modules/directory/nuxt.config.ts

@@ -0,0 +1 @@
+export default defineNuxtConfig({})

frontend/modules/directory/pages/directory/clients/[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">{{ client?.name ?? '…' }}</h1>
+        </div>
+
+        <p v-if="loading">{{ $t('common.loading') }}</p>
+        <template v-else-if="client">
+            <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 { Client } from '~/modules/directory/services/dto/client'
+import { useClientService } from '~/modules/directory/services/clients'
+
+definePageMeta({ middleware: ['admin'] })
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+
+const id = Number(route.params.id)
+const ownerIri = `/api/clients/${id}`
+const owner = { client: ownerIri }
+
+const clientService = useClientService()
+const {
+    contacts,
+    addresses,
+    onContactInput,
+    addContact,
+    removeContact,
+    onAddressInput,
+    addAddress,
+    removeAddress,
+    load,
+} = useDirectoryDetail(owner)
+
+const client = ref<Client | 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 () => {
+    client.value = await clientService.getById(id)
+    await load()
+    loading.value = false
+})
+</script>

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

@@ -0,0 +1,241 @@
+<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>
+                    </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="onProspectSaved"
+        />
+    </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') },
+]
+
+async function loadClients() {
+    clients.value = await clientService.getAll()
+}
+
+function openCreateClient() {
+    selectedClient.value = null
+    clientDrawerOpen.value = true
+}
+
+function openEditClient(item: Record<string, unknown>) {
+    navigateTo(`/directory/clients/${(item as Client).id}`)
+}
+
+// --- 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>) {
+    navigateTo(`/directory/prospects/${(item as Prospect).id}`)
+}
+
+async function convertProspect(row: ProspectRow) {
+    await prospectService.convert(row.id)
+    // La conversion crée un client et retire le prospect : rafraîchir les deux listes.
+    await Promise.all([loadProspects(), loadClients()])
+}
+
+// Le ProspectDrawer porte aussi le bouton « Convertir » : son event 'saved' peut
+// donc être une conversion → toujours rafraîchir les deux listes par sécurité.
+async function onProspectSaved() {
+    await Promise.all([loadProspects(), loadClients()])
+}
+
+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>

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>

frontend/modules/directory/services/addresses.ts

@@ -0,0 +1,32 @@
+import type { Address, AddressWrite } from './dto/address'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+type Owner = { client?: string, prospect?: string }
+
+export function useAddressService() {
+    const api = useApi()
+
+    async function getByOwner(owner: Owner): Promise<Address[]> {
+        const data = await api.get<HydraCollection<Address>>('/addresses', owner as Record<string, unknown>)
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: AddressWrite): Promise<Address> {
+        return api.post<Address>('/addresses', payload as Record<string, unknown>, {
+            toastSuccessKey: 'directory.addresses.saved',
+        })
+    }
+
+    async function update(id: number, payload: Partial<AddressWrite>): Promise<Address> {
+        return api.patch<Address>(`/addresses/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'directory.addresses.saved',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/addresses/${id}`, {}, { toastSuccessKey: 'directory.addresses.deleted' })
+    }
+
+    return { getByOwner, create, update, remove }
+}

frontend/modules/directory/services/clients.ts

@@ -10,6 +10,10 @@ export function useClientService() {
         return extractHydraMembers(data)
     }
 
+    async function getById(id: number): Promise<Client> {
+        return api.get<Client>(`/clients/${id}`)
+    }
+
     async function create(payload: ClientWrite): Promise<Client> {
         return api.post<Client>('/clients', payload as Record<string, unknown>, {
             toastSuccessKey: 'clients.created',
@@ -28,5 +32,5 @@ export function useClientService() {
         })
     }
 
-    return { getAll, create, update, remove }
+    return { getAll, getById, create, update, remove }
 }

frontend/modules/directory/services/commercial-reports.ts

@@ -0,0 +1,32 @@
+import type { CommercialReport, CommercialReportWrite } from './dto/commercial-report'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+type Owner = { client?: string, prospect?: string }
+
+export function useCommercialReportService() {
+    const api = useApi()
+
+    async function getByOwner(owner: Owner): Promise<CommercialReport[]> {
+        const data = await api.get<HydraCollection<CommercialReport>>('/commercial_reports', owner as Record<string, unknown>)
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: CommercialReportWrite): Promise<CommercialReport> {
+        return api.post<CommercialReport>('/commercial_reports', payload as Record<string, unknown>, {
+            toastSuccessKey: 'directory.reports.saved',
+        })
+    }
+
+    async function update(id: number, payload: Partial<CommercialReportWrite>): Promise<CommercialReport> {
+        return api.patch<CommercialReport>(`/commercial_reports/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'directory.reports.saved',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/commercial_reports/${id}`, {}, { toastSuccessKey: 'directory.reports.deleted' })
+    }
+
+    return { getByOwner, create, update, remove }
+}

frontend/modules/directory/services/contacts.ts

@@ -0,0 +1,32 @@
+import type { Contact, ContactWrite } from './dto/contact'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+type Owner = { client?: string, prospect?: string }
+
+export function useContactService() {
+    const api = useApi()
+
+    async function getByOwner(owner: Owner): Promise<Contact[]> {
+        const data = await api.get<HydraCollection<Contact>>('/contacts', owner as Record<string, unknown>)
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: ContactWrite): Promise<Contact> {
+        return api.post<Contact>('/contacts', payload as Record<string, unknown>, {
+            toastSuccessKey: 'directory.contacts.saved',
+        })
+    }
+
+    async function update(id: number, payload: Partial<ContactWrite>): Promise<Contact> {
+        return api.patch<Contact>(`/contacts/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'directory.contacts.saved',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/contacts/${id}`, {}, { toastSuccessKey: 'directory.contacts.deleted' })
+    }
+
+    return { getByOwner, create, update, remove }
+}

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

@@ -0,0 +1,23 @@
+export type Address = {
+    id: number
+    '@id'?: string
+    label: string | null
+    street: string | null
+    streetComplement: string | null
+    postalCode: string | null
+    city: string | null
+    country: string
+    client?: string | null
+    prospect?: string | null
+}
+
+export type AddressWrite = {
+    label: string | null
+    street: string | null
+    streetComplement: string | null
+    postalCode: string | null
+    city: string | null
+    country: string
+    client?: string | null
+    prospect?: string | null
+}

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

@@ -4,16 +4,10 @@ export type Client = {
     name: string
     email: string | null
     phone: string | null
-    street: string | null
-    city: string | null
-    postalCode: string | null
 }
 
 export type ClientWrite = {
     name: string
     email: string | null
     phone: string | null
-    street: string | null
-    city: string | null
-    postalCode: string | null
 }

frontend/modules/directory/services/dto/commercial-report.ts

@@ -0,0 +1,27 @@
+import type { ReportDocument } from './report-document'
+
+export type ReportType = 'call' | 'meeting' | 'email' | 'note'
+
+export type CommercialReport = {
+    id: number
+    '@id'?: string
+    subject: string
+    body: string | null
+    occurredAt: string
+    type: ReportType
+    author?: { id: number, username: string } | null
+    client?: string | null
+    prospect?: string | null
+    documents?: ReportDocument[]
+    createdAt?: string
+    updatedAt?: string
+}
+
+export type CommercialReportWrite = {
+    subject: string
+    body: string | null
+    occurredAt: string
+    type: ReportType
+    client?: string | null
+    prospect?: string | null
+}

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

@@ -0,0 +1,23 @@
+export type Contact = {
+    id: number
+    '@id'?: string
+    firstName: string | null
+    lastName: string | null
+    jobTitle: string | null
+    email: string | null
+    phonePrimary: string | null
+    phoneSecondary: string | null
+    client?: string | null
+    prospect?: string | null
+}
+
+export type ContactWrite = {
+    firstName: string | null
+    lastName: string | null
+    jobTitle: string | null
+    email: string | null
+    phonePrimary: string | null
+    phoneSecondary: string | null
+    client?: string | null
+    prospect?: string | null
+}

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

@@ -0,0 +1,28 @@
+import type { Client } from './client'
+
+export type ProspectStatus = 'new' | 'contacted' | 'qualified' | 'won' | 'lost'
+
+export type Prospect = {
+    id: number
+    '@id'?: string
+    name: string
+    company: string | null
+    email: string | null
+    phone: string | null
+    status: ProspectStatus
+    source: string | null
+    notes: string | null
+    convertedClient: Client | string | null
+    createdAt?: string
+    updatedAt?: string
+}
+
+export type ProspectWrite = {
+    name: string
+    company: string | null
+    email: string | null
+    phone: string | null
+    status: ProspectStatus
+    source: string | null
+    notes: string | null
+}

frontend/modules/directory/services/dto/report-document.ts

@@ -0,0 +1,13 @@
+import type { UserData } from '~/services/dto/user-data'
+
+export type ReportDocument = {
+    '@id'?: string
+    id: number
+    commercialReport: string
+    originalName: string
+    fileName?: string | null
+    mimeType: string
+    size: number
+    createdAt: string
+    uploadedBy?: UserData | null
+}

frontend/modules/directory/services/prospects.ts

@@ -0,0 +1,44 @@
+import type { Prospect, ProspectStatus, ProspectWrite } from './dto/prospect'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useProspectService() {
+    const api = useApi()
+
+    async function getAll(status?: ProspectStatus): Promise<Prospect[]> {
+        const query: Record<string, unknown> = {}
+        if (status) query.status = status
+        const data = await api.get<HydraCollection<Prospect>>('/prospects', query)
+        return extractHydraMembers(data)
+    }
+
+    async function getById(id: number): Promise<Prospect> {
+        return api.get<Prospect>(`/prospects/${id}`)
+    }
+
+    async function create(payload: ProspectWrite): Promise<Prospect> {
+        return api.post<Prospect>('/prospects', payload as Record<string, unknown>, {
+            toastSuccessKey: 'prospects.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<ProspectWrite>): Promise<Prospect> {
+        return api.patch<Prospect>(`/prospects/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'prospects.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/prospects/${id}`, {}, {
+            toastSuccessKey: 'prospects.deleted',
+        })
+    }
+
+    async function convert(id: number): Promise<Prospect> {
+        return api.post<Prospect>(`/prospects/${id}/convert`, {}, {
+            toastSuccessKey: 'prospects.converted',
+        })
+    }
+
+    return { getAll, getById, create, update, remove, convert }
+}

frontend/modules/directory/services/report-documents.ts

@@ -0,0 +1,39 @@
+import type { ReportDocument } from './dto/report-document'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+import { $fetch } from 'ofetch'
+
+export function useReportDocumentService() {
+    const api = useApi()
+    const config = useRuntimeConfig()
+    const baseURL = config.public.apiBase || '/api'
+
+    async function getByReport(reportId: number): Promise<ReportDocument[]> {
+        const data = await api.get<HydraCollection<ReportDocument>>('/report_documents', {
+            commercialReport: `/api/commercial_reports/${reportId}`,
+        })
+        return extractHydraMembers(data)
+    }
+
+    async function upload(reportId: number, file: File): Promise<ReportDocument> {
+        const formData = new FormData()
+        formData.append('file', file)
+        formData.append('commercialReport', `/api/commercial_reports/${reportId}`)
+
+        return $fetch<ReportDocument>(`${baseURL}/report_documents`, {
+            method: 'POST',
+            body: formData,
+            credentials: 'include',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/report_documents/${id}`, {}, { toastSuccessKey: 'directory.documents.deleted' })
+    }
+
+    function getDownloadUrl(id: number): string {
+        return `${baseURL}/report_documents/${id}/download`
+    }
+
+    return { getByReport, upload, remove, getDownloadUrl }
+}

frontend/modules/integration/composables/useShareStatus.ts

@@ -1,4 +1,4 @@
-import { useShareService } from '~/services/share'
+import { useShareService } from '~/modules/integration/services/share'
 
 export function useShareStatus() {
     const enabled = useState<boolean | null>('share-enabled', () => null)

frontend/modules/integration/nuxt.config.ts

@@ -0,0 +1 @@
+export default defineNuxtConfig({})

frontend/modules/mail/components/MailCreateTaskModal.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { MailMessageDetailDto } from '~/services/dto/mail'
-import type { Task } from '~/services/dto/task'
-import type { Project } from '~/services/dto/project'
-import type { TaskGroup } from '~/services/dto/task-group'
+import type { MailMessageDetailDto } from '~/modules/mail/services/dto/mail'
+import type { Task } from '~/modules/project-management/services/dto/task'
+import type { Project } from '~/modules/project-management/services/dto/project'
+import type { TaskGroup } from '~/modules/project-management/services/dto/task-group'
 import type { UserData } from '~/services/dto/user-data'
-import { useMailService } from '~/services/mail'
-import { useProjectService } from '~/services/projects'
-import { useTaskGroupService } from '~/services/task-groups'
+import { useMailService } from '~/modules/mail/services/mail'
+import { useProjectService } from '~/modules/project-management/services/projects'
+import { useTaskGroupService } from '~/modules/project-management/services/task-groups'
 import { useUserService } from '~/services/users'
-import { useAuthStore } from '~/stores/auth'
+import { useAuthStore } from '~/shared/stores/auth'
 
 const props = defineProps<{
     modelValue: boolean

frontend/modules/mail/components/MailFolderTree.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MailFolderDto } from '~/services/dto/mail'
+import type { MailFolderDto } from '~/modules/mail/services/dto/mail'
 
 const props = defineProps<{
     /** Arbre de dossiers (getter folderTree du store) */

frontend/modules/mail/components/MailLinkTaskModal.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { Task } from '~/services/dto/task'
-import type { Project } from '~/services/dto/project'
-import { useMailService } from '~/services/mail'
-import { useTaskService } from '~/services/tasks'
-import { useProjectService } from '~/services/projects'
+import type { Task } from '~/modules/project-management/services/dto/task'
+import type { Project } from '~/modules/project-management/services/dto/project'
+import { useMailService } from '~/modules/mail/services/mail'
+import { useTaskService } from '~/modules/project-management/services/tasks'
+import { useProjectService } from '~/modules/project-management/services/projects'
 
 const props = defineProps<{
     modelValue: boolean

frontend/modules/mail/components/MailMessageList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MailMessageHeaderDto } from '~/services/dto/mail'
+import type { MailMessageHeaderDto } from '~/modules/mail/services/dto/mail'
 
 const props = defineProps<{
     messages: readonly MailMessageHeaderDto[]

frontend/modules/mail/components/MailMessageViewer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { MailMessageDetailDto, MailAddressDto, MailAttachmentDto } from '~/services/dto/mail'
+import type { MailMessageDetailDto, MailAddressDto, MailAttachmentDto } from '~/modules/mail/services/dto/mail'
 import { sanitizeMailHtml } from '~/utils/sanitizeMailHtml'
-import { useMailService } from '~/services/mail'
+import { useMailService } from '~/modules/mail/services/mail'
 
 const props = defineProps<{
     /** Détail complet du message. null = aucun message sélectionné. */

frontend/modules/mail/components/MailRefreshButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMailStore } from '~/stores/mail'
+import { useMailStore } from '~/modules/mail/stores/mail'
 
 const store = useMailStore()
 const { syncing } = storeToRefs(store)

frontend/modules/mail/nuxt.config.ts

@@ -0,0 +1 @@
+export default defineNuxtConfig({})

frontend/modules/mail/pages/mail.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Task } from '~/services/dto/task'
-import { useMailStore } from '~/stores/mail'
+import type { Task } from '~/modules/project-management/services/dto/task'
+import { useMailStore } from '~/modules/mail/stores/mail'
 
 const { t } = useI18n()
 const router = useRouter()

frontend/modules/mail/services/mail.ts

@@ -11,8 +11,8 @@ import type {
     MailCreateTaskInput,
     MailLinkTaskInput,
     MailSyncResultDto,
-} from './dto/mail'
-import type { Task } from './dto/task'
+} from '~/modules/mail/services/dto/mail'
+import type { Task } from '~/modules/project-management/services/dto/task'
 
 type BackendMailMessage = {
     id: number

frontend/modules/mail/stores/mail.ts

@@ -3,8 +3,8 @@ import type {
     MailFolderDto,
     MailMessageHeaderDto,
     MailMessageDetailDto,
-} from '~/services/dto/mail'
-import { useMailService } from '~/services/mail'
+} from '~/modules/mail/services/dto/mail'
+import { useMailService } from '~/modules/mail/services/mail'
 
 const POLL_INTERVAL_MS = 30 * 1000 // 30 secondes
 

frontend/modules/project-management/components/ProjectDrawer.vue

@@ -123,13 +123,13 @@
 </template>
 
 <script setup lang="ts">
-import type { Project, ProjectWrite } from '~/services/dto/project'
-import type { Client } from '~/services/dto/client'
-import type { GiteaRepository } from '~/services/dto/gitea'
-import type { BookStackShelf } from '~/services/dto/bookstack'
-import { useProjectService } from '~/services/projects'
-import { useGiteaService } from '~/services/gitea'
-import { useBookStackService } from '~/services/bookstack'
+import type { Project, ProjectWrite } from '~/modules/project-management/services/dto/project'
+import type { Client } from '~/modules/directory/services/dto/client'
+import type { GiteaRepository } from '~/modules/integration/services/dto/gitea'
+import type { BookStackShelf } from '~/modules/integration/services/dto/bookstack'
+import { useProjectService } from '~/modules/project-management/services/projects'
+import { useGiteaService } from '~/modules/integration/services/gitea'
+import { useBookStackService } from '~/modules/integration/services/bookstack'
 
 const props = defineProps<{
     modelValue: boolean

frontend/modules/project-management/components/ProjectGroupTab.vue

@@ -67,10 +67,10 @@
 </template>
 
 <script setup lang="ts">
-import type { TaskGroup } from '~/services/dto/task-group'
-import type { Task } from '~/services/dto/task'
-import { useTaskGroupService } from '~/services/task-groups'
-import { useTaskService } from '~/services/tasks'
+import type { TaskGroup } from '~/modules/project-management/services/dto/task-group'
+import type { Task } from '~/modules/project-management/services/dto/task'
+import { useTaskGroupService } from '~/modules/project-management/services/task-groups'
+import { useTaskService } from '~/modules/project-management/services/tasks'
 import { stripRichText } from '~/utils/format'
 
 const props = defineProps<{

frontend/modules/project-management/components/ProjectWorkflowSwitchModal.vue

@@ -82,12 +82,12 @@
 </template>
 
 <script setup lang="ts">
-import type { Project } from '~/services/dto/project'
-import type { Task } from '~/services/dto/task'
-import type { Workflow } from '~/services/dto/workflow'
-import type { TaskStatus } from '~/services/dto/task-status'
-import { useWorkflowService } from '~/services/workflows'
-import { useTaskService } from '~/services/tasks'
+import type { Project } from '~/modules/project-management/services/dto/project'
+import type { Task } from '~/modules/project-management/services/dto/task'
+import type { Workflow } from '~/modules/project-management/services/dto/workflow'
+import type { TaskStatus } from '~/modules/project-management/services/dto/task-status'
+import { useWorkflowService } from '~/modules/project-management/services/workflows'
+import { useTaskService } from '~/modules/project-management/services/tasks'
 
 const props = defineProps<{
     modelValue: boolean

frontend/modules/project-management/components/StatusPickerPopover.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TaskStatus } from '~/services/dto/task-status'
+import type { TaskStatus } from '~/modules/project-management/services/dto/task-status'
 
 defineProps<{
     statuses: TaskStatus[]

frontend/modules/project-management/components/TaskBookStackLinks.vue

@@ -75,8 +75,8 @@
 </template>
 
 <script setup lang="ts">
-import type { BookStackLink, BookStackSearchResult } from '~/services/dto/bookstack'
-import { useBookStackService } from '~/services/bookstack'
+import type { BookStackLink, BookStackSearchResult } from '~/modules/integration/services/dto/bookstack'
+import { useBookStackService } from '~/modules/integration/services/bookstack'
 
 const props = defineProps<{
     taskId: number

frontend/modules/project-management/components/TaskBulkActions.vue

@@ -104,13 +104,13 @@
 </template>
 
 <script setup lang="ts">
-import type { Task } from '~/services/dto/task'
-import type { TaskStatus } from '~/services/dto/task-status'
-import type { TaskEffort } from '~/services/dto/task-effort'
-import type { TaskPriority } from '~/services/dto/task-priority'
-import type { TaskGroup } from '~/services/dto/task-group'
+import type { Task } from '~/modules/project-management/services/dto/task'
+import type { TaskStatus } from '~/modules/project-management/services/dto/task-status'
+import type { TaskEffort } from '~/modules/project-management/services/dto/task-effort'
+import type { TaskPriority } from '~/modules/project-management/services/dto/task-priority'
+import type { TaskGroup } from '~/modules/project-management/services/dto/task-group'
 import type { UserData } from '~/services/dto/user-data'
-import type { Project } from '~/services/dto/project'
+import type { Project } from '~/modules/project-management/services/dto/project'
 
 const props = withDefaults(defineProps<{
     selectedCount: number