fix pdf to image investasi

src/app_modules/investasi/_component/detail/comp_card_daftar_document.tsx

@@ -22,10 +22,9 @@ export function Investasi_ComponentCardDaftarDocument({
         justify="center"
         h={"100%"}
         onClick={() => {
-          router.push(
-            NEW_RouterInvestasi.file_prospektus({ id: data.fileId }),
-            { scroll: false }
-          );
+          router.push(NEW_RouterInvestasi.file_dokumen({ id: data.fileId }), {
+            scroll: false,
+          });
           setVisible(true);
         }}
       >

src/app_modules/investasi/_component/detail/comp_card_rekap_document.tsx

@@ -97,7 +97,7 @@ export function Investasi_ComponentCardRekapDocument({
             span={"auto"}
             onClick={() => {
               router.push(
-                NEW_RouterInvestasi.file_prospektus({ id: data.fileId }),
+                NEW_RouterInvestasi.file_dokumen({ id: data.fileId }),
                 { scroll: false }
               );
               setVisible(true);

src/app_modules/investasi/_ui/file_view/ui_file_view_dokumen.tsx

@@ -3,27 +3,85 @@
 import { APIs } from "@/lib";
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import { Box } from "@mantine/core";
+import { Box, Stack } from "@mantine/core";
 import { IconX } from "@tabler/icons-react";
 import dynamic from "next/dynamic";
-const PdfToImage = dynamic(
-  () =>
-    import("../../_view/file_view/view_file_viewer").then((mod) => mod.default),
-  { ssr: false }
-);
+import { apiGetPdfToImage, PageData } from "@/app_modules/_global/lib/api_fetch_global";
+import { useParams } from "next/navigation";
+import { useState, useRef, useEffect } from "react";
+import PdfToImage from "../../_view/file_view/view_file_viewer";
+import Image from "next/image";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+
+
+export function Investasi_UiFileViewDokumen() {
+   const param = useParams<{ id: string }>();
+    const dokumenId = param.id;
+  
+    const [pdfPages, setPdfPages] = useState<PageData[] | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+    const pdfsRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      const fetchPdfData = async () => {
+        try {
+          setLoading(true);
+          const response = await apiGetPdfToImage({ id: dokumenId });
+
+          if (response) {
+            setPdfPages(response.pages as any);
+            setLoading(false);
+          }
+        } catch (err) {
+          console.error("Error fetching PDF:", err);
+          setError(
+            err instanceof Error ? err.message : "Unknown error occurred"
+          );
+          setLoading(false);
+        }
+      };
+
+      fetchPdfData();
+    }, [dokumenId]);
+
 
-export function Investasi_UiFileViewDokumen({
-  dokumenId,
-}: {
-  dokumenId: string;
-}) {
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="" iconLeft={<IconX />} />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Pratinjau Dokumen" iconLeft={<IconX />} />}
       >
-        <Box mb={"lg"}>
-          <PdfToImage id={dokumenId} path={APIs.GET_NO_PARAMS} />
+        <Box mb="lg">
+          {loading ? (
+            <CustomSkeleton height={"80vh"} width={"100%"} />
+          ) : error ? (
+            <Stack>
+              <ComponentGlobal_IsEmptyData text="Maaf, PDF mengalami error" />
+              <ComponentGlobal_IsEmptyData text={error} />
+            </Stack>
+          ) : (
+            <div
+              ref={pdfsRef}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+              }}
+            >
+              {pdfPages?.map((page, index) => (
+                <Image
+                  key={`page-${index}`}
+                  src={page.imageUrl}
+                  alt={`Page ${page.pageNumber}`}
+                  className="pdf-page"
+                  width={500} // Adjust width as needed
+                  height={707} // Adjust height as needed
+                  style={{ width: "100%", marginBottom: "10px" }}
+                />
+              ))}
+            </div>
+          )}
         </Box>
       </UIGlobal_LayoutTamplate>
     </>

src/app_modules/investasi/_ui/file_view/ui_file_view_prospektus.tsx

@@ -1,33 +1,90 @@
 "use client";
 
-import { APIs } from "@/lib";
-import { RouterInvestasi_OLD } from "@/lib/router_hipmi/router_investasi";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import {
+  apiGetPdfToImage,
+  PageData,
+} from "@/app_modules/_global/lib/api_fetch_global";
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import { Box } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box, Stack } from "@mantine/core";
 import { IconX } from "@tabler/icons-react";
-import dynamic from "next/dynamic";
-const PdfToImage = dynamic(
-  () =>
-    import("../../_view/file_view/view_file_viewer").then((mod) => mod.default),
-  { ssr: false }
-);
+import Image from "next/image";
+import { useParams } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+
+export function Investasi_UiFileViewProspektus() {
+  const param = useParams<{ id: string }>();
+  const prospektusId = param.id;
+
+  const [pdfPages, setPdfPages] = useState<PageData[] | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  const pdfsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const fetchPdfData = async () => {
+      try {
+        setLoading(true);
+        const response = await apiGetPdfToImage({ id: prospektusId });
+
+        console.log("res:", response)
+
+        if (response) {
+          setPdfPages(response.pages as any);
+          setLoading(false);
+        }
+      } catch (err) {
+        console.error("Error fetching PDF:", err);
+        setError(err instanceof Error ? err.message : "Unknown error occurred");
+        setLoading(false);
+      }
+    };
+
+    fetchPdfData();
+  }, [prospektusId]);
 
-export function Investasi_UiFileViewProspektus({
-  pospektusId,
-}: {
-  pospektusId: string;
-}) {
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="" iconLeft={<IconX />} />}
-      >
-        <Box mb={"lg"}>
-          <PdfToImage
-            id={pospektusId}
-            path={APIs.GET_NO_PARAMS}
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Pratinjau Prospektus"
+            iconLeft={<IconX />}
           />
+        }
+      >
+        <Box mb="lg">
+          {loading ? (
+            <CustomSkeleton height={"80vh"} width={"100%"} />
+          ) : error ? (
+            <Stack>
+              <ComponentGlobal_IsEmptyData text="Maaf, PDF mengalami error" />
+              <ComponentGlobal_IsEmptyData text={error} />
+            </Stack>
+          ) : (
+            <div
+              ref={pdfsRef}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+              }}
+            >
+              {pdfPages?.map((page, index) => (
+                <Image
+                  key={`page-${index}`}
+                  src={page.imageUrl}
+                  alt={`Page ${page.pageNumber}`}
+                  className="pdf-page"
+                  width={500} // Adjust width as needed
+                  height={707} // Adjust height as needed
+                  style={{ width: "100%", marginBottom: "10px" }}
+                />
+              ))}
+            </div>
+          )}
         </Box>
       </UIGlobal_LayoutTamplate>
     </>