Fitur transaksi

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

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>
     </>
   );
-}
+}