Fix: Investasi

Deskripsi:
- Upload gambar investasi ke storage wibu
- Upload bukti transfer ke storage wibu
# No Issue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hipmi",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "prisma": {
     "seed": "npx tsx prisma/seed.ts"

prisma/schema.prisma

@@ -217,7 +217,8 @@ model Investasi {
   masterProgresInvestasiId String?
   Investasi_Invoice        Investasi_Invoice[]
 
-  imageId String?
+  imageId          String?
+  prospektusFileId String?
 }
 
 model MasterPencarianInvestor {
@@ -273,7 +274,7 @@ model ProspektusInvestasi {
 model DokumenInvestasi {
   id          String     @id @default(cuid())
   title       String
-  url         String
+  url         String?
   active      Boolean    @default(true)
   createdAt   DateTime   @default(now())
   updatedAt   DateTime   @default(now()) @updatedAt
@@ -372,6 +373,8 @@ model Investasi_Invoice {
 
   Images   Images? @relation(fields: [imagesId], references: [id])
   imagesId String?
+
+  imageId String?
 }
 
 model InvestasiMaster_StatusInvoice {

src/app/dev/colab/create/page.tsx

@@ -1,6 +1,5 @@
 import { Colab_Create } from "@/app_modules/colab";
 import colab_funGetMasterIndustri from "@/app_modules/colab/fun/master/fun_get_master_industri";
-import colab_funGetMasterStatus from "@/app_modules/colab/fun/master/fun_get_master_status";
 
 export default async function Page() {
   const listIndustri = await colab_funGetMasterIndustri();

src/app/dev/investasi/create/dokumen/[id]/page.tsx

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

src/app/dev/investasi/create/investasi/page.tsx

@@ -3,8 +3,6 @@ import getPembagianDeviden from "@/app_modules/investasi/fun/master/get_pembagia
 import getPencarianInvestor from "@/app_modules/investasi/fun/master/get_pencarian_investor";
 import getPeriodeDeviden from "@/app_modules/investasi/fun/master/get_periode_deviden";
 import getStatusInvestasi from "@/app_modules/investasi/fun/master/get_status_investasi";
-import { unsealData } from "iron-session";
-import { cookies } from "next/headers";
 
 export default async function Page() {
 

src/app/dev/investasi/detail/daftar-dokumen/[id]/page.tsx

@@ -0,0 +1,19 @@
+import {
+  investasi_funGetAllDocumentById,
+  investasi_funGetOneInvestasiById,
+} from "@/app_modules/investasi/_fun";
+import { Investasi_UiDaftarDokmen } from "@/app_modules/investasi/_ui";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const investasiId = params.id;
+  const dataDokumen = await investasi_funGetAllDocumentById({
+    investasiId: investasiId,
+    page: 1,
+  });
+
+  return (
+    <>
+      <Investasi_UiDaftarDokmen dataDokumen={dataDokumen} investasiId={investasiId}/>
+    </>
+  );
+}

src/app/dev/investasi/detail/portofolio/[id]/page.tsx

@@ -0,0 +1,15 @@
+import { investasi_funGetOneInvestasiById } from "@/app_modules/investasi/_fun";
+import { Investasi_UiDetailPortofolio } from "@/app_modules/investasi/_ui";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const investasiId = params.id;
+  const dataPortofolio = await investasi_funGetOneInvestasiById({
+    investasiId,
+  });
+  
+  return (
+    <>
+      <Investasi_UiDetailPortofolio data={dataPortofolio as any} />
+    </>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { investasi_funGetOneInvestasiById } from "@/app_modules/investasi/_fun";
+import { Investasi_UiDetailProspektus } from "@/app_modules/investasi/_ui";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const investasiId = params.id;
+  const dataInvestasi = await investasi_funGetOneInvestasiById({ investasiId });
+
+  return (
+    <>
+      <Investasi_UiDetailProspektus dataInvestasi={dataInvestasi} />
+    </>
+  );
+}

src/app/dev/investasi/detail/rekap-dokumen/[id]/page.tsx

@@ -0,0 +1,17 @@
+import { investasi_funGetAllDocumentById } from "@/app_modules/investasi/_fun";
+import {  Investasi_UiRekapDokumen } from "@/app_modules/investasi/_ui";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const investasiId = params.id;
+  const dataDokumen = await investasi_funGetAllDocumentById({ investasiId, page: 1 });
+
+
+  return (
+    <>
+      <Investasi_UiRekapDokumen
+        investasiId={investasiId}
+        dataDokumen={dataDokumen}
+      />
+    </>
+  );
+}

src/app/dev/investasi/detail_portofolio/draft/[id]/page.tsx

@@ -1,5 +1,5 @@
-import { DetailDraftInvestasi } from "@/app_modules/investasi";
-import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
+import { DetailDraftInvestasi } 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}}) {
 

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

@@ -1,9 +0,0 @@
-
-import { LayoutEditInvestasi } from "@/app_modules/investasi";
-import React from "react";
-
-export default async function Layout({children, params}: {children: React.ReactNode, params:{id: string}}) {
-    return<>
-    <LayoutEditInvestasi>{children}</LayoutEditInvestasi>
-    </>
-}

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

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

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

@@ -1,11 +1,39 @@
-import { EditInvestasi } from "@/app_modules/investasi";
+import { investasi_funGetOneInvestasiById } from "@/app_modules/investasi/_fun";
+import { Investasi_UiEditInvestasi } 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;
+  // console.log(investasiId);
+
+  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({params}: {params: {id: string}}) {
   return (
     <>
-
-      <EditInvestasi id={params.id} />
+      <Investasi_UiEditInvestasi
+        dataInvestasi={dataInvestasi}
+        pembagianDeviden={listPembagian}
+        pencarianInvestor={listPencarian}
+        periodeDeviden={listPeriode}
+      />
     </>
   );
 }

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

@@ -0,0 +1,14 @@
+import { investasi_funGetOneDocumentById } from "@/app_modules/investasi/_fun";
+import { Investasi_UiEditDokumen } from "@/app_modules/investasi/_ui";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const documentId = params.id;
+  const dataDokumen = await investasi_funGetOneDocumentById({ documentId });
+
+
+  return (
+    <>
+      <Investasi_UiEditDokumen dataDokumen={dataDokumen} />
+    </>
+  );
+}

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

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

src/app/dev/investasi/file-view/prospektus/[id]/page.tsx

@@ -2,11 +2,11 @@ import { investasi_funGetProspekById } from "@/app_modules/investasi/_fun";
 import { Investasi_UiFileView } from "@/app_modules/investasi/_ui";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const prospekId = params.id;
+  const pospektusId = params.id;
 
   return (
     <>
-      <Investasi_UiFileView prospekId={prospekId} />
+      <Investasi_UiFileView pospektusId={pospektusId} />
     </>
   );
 }

src/app/dev/investasi/main/portofolio/[id]/page.tsx

@@ -0,0 +1,22 @@
+import { investasi_funGetPortofolioByStatusId } from "@/app_modules/investasi/_fun";
+import { Investasi_UiPortofolio } from "@/app_modules/investasi/_ui";
+import getStatusInvestasi from "@/app_modules/investasi/fun/master/get_status_investasi";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const statusId = params.id;
+  const listStatus = await getStatusInvestasi();
+  const dataPortofolio = await investasi_funGetPortofolioByStatusId({
+    page: 1,
+    statusId: statusId,
+  });
+
+  return (
+    <>
+      <Investasi_UiPortofolio
+        statusId={statusId}
+        listStatus={listStatus as any}
+        dataPortofolio={dataPortofolio as any}
+      />
+    </>
+  );
+}

src/app/dev/investasi/main/portofolio/page.tsx

@@ -1,36 +0,0 @@
-import {
-  investasi_funGetAllInvestasiNonPublishByUserId,
-  investasi_funGetAllPublishByUserId,
-} from "@/app_modules/investasi/_fun";
-import { Investasi_UiPortofolio } from "@/app_modules/investasi/_ui";
-import getStatusInvestasi from "@/app_modules/investasi/fun/master/get_status_investasi";
-
-export default async function Page() {
-  const listStatus = await getStatusInvestasi();
-
-  const listDataPublish = await investasi_funGetAllPublishByUserId({ page: 1 });
-  const listDataReview = await investasi_funGetAllInvestasiNonPublishByUserId({
-    page: 1,
-    statusId: "2",
-  });
-  const listDataDraft = await investasi_funGetAllInvestasiNonPublishByUserId({
-    page: 1,
-    statusId: "3",
-  });
-  const listDataReject = await investasi_funGetAllInvestasiNonPublishByUserId({
-    page: 1,
-    statusId: "4",
-  });
-
-  return (
-    <>
-      <Investasi_UiPortofolio
-        listStatus={listStatus}
-        listDataPublish={listDataPublish}
-        listDataReview={listDataReview}
-        listDataDraft={listDataDraft}
-        listDataReject={listDataReject}
-      />
-    </>
-  );
-}

src/app/dev/investasi/x_detail_portofolio/draft/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { DetailDraftInvestasi } 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)
+
+    return<>
+    <DetailDraftInvestasi dataInvestasi={dataInvestasi as any}/>
+    
+    </>
+}

src/app/dev/investasi/x_detail_portofolio/publish/[id]/page.tsx

@@ -0,0 +1,11 @@
+import { DetailPublishInvestasi } 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);
+  return (
+    <>
+      <DetailPublishInvestasi dataInvestasi={dataInvestasi as any} />
+    </>
+  );
+}

src/app/lib/APIs.ts

@@ -9,6 +9,12 @@ const APIs = {
     size
       ? `https://wibu-storage.wibudev.com/api/files/${fileId}-size-${size}`
       : `https://wibu-storage.wibudev.com/api/files/${fileId}`,
+
+  /**
+   * @type {string}
+   * @returns alamat API dari wibu storage
+   */
+  GET_NO_PARAMS: "https://wibu-storage.wibudev.com/api/files/"
 };
 
 export default APIs;

src/app/lib/id-derectory.ts

@@ -6,7 +6,8 @@ const DIRECTORY_ID = {
   map_image: "cm0yjqnxl000910njplqho07w",
   investasi_image: "cm0yjs35h000b10njb35o12h1",
   investasi_bukti_transfer: "cm0yjsflu000d10njrc3lnqho",
-  investasi_pdf: "cm1soio74003p38bjyciwf1oy",
+  investasi_prospektus: "cm1soio74003p38bjyciwf1oy",
+  investasi_dokumen: "cm21g2hxw004d10dpx8j16tt7",
   donasi_image: "cm0yk1coh000f10nj597a99kv",
   donasi_bukti_transfer: "cm0yk1pmh000h10njhi6m8b8t",
   job_image: "cm0ypp6zl0003kp7jf59zuvjy",

src/app/lib/router_hipmi/router_investasi.ts

@@ -2,26 +2,75 @@ export const NEW_RouterInvestasi = {
   // API
   api_gambar: "/api/investasi/gambar/",
 
-  // Transaksi
+  // MAIN
+  /**
+   *
+   * @param param status id | 1: Publish, 2: Review, 3: Draft, 4: Reject
+   * @type string
+   */
+  portofolio: ({ id }: { id: string }) =>
+    `/dev/investasi/main/portofolio/${id}`,
+
+  // TRANSAKSI
   pembelian: "/dev/investasi/transaksi/pembelian/",
   metode_pembayaran: "/dev/investasi/transaksi/metode-pembayaran/",
   invoice: "/dev/investasi/transaksi/invoice/",
   proses_transaksi: "/dev/investasi/transaksi/proses-transaksi/",
 
-  // stasus transaksi
+  // STATUS TRANSAKSI
   transaksi_gagal: "/dev/investasi/status-transaksi/gagal/",
   transaksi_berhasil: "/dev/investasi/status-transaksi/berhasil/",
 
-  // file view
-  file_view_prospektus: "/dev/investasi/file-view/prospektus/",
-  file_view_dokumen: "/dev/investasi/file-view/dokumen/",
+  // FILE VIEW
+  file_prospektus: ({ id }: { id: string }) =>
+    `/dev/investasi/file-view/prospektus/${id}`,
+
+  OLD_file_view_prospektus: "/dev/investasi/file-view/prospektus/",
+  OLD_file_view_dokumen: "/dev/investasi/file-view/dokumen/",
+
+  // DETAIL
+  detail_portofolio: ({ id }: { id: string }) =>
+    `/dev/investasi/detail/portofolio/${id}`,
+  detail_prospektus: ({ id }: { id: string }) =>
+    `/dev/investasi/detail/prospektus/${id}`,
+  daftar_dokumen: ({ id }: { id: string }) =>
+    `/dev/investasi/detail/daftar-dokumen/${id}`,
+  rekap_dokumen: ({ id }: { id: string }) =>
+    `/dev/investasi/detail/rekap-dokumen/${id}`,
 
-  // detail
   detail_saham: "/dev/investasi/detail/saham/",
   detail_publish: "/dev/investasi/detail_portofolio/publish/",
   detail_review: "/dev/investasi/detail_portofolio/review/",
   detail_draft: "/dev/investasi/detail_portofolio/draft/",
   detail_reject: "/dev/investasi/detail_portofolio/reject/",
+
+  // CREATE
+  /**
+   * @param id | investasiId
+   * @type string
+   */
+  create_dokumen: ({ id }: { id: string }) =>
+    `/dev/investasi/create/dokumen/${id}`,
+
+  // EDIT
+  /**
+   * @param id | investasiId
+   * @type string
+   */
+  edit_investasi: ({ id }: { id: string }) => `/dev/investasi/edit/${id}`,
+
+  /**
+   * @param id | dokumenId
+   * @type string
+   */
+  edit_dokumen: ({ id }: { id: string }) => `/dev/investasi/edit/dokumen/${id}`,
+
+  /**
+   * @param id | investasiId
+   * @type string
+   */
+  edit_prospektus: ({ id }: { id: string }) =>
+    `/dev/investasi/edit/prospektus/${id}`,
 };
 
 export const RouterInvestasi_OLD = {
@@ -32,7 +81,7 @@ export const RouterInvestasi_OLD = {
 
   //INVESTASI
   main: "/dev/investasi/main",
-  create: "/dev/investasi/create",
+  create: "/dev/investasi/create/investasi",
   main_porto: "/dev/investasi/main/portofolio",
   main_investasi: "/dev/investasi/main/saham_saya",
   main_transaksi: "/dev/investasi/main/transaksi",

src/app_modules/_global/component/box_information.tsx

@@ -12,15 +12,16 @@ export default function ComponentGlobal_BoxInformation({
 }) {
   return (
     <>
-      {isReport ? (
-        <Paper
-          bg={"blue.3"}
-          p={10}
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `1px solid ${AccentColor.skyblue}`,
-          }}
-        >
+      <Paper
+        bg={"blue.3"}
+        p={10}
+        style={{
+          backgroundColor: AccentColor.blue,
+          border: `2px solid ${AccentColor.softblue}`,
+          borderRadius: "10px",
+        }}
+      >
+        {isReport ? (
           <Stack spacing={0}>
             <Text
               fz={fonsize ? fonsize : 12}
@@ -34,16 +35,7 @@ export default function ComponentGlobal_BoxInformation({
               {informasi}
             </Text>
           </Stack>
-        </Paper>
-      ) : (
-        <Paper
-          bg={"blue.3"}
-          p={10}
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `1px solid ${AccentColor.skyblue}`,
-          }}
-        >
+        ) : (
           <Group>
             <Text fz={fonsize ? fonsize : 12} c={"red"} fw={"bold"}>
               *{" "}
@@ -52,8 +44,10 @@ export default function ComponentGlobal_BoxInformation({
               </Text>
             </Text>
           </Group>
-        </Paper>
-      )}
+        )}
+      </Paper>
     </>
   );
+
+  
 }

src/app_modules/_global/component/comp_box_upload_image.tsx

@@ -9,7 +9,7 @@ import { Box } from "@mantine/core";
 <Image
 style={{ maxHeight: 250 }}
 alt="Avatar"
-src={image ? image : APIs.GET({ fileId: profile.imageId as any })}/>
+src={image ? image : APIs.GET({ fileId: <imageId> })}/>
 * </AspectRatio> 
  * @returns folllow like this
  */
@@ -22,7 +22,7 @@ export function ComponentGlobal_BoxUploadImage({
 }) {
   return (
     <>
-      <ComponentGlobal_CardStyles height={height ? height : 300}>
+      <ComponentGlobal_CardStyles height={height ? height : 300} >
         <Box
           style={{
             height: "100%",

src/app_modules/_global/component/comp_load_image.tsx

@@ -44,11 +44,9 @@ export function ComponentGlobal_LoadImage({
 
   if (isImage === null)
     return (
-      // <Center h={250}>
-      //   <ComponentGlobal_Loader variant="dots" size={50} />
-      // </Center>
-      <Center>
-        <Skeleton h={250} radius={"sm"} w={200} />
+     
+      <Center h={"100%"}>
+        <Skeleton h={250} radius={"sm"} w={250} />
       </Center>
     );
 
@@ -74,6 +72,7 @@ export function ComponentGlobal_LoadImage({
           opacity={isLoading ? 0.5 : 1}
           radius={radius ? radius : 0}
           alt="Image"
+          height={h ? h : 250}
           maw={maw ? maw : 200}
           miw={200}
           src={url}

src/app_modules/_global/component/comp_load_image_custom.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { APIs } from "@/app/lib";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
+import { Center, Image, Skeleton } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentGlobal_LoadImageCustom({
+  fileId,
+  height,
+}: {
+  fileId: string;
+  height: number;
+}) {
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+  const url = APIs.GET({ fileId: fileId });
+
+  useShallowEffect(() => {
+    onLoadImage();
+  }, []);
+
+  async function onLoadImage() {
+    try {
+      const res = await fetch(url);
+      if (res.ok) {
+        return setIsImage(true);
+      }
+      setIsImage(false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  if (isImage === null)
+    return <Skeleton h={height ? height : 100} w={"100%"} />;
+
+  return (
+    <>
+      {isImage ? (
+        <Image alt="No Image" height={height} src={url} radius={"sm"} />
+      ) : (
+        <Center
+          bg={"white"}
+          p={"sm"}
+          h={height ? height : 80}
+          style={{ borderRadius: "5px" }}
+        >
+          <Image
+            alt="No Image"
+            height={50}
+            width={50}
+            src={pathAssetImage.no_image}
+          />
+        </Center>
+      )}
+    </>
+  );
+}

src/app_modules/_global/component/comp_load_image_landscape.tsx

@@ -39,7 +39,7 @@ export function ComponentGlobal_LoadImageLandscape({
   if (!isImage)
     return (
       <>
-        <Center h={200} bg={"white"} style={{ borderRadius: "10px" }}>
+        <Center h={200} bg={"white"} style={{ borderRadius: "5px" }}>
           <Image
             alt="No Image"
             maw={150}
@@ -55,6 +55,7 @@ export function ComponentGlobal_LoadImageLandscape({
     <>
       <Center>
         <Image
+
           onClick={() => {
             setLoading(true);
             router.push(RouterImagePreview.main({ id: fileId }), {

src/app_modules/_global/component/index.ts

@@ -5,6 +5,7 @@ import { ComponentGlobal_BoxUploadImage } from "./comp_box_upload_image";
 import { ComponentGlobal_CardStyles } from "./comp_card_box_and_background";
 import { ComponentGlobal_LoaderAvatar } from "./comp_load_avatar";
 import { ComponentGlobal_LoadImage } from "./comp_load_image";
+import { ComponentGlobal_LoadImageCustom } from "./comp_load_image_custom";
 import { ComponentGlobal_LoadImageLandscape } from "./comp_load_image_landscape";
 import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
 import { ComponentGlobal_NotUserLoadImage } from "./comp_not_user_load_image";
@@ -27,3 +28,4 @@ export { ComponentGlobal_LoaderAvatar };
 export { ComponentGlobal_AvatarAndUsername };
 export { ComponentGlobal_NotUserLoadImage };
 export { ComponentGlobal_LoadImageLandscape };
+export { ComponentGlobal_LoadImageCustom };

src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx

@@ -0,0 +1,24 @@
+export async function funGlobal_DeleteFileById({ fileId }: { fileId: string }) {
+  try {
+    const res = await fetch(
+      `https://wibu-storage.wibudev.com/api/files/${fileId}/delete`,
+      {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${process.env.WS_APIKEY}`,
+        },
+      }
+    );
+
+    if (res.ok) {
+      const hasil = await res.json();
+      return { success: true };
+    } else {
+      const errorText = await res.json();
+      return { success: false };
+    }
+  } catch (error) {
+    return { success: false };
+    console.error("Upload error:", error);
+  }
+}

src/app_modules/_global/fun/index.ts

@@ -1,3 +1,5 @@
+import { funGlobal_DeleteFileById } from "./delete/fun_delete_file_by_id";
 import { funGlobal_UploadToStorage } from "./upload/fun_upload_to_storage";
 
 export { funGlobal_UploadToStorage };
+export { funGlobal_DeleteFileById };

src/app_modules/_global/ui/index.ts

@@ -1,4 +1,5 @@
 import UIGlobal_Drawer from "./ui_drawer";
+import UIGlobal_DrawerCustom from "./ui_drawer_custom";
 import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
 import { UIGlobal_ImagePreview } from "./ui_image_preview";
 import UIGlobal_LayoutDefault from "./ui_layout_default";
@@ -15,3 +16,4 @@ export { UIGlobal_SplashScreen };
 export { UIGlobal_ImagePreview };
 export { UIGlobal_NotUserImagePreview };
 export { UIGlobal_LayoutDefault };
+export { UIGlobal_DrawerCustom };

src/app_modules/_global/ui/ui_drawer_custom.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { AccentColor } from "@/app_modules/_global/color";
+import {
+  ActionIcon,
+  Box,
+  Drawer,
+  Group,
+  SimpleGrid,
+  Stack,
+} from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import React from "react";
+
+interface MODEL_DRAWER {
+  id: string;
+  name: string;
+  icon: string;
+  path: string;
+}
+export default function UIGlobal_DrawerCustom({
+  opened,
+  close,
+  component,
+}: {
+  opened: boolean;
+  close: () => void;
+  component: React.ReactNode;
+}) {
+  return (
+    <>
+      <Drawer
+        opened={opened}
+        onClose={() => close()}
+        position={"bottom"}
+        size={"auto"}
+        withCloseButton={false}
+        styles={{
+          content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
+            backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
+          },
+          body: {
+            backgroundColor: AccentColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
+      >
+        <Stack spacing={"xs"}>
+          <Group position="right">
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
+          <Box w={"100%"} >
+            {component}
+          </Box>
+        </Stack>
+      </Drawer>
+    </>
+  );
+}

src/app_modules/_global/ui/ui_image_preview.tsx

@@ -9,6 +9,7 @@ import {
   Container,
   Image,
   rem,
+  ScrollArea,
   Skeleton,
   Text,
   Title,
@@ -20,10 +21,12 @@ import { useState } from "react";
 import { MainColor } from "../color";
 import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
 import { UIHeader } from "./ui_layout_tamplate";
+import ComponentGlobal_Loader from "../component/loader";
 
 export function UIGlobal_ImagePreview({ fileId }: { fileId: string }) {
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   const url = APIs.GET({ fileId: fileId });
 
@@ -63,23 +66,31 @@ export function UIGlobal_ImagePreview({ fileId }: { fileId: string }) {
                 hideButtonLeft
                 customButtonRight={
                   <ActionIcon
-                    onClick={() => router.back()}
+                    onClick={() => {
+                      router.back(), setIsLoading(true);
+                    }}
                     variant="transparent"
                   >
-                    <IconX color={MainColor.yellow} />
+                    {isLoading ? (
+                      <ComponentGlobal_Loader />
+                    ) : (
+                      <IconX color={MainColor.yellow} />
+                    )}
                   </ActionIcon>
                 }
               />
             }
           />
 
-          <Box style={{ zIndex: 0 }} h={"92vh"} pos={"static"} px={"lg"}>
+          <Box style={{ zIndex: 0 }} h={"90vh"} pos={"static"} px={"lg"}>
             {isImage === null ? (
               <Skeleton height={200} radius={"sm"} />
             ) : isImage ? (
-              <Center>
-                <Image alt="Image" src={url} maw={400} miw={200} />
-              </Center>
+              <ScrollArea h={"100%"}>
+                <Center>
+                  <Image alt="Image" src={url} maw={500} miw={200} />
+                </Center>
+              </ScrollArea>
             ) : (
               <Box
                 bg={"gray"}

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

@@ -0,0 +1,140 @@
+"use client";
+
+import { DIRECTORY_ID } from "@/app/lib";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { MainColor } from "@/app_modules/_global/color";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { notifikasiToAdmin_funCreate } from "@/app_modules/notifikasi/fun";
+import mqtt_client from "@/util/mqtt_client";
+import { Button } from "@mantine/core";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { investasi_funCreateNewInvestasi } from "../../_fun";
+import { gs_investas_menu, gs_investasi_status } from "../../g_state";
+
+export function Investasi_ComponentButtonCreateNewInvestasi({
+  data,
+  totalLembar,
+  fileImage,
+  filePdf,
+}: {
+  data: any;
+  totalLembar: number;
+  fileImage: File;
+  filePdf: File;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [activeTab, setActiveTab] = useAtom(gs_investasi_status);
+  const [hotMenu, setHotMenu] = useAtom(gs_investas_menu);
+
+  async function onSubmit() {
+    setIsLoading(true);
+    const body = {
+      title: data.title,
+      targetDana: data.targetDana,
+      hargaLembar: data.hargaLembar,
+      totalLembar: totalLembar,
+      roi: data.roi,
+      masterPeriodeDevidenId: data.periodeDevidenId,
+      masterPembagianDevidenId: data.pembagianDevidenId,
+      masterPencarianInvestorId: data.pencarianInvestorId,
+    };
+
+    const uploadImage = await funGlobal_UploadToStorage({
+      file: fileImage,
+      dirId: DIRECTORY_ID.investasi_image,
+    });
+    if (!uploadImage.success) {
+      setIsLoading(false);
+      return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
+    }
+
+    const uploadFilePdf = await funGlobal_UploadToStorage({
+      file: filePdf,
+      dirId: DIRECTORY_ID.investasi_prospektus,
+    });
+    if (!uploadFilePdf.success) {
+      setIsLoading(false);
+      return ComponentGlobal_NotifikasiPeringatan("Gagal upload file pdf");
+    }
+
+    const res = await investasi_funCreateNewInvestasi({
+      data: body as any,
+      fileImageId: uploadImage.data.id,
+      filePdfId: uploadFilePdf.data.id,
+    });
+
+    if (res.status === 201) {
+      const dataNotif = {
+        appId: res.data?.id,
+        status: res.data?.MasterStatusInvestasi?.name,
+        userId: res.data?.authorId,
+        pesan: res.data?.title,
+        kategoriApp: "INVESTASI",
+        title: "Investasi baru",
+      };
+
+      const notif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "ADMIN",
+          JSON.stringify({
+            count: 1,
+          })
+        );
+        setActiveTab("Review");
+        setHotMenu(1);
+        setIsLoading(true);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        router.push(NEW_RouterInvestasi.portofolio({ id: "2" }));
+      }
+      setIsLoading(false);
+    } else {
+      setIsLoading(false);
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
+  }
+
+  return (
+    <>
+      <Button
+        my={"xl"}
+        style={{
+          transition: "0.5s",
+        }}
+        loaderPosition="center"
+        loading={isLoading ? true : false}
+        disabled={
+          data.title === "" ||
+          data.hargaLembar === 0 ||
+          data.targetDana === 0 ||
+          data.roi === 0 ||
+          data.pencarianInvestorId === "" ||
+          data.periodeDevidenId === "" ||
+          data.pembagianDevidenId === "" ||
+          fileImage === null ||
+          filePdf === null
+            ? true
+            : false
+        }
+        radius={50}
+        bg={MainColor.yellow}
+        color="yellow"
+        c={"black"}
+        onClick={() => onSubmit()}
+      >
+        Simpan
+      </Button>
+    </>
+  );
+}

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

@@ -0,0 +1,90 @@
+import { MainColor } from "@/app_modules/_global/color";
+import { Button, Stack } from "@mantine/core";
+import { MODEL_INVESTASI } from "../../_lib/interface";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { DIRECTORY_ID } from "@/app/lib";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import _ from "lodash";
+import { investasi_funUpdateInvestasi } from "../../_fun";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function Investasi_ComponentButtonUpdateDataInvestasi({
+  data,
+  file,
+  totalLembar,
+}: {
+  data: MODEL_INVESTASI;
+  file: File;
+  totalLembar: string;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function onUpdate() {
+    if (totalLembar === "0")
+      return ComponentGlobal_NotifikasiPeringatan("Total lembar kosong");
+
+    if (file !== null) {
+      if (_.values(data).includes(""))
+        return ComponentGlobal_NotifikasiPeringatan("Lengkapi data");
+
+      const uploadImage = await funGlobal_UploadToStorage({
+        file: file as any,
+        dirId: DIRECTORY_ID.investasi_image,
+      });
+      if (!uploadImage.success) {
+        setIsLoading(false);
+        return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
+      }
+
+      const updtWithImage = await investasi_funUpdateInvestasi({
+        data: data,
+        imageId: uploadImage.data.id,
+        totalLembar: totalLembar,
+      });
+
+      if (updtWithImage.status === 200) {
+        setIsLoading(false);
+        router.back();
+        return ComponentGlobal_NotifikasiBerhasil(updtWithImage.message);
+      } else {
+        setIsLoading(false);
+        return ComponentGlobal_NotifikasiPeringatan(updtWithImage.message);
+      }
+    } else {
+      const updtNoImage = await investasi_funUpdateInvestasi({
+        data: data,
+        totalLembar: totalLembar,
+      });
+
+      if (updtNoImage.status === 200) {
+        setIsLoading(false);
+        router.back();
+        return ComponentGlobal_NotifikasiBerhasil(updtNoImage.message);
+      } else {
+        setIsLoading(false);
+        return ComponentGlobal_NotifikasiPeringatan(updtNoImage.message);
+      }
+    }
+  }
+  return (
+    <Stack>
+      <Button
+        my={50}
+        radius={50}
+        bg={MainColor.yellow}
+        color="yellow"
+        c={"black"}
+        onClick={() => {
+          onUpdate();
+        }}
+      >
+        Update
+      </Button>
+    </Stack>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { AccentColor } from "@/app_modules/_global/color";
 import { ActionIcon, Flex, Loader, Paper, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
@@ -23,18 +23,17 @@ export function Investasi_ComponentBoxDaftarBerita({
           borderRadius: "10px",
           color: "white",
         }}
+        onClick={() => {
+          setLoading(true);
+          router.push(
+            NEW_RouterInvestasi.detail_prospektus({ id: investasiId }),
+            { scroll: false }
+          );
+        }}
       >
         <Flex direction={"column"} align={"center"} justify={"center"}>
           <Text fz={12}>Berita</Text>
-          <ActionIcon
-            radius={"xl"}
-            variant="transparent"
-            size={60}
-            onClick={() => {
-              setLoading(true);
-              router.push(RouterInvestasi_OLD.daftar_berita + investasiId);
-            }}
-          >
+          <ActionIcon radius={"xl"} variant="transparent" size={60}>
             {isLoading ? (
               <Loader color="yellow" />
             ) : (

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

@@ -1,4 +1,7 @@
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  NEW_RouterInvestasi,
+  RouterInvestasi_OLD,
+} from "@/app/lib/router_hipmi/router_investasi";
 import { AccentColor } from "@/app_modules/_global/color";
 import { ActionIcon, Flex, Loader, Paper, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
@@ -23,18 +26,17 @@ export function Investasi_ComponentBoxDaftarDokumen({
           borderRadius: "10px",
           color: "white",
         }}
+        onClick={() => {
+          setLoading(true);
+          router.push(NEW_RouterInvestasi.daftar_dokumen({ id: investasiId }), {
+            scroll: false,
+          });
+          // router.push(RouterInvestasi_OLD.detail_dokumen + investasiId, { scroll: false });
+        }}
       >
         <Flex direction={"column"} align={"center"} justify={"center"}>
           <Text fz={12}>Dokumen</Text>
-          <ActionIcon
-            radius={"xl"}
-            variant="transparent"
-            size={60}
-            onClick={() => {
-              setLoading(true);
-              router.push(RouterInvestasi_OLD.detail_dokumen + investasiId);
-            }}
-          >
+          <ActionIcon radius={"xl"} variant="transparent" size={60}>
             {isLoading ? (
               <Loader color="yellow" />
             ) : (

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

@@ -1,4 +1,4 @@
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { AccentColor } from "@/app_modules/_global/color";
 import { ActionIcon, Flex, Loader, Paper, Text } from "@mantine/core";
 import { IconBookDownload } from "@tabler/icons-react";
@@ -6,9 +6,9 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 export function Investasi_ComponentBoxProspektus({
-  investasiId,
+  prospektusFileId,
 }: {
-  investasiId: string;
+  prospektusFileId: string;
 }) {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
@@ -22,20 +22,18 @@ export function Investasi_ComponentBoxProspektus({
           border: `2px solid ${AccentColor.softblue}`,
           borderRadius: "10px",
           color: "white",
-          
+        }}
+        onClick={() => {
+          setLoading(true);
+          router.push(
+            NEW_RouterInvestasi.file_prospektus({ id: prospektusFileId }),
+            { scroll: false }
+          );
         }}
       >
         <Flex direction={"column"} align={"center"} justify={"center"}>
           <Text fz={12}>Prospektus</Text>
-          <ActionIcon
-            radius={"xl"}
-            variant="transparent"
-            size={60}
-            onClick={() => {
-              setLoading(true);
-              router.push(RouterInvestasi_OLD.detail_prospektus + investasiId);
-            }}
-          >
+          <ActionIcon radius={"xl"} variant="transparent" size={60}>
             {isLoading ? (
               <Loader color="yellow" />
             ) : (

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

@@ -0,0 +1,37 @@
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import { Stack, Text } from "@mantine/core";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_INVESTASI_DOKUMEN } from "../../_lib/interface";
+
+export function Investasi_ComponentCardDaftarDocument({
+  data,
+}: {
+  data: MODEL_INVESTASI_DOKUMEN;
+}) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+  return (
+    <ComponentGlobal_CardStyles>
+      <Stack
+        justify="center"
+        h={"100%"}
+        onClick={() => {
+          router.push(
+            NEW_RouterInvestasi.file_prospektus({ id: data.fileId }),
+            { scroll: false }
+          );
+          setVisible(true);
+        }}
+      >
+        <Text lineClamp={2}>{data.title}</Text>
+      </Stack>
+      {visible && <ComponentGlobal_CardLoadingOverlay />}
+    </ComponentGlobal_CardStyles>
+  );
+}

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

@@ -0,0 +1,181 @@
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import {
+  UIGlobal_DrawerCustom,
+  UIGlobal_Modal,
+} from "@/app_modules/_global/ui";
+import {
+  ActionIcon,
+  Button,
+  Grid,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_INVESTASI_DOKUMEN } from "../../_lib/interface";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import {
+  investasi_funDeleteDokumenById,
+  investasi_funGetAllDocumentById,
+} from "../../_fun";
+import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+
+export function Investasi_ComponentCardRekapDocument({
+  data,
+  onSetData,
+}: {
+  data: MODEL_INVESTASI_DOKUMEN;
+  onSetData: (val: any) => any[];
+}) {
+  const router = useRouter();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [isLoadingEdit, setIsLoadingEdit] = useState(false);
+
+  const [openModal, setOpenModal] = useState(false);
+  const [isLoadingDelete, setIsLoadingDelete] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  async function onDelete() {
+    try {
+      setIsLoadingDelete(true);
+      const deleteFileFromStorage = await funGlobal_DeleteFileById({
+        fileId: data.fileId,
+      });
+
+      if (!deleteFileFromStorage.success) {
+        ComponentGlobal_NotifikasiPeringatan("Gagal hapus file lama");
+      }
+
+      const deleteFromDB = await investasi_funDeleteDokumenById({
+        dokumenId: data.id,
+      });
+
+      if (deleteFromDB.status !== 200) {
+        ComponentGlobal_NotifikasiPeringatan(deleteFromDB.message);
+      }
+      ComponentGlobal_NotifikasiBerhasil(deleteFromDB.message);
+      setOpenModal(false);
+
+      const loadData = await investasi_funGetAllDocumentById({
+        investasiId: data.investasiId,
+        page: 1,
+      });
+
+      onSetData(loadData);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoadingDelete(false);
+    }
+  }
+
+  return (
+    <>
+      <ComponentGlobal_CardStyles>
+        <Grid>
+          <Grid.Col
+            span={"auto"}
+            onClick={() => {
+              router.push(
+                NEW_RouterInvestasi.file_prospektus({ id: data.fileId }),
+                { scroll: false }
+              );
+              setVisible(true);
+            }}
+          >
+            <Stack justify="center" h={"100%"}>
+              <Text lineClamp={2}>{data.title}</Text>
+            </Stack>
+          </Grid.Col>
+
+          <Grid.Col span={"content"} onClick={() => setOpenDrawer(true)}>
+            <Group grow>
+              <ActionIcon variant="transparent">
+                <IconDots color="white" />
+              </ActionIcon>
+            </Group>
+          </Grid.Col>
+        </Grid>
+        {visible && <ComponentGlobal_CardLoadingOverlay />}
+      </ComponentGlobal_CardStyles>
+
+      <UIGlobal_DrawerCustom
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={
+          <SimpleGrid cols={2}>
+            <Stack align="center" spacing={"xs"}>
+              <ActionIcon
+                variant="transparent"
+                c="white"
+                onClick={() => {
+                  setIsLoadingEdit(true);
+                  router.push(
+                    NEW_RouterInvestasi.edit_dokumen({ id: data.id }),
+                    { scroll: false }
+                  );
+                }}
+              >
+                {isLoadingEdit ? <ComponentGlobal_Loader /> : <IconEdit />}
+              </ActionIcon>
+              <Text fz={"sm"} align="center" color="white">
+                Edit Dokumen
+              </Text>
+            </Stack>
+
+            <Stack align="center" spacing={"xs"}>
+              <ActionIcon
+                variant="transparent"
+                c="white"
+                onClick={() => {
+                  setOpenModal(true);
+                  setOpenDrawer(false);
+                }}
+              >
+                <IconTrash color="red" />
+              </ActionIcon>
+              <Text fz={"sm"} c={"red"} align="center" color="white">
+                Hapus Dokumen
+              </Text>
+            </Stack>
+          </SimpleGrid>
+        }
+      />
+
+      <UIGlobal_Modal
+        opened={openModal}
+        close={() => setOpenModal(false)}
+        title={"Anda yakin akan menghapus dokumen ini ?"}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            loaderPosition="center"
+            loading={isLoadingDelete}
+            radius={"xl"}
+            color={"red"}
+            onClick={() => {
+              onDelete();
+            }}
+          >
+            Hapus
+          </Button>
+        }
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,106 @@
+import {
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageLandscape,
+} from "@/app_modules/_global/component";
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import { Center, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import _ from "lodash";
+import { Investasi_ComponentBoxDaftarDokumen } from "./comp_box_daftar_dokumen";
+import { Investasi_ComponentBoxProspektus } from "./comp_box_prospektus";
+import { Investasi_ComponentTitleAndValueInDetail } from "./comp_title_and_value_in_detail";
+
+export function Investasi_ComponentDetailDataNonPublish({
+  data,
+}: {
+  data: MODEL_INVESTASI;
+}) {
+  return (
+    <>
+      <ComponentGlobal_CardStyles>
+        <Stack spacing={"xl"}>
+          <ComponentGlobal_LoadImageLandscape fileId={data.imageId} />
+
+          {/* Title dan Persentase */}
+          <Center>
+            <Title order={3} align="center">
+              {_.startCase(data.title)}
+            </Title>
+          </Center>
+
+          {/* Rincian Data */}
+
+          <Stack>
+            <Investasi_ComponentTitleAndValueInDetail
+              title="Target Dana"
+              value={
+                <Text>
+                  Rp.{" "}
+                  {new Intl.NumberFormat("id-ID", {
+                    maximumSignificantDigits: 20,
+                  }).format(+data.targetDana)}{" "}
+                </Text>
+              }
+            />
+
+            <Investasi_ComponentTitleAndValueInDetail
+              title="Harga Per Lembar"
+              value={
+                <Text>
+                  Rp.{" "}
+                  {new Intl.NumberFormat("id-ID", {
+                    maximumSignificantDigits: 10,
+                  }).format(+data.hargaLembar)}
+                </Text>
+              }
+            />
+
+            <Investasi_ComponentTitleAndValueInDetail
+              title={<Text fs={"italic"}>Return Of Invesment (RoI)</Text>}
+              value={<Text>{data.roi} %</Text>}
+            />
+
+            <Investasi_ComponentTitleAndValueInDetail
+              title="Total Lembar"
+              value={
+                <Text>
+                  {new Intl.NumberFormat("id-ID", {
+                    maximumSignificantDigits: 10,
+                  }).format(+data.totalLembar)}{" "}
+                  lembar
+                </Text>
+              }
+            />
+
+            <Investasi_ComponentTitleAndValueInDetail
+              title="Jadwal Pembagian"
+              value={<Text>{data.MasterPembagianDeviden.name} Bulan </Text>}
+            />
+            <Investasi_ComponentTitleAndValueInDetail
+              title="Pembagian Deviden"
+              value={<Text>{data.MasterPeriodeDeviden.name}</Text>}
+            />
+            <Investasi_ComponentTitleAndValueInDetail
+              title="Pencarian Investor"
+              value={<Text>{data.MasterPencarianInvestor.name} Hari </Text>}
+            />
+          </Stack>
+
+          {/* List Box */}
+          <SimpleGrid
+            cols={2}
+            breakpoints={[
+              { maxWidth: "62rem", cols: 2, spacing: "md" },
+              { maxWidth: "48rem", cols: 2, spacing: "sm" },
+              { maxWidth: "36rem", cols: 1, spacing: "sm" },
+            ]}
+          >
+            <Investasi_ComponentBoxProspektus
+              prospektusFileId={data.prospektusFileId}
+            />
+            <Investasi_ComponentBoxDaftarDokumen investasiId={data?.id} />
+          </SimpleGrid>
+        </Stack>
+      </ComponentGlobal_CardStyles>
+    </>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { Grid, Text } from "@mantine/core";
+import { data } from "autoprefixer";
+import React from "react";
+
+export function Investasi_ComponentTitleAndValueInDetail({
+  title,
+  value,
+}: {
+  title: string | React.ReactNode;
+  value: React.ReactNode;
+}) {
+  return (
+    <>
+      <Grid>
+        <Grid.Col span={5}>
+          <Text fw={"bold"}>{title} </Text>
+        </Grid.Col>
+        <Grid.Col span={1}>: </Grid.Col>
+        <Grid.Col span={6}>{value}</Grid.Col>
+      </Grid>
+    </>
+  );
+}

src/app_modules/investasi/_component/detail/saham_saya/comp_detail_data.tsx

@@ -1,5 +1,9 @@
 import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
-import { ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageLandscape,
+} from "@/app_modules/_global/component";
 import { MODEL_INVOICE_INVESTASI } from "@/app_modules/investasi/_lib/interface";
 import {
   AspectRatio,
@@ -23,20 +27,14 @@ export function Investasi_ComponentBoxDetailData({
 }) {
   return (
     <>
-      <Investasi_ComponentStylesCard>
+      <ComponentGlobal_CardStyles>
         <Stack>
-          <ComponentGlobal_AvatarAndUsername profile={data?.Author.Profile as any} />
-          <AspectRatio ratio={1 / 1} mx={0} mah={250}>
-            <Image
-              alt=""
-              src={
-                RouterInvestasi_OLD.api_gambar + `${data?.Investasi.imagesId}`
-              }
-              radius={"sm"}
-              mah={250}
-              width={"100%"}
-            />
-          </AspectRatio>
+          <ComponentGlobal_AvatarAndUsername
+            profile={data?.Author.Profile as any}
+          />
+
+          <ComponentGlobal_LoadImageLandscape fileId={data.Investasi.imageId} />
+
           <Title order={3} mb={"xs"} align="center">
             {data?.Investasi.title}
           </Title>
@@ -122,7 +120,7 @@ export function Investasi_ComponentBoxDetailData({
             ]}
           >
             <Investasi_ComponentBoxProspektus
-              investasiId={data?.Investasi?.id}
+              prospektusFileId={data.Investasi.prospektusFileId}
             />
             <Investasi_ComponentBoxDaftarDokumen
               investasiId={data?.Investasi?.id}
@@ -132,7 +130,7 @@ export function Investasi_ComponentBoxDetailData({
             />
           </SimpleGrid>
         </Stack>
-      </Investasi_ComponentStylesCard>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/investasi/_component/index.ts

@@ -12,6 +12,12 @@ import { Investasi_ComponentFooterMain } from "./main/comp_footer_main";
 import { Investasi_ComponentCardPortofolioPublish } from "./main/comp_card_portofolio_publish";
 import { Investasi_ComponentButtonUpdateBeranda } from "./main/comp_update_beranda";
 import { Investasi_ComponentCardPortofolio_NotPublish } from "./main/comp_card_portofolio_not_publish";
+import { Investasi_ComponentButtonCreateNewInvestasi } from "./button/comp_button_create_new_investasi";
+import { Investasi_ComponentTitleAndValueInDetail } from "./detail/comp_title_and_value_in_detail";
+import { Investasi_ComponentDetailDataNonPublish } from "./detail/comp_detail_data_non_publish";
+import { Investasi_ComponentButtonUpdateDataInvestasi } from "./button/comp_button_update_investasi";
+import { Investasi_ComponentCardRekapDocument } from "./detail/comp_card_rekap_document";
+import { Investasi_ComponentCardDaftarDocument } from "./detail/comp_card_daftar_document";
 
 export { Investasi_ComponentFooterMain };
 export { Investasi_ComponentCardBeranda };
@@ -27,3 +33,9 @@ export { Investasi_ComponentBoxProgress };
 export { Investasi_ComponentBoxDetailData };
 export { Investasi_ComponentCardPortofolioPublish };
 export { Investasi_ComponentCardPortofolio_NotPublish };
+export { Investasi_ComponentButtonCreateNewInvestasi };
+export { Investasi_ComponentTitleAndValueInDetail };
+export { Investasi_ComponentDetailDataNonPublish };
+export { Investasi_ComponentButtonUpdateDataInvestasi };
+export { Investasi_ComponentCardRekapDocument };
+export { Investasi_ComponentCardDaftarDocument };

src/app_modules/investasi/_component/main/comp_card_beranda.tsx

@@ -15,16 +15,20 @@ import {
   Group,
   Image,
   Text,
+  Grid,
 } from "@mantine/core";
 import { IconCircleCheck, IconXboxX } from "@tabler/icons-react";
 import moment from "moment";
 
 import { MODEL_INVESTASI } from "../../_lib/interface";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { Component, useState } from "react";
 import {
   ComponentGlobal_CardLoadingOverlay,
   ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImage,
+  ComponentGlobal_LoadImageCustom,
+  ComponentGlobal_LoadImageLandscape,
 } from "@/app_modules/_global/component";
 
 export function Investasi_ComponentCardBeranda({
@@ -45,109 +49,89 @@ export function Investasi_ComponentCardBeranda({
           router.push(RouterInvestasi_OLD.detail + `${data?.id}`);
         }}
       >
-        <CardSection py={"md"} px={"sm"}>
-          <AspectRatio ratio={1 / 1} mah={250}>
-            <Box style={{ borderRadius: "7px" }}>
-              {data.imagesId ? (
-                <Image
-                  radius={"sm"}
-                  alt="Foto"
-                  src={RouterInvestasi_OLD.api_gambar + `${data?.imagesId}`}
-                  w={200}
+        <Stack>
+          <Grid>
+            <Grid.Col span={6}>
+              <ComponentGlobal_LoadImageCustom
+                height={100}
+                fileId={data.imageId}
+              />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Stack>
+                <Text fw={"bold"} align="center" lineClamp={2}>{data?.title}</Text>
+
+                <Progress
+                  label={(+data?.progress).toFixed(2) + " %"}
+                  value={+data?.progress}
+                  color={MainColor.yellow}
+                  size="xl"
+                  radius="xl"
+                  styles={{
+                    label: { color: MainColor.black },
+                  }}
                 />
-              ) : (
-                <Image alt="" src={"/aset/no-img.png"} />
-              )}
-            </Box>
-          </AspectRatio>
-        </CardSection>
-
-        <CardSection p={"md"}>
-          <Stack>
-            <Title align="center" order={3}>
-              {data?.title}
-            </Title>
-            <Progress
-              label={(+data?.progress).toFixed(2) + " %"}
-              value={+data?.progress}
-              color={MainColor.yellow}
-              size="xl"
-              radius="xl"
-              styles={{
-                label: { color: MainColor.black },
-              }}
-            />
-          </Stack>
-        </CardSection>
-
-        <CardSection p={"md"}>
-          <Group position="right">
-            {data?.progress === "100" ? (
-              <Group position="right" spacing={"xs"}>
-                <IconCircleCheck color="green" />
-                <Text
-                  truncate
-                  variant="text"
-                  c={Warna.hijau_tua}
-                  sx={{ fontFamily: "Greycliff CF, sans-serif" }}
-                  ta="center"
-                  fz="md"
-                  fw={700}
-                >
-                  Selesai
-                </Text>
-              </Group>
-            ) : (
-              <Box>
-                {+data?.MasterPencarianInvestor.name -
-                  moment(new Date()).diff(new Date(data?.countDown), "days") <=
-                0 ? (
-                  <Group position="right" spacing={"xs"}>
-                    <IconXboxX color="red" />
-                    <Text
-                      truncate
-                      variant="text"
-                      c={Warna.merah}
-                      sx={{ fontFamily: "Greycliff CF, sans-serif" }}
-                      ta="center"
-                      fz="md"
-                      fw={700}
-                    >
-                      Waktu Habis
-                    </Text>
-                  </Group>
-                ) : (
-                  <Group position="right" spacing={"xs"}>
-                    <Text truncate>Sisa waktu:</Text>
-                    <Text truncate>
-                      {Number(data?.MasterPencarianInvestor.name) -
+                <Group position="right">
+                  {data?.progress === "100" ? (
+                    <Group position="right" spacing={"xs"}>
+                      <IconCircleCheck color="green" />
+                      <Text
+                        truncate
+                        variant="text"
+                        c={Warna.hijau_tua}
+                        sx={{ fontFamily: "Greycliff CF, sans-serif" }}
+                        ta="center"
+                        fz="md"
+                        fw={700}
+                      >
+                        Selesai
+                      </Text>
+                    </Group>
+                  ) : (
+                    <Box>
+                      {+data?.MasterPencarianInvestor.name -
                         moment(new Date()).diff(
                           new Date(data?.countDown),
                           "days"
-                        )}
-                    </Text>
-                    <Text truncate>Hari</Text>
-                  </Group>
-                )}
-              </Box>
-            )}
-          </Group>
-        </CardSection>
+                        ) <=
+                      0 ? (
+                        <Group position="right" spacing={"xs"}>
+                          <IconXboxX color="red" />
+                          <Text
+                            truncate
+                            variant="text"
+                            c={Warna.merah}
+                            sx={{ fontFamily: "Greycliff CF, sans-serif" }}
+                            ta="center"
+                            fz="md"
+                            fw={700}
+                          >
+                            Waktu Habis
+                          </Text>
+                        </Group>
+                      ) : (
+                        <Group position="right" spacing={"xs"}>
+                          <Text truncate>Sisa waktu:</Text>
+                          <Text truncate>
+                            {Number(data?.MasterPencarianInvestor.name) -
+                              moment(new Date()).diff(
+                                new Date(data?.countDown),
+                                "days"
+                              )}
+                          </Text>
+                          <Text truncate>Hari</Text>
+                        </Group>
+                      )}
+                    </Box>
+                  )}
+                </Group>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+
         {visible ? <ComponentGlobal_CardLoadingOverlay /> : ""}
       </ComponentGlobal_CardStyles>
-
-      {/* <Card
-        style={{
-          padding: "15px",
-          backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
-          border: `2px solid ${AccentColor.blue}`,
-          color: "white",
-          marginBottom: "15px",
-          marginInline: "15px",
-        }}
-       
-      ></Card> */}
     </>
   );
 }

src/app_modules/investasi/_component/main/comp_card_portofolio_not_publish.tsx

@@ -1,11 +1,13 @@
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
-import { Grid, Stack, AspectRatio, Paper, Text, Image } from "@mantine/core";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageCustom,
+} from "@/app_modules/_global/component";
+import { Grid, Stack, Text } from "@mantine/core";
 import _ from "lodash";
-import { MODEL_INVESTASI } from "../../_lib/interface";
-import { Investasi_ComponentStylesCard } from "../comp_card_border_and_background";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import { MODEL_INVESTASI } from "../../_lib/interface";
 
 export function Investasi_ComponentCardPortofolio_NotPublish({
   data,
@@ -16,12 +18,13 @@ export function Investasi_ComponentCardPortofolio_NotPublish({
 }) {
   const router = useRouter();
   const [visible, setVisible] = useState(false);
-
   return (
     <>
-      <Investasi_ComponentStylesCard
+      {/* <pre style={{color: "white"}}>{JSON.stringify(data, null, 2)}</pre> */}
+
+      <ComponentGlobal_CardStyles
         onClickHandler={() => {
-          router.push(path + data?.id);
+          router.push(path, { scroll: false });
           setVisible(true);
         }}
       >
@@ -43,18 +46,14 @@ export function Investasi_ComponentCardPortofolio_NotPublish({
           </Grid.Col>
 
           <Grid.Col span={4}>
-            <AspectRatio ratio={16 / 9}>
-              <Paper radius={"md"}>
-                <Image
-                  alt=""
-                  src={RouterInvestasi_OLD.api_gambar + `${data.imagesId}`}
-                />
-              </Paper>
-            </AspectRatio>
+            <ComponentGlobal_LoadImageCustom
+              fileId={data.imageId}
+              height={80}
+            />
           </Grid.Col>
         </Grid>
         {visible && <ComponentGlobal_CardLoadingOverlay />}
-      </Investasi_ComponentStylesCard>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/investasi/_component/main/comp_card_portofolio_publish.tsx

@@ -34,7 +34,7 @@ export function Investasi_ComponentCardPortofolioPublish({
       <Investasi_ComponentStylesCard
         marginBottom={"15px"}
         onClickHandler={() => {
-          router.push(NEW_RouterInvestasi.detail_publish + data?.id);
+          router.push(NEW_RouterInvestasi.detail_portofolio({ id: data?.id }));
           setVisible(true);
         }}
       >

src/app_modules/investasi/_component/main/comp_footer_main.tsx

@@ -1,4 +1,7 @@
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  NEW_RouterInvestasi,
+  RouterInvestasi_OLD,
+} from "@/app/lib/router_hipmi/router_investasi";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import { SimpleGrid, Stack, ActionIcon, Text } from "@mantine/core";
 import {
@@ -21,7 +24,7 @@ const listFooter = [
   {
     id: 2,
     name: "Portofolio",
-    route: RouterInvestasi_OLD.main_porto,
+    route: NEW_RouterInvestasi.portofolio({ id: "1" }),
     icon: <IconChartPie />,
   },
   {
@@ -45,14 +48,14 @@ export function Investasi_ComponentFooterMain() {
   return (
     <>
       <SimpleGrid cols={listFooter.length} h={"9vh"} mx={"xs"}>
-        {listFooter.map((e, i) => (
+        {listFooter.map((e: any, i) => (
           <Stack key={i} align="center" justify="center" spacing={0}>
             <ActionIcon
               // disabled={e.path === "" ? true : false}
               variant="transparent"
               c={hotMenu === i ? MainColor.yellow : "white"}
               onClick={() => {
-                router.push(e.route);
+                router.push(e.route, { scroll: false });
                 setHotMenu(i);
               }}
             >

src/app_modules/investasi/_fun/create/fun_create_document.tsx

@@ -0,0 +1,28 @@
+"use server";
+
+import { prisma } from "@/app/lib";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { revalidatePath } from "next/cache";
+
+type ICreateDocument = {
+  investasiId: string;
+  title: string;
+  fileId: string;
+};
+export async function investasi_funCreateDocument({
+  data,
+}: {
+  data: ICreateDocument;
+}) {
+  const create = await prisma.dokumenInvestasi.create({
+    data: {
+      investasiId: data.investasiId,
+      title: data.title,
+      fileId: data.fileId,
+    },
+  });
+
+  if (!create) return { status: 400, message: "Gagal membuat dokumen" };
+  revalidatePath(NEW_RouterInvestasi.rekap_dokumen({ id: data.investasiId }));
+  return { status: 201, message: "Berhasil membuat dokumen" };
+}

src/app_modules/investasi/_fun/create/fun_create_new_investasi.tsx

@@ -0,0 +1,62 @@
+"use server";
+
+import { prisma } from "@/app/lib";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import _ from "lodash";
+import { revalidatePath } from "next/cache";
+import { MODEL_INVESTASI } from "../../_lib/interface";
+
+export async function investasi_funCreateNewInvestasi({
+  data,
+  fileImageId,
+  filePdfId,
+}: {
+  data: MODEL_INVESTASI;
+  fileImageId: string;
+  filePdfId: string;
+}) {
+  const userLoginId = await funGetUserIdByToken();
+  try {
+    const createNew = await prisma.investasi.create({
+      data: {
+        authorId: userLoginId,
+        title: _.startCase(data.title),
+        targetDana: data.targetDana.toString(),
+        hargaLembar: data.hargaLembar.toString(),
+        totalLembar: data.totalLembar.toString(),
+        sisaLembar: data.totalLembar.toString(),
+        roi: data.roi.toString(),
+        masterPembagianDevidenId: data.masterPembagianDevidenId,
+        masterPeriodeDevidenId: data.masterPeriodeDevidenId,
+        masterPencarianInvestorId: data.masterPencarianInvestorId,
+        masterStatusInvestasiId: "2",
+        imageId: fileImageId,
+        prospektusFileId: filePdfId,
+      },
+      select: {
+        id: true,
+        title: true,
+        authorId: true,
+        MasterStatusInvestasi: {
+          select: {
+            name: true,
+          },
+        },
+      },
+    });
+
+    if (!createNew) return { status: 400, message: "Gagal Membuat Investasi" };
+    revalidatePath(NEW_RouterInvestasi.portofolio({id: "2"}));
+
+    return {
+      status: 201,
+      data: createNew,
+      message: "Berhasil Membuat Investasi",
+    };
+  } catch (error) {
+    console.log(error);
+
+    return { status: 400, message: "Error Message" };
+  }
+}

src/app_modules/investasi/_fun/delete/fun_delete_dokumen.tsx

@@ -0,0 +1,21 @@
+"use server";
+
+import { prisma } from "@/app/lib";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { revalidatePath } from "next/cache";
+
+export async function investasi_funDeleteDokumenById({
+  dokumenId,
+}: {
+  dokumenId: string;
+}) {
+  const del = await prisma.dokumenInvestasi.delete({
+    where: {
+      id: dokumenId,
+    },
+  });
+
+  if (!del) return { status: 400, message: "Gagal hapus data" };
+  revalidatePath(NEW_RouterInvestasi.rekap_dokumen({ id: del.investasiId as any }));
+  return { status: 200, message: "Berhasil hapus data" };
+}

src/app_modules/investasi/_fun/edit/fun_edit_document.tsx

@@ -0,0 +1,67 @@
+"use server";
+
+import { prisma } from "@/app/lib";
+import { MODEL_INVESTASI_DOKUMEN } from "../../_lib/interface";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { revalidatePath } from "next/cache";
+
+export async function investasi_funUpdateDocument({
+  data,
+  fileId,
+}: {
+  data: MODEL_INVESTASI_DOKUMEN;
+  fileId?: string;
+}) {
+  try {
+    fileId !== undefined
+      ? await prisma.dokumenInvestasi.update({
+          where: {
+            id: data.id,
+          },
+          data: {
+            title: data.title,
+            fileId: fileId,
+          },
+        })
+      : await prisma.dokumenInvestasi.update({
+          where: {
+            id: data.id,
+          },
+          data: {
+            title: data.title,
+          },
+        });
+  } catch (error) {
+    console.log(error);
+  } finally {
+    revalidatePath(NEW_RouterInvestasi.rekap_dokumen({ id: data.investasiId }));
+    return { status: 200, message: "Berhasil Update" };
+  }
+
+  //   if (fileId !== undefined) {
+  //     const updt = await prisma.dokumenInvestasi.update({
+  //       where: {
+  //         id: data.id,
+  //       },
+  //       data: {
+  //         title: data.title,
+  //         fileId: fileId,
+  //       },
+  //     });
+  //   } else {
+  //     const updt = await prisma.dokumenInvestasi.update({
+  //       where: {
+  //         id: data.id,
+  //       },
+  //       data: {
+  //         title: data.title,
+  //       },
+  //     });
+  //   }
+  //    if (!updt) return { status: 400, message: "Gagal Update" };
+  //    revalidatePath(NEW_RouterInvestasi.rekap_dokumen({ id: data.investasiId }));
+  //    return {
+  //      status: 200,
+  //      message: "Berhasil Update",
+  //    };
+}

src/app_modules/investasi/_fun/edit/fun_edit_investasi.tsx

@@ -0,0 +1,67 @@
+"use server";
+
+import { prisma } from "@/app/lib";
+import { MODEL_INVESTASI } from "../../_lib/interface";
+import _ from "lodash";
+import { revalidatePath } from "next/cache";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+
+export async function investasi_funUpdateInvestasi({
+  data,
+  imageId,
+  totalLembar,
+}: {
+  data: MODEL_INVESTASI;
+  imageId?: string;
+  totalLembar: string;
+}) {
+  //   console.log(data);
+  //   console.log(imageId);
+  //   console.log(totalLembar);
+
+  if (imageId !== undefined) {
+    const updtWithImage = await prisma.investasi.update({
+      where: {
+        id: data.id,
+      },
+      data: {
+        title: _.startCase(data.title),
+        targetDana: data.targetDana,
+        hargaLembar: data.hargaLembar,
+        totalLembar: totalLembar,
+        sisaLembar: totalLembar,
+        roi: data.roi,
+        masterPembagianDevidenId: data.masterPembagianDevidenId,
+        masterPeriodeDevidenId: data.masterPeriodeDevidenId,
+        masterPencarianInvestorId: data.masterPencarianInvestorId,
+        imageId: imageId,
+      },
+    });
+
+    if (!updtWithImage) return { status: 400, message: "Gagal update data" };
+    revalidatePath(NEW_RouterInvestasi.detail_draft);
+    return { status: 200, message: "Berhasil update" };
+  } else {
+    const updtNoImage = await prisma.investasi.update({
+      where: {
+        id: data.id,
+      },
+      data: {
+        title: _.startCase(data.title),
+        targetDana: data.targetDana,
+        hargaLembar: data.hargaLembar,
+        totalLembar: totalLembar,
+        sisaLembar: totalLembar,
+        roi: data.roi,
+        masterPembagianDevidenId: data.masterPembagianDevidenId,
+        masterPeriodeDevidenId: data.masterPeriodeDevidenId,
+        masterPencarianInvestorId: data.masterPencarianInvestorId,
+        imageId: imageId,
+      },
+    });
+
+    if (!updtNoImage) return { status: 400, message: "Gagal update data" };
+    revalidatePath(NEW_RouterInvestasi.detail_draft);
+    return { status: 200, message: "Berhasil update" };
+  }
+}

src/app_modules/investasi/_fun/edit/fun_edit_prospektus.tsx

@@ -0,0 +1,29 @@
+"use server";
+
+import { prisma } from "@/app/lib";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { revalidatePath } from "next/cache";
+
+export async function investasi_funUpdateProspektus({
+  investasiId,
+  fileId,
+}: {
+  investasiId: string;
+  fileId: string;
+}) {
+  const updte = await prisma.investasi.update({
+    where: {
+      id: investasiId,
+    },
+    data: {
+      prospektusFileId: fileId,
+    },
+  });
+
+  if (!updte) return { status: 400, message: "Gagal update prospektus" };
+  revalidatePath(NEW_RouterInvestasi.detail_draft);
+  return {
+    status: 200,
+    message: "Berhasil update prospektus",
+  };
+}

src/app_modules/investasi/_fun/get/fun_get_all_document_by_id.tsx

@@ -0,0 +1,28 @@
+"use server";
+
+import { prisma } from "@/app/lib";
+
+export async function investasi_funGetAllDocumentById({
+  investasiId,
+  page,
+}: {
+  investasiId: string;
+  page: number
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.dokumenInvestasi.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      investasiId: investasiId,
+      active: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/investasi/_fun/get/fun_get_one_document_by_id.tsx

@@ -0,0 +1,13 @@
+"use server"
+
+import { prisma } from "@/app/lib"
+
+export async function investasi_funGetOneDocumentById({ documentId }: { documentId: string }) {
+    const data = await prisma.dokumenInvestasi.findFirst({
+        where: {
+            id: documentId
+        }
+    })
+
+    return data
+}

src/app_modules/investasi/_fun/get/fun_get_one_investasi_by_id.ts

@@ -24,6 +24,7 @@ export async function investasi_funGetOneInvestasiById({
       MasterPencarianInvestor: true,
       MasterPeriodeDeviden: true,
       MasterProgresInvestasi: true,
+      
     },
   });
 

src/app_modules/investasi/_fun/get/fun_get_portofolio_by_status_id.ts

@@ -0,0 +1,34 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+
+export async function investasi_funGetPortofolioByStatusId({
+  page,
+  statusId,
+}: {
+  page: number;
+  statusId: string;
+}) {
+  const userLoginId = await funGetUserIdByToken();
+
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.investasi.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      authorId: userLoginId,
+      masterStatusInvestasiId: statusId,
+    },
+    include: {
+      MasterPencarianInvestor: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/investasi/_fun/index.ts

@@ -5,6 +5,19 @@ import { investasi_funUploadBuktiTransferById } from "./upload/fun_upload_bukti_
 import { investasi_funGetSuccessTransactionById } from "./get/fun_get_success_transaction_by_id";
 import { investasi_funGetAllPublishByUserId } from "./get/fun_get_all_investasi_by_user_id";
 import { investasi_funGetAllInvestasiNonPublishByUserId } from "./get/fun_get_all_investasi_non_publish_by_user_id";
+import { investasi_funCreateNewInvestasi } from "./create/fun_create_new_investasi";
+import { investasi_funGetPortofolioByStatusId } from "./get/fun_get_portofolio_by_status_id";
+import { investasi_funUpdateInvestasi } from "./edit/fun_edit_investasi";
+import { investasi_funUpdateProspektus } from "./edit/fun_edit_prospektus";
+import { investasi_funGetAllDocumentById } from "./get/fun_get_all_document_by_id";
+import { investasi_funCreateDocument } from "./create/fun_create_document";
+import { investasi_funGetOneDocumentById } from "./get/fun_get_one_document_by_id";
+import { investasi_funUpdateDocument } from "./edit/fun_edit_document";
+import { investasi_funDeleteDokumenById } from "./delete/fun_delete_dokumen";
+
+// Create
+export { investasi_funCreateNewInvestasi };
+export { investasi_funCreateDocument };
 
 // Get
 export { investasi_funGetOneInvestasiById };
@@ -13,6 +26,17 @@ export { investasi_funGetTransaksiByUserId };
 export { investasi_funGetSuccessTransactionById };
 export { investasi_funGetAllPublishByUserId };
 export { investasi_funGetAllInvestasiNonPublishByUserId };
+export { investasi_funGetPortofolioByStatusId };
+export { investasi_funGetAllDocumentById };
+export { investasi_funGetOneDocumentById };
+
+// Update
+export { investasi_funUpdateInvestasi };
+export { investasi_funUpdateProspektus };
+export { investasi_funUpdateDocument };
 
 // Upload
 export { investasi_funUploadBuktiTransferById };
+
+// Delete
+export { investasi_funDeleteDokumenById };

src/app_modules/investasi/_fun/upload/fun_upload_bukti_transfer.tsx

@@ -7,38 +7,17 @@ import fs from "fs";
 
 export async function investasi_funUploadBuktiTransferById({
   invoiceId,
-  file,
+  fileId,
 }: {
   invoiceId: string;
-  file: FormData;
+  fileId: string;
 }) {
-  // console.log(file);
-  const gambar: any = file.get("file");
-  const fileName = gambar.name;
-  const fileExtension = _.lowerCase(gambar.name.split(".").pop());
-  const fileRandomName = v4(fileName) + "." + fileExtension;
-
-  const upload = await prisma.images.create({
-    data: {
-      url: fileRandomName,
-      label: "INVESTASI_INVOICE",
-    },
-    select: {
-      id: true,
-      url: true,
-    },
-  });
-
-  if (!upload) return { status: 400, message: "Gagal upload gambar" };
-  const uploadFolder = Buffer.from(await gambar.arrayBuffer());
-  fs.writeFileSync(`./public/investasi/invoice/${upload.url}`, uploadFolder);
-
   const updateFile = await prisma.investasi_Invoice.update({
     where: {
       id: invoiceId,
     },
     data: {
-      imagesId: upload.id,
+      imageId: fileId,
       statusInvoiceId: "2",
     },
   });

src/app_modules/investasi/_lib/interface.ts

@@ -19,7 +19,7 @@ export interface MODEL_INVESTASI {
   progress: string;
   MasterStatusInvestasi: MODEL_Status_investasi;
   BeritaInvestasi: Model_Berita_Investasi[];
-  DokumenInvestasi: Model_Dokumen_Investasi[];
+  DokumenInvestasi: MODEL_INVESTASI_DOKUMEN[];
   ProspektusInvestasi: MODEl_PROSPEKTUS_INVESTASI;
   MasterPembagianDeviden: Model_All_Master;
   MasterPencarianInvestor: Model_All_Master;
@@ -32,6 +32,8 @@ export interface MODEL_INVESTASI {
   author: MODEL_PROFILE_OLD;
   countDown: Date;
   Investasi_Invoice: MODEL_INVOICE_INVESTASI[];
+  imageId: string;
+  prospektusFileId: string;
 }
 
 export interface MODEL_Transaksi_Investasi {
@@ -88,7 +90,7 @@ export interface MODEl_PROSPEKTUS_INVESTASI {
   investasiId: string;
 }
 
-export interface Model_Dokumen_Investasi {
+export interface MODEL_INVESTASI_DOKUMEN {
   id: string;
   title: string;
   url: string;
@@ -96,6 +98,7 @@ export interface Model_Dokumen_Investasi {
   createdAt: Date;
   updatedAt: Date;
   investasiId: string;
+  fileId: string;
 }
 
 export interface MODEL_MASTER_BANK {
@@ -134,6 +137,7 @@ export interface MODEL_INVOICE_INVESTASI {
   MasterBank: MODEL_MASTER_BANK;
   StatusInvoice: MODEL_STATUS_INVOICE_INVESTASI;
   Investor: any[];
+  imageId: string
 }
 
 export interface MODEL_STATUS_INVOICE_INVESTASI {

src/app_modules/investasi/_ui/create/ui_create_document.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from "@/app_modules/_global/ui"
+import { Investasi_ViewCreateDocument } from "../../_view";
+
+export function Investasi_UiCreateDocument({ investasiId }: { investasiId : string}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Dokumen" />}
+      >
+        <Investasi_ViewCreateDocument investasiId={investasiId}/>
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/investasi/_ui/detail/ui_daftar_dokumen.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import {
+  UIGlobal_LayoutHeaderTamplate,
+  UIGlobal_LayoutTamplate,
+} from "@/app_modules/_global/ui";
+import { Investasi_ViewDaftarDokumen } from "../../_view";
+
+export function Investasi_UiDaftarDokmen({
+  dataDokumen,
+  investasiId,
+}: {
+  dataDokumen: any[];
+  investasiId: string
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Daftar Dokumen" />}
+      >
+        <Investasi_ViewDaftarDokumen
+          dataDokumen={dataDokumen}
+          investasiId={investasiId}
+        />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/investasi/_ui/detail/ui_detail_portofolio.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  UIGlobal_Drawer,
+  UIGlobal_LayoutHeaderTamplate,
+  UIGlobal_LayoutTamplate,
+} from "@/app_modules/_global/ui";
+import { ActionIcon } from "@mantine/core";
+import {
+  IconCategoryPlus,
+  IconDotsVertical,
+  IconEdit,
+  IconFilePencil,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { MODEL_INVESTASI } from "../../_lib/interface";
+import {
+  Investasi_ViewDetailDraft,
+  Investasi_ViewDetailPublish,
+  Investasi_ViewDetailReject,
+  Investasi_ViewDetailReview,
+} from "../../_view";
+
+export function Investasi_UiDetailPortofolio({
+  data,
+}: {
+  data: MODEL_INVESTASI;
+}) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const listPage = [
+    {
+      id: "1",
+      name: "Edit Investasi",
+      icon: <IconEdit />,
+      path: NEW_RouterInvestasi.edit_investasi({ id: data.id }),
+    },
+    {
+      id: "2",
+      name: "Edit Prospektus",
+      icon: <IconFilePencil />,
+      path: NEW_RouterInvestasi.edit_prospektus({ id: data.id }),
+    },
+    {
+      id: "3",
+      name: "Tambah & Edit Dokumen",
+      icon: <IconCategoryPlus />,
+      path: NEW_RouterInvestasi.rekap_dokumen({ id: data.id }),
+    },
+  ];
+
+  if (data.masterStatusInvestasiId == "3")
+    return (
+      <>
+        <UIGlobal_LayoutTamplate
+          header={
+            <UIGlobal_LayoutHeaderTamplate
+              title={`Detail Draft`}
+              customButtonRight={
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => setOpenDrawer(true)}
+                >
+                  <IconDotsVertical color="white" />
+                </ActionIcon>
+              }
+            />
+          }
+        >
+          <Investasi_ViewDetailDraft dataInvestasi={data} />
+        </UIGlobal_LayoutTamplate>
+
+        <UIGlobal_Drawer
+          opened={openDrawer}
+          close={() => setOpenDrawer(false)}
+          component={listPage}
+        />
+      </>
+    );
+
+  return (
+    <UIGlobal_LayoutTamplate
+      header={
+        <UIGlobal_LayoutHeaderTamplate
+          title={`Detail ${data.MasterStatusInvestasi.name}`}
+        />
+      }
+    >
+      {data.masterStatusInvestasiId === "1" && (
+        <Investasi_ViewDetailPublish dataInvestasi={data} />
+      )}
+
+      {data.masterStatusInvestasiId === "2" && (
+        <Investasi_ViewDetailReview dataInvestasi={data} />
+      )}
+
+      {data.masterStatusInvestasiId === "4" && (
+        <Investasi_ViewDetailReject dataInvestasi={data} />
+      )}
+    </UIGlobal_LayoutTamplate>
+  );
+}

src/app_modules/investasi/_ui/detail/ui_detail_prospektus.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import {
+  UIGlobal_LayoutHeaderTamplate,
+  UIGlobal_LayoutTamplate,
+} from "@/app_modules/_global/ui";
+import { Investasi_ViewDetailProspektus } from "../../_view";
+
+export function Investasi_UiDetailProspektus({
+  dataInvestasi,
+}: {
+  dataInvestasi: any;
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Prospektus" />}
+      >
+        <Investasi_ViewDetailProspektus dataInvestasi={dataInvestasi} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/investasi/_ui/detail/ui_rekap_dokumen.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  UIGlobal_Drawer,
+  UIGlobal_LayoutHeaderTamplate,
+  UIGlobal_LayoutTamplate,
+} from "@/app_modules/_global/ui";
+import { ActionIcon } from "@mantine/core";
+import { IconCirclePlus, IconDotsVertical } from "@tabler/icons-react";
+import { useState } from "react";
+import { Investasi_ViewRekapDokumen } from "../../_view";
+
+export function Investasi_UiRekapDokumen({
+  investasiId,
+  dataDokumen,
+}: {
+  investasiId: string;
+  dataDokumen: any[]
+}) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const listPage = [
+    {
+      id: "1",
+      name: "Tambah Dokumen",
+      icon: <IconCirclePlus />,
+      path: NEW_RouterInvestasi.create_dokumen({ id: investasiId }),
+    },
+  ];
+
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Rekap Dokumen"
+            customButtonRight={
+              <ActionIcon
+                onClick={() => setOpenDrawer(true)}
+                variant="transparent"
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
+        }
+      >
+        <Investasi_ViewRekapDokumen
+          dataDokumen={dataDokumen}
+          investasiId={investasiId}
+        />
+      </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+"use client";
+
+import {
+  UIGlobal_LayoutHeaderTamplate,
+  UIGlobal_LayoutTamplate,
+} from "@/app_modules/_global/ui";
+import { Investasi_ViewEditDokumen } from "../../_view";
+
+export function Investasi_UiEditDokumen({ dataDokumen }: { dataDokumen: any }) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Dokumen" />}
+      >
+        <Investasi_ViewEditDokumen dataDokumen={dataDokumen} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

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

@@ -0,0 +1,34 @@
+"use client";
+
+import {
+  UIGlobal_LayoutHeaderTamplate,
+  UIGlobal_LayoutTamplate,
+} from "@/app_modules/_global/ui";
+import { Investasi_ViewEditInvestasi } from "../../_view";
+
+export function Investasi_UiEditInvestasi({
+  dataInvestasi,
+  pembagianDeviden,
+  pencarianInvestor,
+  periodeDeviden,
+}: {
+  dataInvestasi: any;
+  pembagianDeviden: any[];
+  pencarianInvestor: any[];
+  periodeDeviden: any[];
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Investasi" />}
+      >
+        <Investasi_ViewEditInvestasi
+          dataInvestasi={dataInvestasi}
+          pembagianDeviden={pembagianDeviden}
+          pencarianInvestor={pencarianInvestor}
+          periodeDeviden={periodeDeviden}
+        />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

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

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

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

@@ -1,8 +1,9 @@
 "use client";
 
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { APIs } from "@/app/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 { IconX } from "@tabler/icons-react";
 import dynamic from "next/dynamic";
 const PdfToImage = dynamic(
@@ -19,12 +20,11 @@ export function Investasi_UiFileViewDokumen({
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="" iconLeft={<IconX/>} />}
+        header={<UIGlobal_LayoutHeaderTamplate title="" iconLeft={<IconX />} />}
       >
-        <PdfToImage
-          id={dokumenId}
-          path={RouterInvestasi_OLD.api_file_dokumen}
-        />
+        <Box mb={"lg"}>
+          <PdfToImage id={dokumenId} path={APIs.GET_NO_PARAMS} />
+        </Box>
       </UIGlobal_LayoutTamplate>
     </>
   );

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

@@ -1,8 +1,10 @@
 "use client";
 
+import { APIs } from "@/app/lib";
 import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
 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 { IconX } from "@tabler/icons-react";
 import dynamic from "next/dynamic";
 const PdfToImage = dynamic(
@@ -12,19 +14,21 @@ const PdfToImage = dynamic(
 );
 
 export function Investasi_UiFileViewProspektus({
-  prospekId,
+  pospektusId,
 }: {
-  prospekId: string;
+  pospektusId: string;
 }) {
   return (
     <>
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="" iconLeft={<IconX />} />}
       >
-        <PdfToImage
-          id={prospekId}
-          path={RouterInvestasi_OLD.api_file_prospektus}
-        />
+        <Box mb={"lg"}>
+          <PdfToImage
+            id={pospektusId}
+            path={APIs.GET_NO_PARAMS}
+          />
+        </Box>
       </UIGlobal_LayoutTamplate>
     </>
   );

src/app_modules/investasi/_ui/index.ts

@@ -11,6 +11,14 @@ import { Investasi_UiFileViewDokumen } from "./file_view/ui_file_view_dokumen";
 import { Investasi_UiSahamSaya } from "./main/ui_saham_saya";
 import { Investasi_UiDetailSahamSaya } from "./detail/ui_detail_saham_saya";
 import { Investasi_UiPortofolio } from "./main/ui_portofolio";
+import { Investasi_UiDetailPortofolio } from "./detail/ui_detail_portofolio";
+import { Investasi_UiDetailProspektus } from "./detail/ui_detail_prospektus";
+import { Investasi_UiDaftarDokmen } from "./detail/ui_daftar_dokumen";
+import { Investasi_UiEditDokumen } from "./edit/ui_edit_dokumen";
+import { Investasi_UiEditInvestasi } from "./edit/ui_edit_investasi";
+import { Investasi_UiEditProspektus } from "./edit/ui_edit_prospektus";
+import { Investasi_UiCreateDocument } from "./create/ui_create_document";
+import { Investasi_UiRekapDokumen } from "./detail/ui_rekap_dokumen";
 
 export { Investasi_UiProsesPembelian };
 export { Investasi_UiMetodePembayaran };
@@ -25,3 +33,11 @@ export { Investasi_UiFileViewDokumen };
 export { Investasi_UiSahamSaya };
 export { Investasi_UiDetailSahamSaya };
 export { Investasi_UiPortofolio };
+export { Investasi_UiDetailPortofolio };
+export { Investasi_UiDetailProspektus };
+export { Investasi_UiDaftarDokmen };
+export { Investasi_UiEditDokumen };
+export { Investasi_UiEditInvestasi };
+export { Investasi_UiEditProspektus };
+export { Investasi_UiCreateDocument };
+export { Investasi_UiRekapDokumen };

src/app_modules/investasi/_ui/main/ui_layout_main.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
-import React from "react";
-import { gs_investas_menu } from "../../g_state";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
 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 { Investasi_ComponentFooterMain } from "../../_component";
 
 export function Investasi_UiLayoutMain({

src/app_modules/investasi/_ui/main/ui_portofolio.tsx

@@ -1,28 +1,70 @@
 "use client";
 
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
+import { Stack, Tabs } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { Investasi_ViewPortofolio } from "../../_view";
 export function Investasi_UiPortofolio({
   listStatus,
-  listDataPublish,
-  listDataReview,
-  listDataDraft,
-  listDataReject,
+  statusId,
+  dataPortofolio,
 }: {
-  listStatus: any[];
-  listDataPublish: any[];
-  listDataReview: any[];
-  listDataDraft: any[];
-  listDataReject: any[];
+  listStatus: MODEL_NEW_DEFAULT_MASTER[];
+  statusId: string;
+  dataPortofolio: any[];
 }) {
+  const [activeTab, setActiveTab] = useState<string | null>(statusId);
+  const router = useRouter();
+  const [data, setData] = useState(dataPortofolio);
+
   return (
     <>
-      <Investasi_ViewPortofolio
-        listStatus={listStatus}
-        listDataPublish={listDataPublish}
-        listDataReview={listDataReview}
-        listDataDraft={listDataDraft}
-        listDataReject={listDataReject}
-      />
+      <Tabs
+        variant="pills"
+        radius="xl"
+        defaultValue={activeTab}
+        styles={{
+          tabsList: {
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          },
+        }}
+        value={activeTab}
+        onTabChange={(val: any) => {
+          setActiveTab(val);
+          router.push(NEW_RouterInvestasi.portofolio({ id: val }));
+        }}
+      >
+        <Stack>
+          <Tabs.List grow mb={"xs"}>
+            {listStatus.map((e) => (
+              <Tabs.Tab
+                w={"20%"}
+                key={e.id}
+                value={e.id}
+                fw={"bold"}
+                style={{
+                  transition: "ease 0.5s ",
+                  backgroundColor:
+                    activeTab === e.id ? MainColor.yellow : AccentColor.blue,
+                  color: activeTab === e.id ? "black" : "white",
+                }}
+              >
+                {e.name}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+
+          <Investasi_ViewPortofolio
+            statusId={statusId}
+            dataPortofolio={data as any}
+          />
+        </Stack>
+      </Tabs>
     </>
   );
 }

src/app_modules/investasi/_view/create/view_create_document.tsx

@@ -0,0 +1,159 @@
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import {
+  Stack,
+  Grid,
+  Center,
+  Group,
+  FileButton,
+  Button,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconCircleCheck, IconCamera } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { investasi_funCreateDocument } from "../../_fun";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { DIRECTORY_ID } from "@/app/lib";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+
+export function Investasi_ViewCreateDocument({
+  investasiId,
+}: {
+  investasiId: string;
+}) {
+  const router = useRouter();
+  const [filePdf, setFilePdf] = useState<File | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [title, setTitle] = useState("");
+
+  async function onCreate() {
+    setIsLoading(true);
+    const uploadFileDokumen = await funGlobal_UploadToStorage({
+      file: filePdf as any,
+      dirId: DIRECTORY_ID.investasi_dokumen,
+    });
+    if (!uploadFileDokumen.success) {
+      setIsLoading(false);
+      ComponentGlobal_NotifikasiPeringatan("Gagal upload file pdf");
+    }
+
+    try {
+      const create = await investasi_funCreateDocument({
+        data: {
+          investasiId: investasiId,
+          fileId: uploadFileDokumen.data.id,
+          title: title,
+        },
+      });
+
+      if (create.status !== 201)
+        ComponentGlobal_NotifikasiPeringatan(create.message);
+
+      router.back();
+      ComponentGlobal_NotifikasiBerhasil(create.message);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <>
+      <Stack spacing={"xl"}>
+        <ComponentGlobal_BoxInformation informasi="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya disini !" />
+
+        <Stack>
+          <TextInput
+            label="Judul Dokumen"
+            placeholder="Masukan judul dokumen"
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            onChange={(val) => setTitle(val.currentTarget.value)}
+          />
+          <ComponentGlobal_CardStyles marginBottom={"0px"}>
+            {!filePdf ? (
+              <Text lineClamp={1} align="center" c={"gray"}>
+                Upload Dokumen
+              </Text>
+            ) : (
+              <Grid align="center">
+                <Grid.Col span={2}></Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Text lineClamp={1} align="center" color="white">
+                    {filePdf.name}
+                  </Text>
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Center>
+                    <IconCircleCheck color="green" />
+                  </Center>
+                </Grid.Col>
+              </Grid>
+            )}
+          </ComponentGlobal_CardStyles>
+
+          <Group position="center">
+            <FileButton
+              accept={"application/pdf"}
+              onChange={async (files: any) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+
+                  setFilePdf(files);
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+            >
+              {(props) => (
+                <Button
+                  leftIcon={<IconCamera />}
+                  {...props}
+                  radius={"xl"}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
+                >
+                  Upload Dokumen
+                </Button>
+              )}
+            </FileButton>
+          </Group>
+        </Stack>
+
+        <Button
+          loaderPosition="center"
+          loading={isLoading}
+          disabled={filePdf === null || title === ""}
+          mt={50}
+          radius={50}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+          style={{
+            transition: "0.5s",
+          }}
+          onClick={() => {
+            onCreate();
+          }}
+        >
+          Simpan
+        </Button>
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/_view/detail/portofolio/view_detai_publish.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import {
+  ActionIcon,
+  AspectRatio,
+  Box,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Progress,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
+  IconBookDownload,
+  IconCircleCheck,
+  IconFileDescription,
+  IconSpeakerphone,
+} from "@tabler/icons-react";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function Investasi_ViewDetailPublish({
+  dataInvestasi,
+}: {
+  dataInvestasi: MODEL_INVESTASI;
+}) {
+  const router = useRouter();
+  const [investasi, setInvestasi] = useState(dataInvestasi);
+
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} color="white" />,
+      route: RouterInvestasi_OLD.detail_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} color="white" />,
+      route: RouterInvestasi_OLD.edit_dokumen,
+    },
+    {
+      id: 3,
+      name: "Berita",
+      icon: <IconSpeakerphone size={70} color="white" />,
+      route: RouterInvestasi_OLD.list_edit_berita,
+    },
+  ];
+
+  return (
+    <Stack
+      style={{
+        paddingInline: "15px",
+        paddingBlock: "15px",
+        backgroundColor: AccentColor.darkblue,
+        border: `2px solid ${AccentColor.blue}`,
+        borderRadius: "10px",
+        color: "white",
+        marginBottom: "15px",
+      }}
+    >
+      {Number(investasi.MasterPencarianInvestor.name) -
+        moment(new Date()).diff(new Date(investasi.countDown), "days") <=
+      0 ? (
+        <Group
+          position="center"
+          mb={"sm"}
+          style={{
+            color: "white",
+          }}
+        >
+          <IconCircleCheck color="green" />
+          <Text c={"green"}>Selesai</Text>
+        </Group>
+      ) : (
+        <Group
+          mb={"sm"}
+          position="center"
+          style={{
+            color: "white",
+          }}
+        >
+          <Text>
+            Sisa waktu :{" "}
+            {Number(investasi.MasterPencarianInvestor.name) -
+              moment(new Date()).diff(
+                new Date(investasi.countDown),
+                "days"
+              )}{" "}
+            hari
+          </Text>
+        </Group>
+      )}
+
+      <AspectRatio ratio={1 / 1} mx={"sm"} mah={250}>
+        <Image
+          alt=""
+          src={RouterInvestasi_OLD.api_gambar + `${investasi.imagesId}`}
+          radius={"sm"}
+          height={250}
+          width={"100%"}
+        />
+      </AspectRatio>
+
+      {/* Title dan Persentase */}
+      <Box mb={"md"}>
+        <Title align="center" order={3} mb={"xs"}>
+          {investasi.title}
+        </Title>
+        <Progress
+          label={
+            "" +
+            (
+              ((+investasi.totalLembar - +investasi.sisaLembar) /
+                +investasi.totalLembar) *
+              100
+            ).toFixed(1) +
+            "%"
+          }
+          value={
+            +(
+              ((+investasi.totalLembar - +investasi.sisaLembar) /
+                +investasi.totalLembar) *
+              100
+            ).toFixed(1)
+          }
+          color="teal"
+          size="xl"
+          radius="xl"
+        />
+      </Box>
+
+      {/* Rincian Data */}
+      <Grid p={"md"} mb={"md"}>
+        <Grid.Col span={6}>
+          <Stack>
+            <Box>
+              <Text>Dana Dibutuhkan</Text>
+              <Text>
+                Rp.{" "}
+                {new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+investasi.targetDana)}
+              </Text>
+            </Box>
+            <Box>
+              <Text>Harga Per Lembar</Text>
+              <Text>
+                Rp.{" "}
+                {new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+investasi.hargaLembar)}
+              </Text>
+            </Box>
+            <Box>
+              <Text>Jadwal Pembagian</Text>
+              <Text>{investasi.MasterPembagianDeviden.name} bulan </Text>
+            </Box>
+            <Box>
+              <Text>Pembagian Deviden</Text>
+              <Text>{investasi.MasterPeriodeDeviden.name}</Text>
+            </Box>
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <Stack>
+            <Box>
+              <Text>ROI</Text>
+              <Text>{investasi.roi}%</Text>
+            </Box>
+            <Box>
+              <Text>Total Lembar</Text>
+              <Text>
+                {new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+investasi.totalLembar)}{" "}
+                lembar
+              </Text>
+            </Box>
+            <Box>
+              <Text>Sisa Lembar</Text>
+              <Text>
+                {new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+investasi.sisaLembar)}{" "}
+                lembar
+              </Text>
+            </Box>
+          </Stack>
+        </Grid.Col>
+      </Grid>
+
+      {/* List Box */}
+      <Group position="apart" px={"lg"}>
+        {listBox.map((e, i) => (
+          <Paper
+            key={i}
+            style={{
+              padding: "15px",
+              backgroundColor: AccentColor.blue,
+              border: `2px solid ${AccentColor.softblue}`,
+              borderRadius: "10px",
+              color: "white",
+            }}
+          >
+            <Flex direction={"column"} align={"center"} justify={"center"}>
+              <Text fz={12}>{e.name}</Text>
+              <ActionIcon
+                radius={"xl"}
+                // loading={isLoadingBox && e?.id === boxId ? true : false}
+                variant="transparent"
+                size={60}
+                onClick={() => router.push(e.route + `${investasi.id}`)}
+              >
+                {e.icon}
+              </ActionIcon>
+            </Flex>
+          </Paper>
+        ))}
+      </Group>
+    </Stack>
+  );
+}

src/app_modules/investasi/_view/detail/portofolio/view_detail_draft.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import {
+  NEW_RouterInvestasi,
+  RouterInvestasi_OLD,
+} from "@/app/lib/router_hipmi/router_investasi";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { Investasi_ComponentDetailDataNonPublish } from "@/app_modules/investasi/_component";
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import { ComponentInvestasi_DetailDataNonPublish } from "@/app_modules/investasi/component/detail/x_detai_data_non_publish";
+import { investasi_funEditStatusById } from "@/app_modules/investasi/fun/edit/fun_edit_status_by_id";
+import { gs_investasi_status } from "@/app_modules/investasi/g_state";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import mqtt_client from "@/util/mqtt_client";
+import { Button, Stack } from "@mantine/core";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function Investasi_ViewDetailDraft({
+  dataInvestasi,
+}: {
+  dataInvestasi: MODEL_INVESTASI;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [activeTab, setActiveTab] = useAtom(gs_investasi_status);
+
+  async function onAjukanReview() {
+    const res = await investasi_funEditStatusById({
+      investasiId: dataInvestasi.id,
+      statusId: "2",
+    });
+
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.id,
+        userId: res.data?.authorId,
+        pesan: res.data?.title,
+        status: res.data?.MasterStatusInvestasi?.name,
+        kategoriApp: "INVESTASI",
+        title: "Mengajukan review",
+      };
+
+      const notif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+
+        setIsLoading(true);
+        ComponentGlobal_NotifikasiBerhasil("Review Berhasil Diajukan");
+        router.push(NEW_RouterInvestasi.portofolio({ id: dataInvestasi.id }));
+        setActiveTab("Review");
+      }
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
+  }
+
+  return (
+    <>
+      <Stack mb={"lg"}>
+        {dataInvestasi.catatan && (
+          <ComponentGlobal_BoxInformation
+            informasi={dataInvestasi.catatan}
+            isReport
+          />
+        )}
+        <Investasi_ComponentDetailDataNonPublish data={dataInvestasi} />
+
+        <Stack>
+          <Button
+            loaderPosition="center"
+            loading={isLoading}
+            radius={50}
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
+            onClick={() => onAjukanReview()}
+          >
+            Ajukan Review
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/_view/detail/portofolio/view_detail_reject.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import {
+  NEW_RouterInvestasi,
+  RouterInvestasi_OLD,
+} from "@/app/lib/router_hipmi/router_investasi";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import { Investasi_ComponentDetailDataNonPublish } from "@/app_modules/investasi/_component";
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import { ComponentInvestasi_DetailDataNonPublish } from "@/app_modules/investasi/component/detail/x_detai_data_non_publish";
+import { investasi_funEditStatusById } from "@/app_modules/investasi/fun/edit/fun_edit_status_by_id";
+import funDeleteInvestasi from "@/app_modules/investasi/fun/fun_delete_investasi";
+import { gs_investasi_status } from "@/app_modules/investasi/g_state";
+import { Button, Group, Stack } from "@mantine/core";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function Investasi_ViewDetailReject({
+  dataInvestasi,
+}: {
+  dataInvestasi: MODEL_INVESTASI;
+}) {
+  const router = useRouter();
+  const [investasi, setInvestasi] = useState(dataInvestasi);
+  const [activeTab, setActiveTab] = useAtom(gs_investasi_status);
+  const [openModal, setOpenModal] = useState(false);
+
+  async function onAjukan() {
+    const res = await investasi_funEditStatusById({
+      investasiId: dataInvestasi.id,
+      statusId: "3",
+    });
+
+    if (res.status === 200) {
+      ComponentGlobal_NotifikasiBerhasil("Project Diajukan Kembali");
+      setActiveTab("Draft");
+      router.push(RouterInvestasi_OLD.portofolio);
+    } else {
+      ComponentGlobal_NotifikasiGagal("Gagal Pengajuan");
+    }
+  }
+
+  async function onDelete() {
+    await funDeleteInvestasi(investasi.id).then((res) => {
+      if (res.status === 200) {
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        setOpenModal(false);
+        router.push(NEW_RouterInvestasi.portofolio({ id: dataInvestasi.id }));
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    });
+    // setActiveTab("Reject");
+  }
+
+  return (
+    <>
+      {/* Pop up */}
+      <UIGlobal_Modal
+        title={"Anda Yakin Menghapus Data?"}
+        opened={openModal}
+        close={() => setOpenModal(false)}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button bg={"red"} radius={"xl"} onClick={() => onDelete()}>
+            Hapus
+          </Button>
+        }
+      />
+
+      <Stack>
+        {/* Alasan */}
+        <ComponentGlobal_BoxInformation
+          informasi={investasi.catatan}
+          isReport
+        />
+
+        <Investasi_ComponentDetailDataNonPublish data={dataInvestasi} />
+
+        <Group position="apart" grow>
+          {/* Tombol Ajukan */}
+          <Button
+            mb={"xl"}
+            radius={50}
+            bg={"orange.7"}
+            color="yellow"
+            onClick={() => onAjukan()}
+          >
+            Edit Kembali
+          </Button>
+
+          {/* Tombol Hapus */}
+          <Button
+            mb={"xl"}
+            radius={50}
+            bg={"red.7"}
+            color="yellow"
+            onClick={() => setOpenModal(true)}
+          >
+            Hapus
+          </Button>
+        </Group>
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/_view/detail/portofolio/view_detail_review.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { NEW_RouterInvestasi, RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { Investasi_ComponentDetailDataNonPublish } from "@/app_modules/investasi/_component";
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import { investasi_funEditStatusById } from "@/app_modules/investasi/fun/edit/fun_edit_status_by_id";
+import { gs_investasi_status } from "@/app_modules/investasi/g_state";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import mqtt_client from "@/util/mqtt_client";
+import { Button, Stack } from "@mantine/core";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+
+export default function Investasi_ViewDetailReview({
+  dataInvestasi,
+}: {
+  dataInvestasi: MODEL_INVESTASI;
+}) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  const [activeTab, setActiveTab] = useAtom(gs_investasi_status);
+  const [data, setData] = useState<MODEL_INVESTASI>(dataInvestasi);
+
+  async function onCancleReview() {
+    const res = await investasi_funEditStatusById({
+      investasiId: data.id,
+      statusId: "3",
+    });
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.id,
+        userId: res.data?.authorId,
+        pesan: res.data?.title,
+        status: res.data?.MasterStatusInvestasi?.name,
+        kategoriApp: "INVESTASI",
+        title: "Membatalkan review",
+      };
+
+      const notif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+
+        setLoading(true);
+        ComponentGlobal_NotifikasiBerhasil("Review Dibatalkan");
+        setActiveTab("Draft");
+        router.push(NEW_RouterInvestasi.portofolio({id: data.id}));
+      }
+    } else {
+      ComponentGlobal_NotifikasiPeringatan(res.message);
+    }
+  }
+
+  return (
+    <>
+      <Stack spacing={"xl"}>
+        <Investasi_ComponentDetailDataNonPublish data={data} />
+        {/* Tombol Ajukan */}
+        <Stack>
+          <Button
+            mb={"xl"}
+            style={{
+              transition: "0.5s",
+            }}
+            loaderPosition="center"
+            loading={isLoading ? true : false}
+            radius={50}
+            bg={"orange"}
+            color="yellow"
+            onClick={() => onCancleReview()}
+          >
+            Batalkan Review
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { ComponentGlobal_BoxInformation } from "@/app_modules/_global/component";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Box, Center, Stack } from "@mantine/core";
+import { data } from "autoprefixer";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { investasi_funGetAllDocumentById } from "../../_fun";
+import { useState } from "react";
+import { MODEL_INVESTASI_DOKUMEN } from "../../_lib/interface";
+import { Investasi_ComponentCardDaftarDocument } from "../../_component";
+
+export function Investasi_ViewDaftarDokumen({
+  dataDokumen,
+  investasiId,
+}: {
+  dataDokumen: any[];
+  investasiId: string;
+}) {
+  const [data, setData] = useState<MODEL_INVESTASI_DOKUMEN[]>(dataDokumen);
+  const [activePage, setActivePage] = useState(1);
+
+  return (
+    <>
+      <Stack>
+        <>
+          {_.isEmpty(data) ? (
+            <ComponentGlobal_IsEmptyData />
+          ) : (
+            <Box>
+              <ScrollOnly
+                height="90vh"
+                renderLoading={() => (
+                  <Center>
+                    <ComponentGlobal_Loader size={25} />
+                  </Center>
+                )}
+                data={data}
+                setData={setData}
+                moreData={async () => {
+                  const loadData = await investasi_funGetAllDocumentById({
+                    investasiId: investasiId,
+                    page: activePage + 1,
+                  });
+
+                  setActivePage((val) => val + 1);
+
+                  return loadData;
+                }}
+              >
+                {(item) => (
+                  <Investasi_ComponentCardDaftarDocument data={item as any} />
+                )}
+              </ScrollOnly>
+            </Box>
+          )}
+        </>
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { MainColor } from "@/app_modules/_global/color";
+import {
+    ComponentGlobal_CardLoadingOverlay,
+    ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import { Center, Group, Text } from "@mantine/core";
+import { IconFileTypePdf } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_INVESTASI } from "../../_lib/interface";
+
+export function Investasi_ViewDetailProspektus({
+  dataInvestasi,
+}: {
+  dataInvestasi: MODEL_INVESTASI;
+}) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <ComponentGlobal_CardStyles
+        onClickHandler={() => {
+          router.push(
+            NEW_RouterInvestasi.file_prospektus({
+              id: dataInvestasi.prospektusFileId,
+            }),
+            { scroll: false }
+          );
+          setVisible(true);
+        }}
+      >
+        <Group position="apart">
+          <Text w={"80%"} lineClamp={1}>
+            Prospektus {dataInvestasi?.title}
+          </Text>
+          <Center>
+            <IconFileTypePdf style={{ color: MainColor.yellow }} />
+          </Center>
+        </Group>
+        {visible && <ComponentGlobal_CardLoadingOverlay />}
+      </ComponentGlobal_CardStyles>
+    </>
+  );
+}

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

@@ -0,0 +1,60 @@
+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 _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { Investasi_ComponentCardRekapDocument } from "../../_component";
+import { investasi_funGetAllDocumentById } from "../../_fun";
+import { MODEL_INVESTASI_DOKUMEN } from "../../_lib/interface";
+import { useShallowEffect } from "@mantine/hooks";
+
+export function Investasi_ViewRekapDokumen({
+  dataDokumen,
+  investasiId,
+}: {
+  dataDokumen: any[];
+  investasiId: string;
+}) {
+  const [data, setData] = useState<MODEL_INVESTASI_DOKUMEN[]>(dataDokumen);
+  const [activePage, setActivePage] = useState(1);
+
+
+  return (
+    <>
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="90vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await investasi_funGetAllDocumentById({
+                investasiId: investasiId,
+                page: activePage + 1,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <Investasi_ComponentCardRekapDocument
+                data={item}
+                onSetData={(val) => setData(val) as any}
+              />
+            )}
+          </ScrollOnly>
+        </Box>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,180 @@
+import { DIRECTORY_ID } from "@/app/lib";
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_CardStyles
+} from "@/app_modules/_global/component";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import {
+  Button,
+  Center,
+  FileButton,
+  Grid,
+  Group,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconCamera, IconCircleCheck } from "@tabler/icons-react";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { investasi_funUpdateDocument } from "../../_fun";
+import { MODEL_INVESTASI_DOKUMEN } from "../../_lib/interface";
+
+export function Investasi_ViewEditDokumen({
+  dataDokumen,
+}: {
+  dataDokumen: MODEL_INVESTASI_DOKUMEN;
+}) {
+  const router = useRouter();
+  const [filePdf, setFilePdf] = useState<File | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState(dataDokumen);
+  const [title, setTitle] = useState(data.title);
+
+  async function onUpdate() {
+    try {
+      setIsLoading(true);
+      if (filePdf) {
+        const delfile = await funGlobal_DeleteFileById({ fileId: data.fileId });
+
+        if (!delfile.success) {
+          ComponentGlobal_NotifikasiPeringatan("Gagal hapus file lama");
+        }
+
+        const uploadFile = await funGlobal_UploadToStorage({
+          file: filePdf,
+          dirId: DIRECTORY_ID.investasi_dokumen,
+        });
+
+        if (!uploadFile.success) {
+          setIsLoading(false);
+          ComponentGlobal_NotifikasiPeringatan("Gagal upload file dokumen");
+        }
+
+        const updateWithFile = await investasi_funUpdateDocument({
+          data: data,
+          fileId: uploadFile.data.id,
+        });
+
+        if (updateWithFile.status !== 200) {
+          ComponentGlobal_NotifikasiPeringatan(updateWithFile.message);
+        }
+        ComponentGlobal_NotifikasiBerhasil(updateWithFile.message);
+      } else {
+        const updateNoFile = await investasi_funUpdateDocument({
+          data: data,
+        });
+
+        if (updateNoFile.status !== 200) {
+          ComponentGlobal_NotifikasiPeringatan(updateNoFile.message);
+        }
+        ComponentGlobal_NotifikasiBerhasil(updateNoFile.message);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      router.back();
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <>
+      <Stack spacing={"xl"} px={"sm"}>
+        {/* <ComponentGlobal_BoxInformation informasi="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya disini !" /> */}
+
+        <Stack>
+          <TextInput
+            label="Judul Dokumen"
+            placeholder="Masukan judul dokumen"
+            value={data.title}
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            onChange={(val) => setData({ ...data, title: val.target.value })}
+          />
+          <ComponentGlobal_CardStyles marginBottom={"0px"}>
+            {!filePdf ? (
+              <Text lineClamp={1} align="center" c={"gray"}>
+                Dokumen {_.startCase(title)}.pdf
+              </Text>
+            ) : (
+              <Grid align="center">
+                <Grid.Col span={2}></Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Text lineClamp={1} align="center" color="white">
+                    {filePdf.name}
+                  </Text>
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Center>
+                    <IconCircleCheck color="green" />
+                  </Center>
+                </Grid.Col>
+              </Grid>
+            )}
+          </ComponentGlobal_CardStyles>
+
+          <Group position="center">
+            <FileButton
+              accept={"application/pdf"}
+              onChange={async (files: any) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+
+                  setFilePdf(files);
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+            >
+              {(props) => (
+                <Button
+                  leftIcon={<IconCamera />}
+                  {...props}
+                  radius={"xl"}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
+                >
+                  Upload Dokumen
+                </Button>
+              )}
+            </FileButton>
+          </Group>
+        </Stack>
+
+        <Button
+          loaderPosition="center"
+          loading={isLoading}
+          disabled={data.title === ""}
+          mt={50}
+          radius={50}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+          style={{
+            transition: "0.5s",
+          }}
+          onClick={() => {
+            onUpdate();
+          }}
+        >
+          Update
+        </Button>
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,328 @@
+import { APIs, DIRECTORY_ID } from "@/app/lib";
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_LoadImage,
+} from "@/app_modules/_global/component";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/interface";
+import {
+  AspectRatio,
+  Box,
+  Button,
+  FileButton,
+  Group,
+  Image,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconCamera } from "@tabler/icons-react";
+import _ from "lodash";
+import { useState } from "react";
+import { MODEL_INVESTASI } from "../../_lib/interface";
+import { investasi_funUpdateInvestasi } from "../../_fun";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { Investasi_ComponentButtonUpdateDataInvestasi } from "../../_component";
+import { useShallowEffect } from "@mantine/hooks";
+
+export function Investasi_ViewEditInvestasi({
+  dataInvestasi,
+  pencarianInvestor,
+  periodeDeviden,
+  pembagianDeviden,
+}: {
+  dataInvestasi: any;
+  pencarianInvestor: MODEL_DEFAULT_MASTER_OLD[];
+  periodeDeviden: MODEL_DEFAULT_MASTER_OLD[];
+  pembagianDeviden: MODEL_DEFAULT_MASTER_OLD[];
+}) {
+  const [data, setData] = useState<MODEL_INVESTASI>(dataInvestasi);
+  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>(data.totalLembar);
+
+  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"}>
+        <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={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>
+
+        {/* <Stack c={"white"}>
+          <div>{JSON.stringify(data.targetDana)}</div>
+          <div>{JSON.stringify(data.hargaLembar)}</div>
+          <div>{JSON.stringify(data.totalLembar)}</div>
+          <div>{JSON.stringify(totalLembar)}</div>
+        </Stack> */}
+
+        <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          withAsterisk
+          label="Judul Investasi"
+          placeholder="Judul investasi"
+          maxLength={100}
+          value={data.title}
+          onChange={(val) => {
+            setData({
+              ...data,
+              title: val.target.value,
+            });
+          }}
+        />
+
+        <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          icon={<Text fw={"bold"}>Rp.</Text>}
+          min={0}
+          withAsterisk
+          label="Dana Dibutuhkan"
+          placeholder="0"
+          value={target ? target : data.targetDana}
+          onChange={(val) => {
+            // console.log(typeof 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: +data.hargaLembar,
+            });
+
+            setTarget(targetNilai);
+            setData({
+              ...data,
+              targetDana: nilai as string,
+            });
+          }}
+        />
+
+        <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          icon={<Text fw={"bold"}>Rp.</Text>}
+          min={0}
+          withAsterisk
+          label="Harga Per Lembar"
+          placeholder="0"
+          value={harga ? harga : data.hargaLembar}
+          onChange={(val) => {
+            try {
+              // console.log(typeof +val.currentTarget.value);
+
+              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: +data.targetDana,
+              });
+
+              setHarga(targetNilai);
+              setData({
+                ...data,
+                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: "white",
+            },
+
+            input: {
+              backgroundColor: "whitesmoke",
+            },
+          }}
+        />
+
+        <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          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,
+              roi: val.target.value,
+            });
+          }}
+        />
+
+        <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          withAsterisk
+          label="Pencarian Investor"
+          placeholder="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: "white",
+            },
+          }}
+          withAsterisk
+          label="Periode Deviden"
+          placeholder="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: "white",
+            },
+          }}
+          withAsterisk
+          label="Pembagian Deviden"
+          placeholder="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

@@ -0,0 +1,148 @@
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import {
+  Button,
+  Center,
+  FileButton,
+  Grid,
+  Group,
+  Stack,
+  Text
+} from "@mantine/core";
+import {
+  IconCamera,
+  IconCircleCheck
+} from "@tabler/icons-react";
+
+import { DIRECTORY_ID } from "@/app/lib";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { investasi_funUpdateProspektus } from "../../_fun";
+
+export function Investasi_ViewEditProspektus({
+  investasiId,
+}: {
+  investasiId: string;
+}) {
+  const router = useRouter();
+  const [filePdf, setFilePdf] = useState<File | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  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 {
+      const updte = await investasi_funUpdateProspektus({
+        fileId: uploadFilePdf.data.id,
+        investasiId: investasiId,
+      });
+
+      if (updte.status !== 200) {
+        return ComponentGlobal_NotifikasiPeringatan("Gagal update prospektus");
+      }
+
+      router.back();
+
+      return ComponentGlobal_NotifikasiBerhasil(updte.message);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  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_CardStyles marginBottom={"0px"}>
+          {!filePdf ? (
+            <Text lineClamp={1} align="center" c={"gray"}>
+              Upload File Prospektus
+            </Text>
+          ) : (
+            <Grid align="center">
+              <Grid.Col span={2}></Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text lineClamp={1} align="center">
+                  {filePdf.name}
+                </Text>
+              </Grid.Col>
+              <Grid.Col span={2}>
+                <Center>
+                  <IconCircleCheck color="green" />
+                </Center>
+              </Grid.Col>
+            </Grid>
+          )}
+        </ComponentGlobal_CardStyles>
+
+        <Group position="center">
+          <FileButton
+            accept={"application/pdf"}
+            onChange={async (files: any) => {
+              try {
+                const buffer = URL.createObjectURL(
+                  new Blob([new Uint8Array(await files.arrayBuffer())])
+                );
+
+                setFilePdf(files);
+              } 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",
+          }}
+          onClick={() => {
+            onUpload();
+          }}
+        >
+          Update
+        </Button>
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/_view/index.ts

@@ -10,6 +10,17 @@ import { Investasi_ViewInvoice } from "./transaksi/view_invoice";
 import { Investasi_ViewMetodePembayaran } from "./transaksi/view_metode_pembayaran";
 import { Investasi_ViewProsesPembelian } from "./transaksi/view_proses_pembelian";
 import { Investasi_ViewProsesTransaksi } from "./transaksi/view_proses_transaksi";
+import Investasi_ViewDetailPublish from "./detail/portofolio/view_detai_publish";
+import Investasi_ViewDetailReview from "./detail/portofolio/view_detail_review";
+import Investasi_ViewDetailDraft from "./detail/portofolio/view_detail_draft";
+import Investasi_ViewDetailReject from "./detail/portofolio/view_detail_reject";
+import { Investasi_ViewDetailProspektus } from "./detail/view_detail_prospektusl";
+import { Investasi_ViewDaftarDokumen } from "./detail/view_daftar_dokemen";
+import { Investasi_ViewEditDokumen } from "./edit/view_edit_dokumen";
+import { Investasi_ViewEditInvestasi } from "./edit/view_edit_investasi";
+import { Investasi_ViewEditProspektus } from "./edit/view_edit_prospektus";
+import { Investasi_ViewCreateDocument } from "./create/view_create_document";
+import { Investasi_ViewRekapDokumen } from "./detail/view_rekap_dokumen";
 
 export { Investasi_ViewProsesPembelian };
 export { Investasi_ViewMetodePembayaran };
@@ -22,4 +33,14 @@ export { PdfToImage as Investasi_ViewFileViewer };
 export { Investasi_ViewSahamSaya };
 export { Investasi_ViewDetailSahamSaya };
 export { Investasi_ViewPortofolio };
-
+export { Investasi_ViewDetailPublish };
+export { Investasi_ViewDetailReview };
+export { Investasi_ViewDetailDraft };
+export { Investasi_ViewDetailReject };
+export { Investasi_ViewDetailProspektus };
+export { Investasi_ViewDaftarDokumen };
+export { Investasi_ViewEditDokumen };
+export { Investasi_ViewEditInvestasi };
+export { Investasi_ViewEditProspektus };
+export { Investasi_ViewCreateDocument };
+export { Investasi_ViewRekapDokumen };

src/app_modules/investasi/_view/main/portofolio/view_portofolio_draft.tsx

@@ -1,23 +1,21 @@
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 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 { data } from "autoprefixer";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
-import { Investasi_ComponentCardPortofolio_NotPublish } from "../../../_component";
-import {
-  investasi_funGetAllInvestasiNonPublishByUserId,
-  investasi_funGetSuccessTransactionById,
-} from "../../../_fun";
 import { useState } from "react";
-import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Investasi_ComponentCardPortofolio_NotPublish } from "../../../_component";
+import { investasi_funGetAllInvestasiNonPublishByUserId } from "../../../_fun";
 
 export function Investasi_ViewPortofolioDraft({
-  listData,
+  statusId,
+  dataPortofolio,
 }: {
-  listData: any[];
+  statusId: string;
+  dataPortofolio: any;
 }) {
-  const [data, setData] = useState(listData);
+  const [data, setData] = useState<any[]>(dataPortofolio);
   const [activePage, setActivePage] = useState(1);
 
   return (
@@ -49,7 +47,7 @@ export function Investasi_ViewPortofolioDraft({
             {(item) => (
               <Investasi_ComponentCardPortofolio_NotPublish
                 data={item}
-                path={NEW_RouterInvestasi.detail_draft}
+                path={NEW_RouterInvestasi.detail_portofolio({ id: item.id })}
               />
             )}
           </ScrollOnly>

src/app_modules/investasi/_view/main/portofolio/view_portofolio_publish.tsx

@@ -1,18 +1,22 @@
-import { useState } from "react";
-import { Investasi_ComponentCardPortofolioPublish } from "../../../_component";
 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 _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
-import { investasi_funGetSuccessTransactionById } from "../../../_fun";
+import { useState } from "react";
+import { Investasi_ComponentCardPortofolioPublish } from "../../../_component";
+import {
+  investasi_funGetSuccessTransactionById
+} from "../../../_fun";
 
 export function Investasi_ViewPortofolioPublish({
-  listData,
+  statusId,
+  dataPortofolio,
 }: {
-  listData: any[];
+  statusId: string;
+  dataPortofolio: any
 }) {
-  const [data, setData] = useState(listData);
+  const [data, setData] = useState<any[]>(dataPortofolio);
   const [activePage, setActivePage] = useState(1);
 
   return (

src/app_modules/investasi/_view/main/portofolio/view_portofolio_reject.tsx

@@ -1,23 +1,21 @@
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 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 { data } from "autoprefixer";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
-import { Investasi_ComponentCardPortofolio_NotPublish } from "../../../_component";
-import {
-  investasi_funGetAllInvestasiNonPublishByUserId,
-  investasi_funGetSuccessTransactionById,
-} from "../../../_fun";
 import { useState } from "react";
-import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Investasi_ComponentCardPortofolio_NotPublish } from "../../../_component";
+import { investasi_funGetAllInvestasiNonPublishByUserId } from "../../../_fun";
 
 export function Investasi_ViewPortofolioReject({
-  listData,
+  statusId,
+  dataPortofolio,
 }: {
-  listData: any[];
+  statusId: string;
+  dataPortofolio: any;
 }) {
-  const [data, setData] = useState(listData);
+  const [data, setData] = useState<any[]>(dataPortofolio);
   const [activePage, setActivePage] = useState(1);
 
   return (
@@ -49,7 +47,7 @@ export function Investasi_ViewPortofolioReject({
             {(item) => (
               <Investasi_ComponentCardPortofolio_NotPublish
                 data={item}
-                path={NEW_RouterInvestasi.detail_reject}
+                path={NEW_RouterInvestasi.detail_portofolio({ id: item.id })}
               />
             )}
           </ScrollOnly>

src/app_modules/investasi/_view/main/portofolio/view_portofolio_review.tsx

@@ -1,23 +1,21 @@
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 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 { data } from "autoprefixer";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
-import { Investasi_ComponentCardPortofolio_NotPublish } from "../../../_component";
-import {
-  investasi_funGetAllInvestasiNonPublishByUserId,
-  investasi_funGetSuccessTransactionById,
-} from "../../../_fun";
 import { useState } from "react";
-import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Investasi_ComponentCardPortofolio_NotPublish } from "../../../_component";
+import { investasi_funGetAllInvestasiNonPublishByUserId } from "../../../_fun";
 
 export function Investasi_ViewPortofolioReview({
-  listData,
+  statusId,
+  dataPortofolio,
 }: {
-  listData: any[];
+  statusId: string;
+  dataPortofolio: any;
 }) {
-  const [data, setData] = useState(listData);
+  const [data, setData] = useState<any[]>(dataPortofolio);
   const [activePage, setActivePage] = useState(1);
 
   return (
@@ -49,7 +47,7 @@ export function Investasi_ViewPortofolioReview({
             {(item) => (
               <Investasi_ComponentCardPortofolio_NotPublish
                 data={item}
-                path={NEW_RouterInvestasi.detail_review}
+                path={NEW_RouterInvestasi.detail_portofolio({id: item.id})}
               />
             )}
           </ScrollOnly>

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

@@ -1,136 +1,44 @@
-import { AccentColor, MainColor } from "@/app_modules/_global/color";
-import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
-import {
-  Box,
-  Button,
-  Group,
-  SimpleGrid,
-  Space,
-  Stack,
-  Tabs,
-} from "@mantine/core";
-import { useAtom } from "jotai";
-import { useState } from "react";
-import { gs_investasi_status } from "../../g_state";
-import { Investasi_ViewPortofolioPublish } from "./portofolio/view_portofolio_publish";
-import { Investasi_ViewPortofolioReview } from "./portofolio/view_portofolio_review";
 import { Investasi_ViewPortofolioDraft } from "./portofolio/view_portofolio_draft";
+import { Investasi_ViewPortofolioPublish } from "./portofolio/view_portofolio_publish";
 import { Investasi_ViewPortofolioReject } from "./portofolio/view_portofolio_reject";
+import { Investasi_ViewPortofolioReview } from "./portofolio/view_portofolio_review";
 
 export function Investasi_ViewPortofolio({
-  listStatus,
-  listDataPublish,
-  listDataReview,
-  listDataDraft,
-  listDataReject,
+  statusId,
+  dataPortofolio,
 }: {
-  listStatus: any[];
-  listDataPublish: any[];
-  listDataReview: any[];
-  listDataDraft: any[];
-  listDataReject: any[];
+  statusId: string;
+  dataPortofolio: any[];
 }) {
-  const [activeTab, setActiveTab] = useAtom(gs_investasi_status);
-  const [activeStatus, setActiveStatus] =
-    useState<MODEL_NEW_DEFAULT_MASTER[]>(listStatus);
-
-  // return (
-  //   <>
-  //     <Box h={"82vh"}>
-  //       <Group grow h={"5vh"}>
-  //         {activeStatus.map((e) => (
-  //           <Box
-
-  //           // component={Button}
-  //             // radius={"xl"}
-  //             key={e.id}
-  //             // onClick={() => setActiveTab(e.name)}
-  //             style={{
-  //               alignContent: "center",
-  //               justifyContent: "center",
-  //               transition: "0.5s",
-  //               backgroundColor:
-  //                 activeTab === e.name ? MainColor.yellow : "gray",
-  //               border:
-  //                 activeTab === e.name ? `1px solid ${AccentColor.yellow}` : "",
-  //               color: activeTab === e.name ? "black" : "white",
-  //             }}
-  //           >
-  //             {e.name}
-  //           </Box>
-  //         ))}
-  //       </Group>
-  //       <Space h={"1vh"} />
-  //       <Box h={"76vh"}>
-  //         {activeTab === "Publish" && (
-  //           <Investasi_ViewPortofolioPublish listData={listDataPublish} />
-  //         )}
-
-  //         {activeTab === "Review" && <Investasi_ViewPortofolioReview />}
-  //       </Box>
-  //     </Box>
-  //   </>
-  // );
-
   return (
     <>
-      <Tabs
-        variant="pills"
-        radius="xl"
-        defaultValue={activeTab}
-        value={activeTab}
-        onTabChange={setActiveTab}
-        styles={{
-          tabsList: {
-            // backgroundColor: MainColor.black,
-            position: "sticky",
-            top: 0,
-            zIndex: 99,
-          },
-        }}
-      >
-        <Stack>
-          <Tabs.List grow mb={"xs"}>
-            {activeStatus.map((e) => (
-              <Tabs.Tab
-                w={"20%"}
-                key={e.id}
-                value={e.name}
-                fw={"bold"}
-                style={{
-                  transition: "ease 0.5s ",
-                  backgroundColor:
-                    activeTab === e.name ? MainColor.yellow : AccentColor.blue,
-                  // border:
-                  //   activeTab === e.name
-                  //     ? `1px solid ${AccentColor.yellow}`
-                  //     : "",
+      {statusId === "1" && (
+        <Investasi_ViewPortofolioPublish
+          statusId={statusId}
+          dataPortofolio={dataPortofolio}
+        />
+      )}
 
-                  color: activeTab === e.name ? "black" : "white",
-                }}
-              >
-                {e.name}
-              </Tabs.Tab>
-            ))}
-          </Tabs.List>
+      {statusId === "2" && (
+        <Investasi_ViewPortofolioReview
+          statusId={statusId}
+          dataPortofolio={dataPortofolio}
+        />
+      )}
 
-          <Tabs.Panel value="Publish">
-            <Investasi_ViewPortofolioPublish listData={listDataPublish} />
-          </Tabs.Panel>
+      {statusId === "3" && (
+        <Investasi_ViewPortofolioDraft
+          statusId={statusId}
+          dataPortofolio={dataPortofolio}
+        />
+      )}
 
-          <Tabs.Panel value="Review">
-            <Investasi_ViewPortofolioReview listData={listDataReview} />
-          </Tabs.Panel>
-
-          <Tabs.Panel value="Draft">
-            <Investasi_ViewPortofolioDraft listData={listDataDraft} />
-          </Tabs.Panel>
-
-          <Tabs.Panel value="Reject">
-            <Investasi_ViewPortofolioReject listData={listDataReject} />
-          </Tabs.Panel>
-        </Stack>
-      </Tabs>
+      {statusId === "4" && (
+        <Investasi_ViewPortofolioReject
+          statusId={statusId}
+          dataPortofolio={dataPortofolio}
+        />
+      )}
     </>
   );
 }

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

@@ -2,7 +2,7 @@
 
 import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
+import { ComponentGlobal_LoadImage, ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
 import {
   Box,
   Button,
@@ -157,10 +157,12 @@ export function Investasi_ViewTransaksiBerhasil({
               transitionDuration={500}
               transitionTimingFunction="linear"
             >
-              <Image
+
+              <ComponentGlobal_LoadImage fileId={data.imageId}/>
+              {/* <Image
                 alt="foto"
                 src={RouterAdminInvestasi.api_bukti_transfer + data?.imagesId}
-              />
+              /> */}
             </Collapse>
           </Stack>
         </Paper>