new funcionality

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;