Payment gateaway

# fix - Alur setelah pembayaran ### Issue: - Payment notif akan di perbaharui
2023-12-14 10:19:40 +08:00
parent 693bb65710
commit 8ee62b875d
15 changed files with 549 additions and 367 deletions
--- a/src/app/dev/investasi/detail/[id]/page.tsx
+++ b/src/app/dev/investasi/detail/[id]/page.tsx
@@ -7,6 +7,7 @@ import fs from "fs";
 import { cookies } from "next/headers";
 import { unsealData } from "iron-session";
 import funProgressBar from "@/app_modules/investasi/fun/fun_progress_bar";
+import funTotalInvestorByIdInvestasi from "@/app_modules/investasi/fun/fun_total_investor_by_id";
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());

 export default async function Page({ params }: { params: { id: string } }) {
@@ -25,6 +26,8 @@ export default async function Page({ params }: { params: { id: string } }) {
  let beli = Number(dataInvestasi?.lembarTerbeli)
  const progress = await funProgressBar(total, beli)

+  const totalInvestor = await funTotalInvestorByIdInvestasi(dataInvestasi?.id)
+
  return (
    <>
      <DetailInvestasi
@@ -32,6 +35,7 @@ export default async function Page({ params }: { params: { id: string } }) {
        dataUser={dataUser as any}
        loginUserId={loginUserId}
        progress={progress}
+        totalInvestor={totalInvestor}
      />
    </>
  );
--- a/src/app/dev/investasi/main/page.tsx
+++ b/src/app/dev/investasi/main/page.tsx
@@ -1,4 +1,5 @@
 import { MainInvestasi } from "@/app_modules/investasi";
+import funTotalInvestorByIdInvestasi from "@/app_modules/investasi/fun/fun_total_investor_by_id";
 import { getListAllPublish } from "@/app_modules/investasi/fun/get_list_all_publish";
 import getPembagianDeviden from "@/app_modules/investasi/fun/master/get_pembagian_deviden";
 import getPencarianInvestor from "@/app_modules/investasi/fun/master/get_pencarian_investor";
@@ -10,8 +11,6 @@ export default async function Page() {
  const periodeDeviden = await getPeriodeDeviden();
  const pembagianDeviden = await getPembagianDeviden();

-  
-
  // console.log(data)
  return (
    <>
--- a/src/app_modules/investasi/detail/view.tsx
+++ b/src/app_modules/investasi/detail/view.tsx
@@ -34,17 +34,20 @@ import { MODEL_User_profile } from "@/app_modules/home/models/user_profile";
 import { RouterUserProfile } from "@/app/lib/router_hipmi/router_user_profile";
 import { gs_TransferValue } from "../g_state";
 import { useAtom } from "jotai";
+import _ from "lodash";

 export default function DetailInvestasi({
  dataInvestasi,
  dataUser,
  loginUserId,
-  progress
+  progress,
+  totalInvestor
 }: {
  dataInvestasi: MODEL_Investasi;
  dataUser: MODEL_User_profile;
  loginUserId: string;
-  progress: number
+  progress: number;
+  totalInvestor: number
 }) {
  const router = useRouter();
  const [investasi, setInvestasi] = useState(dataInvestasi);
@@ -81,7 +84,6 @@ export default function DetailInvestasi({
      nomorRekening: "",
      totalTransfer: "",
    });
-    
  }

  return (
@@ -89,16 +91,19 @@ export default function DetailInvestasi({
      {/* Foto username dan sisa waktu */}
      <Group position="apart" mb={"md"}>
        <Flex align={"center"} gap={"xs"}>
-          <Avatar
-            radius={50}
-            src={
-              RouterUserProfile.api_foto + `${user.Profile?.ImageProfile?.url}`
-            }
-          />
+          <Avatar radius={"xl"} bg={"gray"}>
+            {(() => {
+              const usr = investasi.author.username;
+              const splt = usr.split("");
+              const Up = _.upperCase(splt[0]);
+
+              return Up;
+            })()}
+          </Avatar>
          <Text>{user.username}</Text>
        </Flex>
        {Number(investasi.MasterPencarianInvestor.name) -
-          moment(new Date()).diff(new Date(investasi.updatedAt), "days") <=
+          moment(new Date()).diff(new Date(investasi.countDown), "days") <=
        0 ? (
          <Group position="right">
            <IconCircleCheck color="green" />
@@ -109,7 +114,7 @@ export default function DetailInvestasi({
            <Text>Sisa waktu:</Text>
            <Text>
              {Number(investasi.MasterPencarianInvestor.name) -
-                moment(new Date()).diff(new Date(investasi.updatedAt), "days")}
+                moment(new Date()).diff(new Date(investasi.countDown), "days")}
            </Text>
            <Text>Hari</Text>
          </Group>
@@ -131,12 +136,25 @@ export default function DetailInvestasi({
          {investasi.title}
        </Title>
        <Progress
-          label={`${progress} %`}
-          value={progress}
+          label={
+            "" +
+            (
+              ((+investasi.totalLembar - +investasi.sisaLembar) /
+                +investasi.totalLembar) *
+              100
+            ).toFixed(1) +
+            "%"
+          }
+          value={
+            +(
+              ((+investasi.totalLembar - +investasi.sisaLembar) /
+                +investasi.totalLembar) *
+              100
+            ).toFixed(1)
+          }
          color="teal"
          size="xl"
          radius="xl"
-          animate
        />
      </Box>

@@ -146,15 +164,21 @@ export default function DetailInvestasi({
          <Stack>
            <Box>
              <Text>Dana Dibutuhkan</Text>
-              <Text>Rp. {new Intl.NumberFormat("id-ID", {
+              <Text>
+                Rp.{" "}
+                {new Intl.NumberFormat("id-ID", {
                  maximumSignificantDigits: 10,
-                }).format(+investasi.targetDana)}</Text>
+                }).format(+investasi.targetDana)}
+              </Text>
            </Box>
            <Box>
              <Text>Harga Per Lembar</Text>
-              <Text>Rp. {new Intl.NumberFormat("id-ID", {
+              <Text>
+                Rp.{" "}
+                {new Intl.NumberFormat("id-ID", {
                  maximumSignificantDigits: 10,
-                }).format(+investasi.hargaLembar)}</Text>
+                }).format(+investasi.hargaLembar)}
+              </Text>
            </Box>
            <Box>
              <Text>Jadwal Pembagian</Text>
@@ -168,21 +192,31 @@ export default function DetailInvestasi({
        </Grid.Col>
        <Grid.Col span={6}>
          <Stack>
+          <Box>
+              <Text>Investor</Text>
+              <Text>{new Intl.NumberFormat("id-ID", {maximumSignificantDigits: 10}).format(totalInvestor)}</Text>
+            </Box>
            <Box>
              <Text>ROI</Text>
              <Text>{investasi.roi}%</Text>
            </Box>
            <Box>
              <Text>Total Lembar</Text>
-              <Text>{new Intl.NumberFormat("id-ID", {
+              <Text>
+                {new Intl.NumberFormat("id-ID", {
                  maximumSignificantDigits: 10,
-                }).format(+investasi.totalLembar)} lembar</Text>
+                }).format(+investasi.totalLembar)}{" "}
+                lembar
+              </Text>
            </Box>
            <Box>
              <Text>Sisa Lembar</Text>
-              <Text>{new Intl.NumberFormat("id-ID", {
+              <Text>
+                {new Intl.NumberFormat("id-ID", {
                  maximumSignificantDigits: 10,
-                }).format(+investasi.sisaLembar)} lembar</Text>
+                }).format(+investasi.sisaLembar)}{" "}
+                lembar
+              </Text>
            </Box>
          </Stack>
        </Grid.Col>
@@ -221,7 +255,7 @@ export default function DetailInvestasi({
            w={350}
            bg={Warna.biru}
            onClick={() => {
-             onSubmit()
+              onSubmit();
            }}
          >
            Beli Saham
--- a/src/app_modules/investasi/detail_portofolio/publish/page.tsx
+++ b/src/app_modules/investasi/detail_portofolio/publish/page.tsx
@@ -66,9 +66,9 @@ export default function DetailPublishInvestasi({
  return (
    <>
      {Number(investasi.MasterPencarianInvestor.name) -
-        moment(new Date()).diff(new Date(investasi.updatedAt), "days") <=
+        moment(new Date()).diff(new Date(investasi.countDown), "days") <=
      0 ? (
-        <Group position="right">
+        <Group position="center" mb={"sm"}>
          <IconCircleCheck color="green" />
          <Text c={"green"}>Selesai</Text>
        </Group>
@@ -78,7 +78,7 @@ export default function DetailPublishInvestasi({
            Sisa waktu :{" "}
            {Number(investasi.MasterPencarianInvestor.name) -
              moment(new Date()).diff(
-                new Date(investasi.updatedAt),
+                new Date(investasi.countDown),
                "days"
              )}{" "}
            hari
@@ -100,7 +100,27 @@ export default function DetailPublishInvestasi({
        <Title order={4} mb={"xs"}>
          {investasi.title}
        </Title>
-        <Progress color="lime" radius="xl" size="xl" value={0} label="0 %" />
+        <Progress
+          label={
+            "" +
+            (
+              ((+investasi.totalLembar - +investasi.sisaLembar) /
+                +investasi.totalLembar) *
+              100
+            ).toFixed(1) +
+            "%"
+          }
+          value={
+            +(
+              ((+investasi.totalLembar - +investasi.sisaLembar) /
+                +investasi.totalLembar) *
+              100
+            ).toFixed(1)
+          }
+          color="teal"
+          size="xl"
+          radius="xl"
+        />
      </Box>

      {/* Rincian Data */}
--- a/src/app_modules/investasi/detail_saham_terbeli/view.tsx
+++ b/src/app_modules/investasi/detail_saham_terbeli/view.tsx
@@ -31,13 +31,14 @@ import { useRouter } from "next/navigation";
 import { MODEL_Transaksi_Investasi } from "../model/model_investasi";
 import { useState } from "react";
 import moment from "moment";
+import _ from "lodash";

 export default function DetailSahamTerbeli({
  dataTransaksi,
-  investor
+  investor,
 }: {
  dataTransaksi: MODEL_Transaksi_Investasi;
-  investor: number
+  investor: number;
 }) {
  const router = useRouter();
  const [investasi, setINvestasi] = useState(dataTransaksi);
@@ -61,11 +62,20 @@ export default function DetailSahamTerbeli({
      route: RouterInvestasi.berita,
    },
  ];
+
  return (
    <>
      <Group position="apart" mb={"md"}>
        <Flex align={"center"} gap={"xs"}>
-          <Avatar src={"/aset/avatar.png"} />
+          <Avatar radius={"xl"} bg={"gray"}>
+            {(() => {
+              const usr = investasi.Investasi.author.username;
+              const splt = usr.split("");
+              const Up = _.upperCase(splt[0]);
+
+              return Up;
+            })()}
+          </Avatar>
          <Text>{investasi.Investasi.author.username}</Text>
        </Flex>
        {(() => {
@@ -86,15 +96,53 @@ export default function DetailSahamTerbeli({
            return (
              <>
                <Group position="right" spacing={"xs"}>
-                  <Text>Sisa waktu:</Text>
-                  <Text>
-                    {Number(investasi.Investasi.MasterPencarianInvestor.name) -
-                      moment(new Date()).diff(
-                        new Date(investasi.Investasi.countDown),
-                        "days"
-                      )}{" "}
-                    Hari
-                  </Text>
+                  {(() => {
+                    if (
+                      Number(investasi.Investasi.MasterPencarianInvestor.name) -
+                        moment(new Date()).diff(
+                          new Date(investasi.Investasi.countDown),
+                          "days"
+                        ) <=
+                      0
+                    ) {
+                      return (
+                        <>
+                          <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}
+                            >
+                              Waktu Habis
+                            </Text>
+                          </Group>
+                        </>
+                      );
+                    } else {
+                      return (
+                        <>
+                          <Group position="right" spacing={"xs"}>
+                            <Text>Sisa waktu:</Text>
+                            <Text truncate>
+                              {Number(
+                                investasi.Investasi.MasterPencarianInvestor.name
+                              ) -
+                                moment(new Date()).diff(
+                                  new Date(investasi.Investasi.countDown),
+                                  "days"
+                                )}
+                            </Text>
+                            <Text truncate>Hari</Text>
+                          </Group>
+                        </>
+                      );
+                    }
+                  })()}
                </Group>
              </>
            );
@@ -105,7 +153,10 @@ export default function DetailSahamTerbeli({
      {/* Gambar Investasi */}
      <Paper withBorder mb={"md"}>
        <AspectRatio ratio={16 / 9}>
-          <Image alt="" src={RouterInvestasi.api_gambar + `${investasi.Investasi.imagesId}`} />
+          <Image
+            alt=""
+            src={RouterInvestasi.api_gambar + `${investasi.Investasi.imagesId}`}
+          />
        </AspectRatio>
      </Paper>

@@ -115,26 +166,28 @@ export default function DetailSahamTerbeli({
          {investasi.Investasi.title}
        </Title>
        <Progress
-                label={
-                  "" +
-                  (
-                    ((+investasi.Investasi.totalLembar - +investasi.Investasi.sisaLembar) /
-                      +investasi.Investasi.totalLembar) *
-                    100
-                  ).toFixed(1) +
-                  "%"
-                }
-                value={
-                  +(
-                    ((+investasi.Investasi.totalLembar - +investasi.Investasi.sisaLembar) /
-                    +investasi.Investasi.totalLembar) *
-                  100
-                  ).toFixed(2)
-                }
-                color="teal"
-                size="xl"
-                radius="xl"
-              />
+          label={
+            "" +
+            (
+              ((+investasi.Investasi.totalLembar -
+                +investasi.Investasi.sisaLembar) /
+                +investasi.Investasi.totalLembar) *
+              100
+            ).toFixed(1) +
+            "%"
+          }
+          value={
+            +(
+              ((+investasi.Investasi.totalLembar -
+                +investasi.Investasi.sisaLembar) /
+                +investasi.Investasi.totalLembar) *
+              100
+            ).toFixed(2)
+          }
+          color="teal"
+          size="xl"
+          radius="xl"
+        />
      </Box>

      {/* Rincian Data */}
@@ -147,19 +200,27 @@ export default function DetailSahamTerbeli({
            </Box> */}
            <Box>
              <Text>Dana Dibutuhkan</Text>
-              <Text>Rp. {new Intl.NumberFormat("id-ID", {
+              <Text>
+                Rp.{" "}
+                {new Intl.NumberFormat("id-ID", {
                  maximumSignificantDigits: 10,
-                }).format(+investasi.Investasi.targetDana)}</Text>
+                }).format(+investasi.Investasi.targetDana)}
+              </Text>
            </Box>
            <Box>
              <Text>Harga Per Lembar</Text>
-              <Text>Rp. {new Intl.NumberFormat("id-ID", {
+              <Text>
+                Rp.{" "}
+                {new Intl.NumberFormat("id-ID", {
                  maximumSignificantDigits: 10,
-                }).format(+investasi.Investasi.hargaLembar)}</Text>
+                }).format(+investasi.Investasi.hargaLembar)}
+              </Text>
            </Box>
            <Box>
              <Text>Jadwal Pembagian</Text>
-              <Text>{investasi.Investasi.MasterPembagianDeviden.name} bulan </Text>
+              <Text>
+                {investasi.Investasi.MasterPembagianDeviden.name} bulan{" "}
+              </Text>
            </Box>
            <Box>
              <Text>Pembagian Deviden</Text>
@@ -171,7 +232,7 @@ export default function DetailSahamTerbeli({
          <Stack>
            <Box>
              <Text>Investor</Text>
-              <Text>{investor} pengguna</Text>
+              <Text>{new Intl.NumberFormat("id-ID", {maximumSignificantDigits: 10}).format(investor)} </Text>
            </Box>
            <Box>
              <Text>ROI</Text>
@@ -179,15 +240,21 @@ export default function DetailSahamTerbeli({
            </Box>
            <Box>
              <Text>Total Lembar</Text>
-              <Text>{new Intl.NumberFormat("id-ID", {
+              <Text>
+                {new Intl.NumberFormat("id-ID", {
                  maximumSignificantDigits: 10,
-                }).format(+investasi.Investasi.totalLembar)} lembar</Text>
+                }).format(+investasi.Investasi.totalLembar)}{" "}
+                lembar
+              </Text>
            </Box>
            <Box>
              <Text>Sisa Lembar</Text>
-              <Text>{new Intl.NumberFormat("id-ID", {
+              <Text>
+                {new Intl.NumberFormat("id-ID", {
                  maximumSignificantDigits: 10,
-                }).format(+investasi.Investasi.sisaLembar)} lembar</Text>
+                }).format(+investasi.Investasi.sisaLembar)}{" "}
+                lembar
+              </Text>
            </Box>
          </Stack>
        </Grid.Col>
@@ -205,9 +272,12 @@ export default function DetailSahamTerbeli({
            <Stack>
              <Box>
                <Text>Total Pembelian</Text>
-                <Text>Rp. {new Intl.NumberFormat("id-ID", {
-                  maximumSignificantDigits: 10,
-                }).format(+investasi.gross_amount)}</Text>
+                <Text>
+                  Rp.{" "}
+                  {new Intl.NumberFormat("id-ID", {
+                    maximumSignificantDigits: 10,
+                  }).format(+investasi.gross_amount)}
+                </Text>
              </Box>
            </Stack>
          </Grid.Col>
@@ -215,9 +285,12 @@ export default function DetailSahamTerbeli({
            <Stack>
              <Box>
                <Text>Lembar Dibeli</Text>
-                <Text>{new Intl.NumberFormat("id-ID", {
-                  maximumSignificantDigits: 10,
-                }).format(+investasi.quantity)} lembar</Text>
+                <Text>
+                  {new Intl.NumberFormat("id-ID", {
+                    maximumSignificantDigits: 10,
+                  }).format(+investasi.quantity)}{" "}
+                  lembar
+                </Text>
              </Box>
            </Stack>
          </Grid.Col>
--- a/src/app_modules/investasi/fun/fun_total_investor_by_id.ts
+++ b/src/app_modules/investasi/fun/fun_total_investor_by_id.ts
@@ -2,7 +2,7 @@

 import prisma from "@/app/lib/prisma";

-export default async function funTotalInvestorByIdInvestasi(id: string) {
+export default async function funTotalInvestorByIdInvestasi(id: any) {
  // console.log(id)
  const data = await prisma.transaksiInvestasi.count({
    where: {
--- a/src/app_modules/investasi/fun/get_list_all_publish.ts
+++ b/src/app_modules/investasi/fun/get_list_all_publish.ts
@@ -5,7 +5,7 @@ import prisma from "@/app/lib/prisma";
 export async function getListAllPublish() {
  const data = await prisma.investasi.findMany({
    orderBy: {
-      updatedAt: "desc",
+      countDown: "asc",
    },
    where: {
      MasterStatusInvestasi: {
--- a/src/app_modules/investasi/fun/get_list_transaksi_berhasil_by_id.ts
+++ b/src/app_modules/investasi/fun/get_list_transaksi_berhasil_by_id.ts
@@ -7,7 +7,7 @@ export default async function getListTransaksiBerhasilInvestasi(
 ) {
  const data = await prisma.transaksiInvestasi.findMany({
    orderBy: {
-      createdAt: "desc"
+      createdAt: "desc",
    },
    where: {
      authorId: idAuthor,
@@ -15,7 +15,16 @@ export default async function getListTransaksiBerhasilInvestasi(
    },
    select: {
      id: true,
-      Investasi: true,
+      Investasi: {
+        select: {
+          author: true,
+          imagesId: true,
+          title: true,
+          totalLembar: true,
+          sisaLembar: true,
+          
+        },
+      },
      Author: true,
      gross_amount: true,
      quantity: true,
--- a/src/app_modules/investasi/fun/get_token_transaksi.js
+++ b/src/app_modules/investasi/fun/get_token_transaksi.js
@@ -3,14 +3,6 @@
 import prisma from "@/app/lib/prisma";
 import MidTrans from "midtrans-client";

-// const midtransClient = require("midtrans-client");
-
-// const snap = new midtransClient.Snap({
-//     isProduction: false,
-//     serverKey: process.env.Server_KEY,
-//     clientKey: process.env.Client_KEY,
-//   });
-
 const snap = new MidTrans.Snap({
  isProduction: false,
  serverKey: process.env.Server_KEY,
@@ -58,14 +50,14 @@ export default async function getTokenTransaksi(data) {
      free_text: {
        inquiry: [
          {
-            en: "text in English",
-            id: "text in Bahasa Indonesia",
+            en: "Pay according to the invoice",
+            id: "Bayar sesuai faktur",
          },
        ],
        payment: [
          {
-            en: "text in English",
-            id: "text in Bahasa Indonesia",
+            en: "Pay according to the invoice",
+            id: "Bayar sesuai faktur",
          },
        ],
      },
--- a/src/app_modules/investasi/index.ts
+++ b/src/app_modules/investasi/index.ts
@@ -46,7 +46,7 @@ import CreateBeritaInvestasi from "./create_berita/view";
 import LayoutCreateBeritaInvestasi from "./create_berita/layout";
 import ListEditBeritaInvestasi from "./list_edit_berita/view";
 import LayoutListEditBeritaInvestasi from "./list_edit_berita/layout";
-import InvestasiSahamTerbeli from "./main/saham_saya";
+import InvestasiSahamTerbeli from "./saham_saya/saham_saya";
 import DetailDraftInvestasi from "./detail_portofolio/draft/page";
 import LayoutDetailDraftInvestasi from "./detail_portofolio/draft/layout";
 import DetailReviewInvestasi from "./detail_portofolio/review/page";
--- a/src/app_modules/investasi/main/saham_saya.tsx
+++ b/src/app_modules/investasi/main/saham_saya.tsx
@@ -1,152 +0,0 @@
-"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,
-  Button,
-  Paper,
-  Progress,
-  Center,
-} 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";
-import { MODEL_Transaksi_Investasi } from "../model/model_investasi";
-import { useState } from "react";
-import { Warna } from "@/app/lib/warna";
-
-export default function InvestasiSahamTerbeli({
-  listTransaksi,
-}: {
-  listTransaksi: MODEL_Transaksi_Investasi[];
-}) {
-  const router = useRouter();
-  const [investasi, setInvestasi] = useState(listTransaksi);
-
-  return (
-    <>
-      {/* {investasi.map((e) => (
-        <Card
-          // sx={{ borderStyle: "solid", borderColor: "black", borderWidth: "0.5px" }}
-          radius={"md"}
-          key={e.id}
-          mb={"lg"}
-          bg={"green.3"}
-        >
-          <CardSection p={"md"}>
-            <AspectRatio ratio={16 / 9}>
-              <Paper radius={"md"}>
-                {e.Investasi.imagesId ? (
-                  <Image
-                    alt=""
-                    src={`/api/investasi/gambar/${e.Investasi.imagesId}`}
-                  />
-                ) : (
-                  <Image alt="" src={"/aset/no-img.png"} />
-                )}
-              </Paper>
-            </AspectRatio>
-          </CardSection>
-
-
-          <CardSection p={"lg"}>
-            <Stack>
-              <Center>
-                <Title order={4}>{e.Investasi.title}</Title>
-              </Center>
-              <Progress
-                label={
-                  "" +
-                  (
-                    ((+e.Investasi.totalLembar - +e.Investasi.sisaLembar) /
-                      +e.Investasi.totalLembar) *
-                    100
-                  ).toFixed(1) +
-                  "%"
-                }
-                value={
-                  +(
-                    ((+e.Investasi.totalLembar - +e.Investasi.sisaLembar) /
-                      +e.Investasi.totalLembar) *
-                    100
-                  ).toFixed(2)
-                }
-                color="teal"
-                size="xl"
-                radius="xl"
-              />
-            </Stack>
-          </CardSection>
-
-          <Stack>
-            <CardSection px={"md"}>
-              <Group>
-                <Text>Saham Terbeli :</Text>
-                <Text fz={"xl"} >{new Intl.NumberFormat("id-ID", {maximumFractionDigits: 10}).format(+ e.quantity)} Lembar</Text>
-              </Group>
-              <Group>
-                <Text> Total Pembelian :</Text>
-                <Text fz={"xl"} >Rp. {new Intl.NumberFormat("id-ID", {maximumFractionDigits: 10}).format(+ e.gross_amount)}</Text>
-              </Group>
-            </CardSection>
-
-            <CardSection py={"sm"}>
-              <Group position="center">
-                <Button
-                  radius={"xl"}
-                  compact
-                  bg={Warna.hijau_muda}
-                  color="green"
-                  onClick={() =>
-                    router.push(
-                      RouterInvestasi.detail_saham_terbeli + `${e.id}`
-                    )
-                  }
-                >
-                  Details
-                </Button>
-              </Group>
-            </CardSection>
-          </Stack>
-        </Card>
-      ))} */}
-
-      <Paper bg={"gray.4"} p={"md"}>
-        <Group position="apart">
-          <Group>
-            <Avatar radius={"xl"} />
-            <Text>Username</Text>
-          </Group>
-          <Button bg={"green.5"} radius={"xl"}>
-            Detail
-          </Button>
-        </Group>
-        <Divider color="black.3" my={"md"} />
-        <Stack>
-          <Center>
-            <Title order={4}>Judul Investasi</Title>
-          </Center>
-          <Progress size={"xl"} value={40} label="40 %" radius={"xl"} />
-          <Image alt="" src={"/aset/no-img.png"} radius={"md"}/>
-        </Stack>
-
-       
-      </Paper>
-    </>
-  );
-}
--- a/src/app_modules/investasi/main/view.tsx
+++ b/src/app_modules/investasi/main/view.tsx
@@ -46,7 +46,7 @@ export default function MainInvestasi({
 }) {
  const router = useRouter();
  const [investasi, setInvestasi] = useState(listData);
-  const [progres, setProgres] = useState(0);
+  const [statusPublish, setStatusPublish] = useState(false);

  async function onProgres(data: MODEL_Investasi) {
    // console.log(data)
@@ -59,6 +59,14 @@ export default function MainInvestasi({
    return progres;
  }

+  // useShallowEffect(() => {
+  //   onStatusPublish(investasi)
+  // },[investasi])
+
+  // async function onStatusPublish(investasi : MODEL_Investasi[]) {
+
+  // }
+
  if (_.isEmpty(investasi))
    return (
      <>
@@ -85,7 +93,10 @@ export default function MainInvestasi({
            <AspectRatio ratio={16 / 9}>
              <Paper radius={"md"}>
                {e.imagesId ? (
-                  <Image alt="" src={`/api/investasi/gambar/${e.imagesId}`} />
+                  <Image
+                    alt=""
+                    src={RouterInvestasi.api_gambar + `${e.imagesId}`}
+                  />
                ) : (
                  <Image alt="" src={"/aset/no-img.png"} />
                )}
@@ -110,7 +121,7 @@ export default function MainInvestasi({
                  +(
                    ((+e.totalLembar - +e.sisaLembar) / +e.totalLembar) *
                    100
-                  ).toFixed(2)
+                  ).toFixed(1)
                }
                color="teal"
                size="xl"
@@ -122,41 +133,45 @@ export default function MainInvestasi({
            <Box>
              <Grid>
                <Grid.Col span={6}>
-                  <Stack>
-                    <Box>
-                      <Text>Dana Dibutuhkan</Text>
-                      <Text>
-                        Rp.{" "}
-                        {new Intl.NumberFormat("id-ID", {
-                          maximumSignificantDigits: 10,
-                        }).format(+e.targetDana)}
-                      </Text>
-                    </Box>
-                    <Box>
-                      <Text>Harga Per Lembar</Text>
-                      <Text>
-                        Rp.{" "}
-                        {new Intl.NumberFormat("id-ID", {
-                          maximumSignificantDigits: 10,
-                        }).format(+e.hargaLembar)}
-                        {/* {e.hargaLembar} */}
-                      </Text>
-                    </Box>
-                  </Stack>
+                  <Center>
+                    <Stack>
+                      <Box>
+                        <Text truncate>Dana Dibutuhkan</Text>
+                        <Text truncate>
+                          Rp.{" "}
+                          {new Intl.NumberFormat("id-ID", {
+                            maximumSignificantDigits: 10,
+                          }).format(+e.targetDana)}
+                        </Text>
+                      </Box>
+                      <Box>
+                        <Text truncate>Harga Per Lembar</Text>
+                        <Text truncate>
+                          Rp.{" "}
+                          {new Intl.NumberFormat("id-ID", {
+                            maximumSignificantDigits: 10,
+                          }).format(+e.hargaLembar)}
+                          {/* {e.hargaLembar} */}
+                        </Text>
+                      </Box>
+                    </Stack>
+                  </Center>
                </Grid.Col>
                <Grid.Col span={6}>
-                  <Stack>
-                    <Box>
-                      <Text>ROI</Text>
-                      <Text>{e.roi}%</Text>
-                    </Box>
-                    <Box>
-                      <Text>Sisa Lembar</Text>
-                      <Text>
-                        {new Intl.NumberFormat("id-ID").format(+e.sisaLembar)}
-                      </Text>
-                    </Box>
-                  </Stack>
+                  <Center>
+                    <Stack>
+                      <Box>
+                        <Text truncate>ROI</Text>
+                        <Text truncate>{e.roi}%</Text>
+                      </Box>
+                      <Box>
+                        <Text truncate>Sisa Lembar</Text>
+                        <Text truncate>
+                          {new Intl.NumberFormat("id-ID").format(+e.sisaLembar)}
+                        </Text>
+                      </Box>
+                    </Stack>
+                  </Center>
                </Grid.Col>
              </Grid>
            </Box>
@@ -194,6 +209,7 @@ export default function MainInvestasi({
                      <Group position="right" spacing={"xs"}>
                        <IconCircleCheck color="green" />
                        <Text
+                          truncate
                          variant="text"
                          c={Warna.hijau_tua}
                          sx={{ fontFamily: "Greycliff CF, sans-serif" }}
@@ -210,15 +226,15 @@ export default function MainInvestasi({
                  return (
                    <>
                      <Group position="right" spacing={"xs"}>
-                        <Text>Sisa waktu:</Text>
-                        <Text>
+                        <Text truncate>Sisa waktu:</Text>
+                        <Text truncate>
                          {Number(e.MasterPencarianInvestor.name) -
                            moment(new Date()).diff(
                              new Date(e.countDown),
                              "days"
                            )}
                        </Text>
-                        <Text>Hari</Text>
+                        <Text truncate>Hari</Text>
                      </Group>
                    </>
                  );
--- a/src/app_modules/investasi/proses_transaksi/view.jsx
+++ b/src/app_modules/investasi/proses_transaksi/view.jsx
@@ -9,6 +9,8 @@ import {
  Center,
  Button,
  Text,
+  Container,
+  Flex,
 } from "@mantine/core";
 import { useFocusTrap } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
@@ -34,6 +36,7 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {
  const [total, setTotal] = useState(0);
  const [jumlah, setJumlah] = useState(0);
  const [hotmenu, setHotmenu] = useAtom(gs_investasiFooter);
+  const [snapShow, setSnapShow] = useState(false);

  // console.log(userLogin.id);
  // console.log(investasi);
@@ -58,13 +61,17 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {
    await getTokenTransaksi(body).then(async (res) => {
      if (res.token.status === 200) {
        // console.log(res.token.value.token)
-        snap.pay(res.token.value.token, {
+        setSnapShow(true);
+        snap.embed(res.token.value.token, {
+          embedId: "embedId",
          onSuccess: async function (result) {
            console.log(result);
            // console.log("success");
+            setSnapShow(false);
+
            await funUpdatePaymentInvestasi(result, res.dataTransaksi.id).then(
-              async (resUp) => {
-                if (resUp.status === 200) {
+              async (resUpdate) => {
+                if (resUpdate.status === 200) {
                  const hasil =
                    investasi.sisaLembar - res.dataTransaksi.quantity;

@@ -85,7 +92,8 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {
          },
          onPending: async function (result) {
            await funUpdatePaymentInvestasi(result, res.dataTransaksi.id);
-            router.push(RouterInvestasi.main_transaksi);
+            router.push(RouterInvestasi.proses_transaksi + `${investasi.id}`);
+            setSnapShow(false);

            console.log("pending");
            console.log(result);
@@ -93,6 +101,7 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {
          onError: async function (result) {
            await funUpdatePaymentInvestasi(result, res.dataTransaksi.id);
            router.push(RouterInvestasi.main_transaksi);
+            setSnapShow(false);

            console.log("error");
            console.log(result);
@@ -104,7 +113,7 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {
              };
              await funUpdatePaymentInvestasi(data, res.dataTransaksi.id);
              router.push(RouterInvestasi.main_transaksi);
-
+              setSnapShow(false);
              // router.push(RouterPay.home);
              console.log(data);
            }
@@ -134,85 +143,89 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {

  return (
    <>
-      <Box px={"md"}>
-        {/* Sisa Lembar Saham */}
-        <Group position="apart" mb={"md"}>
-          <Text>Sisa Lembar Saham</Text>
-          <Text fz={23}>
-            {new Intl.NumberFormat("id-ID", {
-              maximumFractionDigits: 10,
-            }).format(+investasi.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(+investasi.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
+      {!snapShow && (
+        <Box px={"md"}>
+          {/* Sisa Lembar Saham */}
+          <Group position="apart" mb={"md"}>
+            <Text>Sisa Lembar Saham</Text>
+            <Text fz={23}>
+              {new Intl.NumberFormat("id-ID", {
+                maximumFractionDigits: 10,
+              }).format(+investasi.sisaLembar)}{" "}
            </Text>
-            {/* <Text c={"red"} fs={"italic"} fz={10}>
-                maximal pembelian {maxPembelian} lembar
-              </Text> */}
-          </Box>
-          <NumberInput
-            type="number"
-            ref={focusTrapRef}
-            w={100}
-            max={maxPembelian}
-            onChange={(val) => {
-              setTotal(val * +investasi.hargaLembar);
-              setJumlah(val);
-              // console.log(val);
-            }}
-          />
-        </Group>
+          </Group>

-        <Divider my={"lg"} />
+          {/* Harga perlembar saham */}
+          <Group position="apart" mb={"md"}>
+            <Text>Harga Perlembar</Text>
+            <Text fz={23}>
+              Rp.{" "}
+              {new Intl.NumberFormat("id-ID", {
+                maximumFractionDigits: 10,
+              }).format(+investasi.hargaLembar)}{" "}
+            </Text>
+          </Group>

-        <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>
-          {jumlah < 10 ? (
-            <Button w={350} radius={50} bg={"gray"} disabled>
-              Beli Saham
-            </Button>
-          ) : (
-            <Button
-              w={350}
-              radius={50}
-              bg={Warna.biru}
-              onClick={() => {
-                onProses();
+          {/* Lembar saham */}
+          <Group position="apart" mb={"md"}>
+            <Box>
+              <Text>Jumlah Pembelian</Text>
+              <Text c={"blue"} fs={"italic"} fz={10}>
+                minimal pembelian 10 lembar
+              </Text>
+              {/* <Text c={"red"} fs={"italic"} fz={10}>
+               maximal pembelian {maxPembelian} lembar
+             </Text> */}
+            </Box>
+            <NumberInput
+              type="number"
+              ref={focusTrapRef}
+              w={100}
+              max={maxPembelian}
+              onChange={(val) => {
+                setTotal(val * +investasi.hargaLembar);
+                setJumlah(val);
+                // console.log(val);
              }}
-            >
-              Beli Saham
-            </Button>
-          )}
-        </Center>
-      </Box>
+            />
+          </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>
+            {jumlah < 10 ? (
+              <Button w={350} radius={50} bg={"gray"} disabled>
+                Beli Saham
+              </Button>
+            ) : (
+              <Button
+                w={350}
+                radius={50}
+                bg={Warna.biru}
+                onClick={() => {
+                  onProses();
+                }}
+              >
+                Beli Saham
+              </Button>
+            )}
+          </Center>
+        </Box>
+      )}
+
+      <Flex align={"center"} justify={"center"} id="embedId" />
    </>
  );
 }
--- a/src/app_modules/investasi/saham_saya/saham_saya.tsx
+++ b/src/app_modules/investasi/saham_saya/saham_saya.tsx
@@ -0,0 +1,174 @@
+"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,
+  Button,
+  Paper,
+  Progress,
+  Center,
+  SimpleGrid,
+} 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";
+import { MODEL_Transaksi_Investasi } from "../model/model_investasi";
+import { useState } from "react";
+import { Warna } from "@/app/lib/warna";
+import _ from "lodash";
+
+export default function InvestasiSahamTerbeli({
+  listTransaksi,
+}: {
+  listTransaksi: MODEL_Transaksi_Investasi[];
+}) {
+  const router = useRouter();
+  const [transaksi, setTransaksi] = useState(listTransaksi);
+
+  if (_.isEmpty(transaksi)) {
+    return (
+      <>
+        <Center h={"80vh"}>
+          <Text>Saham Anda Kosong</Text>
+        </Center>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <SimpleGrid
+        cols={4}
+        spacing="lg"
+        breakpoints={[
+          { maxWidth: "md", cols: 3, spacing: "md" },
+          { maxWidth: "sm", cols: 2, spacing: "sm" },
+          { maxWidth: "xs", cols: 1, spacing: "sm" },
+        ]}
+      >
+        {transaksi.map((e) => (
+          <Card key={e.id} bg={"gray.5"} radius={"md"}>
+            <Card.Section withBorder p={"sm"}>
+              <Group position="apart">
+                <Group>
+                  <Avatar radius={"xl"}>
+                    {(() => {
+                      const usr = e.Investasi.author.username;
+                      const splt = usr.split("");
+                      const Up = _.upperCase(splt[0]);
+
+                      return Up;
+                    })()}
+                  </Avatar>
+                  <Text>{e.Investasi.author.username}</Text>
+                </Group>
+
+                <Button
+                  bg={"teal"}
+                  radius={"xl"}
+                  compact
+                  onClick={() =>
+                    router.push(
+                      RouterInvestasi.detail_saham_terbeli + `${e.id}`
+                    )
+                  }
+                >
+                  Detail
+                </Button>
+              </Group>
+            </Card.Section>
+
+            <Card.Section p={"md"}>
+              <Stack spacing={"lg"}>
+                <Stack spacing={"lg"}>
+                  <Center>
+                    <Text fw={"bold"} fz={20} truncate>
+                      {e.Investasi.title}
+                    </Text>
+                  </Center>
+                  <Progress
+                    label={
+                      "" +
+                      (
+                        ((+e.Investasi.totalLembar - +e.Investasi.sisaLembar) /
+                          +e.Investasi.totalLembar) *
+                        100
+                      ).toFixed(1) +
+                      "%"
+                    }
+                    value={
+                      +(
+                        ((+e.Investasi.totalLembar - +e.Investasi.sisaLembar) /
+                          +e.Investasi.totalLembar) *
+                        100
+                      ).toFixed(1)
+                    }
+                    color="teal"
+                    size="xl"
+                    radius="xl"
+                  />
+                </Stack>
+                <Grid>
+                  <Grid.Col span={6}>
+                    <Stack spacing={5}>
+                      <Stack spacing={0}>
+                        <Text fz={14}>Lembar Saham:</Text>
+                        <Text fw={"bold"} truncate>
+                          {new Intl.NumberFormat("id-ID", {
+                            maximumFractionDigits: 10,
+                          }).format(+e.quantity)}
+                        </Text>
+                      </Stack>
+                      <Stack spacing={0}>
+                        <Text fz={14}>Total:</Text>
+                        <Text fw={"bold"} truncate>
+                          Rp.{" "}
+                          {new Intl.NumberFormat("id-ID", {
+                            maximumFractionDigits: 10,
+                          }).format(+e.gross_amount)}
+                        </Text>
+                      </Stack>
+                    </Stack>
+                  </Grid.Col>
+                  <Grid.Col span={6}>
+                    <AspectRatio ratio={16 / 9}>
+                      <Paper radius={"md"}>
+                        {e.Investasi.imagesId ? (
+                          <Image
+                            alt=""
+                            src={
+                              RouterInvestasi.api_gambar +
+                              `${e.Investasi.imagesId}`
+                            }
+                          />
+                        ) : (
+                          <Image alt="" src={"/aset/no-img.png"} />
+                        )}
+                      </Paper>
+                    </AspectRatio>
+                  </Grid.Col>
+                </Grid>
+              </Stack>
+              <Box></Box>
+            </Card.Section>
+          </Card>
+        ))}
+      </SimpleGrid>
+    </>
+  );
+}
--- a/src/app_modules/investasi/transaksi/view.tsx
+++ b/src/app_modules/investasi/transaksi/view.tsx
@@ -59,7 +59,7 @@ export default function TransaksiInvestasi({
    return (
      <>
        <Center h={"80vh"}>
-          <Title order={5}>Tidak Ada Transaksi</Title>
+          <Text >Tidak Ada Transaksi</Text>
        </Center>
      </>
    );