feat: add movie management API and database schema

- Implemented movie CRUD operations with endpoints for creating, retrieving, updating, and deleting movies.
- Added pagination and filtering capabilities for movie retrieval.
- Integrated Redis caching for improved performance on movie data retrieval.
- Created database schema for movies with necessary fields and types.
- Added migration files for initial movie table creation and subsequent updates.
- Configured database connection using Drizzle ORM with MySQL.
- Established Redis connection utility for caching.

app/pages/admin/thanh-vien.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Edit, Mail, Search, Trash2, UserRound } from 'lucide-vue-next'
+import { Edit, Search, Trash2 } from 'lucide-vue-next'
 
 definePageMeta({
   layout: 'admin',
@@ -9,15 +9,33 @@ useHead({
   title: 'Quản lý thành viên - CineK Admin',
 })
 
-const searchQuery = ref('')
+const searchInput = ref('')
+const debouncedKeyword = ref('')
 
-const users = [
+let searchTimeout: ReturnType<typeof setTimeout> | undefined
+
+watch(searchInput, (val) => {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    debouncedKeyword.value = val.trim().toLowerCase()
+  }, 300)
+})
+
+const allUsers = [
   { 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' },
 ]
+
+const filteredUsers = computed(() => {
+  if (!debouncedKeyword.value) return allUsers
+  const kw = debouncedKeyword.value
+  return allUsers.filter((u) =>
+    u.name.toLowerCase().includes(kw) || u.email.toLowerCase().includes(kw),
+  )
+})
 </script>
 
 <template>
@@ -31,7 +49,7 @@ const users = [
       <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..."
+          <input v-model="searchInput" 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>
@@ -39,31 +57,25 @@ const users = [
       <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 class="border-b border-white/10 text-center text-xs font-semibold uppercase text-slate-400">
+              <th class="w-12 px-4 py-3 text-center">STT</th>
+              <th class="px-4 py-3 text-center">Thành viên</th>
+              <th class="px-4 py-3 text-center">Vai trò</th>
+              <th class="px-4 py-3 text-center">Trạng thái</th>
+              <th class="px-4 py-3 text-center">Tham gia</th>
+              <th class="px-4 py-3 text-center">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>
+            <tr v-for="user in filteredUsers" :key="user.id" class="transition hover:bg-white/5">
+              <td class="px-4 py-3 text-center text-sm text-slate-400">{{ filteredUsers.indexOf(user) + 1 }}</td>
+              <td class="px-4 py-3 text-center">
+                <div class="min-w-0">
+                  <p class="truncate text-sm font-semibold text-white">{{ user.name }}</p>
+                  <p class="truncate text-xs text-slate-400">{{ user.email }}</p>
                 </div>
               </td>
-              <td class="px-4 py-3">
+              <td class="px-4 py-3 text-center">
                 <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
                   :class="{
                     'bg-red-400/10 text-red-400': user.role === 'admin',
@@ -73,15 +85,15 @@ const users = [
                   {{ user.role === 'admin' ? 'Admin' : user.role === 'moderator' ? 'Moderator' : 'User' }}
                 </span>
               </td>
-              <td class="px-4 py-3">
+              <td class="px-4 py-3 text-center">
                 <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">
+              <td class="px-4 py-3 text-center text-sm text-slate-400">{{ user.joined }}</td>
+              <td class="px-4 py-3 text-center">
+                <div class="flex items-center justify-center 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" />
@@ -93,34 +105,17 @@ const users = [
                 </div>
               </td>
             </tr>
+            <tr v-if="!filteredUsers.length">
+              <td colspan="6" class="px-4 py-12 text-center text-sm text-slate-400">
+                {{ debouncedKeyword ? 'Không tìm thấy thành viên nào.' : 'Chưa có thành viên nào.' }}
+              </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>
+        <p class="text-sm text-slate-400">Hiển thị {{ filteredUsers.length }} / {{ allUsers.length }} thành viên</p>
       </div>
     </div>
   </div>