fix: File view

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

package.json

@@ -62,6 +62,7 @@
     "next": "^13.5.4-canary.8",
     "next-dev": "^1.1.9",
     "next-scroll-loader": "^1.0.9",
+    "pdfjs-dist": "^4.6.82",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-countdown": "^2.3.5",

src/app/dev/admin/app-information/main/page.tsx

@@ -1,3 +1,4 @@
+import { adminAppInformation_funGetBidangBisnis } from "@/app_modules/admin/app_info/fun";
 import adminAppInformation_getMasterBank from "@/app_modules/admin/app_info/fun/master/get_list_bank";
 import adminAppInformation_getNomorAdmin from "@/app_modules/admin/app_info/fun/master/get_nomor_admin";
 import { AdminAppInformation_UiMain } from "@/app_modules/admin/app_info/ui";
@@ -5,10 +6,15 @@ import { AdminAppInformation_UiMain } from "@/app_modules/admin/app_info/ui";
 export default async function Page() {
   const nomorAdmin = await adminAppInformation_getNomorAdmin();
   const listBank = await adminAppInformation_getMasterBank();
+  const dataBidangBisnis = await adminAppInformation_funGetBidangBisnis()
 
   return (
     <>
-      <AdminAppInformation_UiMain nomorAdmin={nomorAdmin} listBank={listBank} />
+      <AdminAppInformation_UiMain
+        nomorAdmin={nomorAdmin}
+        listBank={listBank}
+        dataBidangBisnis={dataBidangBisnis}
+      />
     </>
   );
 }

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

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

src/app/dev/investasi/create_berita/[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/create_berita/[id]/page.tsx

@@ -1,8 +1,9 @@
 import { CreateBeritaInvestasi } from "@/app_modules/investasi";
 
-export default async function Page({params}: {params: {id: string}}) {
-    return<>
-    <CreateBeritaInvestasi idInves={params.id}/>
-    
+export default async function Page({ params }: { params: { id: string } }) {
+  return (
+    <>
+      <CreateBeritaInvestasi idInves={params.id} />
     </>
-}
+  );
+}

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

@@ -1,43 +1,20 @@
 import { funGetUserProfile } from "@/app_modules/fun_global/get_user_profile";
 import { DetailInvestasi } from "@/app_modules/investasi";
 import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
-
-import yaml from "yaml";
-import fs from "fs";
-import { cookies } from "next/headers";
-import { unsealData } from "iron-session";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import funProgressBar from "@/app_modules/investasi/fun/fun_progress_bar";
 import funTotalInvestorByIdInvestasi from "@/app_modules/investasi/fun/fun_total_investor_by_id";
-const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const c = cookies().get("ssn");
-  const usr = JSON.parse(
-    await unsealData(c?.value as string, {
-      password: config.server.password,
-    })
-  );
-
-  const loginUserId = usr.id;
-  const dataInvestasi = await getOneInvestasiById(params.id);
-  const dataUser = await funGetUserProfile(dataInvestasi?.authorId as any)
-
-  let total = Number(dataInvestasi?.totalLembar)
-  let beli = Number(dataInvestasi?.lembarTerbeli)
-  const progress = await funProgressBar(total, beli)
-
-  const totalInvestor = await funTotalInvestorByIdInvestasi(dataInvestasi?.id)
-
-  // console.log(dataInvestasi?.MasterProgresInvestasi?.name)
+const investasiId = params.id
+  const dataInvestasi = await getOneInvestasiById(investasiId);
+  const loginUserId = await user_getOneUserId();
 
   return (
     <>
       <DetailInvestasi
         dataInvestasi={dataInvestasi as any}
-        dataUser={dataUser as any}
         loginUserId={loginUserId}
-        progress={progress}
-        totalInvestor={totalInvestor}
       />
     </>
   );

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

@@ -0,0 +1,13 @@
+import { investasi_funGetOneInvoiceById } from "@/app_modules/investasi/_fun/get/fun_get_one_invoice_by_id";
+import { Investasi_UiDetailSahamSaya } from "@/app_modules/investasi/_ui";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const invoiceId = params.id;
+  const dataSaham = await investasi_funGetOneInvoiceById({ invoiceId });
+
+  return (
+    <>
+      <Investasi_UiDetailSahamSaya dataSaham={dataSaham} />
+    </>
+  );
+}

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

@@ -1,12 +1,17 @@
 import { DetailBeritaInvestasi } from "@/app_modules/investasi";
 import getOneBeritaInvestasiById from "@/app_modules/investasi/fun/get_one_berita_by_id";
 
-export default async function Page({params}: {params: {id: string}}) {
-    // console.log(params.id)
-    const dataBerita = await getOneBeritaInvestasiById(params.id)
-    // console.log(dataBerita)
+export default async function Page({ params }: { params: { id: string } }) {
+  const investasiId = params.id;
+  const dataBerita = await getOneBeritaInvestasiById(investasiId);
+  // console.log(dataBerita)
 
-    return <>
-    <DetailBeritaInvestasi dataBerita={dataBerita as any}/>
+  return (
+    <>
+      <DetailBeritaInvestasi
+        dataBerita={dataBerita as any}
+        investasiId={investasiId}
+      />
     </>
-}
+  );
+}

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

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

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

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

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

@@ -3,8 +3,6 @@ import { Investasi_UiFileView } from "@/app_modules/investasi/_ui";
 
 export default async function Page({ params }: { params: { id: string } }) {
   const prospekId = params.id;
-  const dataProspek = await investasi_funGetProspekById({ prospekId: prospekId });
-
 
   return (
     <>

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

@@ -1,15 +1,13 @@
 import { ListEditBeritaInvestasi } 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)
+export default async function Page({ params }: { params: { id: string } }) {
+  const dataInvestasi = await getOneInvestasiById(params.id);
   // console.log(dataInvestasi)
 
-
   return (
     <>
-      <ListEditBeritaInvestasi dataInvestasi={dataInvestasi as any}  />
+      <ListEditBeritaInvestasi dataInvestasi={dataInvestasi as any} />
     </>
   );
 }

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

@@ -6,24 +6,17 @@ import { unsealData } from "iron-session";
 import getInvestasiByStatusId from "@/app_modules/investasi/fun/get_investasi_by_id";
 import getStatusInvestasi from "@/app_modules/investasi/fun/master/get_status_investasi";
 import getPortoByStatusId from "@/app_modules/investasi/fun/get_porto_status_by_id";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export default async function Page() {
-  const c = cookies().get("ssn");
-  const tkn = JSON.parse(
-    await unsealData(c?.value as string, {
-      password: config.server.password,
-    })
-  );
-
+  const userId = await user_getOneUserId();
   const listStatusInvestasi = await getStatusInvestasi();
-  const dataDraft = await getPortoByStatusId(tkn.id, 1)
-  const dataReview = await getPortoByStatusId(tkn.id, 2)
-  const dataPublish = await getPortoByStatusId(tkn.id, 3)
-  const dataReject = await getPortoByStatusId(tkn.id, 4)
-
-
+  const dataDraft = await getPortoByStatusId(userId, 1);
+  const dataReview = await getPortoByStatusId(userId, 2);
+  const dataPublish = await getPortoByStatusId(userId, 3);
+  const dataReject = await getPortoByStatusId(userId, 4);
 
   return (
     <>

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

@@ -1,23 +1,24 @@
-import { InvestasiSahamTerbeli } from "@/app_modules/investasi";
-import getListTransaksiBerhasilInvestasi from "@/app_modules/investasi/fun/get_list_transaksi_berhasil_by_id";
-import yaml from "yaml";
+import { investasi_funGetSuccessTransactionById } from "@/app_modules/investasi/_fun";
+import { Investasi_UiSahamSaya } from "@/app_modules/investasi/_ui";
 import fs from "fs";
-import { cookies } from "next/headers";
-import { unsealData } from "iron-session";
+import yaml from "yaml";
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export default async function Page() {
-  const c = cookies().get("ssn");
-  const user = JSON.parse(
-    await unsealData(c?.value as string, {
-      password: config.server.password,
-    })
-  );
-  const listTransaksi = await getListTransaksiBerhasilInvestasi(user.id)
+  // const c = cookies().get("ssn");
+  // const user = JSON.parse(
+  //   await unsealData(c?.value as string, {
+  //     password: config.server.password,
+  //   })
+  // );
+  // const listTransaksi = await getListTransaksiBerhasilInvestasi(user.id);
+
+  const dataSaham = await investasi_funGetSuccessTransactionById({ page: 1 });
 
   return (
     <>
-      <InvestasiSahamTerbeli listTransaksi={listTransaksi as any} />
+      {/* <InvestasiSahamTerbeli listTransaksi={listTransaksi as any} /> */}
+      <Investasi_UiSahamSaya dataSaham={dataSaham as any} />
     </>
   );
 }

src/app/dev/investasi/status-transaksi/berhasil/[id]/page.tsx

@@ -1,10 +1,10 @@
 import { StatusTransaksiInvestasi } from "@/app_modules/investasi";
-import { investasi_funGetInvoiceById } from "@/app_modules/investasi/_fun/get/fun_get_one_invoice_by_id";
+import { investasi_funGetOneInvoiceById } from "@/app_modules/investasi/_fun/get/fun_get_one_invoice_by_id";
 import { Investasi_UiTransaksiBerhasil } from "@/app_modules/investasi/_ui";
 
 export default async function Page({params}: {params: {id: string}}) {
     const invoiceId = params.id;
-    const dataTransaksi = await investasi_funGetInvoiceById({ invoiceId });
+    const dataTransaksi = await investasi_funGetOneInvoiceById({ invoiceId });
   return (
     <>
       <Investasi_UiTransaksiBerhasil dataTransaksi={dataTransaksi} />

src/app/dev/investasi/status-transaksi/gagal/[id]/page.tsx

@@ -1,10 +1,10 @@
 import { funGlobal_getNomorAdmin } from "@/app_modules/_global/fun/get";
-import { investasi_funGetInvoiceById } from "@/app_modules/investasi/_fun/get/fun_get_one_invoice_by_id";
+import { investasi_funGetOneInvoiceById } from "@/app_modules/investasi/_fun/get/fun_get_one_invoice_by_id";
 import { Investasi_UiTransaksiGagal } from "@/app_modules/investasi/_ui/status_transaksi/ui_transaksi_gagal";
 
 export default async function Page({ params }: { params: { id: string } }) {
   const invoiceId = params.id;
-  const dataTransaksi = await investasi_funGetInvoiceById({ invoiceId });
+  const dataTransaksi = await investasi_funGetOneInvoiceById({ invoiceId });
   const nomorAdmin = await funGlobal_getNomorAdmin();
 
   return (

src/app/dev/investasi/transaksi/invoice/[id]/page.tsx

@@ -1,9 +1,9 @@
-import { investasi_funGetInvoiceById } from "@/app_modules/investasi/_fun/get/fun_get_one_invoice_by_id";
+import { investasi_funGetOneInvoiceById } from "@/app_modules/investasi/_fun/get/fun_get_one_invoice_by_id";
 import { Investasi_UiInvoice } from "@/app_modules/investasi/_ui";
 
 export default async function Page({ params }: { params: { id: string } }) {
   const invoiceId = params.id;
-  const dataInvoice = await investasi_funGetInvoiceById({ invoiceId: invoiceId });
+  const dataInvoice = await investasi_funGetOneInvoiceById({ invoiceId: invoiceId });
 
   return (
     <>

src/app/dev/portofolio/create/[id]/page.tsx

@@ -1,4 +1,3 @@
-import { myConsole } from "@/app/fun/my_console";
 import { CreatePortofolio } from "@/app_modules/katalog/portofolio";
 import { Portofolio_getMasterBidangBisnis } from "@/app_modules/katalog/portofolio/fun/master/get_bidang_bisnis";
 

src/app/dev/portofolio/edit/data/[id]/page.tsx

@@ -14,7 +14,6 @@ export default async function Page({ params }: { params: { id: string } }) {
     "profileId",
   ]);
 
-
   const listBidang = await Portofolio_getMasterBidangBisnis()
 
   return (

src/app/lib/router_hipmi/router_investasi.ts

@@ -10,7 +10,11 @@ export const NEW_RouterInvestasi = {
   transaksi_berhasil: "/dev/investasi/status-transaksi/berhasil/",
 
   // file view
-  file_view: "/dev/investasi/file-view/",
+  file_view_prospektus: "/dev/investasi/file-view/prospektus/",
+  file_view_dokumen: "/dev/investasi/file-view/dokumen/",
+
+  // detail
+  detail_saham: "/dev/investasi/detail/saham/",
 };
 
 export const RouterInvestasi_OLD = {
@@ -60,7 +64,7 @@ export const RouterInvestasi_OLD = {
   detail_reject: "/dev/investasi/detail_portofolio/reject/",
 
   // berita
-  berita: "/dev/investasi/berita/",
+  daftar_berita: "/dev/investasi/berita/",
   create_berita: "/dev/investasi/create_berita/",
   list_edit_berita: "/dev/investasi/list_edit_berita/",
 

src/app_modules/_global/author_name_on_header.tsx

@@ -17,7 +17,7 @@ import { ComponentGlobal_NotifikasiPeringatan } from "./notif_global/notifikasi_
 import moment from "moment";
 import { useState } from "react";
 
-export default function ComponentGlobal_AuthorNameOnHeader({
+export default function ComponentGlobal_AuthorNameAndAvatar({
   profileId,
   imagesId,
   authorName,

src/app_modules/_global/color/backgrond_and_border.module.css

@@ -0,0 +1,7 @@
+.background_and_border {
+  background-color: #002e59;
+  border-color: #00447d;
+  border-radius: "10px";
+  padding: 15px;
+  color: white;
+}

src/app_modules/_global/color/index.ts

@@ -0,0 +1,4 @@
+import { AccentColor, MainColor } from "./color_pallet";
+
+export { MainColor };
+export { AccentColor };

src/app_modules/_global/component/comp_author_name_and_avatar.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  Avatar,
+  Center,
+  Divider,
+  Grid,
+  Group,
+  Loader,
+  Overlay,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import React, { useState } from "react";
+import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global/notifikasi_peringatan";
+
+export default function ComponentGlobal_AvatarAndAuthorName({
+  dataUser,
+  isPembatas,
+  componentRight,
+}: {
+  dataUser: MODEL_USER;
+  isPembatas?: boolean;
+  componentRight?: React.ReactNode;
+}) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (dataUser?.Profile?.id) {
+                setVisible(true);
+                router.push(RouterProfile.katalog + dataUser?.Profile?.id);
+              } else {
+                ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+              }
+            }}
+          >
+            {visible ? (
+              <Avatar
+                size={30}
+                sx={{
+                  borderStyle: "solid",
+                  borderWidth: "1px",
+                  borderColor: "white",
+                }}
+                radius={"xl"}
+                bg={"gray.1"}
+              >
+                <Overlay opacity={0.1}>
+                  <Center h={"100%"}>
+                    <Loader color="gray" size={20} />
+                  </Center>
+                </Overlay>
+              </Avatar>
+            ) : (
+              <Avatar
+                size={30}
+                sx={{
+                  borderStyle: "solid",
+                  borderWidth: "1px",
+                  borderColor: "white",
+                }}
+                radius={"xl"}
+                bg={"gray.1"}
+                src={
+                  dataUser?.Profile?.imagesId
+                    ? RouterProfile.api_foto_profile +
+                      dataUser?.Profile?.imagesId
+                    : "/aset/global/avatar.png"
+                }
+              />
+            )}
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Stack justify="center" h={"100%"} c={"white"}>
+              <Group position="apart">
+                <Stack justify="center" h={"100%"}>
+                  <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                    {dataUser?.username ? dataUser?.username : "Nama author"}
+                  </Text>
+                </Stack>
+                {componentRight ? componentRight : null}
+              </Group>
+            </Stack>
+          </Grid.Col>
+        </Grid>
+        {isPembatas ? <Divider /> : ""}
+      </Stack>
+    </>
+  );
+}

src/app_modules/_global/component/comp_tampilan_angka_ratusan.tsx

@@ -0,0 +1,55 @@
+import { Group, Text } from "@mantine/core";
+
+export default function ComponentGlobal_TampilanAngkaRatusan({
+  nominal,
+  color,
+  fontSize,
+  fontWeight,
+  textBefore,
+  textAfter,
+}: {
+  nominal: number;
+  color?: string;
+  fontSize?: number | string;
+  fontWeight?: string | number;
+  textBefore?: string;
+  textAfter?: string;
+}) {
+  return (
+    <>
+      <Group spacing={"xs"}>
+        {textBefore ? (
+          <Text
+            fw={fontWeight ? fontWeight : "bold"}
+            fz={fontSize ? fontSize : "md"}
+          >
+            {textBefore}
+          </Text>
+        ) : (
+          ""
+        )}
+        <Text
+          fw={fontWeight ? fontWeight : "bold"}
+          fz={fontSize ? fontSize : "md"}
+          style={{
+            color: color ? color : "white",
+          }}
+        >
+          {new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
+            nominal
+          )}
+        </Text>
+        {textAfter ? (
+          <Text
+            fw={fontWeight ? fontWeight : "bold"}
+            fz={fontSize ? fontSize : "md"}
+          >
+            {textAfter}
+          </Text>
+        ) : (
+          ""
+        )}
+      </Group>
+    </>
+  );
+}

src/app_modules/_global/component/comp_tampilan_rupiah.tsx

@@ -5,17 +5,20 @@ export default function ComponentGlobal_TampilanRupiah({
   nominal,
   color,
   fontSize,
+  fontWeight,
 }: {
   nominal: number;
   color?: string;
-  fontSize?: number;
+  fontSize?: number | string;
+  fontWeight?: string | number;
 }) {
   return (
     <>
       <Text
+        fw={fontWeight ? fontWeight : "bold"}
         fz={fontSize ? fontSize : "md"}
         style={{
-          color: color ? color : "black",
+          color: color ? color : "white",
         }}
       >
         Rp.{" "}

src/app_modules/_global/component/index.ts

@@ -1,3 +1,9 @@
+import ComponentGlobal_AvatarAndAuthorName from "./comp_author_name_and_avatar";
+import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
+import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
 import ComponentGlobal_TampilanRupiah from "./comp_tampilan_rupiah";
 
 export { ComponentGlobal_TampilanRupiah };
+export { ComponentGlobal_TampilanAngkaRatusan };
+export { ComponentGlobal_AvatarAndAuthorName };
+export { ComponentGlobal_CardLoadingOverlay };

src/app_modules/admin/_admin_global/_component/index.ts

@@ -1,5 +1,5 @@
-import { ComponentAdminGlobal_TitlePage } from "./_component/title_page";
-import { ComponentAdminGlobal_TampilanRupiah } from "./comp_admin_teampilan_rupiah";
+import { ComponentAdminGlobal_TitlePage } from "./title_page";
+import { ComponentAdminGlobal_TampilanRupiah } from "./comp_admin_tampilan_rupiah";
 
 export { ComponentAdminGlobal_TampilanRupiah };
 export { ComponentAdminGlobal_TitlePage };

src/app_modules/admin/app_info/component/info_bank/comp_title_page.tsx

@@ -1,4 +1,4 @@
-import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global";
+import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component"; 
 import { Button } from "@mantine/core";
 import { IconCirclePlus } from "@tabler/icons-react";
 

src/app_modules/admin/app_info/fun/create/fun_create_bidang_bisnis.ts

@@ -0,0 +1,25 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { RouterAdminAppInformation } from "@/app/lib/router_admin/router_app_information";
+import { revalidatePath } from "next/cache";
+
+export async function adminAppInformation_funCreateBidangBisnis({
+  name,
+}: {
+  name: string;
+}) {
+  const count = await prisma.masterBidangBisnis.count({});
+  const idBidangBisnis = count + 1;
+
+  const createData = await prisma.masterBidangBisnis.create({
+    data: {
+      id: idBidangBisnis.toString(),
+      name: name,
+    },
+  });
+
+  if (!createData) return { status: 400, message: "Gagal menambahkan" };
+  revalidatePath(RouterAdminAppInformation.main);
+  return { status: 201, message: "Berhasil menambahkan" };
+}

src/app_modules/admin/app_info/fun/index.ts

@@ -0,0 +1,7 @@
+import { adminAppInformation_funCreateBidangBisnis } from "./create/fun_create_bidang_bisnis";
+import { adminAppInformation_funGetBidangBisnis } from "./master/fun_get_master_bidang_bisnis";
+import { adminAppInformation_funUpdateBidangBisnis } from "./update/fun_update_bidang_bisnis";
+
+export { adminAppInformation_funGetBidangBisnis };
+export { adminAppInformation_funCreateBidangBisnis };
+export { adminAppInformation_funUpdateBidangBisnis };

src/app_modules/admin/app_info/fun/master/fun_get_master_bidang_bisnis.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function adminAppInformation_funGetBidangBisnis() {
+  const data = await prisma.masterBidangBisnis.findMany({
+    orderBy: {
+      createdAt: "desc",
+    },
+  });
+
+  return data;
+}

src/app_modules/admin/app_info/fun/update/fun_update_bidang_bisnis.ts

@@ -0,0 +1,42 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { RouterAdminAppInformation } from "@/app/lib/router_admin/router_app_information";
+import { revalidatePath } from "next/cache";
+
+export async function adminAppInformation_funUpdateBidangBisnis({
+  data,
+}: {
+  data: { id: string; active?: boolean; name?: string };
+}) {
+  if (data.name) {
+    const updateData = await prisma.masterBidangBisnis.update({
+      where: {
+        id: data.id,
+      },
+      data: {
+        name: data.name,
+      },
+    });
+
+    if (!updateData) return { status: 400, message: "Gagal update data" };
+    revalidatePath(RouterAdminAppInformation.main);
+    return { status: 200, message: "Berhasil update data" };
+  }
+
+  if (data.active !== null) {
+    const updateAktivasi = await prisma.masterBidangBisnis.update({
+      where: {
+        id: data.id,
+      },
+      data: {
+        active: data.active,
+      },
+    });
+
+    if (!updateAktivasi)
+      return { status: 400, message: "Gagal update aktivasi" };
+    revalidatePath(RouterAdminAppInformation.main);
+    return { status: 200, message: "Berhasil update aktivasi" };
+  }
+}

src/app_modules/admin/app_info/lib/global_state.ts

@@ -0,0 +1,9 @@
+import { atomWithStorage } from "jotai/utils";
+
+/**
+ * @param index | 0 - 3 | 1: Whatsapp, 2: Bank, 3: Bidang Bisnis
+ */
+export const gs_app_information_menu = atomWithStorage(
+  "gs_app_information_menu",
+  "1"
+);

src/app_modules/admin/app_info/lib/index.ts

@@ -0,0 +1,3 @@
+import { gs_app_information_menu } from "./global_state";
+
+export { gs_app_information_menu };

src/app_modules/admin/app_info/ui/ui_main.tsx

@@ -1,26 +1,76 @@
 "use client";
 
-import { Space, Stack } from "@mantine/core";
+import { Button, Group, Stack } from "@mantine/core";
+import { useAtom } from "jotai";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { gs_app_information_menu } from "../lib";
 import {
   AdminAppInformation_ViewInfoBank,
   AdminAppInformation_ViewInformasiWhatApps,
+  AdminAppInformation_ViewKategoriPortofolio,
 } from "../view";
 
 export default function AdminAppInformation_UiMain({
   nomorAdmin,
   listBank,
+  dataBidangBisnis,
 }: {
   nomorAdmin: any;
   listBank: any[];
+  dataBidangBisnis: any[];
 }) {
+  const [selectPage, setSelectPage] = useAtom(gs_app_information_menu);
+  const listPage = [
+    {
+      id: "1",
+      name: "Whatsapp",
+    },
+    {
+      id: "2",
+      name: "Informasi Bank",
+    },
+    {
+      id: "3",
+      name: "Bidang Bisnis",
+    },
+  ];
+
   return (
     <>
       <Stack h={"100%"}>
         <ComponentAdminGlobal_HeaderTamplate name="App Information" />
-        <AdminAppInformation_ViewInformasiWhatApps nomorAdmin={nomorAdmin} />
-        <Space h={50} />
-        <AdminAppInformation_ViewInfoBank listBank={listBank} />
+
+        <Group>
+          {listPage.map((e, i) => (
+            <Button
+              key={i}
+              radius={"xl"}
+              c={"white"}
+              bg={selectPage === e.id ? "blue" : "gray.3"}
+              onClick={() => {
+                setSelectPage(e.id);
+              }}
+              style={{
+                transition: "all 0.5s",
+              }}
+            >
+              {e.name}
+            </Button>
+          ))}
+        </Group>
+
+        {selectPage === "1" && (
+          <AdminAppInformation_ViewInformasiWhatApps nomorAdmin={nomorAdmin} />
+        )}
+
+        {selectPage === "2" && (
+          <AdminAppInformation_ViewInfoBank listBank={listBank} />
+        )}
+        {selectPage === "3" && (
+          <AdminAppInformation_ViewKategoriPortofolio
+            dataBidangBisnis={dataBidangBisnis}
+          />
+        )}
       </Stack>
     </>
   );

src/app_modules/admin/app_info/view/index.tsx

@@ -1,5 +1,7 @@
 import AdminAppInformation_ViewInfoBank from "./view_info_bank";
 import AdminAppInformation_ViewInformasiWhatApps from "./view_info_whatsapp";
+import { AdminAppInformation_ViewKategoriPortofolio } from "./view_kategori_portofolio";
 
 export { AdminAppInformation_ViewInformasiWhatApps };
 export { AdminAppInformation_ViewInfoBank };
+export { AdminAppInformation_ViewKategoriPortofolio };

src/app_modules/admin/app_info/view/view_info_bank.tsx

@@ -27,7 +27,7 @@ import adminAppInformation_createBank from "../fun/create/fun_create_new_bank";
 import adminAppInformation_getMasterBank from "../fun/master/get_list_bank";
 import adminAppInformation_updateStatusBankById from "../fun/update/fun_udpate_status_bank";
 import adminAppInformation_updateDataBankById from "../fun/update/fun_update_data_bank";
-import { ComponentAdminGlobal_TitlePage } from "../../_admin_global";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { AdminAppInformation_ComponentTitlePageBank } from "../component";
 
 export default function AdminAppInformation_ViewInfoBank({
@@ -187,249 +187,235 @@ export default function AdminAppInformation_ViewInfoBank({
 
   return (
     <>
-      <Stack spacing={"xs"}>
-        <AdminAppInformation_ComponentTitlePageBank
-          onEventListener={(val: { isCreate: any; isUpdate: any }) => {
-            setIsCreate(val.isCreate);
-            setIsUpdate(val.isUpdate);
-          }}
-        />
-        {/* <ComponentAdminGlobal_TitlePage
-          name="Informasi Bank"
-          component={
-            <Button
-              w={120}
-              leftIcon={<IconCirclePlus />}
-              radius={"xl"}
-              onClick={() => {
-                setIsCreate(true);
-                setIsUpdate(false);
-              }}
-            >
-              Tambah
-            </Button>
-          }
-        /> */}
-      </Stack>
-
-      <Grid>
-        <Grid.Col span={9}>
-          <Paper p={"md"} withBorder shadow="lg" h={"50vh"}>
-            <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
-              <Table
-                verticalSpacing={"xs"}
-                horizontalSpacing={"md"}
-                p={"md"}
-                w={1000}
-                striped
-                highlightOnHover
-              >
-                <thead>
-                  <tr>
-                    <th>
-                      <Center w={150}>Bank</Center>
-                    </th>
-                    <th>
-                      <Center>Status</Center>
-                    </th>
-                    <th>
-                      <Center>Nama Rekening</Center>
-                    </th>
-                    <th>
-                      <Center>Nomor Rekening</Center>
-                    </th>
-                    <th>
-                      <Center>Aksi</Center>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>{rowTable}</tbody>
-              </Table>
-            </ScrollArea>
-          </Paper>
-        </Grid.Col>
-
-        <Grid.Col span={3}>
-          {isCreate ? (
-            <Paper p={"md"} withBorder shadow="lg">
-              <Stack>
-                <Center>
-                  <Title order={5}>Tambah Daftar Bank</Title>
-                </Center>
-
-                <TextInput
-                  label={"Nama Bank"}
-                  placeholder="Masukan nama bank"
-                  onChange={(val) => {
-                    setNewData({
-                      ...newData,
-                      namaBank: val.currentTarget.value,
-                    });
-                  }}
-                />
-
-                <TextInput
-                  label={"Nama Rekening"}
-                  placeholder="Masukan nama rekening"
-                  onChange={(val) => {
-                    setNewData({
-                      ...newData,
-                      namaAkun: val.currentTarget.value,
-                    });
-                  }}
-                />
-
-                <TextInput
-                  label={"Nomor Rekening Bank"}
-                  placeholder=" Masukan nomor rekening bank"
-                  type="number"
-                  onChange={(val) => {
-                    setNewData({
-                      ...newData,
-                      norek: val.currentTarget.value,
-                    });
-                  }}
-                />
-                <Group position="right" align="flex-end">
-                  <Button
-                    radius={"xl"}
-                    onClick={() => {
-                      setIsCreate(false);
-                    }}
-                  >
-                    Batal
-                  </Button>
-                  <Button
-                    loading={isLoadingCreate}
-                    loaderPosition="center"
-                    style={{ transition: "0.5s" }}
-                    disabled={_.values(newData).includes("") ? true : false}
-                    radius={"xl"}
-                    color="green"
-                    onClick={() => {
-                      onCreate();
-                    }}
-                  >
-                    Simpan
-                  </Button>
-                </Group>
-              </Stack>
-            </Paper>
-          ) : (
-            ""
-          )}
-
-          {isUpdate ? (
-            <Paper p={"md"} withBorder shadow="lg">
-              <Stack>
-                <Center>
-                  <Title order={5}>Update Data Bank</Title>
-                </Center>
-                <TextInput
-                  label={"Nama Bank"}
-                  placeholder="Masukan nama bank"
-                  value={updateData.namaBank}
-                  onChange={(val) => {
-                    const value = val.currentTarget.value;
-                    setUpdateData({ ...updateData, namaBank: value });
-                  }}
-                />
-
-                <TextInput
-                  label={"Nama Rekening"}
-                  placeholder="Masukan nama rekening"
-                  value={updateData.namaAkun}
-                  onChange={(val) => {
-                    const value = val.currentTarget.value;
-                    setUpdateData({ ...updateData, namaAkun: value });
-                  }}
-                />
-
-                <TextInput
-                  label={"Nomor Rekening Bank"}
-                  placeholder=" Masukan nomor rekening bank"
-                  type="number"
-                  value={updateData.norek}
-                  onChange={(val) => {
-                    const value = val.currentTarget.value;
-                    setUpdateData({ ...updateData, norek: value });
-                  }}
-                />
-                <Group position="right">
-                  <Button
-                    radius={"xl"}
-                    onClick={() => {
-                      setIsUpdate(false);
-                    }}
-                  >
-                    Batal
-                  </Button>
-                  <Button
-                    style={{ transition: "0.5s" }}
-                    disabled={
-                      updateData?.namaBank === "" ||
-                      updateData?.namaAkun === "" ||
-                      updateData?.norek === ""
-                        ? true
-                        : false
-                    }
-                    radius={"xl"}
-                    color="green"
-                    onClick={() => {
-                      onUpdate();
-                    }}
-                  >
-                    Update
-                  </Button>
-                </Group>
-              </Stack>
-            </Paper>
-          ) : (
-            ""
-          )}
-        </Grid.Col>
-      </Grid>
-
-      {/* Activasi bank */}
-      <Modal
-        centered
-        withCloseButton={false}
-        opened={isActivation}
-        onClose={() => setIsActivation(false)}
-      >
-        <Stack align="center">
-          <Title order={5}>
-            Anda ingin{" "}
-            {updateStatus.active ? (
-              <Text span inherit>
-                mengaktifkan
-              </Text>
-            ) : (
-              <Text span inherit>
-                menonaktifkan
-              </Text>
-            )}{" "}
-            Bank ini ?
-          </Title>
-          <Group>
-            <Button radius={"xl"} onClick={() => setIsActivation(false)}>
-              Batal
-            </Button>
-            <Button
-              color="green"
-              radius={"xl"}
-              onClick={() => {
-                onUpdateActivation({
-                  id: updateStatus.id,
-                  value: updateStatus.active as any,
-                });
-              }}
-            >
-              Iya
-            </Button>
-          </Group>
+      <Stack>
+        <Stack spacing={"xs"}>
+          <AdminAppInformation_ComponentTitlePageBank
+            onEventListener={(val: { isCreate: any; isUpdate: any }) => {
+              setIsCreate(val.isCreate);
+              setIsUpdate(val.isUpdate);
+            }}
+          />
         </Stack>
-      </Modal>
+
+        <Grid>
+          <Grid.Col span={9}>
+            <Paper p={"md"} withBorder shadow="lg" h={"65vh"}>
+              <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
+                <Table
+                  verticalSpacing={"xs"}
+                  horizontalSpacing={"md"}
+                  p={"md"}
+                  w={1000}
+                  striped
+                  highlightOnHover
+                >
+                  <thead>
+                    <tr>
+                      <th>
+                        <Center w={150}>Bank</Center>
+                      </th>
+                      <th>
+                        <Center>Status</Center>
+                      </th>
+                      <th>
+                        <Center>Nama Rekening</Center>
+                      </th>
+                      <th>
+                        <Center>Nomor Rekening</Center>
+                      </th>
+                      <th>
+                        <Center>Aksi</Center>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>{rowTable}</tbody>
+                </Table>
+              </ScrollArea>
+            </Paper>
+          </Grid.Col>
+
+          <Grid.Col span={3}>
+            {isCreate ? (
+              <Paper p={"md"} withBorder shadow="lg">
+                <Stack>
+                  <Center>
+                    <Title order={5}>Tambah Daftar Bank</Title>
+                  </Center>
+
+                  <TextInput
+                    label={"Nama Bank"}
+                    placeholder="Masukan nama bank"
+                    onChange={(val) => {
+                      setNewData({
+                        ...newData,
+                        namaBank: val.currentTarget.value,
+                      });
+                    }}
+                  />
+
+                  <TextInput
+                    label={"Nama Rekening"}
+                    placeholder="Masukan nama rekening"
+                    onChange={(val) => {
+                      setNewData({
+                        ...newData,
+                        namaAkun: val.currentTarget.value,
+                      });
+                    }}
+                  />
+
+                  <TextInput
+                    label={"Nomor Rekening Bank"}
+                    placeholder=" Masukan nomor rekening bank"
+                    type="number"
+                    onChange={(val) => {
+                      setNewData({
+                        ...newData,
+                        norek: val.currentTarget.value,
+                      });
+                    }}
+                  />
+                  <Group position="right" align="flex-end">
+                    <Button
+                      radius={"xl"}
+                      onClick={() => {
+                        setIsCreate(false);
+                      }}
+                    >
+                      Batal
+                    </Button>
+                    <Button
+                      loading={isLoadingCreate}
+                      loaderPosition="center"
+                      style={{ transition: "0.5s" }}
+                      disabled={_.values(newData).includes("") ? true : false}
+                      radius={"xl"}
+                      color="green"
+                      onClick={() => {
+                        onCreate();
+                      }}
+                    >
+                      Simpan
+                    </Button>
+                  </Group>
+                </Stack>
+              </Paper>
+            ) : (
+              ""
+            )}
+
+            {isUpdate ? (
+              <Paper p={"md"} withBorder shadow="lg">
+                <Stack>
+                  <Center>
+                    <Title order={5}>Update Data Bank</Title>
+                  </Center>
+                  <TextInput
+                    label={"Nama Bank"}
+                    placeholder="Masukan nama bank"
+                    value={updateData.namaBank}
+                    onChange={(val) => {
+                      const value = val.currentTarget.value;
+                      setUpdateData({ ...updateData, namaBank: value });
+                    }}
+                  />
+
+                  <TextInput
+                    label={"Nama Rekening"}
+                    placeholder="Masukan nama rekening"
+                    value={updateData.namaAkun}
+                    onChange={(val) => {
+                      const value = val.currentTarget.value;
+                      setUpdateData({ ...updateData, namaAkun: value });
+                    }}
+                  />
+
+                  <TextInput
+                    label={"Nomor Rekening Bank"}
+                    placeholder=" Masukan nomor rekening bank"
+                    type="number"
+                    value={updateData.norek}
+                    onChange={(val) => {
+                      const value = val.currentTarget.value;
+                      setUpdateData({ ...updateData, norek: value });
+                    }}
+                  />
+                  <Group position="right">
+                    <Button
+                      radius={"xl"}
+                      onClick={() => {
+                        setIsUpdate(false);
+                      }}
+                    >
+                      Batal
+                    </Button>
+                    <Button
+                      style={{ transition: "0.5s" }}
+                      disabled={
+                        updateData?.namaBank === "" ||
+                        updateData?.namaAkun === "" ||
+                        updateData?.norek === ""
+                          ? true
+                          : false
+                      }
+                      radius={"xl"}
+                      color="green"
+                      onClick={() => {
+                        onUpdate();
+                      }}
+                    >
+                      Update
+                    </Button>
+                  </Group>
+                </Stack>
+              </Paper>
+            ) : (
+              ""
+            )}
+          </Grid.Col>
+        </Grid>
+
+        {/* Activasi bank */}
+        <Modal
+          centered
+          withCloseButton={false}
+          opened={isActivation}
+          onClose={() => setIsActivation(false)}
+        >
+          <Stack align="center">
+            <Title order={5}>
+              Anda ingin{" "}
+              {updateStatus.active ? (
+                <Text span inherit>
+                  mengaktifkan
+                </Text>
+              ) : (
+                <Text span inherit>
+                  menonaktifkan
+                </Text>
+              )}{" "}
+              Bank ini ?
+            </Title>
+            <Group>
+              <Button radius={"xl"} onClick={() => setIsActivation(false)}>
+                Batal
+              </Button>
+              <Button
+                color="green"
+                radius={"xl"}
+                onClick={() => {
+                  onUpdateActivation({
+                    id: updateStatus.id,
+                    value: updateStatus.active as any,
+                  });
+                }}
+              >
+                Iya
+              </Button>
+            </Group>
+          </Stack>
+        </Modal>
+      </Stack>
     </>
   );
 }

src/app_modules/admin/app_info/view/view_kategori_portofolio.tsx

@@ -0,0 +1,358 @@
+import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/interface";
+import {
+    ActionIcon,
+    Button,
+    Center,
+    Grid,
+    Group,
+    Modal,
+    Paper,
+    ScrollArea,
+    Stack,
+    Switch,
+    Table,
+    Text,
+    TextInput,
+    Title,
+    Tooltip,
+} from "@mantine/core";
+import { IconCirclePlus, IconEdit } from "@tabler/icons-react";
+import { useState } from "react";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
+import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../_admin_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_notifikasi/notifikasi_gagal";
+import {
+    adminAppInformation_funCreateBidangBisnis,
+    adminAppInformation_funGetBidangBisnis,
+    adminAppInformation_funUpdateBidangBisnis,
+} from "../fun";
+
+export function AdminAppInformation_ViewKategoriPortofolio({
+  dataBidangBisnis,
+}: {
+  dataBidangBisnis: MODEL_DEFAULT_MASTER_OLD[];
+}) {
+  const [data, setData] = useState(dataBidangBisnis);
+
+  // Create
+  const [isLoadingCreate, setLoadingCreate] = useState(false);
+  const [isCreate, setIsCreate] = useState(false);
+  const [newData, setNewData] = useState("");
+  async function onCreate() {
+    const create = await adminAppInformation_funCreateBidangBisnis({
+      name: newData,
+    });
+
+    if (create.status === 201) {
+      try {
+        setLoadingCreate(true);
+        const loadData = await adminAppInformation_funGetBidangBisnis();
+        setData(loadData);
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setNewData("");
+        setLoadingCreate(false);
+        ComponentAdminGlobal_NotifikasiBerhasil(create.message);
+      }
+    } else {
+      ComponentAdminGlobal_NotifikasiGagal(create.message);
+    }
+  }
+
+  //   Update Data
+  const [isLoadingUpdate, setLoadingUpdate] = useState(false);
+  const [isUpdate, setIsUpdate] = useState(false);
+  const [updateData, setUpdateData] = useState({
+    id: "",
+    name: "",
+  });
+
+  async function onUpdate() {
+    const updt = await adminAppInformation_funUpdateBidangBisnis({
+      data: updateData as any,
+    });
+    if (updt?.status === 200) {
+      try {
+        setLoadingUpdate(true);
+        const loadData = await adminAppInformation_funGetBidangBisnis();
+        setData(loadData);
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setLoadingUpdate(false);
+        ComponentAdminGlobal_NotifikasiBerhasil(updt.message);
+      }
+    } else {
+      ComponentAdminGlobal_NotifikasiGagal(updt?.message as any);
+    }
+  }
+
+  // Activation
+  const [openModal, setOpenModal] = useState(false);
+  const [updateStatus, setUpdateStatus] = useState({
+    id: "",
+    active: null,
+  });
+
+  async function onUpdateActivation({
+    id,
+    active,
+  }: {
+    id: string;
+    active: boolean;
+  }) {
+    const updt = await adminAppInformation_funUpdateBidangBisnis({
+      data: { id: id, active: active },
+    });
+
+    if (updt?.status === 200) {
+      try {
+        setLoadingUpdate(true);
+        const loadData = await adminAppInformation_funGetBidangBisnis();
+        setData(loadData);
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setOpenModal(false);
+        setLoadingUpdate(false);
+        ComponentAdminGlobal_NotifikasiBerhasil(updt?.message);
+      }
+    } else {
+      ComponentAdminGlobal_NotifikasiGagal(updt?.message as any);
+    }
+  }
+
+  //   Row Table
+  const rowTable = data.map((e, i) => (
+    <tr key={i}>
+      <td>
+        <Center>
+          <Text>{e?.name}</Text>
+        </Center>
+      </td>
+      <td>
+        <Center>
+          <Switch
+            color="orange"
+            onLabel="ON"
+            offLabel="OFF"
+            checked={e?.active}
+            onChange={(val) => {
+              setOpenModal(true);
+              setUpdateStatus({
+                id: e?.id,
+                active: val.currentTarget.checked as any,
+              });
+            }}
+          />
+        </Center>
+      </td>
+
+      <td>
+        <Stack align="center" justify="center">
+          <ActionIcon
+            radius={"xl"}
+            variant="transparent"
+            onClick={() => {
+              setIsUpdate(true);
+              setIsCreate(false);
+              setUpdateData({
+                id: e?.id,
+                name: e?.name,
+              });
+            }}
+          >
+            <Tooltip label="Edit">
+              <IconEdit color="green" />
+            </Tooltip>
+          </ActionIcon>
+        </Stack>
+      </td>
+    </tr>
+  ));
+
+  return (
+    <>
+      <Stack>
+        <ComponentAdminGlobal_TitlePage
+          name="Kategori Bidang Bisnis"
+          component={
+            <Button
+              radius={"xl"}
+              leftIcon={<IconCirclePlus />}
+              onClick={() => {
+                setIsCreate(true);
+                setIsUpdate(false);
+              }}
+            >
+              Tambah
+            </Button>
+          }
+        />
+
+        <Grid>
+          <Grid.Col span={9}>
+            <Paper p={"md"} withBorder shadow="lg" h={"65vh"}>
+              <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
+                <Table
+                  verticalSpacing={"xs"}
+                  horizontalSpacing={"md"}
+                  p={"md"}
+                  w={"100%"}
+                  striped
+                  highlightOnHover
+                >
+                  <thead>
+                    <tr>
+                      <th>
+                        <Center>Kategori</Center>
+                      </th>
+                      <th>
+                        <Center>Status</Center>
+                      </th>
+                      <th>
+                        <Center>Aksi</Center>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>{rowTable}</tbody>
+                </Table>
+              </ScrollArea>
+            </Paper>
+          </Grid.Col>
+
+          <Grid.Col span={3}>
+            {/* Form Create */}
+            {isCreate ? (
+              <Paper p={"md"} withBorder shadow="lg">
+                <Stack>
+                  <Center>
+                    <Title order={5}>Tambah Bidang Bisnis</Title>
+                  </Center>
+
+                  <TextInput
+                    placeholder="Masukan nama bidang bisnis"
+                    value={newData}
+                    onChange={(val) => {
+                      setNewData(val.currentTarget.value);
+                    }}
+                  />
+
+                  <Group position="right" align="flex-end">
+                    <Button
+                      radius={"xl"}
+                      onClick={() => {
+                        setIsCreate(false);
+                      }}
+                    >
+                      Batal
+                    </Button>
+                    <Button
+                      loading={isLoadingCreate}
+                      loaderPosition="center"
+                      style={{ transition: "0.5s" }}
+                      disabled={newData == ""}
+                      radius={"xl"}
+                      color="green"
+                      onClick={() => {
+                        onCreate();
+                      }}
+                    >
+                      Simpan
+                    </Button>
+                  </Group>
+                </Stack>
+              </Paper>
+            ) : (
+              ""
+            )}
+            {/* Form Update */}
+            {isUpdate ? (
+              <Paper p={"md"} withBorder shadow="lg">
+                <Stack>
+                  <Center>
+                    <Title order={5}>Update Bidang Bisnis</Title>
+                  </Center>
+                  <TextInput
+                    placeholder="Masukan bidang bisnis"
+                    value={updateData.name}
+                    onChange={(val) => {
+                      const value = val.currentTarget.value;
+                      setUpdateData({ ...updateData, name: value });
+                    }}
+                  />
+
+                  <Group position="right">
+                    <Button
+                      radius={"xl"}
+                      onClick={() => {
+                        setIsUpdate(false);
+                      }}
+                    >
+                      Batal
+                    </Button>
+                    <Button
+                      style={{ transition: "0.5s" }}
+                      disabled={updateData?.name === ""}
+                      radius={"xl"}
+                      color="green"
+                      onClick={() => {
+                        onUpdate();
+                      }}
+                    >
+                      Update
+                    </Button>
+                  </Group>
+                </Stack>
+              </Paper>
+            ) : (
+              ""
+            )}
+          </Grid.Col>
+        </Grid>
+      </Stack>
+
+      {/* Activasi bank */}
+      <Modal
+        centered
+        withCloseButton={false}
+        opened={openModal}
+        onClose={() => setOpenModal(false)}
+      >
+        <Stack align="center">
+          <Title order={5}>
+            Anda ingin{" "}
+            {updateStatus.active ? (
+              <Text span inherit>
+                mengaktifkan
+              </Text>
+            ) : (
+              <Text span inherit>
+                menonaktifkan
+              </Text>
+            )}{" "}
+            Bidang Bisnis ini ?
+          </Title>
+          <Group>
+            <Button radius={"xl"} onClick={() => setOpenModal(false)}>
+              Batal
+            </Button>
+            <Button
+              color="green"
+              radius={"xl"}
+              onClick={() => {
+                onUpdateActivation({
+                  id: updateStatus.id,
+                  active: updateStatus.active as any,
+                });
+              }}
+            >
+              Iya
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}

src/app_modules/admin/donasi/main/index.tsx

@@ -44,13 +44,13 @@ export default function AdminDonasi_Main({
       link: RouterAdminDonasi_OLD.table_review,
       color: "orange",
     },
-    {
-      id: 3,
-      name: "Draft",
-      jumlah: countDraft,
-      link: "",
-      color: "yellow",
-    },
+    // {
+    //   id: 3,
+    //   name: "Draft",
+    //   jumlah: countDraft,
+    //   link: "",
+    //   color: "yellow",
+    // },
     {
       id: 4,
       name: "Reject",
@@ -65,7 +65,7 @@ export default function AdminDonasi_Main({
         <ComponentAdminGlobal_HeaderTamplate name="Donasi" />
 
         <SimpleGrid
-          cols={4}
+          cols={listBox.length}
           spacing="lg"
           breakpoints={[
             { maxWidth: "62rem", cols: 4, spacing: "lg" },
@@ -92,47 +92,6 @@ export default function AdminDonasi_Main({
           ))}
         </SimpleGrid>
       </Stack>
-
-      {/* <Stack spacing={"sm"}>
-        <Title>Donasi</Title>
-        <Divider mb={"md"} />
-        <SimpleGrid
-          cols={4}
-          spacing="lg"
-          breakpoints={[
-            { maxWidth: "62rem", cols: 4, spacing: "lg" },
-            { maxWidth: "48rem", cols: 2, spacing: "sm" },
-            { maxWidth: "36rem", cols: 1, spacing: "sm" },
-          ]}
-        >
-          {listBox.map((e, i) => (
-            <Paper
-              key={i}
-              bg={`${e.color}.2`}
-              shadow="md"
-              radius="md"
-              p="md"
-              //   sx={{ borderColor: e.color, borderStyle: "solid" }}
-            >
-              <Group position="apart">
-                <IconChevronsRight color={`${e.color}.2`} />
-                <Stack align="center" spacing={0}>
-                  <Text>{e.name}</Text>
-                  <Title>{e.jumlah}</Title>
-                </Stack>
-                {e.link !== "" ? (
-                  <ActionIcon radius={"xl"} onClick={() => router.push(e.link)}>
-                    {" "}
-                    <IconChevronsRight />
-                  </ActionIcon>
-                ) : (
-                  <ActionIcon variant="transparent" disabled></ActionIcon>
-                )}
-              </Group>
-            </Paper>
-          ))}
-        </SimpleGrid>
-      </Stack> */}
     </>
   );
 }

src/app_modules/admin/event/_ui/ui_detail_peserta.tsx

@@ -4,7 +4,7 @@ import { Stack } from "@mantine/core";
 import ComponentAdminGlobal_BackButton from "../../_admin_global/back_button";
 import { AdminEvent_ViewDetailPeserta } from "../_view";
 import { MODEL_EVENT_PESERTA } from "@/app_modules/event/model/interface";
-import { ComponentAdminGlobal_TitlePage } from "../../_admin_global";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 
 export function AdminEvent_UiDetailPeserta({
   dataPeserta,

src/app_modules/admin/investasi/_component/button/button_banding_transaksi.tsx

@@ -1,7 +1,10 @@
 "use client";
 
 import { Button } from "@mantine/core";
-import { adminInvestasi_funAcceptTransaksiById, adminInvestasi_funGetAllTransaksiById } from "../../fun";
+import {
+  adminInvestasi_funAcceptTransaksiById,
+  adminInvestasi_funGetAllTransaksiById,
+} from "../../fun";
 import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
 import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
 import { useState } from "react";
@@ -9,15 +12,21 @@ import { useState } from "react";
 export function AdminInvestasi_ComponentButtonBandingTransaksi({
   invoiceId,
   investasiId,
+  lembarTerbeli,
   onLoadData,
 }: {
   invoiceId: string;
-  investasiId: string
+  investasiId: string;
+  lembarTerbeli: string;
   onLoadData: (val: any) => void;
 }) {
-  const [isLoading, setLoading] = useState(false)
+  const [isLoading, setLoading] = useState(false);
   async function onAccept() {
-    const res = await adminInvestasi_funAcceptTransaksiById({ invoiceId });
+    const res = await adminInvestasi_funAcceptTransaksiById({
+      invoiceId,
+      investasiId,
+      lembarTerbeli,
+    });
 
     if (res.status == 200) {
       try {

src/app_modules/admin/investasi/_component/button/button_konfirmasi_transaksi.tsx

@@ -9,14 +9,17 @@ import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin
 import { useState } from "react";
 import { IconCircleCheck } from "@tabler/icons-react";
 import { IconBan } from "@tabler/icons-react";
+import { MODEL_INVOICE_INVESTASI } from "@/app_modules/investasi/_lib/interface";
 
 export function AdminInvestasi_ComponentButtonKonfirmasiTransaksi({
   invoiceId,
   investasiId,
+  lembarTerbeli,
   onLoadData,
 }: {
   invoiceId: string;
   investasiId: string;
+  lembarTerbeli: string;
   onLoadData: (val: any) => void;
 }) {
   const [isLoadingAccpet, setLoadingAccept] = useState(false);
@@ -43,7 +46,11 @@ export function AdminInvestasi_ComponentButtonKonfirmasiTransaksi({
   }
 
   async function onAccept() {
-    const res = await adminInvestasi_funAcceptTransaksiById({ invoiceId });
+    const res = await adminInvestasi_funAcceptTransaksiById({
+      invoiceId,
+      investasiId,
+      lembarTerbeli,
+    });
 
     if (res.status == 200) {
       try {

src/app_modules/admin/investasi/_view/detail/view_daftar_transaksi.tsx

@@ -1,5 +1,4 @@
-import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
-import { ComponentAdminGlobal_TampilanRupiah } from "@/app_modules/admin/_admin_global";
+import { ComponentAdminGlobal_TampilanRupiah } from "@/app_modules/admin/_admin_global/_component";
 import {
   MODEL_INVOICE_INVESTASI,
   MODEL_STATUS_INVOICE_INVESTASI,
@@ -7,7 +6,6 @@ import {
 import {
   ActionIcon,
   Badge,
-  Button,
   Center,
   Group,
   Pagination,
@@ -140,6 +138,7 @@ export function AdminInvestasi_ViewDaftarTransaksi({
             <AdminInvestasi_ComponentButtonKonfirmasiTransaksi
               invoiceId={e.id}
               investasiId={investasiId}
+              lembarTerbeli={e.lembarTerbeli}
               onLoadData={(val) => {
                 setData(val.data);
                 setNPage(val.nPage);
@@ -151,6 +150,7 @@ export function AdminInvestasi_ViewDaftarTransaksi({
             <AdminInvestasi_ComponentButtonBandingTransaksi
               invoiceId={e.id}
               investasiId={investasiId}
+              lembarTerbeli={e.lembarTerbeli}
               onLoadData={(val) => {
                 setData(val.data);
                 setNPage(val.nPage);

src/app_modules/admin/investasi/detail/detail_bukti_transfer.tsx

@@ -3,7 +3,7 @@
 import { Stack } from "@mantine/core";
 import ComponentAdminGlobal_BackButton from "../../_admin_global/back_button";
 import { AdminInvestasi_ViewBuktiTransfer } from "../_view";
-import { ComponentAdminGlobal_TitlePage } from "../../_admin_global";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 
 export function AdminInvestasi_DetailBuktiTransfer({ imageId }: { imageId: string }) {
   return (

src/app_modules/admin/investasi/fun/edit/fun_accept_invoice_by_id.ts

@@ -2,13 +2,43 @@
 
 import prisma from "@/app/lib/prisma";
 import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
+import { toNumber } from "lodash";
 import { revalidatePath } from "next/cache";
 
 export async function adminInvestasi_funAcceptTransaksiById({
   invoiceId,
+  investasiId,
+  lembarTerbeli,
 }: {
   invoiceId: string;
+  investasiId: string;
+  lembarTerbeli: string;
 }) {
+  const dataInvestasi: any = await prisma.investasi.findFirst({
+    where: {
+      id: investasiId,
+    },
+    select: {
+      totalLembar: true,
+      sisaLembar: true,
+      lembarTerbeli: true,
+    },
+  });
+
+  // Hitung TOTAL SISA LEMBAR
+  const investasi_sisaLembar = toNumber(dataInvestasi?.sisaLembar);
+  const invoice_lembarTerbeli = toNumber(lembarTerbeli);
+  const resultSisaLembar = investasi_sisaLembar - invoice_lembarTerbeli;
+
+  // TAMBAH LEMBAR TERBELI
+  const investasi_lembarTerbeli = toNumber(dataInvestasi?.lembarTerbeli);
+  const resultLembarTerbeli = investasi_lembarTerbeli + invoice_lembarTerbeli;
+
+  // Progress
+  const investasi_totalLembar = toNumber(dataInvestasi?.totalLembar);
+  const progress = (resultLembarTerbeli / investasi_totalLembar) * 100;
+  const resultProgres = toNumber(progress).toFixed(2);
+
   const updt = await prisma.investasi_Invoice.update({
     where: {
       id: invoiceId,
@@ -18,10 +48,27 @@ export async function adminInvestasi_funAcceptTransaksiById({
     },
   });
 
-  if (!updt) return { status: 400, message: "Gagal Update" };
-  revalidatePath(RouterAdminInvestasi.detail_publish);
-  return {
-    status: 200,
-    message: "Update Berhasil",
-  };
+  if (!updt) {
+    return { status: 400, message: "Gagal Update Status" };
+  } else {
+    const updateInvestasi = await prisma.investasi.update({
+      where: {
+        id: investasiId,
+      },
+      data: {
+        sisaLembar: resultSisaLembar.toString(),
+        lembarTerbeli: resultLembarTerbeli.toString(),
+        progress: resultProgres,
+      },
+    });
+
+    if (!updateInvestasi)
+      return { status: 400, message: "Gagal Update Data Investasi" };
+
+    revalidatePath(RouterAdminInvestasi.detail_publish);
+    return {
+      status: 200,
+      message: "Update Berhasil",
+    };
+  }
 }

src/app_modules/admin/investasi/fun/get/get_all_publish.ts

@@ -16,9 +16,11 @@ export async function adminInvestasi_funGetAllPublish({
   const data = await prisma.investasi.findMany({
     take: takeData,
     skip: skipData,
-    orderBy: {
-      countDown: "desc",
-    },
+    orderBy: [
+      {
+        countDown: "desc",
+      },
+    ],
     where: {
       active: true,
       masterStatusInvestasiId: "1",
@@ -27,17 +29,7 @@ export async function adminInvestasi_funGetAllPublish({
         mode: "insensitive",
       },
     },
-    select: {
-      id: true,
-      title: true,
-      authorId: true,
-      hargaLembar: true,
-      targetDana: true,
-      totalLembar: true,
-      roi: true,
-      active: true,
-      imagesId: true,
-      catatan: true,
+    include: {
       MasterStatusInvestasi: true,
       BeritaInvestasi: true,
       DokumenInvestasi: true,
@@ -46,8 +38,11 @@ export async function adminInvestasi_funGetAllPublish({
       MasterPencarianInvestor: true,
       MasterPeriodeDeviden: true,
       author: true,
-      progress: true,
-      sisaLembar: true,
+      Investasi_Invoice: {
+        where: {
+          statusInvoiceId: "2",
+        },
+      },
     },
   });
 

src/app_modules/admin/investasi/main/table_publish.tsx

@@ -98,6 +98,11 @@ function TableView({ listData }: { listData: any }) {
           }).format(+e.totalLembar)}
         </Center>
       </td>
+      <td>
+        <Center w={200}>
+          <Text lineClamp={1}>{e.Investasi_Invoice.length}</Text>
+        </Center>
+      </td>
       <td>
         <Center w={200}>
           <Button
@@ -172,6 +177,9 @@ function TableView({ listData }: { listData: any }) {
                     <th>
                       <Center w={200}>Total Saham</Center>
                     </th>
+                    <th>
+                      <Center w={200}>Validasi</Center>
+                    </th>
                     <th>
                       <Center w={200}>Aksi</Center>
                     </th>

src/app_modules/donasi/component/card_view/card_invoice.tsx

@@ -1,3 +1,7 @@
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import {
   AspectRatio,
   Badge,
@@ -10,16 +14,11 @@ import {
   Stack,
   Text,
 } from "@mantine/core";
-import { MODEL_DONASI_INVOICE } from "../../model/interface";
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
-import TampilanRupiahDonasi from "../tampilan_rupiah";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { MODEL_DONASI_INVOICE } from "../../model/interface";
+import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
+import TampilanRupiahDonasi from "../tampilan_rupiah";
 
 export function ComponentDonasi_CardInvoice({
   data,

src/app_modules/donasi/component/card_view/card_publish.tsx

@@ -2,9 +2,9 @@
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 import {
   AspectRatio,
-  Box,
   Card,
   Grid,
   Image,
@@ -14,10 +14,9 @@ import {
   Text,
 } from "@mantine/core";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
 import TampilanRupiahDonasi from "../tampilan_rupiah";
-import { useState } from "react";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
 
 export default function ComponentDonasi_CardPublish({
   data,

src/app_modules/donasi/component/card_view/card_status.tsx

@@ -1,19 +1,18 @@
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 import {
-  Box,
-  Stack,
-  Grid,
   AspectRatio,
-  Paper,
-  Image,
-  Text,
   Card,
+  Grid,
+  Image,
+  Paper,
+  Stack,
+  Text,
 } from "@mantine/core";
 import { useRouter } from "next/navigation";
-import { MODEL_DONASI } from "../../model/interface";
 import { useState } from "react";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { MODEL_DONASI } from "../../model/interface";
 
 export function ComponentDonasi_CardStatus({
   data,

src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx

@@ -1,40 +1,35 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import { MODEL_DONASI } from "../../model/interface";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
-  Stack,
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import {
   AspectRatio,
-  Paper,
-  Title,
-  Group,
-  Progress,
-  Grid,
   Divider,
+  Grid,
+  Group,
   Image,
+  Progress,
+  Stack,
   Text,
-  Center,
-  Loader,
+  Title,
 } from "@mantine/core";
 import {
   IconClover,
   IconMessageChatbot,
   IconMoneybag,
 } from "@tabler/icons-react";
-import TampilanRupiahDonasi from "../tampilan_rupiah";
-import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { NotifPeringatan } from "../notifikasi/notif_peringatan";
-import { NotifBerhasil } from "../notifikasi/notif_berhasil";
-import { Donasi_findDonaturByTokenId } from "../../fun/get/get_donatur_by_token_id";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Donasi_findDonaturByTokenId } from "../../fun/get/get_donatur_by_token_id";
+import { MODEL_DONASI } from "../../model/interface";
+import { NotifPeringatan } from "../notifikasi/notif_peringatan";
+import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
+import TampilanRupiahDonasi from "../tampilan_rupiah";
 
 export function ComponentDonasi_DetailDataMain({
   donasi,

src/app_modules/event/component/box_list_status.tsx

@@ -1,13 +1,11 @@
 "use client";
 
-import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { Paper, Stack, Group, Title, Text, Grid, Card } from "@mantine/core";
-import moment from "moment";
-import { MODEL_EVENT } from "../model/interface";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import { Card, Group, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { MODEL_EVENT } from "../model/interface";
 
 export default function ComponentEvent_BoxListStatus({
   data,

src/app_modules/event/component/card_view/card_beranda.tsx

@@ -1,19 +1,16 @@
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
-import { Card, Grid, Group, Stack, Text, Title } from "@mantine/core";
-import moment from "moment";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import { Card, Group, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 export function ComponentEvent_CardBeranda({ data }: { data: any }) {
   const router = useRouter();
-  const [isLoading, setLoading] = useState(false);
-
   const [eventId, setEventId] = useState("");
   const [visible, setVisible] = useState(false);
-  
+
   return (
     <>
       <Card

src/app_modules/event/component/card_view/card_kontributor.tsx

@@ -2,7 +2,7 @@ import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 import { Avatar, Box, Card, Grid, Group, Stack, Text, Title } from "@mantine/core";
 import moment from "moment";
 import { useRouter } from "next/navigation";

src/app_modules/event/component/card_view/card_riwayat.tsx

@@ -3,10 +3,10 @@ import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_nam
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { Card, Group, Stack, Text, Title } from "@mantine/core";
 
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 import { useRouter } from "next/navigation";
-import { MODEL_EVENT } from "../../model/interface";
 import { useState } from "react";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { MODEL_EVENT } from "../../model/interface";
 
 export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
   const router = useRouter();

src/app_modules/investasi/_component/comp_card_border_and_background.tsx

@@ -0,0 +1,40 @@
+import { AccentColor } from "@/app_modules/_global/color";
+import { Card } from "@mantine/core";
+import React from "react";
+
+export function Investasi_ComponentStylesCard({
+  children,
+  backgroundColor,
+  border,
+  marginBottom,
+  onClickHandler,
+}: {
+  children: React.ReactNode;
+  backgroundColor?: string;
+  border?: string;
+  marginBottom?: string | number;
+  onClickHandler?: (val: any) => void;
+}) {
+  
+  return (
+    <>
+      <Card
+        style={{
+          backgroundColor: backgroundColor
+            ? backgroundColor
+            : AccentColor.darkblue,
+          border: `2px solid ${border ? border : AccentColor.blue}`,
+          paddingInline: "20px",
+          paddingTop: "15px",
+          paddingBottom: "20px",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: marginBottom ? marginBottom : "0x",
+        }}
+        onClick={onClickHandler}
+      >
+        {children}
+      </Card>
+    </>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { 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";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function Investasi_ComponentBoxDaftarBerita({
+  investasiId,
+}: {
+  investasiId: string;
+}) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Paper
+        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}>Berita</Text>
+          <ActionIcon
+            radius={"xl"}
+            variant="transparent"
+            size={60}
+            onClick={() => {
+              setLoading(true);
+              router.push(RouterInvestasi_OLD.daftar_berita + investasiId);
+            }}
+          >
+            {isLoading ? (
+              <Loader color="yellow" />
+            ) : (
+              <IconFileDescription size={70} color="white" />
+            )}
+          </ActionIcon>
+        </Flex>
+      </Paper>
+    </>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { 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";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function Investasi_ComponentBoxDaftarDokumen({
+  investasiId,
+}: {
+  investasiId: string;
+}) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Paper
+        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}>Dokumen</Text>
+          <ActionIcon
+            radius={"xl"}
+            variant="transparent"
+            size={60}
+            onClick={() => {
+              setLoading(true);
+              router.push(RouterInvestasi_OLD.detail_dokumen + investasiId);
+            }}
+          >
+            {isLoading ? (
+              <Loader color="yellow" />
+            ) : (
+              <IconFileDescription size={70} color="white" />
+            )}
+          </ActionIcon>
+        </Flex>
+      </Paper>
+    </>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { 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 { IconBookDownload } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function Investasi_ComponentBoxProspektus({
+  investasiId,
+}: {
+  investasiId: string;
+}) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Paper
+        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}>Prospektus</Text>
+          <ActionIcon
+            radius={"xl"}
+            variant="transparent"
+            size={60}
+            onClick={() => {
+              setLoading(true);
+              router.push(RouterInvestasi_OLD.detail_prospektus + investasiId);
+            }}
+          >
+            {isLoading ? (
+              <Loader color="yellow" />
+            ) : (
+              <IconBookDownload size={70} color="white" />
+            )}
+          </ActionIcon>
+        </Flex>
+      </Paper>
+    </>
+  );
+}

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

@@ -0,0 +1,138 @@
+import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { ComponentGlobal_AvatarAndAuthorName } from "@/app_modules/_global/component";
+import { MODEL_INVOICE_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import {
+  Stack,
+  AspectRatio,
+  Title,
+  Grid,
+  Box,
+  SimpleGrid,
+  Image,
+  Text,
+} from "@mantine/core";
+import { Investasi_ComponentStylesCard } from "../../comp_card_border_and_background";
+import { Investasi_ComponentBoxDaftarBerita } from "../comp_box_daftar_berita";
+import { Investasi_ComponentBoxDaftarDokumen } from "../comp_box_daftar_dokumen";
+import { Investasi_ComponentBoxProspektus } from "../comp_box_prospektus";
+
+export function Investasi_ComponentBoxDetailData({
+  data,
+}: {
+  data: MODEL_INVOICE_INVESTASI;
+}) {
+  return (
+    <>
+      <Investasi_ComponentStylesCard>
+        <Stack>
+          <ComponentGlobal_AvatarAndAuthorName dataUser={data?.Author} />
+          <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>
+          <Title order={3} mb={"xs"} align="center">
+            {data?.Investasi.title}
+          </Title>
+
+          {/* Rincian Data */}
+          <Grid mb={"md"}>
+            <Grid.Col span={6}>
+              <Stack>
+                <Box>
+                  <Text>Dana Dibutuhkan</Text>
+                  <Text fw={"bold"}>
+                    Rp.{" "}
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumSignificantDigits: 10,
+                    }).format(+data?.Investasi.targetDana)}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text>Harga Per Lembar</Text>
+                  <Text fw={"bold"}>
+                    Rp.{" "}
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumSignificantDigits: 10,
+                    }).format(+data?.Investasi.hargaLembar)}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text>Jadwal Pembagian</Text>
+                  <Text fw={"bold"}>
+                    {data?.Investasi?.MasterPembagianDeviden?.name} bulan{" "}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text>Pembagian Deviden</Text>
+                  <Text fw={"bold"}>
+                    {data?.Investasi?.MasterPeriodeDeviden?.name}
+                  </Text>
+                </Box>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Stack>
+                <Box>
+                  <Text>Investor</Text>
+                  <Text fw={"bold"}>
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumSignificantDigits: 10,
+                    }).format(data?.Investor?.length)}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text>ROI</Text>
+                  <Text fw={"bold"}>{data?.Investasi.roi}%</Text>
+                </Box>
+                <Box>
+                  <Text>Total Lembar</Text>
+                  <Text fw={"bold"}>
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumSignificantDigits: 10,
+                    }).format(+data?.Investasi.totalLembar)}{" "}
+                    lembar
+                  </Text>
+                </Box>
+                <Box>
+                  <Text>Sisa Lembar</Text>
+                  <Text fw={"bold"}>
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumSignificantDigits: 10,
+                    }).format(+data?.Investasi.sisaLembar)}{" "}
+                    lembar
+                  </Text>
+                </Box>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+
+          <SimpleGrid
+            cols={3}
+            breakpoints={[
+              { maxWidth: "62rem", cols: 3, spacing: "md" },
+              { maxWidth: "48rem", cols: 2, spacing: "sm" },
+              { maxWidth: "36rem", cols: 1, spacing: "sm" },
+            ]}
+          >
+            <Investasi_ComponentBoxProspektus
+              investasiId={data?.Investasi?.id}
+            />
+            <Investasi_ComponentBoxDaftarDokumen
+              investasiId={data?.Investasi?.id}
+            />
+            <Investasi_ComponentBoxDaftarBerita
+              investasiId={data?.Investasi?.id}
+            />
+          </SimpleGrid>
+        </Stack>
+      </Investasi_ComponentStylesCard>
+    </>
+  );
+}

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

@@ -0,0 +1,49 @@
+import {
+  ComponentGlobal_TampilanRupiah,
+  ComponentGlobal_TampilanAngkaRatusan,
+} from "@/app_modules/_global/component";
+import { Stack, Grid, Text } from "@mantine/core";
+import { data } from "autoprefixer";
+import { Investasi_ComponentStylesCard } from "../../comp_card_border_and_background";
+import { MODEL_INVOICE_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+
+export function Investasi_ComponentBoxHargaDanLembarSaham({
+  data,
+}: {
+  data: MODEL_INVOICE_INVESTASI;
+}) {
+  return (
+    <>
+      <Investasi_ComponentStylesCard>
+        <Stack>
+          <Stack spacing={5}>
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Transaksi Saham</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <ComponentGlobal_TampilanRupiah
+                  fontWeight={"bold"}
+                  nominal={+data?.nominal}
+                />
+              </Grid.Col>
+            </Grid>
+
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Saham Terbeli</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <ComponentGlobal_TampilanAngkaRatusan
+                  fontWeight={"bold"}
+                  nominal={+data?.lembarTerbeli}
+                  textAfter="Lembar"
+                />
+              </Grid.Col>
+            </Grid>
+          </Stack>
+        </Stack>
+      </Investasi_ComponentStylesCard>
+    </>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { MainColor } from "@/app_modules/_global/color";
+import { Stack, Progress, Text } from "@mantine/core";
+import { Investasi_ComponentStylesCard } from "../../comp_card_border_and_background";
+
+export function Investasi_ComponentBoxProgress({
+  progress,
+}: {
+  progress: string;
+}) {
+  return (
+    <>
+      <Investasi_ComponentStylesCard>
+        <Stack>
+          <Text fw={"bold"}>Progres Saham</Text>
+          <Progress
+            styles={{ label: { color: "black" } }}
+            color={MainColor.yellow}
+            size={"xl"}
+            value={+progress}
+            label={progress + "%"}
+            radius={"xl"}
+          />
+        </Stack>
+      </Investasi_ComponentStylesCard>
+    </>
+  );
+}

src/app_modules/investasi/_component/index.ts

@@ -1,5 +1,13 @@
+import { Investasi_ComponentStylesCard } from "./comp_card_border_and_background";
+import { Investasi_ComponentBoxDaftarBerita } from "./detail/comp_box_daftar_berita";
+import { Investasi_ComponentBoxDaftarDokumen } from "./detail/comp_box_daftar_dokumen";
+import { Investasi_ComponentBoxProspektus } from "./detail/comp_box_prospektus";
+import { Investasi_ComponentBoxDetailData } from "./detail/saham_saya/comp_detail_data";
+import { Investasi_ComponentBoxHargaDanLembarSaham } from "./detail/saham_saya/comp_harga_dan_lembar";
+import { Investasi_ComponentBoxProgress } from "./detail/saham_saya/comp_progress_saham";
 import { Investasi_ComponentCardBeranda } from "./main/comp_card_beranda";
 import { Investasi_ComponentCardDaftarTransaksi } from "./main/comp_card_daftar_transaksi";
+import { Investasi_ComponentSahamSaya } from "./main/comp_card_saham_saya";
 import { Investasi_ComponentFooterMain } from "./main/comp_footer_main";
 import { Investasi_ComponentButtonUpdateBeranda } from "./main/comp_update_beranda";
 
@@ -7,3 +15,11 @@ export { Investasi_ComponentFooterMain };
 export { Investasi_ComponentCardBeranda };
 export { Investasi_ComponentButtonUpdateBeranda };
 export { Investasi_ComponentCardDaftarTransaksi };
+export { Investasi_ComponentSahamSaya };
+export { Investasi_ComponentStylesCard as Investasasi_ComponentBoxBorderAndBackground };
+export { Investasi_ComponentBoxProspektus };
+export { Investasi_ComponentBoxDaftarDokumen };
+export { Investasi_ComponentBoxDaftarBerita };
+export { Investasi_ComponentBoxHargaDanLembarSaham };
+export { Investasi_ComponentBoxProgress };
+export { Investasi_ComponentBoxDetailData };

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

@@ -19,7 +19,7 @@ import moment from "moment";
 import { MODEL_INVESTASI } from "../../_lib/interface";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 
 export function Investasi_ComponentCardBeranda({
   data,

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

@@ -16,7 +16,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 
 export function Investasi_ComponentCardDaftarTransaksi({
   data,
@@ -32,15 +32,13 @@ export function Investasi_ComponentCardDaftarTransaksi({
     invoiceId: string;
     statusInvoiceId: string;
   }) {
-
     // Berhasil
-     if (statusInvoiceId === "1") {
-       setVisible(true);
-       return router.push(NEW_RouterInvestasi.transaksi_berhasil + invoiceId, {
-         scroll: false,
-       });
-     }
-
+    if (statusInvoiceId === "1") {
+      setVisible(true);
+      return router.push(NEW_RouterInvestasi.transaksi_berhasil + invoiceId, {
+        scroll: false,
+      });
+    }
 
     // Proses
     if (statusInvoiceId === "2") {
@@ -86,24 +84,39 @@ export function Investasi_ComponentCardDaftarTransaksi({
         }
       >
         <Group position="apart">
-          <Title order={6}>{data.Investasi.title}</Title>
-          <Title order={5}>
+          <Text fw={"bold"}>{data.Investasi.title}</Text>
+          <Text fw={"bold"}>
             Rp.
             {new Intl.NumberFormat("id-ID", {
               maximumFractionDigits: 10,
             }).format(+data.nominal)}
-          </Title>
+          </Text>
         </Group>
         <Group position="apart">
           <Stack spacing={0}>
             {/* <Text fz={"xs"}>Bank {data.namaBank}</Text> */}
-            <Text fz={"xs"}>{moment(data.createdAt).format("ll")}</Text>
+            <Text fz={"xs"} c={"gray"}>
+              {new Intl.DateTimeFormat("id-ID", { dateStyle: "long" }).format(
+                data.createdAt
+              )}
+            </Text>
           </Stack>
-          <Text>{data.lembarTerbeli} Lembar</Text>
+          <Title
+            order={6}
+            c={
+              data.statusInvoiceId === "1"
+                ? "green"
+                : data.statusInvoiceId === "2"
+                  ? "blue"
+                  : data.statusInvoiceId === "3"
+                    ? "orange"
+                    : "red"
+            }
+          >
+            {data.StatusInvoice.name}
+          </Title>
         </Group>
-        <Center mt={"sm"}>
-          <Badge>{data.StatusInvoice.name}</Badge>
-        </Center>
+
         {visible && <ComponentGlobal_CardLoadingOverlay />}
       </Card>
     </>

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

@@ -0,0 +1,104 @@
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import {
+  Box,
+  Card,
+  Center,
+  Group,
+  Paper,
+  Progress,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_TampilanAngkaRatusan,
+  ComponentGlobal_TampilanRupiah,
+} from "@/app_modules/_global/component";
+import { useRouter } from "next/navigation";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { useState } from "react";
+import { Investasi_ComponentStylesCard } from "../comp_card_border_and_background";
+
+export function Investasi_ComponentSahamSaya({
+  data,
+}: {
+  data: MODEL_INVOICE_INVESTASI;
+}) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Investasi_ComponentStylesCard
+        onClickHandler={() => {
+          setVisible(true);
+          router.push(NEW_RouterInvestasi.detail_saham + data?.id, {
+            scroll: false,
+          });
+        }}
+        marginBottom={"15px"}
+      >
+        <SimpleGrid cols={2} spacing={"xs"}>
+          <Box>
+            <Stack spacing={0}>
+              <Text fw={"bold"} lineClamp={2}>
+                {data?.Investasi?.title}
+              </Text>
+              <ComponentGlobal_TampilanRupiah
+                nominal={+data?.nominal}
+                color="white"
+                fontSize={"xs"}
+              />
+              <ComponentGlobal_TampilanAngkaRatusan
+                nominal={+data?.lembarTerbeli}
+                color="white"
+                fontSize={"xs"}
+                textAfter="Lembar"
+              />
+            </Stack>
+          </Box>
+
+          <Stack justify="center">
+            <Progress
+              size={"xl"}
+              radius={"xl"}
+              color="yellow"
+              value={+data.Investasi.progress}
+              label={data.Investasi.progress + "%"}
+              styles={{
+                bar: {
+                  backgroundColor: MainColor.yellow,
+                },
+                root: {
+                  backgroundColor: "whitesmoke",
+                },
+                label: {
+                  color: "black",
+                },
+              }}
+            />
+          </Stack>
+        </SimpleGrid>
+        {visible && <ComponentGlobal_CardLoadingOverlay />}
+      </Investasi_ComponentStylesCard>
+
+      {/* <Card
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "15px",
+        }}
+        onClick={}
+      ></Card> */}
+    </>
+  );
+}

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

@@ -2,7 +2,7 @@
 
 import prisma from "@/app/lib/prisma";
 
-export async function investasi_funGetInvoiceById({
+export async function investasi_funGetOneInvoiceById({
   invoiceId,
 }: {
   invoiceId: string;
@@ -14,8 +14,30 @@ export async function investasi_funGetInvoiceById({
     include: {
       MasterBank: true,
       StatusInvoice: true,
+      Investasi: {
+        include: {
+          MasterPembagianDeviden: true,
+          MasterPencarianInvestor: true,
+          MasterPeriodeDeviden: true,
+          ProspektusInvestasi: true,
+          Investasi_Invoice: {
+            where: {
+              statusInvoiceId: "1",
+            },
+          },
+        },
+      },
+      Author: {
+        include: {
+          Profile: true,
+        },
+      },
     },
   });
 
-  return data;
+  const { ...allData } = data;
+  const Investor = data?.Investasi?.Investasi_Invoice;
+  const result = { ...allData, Investor };
+
+  return result;
 }

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

@@ -0,0 +1,32 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function investasi_funGetSuccessTransactionById({
+  page,
+}: {
+  page: number;
+}) {
+  const authorId = await user_getOneUserId();
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.investasi_Invoice.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      authorId: authorId,
+      statusInvoiceId: "1",
+      isActive: true,
+    },
+    include: {
+      Investasi: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/investasi/_fun/index.ts

@@ -2,8 +2,10 @@ import { investasi_funGetProspekById } from "./get/fun_get_file_by_prospek_id";
 import { investasi_funGetOneInvestasiById } from "./get/fun_get_one_investasi_by_id";
 import { investasi_funGetTransaksiByUserId } from "./get/fun_get_all_transaksi_by_user_id";
 import { investasi_funUploadBuktiTransferById } from "./upload/fun_upload_bukti_transfer";
+import { investasi_funGetSuccessTransactionById } from "./get/fun_get_success_transaction_by_id";
 
 export { investasi_funGetOneInvestasiById };
 export { investasi_funGetProspekById };
 export { investasi_funUploadBuktiTransferById };
 export { investasi_funGetTransaksiByUserId };
+export { investasi_funGetSuccessTransactionById };

src/app_modules/investasi/_lib/interface.ts

@@ -31,6 +31,7 @@ export interface MODEL_INVESTASI {
   masterStatusInvestasiId: string;
   author: MODEL_PROFILE_OLD;
   countDown: Date;
+  Investasi_Invoice: MODEL_INVOICE_INVESTASI[];
 }
 
 export interface MODEL_Transaksi_Investasi {
@@ -128,11 +129,11 @@ export interface MODEL_INVOICE_INVESTASI {
   masterBankId: string;
   statusInvoiceId: string;
   authorId: string;
-  Author: MODEL_USER
+  Author: MODEL_USER;
   imagesId: string;
   MasterBank: MODEL_MASTER_BANK;
   StatusInvoice: MODEL_STATUS_INVOICE_INVESTASI;
-
+  Investor: any[];
 }
 
 export interface MODEL_STATUS_INVOICE_INVESTASI {

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

@@ -0,0 +1,17 @@
+"use client";
+
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Investasi_ViewDetailSahamSaya } from "../../_view";
+
+export function Investasi_UiDetailSahamSaya({ dataSaham }: { dataSaham: any }) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Saham" />}
+      >
+        <Investasi_ViewDetailSahamSaya dataSaham={dataSaham as any} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

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

@@ -0,0 +1,31 @@
+"use client";
+
+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 { IconX } from "@tabler/icons-react";
+import dynamic from "next/dynamic";
+const PdfToImage = dynamic(
+  () =>
+    import("../../_view/file_view/view_file_viewer").then((mod) => mod.default),
+  { ssr: false }
+);
+
+export function Investasi_UiFileViewDokumen({
+  dokumenId,
+}: {
+  dokumenId: string;
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="" iconLeft={<IconX/>} />}
+      >
+        <PdfToImage
+          id={dokumenId}
+          path={RouterInvestasi_OLD.api_file_dokumen}
+        />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

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

@@ -0,0 +1,31 @@
+"use client";
+
+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 { IconX } from "@tabler/icons-react";
+import dynamic from "next/dynamic";
+const PdfToImage = dynamic(
+  () =>
+    import("../../_view/file_view/view_file_viewer").then((mod) => mod.default),
+  { ssr: false }
+);
+
+export function Investasi_UiFileViewProspektus({
+  prospekId,
+}: {
+  prospekId: string;
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="" iconLeft={<IconX />} />}
+      >
+        <PdfToImage
+          id={prospekId}
+          path={RouterInvestasi_OLD.api_file_prospektus}
+        />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/investasi/_ui/index.ts

@@ -1,4 +1,4 @@
-import { Investasi_UiFileView } from "./ui_file_view";
+import { Investasi_UiFileViewProspektus } from "./file_view/ui_file_view_prospektus";
 import { Investasi_UiInvoice } from "./transaksi/ui_invoice";
 import { Investasi_UiMetodePembayaran } from "./transaksi/ui_metode_pembayaran";
 import { Investasi_UiProsesPembelian } from "./transaksi/ui_proses_pembelian";
@@ -7,13 +7,19 @@ import { Investasi_UiBeranda } from "./main/ui_beranda";
 import { Investasi_UiLayoutMain } from "./main/ui_layout_main";
 import { Investasi_UiDaftarTransaksi } from "./main/ui_transaksi";
 import { Investasi_UiTransaksiBerhasil } from "./status_transaksi/ui_transaksi_berhasil";
+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";
 
 export { Investasi_UiProsesPembelian };
 export { Investasi_UiMetodePembayaran };
-export { Investasi_UiFileView };
+export { Investasi_UiFileViewProspektus as Investasi_UiFileView };
 export { Investasi_UiInvoice };
 export { Investasi_UiProsesTransaksi };
 export { Investasi_UiBeranda };
 export { Investasi_UiLayoutMain };
 export { Investasi_UiDaftarTransaksi };
 export { Investasi_UiTransaksiBerhasil };
+export { Investasi_UiFileViewDokumen };
+export { Investasi_UiSahamSaya };
+export { Investasi_UiDetailSahamSaya };

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

@@ -0,0 +1,8 @@
+"use client"
+
+export function Investasi_UiPortofolio() {
+    return <>
+    
+    
+    </>;
+}

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

@@ -0,0 +1,11 @@
+"use client";
+
+import { Investasi_ViewSahamSaya } from "../../_view";
+
+export function Investasi_UiSahamSaya({ dataSaham }: { dataSaham: any[] }) {
+  return (
+    <>
+      <Investasi_ViewSahamSaya dataSaham={dataSaham} />
+    </>
+  );
+}

src/app_modules/investasi/_ui/ui_file_view.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import { ActionIcon, Box, Container, Group, Header, rem } from "@mantine/core";
-import { IconX } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import { Investasi_ViewFileViewer } from "../_view";
-
-export function Investasi_UiFileView({ prospekId }: { prospekId: string }) {
-  return (
-    <>
-      {/* <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="File" />}
-      >
-        <ComponentInvestasi_FrameFileView fileId={prospekId} path={RouterInvestasi_OLD.api_file_prospektus} />
-      </UIGlobal_LayoutTamplate> */}
-      <Box
-        w={"100%"}
-        h={"100%"}
-        style={{
-          overflowY: "auto",
-          overflowX: "auto",
-          backgroundColor: MainColor.black,
-          position: "fixed",
-        }}
-      >
-        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.black}>
-          <HeaderView />
-
-          <Investasi_ViewFileViewer
-            fileId={prospekId}
-            path={RouterInvestasi_OLD.api_file_prospektus}
-          />
-        </Container>
-      </Box>
-    </>
-  );
-}
-
-function HeaderView() {
-  const router = useRouter();
-  return (
-    <>
-      <Header
-        height={"8vh"}
-        sx={{
-          borderStyle: "none",
-        }}
-        bg={"white"}
-      >
-        <Group position="right" align="center" h={"100%"} px={"md"}>
-          <ActionIcon onClick={() => router.back()}>
-            <IconX />
-          </ActionIcon>
-        </Group>
-      </Header>
-    </>
-  );
-}

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

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

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

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

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

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

src/app_modules/investasi/_view/index.ts

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

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

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

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

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

src/app_modules/investasi/detail/view.tsx

@@ -41,24 +41,18 @@ import { useState } from "react";
 import { MODEL_INVESTASI } from "../_lib/interface";
 import { gs_TransferValue } from "../g_state";
 import { useLocalStorage } from "@mantine/hooks";
+import ComponentGlobal_AuthorNameAndAvatar from "@/app_modules/_global/author_name_on_header";
+import { ComponentGlobal_AvatarAndAuthorName } from "@/app_modules/_global/component";
 
 export default function DetailInvestasi({
   dataInvestasi,
-  dataUser,
   loginUserId,
-  progress,
-  totalInvestor,
 }: {
   dataInvestasi: MODEL_INVESTASI;
-  dataUser: MODEL_PROFILE_OLD;
   loginUserId: string;
-  progress: number;
-  totalInvestor: number;
 }) {
   const router = useRouter();
   const [data, setData] = useState(dataInvestasi);
-  const [user, setUser] = useState(dataUser);
-  const [transaksiValue, setTransaksiValue] = useAtom(gs_TransferValue);
   const [boxId, setBoxId] = useState(0);
   const [isLoadingBox, setLoadingBox] = useState(false);
   const [isLoadingButton, setLoadingButton] = useState(false);
@@ -89,7 +83,7 @@ export default function DetailInvestasi({
       id: 3,
       name: "Berita",
       icon: <IconSpeakerphone size={70} color="white" />,
-      route: RouterInvestasi_OLD.berita,
+      route: RouterInvestasi_OLD.daftar_berita,
     },
   ];
 
@@ -116,75 +110,71 @@ export default function DetailInvestasi({
     <>
       <Stack
         style={{
-          padding: "15px",
           backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
           border: `2px solid ${AccentColor.blue}`,
+          padding: "15px",
+          borderRadius: "10px",
           color: "white",
           marginBottom: "15px",
         }}
       >
         {/* Foto username dan sisa waktu */}
-        <Group position="apart" mb={"md"}>
-          {/* <pre>{JSON.stringify(dataUser, null, 2)}</pre> */}
-          <ComponentGlobal_AuthorNameOnHeader
-            authorName={dataUser?.Profile?.name}
-            imagesId={dataUser?.Profile?.imagesId}
-            profileId={dataUser?.Profile?.id}
-          />
-
-          {data.MasterProgresInvestasi.id === "1" ? (
-            <Box>
-              <Group position="right" spacing={"xs"}>
-                <Text>
-                  Sisa waktu:{" "}
-                  <Text span inherit>
-                    {Number(data.MasterPencarianInvestor.name) -
-                      moment(new Date()).diff(
-                        new Date(data.countDown),
-                        "days"
-                      )}{" "}
-                    Hari
-                  </Text>
-                </Text>
-              </Group>
-            </Box>
-          ) : (
-            <Box>
-              {data.MasterProgresInvestasi.id === "2" ? (
+        <ComponentGlobal_AvatarAndAuthorName
+          dataUser={dataInvestasi.author as any}
+          componentRight={
+            data.MasterProgresInvestasi.id === "1" ? (
+              <Box>
                 <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>
+                    Sisa waktu:{" "}
+                    <Text span inherit>
+                      {Number(data.MasterPencarianInvestor.name) -
+                        moment(new Date()).diff(
+                          new Date(data.countDown),
+                          "days"
+                        )}{" "}
+                      Hari
+                    </Text>
                   </Text>
                 </Group>
-              ) : (
-                <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>
-              )}
-            </Box>
-          )}
-        </Group>
+              </Box>
+            ) : (
+              <Box>
+                {data.MasterProgresInvestasi.id === "2" ? (
+                  <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>
+                ) : (
+                  <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>
+                )}
+              </Box>
+            )
+          }
+        />
 
         <AspectRatio ratio={1 / 1} mx={"sm"} mah={250}>
           <Image
@@ -261,7 +251,7 @@ export default function DetailInvestasi({
                 <Text>
                   {new Intl.NumberFormat("id-ID", {
                     maximumSignificantDigits: 10,
-                  }).format(totalInvestor)}
+                  }).format(dataInvestasi.Investasi_Invoice.length)}
                 </Text>
               </Box>
               <Box>

src/app_modules/investasi/detail_berita/view.tsx

@@ -6,13 +6,27 @@ import { useState } from "react";
 import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
 import moment from "moment";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { useShallowEffect } from "@mantine/hooks";
+import getOneBeritaInvestasiById from "../fun/get_one_berita_by_id";
 
 export default function DetailBeritaInvestasi({
   dataBerita,
+  investasiId,
 }: {
   dataBerita: Model_Berita_Investasi;
+  investasiId: string;
 }) {
   const [berita, setBerita] = useState(dataBerita);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    const loadData = await getOneBeritaInvestasiById(investasiId);
+    setBerita(loadData as any);
+  }
+
   return (
     <>
       <Stack
@@ -27,31 +41,24 @@ export default function DetailBeritaInvestasi({
       >
         <Stack spacing={0}>
           <Title order={4} align="center">
-            {berita.title}
+            {berita?.title}
           </Title>
           <Text align="center" fz={12}>
-            {moment(berita.createdAt).format("lll")}
+            {moment(berita?.createdAt).format("lll")}
           </Text>
         </Stack>
 
         <AspectRatio ratio={1 / 1} mx={"sm"} mah={250}>
           <Image
             alt=""
-            src={RouterInvestasi_OLD.api_gambar + `${berita.imagesId}`}
+            src={RouterInvestasi_OLD.api_gambar + `${berita?.imagesId}`}
             radius={"sm"}
             height={250}
             width={"100%"}
           />
         </AspectRatio>
 
-        {/* <AspectRatio ratio={16 / 9}>
-          <Image
-            radius={"sm"}
-            src={RouterInvestasi.api_gambar + `${berita.imagesId}`}
-            alt=""
-          />
-        </AspectRatio> */}
-        <Text>{berita.deskripsi}</Text>
+        <Text>{berita?.deskripsi}</Text>
       </Stack>
     </>
   );

src/app_modules/investasi/detail_dokumen/layout.tsx

@@ -15,7 +15,7 @@ export default function LayoutDetailDokumenInvestasi({
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Dokumen" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Daftar Dokumen" />}
       >
         {children}
       </UIGlobal_LayoutTamplate>

src/app_modules/investasi/detail_dokumen/view.tsx

@@ -1,58 +1,64 @@
 "use client";
 
 import { Paper, Grid, Center, Text, Title } from "@mantine/core";
-import { IconChevronRight } from "@tabler/icons-react";
+import { IconChevronRight, IconFileTypePdf } from "@tabler/icons-react";
 import Link from "next/link";
 import { MODEL_INVESTASI } from "../_lib/interface";
 import { useState } from "react";
 import _ from "lodash";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { useRouter } from "next/navigation";
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 
 export default function DetailDokumenInvestasi({
   dataInvestasi,
 }: {
   dataInvestasi: MODEL_INVESTASI;
 }) {
+  const router = useRouter();
   const [dokumen, setDokumen] = useState(dataInvestasi);
+
   return (
     <>
       {!_.isEmpty(dokumen.DokumenInvestasi) ? (
         dokumen.DokumenInvestasi.map((e) => (
-          <Link
+          <Paper
             key={e.id}
-            href={`/file/${e.url}`}
-            target="_blank"
-            style={{ textDecorationLine: "none" }}
+            style={{
+              padding: "15px",
+              backgroundColor: AccentColor.darkblue,
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px",
+              color: "white",
+              marginBottom: "15px",
+            }}
+            onClick={() => {
+              router.push(NEW_RouterInvestasi.file_view_dokumen + e.id, {
+                scroll: false,
+              });
+            }}
           >
-            <Paper
-              style={{
-                padding: "15px",
-                backgroundColor: AccentColor.darkblue,
-                border: `2px solid ${AccentColor.blue}`,
-                borderRadius: "10px",
-                color: "white",
-                marginBottom: "15px",
-              }}
+            <Grid
+              align="center"
+              justify="center"
+              h={50}
+              px={"sm"}
+              onClick={() => ""}
             >
-              <Grid
-                align="center"
-                justify="center"
-                h={50}
-                px={"sm"}
-                onClick={() => ""}
-              >
-                <Grid.Col span={10}>
-                  <Text>{e.title}</Text>
-                </Grid.Col>
-                <Grid.Col span={2}>
-                  <Center>
-                    <IconChevronRight />
-                  </Center>
-                </Grid.Col>
-              </Grid>
-            </Paper>
-          </Link>
+              <Grid.Col span={10}>
+                <Text>{e.title}</Text>
+              </Grid.Col>
+              <Grid.Col span={2}>
+                <Center>
+                  <IconFileTypePdf style={{ color: MainColor.yellow }} />
+                </Center>
+              </Grid.Col>
+            </Grid>
+          </Paper>
         ))
       ) : (
         <ComponentGlobal_IsEmptyData />

src/app_modules/investasi/detail_prospektus/view.tsx

@@ -20,7 +20,7 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { IconChevronRight } from "@tabler/icons-react";
+import { IconChevronRight, IconFileTypePdf } from "@tabler/icons-react";
 import Link from "next/link";
 import { useState } from "react";
 import { MODEL_INVESTASI } from "../_lib/interface";
@@ -47,20 +47,22 @@ export default function DetailPropektus({
           border: `2px solid ${AccentColor.blue}`,
           borderRadius: "10px",
           color: "white",
+          cursor: "pointer",
         }}
         onClick={() =>
           router.push(
-            NEW_RouterInvestasi.file_view + `${data.ProspektusInvestasi.id}`,
+            NEW_RouterInvestasi.file_view_prospektus +
+              `${data.ProspektusInvestasi.id}`,
             { scroll: false }
           )
         }
       >
         <Group position="apart">
           <Text w={"80%"} lineClamp={1}>
-            Prospektus_{data.title}
+            Prospektus_{data?.title}
           </Text>
           <Center>
-            <IconChevronRight />
+            <IconFileTypePdf style={{ color: MainColor.yellow }} />
           </Center>
         </Group>
       </Paper>

src/app_modules/investasi/detail_saham_terbeli/view.tsx

@@ -61,7 +61,7 @@ export default function DetailSahamTerbeli({
       id: 3,
       name: "Berita",
       icon: <IconSpeakerphone size={70} color="white" />,
-      route: RouterInvestasi_OLD.berita,
+      route: RouterInvestasi_OLD.daftar_berita,
     },
   ];