294 lines
11 KiB
TypeScript
294 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "../ui/table";
|
|
import Badge from "../ui/badge/Badge";
|
|
import Image from "next/image";
|
|
import { fullDataUser } from "@/interface/admin";
|
|
|
|
type SortColumn = "created_at" | "updated_at" | "display_name" | "email";
|
|
|
|
interface Role {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
|
|
interface BasicTableOneProps {
|
|
data: fullDataUser[];
|
|
onSort: (column: SortColumn) => void;
|
|
onViewDetail: (user: fullDataUser) => void;
|
|
sortBy?: SortColumn;
|
|
sortOrder?: "asc" | "desc";
|
|
onFilterRole?: (role: string) => void;
|
|
selectedRole?: string;
|
|
roles?: Role[];
|
|
}
|
|
|
|
export default function BasicTableOne({
|
|
data,
|
|
onSort,
|
|
onViewDetail,
|
|
sortBy,
|
|
sortOrder,
|
|
onFilterRole,
|
|
selectedRole,
|
|
roles = [],
|
|
}: BasicTableOneProps) {
|
|
const formatDate = (dateString: string) => {
|
|
if (!dateString) return "-";
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString("en-GB", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
});
|
|
};
|
|
|
|
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-700 opacity-100" : "text-gray-400"}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<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-700 opacity-100" : "text-gray-400"}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={3}
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
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-[1100px]">
|
|
<Table>
|
|
<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 min-w-[265px] max-w-[265px]"
|
|
>
|
|
<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 min-w-[337px] max-w-[337px]"
|
|
>
|
|
<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-start text-theme-xs min-w-[188px] max-w-[188px]"
|
|
>
|
|
<div className="relative inline-flex items-center group">
|
|
<select
|
|
value={selectedRole}
|
|
onChange={(e) => onFilterRole?.(e.target.value)}
|
|
className="bg-transparent border-none outline-none cursor-pointer appearance-none text-gray-500 dark:text-gray-400 pr-5 hover:text-brand-500 transition-colors font-medium"
|
|
>
|
|
<option value="">Vai trò (Tất cả)</option>
|
|
{roles.map((role) => (
|
|
<option key={role.id} value={role.id}>
|
|
{role.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<svg
|
|
className="w-3 h-3 absolute right-0 text-gray-400 pointer-events-none group-hover:text-brand-500"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={3}
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</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 select-none"
|
|
onClick={() => onSort("created_at")}
|
|
>
|
|
Ngày tham gia <SortIcon column="created_at" />
|
|
</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 select-none"
|
|
onClick={() => onSort("updated_at")}
|
|
>
|
|
Cập nhật <SortIcon column="updated_at" />
|
|
</div>
|
|
</TableCell>
|
|
|
|
<TableCell
|
|
isHeader
|
|
className="px-5 py-3 font-medium text-gray-500 text-center text-theme-xs dark:text-gray-400"
|
|
>
|
|
Thao tác
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableHeader>
|
|
|
|
<TableBody className="divide-y divide-gray-100 dark:divide-white/[0.05]">
|
|
{data.length > 0 ? (
|
|
data.map((user) => (
|
|
<TableRow
|
|
key={user.id}
|
|
className="hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors"
|
|
>
|
|
<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="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>
|
|
<span className="block text-gray-500 text-theme-xs dark:text-gray-400">
|
|
ID: {user.id.slice(0, 8)}...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
|
|
<TableCell className="px-5 py-4 text-gray-600 text-start text-theme-sm dark:text-gray-400">
|
|
{user.email}
|
|
</TableCell>
|
|
|
|
<TableCell className="px-5 py-4 text-start text-theme-sm">
|
|
<div className="flex flex-wrap gap-1">
|
|
{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] uppercase"
|
|
>
|
|
{role.name}
|
|
</span>
|
|
)) || (
|
|
<span className="text-gray-400 italic text-[10px]">
|
|
No Role
|
|
</span>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
|
|
<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>
|
|
|
|
<TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
|
|
{formatDate(user.created_at)}
|
|
</TableCell>
|
|
<TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
|
|
{formatDate(user.updated_at)}
|
|
</TableCell>
|
|
|
|
<TableCell className="px-5 py-4 text-center">
|
|
<button
|
|
onClick={() => onViewDetail(user)}
|
|
className="text-brand-500 hover:text-brand-600 font-medium text-theme-sm"
|
|
>
|
|
Chi tiết
|
|
</button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={7}
|
|
className="px-5 py-24 text-center text-gray-500 italic"
|
|
>
|
|
<div className="flex flex-col items-center justify-center gap-2">
|
|
<p className="text-theme-sm">
|
|
Không tìm thấy dữ liệu người dùng
|
|
</p>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|