init
This commit is contained in:
@@ -0,0 +1,293 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user