refactor: implement PDF download functionality for appointment details in DetailLg and DetailSm components

components/dashboard/userAccount/sidebars/turns/isTurnsDetails/DetailLg.js

@@ -6,13 +6,51 @@ import DownloadD from "@/components/icons/DownloadD";
 import LocationClinic from "@/components/icons/LocationClinic";
 import RoutingC from "@/components/icons/RoutingC";
 import { Button } from "@mui/material";
-import React from "react";
+import React, { useRef } from "react";
 import { convertTimestampToJalali, convertTimestampToTime } from "@/helper";
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
 
 function DetailLg({ appointmentData, loading }) {
+  const detailsRef = useRef(null);
+
+  const handleDownloadPDF = async () => {
+    if (!detailsRef.current) return;
+
+    try {
+      const canvas = await html2canvas(detailsRef.current, {
+        scale: 2,
+        useCORS: true,
+        logging: false,
+        backgroundColor: '#ffffff',
+      });
+
+      const imgData = canvas.toDataURL("image/png");
+      const pdf = new jsPDF({
+        orientation: "portrait",
+        unit: "mm",
+        format: "a4",
+      });
+
+      const pdfWidth = pdf.internal.pageSize.getWidth();
+      const pdfHeight = pdf.internal.pageSize.getHeight();
+
+      const imgWidth = pdfWidth * 0.9; // 90% of page width
+      const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+      // Center horizontally and vertically
+      const xPosition = (pdfWidth - imgWidth) / 2;
+      const yPosition = (pdfHeight - imgHeight) / 2;
+
+      pdf.addImage(imgData, "PNG", xPosition, yPosition, imgWidth, imgHeight);
+      pdf.save(`appointment_${appointmentData?.uuid || Date.now()}.pdf`);
+    } catch (error) {
+      console.error("Error generating PDF:", error);
+    }
+  };
 
   return (
-    <div className="lg:mt-[18px] hidden md:block">
+    <div ref={detailsRef} className="lg:mt-[18px] hidden md:block">
       <div className="flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]">
         <div className="flex flex-col items-start justify-center gap-[20px]">
           <TextLoading loading={loading} width={70} height={18}>
@@ -94,9 +132,10 @@ function DetailLg({ appointmentData, loading }) {
           </li>
         </TextLoading>
       </ul>
-      <Button
+      {/* <Button
         className="!px-[12px] !hidden md:!flex !mt-[24px] !py-[8px] !border !border-solid !border-[#D7D7D7] !rounded-[4px] !w-fit !items-center !justify-center !gap-[4px]"
         variant="outlined"
+        onClick={handleDownloadPDF}
       >
         <TextLoading loading={loading} width={150} height={18}>
           <DownloadD />
@@ -104,7 +143,7 @@ function DetailLg({ appointmentData, loading }) {
             دانلود اطلاعات نوبت
           </p>
         </TextLoading>
-      </Button>
+      </Button> */}
     </div>
   );
 }