feat:

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

src/app_modules/investasi/transfer/layout.tsx

@@ -3,7 +3,17 @@
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { Warna } from "@/app/lib/warna";
 import HeaderTamplate from "@/app_modules/component/header_tamplate";
-import { AppShell, Button, Center, Footer } from "@mantine/core";
+import {
+  ActionIcon,
+  AppShell,
+  Button,
+  Center,
+  CloseButton,
+  Footer,
+  Group,
+  Header,
+  Text,
+} from "@mantine/core";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import React from "react";
@@ -15,12 +25,25 @@ export default function LayoutTransferInvestasi({
   children: React.ReactNode;
 }) {
   const router = useRouter();
-  const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
+  const [hotMenu, setHotMenu] = useAtom(gs_investasiFooter);
 
   return (
     <>
       <AppShell
-        header={<HeaderTamplate title="Transfer " />}
+        header={
+          <Header height={50}>
+            <Group position="apart" h={50} px={"md"}>
+              <CloseButton
+                size={"md"}
+                onClick={() => {
+                  router.push(RouterInvestasi.main_transaksi), setHotMenu(3);
+                }}
+              />
+              <Text>Transfer</Text>
+              <ActionIcon variant="transparent" disabled></ActionIcon>
+            </Group>
+          </Header>
+        }
         footer={
           <Footer height={70} sx={{ borderStyle: "none" }}>
             <Center>
@@ -30,9 +53,8 @@ export default function LayoutTransferInvestasi({
                 bg={Warna.biru}
                 onClick={() => {
                   router.push(RouterInvestasi.dialog_transaksi);
-                  setChangeColor(true)
+                  setHotMenu(1);
                   // router.push(RouterInvestasi.status_transaksi);
-                  
                 }}
               >
                 Sudah Transfer

src/app_modules/investasi/transfer/view.tsx

@@ -20,9 +20,11 @@ import {
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconAlertTriangle } from "@tabler/icons-react";
+import moment from "moment";
 import { useRouter } from "next/navigation";
 
 import { useState } from "react";
+import Countdown from "react-countdown";
 
 export default function TransferInvestasi() {
   const router = useRouter();
@@ -40,16 +42,44 @@ export default function TransferInvestasi() {
     }
   }, []);
 
+  const PopupCD = () => <Text fz={"xs"} c={"white"}>Gagal</Text>;
+  const countD = ({ hours, minutes, seconds, completed }: any) => {
+    if (completed) {
+      return PopupCD();
+    } else {
+      return (
+        <>
+          {hours}:{minutes}:{seconds}
+        </>
+      );
+    }
+  };
+
   return (
     <>
-      <Stack spacing={"xl"}>
-        <Stack spacing={0} mb={"md"}>
+      <Stack spacing={"lg"}>
+        <Stack spacing={0} mb={"xs"}>
           <Title order={5}>Mohon transfer ke Xendit</Title>
           <Group align="center">
             <Text>untuk diteruskan ke </Text>
             <Title order={5}>Nama Pemilik Proyek</Title>
           </Group>
-          <Divider mt={"lg"} />
+          <Divider my={"md"} />
+          <Grid>
+            <Grid.Col span={4}>
+              <Text fz={"xs"}>Transfer sebelum</Text>
+            </Grid.Col>
+            <Grid.Col span={5}>
+              <Text fz={"xs"} fw={"bold"}>{moment().local().add(1, "day").calendar()}</Text>
+            </Grid.Col>
+            <Grid.Col span={3} fz={"xs"} >
+             <Paper bg={"red"} px={"md"}>
+             <Center>
+             <Countdown date={Date.now() + 86400000} renderer={countD} />
+             </Center>
+             </Paper>
+            </Grid.Col>
+          </Grid>
         </Stack>
 
         <Stack spacing={"xl"}>
@@ -112,40 +142,6 @@ export default function TransferInvestasi() {
           </Stack>
         </Stack>
       </Stack>
-
-      {/* Upload */}
-      {/* <Group position="center" mt="lg" mb={"md"}>
-        <FileButton
-          onChange={async (files: any) => {
-            const buffer = URL.createObjectURL(
-              new Blob([new Uint8Array(await files.arrayBuffer())])
-            );
-            setImg(buffer);
-            setFl(files);
-          }}
-          accept="image/png,image/jpeg"
-        >
-          {(props) => (
-            <Button
-              {...props}
-              // w={350}
-              compact
-              radius={50}
-              bg={Warna.biru}
-              // onClick={() => router.push("/dev/investasi/upload")}
-            >
-              Upload
-            </Button>
-          )}
-        </FileButton>
-      </Group>
-      <AspectRatio ratio={16 / 9} mb={"lg"}>
-        {img ? (
-          <Image alt="" src={img} />
-        ) : (
-          <Image alt="" src={"/aset/no-img.png"} />
-        )}
-      </AspectRatio> */}
     </>
   );
 }