From 9137f41537c8d84a92be7539a26824a19928c4df Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Fri, 22 May 2026 20:09:05 +0200
Subject: [PATCH] feat(02-05): admin tab components and AdminView

- AdminView.vue: tabbed layout (Users | Quotas | AI Config) with UI-SPEC tab strip classes
- AdminUsersTab.vue: user table with create form (crypto.getRandomValues password), inline deactivation confirmation, reactivate, reset-password, row-level spinner, empty state
- AdminQuotasTab.vue: quota inline edit with MB display, usage %, warning when limit < usage
- AdminAiConfigTab.vue: AI provider/model per-user with 1.5s "Saved" confirmation
- client.js: fix adminDeactivateUser/adminReactivateUser to use PATCH /status endpoint, fix adminResetUserPassword to /password-reset, fix adminUpdateAiConfig to send ai_provider/ai_model, add adminGetUserQuota
- No impersonation UI in any admin component (T-02-31)
---
 frontend/src/api/client.js                    |  20 +-
 .../src/components/admin/AdminAiConfigTab.vue | 135 +++++++
 .../src/components/admin/AdminQuotasTab.vue   | 182 +++++++++
 .../src/components/admin/AdminUsersTab.vue    | 379 ++++++++++++++++++
 frontend/src/views/AdminView.vue              |  19 +-
 5 files changed, 722 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/admin/AdminAiConfigTab.vue
 create mode 100644 frontend/src/components/admin/AdminQuotasTab.vue
 create mode 100644 frontend/src/components/admin/AdminUsersTab.vue

diff --git a/frontend/src/api/client.js b/frontend/src/api/client.js
index 774d00a..6855396 100644
--- a/frontend/src/api/client.js
+++ b/frontend/src/api/client.js
@@ -225,15 +225,27 @@ export function adminCreateUser(body) {
 }
 
 export function adminDeactivateUser(id) {
-  return request(`/api/admin/users/${id}/deactivate`, { method: 'POST' })
+  return request(`/api/admin/users/${id}/status`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ is_active: false }),
+  })
 }
 
 export function adminReactivateUser(id) {
-  return request(`/api/admin/users/${id}/reactivate`, { method: 'POST' })
+  return request(`/api/admin/users/${id}/status`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ is_active: true }),
+  })
 }
 
 export function adminResetUserPassword(id) {
-  return request(`/api/admin/users/${id}/reset-password`, { method: 'POST' })
+  return request(`/api/admin/users/${id}/password-reset`, { method: 'POST' })
+}
+
+export function adminGetUserQuota(id) {
+  return request(`/api/admin/users/${id}/quota`)
 }
 
 export function adminUpdateQuota(id, limitBytes) {
@@ -248,6 +260,6 @@ export function adminUpdateAiConfig(id, provider, model) {
   return request(`/api/admin/users/${id}/ai-config`, {
     method: 'PATCH',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ provider, model }),
+    body: JSON.stringify({ ai_provider: provider, ai_model: model }),
   })
 }
diff --git a/frontend/src/components/admin/AdminAiConfigTab.vue b/frontend/src/components/admin/AdminAiConfigTab.vue
new file mode 100644
index 0000000..afee257
--- /dev/null
+++ b/frontend/src/components/admin/AdminAiConfigTab.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <!-- Loading state -->
+    <div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
+      <div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
+        <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
+        Loading AI config…
+      </div>
+    </div>
+
+    <!-- Empty state -->
+    <div v-else-if="users.length === 0" class="bg-white rounded-xl border border-gray-200 p-12 text-center">
+      <h3 class="text-sm font-semibold text-gray-900 mb-1">No users yet</h3>
+      <p class="text-sm text-gray-500">Create the first user account to get started.</p>
+    </div>
+
+    <!-- AI config table -->
+    <div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
+      <table class="w-full">
+        <thead>
+          <tr class="bg-gray-50 text-left">
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Email</th>
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">AI Provider</th>
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">AI Model</th>
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-200">
+          <tr v-for="user in users" :key="user.id" class="bg-white text-sm">
+            <td class="px-4 py-3 text-gray-900">{{ user.email }}</td>
+            <td class="px-4 py-3">
+              <select
+                v-model="configs[user.id].provider"
+                class="block w-36 rounded-lg px-2 py-1.5 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors bg-white"
+              >
+                <option value="">— None —</option>
+                <option v-for="p in providers" :key="p.value" :value="p.value">{{ p.label }}</option>
+              </select>
+            </td>
+            <td class="px-4 py-3">
+              <input
+                v-model="configs[user.id].model"
+                type="text"
+                placeholder="e.g. gpt-4o"
+                class="block w-40 rounded-lg px-2 py-1.5 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
+              />
+            </td>
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-2">
+                <button
+                  @click="saveConfig(user.id)"
+                  :disabled="savingId === user.id"
+                  class="text-sm text-indigo-600 hover:text-indigo-700 font-semibold disabled:opacity-50 flex items-center gap-1"
+                >
+                  <span v-if="savingId === user.id" class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
+                  {{ savingId === user.id ? 'Saving…' : 'Save' }}
+                </button>
+                <span
+                  v-if="savedId === user.id"
+                  class="text-xs text-green-600 font-semibold"
+                >
+                  Saved
+                </span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Error message -->
+    <p v-if="loadError" class="mt-3 text-sm text-red-600">{{ loadError }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import * as api from '../../api/client.js'
+
+const users = ref([])
+const loading = ref(false)
+const loadError = ref(null)
+const savingId = ref(null)
+const savedId = ref(null)
+
+// Per-user config state: { [userId]: { provider, model } }
+const configs = reactive({})
+
+const providers = [
+  { value: 'openai', label: 'OpenAI' },
+  { value: 'anthropic', label: 'Anthropic' },
+  { value: 'ollama', label: 'Ollama' },
+  { value: 'lmstudio', label: 'LM Studio' },
+]
+
+async function saveConfig(userId) {
+  savingId.value = userId
+  savedId.value = null
+  try {
+    await api.adminUpdateAiConfig(
+      userId,
+      configs[userId].provider || null,
+      configs[userId].model || null
+    )
+    savedId.value = userId
+    setTimeout(() => {
+      if (savedId.value === userId) savedId.value = null
+    }, 1500)
+  } catch (e) {
+    loadError.value = e.message
+  } finally {
+    savingId.value = null
+  }
+}
+
+onMounted(async () => {
+  loading.value = true
+  loadError.value = null
+  try {
+    const data = await api.adminListUsers()
+    users.value = data.items || []
+    // Initialize per-user config state
+    for (const user of users.value) {
+      configs[user.id] = {
+        provider: user.ai_provider || '',
+        model: user.ai_model || '',
+      }
+    }
+  } catch (e) {
+    loadError.value = e.message
+  } finally {
+    loading.value = false
+  }
+})
+</script>
diff --git a/frontend/src/components/admin/AdminQuotasTab.vue b/frontend/src/components/admin/AdminQuotasTab.vue
new file mode 100644
index 0000000..7babeb4
--- /dev/null
+++ b/frontend/src/components/admin/AdminQuotasTab.vue
@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <!-- Loading state -->
+    <div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
+      <div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
+        <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
+        Loading quotas…
+      </div>
+    </div>
+
+    <!-- Empty state -->
+    <div v-else-if="rows.length === 0" class="bg-white rounded-xl border border-gray-200 p-12 text-center">
+      <h3 class="text-sm font-semibold text-gray-900 mb-1">No users yet</h3>
+      <p class="text-sm text-gray-500">Create the first user account to get started.</p>
+    </div>
+
+    <!-- Quotas table -->
+    <div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
+      <table class="w-full">
+        <thead>
+          <tr class="bg-gray-50 text-left">
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Email</th>
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Used</th>
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Limit</th>
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Usage %</th>
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-200">
+          <tr v-for="row in rows" :key="row.id" class="bg-white text-sm">
+            <td class="px-4 py-3 text-gray-900">{{ row.email }}</td>
+            <td class="px-4 py-3 text-gray-700">{{ formatMB(row.used_bytes) }}</td>
+
+            <!-- Limit cell — inline edit when editing -->
+            <td class="px-4 py-3">
+              <div v-if="editingId === row.id">
+                <input
+                  v-model.number="editLimitMB"
+                  type="number"
+                  min="1"
+                  step="1"
+                  class="block w-28 rounded-lg px-2 py-1 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
+                  @keyup.enter="saveQuota(row)"
+                  @keyup.escape="cancelEdit"
+                />
+                <p v-if="editWarning && editingId === row.id" class="mt-1 text-xs text-amber-600">
+                  New limit is below current usage ({{ formatMB(row.used_bytes) }}). Existing documents will not be deleted, but uploads will be blocked.
+                </p>
+              </div>
+              <span v-else class="text-gray-700">{{ formatMB(row.limit_bytes) }}</span>
+            </td>
+
+            <td class="px-4 py-3 text-gray-700">
+              {{ usagePercent(row.used_bytes, row.limit_bytes) }}%
+            </td>
+
+            <!-- Actions cell -->
+            <td class="px-4 py-3">
+              <div v-if="editingId === row.id" class="flex items-center gap-2">
+                <button
+                  @click="saveQuota(row)"
+                  :disabled="savingId === row.id"
+                  class="text-sm text-indigo-600 hover:text-indigo-700 font-semibold disabled:opacity-50 flex items-center gap-1"
+                >
+                  <span v-if="savingId === row.id" class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
+                  {{ savingId === row.id ? 'Saving…' : 'Save' }}
+                </button>
+                <span class="text-gray-300">·</span>
+                <button @click="cancelEdit" class="text-sm text-gray-500 hover:text-gray-700">
+                  Cancel
+                </button>
+              </div>
+              <button
+                v-else
+                @click="startEdit(row)"
+                class="text-sm text-indigo-600 hover:text-indigo-700"
+              >
+                Edit
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Error message -->
+    <p v-if="loadError" class="mt-3 text-sm text-red-600">{{ loadError }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import * as api from '../../api/client.js'
+
+const rows = ref([])
+const loading = ref(false)
+const loadError = ref(null)
+const editingId = ref(null)
+const editLimitMB = ref(0)
+const editWarning = ref(false)
+const savingId = ref(null)
+
+function formatMB(bytes) {
+  if (bytes == null) return '—'
+  return Math.round(bytes / 1048576) + ' MB'
+}
+
+function usagePercent(used, limit) {
+  if (!limit) return 0
+  return Math.round((used / limit) * 100)
+}
+
+function startEdit(row) {
+  editingId.value = row.id
+  editLimitMB.value = Math.round(row.limit_bytes / 1048576)
+  editWarning.value = false
+}
+
+function cancelEdit() {
+  editingId.value = null
+  editWarning.value = false
+}
+
+async function saveQuota(row) {
+  const newBytes = editLimitMB.value * 1048576
+  if (newBytes < row.used_bytes) {
+    editWarning.value = true
+  }
+  savingId.value = row.id
+  try {
+    const result = await api.adminUpdateQuota(row.id, newBytes)
+    // Update the row in place
+    const idx = rows.value.findIndex(r => r.id === row.id)
+    if (idx !== -1) {
+      rows.value[idx] = {
+        ...rows.value[idx],
+        limit_bytes: result.limit_bytes,
+        used_bytes: result.used_bytes,
+      }
+      if (result.warning) {
+        editWarning.value = true
+        // Keep edit mode open briefly to show warning, then close
+        setTimeout(() => {
+          editingId.value = null
+          editWarning.value = false
+        }, 3000)
+      } else {
+        editingId.value = null
+        editWarning.value = false
+      }
+    }
+  } catch (e) {
+    loadError.value = e.message
+    editingId.value = null
+  } finally {
+    savingId.value = null
+  }
+}
+
+onMounted(async () => {
+  loading.value = true
+  loadError.value = null
+  try {
+    // Load users first to get email addresses
+    const usersData = await api.adminListUsers()
+    const users = usersData.items || []
+
+    // Fetch quotas for all users in parallel
+    const quotaResults = await Promise.allSettled(
+      users.map(u => api.adminGetUserQuota(u.id).then(q => ({ ...q, id: u.id, email: u.email })))
+    )
+
+    rows.value = quotaResults
+      .filter(r => r.status === 'fulfilled')
+      .map(r => r.value)
+  } catch (e) {
+    loadError.value = e.message
+  } finally {
+    loading.value = false
+  }
+})
+</script>
diff --git a/frontend/src/components/admin/AdminUsersTab.vue b/frontend/src/components/admin/AdminUsersTab.vue
new file mode 100644
index 0000000..ce37f28
--- /dev/null
+++ b/frontend/src/components/admin/AdminUsersTab.vue
@@ -0,0 +1,379 @@
+<template>
+  <div>
+    <!-- Create user panel (inline above table) -->
+    <div v-if="showCreateForm" class="bg-white border border-gray-200 rounded-xl p-6 mb-4">
+      <h3 class="text-sm font-semibold text-gray-900 mb-4">Create user</h3>
+      <div class="space-y-3">
+        <div>
+          <label class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
+          <input
+            v-model="newUser.email"
+            type="email"
+            placeholder="user@example.com"
+            class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
+          />
+        </div>
+        <div>
+          <label class="block text-sm font-semibold text-gray-700 mb-1">Role</label>
+          <select
+            v-model="newUser.role"
+            class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors bg-white"
+          >
+            <option value="user">User</option>
+            <option value="admin">Admin</option>
+          </select>
+        </div>
+        <div>
+          <label class="block text-sm font-semibold text-gray-700 mb-1">Temporary password</label>
+          <div class="flex gap-2">
+            <input
+              :value="newUser.password"
+              type="text"
+              readonly
+              class="block flex-1 rounded-lg px-3 py-2 text-sm border border-gray-200 bg-gray-50 text-gray-700 font-mono focus:outline-none"
+            />
+            <button
+              @click="copyPassword"
+              class="px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition-colors"
+              :title="passwordCopied ? 'Copied!' : 'Copy password'"
+            >
+              <svg v-if="!passwordCopied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+              <svg v-else class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              </svg>
+            </button>
+            <button
+              @click="generatePassword"
+              class="px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition-colors"
+              title="Regenerate password"
+            >
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <p v-if="createError" class="text-xs text-red-600">{{ createError }}</p>
+        <div class="flex gap-2 pt-1">
+          <button
+            @click="submitCreate"
+            :disabled="creating"
+            class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold px-4 py-2 rounded-lg disabled:opacity-50 transition-colors"
+          >
+            <span v-if="creating" class="flex items-center gap-1.5">
+              <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
+              Creating…
+            </span>
+            <span v-else>Create user</span>
+          </button>
+          <button
+            @click="cancelCreate"
+            class="text-sm px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Table header with Create user button -->
+    <div class="flex items-center justify-between mb-3">
+      <p class="text-sm text-gray-500">{{ users.length }} user{{ users.length !== 1 ? 's' : '' }}</p>
+      <button
+        v-if="!showCreateForm"
+        @click="openCreateForm"
+        class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors"
+      >
+        Create user
+      </button>
+    </div>
+
+    <!-- Loading state -->
+    <div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
+      <div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
+        <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
+        Loading users…
+      </div>
+    </div>
+
+    <!-- Empty state -->
+    <div v-else-if="users.length === 0" class="bg-white rounded-xl border border-gray-200 p-12 text-center">
+      <h3 class="text-sm font-semibold text-gray-900 mb-1">No users yet</h3>
+      <p class="text-sm text-gray-500">Create the first user account to get started.</p>
+    </div>
+
+    <!-- Users table -->
+    <div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
+      <table class="w-full">
+        <thead>
+          <tr class="bg-gray-50 text-left">
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Email</th>
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Role</th>
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Created</th>
+            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-200">
+          <tr
+            v-for="user in users"
+            :key="user.id"
+            :class="[
+              'text-sm transition-colors',
+              !user.is_active ? 'bg-gray-50' : 'bg-white',
+              pendingAction[user.id] ? 'pointer-events-none opacity-60' : '',
+            ]"
+          >
+            <td class="px-4 py-3 text-gray-900">{{ user.email }}</td>
+            <td class="px-4 py-3">
+              <span
+                class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold"
+                :class="user.role === 'admin' ? 'bg-indigo-100 text-indigo-700' : 'bg-gray-100 text-gray-600'"
+              >
+                {{ user.role === 'admin' ? 'Admin' : 'User' }}
+              </span>
+            </td>
+            <td class="px-4 py-3">
+              <span
+                class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold"
+                :class="user.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'"
+              >
+                {{ user.is_active ? 'Active' : 'Deactivated' }}
+              </span>
+            </td>
+            <td class="px-4 py-3 text-gray-500">{{ formatDate(user.created_at) }}</td>
+            <td class="px-4 py-3">
+              <!-- Inline deactivation confirmation -->
+              <div v-if="confirmDeactivate === user.id" class="space-y-2">
+                <p class="text-xs text-gray-700">
+                  Deactivate <span class="font-semibold">{{ user.email }}</span>? They will lose access immediately. Their data is preserved.
+                </p>
+                <div class="flex items-center gap-2">
+                  <button
+                    @click="confirmDoDeactivate(user.id)"
+                    :disabled="pendingAction[user.id]"
+                    class="text-red-600 hover:text-red-700 text-sm font-semibold disabled:opacity-50"
+                  >
+                    <span v-if="pendingAction[user.id]" class="flex items-center gap-1">
+                      <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
+                      Deactivating…
+                    </span>
+                    <span v-else>Deactivate</span>
+                  </button>
+                  <span class="text-gray-300">·</span>
+                  <button @click="confirmDeactivate = null" class="text-gray-500 hover:text-gray-700 text-sm">
+                    Keep account
+                  </button>
+                </div>
+              </div>
+
+              <!-- Normal actions -->
+              <div v-else class="flex items-center gap-2">
+                <span v-if="pendingAction[user.id]" class="flex items-center gap-1 text-gray-400 text-sm">
+                  <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
+                </span>
+
+                <template v-else-if="user.is_active">
+                  <button
+                    @click="resetPassword(user.id)"
+                    class="text-indigo-600 hover:text-indigo-700 text-sm"
+                  >
+                    Reset password
+                  </button>
+                  <span class="text-gray-300">·</span>
+                  <button
+                    @click="startDeactivate(user.id)"
+                    class="text-red-600 hover:text-red-700 text-sm"
+                  >
+                    Deactivate
+                  </button>
+                </template>
+
+                <template v-else>
+                  <button
+                    @click="reactivate(user.id)"
+                    class="text-indigo-600 hover:text-indigo-700 text-sm"
+                  >
+                    Reactivate
+                  </button>
+                </template>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Action error message -->
+    <p v-if="actionError" class="mt-3 text-sm text-red-600">{{ actionError }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import * as api from '../../api/client.js'
+
+const users = ref([])
+const loading = ref(false)
+const showCreateForm = ref(false)
+const confirmDeactivate = ref(null)
+const pendingAction = reactive({})
+const actionError = ref(null)
+const creating = ref(false)
+const createError = ref(null)
+const passwordCopied = ref(false)
+
+const newUser = reactive({
+  email: '',
+  role: 'user',
+  password: '',
+})
+
+function generateRandomPassword() {
+  const charset = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$%^&*'
+  const arr = new Uint8Array(16)
+  crypto.getRandomValues(arr)
+  let pw = ''
+  for (const byte of arr) {
+    pw += charset[byte % charset.length]
+  }
+  // Ensure all character classes are represented
+  pw = pw.slice(0, 12) + 'A1!'
+  return pw
+}
+
+function generatePassword() {
+  newUser.password = generateRandomPassword()
+  passwordCopied.value = false
+}
+
+function copyPassword() {
+  navigator.clipboard.writeText(newUser.password).then(() => {
+    passwordCopied.value = true
+    setTimeout(() => { passwordCopied.value = false }, 2000)
+  })
+}
+
+function openCreateForm() {
+  newUser.email = ''
+  newUser.role = 'user'
+  newUser.password = generateRandomPassword()
+  createError.value = null
+  showCreateForm.value = true
+}
+
+function cancelCreate() {
+  showCreateForm.value = false
+  createError.value = null
+}
+
+async function submitCreate() {
+  if (!newUser.email) {
+    createError.value = 'Email is required.'
+    return
+  }
+  creating.value = true
+  createError.value = null
+  try {
+    const handle = newUser.email.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '_').slice(0, 40)
+    const created = await api.adminCreateUser({
+      handle,
+      email: newUser.email,
+      password: newUser.password,
+      role: newUser.role,
+    })
+    // Prepend the new user with sensible defaults for display
+    users.value.unshift({
+      id: created.id,
+      handle: created.handle,
+      email: created.email,
+      role: created.role,
+      is_active: true,
+      totp_enabled: false,
+      ai_provider: null,
+      ai_model: null,
+      created_at: created.created_at,
+    })
+    showCreateForm.value = false
+  } catch (e) {
+    createError.value = e.message
+  } finally {
+    creating.value = false
+  }
+}
+
+function startDeactivate(id) {
+  confirmDeactivate.value = id
+}
+
+async function confirmDoDeactivate(id) {
+  pendingAction[id] = true
+  actionError.value = null
+  try {
+    await api.adminDeactivateUser(id)
+    const idx = users.value.findIndex(u => u.id === id)
+    if (idx !== -1) {
+      users.value[idx] = { ...users.value[idx], is_active: false }
+    }
+    confirmDeactivate.value = null
+  } catch (e) {
+    actionError.value = e.message
+    confirmDeactivate.value = null
+  } finally {
+    delete pendingAction[id]
+  }
+}
+
+async function reactivate(id) {
+  pendingAction[id] = true
+  actionError.value = null
+  try {
+    await api.adminReactivateUser(id)
+    const idx = users.value.findIndex(u => u.id === id)
+    if (idx !== -1) {
+      users.value[idx] = { ...users.value[idx], is_active: true }
+    }
+  } catch (e) {
+    actionError.value = e.message
+  } finally {
+    delete pendingAction[id]
+  }
+}
+
+async function resetPassword(id) {
+  pendingAction[id] = true
+  actionError.value = null
+  try {
+    await api.adminResetUserPassword(id)
+  } catch (e) {
+    actionError.value = e.message
+  } finally {
+    delete pendingAction[id]
+  }
+}
+
+function formatDate(iso) {
+  if (!iso) return '—'
+  try {
+    return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+  } catch {
+    return iso
+  }
+}
+
+onMounted(async () => {
+  loading.value = true
+  try {
+    const data = await api.adminListUsers()
+    users.value = data.items || []
+  } catch (e) {
+    actionError.value = e.message
+  } finally {
+    loading.value = false
+  }
+})
+</script>
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index 0ddcc53..ae6720c 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="p-8 max-w-4xl mx-auto">
-    <h2 class="text-2xl font-semibold text-gray-900 mb-4">Admin panel</h2>
+  <div class="p-8 max-w-5xl mx-auto">
+    <h2 class="text-2xl font-semibold text-gray-900 mb-6">Admin panel</h2>
 
-    <!-- Sub-navigation -->
+    <!-- Tab strip -->
     <div class="flex border-b border-gray-200 mb-6">
       <button
         v-for="tab in tabs"
@@ -17,17 +17,18 @@
       </button>
     </div>
 
-    <!-- Tab content (stub — wired in Phase 2 admin plan) -->
-    <div class="text-sm text-gray-500">
-      {{ activeTab === 'users' ? 'User management coming soon.' :
-         activeTab === 'quotas' ? 'Quota management coming soon.' :
-         'AI config management coming soon.' }}
-    </div>
+    <!-- Tab content -->
+    <AdminUsersTab v-if="activeTab === 'users'" />
+    <AdminQuotasTab v-if="activeTab === 'quotas'" />
+    <AdminAiConfigTab v-if="activeTab === 'ai'" />
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import AdminUsersTab from '../components/admin/AdminUsersTab.vue'
+import AdminQuotasTab from '../components/admin/AdminQuotasTab.vue'
+import AdminAiConfigTab from '../components/admin/AdminAiConfigTab.vue'
 
 const tabs = [
   { id: 'users', label: 'Users' },