feat: add refresh button to admin and user dashboard pages
This commit is contained in:
@@ -219,6 +219,9 @@
|
||||
@change="onDateRangeChange"
|
||||
/>
|
||||
</div>
|
||||
<button @click="loadDashboardStats" :disabled="chartsLoading" class="btn btn-secondary">
|
||||
{{ t('common.refresh') }}
|
||||
</button>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>{{ t('admin.dashboard.granularity') }}:</span
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div v-if="loading" class="flex items-center justify-center py-12"><LoadingSpinner /></div>
|
||||
<template v-else-if="stats">
|
||||
<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" />
|
||||
<UserDashboardCharts v-model:startDate="startDate" v-model:endDate="endDate" v-model:granularity="granularity" :loading="loadingCharts" :trend="trendData" :models="modelStats" @dateRangeChange="loadCharts" @granularityChange="loadCharts" @refresh="refreshAll" />
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<div class="lg:col-span-2"><UserDashboardRecentUsage :data="recentUsage" :loading="loadingUsage" /></div>
|
||||
<div class="lg:col-span-1"><UserDashboardQuickActions /></div>
|
||||
@@ -31,6 +31,7 @@ const startDate = ref(formatLD(new Date(Date.now() - 6 * 86400000))); const endD
|
||||
const loadStats = async () => { loading.value = true; try { await authStore.refreshUser(); stats.value = await usageAPI.getDashboardStats() } catch (error) { console.error('Failed to load dashboard stats:', error) } 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 (error) { console.error('Failed to load charts:', error) } 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 (error) { console.error('Failed to load recent usage:', error) } finally { loadingUsage.value = false } }
|
||||
const refreshAll = () => { loadStats(); loadCharts(); loadRecent() }
|
||||
|
||||
onMounted(() => { loadStats(); loadCharts(); loadRecent() })
|
||||
onMounted(() => { refreshAll() })
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user