update

src/components/tables/ApplicationDetailModal.tsx

@@ -3,11 +3,15 @@
 import React, { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Swal from "sweetalert2";
-import { ApplicationDto } from "@/interface/historian";
 import { apiUpdateApplicationStatus } from "@/service/adminService";
-import Link from "next/link";
 import { URL_MEDIA } from "../../../api";
 
+import Lightbox from "yet-another-react-lightbox";
+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";
+
 interface Props {
   isOpen: boolean;
   onClose: () => void;
@@ -24,6 +28,9 @@ export default function ApplicationDetailModal({
   const [reviewNote, setReviewNote] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const [index, setIndex] = useState(-1);
+
   useEffect(() => {
     if (isOpen && application) {
       setReviewNote(application.review_note || "");
@@ -32,21 +39,44 @@ export default function ApplicationDetailModal({
     }
   }, [isOpen, application]);
 
+  const isImageFile = (file: any) => {
+    const isImageMime = file.mime_type?.startsWith("image/");
+    const isImageExt = /\.(jpg|jpeg|png|webp|gif)$/i.test(file.storage_key);
+    return isImageMime || isImageExt;
+  };
+
+  const mediaList = application?.media || [];
+  const imageMediaOnly = mediaList.filter(isImageFile);
+
+  const imageSlides = imageMediaOnly.map((item: any) => ({
+    src: `${URL_MEDIA}${item.storage_key}`,
+    title: item.original_name,
+    description: `Dung lượng: ${(item.size / 1024).toFixed(2)} KB`,
+  }));
+
+  const handleMediaClick = (item: any) => {
+    const fileUrl = `${URL_MEDIA}${item.storage_key}`;
+    if (isImageFile(item)) {
+      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`;
+      window.open(googleDocsUrl, "_blank");
+    }
+  };
+
   const handleUpdateStatus = async (status: "APPROVED" | "REJECTED") => {
     if (!application) return;
-
     if (!reviewNote.trim()) {
       textareaRef.current?.focus();
       return;
     }
-
     try {
       setIsSubmitting(true);
       await apiUpdateApplicationStatus(application.id, {
         status,
         review_note: reviewNote,
       });
-
       Swal.fire("Thành công!", "Trạng thái hồ sơ đã được cập nhật.", "success");
       onRefresh();
       onClose();
@@ -60,65 +90,33 @@ export default function ApplicationDetailModal({
   if (!isOpen || !application) return null;
 
   const userData = application.user || {};
-  const mediaList = application.media || [];
 
   return (
     <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">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 transition-colors"
-          >
-            <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>
 
-        {/* BODY */}
         <div className="flex-1 p-6 overflow-y-auto custom-scrollbar">
           <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>
+              <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 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" />
                 </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 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"}`}
-                    >
+                    <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>
@@ -127,80 +125,53 @@ 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>
+              <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>",
-                }}
+                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>
+              <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/");
+                    const isImg = isImageFile(media);
                     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"
+                        onClick={() => handleMediaClick(media)}
+                        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"
                       >
-                        {isImage ? (
-                          <Image
-                            src={`${URL_MEDIA}${media.storage_key}`}
-                            alt="media"
-                            fill
-                            className="object-cover transition-transform duration-300 group-hover:scale-110"
-                          />
+                        {isImg ? (
+                          <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 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>
                         )}
-                        <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"
-                        >
+                        <div className="absolute inset-0 flex items-center justify-center transition-opacity bg-black/40 opacity-0 group-hover:opacity-100 z-10">
                           <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
+                            {isImg ? "Xem ảnh" : "Xem file"}
                           </span>
-                        </Link>
+                        </div>
                       </div>
                     );
                   })}
                 </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>
 
-            {/* GHI CHÚ */}
             <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 resize-none h-[100px]"
-                placeholder="Nhập lý do (bắt buộc) hoặc ghi chú thêm..."
+                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]"
+                placeholder="Nhập lý do (bắt buộc)..."
                 value={reviewNote}
                 onChange={(e) => setReviewNote(e.target.value)}
                 disabled={application.status !== "PENDING"}
@@ -209,34 +180,25 @@ export default function ApplicationDetailModal({
           </div>
         </div>
 
-        {/* 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 text-sm font-medium border border-gray-300 rounded-xl hover:bg-gray-100 transition-colors"
-          >
-            Đóng
-          </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>
           {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 disabled:opacity-50 transition-all"
-              >
-                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 disabled:opacity-50 transition-all"
-              >
-                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>
             </>
           )}
         </div>
       </div>
+
+      <Lightbox
+        index={index}
+        open={index >= 0}
+        close={() => setIndex(-1)}
+        slides={imageSlides}
+        plugins={[Zoom, Captions]}
+        styles={{ root: { zIndex: 999999 } }}
+      />
     </div>
   );
-}
+}

src/components/user-profile/ApplicationList.tsx

@@ -4,11 +4,19 @@ import { setSelectedApplication } from "@/store/features/userSlice";
 import { useRouter } from "next/navigation";
 import { useDispatch } from "react-redux";
 import { URL_MEDIA } from "../../../api";
+import { statusConfig } from "@/service/handler";
 
 const formatFullDateTime = (dateString: string) => {
   const date = new Date(dateString);
-  const time = date.toLocaleTimeString("vi-VN", { hour: "2-digit", minute: "2-digit" });
-  const day = date.toLocaleDateString("vi-VN", { day: "2-digit", month: "2-digit", year: "numeric" });
+  const time = date.toLocaleTimeString("vi-VN", {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  const day = date.toLocaleDateString("vi-VN", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
   return `${time} ${day}`;
 };
 
@@ -20,18 +28,29 @@ const processMedia = (mediaArray: any[]) => {
     return isImageMime || isImageExt;
   });
   const docFiles = mediaArray.filter((file) => {
-    const isImage = file.mime_type?.startsWith("image/") || /\.(jpg|jpeg|png|webp|gif)$/i.test(file.storage_key);
+    const isImage =
+      file.mime_type?.startsWith("image/") ||
+      /\.(jpg|jpeg|png|webp|gif)$/i.test(file.storage_key);
     return !isImage;
   });
-  if (imageFiles.length > 0) return { type: "image", src: `${URL_MEDIA}${imageFiles[0].storage_key}` };
+  if (imageFiles.length > 0)
+    return { type: "image", src: `${URL_MEDIA}${imageFiles[0].storage_key}` };
   if (docFiles.length > 0) {
-    const extensions = docFiles.map((file) => file.mime_type ? file.mime_type.split("/")[1] : file.storage_key.split(".").pop() || "file");
+    const extensions = docFiles.map((file) =>
+      file.mime_type
+        ? file.mime_type.split("/")[1]
+        : file.storage_key.split(".").pop() || "file",
+    );
     return { type: "documents", extensions };
   }
   return { type: "empty" };
 };
 
-export default function ApplicationSquareCardList({ applications }: { applications: any[] }) {
+export default function ApplicationSquareCardList({
+  applications,
+}: {
+  applications: any[];
+}) {
   const router = useRouter();
   const dispatch = useDispatch();
 
@@ -45,16 +64,21 @@ export default function ApplicationSquareCardList({ applications }: { applicatio
       <h4 className="text-lg font-bold text-zinc-800 dark:text-white/90 mb-5 tracking-tight">
         Applications CV
       </h4>
-      
+
       <div className="flex flex-wrap gap-4">
         {applications?.map((app) => {
           const mediaState = processMedia(app.media);
+
+          // --- LOGIC STATUS NẰM TRONG VÒNG LẶP ---
+          const config = statusConfig[app.status] || statusConfig.PENDING;
+
           return (
             <div
               key={app.id}
               onClick={() => handleViewDetail(app)}
-              className="group relative h-40 aspect-square border dark:border-zinc-800 rounded-xl cursor-pointer overflow-hidden transition-all duration-300 hover:ring-2 hover:ring-blue-500/50"
+              className="group relative h-60 aspect-square border dark:border-zinc-800 rounded-xl cursor-pointer overflow-hidden transition-all duration-300 hover:ring-2 hover:ring-blue-500/50"
             >
+              {/* BACKGROUND */}
               <div className="absolute inset-0 z-0">
                 {mediaState.type === "image" ? (
                   <img
@@ -67,7 +91,10 @@ export default function ApplicationSquareCardList({ applications }: { applicatio
                     {mediaState.type === "documents" ? (
                       <div className="flex flex-wrap gap-1 justify-center">
                         {mediaState.extensions?.slice(0, 3).map((ext, i) => (
-                          <span key={i} className="text-[9px] font-black px-1.5 py-0.5 bg-white dark:bg-zinc-800 rounded border dark:border-zinc-700 uppercase">
+                          <span
+                            key={i}
+                            className="text-[9px] font-black px-1.5 py-0.5 bg-white dark:bg-zinc-800 rounded border dark:border-zinc-700 uppercase"
+                          >
                             .{ext}
                           </span>
                         ))}
@@ -79,15 +106,24 @@ export default function ApplicationSquareCardList({ applications }: { applicatio
                 )}
               </div>
 
+              {/* OVERLAY */}
               <div className="absolute inset-0 z-10 bg-gradient-to-t from-black/90 via-black/20 to-transparent transition-opacity group-hover:opacity-90" />
 
+              {/* TOP INFO: STATUS & FILE COUNT */}
               <div className="absolute top-2 left-2 right-2 z-20 flex justify-between items-start">
-                <div className={`flex items-center gap-1.5 rounded-md backdrop-blur-md border border-white/10 ${
-                  app.status === "PENDING" ? "bg-amber-500/20 text-amber-400" : "bg-emerald-500/20 text-emerald-400"
-                }`}>
-                  <span className={`w-2 h-2 rounded-full animate-pulse ${app.status === "PENDING" ? "bg-amber-500" : "bg-emerald-500"}`} />
+                <div
+                  className={`flex items-center p-1 rounded-full border ${config.container}`}
+                >
+                  <span
+                    className={`w-2 h-2 rounded-full ${config.dot} ${
+                      app.status === "PENDING" ? "animate-pulse" : ""
+                    }`}
+                  />
+                  {/* <span className="text-[9px] font-bold uppercase tracking-wider">
+                    {app.status}
+                  </span> */}
                 </div>
-                
+
                 {app.media?.length > 0 && (
                   <span className="text-[9px] font-bold text-white/60 bg-black/40 px-1.5 py-0.5 rounded-md backdrop-blur-sm">
                     {app.media.length} FILE
@@ -95,13 +131,14 @@ export default function ApplicationSquareCardList({ applications }: { applicatio
                 )}
               </div>
 
+              {/* BOTTOM INFO */}
               <div className="absolute bottom-2 left-2 right-2 z-20 text-white">
                 <div className="mb-1">
-                  <p className="text-[10px] font-black tracking-tighter truncate">
+                  <p className="text-[10px] font-bold uppercase opacity-80 truncate">
                     {app.verify_type || "VERIFY"}
                   </p>
                   {app?.reviewer?.display_name && (
-                    <p className="text-[9px] font-medium text-white/50 truncate">
+                    <p className="text-[9px] font-medium text-blue-400 truncate">
                       By: {app.reviewer.display_name}
                     </p>
                   )}
@@ -112,8 +149,18 @@ export default function ApplicationSquareCardList({ applications }: { applicatio
                     {formatFullDateTime(app.created_at)}
                   </p>
                   <div className="transform translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">
-                    <svg className="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                    <svg
+                      className="w-4 h-4 text-blue-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={3}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M13 7l5 5m0 0l-5 5m5-5H6"
+                      />
                     </svg>
                   </div>
                 </div>
@@ -124,4 +171,4 @@ export default function ApplicationSquareCardList({ applications }: { applicatio
       </div>
     </div>
   );
-}
+}