Fix

## Deskripsi:
- Cek notif
## No Issue

src/app_modules/investasi/_component/file_view/frame_file_view.tsx

@@ -1,50 +0,0 @@
-import { Stack } from "@mantine/core";
-// import { useState } from "react";
-// import { Document, Page, pdfjs } from "react-pdf";
-// import "react-pdf/dist/Page/AnnotationLayer.css";
-// import "react-pdf/dist/Page/TextLayer.css";
-// import styles from "./styles.module.css";
-
-// pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-//   "pdfjs-dist/build/pdf.worker.min.mjs",
-//   import.meta.url
-// ).toString();
-
-export function ComponentInvestasi_FrameFileView({
-  fileId,
-  path,
-}: {
-  fileId: string;
-  path: string;
-}) {
-  return (
-    <Stack>
-      {/* <MyFile file={path + fileId} /> */}
-    </Stack>
-  );
-}
-
-// function MyFile({ file }: { file: any }) {
-//   const [numPages, setNumPages] = useState<number | null>(null);
-//   const [pageNumber, setPageNumber] = useState(1);
-
-//   function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
-//     setNumPages(numPages);
-//   }
-
-//   return (
-//     <div>
-//       <Document
-//         className={styles.file_view}
-//         file={file}
-//         onLoadSuccess={onDocumentLoadSuccess}
-
-//       >
-//         <Page className={styles.page} pageNumber={pageNumber} />
-//       </Document>
-//       {/* <p>
-//         Page {pageNumber} of {numPages}
-//       </p> */}
-//     </div>
-//   );
-// }

src/app_modules/investasi/_component/file_view/styles.module.css

@@ -1,17 +0,0 @@
-.file_view {
-  width: 100%;
-  /* padding: 30px; */
-  background-color: aqua;
-  right: 0;
-  left: 0;
-  height: 92vh;
-  position: relative;
-}
-
-.page {
-  /* display: grid;
-  place-items: center; Centers both horizontally and vertically */
-  height: 5vh;
-  width: 50%;  
-  position: absolute;
-}

src/app_modules/investasi/_component/index.ts

@@ -1,11 +1,7 @@
-import { ComponentInvestasi_FrameFileView } from "./file_view/frame_file_view";
-import { ComponentInvestasi_BoxMetodePembayaran } from "./transaksi/box_metode_pembayaran";
-import { ComponentInvestasi_BoxPembelian } from "./transaksi/box_pembelian";
-import { ComponentInvestasi_ProsesAccAdmin } from "./transaksi/proses_acc_admin";
-import { ComponentInvestasi_ViewInvoice } from "./transaksi/view_invoice";
+import { Investasi_ComponentCardBeranda } from "./main/comp_card_beranda";
+import { Investasi_ComponentFooterMain } from "./main/comp_footer_main";
+import { Investasi_ComponentButtonUpdateBeranda } from "./main/comp_update_beranda";
 
-export { ComponentInvestasi_BoxPembelian };
-export { ComponentInvestasi_BoxMetodePembayaran };
-export { ComponentInvestasi_FrameFileView };
-export { ComponentInvestasi_ViewInvoice };
-export { ComponentInvestasi_ProsesAccAdmin };
+export { Investasi_ComponentFooterMain };
+export { Investasi_ComponentCardBeranda };
+export { Investasi_ComponentButtonUpdateBeranda };

src/app_modules/investasi/_component/main/comp_card_beranda.tsx

@@ -0,0 +1,161 @@
+import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { Warna } from "@/app/lib/warna";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  Card,
+  CardSection,
+  AspectRatio,
+  Box,
+  Stack,
+  Title,
+  Progress,
+  Group,
+  Image,
+  Text,
+} from "@mantine/core";
+import { IconCircleCheck, IconXboxX } from "@tabler/icons-react";
+import moment from "moment";
+
+import { MODEL_INVESTASI } from "../../_lib/interface";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+
+export function Investasi_ComponentCardBeranda({
+  data,
+}: {
+  data: MODEL_INVESTASI;
+}) {
+  const router = useRouter();
+  const [isLoadingDetail, setLoadingDetail] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Card
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+          marginInline: "15px",
+        }}
+        onClick={() => {
+          setLoadingDetail(true);
+          setVisible(true);
+          router.push(RouterInvestasi_OLD.detail + `${data?.id}`);
+        }}
+      >
+        <CardSection py={"md"} px={"sm"}>
+          <AspectRatio ratio={1 / 1} mah={250}>
+            <Box style={{ borderRadius: "7px" }}>
+              {data.imagesId ? (
+                <Image
+                  radius={"sm"}
+                  alt="Foto"
+                  src={RouterInvestasi_OLD.api_gambar + `${data?.imagesId}`}
+                  w={200}
+                />
+              ) : (
+                <Image alt="" src={"/aset/no-img.png"} />
+              )}
+            </Box>
+          </AspectRatio>
+        </CardSection>
+
+        <CardSection p={"md"}>
+          <Stack>
+            <Title align="center" order={3}>
+              {data?.title}
+            </Title>
+            {/* <Progress
+                  label={(+e.progress).toFixed(2) + " %"}
+                  value={+e.progress}
+                  color="teal"
+                  size="xl"
+                  radius="xl"
+                /> */}
+            <Progress
+              label={
+                "" +
+                (
+                  ((+data?.totalLembar - +data?.sisaLembar) /
+                    +data?.totalLembar) *
+                  100
+                ).toFixed(1) +
+                "%"
+              }
+              value={
+                +(
+                  ((+data?.totalLembar - +data?.sisaLembar) /
+                    +data?.totalLembar) *
+                  100
+                ).toFixed(1)
+              }
+              color="teal"
+              size="xl"
+              radius="xl"
+            />
+          </Stack>
+        </CardSection>
+
+        <CardSection p={"md"}>
+          <Group position="right">
+            {data?.progress === "100" ? (
+              <Group position="right" spacing={"xs"}>
+                <IconCircleCheck color="green" />
+                <Text
+                  truncate
+                  variant="text"
+                  c={Warna.hijau_tua}
+                  sx={{ fontFamily: "Greycliff CF, sans-serif" }}
+                  ta="center"
+                  fz="md"
+                  fw={700}
+                >
+                  Selesai
+                </Text>
+              </Group>
+            ) : (
+              <Box>
+                {+data?.MasterPencarianInvestor.name -
+                  moment(new Date()).diff(new Date(data?.countDown), "days") <=
+                0 ? (
+                  <Group position="right" spacing={"xs"}>
+                    <IconXboxX color="red" />
+                    <Text
+                      truncate
+                      variant="text"
+                      c={Warna.merah}
+                      sx={{ fontFamily: "Greycliff CF, sans-serif" }}
+                      ta="center"
+                      fz="md"
+                      fw={700}
+                    >
+                      Waktu Habis
+                    </Text>
+                  </Group>
+                ) : (
+                  <Group position="right" spacing={"xs"}>
+                    <Text truncate>Sisa waktu:</Text>
+                    <Text truncate>
+                      {Number(data?.MasterPencarianInvestor.name) -
+                        moment(new Date()).diff(
+                          new Date(data?.countDown),
+                          "days"
+                        )}
+                    </Text>
+                    <Text truncate>Hari</Text>
+                  </Group>
+                )}
+              </Box>
+            )}
+          </Group>
+        </CardSection>
+        {visible ? <ComponentGlobal_CardLoadingOverlay /> : ""}
+      </Card>
+    </>
+  );
+}

src/app_modules/investasi/_component/main/comp_footer_main.tsx

@@ -0,0 +1,73 @@
+import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { SimpleGrid, Stack, ActionIcon, Text } from "@mantine/core";
+import {
+  IconChartHistogram,
+  IconChartPie,
+  IconCash,
+  IconNotes,
+} from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_investas_menu } from "../../g_state";
+
+const listFooter = [
+  {
+    id: 1,
+    name: "Bursa",
+    route: RouterInvestasi_OLD.main,
+    icon: <IconChartHistogram />,
+  },
+  {
+    id: 2,
+    name: "Portofolio",
+    route: RouterInvestasi_OLD.main_porto,
+    icon: <IconChartPie />,
+  },
+  {
+    id: 3,
+    name: "Saham Saya",
+    route: RouterInvestasi_OLD.main_investasi,
+    icon: <IconCash />,
+  },
+  {
+    id: 4,
+    name: "Transaksi",
+    route: RouterInvestasi_OLD.main_transaksi,
+    icon: <IconNotes />,
+  },
+];
+
+export function Investasi_ComponentFooterMain() {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_investas_menu);
+
+  return (
+    <>
+      <SimpleGrid cols={listFooter.length} h={"9vh"} mx={"xs"}>
+        {listFooter.map((e, i) => (
+          <Stack key={i} align="center" justify="center" spacing={0}>
+            <ActionIcon
+              // disabled={e.path === "" ? true : false}
+              variant="transparent"
+              c={hotMenu === i ? MainColor.yellow : "white"}
+              onClick={() => {
+                router.push(e.route);
+                setHotMenu(i);
+              }}
+            >
+              {e.icon}
+            </ActionIcon>
+            <Text
+              c={hotMenu === i ? MainColor.yellow : "white"}
+              fz={"xs"}
+              lineClamp={1}
+            >
+              {e.name}
+            </Text>
+          </Stack>
+        ))}
+      </SimpleGrid>
+    </>
+  );
+}

src/app_modules/investasi/_component/main/comp_update_beranda.tsx

@@ -0,0 +1,52 @@
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { Affix, Button, Center, rem } from "@mantine/core";
+import { useState } from "react";
+import { investasi_funGetAllPublish } from "../../fun/get_all_investasi";
+import { data } from "autoprefixer";
+
+export function Investasi_ComponentButtonUpdateBeranda({
+  onLoadData,
+}: {
+  onLoadData: (val: any) => void;
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function onLoaded() {
+    try {
+      await investasi_funGetAllPublish({ page: 1 });
+    } catch (error) {
+      console.log(error);
+    } finally {
+      const loadData = await investasi_funGetAllPublish({ page: 1 });
+
+      onLoadData({
+        data: loadData,
+        isNewPost: false,
+      });
+    }
+
+    setIsLoading(true);
+  }
+
+  return (
+    <>
+      <Affix position={{ top: rem(100) }} w={"100%"}>
+        <Center>
+          <Button
+            style={{
+              transition: "0.5s",
+              border: `1px solid ${AccentColor.skyblue}`,
+            }}
+            bg={AccentColor.blue}
+            loaderPosition="center"
+            loading={isLoading ? true : false}
+            radius={"xl"}
+            onClick={() => onLoaded()}
+          >
+            Update beranda
+          </Button>
+        </Center>
+      </Affix>
+    </>
+  );
+}

src/app_modules/investasi/_component/transaksi/box_metode_pembayaran.tsx

@@ -1,86 +0,0 @@
-import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import { Button, Paper, Radio, Stack, Text, Title } from "@mantine/core";
-import { useLocalStorage } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-
-export function ComponentInvestasi_BoxMetodePembayaran({
-  listBank,
-}: {
-  listBank: any[];
-}) {
-  const router = useRouter();
-  const [bank, setBank] = useState(listBank);
-  const [pilihBank, setPilihBank] = useState("");
-  const [isLoading, setLoading] = useState(false);
-  const [total, setTotal] = useLocalStorage({
-    key: "total_investasi",
-    defaultValue: 0,
-  });
-
-  async function onProses() {
-    router.push(NEW_RouterInvestasi.invoice + "1", { scroll: false });
-  }
-
-  return (
-    <>
-      <Stack>
-        <Radio.Group
-          value={pilihBank}
-          onChange={setPilihBank}
-          withAsterisk
-          color="yellow"
-        >
-          {bank.map((e, i) => (
-            <Paper
-              key={e.id}
-              style={{
-                backgroundColor: AccentColor.blue,
-                border: `2px solid ${AccentColor.darkblue}`,
-                padding: "15px",
-                cursor: "pointer",
-                borderRadius: "10px",
-                color: "white",
-                marginBottom: "15px",
-              }}
-            >
-              <Radio
-                styles={{
-                  radio: {
-                    color: "yellow",
-                  },
-                }}
-                value={e.id}
-                label={
-                  <Title order={6} color="white">
-                    {e.name}
-                  </Title>
-                }
-              />
-            </Paper>
-          ))}
-        </Radio.Group>
-
-        <Button
-          disabled={pilihBank === "" ? true : false}
-          style={{ transition: "0.5s" }}
-          loaderPosition="center"
-          loading={isLoading ? true : false}
-          radius={"xl"}
-          onClick={() => {
-            onProses();
-          }}
-          bg={MainColor.yellow}
-          color="yellow"
-          c={"black"}
-        >
-          Pilih
-        </Button>
-      </Stack>
-    </>
-  );
-}

src/app_modules/investasi/_component/transaksi/box_pembelian.tsx

@@ -1,136 +0,0 @@
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import {
-  Box,
-  Button,
-  Center,
-  Divider,
-  Group,
-  NumberInput,
-  Text,
-  TextInput,
-} from "@mantine/core";
-import { useFocusTrap, useLocalStorage } from "@mantine/hooks";
-import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { MODEL_INVESTASI } from "../../_lib/interface";
-import { gs_investas_menu } from "../../g_state";
-import { NEW_RouterInvestasi } from "../../../../app/lib/router_hipmi/router_investasi";
-
-export function ComponentInvestasi_BoxPembelian({
-  dataInvestasi,
-}: {
-  dataInvestasi: MODEL_INVESTASI;
-}) {
-  const router = useRouter();
-  const focusTrapRef = useFocusTrap();
-  const [data, setData] = useState(dataInvestasi);
-  const [maxPembelian, setMaxPembelian] = useState(Number(data.sisaLembar));
-  const [total, setTotal] = useLocalStorage({
-    key: "total_investasi",
-    defaultValue: 0,
-  });
-  const [jumlah, setJumlah] = useLocalStorage({
-    key: "jumlah_investasi",
-    defaultValue: 0,
-  });
-  const [hotmenu, setHotmenu] = useAtom(gs_investas_menu);
-
-  return (
-    <>
-      <Box
-        style={{
-          padding: "15px",
-          backgroundColor: AccentColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-          borderRadius: "10px",
-          color: "white",
-          marginBottom: "15px",
-        }}
-      >
-        {/* Sisa Lembar Saham */}
-        <Group position="apart" mb={"md"}>
-          <Text>Sisa Lembar Saham</Text>
-          <Text fz={23}>
-            {new Intl.NumberFormat("id-ID", {
-              maximumFractionDigits: 10,
-            }).format(+data.sisaLembar)}{" "}
-          </Text>
-        </Group>
-
-        {/* Harga perlembar saham */}
-        <Group position="apart" mb={"md"}>
-          <Text>Harga Perlembar</Text>
-          <Text fz={23}>
-            Rp.{" "}
-            {new Intl.NumberFormat("id-ID", {
-              maximumFractionDigits: 10,
-            }).format(+data.hargaLembar)}{" "}
-          </Text>
-        </Group>
-
-        {/* Lembar saham */}
-        <Group position="apart" mb={"md"}>
-          <Box>
-            <Text>Jumlah Pembelian</Text>
-            <Text c={"blue"} fs={"italic"} fz={10}>
-              minimal pembelian 10 lembar
-            </Text>
-          </Box>
-          <NumberInput
-            type="number"
-            ref={focusTrapRef}
-            w={100}
-            max={maxPembelian}
-            min={0}
-            value={jumlah}
-            onChange={(val: any) => {
-              setTotal(val * +data.hargaLembar);
-              setJumlah(val);
-              // console.log(val);
-            }}
-          />
-        </Group>
-
-        <Divider my={"lg"} />
-
-        <Group position="apart" mb={"md"}>
-          <Box>
-            <Text>Total Harga</Text>
-          </Box>
-          <Text fz={25}>
-            Rp.{" "}
-            {new Intl.NumberFormat("id-ID", {
-              maximumFractionDigits: 10,
-            }).format(total)}
-          </Text>
-        </Group>
-
-        <Center>
-          <Button
-            disabled={jumlah < 10}
-            w={350}
-            radius={50}
-            onClick={() => {
-              // onProses();
-              router.push(NEW_RouterInvestasi.metode_pembayaran + data.id, {
-                scroll: false,
-              });
-            }}
-            bg={MainColor.yellow}
-            color="yellow"
-            c={"black"}
-            style={{
-              transition: "0.5s",
-            }}
-          >
-            Beli
-          </Button>
-        </Center>
-      </Box>
-    </>
-  );
-}

src/app_modules/investasi/_component/transaksi/proses_acc_admin.tsx

@@ -1,101 +0,0 @@
-import { Warna } from "@/app/lib/warna";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import {
-  Stack,
-  Paper,
-  Title,
-  Center,
-  Loader,
-  Group,
-  Text,
-} from "@mantine/core";
-import { IconBrandWhatsapp } from "@tabler/icons-react";
-import Link from "next/link";
-
-export function ComponentInvestasi_ProsesAccAdmin() {
-  return (
-    <>
-      <Stack>
-        <Paper
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-          }}
-        >
-          <Stack spacing={"md"}>
-            <Paper
-              style={{
-                backgroundColor: MainColor.darkblue,
-                border: `2px solid ${AccentColor.darkblue}`,
-                padding: "15px",
-                cursor: "pointer",
-                borderRadius: "10px",
-                color: "white",
-              }}
-            >
-              <Stack align="center" justify="center">
-                <Title order={6}>Admin sedang memproses transaksimu</Title>
-                <Paper radius={1000} w={100} h={100}>
-                  <Center h={"100%"}>
-                    <Loader size={"lg"} color="yellow" variant="bars" />
-                  </Center>
-                </Paper>
-                <Title order={6}>Mohon menunggu !</Title>
-              </Stack>
-            </Paper>
-          </Stack>
-        </Paper>
-        <Paper
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-          }}
-        >
-          <Paper
-            style={{
-              backgroundColor: AccentColor.darkblue,
-              border: `2px solid ${AccentColor.darkblue}`,
-              padding: "15px",
-              cursor: "pointer",
-              borderRadius: "10px",
-              color: "white",
-            }}
-          >
-            <Group position="center">
-              <Stack spacing={0}>
-                <Text fz={"xs"} fs={"italic"}>
-                  Hubungi admin jika tidak kunjung di proses!
-                </Text>
-                <Text fz={"xs"} fs={"italic"}>
-                  Klik pada logo Whatsapp ini.
-                </Text>
-              </Stack>
-              {/* <Link
-                  color="white"
-                  style={{
-                    color: "black",
-                    textDecoration: "none",
-                  }}
-                  target="_blank"
-                  href={`https://wa.me/+${nomorAdmin.nomor}?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!`}
-                >
-                  <IconBrandWhatsapp size={40} color={Warna.hijau_cerah} />
-                </Link> */}
-            </Group>
-          </Paper>
-        </Paper>
-      </Stack>
-    </>
-  );
-}

src/app_modules/investasi/_component/transaksi/view_invoice.tsx

@@ -1,267 +0,0 @@
-"use client";
-
-import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
-import {
-  Stack,
-  Title,
-  Group,
-  Paper,
-  Grid,
-  CopyButton,
-  Button,
-  Center,
-  FileButton,
-  Text,
-} from "@mantine/core";
-import { IconCamera, IconCircleCheck } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-
-export function ComponentInvestasi_ViewInvoice({
-  dataInvoice,
-}: {
-  dataInvoice: any;
-}) {
-  const router = useRouter();
-  const [invoice, setDataInvoice] = useState(dataInvoice);
-  const [file, setFile] = useState<File | null>(null);
-  const [image, setImage] = useState<any | null>(null);
-  // const [active, setActive] = useAtom(gs_donasi_hot_menu);
-
-  return (
-    <>
-      <Stack spacing={"lg"} py={"md"}>
-        <Stack
-          spacing={0}
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-          }}
-        >
-          <Title order={5}>Mohon transfer ke rekening dibawah</Title>
-          <Group spacing={"xs"}>
-            <Text>untuk diteruskan ke </Text>
-            <Text fw={"bold"}>{invoice?.Donasi?.Author.username}</Text>
-          </Group>
-        </Stack>
-
-        <Paper
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-            marginBottom: "15px",
-          }}
-        >
-          <Stack spacing={"md"}>
-            <Stack spacing={0}>
-              <Text>Bank {invoice?.DonasiMaster_Bank?.name}</Text>
-              <Text>PT. Himpunan Pengusaha Badung</Text>
-            </Stack>
-            <Paper
-              style={{
-                backgroundColor: AccentColor.darkblue,
-                border: `2px solid ${AccentColor.blue}`,
-                padding: "15px",
-                cursor: "pointer",
-                borderRadius: "10px",
-                color: "white",
-              }}
-            >
-              <Grid>
-                <Grid.Col span={8}>
-                  <Group position="left" align="center" h={"100%"}>
-                    <Title order={4} color={MainColor.yellow}>
-                      {invoice?.DonasiMaster_Bank?.norek}
-                    </Title>
-                  </Group>
-                </Grid.Col>
-                <Grid.Col span={4}>
-                  <Group position="right">
-                    <CopyButton value={invoice?.DonasiMaster_Bank?.norek}>
-                      {({ copied, copy }) => (
-                        <Button
-                          style={{
-                            transition: "0.5s",
-                          }}
-                          radius={"xl"}
-                          onClick={copy}
-                          color={copied ? "teal" : "yellow"}
-                          c={"black"}
-                        >
-                          {copied ? "Berhasil" : "Salin"}
-                        </Button>
-                      )}
-                    </CopyButton>
-                  </Group>
-                </Grid.Col>
-              </Grid>
-            </Paper>
-          </Stack>
-        </Paper>
-
-        <Paper
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-            marginBottom: "15px",
-          }}
-        >
-          <Stack spacing={"md"}>
-            <Stack spacing={0}>
-              <Text>Jumlah transfer</Text>
-            </Stack>
-            <Paper
-              style={{
-                backgroundColor: AccentColor.darkblue,
-                border: `2px solid ${AccentColor.blue}`,
-                padding: "15px",
-                cursor: "pointer",
-                borderRadius: "10px",
-                color: "white",
-              }}
-            >
-              <Grid>
-                <Grid.Col span={8}>
-                  <Group position="left" align="center" h={"100%"}>
-                    <Title order={4} color="white">
-                      <TampilanRupiahDonasi nominal={+(+invoice.nominal)} />
-                    </Title>
-                  </Group>
-                </Grid.Col>
-                <Grid.Col span={4}>
-                  <Group position="right">
-                    <CopyButton value={"" + +invoice.nominal}>
-                      {({ copied, copy }) => (
-                        <Button
-                          style={{
-                            transition: "0.5s",
-                          }}
-                          variant="filled"
-                          radius={"xl"}
-                          color={copied ? "teal" : "yellow"}
-                          c={"black"}
-                          onClick={copy}
-                        >
-                          {copied ? "Berhasil" : "Salin"}
-                        </Button>
-                      )}
-                    </CopyButton>
-                  </Group>
-                </Grid.Col>
-              </Grid>
-            </Paper>
-            {/* <Text fz={"xs"} c={"gray"}>
-              Sudah termasuk biaya admin Rp. 2.500,-
-            </Text> */}
-          </Stack>
-        </Paper>
-
-        <Paper
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-            marginBottom: "15px",
-          }}
-        >
-          <Stack spacing={"sm"}>
-            <Center>
-              <FileButton
-                onChange={async (files: any | null) => {
-                  try {
-                    // const buffer = URL.createObjectURL(
-                    //   new Blob([new Uint8Array(await files.arrayBuffer())])
-                    // );
-                    // console.log(buffer, "ini buffer");
-                    // console.log(files, " ini file");
-                    setFile(files);
-                    // onUpload(invoice.id, files);
-                  } catch (error) {
-                    console.log(error);
-                  }
-                }}
-                accept="image/png,image/jpeg"
-              >
-                {(props) => (
-                  <Button
-                    {...props}
-                    radius={"xl"}
-                    leftIcon={<IconCamera />}
-                    bg={MainColor.yellow}
-                    color="yellow"
-                    c={"black"}
-                  >
-                    Upload
-                  </Button>
-                )}
-              </FileButton>
-            </Center>
-            {file ? (
-              <Center>
-                <Group spacing={"xs"}>
-                  <Text fz={"xs"} fs={"italic"}>
-                    Upload berhasil{" "}
-                  </Text>
-                  <IconCircleCheck color="green" />
-                </Group>
-              </Center>
-            ) : (
-              <Center>
-                <Text fz={"xs"} fs={"italic"}>
-                  Upload bukti transfer anda !
-                </Text>
-              </Center>
-            )}
-          </Stack>
-        </Paper>
-
-        {file !== null ? (
-          <Button
-            radius={"xl"}
-            bg={MainColor.yellow}
-            color="yellow"
-            c={"black"}
-            // onClick={() => onClick(router, invoice.id, setActive)}
-            onClick={() => {
-              router.push(NEW_RouterInvestasi.proses_transaksi + "1", {
-                scroll: false,
-              });
-            }}
-          >
-            Saya Sudah Transfer
-          </Button>
-        ) : (
-          <Button
-            disabled
-            radius={"xl"}
-            //  bg={"orange"}
-            //  color="orange"
-            //  onClick={() => onClick(router, invoice.id)}
-          >
-            Menunggu Bukti Transfer
-          </Button>
-        )}
-      </Stack>
-    </>
-  );
-}