sort in user table

api.ts

@@ -12,6 +12,7 @@ export const API = {
     PRESIGNED: `${API_URL_ROOT}/media/presigned`
   },
   Auth : {
+    LOGOUT: `${API_URL_ROOT}/auth/logout`,
     SIGNUP: `${API_URL_ROOT}/auth/signup`,
     SIGNIN: `${API_URL_ROOT}/auth/signin`,
     CREATEOTP: `${API_URL_ROOT}/auth/token/create`,

src/app/(admin)/(others-pages)/(tables)/user-table/page.tsx

@@ -2,62 +2,85 @@
 import ComponentCard from "@/components/common/ComponentCard";
 import PageBreadcrumb from "@/components/common/PageBreadCrumb";
 import BasicTableOne from "@/components/tables/BasicTableOne";
-import { fullDataUser, getUserDto } from "@/interface/admin";
+import { responseUserTable, getUserDto } from "@/interface/admin";
 import { apiGetListUser } from "@/service/adminService";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 
-// Trích xuất type sort cho dễ tái sử dụng
 export type SortColumn = "created_at" | "updated_at" | "display_name" | "email";
 
 export default function UserTable() {
-  const [users, setUsers] = useState<fullDataUser[]>([]);
+  // --- States cho Pagination ---
-  const [loading, setLoading] = useState<boolean>(true);
+  const [limit, setLimit] = useState<number>(5); // Default theo ảnh là 5
+  const [limitInput, setLimitInput] = useState<string>("5");
+  const [page, setPage] = useState<number>(1);
 
+  // --- States cho Filter (Theo ảnh Swagger) ---
   const [searchTerm, setSearchTerm] = useState<string>("");
-  const [debouncedSearch, setDebouncedSearch] = useState<string>("");
+  const [authProvider, setAuthProvider] = useState<string>("");
+  const [createdFrom, setCreatedFrom] = useState<string>("");
+  const [createdTo, setCreatedTo] = useState<string>("");
+  const [isDeleted, setIsDeleted] = useState<boolean | undefined>(undefined);
   
+  // Debounced states
+  const [debouncedParams, setDebouncedParams] = useState({
+    search: "",
+    limit: 5,
+    authProvider: "",
+  });
+
+  // --- States cho Table ---
+  const [tableData, setTableData] = useState<responseUserTable | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
   const [sortBy, setSortBy] = useState<SortColumn | undefined>(undefined);
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
 
+  // 1. Xử lý Debounce cho các ô input text
   useEffect(() => {
     const handler = setTimeout(() => {
-      setDebouncedSearch(searchTerm);
+      setDebouncedParams({
-    }, 500);
+        search: searchTerm,
-
+        limit: parseInt(limitInput) || 5,
+        authProvider: authProvider,
+      });
+      setPage(1); // Reset về trang 1 khi filter thay đổi
+    }, 600);
     return () => clearTimeout(handler);
-  }, [searchTerm]);
+  }, [searchTerm, limitInput, authProvider]);
+
+  // 2. Hàm fetch data
+  const fetchUsers = useCallback(async () => {
+    setLoading(true);
+    try {
+      const payload: getUserDto = {
+        page: page,
+        limit: debouncedParams.limit,
+        search: debouncedParams.search || undefined,
+        auth_provider: debouncedParams.authProvider || undefined,
+        created_from: createdFrom || undefined,
+        created_to: createdTo || undefined,
+        is_deleted: isDeleted,
+        sort: sortBy,
+        order: sortOrder,
+      };
+
+      const response = await apiGetListUser(payload);
+      if (response?.status) {
+        setTableData(response);
+      }
+    } catch (err) {
+      console.error("Fetch error:", err);
+      setTableData(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [page, debouncedParams, createdFrom, createdTo, isDeleted, sortBy, sortOrder]);
 
   useEffect(() => {
-    const fetchUser = async () => {
+    fetchUsers();
-      setLoading(true);
+  }, [fetchUsers]);
-      try {
-        const payload: getUserDto = { limit: 10 };
-        if (debouncedSearch) payload.search = debouncedSearch;
-        if (sortBy) {
-          payload.sort = sortBy;
-          payload.order = sortOrder;
-        }
-
-        const response = await apiGetListUser(payload);
-        // console.log("Request Payload:", payload);
-        // console.log("API Response:", response);
-        if (response && response.data) {
-          setUsers(response.data);
-        } else {
-          setUsers([]);
-        }
-      } catch (err) {
-        console.error("Lỗi:", err);
-        setUsers([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchUser();
-  }, [debouncedSearch, sortBy, sortOrder]);
 
   const handleSort = (column: SortColumn) => {
+    setPage(1);
     if (sortBy === column) {
       setSortOrder(sortOrder === "asc" ? "desc" : "asc");
     } else {
@@ -66,44 +89,103 @@ export default function UserTable() {
     }
   };
 
+  const pagination = tableData?.pagination;
+
   return (
     <div>
-      <PageBreadcrumb pageTitle="Users Table" />
+      <PageBreadcrumb pageTitle="Quản lý người dùng" />
       <div className="space-y-6">
-        <ComponentCard title="Danh sách người dùng">
+        <ComponentCard title="Bộ lọc tìm kiếm">
-          {/* Ô nhập tìm kiếm */}
+          {/* Grid Layout cho các Filter giống Swagger */}
-          <div className="mb-4">
+          <div className="grid grid-cols-1 gap-4 mb-6 md:grid-cols-3 lg:grid-cols-4">
-            <input
+            {/* Search */}
-              type="text"
+            <div>
-              placeholder="Tìm kiếm người dùng..."
+              <label className="block mb-2 text-sm font-medium">Search</label>
-              value={searchTerm}
+              <input
-              onChange={(e) => setSearchTerm(e.target.value)}
+                type="text"
-              className="w-full sm:w-1/3 px-4 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white"
+                placeholder="Name, email..."
-            />
+                value={searchTerm}
-          </div>
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700"
+              />
+            </div>
 
-          <div className="relative min-h-[400px]">
+            {/* Auth Provider */}
+            <div>
+              <label className="block mb-2 text-sm font-medium">Auth Provider</label>
+              <input
+                type="text"
+                placeholder="google"
+                value={authProvider}
+                onChange={(e) => setAuthProvider(e.target.value)}
+                className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700"
+              />
+            </div>
+
+            
+            <div>
+              <label className="block mb-2 text-sm font-medium">Trạng thái xóa</label>
+              <select 
+                onChange={(e) => setIsDeleted(e.target.value === "" ? undefined : e.target.value === "true")}
+                className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700"
+              >
+                <option value="">Tất cả</option>
+                <option value="false">Hoạt động</option>
+                <option value="true">Đã xóa</option>
+              </select>
+            </div>
+
+            {/* Limit */}
+            <div>
+              <label className="block mb-2 text-sm font-medium">Số lượng (Limit)</label>
+              <input
+                type="number"
+                value={limitInput}
+                onChange={(e) => setLimitInput(e.target.value)}
+                className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700"
+              />
+            </div>
+          </div>
+        </ComponentCard>
+
+        <ComponentCard title="Danh sách người dùng">
+          <div className="relative min-h-[300px]">
             {loading && (
-              <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/50 dark:bg-gray-900/50 backdrop-blur-[1px] transition-opacity">
+              <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/50 dark:bg-gray-900/50">
-                <div className="flex flex-col items-center">
+                <div className="w-10 h-10 border-4 border-t-brand-500 rounded-full animate-spin"></div>
-                  {/* Spinner xoay tròn */}
-                  <div className="w-10 h-10 border-4 border-gray-200 border-t-brand-500 rounded-full animate-spin"></div>
-                  <p className="mt-2 text-sm font-medium text-gray-500">
-                    Đang tải...
-                  </p>
-                </div>
               </div>
             )}
 
-            {/* Bảng vẫn hiển thị ở dưới (mờ đi) hoặc ẩn tùy bạn, 
-                nhưng truyền data vào để tránh giật lag layout */}
             <BasicTableOne 
-              data={users}
+              data={tableData?.data || []} 
               onSort={handleSort} 
               sortBy={sortBy} 
               sortOrder={sortOrder} 
             />
           </div>
+
+          {/* Phân trang sử dụng data từ API mới */}
+          <div className="flex items-center justify-between mt-6">
+            <p className="text-sm text-gray-500">
+              Hiển thị trang {pagination?.current_page} / {pagination?.total_pages} ({pagination?.total_records} kết quả)
+            </p>
+            <div className="flex gap-2">
+              <button
+                disabled={page <= 1 || loading}
+                onClick={() => setPage(p => p - 1)}
+                className="px-4 py-2 border rounded-md disabled:opacity-50 hover:bg-gray-100 dark:hover:bg-gray-700"
+              >
+                Trước
+              </button>
+              <button
+                disabled={page >= (pagination?.total_pages || 1) || loading}
+                onClick={() => setPage(p => p + 1)}
+                className="px-4 py-2 border rounded-md disabled:opacity-50 hover:bg-gray-100 dark:hover:bg-gray-700"
+              >
+                Sau
+              </button>
+            </div>
+          </div>
         </ComponentCard>
       </div>
     </div>

src/app/(admin)/(others-pages)/profile/page.tsx

@@ -15,23 +15,22 @@ export default function Profile() {
   const [mediaData, setMediaData] = useState<MediaDto | null>(null);
   const [loading, setLoading] = useState(true);
 
- useEffect(() => {
+  useEffect(() => {
-  const fetchUser = async () => {
+    const fetchUser = async () => {
-    try {
+      try {
-      const userData = await apiGetCurrentUser();
+        const userData = await apiGetCurrentUser();
-      const mediaResponse = await apiGetCurrentUserMedia(); // Giả sử hàm này return {status, data, message}
+        const mediaResponse = await apiGetCurrentUserMedia();
-
-      setMediaData(mediaResponse);
-      setUser(userData);
-    } catch (err) {
-      console.error("Lỗi:", err);
-    } finally {
-      setLoading(false);
-    }
-  };
-  fetchUser();
-}, []);
 
+        setMediaData(mediaResponse);
+        setUser(userData);
+      } catch (err) {
+        console.error("Lỗi:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchUser();
+  }, []);
   return (
     <div>
       <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
@@ -41,8 +40,8 @@ export default function Profile() {
         <div className="space-y-6">
           <UserMetaCard data={user ?? {}} />
           <UserInfoCard data={user ?? {}} />
+          {(mediaData?.data?.length ?? 0) > 0 && <MediaCard data={mediaData ?? {}} />}
           <AccountDetails data={user ?? {}} />
-          <MediaCard data={mediaData ?? {}} />
         </div>
       </div>
     </div>

src/components/header/UserDropdown.tsx

@@ -6,9 +6,12 @@ import { Dropdown } from "../ui/dropdown/Dropdown";
 import { DropdownItem } from "../ui/dropdown/DropdownItem";
 import { fullDataUser } from "@/interface/admin";
 import { UserMetaCardProps } from "@/interface/user";
-import { apiGetCurrentUser } from "@/service/auth";
+import { apiGetCurrentUser, apiLogout } from "@/service/auth";
+import { useRouter } from "next/navigation";
 
 export default function UserDropdown() {
+  const router = useRouter();
+
   const [isOpen, setIsOpen] = useState(false);
   const [user, setUser] = useState<UserMetaCardProps | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
@@ -25,7 +28,7 @@ export default function UserDropdown() {
     const fetchUser = async () => {
       try {
         const userData = await apiGetCurrentUser();
-        console.log("User data in dropdown:", userData);
+        // console.log("User data in dropdown:", userData);
         setUser(userData);
       } catch (err) {
         console.error("Lỗi:", err);
@@ -36,6 +39,26 @@ export default function UserDropdown() {
     fetchUser();
   }, []);
 
+  const handleLogout = async (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    try {
+      await apiLogout();
+    } catch (error) {
+      console.error("Logout failed", error);
+    } finally {
+      localStorage.clear();
+      sessionStorage.clear();
+
+      document.cookie.split(";").forEach((c) => {
+        document.cookie = c
+          .replace(/^ +/, "")
+          .replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
+      });
+
+      window.location.href = "/signin";
+    }
+  };
 
   return (
     <div className="relative">
@@ -168,6 +191,7 @@ export default function UserDropdown() {
           </li>
         </ul>
         <Link
+          onClick={handleLogout}
           href="/signin"
           className="flex items-center gap-3 px-3 py-2 mt-3 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
         >

src/components/tables/BasicTableOne.tsx

@@ -11,10 +11,9 @@ import Badge from "../ui/badge/Badge";
 import Image from "next/image";
 import { fullDataUser } from "@/interface/admin";
 
-// Kiểu dữ liệu sort
+// Kiểu dữ liệu sort dựa trên UserTable
 type SortColumn = "created_at" | "updated_at" | "display_name" | "email";
 
-// Định nghĩa kiểu dữ liệu cho props truyền từ cha xuống
 interface BasicTableOneProps {
   data: fullDataUser[];
   onSort: (column: SortColumn) => void;
@@ -22,10 +21,15 @@ interface BasicTableOneProps {
   sortOrder?: "asc" | "desc";
 }
 
-export default function BasicTableOne({ data, onSort, sortBy, sortOrder }: BasicTableOneProps) {
+export default function BasicTableOne({
-  // Hàm phụ trợ để format lại ngày tháng năm
+  data,
+  onSort,
+  sortBy,
+  sortOrder,
+}: BasicTableOneProps) {
+  // Format ngày tháng: 08 Apr 2026
   const formatDate = (dateString: string) => {
-    if (!dateString) return "";
+    if (!dateString) return "-";
     const date = new Date(dateString);
     return date.toLocaleDateString("en-GB", {
       day: "2-digit",
@@ -34,22 +38,38 @@ export default function BasicTableOne({ data, onSort, sortBy, sortOrder }: Basic
     });
   };
 
-  // Component phụ trợ để vẽ icon mũi tên Sort
+  // Component icon sắp xếp
   const SortIcon = ({ column }: { column: SortColumn }) => {
     const isActive = sortBy === column;
     return (
       <div className="flex flex-col ml-2 opacity-50 cursor-pointer hover:opacity-100">
         <svg
-          className={`w-3 h-3 ${isActive && sortOrder === "asc" ? "text-blue-600 dark:text-blue-400 opacity-100" : "text-gray-400"}`}
+          className={`w-3 h-3 ${isActive && sortOrder === "asc" ? "text-brand-500 opacity-100" : "text-gray-400"}`}
-          fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 15l7-7 7 7" />
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={3}
+            d="M5 15l7-7 7 7"
+          />
         </svg>
         <svg
-          className={`w-3 h-3 -mt-1 ${isActive && sortOrder === "desc" ? "text-blue-600 dark:text-blue-400 opacity-100" : "text-gray-400"}`}
+          className={`w-3 h-3 -mt-1 ${isActive && sortOrder === "desc" ? "text-brand-500 opacity-100" : "text-gray-400"}`}
-          fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 9l-7 7-7-7" />
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={3}
+            d="M19 9l-7 7-7-7"
+          />
         </svg>
       </div>
     );
@@ -58,123 +78,163 @@ export default function BasicTableOne({ data, onSort, sortBy, sortOrder }: Basic
   return (
     <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-white/[0.05] dark:bg-white/[0.03]">
       <div className="max-w-full overflow-x-auto">
-        <div className="min-w-[1102px]">
+        {/* Đảm bảo bảng có chiều rộng tối thiểu để không bị nát layout trên mobile */}
+        <div className="min-w-[1100px]">
           <Table>
-            {/* Table Header */}
             <TableHeader className="border-b border-gray-100 dark:border-white/[0.05]">
               <TableRow>
-                <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
+                <TableCell
-                  <div className="flex items-center cursor-pointer" onClick={() => onSort("display_name")}>
+                  isHeader
+                  className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
+                >
+                  <div
+                    className="flex items-center cursor-pointer select-none"
+                    onClick={() => onSort("display_name")}
+                  >
                     Người dùng
                     <SortIcon column="display_name" />
                   </div>
                 </TableCell>
 
-                <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
+                <TableCell
-                  <div className="flex items-center cursor-pointer" onClick={() => onSort("email")}>
+                  isHeader
+                  className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
+                >
+                  <div
+                    className="flex items-center cursor-pointer select-none"
+                    onClick={() => onSort("email")}
+                  >
                     Email
                     <SortIcon column="email" />
                   </div>
                 </TableCell>
 
-                <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
+                <TableCell
-                  Vai trò (Role)
+                  isHeader
+                  className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
+                >
+                  Vai trò
                 </TableCell>
 
                 <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
+                 
                   Trạng thái
                 </TableCell>
 
-                <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
+                <TableCell
-                  <div className="flex items-center cursor-pointer" onClick={() => onSort("created_at")}>
+                  isHeader
+                  className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
+                >
+                  <div
+                    className="flex items-center cursor-pointer select-none"
+                    onClick={() => onSort("created_at")}
+                  >
                     Ngày tham gia
                     <SortIcon column="created_at" />
                   </div>
                 </TableCell>
 
-                {/* Thêm cột Ngày cập nhật */}
+                <TableCell
-                <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
+                  isHeader
-                  <div className="flex items-center cursor-pointer" onClick={() => onSort("updated_at")}>
+                  className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
-                    Cập nhật lần cuối
+                >
+                  <div
+                    className="flex items-center cursor-pointer select-none"
+                    onClick={() => onSort("updated_at")}
+                  >
+                    Cập nhật
                     <SortIcon column="updated_at" />
                   </div>
                 </TableCell>
               </TableRow>
             </TableHeader>
 
-            {/* Table Body */}
             <TableBody className="divide-y divide-gray-100 dark:divide-white/[0.05]">
-              {data.map((user) => (
+              {data.length > 0 ? (
-                <TableRow key={user.id}>
+                data.map((user) => (
-                  
+                  <TableRow
-                  {/* Cột User */}
+                    key={user.id}
-                  <TableCell className="px-5 py-4 sm:px-6 text-start">
+                    className="hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors"
-                    <div className="flex items-center gap-3">
+                  >
-                      <div className="w-10 h-10 overflow-hidden rounded-full flex-shrink-0 bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
+                    {/* Cột Tên + Avatar */}
-                        {user.profile?.avatar_url ? (
+                    <TableCell className="px-5 py-4 text-start">
-                          <Image
+                      <div className="flex items-center gap-3">
-                            width={40}
+                        <div className="w-10 h-10 overflow-hidden rounded-full flex-shrink-0 bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
-                            height={40}
+                          {user.profile?.avatar_url ? (
-                            src={user.profile.avatar_url}
+                            <Image
-                            alt={user.profile.display_name || "Avatar"}
+                              width={40}
-                            className="object-cover w-full h-full"
+                              height={40}
-                          />
+                              src={user.profile.avatar_url}
-                        ) : (
+                              alt={user.profile.display_name || "Avatar"}
-                          <span className="font-semibold text-gray-500 uppercase">
+                              className="object-cover w-full h-full"
-                            {user.profile?.display_name?.charAt(0) || "U"}
+                            />
+                          ) : (
+                            <span className="font-bold text-brand-500 uppercase text-xs">
+                              {user.profile?.display_name?.charAt(0) || "U"}
+                            </span>
+                          )}
+                        </div>
+                        <div>
+                          <span className="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
+                            {user.profile?.display_name || "N/A"}
                           </span>
-                        )}
-                      </div>
-                      <div>
-                        <span className="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
-                          {user.profile?.display_name || "Chưa cập nhật tên"}
-                        </span>
-                        {user.profile?.phone && (
                           <span className="block text-gray-500 text-theme-xs dark:text-gray-400">
-                            {user.profile.phone}
+                            ID: {user.id.slice(0, 8)}...
                           </span>
+                        </div>
+                      </div>
+                    </TableCell>
+
+                    {/* Cột Email */}
+                    <TableCell className="px-5 py-4 text-gray-600 text-start text-theme-sm dark:text-gray-400">
+                      {user.email}
+                    </TableCell>
+
+                    {/* Cột Roles (Badge list) */}
+                    <TableCell className="px-5 py-4 text-start text-theme-sm">
+                      <div className="flex flex-wrap gap-1">
+                        {user.roles && user.roles.length > 0 ? (
+                          user.roles.map((role) => (
+                            <span
+                              key={role.id}
+                              className="px-2 py-0.5 rounded-md bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400 text-[10px] font-normal uppercase tracking-wider"
+                            >
+                              {role.name}
+                            </span>
+                          ))
+                        ) : (
+                          <span className="text-gray-400 italic">No Role</span>
                         )}
                       </div>
-                    </div>
+                    </TableCell>
-                  </TableCell>
 
-                  {/* Cột Email */}
+                    {/* Cột Trạng thái (Sử dụng Badge component) */}
-                  <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
+                    <TableCell className="px-5 py-4 text-start">
-                    {user.email}
+                      <Badge
-                  </TableCell>
+                        size="sm"
+                        variant="light"
+                        color={user.is_deleted ? "error" : "success"}
+                      >
+                        {user.is_deleted ? "Bị khóa" : "Hoạt động"}
+                      </Badge>
+                    </TableCell>
 
-                  {/* Cột Roles */}
+                    {/* Cột Ngày tham gia */}
-                  <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
+                    <TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
-                    {user.roles && user.roles.length > 0 ? (
+                      {formatDate(user.created_at)}
-                      user.roles.map((role: any) => (
+                    </TableCell>
-                        <span key={role.id} className="block">
-                          {role.name}
-                        </span>
-                      ))
-                    ) : (
-                      <span>Chưa cấp quyền</span>
-                    )}
-                  </TableCell>
-
-                  {/* Cột Trạng thái */}
-                  <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
-                    <Badge size="sm" color={user.is_deleted ? "error" : "success"}>
-                      {user.is_deleted ? "Bị khóa" : "Hoạt động"}
-                    </Badge>
-                  </TableCell>
-
-                  {/* Cột Ngày tham gia */}
-                  <TableCell className="px-4 py-3 text-gray-500 text-theme-sm dark:text-gray-400">
-                    {formatDate(user.created_at)}
-                  </TableCell>
-
-                  {/* Cột Ngày cập nhật */}
-                  <TableCell className="px-4 py-3 text-gray-500 text-theme-sm dark:text-gray-400">
-                    {formatDate(user.updated_at)}
-                  </TableCell>
 
+                    {/* Cột Ngày cập nhật */}
+                    <TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
+                      {formatDate(user.updated_at)}
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell className="px-5 py-4 text-center text-gray-500 italic"> </TableCell>
                 </TableRow>
-              ))}
+              )}
             </TableBody> 
           </Table>
         </div>

src/components/user-profile/AccountDetails.tsx

@@ -80,7 +80,7 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
 
   return (
     <>
-      <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
+      <div className="p-5 border border-red-200 rounded-2xl dark:border-gray-800 lg:p-6">
         <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
           <div>
             <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">
@@ -108,7 +108,7 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
 
           <button
             onClick={openModal}
-            className="flex items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 lg:inline-flex lg:w-auto"
+            className="flex items-center justify-center gap-2 rounded-full border border-red-300 bg-white px-4 py-3 text-sm font-medium text-red-600 hover:bg-gray-50 dark:border-red-700 dark:bg-red-800 dark:text-red-400 lg:inline-flex lg:w-auto"
           >
             <svg
               className="fill-current"
@@ -211,7 +211,7 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
               >
                 Close
               </Button>
-              <Button size="sm" type="submit">
+              <Button size="sm" type="submit" className="bg-red-500 hover:bg-red-600 ">
                 Save Changes
               </Button>
             </div>

src/components/user-profile/Media.tsx

@@ -19,8 +19,8 @@ export default function MediaCard({ data }: { data: MediaDto }) {
   }));
 
   return (
-    <div className="w-full">
+    <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
-      <h3 className="mb-4 font-semibold">Media Assets</h3>
+      <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">Media Assets</h3>
 
       <div className="flex flex-row gap-4 overflow-x-auto pb-4 scrollbar-hide">
         {listMedia.map((item, idx) => (

src/interface/admin.ts

@@ -1,13 +1,17 @@
 import { Profile, UserRole } from "@/interface/user";
 
 export interface getUserDto {
-  cursor?: string;
+  page?: number; // Thay cursor bằng page theo Swagger
   limit: number;
   is_deleted?: boolean;
   order?: "asc" | "desc";
   role_ids?: string[];
   search?: string;
   sort?: "created_at" | "updated_at" | "display_name" | "email";
+  // Thêm các trường mới từ ảnh Swagger
+  auth_provider?: string;
+  created_from?: string;
+  created_to?: string;
 }
 
 export interface fullDataUser {
@@ -24,3 +28,15 @@ export interface fullDataUser {
   profile: Profile;
   token_version: number;
 }
+
+export interface responseUserTable {
+  data: fullDataUser[];
+  status: boolean;
+  message?: string;
+  pagination?: {
+    current_page: number;
+    page_size: number;
+    total_records: number;
+    total_pages: number;
+  };
+}

src/service/auth.ts

@@ -21,6 +21,11 @@ export const apiSignUp = async (payload: any) => {
   return response.data;
 };
 
+export const apiLogout = async () => {
+  const response = await api.post(API.Auth.LOGOUT);
+  return response.data;
+};
+
 export const apiSignIn = async (payload: any) => {
   const response = await api.post(API.Auth.SIGNIN, payload);
   return response.data;