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

@@ -0,0 +1,39 @@
+import { prisma } from "@/app/lib";
+import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
+
+
+
+// GET ONE DATA INVESTASI BY ID
+export async function GET(request: Request, context: { params: { id: string } }) {
+   try {
+      const { id } = context.params
+      const data = await prisma.investasi.findUnique({
+         where: {
+            id: id,
+         },
+         select: {
+            id: true,
+            title: true,
+            targetDana: true,
+            hargaLembar: true,
+            totalLembar: true,
+            roi: true,
+            countDown: true,
+            catatan: true,
+            sisaLembar: true,
+            imageId: true,
+            masterPencarianInvestorId: true,
+            masterPeriodeDevidenId: true,
+            masterPembagianDevidenId: true,
+         }
+      });
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data }, { status: 200 });
+
+   }
+   catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/api/new/investasi/master/route.ts

@@ -0,0 +1,46 @@
+import { prisma } from "@/app/lib";
+import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
+
+
+// GET ALL DATA MASTER UNTUK INVESTASI
+export async function GET(request: Request) {
+   try {
+      let dataFix
+      const { searchParams } = new URL(request.url)
+      const kategori = searchParams.get("cat")
+
+      if (kategori == "pencarian-investor") {
+         dataFix = await await prisma.masterPencarianInvestor.findMany({
+            select: {
+               id: true,
+               name: true,
+               active: true,
+            },
+         });
+      } else if (kategori == "periode-deviden") {
+         dataFix = await prisma.masterPeriodeDeviden.findMany({
+            select: {
+               id: true,
+               name: true,
+               active: true,
+            },
+         });
+      } else if (kategori == "pembagian-deviden") {
+         dataFix = await prisma.masterPembagianDeviden.findMany({
+            select: {
+               id: true,
+               name: true,
+               active: true,
+            },
+         });
+      }
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: dataFix }, { status: 200 });
+
+   }
+   catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/api/new/investasi/route.ts

@@ -0,0 +1,112 @@
+import { prisma } from "@/app/lib";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import _ from "lodash";
+import moment from "moment";
+import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
+
+
+// GET ALL DATA INVESTASI
+export async function GET(request: Request) {
+   try {
+      let dataFix
+      const { searchParams } = new URL(request.url)
+      const kategori = searchParams.get("cat")
+      const status = searchParams.get("status")
+      const page = searchParams.get("page")
+      const dataSkip = Number(page) * 5 - 5;
+
+      if (kategori == "bursa") {
+         const data = await prisma.investasi.findMany({
+            where: {
+               masterStatusInvestasiId: "1",
+               masterProgresInvestasiId: "1",
+            },
+            select: {
+               id: true,
+               MasterPencarianInvestor: true,
+               countDown: true,
+               progress: true,
+            },
+         });
+
+         for (let a of data) {
+            if (
+               (a.MasterPencarianInvestor?.name as any) -
+               moment(new Date()).diff(new Date(a.countDown as any), "days") <=
+               0
+            ) {
+               await prisma.investasi.update({
+                  where: {
+                     id: a.id,
+                  },
+                  data: {
+                     masterProgresInvestasiId: "3",
+                  },
+               });
+            }
+
+            if (a.progress === "100") {
+               await prisma.investasi.update({
+                  where: {
+                     id: a.id,
+                  },
+                  data: {
+                     masterProgresInvestasiId: "2",
+                  },
+               });
+            }
+         }
+
+         // cek data yang lewat
+         // klo ada,  update status
+         const dataAwal = await prisma.investasi.findMany({
+            take: 5,
+            skip: dataSkip,
+            orderBy: [
+               {
+                  masterProgresInvestasiId: "asc",
+               },
+               {
+                  countDown: "desc",
+               },
+            ],
+            where: {
+               masterStatusInvestasiId: "1",
+            },
+            select: {
+               id: true,
+               imageId: true,
+               title: true,
+               progress: true,
+               countDown: true,
+               MasterPencarianInvestor: {
+                  select: {
+                     name: true
+                  }
+               }
+            }
+         });
+
+         dataFix = dataAwal.map((v: any) => ({
+            ..._.omit(v, ["MasterPencarianInvestor"]),
+            pencarianInvestor: v.MasterPencarianInvestor.name
+         }))
+
+      } else if (kategori == "portofolio") {
+         const userLoginId = await funGetUserIdByToken()
+         if (userLoginId == null) {
+            return NextResponse.json({ success: false, message: "Gagal mendapatkan data, user id tidak ada" }, { status: 500 });
+         }
+      }
+
+
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: dataFix }, { status: 200 });
+
+   }
+   catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}

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

@@ -1,23 +1,20 @@
-import { InvestasiCreate } from "@/app_modules/investasi";
-import getPembagianDeviden from "@/app_modules/investasi/fun/master/get_pembagian_deviden";
-import getPencarianInvestor from "@/app_modules/investasi/fun/master/get_pencarian_investor";
-import getPeriodeDeviden from "@/app_modules/investasi/fun/master/get_periode_deviden";
-import getStatusInvestasi from "@/app_modules/investasi/fun/master/get_status_investasi";
+import { InvestasiCreateNew } from "@/app_modules/investasi";
 
 export default async function Page() {
 
-  const pencarianInvestor = await getPencarianInvestor();
-  const periodeDeviden = await getPeriodeDeviden();
-  const pembagianDeviden = await getPembagianDeviden();
-  const statusInvestasi = await getStatusInvestasi();
+  // const pencarianInvestor = await getPencarianInvestor();
+  // const periodeDeviden = await getPeriodeDeviden();
+  // const pembagianDeviden = await getPembagianDeviden();
+  // const statusInvestasi = await getStatusInvestasi();
 
   return (
     <>
-      <InvestasiCreate
+      {/* <InvestasiCreate
         pencarianInvestor={pencarianInvestor as any}
         periodeDeviden={periodeDeviden as any}
         pembagianDeviden={pembagianDeviden as any}
-      />
+      /> */}
+      <InvestasiCreateNew />
     </>
   );
 }

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

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

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

@@ -1,12 +1,12 @@
-import { Investasi_UiBeranda } from "@/app_modules/investasi/_ui";
-import { investasi_funGetAllPublish } from "@/app_modules/investasi/fun/get_all_investasi";
+import { Investasi_ViewBerandaNew } from "@/app_modules/investasi/_ui";
 
 export default async function Page() {
-  const allData = await investasi_funGetAllPublish({ page: 1 });
+  // const allData = await investasi_funGetAllPublish({ page: 1 });
 
   return (
     <>
-      <Investasi_UiBeranda dataInvestasi={allData as any} />
+      {/* <Investasi_UiBeranda dataInvestasi={allData as any} /> */}
+      <Investasi_ViewBerandaNew />
     </>
   );
 }

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

@@ -25,6 +25,7 @@ export function Investasi_ComponentButtonUpdateDataInvestasi({
   const [isLoading, setIsLoading] = useState(false);
 
   async function onUpdate() {
+    setIsLoading(true);
     if (totalLembar === "0")
       return ComponentGlobal_NotifikasiPeringatan("Total lembar kosong");
 
@@ -74,6 +75,8 @@ export function Investasi_ComponentButtonUpdateDataInvestasi({
   return (
     <Stack>
       <Button
+        loading={isLoading}
+        loaderPosition="center"
         my={50}
         radius={50}
         bg={MainColor.yellow}

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

@@ -0,0 +1,108 @@
+import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Warna } from "@/app/lib/warna";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardStyles, ComponentGlobal_LoadImageCustom } from "@/app_modules/_global/component";
+import { Box, Grid, Group, Progress, Stack, Text } from "@mantine/core";
+import { IconCircleCheck, IconXboxX } from "@tabler/icons-react";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { IDataInvestasiBursa } from "../../_lib/type_investasi";
+
+export function Investasi_ComponentCardBerandaNew({ data }: { data: IDataInvestasiBursa; }) {
+   const router = useRouter()
+
+   return (
+      <>
+         <ComponentGlobal_CardStyles
+            onClickHandler={() => {
+               router.push(NEW_RouterInvestasi.detail_main({ id: data.id }), {
+                  scroll: false,
+               });
+            }}
+         >
+            <Stack>
+               <Grid>
+                  <Grid.Col span={6}>
+                     <ComponentGlobal_LoadImageCustom
+                        height={100}
+                        fileId={data.imageId}
+                     />
+                  </Grid.Col>
+                  <Grid.Col span={6}>
+                     <Stack>
+                        <Text fw={"bold"} align="center" lineClamp={2}>
+                           {data?.title}
+                        </Text>
+
+                        <Progress
+                           label={(+data?.progress).toFixed(2) + " %"}
+                           value={+data?.progress}
+                           color={MainColor.yellow}
+                           size="xl"
+                           radius="xl"
+                           styles={{
+                              label: { color: MainColor.black },
+                           }}
+                        />
+                        <Group position="right">
+                           {data?.progress === "100" ? (
+                              <Group position="right" spacing={"xs"}>
+                                 <IconCircleCheck color="green" />
+                                 <Text
+                                    truncate
+                                    variant="text"
+                                    c={Warna.hijau_tua}
+                                    sx={{ fontFamily: "Greycliff CF, sans-serif" }}
+                                    ta="center"
+                                    fz="md"
+                                    fw={700}
+                                 >
+                                    Selesai
+                                 </Text>
+                              </Group>
+                           ) : (
+                              <Box>
+                                 {+data?.pencarianInvestor -
+                                    moment(new Date()).diff(
+                                       new Date(data?.countDown),
+                                       "days"
+                                    ) <=
+                                    0 ? (
+                                    <Group position="right" spacing={"xs"}>
+                                       <IconXboxX color="red" />
+                                       <Text
+                                          truncate
+                                          variant="text"
+                                          c={Warna.merah}
+                                          sx={{ fontFamily: "Greycliff CF, sans-serif" }}
+                                          ta="center"
+                                          fz="md"
+                                          fw={700}
+                                       >
+                                          Waktu Habis
+                                       </Text>
+                                    </Group>
+                                 ) : (
+                                    <Group position="right" spacing={"xs"}>
+                                       <Text truncate>Sisa waktu:</Text>
+                                       <Text truncate>
+                                          {Number(data?.pencarianInvestor) -
+                                             moment(new Date()).diff(
+                                                new Date(data?.countDown),
+                                                "days"
+                                             )}
+                                       </Text>
+                                       <Text truncate>Hari</Text>
+                                    </Group>
+                                 )}
+                              </Box>
+                           )}
+                        </Group>
+                     </Stack>
+                  </Grid.Col>
+               </Grid>
+            </Stack>
+         </ComponentGlobal_CardStyles>
+      </>
+   );
+}

src/app_modules/investasi/_lib/api_interface.ts

@@ -0,0 +1,14 @@
+export const apiGetMasterInvestasi = async (path?: string) => {
+   const response = await fetch(`/api/new/investasi/master${(path) ? path : ''}`)
+   return await response.json().catch(() => null)
+}
+
+export const apiGetOneInvestasiById = async (path: string) => {
+   const response = await fetch(`/api/new/investasi/${path}`)
+   return await response.json().catch(() => null)
+}
+
+export const apiGetAllInvestasi = async (path?: string) => {
+   const response = await fetch(`/api/new/investasi${(path) ? path : ''}`)
+   return await response.json().catch(() => null)
+}

src/app_modules/investasi/_lib/type_investasi.ts

@@ -0,0 +1,24 @@
+export interface IDataInvestasi {
+   id: string
+   title: string
+   targetDana: string
+   hargaLembar: string
+   totalLembar: string
+   roi: string
+   countDown: string
+   catatan: string
+   sisaLembar: string
+   imageId: string
+   masterPencarianInvestorId: string
+   masterPeriodeDevidenId: string
+   masterPembagianDevidenId: string
+}
+
+export interface IDataInvestasiBursa {
+   id: string
+   title: string
+   imageId: string
+   progress: string
+   countDown: string
+   pencarianInvestor: string
+}

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

@@ -0,0 +1,15 @@
+"use client";
+import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate, } from "@/app_modules/_global/ui";
+import { Investasi_ViewEditInvestasiNew } from "../../_view/edit/vew_edit_investasi_new";
+
+export function Investasi_UiEditInvestasiNew() {
+   return (
+      <>
+         <UIGlobal_LayoutTamplate
+            header={<UIGlobal_LayoutHeaderTamplate title="Edit Investasi" />}
+         >
+            <Investasi_ViewEditInvestasiNew />
+         </UIGlobal_LayoutTamplate>
+      </>
+   );
+}

src/app_modules/investasi/_ui/index.ts

@@ -24,6 +24,8 @@ import { Investasi_UiDaftarBerita } from "./detail/ui_daftar_berita";
 import { Investasi_UiRekapBerita } from "./detail/ui_rekap_berita";
 import { Investasi_UiCreateBerita } from "./create/ui_create_berita";
 import { Investasi_UiDetailBerita } from "./detail/ui_berita";
+import { Investasi_UiEditInvestasiNew } from "./edit/ui_edit_investasi_new";
+import { Investasi_ViewBerandaNew } from "../_view/main/view_beranda_new";
 
 export { Investasi_UiProsesPembelian };
 export { Investasi_UiMetodePembayaran };
@@ -51,3 +53,5 @@ export { Investasi_UiDaftarBerita };
 export { Investasi_UiRekapBerita };
 export { Investasi_UiCreateBerita };
 export { Investasi_UiDetailBerita };
+export { Investasi_UiEditInvestasiNew }
+export { Investasi_ViewBerandaNew }

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

@@ -0,0 +1,23 @@
+import { Box, Skeleton, Stack } from "@mantine/core";
+
+export default function SkeletonEditInvestasi() {
+   return (
+      <>
+         <Box>
+            <Stack align="center" mb={40}>
+               <Skeleton height={40} width={"100%"} />
+               <Skeleton height={300} width={"100%"} my={"xs"} />
+               <Skeleton height={40} width={"40%"} radius={"lg"} />
+            </Stack>
+
+            <Stack align="center">
+               {[...Array(5)].map((_, index) => (
+                  <Skeleton key={index} height={40} width={"100%"} my={"xs"} />
+               ))}
+               <Skeleton height={40} width={"100%"} radius={"lg"} mt={30} />
+            </Stack>
+         </Box>
+
+      </>
+   );
+}

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

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

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

@@ -0,0 +1,31 @@
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Box, Grid, Skeleton } from "@mantine/core";
+
+export default function SkeletonInvestasiBursa() {
+   return (
+      <>
+         {[...Array(4)].map((_, index) => (
+            <ComponentGlobal_CardStyles key={index}>
+               <Grid>
+                  <Grid.Col span={6}>
+                     <Skeleton w={"100%"} height={100} radius="md" />
+                  </Grid.Col>
+                  <Grid.Col span={6}>
+                     <Box>
+                        {[...Array(3)].map((_, i) => (
+                           <Box key={i} py={5}>
+                              <Grid align="center">
+                                 <Grid.Col span={12}>
+                                    <Skeleton w={"100%"} h={23} />
+                                 </Grid.Col>
+                              </Grid>
+                           </Box>
+                        ))}
+                     </Box>
+                  </Grid.Col>
+               </Grid>
+            </ComponentGlobal_CardStyles>
+         ))}
+      </>
+   );
+}

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

@@ -0,0 +1,97 @@
+'use client'
+import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import mqtt_client from "@/util/mqtt_client";
+import { Box, Center } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { Investasi_ComponentButtonUpdateBeranda } from "../../_component";
+import { Investasi_ComponentCardBerandaNew } from "../../_component/main/com_card_beranda_new";
+import { apiGetAllInvestasi } from "../../_lib/api_interface";
+import { IDataInvestasiBursa } from "../../_lib/type_investasi";
+import SkeletonInvestasiBursa from "./skeleton_beranda";
+
+export function Investasi_ViewBerandaNew() {
+   const [data, setData] = useState<IDataInvestasiBursa[]>([]);
+   const [activePage, setActivePage] = useState(1);
+   const [isNewPost, setIsNewPost] = useState(false);
+   const [loading, setLoading] = useState(true)
+
+   useShallowEffect(() => {
+      mqtt_client.subscribe("Beranda_Investasi");
+
+      mqtt_client.on("message", (topic, message) => {
+         const newPost = JSON.parse(message.toString());
+         setIsNewPost(newPost);
+      });
+   }, []);
+
+
+   async function getDataInvestasi() {
+      try {
+         setLoading(true)
+         const response = await apiGetAllInvestasi(`?cat=bursa&page=1`)
+         if (response.success) {
+            setData(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getDataInvestasi()
+   }, []);
+
+   return (
+      <>
+         {isNewPost && (
+            <Investasi_ComponentButtonUpdateBeranda
+               onLoadData={(val) => {
+                  setData(val.data);
+                  setIsNewPost(val.isNewPost);
+               }}
+            />
+         )}
+
+         <Box>
+            <ComponentGlobal_CreateButton path={RouterInvestasi_OLD.create} />
+            {
+               loading ? <SkeletonInvestasiBursa />
+                  :
+                  _.isEmpty(data) ? (
+                     <ComponentGlobal_IsEmptyData />
+                  ) : (
+                     <ScrollOnly
+                        height="82vh"
+                        renderLoading={() => (
+                           <Center>
+                              <ComponentGlobal_Loader size={25} />
+                           </Center>
+                        )}
+                        data={data}
+                        setData={setData}
+                        moreData={async () => {
+                           const pageNew = activePage + 1
+                           const loadData = await apiGetAllInvestasi(`?cat=bursa&page=${pageNew}`);
+                           setActivePage((val) => val + 1);
+
+                           return loadData;
+                        }}
+                     >
+                        {(item) => <Investasi_ComponentCardBerandaNew data={item as any} />}
+                     </ScrollOnly>
+                  )
+
+            }
+         </Box>
+      </>
+   );
+}

src/app_modules/investasi/create/view_new.tsx

@@ -0,0 +1,413 @@
+"use client";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_BoxInformation, ComponentGlobal_BoxUploadImage, ComponentGlobal_CardStyles, } from "@/app_modules/_global/component";
+import { AspectRatio, Box, Button, Center, FileButton, Grid, Group, Image, Select, Stack, Text, TextInput, } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconCamera, IconCircleCheck, IconFileTypePdf, IconUpload } from "@tabler/icons-react";
+import _ from "lodash";
+import { useState } from "react";
+import { Investasi_ComponentButtonCreateNewInvestasi } from "../_component";
+import { apiGetMasterInvestasi } from "../_lib/api_interface";
+
+export default function InvestasiCreateNew() {
+   const [loadingMasterInvestor, setLoadingMasterInvestor] = useState(true)
+   const [loadingMasterPeriodeDeviden, setLoadingMasterPeriodeDeviden] = useState(true)
+   const [loadingMasterPembagianDeviden, setLoadingMasterPembagianDeviden] = useState(true)
+   const [periodeDeviden, setPeriodeDeviden] = useState<any[]>([]);
+   const [pembagianDeviden, setPembagianDeviden] = useState<any[]>([]);
+   const [pencarianInvestor, setPencarianInvestor] = useState<any[]>([]);
+   const [fileImage, setFileImage] = useState<File | null>(null);
+   const [img, setImg] = useState<any | null>();
+   const [filePdf, setFilePdf] = useState<File | null>(null);
+   const [fPdf, setFPdf] = useState<any | null>(null);
+   const [totalLembar, setTotalLembar] = useState(0);
+   const [value, setValue] = useState({
+      title: "",
+      targetDana: 0,
+      hargaLembar: 0,
+      roi: 0,
+      pencarianInvestorId: "",
+      periodeDevidenId: "",
+      pembagianDevidenId: "",
+   });
+   const [target, setTarget] = useState("");
+   const [harga, setHarga] = useState("");
+
+   async function onTotalLembar({ target, harga, }: { target?: number | any; harga?: number | any; }) {
+      if (target !== 0 && harga !== 0) {
+         const hasil: any = target / harga;
+         setTotalLembar(_.floor(hasil === Infinity ? 0 : hasil));
+      }
+   }
+
+   async function onGetMasterInvestor() {
+      try {
+         setLoadingMasterInvestor(true)
+         const response = await apiGetMasterInvestasi("?cat=pencarian-investor")
+         if (response.success) {
+            setPencarianInvestor(response.data)
+         }
+      } catch (error) {
+         console.log(error);
+      } finally {
+         setLoadingMasterInvestor(false)
+      }
+   }
+
+   async function onGetMasterPeriodeDeviden() {
+      try {
+         setLoadingMasterPeriodeDeviden(true)
+         const response = await apiGetMasterInvestasi("?cat=periode-deviden")
+         if (response.success) {
+            setPeriodeDeviden(response.data)
+         }
+      } catch (error) {
+         console.log(error);
+      } finally {
+         setLoadingMasterPeriodeDeviden(false)
+      }
+   }
+
+
+   async function onGetMasterPembagianDeviden() {
+      try {
+         setLoadingMasterPembagianDeviden(true)
+         const response = await apiGetMasterInvestasi("?cat=pembagian-deviden")
+         if (response.success) {
+            setPembagianDeviden(response.data)
+         }
+      } catch (error) {
+         console.log(error);
+      } finally {
+         setLoadingMasterPembagianDeviden(false)
+      }
+   }
+
+   useShallowEffect(() => {
+      onGetMasterInvestor()
+      onGetMasterPeriodeDeviden()
+      onGetMasterPembagianDeviden()
+   }, [])
+
+   return (
+      <>
+         <Stack px={"xs"} spacing={40}>
+            {/* Upload Image */}
+            <Stack spacing={0}>
+               <Box mb={"sm"}>
+                  <ComponentGlobal_BoxInformation informasi="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi" />
+               </Box>
+               <ComponentGlobal_BoxUploadImage>
+                  {img ? (
+                     <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
+                        <Image
+                           style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
+                           alt="Foto"
+                           height={250}
+                           src={img}
+                        />
+                     </AspectRatio>
+                  ) : (
+                     <Stack justify="center" align="center" h={"100%"}>
+                        <IconUpload color="white" />
+                        <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
+                           Upload Gambar
+                        </Text>
+                     </Stack>
+                  )}
+               </ComponentGlobal_BoxUploadImage>
+
+               {/* Upload Foto */}
+               <Group position="center">
+                  <FileButton
+                     onChange={async (files: any) => {
+                        try {
+                           const buffer = URL.createObjectURL(
+                              new Blob([new Uint8Array(await files.arrayBuffer())])
+                           );
+
+                           setImg(buffer);
+                           setFileImage(files);
+                        } catch (error) {
+                           console.log(error);
+                        }
+                     }}
+                     accept="image/png,image/jpeg"
+                  >
+                     {(props) => (
+                        <Button
+                           {...props}
+                           leftIcon={<IconCamera color="black" />}
+                           radius={50}
+                           bg={MainColor.yellow}
+                           color="yellow"
+                           c={"black"}
+                        >
+                           Upload Gambar
+                        </Button>
+                     )}
+                  </FileButton>
+               </Group>
+            </Stack>
+
+            {/* Upload File */}
+            <Stack spacing={"sm"}>
+               <ComponentGlobal_BoxInformation informasi="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan !" />
+               <ComponentGlobal_CardStyles marginBottom={"0px"}>
+                  {!filePdf ? (
+                     <Text lineClamp={1} align="center" c={"gray"}>
+                        Upload File Prospektus
+                     </Text>
+                  ) : (
+                     <Grid align="center">
+                        <Grid.Col span={2}></Grid.Col>
+                        <Grid.Col span={"auto"}>
+                           <Text lineClamp={1} align="center">
+                              {filePdf.name}
+                           </Text>
+                        </Grid.Col>
+                        <Grid.Col span={2}>
+                           <Center>
+                              <IconCircleCheck color="green" />
+                           </Center>
+                        </Grid.Col>
+                     </Grid>
+                  )}
+               </ComponentGlobal_CardStyles>
+
+               <Group position="center">
+                  <FileButton
+                     accept={"application/pdf"}
+                     onChange={async (files: any) => {
+                        try {
+                           const buffer = URL.createObjectURL(
+                              new Blob([new Uint8Array(await files.arrayBuffer())])
+                           );
+                           setFPdf(buffer);
+                           setFilePdf(files);
+                        } catch (error) {
+                           console.log(error);
+                        }
+                     }}
+                  >
+                     {(props) => (
+                        <Button
+                           leftIcon={<IconFileTypePdf />}
+                           {...props}
+                           radius={"xl"}
+                           bg={MainColor.yellow}
+                           color="yellow"
+                           c={"black"}
+                        >
+                           Upload File
+                        </Button>
+                     )}
+                  </FileButton>
+               </Group>
+            </Stack>
+
+            <Stack>
+               <TextInput
+                  styles={{
+                     label: {
+                        color: "white",
+                     },
+                  }}
+                  withAsterisk
+                  label="Judul Investasi"
+                  placeholder="Judul investasi"
+                  maxLength={100}
+                  onChange={(val) => {
+                     setValue({
+                        ...value,
+                        title: val.target.value,
+                     });
+                  }}
+               />
+
+               <TextInput
+                  styles={{
+                     label: {
+                        color: "white",
+                     },
+                  }}
+                  icon={<Text fw={"bold"}>Rp.</Text>}
+                  min={0}
+                  withAsterisk
+                  label="Dana Dibutuhkan"
+                  placeholder="0"
+                  value={target}
+                  onChange={(val) => {
+                     // console.log(typeof val)
+                     const match = val.currentTarget.value
+                        .replace(/\./g, "")
+                        .match(/^[0-9]+$/);
+
+                     if (val.currentTarget.value === "") return setTarget(0 + "");
+                     if (!match?.[0]) return null;
+
+                     const nilai = val.currentTarget.value.replace(/\./g, "");
+                     const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
+
+                     onTotalLembar({
+                        target: +nilai,
+                        harga: +value.hargaLembar,
+                     });
+
+                     setTarget(targetNilai);
+                     setValue({
+                        ...value,
+                        targetDana: +nilai,
+                     });
+                  }}
+               />
+
+               <TextInput
+                  styles={{
+                     label: {
+                        color: "white",
+                     },
+                  }}
+                  icon={<Text fw={"bold"}>Rp.</Text>}
+                  min={0}
+                  withAsterisk
+                  label="Harga Per Lembar"
+                  placeholder="0"
+                  value={harga}
+                  onChange={(val) => {
+                     try {
+                        // console.log(typeof +val.currentTarget.value);
+
+                        const match = val.currentTarget.value
+                           .replace(/\./g, "")
+                           .match(/^[0-9]+$/);
+
+                        if (val.currentTarget.value === "") return setHarga(0 + "");
+
+                        if (!match?.[0]) return null;
+
+                        const nilai = val.currentTarget.value.replace(/\./g, "");
+                        const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
+
+                        onTotalLembar({
+                           harga: +nilai,
+                           target: +value.targetDana,
+                        });
+
+                        setHarga(targetNilai);
+                        setValue({
+                           ...value,
+                           hargaLembar: +nilai,
+                        });
+                     } catch (error) {
+                        console.log(error);
+                     }
+                  }}
+               />
+
+               <TextInput
+                  description="*Total lembar dihitung dari, Target Dana / Harga Perlembar"
+                  label="Total Lembar"
+                  value={harga === "0" ? "0" : target === "0" ? 0 : totalLembar}
+                  readOnly
+                  styles={{
+                     label: {
+                        color: "white",
+                     },
+                  }}
+               />
+
+               <TextInput
+                  styles={{
+                     label: {
+                        color: "white",
+                     },
+                  }}
+                  rightSection={
+                     <Text fw={"bold"} c={"gray"}>
+                        %
+                     </Text>
+                  }
+                  withAsterisk
+                  type="number"
+                  label={"Rasio Keuntungan / ROI %"}
+                  placeholder="Masukan rasio keuntungan"
+                  onChange={(val) => {
+                     setValue({
+                        ...value,
+                        roi: _.toNumber(val.target.value),
+                     });
+                  }}
+               />
+
+               <Select
+                  styles={{
+                     label: {
+                        color: "white",
+                     },
+                  }}
+                  withAsterisk
+                  label="Pencarian Investor"
+                  placeholder={loadingMasterInvestor ? "Loading..." : "Pilih batas waktu"}
+                  data={pencarianInvestor.map((e) => ({
+                     value: e.id,
+                     label: e.name + " " + "hari",
+                  }))}
+                  onChange={(val) => {
+                     setValue({
+                        ...(value as any),
+                        pencarianInvestorId: val,
+                     });
+                  }}
+               />
+
+               <Select
+                  styles={{
+                     label: {
+                        color: "white",
+                     },
+                  }}
+                  withAsterisk
+                  label="Periode Deviden"
+                  placeholder={loadingMasterPeriodeDeviden ? "Loading..." : "Pilih batas waktu"}
+                  data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
+                  onChange={(val) => {
+                     setValue({
+                        ...(value as any),
+                        periodeDevidenId: val,
+                     });
+                  }}
+               />
+
+               <Select
+                  styles={{
+                     label: {
+                        color: "white",
+                     },
+                  }}
+                  withAsterisk
+                  label="Pembagian Deviden"
+                  placeholder={loadingMasterPembagianDeviden ? "Loading..." : "Pilih batas waktu"}
+                  data={pembagianDeviden.map((e) => ({
+                     value: e.id,
+                     label: e.name + " " + "bulan",
+                  }))}
+                  onChange={(val) => {
+                     setValue({
+                        ...(value as any),
+                        pembagianDevidenId: val,
+                     });
+                  }}
+               />
+            </Stack>
+
+            <Investasi_ComponentButtonCreateNewInvestasi
+               data={value}
+               totalLembar={totalLembar}
+               fileImage={fileImage as any}
+               filePdf={filePdf as any}
+            />
+         </Stack>
+      </>
+   );
+}

src/app_modules/investasi/index.ts

@@ -1,4 +1,5 @@
 import InvestasiCreate from "./create/view";
+import InvestasiCreateNew from "./create/view_new";
 import InvestasiCreateLayout from "./create/layout";
 import DetailInvestasi from "./detail/view";
 import LayoutDetailInvestasi from "./detail/layout";
@@ -98,4 +99,5 @@ export {
   LayoutProsesTransaksiInvestasi,
   StatusPesananInvetsatsi,
   LayoutStatusPesananInvestasi,
+  InvestasiCreateNew
 };