diff --git a/src/app/dev/investasi/status-transaksi/berhasil/[id]/page.tsx b/src/app/dev/investasi/status-transaksi/berhasil/[id]/page.tsx
index 6015c0e9..b0ba588d 100644
--- a/src/app/dev/investasi/status-transaksi/berhasil/[id]/page.tsx
+++ b/src/app/dev/investasi/status-transaksi/berhasil/[id]/page.tsx
@@ -4,10 +4,10 @@ import { Investasi_UiTransaksiBerhasil } from "@/app_modules/investasi/_ui";
 
 export default async function Page({params}: {params: {id: string}}) {
     const invoiceId = params.id;
-    const dataTransaksi = await investasi_funGetOneInvoiceById({ invoiceId });
+    // const dataTransaksi = await investasi_funGetOneInvoiceById({ invoiceId });
   return (
     <>
-      <Investasi_UiTransaksiBerhasil dataTransaksi={dataTransaksi} />
+      <Investasi_UiTransaksiBerhasil  />
     </>
   );
 }
diff --git a/src/app/dev/investasi/status-transaksi/gagal/[id]/page.tsx b/src/app/dev/investasi/status-transaksi/gagal/[id]/page.tsx
index b13315c3..63411009 100644
--- a/src/app/dev/investasi/status-transaksi/gagal/[id]/page.tsx
+++ b/src/app/dev/investasi/status-transaksi/gagal/[id]/page.tsx
@@ -4,14 +4,13 @@ import { Investasi_UiTransaksiGagal } from "@/app_modules/investasi/_ui/status_t
 
 export default async function Page({ params }: { params: { id: string } }) {
   const invoiceId = params.id;
-  const dataTransaksi = await investasi_funGetOneInvoiceById({ invoiceId });
-  const nomorAdmin = await funGlobal_getNomorAdmin();
+  // const dataTransaksi = await investasi_funGetOneInvoiceById({ invoiceId });
+  // const nomorAdmin = await funGlobal_getNomorAdmin();
 
   return (
     <>
       <Investasi_UiTransaksiGagal
-        dataTransaksi={dataTransaksi}
-        nomorAdmin={nomorAdmin as any}
+       
       />
     </>
   );
diff --git a/src/app_modules/investasi/_ui/status_transaksi/ui_transaksi_berhasil.tsx b/src/app_modules/investasi/_ui/status_transaksi/ui_transaksi_berhasil.tsx
index 947bd4be..a6c50ec9 100644
--- a/src/app_modules/investasi/_ui/status_transaksi/ui_transaksi_berhasil.tsx
+++ b/src/app_modules/investasi/_ui/status_transaksi/ui_transaksi_berhasil.tsx
@@ -6,16 +6,16 @@ import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate
 import { ActionIcon, Loader } from "@mantine/core";
 import { IconX } from "@tabler/icons-react";
 import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { Investasi_ViewTransaksiBerhasil } from "../../_view";
 import { gs_investas_menu } from "../../g_state";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetOneSahamInvestasiById } from "../../_lib/api_fetch_new_investasi";
+import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export function Investasi_UiTransaksiBerhasil({
-  dataTransaksi,
-}: {
-  dataTransaksi: any;
-}) {
+export function Investasi_UiTransaksiBerhasil() {
   const router = useRouter();
   const [hotMenu, setHotMenu] = useAtom(gs_investas_menu);
   const [isLoading, setLoading] = useState(false);
@@ -40,7 +40,9 @@ export function Investasi_UiTransaksiBerhasil({
         />
       }
     >
-      <Investasi_ViewTransaksiBerhasil dataTransaksi={dataTransaksi} />
+
+
+        <Investasi_ViewTransaksiBerhasil  />
     </UIGlobal_LayoutTamplate>
   );
 }
diff --git a/src/app_modules/investasi/_ui/status_transaksi/ui_transaksi_gagal.tsx b/src/app_modules/investasi/_ui/status_transaksi/ui_transaksi_gagal.tsx
index aaf23dfa..bfd59a75 100644
--- a/src/app_modules/investasi/_ui/status_transaksi/ui_transaksi_gagal.tsx
+++ b/src/app_modules/investasi/_ui/status_transaksi/ui_transaksi_gagal.tsx
@@ -11,13 +11,7 @@ import { useState } from "react";
 import { Investasi_ViewTransaksiGagal } from "../../_view";
 import { gs_investas_menu } from "../../g_state";
 
-export function Investasi_UiTransaksiGagal({
-  dataTransaksi,
-  nomorAdmin,
-}: {
-  dataTransaksi: any;
-  nomorAdmin: any
-}) {
+export function Investasi_UiTransaksiGagal() {
   const router = useRouter();
   const [hotMenu, setHotMenu] = useAtom(gs_investas_menu);
   const [isLoading, setLoading] = useState(false);
@@ -42,7 +36,7 @@ export function Investasi_UiTransaksiGagal({
         />
       }
     >
-      <Investasi_ViewTransaksiGagal dataTransaksi={dataTransaksi} nomorAdmin={nomorAdmin} />
+      <Investasi_ViewTransaksiGagal />
     </UIGlobal_LayoutTamplate>
   );
 }
diff --git a/src/app_modules/investasi/_view/detail/view_detail_saham_saya.tsx b/src/app_modules/investasi/_view/detail/view_detail_saham_saya.tsx
index bf2de920..9c128c81 100644
--- a/src/app_modules/investasi/_view/detail/view_detail_saham_saya.tsx
+++ b/src/app_modules/investasi/_view/detail/view_detail_saham_saya.tsx
@@ -1,15 +1,17 @@
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
 import { useState } from "react";
 import {
   Investasi_ComponentBoxDetailData,
   Investasi_ComponentBoxHargaDanLembarSaham,
   Investasi_ComponentBoxProgress,
 } from "../../_component";
-import { MODEL_INVESTASI, MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
-import { useShallowEffect } from "@mantine/hooks";
-import { apiGetOneSahamInvestasiById, apiNewGetOneInvestasiById } from "../../_lib/api_fetch_new_investasi";
-import { useParams } from "next/navigation";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import {
+  apiGetOneSahamInvestasiById
+} from "../../_lib/api_fetch_new_investasi";
+import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
 
 export function Investasi_ViewDetailSahamSaya() {
   const param = useParams<{ id: string }>();
@@ -39,7 +41,9 @@ export function Investasi_ViewDetailSahamSaya() {
     <>
       <Stack mb={"lg"}>
         <Investasi_ComponentBoxHargaDanLembarSaham data={data as any} />
-        <Investasi_ComponentBoxProgress progress={data?.Investasi?.progress as any} />
+        <Investasi_ComponentBoxProgress
+          progress={data?.Investasi?.progress as any}
+        />
         <Investasi_ComponentBoxDetailData data={data as any} />
       </Stack>
     </>
diff --git a/src/app_modules/investasi/_view/status_transaksi/view_invoice_berhasil.tsx b/src/app_modules/investasi/_view/status_transaksi/view_invoice_berhasil.tsx
index 0b3a9fcf..e968ec78 100644
--- a/src/app_modules/investasi/_view/status_transaksi/view_invoice_berhasil.tsx
+++ b/src/app_modules/investasi/_view/status_transaksi/view_invoice_berhasil.tsx
@@ -1,10 +1,14 @@
 "use client";
 
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_LoadImage,
   ComponentGlobal_TampilanRupiah,
 } from "@/app_modules/_global/component";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import {
   Box,
   Button,
@@ -16,22 +20,39 @@ import {
   Text,
   Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconBrandCashapp } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useState } from "react";
+import { apiGetOneSahamInvestasiById } from "../../_lib/api_fetch_new_investasi";
 import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
 
-export function Investasi_ViewTransaksiBerhasil({
-  dataTransaksi,
-}: {
-  dataTransaksi: any;
-}) {
-  const router = useRouter();
-  const [data, setData] = useState<MODEL_INVOICE_INVESTASI>(dataTransaksi);
-  const [isLoading, setLoading] = useState(false);
-  const [file, setFile] = useState<File | null>(null);
+export function Investasi_ViewTransaksiBerhasil() {
   const [opened, setOpened] = useState(false);
 
+  const param = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_INVOICE_INVESTASI | null>(null);
+
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      const response = await apiGetOneSahamInvestasiById({ id: param.id });
+      if (response.success) {
+        setData(response.data);
+      } else {
+        setData(null);
+      }
+    } catch (error) {
+      console.error("Error get investasi", error);
+      setData(null);
+    }
+  };
+
+  if (!data) return <CustomSkeleton height={"50vh"} width={"100%"} />;
+
   return (
     <>
       <Stack spacing={"lg"} py={"md"}>
diff --git a/src/app_modules/investasi/_view/status_transaksi/view_transaksi_gagal.tsx b/src/app_modules/investasi/_view/status_transaksi/view_transaksi_gagal.tsx
index e397016d..fe34f04e 100644
--- a/src/app_modules/investasi/_view/status_transaksi/view_transaksi_gagal.tsx
+++ b/src/app_modules/investasi/_view/status_transaksi/view_transaksi_gagal.tsx
@@ -2,7 +2,10 @@
 
 import { RouterAdminInvestasi } from "@/lib/router_admin/router_admin_investasi";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_LoadImage, ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_LoadImage,
+  ComponentGlobal_TampilanRupiah,
+} from "@/app_modules/_global/component";
 import {
   ActionIcon,
   Box,
@@ -18,23 +21,58 @@ import {
   Title,
 } from "@mantine/core";
 import { IconBrandWhatsapp } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_INVOICE_INVESTASI } from "../../_lib/interface";
 import { Prisma } from "@prisma/client";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetOneSahamInvestasiById } from "../../_lib/api_fetch_new_investasi";
+import { apiGetAdminContact } from "@/app_modules/_global/lib/api_fetch_master";
 
-export function Investasi_ViewTransaksiGagal({
-  dataTransaksi,
-  nomorAdmin,
-}: {
-  dataTransaksi: any;
-  nomorAdmin: Prisma.NomorAdminCreateInput;
-}) {
-  const router = useRouter();
-  const [data, setData] = useState<MODEL_INVOICE_INVESTASI>(dataTransaksi);
-  const [isLoading, setLoading] = useState(false);
-  const [file, setFile] = useState<File | null>(null);
+export function Investasi_ViewTransaksiGagal() {
   const [opened, setOpened] = useState(false);
+  const router = useRouter();
+
+  const param = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_INVOICE_INVESTASI | null>(null);
+  const [nomorAdmin, setNomorAdmin] =
+    useState<Prisma.NomorAdminCreateInput | null>(null);
+
+  useShallowEffect(() => {
+    handleLoadData();
+    handleLoadNomorAdmin();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      const response = await apiGetOneSahamInvestasiById({ id: param.id });
+      if (response.success) {
+        setData(response.data);
+      } else {
+        setData(null);
+      }
+    } catch (error) {
+      console.error("Error get investasi", error);
+      setData(null);
+    }
+  };
+
+  const handleLoadNomorAdmin = async () => {
+    try {
+      const response = await apiGetAdminContact();
+      if (response.success) {
+        setNomorAdmin(response.data);
+      } else {
+        setNomorAdmin(null);
+      }
+    } catch (error) {
+      console.error("Error get nomor admin", error);
+    }
+  };
+
+  if (!data || !nomorAdmin)
+    return <CustomSkeleton height={"50vh"} width={"100%"} />;
 
   return (
     <>
@@ -58,7 +96,7 @@ export function Investasi_ViewTransaksiGagal({
           <Center>
             <ActionIcon radius={"100%"} size={70} variant="light" color="white">
               <a
-                href={`whatsapp://wa.me/${nomorAdmin.nomor}?text=Hallo admin ! Saya ada kendala pada transaksi Investasi`}
+                href={`whatsapp://wa.me/${nomorAdmin?.nomor}?text=Hallo admin ! Saya ada kendala pada transaksi Investasi`}
               >
                 <IconBrandWhatsapp size={50} color="green" />
               </a>