sort in user table
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user