fix: File view

Deksripsi:
- Tampilan file view pdf
- Optimalisasi admin
## No Isuue

src/app_modules/investasi/_view/detail/view_detail_saham_saya.tsx

@@ -0,0 +1,26 @@
+import { Stack } from "@mantine/core";
+import { useState } from "react";
+import {
+  Investasi_ComponentBoxDetailData,
+  Investasi_ComponentBoxHargaDanLembarSaham,
+  Investasi_ComponentBoxProgress,
+} from "../../_component";
+import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
+
+export function Investasi_ViewDetailSahamSaya({
+  dataSaham,
+}: {
+  dataSaham: MODEL_INVOICE_INVESTASI;
+}) {
+  const [data, setData] = useState(dataSaham);
+
+  return (
+    <>
+      <Stack mb={"lg"}>
+        <Investasi_ComponentBoxHargaDanLembarSaham data={data} />
+        <Investasi_ComponentBoxProgress progress={data.Investasi.progress} />
+        <Investasi_ComponentBoxDetailData data={data} />
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/_view/file_view/styles.modules.css

@@ -1,17 +0,0 @@
-.file_view {
-  width: 100%;
-  /* padding: 30px; */
-  background-color: aqua;
-  right: 0;
-  left: 0;
-  height: 92vh;
-  position: relative;
-}
-
-.page {
-  /* display: grid;
-  place-items: center; Centers both horizontally and vertically */
-  height: 5vh;
-  width: 50%;  
-  position: absolute;
-}

src/app_modules/investasi/_view/file_view/view_file_viewer.tsx

@@ -1,53 +1,88 @@
-import { Stack, Text } from "@mantine/core";
-// import { useState } from "react";
-// import { Document, Page, pdfjs } from "react-pdf";
-// import "react-pdf/dist/Page/AnnotationLayer.css";
-// import "react-pdf/dist/Page/TextLayer.css";
-// import styles from "./styles.module.css";
-// import { GlobalWorkerOptions } from "pdfjs-dist";
+"use client";
 
-// GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.5.136/pdf.worker.js`;
+import { useEffect, useState } from "react";
+import { getDocument, GlobalWorkerOptions } from "pdfjs-dist";
+import { Image, Skeleton, Stack, Text } from "@mantine/core";
+import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+
+GlobalWorkerOptions.workerSrc =
+  "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.6.82/pdf.worker.min.mjs";
+
+const PdfToImage = ({ id, path }: { id: string; path: string }) => {
+  const [images, setImages] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const renderPages = async () => {
+        try {
+          const loadingTask = getDocument(path + id); // Menggunakan md sebagai URL PDF
+          const pdf = await loadingTask.promise;
+          const numPages = pdf.numPages;
+          const imagePromises: Promise<string>[] = [];
+
+          for (let pageNum = 1; pageNum <= numPages; pageNum++) {
+            const renderPage = async (pageNum: number): Promise<string> => {
+              const page = await pdf.getPage(pageNum);
+              const viewport = page.getViewport({ scale: 2.0 });
+
+              // Buat elemen canvas
+              const canvas = document.createElement("canvas");
+              const context = canvas.getContext("2d");
+              if (context) {
+                canvas.width = viewport.width;
+                canvas.height = viewport.height;
+
+                // Render halaman PDF ke dalam canvas
+                const renderContext = {
+                  canvasContext: context,
+                  viewport: viewport,
+                };
+                await page.render(renderContext).promise;
+
+                // Konversi canvas ke gambar (data URL)
+                return canvas.toDataURL("image/png");
+              }
+              return "";
+            };
+
+            imagePromises.push(renderPage(pageNum));
+          }
+
+          const imageSrcs = await Promise.all(imagePromises);
+          setImages(imageSrcs);
+        } catch (error) {
+          console.error("Error rendering PDF to images:", error);
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      renderPages();
+    }
+  }, [id, path]);
 
-export function Investasi_ViewFileViewer({
-  fileId,
-  path,
-}: {
-  fileId: string;
-  path: string;
-}) {
   return (
     <Stack>
-      Maintenance
-      {/* <MyFile file={path + fileId} /> */}
+      {loading ? (
+        <CustomLoading />
+      ) : (
+        images.map((src, index) => (
+          <Image key={index} src={src} alt={`Page ${index + 1}`} />
+        ))
+      )}
+    </Stack>
+  );
+};
+
+function CustomLoading() {
+  return (
+    <Stack p="md">
+      {[...Array(3)].map((_, index) => (
+        <Skeleton key={index} height={500} />
+      ))}
     </Stack>
   );
 }
 
-// function MyFile({ file }: { file: any }) {
-//   const [numPages, setNumPages] = useState<number | null>(null);
-//   const [pageNumber, setPageNumber] = useState(1);
-
-//   function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
-//     setNumPages(numPages);
-//   }
-
-//   return<>
-//   <Text>Maintenance</Text>
-//   </>
-
-//   return (
-//     <div>
-//       <Document
-//         // className={styles.file_view}
-//         file={file}
-//         onLoadSuccess={onDocumentLoadSuccess}
-
-//       >
-//         <Page  pageNumber={pageNumber} />
-//       </Document>
-//       {/* <p>
-//         Page {pageNumber} of {numPages}
-//       </p> */}
-//     </div>
-//   );
-// }
+export default PdfToImage;

src/app_modules/investasi/_view/index.ts

@@ -1,5 +1,7 @@
-import { Investasi_ViewFileViewer } from "./file_view/view_file_viewer";
+import { Investasi_ViewDetailSahamSaya } from "./detail/view_detail_saham_saya";
+import PdfToImage from "./file_view/view_file_viewer";
 import { Investasi_ViewBeranda } from "./main/view_beranda";
+import { Investasi_ViewSahamSaya } from "./main/view_saham_saya";
 import { Investasi_ViewTransaksiBerhasil } from "./status_transaksi/view_invoice_berhasil";
 import { Investasi_ViewTransaksiGagal } from "./status_transaksi/view_transaksi_gagal";
 import { Investasi_ViewInvoice } from "./transaksi/view_invoice";
@@ -11,7 +13,9 @@ export { Investasi_ViewProsesPembelian };
 export { Investasi_ViewMetodePembayaran };
 export { Investasi_ViewInvoice };
 export { Investasi_ViewProsesTransaksi };
-export { Investasi_ViewFileViewer };
 export { Investasi_ViewBeranda };
 export { Investasi_ViewTransaksiGagal };
 export { Investasi_ViewTransaksiBerhasil };
+export { PdfToImage as Investasi_ViewFileViewer };
+export { Investasi_ViewSahamSaya };
+export { Investasi_ViewDetailSahamSaya };

src/app_modules/investasi/_view/main/view_saham_saya.tsx

@@ -0,0 +1,44 @@
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Box, Center } from "@mantine/core";
+import { Investasi_ComponentSahamSaya } from "../../_component";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { investasi_funGetAllPublish } from "../../fun/get_all_investasi";
+import { investasi_funGetSuccessTransactionById } from "../../_fun";
+
+export function Investasi_ViewSahamSaya({ dataSaham }: { dataSaham: any[] }) {
+  const [data, setData] = useState(dataSaham);
+  const [activePage, setActivePage] = useState(1);
+  return (
+    <>
+      <Box>
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData />
+        ) : (
+          <ScrollOnly
+            height="82vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await investasi_funGetSuccessTransactionById({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => <Investasi_ComponentSahamSaya data={item as any} />}
+          </ScrollOnly>
+        )}
+      </Box>
+    </>
+  );
+}

src/app_modules/investasi/_view/status_transaksi/view_invoice_berhasil.tsx

@@ -4,10 +4,8 @@ import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_invest
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
 import {
-  ActionIcon,
   Box,
   Button,
-  Center,
   Collapse,
   Grid,
   Group,
@@ -15,19 +13,12 @@ import {
   Paper,
   Stack,
   Text,
-  Title,
+  Title
 } from "@mantine/core";
-import {
-  IconBrandWhatsapp,
-  IconMoneybag,
-  IconMoodDollar,
-  IconZoomMoney,
-} from "@tabler/icons-react";
+import { IconBrandCashapp } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
-import { Prisma } from "@prisma/client";
-import { IconBrandCashapp } from "@tabler/icons-react";
 
 export function Investasi_ViewTransaksiBerhasil({
   dataTransaksi,