avatar update and manage user table

2026-04-07 17:54:42 +07:00
parent e3065e1bf5
commit 9159b2f0e6
10 changed files with 332 additions and 191 deletions
--- a/api.ts
+++ b/api.ts
@@ -17,5 +17,8 @@ export const API = {
    VERIFYOTP: `${API_URL_ROOT}/auth/token/verify`,
    REFRESH: `${API_URL_ROOT}/auth/refresh`,
    GOOGLE_LOGIN: `${API_URL_ROOT}/auth/google/login`
+  },
+  Admin:{
+    GET_LIST_USERS: `${API_URL_ROOT}/users`,
  }
 }
--- a/next.config.ts
+++ b/next.config.ts
@@ -10,6 +10,12 @@ const nextConfig: NextConfig = {
        port: '',
        pathname: '/**',
      },
+      {
+        protocol: 'https',
+        hostname: 'cdn.kain.id.vn',
+        port: '',
+        pathname: '/**',
+      },
    ],
  },

--- a/src/app/(admin)/(others-pages)/(tables)/basic-tables/page.tsx
+++ b/src/app/(admin)/(others-pages)/(tables)/basic-tables/page.tsx
@@ -15,11 +15,11 @@ export default function BasicTables() {
  return (
    <div>
      <PageBreadcrumb pageTitle="Basic Table" />
-      <div className="space-y-6">
+      {/* <div className="space-y-6">
        <ComponentCard title="Basic Table 1">
          <BasicTableOne />
        </ComponentCard>
-      </div>
+      </div> */}
    </div>
  );
 }
--- a/src/app/(admin)/(others-pages)/(tables)/user-table/page.tsx
+++ b/src/app/(admin)/(others-pages)/(tables)/user-table/page.tsx
@@ -0,0 +1,111 @@
+"use client";
+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 { apiGetListUser } from "@/service/adminService";
+import { useEffect, useState } 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[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [debouncedSearch, setDebouncedSearch] = useState<string>("");
+
+  const [sortBy, setSortBy] = useState<SortColumn | undefined>(undefined);
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearch(searchTerm);
+    }, 500);
+
+    return () => clearTimeout(handler);
+  }, [searchTerm]);
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      setLoading(true);
+      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) => {
+    if (sortBy === column) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(column);
+      setSortOrder("desc");
+    }
+  };
+
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Users Table" />
+      <div className="space-y-6">
+        <ComponentCard title="Danh sách người dùng">
+          {/* Ô nhập tìm kiếm */}
+          <div className="mb-4">
+            <input
+              type="text"
+              placeholder="Tìm kiếm người dùng..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              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"
+            />
+          </div>
+
+          <div className="relative min-h-[400px]">
+            {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="flex flex-col items-center">
+                  {/* 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}
+              onSort={handleSort}
+              sortBy={sortBy}
+              sortOrder={sortOrder}
+            />
+          </div>
+        </ComponentCard>
+      </div>
+    </div>
+  );
+}
--- a/src/components/auth/SignInForm.tsx
+++ b/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));
--- a/src/components/header/UserDropdown.tsx
+++ b/src/components/header/UserDropdown.tsx
@@ -1,21 +1,42 @@
 "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>) {
+  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
@@ -26,12 +47,14 @@ function toggleDropdown(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
          <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}
--- a/src/components/tables/BasicTableOne.tsx
+++ b/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">
+                      <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={order.user.image}
-                          alt={order.user.name}
+                            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}
+                          {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">
-                          {order.user.role}
+                            {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>
--- a/src/interface/admin.ts
+++ b/src/interface/admin.ts
@@ -0,0 +1,26 @@
+import { Profile, UserRole } from "@/interface/user";
+
+export interface getUserDto {
+  cursor?: string;
+  limit: number;
+  is_deleted?: boolean;
+  order?: "asc" | "desc";
+  role_ids?: string[];
+  search?: string;  
+  sort?: "created_at" | "updated_at" | "display_name" | "email";
+}
+
+export interface fullDataUser {
+  auth_provider: string;
+  id: string;
+  email: string;
+  google_id: string;
+  display_name: string;
+  created_at: string;
+  updated_at: string;
+  is_deleted: boolean;
+  password_hash: string;
+  roles: UserRole[];
+  profile: Profile;
+  token_version: number;
+}
--- a/src/layout/AppSidebar.tsx
+++ b/src/layout/AppSidebar.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useRef, useState,useCallback } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -51,7 +51,10 @@ const navItems: NavItem[] = [
  {
    name: "Tables",
    icon: <TableIcon />,
-    subItems: [{ name: "Basic Tables", path: "/basic-tables", pro: false }],
+    subItems: [
+      { name: "Basic Tables", path: "/basic-tables", pro: false },
+      { name: "User Tables", path: "/user-table", pro: false },
+    ],
  },
  {
    name: "Pages",
@@ -100,7 +103,7 @@ const AppSidebar: React.FC = () => {

  const renderMenuItems = (
    navItems: NavItem[],
-    menuType: "main" | "others"
+    menuType: "main" | "others",
  ) => (
    <ul className="flex flex-col gap-4">
      {navItems.map((nav, index) => (
@@ -229,7 +232,7 @@ const AppSidebar: React.FC = () => {
    index: number;
  } | null>(null);
  const [subMenuHeight, setSubMenuHeight] = useState<Record<string, number>>(
-    {}
+    {},
  );
  const subMenuRefs = useRef<Record<string, HTMLDivElement | null>>({});

@@ -260,7 +263,7 @@ const AppSidebar: React.FC = () => {
    if (!submenuMatched) {
      setOpenSubmenu(null);
    }
-  }, [pathname,isActive]);
+  }, [pathname, isActive]);

  useEffect(() => {
    // Set the height of the submenu items when the submenu is opened
--- a/src/service/adminService.ts
+++ b/src/service/adminService.ts
@@ -0,0 +1,10 @@
+import api from "@/config/config";
+import { API } from "../../api";
+import { getUserDto } from "@/interface/admin";
+
+export const apiGetListUser = async (payload: getUserDto) => {
+   const response = await api.get(API.Admin.GET_LIST_USERS, {
+    params: payload,
+  });
+  return response?.data;
+};