add change language

src/routes/overview/Overview.vue

@@ -2,6 +2,7 @@
 import { client, type ModelVideo } from '@/api/client';
 import PageHeader from '@/components/dashboard/PageHeader.vue';
 import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import NameGradient from './components/NameGradient.vue';
 import QuickActions from './components/QuickActions.vue';
 import RecentVideos from './components/RecentVideos.vue';
@@ -9,20 +10,19 @@ import StatsOverview from './components/StatsOverview.vue';
 
 const loading = ref(true);
 const recentVideos = ref<ModelVideo[]>([]);
+const { t } = useI18n();
 
-// Mock stats data (in real app, fetch from API)
 const stats = ref({
     totalVideos: 0,
     totalViews: 0,
     storageUsed: 0,
-    storageLimit: 10737418240, // 10GB in bytes
+    storageLimit: 10737418240,
     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;
 
@@ -34,7 +34,6 @@ const fetchDashboardData = async () => {
             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 => {
@@ -52,25 +51,20 @@ const fetchDashboardData = async () => {
 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' }
+        <PageHeader :title="NameGradient" :description="t('overview.pageHeaderDescription')" :breadcrumbs="[
+            { label: t('pageHeader.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>