avatar update and manage user table

src/components/auth/SignInForm.tsx

@@ -70,6 +70,7 @@ export default function SignInForm() {
       if (res.status === true) {
         toast.success("Đăng nhập thành công!");
         const data = await apiGetCurrentUser();
+        
         console.log("Current User Data:", data);
         if (data?.data) {
           dispatch(setUserData(data.data));

src/components/header/UserDropdown.tsx

@@ -1,37 +1,60 @@
 "use client";
 import Image from "next/image";
 import Link from "next/link";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 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";
 
 export default function UserDropdown() {
   const [isOpen, setIsOpen] = useState(false);
-
-function toggleDropdown(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
-  e.stopPropagation();
-  setIsOpen((prev) => !prev);
-}
+  const [user, setUser] = useState<UserMetaCardProps | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  function toggleDropdown(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    e.stopPropagation();
+    setIsOpen((prev) => !prev);
+  }
 
   function closeDropdown() {
     setIsOpen(false);
   }
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        const userData = await apiGetCurrentUser();
+        console.log("User data in dropdown:", userData);
+        setUser(userData);
+      } catch (err) {
+        console.error("Lỗi:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchUser();
+  }, []);
+  
+
   return (
     <div className="relative">
       <button
-        onClick={toggleDropdown} 
+        onClick={toggleDropdown}
         className="flex items-center text-gray-700 dark:text-gray-400 dropdown-toggle"
       >
         <span className="mr-3 overflow-hidden rounded-full h-11 w-11">
           <Image
             width={44}
             height={44}
-            src="/images/user/owner.jpg"
+            src={user?.data?.profile?.avatar_url || "/images/no-images.jpg"}
             alt="User"
           />
         </span>
 
-        <span className="block mr-1 font-medium text-theme-sm">Musharof</span>
+        <span className="block mr-1 font-medium text-theme-sm">
+          {user?.data?.profile?.display_name || "User"}
+        </span>
 
         <svg
           className={`stroke-gray-500 dark:stroke-gray-400 transition-transform duration-200 ${
@@ -60,10 +83,10 @@ function toggleDropdown(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
       >
         <div>
           <span className="block font-medium text-gray-700 text-theme-sm dark:text-gray-400">
-            Musharof Chowdhury
+            {user?.data?.profile?.display_name || "User"}
           </span>
           <span className="mt-0.5 block text-theme-xs text-gray-500 dark:text-gray-400">
-            randomuser@pimjo.com
+            {user?.data?.email || "email"}
           </span>
         </div>
 
@@ -93,7 +116,7 @@ function toggleDropdown(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
               Edit profile
             </DropdownItem>
           </li>
-          <li>
+          {/* <li>
             <DropdownItem
               onItemClick={closeDropdown}
               tag="a"
@@ -117,7 +140,7 @@ function toggleDropdown(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
               </svg>
               Account settings
             </DropdownItem>
-          </li>
+          </li> */}
           <li>
             <DropdownItem
               onItemClick={closeDropdown}

src/components/tables/BasicTableOne.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import {
   Table,
@@ -6,112 +7,54 @@ import {
   TableHeader,
   TableRow,
 } from "../ui/table";
-
 import Badge from "../ui/badge/Badge";
 import Image from "next/image";
+import { fullDataUser } from "@/interface/admin";
 
-interface Order {
-  id: number;
-  user: {
-    image: string;
-    name: string;
-    role: string;
-  };
-  projectName: string;
-  team: {
-    images: string[];
-  };
-  status: string;
-  budget: string;
+// Kiểu dữ liệu sort
+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;
+  sortBy?: SortColumn;
+  sortOrder?: "asc" | "desc";
 }
 
-// Define the table data using the interface
-const tableData: Order[] = [
-  {
-    id: 1,
-    user: {
-      image: "/images/user/user-17.jpg",
-      name: "Lindsey Curtis",
-      role: "Web Designer",
-    },
-    projectName: "Agency Website",
-    team: {
-      images: [
-        "/images/user/user-22.jpg",
-        "/images/user/user-23.jpg",
-        "/images/user/user-24.jpg",
-      ],
-    },
-    budget: "3.9K",
-    status: "Active",
-  },
-  {
-    id: 2,
-    user: {
-      image: "/images/user/user-18.jpg",
-      name: "Kaiya George",
-      role: "Project Manager",
-    },
-    projectName: "Technology",
-    team: {
-      images: ["/images/user/user-25.jpg", "/images/user/user-26.jpg"],
-    },
-    budget: "24.9K",
-    status: "Pending",
-  },
-  {
-    id: 3,
-    user: {
-      image: "/images/user/user-17.jpg",
-      name: "Zain Geidt",
-      role: "Content Writing",
-    },
-    projectName: "Blog Writing",
-    team: {
-      images: ["/images/user/user-27.jpg"],
-    },
-    budget: "12.7K",
-    status: "Active",
-  },
-  {
-    id: 4,
-    user: {
-      image: "/images/user/user-20.jpg",
-      name: "Abram Schleifer",
-      role: "Digital Marketer",
-    },
-    projectName: "Social Media",
-    team: {
-      images: [
-        "/images/user/user-28.jpg",
-        "/images/user/user-29.jpg",
-        "/images/user/user-30.jpg",
-      ],
-    },
-    budget: "2.8K",
-    status: "Cancel",
-  },
-  {
-    id: 5,
-    user: {
-      image: "/images/user/user-21.jpg",
-      name: "Carla George",
-      role: "Front-end Developer",
-    },
-    projectName: "Website",
-    team: {
-      images: [
-        "/images/user/user-31.jpg",
-        "/images/user/user-32.jpg",
-        "/images/user/user-33.jpg",
-      ],
-    },
-    budget: "4.5K",
-    status: "Active",
-  },
-];
+export default function BasicTableOne({ data, onSort, sortBy, sortOrder }: BasicTableOneProps) {
+  // Hàm phụ trợ để format lại ngày tháng năm
+  const formatDate = (dateString: string) => {
+    if (!dateString) return "";
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+    });
+  };
+
+  // Component phụ trợ để vẽ icon mũi tên Sort
+  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"
+        >
+          <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"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 9l-7 7-7-7" />
+        </svg>
+      </div>
+    );
+  };
 
-export default function BasicTableOne() {
   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">
@@ -120,101 +63,116 @@ export default function BasicTableOne() {
             {/* 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"
-                >
-                  User
+                <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")}>
+                    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"
-                >
-                  Project 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" 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"
-                >
-                  Team
+                
+                <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>
-                <TableCell
-                  isHeader
-                  className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
-                >
-                  Status
+                
+                <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"
-                >
-                  Budget
+                
+                <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")}>
+                    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
+                    <SortIcon column="updated_at" />
+                  </div>
                 </TableCell>
               </TableRow>
             </TableHeader>
 
             {/* Table Body */}
             <TableBody className="divide-y divide-gray-100 dark:divide-white/[0.05]">
-              {tableData.map((order) => (
-                <TableRow key={order.id}>
+              {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">
-                        <Image
-                          width={40}
-                          height={40}
-                          src={order.user.image}
-                          alt={order.user.name}
-                        />
+                      <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"}
+                          </span>
+                        )}
                       </div>
                       <div>
                         <span className="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
-                          {order.user.name}
-                        </span>
-                        <span className="block text-gray-500 text-theme-xs dark:text-gray-400">
-                          {order.user.role}
+                          {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}
+                          </span>
+                        )}
                       </div>
                     </div>
                   </TableCell>
+
+                  {/* Cột Email */}
                   <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
-                    {order.projectName}
+                    {user.email}
                   </TableCell>
+
+                  {/* Cột Roles */}
                   <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
-                    <div className="flex -space-x-2">
-                      {order.team.images.map((teamImage, index) => (
-                        <div
-                          key={index}
-                          className="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
-                        >
-                          <Image
-                            width={24}
-                            height={24}
-                            src={teamImage}
-                            alt={`Team member ${index + 1}`}
-                            className="w-full"
-                          />
-                        </div>
-                      ))}
-                    </div>
+                    {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={
-                        order.status === "Active"
-                          ? "success"
-                          : order.status === "Pending"
-                          ? "warning"
-                          : "error"
-                      }
-                    >
-                      {order.status}
+                    <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">
-                    {order.budget}
+                    {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>
+
                 </TableRow>
               ))}
             </TableBody>
@@ -223,4 +181,4 @@ export default function BasicTableOne() {
       </div>
     </div>
   );
-}
+}