# feat :

## Deskripsi :
- Notifikasi investasi
## Issue : Gerbang pembayaran

src/app_modules/investasi/status_pesanan/layout.tsx

@@ -2,6 +2,8 @@
 
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
 import router from "next/router";
@@ -15,17 +17,18 @@ export default function LayoutStatusPesananInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <Header height={50}>
-            <Group h={50} position="center" px={"md"}>
-              <Text>Status Transaksi</Text>
-            </Group>
-          </Header>
+          <UIGlobal_LayoutHeaderTamplate title="Status Transaksi" hideButtonLeft/>
+          // <Header height={50}>
+          //   <Group h={50} position="center" px={"md"}>
+          //     <Text>Status Transaksi</Text>
+          //   </Group>
+          // </Header>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/status_pesanan/view.tsx

@@ -5,19 +5,32 @@ import { MODEL_Transaksi_Investasi } from "../model/model_investasi";
 import { Button, Group, Paper, Stack, Text } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 
 export default function StatusPesananInvetsatsi({
   dataTransaksi,
 }: {
   dataTransaksi: MODEL_Transaksi_Investasi;
 }) {
-    const router = useRouter()
+  const router = useRouter();
   const [transaksi, setTransaksi] = useState(dataTransaksi);
-  
+  const [isLoading, setLoading] = useState(false);
+
   return (
     <>
-      <Stack>
-        <Paper withBorder p={"md"}>
+      <Stack pb={"lg"}>
+        <Paper
+          style={{
+            padding: "15px",
+            backgroundColor: AccentColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
           <Stack>
             <Stack spacing={0}>
               <Text fw={"bold"}>Pemilik Investasi</Text>
@@ -33,7 +46,17 @@ export default function StatusPesananInvetsatsi({
             </Stack>
           </Stack>
         </Paper>
-        <Paper withBorder p={"md"}>
+
+        <Paper
+          style={{
+            padding: "15px",
+            backgroundColor: AccentColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "15px",
+          }}
+        >
           <Stack>
             <Stack spacing={0}>
               <Text fw={"bold"}>Transaksi ID</Text>
@@ -41,15 +64,23 @@ export default function StatusPesananInvetsatsi({
             </Stack>
             <Stack spacing={0}>
               <Text fw={"bold"}>Lembar Terbeli</Text>
-              <Text>{new Intl.NumberFormat("id-ID").format(+transaksi.quantity)} lembar</Text>
+              <Text>
+                {new Intl.NumberFormat("id-ID").format(+transaksi.quantity)}{" "}
+                lembar
+              </Text>
             </Stack>
             <Stack spacing={0}>
               <Text fw={"bold"}>Total Transfer</Text>
-              <Text>Rp. {new Intl.NumberFormat("id-ID", {maximumFractionDigits: 10}).format(+transaksi.gross_amount)}</Text>
+              <Text>
+                Rp.{" "}
+                {new Intl.NumberFormat("id-ID", {
+                  maximumFractionDigits: 10,
+                }).format(+transaksi.gross_amount)}
+              </Text>
             </Stack>
             <Stack spacing={0}>
               <Text fw={"bold"}>Tipe Pembayaran</Text>
-              <Text>{transaksi.payment_type.replace('_', " ")}</Text>
+              <Text>{transaksi.payment_type.replace("_", " ")}</Text>
             </Stack>
             <Stack spacing={0}>
               <Text fw={"bold"}>Nama Bank</Text>
@@ -61,8 +92,19 @@ export default function StatusPesananInvetsatsi({
             </Stack>
           </Stack>
         </Paper>
-        <Button radius={"xl"} onClick={() => router.push(RouterInvestasi.main_transaksi)}>
-            Kembali ke List Transaksi
+        <Button
+          loaderPosition="center"
+          loading={isLoading}
+          radius={"xl"}
+          onClick={() => {
+            setLoading(true);
+            router.push(RouterInvestasi.main_transaksi);
+          }}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+        >
+          Kembali ke List Transaksi
         </Button>
       </Stack>
     </>