feat:

- Fitur hot menu ditambah
- Fitur portofolio khusus status investasi
- Fitur halaman transaksi
### No Issue
#fix:
- Perubahan minor

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

@@ -0,0 +1,57 @@
+"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 { 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>
+      </>
+    );
+  }

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

@@ -0,0 +1,62 @@
+"use client"
+
+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";
+
+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"));
+  }
+
+  return (
+    <>
+      <Paper bg="gray.4" radius={"md"} py={"md"}>
+        <Stack>
+          <Center>
+            <Stack>
+              <Flex direction={"column"} align={"center"}>
+                <Title order={5}>Transaksi Gagal</Title>
+                <Text fz={10}>{tgl}</Text>
+              </Flex>
+              <Center>
+               <Stack>
+                <Center>
+                <IconAlertHexagon size={100} color="red"/>
+                </Center>
+               <Text fw={"bold"} >
+                  Rp. 300.000
+                </Text>
+               </Stack>
+              </Center>
+            </Stack>
+          </Center>
+          <Stack px={"md"}>
+            <Divider color="dark.1" />
+            <Group position="apart">
+              <Text>Penerima</Text>
+              <Text fw={"bold"}>Nama Penerima</Text>
+            </Group>
+            <Group position="apart">
+              <Text>Bank Penerima</Text>
+              <Text fw={"bold"}>Nama Bank(BNI, BSI, dll)</Text>
+            </Group>
+            <Group position="apart">
+              <Text>Nomor Rekening</Text>
+              <Text fw={"bold"}>0000000000000</Text>
+            </Group>
+          </Stack>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/investasi/status_transaksi/layout.tsx

@@ -18,13 +18,14 @@ import React from "react";
 import { gs_investasiFooter } from "../g_state";
 import { Warna } from "@/app/lib/warna";
 
-export default function LayoutStatusTransaksiInvestasi({
+export default function LayoutStatusTransaksiInvestasi(
+  {
   children,
 }: {
   children: React.ReactNode;
 }) {
   const router = useRouter();
-  // const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
+  const [hotMenu, setHotMenu] = useAtom(gs_investasiFooter);
 
   return (
     <>
@@ -35,8 +36,8 @@ export default function LayoutStatusTransaksiInvestasi({
               <CloseButton
                 size={"md"}
                 onClick={() => {
-                  router.push(RouterInvestasi.portofolio);
-                  // setChangeColor(true);
+                  router.push(RouterInvestasi.main_transaksi);
+                  setHotMenu(3);
                 }}
               />
               <Text>Status Transaksi</Text>
@@ -47,7 +48,16 @@ export default function LayoutStatusTransaksiInvestasi({
         footer={
           <Footer height={70} sx={{ borderStyle: "none" }}>
             <Center>
-              <Button w={300} radius={50} bg={Warna.biru} onClick={() => router.push(RouterInvestasi.portofolio)}>Kembali Ke Portofolio</Button>
+              <Button
+                w={300}
+                radius={50}
+                bg={Warna.biru}
+                onClick={() => {
+                  router.push(RouterInvestasi.main_investasi), setHotMenu(2);
+                }}
+              >
+                Kembali Ke Investasi
+              </Button>
             </Center>
           </Footer>
         }