diff --git a/src/app/dev/investasi/edit/[id]/layout.tsx b/src/app/dev/investasi/edit/[id]/layout.tsx
new file mode 100644
index 00000000..5ab6c294
--- /dev/null
+++ b/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>
+    </>
+}
\ No newline at end of file
diff --git a/src/app/dev/investasi/edit/[id]/page.tsx b/src/app/dev/investasi/edit/[id]/page.tsx
new file mode 100644
index 00000000..e4aa7e1a
--- /dev/null
+++ b/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} />
+    </>
+  );
+}
diff --git a/src/app/dev/investasi/edit_intro/[id]/layout.tsx b/src/app/dev/investasi/edit_intro/[id]/layout.tsx
new file mode 100644
index 00000000..cd2a32e7
--- /dev/null
+++ b/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>
+    </>
+}
\ No newline at end of file
diff --git a/src/app/dev/investasi/edit_intro/[id]/page.tsx b/src/app/dev/investasi/edit_intro/[id]/page.tsx
new file mode 100644
index 00000000..4cfe4792
--- /dev/null
+++ b/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 />
+    </>
+  );
+}
diff --git a/src/app/dev/investasi/konfirmasi/page.tsx b/src/app/dev/investasi/konfirmasi/page.tsx
new file mode 100644
index 00000000..9dec4842
--- /dev/null
+++ b/src/app/dev/investasi/konfirmasi/page.tsx
@@ -0,0 +1,7 @@
+import { KonfirmasiBuktiInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return <>
+    <KonfirmasiBuktiInvestasi/>
+    </>
+}
\ No newline at end of file
diff --git a/src/app/dev/investasi/main/portofolio/page.tsx b/src/app/dev/investasi/main/portofolio/page.tsx
new file mode 100644
index 00000000..a8f6cbf2
--- /dev/null
+++ b/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/>
+    </>
+}
\ No newline at end of file
diff --git a/src/app/dev/investasi/porto_detail/[id]/layout.tsx b/src/app/dev/investasi/porto_detail/[id]/layout.tsx
new file mode 100644
index 00000000..ae1e2728
--- /dev/null
+++ b/src/app/dev/investasi/porto_detail/[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>
+    </>
+}
\ No newline at end of file
diff --git a/src/app/dev/investasi/porto_detail/[id]/page.tsx b/src/app/dev/investasi/porto_detail/[id]/page.tsx
new file mode 100644
index 00000000..4370ad01
--- /dev/null
+++ b/src/app/dev/investasi/porto_detail/[id]/page.tsx
@@ -0,0 +1,7 @@
+import { PortofolioDetailInvestasi } from "@/app_modules/investasi";
+
+export default async function Page({params} : {params: {id: string}}) {
+    return<>
+    <PortofolioDetailInvestasi/>
+    </>
+}
\ No newline at end of file
diff --git a/src/app_modules/investasi/create/layout.tsx b/src/app_modules/investasi/create/layout.tsx
index d172af76..9407f40c 100644
--- a/src/app_modules/investasi/create/layout.tsx
+++ b/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}
diff --git a/src/app_modules/investasi/dummy/data_dummy.json b/src/app_modules/investasi/dummy/data_dummy.json
index d256ff7f..c31d100b 100644
--- a/src/app_modules/investasi/dummy/data_dummy.json
+++ b/src/app_modules/investasi/dummy/data_dummy.json
@@ -11,8 +11,8 @@
     "updatedAt": "2023-10-20T03:47:19.610Z",
     "authorId": "clntsruqk0002tlrfyc9vzhxx",
     "masterPeriodeDevidenId": "Akhir Project",
-    "masterPembagianDevidenId": "3",
-    "masterPencarianInvestorId": "60",
+    "masterPembagianDevidenId": 3,
+    "masterPencarianInvestorId": 60,
     "imagesId": "clny2l8dj0000tlagcpsi9dmz",
     "persentase": 40
   },
@@ -28,8 +28,8 @@
     "updatedAt": "2023-10-20T01:53:52.539Z",
     "authorId": "clntxvesu0002tlnbz030gx30",
     "masterPeriodeDevidenId": "Selamanya",
-    "masterPembagianDevidenId": "6",
-    "masterPencarianInvestorId": "30",
+    "masterPembagianDevidenId": 6,
+    "masterPencarianInvestorId": 4,
     "imagesId": "clnxyjc070000tlamc5jmsqse",
     "persentase": 60
   }
diff --git a/src/app_modules/investasi/edit/layout.tsx b/src/app_modules/investasi/edit/layout.tsx
new file mode 100644
index 00000000..cfae68e7
--- /dev/null
+++ b/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>
+    </>
+}
\ No newline at end of file
diff --git a/src/app_modules/investasi/edit/view.tsx b/src/app_modules/investasi/edit/view.tsx
new file mode 100644
index 00000000..2f09808e
--- /dev/null
+++ b/src/app_modules/investasi/edit/view.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+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: "/dev/investasi/edit_intro/",
+    },
+    {
+      id: 2,
+      name: "Prospektus",
+      route: "",
+    },
+    {
+      id: 3,
+      name: "Dokumen",
+      route: "",
+    },
+    {
+      id: 4,
+      name: "Berita",
+      route: "",
+    },
+  ];
+  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>
+      ))}
+    </>
+  );
+}
diff --git a/src/app_modules/investasi/edit_intro/layout.tsx b/src/app_modules/investasi/edit_intro/layout.tsx
new file mode 100644
index 00000000..56c93217
--- /dev/null
+++ b/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>
+    </>
+}
\ No newline at end of file
diff --git a/src/app_modules/investasi/edit_intro/view.tsx b/src/app_modules/investasi/edit_intro/view.tsx
new file mode 100644
index 00000000..e6f25ad9
--- /dev/null
+++ b/src/app_modules/investasi/edit_intro/view.tsx
@@ -0,0 +1,198 @@
+"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);
+  // 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>
+  //   </>
+  // );
+  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() }
+          >
+            Update
+          </Button>
+        </Center>
+      </Box>
+  </>
+}
diff --git a/src/app_modules/investasi/index.ts b/src/app_modules/investasi/index.ts
index e62b3c35..5a9a4d6b 100644
--- a/src/app_modules/investasi/index.ts
+++ b/src/app_modules/investasi/index.ts
@@ -10,6 +10,14 @@ 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 "./porto_detail/view";
+import LayoutPortofolioDetailInvestasi from "./porto_detail/layout";
+import EditInvestasi from "./edit/view";
+import LayoutEditInvestasi from "./edit/layout";
+import EditIntroInvestasi from "./edit_intro/view";
+import LayoutEditIntroInvestasi from "./edit_intro/layout";
 
 export {
   MainInvestasi,
@@ -24,4 +32,12 @@ export {
   LayoutProsesInvestasi,
   UploadBuktiTransferInvestasi,
   LayoutBuktiTransferInvestasi,
+  KonfirmasiBuktiInvestasi,
+  PortofolioInvestasi,
+  PortofolioDetailInvestasi,
+  LayoutPortofolioDetailInvestasi,
+  EditInvestasi,
+  LayoutEditInvestasi,
+  EditIntroInvestasi,
+  LayoutEditIntroInvestasi,
 };
diff --git a/src/app_modules/investasi/konfirmasi/view.tsx b/src/app_modules/investasi/konfirmasi/view.tsx
new file mode 100644
index 00000000..5c2ee49d
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/app_modules/investasi/main/layout.tsx b/src/app_modules/investasi/main/layout.tsx
index c80f8273..207b614c 100644
--- a/src/app_modules/investasi/main/layout.tsx
+++ b/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">
diff --git a/src/app_modules/investasi/main/view.tsx b/src/app_modules/investasi/main/view.tsx
index 16b45e7b..06a5c6c4 100644
--- a/src/app_modules/investasi/main/view.tsx
+++ b/src/app_modules/investasi/main/view.tsx
@@ -20,8 +20,9 @@ import {
   Title,
 } from "@mantine/core";
 import { useRouter } from "next/navigation";
-import dataDummy from "../dummy/data_dummy.json"
-import moment from "moment"
+import dataDummy from "../dummy/data_dummy.json";
+import moment from "moment";
+import { IconCheck, IconCircleCheck } from "@tabler/icons-react";
 
 export default function MainInvestasi({
   listData,
@@ -39,7 +40,12 @@ export default function MainInvestasi({
     <>
       {/* <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}`)}>
+        <Card
+          key={e.id}
+          withBorder
+          mb={"lg"}
+          onClick={() => router.push(`/dev/investasi/detail/${e.id}`)}
+        >
           <CardSection p={"xs"}>
             <AspectRatio ratio={16 / 9}>
               {e.imagesId ? (
@@ -57,11 +63,7 @@ export default function MainInvestasi({
                 disabled
                 labelAlwaysOn
                 value={e.persentase}
-                marks={
-                  [
-                    {value: e.persentase, label: e.persentase + `%`}
-                  ]
-                }
+                marks={[{ value: e.persentase, label: e.persentase + `%` }]}
               />
               <Title order={4}>{e.title}</Title>
             </Box>
@@ -96,9 +98,33 @@ export default function MainInvestasi({
           </CardSection>
           <Divider />
           <CardSection p={"md"}>
-            <Group position="right">
-              <Text>{moment(e.createdAt).fromNow()}</Text>
-            </Group>
+            {(() => {
+              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>
       ))}
diff --git a/src/app_modules/investasi/porto_detail/layout.tsx b/src/app_modules/investasi/porto_detail/layout.tsx
new file mode 100644
index 00000000..e158ff52
--- /dev/null
+++ b/src/app_modules/investasi/porto_detail/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="Detail Porto"
+            icon={<IconEdit />}
+            route2={`/dev/investasi/edit/${id}`}
+          />
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/investasi/porto_detail/view.tsx b/src/app_modules/investasi/porto_detail/view.tsx
new file mode 100644
index 00000000..9acc1c61
--- /dev/null
+++ b/src/app_modules/investasi/porto_detail/view.tsx
@@ -0,0 +1,136 @@
+"use client";
+import {
+  ActionIcon,
+  AspectRatio,
+  Avatar,
+  Box,
+  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() {
+  const router = useRouter();
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: "",
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: "",
+    },
+    {
+      id: 3,
+      name: "Berita",
+      icon: <IconSpeakerphone size={70} />,
+      route: "",
+    },
+  ];
+  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}>
+            <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>
+    </>
+  );
+}
diff --git a/src/app_modules/investasi/portofolio/view.tsx b/src/app_modules/investasi/portofolio/view.tsx
new file mode 100644
index 00000000..f3f46193
--- /dev/null
+++ b/src/app_modules/investasi/portofolio/view.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { AspectRatio, Box, Card, CardSection, Divider, Grid, Group, Image, Slider, Stack, Text, Title } from "@mantine/core"
+import dataDummy from "../dummy/data_dummy.json"
+import moment from "moment"
+import { useRouter } from "next/navigation"
+import { IconCircleCheck } from "@tabler/icons-react"
+
+
+export default  function PortofolioInvestasi() {
+    const router = useRouter()
+    return<>
+    
+     {dataDummy.map((e) => (
+        <Card key={e.id}  withBorder mb={"lg"} onClick={() => router.push(`/dev/investasi/porto_detail/${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 mt={"md"}>
+              <Slider
+                size={10}
+                disabled
+                labelAlwaysOn
+                value={e.persentase}
+                marks={
+                  [
+                    {value: e.persentase, label: e.persentase + `%`}
+                  ]
+                }
+              />
+              <Title order={4}>{e.title}</Title>
+            </Box>
+            <Box mt={"md"}>
+              <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>
+      ))}
+    </>
+}
\ No newline at end of file
diff --git a/src/app_modules/investasi/upload_bukti/view.tsx b/src/app_modules/investasi/upload_bukti/view.tsx
index 9376b015..7b95dfaf 100644
--- a/src/app_modules/investasi/upload_bukti/view.tsx
+++ b/src/app_modules/investasi/upload_bukti/view.tsx
@@ -1,29 +1,109 @@
-"use client"
+"use client";
 
-import { Warna } from "@/app/lib/warna"
-import { Button, CopyButton, Grid, Group, Text } from "@mantine/core"
+import { Warna } from "@/app/lib/warna";
+import {
+  AspectRatio,
+  Button,
+  Center,
+  CopyButton,
+  FileButton,
+  Grid,
+  Group,
+  Image,
+  Text,
+} from "@mantine/core";
+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(){
-    return<>
-    <Grid align="center">
+export default function UploadBuktiTransferInvestasi() {
+  const router = useRouter()
+  const [fl, setFl] = useState<File | null>(null);
+  const [img, setImg] = useState<any | null>(null);
+  return (
+    <>
+      <Grid align="center">
         <Grid.Col span={"auto"}>
-
-        <Text>Rekening</Text>
+          <Text>Rekening</Text>
         </Grid.Col>
         <Grid.Col span={"auto"}>
-
-        <Text>908765467897654567</Text>
+          <Text>908765467897654567</Text>
         </Grid.Col>
         <Grid.Col span={"auto"}>
-
-        <CopyButton value="908765467897654567">
-      {({ copied, copy }) => (
-        <Button compact radius={50} color={copied ? 'teal' : 'blue'} onClick={copy}>
-          {copied ? 'Copied url' : 'Copy url'}
-        </Button>
-      )}
-    </CopyButton>
+          <CopyButton value="908765467897654567">
+            {({ copied, copy }) => (
+              <Button
+                compact
+                radius={50}
+                color={copied ? "teal" : "blue"}
+                onClick={copy}
+              >
+                {copied ? "Copied url" : "Copy url"}
+              </Button>
+            )}
+          </CopyButton>
         </Grid.Col>
-    </Grid>
+      </Grid>
+      <Grid align="center">
+        <Grid.Col span={"auto"}>
+          <Text>Total Harga</Text>
+        </Grid.Col>
+        <Grid.Col span={"auto"}>
+          <Text>Rp. 100.000</Text>
+        </Grid.Col>
+        <Grid.Col span={"auto"}></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 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>
     </>
-}
\ No newline at end of file
+  );
+}