From cc4276b596a46ed4cb20f2588e91e602955cf6c8 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Mon, 30 Oct 2023 17:39:36 +0800
Subject: [PATCH] feat Desc: - Fitur transaksi investasi - Fitur hitung mundur
 setelah transaksi - Fitur status transaksi - #No issue

---
 .../investasi/status_transfer/layout.tsx      |  16 ++
 .../admin/investasi/status_transfer/page.tsx  |   8 +
 src/app/dev/investasi/dialog_page/layout.tsx  |   8 +
 .../{konfirmasi => dialog_page}/page.tsx      |   0
 .../dev/investasi/status_transaksi/layout.tsx |   9 ++
 .../dev/investasi/status_transaksi/page.tsx   |   8 +
 src/app/dev/investasi/transfer/layout.tsx     |  14 ++
 src/app/dev/investasi/transfer/page.tsx       |   7 +
 src/app/lib/router_hipmi/router_admin.ts      |   3 +-
 src/app/lib/router_hipmi/router_home.ts       |   3 +
 src/app/lib/router_hipmi/router_investasi.ts  |   7 +-
 .../admin/investasi/bukti_transfer/view.tsx   |   6 +-
 src/app_modules/admin/investasi/index.tsx     |   4 +
 .../investasi/status_transfer/layout.tsx      |  19 +++
 .../admin/investasi/status_transfer/view.tsx  |  58 +++++++
 src/app_modules/admin/main/layout.tsx         |   3 +-
 src/app_modules/crowd/main/view.tsx           |   8 +-
 src/app_modules/investasi/create/view.tsx     |   4 +
 .../dialog_page/transaksi_saham/layout.tsx    |  30 ++++
 .../dialog_page/transaksi_saham/view.tsx      |  44 +++++
 .../investasi/dummy/data_dummy.json           |   4 +-
 src/app_modules/investasi/g_state/index.ts    |   3 +
 src/app_modules/investasi/index.ts            |  14 +-
 src/app_modules/investasi/konfirmasi/view.tsx |  26 ---
 src/app_modules/investasi/main/layout.tsx     |  16 +-
 src/app_modules/investasi/main/view.tsx       |   6 +-
 .../investasi/metode_transfer/view.tsx        |   3 +-
 src/app_modules/investasi/portofolio/view.tsx |  25 +--
 .../investasi/proses_investasi/view.tsx       |  47 +-----
 .../investasi/status_transaksi/layout.tsx     |  48 ++++++
 .../investasi/status_transaksi/view.tsx       |  68 ++++++++
 src/app_modules/investasi/transfer/layout.tsx |  48 ++++++
 src/app_modules/investasi/transfer/view.tsx   | 151 ++++++++++++++++++
 .../investasi/upload_bukti/view.tsx           |   4 +-
 34 files changed, 622 insertions(+), 100 deletions(-)
 create mode 100644 src/app/dev/admin/investasi/status_transfer/layout.tsx
 create mode 100644 src/app/dev/admin/investasi/status_transfer/page.tsx
 create mode 100644 src/app/dev/investasi/dialog_page/layout.tsx
 rename src/app/dev/investasi/{konfirmasi => dialog_page}/page.tsx (100%)
 create mode 100644 src/app/dev/investasi/status_transaksi/layout.tsx
 create mode 100644 src/app/dev/investasi/status_transaksi/page.tsx
 create mode 100644 src/app/dev/investasi/transfer/layout.tsx
 create mode 100644 src/app/dev/investasi/transfer/page.tsx
 create mode 100644 src/app/lib/router_hipmi/router_home.ts
 create mode 100644 src/app_modules/admin/investasi/status_transfer/layout.tsx
 create mode 100644 src/app_modules/admin/investasi/status_transfer/view.tsx
 create mode 100644 src/app_modules/investasi/dialog_page/transaksi_saham/layout.tsx
 create mode 100644 src/app_modules/investasi/dialog_page/transaksi_saham/view.tsx
 create mode 100644 src/app_modules/investasi/g_state/index.ts
 delete mode 100644 src/app_modules/investasi/konfirmasi/view.tsx
 create mode 100644 src/app_modules/investasi/status_transaksi/layout.tsx
 create mode 100644 src/app_modules/investasi/status_transaksi/view.tsx
 create mode 100644 src/app_modules/investasi/transfer/layout.tsx
 create mode 100644 src/app_modules/investasi/transfer/view.tsx

diff --git a/src/app/dev/admin/investasi/status_transfer/layout.tsx b/src/app/dev/admin/investasi/status_transfer/layout.tsx
new file mode 100644
index 00000000..549f12ff
--- /dev/null
+++ b/src/app/dev/admin/investasi/status_transfer/layout.tsx
@@ -0,0 +1,16 @@
+import { Admin_LayoutStatusTransferInvesatasi } from "@/app_modules/admin/investasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Admin_LayoutStatusTransferInvesatasi>
+        {children}
+      </Admin_LayoutStatusTransferInvesatasi>
+    </>
+  );
+}
diff --git a/src/app/dev/admin/investasi/status_transfer/page.tsx b/src/app/dev/admin/investasi/status_transfer/page.tsx
new file mode 100644
index 00000000..8a5203a3
--- /dev/null
+++ b/src/app/dev/admin/investasi/status_transfer/page.tsx
@@ -0,0 +1,8 @@
+import { Admin_StatusTransferInvesatasi } from "@/app_modules/admin/investasi";
+
+export default async function Page() {
+    return<>
+    <Admin_StatusTransferInvesatasi/>
+    </>
+    
+}
\ No newline at end of file
diff --git a/src/app/dev/investasi/dialog_page/layout.tsx b/src/app/dev/investasi/dialog_page/layout.tsx
new file mode 100644
index 00000000..9184d8ea
--- /dev/null
+++ b/src/app/dev/investasi/dialog_page/layout.tsx
@@ -0,0 +1,8 @@
+import LayoutCountDownTransaksiInvestasi from "@/app_modules/investasi/dialog_page/transaksi_saham/layout";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return<>
+    <LayoutCountDownTransaksiInvestasi>{children}</LayoutCountDownTransaksiInvestasi>
+    </>
+}
\ No newline at end of file
diff --git a/src/app/dev/investasi/konfirmasi/page.tsx b/src/app/dev/investasi/dialog_page/page.tsx
similarity index 100%
rename from src/app/dev/investasi/konfirmasi/page.tsx
rename to src/app/dev/investasi/dialog_page/page.tsx
diff --git a/src/app/dev/investasi/status_transaksi/layout.tsx b/src/app/dev/investasi/status_transaksi/layout.tsx
new file mode 100644
index 00000000..6b2fd6be
--- /dev/null
+++ b/src/app/dev/investasi/status_transaksi/layout.tsx
@@ -0,0 +1,9 @@
+
+import { LayoutStatusTransaksiInvestasi } from "@/app_modules/investasi";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return<>
+    <LayoutStatusTransaksiInvestasi>{children}</LayoutStatusTransaksiInvestasi>
+    </>
+}
\ No newline at end of file
diff --git a/src/app/dev/investasi/status_transaksi/page.tsx b/src/app/dev/investasi/status_transaksi/page.tsx
new file mode 100644
index 00000000..b751d50b
--- /dev/null
+++ b/src/app/dev/investasi/status_transaksi/page.tsx
@@ -0,0 +1,8 @@
+import { StatusTransaksiInvestasi } from "@/app_modules/investasi";
+
+
+export default async function Page() {
+    return<>
+    <StatusTransaksiInvestasi/>
+    </>
+}
\ No newline at end of file
diff --git a/src/app/dev/investasi/transfer/layout.tsx b/src/app/dev/investasi/transfer/layout.tsx
new file mode 100644
index 00000000..a5a1a6b9
--- /dev/null
+++ b/src/app/dev/investasi/transfer/layout.tsx
@@ -0,0 +1,14 @@
+import { LayoutTransferInvestasi } from "@/app_modules/investasi";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutTransferInvestasi>{children}</LayoutTransferInvestasi>
+    </>
+  );
+}
diff --git a/src/app/dev/investasi/transfer/page.tsx b/src/app/dev/investasi/transfer/page.tsx
new file mode 100644
index 00000000..f7c79591
--- /dev/null
+++ b/src/app/dev/investasi/transfer/page.tsx
@@ -0,0 +1,7 @@
+import { TransferInvestasi } from "@/app_modules/investasi";
+
+export default async function Page() {
+    return<>
+    <TransferInvestasi/>
+    </>
+}
\ No newline at end of file
diff --git a/src/app/lib/router_hipmi/router_admin.ts b/src/app/lib/router_hipmi/router_admin.ts
index cb3fdc22..3295e8b3 100644
--- a/src/app/lib/router_hipmi/router_admin.ts
+++ b/src/app/lib/router_hipmi/router_admin.ts
@@ -6,7 +6,8 @@ export const RouterAdminInvestasi = {
   main_investasi: "/dev/admin/main/investasi",
   halaman_aksi: "/dev/admin/investasi/halaman_aksi/",
   konfirmasi: "/dev/admin/investasi/konfirmasi",
-  bukti_transfer: "/dev/admin/investasi/bukti_transfer"
+  bukti_transfer: "/dev/admin/investasi/bukti_transfer",
+  status_transfer: "/dev/admin/investasi/status_transfer"
 };
 
 export const RouterAdminAward = {
diff --git a/src/app/lib/router_hipmi/router_home.ts b/src/app/lib/router_hipmi/router_home.ts
new file mode 100644
index 00000000..b38c64f1
--- /dev/null
+++ b/src/app/lib/router_hipmi/router_home.ts
@@ -0,0 +1,3 @@
+export const RouterHome = {
+    main_home: "/dev/home"
+}
\ No newline at end of file
diff --git a/src/app/lib/router_hipmi/router_investasi.ts b/src/app/lib/router_hipmi/router_investasi.ts
index 0c2e3b13..bf9d9953 100644
--- a/src/app/lib/router_hipmi/router_investasi.ts
+++ b/src/app/lib/router_hipmi/router_investasi.ts
@@ -1,7 +1,10 @@
 export const RouterInvestasi = {
   //INVESTASI
-// portofolio
-portofolio: "/dev/investasi/main/portofolio",
+  transfer: "/dev/investasi/transfer",
+  dialog_page: "/dev/investasi/dialog_page",
+  status_transaksi: "/dev/investasi/status_transaksi",
+  // portofolio
+  portofolio: "/dev/investasi/main/portofolio",
   // proses beli saham
   metode_transfer: "/dev/investasi/metode_transfer",
   // edit //
diff --git a/src/app_modules/admin/investasi/bukti_transfer/view.tsx b/src/app_modules/admin/investasi/bukti_transfer/view.tsx
index 8fdebcea..75127ec8 100644
--- a/src/app_modules/admin/investasi/bukti_transfer/view.tsx
+++ b/src/app_modules/admin/investasi/bukti_transfer/view.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { RouterAdminInvestasi } from "@/app/lib/router_hipmi/router_admin";
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import {
   Avatar,
   Badge,
@@ -11,8 +13,10 @@ import {
   Title,
 } from "@mantine/core";
 import { IconChevronRight } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
 
 export default function Admin_BuktiTransferInvestasi() {
+  const router = useRouter()
   const listUsername = [
     {
       id: 1,
@@ -37,7 +41,7 @@ export default function Admin_BuktiTransferInvestasi() {
     <>
       {/* Box Username */}
       {listUsername.map((e) => (
-        <Paper key={e.id} bg={"gray"} p={"md"} mb={"xs"}>
+        <Paper key={e.id} bg={"gray"} p={"md"} mb={"xs"} onClick={() => router.push(RouterAdminInvestasi.status_transfer)}>
           <Grid align="center">
             <Grid.Col span={6}>
               <Text>Username</Text>
diff --git a/src/app_modules/admin/investasi/index.tsx b/src/app_modules/admin/investasi/index.tsx
index 3016bd04..79fc0b57 100644
--- a/src/app_modules/admin/investasi/index.tsx
+++ b/src/app_modules/admin/investasi/index.tsx
@@ -5,6 +5,8 @@ import Admin_KonfirmasiInvestasi from "./konfirmasi/view";
 import Admin_LayoutKonfirmasiInvestasi from "./konfirmasi/layout";
 import Admin_BuktiTransferInvestasi from "./bukti_transfer/view";
 import Admin_LayoutBuktiTransferInvestasi from "./bukti_transfer/layout";
+import Admin_StatusTransferInvesatasi from "./status_transfer/view";
+import Admin_LayoutStatusTransferInvesatasi from "./status_transfer/layout";
 
 export {
   Admin_Investasi,
@@ -14,4 +16,6 @@ export {
   Admin_LayoutKonfirmasiInvestasi,
   Admin_BuktiTransferInvestasi,
   Admin_LayoutBuktiTransferInvestasi,
+  Admin_StatusTransferInvesatasi,
+  Admin_LayoutStatusTransferInvesatasi,
 };
diff --git a/src/app_modules/admin/investasi/status_transfer/layout.tsx b/src/app_modules/admin/investasi/status_transfer/layout.tsx
new file mode 100644
index 00000000..02aab0e9
--- /dev/null
+++ b/src/app_modules/admin/investasi/status_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 Admin_LayoutStatusTransferInvesatasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<HeaderTamplate title="Status Transfer" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/admin/investasi/status_transfer/view.tsx b/src/app_modules/admin/investasi/status_transfer/view.tsx
new file mode 100644
index 00000000..843b3ee6
--- /dev/null
+++ b/src/app_modules/admin/investasi/status_transfer/view.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { Warna } from "@/app/lib/warna";
+import {
+  AspectRatio,
+  Avatar,
+  Button,
+  Center,
+  Group,
+  Image,
+  Select,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+
+export default function Admin_StatusTransferInvesatasi() {
+  const router = useRouter();
+  return (
+    <>
+      <Stack>
+        <Group>
+          <Avatar variant="outline" radius={50} />
+          <Text>Username</Text>
+        </Group>
+
+        <Select
+          label="Status investor"
+          data={[
+            { value: "1", label: "Sudah Transfer" },
+            { value: "2", label: "Menunggu Transfer" },
+          ]}
+        />
+
+        <Center>
+          <AspectRatio ratio={1 / 1} bg={"blue"} h={400} w={250}>
+            <Image alt="" height={400} w={200} src={"/aset/no-img.png"} />
+          </AspectRatio>
+        </Center>
+
+        <Center mt={"lg"}>
+          <Button
+            w={300}
+            radius={50}
+            bg={Warna.biru}
+            color="blue"
+            onClick={() => {
+              router.back();
+            }}
+          >
+            Simpan
+          </Button>
+        </Center>
+      </Stack>
+    </>
+  );
+}
diff --git a/src/app_modules/admin/main/layout.tsx b/src/app_modules/admin/main/layout.tsx
index 5ace3758..82dc12a0 100644
--- a/src/app_modules/admin/main/layout.tsx
+++ b/src/app_modules/admin/main/layout.tsx
@@ -25,6 +25,7 @@ import {
   RouterAdminInvestasi,
 } from "@/app/lib/router_hipmi/router_admin";
 import { useRouter } from "next/navigation";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
 
 export default function AdminLayout({
   children,
@@ -69,7 +70,7 @@ export default function AdminLayout({
                 />
               </MediaQuery>
               <Title order={6}>Dashboard Admin</Title>
-              <ActionIcon disabled variant="transparent">
+              <ActionIcon  variant="transparent" onClick={() => router.push(RouterHome.main_home)}>
                 <IconLogout color="red" />
               </ActionIcon>
             </Group>
diff --git a/src/app_modules/crowd/main/view.tsx b/src/app_modules/crowd/main/view.tsx
index ceb4982a..34a996cd 100644
--- a/src/app_modules/crowd/main/view.tsx
+++ b/src/app_modules/crowd/main/view.tsx
@@ -1,12 +1,15 @@
 "use client";
 
 import { Warna } from "@/app/lib/warna";
+import { gs_investasiFooter } from "@/app_modules/investasi/g_state";
 import { Button, Center, Stack, Text, Title } from "@mantine/core";
+import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import toast from "react-simple-toasts";
 
 export default function MainCrowd() {
   const router = useRouter();
+  const [changeColor, setChangeColor] = useAtom(gs_investasiFooter)
   return (
     <>
       <Center>
@@ -17,7 +20,10 @@ export default function MainCrowd() {
             w={300}
             radius={50}
             bg={Warna.hijau_tua}
-            onClick={() => router.push("/dev/investasi/main")}
+            onClick={() => {
+              router.push("/dev/investasi/main")
+              setChangeColor(false)
+            }}
           >
             Investasi
           </Button>
diff --git a/src/app_modules/investasi/create/view.tsx b/src/app_modules/investasi/create/view.tsx
index 4b0e0b91..db50c479 100644
--- a/src/app_modules/investasi/create/view.tsx
+++ b/src/app_modules/investasi/create/view.tsx
@@ -21,6 +21,8 @@ import { useState } from "react";
 import { funCreateInvestasi } from "../fun/fun_create_investasi";
 import toast from "react-simple-toasts";
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { useAtom } from "jotai";
+import { gs_investasiFooter } from "../g_state";
 
 export default function InvestasiCreate({
   id,
@@ -36,6 +38,7 @@ export default function InvestasiCreate({
   const router = useRouter();
   const [fl, setFl] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>();
+  const [changeColor, setChangeColor] = useAtom(gs_investasiFooter)
   const [value, setValue] = useState({
     title: "",
     targetDana: "",
@@ -60,6 +63,7 @@ export default function InvestasiCreate({
       masterPencarianInvestorId: value.pencarianInvestorId,
     };
     toast("Berhasil disimpan")
+    setChangeColor(true)
     return setTimeout(() => router.push(RouterInvestasi.portofolio), 2000);
 
 
diff --git a/src/app_modules/investasi/dialog_page/transaksi_saham/layout.tsx b/src/app_modules/investasi/dialog_page/transaksi_saham/layout.tsx
new file mode 100644
index 00000000..f7fe5210
--- /dev/null
+++ b/src/app_modules/investasi/dialog_page/transaksi_saham/layout.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { AppShell, CloseButton, Group, Header, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+export default function LayoutCountDownTransaksiInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+    const router = useRouter()
+  return (
+    <>
+      <AppShell
+        header={
+          <Header height={50} sx={{borderStyle: "none"}} px={"md"}>
+            <Group h={50} align="center">
+              <CloseButton size={"md"} onClick={() => router.push(RouterInvestasi.portofolio)}  />
+              <Text>Status Transfer</Text>
+            </Group>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/investasi/dialog_page/transaksi_saham/view.tsx b/src/app_modules/investasi/dialog_page/transaksi_saham/view.tsx
new file mode 100644
index 00000000..e0fde521
--- /dev/null
+++ b/src/app_modules/investasi/dialog_page/transaksi_saham/view.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Box, Center, Loader, Stack, Text, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconCircleCheck } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function CountDownTransaksiInvestasi() {
+  const router = useRouter();
+  useShallowEffect(() => {
+    setTimeout(() => router.push(RouterInvestasi.status_transaksi), 10000);
+  }, []);
+
+  return (
+    <>
+      <Center h={"80vh"}>
+        <Stack>
+          {/* <Box>
+            <Center>
+              <Text>Transfer Berhasil</Text>
+            </Center>
+            <Center>
+              <IconCircleCheck size={100} />
+            </Center>
+          </Box> */}
+          <Box>
+            <Center>
+              <Stack spacing={"sm"}>
+                <Text>Xendit sedang memproses transaksimu</Text>
+                <Center>
+                  <Title order={5}>09:57</Title>
+                </Center>
+                <Center>
+                  <Loader size={"xl"} variant="bars" />
+                </Center>
+              </Stack>
+            </Center>
+          </Box>
+        </Stack>
+      </Center>
+    </>
+  );
+}
diff --git a/src/app_modules/investasi/dummy/data_dummy.json b/src/app_modules/investasi/dummy/data_dummy.json
index 9e3d83d0..4c5ada84 100644
--- a/src/app_modules/investasi/dummy/data_dummy.json
+++ b/src/app_modules/investasi/dummy/data_dummy.json
@@ -39,8 +39,8 @@
     "persentase": 60,
     "saham_beli": 0,
     "statusPorto": {
-      "id": 2,
-      "status": "Review"
+      "id": 3,
+      "status": "Accept"
     }
   },
   {
diff --git a/src/app_modules/investasi/g_state/index.ts b/src/app_modules/investasi/g_state/index.ts
new file mode 100644
index 00000000..8c33d27a
--- /dev/null
+++ b/src/app_modules/investasi/g_state/index.ts
@@ -0,0 +1,3 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const gs_investasiFooter = atomWithStorage<any>("changeColor", false)
\ No newline at end of file
diff --git a/src/app_modules/investasi/index.ts b/src/app_modules/investasi/index.ts
index 98097bbe..8b03c98a 100644
--- a/src/app_modules/investasi/index.ts
+++ b/src/app_modules/investasi/index.ts
@@ -10,7 +10,8 @@ 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 CountDownTransaksiInvestasi from "./dialog_page/transaksi_saham/view";
+import LayoutCountDownTransaksiInvestasi from "./dialog_page/transaksi_saham/layout"; 
 import PortofolioInvestasi from "./portofolio/view";
 import PortofolioDetailInvestasi from "./detail_porto/view";
 import LayoutPortofolioDetailInvestasi from "./detail_porto/layout";
@@ -36,6 +37,10 @@ import BeritaInvestasi from "./berita/view";
 import LayoutBeritaInvestasi from "./berita/layout";
 import MetodeTransferInvestasi from "./metode_transfer/view";
 import LayoutMetodeTransferInvestasi from "./metode_transfer/layout";
+import TransferInvestasi from "./transfer/view";
+import LayoutTransferInvestasi from "./transfer/layout";
+import StatusTransaksiInvestasi from "./status_transaksi/view";
+import LayoutStatusTransaksiInvestasi from "./status_transaksi/layout";
 
 export {
   MainInvestasi,
@@ -50,7 +55,8 @@ export {
   LayoutProsesInvestasi,
   UploadBuktiTransferInvestasi,
   LayoutBuktiTransferInvestasi,
-  KonfirmasiBuktiInvestasi,
+  CountDownTransaksiInvestasi as KonfirmasiBuktiInvestasi,
+  LayoutCountDownTransaksiInvestasi as LayoutKonfirmasiBuktiInvestasi,
   PortofolioInvestasi,
   PortofolioDetailInvestasi,
   LayoutPortofolioDetailInvestasi,
@@ -76,4 +82,8 @@ export {
   LayoutBeritaInvestasi as LayoutBeritaInvestasi,
   MetodeTransferInvestasi,
   LayoutMetodeTransferInvestasi,
+  TransferInvestasi,
+  LayoutTransferInvestasi,
+  StatusTransaksiInvestasi,
+  LayoutStatusTransaksiInvestasi,
 };
diff --git a/src/app_modules/investasi/konfirmasi/view.tsx b/src/app_modules/investasi/konfirmasi/view.tsx
deleted file mode 100644
index 5c2ee49d..00000000
--- a/src/app_modules/investasi/konfirmasi/view.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"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 207b614c..939aff37 100644
--- a/src/app_modules/investasi/main/layout.tsx
+++ b/src/app_modules/investasi/main/layout.tsx
@@ -14,11 +14,14 @@ import {
 } from "@mantine/core";
 import {
   IconChartHistogram,
+  IconChartPie,
   IconChartPieFilled,
   IconPencilPlus,
 } from "@tabler/icons-react";
+import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
+import { gs_investasiFooter } from "../g_state";
 
 export default function LayoutMainInvestasi({
   children,
@@ -26,6 +29,7 @@ export default function LayoutMainInvestasi({
   children: React.ReactNode;
 }) {
   const router = useRouter();
+  const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
 
   return (
     <>
@@ -41,33 +45,37 @@ export default function LayoutMainInvestasi({
         footer={
           <Footer height={70} bg={"dark"}>
             <Grid align="center" h={60} pt={"xs"}>
+              {/* Tampilan Bursa */}
               <Grid.Col
                 span={6}
                 onClick={() => {
                   router.push("/dev/investasi/main");
+                  setChangeColor(false);
                 }}
               >
                 <Center>
                   <Flex direction={"column"} align={"center"} w={"100%"}>
                     <ActionIcon variant="transparent">
-                      <IconChartHistogram />
+                      <IconChartHistogram  color={changeColor ? "white" : "green"}/>
                     </ActionIcon>
-                    <Text c={"white"}>Bursa</Text>
+                    <Text c={changeColor ? "white" : "green"}>Bursa</Text>
                   </Flex>
                 </Center>
               </Grid.Col>
+              {/* Tampilan Portofolio */}
               <Grid.Col
                 span={6}
                 onClick={() => {
                   router.push("/dev/investasi/main/portofolio");
+                  setChangeColor(true);
                 }}
               >
                 <Center>
                   <Flex direction={"column"} align={"center"} w={"100%"}>
                     <ActionIcon variant="transparent">
-                      <IconChartPieFilled />
+                      <IconChartPie  color={changeColor ?  "green" : "white"}/>
                     </ActionIcon>
-                    <Text c={"white"}>Portofolio</Text>
+                    <Text c={changeColor ? "green" : "white"}>Portofolio</Text>
                   </Flex>
                 </Center>
               </Grid.Col>
diff --git a/src/app_modules/investasi/main/view.tsx b/src/app_modules/investasi/main/view.tsx
index bc2fa3d1..69879b56 100644
--- a/src/app_modules/investasi/main/view.tsx
+++ b/src/app_modules/investasi/main/view.tsx
@@ -108,7 +108,7 @@ export default function MainInvestasi({
                 {e.saham_beli === 0 ? (
                   ""
                 ) : (
-                  <Badge variant="filled" color="teal">
+                  <Badge variant="dot" color="teal">
                     Saham Anda
                   </Badge>
                 )}
@@ -122,8 +122,8 @@ export default function MainInvestasi({
                   return (
                     <>
                       <Group position="right">
-                        <IconCircleCheck />
-                        <Text>Selesai</Text>
+                        <IconCircleCheck color="green"/>
+                        <Text c={"green"}>Selesai</Text>
                       </Group>
                     </>
                   );
diff --git a/src/app_modules/investasi/metode_transfer/view.tsx b/src/app_modules/investasi/metode_transfer/view.tsx
index 64eb4af9..18087e97 100644
--- a/src/app_modules/investasi/metode_transfer/view.tsx
+++ b/src/app_modules/investasi/metode_transfer/view.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { Warna } from "@/app/lib/warna";
 import {
   Box,
@@ -54,7 +55,7 @@ export default function MetodeTransferInvestasi() {
   }, []);
 
   async function onSubmit() {
-    router.push("/dev/investasi/upload_bukti");
+    router.push(RouterInvestasi.transfer);
     localStorage.setItem("bank", bank);
   }
   return (
diff --git a/src/app_modules/investasi/portofolio/view.tsx b/src/app_modules/investasi/portofolio/view.tsx
index 6be8674e..90142f1c 100644
--- a/src/app_modules/investasi/portofolio/view.tsx
+++ b/src/app_modules/investasi/portofolio/view.tsx
@@ -37,6 +37,7 @@ export default function PortofolioInvestasi() {
   return (
     <>
       <MyPortofolioInvestasi />
+      <Divider my={"lg"}/>
       <SahamTerbeli />
     </>
   );
@@ -48,6 +49,7 @@ function MyPortofolioInvestasi() {
 
   return (
     <>
+      <Title mb={"md"} order={4}>Portofolio Saya</Title>
       <Carousel
         showThumbs={false}
         infiniteLoop={true}
@@ -92,20 +94,20 @@ function MyPortofolioInvestasi() {
                 {(() => {
                   if (e.statusPorto.id === 1) {
                     return (
-                      <Badge color="yellow" variant="filled">
+                      <Badge color="yellow" variant="outline">
                         {e.statusPorto.status}
                       </Badge>
                     );
                   } else {
                     if (e.statusPorto.id === 2) {
                       return (
-                        <Badge color="red" variant="filled">
+                        <Badge color="red" variant="outline">
                           {e.statusPorto.status}
                         </Badge>
                       );
                     } else {
                       return (
-                        <Badge color="green" variant="filled">
+                        <Badge color="green" variant="outline">
                           {e.statusPorto.status}
                         </Badge>
                       );
@@ -151,7 +153,7 @@ function MyPortofolioInvestasi() {
         ))}
       </Carousel>
     </>
-  )
+  );
 }
 
 function SahamTerbeli() {
@@ -160,16 +162,21 @@ function SahamTerbeli() {
 
   return (
     <>
-      <Box maw={400} mx="auto" mt={"xs"}>
+      {/* <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>
+            <Title order={6} c={"white"}>
+              Saham Saya
+            </Title>
             <IconCaretDown />
           </Group>
         </Paper>
 
-        <Collapse in={opened} transitionDuration={700}>
-          {dataDummy.map((e) => (
+        <Collapse in={opened} transitionDuration={700}></Collapse>
+      </Box> */}
+
+      <Title mb={"md"} order={4}>Saham Saya</Title>
+      {dataDummy.map((e) => (
             <Card
               key={e.id}
               withBorder
@@ -277,8 +284,6 @@ function SahamTerbeli() {
               </CardSection>
             </Card>
           ))}
-        </Collapse>
-      </Box>
     </>
   );
 }
diff --git a/src/app_modules/investasi/proses_investasi/view.tsx b/src/app_modules/investasi/proses_investasi/view.tsx
index 3f97b4ec..73b1eac9 100644
--- a/src/app_modules/investasi/proses_investasi/view.tsx
+++ b/src/app_modules/investasi/proses_investasi/view.tsx
@@ -78,53 +78,12 @@ export default function ProsesInvestasi() {
           <NumberInput
             w={100}
             value={beli}
-            onChange={(val: number) => setBeli(val)}
+            onChange={(val: number) => {
+              setTotal(val * hargaLembar);
+            }}
           />
-          {/* <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"}>
diff --git a/src/app_modules/investasi/status_transaksi/layout.tsx b/src/app_modules/investasi/status_transaksi/layout.tsx
new file mode 100644
index 00000000..c4f0df33
--- /dev/null
+++ b/src/app_modules/investasi/status_transaksi/layout.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  ActionIcon,
+  AppShell,
+  CloseButton,
+  Group,
+  Header,
+  Text,
+} from "@mantine/core";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { gs_investasiFooter } from "../g_state";
+
+export default function LayoutStatusTransaksiInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  // const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
+
+  return (
+    <>
+      <AppShell
+        header={
+          <Header height={50}>
+            <Group position="apart" align="center" h={50} px={"md"}>
+              <CloseButton
+                size={"md"}
+                onClick={() => {
+                  router.push(RouterInvestasi.portofolio);
+                  // setChangeColor(true);
+                }}
+              />
+              <Text>Status Transaksi</Text>
+              <ActionIcon variant="transparent" disabled></ActionIcon>
+            </Group>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/investasi/status_transaksi/view.tsx b/src/app_modules/investasi/status_transaksi/view.tsx
new file mode 100644
index 00000000..3c0f5919
--- /dev/null
+++ b/src/app_modules/investasi/status_transaksi/view.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import {
+  Box,
+  Center,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import moment from "moment";
+import { useState } from "react";
+
+export default function StatusTransaksiInvestasi() {
+  const [tgl, setTgl] = useState<any | Date>(null);
+
+  useShallowEffect(() => {
+    onDate();
+  }, []);
+
+  async function onDate() {
+    const d = Date.now();
+    setTgl(moment(d).format("LLL"));
+  }
+
+  return (
+    <>
+      <Paper bg="gray.4" radius={"md"} py={"md"}>
+        <Stack>
+          <Center>
+            <Stack>
+              <Flex direction={"column"} align={"center"}>
+                <Title order={5}>Transaksi berhasil diproses</Title>
+                <Text fz={10}>{tgl}</Text>
+              </Flex>
+              <Center>
+                <Text fw={"bold"} fz={30}>
+                  Rp. 300.000
+                </Text>
+              </Center>
+            </Stack>
+          </Center>
+          <Stack px={"md"}>
+            <Divider color="dark.1" />
+            <Group position="apart">
+              <Text>Penerima</Text>
+              <Text fw={"bold"}>Nama Penerima</Text>
+            </Group>
+            <Group position="apart">
+              <Text>Bank Penerima</Text>
+              <Text fw={"bold"}>Nama Bank(BNI, BSI, dll)</Text>
+            </Group>
+            <Group position="apart">
+              <Text>Nomor Rekening</Text>
+              <Text fw={"bold"}>0000000000000</Text>
+            </Group>
+          </Stack>
+        </Stack>
+      </Paper>
+    </>
+  );
+}
diff --git a/src/app_modules/investasi/transfer/layout.tsx b/src/app_modules/investasi/transfer/layout.tsx
new file mode 100644
index 00000000..80e72611
--- /dev/null
+++ b/src/app_modules/investasi/transfer/layout.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Warna } from "@/app/lib/warna";
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell, Button, Center, Footer } from "@mantine/core";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { gs_investasiFooter } from "../g_state";
+
+export default function LayoutTransferInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
+
+  return (
+    <>
+      <AppShell
+        header={<HeaderTamplate title="Transfer " />}
+        footer={
+          <Footer height={70} sx={{ borderStyle: "none" }}>
+            <Center>
+              <Button
+                radius={50}
+                w={300}
+                bg={Warna.biru}
+                onClick={() => {
+                  router.push(RouterInvestasi.dialog_page);
+                  setChangeColor(true)
+                  // router.push(RouterInvestasi.status_transaksi);
+                  
+                }}
+              >
+                Sudah Transfer
+              </Button>
+            </Center>
+          </Footer>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}
diff --git a/src/app_modules/investasi/transfer/view.tsx b/src/app_modules/investasi/transfer/view.tsx
new file mode 100644
index 00000000..5cdd9b36
--- /dev/null
+++ b/src/app_modules/investasi/transfer/view.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { Warna } from "@/app/lib/warna";
+import {
+  AspectRatio,
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Divider,
+  FileButton,
+  Flex,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+import { useState } from "react";
+
+export default function TransferInvestasi() {
+  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 (
+    <>
+      <Stack spacing={"xl"}>
+        <Stack spacing={0} mb={"md"}>
+          <Title order={5}>Mohon transfer ke Xendit</Title>
+          <Group align="center">
+            <Text>untuk diteruskan ke </Text>
+            <Title order={5}>Nama Pemilik Proyek</Title>
+          </Group>
+          <Divider mt={"lg"} />
+        </Stack>
+
+        <Stack spacing={"xl"}>
+          {/* Nama Rekening */}
+          <Stack spacing={5}>
+            <Group>
+              <Avatar size={"md"} variant="filled" />
+              <Stack spacing={0}>
+                <Text>Nama Bank</Text>
+                <Text>PT. Xendit Jakarta</Text>
+              </Stack>
+            </Group>
+            <Paper
+              bg={"gray"}
+              sx={{ alignContent: "center" }}
+              p={"sm"}
+              radius={10}
+            >
+              <Grid align="center">
+                <Grid.Col span={8}>
+                  <Text fw={"bold"}>{bank}</Text>
+                </Grid.Col>
+                <Grid.Col span={4}>
+                  <Center>
+                    <Button compact variant="outline" color="dark" radius={50}>
+                      Salin
+                    </Button>
+                  </Center>
+                </Grid.Col>
+              </Grid>
+            </Paper>
+          </Stack>
+
+          {/* Nomor rekening */}
+          <Stack spacing={5}>
+            <Text>Jumlah Transfer</Text>
+            <Paper
+              bg={"gray"}
+              sx={{ alignContent: "center" }}
+              p={"sm"}
+              radius={10}
+            >
+              <Grid align="center">
+                <Grid.Col span={8}>
+                  <Text fw={"bold"}>Rp. {total}</Text>
+                </Grid.Col>
+                <Grid.Col span={4}>
+                  <Center>
+                    <Button compact variant="outline" color="dark" radius={50}>
+                      Salin
+                    </Button>
+                  </Center>
+                </Grid.Col>
+              </Grid>
+            </Paper>
+            <Group spacing={5}>
+              <IconAlertTriangle color="orange" size={10} />
+              <Text fz={"sm"}>Pastikan jumlahnya benar</Text>
+            </Group>
+          </Stack>
+        </Stack>
+      </Stack>
+
+      {/* 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> */}
+    </>
+  );
+}
diff --git a/src/app_modules/investasi/upload_bukti/view.tsx b/src/app_modules/investasi/upload_bukti/view.tsx
index 0dbbaea2..e742fc96 100644
--- a/src/app_modules/investasi/upload_bukti/view.tsx
+++ b/src/app_modules/investasi/upload_bukti/view.tsx
@@ -117,7 +117,7 @@ export default function UploadBuktiTransferInvestasi() {
         )}
       </AspectRatio>
 
-      <Center>
+      {/* <Center>
         {img === null ? (
           <Button
             disabled
@@ -138,7 +138,7 @@ export default function UploadBuktiTransferInvestasi() {
             Selesai
           </Button>
         )}
-      </Center>
+      </Center> */}
     </>
   );
 }