# style:

- UI Investasi
- UI Donasi
## No issue

src/app/dev/donasi/detail/detail_donasi_saya/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/donasi/detail/detail_publish/[id]/page.tsx

@@ -8,7 +8,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   const countDonatur= await Donasi_getCountDonatur(params.id)
   const userLoginId = await user_getOneUserId();
 
-  console.log(userLoginId)
+  // console.log(userLoginId)
 
   return (
     <>

src/app/dev/donasi/donatur/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/donasi/edit/update_kabar/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/donasi/kabar/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/donasi/list_kabar/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/donasi/proses_donasi/proses_transaksi/[id]/page.tsx

@@ -1,16 +1,18 @@
 import { Donasi_ProsesTransaksi } from "@/app_modules/donasi";
 import { Donasi_getOneInvoiceById } from "@/app_modules/donasi/fun/get/get_one_invoice_by_id";
+import { donasi_getOneStatusInvoiceById } from "@/app_modules/donasi/fun/get/get_one_status_invoice_by_id";
 import donasi_getMasterNomorAdmin from "@/app_modules/donasi/fun/master/get_nomor_admin";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  // console.log(params.id)
-  const dataInvoice = await Donasi_getOneInvoiceById(params.id);
+  let invoiceId = params.id;
   const nomorAdmin = await donasi_getMasterNomorAdmin();
+  const statusInvoice = await donasi_getOneStatusInvoiceById({invoiceId: invoiceId})
+  // console.log(statusInvoice)
 
   return (
     <>
       <Donasi_ProsesTransaksi
-        dataInvoice={dataInvoice as any}
+        statusInvoice={statusInvoice as any}
         nomorAdmin={nomorAdmin}
       />
     </>

src/app/dev/investasi/create/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/create/page.tsx

@@ -24,7 +24,6 @@ export default async function Page() {
   const pembagianDeviden = await getPembagianDeviden();
   const statusInvestasi = await getStatusInvestasi();
 
-
   return (
     <>
       <InvestasiCreate

src/app/dev/investasi/detail_dokumen/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/detail_portofolio/draft/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/detail_portofolio/publish/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/detail_portofolio/reject/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/detail_portofolio/review/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/detail_prospektus/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/edit_dokumen/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/edit_intro/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/edit_prospektus/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/list_edit_berita/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/upload_dokumen/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app/dev/investasi/upload_prospektus/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

src/app_modules/admin/donasi/detail/detail_review.tsx

@@ -35,6 +35,8 @@ import { AdminDonasi_funUpdateStatusReject } from "../fun/update/fun_status_reje
 import ComponentAdminGlobal_BackButton from "../../component_global/back_button";
 import ComponentAdminDonasi_TampilanDetailDonasi from "../component/tampilan_detail_donasi";
 import ComponentAdminDonasi_CeritaPenggalangDana from "../component/tampilan_detail_cerita";
+import mqtt_client from "@/util/mqtt_client";
+import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
 
 export default function AdminDonasi_DetailReview({
   dataReview,
@@ -80,22 +82,36 @@ function ButtonOnHeader({
   const [catatan, setCatatan] = useState("");
 
   async function onPulish() {
-    await AdminDonasi_funUpdateStatusPublish(donasi.id, "1").then(
-      async (res) => {
-        if (res.status === 200) {
-          const newData = await AdminDonasi_getOneById(donasi?.id);
-          setData(newData);
-          ComponentAdminGlobal_NotifikasiBerhasil(
-            "Berhasil Mengubah Status Donasi"
-          );
-          setLoadingPublish(true);
-        } else {
-          ComponentAdminGlobal_NotifikasiPeringatan(
-            "Gagal Mengubah Status Donasi"
-          );
-        }
+    const res = await AdminDonasi_funUpdateStatusPublish(donasi.id, "1");
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.id,
+        status: res.data?.DonasiMaster_Status?.name as any,
+        userId: res.data?.authorId as any,
+        pesan: res.data?.title as any,
+        kategoriApp: "DONASI",
+        title: "Donasi publish",
+      };
+
+      const notif = await adminNotifikasi_funCreateToUser({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({ userId: res?.data?.authorId, count: 1 })
+        );
+        const newData = await AdminDonasi_getOneById(donasi?.id);
+        setData(newData);
+        ComponentAdminGlobal_NotifikasiBerhasil(
+          "Berhasil Mengubah Status Donasi"
+        );
+        setLoadingPublish(true);
       }
-    );
+    } else {
+      ComponentAdminGlobal_NotifikasiPeringatan("Gagal Mengubah Status Donasi");
+    }
   }
 
   async function onReject() {
@@ -104,19 +120,40 @@ function ButtonOnHeader({
         "Lengkapi Alasan Penolakan"
       );
 
-    await AdminDonasi_funUpdateStatusReject(donasi.id, "4", catatan).then(
-      async (res) => {
-        if (res.status === 200) {
-          const newData = await AdminDonasi_getOneById(donasi?.id);
-          setData(newData);
-          close();
-          ComponentAdminGlobal_NotifikasiBerhasil(res.message);
-          setLoadingReject(true);
-        } else {
-          ComponentAdminGlobal_NotifikasiGagal(res.message);
-        }
-      }
+    const res = await AdminDonasi_funUpdateStatusReject(
+      donasi.id,
+      "4",
+      catatan
     );
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.id,
+        status: res.data?.DonasiMaster_Status?.name as any,
+        userId: res.data?.authorId as any,
+        pesan: res.data?.title as any,
+        kategoriApp: "DONASI",
+        title: "Donasi anda di tolak !",
+      };
+
+      const notif = await adminNotifikasi_funCreateToUser({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({ userId: res?.data?.authorId, count: 1 })
+        );
+      }
+
+      const newData = await AdminDonasi_getOneById(donasi?.id);
+      setData(newData);
+      close();
+      ComponentAdminGlobal_NotifikasiBerhasil(res.message);
+      setLoadingReject(true);
+    } else {
+      ComponentAdminGlobal_NotifikasiGagal(res.message);
+    }
   }
 
   return (
@@ -190,5 +227,3 @@ function ButtonOnHeader({
     </>
   );
 }
-
-

src/app_modules/admin/donasi/detail/publish/detail_publish.tsx

@@ -55,6 +55,8 @@ import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
 import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
 import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/component_global/admin_notifikasi/notifikasi_berhasil";
 import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/component_global/admin_notifikasi/notifikasi_gagal";
+import mqtt_client from "@/util/mqtt_client";
+import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
 
 export default function AdminDonasi_DetailPublish({
   dataPublish,
@@ -266,7 +268,6 @@ function TampilanListDonatur({
   donatur: any;
   listMasterStatus: MODEL_NEW_DEFAULT_MASTER[];
   dataDonasi: MODEL_DONASI;
-
   onSuccessDonasi: (val: any) => void;
 }) {
   const router = useRouter();
@@ -509,6 +510,57 @@ function ButtonAccept({
       target: target,
     });
     if (updateStatus.status == 200) {
+      const dataNotif = {
+        appId: updateStatus.data?.id,
+        userId: updateStatus.data?.authorId,
+        pesan: updateStatus.data?.Donasi?.title,
+        status: updateStatus.data?.DonasiMaster_StatusInvoice?.name,
+        kategoriApp: "DONASI",
+        title: "Terimakasih, Donasi anda telah diterima",
+      };
+
+      const notif = await adminNotifikasi_funCreateToUser({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({ userId: updateStatus?.data?.authorId, count: 1 })
+        );
+
+        mqtt_client.publish(
+          "donasi_invoice",
+          JSON.stringify({
+            invoiceId: invoiceId,
+            statusInvoiceId: "1",
+          })
+        );
+      }
+
+      const dataNotifToAuthorDonasi = {
+        appId: updateStatus.data?.Donasi?.id,
+        userId: updateStatus.data?.Donasi?.authorId,
+        pesan: updateStatus.data?.Donasi?.title,
+        status: "Donatur Baru",
+        kategoriApp: "DONASI",
+        title: "Ada donatur baru",
+      };
+
+      const notifToAuthorDonasi = await adminNotifikasi_funCreateToUser({
+        data: dataNotifToAuthorDonasi as any,
+      });
+
+      if (notifToAuthorDonasi.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({
+            userId: updateStatus?.data?.Donasi?.authorId,
+            count: 1,
+          })
+        );
+      }
+
       const updateData = await AdminDonasi_getOneById(donasiId);
       onSuccessDonasi(updateData as any);
       const updatelistDonatur = await adminDonasi_getListDonatur({
@@ -516,7 +568,6 @@ function ButtonAccept({
         page: 1,
       });
       onSuccessDonatur(updatelistDonatur);
-
       ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
     } else {
       ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);

src/app_modules/admin/donasi/fun/count/fun_count_donatur.ts

@@ -5,7 +5,8 @@ import prisma from "@/app/lib/prisma";
 export async function AdminDonasi_funCountDonatur(donasiId: string) {
   const donatur = await prisma.donasi_Invoice.count({
    where: {
-    donasiId: donasiId
+    donasiId: donasiId,
+    donasiMaster_StatusInvoiceId: "1"
    }
   });
 

src/app_modules/admin/donasi/fun/get/get_list_review.ts

@@ -20,7 +20,7 @@ export default async function adminDonasi_getListReview({
     skip: skipData,
     take: takeData,
     orderBy: {
-      createdAt: "desc",
+      updatedAt: "desc",
     },
     where: {
       donasiMaster_StatusDonasiId: "2",

src/app_modules/admin/donasi/fun/get/get_one_by_id.ts

@@ -33,7 +33,6 @@ export async function AdminDonasi_getOneById(id: string) {
       DonasiMaster_Ketegori: true,
       DonasiMaster_Durasi: true,
       DonasiMaster_Status: true,
-      
     },
   });
   return res;

src/app_modules/admin/donasi/fun/update/fun_status_publish.ts

@@ -1,6 +1,7 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
+import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
 import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { revalidatePath } from "next/cache";
@@ -19,11 +20,22 @@ export async function AdminDonasi_funUpdateStatusPublish(
       donasiMaster_StatusDonasiId: statusId,
       publishTime: new Date(publishTime),
     },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      DonasiMaster_Status: {
+        select: {
+          name: true,
+        },
+      },
+    },
   });
 
   if (!data) return { status: 400, message: "Data tidak ditemukan" };
-  revalidatePath("/dev/admin/donasi/table/review");
+  revalidatePath(RouterAdminDonasi.table_review);
   return {
+    data: data,
     status: 200,
     message: "Status berhasil diganti",
   };

src/app_modules/admin/donasi/fun/update/fun_status_reject.ts

@@ -19,11 +19,22 @@ export async function AdminDonasi_funUpdateStatusReject(
       donasiMaster_StatusDonasiId: statusId,
       catatan: catatan,
     },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      DonasiMaster_Status: {
+        select: {
+          name: true,
+        },
+      },
+    },
   });
 
   if (!data) return { status: 400, message: "Data tidak ditemukan" };
   revalidatePath(RouterAdminDonasi.table_review);
   return {
+    data: data,
     status: 200,
     message: "Status berhasil diganti",
   };

src/app_modules/admin/donasi/fun/update/fun_update_status_dan_total.ts

@@ -30,6 +30,23 @@ export default async function adminDonasi_funUpdateStatusDanTotal({
     data: {
       donasiMaster_StatusInvoiceId: statusInvoiceId,
     },
+    select: {
+      id: true,
+      authorId: true,
+      Donasi: {
+        select: {
+          id: true,
+          title: true,
+          authorId: true,
+          
+        },
+      },
+      DonasiMaster_StatusInvoice: {
+        select: {
+          name: true,
+        },
+      },
+    },
   });
   if (!updateInvoice) return { status: 400, message: "Update invoice gagal" };
 
@@ -45,5 +62,5 @@ export default async function adminDonasi_funUpdateStatusDanTotal({
 
   if (!updateDonasi) return { status: 400, message: "Update donasi gagal" };
   revalidatePath(RouterAdminDonasi_OLD.detail_publish + donasiId);
-  return { status: 200, message: "Update Berhasil" };
+  return { data: updateInvoice, status: 200, message: "Update Berhasil" };
 }

src/app_modules/admin/event/table_status/table_review.tsx

@@ -229,7 +229,7 @@ async function onReject(
     catatan: catatan,
   };
 
-  const res = await AdminEvent_funEditCatatanById(body as any, "4");
+  const res  = await AdminEvent_funEditCatatanById(body as any, "4");
   if (res.status === 200) {
     const dataNotif = {
       appId: res.data?.id,

src/app_modules/admin/layout.tsx

@@ -53,6 +53,7 @@ import adminNotifikasi_findRouterJob from "./notifikasi/route_setting/job";
 import adminNotifikasi_findRouterForum from "./notifikasi/route_setting/forum";
 import { adminNotifikasi_findRouterVoting } from "./notifikasi/route_setting/voting";
 import { adminNotifikasi_findRouterEvent } from "./notifikasi/route_setting/event";
+import adminNotifikasi_findRouterDonasi from "./notifikasi/route_setting/donasi";
 
 export default function AdminLayout({
   children,
@@ -441,6 +442,17 @@ function DrawerNotifikasi({
                     },
                   });
 
+                  e.kategoriApp === "DONASI" && adminNotifikasi_findRouterDonasi({
+                    data: e,
+                    router: router,
+                    onChangeNavbar(val) {
+                      onChangeNavbar(val);
+                    },
+                    onToggleNavbar(val) {
+                      onToggleNavbar(val);
+                    },
+                  })
+
                 const updateIsRead = await adminNotifikasi_funUpdateIsReadById({
                   notifId: e?.id,
                 });

src/app_modules/admin/notifikasi/route_setting/donasi.ts

@@ -0,0 +1,50 @@
+import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
+import { RouterAdminDonasi_OLD } from "@/app/lib/router_hipmi/router_admin";
+import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
+import _ from "lodash";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+
+export default async function adminNotifikasi_findRouterDonasi({
+  data,
+  router,
+  onChangeNavbar,
+  onToggleNavbar,
+}: {
+  data: MODEL_NOTIFIKASI;
+  router: AppRouterInstance;
+  onChangeNavbar: (val: any) => void;
+  onToggleNavbar: (val: any) => void;
+}) {
+  if (data.status === "Review") {
+    const path = RouterAdminDonasi.table_review;
+    router.push(path);
+    onChangeNavbar({
+      id: 3,
+      childId: 33,
+    });
+  }
+
+  if (
+    data.status === "Menunggu" ||
+    data.status === "Berhasil" ||
+    data.status === "Proses" ||
+    data.status === "Gagal"
+  ) {
+    const path = RouterAdminDonasi_OLD.detail_publish + data.appId;
+    router.push(path, { scroll: false });
+    onChangeNavbar({
+      id: 3,
+      childId: 32,
+    });
+  }
+
+  //   if (data.status === "Draft") {
+  //     router.push(routeName + "review");
+  //     onChangeNavbar({
+  //       id: 6,
+  //       childId: 63,
+  //     });
+  //   }
+
+  onToggleNavbar(true);
+}

src/app_modules/auth/fun/fun_validasi.ts

@@ -18,7 +18,7 @@ export async function auth_funValidasi(nomor: string) {
       id: true,
       nomor: true,
       username: true,
-      masterUserRoleId: true
+      masterUserRoleId: true,
     },
   });
 
@@ -37,13 +37,15 @@ export async function auth_funValidasi(nomor: string) {
     cookies().set({
       name: "ssn",
       value: res,
-      maxAge: 60 * 60 * 24 * 7,
+      maxAge: 60 * 60 * 24 * 30,
     });
 
     revalidatePath(RouterHome.main_home);
   }
 
-
-
-  return { status: 200, message: "Nomor Terverifikasi", role: cek.masterUserRoleId };
+  return {
+    status: 200,
+    message: "Nomor Terverifikasi",
+    role: cek.masterUserRoleId,
+  };
 }

src/app_modules/crowd/main/view.tsx

@@ -63,13 +63,13 @@ export default function MainCrowd() {
               color: "white",
             }}
             onClick={() => {
-              setLoadingInv(true);
-              router.push(RouterCrowd.investasi);
-              setChangeColor(0);
-              // ComponentGlobal_NotifikasiPeringatan(
-              //   "Sementara ini sedang maintenance",
-              //   3000
-              // );
+              // setLoadingInv(true);
+              // router.push(RouterCrowd.investasi);
+              // setChangeColor(0);
+              ComponentGlobal_NotifikasiPeringatan(
+                "Sementara ini sedang maintenance",
+                3000
+              );
             }}
           >
             <Grid>
@@ -103,13 +103,13 @@ export default function MainCrowd() {
               color: "white",
             }}
             onClick={() => {
-              setLoadingDon(true);
-              router.push(RouterCrowd.donasi);
-              setDonasiHotMenu(0);
-                // ComponentGlobal_NotifikasiPeringatan(
-                //   "Sementara ini sedang maintenance",
-                //   3000
-                // );
+              // setLoadingDon(true);
+              // router.push(RouterCrowd.donasi);
+              // setDonasiHotMenu(0);
+              ComponentGlobal_NotifikasiPeringatan(
+                "Sementara ini sedang maintenance",
+                3000
+              );
             }}
           >
             <Grid>

src/app_modules/donasi/component/detail_galang_dana/detail_data_donasi.tsx

@@ -35,11 +35,9 @@ export default function ComponentDonasi_DetailDataGalangDana({
       >
         <Stack>
           <AspectRatio
-            ratio={9 / 16}
+            ratio={1 / 1}
             mx={"sm"}
             mah={300}
-            // bg={"blue"}
-            style={{}}
           >
             <Image
               alt="Foto"

src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx

@@ -42,14 +42,14 @@ export default function ComponentDonasi_CeritaPenggalangMain({
             <Group position="apart">
               <Text>
                 {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
-                  donasi.createdAt
+                  donasi?.createdAt
                 )}
               </Text>
               <ActionIcon
                 variant="transparent"
                 onClick={() => {
                   setLoading(true);
-                  router.push(RouterDonasi.cerita_penggalang + `${donasi.id}`);
+                  router.push(RouterDonasi.cerita_penggalang + `${donasi?.id}`);
                 }}
               >
                 {isLoading ? (
@@ -63,7 +63,7 @@ export default function ComponentDonasi_CeritaPenggalangMain({
                 )}
               </ActionIcon>
             </Group>
-            <Text lineClamp={4}>{donasi.CeritaDonasi.cerita}</Text>
+            <Text lineClamp={4}>{donasi?.CeritaDonasi.cerita}</Text>
             {/* <Text c={"blue"}>Baca selengkapnya</Text> */}
           </Stack>
         </Paper>

src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx

@@ -62,23 +62,30 @@ export function ComponentDonasi_DetailDataMain({
         }}
       >
         <Stack>
-          <Center>
+          <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
+            <Image
+              alt="Foto"
+              src={RouterDonasi.api_image + `${donasi?.imageDonasi?.url}`}
+              radius={"sm"}
+            />
+          </AspectRatio>
+          {/* <Center>
             <Image
               maw={200}
               radius={"xs"}
               alt="Foto"
-              src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
+              src={RouterDonasi?.api_gambar + `${donasi?.imagesId}`}
             />
-          </Center>
+          </Center> */}
           {/* <AspectRatio ratio={16 / 9}>
             <Paper radius={"md"}>
             </Paper>
           </AspectRatio> */}
           <Stack spacing={0} mt={"lg"}>
-            <Title order={4}>{donasi.title}</Title>
+            <Title order={4}>{donasi?.title}</Title>
             <ComponentDonasi_TampilanHitungMundur
-              durasi={donasi.DonasiMaster_Durasi.name}
-              publishTime={donasi.publishTime}
+              durasi={donasi?.DonasiMaster_Durasi.name}
+              publishTime={donasi?.publishTime}
             />
           </Stack>
           <Stack spacing={0}>
@@ -86,12 +93,12 @@ export function ComponentDonasi_DetailDataMain({
               <Stack spacing={0}>
                 <Text fz={12}>Dana terkumpul</Text>
                 <Title order={4} c="blue">
-                  <TampilanRupiahDonasi nominal={+donasi.terkumpul} />
+                  <TampilanRupiahDonasi nominal={+donasi?.terkumpul} />
                 </Title>
                 <Group>
                   <Text fz={10}>Dari total</Text>{" "}
                   <TampilanRupiahDonasi
-                    nominal={+donasi.target}
+                    nominal={+donasi?.target}
                     fontSize={10}
                   />
                 </Group>
@@ -104,12 +111,12 @@ export function ComponentDonasi_DetailDataMain({
                     color: MainColor.yellow,
                   }}
                 >
-                  {donasi.DonasiMaster_Ketegori.name}
+                  {donasi?.DonasiMaster_Ketegori.name}
                 </Title>
               </Stack>
             </Group>
           </Stack>
-          <Progress value={+donasi.progres} animate />
+          <Progress value={+donasi?.progres} color="yellow" size={"lg"} />
 
           <Grid>
             <Grid.Col
@@ -145,7 +152,7 @@ export function ComponentDonasi_DetailDataMain({
               span={"auto"}
               onClick={() => {
                 setLoadingKabar(true);
-                router.push(RouterDonasi.kabar + `${donasi.id}`);
+                router.push(RouterDonasi.kabar + `${donasi?.id}`);
               }}
             >
               <Stack spacing={"sm"} align="center">

src/app_modules/donasi/component/detail_main/informasi_penggalang.tsx

@@ -73,14 +73,15 @@ export default function ComponentDonasi_InformasiPenggalangMain({
             <Group>
               <Avatar radius={"xl"} variant="filled" bg={"blue"}>
                 {(() => {
-                  const usr = author.username;
-                  const splt = usr.split("");
+                  // return null
+                  const usr = author?.username;
+                  const splt = usr?.split("");
                   const Up = _.upperCase(splt[0]);
 
                   return Up;
                 })()}
               </Avatar>
-              <Text>{author.username}</Text>
+              <Text>{author?.username}</Text>
             </Group>
             <ComponentGlobal_BoxInformation
               informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,

src/app_modules/donasi/component/detail_main/list_kabar.tsx

@@ -6,35 +6,34 @@ import moment from "moment";
 
 import { MODEL_DONASI_KABAR } from "../../model/interface";
 import { useRouter } from "next/navigation";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentDonasi_ListKabar({
   kabar,
-  route
+  route,
 }: {
   kabar: MODEL_DONASI_KABAR;
-  route: string
+  route: string;
 }) {
   const router = useRouter();
   return (
     <>
-      <Paper bg={"gray.1"} p={"md"}>
+      <Paper
+        style={{
+          backgroundColor: AccentColor.blue,
+          border: `2px solid ${AccentColor.darkblue}`,
+          padding: "15px",
+          cursor: "pointer",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "5px",
+        }}
+        onClick={() => router.push(route + `${kabar.id}`)}
+      >
         <Stack>
           <Text fz={"xs"}>{moment(kabar.createdAt).format("ll")}</Text>
 
-          <Stack>
-            <Title order={5}>{kabar.title}</Title>
-            <Stack spacing={0}>
-              <Text lineClamp={2}>{kabar.deskripsi}</Text>
-              <Text
-                c={"blue"}
-                onClick={() =>
-                  router.push(route + `${kabar.id}`)
-                }
-              >
-                Buka Kabar
-              </Text>
-            </Stack>
-          </Stack>
+          <Title order={5}>{kabar.title}</Title>
         </Stack>
       </Paper>
     </>

src/app_modules/donasi/component/footer_close_donasi.tsx

@@ -3,18 +3,15 @@
 import { Footer, Center, Button } from "@mantine/core";
 import { useRouter } from "next/navigation";
 
-
 export default function FooterDonasi() {
-    const router = useRouter()
+  const router = useRouter();
   return (
     <>
-      <Footer height={70} px={"md"}>
-        <Center h={"100%"}>
-          <Button w={"100%"} radius={"xl"} onClick={() => router.back()}>
-            Tutup
-          </Button>
-        </Center>
-      </Footer>
+      <Center h={"100%"}>
+        <Button w={"80%"} radius={"xl"} onClick={() => router.back()}>
+          Tutup
+        </Button>
+      </Center>
     </>
   );
 }

src/app_modules/donasi/create/create_cerita_penggalang.tsx

@@ -1,11 +1,17 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
 import {
   ComponentGlobal_WarningMaxUpload,
   maksimalUploadFile,
 } from "@/app_modules/_global/component/waring_popup";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import {
   AspectRatio,
   Button,
@@ -23,17 +29,13 @@ import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-simple-toasts";
-import ComponentDonasi_NotedBox from "../component/noted_box";
 import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
 import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
 import { gs_donasi_hot_menu, gs_donasi_tabs_posting } from "../global_state";
 import { MODEL_DONASI_TEMPORARY } from "../model/interface";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import mqtt_client from "@/util/mqtt_client";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 export default function CreateCeritaPenggalangDonasi({
   dataTemporary,
   userId,
@@ -82,16 +84,37 @@ export default function CreateCeritaPenggalangDonasi({
       },
     };
 
-    await Donasi_funCreate(body as any, gambar).then((res) => {
-      if (res.status === 201) {
+    const res = await Donasi_funCreate(body as any, gambar);
+    if (res.status === 201) {
+      const dataNotif: any = {
+        appId: res.data?.id as any,
+        status: res.data?.DonasiMaster_Status?.name as any,
+        userId: res.data?.authorId as any,
+        pesan: res.data?.title as any,
+        kategoriApp: "DONASI",
+        title: "Donasi baru",
+      };
+      
+      const notif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "ADMIN",
+          JSON.stringify({
+            count: 1,
+          })
+        );
         setLoading(true);
-        router.push(RouterDonasi.page_pop_up_create, { scroll: false });
         setTabsPostingDonasi("Review");
         setDonasiHotMenu(1);
-      } else {
-        toast(res.message);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        router.push(RouterDonasi.main_galang_dana, { scroll: false });
       }
-    });
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
   }
   return (
     <>

src/app_modules/donasi/create/create_donasi.tsx

@@ -26,14 +26,13 @@ import {
   ComponentGlobal_WarningMaxUpload,
   maksimalUploadFile,
 } from "@/app_modules/_global/component/waring_popup";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import _ from "lodash";
 import { useState } from "react";
-import toast from "react-simple-toasts";
 import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
 import Donasi_funCreateTemporary from "../fun/create/fun_create_donasi_temporary";
 import { gs_donasi_tabs_posting } from "../global_state";
 import { MODEL_DONASI_ALL_MASTER } from "../model/interface";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 
 export default function CreateDonasi({
   masterKategori,

src/app_modules/donasi/create/create_kabar/index.tsx

@@ -9,6 +9,7 @@ import {
   Image,
   Paper,
   Stack,
+  Text,
   TextInput,
   Textarea,
 } from "@mantine/core";
@@ -25,6 +26,13 @@ import ComponentDonasi_NotedBox from "../../component/noted_box";
 import { Donasi_funCreateNotif } from "../../fun/create/fun_create_notif";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
 
 export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
   const router = useRouter();
@@ -36,21 +44,33 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
   });
   return (
     <>
-      <Stack>
-        <ComponentDonasi_NotedBox informasi="Gambar tidak wajib di isi ! Hanya upload jika di butuhkan." />
+      <Stack px={"lg"} pb={"lg"}>
+        <ComponentGlobal_BoxInformation informasi="Gambar tidak wajib di isi ! Hanya upload jika di butuhkan." />
 
         <TextInput
+          maxLength={100}
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Judul"
           withAsterisk
           placeholder="Masukan judul kabar"
           onChange={(val) => {
             setKabar({
               ...kabar,
-              judul: val.target.value,
+              judul: _.startCase(val.target.value),
             });
           }}
         />
         <Textarea
+          maxLength={500}
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Deskripsi"
           withAsterisk
           placeholder="Masukan deskripsi kabar"
@@ -61,15 +81,36 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
             });
           }}
         />
+        <ComponentGlobal_InputCountDown
+          lengthInput={kabar.deskripsi.length}
+          maxInput={500}
+        />
+
         <Stack>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"}>
-              <Image
-                alt="Foto"
-                src={imageKabar ? imageKabar : "/aset/no-img.png"}
-              />
-            </Paper>
-          </AspectRatio>
+          {imageKabar ? (
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.blue}`,
+                  backgroundColor: AccentColor.darkblue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
+                <Image
+                  alt="Foto"
+                  src={imageKabar ? imageKabar : "/aset/no-img.png"}
+                  maw={300}
+                />
+              </Paper>
+            </AspectRatio>
+          ) : (
+            <Center>
+              <Text fs={"italic"} fz={10} c={"white"}>
+                Upload gambar kabar !
+              </Text>
+            </Center>
+          )}
           <Center>
             <FileButton
               onChange={async (files: any | null) => {
@@ -91,10 +132,10 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
                 <Button
                   {...props}
                   radius={"xl"}
-                  variant="outline"
-                  w={150}
                   leftIcon={<IconCamera />}
-                  compact
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                 >
                   Upload
                 </Button>
@@ -103,8 +144,15 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
           </Center>
         </Stack>
         <Button
+          style={{
+            transition: "0.5s",
+          }}
+          disabled={_.values(kabar).includes("") ? true : false}
           radius={"xl"}
           mt={"lg"}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
           onClick={() => onSave(router, donasiId, kabar, file as any)}
         >
           Simpan
@@ -131,24 +179,17 @@ async function onSave(
     deskripsi: kabar.deskripsi,
   };
 
-  if (_.values(body).includes("")) return NotifPeringatan("Lengkapi Data");
+  if (_.values(body).includes(""))
+    return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
   // if (!file) return NotifPeringatan("Lengkapi Gambar");
 
   const gambar = new FormData();
   gambar.append("file", file as any);
 
-  await Donasi_funCreateKabar(body as any, gambar).then(async (res) => {
-    if (res.status === 200) {
-      await Donasi_funCreateNotif(body.donasiId, res.kabarId as any).then(
-        (val) => {
-          if (val.status === 200) {
-            ComponentGlobal_NotifikasiBerhasil(res.message);
-            router.back();
-          }
-        }
-      );
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
+  const res = await Donasi_funCreateKabar(body as any, gambar);
+  if (res.status === 200) {
+    // Notif ke setiap donatur
+  } else {
+    ComponentGlobal_NotifikasiGagal(res.message);
+  }
 }

src/app_modules/donasi/create/create_kabar/layout.tsx

@@ -3,6 +3,8 @@
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 import React from "react";
 import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutDonasi_CreateKabar({
   children,
@@ -11,9 +13,9 @@ export default function LayoutDonasi_CreateKabar({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Buat Kabar" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Tambah Kabar" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/donasi/detail/detail_donasi_saya/index.tsx

@@ -1,34 +1,13 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  ActionIcon,
-  AspectRatio,
-  Avatar,
-  Divider,
-  Grid,
-  Group,
-  Image,
-  Paper,
-  Progress,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import {
-  IconClover,
-  IconMessageChatbot,
-  IconMoneybag,
-  IconCircleChevronRight,
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import ComponentDonasi_NotedBox from "../../component/noted_box";
+import { Stack, Text, Title } from "@mantine/core";
 import { useState } from "react";
-import { MODEL_DONASI, MODEL_DONASI_INVOICE } from "../../model/interface";
-import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
+import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
 import { ComponentDonasi_DetailDataMain } from "../../component/detail_main/detail_data_donasi";
 import ComponentDonasi_InformasiPenggalangMain from "../../component/detail_main/informasi_penggalang";
-import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
+import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
+import { MODEL_DONASI_INVOICE } from "../../model/interface";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailDonasiSaya({
   dataDonasi,
@@ -40,27 +19,32 @@ export default function DetailDonasiSaya({
   const [invoice, setInvoice] = useState(dataDonasi);
   return (
     <>
-      <Stack>
-        <Stack spacing={0}>
+      <Stack pb={"lg"}>
+        <Stack
+          spacing={0}
+          style={{
+            padding: "15px",
+            border: `2px solid ${AccentColor.blue}`,
+            backgroundColor: AccentColor.darkblue,
+            borderRadius: "10px",
+            color: "white",
+          }}
+          align={"center"}
+        >
           <Text>Donasi Saya:</Text>
           <Title order={4} c={"blue"}>
-            <TampilanRupiahDonasi nominal={+invoice.nominal} />
+            <TampilanRupiahDonasi nominal={+invoice?.nominal} />
           </Title>
         </Stack>
         <ComponentDonasi_DetailDataMain
-          donasi={invoice.Donasi}
+          donasi={invoice?.Donasi}
           countDonatur={countDonatur}
         />
         <ComponentDonasi_InformasiPenggalangMain
-          author={invoice.Donasi.Author}
+          author={invoice?.Donasi.Author}
         />
-        <ComponentDonasi_CeritaPenggalangMain donasi={invoice.Donasi} />
+        <ComponentDonasi_CeritaPenggalangMain donasi={invoice?.Donasi} />
       </Stack>
     </>
   );
 }
-
-
-
-
-

src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx

@@ -4,13 +4,15 @@ import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi"
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate"
 import React from "react"
 import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate"
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"
 
 export default function LayoutDetailDonasiSaya({children}: {children: React.ReactNode}){
     return<>
-    <AppComponentGlobal_LayoutTamplate
-    header={<ComponentDonasi_HeaderTamplate title="Detail Donasi Saya" route={RouterDonasi.main_donasi_saya} />}
+    <UIGlobal_LayoutTamplate
+    header={<UIGlobal_LayoutHeaderTamplate title="Detail Donasi Saya" routerLeft={RouterDonasi.main_donasi_saya} />}
     >
         {children}
-    </AppComponentGlobal_LayoutTamplate>
+    </UIGlobal_LayoutTamplate>
     </>
 }

src/app_modules/donasi/detail/detail_draft/index.tsx

@@ -11,9 +11,10 @@ import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
 import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
 import { gs_donasi_tabs_posting } from "../../global_state";
 import { MODEL_DONASI } from "../../model/interface";
-import { useState } from "react";
-import { useShallowEffect } from "@mantine/hooks";
-import { Donasi_getOneById } from "../../fun/get/get_one_donasi_by_id";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import mqtt_client from "@/util/mqtt_client";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 
 export default function DetailDraftDonasi({
   dataDonasi,
@@ -52,15 +53,31 @@ function ButtonAjukanPenggalangan({
     gs_donasi_tabs_posting
   );
   async function onCLick() {
-    await Donasi_funGantiStatus(dataDonasi.id, "2").then((res) => {
-      if (res.status === 200) {
-        router.push(RouterDonasi.main_galang_dana);
+    const res = await Donasi_funGantiStatus(dataDonasi.id, "2");
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.id as any,
+        status: res.data?.DonasiMaster_Status?.name as any,
+        userId: res.data?.authorId as any,
+        pesan: res.data?.title as any,
+        kategoriApp: "DONASI",
+        title: "Mengajukan review",
+      };
+
+      const notif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+
         setTabsPostingDonasi("Review");
-        NotifBerhasil("Berhasil Diajukan");
-      } else {
-        NotifPeringatan(res.message);
+        ComponentGlobal_NotifikasiBerhasil("Berhasil Diajukan");
+        router.push(RouterDonasi.main_galang_dana);
       }
-    });
+    } else {
+      ComponentGlobal_NotifikasiPeringatan(res.message);
+    }
   }
   return (
     <>

src/app_modules/donasi/detail/detail_kabar/index.tsx

@@ -15,15 +15,27 @@ import {
 import moment from "moment";
 import { MODEL_DONASI_KABAR } from "../../model/interface";
 import { useState } from "react";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailKabarDonasi({dataDonasi}: {dataDonasi: MODEL_DONASI_KABAR}) {
   const [kabar, setKabar] = useState(dataDonasi)
   return (
     <>
-     <Stack>
+      <Stack
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          padding: "20px",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "15px",
+        }}
+      >
         <Stack>
-          <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
-          <Title order={5}>{kabar.title}</Title>
+          <Group position="right">
+            <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
+          </Group>
+          <Title align="center" order={4}>{kabar.title}</Title>
           {kabar.imagesId === null ? (
             ""
           ) : (

src/app_modules/donasi/detail/detail_kabar/layout.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { useRouter } from "next/navigation";
 import React from "react";
-import FooterDonasi from "../../component/footer_close_donasi";
-import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 
 export default function LayoutDetailKabarDonasi({
   children,
@@ -14,12 +13,12 @@ export default function LayoutDetailKabarDonasi({
   const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Detail Kabar" hideBack={true} />}
-        footer={<FooterDonasi />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Kabar" />}
+        // footer={<FooterDonasi />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx

@@ -10,17 +10,19 @@ import React from "react";
 export default function LayoutCeritaPenggalangDonasi({
   children,
   statusDonasiId,
-  donasiId
+  donasiId,
 }: {
   children: React.ReactNode;
   statusDonasiId: string;
-  donasiId: string
+  donasiId: string;
 }) {
   if (statusDonasiId !== "1") {
     return (
       <>
         <UIGlobal_LayoutTamplate
-          header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />}
+          header={
+            <UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />
+          }
         >
           {children}
         </UIGlobal_LayoutTamplate>
@@ -28,11 +30,11 @@ export default function LayoutCeritaPenggalangDonasi({
     );
   }
   return (
-    <AppComponentGlobal_LayoutTamplate
-      header={<ComponentDonasi_HeaderTamplate title="Cerita Penggalang Dana" />}
-      footer={<ButtonDonasi donasiId={donasiId}/>}
+    <UIGlobal_LayoutTamplate
+      header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />}
+      footer={<ButtonDonasi donasiId={donasiId} />}
     >
       {children}
-    </AppComponentGlobal_LayoutTamplate>
+    </UIGlobal_LayoutTamplate>
   );
 }

src/app_modules/donasi/detail/detail_main/donatur/index.tsx

@@ -1,23 +1,13 @@
 "use client";
 "use dev";
 
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentDonasi_IsEmptyData from "@/app_modules/donasi/component/is_empty_data";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import { MODEL_DONASI_INVOICE } from "@/app_modules/donasi/model/interface";
-import {
-  Avatar,
-  Center,
-  Grid,
-  Group,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import { IconMoodSmile, IconMoodSmileBeam } from "@tabler/icons-react";
-import _, { size } from "lodash";
-import moment from "moment";
+import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { IconMoodSmileBeam } from "@tabler/icons-react";
+import _ from "lodash";
 import { useState } from "react";
 
 export default function DonaturDonasi({
@@ -30,44 +20,45 @@ export default function DonaturDonasi({
 
   return (
     <>
-      <SimpleGrid
-        cols={4}
-        spacing="md"
-        breakpoints={[
-          { maxWidth: "62rem", cols: 3, spacing: "md" },
-          { maxWidth: "48rem", cols: 2, spacing: "sm" },
-          { maxWidth: "36rem", cols: 1, spacing: "sm" },
-        ]}
-      >
-        {donatur.map((e, i) => (
-          <Paper key={i} bg={"gray.1"} p={"sm"}>
-            <Grid>
-              <Grid.Col span={3}>
-                <Center h={"100%"}>
-                  {/* <Avatar variant="filled" radius={"xl"} size={"md"} /> */}
-                  <IconMoodSmileBeam size={50} />
-                </Center>
-              </Grid.Col>
-              <Grid.Col span={9}>
-                <Stack spacing={0}>
-                  <Title order={5}>{e.Author.username}</Title>
-                  <Group spacing={"xs"}>
-                    <Text fz={"xs"}>Berdonasi sebesar</Text>
-                    <Text truncate fw={"bold"}>
-                      <TampilanRupiahDonasi nominal={+e.nominal} />
-                    </Text>
-                  </Group>
-                  <Text fz={"xs"}>
-                    {new Intl.DateTimeFormat("id-ID", {
-                      dateStyle: "full",
-                    }).format(e?.createdAt)}
+      {donatur.map((e, i) => (
+        <Paper
+          key={i}
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `2px solid ${AccentColor.darkblue}`,
+            padding: "15px",
+            cursor: "pointer",
+            borderRadius: "10px",
+            color: "white",
+            marginBottom: "10px",
+          }}
+        >
+          <Grid>
+            <Grid.Col span={3}>
+              <Center h={"100%"}>
+                {/* <Avatar variant="filled" radius={"xl"} size={"md"} /> */}
+                <IconMoodSmileBeam size={50} />
+              </Center>
+            </Grid.Col>
+            <Grid.Col span={9}>
+              <Stack spacing={0}>
+                <Title order={5}>{e.Author.username}</Title>
+                <Group spacing={"xs"}>
+                  <Text fz={"xs"}>Berdonasi sebesar</Text>
+                  <Text truncate fw={"bold"}>
+                    <TampilanRupiahDonasi nominal={+e.nominal} />
                   </Text>
-                </Stack>
-              </Grid.Col>
-            </Grid>
-          </Paper>
-        ))}
-      </SimpleGrid>
+                </Group>
+                <Text fz={"xs"}>
+                  {new Intl.DateTimeFormat("id-ID", {
+                    dateStyle: "full",
+                  }).format(e?.createdAt)}
+                </Text>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+        </Paper>
+      ))}
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/donatur/layout.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentDonasi_HeaderTamplate from "../../../component/header_tamplate";
 
 export default function LayoutDonaturDonasi({
   children,
@@ -11,9 +11,11 @@ export default function LayoutDonaturDonasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentDonasi_HeaderTamplate title="Donatur" />}>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Donatur" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/kabar/index.tsx

@@ -1,25 +1,11 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import ComponentDonasi_ListKabar from "@/app_modules/donasi/component/detail_main/list_kabar";
-import ComponentDonasi_IsEmptyData from "@/app_modules/donasi/component/is_empty_data";
 import { MODEL_DONASI_KABAR } from "@/app_modules/donasi/model/interface";
-import {
-  ActionIcon,
-  Avatar,
-  Box,
-  Group,
-  Paper,
-  SimpleGrid,
-  Spoiler,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import { IconCircleChevronRight } from "@tabler/icons-react";
+import { Box } from "@mantine/core";
 import _ from "lodash";
-import moment from "moment";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 export default function KabarDonasi({
@@ -27,31 +13,21 @@ export default function KabarDonasi({
 }: {
   listKabar: MODEL_DONASI_KABAR[];
 }) {
-  const router = useRouter();
+
   const [kabar, setKabar] = useState(listKabar);
 
-  if (_.isEmpty(kabar)) return <ComponentDonasi_IsEmptyData />;
+  if (_.isEmpty(kabar)) return <ComponentGlobal_IsEmptyData />;
 
   return (
     <>
-      <SimpleGrid
-        cols={4}
-        spacing="lg"
-        breakpoints={[
-          { maxWidth: "62rem", cols: 3, spacing: "md" },
-          { maxWidth: "48rem", cols: 2, spacing: "sm" },
-          { maxWidth: "36rem", cols: 1, spacing: "sm" },
-        ]}
-      >
-        {kabar.map((e, i) => (
-          <Box key={i}>
-            <ComponentDonasi_ListKabar
-              kabar={e}
-              route={RouterDonasi.detail_kabar}
-            />
-          </Box>
-        ))}
-      </SimpleGrid>
+      {kabar.map((e, i) => (
+        <Box key={i}>
+          <ComponentDonasi_ListKabar
+            kabar={e}
+            route={RouterDonasi.detail_kabar}
+          />
+        </Box>
+      ))}
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/kabar/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentDonasi_HeaderTamplate from "../../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default function LayoutKabarDonasi({
   children,
@@ -12,11 +11,11 @@ export default function LayoutKabarDonasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Kabar Terbaru" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Kabar Terbaru" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/donasi/detail/detail_publish/index.tsx

@@ -22,7 +22,7 @@ export default function DetailPublishDonasi({
   return (
     <>
       {/* <pre>{JSON.stringify(donasi,null,2)}</pre> */}
-      <Stack spacing={40}>
+      <Stack spacing={"xl"} pb={"lg"}>
         <ComponentDonasi_DetailDataMain donasi={donasi} countDonatur={countDonatur} userLoginId={userLoginId}/>
         <ComponentDonasi_InformasiPenggalangMain author={donasi.Author}/>
         <ComponentDonasi_CeritaPenggalangMain donasi={donasi} />

src/app_modules/donasi/detail/detail_publish/layout.tsx

@@ -26,7 +26,7 @@ export default function LayoutDetailPublishDonasi({
   const listPage = [
     {
       id: "1",
-      name: "Kabar",
+      name: "Daftar Kabar",
       icon: <IconMessageShare />,
       path: RouterDonasi.list_kabar + donasiId,
     },

src/app_modules/donasi/detail/detail_review/index.tsx

@@ -1,21 +1,19 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  Button,
-  Stack
-} from "@mantine/core";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { Button, Stack } from "@mantine/core";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
 import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
 import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
 import { gs_donasi_tabs_posting } from "../../global_state";
 import { MODEL_DONASI } from "../../model/interface";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import mqtt_client from "@/util/mqtt_client";
 
 export default function DetailReviewDonasi({
   dataDonasi,
@@ -42,16 +40,32 @@ function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
   );
 
   async function onCLick() {
-    await Donasi_funGantiStatus(donasi.id, "3").then((res) => {
-      if (res.status === 200) {
+    const res = await Donasi_funGantiStatus(donasi.id, "3");
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.id as any,
+        status: res.data?.DonasiMaster_Status?.name as any,
+        userId: res.data?.authorId as any,
+        pesan: res.data?.title as any,
+        kategoriApp: "DONASI",
+        title: "Membatalkan review",
+      };
+      
+      const notif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+
         setTabsPostingDonasi("Draft");
-        NotifBerhasil("Berhasil Dibatalkan");
+        ComponentGlobal_NotifikasiBerhasil("Berhasil Dibatalkan");
         setLoading(true);
         router.push(RouterDonasi.main_galang_dana);
-      } else {
-        NotifPeringatan(res.message);
       }
-    });
+    } else {
+      ComponentGlobal_NotifikasiPeringatan(res.message);
+    }
   }
   return (
     <>

src/app_modules/donasi/edit/list_kabar/index.tsx

@@ -24,6 +24,7 @@ import { useRouter } from "next/navigation";
 import { MODEL_DONASI_KABAR } from "../../model/interface";
 import { useState } from "react";
 import ComponentDonasi_ListKabar from "../../component/detail_main/list_kabar";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ListKabarDonasi({
   donasiId,
@@ -41,24 +42,20 @@ export default function ListKabarDonasi({
           leftIcon={<IconCirclePlus />}
           radius={"xl"}
           onClick={() => router.push(RouterDonasi.create_kabar + `${donasiId}`)}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
         >
           Tambah Kabar
         </Button>
-        <SimpleGrid
-          cols={4}
-          spacing="lg"
-          breakpoints={[
-            { maxWidth: "62rem", cols: 3, spacing: "md" },
-            { maxWidth: "48rem", cols: 2, spacing: "sm" },
-            { maxWidth: "36rem", cols: 1, spacing: "sm" },
-          ]}
-        >
-          {kabar.map((e, i) => (
-           <Box key={i}>
-            <ComponentDonasi_ListKabar kabar={e} route={RouterDonasi.update_kabar}/>
-           </Box>
-          ))}
-        </SimpleGrid>
+        {kabar.map((e, i) => (
+          <Box key={i}>
+            <ComponentDonasi_ListKabar
+              kabar={e}
+              route={RouterDonasi.update_kabar}
+            />
+          </Box>
+        ))}
       </Stack>
     </>
   );

src/app_modules/donasi/edit/list_kabar/layout.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentDonasi_HeaderTamplate from "@/app_modules/donasi/component/header_tamplate";
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutListKabarDonasi({
@@ -12,10 +11,10 @@ export default function LayoutListKabarDonasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate 
-      header={<ComponentDonasi_HeaderTamplate title="List Kabar" />}>
+      <UIGlobal_LayoutTamplate 
+      header={<UIGlobal_LayoutHeaderTamplate title="Daftar Kabar" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/donasi/edit/update_kabar/index.tsx

@@ -15,6 +15,10 @@ import {
 import moment from "moment";
 import { MODEL_DONASI_KABAR } from "../../model/interface";
 import { useState } from "react";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 
 export default function UpdateKabarDonasi({
   dataKabar,
@@ -24,10 +28,23 @@ export default function UpdateKabarDonasi({
   const [kabar, setKabar] = useState(dataKabar);
   return (
     <>
-      <Stack>
+      <Stack
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          padding: "20px",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "15px",
+        }}
+      >
         <Stack>
-          <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
-          <Title order={5}>{kabar.title}</Title>
+          <Group position="right">
+            <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
+          </Group>
+          <Title align="center" order={4}>
+            {kabar.title}
+          </Title>
           {kabar.imagesId === null ? (
             ""
           ) : (

src/app_modules/donasi/edit/update_kabar/layout.tsx

@@ -18,6 +18,8 @@ import { Donasi_funDeleteKabar } from "../../fun/delete/fun_delete.kabar";
 import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutUpdateKabarDonasi({
   children,
@@ -30,28 +32,25 @@ export default function LayoutUpdateKabarDonasi({
 
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Update Kabar" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Update Kabar" />}
         footer={
-          <Footer height={70}>
-            <Group align="center" h={"100%"} position="center" spacing={"xl"}>
-              {/* <Button radius={"xl"} variant="outline" color="green">
+          <Group align="center" h={"100%"} position="center" spacing={"xl"}>
+            {/* <Button radius={"xl"} variant="outline" color="green">
                 Edit
               </Button> */}
-              <Button
-                radius={"xl"}
-                variant="outline"
-                color="red"
-                onClick={() => onDelete(router, kabarId)}
-              >
-                Hapus
-              </Button>
-            </Group>
-          </Footer>
+            <Button
+              radius={"xl"}
+              color="red"
+              onClick={() => onDelete(router, kabarId)}
+            >
+              Hapus
+            </Button>
+          </Group>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/donasi/fun/create/fun_create_donasi.ts

@@ -22,6 +22,16 @@ export async function Donasi_funCreate(req: MODEL_DONASI, file: FormData) {
       namaBank: body.namaBank,
       rekening: body.rekening,
     },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      DonasiMaster_Status: {
+        select: {
+          name: true,
+        },
+      },
+    },
   });
 
   if (!dataDonasi) return { status: 400, message: "Gagal disimpan" };
@@ -62,6 +72,7 @@ export async function Donasi_funCreate(req: MODEL_DONASI, file: FormData) {
   if (!dataCerita) return { status: 400, message: "Gagal simpan data cerita" };
   revalidatePath("/dev/donasi/main/galang_dana");
   return {
+    data: dataDonasi,
     status: 201,
     message: "Data donasi tersimpan",
   };

src/app_modules/donasi/fun/create/fun_create_invoice.tsx

@@ -9,16 +9,30 @@ export async function Donasi_funCreateInvoice(data: any) {
       donasiId: data.donasiId,
       nominal: data.nominal,
       donasiMaster_BankId: data.donasiMaster_BankId,
-      authorId: data.authorId
+      authorId: data.authorId,
+    },
+    select: {
+      id: true,
+      DonasiMaster_StatusInvoice: {
+        select: {
+          name: true,
+        },
+      },
+      Donasi: {
+        select: {
+          id: true,
+          title: true,
+          authorId: true,
+        },
+      },
     },
   });
 
-
   if (!res) return { status: 400, message: "Gagal membuat invoice" };
-  revalidatePath("/dev/donasi/main/donasi_saya")
+  revalidatePath("/dev/donasi/main/donasi_saya");
   return {
     status: 200,
     message: "Berhasil membuat invoice",
-    invoiceId: res.id
+    data: res,
   };
 }

src/app_modules/donasi/fun/create/fun_create_kabar.ts

@@ -12,16 +12,6 @@ export async function Donasi_funCreateKabar(
   req: MODEL_DONASI_KABAR | any,
   file: FormData
 ) {
-  const create = await prisma.donasi_Kabar.create({
-    data: {
-      title: req.title,
-      deskripsi: req.deskripsi,
-      donasiId: req.donasiId,
-    },
-  });
-
-  if (!create) return { status: 400, message: "Gagal membuat data" };
-
   const dataImage: any = file.get("file");
   if (dataImage !== "null") {
     const fileName = dataImage.name;
@@ -43,24 +33,53 @@ export async function Donasi_funCreateKabar(
     const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
     fs.writeFileSync(`./public/donasi/kabar/${upload.url}`, uploadFolder);
 
-    const updateKabar = await prisma.donasi_Kabar.update({
-      where: {
-        id: create.id,
-      },
+    const createWithPhoto = await prisma.donasi_Kabar.create({
       data: {
+        title: req.title,
+        deskripsi: req.deskripsi,
+        donasiId: req.donasiId,
         imagesId: upload.id,
       },
+      select: {
+        Donasi: {
+          select: {
+            id: true,
+            title: true,
+            authorId: true,
+          },
+        },
+      },
     });
 
-    if (!updateKabar) return { status: 400, message: "Gagal upload gambar" };
+    if (!createWithPhoto) return { status: 400, message: "Gagal membuat data" };
+    return {
+      status: 200,
+      message: "Berhasil disimpan",
+      data: createWithPhoto,
+    };
   }
 
-  
+  const create = await prisma.donasi_Kabar.create({
+    data: {
+      title: req.title,
+      deskripsi: req.deskripsi,
+      donasiId: req.donasiId,
+    },
+    select: {
+      Donasi: {
+        select: {
+          id: true,
+          title: true,
+          authorId: true,
+        },
+      },
+    },
+  });
 
   revalidatePath("/dev/donasi/list_kabar");
   return {
     status: 200,
     message: "Berhasil disimpan",
-    kabarId: create.id
+    data: create,
   };
 }

src/app_modules/donasi/fun/get/get_donasi_by_status.ts

@@ -27,14 +27,16 @@ export default async function Donasi_getByStatus(
         publishTime: true,
         DonasiMaster_Durasi: true,
         terkumpul: true,
-
-      }
+      },
     });
     return getReview;
   }
 
   if (status === "2") {
     const getReview = await prisma.donasi.findMany({
+      orderBy: {
+        updatedAt: "desc",
+      },
       where: {
         authorId: authorId,
         donasiMaster_StatusDonasiId: "2",
@@ -67,9 +69,7 @@ export default async function Donasi_getByStatus(
         publishTime: true,
         DonasiMaster_Durasi: true,
         catatan: true,
-
-      }
-
+      },
     });
 
     return getReview;

src/app_modules/donasi/fun/get/get_one_status_invoice_by_id.ts

@@ -0,0 +1,23 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function donasi_getOneStatusInvoiceById({
+  invoiceId,
+}: {
+  invoiceId: string;
+}) {
+  const res = await prisma.donasi_Invoice.findFirst({
+    where: {
+      id: invoiceId,
+    },
+    select: {
+      id: true,
+      authorId: true,
+      donasiMaster_StatusInvoiceId: true,
+      DonasiMaster_StatusInvoice: true,
+    },
+  });
+
+  return res;
+}

src/app_modules/donasi/fun/update/fun_ganti_status.ts

@@ -22,6 +22,16 @@ export async function Donasi_funGantiStatus(
     data: {
       donasiMaster_StatusDonasiId: statusId,
     },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      DonasiMaster_Status: {
+        select: {
+          name: true,
+        },
+      },
+    }
   });
 
 
@@ -29,6 +39,7 @@ export async function Donasi_funGantiStatus(
 
   revalidatePath(RouterDonasi.main_galang_dana)
   return {
+    data: data,
     status: 200,
     message: "Status berhasil diganti",
   };

src/app_modules/donasi/fun/update/fun_update_status_invoice.ts

@@ -7,22 +7,39 @@ export async function Donasi_funUpdateStatusInvoice(
   invoiceId: string,
   statusId: string
 ) {
-//   console.log(invoiceId, "invoice Id");
-//   console.log(status, "status");
+  //   console.log(invoiceId, "invoice Id");
+  //   console.log(status, "status");
 
-const data = await prisma.donasi_Invoice.update({
+  const data = await prisma.donasi_Invoice.update({
     where: {
-        id: invoiceId
+      id: invoiceId,
     },
     data: {
-        donasiMaster_StatusInvoiceId: statusId
-    }
-})
+      donasiMaster_StatusInvoiceId: statusId,
+    },
+    select: {
+      id: true,
+      DonasiMaster_StatusInvoice: {
+        select: {
+          name: true,
+        },
+      },
+      Donasi: {
+        select: {
+          id: true,
+          title: true,
+          authorId: true,
+        },
+      },
+    },
+  });
 
-if(!data) return {status: 400, message: "Gagal memperbarui status transaksi"}
-revalidatePath("dev/admin/donasi/detail/publish")
-return {
+  if (!data)
+    return { status: 400, message: "Gagal memperbarui status transaksi" };
+  revalidatePath("dev/admin/donasi/detail/publish");
+  return {
+    data: data,
     status: 200,
     message: "Berhasil memperbarui status transaksi",
-}
+  };
 }

src/app_modules/donasi/global_state/index.ts

@@ -2,6 +2,7 @@ import { atomWithStorage } from "jotai/utils";
 
 /**
  * @param index 0 - 2
+ * @type number
  * @returns global state hot menu donasi
  */
 export const gs_donasi_hot_menu = atomWithStorage("gs_donasi_hot_menu", 0);

src/app_modules/donasi/proses_donasi/invoice/index.tsx

@@ -29,6 +29,10 @@ import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import mqtt_client from "@/util/mqtt_client";
 
 export default function Donasi_InvoiceProses({
   dataInvoice,
@@ -80,7 +84,7 @@ export default function Donasi_InvoiceProses({
             </Stack>
             <Paper
               style={{
-                backgroundColor: AccentColor.softblue,
+                backgroundColor: AccentColor.darkblue,
                 border: `2px solid ${AccentColor.blue}`,
                 padding: "15px",
                 cursor: "pointer",
@@ -107,6 +111,7 @@ export default function Donasi_InvoiceProses({
                           radius={"xl"}
                           onClick={copy}
                           color={copied ? "teal" : "yellow"}
+                          c={"black"}
                         >
                           {copied ? "Berhasil" : "Salin"}
                         </Button>
@@ -136,7 +141,7 @@ export default function Donasi_InvoiceProses({
             </Stack>
             <Paper
               style={{
-                backgroundColor: AccentColor.softblue,
+                backgroundColor: AccentColor.darkblue,
                 border: `2px solid ${AccentColor.blue}`,
                 padding: "15px",
                 cursor: "pointer",
@@ -163,6 +168,7 @@ export default function Donasi_InvoiceProses({
                           variant="filled"
                           radius={"xl"}
                           color={copied ? "teal" : "yellow"}
+                          c={"black"}
                           onClick={copy}
                         >
                           {copied ? "Berhasil" : "Salin"}
@@ -215,6 +221,7 @@ export default function Donasi_InvoiceProses({
                     leftIcon={<IconCamera />}
                     bg={MainColor.yellow}
                     color="yellow"
+                    c={"black"}
                   >
                     Upload
                   </Button>
@@ -271,15 +278,35 @@ async function onClick(
   invoiceId: string,
   setActive: any
 ) {
-  await Donasi_funUpdateStatusInvoice(invoiceId, "2").then((res) => {
-    if (res.status === 200) {
-      NotifBerhasil(res.message);
+  const res = await Donasi_funUpdateStatusInvoice(invoiceId, "2");
+  if (res.status === 200) {
+    const dataNotif: any = {
+      appId: res.data?.Donasi?.id as any,
+      userId: res.data?.Donasi?.authorId as any,
+      pesan: res.data?.Donasi?.title as any,
+      status: res.data?.DonasiMaster_StatusInvoice?.name,
+      kategoriApp: "DONASI",
+      title: "Donatur melakukan transfer",
+    };
+
+    const notif = await notifikasiToAdmin_funCreate({
+      data: dataNotif as any,
+    });
+
+    if (notif.status === 201) {
+      mqtt_client.publish(
+        "ADMIN",
+        JSON.stringify({
+          count: 1,
+        })
+      );
+      ComponentGlobal_NotifikasiBerhasil(res.message);
       setActive(2);
       router.push(RouterDonasi.proses_transaksi + `${invoiceId}`);
-    } else {
-      NotifGagal(res.message);
     }
-  });
+  } else {
+    ComponentGlobal_NotifikasiGagal(res.message);
+  }
 }
 
 async function onUpload(invoiceId: string, file: FormData) {

src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx

@@ -16,6 +16,10 @@ import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import mqtt_client from "@/util/mqtt_client";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 
 export default function Donasi_MetodePembayaran({
   listBank,
@@ -42,19 +46,39 @@ export default function Donasi_MetodePembayaran({
 
     // console.log(body)
 
-    await Donasi_funCreateInvoice(body).then((res) => {
-      if (res.status === 200) {
+    const res = await Donasi_funCreateInvoice(body);
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.Donasi?.id as any,
+        userId: res.data?.Donasi?.authorId as any,
+        pesan: res.data?.Donasi?.title as any,
+        status: res.data?.DonasiMaster_StatusInvoice?.name,
+        kategoriApp: "DONASI",
+        title: "Donatur mengirim invoice",
+      };
+
+      const notif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "ADMIN",
+          JSON.stringify({
+            count: 1,
+          })
+        );
         setLoading(true);
-        NotifBerhasil(res.message);
-        router.push(RouterDonasi.invoice + `${res.invoiceId}`);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
         setProsesDonasi({
           ...prosesDonasi,
           nominal: "",
         });
-      } else {
-        NotifGagal(res.message);
+        router.push(RouterDonasi.invoice + `${res.data?.id}`);
       }
-    });
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
   }
 
   return (
@@ -67,7 +91,6 @@ export default function Donasi_MetodePembayaran({
           onChange={setPilihBank}
           withAsterisk
           color="yellow"
-          
         >
           {bank.map((e, i) => (
             <Paper
@@ -83,11 +106,11 @@ export default function Donasi_MetodePembayaran({
               }}
             >
               <Radio
-              styles={{
-                radio: {
-                  color: "yellow"
-                }
-              }}
+                styles={{
+                  radio: {
+                    color: "yellow",
+                  },
+                }}
                 value={e.id}
                 label={
                   <Title order={6} color="white">

src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx

@@ -1,7 +1,10 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { Warna } from "@/app/lib/warna";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import {
   Center,
   Group,
@@ -11,120 +14,76 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { useInterval, useShallowEffect } from "@mantine/hooks";
 import { IconBrandWhatsapp } from "@tabler/icons-react";
 import { useAtom } from "jotai";
-import moment from "moment";
 import Link from "next/link";
-import { redirect } from "next/navigation";
 import { useState } from "react";
-import { Donasi_getOneInvoiceById } from "../../fun/get/get_one_invoice_by_id";
 import { gs_donasi_hot_menu } from "../../global_state";
 import { MODEL_DONASI_INVOICE } from "../../model/interface";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
+import { redirect, useRouter } from "next/navigation";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { useShallowEffect } from "@mantine/hooks";
+import mqtt_client from "@/util/mqtt_client";
+import { donasi_getOneStatusInvoiceById } from "../../fun/get/get_one_status_invoice_by_id";
 
 export default function Donasi_ProsesTransaksi({
-  dataInvoice,
+  statusInvoice,
   nomorAdmin,
 }: {
-  dataInvoice: MODEL_DONASI_INVOICE;
+  statusInvoice: MODEL_DONASI_INVOICE;
   nomorAdmin: any;
 }) {
-  const [invoice, setInvoice] = useState(dataInvoice);
+  const router = useRouter();
+  const [data, setData] = useState(statusInvoice);
   const [hotMenu, setHotMenu] = useAtom(gs_donasi_hot_menu);
-  const [countD, setCountD] = useState<Date | any>();
-  const interval = useInterval(
-    () =>
-      reloadData(invoice.id).then((res) =>
-        setInvoice(res as MODEL_DONASI_INVOICE)
-      ),
-    5000
-  );
+
+  interface MODAL_DONASI_INVOICE {
+    invoiceId: string;
+    statusInvoiceId: string;
+  }
 
   useShallowEffect(() => {
-    interval.start();
-  }, [invoice.id]);
+    mqtt_client.subscribe("donasi_invoice");
 
-  function reloadData(invoiceId: string) {
-    const res = Donasi_getOneInvoiceById(invoiceId);
-    return res;
+    mqtt_client.on("message", (topic, message) => {
+      const dataClient: MODAL_DONASI_INVOICE = JSON.parse(message.toString());
+      if (topic === "donasi_invoice" && dataClient.invoiceId === data.id) {
+        // setData({
+        //   ...data,
+        //   donasiMaster_StatusInvoiceId: dataClient.statusInvoiceId,
+        // });
+        onLoad();
+      }
+    });
+  }, []);
+
+  async function onLoad() {
+    const loadData = await donasi_getOneStatusInvoiceById({
+      invoiceId: data.id,
+    });
+    setData(loadData as any);
   }
 
-  //-------------------------------------------------//
-
-  // const inter2 = useInterval(
-  //   () => cekCD().then((res) => console.log(res)),
-  //   1000
-  // );
-
-  // useShallowEffect(() => {
-  //   inter2.start();
-  // }, []);
-
-  async function cekCD() {
-    const date = new Date().getTime();
-    // const jam = date.toTimeString()
-    // const cd = moment(jam).diff((invoice.createdAt), "hour")
-    var a = moment.duration(date).asSeconds();
-    return a;
-  }
-
-  if (invoice.donasiMaster_StatusInvoiceId === "1") {
-    redirect(RouterDonasi.detail_donasi_saya + `${invoice.id}`);
+  if (data.DonasiMaster_StatusInvoice.id === "1") {
+    setHotMenu(2);
+    router.replace(RouterDonasi.detail_donasi_saya + `${data.id}`, {
+      scroll: false,
+    });
   }
 
   return (
     <>
-      <Stack>
-        <Paper
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-          }}
-        >
-          <Stack spacing={"md"}>
-            <Paper
-              style={{
-                backgroundColor: MainColor.darkblue,
-                border: `2px solid ${AccentColor.darkblue}`,
-                padding: "15px",
-                cursor: "pointer",
-                borderRadius: "10px",
-                color: "white",
-              }}
-            >
-              <Stack align="center" justify="center">
-                <Title order={6}>Admin sedang memproses transaksimu</Title>
-                <Paper radius={1000} w={100} h={100}>
-                  <Center h={"100%"}>
-                    <Loader size={"lg"} color="yellow" variant="bars" />
-                  </Center>
-                </Paper>
-                <Title order={6}>Mohon menunggu !</Title>
-              </Stack>
-            </Paper>
-          </Stack>
-        </Paper>
-        <Paper
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-          }}
-        >
+      {data.DonasiMaster_StatusInvoice.id === "1" ? (
+        <>
+          <Center h={"50vh"}>
+            <Loader color="yellow" />
+          </Center>
+        </>
+      ) : (
+        <Stack>
           <Paper
             style={{
-              backgroundColor: AccentColor.darkblue,
+              backgroundColor: AccentColor.blue,
               border: `2px solid ${AccentColor.darkblue}`,
               padding: "15px",
               cursor: "pointer",
@@ -132,30 +91,74 @@ export default function Donasi_ProsesTransaksi({
               color: "white",
             }}
           >
-            <Group position="center">
-              <Stack spacing={0}>
-                <Text fz={"xs"} fs={"italic"}>
-                  Hubungi admin jika tidak kunjung di proses!
-                </Text>
-                <Text fz={"xs"} fs={"italic"}>
-                  Klik pada logo Whatsapp ini.
-                </Text>
-              </Stack>
-              <Link
-                color="white"
+            <Stack spacing={"md"}>
+              <Paper
                 style={{
-                  color: "black",
-                  textDecoration: "none",
+                  backgroundColor: MainColor.darkblue,
+                  border: `2px solid ${AccentColor.darkblue}`,
+                  padding: "15px",
+                  cursor: "pointer",
+                  borderRadius: "10px",
+                  color: "white",
                 }}
-                target="_blank"
-                href={`https://wa.me/+${nomorAdmin.nomor}?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!`}
               >
-                <IconBrandWhatsapp size={40} color={Warna.hijau_cerah} />
-              </Link>
-            </Group>
+                <Stack align="center" justify="center">
+                  <Title order={6}>Admin sedang memproses transaksimu</Title>
+                  <Paper radius={1000} w={100} h={100}>
+                    <Center h={"100%"}>
+                      <Loader size={"lg"} color="yellow" variant="bars" />
+                    </Center>
+                  </Paper>
+                  <Title order={6}>Mohon menunggu !</Title>
+                </Stack>
+              </Paper>
+            </Stack>
           </Paper>
-        </Paper>
-      </Stack>
+          <Paper
+            style={{
+              backgroundColor: AccentColor.blue,
+              border: `2px solid ${AccentColor.darkblue}`,
+              padding: "15px",
+              cursor: "pointer",
+              borderRadius: "10px",
+              color: "white",
+            }}
+          >
+            <Paper
+              style={{
+                backgroundColor: AccentColor.darkblue,
+                border: `2px solid ${AccentColor.darkblue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+              }}
+            >
+              <Group position="center">
+                <Stack spacing={0}>
+                  <Text fz={"xs"} fs={"italic"}>
+                    Hubungi admin jika tidak kunjung di proses!
+                  </Text>
+                  <Text fz={"xs"} fs={"italic"}>
+                    Klik pada logo Whatsapp ini.
+                  </Text>
+                </Stack>
+                <Link
+                  color="white"
+                  style={{
+                    color: "black",
+                    textDecoration: "none",
+                  }}
+                  target="_blank"
+                  href={`https://wa.me/+${nomorAdmin.nomor}?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!`}
+                >
+                  <IconBrandWhatsapp size={40} color={Warna.hijau_cerah} />
+                </Link>
+              </Group>
+            </Paper>
+          </Paper>
+        </Stack>
+      )}
     </>
   );
 }

src/app_modules/investasi/berita/layout.tsx

@@ -1,20 +1,21 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutBeritaInvestasi({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    return (
-      <>
-        <AppComponentGlobal_LayoutTamplate header={<ComponentGlobal_HeaderTamplate title="Berita" />}>
-          {children}
-        </AppComponentGlobal_LayoutTamplate>
-      </>
-    );
-  }
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Berita" />}
+      >
+        {children}
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/investasi/component/detail/card_status.tsx

@@ -0,0 +1,61 @@
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Paper, Grid, Stack, AspectRatio, Text, Image } from "@mantine/core";
+import _ from "lodash";
+
+import { MODEL_Investasi } from "../../model/model_investasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { useRouter } from "next/navigation";
+
+export function ComponentInvestasi_CardStatus({
+  data,
+  path,
+}: {
+  data: MODEL_Investasi;
+  path: string;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Paper
+        onClick={() => router.push(path + `${data.id}`)}
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
+      >
+        <Grid>
+          <Grid.Col span={8}>
+            <Text fw={"bold"} lineClamp={1}>
+              {" "}
+              {_.startCase(data.title)}
+            </Text>
+            <Stack spacing={0}>
+              <Text fz={10}>Target Dana:</Text>
+              <Text>
+                Rp.{" "}
+                {new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+data.targetDana)}
+              </Text>
+            </Stack>
+          </Grid.Col>
+
+          <Grid.Col span={4}>
+            <AspectRatio ratio={16 / 9}>
+              <Paper radius={"md"}>
+                <Image
+                  alt=""
+                  src={RouterInvestasi.api_gambar + `${data.imagesId}`}
+                />
+              </Paper>
+            </AspectRatio>
+          </Grid.Col>
+        </Grid>
+      </Paper>
+    </>
+  );
+}

src/app_modules/investasi/component/detail/detai_data_non_publish.tsx

@@ -0,0 +1,159 @@
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  Stack,
+  Box,
+  AspectRatio,
+  Center,
+  Title,
+  Grid,
+  Paper,
+  Flex,
+  ActionIcon,
+  Image,
+  Text,
+  SimpleGrid,
+} from "@mantine/core";
+import _ from "lodash";
+import { MODEL_Investasi } from "../../model/model_investasi";
+import { IconBookDownload, IconFileDescription } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export function ComponentInvestasi_DetailDataNonPublish({
+  data,
+}: {
+  data: MODEL_Investasi;
+}) {
+  const router = useRouter();
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: RouterInvestasi.detail_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: RouterInvestasi.detail_dokumen,
+    },
+  ];
+
+  return (
+    <>
+      <Stack
+        style={{
+          paddingInline: "15px",
+          paddingBlock: "15px",
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px",
+          color: "white",
+        }}
+      >
+        <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
+          <Image
+            alt=""
+            src={RouterInvestasi.api_gambar + `${data.imagesId}`}
+            radius={"sm"}
+            height={300}
+            width={"100%"}
+          />
+        </AspectRatio>
+
+        {/* Title dan Persentase */}
+        <Center>
+          <Title order={4} align="center">
+            {_.startCase(data.title)}
+          </Title>
+        </Center>
+
+        {/* Rincian Data */}
+        <Grid p={"md"}>
+          <Grid.Col span={6}>
+            <Stack>
+              <Box>
+                <Text>Dana Dibutuhkan</Text>
+                <Text>
+                  Rp.{" "}
+                  {new Intl.NumberFormat("id-ID", {
+                    maximumSignificantDigits: 20,
+                  }).format(+data.targetDana)}
+                </Text>
+              </Box>
+              <Box>
+                <Text>Harga Per Lembar</Text>
+                <Text>
+                  Rp.{" "}
+                  {new Intl.NumberFormat("id-ID", {
+                    maximumSignificantDigits: 10,
+                  }).format(+data.hargaLembar)}
+                </Text>
+              </Box>
+              <Box>
+                <Text>Jadwal Pembagian</Text>
+                <Text>{data.MasterPembagianDeviden.name} Bulan </Text>
+              </Box>
+              <Box>
+                <Text>Pencarian Investor</Text>
+                <Text>{data.MasterPencarianInvestor.name} Hari </Text>
+              </Box>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Stack>
+              <Box>
+                <Text>ROI</Text>
+                <Text>{data.roi} %</Text>
+              </Box>
+              <Box>
+                <Text>Total Lembar</Text>
+                <Text>
+                  {new Intl.NumberFormat("id-ID", {
+                    maximumSignificantDigits: 10,
+                  }).format(+data.totalLembar)}{" "}
+                  lembar
+                </Text>
+              </Box>
+              <Box>
+                <Text>Pembagian Deviden</Text>
+                <Text>{data.MasterPeriodeDeviden.name}</Text>
+              </Box>
+            </Stack>
+          </Grid.Col>
+        </Grid>
+
+        {/* List Box */}
+        <SimpleGrid cols={2}>
+          {listBox.map((e) => (
+            <Center key={e.id}>
+              <Paper
+                w={100}
+                style={{
+                  padding: "15px",
+                  backgroundColor: AccentColor.blue,
+                  border: `2px solid ${AccentColor.softblue}`,
+                  borderRadius: "10px",
+                  color: "white",
+                }}
+                onClick={() => router.push(e.route + `${data.id}`)}
+              >
+                <Stack spacing={0} align="center">
+                  <Text fz={12}>{e.name}</Text>
+                  <ActionIcon
+                    variant="transparent"
+                    size={60}
+                    style={{ color: "white" }}
+                  >
+                    {e.icon}
+                  </ActionIcon>
+                </Stack>
+              </Paper>
+            </Center>
+          ))}
+        </SimpleGrid>
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/create/layout.tsx

@@ -1,10 +1,7 @@
 "use client";
 
-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 { AppShell } from "@mantine/core";
 import React from "react";
 
 export default function InvestasiCreateLayout({
@@ -15,7 +12,7 @@ export default function InvestasiCreateLayout({
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Investasi Baru" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Investasi" />}
       >
         {children}
       </UIGlobal_LayoutTamplate>

src/app_modules/investasi/create/view.tsx

@@ -21,11 +21,9 @@ import {
   Select,
   Stack,
   Text,
-  TextInput
+  TextInput,
 } from "@mantine/core";
-import {
-  IconUpload
-} from "@tabler/icons-react";
+import { IconUpload } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
@@ -33,6 +31,12 @@ import { useState } from "react";
 import toast from "react-simple-toasts";
 import { funCreateInvestasi } from "../fun/fun_create_investasi";
 import { gs_StatusPortoInvestasi, gs_investasiFooter } from "../g_state";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 
 export default function InvestasiCreate({
   id,
@@ -96,9 +100,10 @@ export default function InvestasiCreate({
         setChangeColor(1);
         setActiveTab("Review");
         setLoading(true);
-        router.push(RouterInvestasi.dialog_create);
+        ComponentGlobal_NotifikasiBerhasil(res.message)
+        router.push(RouterInvestasi.portofolio);
       } else {
-        toast(res.message);
+        ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
   }
@@ -124,15 +129,35 @@ export default function InvestasiCreate({
       <Box>
         {/* Inputan Create */}
         <Stack spacing={"sm"} px={"md"}>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"} withBorder>
-              {img ? (
-                <Image alt="" src={img} />
-              ) : (
-                <Image alt="" src={"/aset/no-img.png"} />
-              )}
-            </Paper>
-          </AspectRatio>
+          {img ? (
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.softblue}`,
+                  backgroundColor: AccentColor.blue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
+                <Image
+                  alt="Foto"
+                  src={img ? img : "/aset/no-img.png"}
+                  maw={200}
+                />
+              </Paper>
+            </AspectRatio>
+          ) : (
+            <Center>
+              <Paper h={300} w={200} withBorder shadow="lg" bg={"gray.1"}>
+                <Stack justify="center" align="center" h={"100%"}>
+                  <IconUpload color="gray" />
+                  <Text fz={10} fs={"italic"} c={"gray"} fw={"bold"}>
+                    Upload Gambar
+                  </Text>
+                </Stack>
+              </Paper>
+            </Center>
+          )}
 
           {/* Upload Foto */}
           <Group position="center" mb={"md"}>
@@ -142,7 +167,7 @@ export default function InvestasiCreate({
                   const buffer = URL.createObjectURL(
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
-                  console.log(files.size);
+                  // console.log(files.size);
 
                   if (files.size > maksimalUploadFile) {
                     ComponentGlobal_WarningMaxUpload({});
@@ -160,25 +185,44 @@ export default function InvestasiCreate({
                 <Button
                   {...props}
                   leftIcon={<IconUpload size={12} />}
-                  compact
                   radius={50}
-                  bg={Warna.hijau_muda}
-                  // onClick={() => router.push("/dev/investasi/upload")}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                 >
                   Upload Gambar
                 </Button>
               )}
             </FileButton>
           </Group>
+
           {/* Upload File */}
           <Group position="center">
             {!pdf ? (
-              <Paper w={"100%"} bg={"gray.3"} p={"sm"}>
-                <Text opacity={"0.3"}>Upload File Prospektus</Text>
+              <Paper
+                w={"100%"}
+                style={{
+                  border: `2px solid gray`,
+                  backgroundColor: "gray.1",
+                  padding: "10px",
+                  borderRadius: "10px",
+                  color: "gray"
+                }}
+              >
+                <Text>Upload File Prospektus</Text>
               </Paper>
             ) : (
-              <Paper w={"100%"} bg={"gray.6"} p={"sm"}>
-                <Text truncate>{pdf.name}</Text>
+              <Paper
+                w={"100%"}
+                style={{
+                  border: `2px solid ${AccentColor.softblue}`,
+                  backgroundColor: AccentColor.blue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                  color: "white",
+                }}
+              >
+                <Text lineClamp={1}>{pdf.name}</Text>
               </Paper>
             )}
             {/* {JSON.stringify(filePdf)} */}
@@ -205,9 +249,10 @@ export default function InvestasiCreate({
                 <Button
                   leftIcon={<IconUpload size={12} />}
                   {...props}
-                  compact
                   radius={"xl"}
-                  bg={Warna.hijau_muda}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                 >
                   Upload File
                 </Button>
@@ -215,6 +260,11 @@ export default function InvestasiCreate({
             </FileButton>
           </Group>
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Judul Investasi"
             placeholder="Judul investasi"
@@ -227,32 +277,12 @@ export default function InvestasiCreate({
             }}
           />
 
-          {/* <NumberInput
-            withAsterisk
-            type="number"
-            label="Dana Dibutuhkan"
-            placeholder="Masukan nominal dana"
-            onChange={(val: any) => {
-              setValue({
-                ...value,
-                targetDana: val,
-              });
-            }}
-          />
-          <NumberInput
-            label="Harga Per Lembar"
-            type="number"
-            placeholder="Masukan nominal harga"
-            onChange={(val) => {
-              setValue({
-                ...value,
-                hargaLembar: +val,
-              });
-              onTotalLembar({ target: value.targetDana, harga: +val });
-            }}
-          /> */}
-
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             icon={<Text fw={"bold"}>Rp.</Text>}
             min={0}
             withAsterisk
@@ -280,6 +310,11 @@ export default function InvestasiCreate({
           />
 
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             icon={<Text fw={"bold"}>Rp.</Text>}
             min={0}
             withAsterisk
@@ -317,7 +352,7 @@ export default function InvestasiCreate({
             }}
           />
 
-          <Stack spacing={3}>
+          <Stack spacing={3} style={{ color: "white" }}>
             <Text fz={"sm"} fw={500}>
               Total Lembar
             </Text>
@@ -325,12 +360,17 @@ export default function InvestasiCreate({
               <Text>{totalLembar}</Text>
               <Divider />
             </Stack>
-            <Text c={"gray"} fz={10} fs={"italic"}>
+            <Text fz={10} fs={"italic"}>
               *Total lembar dihitung dari, Target Dana : Harga Perlembar
             </Text>
           </Stack>
 
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             rightSection={
               <Text fw={"bold"} c={"gray"}>
                 %
@@ -349,6 +389,11 @@ export default function InvestasiCreate({
           />
 
           <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Pencarian Investor"
             placeholder="Pilih batas waktu"
@@ -364,6 +409,11 @@ export default function InvestasiCreate({
             }}
           />
           <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Periode Deviden"
             placeholder="Pilih batas waktu"
@@ -376,6 +426,11 @@ export default function InvestasiCreate({
             }}
           />
           <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Pembagian Deviden"
             placeholder="Pilih batas waktu"
@@ -390,10 +445,9 @@ export default function InvestasiCreate({
               });
             }}
           />
-        </Stack>
 
-        <Center my={"lg"}>
           <Button
+            my={"xl"}
             style={{
               transition: "0.5s",
             }}
@@ -412,14 +466,15 @@ export default function InvestasiCreate({
                 ? true
                 : false
             }
-            w={300}
             radius={50}
-            bg={Warna.biru}
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
             onClick={() => onSubmit()}
           >
             Simpan
           </Button>
-        </Center>
+        </Stack>
       </Box>
     </>
   );

src/app_modules/investasi/create_berita/layout.tsx

@@ -1,14 +1,10 @@
 "use client";
 
-import { Warna } from "@/app/lib/warna";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { AppShell, Button, Center, Footer } from "@mantine/core";
-import { IconPencilPlus } from "@tabler/icons-react";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { useRouter } from "next/navigation";
 
 import React from "react";
-import toast from "react-simple-toasts";
 
 export default function LayoutCreateBeritaInvestasi({
   children,
@@ -20,16 +16,11 @@ export default function LayoutCreateBeritaInvestasi({
   const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentGlobal_HeaderTamplate title="Buat Berita" />}
-        // footer={
-        //   <Footer height={70} sx={{ borderStyle: "none" }}>
-
-        //   </Footer>
-        // }
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Buat Berita" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/create_berita/view.tsx

@@ -19,8 +19,16 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-simple-toasts";
 import funCreateBeritaInvestasi from "../fun/fun_create_berita";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 
-export default function CreateBeritaInvestasi({idInves}: {idInves: string}) {
+export default function CreateBeritaInvestasi({
+  idInves,
+}: {
+  idInves: string;
+}) {
   const router = useRouter();
   const [fl, setFl] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>();
@@ -28,22 +36,22 @@ export default function CreateBeritaInvestasi({idInves}: {idInves: string}) {
   const [value, setValue] = useState({
     title: "",
     deskripsi: "",
-    investasiId: idInves
+    investasiId: idInves,
   });
 
   async function onCreate() {
     const body = value;
 
     if (_.values(body).includes("")) return toast("Lengkapi data");
-    if (!fl) return toast("File Kosong");
+    if (!fl) return ComponentGlobal_NotifikasiPeringatan("File Kosong");
 
     const fd = new FormData();
     fd.append("file", fl);
 
     await funCreateBeritaInvestasi(fd, body as any).then((res) => {
       res.status === 201
-        ? (toast(res.message), router.back())
-        : toast(res.message);
+        ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
+        : ComponentGlobal_NotifikasiGagal(res.message);
     });
 
     // router.back();
@@ -52,12 +60,18 @@ export default function CreateBeritaInvestasi({idInves}: {idInves: string}) {
 
   return (
     <>
-      <Stack>
-        <AspectRatio ratio={16 / 9}>
+      <Stack px={"xl"}>
+        <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
           {img ? (
-            <Image alt="" src={img} />
+            <Image alt="" src={img} radius={"sm"} height={300} width={"100%"} />
           ) : (
-            <Image alt="" src={"/aset/no-img.png"} />
+            <Image
+              alt=""
+              src={"/aset/no-img.png"}
+              radius={"sm"}
+              height={300}
+              width={"100%"}
+            />
           )}
         </AspectRatio>
         <Group position="center" mt={"md"}>
@@ -73,19 +87,25 @@ export default function CreateBeritaInvestasi({idInves}: {idInves: string}) {
           >
             {(props) => (
               <Button
-                compact
+                leftIcon={<IconCamera />}
                 {...props}
-                w={100}
                 radius={50}
-                bg={Warna.hijau_muda}
-                // onClick={() => router.push("/dev/investasi/upload")}
+                bg={MainColor.yellow}
+                color="yellow"
+                c={"black"}
               >
-                <IconCamera />
+                Upload
               </Button>
             )}
           </FileButton>
         </Group>
         <TextInput
+          withAsterisk
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Judul berita"
           onChange={(val) => {
             setValue({
@@ -96,6 +116,12 @@ export default function CreateBeritaInvestasi({idInves}: {idInves: string}) {
         />
 
         <Textarea
+          withAsterisk
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Deskripsi"
           autosize
           minRows={2}
@@ -107,19 +133,19 @@ export default function CreateBeritaInvestasi({idInves}: {idInves: string}) {
             });
           }}
         />
-      </Stack>
-      <Center mt={100}>
         <Button
-          w={300}
           radius={50}
-          bg={Warna.biru}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
           onClick={() => {
             onCreate();
           }}
         >
           Simpan
         </Button>
-      </Center>
+      </Stack>
+    
     </>
   );
 }

src/app_modules/investasi/detail/view.tsx

@@ -89,7 +89,7 @@ export default function DetailInvestasi({
 
   return (
     <>
-      <Box
+      <Stack
         style={{
           padding: "15px",
           backgroundColor: AccentColor.darkblue,
@@ -161,18 +161,19 @@ export default function DetailInvestasi({
           )}
         </Group>
 
-        <Paper withBorder mb={"md"} p={"xs"}>
-          <AspectRatio ratio={1 / 1}>
-            <Image
-              alt=""
-              src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
-            />
-          </AspectRatio>
-        </Paper>
+        <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
+          <Image
+            alt=""
+            src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
+            radius={"sm"}
+            height={300}
+            width={"100%"}
+          />
+        </AspectRatio>
 
         {/* Title dan Progress */}
         <Box mb={"md"}>
-          <Title order={4} mb={"xs"}>
+          <Title order={3} mb={"xs"} align="center">
             {investasi.title}
           </Title>
           <Progress
@@ -328,7 +329,7 @@ export default function DetailInvestasi({
             )}
           </Box>
         )}
-      </Box>
+      </Stack>
     </>
   );
 }

src/app_modules/investasi/detail_dokumen/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 { AppShell } from "@mantine/core";
 import React from "react";
 
@@ -12,9 +14,11 @@ export default function LayoutDetailDokumenInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentGlobal_HeaderTamplate title="Dokumen" />}>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Dokumen" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/detail_dokumen/view.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { MODEL_Investasi } from "../model/model_investasi";
 import { useState } from "react";
 import _ from "lodash";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 
 export default function DetailDokumenInvestasi({
   dataInvestasi,
@@ -44,9 +45,7 @@ export default function DetailDokumenInvestasi({
       </Link>
        ))
       ) : (
-        <Center>
-          <Title order={6}>Tidak Ada File</Title>
-        </Center>
+       <ComponentGlobal_IsEmptyData/>
       )}
     </>
   );

src/app_modules/investasi/detail_portofolio/draft/index.tsx

@@ -32,6 +32,8 @@ import { MODEL_Investasi } from "../../model/model_investasi";
 import { useState } from "react";
 import _ from "lodash";
 import funGantiStatusInvestasi from "../../fun/fun_ganti_status";
+import { ComponentInvestasi_DetailDataNonPublish } from "../../component/detail/detai_data_non_publish";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailDraftInvestasi({
   dataInvestasi,
@@ -40,7 +42,7 @@ export default function DetailDraftInvestasi({
 }) {
   const router = useRouter();
   const [activeTab, setActiveTab] = useAtom(gs_StatusPortoInvestasi);
-  const [investasi, setInvestasi] = useState<MODEL_Investasi>(dataInvestasi);
+  // const [investasi, setInvestasi] = useState<MODEL_Investasi>(dataInvestasi);
 
   const listBox = [
     {
@@ -64,7 +66,7 @@ export default function DetailDraftInvestasi({
   ];
 
   async function onsubmit() {
-    await funGantiStatusInvestasi(investasi.id, "2")
+    await funGantiStatusInvestasi(dataInvestasi.id, "2")
       .then((res) => res)
       .then((val) => {
         if (val.status === 200) {
@@ -79,7 +81,7 @@ export default function DetailDraftInvestasi({
 
   return (
     <>
-      <Paper withBorder mb={"md"}>
+      {/* <Paper withBorder mb={"md"}>
         <AspectRatio ratio={16 / 9}>
           <Image
             alt=""
@@ -88,14 +90,13 @@ export default function DetailDraftInvestasi({
         </AspectRatio>
       </Paper>
 
-      {/* Title dan Persentase */}
       <Center>
         <Title order={4} mb={"xs"}>
           {_.capitalize(investasi.title)}
         </Title>
       </Center>
 
-      {/* Rincian Data */}
+     
       <Grid p={"md"} mb={"md"}>
         <Grid.Col span={6}>
           <Stack>
@@ -139,19 +140,22 @@ export default function DetailDraftInvestasi({
             </Box>
           </Stack>
         </Grid.Col>
-      </Grid>
+      </Grid> */}
 
-      <Center>
-        <Button
-          w={300}
-          radius={50}
-          bg={"yellow.7"}
-          color="yellow"
-          onClick={() => onsubmit()}
-        >
-          Ajukan Review
-        </Button>
-      </Center>
+      <Stack mb={"lg"}>
+        <ComponentInvestasi_DetailDataNonPublish data={dataInvestasi} />
+        <Stack>
+          <Button
+            radius={50}
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
+            onClick={() => onsubmit()}
+          >
+            Ajukan Review
+          </Button>
+        </Stack>
+      </Stack>
     </>
   );
 }

src/app_modules/investasi/detail_portofolio/draft/layout.tsx

@@ -1,31 +1,71 @@
 "use client";
 
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { AppShell } from "@mantine/core";
-import { IconEdit } from "@tabler/icons-react";
-import React from "react";
+import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
+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 } from "@mantine/core";
+import { IconDotsVertical, IconEdit, IconFilePencil } from "@tabler/icons-react";
+import React, { useState } from "react";
 
 export default function LayoutDetailDraftInvestasi({
   children,
-  id
+  id,
 }: {
   children: React.ReactNode;
-  id: string
+  id: string;
 }) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const listPage = [
+    {
+      id: "1",
+      name: "Edit Investasi",
+      icon: <IconEdit />,
+      path: RouterInvestasi.edit_intro + id,
+    },
+    {
+      id: "2",
+      name: "Edit Prospektus",
+      icon: <IconFilePencil />,
+      path: RouterInvestasi.upload_prospektus + id,
+    },
+    {
+      id: "3",
+      name: "Edit Dokumen",
+      icon: <IconFilePencil />,
+      path: RouterInvestasi.edit_dokumen + id,
+    },
+  ];
+
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Detail Draft"
-            icon={<IconEdit />}
-            route2={`/dev/investasi/edit/${id}`}
+            // icon={<IconEdit />}
+            // route2={`/dev/investasi/edit/${id}`}
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => setOpenDrawer(true)}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
     </>
   );
 }