update
This commit is contained in:
@@ -11,6 +11,8 @@ import Zoom from "yet-another-react-lightbox/plugins/zoom";
|
||||
import Captions from "yet-another-react-lightbox/plugins/captions";
|
||||
import "yet-another-react-lightbox/styles.css";
|
||||
import "yet-another-react-lightbox/plugins/captions.css";
|
||||
import { IsolatedContent } from "@/components/ui/IsolatedContent";
|
||||
import { apiDeleteHistorianCV } from "@/service/historianService";
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
@@ -57,7 +59,9 @@ export default function ApplicationDetailModal({
|
||||
const handleMediaClick = (item: any) => {
|
||||
const fileUrl = `${URL_MEDIA}${item.storage_key}`;
|
||||
if (isImageFile(item)) {
|
||||
const photoIndex = imageMediaOnly.findIndex((img: any) => img.id === item.id);
|
||||
const photoIndex = imageMediaOnly.findIndex(
|
||||
(img: any) => img.id === item.id,
|
||||
);
|
||||
setIndex(photoIndex);
|
||||
} else {
|
||||
const googleDocsUrl = `https://docs.google.com/viewer?url=${encodeURIComponent(fileUrl)}&embedded=true`;
|
||||
@@ -87,6 +91,13 @@ export default function ApplicationDetailModal({
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteApplication = async () => {
|
||||
await apiDeleteHistorianCV(application.id);
|
||||
Swal.fire("Thành công!", "Hồ sơ đã được xóa.", "success");
|
||||
onRefresh();
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (!isOpen || !application) return null;
|
||||
|
||||
const userData = application.user || {};
|
||||
@@ -96,9 +107,22 @@ export default function ApplicationDetailModal({
|
||||
<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">
|
||||
<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">Chi tiết yêu cầu nâng cấp</h3>
|
||||
<button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -106,17 +130,32 @@ export default function ApplicationDetailModal({
|
||||
<div className="flex-1 p-6 overflow-y-auto custom-scrollbar">
|
||||
<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-xs font-bold text-gray-500 uppercase tracking-wider">Thông tin ứng viên</h4>
|
||||
<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">
|
||||
<Image fill src={userData.avatar_url || "/images/no-images.jpg"} alt="avatar" className="object-cover" />
|
||||
<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>
|
||||
<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">{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"}`}>
|
||||
<span className="px-2 py-0.5 text-[10px] font-bold uppercase text-blue-600 bg-blue-100 rounded-md">
|
||||
{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>
|
||||
@@ -125,15 +164,18 @@ export default function ApplicationDetailModal({
|
||||
</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>" }}
|
||||
/>
|
||||
<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">
|
||||
<IsolatedContent html={application.content} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-3 text-xs font-bold text-gray-500 uppercase tracking-wider">Tệp đính kèm ({mediaList.length})</h4>
|
||||
<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) => {
|
||||
@@ -145,11 +187,20 @@ export default function ApplicationDetailModal({
|
||||
className="relative overflow-hidden border border-gray-200 group aspect-square rounded-xl dark:border-gray-700 bg-gray-50 dark:bg-gray-800 cursor-pointer"
|
||||
>
|
||||
{isImg ? (
|
||||
<Image src={`${URL_MEDIA}${media.storage_key}`} alt="media" fill className="object-cover transition-transform duration-300 group-hover:scale-110" />
|
||||
<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">
|
||||
<div className="w-10 h-10 mb-2 flex items-center justify-center bg-white dark:bg-zinc-800 rounded-lg shadow-sm text-xl">📄</div>
|
||||
<span className="text-[10px] font-medium text-gray-600 line-clamp-2">{media.original_name}</span>
|
||||
<div className="w-10 h-10 mb-2 flex items-center justify-center bg-white dark:bg-zinc-800 rounded-lg shadow-sm text-xl">
|
||||
📄
|
||||
</div>
|
||||
<span className="text-[10px] font-medium text-gray-600 line-clamp-2">
|
||||
{media.original_name}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0 flex items-center justify-center transition-opacity bg-black/40 opacity-0 group-hover:opacity-100 z-10">
|
||||
@@ -162,12 +213,16 @@ export default function ApplicationDetailModal({
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm italic text-gray-400">Không có tệp đính kèm.</p>
|
||||
<p className="text-sm italic text-gray-400">
|
||||
Không có tệp đính kèm.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-3 text-xs font-bold text-gray-500 uppercase tracking-wider">Ghi chú duyệt hồ sơ</h4>
|
||||
<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 h-[100px]"
|
||||
@@ -181,13 +236,36 @@ export default function ApplicationDetailModal({
|
||||
</div>
|
||||
|
||||
<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 text-sm font-medium border border-gray-300 rounded-xl hover:bg-gray-100 transition-colors">Đóng</button>
|
||||
{application.status === "PENDING" && (
|
||||
<>
|
||||
<button onClick={() => handleUpdateStatus("REJECTED")} disabled={isSubmitting} className="px-5 py-2 text-sm font-medium text-white bg-red-500 rounded-xl hover:bg-red-600">Từ chối</button>
|
||||
<button onClick={() => handleUpdateStatus("APPROVED")} disabled={isSubmitting} className="px-5 py-2 text-sm font-medium text-white bg-green-500 rounded-xl hover:bg-green-600">Phê duyệt</button>
|
||||
<button
|
||||
onClick={() => handleUpdateStatus("REJECTED")}
|
||||
disabled={isSubmitting}
|
||||
className="px-5 py-2 text-sm font-medium text-white bg-red-500 rounded-xl hover:bg-red-600"
|
||||
>
|
||||
Từ chối
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleUpdateStatus("APPROVED")}
|
||||
disabled={isSubmitting}
|
||||
className="px-5 py-2 text-sm font-medium text-white bg-green-500 rounded-xl hover:bg-green-600"
|
||||
>
|
||||
Phê duyệt
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={handleDeleteApplication}
|
||||
className="px-5 py-2 text-sm font-medium text-white bg-red-500 rounded-xl hover:bg-red-600"
|
||||
>
|
||||
Xóa
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-5 py-2 text-sm font-medium border border-gray-300 rounded-xl hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
Đóng
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -201,4 +279,4 @@ export default function ApplicationDetailModal({
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user