Merge branch 'build' of https://github.com/bipproduction/hipmi into build

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
+    "@mantine/carousel": "^7.1.5",
     "@mantine/core": "^6.0.17",
     "@mantine/dropzone": "^7.1.3",
     "@mantine/hooks": "^6.0.17",
@@ -23,15 +24,18 @@
     "@types/react-dom": "18.2.7",
     "@types/uuid": "^9.0.4",
     "autoprefixer": "10.4.14",
+    "embla-carousel-react": "^8.0.0-rc14",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.12",
     "iron-session": "^6.3.1",
     "jotai": "^2.4.3",
     "lodash": "^4.17.21",
+    "moment": "^2.29.4",
     "next": "^13.5.4-canary.8",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-responsive-carousel": "^3.2.23",
     "react-simple-toasts": "^5.10.0",
     "react-toastify": "^9.1.3",
     "socket.io-client": "^4.7.2",

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

@@ -6,34 +6,27 @@ export async function GET(
   req: NextRequest,
   { params }: { params: { id: string } }
 ) {
- 
+  const data = await prisma.images.findUnique({
+    where: {
+      id: params.id,
+    },
+    select: {
+      url: true,
+    },
+  });
 
-  console.log(params.id)
+  if (!fs.existsSync(`./public/investasi/${data?.url}`)) {
-    const data = await prisma.images.findUnique({
+    const fl = fs.readFileSync(`./public/aset/no-img.png`);
-      where: {
-        id: params.id,
-      },
-      select: {
-        url: true,
-      },
-    });
-
-    console.log(data)
-
-    // return data
-
-    if (!fs.existsSync(`./public/investasi/${data?.url}`)) {
-      const fl = fs.readFileSync(`./public/aset/no-img.png`);
-      return new NextResponse(fl, {
-        headers: {
-          "Content-Type": "image/png",
-        },
-      });
-    }
-    const fl = fs.readFileSync(`./public/investasi/${data?.url}`);
     return new NextResponse(fl, {
       headers: {
         "Content-Type": "image/png",
       },
     });
+  }
+  const fl = fs.readFileSync(`./public/investasi/${data?.url}`);
+  return new NextResponse(fl, {
+    headers: {
+      "Content-Type": "image/png",
+    },
+  });
 }

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { DetailBeritaInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return <>
+    <DetailBeritaInvestasi/>
+    </>
+}

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

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

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

@@ -0,0 +1,7 @@
+import { DetailDokumenInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return<>
+    <DetailDokumenInvestasi/>
+    </>
+}

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { DetailPropektus } from "@/app_modules/investasi";
+
+export default async function Page(params:any) {
+    return<>
+    <DetailPropektus/>
+    </>
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { EditBeritaInvestasi } from "@/app_modules/investasi";
+
+export default async function Page(params:any) {
+    return<>
+    <EditBeritaInvestasi/>
+    </>
+}

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

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

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

@@ -0,0 +1,7 @@
+import { EditDokumenInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return<>
+    <EditDokumenInvestasi/>
+    </>
+}

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { EditProspektusInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return<>
+    <EditProspektusInvestasi/>
+    </>
+}

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

@@ -0,0 +1,7 @@
+import { KonfirmasiBuktiInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return <>
+    <KonfirmasiBuktiInvestasi/>
+    </>
+}

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

@@ -0,0 +1,7 @@
+import { PortofolioInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return<>
+    <PortofolioInvestasi/>
+    </>
+}

src/app/dev/investasi/metode_transfer/layout.tsx

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

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

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

src/app/dev/investasi/proses_investasi/layout.tsx

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

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

@@ -0,0 +1,7 @@
+import { ProsesInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return<>
+    <ProsesInvestasi/>
+    </>
+}

src/app/dev/investasi/upload_bukti/layout.tsx

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

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

@@ -0,0 +1,5 @@
+import { UploadBuktiTransferInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+  return <UploadBuktiTransferInvestasi />;
+}

src/app/lib/app_route.ts

@@ -0,0 +1,18 @@
+export const RouteInvestasi = {
+  //INVESTASI
+// portofolio
+portofolio: "/dev/investasi/main/portofolio",
+  // proses beli saham
+  metode_transfer: "/dev/investasi/metode_transfer",
+  // edit //
+  edit_intro: "/dev/investasi/edit_intro/",
+  edit_prospektus: "/dev/investasi/edit_prospektus/",
+  edit_dokumen: "/dev/investasi/edit_dokumen/",
+  edit_berita: "/dev/investasi/edit_berita/",
+  // detail //
+  berita: "/dev/investasi/berita/",
+  detail_saham_terbeli: "/dev/investasi/detail_saham_terbeli/",
+  detail_prospektus: "/dev/investasi/detail_prospektus/",
+  detail_dokumen: "/dev/investasi/detail_dokumen/",
+  detail_berita: "/dev/investasi/detail_berita/",
+};

src/app_modules/crowd/main/view.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Warna } from "@/app/lib/warna";
 import { Button, Center, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import toast from "react-simple-toasts";
@@ -14,14 +15,16 @@ export default function MainCrowd() {
           <Text>HIPMI Crowd Funding</Text>
           <Button
             w={300}
-            bg={"green"}
+            radius={50}
+            bg={Warna.hijau_tua}
             onClick={() => router.push("/dev/investasi/main")}
           >
             Investasi
           </Button>
           <Button
             w={300}
-            bg={"grape"}
+            bg={Warna.biru}
+            radius={50}
             onClick={() => toast("Cooming Soon Feature...")}
           >
             Donasi

src/app_modules/investasi/berita/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutBeritaInvestasi({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    return (
+      <>
+        <AppShell header={<HeaderTamplate title="Berita" />}>
+          {children}
+        </AppShell>
+      </>
+    );
+  }

src/app_modules/investasi/berita/view.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { RouteInvestasi } from "@/app/lib/app_route";
+import { AspectRatio, Grid, Image, Paper, Text, Title } from "@mantine/core";
+import { useRouter } from "next/navigation";
+
+export default function BeritaInvestasi({id}: {id: string}) {
+    const router = useRouter()
+  return (
+    <>
+      <Paper h={100} w={"100%"} bg={"gray"} p={"sm"} onClick={() => router.push(RouteInvestasi.detail_berita + `${id}`)}>
+        <Title order={6}>Judul berita</Title>
+        <Grid pt={5}>
+          <Grid.Col span={8}>
+            <Text fz={12}>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+            </Text>
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <AspectRatio ratio={16 / 9} h={50} w={100}>
+              <Image alt="" src={"/aset/no-img.png"} />
+            </AspectRatio>
+          </Grid.Col>
+        </Grid>
+      </Paper>
+    </>
+  );
+}

src/app_modules/investasi/create/layout.tsx

@@ -13,7 +13,7 @@ export default function InvestasiCreateLayout({
     <>
       <AppShell
         header={
-          <HeaderTamplate route="/dev/investasi/main" title="Investasi Baru" />
+          <HeaderTamplate  title="Investasi Baru" />
         }
       >
         {children}

src/app_modules/investasi/create/view.tsx

@@ -20,6 +20,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { funCreateInvestasi } from "../fun/fun_create_investasi";
 import toast from "react-simple-toasts";
+import { RouteInvestasi } from "@/app/lib/app_route";
 
 export default function InvestasiCreate({
   id,
@@ -58,20 +59,23 @@ export default function InvestasiCreate({
       masterPembagianDevidenId: value.pembagianDevidenId,
       masterPencarianInvestorId: value.pencarianInvestorId,
     };
-    if (_.values(body).includes("")) return toast("Lengkapi data");
+    toast("Berhasil disimpan")
-    if (!fl) return toast("File Kosong");
+    return setTimeout(() => router.push(RouteInvestasi.portofolio), 2000);
 
-    const fd = new FormData();
-    fd.append("file", fl);
 
-    await funCreateInvestasi(fd, body as any).then((res) => {
+    // if (_.values(body).includes("")) return toast("Lengkapi data");
-      if (res.status === 201) {
+    // if (!fl) return toast("File Kosong");
-        toast(res.message);
+
-        return router.push("/dev/investasi/main")
+    // const fd = new FormData();
-      } else {
+    // fd.append("file", fl);
-        return toast(res.message);
+    // await funCreateInvestasi(fd, body as any).then((res) => {
-      }
+    //   if (res.status === 201) {
-    });
+    //     toast(res.message);
+    //     return router.push("/dev/investasi/main");
+    //   } else {
+    //     return toast(res.message);
+    //   }
+    // });
   }
 
   return (

src/app_modules/investasi/detail/layout.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
+import { IconArrowLeft, IconEdit } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { title } from "process";
+import React from "react";
+
+export default function LayoutDetailInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell
+        header={
+          <Header height={50}>
+            <Group h={50} position="apart" px={"md"}>
+              <ActionIcon variant="transparent" onClick={() => {
+                router.back()
+              }}>
+                <IconArrowLeft />
+              </ActionIcon>
+              <Text>Detail Investasi</Text>
+              <ActionIcon variant="transparent" disabled onClick={() => {
+                router.replace("")
+              }}>
+                {/* <IconEdit /> */}
+              </ActionIcon>
+            </Group>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/detail/view.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { RouteInvestasi } from "@/app/lib/app_route";
+import { Warna } from "@/app/lib/warna";
+import {
+  ActionIcon,
+  AspectRatio,
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Slider,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
+  IconBookDownload,
+  IconFileDescription,
+  IconSpeakerphone,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function DetailInvestasi({id}: {id: string}) {
+  const router = useRouter();
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: RouteInvestasi.detail_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: RouteInvestasi.detail_dokumen
+    },
+    {
+      id: 3,
+      name: "Berita",
+      icon: <IconSpeakerphone size={70} />,
+      route: RouteInvestasi.berita,
+    },
+  ];
+
+  return (
+    <>
+      <Group position="apart" mb={"md"}>
+        <Flex align={"center"} gap={"xs"}>
+          <Avatar src={"/aset/avatar.png"} />
+          <Text>Username</Text>
+        </Flex>
+        <Text>Sisa waktu : 20 Hari</Text>
+      </Group>
+
+      <Paper withBorder mb={"md"}>
+        <AspectRatio ratio={16 / 9}>
+          <Image alt="" src={"/aset/no-img.png"} />
+        </AspectRatio>
+      </Paper>
+
+      {/* Title dan Persentase */}
+      <Box mb={"md"}>
+        <Title order={4} mb={"xs"}>
+          Judul Proyek
+        </Title>
+        <Slider
+          disabled
+          size={10}
+          value={60}
+          marks={[{ value: 60, label: "60%" }]}
+        />
+      </Box>
+
+      {/* Rincian Data */}
+      <Grid p={"md"} mb={"md"}>
+        <Grid.Col span={6}>
+          <Stack>
+            <Box>
+              <Text>Terkumpul</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Dana Dibutuhkan</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Harga Per Lembar</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Jadwal Pembagian</Text>
+              <Text>3 Bulan </Text>
+            </Box>
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <Stack>
+            <Box>
+              <Text>Investor</Text>
+              <Text>4657</Text>
+            </Box>
+            <Box>
+              <Text>ROI</Text>
+              <Text>%</Text>
+            </Box>
+            <Box>
+              <Text>Total Lembar</Text>
+              <Text>0</Text>
+            </Box>
+            <Box>
+              <Text>Pembagian Deviden</Text>
+              <Text>Selamanya</Text>
+            </Box>
+          </Stack>
+        </Grid.Col>
+      </Grid>
+
+      {/* List Box */}
+      <Grid mb={"md"}>
+        {listBox.map((e) => (
+          <Grid.Col span={"auto"} key={e.id} onClick={() => router.push(e.route + `${id}`)}>
+            <Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
+              <Flex direction={"column"} align={"center"} justify={"center"}>
+                <Text fz={12}>{e.name}</Text>
+                <ActionIcon variant="transparent" size={60}>
+                  {e.icon}
+                </ActionIcon>
+              </Flex>
+            </Paper>
+          </Grid.Col>
+        ))}
+      </Grid>
+
+      <Center mb={"md"}>
+        <Button
+          radius={50}
+          w={350}
+          bg={Warna.biru}
+          onClick={() => router.push("/dev/investasi/proses_investasi")}
+        >
+          Investasi
+        </Button>
+      </Center>
+    </>
+  );
+}

src/app_modules/investasi/detail_berita/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutDetailBeritaInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Detail Berita" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/detail_berita/view.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { Text } from "@mantine/core"
+
+export default function DetailBeritaInvestasi(){
+    return<>
+    <Text>Berita</Text>
+    
+    </>
+}

src/app_modules/investasi/detail_dokumen/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutDetailDokumenInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Dokumen" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/detail_dokumen/view.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Paper, Grid, Center, Text } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import Link from "next/link";
+
+export default function DetailDokumenInvestasi() {
+  return (
+    <>
+      <Link
+        href={"/aset/dummy_file.pdf"}
+        target="_blank"
+        style={{ textDecorationLine: "none" }}
+      >
+        <Paper w={"100%"} h={50} bg={"gray"} mb={"md"}>
+          <Grid
+            align="center"
+            justify="center"
+            h={50}
+            px={"sm"}
+            onClick={() => ""}
+          >
+            <Grid.Col span={10}>
+              <Text>Nama File.pdf</Text>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <Center>
+                <IconChevronRight />
+              </Center>
+            </Grid.Col>
+          </Grid>
+        </Paper>
+      </Link>
+    </>
+  );
+}

src/app_modules/investasi/detail_porto/layout.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
+import { IconArrowLeft, IconEdit } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import router from "next/router";
+import { title } from "process";
+import React from "react";
+
+export default function LayoutPortofolioDetailInvestasi({
+  children,
+  id,
+}: {
+  children: React.ReactNode;
+  id: string;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell
+        header={
+          <HeaderTamplate
+            title="Portofolio Investasi"
+            icon={<IconEdit />}
+            route2={`/dev/investasi/edit/${id}`}
+          />
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/detail_porto/view.tsx

@@ -0,0 +1,141 @@
+"use client";
+import { RouteInvestasi } from "@/app/lib/app_route";
+import {
+  ActionIcon,
+  AspectRatio,
+  Avatar,
+  Box,
+  Center,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Slider,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
+  IconBookDownload,
+  IconFileDescription,
+  IconSpeakerphone,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function PortofolioDetailInvestasi({id}: {id: string}) {
+  const router = useRouter();
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: RouteInvestasi.edit_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: RouteInvestasi.edit_dokumen,
+    },
+    {
+      id: 3,
+      name: "Berita",
+      icon: <IconSpeakerphone size={70} />,
+      route: RouteInvestasi.edit_berita,
+    },
+  ];
+  return (
+    <>
+      {/* <Group position="apart" mb={"md"}>
+        <Flex align={"center"} gap={"xs"}>
+          <Avatar src={"/aset/avatar.png"} />
+          <Text>Username</Text>
+        </Flex>
+        <Text>Sisa waktu : 20 Hari</Text>
+      </Group> */}
+      <Center mb={'sm'}>
+      <Text>Sisa waktu : 20 Hari</Text>
+      </Center>
+
+      <Paper withBorder mb={"md"}>
+        <AspectRatio ratio={16 / 9}>
+          <Image alt="" src={"/aset/no-img.png"} />
+        </AspectRatio>
+      </Paper>
+
+      {/* Title dan Persentase */}
+      <Box mb={"md"}>
+        <Title order={4} mb={"xs"}>
+          Judul Proyek
+        </Title>
+        <Slider
+          disabled
+          size={10}
+          value={60}
+          marks={[{ value: 60, label: "60%" }]}
+        />
+      </Box>
+
+      {/* Rincian Data */}
+      <Grid p={"md"} mb={"md"}>
+        <Grid.Col span={6}>
+          <Stack>
+            <Box>
+              <Text>Terkumpul</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Dana Dibutuhkan</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Harga Per Lembar</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Jadwal Pembagian</Text>
+              <Text>3 Bulan </Text>
+            </Box>
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <Stack>
+            <Box>
+              <Text>Investor</Text>
+              <Text>4657</Text>
+            </Box>
+            <Box>
+              <Text>ROI</Text>
+              <Text>%</Text>
+            </Box>
+            <Box>
+              <Text>Total Lembar</Text>
+              <Text>0</Text>
+            </Box>
+            <Box>
+              <Text>Pembagian Deviden</Text>
+              <Text>Selamanya</Text>
+            </Box>
+          </Stack>
+        </Grid.Col>
+      </Grid>
+
+      {/* List Box */}
+      {/* <Grid mb={"md"}>
+        {listBox.map((e) => (
+          <Grid.Col span={"auto"} key={e.id} onClick={() => router.push(e.route + `${id}`)}>
+            <Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
+              <Flex direction={"column"} align={"center"} justify={"center"}>
+                <Text fz={12}>{e.name}</Text>
+                <ActionIcon variant="transparent" size={60}>
+                  {e.icon}
+                </ActionIcon>
+              </Flex>
+            </Paper>
+          </Grid.Col>
+        ))}
+      </Grid> */}
+    </>
+  );
+}

src/app_modules/investasi/detail_prospektus/layout.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import router from "next/router";
+import { title } from "process";
+import React from "react";
+
+export default function LayoutDetailProspektus({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Prospektus" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/detail_prospektus/view.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Paper, Grid, Center, Text } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import Link from "next/link";
+
+export default function DetailPropektus() {
+  return (
+    <>
+      <Link
+        href={"/aset/dummy_file.pdf"}
+        target="_blank"
+        style={{ textDecorationLine: "none" }}
+      >
+        <Paper w={"100%"} h={50} bg={"gray"} mb={"md"}>
+          <Grid
+            align="center"
+            justify="center"
+            h={50}
+            px={"sm"}
+            onClick={() => ""}
+          >
+            <Grid.Col span={10}>
+              <Text>Nama File.pdf</Text>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <Center>
+                <IconChevronRight />
+              </Center>
+            </Grid.Col>
+          </Grid>
+        </Paper>
+      </Link>
+    </>
+  );
+}

src/app_modules/investasi/detail_saham_terbeli/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutDetailSahamTerbeli({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Saham Terbeli" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/detail_saham_terbeli/view.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { RouteInvestasi } from "@/app/lib/app_route";
+import { Warna } from "@/app/lib/warna";
+import {
+  ActionIcon,
+  AspectRatio,
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Slider,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
+  IconBookDownload,
+  IconFileDescription,
+  IconSpeakerphone,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function DetailSahamTerbeli({id}: {id: string}) {
+  const router = useRouter();
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: RouteInvestasi.detail_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: RouteInvestasi.detail_dokumen,
+    },
+    {
+      id: 3,
+      name: "Berita",
+      icon: <IconSpeakerphone size={70} />,
+      route: RouteInvestasi.detail_berita,
+    },
+  ];
+  return (
+    <>
+      <Group position="apart" mb={"md"}>
+        <Flex align={"center"} gap={"xs"}>
+          <Avatar src={"/aset/avatar.png"} />
+          <Text>Username</Text>
+        </Flex>
+        <Text>Sisa waktu : 20 Hari</Text>
+      </Group>
+
+      {/* Gambar Investasi */}
+      <Paper withBorder mb={"md"}>
+        <AspectRatio ratio={16 / 9}>
+          <Image alt="" src={"/aset/no-img.png"} />
+        </AspectRatio>
+      </Paper>
+
+      {/* Title dan Persentase */}
+      <Box mb={"md"}>
+        <Title order={4} mb={"xs"}>
+          Judul Proyek
+        </Title>
+        <Slider
+          disabled
+          size={10}
+          value={60}
+          marks={[{ value: 60, label: "60%" }]}
+        />
+      </Box>
+
+      {/* Rincian Data */}
+      <Grid p={"md"}>
+        <Grid.Col span={6}>
+          <Stack>
+            <Box>
+              <Text>Terkumpul</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Dana Dibutuhkan</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Harga Per Lembar</Text>
+              <Text>Rp. </Text>
+            </Box>
+            <Box>
+              <Text>Jadwal Pembagian</Text>
+              <Text>3 Bulan </Text>
+            </Box>
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <Stack>
+            <Box>
+              <Text>Investor</Text>
+              <Text>4657</Text>
+            </Box>
+            <Box>
+              <Text>ROI</Text>
+              <Text>%</Text>
+            </Box>
+            <Box>
+              <Text>Total Lembar</Text>
+              <Text>0</Text>
+            </Box>
+            <Box>
+              <Text>Pembagian Deviden</Text>
+              <Text>Selamanya</Text>
+            </Box>
+          </Stack>
+        </Grid.Col>
+      </Grid>
+
+      <Divider my={"md"} />
+
+      {/* Saham Terbeli */}
+      <Box>
+        <Center>
+          <Title order={5}>Saham Anda</Title>
+        </Center>
+        <Grid p={"md"}>
+          <Grid.Col span={6}>
+            <Stack>
+              <Box>
+                <Text>Total Pembelian</Text>
+                <Text>Rp. 0</Text>
+              </Box>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Stack>
+              <Box>
+                <Text>Lembar Dibeli</Text>
+                <Text>100</Text>
+              </Box>
+            </Stack>
+          </Grid.Col>
+        </Grid>
+      </Box>
+
+      {/* List Box */}
+      <Grid mb={"sm"} justify="center">
+        {listBox.map((e) => (
+          <Grid.Col span={"auto"} key={e.id} onClick={() => router.push(e.route + `${id}`)}>
+            <Center>
+              <Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
+                <Flex direction={"column"} align={"center"} justify={"center"}>
+                  <Text fz={12}>{e.name}</Text>
+                  <ActionIcon variant="transparent" size={60}>
+                    {e.icon}
+                  </ActionIcon>
+                </Flex>
+              </Paper>
+            </Center>
+          </Grid.Col>
+        ))}
+      </Grid>
+    </>
+  );
+}

src/app_modules/investasi/dummy/data_dummy.json

@@ -0,0 +1,112 @@
+[
+  {
+    "id": "clny2l8e20002tlagig62qv50",
+    "title": "Event EO",
+    "targetDana": "20000",
+    "hargaLembar": "1000",
+    "totalLembar": "200",
+    "roi": "7",
+    "active": true,
+    "createdAt": "2023-10-20T03:47:19.610Z",
+    "updatedAt": "2023-10-20T03:47:19.610Z",
+    "authorId": "clntsruqk0002tlrfyc9vzhxx",
+    "masterPeriodeDevidenId": "Akhir Project",
+    "masterPembagianDevidenId": 3,
+    "masterPencarianInvestorId": 60,
+    "imagesId": "clny2l8dj0000tlagcpsi9dmz",
+    "persentase": 40,
+    "saham_beli": 1,
+    "statusPorto": {
+      "id": 1,
+      "status": "Draft"
+    }
+  },
+  {
+    "id": "clnxyjc0r0002tlamg8fn9ubk",
+    "title": "Subway ",
+    "targetDana": "1600000000",
+    "hargaLembar": "1000",
+    "totalLembar": "1600000",
+    "roi": "6",
+    "active": true,
+    "createdAt": "2023-10-20T01:53:52.539Z",
+    "updatedAt": "2023-10-20T01:53:52.539Z",
+    "authorId": "clntxvesu0002tlnbz030gx30",
+    "masterPeriodeDevidenId": "Selamanya",
+    "masterPembagianDevidenId": 6,
+    "masterPencarianInvestorId": 4,
+    "imagesId": "clnxyjc070000tlamc5jmsqse",
+    "persentase": 60,
+    "saham_beli": 0,
+    "statusPorto": {
+      "id": 2,
+      "status": "Review"
+    }
+  },
+  {
+    "id": "clnwzrcqz0002tlqlrb3b8kif",
+    "title": "Weeding EO",
+    "targetDana": "300000",
+    "hargaLembar": "1000",
+    "totalLembar": "3000",
+    "roi": "6",
+    "active": true,
+    "createdAt": "2023-10-19T09:40:20.171Z",
+    "updatedAt": "2023-10-19T09:40:20.171Z",
+    "authorId": "clntxvesu0002tlnbz030gx30",
+    "masterPeriodeDevidenId": "Selamanya",
+    "masterPembagianDevidenId": 6,
+    "masterPencarianInvestorId": 30,
+    "imagesId": "clnwzrcqs0000tlqlfr2cmbo5",
+    "persentase": 30,
+    "saham_beli": 1,
+    "statusPorto": {
+      "id": 3,
+      "status": "Accept"
+    }
+  },
+  {
+    "id": "clnwzmah00005tlwdn1h7htp6",
+    "title": "Exi EO",
+    "targetDana": "100000",
+    "hargaLembar": "1000",
+    "totalLembar": "1000",
+    "roi": "3",
+    "active": true,
+    "createdAt": "2023-10-19T09:36:23.940Z",
+    "updatedAt": "2023-10-19T09:36:23.940Z",
+    "authorId": "clntxvesu0002tlnbz030gx30",
+    "masterPeriodeDevidenId": "Selamanya",
+    "masterPembagianDevidenId": 3,
+    "masterPencarianInvestorId": 60,
+    "imagesId": "clnwzmagq0003tlwd2gldlzgb",
+    "persentase": 50,
+    "saham_beli": 1,
+    "statusPorto": {
+      "id": 2,
+      "status": "Review"
+    }
+  },
+  {
+    "id": "clnwyvtlx0002tlfopdvez4yr",
+    "title": "Party EO",
+    "targetDana": "30000",
+    "hargaLembar": "1000",
+    "totalLembar": "30",
+    "roi": "1",
+    "active": true,
+    "createdAt": "2023-10-19T09:15:49.030Z",
+    "updatedAt": "2023-10-19T09:15:49.030Z",
+    "authorId": "clntxvesu0002tlnbz030gx30",
+    "masterPeriodeDevidenId": "Selamanya",
+    "masterPembagianDevidenId": 3,
+    "masterPencarianInvestorId": 90,
+    "imagesId": "clnwyvtlh0000tlfof0ec1x9k",
+    "persentase": 80,
+    "saham_beli": 0,
+    "statusPorto": {
+      "id": 3,
+      "status": "Accept"
+    }
+  }
+]

src/app_modules/investasi/edit/layout.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate"
+import { AppShell } from "@mantine/core"
+import React from "react"
+
+export default function LayoutEditInvestasi({children}: {children: React.ReactNode}){
+    return<>
+    <AppShell header={<HeaderTamplate title="Edit Portofolio Investasi"/>}>
+        {children}
+    </AppShell>
+    </>
+}

src/app_modules/investasi/edit/view.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { RouteInvestasi } from "@/app/lib/app_route";
+import { Center, Grid, Group, Paper, Text, Title } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function EditInvestasi({id}:{id:string}) {
+  const router = useRouter();
+  const listEdit = [
+    {
+      id: 1,
+      name: "Intro",
+      route: RouteInvestasi.edit_intro,
+    },
+    {
+      id: 2,
+      name: "Prospektus",
+      route: RouteInvestasi.edit_prospektus,
+    },
+    {
+      id: 3,
+      name: "Dokumen",
+      route: RouteInvestasi.edit_dokumen,
+    },
+    {
+      id: 4,
+      name: "Berita",
+      route: RouteInvestasi.edit_berita,
+    },
+  ];
+  return (
+    <>
+      {listEdit.map((e) => (
+        <Paper
+          key={e.id}
+          w={"100%"}
+          h={50}
+          bg={"gray"}
+          mb={"md"}
+          onClick={() => router.push(e.route + `${id}`)}
+        >
+          <Grid align="center" justify="center" h={50} px={"sm"}>
+            <Grid.Col span={10}>
+              <Text>{e.name}</Text>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <Center>
+                <IconChevronRight />
+              </Center>
+            </Grid.Col>
+          </Grid>
+        </Paper>
+      ))}
+    </>
+  );
+}

src/app_modules/investasi/edit_berita/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutEditBeritaInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Edit Berita" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/edit_berita/view.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { Text } from "@mantine/core"
+
+export default function EditBeritaInvestasi(){
+    return<>
+    <Text>Berita</Text>
+    
+    </>
+}

src/app_modules/investasi/edit_dokumen/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutEditDokumenInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Edit Dokumen" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/edit_dokumen/view.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { Paper, Grid, Center, Title, Divider, Button, Text } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import Link from "next/link";
+import { useState } from "react";
+
+export default function EditDokumenInvestasi(){
+    const [edit, setEdit] = useState(false);
+
+  return (
+    <>
+      {edit ? (
+        <Link
+          href={"https://pii.or.id/uploads/dummies.pdf"}
+          target="_blank"
+          style={{ textDecorationLine: "none" }}
+        >
+          <Paper w={"100%"} h={50} bg={"gray"} mb={"md"}>
+            <Grid
+              align="center"
+              justify="center"
+              h={50}
+              px={"sm"}
+              onClick={() => ""}
+            >
+              <Grid.Col span={10}>
+                <Text>Nama File.pdf</Text>
+              </Grid.Col>
+              <Grid.Col span={2}>
+                <Center>
+                  <IconChevronRight />
+                </Center>
+              </Grid.Col>
+            </Grid>
+          </Paper>
+        </Link>
+      ) : (
+        <Center>
+          <Title order={4}>Tidak ada file</Title>
+        </Center>
+      )}
+
+      <Divider mt={"lg"} />
+
+      <Center>
+        <Button mt={"md"} compact radius={50}>
+          Upload
+        </Button>
+      </Center>
+    </>
+  );
+}

src/app_modules/investasi/edit_intro/layout.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate"
+import { AppShell } from "@mantine/core"
+import React from "react"
+
+export default function LayoutEditIntroInvestasi({children}: {children: React.ReactNode}){
+    return<>
+    <AppShell
+    header={<HeaderTamplate title="Edit Intro"/>}
+    >
+        {children}
+    </AppShell>
+    </>
+}

src/app_modules/investasi/edit_intro/view.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { Paper, Grid, Center, Text, Title, Button, Divider, AspectRatio, Box, FileButton, Group, Select, TextInput, Image } from "@mantine/core";
+import { IconCamera, IconChevronRight } from "@tabler/icons-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { useState } from "react";
+
+export default function EditIntroInvestasi() {
+  const router = useRouter()
+  const [edit, setEdit] = useState(true);
+  const [img, setImg] = useState<any | null>();
+  const [value, setValue] = useState({
+    title: "",
+    targetDana: "",
+    hargaLembar: "",
+    totalLembar: "",
+    roi: "",
+    pencarianInvestorId: "",
+    periodeDevidenId: "",
+    pembagianDevidenId: "",
+  });
+
+  return<>
+  <Box>
+        <AspectRatio ratio={16 / 9}>
+          {img ? (
+            <Image alt="" src={img} />
+          ) : (
+            <Image alt="" src={"/aset/no-img.png"} />
+          )}
+        </AspectRatio>
+        <Group position="center" mt={"md"}>
+          <FileButton
+            onChange={async (files: any) => {
+              const buffer = URL.createObjectURL(
+                new Blob([new Uint8Array(await files.arrayBuffer())])
+              );
+              // setImg(buffer);
+              // setFl(files);
+            }}
+            accept="image/png,image/jpeg"
+          >
+            {(props) => (
+              <Button
+                {...props}
+                w={350}
+                radius={50}
+                // bg={Warna.biru}
+                // onClick={() => router.push("/dev/investasi/upload")}
+              >
+                <IconCamera />
+              </Button>
+            )}
+          </FileButton>
+        </Group>
+
+        <Center>
+          <Box mt={"md"} w={350}>
+            <TextInput
+              label="Judul Proyek"
+              onChange={(val) => {
+                setValue({
+                  ...value,
+                  title: val.target.value,
+                });
+              }}
+            />
+            <TextInput
+              label="Dana Dibutuhan"
+              type="number"
+              onChange={(val) => {
+                setValue({
+                  ...value,
+                  targetDana: val.target.value,
+                });
+              }}
+            />
+            <TextInput
+              label="Harga Per Lember"
+              type="number"
+              onChange={(val) => {
+                setValue({
+                  ...value,
+                  hargaLembar: val.target.value,
+                });
+              }}
+            />
+            <TextInput
+              label="Total Lembar"
+              type="number"
+              onChange={(val) => {
+                setValue({
+                  ...value,
+                  totalLembar: val.target.value,
+                });
+              }}
+            />
+            <TextInput
+              label="Rasio Keuntungan / ROI"
+              type="number"
+              onChange={(val) => {
+                setValue({
+                  ...value,
+                  roi: val.target.value,
+                });
+              }}
+            />
+            <Select
+              label="Pencarian Investor"
+              // data={pencarianInvestor.map((e) => ({
+              //   value: e.id,
+              //   label: e.name,
+              // }))}
+              data={[]}
+              onChange={(val) => {
+                setValue({
+                  ...(value as any),
+                  pencarianInvestorId: val,
+                });
+              }}
+            />
+            <Select
+              label="Periode Deviden"
+              // data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
+              data={[]}
+              onChange={(val) => {
+                setValue({
+                  ...(value as any),
+                  periodeDevidenId: val,
+                });
+              }}
+            />
+            <Select
+              label="Pembagian Deviden"
+              // data={pembagianDeviden.map((e) => ({
+              //   value: e.id,
+              //   label: e.name,
+              // }))}
+              data={[]}
+              onChange={(val) => {
+                setValue({
+                  ...(value as any),
+                  pembagianDevidenId: val,
+                });
+              }}
+            />
+          </Box>
+        </Center>
+        <Center my={"lg"}>
+          <Button w={200} radius={50}
+          //  onClick={() => onSubmit() }
+          onClick={() => router.back()}
+          >
+            Update
+          </Button>
+        </Center>
+      </Box>
+  </>
+}

src/app_modules/investasi/edit_propektus/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutEditProspektusInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Edit Prospektus" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/edit_propektus/view.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import {
+  Paper,
+  Grid,
+  Center,
+  Title,
+  Divider,
+  Button,
+  Text,
+} from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import Link from "next/link";
+import { useState } from "react";
+
+export default function EditProspektusInvestasi() {
+  const [edit, setEdit] = useState(true);
+
+  return (
+    <>
+      {edit ? (
+        <Link
+          href={"/aset/dummy_file.pdf"}
+          target="_blank"
+          style={{ textDecorationLine: "none" }}
+        >
+          <Paper w={"100%"} h={50} bg={"gray"} mb={"md"}>
+            <Grid
+              align="center"
+              justify="center"
+              h={50}
+              px={"sm"}
+              onClick={() => ""}
+            >
+              <Grid.Col span={10}>
+                <Text>Nama File.pdf</Text>
+              </Grid.Col>
+              <Grid.Col span={2}>
+                <Center>
+                  <IconChevronRight />
+                </Center>
+              </Grid.Col>
+            </Grid>
+          </Paper>
+        </Link>
+      ) : (
+        <Center>
+          <Title order={4}>Tidak ada file</Title>
+        </Center>
+      )}
+
+      <Divider mt={"lg"} />
+
+      <Center>
+        <Button mt={"md"} compact radius={50}>
+          Upload
+        </Button>
+      </Center>
+    </>
+  );
+}

src/app_modules/investasi/index.ts

@@ -4,6 +4,38 @@ import InvestasiCreate from "./create/view";
 import InvestasiCreateLayout from "./create/layout";
 import UploadGambarInvestasi from "./upload/view";
 import LayoutUploadGambarInvestasi from "./upload/layout";
+import DetailInvestasi from "./detail/view";
+import LayoutDetailInvestasi from "./detail/layout";
+import ProsesInvestasi from "./proses_investasi/view";
+import LayoutProsesInvestasi from "./proses_investasi/layout";
+import UploadBuktiTransferInvestasi from "./upload_bukti/view";
+import LayoutBuktiTransferInvestasi from "./upload_bukti/layout";
+import KonfirmasiBuktiInvestasi from "./konfirmasi/view";
+import PortofolioInvestasi from "./portofolio/view";
+import PortofolioDetailInvestasi from "./detail_porto/view";
+import LayoutPortofolioDetailInvestasi from "./detail_porto/layout";
+import EditInvestasi from "./edit/view";
+import LayoutEditInvestasi from "./edit/layout";
+import EditIntroInvestasi from "./edit_intro/view";
+import LayoutEditIntroInvestasi from "./edit_intro/layout";
+import EditProspektusInvestasi from "./edit_propektus/view";
+import LayoutEditProspektusInvestasi from "./edit_propektus/layout";
+import EditDokumenInvestasi from "./edit_dokumen/view";
+import LayoutEditDokumenInvestasi from "./edit_dokumen/layout";
+import EditBeritaInvestasi from "./edit_berita/view";
+import LayoutEditBeritaInvestasi from "./edit_berita/layout";
+import DetailSahamTerbeli from "./detail_saham_terbeli/view";
+import LayoutDetailSahamTerbeli from "./detail_saham_terbeli/layout";
+import DetailPropektus from "./detail_prospektus/view";
+import LayoutDetailPropektus from "./detail_prospektus/layout";
+import DetailDokumenInvestasi from "./detail_dokumen/view";
+import LayoutDetailDokumenInvestasi from "./detail_dokumen/layout";
+import DetailBeritaInvestasi from "./detail_berita/view";
+import LayoutDetailBeritaInvestasi from "./detail_berita/layout";
+import BeritaInvestasi from "./berita/view";
+import LayoutBeritaInvestasi from "./berita/layout";
+import MetodeTransferInvestasi from "./metode_transfer/view";
+import LayoutMetodeTransferInvestasi from "./metode_transfer/layout";
 
 export {
   MainInvestasi,
@@ -12,4 +44,36 @@ export {
   InvestasiCreateLayout,
   UploadGambarInvestasi,
   LayoutUploadGambarInvestasi,
+  DetailInvestasi,
+  LayoutDetailInvestasi,
+  ProsesInvestasi,
+  LayoutProsesInvestasi,
+  UploadBuktiTransferInvestasi,
+  LayoutBuktiTransferInvestasi,
+  KonfirmasiBuktiInvestasi,
+  PortofolioInvestasi,
+  PortofolioDetailInvestasi,
+  LayoutPortofolioDetailInvestasi,
+  EditInvestasi,
+  LayoutEditInvestasi,
+  EditIntroInvestasi,
+  LayoutEditIntroInvestasi,
+  EditProspektusInvestasi,
+  LayoutEditProspektusInvestasi,
+  EditDokumenInvestasi,
+  LayoutEditDokumenInvestasi,
+  EditBeritaInvestasi,
+  LayoutEditBeritaInvestasi,
+  DetailSahamTerbeli,
+  LayoutDetailSahamTerbeli,
+  DetailPropektus,
+  LayoutDetailPropektus,
+  DetailDokumenInvestasi,
+  LayoutDetailDokumenInvestasi,
+  DetailBeritaInvestasi,
+  LayoutDetailBeritaInvestasi,
+  BeritaInvestasi,
+  LayoutBeritaInvestasi as LayoutBeritaInvestasi,
+  MetodeTransferInvestasi,
+  LayoutMetodeTransferInvestasi,
 };

src/app_modules/investasi/konfirmasi/view.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Center, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconCircleCheck } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function KonfirmasiBuktiInvestasi() {
+  const router = useRouter();
+  useShallowEffect(() => {
+    setTimeout(() => router.push("/dev/investasi/main/portofolio"), 2000);
+  }, []);
+
+  return (
+    <>
+      <Center h={"100vh"}>
+        <Stack>
+          <Text>Bukti Transfer Berhasil Di Upload</Text>
+          <Center>
+            <IconCircleCheck size={100} />
+          </Center>
+        </Stack>
+      </Center>
+    </>
+  );
+}

src/app_modules/investasi/main/layout.tsx

@@ -17,13 +17,16 @@ import {
   IconChartPieFilled,
   IconPencilPlus,
 } from "@tabler/icons-react";
-import React from "react";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
 
 export default function LayoutMainInvestasi({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const router = useRouter();
+
   return (
     <>
       <AppShell
@@ -38,7 +41,12 @@ export default function LayoutMainInvestasi({
         footer={
           <Footer height={70} bg={"dark"}>
             <Grid align="center" h={60} pt={"xs"}>
-              <Grid.Col span={6}>
+              <Grid.Col
+                span={6}
+                onClick={() => {
+                  router.push("/dev/investasi/main");
+                }}
+              >
                 <Center>
                   <Flex direction={"column"} align={"center"} w={"100%"}>
                     <ActionIcon variant="transparent">
@@ -48,7 +56,12 @@ export default function LayoutMainInvestasi({
                   </Flex>
                 </Center>
               </Grid.Col>
-              <Grid.Col span={6}>
+              <Grid.Col
+                span={6}
+                onClick={() => {
+                  router.push("/dev/investasi/main/portofolio");
+                }}
+              >
                 <Center>
                   <Flex direction={"column"} align={"center"} w={"100%"}>
                     <ActionIcon variant="transparent">

src/app_modules/investasi/main/view.tsx

@@ -5,6 +5,7 @@ import { INVESTASI } from "@/app_modules/models/investasi";
 import { MODEL_ALL_MASTER } from "@/app_modules/models/model_AllMaster";
 import {
   AspectRatio,
+  Badge,
   Box,
   Button,
   Card,
@@ -20,6 +21,9 @@ import {
   Title,
 } from "@mantine/core";
 import { useRouter } from "next/navigation";
+import dataDummy from "../dummy/data_dummy.json";
+import moment from "moment";
+import { IconCheck, IconCircleCheck } from "@tabler/icons-react";
 
 export default function MainInvestasi({
   listData,
@@ -33,11 +37,18 @@ export default function MainInvestasi({
   pembagianDeviden: MODEL_ALL_MASTER[];
 }) {
   const router = useRouter();
+
   return (
     <>
+      {/* <pre>{JSON.stringify(listData, null, 2)}</pre> */}
+      {dataDummy.map((e) => (
+        <Card
+          key={e.id}
+          withBorder
+          mb={"lg"}
+          onClick={() => router.push(`/dev/investasi/detail/${e.id}`)}
+        >
 
-      {listData.map((e) => (
-        <Card key={e.id} p={"md"} withBorder mb={"lg"}>
           <CardSection p={"xs"}>
             <AspectRatio ratio={16 / 9}>
               {e.imagesId ? (
@@ -49,20 +60,19 @@ export default function MainInvestasi({
           </CardSection>
 
           <CardSection p={"lg"}>
-            <Box mt={"md"}>
+            <Box mb={"md"}>
+              <Title order={4}>{e.title}</Title>
               <Slider
                 size={10}
+                disabled
                 labelAlwaysOn
-                marks={[
+                value={e.persentase}
-                  // { value: 25, label: '25%' },
+                marks={[{ value: e.persentase, label: e.persentase + `%` }]}
-                  // { value: 50, label: '50%' },
-                  // { value: 75, label: '75%' },
-                  { value: 100, label: "100%" },
-                ]}
               />
-              <Title order={4}>{e.title}</Title>
             </Box>
-            <Box mt={"md"}>
+          </CardSection>
+          <CardSection  p={"md"} >
+            <Box>
               <Grid>
                 <Grid.Col span={6}>
                   <Stack>
@@ -93,8 +103,48 @@ export default function MainInvestasi({
           </CardSection>
           <Divider />
           <CardSection p={"md"}>
-            <Group position="right">
+            <Group position="apart" px={"sm"}>
-              <Text>Selesai</Text>
+              <Box>
+                {e.saham_beli === 0 ? (
+                  ""
+                ) : (
+                  <Badge variant="filled" color="teal">
+                    Saham Anda
+                  </Badge>
+                )}
+              </Box>
+              {(() => {
+                if (
+                  e.masterPencarianInvestorId -
+                    moment(new Date()).diff(new Date(e.createdAt), "days") <=
+                  0
+                ) {
+                  return (
+                    <>
+                      <Group position="right">
+                        <IconCircleCheck />
+                        <Text>Selesai</Text>
+                      </Group>
+                    </>
+                  );
+                } else {
+                  return (
+                    <>
+                      <Group position="right" spacing={"xs"}>
+                        <Text>Sisa waktu:</Text>
+                        <Text>
+                          {e.masterPencarianInvestorId -
+                            moment(new Date()).diff(
+                              new Date(e.createdAt),
+                              "days"
+                            )}
+                        </Text>
+                        <Text>Hari</Text>
+                      </Group>
+                    </>
+                  );
+                }
+              })()}
             </Group>
           </CardSection>
         </Card>

src/app_modules/investasi/metode_transfer/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutMetodeTransferInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Pilih Metode Transfer" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/metode_transfer/view.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { Warna } from "@/app/lib/warna";
+import {
+  Box,
+  Button,
+  Center,
+  Flex,
+  Group,
+  Paper,
+  Radio,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+
+const listNoRekening = [
+  {
+    id: 1,
+    name: "BRI",
+    norek: "9065456754325643",
+  },
+  {
+    id: 2,
+    name: "BCA",
+    norek: "2304235678854332",
+  },
+  {
+    id: 3,
+    name: "BNI",
+    norek: "1104786754324564",
+  },
+  {
+    id: 4,
+    name: "BSI",
+    norek: "7076543567898976",
+  },
+];
+
+export default function MetodeTransferInvestasi() {
+  const [total, setTotal] = useState<any | null>(null);
+  const [checked, setChecked] = useState(false);
+  const [bank, setBank] = useState("");
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    if (typeof window !== undefined) {
+      const data = localStorage.getItem("total_harga");
+      setTotal(data);
+    }
+  }, []);
+
+  async function onSubmit() {
+    router.push("/dev/investasi/upload_bukti");
+    localStorage.setItem("bank", bank);
+  }
+  return (
+    <>
+      {/* Box judul */}
+      <Paper h={70} bg={"gray"} p={"xs"} shadow="lg" mb={"md"}>
+        <Title order={5}>Judul Proyek Investasi</Title>
+        <Text fz={"sm"}>Total Transfer : Rp.{total}</Text>
+      </Paper>
+
+      {/* Metode transfer */}
+      <Radio.Group
+        name="Metode Trf"
+        label="Metode Transfer"
+        description="Pilih salah satu bank"
+        withAsterisk
+        my={"md"}
+        onChange={setBank}
+      >
+        <Flex direction={"column"} gap={"lg"} mt="xs">
+          {listNoRekening.map((e) => (
+            <Box key={e.id}>
+              <Radio value={e.norek} label={e.name + ":  " + e.norek} />
+            </Box>
+          ))}
+        </Flex>
+      </Radio.Group>
+      <Center>
+        {bank === "" ? (
+          <Button my={"md"} w={300} disabled radius={50}>
+            Pilih
+          </Button>
+        ) : (
+          <Button
+            my={"md"}
+            w={300}
+            bg={Warna.biru}
+            radius={50}
+            onClick={() => {
+              onSubmit();
+            }}
+          >
+            Pilih
+          </Button>
+        )}
+      </Center>
+    </>
+  );
+}

src/app_modules/investasi/model/dummy.ts

@@ -0,0 +1,22 @@
+export interface DUMMY_INVESTASI {
+  id: string;
+  authorId: string;
+  title: string;
+  targetDana: string;
+  hargaLembar: string;
+  totalLembar: string;
+  roi: string;
+  masterPeriodeDevidenId: string;
+  masterPembagianDevidenId: string;
+  masterPencarianInvestorId: string;
+  imagesId: string;
+  active: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  persentase: number;
+  saham_beli: number;
+  statusPorto: {
+    id: number;
+    status: string;
+  };
+}

src/app_modules/investasi/portofolio/view.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+import {
+  AspectRatio,
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  Card,
+  CardSection,
+  Collapse,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Slider,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import dataDummy from "../dummy/data_dummy.json";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { IconCaretDown, IconCircleCheck } from "@tabler/icons-react";
+import { useState } from "react";
+
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
+import { Carousel } from "react-responsive-carousel";
+import { useDisclosure } from "@mantine/hooks";
+import { Warna } from "@/app/lib/warna";
+import { RouteInvestasi } from "@/app/lib/app_route";
+
+export default function PortofolioInvestasi() {
+  const router = useRouter();
+  return (
+    <>
+      <MyPortofolioInvestasi />
+      <SahamTerbeli />
+    </>
+  );
+}
+
+function MyPortofolioInvestasi() {
+  const [opened, { toggle }] = useDisclosure(false);
+  const router = useRouter();
+
+  return (
+    <>
+      <Carousel showThumbs={false} infiniteLoop={true} showArrows={false} showStatus={false} swipeable={true}>
+        {dataDummy.map((e) => (
+          <Card
+            key={e.id}
+            withBorder
+            mb={40}
+            bg={"gray"}
+            onClick={() => router.push(`/dev/investasi/detail_porto/${e.id}`)}
+          >
+            <CardSection p={"xs"}>
+              <AspectRatio ratio={16 / 9}>
+                {/* {e.imagesId ? (
+                <Image alt="" src={`/api/investasi/gambar/${e.imagesId}`} />
+              ) : (
+                <Image alt="" src={"/aset/no-img.png"} />
+              )} */}
+                <Image alt="" src={"/aset/no-img.png"} />
+              </AspectRatio>
+            </CardSection>
+
+            <CardSection p={"lg"}>
+              <Box mb={"md"}>
+                <Title order={4}>{e.title}</Title>
+                <Slider
+                  size={10}
+                  disabled
+                  labelAlwaysOn
+                  value={e.persentase}
+                  marks={[{ value: e.persentase, label: e.persentase + `%` }]}
+                />
+              </Box>
+            </CardSection>
+            <Divider />
+            <CardSection p={"md"}>
+              <Group position="apart">
+                {(() => {
+                  if (e.statusPorto.id === 1) {
+                    return (
+                      <Badge color="yellow" variant="filled">
+                        {e.statusPorto.status}
+                      </Badge>
+                    );
+                  } else {
+                    if (e.statusPorto.id === 2) {
+                      return (
+                        <Badge color="red" variant="filled">
+                          {e.statusPorto.status}
+                        </Badge>
+                      );
+                    } else {
+                      return (
+                        <Badge color="green" variant="filled">
+                          {e.statusPorto.status}
+                        </Badge>
+                      );
+                    }
+                  }
+                })()}
+
+                {(() => {
+                  if (
+                    e.masterPencarianInvestorId -
+                      moment(new Date()).diff(new Date(e.createdAt), "days") <=
+                    0
+                  ) {
+                    return (
+                      <>
+                        <Group position="right">
+                          <IconCircleCheck />
+                          <Text>Selesai</Text>
+                        </Group>
+                      </>
+                    );
+                  } else {
+                    return (
+                      <>
+                        <Group position="right" spacing={"xs"}>
+                          <Text>Sisa waktu:</Text>
+                          <Text>
+                            {e.masterPencarianInvestorId -
+                              moment(new Date()).diff(
+                                new Date(e.createdAt),
+                                "days"
+                              )}
+                          </Text>
+                          <Text>Hari</Text>
+                        </Group>
+                      </>
+                    );
+                  }
+                })()}
+              </Group>
+            </CardSection>
+          </Card>
+        ))}
+      </Carousel>
+
+      
+    </>
+  );
+}
+
+function SahamTerbeli() {
+  const router = useRouter();
+  const [opened, { toggle }] = useDisclosure(true);
+
+  return (
+    <>
+      <Box maw={400} mx="auto" mt={"xs"}>
+        <Paper mb={5} onClick={toggle} bg={Warna.hijau_tua} px={"md"} h={40}>
+          <Group position="apart" align="center" h={40}>
+            <Title order={6}>Saham Saya</Title>
+            <IconCaretDown />
+          </Group>
+        </Paper>
+
+        <Collapse in={opened} transitionDuration={700}>
+          {dataDummy.map((e) => (
+            <Card
+              key={e.id}
+              withBorder
+              bg={"gray"}
+              mb={"lg"}
+              onClick={() =>
+                router.push(RouteInvestasi.detail_saham_terbeli + `${e.id}`)
+              }
+            >
+              <CardSection>
+                <Group position="left" mt={"sm"} px={"md"}>
+                  <Flex align={"center"} gap={"xs"}>
+                    <Avatar src={"/aset/avatar.png"} />
+                    <Text>Username</Text>
+                  </Flex>
+                </Group>
+              </CardSection>
+              <CardSection p={"xs"}>
+                <AspectRatio ratio={16 / 9}>
+                  {/* {e.imagesId ? (
+                    <Image alt="" src={`/api/investasi/gambar/${e.imagesId}`} />
+                  ) : (
+                    <Image alt="" src={"/aset/no-img.png"} />
+                  )} */}
+                  <Image alt="" src={"/aset/no-img.png"} />
+                </AspectRatio>
+              </CardSection>
+
+              <CardSection p={"lg"}>
+                <Box>
+                  <Title order={4}>{e.title}</Title>
+                  <Slider
+                    size={10}
+                    disabled
+                    labelAlwaysOn
+                    value={e.persentase}
+                    marks={[{ value: e.persentase, label: e.persentase + `%` }]}
+                  />
+                </Box>
+              </CardSection>
+              <CardSection p={"md"}>
+                <Box>
+                  <Grid>
+                    <Grid.Col span={6}>
+                      <Stack>
+                        <Box>
+                          <Text>Dana Dibutuhkan</Text>
+                          <Text>Rp. {e.targetDana}</Text>
+                        </Box>
+                        <Box>
+                          <Text>Harga Per Lembar</Text>
+                          <Text>Rp. {e.hargaLembar}</Text>
+                        </Box>
+                      </Stack>
+                    </Grid.Col>
+                    <Grid.Col span={6}>
+                      <Stack>
+                        <Box>
+                          <Text>ROI</Text>
+                          <Text>{e.roi}%</Text>
+                        </Box>
+                        <Box>
+                          <Text>Total Lembar</Text>
+                          <Text>{e.totalLembar}</Text>
+                        </Box>
+                      </Stack>
+                    </Grid.Col>
+                  </Grid>
+                </Box>
+              </CardSection>
+              <Divider />
+              <CardSection p={"md"}>
+                {(() => {
+                  if (
+                    e.masterPencarianInvestorId -
+                      moment(new Date()).diff(new Date(e.createdAt), "days") <=
+                    0
+                  ) {
+                    return (
+                      <>
+                        <Group position="right">
+                          <IconCircleCheck />
+                          <Text>Selesai</Text>
+                        </Group>
+                      </>
+                    );
+                  } else {
+                    return (
+                      <>
+                        <Group position="right" spacing={"xs"}>
+                          <Text>Sisa waktu:</Text>
+                          <Text>
+                            {e.masterPencarianInvestorId -
+                              moment(new Date()).diff(
+                                new Date(e.createdAt),
+                                "days"
+                              )}
+                          </Text>
+                          <Text>Hari</Text>
+                        </Group>
+                      </>
+                    );
+                  }
+                })()}
+              </CardSection>
+            </Card>
+          ))}
+        </Collapse>
+      </Box>
+    </>
+  );
+}

src/app_modules/investasi/proses_investasi/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutProsesInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+      header={
+        <HeaderTamplate title="Proses Investasi"/>
+      }
+      >{children}</AppShell>
+    </>
+  );
+}

src/app_modules/investasi/proses_investasi/view.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { RouteInvestasi } from "@/app/lib/app_route";
+import { Warna } from "@/app/lib/warna";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Center,
+  Divider,
+  Grid,
+  Group,
+  NumberInput,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useCounter, useShallowEffect } from "@mantine/hooks";
+import {
+  IconMinus,
+  IconNumber10Small,
+  IconPlus,
+  IconRefresh,
+} from "@tabler/icons-react";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+
+export default function ProsesInvestasi() {
+  const router = useRouter();
+  // const [count, handlers] = useCounter(0, { min: 1, max: 1000 });
+  const [sisaLembar, setSisaLembar] = useState(5000);
+  const [hargaLembar, setHargaLembar] = useState(1000);
+  const [beli, setBeli] = useState(0);
+  const [total, setTotal] = useState(0);
+
+  //   const formatter = new Intl.NumberFormat("", {
+  //     style: 'currency',
+  //     currency: 'RP',
+
+  //   });
+
+  async function onProses() {
+    if (beli === 0) return toast("Masukan jumlah pembelian saham");
+    if (beli < 10) return toast("Minimal pemebelian 10 Lembar");
+    const hasil = hargaLembar * beli;
+    setTotal(hasil);
+  }
+
+  async function onBeli() {
+    router.push(RouteInvestasi.metode_transfer);
+    localStorage.setItem("total_harga", total as any);
+  }
+
+  return (
+    <>
+      <Box px={"md"}>
+        {/* Sisa Lembar Saham */}
+        <Group position="apart" mb={"md"}>
+          <Text>Sisa Lembar Saham</Text>
+          <Text fz={23}>{sisaLembar} </Text>
+        </Group>
+
+        {/* Harga perlembar saham */}
+        <Group position="apart" mb={"md"}>
+          <Text>Harga Perlembar</Text>
+          <Text fz={23}>Rp.{hargaLembar} </Text>
+        </Group>
+
+        {/* Lembar saham */}
+        <Group position="apart" mb={"md"}>
+          <Box>
+            <Text>Jumlah Pembelian</Text>
+            <Text fs={"italic"} fz={"xs"}>
+              minimal pembelian 10 lembar
+            </Text>
+          </Box>
+          <NumberInput
+            w={100}
+            value={beli}
+            onChange={(val: number) => setBeli(val)}
+          />
+          {/* <Group position="center">
+            <ActionIcon variant="filled" radius={50} onClick={handlers.reset}>
+              <IconRefresh />
+            </ActionIcon>
+
+            <ActionIcon
+              variant="filled"
+              radius={50}
+              onClick={handlers.decrement}
+            >
+              <IconMinus />
+            </ActionIcon>
+
+            <Text>{count}</Text>
+            <ActionIcon
+              variant="filled"
+              radius={50}
+              onClick={handlers.increment}
+            >
+              <IconPlus />
+            </ActionIcon>
+            <ActionIcon
+              variant="filled"
+              radius={50}
+              onClick={() => handlers.set(1000)}
+            >
+              <IconNumber10Small />
+            </ActionIcon>
+          </Group> */}
+        </Group>
+
+        {/* Tombol Proses  */}
+        <Center>
+          <Button
+            w={100}
+            compact
+            radius={50}
+            bg={Warna.hijau_tua}
+            color="green"
+            onClick={onProses}
+          >
+            Proses
+          </Button>
+        </Center>
+
+        <Divider my={"lg"} />
+
+        <Group position="apart" mb={"md"}>
+          <Box>
+            <Text>Total Harga</Text>
+          </Box>
+          <Text fz={25}>Rp.{total} </Text>
+        </Group>
+        <Center>
+          {total < 10000 ? (
+            <Button w={350} radius={50} bg={"gray"} disabled>
+              Beli Saham
+            </Button>
+          ) : (
+            <Button
+              w={350}
+              radius={50}
+              bg={Warna.biru}
+              onClick={() => {
+                onBeli();
+              }}
+            >
+              Beli Saham
+            </Button>
+          )}
+        </Center>
+      </Box>
+    </>
+  );
+}

src/app_modules/investasi/upload_bukti/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutBuktiTransferInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Upload Bukti Transfer" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/upload_bukti/view.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { Warna } from "@/app/lib/warna";
+import {
+  AspectRatio,
+  Button,
+  Center,
+  CopyButton,
+  FileButton,
+  Grid,
+  Group,
+  Image,
+  Text,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconCamera } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+
+export default function UploadBuktiTransferInvestasi() {
+  const router = useRouter();
+  const [fl, setFl] = useState<File | null>(null);
+  const [img, setImg] = useState<any | null>(null);
+  const [total, setTotal] = useState<any | null>(null);
+  const [bank, setBank] = useState<any | null>(null);
+
+
+  useShallowEffect(() => {
+    if (typeof window !== undefined) {
+      const totalHarga = localStorage.getItem("total_harga");
+      const pilihBank = localStorage.getItem("bank")
+      setTotal(totalHarga);
+      setBank(pilihBank)
+    }
+  }, []);
+
+  return (
+    <>
+      {/* Nama Rekening */}
+      <Grid align="center">
+        <Grid.Col span={5}>
+          <Text>Nama Rekening</Text>
+        </Grid.Col>
+        <Grid.Col span={7}>
+          <Text fw={"bold"}>Xendit</Text>
+        </Grid.Col>
+        
+      </Grid>
+
+      {/* Nomor rekening */}
+      <Grid align="center">
+        <Grid.Col span={5}>
+          <Text>Nomor Rekening</Text>
+        </Grid.Col>
+        <Grid.Col span={7} >
+          <Text fw={"bold"}>{bank}</Text>
+        </Grid.Col>
+        {/* <Grid.Col span={"auto"}>
+          <CopyButton value="908765467897654567">
+            {({ copied, copy }) => (
+              <Button
+                compact
+                radius={50}
+                color={copied ? "teal" : "indigo"}
+                onClick={copy}
+              >
+                {copied ? "Copied url" : "Copy url"}
+              </Button>
+            )}
+          </CopyButton>
+        </Grid.Col> */}
+      </Grid>
+
+      {/* Total Bayar */}
+      <Grid align="center">
+        <Grid.Col span={5}>
+          <Text>Total Bayar</Text>
+        </Grid.Col>
+        <Grid.Col span={7}>
+          <Text fw={"bold"}>Rp. {total}</Text>
+        </Grid.Col>
+       
+      </Grid>
+
+      {/* Upload */}
+      <Group position="center" mt="lg" mb={"md"}>
+        <FileButton
+          onChange={async (files: any) => {
+            const buffer = URL.createObjectURL(
+              new Blob([new Uint8Array(await files.arrayBuffer())])
+            );
+            setImg(buffer);
+            setFl(files);
+          }}
+          accept="image/png,image/jpeg"
+        >
+          {(props) => (
+            <Button
+              {...props}
+              // w={350}
+              compact
+              radius={50}
+              bg={Warna.biru}
+              // onClick={() => router.push("/dev/investasi/upload")}
+            >
+              Upload
+            </Button>
+          )}
+        </FileButton>
+      </Group>
+      <AspectRatio ratio={16 / 9} mb={"lg"}>
+        {img ? (
+          <Image alt="" src={img} />
+        ) : (
+          <Image alt="" src={"/aset/no-img.png"} />
+        )}
+      </AspectRatio>
+
+      <Center>
+        {img === null ? (
+          <Button
+            disabled
+            w={350}
+            radius={50}
+            bg={"gray"}
+            onClick={() => toast("Masukan Bukti Transfer")}
+          >
+            Selesai
+          </Button>
+        ) : (
+          <Button
+            w={350}
+            radius={50}
+            bg={"blue"}
+            onClick={() => router.push("/dev/investasi/konfirmasi")}
+          >
+            Selesai
+          </Button>
+        )}
+      </Center>
+    </>
+  );
+}

src/app_modules/models/investasi.ts

@@ -1,13 +1,17 @@
 export interface INVESTASI {
-    id: string
+  id: string;
-    authorId: string;
+  authorId: string;
-    title: string;
+  title: string;
-    targetDana: string;
+  targetDana: string;
-    hargaLembar: string;
+  hargaLembar: string;
-    totalLembar: string;
+  totalLembar: string;
-    roi: string;
+  roi: string;
-    masterPeriodeDevidenId: string;
+  masterPeriodeDevidenId: string;
-    masterPembagianDevidenId: string;
+  masterPembagianDevidenId: string;
-    masterPencarianInvestorId: string;
+  masterPencarianInvestorId: string;
-    imagesId: string
+  imagesId: string;
-}
+  active: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  persentase: number
+}