From e7af415a1f1e720ed064ffc7f47622e55f3cbb69 Mon Sep 17 00:00:00 2001
From: Matthieu <contact@malio.fr>
Date: Fri, 19 Jun 2026 21:15:13 +0200
Subject: [PATCH] feat(core) : add audit log consultation tab in admin gated by
 permission

---
 frontend/components/admin/AdminAuditTab.vue  | 158 +++++++++++++++++++
 frontend/i18n/locales/fr.json                |  30 ++++
 frontend/modules/core/services/audit-logs.ts |  63 ++++++++
 frontend/pages/admin.vue                     |   3 +
 4 files changed, 254 insertions(+)
 create mode 100644 frontend/components/admin/AdminAuditTab.vue
 create mode 100644 frontend/modules/core/services/audit-logs.ts

diff --git a/frontend/components/admin/AdminAuditTab.vue b/frontend/components/admin/AdminAuditTab.vue
new file mode 100644
index 0000000..351144d
--- /dev/null
+++ b/frontend/components/admin/AdminAuditTab.vue
@@ -0,0 +1,158 @@
+<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) })),
+)
+
+const hasNextPage = computed(() => 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>
diff --git a/frontend/i18n/locales/fr.json b/frontend/i18n/locales/fr.json
index 321bfed..6d3f47e 100644
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -214,6 +214,36 @@
             "created": "Rôle créé avec succès.",
             "updated": "Rôle mis à jour avec succès.",
             "deleted": "Rôle supprimé avec succès."
+        },
+        "audit": {
+            "title": "Audit",
+            "empty": "Aucune entrée d'audit trouvée.",
+            "date": "Date",
+            "performedBy": "Utilisateur",
+            "entityType": "Type d'entité",
+            "action": "Action",
+            "entityId": "Identifiant",
+            "filterEntityType": "Type d'entité",
+            "filterEntityTypeAll": "Tous les types",
+            "filterAction": "Action",
+            "filterActionAll": "Toutes les actions",
+            "previous": "Précédent",
+            "next": "Suivant",
+            "page": "Page {page}"
+        }
+    },
+    "audit": {
+        "entity": {
+            "core": {
+                "User": "Utilisateur",
+                "Role": "Rôle",
+                "Permission": "Permission"
+            }
+        },
+        "action": {
+            "create": "Création",
+            "update": "Modification",
+            "delete": "Suppression"
         }
     },
     "timeEntries": {
diff --git a/frontend/modules/core/services/audit-logs.ts b/frontend/modules/core/services/audit-logs.ts
new file mode 100644
index 0000000..832bc7b
--- /dev/null
+++ b/frontend/modules/core/services/audit-logs.ts
@@ -0,0 +1,63 @@
+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 AuditLogEntityType = {
+    '@id'?: string
+    value: 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[]> {
+        const data = await api.get<HydraCollection<AuditLogEntityType>>('/audit-log-entity-types')
+        return extractHydraMembers(data).map((entry) => entry.value)
+    }
+
+    return { list, entityTypes }
+}
diff --git a/frontend/pages/admin.vue b/frontend/pages/admin.vue
index f371f09..668db4e 100644
--- a/frontend/pages/admin.vue
+++ b/frontend/pages/admin.vue
@@ -28,6 +28,7 @@
             <AdminTagTab v-if="activeTab === 'tags'" />
             <AdminUserTab v-if="activeTab === 'users'" />
             <AdminRoleTab v-if="activeTab === 'roles' && canViewRoles" />
+            <AdminAuditTab v-if="activeTab === 'audit' && canViewAudit" />
             <AdminGiteaTab v-if="activeTab === 'gitea'" />
             <AdminBookStackTab v-if="activeTab === 'bookstack'" />
             <AdminZimbraTab v-if="activeTab === 'zimbra'" />
@@ -46,6 +47,7 @@ const { can } = usePermissions()
 const { t } = useI18n()
 
 const canViewRoles = computed(() => can('core.roles.view'))
+const canViewAudit = computed(() => can('core.audit_log.view'))
 
 const tabs = [
     { key: 'clients', label: 'Clients' },
@@ -55,6 +57,7 @@ const tabs = [
     { key: 'tags', label: 'Tags' },
     { key: 'users', label: 'Utilisateurs' },
     { key: 'roles', label: t('admin.roles.title'), permission: 'core.roles.view' },
+    { key: 'audit', label: t('admin.audit.title'), permission: 'core.audit_log.view' },
     { key: 'gitea', label: 'Gitea' },
     { key: 'bookstack', label: 'BookStack' },
     { key: 'zimbra', label: 'Zimbra' },