Merge pull request #239 from bipproduction/bagas/14-jan-25

fix ( upload image )

src/app/api/new/investasi/[id]/route.ts

@@ -23,6 +23,7 @@ export async function GET(request: Request, context: { params: { id: string } })
             catatan: true,
             sisaLembar: true,
             imageId: true,
+            prospektusFileId: true,
             masterPencarianInvestorId: true,
             masterPeriodeDevidenId: true,
             masterPembagianDevidenId: true,

src/app/dev/investasi/edit/[id]/page.tsx

@@ -1,38 +1,8 @@
-import { investasi_funGetOneInvestasiById } from "@/app_modules/investasi/_fun";
+import { Investasi_UiEditInvestasiNew } from "@/app_modules/investasi/_ui";
-import { Investasi_UiEditInvestasi, Investasi_UiEditInvestasiNew } from "@/app_modules/investasi/_ui";
-import getPembagianDeviden from "@/app_modules/investasi/fun/master/get_pembagian_deviden";
-import getPencarianInvestor from "@/app_modules/investasi/fun/master/get_pencarian_investor";
-import getPeriodeDeviden from "@/app_modules/investasi/fun/master/get_periode_deviden";
-import _ from "lodash";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  // const investasiId = params.id;
-
-  // const allData = await investasi_funGetOneInvestasiById({ investasiId });
-  // const dataInvestasi = _.omit(allData, [
-  //   "BeritaInvestasi",
-  //   "DokumenInvestasi",
-  //   "MasterPembagianDeviden",
-  //   "MasterPencarianInvestor",
-  //   "MasterProgresInvestasi",
-  //   "MasterStatusInvestasi",
-  //   "ProspektusInvestasi",
-  //   "MasterPeriodeDeviden",
-  //   "author",
-  // ]);
-
-  // const listPencarian = await getPencarianInvestor();
-  // const listPeriode = await getPeriodeDeviden();
-  // const listPembagian = await getPembagianDeviden();
 
+export default async function Page() {
   return (
     <>
-      {/* <Investasi_UiEditInvestasi
-        dataInvestasi={dataInvestasi}
-        pembagianDeviden={listPembagian}
-        pencarianInvestor={listPencarian}
-        periodeDeviden={listPeriode}
-      /> */}
       <Investasi_UiEditInvestasiNew />
     </>
   );

src/app/dev/investasi/edit/prospektus/[id]/page.tsx

@@ -1,11 +1,10 @@
 import { Investasi_UiEditProspektus } from "@/app_modules/investasi/_ui";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  const investasiId = params.id;
 
   return (
     <>
-      <Investasi_UiEditProspektus investasiId={investasiId} />
+      <Investasi_UiEditProspektus />
     </>
   );
 }

src/app/dev/investasi/edit_prospektus/[id]/layout.tsx

@@ -1,21 +0,0 @@
-import { LayoutEditProspektusInvestasi } from "@/app_modules/investasi";
-import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
-import React from "react";
-
-export default async function Layout({
-  children,
-  params,
-}: {
-  children: React.ReactNode;
-  params: { id: string };
-}) {
-  const dataInvestasi = await getOneInvestasiById(params.id);
-
-  return (
-    <>
-      <LayoutEditProspektusInvestasi dataInvestasi={dataInvestasi as any}>
-        {children}
-      </LayoutEditProspektusInvestasi>
-    </>
-  );
-}

src/app/dev/investasi/edit_prospektus/[id]/page.tsx

@@ -1,12 +0,0 @@
-import { EditProspektusInvestasi } from "@/app_modules/investasi";
-import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  const dataInvestasi = await getOneInvestasiById(params.id);
-//   console.log(dataInvestasi);
-  return (
-    <>
-      <EditProspektusInvestasi dataInvestasi={dataInvestasi as any} />
-    </>
-  );
-}

src/app_modules/_global/button/comp_button_upload_photo.tsx

@@ -10,9 +10,15 @@ import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";
 export function ComponentGlobal_ButtonUploadFileImage({
   onSetFile,
   onSetImage,
+  text,
+  icon,
+  accept,
 }: {
   onSetFile: File | null | any;
-  onSetImage: any | null;
+  onSetImage?: any | null;
+  text?: string;
+  icon?: string | any
+  accept?: string;
 }) {
   const [isLoading, setIsLoading] = useState(false);
 
@@ -28,6 +34,7 @@ export function ComponentGlobal_ButtonUploadFileImage({
           if (files.size > 100 * 1024 * 1024) {
             setIsLoading(false);
             ComponentGlobal_NotifikasiPeringatan("File terlalu besar");
+            return
           }
 
           onSetFile(files);
@@ -38,7 +45,7 @@ export function ComponentGlobal_ButtonUploadFileImage({
           setIsLoading(false);
         }
       }}
-      accept="image/png,image/png,image/jpeg,image/gif"
+      accept={accept ? accept : "image/png,image/png,image/jpeg,image/gif"}
     >
       {(props) => (
         <Button
@@ -50,10 +57,10 @@ export function ComponentGlobal_ButtonUploadFileImage({
             backgroundColor: MainColor.yellow,
             border: `1px solid ${AccentColor.yellow}`,
           }}
-          leftIcon={<IconUpload color="black" size={20} />}
+          leftIcon={icon ? icon : <IconUpload color="black" size={20} />}
           c={MainColor.darkblue}
         >
-          Upload
+          {text ? text : "Upload"}
         </Button>
       )}
     </FileButton>

src/app_modules/_global/component/box_information.tsx

@@ -42,7 +42,13 @@ export default function ComponentGlobal_BoxInformation({
               <IconInfoCircle color={MainColor.white} />
             </Grid.Col>
             <Grid.Col span={10}>
-              <Text span inherit c={MainColor.white} fw={"normal"}>
+              <Text
+                fz={fonsize ? fonsize : 12}
+                span
+                inherit
+                c={MainColor.white}
+                fw={"normal"}
+              >
                 {informasi}
               </Text>
             </Grid.Col>

src/app_modules/investasi/_component/button/comp_button_create_new_investasi.tsx

@@ -65,6 +65,7 @@ export function Investasi_ComponentButtonCreateNewInvestasi({
         dirId: DIRECTORY_ID.investasi_prospektus,
       });
       if (!uploadFilePdf.success) {
+        setIsLoading(false);
         ComponentGlobal_NotifikasiPeringatan("Gagal upload file pdf");
         return;
       }
@@ -104,17 +105,16 @@ export function Investasi_ComponentButtonCreateNewInvestasi({
           router.push(NEW_RouterInvestasi.portofolio({ id: "2" }));
           setActiveTab("Review");
           setHotMenu(1);
-          setIsLoading(true);
           ComponentGlobal_NotifikasiBerhasil(res.message);
         }
       } else {
+        setIsLoading(false);
         ComponentGlobal_NotifikasiGagal(res.message);
       }
     } catch (error) {
-      clientLogger.error("Error create new investasi", error);
-    } finally {
       setIsLoading(false);
-    }
+      clientLogger.error("Error create new investasi", error);
+    } 
   }
 
   return (

src/app_modules/investasi/_component/button/comp_button_update_investasi.tsx

@@ -6,11 +6,15 @@ import {
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
 import { DIRECTORY_ID } from "@/app/lib";
-import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
 import _ from "lodash";
 import { investasi_funUpdateInvestasi } from "../../_fun";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { clientLogger } from "@/util/clientLogger";
 
 export function Investasi_ComponentButtonUpdateDataInvestasi({
   data,
@@ -37,11 +41,21 @@ export function Investasi_ComponentButtonUpdateDataInvestasi({
         file: file as any,
         dirId: DIRECTORY_ID.investasi_image,
       });
+
       if (!uploadImage.success) {
         setIsLoading(false);
         return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
       }
 
+      const deleteFile = await funGlobal_DeleteFileById({
+        fileId: data.imageId,
+      });
+      
+      if (!deleteFile.success) {
+        setIsLoading(false);
+        clientLogger.error("Error delete file:", deleteFile.message);
+      }
+
       const updtWithImage = await investasi_funUpdateInvestasi({
         data: data,
         imageId: uploadImage.data.id,

src/app_modules/investasi/_component/skeleton_view.tsx

@@ -0,0 +1,35 @@
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box, Center, Stack } from "@mantine/core";
+
+export { Investasi_SkeletonEditProspektus };
+
+function Investasi_SkeletonEditProspektus() {
+  return (
+    <>
+      <Stack>
+        <CustomSkeleton h={70} radius={"md"} />
+        <CustomSkeleton h={70} radius={"md"} />
+        <Center>
+          <CustomSkeleton h={40} w={100} radius={"xl"} />
+        </Center>
+        <Box
+          style={{
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <Box
+            style={{
+              transition: "all 0.3s ease",
+              position: "absolute",
+              bottom: 20,
+              width: "90%",
+            }}
+          >
+            <CustomSkeleton h={40} width={"100%"} radius={"xl"} />
+          </Box>
+        </Box>
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/_ui/edit/ui_edit_investasi_new.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate, } from "@/app_modules/_global/ui";
-import { Investasi_ViewEditInvestasiNew } from "../../_view/edit/vew_edit_investasi_new";
+import { Investasi_ViewEditInvestasiNew } from "../../_view/edit/view_edit_investasi_new";
 
 export function Investasi_UiEditInvestasiNew() {
    return (

src/app_modules/investasi/_ui/edit/ui_edit_prospektus.tsx

@@ -6,17 +6,13 @@ import {
 } from "@/app_modules/_global/ui";
 import { Investasi_ViewEditProspektus } from "../../_view";
 
-export function Investasi_UiEditProspektus({
+export function Investasi_UiEditProspektus() {
-  investasiId,
-}: {
-  investasiId: string;
-}) {
   return (
     <>
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Edit Prospektus" />}
       >
-        <Investasi_ViewEditProspektus investasiId={investasiId} />
+        <Investasi_ViewEditProspektus />
       </UIGlobal_LayoutTamplate>
     </>
   );

src/app_modules/investasi/_view/edit/vew_edit_investasi_new.tsx

@@ -1,420 +0,0 @@
-import { MainColor } from "@/app_modules/_global/color";
-import { ComponentGlobal_BoxInformation, ComponentGlobal_BoxUploadImage, ComponentGlobal_LoadImage, } from "@/app_modules/_global/component";
-import { AspectRatio, Box, Button, FileButton, Group, Image, Select, Stack, Text, TextInput, } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { IconCamera } from "@tabler/icons-react";
-import _ from "lodash";
-import { useState } from "react";
-import { Investasi_ComponentButtonUpdateDataInvestasi } from "../../_component";
-import { apiGetMasterInvestasi, apiGetOneInvestasiById } from "../../_lib/api_interface";
-import { IDataInvestasi } from "../../_lib/type_investasi";
-import { useParams } from "next/navigation";
-import SkeletonEditInvestasi from "./skeleton_edit_investasi";
-
-export function Investasi_ViewEditInvestasiNew() {
-   const param = useParams<{ id: string }>()
-   const [loading, setLoading] = useState(true)
-   const [loadingMasterInvestor, setLoadingMasterInvestor] = useState(true)
-   const [loadingMasterPeriodeDeviden, setLoadingMasterPeriodeDeviden] = useState(true)
-   const [loadingMasterPembagianDeviden, setLoadingMasterPembagianDeviden] = useState(true)
-   const [periodeDeviden, setPeriodeDeviden] = useState<any[]>([]);
-   const [pembagianDeviden, setPembagianDeviden] = useState<any[]>([]);
-   const [pencarianInvestor, setPencarianInvestor] = useState<any[]>([]);
-   const [data, setData] = useState<IDataInvestasi>();
-   const [file, setFile] = useState<File | null>(null);
-   const [img, setImg] = useState<any | null>();
-   const [target, setTarget] = useState("");
-   const [harga, setHarga] = useState("");
-   const [totalLembar, setTotalLembar] = useState<any>("");
-
-
-   async function onGetOneInvestasiById() {
-      try {
-         setLoading(true)
-         const response = await apiGetOneInvestasiById(param.id)
-         if (response.success) {
-            setData(response.data)
-            setTotalLembar(response.data.totalLembar)
-         }
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-      }
-   }
-
-   async function onGetMasterInvestor() {
-      try {
-         setLoadingMasterInvestor(true)
-         const response = await apiGetMasterInvestasi("?cat=pencarian-investor")
-         if (response.success) {
-            setPencarianInvestor(response.data)
-         }
-      } catch (error) {
-         console.log(error)
-      } finally {
-         setLoadingMasterInvestor(false)
-      }
-   }
-
-   async function onGetMasterPeriodeDeviden() {
-      try {
-         setLoadingMasterPeriodeDeviden(true)
-         const response = await apiGetMasterInvestasi("?cat=periode-deviden")
-         if (response.success) {
-            setPeriodeDeviden(response.data)
-         }
-      } catch (error) {
-         console.log(error)
-      } finally {
-         setLoadingMasterPeriodeDeviden(false)
-      }
-   }
-
-
-   async function onGetMasterPembagianDeviden() {
-      try {
-         setLoadingMasterPembagianDeviden(true)
-         const response = await apiGetMasterInvestasi("?cat=pembagian-deviden")
-         if (response.success) {
-            setPembagianDeviden(response.data)
-         }
-      } catch (error) {
-         console.log(error)
-      } finally {
-         setLoadingMasterPembagianDeviden(false)
-      }
-   }
-
-   useShallowEffect(() => {
-      onGetOneInvestasiById()
-      onGetMasterInvestor()
-      onGetMasterPeriodeDeviden()
-      onGetMasterPembagianDeviden()
-   }, [])
-
-   async function onTotalLembar({ target, harga, }: { target?: number | any; harga?: number | any; }) {
-      if (target !== 0 && harga !== 0) {
-         const hasil: any = target / harga;
-         const result = _.floor(hasil === Infinity ? 0 : hasil);
-         setTotalLembar(result.toString());
-      }
-   }
-
-   return (
-      <>
-         <Stack px={"sm"}>
-            {
-               loading ?
-                  <SkeletonEditInvestasi />
-                  :
-                  <>
-                     <Stack spacing={0}>
-                        <Box mb={"sm"}>
-                           <ComponentGlobal_BoxInformation informasi="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi" />
-                        </Box>
-                        <ComponentGlobal_BoxUploadImage>
-                           {img ? (
-                              <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
-                                 <Image style={{ maxHeight: 250 }} alt="Avatar" src={img} />
-                              </AspectRatio>
-                           ) : (
-                              <ComponentGlobal_LoadImage maw={300} fileId={String(data?.imageId)} />
-                           )}
-                        </ComponentGlobal_BoxUploadImage>
-                        {/* Upload Foto */}
-                        <Group position="center">
-                           <FileButton
-                              onChange={async (files: any) => {
-                                 try {
-                                    const buffer = URL.createObjectURL(
-                                       new Blob([new Uint8Array(await files.arrayBuffer())])
-                                    );
-                                    setImg(buffer);
-                                    setFile(files);
-                                 } catch (error) {
-                                    console.log(error);
-                                 }
-                              }}
-                              accept="image/png,image/jpeg"
-                           >
-                              {(props) => (
-                                 <Button
-                                    {...props}
-                                    leftIcon={<IconCamera color="black" />}
-                                    radius={50}
-                                    bg={MainColor.yellow}
-                                    color="yellow"
-                                    c={"black"}
-                                 >
-                                    Upload Gambar
-                                 </Button>
-                              )}
-                           </FileButton>
-                        </Group>
-                     </Stack>
-
-
-                     <TextInput
-                        styles={{
-                           label: {
-                              color: MainColor.white,
-                           },
-                           input: {
-                              backgroundColor: MainColor.white
-                           },
-                           required: {
-                              color: MainColor.red
-                           }
-                        }}
-                        withAsterisk
-                        label="Judul Investasi"
-                        placeholder="Judul investasi"
-                        maxLength={100}
-                        value={data?.title}
-                        onChange={(val) => {
-                           setData({
-                              ...data as any,
-                              title: val.target.value,
-                           });
-                        }}
-                     />
-
-                     <TextInput
-                        styles={{
-                           label: {
-                              color: MainColor.white,
-                           },
-                           input: {
-                              backgroundColor: MainColor.white
-                           },
-                           required: {
-                              color: MainColor.red
-                           }
-                        }}
-                        icon={<Text fw={"bold"}>Rp.</Text>}
-                        min={0}
-                        withAsterisk
-                        label="Dana Dibutuhkan"
-                        placeholder="0"
-                        value={target ? target : data?.targetDana}
-                        onChange={(val) => {
-                           const match = val.currentTarget.value
-                              .replace(/\./g, "")
-                              .match(/^[0-9]+$/);
-
-                           if (val.currentTarget.value === "") return setTarget(0 + "");
-                           if (!match?.[0]) return null;
-
-                           const nilai = val.currentTarget.value.replace(/\./g, "");
-                           const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
-
-                           onTotalLembar({
-                              target: +nilai,
-                              harga: +Number(data?.hargaLembar),
-                           });
-
-                           setTarget(targetNilai);
-                           setData({
-                              ...data as any,
-                              targetDana: nilai as string,
-                           });
-                        }}
-                     />
-
-                     <TextInput
-                        styles={{
-                           label: {
-                              color: MainColor.white,
-                           },
-                           input: {
-                              backgroundColor: MainColor.white
-                           },
-                           required: {
-                              color: MainColor.red
-                           }
-                        }}
-                        icon={<Text fw={"bold"}>Rp.</Text>}
-                        min={0}
-                        withAsterisk
-                        label="Harga Per Lembar"
-                        placeholder="0"
-                        value={harga ? harga : data?.hargaLembar}
-                        onChange={(val) => {
-                           try {
-                              const match = val.currentTarget.value
-                                 .replace(/\./g, "")
-                                 .match(/^[0-9]+$/);
-
-                              if (val.currentTarget.value === "") return setHarga(0 + "");
-
-                              if (!match?.[0]) return null;
-
-                              const nilai = val.currentTarget.value.replace(/\./g, "");
-                              const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
-
-                              onTotalLembar({
-                                 harga: +nilai,
-                                 target: +Number(data?.targetDana),
-                              });
-
-                              setHarga(targetNilai);
-                              setData({
-                                 ...data as any,
-                                 hargaLembar: nilai as string,
-                              });
-                           } catch (error) {
-                              console.log(error);
-                           }
-                        }}
-                     />
-
-                     <TextInput
-                        description="*Total lembar dihitung dari, Target Dana / Harga Perlembar"
-                        label="Total Lembar"
-                        value={harga === "0" ? "0" : target === "0" ? "0" : totalLembar}
-                        readOnly
-                        styles={{
-                           label: {
-                              color: MainColor.white,
-                           },
-                           input: {
-                              backgroundColor: MainColor.white
-                           },
-                           required: {
-                              color: MainColor.red
-                           }
-                        }}
-                     />
-
-                     <TextInput
-                        styles={{
-                           label: {
-                              color: MainColor.white,
-                           },
-                           input: {
-                              backgroundColor: MainColor.white
-                           },
-                           required: {
-                              color: MainColor.red
-                           }
-                        }}
-                        rightSection={
-                           <Text fw={"bold"} c={"gray"}>
-                              %
-                           </Text>
-                        }
-                        withAsterisk
-                        type="number"
-                        label={"Rasio Keuntungan / ROI %"}
-                        placeholder="Masukan rasio keuntungan"
-                        value={data?.roi}
-                        onChange={(val) => {
-                           setData({
-                              ...data as any,
-                              roi: val.target.value,
-                           });
-                        }}
-                     />
-
-                     <Select
-                        styles={{
-                           label: {
-                              color: MainColor.white,
-                           },
-                           input: {
-                              backgroundColor: MainColor.white
-                           },
-                           required: {
-                              color: MainColor.red
-                           },
-                           dropdown: {
-                              backgroundColor: MainColor.white,
-                           }
-                        }}
-                        withAsterisk
-                        label="Pencarian Investor"
-                        placeholder={loadingMasterInvestor ? "Loading..." : "Pilih batas waktu"}
-                        data={pencarianInvestor.map((e) => ({
-                           value: e.id,
-                           label: e.name + " " + "hari",
-                        }))}
-                        value={data?.masterPencarianInvestorId}
-                        onChange={(val) => {
-                           setData({
-                              ...(data as any),
-                              masterPencarianInvestorId: val,
-                           });
-                        }}
-                     />
-
-                     <Select
-                        styles={{
-                           label: {
-                              color: MainColor.white,
-                           },
-                           input: {
-                              backgroundColor: MainColor.white
-                           },
-                           required: {
-                              color: MainColor.red
-                           },
-                           dropdown: {
-                              backgroundColor: MainColor.white,
-                           }
-                        }}
-                        withAsterisk
-                        label="Periode Deviden"
-                        placeholder={loadingMasterPeriodeDeviden ? "Loading..." : "Pilih batas waktu"}
-                        data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
-                        value={data?.masterPeriodeDevidenId}
-                        onChange={(val) => {
-                           setData({
-                              ...(data as any),
-                              masterPeriodeDevidenId: val,
-                           });
-                        }}
-                     />
-
-                     <Select
-                        styles={{
-                           label: {
-                              color: MainColor.white,
-                           },
-                           input: {
-                              backgroundColor: MainColor.white
-                           },
-                           required: {
-                              color: MainColor.red
-                           },
-                           dropdown: {
-                              backgroundColor: MainColor.white,
-                           }
-                        }}
-                        withAsterisk
-                        label="Pembagian Deviden"
-                        placeholder={loadingMasterPembagianDeviden ? "Loading..." : "Pilih batas waktu"}
-                        data={pembagianDeviden.map((e) => ({
-                           value: e.id,
-                           label: e.name + " " + "bulan",
-                        }))}
-                        value={data?.masterPembagianDevidenId}
-                        onChange={(val) => {
-                           setData({
-                              ...(data as any),
-                              masterPembagianDevidenId: val,
-                           });
-                        }}
-                     />
-
-                     <Investasi_ComponentButtonUpdateDataInvestasi
-                        data={data as any}
-                        file={file as any}
-                        totalLembar={totalLembar}
-                     />
-                  </>
-            }
-         </Stack>
-      </>
-   );
-}

src/app_modules/investasi/_view/edit/view_edit_investasi_new.tsx

@@ -0,0 +1,462 @@
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
+  ComponentGlobal_LoadImage,
+} from "@/app_modules/_global/component";
+import {
+  AspectRatio,
+  Box,
+  Button,
+  Center,
+  FileButton,
+  Group,
+  Image,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconCamera } from "@tabler/icons-react";
+import _ from "lodash";
+import { useState } from "react";
+import { Investasi_ComponentButtonUpdateDataInvestasi } from "../../_component";
+import {
+  apiGetMasterInvestasi,
+  apiGetOneInvestasiById,
+} from "../../_lib/api_interface";
+import { IDataInvestasi } from "../../_lib/type_investasi";
+import { useParams } from "next/navigation";
+import SkeletonEditInvestasi from "./skeleton_edit_investasi";
+
+export function Investasi_ViewEditInvestasiNew() {
+  const param = useParams<{ id: string }>();
+  const [loading, setLoading] = useState(true);
+  const [loadingMasterInvestor, setLoadingMasterInvestor] = useState(true);
+  const [loadingMasterPeriodeDeviden, setLoadingMasterPeriodeDeviden] =
+    useState(true);
+  const [loadingMasterPembagianDeviden, setLoadingMasterPembagianDeviden] =
+    useState(true);
+  const [periodeDeviden, setPeriodeDeviden] = useState<any[]>([]);
+  const [pembagianDeviden, setPembagianDeviden] = useState<any[]>([]);
+  const [pencarianInvestor, setPencarianInvestor] = useState<any[]>([]);
+  const [data, setData] = useState<IDataInvestasi>();
+  const [file, setFile] = useState<File | null>(null);
+  const [img, setImg] = useState<any | null>();
+  const [target, setTarget] = useState("");
+  const [harga, setHarga] = useState("");
+  const [totalLembar, setTotalLembar] = useState<any>("");
+
+  async function onGetOneInvestasiById() {
+    try {
+      setLoading(true);
+      const response = await apiGetOneInvestasiById(param.id);
+      if (response.success) {
+        setData(response.data);
+        setTotalLembar(response.data.totalLembar);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function onGetMasterInvestor() {
+    try {
+      setLoadingMasterInvestor(true);
+      const response = await apiGetMasterInvestasi("?cat=pencarian-investor");
+      if (response.success) {
+        setPencarianInvestor(response.data);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoadingMasterInvestor(false);
+    }
+  }
+
+  async function onGetMasterPeriodeDeviden() {
+    try {
+      setLoadingMasterPeriodeDeviden(true);
+      const response = await apiGetMasterInvestasi("?cat=periode-deviden");
+      if (response.success) {
+        setPeriodeDeviden(response.data);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoadingMasterPeriodeDeviden(false);
+    }
+  }
+
+  async function onGetMasterPembagianDeviden() {
+    try {
+      setLoadingMasterPembagianDeviden(true);
+      const response = await apiGetMasterInvestasi("?cat=pembagian-deviden");
+      if (response.success) {
+        setPembagianDeviden(response.data);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoadingMasterPembagianDeviden(false);
+    }
+  }
+
+  useShallowEffect(() => {
+    onGetOneInvestasiById();
+    onGetMasterInvestor();
+    onGetMasterPeriodeDeviden();
+    onGetMasterPembagianDeviden();
+  }, []);
+
+  async function onTotalLembar({
+    target,
+    harga,
+  }: {
+    target?: number | any;
+    harga?: number | any;
+  }) {
+    if (target !== 0 && harga !== 0) {
+      const hasil: any = target / harga;
+      const result = _.floor(hasil === Infinity ? 0 : hasil);
+      setTotalLembar(result.toString());
+    }
+  }
+
+  return (
+    <>
+      <Stack px={"sm"}>
+        {loading ? (
+          <SkeletonEditInvestasi />
+        ) : (
+          <>
+            <Stack spacing={0}>
+              <Box mb={"sm"}>
+                <ComponentGlobal_BoxInformation informasi="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi" />
+              </Box>
+              <ComponentGlobal_BoxUploadImage>
+                {img ? (
+                  <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
+                    <Image style={{ maxHeight: 250 }} alt="Avatar" src={img} />
+                  </AspectRatio>
+                ) : (
+                  <ComponentGlobal_LoadImage
+                    maw={300}
+                    fileId={String(data?.imageId)}
+                  />
+                )}
+              </ComponentGlobal_BoxUploadImage>
+              {/* Upload Foto */}
+              <Center>
+                <ComponentGlobal_ButtonUploadFileImage
+                  onSetFile={setFile}
+                  onSetImage={setImg}
+                />
+              </Center>
+
+              {/* <Group position="center">
+                <FileButton
+                  onChange={async (files: any) => {
+                    try {
+                      const buffer = URL.createObjectURL(
+                        new Blob([new Uint8Array(await files.arrayBuffer())])
+                      );
+                      setImg(buffer);
+                      setFile(files);
+                    } catch (error) {
+                      console.log(error);
+                    }
+                  }}
+                  accept="image/png,image/jpeg"
+                >
+                  {(props) => (
+                    <Button
+                      {...props}
+                      leftIcon={<IconCamera color="black" />}
+                      radius={50}
+                      bg={MainColor.yellow}
+                      color="yellow"
+                      c={"black"}
+                    >
+                      Upload Gambar
+                    </Button>
+                  )}
+                </FileButton>
+              </Group> */}
+            </Stack>
+
+            <TextInput
+              styles={{
+                label: {
+                  color: MainColor.white,
+                },
+                input: {
+                  backgroundColor: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
+              }}
+              withAsterisk
+              label="Judul Investasi"
+              placeholder="Judul investasi"
+              maxLength={100}
+              value={data?.title}
+              onChange={(val) => {
+                setData({
+                  ...(data as any),
+                  title: val.target.value,
+                });
+              }}
+            />
+
+            <TextInput
+              styles={{
+                label: {
+                  color: MainColor.white,
+                },
+                input: {
+                  backgroundColor: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
+              }}
+              icon={<Text fw={"bold"}>Rp.</Text>}
+              min={0}
+              withAsterisk
+              label="Dana Dibutuhkan"
+              placeholder="0"
+              value={target ? target : data?.targetDana}
+              onChange={(val) => {
+                const match = val.currentTarget.value
+                  .replace(/\./g, "")
+                  .match(/^[0-9]+$/);
+
+                if (val.currentTarget.value === "") return setTarget(0 + "");
+                if (!match?.[0]) return null;
+
+                const nilai = val.currentTarget.value.replace(/\./g, "");
+                const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
+
+                onTotalLembar({
+                  target: +nilai,
+                  harga: +Number(data?.hargaLembar),
+                });
+
+                setTarget(targetNilai);
+                setData({
+                  ...(data as any),
+                  targetDana: nilai as string,
+                });
+              }}
+            />
+
+            <TextInput
+              styles={{
+                label: {
+                  color: MainColor.white,
+                },
+                input: {
+                  backgroundColor: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
+              }}
+              icon={<Text fw={"bold"}>Rp.</Text>}
+              min={0}
+              withAsterisk
+              label="Harga Per Lembar"
+              placeholder="0"
+              value={harga ? harga : data?.hargaLembar}
+              onChange={(val) => {
+                try {
+                  const match = val.currentTarget.value
+                    .replace(/\./g, "")
+                    .match(/^[0-9]+$/);
+
+                  if (val.currentTarget.value === "") return setHarga(0 + "");
+
+                  if (!match?.[0]) return null;
+
+                  const nilai = val.currentTarget.value.replace(/\./g, "");
+                  const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
+
+                  onTotalLembar({
+                    harga: +nilai,
+                    target: +Number(data?.targetDana),
+                  });
+
+                  setHarga(targetNilai);
+                  setData({
+                    ...(data as any),
+                    hargaLembar: nilai as string,
+                  });
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+            />
+
+            <TextInput
+              description="*Total lembar dihitung dari, Target Dana / Harga Perlembar"
+              label="Total Lembar"
+              value={harga === "0" ? "0" : target === "0" ? "0" : totalLembar}
+              readOnly
+              styles={{
+                label: {
+                  color: MainColor.white,
+                },
+                input: {
+                  backgroundColor: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
+              }}
+            />
+
+            <TextInput
+              styles={{
+                label: {
+                  color: MainColor.white,
+                },
+                input: {
+                  backgroundColor: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
+              }}
+              rightSection={
+                <Text fw={"bold"} c={"gray"}>
+                  %
+                </Text>
+              }
+              withAsterisk
+              type="number"
+              label={"Rasio Keuntungan / ROI %"}
+              placeholder="Masukan rasio keuntungan"
+              value={data?.roi}
+              onChange={(val) => {
+                setData({
+                  ...(data as any),
+                  roi: val.target.value,
+                });
+              }}
+            />
+
+            <Select
+              styles={{
+                label: {
+                  color: MainColor.white,
+                },
+                input: {
+                  backgroundColor: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
+                dropdown: {
+                  backgroundColor: MainColor.white,
+                },
+              }}
+              withAsterisk
+              label="Pencarian Investor"
+              placeholder={
+                loadingMasterInvestor ? "Loading..." : "Pilih batas waktu"
+              }
+              data={pencarianInvestor.map((e) => ({
+                value: e.id,
+                label: e.name + " " + "hari",
+              }))}
+              value={data?.masterPencarianInvestorId}
+              onChange={(val) => {
+                setData({
+                  ...(data as any),
+                  masterPencarianInvestorId: val,
+                });
+              }}
+            />
+
+            <Select
+              styles={{
+                label: {
+                  color: MainColor.white,
+                },
+                input: {
+                  backgroundColor: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
+                dropdown: {
+                  backgroundColor: MainColor.white,
+                },
+              }}
+              withAsterisk
+              label="Periode Deviden"
+              placeholder={
+                loadingMasterPeriodeDeviden ? "Loading..." : "Pilih batas waktu"
+              }
+              data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
+              value={data?.masterPeriodeDevidenId}
+              onChange={(val) => {
+                setData({
+                  ...(data as any),
+                  masterPeriodeDevidenId: val,
+                });
+              }}
+            />
+
+            <Select
+              styles={{
+                label: {
+                  color: MainColor.white,
+                },
+                input: {
+                  backgroundColor: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
+                dropdown: {
+                  backgroundColor: MainColor.white,
+                },
+              }}
+              withAsterisk
+              label="Pembagian Deviden"
+              placeholder={
+                loadingMasterPembagianDeviden
+                  ? "Loading..."
+                  : "Pilih batas waktu"
+              }
+              data={pembagianDeviden.map((e) => ({
+                value: e.id,
+                label: e.name + " " + "bulan",
+              }))}
+              value={data?.masterPembagianDevidenId}
+              onChange={(val) => {
+                setData({
+                  ...(data as any),
+                  masterPembagianDevidenId: val,
+                });
+              }}
+            />
+
+            <Investasi_ComponentButtonUpdateDataInvestasi
+              data={data as any}
+              file={file as any}
+              totalLembar={totalLembar}
+            />
+          </>
+        )}
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/_view/edit/view_edit_prospektus.tsx

@@ -1,82 +1,118 @@
 import { MainColor } from "@/app_modules/_global/color";
 import {
   ComponentGlobal_BoxInformation,
+  ComponentGlobal_ButtonUploadFileImage,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
 import {
+  Box,
   Button,
   Center,
-  FileButton,
   Grid,
-  Group,
   Stack,
   Text
 } from "@mantine/core";
 import {
-  IconCamera,
+  IconCircleCheck,
-  IconCircleCheck
+  IconFileTypePdf
 } from "@tabler/icons-react";
 
 import { DIRECTORY_ID } from "@/app/lib";
-import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
 import {
   ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
-import { useRouter } from "next/navigation";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
+import { Investasi_SkeletonEditProspektus } from "../../_component/skeleton_view";
 import { investasi_funUpdateProspektus } from "../../_fun";
+import { apiGetOneInvestasiById } from "../../_lib/api_interface";
 
-export function Investasi_ViewEditProspektus({
+export function Investasi_ViewEditProspektus() {
-  investasiId,
+  const params = useParams<{ id: string }>();
-}: {
+  const investasiId = params.id;
-  investasiId: string;
-}) {
   const router = useRouter();
   const [filePdf, setFilePdf] = useState<File | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [fileRemoveId, setFileRemoveId] = useState<string | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetOneInvestasiById(investasiId);
+      if (respone.success) {
+        setFileRemoveId(respone.data.prospektusFileId);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data investasi:", error);
+    }
+  }
 
   async function onUpload() {
-    setIsLoading(true);
-    const uploadFilePdf = await funGlobal_UploadToStorage({
-      file: filePdf as any,
-      dirId: DIRECTORY_ID.investasi_prospektus,
-    });
-
-    if (!uploadFilePdf.success) {
-      setIsLoading(false);
-      return ComponentGlobal_NotifikasiPeringatan("Gagal upload file pdf");
-    }
-
     try {
+      setIsLoading(true);
+      const uploadFilePdf = await funGlobal_UploadToStorage({
+        file: filePdf as any,
+        dirId: DIRECTORY_ID.investasi_prospektus,
+      });
+
+      if (!uploadFilePdf.success) {
+        setIsLoading(false);
+        ComponentGlobal_NotifikasiPeringatan("Gagal upload file pdf");
+        return;
+      }
+
+      const deleteFile = await funGlobal_DeleteFileById({
+        fileId: fileRemoveId as string,
+        dirId: DIRECTORY_ID.investasi_prospektus,
+      });
+
+      if (!deleteFile.success) {
+        setIsLoading(false);
+        clientLogger.error("Error delete file:", deleteFile.message);
+      }
+
       const updte = await investasi_funUpdateProspektus({
         fileId: uploadFilePdf.data.id,
         investasiId: investasiId,
       });
 
       if (updte.status !== 200) {
-        return ComponentGlobal_NotifikasiPeringatan("Gagal update prospektus");
+        setIsLoading(false);
+        ComponentGlobal_NotifikasiPeringatan("Gagal update prospektus");
+        return;
       }
 
+      ComponentGlobal_NotifikasiBerhasil(updte.message);
       router.back();
-
-      return ComponentGlobal_NotifikasiBerhasil(updte.message);
     } catch (error) {
-      console.log(error);
-    } finally {
       setIsLoading(false);
+      clientLogger.error("Error update prospektus:", error);
     }
   }
 
+  if (fileRemoveId == null) {
+    return <Investasi_SkeletonEditProspektus />;
+  }
+
   return (
     <>
       <Stack spacing={"sm"}>
-        <ComponentGlobal_BoxInformation informasi="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan !" />
+        <ComponentGlobal_BoxInformation informasi="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan." />
         <ComponentGlobal_CardStyles marginBottom={"0px"}>
           {!filePdf ? (
-            <Text lineClamp={1} align="center" c={"gray"}>
+            <Stack justify="center" align="center" h={"100%"}>
-              Upload File Prospektus
+              <IconFileTypePdf size={50} color="gray" />
-            </Text>
+            </Stack>
           ) : (
             <Grid align="center">
               <Grid.Col span={2}></Grid.Col>
@@ -94,54 +130,43 @@ export function Investasi_ViewEditProspektus({
           )}
         </ComponentGlobal_CardStyles>
 
-        <Group position="center">
+        <Center>
-          <FileButton
+          <ComponentGlobal_ButtonUploadFileImage
+            onSetFile={setFilePdf}
             accept={"application/pdf"}
-            onChange={async (files: any) => {
+            text="Upload File"
-              try {
+          />
-                const buffer = URL.createObjectURL(
+        </Center>
-                  new Blob([new Uint8Array(await files.arrayBuffer())])
-                );
 
-                setFilePdf(files);
+        <Box
-              } catch (error) {
-                console.log(error);
-              }
-            }}
-          >
-            {(props) => (
-              <Button
-                leftIcon={<IconCamera />}
-                {...props}
-                radius={"xl"}
-                bg={MainColor.yellow}
-                color="yellow"
-                c={"black"}
-              >
-                Upload File
-              </Button>
-            )}
-          </FileButton>
-        </Group>
-
-        <Button
-          loaderPosition="center"
-          loading={isLoading}
-          disabled={filePdf === null}
-          mt={50}
-          radius={50}
-          bg={MainColor.yellow}
-          color="yellow"
-          c={"black"}
           style={{
-            transition: "0.5s",
+            display: "flex",
-          }}
+            justifyContent: "center",
-          onClick={() => {
-            onUpload();
           }}
         >
-          Update
+          <Button
-        </Button>
+            px={"sm"}
+            loaderPosition="center"
+            loading={isLoading}
+            disabled={filePdf === null}
+            mt={50}
+            radius={50}
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
+            style={{
+              transition: "all 0.3s ease",
+              position: "absolute",
+              bottom: 20,
+              width: "90%",
+            }}
+            onClick={() => {
+              onUpload();
+            }}
+          >
+            Update
+          </Button>
+        </Box>
       </Stack>
     </>
   );

src/app_modules/investasi/_view/transaksi/view_invoice.tsx

@@ -32,6 +32,7 @@ import { IRealtimeData } from "@/app/lib/global_state";
 import { notifikasiToAdmin_funCreate } from "@/app_modules/notifikasi/fun";
 import { WibuRealtime } from "wibu-pkg";
 import { clientLogger } from "@/util/clientLogger";
+import { ComponentGlobal_ButtonUploadFileImage } from "@/app_modules/_global/component";
 
 export function Investasi_ViewInvoice({
   dataInvoice,
@@ -42,6 +43,7 @@ export function Investasi_ViewInvoice({
   const [isLoading, setLoading] = useState(false);
   const [data, setData] = useState(dataInvoice);
   const [file, setFile] = useState<File | null>(null);
+  const [img, setImg] = useState<any | null>(null);
 
   async function onUpload() {
     try {
@@ -52,6 +54,7 @@ export function Investasi_ViewInvoice({
       });
 
       if (!uploadFileToStorage.success) {
+        setLoading(false);
         ComponentGlobal_NotifikasiPeringatan("Gagal upload bukti transfer");
         return;
       }
@@ -62,6 +65,7 @@ export function Investasi_ViewInvoice({
       });
 
       if (res.status != 200) {
+        setLoading(false);
         ComponentGlobal_NotifikasiGagal(res.message);
         return;
       }
@@ -93,9 +97,8 @@ export function Investasi_ViewInvoice({
         });
       }
     } catch (error) {
-      clientLogger.error(" Error upload invoice", error);
-    } finally {
       setLoading(false);
+      clientLogger.error(" Error upload invoice", error);
     }
   }
 
@@ -245,29 +248,10 @@ export function Investasi_ViewInvoice({
         >
           <Stack spacing={"sm"}>
             <Center>
-              <FileButton
+              <ComponentGlobal_ButtonUploadFileImage
-                onChange={async (files: any | null) => {
+                onSetFile={setFile}
-                  try {
+                accept="image/png,image/png,image/jpeg,application/pdf"
-                    setFile(files);
+              />
-                  } catch (error) {
-                    console.log(error);
-                  }
-                }}
-                accept="image/png,image/jpeg"
-              >
-                {(props) => (
-                  <Button
-                    {...props}
-                    radius={"xl"}
-                    leftIcon={<IconCamera />}
-                    bg={MainColor.yellow}
-                    color="yellow"
-                    c={"black"}
-                  >
-                    Upload
-                  </Button>
-                )}
-              </FileButton>
             </Center>
             {file ? (
               <Center>

src/app_modules/investasi/create/view_new.tsx

@@ -3,6 +3,7 @@ import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_BoxInformation,
   ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
 import { MAX_SIZE } from "@/app_modules/_global/lib";
@@ -131,7 +132,7 @@ export default function InvestasiCreateNew() {
         {/* Upload Image */}
         <Stack spacing={0}>
           <Box mb={"sm"}>
-            <ComponentGlobal_BoxInformation informasi="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi" />
+            <ComponentGlobal_BoxInformation informasi="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
           </Box>
           <ComponentGlobal_BoxUploadImage>
             {isLoadingImg ? (
@@ -155,7 +156,13 @@ export default function InvestasiCreateNew() {
           </ComponentGlobal_BoxUploadImage>
 
           {/* Upload Foto */}
-          <Group position="center">
+          <Center>
+            <ComponentGlobal_ButtonUploadFileImage
+              onSetFile={setFileImage}
+              onSetImage={setImg}
+            />
+          </Center>
+          {/* <Group position="center">
             <FileButton
               onChange={async (files: any) => {
                 try {
@@ -196,12 +203,12 @@ export default function InvestasiCreateNew() {
                 </Button>
               )}
             </FileButton>
-          </Group>
+          </Group> */}
         </Stack>
 
         {/* Upload File */}
         <Stack spacing={"sm"}>
-          <ComponentGlobal_BoxInformation informasi="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan !" />
+          <ComponentGlobal_BoxInformation informasi="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepannya." />
           <ComponentGlobal_CardStyles marginBottom={"0px"}>
             {isLoadingPdf ? (
               <Stack justify="center" align="center" h={"100%"}>
@@ -228,7 +235,16 @@ export default function InvestasiCreateNew() {
             )}
           </ComponentGlobal_CardStyles>
 
-          <Group position="center">
+          <Center>
+            <ComponentGlobal_ButtonUploadFileImage
+              onSetFile={setFilePdf}
+              onSetImage={setFPdf}
+              accept={"application/pdf"}
+              text="Upload File"
+              icon={<IconFileTypePdf size={20} />}
+            />
+          </Center>
+          {/* <Group position="center">
             <FileButton
               accept={"application/pdf"}
               onChange={async (files: any) => {
@@ -269,7 +285,7 @@ export default function InvestasiCreateNew() {
                 </Button>
               )}
             </FileButton>
-          </Group>
+          </Group> */}
         </Stack>
 
         <Stack>
@@ -283,7 +299,7 @@ export default function InvestasiCreateNew() {
               },
               input: {
                 backgroundColor: MainColor.white,
-              }
+              },
             }}
             withAsterisk
             label="Judul Investasi"
@@ -307,7 +323,7 @@ export default function InvestasiCreateNew() {
               },
               input: {
                 backgroundColor: MainColor.white,
-              }
+              },
             }}
             icon={<Text fw={"bold"}>Rp.</Text>}
             min={0}
@@ -350,7 +366,7 @@ export default function InvestasiCreateNew() {
               },
               input: {
                 backgroundColor: MainColor.white,
-              }
+              },
             }}
             icon={<Text fw={"bold"}>Rp.</Text>}
             min={0}
@@ -403,7 +419,7 @@ export default function InvestasiCreateNew() {
               },
               input: {
                 backgroundColor: MainColor.white,
-              }
+              },
             }}
           />
 
@@ -417,7 +433,7 @@ export default function InvestasiCreateNew() {
               },
               input: {
                 backgroundColor: MainColor.white,
-              }
+              },
             }}
             rightSection={
               <Text fw={"bold"} c={"gray"}>

src/app_modules/investasi/edit_propektus/layout.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import React from "react";
-import { MODEL_INVESTASI } from "../_lib/interface";
-
-export default function LayoutEditProspektusInvestasi({
-  children,
-  dataInvestasi,
-}: {
-  children: React.ReactNode;
-  dataInvestasi: MODEL_INVESTASI;
-}) {
-  return (
-    <>
-      <UIGlobal_LayoutTamplate
-        header={
-          <UIGlobal_LayoutHeaderTamplate
-            title="Edit Prospektus"
-            // icon={<IconEdit />}
-            // route2={RouterInvestasi.upload_prospektus + `${dataInvestasi.id}`}
-          />
-        }
-      >
-        {children}
-      </UIGlobal_LayoutTamplate>
-    </>
-  );
-}

src/app_modules/investasi/edit_propektus/view.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import {
-  Paper,
-  Grid,
-  Center,
-  Title,
-  Divider,
-  Button,
-  Text,
-  Group,
-  FileButton,
-  FileInput,
-  Image,
-  AspectRatio,
-  Flex,
-  Stack,
-  Box,
-} from "@mantine/core";
-import { IconChevronRight, IconFileTypePdf } from "@tabler/icons-react";
-import Link from "next/link";
-import { useState } from "react";
-import { MODEL_INVESTASI } from "../_lib/interface";
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
-
-export default function EditProspektusInvestasi({
-  dataInvestasi,
-}: {
-  dataInvestasi: MODEL_INVESTASI;
-}) {
-  const [prospek, setProspek] = useState<MODEL_INVESTASI>(dataInvestasi);
-
-  return (
-    <>
-      {/* <pre>{JSON.stringify(prospek, null, 2)}</pre> */}
-
-      <Stack>
-        {prospek.ProspektusInvestasi != null ? (
-          <Link
-            href={RouterInvestasi_OLD.api_file_prospektus + `${prospek.ProspektusInvestasi.id}`}
-            target="_blank"
-            style={{ textDecorationLine: "none" }}
-          >
-            <Paper w={"100%"} bg={"gray"} mb={"md"}>
-              <Grid
-                align="center"
-                justify="center"
-                h={50}
-                px={"sm"}
-                onClick={() => ""}
-              >
-                <Grid.Col span={11}>
-                  <Group>
-                    {/* <IconFileTypePdf /> */}
-                    <Text lineClamp={1}>Prospektus_{prospek.title}</Text>
-                  </Group>
-                </Grid.Col>
-                <Grid.Col span={1}>
-                  <Center>
-                    <IconChevronRight />
-                  </Center>
-                </Grid.Col>
-              </Grid>
-            </Paper>
-          </Link>
-        ) : (
-          <Center>
-            <Title order={4}>Tidak ada file</Title>
-          </Center>
-        )}
-        {/* <Divider my={"lg"} /> */}
-      </Stack>
-    </>
-  );
-}

src/app_modules/investasi/index.ts

@@ -7,8 +7,6 @@ import PortofolioInvestasi from "./portofolio/view";
 import LayoutPortofolioInvestasi from "./portofolio/layout";
 import EditIntroInvestasi from "./edit_intro/view";
 import LayoutEditIntroInvestasi from "./edit_intro/layout";
-import EditProspektusInvestasi from "./edit_propektus/view";
-import LayoutEditProspektusInvestasi from "./edit_propektus/layout";
 import EditDokumenInvestasi from "./edit_dokumen/view";
 import LayoutEditDokumenInvestasi from "./edit_dokumen/layout";
 import EditBeritaInvestasi from "./edit_berita/view";
@@ -58,8 +56,6 @@ export {
   LayoutPortofolioInvestasi,
   EditIntroInvestasi,
   LayoutEditIntroInvestasi,
-  EditProspektusInvestasi,
-  LayoutEditProspektusInvestasi,
   EditDokumenInvestasi,
   LayoutEditDokumenInvestasi,
   EditBeritaInvestasi,

src/app_modules/job/edit/view.tsx

@@ -2,22 +2,15 @@
 
 import {
   AspectRatio,
-  Button,
   Center,
-  FileButton,
   Image,
   Stack,
   Text,
   TextInput,
 } from "@mantine/core";
-import { IconCamera } from "@tabler/icons-react";
 import { useState } from "react";
 import { MODEL_JOB } from "../model/interface";
 
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_BoxUploadImage,
   ComponentGlobal_ButtonUploadFileImage,

src/app_modules/katalog/profile/create/view_upload_foto.tsx

@@ -3,13 +3,7 @@ import {
   ComponentGlobal_BoxInformation,
   ComponentGlobal_ButtonUploadFileImage,
 } from "@/app_modules/_global/component";
-import {
+import { Avatar, Box, Center, Paper, Stack } from "@mantine/core";
-  Avatar,
-  Box,
-  Center,
-  Paper,
-  Stack
-} from "@mantine/core";
 import { useState } from "react";
 
 export default function Profile_ViewUploadFoto({
@@ -68,125 +62,6 @@ export default function Profile_ViewUploadFoto({
               onSetImage={onSetImgPP}
             />
           </Center>
-
-          {/* <Center>
-            <FileButton
-              onChange={async (files: any | null) => {
-                try {
-                  setLoadingButton(true);
-                  const buffer = URL.createObjectURL(
-                    new Blob([new Uint8Array(await files.arrayBuffer())])
-                  );
-
-                  // if (files.size > MAX_SIZE) {
-                  //   ComponentGlobal_NotifikasiPeringatan(
-                  //     PemberitahuanMaksimalFile
-                  //   );
-                  //   onSetImgPP(null);
-
-                  //   return;
-                  // }
-
-                  if (fotoProfileId != "") {
-                    try {
-                      const deleteFotoProfile = await funGlobal_DeleteFileById({
-                        fileId: fotoProfileId,
-                        dirId: DIRECTORY_ID.profile_foto,
-                      });
-
-                      if (!deleteFotoProfile.success) {
-                        clientLogger.error(
-                          "Client failed delete photo profile:" +
-                            deleteFotoProfile.message
-                        );
-
-                        return;
-                      }
-
-                      if (deleteFotoProfile.success) {
-                        onSetFotoProfileId("");
-                        onSetImgPP(null);
-
-                        const uploadPhoto = await funGlobal_UploadToStorage({
-                          file: files,
-                          dirId: DIRECTORY_ID.profile_foto,
-                        });
-
-                        if (!uploadPhoto.success) {
-                          clientLogger.error(
-                            "Client failed upload photo profile::" +
-                              uploadPhoto.message
-                          );
-                          return;
-                        }
-
-                        if (uploadPhoto.success) {
-                          clientLogger.info(
-                            "Client success upload foto profile"
-                          );
-                          onSetFotoProfileId(uploadPhoto.data.id);
-                          onSetImgPP(buffer);
-                        } else {
-                          clientLogger.error(
-                            "Client failed upload foto:",
-                            uploadPhoto.message
-                          );
-                          ComponentGlobal_NotifikasiPeringatan(
-                            "Gagal upload foto profile"
-                          );
-                        }
-                      }
-                    } catch (error) {
-                      clientLogger.error("Client error upload foto:", error);
-                    }
-                  } else {
-                    try {
-                      const uploadPhoto = await funGlobal_UploadToStorage({
-                        file: files,
-                        dirId: DIRECTORY_ID.profile_foto,
-                      });
-
-                      if (uploadPhoto.success) {
-                        clientLogger.info("Client success upload foto profile");
-                        onSetFotoProfileId(uploadPhoto.data.id);
-                        onSetImgPP(buffer);
-                      } else {
-                        clientLogger.error(
-                          "Client failed upload foto:",
-                          uploadPhoto.message
-                        );
-                        ComponentGlobal_NotifikasiPeringatan(
-                          "Gagal upload foto profile"
-                        );
-                      }
-                    } catch (error) {
-                      clientLogger.error("Client error upload foto:", error);
-                    }
-                  }
-                } catch (error) {
-                  clientLogger.error("Client error upload foto:", error);
-                } finally {
-                  setLoadingButton(false);
-                }
-              }}
-              accept="image/png,image/jpeg"
-            >
-              {(props) => (
-                <Button
-                  {...props}
-                  loading={isLoadingButton}
-                  loaderPosition="center"
-                  radius={"xl"}
-                  leftIcon={<IconCamera />}
-                  bg={MainColor.yellow}
-                  color="yellow"
-                  c={"black"}
-                >
-                  Upload
-                </Button>
-              )}
-            </FileButton>
-          </Center> */}
         </Stack>
       </Box>
     </>

src/middleware.ts

@@ -29,12 +29,13 @@ const middlewareConfig: MiddlewareConfig = {
     "/api/collaboration/*",
     "/api/notifikasi/*",
     "/api/logs/*",
-    // "/api/image/*",
     "/api/job/*",
     "/api/auth/*",
     "/api/origin-url",
-    // "/api/user",
     "/api/event/*",
+    // "/api/image/*",
+    // "/api/user",
+    // "/api/new/*",
     // Akses awal
     "/api/get-cookie",
     "/api/user/activation",

xhtml/index.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <!-- <img
+      id="pdf"
+      src="https://wibu-storage.wibudev.com/api/pdf-to-image?url=https://pdfobject.com/pdf/sample.pdf"
+      alt="pdf"
+    /> -->
+    <div id="pdfs"></div>
+  </body>
+  <script type="module">
+    (async () => {
+      const imagePdf = document.getElementById("pdf");
+      const pdfs = document.getElementById("pdfs");
+      const token =
+        "eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjp7ImlkIjoiY20wdXIxeXh3MDAwMDU2bnNqbHI2MTg3cCIsIm5hbWUiOiJiYWdhcyIsImVtYWlsIjoiYmFnYXNAZ21haWwuY29tIn0sImlhdCI6MTcyNTg3MTAzNiwiZXhwIjo0ODgxNjMxMDM2fQ.wFQLcrJj66wFeqIMYk2esMx3ULaHK6RFxkiToaLCuko";
+      const res = await fetch(
+        "https://wibu-storage.wibudev.com/api/pdf-to-image?url=https://wibu-storage.wibudev.com/api/files/cm5jgzg7d001dxpugxseb2ua0",
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      const jsonData = await res.json();
+    //   console.log(JSON.stringify(jsonData.pages, null, 2));
+    //   imagePdf.src = jsonData.pages[0].imageUrl;
+
+      for (let index = 0; index < jsonData.pages.length; index++) {
+        const element = jsonData.pages[index];
+        const img = document.createElement("img");
+        img.src = element.imageUrl;
+        pdfs.appendChild(img);
+      }
+    })();
+  </script>
+</html>