feat:

- Fitur hot menu ditambah
- Fitur portofolio khusus status investasi
- Fitur halaman transaksi
### No Issue
#fix:
- Perubahan minor

prisma/schema.prisma

@@ -22,6 +22,7 @@ model User {
   UserSession      UserSession?
   Profile          Profile?
   Investasi        Investasi[]
+  SahamTerbeli     SahamTerbeli[]
 }
 
 model MasterUserRole {
@@ -61,13 +62,14 @@ model Profile {
 }
 
 model Images {
-  id        String     @id @default(cuid())
+  id              String            @id @default(cuid())
-  url       String
+  url             String
-  active    Boolean    @default(true)
+  active          Boolean           @default(true)
-  createdAt DateTime   @default(now())
+  createdAt       DateTime          @default(now())
-  updatedAt DateTime   @default(now()) @updatedAt
+  updatedAt       DateTime          @default(now()) @updatedAt
-  Profile   Profile?
+  Profile         Profile?
-  Investasi Investasi?
+  Investasi       Investasi?
+  BeritaInvestasi BeritaInvestasi[]
 }
 
 model Katalog {
@@ -94,6 +96,8 @@ model MasterBidangBisnis {
   Katalog   Katalog[]
 }
 
+// -------------------- INVESTASI --------------------- //
+// Table investasi / saham
 model Investasi {
   id          String   @id @default(cuid())
   title       String
@@ -116,6 +120,16 @@ model Investasi {
 
   ImageInvestasi Images? @relation(fields: [imagesId], references: [id])
   imagesId       String? @unique
+
+  ProspektusInvestasi     ProspektusInvestasi?
+  DokumenInvestasi        DokumenInvestasi?      @relation(fields: [dokumenInvestasiId], references: [id])
+  dokumenInvestasiId      String?
+  BeritaInvestasi         BeritaInvestasi?       @relation(fields: [beritaInvestasiId], references: [id])
+  beritaInvestasiId       String?
+  SahamTerbeli            SahamTerbeli?          @relation(fields: [sahamTerbeliId], references: [id])
+  sahamTerbeliId          String?
+  MasterStatusInvestasi   MasterStatusInvestasi? @relation(fields: [masterStatusInvestasiId], references: [id])
+  masterStatusInvestasiId String?                @default("1")
 }
 
 model MasterPencarianInvestor {
@@ -144,3 +158,57 @@ model MasterPembagianDeviden {
   updatedAt DateTime    @default(now()) @updatedAt
   investasi Investasi[]
 }
+
+model MasterStatusInvestasi {
+  id        String      @id @default(cuid())
+  name      String
+  color     String
+  active    Boolean     @default(true)
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @default(now()) @updatedAt
+  investasi Investasi[]
+}
+
+model ProspektusInvestasi {
+  id          String    @id @default(cuid())
+  url         String
+  active      Boolean   @default(true)
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @default(now()) @updatedAt
+  investasi   Investasi @relation(fields: [investasiId], references: [id])
+  investasiId String    @unique
+}
+
+model DokumenInvestasi {
+  id        String      @id @default(cuid())
+  url       String
+  active    Boolean     @default(true)
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @default(now()) @updatedAt
+  investasi Investasi[]
+}
+
+model BeritaInvestasi {
+  id          String      @id @default(cuid())
+  title       String
+  deskripsi   String
+  active      Boolean     @default(true)
+  createdAt   DateTime    @default(now())
+  updatedAt   DateTime    @default(now()) @updatedAt
+  investasi   Investasi[]
+  ImageBerita Images?     @relation(fields: [imagesId], references: [id])
+  imagesId    String?
+}
+
+model SahamTerbeli {
+  id           String   @id @default(cuid())
+  totalBeli    String
+  jumlahLembar String
+  active       Boolean  @default(true)
+  createdAt    DateTime @default(now())
+  updatedAt    DateTime @default(now()) @updatedAt
+
+  author    User        @relation(fields: [authorId], references: [id])
+  authorId  String
+  investasi Investasi[]
+}

src/app/api/seeder/route.ts

@@ -5,6 +5,7 @@ import bidangBisnis from "../../../bin/seeder/bidang_bisnis.json";
 import pencarianInvestor from "./../../../bin/seeder/investasi/pencarian_investor.json";
 import periodeDeviden from "./../../../bin/seeder/investasi/periode_deviden.json";
 import pembagianDeviden from "./../../../bin/seeder/investasi/pembagian_deviden.json";
+import statusInvestasi from "./../../../bin/seeder/investasi/status_investasi.json";
 
 export async function GET(req: Request) {
   const dev = new URL(req.url).searchParams.get("dev");
@@ -89,6 +90,24 @@ export async function GET(req: Request) {
       });
     }
 
+    // for (let i of statusInvestasi) {
+    //   await prisma.masterStatusInvestasi.upsert({
+    //     where: {
+    //       id: i.id,
+    //     },
+    //     create: {
+    //       id: i.id,
+    //       name: i.name,
+    //       color: i.color,
+    //     },
+    //     update: {
+    //       id: i.id,
+    //       name: i.name,
+    //       color: i.color,
+    //     },
+    //   });
+    // }
+
     return NextResponse.json({ success: true });
   }
 

src/app/dev/investasi/detail_portofolio/draft/layout.tsx

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

src/app/dev/investasi/detail_portofolio/draft/page.tsx

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

src/app/dev/investasi/detail_portofolio/publish/layout.tsx

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

src/app/dev/investasi/detail_portofolio/publish/page.tsx

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

src/app/dev/investasi/detail_portofolio/reject/layout.tsx

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

src/app/dev/investasi/detail_portofolio/reject/page.tsx

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

src/app/dev/investasi/detail_portofolio/review/layout.tsx

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

src/app/dev/investasi/detail_portofolio/review/page.tsx

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

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

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

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

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

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

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

src/app/dev/investasi/status_transaksi/gagal/layout.tsx

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

src/app/dev/investasi/status_transaksi/gagal/page.tsx

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

src/app/lib/router_hipmi/router_investasi.ts

@@ -1,12 +1,19 @@
 export const RouterInvestasi = {
   //INVESTASI
+  main: "/dev/investasi/main",
+  main_porto: "/dev/investasi/main/portofolio",
+  main_investasi: "/dev/investasi/main/saham_saya",
+  main_transaksi: "/dev/investasi/main/transaksi",
   transfer: "/dev/investasi/transfer",
   dialog_transaksi: "/dev/investasi/dialog_page/transaksi_saham",
   dialog_create: "/dev/investasi/dialog_page/create",
+
   // portofolio
   portofolio: "/dev/investasi/main/portofolio",
+
   // proses beli saham
-  status_transaksi: "/dev/investasi/status_transaksi",
+  status_transaksi: "/dev/investasi/status_transaksi/berhasil",
+  status_transaksi_gagal: "/dev/investasi/status_transaksi/gagal",
   metode_transfer: "/dev/investasi/metode_transfer",
   // edit //
   edit_intro: "/dev/investasi/edit_intro/",
@@ -18,8 +25,13 @@ export const RouterInvestasi = {
   detail_prospektus: "/dev/investasi/detail_prospektus/",
   detail_dokumen: "/dev/investasi/detail_dokumen/",
   detail_berita: "/dev/investasi/detail_berita/",
+  detail_draft: "/dev/investasi/detail_portofolio/draft",
+  detail_publish: "/dev/investasi/detail_portofolio/publish",
+  detail_review: "/dev/investasi/detail_portofolio/review",
+  detail_reject: "/dev/investasi/detail_portofolio/reject",
+
   // berita
   berita: "/dev/investasi/berita/",
   create_berita: "/dev/investasi/create_berita",
-  list_edit_berita: "/dev/investasi/list_edit_berita/"
+  list_edit_berita: "/dev/investasi/list_edit_berita/",
 };

src/app_modules/admin/investasi/konfirmasi/view.tsx

@@ -18,9 +18,15 @@ import {
   Button,
   Text,
   Image,
+  Collapse,
+  Textarea,
 } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 import {
   IconBookDownload,
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
   IconFileDescription,
   IconSpeakerphone,
 } from "@tabler/icons-react";
@@ -31,6 +37,8 @@ import toast from "react-simple-toasts";
 export default function Admin_KonfirmasiInvestasi({ id }: { id: string }) {
   const router = useRouter();
   const [publish, setPublish] = useState(true);
+  const [opened, { toggle }] = useDisclosure(false);
+
   const listBox = [
     {
       id: 1,
@@ -125,7 +133,7 @@ export default function Admin_KonfirmasiInvestasi({ id }: { id: string }) {
       </Grid>
 
       {/* List Box */}
-      <Grid mb={"md"}>
+      <Grid mb={"xl"}>
         {listBox.map((e) => (
           <Grid.Col
             span={"auto"}
@@ -144,35 +152,85 @@ export default function Admin_KonfirmasiInvestasi({ id }: { id: string }) {
         ))}
       </Grid>
 
-      <Center mb={100}>
+      <Stack mb={40}>
-        {publish ? (
+        {/* Button publish dan reject */}
-          <Button
+        <Grid>
-            radius={50}
+          {/* Publish */}
-            w={350}
+          <Grid.Col span={6}>
-            bg={"green"}
+            <Center>
-            color="green"
+              {publish ? (
-            onClick={() => {
+                <Button
-                setTimeout(() => setPublish(false), 1000)
+                  radius={50}
-                toast("Proyek Investasi Di Publish")
+                  w={200}
-            }}
+                  bg={"green"}
-          >
+                  color="green"
-            Publish
+                  onClick={() => {
-          </Button>
+                    setTimeout(() => setPublish(false), 1000);
-        ) : (
+                    toast("Proyek Investasi Di Publish");
-          <Button
+                  }}
-            radius={50}
+                >
-            w={350}
+                  Publish
-            bg={"red"}
+                </Button>
-            color="red"
+              ) : (
-            onClick={() => {
+                <Button
-                setTimeout(() => setPublish(true), 1000)
+                  radius={50}
-                toast("Proyek Investasi Di Non-Aktifkan")
+                  w={200}
-            }}
+                  bg={"orange"}
-          >
+                  color="orange"
-            Non - aktif
+                  onClick={() => {
-          </Button>
+                    setTimeout(() => setPublish(true), 1000);
-        )}
+                    toast("Proyek Investasi Di Non-Aktifkan");
-      </Center>
+                  }}
+                >
+                  Non - aktif
+                </Button>
+              )}
+            </Center>
+          </Grid.Col>
+          {/* Reject */}
+          <Grid.Col span={6}>
+            <Center>
+              <Button
+                w={200}
+                radius={50}
+                bg={"red"}
+                color="red"
+                onClick={toggle}
+                rightIcon={!opened ? <IconChevronLeft /> : <IconChevronDown />}
+              >
+                Reject
+              </Button>
+            </Center>
+          </Grid.Col>
+        </Grid>
+
+        {/* Text area reject */}
+        <Collapse in={opened}>
+          <Paper bg={"gray.4"} p={"xs"}>
+            <Stack>
+              <Textarea
+                withAsterisk
+                label="Alasan:"
+                placeholder="Masukan alasan penolakan"
+                autosize
+                minRows={2}
+                maxRows={4}
+              />
+              <Group position="right">
+                <Button
+                  w={100}
+                  radius={50}
+                  bg={Warna.biru}
+                  compact
+                  onClick={toggle}
+                >
+                  Kirim
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Collapse>
+      </Stack>
     </>
   );
 }

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

@@ -52,7 +52,7 @@ const listTable = [
     id: 2,
     status: {
       id: 2,
-      name: "Menunggu Konfirmasi",
+      name: "Review",
     },
     name: "Event MCD",
   },
@@ -60,7 +60,7 @@ const listTable = [
     id: 3,
     status: {
       id: 2,
-      name: " Menunggu Konfirmasi",
+      name: " Review",
     },
     name: "Villa Batubulan",
   },

src/app_modules/crowd/main/view.tsx

@@ -36,7 +36,7 @@ export default function MainCrowd() {
             color="green"
             onClick={() => {
               router.push("/dev/investasi/main");
-              setChangeColor(false);
+              setChangeColor(0);
             }}
           >
             Investasi

src/app_modules/investasi/create/view.tsx

@@ -22,7 +22,8 @@ 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";
+import { gs_TabPortoInvestasi, gs_investasiFooter } from "../g_state";
+import { useShallowEffect } from "@mantine/hooks";
 
 export default function InvestasiCreate({
   id,
@@ -38,7 +39,10 @@ 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 [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
+  const [activeTab, setActiveTab] = useAtom(gs_TabPortoInvestasi)
+
+
   const [value, setValue] = useState({
     title: "",
     targetDana: "",
@@ -63,10 +67,10 @@ export default function InvestasiCreate({
       masterPencarianInvestorId: value.pencarianInvestorId,
     };
     // toast("Berhasil disimpan")
-    setChangeColor(true)
+    setChangeColor(1);
+    setActiveTab("Draft")
     return setTimeout(() => router.push(RouterInvestasi.dialog_create), 1000);
 
-
     // if (_.values(body).includes("")) return toast("Lengkapi data");
     // if (!fl) return toast("File Kosong");
 
@@ -105,10 +109,11 @@ export default function InvestasiCreate({
           >
             {(props) => (
               <Button
+                compact
                 {...props}
-                w={350}
+                w={100}
                 radius={50}
-                // bg={Warna.biru}
+                bg={Warna.hijau_muda}
                 // onClick={() => router.push("/dev/investasi/upload")}
               >
                 <IconCamera />
@@ -141,16 +146,24 @@ export default function InvestasiCreate({
             <TextInput
               label="Harga Per Lember"
               type="number"
-              onChange={(val) => {
+              onChange={(val: any) => {
                 setValue({
                   ...value,
                   hargaLembar: val.target.value,
                 });
+
+                const data : any = (value.targetDana as any) / val.target.value;
+                // setTL(data);
+                setValue({
+                  ...value,
+                  totalLembar: data
+                });
               }}
             />
             <TextInput
               label="Total Lembar"
               type="number"
+              value={Math.floor(value.totalLembar as any)}
               onChange={(val) => {
                 setValue({
                   ...value,
@@ -207,7 +220,12 @@ export default function InvestasiCreate({
           </Box>
         </Center>
         <Center my={"lg"}>
-          <Button w={200} radius={50} onClick={() => onSubmit()}>
+          <Button
+            w={300}
+            radius={50}
+            bg={Warna.biru}
+            onClick={() => onSubmit()}
+          >
             Simpan
           </Button>
         </Center>

src/app_modules/investasi/detail_porto/view.tsx

@@ -47,13 +47,6 @@ export default function PortofolioDetailInvestasi({id}: {id: string}) {
   ];
   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>

src/app_modules/investasi/detail_portofolio/draft/layout.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import { IconEdit } from "@tabler/icons-react";
+import React from "react";
+
+export default function LayoutDetailDraftInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={
+          <HeaderTamplate
+            title="Detail Draft"
+            icon={<IconEdit />}
+            route2={`/dev/investasi/edit/${1}`}
+          />
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/detail_portofolio/draft/page.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+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 { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_TabPortoInvestasi } from "../../g_state";
+import toast from "react-simple-toasts";
+
+export default function DetailDraftInvestasi() {
+  const router = useRouter();
+  const [activeTab, setActiveTab] = useAtom(gs_TabPortoInvestasi)
+
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: RouterInvestasi.edit_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: RouterInvestasi.edit_dokumen,
+    },
+    {
+      id: 3,
+      name: "Berita",
+      icon: <IconSpeakerphone size={70} />,
+      route: RouterInvestasi.edit_berita,
+    },
+  ];
+
+  async function onsubmit() {
+    toast("Review Berhasil Diajukan")
+    router.push(RouterInvestasi.portofolio)
+    setActiveTab("Review")
+
+  }
+
+  return (
+    <>
+      <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>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>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>
+
+      <Center>
+        <Button
+          w={300}
+          radius={50}
+          bg={"yellow.7"}
+          color="yellow"
+          onClick={() => onsubmit()}
+        >
+          Ajukan Review
+        </Button>
+      </Center>
+
+      {/* 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_portofolio/publish/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 LayoutDetailPublishInvestasi({children}: {children: React.ReactNode}){
+    return<>
+
+    <AppShell
+    header={
+        <HeaderTamplate title="Detail Publish"/>
+    }
+    >
+        {children}
+    </AppShell>
+    
+    </>
+}

src/app_modules/investasi/detail_portofolio/publish/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+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 { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import toast from "react-simple-toasts";
+
+export default function DetailPublishInvestasi() {
+  const router = useRouter();
+
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: RouterInvestasi.edit_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: RouterInvestasi.edit_dokumen,
+    },
+    {
+      id: 3,
+      name: "Berita",
+      icon: <IconSpeakerphone size={70} />,
+      route: RouterInvestasi.edit_berita,
+    },
+  ];
+
+  return (
+    <>
+      <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 + `${1}`)}
+          >
+            <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_portofolio/reject/layout.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import HeaderTamplate from "@/app_modules/component/header_tamplate"
+import { AppShell } from "@mantine/core"
+import { IconEdit } from "@tabler/icons-react"
+import React from "react"
+
+export default function LayoutDetailRejecttInvestasi({children}: {children: React.ReactNode}){
+    return<>
+
+    <AppShell
+    header={
+        <HeaderTamplate title="Detail Reject"
+        icon={<IconEdit />}
+        route2={`/dev/investasi/edit/${1}`}
+        />
+    }
+    >
+        {children}
+    </AppShell>
+    
+    </>
+}

src/app_modules/investasi/detail_portofolio/reject/page.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+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 { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_TabPortoInvestasi } from "../../g_state";
+import toast from "react-simple-toasts";
+
+export default function DetailRejectInvestasi() {
+  const router = useRouter();
+  const [activeTab, setActiveTab] = useAtom(gs_TabPortoInvestasi);
+
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: RouterInvestasi.edit_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: RouterInvestasi.edit_dokumen,
+    },
+    {
+      id: 3,
+      name: "Berita",
+      icon: <IconSpeakerphone size={70} />,
+      route: RouterInvestasi.edit_berita,
+    },
+  ];
+
+  async function onAjukan() {
+    toast("Project Diajukan Kembali");
+    router.push(RouterInvestasi.portofolio);
+    setActiveTab("Review");
+  }
+
+  async function onBatal() {
+    toast("Project Dibatalkan");
+    router.push(RouterInvestasi.portofolio);
+    setActiveTab("Reject");
+    
+  }
+
+  return (
+    <>
+      {/* Alasan */}
+      <Box mb={"sm"}>
+        <Title order={6}>Alasan :</Title>
+        <Box>
+          <Paper>
+            <Text>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab
+              necessitatibus dolores, doloribus porro quis velit unde voluptatem
+              delectus, nesciunt laboriosam non quae numquam sed tenetur! Minus
+              earum odio possimus dolore?
+            </Text>
+          </Paper>
+        </Box>
+      </Box>
+
+      {/* Tombol Ajukan */}
+      <Grid>
+        <Grid.Col span={6}>
+          <Center>
+            <Button
+              mb={"xl"}
+              radius={50}
+              bg={"orange.7"}
+              color="yellow"
+              onClick={() => onAjukan()}
+            >
+              Ajukan Kembali
+            </Button>
+          </Center>
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Center>
+            {" "}
+            <Button
+              mb={"xl"}
+              radius={50}
+              bg={"red.7"}
+              color="yellow"
+              onClick={() => onBatal()}
+            >
+              Batalkan Project
+            </Button>
+          </Center>
+        </Grid.Col>
+      </Grid>
+
+      <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>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>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 + `${"1"}`)}
+          >
+            <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_portofolio/review/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 LayoutDetailReviewInvestasi({children}: {children: React.ReactNode}){
+    return<>
+
+    <AppShell
+    header={
+        <HeaderTamplate title="Detail Review"/>
+    }
+    >
+        {children}
+    </AppShell>
+    
+    </>
+}

src/app_modules/investasi/detail_portofolio/review/page.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+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 { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_TabPortoInvestasi } from "../../g_state";
+import toast from "react-simple-toasts";
+
+export default function DetailReviewInvestasi() {
+  const router = useRouter();
+  const [activeTab, setActiveTab] = useAtom(gs_TabPortoInvestasi);
+
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: RouterInvestasi.edit_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: RouterInvestasi.edit_dokumen,
+    },
+    {
+      id: 3,
+      name: "Berita",
+      icon: <IconSpeakerphone size={70} />,
+      route: RouterInvestasi.edit_berita,
+    },
+  ];
+
+  async function onsubmit() {
+    toast("Review Dibatalkan");
+    router.push(RouterInvestasi.portofolio);
+    setActiveTab("Draft");
+  }
+
+  return (
+    <>
+      <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>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>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 + `${"1"}`)}
+          >
+            <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>
+
+      {/* Tombol Ajukan */}
+      <Center>
+        <Button
+          w={300}
+          mb={"xl"}
+          radius={50}
+          bg={"red.7"}
+          color="yellow"
+          onClick={() => onsubmit()}
+        >
+          Batalkan Review
+        </Button>
+      </Center>
+    </>
+  );
+}

src/app_modules/investasi/dialog_page/transaksi_saham/layout.tsx

@@ -2,8 +2,10 @@
 
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { 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 LayoutCountDownTransaksiInvestasi({
   children,
@@ -11,6 +13,7 @@ export default function LayoutCountDownTransaksiInvestasi({
   children: React.ReactNode;
 }) {
   const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_investasiFooter)
   return (
     <>
       <AppShell
@@ -19,7 +22,10 @@ export default function LayoutCountDownTransaksiInvestasi({
             <Group h={50} align="center">
               <CloseButton
                 size={"md"}
-                onClick={() => router.push(RouterInvestasi.portofolio)}
+                onClick={() => {
+                  router.push(RouterInvestasi.main_transaksi),
+                  setHotMenu(3)
+                }}
               />
               <Text>Status Transfer</Text>
             </Group>

src/app_modules/investasi/dummy/data_dummy.json

@@ -22,7 +22,7 @@
     },
     "statusSaham": {
       "id": 2,
-      "status": "Menunggu Konfirmasi"
+      "status": "Menunggu konfirmasi"
     }
   },
   {
@@ -44,7 +44,7 @@
     "saham_beli": 0,
     "statusPorto": {
       "id": 3,
-      "status": "Accept"
+      "status": "Publish"
     },
     "statusSaham": {
       "id": 1,
@@ -69,8 +69,8 @@
     "persentase": 30,
     "saham_beli": 1,
     "statusPorto": {
-      "id": 3,
+      "id": 2,
-      "status": "Accept"
+      "status": "Review"
     },
     "statusSaham": {
       "id": 1,
@@ -121,12 +121,12 @@
     "persentase": 80,
     "saham_beli": 0,
     "statusPorto": {
-      "id": 3,
+      "id": 4,
-      "status": "Accept"
+      "status": "Reject"
     },
     "statusSaham": {
       "id": 2,
-      "status": "Menunggu Konfirmasi"
+      "status": "Menunggu konfirmasi"
     }
   }
 ]

src/app_modules/investasi/g_state/index.ts

@@ -1,3 +1,4 @@
 import { atomWithStorage } from "jotai/utils";
 
-export const gs_investasiFooter = atomWithStorage<any>("changeColor", false)
+export const gs_investasiFooter = atomWithStorage<number>("changeColor", 0)
+export const gs_TabPortoInvestasi = atomWithStorage<any | string>("gs_TabPortoInvestasi" , "Draft")

src/app_modules/investasi/index.ts

@@ -13,6 +13,7 @@ import LayoutBuktiTransferInvestasi from "./upload_bukti/layout";
 import CountDownTransaksiInvestasi from "./dialog_page/transaksi_saham/view";
 import LayoutCountDownTransaksiInvestasi from "./dialog_page/transaksi_saham/layout";
 import PortofolioInvestasi from "./portofolio/view";
+import LayoutPortofolioInvestasi from "./portofolio/layout";
 import PortofolioDetailInvestasi from "./detail_porto/view";
 import LayoutPortofolioDetailInvestasi from "./detail_porto/layout";
 import EditInvestasi from "./edit/view";
@@ -47,6 +48,19 @@ import CreateBeritaInvestasi from "./create_berita/view";
 import LayoutCreateBeritaInvestasi from "./create_berita/layout";
 import ListEditBeritaInvestasi from "./list_edit_berita/page";
 import LayoutListEditBeritaInvestasi from "./list_edit_berita/layout";
+import InvestasiSahamTerbeli from "./main/saham_saya";
+import DetailDraftInvestasi from "./detail_portofolio/draft/page";
+import LayoutDetailDraftInvestasi from "./detail_portofolio/draft/layout";
+import DetailReviewInvestasi from "./detail_portofolio/review/page";
+import LayoutDetailReviewInvestasi from "./detail_portofolio/review/layout";
+import DetailPublishInvestasi from "./detail_portofolio/publish/page";
+import LayoutDetailPublishInvestasi from "./detail_portofolio/publish/layout";
+import DetailRejectInvestasi from "./detail_portofolio/reject/page";
+import LayoutDetailRejectInvestasi from "./detail_portofolio/reject/layout";
+import TransaksiInvestasi from "./transaksi/page";
+import LayoutTransaksiInvestasi from "./transaksi/layout";
+import StatusTransaksiInvestasi_Gagal from "./status_transaksi/gagal/view";
+import LayoutStatusTransaksiInvestasi_Gagal from "./status_transaksi/gagal/layout";
 
 export {
   MainInvestasi,
@@ -64,6 +78,7 @@ export {
   CountDownTransaksiInvestasi as KonfirmasiBuktiInvestasi,
   LayoutCountDownTransaksiInvestasi as LayoutKonfirmasiBuktiInvestasi,
   PortofolioInvestasi,
+  LayoutPortofolioInvestasi,
   PortofolioDetailInvestasi,
   LayoutPortofolioDetailInvestasi,
   EditInvestasi,
@@ -96,6 +111,19 @@ export {
   LayoutDialogPageCreateInvestasi,
   CreateBeritaInvestasi,
   LayoutCreateBeritaInvestasi,
-  ListEditBeritaInvestasi ,
+  ListEditBeritaInvestasi,
   LayoutListEditBeritaInvestasi,
+  InvestasiSahamTerbeli,
+  DetailDraftInvestasi,
+  LayoutDetailDraftInvestasi,
+  DetailReviewInvestasi,
+  LayoutDetailReviewInvestasi,
+  DetailPublishInvestasi,
+  LayoutDetailPublishInvestasi,
+  DetailRejectInvestasi,
+  LayoutDetailRejectInvestasi,
+  TransaksiInvestasi,
+  LayoutTransaksiInvestasi,
+  StatusTransaksiInvestasi_Gagal,
+  LayoutStatusTransaksiInvestasi_Gagal
 };

src/app_modules/investasi/main/layout.tsx

@@ -13,15 +13,19 @@ import {
   Text,
 } from "@mantine/core";
 import {
+  IconCash,
   IconChartHistogram,
   IconChartPie,
   IconChartPieFilled,
+  IconMoneybag,
+  IconNotes,
   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";
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 
 export default function LayoutMainInvestasi({
   children,
@@ -29,7 +33,34 @@ export default function LayoutMainInvestasi({
   children: React.ReactNode;
 }) {
   const router = useRouter();
-  const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
+  const [active, setActive] = useAtom(gs_investasiFooter);
+
+  const listFooter = [
+    {
+      id: 1,
+      name: "Bursa",
+      route: RouterInvestasi.main,
+      icon: <IconChartHistogram />,
+    },
+    {
+      id: 2,
+      name: "Portofolio",
+      route: RouterInvestasi.main_porto,
+      icon: <IconChartPie />,
+    },
+    {
+      id: 3,
+      name: "Investasi",
+      route: RouterInvestasi.main_investasi,
+      icon: <IconCash />,
+    },
+    {
+      id: 4,
+      name: "Transaksi",
+      route: RouterInvestasi.main_transaksi,
+      icon: <IconNotes />,
+    },
+  ];
 
   return (
     <>
@@ -43,42 +74,26 @@ export default function LayoutMainInvestasi({
           />
         }
         footer={
-          <Footer height={70} bg={"dark"}>
+          <Footer height={70} bg={"dark.4"}>
             <Grid align="center" h={60} pt={"xs"}>
               {/* Tampilan Bursa */}
-              <Grid.Col
+              {listFooter.map((e, k) => (
-                span={6}
+                <Grid.Col
-                onClick={() => {
+                  key={e.id}
-                  router.push("/dev/investasi/main");
+                  span={3}
-                  setChangeColor(false);
+                  onClick={() => {
-                }}
+                    router.push(e.route);
-              >
+                    setActive(k)
-                <Center>
+                  }}
-                  <Flex direction={"column"} align={"center"} w={"100%"}>
+                >
-                    <ActionIcon variant="transparent">
+                  <Center>
-                      <IconChartHistogram  color={changeColor ? "white" : "green"}/>
+                    <Flex direction={"column"} align={"center"} w={"100%"}>
-                    </ActionIcon>
+                      <ActionIcon variant="transparent" c={active === k ? "green" : "white"}>{e.icon}</ActionIcon>
-                    <Text c={changeColor ? "white" : "green"}>Bursa</Text>
+                      <Text c={active === k ? "green" : "white"}>{e.name}</Text>
-                  </Flex>
+                    </Flex>
-                </Center>
+                  </Center>
-              </Grid.Col>
+                </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">
-                      <IconChartPie  color={changeColor ?  "green" : "white"}/>
-                    </ActionIcon>
-                    <Text c={changeColor ? "green" : "white"}>Portofolio</Text>
-                  </Flex>
-                </Center>
-              </Grid.Col>
             </Grid>
           </Footer>
         }

src/app_modules/investasi/main/saham_saya.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  Title,
+  Card,
+  CardSection,
+  Group,
+  Flex,
+  Avatar,
+  AspectRatio,
+  Box,
+  Slider,
+  Grid,
+  Stack,
+  Divider,
+  Badge,
+  Image,
+  Text,
+} from "@mantine/core";
+import { IconCircleCheck } from "@tabler/icons-react";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import dataDummy from "../dummy/data_dummy.json";
+
+export default function InvestasiSahamTerbeli() {
+  const router = useRouter();
+  return (
+    <>
+
+      {dataDummy.map((e) => (
+        <Card
+          key={e.id}
+          withBorder
+          bg={"gray.5"}
+          mb={"lg"}
+          onClick={() =>
+            router.push(RouterInvestasi.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 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>
+          <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"}>
+            <Group position="apart">
+              {e.statusSaham.id === 1 ? (
+                <Badge variant="dot">{e.statusSaham.status}</Badge>
+              ) : (
+                <Badge variant="dot" color="red">
+                  {e.statusSaham.status}
+                </Badge>
+              )}
+
+              {(() => {
+                if (
+                  e.masterPencarianInvestorId -
+                    moment(new Date()).diff(new Date(e.createdAt), "days") <=
+                  0
+                ) {
+                  return (
+                    <>
+                      <Group position="center">
+                        <IconCircleCheck color="green" />
+                        <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/view.tsx

@@ -3,6 +3,7 @@
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { Warna } from "@/app/lib/warna";
 import {
+  Avatar,
   Box,
   Button,
   Center,
@@ -78,7 +79,8 @@ export default function MetodeTransferInvestasi() {
         <Flex direction={"column"} gap={"lg"} mt="xs">
           {listNoRekening.map((e) => (
             <Box key={e.id}>
-              <Radio value={e.norek} label={e.name + ":  " + e.norek} />
+             
+              <Radio value={e.norek} label={e.name}/>
             </Box>
           ))}
         </Flex>

src/app_modules/investasi/portofolio/layout.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import {
+  AppShell,
+  Box,
+  Button,
+  Group,
+  Header,
+  ScrollArea,
+} from "@mantine/core";
+import React, { useState } from "react";
+
+export default function LayoutPortofolioInvestasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [active, setActive] = useState(0);
+  
+
+  return (
+    <>
+      <AppShell
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/investasi/portofolio/view.tsx

@@ -15,8 +15,11 @@ import {
   Group,
   Image,
   Paper,
+  ScrollArea,
+  Select,
   Slider,
   Stack,
+  Tabs,
   Text,
   Title,
 } from "@mantine/core";
@@ -31,260 +34,245 @@ import { Carousel } from "react-responsive-carousel";
 import { useDisclosure } from "@mantine/hooks";
 import { Warna } from "@/app/lib/warna";
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  IconPhoto,
+  IconMessageCircle,
+  IconSettings,
+} from "@tabler/icons-react";
+import { atomWithStorage } from "jotai/utils";
+import { useAtom } from "jotai";
+import { gs_TabPortoInvestasi } from "../g_state";
+
 
 export default function PortofolioInvestasi() {
   const router = useRouter();
+  const [activeTab, setActiveTab] = useAtom(gs_TabPortoInvestasi)
+  const listButton = [
+    {
+      id: 1,
+      name: "Draft",
+      color: "yellow",
+    },
+    {
+      id: 2,
+      name: "Review",
+      color: "orange",
+    },
+    {
+      id: 3,
+      name: "Publish",
+      color: "green",
+    },
+    {
+      id: 4,
+      name: "Reject",
+      color: "red",
+    },
+  ];
   return (
     <>
-      <MyPortofolioInvestasi />
+      <Tabs  variant="pills"  radius="xl" defaultValue="Draft" value={activeTab} onTabChange={setActiveTab}>
-      <Divider my={"lg"} />
+        <Tabs.List>
-      <SahamTerbeli />
+          {listButton.map((e) => (
-    </>
+            <Tabs.Tab key={e.id} value={e.name} color={!activeTab ? "gray" : e.color} >
-  );
+              {e.name}
-}
+            </Tabs.Tab>
+          ))}
+        </Tabs.List>
 
-function MyPortofolioInvestasi() {
+        <Divider my={"xs"}/>
-  const [opened, { toggle }] = useDisclosure(false);
-  const router = useRouter();
 
-  return (
+        {listButton.map((e) => (
-    <>
+          <Tabs.Panel key={e.id} value={e.name} pt="xs">
-      <Title mb={"md"} order={4}>
+            <StatusPortofolio data={e} />
-        Portofolio Saya
+          </Tabs.Panel>
-      </Title>
-      <Carousel
-        showThumbs={false}
-        infiniteLoop={true}
-        showArrows={false}
-        showStatus={false}
-        swipeable={true}
-      >
-        {dataDummy.map((e) => (
-          <Card
-            key={e.id}
-            withBorder
-            mb={40}
-            bg={"gray.5"}
-            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="outline">
-                        {e.statusPorto.status}
-                      </Badge>
-                    );
-                  } else {
-                    if (e.statusPorto.id === 2) {
-                      return (
-                        <Badge color="red" variant="outline">
-                          {e.statusPorto.status}
-                        </Badge>
-                      );
-                    } else {
-                      return (
-                        <Badge color="green" variant="outline">
-                          {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>
+      </Tabs>
+      
     </>
   );
 }
 
-function SahamTerbeli() {
+function StatusPortofolio({ data }: { data: any }) {
-  const router = useRouter();
-  const [opened, { toggle }] = useDisclosure(true);
-
   return (
     <>
-      <Title mb={"md"} order={4}>
+      {(() => {
-        Saham Saya
+        if (data.id === 1) {
-      </Title>
+          return (
-      {dataDummy.map((e) => (
+            <>
-        <Card
+              <Draft data={data} />
-          key={e.id}
+            </>
-          withBorder
+          );
-          bg={"gray.5"}
+        } else {
-          mb={"lg"}
+          if (data.id === 2) {
-          onClick={() =>
+            return (
-            router.push(RouterInvestasi.detail_saham_terbeli + `${e.id}`)
+              <>
+                <Review data={data} />
+              </>
+            );
+          } else {
+            if (data.id === 3) {
+              return (
+                <>
+                  <Publish data={data} />
+                </>
+              );
+            } else {
+              return (
+                <>
+                  <Reject data={data} />
+                </>
+              );
+            }
           }
-        >
+        }
-          <CardSection>
+      })()}
-            <Group position="left" mt={"sm"} px={"md"}>
+    </>
-              <Flex align={"center"} gap={"xs"}>
+  );
-                <Avatar src={"/aset/avatar.png"} />
+}
-                <Text>Username</Text>
+
-              </Flex>
+function Draft({ data }: { data: any }) {
-            </Group>
+  const router = useRouter();
-          </CardSection>
+  return (
-          <CardSection p={"xs"}>
+    <>
-            <AspectRatio ratio={16 / 9}>
+      <Card
-              {/* {e.imagesId ? (
+        withBorder
-                    <Image alt="" src={`/api/investasi/gambar/${e.imagesId}`} />
+        mb={40}
-                  ) : (
+        bg={"gray.5"}
-                    <Image alt="" src={"/aset/no-img.png"} />
+        onClick={() => router.push(RouterInvestasi.detail_draft)}
-                  )} */}
+      >
-              <Image alt="" src={"/aset/no-img.png"} />
+        <CardSection p={"xs"}>
-            </AspectRatio>
+          <AspectRatio ratio={16 / 9}>
-          </CardSection>
+            <Image alt="" src={"/aset/no-img.png"} />
-
+          </AspectRatio>
-          <CardSection p={"lg"}>
+        </CardSection>
-            <Box mb={"md"}>
+
-              <Title order={4}>{e.title}</Title>
+        <CardSection p={"lg"}>
-              <Slider
+          <Box>
-                size={10}
+            <Title order={4}>Judul Investasi</Title>
-                disabled
+          </Box>
-                labelAlwaysOn
+        </CardSection>
-                value={e.persentase}
+        <Divider />
-                marks={[{ value: e.persentase, label: e.persentase + `%` }]}
+        <CardSection p={"md"}>
-              />
+          <Group position="center">
-            </Box>
+            <Badge color="yellow" variant="dot">
-          </CardSection>
+              Draft
-          <CardSection p={"md"}>
+            </Badge>
-            <Box>
+          </Group>
-              <Grid>
+        </CardSection>
-                <Grid.Col span={6}>
+      </Card>
-                  <Stack>
+    </>
-                    <Box>
+  );
-                      <Text>Dana Dibutuhkan</Text>
+}
-                      <Text>Rp. {e.targetDana}</Text>
+
-                    </Box>
+function Review({ data }: { data: any }) {
-                    <Box>
+  const router = useRouter();
-                      <Text>Harga Per Lembar</Text>
+  return (
-                      <Text>Rp. {e.hargaLembar}</Text>
+    <>
-                    </Box>
+      <Card
-                  </Stack>
+        withBorder
-                </Grid.Col>
+        mb={40}
-                <Grid.Col span={6}>
+        bg={"gray.5"}
-                  <Stack>
+        onClick={() => router.push(RouterInvestasi.detail_review)}
-                    <Box>
+      >
-                      <Text>ROI</Text>
+        <CardSection p={"xs"}>
-                      <Text>{e.roi}%</Text>
+          <AspectRatio ratio={16 / 9}>
-                    </Box>
+            <Image alt="" src={"/aset/no-img.png"} />
-                    <Box>
+          </AspectRatio>
-                      <Text>Total Lembar</Text>
+        </CardSection>
-                      <Text>{e.totalLembar}</Text>
+
-                    </Box>
+        <CardSection p={"lg"}>
-                  </Stack>
+          <Box >
-                </Grid.Col>
+            <Title order={4}>Judul Investasi</Title>
-              </Grid>
+            
-            </Box>
+          </Box>
-          </CardSection>
+        </CardSection>
-          <Divider />
+        <Divider />
-          <CardSection p={"md"}>
+        <CardSection p={"md"}>
-            <Group position="apart">
+          <Group position="center">
-              {e.statusSaham.id === 1 ? (
+            <Badge color="orange" variant="dot">
-                <Badge variant="dot">{e.statusSaham.status}</Badge>
+              {data.name}
-              ) : (
+            </Badge>
-                <Badge variant="dot" color="red">
+          </Group>
-                  {e.statusSaham.status}
+        </CardSection>
-                </Badge>
+      </Card>
-              )}
+    </>
-
+  );
-              {(() => {
+}
-                if (
+
-                  e.masterPencarianInvestorId -
+function Publish({ data }: { data: any }) {
-                    moment(new Date()).diff(new Date(e.createdAt), "days") <=
+  const router = useRouter();
-                  0
+  return (
-                ) {
+    <>
-                  return (
+      <Card
-                    <>
+        withBorder
-                      <Group position="center">
+        mb={40}
-                        <IconCircleCheck color="green" />
+        bg={"gray.5"}
-                        <Text>Selesai</Text>
+        onClick={() => router.push(RouterInvestasi.detail_publish)}
-                      </Group>
+      >
-                    </>
+        <CardSection p={"xs"}>
-                  );
+          <AspectRatio ratio={16 / 9}>
-                } else {
+            <Image alt="" src={"/aset/no-img.png"} />
-                  return (
+          </AspectRatio>
-                    <>
+        </CardSection>
-                      <Group position="right" spacing={"xs"}>
+
-                        <Text>Sisa waktu:</Text>
+        <CardSection p={"lg"}>
-                        <Text>
+          <Box mb={"md"}>
-                          {e.masterPencarianInvestorId -
+            <Title order={4}>Judul Investasi</Title>
-                            moment(new Date()).diff(
+            <Slider
-                              new Date(e.createdAt),
+              size={10}
-                              "days"
+              disabled
-                            )}
+              labelAlwaysOn
-                        </Text>
+              value={60}
-                        <Text>Hari</Text>
+              marks={[{ value: 60, label: 60 + `%` }]}
-                      </Group>
+            />
-                    </>
+          </Box>
-                  );
+        </CardSection>
-                }
+        <Divider />
-              })()}
+        <CardSection p={"md"}>
-            </Group>
+          <Group position="apart">
-          </CardSection>
+            <Badge color="green" variant="dot">
-        </Card>
+              {data.name}
-      ))}
+            </Badge>
+            <Text>Sisa Waktu : 30 Hari</Text>
+          </Group>
+        
+        </CardSection>
+      </Card>
+    </>
+  );
+}
+
+function Reject({ data }: { data: any }) {
+  const router = useRouter();
+  return (
+    <>
+      <Card
+        withBorder
+        mb={40}
+        bg={"gray.5"}
+        onClick={() => router.push(RouterInvestasi.detail_reject)}
+      >
+        <CardSection p={"xs"}>
+          <AspectRatio ratio={16 / 9}>
+            <Image alt="" src={"/aset/no-img.png"} />
+          </AspectRatio>
+        </CardSection>
+
+        <CardSection p={"lg"}>
+          <Box>
+            <Title order={4}>Judul Investasi</Title>
+          </Box>
+        </CardSection>
+        <Divider />
+        <CardSection p={"md"}>
+          <Group position="center">
+            <Badge color="red" variant="dot">
+              {data.name}
+            </Badge>
+          </Group>
+        </CardSection>
+      </Card>
     </>
   );
 }

src/app_modules/investasi/status_transaksi/gagal/layout.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Warna } from "@/app/lib/warna";
+import { AppShell, Header, Group, CloseButton, ActionIcon, Footer, Center, Button, Text } from "@mantine/core";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_investasiFooter } from "../../g_state";
+
+export default function LayoutStatusTransaksiInvestasi_Gagal( {
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    const router = useRouter();
+    const [hotMenu, setHotMenu] = 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.main_transaksi);
+                    setHotMenu(3);
+                  }}
+                />
+                <Text>Status Transaksi</Text>
+                <ActionIcon variant="transparent" disabled></ActionIcon>
+              </Group>
+            </Header>
+          }
+          footer={
+            <Footer height={70} sx={{ borderStyle: "none" }}>
+              <Center>
+                <Button
+                  w={300}
+                  radius={50}
+                  bg={Warna.biru}
+                  onClick={() => {
+                    router.push(RouterInvestasi.main_transaksi), setHotMenu(3);
+                  }}
+                >
+                  Kembali Ke Transaksi
+                </Button>
+              </Center>
+            </Footer>
+          }
+        >
+          {children}
+        </AppShell>
+      </>
+    );
+  }

src/app_modules/investasi/status_transaksi/gagal/view.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { Paper, Stack, Center, Flex, Title, Divider, Group, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconAlertHexagon } from "@tabler/icons-react";
+import moment from "moment";
+import { useState } from "react";
+
+export default function StatusTransaksiInvestasi_Gagal(){
+    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 Gagal</Title>
+                <Text fz={10}>{tgl}</Text>
+              </Flex>
+              <Center>
+               <Stack>
+                <Center>
+                <IconAlertHexagon size={100} color="red"/>
+                </Center>
+               <Text fw={"bold"} >
+                  Rp. 300.000
+                </Text>
+               </Stack>
+              </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>
+    </>
+  );
+}

src/app_modules/investasi/status_transaksi/layout.tsx

@@ -18,13 +18,14 @@ import React from "react";
 import { gs_investasiFooter } from "../g_state";
 import { Warna } from "@/app/lib/warna";
 
-export default function LayoutStatusTransaksiInvestasi({
+export default function LayoutStatusTransaksiInvestasi(
+  {
   children,
 }: {
   children: React.ReactNode;
 }) {
   const router = useRouter();
-  // const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
+  const [hotMenu, setHotMenu] = useAtom(gs_investasiFooter);
 
   return (
     <>
@@ -35,8 +36,8 @@ export default function LayoutStatusTransaksiInvestasi({
               <CloseButton
                 size={"md"}
                 onClick={() => {
-                  router.push(RouterInvestasi.portofolio);
+                  router.push(RouterInvestasi.main_transaksi);
-                  // setChangeColor(true);
+                  setHotMenu(3);
                 }}
               />
               <Text>Status Transaksi</Text>
@@ -47,7 +48,16 @@ export default function LayoutStatusTransaksiInvestasi({
         footer={
           <Footer height={70} sx={{ borderStyle: "none" }}>
             <Center>
-              <Button w={300} radius={50} bg={Warna.biru} onClick={() => router.push(RouterInvestasi.portofolio)}>Kembali Ke Portofolio</Button>
+              <Button
+                w={300}
+                radius={50}
+                bg={Warna.biru}
+                onClick={() => {
+                  router.push(RouterInvestasi.main_investasi), setHotMenu(2);
+                }}
+              >
+                Kembali Ke Investasi
+              </Button>
             </Center>
           </Footer>
         }

src/app_modules/investasi/transaksi/layout.tsx

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

src/app_modules/investasi/transaksi/page.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Badge, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import toast from "react-simple-toasts";
+
+export default function TransaksiInvestasi() {
+  const router = useRouter();
+  const listStatusTransaksi = [
+    { id: 1, name: "Berhasil" },
+    { id: 2, name: "Menunggu" },
+    { id: 3, name: "Proses" },
+    { id: 4, name: "Batal" },
+  ];
+
+  const dataDummy = [
+    {
+      id: 1,
+      name: "Judul Investasi",
+      status: { id: 1, name: "Berhasil" },
+    },
+    {
+      id: 2,
+      name: "Judul Investasi",
+      status: { id: 3, name: "Proses" },
+    },
+    {
+      id: 3,
+      name: "Judul Investasi",
+      status: { id: 2, name: "Menunggu" },
+    },
+    {
+      id: 4,
+      name: "Judul Investasi",
+      status: { id: 4, name: "Batal" },
+    },
+    {
+      id: 5,
+      name: "Judul Investasi",
+      status: { id: 1, name: "Berhasil" },
+    },
+  ];
+
+  async function onKlik(id: any) {
+    if (id === 1) {
+      return router.push(RouterInvestasi.status_transaksi);
+    } else {
+      if (id === 2) {
+        return router.push(RouterInvestasi.transfer);
+      } else {
+        if (id === 3) {
+            return router.push(RouterInvestasi.dialog_transaksi)
+        } else {
+            return router.push(RouterInvestasi.status_transaksi_gagal)
+        }
+      }
+    }
+  }
+
+  return (
+    <>
+      <Stack>
+        {dataDummy.map((e) => (
+          <Paper
+            key={e.id}
+            p="xs"
+            bg={"gray"}
+            onClick={() => onKlik(e.status.id)}
+          >
+            <Group position="apart">
+              <Title order={5}>{e.name}</Title>
+              <Title order={5}>Rp. 100.000</Title>
+            </Group>
+            <Group position="apart">
+              <Stack spacing={0}>
+                <Text fz={"xs"}>Nama Bank</Text>
+                <Text fz={"xs"}>10 Oktober 2023</Text>
+              </Stack>
+              {(() => {
+                if (e.status.id === 1) {
+                  return (
+                    <>
+                      <Title order={5} c={"green"}>
+                        Berhasil
+                      </Title>
+                    </>
+                  );
+                } else {
+                  if (e.status.id === 2) {
+                    return (
+                      <>
+                        <Title order={5} c={"orange"}>
+                          Menunggu
+                        </Title>
+                      </>
+                    );
+                  } else {
+                    if (e.status.id === 3) {
+                      return (
+                        <>
+                          <>
+                            <Title order={5} c={"blue"}>
+                              Proses
+                            </Title>
+                          </>
+                        </>
+                      );
+                    } else {
+                      return (
+                        <>
+                          <Title order={5} c={"red"}>
+                            Dibatalkan
+                          </Title>
+                        </>
+                      );
+                    }
+                  }
+                }
+              })()}
+            </Group>
+          </Paper>
+        ))}
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/transfer/layout.tsx

@@ -3,7 +3,17 @@
 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 {
+  ActionIcon,
+  AppShell,
+  Button,
+  Center,
+  CloseButton,
+  Footer,
+  Group,
+  Header,
+  Text,
+} from "@mantine/core";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import React from "react";
@@ -15,12 +25,25 @@ export default function LayoutTransferInvestasi({
   children: React.ReactNode;
 }) {
   const router = useRouter();
-  const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
+  const [hotMenu, setHotMenu] = useAtom(gs_investasiFooter);
 
   return (
     <>
       <AppShell
-        header={<HeaderTamplate title="Transfer " />}
+        header={
+          <Header height={50}>
+            <Group position="apart" h={50} px={"md"}>
+              <CloseButton
+                size={"md"}
+                onClick={() => {
+                  router.push(RouterInvestasi.main_transaksi), setHotMenu(3);
+                }}
+              />
+              <Text>Transfer</Text>
+              <ActionIcon variant="transparent" disabled></ActionIcon>
+            </Group>
+          </Header>
+        }
         footer={
           <Footer height={70} sx={{ borderStyle: "none" }}>
             <Center>
@@ -30,9 +53,8 @@ export default function LayoutTransferInvestasi({
                 bg={Warna.biru}
                 onClick={() => {
                   router.push(RouterInvestasi.dialog_transaksi);
-                  setChangeColor(true)
+                  setHotMenu(1);
                   // router.push(RouterInvestasi.status_transaksi);
-                  
                 }}
               >
                 Sudah Transfer

src/app_modules/investasi/transfer/view.tsx

@@ -20,9 +20,11 @@ import {
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconAlertTriangle } from "@tabler/icons-react";
+import moment from "moment";
 import { useRouter } from "next/navigation";
 
 import { useState } from "react";
+import Countdown from "react-countdown";
 
 export default function TransferInvestasi() {
   const router = useRouter();
@@ -40,16 +42,44 @@ export default function TransferInvestasi() {
     }
   }, []);
 
+  const PopupCD = () => <Text fz={"xs"} c={"white"}>Gagal</Text>;
+  const countD = ({ hours, minutes, seconds, completed }: any) => {
+    if (completed) {
+      return PopupCD();
+    } else {
+      return (
+        <>
+          {hours}:{minutes}:{seconds}
+        </>
+      );
+    }
+  };
+
   return (
     <>
-      <Stack spacing={"xl"}>
+      <Stack spacing={"lg"}>
-        <Stack spacing={0} mb={"md"}>
+        <Stack spacing={0} mb={"xs"}>
           <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"} />
+          <Divider my={"md"} />
+          <Grid>
+            <Grid.Col span={4}>
+              <Text fz={"xs"}>Transfer sebelum</Text>
+            </Grid.Col>
+            <Grid.Col span={5}>
+              <Text fz={"xs"} fw={"bold"}>{moment().local().add(1, "day").calendar()}</Text>
+            </Grid.Col>
+            <Grid.Col span={3} fz={"xs"} >
+             <Paper bg={"red"} px={"md"}>
+             <Center>
+             <Countdown date={Date.now() + 86400000} renderer={countD} />
+             </Center>
+             </Paper>
+            </Grid.Col>
+          </Grid>
         </Stack>
 
         <Stack spacing={"xl"}>
@@ -112,40 +142,6 @@ export default function TransferInvestasi() {
           </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> */}
     </>
   );
 }

src/bin/seeder/investasi/pembagian_deviden.json

@@ -1,14 +1,14 @@
 [
   {
-    "id": 1,
+    "id": "1",
-    "name": "3 bulan"
+    "name": "3"
   },
   {
-    "id": 2,
+    "id": "2",
-    "name": "6  bulan"
+    "name": "6"
   },
   {
-    "id": 3,
+    "id": "3",
-    "name": "1 tahun"
+    "name": "12"
   }
 ]

src/bin/seeder/investasi/pencarian_investor.json

@@ -1,19 +1,19 @@
 [
     {
-      "id": 1,
+      "id": "1",
-      "name": "30 hari"
+      "name": "30"
     },
     {
-      "id": 2,
+      "id": "2",
-      "name": "60 hari"
+      "name": "60"
     },
     {
-      "id": 3,
+      "id": "3",
-      "name": "90 hari"
+      "name": "90"
     },
     {
-      "id": 4,
+      "id": "4",
-      "name": "120 hari"
+      "name": "120"
     }
   ]
   

src/bin/seeder/investasi/periode_deviden.json

@@ -1,10 +1,10 @@
 [
   {
-    "id": 1,
+    "id": "1",
     "name": "Selamanya"
   },
   {
-    "id": 2,
+    "id": "2",
     "name": "Satu tahun"
   }
 ]

src/bin/seeder/investasi/status_investasi.json

@@ -0,0 +1,22 @@
+[
+  {
+    "id": "1",
+    "name": "Draft",
+    "color": "yellow"
+  },
+  {
+    "id": "2",
+    "name": "Review",
+    "color": "orange"
+  },
+  {
+    "id": "3",
+    "name": "Publish",
+    "color": "green"
+  },
+  {
+    "id": "4",
+    "name": "Reject",
+    "color": "red"
+  }
+]