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

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

@@ -1,14 +1,52 @@
 import RoutingC from "@/components/icons/RoutingC";
 import { Button } from "@mui/material";
-import React from "react";
+import React, { useRef } from "react";
 import ButtonData from "./ButtonData";
 import TextLoading from "@/app/component/loading/Text";
 import { convertTimestampToJalali } from "@/helper";
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
 
 function DetailSm({ 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="mt-[20px] block md:hidden">
+    <div ref={detailsRef} className="mt-[20px] block md:hidden">
       <div className="flex items-center justify-start gap-[8px]">
         <div className="flex flex-col justify-center items-start gap-[8px]">
           <TextLoading loading={loading} width={60} height={14}>
@@ -78,7 +116,7 @@ function DetailSm({ appointmentData, loading }) {
           </p>
         </TextLoading>
       </ul>
-      <ButtonData loading={loading} />
+      <ButtonData loading={loading} onDownload={handleDownloadPDF} />
     </div>
   );
 }