Refactor: Remove Supabase authentication and related code

- Removed Supabase authentication logic from xem/[slug].vue and yeu-thich.vue.
- Updated favorite and watch later messages to be device-specific.
- Removed unused user state and authentication initialization.
- Deleted supabase.ts plugin file and related configurations.
- Updated nuxt.config.ts to remove Supabase runtime configuration.
- Removed Supabase dependencies from package.json and package-lock.json.
- Adjusted Dockerfile for development environment.
- Added admin layout and pages for managing settings, movies, and users.
- Implemented admin dashboard with statistics and recent activities.
- Created movie and user management interfaces with search functionality.

app/pages/admin/cai-dat.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { Save, Settings as SettingsIcon } from 'lucide-vue-next'
+
+definePageMeta({
+  layout: 'admin',
+})
+
+useHead({
+  title: 'Cài đặt - CineK Admin',
+})
+
+const siteName = ref('CineK')
+const siteDescription = ref('Xem phim Hàn Quốc online với phụ đề Vietsub')
+const maintenanceMode = ref(false)
+const allowRegistration = ref(true)
+</script>
+
+<template>
+  <div>
+    <div class="mb-6">
+      <h1 class="text-2xl font-black text-white">Cài đặt</h1>
+      <p class="mt-1 text-sm text-slate-400">Quản lý cài đặt hệ thống CineK</p>
+    </div>
+
+    <div class="space-y-6">
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+        <div class="mb-5 flex items-center gap-3">
+          <div class="grid size-10 place-items-center rounded-lg bg-yellow-400/10">
+            <SettingsIcon class="size-4 text-yellow-400" />
+          </div>
+          <div>
+            <h2 class="text-lg font-black text-white">Cài đặt chung</h2>
+            <p class="text-sm text-slate-400">Thông tin cơ bản về website</p>
+          </div>
+        </div>
+
+        <div class="space-y-4">
+          <div>
+            <label class="mb-2 block text-sm font-semibold text-white">Tên website</label>
+            <input v-model="siteName" type="text"
+              class="h-10 w-full rounded-lg border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-yellow-400/50">
+          </div>
+
+          <div>
+            <label class="mb-2 block text-sm font-semibold text-white">Mô tả website</label>
+            <textarea v-model="siteDescription" rows="3"
+              class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white outline-none focus:border-yellow-400/50"></textarea>
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+        <h2 class="mb-5 text-lg font-black text-white">Tùy chọn hệ thống</h2>
+
+        <div class="space-y-4">
+          <label class="flex cursor-pointer items-center justify-between rounded-lg border border-white/5 bg-white/5 p-4 transition hover:border-white/10">
+            <div>
+              <p class="text-sm font-semibold text-white">Chế độ bảo trì</p>
+              <p class="mt-1 text-xs text-slate-400">Tạm thời tắt website để bảo trì</p>
+            </div>
+            <input v-model="maintenanceMode" type="checkbox"
+              class="h-5 w-5 cursor-pointer rounded border-white/20 bg-white/5 text-yellow-400 focus:ring-yellow-400/50">
+          </label>
+
+          <label class="flex cursor-pointer items-center justify-between rounded-lg border border-white/5 bg-white/5 p-4 transition hover:border-white/10">
+            <div>
+              <p class="text-sm font-semibold text-white">Cho phép đăng ký</p>
+              <p class="mt-1 text-xs text-slate-400">Cho phép người dùng mới đăng ký tài khoản</p>
+            </div>
+            <input v-model="allowRegistration" type="checkbox"
+              class="h-5 w-5 cursor-pointer rounded border-white/20 bg-white/5 text-yellow-400 focus:ring-yellow-400/50">
+          </label>
+        </div>
+      </div>
+
+      <div class="flex justify-end">
+        <button type="button"
+          class="inline-flex h-10 items-center gap-2 rounded-lg bg-yellow-400 px-5 text-sm font-black text-slate-950 transition hover:bg-yellow-300">
+          <Save class="size-4" />
+          Lưu thay đổi
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/admin/index.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { BarChart3, Film, TrendingUp, Users } from 'lucide-vue-next'
+
+definePageMeta({
+  layout: 'admin',
+})
+
+useHead({
+  title: 'Dashboard - CineK Admin',
+})
+
+const stats = [
+  {
+    label: 'Tổng phim',
+    value: '1,234',
+    change: '+12%',
+    icon: Film,
+    color: 'yellow',
+  },
+  {
+    label: 'Thành viên',
+    value: '5,678',
+    change: '+8%',
+    icon: Users,
+    color: 'blue',
+  },
+  {
+    label: 'Lượt xem hôm nay',
+    value: '45,678',
+    change: '+23%',
+    icon: TrendingUp,
+    color: 'green',
+  },
+  {
+    label: 'Doanh thu tháng',
+    value: '12.5M',
+    change: '+15%',
+    icon: BarChart3,
+    color: 'purple',
+  },
+]
+
+const recentMovies = [
+  { name: 'Phim Hàn Quốc 1', views: 1234, status: 'active' },
+  { name: 'Phim Hàn Quốc 2', views: 890, status: 'active' },
+  { name: 'Phim Hàn Quốc 3', views: 2345, status: 'active' },
+  { name: 'Phim Hàn Quốc 4', views: 567, status: 'draft' },
+  { name: 'Phim Hàn Quốc 5', views: 1890, status: 'active' },
+]
+</script>
+
+<template>
+  <div>
+    <div class="mb-6">
+      <h1 class="text-2xl font-black text-white">Dashboard</h1>
+      <p class="mt-1 text-sm text-slate-400">Tổng quan hệ thống CineK</p>
+    </div>
+
+    <div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div v-for="stat in stats" :key="stat.label"
+        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">{{ stat.label }}</p>
+            <p class="mt-2 text-3xl font-black text-white">{{ stat.value }}</p>
+            <p class="mt-2 text-sm font-semibold text-green-400">{{ stat.change }} tháng này</p>
+          </div>
+          <div class="grid size-11 place-items-center rounded-xl"
+            :class="{
+              'bg-yellow-400/10 text-yellow-400': stat.color === 'yellow',
+              'bg-blue-400/10 text-blue-400': stat.color === 'blue',
+              'bg-green-400/10 text-green-400': stat.color === 'green',
+              'bg-purple-400/10 text-purple-400': stat.color === 'purple',
+            }">
+            <component :is="stat.icon" class="size-5" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid gap-6 lg:grid-cols-2">
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+        <div class="mb-4 flex items-center justify-between">
+          <h2 class="text-lg font-black text-white">Phim gần đây</h2>
+          <NuxtLink to="/admin/phim" class="text-sm font-semibold text-yellow-400 hover:text-yellow-300">
+            Xem tất cả
+          </NuxtLink>
+        </div>
+
+        <div class="space-y-3">
+          <div v-for="movie in recentMovies" :key="movie.name"
+            class="flex items-center justify-between rounded-lg border border-white/5 bg-white/5 p-3 transition hover:border-white/10">
+            <div class="flex items-center gap-3">
+              <div class="grid size-10 place-items-center rounded-lg bg-yellow-400/10">
+                <Film class="size-4 text-yellow-400" />
+              </div>
+              <div>
+                <p class="text-sm font-semibold text-white">{{ movie.name }}</p>
+                <p class="text-xs text-slate-400">{{ movie.views.toLocaleString() }} lượt xem</p>
+              </div>
+            </div>
+            <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
+              :class="movie.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
+              {{ movie.status === 'active' ? 'Hoạt động' : 'Nháp' }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+        <div class="mb-4 flex items-center justify-between">
+          <h2 class="text-lg font-black text-white">Hoạt động gần đây</h2>
+        </div>
+
+        <div class="space-y-4">
+          <div class="flex gap-3">
+            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-green-400/10">
+              <Film class="size-3.5 text-green-400" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm text-white">
+                <span class="font-semibold">Phim mới</span> đã được thêm
+              </p>
+              <p class="mt-1 text-xs text-slate-400">2 phút trước</p>
+            </div>
+          </div>
+
+          <div class="flex gap-3">
+            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-blue-400/10">
+              <Users class="size-3.5 text-blue-400" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm text-white">
+                <span class="font-semibold">15 thành viên</span> mới đăng ký
+              </p>
+              <p class="mt-1 text-xs text-slate-400">1 giờ trước</p>
+            </div>
+          </div>
+
+          <div class="flex gap-3">
+            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-yellow-400/10">
+              <TrendingUp class="size-3.5 text-yellow-400" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm text-white">
+                Lượt xem tăng <span class="font-semibold">23%</span> so với hôm qua
+              </p>
+              <p class="mt-1 text-xs text-slate-400">3 giờ trước</p>
+            </div>
+          </div>
+
+          <div class="flex gap-3">
+            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-purple-400/10">
+              <BarChart3 class="size-3.5 text-purple-400" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm text-white">
+                Doanh thu tháng đạt <span class="font-semibold">12.5M</span>
+              </p>
+              <p class="mt-1 text-xs text-slate-400">5 giờ trước</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/admin/phim.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { Edit, Eye, Film, MoreVertical, Plus, Search, Trash2 } from 'lucide-vue-next'
+
+definePageMeta({
+  layout: 'admin',
+})
+
+useHead({
+  title: 'Quản lý phim - CineK Admin',
+})
+
+const searchQuery = ref('')
+
+const movies = [
+  { id: 1, name: 'Phim Hàn Quốc 1', originName: 'Korean Drama 1', views: 1234, status: 'active', updatedAt: '2024-01-15' },
+  { id: 2, name: 'Phim Hàn Quốc 2', originName: 'Korean Drama 2', views: 890, status: 'active', updatedAt: '2024-01-14' },
+  { id: 3, name: 'Phim Hàn Quốc 3', originName: 'Korean Movie 1', views: 2345, status: 'active', updatedAt: '2024-01-13' },
+  { id: 4, name: 'Phim Hàn Quốc 4', originName: 'Korean Drama 3', views: 567, status: 'draft', updatedAt: '2024-01-12' },
+  { id: 5, name: 'Phim Hàn Quốc 5', originName: 'Korean Movie 2', views: 1890, status: 'active', updatedAt: '2024-01-11' },
+]
+</script>
+
+<template>
+  <div>
+    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h1 class="text-2xl font-black text-white">Quản lý phim</h1>
+        <p class="mt-1 text-sm text-slate-400">Quản lý tất cả phim trên CineK</p>
+      </div>
+      <button type="button"
+        class="inline-flex h-10 items-center gap-2 rounded-lg bg-yellow-400 px-4 text-sm font-black text-slate-950 transition hover:bg-yellow-300">
+        <Plus class="size-4" />
+        Thêm phim mới
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-white/10 bg-slate-900/50">
+      <div class="flex items-center gap-3 border-b border-white/10 p-4">
+        <div class="relative flex-1">
+          <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+          <input v-model="searchQuery" type="search" placeholder="Tìm kiếm phim..."
+            class="h-10 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-400 outline-none focus:border-yellow-400/50">
+        </div>
+      </div>
+
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-white/10 text-left text-xs font-semibold uppercase text-slate-400">
+              <th class="px-4 py-3">Phim</th>
+              <th class="px-4 py-3">Lượt xem</th>
+              <th class="px-4 py-3">Trạng thái</th>
+              <th class="px-4 py-3">Cập nhật</th>
+              <th class="px-4 py-3 text-right">Thao tác</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-white/5">
+            <tr v-for="movie in movies" :key="movie.id" class="transition hover:bg-white/5">
+              <td class="px-4 py-3">
+                <div class="flex items-center gap-3">
+                  <div class="grid size-10 shrink-0 place-items-center rounded-lg bg-yellow-400/10">
+                    <Film class="size-4 text-yellow-400" />
+                  </div>
+                  <div class="min-w-0">
+                    <p class="truncate text-sm font-semibold text-white">{{ movie.name }}</p>
+                    <p class="truncate text-xs text-slate-400">{{ movie.originName }}</p>
+                  </div>
+                </div>
+              </td>
+              <td class="px-4 py-3 text-sm text-slate-300">{{ movie.views.toLocaleString() }}</td>
+              <td class="px-4 py-3">
+                <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
+                  :class="movie.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
+                  {{ movie.status === 'active' ? 'Hoạt động' : 'Nháp' }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-slate-400">{{ movie.updatedAt }}</td>
+              <td class="px-4 py-3">
+                <div class="flex items-center justify-end gap-1">
+                  <button type="button"
+                    class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white">
+                    <Eye class="size-4" />
+                  </button>
+                  <button type="button"
+                    class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white">
+                    <Edit class="size-4" />
+                  </button>
+                  <button type="button"
+                    class="grid size-8 place-items-center rounded-lg text-red-400 transition hover:bg-red-400/10">
+                    <Trash2 class="size-4" />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="flex items-center justify-between border-t border-white/10 p-4">
+        <p class="text-sm text-slate-400">Hiển thị 1-5 / 1,234 phim</p>
+        <div class="flex items-center gap-2">
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
+            ‹
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg bg-yellow-400/10 text-sm font-semibold text-yellow-400">
+            1
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
+            2
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
+            3
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
+            ›
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/admin/thanh-vien.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { Edit, Mail, Search, Trash2, UserRound } from 'lucide-vue-next'
+
+definePageMeta({
+  layout: 'admin',
+})
+
+useHead({
+  title: 'Quản lý thành viên - CineK Admin',
+})
+
+const searchQuery = ref('')
+
+const users = [
+  { id: 1, name: 'Nguyễn Văn A', email: 'nguyenvana@example.com', role: 'admin', joined: '2024-01-01', status: 'active' },
+  { id: 2, name: 'Trần Thị B', email: 'tranthib@example.com', role: 'user', joined: '2024-01-05', status: 'active' },
+  { id: 3, name: 'Lê Văn C', email: 'levanc@example.com', role: 'user', joined: '2024-01-10', status: 'active' },
+  { id: 4, name: 'Phạm Thị D', email: 'phamthid@example.com', role: 'user', joined: '2024-01-12', status: 'inactive' },
+  { id: 5, name: 'Hoàng Văn E', email: 'hoangvane@example.com', role: 'moderator', joined: '2024-01-15', status: 'active' },
+]
+</script>
+
+<template>
+  <div>
+    <div class="mb-6">
+      <h1 class="text-2xl font-black text-white">Quản lý thành viên</h1>
+      <p class="mt-1 text-sm text-slate-400">Quản lý tài khoản thành viên CineK</p>
+    </div>
+
+    <div class="rounded-xl border border-white/10 bg-slate-900/50">
+      <div class="flex items-center gap-3 border-b border-white/10 p-4">
+        <div class="relative flex-1">
+          <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+          <input v-model="searchQuery" type="search" placeholder="Tìm kiếm thành viên..."
+            class="h-10 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-400 outline-none focus:border-yellow-400/50">
+        </div>
+      </div>
+
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-white/10 text-left text-xs font-semibold uppercase text-slate-400">
+              <th class="px-4 py-3">Thành viên</th>
+              <th class="px-4 py-3">Vai trò</th>
+              <th class="px-4 py-3">Trạng thái</th>
+              <th class="px-4 py-3">Tham gia</th>
+              <th class="px-4 py-3 text-right">Thao tác</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-white/5">
+            <tr v-for="user in users" :key="user.id" class="transition hover:bg-white/5">
+              <td class="px-4 py-3">
+                <div class="flex items-center gap-3">
+                  <div class="grid size-10 shrink-0 place-items-center rounded-full bg-yellow-400/10">
+                    <UserRound class="size-4 text-yellow-400" />
+                  </div>
+                  <div class="min-w-0">
+                    <p class="truncate text-sm font-semibold text-white">{{ user.name }}</p>
+                    <p class="flex items-center gap-1.5 truncate text-xs text-slate-400">
+                      <Mail class="size-3" />
+                      {{ user.email }}
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td class="px-4 py-3">
+                <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
+                  :class="{
+                    'bg-red-400/10 text-red-400': user.role === 'admin',
+                    'bg-blue-400/10 text-blue-400': user.role === 'moderator',
+                    'bg-slate-400/10 text-slate-400': user.role === 'user',
+                  }">
+                  {{ user.role === 'admin' ? 'Admin' : user.role === 'moderator' ? 'Moderator' : 'User' }}
+                </span>
+              </td>
+              <td class="px-4 py-3">
+                <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
+                  :class="user.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
+                  {{ user.status === 'active' ? 'Hoạt động' : 'Khóa' }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-slate-400">{{ user.joined }}</td>
+              <td class="px-4 py-3">
+                <div class="flex items-center justify-end gap-1">
+                  <button type="button"
+                    class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white">
+                    <Edit class="size-4" />
+                  </button>
+                  <button type="button"
+                    class="grid size-8 place-items-center rounded-lg text-red-400 transition hover:bg-red-400/10">
+                    <Trash2 class="size-4" />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="flex items-center justify-between border-t border-white/10 p-4">
+        <p class="text-sm text-slate-400">Hiển thị 1-5 / 5,678 thành viên</p>
+        <div class="flex items-center gap-2">
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
+            ‹
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg bg-yellow-400/10 text-sm font-semibold text-yellow-400">
+            1
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
+            2
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
+            3
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
+            ›
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>