feat:update all page

src/components/page/prescription/DetailPrescription/DetailPrescription.tsx

@@ -6,12 +6,15 @@ import prescriptionServices, {
   PrescriptionDetail,
 } from "@/services/prescriptionServices";
 import { useQuery } from "@tanstack/react-query";
+import Image from "next/image";
 import { useParams } from "next/navigation";
-import React from "react";
+import React, { useState } from "react";
+import CustomPopup from "@/components/customs/custom-popup";
 
 const DetailPrescription = () => {
   const params = useParams();
   const PrescriptionId = params?.id as string;
+  const [openImagePreview, setOpenImagePreview] = useState(false);
 
   const prescriptionDetailQuery = useQuery<PrescriptionDetail>({
     queryKey: [QUERY_KEY.chi_tiet_don_thuoc, PrescriptionId],
@@ -61,7 +64,7 @@ const DetailPrescription = () => {
           </div>
 
           <div>
-            <strong>Phiên khám:</strong> {data.examinationSessionId}
+            <strong>Id phiên khám:</strong> {data.examinationSessionId}
           </div>
 
           <div>
@@ -73,11 +76,34 @@ const DetailPrescription = () => {
             <strong>Ảnh đơn thuốc:</strong>
             <div className="mt-2">
               {data.prescriptionImg ? (
-                <img
-                  src={data.prescriptionImg}
-                  alt="prescription"
-                  className="h-32 w-32 object-cover rounded"
-                />
+                <>
+                  <Image
+                    src={`${process.env.NEXT_PUBLIC_IMAGE}${data.prescriptionImg}`}
+                    alt="prescription"
+                    width={140}
+                    height={140}
+                    className="h-10 w-10 rounded object-cover cursor-pointer hover:opacity-80 transition-opacity"
+                    onClick={() => setOpenImagePreview(true)}
+                    unoptimized
+                  />
+
+                  {/* IMAGE PREVIEW POPUP */}
+                  <CustomPopup
+                    open={openImagePreview}
+                    onClose={() => setOpenImagePreview(false)}
+                  >
+                    <div className="relative rounded-lg p-4 max-w-[90vw] max-h-[90vh] flex items-center justify-center">
+                      <Image
+                        src={`${process.env.NEXT_PUBLIC_IMAGE}${data.prescriptionImg}`}
+                        alt="prescription preview"
+                        width={600}
+                        height={600}
+                        className="max-w-full max-h-full object-contain"
+                        unoptimized
+                      />
+                    </div>
+                  </CustomPopup>
+                </>
               ) : (
                 <span className="text-gray-400">Không có ảnh</span>
               )}