77 lines
2.5 KiB
Vue
77 lines
2.5 KiB
Vue
<script setup lang="tsx">
|
|
import { client, type ModelVideo } from '@/api/client';
|
|
import PageHeader from '@/components/dashboard/PageHeader.vue';
|
|
import { onMounted, ref } from 'vue';
|
|
import NameGradient from './components/NameGradient.vue';
|
|
import QuickActions from './components/QuickActions.vue';
|
|
import RecentVideos from './components/RecentVideos.vue';
|
|
import StatsOverview from './components/StatsOverview.vue';
|
|
|
|
const loading = ref(true);
|
|
const recentVideos = ref<ModelVideo[]>([]);
|
|
|
|
// Mock stats data (in real app, fetch from API)
|
|
const stats = ref({
|
|
totalVideos: 0,
|
|
totalViews: 0,
|
|
storageUsed: 0,
|
|
storageLimit: 10737418240, // 10GB in bytes
|
|
uploadsThisMonth: 0
|
|
});
|
|
|
|
const fetchDashboardData = async () => {
|
|
loading.value = true;
|
|
try {
|
|
// Fetch recent videos
|
|
const response = await client.videos.videosList({ page: 1, limit: 5 });
|
|
const body = response.data as any;
|
|
|
|
if (body.data && Array.isArray(body.data)) {
|
|
recentVideos.value = body.data;
|
|
stats.value.totalVideos = body.data.length;
|
|
} else if (Array.isArray(body)) {
|
|
recentVideos.value = body;
|
|
stats.value.totalVideos = body.length;
|
|
}
|
|
|
|
// Calculate mock stats
|
|
stats.value.totalViews = recentVideos.value.reduce((sum, v: any) => sum + (v.views || 0), 0);
|
|
stats.value.storageUsed = recentVideos.value.reduce((sum, v) => sum + (v.size || 0), 0);
|
|
stats.value.uploadsThisMonth = recentVideos.value.filter(v => {
|
|
const uploadDate = new Date(v.created_at || '');
|
|
const now = new Date();
|
|
return uploadDate.getMonth() === now.getMonth() && uploadDate.getFullYear() === now.getFullYear();
|
|
}).length;
|
|
} catch (err) {
|
|
console.error('Failed to fetch dashboard data:', err);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchDashboardData();
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dashboard-overview">
|
|
<PageHeader :title="NameGradient" description="Welcome back, Here's what's happening with your videos." :breadcrumbs="[
|
|
{ label: 'Dashboard' }
|
|
]" />
|
|
|
|
<!-- Stats Grid -->
|
|
<StatsOverview :loading="loading" :stats="stats" />
|
|
|
|
<!-- Quick Actions -->
|
|
<QuickActions :loading="loading" />
|
|
|
|
<!-- Recent Videos -->
|
|
<RecentVideos :loading="loading" :videos="recentVideos" />
|
|
|
|
<!-- Storage Usage -->
|
|
<!-- <StorageUsage :loading="loading" :stats="stats" /> -->
|
|
</div>
|
|
</template>
|