Kain344/History-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update application table information

Browse Source
This commit is contained in:
bokhonglo
2026-04-17 09:47:04 +07:00
parent a366711d12
commit 9824f3b439
6 changed files with 278 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/(admin)/(others-pages)/(tables)/applications-tables/page.tsx
View File

@@ -187,6 +187,7 @@ export default function HistorianApplicationPage() {
const pagination = tableData?.pagination;
// console.log("Pagination info:", pagination);
return (
<div>
<PageBreadcrumb pageTitle="Quản lý hồ sơ" />

7
src/app/(admin)/(others-pages)/(tables)/user-table/page.tsx
View File

@@ -18,7 +18,6 @@ import { LIMIT_ITEM_TABLE } from "../../../../../../constant";
export type SortColumn = "created_at" | "updated_at" | "display_name" | "email";
// Hàm helper format ngày giờ giống với Historian
const formatDateTimeToISO = (
dateStr: string,
timeStr: string,
@@ -42,7 +41,6 @@ export default function UserTable() {
const [authProvider, setAuthProvider] = useState<string>("");
const [isDeleted, setIsDeleted] = useState<boolean | undefined>(undefined);
// --- THÊM STATE CHO NGÀY GIỜ ---
const [fromDate, setFromDate] = useState<string>("");
const [fromTime, setFromTime] = useState<string>("");
const [toDate, setToDate] = useState<string>("");
@@ -53,7 +51,6 @@ export default function UserTable() {
const [roleUser, setRoleUser] = useState<fullDataUser | null>(null);
const [isRoleModalOpen, setIsRoleModalOpen] = useState(false);
// Cập nhật params để chứa thêm ngày giờ
const [debouncedParams, setDebouncedParams] = useState({
search: "",
limit: 5,
@@ -69,7 +66,6 @@ export default function UserTable() {
const [sortBy, setSortBy] = useState<SortColumn | undefined>(undefined);
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
// Hàm Reset bộ lọc
const handleReset = () => {
setSearchTerm("");
setAuthProvider("");
@@ -136,7 +132,6 @@ export default function UserTable() {
const fetchUsers = useCallback(async () => {
setLoading(true);
try {
// Dùng any để tránh lỗi TS nếu interface getUserDto chưa update
const payload: any = {
page: page,
limit: debouncedParams.limit,
@@ -191,6 +186,8 @@ export default function UserTable() {
const pagination = tableData?.pagination;
console.log(pagination);
const handleOpenDetail = (user: fullDataUser) => {
setSelectedUser(user);
setIsModalOpen(true);

358
src/components/tables/ApplicationDetailModal.tsx
View File

@@ -1,22 +1,18 @@
"use client";
import React, { useEffect, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import Image from "next/image";
import Swal from "sweetalert2";
import { ApplicationDto } from "@/interface/historian";
import {
apiGetUserById,
apiUpdateApplicationStatus,
} from "@/service/adminService";
import { getMediaById } from "@/service/mediaService";
import { apiUpdateApplicationStatus } from "@/service/adminService";
import Link from "next/link";
import { URL_MEDIA } from "../../../api";
interface Props {
isOpen: boolean;
onClose: () => void;
application: ApplicationDto | null;
onRefresh: () => void; // Gọi lại hàm fetch danh sách sau khi duyệt xong
application: any;
onRefresh: () => void;
}
export default function ApplicationDetailModal({
@@ -25,80 +21,37 @@ export default function ApplicationDetailModal({
application,
onRefresh,
}: Props) {
const [userData, setUserData] = useState<any>(null);
const [mediaList, setMediaList] = useState<any[]>([]);
const [reviewNote, setReviewNote] = useState("");
const [loadingContent, setLoadingContent] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
useEffect(() => {
if (isOpen && application) {
setReviewNote(application.review_note || "");
fetchDetails();
} else {
setUserData(null);
setMediaList([]);
setReviewNote("");
}
}, [isOpen, application]);
const fetchDetails = async () => {
if (!application) return;
setLoadingContent(true);
try {
const userRes = await apiGetUserById(application.user_id);
// console.log("User data:", userRes);
if (userRes?.data) setUserData(userRes.data);
if (application.media && application.media.length > 0) {
const mediaPromises = application.media.map((m: any) =>
getMediaById(m.id),
);
const mediaResponses = await Promise.all(mediaPromises);
setMediaList(mediaResponses.map((res) => res?.data || res));
}
} catch (error) {
console.error("Lỗi khi tải chi tiết:", error);
} finally {
setLoadingContent(false);
}
};
const handleUpdateStatus = async (status: "APPROVED" | "REJECTED") => {
if (!application) return;
if (status === "REJECTED" && !reviewNote.trim()) {
Swal.fire(
"Cảnh báo",
"Vui lòng nhập lý do từ chối vào ô Ghi chú!",
"warning",
);
if (!reviewNote.trim()) {
textareaRef.current?.focus();
return;
}
try {
setIsSubmitting(true);
const payload = {
status: status,
await apiUpdateApplicationStatus(application.id, {
status,
review_note: reviewNote,
};
// console.log("Payload gửi lên API:", payload, "Application ID:", application.id);
await apiUpdateApplicationStatus(application.id, payload);
});
Swal.fire(
"Thành công!",
`Hồ sơ đã được ${status === "APPROVED" ? "Phê duyệt" : "Từ chối"}.`,
"success",
);
Swal.fire("Thành công!", "Trạng thái hồ sơ đã được cập nhật.", "success");
onRefresh();
onClose();
} catch (error) {
console.error("Lỗi cập nhật trạng thái:", error);
Swal.fire("Lỗi", "Không thể cập nhật trạng thái lúc này.", "error");
Swal.fire("Lỗi", "Không thể cập nhật trạng thái.", "error");
} finally {
setIsSubmitting(false);
}
@@ -106,40 +59,18 @@ export default function ApplicationDetailModal({
if (!isOpen || !application) return null;
const handleOpenFile = (media: any) => {
if (!media.url) {
Swal.fire("Lỗi", "Không tìm thấy đường dẫn file", "error");
return;
}
const isImage = media.url.match(/\.(jpeg|jpg|gif|png)$/i);
const isPdf = media.url.match(/\.(pdf)$/i);
if (isImage || isPdf) {
window.open(media.url, "_blank");
} else {
const link = document.createElement("a");
link.href = media.url;
link.download = media.original_name || "download";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
};
// console.log("ApplicationDetailModal:", application);
const userData = application.user || {};
const mediaList = application.media || [];
return (
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
<div className="w-full max-w-4xl max-h-[90vh] bg-white rounded-2xl shadow-xl dark:bg-gray-900 flex flex-col overflow-hidden">
<div className="fixed inset-0 z-999 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
<div className="w-full max-w-4xl max-h-[90vh] bg-white rounded-2xl dark:bg-gray-900 flex flex-col overflow-hidden text-gray-800 dark:text-gray-200">
{/* HEADER */}
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
<h3 className="text-xl font-semibold text-gray-800 dark:text-white">
Chi tiết yêu cầu nâng cấp
</h3>
<h3 className="text-xl font-semibold">Chi tiết yêu cầu nâng cấp</h3>
<button
onClick={onClose}
className="p-2 text-gray-500 transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-400"
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors"
>
<svg
className="w-5 h-5"
@@ -159,163 +90,146 @@ export default function ApplicationDetailModal({
{/* BODY */}
<div className="flex-1 p-6 overflow-y-auto custom-scrollbar">
{loadingContent ? (
<div className="flex flex-col items-center justify-center h-40 gap-3 text-gray-500">
<div className="w-8 h-8 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
<p>Đang tải dữ liệu người dùng và file đính kèm...</p>
</div>
) : (
<div className="flex flex-col gap-8">
<div className="p-5 border border-gray-200 rounded-xl dark:border-gray-800 bg-gray-50/50 dark:bg-white/[0.02]">
<h4 className="mb-4 text-sm font-bold text-gray-500 uppercase">
Thông tin ứng viên
</h4>
<div className="flex items-center gap-4">
<div className="relative w-16 h-16 overflow-hidden border border-gray-200 rounded-full shrink-0 dark:border-gray-700">
<Image
width={64}
height={64}
src={
userData?.profile?.avatar_url || "/images/no-images.jpg"
}
alt="avatar"
className="object-cover w-full h-full"
/>
</div>
<div>
<h4 className="text-lg font-semibold text-gray-800 dark:text-white">
{userData?.profile?.display_name || application.user_id}
</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Email: {userData?.email || "Đang cập nhật..."}
</p>
<div className="mt-1">
<span className="px-2 py-0.5 text-[10px] font-medium tracking-wide text-blue-600 bg-blue-100 rounded-full dark:bg-blue-500/20 dark:text-blue-400">
{application.verify_type}
</span>
</div>
<div className="flex flex-col gap-8">
{/* THÔNG TIN NGƯỜI DÙNG */}
<div className="p-5 border border-gray-200 rounded-xl dark:border-gray-800 bg-gray-50/50 dark:bg-white/[0.02]">
<h4 className="mb-4 text-xs font-bold text-gray-500 uppercase tracking-wider">
Thông tin ứng viên
</h4>
<div className="flex items-center gap-4">
<div className="relative w-16 h-16 overflow-hidden border border-gray-200 rounded-full shrink-0 dark:border-gray-700">
<Image
fill
src={userData.avatar_url || "/images/no-images.jpg"}
alt="avatar"
className="object-cover"
/>
</div>
<div>
<h4 className="text-lg font-semibold">
{userData.display_name || "N/A"}
</h4>
<p className="text-sm text-gray-500">
{userData.email || "Không có email"}
</p>
<div className="mt-1 flex gap-2">
<span className="px-2 py-0.5 text-[10px] font-bold uppercase text-blue-600 bg-blue-100 rounded-md dark:bg-blue-500/20 dark:text-blue-400">
{application.verify_type}
</span>
<span
className={`px-2 py-0.5 text-[10px] font-semibold uppercase rounded-md ${application.status === "PENDING" ? "bg-yellow-100 text-yellow-600" : "bg-red-100 text-red-500"}`}
>
{application.status}
</span>
</div>
</div>
</div>
<div>
<h4 className="mb-3 text-sm font-bold text-gray-500 uppercase">
Nội dung ứng tuyển
</h4>
<div
className="p-4 prose text-gray-800 bg-white border border-gray-200 min-h-[100px] rounded-xl dark:border-gray-800 dark:bg-gray-900 dark:text-gray-200 max-w-none"
dangerouslySetInnerHTML={{
__html:
application.content ||
"<p className='text-gray-400 italic'>Không có nội dung chữ.</p>",
}}
/>
</div>
<div>
<h4 className="mb-3 text-sm font-bold text-gray-500 uppercase">
Tệp đính kèm ({mediaList.length})
</h4>
{mediaList.length > 0 ? (
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
{mediaList.map((media, idx) => {
const isImage =
media.url?.match(/\.(jpeg|jpg|gif|png)$/i) ||
media.mime_type?.startsWith("image/");
return (
<div
key={idx}
className="relative overflow-hidden border border-gray-200 group aspect-square rounded-xl dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
>
{isImage ? (
<Image
src={media.url || "/images/no-images.jpg"}
alt="media"
fill
className="object-cover transition-transform duration-300 group-hover:scale-110"
/>
) : (
<div className="flex flex-col items-center justify-center w-full h-full p-3 text-center">
<svg
className="w-10 h-10 mb-2 text-blue-500"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z" />
</svg>
<span className="text-xs font-medium text-gray-600 line-clamp-2 dark:text-gray-300">
{media.original_name || "Tài liệu"}
</span>
</div>
)}
{/* <button
onClick={() => handleOpenFile(media)}
className="absolute inset-0 flex items-center justify-center transition-opacity bg-black/50 opacity-0 group-hover:opacity-100"
>
<span className="px-3 py-1 text-sm font-medium text-white bg-blue-600 rounded-lg">
{media.url.match(/\.(jpeg|jpg|gif|png)$/i)
? "Xem ảnh"
: "Tải tài liệu"}
</span>
</button> */}
<Link
className="absolute inset-0 flex items-center justify-center transition-opacity bg-black/50 opacity-0 group-hover:opacity-100"
href={`${URL_MEDIA}${media.storage_key}`}
target="_blank"
></Link>
</div>
);
})}
</div>
) : (
<p className="text-sm italic text-gray-500">
Không có tệp đính kèm nào.
</p>
)}
</div>
{/* KHỐI 4: GHI CHÚ ADMIN */}
<div>
<h4 className="mb-3 text-sm font-bold text-gray-500 uppercase">
Ghi chú duyệt hồ sơ
</h4>
<textarea
className="w-full p-4 text-sm bg-white border border-gray-200 rounded-xl dark:border-gray-800 dark:bg-gray-900 focus:ring-2 focus:ring-blue-500 outline-none resize-none h-[100px]"
placeholder="Nhập lý do từ chối (bắt buộc) hoặc ghi chú phê duyệt..."
value={reviewNote}
onChange={(e) => setReviewNote(e.target.value)}
disabled={
application.status !== 1 && application.status !== "PENDING"
} // Disable nếu đã duyệt
/>
</div>
</div>
)}
<div>
<h4 className="mb-3 text-xs font-bold text-gray-500 uppercase tracking-wider">
Nội dung ứng tuyển
</h4>
<div
className="p-4 prose bg-white border border-gray-200 min-h-[100px] rounded-xl dark:border-gray-800 dark:bg-gray-900 dark:text-gray-200 max-w-none"
dangerouslySetInnerHTML={{
__html: application.content || "<i>Không có nội dung.</i>",
}}
/>
</div>
<div>
<h4 className="mb-3 text-xs font-bold text-gray-500 uppercase tracking-wider">
Tệp đính kèm ({mediaList.length})
</h4>
{mediaList.length > 0 ? (
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
{mediaList.map((media: any, idx: number) => {
const isImage = media.mime_type?.startsWith("image/");
return (
<div
key={idx}
className="relative overflow-hidden border border-gray-200 group aspect-square rounded-xl dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
>
{isImage ? (
<Image
src={`${URL_MEDIA}${media.storage_key}`}
alt="media"
fill
className="object-cover transition-transform duration-300 group-hover:scale-110"
/>
) : (
<div className="flex flex-col items-center justify-center w-full h-full p-3 text-center">
<svg
className="w-10 h-10 mb-2 text-blue-500"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z" />
</svg>
<span className="text-[10px] font-medium text-gray-600 line-clamp-2">
{media.original_name}
</span>
</div>
)}
<Link
className="absolute inset-0 flex items-center justify-center transition-opacity bg-black/40 opacity-0 group-hover:opacity-100 z-10"
href={`${URL_MEDIA}${media.storage_key}`}
target="_blank"
>
<span className="text-white text-xs font-bold px-3 py-1 bg-white/20 backdrop-blur-md rounded-full border border-white/30">
Xem file
</span>
</Link>
</div>
);
})}
</div>
) : (
<p className="text-sm italic text-gray-400">
Không có tệp đính kèm.
</p>
)}
</div>
{/* GHI CHÚ */}
<div>
<h4 className="mb-3 text-xs font-bold text-gray-500 uppercase tracking-wider">
Ghi chú duyệt hồ sơ
</h4>
<textarea
ref={textareaRef}
className="w-full p-4 text-sm bg-white border border-gray-200 rounded-xl dark:border-gray-800 dark:bg-gray-900 focus:ring-2 focus:ring-blue-500 outline-none resize-none h-[100px]"
placeholder="Nhập lý do (bắt buộc) hoặc ghi chú thêm..."
value={reviewNote}
onChange={(e) => setReviewNote(e.target.value)}
disabled={application.status !== "PENDING"}
/>
</div>
</div>
</div>
{/* FOOTER ACTIONS */}
{/* FOOTER */}
<div className="flex items-center justify-end gap-3 px-6 py-4 bg-gray-50 border-t border-gray-200 dark:bg-gray-900/50 dark:border-gray-800">
<button
onClick={onClose}
className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
className="px-5 py-2 text-sm font-medium border border-gray-300 rounded-xl hover:bg-gray-100 transition-colors"
>
Đóng
</button>
{/* Chỉ hiện nút duyệt/từ chối nếu status đang là PENDING (1) */}
{(application.status === 1 || application.status === "PENDING") && (
{application.status === "PENDING" && (
<>
<button
onClick={() => handleUpdateStatus("REJECTED")}
disabled={isSubmitting}
className="px-5 py-2.5 text-sm font-medium text-white bg-red-600 border border-transparent rounded-xl hover:bg-red-700 disabled:opacity-50 transition-colors"
className="px-5 py-2 text-sm font-medium text-white bg-red-500 rounded-xl hover:bg-red-600 disabled:opacity-50 transition-all"
>
Từ chối
</button>
<button
onClick={() => handleUpdateStatus("APPROVED")}
disabled={isSubmitting}
className="px-5 py-2.5 text-sm font-medium text-white bg-green-600 border border-transparent rounded-xl hover:bg-green-700 disabled:opacity-50 transition-colors shadow-lg shadow-green-500/30"
className="px-5 py-2 text-sm font-medium text-white bg-green-500 rounded-xl hover:bg-green-600 disabled:opacity-50 transition-all"
>
Phê duyệt
</button>

149
src/components/tables/ApplicationTable.tsx
View File

@@ -51,15 +51,29 @@ export default function ApplicationTable({
<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"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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-700 opacity-100" : "text-gray-400"}`}
fill="none" stroke="currentColor" viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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>
);
@@ -70,28 +84,46 @@ export default function ApplicationTable({
switch (s) {
case "1":
case "PENDING":
return <Badge size="sm" variant="light" color="warning">Đang chờ</Badge>;
return (
<Badge size="sm" variant="light" color="warning">
Đang chờ
</Badge>
);
case "2":
case "APPROVED":
return <Badge size="sm" variant="light" color="success">Đã duyệt</Badge>;
return (
<Badge size="sm" variant="light" color="success">
Đã duyệt
</Badge>
);
case "3":
case "REJECTED":
return <Badge size="sm" variant="light" color="error">Từ chối</Badge>;
return (
<Badge size="sm" variant="light" color="error">
Từ chối
</Badge>
);
default:
return <Badge size="sm" variant="light" color="light">{status || "N/A"}</Badge>;
return (
<Badge size="sm" variant="light" color="light">
{status || "N/A"}
</Badge>
);
}
};
const renderVerifyTypes = (verifyType: string | string[] | number | number[]) => {
const renderVerifyTypes = (
verifyType: string | string[] | number | number[],
) => {
const typeMap: Record<string, string> = {
"1": "Thẻ nhận dạng nhà nghiên cứu",
"ID_CARD": "Thẻ nhận dạng nhà nghiên cứu",
ID_CARD: "Thẻ nhận dạng nhà nghiên cứu",
"2": "Bằng cấp",
"EDUCATION": "Bằng cấp",
EDUCATION: "Bằng cấp",
"3": "Chuyên gia",
"EXPERT": "Chuyên gia",
EXPERT: "Chuyên gia",
"4": "Khác",
"OTHER": "Khác",
OTHER: "Khác",
};
const typesArray = Array.isArray(verifyType) ? verifyType : [verifyType];
@@ -121,37 +153,73 @@ export default function ApplicationTable({
<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">
<TableCell
isHeader
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
>
Người gửi (ID)
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400 min-w-[220px]">
<TableCell
isHeader
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400 min-w-[220px]"
>
Loại xác minh
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
<TableCell
isHeader
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
>
Đính kèm
</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("status")}>
<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("status")}
>
Trạng thái <SortIcon column="status" />
</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("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 nộp <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("reviewed_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("reviewed_at")}
>
Cập nhật <SortIcon column="reviewed_at" />
</div>
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
<TableCell
isHeader
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
>
Cập nhật bởi
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400 max-w-[200px]">
<TableCell
isHeader
className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400 max-w-[200px]"
>
Ghi chú
</TableCell>
<TableCell isHeader className="px-5 py-3 font-medium text-center text-gray-500 text-theme-xs dark:text-gray-400">
<TableCell
isHeader
className="px-5 py-3 font-medium text-center text-gray-500 text-theme-xs dark:text-gray-400"
>
Thao tác
</TableCell>
</TableRow>
@@ -160,17 +228,22 @@ export default function ApplicationTable({
<TableBody className="divide-y divide-gray-100 dark:divide-white/[0.05]">
{data.length > 0 ? (
data.map((app) => (
<TableRow key={app.id} className="hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors">
<TableRow
key={app.id}
className="hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors"
>
<TableCell className="px-5 py-4 text-start font-mono text-theme-xs">
{app.user_id.slice(0, 8)}...
{app.user.display_name}
</TableCell>
<TableCell className="px-5 py-4 text-start">
{renderVerifyTypes(app.verify_type)}
</TableCell>
<TableCell className="px-5 py-4 text-center text-theme-sm">
<span className="font-bold text-gray-800 dark:text-white mr-1">{app.media?.length || 0}</span>
<span className="font-bold text-gray-800 dark:text-white mr-1">
{app.media?.length || 0}
</span>
</TableCell>
<TableCell className="px-5 py-4 text-start">
<TableCell className="px-5 py-4 text-center ">
{getStatusBadge(app.status)}
</TableCell>
<TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
@@ -180,10 +253,17 @@ export default function ApplicationTable({
{formatDate(app.reviewed_at)}
</TableCell>
<TableCell className="px-5 py-4 text-gray-600 text-theme-sm dark:text-gray-400">
{app.reviewed_by || "-"}
{app.reviewer?.display_name || "-"}
</TableCell>
<TableCell className="px-5 py-4 text-start text-theme-xs text-gray-500 dark:text-gray-400 truncate max-w-[200px]">
{app.review_note || "-"}
<TableCell className="group relative px-5 pb-4 text-start text-theme-xs text-gray-500 dark:text-gray-400 max-w-50">
<div className="truncate">{app.review_note || "-"}</div>
{app.review_note && (
<div className="invisible group-hover:visible absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-1 w-max max-w-75 p-2 backdrop-blur-sm text-black text-xs rounded-lg shadow-xl wrap-break-words whitespace-normal">
{app.review_note}
{/* <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-600"></div> */}
</div>
)}
</TableCell>
<TableCell className="px-5 py-4 text-center">
<button
@@ -197,7 +277,10 @@ export default function ApplicationTable({
))
) : (
<TableRow>
<TableCell colSpan={9} className="px-5 py-20 text-center text-gray-500 italic">
<TableCell
colSpan={9}
className="px-5 py-20 text-center text-gray-500 italic"
>
Không tìm thấy dữ liệu hồ sơ
</TableCell>
</TableRow>

8
src/components/tables/Pagination.tsx
View File

@@ -9,10 +9,7 @@ const Pagination: React.FC<PaginationProps> = ({
totalPages,
onPageChange,
}) => {
const pagesAroundCurrent = Array.from(
{ length: Math.min(3, totalPages) },
(_, i) => i + Math.max(currentPage - 1, 1)
);
const allPages = Array.from({ length: totalPages }, (_, i) => i + 1);
return (
<div className="flex items-center ">
@@ -25,7 +22,7 @@ const Pagination: React.FC<PaginationProps> = ({
</button>
<div className="flex items-center gap-2">
{currentPage > 3 && <span className="px-2">...</span>}
{pagesAroundCurrent.map((page) => (
{allPages.map((page) => (
<button
key={page}
onClick={() => onPageChange(page)}
@@ -40,6 +37,7 @@ const Pagination: React.FC<PaginationProps> = ({
))}
{currentPage < totalPages - 2 && <span className="px-2">...</span>}
</div>
<button
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPages}

19
src/interface/historian.ts
View File

@@ -9,8 +9,8 @@ export interface MediaDto {
export interface ApplicationDto {
id: string;
user_id: string;
verify_type: string | number ;
user_id?: string;
verify_type: string | number;
content: string;
is_deleted: boolean;
status: string | number;
@@ -20,9 +20,22 @@ export interface ApplicationDto {
created_at: string;
updated_at?: string;
media: any[];
user: {
display_name?: string;
avatar_url?: string;
full_name?: string;
id?: string;
email?: string;
};
reviewer?: {
display_name?: string;
avatar_url?: string;
full_name?: string;
id?: string;
email?: string;
};
}
export interface GetApplicationsParams {
page?: number;
limit?: number;