@escalated-dev/escalated 0.6.0 → 0.7.0

package/src/pages/Admin/ApiTokens/Index.vue

@@ -9,7 +9,10 @@ const props = defineProps({
     api_enabled: Boolean,
 });
 
-const dark = inject('esc-dark', computed(() => true));
+const dark = inject(
+    'esc-dark',
+    computed(() => true),
+);
 const page = usePage();
 const prefix = computed(() => {
     const p = page.props.escalated?.prefix || 'support';
@@ -66,7 +69,13 @@ function toggleAbility(ability) {
 
 function formatDate(iso) {
     if (!iso) return '—';
-    return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+    return new Date(iso).toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
 }
 </script>
 
@@ -76,59 +85,127 @@ function formatDate(iso) {
             <!-- Header -->
             <div class="flex items-center justify-between">
                 <div>
-                    <h2 :class="dark ? 'text-white' : 'text-gray-900'" class="text-lg font-semibold">API Tokens</h2>
-                    <p :class="dark ? 'text-neutral-500' : 'text-gray-500'" class="mt-1 text-sm">Manage API tokens for desktop apps and external integrations.</p>
+                    <h2 :class="dark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900'" class="text-lg font-semibold">
+                        API Tokens
+                    </h2>
+                    <p :class="dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'" class="mt-1 text-sm">
+                        Manage API tokens for desktop apps and external integrations.
+                    </p>
                 </div>
-                <button @click="showCreate = true"
-                    :class="dark ? 'bg-white text-black hover:bg-neutral-200' : 'bg-gray-900 text-white hover:bg-gray-800'"
-                    class="rounded-lg px-4 py-2 text-sm font-medium transition-colors">
+                <button
+                    :class="
+                        dark ? 'bg-white text-black hover:bg-neutral-200' : 'bg-gray-900 text-white hover:bg-gray-800'
+                    "
+                    class="rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+                    @click="showCreate = true"
+                >
                     Create Token
                 </button>
             </div>
 
             <!-- Not enabled warning -->
-            <div v-if="!api_enabled"
-                 :class="dark ? 'border-amber-500/30 bg-amber-500/10 text-amber-300' : 'border-amber-300 bg-amber-50 text-amber-800'"
-                 class="rounded-lg border p-4 text-sm">
-                The REST API is currently disabled. Set <code class="font-mono">ESCALATED_API_ENABLED=true</code> in your .env to enable it.
+            <div
+                v-if="!api_enabled"
+                :class="
+                    dark
+                        ? 'border-amber-500/30 bg-amber-500/10 text-amber-300'
+                        : 'border-amber-300 bg-amber-50 text-amber-800'
+                "
+                class="rounded-lg border p-4 text-sm"
+            >
+                The REST API is currently disabled. Set <code class="font-mono">ESCALATED_API_ENABLED=true</code> in
+                your .env to enable it.
             </div>
 
             <!-- Copied token modal -->
-            <div v-if="copiedToken"
-                 :class="dark ? 'border-emerald-500/30 bg-emerald-500/10' : 'border-emerald-300 bg-emerald-50'"
-                 class="rounded-lg border p-4">
-                <p :class="dark ? 'text-emerald-300' : 'text-emerald-800'" class="text-sm font-medium">Token created! Copy it now — it won't be shown again.</p>
+            <div
+                v-if="copiedToken"
+                :class="dark ? 'border-emerald-500/30 bg-emerald-500/10' : 'border-emerald-300 bg-emerald-50'"
+                class="rounded-lg border p-4"
+            >
+                <p :class="dark ? 'text-emerald-300' : 'text-emerald-800'" class="text-sm font-medium">
+                    Token created! Copy it now — it won't be shown again.
+                </p>
                 <div class="mt-2 flex items-center gap-2">
-                    <code :class="dark ? 'bg-black text-emerald-400' : 'bg-white text-emerald-700'"
-                          class="flex-1 rounded border px-3 py-2 text-xs font-mono break-all"
-                          :style="dark ? 'border-color: rgba(255,255,255,0.1)' : ''">{{ copiedToken }}</code>
-                    <button @click="copyToken"
-                        :class="dark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
-                        class="rounded-lg px-3 py-2 text-sm font-medium transition-colors">Copy</button>
-                    <button @click="dismissToken"
-                        :class="dark ? 'text-neutral-500 hover:text-white' : 'text-gray-400 hover:text-gray-600'"
-                        class="px-2 py-2 text-sm transition-colors">Dismiss</button>
+                    <code
+                        :class="dark ? 'bg-black text-emerald-400' : 'bg-white text-emerald-700'"
+                        class="flex-1 rounded border px-3 py-2 text-xs font-mono break-all"
+                        :style="dark ? 'border-color: rgba(255,255,255,0.1)' : ''"
+                        >{{ copiedToken }}</code
+                    >
+                    <button
+                        :class="
+                            dark
+                                ? 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text)] hover:bg-[var(--esc-panel-active)]'
+                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        "
+                        class="rounded-lg px-3 py-2 text-sm font-medium transition-colors"
+                        @click="copyToken"
+                    >
+                        Copy
+                    </button>
+                    <button
+                        :class="
+                            dark
+                                ? 'text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text)]'
+                                : 'text-gray-400 hover:text-gray-600'
+                        "
+                        class="px-2 py-2 text-sm transition-colors"
+                        @click="dismissToken"
+                    >
+                        Dismiss
+                    </button>
                 </div>
             </div>
 
             <!-- Create form -->
-            <div v-if="showCreate"
-                 :class="dark ? 'border-white/[0.06] bg-neutral-950' : 'border-gray-200 bg-white'"
-                 class="rounded-lg border p-5 space-y-4">
-                <h3 :class="dark ? 'text-white' : 'text-gray-900'" class="text-sm font-semibold">New API Token</h3>
+            <div
+                v-if="showCreate"
+                :class="
+                    dark
+                        ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)]'
+                        : 'border-gray-200 bg-white'
+                "
+                class="rounded-lg border p-5 space-y-4"
+            >
+                <h3 :class="dark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900'" class="text-sm font-semibold">
+                    New API Token
+                </h3>
 
                 <div class="grid grid-cols-2 gap-4">
                     <div>
-                        <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">Token Name</label>
-                        <input v-model="form.name" type="text" placeholder="e.g. Desktop App - Work Laptop"
-                            :class="dark ? 'border-white/[0.08] bg-white/[0.04] text-white' : 'border-gray-300 bg-white text-gray-900'"
-                            class="w-full rounded-lg border px-3 py-2 text-sm" />
+                        <label
+                            :class="dark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-600'"
+                            class="mb-1 block text-xs font-medium"
+                            >Token Name</label
+                        >
+                        <input
+                            v-model="form.name"
+                            type="text"
+                            placeholder="e.g. Desktop App - Work Laptop"
+                            :class="
+                                dark
+                                    ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text)]'
+                                    : 'border-gray-300 bg-white text-gray-900'
+                            "
+                            class="w-full rounded-lg border px-3 py-2 text-sm"
+                        />
                     </div>
                     <div>
-                        <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">User</label>
-                        <select v-model="form.user_id"
-                            :class="dark ? 'border-white/[0.08] bg-white/[0.04] text-white' : 'border-gray-300 bg-white text-gray-900'"
-                            class="w-full rounded-lg border px-3 py-2 text-sm">
+                        <label
+                            :class="dark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-600'"
+                            class="mb-1 block text-xs font-medium"
+                            >User</label
+                        >
+                        <select
+                            v-model="form.user_id"
+                            :class="
+                                dark
+                                    ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text)]'
+                                    : 'border-gray-300 bg-white text-gray-900'
+                            "
+                            class="w-full rounded-lg border px-3 py-2 text-sm"
+                        >
                             <option value="">Select user...</option>
                             <option v-for="u in users" :key="u.id" :value="u.id">{{ u.name }} ({{ u.email }})</option>
                         </select>
@@ -136,41 +213,90 @@ function formatDate(iso) {
                 </div>
 
                 <div>
-                    <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">Abilities</label>
+                    <label
+                        :class="dark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-600'"
+                        class="mb-1 block text-xs font-medium"
+                        >Abilities</label
+                    >
                     <div class="flex items-center gap-3">
-                        <label v-for="ability in ['agent', 'admin']" :key="ability"
-                            :class="dark ? 'text-neutral-300' : 'text-gray-700'"
-                            class="flex items-center gap-1.5 text-sm cursor-pointer">
-                            <input type="checkbox" :checked="form.abilities.includes(ability)" @change="toggleAbility(ability)"
-                                class="rounded border-neutral-600" />
+                        <label
+                            v-for="ability in ['agent', 'admin']"
+                            :key="ability"
+                            :class="dark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-700'"
+                            class="flex items-center gap-1.5 text-sm cursor-pointer"
+                        >
+                            <input
+                                type="checkbox"
+                                :checked="form.abilities.includes(ability)"
+                                class="rounded border-neutral-600"
+                                @change="toggleAbility(ability)"
+                            />
                             {{ ability }}
                         </label>
                     </div>
                 </div>
 
                 <div>
-                    <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">Expires In (days)</label>
-                    <input v-model.number="form.expires_in_days" type="number" min="1" max="365" placeholder="Leave empty for no expiration"
-                        :class="dark ? 'border-white/[0.08] bg-white/[0.04] text-white' : 'border-gray-300 bg-white text-gray-900'"
-                        class="w-48 rounded-lg border px-3 py-2 text-sm" />
+                    <label
+                        :class="dark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-600'"
+                        class="mb-1 block text-xs font-medium"
+                        >Expires In (days)</label
+                    >
+                    <input
+                        v-model.number="form.expires_in_days"
+                        type="number"
+                        min="1"
+                        max="365"
+                        placeholder="Leave empty for no expiration"
+                        :class="
+                            dark
+                                ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text)]'
+                                : 'border-gray-300 bg-white text-gray-900'
+                        "
+                        class="w-48 rounded-lg border px-3 py-2 text-sm"
+                    />
                 </div>
 
                 <div class="flex items-center gap-3 pt-2">
-                    <button @click="createToken" :disabled="form.processing || !form.name || !form.user_id"
-                        :class="dark ? 'bg-white text-black hover:bg-neutral-200 disabled:bg-neutral-700 disabled:text-neutral-500' : 'bg-gray-900 text-white hover:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500'"
-                        class="rounded-lg px-4 py-2 text-sm font-medium transition-colors">
+                    <button
+                        :disabled="form.processing || !form.name || !form.user_id"
+                        :class="
+                            dark
+                                ? 'bg-white text-black hover:bg-neutral-200 disabled:bg-[var(--esc-panel-text-muted)] disabled:text-[var(--esc-panel-text-muted)]'
+                                : 'bg-gray-900 text-white hover:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500'
+                        "
+                        class="rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+                        @click="createToken"
+                    >
                         {{ form.processing ? 'Creating...' : 'Create Token' }}
                     </button>
-                    <button @click="showCreate = false"
-                        :class="dark ? 'text-neutral-500 hover:text-white' : 'text-gray-500 hover:text-gray-900'"
-                        class="text-sm transition-colors">Cancel</button>
+                    <button
+                        :class="
+                            dark
+                                ? 'text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text)]'
+                                : 'text-gray-500 hover:text-gray-900'
+                        "
+                        class="text-sm transition-colors"
+                        @click="showCreate = false"
+                    >
+                        Cancel
+                    </button>
                 </div>
             </div>
 
             <!-- Tokens table -->
-            <div :class="dark ? 'border-white/[0.06]' : 'border-gray-200'" class="overflow-hidden rounded-lg border">
+            <div
+                :class="dark ? 'border-[var(--esc-panel-border)]' : 'border-gray-200'"
+                class="overflow-hidden rounded-lg border"
+            >
                 <table class="w-full text-sm">
-                    <thead :class="dark ? 'bg-white/[0.03] text-neutral-500' : 'bg-gray-50 text-gray-500'">
+                    <thead
+                        :class="
+                            dark
+                                ? 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-muted)]'
+                                : 'bg-gray-50 text-gray-500'
+                        "
+                    >
                         <tr>
                             <th class="px-4 py-3 text-left text-xs font-medium uppercase">Name</th>
                             <th class="px-4 py-3 text-left text-xs font-medium uppercase">User</th>
@@ -180,32 +306,70 @@ function formatDate(iso) {
                             <th class="px-4 py-3 text-right text-xs font-medium uppercase">Actions</th>
                         </tr>
                     </thead>
-                    <tbody :class="dark ? 'divide-white/[0.04]' : 'divide-gray-100'" class="divide-y">
-                        <tr v-for="token in tokens" :key="token.id"
-                            :class="[dark ? 'hover:bg-white/[0.02]' : 'hover:bg-gray-50', token.is_expired ? 'opacity-50' : '']">
-                            <td :class="dark ? 'text-white' : 'text-gray-900'" class="px-4 py-3 font-medium">{{ token.name }}</td>
-                            <td :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="px-4 py-3">{{ token.user_name }}</td>
+                    <tbody :class="dark ? 'divide-[var(--esc-panel-border)]' : 'divide-gray-100'" class="divide-y">
+                        <tr
+                            v-for="token in tokens"
+                            :key="token.id"
+                            :class="[
+                                dark ? 'hover:bg-[var(--esc-panel-hover)]' : 'hover:bg-gray-50',
+                                token.is_expired ? 'opacity-50' : '',
+                            ]"
+                        >
+                            <td
+                                :class="dark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900'"
+                                class="px-4 py-3 font-medium"
+                            >
+                                {{ token.name }}
+                            </td>
+                            <td
+                                :class="dark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-600'"
+                                class="px-4 py-3"
+                            >
+                                {{ token.user_name }}
+                            </td>
                             <td class="px-4 py-3">
-                                <span v-for="a in (token.abilities || [])" :key="a"
-                                    :class="dark ? 'bg-white/[0.06] text-neutral-300' : 'bg-gray-100 text-gray-700'"
-                                    class="mr-1 rounded px-1.5 py-0.5 text-xs">{{ a }}</span>
+                                <span
+                                    v-for="a in token.abilities || []"
+                                    :key="a"
+                                    :class="
+                                        dark
+                                            ? 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-secondary)]'
+                                            : 'bg-gray-100 text-gray-700'
+                                    "
+                                    class="mr-1 rounded px-1.5 py-0.5 text-xs"
+                                    >{{ a }}</span
+                                >
                             </td>
-                            <td :class="dark ? 'text-neutral-500' : 'text-gray-500'" class="px-4 py-3 text-xs">
+                            <td
+                                :class="dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'"
+                                class="px-4 py-3 text-xs"
+                            >
                                 <template v-if="token.last_used_at">{{ formatDate(token.last_used_at) }}</template>
                                 <template v-else>Never</template>
                             </td>
-                            <td :class="dark ? 'text-neutral-500' : 'text-gray-500'" class="px-4 py-3 text-xs">
+                            <td
+                                :class="dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'"
+                                class="px-4 py-3 text-xs"
+                            >
                                 <span v-if="token.is_expired" class="text-rose-400">Expired</span>
                                 <template v-else-if="token.expires_at">{{ formatDate(token.expires_at) }}</template>
                                 <template v-else>Never</template>
                             </td>
                             <td class="px-4 py-3 text-right">
-                                <button @click="revokeToken(token.id)"
-                                    class="text-xs text-rose-400 hover:text-rose-300 transition-colors">Revoke</button>
+                                <button
+                                    class="text-xs text-rose-400 hover:text-rose-300 transition-colors"
+                                    @click="revokeToken(token.id)"
+                                >
+                                    Revoke
+                                </button>
                             </td>
                         </tr>
                         <tr v-if="!tokens.length">
-                            <td colspan="6" :class="dark ? 'text-neutral-500' : 'text-gray-400'" class="px-4 py-8 text-center text-sm">
+                            <td
+                                colspan="6"
+                                :class="dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-400'"
+                                class="px-4 py-8 text-center text-sm"
+                            >
                                 No API tokens created yet.
                             </td>
                         </tr>

package/src/pages/Admin/AuditLog/Index.vue

@@ -0,0 +1,154 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import AuditLogEntry from '../../../components/AuditLogEntry.vue';
+import { router } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+    logs: Object,
+    filters: Object,
+    users: Array,
+    actions: Array,
+    resourceTypes: Array,
+});
+
+const filterForm = ref({
+    user_id: props.filters?.user_id || '',
+    action: props.filters?.action || '',
+    auditable_type: props.filters?.auditable_type || '',
+    date_from: props.filters?.date_from || '',
+    date_to: props.filters?.date_to || '',
+});
+
+function applyFilters() {
+    const params = {};
+    for (const [key, value] of Object.entries(filterForm.value)) {
+        if (value) params[key] = value;
+    }
+    router.get(route('escalated.admin.audit-log'), params, { preserveState: true });
+}
+
+function clearFilters() {
+    filterForm.value = { user_id: '', action: '', auditable_type: '', date_from: '', date_to: '' };
+    router.get(route('escalated.admin.audit-log'), {}, { preserveState: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Audit Log">
+        <!-- Filters -->
+        <div
+            class="mb-6 flex flex-wrap items-end gap-3 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4"
+        >
+            <div>
+                <label class="block text-xs font-medium text-[var(--esc-panel-text-tertiary)]">User</label>
+                <select
+                    v-model="filterForm.user_id"
+                    class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                >
+                    <option value="">All Users</option>
+                    <option v-for="user in users" :key="user.id" :value="user.id">{{ user.name }}</option>
+                </select>
+            </div>
+            <div>
+                <label class="block text-xs font-medium text-[var(--esc-panel-text-tertiary)]">Action</label>
+                <select
+                    v-model="filterForm.action"
+                    class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                >
+                    <option value="">All Actions</option>
+                    <option v-for="a in actions" :key="a" :value="a">{{ a }}</option>
+                </select>
+            </div>
+            <div>
+                <label class="block text-xs font-medium text-[var(--esc-panel-text-tertiary)]">Resource Type</label>
+                <select
+                    v-model="filterForm.auditable_type"
+                    class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                >
+                    <option value="">All Types</option>
+                    <option v-for="t in resourceTypes" :key="t" :value="t">{{ t.split('\\').pop() }}</option>
+                </select>
+            </div>
+            <div>
+                <label class="block text-xs font-medium text-[var(--esc-panel-text-tertiary)]">From</label>
+                <input
+                    v-model="filterForm.date_from"
+                    type="date"
+                    class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+            </div>
+            <div>
+                <label class="block text-xs font-medium text-[var(--esc-panel-text-tertiary)]">To</label>
+                <input
+                    v-model="filterForm.date_to"
+                    type="date"
+                    class="mt-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+            </div>
+            <button
+                class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-1.5 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]"
+                @click="applyFilters"
+            >
+                Filter
+            </button>
+            <button
+                class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-4 py-1.5 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
+                @click="clearFilters"
+            >
+                Clear
+            </button>
+        </div>
+
+        <!-- Log entries -->
+        <div class="space-y-2">
+            <template v-if="logs?.data?.length">
+                <AuditLogEntry v-for="log in logs.data" :key="log.id" :log="log" />
+            </template>
+            <div
+                v-else
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] px-4 py-12 text-center"
+            >
+                <svg
+                    class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                    />
+                </svg>
+                <p class="text-sm text-[var(--esc-panel-text-muted)]">No audit log entries found</p>
+                <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                    Activity will appear here as changes are made
+                </p>
+            </div>
+        </div>
+
+        <!-- Pagination -->
+        <div v-if="logs?.links?.length > 3" class="mt-6 flex justify-center gap-1">
+            <template v-for="link in logs.links" :key="link.label">
+                <button
+                    v-if="link.url"
+                    :class="[
+                        'rounded-lg px-3 py-1.5 text-sm transition-colors',
+                        link.active
+                            ? 'bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] text-white'
+                            : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]',
+                    ]"
+                    @click="router.get(link.url, {}, { preserveState: true })"
+                    v-html="link.label"
+                ></button>
+                <span
+                    v-else
+                    class="rounded-lg px-3 py-1.5 text-sm text-[var(--esc-panel-text-muted)]"
+                    v-html="link.label"
+                ></span>
+            </template>
+        </div>
+    </EscalatedLayout>
+</template>