fix: pelayanan surat

Deskripsi:
- pelayanan surat

No Issues

src/components/ModalSurat.tsx

@@ -1,5 +1,5 @@
 import apiFetch from "@/lib/apiFetch";
-import { Flex, Loader, Modal, Text } from "@mantine/core";
+import { Flex, Modal, Progress, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import html2canvas from "html2canvas";
 import jsPDF from "jspdf";
@@ -35,7 +35,7 @@ export default function ModalSurat({
     fontSize: "14px",
     fontFamily: "Times New Roman",
   };
-  const [uploading, setUploading] = useState<"Menyiapkan" | "Mengupload" | "Selesai">("Menyiapkan")
+  const [uploading, setUploading] = useState<{ text: "Menyiapkan" | "Mengupload" | "Selesai", value: number }>({ text: "Menyiapkan", value: 10 })
   const hiddenRef = useRef<any>(null);
   const { data, mutate, isLoading } = useSWR("surat", () =>
     apiFetch.api.surat.detail.get({
@@ -52,7 +52,7 @@ export default function ModalSurat({
   const uploadPdf = async () => {
     try {
       if (data && data.data && data.data.surat && (data.data.surat.file == "" || data.data.surat.file == null)) {
-        setUploading("Mengupload");
+        setUploading({ text: "Mengupload", value: 75 });
         const element = hiddenRef.current;
         const canvas = await html2canvas(element, {
           scale: 2,
@@ -95,7 +95,7 @@ export default function ModalSurat({
           filename: resImg.data?.filename!,
         });
 
-        setUploading("Selesai");
+        setUploading({ text: "Selesai", value: 100 });
         setTimeout(() => {
           onClose(resUpdate.data?.link);
         }, 1000)
@@ -136,14 +136,24 @@ export default function ModalSurat({
           },
         }}
         title={
+          <>
             <Flex justify="space-between" align="center" w="100%">
               <div style={{ fontSize: 18, fontWeight: 600 }}>Preview Surat</div>
 
-            <Flex gap={8} align="center">
+              {/* <Flex gap={8} align="center">
               <Loader color="blue" size="xs" />
-              <Text size="sm">{uploading}</Text>
+              <Text size="sm">{uploading.text}</Text>
-            </Flex>
+            </Flex> */}
             </Flex>
+            <Stack
+              align="stretch"
+              justify="center"
+              gap="xs"
+            >
+              <Text size="sm" ta="center">{uploading.text} - Harap menunggu sampai selesai</Text>
+              <Progress radius="md" value={uploading.value} animated size="lg" />
+            </Stack>
+          </>
         }
       >
         <div ref={hiddenRef} style={A4Style}>

src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx

@@ -1,4 +1,5 @@
 import BreadCrumbs from "@/components/BreadCrumbs";
+import FullScreenLoading from "@/components/FullScreenLoading";
 import ModalFile from "@/components/ModalFile";
 import ModalSurat from "@/components/ModalSurat";
 import notification from "@/components/notificationGlobal";
@@ -125,6 +126,7 @@ function DetailDataPengajuan({
   const [editValue, setEditValue] = useState({ id: "", jenis: "", val: "", option: null as any, type: "", key: "" })
   const [openEdit, setOpenEdit] = useState(false)
   const [loadingUpdate, setLoadingUpdate] = useState(false)
+  const [loadingFS, setLoadingFS] = useState({ value: false, text: "" })
 
   useEffect(() => {
     async function fetchHost() {
@@ -143,6 +145,7 @@ function DetailDataPengajuan({
 
   async function sendWA({ status, linkSurat, linkUpdate }: { status: string, linkSurat: string, linkUpdate: string }) {
     try {
+      setLoadingFS({ value: true, text: "Sending message to warga" })
       const resWA = await apiFetch.api["send-wa"]["pengajuan-surat"].post({
         noPengajuan: data?.noPengajuan ?? "",
         jenisSurat: data?.category ?? "",
@@ -181,10 +184,14 @@ function DetailDataPengajuan({
         type: "error",
       });
     }
+    finally {
+      setLoadingFS({ value: false, text: "" })
+    }
   }
 
   const handleKonfirmasi = async (cat: "terima" | "tolak") => {
     try {
+      setLoadingFS({ value: true, text: "Updating status" })
       const statusFix = cat == "tolak"
         ? "ditolak"
         : data.status == "antrian"
@@ -234,6 +241,8 @@ function DetailDataPengajuan({
         message: "Failed to update pengajuan surat",
         type: "error",
       });
+    } finally {
+      setLoadingFS({ value: false, text: "" })
     }
   };
 
@@ -275,7 +284,6 @@ function DetailDataPengajuan({
   }
 
   useShallowEffect(() => {
-    console.log('jalan', viewImg)
     if (viewImg) {
       setOpenedPreviewFile(true);
     }
@@ -308,6 +316,8 @@ function DetailDataPengajuan({
 
   return (
     <>
+
+      <FullScreenLoading visible={loadingFS.value} text={loadingFS.text} />
       {/* MODAL EDIT DATA PELENGKAP */}
       <Modal
         opened={openEdit}