private function capturePendingLog(object $entity, EntityManagerInterface $em, UnitOfWork $uow, string $action): void
    {
        $class = $entity::class;

        if (!$this->isAuditable($class)) {
            return;
        }

        $metadata = $em->getClassMetadata($class);

async function loadPage(targetPage: number, append: boolean): Promise<void> {
    if (!canView.value) return

    loading.value = true
    try {
        const data = await fetchEntityLogs(entityType.value, entityId.value, targetPage)
        const slice = (data.member ?? []).slice(0, append ? undefined : INITIAL_LIMIT)
        entries.value = append ? [...entries.value, ...slice] : slice
        totalItems.value = data.totalItems ?? entries.value.length
        page.value = targetPage
    } catch {
        // Erreur silencieuse (timeline secondaire) — useApi n'affiche pas de toast avec toast: false.
        entries.value = append ? entries.value : []
    } finally {
        loading.value = false
    }
}

async function loadMore(): Promise<void> {
    await loadPage(page.value + 1, true)
}

const filters = reactive<AuditLogFilters>({
    performedAtAfter:  readQuery('after'),
    performedAtBefore: readQuery('before'),
    entityType:        readQuery('entity_type'),
    performedBy:       readQuery('performed_by'),
    action:            readQuery('action'),
    page:              Number(readQuery('page') ?? 1) || 1,
})

// Les checkboxes d'action fonctionnent en multi-select cote UI mais l'API
        <!-- Tableau -->
        <section class="mt-4 rounded border border-gray-200 bg-white overflow-hidden">
            <table class="min-w-full text-sm">
                <thead class="bg-tertiary-500 text-white">
                    <tr>
                        <th class="px-3 py-2 text-left font-medium">
                            {{ t('admin.auditLog.table.performedAt') }}
                        </th>
                        <th class="px-3 py-2 text-left font-medium">
                            {{ t('admin.auditLog.table.performedBy') }}
                        </th>
                        <th class="px-3 py-2 text-left font-medium">
                            {{ t('admin.auditLog.table.entityType') }}
                        </th>
                        <th class="px-3 py-2 text-left font-medium">
                            {{ t('admin.auditLog.table.entityId') }}
                        </th>
                        <th class="px-3 py-2 text-left font-medium">
                            {{ t('admin.auditLog.table.action') }}
                        </th>
                        <th class="px-3 py-2 text-left font-medium">
                            {{ t('admin.auditLog.table.summary') }}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template v-if="entries.length > 0">
                        <template v-for="entry in entries" :key="entry.id">
                            <tr
                                class="border-t border-gray-100 hover:bg-gray-50 cursor-pointer"
                                @click="toggleExpand(entry.id)"
                            >
                                <td class="px-3 py-2">
                                    {{ formatDate(entry.performedAt) }}
                                </td>
                                <td class="px-3 py-2">{{ entry.performedBy }}</td>
                                <td class="px-3 py-2 font-mono text-xs">{{ entry.entityType }}</td>
                                <td class="px-3 py-2 font-mono text-xs">{{ entry.entityId }}</td>
                                <td class="px-3 py-2">
                                    <span
                                        class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
                                        :class="actionBadgeClass(entry.action)"
                                    >
                                        {{ t(`audit.action.${entry.action}`) }}
                                    </span>
                                </td>
                                <td class="px-3 py-2 text-xs text-gray-600">
                                    {{ summarize(entry) }}
                                </td>
                            </tr>
                            <!-- Detail expandable : diff courant + timeline complete de l'entite. -->
                            <tr v-if="expandedId === entry.id" class="bg-gray-50">
                                <td colspan="6" class="px-3 py-3">
                                    <AuditLogDetail :entry="entry" />
                                    <div class="mt-4 border-t border-gray-200 pt-3">
                                        <h3 class="text-sm font-medium text-gray-700 mb-2">
                                            {{ entry.entityType }} #{{ entry.entityId }}
                                        </h3>
                                        <AuditTimeline
                                            :entity-type="entry.entityType"
                                            :entity-id="entry.entityId"
                                        />
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </template>
                    <tr v-else-if="!loading">
                        <td colspan="6" class="px-3 py-6 text-center text-sm text-gray-500">
                            {{ isFiltered ? t('audit.no_results') : t('audit.empty') }}
                        </td>
                    </tr>
                    <tr v-else>
                        <td colspan="6" class="px-3 py-6 text-center text-sm text-gray-500">
                            {{ t('common.loading') }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>

        <!-- Pagination via hydra (view.next / view.previous) -->
        <nav class="mt-3 flex items-center justify-between text-sm">
            <span class="text-gray-600">
                {{ totalItems }} entrée{{ totalItems > 1 ? 's' : '' }}
            </span>
            <div class="flex gap-2">
                <button
                    type="button"
                    class="px-3 py-1 rounded border border-gray-300 disabled:opacity-60"
                        {{ t('audit.filters.date_from') }}
                    </label>
                    <input
                        v-model="filters.performedAtAfter"
                        type="datetime-local"
                        class="mt-1 w-full rounded border border-gray-300 px-2 py-1 text-sm"
                    >
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600">
                        {{ t('audit.filters.date_to') }}
                    </label>
                    <input
                        v-model="filters.performedAtBefore"
                        type="datetime-local"
                        class="mt-1 w-full rounded border border-gray-300 px-2 py-1 text-sm"
                    >
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600">
                        {{ t('audit.filters.entity_type') }}
                    </label>
                    <input
                        v-model="filters.entityType"
                        type="text"
                        placeholder="core.User"
                        class="mt-1 w-full rounded border border-gray-300 px-2 py-1 text-sm"
                    >
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600">
                        {{ t('audit.filters.user') }}
                    </label>
                    <input
                        v-model="filters.performedBy"
                        type="text"
                        class="mt-1 w-full rounded border border-gray-300 px-2 py-1 text-sm"
                    >
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600">
                        {{ t('audit.filters.action') }}
                    </label>
                    <div class="mt-1 flex flex-wrap gap-2">
                        <label v-for="a in allActions" :key="a" class="flex items-center gap-1 text-xs">
                            <input
                                type="checkbox"
                                :checked="selectedActions.includes(a)"
                                @change="toggleAction(a)"
                            >
                            {{ t(`audit.action.${a}`) }}
                        </label>
                    </div>
                </div>
            </div>

            <div class="mt-3 flex justify-end">
                <button
                    type="button"
                    class="px-3 py-1 text-xs rounded border border-gray-300 hover:bg-gray-50"
                    @click="resetFilters"
    private function capturePendingLog(object $entity, EntityManagerInterface $em, UnitOfWork $uow, string $action): void
    {
        // Resolution via ClassMetadata : `$entity::class` renvoie le FQCN du
        // proxy Doctrine pour une entite chargee en lazy (ex:
        // `Proxies\__CG__\App\Module\Core\Domain\Entity\User`) — `isAuditable()`
        // le verrait comme non-auditable car `#[Auditable]` n'est declare que
        // sur la classe parente.
        $metadata = $em->getClassMetadata($entity::class);
        $class    = $metadata->getName();

        if (!$this->isAuditable($class)) {
            return;
        }


// Lazy loading : 10 items par page cote UX. On aligne la pagination backend
// (itemsPerPage=10 dans fetchEntityLogs) avec cette taille pour eviter de
// slicer cote client — sinon les items 11-30 de chaque page etaient ignores.
const PAGE_SIZE = 10

// Anti-race : un utilisateur qui change rapidement d'entite affichee (ouvre
// une ligne puis une autre dans le tableau admin) peut declencher deux fetchs
// dont le premier repond en retard et ecrase l'etat de la seconde timeline.
// On incremente un token a chaque fetch ; seule la derniere requete ecrit le
// resultat. loadMore() est aussi protege : une reponse tardive append sur
// une timeline dont l'entite a deja change serait visuellement confuse.
let requestToken = 0

const hasMore = computed(() => entries.value.length < totalItems.value)

async function loadPage(targetPage: number, append: boolean): Promise<void> {
    if (!canView.value) return

    const token = ++requestToken
    loading.value = true
    try {
        const data = await fetchEntityLogs(entityType.value, entityId.value, targetPage, PAGE_SIZE)
        if (token !== requestToken) return
        const items = data.member ?? []
        entries.value = append ? [...entries.value, ...items] : items
        totalItems.value = data.totalItems ?? entries.value.length
        page.value = targetPage
    } catch {
        if (token !== requestToken) return
        // Erreur silencieuse (timeline secondaire) — useApi n'affiche pas de toast avec toast: false.
        entries.value = append ? entries.value : []
    } finally {
        if (token === requestToken) {
            loading.value = false
        }
    }
}
<template>
    <div>
        <div class="flex items-center justify-between">
            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
                {{ t('admin.auditLog.title') }}
            </h1>
        </div>

        <!-- Filtres -->
        <section class="mt-4 rounded border border-gray-200 bg-white p-4">
            <!-- Labels uniformes au-dessus : les composants Malio sont utilises sans
                 leur `label` flottant interne pour ne pas mixer deux patterns de label. -->
            <div class="grid grid-cols-1 items-start gap-3 md:grid-cols-5">
                <!-- TODO(malio-ui): remplacer par un composant Malio quand la lib
                     exposera un datetime picker. Cf. exception documentee dans
                     CLAUDE.md (section "Composants formulaires"). -->
                <div>
                    <label class="mb-1 block text-xs font-medium text-gray-600">
                        {{ t('audit.filters.date_from') }}
                    </label>
                    <input
                        v-model="filters.performedAtAfter"
                        type="datetime-local"
                        class="h-[40px] w-full rounded-md border border-m-muted bg-white px-3 text-sm outline-none focus-visible:border-2 focus-visible:border-m-primary"
                    >
                </div>
                <!-- TODO(malio-ui): idem ci-dessus. -->
                <div>
                    <label class="mb-1 block text-xs font-medium text-gray-600">
                        {{ t('audit.filters.date_to') }}
                    </label>
                    <input
                        v-model="filters.performedAtBefore"
                        type="datetime-local"
                        class="h-[40px] w-full rounded-md border border-m-muted bg-white px-3 text-sm outline-none focus-visible:border-2 focus-visible:border-m-primary"
                    >
                </div>
                <div>
                    <label class="mb-1 block text-xs font-medium text-gray-600">
                        {{ t('audit.filters.entity_type') }}
                    </label>
                    <div class="[&>div>div]:!mt-0">
                        <MalioSelectCheckbox
                            v-model="selectedEntityTypes"
                            :options="entityTypeOptions"
                            :display-select-all="true"
                            :display-tag="true"
                            min-width="w-full"
                            text-field="text-sm"
                            text-value="text-sm"
                        />
                    </div>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-medium text-gray-600">
                        {{ t('audit.filters.user') }}
                    </label>
                    <MalioInputText
                        v-model="performedByInput"
                        icon-name="mdi:account-search"
                        input-class="text-sm"
                        group-class="h-10"
                    />
                </div>
                <!-- TODO(malio-ui): remplacer par MalioSelect quand la lib
                     supportera de maniere fiable des options a valeur string
                     (cf. note Lesstime CLAUDE.md). Exception documentee dans
                     CLAUDE.md (section "Composants formulaires"). -->
                <div>
                    <label class="mb-1 block text-xs font-medium text-gray-600">
                        {{ t('audit.filters.action') }}
                    </label>
                    <select
                        v-model="actionValue"
                        class="h-[40px] w-full rounded-md border border-m-muted bg-white px-3 text-sm outline-none focus-visible:border-2 focus-visible:border-m-primary"
                    >
                        <option value="">{{ t('audit.filters.all_actions') }}</option>
                        <option v-for="opt in actionOptions" :key="opt.value" :value="opt.value">
                            {{ opt.label }}
                        </option>
                    </select>
                </div>
            </div>

            <div class="mt-3 flex justify-end">
                <MalioButton
                    variant="tertiary"
                    :label="t('audit.filters.reset')"
                    button-class="text-xs"
                    @click="resetFilters"
                />
            </div>
        </section>

        <!-- Tableau -->
        <MalioDataTable
            class="mt-4"
            :columns="columns"
            :items="rows"
            :total-items="totalItems"
            :page="filters.page ?? 1"
            :per-page="filters.itemsPerPage ?? 10"
            :per-page-options="[10, 25, 50]"
            :empty-message="isFiltered ? t('audit.no_results') : t('audit.empty')"
            @update:page="onPageChange"
            @update:per-page="onPerPageChange"
            @row-click="onRowClick"
        >
            <template #cell-action="{ item }">
                <span
                    class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
                    :class="actionBadgeClass(item.action as string)"
                >
                    {{ t(`audit.action.${item.action}`) }}
                </span>
            </template>
            <template #cell-entityType="{ item }">
                <span class="font-mono text-xs">{{ item.entityType }}</span>
            </template>
            <template #cell-entityId="{ item }">