done i18n

src/routes/overview/Overview.vue

@@ -2,7 +2,6 @@
 import { client, type ModelVideo } from '@/api/client';
 import PageHeader from '@/components/dashboard/PageHeader.vue';
 import { onMounted, ref } from 'vue';
-import { useTranslation } from 'i18next-vue';
 import NameGradient from './components/NameGradient.vue';
 import QuickActions from './components/QuickActions.vue';
 import RecentVideos from './components/RecentVideos.vue';
@@ -10,7 +9,6 @@ import StatsOverview from './components/StatsOverview.vue';
 
 const loading = ref(true);
 const recentVideos = ref<ModelVideo[]>([]);
-const { t } = useTranslation();
 
 const stats = ref({
     totalVideos: 0,
@@ -55,8 +53,8 @@ onMounted(() => {
 
 <template>
     <div class="dashboard-overview">
-        <PageHeader :title="NameGradient" :description="t('overview.pageHeaderDescription')" :breadcrumbs="[
-            { label: t('pageHeader.dashboard') }
+        <PageHeader :title="NameGradient" :description="$t('overview.welcome.subtitle')" :breadcrumbs="[
+            { label: $t('pageHeader.dashboard') }
         ]" />
 
         <StatsOverview :loading="loading" :stats="stats" />

src/routes/overview/components/NameGradient.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="text-3xl font-bold text-gray-900 mb-1">
-        <span class=":uno: bg-[linear-gradient(130deg,#14a74b_0%,#22c55e_35%,#10b981_65%,#06b6d4_100%)] bg-clip-text text-transparent">{{ t('overview.nameGradient.hello', { name: auth.user?.username || t('app.name') }) }}</span>
+        <span class=":uno: bg-[linear-gradient(130deg,#14a74b_0%,#22c55e_35%,#10b981_65%,#06b6d4_100%)] bg-clip-text text-transparent">{{ $t('overview.welcome.title', { name: auth.user?.username || t('app.name') }) }}</span>
     </div>
 </template>
 <script setup lang="ts">
@@ -8,5 +8,4 @@ import { useAuthStore } from '@/stores/auth';
 import { useTranslation } from 'i18next-vue';
 
 const auth = useAuthStore();
-const { t } = useTranslation();
 </script>

src/routes/overview/components/StatsOverview.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useTranslation } from 'i18next-vue';
 import StatsCard from '@/components/dashboard/StatsCard.vue';
 import { formatBytes } from '@/lib/utils';
@@ -14,8 +15,9 @@ interface Props {
     };
 }
 
-defineProps<Props>();
-const { t } = useTranslation();
+const props = defineProps<Props>();
+const { t, i18next } = useTranslation();
+const localeTag = computed(() => i18next.resolvedLanguage === 'vi' ? 'vi-VN' : 'en-US');
 </script>
 
 <template>
@@ -34,7 +36,7 @@ const { t } = useTranslation();
     <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
         <StatsCard :title="t('overview.stats.totalVideos')" :value="stats.totalVideos" :trend="{ value: 12, isPositive: true }" />
 
-        <StatsCard :title="t('overview.stats.totalViews')" :value="stats.totalViews.toLocaleString()"
+        <StatsCard :title="t('overview.stats.totalViews')" :value="stats.totalViews.toLocaleString(localeTag)"
             :trend="{ value: 8, isPositive: true }" />
 
         <StatsCard :title="t('overview.stats.storageUsed')"