feat: add episode total handling and display across movie pages

- Implemented `getEpisodeDisplay` function to format episode information for movies.
- Updated movie display components to show episode information using the new function.
- Added `episodeTotal` field to the movies schema and updated related API endpoints to handle this new field.
- Enhanced movie synchronization process to fetch and store episode totals from external sources.
- Created a new error page component for better user experience on 404 errors.
- Added migration scripts to update the database schema for episode totals.

app/pages/admin/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BarChart3, Film, RefreshCw, TrendingUp, X } from 'lucide-vue-next'
+import { BarChart3, Film, Play, RefreshCw, TrendingUp, Tv, Users, X } from 'lucide-vue-next'
 
 definePageMeta({
   layout: 'admin',
@@ -35,6 +35,36 @@ async function handleSync() {
     syncing.value = false
   }
 }
+
+function percentOf(value: number, total: number) {
+  if (!total) return 0
+  return Math.round((value / total) * 100)
+}
+
+// Donut chart helpers
+function donutSegment(value: number, total: number, startAngle: number, radius = 40) {
+  if (!total || !value) return ''
+  const angle = (value / total) * 360
+  const startRad = ((startAngle - 90) * Math.PI) / 180
+  const endRad = (((startAngle + angle) - 90) * Math.PI) / 180
+  const x1 = 50 + radius * Math.cos(startRad)
+  const y1 = 50 + radius * Math.sin(startRad)
+  const x2 = 50 + radius * Math.cos(endRad)
+  const y2 = 50 + radius * Math.sin(endRad)
+  const largeArc = angle > 180 ? 1 : 0
+  return `M 50 50 L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`
+}
+
+// Bar chart max value
+const maxViews = computed(() => {
+  const movies = stats.value?.topMovies || []
+  return Math.max(...movies.map(m => m.views || 0), 1)
+})
+
+function barWidth(views: number) {
+  if (!maxViews.value) return 0
+  return Math.max((views / maxViews.value) * 100, 4)
+}
 </script>
 
 <template>
@@ -52,7 +82,8 @@ async function handleSync() {
       </button>
     </div>
 
-    <div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+    <!-- Stats Cards -->
+    <div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
       <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5 transition hover:border-white/20">
         <div class="flex items-start justify-between">
           <div>
@@ -68,7 +99,7 @@ async function handleSync() {
       <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5 transition hover:border-white/20">
         <div class="flex items-start justify-between">
           <div>
-            <p class="text-sm font-semibold text-slate-400">Phim đang hiển thị</p>
+            <p class="text-sm font-semibold text-slate-400">Đang hiển thị</p>
             <p class="mt-2 text-3xl font-black text-green-400">{{ stats?.active?.toLocaleString() || 0 }}</p>
           </div>
           <div class="grid size-11 place-items-center rounded-xl bg-green-400/10 text-green-400">
@@ -80,16 +111,202 @@ async function handleSync() {
       <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5 transition hover:border-white/20">
         <div class="flex items-start justify-between">
           <div>
-            <p class="text-sm font-semibold text-slate-400">Phim chưa hiển thị</p>
-            <p class="mt-2 text-3xl font-black text-slate-400">{{ stats?.inactive?.toLocaleString() || 0 }}</p>
+            <p class="text-sm font-semibold text-slate-400">Phim bộ</p>
+            <p class="mt-2 text-3xl font-black text-blue-400">{{ stats?.series?.toLocaleString() || 0 }}</p>
           </div>
-          <div class="grid size-11 place-items-center rounded-xl bg-slate-400/10 text-slate-400">
-            <BarChart3 class="size-5" />
+          <div class="grid size-11 place-items-center rounded-xl bg-blue-400/10 text-blue-400">
+            <Tv class="size-5" />
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5 transition hover:border-white/20">
+        <div class="flex items-start justify-between">
+          <div>
+            <p class="text-sm font-semibold text-slate-400">Phim lẻ</p>
+            <p class="mt-2 text-3xl font-black text-purple-400">{{ stats?.single?.toLocaleString() || 0 }}</p>
+          </div>
+          <div class="grid size-11 place-items-center rounded-xl bg-purple-400/10 text-purple-400">
+            <Play class="size-5" />
           </div>
         </div>
       </div>
     </div>
 
+    <!-- Charts Row -->
+    <div class="mb-6 grid gap-4 lg:grid-cols-3">
+      <!-- Donut Chart: Source Distribution -->
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+        <p class="text-sm font-semibold text-slate-400">Phân bổ nguồn phim</p>
+        <div class="mt-4 flex items-center justify-center">
+          <div class="relative">
+            <svg viewBox="0 0 100 100" class="size-44">
+              <!-- OPhim segment -->
+              <template v-if="stats?.ophim">
+                <path :d="donutSegment(stats.ophim, stats.total, 0)" fill="#facc15" />
+              </template>
+              <!-- NguonC segment -->
+              <template v-if="stats?.nguonc">
+                <path :d="donutSegment(stats.nguonc, stats.total, (stats.ophim || 0) / (stats.total || 1) * 360)" fill="#4ade80" />
+              </template>
+              <!-- KKPhim segment -->
+              <template v-if="stats?.kkphim">
+                <path :d="donutSegment(stats.kkphim, stats.total, ((stats.ophim || 0) + (stats.nguonc || 0)) / (stats.total || 1) * 360)" fill="#60a5fa" />
+              </template>
+              <!-- Inner circle for donut effect -->
+              <circle cx="50" cy="50" r="24" fill="#0f172a" />
+            </svg>
+            <div class="absolute inset-0 grid place-items-center">
+              <div class="text-center">
+                <p class="text-2xl font-black text-white">{{ stats?.total?.toLocaleString() || 0 }}</p>
+                <p class="text-[10px] text-slate-400">total</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="mt-4 space-y-2">
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="size-3 rounded-full bg-yellow-400" />
+              <span class="text-slate-300">OPhim</span>
+            </div>
+            <span class="font-semibold text-white">{{ stats?.ophim || 0 }} <span class="text-slate-500">({{ percentOf(stats?.ophim || 0, stats?.total || 0) }}%)</span></span>
+          </div>
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="size-3 rounded-full bg-green-400" />
+              <span class="text-slate-300">NguonC</span>
+            </div>
+            <span class="font-semibold text-white">{{ stats?.nguonc || 0 }} <span class="text-slate-500">({{ percentOf(stats?.nguonc || 0, stats?.total || 0) }}%)</span></span>
+          </div>
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="size-3 rounded-full bg-blue-400" />
+              <span class="text-slate-300">KKPhim</span>
+            </div>
+            <span class="font-semibold text-white">{{ stats?.kkphim || 0 }} <span class="text-slate-500">({{ percentOf(stats?.kkphim || 0, stats?.total || 0) }}%)</span></span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Donut Chart: Series vs Single -->
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+        <p class="text-sm font-semibold text-slate-400">Phim bộ vs Phim lẻ</p>
+        <div class="mt-4 flex items-center justify-center">
+          <div class="relative">
+            <svg viewBox="0 0 100 100" class="size-44">
+              <template v-if="stats?.series">
+                <path :d="donutSegment(stats.series, stats.total, 0)" fill="#3b82f6" />
+              </template>
+              <template v-if="stats?.single">
+                <path :d="donutSegment(stats.single, stats.total, (stats.series || 0) / (stats.total || 1) * 360)" fill="#a855f7" />
+              </template>
+              <circle cx="50" cy="50" r="24" fill="#0f172a" />
+            </svg>
+            <div class="absolute inset-0 grid place-items-center">
+              <div class="text-center">
+                <p class="text-2xl font-black text-white">{{ stats?.total?.toLocaleString() || 0 }}</p>
+                <p class="text-[10px] text-slate-400">total</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="mt-4 space-y-2">
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="size-3 rounded-full bg-blue-500" />
+              <span class="text-slate-300">Phim bộ</span>
+            </div>
+            <span class="font-semibold text-white">{{ stats?.series || 0 }} <span class="text-slate-500">({{ percentOf(stats?.series || 0, stats?.total || 0) }}%)</span></span>
+          </div>
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="size-3 rounded-full bg-purple-500" />
+              <span class="text-slate-300">Phim lẻ</span>
+            </div>
+            <span class="font-semibold text-white">{{ stats?.single || 0 }} <span class="text-slate-500">({{ percentOf(stats?.single || 0, stats?.total || 0) }}%)</span></span>
+          </div>
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="size-3 rounded-full bg-green-400" />
+              <span class="text-slate-300">Đang hiển thị</span>
+            </div>
+            <span class="font-semibold text-green-400">{{ stats?.active || 0 }}</span>
+          </div>
+          <div class="flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="size-3 rounded-full bg-slate-500" />
+              <span class="text-slate-300">Chưa hiển thị</span>
+            </div>
+            <span class="font-semibold text-slate-400">{{ stats?.inactive || 0 }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Bar Chart: Top Movies by Views -->
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+        <p class="text-sm font-semibold text-slate-400">Top 5 phim nhiều lượt xem</p>
+        <div class="mt-4 space-y-3">
+          <div v-for="(movie, i) in stats?.topMovies || []" :key="movie.slug">
+            <div class="mb-1 flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <span class="w-5 text-center text-xs font-black" :class="i === 0 ? 'text-yellow-400' : i === 1 ? 'text-slate-300' : i === 2 ? 'text-amber-600' : 'text-slate-500'">{{ i + 1 }}</span>
+                <span class="truncate text-xs text-white">{{ movie.name }}</span>
+              </div>
+              <span class="text-xs font-semibold text-slate-400">{{ movie.views?.toLocaleString() }}</span>
+            </div>
+            <div class="h-2 overflow-hidden rounded-full bg-white/10">
+              <div class="h-full rounded-full transition-all duration-500"
+                :class="i === 0 ? 'bg-yellow-400' : i === 1 ? 'bg-slate-300' : i === 2 ? 'bg-amber-500' : 'bg-slate-500'"
+                :style="{ width: barWidth(movie.views || 0) + '%' }" />
+            </div>
+          </div>
+          <p v-if="!stats?.topMovies?.length" class="text-center text-xs text-slate-500">Chưa có dữ liệu</p>
+        </div>
+
+        <div class="mt-5 border-t border-white/10 pt-4">
+          <div class="flex items-center justify-between text-sm">
+            <span class="text-slate-400">Tổng lượt xem</span>
+            <span class="text-lg font-black text-white">{{ stats?.totalViews?.toLocaleString() || 0 }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Active vs Inactive Comparison Bar -->
+    <div class="mb-6 rounded-xl border border-white/10 bg-slate-900/50 p-5">
+      <p class="text-sm font-semibold text-slate-400">Trạng thái hiển thị</p>
+      <div class="mt-4 flex gap-6">
+        <div class="flex-1">
+          <div class="mb-2 flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="size-3 rounded-full bg-green-400" />
+              <span class="text-white">Đang hiển thị</span>
+            </div>
+            <span class="font-semibold text-green-400">{{ stats?.active?.toLocaleString() || 0 }}</span>
+          </div>
+          <div class="h-4 overflow-hidden rounded-full bg-white/10">
+            <div class="h-full rounded-full bg-green-400 transition-all duration-500" :style="{ width: percentOf(stats?.active || 0, stats?.total || 0) + '%' }" />
+          </div>
+          <p class="mt-1 text-right text-xs text-slate-500">{{ percentOf(stats?.active || 0, stats?.total || 0) }}%</p>
+        </div>
+        <div class="flex-1">
+          <div class="mb-2 flex items-center justify-between text-sm">
+            <div class="flex items-center gap-2">
+              <span class="size-3 rounded-full bg-slate-500" />
+              <span class="text-white">Chưa hiển thị</span>
+            </div>
+            <span class="font-semibold text-slate-400">{{ stats?.inactive?.toLocaleString() || 0 }}</span>
+          </div>
+          <div class="h-4 overflow-hidden rounded-full bg-white/10">
+            <div class="h-full rounded-full bg-slate-500 transition-all duration-500" :style="{ width: percentOf(stats?.inactive || 0, stats?.total || 0) + '%' }" />
+          </div>
+          <p class="mt-1 text-right text-xs text-slate-500">{{ percentOf(stats?.inactive || 0, stats?.total || 0) }}%</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Sync Modal -->
     <Teleport to="body">
       <Transition name="modal-fade">
         <div v-if="syncOpen" class="fixed inset-0 z-70 grid place-items-center px-3">