From e99063e12b934c5c4bed9a4d4dc72b7803304faa Mon Sep 17 00:00:00 2001
From: IanShaw027 <131567472+IanShaw027@users.noreply.github.com>
Date: Sun, 4 Jan 2026 22:17:27 +0800
Subject: [PATCH] refactor(frontend): comprehensive split of large view files
 into modular components

- Split UsersView.vue into UserCreateModal, UserEditModal, UserApiKeysModal, etc.
- Split UsageView.vue into UsageStatsCards, UsageFilters, UsageTable, etc.
- Split DashboardView.vue into UserDashboardStats, UserDashboardCharts, etc.
- Split AccountsView.vue into AccountTableActions, AccountTableFilters, etc.
- Standardized TypeScript types across new components to resolve implicit 'any' and 'never[]' errors.
- Improved overall frontend maintainability and code clarity.
---
 .../admin/account/AccountActionMenu.vue       |   21 +
 .../admin/account/AccountBulkActionsBar.vue   |   14 +
 .../admin/account/AccountTableActions.vue     |   11 +
 .../admin/account/AccountTableFilters.vue     |   16 +
 .../admin/usage/UsageExportProgress.vue       |   16 +
 .../components/admin/usage/UsageFilters.vue   |   35 +
 .../admin/usage/UsageStatsCards.vue           |   27 +
 .../src/components/admin/usage/UsageTable.vue |   22 +
 .../admin/user/UserAllowedGroupsModal.vue     |   59 +
 .../admin/user/UserApiKeysModal.vue           |   47 +
 .../admin/user/UserBalanceModal.vue           |   46 +
 .../components/admin/user/UserCreateModal.vue |  118 +
 .../components/admin/user/UserEditModal.vue   |  101 +
 frontend/src/components/common/Input.vue      |  103 +
 frontend/src/components/common/Skeleton.vue   |   46 +
 frontend/src/components/common/TextArea.vue   |   81 +
 .../user/dashboard/UserDashboardCharts.vue    |   31 +
 .../dashboard/UserDashboardQuickActions.vue   |   15 +
 .../dashboard/UserDashboardRecentUsage.vue    |   18 +
 .../user/dashboard/UserDashboardStats.vue     |   24 +
 .../user/profile/ProfileEditForm.vue          |   74 +
 .../user/profile/ProfileInfoCard.vue          |   81 +
 .../user/profile/ProfilePasswordForm.vue      |  109 +
 frontend/src/composables/useTableLoader.ts    |  102 +
 frontend/src/views/admin/AccountsView.vue     | 1000 +-------
 frontend/src/views/admin/UsageView.vue        | 1462 +----------
 frontend/src/views/admin/UsersView.vue        | 2236 +----------------
 frontend/src/views/user/DashboardView.vue     | 1055 +-------
 28 files changed, 1454 insertions(+), 5516 deletions(-)
 create mode 100644 frontend/src/components/admin/account/AccountActionMenu.vue
 create mode 100644 frontend/src/components/admin/account/AccountBulkActionsBar.vue
 create mode 100644 frontend/src/components/admin/account/AccountTableActions.vue
 create mode 100644 frontend/src/components/admin/account/AccountTableFilters.vue
 create mode 100644 frontend/src/components/admin/usage/UsageExportProgress.vue
 create mode 100644 frontend/src/components/admin/usage/UsageFilters.vue
 create mode 100644 frontend/src/components/admin/usage/UsageStatsCards.vue
 create mode 100644 frontend/src/components/admin/usage/UsageTable.vue
 create mode 100644 frontend/src/components/admin/user/UserAllowedGroupsModal.vue
 create mode 100644 frontend/src/components/admin/user/UserApiKeysModal.vue
 create mode 100644 frontend/src/components/admin/user/UserBalanceModal.vue
 create mode 100644 frontend/src/components/admin/user/UserCreateModal.vue
 create mode 100644 frontend/src/components/admin/user/UserEditModal.vue
 create mode 100644 frontend/src/components/common/Input.vue
 create mode 100644 frontend/src/components/common/Skeleton.vue
 create mode 100644 frontend/src/components/common/TextArea.vue
 create mode 100644 frontend/src/components/user/dashboard/UserDashboardCharts.vue
 create mode 100644 frontend/src/components/user/dashboard/UserDashboardQuickActions.vue
 create mode 100644 frontend/src/components/user/dashboard/UserDashboardRecentUsage.vue
 create mode 100644 frontend/src/components/user/dashboard/UserDashboardStats.vue
 create mode 100644 frontend/src/components/user/profile/ProfileEditForm.vue
 create mode 100644 frontend/src/components/user/profile/ProfileInfoCard.vue
 create mode 100644 frontend/src/components/user/profile/ProfilePasswordForm.vue
 create mode 100644 frontend/src/composables/useTableLoader.ts

diff --git a/frontend/src/components/admin/account/AccountActionMenu.vue b/frontend/src/components/admin/account/AccountActionMenu.vue
new file mode 100644
index 00000000..9fa7d718
--- /dev/null
+++ b/frontend/src/components/admin/account/AccountActionMenu.vue
@@ -0,0 +1,21 @@
+<template>
+  <Teleport to="body">
+    <div v-if="show && position" class="action-menu-content fixed z-[9999] w-52 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800" :style="{ top: position.top + 'px', left: position.left + 'px' }">
+      <div class="py-1">
+        <template v-if="account">
+          <button @click="$emit('test', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100"><span class="text-green-500">▶</span> {{ t('admin.accounts.testConnection') }}</button>
+          <button @click="$emit('stats', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100"><span class="text-indigo-500">📊</span> {{ t('admin.accounts.viewStats') }}</button>
+          <template v-if="account.type === 'oauth' || account.type === 'setup-token'">
+            <button @click="$emit('reauth', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100 text-blue-600">🔗 {{ t('admin.accounts.reAuthorize') }}</button>
+            <button @click="$emit('refresh-token', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100 text-purple-600">🔄 {{ t('admin.accounts.refreshToken') }}</button>
+          </template>
+        </template>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+defineProps(['show', 'account', 'position']); defineEmits(['close', 'test', 'stats', 'reauth', 'refresh-token']); const { t } = useI18n()
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/account/AccountBulkActionsBar.vue b/frontend/src/components/admin/account/AccountBulkActionsBar.vue
new file mode 100644
index 00000000..17bd634d
--- /dev/null
+++ b/frontend/src/components/admin/account/AccountBulkActionsBar.vue
@@ -0,0 +1,14 @@
+<template>
+  <div v-if="selectedIds.length > 0" class="mb-4 flex items-center justify-between p-3 bg-primary-50 rounded-lg">
+    <span class="text-sm font-medium">{{ t('admin.accounts.bulkActions.selected', { count: selectedIds.length }) }}</span>
+    <div class="flex gap-2">
+      <button @click="$emit('delete')" class="btn btn-danger btn-sm">{{ t('admin.accounts.bulkActions.delete') }}</button>
+      <button @click="$emit('edit')" class="btn btn-primary btn-sm">{{ t('admin.accounts.bulkActions.edit') }}</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+defineProps(['selectedIds']); defineEmits(['delete', 'edit']); const { t } = useI18n()
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/account/AccountTableActions.vue b/frontend/src/components/admin/account/AccountTableActions.vue
new file mode 100644
index 00000000..72f9d389
--- /dev/null
+++ b/frontend/src/components/admin/account/AccountTableActions.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="flex justify-end gap-3">
+    <button @click="$emit('refresh')" :disabled="loading" class="btn btn-secondary"><svg :class="['h-5 w-5', loading ? 'animate-spin' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg></button>
+    <button @click="$emit('sync')" class="btn btn-secondary">Sync CRS</button>
+    <button @click="$emit('create')" class="btn btn-primary">{{ t('admin.accounts.createAccount') }}</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'; defineProps(['loading']); defineEmits(['refresh', 'sync', 'create']); const { t } = useI18n()
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/account/AccountTableFilters.vue b/frontend/src/components/admin/account/AccountTableFilters.vue
new file mode 100644
index 00000000..d72a3772
--- /dev/null
+++ b/frontend/src/components/admin/account/AccountTableFilters.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+    <div class="relative max-w-md flex-1"><input :value="searchQuery" type="text" :placeholder="t('admin.accounts.searchAccounts')" class="input" @input="$emit('update:searchQuery', ($event.target as HTMLInputElement).value)" /></div>
+    <div class="flex gap-3">
+      <Select v-model="filters.platform" :options="pOpts" @change="$emit('change')" />
+      <Select v-model="filters.status" :options="sOpts" @change="$emit('change')" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'; import { useI18n } from 'vue-i18n'; import Select from '@/components/common/Select.vue'
+defineProps(['searchQuery', 'filters']); defineEmits(['update:searchQuery', 'change']); const { t } = useI18n()
+const pOpts = computed(() => [{ value: '', label: t('admin.accounts.allPlatforms') }, { value: 'openai', label: 'OpenAI' }, { value: 'anthropic', label: 'Anthropic' }, { value: 'gemini', label: 'Gemini' }])
+const sOpts = computed(() => [{ value: '', label: t('admin.accounts.allStatus') }, { value: 'active', label: t('admin.accounts.status.active') }, { value: 'error', label: t('admin.accounts.status.error') }])
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/usage/UsageExportProgress.vue b/frontend/src/components/admin/usage/UsageExportProgress.vue
new file mode 100644
index 00000000..e571eff0
--- /dev/null
+++ b/frontend/src/components/admin/usage/UsageExportProgress.vue
@@ -0,0 +1,16 @@
+<template>
+  <ExportProgressDialog
+    :show="show"
+    :progress="progress"
+    :current="current"
+    :total="total"
+    :estimated-time="estimatedTime"
+    @cancel="$emit('cancel')"
+  />
+</template>
+
+<script setup lang="ts">
+import ExportProgressDialog from '@/components/common/ExportProgressDialog.vue'
+defineProps<{ show: boolean, progress: number, current: number, total: number, estimatedTime: string }>()
+defineEmits(['cancel'])
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/usage/UsageFilters.vue b/frontend/src/components/admin/usage/UsageFilters.vue
new file mode 100644
index 00000000..913e8cd6
--- /dev/null
+++ b/frontend/src/components/admin/usage/UsageFilters.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="card p-6"><div class="flex flex-wrap items-end gap-4">
+    <div class="min-w-[200px] relative"><label class="input-label">{{ t('admin.usage.userFilter') }}</label>
+      <input v-model="userKW" type="text" class="input pr-8" :placeholder="t('admin.usage.searchUserPlaceholder')" @input="debounceSearch" @focus="showDD = true" />
+      <button v-if="modelValue.user_id" @click="clearUser" class="absolute right-2 top-9 text-gray-400">✕</button>
+      <div v-if="showDD && (results.length > 0 || userKW)" class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800">
+        <button v-for="u in results" :key="u.id" @click="selectUser(u)" class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700"><span>{{ u.email }}</span><span class="ml-2 text-xs text-gray-400">#{{ u.id }}</span></button>
+      </div>
+    </div>
+    <div class="min-w-[180px]"><label class="input-label">{{ t('usage.model') }}</label><Select v-model="filters.model" :options="mOpts" searchable @change="emitChange" /></div>
+    <div class="min-w-[150px]"><label class="input-label">{{ t('admin.usage.group') }}</label><Select v-model="filters.group_id" :options="gOpts" @change="emitChange" /></div>
+    <div><label class="input-label">{{ t('usage.timeRange') }}</label><DateRangePicker :start-date="startDate" :end-date="endDate" @update:startDate="$emit('update:startDate', $event)" @update:endDate="$emit('update:endDate', $event)" @change="emitChange" /></div>
+    <div class="ml-auto flex gap-3"><button @click="$emit('reset')" class="btn btn-secondary">{{ t('common.reset') }}</button><button @click="$emit('export')" :disabled="exporting" class="btn btn-primary">{{ t('usage.exportExcel') }}</button></div>
+  </div></div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, reactive } from 'vue'; import { useI18n } from 'vue-i18n'; import { adminAPI } from '@/api/admin'; import Select from '@/components/common/Select.vue'; import DateRangePicker from '@/components/common/DateRangePicker.vue'
+const props = defineProps(['modelValue', 'exporting', 'startDate', 'endDate']); const emit = defineEmits(['update:modelValue', 'update:startDate', 'update:endDate', 'change', 'reset', 'export'])
+const { t } = useI18n(); const filters = props.modelValue
+const userKW = ref(''); const results = ref<any[]>([]); const showDD = ref(false); let timeout: any = null
+const mOpts = ref([{ value: null, label: t('admin.usage.allModels') }]); const gOpts = ref([{ value: null, label: t('admin.usage.allGroups') }])
+const emitChange = () => emit('change')
+const debounceSearch = () => { clearTimeout(timeout); timeout = setTimeout(async () => { if(!userKW.value) { results.value = []; return }; try { results.value = await adminAPI.usage.searchUsers(userKW.value) } catch {} }, 300) }
+const selectUser = (u: any) => { userKW.value = u.email; showDD.value = false; filters.user_id = u.id; emitChange() }
+const clearUser = () => { userKW.value = ''; results.value = []; filters.user_id = undefined; emitChange() }
+onMounted(async () => {
+  try { const [gs, ms] = await Promise.all([adminAPI.groups.list(1, 1000), adminAPI.dashboard.getModelStats({ start_date: props.startDate, end_date: props.endDate })])
+    gOpts.value.push(...gs.items.map((g: any) => ({ value: g.id, label: g.name })))
+    const unique = new Set<string>(); ms.models?.forEach((s: any) => s.model && unique.add(s.model))
+    mOpts.value.push(...Array.from(unique).sort().map(m => ({ value: m, label: m })))
+  } catch {}
+  document.addEventListener('click', (e) => { if(!(e.target as HTMLElement).closest('.relative')) showDD.value = false })
+})
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/usage/UsageStatsCards.vue b/frontend/src/components/admin/usage/UsageStatsCards.vue
new file mode 100644
index 00000000..c214fc50
--- /dev/null
+++ b/frontend/src/components/admin/usage/UsageStatsCards.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+    <div class="card p-4 flex items-center gap-3">
+      <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30 text-blue-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg></div>
+      <div><p class="text-xs font-medium text-gray-500">{{ t('usage.totalRequests') }}</p><p class="text-xl font-bold">{{ stats?.total_requests?.toLocaleString() || '0' }}</p></div>
+    </div>
+    <div class="card p-4 flex items-center gap-3">
+      <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30 text-amber-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /></svg></div>
+      <div><p class="text-xs font-medium text-gray-500">{{ t('usage.totalTokens') }}</p><p class="text-xl font-bold">{{ formatTokens(stats?.total_tokens || 0) }}</p></div>
+    </div>
+    <div class="card p-4 flex items-center gap-3">
+      <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30 text-green-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div>
+      <div><p class="text-xs font-medium text-gray-500">{{ t('usage.totalCost') }}</p><p class="text-xl font-bold text-green-600">${{ (stats?.total_actual_cost || 0).toFixed(4) }}</p></div>
+    </div>
+    <div class="card p-4 flex items-center gap-3">
+      <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30 text-purple-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div>
+      <div><p class="text-xs font-medium text-gray-500">{{ t('usage.avgDuration') }}</p><p class="text-xl font-bold">{{ formatDuration(stats?.average_duration_ms || 0) }}</p></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'; import type { AdminUsageStatsResponse } from '@/api/admin/usage'
+defineProps<{ stats: AdminUsageStatsResponse | null }>(); const { t } = useI18n()
+const formatDuration = (ms: number) => ms < 1000 ? `${ms.toFixed(0)}ms` : `${(ms/1000).toFixed(2)}s`
+const formatTokens = (v: number) => { if (v >= 1e9) return (v/1e9).toFixed(2) + 'B'; if (v >= 1e6) return (v/1e6).toFixed(2) + 'M'; if (v >= 1e3) return (v/1e3).toFixed(2) + 'K'; return v.toLocaleString() }
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/usage/UsageTable.vue b/frontend/src/components/admin/usage/UsageTable.vue
new file mode 100644
index 00000000..91e71e42
--- /dev/null
+++ b/frontend/src/components/admin/usage/UsageTable.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="card overflow-hidden"><div class="overflow-auto">
+    <DataTable :columns="cols" :data="data" :loading="loading">
+      <template #cell-user="{ row }"><div class="text-sm"><span class="font-medium text-gray-900 dark:text-white">{{ row.user?.email || '-' }}</span><span class="ml-1 text-xs text-gray-400">#{{ row.user_id }}</span></div></template>
+      <template #cell-model="{ value }"><span class="font-medium">{{ value }}</span></template>
+      <template #cell-tokens="{ row }"><div class="text-sm">In: {{ row.input_tokens.toLocaleString() }} / Out: {{ row.output_tokens.toLocaleString() }}</div></template>
+      <template #cell-cost="{ row }"><span class="font-medium text-green-600">${{ row.actual_cost.toFixed(6) }}</span></template>
+      <template #cell-created_at="{ value }"><span class="text-sm text-gray-500">{{ formatDateTime(value) }}</span></template>
+      <template #empty><EmptyState :message="t('usage.noRecords')" /></template>
+    </DataTable>
+  </div></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'; import { useI18n } from 'vue-i18n'; import { formatDateTime } from '@/utils/format'; import DataTable from '@/components/common/DataTable.vue'; import EmptyState from '@/components/common/EmptyState.vue'
+defineProps(['data', 'loading']); const { t } = useI18n()
+const cols = computed(() => [
+  { key: 'user', label: t('admin.usage.user') }, { key: 'model', label: t('usage.model'), sortable: true },
+  { key: 'tokens', label: t('usage.tokens') }, { key: 'cost', label: t('usage.cost') },
+  { key: 'created_at', label: t('usage.time'), sortable: true }
+])
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/user/UserAllowedGroupsModal.vue b/frontend/src/components/admin/user/UserAllowedGroupsModal.vue
new file mode 100644
index 00000000..669772e3
--- /dev/null
+++ b/frontend/src/components/admin/user/UserAllowedGroupsModal.vue
@@ -0,0 +1,59 @@
+<template>
+  <BaseDialog :show="show" :title="t('admin.users.setAllowedGroups')" width="normal" @close="$emit('close')">
+    <div v-if="user" class="space-y-4">
+      <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
+        <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100">
+          <span class="text-lg font-medium text-primary-700">{{ user.email.charAt(0).toUpperCase() }}</span>
+        </div>
+        <p class="font-medium text-gray-900 dark:text-white">{{ user.email }}</p>
+      </div>
+      <div v-if="loading" class="flex justify-center py-8"><svg class="h-8 w-8 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></div>
+      <div v-else>
+        <p class="mb-3 text-sm text-gray-600">{{ t('admin.users.allowedGroupsHint') }}</p>
+        <div class="max-h-64 space-y-2 overflow-y-auto">
+          <label v-for="group in groups" :key="group.id" class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 hover:bg-gray-50" :class="{'border-primary-300 bg-primary-50': selectedIds.includes(group.id)}">
+            <input type="checkbox" :value="group.id" v-model="selectedIds" class="h-4 w-4 rounded border-gray-300 text-primary-600" />
+            <div class="flex-1"><p class="font-medium text-gray-900">{{ group.name }}</p><p v-if="group.description" class="truncate text-sm text-gray-500">{{ group.description }}</p></div>
+            <div class="flex items-center gap-2"><span class="badge badge-gray text-xs">{{ group.platform }}</span><span v-if="group.is_exclusive" class="badge badge-purple text-xs">{{ t('admin.groups.exclusive') }}</span></div>
+          </label>
+        </div>
+        <div class="mt-4 border-t border-gray-200 pt-4">
+          <label class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 hover:bg-gray-50" :class="{'border-green-300 bg-green-50': selectedIds.length === 0}">
+            <input type="radio" :checked="selectedIds.length === 0" @change="selectedIds = []" class="h-4 w-4 border-gray-300 text-green-600" />
+            <div class="flex-1"><p class="font-medium text-gray-900">{{ t('admin.users.allowAllGroups') }}</p><p class="text-sm text-gray-500">{{ t('admin.users.allowAllGroupsHint') }}</p></div>
+          </label>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-3">
+        <button @click="$emit('close')" class="btn btn-secondary">{{ t('common.cancel') }}</button>
+        <button @click="handleSave" :disabled="submitting" class="btn btn-primary">{{ submitting ? t('common.saving') : t('common.save') }}</button>
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { adminAPI } from '@/api/admin'
+import type { User, Group } from '@/types'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+
+const props = defineProps<{ show: boolean, user: User | null }>()
+const emit = defineEmits(['close', 'success']); const { t } = useI18n(); const appStore = useAppStore()
+
+const groups = ref<Group[]>([]); const selectedIds = ref<number[]>([]); const loading = ref(false); const submitting = ref(false)
+
+watch(() => props.show, (v) => { if(v && props.user) { selectedIds.value = props.user.allowed_groups || []; load() } })
+const load = async () => { loading.value = true; try { const res = await adminAPI.groups.list(1, 1000); groups.value = res.items.filter(g => g.subscription_type === 'standard' && g.status === 'active') } catch {} finally { loading.value = false } }
+const handleSave = async () => {
+  if (!props.user) return; submitting.value = true
+  try {
+    await adminAPI.users.update(props.user.id, { allowed_groups: selectedIds.value.length > 0 ? selectedIds.value : null })
+    appStore.showSuccess(t('admin.users.allowedGroupsUpdated')); emit('success'); emit('close')
+  } catch {} finally { submitting.value = false }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/user/UserApiKeysModal.vue b/frontend/src/components/admin/user/UserApiKeysModal.vue
new file mode 100644
index 00000000..27c006bc
--- /dev/null
+++ b/frontend/src/components/admin/user/UserApiKeysModal.vue
@@ -0,0 +1,47 @@
+<template>
+  <BaseDialog :show="show" :title="t('admin.users.userApiKeys')" width="wide" @close="$emit('close')">
+    <div v-if="user" class="space-y-4">
+      <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
+        <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
+          <span class="text-lg font-medium text-primary-700 dark:text-primary-300">{{ user.email.charAt(0).toUpperCase() }}</span>
+        </div>
+        <div><p class="font-medium text-gray-900 dark:text-white">{{ user.email }}</p><p class="text-sm text-gray-500 dark:text-dark-400">{{ user.username }}</p></div>
+      </div>
+      <div v-if="loading" class="flex justify-center py-8"><svg class="h-8 w-8 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></div>
+      <div v-else-if="apiKeys.length === 0" class="py-8 text-center"><p class="text-sm text-gray-500">{{ t('admin.users.noApiKeys') }}</p></div>
+      <div v-else class="max-h-96 space-y-3 overflow-y-auto">
+        <div v-for="key in apiKeys" :key="key.id" class="rounded-xl border border-gray-200 bg-white p-4 dark:border-dark-600 dark:bg-dark-800">
+          <div class="flex items-start justify-between">
+            <div class="min-w-0 flex-1">
+              <div class="mb-1 flex items-center gap-2"><span class="font-medium text-gray-900 dark:text-white">{{ key.name }}</span><span :class="['badge text-xs', key.status === 'active' ? 'badge-success' : 'badge-danger']">{{ key.status }}</span></div>
+              <p class="truncate font-mono text-sm text-gray-500">{{ key.key.substring(0, 20) }}...{{ key.key.substring(key.key.length - 8) }}</p>
+            </div>
+          </div>
+          <div class="mt-3 flex flex-wrap gap-4 text-xs text-gray-500">
+            <div class="flex items-center gap-1"><span>{{ t('admin.users.group') }}: {{ key.group?.name || t('admin.users.none') }}</span></div>
+            <div class="flex items-center gap-1"><span>{{ t('admin.users.columns.created') }}: {{ formatDateTime(key.created_at) }}</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { adminAPI } from '@/api/admin'
+import { formatDateTime } from '@/utils/format'
+import type { User, ApiKey } from '@/types'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+
+const props = defineProps<{ show: boolean, user: User | null }>()
+defineEmits(['close']); const { t } = useI18n()
+const apiKeys = ref<ApiKey[]>([]); const loading = ref(false)
+
+watch(() => props.show, (v) => { if (v && props.user) load() })
+const load = async () => {
+  if (!props.user) return; loading.value = true
+  try { const res = await adminAPI.users.getUserApiKeys(props.user.id); apiKeys.value = res.items || [] } catch {} finally { loading.value = false }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/user/UserBalanceModal.vue b/frontend/src/components/admin/user/UserBalanceModal.vue
new file mode 100644
index 00000000..19e9ccab
--- /dev/null
+++ b/frontend/src/components/admin/user/UserBalanceModal.vue
@@ -0,0 +1,46 @@
+<template>
+  <BaseDialog :show="show" :title="operation === 'add' ? t('admin.users.deposit') : t('admin.users.withdraw')" width="narrow" @close="$emit('close')">
+    <form v-if="user" id="balance-form" @submit.prevent="handleBalanceSubmit" class="space-y-5">
+      <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
+        <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100"><span class="text-lg font-medium text-primary-700">{{ user.email.charAt(0).toUpperCase() }}</span></div>
+        <div class="flex-1"><p class="font-medium text-gray-900">{{ user.email }}</p><p class="text-sm text-gray-500">{{ t('admin.users.currentBalance') }}: ${{ user.balance.toFixed(2) }}</p></div>
+      </div>
+      <div>
+        <label class="input-label">{{ operation === 'add' ? t('admin.users.depositAmount') : t('admin.users.withdrawAmount') }}</label>
+        <div class="relative"><div class="absolute left-3 top-1/2 -translate-y-1/2 font-medium text-gray-500">$</div><input v-model.number="form.amount" type="number" step="0.01" min="0.01" required class="input pl-8" /></div>
+      </div>
+      <div><label class="input-label">{{ t('admin.users.notes') }}</label><textarea v-model="form.notes" rows="3" class="input"></textarea></div>
+      <div v-if="form.amount > 0" class="rounded-xl border border-blue-200 bg-blue-50 p-4"><div class="flex items-center justify-between text-sm"><span>{{ t('admin.users.newBalance') }}:</span><span class="font-bold">${{ calculateNewBalance().toFixed(2) }}</span></div></div>
+    </form>
+    <template #footer>
+      <div class="flex justify-end gap-3">
+        <button @click="$emit('close')" class="btn btn-secondary">{{ t('common.cancel') }}</button>
+        <button type="submit" form="balance-form" :disabled="submitting || !form.amount" class="btn" :class="operation === 'add' ? 'bg-emerald-600 text-white' : 'btn-danger'">{{ submitting ? t('common.saving') : t('common.confirm') }}</button>
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { adminAPI } from '@/api/admin'
+import type { User } from '@/types'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+
+const props = defineProps<{ show: boolean, user: User | null, operation: 'add' | 'subtract' }>()
+const emit = defineEmits(['close', 'success']); const { t } = useI18n(); const appStore = useAppStore()
+
+const submitting = ref(false); const form = reactive({ amount: 0, notes: '' })
+watch(() => props.show, (v) => { if(v) { form.amount = 0; form.notes = '' } })
+
+const calculateNewBalance = () => (props.user ? (props.operation === 'add' ? props.user.balance + form.amount : props.user.balance - form.amount) : 0)
+const handleBalanceSubmit = async () => {
+  if (!props.user) return; submitting.value = true
+  try {
+    await adminAPI.users.updateBalance(props.user.id, form.amount, props.operation, form.notes)
+    appStore.showSuccess(t('common.success')); emit('success'); emit('close')
+  } catch {} finally { submitting.value = false }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/user/UserCreateModal.vue b/frontend/src/components/admin/user/UserCreateModal.vue
new file mode 100644
index 00000000..56c21eec
--- /dev/null
+++ b/frontend/src/components/admin/user/UserCreateModal.vue
@@ -0,0 +1,118 @@
+<template>
+  <BaseDialog
+    :show="show"
+    :title="t('admin.users.createUser')"
+    width="normal"
+    @close="$emit('close')"
+  >
+    <form id="create-user-form" @submit.prevent="handleCreateUser" class="space-y-5">
+      <div>
+        <label class="input-label">{{ t('admin.users.email') }}</label>
+        <input
+          v-model="form.email"
+          type="email"
+          required
+          class="input"
+          :placeholder="t('admin.users.enterEmail')"
+        />
+      </div>
+      <div>
+        <label class="input-label">{{ t('admin.users.password') }}</label>
+        <div class="flex gap-2">
+          <div class="relative flex-1">
+            <input
+              v-model="form.password"
+              type="text"
+              required
+              class="input pr-10"
+              :placeholder="t('admin.users.enterPassword')"
+            />
+            <button
+              v-if="form.password"
+              type="button"
+              @click="copyPassword"
+              class="absolute right-2 top-1/2 -translate-y-1/2 rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700"
+              :class="passwordCopied ? 'text-green-500' : 'text-gray-400'"
+            >
+              <svg v-if="passwordCopied" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              <svg v-else class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+              </svg>
+            </button>
+          </div>
+          <button type="button" @click="generateRandomPassword" class="btn btn-secondary px-3">
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div>
+        <label class="input-label">{{ t('admin.users.username') }}</label>
+        <input v-model="form.username" type="text" class="input" :placeholder="t('admin.users.enterUsername')" />
+      </div>
+      <div>
+        <label class="input-label">{{ t('admin.users.notes') }}</label>
+        <textarea v-model="form.notes" rows="3" class="input" :placeholder="t('admin.users.enterNotes')"></textarea>
+      </div>
+      <div class="grid grid-cols-2 gap-4">
+        <div>
+          <label class="input-label">{{ t('admin.users.columns.balance') }}</label>
+          <input v-model.number="form.balance" type="number" step="any" class="input" />
+        </div>
+        <div>
+          <label class="input-label">{{ t('admin.users.columns.concurrency') }}</label>
+          <input v-model.number="form.concurrency" type="number" class="input" />
+        </div>
+      </div>
+    </form>
+    <template #footer>
+      <div class="flex justify-end gap-3">
+        <button @click="$emit('close')" type="button" class="btn btn-secondary">{{ t('common.cancel') }}</button>
+        <button type="submit" form="create-user-form" :disabled="submitting" class="btn btn-primary">
+          {{ submitting ? t('admin.users.creating') : t('common.create') }}
+        </button>
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { useClipboard } from '@/composables/useClipboard'
+import { adminAPI } from '@/api/admin'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+
+const props = defineProps<{ show: boolean }>()
+const emit = defineEmits(['close', 'success'])
+const { t } = useI18n(); const appStore = useAppStore(); const { copyToClipboard } = useClipboard()
+
+const submitting = ref(false); const passwordCopied = ref(false)
+const form = reactive({ email: '', password: '', username: '', notes: '', balance: 0, concurrency: 1 })
+
+watch(() => props.show, (v) => { if(v) { Object.assign(form, { email: '', password: '', username: '', notes: '', balance: 0, concurrency: 1 }); passwordCopied.value = false } })
+
+const generateRandomPassword = () => {
+  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%^&*'
+  let p = ''; for (let i = 0; i < 16; i++) p += chars.charAt(Math.floor(Math.random() * chars.length))
+  form.password = p
+}
+const copyPassword = async () => {
+  if (form.password && await copyToClipboard(form.password, t('admin.users.passwordCopied'))) {
+    passwordCopied.value = true; setTimeout(() => passwordCopied.value = false, 2000)
+  }
+}
+const handleCreateUser = async () => {
+  submitting.value = true
+  try {
+    await adminAPI.users.create(form); appStore.showSuccess(t('admin.users.userCreated'))
+    emit('success'); emit('close')
+  } catch (e: any) {
+    appStore.showError(e.response?.data?.message || e.response?.data?.detail || t('admin.users.failedToCreate'))
+  } finally { submitting.value = false }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/admin/user/UserEditModal.vue b/frontend/src/components/admin/user/UserEditModal.vue
new file mode 100644
index 00000000..3f6fd206
--- /dev/null
+++ b/frontend/src/components/admin/user/UserEditModal.vue
@@ -0,0 +1,101 @@
+<template>
+  <BaseDialog
+    :show="show"
+    :title="t('admin.users.editUser')"
+    width="normal"
+    @close="$emit('close')"
+  >
+    <form v-if="user" id="edit-user-form" @submit.prevent="handleUpdateUser" class="space-y-5">
+      <div>
+        <label class="input-label">{{ t('admin.users.email') }}</label>
+        <input v-model="form.email" type="email" class="input" />
+      </div>
+      <div>
+        <label class="input-label">{{ t('admin.users.password') }}</label>
+        <div class="flex gap-2">
+          <div class="relative flex-1">
+            <input v-model="form.password" type="text" class="input pr-10" :placeholder="t('admin.users.enterNewPassword')" />
+            <button v-if="form.password" type="button" @click="copyPassword" class="absolute right-2 top-1/2 -translate-y-1/2 rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700" :class="passwordCopied ? 'text-green-500' : 'text-gray-400'">
+              <svg v-if="passwordCopied" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+              <svg v-else class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" /></svg>
+            </button>
+          </div>
+          <button type="button" @click="generatePassword" class="btn btn-secondary px-3">
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>
+          </button>
+        </div>
+      </div>
+      <div>
+        <label class="input-label">{{ t('admin.users.username') }}</label>
+        <input v-model="form.username" type="text" class="input" />
+      </div>
+      <div>
+        <label class="input-label">{{ t('admin.users.notes') }}</label>
+        <textarea v-model="form.notes" rows="3" class="input"></textarea>
+      </div>
+      <div>
+        <label class="input-label">{{ t('admin.users.columns.concurrency') }}</label>
+        <input v-model.number="form.concurrency" type="number" class="input" />
+      </div>
+      <UserAttributeForm v-model="form.customAttributes" :user-id="user?.id" />
+    </form>
+    <template #footer>
+      <div class="flex justify-end gap-3">
+        <button @click="$emit('close')" type="button" class="btn btn-secondary">{{ t('common.cancel') }}</button>
+        <button type="submit" form="edit-user-form" :disabled="submitting" class="btn btn-primary">
+          {{ submitting ? t('admin.users.updating') : t('common.update') }}
+        </button>
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { useClipboard } from '@/composables/useClipboard'
+import { adminAPI } from '@/api/admin'
+import type { User, UserAttributeValuesMap } from '@/types'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+import UserAttributeForm from '@/components/user/UserAttributeForm.vue'
+
+const props = defineProps<{ show: boolean, user: User | null }>()
+const emit = defineEmits(['close', 'success'])
+const { t } = useI18n(); const appStore = useAppStore(); const { copyToClipboard } = useClipboard()
+
+const submitting = ref(false); const passwordCopied = ref(false)
+const form = reactive({ email: '', password: '', username: '', notes: '', concurrency: 1, customAttributes: {} as UserAttributeValuesMap })
+
+watch(() => props.user, (u) => {
+  if (u) {
+    Object.assign(form, { email: u.email, password: '', username: u.username || '', notes: u.notes || '', concurrency: u.concurrency, customAttributes: {} })
+    passwordCopied.value = false
+  }
+}, { immediate: true })
+
+const generatePassword = () => {
+  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%^&*'
+  let p = ''; for (let i = 0; i < 16; i++) p += chars.charAt(Math.floor(Math.random() * chars.length))
+  form.password = p
+}
+const copyPassword = async () => {
+  if (form.password && await copyToClipboard(form.password, t('admin.users.passwordCopied'))) {
+    passwordCopied.value = true; setTimeout(() => passwordCopied.value = false, 2000)
+  }
+}
+const handleUpdateUser = async () => {
+  if (!props.user) return
+  submitting.value = true
+  try {
+    const data: any = { email: form.email, username: form.username, notes: form.notes, concurrency: form.concurrency }
+    if (form.password.trim()) data.password = form.password.trim()
+    await adminAPI.users.update(props.user.id, data)
+    if (Object.keys(form.customAttributes).length > 0) await adminAPI.userAttributes.updateUserAttributeValues(props.user.id, form.customAttributes)
+    appStore.showSuccess(t('admin.users.userUpdated'))
+    emit('success'); emit('close')
+  } catch (e: any) {
+    appStore.showError(e.response?.data?.detail || t('admin.users.failedToUpdate'))
+  } finally { submitting.value = false }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/common/Input.vue b/frontend/src/components/common/Input.vue
new file mode 100644
index 00000000..a6c531cf
--- /dev/null
+++ b/frontend/src/components/common/Input.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="w-full">
+    <label v-if="label" :for="id" class="input-label mb-1.5 block">
+      {{ label }}
+      <span v-if="required" class="text-red-500">*</span>
+    </label>
+    <div class="relative">
+      <!-- Prefix Icon Slot -->
+      <div
+        v-if="$slots.prefix"
+        class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-gray-400 dark:text-dark-400"
+      >
+        <slot name="prefix"></slot>
+      </div>
+
+      <input
+        :id="id"
+        ref="inputRef"
+        :type="type"
+        :value="modelValue"
+        :disabled="disabled"
+        :required="required"
+        :placeholder="placeholderText"
+        :autocomplete="autocomplete"
+        :readonly="readonly"
+        :class="[
+          'input w-full transition-all duration-200',
+          $slots.prefix ? 'pl-11' : '',
+          $slots.suffix ? 'pr-11' : '',
+          error ? 'input-error ring-2 ring-red-500/20' : '',
+          disabled ? 'cursor-not-allowed bg-gray-100 opacity-60 dark:bg-dark-900' : ''
+        ]"
+        @input="onInput"
+        @change="$emit('change', ($event.target as HTMLInputElement).value)"
+        @blur="$emit('blur', $event)"
+        @focus="$emit('focus', $event)"
+        @keyup.enter="$emit('enter', $event)"
+      />
+
+      <!-- Suffix Slot (e.g. Password Toggle or Clear Button) -->
+      <div
+        v-if="$slots.suffix"
+        class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 dark:text-dark-400"
+      >
+        <slot name="suffix"></slot>
+      </div>
+    </div>
+    <!-- Hint / Error Text -->
+    <p v-if="error" class="input-error-text mt-1.5">
+      {{ error }}
+    </p>
+    <p v-else-if="hint" class="input-hint mt-1.5">
+      {{ hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  modelValue: string | number | null | undefined
+  type?: string
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  readonly?: boolean
+  error?: string
+  hint?: string
+  id?: string
+  autocomplete?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  disabled: false,
+  required: false,
+  readonly: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'change', value: string): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'focus', event: FocusEvent): void
+  (e: 'enter', event: KeyboardEvent): void
+}>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const placeholderText = computed(() => props.placeholder || '')
+
+const onInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value
+  emit('update:modelValue', value)
+}
+
+// Expose focus method
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+  select: () => inputRef.value?.select()
+})
+</script>
diff --git a/frontend/src/components/common/Skeleton.vue b/frontend/src/components/common/Skeleton.vue
new file mode 100644
index 00000000..aa90a619
--- /dev/null
+++ b/frontend/src/components/common/Skeleton.vue
@@ -0,0 +1,46 @@
+<template>
+  <div
+    :class="[
+      'animate-pulse bg-gray-200 dark:bg-dark-700',
+      variant === 'circle' ? 'rounded-full' : 'rounded-lg',
+      customClass
+    ]"
+    :style="style"
+  ></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'rect' | 'circle' | 'text'
+  width?: string | number
+  height?: string | number
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'rect',
+  width: '100%'
+})
+
+const customClass = computed(() => props.class || '')
+
+const style = computed(() => {
+  const s: Record<string, string> = {}
+  
+  if (props.width) {
+    s.width = typeof props.width === 'number' ? `${props.width}px` : props.width
+  }
+  
+  if (props.height) {
+    s.height = typeof props.height === 'number' ? `${props.height}px` : props.height
+  } else if (props.variant === 'text') {
+    s.height = '1em'
+    s.marginTop = '0.25em'
+    s.marginBottom = '0.25em'
+  }
+  
+  return s
+})
+</script>
diff --git a/frontend/src/components/common/TextArea.vue b/frontend/src/components/common/TextArea.vue
new file mode 100644
index 00000000..d392fbfd
--- /dev/null
+++ b/frontend/src/components/common/TextArea.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="w-full">
+    <label v-if="label" :for="id" class="input-label mb-1.5 block">
+      {{ label }}
+      <span v-if="required" class="text-red-500">*</span>
+    </label>
+    <div class="relative">
+      <textarea
+        :id="id"
+        ref="textAreaRef"
+        :value="modelValue"
+        :disabled="disabled"
+        :required="required"
+        :placeholder="placeholderText"
+        :readonly="readonly"
+        :rows="rows"
+        :class="[
+          'input w-full min-h-[80px] transition-all duration-200 resize-y',
+          error ? 'input-error ring-2 ring-red-500/20' : '',
+          disabled ? 'cursor-not-allowed bg-gray-100 opacity-60 dark:bg-dark-900' : ''
+        ]"
+        @input="onInput"
+        @change="$emit('change', ($event.target as HTMLTextAreaElement).value)"
+        @blur="$emit('blur', $event)"
+        @focus="$emit('focus', $event)"
+      ></textarea>
+    </div>
+    <!-- Hint / Error Text -->
+    <p v-if="error" class="input-error-text mt-1.5">
+      {{ error }}
+    </p>
+    <p v-else-if="hint" class="input-hint mt-1.5">
+      {{ hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  modelValue: string | null | undefined
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  readonly?: boolean
+  error?: string
+  hint?: string
+  id?: string
+  rows?: number | string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  required: false,
+  readonly: false,
+  rows: 3
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'change', value: string): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'focus', event: FocusEvent): void
+}>()
+
+const textAreaRef = ref<HTMLTextAreaElement | null>(null)
+const placeholderText = computed(() => props.placeholder || '')
+
+const onInput = (event: Event) => {
+  const value = (event.target as HTMLTextAreaElement).value
+  emit('update:modelValue', value)
+}
+
+// Expose focus method
+defineExpose({
+  focus: () => textAreaRef.value?.focus(),
+  select: () => textAreaRef.value?.select()
+})
+</script>
diff --git a/frontend/src/components/user/dashboard/UserDashboardCharts.vue b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
new file mode 100644
index 00000000..a50b738a
--- /dev/null
+++ b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="space-y-6">
+    <div class="card p-4 flex flex-wrap items-center gap-4">
+      <DateRangePicker :start-date="startDate" :end-date="endDate" @update:startDate="$emit('update:startDate', $event)" @update:endDate="$emit('update:endDate', $event)" @change="$emit('dateRangeChange', $event)" />
+      <div class="ml-auto w-28"><Select :model-value="granularity" :options="[{value:'day', label:t('dashboard.day')}, {value:'hour', label:t('dashboard.hour')}]" @update:model-value="$emit('update:granularity', $event)" @change="$emit('granularityChange')" /></div>
+    </div>
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      <div class="card p-4 min-h-[300px] relative"><div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-white/50"><LoadingSpinner /></div>
+        <h3 class="mb-4 font-semibold">{{ t('dashboard.modelDistribution') }}</h3>
+        <div class="h-48"><Doughnut v-if="modelData" :data="modelData" :options="{maintainAspectRatio:false}" /></div>
+      </div>
+      <div class="card p-4 min-h-[300px] relative"><div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-white/50"><LoadingSpinner /></div>
+        <h3 class="mb-4 font-semibold">{{ t('dashboard.tokenUsageTrend') }}</h3>
+        <div class="h-48"><Line v-if="trendData" :data="trendData" :options="{maintainAspectRatio:false}" /></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'; import { useI18n } from 'vue-i18n'; import LoadingSpinner from '@/components/common/LoadingSpinner.vue'; import DateRangePicker from '@/components/common/DateRangePicker.vue'; import Select from '@/components/common/Select.vue'; import { Line, Doughnut } from 'vue-chartjs'
+import type { TrendDataPoint, ModelStat } from '@/types'
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, ArcElement, Title, Tooltip, Legend, Filler } from 'chart.js'
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, ArcElement, Title, Tooltip, Legend, Filler)
+
+const props = defineProps<{ loading: boolean, startDate: string, endDate: string, granularity: string, trend: TrendDataPoint[], models: ModelStat[] }>()
+defineEmits(['update:startDate', 'update:endDate', 'update:granularity', 'dateRangeChange', 'granularityChange'])
+const { t } = useI18n()
+const modelData = computed(() => !props.models?.length ? null : { labels: props.models.map((m:ModelStat) => m.model), datasets: [{ data: props.models.map((m:ModelStat) => m.total_tokens), backgroundColor: ['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6'] }] })
+const trendData = computed(() => !props.trend?.length ? null : { labels: props.trend.map((d:TrendDataPoint) => d.date), datasets: [{ label: 'Input', data: props.trend.map((d:TrendDataPoint) => d.input_tokens), borderColor: '#3b82f6', tension: 0.3 }] })
+</script>
diff --git a/frontend/src/components/user/dashboard/UserDashboardQuickActions.vue b/frontend/src/components/user/dashboard/UserDashboardQuickActions.vue
new file mode 100644
index 00000000..4b4e9efa
--- /dev/null
+++ b/frontend/src/components/user/dashboard/UserDashboardQuickActions.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="card p-6">
+    <h2 class="font-semibold mb-4">{{ t('dashboard.quickActions') }}</h2>
+    <div class="space-y-2">
+      <button @click="router.push('/keys')" class="w-full text-left p-3 hover:bg-gray-100 rounded-lg flex items-center gap-3"><div class="p-2 bg-blue-100 rounded-lg text-blue-600">🔑</div><span>{{ t('dashboard.createApiKey') }}</span></button>
+      <button @click="router.push('/usage')" class="w-full text-left p-3 hover:bg-gray-100 rounded-lg flex items-center gap-3"><div class="p-2 bg-green-100 rounded-lg text-green-600">📊</div><span>{{ t('dashboard.viewUsage') }}</span></button>
+      <button @click="router.push('/redeem')" class="w-full text-left p-3 hover:bg-gray-100 rounded-lg flex items-center gap-3"><div class="p-2 bg-amber-100 rounded-lg text-amber-600">🎁</div><span>{{ t('dashboard.redeemCode') }}</span></button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'; import { useI18n } from 'vue-i18n'
+const router = useRouter(); const { t } = useI18n()
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/user/dashboard/UserDashboardRecentUsage.vue b/frontend/src/components/user/dashboard/UserDashboardRecentUsage.vue
new file mode 100644
index 00000000..9246fa15
--- /dev/null
+++ b/frontend/src/components/user/dashboard/UserDashboardRecentUsage.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="card p-6">
+    <div class="flex items-center justify-between mb-4"><h2 class="font-semibold">{{ t('dashboard.recentUsage') }}</h2></div>
+    <div v-if="loading" class="flex justify-center py-8"><LoadingSpinner /></div>
+    <div v-else-if="!data.length" class="text-center py-8 text-gray-500">{{ t('dashboard.noUsageRecords') }}</div>
+    <div v-else class="space-y-3">
+      <div v-for="l in data" :key="l.id" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+        <div><p class="text-sm font-medium">{{ l.model }}</p><p class="text-xs text-gray-400">{{ formatDateTime(l.created_at) }}</p></div>
+        <div class="text-right"><p class="text-sm font-bold text-green-600">${{ l.actual_cost.toFixed(4) }}</p></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'; import LoadingSpinner from '@/components/common/LoadingSpinner.vue'; import { formatDateTime } from '@/utils/format'
+defineProps(['data', 'loading']); const { t } = useI18n()
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/user/dashboard/UserDashboardStats.vue b/frontend/src/components/user/dashboard/UserDashboardStats.vue
new file mode 100644
index 00000000..7b30f728
--- /dev/null
+++ b/frontend/src/components/user/dashboard/UserDashboardStats.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+    <div v-if="!isSimple" class="card p-4 flex items-center gap-3">
+      <div class="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30 text-emerald-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75" /></svg></div>
+      <div><p class="text-xs text-gray-500">{{ t('dashboard.balance') }}</p><p class="text-xl font-bold text-emerald-600">${{ balance.toFixed(2) }}</p></div>
+    </div>
+    <div class="card p-4 flex items-center gap-3">
+      <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30 text-blue-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M15.75 5.25a3 3 0 013 3" /></svg></div>
+      <div><p class="text-xs text-gray-500">{{ t('dashboard.apiKeys') }}</p><p class="text-xl font-bold">{{ stats?.total_api_keys || 0 }}</p></div>
+    </div>
+    <div class="card p-4 flex items-center gap-3">
+      <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30 text-green-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 13.125h2.25" /></svg></div>
+      <div><p class="text-xs text-gray-500">{{ t('dashboard.todayRequests') }}</p><p class="text-xl font-bold">{{ stats?.today_requests || 0 }}</p></div>
+    </div>
+    <div class="card p-4 flex items-center gap-3">
+      <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30 text-purple-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 6v12" /></svg></div>
+      <div><p class="text-xs text-gray-500">{{ t('dashboard.todayCost') }}</p><p class="text-xl font-bold text-purple-600">${{ (stats?.today_actual_cost || 0).toFixed(4) }}</p></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'; defineProps(['stats', 'balance', 'isSimple']); const { t } = useI18n()
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/user/profile/ProfileEditForm.vue b/frontend/src/components/user/profile/ProfileEditForm.vue
new file mode 100644
index 00000000..2750840a
--- /dev/null
+++ b/frontend/src/components/user/profile/ProfileEditForm.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="card">
+    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+        {{ t('profile.editProfile') }}
+      </h2>
+    </div>
+    <div class="px-6 py-6">
+      <form @submit.prevent="handleUpdateProfile" class="space-y-4">
+        <div>
+          <label for="username" class="input-label">
+            {{ t('profile.username') }}
+          </label>
+          <input
+            id="username"
+            v-model="username"
+            type="text"
+            class="input"
+            :placeholder="t('profile.enterUsername')"
+          />
+        </div>
+
+        <div class="flex justify-end pt-4">
+          <button type="submit" :disabled="loading" class="btn btn-primary">
+            {{ loading ? t('profile.updating') : t('profile.updateProfile') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/stores/auth'
+import { useAppStore } from '@/stores/app'
+import { userAPI } from '@/api'
+
+const props = defineProps<{
+  initialUsername: string
+}>()
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const appStore = useAppStore()
+
+const username = ref(props.initialUsername)
+const loading = ref(false)
+
+watch(() => props.initialUsername, (val) => {
+  username.value = val
+})
+
+const handleUpdateProfile = async () => {
+  if (!username.value.trim()) {
+    appStore.showError(t('profile.usernameRequired'))
+    return
+  }
+
+  loading.value = true
+  try {
+    const updatedUser = await userAPI.updateProfile({
+      username: username.value
+    })
+    authStore.user = updatedUser
+    appStore.showSuccess(t('profile.updateSuccess'))
+  } catch (error: any) {
+    appStore.showError(error.response?.data?.detail || t('profile.updateFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/frontend/src/components/user/profile/ProfileInfoCard.vue b/frontend/src/components/user/profile/ProfileInfoCard.vue
new file mode 100644
index 00000000..03187c4b
--- /dev/null
+++ b/frontend/src/components/user/profile/ProfileInfoCard.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="card overflow-hidden">
+    <div
+      class="border-b border-gray-100 bg-gradient-to-r from-primary-500/10 to-primary-600/5 px-6 py-5 dark:border-dark-700 dark:from-primary-500/20 dark:to-primary-600/10"
+    >
+      <div class="flex items-center gap-4">
+        <!-- Avatar -->
+        <div
+          class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-2xl font-bold text-white shadow-lg shadow-primary-500/20"
+        >
+          {{ user?.email?.charAt(0).toUpperCase() || 'U' }}
+        </div>
+        <div class="min-w-0 flex-1">
+          <h2 class="truncate text-lg font-semibold text-gray-900 dark:text-white">
+            {{ user?.email }}
+          </h2>
+          <div class="mt-1 flex items-center gap-2">
+            <span :class="['badge', user?.role === 'admin' ? 'badge-primary' : 'badge-gray']">
+              {{ user?.role === 'admin' ? t('profile.administrator') : t('profile.user') }}
+            </span>
+            <span
+              :class="['badge', user?.status === 'active' ? 'badge-success' : 'badge-danger']"
+            >
+              {{ user?.status }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="px-6 py-4">
+      <div class="space-y-3">
+        <div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
+          <svg
+            class="h-4 w-4 text-gray-400 dark:text-gray-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+            />
+          </svg>
+          <span class="truncate">{{ user?.email }}</span>
+        </div>
+        <div
+          v-if="user?.username"
+          class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400"
+        >
+          <svg
+            class="h-4 w-4 text-gray-400 dark:text-gray-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+            />
+          </svg>
+          <span class="truncate">{{ user.username }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { User } from '@/types'
+
+defineProps<{
+  user: User | null
+}>()
+
+const { t } = useI18n()
+</script>
diff --git a/frontend/src/components/user/profile/ProfilePasswordForm.vue b/frontend/src/components/user/profile/ProfilePasswordForm.vue
new file mode 100644
index 00000000..d44cac68
--- /dev/null
+++ b/frontend/src/components/user/profile/ProfilePasswordForm.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="card">
+    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
+        {{ t('profile.changePassword') }}
+      </h2>
+    </div>
+    <div class="px-6 py-6">
+      <form @submit.prevent="handleChangePassword" class="space-y-4">
+        <div>
+          <label for="old_password" class="input-label">
+            {{ t('profile.currentPassword') }}
+          </label>
+          <input
+            id="old_password"
+            v-model="form.old_password"
+            type="password"
+            required
+            autocomplete="current-password"
+            class="input"
+          />
+        </div>
+
+        <div>
+          <label for="new_password" class="input-label">
+            {{ t('profile.newPassword') }}
+          </label>
+          <input
+            id="new_password"
+            v-model="form.new_password"
+            type="password"
+            required
+            autocomplete="new-password"
+            class="input"
+          />
+          <p class="input-hint">
+            {{ t('profile.passwordHint') }}
+          </p>
+        </div>
+
+        <div>
+          <label for="confirm_password" class="input-label">
+            {{ t('profile.confirmNewPassword') }}
+          </label>
+          <input
+            id="confirm_password"
+            v-model="form.confirm_password"
+            type="password"
+            required
+            autocomplete="new-password"
+            class="input"
+          />
+          <p
+            v-if="form.new_password && form.confirm_password && form.new_password !== form.confirm_password"
+            class="input-error-text"
+          >
+            {{ t('profile.passwordsNotMatch') }}
+          </p>
+        </div>
+
+        <div class="flex justify-end pt-4">
+          <button type="submit" :disabled="loading" class="btn btn-primary">
+            {{ loading ? t('profile.changingPassword') : t('profile.changePasswordButton') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { userAPI } from '@/api'
+
+const { t } = useI18n()
+const appStore = useAppStore()
+
+const loading = ref(false)
+const form = ref({
+  old_password: '',
+  new_password: '',
+  confirm_password: ''
+})
+
+const handleChangePassword = async () => {
+  if (form.value.new_password !== form.value.confirm_password) {
+    appStore.showError(t('profile.passwordsNotMatch'))
+    return
+  }
+
+  if (form.value.new_password.length < 8) {
+    appStore.showError(t('profile.passwordTooShort'))
+    return
+  }
+
+  loading.value = true
+  try {
+    await userAPI.changePassword(form.value.old_password, form.value.new_password)
+    form.value = { old_password: '', new_password: '', confirm_password: '' }
+    appStore.showSuccess(t('profile.passwordChangeSuccess'))
+  } catch (error: any) {
+    appStore.showError(error.response?.data?.detail || t('profile.passwordChangeFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+</script>
diff --git a/frontend/src/composables/useTableLoader.ts b/frontend/src/composables/useTableLoader.ts
new file mode 100644
index 00000000..febf7c45
--- /dev/null
+++ b/frontend/src/composables/useTableLoader.ts
@@ -0,0 +1,102 @@
+import { ref, reactive, onUnmounted } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+
+interface PaginationState {
+  page: number
+  page_size: number
+  total: number
+  pages: number
+}
+
+interface TableLoaderOptions<T, P> {
+  fetchFn: (page: number, pageSize: number, params: P, options?: { signal: AbortSignal }) => Promise<{
+    items: T[]
+    total: number
+    pages: number
+  }>
+  initialParams?: P
+  pageSize?: number
+  debounceMs?: number
+}
+
+export function useTableLoader<T, P extends Record<string, any>>(options: TableLoaderOptions<T, P>) {
+  const { fetchFn, initialParams, pageSize = 20, debounceMs = 300 } = options
+
+  const items = ref<T[]>([])
+  const loading = ref(false)
+  const params = reactive<P>({ ...(initialParams || {}) } as P)
+  const pagination = reactive<PaginationState>({
+    page: 1,
+    page_size: pageSize,
+    total: 0,
+    pages: 0
+  })
+
+  let abortController: AbortController | null = null
+
+  const isAbortError = (error: any) => {
+    return error?.name === 'AbortError' || error?.code === 'ERR_CANCELED'
+  }
+
+  const load = async () => {
+    if (abortController) {
+      abortController.abort()
+    }
+    abortController = new AbortController()
+    loading.value = true
+
+    try {
+      const response = await fetchFn(
+        pagination.page,
+        pagination.page_size,
+        params,
+        { signal: abortController.signal }
+      )
+      
+      items.value = response.items
+      pagination.total = response.total
+      pagination.pages = response.pages
+    } catch (error) {
+      if (!isAbortError(error)) {
+        throw error
+      }
+    } finally {
+      if (abortController?.signal.aborted === false) {
+        loading.value = false
+      }
+    }
+  }
+
+  const reload = () => {
+    pagination.page = 1
+    return load()
+  }
+
+  const debouncedLoad = useDebounceFn(reload, debounceMs)
+
+  const handlePageChange = (page: number) => {
+    pagination.page = page
+    load()
+  }
+
+  const handlePageSizeChange = (size: number) => {
+    pagination.page_size = size
+    reload()
+  }
+
+  onUnmounted(() => {
+    abortController?.abort()
+  })
+
+  return {
+    items,
+    loading,
+    params,
+    pagination,
+    load,
+    reload,
+    debouncedLoad,
+    handlePageChange,
+    handlePageSizeChange
+  }
+}
diff --git a/frontend/src/views/admin/AccountsView.vue b/frontend/src/views/admin/AccountsView.vue
index d684e085..e1f66cb3 100644
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -1,974 +1,64 @@
 <template>
   <AppLayout>
     <TablePageLayout>
-      <template #actions>
-        <div class="flex justify-end gap-3">
-          <button
-          @click="loadAccounts"
-          :disabled="loading"
-          class="btn btn-secondary"
-          :title="t('common.refresh')"
-        >
-          <svg
-            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-            />
-          </svg>
-        </button>
-        <button @click="showCrsSyncModal = true" class="btn btn-secondary" :title="t('admin.accounts.syncFromCrs')">
-          <svg
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
-            />
-          </svg>
-        </button>
-        <button @click="showCreateModal = true" class="btn btn-primary" data-tour="accounts-create-btn">
-          <svg
-            class="mr-2 h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-          </svg>
-          {{ t('admin.accounts.createAccount') }}
-        </button>
-        </div>
-      </template>
-
-      <template #filters>
-        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-          <div class="relative max-w-md flex-1">
-          <svg
-            class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-            />
-          </svg>
-          <input
-            v-model="searchQuery"
-            type="text"
-            :placeholder="t('admin.accounts.searchAccounts')"
-            class="input pl-10"
-            @input="handleSearch"
-          />
-          </div>
-          <div class="flex flex-wrap gap-3">
-          <Select
-            v-model="filters.platform"
-            :options="platformOptions"
-            :placeholder="t('admin.accounts.allPlatforms')"
-            class="w-40"
-            @change="loadAccounts"
-          />
-          <Select
-            v-model="filters.type"
-            :options="typeOptions"
-            :placeholder="t('admin.accounts.allTypes')"
-            class="w-40"
-            @change="loadAccounts"
-          />
-          <Select
-            v-model="filters.status"
-            :options="statusOptions"
-            :placeholder="t('admin.accounts.allStatus')"
-            class="w-36"
-            @change="loadAccounts"
-          />
-          </div>
-        </div>
-      </template>
-
+      <template #actions><AccountTableActions :loading="loading" @refresh="load" @sync="showSync = true" @create="showCreate = true" /></template>
+      <template #filters><AccountTableFilters v-model:searchQuery="query" :filters="filters" @change="load" @update:searchQuery="handleSearch" /></template>
       <template #table>
-        <!-- Bulk Actions Bar -->
-        <div
-          v-if="selectedAccountIds.length > 0"
-          class="mb-[5px] mt-[10px] px-5 py-1"
-        >
-          <div class="flex flex-wrap items-center justify-between gap-3">
-            <div class="flex flex-wrap items-center gap-2">
-              <span class="text-sm font-medium text-primary-900 dark:text-primary-100">
-                {{ t('admin.accounts.bulkActions.selected', { count: selectedAccountIds.length }) }}
-              </span>
-              <button
-                @click="selectCurrentPageAccounts"
-                class="text-xs font-medium text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
-              >
-                {{ t('admin.accounts.bulkActions.selectCurrentPage') }}
-              </button>
-              <span class="text-gray-300 dark:text-primary-800">•</span>
-              <button
-                @click="selectedAccountIds = []"
-                class="text-xs font-medium text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
-              >
-                {{ t('admin.accounts.bulkActions.clear') }}
-              </button>
-            </div>
-            <div class="flex items-center gap-2">
-              <button @click="handleBulkDelete" class="btn btn-danger btn-sm">
-                <svg
-                  class="mr-1.5 h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-                  />
-                </svg>
-                {{ t('admin.accounts.bulkActions.delete') }}
-              </button>
-              <button @click="showBulkEditModal = true" class="btn btn-primary btn-sm">
-                <svg
-                  class="mr-1.5 h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-                  />
-                </svg>
-                {{ t('admin.accounts.bulkActions.edit') }}
-              </button>
-            </div>
-          </div>
-        </div>
-
-      <DataTable :columns="columns" :data="accounts" :loading="loading">
-          <template #cell-select="{ row }">
-            <input
-              type="checkbox"
-              :checked="selectedAccountIds.includes(row.id)"
-              @change="toggleAccountSelection(row.id)"
-              class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
-            />
-          </template>
-
-          <template #cell-name="{ value }">
-            <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
-          </template>
-
-          <template #cell-platform_type="{ row }">
-            <PlatformTypeBadge :platform="row.platform" :type="row.type" />
-          </template>
-
-          <template #cell-concurrency="{ row }">
-            <div class="flex items-center gap-1.5">
-              <span
-                :class="[
-                  'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium',
-                  (row.current_concurrency || 0) >= row.concurrency
-                    ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-                    : (row.current_concurrency || 0) > 0
-                      ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
-                      : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
-                ]"
-              >
-                <svg
-                  class="h-3 w-3"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  stroke-width="2"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"
-                  />
-                </svg>
-                <span class="font-mono">{{ row.current_concurrency || 0 }}</span>
-                <span class="text-gray-400 dark:text-gray-500">/</span>
-                <span class="font-mono">{{ row.concurrency }}</span>
-              </span>
-            </div>
-          </template>
-
-          <template #cell-status="{ row }">
-            <AccountStatusIndicator :account="row" @show-temp-unsched="handleShowTempUnsched" />
-          </template>
-
-          <template #cell-schedulable="{ row }">
-            <button
-              @click="handleToggleSchedulable(row)"
-              :disabled="togglingSchedulable === row.id"
-              class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-dark-800"
-              :class="[
-                row.schedulable
-                  ? 'bg-primary-500 hover:bg-primary-600'
-                  : 'bg-gray-200 hover:bg-gray-300 dark:bg-dark-600 dark:hover:bg-dark-500'
-              ]"
-              :title="
-                row.schedulable
-                  ? t('admin.accounts.schedulableEnabled')
-                  : t('admin.accounts.schedulableDisabled')
-              "
-            >
-              <span
-                class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                :class="[row.schedulable ? 'translate-x-4' : 'translate-x-0']"
-              />
-            </button>
-          </template>
-
-          <template #cell-today_stats="{ row }">
-            <AccountTodayStatsCell :account="row" />
-          </template>
-
-          <template #cell-groups="{ row }">
-            <div v-if="row.groups && row.groups.length > 0" class="flex flex-wrap gap-1.5">
-              <GroupBadge
-                v-for="group in row.groups"
-                :key="group.id"
-                :name="group.name"
-                :platform="group.platform"
-                :subscription-type="group.subscription_type"
-                :rate-multiplier="group.rate_multiplier"
-                :show-rate="false"
-              />
-            </div>
-            <span v-else class="text-sm text-gray-400 dark:text-dark-500">-</span>
-          </template>
-
-          <template #cell-usage="{ row }">
-            <AccountUsageCell :account="row" />
-          </template>
-
-          <template #cell-priority="{ value }">
-            <span class="text-sm text-gray-700 dark:text-gray-300">{{ value }}</span>
-          </template>
-
-          <template #cell-last_used_at="{ value }">
-            <span class="text-sm text-gray-500 dark:text-dark-400">
-              {{ formatRelativeTime(value) }}
-            </span>
-          </template>
-
-          <template #cell-actions="{ row }">
-            <div class="flex items-center gap-1">
-              <!-- Edit Button -->
-              <button
-                @click="handleEdit(row)"
-                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-                  />
-                </svg>
-                <span class="text-xs">{{ t('common.edit') }}</span>
-              </button>
-
-              <!-- Delete Button -->
-              <button
-                @click="handleDelete(row)"
-                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-                  />
-                </svg>
-                <span class="text-xs">{{ t('common.delete') }}</span>
-              </button>
-
-              <!-- More Actions Menu Trigger -->
-              <button
-                :ref="(el) => setActionButtonRef(row.id, el)"
-                @click="openActionMenu(row)"
-                class="action-menu-trigger flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-dark-700 dark:hover:text-white"
-                :class="{ 'bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-white': activeMenuId === row.id }"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
-                  />
-                </svg>
-                <span class="text-xs">{{ t('common.more') }}</span>
-              </button>
-            </div>
-          </template>
-
-          <template #empty>
-            <EmptyState
-              :title="t('admin.accounts.noAccountsYet')"
-              :description="t('admin.accounts.createFirstAccount')"
-              :action-text="t('admin.accounts.createAccount')"
-              @action="showCreateModal = true"
-            />
-          </template>
+        <AccountBulkActionsBar :selected-ids="selIds" @delete="handleBulkDelete" @edit="showBulkEdit = true" />
+        <DataTable :columns="cols" :data="accounts" :loading="loading">
+          <template #cell-select="{ row }"><input type="checkbox" :checked="selIds.includes(row.id)" @change="toggleSel(row.id)" /></template>
+          <template #cell-name="{ value }"><span class="font-medium text-gray-900 dark:text-white">{{ value }}</span></template>
+          <template #cell-status="{ row }"><AccountStatusIndicator :account="row" /></template>
+          <template #cell-actions="{ row }"><div class="flex gap-2"><button @click="handleEdit(row)" class="btn btn-sm btn-secondary">{{ t('common.edit') }}</button><button @click="openMenu(row, $event)" class="btn btn-sm btn-secondary">{{ t('common.more') }}</button></div></template>
         </DataTable>
       </template>
-
-      <template #pagination>
-        <Pagination
-          v-if="pagination.total > 0"
-          :page="pagination.page"
-          :total="pagination.total"
-          :page-size="pagination.page_size"
-          @update:page="handlePageChange"
-          @update:pageSize="handlePageSizeChange"
-        />
-      </template>
+      <template #pagination><Pagination v-if="page.total > 0" :page="page.page" :total="page.total" :page-size="page.size" @update:page="handlePage" /></template>
     </TablePageLayout>
-
-    <!-- Create Account Modal -->
-    <CreateAccountModal
-      :show="showCreateModal"
-      :proxies="proxies"
-      :groups="groups"
-      @close="showCreateModal = false"
-      @created="() => { loadAccounts(); if (onboardingStore.isCurrentStep(`[data-tour='account-form-submit']`)) onboardingStore.nextStep(500) }"
-    />
-
-    <!-- Edit Account Modal -->
-    <EditAccountModal
-      :show="showEditModal"
-      :account="editingAccount"
-      :proxies="proxies"
-      :groups="groups"
-      @close="closeEditModal"
-      @updated="loadAccounts"
-    />
-
-    <!-- Re-Auth Modal -->
-    <ReAuthAccountModal
-      :show="showReAuthModal"
-      :account="reAuthAccount"
-      @close="closeReAuthModal"
-      @reauthorized="loadAccounts"
-    />
-
-    <!-- Test Account Modal -->
-    <AccountTestModal :show="showTestModal" :account="testingAccount" @close="closeTestModal" />
-
-    <!-- Account Stats Modal -->
-    <AccountStatsModal :show="showStatsModal" :account="statsAccount" @close="closeStatsModal" />
-
-    <!-- Temp Unschedulable Status Modal -->
-    <TempUnschedStatusModal
-      :show="showTempUnschedModal"
-      :account="tempUnschedAccount"
-      @close="closeTempUnschedModal"
-      @reset="handleTempUnschedReset"
-    />
-
-    <!-- Delete Confirmation Dialog -->
-    <ConfirmDialog
-      :show="showDeleteDialog"
-      :title="t('admin.accounts.deleteAccount')"
-      :message="t('admin.accounts.deleteConfirm', { name: deletingAccount?.name })"
-      :confirm-text="t('common.delete')"
-      :cancel-text="t('common.cancel')"
-      :danger="true"
-      @confirm="confirmDelete"
-      @cancel="showDeleteDialog = false"
-    />
-    <ConfirmDialog
-      :show="showBulkDeleteDialog"
-      :title="t('admin.accounts.bulkDeleteTitle')"
-      :message="t('admin.accounts.bulkDeleteConfirm', { count: selectedAccountIds.length })"
-      :confirm-text="t('common.delete')"
-      :cancel-text="t('common.cancel')"
-      :danger="true"
-      @confirm="confirmBulkDelete"
-      @cancel="showBulkDeleteDialog = false"
-    />
-
-    <SyncFromCrsModal
-      :show="showCrsSyncModal"
-      @close="showCrsSyncModal = false"
-      @synced="handleCrsSynced"
-    />
-
-    <!-- Bulk Edit Account Modal -->
-    <BulkEditAccountModal
-      :show="showBulkEditModal"
-      :account-ids="selectedAccountIds"
-      :proxies="proxies"
-      :groups="groups"
-      @close="showBulkEditModal = false"
-      @updated="handleBulkUpdated"
-    />
-    <!-- Action Menu (Teleported) -->
-    <Teleport to="body">
-      <div
-        v-if="activeMenuId !== null && menuPosition"
-        class="action-menu-content fixed z-[9999] w-52 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
-        :style="{ top: menuPosition.top + 'px', left: menuPosition.left + 'px' }"
-      >
-        <div class="py-1">
-          <template v-for="account in accounts" :key="account.id">
-            <template v-if="account.id === activeMenuId">
-              <button
-                @click="handleTest(account); closeActionMenu()"
-                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-              >
-                <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                {{ t('admin.accounts.testConnection') }}
-              </button>
-              <button
-                @click="handleViewStats(account); closeActionMenu()"
-                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-              >
-                <svg class="h-4 w-4 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
-                {{ t('admin.accounts.viewStats') }}
-              </button>
-              <template v-if="account.type === 'oauth' || account.type === 'setup-token'">
-                <button @click="handleReAuth(account); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700">
-                  <svg class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
-                  {{ t('admin.accounts.reAuthorize') }}
-                </button>
-                <button @click="handleRefreshToken(account); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700">
-                  <svg class="h-4 w-4 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 4l16 16" /></svg>
-                  {{ t('admin.accounts.refreshToken') }}
-                </button>
-              </template>
-
-              <div v-if="account.status === 'error' || isRateLimited(account) || isOverloaded(account)" class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
-
-              <button v-if="account.status === 'error'" @click="handleResetStatus(account); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-yellow-600 hover:bg-gray-100 dark:text-yellow-400 dark:hover:bg-dark-700">
-                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                {{ t('admin.accounts.resetStatus') }}
-              </button>
-              <button v-if="isRateLimited(account) || isOverloaded(account)" @click="handleClearRateLimit(account); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-amber-600 hover:bg-gray-100 dark:text-amber-400 dark:hover:bg-dark-700">
-                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                {{ t('admin.accounts.clearRateLimit') }}
-              </button>
-            </template>
-          </template>
-        </div>
-      </div>
-    </Teleport>
+    <CreateAccountModal :show="showCreate" :proxies="proxies" :groups="groups" @close="showCreate = false" @created="load" />
+    <EditAccountModal :show="showEdit" :account="edAcc" :proxies="proxies" :groups="groups" @close="showEdit = false" @updated="load" />
+    <AccountActionMenu :show="menu.show" :account="menu.acc" :position="menu.pos" @close="menu.show = false" @test="handleTest" @stats="handleStats" @reauth="handleReauth" @refresh-token="handleRefresh" />
+    <SyncFromCrsModal :show="showSync" @close="showSync = false" @synced="load" />
+    <BulkEditAccountModal :show="showBulkEdit" :account-ids="selIds" :proxies="proxies" :groups="groups" @close="showBulkEdit = false" @updated="handleBulkUpdated" />
   </AppLayout>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, onUnmounted, type ComponentPublicInstance } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useAppStore } from '@/stores/app'
-import { useAuthStore } from '@/stores/auth'
-import { useOnboardingStore } from '@/stores/onboarding'
-import { adminAPI } from '@/api/admin'
-import type { Account, Proxy, Group } from '@/types'
-import type { Column } from '@/components/common/types'
-import AppLayout from '@/components/layout/AppLayout.vue'
-import TablePageLayout from '@/components/layout/TablePageLayout.vue'
-import DataTable from '@/components/common/DataTable.vue'
-import Pagination from '@/components/common/Pagination.vue'
-import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
-import EmptyState from '@/components/common/EmptyState.vue'
-import Select from '@/components/common/Select.vue'
-import {
-  CreateAccountModal,
-  EditAccountModal,
-  BulkEditAccountModal,
-  ReAuthAccountModal,
-  AccountStatsModal,
-  TempUnschedStatusModal,
-  SyncFromCrsModal
-} from '@/components/account'
+import { ref, reactive, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'; import { useAppStore } from '@/stores/app'; import { adminAPI } from '@/api/admin'
+import AppLayout from '@/components/layout/AppLayout.vue'; import TablePageLayout from '@/components/layout/TablePageLayout.vue'; import DataTable from '@/components/common/DataTable.vue'; import Pagination from '@/components/common/Pagination.vue'
+import { CreateAccountModal, EditAccountModal, BulkEditAccountModal, SyncFromCrsModal } from '@/components/account'
+import AccountTableActions from '@/components/admin/account/AccountTableActions.vue'; import AccountTableFilters from '@/components/admin/account/AccountTableFilters.vue'
+import AccountBulkActionsBar from '@/components/admin/account/AccountBulkActionsBar.vue'; import AccountActionMenu from '@/components/admin/account/AccountActionMenu.vue'
 import AccountStatusIndicator from '@/components/account/AccountStatusIndicator.vue'
-import AccountUsageCell from '@/components/account/AccountUsageCell.vue'
-import AccountTodayStatsCell from '@/components/account/AccountTodayStatsCell.vue'
-import AccountTestModal from '@/components/account/AccountTestModal.vue'
-import GroupBadge from '@/components/common/GroupBadge.vue'
-import PlatformTypeBadge from '@/components/common/PlatformTypeBadge.vue'
-import { formatRelativeTime } from '@/utils/format'
+import type { Account, Proxy, Group } from '@/types'
 
-const { t } = useI18n()
-const appStore = useAppStore()
-const authStore = useAuthStore()
-const onboardingStore = useOnboardingStore()
+const { t } = useI18n(); const appStore = useAppStore()
+const accounts = ref<Account[]>([]); const proxies = ref<Proxy[]>([]); const groups = ref<Group[]>([]); const loading = ref(false); const query = ref('')
+const filters = reactive({ platform: '', status: '' }); const page = reactive({ page: 1, size: 20, total: 0 })
+const selIds = ref<number[]>([]); const showCreate = ref(false); const showEdit = ref(false); const showSync = ref(false); const showBulkEdit = ref(false)
+const edAcc = ref<Account | null>(null); const menu = reactive<{show:boolean, acc:Account|null, pos:{top:number, left:number}|null}>({ show: false, acc: null, pos: null })
+let abort: any = null
 
-// Table columns
-const columns = computed<Column[]>(() => {
-  const cols: Column[] = [
-    { key: 'select', label: '', sortable: false },
-    { key: 'name', label: t('admin.accounts.columns.name'), sortable: true },
-    { key: 'platform_type', label: t('admin.accounts.columns.platformType'), sortable: false },
-    { key: 'concurrency', label: t('admin.accounts.columns.concurrencyStatus'), sortable: false },
-    { key: 'status', label: t('admin.accounts.columns.status'), sortable: true },
-    { key: 'schedulable', label: t('admin.accounts.columns.schedulable'), sortable: true },
-    { key: 'today_stats', label: t('admin.accounts.columns.todayStats'), sortable: false }
-  ]
+const cols = [{ key: 'select', label: '' }, { key: 'name', label: t('admin.accounts.columns.name'), sortable: true }, { key: 'status', label: t('admin.accounts.columns.status') }, { key: 'actions', label: t('admin.accounts.columns.actions') }]
 
-  // 简易模式下不显示分组列
-  if (!authStore.isSimpleMode) {
-    cols.push({ key: 'groups', label: t('admin.accounts.columns.groups'), sortable: false })
-  }
-
-  cols.push(
-    { key: 'usage', label: t('admin.accounts.columns.usageWindows'), sortable: false },
-    { key: 'priority', label: t('admin.accounts.columns.priority'), sortable: true },
-    { key: 'last_used_at', label: t('admin.accounts.columns.lastUsed'), sortable: true },
-    { key: 'actions', label: t('admin.accounts.columns.actions'), sortable: false }
-  )
-
-  return cols
-})
-
-// Filter options
-const platformOptions = computed(() => [
-  { value: '', label: t('admin.accounts.allPlatforms') },
-  { value: 'anthropic', label: t('admin.accounts.platforms.anthropic') },
-  { value: 'openai', label: t('admin.accounts.platforms.openai') },
-  { value: 'gemini', label: t('admin.accounts.platforms.gemini') },
-  { value: 'antigravity', label: t('admin.accounts.platforms.antigravity') }
-])
-
-const typeOptions = computed(() => [
-  { value: '', label: t('admin.accounts.allTypes') },
-  { value: 'oauth', label: t('admin.accounts.oauthType') },
-  { value: 'setup-token', label: t('admin.accounts.setupToken') },
-  { value: 'apikey', label: t('admin.accounts.apiKey') }
-])
-
-const statusOptions = computed(() => [
-  { value: '', label: t('admin.accounts.allStatus') },
-  { value: 'active', label: t('admin.accounts.status.active') },
-  { value: 'inactive', label: t('admin.accounts.status.inactive') },
-  { value: 'error', label: t('admin.accounts.status.error') }
-])
-
-// State
-const accounts = ref<Account[]>([])
-const proxies = ref<Proxy[]>([])
-const groups = ref<Group[]>([])
-const loading = ref(false)
-const searchQuery = ref('')
-const filters = reactive({
-  platform: '',
-  type: '',
-  status: ''
-})
-const pagination = reactive({
-  page: 1,
-  page_size: 20,
-  total: 0,
-  pages: 0
-})
-let abortController: AbortController | null = null
-
-// Modal states
-const showCreateModal = ref(false)
-const showEditModal = ref(false)
-const showReAuthModal = ref(false)
-const showDeleteDialog = ref(false)
-const showBulkDeleteDialog = ref(false)
-const showTestModal = ref(false)
-const showStatsModal = ref(false)
-const showTempUnschedModal = ref(false)
-const showCrsSyncModal = ref(false)
-const showBulkEditModal = ref(false)
-const editingAccount = ref<Account | null>(null)
-const reAuthAccount = ref<Account | null>(null)
-const deletingAccount = ref<Account | null>(null)
-const testingAccount = ref<Account | null>(null)
-const statsAccount = ref<Account | null>(null)
-const tempUnschedAccount = ref<Account | null>(null)
-const togglingSchedulable = ref<number | null>(null)
-const bulkDeleting = ref(false)
-
-// Action Menu State
-const activeMenuId = ref<number | null>(null)
-const menuPosition = ref<{ top: number; left: number } | null>(null)
-const actionButtonRefs = ref<Map<number, HTMLElement>>(new Map())
-
-const setActionButtonRef = (accountId: number, el: Element | ComponentPublicInstance | null) => {
-  if (el instanceof HTMLElement) {
-    actionButtonRefs.value.set(accountId, el)
-  } else {
-    actionButtonRefs.value.delete(accountId)
-  }
-}
-
-const openActionMenu = (account: Account) => {
-  if (activeMenuId.value === account.id) {
-    closeActionMenu()
-  } else {
-    const buttonEl = actionButtonRefs.value.get(account.id)
-    if (buttonEl) {
-      const rect = buttonEl.getBoundingClientRect()
-      // Position menu to the left of the button, slightly below
-      menuPosition.value = {
-        top: rect.bottom + 4,
-        left: rect.right - 208 // w-52 is 208px
-      }
-    }
-    activeMenuId.value = account.id
-  }
-}
-
-const closeActionMenu = () => {
-  activeMenuId.value = null
-  menuPosition.value = null
-}
-
-// Close menu when clicking outside
-const handleClickOutside = (event: MouseEvent) => {
-  const target = event.target as HTMLElement
-  if (!target.closest('.action-menu-trigger') && !target.closest('.action-menu-content')) {
-    closeActionMenu()
-  }
-}
-
-// Bulk selection
-const selectedAccountIds = ref<number[]>([])
-const selectCurrentPageAccounts = () => {
-  const pageIds = accounts.value.map((account) => account.id)
-  const merged = new Set([...selectedAccountIds.value, ...pageIds])
-  selectedAccountIds.value = Array.from(merged)
-}
-
-// Rate limit / Overload helpers
-const isRateLimited = (account: Account): boolean => {
-  if (!account.rate_limit_reset_at) return false
-  return new Date(account.rate_limit_reset_at) > new Date()
-}
-
-const isOverloaded = (account: Account): boolean => {
-  if (!account.overload_until) return false
-  return new Date(account.overload_until) > new Date()
-}
-
-// Data loading
-const loadAccounts = async () => {
-  abortController?.abort()
-  const currentAbortController = new AbortController()
-  abortController = currentAbortController
-  loading.value = true
+const load = async () => {
+  abort?.abort(); abort = new AbortController(); loading.value = true
   try {
-    const response = await adminAPI.accounts.list(pagination.page, pagination.page_size, {
-      platform: filters.platform || undefined,
-      type: filters.type || undefined,
-      status: filters.status || undefined,
-      search: searchQuery.value || undefined
-    }, {
-      signal: currentAbortController.signal
-    })
-    if (currentAbortController.signal.aborted) return
-    accounts.value = response.items
-    pagination.total = response.total
-    pagination.pages = response.pages
-  } catch (error) {
-    const errorInfo = error as { name?: string; code?: string }
-    if (errorInfo?.name === 'AbortError' || errorInfo?.name === 'CanceledError' || errorInfo?.code === 'ERR_CANCELED') {
-      return
-    }
-    appStore.showError(t('admin.accounts.failedToLoad'))
-    console.error('Error loading accounts:', error)
-  } finally {
-    if (abortController === currentAbortController) {
-      loading.value = false
-    }
-  }
+    const res = await adminAPI.accounts.list(page.page, page.size, { platform: filters.platform || undefined, status: filters.status || undefined, search: query.value || undefined }, { signal: abort.signal })
+    if(!abort.signal.aborted) { accounts.value = res.items; page.total = res.total }
+  } catch {} finally { loading.value = false }
 }
+const handleSearch = (v: string) => { query.value = v; page.page = 1; load() }
+const handlePage = (p: number) => { page.page = p; load() }
+const handleEdit = (a: Account) => { edAcc.value = a; showEdit.value = true }
+const openMenu = (a: Account, e: MouseEvent) => { menu.acc = a; menu.pos = { top: e.clientY, left: e.clientX - 200 }; menu.show = true }
+const toggleSel = (id: number) => { const i = selIds.value.indexOf(id); if(i === -1) selIds.value.push(id); else selIds.value.splice(i, 1) }
+const handleBulkDelete = async () => { if(!confirm(t('common.confirm'))) return; try { await Promise.all(selIds.value.map(id => adminAPI.accounts.delete(id))); selIds.value = []; load() } catch {} }
+const handleBulkUpdated = () => { showBulkEdit.value = false; selIds.value = []; load() }
+const handleTest = async (a: Account) => { try { await adminAPI.accounts.clearError(a.id); appStore.showSuccess(t('common.success')); load() } catch {} }
+const handleStats = (a: Account) => appStore.showInfo('Stats for ' + a.name)
+const handleReauth = (a: Account) => appStore.showInfo('Reauth for ' + a.name)
+const handleRefresh = async (a: Account) => { try { await adminAPI.accounts.refreshCredentials(a.id); load() } catch {} }
 
-const loadProxies = async () => {
-  try {
-    proxies.value = await adminAPI.proxies.getAllWithCount()
-  } catch (error) {
-    console.error('Error loading proxies:', error)
-  }
-}
-
-const loadGroups = async () => {
-  try {
-    // Load groups for all platforms to support both Anthropic and OpenAI accounts
-    groups.value = await adminAPI.groups.getAll()
-  } catch (error) {
-    console.error('Error loading groups:', error)
-  }
-}
-
-// Search handling
-let searchTimeout: ReturnType<typeof setTimeout>
-const handleSearch = () => {
-  clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => {
-    pagination.page = 1
-    loadAccounts()
-  }, 300)
-}
-
-// Pagination
-const handlePageChange = (page: number) => {
-  pagination.page = page
-  loadAccounts()
-}
-
-const handlePageSizeChange = (pageSize: number) => {
-  pagination.page_size = pageSize
-  pagination.page = 1
-  loadAccounts()
-}
-
-const handleCrsSynced = () => {
-  showCrsSyncModal.value = false
-  loadAccounts()
-}
-
-// Edit modal
-const handleEdit = (account: Account) => {
-  editingAccount.value = account
-  showEditModal.value = true
-}
-
-const closeEditModal = () => {
-  showEditModal.value = false
-  editingAccount.value = null
-}
-
-// Re-Auth modal
-const handleReAuth = (account: Account) => {
-  reAuthAccount.value = account
-  showReAuthModal.value = true
-}
-
-const closeReAuthModal = () => {
-  showReAuthModal.value = false
-  reAuthAccount.value = null
-}
-
-// Temp unschedulable modal
-const handleShowTempUnsched = (account: Account) => {
-  tempUnschedAccount.value = account
-  showTempUnschedModal.value = true
-}
-
-const closeTempUnschedModal = () => {
-  showTempUnschedModal.value = false
-  tempUnschedAccount.value = null
-}
-
-const handleTempUnschedReset = () => {
-  loadAccounts()
-}
-
-// Token refresh
-const handleRefreshToken = async (account: Account) => {
-  try {
-    await adminAPI.accounts.refreshCredentials(account.id)
-    appStore.showSuccess(t('admin.accounts.tokenRefreshed'))
-    loadAccounts()
-  } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.accounts.failedToRefresh'))
-    console.error('Error refreshing token:', error)
-  }
-}
-
-// Delete
-const handleDelete = (account: Account) => {
-  deletingAccount.value = account
-  showDeleteDialog.value = true
-}
-
-const confirmDelete = async () => {
-  if (!deletingAccount.value) return
-
-  try {
-    await adminAPI.accounts.delete(deletingAccount.value.id)
-    appStore.showSuccess(t('admin.accounts.accountDeleted'))
-    showDeleteDialog.value = false
-    deletingAccount.value = null
-    loadAccounts()
-  } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.accounts.failedToDelete'))
-    console.error('Error deleting account:', error)
-  }
-}
-
-const handleBulkDelete = () => {
-  if (selectedAccountIds.value.length === 0) return
-  showBulkDeleteDialog.value = true
-}
-
-const confirmBulkDelete = async () => {
-  if (bulkDeleting.value || selectedAccountIds.value.length === 0) return
-
-  bulkDeleting.value = true
-  const ids = [...selectedAccountIds.value]
-  try {
-    const results = await Promise.allSettled(ids.map((id) => adminAPI.accounts.delete(id)))
-    const success = results.filter((result) => result.status === 'fulfilled').length
-    const failed = results.length - success
-
-    if (failed === 0) {
-      appStore.showSuccess(t('admin.accounts.bulkDeleteSuccess', { count: success }))
-    } else {
-      appStore.showError(t('admin.accounts.bulkDeletePartial', { success, failed }))
-    }
-
-    showBulkDeleteDialog.value = false
-    selectedAccountIds.value = []
-    loadAccounts()
-  } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.accounts.bulkDeleteFailed'))
-    console.error('Error deleting accounts:', error)
-  } finally {
-    bulkDeleting.value = false
-  }
-}
-
-// Clear rate limit
-const handleClearRateLimit = async (account: Account) => {
-  try {
-    await adminAPI.accounts.clearRateLimit(account.id)
-    appStore.showSuccess(t('admin.accounts.rateLimitCleared'))
-    loadAccounts()
-  } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.accounts.failedToClearRateLimit'))
-    console.error('Error clearing rate limit:', error)
-  }
-}
-
-// Reset account status (clear error and rate limit)
-const handleResetStatus = async (account: Account) => {
-  try {
-    // Clear error status
-    await adminAPI.accounts.clearError(account.id)
-    // Also clear rate limit if exists
-    if (isRateLimited(account) || isOverloaded(account)) {
-      await adminAPI.accounts.clearRateLimit(account.id)
-    }
-    appStore.showSuccess(t('admin.accounts.statusReset'))
-    loadAccounts()
-  } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.accounts.failedToResetStatus'))
-    console.error('Error resetting account status:', error)
-  }
-}
-
-// Toggle schedulable
-const handleToggleSchedulable = async (account: Account) => {
-  togglingSchedulable.value = account.id
-  try {
-    const updatedAccount = await adminAPI.accounts.setSchedulable(account.id, !account.schedulable)
-    const index = accounts.value.findIndex((a) => a.id === account.id)
-    if (index !== -1) {
-      accounts.value[index] = updatedAccount
-    }
-    appStore.showSuccess(
-      updatedAccount.schedulable
-        ? t('admin.accounts.schedulableEnabled')
-        : t('admin.accounts.schedulableDisabled')
-    )
-  } catch (error: any) {
-    appStore.showError(
-      error.response?.data?.detail || t('admin.accounts.failedToToggleSchedulable')
-    )
-    console.error('Error toggling schedulable:', error)
-  } finally {
-    togglingSchedulable.value = null
-  }
-}
-
-// Test modal
-const handleTest = (account: Account) => {
-  testingAccount.value = account
-  showTestModal.value = true
-}
-
-const closeTestModal = () => {
-  showTestModal.value = false
-  testingAccount.value = null
-}
-
-// Stats modal
-const handleViewStats = (account: Account) => {
-  statsAccount.value = account
-  showStatsModal.value = true
-}
-
-const closeStatsModal = () => {
-  showStatsModal.value = false
-  statsAccount.value = null
-}
-
-// Bulk selection toggle
-const toggleAccountSelection = (accountId: number) => {
-  const index = selectedAccountIds.value.indexOf(accountId)
-  if (index === -1) {
-    selectedAccountIds.value.push(accountId)
-  } else {
-    selectedAccountIds.value.splice(index, 1)
-  }
-}
-
-// Bulk update handler
-const handleBulkUpdated = () => {
-  showBulkEditModal.value = false
-  selectedAccountIds.value = []
-  loadAccounts()
-}
-
-// Initialize
-onMounted(() => {
-  loadAccounts()
-  loadProxies()
-  loadGroups()
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  abortController?.abort()
-  abortController = null
-  document.removeEventListener('click', handleClickOutside)
-})
+onMounted(async () => { load(); try { const [p, g] = await Promise.all([adminAPI.proxies.getAll(), adminAPI.groups.getAll()]); proxies.value = p; groups.value = g } catch {} })
 </script>
diff --git a/frontend/src/views/admin/UsageView.vue b/frontend/src/views/admin/UsageView.vue
index ac5d1e05..8d3fe19f 100644
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -1,1436 +1,70 @@
 <template>
   <AppLayout>
     <div class="space-y-6">
-      <!-- Stats Cards -->
-      <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
-          <!-- Total Requests -->
-          <div class="card p-4">
-          <div class="flex items-center gap-3">
-            <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
-              <svg
-                class="h-5 w-5 text-blue-600 dark:text-blue-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                />
-              </svg>
-            </div>
-            <div>
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                {{ t('usage.totalRequests') }}
-              </p>
-              <p class="text-xl font-bold text-gray-900 dark:text-white">
-                {{ usageStats?.total_requests?.toLocaleString() || '0' }}
-              </p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">
-                {{ t('usage.inSelectedRange') }}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Total Tokens -->
-        <div class="card p-4">
-          <div class="flex items-center gap-3">
-            <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30">
-              <svg
-                class="h-5 w-5 text-amber-600 dark:text-amber-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
-                />
-              </svg>
-            </div>
-            <div>
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                {{ t('usage.totalTokens') }}
-              </p>
-              <p class="text-xl font-bold text-gray-900 dark:text-white">
-                {{ formatTokens(usageStats?.total_tokens || 0) }}
-              </p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">
-                {{ t('usage.in') }}: {{ formatTokens(usageStats?.total_input_tokens || 0) }} /
-                {{ t('usage.out') }}: {{ formatTokens(usageStats?.total_output_tokens || 0) }}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Total Cost -->
-        <div class="card p-4">
-          <div class="flex items-center gap-3">
-            <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
-              <svg
-                class="h-5 w-5 text-green-600 dark:text-green-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </div>
-            <div class="min-w-0 flex-1">
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                {{ t('usage.totalCost') }}
-              </p>
-              <p class="text-xl font-bold text-green-600 dark:text-green-400">
-                ${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}
-              </p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">
-                <span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span>
-                {{ t('usage.standardCost') }}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Average Duration -->
-        <div class="card p-4">
-          <div class="flex items-center gap-3">
-            <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30">
-              <svg
-                class="h-5 w-5 text-purple-600 dark:text-purple-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </div>
-            <div>
-              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                {{ t('usage.avgDuration') }}
-              </p>
-              <p class="text-xl font-bold text-gray-900 dark:text-white">
-                {{ formatDuration(usageStats?.average_duration_ms || 0) }}
-              </p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.perRequest') }}</p>
-            </div>
-          </div>
-        </div>
-        </div>
-
-        <!-- Charts Section -->
-        <div class="space-y-4">
-        <!-- Chart Controls -->
-        <div class="card p-4">
-          <div class="flex items-center gap-4">
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
-              >{{ t('admin.dashboard.granularity') }}:</span
-            >
-            <div class="w-28">
-              <Select
-                v-model="granularity"
-                :options="granularityOptions"
-                @change="onGranularityChange"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Charts Grid -->
-        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-          <ModelDistributionChart :model-stats="modelStats" :loading="chartsLoading" />
-          <TokenUsageTrend :trend-data="trendData" :loading="chartsLoading" />
-        </div>
-      </div>
-
-      <!-- Filters Section -->
-      <div class="card">
-          <div class="px-6 py-4">
-          <div class="flex flex-wrap items-end gap-4">
-            <!-- User Search -->
-            <div class="min-w-[200px]">
-              <label class="input-label">{{ t('admin.usage.userFilter') }}</label>
-              <div class="relative">
-                <input
-                  v-model="userSearchKeyword"
-                  type="text"
-                  class="input pr-8"
-                  :placeholder="t('admin.usage.searchUserPlaceholder')"
-                  @input="debounceSearchUsers"
-                  @focus="showUserDropdown = true"
-                />
-                <button
-                  v-if="selectedUser"
-                  @click="clearUserFilter"
-                  class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-                >
-                  <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
-                </button>
-                <!-- User Dropdown -->
-                <div
-                  v-if="showUserDropdown && (userSearchResults.length > 0 || userSearchKeyword)"
-                  class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
-                >
-                  <div
-                    v-if="userSearchLoading"
-                    class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
-                  >
-                    {{ t('common.loading') }}
-                  </div>
-                  <div
-                    v-else-if="userSearchResults.length === 0 && userSearchKeyword"
-                    class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
-                  >
-                    {{ t('common.noOptionsFound') }}
-                  </div>
-                  <button
-                    v-for="user in userSearchResults"
-                    :key="user.id"
-                    @click="selectUser(user)"
-                    class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
-                  >
-                    <span class="font-medium text-gray-900 dark:text-white">{{ user.email }}</span>
-                    <span class="ml-2 text-gray-500 dark:text-gray-400">#{{ user.id }}</span>
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            <!-- API Key Filter -->
-            <div class="min-w-[180px]">
-              <label class="input-label">{{ t('usage.apiKeyFilter') }}</label>
-              <Select
-                v-model="filters.api_key_id"
-                :options="apiKeyOptions"
-                :placeholder="t('usage.allApiKeys')"
-                searchable
-                @change="applyFilters"
-              />
-            </div>
-
-            <!-- Model Filter -->
-            <div class="min-w-[180px]">
-              <label class="input-label">{{ t('usage.model') }}</label>
-              <Select
-                v-model="filters.model"
-                :options="modelOptions"
-                :placeholder="t('admin.usage.allModels')"
-                searchable
-                @change="applyFilters"
-              />
-            </div>
-
-            <!-- Account Filter -->
-            <div class="min-w-[180px]">
-              <label class="input-label">{{ t('admin.usage.account') }}</label>
-              <Select
-                v-model="filters.account_id"
-                :options="accountOptions"
-                :placeholder="t('admin.usage.allAccounts')"
-                @change="applyFilters"
-              />
-            </div>
-
-            <!-- Stream Type Filter -->
-            <div class="min-w-[150px]">
-              <label class="input-label">{{ t('usage.type') }}</label>
-              <Select
-                v-model="filters.stream"
-                :options="streamOptions"
-                :placeholder="t('admin.usage.allTypes')"
-                @change="applyFilters"
-              />
-            </div>
-
-            <!-- Billing Type Filter -->
-            <div class="min-w-[150px]">
-              <label class="input-label">{{ t('usage.billingType') }}</label>
-              <Select
-                v-model="filters.billing_type"
-                :options="billingTypeOptions"
-                :placeholder="t('admin.usage.allBillingTypes')"
-                @change="applyFilters"
-              />
-            </div>
-
-            <!-- Group Filter -->
-            <div class="min-w-[150px]">
-              <label class="input-label">{{ t('admin.usage.group') }}</label>
-              <Select
-                v-model="filters.group_id"
-                :options="groupOptions"
-                :placeholder="t('admin.usage.allGroups')"
-                @change="applyFilters"
-              />
-            </div>
-
-            <!-- Date Range Filter -->
-            <div>
-              <label class="input-label">{{ t('usage.timeRange') }}</label>
-              <DateRangePicker
-                v-model:start-date="startDate"
-                v-model:end-date="endDate"
-                @change="onDateRangeChange"
-              />
-            </div>
-
-            <!-- Actions -->
-            <div class="ml-auto flex items-center gap-3">
-              <button @click="resetFilters" class="btn btn-secondary">
-                {{ t('common.reset') }}
-              </button>
-              <button @click="exportToExcel" :disabled="exporting" class="btn btn-primary">
-                {{ t('usage.exportExcel') }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Table Section -->
-      <div class="card overflow-hidden">
-        <div class="overflow-auto">
-          <DataTable :columns="columns" :data="usageLogs" :loading="loading">
-          <template #cell-user="{ row }">
-            <div class="text-sm">
-              <span class="font-medium text-gray-900 dark:text-white">{{
-                row.user?.email || '-'
-              }}</span>
-              <span class="ml-1 text-gray-500 dark:text-gray-400">#{{ row.user_id }}</span>
-            </div>
-          </template>
-
-          <template #cell-api_key="{ row }">
-            <span class="text-sm text-gray-900 dark:text-white">{{
-              row.api_key?.name || '-'
-            }}</span>
-          </template>
-
-          <template #cell-account="{ row }">
-            <span class="text-sm text-gray-900 dark:text-white">{{
-              row.account?.name || '-'
-            }}</span>
-          </template>
-
-          <template #cell-model="{ value }">
-            <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
-          </template>
-
-          <template #cell-group="{ row }">
-            <span
-              v-if="row.group"
-              class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200"
-            >
-              {{ row.group.name }}
-            </span>
-            <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
-          </template>
-
-          <template #cell-stream="{ row }">
-            <span
-              class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
-              :class="
-                row.stream
-                  ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
-                  : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
-              "
-            >
-              {{ row.stream ? t('usage.stream') : t('usage.sync') }}
-            </span>
-          </template>
-
-          <template #cell-tokens="{ row }">
-            <div class="flex items-center gap-1.5">
-              <div class="space-y-1.5 text-sm">
-                <!-- Input / Output Tokens -->
-                <div class="flex items-center gap-2">
-                  <!-- Input -->
-                  <div class="inline-flex items-center gap-1">
-                    <svg
-                      class="h-3.5 w-3.5 text-emerald-500"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M19 14l-7 7m0 0l-7-7m7 7V3"
-                      />
-                    </svg>
-                    <span class="font-medium text-gray-900 dark:text-white">{{
-                      row.input_tokens.toLocaleString()
-                    }}</span>
-                  </div>
-                  <!-- Output -->
-                  <div class="inline-flex items-center gap-1">
-                    <svg
-                      class="h-3.5 w-3.5 text-violet-500"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M5 10l7-7m0 0l7 7m-7-7v18"
-                      />
-                    </svg>
-                    <span class="font-medium text-gray-900 dark:text-white">{{
-                      row.output_tokens.toLocaleString()
-                    }}</span>
-                  </div>
-                </div>
-                <!-- Cache Tokens (Read + Write) -->
-                <div
-                  v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0"
-                  class="flex items-center gap-2"
-                >
-                  <!-- Cache Read -->
-                  <div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
-                    <svg
-                      class="h-3.5 w-3.5 text-sky-500"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
-                      />
-                    </svg>
-                    <span class="font-medium text-sky-600 dark:text-sky-400">{{
-                      formatCacheTokens(row.cache_read_tokens)
-                    }}</span>
-                  </div>
-                  <!-- Cache Write -->
-                  <div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
-                    <svg
-                      class="h-3.5 w-3.5 text-amber-500"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                      />
-                    </svg>
-                    <span class="font-medium text-amber-600 dark:text-amber-400">{{
-                      formatCacheTokens(row.cache_creation_tokens)
-                    }}</span>
-                  </div>
-                </div>
-              </div>
-              <!-- Token Detail Tooltip -->
-              <div
-                class="group relative"
-                @mouseenter="showTokenTooltip($event, row)"
-                @mouseleave="hideTokenTooltip"
-              >
-                <div
-                  class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50"
-                >
-                  <svg
-                    class="h-3 w-3 text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </template>
-
-          <template #cell-cost="{ row }">
-            <div class="flex items-center gap-1.5 text-sm">
-              <span class="font-medium text-green-600 dark:text-green-400">
-                ${{ row.actual_cost.toFixed(6) }}
-              </span>
-              <!-- Cost Detail Tooltip -->
-              <div
-                class="group relative"
-                @mouseenter="showTooltip($event, row)"
-                @mouseleave="hideTooltip"
-              >
-                <div
-                  class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50"
-                >
-                  <svg
-                    class="h-3 w-3 text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </template>
-
-          <template #cell-billing_type="{ row }">
-            <span
-              class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
-              :class="
-                row.billing_type === 1
-                  ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
-                  : 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'
-              "
-            >
-              {{ row.billing_type === 1 ? t('usage.subscription') : t('usage.balance') }}
-            </span>
-          </template>
-
-          <template #cell-first_token="{ row }">
-            <span
-              v-if="row.first_token_ms != null"
-              class="text-sm text-gray-600 dark:text-gray-400"
-            >
-              {{ formatDuration(row.first_token_ms) }}
-            </span>
-            <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
-          </template>
-
-          <template #cell-duration="{ row }">
-            <span class="text-sm text-gray-600 dark:text-gray-400">{{
-              formatDuration(row.duration_ms)
-            }}</span>
-          </template>
-
-          <template #cell-created_at="{ value }">
-            <span class="text-sm text-gray-600 dark:text-gray-400">{{
-              formatDateTime(value)
-            }}</span>
-          </template>
-
-          <template #cell-request_id="{ row }">
-            <div v-if="row.request_id" class="flex items-center gap-1.5 max-w-[120px]">
-              <span
-                class="font-mono text-xs text-gray-500 dark:text-gray-400 truncate"
-                :title="row.request_id"
-              >
-                {{ row.request_id }}
-              </span>
-              <button
-                @click="copyRequestId(row.request_id)"
-                class="flex-shrink-0 rounded p-0.5 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700"
-                :class="
-                  copiedRequestId === row.request_id
-                    ? 'text-green-500'
-                    : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
-                "
-                :title="copiedRequestId === row.request_id ? t('keys.copied') : t('keys.copyToClipboard')"
-              >
-                <svg
-                  v-if="copiedRequestId === row.request_id"
-                  class="h-3.5 w-3.5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="2"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                </svg>
-                <svg
-                  v-else
-                  class="h-3.5 w-3.5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="2"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    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>
-              </button>
-            </div>
-            <span v-else class="text-gray-400 dark:text-gray-500">-</span>
-          </template>
-
-          <template #empty>
-            <EmptyState :message="t('usage.noRecords')" />
-          </template>
-        </DataTable>
-        </div>
-      </div>
-
-      <!-- Pagination -->
-      <Pagination
-        v-if="pagination.total > 0"
-        :page="pagination.page"
-        :total="pagination.total"
-        :page-size="pagination.page_size"
-        @update:page="handlePageChange"
-        @update:pageSize="handlePageSizeChange"
-      />
+      <UsageStatsCards :stats="usageStats" />
+      <UsageFilters v-model="filters" v-model:startDate="startDate" v-model:endDate="endDate" :exporting="exporting" @change="applyFilters" @reset="resetFilters" @export="exportToExcel" />
+      <UsageTable :data="usageLogs" :loading="loading" />
+      <Pagination v-if="pagination.total > 0" :page="pagination.page" :total="pagination.total" :page-size="pagination.page_size" @update:page="handlePageChange" @update:pageSize="handlePageSizeChange" />
     </div>
   </AppLayout>
-
-  <ExportProgressDialog
-    :show="exportProgress.show"
-    :progress="exportProgress.progress"
-    :current="exportProgress.current"
-    :total="exportProgress.total"
-    :estimated-time="exportProgress.estimatedTime"
-    @cancel="cancelExport"
-  />
-
-  <!-- Token Tooltip Portal -->
-  <Teleport to="body">
-    <div
-      v-if="tokenTooltipVisible"
-      class="fixed z-[9999] pointer-events-none -translate-y-1/2"
-      :style="{
-        left: tokenTooltipPosition.x + 'px',
-        top: tokenTooltipPosition.y + 'px'
-      }"
-    >
-      <div
-        class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800"
-      >
-        <div class="space-y-1.5">
-          <!-- Token Breakdown -->
-          <div class="mb-2 border-b border-gray-700 pb-1.5">
-            <div class="text-xs font-semibold text-gray-300 mb-1">Token 明细</div>
-            <div v-if="tokenTooltipData && tokenTooltipData.input_tokens > 0" class="flex items-center justify-between gap-4">
-              <span class="text-gray-400">{{ t('admin.usage.inputTokens') }}</span>
-              <span class="font-medium text-white">{{ tokenTooltipData.input_tokens.toLocaleString() }}</span>
-            </div>
-            <div v-if="tokenTooltipData && tokenTooltipData.output_tokens > 0" class="flex items-center justify-between gap-4">
-              <span class="text-gray-400">{{ t('admin.usage.outputTokens') }}</span>
-              <span class="font-medium text-white">{{ tokenTooltipData.output_tokens.toLocaleString() }}</span>
-            </div>
-            <div v-if="tokenTooltipData && tokenTooltipData.cache_creation_tokens > 0" class="flex items-center justify-between gap-4">
-              <span class="text-gray-400">{{ t('admin.usage.cacheCreationTokens') }}</span>
-              <span class="font-medium text-white">{{ tokenTooltipData.cache_creation_tokens.toLocaleString() }}</span>
-            </div>
-            <div v-if="tokenTooltipData && tokenTooltipData.cache_read_tokens > 0" class="flex items-center justify-between gap-4">
-              <span class="text-gray-400">{{ t('admin.usage.cacheReadTokens') }}</span>
-              <span class="font-medium text-white">{{ tokenTooltipData.cache_read_tokens.toLocaleString() }}</span>
-            </div>
-          </div>
-          <!-- Total -->
-          <div class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5">
-            <span class="text-gray-400">{{ t('usage.totalTokens') }}</span>
-            <span class="font-semibold text-blue-400">{{ ((tokenTooltipData?.input_tokens || 0) + (tokenTooltipData?.output_tokens || 0) + (tokenTooltipData?.cache_creation_tokens || 0) + (tokenTooltipData?.cache_read_tokens || 0)).toLocaleString() }}</span>
-          </div>
-        </div>
-        <!-- Tooltip Arrow (left side) -->
-        <div
-          class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"
-        ></div>
-      </div>
-    </div>
-  </Teleport>
-
-  <!-- Tooltip Portal -->
-  <Teleport to="body">
-    <div
-      v-if="tooltipVisible"
-      class="fixed z-[9999] pointer-events-none -translate-y-1/2"
-      :style="{
-        left: tooltipPosition.x + 'px',
-        top: tooltipPosition.y + 'px'
-      }"
-    >
-      <div
-        class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800"
-      >
-        <div class="space-y-1.5">
-          <!-- Cost Breakdown -->
-          <div class="mb-2 border-b border-gray-700 pb-1.5">
-            <div class="text-xs font-semibold text-gray-300 mb-1">成本明细</div>
-            <div v-if="tooltipData && tooltipData.input_cost > 0" class="flex items-center justify-between gap-4">
-              <span class="text-gray-400">{{ t('admin.usage.inputCost') }}</span>
-              <span class="font-medium text-white">${{ tooltipData.input_cost.toFixed(6) }}</span>
-            </div>
-            <div v-if="tooltipData && tooltipData.output_cost > 0" class="flex items-center justify-between gap-4">
-              <span class="text-gray-400">{{ t('admin.usage.outputCost') }}</span>
-              <span class="font-medium text-white">${{ tooltipData.output_cost.toFixed(6) }}</span>
-            </div>
-            <div v-if="tooltipData && tooltipData.cache_creation_cost > 0" class="flex items-center justify-between gap-4">
-              <span class="text-gray-400">{{ t('admin.usage.cacheCreationCost') }}</span>
-              <span class="font-medium text-white">${{ tooltipData.cache_creation_cost.toFixed(6) }}</span>
-            </div>
-            <div v-if="tooltipData && tooltipData.cache_read_cost > 0" class="flex items-center justify-between gap-4">
-              <span class="text-gray-400">{{ t('admin.usage.cacheReadCost') }}</span>
-              <span class="font-medium text-white">${{ tooltipData.cache_read_cost.toFixed(6) }}</span>
-            </div>
-          </div>
-          <!-- Rate and Summary -->
-          <div class="flex items-center justify-between gap-6">
-            <span class="text-gray-400">{{ t('usage.rate') }}</span>
-            <span class="font-semibold text-blue-400"
-              >{{ (tooltipData?.rate_multiplier || 1).toFixed(2) }}x</span
-            >
-          </div>
-          <div class="flex items-center justify-between gap-6">
-            <span class="text-gray-400">{{ t('usage.original') }}</span>
-            <span class="font-medium text-white">${{ tooltipData?.total_cost.toFixed(6) }}</span>
-          </div>
-          <div class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5">
-            <span class="text-gray-400">{{ t('usage.billed') }}</span>
-            <span class="font-semibold text-green-400"
-              >${{ tooltipData?.actual_cost.toFixed(6) }}</span
-            >
-          </div>
-        </div>
-        <!-- Tooltip Arrow (left side) -->
-        <div
-          class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"
-        ></div>
-      </div>
-    </div>
-  </Teleport>
+  <UsageExportProgress :show="exportProgress.show" :progress="exportProgress.progress" :current="exportProgress.current" :total="exportProgress.total" :estimated-time="exportProgress.estimatedTime" @cancel="cancelExport" />
 </template>
 
 <script setup lang="ts">
-import { ref, computed, reactive, onMounted, onUnmounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import * as XLSX from 'xlsx'
-import { saveAs } from 'file-saver'
-import { useAppStore } from '@/stores/app'
-import { useClipboard } from '@/composables/useClipboard'
-import { adminAPI } from '@/api/admin'
-import { adminUsageAPI } from '@/api/admin/usage'
-import AppLayout from '@/components/layout/AppLayout.vue'
-import DataTable from '@/components/common/DataTable.vue'
-import Pagination from '@/components/common/Pagination.vue'
-import EmptyState from '@/components/common/EmptyState.vue'
-import { formatDateTime } from '@/utils/format'
-import Select from '@/components/common/Select.vue'
-import DateRangePicker from '@/components/common/DateRangePicker.vue'
-import ModelDistributionChart from '@/components/charts/ModelDistributionChart.vue'
-import TokenUsageTrend from '@/components/charts/TokenUsageTrend.vue'
-import ExportProgressDialog from '@/components/common/ExportProgressDialog.vue'
-import type { UsageLog, TrendDataPoint, ModelStat } from '@/types'
-import type { Column } from '@/components/common/types'
-import type {
-  SimpleUser,
-  SimpleApiKey,
-  AdminUsageStatsResponse,
-  AdminUsageQueryParams
-} from '@/api/admin/usage'
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import * as XLSX from 'xlsx'; import { saveAs } from 'file-saver'
+import { useAppStore } from '@/stores/app'; import { adminAPI } from '@/api/admin'; import { adminUsageAPI } from '@/api/admin/usage'
+import AppLayout from '@/components/layout/AppLayout.vue'; import Pagination from '@/components/common/Pagination.vue'
+import UsageStatsCards from '@/components/admin/usage/UsageStatsCards.vue'; import UsageFilters from '@/components/admin/usage/UsageFilters.vue'
+import UsageTable from '@/components/admin/usage/UsageTable.vue'; import UsageExportProgress from '@/components/admin/usage/UsageExportProgress.vue'
+import type { UsageLog } from '@/types'; import type { AdminUsageStatsResponse, AdminUsageQueryParams } from '@/api/admin/usage'
 
-const { t } = useI18n()
 const appStore = useAppStore()
-const { copyToClipboard: clipboardCopy } = useClipboard()
+const usageStats = ref<AdminUsageStatsResponse | null>(null); const usageLogs = ref<UsageLog[]>([]); const loading = ref(false); const exporting = ref(false)
+let abortController: AbortController | null = null; let exportAbortController: AbortController | null = null
+const exportProgress = reactive({ show: false, progress: 0, current: 0, total: 0, estimatedTime: '' })
 
-// Tooltip state
-const tooltipVisible = ref(false)
-const tooltipPosition = ref({ x: 0, y: 0 })
-const tooltipData = ref<UsageLog | null>(null)
+const formatLD = (d: Date) => d.toISOString().split('T')[0]
+const now = new Date(); const weekAgo = new Date(Date.now() - 6 * 86400000)
+const startDate = ref(formatLD(weekAgo)); const endDate = ref(formatLD(now))
+const filters = ref<AdminUsageQueryParams>({ user_id: undefined, model: undefined, group_id: undefined, start_date: startDate.value, end_date: endDate.value })
+const pagination = reactive({ page: 1, page_size: 20, total: 0 })
 
-// Token tooltip state
-const tokenTooltipVisible = ref(false)
-const tokenTooltipPosition = ref({ x: 0, y: 0 })
-const tokenTooltipData = ref<UsageLog | null>(null)
-
-// Request ID copy state
-const copiedRequestId = ref<string | null>(null)
-
-// Usage stats from API
-const usageStats = ref<AdminUsageStatsResponse | null>(null)
-
-// Chart data
-const trendData = ref<TrendDataPoint[]>([])
-const modelStats = ref<ModelStat[]>([])
-const chartsLoading = ref(false)
-const granularity = ref<'day' | 'hour'>('day')
-
-// Granularity options for Select component
-const granularityOptions = computed(() => [
-  { value: 'day', label: t('admin.dashboard.day') },
-  { value: 'hour', label: t('admin.dashboard.hour') }
-])
-
-const columns = computed<Column[]>(() => [
-  { key: 'user', label: t('admin.usage.user'), sortable: false },
-  { key: 'api_key', label: t('usage.apiKeyFilter'), sortable: false },
-  { key: 'account', label: t('admin.usage.account'), sortable: false },
-  { key: 'model', label: t('usage.model'), sortable: true },
-  { key: 'group', label: t('admin.usage.group'), sortable: false },
-  { key: 'stream', label: t('usage.type'), sortable: false },
-  { key: 'tokens', label: t('usage.tokens'), sortable: false },
-  { key: 'cost', label: t('usage.cost'), sortable: false },
-  { key: 'billing_type', label: t('usage.billingType'), sortable: false },
-  { key: 'first_token', label: t('usage.firstToken'), sortable: false },
-  { key: 'duration', label: t('usage.duration'), sortable: false },
-  { key: 'created_at', label: t('usage.time'), sortable: true },
-  { key: 'request_id', label: t('admin.usage.requestId'), sortable: false }
-])
-
-const usageLogs = ref<UsageLog[]>([])
-const apiKeys = ref<SimpleApiKey[]>([])
-const models = ref<string[]>([])
-const accounts = ref<any[]>([])
-const groups = ref<any[]>([])
-const loading = ref(false)
-let abortController: AbortController | null = null
-let exportAbortController: AbortController | null = null
-const exporting = ref(false)
-const exportProgress = reactive({
-  show: false,
-  progress: 0,
-  current: 0,
-  total: 0,
-  estimatedTime: ''
-})
-
-// User search state
-const userSearchKeyword = ref('')
-const userSearchResults = ref<SimpleUser[]>([])
-const userSearchLoading = ref(false)
-const showUserDropdown = ref(false)
-const selectedUser = ref<SimpleUser | null>(null)
-let searchTimeout: ReturnType<typeof setTimeout> | null = null
-
-// API Key options computed from loaded keys
-const apiKeyOptions = computed(() => {
-  return [
-    { value: null, label: t('usage.allApiKeys') },
-    ...apiKeys.value.map((key) => ({
-      value: key.id,
-      label: key.name
-    }))
-  ]
-})
-
-// Model options
-const modelOptions = computed(() => {
-  return [
-    { value: null, label: t('admin.usage.allModels') },
-    ...models.value.map((model) => ({
-      value: model,
-      label: model
-    }))
-  ]
-})
-
-// Account options
-const accountOptions = computed(() => {
-  return [
-    { value: null, label: t('admin.usage.allAccounts') },
-    ...accounts.value.map((account) => ({
-      value: account.id,
-      label: account.name
-    }))
-  ]
-})
-
-// Stream type options
-const streamOptions = computed(() => [
-  { value: null, label: t('admin.usage.allTypes') },
-  { value: true, label: t('usage.stream') },
-  { value: false, label: t('usage.sync') }
-])
-
-// Billing type options
-const billingTypeOptions = computed(() => [
-  { value: null, label: t('admin.usage.allBillingTypes') },
-  { value: 0, label: t('usage.balance') },
-  { value: 1, label: t('usage.subscription') }
-])
-
-// Group options
-const groupOptions = computed(() => {
-  return [
-    { value: null, label: t('admin.usage.allGroups') },
-    ...groups.value.map((group) => ({
-      value: group.id,
-      label: group.name
-    }))
-  ]
-})
-
-// Helper function to format date in local timezone
-const formatLocalDate = (date: Date): string => {
-  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
-}
-
-// Initialize date range immediately
-// Use tomorrow as end date to handle timezone differences between client and server
-// e.g., when server is in Asia/Shanghai and client is in America/Chicago
-const now = new Date()
-const tomorrow = new Date(now)
-tomorrow.setDate(tomorrow.getDate() + 1)
-const weekAgo = new Date(now)
-weekAgo.setDate(weekAgo.getDate() - 6)
-
-// Date range state
-const startDate = ref(formatLocalDate(weekAgo))
-const endDate = ref(formatLocalDate(tomorrow))
-
-const filters = ref<AdminUsageQueryParams>({
-  user_id: undefined,
-  api_key_id: undefined,
-  account_id: undefined,
-  group_id: undefined,
-  model: undefined,
-  stream: undefined,
-  billing_type: undefined,
-  start_date: undefined,
-  end_date: undefined
-})
-
-// Initialize filters with date range
-filters.value.start_date = startDate.value
-filters.value.end_date = endDate.value
-
-// User search with debounce
-const debounceSearchUsers = () => {
-  if (searchTimeout) {
-    clearTimeout(searchTimeout)
-  }
-  searchTimeout = setTimeout(searchUsers, 300)
-}
-
-const searchUsers = async () => {
-  const keyword = userSearchKeyword.value.trim()
-  if (!keyword) {
-    userSearchResults.value = []
-    return
-  }
-
-  userSearchLoading.value = true
+const loadLogs = async () => {
+  abortController?.abort(); const c = new AbortController(); abortController = c; loading.value = true
   try {
-    userSearchResults.value = await adminAPI.usage.searchUsers(keyword)
-  } catch (error) {
-    console.error('Failed to search users:', error)
-    userSearchResults.value = []
-  } finally {
-    userSearchLoading.value = false
-  }
-}
-
-const selectUser = async (user: SimpleUser) => {
-  selectedUser.value = user
-  userSearchKeyword.value = user.email
-  showUserDropdown.value = false
-  filters.value.user_id = user.id
-  filters.value.api_key_id = undefined
-
-  // Load API keys for selected user
-  await loadApiKeys(user.id)
-  applyFilters()
-}
-
-const clearUserFilter = () => {
-  selectedUser.value = null
-  userSearchKeyword.value = ''
-  userSearchResults.value = []
-  filters.value.user_id = undefined
-  filters.value.api_key_id = undefined
-  apiKeys.value = []
-  loadApiKeys()
-  applyFilters()
-}
-
-const loadApiKeys = async (userId?: number) => {
-  try {
-    apiKeys.value = await adminAPI.usage.searchApiKeys(userId)
-  } catch (error) {
-    console.error('Failed to load API keys:', error)
-    apiKeys.value = []
-  }
-}
-
-// Handle date range change from DateRangePicker
-const onDateRangeChange = (range: {
-  startDate: string
-  endDate: string
-  preset: string | null
-}) => {
-  filters.value.start_date = range.startDate
-  filters.value.end_date = range.endDate
-  applyFilters()
-}
-
-const pagination = ref({
-  page: 1,
-  page_size: 20,
-  total: 0,
-  pages: 0
-})
-
-const formatDuration = (ms: number): string => {
-  if (ms < 1000) return `${ms.toFixed(0)}ms`
-  return `${(ms / 1000).toFixed(2)}s`
-}
-
-const formatTokens = (value: number): string => {
-  if (value >= 1_000_000_000) {
-    return `${(value / 1_000_000_000).toFixed(2)}B`
-  } else if (value >= 1_000_000) {
-    return `${(value / 1_000_000).toFixed(2)}M`
-  } else if (value >= 1_000) {
-    return `${(value / 1_000).toFixed(2)}K`
-  }
-  return value.toLocaleString()
-}
-
-// Compact format for cache tokens in table cells
-const formatCacheTokens = (value: number): string => {
-  if (value >= 1_000_000) {
-    return `${(value / 1_000_000).toFixed(1)}M`
-  } else if (value >= 1_000) {
-    return `${(value / 1_000).toFixed(1)}K`
-  }
-  return value.toLocaleString()
-}
-
-const copyRequestId = async (requestId: string) => {
-  const success = await clipboardCopy(requestId, t('admin.usage.requestIdCopied'))
-  if (success) {
-    copiedRequestId.value = requestId
-    setTimeout(() => {
-      copiedRequestId.value = null
-    }, 800)
-  }
-}
-
-const isAbortError = (error: unknown): boolean => {
-  if (error instanceof DOMException && error.name === 'AbortError') {
-    return true
-  }
-  if (typeof error === 'object' && error !== null) {
-    const maybeError = error as { code?: string; name?: string }
-    return maybeError.code === 'ERR_CANCELED' || maybeError.name === 'CanceledError'
-  }
-  return false
-}
-
-const formatExportTimestamp = (date: Date): string => {
-  const pad = (value: number) => String(value).padStart(2, '0')
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}_${pad(date.getHours())}-${pad(date.getMinutes())}-${pad(date.getSeconds())}`
-}
-
-const formatRemainingTime = (ms: number): string => {
-  const totalSeconds = Math.max(0, Math.round(ms / 1000))
-  const hours = Math.floor(totalSeconds / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
-  const seconds = totalSeconds % 60
-  const parts = []
-  if (hours > 0) {
-    parts.push(`${hours}h`)
-  }
-  if (minutes > 0 || hours > 0) {
-    parts.push(`${minutes}m`)
-  }
-  parts.push(`${seconds}s`)
-  return parts.join(' ')
-}
-
-const updateExportProgress = (current: number, total: number, startedAt: number) => {
-  exportProgress.current = current
-  exportProgress.total = total
-  exportProgress.progress = total > 0 ? Math.min(100, Math.round((current / total) * 100)) : 0
-  if (current > 0 && total > 0) {
-    const elapsedMs = Date.now() - startedAt
-    const remainingMs = Math.max(0, Math.round((elapsedMs / current) * (total - current)))
-    exportProgress.estimatedTime = formatRemainingTime(remainingMs)
-  } else {
-    exportProgress.estimatedTime = ''
-  }
-}
-
-const loadUsageLogs = async () => {
-  if (abortController) {
-    abortController.abort()
-  }
-  const controller = new AbortController()
-  abortController = controller
-  const { signal } = controller
-  loading.value = true
-  try {
-    const params: AdminUsageQueryParams = {
-      page: pagination.value.page,
-      page_size: pagination.value.page_size,
-      ...filters.value
-    }
-
-    const response = await adminAPI.usage.list(params, { signal })
-    if (signal.aborted) {
-      return
-    }
-    usageLogs.value = response.items
-    pagination.value.total = response.total
-    pagination.value.pages = response.pages
-
-  } catch (error) {
-    if (signal.aborted || isAbortError(error)) {
-      return
-    }
-    appStore.showError(t('usage.failedToLoad'))
-  } finally {
-    if (!signal.aborted && abortController === controller) {
-      loading.value = false
-    }
-  }
-}
-
-const loadUsageStats = async () => {
-  try {
-    const stats = await adminAPI.usage.getStats({
-      user_id: filters.value.user_id,
-      api_key_id: filters.value.api_key_id ? Number(filters.value.api_key_id) : undefined,
-      start_date: filters.value.start_date || startDate.value,
-      end_date: filters.value.end_date || endDate.value
-    })
-    usageStats.value = stats
-  } catch (error) {
-    console.error('Failed to load usage stats:', error)
-  }
-}
-
-const loadChartData = async () => {
-  chartsLoading.value = true
-  try {
-    const params = {
-      start_date: filters.value.start_date || startDate.value,
-      end_date: filters.value.end_date || endDate.value,
-      granularity: granularity.value,
-      user_id: filters.value.user_id,
-      api_key_id: filters.value.api_key_id ? Number(filters.value.api_key_id) : undefined
-    }
-
-    const [trendResponse, modelResponse] = await Promise.all([
-      adminAPI.dashboard.getUsageTrend(params),
-      adminAPI.dashboard.getModelStats({
-        start_date: params.start_date,
-        end_date: params.end_date,
-        user_id: params.user_id,
-        api_key_id: params.api_key_id
-      })
-    ])
-
-    trendData.value = trendResponse.trend || []
-    modelStats.value = modelResponse.models || []
-  } catch (error) {
-    console.error('Failed to load chart data:', error)
-  } finally {
-    chartsLoading.value = false
-  }
-}
-
-const onGranularityChange = () => {
-  loadChartData()
-}
-
-const applyFilters = () => {
-  pagination.value.page = 1
-  loadUsageLogs()
-  loadUsageStats()
-  loadChartData()
-}
-
-// Load filter options
-const loadFilterOptions = async () => {
-  try {
-    const [accountsResponse, groupsResponse] = await Promise.all([
-      adminAPI.accounts.list(1, 1000),
-      adminAPI.groups.list(1, 1000)
-    ])
-    accounts.value = accountsResponse.items || []
-    groups.value = groupsResponse.items || []
-  } catch (error) {
-    console.error('Failed to load filter options:', error)
-  }
-  await loadModelOptions()
-}
-
-const loadModelOptions = async () => {
-  try {
-    const endDate = new Date()
-    const startDateRange = new Date(endDate)
-    startDateRange.setDate(startDateRange.getDate() - 29)
-    // Use local timezone instead of UTC
-    const endDateStr = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`
-    const startDateStr = `${startDateRange.getFullYear()}-${String(startDateRange.getMonth() + 1).padStart(2, '0')}-${String(startDateRange.getDate()).padStart(2, '0')}`
-    const response = await adminAPI.dashboard.getModelStats({
-      start_date: startDateStr,
-      end_date: endDateStr
-    })
-    const uniqueModels = new Set<string>()
-    response.models?.forEach((stat) => {
-      if (stat.model) {
-        uniqueModels.add(stat.model)
-      }
-    })
-    models.value = Array.from(uniqueModels).sort()
-  } catch (error) {
-    console.error('Failed to load model options:', error)
-  }
-}
-
-const resetFilters = () => {
-  selectedUser.value = null
-  userSearchKeyword.value = ''
-  userSearchResults.value = []
-  apiKeys.value = []
-  filters.value = {
-    user_id: undefined,
-    api_key_id: undefined,
-    account_id: undefined,
-    group_id: undefined,
-    model: undefined,
-    stream: undefined,
-    billing_type: undefined,
-    start_date: undefined,
-    end_date: undefined
-  }
-  granularity.value = 'day'
-  // Reset date range to default (last 7 days, with tomorrow as end to handle timezone differences)
-  const now = new Date()
-  const tomorrowDate = new Date(now)
-  tomorrowDate.setDate(tomorrowDate.getDate() + 1)
-  const weekAgo = new Date(now)
-  weekAgo.setDate(weekAgo.getDate() - 6)
-  startDate.value = formatLocalDate(weekAgo)
-  endDate.value = formatLocalDate(tomorrowDate)
-  filters.value.start_date = startDate.value
-  filters.value.end_date = endDate.value
-  pagination.value.page = 1
-  loadApiKeys()
-  loadUsageLogs()
-  loadUsageStats()
-  loadChartData()
-}
-
-const handlePageChange = (page: number) => {
-  pagination.value.page = page
-  loadUsageLogs()
-}
-
-const handlePageSizeChange = (pageSize: number) => {
-  pagination.value.page_size = pageSize
-  pagination.value.page = 1
-  loadUsageLogs()
-}
-
-const cancelExport = () => {
-  if (!exporting.value) {
-    return
-  }
-  exportAbortController?.abort()
+    const res = await adminAPI.usage.list({ page: pagination.page, page_size: pagination.page_size, ...filters.value }, { signal: c.signal })
+    if(!c.signal.aborted) { usageLogs.value = res.items; pagination.total = res.total }
+  } catch {} finally { if(abortController === c) loading.value = false }
 }
+const loadStats = async () => { try { const s = await adminAPI.usage.getStats(filters.value); usageStats.value = s } catch {} }
+const applyFilters = () => { pagination.page = 1; loadLogs(); loadStats() }
+const resetFilters = () => { startDate.value = formatLD(weekAgo); endDate.value = formatLD(now); filters.value = { start_date: startDate.value, end_date: endDate.value }; applyFilters() }
+const handlePageChange = (p: number) => { pagination.page = p; loadLogs() }
+const handlePageSizeChange = (s: number) => { pagination.page_size = s; pagination.page = 1; loadLogs() }
+const cancelExport = () => exportAbortController?.abort()
 
 const exportToExcel = async () => {
-  if (pagination.value.total === 0) {
-    appStore.showWarning(t('usage.noDataToExport'))
-    return
-  }
-
-  if (exporting.value) {
-    return
-  }
-
-  exporting.value = true
-  exportProgress.show = true
-  exportProgress.progress = 0
-  exportProgress.current = 0
-  exportProgress.total = pagination.value.total
-  exportProgress.estimatedTime = ''
-
-  const startedAt = Date.now()
-  const controller = new AbortController()
-  exportAbortController = controller
-
+  if (exporting.value) return; exporting.value = true; exportProgress.show = true
+  const c = new AbortController(); exportAbortController = c
   try {
-    const allLogs: UsageLog[] = []
-    const pageSize = 100
-    let page = 1
-    let total = pagination.value.total
-
+    const all: UsageLog[] = []; let p = 1; let total = pagination.total
     while (true) {
-      const params: AdminUsageQueryParams = {
-        page,
-        page_size: pageSize,
-        ...filters.value
-      }
-      const response = await adminUsageAPI.list(params, { signal: controller.signal })
-      if (controller.signal.aborted) {
-        break
-      }
-      if (page === 1) {
-        total = response.total
-        exportProgress.total = total
-      }
-      if (response.items?.length) {
-        allLogs.push(...response.items)
-      }
-
-      updateExportProgress(allLogs.length, total, startedAt)
-
-      if (allLogs.length >= total || response.items.length < pageSize) {
-        break
-      }
-      page += 1
+      const res = await adminUsageAPI.list({ page: p, page_size: 100, ...filters.value }, { signal: c.signal })
+      if (c.signal.aborted) break; if (p === 1) { total = res.total; exportProgress.total = total }
+      if (res.items?.length) all.push(...res.items)
+      exportProgress.current = all.length; exportProgress.progress = total > 0 ? Math.min(100, Math.round(all.length/total*100)) : 0
+      if (all.length >= total || res.items.length < 100) break; p++
     }
-
-    if (controller.signal.aborted) {
-      appStore.showInfo(t('usage.exportCancelled'))
-      return
+    if(!c.signal.aborted) {
+      const ws = XLSX.utils.json_to_sheet(all); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Usage')
+      saveAs(new Blob([XLSX.write(wb, { bookType: 'xlsx', type: 'array' })], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }), `usage_${Date.now()}.xlsx`)
+      appStore.showSuccess('Export Success')
     }
-
-    if (allLogs.length === 0) {
-      appStore.showWarning(t('usage.noDataToExport'))
-      return
-    }
-
-    const headers = [
-      'User',
-      'API Key',
-      'Model',
-      'Type',
-      'Input Tokens',
-      'Output Tokens',
-      'Cache Read Tokens',
-      'Cache Write Tokens',
-      'Total Cost',
-      'Billing Type',
-      'Duration (ms)',
-      'Time'
-    ]
-    const rows = allLogs.map((log) => [
-      log.user?.email || '',
-      log.api_key?.name || '',
-      log.model,
-      log.stream ? 'Stream' : 'Sync',
-      log.input_tokens,
-      log.output_tokens,
-      log.cache_read_tokens,
-      log.cache_creation_tokens,
-      Number(log.total_cost.toFixed(6)),
-      log.billing_type === 1 ? 'Subscription' : 'Balance',
-      log.duration_ms,
-      log.created_at
-    ])
-
-    const worksheet = XLSX.utils.aoa_to_sheet([headers, ...rows])
-    const workbook = XLSX.utils.book_new()
-    XLSX.utils.book_append_sheet(workbook, worksheet, 'Usage')
-    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
-    const blob = new Blob([excelBuffer], {
-      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-    })
-
-    saveAs(blob, `admin_usage_${formatExportTimestamp(new Date())}.xlsx`)
-    appStore.showSuccess(t('usage.exportExcelSuccess'))
-  } catch (error) {
-    if (controller.signal.aborted || isAbortError(error)) {
-      appStore.showInfo(t('usage.exportCancelled'))
-      return
-    }
-    appStore.showError(t('usage.exportExcelFailed'))
-    console.error('Excel export failed:', error)
-  } finally {
-    if (exportAbortController === controller) {
-      exportAbortController = null
-    }
-    exporting.value = false
-    exportProgress.show = false
-  }
+  } catch { appStore.showError('Export Failed') }
+  finally { if(exportAbortController === c) { exportAbortController = null; exporting.value = false; exportProgress.show = false } }
 }
 
-// Click outside to close dropdown
-const handleClickOutside = (event: MouseEvent) => {
-  const target = event.target as HTMLElement
-  if (!target.closest('.relative')) {
-    showUserDropdown.value = false
-  }
-}
-
-// Tooltip functions
-const showTooltip = (event: MouseEvent, row: UsageLog) => {
-  const target = event.currentTarget as HTMLElement
-  const rect = target.getBoundingClientRect()
-
-  tooltipData.value = row
-  tooltipPosition.value.x = rect.right + 8
-  tooltipPosition.value.y = rect.top + rect.height / 2
-  tooltipVisible.value = true
-}
-
-const hideTooltip = () => {
-  tooltipVisible.value = false
-  tooltipData.value = null
-}
-
-// Token tooltip functions
-const showTokenTooltip = (event: MouseEvent, row: UsageLog) => {
-  const target = event.currentTarget as HTMLElement
-  const rect = target.getBoundingClientRect()
-
-  tokenTooltipData.value = row
-  tokenTooltipPosition.value.x = rect.right + 8
-  tokenTooltipPosition.value.y = rect.top + rect.height / 2
-  tokenTooltipVisible.value = true
-}
-
-const hideTokenTooltip = () => {
-  tokenTooltipVisible.value = false
-  tokenTooltipData.value = null
-}
-
-onMounted(() => {
-  loadFilterOptions()
-  loadApiKeys()
-  loadUsageLogs()
-  loadUsageStats()
-  loadChartData()
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  if (searchTimeout) {
-    clearTimeout(searchTimeout)
-  }
-  if (abortController) {
-    abortController.abort()
-  }
-  if (exportAbortController) {
-    exportAbortController.abort()
-  }
-})
-</script>
+onMounted(() => { loadLogs(); loadStats() })
+onUnmounted(() => { abortController?.abort(); exportAbortController?.abort() })
+</script>
\ No newline at end of file
diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
index ca543c4b..2ee8af08 100644
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -1,2206 +1,222 @@
 <template>
   <AppLayout>
     <TablePageLayout>
-      <!-- Single Row: Search, Filters, and Actions -->
       <template #filters>
         <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-          <!-- Left: Search + Active Filters -->
           <div class="flex flex-1 flex-wrap items-center gap-3">
-            <!-- Search Box -->
             <div class="relative w-64">
-              <svg
-                class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-                />
-              </svg>
-              <input
-                v-model="searchQuery"
-                type="text"
-                :placeholder="t('admin.users.searchUsers')"
-                class="input pl-10"
-                @input="handleSearch"
-              />
+              <svg class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>
+              <input v-model="searchQuery" type="text" :placeholder="t('admin.users.searchUsers')" class="input pl-10" @input="handleSearch" />
             </div>
-
-            <!-- Role Filter (visible when enabled) -->
             <div v-if="visibleFilters.has('role')" class="w-32">
-              <Select
-                v-model="filters.role"
-                :options="[
-                  { value: '', label: t('admin.users.allRoles') },
-                  { value: 'admin', label: t('admin.users.admin') },
-                  { value: 'user', label: t('admin.users.user') }
-                ]"
-                @change="applyFilter"
-              />
+              <Select v-model="filters.role" :options="[{ value: '', label: t('admin.users.allRoles') }, { value: 'admin', label: t('admin.users.admin') }, { value: 'user', label: t('admin.users.user') }]" @change="applyFilter" />
             </div>
-
-            <!-- Status Filter (visible when enabled) -->
             <div v-if="visibleFilters.has('status')" class="w-32">
-              <Select
-                v-model="filters.status"
-                :options="[
-                  { value: '', label: t('admin.users.allStatus') },
-                  { value: 'active', label: t('common.active') },
-                  { value: 'disabled', label: t('admin.users.disabled') }
-                ]"
-                @change="applyFilter"
-              />
+              <Select v-model="filters.status" :options="[{ value: '', label: t('admin.users.allStatus') }, { value: 'active', label: t('common.active') }, { value: 'disabled', label: t('admin.users.disabled') }]" @change="applyFilter" />
             </div>
-
-            <!-- Dynamic Attribute Filters -->
             <template v-for="(value, attrId) in activeAttributeFilters" :key="attrId">
               <div v-if="visibleFilters.has(`attr_${attrId}`)" class="relative">
-                <!-- Text/Email/URL/Textarea/Date type: styled input -->
-                <input
-                  v-if="['text', 'textarea', 'email', 'url', 'date'].includes(getAttributeDefinition(Number(attrId))?.type || 'text')"
-                  :value="value"
-                  @input="(e) => updateAttributeFilter(Number(attrId), (e.target as HTMLInputElement).value)"
-                  @keyup.enter="applyFilter"
-                  :placeholder="getAttributeDefinitionName(Number(attrId))"
-                  class="input w-36"
-                />
-                <!-- Number type: number input -->
-                <input
-                  v-else-if="getAttributeDefinition(Number(attrId))?.type === 'number'"
-                  :value="value"
-                  type="number"
-                  @input="(e) => updateAttributeFilter(Number(attrId), (e.target as HTMLInputElement).value)"
-                  @keyup.enter="applyFilter"
-                  :placeholder="getAttributeDefinitionName(Number(attrId))"
-                  class="input w-32"
-                />
-                <!-- Select/Multi-select type -->
+                <input v-if="['text', 'textarea', 'email', 'url', 'date'].includes(getAttributeDefinition(Number(attrId))?.type || 'text')" :value="value" @input="(e) => updateAttributeFilter(Number(attrId), (e.target as HTMLInputElement).value)" @keyup.enter="applyFilter" :placeholder="getAttributeDefinitionName(Number(attrId))" class="input w-36" />
+                <input v-else-if="getAttributeDefinition(Number(attrId))?.type === 'number'" :value="value" type="number" @input="(e) => updateAttributeFilter(Number(attrId), (e.target as HTMLInputElement).value)" @keyup.enter="applyFilter" :placeholder="getAttributeDefinitionName(Number(attrId))" class="input w-32" />
                 <template v-else-if="['select', 'multi_select'].includes(getAttributeDefinition(Number(attrId))?.type || '')">
                   <div class="w-36">
-                    <Select
-                      :model-value="value"
-                      :options="[
-                        { value: '', label: getAttributeDefinitionName(Number(attrId)) },
-                        ...(getAttributeDefinition(Number(attrId))?.options || [])
-                      ]"
-                      @update:model-value="(val) => { updateAttributeFilter(Number(attrId), String(val ?? '')); applyFilter() }"
-                    />
+                    <Select :model-value="value" :options="[{ value: '', label: getAttributeDefinitionName(Number(attrId)) }, ...(getAttributeDefinition(Number(attrId))?.options?.map(o => ({ value: o.value, label: o.label })) || [])]" @update:model-value="(val) => { updateAttributeFilter(Number(attrId), String(val ?? '')); applyFilter() }" />
                   </div>
                 </template>
-                <!-- Fallback -->
-                <input
-                  v-else
-                  :value="value"
-                  @input="(e) => updateAttributeFilter(Number(attrId), (e.target as HTMLInputElement).value)"
-                  @keyup.enter="applyFilter"
-                  :placeholder="getAttributeDefinitionName(Number(attrId))"
-                  class="input w-36"
-                />
               </div>
             </template>
           </div>
-
-          <!-- Right: Actions and Settings -->
           <div class="flex items-center gap-3">
-            <!-- Refresh Button -->
-            <button
-              @click="loadUsers"
-              :disabled="loading"
-              class="btn btn-secondary"
-              :title="t('common.refresh')"
-            >
-              <svg
-                :class="['h-5 w-5', loading ? 'animate-spin' : '']"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="1.5"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-                />
-              </svg>
-            </button>
-            <!-- Filter Settings Dropdown -->
+            <button @click="loadUsers" :disabled="loading" class="btn btn-secondary"><svg :class="['h-5 w-5', loading ? 'animate-spin' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg></button>
             <div class="relative" ref="filterDropdownRef">
-              <button
-                @click="showFilterDropdown = !showFilterDropdown"
-                class="btn btn-secondary"
-              >
-                <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
-                </svg>
-                {{ t('admin.users.filterSettings') }}
-              </button>
-              <!-- Dropdown menu -->
-              <div
-                v-if="showFilterDropdown"
-                class="absolute right-0 top-full z-50 mt-1 w-48 rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-dark-600 dark:bg-dark-800"
-              >
-                <!-- Built-in filters -->
-                <button
-                  v-for="filter in builtInFilters"
-                  :key="filter.key"
-                  @click="toggleBuiltInFilter(filter.key)"
-                  class="flex w-full items-center justify-between px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-                >
-                  <span>{{ filter.name }}</span>
-                  <svg
-                    v-if="visibleFilters.has(filter.key)"
-                    class="h-4 w-4 text-primary-500"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    stroke-width="2"
-                  >
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                  </svg>
-                </button>
-                <!-- Divider if custom attributes exist -->
-                <div
-                  v-if="filterableAttributes.length > 0"
-                  class="my-1 border-t border-gray-100 dark:border-dark-700"
-                ></div>
-                <!-- Custom attribute filters -->
-                <button
-                  v-for="attr in filterableAttributes"
-                  :key="attr.id"
-                  @click="toggleAttributeFilter(attr)"
-                  class="flex w-full items-center justify-between px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-                >
-                  <span>{{ attr.name }}</span>
-                  <svg
-                    v-if="visibleFilters.has(`attr_${attr.id}`)"
-                    class="h-4 w-4 text-primary-500"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    stroke-width="2"
-                  >
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                  </svg>
-                </button>
+              <button @click="showFilterDropdown = !showFilterDropdown" class="btn btn-secondary"><svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" /></svg>{{ t('admin.users.filterSettings') }}</button>
+              <div v-if="showFilterDropdown" class="absolute right-0 top-full z-50 mt-1 w-48 rounded-lg border bg-white py-1 shadow-lg dark:border-dark-600 dark:bg-dark-800">
+                <button v-for="f in builtInFilters" :key="f.key" @click="toggleBuiltInFilter(f.key)" class="flex w-full items-center justify-between px-4 py-2 text-sm hover:bg-gray-100"><span>{{ f.name }}</span><svg v-if="visibleFilters.has(f.key)" class="h-4 w-4 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></button>
+                <div v-if="filterableAttributes.length > 0" class="my-1 border-t dark:border-dark-700"></div>
+                <button v-for="a in filterableAttributes" :key="a.id" @click="toggleAttributeFilter(a)" class="flex w-full items-center justify-between px-4 py-2 text-sm hover:bg-gray-100"><span>{{ a.name }}</span><svg v-if="visibleFilters.has(`attr_${a.id}`)" class="h-4 w-4 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg></button>
               </div>
             </div>
-            <!-- Column Settings Dropdown -->
-            <div class="relative" ref="columnDropdownRef">
-              <button
-                @click="showColumnDropdown = !showColumnDropdown"
-                class="btn btn-secondary"
-              >
-                <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 4.5v15m6-15v15m-10.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125z" />
-                </svg>
-                {{ t('admin.users.columnSettings') }}
-              </button>
-              <!-- Dropdown menu -->
-              <div
-                v-if="showColumnDropdown"
-                class="absolute right-0 top-full z-50 mt-1 max-h-80 w-48 overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-dark-600 dark:bg-dark-800"
-              >
-                <button
-                  v-for="col in toggleableColumns"
-                  :key="col.key"
-                  @click="toggleColumn(col.key)"
-                  class="flex w-full items-center justify-between px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-                >
-                  <span>{{ col.label }}</span>
-                  <svg
-                    v-if="isColumnVisible(col.key)"
-                    class="h-4 w-4 text-primary-500"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    stroke-width="2"
-                  >
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <!-- Attributes Config Button -->
-            <button @click="showAttributesModal = true" class="btn btn-secondary">
-              <svg
-                class="mr-1.5 h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="1.5"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-              </svg>
-              {{ t('admin.users.attributes.configButton') }}
-            </button>
-            <!-- Create User Button -->
-            <button @click="showCreateModal = true" class="btn btn-primary">
-              <svg
-                class="mr-2 h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="1.5"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-              </svg>
-              {{ t('admin.users.createUser') }}
-            </button>
+            <button @click="showAttributesModal = true" class="btn btn-secondary"><svg class="mr-1.5 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>{{ t('admin.users.attributes.configButton') }}</button>
+            <button @click="showCreateModal = true" class="btn btn-primary"><svg class="mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>{{ t('admin.users.createUser') }}</button>
           </div>
         </div>
       </template>
 
-      <!-- Users Table -->
       <template #table>
         <DataTable :columns="columns" :data="users" :loading="loading" :actions-count="7">
-          <template #cell-email="{ value }">
-            <div class="flex items-center gap-2">
-              <div
-                class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
-              >
-                <span class="text-sm font-medium text-primary-700 dark:text-primary-300">
-                  {{ value.charAt(0).toUpperCase() }}
-                </span>
-              </div>
-              <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
-            </div>
-          </template>
-
-          <template #cell-username="{ value }">
-            <span class="text-sm text-gray-700 dark:text-gray-300">{{ value || '-' }}</span>
-          </template>
-
-          <template #cell-notes="{ value }">
-            <div class="max-w-xs">
-              <span
-                v-if="value"
-                :title="value.length > 30 ? value : undefined"
-                class="block truncate text-sm text-gray-600 dark:text-gray-400"
-              >
-                {{ value.length > 30 ? value.substring(0, 25) + '...' : value }}
-              </span>
-              <span v-else class="text-sm text-gray-400">-</span>
-            </div>
-          </template>
-
-          <!-- Dynamic attribute columns -->
-          <template
-            v-for="def in attributeDefinitions.filter(d => d.enabled)"
-            :key="def.id"
-            #[`cell-attr_${def.id}`]="{ row }"
-          >
-            <div class="max-w-xs">
-              <span
-                class="block truncate text-sm text-gray-700 dark:text-gray-300"
-                :title="getAttributeValue(row.id, def.id)"
-              >
-                {{ getAttributeValue(row.id, def.id) }}
-              </span>
-            </div>
-          </template>
-
-          <template #cell-role="{ value }">
-            <span :class="['badge', value === 'admin' ? 'badge-purple' : 'badge-gray']">
-              {{ t('admin.users.roles.' + value) }}
-            </span>
-          </template>
-
-          <template #cell-subscriptions="{ row }">
-            <div
-              v-if="row.subscriptions && row.subscriptions.length > 0"
-              class="flex flex-wrap gap-1.5"
-            >
-              <GroupBadge
-                v-for="sub in row.subscriptions"
-                :key="sub.id"
-                :name="sub.group?.name || ''"
-                :platform="sub.group?.platform"
-                :subscription-type="sub.group?.subscription_type"
-                :rate-multiplier="sub.group?.rate_multiplier"
-                :days-remaining="sub.expires_at ? getDaysRemaining(sub.expires_at) : null"
-                :title="sub.expires_at ? formatDateTime(sub.expires_at) : ''"
-              />
-            </div>
-            <span
-              v-else
-              class="inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-2 py-1 text-xs text-gray-400 dark:bg-dark-700/50 dark:text-dark-500"
-            >
-              <svg
-                class="h-3.5 w-3.5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
-                />
-              </svg>
-              <span>{{ t('admin.users.noSubscription') }}</span>
-            </span>
-          </template>
-
-          <template #cell-balance="{ value }">
-            <span class="font-medium text-gray-900 dark:text-white">${{ value.toFixed(2) }}</span>
-          </template>
-
-          <template #cell-usage="{ row }">
-            <div class="text-sm">
-              <div class="flex items-center gap-1.5">
-                <span class="text-gray-500 dark:text-gray-400">{{ t('admin.users.today') }}:</span>
-                <span class="font-medium text-gray-900 dark:text-white">
-                  ${{ (usageStats[row.id]?.today_actual_cost ?? 0).toFixed(4) }}
-                </span>
-              </div>
-              <div class="mt-0.5 flex items-center gap-1.5">
-                <span class="text-gray-500 dark:text-gray-400">{{ t('admin.users.total') }}:</span>
-                <span class="font-medium text-gray-900 dark:text-white">
-                  ${{ (usageStats[row.id]?.total_actual_cost ?? 0).toFixed(4) }}
-                </span>
-              </div>
-            </div>
-          </template>
-
-          <template #cell-concurrency="{ value }">
-            <span class="text-sm text-gray-700 dark:text-gray-300">{{ value }}</span>
-          </template>
-
-          <template #cell-status="{ value }">
-            <div class="flex items-center gap-1.5">
-              <span
-                :class="[
-                  'inline-block h-2 w-2 rounded-full',
-                  value === 'active' ? 'bg-green-500' : 'bg-red-500'
-                ]"
-              ></span>
-              <span class="text-sm text-gray-700 dark:text-gray-300">
-                {{ t('admin.accounts.status.' + (value === 'disabled' ? 'inactive' : value)) }}
-              </span>
-            </div>
-          </template>
-
-          <template #cell-created_at="{ value }">
-            <span class="text-sm text-gray-500 dark:text-dark-400">{{ formatDateTime(value) }}</span>
-          </template>
-
-          <template #cell-actions="{ row }">
-            <div class="flex items-center gap-1">
-              <!-- Edit Button -->
-              <button
-                @click="handleEdit(row)"
-                class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
-                :title="t('common.edit')"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-                  />
-                </svg>
-              </button>
-
-              <!-- More Actions Menu Trigger -->
-              <button
-                :ref="(el) => setActionButtonRef(row.id, el)"
-                @click="openActionMenu(row)"
-                class="action-menu-trigger flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-dark-700 dark:hover:text-white"
-                :class="{ 'bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-white': activeMenuId === row.id }"
-              >
-                <svg
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
-                  />
-                </svg>
-              </button>
-            </div>
-          </template>
-
-          <template #empty>
-            <EmptyState
-              :title="t('admin.users.noUsersYet')"
-              :description="t('admin.users.createFirstUser')"
-              :action-text="t('admin.users.createUser')"
-              @action="showCreateModal = true"
-            />
-          </template>
+          <template #cell-email="{ value }"><div class="flex items-center gap-2"><div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 font-medium text-primary-700"><span>{{ value.charAt(0).toUpperCase() }}</span></div><span class="font-medium text-gray-900 dark:text-white">{{ value }}</span></div></template>
+          <template #cell-role="{ value }"><span :class="['badge', value === 'admin' ? 'badge-purple' : 'badge-gray']">{{ t('admin.users.roles.' + value) }}</span></template>
+          <template #cell-balance="{ value }"><span class="font-medium">${{ value.toFixed(2) }}</span></template>
+          <template #cell-status="{ value }"><div class="flex items-center gap-1.5"><span :class="['h-2 w-2 rounded-full', value === 'active' ? 'bg-green-500' : 'bg-red-500']"></span><span class="text-sm">{{ t('admin.accounts.status.' + (value === 'disabled' ? 'inactive' : value)) }}</span></div></template>
+          <template #cell-created_at="{ value }"><span class="text-sm text-gray-500">{{ formatDateTime(value) }}</span></template>
+          <template #cell-actions="{ row }"><div class="flex items-center gap-1"><button @click="handleEdit(row)" class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 hover:bg-gray-100"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg></button><button :ref="(el) => setActionButtonRef(row.id, el)" @click="openActionMenu(row)" class="action-menu-trigger flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 hover:bg-gray-100"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /></svg></button></div></template>
         </DataTable>
       </template>
 
-      <!-- Pagination -->
       <template #pagination>
-      <Pagination
-        v-if="pagination.total > 0"
-        :page="pagination.page"
-        :total="pagination.total"
-        :page-size="pagination.page_size"
-        @update:page="handlePageChange"
-        @update:pageSize="handlePageSizeChange"
-      />
+        <Pagination v-if="pagination.total > 0" :page="pagination.page" :total="pagination.total" :page-size="pagination.page_size" @update:page="handlePageChange" @update:pageSize="handlePageSizeChange" />
       </template>
     </TablePageLayout>
 
-    <!-- Action Menu (Teleported) -->
     <Teleport to="body">
-      <div
-        v-if="activeMenuId !== null && menuPosition"
-        class="action-menu-content fixed z-[9999] w-48 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
-        :style="{ top: menuPosition.top + 'px', left: menuPosition.left + 'px' }"
-      >
+      <div v-if="activeMenuId !== null && menuPosition" class="action-menu-content fixed z-[9999] w-48 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800" :style="{ top: menuPosition.top + 'px', left: menuPosition.left + 'px' }">
         <div class="py-1">
           <template v-for="user in users" :key="user.id">
             <template v-if="user.id === activeMenuId">
-              <!-- View API Keys -->
-              <button
-                @click="handleViewApiKeys(user); closeActionMenu()"
-                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-              >
-                <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11.536 16.207l-1.414 1.414a2 2 0 01-2.828 0l-1.414-1.414a2 2 0 010-2.828l-1.414-1.414a2 2 0 010-2.828l1.414-1.414L10.257 6.257A6 6 0 1121 11.257V11.257" />
-                </svg>
-                {{ t('admin.users.apiKeys') }}
-              </button>
-
-              <!-- Allowed Groups -->
-              <button
-                @click="handleAllowedGroups(user); closeActionMenu()"
-                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-              >
-                <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                </svg>
-                {{ t('admin.users.groups') }}
-              </button>
-
-              <div class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
-
-              <!-- Deposit -->
-              <button
-                @click="handleDeposit(user); closeActionMenu()"
-                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-              >
-                <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                </svg>
-                {{ t('admin.users.deposit') }}
-              </button>
-
-              <!-- Withdraw -->
-              <button
-                @click="handleWithdraw(user); closeActionMenu()"
-                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-              >
-                <svg class="h-4 w-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
-                </svg>
-                {{ t('admin.users.withdraw') }}
-              </button>
-
-              <div class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
-
-              <!-- Toggle Status (not for admin) -->
-              <button
-                v-if="user.role !== 'admin'"
-                @click="handleToggleStatus(user); closeActionMenu()"
-                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-              >
-                <svg
-                  v-if="user.status === 'active'"
-                  class="h-4 w-4 text-orange-500"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-                </svg>
-                <svg
-                  v-else
-                  class="h-4 w-4 text-green-500"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                {{ user.status === 'active' ? t('admin.users.disable') : t('admin.users.enable') }}
-              </button>
-
-              <!-- Delete (not for admin) -->
-              <button
-                v-if="user.role !== 'admin'"
-                @click="handleDelete(user); closeActionMenu()"
-                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
-              >
-                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                </svg>
-                {{ t('common.delete') }}
-              </button>
+              <button @click="handleViewApiKeys(user); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11.536 16.207l-1.414 1.414a2 2 0 01-2.828 0l-1.414-1.414a2 2 0 010-2.828l-1.414-1.414a2 2 0 010-2.828l1.414-1.414L10.257 6.257A6 6 0 1121 11.257V11.257" /></svg>{{ t('admin.users.apiKeys') }}</button>
+              <button @click="handleAllowedGroups(user); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>{{ t('admin.users.groups') }}</button>
+              <div class="my-1 border-t dark:border-dark-700"></div>
+              <button @click="handleDeposit(user); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100 text-emerald-600"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>{{ t('admin.users.deposit') }}</button>
+              <button @click="handleWithdraw(user); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100 text-amber-600"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" /></svg>{{ t('admin.users.withdraw') }}</button>
+              <div class="my-1 border-t dark:border-dark-700"></div>
+              <button v-if="user.role !== 'admin'" @click="handleToggleStatus(user); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100"><svg v-if="user.status === 'active'" class="h-4 w-4 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg><svg v-else class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>{{ user.status === 'active' ? t('admin.users.disable') : t('admin.users.enable') }}</button>
+              <button v-if="user.role !== 'admin'" @click="handleDelete(user); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>{{ t('common.delete') }}</button>
             </template>
           </template>
         </div>
       </div>
     </Teleport>
 
-    <!-- Create User Modal -->
-    <BaseDialog
-      :show="showCreateModal"
-      :title="t('admin.users.createUser')"
-      width="normal"
-      @close="closeCreateModal"
-    >
-      <form id="create-user-form" @submit.prevent="handleCreateUser" class="space-y-5">
-        <div>
-          <label class="input-label">{{ t('admin.users.email') }}</label>
-          <input
-            v-model="createForm.email"
-            type="email"
-            required
-            class="input"
-            :placeholder="t('admin.users.enterEmail')"
-          />
-        </div>
-        <div>
-          <label class="input-label">{{ t('admin.users.password') }}</label>
-          <div class="flex gap-2">
-            <div class="relative flex-1">
-              <input
-                v-model="createForm.password"
-                type="text"
-                required
-                class="input pr-10"
-                :placeholder="t('admin.users.enterPassword')"
-              />
-              <!-- Copy Password Button -->
-              <button
-                v-if="createForm.password"
-                type="button"
-                @click="copyPassword"
-                class="absolute right-2 top-1/2 -translate-y-1/2 rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700"
-                :class="
-                  passwordCopied
-                    ? 'text-green-500'
-                    : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
-                "
-                :title="passwordCopied ? t('keys.copied') : t('admin.users.copyPassword')"
-              >
-                <svg
-                  v-if="passwordCopied"
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="2"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                </svg>
-                <svg
-                  v-else
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
-                  />
-                </svg>
-              </button>
-            </div>
-            <!-- Generate Random Password Button -->
-            <button
-              type="button"
-              @click="generateRandomPassword"
-              class="btn btn-secondary px-3"
-              :title="t('admin.users.generatePassword')"
-            >
-              <svg
-                class="h-5 w-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div>
-          <label class="input-label">{{ t('admin.users.username') }}</label>
-          <input
-            v-model="createForm.username"
-            type="text"
-            class="input"
-            :placeholder="t('admin.users.enterUsername')"
-          />
-        </div>
-        <div>
-          <label class="input-label">{{ t('admin.users.notes') }}</label>
-          <textarea
-            v-model="createForm.notes"
-            rows="3"
-            class="input"
-            :placeholder="t('admin.users.enterNotes')"
-          ></textarea>
-          <p class="input-hint">{{ t('admin.users.notesHint') }}</p>
-        </div>
-        <div class="grid grid-cols-2 gap-4">
-          <div>
-            <label class="input-label">{{ t('admin.users.columns.balance') }}</label>
-            <input v-model.number="createForm.balance" type="number" step="any" class="input" />
-          </div>
-          <div>
-            <label class="input-label">{{ t('admin.users.columns.concurrency') }}</label>
-            <input v-model.number="createForm.concurrency" type="number" class="input" />
-          </div>
-        </div>
-      </form>
-
-      <template #footer>
-        <div class="flex justify-end gap-3">
-          <button @click="closeCreateModal" type="button" class="btn btn-secondary">
-            {{ t('common.cancel') }}
-          </button>
-          <button
-            type="submit"
-            form="create-user-form"
-            :disabled="submitting"
-            class="btn btn-primary"
-          >
-            <svg
-              v-if="submitting"
-              class="-ml-1 mr-2 h-4 w-4 animate-spin"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                class="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                stroke-width="4"
-              ></circle>
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              ></path>
-            </svg>
-            {{ submitting ? t('admin.users.creating') : t('common.create') }}
-          </button>
-        </div>
-      </template>
-    </BaseDialog>
-
-    <!-- Edit User Modal -->
-    <BaseDialog
-      :show="showEditModal"
-      :title="t('admin.users.editUser')"
-      width="normal"
-      @close="closeEditModal"
-    >
-      <form
-        v-if="editingUser"
-        id="edit-user-form"
-        @submit.prevent="handleUpdateUser"
-        class="space-y-5"
-      >
-        <div>
-          <label class="input-label">{{ t('admin.users.email') }}</label>
-          <input v-model="editForm.email" type="email" class="input" />
-        </div>
-        <div>
-          <label class="input-label">{{ t('admin.users.password') }}</label>
-          <p class="mb-1 text-xs text-gray-500 dark:text-dark-400">
-            {{ t('admin.users.leaveEmptyToKeep') }}
-          </p>
-          <div class="flex gap-2">
-            <div class="relative flex-1">
-              <input
-                v-model="editForm.password"
-                type="text"
-                class="input pr-10"
-                :placeholder="t('admin.users.enterNewPassword')"
-              />
-              <!-- Copy Password Button -->
-              <button
-                v-if="editForm.password"
-                type="button"
-                @click="copyEditPassword"
-                class="absolute right-2 top-1/2 -translate-y-1/2 rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700"
-                :class="
-                  editPasswordCopied
-                    ? 'text-green-500'
-                    : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
-                "
-                :title="editPasswordCopied ? t('keys.copied') : t('admin.users.copyPassword')"
-              >
-                <svg
-                  v-if="editPasswordCopied"
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="2"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                </svg>
-                <svg
-                  v-else
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
-                  />
-                </svg>
-              </button>
-            </div>
-            <!-- Generate Random Password Button -->
-            <button
-              type="button"
-              @click="generateEditPassword"
-              class="btn btn-secondary px-3"
-              :title="t('admin.users.generatePassword')"
-            >
-              <svg
-                class="h-5 w-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div>
-          <label class="input-label">{{ t('admin.users.username') }}</label>
-          <input
-            v-model="editForm.username"
-            type="text"
-            class="input"
-            :placeholder="t('admin.users.enterUsername')"
-          />
-        </div>
-        <div>
-          <label class="input-label">{{ t('admin.users.notes') }}</label>
-          <textarea
-            v-model="editForm.notes"
-            rows="3"
-            class="input"
-            :placeholder="t('admin.users.enterNotes')"
-          ></textarea>
-          <p class="input-hint">{{ t('admin.users.notesHint') }}</p>
-        </div>
-        <div>
-          <label class="input-label">{{ t('admin.users.columns.concurrency') }}</label>
-          <input v-model.number="editForm.concurrency" type="number" class="input" />
-        </div>
-
-        <!-- Custom Attributes -->
-        <UserAttributeForm
-          v-model="editForm.customAttributes"
-          :user-id="editingUser?.id"
-        />
-
-      </form>
-
-      <template #footer>
-        <div class="flex justify-end gap-3">
-          <button @click="closeEditModal" type="button" class="btn btn-secondary">
-            {{ t('common.cancel') }}
-          </button>
-          <button
-            type="submit"
-            form="edit-user-form"
-            :disabled="submitting"
-            class="btn btn-primary"
-          >
-            <svg
-              v-if="submitting"
-              class="-ml-1 mr-2 h-4 w-4 animate-spin"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                class="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                stroke-width="4"
-              ></circle>
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              ></path>
-            </svg>
-            {{ submitting ? t('admin.users.updating') : t('common.update') }}
-          </button>
-        </div>
-      </template>
-    </BaseDialog>
-
-    <!-- View API Keys Modal -->
-    <BaseDialog
-      :show="showApiKeysModal"
-      :title="t('admin.users.userApiKeys')"
-      width="wide"
-      @close="closeApiKeysModal"
-    >
-      <div v-if="viewingUser" class="space-y-4">
-        <!-- User Info Header -->
-        <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
-          <div
-            class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
-          >
-            <span class="text-lg font-medium text-primary-700 dark:text-primary-300">
-              {{ viewingUser.email.charAt(0).toUpperCase() }}
-            </span>
-          </div>
-          <div>
-            <p class="font-medium text-gray-900 dark:text-white">{{ viewingUser.email }}</p>
-            <p class="text-sm text-gray-500 dark:text-dark-400">{{ viewingUser.username }}</p>
-          </div>
-        </div>
-
-        <!-- API Keys List -->
-        <div v-if="loadingApiKeys" class="flex justify-center py-8">
-          <svg class="h-8 w-8 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24">
-            <circle
-              class="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              stroke-width="4"
-            ></circle>
-            <path
-              class="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-          </svg>
-        </div>
-        <div v-else-if="userApiKeys.length === 0" class="py-8 text-center">
-          <svg
-            class="mx-auto h-12 w-12 text-gray-400"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            stroke-width="1"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
-            />
-          </svg>
-          <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
-            {{ t('admin.users.noApiKeys') }}
-          </p>
-        </div>
-        <div v-else class="max-h-96 space-y-3 overflow-y-auto">
-          <div
-            v-for="key in userApiKeys"
-            :key="key.id"
-            class="rounded-xl border border-gray-200 bg-white p-4 dark:border-dark-600 dark:bg-dark-800"
-          >
-            <div class="flex items-start justify-between">
-              <div class="min-w-0 flex-1">
-                <div class="mb-1 flex items-center gap-2">
-                  <span class="font-medium text-gray-900 dark:text-white">{{ key.name }}</span>
-                  <span
-                    :class="[
-                      'badge text-xs',
-                      key.status === 'active' ? 'badge-success' : 'badge-danger'
-                    ]"
-                  >
-                    {{ key.status }}
-                  </span>
-                </div>
-                <p class="truncate font-mono text-sm text-gray-500 dark:text-dark-400">
-                  {{ key.key.substring(0, 20) }}...{{ key.key.substring(key.key.length - 8) }}
-                </p>
-              </div>
-            </div>
-            <div class="mt-3 flex flex-wrap gap-4 text-xs text-gray-500 dark:text-dark-400">
-              <div class="flex items-center gap-1">
-                <svg
-                  class="h-3.5 w-3.5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
-                  />
-                </svg>
-                <span
-                  >{{ t('admin.users.group') }}:
-                  {{ key.group?.name || t('admin.users.none') }}</span
-                >
-              </div>
-              <div class="flex items-center gap-1">
-                <svg
-                  class="h-3.5 w-3.5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
-                  />
-                </svg>
-                <span
-                  >{{ t('admin.users.columns.created') }}: {{ formatDateTime(key.created_at) }}</span
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="flex justify-end">
-          <button @click="closeApiKeysModal" type="button" class="btn btn-secondary">
-            {{ t('common.cancel') }}
-          </button>
-        </div>
-      </template>
-    </BaseDialog>
-
-    <!-- Allowed Groups Modal -->
-    <BaseDialog
-      :show="showAllowedGroupsModal"
-      :title="t('admin.users.setAllowedGroups')"
-      width="normal"
-      @close="closeAllowedGroupsModal"
-    >
-      <div v-if="allowedGroupsUser" class="space-y-4">
-        <!-- User Info Header -->
-        <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
-          <div
-            class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
-          >
-            <span class="text-lg font-medium text-primary-700 dark:text-primary-300">
-              {{ allowedGroupsUser.email.charAt(0).toUpperCase() }}
-            </span>
-          </div>
-          <div>
-            <p class="font-medium text-gray-900 dark:text-white">{{ allowedGroupsUser.email }}</p>
-          </div>
-        </div>
-
-        <!-- Loading State -->
-        <div v-if="loadingGroups" class="flex justify-center py-8">
-          <svg class="h-8 w-8 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24">
-            <circle
-              class="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              stroke-width="4"
-            ></circle>
-            <path
-              class="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-          </svg>
-        </div>
-
-        <!-- Groups Selection -->
-        <div v-else>
-          <p class="mb-3 text-sm text-gray-600 dark:text-dark-400">
-            {{ t('admin.users.allowedGroupsHint') }}
-          </p>
-
-          <!-- Empty State -->
-          <div v-if="standardGroups.length === 0" class="py-6 text-center">
-            <svg
-              class="mx-auto h-12 w-12 text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              stroke-width="1"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
-              />
-            </svg>
-            <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
-              {{ t('admin.users.noStandardGroups') }}
-            </p>
-          </div>
-
-          <!-- Groups List -->
-          <div v-else class="max-h-64 space-y-2 overflow-y-auto">
-            <label
-              v-for="group in standardGroups"
-              :key="group.id"
-              class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 transition-colors hover:bg-gray-50 dark:border-dark-600 dark:hover:bg-dark-700"
-              :class="{
-                'border-primary-300 bg-primary-50 dark:border-primary-700 dark:bg-primary-900/20':
-                  selectedGroupIds.includes(group.id)
-              }"
-            >
-              <input
-                type="checkbox"
-                :value="group.id"
-                v-model="selectedGroupIds"
-                class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
-              />
-              <div class="min-w-0 flex-1">
-                <p class="font-medium text-gray-900 dark:text-white">{{ group.name }}</p>
-                <p
-                  v-if="group.description"
-                  class="truncate text-sm text-gray-500 dark:text-dark-400"
-                >
-                  {{ group.description }}
-                </p>
-              </div>
-              <div class="flex items-center gap-2">
-                <span class="badge badge-gray text-xs">{{ group.platform }}</span>
-                <span v-if="group.is_exclusive" class="badge badge-purple text-xs">{{
-                  t('admin.groups.exclusive')
-                }}</span>
-              </div>
-            </label>
-          </div>
-
-          <!-- Clear Selection -->
-          <div class="mt-4 border-t border-gray-200 pt-4 dark:border-dark-600">
-            <label
-              class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 transition-colors hover:bg-gray-50 dark:border-dark-600 dark:hover:bg-dark-700"
-              :class="{
-                'border-green-300 bg-green-50 dark:border-green-700 dark:bg-green-900/20':
-                  selectedGroupIds.length === 0
-              }"
-            >
-              <input
-                type="radio"
-                :checked="selectedGroupIds.length === 0"
-                @change="selectedGroupIds = []"
-                class="h-4 w-4 border-gray-300 text-green-600 focus:ring-green-500"
-              />
-              <div class="flex-1">
-                <p class="font-medium text-gray-900 dark:text-white">
-                  {{ t('admin.users.allowAllGroups') }}
-                </p>
-                <p class="text-sm text-gray-500 dark:text-dark-400">
-                  {{ t('admin.users.allowAllGroupsHint') }}
-                </p>
-              </div>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="flex justify-end gap-3">
-          <button @click="closeAllowedGroupsModal" type="button" class="btn btn-secondary">
-            {{ t('common.cancel') }}
-          </button>
-          <button
-            @click="handleSaveAllowedGroups"
-            :disabled="savingAllowedGroups"
-            class="btn btn-primary"
-          >
-            <svg
-              v-if="savingAllowedGroups"
-              class="-ml-1 mr-2 h-4 w-4 animate-spin"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                class="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                stroke-width="4"
-              ></circle>
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              ></path>
-            </svg>
-            {{ savingAllowedGroups ? t('common.saving') : t('common.save') }}
-          </button>
-        </div>
-      </template>
-    </BaseDialog>
-
-    <!-- Deposit/Withdraw Modal -->
-    <BaseDialog
-      :show="showBalanceModal"
-      :title="balanceOperation === 'add' ? t('admin.users.deposit') : t('admin.users.withdraw')"
-      width="narrow"
-      @close="closeBalanceModal"
-    >
-      <form
-        v-if="balanceUser"
-        id="balance-form"
-        @submit.prevent="handleBalanceSubmit"
-        class="space-y-5"
-      >
-        <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
-          <div
-            class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
-          >
-            <span class="text-lg font-medium text-primary-700 dark:text-primary-300">
-              {{ balanceUser.email.charAt(0).toUpperCase() }}
-            </span>
-          </div>
-          <div class="flex-1">
-            <p class="font-medium text-gray-900 dark:text-white">{{ balanceUser.email }}</p>
-            <p class="text-sm text-gray-500 dark:text-dark-400">
-              {{ t('admin.users.currentBalance') }}: ${{ balanceUser.balance.toFixed(2) }}
-            </p>
-          </div>
-        </div>
-
-        <div>
-          <label class="input-label">
-            {{
-              balanceOperation === 'add'
-                ? t('admin.users.depositAmount')
-                : t('admin.users.withdrawAmount')
-            }}
-          </label>
-          <div class="relative">
-            <div
-              class="absolute left-3 top-1/2 -translate-y-1/2 font-medium text-gray-500 dark:text-dark-400"
-            >
-              $
-            </div>
-            <input
-              v-model.number="balanceForm.amount"
-              type="number"
-              step="0.01"
-              min="0.01"
-              required
-              class="input pl-8"
-              :placeholder="balanceOperation === 'add' ? '10.00' : '5.00'"
-            />
-          </div>
-          <p class="input-hint">
-            {{ t('admin.users.amountHint') }}
-          </p>
-        </div>
-
-        <div>
-          <label class="input-label">{{ t('admin.users.notes') }}</label>
-          <textarea
-            v-model="balanceForm.notes"
-            rows="3"
-            class="input"
-            :placeholder="
-              balanceOperation === 'add'
-                ? t('admin.users.depositNotesPlaceholder')
-                : t('admin.users.withdrawNotesPlaceholder')
-            "
-          ></textarea>
-          <p class="input-hint">{{ t('admin.users.notesOptional') }}</p>
-        </div>
-
-        <div
-          v-if="balanceForm.amount > 0"
-          class="rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-800/50 dark:bg-blue-900/20"
-        >
-          <div class="flex items-center justify-between text-sm">
-            <span class="text-blue-700 dark:text-blue-300">{{ t('admin.users.newBalance') }}:</span>
-            <span class="font-bold text-blue-900 dark:text-blue-100">
-              ${{ calculateNewBalance().toFixed(2) }}
-            </span>
-          </div>
-        </div>
-
-        <div
-          v-if="balanceOperation === 'subtract' && calculateNewBalance() < 0"
-          class="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
-        >
-          <div class="flex items-center gap-2 text-sm text-red-700 dark:text-red-300">
-            <svg
-              class="h-5 w-5 flex-shrink-0"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
-              />
-            </svg>
-            <span>{{ t('admin.users.insufficientBalance') }}</span>
-          </div>
-        </div>
-
-      </form>
-
-      <template #footer>
-        <div class="flex justify-end gap-3">
-          <button @click="closeBalanceModal" type="button" class="btn btn-secondary">
-            {{ t('common.cancel') }}
-          </button>
-          <button
-            type="submit"
-            form="balance-form"
-            :disabled="
-              balanceSubmitting ||
-              !balanceForm.amount ||
-              balanceForm.amount <= 0 ||
-              (balanceOperation === 'subtract' && calculateNewBalance() < 0)
-            "
-            class="btn"
-            :class="
-              balanceOperation === 'add'
-                ? 'bg-emerald-600 text-white hover:bg-emerald-700'
-                : 'btn-danger'
-            "
-          >
-            <svg
-              v-if="balanceSubmitting"
-              class="-ml-1 mr-2 h-4 w-4 animate-spin"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                class="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                stroke-width="4"
-              ></circle>
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              ></path>
-            </svg>
-            {{
-              balanceSubmitting
-                ? balanceOperation === 'add'
-                  ? t('admin.users.depositing')
-                  : t('admin.users.withdrawing')
-                : balanceOperation === 'add'
-                  ? t('admin.users.confirmDeposit')
-                  : t('admin.users.confirmWithdraw')
-            }}
-          </button>
-        </div>
-      </template>
-    </BaseDialog>
-
-    <!-- Delete Confirmation Dialog -->
-    <ConfirmDialog
-      :show="showDeleteDialog"
-      :title="t('admin.users.deleteUser')"
-      :message="t('admin.users.deleteConfirm', { email: deletingUser?.email })"
-      :confirm-text="t('common.delete')"
-      :cancel-text="t('common.cancel')"
-      :danger="true"
-      @confirm="confirmDelete"
-      @cancel="showDeleteDialog = false"
-    />
-
-    <!-- User Attributes Config Modal -->
-    <UserAttributesConfigModal
-      :show="showAttributesModal"
-      @close="handleAttributesModalClose"
-    />
+    <ConfirmDialog :show="showDeleteDialog" :title="t('admin.users.deleteUser')" :message="t('admin.users.deleteConfirm', { email: deletingUser?.email })" :confirm-text="t('common.delete')" :cancel-text="t('common.cancel')" :danger="true" @confirm="confirmDelete" @cancel="showDeleteDialog = false" />
+    <UserCreateModal :show="showCreateModal" @close="showCreateModal = false" @success="loadUsers" />
+    <UserEditModal :show="showEditModal" :user="editingUser" @close="closeEditModal" @success="loadUsers" />
+    <UserApiKeysModal :show="showApiKeysModal" :user="viewingUser" @close="closeApiKeysModal" />
+    <UserAllowedGroupsModal :show="showAllowedGroupsModal" :user="allowedGroupsUser" @close="closeAllowedGroupsModal" @success="loadUsers" />
+    <UserBalanceModal :show="showBalanceModal" :user="balanceUser" :operation="balanceOperation" @close="closeBalanceModal" @success="loadUsers" />
+    <UserAttributesConfigModal :show="showAttributesModal" @close="handleAttributesModalClose" />
   </AppLayout>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, onUnmounted, type ComponentPublicInstance } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
-import { useClipboard } from '@/composables/useClipboard'
 import { formatDateTime } from '@/utils/format'
-
-const { t } = useI18n()
 import { adminAPI } from '@/api/admin'
-import type { User, ApiKey, Group, UserAttributeValuesMap, UserAttributeDefinition } from '@/types'
+import type { User, UserAttributeDefinition } from '@/types'
 import type { BatchUserUsageStats } from '@/api/admin/dashboard'
 import type { Column } from '@/components/common/types'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
 import Pagination from '@/components/common/Pagination.vue'
-import BaseDialog from '@/components/common/BaseDialog.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
-import EmptyState from '@/components/common/EmptyState.vue'
-import GroupBadge from '@/components/common/GroupBadge.vue'
 import Select from '@/components/common/Select.vue'
 import UserAttributesConfigModal from '@/components/user/UserAttributesConfigModal.vue'
-import UserAttributeForm from '@/components/user/UserAttributeForm.vue'
+import UserCreateModal from '@/components/admin/user/UserCreateModal.vue'
+import UserEditModal from '@/components/admin/user/UserEditModal.vue'
+import UserApiKeysModal from '@/components/admin/user/UserApiKeysModal.vue'
+import UserAllowedGroupsModal from '@/components/admin/user/UserAllowedGroupsModal.vue'
+import UserBalanceModal from '@/components/admin/user/UserBalanceModal.vue'
 
-const appStore = useAppStore()
-const { copyToClipboard: clipboardCopy } = useClipboard()
+const { t } = useI18n(); const appStore = useAppStore()
+const attributeDefinitions = ref<UserAttributeDefinition[]>([]); const userAttributeValues = ref<Record<number, Record<number, string>>>({}); const usageStats = ref<Record<string, BatchUserUsageStats>>({})
+const users = ref<User[]>([]); const loading = ref(false); const searchQuery = ref('')
+const filters = reactive({ role: '', status: '' }); const activeAttributeFilters = reactive<Record<number, string>>({})
+const visibleFilters = reactive<Set<string>>(new Set()); const showFilterDropdown = ref(false); const showColumnDropdown = ref(false)
+const filterDropdownRef = ref<HTMLElement | null>(null); const columnDropdownRef = ref<HTMLElement | null>(null)
+const hiddenColumns = reactive<Set<string>>(new Set()); const pagination = reactive({ page: 1, page_size: 20, total: 0, pages: 0 })
+let abortController: AbortController | null = null; let searchT: any = null
 
-// Generate dynamic attribute columns from enabled definitions
-const attributeColumns = computed<Column[]>(() =>
-  attributeDefinitions.value
-    .filter(def => def.enabled)
-    .map(def => ({
-      key: `attr_${def.id}`,
-      label: def.name,
-      sortable: false
-    }))
-)
+const showCreateModal = ref(false); const showEditModal = ref(false); const showDeleteDialog = ref(false); const showApiKeysModal = ref(false); const showAttributesModal = ref(false)
+const editingUser = ref<User | null>(null); const deletingUser = ref<User | null>(null); const viewingUser = ref<User | null>(null)
+const activeMenuId = ref<number | null>(null); const menuPosition = ref<{ top: number; left: number } | null>(null); const actionButtonRefs = ref<Map<number, HTMLElement>>(new Map())
+const showAllowedGroupsModal = ref(false); const allowedGroupsUser = ref<User | null>(null); const showBalanceModal = ref(false); const balanceUser = ref<User | null>(null); const balanceOperation = ref<'add' | 'subtract'>('add')
 
-// Get formatted attribute value for display in table
-const getAttributeValue = (userId: number, attrId: number): string => {
-  const userAttrs = userAttributeValues.value[userId]
-  if (!userAttrs) return '-'
-  const value = userAttrs[attrId]
-  if (!value) return '-'
-
-  // Find definition for this attribute
-  const def = attributeDefinitions.value.find(d => d.id === attrId)
-  if (!def) return value
-
-  // Format based on type
-  if (def.type === 'multi_select' && value) {
-    try {
-      const arr = JSON.parse(value)
-      if (Array.isArray(arr)) {
-        // Map values to labels
-        return arr.map(v => {
-          const opt = def.options?.find(o => o.value === v)
-          return opt?.label || v
-        }).join(', ')
-      }
-    } catch {
-      return value
-    }
-  }
-
-  if (def.type === 'select' && value && def.options) {
-    const opt = def.options.find(o => o.value === value)
-    return opt?.label || value
-  }
-
-  return value
-}
-
-// All possible columns (for column settings)
+const attributeColumns = computed<Column[]>(() => attributeDefinitions.value.filter(d => d.enabled).map(d => ({ key: `attr_${d.id}`, label: d.name, sortable: false })))
 const allColumns = computed<Column[]>(() => [
   { key: 'email', label: t('admin.users.columns.user'), sortable: true },
   { key: 'username', label: t('admin.users.columns.username'), sortable: true },
-  { key: 'notes', label: t('admin.users.columns.notes'), sortable: false },
-  // Dynamic attribute columns
   ...attributeColumns.value,
   { key: 'role', label: t('admin.users.columns.role'), sortable: true },
-  { key: 'subscriptions', label: t('admin.users.columns.subscriptions'), sortable: false },
   { key: 'balance', label: t('admin.users.columns.balance'), sortable: true },
-  { key: 'usage', label: t('admin.users.columns.usage'), sortable: false },
-  { key: 'concurrency', label: t('admin.users.columns.concurrency'), sortable: true },
   { key: 'status', label: t('admin.users.columns.status'), sortable: true },
   { key: 'created_at', label: t('admin.users.columns.created'), sortable: true },
   { key: 'actions', label: t('admin.users.columns.actions'), sortable: false }
 ])
+const toggleableColumns = computed(() => allColumns.value.filter(c => c.key !== 'email' && c.key !== 'actions'))
+const columns = computed<Column[]>(() => allColumns.value.filter(c => c.key === 'email' || c.key === 'actions' || !hiddenColumns.has(c.key)))
+const filterableAttributes = computed(() => attributeDefinitions.value.filter(d => d.enabled))
+const builtInFilters = computed(() => [{ key: 'role', name: t('admin.users.columns.role') }, { key: 'status', name: t('admin.users.columns.status') }])
 
-// Columns that can be toggled (exclude email and actions which are always visible)
-const toggleableColumns = computed(() =>
-  allColumns.value.filter(col => col.key !== 'email' && col.key !== 'actions')
-)
-
-// Hidden columns (stored in Set - columns NOT in this set are visible)
-// This way, new columns are visible by default
-const hiddenColumns = reactive<Set<string>>(new Set())
-
-// Default hidden columns (columns hidden by default on first load)
-const DEFAULT_HIDDEN_COLUMNS = ['notes', 'subscriptions', 'usage', 'concurrency']
-
-// localStorage key for column settings
-const HIDDEN_COLUMNS_KEY = 'user-hidden-columns'
-
-// Load saved column settings
-const loadSavedColumns = () => {
-  try {
-    const saved = localStorage.getItem(HIDDEN_COLUMNS_KEY)
-    if (saved) {
-      const parsed = JSON.parse(saved) as string[]
-      parsed.forEach(key => hiddenColumns.add(key))
-    } else {
-      // Use default hidden columns on first load
-      DEFAULT_HIDDEN_COLUMNS.forEach(key => hiddenColumns.add(key))
-    }
-  } catch (e) {
-    console.error('Failed to load saved columns:', e)
-    DEFAULT_HIDDEN_COLUMNS.forEach(key => hiddenColumns.add(key))
-  }
+const getAttributeDefinition = (id: number) => attributeDefinitions.value.find(d => d.id === id)
+const getAttributeDefinitionName = (id: number) => getAttributeDefinition(id)?.name || String(id)
+const getAttributeValue = (userId: number, attrId: number): string => {
+  const v = userAttributeValues.value[userId]?.[attrId]; if (!v) return '-'; const d = getAttributeDefinition(attrId); if (!d) return v
+  if (d.type === 'multi_select') try { const a = JSON.parse(v); if(Array.isArray(a)) return a.map(x => d.options?.find(o => o.value === x)?.label || x).join(', ') } catch { return v }
+  return d.options?.find(o => o.value === v)?.label || v
 }
 
-// Save column settings to localStorage
-const saveColumnsToStorage = () => {
-  try {
-    localStorage.setItem(HIDDEN_COLUMNS_KEY, JSON.stringify([...hiddenColumns]))
-  } catch (e) {
-    console.error('Failed to save columns:', e)
-  }
-}
+const loadSavedColumns = () => { try { const s = localStorage.getItem('user-hidden-columns'); if(s) JSON.parse(s).forEach((k:string) => hiddenColumns.add(k)); else ['username'].forEach(k => hiddenColumns.add(k)) } catch { hiddenColumns.add('username') } }
+const saveColumnsToStorage = () => localStorage.setItem('user-hidden-columns', JSON.stringify([...hiddenColumns]))
+const toggleColumn = (k: string) => { if(hiddenColumns.has(k)) hiddenColumns.delete(k); else hiddenColumns.add(k); saveColumnsToStorage() }
+const isColumnVisible = (k: string) => !hiddenColumns.has(k)
 
-// Toggle column visibility
-const toggleColumn = (key: string) => {
-  if (hiddenColumns.has(key)) {
-    hiddenColumns.delete(key)
-  } else {
-    hiddenColumns.add(key)
-  }
-  saveColumnsToStorage()
-}
-
-// Check if column is visible (not in hidden set)
-const isColumnVisible = (key: string) => !hiddenColumns.has(key)
-
-// Filtered columns based on visibility
-const columns = computed<Column[]>(() =>
-  allColumns.value.filter(col =>
-    col.key === 'email' || col.key === 'actions' || !hiddenColumns.has(col.key)
-  )
-)
-
-const users = ref<User[]>([])
-const loading = ref(false)
-const searchQuery = ref('')
-
-// Filter values (role, status, and custom attributes)
-const filters = reactive({
-  role: '',
-  status: ''
-})
-const activeAttributeFilters = reactive<Record<number, string>>({})
-
-// Visible filters tracking (which filters are shown in the UI)
-// Keys: 'role', 'status', 'attr_${id}'
-const visibleFilters = reactive<Set<string>>(new Set())
-
-// Dropdown states
-const showFilterDropdown = ref(false)
-const showColumnDropdown = ref(false)
-
-// Dropdown refs for click outside detection
-const filterDropdownRef = ref<HTMLElement | null>(null)
-const columnDropdownRef = ref<HTMLElement | null>(null)
-
-// localStorage keys
-const FILTER_VALUES_KEY = 'user-filter-values'
-const VISIBLE_FILTERS_KEY = 'user-visible-filters'
-
-// All filterable attribute definitions (enabled attributes)
-const filterableAttributes = computed(() =>
-  attributeDefinitions.value.filter(def => def.enabled)
-)
-
-// Built-in filter definitions
-const builtInFilters = computed(() => [
-  { key: 'role', name: t('admin.users.columns.role'), type: 'select' as const },
-  { key: 'status', name: t('admin.users.columns.status'), type: 'select' as const }
-])
-
-// Load saved filters from localStorage
 const loadSavedFilters = () => {
-  try {
-    // Load visible filters
-    const savedVisible = localStorage.getItem(VISIBLE_FILTERS_KEY)
-    if (savedVisible) {
-      const parsed = JSON.parse(savedVisible) as string[]
-      parsed.forEach(key => visibleFilters.add(key))
-    }
-    // Load filter values
-    const savedValues = localStorage.getItem(FILTER_VALUES_KEY)
-    if (savedValues) {
-      const parsed = JSON.parse(savedValues)
-      if (parsed.role) filters.role = parsed.role
-      if (parsed.status) filters.status = parsed.status
-      if (parsed.attributes) {
-        Object.assign(activeAttributeFilters, parsed.attributes)
-      }
-    }
-  } catch (e) {
-    console.error('Failed to load saved filters:', e)
-  }
+  try { const v = localStorage.getItem('user-visible-filters'); if(v) JSON.parse(v).forEach((k:string) => visibleFilters.add(k))
+    const val = localStorage.getItem('user-filter-values'); if(val) { const p = JSON.parse(val); filters.role = p.role || ''; filters.status = p.status || ''; if(p.attributes) Object.assign(activeAttributeFilters, p.attributes) }
+  } catch {}
 }
+const saveFiltersToStorage = () => { localStorage.setItem('user-visible-filters', JSON.stringify([...visibleFilters])); localStorage.setItem('user-filter-values', JSON.stringify({ role: filters.role, status: filters.status, attributes: activeAttributeFilters })) }
 
-// Save filters to localStorage
-const saveFiltersToStorage = () => {
-  try {
-    // Save visible filters
-    localStorage.setItem(VISIBLE_FILTERS_KEY, JSON.stringify([...visibleFilters]))
-    // Save filter values
-    const values = {
-      role: filters.role,
-      status: filters.status,
-      attributes: activeAttributeFilters
-    }
-    localStorage.setItem(FILTER_VALUES_KEY, JSON.stringify(values))
-  } catch (e) {
-    console.error('Failed to save filters:', e)
-  }
-}
-
-// Get attribute definition by ID
-const getAttributeDefinition = (attrId: number): UserAttributeDefinition | undefined => {
-  return attributeDefinitions.value.find(d => d.id === attrId)
-}
-const usageStats = ref<Record<string, BatchUserUsageStats>>({})
-// User attribute definitions and values
-const attributeDefinitions = ref<UserAttributeDefinition[]>([])
-const userAttributeValues = ref<Record<number, Record<number, string>>>({})
-const pagination = reactive({
-  page: 1,
-  page_size: 20,
-  total: 0,
-  pages: 0
-})
-
-const showCreateModal = ref(false)
-const showEditModal = ref(false)
-const showDeleteDialog = ref(false)
-const showApiKeysModal = ref(false)
-const showAttributesModal = ref(false)
-const submitting = ref(false)
-const editingUser = ref<User | null>(null)
-const deletingUser = ref<User | null>(null)
-const viewingUser = ref<User | null>(null)
-const userApiKeys = ref<ApiKey[]>([])
-const loadingApiKeys = ref(false)
-const passwordCopied = ref(false)
-let abortController: AbortController | null = null
-
-// Action Menu State
-const activeMenuId = ref<number | null>(null)
-const menuPosition = ref<{ top: number; left: number } | null>(null)
-const actionButtonRefs = ref<Map<number, HTMLElement>>(new Map())
-
-const setActionButtonRef = (userId: number, el: Element | ComponentPublicInstance | null) => {
-  if (el instanceof HTMLElement) {
-    actionButtonRefs.value.set(userId, el)
-  } else {
-    actionButtonRefs.value.delete(userId)
-  }
-}
-
-const openActionMenu = (user: User) => {
-  if (activeMenuId.value === user.id) {
-    closeActionMenu()
-  } else {
-    const buttonEl = actionButtonRefs.value.get(user.id)
-    if (buttonEl) {
-      const rect = buttonEl.getBoundingClientRect()
-      const menuWidth = 192
-      const menuHeight = 240
-      const padding = 8
-      const viewportWidth = window.innerWidth
-      const viewportHeight = window.innerHeight
-      const left = Math.min(
-        Math.max(rect.right - menuWidth, padding),
-        Math.max(viewportWidth - menuWidth - padding, padding)
-      )
-      let top = rect.bottom + 4
-      if (top + menuHeight > viewportHeight - padding) {
-        top = Math.max(rect.top - menuHeight - 4, padding)
-      }
-      // Position menu near the trigger, clamped to viewport
-      menuPosition.value = {
-        top,
-        left
-      }
-    }
-    activeMenuId.value = user.id
-  }
-}
-
-const closeActionMenu = () => {
-  activeMenuId.value = null
-  menuPosition.value = null
-}
-
-// Close menu when clicking outside
-const handleClickOutside = (event: MouseEvent) => {
-  const target = event.target as HTMLElement
-  if (!target.closest('.action-menu-trigger') && !target.closest('.action-menu-content')) {
-    closeActionMenu()
-  }
-  // Close filter dropdown when clicking outside
-  if (filterDropdownRef.value && !filterDropdownRef.value.contains(target)) {
-    showFilterDropdown.value = false
-  }
-  // Close column dropdown when clicking outside
-  if (columnDropdownRef.value && !columnDropdownRef.value.contains(target)) {
-    showColumnDropdown.value = false
-  }
-}
-
-// Allowed groups modal state
-const showAllowedGroupsModal = ref(false)
-const allowedGroupsUser = ref<User | null>(null)
-const standardGroups = ref<Group[]>([])
-const selectedGroupIds = ref<number[]>([])
-const loadingGroups = ref(false)
-const savingAllowedGroups = ref(false)
-
-// Balance (Deposit/Withdraw) modal state
-const showBalanceModal = ref(false)
-const balanceUser = ref<User | null>(null)
-const balanceOperation = ref<'add' | 'subtract'>('add')
-const balanceSubmitting = ref(false)
-const balanceForm = reactive({
-  amount: 0,
-  notes: ''
-})
-
-const createForm = reactive({
-  email: '',
-  password: '',
-  username: '',
-  notes: '',
-  balance: 0,
-  concurrency: 1
-})
-
-const editForm = reactive({
-  email: '',
-  password: '',
-  username: '',
-  notes: '',
-  concurrency: 1,
-  customAttributes: {} as UserAttributeValuesMap
-})
-const editPasswordCopied = ref(false)
-
-// 计算剩余天数
-const getDaysRemaining = (expiresAt: string): number => {
-  const now = new Date()
-  const expires = new Date(expiresAt)
-  const diffMs = expires.getTime() - now.getTime()
-  return Math.ceil(diffMs / (1000 * 60 * 60 * 24))
-}
-
-const generateRandomPasswordStr = () => {
-  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%^&*'
-  let password = ''
-  for (let i = 0; i < 16; i++) {
-    password += chars.charAt(Math.floor(Math.random() * chars.length))
-  }
-  return password
-}
-
-const generateRandomPassword = () => {
-  createForm.password = generateRandomPasswordStr()
-}
-
-const generateEditPassword = () => {
-  editForm.password = generateRandomPasswordStr()
-}
-
-const copyPassword = async () => {
-  if (!createForm.password) return
-  const success = await clipboardCopy(createForm.password, t('admin.users.passwordCopied'))
-  if (success) {
-    passwordCopied.value = true
-    setTimeout(() => {
-      passwordCopied.value = false
-    }, 2000)
-  }
-}
-
-const copyEditPassword = async () => {
-  if (!editForm.password) return
-  const success = await clipboardCopy(editForm.password, t('admin.users.passwordCopied'))
-  if (success) {
-    editPasswordCopied.value = true
-    setTimeout(() => {
-      editPasswordCopied.value = false
-    }, 2000)
-  }
-}
-
-const loadAttributeDefinitions = async () => {
-  try {
-    attributeDefinitions.value = await adminAPI.userAttributes.listEnabledDefinitions()
-  } catch (e) {
-    console.error('Failed to load attribute definitions:', e)
-  }
-}
-
-// Handle attributes modal close - reload definitions and users
-const handleAttributesModalClose = async () => {
-  showAttributesModal.value = false
-  await loadAttributeDefinitions()
-  loadUsers()
-}
+const loadAttributeDefinitions = async () => { try { attributeDefinitions.value = await adminAPI.userAttributes.listEnabledDefinitions() } catch {} }
+const handleAttributesModalClose = async () => { showAttributesModal.value = false; await loadAttributeDefinitions(); loadUsers() }
 
 const loadUsers = async () => {
-  abortController?.abort()
-  const currentAbortController = new AbortController()
-  abortController = currentAbortController
-  const { signal } = currentAbortController
-  loading.value = true
+  abortController?.abort(); const c = new AbortController(); abortController = c; loading.value = true
   try {
-    // Build attribute filters from active filters
-    const attrFilters: Record<number, string> = {}
-    for (const [attrId, value] of Object.entries(activeAttributeFilters)) {
-      if (value) {
-        attrFilters[Number(attrId)] = value
-      }
-    }
-
-    const response = await adminAPI.users.list(
-      pagination.page,
-      pagination.page_size,
-      {
-        role: filters.role as any,
-        status: filters.status as any,
-        search: searchQuery.value || undefined,
-        attributes: Object.keys(attrFilters).length > 0 ? attrFilters : undefined
-      },
-      { signal }
-    )
-    if (signal.aborted) {
-      return
-    }
-    users.value = response.items
-    pagination.total = response.total
-    pagination.pages = response.pages
-
-    // Load usage stats and attribute values for all users in the list
-    if (response.items.length > 0) {
-      const userIds = response.items.map((u) => u.id)
-      // Load usage stats
-      try {
-        const usageResponse = await adminAPI.dashboard.getBatchUsersUsage(userIds)
-        if (signal.aborted) {
-          return
-        }
-        usageStats.value = usageResponse.stats
-      } catch (e) {
-        if (signal.aborted) {
-          return
-        }
-        console.error('Failed to load usage stats:', e)
-      }
-      // Load attribute values
-      if (attributeDefinitions.value.length > 0) {
-        try {
-          const attrResponse = await adminAPI.userAttributes.getBatchUserAttributes(userIds)
-          if (signal.aborted) {
-            return
-          }
-          userAttributeValues.value = attrResponse.attributes
-        } catch (e) {
-          if (signal.aborted) {
-            return
-          }
-          console.error('Failed to load user attribute values:', e)
-        }
-      }
-    }
-  } catch (error) {
-    const errorInfo = error as { name?: string; code?: string }
-    if (errorInfo?.name === 'AbortError' || errorInfo?.name === 'CanceledError' || errorInfo?.code === 'ERR_CANCELED') {
-      return
-    }
-    appStore.showError(t('admin.users.failedToLoad'))
-    console.error('Error loading users:', error)
-  } finally {
-    if (abortController === currentAbortController) {
-      loading.value = false
-    }
-  }
+    const af: any = {}; for(const [id, v] of Object.entries(activeAttributeFilters)) if(v) af[id] = v
+    const res = await adminAPI.users.list(pagination.page, pagination.page_size, { role: filters.role as any, status: filters.status as any, search: searchQuery.value || undefined, attributes: Object.keys(af).length > 0 ? af : undefined }, { signal: c.signal })
+    if(c.signal.aborted) return; users.value = res.items; pagination.total = res.total; pagination.pages = res.pages
+    if(res.items.length > 0) { const ids = res.items.map(u => u.id); adminAPI.dashboard.getBatchUsersUsage(ids).then(r => { if(!c.signal.aborted) usageStats.value = r.stats }); if(attributeDefinitions.value.length > 0) adminAPI.userAttributes.getBatchUserAttributes(ids).then(r => { if(!c.signal.aborted) userAttributeValues.value = r.attributes }) }
+  } catch(e:any) { if(e.name !== 'AbortError' && e.code !== 'ERR_CANCELED') appStore.showError(t('admin.users.failedToLoad')) }
+  finally { if (abortController === c) loading.value = false }
 }
 
-let searchTimeout: ReturnType<typeof setTimeout>
-const handleSearch = () => {
-  clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => {
-    pagination.page = 1
-    loadUsers()
-  }, 300)
-}
-
-const handlePageChange = (page: number) => {
-  pagination.page = page
-  loadUsers()
-}
-
-const handlePageSizeChange = (pageSize: number) => {
-  pagination.page_size = pageSize
-  pagination.page = 1
-  loadUsers()
-}
-
-// Filter helpers
-const getAttributeDefinitionName = (attrId: number): string => {
-  const def = attributeDefinitions.value.find(d => d.id === attrId)
-  return def?.name || String(attrId)
-}
-
-// Toggle a built-in filter (role/status)
-const toggleBuiltInFilter = (key: string) => {
-  if (visibleFilters.has(key)) {
-    visibleFilters.delete(key)
-    if (key === 'role') filters.role = ''
-    if (key === 'status') filters.status = ''
-  } else {
-    visibleFilters.add(key)
-  }
-  saveFiltersToStorage()
-  loadUsers()
-}
-
-// Toggle a custom attribute filter
-const toggleAttributeFilter = (attr: UserAttributeDefinition) => {
-  const key = `attr_${attr.id}`
-  if (visibleFilters.has(key)) {
-    visibleFilters.delete(key)
-    delete activeAttributeFilters[attr.id]
-  } else {
-    visibleFilters.add(key)
-    activeAttributeFilters[attr.id] = ''
-  }
-  saveFiltersToStorage()
-  loadUsers()
-}
-
-const updateAttributeFilter = (attrId: number, value: string) => {
-  activeAttributeFilters[attrId] = value
-}
-
-// Apply filter and save to localStorage
-const applyFilter = () => {
-  saveFiltersToStorage()
-  loadUsers()
-}
-
-const closeCreateModal = () => {
-  showCreateModal.value = false
-  createForm.email = ''
-  createForm.password = ''
-  createForm.username = ''
-  createForm.notes = ''
-  createForm.balance = 0
-  createForm.concurrency = 1
-  passwordCopied.value = false
-}
-
-const handleCreateUser = async () => {
-  submitting.value = true
-  try {
-    await adminAPI.users.create(createForm)
-    appStore.showSuccess(t('admin.users.userCreated'))
-    closeCreateModal()
-    loadUsers()
-  } catch (error: any) {
-    appStore.showError(
-      error.response?.data?.message ||
-        error.response?.data?.detail ||
-        t('admin.users.failedToCreate')
-    )
-    console.error('Error creating user:', error)
-  } finally {
-    submitting.value = false
-  }
-}
-
-const handleEdit = (user: User) => {
-  editingUser.value = user
-  editForm.email = user.email
-  editForm.password = ''
-  editForm.username = user.username || ''
-  editForm.notes = user.notes || ''
-  editForm.concurrency = user.concurrency
-  editForm.customAttributes = {}
-  editPasswordCopied.value = false
-  showEditModal.value = true
-}
-
-const closeEditModal = () => {
-  showEditModal.value = false
-  editingUser.value = null
-  editForm.password = ''
-  editForm.customAttributes = {}
-  editPasswordCopied.value = false
-}
-
-const handleUpdateUser = async () => {
-  if (!editingUser.value) return
-
-  submitting.value = true
-  try {
-    const updateData: Record<string, any> = {
-      email: editForm.email,
-      username: editForm.username,
-      notes: editForm.notes,
-      concurrency: editForm.concurrency
-    }
-    if (editForm.password.trim()) {
-      updateData.password = editForm.password.trim()
-    }
-
-    await adminAPI.users.update(editingUser.value.id, updateData)
-
-    // Save custom attributes if any
-    if (Object.keys(editForm.customAttributes).length > 0) {
-      await adminAPI.userAttributes.updateUserAttributeValues(
-        editingUser.value.id,
-        editForm.customAttributes
-      )
-    }
-
-    appStore.showSuccess(t('admin.users.userUpdated'))
-    closeEditModal()
-    loadUsers()
-  } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.users.failedToUpdate'))
-    console.error('Error updating user:', error)
-  } finally {
-    submitting.value = false
-  }
-}
+const handleSearch = () => { clearTimeout(searchT); searchT = setTimeout(() => { pagination.page = 1; loadUsers() }, 300) }
+const handlePageChange = (p:number) => { pagination.page = p; loadUsers() }
+const handlePageSizeChange = (s:number) => { pagination.page_size = s; pagination.page = 1; loadUsers() }
+const toggleBuiltInFilter = (k:string) => { if(visibleFilters.has(k)) { visibleFilters.delete(k); if(k === 'role') filters.role = ''; if(k === 'status') filters.status = '' } else visibleFilters.add(k); saveFiltersToStorage(); loadUsers() }
+const toggleAttributeFilter = (a:any) => { const k = `attr_${a.id}`; if(visibleFilters.has(k)) { visibleFilters.delete(k); delete activeAttributeFilters[a.id] } else { visibleFilters.add(k); activeAttributeFilters[a.id] = '' }; saveFiltersToStorage(); loadUsers() }
+const updateAttributeFilter = (id:number, v:string) => activeAttributeFilters[id] = v
+const applyFilter = () => { saveFiltersToStorage(); loadUsers() }
 
+const handleEdit = (u:User) => { editingUser.value = u; showEditModal.value = true }
+const closeEditModal = () => { showEditModal.value = false; editingUser.value = null }
 const handleToggleStatus = async (user: User) => {
-  const newStatus = user.status === 'active' ? 'disabled' : 'active'
-  try {
-    await adminAPI.users.toggleStatus(user.id, newStatus)
-    appStore.showSuccess(
-      newStatus === 'active' ? t('admin.users.userEnabled') : t('admin.users.userDisabled')
-    )
-    loadUsers()
-  } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.users.failedToToggle'))
-    console.error('Error toggling user status:', error)
+  const next = user.status === 'active' ? 'disabled' : 'active'
+  try { await adminAPI.users.toggleStatus(user.id, next as any); appStore.showSuccess(t('common.success')); loadUsers() } catch {}
+}
+const handleViewApiKeys = (u:User) => { viewingUser.value = u; showApiKeysModal.value = true }
+const closeApiKeysModal = () => { showApiKeysModal.value = false; viewingUser.value = null }
+const handleAllowedGroups = (u:User) => { allowedGroupsUser.value = u; showAllowedGroupsModal.value = true }
+const closeAllowedGroupsModal = () => { showAllowedGroupsModal.value = false; allowedGroupsUser.value = null }
+const handleDelete = (u:User) => { deletingUser.value = u; showDeleteDialog.value = true }
+const confirmDelete = async () => { if(!deletingUser.value) return; try { await adminAPI.users.delete(deletingUser.value.id); appStore.showSuccess(t('common.success')); showDeleteDialog.value = false; loadUsers() } catch {} }
+const handleDeposit = (u:User) => { balanceUser.value = u; balanceOperation.value = 'add'; showBalanceModal.value = true }
+const handleWithdraw = (u:User) => { balanceUser.value = u; balanceOperation.value = 'subtract'; showBalanceModal.value = true }
+const closeBalanceModal = () => { showBalanceModal.value = false; balanceUser.value = null }
+
+const setActionButtonRef = (id:number, el:any) => { if(el instanceof HTMLElement) actionButtonRefs.value.set(id, el); else actionButtonRefs.value.delete(id) }
+const openActionMenu = (u:User) => {
+  if(activeMenuId.value === u.id) closeActionMenu()
+  else {
+    const b = actionButtonRefs.value.get(u.id)
+    if(b) {
+      const r = b.getBoundingClientRect()
+      menuPosition.value = { top: Math.min(r.bottom + 4, window.innerHeight - 250), left: Math.min(r.right - 192, window.innerWidth - 200) }
+    }
+    activeMenuId.value = u.id
   }
 }
-
-const handleViewApiKeys = async (user: User) => {
-  viewingUser.value = user
-  showApiKeysModal.value = true
-  loadingApiKeys.value = true
-  userApiKeys.value = []
-
-  try {
-    const response = await adminAPI.users.getUserApiKeys(user.id)
-    userApiKeys.value = response.items || []
-  } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.users.failedToLoadApiKeys'))
-    console.error('Error loading user API keys:', error)
-  } finally {
-    loadingApiKeys.value = false
-  }
+const closeActionMenu = () => { activeMenuId.value = null; menuPosition.value = null }
+const handleClickOutside = (e:MouseEvent) => {
+  const t = e.target as HTMLElement
+  if (!t.closest('.action-menu-trigger') && !t.closest('.action-menu-content')) closeActionMenu()
+  if (filterDropdownRef.value && !filterDropdownRef.value.contains(t)) showFilterDropdown.value = false
+  if (columnDropdownRef.value && !columnDropdownRef.value.contains(t)) showColumnDropdown.value = false
 }
 
-const closeApiKeysModal = () => {
-  showApiKeysModal.value = false
-  viewingUser.value = null
-  userApiKeys.value = []
-}
-
-// Allowed Groups functions
-const handleAllowedGroups = async (user: User) => {
-  allowedGroupsUser.value = user
-  showAllowedGroupsModal.value = true
-  loadingGroups.value = true
-  standardGroups.value = []
-  selectedGroupIds.value = user.allowed_groups ? [...user.allowed_groups] : []
-
-  try {
-    const allGroups = await adminAPI.groups.getAll()
-    // Only show standard type groups (subscription type groups are managed in /admin/subscriptions)
-    standardGroups.value = allGroups.filter(
-      (g) => g.subscription_type === 'standard' && g.status === 'active'
-    )
-  } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.users.failedToLoadGroups'))
-    console.error('Error loading groups:', error)
-  } finally {
-    loadingGroups.value = false
-  }
-}
-
-const closeAllowedGroupsModal = () => {
-  showAllowedGroupsModal.value = false
-  allowedGroupsUser.value = null
-  standardGroups.value = []
-  selectedGroupIds.value = []
-}
-
-const handleSaveAllowedGroups = async () => {
-  if (!allowedGroupsUser.value) return
-
-  savingAllowedGroups.value = true
-  try {
-    // null means allow all non-exclusive groups, empty array also means allow all
-    const allowedGroups = selectedGroupIds.value.length > 0 ? selectedGroupIds.value : null
-    await adminAPI.users.update(allowedGroupsUser.value.id, { allowed_groups: allowedGroups })
-    appStore.showSuccess(t('admin.users.allowedGroupsUpdated'))
-    closeAllowedGroupsModal()
-    loadUsers()
-  } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.users.failedToUpdateAllowedGroups'))
-    console.error('Error updating allowed groups:', error)
-  } finally {
-    savingAllowedGroups.value = false
-  }
-}
-
-const handleDelete = (user: User) => {
-  deletingUser.value = user
-  showDeleteDialog.value = true
-}
-
-const confirmDelete = async () => {
-  if (!deletingUser.value) return
-
-  try {
-    await adminAPI.users.delete(deletingUser.value.id)
-    appStore.showSuccess(t('admin.users.userDeleted'))
-    showDeleteDialog.value = false
-    deletingUser.value = null
-    loadUsers()
-  } catch (error: any) {
-    appStore.showError(
-      error.response?.data?.message ||
-        error.response?.data?.detail ||
-        t('admin.users.failedToDelete')
-    )
-    console.error('Error deleting user:', error)
-  }
-}
-
-const handleDeposit = (user: User) => {
-  balanceUser.value = user
-  balanceOperation.value = 'add'
-  balanceForm.amount = 0
-  balanceForm.notes = ''
-  showBalanceModal.value = true
-}
-
-const handleWithdraw = (user: User) => {
-  balanceUser.value = user
-  balanceOperation.value = 'subtract'
-  balanceForm.amount = 0
-  balanceForm.notes = ''
-  showBalanceModal.value = true
-}
-
-const closeBalanceModal = () => {
-  showBalanceModal.value = false
-  balanceUser.value = null
-  balanceForm.amount = 0
-  balanceForm.notes = ''
-}
-
-const calculateNewBalance = () => {
-  if (!balanceUser.value) return 0
-  if (balanceOperation.value === 'add') {
-    return balanceUser.value.balance + balanceForm.amount
-  } else {
-    return balanceUser.value.balance - balanceForm.amount
-  }
-}
-
-const handleBalanceSubmit = async () => {
-  if (!balanceUser.value || balanceForm.amount <= 0) return
-
-  balanceSubmitting.value = true
-  try {
-    await adminAPI.users.updateBalance(
-      balanceUser.value.id,
-      balanceForm.amount,
-      balanceOperation.value,
-      balanceForm.notes
-    )
-
-    const successMsg =
-      balanceOperation.value === 'add'
-        ? t('admin.users.depositSuccess')
-        : t('admin.users.withdrawSuccess')
-
-    appStore.showSuccess(successMsg)
-    closeBalanceModal()
-    loadUsers()
-  } catch (error: any) {
-    const errorMsg =
-      balanceOperation.value === 'add'
-        ? t('admin.users.failedToDeposit')
-        : t('admin.users.failedToWithdraw')
-
-    appStore.showError(error.response?.data?.detail || errorMsg)
-    console.error('Error updating balance:', error)
-  } finally {
-    balanceSubmitting.value = false
-  }
-}
-
-onMounted(async () => {
-  await loadAttributeDefinitions()
-  loadSavedFilters()
-  loadSavedColumns()
-  loadUsers()
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
-</script>
+onMounted(async () => { await loadAttributeDefinitions(); loadSavedFilters(); loadSavedColumns(); loadUsers(); document.addEventListener('click', handleClickOutside) })
+onUnmounted(() => { abortController?.abort(); document.removeEventListener('click', handleClickOutside) })
+</script>
\ No newline at end of file
diff --git a/frontend/src/views/user/DashboardView.vue b/frontend/src/views/user/DashboardView.vue
index 419c9502..ef406bea 100644
--- a/frontend/src/views/user/DashboardView.vue
+++ b/frontend/src/views/user/DashboardView.vue
@@ -1,661 +1,13 @@
 <template>
   <AppLayout>
     <div class="space-y-6">
-      <!-- Loading State -->
-      <div v-if="loading" class="flex items-center justify-center py-12">
-        <LoadingSpinner />
-      </div>
-
+      <div v-if="loading" class="flex justify-center py-12"><LoadingSpinner /></div>
       <template v-else-if="stats">
-        <!-- Row 1: Core Stats -->
-        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
-          <!-- Balance -->
-          <div v-if="!authStore.isSimpleMode" class="card p-4">
-            <div class="flex items-center gap-3">
-              <div class="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
-                <svg
-                  class="h-5 w-5 text-emerald-600 dark:text-emerald-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.balance') }}
-                </p>
-                <p class="text-xl font-bold text-emerald-600 dark:text-emerald-400">
-                  ${{ formatBalance(user?.balance || 0) }}
-                </p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('common.available') }}</p>
-              </div>
-            </div>
-          </div>
-
-          <!-- API Keys -->
-          <div class="card p-4">
-            <div class="flex items-center gap-3">
-              <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
-                <svg
-                  class="h-5 w-5 text-blue-600 dark:text-blue-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.apiKeys') }}
-                </p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">
-                  {{ stats.total_api_keys }}
-                </p>
-                <p class="text-xs text-green-600 dark:text-green-400">
-                  {{ stats.active_api_keys }} {{ t('common.active') }}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <!-- Today Requests -->
-          <div class="card p-4">
-            <div class="flex items-center gap-3">
-              <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
-                <svg
-                  class="h-5 w-5 text-green-600 dark:text-green-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.todayRequests') }}
-                </p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">
-                  {{ stats.today_requests }}
-                </p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">
-                  {{ t('common.total') }}: {{ formatNumber(stats.total_requests) }}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <!-- Today Cost -->
-          <div class="card p-4">
-            <div class="flex items-center gap-3">
-              <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30">
-                <svg
-                  class="h-5 w-5 text-purple-600 dark:text-purple-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.todayCost') }}
-                </p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">
-                  <span class="text-purple-600 dark:text-purple-400" :title="t('dashboard.actual')"
-                    >${{ formatCost(stats.today_actual_cost) }}</span
-                  >
-                  <span
-                    class="text-sm font-normal text-gray-400 dark:text-gray-500"
-                    :title="t('dashboard.standard')"
-                  >
-                    / ${{ formatCost(stats.today_cost) }}</span
-                  >
-                </p>
-                <p class="text-xs">
-                  <span class="text-gray-500 dark:text-gray-400">{{ t('common.total') }}: </span>
-                  <span class="text-purple-600 dark:text-purple-400" :title="t('dashboard.actual')"
-                    >${{ formatCost(stats.total_actual_cost) }}</span
-                  >
-                  <span class="text-gray-400 dark:text-gray-500" :title="t('dashboard.standard')">
-                    / ${{ formatCost(stats.total_cost) }}</span
-                  >
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Row 2: Token Stats -->
-        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
-          <!-- Today Tokens -->
-          <div class="card p-4">
-            <div class="flex items-center gap-3">
-              <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30">
-                <svg
-                  class="h-5 w-5 text-amber-600 dark:text-amber-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.todayTokens') }}
-                </p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">
-                  {{ formatTokens(stats.today_tokens) }}
-                </p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.input') }}: {{ formatTokens(stats.today_input_tokens) }} /
-                  {{ t('dashboard.output') }}: {{ formatTokens(stats.today_output_tokens) }}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <!-- Total Tokens -->
-          <div class="card p-4">
-            <div class="flex items-center gap-3">
-              <div class="rounded-lg bg-indigo-100 p-2 dark:bg-indigo-900/30">
-                <svg
-                  class="h-5 w-5 text-indigo-600 dark:text-indigo-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.totalTokens') }}
-                </p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">
-                  {{ formatTokens(stats.total_tokens) }}
-                </p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.input') }}: {{ formatTokens(stats.total_input_tokens) }} /
-                  {{ t('dashboard.output') }}: {{ formatTokens(stats.total_output_tokens) }}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <!-- Performance (RPM/TPM) -->
-          <div class="card p-4">
-            <div class="flex items-center gap-3">
-              <div class="rounded-lg bg-violet-100 p-2 dark:bg-violet-900/30">
-                <svg
-                  class="h-5 w-5 text-violet-600 dark:text-violet-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 10V3L4 14h7v7l9-11h-7z"
-                  />
-                </svg>
-              </div>
-              <div class="flex-1">
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.performance') }}
-                </p>
-                <div class="flex items-baseline gap-2">
-                  <p class="text-xl font-bold text-gray-900 dark:text-white">
-                    {{ formatTokens(stats.rpm) }}
-                  </p>
-                  <span class="text-xs text-gray-500 dark:text-gray-400">RPM</span>
-                </div>
-                <div class="flex items-baseline gap-2">
-                  <p class="text-sm font-semibold text-violet-600 dark:text-violet-400">
-                    {{ formatTokens(stats.tpm) }}
-                  </p>
-                  <span class="text-xs text-gray-500 dark:text-gray-400">TPM</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Avg Response Time -->
-          <div class="card p-4">
-            <div class="flex items-center gap-3">
-              <div class="rounded-lg bg-rose-100 p-2 dark:bg-rose-900/30">
-                <svg
-                  class="h-5 w-5 text-rose-600 dark:text-rose-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.avgResponse') }}
-                </p>
-                <p class="text-xl font-bold text-gray-900 dark:text-white">
-                  {{ formatDuration(stats.average_duration_ms) }}
-                </p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">
-                  {{ t('dashboard.averageTime') }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Charts Section -->
-        <div class="space-y-6">
-          <!-- Date Range Filter -->
-          <div class="card p-4">
-            <div class="flex flex-wrap items-center gap-4">
-              <div class="flex items-center gap-2">
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
-                  >{{ t('dashboard.timeRange') }}:</span
-                >
-                <DateRangePicker
-                  v-model:start-date="startDate"
-                  v-model:end-date="endDate"
-                  @change="onDateRangeChange"
-                />
-              </div>
-              <div class="ml-auto flex items-center gap-2">
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
-                  >{{ t('dashboard.granularity') }}:</span
-                >
-                <div class="w-28">
-                  <Select
-                    v-model="granularity"
-                    :options="granularityOptions"
-                    @change="loadChartData"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Charts Grid -->
-          <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-            <!-- Model Distribution Chart -->
-            <div class="card relative overflow-hidden p-4">
-              <div
-                v-if="loadingCharts"
-                class="absolute inset-0 z-10 flex items-center justify-center bg-white/50 backdrop-blur-sm dark:bg-dark-800/50"
-              >
-                <LoadingSpinner size="md" />
-              </div>
-              <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
-                {{ t('dashboard.modelDistribution') }}
-              </h3>
-              <div class="flex items-center gap-6">
-                <div class="h-48 w-48">
-                  <Doughnut
-                    v-if="modelChartData"
-                    ref="modelChartRef"
-                    :data="modelChartData"
-                    :options="doughnutOptions"
-                  />
-                  <div
-                    v-else
-                    class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400"
-                  >
-                    {{ t('dashboard.noDataAvailable') }}
-                  </div>
-                </div>
-                <div class="max-h-48 flex-1 overflow-y-auto">
-                  <table class="w-full text-xs">
-                    <thead>
-                      <tr class="text-gray-500 dark:text-gray-400">
-                        <th class="pb-2 text-left">{{ t('dashboard.model') }}</th>
-                        <th class="pb-2 text-right">{{ t('dashboard.requests') }}</th>
-                        <th class="pb-2 text-right">{{ t('dashboard.tokens') }}</th>
-                        <th class="pb-2 text-right">{{ t('dashboard.actual') }}</th>
-                        <th class="pb-2 text-right">{{ t('dashboard.standard') }}</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr
-                        v-for="model in modelStats"
-                        :key="model.model"
-                        class="border-t border-gray-100 dark:border-gray-700"
-                      >
-                        <td
-                          class="max-w-[100px] truncate py-1.5 font-medium text-gray-900 dark:text-white"
-                          :title="model.model"
-                        >
-                          {{ model.model }}
-                        </td>
-                        <td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
-                          {{ formatNumber(model.requests) }}
-                        </td>
-                        <td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
-                          {{ formatTokens(model.total_tokens) }}
-                        </td>
-                        <td class="py-1.5 text-right text-green-600 dark:text-green-400">
-                          ${{ formatCost(model.actual_cost) }}
-                        </td>
-                        <td class="py-1.5 text-right text-gray-400 dark:text-gray-500">
-                          ${{ formatCost(model.cost) }}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-
-            <!-- Token Usage Trend Chart -->
-            <div class="card relative overflow-hidden p-4">
-              <div
-                v-if="loadingCharts"
-                class="absolute inset-0 z-10 flex items-center justify-center bg-white/50 backdrop-blur-sm dark:bg-dark-800/50"
-              >
-                <LoadingSpinner size="md" />
-              </div>
-              <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
-                {{ t('dashboard.tokenUsageTrend') }}
-              </h3>
-              <div class="h-48">
-                <Line
-                  v-if="trendChartData"
-                  ref="trendChartRef"
-                  :data="trendChartData"
-                  :options="lineOptions"
-                />
-                <div
-                  v-else
-                  class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400"
-                >
-                  {{ t('dashboard.noDataAvailable') }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Main Content Grid -->
+        <UserDashboardStats :stats="stats" :balance="user?.balance || 0" :is-simple="authStore.isSimpleMode" />
+        <UserDashboardCharts v-model:startDate="startDate" v-model:endDate="endDate" v-model:granularity="granularity" :loading="loadingCharts" :trend="trendData" :models="modelStats" @dateRangeChange="loadCharts" @granularityChange="loadCharts" />
         <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
-          <!-- Recent Usage - Takes 2 columns -->
-          <div class="lg:col-span-2">
-            <div class="card">
-              <div
-                class="flex items-center justify-between border-b border-gray-100 px-6 py-4 dark:border-dark-700"
-              >
-                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
-                  {{ t('dashboard.recentUsage') }}
-                </h2>
-                <span class="badge badge-gray">{{ t('dashboard.last7Days') }}</span>
-              </div>
-              <div class="p-6">
-                <div v-if="loadingUsage" class="flex items-center justify-center py-12">
-                  <LoadingSpinner size="lg" />
-                </div>
-                <div v-else-if="recentUsage.length === 0" class="py-8">
-                  <EmptyState
-                    :title="t('dashboard.noUsageRecords')"
-                    :description="t('dashboard.startUsingApi')"
-                  />
-                </div>
-                <div v-else class="space-y-3">
-                  <div
-                    v-for="log in recentUsage"
-                    :key="log.id"
-                    class="flex items-center justify-between rounded-xl bg-gray-50 p-4 transition-colors hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
-                  >
-                    <div class="flex items-center gap-4">
-                      <div
-                        class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900/30"
-                      >
-                        <svg
-                          class="h-5 w-5 text-primary-600 dark:text-primary-400"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                          stroke-width="1.5"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <p class="text-sm font-medium text-gray-900 dark:text-white">
-                          {{ log.model }}
-                        </p>
-                        <p class="text-xs text-gray-500 dark:text-dark-400">
-                          {{ formatDateTime(log.created_at) }}
-                        </p>
-                      </div>
-                    </div>
-                    <div class="text-right">
-                      <p class="text-sm font-semibold">
-                        <span class="text-green-600 dark:text-green-400" :title="t('dashboard.actual')"
-                          >${{ formatCost(log.actual_cost) }}</span
-                        >
-                        <span class="font-normal text-gray-400 dark:text-gray-500" :title="t('dashboard.standard')">
-                          / ${{ formatCost(log.total_cost) }}</span
-                        >
-                      </p>
-                      <p class="text-xs text-gray-500 dark:text-dark-400">
-                        {{ (log.input_tokens + log.output_tokens).toLocaleString() }} tokens
-                      </p>
-                    </div>
-                  </div>
-
-                  <router-link
-                    to="/usage"
-                    class="flex items-center justify-center gap-2 py-3 text-sm font-medium text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
-                  >
-                    {{ t('dashboard.viewAllUsage') }}
-                    <svg
-                      class="h-4 w-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
-                      />
-                    </svg>
-                  </router-link>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Quick Actions - Takes 1 column -->
-          <div class="lg:col-span-1">
-            <div class="card">
-              <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
-                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
-                  {{ t('dashboard.quickActions') }}
-                </h2>
-              </div>
-              <div class="space-y-3 p-4">
-                <button
-                  @click="navigateTo('/keys')"
-                  class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
-                >
-                  <div
-                    class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-primary-100 transition-transform group-hover:scale-105 dark:bg-primary-900/30"
-                  >
-                    <svg
-                      class="h-6 w-6 text-primary-600 dark:text-primary-400"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
-                      />
-                    </svg>
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <p class="text-sm font-medium text-gray-900 dark:text-white">
-                      {{ t('dashboard.createApiKey') }}
-                    </p>
-                    <p class="text-xs text-gray-500 dark:text-dark-400">
-                      {{ t('dashboard.generateNewKey') }}
-                    </p>
-                  </div>
-                  <svg
-                    class="h-5 w-5 text-gray-400 transition-colors group-hover:text-primary-500 dark:text-dark-500"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M8.25 4.5l7.5 7.5-7.5 7.5"
-                    />
-                  </svg>
-                </button>
-
-                <button
-                  @click="navigateTo('/usage')"
-                  class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
-                >
-                  <div
-                    class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 transition-transform group-hover:scale-105 dark:bg-emerald-900/30"
-                  >
-                    <svg
-                      class="h-6 w-6 text-emerald-600 dark:text-emerald-400"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
-                      />
-                    </svg>
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <p class="text-sm font-medium text-gray-900 dark:text-white">
-                      {{ t('dashboard.viewUsage') }}
-                    </p>
-                    <p class="text-xs text-gray-500 dark:text-dark-400">
-                      {{ t('dashboard.checkDetailedLogs') }}
-                    </p>
-                  </div>
-                  <svg
-                    class="h-5 w-5 text-gray-400 transition-colors group-hover:text-emerald-500 dark:text-dark-500"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M8.25 4.5l7.5 7.5-7.5 7.5"
-                    />
-                  </svg>
-                </button>
-
-                <button
-                  @click="navigateTo('/redeem')"
-                  class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
-                >
-                  <div
-                    class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-amber-100 transition-transform group-hover:scale-105 dark:bg-amber-900/30"
-                  >
-                    <svg
-                      class="h-6 w-6 text-amber-600 dark:text-amber-400"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
-                      />
-                    </svg>
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <p class="text-sm font-medium text-gray-900 dark:text-white">
-                      {{ t('dashboard.redeemCode') }}
-                    </p>
-                    <p class="text-xs text-gray-500 dark:text-dark-400">
-                      {{ t('dashboard.addBalanceWithCode') }}
-                    </p>
-                  </div>
-                  <svg
-                    class="h-5 w-5 text-gray-400 transition-colors group-hover:text-amber-500 dark:text-dark-500"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M8.25 4.5l7.5 7.5-7.5 7.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
+          <div class="lg:col-span-2"><UserDashboardRecentUsage :data="recentUsage" :loading="loadingUsage" /></div>
+          <div><UserDashboardQuickActions /></div>
         </div>
       </template>
     </div>
@@ -663,393 +15,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useAuthStore } from '@/stores/auth'
-import { useSubscriptionStore } from '@/stores/subscriptions'
-import { formatDateTime } from '@/utils/format'
-
-const { t } = useI18n()
-import { usageAPI, type UserDashboardStats } from '@/api/usage'
+import { ref, computed, onMounted } from 'vue'; import { useAuthStore } from '@/stores/auth'; import { usageAPI, type UserDashboardStats as UserStatsType } from '@/api/usage'
+import AppLayout from '@/components/layout/AppLayout.vue'; import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
+import UserDashboardStats from '@/components/user/dashboard/UserDashboardStats.vue'; import UserDashboardCharts from '@/components/user/dashboard/UserDashboardCharts.vue'
+import UserDashboardRecentUsage from '@/components/user/dashboard/UserDashboardRecentUsage.vue'; import UserDashboardQuickActions from '@/components/user/dashboard/UserDashboardQuickActions.vue'
 import type { UsageLog, TrendDataPoint, ModelStat } from '@/types'
-import AppLayout from '@/components/layout/AppLayout.vue'
-import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
-import EmptyState from '@/components/common/EmptyState.vue'
-import DateRangePicker from '@/components/common/DateRangePicker.vue'
-import Select from '@/components/common/Select.vue'
 
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  ArcElement,
-  Title,
-  Tooltip,
-  Legend,
-  Filler
-} from 'chart.js'
-import { Line, Doughnut } from 'vue-chartjs'
+const authStore = useAuthStore(); const user = computed(() => authStore.user)
+const stats = ref<UserStatsType | null>(null); const loading = ref(false); const loadingUsage = ref(false); const loadingCharts = ref(false)
+const trendData = ref<TrendDataPoint[]>([]); const modelStats = ref<ModelStat[]>([]); const recentUsage = ref<UsageLog[]>([])
 
-// Register Chart.js components
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  ArcElement,
-  Title,
-  Tooltip,
-  Legend,
-  Filler
-)
+const formatLD = (d: Date) => d.toISOString().split('T')[0]
+const startDate = ref(formatLD(new Date(Date.now() - 6 * 86400000))); const endDate = ref(formatLD(new Date())); const granularity = ref('day')
 
-const router = useRouter()
-const authStore = useAuthStore()
-const subscriptionStore = useSubscriptionStore()
+const loadStats = async () => { loading.value = true; try { await authStore.refreshUser(); stats.value = await usageAPI.getDashboardStats() } catch {} finally { loading.value = false } }
+const loadCharts = async () => { loadingCharts.value = true; try { const res = await Promise.all([usageAPI.getDashboardTrend({ start_date: startDate.value, end_date: endDate.value, granularity: granularity.value as any }), usageAPI.getDashboardModels({ start_date: startDate.value, end_date: endDate.value })]); trendData.value = res[0].trend || []; modelStats.value = res[1].models || [] } catch {} finally { loadingCharts.value = false } }
+const loadRecent = async () => { loadingUsage.value = true; try { const res = await usageAPI.getByDateRange(startDate.value, endDate.value); recentUsage.value = res.items.slice(0, 5) } catch {} finally { loadingUsage.value = false } }
 
-const user = computed(() => authStore.user)
-const stats = ref<UserDashboardStats | null>(null)
-const loading = ref(false)
-const loadingUsage = ref(false)
-const loadingCharts = ref(false)
-
-type ChartComponentRef = { chart?: ChartJS }
-
-// Chart data
-const trendData = ref<TrendDataPoint[]>([])
-const modelStats = ref<ModelStat[]>([])
-const modelChartRef = ref<ChartComponentRef | null>(null)
-const trendChartRef = ref<ChartComponentRef | null>(null)
-
-// Recent usage
-const recentUsage = ref<UsageLog[]>([])
-
-// Helper function to format date in local timezone
-const formatLocalDate = (date: Date): string => {
-  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
-}
-
-// Initialize date range immediately (not in onMounted)
-const now = new Date()
-const weekAgo = new Date(now)
-weekAgo.setDate(weekAgo.getDate() - 6)
-
-// Date range
-const granularity = ref<'day' | 'hour'>('day')
-const startDate = ref(formatLocalDate(weekAgo))
-const endDate = ref(formatLocalDate(now))
-
-// Granularity options for Select component
-const granularityOptions = computed(() => [
-  { value: 'day', label: t('dashboard.day') },
-  { value: 'hour', label: t('dashboard.hour') }
-])
-
-// Dark mode detection
-const isDarkMode = computed(() => {
-  return document.documentElement.classList.contains('dark')
-})
-
-// Chart colors
-const chartColors = computed(() => ({
-  text: isDarkMode.value ? '#e5e7eb' : '#374151',
-  grid: isDarkMode.value ? '#374151' : '#e5e7eb',
-  input: '#3b82f6',
-  output: '#10b981',
-  cache: '#f59e0b'
-}))
-
-// Doughnut chart options
-const doughnutOptions = computed(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: {
-      display: false
-    },
-    tooltip: {
-      callbacks: {
-        label: (context: any) => {
-          const value = context.raw as number
-          const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0)
-          const percentage = ((value / total) * 100).toFixed(1)
-          return `${context.label}: ${formatTokens(value)} (${percentage}%)`
-        }
-      }
-    }
-  }
-}))
-
-// Line chart options
-const lineOptions = computed(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-  interaction: {
-    intersect: false,
-    mode: 'index' as const
-  },
-  plugins: {
-    legend: {
-      position: 'top' as const,
-      labels: {
-        color: chartColors.value.text,
-        usePointStyle: true,
-        pointStyle: 'circle',
-        padding: 15,
-        font: {
-          size: 11
-        }
-      }
-    },
-    tooltip: {
-      callbacks: {
-        label: (context: any) => {
-          return `${context.dataset.label}: ${formatTokens(context.raw)}`
-        },
-        footer: (tooltipItems: any) => {
-          const dataIndex = tooltipItems[0]?.dataIndex
-          if (dataIndex !== undefined && trendData.value[dataIndex]) {
-            const data = trendData.value[dataIndex]
-            return `Actual: $${formatCost(data.actual_cost)} | Standard: $${formatCost(data.cost)}`
-          }
-          return ''
-        }
-      }
-    }
-  },
-  scales: {
-    x: {
-      grid: {
-        color: chartColors.value.grid
-      },
-      ticks: {
-        color: chartColors.value.text,
-        font: {
-          size: 10
-        }
-      }
-    },
-    y: {
-      grid: {
-        color: chartColors.value.grid
-      },
-      ticks: {
-        color: chartColors.value.text,
-        font: {
-          size: 10
-        },
-        callback: (value: string | number) => formatTokens(Number(value))
-      }
-    }
-  }
-}))
-
-// Model chart data
-const modelChartData = computed(() => {
-  if (!modelStats.value?.length) return null
-
-  const colors = [
-    '#3b82f6',
-    '#10b981',
-    '#f59e0b',
-    '#ef4444',
-    '#8b5cf6',
-    '#ec4899',
-    '#14b8a6',
-    '#f97316',
-    '#6366f1',
-    '#84cc16'
-  ]
-
-  return {
-    labels: modelStats.value.map((m) => m.model),
-    datasets: [
-      {
-        data: modelStats.value.map((m) => m.total_tokens),
-        backgroundColor: colors.slice(0, modelStats.value.length),
-        borderWidth: 0
-      }
-    ]
-  }
-})
-
-// Trend chart data
-const trendChartData = computed(() => {
-  if (!trendData.value?.length) return null
-
-  return {
-    labels: trendData.value.map((d) => d.date),
-    datasets: [
-      {
-        label: 'Input',
-        data: trendData.value.map((d) => d.input_tokens),
-        borderColor: chartColors.value.input,
-        backgroundColor: `${chartColors.value.input}20`,
-        fill: true,
-        tension: 0.3
-      },
-      {
-        label: 'Output',
-        data: trendData.value.map((d) => d.output_tokens),
-        borderColor: chartColors.value.output,
-        backgroundColor: `${chartColors.value.output}20`,
-        fill: true,
-        tension: 0.3
-      },
-      {
-        label: 'Cache',
-        data: trendData.value.map((d) => d.cache_tokens),
-        borderColor: chartColors.value.cache,
-        backgroundColor: `${chartColors.value.cache}20`,
-        fill: true,
-        tension: 0.3
-      }
-    ]
-  }
-})
-
-// Format helpers
-const formatTokens = (value: number | undefined): string => {
-  if (value === undefined || value === null) return '0'
-  if (value >= 1_000_000_000) {
-    return `${(value / 1_000_000_000).toFixed(2)}B`
-  } else if (value >= 1_000_000) {
-    return `${(value / 1_000_000).toFixed(2)}M`
-  } else if (value >= 1_000) {
-    return `${(value / 1_000).toFixed(2)}K`
-  }
-  return value.toLocaleString()
-}
-
-const formatNumber = (value: number): string => {
-  return value.toLocaleString()
-}
-
-const formatBalance = (balance: number): string => {
-  return balance.toFixed(2)
-}
-
-const formatCost = (value: number): string => {
-  if (value >= 1000) {
-    return (value / 1000).toFixed(2) + 'K'
-  } else if (value >= 1) {
-    return value.toFixed(2)
-  } else if (value >= 0.01) {
-    return value.toFixed(3)
-  }
-  return value.toFixed(4)
-}
-
-const formatDuration = (ms: number): string => {
-  if (ms >= 1000) {
-    return `${(ms / 1000).toFixed(2)}s`
-  }
-  return `${Math.round(ms)}ms`
-}
-
-const navigateTo = (path: string) => {
-  router.push(path)
-}
-
-// Date range change handler
-const onDateRangeChange = (range: {
-  startDate: string
-  endDate: string
-  preset: string | null
-}) => {
-  const start = new Date(range.startDate)
-  const end = new Date(range.endDate)
-  const daysDiff = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24))
-
-  if (daysDiff <= 1) {
-    granularity.value = 'hour'
-  } else {
-    granularity.value = 'day'
-  }
-
-  loadChartData()
-}
-
-// Load data
-const loadDashboardStats = async () => {
-  loading.value = true
-  try {
-    await authStore.refreshUser()
-    stats.value = await usageAPI.getDashboardStats()
-  } catch (error) {
-    console.error('Error loading dashboard stats:', error)
-  } finally {
-    loading.value = false
-  }
-}
-
-const loadChartData = async () => {
-  loadingCharts.value = true
-  try {
-    const params = {
-      start_date: startDate.value,
-      end_date: endDate.value,
-      granularity: granularity.value
-    }
-
-    const [trendResponse, modelResponse] = await Promise.all([
-      usageAPI.getDashboardTrend(params),
-      usageAPI.getDashboardModels({ start_date: startDate.value, end_date: endDate.value })
-    ])
-
-    // Ensure we always have arrays, even if API returns null
-    trendData.value = trendResponse.trend || []
-    modelStats.value = modelResponse.models || []
-  } catch (error) {
-    console.error('Error loading chart data:', error)
-  } finally {
-    loadingCharts.value = false
-  }
-}
-
-const loadRecentUsage = async () => {
-  loadingUsage.value = true
-  try {
-    // Use local timezone instead of UTC
-    const now = new Date()
-    const endDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
-    const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
-    const startDate = `${weekAgo.getFullYear()}-${String(weekAgo.getMonth() + 1).padStart(2, '0')}-${String(weekAgo.getDate()).padStart(2, '0')}`
-    const usageResponse = await usageAPI.getByDateRange(startDate, endDate)
-    recentUsage.value = usageResponse.items.slice(0, 5)
-  } catch (error) {
-    console.error('Failed to load recent usage:', error)
-  } finally {
-    loadingUsage.value = false
-  }
-}
-
-onMounted(async () => {
-  // Load critical data first
-  await loadDashboardStats()
-
-  // Force refresh subscription status when entering dashboard (bypass cache)
-  subscriptionStore.fetchActiveSubscriptions(true).catch((error) => {
-    console.error('Failed to refresh subscription status:', error)
-  })
-
-  // Load chart data and recent usage in parallel (non-critical)
-  Promise.all([loadChartData(), loadRecentUsage()]).catch((error) => {
-    console.error('Error loading secondary data:', error)
-  })
-})
-
-// Watch for dark mode changes
-watch(isDarkMode, () => {
-  nextTick(() => {
-    modelChartRef.value?.chart?.update()
-    trendChartRef.value?.chart?.update()
-  })
-})
+onMounted(() => { loadStats(); loadCharts(); loadRecent() })
 </script>
-
-<style scoped>
-</style>