upd: dashboard admin

Deskripsi: - update modal surat - api surat - dowload surat No Issues
2025-11-19 15:26:58 +08:00
parent dfc35e88d5
commit 4b914e1852
10 changed files with 364 additions and 16 deletions
--- a/src/components/ModalSurat.tsx
+++ b/src/components/ModalSurat.tsx
@@ -0,0 +1,108 @@
+import apiFetch from "@/lib/apiFetch";
+import { ActionIcon, Flex, Modal } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconDownload, IconX } from "@tabler/icons-react";
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+import { useRef } from "react";
+import useSWR from "swr";
+import SKUsaha from "./surat/SKUsaha";
+
+export default function ModalSurat({ open, onClose, surat }: { open: boolean, onClose: () => void, surat: string }) {
+   const A4Style = {
+      width: "210mm",
+      height: "297mm",
+      padding: "20mm",
+      background: "#fff",
+      color: "#000",
+      fontSize: "14px",
+      fontFamily: "Times New Roman",
+   };
+   const hiddenRef = useRef<any>(null);
+   const { data, mutate, isLoading } = useSWR("surat", () =>
+      apiFetch.api.surat.detail.get({
+         query: {
+            id: surat,
+         },
+      }),
+   );
+
+   useShallowEffect(() => {
+      mutate();
+   }, []);
+
+
+   const downloadPDF = async () => {
+      const element = hiddenRef.current;
+
+      const canvas = await html2canvas(element, {
+         scale: 2,
+         useCORS: true,
+         allowTaint: true,
+         width: element.offsetWidth,
+         height: element.offsetHeight,
+      });
+
+      const imgData = canvas.toDataURL("image/jpeg", 1.0);
+
+      const pdf = new jsPDF("p", "mm", "a4");
+      const pageWidth = 210; // A4 width mm
+      const pageHeight = 297; // A4 height mm
+
+      const imgWidth = pageWidth;
+      const imgHeight = (canvas.height * pageWidth) / canvas.width;
+
+      pdf.addImage(imgData, "JPEG", 0, 0, imgWidth, imgHeight);
+
+      pdf.save("surat-keterangan-usaha.pdf");
+   };
+
+   return (
+      <>
+         <Modal
+            opened={open}
+            onClose={() => onClose()}
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+            size="auto"
+            withCloseButton={false}
+            removeScrollProps={{ allowPinchZoom: true }}
+            styles={{
+               header: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  padding: "12px 16px",
+               },
+               title: {
+                  width: "100%",
+               }
+            }}
+            title={
+               <Flex justify="space-between" align="center" w="100%">
+                  <div style={{ fontSize: 18, fontWeight: 600 }}>
+                     Preview Surat
+                  </div>
+
+                  <Flex gap={8}>
+                     <ActionIcon size={32} variant="default">
+                        <IconDownload size={20} onClick={downloadPDF} />
+                     </ActionIcon>
+
+                     <ActionIcon size={32} variant="default" onClick={onClose}>
+                        <IconX size={20} />
+                     </ActionIcon>
+                  </Flex>
+               </Flex>
+            }
+         >
+            <div ref={hiddenRef} style={A4Style}>
+               {
+                  data && data.data && data.data.surat.idCategory == "skusaha"
+                     ? <SKUsaha data={data.data} />
+                     : <></>
+               }
+            </div>
+         </Modal>
+      </>
+   )
+}