feat

Desc:
- Fitur metode transfer

fix
Desc:
- Perubahan minor

#No issue

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

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

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

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

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

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

src/app/lib/app_route.ts

@@ -1,5 +1,9 @@
 export const RouteInvestasi = {
   //INVESTASI
+// portofolio
+portofolio: "/dev/investasi/main/portofolio",
+  // proses beli saham
+  metode_transfer: "/dev/investasi/metode_transfer",
   // edit //
   edit_intro: "/dev/investasi/edit_intro/",
   edit_prospektus: "/dev/investasi/edit_prospektus/",

src/app_modules/crowd/main/view.tsx

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

src/app_modules/investasi/create/view.tsx

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

src/app_modules/investasi/detail_dokumen/view.tsx

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

src/app_modules/investasi/detail_prospektus/view.tsx

@@ -8,7 +8,7 @@ export default function DetailPropektus() {
   return (
     <>
       <Link
-        href={"https://pii.or.id/uploads/dummies.pdf"}
+        href={"/aset/dummy_file.pdf"}
         target="_blank"
         style={{ textDecorationLine: "none" }}
       >

src/app_modules/investasi/dummy/data_dummy.json

@@ -14,7 +14,12 @@
     "masterPembagianDevidenId": 3,
     "masterPencarianInvestorId": 60,
     "imagesId": "clny2l8dj0000tlagcpsi9dmz",
-    "persentase": 40
+    "persentase": 40,
+    "saham_beli": 1,
+    "statusPorto": {
+      "id": 1,
+      "status": "Draft"
+    }
   },
   {
     "id": "clnxyjc0r0002tlamg8fn9ubk",
@@ -31,6 +36,77 @@
     "masterPembagianDevidenId": 6,
     "masterPencarianInvestorId": 4,
     "imagesId": "clnxyjc070000tlamc5jmsqse",
-    "persentase": 60
+    "persentase": 60,
+    "saham_beli": 0,
+    "statusPorto": {
+      "id": 2,
+      "status": "Review"
+    }
+  },
+  {
+    "id": "clnwzrcqz0002tlqlrb3b8kif",
+    "title": "Weeding EO",
+    "targetDana": "300000",
+    "hargaLembar": "1000",
+    "totalLembar": "3000",
+    "roi": "6",
+    "active": true,
+    "createdAt": "2023-10-19T09:40:20.171Z",
+    "updatedAt": "2023-10-19T09:40:20.171Z",
+    "authorId": "clntxvesu0002tlnbz030gx30",
+    "masterPeriodeDevidenId": "Selamanya",
+    "masterPembagianDevidenId": 6,
+    "masterPencarianInvestorId": 30,
+    "imagesId": "clnwzrcqs0000tlqlfr2cmbo5",
+    "persentase": 30,
+    "saham_beli": 1,
+    "statusPorto": {
+      "id": 3,
+      "status": "Accept"
+    }
+  },
+  {
+    "id": "clnwzmah00005tlwdn1h7htp6",
+    "title": "Exi EO",
+    "targetDana": "100000",
+    "hargaLembar": "1000",
+    "totalLembar": "1000",
+    "roi": "3",
+    "active": true,
+    "createdAt": "2023-10-19T09:36:23.940Z",
+    "updatedAt": "2023-10-19T09:36:23.940Z",
+    "authorId": "clntxvesu0002tlnbz030gx30",
+    "masterPeriodeDevidenId": "Selamanya",
+    "masterPembagianDevidenId": 3,
+    "masterPencarianInvestorId": 60,
+    "imagesId": "clnwzmagq0003tlwd2gldlzgb",
+    "persentase": 50,
+    "saham_beli": 1,
+    "statusPorto": {
+      "id": 2,
+      "status": "Review"
+    }
+  },
+  {
+    "id": "clnwyvtlx0002tlfopdvez4yr",
+    "title": "Party EO",
+    "targetDana": "30000",
+    "hargaLembar": "1000",
+    "totalLembar": "30",
+    "roi": "1",
+    "active": true,
+    "createdAt": "2023-10-19T09:15:49.030Z",
+    "updatedAt": "2023-10-19T09:15:49.030Z",
+    "authorId": "clntxvesu0002tlnbz030gx30",
+    "masterPeriodeDevidenId": "Selamanya",
+    "masterPembagianDevidenId": 3,
+    "masterPencarianInvestorId": 90,
+    "imagesId": "clnwyvtlh0000tlfof0ec1x9k",
+    "persentase": 80,
+    "saham_beli": 0,
+    "statusPorto": {
+      "id": 3,
+      "status": "Accept"
+    }
   }
 ]

src/app_modules/investasi/edit_propektus/view.tsx

@@ -20,7 +20,7 @@ export default function EditProspektusInvestasi() {
     <>
       {edit ? (
         <Link
-          href={"https://pii.or.id/uploads/dummies.pdf"}
+          href={"/aset/dummy_file.pdf"}
           target="_blank"
           style={{ textDecorationLine: "none" }}
         >

src/app_modules/investasi/index.ts

@@ -34,6 +34,8 @@ import DetailBeritaInvestasi from "./detail_berita/view";
 import LayoutDetailBeritaInvestasi from "./detail_berita/layout";
 import BeritaInvestasi from "./berita/view";
 import LayoutBeritaInvestasi from "./berita/layout";
+import MetodeTransferInvestasi from "./metode_transfer/view";
+import LayoutMetodeTransferInvestasi from "./metode_transfer/layout";
 
 export {
   MainInvestasi,
@@ -72,5 +74,6 @@ export {
   LayoutDetailBeritaInvestasi,
   BeritaInvestasi,
   LayoutBeritaInvestasi as LayoutBeritaInvestasi,
+  MetodeTransferInvestasi,
+  LayoutMetodeTransferInvestasi,
 };
-

src/app_modules/investasi/main/view.tsx

@@ -5,6 +5,7 @@ import { INVESTASI } from "@/app_modules/models/investasi";
 import { MODEL_ALL_MASTER } from "@/app_modules/models/model_AllMaster";
 import {
   AspectRatio,
+  Badge,
   Box,
   Button,
   Card,
@@ -36,6 +37,7 @@ export default function MainInvestasi({
   pembagianDeviden: MODEL_ALL_MASTER[];
 }) {
   const router = useRouter();
+
   return (
     <>
       {/* <pre>{JSON.stringify(listData, null, 2)}</pre> */}
@@ -57,7 +59,8 @@ export default function MainInvestasi({
           </CardSection>
 
           <CardSection p={"lg"}>
-            <Box mt={"md"}>
+            <Box mb={"md"}>
+              <Title order={4}>{e.title}</Title>
               <Slider
                 size={10}
                 disabled
@@ -65,9 +68,10 @@ export default function MainInvestasi({
                 value={e.persentase}
                 marks={[{ value: e.persentase, label: e.persentase + `%` }]}
               />
-              <Title order={4}>{e.title}</Title>
             </Box>
-            <Box mt={"md"}>
+          </CardSection>
+          <CardSection  p={"md"} >
+            <Box>
               <Grid>
                 <Grid.Col span={6}>
                   <Stack>
@@ -98,33 +102,49 @@ export default function MainInvestasi({
           </CardSection>
           <Divider />
           <CardSection p={"md"}>
-            {(() => {
+            <Group position="apart" px={"sm"}>
-              if (
+              <Box>
-                e.masterPencarianInvestorId -
+                {e.saham_beli === 0 ? (
-                  moment(new Date()).diff(new Date(e.createdAt), "days") <=
+                  ""
-                0
+                ) : (
-              ) {
+                  <Badge variant="filled" color="teal">
-                return (
+                    Saham Anda
-                  <>
+                  </Badge>
-                    <Group position="right">
+                )}
-                    <IconCircleCheck/>
+              </Box>
-                    <Text>Selesai</Text>
+              {(() => {
-                    </Group>
+                if (
-                  </>
+                  e.masterPencarianInvestorId -
-                );
+                    moment(new Date()).diff(new Date(e.createdAt), "days") <=
-              } else {
+                  0
-                return<>
+                ) {
-                <Group position="right" spacing={"xs"}>
+                  return (
-                  <Text>Sisa waktu:</Text>
+                    <>
-                  <Text>
+                      <Group position="right">
-                    {e.masterPencarianInvestorId -
+                        <IconCircleCheck />
-                      moment(new Date()).diff(new Date(e.createdAt), "days")}
+                        <Text>Selesai</Text>
-                  </Text>
+                      </Group>
-                  <Text>Hari</Text>
+                    </>
-                </Group>
+                  );
-                </>
+                } else {
-              }
+                  return (
-            })()}
+                    <>
+                      <Group position="right" spacing={"xs"}>
+                        <Text>Sisa waktu:</Text>
+                        <Text>
+                          {e.masterPencarianInvestorId -
+                            moment(new Date()).diff(
+                              new Date(e.createdAt),
+                              "days"
+                            )}
+                        </Text>
+                        <Text>Hari</Text>
+                      </Group>
+                    </>
+                  );
+                }
+              })()}
+            </Group>
           </CardSection>
         </Card>
       ))}

src/app_modules/investasi/metode_transfer/layout.tsx

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

src/app_modules/investasi/metode_transfer/view.tsx

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

src/app_modules/investasi/model/dummy.ts

@@ -14,4 +14,9 @@ export interface DUMMY_INVESTASI {
   createdAt: Date;
   updatedAt: Date;
   persentase: number;
+  saham_beli: number;
+  statusPorto: {
+    id: number;
+    status: string;
+  };
 }

src/app_modules/investasi/portofolio/view.tsx

@@ -3,6 +3,7 @@
 import {
   AspectRatio,
   Avatar,
+  Badge,
   Box,
   Button,
   Card,
@@ -46,20 +47,14 @@ function MyPortofolioInvestasi() {
   const router = useRouter();
 
   return (
-    <Box mx="auto">
+    <>
-      <Paper mb={5} onClick={toggle} bg={Warna.biru} px={"md"} h={40}>
+      <Carousel showThumbs={false} infiniteLoop={true} showArrows={false} showStatus={false} swipeable={true}>
-        <Group position="apart" align="center" h={40}>
-          <Title order={6}>Portofolio Saya</Title>
-          <IconCaretDown />
-        </Group>
-      </Paper>
-
-      <Collapse in={opened} transitionDuration={700}>
         {dataDummy.map((e) => (
           <Card
             key={e.id}
             withBorder
-            mb={"lg"}
+            mb={40}
+            bg={"gray"}
             onClick={() => router.push(`/dev/investasi/detail_porto/${e.id}`)}
           >
             <CardSection p={"xs"}>
@@ -74,7 +69,8 @@ function MyPortofolioInvestasi() {
             </CardSection>
 
             <CardSection p={"lg"}>
-              <Box mt={"md"}>
+              <Box mb={"md"}>
+                <Title order={4}>{e.title}</Title>
                 <Slider
                   size={10}
                   disabled
@@ -82,48 +78,75 @@ function MyPortofolioInvestasi() {
                   value={e.persentase}
                   marks={[{ value: e.persentase, label: e.persentase + `%` }]}
                 />
-                <Title order={4}>{e.title}</Title>
               </Box>
             </CardSection>
             <Divider />
             <CardSection p={"md"}>
-              {(() => {
+              <Group position="apart">
-                if (
+                {(() => {
-                  e.masterPencarianInvestorId -
+                  if (e.statusPorto.id === 1) {
-                    moment(new Date()).diff(new Date(e.createdAt), "days") ===
+                    return (
-                  0
+                      <Badge color="yellow" variant="filled">
-                ) {
+                        {e.statusPorto.status}
-                  return (
+                      </Badge>
-                    <>
+                    );
-                      <Group position="right">
+                  } else {
-                        <IconCircleCheck />
+                    if (e.statusPorto.id === 2) {
-                        <Text>Selesai</Text>
+                      return (
-                      </Group>
+                        <Badge color="red" variant="filled">
-                    </>
+                          {e.statusPorto.status}
-                  );
+                        </Badge>
-                } else {
+                      );
-                  return (
+                    } else {
-                    <>
+                      return (
-                      <Group position="right" spacing={"xs"}>
+                        <Badge color="green" variant="filled">
-                        <Text>Sisa waktu:</Text>
+                          {e.statusPorto.status}
-                        <Text>
+                        </Badge>
-                          {e.masterPencarianInvestorId -
+                      );
-                            moment(new Date()).diff(
+                    }
-                              new Date(e.createdAt),
+                  }
-                              "days"
+                })()}
-                            )}
+
-                        </Text>
+                {(() => {
-                        <Text>Hari</Text>
+                  if (
-                      </Group>
+                    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>
         ))}
-      </Collapse>
+      </Carousel>
-    </Box>
+
+      
+    </>
   );
 }
 
@@ -133,7 +156,7 @@ function SahamTerbeli() {
 
   return (
     <>
-      <Box maw={400} mx="auto">
+      <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>
@@ -146,6 +169,7 @@ function SahamTerbeli() {
             <Card
               key={e.id}
               withBorder
+              bg={"gray"}
               mb={"lg"}
               onClick={() =>
                 router.push(RouteInvestasi.detail_saham_terbeli + `${e.id}`)
@@ -157,7 +181,6 @@ function SahamTerbeli() {
                     <Avatar src={"/aset/avatar.png"} />
                     <Text>Username</Text>
                   </Flex>
-                 
                 </Group>
               </CardSection>
               <CardSection p={"xs"}>
@@ -172,7 +195,8 @@ function SahamTerbeli() {
               </CardSection>
 
               <CardSection p={"lg"}>
-                <Box mt={"md"}>
+                <Box>
+                  <Title order={4}>{e.title}</Title>
                   <Slider
                     size={10}
                     disabled
@@ -180,9 +204,10 @@ function SahamTerbeli() {
                     value={e.persentase}
                     marks={[{ value: e.persentase, label: e.persentase + `%` }]}
                   />
-                  <Title order={4}>{e.title}</Title>
                 </Box>
-                <Box mt={"md"}>
+              </CardSection>
+              <CardSection p={"md"}>
+                <Box>
                   <Grid>
                     <Grid.Col span={6}>
                       <Stack>
@@ -216,7 +241,7 @@ function SahamTerbeli() {
                 {(() => {
                   if (
                     e.masterPencarianInvestorId -
-                      moment(new Date()).diff(new Date(e.createdAt), "days") ===
+                      moment(new Date()).diff(new Date(e.createdAt), "days") <=
                     0
                   ) {
                     return (

src/app_modules/investasi/proses_investasi/view.tsx

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

src/app_modules/investasi/upload_bukti/view.tsx

@@ -12,49 +12,75 @@ import {
   Image,
   Text,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconCamera } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-simple-toasts";
 
 export default function UploadBuktiTransferInvestasi() {
-  const router = useRouter()
+  const 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)
+    }
+  }, []);
 
-  const totalHarga = localStorage.getItem("total_harga")
   return (
     <>
+      {/* Nama Rekening */}
       <Grid align="center">
-        <Grid.Col span={"auto"}>
+        <Grid.Col span={5}>
-          <Text>Rekening</Text>
+          <Text>Nama Rekening</Text>
         </Grid.Col>
-        <Grid.Col span={"auto"}>
+        <Grid.Col span={7}>
-          <Text>908765467897654567</Text>
+          <Text fw={"bold"}>Xendit</Text>
         </Grid.Col>
-        <Grid.Col span={"auto"}>
+        
+      </Grid>
+
+      {/* Nomor rekening */}
+      <Grid align="center">
+        <Grid.Col span={5}>
+          <Text>Nomor Rekening</Text>
+        </Grid.Col>
+        <Grid.Col span={7} >
+          <Text fw={"bold"}>{bank}</Text>
+        </Grid.Col>
+        {/* <Grid.Col span={"auto"}>
           <CopyButton value="908765467897654567">
             {({ copied, copy }) => (
               <Button
                 compact
                 radius={50}
-                color={copied ? "teal" : "blue"}
+                color={copied ? "teal" : "indigo"}
                 onClick={copy}
               >
                 {copied ? "Copied url" : "Copy url"}
               </Button>
             )}
           </CopyButton>
-        </Grid.Col>
+        </Grid.Col> */}
       </Grid>
+
+      {/* Total Bayar */}
       <Grid align="center">
-        <Grid.Col span={"auto"}>
+        <Grid.Col span={5}>
-          <Text>Total Harga</Text>
+          <Text>Total Bayar</Text>
         </Grid.Col>
-        <Grid.Col span={"auto"}>
+        <Grid.Col span={7}>
-          <Text>Rp. {totalHarga}</Text>
+          <Text fw={"bold"}>Rp. {total}</Text>
         </Grid.Col>
-        <Grid.Col span={"auto"}></Grid.Col>
+       
       </Grid>
 
       {/* Upload */}
@@ -93,14 +119,21 @@ export default function UploadBuktiTransferInvestasi() {
 
       <Center>
         {img === null ? (
-          <Button w={350} radius={50} bg={"gray"}
+          <Button
-          onClick={() => toast("Masukan Bukti Transfer")}
+            disabled
+            w={350}
+            radius={50}
+            bg={"gray"}
+            onClick={() => toast("Masukan Bukti Transfer")}
           >
             Selesai
           </Button>
         ) : (
-          <Button w={350} radius={50} bg={"blue"}
+          <Button
-          onClick={() => router.push("/dev/investasi/konfirmasi")}
+            w={350}
+            radius={50}
+            bg={"blue"}
+            onClick={() => router.push("/dev/investasi/konfirmasi")}
           >
             Selesai
           </Button>