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.

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>

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>

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>

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>

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>

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>

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>