new funcionality

resources/js/pages/admin/Analytics.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import StatTile from '../../components/charts/StatTile.vue';
@@ -26,10 +26,28 @@ onMounted(load);
 
 const appItems = computed(() => (summary.value?.logins_by_app ?? []).map((a) => ({ label: a.client_name, value: a.count })));
 const userItems = computed(() => (summary.value?.top_users ?? []).map((u) => ({ label: u.name, value: u.count })));
+const activeTokenItems = computed(() => (summary.value?.active_tokens_by_client ?? []).map((c) => ({ label: c.client_name, value: c.count })));
+const scopeItems = computed(() => (summary.value?.scope_usage ?? []).map((s) => ({ label: s.description, value: s.count })));
 
 function formatDateTime(iso: string): string {
     return new Date(iso).toLocaleString(locale.value, { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
 }
+
+async function exportPdf(): Promise<void> {
+    const tableWasHidden = !showTable.value;
+    if (tableWasHidden) showTable.value = true;
+    await nextTick();
+
+    // Fuerza tema claro para la impresión (ahorra tinta, evita fondos oscuros
+    // recortados) y lo restaura después de que el usuario cierre el diálogo.
+    const wasDark = document.documentElement.classList.contains('dark');
+    document.documentElement.classList.remove('dark');
+
+    window.print();
+
+    if (wasDark) document.documentElement.classList.add('dark');
+    if (tableWasHidden) showTable.value = false;
+}
 </script>
 
 <template>
@@ -40,12 +58,18 @@ function formatDateTime(iso: string): string {
                 <p class="page-subtitle">{{ t('analytics.subtitle') }}</p>
             </div>
 
-            <!-- filtro de rango de fechas: una fila, arriba de todo, escopa todo lo de abajo -->
-            <select v-model.number="days" class="pill-select">
-                <option :value="7">{{ t('analytics.last7') }}</option>
-                <option :value="30">{{ t('analytics.last30') }}</option>
-                <option :value="90">{{ t('analytics.last90') }}</option>
-            </select>
+            <div class="analytics__header-controls no-print">
+                <!-- filtro de rango de fechas: una fila, arriba de todo, escopa todo lo de abajo -->
+                <select v-model.number="days" class="pill-select">
+                    <option :value="7">{{ t('analytics.last7') }}</option>
+                    <option :value="30">{{ t('analytics.last30') }}</option>
+                    <option :value="90">{{ t('analytics.last90') }}</option>
+                </select>
+
+                <button v-if="summary" @click="exportPdf" type="button" class="btn btn--secondary">
+                    {{ t('analytics.exportPdf') }}
+                </button>
+            </div>
         </div>
 
         <p v-if="loading && !summary" class="analytics__loading">{{ t('common.loading') }}</p>
@@ -56,6 +80,16 @@ function formatDateTime(iso: string): string {
                 <StatTile :label="t('analytics.activeSessions')" :value="summary.kpis.active_sessions" :hint="t('analytics.activeSessionsHint')" />
                 <StatTile :label="t('analytics.loginsToday')" :value="summary.kpis.logins_today" />
                 <StatTile :label="t('analytics.logins7d')" :value="summary.kpis.logins_7d" />
+                <StatTile
+                    :label="t('analytics.loginFailureRate')"
+                    :value="`${summary.kpis.login_failure_rate_7d}%`"
+                    :hint="t('analytics.loginFailureRateHint', { count: summary.kpis.login_failures_7d })"
+                />
+                <StatTile
+                    :label="t('analytics.oauthApprovalRate')"
+                    :value="`${summary.oauth_funnel.approval_rate}%`"
+                    :hint="t('analytics.oauthApprovalRateHint', { approved: summary.oauth_funnel.approved, attempted: summary.oauth_funnel.attempted })"
+                />
             </div>
 
             <div class="analytics__chart" :class="{ 'analytics__section--loading': loading }">
@@ -67,10 +101,43 @@ function formatDateTime(iso: string): string {
                 <BarList :title="t('analytics.topUsers')" :items="userItems" :empty-text="t('analytics.noUserActivity')" />
             </div>
 
+            <div class="card analytics__funnel" :class="{ 'analytics__section--loading': loading }">
+                <h3 class="card__title">{{ t('analytics.funnelTitle') }}</h3>
+
+                <p v-if="!summary.oauth_funnel_by_client.length" class="analytics__recent-count">{{ t('analytics.funnelEmpty') }}</p>
+                <div v-else class="analytics__table-wrap">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th class="table__head-cell">{{ t('analytics.colClient') }}</th>
+                                <th class="table__head-cell">{{ t('analytics.colAttempted') }}</th>
+                                <th class="table__head-cell">{{ t('analytics.colApproved') }}</th>
+                                <th class="table__head-cell">{{ t('analytics.colDenied') }}</th>
+                                <th class="table__head-cell">{{ t('analytics.colApprovalRate') }}</th>
+                            </tr>
+                        </thead>
+                        <tbody class="table__body">
+                            <tr v-for="row in summary.oauth_funnel_by_client" :key="row.client_name">
+                                <td class="table__cell table__cell--primary">{{ row.client_name }}</td>
+                                <td class="table__cell">{{ row.attempted }}</td>
+                                <td class="table__cell">{{ row.approved }}</td>
+                                <td class="table__cell">{{ row.denied }}</td>
+                                <td class="table__cell">{{ row.attempted ? Math.round((row.approved / row.attempted) * 100) : 0 }}%</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <div class="analytics__bar-lists" :class="{ 'analytics__section--loading': loading }">
+                <BarList :title="t('analytics.activeTokensByClient')" :items="activeTokenItems" :empty-text="t('analytics.noActiveTokens')" />
+                <BarList :title="t('analytics.scopeUsageTitle')" :items="scopeItems" :empty-text="t('analytics.noScopeUsage')" />
+            </div>
+
             <div class="card analytics__recent" :class="{ 'analytics__section--loading': loading }">
                 <div class="analytics__recent-header">
                     <h3 class="card__title">{{ t('analytics.recentActivity') }}</h3>
-                    <button @click="showTable = !showTable" class="link analytics__toggle">
+                    <button @click="showTable = !showTable" class="link analytics__toggle no-print">
                         {{ showTable ? t('analytics.hide') : t('analytics.viewAll') }}
                     </button>
                 </div>
@@ -109,6 +176,12 @@ function formatDateTime(iso: string): string {
     --series-2: #eb6834;
 }
 
+.analytics__header-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
 .analytics__loading {
     margin-top: 1.5rem;
     color: var(--color-text-secondary);
@@ -132,6 +205,10 @@ function formatDateTime(iso: string): string {
     gap: 1rem;
 }
 
+.analytics__funnel {
+    margin-top: 1rem;
+}
+
 .analytics__recent {
     margin-top: 1rem;
 }

resources/js/pages/admin/AuditLog.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import axios from 'axios';
+import { useI18n } from 'vue-i18n';
+import type { AuditLogEntry, Paginated } from '../../types/models';
+
+const { t, locale } = useI18n();
+
+const loading = ref(true);
+const entries = ref<AuditLogEntry[]>([]);
+const page = ref(1);
+const lastPage = ref(1);
+const total = ref(0);
+const subjectType = ref<'' | 'user' | 'client'>('');
+const action = ref('');
+
+const actionOptions = [
+    'user.created',
+    'user.updated',
+    'user.deleted',
+    'user.restored',
+    'user.force_deleted',
+    'user.approved',
+    'user.app_role_assigned',
+    'user.app_role_revoked',
+    'client.created',
+    'client.revoked',
+    'user.2fa_enabled',
+    'user.2fa_disabled',
+    'user.2fa_recovery_regenerated',
+    'user.session_revoked',
+    'user.sessions_revoked_all',
+    'client.webhook_created',
+    'client.webhook_deleted',
+    'client.secret_rotated',
+    'user.password_reset',
+];
+
+const actionLabelKeys: Record<string, string> = {
+    'user.created': 'auditLog.actions.userCreated',
+    'user.updated': 'auditLog.actions.userUpdated',
+    'user.deleted': 'auditLog.actions.userDeleted',
+    'user.restored': 'auditLog.actions.userRestored',
+    'user.force_deleted': 'auditLog.actions.userForceDeleted',
+    'user.approved': 'auditLog.actions.userApproved',
+    'user.app_role_assigned': 'auditLog.actions.appRoleAssigned',
+    'user.app_role_revoked': 'auditLog.actions.appRoleRevoked',
+    'client.created': 'auditLog.actions.clientCreated',
+    'client.revoked': 'auditLog.actions.clientRevoked',
+    'user.2fa_enabled': 'auditLog.actions.twoFactorEnabled',
+    'user.2fa_disabled': 'auditLog.actions.twoFactorDisabled',
+    'user.2fa_recovery_regenerated': 'auditLog.actions.twoFactorRecoveryRegenerated',
+    'user.session_revoked': 'auditLog.actions.sessionRevoked',
+    'user.sessions_revoked_all': 'auditLog.actions.sessionsRevokedAll',
+    'client.webhook_created': 'auditLog.actions.webhookCreated',
+    'client.webhook_deleted': 'auditLog.actions.webhookDeleted',
+    'client.secret_rotated': 'auditLog.actions.secretRotated',
+    'user.password_reset': 'auditLog.actions.passwordReset',
+};
+
+function actionLabel(value: string): string {
+    const key = actionLabelKeys[value];
+    return key ? t(key) : value;
+}
+
+async function load(): Promise<void> {
+    loading.value = true;
+    const { data } = await axios.get<Paginated<AuditLogEntry>>('/web-api/admin/audit-log', {
+        params: {
+            page: page.value,
+            ...(subjectType.value ? { subject_type: subjectType.value } : {}),
+            ...(action.value ? { action: action.value } : {}),
+        },
+    });
+    entries.value = data.data;
+    lastPage.value = data.last_page;
+    total.value = data.total;
+    loading.value = false;
+}
+
+function goToPage(next: number): void {
+    if (next < 1 || next > lastPage.value) return;
+    page.value = next;
+}
+
+watch([subjectType, action], () => {
+    page.value = 1;
+    load();
+});
+watch(page, load);
+onMounted(load);
+
+function formatDateTime(iso: string): string {
+    return new Date(iso).toLocaleString(locale.value, { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+
+function formatMetadata(metadata: Record<string, unknown> | null): string {
+    if (!metadata || !Object.keys(metadata).length) return '—';
+
+    return Object.entries(metadata)
+        .map(([key, value]) => {
+            if (value && typeof value === 'object' && 'from' in value && 'to' in value) {
+                const { from, to } = value as { from: unknown; to: unknown };
+                return `${key}: ${from ?? '—'} → ${to ?? '—'}`;
+            }
+            if (value && typeof value === 'object' && 'changed' in value) {
+                return t('auditLog.fieldChanged', { field: key });
+            }
+            return `${key}: ${value}`;
+        })
+        .join(' · ');
+}
+</script>
+
+<template>
+    <div class="audit-log">
+        <div class="page-header">
+            <div>
+                <h1 class="page-title">{{ t('auditLog.title') }}</h1>
+                <p class="page-subtitle">{{ t('auditLog.subtitle') }}</p>
+            </div>
+        </div>
+
+        <div class="audit-log__filters">
+            <select v-model="subjectType" class="pill-select">
+                <option value="">{{ t('auditLog.allSubjects') }}</option>
+                <option value="user">{{ t('auditLog.subjectUser') }}</option>
+                <option value="client">{{ t('auditLog.subjectClient') }}</option>
+            </select>
+
+            <select v-model="action" class="pill-select">
+                <option value="">{{ t('auditLog.allActions') }}</option>
+                <option v-for="a in actionOptions" :key="a" :value="a">{{ actionLabel(a) }}</option>
+            </select>
+        </div>
+
+        <div class="table-card audit-log__table-card">
+            <p v-if="loading" class="table__empty">{{ t('common.loading') }}</p>
+            <p v-else-if="!entries.length" class="table__empty">{{ t('auditLog.empty') }}</p>
+
+            <table v-else class="table">
+                <thead class="table__head">
+                    <tr>
+                        <th class="table__head-cell">{{ t('auditLog.colWhen') }}</th>
+                        <th class="table__head-cell">{{ t('auditLog.colActor') }}</th>
+                        <th class="table__head-cell">{{ t('auditLog.colAction') }}</th>
+                        <th class="table__head-cell">{{ t('auditLog.colSubject') }}</th>
+                        <th class="table__head-cell">{{ t('auditLog.colDetails') }}</th>
+                        <th class="table__head-cell">{{ t('auditLog.colIp') }}</th>
+                    </tr>
+                </thead>
+                <tbody class="table__body">
+                    <tr v-for="entry in entries" :key="entry.id">
+                        <td class="table__cell audit-log__when">{{ formatDateTime(entry.created_at) }}</td>
+                        <td class="table__cell">{{ entry.actor_name ?? t('auditLog.systemActor') }}</td>
+                        <td class="table__cell table__cell--primary">{{ actionLabel(entry.action) }}</td>
+                        <td class="table__cell">{{ entry.subject_label ?? entry.subject_id }}</td>
+                        <td class="table__cell audit-log__details">{{ formatMetadata(entry.metadata) }}</td>
+                        <td class="table__cell">{{ entry.ip_address }}</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div v-if="!loading && entries.length" class="audit-log__pager">
+                <button class="link" :disabled="page <= 1" @click="goToPage(page - 1)">{{ t('auditLog.prevPage') }}</button>
+                <span class="audit-log__pager-info">{{ t('auditLog.pageInfo', { page, lastPage, total }) }}</span>
+                <button class="link" :disabled="page >= lastPage" @click="goToPage(page + 1)">{{ t('auditLog.nextPage') }}</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.audit-log__filters {
+    margin-top: 1rem;
+    display: flex;
+    gap: 0.75rem;
+}
+
+.audit-log__table-card {
+    margin-top: 1rem;
+}
+
+.audit-log__when {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.audit-log__details {
+    color: var(--color-text-secondary);
+    font-size: 0.8125rem;
+}
+
+.audit-log__pager {
+    margin-top: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    font-size: 0.8125rem;
+}
+
+.audit-log__pager button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.audit-log__pager-info {
+    color: var(--color-text-secondary);
+}
+</style>

resources/js/pages/admin/Users.vue

@@ -3,7 +3,7 @@ import { computed, onMounted, reactive, ref } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '../../stores/auth';
-import type { AppRoleGroup, OAuthApp, User } from '../../types/models';
+import type { AppRoleGroup, OAuthApp, User, UserSession } from '../../types/models';
 
 type View = 'active' | 'pending' | 'trashed';
 
@@ -16,6 +16,7 @@ const trashedUsers = ref<User[]>([]);
 const view = ref<View>('active');
 const apps = ref<OAuthApp[]>([]);
 const appRoles = ref<AppRoleGroup[]>([]);
+const sessions = ref<UserSession[]>([]);
 const loading = ref(true);
 const creating = ref(false);
 const editingId = ref<number | null>(null);
@@ -133,6 +134,25 @@ async function removeAppRole(user: User, clientId: string, role: string): Promis
     await loadAppRoles(user);
 }
 
+async function loadSessions(user: User): Promise<void> {
+    const { data } = await axios.get<UserSession[]>(`/web-api/admin/users/${user.id}/sessions`);
+    sessions.value = data;
+}
+
+async function revokeSession(user: User, session: UserSession): Promise<void> {
+    if (!confirm(t('adminUsers.revokeSessionConfirm', { name: session.client_name ?? session.name ?? t('adminUsers.sessionUnknownClient') }))) return;
+
+    await axios.delete(`/web-api/admin/users/${user.id}/sessions/${session.id}`);
+    await loadSessions(user);
+}
+
+async function revokeAllSessions(user: User): Promise<void> {
+    if (!confirm(t('adminUsers.revokeAllSessionsConfirm', { name: user.name }))) return;
+
+    await axios.delete(`/web-api/admin/users/${user.id}/sessions`);
+    await loadSessions(user);
+}
+
 async function create(): Promise<void> {
     creating.value = true;
     errors.value = {};
@@ -160,7 +180,9 @@ function startEdit(user: User): void {
     editForm.is_active = user.is_active;
     errors.value = {};
     appRoles.value = [];
+    sessions.value = [];
     loadAppRoles(user);
+    loadSessions(user);
 }
 
 function cancelEdit(): void {
@@ -357,6 +379,31 @@ onMounted(load);
                                             </button>
                                         </div>
                                     </div>
+
+                                    <div class="users__app-roles">
+                                        <div class="users__sessions-header">
+                                            <h3 class="users__app-roles-title">{{ t('adminUsers.sessionsTitle') }}</h3>
+                                            <button v-if="sessions.length" @click="revokeAllSessions(user)" class="link link--danger">
+                                                {{ t('adminUsers.revokeAllSessions') }}
+                                            </button>
+                                        </div>
+                                        <p class="users__app-roles-desc">{{ t('adminUsers.sessionsDesc') }}</p>
+
+                                        <div v-if="!sessions.length" class="users__app-roles-empty">{{ t('adminUsers.noSessions') }}</div>
+                                        <ul v-else class="users__sessions-list">
+                                            <li v-for="session in sessions" :key="session.id" class="users__session-row">
+                                                <div>
+                                                    <span class="users__session-client">{{ session.client_name ?? t('adminUsers.sessionUnknownClient') }}</span>
+                                                    <span class="users__session-meta">
+                                                        {{ session.scopes?.join(', ') || t('common.none') }} · {{ formatDate(session.created_at) }}
+                                                    </span>
+                                                </div>
+                                                <button @click="revokeSession(user, session)" class="link link--danger">
+                                                    {{ t('adminUsers.revokeSession') }}
+                                                </button>
+                                            </li>
+                                        </ul>
+                                    </div>
                                 </td>
                             </tr>
                         </template>
@@ -553,6 +600,41 @@ onMounted(load);
     color: var(--color-text-muted);
 }
 
+.users__sessions-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.users__sessions-list {
+    margin-top: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.users__session-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.75rem;
+}
+
+.users__session-client {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--color-text-primary);
+}
+
+.users__session-meta {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+}
+
 @media (min-width: 640px) {
     .users__form {
         grid-template-columns: 1fr 1fr;