Fitur transaksi

# feat:
- Load data sesuai dengan status
- Countdown setelah pembelian
### issue: menyambungkan ke xendit

src/app_modules/investasi/fun/fun_cek_sisa_waktu.ts

@@ -0,0 +1,33 @@
+"use server";
+
+import moment from "moment";
+import { MODEL_Transaksi_Investasi } from "../model/model_investasi";
+import funGantiStatusTransaksi_Investasi from "./fun_ganti_status_transaksi";
+
+export default async function funCekSisaWaktuTransaksiInvestasi(
+  data: MODEL_Transaksi_Investasi[]
+) {
+  const listData = data;
+
+
+  for (let e of listData) {
+    cekWaktu(e)
+  }
+
+  async function cekWaktu(data: MODEL_Transaksi_Investasi) {
+    // console.log(data)
+    const selesai = moment(data.createdAt).add(1, "days").format();
+    // let durasi = moment.duration(moment(selesai).diff(new Date()));
+    const skrng = moment(new Date());
+    const sisaWaktu = moment(selesai).diff(skrng);
+
+    
+    if (sisaWaktu <= 0) {
+      await funGantiStatusTransaksi_Investasi(data.id, "4")
+      .then((res) => {
+        // console.log(res.data)
+      });
+    }
+  }
+
+}

src/app_modules/investasi/fun/fun_countdown_investasi.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import moment from "moment";
+import funGantiStatusTransaksi_Investasi from "./fun_ganti_status_transaksi";
+import { MODEL_Transaksi_Investasi } from "../model/model_investasi";
+
+export default async function funCountDown(data: MODEL_Transaksi_Investasi) {
+  // const res = await prisma.transaksiInvestasi.findMany({
+  //   where: {
+  //     id: data.id,
+  //   },
+  // });
+
+  // if (!res) return { status: 400 };
+
+  // const selesai = moment(data.createdAt).add(1, "days").format();
+  // let durasi = moment.duration(moment(selesai).diff(new Date()));
+  // const timer = setInterval(() => {
+  //   durasi = moment.duration(+durasi - 1000, "milliseconds");
+  //   // console.log(d.days(), "=", d.hours(), d.minutes(), d.seconds());
+  //   if (durasi.hours() <= 0 && durasi.minutes() <= 0 && durasi.seconds() <= 0) {
+  //     funGantiStatusTransaksi_Investasi(data.id, "4");
+  //     clearInterval(timer);
+  //     return {
+  //       status: 200,
+  //     };
+  //   }
+  // }, 1000);
+}

src/app_modules/investasi/fun/fun_ganti_status_transaksi.ts

@@ -0,0 +1,38 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { revalidatePath } from "next/cache";
+
+export default async function funGantiStatusTransaksi_Investasi(
+  transaksiId: string,
+  status: string
+) {
+  // console.log(transaksiId, "hehe", status)
+  const data = await prisma.transaksiInvestasi.update({
+    where: {
+      id: transaksiId,
+    },
+    data: {
+      masterStatusTransaksiInvestasiId: status,
+    },
+    select: {
+      id: true,
+      namaBank: true,
+      totalTransfer: true,
+      Investasi: true,
+      MasterStatusTransaksiInvestasi: true
+    }
+  });
+
+
+
+  if (!data) return { status: 400, message: "Status Gagal Diubah" };
+
+  revalidatePath(RouterInvestasi.main_transaksi)
+  return {
+    data: data,
+    status: 200,
+    message: "Status Diubah",
+  };
+}

src/app_modules/investasi/fun/get_list_all_transaksi_by_id.ts

@@ -0,0 +1,77 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import moment from "moment";
+import { MODEL_Transaksi_Investasi } from "../model/model_investasi";
+import funGantiStatusTransaksi_Investasi from "./fun_ganti_status_transaksi";
+
+export default async function getListAllTransaksiById_Investasi(
+  userId: string
+) {
+  const data = await prisma.transaksiInvestasi.findMany({
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      authorId: userId,
+    },
+    select: {
+      id: true,
+      namaBank: true,
+      nomorRekening: true,
+      totalTransfer: true,
+      lembarTerbeli: true,
+      active: true,
+      createdAt: true,
+      updatedAt: true,
+      authorId: true,
+      masterStatusTransaksiInvestasiId: true,
+      MasterStatusTransaksiInvestasi: true,
+      investasiId: true,
+      Investasi: true,
+      // Author:true,
+    },
+  });
+
+  for (let e of data) {
+    cekWaktu(e as any)
+  }
+
+  async function cekWaktu(data: MODEL_Transaksi_Investasi) {
+    // console.log(data)
+    const selesai = moment(data.createdAt).add(1, "days").format();
+    const skrng = moment(new Date());
+    const sisaWaktu = moment(selesai).diff(skrng);
+
+    if (sisaWaktu <= 0) {
+      await funGantiStatusTransaksi_Investasi(data.id, "4")
+    }
+  }
+
+  const dataBaru = await prisma.transaksiInvestasi.findMany({
+    orderBy: {
+      createdAt: "desc",
+    },
+    where: {
+      authorId: userId,
+    },
+    select: {
+      id: true,
+      namaBank: true,
+      nomorRekening: true,
+      totalTransfer: true,
+      lembarTerbeli: true,
+      active: true,
+      createdAt: true,
+      updatedAt: true,
+      authorId: true,
+      masterStatusTransaksiInvestasiId: true,
+      MasterStatusTransaksiInvestasi: true,
+      investasiId: true,
+      Investasi: true,
+      // Author:true,
+    },
+  });
+
+  return dataBaru
+}

src/app_modules/investasi/fun/get_transaksi_investasi.ts

@@ -2,7 +2,7 @@
 
 import prisma from "@/app/lib/prisma"
 
-export default async function getTransaksiInvestasi(id: string) {
+export default async function getTransaksiByIdInvestasi(id: string) {
     const data = await prisma.transaksiInvestasi.findUnique({
         where: {
             id: id

src/app_modules/investasi/fun/master/get_status_transaksi.ts

@@ -0,0 +1,8 @@
+"use server"
+
+import prisma from "@/app/lib/prisma"
+
+export default async function getMaster_StatusTransaksiInvestasi() {
+    const data = await prisma.masterStatusTransaksiInvestasi.findMany()
+    return data
+}

src/app_modules/investasi/index.ts

@@ -55,7 +55,7 @@ import DetailPublishInvestasi from "./detail_portofolio/publish/page";
 import LayoutDetailPublishInvestasi from "./detail_portofolio/publish/layout";
 import DetailRejectInvestasi from "./detail_portofolio/reject/page";
 import LayoutDetailRejectInvestasi from "./detail_portofolio/reject/layout";
-import TransaksiInvestasi from "./transaksi/page";
+import TransaksiInvestasi from "./transaksi/view";
 import LayoutTransaksiInvestasi from "./transaksi/layout";
 import StatusTransaksiInvestasi_Gagal from "./status_transaksi/gagal/view";
 import LayoutStatusTransaksiInvestasi_Gagal from "./status_transaksi/gagal/layout";

src/app_modules/investasi/metode_transfer/view.tsx

@@ -77,7 +77,7 @@ export default function MetodeTransferInvestasi({
 
   return (
     <>
-      <pre>{JSON.stringify(transferValue, null, 2)}</pre>
+      {/* <pre>{JSON.stringify(transferValue, null, 2)}</pre> */}
       {/* Box judul */}
       <Paper bg={"gray"} p={"xs"} shadow="lg" mb={"md"}>
         <Title order={5}>{investasi.title}</Title>

src/app_modules/investasi/model/model_investasi.ts

@@ -6,16 +6,16 @@ export interface MODEL_Investasi {
   targetDana: string;
   hargaLembar: string;
   totalLembar: string;
-  sisaLembar: string,
-  lembarTerbeli: string
+  sisaLembar: string;
+  lembarTerbeli: string;
   roi: string;
   active: true;
   createdAt: Date;
   updatedAt: Date;
   authorId: string;
   imagesId: string;
-  catatan: string
-  progress: string,
+  catatan: string;
+  progress: string;
   MasterStatusInvestasi: MODEL_Status_investasi;
   BeritaInvestasi: Model_Berita_Investasi[];
   DokumenInvestasi: Model_Dokumen_Investasi[];
@@ -23,19 +23,25 @@ export interface MODEL_Investasi {
   MasterPembagianDeviden: Model_All_Master;
   MasterPencarianInvestor: Model_All_Master;
   MasterPeriodeDeviden: Model_All_Master;
+  masterPeriodeDevidenId: string;
+  masterPembagianDevidenId: string;
+  masterPencarianInvestorId: string;
 }
 
 export interface MODEL_Transaksi_Investasi {
   id: string;
-  lembarTerbeli: string,
-  totalTransfer: string,
-  namaBank: string,
-  nomorRekening: string
-  active: true;
+  namaBank: string;
+  nomorRekening: string;
+  totalTransfer: string;
+  lembarTerbeli: string;
+  active: boolean;
   createdAt: Date;
   updatedAt: Date;
-  Author: MODEL_User_profile,
-  Investasi: MODEL_Investasi
+  investasiId: string;
+  authorId: string;
+  masterStatusTransaksiInvestasiId: string;
+  MasterStatusTransaksiInvestasi: Model_Status_Transaksi_Investasi;
+  Investasi: MODEL_Investasi;
 }
 
 export interface MODEL_Status_investasi {
@@ -61,29 +67,38 @@ export interface Model_Berita_Investasi {
 }
 
 export interface Model_Prospektus_Investasi {
-  id: string
-  url: string
+  id: string;
+  url: string;
   active: boolean;
-  createdAt: Date
-  updatedAt: Date
-  investasiId: string
+  createdAt: Date;
+  updatedAt: Date;
+  investasiId: string;
 }
 
 export interface Model_Dokumen_Investasi {
-  id: string
-  title: string
-  url: string
+  id: string;
+  title: string;
+  url: string;
   active: boolean;
-  createdAt: Date
-  updatedAt: Date
-  investasiId: string
+  createdAt: Date;
+  updatedAt: Date;
+  investasiId: string;
 }
 
 export interface Model_Nama_Bank {
-  id: string,
-  name: string,
-  norek: string,
-  active: boolean,
-  createdAt: Date,
-  updatedAt: Date
+  id: string;
+  name: string;
+  norek: string;
+  active: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface Model_Status_Transaksi_Investasi {
+  id: string;
+  name: string;
+  color: string;
+  active: boolean;
+  createdAt: Date;
+  updatedAt: Date;
 }

src/app_modules/investasi/proses_investasi/view.tsx

@@ -60,7 +60,7 @@ export default function ProsesInvestasi({
 
   return (
     <>
-      <pre>{JSON.stringify(transferValue, null, 2)}</pre>
+      {/* <pre>{JSON.stringify(transferValue, null, 2)}</pre> */}
       <Box px={"md"}>
         {/* Sisa Lembar Saham */}
         <Group position="apart" mb={"md"}>

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

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

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

@@ -1,22 +1,27 @@
-"use client"
+"use client";
 
-import { Paper, Stack, Center, Flex, Title, Divider, Group, Text } from "@mantine/core";
+import {
+  Paper,
+  Stack,
+  Center,
+  Flex,
+  Title,
+  Divider,
+  Group,
+  Text,
+} from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconAlertHexagon } from "@tabler/icons-react";
 import moment from "moment";
 import { useState } from "react";
+import { MODEL_Transaksi_Investasi } from "../../model/model_investasi";
 
-export default function StatusTransaksiInvestasi_Gagal(){
-    const [tgl, setTgl] = useState<any | Date>(null);
-
-  useShallowEffect(() => {
-    onDate();
-  }, []);
-
-  async function onDate() {
-    const d = Date.now();
-    setTgl(moment(d).format("LLL"));
-  }
+export default function StatusTransaksiInvestasi_Gagal({
+  dataTransaksi,
+}: {
+  dataTransaksi: MODEL_Transaksi_Investasi;
+}) {
+  const [transaksi, setTransaksi] = useState(dataTransaksi)
 
   return (
     <>
@@ -26,37 +31,39 @@ export default function StatusTransaksiInvestasi_Gagal(){
             <Stack>
               <Flex direction={"column"} align={"center"}>
                 <Title order={5}>Transaksi Gagal</Title>
-                <Text fz={10}>{tgl}</Text>
+                <Text fz={10}>{moment(transaksi.createdAt).format('lll')}</Text>
               </Flex>
               <Center>
-               <Stack>
-                <Center>
-                <IconAlertHexagon size={100} color="red"/>
-                </Center>
-               <Text fw={"bold"} >
-                  Rp. 300.000
-                </Text>
-               </Stack>
+                <Stack>
+                  <Center>
+                    <IconAlertHexagon size={100} color="red" />
+                  </Center>
+                  {/* <Text fw={"bold"}>Rp. {transaksi.totalTransfer}</Text> */}
+                </Stack>
               </Center>
             </Stack>
           </Center>
           <Stack px={"md"}>
             <Divider color="dark.1" />
             <Group position="apart">
-              <Text>Penerima</Text>
-              <Text fw={"bold"}>Nama Penerima</Text>
+              <Text>Nama Investasi</Text>
+              <Text fw={"bold"}>{transaksi.Investasi.title}</Text>
             </Group>
             <Group position="apart">
-              <Text>Bank Penerima</Text>
-              <Text fw={"bold"}>Nama Bank(BNI, BSI, dll)</Text>
+              <Text>Bank Tujuan</Text>
+              <Text fw={"bold"}>{transaksi.namaBank}</Text>
             </Group>
             <Group position="apart">
-              <Text>Nomor Rekening</Text>
-              <Text fw={"bold"}>0000000000000</Text>
+              <Text>Jumlah Transfer</Text>
+              <Text fw={"bold"}>Rp. {transaksi.totalTransfer}</Text>
+            </Group>
+            <Group position="apart">
+              <Text>Jumlah Lembar</Text>
+              <Text fw={"bold"}>{transaksi.lembarTerbeli}</Text>
             </Group>
           </Stack>
         </Stack>
       </Paper>
     </>
   );
-}
+}

src/app_modules/investasi/transaksi/page.tsx

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

src/app_modules/investasi/transaksi/view.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Badge, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import toast from "react-simple-toasts";
+import {
+  MODEL_Transaksi_Investasi,
+  Model_Status_Transaksi_Investasi,
+} from "../model/model_investasi";
+import { useState } from "react";
+import moment from "moment";
+import funCountDown from "../fun/fun_countdown_investasi";
+import funGantiStatusTransaksi_Investasi from "../fun/fun_ganti_status_transaksi";
+import { useInterval, useShallowEffect } from "@mantine/hooks";
+
+export default function TransaksiInvestasi({
+  statusTransaksi,
+  listTransaksi,
+}: {
+  statusTransaksi: Model_Status_Transaksi_Investasi[];
+  listTransaksi: MODEL_Transaksi_Investasi[];
+}) {
+  const router = useRouter();
+  const [status, setStatus] = useState(statusTransaksi);
+  const [transaksi, setTransaksi] = useState(listTransaksi);
+  
+
+  async function onKlik(statusId: string, transaksiId: string) {
+    // console.log(id)
+    if (statusId === "1") {
+      return router.push(RouterInvestasi.transfer + transaksiId);
+    } else {
+      if (statusId === "2") {
+        return router.push(RouterInvestasi.transfer);
+      } else {
+        if (statusId === "3") {
+          return router.push(RouterInvestasi.dialog_transaksi);
+        } else {
+          return router.push(
+            RouterInvestasi.status_transaksi_gagal + transaksiId
+          );
+        }
+      }
+    }
+  }
+
+
+
+  return (
+    <>
+      <Stack>
+        {transaksi.map((e) => (
+          <Paper
+            key={e.id}
+            p="xs"
+            bg={"gray"}
+            onClick={() => onKlik(e.masterStatusTransaksiInvestasiId, e.id)}
+          >
+            <Group position="apart">
+              <Title order={6}>{e.Investasi.title}</Title>
+              <Title order={5}>Rp.{e.totalTransfer}</Title>
+            </Group>
+            <Group position="apart">
+              <Stack spacing={0}>
+                <Text fz={"xs"}>Bank {e.namaBank}</Text>
+                <Text fz={"xs"}>{moment(e.createdAt).format("ll")}</Text>
+              </Stack>
+              {(() => {
+                if (e.masterStatusTransaksiInvestasiId === "1") {
+                  return (
+                    <>
+                      <Title
+                        order={5}
+                        c={e.MasterStatusTransaksiInvestasi.color}
+                      >
+                        {e.MasterStatusTransaksiInvestasi.name}
+                      </Title>
+                    </>
+                  );
+                } else {
+                  if (e.masterStatusTransaksiInvestasiId === "2") {
+                    return (
+                      <>
+                        <Title
+                          order={5}
+                          c={e.MasterStatusTransaksiInvestasi.color}
+                        >
+                          {e.MasterStatusTransaksiInvestasi.name}
+                        </Title>
+                      </>
+                    );
+                  } else {
+                    if (e.masterStatusTransaksiInvestasiId === "3") {
+                      return (
+                        <>
+                          <>
+                            <Title
+                              order={5}
+                              c={e.MasterStatusTransaksiInvestasi.color}
+                            >
+                              {e.MasterStatusTransaksiInvestasi.name}
+                            </Title>
+                          </>
+                        </>
+                      );
+                    } else {
+                      return (
+                        <>
+                          <Title
+                            order={5}
+                            c={e.MasterStatusTransaksiInvestasi.color}
+                          >
+                            {e.MasterStatusTransaksiInvestasi.name}
+                          </Title>
+                        </>
+                      );
+                    }
+                  }
+                }
+              })()}
+            </Group>
+          </Paper>
+        ))}
+      </Stack>
+      {/* <pre>{JSON.stringify(transaksi, null, 2)}</pre> */}
+    </>
+  );
+}

src/app_modules/investasi/transfer/view.tsx

@@ -19,10 +19,10 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useInterval, useShallowEffect } from "@mantine/hooks";
 import { IconAlertTriangle } from "@tabler/icons-react";
 import moment from "moment";
-import { useRouter } from "next/navigation";
+import { redirect, useRouter } from "next/navigation";
 
 import { useState } from "react";
 import Countdown from "react-countdown";
@@ -33,6 +33,7 @@ import {
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { useAtom } from "jotai";
 import { gs_TransferValue, gs_investasiFooter } from "../g_state";
+import funGantiStatusTransaksi_Investasi from "../fun/fun_ganti_status_transaksi";
 
 export default function TransferInvestasi({
   dataTransaksi,
@@ -41,13 +42,11 @@ export default function TransferInvestasi({
 }) {
   const router = useRouter();
   const [transaksi, setTransaksi] = useState(dataTransaksi);
-  const [hotMenu, setHotMenu] = useAtom(gs_investasiFooter);
-  const [countDown, setCountDown] = useState({
-    jam: "",
-    menit: "",
-    detik: "",
+  const [countDown, setCountDown] = useState<number | any>({
+    jam: null,
+    menit: null,
+    detik: null,
   });
-  const [transferValue, setTransferValue] = useAtom(gs_TransferValue);
 
   // useShallowEffect(() => {
   //   const inter = apa_kabar("2023-11-18");
@@ -63,36 +62,45 @@ export default function TransferInvestasi({
   //   return inter;
   // }
 
-  useShallowEffect(() => {
-    const mulai = moment(transaksi.createdAt).format();
-    const selesai = moment(transaksi.createdAt).add(1, "days").format();
-    const inter = funCountDown(mulai as any, selesai as any);
+  // useShallowEffect(() => {
+  //   const mulai = moment(transaksi.createdAt).format();
+  //   const selesai = moment(transaksi.createdAt).add(1, "days").format();
+  //   const timer = funCountDown(mulai as any, selesai as any);
 
-    return () => clearInterval(inter);
-  }, []);
+  //   return () => clearInterval(timer);
+  // }, []);
 
-  function funCountDown(mulai: Date, selesai: Date) {
-    // console.log(selesai)
-    let d = moment.duration(moment(selesai).diff(new Date()));
-    const inter = setInterval(() => {
-      d = moment.duration(+d - 1000, "milliseconds");
-      // console.log(d.hours(), d.minutes(), d.seconds())
-
-      setCountDown({
-        ...countDown,
-        jam: "" + d.hours(),
-        menit: "" + d.minutes(),
-        detik: "" + d.seconds(),
+  // functionbaru ==========================//
+  const selesai = moment(transaksi.createdAt).add(1, "days").format();
+  let durasi = moment.duration(moment(selesai).diff(new Date()));
+  const interval = useInterval(() => {
+    durasi = moment.duration(+durasi - 1000, "milliseconds");
+    if (durasi.hours() <= 0 && durasi.minutes() <= 0 && durasi.seconds() <= 0) {
+      funGantiStatusTransaksi_Investasi(transaksi.id, "4").then((res) => {
+        if (res.status === 200) {
+          router.push(
+            RouterInvestasi.status_transaksi_gagal + `${transaksi.id}`
+          );
+          interval.stop();
+        }
       });
-    }, 1000);
+    }
+    setCountDown({
+      ...countDown,
+      jam: durasi.hours(),
+      menit: durasi.minutes(),
+      detik: durasi.seconds(),
+    });
+  }, 1000);
 
-    return inter;
-  }
+  useShallowEffect(() => {
+    interval.start();
+  }, []);
 
   return (
     <>
-      {/* <pre>{JSON.stringify(transferValue, null, 2)}</pre>
-      <pre>{JSON.stringify(transaksi, null,2)}</pre> */}
+      {/* <pre>{JSON.stringify(transaksi, null,2)}</pre> */}
+      {/* {countDown.jam} */}
       <Stack spacing={"lg"}>
         <Stack spacing={0} mb={"xs"}>
           <Text fz={12}>Mohon transfer untuk diteruskan ke :</Text>
@@ -106,18 +114,18 @@ export default function TransferInvestasi({
             </Grid.Col>
             <Grid.Col span={5}>
               <Text fz={"xs"} fw={"bold"}>
-                {moment().add(1, "days").calendar()}
+                {moment(transaksi.createdAt).format("lll")}
               </Text>
             </Grid.Col>
             <Grid.Col span={3} fz={"xs"}>
-              <Paper bg={"red"} px={"md"}>
+              <Paper bg={"red"} px={"xs"}>
                 <Center>
-                  {countDown.jam === "0" &&
-                  countDown.menit === "0" &&
-                  countDown.detik === "0" ? (
-                    <Box>
-                      <Text>Waktu habis</Text>
-                    </Box>
+                  {countDown.jam <= 0 &&
+                  countDown.menit <= 0 &&
+                  countDown.detik <= 0 ? (
+                    <Flex align={"center"} justify={"center"}>
+                      <Text fz={9}>Waktu Habis</Text>
+                    </Flex>
                   ) : (
                     <Box>
                       {countDown.jam}:{countDown.menit}:{countDown.detik}
@@ -220,7 +228,7 @@ export default function TransferInvestasi({
           bg={Warna.biru}
           onClick={() => {
             router.push(RouterInvestasi.dialog_transaksi);
-            setHotMenu(1);
+            // setHotMenu(1);
             // router.push(RouterInvestasi.status_transaksi);
           }}
         >