sort in user table

2026-04-08 14:17:02 +07:00
parent 2d9eaed4fb
commit 8f71d46652
9 changed files with 376 additions and 189 deletions
--- a/src/components/header/UserDropdown.tsx
+++ b/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);
@@ -35,7 +38,27 @@ 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"
        >
--- a/src/components/tables/BasicTableOne.tsx
+++ b/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) {
-  // Hàm phụ trợ để format lại ngày tháng năm
+export default function BasicTableOne({
+  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"}`}
-          fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+          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"
        >
-          <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"}`}
-          fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+          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"
        >
-          <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,127 +78,167 @@ 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">
-                  <div className="flex items-center cursor-pointer" onClick={() => onSort("display_name")}>
+                <TableCell
+                  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">
-                  <div className="flex items-center cursor-pointer" onClick={() => onSort("email")}>
+
+                <TableCell
+                  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">
-                  Vai trò (Role)
+
+                <TableCell
+                  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">
-                  <div className="flex items-center cursor-pointer" onClick={() => onSort("created_at")}>
+
+                <TableCell
+                  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 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" onClick={() => onSort("updated_at")}>
-                    Cập nhật lần cuối
+                <TableCell
+                  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("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) => (
-                <TableRow key={user.id}>
-                  
-                  {/* Cột User */}
-                  <TableCell className="px-5 py-4 sm:px-6 text-start">
-                    <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">
-                        {user.profile?.avatar_url ? (
-                          <Image
-                            width={40}
-                            height={40}
-                            src={user.profile.avatar_url}
-                            alt={user.profile.display_name || "Avatar"}
-                            className="object-cover w-full h-full"
-                          />
-                        ) : (
-                          <span className="font-semibold text-gray-500 uppercase">
-                            {user.profile?.display_name?.charAt(0) || "U"}
+              {data.length > 0 ? (
+                data.map((user) => (
+                  <TableRow
+                    key={user.id}
+                    className="hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors"
+                  >
+                    {/* Cột Tên + Avatar */}
+                    <TableCell className="px-5 py-4 text-start">
+                      <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">
+                          {user.profile?.avatar_url ? (
+                            <Image
+                              width={40}
+                              height={40}
+                              src={user.profile.avatar_url}
+                              alt={user.profile.display_name || "Avatar"}
+                              className="object-cover w-full h-full"
+                            />
+                          ) : (
+                            <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 */}
-                  <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
-                    {user.email}
-                  </TableCell>
+                    {/* Cột Trạng thái (Sử dụng Badge component) */}
+                    <TableCell className="px-5 py-4 text-start">
+                      <Badge
+                        size="sm"
+                        variant="light"
+                        color={user.is_deleted ? "error" : "success"}
+                      >
+                        {user.is_deleted ? "Bị khóa" : "Hoạt động"}
+                      </Badge>
+                    </TableCell>

-                  {/* Cột Roles */}
-                  <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
-                    {user.roles && user.roles.length > 0 ? (
-                      user.roles.map((role: any) => (
-                        <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 tham gia */}
+                    <TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
+                      {formatDate(user.created_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>
+              )}
+            </TableBody> 
          </Table>
        </div>
      </div>
    </div>
  );
-}
+}
--- a/src/components/user-profile/AccountDetails.tsx
+++ b/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>
--- a/src/components/user-profile/Media.tsx
+++ b/src/components/user-profile/Media.tsx
@@ -19,8 +19,8 @@ export default function MediaCard({ data }: { data: MediaDto }) {
  }));

  return (
-    <div className="w-full">
-      <h3 className="mb-4 font-semibold">Media Assets</h3>
+    <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
+      <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) => (