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.

Dockerfile.dev

@@ -0,0 +1,7 @@
+FROM node:22-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+EXPOSE 3002
+CMD ["npm", "run", "dev"]

app/app.vue

@@ -1,7 +1,14 @@
+<script setup lang="ts">
+const route = useRoute()
+const isAdmin = computed(() => route.path.startsWith('/admin'))
+</script>
+
 <template>
   <NuxtRouteAnnouncer />
   <NuxtLoadingIndicator color="#facc15" :height="2" />
+  <NuxtLayout>
     <NuxtPage />
-  <AppFooter />
-  <ScrollToTop />
+  </NuxtLayout>
+  <AppFooter v-if="!isAdmin" />
+  <ScrollToTop v-if="!isAdmin" />
 </template>

app/components/AppHeader.vue

@@ -1,13 +1,7 @@
 <script setup lang="ts">
 import {
-  Bell,
-  Chrome,
   Heart,
   History,
-  Loader2,
-  LockKeyhole,
-  LogOut,
-  Mail,
   Menu,
   Search,
   User,
@@ -17,28 +11,9 @@ import {
 
 const route = useRoute()
 const router = useRouter()
-const {
-  user,
-  loading: authLoading,
-  initAuth,
-  signInWithPassword,
-  signUpWithPassword,
-  signInWithGoogle,
-  resetPassword,
-  signOut,
-} = useSupabaseAuth()
 const keyword = ref(typeof route.query.q === 'string' ? route.query.q : '')
 const mobileMenuOpen = ref(false)
-const loginOpen = ref(false)
 const memberMenuOpen = ref(false)
-const authMode = ref<'login' | 'register'>('login')
-const email = ref('')
-const password = ref('')
-const authMessage = ref('')
-const authError = ref('')
-const submittingAuth = ref(false)
-const submittingProvider = ref(false)
-const defaultAvatar = 'https://thumbs.dreamstime.com/b/avatar-vietnam-character-your-project-others-avatar-vietnam-character-274539000.jpg'
 
 const navItems = [
   { label: 'Trang chủ', to: '/' },
@@ -48,22 +23,7 @@ const navItems = [
   { label: 'Phim lẻ', to: '/phim?type=single' },
 ]
 
-const memberName = computed(() => {
-  const metadata = user.value?.user_metadata || {}
-  const name = metadata.name || metadata.full_name || metadata.user_name
-  if (typeof name === 'string' && name.trim()) return name.trim()
-  return user.value?.email?.split('@')[0] || 'Thành viên'
-})
-
-const memberAvatar = computed(() => {
-  const metadata = user.value?.user_metadata || {}
-  return typeof metadata.avatar_url === 'string' && metadata.avatar_url
-    ? metadata.avatar_url
-    : defaultAvatar
-})
-
 const memberMenuItems = [
-  { label: 'Trang cá nhân', icon: UserRound, to: '/thanh-vien' },
   { label: 'Yêu thích', icon: Heart, to: '/yeu-thich' },
   { label: 'Lịch sử', icon: History, to: '/lich-su' },
 ]
@@ -85,96 +45,14 @@ function closeMobileMenu() {
   mobileMenuOpen.value = false
 }
 
-function openLogin() {
-  authMessage.value = ''
-  authError.value = ''
-  email.value = user.value?.email || ''
-  password.value = ''
-  authMode.value = 'login'
-  loginOpen.value = true
-}
-
 function handleMemberClick() {
-  if (!user.value) {
-    openLogin()
-    return
-  }
-
   memberMenuOpen.value = !memberMenuOpen.value
 }
 
-async function submitLogin() {
-  const trimmedEmail = email.value.trim()
-  if (!trimmedEmail || !password.value) return
-
-  submittingAuth.value = true
-  authMessage.value = ''
-  authError.value = ''
-
-  const { error } = authMode.value === 'login'
-    ? await signInWithPassword(trimmedEmail, password.value)
-    : await signUpWithPassword(trimmedEmail, password.value)
-
-  submittingAuth.value = false
-  if (error) {
-    authError.value = error.message
-    return
-  }
-
-  authMessage.value = authMode.value === 'login'
-    ? 'Đăng nhập thành công.'
-    : 'Đăng ký thành công. Nếu Supabase yêu cầu xác nhận, bạn mở email để xác nhận nhé.'
-
-  if (authMode.value === 'login') loginOpen.value = false
-}
-
-async function handleGoogleLogin() {
-  submittingProvider.value = true
-  authError.value = ''
-  const { error } = await signInWithGoogle()
-  submittingProvider.value = false
-  if (error) authError.value = error.message
-}
-
-async function handleResetPassword() {
-  const trimmedEmail = email.value.trim()
-  if (!trimmedEmail) {
-    authError.value = 'Nhập email trước để lấy lại mật khẩu nhé.'
-    return
-  }
-
-  submittingAuth.value = true
-  authMessage.value = ''
-  authError.value = ''
-  const { error } = await resetPassword(trimmedEmail)
-  submittingAuth.value = false
-
-  if (error) {
-    authError.value = error.message
-    return
-  }
-
-  authMessage.value = 'Đã gửi email đặt lại mật khẩu.'
-}
-
-async function handleSignOut() {
-  await signOut()
-  loginOpen.value = false
-  memberMenuOpen.value = false
-}
-
-onMounted(() => {
-  initAuth()
-})
-
 watch(() => route.path, () => {
   closeMobileMenu()
   memberMenuOpen.value = false
 })
-
-watch(user, (currentUser) => {
-  if (currentUser) loginOpen.value = false
-})
 </script>
 
 <template>
@@ -200,39 +78,21 @@ watch(user, (currentUser) => {
 
       <div class="group/member relative hidden shrink-0 items-center gap-2.5 md:flex"
         @mouseenter="memberMenuOpen = true" @mouseleave="memberMenuOpen = false">
-        <button v-if="user" type="button"
-          class="grid size-9 cursor-pointer place-items-center rounded-full bg-white/10 text-white transition hover:bg-white/16"
-          aria-label="Thông báo">
-          <Bell class="size-4 fill-current" />
-        </button>
-
         <button type="button"
           class="inline-flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-white px-2.5 pl-1 text-xs font-black text-slate-950 shadow-xl shadow-black/20 transition hover:bg-yellow-100"
-          :aria-label="user ? 'Tài khoản thành viên' : 'Đăng nhập thành viên'" @click="handleMemberClick">
-          <Loader2 v-if="authLoading" class="mx-1 size-4 animate-spin" />
-          <template v-else-if="user">
-            <img :src="memberAvatar" :alt="memberName"
-              class="size-7 rounded-full object-cover ring-2 ring-yellow-200/80">
-          </template>
-          <User v-else class="ml-1 size-4 fill-current" />
-          <span class="max-w-24 truncate">{{ user ? memberName : 'Thành viên' }}</span>
+          aria-label="Tài khoản thành viên" @click="handleMemberClick">
+          <User class="ml-1 size-4 fill-current" />
+          <span>Thành viên</span>
         </button>
 
         <Transition name="member-menu">
-          <div v-if="user && memberMenuOpen"
+          <div v-if="memberMenuOpen"
             class="absolute right-0 top-[calc(100%+0.75rem)] w-64 overflow-hidden rounded-lg border border-white/10 bg-[#101116] py-2 text-sm font-semibold text-slate-200 shadow-2xl shadow-black/40">
             <NuxtLink v-for="item in memberMenuItems" :key="item.label" :to="item.to"
               class="flex h-12 w-full cursor-pointer items-center gap-3 px-5 text-left transition hover:bg-white/8 hover:text-white">
               <component :is="item.icon" class="size-4 shrink-0" />
               {{ item.label }}
             </NuxtLink>
-            <div class="my-2 border-t border-white/10" />
-            <button type="button"
-              class="flex h-12 w-full cursor-pointer items-center gap-3 px-5 text-left font-black text-yellow-300 transition hover:bg-white/8 hover:text-white"
-              @click="handleSignOut">
-              <LogOut class="size-4 shrink-0" />
-              Đăng xuất
-            </button>
           </div>
         </Transition>
       </div>
@@ -265,130 +125,12 @@ watch(user, (currentUser) => {
               </NuxtLink>
             </nav>
             <div class="border-t border-white/10 p-4">
-              <button type="button"
-                class="inline-flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-black text-slate-950 transition hover:bg-yellow-100"
-                @click="handleMemberClick">
-                <img v-if="user" :src="memberAvatar" :alt="memberName" class="size-7 rounded-full object-cover">
-                <User v-else class="size-4 fill-current" />
-                <span>{{ user ? memberName : 'Đăng nhập thành viên' }}</span>
-              </button>
-              <div v-if="user" class="mt-3 overflow-hidden rounded-lg border border-white/10 bg-white/5">
               <NuxtLink v-for="item in memberMenuItems" :key="item.label" :to="item.to"
-                  class="flex h-11 w-full cursor-pointer items-center gap-3 px-4 text-left text-sm font-semibold text-slate-200 transition hover:bg-white/8 hover:text-white">
+                class="flex h-11 w-full cursor-pointer items-center gap-3 px-4 text-left text-sm font-semibold text-slate-200 transition hover:bg-white/8 hover:text-white"
+                @click="closeMobileMenu">
                 <component :is="item.icon" class="size-4 shrink-0" />
                 {{ item.label }}
               </NuxtLink>
-                <div class="border-t border-white/10" />
-                <button type="button"
-                  class="flex h-11 w-full cursor-pointer items-center gap-3 px-4 text-left text-sm font-black text-yellow-300 transition hover:bg-white/8 hover:text-white"
-                  @click="handleSignOut">
-                  <LogOut class="size-4 shrink-0" />
-                  Đăng xuất
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Transition>
-
-      <Transition name="auth-modal">
-        <div v-if="loginOpen" class="fixed inset-0 z-70 grid place-items-center px-3 py-6">
-          <div class="absolute inset-0 bg-slate-950/80 backdrop-blur-sm" @click="loginOpen = false" />
-          <div
-            class="relative grid w-full max-w-5xl overflow-hidden rounded-lg border border-white/10 bg-slate-950 text-white shadow-2xl shadow-black/50 md:grid-cols-[1fr_1fr]">
-            <button type="button"
-              class="absolute right-3 top-3 z-10 grid size-9 place-items-center rounded-full text-white transition hover:bg-white/10"
-              aria-label="Đóng đăng nhập" @click="loginOpen = false">
-              <X class="size-5" />
-            </button>
-
-            <div class="auth-poster-panel hidden min-h-128 items-end p-8 md:flex">
-              <div>
-                <AppLogo />
-              </div>
-            </div>
-
-            <div class="bg-slate-950 px-5 py-10 sm:px-10 md:px-16 md:py-16">
-              <div v-if="user">
-                <p class="text-sm font-bold text-yellow-300">Thành viên</p>
-                <h2 class="mt-2 text-2xl font-black">Tài khoản của bạn</h2>
-                <p class="mt-6 rounded-md bg-white/8 px-4 py-3 text-sm font-semibold text-slate-100">{{ user.email }}
-                </p>
-                <button type="button"
-                  class="mt-5 inline-flex h-12 w-full items-center justify-center gap-2 rounded-md bg-yellow-300 text-sm font-black text-slate-950 transition hover:bg-white"
-                  @click="handleSignOut">
-                  <LogOut class="size-4" />
-                  Đăng xuất
-                </button>
-              </div>
-
-              <form v-else @submit.prevent="submitLogin">
-                <h2 class="text-2xl font-black">{{ authMode === 'login' ? 'Đăng nhập' : 'Đăng ký' }}</h2>
-                <p class="mt-5 text-sm text-slate-300">
-                  <template v-if="authMode === 'login'">
-                    Nếu bạn chưa có tài khoản,
-                    <button type="button" class="font-black text-yellow-300 hover:text-white"
-                      @click="authMode = 'register'; authError = ''; authMessage = ''">
-                      đăng ký ngay
-                    </button>
-                  </template>
-                  <template v-else>
-                    Nếu bạn đã có tài khoản,
-                    <button type="button" class="font-black text-yellow-300 hover:text-white"
-                      @click="authMode = 'login'; authError = ''; authMessage = ''">
-                      đăng nhập ngay
-                    </button>
-                  </template>
-                </p>
-
-                <div class="mt-8 space-y-3">
-                  <div class="flex h-12 items-center rounded-md border border-white/10 bg-white/8 px-4">
-                    <Mail class="mr-3 size-4 shrink-0 text-slate-400" />
-                    <input v-model="email" type="email" required placeholder="Email"
-                      class="h-full w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
-                  </div>
-                  <div class="flex h-12 items-center rounded-md border border-white/10 bg-white/8 px-4">
-                    <LockKeyhole class="mr-3 size-4 shrink-0 text-slate-400" />
-                    <input v-model="password" type="password" required minlength="6" placeholder="Mật khẩu"
-                      class="h-full w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
-                  </div>
-                </div>
-
-                <button type="button"
-                  class="mt-5 inline-flex h-12 w-full items-center justify-center gap-2 rounded-md border border-white/12 bg-white/8 text-sm font-black text-white transition hover:bg-white/14 disabled:cursor-not-allowed disabled:opacity-70"
-                  :disabled="submittingProvider" @click="handleGoogleLogin">
-                  <Loader2 v-if="submittingProvider" class="size-4 animate-spin" />
-                  <Chrome v-else class="size-4" />
-                  Tiếp tục với Google
-                </button>
-
-                <div class="my-5 flex items-center gap-3 text-xs font-semibold text-slate-400">
-                  <span class="h-px flex-1 bg-white/10" />
-                  hoặc
-                  <span class="h-px flex-1 bg-white/10" />
-                </div>
-
-                <button type="submit"
-                  class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-md bg-yellow-300 text-sm font-black text-slate-950 transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-70"
-                  :disabled="submittingAuth">
-                  <Loader2 v-if="submittingAuth" class="size-4 animate-spin" />
-                  <User v-else class="size-4 fill-current" />
-                  {{ authMode === 'login' ? 'Đăng nhập' : 'Đăng ký' }}
-                </button>
-
-                <button v-if="authMode === 'login'" type="button"
-                  class="mt-7 block w-full text-center text-sm font-bold text-white hover:text-yellow-300"
-                  @click="handleResetPassword">
-                  Quên mật khẩu?
-                </button>
-
-                <p v-if="authMessage" class="mt-4 rounded-md bg-yellow-400/12 px-3 py-2 text-sm text-yellow-100">
-                  {{ authMessage }}
-                </p>
-                <p v-if="authError" class="mt-4 rounded-md bg-red-500/12 px-3 py-2 text-sm text-red-100">
-                  {{ authError }}
-                </p>
-              </form>
             </div>
           </div>
         </div>
@@ -418,16 +160,6 @@ watch(user, (currentUser) => {
   transform: translateX(-100%);
 }
 
-.auth-modal-enter-active,
-.auth-modal-leave-active {
-  transition: opacity 0.18s ease;
-}
-
-.auth-modal-enter-from,
-.auth-modal-leave-to {
-  opacity: 0;
-}
-
 .member-menu-enter-active,
 .member-menu-leave-active {
   transition: opacity 0.16s ease, transform 0.16s ease;
@@ -438,29 +170,4 @@ watch(user, (currentUser) => {
   opacity: 0;
   transform: translateY(-0.35rem);
 }
-
-.auth-poster-panel {
-  background:
-    linear-gradient(180deg, rgba(2, 6, 23, 0.45), rgba(2, 6, 23, 0.92)),
-    linear-gradient(135deg, rgba(234, 179, 8, 0.14) 0 18%, transparent 18% 100%),
-    radial-gradient(circle at 22% 18%, rgba(250, 204, 21, 0.22), transparent 8rem),
-    linear-gradient(120deg, #422006 0%, #0f172a 54%, #020617 100%);
-  position: relative;
-}
-
-.auth-poster-panel::before {
-  position: absolute;
-  inset: 0;
-  background-image:
-    linear-gradient(115deg, transparent 0 10%, rgba(234, 179, 8, 0.16) 10% 10.6%, transparent 10.6% 100%),
-    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.06) 0 7.5rem, transparent 7.5rem 8rem),
-    repeating-linear-gradient(15deg, rgba(250, 204, 21, 0.1) 0 10rem, transparent 10rem 10.6rem);
-  content: "";
-  opacity: 0.75;
-}
-
-.auth-poster-panel>div {
-  position: relative;
-  z-index: 1;
-}
 </style>

app/composables/useMovieLibrary.ts

@@ -56,31 +56,15 @@ function legacyKeyFor(key: string) {
 }
 
 export function useMovieLibrary() {
-  const { $supabase } = useNuxtApp()
-  const { user } = useSupabaseAuth()
-
-  async function loadItems(key: string, table: string, limit = 30) {
+  async function loadItems(key: string, limit = 30) {
     const localItems = readLocalItems(key, legacyKeyFor(key))
 
-    if (user.value) {
-      const { data, error } = await $supabase
-        .from(table)
-        .select('source, slug, name, origin_name, thumb, poster, updated_at')
-        .eq('user_id', user.value.id)
-        .order('updated_at', { ascending: false })
-        .limit(limit)
-
-      if (!error && data) {
-        return data.map(normalizeLibraryItem).filter(Boolean) as LibraryMovieItem[]
-      }
-    }
-
     return localItems
       .sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
       .slice(0, limit)
   }
 
-  async function saveItem(key: string, table: string, item: LibraryMovieItem) {
+  async function saveItem(key: string, item: LibraryMovieItem) {
     const normalizedItem = normalizeLibraryItem({
       ...item,
       updatedAt: Date.now(),
@@ -95,63 +79,25 @@ export function useMovieLibrary() {
 
     writeLocalItems(key, nextItems)
 
-    if (user.value) {
-      await $supabase
-        .from(table)
-        .upsert({
-          user_id: user.value.id,
-          source: normalizedItem.source,
-          slug: normalizedItem.slug,
-          name: normalizedItem.name,
-          origin_name: normalizedItem.originName || null,
-          thumb: normalizedItem.thumb || null,
-          poster: normalizedItem.poster || null,
-          updated_at: new Date(normalizedItem.updatedAt || Date.now()).toISOString(),
-        }, {
-          onConflict: 'user_id,source,slug',
-        })
-    }
-
     return true
   }
 
-  async function removeItem(key: string, table: string, item: LibraryMovieItem) {
+  async function removeItem(key: string, item: LibraryMovieItem) {
     const nextItems = readLocalItems(key, legacyKeyFor(key))
       .filter((savedItem) => !(savedItem.slug === item.slug && savedItem.source === item.source))
     writeLocalItems(key, nextItems)
-
-    if (user.value) {
-      await $supabase
-        .from(table)
-        .delete()
-        .eq('user_id', user.value.id)
-        .eq('source', item.source)
-        .eq('slug', item.slug)
-    }
   }
 
-  async function isSaved(key: string, table: string, item: LibraryMovieItem) {
-    const localSaved = readLocalItems(key, legacyKeyFor(key))
+  async function isSaved(key: string, item: LibraryMovieItem) {
+    return readLocalItems(key, legacyKeyFor(key))
       .some((savedItem) => savedItem.slug === item.slug && savedItem.source === item.source)
-
-    if (!user.value) return localSaved
-
-    const { data, error } = await $supabase
-      .from(table)
-      .select('slug')
-      .eq('user_id', user.value.id)
-      .eq('source', item.source)
-      .eq('slug', item.slug)
-      .maybeSingle()
-
-    return error ? localSaved : Boolean(data)
   }
 
   return {
-    loadFavorites: (limit?: number) => loadItems(favoriteKey, 'favorite_movies', limit),
-    saveFavorite: (item: LibraryMovieItem) => saveItem(favoriteKey, 'favorite_movies', item),
-    removeFavorite: (item: LibraryMovieItem) => removeItem(favoriteKey, 'favorite_movies', item),
-    isFavorite: (item: LibraryMovieItem) => isSaved(favoriteKey, 'favorite_movies', item),
-    saveWatchLater: (item: LibraryMovieItem) => saveItem(watchLaterKey, 'watch_later_movies', item),
+    loadFavorites: (limit?: number) => loadItems(favoriteKey, limit),
+    saveFavorite: (item: LibraryMovieItem) => saveItem(favoriteKey, item),
+    removeFavorite: (item: LibraryMovieItem) => removeItem(favoriteKey, item),
+    isFavorite: (item: LibraryMovieItem) => isSaved(favoriteKey, item),
+    saveWatchLater: (item: LibraryMovieItem) => saveItem(watchLaterKey, item),
   }
 }

app/composables/useSupabaseAuth.ts

@@ -1,86 +0,0 @@
-import type { User } from '@supabase/supabase-js'
-
-let authListenerStarted = false
-
-export function useSupabaseAuth() {
-  const { $supabase } = useNuxtApp()
-  const user = useState<User | null>('supabase-user', () => null)
-  const loading = useState('supabase-auth-loading', () => false)
-
-  async function initAuth() {
-    if (!import.meta.client || authListenerStarted) return
-
-    authListenerStarted = true
-    loading.value = true
-
-    const { data } = await $supabase.auth.getSession()
-    user.value = data.session?.user ?? null
-    loading.value = false
-
-    $supabase.auth.onAuthStateChange((_event, session) => {
-      user.value = session?.user ?? null
-    })
-  }
-
-  function authRedirectUrl() {
-    const redirectTo = import.meta.client ? window.location.origin : undefined
-    return redirectTo
-  }
-
-  async function signInWithEmail(email: string) {
-    return $supabase.auth.signInWithOtp({
-      email,
-      options: {
-        emailRedirectTo: authRedirectUrl(),
-      },
-    })
-  }
-
-  async function signInWithPassword(email: string, password: string) {
-    return $supabase.auth.signInWithPassword({
-      email,
-      password,
-    })
-  }
-
-  async function signUpWithPassword(email: string, password: string) {
-    return $supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        emailRedirectTo: authRedirectUrl(),
-      },
-    })
-  }
-
-  async function signInWithGoogle() {
-    return $supabase.auth.signInWithOAuth({
-      provider: 'google',
-      options: {
-        redirectTo: authRedirectUrl(),
-      },
-    })
-  }
-
-  async function resetPassword(email: string) {
-    return $supabase.auth.resetPasswordForEmail(email, {
-      redirectTo: authRedirectUrl(),
-    })
-  }
-
-  async function signOut() {
-    return $supabase.auth.signOut()
-  }
-
-  return {
-    user,
-    loading,
-    initAuth,
-    signInWithEmail,
-    signInWithPassword,
-    signUpWithPassword,
-    signInWithGoogle,
-    resetPassword,
-    signOut,
-  }
-}

app/composables/useWatchHistory.ts

@@ -63,49 +63,9 @@ function writeLocalHistory(items: WatchHistoryItem[]) {
 }
 
 export function useWatchHistory() {
-  const { $supabase } = useNuxtApp()
-  const { user } = useSupabaseAuth()
-
   async function loadWatchHistory(limit = 12) {
     const localItems = readLocalHistory()
 
-    if (user.value) {
-      if (localItems.length) {
-        await $supabase
-          .from('watch_history')
-          .upsert(localItems.slice(0, 20).map((item) => ({
-            user_id: user.value?.id,
-            source: item.source,
-            slug: item.slug,
-            name: item.name,
-            origin_name: item.originName || null,
-            thumb: item.thumb || null,
-            poster: item.poster || null,
-            episode_name: item.episodeName || null,
-            episode_index: item.episodeIndex || 0,
-            server_index: item.serverIndex || 0,
-            progress_seconds: Math.floor(item.progressSeconds || 0),
-            duration_seconds: Math.floor(item.durationSeconds || 0),
-            updated_at: new Date(item.updatedAt || Date.now()).toISOString(),
-          })), {
-            onConflict: 'user_id,source,slug',
-          })
-      }
-
-      const { data, error } = await $supabase
-        .from('watch_history')
-        .select('source, slug, name, origin_name, thumb, poster, episode_name, episode_index, server_index, progress_seconds, duration_seconds, updated_at')
-        .eq('user_id', user.value.id)
-        .order('updated_at', { ascending: false })
-        .limit(limit)
-
-      if (!error && data) {
-        return data
-          .map(normalizeHistoryItem)
-          .filter(Boolean) as WatchHistoryItem[]
-      }
-    }
-
     return localItems
       .sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
       .slice(0, limit)
@@ -125,28 +85,6 @@ export function useWatchHistory() {
     ].slice(0, 20)
 
     writeLocalHistory(localItems)
-
-    if (!user.value) return
-
-    await $supabase
-      .from('watch_history')
-      .upsert({
-        user_id: user.value.id,
-        source: normalizedItem.source,
-        slug: normalizedItem.slug,
-        name: normalizedItem.name,
-        origin_name: normalizedItem.originName || null,
-        thumb: normalizedItem.thumb || null,
-        poster: normalizedItem.poster || null,
-        episode_name: normalizedItem.episodeName || null,
-        episode_index: normalizedItem.episodeIndex || 0,
-        server_index: normalizedItem.serverIndex || 0,
-        progress_seconds: Math.floor(normalizedItem.progressSeconds || 0),
-        duration_seconds: Math.floor(normalizedItem.durationSeconds || 0),
-        updated_at: new Date(normalizedItem.updatedAt || Date.now()).toISOString(),
-      }, {
-        onConflict: 'user_id,source,slug',
-      })
   }
 
   async function clearWatchHistory() {
@@ -154,13 +92,6 @@ export function useWatchHistory() {
       window.localStorage.removeItem(watchHistoryKey)
       window.localStorage.removeItem(legacyWatchHistoryKey)
     }
-
-    if (user.value) {
-      await $supabase
-        .from('watch_history')
-        .delete()
-        .eq('user_id', user.value.id)
-    }
   }
 
   return {

app/layouts/admin.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import {
+  BarChart3,
+  Film,
+  Home,
+  LogOut,
+  Menu,
+  Settings,
+  Users,
+  X,
+} from 'lucide-vue-next'
+
+const route = useRoute()
+const sidebarOpen = ref(false)
+
+const navItems = [
+  { label: 'Dashboard', icon: Home, to: '/admin' },
+  { label: 'Phim', icon: Film, to: '/admin/phim' },
+  { label: 'Thành viên', icon: Users, to: '/admin/thanh-vien' },
+  { label: 'Cài đặt', icon: Settings, to: '/admin/cai-dat' },
+]
+
+function isActive(to: string) {
+  if (to === '/admin') return route.path === '/admin'
+  return route.path.startsWith(to)
+}
+
+function closeSidebar() {
+  sidebarOpen.value = false
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-slate-950">
+    <aside
+      class="fixed inset-y-0 left-0 z-40 w-64 transform border-r border-white/10 bg-slate-900 transition-transform lg:translate-x-0"
+      :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
+      <div class="flex h-16 items-center justify-between border-b border-white/10 px-4">
+        <NuxtLink to="/admin" class="flex items-center gap-2">
+          <div class="grid size-8 place-items-center rounded-lg bg-yellow-400">
+            <Film class="size-4 text-slate-950" />
+          </div>
+          <span class="text-lg font-black text-white">CineK Admin</span>
+        </NuxtLink>
+        <button type="button" class="grid size-8 place-items-center rounded-lg text-white hover:bg-white/10 lg:hidden"
+          @click="closeSidebar">
+          <X class="size-5" />
+        </button>
+      </div>
+
+      <nav class="flex flex-col gap-1 p-4">
+        <NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
+          class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-semibold transition"
+          :class="isActive(item.to)
+            ? 'bg-yellow-400/10 text-yellow-400'
+            : 'text-slate-300 hover:bg-white/5 hover:text-white'">
+          <component :is="item.icon" class="size-5" />
+          {{ item.label }}
+        </NuxtLink>
+      </nav>
+
+      <div class="absolute inset-x-0 bottom-0 border-t border-white/10 p-4">
+        <NuxtLink to="/"
+          class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-semibold text-slate-300 transition hover:bg-white/5 hover:text-white">
+          <Home class="size-5" />
+          Về trang chủ
+        </NuxtLink>
+      </div>
+    </aside>
+
+    <div class="lg:pl-64">
+      <header
+        class="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-white/10 bg-slate-950/80 px-4 backdrop-blur-xl lg:px-6">
+        <button type="button" class="grid size-10 place-items-center rounded-lg text-white hover:bg-white/10 lg:hidden"
+          @click="sidebarOpen = true">
+          <Menu class="size-5" />
+        </button>
+
+        <div class="ml-auto flex items-center gap-3">
+          <div class="flex items-center gap-3">
+            <div class="grid size-9 place-items-center rounded-full bg-yellow-400/10">
+              <span class="text-sm font-black text-yellow-400">A</span>
+            </div>
+            <div class="hidden sm:block">
+              <p class="text-sm font-semibold text-white">Admin</p>
+              <p class="text-xs text-slate-400">Administrator</p>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main class="p-4 lg:p-6">
+        <slot />
+      </main>
+    </div>
+
+    <Transition name="sidebar-fade">
+      <div v-if="sidebarOpen" class="fixed inset-0 z-30 bg-black/60 backdrop-blur-sm lg:hidden"
+        @click="closeSidebar" />
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.sidebar-fade-enter-active,
+.sidebar-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.sidebar-fade-enter-from,
+.sidebar-fade-leave-to {
+  opacity: 0;
+}
+</style>

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>

app/pages/index.vue

@@ -33,7 +33,6 @@ const hero = computed(() => heroSlides.value[heroIndex.value] ?? movies.value[0]
 const heroDetail = ref<any>(null)
 const sourceStatus = computed(() => data.value?.sources ?? [])
 const watchHistory = ref<WatchHistoryItem[]>([])
-const { user, initAuth } = useSupabaseAuth()
 const {
   loadWatchHistory: fetchWatchHistory,
   clearWatchHistory: removeWatchHistory,
@@ -252,12 +251,7 @@ watch(hero, async (currentHero) => {
   }
 }, { immediate: true })
 
-watch(user, () => {
-  loadWatchHistory()
-})
-
 onMounted(() => {
-  initAuth()
   heroTimer = setInterval(nextHero, 6500)
   loadWatchHistory()
   window.addEventListener('storage', loadWatchHistory)

app/pages/lich-su.vue

@@ -2,7 +2,6 @@
 import { Clock3, Trash2 } from 'lucide-vue-next'
 import type { WatchHistoryItem } from '~/composables/useWatchHistory'
 
-const { initAuth } = useSupabaseAuth()
 const { loadWatchHistory, clearWatchHistory } = useWatchHistory()
 const historyItems = ref<WatchHistoryItem[]>([])
 const loading = ref(true)
@@ -60,7 +59,6 @@ async function removeHistory() {
 }
 
 onMounted(async () => {
-  await initAuth()
   await refreshHistory()
 })
 

app/pages/phim/[slug].vue

@@ -10,7 +10,6 @@ const activeTab = ref<'episodes' | 'actors'>('episodes')
 const isFavoriteMovie = ref(false)
 const actionMessage = ref('')
 const actionBusy = ref(false)
-const { user, initAuth } = useSupabaseAuth()
 const {
   isFavorite,
   saveFavorite,
@@ -126,7 +125,7 @@ async function toggleFavorite() {
   } else {
     await saveFavorite(libraryItem.value)
     isFavoriteMovie.value = true
-    flashActionMessage(user.value ? 'Đã lưu vào yêu thích.' : 'Đã lưu yêu thích trên thiết bị này.')
+    flashActionMessage('Đã lưu vào yêu thích.')
   }
   actionBusy.value = false
 }
@@ -137,7 +136,7 @@ async function addToWatchLater() {
   actionBusy.value = true
   await saveWatchLater(libraryItem.value)
   actionBusy.value = false
-  flashActionMessage(user.value ? 'Đã thêm vào danh sách xem sau.' : 'Đã thêm vào danh sách xem sau trên thiết bị này.')
+  flashActionMessage('Đã thêm vào danh sách xem sau.')
 }
 
 async function shareMovie() {
@@ -164,7 +163,6 @@ async function shareMovie() {
 }
 
 onMounted(async () => {
-  await initAuth()
   await refreshFavoriteState()
 })
 
@@ -176,7 +174,7 @@ watch(requestedSources, () => {
   selectedServer.value = 0
 })
 
-watch([libraryItem, user], () => {
+watch(libraryItem, () => {
   refreshFavoriteState()
 })
 

app/pages/thanh-vien.vue

@@ -1,31 +1,12 @@
 <script setup lang="ts">
-import { Clock3, Heart, Mail, UserRound } from 'lucide-vue-next'
-
-const { user, loading, initAuth } = useSupabaseAuth()
-
-const defaultAvatar = 'https://thumbs.dreamstime.com/b/avatar-vietnam-character-your-project-others-avatar-vietnam-character-274539000.jpg'
-const memberName = computed(() => {
-  const metadata = user.value?.user_metadata || {}
-  const name = metadata.name || metadata.full_name || metadata.user_name
-  if (typeof name === 'string' && name.trim()) return name.trim()
-  return user.value?.email?.split('@')[0] || 'Thành viên'
-})
-
-const memberAvatar = computed(() => {
-  const metadata = user.value?.user_metadata || {}
-  return typeof metadata.avatar_url === 'string' && metadata.avatar_url ? metadata.avatar_url : defaultAvatar
-})
-
-onMounted(() => {
-  initAuth()
-})
+import { Clock3, Heart } from 'lucide-vue-next'
 
 useHead({
-  title: 'Trang cá nhân - CineK',
+  title: 'Thư viện - CineK',
   meta: [
     {
       name: 'description',
-      content: 'Quản lý tài khoản CineK, đồng bộ lịch sử xem, danh sách yêu thích và các phim muốn xem sau.',
+      content: 'Quản lý lịch sử xem, danh sách yêu thích và các phim muốn xem sau trên CineK.',
     },
   ],
 })
@@ -37,33 +18,11 @@ useHead({
 
     <section class="mx-auto max-w-390 px-4 pb-16 pt-28 sm:px-6 lg:px-8 lg:pt-32 xl:px-10">
       <div class="mb-6">
-        <p class="text-sm font-black uppercase text-yellow-300">Thành viên</p>
-        <h1 class="mt-2 text-3xl font-black sm:text-4xl">Trang cá nhân</h1>
+        <p class="text-sm font-black uppercase text-yellow-300">Thư viện</p>
+        <h1 class="mt-2 text-3xl font-black sm:text-4xl">Của bạn</h1>
       </div>
 
-      <div v-if="loading" class="rounded-lg border border-white/10 bg-white/6 p-5">
-        <div class="h-24 animate-pulse rounded-md bg-white/10" />
-      </div>
-
-      <div v-else-if="user" class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_22rem]">
-        <section class="rounded-lg border border-white/10 bg-white/6 p-5 sm:p-6">
-          <div class="flex flex-col gap-5 sm:flex-row sm:items-center">
-            <img :src="memberAvatar" :alt="memberName"
-              class="size-24 shrink-0 rounded-full object-cover ring-4 ring-yellow-300/30">
-            <div class="min-w-0">
-              <h2 class="truncate text-2xl font-black">{{ memberName }}</h2>
-              <p class="mt-2 inline-flex items-center gap-2 text-sm font-semibold text-slate-300">
-                <Mail class="size-4 text-yellow-300" />
-                {{ user.email }}
-              </p>
-              <p class="mt-4 max-w-2xl text-sm leading-6 text-slate-400">
-                Tài khoản này dùng để đồng bộ lịch sử xem và các dữ liệu cá nhân của bạn trên CineK.
-              </p>
-            </div>
-          </div>
-        </section>
-
-        <aside class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
+      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
         <NuxtLink to="/lich-su"
           class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
           <span class="grid size-10 place-items-center rounded-md bg-yellow-300 text-slate-950">
@@ -84,15 +43,6 @@ useHead({
             <span class="text-sm text-slate-400">Phim bạn đã lưu</span>
           </span>
         </NuxtLink>
-        </aside>
-      </div>
-
-      <div v-else class="rounded-lg border border-white/10 bg-white/6 p-6">
-        <UserRound class="size-10 text-yellow-300" />
-        <h2 class="mt-4 text-xl font-black">Bạn chưa đăng nhập</h2>
-        <p class="mt-2 text-sm leading-6 text-slate-300">
-          Bấm nút Thành viên trên header để đăng nhập hoặc đăng ký tài khoản.
-        </p>
       </div>
     </section>
   </main>

app/pages/xem/[slug].vue

@@ -70,7 +70,6 @@ const {
   loadWatchHistory: fetchWatchHistory,
   saveWatchHistory: persistWatchHistory,
 } = useWatchHistory()
-const { user, initAuth } = useSupabaseAuth()
 const {
   isFavorite,
   saveFavorite,
@@ -886,7 +885,7 @@ async function toggleFavorite() {
   } else {
     await saveFavorite(libraryItem.value)
     isFavoriteMovie.value = true
-    flashActionMessage(user.value ? 'Đã lưu vào yêu thích.' : 'Đã lưu yêu thích trên thiết bị này.')
+    flashActionMessage('Đã lưu vào yêu thích.')
   }
   actionBusy.value = false
 }
@@ -897,7 +896,7 @@ async function addToWatchLater() {
   actionBusy.value = true
   await saveWatchLater(libraryItem.value)
   actionBusy.value = false
-  flashActionMessage(user.value ? 'Đã thêm vào danh sách xem sau.' : 'Đã thêm vào danh sách xem sau trên thiết bị này.')
+  flashActionMessage('Đã thêm vào danh sách xem sau.')
 }
 
 async function shareMovie() {
@@ -921,7 +920,6 @@ async function shareMovie() {
 }
 
 onMounted(async () => {
-  await initAuth()
   await refreshFavoriteState()
   document.addEventListener('visibilitychange', handleVisibilityChange)
   document.addEventListener('keydown', handleKeyboardShortcut)
@@ -972,7 +970,7 @@ watch([canUseEmbed, canUseHls], () => {
   immediate: true,
 })
 
-watch([libraryItem, user], () => {
+watch(libraryItem, () => {
   refreshFavoriteState()
 })
 

app/pages/yeu-thich.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { Heart, UserRound } from 'lucide-vue-next'
+import { Heart } from 'lucide-vue-next'
 import type { LibraryMovieItem } from '~/composables/useMovieLibrary'
 
-const { user, loading: authLoading, initAuth } = useSupabaseAuth()
 const { loadFavorites } = useMovieLibrary()
 const favoriteItems = ref<LibraryMovieItem[]>([])
 const loading = ref(true)
@@ -23,14 +22,9 @@ function movieLink(item: LibraryMovieItem) {
 }
 
 onMounted(async () => {
-  await initAuth()
   await refreshFavorites()
 })
 
-watch(user, () => {
-  refreshFavorites()
-})
-
 useHead({
   title: 'Yêu thích - CineK',
   meta: [
@@ -52,7 +46,7 @@ useHead({
         <h1 class="mt-2 text-3xl font-black sm:text-4xl">Yêu thích</h1>
       </div>
 
-      <div v-if="loading || authLoading" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
+      <div v-if="loading" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
         <div v-for="item in 12" :key="item" class="aspect-2/3 animate-pulse rounded-md bg-white/10" />
       </div>
 
@@ -75,7 +69,7 @@ useHead({
         </NuxtLink>
       </div>
 
-      <div v-else-if="user"
+      <div v-else
         class="flex min-h-80 flex-col items-center justify-center rounded-lg border border-white/10 bg-white/6 p-6 text-center">
         <Heart class="size-12 text-yellow-300" />
         <h2 class="mt-4 text-xl font-black">Chưa có phim yêu thích</h2>
@@ -87,14 +81,6 @@ useHead({
           Duyệt phim
         </NuxtLink>
       </div>
-
-      <div v-else class="rounded-lg border border-white/10 bg-white/6 p-6">
-        <UserRound class="size-10 text-yellow-300" />
-        <h2 class="mt-4 text-xl font-black">Bạn chưa đăng nhập</h2>
-        <p class="mt-2 text-sm leading-6 text-slate-300">
-          Đăng nhập để đồng bộ danh sách yêu thích, hoặc vẫn có thể lưu tạm trên thiết bị này.
-        </p>
-      </div>
     </section>
   </main>
 </template>

app/plugins/supabase.ts

@@ -1,18 +0,0 @@
-import { createClient } from '@supabase/supabase-js'
-
-export default defineNuxtPlugin(() => {
-  const config = useRuntimeConfig()
-  const supabase = createClient(config.public.supabaseUrl, config.public.supabaseKey, {
-    auth: {
-      persistSession: import.meta.client,
-      autoRefreshToken: import.meta.client,
-      detectSessionInUrl: import.meta.client,
-    },
-  })
-
-  return {
-    provide: {
-      supabase,
-    },
-  }
-})

docker-compose.yml

@@ -2,14 +2,14 @@ services:
   cinek:
     build:
       context: .
-      dockerfile: Dockerfile
+      dockerfile: Dockerfile.dev
     container_name: cinek
     restart: unless-stopped
     environment:
-      NODE_ENV: production
       HOST: 0.0.0.0
       PORT: 3002
-      NITRO_HOST: 0.0.0.0
-      NITRO_PORT: 3002
     ports:
       - "3002:3002"
+    volumes:
+      - .:/app
+      - /app/node_modules

nuxt.config.ts

@@ -25,12 +25,6 @@ export default defineNuxtConfig({
       ],
     },
   },
-  runtimeConfig: {
-    public: {
-      supabaseUrl: process.env.SUPABASE_URL,
-      supabaseKey: process.env.SUPABASE_KEY,
-    },
-  },
   devServer: {
     host: '0.0.0.0',
     port: 3002,

package-lock.json

@@ -7,7 +7,6 @@
       "name": "cinek",
       "hasInstallScript": true,
       "dependencies": {
-        "@supabase/supabase-js": "^2.106.0",
         "@tailwindcss/vite": "^4.3.0",
         "hls.js": "^1.6.16",
         "lucide-vue-next": "^1.0.0",
@@ -3394,90 +3393,6 @@
       "integrity": "sha512-BMq1K3DsElxDWawkX6eLg9+CKJrTVGCBAWVuHXVUV2u0s2711qiChLSId6ikYPfxhdYocLNt3wWwSvDiTvFabw==",
       "license": "CC0-1.0"
     },
-    "node_modules/@supabase/auth-js": {
-      "version": "2.106.0",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.106.0.tgz",
-      "integrity": "sha512-JY7602OvjK2l3BjsQkpePpxR+6P0iG37gCrZNWAMhAuNh1iFnhGRwj/y5EshUG0INMPGFrj0UA9MErQ/kOEKFg==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "2.8.1"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@supabase/functions-js": {
-      "version": "2.106.0",
-      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.106.0.tgz",
-      "integrity": "sha512-ADIkJYH5w7HbnGVAAlCbyKoLF5QdfyezBLfYXpUqhxZOacK6YepOvnP/8p4p+50bhTPWp6VhDxu19KO7e/qU2g==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "2.8.1"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@supabase/phoenix": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@supabase/phoenix/-/phoenix-0.4.2.tgz",
-      "integrity": "sha512-YSAGnmDAfuleFCVt3CeurQZAhxRfXWeZIIkwp7NhYzQ1UwW6ePSnzsFAiUm/mbCkfoCf70QQHKW/K6RKh52a4A==",
-      "license": "MIT"
-    },
-    "node_modules/@supabase/postgrest-js": {
-      "version": "2.106.0",
-      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.106.0.tgz",
-      "integrity": "sha512-vNKFAXQrtmUn7J3LbN+uMlt0jciAwRIBpdy6Do4DKrpf1xj0kJhbqXTX4y8ziewWUEEx8G5GPnDmprXXaO9f3w==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "2.8.1"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@supabase/realtime-js": {
-      "version": "2.106.0",
-      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.106.0.tgz",
-      "integrity": "sha512-mYZoaYpkyjlecixbvxCu0h3jw12uHfEcUqNdaRATNI8zQVI5arels+VJzAGcHwNiD+/Juv0OXIuk+M7SHsdI4A==",
-      "license": "MIT",
-      "dependencies": {
-        "@supabase/phoenix": "^0.4.2",
-        "tslib": "2.8.1"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@supabase/storage-js": {
-      "version": "2.106.0",
-      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.106.0.tgz",
-      "integrity": "sha512-BHc3nIjD3zfdDxBenphXrLJSoQ+qwo24VD96cVzmjBFbQVk5krvwRNUXrA5ozPplA3Vhlst2d/hy9R9ViqH2lg==",
-      "license": "MIT",
-      "dependencies": {
-        "iceberg-js": "^0.8.1",
-        "tslib": "2.8.1"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@supabase/supabase-js": {
-      "version": "2.106.0",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.106.0.tgz",
-      "integrity": "sha512-OOoo3sLj9iVXNp6b+fkyOfFeQrvvNy7nQbaONNf72dOaictUeS39hFDS9argIRTag6M3ZxIypNWcrDAwLgUihQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@supabase/auth-js": "2.106.0",
-        "@supabase/functions-js": "2.106.0",
-        "@supabase/postgrest-js": "2.106.0",
-        "@supabase/realtime-js": "2.106.0",
-        "@supabase/storage-js": "2.106.0"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
     "node_modules/@tailwindcss/node": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz",
@@ -6055,15 +5970,6 @@
         "node": ">=16.17.0"
       }
     },
-    "node_modules/iceberg-js": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
-      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -9299,7 +9205,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "optional": true
     },
     "node_modules/type-fest": {
       "version": "5.6.0",

package.json

@@ -11,7 +11,6 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@supabase/supabase-js": "^2.106.0",
     "@tailwindcss/vite": "^4.3.0",
     "hls.js": "^1.6.16",
     "lucide-vue-next": "^1.0.0",