# feat :

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

src/app/dev/admin/investasi/detail/publish/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { AdminInvestasi_DetailPublish } from "@/app_modules/admin/investasi";
+import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
+
+
+
+export default async function Page({params}: {params: {id: string}}) {
+    const investasiId = params.id;
+    const dataInvestasi = await getOneInvestasiById(investasiId);
+
+    return<>
+    <AdminInvestasi_DetailPublish data={dataInvestasi as any}/>
+    </>
+}

src/app/dev/admin/investasi/detail/reject/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { AdminInvestasi_DetailReject } from "@/app_modules/admin/investasi";
+import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const investasiId = params.id;
+  const dataInvestasi = await getOneInvestasiById(investasiId);
+
+  return (
+    <>
+      <AdminInvestasi_DetailReject data={dataInvestasi as any} />
+    </>
+  );
+}

src/app/dev/admin/investasi/detail/review/[id]/page.tsx

@@ -0,0 +1,14 @@
+import { Admin_KonfirmasiInvestasi } from "@/app_modules/admin/investasi";
+import { funGetUserProfile } from "@/app_modules/fun_global/get_user_profile";
+import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const investasiId = params.id;
+  const dataInvestasi = await getOneInvestasiById(investasiId);
+
+  return (
+    <>
+      <Admin_KonfirmasiInvestasi dataInvestasi={dataInvestasi as any} />
+    </>
+  );
+}

src/app/dev/admin/investasi/konfirmasi/[id]/page.tsx

@@ -2,15 +2,14 @@ import { Admin_KonfirmasiInvestasi } from "@/app_modules/admin/investasi";
 import { funGetUserProfile } from "@/app_modules/fun_global/get_user_profile";
 import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
 
-
 export default async function Page({ params }: { params: { id: string } }) {
-  const dataInvestasi = await getOneInvestasiById(params.id)
-  const dataUser = await funGetUserProfile(dataInvestasi?.authorId as any)
+  const dataInvestasi = await getOneInvestasiById(params.id);
+  const dataUser = await funGetUserProfile(dataInvestasi?.authorId as any);
   // console.log(dataUser)
 
   return (
     <>
-      <Admin_KonfirmasiInvestasi dataInvestasi={dataInvestasi as any} dataUser={dataUser as any} />
+      <Admin_KonfirmasiInvestasi dataInvestasi={dataInvestasi as any} />
     </>
   );
 }

src/app/dev/admin/investasi/sub-menu/publish/page.tsx

@@ -1,8 +1,8 @@
 import { Admin_TablePublishInvestasi } from "@/app_modules/admin/investasi";
-import Admin_funGetAllInvestasi from "@/app_modules/admin/investasi/fun/get_all_investasi";
+import { adminInvestasi_funGetAllPublish } from "@/app_modules/admin/investasi/fun/get/get_all_publish";
 
 export default async function Page() {
-  const listInvestasi = await Admin_funGetAllInvestasi();
+  const listInvestasi = await adminInvestasi_funGetAllPublish({page: 1});
 
   return (
     <>

src/app/dev/admin/investasi/sub-menu/reject/page.tsx

@@ -1,10 +1,11 @@
 import { Admin_TableRejectInvestasi } from "@/app_modules/admin/investasi";
-import Admin_funGetAllInvestasi from "@/app_modules/admin/investasi/fun/get_all_investasi";
+import { adminInvestasi_funGetAllReject } from "@/app_modules/admin/investasi/fun/get/get_all_reject";
 
 export default async function Page() {
-    const dataInvestsi = await Admin_funGetAllInvestasi()
-    return <>
-    <Admin_TableRejectInvestasi dataInvestsi={dataInvestsi as any}/>
-    
+  const dataInvestsi = await adminInvestasi_funGetAllReject({page: 1});
+  return (
+    <>
+      <Admin_TableRejectInvestasi dataInvestsi={dataInvestsi as any} />
     </>
-}
+  );
+}

src/app/dev/admin/investasi/sub-menu/review/page.tsx

@@ -1,9 +1,11 @@
 import { Admin_TableReviewInvestasi } from "@/app_modules/admin/investasi";
-import Admin_funGetAllInvestasi from "@/app_modules/admin/investasi/fun/get_all_investasi";
+import { adminInvestasi_funGetAllReview } from "@/app_modules/admin/investasi/fun/get/get_all_review";
 
 export default async function Page() {
-    const dataInvestsi = await Admin_funGetAllInvestasi()
-    return <>
-    <Admin_TableReviewInvestasi  dataInvestsi={dataInvestsi as any}/>
+  const dataInvestsi = await adminInvestasi_funGetAllReview({ page: 1 });
+  return (
+    <>
+      <Admin_TableReviewInvestasi dataInvestsi={dataInvestsi as any} />
     </>
-}
+  );
+}

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

@@ -1,12 +1,16 @@
 import { DonaturDonasi } from "@/app_modules/donasi";
-import { Donasi_getListDonatur } from "@/app_modules/donasi/fun/get/get_list_donatur";
+import { donasi_funGetListDonaturById } from "@/app_modules/donasi/fun/get/get_list_donatur";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const listDonatur = await Donasi_getListDonatur(params.id);
+  const donasiId = params.id;
+  const listDonatur = await donasi_funGetListDonaturById({
+    page: 1,
+    donasiId: donasiId,
+  });
 
   return (
     <>
-      <DonaturDonasi listDonatur={listDonatur as any} />
+      <DonaturDonasi listDonatur={listDonatur as any} donasiId={donasiId} />
     </>
   );
 }

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

@@ -1,13 +1,13 @@
 import { KabarDonasi } from "@/app_modules/donasi";
-import { Donasi_getListKabar } from "@/app_modules/donasi/fun/get/get_list_kabar";
+import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
 
 export default async function Page({params}: {params: {id: string}}) {
   const donasiId = params.id
-  const listKabar = await Donasi_getListKabar(donasiId)
+  const listKabar = await donasi_funGetListKabarById({ page: 1, donasiId : donasiId});
 
   return (
     <>
-      <KabarDonasi listKabar={listKabar as any} />
+      <KabarDonasi listKabar={listKabar as any} donasiId={donasiId} />
     </>
   );
 }

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

@@ -1,9 +1,9 @@
 import { ListKabarDonasi } from "@/app_modules/donasi";
-import { Donasi_getListKabar } from "@/app_modules/donasi/fun/get/get_list_kabar";
+import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
 
 export default async function Page({params}: {params: {id: string}}) {
 const donasiId = params.id
-const listKabar = await Donasi_getListKabar(donasiId)
+const listKabar = await donasi_funGetListKabarById({page: 1, donasiId : donasiId});
 
   return (
     <>

src/app/dev/donasi/main/beranda/page.tsx

@@ -1,8 +1,8 @@
 import { MainDonasi } from "@/app_modules/donasi";
-import { Donasi_getListBeranda } from "@/app_modules/donasi/fun/get/get_list_beranda";
+import { donasi_funGetAllPublish } from "@/app_modules/donasi/fun/get/get_list_beranda";
 
 export default async function Page() {
-    const listDonasi = await Donasi_getListBeranda()
-    // console.log(listDonasi)
-    return <MainDonasi listDonasi={listDonasi as any}/>
-}
+  const listDonasi = await donasi_funGetAllPublish({ page: 1 });
+  // console.log(listDonasi)
+  return <MainDonasi listDonasi={listDonasi as any} />;
+}

src/app/dev/donasi/main/donasi_saya/page.tsx

@@ -1,10 +1,8 @@
 import { DonasiSayaDonasi } from "@/app_modules/donasi";
-import { Donasi_getInvoiceByAuthorId } from "@/app_modules/donasi/fun/get/get_list_invoice_by_author_id";
-import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+import { donasi_funGetAllInvoiceByAuthorId } from "@/app_modules/donasi/fun/get/get_all_invoice_by_author_id";
 
 export default async function Page() {
-  const authorId = await user_getOneUserId();
-  const listInvoice = await Donasi_getInvoiceByAuthorId(authorId);
+  const listInvoice = await donasi_funGetAllInvoiceByAuthorId({ page: 1 });
 
   return <DonasiSayaDonasi listInvoice={listInvoice as any} />;
 }

src/app/dev/donasi/main/galang_dana/page.tsx

@@ -1,13 +1,17 @@
 import { PostingDonasi } from "@/app_modules/donasi";
 import Donasi_getByStatus from "@/app_modules/donasi/fun/get/get_donasi_by_status";
+import { donasi_funGetAllStatusDraft } from "@/app_modules/donasi/fun/get/status/get_all_status_draft";
+import { donasi_funGetAllStatusPublish } from "@/app_modules/donasi/fun/get/status/get_all_status_publish";
+import { donasi_funGetAllStatusReject } from "@/app_modules/donasi/fun/get/status/get_all_status_reject";
+import { donasi_funGetAllStatusReview } from "@/app_modules/donasi/fun/get/status/get_all_status_review";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
 export default async function Page() {
   const authorId = await user_getOneUserId();
-  const listPublish = await Donasi_getByStatus(authorId, "1")
-  const listReview = await Donasi_getByStatus(authorId, "2");
-  const listDraft = await Donasi_getByStatus(authorId, "3");
-  const listReject = await Donasi_getByStatus(authorId, "4")
+  const listPublish = await donasi_funGetAllStatusPublish({page: 1});
+  const listReview = await donasi_funGetAllStatusReview({page: 1});
+  const listDraft = await donasi_funGetAllStatusDraft({page: 1});
+  const listReject = await donasi_funGetAllStatusReject({page: 1});
 
 
 

src/app/dev/donasi/pencairan_dana/[id]/page.tsx

@@ -1,21 +1,16 @@
 import { PencairanDanaDonasi } from "@/app_modules/donasi";
-import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
-import { Donasi_getListPencairanDanaById } from "@/app_modules/donasi/fun/get/get_list_pencairan_dana_by_id";
+import { donasi_funGetListPencairanDanaById } from "@/app_modules/donasi/fun/get/get_list_pencairan_dana_by_id";
 import { Donasi_getTotalPencairanDanaById } from "@/app_modules/donasi/fun/get/get_pencairan_dana_by_id";
-import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
-import { Loader } from "@mantine/core";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let donasiId = params.id;
   const totalAkumulasi = await Donasi_getTotalPencairanDanaById(donasiId);
-  const listPencairan = await Donasi_getListPencairanDanaById(donasiId);
-  
-
-  // if (authorId != totalAkumulasi?.authorId) return <><NotifPeringatan /></>
+  const listPencairan = await donasi_funGetListPencairanDanaById({page: 1, donasiId: donasiId});
   
   return (
     <>
       <PencairanDanaDonasi
+        donasiId={donasiId}
         totalAkumulasi={totalAkumulasi as any}
         listPencairan={listPencairan as any}
       />

src/app/dev/event/main/status_page/page.tsx

@@ -1,16 +1,16 @@
 import { Event_StatusPage } from "@/app_modules/event";
-import { Event_getListByStatusId } from "@/app_modules/event/fun/get/get_list_event_by_status_id";
 import { event_getAllDraft } from "@/app_modules/event/fun/get/status/get_all_draft";
 import { event_getAllReject } from "@/app_modules/event/fun/get/status/get_all_reject";
 import { event_getAllReview } from "@/app_modules/event/fun/get/status/get_all_review";
+import { event_funGetAllStatusPublish } from "@/app_modules/event/fun/get/status/get_all_status_publish";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
 export default async function Page() {
   const authorId = await user_getOneUserId();
-  const listPublish = await Event_getListByStatusId("1", authorId);
-  const listReview = await event_getAllReview({page: 1});
+  const listPublish = await event_funGetAllStatusPublish({ page: 1 });
+  const listReview = await event_getAllReview({ page: 1 });
   const listDraft = await event_getAllDraft({ page: 1 });
-  const listReject = await event_getAllReject({page: 1});
+  const listReject = await event_getAllReject({ page: 1 });
 
   return (
     <Event_StatusPage

src/app/dev/investasi/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/detail_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/detail_portofolio/draft/[id]/page.tsx

@@ -7,7 +7,7 @@ export default async function Page({params}: {params: {id: string}}) {
     const dataInvestasi =  await getOneInvestasiById(params.id)
 
     return<>
-    <DetailDraftInvestasi dataInvestasi={dataInvestasi}/>
+    <DetailDraftInvestasi dataInvestasi={dataInvestasi as any}/>
     
     </>
 }

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

@@ -1,10 +1,11 @@
 import { DetailPublishInvestasi } from "@/app_modules/investasi";
 import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
 
-export default async function Page({params}: {params: {id: string}}) {
-
-    const dataInvestasi = await getOneInvestasiById(params.id)
-    return<>
-    <DetailPublishInvestasi dataInvestasi={dataInvestasi as any}/>
+export default async function Page({ params }: { params: { id: string } }) {
+  const dataInvestasi = await getOneInvestasiById(params.id);
+  return (
+    <>
+      <DetailPublishInvestasi dataInvestasi={dataInvestasi as any} />
     </>
-}
+  );
+}

src/app/dev/investasi/detail_saham_terbeli/[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/main/page.tsx

@@ -1,45 +1,12 @@
 import { MainInvestasi } from "@/app_modules/investasi";
-import funUpadteProgresPersenInvestasi from "@/app_modules/investasi/fun/fun_update_progres_persen";
-import funUpadteProgresWaktuInvestasi from "@/app_modules/investasi/fun/fun_update_progres_waktu";
-import getAllDataPublishInvestasi from "@/app_modules/investasi/fun/get_list_all_investasi";
-import { getListAllPublish } from "@/app_modules/investasi/fun/get_list_all_publish";
-import { MODEL_Investasi } from "@/app_modules/investasi/model/model_investasi";
-
-import _ from "lodash";
+import { investasi_funGetAllPublish } from "@/app_modules/investasi/fun/get_all_investasi";
 
 export default async function Page() {
-  const dataOnProgres = await getListAllPublish("1");
-  const dataSelesai = await getListAllPublish("2");
-  const dataWaktuHabis = await getListAllPublish("3");
-  const allData = await getAllDataPublishInvestasi();
-  // console.log(allData)
-
-  // const dataInves: MODEL_Investasi[] = [];
-
-  // for (let i of allData as any) {
-  //   await funUpadteProgresWaktuInvestasi(i).then(
-  //     async () =>
-  //       await funUpadteProgresPersenInvestasi(i).then(
-  //         async () =>
-  //           await getAllDataPublishInvestasi().then((val: any) =>
-  //             dataInves.push(val)
-  //           )
-  //       )
-  //   );
-  // }
-
-  // const realData = dataInves.map((e) => e)
-  // console.log(allData)
- 
- 
+  const allData = await investasi_funGetAllPublish();
 
   return (
     <>
-      <MainInvestasi
-        listData={allData as any}
-        dataSelesai={dataSelesai as any}
-        dataWaktuHabis={dataWaktuHabis as any}
-      />
+      <MainInvestasi listData={allData as any} />
     </>
   );
 }

src/app/dev/investasi/main/saham_saya/page.tsx

@@ -14,7 +14,7 @@ export default async function Page() {
     })
   );
   const listTransaksi = await getListTransaksiBerhasilInvestasi(user.id)
-  // console.log(listTransaksi)
+
   return (
     <>
       <InvestasiSahamTerbeli listTransaksi={listTransaksi as any} />

src/app/dev/investasi/proses_transaksi/[id]/layout.tsx

@@ -3,10 +3,15 @@ import React from "react";
 
 export default async function Layout({
   children,
+  params,
 }: {
   children: React.ReactNode;
+  params: {id: string}
 }) {
+  const investasiId = params.id;
   return (
-    <LayoutProsesTransaksiInvestasi>{children}</LayoutProsesTransaksiInvestasi>
+    <LayoutProsesTransaksiInvestasi investasiId={investasiId}>
+      {children}
+    </LayoutProsesTransaksiInvestasi>
   );
 }

src/app/dev/investasi/proses_transaksi/[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/status_pesanan/[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/emotion.tsx

@@ -10,6 +10,7 @@ import {
   useEmotionCache,
 } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
+import { Provider } from "jotai";
 import { useServerInsertedHTML } from "next/navigation";
 import "react-toastify/dist/ReactToastify.css";
 
@@ -39,25 +40,7 @@ export default function RootStyleRegistry({
         <CacheProvider value={cache}>
           <MantineProvider withGlobalStyles withNormalizeCSS>
             <Notifications position="top-center" containerWidth={300} />
-            {children}
-            {/* <Box
-              bg={"#252A2F"}
-              pos={"fixed"}
-              w={"100%"}
-              h={"100%"}
-              style={{
-                overflowY: "auto",
-              }}
-            >
-              <Container
-                mih={"100vh"}
-                p={0}
-                size={rem(500)}
-                bg={MainColor.darkblue}
-              >
-                
-              </Container>
-            </Box> */}
+            <Provider>{children}</Provider>
           </MantineProvider>
         </CacheProvider>
       </body>

src/app/lib/router_admin/router_admin_investasi.ts

@@ -3,4 +3,9 @@ export const RouterAdminInvestasi = {
   table_publish: "/dev/admin/investasi/sub-menu/publish",
   table_review: "/dev/admin/investasi/sub-menu/review",
   table_reject: "/dev/admin/investasi/sub-menu/reject",
+
+  // detail
+  detail_publish: "/dev/admin/investasi/detail/publish/",
+  detail_review: "/dev/admin/investasi/detail/review/",
+  detail_reject: "/dev/admin/investasi/detail/reject/",
 };

src/app/lib/router_hipmi/router_donasi.ts

@@ -36,6 +36,7 @@ export const RouterDonasi = {
   detail_donasi_saya: "/dev/donasi/detail/detail_donasi_saya/",
   detail_notif: "/dev/donasi/detail/detail_notif/",
 
+
   //alur donasi
   donatur: "/dev/donasi/donatur/",
   kabar: "/dev/donasi/kabar/",
@@ -44,6 +45,7 @@ export const RouterDonasi = {
   cerita_penggalang: "/dev/donasi/cerita_penggalang/",
   list_kabar: "/dev/donasi/list_kabar/",
   notif_page: "/dev/donasi/notif_page/",
+  bukti_transfer: "/dev/donasi/bukti-transfer/",
 
   // proses donasi
   masukan_donasi: "/dev/donasi/proses_donasi/masukan_donasi/",

src/app_modules/admin/component_global/back_button.tsx

@@ -5,7 +5,11 @@ import { IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-export default function ComponentAdminGlobal_BackButton({path}:{path?:string}) {
+export default function ComponentAdminGlobal_BackButton({
+  path,
+}: {
+  path?: string;
+}) {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
 
@@ -17,18 +21,21 @@ export default function ComponentAdminGlobal_BackButton({path}:{path?:string}) {
           // loading={isLoading ? true : false}
           c={"gray"}
           leftIcon={
-            isLoading ? <Loader size={"xs"} color={"gray"} /> : <IconChevronLeft />
+            isLoading ? (
+              <Loader size={"xs"} color={"gray"} />
+            ) : (
+              <IconChevronLeft />
+            )
           }
           variant="white"
           onClick={() => {
             setLoading(true);
             // setTimeout(() => , 3000);
-            if(path==null){
+            if (path == null) {
               router.back();
-            }else{
-              router.push(path)
+            } else {
+              router.push(path);
             }
-            
           }}
         >
           Kembali

src/app_modules/admin/forum/sub_menu/table_posting.tsx

@@ -186,6 +186,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
             }}
           />
         </Group>
+        
         {isEmpty(data) ? (
           <ComponentAdminGlobal_IsEmptyData />
         ) : (

src/app_modules/admin/investasi/_component/detail_data_author.tsx

@@ -0,0 +1,50 @@
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import { Paper, Stack, Title, Grid, Text } from "@mantine/core";
+
+export function ComponentAdminInvestasi_DetailDataAuthor({
+  data,
+}: {
+  data: any;
+}) {
+  return (
+    <Paper withBorder p={"lg"}>
+      <Stack>
+        <Title order={3}>Data User</Title>
+        <Stack spacing={"xs"}>
+          <Grid>
+            <Grid.Col span={6}>
+              <Text fw={"bold"}>Nama:</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Text>{data?.Profile?.name}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={6}>
+              <Text fw={"bold"}>Username:</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Text>@{data?.username}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={6}>
+              <Text fw={"bold"}>Nomor:</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Text>+ {data?.nomor}</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={6}>
+              <Text fw={"bold"}>Alamat:</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Text>{data?.Profile?.alamat}</Text>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Stack>
+    </Paper>
+  );
+}

src/app_modules/admin/investasi/_component/detail_data_investasi.tsx

@@ -0,0 +1,82 @@
+import { Paper, Stack, Title, Grid, Box, Text } from "@mantine/core";
+
+export function ComponentAdminInvestasi_DetailData({ data }: { data: any }) {
+  return (
+    <>
+      <Paper withBorder p={"lg"}>
+        <Stack>
+          <Title order={3}>Rincian Data Investasi</Title>
+          <Grid justify="center">
+            <Grid.Col span={6}>
+              <Stack>
+                <Box>
+                  <Text>Judul</Text>
+                  <Text fw={"bold"}>{data?.title}</Text>
+                </Box>
+
+                <Box>
+                  <Text>Dana Dibutuhkan</Text>
+                  <Text fw={"bold"}>
+                    Rp.{" "}
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumFractionDigits: 10,
+                    }).format(+data.targetDana)}
+                  </Text>
+                </Box>
+
+                <Box>
+                  <Text>Harga Per Lembar</Text>
+                  <Text fw={"bold"}>
+                    Rp.{" "}
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumFractionDigits: 10,
+                    }).format(+data.hargaLembar)}{" "}
+                  </Text>
+                </Box>
+
+                <Box>
+                  <Text>Total Lembar</Text>
+                  <Text fw={"bold"}>
+                    {" "}
+                    {new Intl.NumberFormat("id-ID", {
+                      maximumFractionDigits: 10,
+                    }).format(+data.totalLembar)}{" "}
+                    lembar
+                  </Text>
+                </Box>
+              </Stack>
+            </Grid.Col>
+
+            <Grid.Col span={6}>
+              <Stack>
+                <Box>
+                  <Text>ROI</Text>
+                  <Text fw={"bold"}>{data.roi} %</Text>
+                </Box>
+
+                <Box>
+                  <Text>Pembagian Deviden</Text>
+                  <Text fw={"bold"}>{data.MasterPeriodeDeviden.name}</Text>
+                </Box>
+
+                <Box>
+                  <Text>Jadwal Pembagian</Text>
+                  <Text fw={"bold"}>
+                    {data.MasterPembagianDeviden.name} bulan{" "}
+                  </Text>
+                </Box>
+
+                <Box>
+                  <Text>Pencarian Investor</Text>
+                  <Text fw={"bold"}>
+                    {data.MasterPencarianInvestor.name} hari{" "}
+                  </Text>
+                </Box>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/admin/investasi/_component/detail_gambar_investasi.tsx

@@ -0,0 +1,28 @@
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Paper, Stack, Title, AspectRatio, Center, Image } from "@mantine/core";
+
+export function ComponentAdminInvestasi_DetailGambar({imagesId}: {imagesId: any}) {
+    return (
+      <>
+        <Paper withBorder p={"lg"}>
+          <Stack>
+            <Title align="center" order={3}>
+              Gambar Proyek
+            </Title>
+
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Center>
+                <Image
+                  style={{ borderRadius: "10px" }}
+                  radius={"md"}
+                  width={200}
+                  alt=""
+                  src={RouterInvestasi.api_gambar + `${imagesId}`}
+                />
+              </Center>
+            </AspectRatio>
+          </Stack>
+        </Paper>
+      </>
+    );
+}

src/app_modules/admin/investasi/_component/ui_detail_file.tsx

@@ -0,0 +1,99 @@
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  SimpleGrid,
+  Paper,
+  Stack,
+  Title,
+  Grid,
+  Group,
+  Button,
+  Text,
+} from "@mantine/core";
+import { IconFileTypePdf } from "@tabler/icons-react";
+import _ from "lodash";
+import Link from "next/link";
+
+export function ComponentAdminInvestasi_UIDetailFile({
+  title,
+  dataProspektus,
+  listDokumen,
+}: {
+  title: string;
+  dataProspektus: any;
+  listDokumen: any[];
+}) {
+  return (
+    <>
+      <SimpleGrid
+        cols={1}
+        spacing="lg"
+        breakpoints={[
+          { maxWidth: "62rem", cols: 1, spacing: "md" },
+          { maxWidth: "48rem", cols: 1, spacing: "sm" },
+          { maxWidth: "36rem", cols: 1, spacing: "sm" },
+        ]}
+      >
+        <Paper withBorder p={"lg"}>
+          <Stack>
+            <Title order={3}>File & Dokumen</Title>
+
+            <Stack spacing={50}>
+              {/* File */}
+              <Grid align="center">
+                <Grid.Col span={4}>
+                  <Text fw={"bold"}>File:</Text>
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <Group>
+                    <IconFileTypePdf />
+                    <Text>Prospek {title}</Text>
+                    <Link
+                      target="_blank"
+                      href={
+                        RouterInvestasi.api_file_prospektus +
+                        `${dataProspektus === null ? "" : dataProspektus.id}`
+                      }
+                    >
+                      <Button radius={50}>Lihat</Button>
+                    </Link>
+                  </Group>
+                </Grid.Col>
+              </Grid>
+
+              {/* Dokumen */}
+              <Grid>
+                <Grid.Col span={4}>
+                  <Text fw={"bold"}>Dokumen:</Text>
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <Stack>
+                    {_.isEmpty(listDokumen) ? (
+                      <Text>-</Text>
+                    ) : (
+                      listDokumen.map((e: any) => (
+                        <Paper key={e.id}>
+                          <Group>
+                            <IconFileTypePdf />
+                            <Text>{e.title}</Text>
+                            <Link
+                              target="_blank"
+                              href={
+                                RouterInvestasi.api_file_dokumen + `${e.id}`
+                              }
+                            >
+                              <Button radius={50}>Lihat</Button>
+                            </Link>
+                          </Group>
+                        </Paper>
+                      ))
+                    )}
+                  </Stack>
+                </Grid.Col>
+              </Grid>
+            </Stack>
+          </Stack>
+        </Paper>
+      </SimpleGrid>
+    </>
+  );
+}

src/app_modules/admin/investasi/detail/detail_publish.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { MODEL_Investasi } from "@/app_modules/investasi/model/model_investasi";
+import {
+  AspectRatio,
+  Box,
+  Center,
+  Grid,
+  Image,
+  List,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  ThemeIcon,
+  Title,
+} from "@mantine/core";
+import ComponentAdminGlobal_BackButton from "../../component_global/back_button";
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { IconCircleCheck, IconHome } from "@tabler/icons-react";
+import investasi from "../../notifikasi/route_setting/investasi";
+
+export function AdminInvestasi_DetailPublish({
+  data,
+}: {
+  data: MODEL_Investasi;
+}) {
+  return (
+    <>
+      <Stack>
+        <ComponentAdminGlobal_BackButton />
+        <SimpleGrid cols={2}>
+          <InformasiAuthor data={data} />
+          <InformasiDataInvestasi data={data} />
+        </SimpleGrid>
+      </Stack>
+    </>
+  );
+}
+
+function InformasiAuthor({ data }: { data: MODEL_Investasi }) {
+  return (
+    <>
+      <Paper withBorder>
+        <Stack p={"lg"} spacing={"xl"}>
+          <Title align="center" order={3}>
+            {data.title}
+          </Title>
+
+          <AspectRatio ratio={1 / 1} mah={300}>
+            <Center>
+              <Image
+                bg={"blue"}
+                style={{ borderRadius: "10px" }}
+                radius={"md"}
+                width={250}
+                alt=""
+                src={RouterInvestasi.api_gambar + `${data.imagesId}`}
+              />
+            </Center>
+          </AspectRatio>
+
+          <Stack spacing={"sm"}>
+            <Title order={4}>Informasi pemilik</Title>
+
+            <List
+              spacing="xs"
+              size="sm"
+              center
+              icon={
+                <ThemeIcon color="teal" size={24} radius="xl">
+                  <IconCircleCheck size="1rem" />
+                </ThemeIcon>
+              }
+            >
+              <List.Item>{data.author.username}</List.Item>
+              <List.Item>+{data.author.nomor}</List.Item>
+              <List.Item>{data.author.Profile.email}</List.Item>
+            </List>
+          </Stack>
+        </Stack>
+      </Paper>
+    </>
+  );
+}
+
+function InformasiDataInvestasi({ data }: { data: MODEL_Investasi }) {
+  return (
+    <>
+      <Paper withBorder p={"lg"}>
+        <Stack>
+          <Title order={3}>Rincian Data Investasi</Title>
+          <Grid justify="center">
+            <Grid.Col>
+              <Grid mt={"md"} justify="center">
+                <Grid.Col span={6}>
+                  <Stack>
+                    <Box>
+                      <Text>Dana Dibutuhkan</Text>
+                      <Text fw={"bold"}>
+                        Rp.{" "}
+                        {new Intl.NumberFormat("id-ID", {
+                          maximumFractionDigits: 10,
+                        }).format(+data.targetDana)}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text>Harga Per Lembar</Text>
+                      <Text fw={"bold"}>
+                        Rp.{" "}
+                        {new Intl.NumberFormat("id-ID", {
+                          maximumFractionDigits: 10,
+                        }).format(+data.hargaLembar)}{" "}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text>Jadwal Pembagian</Text>
+                      <Text fw={"bold"}>
+                        {data.MasterPembagianDeviden.name} bulan{" "}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text>Pencarian Investor</Text>
+                      <Text fw={"bold"}>
+                        {data.MasterPencarianInvestor.name} hari{" "}
+                      </Text>
+                    </Box>
+                  </Stack>
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <Stack>
+                    <Box>
+                      <Text>ROI</Text>
+                      <Text fw={"bold"}>{data.roi} %</Text>
+                    </Box>
+                    <Box>
+                      <Text>Total Lembar</Text>
+                      <Text fw={"bold"}>
+                        {" "}
+                        {new Intl.NumberFormat("id-ID", {
+                          maximumFractionDigits: 10,
+                        }).format(+data.totalLembar)}{" "}
+                        lembar
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text>Pembagian Deviden</Text>
+                      <Text fw={"bold"}>{data.MasterPeriodeDeviden.name}</Text>
+                    </Box>
+                  </Stack>
+                </Grid.Col>
+              </Grid>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/admin/investasi/detail/detail_reject.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { MODEL_Investasi } from "@/app_modules/investasi/model/model_investasi";
+import {
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title
+} from "@mantine/core";
+import ComponentAdminGlobal_BackButton from "../../component_global/back_button";
+import { ComponentAdminInvestasi_DetailDataAuthor } from "../_component/detail_data_author";
+import { ComponentAdminInvestasi_DetailData } from "../_component/detail_data_investasi";
+import { ComponentAdminInvestasi_DetailGambar } from "../_component/detail_gambar_investasi";
+import { ComponentAdminInvestasi_UIDetailFile } from "../_component/ui_detail_file";
+
+export function AdminInvestasi_DetailReject({
+  data,
+}: {
+  data: MODEL_Investasi;
+}) {
+  return (
+    <>
+      <Stack px={"lg"}>
+        <ComponentAdminGlobal_BackButton />
+        <SimpleGrid
+          cols={3}
+          spacing="lg"
+          breakpoints={[
+            { maxWidth: "62rem", cols: 3, spacing: "md" },
+            { maxWidth: "48rem", cols: 2, spacing: "sm" },
+            { maxWidth: "36rem", cols: 1, spacing: "sm" },
+          ]}
+        >
+          <Paper withBorder p={"lg"}>
+            <Stack>
+              <Title order={3} c={"red"}>
+                #{" "}
+                <Text span inherit c={"black"}>
+                  Alasan penolakan
+                </Text>
+              </Title>
+              <Text>{data.catatan}</Text>
+            </Stack>
+          </Paper>
+        </SimpleGrid>
+
+        <SimpleGrid
+          cols={3}
+          spacing="lg"
+          breakpoints={[
+            { maxWidth: "62rem", cols: 3, spacing: "md" },
+            { maxWidth: "48rem", cols: 2, spacing: "sm" },
+            { maxWidth: "36rem", cols: 1, spacing: "sm" },
+          ]}
+        >
+          {/* Data Author */}
+          <ComponentAdminInvestasi_DetailDataAuthor data={data.author} />
+
+          {/* Data Foto */}
+          <ComponentAdminInvestasi_DetailGambar imagesId={data.imagesId} />
+
+          {/* Data Detail */}
+          <ComponentAdminInvestasi_DetailData data={data} />
+        </SimpleGrid>
+
+        <ComponentAdminInvestasi_UIDetailFile
+          title={data.title}
+          dataProspektus={data.ProspektusInvestasi}
+          listDokumen={data.DokumenInvestasi}
+        />
+        {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+      </Stack>
+    </>
+  );
+}

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

@@ -1,173 +1,224 @@
 "use client";
 
-import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { Warna } from "@/app/lib/warna";
-import funEditInvestasi from "@/app_modules/investasi/fun/fun_edit_investasi";
-import funGantiStatusInvestasi from "@/app_modules/investasi/fun/fun_ganti_status";
-import { gs_StatusPortoInvestasi } from "@/app_modules/investasi/g_state";
+import { BeritaInvestasi } from "@/app_modules/investasi";
 import { MODEL_Investasi } from "@/app_modules/investasi/model/model_investasi";
-import { MODEL_PROFILE_OLD } from "@/app_modules/home/model/user_profile";
+import mqtt_client from "@/util/mqtt_client";
 import {
-  Group,
-  Flex,
-  Avatar,
-  Paper,
   AspectRatio,
   Box,
-  Title,
-  Slider,
-  Grid,
-  Stack,
-  ActionIcon,
-  Center,
   Button,
-  Text,
-  Image,
-  Collapse,
-  Textarea,
+  Center,
   Divider,
-  Mark,
+  Grid,
+  Group,
+  Image,
   Modal,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Textarea,
+  Title,
 } from "@mantine/core";
-import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { useShallowEffect } from "@mantine/hooks";
 import {
   IconAlertHexagonFilled,
-  IconBan,
-  IconBookDownload,
   IconCheck,
-  IconChevronDown,
-  IconChevronLeft,
-  IconChevronRight,
-  IconFile,
-  IconFileDescription,
   IconFileTypePdf,
-  IconPdf,
-  IconSpeakerphone,
 } from "@tabler/icons-react";
-import { useAtom } from "jotai";
 import _ from "lodash";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast, { toastConfig } from "react-simple-toasts";
-import Admin_funRejectInvestasi from "../fun/fun_reject_investasi";
-import { RouterAdminInvestasi_OLD } from "@/app/lib/router_hipmi/router_admin";
 import "react-simple-toasts/dist/theme/dark.css";
-import { BeritaInvestasi } from "@/app_modules/investasi";
+import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../component_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentAdminGlobal_NotifikasiGagal } from "../../component_global/admin_notifikasi/notifikasi_gagal";
+import { ComponentAdminGlobal_NotifikasiPeringatan } from "../../component_global/admin_notifikasi/notifikasi_peringatan";
+import ComponentAdminGlobal_BackButton from "../../component_global/back_button";
+import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
+import { ComponentAdminInvestasi_DetailDataAuthor } from "../_component/detail_data_author";
+import { ComponentAdminInvestasi_DetailData } from "../_component/detail_data_investasi";
+import { ComponentAdminInvestasi_DetailGambar } from "../_component/detail_gambar_investasi";
+import { ComponentAdminInvestasi_UIDetailFile } from "../_component/ui_detail_file";
+import { adminInvestasi_funEditStatusPublishById } from "../fun/edit/fun_status_publish_by_id";
+import Admin_funRejectInvestasi from "../fun/fun_reject_investasi";
+import getOneInvestasiById from "@/app_modules/investasi/fun/get_one_investasi_by_id";
 
-toastConfig({ theme: "dark" });
-
-export default function Admin_KonfirmasiInvestasi({
+export default function AdminInvestasi_DetailReview({
   dataInvestasi,
-  dataUser,
 }: {
   dataInvestasi: MODEL_Investasi;
-  dataUser: MODEL_PROFILE_OLD;
 }) {
   const router = useRouter();
-  const [investasi, setInvestasi] = useState(dataInvestasi);
-  const [user, setUser] = useState(dataUser);
+  const [data, setData] = useState(dataInvestasi);
   const [publish, setPublish] = useState(true);
-  const [opened, { toggle }] = useDisclosure(false);
-  const [catatan, setCatatan] = useState<string | number>("");
-  const [status, setStatus] = useAtom(gs_StatusPortoInvestasi);
-
-  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,
-    },
-    {
-      id: 3,
-      name: "Berita",
-      icon: <IconSpeakerphone size={70} />,
-      route: RouterInvestasi.berita,
-    },
-  ];
+  const [openModal, setOpenModal] = useState(false);
+  const [isLoadingPublish, setIsLoadingPublish] = useState(false);
+  const [isLoadingReject, setIsLoadingReject] = useState(false);
 
   useShallowEffect(() => {
     cekStatusPublish();
   }, []);
 
   async function cekStatusPublish() {
-    if (investasi.MasterStatusInvestasi.id === "3") setPublish(false);
+    if (data.MasterStatusInvestasi.id === "3") setPublish(false);
   }
 
   async function onReject() {
     const body = {
-      id: investasi.id,
-      catatan: investasi.catatan,
+      id: data.id,
+      catatan: data.catatan,
       status: "4",
     };
-    if (_.isEmpty(body.catatan)) return toast("Lengkapi alasan");
-    await Admin_funRejectInvestasi(body).then((res) => {
-      if (res.status === 200) {
-        toast(res.message);
-        router.back();
-        toggle();
-      } else {
-        toast(res.message);
+    if (_.isEmpty(body.catatan))
+      return ComponentAdminGlobal_NotifikasiPeringatan("Lengkapi alasan");
+    const res = await Admin_funRejectInvestasi(body);
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.id,
+        userId: res.data?.authorId,
+        pesan: res.data?.title,
+        status: res.data?.MasterStatusInvestasi?.name,
+        kategoriApp: "INVESTASI",
+        title: "Investasi 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 loadData = await getOneInvestasiById(data.id);
+      setData(loadData as any);
+
+      ComponentAdminGlobal_NotifikasiBerhasil(res.message);
+      router.back();
+    } else {
+      ComponentAdminGlobal_NotifikasiGagal(res.message);
+    }
   }
 
   async function onPublish() {
-    await funGantiStatusInvestasi(investasi.id, "3", "1").then((res) => {
-      if (res.status === 200) {
-        setTimeout(() => setPublish(false), 1000);
-        router.push(RouterAdminInvestasi_OLD.table_status_review);
-        toast("Proyek Investasi Di Publish");
-      }
+    const res = await adminInvestasi_funEditStatusPublishById({
+      investasiId: data.id,
+      statusId: "1",
+      progesInvestasiId: "1",
     });
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.id,
+        userId: res.data?.authorId as any,
+        pesan: res.data?.title as any,
+        status: res.data?.MasterStatusInvestasi?.name as any,
+        kategoriApp: "INVESTASI",
+        title: "Investasi 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 })
+        );
+
+        mqtt_client.publish(
+          "Beranda_Investasi",
+          JSON.stringify({ update: true })
+        );
+
+        const loadData = await getOneInvestasiById(data.id);
+        setData(loadData as any);
+
+        ComponentAdminGlobal_NotifikasiBerhasil("Proyek Investasi Di Publish");
+        router.back();
+        // router.push(RouterAdminInvestasi_OLD.table_status_review);
+      }
+    } else {
+      ComponentAdminGlobal_NotifikasiGagal(res.message);
+    }
   }
 
   return (
     <>
-      <Group position="apart" px={"md"}>
-        <Group>
-          <ActionIcon onClick={() => router.back()}>
-            <IconChevronLeft />
-          </ActionIcon>
-          <Flex align={"center"} gap={"xs"} pl={"lg"}>
-            {/* <Avatar
-              radius={50}
-              size={"md"}
-              src={
-                RouterProfile.api_foto +
-                `${user.Profile?.ImageProfile?.url}`
-              }
-            /> */}
-            <Text>{user.username}</Text>
-          </Flex>
+      <Stack px={"lg"}>
+        <Group position="apart">
+          <ComponentAdminGlobal_BackButton />
+
+          {data.masterStatusInvestasiId === "2" ? (
+            <Group>
+              <Button
+                loaderPosition="center"
+                loading={isLoadingPublish}
+                radius={"xl"}
+                color="green"
+                onClick={() => onPublish()}
+              >
+                Publish
+              </Button>
+              <Button
+                loaderPosition="center"
+                loading={isLoadingReject}
+                radius={"xl"}
+                color="red"
+                onClick={() => onReject()}
+              >
+                Reject
+              </Button>
+            </Group>
+          ) : (
+            ""
+          )}
         </Group>
+        <SimpleGrid
+          cols={3}
+          spacing="lg"
+          breakpoints={[
+            { maxWidth: "62rem", cols: 3, spacing: "md" },
+            { maxWidth: "48rem", cols: 2, spacing: "sm" },
+            { maxWidth: "36rem", cols: 1, spacing: "sm" },
+          ]}
+        >
+          {/* Data Author */}
+          <ComponentAdminInvestasi_DetailDataAuthor data={data.author} />
+
+          {/* Data Foto */}
+          <ComponentAdminInvestasi_DetailGambar imagesId={data.imagesId} />
+
+          {/* Data Detail */}
+          <ComponentAdminInvestasi_DetailData data={data} />
+        </SimpleGrid>
+
+        <ComponentAdminInvestasi_UIDetailFile
+          title={data.title}
+          dataProspektus={data.ProspektusInvestasi}
+          listDokumen={data.DokumenInvestasi}
+        />
+      </Stack>
+    </>
+  );
+
+  return (
+    <>
+      <Group position="apart" px={"md"}>
+        <ComponentAdminGlobal_BackButton
+          path={RouterAdminInvestasi.table_review}
+        />
         <Group>
-          {" "}
           <Center>
-            {!publish || investasi.MasterStatusInvestasi.id === "4" ? (
+            {!publish || data.MasterStatusInvestasi.id === "4" ? (
               ""
             ) : (
-              //    <Button
-              //    radius={50}
-              //    leftIcon={<IconBan />}
-              //    bg={"orange"}
-              //    color="orange"
-              //    onClick={() => {
-              //      setTimeout(() => setPublish(true), 1000);
-              //      toast("Proyek Investasi Di Non-Aktifkan");
-              //    }}
-              //  >
-              //    Non - aktifkan
-              //  </Button>
               <Button
                 radius={50}
                 bg={"green"}
@@ -181,14 +232,14 @@ export default function Admin_KonfirmasiInvestasi({
               </Button>
             )}
           </Center>
-          {investasi.MasterStatusInvestasi.id === "3" ? (
+          {data.MasterStatusInvestasi.id === "3" ? (
             ""
           ) : (
             <Button
               radius={50}
               bg={"red"}
               color="red"
-              onClick={toggle}
+              onClick={() => setOpenModal(true)}
               rightIcon={<IconAlertHexagonFilled />}
             >
               Reject
@@ -205,14 +256,14 @@ export default function Admin_KonfirmasiInvestasi({
             {/* Title  */}
             <Center my={"sm"}>
               <Title order={4} mb={"xs"}>
-                {investasi.title}
+                {data.title}
               </Title>
             </Center>
             <Paper withBorder mb={"md"} mah={300} maw={400} mx={"auto"} p={5}>
               <AspectRatio ratio={16 / 9}>
                 <Image
                   alt=""
-                  src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
+                  src={RouterInvestasi.api_gambar + `${data.imagesId}`}
                 />
               </AspectRatio>
             </Paper>
@@ -229,7 +280,7 @@ export default function Admin_KonfirmasiInvestasi({
                       Rp.{" "}
                       {new Intl.NumberFormat("id-ID", {
                         maximumFractionDigits: 10,
-                      }).format(+investasi.targetDana)}
+                      }).format(+data.targetDana)}
                     </Text>
                   </Box>
                   <Box>
@@ -238,16 +289,16 @@ export default function Admin_KonfirmasiInvestasi({
                       Rp.{" "}
                       {new Intl.NumberFormat("id-ID", {
                         maximumFractionDigits: 10,
-                      }).format(+investasi.hargaLembar)}{" "}
+                      }).format(+data.hargaLembar)}{" "}
                     </Text>
                   </Box>
                   <Box>
                     <Text>Jadwal Pembagian</Text>
-                    <Text>{investasi.MasterPembagianDeviden.name} bulan </Text>
+                    <Text>{data.MasterPembagianDeviden.name} bulan </Text>
                   </Box>
                   <Box>
                     <Text>Pencarian Investor</Text>
-                    <Text>{investasi.MasterPencarianInvestor.name} hari </Text>
+                    <Text>{data.MasterPencarianInvestor.name} hari </Text>
                   </Box>
                 </Stack>
               </Grid.Col>
@@ -255,7 +306,7 @@ export default function Admin_KonfirmasiInvestasi({
                 <Stack>
                   <Box>
                     <Text>ROI</Text>
-                    <Text>{investasi.roi} %</Text>
+                    <Text>{data.roi} %</Text>
                   </Box>
                   <Box>
                     <Text>Total Lembar</Text>
@@ -263,13 +314,13 @@ export default function Admin_KonfirmasiInvestasi({
                       {" "}
                       {new Intl.NumberFormat("id-ID", {
                         maximumFractionDigits: 10,
-                      }).format(+investasi.totalLembar)}{" "}
+                      }).format(+data.totalLembar)}{" "}
                       lembar
                     </Text>
                   </Box>
                   <Box>
                     <Text>Pembagian Deviden</Text>
-                    <Text>{investasi.MasterPeriodeDeviden.name}</Text>
+                    <Text>{data.MasterPeriodeDeviden.name}</Text>
                   </Box>
                 </Stack>
               </Grid.Col>
@@ -280,7 +331,7 @@ export default function Admin_KonfirmasiInvestasi({
         <Grid>
           <Grid.Col span={6}>
             {/* Note */}
-            {!publish || investasi.MasterStatusInvestasi.id === "4" ? (
+            {!publish || data.MasterStatusInvestasi.id === "4" ? (
               ""
             ) : (
               <Stack spacing={0}>
@@ -294,9 +345,9 @@ export default function Admin_KonfirmasiInvestasi({
               </Stack>
             )}
             {publish &&
-            investasi.MasterStatusInvestasi.id === "3" &&
-            _.isEmpty(investasi.BeritaInvestasi) ? (
-              <BeritaInvestasi dataInvestasi={investasi} />
+            data.MasterStatusInvestasi.id === "3" &&
+            _.isEmpty(data.BeritaInvestasi) ? (
+              <BeritaInvestasi dataInvestasi={data} />
             ) : (
               ""
             )}
@@ -309,21 +360,21 @@ export default function Admin_KonfirmasiInvestasi({
                 {/* Prospektus */}
                 <Stack spacing={0}>
                   <Title order={6}>Prospektus :</Title>
-                  {investasi.ProspektusInvestasi === null ? (
+                  {data.ProspektusInvestasi === null ? (
                     <Text>Tidak ada file</Text>
                   ) : (
                     <Paper p={"xs"}>
                       <Group>
                         <IconFileTypePdf />
-                        <Text>Prospektus_{investasi.title}</Text>
+                        <Text>Prospektus_{data.title}</Text>
                         <Link
                           target="_blank"
                           href={
                             RouterInvestasi.api_file_prospektus +
                             `${
-                              investasi.ProspektusInvestasi === null
+                              data.ProspektusInvestasi === null
                                 ? ""
-                                : investasi.ProspektusInvestasi.id
+                                : data.ProspektusInvestasi.id
                             }`
                           }
                         >
@@ -339,10 +390,10 @@ export default function Admin_KonfirmasiInvestasi({
                 {/* Dokumen */}
                 <Stack spacing={0}>
                   <Title order={6}>Dokumen :</Title>
-                  {_.isEmpty(investasi.DokumenInvestasi) ? (
+                  {_.isEmpty(data.DokumenInvestasi) ? (
                     <Text>Tidak ada dokumen</Text>
                   ) : (
-                    investasi.DokumenInvestasi.map((e) => (
+                    data.DokumenInvestasi.map((e) => (
                       <Paper p={"xs"} key={e.id}>
                         <Group>
                           <IconFileTypePdf />
@@ -367,8 +418,8 @@ export default function Admin_KonfirmasiInvestasi({
 
         <Modal
           centered
-          opened={opened}
-          onClose={toggle}
+          opened={openModal}
+          onClose={() => setOpenModal(false)}
           // withCloseButton={false}
           title="Masukan alasan penolakan"
         >
@@ -377,10 +428,10 @@ export default function Admin_KonfirmasiInvestasi({
             autosize
             minRows={2}
             maxRows={4}
-            value={investasi.catatan === null ? [] : investasi.catatan}
+            value={data.catatan === null ? [] : data.catatan}
             onChange={(val) =>
-              setInvestasi({
-                ...investasi,
+              setData({
+                ...data,
                 catatan: val.target.value,
               })
             }

src/app_modules/admin/investasi/fun/edit/fun_status_publish_by_id.ts

@@ -0,0 +1,46 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { revalidatePath } from "next/cache";
+
+export async function adminInvestasi_funEditStatusPublishById({
+  investasiId,
+  statusId,
+  progesInvestasiId,
+}: {
+  investasiId: string;
+  statusId: string;
+  progesInvestasiId: string;
+}) {
+  const publishTime = new Date();
+  const res = await prisma.investasi.update({
+    where: {
+      id: investasiId,
+    },
+    data: {
+      countDown: publishTime,
+      masterStatusInvestasiId: statusId,
+      masterProgresInvestasiId: progesInvestasiId,
+    },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      MasterStatusInvestasi: {
+        select: {
+          name: true,
+        },
+      },    
+    }
+  });
+
+  if (!res) return { status: 400, message: "Gagal Update" };
+  revalidatePath(RouterInvestasi.portofolio);
+
+  return {
+    data: res,
+    status: 200,
+    message: "Publish Berhasil",
+  };
+}

src/app_modules/admin/investasi/fun/fun_reject_investasi.ts

@@ -1,26 +1,36 @@
-"use server"
+"use server";
 
-import prisma from "@/app/lib/prisma"
-import { RouterAdminInvestasi_OLD } from "@/app/lib/router_hipmi/router_admin"
-import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi"
-import { revalidatePath } from "next/cache"
+import prisma from "@/app/lib/prisma";
+import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
+import { revalidatePath } from "next/cache";
 
 export default async function Admin_funRejectInvestasi(data: any) {
-    // console.log(data)
+  // console.log(data)
 
-    const res = await prisma.investasi.update({
-        where: { id: data.id },
-        data: {
-            masterStatusInvestasiId: data.status,
-            catatan: data.catatan
-        }
-    })
-    if(!res) return {status: 400, message: "Gagal reject"}
+  const res = await prisma.investasi.update({
+    where: { id: data.id },
+    data: {
+      masterStatusInvestasiId: data.status,
+      catatan: data.catatan,
+    },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      MasterStatusInvestasi: {
+        select: {
+          name: true,
+        },
+      },
+    },
+  });
+  if (!res) return { status: 400, message: "Gagal reject" };
 
-    revalidatePath(RouterAdminInvestasi_OLD.main_investasi)
+  revalidatePath(RouterAdminInvestasi.detail_review);
 
-    return {
-        status: 200,
-        message: "Reject berhasil"
-    }
-}
+  return {
+    data: res,
+    status: 200,
+    message: "Reject berhasil",
+  };
+}

src/app_modules/admin/investasi/fun/get/get_all_publish.ts

@@ -0,0 +1,71 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { ceil } from "lodash";
+
+export async function adminInvestasi_funGetAllPublish({
+  page,
+  search,
+}: {
+  page: number;
+  search?: string;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.investasi.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      countDown: "desc",
+    },
+    where: {
+      active: true,
+      masterStatusInvestasiId: "1",
+      title: {
+        contains: search,
+        mode: "insensitive",
+      },
+    },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      hargaLembar: true,
+      targetDana: true,
+      totalLembar: true,
+      roi: true,
+      active: true,
+      imagesId: true,
+      catatan: true,
+      MasterStatusInvestasi: true,
+      BeritaInvestasi: true,
+      DokumenInvestasi: true,
+      ProspektusInvestasi: true,
+      MasterPembagianDeviden: true,
+      MasterPencarianInvestor: true,
+      MasterPeriodeDeviden: true,
+      author: true,
+      progress: true,
+      sisaLembar: true,
+    },
+  });
+
+  const nCount = await prisma.investasi.count({
+    where: {
+      active: true,
+      masterStatusInvestasiId: "1",
+      title: {
+        contains: search,
+        mode: "insensitive",
+      },
+    },
+  });
+
+  const allData = {
+    data: data,
+    nPage: ceil(nCount / takeData),
+  };
+
+  return allData;
+}

src/app_modules/admin/investasi/fun/get/get_all_reject.ts

@@ -0,0 +1,61 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { ceil } from "lodash";
+
+export async function adminInvestasi_funGetAllReject({
+  page,
+  search,
+}: {
+  page: number;
+  search?: string;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.investasi.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      createdAt: "desc",
+    },
+    where: {
+      active: true,
+      masterStatusInvestasiId: "4",
+      title: {
+        contains: search,
+        mode: "insensitive",
+      },
+    },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      hargaLembar: true,
+      targetDana: true,
+      totalLembar: true,
+      roi: true,
+      active: true,
+      author: true,
+      catatan: true,
+    },
+  });
+
+  const nCount = await prisma.investasi.count({
+    where: {
+      active: true,
+      masterStatusInvestasiId: "4",
+      title: {
+        contains: search,
+        mode: "insensitive",
+      },
+    },
+  });
+
+  const allData = {
+    data: data,
+    nPage: ceil(nCount / takeData),
+  };
+
+  return allData;
+}

src/app_modules/admin/investasi/fun/get/get_all_review.ts

@@ -0,0 +1,60 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { ceil } from "lodash";
+
+export async function adminInvestasi_funGetAllReview({
+  page,
+  search,
+}: {
+  page: number;
+  search?: string;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.investasi.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      createdAt: "desc",
+    },
+    where: {
+      active: true,
+      masterStatusInvestasiId: "2",
+      title: {
+        contains: search,
+        mode: "insensitive",
+      },
+    },
+    select: {
+      id: true,
+      title: true,
+      authorId: true,
+      hargaLembar: true,
+      targetDana: true,
+      totalLembar: true,
+      roi: true,
+      active: true,
+      author: true,
+    },
+  });
+
+  const nCount = await prisma.investasi.count({
+    where: {
+      active: true,
+      masterStatusInvestasiId: "2",
+      title: {
+        contains: search,
+        mode: "insensitive",
+      },
+    },
+  });
+
+  const allData = {
+    data: data,
+    nPage: ceil(nCount / takeData),
+  };
+
+  return allData;
+}

src/app_modules/admin/investasi/index.tsx

@@ -1,7 +1,7 @@
 import Admin_Investasi from "./main/view";
 import Admin_HalamanAksi from "./halaman_aksi/view";
 import Admin_LayoutHalamanAksi from "./halaman_aksi/layout";
-import Admin_KonfirmasiInvestasi from "./konfirmasi/view";
+import AdminInvestasi_DetailReview from "./detail/detail_review";
 import Admin_LayoutKonfirmasiInvestasi from "./konfirmasi/layout";
 import Admin_BuktiTransferInvestasi from "./bukti_transfer/view";
 import Admin_LayoutBuktiTransferInvestasi from "./bukti_transfer/layout";
@@ -10,12 +10,15 @@ import Admin_LayoutStatusTransferInvesatasi from "./status_transfer/layout";
 import Admin_TableReviewInvestasi from "./main/table_review";
 import Admin_TablePublishInvestasi from "./main/table_publish";
 import Admin_TableRejectInvestasi from "./main/table_reject";
+import { AdminInvestasi_DetailPublish } from "./detail/detail_publish";
+import { AdminInvestasi_DetailReject } from "./detail/detail_reject";
+ 
 
 export {
   Admin_Investasi,
   Admin_HalamanAksi,
   Admin_LayoutHalamanAksi,
-  Admin_KonfirmasiInvestasi,
+  AdminInvestasi_DetailReview as Admin_KonfirmasiInvestasi,
   Admin_LayoutKonfirmasiInvestasi,
   Admin_BuktiTransferInvestasi,
   Admin_LayoutBuktiTransferInvestasi,
@@ -24,4 +27,6 @@ export {
   Admin_TablePublishInvestasi,
   Admin_TableReviewInvestasi,
   Admin_TableRejectInvestasi,
+  AdminInvestasi_DetailPublish,
+  AdminInvestasi_DetailReject,
 };

src/app_modules/admin/investasi/konfirmasi/layout.tsx

@@ -11,7 +11,9 @@ export default function Admin_LayoutKonfirmasiInvestasi({
 }) {
   return (
     <>
-      <AppShell header={<ComponentGlobal_HeaderTamplate title="Konfimasi Investasi" />}>
+      <AppShell
+        header={<ComponentGlobal_HeaderTamplate title="Konfimasi Investasi" />}
+      >
         {children}
       </AppShell>
     </>

src/app_modules/admin/investasi/main/table_publish.tsx

@@ -2,116 +2,189 @@
 import { RouterAdminInvestasi_OLD } from "@/app/lib/router_hipmi/router_admin";
 import { MODEL_Investasi } from "@/app_modules/investasi/model/model_investasi";
 import {
-  Badge,
-  ActionIcon,
-  Box,
-  ScrollArea,
-  Table,
-  Tooltip,
-  Stack,
-  Avatar,
-  Group,
-  Text,
+  Button,
   Center,
+  Group,
+  Pagination,
+  Paper,
+  ScrollArea,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+  Title
 } from "@mantine/core";
-import { IconChevronLeft, IconEyeCheck } from "@tabler/icons-react";
-import { IconEdit, IconEye } from "@tabler/icons-react";
+import { IconSearch } from "@tabler/icons-react";
+import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import ComponentAdminGlobal_HeaderTamplate from "../../component_global/header_tamplate";
+import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
+import { adminInvestasi_funGetAllPublish } from "../fun/get/get_all_publish";
+import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
 
 export default function Admin_TablePublishInvestasi({
   dataInvestsi,
 }: {
   dataInvestsi: MODEL_Investasi[];
 }) {
-  const [investasi, setInvestasi] = useState(dataInvestsi);
-  const router = useRouter();
-
-  // console.log(investasi);
-
-  const tableBody = investasi.map((e) =>
-    e.MasterStatusInvestasi.id === "3" ? (
-      <tr key={e.id}>
-        <td>
-          <Group position="left">
-            <Avatar variant="outline" radius={"xl"} />
-            <Text>{e.author.username}</Text>
-          </Group>
-        </td>
-        <td>{e.title}</td>
-        <td>
-          <Center> {e.progress} %</Center>
-        </td>
-        <td>
-          <Center> {new Intl.NumberFormat("id-ID", {maximumFractionDigits: 10}).format(+e.sisaLembar)}</Center>
-        </td>
-        <td>
-        <Center> {new Intl.NumberFormat("id-ID", {maximumFractionDigits: 10}).format(+e.totalLembar)}</Center>
-
-        </td>
-        <td>
-          <Center>
-            <Tooltip label="Detail" withArrow position="bottom">
-              <ActionIcon
-                variant="transparent"
-                onClick={() =>
-                  router.push(RouterAdminInvestasi_OLD.konfirmasi + `${e.id}`)
-                }
-              >
-                <IconEyeCheck color="green" />
-              </ActionIcon>
-            </Tooltip>
-          </Center>
-        </td>
-      </tr>
-    ) : (
-      ""
-    )
-  );
-
   return (
     <>
       <Stack>
-      <ActionIcon variant="outline" onClick={() => router.push(RouterAdminInvestasi_OLD.main_investasi)}>
-
-          <IconChevronLeft />
-        </ActionIcon>
-        <Box>
-          <ScrollArea w={"100%"}>
-            {/* <Title order={5} mb={5}>
-              List Publish
-            </Title> */}
-            <Badge color="green" variant="light" radius={0} size={"xl"}>
-              Publish
-            </Badge>
-            <Table
-              withBorder
-              highlightOnHover
-              verticalSpacing={"md"}
-              horizontalSpacing={"md"}
-            >
-              <thead>
-                <tr>
-                  <th>Username</th>
-                  <th>Nama Proyek Investasi</th>
-                  <th>
-                    <Center>Progres</Center>
-                  </th>
-                  <th>
-                    <Center>Sisa Saham</Center>
-                  </th>
-                  <th>
-                    <Center>Total Saham</Center>
-                  </th>
-                  <th>
-                    <Center>Aksi</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>{tableBody}</tbody>
-            </Table>
-          </ScrollArea>
-        </Box>
+        <ComponentAdminGlobal_HeaderTamplate name="Investasi" />
+        <TableView listData={dataInvestsi} />
+        {/* <pre>{JSON.stringify(listPublish, null, 2)}</pre> */}
+      </Stack>
+    </>
+  );
+}
+
+function TableView({ listData }: { listData: any }) {
+  const router = useRouter();
+  const [data, setData] = useState<MODEL_Investasi[]>(listData.data);
+  const [nPage, setNPage] = useState(listData.nPage);
+  const [activePage, setActivePage] = useState(1);
+  const [isSearch, setSearch] = useState("");
+
+  async function onSearch(s: string) {
+    setSearch(s);
+    setActivePage(1);
+    const loadData = await adminInvestasi_funGetAllPublish({
+      page: 1,
+      search: s,
+    });
+    setData(loadData.data as any);
+    setNPage(loadData.nPage);
+  }
+
+  async function onPageClick(p: any) {
+    setActivePage(p);
+    const loadData = await adminInvestasi_funGetAllPublish({
+      search: isSearch,
+      page: p,
+    });
+    setData(loadData.data as any);
+    setNPage(loadData.nPage);
+  }
+
+  const tableBody = data.map((e) => (
+    <tr key={e.id}>
+      <td>
+        <Center w={200}>
+          <Text lineClamp={1}>{e.author.username}</Text>
+        </Center>
+      </td>
+      <td>
+        <Center w={400}>
+          <Text lineClamp={1}>{e.title}</Text>
+        </Center>
+      </td>
+      <td>
+        <Center w={200}>{_.toNumber(e.progress).toFixed(2)} %</Center>
+      </td>
+      <td>
+        <Center w={200}>
+          {new Intl.NumberFormat("id-ID", {
+            maximumFractionDigits: 10,
+          }).format(+e.sisaLembar)}
+        </Center>
+      </td>
+      <td>
+        <Center w={200}>
+          {new Intl.NumberFormat("id-ID", {
+            maximumFractionDigits: 10,
+          }).format(+e.totalLembar)}
+        </Center>
+      </td>
+      <td>
+        <Center w={200}>
+          <Button
+            bg={"green"}
+            color="green"
+            radius={"xl"}
+            onClick={() =>
+              router.push(RouterAdminInvestasi.detail_publish +`${e.id}`)
+            }
+          >
+            Detail
+          </Button>
+        </Center>
+      </td>
+    </tr>
+  ));
+
+  return (
+    <>
+      <Stack spacing={"xs"} h={"100%"}>
+        <Group
+          position="apart"
+          bg={"green.4"}
+          p={"xs"}
+          style={{ borderRadius: "6px" }}
+        >
+          <Title order={4} c={"black"}>
+            Publish
+          </Title>
+          <TextInput
+            icon={<IconSearch size={20} />}
+            radius={"xl"}
+            placeholder="Cari nama proyek"
+            onChange={(val) => {
+              onSearch(val.currentTarget.value);
+            }}
+          />
+        </Group>
+
+        {_.isEmpty(data) ? (
+          <ComponentAdminGlobal_IsEmptyData />
+        ) : (
+          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+            <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
+              <Table
+                verticalSpacing={"md"}
+                horizontalSpacing={"md"}
+                p={"md"}
+                w={"100%"}
+                h={"100%"}
+                striped
+                highlightOnHover
+              >
+                <thead>
+                  <tr>
+                    <th>
+                      <Center w={200}>Username</Center>
+                    </th>
+                    <th>
+                      <Center w={400}>Nama Proyek</Center>
+                    </th>
+                    <th>
+                      <Center w={200}>Progres</Center>
+                    </th>
+                    <th>
+                      <Center w={200}>Sisa Saham</Center>
+                    </th>
+                    <th>
+                      <Center w={200}>Total Saham</Center>
+                    </th>
+                    <th>
+                      <Center w={200}>Aksi</Center>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>{tableBody}</tbody>
+              </Table>
+            </ScrollArea>
+            <Center mt={"xl"}>
+              <Pagination
+                value={activePage}
+                total={nPage}
+                onChange={(val) => {
+                  onPageClick(val);
+                }}
+              />
+            </Center>
+          </Paper>
+        )}
       </Stack>
     </>
   );

src/app_modules/admin/investasi/main/table_reject.tsx

@@ -13,11 +13,21 @@ import {
   Avatar,
   Group,
   Text,
+  Button,
+  Pagination,
+  Paper,
+  TextInput,
+  Title,
 } from "@mantine/core";
-import { IconChevronLeft, IconEdit } from "@tabler/icons-react";
+import { IconChevronLeft, IconEdit, IconSearch } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import ComponentAdminGlobal_HeaderTamplate from "../../component_global/header_tamplate";
+import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
+import { adminInvestasi_funGetAllReview } from "../fun/get/get_all_review";
+import { adminInvestasi_funGetAllReject } from "../fun/get/get_all_reject";
+import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
 
 export default function Admin_TableRejectInvestasi({
   dataInvestsi,
@@ -27,6 +37,15 @@ export default function Admin_TableRejectInvestasi({
   const [investasi, setInvestasi] = useState(dataInvestsi);
   const router = useRouter();
 
+  return (
+    <>
+      <Stack>
+        <ComponentAdminGlobal_HeaderTamplate name="Investasi" />
+        <TableView listData={dataInvestsi} />
+      </Stack>
+    </>
+  );
+
   const tableBody = investasi.map((e) =>
     e.MasterStatusInvestasi.id === "4" ? (
       <tr key={e.id}>
@@ -61,8 +80,10 @@ export default function Admin_TableRejectInvestasi({
   return (
     <>
       <Stack>
-      <ActionIcon variant="outline" onClick={() => router.push(RouterAdminInvestasi_OLD.main_investasi)}>
-
+        <ActionIcon
+          variant="outline"
+          onClick={() => router.push(RouterAdminInvestasi_OLD.main_investasi)}
+        >
           <IconChevronLeft />
         </ActionIcon>
         <Box>
@@ -94,3 +115,136 @@ export default function Admin_TableRejectInvestasi({
     </>
   );
 }
+
+function TableView({ listData }: { listData: any }) {
+  const router = useRouter();
+  const [data, setData] = useState<MODEL_Investasi[]>(listData.data);
+  const [nPage, setNPage] = useState(listData.nPage);
+  const [activePage, setActivePage] = useState(1);
+  const [isSearch, setSearch] = useState("");
+
+  async function onSearch(s: string) {
+    setSearch(s);
+    setActivePage(1);
+    const loadData = await adminInvestasi_funGetAllReject({
+      page: 1,
+      search: s,
+    });
+    setData(loadData.data as any);
+    setNPage(loadData.nPage);
+  }
+
+  async function onPageClick(p: any) {
+    setActivePage(p);
+    const loadData = await adminInvestasi_funGetAllReject({
+      search: isSearch,
+      page: p,
+    });
+    setData(loadData.data as any);
+    setNPage(loadData.nPage);
+  }
+
+  const tableBody = data.map((e) => (
+    <tr key={e.id}>
+      <td>
+        <Center w={200}>
+          <Text lineClamp={1}>{e.author.username}</Text>
+        </Center>
+      </td>
+      <td>
+        <Center w={400}>
+          <Text lineClamp={1}>{e.title}</Text>
+        </Center>
+      </td>
+      <td>
+        <Center w={400}>
+          <Text lineClamp={1}>{e.catatan}</Text>
+        </Center>
+      </td>
+
+      <td>
+        <Center w={200}>
+          <Button
+            color="orange"
+            radius={"xl"}
+            onClick={() =>
+              router.push(RouterAdminInvestasi.detail_reject + `${e.id}`)
+            }
+          >
+            Detail
+          </Button>
+        </Center>
+      </td>
+    </tr>
+  ));
+
+  return (
+    <>
+      <Stack spacing={"xs"} h={"100%"}>
+        <Group
+          position="apart"
+          bg={"red.4"}
+          p={"xs"}
+          style={{ borderRadius: "6px" }}
+        >
+          <Title order={4} c={"black"}>
+            Reject
+          </Title>
+          <TextInput
+            icon={<IconSearch size={20} />}
+            radius={"xl"}
+            placeholder="Cari nama proyek"
+            onChange={(val) => {
+              onSearch(val.currentTarget.value);
+            }}
+          />
+        </Group>
+
+        {_.isEmpty(data) ? (
+          <ComponentAdminGlobal_IsEmptyData />
+        ) : (
+          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+            <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
+              <Table
+                verticalSpacing={"md"}
+                horizontalSpacing={"md"}
+                p={"md"}
+                w={"100%"}
+                h={"100%"}
+                striped
+                highlightOnHover
+              >
+                <thead>
+                  <tr>
+                    <th>
+                      <Center w={200}>Username</Center>
+                    </th>
+                    <th>
+                      <Center w={400}>Nama Proyek</Center>
+                    </th>
+                    <th>
+                      <Center w={400}>Catatan Penolakan</Center>
+                    </th>
+                    <th>
+                      <Center w={200}>Aksi</Center>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>{tableBody}</tbody>
+              </Table>
+            </ScrollArea>
+            <Center mt={"xl"}>
+              <Pagination
+                value={activePage}
+                total={nPage}
+                onChange={(val) => {
+                  onPageClick(val);
+                }}
+              />
+            </Center>
+          </Paper>
+        )}
+      </Stack>
+    </>
+  );
+}

src/app_modules/admin/investasi/main/table_review.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
 import { RouterAdminInvestasi_OLD } from "@/app/lib/router_hipmi/router_admin";
 import { MODEL_Investasi } from "@/app_modules/investasi/model/model_investasi";
 import {
@@ -13,85 +14,184 @@ import {
   Avatar,
   Text,
   Center,
+  Button,
+  Pagination,
+  Paper,
+  TextInput,
+  Title,
 } from "@mantine/core";
-import { IconChevronLeft, IconEdit } from "@tabler/icons-react";
+import { IconChevronLeft, IconEdit, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import ComponentAdminGlobal_HeaderTamplate from "../../component_global/header_tamplate";
+import { adminInvestasi_funGetAllReview } from "../fun/get/get_all_review";
+import _ from "lodash";
+import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
+import ComponentAdminGlobal_TampilanRupiahDonasi from "../../component_global/tampilan_rupiah";
 
 export default function Admin_TableReviewInvestasi({
   dataInvestsi,
 }: {
   dataInvestsi: MODEL_Investasi[];
 }) {
-  const [investasi, setInvestasi] = useState(dataInvestsi);
-  const router = useRouter();
-
-  const tableBody = investasi.map((e) =>
-    e.MasterStatusInvestasi.id === "2" ? (
-      <tr key={e.id}>
-        <td>
-          <Group position="left">
-            <Avatar variant="outline" radius={"xl"} />
-            <Text>{e.author.username}</Text>
-          </Group>
-        </td>
-        <td>
-          {e.title}
-        </td>
-        <td>
-          <Center>
-            {e.ProspektusInvestasi === null ? (
-              <Badge color="red">Unavailable</Badge>
-            ) : (
-              <Badge variant="dot" color="green">
-                Available
-              </Badge>
-            )}
-          </Center>
-        </td>
-        <td>
-          <Center>
-          <Tooltip label="Konfirmasi" withArrow position="bottom">
-            <ActionIcon
-              variant="transparent"
-              onClick={() =>
-                router.push(RouterAdminInvestasi_OLD.konfirmasi + `${e.id}`)
-              }
-            >
-              <IconEdit color="green" />
-            </ActionIcon>
-          </Tooltip>
-          </Center>
-        </td>
-      </tr>
-    ) : (
-      ""
-    )
-  );
   return (
     <>
       <Stack>
-        <ActionIcon variant="outline" onClick={() => router.push(RouterAdminInvestasi_OLD.main_investasi)}>
-          <IconChevronLeft />
-        </ActionIcon>
-        <Box>
-          <ScrollArea w={"100%"}>
-            <Badge color="orange" variant="light" radius={0} size={"xl"}>
-              Review
-            </Badge>
-            <Table withBorder highlightOnHover verticalSpacing={"md"} horizontalSpacing={"md"}>
-              <thead>
-                <tr>
-                  <th>Username</th>
-                  <th>Nama Proyek Investasi</th>
-                  <th><Center>File Prospektus</Center></th>
-                  <th><Center>Aksi</Center></th>
-                </tr>
-              </thead>
-              <tbody>{tableBody}</tbody>
-            </Table>
-          </ScrollArea>
-        </Box>
+        <ComponentAdminGlobal_HeaderTamplate name="Investasi" />
+        <TableView listData={dataInvestsi} />
+      </Stack>
+    </>
+  );
+}
+
+function TableView({ listData }: { listData: any }) {
+  const router = useRouter();
+  const [data, setData] = useState<MODEL_Investasi[]>(listData.data);
+  const [nPage, setNPage] = useState(listData.nPage);
+  const [activePage, setActivePage] = useState(1);
+  const [isSearch, setSearch] = useState("");
+
+  async function onSearch(s: string) {
+    setSearch(s);
+    setActivePage(1);
+    const loadData = await adminInvestasi_funGetAllReview({
+      page: 1,
+      search: s,
+    });
+    setData(loadData.data as any);
+    setNPage(loadData.nPage);
+  }
+
+  async function onPageClick(p: any) {
+    setActivePage(p);
+    const loadData = await adminInvestasi_funGetAllReview({
+      search: isSearch,
+      page: p,
+    });
+    setData(loadData.data as any);
+    setNPage(loadData.nPage);
+  }
+
+  const tableBody = data.map((e) => (
+    <tr key={e.id}>
+      <td>
+        <Center w={200}>
+          <Text lineClamp={1}>{e.author.username}</Text>
+        </Center>
+      </td>
+      <td>
+        <Center w={400}>
+          <Text lineClamp={1}>{e.title}</Text>
+        </Center>
+      </td>
+      <td>
+        <Center w={200}>
+          <Text lineClamp={1}>{e.roi} %</Text>
+        </Center>
+      </td>
+      <td>
+        <Center w={200}>
+          <ComponentAdminGlobal_TampilanRupiahDonasi
+            nominal={_.toNumber(e.targetDana)}
+          />
+        </Center>
+      </td>
+      <td>
+        <Center w={200}>
+          <ComponentAdminGlobal_TampilanRupiahDonasi
+            nominal={_.toNumber(e.hargaLembar)}
+          />
+        </Center>
+      </td>
+      <td>
+        <Center w={200}>
+          <Button
+            color="orange"
+            radius={"xl"}
+            onClick={() =>
+              router.push(RouterAdminInvestasi_OLD.konfirmasi + `${e.id}`)
+            }
+          >
+            Detail
+          </Button>
+        </Center>
+      </td>
+    </tr>
+  ));
+
+  return (
+    <>
+      <Stack spacing={"xs"} h={"100%"}>
+        <Group
+          position="apart"
+          bg={"orange.4"}
+          p={"xs"}
+          style={{ borderRadius: "6px" }}
+        >
+          <Title order={4} c={"black"}>
+            Review
+          </Title>
+          <TextInput
+            icon={<IconSearch size={20} />}
+            radius={"xl"}
+            placeholder="Cari nama proyek"
+            onChange={(val) => {
+              onSearch(val.currentTarget.value);
+            }}
+          />
+        </Group>
+
+        {_.isEmpty(data) ? (
+          <ComponentAdminGlobal_IsEmptyData />
+        ) : (
+          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+            <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
+              <Table
+                verticalSpacing={"md"}
+                horizontalSpacing={"md"}
+                p={"md"}
+                w={"100%"}
+                h={"100%"}
+                striped
+                highlightOnHover
+              >
+                <thead>
+                  <tr>
+                    <th>
+                      <Center w={200}>Username</Center>
+                    </th>
+                    <th>
+                      <Center w={400}>Nama Proyek</Center>
+                    </th>
+                    <th>
+                      <Center w={200}>ROI</Center>
+                    </th>
+                    <th>
+                      <Center w={200}>Target Dana</Center>
+                    </th>
+                    <th>
+                      <Center w={200}>Harga Perlembar</Center>
+                    </th>
+
+                    <th>
+                      <Center w={200}>Aksi</Center>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>{tableBody}</tbody>
+              </Table>
+            </ScrollArea>
+            <Center mt={"xl"}>
+              <Pagination
+                value={activePage}
+                total={nPage}
+                onChange={(val) => {
+                  onPageClick(val);
+                }}
+              />
+            </Center>
+          </Paper>
+        )}
       </Stack>
     </>
   );

src/app_modules/admin/investasi/main/view.tsx

@@ -61,12 +61,13 @@ export default function Admin_Investasi({
   const router = useRouter();
 
   const listBox = [
+
     {
       id: 1,
-      name: "Draft",
-      jumlah: countDraft,
-      link: "",
-      color: "yellow",
+      name: "Publish",
+      jumlah: countPublish,
+      link: RouterAdminInvestasi_OLD.table_status_publish,
+      color: "green",
     },
     {
       id: 2,
@@ -77,13 +78,6 @@ export default function Admin_Investasi({
     },
     {
       id: 3,
-      name: "Publish",
-      jumlah: countPublish,
-      link: RouterAdminInvestasi_OLD.table_status_publish,
-      color: "green",
-    },
-    {
-      id: 4,
       name: "Reject",
       jumlah: countReject,
       link: RouterAdminInvestasi_OLD.table_status_reject,
@@ -97,7 +91,7 @@ export default function Admin_Investasi({
         <ComponentAdminGlobal_HeaderTamplate name="Investasi" />
 
         <SimpleGrid
-          cols={4}
+          cols={3}
           spacing="lg"
           breakpoints={[
             { maxWidth: "62rem", cols: 4, spacing: "lg" },

src/app_modules/admin/layout.tsx

@@ -54,6 +54,7 @@ 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";
+import { ComponentAdmin_UIDrawerNotifikasi } from "./notifikasi/ui_drawer_notifikasi";
 
 export default function AdminLayout({
   children,
@@ -326,7 +327,7 @@ export default function AdminLayout({
         position="right"
         size={"xs"}
       >
-        <DrawerNotifikasi
+        <ComponentAdmin_UIDrawerNotifikasi
           data={dataNotif}
           onLoadReadNotif={(val: any) => {
             setDataNotif(val);
@@ -345,194 +346,4 @@ export default function AdminLayout({
   );
 }
 
-function DrawerNotifikasi({
-  data,
-  onLoadReadNotif,
-  onChangeNavbar,
-  onToggleNavbar,
-  onLoadCountNotif,
-}: {
-  data: MODEL_NOTIFIKASI[];
-  onLoadReadNotif: (val: any) => void;
-  onChangeNavbar: (val: any) => void;
-  onToggleNavbar: (val: any) => void;
-  onLoadCountNotif: (val: any) => void;
-}) {
-  const router = useRouter();
 
-  if (_.isEmpty(data)) {
-    return (
-      <>
-        <Center>
-          <Text c={"gray"} fz={"xs"}>
-            Tidak ada notifikasi
-          </Text>
-        </Center>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <Paper h={"100%"}>
-        <Stack>
-          {data.map((e, i) => (
-            <Card
-              style={{
-                transition: "0.5s",
-              }}
-              key={e?.id}
-              // withBorder
-              bg={e?.isRead ? "gray.1" : "gray.4"}
-              sx={{
-                borderColor: "gray",
-                borderStyle: "solid",
-                borderWidth: "0.5px",
-                ":hover": {
-                  backgroundColor: "#C1C2C5",
-                },
-              }}
-              onClick={async () => {
-                // JOB
-                e?.kategoriApp === "JOB" &&
-                  adminNotifikasi_findRouterJob({
-                    data: e,
-                    router: router,
-                    onChangeNavbar: (val: any) => {
-                      onChangeNavbar(val);
-                    },
-                    onToggleNavbar: onToggleNavbar,
-                  });
-
-                // FORUM
-                e?.kategoriApp === "FORUM" &&
-                  adminNotifikasi_findRouterForum({
-                    data: e,
-                    router: router,
-                    onChangeNavbar(val) {
-                      onChangeNavbar(val);
-                    },
-                    onToggleNavbar(val) {
-                      onToggleNavbar(val);
-                    },
-                  });
-
-                // VOTE
-                e?.kategoriApp === "VOTING" &&
-                  adminNotifikasi_findRouterVoting({
-                    data: e,
-                    router: router,
-                    onChangeNavbar(val) {
-                      onChangeNavbar(val);
-                    },
-                    onToggleNavbar(val) {
-                      onToggleNavbar(val);
-                    },
-                  });
-
-                e?.kategoriApp === "EVENT" &&
-                  adminNotifikasi_findRouterEvent({
-                    data: e,
-                    router: router,
-                    onChangeNavbar(val) {
-                      onChangeNavbar(val);
-                    },
-                    onToggleNavbar(val) {
-                      onToggleNavbar(val);
-                    },
-                  });
-
-                  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,
-                });
-
-                if (updateIsRead) {
-                  const loadCountNotif =
-                    await adminNotifikasi_countNotifikasi();
-                  onLoadCountNotif(loadCountNotif);
-
-                  const loadDataNotif = await adminNotifikasi_getByUserId();
-                  onLoadReadNotif(loadDataNotif);
-                } else {
-                  return null;
-                }
-
-                // callBackIsNotifikasi(false);
-              }}
-            >
-              <Card.Section p={"sm"}>
-                <Stack spacing={"xs"}>
-                  <Group position="apart">
-                    <Text fw={"bold"} fz={10}>
-                      # {e?.kategoriApp}
-                    </Text>
-                    {e?.status ? (
-                      <Badge fz={10} size="sm">
-                        {e?.status}
-                      </Badge>
-                    ) : (
-                      ""
-                    )}
-                  </Group>
-                  <Divider color="gray.3" />
-                </Stack>
-              </Card.Section>
-              <Card.Section px={"sm"} pb={"sm"}>
-                <Stack spacing={0}>
-                  <Text lineClamp={2} fw={"bold"} fz={"xs"}>
-                    {e?.title}
-                  </Text>
-                  <Text lineClamp={2} fz={"xs"}>
-                    {e?.pesan}
-                  </Text>
-                </Stack>
-              </Card.Section>
-              <Card.Section p={"sm"}>
-                <Group position="apart">
-                  <Text fz={10} color="gray">
-                    {new Intl.DateTimeFormat("id-ID", {
-                      dateStyle: "long",
-                    }).format(e?.createdAt)}
-
-                    <Text span inherit fz={10} color="gray">
-                      {", "}
-                      {new Intl.DateTimeFormat("id-ID", {
-                        timeStyle: "short",
-                      }).format(e?.createdAt)}
-                    </Text>
-                  </Text>
-                  {e?.isRead ? (
-                    <Group spacing={5}>
-                      <IconChecks color="gray" size={10} />
-                      <Text fz={10} color="gray">
-                        Sudah dilihat
-                      </Text>
-                    </Group>
-                  ) : (
-                    <Group spacing={5}>
-                      <IconCheck color="gray" size={10} />
-                      <Text fz={10} color="gray">
-                        Belum dilihat
-                      </Text>
-                    </Group>
-                  )}
-                </Group>
-              </Card.Section>
-            </Card>
-          ))}
-        </Stack>
-      </Paper>
-    </>
-  );
-}

src/app_modules/admin/notifikasi/index.ts

@@ -1,2 +0,0 @@
-// test notif
-

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

@@ -0,0 +1,43 @@
+import { RouterAdminDonasi } from "@/app/lib/router_admin/router_admin_donasi";
+import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
+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_findRouterInvestasi({
+  data,
+  router,
+  onChangeNavbar,
+  onToggleNavbar,
+}: {
+  data: MODEL_NOTIFIKASI;
+  router: AppRouterInstance;
+  onChangeNavbar: (val: any) => void;
+  onToggleNavbar: (val: any) => void;
+}) {
+  if (data.status === "Review") {
+    const path = RouterAdminInvestasi.table_review;
+    router.push(path);
+    onChangeNavbar({
+      id: 2,
+      childId: 23,
+    });
+  }
+
+  //   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,
+  //     });
+  //   }
+
+  onToggleNavbar(true);
+}

src/app_modules/admin/notifikasi/ui_drawer_notifikasi.tsx

@@ -0,0 +1,231 @@
+import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
+import {
+  Center,
+  Paper,
+  Stack,
+  Card,
+  Group,
+  Badge,
+  Divider,
+  Text,
+} from "@mantine/core";
+import { IconChecks, IconCheck } from "@tabler/icons-react";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import adminNotifikasi_countNotifikasi from "./fun/count/count_is_read";
+import adminNotifikasi_getByUserId from "./fun/get/get_notifikasi_by_user_id";
+import adminNotifikasi_funUpdateIsReadById from "./fun/update/fun_update_is_read_by_id";
+import adminNotifikasi_findRouterDonasi from "./route_setting/donasi";
+import { adminNotifikasi_findRouterEvent } from "./route_setting/event";
+import adminNotifikasi_findRouterForum from "./route_setting/forum";
+import adminNotifikasi_findRouterJob from "./route_setting/job";
+import { adminNotifikasi_findRouterVoting } from "./route_setting/voting";
+import adminNotifikasi_findRouterInvestasi from "./route_setting/investasi";
+
+export function ComponentAdmin_UIDrawerNotifikasi({
+  data,
+  onLoadReadNotif,
+  onChangeNavbar,
+  onToggleNavbar,
+  onLoadCountNotif,
+}: {
+  data: MODEL_NOTIFIKASI[];
+  onLoadReadNotif: (val: any) => void;
+  onChangeNavbar: (val: any) => void;
+  onToggleNavbar: (val: any) => void;
+  onLoadCountNotif: (val: any) => void;
+}) {
+  const router = useRouter();
+
+  if (_.isEmpty(data)) {
+    return (
+      <>
+        <Center>
+          <Text c={"gray"} fz={"xs"}>
+            Tidak ada notifikasi
+          </Text>
+        </Center>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Paper h={"100%"}>
+        <Stack>
+          {data.map((e, i) => (
+            <Card
+              style={{
+                transition: "0.5s",
+              }}
+              key={e?.id}
+              // withBorder
+              bg={e?.isRead ? "gray.1" : "gray.4"}
+              sx={{
+                borderColor: "gray",
+                borderStyle: "solid",
+                borderWidth: "0.5px",
+                ":hover": {
+                  backgroundColor: "#C1C2C5",
+                },
+              }}
+              onClick={async () => {
+                // JOB
+                e?.kategoriApp === "JOB" &&
+                  adminNotifikasi_findRouterJob({
+                    data: e,
+                    router: router,
+                    onChangeNavbar: (val: any) => {
+                      onChangeNavbar(val);
+                    },
+                    onToggleNavbar: onToggleNavbar,
+                  });
+
+                // FORUM
+                e?.kategoriApp === "FORUM" &&
+                  adminNotifikasi_findRouterForum({
+                    data: e,
+                    router: router,
+                    onChangeNavbar(val) {
+                      onChangeNavbar(val);
+                    },
+                    onToggleNavbar(val) {
+                      onToggleNavbar(val);
+                    },
+                  });
+
+                // VOTE
+                e?.kategoriApp === "VOTING" &&
+                  adminNotifikasi_findRouterVoting({
+                    data: e,
+                    router: router,
+                    onChangeNavbar(val) {
+                      onChangeNavbar(val);
+                    },
+                    onToggleNavbar(val) {
+                      onToggleNavbar(val);
+                    },
+                  });
+
+                //   EVENT
+                e?.kategoriApp === "EVENT" &&
+                  adminNotifikasi_findRouterEvent({
+                    data: e,
+                    router: router,
+                    onChangeNavbar(val) {
+                      onChangeNavbar(val);
+                    },
+                    onToggleNavbar(val) {
+                      onToggleNavbar(val);
+                    },
+                  });
+
+                // DONASI
+                e.kategoriApp === "DONASI" &&
+                  adminNotifikasi_findRouterDonasi({
+                    data: e,
+                    router: router,
+                    onChangeNavbar(val) {
+                      onChangeNavbar(val);
+                    },
+                    onToggleNavbar(val) {
+                      onToggleNavbar(val);
+                    },
+                  });
+
+                // INVESTASI
+                e.kategoriApp === "INVESTASI" &&
+                  adminNotifikasi_findRouterInvestasi({
+                    data: e,
+                    router: router,
+                    onChangeNavbar(val) {
+                      onChangeNavbar(val);
+                    },
+                    onToggleNavbar(val) {
+                      onToggleNavbar(val);
+                    },
+                  });
+
+                const updateIsRead = await adminNotifikasi_funUpdateIsReadById({
+                  notifId: e?.id,
+                });
+
+                if (updateIsRead) {
+                  const loadCountNotif =
+                    await adminNotifikasi_countNotifikasi();
+                  onLoadCountNotif(loadCountNotif);
+
+                  const loadDataNotif = await adminNotifikasi_getByUserId();
+                  onLoadReadNotif(loadDataNotif);
+                } else {
+                  return null;
+                }
+
+                // callBackIsNotifikasi(false);
+              }}
+            >
+              <Card.Section p={"sm"}>
+                <Stack spacing={"xs"}>
+                  <Group position="apart">
+                    <Text fw={"bold"} fz={10}>
+                      # {e?.kategoriApp}
+                    </Text>
+                    {e?.status ? (
+                      <Badge fz={10} size="sm">
+                        {e?.status}
+                      </Badge>
+                    ) : (
+                      ""
+                    )}
+                  </Group>
+                  <Divider color="gray.3" />
+                </Stack>
+              </Card.Section>
+              <Card.Section px={"sm"} pb={"sm"}>
+                <Stack spacing={0}>
+                  <Text lineClamp={2} fw={"bold"} fz={"xs"}>
+                    {e?.title}
+                  </Text>
+                  <Text lineClamp={2} fz={"xs"}>
+                    {e?.pesan}
+                  </Text>
+                </Stack>
+              </Card.Section>
+              <Card.Section p={"sm"}>
+                <Group position="apart">
+                  <Text fz={10} color="gray">
+                    {new Intl.DateTimeFormat("id-ID", {
+                      dateStyle: "long",
+                    }).format(e?.createdAt)}
+
+                    <Text span inherit fz={10} color="gray">
+                      {", "}
+                      {new Intl.DateTimeFormat("id-ID", {
+                        timeStyle: "short",
+                      }).format(e?.createdAt)}
+                    </Text>
+                  </Text>
+                  {e?.isRead ? (
+                    <Group spacing={5}>
+                      <IconChecks color="gray" size={10} />
+                      <Text fz={10} color="gray">
+                        Sudah dilihat
+                      </Text>
+                    </Group>
+                  ) : (
+                    <Group spacing={5}>
+                      <IconCheck color="gray" size={10} />
+                      <Text fz={10} color="gray">
+                        Belum dilihat
+                      </Text>
+                    </Group>
+                  )}
+                </Group>
+              </Card.Section>
+            </Card>
+          ))}
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/auth/fun/fun_login.ts

@@ -9,7 +9,7 @@ export async function auth_funLogin(nomor: string) {
 
   try {
     const res = await fetch(
-      `https://wa.wibudev.com/code?nom=${nomor}&text=Masukan Kode OTP:${codeOtp}`
+      `https://wa.wibudev.com/code?nom=${nomor}&text=HIPMI - Masukan kode OTP sesuai dengan nomor yang anda daftarkan, kode ini bersifat rahasia & jangan di bagikan pada siapapun termasuk anggota ataupun pengurus HIPMI lainnya. Kode OTP anda: ${codeOtp}`
     );
 
     const sendWa = await res.json();

src/app_modules/auth/splash/view.tsx

@@ -2,7 +2,14 @@
 
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import UIGlobal_SplashScreen from "@/app_modules/_global/ui/ui_splash";
-import { BackgroundImage, Center, Image, Paper, Stack } from "@mantine/core";
+import {
+  Avatar,
+  BackgroundImage,
+  Center,
+  Image,
+  Paper,
+  Stack,
+} from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 
@@ -31,14 +38,9 @@ export default function SplashScreen({ data }: { data: any }) {
         <Center h={"100vh"}>
           <Stack align="center" justify="center" p={"md"}>
             {/* <Title c={"#002e59"}>Welcome to</Title> */}
-            <Paper
-              p={{ base: 20, md: 30, lg: 40 }}
-              bg={"gray.1"}
-              radius={"100%"}
-              shadow="xl"
-            >
-              <Image height={200} alt="" src={"/aset/logo/logo-hipmi.png"} />
-            </Paper>
+            <Avatar size={300} radius={"100%"} >
+              <Image  height={250} width={250} alt="Logo" src={"/aset/logo/logo-hipmi.png"} />
+            </Avatar>
           </Stack>
         </Center>
       </BackgroundImage>

src/app_modules/crowd/main/view.tsx

@@ -8,17 +8,8 @@ import {
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { gs_donasi_hot_menu } from "@/app_modules/donasi/global_state";
-import { gs_investasiFooter } from "@/app_modules/investasi/g_state";
-import {
-  AspectRatio,
-  Grid,
-  Image,
-  Loader,
-  Paper,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
+import { gs_investas_menu } from "@/app_modules/investasi/g_state";
+import { Grid, Image, Paper, Stack, Text, Title } from "@mantine/core";
 import { IconChevronRight } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
@@ -26,7 +17,7 @@ import { useState } from "react";
 
 export default function MainCrowd() {
   const router = useRouter();
-  const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
+  const [changeColor, setChangeColor] = useAtom(gs_investas_menu);
   const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu);
   const [loadingInv, setLoadingInv] = useState(false);
   const [loadingDon, setLoadingDon] = useState(false);
@@ -60,17 +51,17 @@ export default function MainCrowd() {
               border: `2px solid ${AccentColor.blue}`,
               borderRadius: "10px",
               backgroundColor: MainColor.darkblue,
-              // color: "white",
-              color: "gray",
+              color: "white",
+              // color: "gray",
             }}
             onClick={() => {
-              // setLoadingInv(true);
-              // router.push(RouterCrowd.investasi);
-              // setChangeColor(0);
-              ComponentGlobal_NotifikasiPeringatan(
-                "Sedang Perbaikan",
-                3000
-              );
+              setLoadingInv(true);
+              router.push(RouterCrowd.investasi);
+              setChangeColor(0);
+              // ComponentGlobal_NotifikasiPeringatan(
+              //   "Sedang Perbaikan",
+              //   3000
+              // );
             }}
           >
             <Grid>

src/app_modules/donasi/component/card_view/box_informasi_pencarian_dana.tsx

@@ -0,0 +1,57 @@
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { Box, Center } from "@mantine/core";
+import _ from "lodash";
+
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ScrollOnly } from "next-scroll-loader";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { donasi_funGetListPencairanDanaById } from "../../fun/get/get_list_pencairan_dana_by_id";
+import { MODEL_DONASI_PENCAIRAN_DANA } from "../../model/interface";
+import { ComponentDonasi_CardDonatur } from "./ui_card_donatur";
+import { ComponentDonasi_CardPencairanDana } from "./card_pencairan_dana";
+
+export function ComponentDonasi_InformasiPencairanDana({
+  donasiId,
+  listPD,
+}: {
+  donasiId: string;
+  listPD: MODEL_DONASI_PENCAIRAN_DANA[];
+}) {
+  const router = useRouter();
+  const [data, setData] = useState(listPD);
+  const [activePage, setActivePage] = useState(1);
+
+  return (
+    <>
+      {_.isEmpty(listPD) ? (
+        <ComponentGlobal_IsEmptyData height={20} />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="62vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetListPencairanDanaById({
+                page: activePage + 1,
+                donasiId: donasiId,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => <ComponentDonasi_CardPencairanDana data={item} />}
+          </ScrollOnly>
+        </Box>
+      )}
+    </>
+  );
+}

src/app_modules/donasi/component/card_view/box_pencairan_dana.tsx

@@ -0,0 +1,44 @@
+import { MainColor, AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import { Paper, Stack, Grid, Title, Text } from "@mantine/core";
+import { MODEL_DONASI } from "../../model/interface";
+import TampilanRupiahDonasi from "../tampilan_rupiah";
+
+export function ComponentDonasi_BoxPencariranDana({ akumulasi }: { akumulasi: MODEL_DONASI }) {
+  return (
+    <>
+      <Paper
+        style={{
+          backgroundColor: MainColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          padding: "15px",
+          cursor: "pointer",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "10px",
+        }}
+      >
+        <Stack>
+          <Grid>
+            <Grid.Col span={6}>
+              <Title order={5}>
+                <TampilanRupiahDonasi nominal={akumulasi.totalPencairan} />
+              </Title>
+              <Text fz={"xs"}>Dana sudah dicairkan</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Title order={5}>{akumulasi.akumulasiPencairan} kali</Title>
+              <Text fz={"xs"}>Pencairan dana</Text>
+            </Grid.Col>
+          </Grid>
+          <ComponentGlobal_BoxInformation
+            informasi=" Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan
+            pihak manapun, jika berita pencairan dana dibawah tidak sesuai
+            dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain
+            dapat melaporkannya pada Admin HIPMI !"
+          />
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/donasi/component/card_view/card_invoice.tsx

@@ -0,0 +1,113 @@
+import {
+  AspectRatio,
+  Badge,
+  Card,
+  Grid,
+  Group,
+  Image,
+  Paper,
+  Progress,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { MODEL_DONASI_INVOICE } from "../../model/interface";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
+import TampilanRupiahDonasi from "../tampilan_rupiah";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+
+export function ComponentDonasi_CardInvoice({
+  data,
+}: {
+  data: MODEL_DONASI_INVOICE;
+}) {
+  const router = useRouter();
+  const [donasiId, setEventId] = useState("");
+  const [visible, setVisible] = useState(false);
+
+  async function onCekInvoice() {
+    if (data.donasiMaster_StatusInvoiceId === "1") {
+      return router.push(RouterDonasi.detail_donasi_saya + `${data?.id}`);
+    } else {
+      if (data.donasiMaster_StatusInvoiceId === "2") {
+        return router.push(RouterDonasi.proses_transaksi + `${data?.id}`);
+      } else {
+        if (data.donasiMaster_StatusInvoiceId === "3") {
+          return router.push(RouterDonasi.invoice + `${data?.id}`);
+        } else {
+          ComponentGlobal_NotifikasiGagal("Gagal Melihat Invoice");
+        }
+      }
+    }
+  }
+
+  return (
+    <>
+      <Card
+        style={{
+          backgroundColor: AccentColor.blue,
+          border: `2px solid ${AccentColor.darkblue}`,
+          padding: "15px",
+          cursor: "pointer",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "15px",
+        }}
+        onClick={() => onCekInvoice()}
+      >
+        <Stack>
+          <Grid>
+            <Grid.Col span={5}>
+              <Stack spacing={5}>
+                <Stack spacing={0}>
+                  <Text fz={"xs"} fw={"bold"} truncate>
+                    {data.Donasi.title}
+                  </Text>
+                  <ComponentDonasi_TampilanHitungMundur
+                    durasi={data.Donasi.DonasiMaster_Durasi.name}
+                    publishTime={data.Donasi.publishTime}
+                    textSize={10}
+                  />
+                </Stack>
+                <Progress value={+data.Donasi.progres} color="orange" />
+                <Group position="apart">
+                  <Stack spacing={0}>
+                    <Text fz={10}>Donasi Saya</Text>
+                    <Text fz={10} fw={"bold"} c={"orange"} truncate>
+                      <TampilanRupiahDonasi nominal={+data.nominal} />
+                    </Text>
+                  </Stack>
+                </Group>
+                <Badge size="xs" variant="filled" color="yellow">
+                  <Text>{data.DonasiMaster_StatusInvoice.name}</Text>
+                </Badge>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={7}>
+              <AspectRatio ratio={16 / 9}>
+                <Paper radius={"md"}>
+                  <Image
+                    alt="Foto"
+                    src={RouterDonasi.api_gambar + `${data.Donasi.imagesId}`}
+                    radius={"md"}
+                  />
+                </Paper>
+              </AspectRatio>
+            </Grid.Col>
+          </Grid>
+          {/* {width > 575 ? "" : <Divider />} */}
+        </Stack>
+        {visible && donasiId !== "" ? (
+          <ComponentGlobal_CardLoadingOverlay />
+        ) : (
+          ""
+        )}
+      </Card>
+    </>
+  );
+}

src/app_modules/donasi/component/card_view/card_pencairan_dana.tsx

@@ -0,0 +1,71 @@
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import {
+  Paper,
+  Stack,
+  Title,
+  Spoiler,
+  Center,
+  Button,
+  Text,
+} from "@mantine/core";
+import { IconImageInPicture } from "@tabler/icons-react";
+import moment from "moment";
+
+import { MODEL_DONASI_PENCAIRAN_DANA } from "../../model/interface";
+import { useRouter } from "next/navigation";
+
+export function ComponentDonasi_CardPencairanDana({
+  data,
+}: {
+  data: MODEL_DONASI_PENCAIRAN_DANA;
+}) {
+  const router = useRouter();
+
+  return (
+    <>
+      <Paper
+        style={{
+          padding: "15px",
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          color: "white",
+        }}
+      >
+        <Text fz={"xs"}>{moment(data.createdAt).format("ll")}</Text>
+        <Stack spacing={"lg"}>
+          <Title order={5}>{data.title}</Title>
+          <Spoiler
+            maxHeight={50}
+            hideLabel="Sembunyikan"
+            showLabel="Baca Selengkapnya"
+          >
+            {data.deskripsi}
+          </Spoiler>
+          <Center>
+            <Button
+              radius={"xl"}
+              leftIcon={<IconImageInPicture />}
+              onClick={() => {
+                // open();
+                // setIdGambar(e.imagesId);
+                router.push(RouterDonasi.bukti_transfer + data.imagesId, {
+                  scroll: false,
+                });
+              }}
+              bg={MainColor.yellow}
+              color="yellow"
+              c={"black"}
+            >
+              Bukti Transfer
+            </Button>
+          </Center>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/donasi/component/card_view/card_publish.tsx

@@ -5,16 +5,19 @@ import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import {
   AspectRatio,
   Box,
+  Card,
   Grid,
   Image,
   Paper,
   Progress,
   Stack,
-  Text
+  Text,
 } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
 import TampilanRupiahDonasi from "../tampilan_rupiah";
+import { useState } from "react";
+import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
 
 export default function ComponentDonasi_CardPublish({
   data,
@@ -23,12 +26,13 @@ export default function ComponentDonasi_CardPublish({
   data: any;
   path: string;
 }) {
-
   const router = useRouter();
+  const [visible, setVisible] = useState(false);
+  const [donasiId, setDonasiId] = useState("");
 
   return (
     <>
-      <Box
+      <Card
         style={{
           padding: "15px",
           backgroundColor: AccentColor.darkblue,
@@ -38,6 +42,8 @@ export default function ComponentDonasi_CardPublish({
           marginBottom: "15px",
         }}
         onClick={() => {
+          setVisible(true);
+          setDonasiId(data.id);
           router.push(path + `${data.id}`);
         }}
       >
@@ -78,7 +84,12 @@ export default function ComponentDonasi_CardPublish({
           </Grid>
           {/* {width > 575 ? "" : <Divider />} */}
         </Stack>
-      </Box>
+        {visible && donasiId !== "" ? (
+          <ComponentGlobal_CardLoadingOverlay />
+        ) : (
+          ""
+        )}
+      </Card>
     </>
   );
 }

src/app_modules/donasi/component/card_view/card_status.tsx

@@ -8,9 +8,12 @@ import {
   Paper,
   Image,
   Text,
+  Card,
 } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { MODEL_DONASI } from "../../model/interface";
+import { useState } from "react";
+import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
 
 export function ComponentDonasi_CardStatus({
   data,
@@ -20,9 +23,12 @@ export function ComponentDonasi_CardStatus({
   path: string;
 }) {
   const router = useRouter();
+  const [visible, setVisible] = useState(false);
+  const [donasiId, setDonasiId] = useState("");
+
   return (
     <>
-      <Box
+      <Card
         style={{
           padding: "15px",
           backgroundColor: AccentColor.darkblue,
@@ -31,7 +37,11 @@ export function ComponentDonasi_CardStatus({
           color: "white",
           marginBottom: "15px",
         }}
-        onClick={() => router.push(path + `${data.id}`)}
+        onClick={() => {
+          setVisible(true);
+          setDonasiId(data.id);
+          router.push(path + `${data.id}`);
+        }}
       >
         <Stack>
           <Grid>
@@ -65,7 +75,12 @@ export function ComponentDonasi_CardStatus({
           </Grid>
           {/* {width > 575 ? "" : <Divider />} */}
         </Stack>
-      </Box>
+        {visible && donasiId !== "" ? (
+          <ComponentGlobal_CardLoadingOverlay />
+        ) : (
+          ""
+        )}
+      </Card>
     </>
   );
 }

src/app_modules/donasi/component/card_view/ui_card_donatur.tsx

@@ -0,0 +1,48 @@
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { Paper, Grid, Center, Stack, Title, Group, Text } from "@mantine/core";
+import { IconMoodSmileBeam } from "@tabler/icons-react";
+import { MODEL_DONASI_INVOICE } from "../../model/interface";
+import TampilanRupiahDonasi from "../tampilan_rupiah";
+
+export function ComponentDonasi_CardDonatur({ data }: { data: MODEL_DONASI_INVOICE }){
+    return (
+      <>
+        <Paper
+          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}>{data.Author.username}</Title>
+                <Group spacing={"xs"}>
+                  <Text fz={"xs"}>Berdonasi sebesar</Text>
+                  <Text truncate fw={"bold"}>
+                    <TampilanRupiahDonasi nominal={+data.nominal} />
+                  </Text>
+                </Group>
+                <Text fz={"xs"}>
+                  {new Intl.DateTimeFormat("id-ID", {
+                    dateStyle: "full",
+                  }).format(data?.createdAt)}
+                </Text>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+        </Paper>
+      </>
+    );
+}

src/app_modules/donasi/component/card_view/ui_card_kabar.tsx

@@ -26,7 +26,7 @@ export default function ComponentDonasi_ListKabar({
           cursor: "pointer",
           borderRadius: "10px",
           color: "white",
-          marginBottom: "5px",
+          marginBottom: "10px",
         }}
         onClick={() => router.push(route + `${kabar.id}`)}
       >

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

@@ -15,6 +15,7 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_
 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";
+import { useState } from "react";
 
 export default function DetailDraftDonasi({
   dataDonasi,
@@ -52,6 +53,8 @@ function ButtonAjukanPenggalangan({
   const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
     gs_donasi_tabs_posting
   );
+  const [isLoading, setLoading] = useState(false);
+
   async function onCLick() {
     const res = await Donasi_funGantiStatus(dataDonasi.id, "2");
     if (res.status === 200) {
@@ -71,6 +74,7 @@ function ButtonAjukanPenggalangan({
       if (notif.status === 201) {
         mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
 
+        setLoading(true);
         setTabsPostingDonasi("Review");
         ComponentGlobal_NotifikasiBerhasil("Berhasil Diajukan");
         router.push(RouterDonasi.main_galang_dana);
@@ -82,6 +86,8 @@ function ButtonAjukanPenggalangan({
   return (
     <>
       <Button
+        loaderPosition="center"
+        loading={isLoading ? true : false}
         radius={"xl"}
         bg={"orange"}
         color="orange"

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

@@ -1,64 +1,55 @@
 "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 ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ComponentDonasi_CardDonatur } from "@/app_modules/donasi/component/card_view/ui_card_donatur";
+import { donasi_funGetListDonaturById } from "@/app_modules/donasi/fun/get/get_list_donatur";
 import { MODEL_DONASI_INVOICE } from "@/app_modules/donasi/model/interface";
-import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
-import { IconMoodSmileBeam } from "@tabler/icons-react";
+import { Box, Center } from "@mantine/core";
 import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 
 export default function DonaturDonasi({
   listDonatur,
+  donasiId,
 }: {
   listDonatur: MODEL_DONASI_INVOICE[];
+  donasiId: string;
 }) {
-  const [donatur, setDonatur] = useState(listDonatur);
-  if (_.isEmpty(donatur)) return <ComponentDonasi_IsEmptyData />;
+  const [data, setData] = useState(listDonatur);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {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} />
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="92vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
               </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)}
-                </Text>
-              </Stack>
-            </Grid.Col>
-          </Grid>
-        </Paper>
-      ))}
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetListDonaturById({
+                page: activePage + 1,
+                donasiId: donasiId,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => <ComponentDonasi_CardDonatur data={item} />}
+          </ScrollOnly>
+        </Box>
+      )}
     </>
   );
 }

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

@@ -2,32 +2,62 @@
 
 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 ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ComponentDonasi_CardDonatur } from "@/app_modules/donasi/component/card_view/ui_card_donatur";
+import ComponentDonasi_ListKabar from "@/app_modules/donasi/component/card_view/ui_card_kabar";
+import { donasi_funGetListDonaturById } from "@/app_modules/donasi/fun/get/get_list_donatur";
+import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
 import { MODEL_DONASI_KABAR } from "@/app_modules/donasi/model/interface";
-import { Box } from "@mantine/core";
+import { Box, Center } from "@mantine/core";
 import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 
 export default function KabarDonasi({
   listKabar,
+  donasiId,
 }: {
   listKabar: MODEL_DONASI_KABAR[];
+  donasiId: string;
 }) {
-
-  const [kabar, setKabar] = useState(listKabar);
-
-  if (_.isEmpty(kabar)) return <ComponentGlobal_IsEmptyData />;
+  const [data, setData] = useState(listKabar);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {kabar.map((e, i) => (
-        <Box key={i}>
-          <ComponentDonasi_ListKabar
-            kabar={e}
-            route={RouterDonasi.detail_kabar}
-          />
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="92vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetListKabarById({
+                page: activePage + 1,
+                donasiId: donasiId,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentDonasi_ListKabar
+                kabar={item}
+                route={RouterDonasi.detail_kabar}
+              />
+            )}
+          </ScrollOnly>
         </Box>
-      ))}
+      )}
     </>
   );
 }

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

@@ -7,7 +7,8 @@ import {
 } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentDonasi_NotedBox from "@/app_modules/donasi/component/noted_box";
+import { ComponentDonasi_InformasiPencairanDana } from "@/app_modules/donasi/component/card_view/box_informasi_pencarian_dana";
+import { ComponentDonasi_BoxPencariranDana } from "@/app_modules/donasi/component/card_view/box_pencairan_dana";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
   MODEL_DONASI,
@@ -15,11 +16,9 @@ import {
 } from "@/app_modules/donasi/model/interface";
 import {
   AspectRatio,
-  Avatar,
   Button,
   Center,
   Grid,
-  Group,
   Image,
   Modal,
   Paper,
@@ -29,16 +28,18 @@ import {
   Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { IconImageInPicture, IconTransferIn } from "@tabler/icons-react";
+import { IconImageInPicture } from "@tabler/icons-react";
 import _ from "lodash";
 import moment from "moment";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 export default function PencairanDanaDonasi({
+  donasiId,
   totalAkumulasi,
   listPencairan,
 }: {
+  donasiId: string;
   totalAkumulasi: MODEL_DONASI;
   listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
 }) {
@@ -47,119 +48,9 @@ export default function PencairanDanaDonasi({
   return (
     <>
       <Stack>
-        <BoxDanaDicarikan akumulasi={akumulasi} />
-        <InformasiPencairanDana listPD={listPD} />
+        <ComponentDonasi_BoxPencariranDana akumulasi={akumulasi} />
+        <ComponentDonasi_InformasiPencairanDana donasiId={donasiId} listPD={listPD} />
       </Stack>
     </>
   );
 }
-
-function BoxDanaDicarikan({ akumulasi }: { akumulasi: MODEL_DONASI }) {
-  return (
-    <>
-      <Paper
-        style={{
-          backgroundColor: MainColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-          padding: "15px",
-          cursor: "pointer",
-          borderRadius: "10px",
-          color: "white",
-          marginBottom: "10px",
-        }}
-      >
-        <Stack>
-          <Grid>
-            <Grid.Col span={6}>
-              <Title order={5}>
-                <TampilanRupiahDonasi nominal={akumulasi.totalPencairan} />
-              </Title>
-              <Text fz={"xs"}>Dana sudah dicairkan</Text>
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <Title order={5}>{akumulasi.akumulasiPencairan} kali</Title>
-              <Text fz={"xs"}>Pencairan dana</Text>
-            </Grid.Col>
-          </Grid>
-          <ComponentGlobal_BoxInformation
-            informasi=" Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan
-            pihak manapun, jika berita pencairan dana dibawah tidak sesuai
-            dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain
-            dapat melaporkannya pada Admin HIPMI !"
-          />
-        </Stack>
-      </Paper>
-    </>
-  );
-}
-
-function InformasiPencairanDana({
-  listPD,
-}: {
-  listPD: MODEL_DONASI_PENCAIRAN_DANA[];
-}) {
-  const router = useRouter();
-  const [opened, { open, close }] = useDisclosure(false);
-  const [idGambar, setIdGambar] = useState("");
-  return (
-    <>
-      <Modal opened={opened} onClose={close} size={"xl"}>
-        <AspectRatio ratio={9 / 16}>
-          <Paper>
-            <Image
-              alt="Foto"
-              src={RouterDonasi.api_gambar_pencairan + `${idGambar}`}
-            />
-          </Paper>
-        </AspectRatio>
-      </Modal>
-
-      {_.isEmpty(listPD) ? (
-        <ComponentGlobal_IsEmptyData height={20} />
-      ) : (
-        listPD.map((e, i) => (
-          <Paper
-            key={i}
-            style={{
-              padding: "15px",
-              border: `2px solid ${AccentColor.blue}`,
-              backgroundColor: AccentColor.darkblue,
-              borderRadius: "10px",
-              color: "white",
-            }}
-          >
-            <Text fz={"xs"}>{moment(e.createdAt).format("ll")}</Text>
-            <Stack spacing={"lg"}>
-              <Title order={5}>{e.title}</Title>
-              <Spoiler
-                maxHeight={50}
-                hideLabel="Sembunyikan"
-                showLabel="Baca Selengkapnya"
-              >
-                {e.deskripsi}
-              </Spoiler>
-              <Center>
-                <Button
-                  radius={"xl"}
-                  leftIcon={<IconImageInPicture />}
-                  onClick={() => {
-                    // open();
-                    // setIdGambar(e.imagesId);
-                    router.push(`/dev/donasi/bukti-transfer/${e.imagesId}`, {
-                      scroll: false,
-                    });
-                  }}
-                  bg={MainColor.yellow}
-                  color="yellow"
-                  c={"black"}
-                >
-                  Bukti Transfer
-                </Button>
-              </Center>
-            </Stack>
-          </Paper>
-        ))
-      )}
-    </>
-  );
-}

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

@@ -3,7 +3,7 @@
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
-import ComponentDonasi_CardPublish from "@/app_modules/donasi/component/card_view/box_publish";
+import ComponentDonasi_CardPublish from "@/app_modules/donasi/component/card_view/card_publish";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
   MODEL_DONASI,

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

@@ -1,30 +1,20 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  ActionIcon,
-  Avatar,
-  Box,
-  Button,
-  Group,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import {
-  IconCirclePlus,
-  IconEdit,
-  IconEditCircle,
-  IconTrash,
-} from "@tabler/icons-react";
-import moment from "moment";
-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";
+import { Box, Button, Center, Stack } from "@mantine/core";
+import { IconCirclePlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentDonasi_ListKabar from "../../component/card_view/ui_card_kabar";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { ComponentDonasi_CardDonatur } from "../../component/card_view/ui_card_donatur";
+import { donasi_funGetListDonaturById } from "../../fun/get/get_list_donatur";
+import { donasi_funGetListKabarById } from "../../fun/get/get_list_kabar";
 
 export default function ListKabarDonasi({
   donasiId,
@@ -34,8 +24,10 @@ export default function ListKabarDonasi({
   listKabar: MODEL_DONASI_KABAR[];
 }) {
   const router = useRouter();
-  const [kabar, setKabar] = useState(listKabar);
+  const [data, setData] = useState(listKabar);
+  const [activePage, setActivePage] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
+
   return (
     <>
       <Stack>
@@ -54,14 +46,40 @@ export default function ListKabarDonasi({
         >
           Tambah Kabar
         </Button>
-        {kabar.map((e, i) => (
-          <Box key={i}>
-            <ComponentDonasi_ListKabar
-              kabar={e}
-              route={RouterDonasi.update_kabar}
-            />
+
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData />
+        ) : (
+          <Box>
+            <ScrollOnly
+              height="85vh"
+              renderLoading={() => (
+                <Center>
+                  <ComponentGlobal_Loader size={25} />
+                </Center>
+              )}
+              data={data}
+              setData={setData}
+              moreData={async () => {
+                const loadData = await donasi_funGetListKabarById({
+                  page: activePage + 1,
+                  donasiId: donasiId,
+                });
+
+                setActivePage((val) => val + 1);
+
+                return loadData;
+              }}
+            >
+              {(item) => (
+                <ComponentDonasi_ListKabar
+                  kabar={item}
+                  route={RouterDonasi.update_kabar}
+                />
+              )}
+            </ScrollOnly>
           </Box>
-        ))}
+        )}
       </Stack>
     </>
   );

src/app_modules/donasi/fun/get/get_all_invoice_by_author_id.tsx

@@ -1,12 +1,22 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function donasi_funGetAllInvoiceByAuthorId({
+  page,
+}: {
+  page: number;
+}) {
+  const authorId = await user_getOneUserId();
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
 
-export async function Donasi_getInvoiceByAuthorId(authorId: string) {
-  // console.log(authorId)
   const data = await prisma.donasi_Invoice.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
-      createdAt: "desc"
+      createdAt: "desc",
     },
     where: {
       authorId: authorId,

src/app_modules/donasi/fun/get/get_list_beranda.tsx

@@ -3,13 +3,19 @@
 import prisma from "@/app/lib/prisma";
 import { tree } from "next/dist/build/templates/app-page";
 
-export async function Donasi_getListBeranda() {
+export async function donasi_funGetAllPublish({ page }: { page: number }) {
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
   const data = await prisma.donasi.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       publishTime: "desc",
     },
     where: {
       donasiMaster_StatusDonasiId: "1",
+      active: true,
     },
     select: {
       id: true,

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

@@ -2,8 +2,19 @@
 
 import prisma from "@/app/lib/prisma";
 
-export async function Donasi_getListDonatur(donasiId: string) {
+export async function donasi_funGetListDonaturById({
+  page,
+  donasiId,
+}: {
+  page: number,
+  donasiId: string;
+}) {
+  const takeData = 10
+  const skipData = page * takeData - takeData
+
   const data = await prisma.donasi_Invoice.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       createdAt: "desc",
     },

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

@@ -2,14 +2,24 @@
 
 import prisma from "@/app/lib/prisma";
 
-export async function Donasi_getListKabar(donasiId: string) {
-  // console.log(donasiId)
+export async function donasi_funGetListKabarById({
+  page,
+  donasiId,
+}: {
+  page: number;
+  donasiId: string;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
   const data = await prisma.donasi_Kabar.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       createdAt: "desc",
     },
     where: {
       donasiId: donasiId,
+      active: true,
     },
     select: {
       id: true,

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

@@ -1,17 +1,26 @@
-"use server"
+"use server";
 
-import prisma from "@/app/lib/prisma"
+import prisma from "@/app/lib/prisma";
 
-export async function Donasi_getListPencairanDanaById(donasiId:string) {
+export async function donasi_funGetListPencairanDanaById({
+  page,
+  donasiId,
+}: {
+  page: number;
+  donasiId: string;
+}) {
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+  const data = await prisma.donasi_PencairanDana.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      createdAt: "desc",
+    },
+    where: {
+      donasiId: donasiId,
+    },
+  });
 
-    const data = await prisma.donasi_PencairanDana.findMany({
-        orderBy:{
-            createdAt: "desc"
-        },
-        where: {
-            donasiId: donasiId
-        }
-    })
-
-    return data
-}
+  return data;
+}

src/app_modules/donasi/fun/get/status/get_all_status_draft.ts

@@ -0,0 +1,24 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function donasi_funGetAllStatusDraft({ page }: { page: number }) {
+  const authorId = await user_getOneUserId();
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.donasi.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      authorId: authorId,
+      donasiMaster_StatusDonasiId: "3",
+    },
+  });
+  
+  return data;
+}

src/app_modules/donasi/fun/get/status/get_all_status_publish.ts

@@ -0,0 +1,35 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function donasi_funGetAllStatusPublish({ page }: { page: number }) {
+  const authorId = await user_getOneUserId();
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
+
+  const data = await prisma.donasi.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      publishTime: "desc",
+    },
+    where: {
+      authorId: authorId,
+      donasiMaster_StatusDonasiId: "1",
+      active: true,
+    },
+    select: {
+      id: true,
+      title: true,
+      imagesId: true,
+      target: true,
+      progres: true,
+      publishTime: true,
+      DonasiMaster_Durasi: true,
+      terkumpul: true,
+    },
+  });
+  return data;
+}

src/app_modules/donasi/fun/get/status/get_all_status_reject.ts

@@ -0,0 +1,24 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function donasi_funGetAllStatusReject({ page }: { page: number }) {
+  const authorId = await user_getOneUserId();
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.donasi.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      authorId: authorId,
+      donasiMaster_StatusDonasiId: "4",
+    },
+  });
+
+  return data;
+}

src/app_modules/donasi/fun/get/status/get_all_status_review.ts

@@ -0,0 +1,24 @@
+"use server"
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function donasi_funGetAllStatusReview({page}: {page: number}) {
+   const authorId = await user_getOneUserId();
+   const takeData = 5;
+   const skipData = page * takeData - takeData;
+
+   const data = await prisma.donasi.findMany({
+     take: takeData,
+     skip: skipData,
+     orderBy: {
+       updatedAt: "desc",
+     },
+     where: {
+       authorId: authorId,
+       donasiMaster_StatusDonasiId: "2",
+     },
+   });
+
+   return data;
+}

src/app_modules/donasi/main/beranda.tsx

@@ -1,16 +1,19 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { ActionIcon, Affix, Box, rem } from "@mantine/core";
+import { ActionIcon, Affix, Box, Center, rem } from "@mantine/core";
 import { useWindowScroll } from "@mantine/hooks";
 import { IconPencilPlus } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentDonasi_CardPublish from "../component/card_view/box_publish";
+import ComponentDonasi_CardPublish from "../component/card_view/card_publish";
 import { MODEL_DONASI } from "../model/interface";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 import _ from "lodash";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
+import { donasi_funGetAllPublish } from "../fun/get/get_list_beranda";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 
 export default function MainDonasi({
   listDonasi,
@@ -18,6 +21,7 @@ export default function MainDonasi({
   listDonasi: MODEL_DONASI[];
 }) {
   const [data, setData] = useState(listDonasi);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
@@ -26,14 +30,32 @@ export default function MainDonasi({
         {_.isEmpty(data) ? (
           <ComponentGlobal_IsEmptyData />
         ) : (
-          data.map((e, i) => (
-            <Box key={i}>
+          <ScrollOnly
+            height="82vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetAllPublish({
+                page: activePage + 1,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
               <ComponentDonasi_CardPublish
-                data={e as any}
+                data={item as any}
                 path={RouterDonasi.detail_main}
               />
-            </Box>
-          ))
+            )}
+          </ScrollOnly>
         )}
       </Box>
     </>

src/app_modules/donasi/main/donasi_saya.tsx

@@ -7,6 +7,7 @@ import {
   AspectRatio,
   Badge,
   Box,
+  Center,
   Grid,
   Group,
   Image,
@@ -25,105 +26,56 @@ import toast from "react-simple-toasts";
 import ComponentDonasi_TampilanHitungMundur from "../component/tampilan_hitung_mundur";
 import TampilanRupiahDonasi from "../component/tampilan_rupiah";
 import { MODEL_DONASI_INVOICE } from "../model/interface";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ScrollOnly } from "next-scroll-loader";
+import ComponentDonasi_CardPublish from "../component/card_view/card_publish";
+import { donasi_funGetAllPublish } from "../fun/get/get_list_beranda";
+import { donasi_funGetAllInvoiceByAuthorId } from "../fun/get/get_all_invoice_by_author_id";
+import { ComponentDonasi_CardInvoice } from "../component/card_view/card_invoice";
 
 export default function DonasiSayaDonasi({
   listInvoice,
 }: {
   listInvoice: MODEL_DONASI_INVOICE[];
 }) {
-  const [invoice, setInvoice] = useState(listInvoice);
   const router = useRouter();
-  const { height, width } = useViewportSize();
-
-  if (_.isEmpty(listInvoice))
-    return <ComponentGlobal_IsEmptyData />;
+  const [data, setData] = useState(listInvoice);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {invoice.map((e, i) => (
-        <Box
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-            marginBottom: "15px",
-          }}
-          key={i}
-          onClick={() =>
-            onClick(router, e.donasiMaster_StatusInvoiceId, e.id, e.Donasi.id)
-          }
-        >
-          <Stack>
-            <Grid>
-              <Grid.Col span={5}>
-                <Stack spacing={5}>
-                  <Stack spacing={0}>
-                    <Text fz={"xs"} fw={"bold"} truncate>
-                      {e.Donasi.title}
-                    </Text>
-                    <ComponentDonasi_TampilanHitungMundur
-                      durasi={e.Donasi.DonasiMaster_Durasi.name}
-                      publishTime={e.Donasi.publishTime}
-                      textSize={10}
-                    />
-                  </Stack>
-                  <Progress value={+e.Donasi.progres} color="orange" />
-                  <Group position="apart">
-                    <Stack spacing={0}>
-                      <Text fz={10}>Donasi Saya</Text>
-                      <Text fz={10} fw={"bold"} c={"orange"} truncate>
-                        <TampilanRupiahDonasi nominal={+e.nominal} />
-                      </Text>
-                    </Stack>
-                  </Group>
-                  <Badge size="xs" variant="filled" color="yellow">
-                    <Text>{e.DonasiMaster_StatusInvoice.name}</Text>
-                  </Badge>
-                </Stack>
-              </Grid.Col>
-              <Grid.Col span={7}>
-                <AspectRatio ratio={16 / 9}>
-                  <Paper radius={"md"}>
-                    <Image
-                      alt="Foto"
-                      src={RouterDonasi.api_gambar + `${e.Donasi.imagesId}`}
-                      radius={"md"}
-                    />
-                  </Paper>
-                </AspectRatio>
-              </Grid.Col>
-            </Grid>
-            {/* {width > 575 ? "" : <Divider />} */}
-          </Stack>
-        </Box>
-      ))}
-    </>
-  );
-}
+      <Box>
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData />
+        ) : (
+          <ScrollOnly
+            height="82vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetAllInvoiceByAuthorId({
+                page: activePage + 1,
+              });
 
-function HitungMundur({
-  durasi,
-  publishTime,
-}: {
-  durasi: string;
-  publishTime: Date;
-}) {
-  return (
-    <>
-      <Stack spacing={0} align="center">
-        <Text fz={"xs"}>Sisa hari </Text>
-        <Text span inherit fw={"bold"} fz={"xs"}>
-          {Number(durasi) -
-            moment(new Date()).diff(new Date(publishTime), "days") <=
-          0
-            ? 0
-            : Number(durasi) -
-              moment(new Date()).diff(new Date(publishTime), "days")}
-        </Text>
-      </Stack>
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentDonasi_CardInvoice
+                data={item as any}
+              />
+            )}
+          </ScrollOnly>
+        )}
+      </Box>
     </>
   );
 }
@@ -143,7 +95,7 @@ async function onClick(
       if (status === "3") {
         return router.push(RouterDonasi.invoice + `${invoiceId}`);
       } else {
-        toast("gagal");
+        ComponentGlobal_NotifikasiGagal("Gagal Melihat Invoice");
       }
     }
   }

src/app_modules/donasi/main/galang_dana/draft.tsx

@@ -1,12 +1,14 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  Box
-} from "@mantine/core";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Box, Center } from "@mantine/core";
 import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
 import { ComponentDonasi_CardStatus } from "../../component/card_view/card_status";
+import { donasi_funGetAllStatusDraft } from "../../fun/get/status/get_all_status_draft";
 import { MODEL_DONASI } from "../../model/interface";
 
 export default function PostingDraftDonasi({
@@ -14,18 +16,51 @@ export default function PostingDraftDonasi({
 }: {
   listDraft: MODEL_DONASI[];
 }) {
-  if (_.isEmpty(listDraft)) return <ComponentGlobal_IsEmptyData />;
+  const [data, setData] = useState(listDraft);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {listDraft.map((e, i) => (
+      {/* {listDraft.map((e, i) => (
         <Box key={i}>
           <ComponentDonasi_CardStatus
             data={e}
             path={RouterDonasi.detail_draft}
           />
         </Box>
-      ))}
+      ))} */}
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetAllStatusDraft({
+                page: activePage + 1,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentDonasi_CardStatus
+                data={item}
+                path={RouterDonasi.detail_draft}
+              />
+            )}
+          </ScrollOnly>
+        </Box>
+      )}
     </>
   );
 }

src/app_modules/donasi/main/galang_dana/publish.tsx

@@ -1,12 +1,15 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import ComponentDonasi_CardPublish from "../../component/card_view/box_publish";
-import { MODEL_DONASI } from "../../model/interface";
-import { useState } from "react";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Box, Center } from "@mantine/core";
 import _ from "lodash";
-import { Box } from "@mantine/core";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import ComponentDonasi_CardPublish from "../../component/card_view/card_publish";
+import { donasi_funGetAllStatusPublish } from "../../fun/get/status/get_all_status_publish";
+import { MODEL_DONASI } from "../../model/interface";
 
 export default function PostingPublishDonasi({
   listPublish,
@@ -14,27 +17,42 @@ export default function PostingPublishDonasi({
   listPublish: MODEL_DONASI[];
 }) {
   const [data, setData] = useState(listPublish);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
       {_.isEmpty(data) ? (
         <ComponentGlobal_IsEmptyData />
       ) : (
-        data.map((e, i) => (
-          <Box key={i}>
-            <ComponentDonasi_CardPublish
-              data={e}
-              path={RouterDonasi.detail_publish}
-            />
-          </Box>
-        ))
+        <Box >
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetAllStatusPublish({
+                page: activePage + 1,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentDonasi_CardPublish
+                data={item}
+                path={RouterDonasi.detail_publish}
+              />
+            )}
+          </ScrollOnly>
+        </Box>
       )}
     </>
   );
-
-  // return (
-  //   <>
-  //     <ComponentDonasi_CardPublish dataDonasi={listPublish} path={RouterDonasi.detail_publish} />
-  //   </>
-  // );
 }

src/app_modules/donasi/main/galang_dana/reject.tsx

@@ -1,24 +1,15 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  AspectRatio,
-  Box,
-  Divider,
-  Grid,
-  Image,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-} from "@mantine/core";
-import { useViewportSize } from "@mantine/hooks";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Box, Center } from "@mantine/core";
 import _ from "lodash";
-import { useRouter } from "next/navigation";
+import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
-import ComponentDonasi_IsEmptyData from "../../component/is_empty_data";
-import { MODEL_DONASI } from "../../model/interface";
 import { ComponentDonasi_CardStatus } from "../../component/card_view/card_status";
+import { donasi_funGetAllStatusReject } from "../../fun/get/status/get_all_status_reject";
+import { MODEL_DONASI } from "../../model/interface";
 
 export default function PostingRejectDonasi({
   listReject,
@@ -26,73 +17,42 @@ export default function PostingRejectDonasi({
   listReject: MODEL_DONASI[];
 }) {
   const [data, setData] = useState(listReject);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {data.map((e, i) => (
-        <Box key={i}>
-          <ComponentDonasi_CardStatus
-            data={e}
-            path={RouterDonasi.detail_reject}
-          />
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <Box>
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetAllStatusReject({
+                page: activePage + 1,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentDonasi_CardStatus
+                data={item}
+                path={RouterDonasi.detail_reject}
+              />
+            )}
+          </ScrollOnly>
         </Box>
-      ))}
+      )}
     </>
   );
-
-  // if (_.isEmpty(listReject))
-  //   return <ComponentDonasi_IsEmptyData text="Tidak ada data" />;
-
-  // 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" },
-  //       ]}
-  //     >
-  //       {donasi.map((e, i) => (
-  //         <Box
-  //           key={i}
-  //           onClick={() => router.push(RouterDonasi.detail_reject + `${e.id}`)}
-  //         >
-  //           <Stack>
-  //             <Grid>
-  //               <Grid.Col span={7}>
-  //                 <AspectRatio ratio={16 / 9}>
-  //                   <Paper radius={"md"}>
-  //                     <Image
-  //                       alt="Foto"
-  //                       src={RouterDonasi.api_gambar + `${e.imagesId}`}
-  //                       radius={"md"}
-  //                     />
-  //                   </Paper>
-  //                 </AspectRatio>
-  //               </Grid.Col>
-  //               <Grid.Col span={5}>
-  //                 <Stack spacing={"xs"}>
-  //                   <Text fz={"sm"} fw={"bold"} lineClamp={2}>
-  //                     {e.title}
-  //                   </Text>
-  //                   <Stack spacing={0}>
-  //                     <Text fz={"sm"} fw={"bold"}>
-  //                       Alasan ditolak
-  //                     </Text>
-  //                     <Text fz={"sm"} lineClamp={2}>
-  //                       {e.catatan}
-  //                     </Text>
-  //                   </Stack>
-  //                 </Stack>
-  //               </Grid.Col>
-  //             </Grid>
-  //             {width > 575 ? "" : <Divider />}
-  //           </Stack>
-  //         </Box>
-  //       ))}
-  //     </SimpleGrid>
-  //   </>
-  // );
 }

src/app_modules/donasi/main/galang_dana/review.tsx

@@ -1,29 +1,58 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { Box } from "@mantine/core";
+import { Box, Center } from "@mantine/core";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import _ from "lodash";
 import { ComponentDonasi_CardStatus } from "../../component/card_view/card_status";
 import { MODEL_DONASI } from "../../model/interface";
+import { donasi_funGetAllStatusReview } from "../../fun/get/status/get_all_status_review";
+import { ScrollOnly } from "next-scroll-loader";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { useState } from "react";
 
 export default function PostingReviewDonasi({
   listReview,
 }: {
   listReview: MODEL_DONASI[];
 }) {
-  if (_.isEmpty(listReview)) return <ComponentGlobal_IsEmptyData />;
+  const [data, setData] = useState(listReview);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {listReview.map((e, i) => (
-        <Box key={i}>
-          <ComponentDonasi_CardStatus
-            data={e}
-            path={RouterDonasi.detail_review}
-          />
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        // --- Main component --- //
+        <Box>
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await donasi_funGetAllStatusReview({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentDonasi_CardStatus
+                data={item}
+                path={RouterDonasi.detail_review}
+              />
+            )}
+          </ScrollOnly>
         </Box>
-      ))}
+      )}
     </>
   );
 }

src/app_modules/donasi/main/galang_dana/ui_galang_dana.tsx

@@ -75,7 +75,7 @@ export default function GalangDanaDonasi({
           },
         }}
       >
-        <Stack>
+        <Stack >
           <Tabs.List grow>
             {listPosting.map((e, i) => (
               <Tabs.Tab
@@ -98,7 +98,7 @@ export default function GalangDanaDonasi({
             ))}
           </Tabs.List>
           {listPosting.map((e, i) => (
-            <Tabs.Panel key={e.id} value={e.value} pt="xs">
+            <Tabs.Panel key={e.id} value={e.value} >
               {e.path}
             </Tabs.Panel>
           ))}

src/app_modules/event/component/card_view/card_riwayat.tsx

@@ -5,9 +5,14 @@ import { Card, Group, Stack, Text, Title } from "@mantine/core";
 
 import { useRouter } from "next/navigation";
 import { MODEL_EVENT } from "../../model/interface";
+import { useState } from "react";
+import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
 
 export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
   const router = useRouter();
+  const [eventId, setEventId] = useState("");
+  const [visible, setVisible] = useState(false);
+
   return (
     <>
       <Card
@@ -30,7 +35,11 @@ export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
         </Card.Section>
         <Card.Section
           p={"sm"}
-          onClick={() => router.push(RouterEvent.detail_riwayat + data.id)}
+          onClick={() => {
+            setVisible(true);
+            setEventId(data?.id);
+            router.push(RouterEvent.detail_riwayat + data.id);
+          }}
         >
           <Stack>
             <Group w={"100%"} position="apart">
@@ -49,6 +58,11 @@ export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
             </Text>
           </Stack>
         </Card.Section>
+        {visible && eventId !== "" ? (
+          <ComponentGlobal_CardLoadingOverlay />
+        ) : (
+          ""
+        )}
       </Card>
     </>
   );

src/app_modules/event/detail/kontribusi/index.tsx

@@ -1,20 +1,9 @@
 "use client";
 
-import {
-  Avatar,
-  Center,
-  Divider,
-  Grid,
-  Paper,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import ComponentEvent_DetailData from "../../component/detail/detail_data";
-import { MODEL_EVENT, MODEL_EVENT_PESERTA } from "../../model/interface";
-import { useState } from "react";
+import { Stack } from "@mantine/core";
 import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
 import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
+import { MODEL_EVENT, MODEL_EVENT_PESERTA } from "../../model/interface";
 
 export default function Event_DetailKontribusi({
   dataEvent,
@@ -27,36 +16,12 @@ export default function Event_DetailKontribusi({
 }) {
   return (
     <>
-      <Stack spacing={"lg"}>
+      <Stack spacing={"lg"} mb={"md"}>
         <ComponentEvent_DetailMainData data={dataEvent} />
         <ComponentEvent_ListPeserta
           listPeserta={listKontributor}
           total={totalPeserta}
         />
-        {/* <Paper withBorder mt={"lg"} shadow="lg">
-          <Stack spacing={"md"} p={"md"}>
-            <Center>
-              <Title order={5}>Daftar Peserta</Title>
-            </Center>
-
-            {peserta
-              .map((e, i) => (
-                <Stack key={i} spacing={"sm"}>
-                  <Grid>
-                    <Grid.Col span={2}>
-                      <Avatar radius={"xl"} bg={"gray"} size={"md"} />
-                    </Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Stack justify="center" h={"100%"}>
-                        <Text>Nama peserta</Text>
-                      </Stack>
-                    </Grid.Col>
-                  </Grid>
-                  <Divider />
-                </Stack>
-              ))}
-          </Stack>
-        </Paper> */}
       </Stack>
     </>
   );

src/app_modules/event/fun/get/status/get_all_status_publish.ts

@@ -0,0 +1,34 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function event_funGetAllStatusPublish({ page }: { page: number }) {
+  const authorId = await user_getOneUserId();
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.event.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      active: true,
+      eventMaster_StatusId: "1",
+      authorId: authorId,
+      tanggal: {
+        gte: new Date(),
+      },
+    },
+    select: {
+      id: true,
+      title: true,
+      deskripsi: true,
+      tanggal: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/event/main/riwayat/semua.tsx

@@ -1,29 +1,19 @@
 "use client";
 
-import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
 import {
-  Card,
-  Stack,
-  Grid,
-  Title,
-  Text,
-  Center,
   Box,
-  Loader,
+  Center,
+  Loader
 } from "@mantine/core";
-import moment from "moment";
 
-import { MODEL_EVENT } from "../../model/interface";
-import { useRouter } from "next/navigation";
-import _ from "lodash";
-import { useState } from "react";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
-import ComponentEvent_BoxListStatus from "../../component/box_list_status";
-import { event_getAllDraft } from "../../fun/get/status/get_all_draft";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { ComponentEvent_CardRiwayat } from "../../component/card_view/card_riwayat";
 import { event_getListSemuaRiwayat } from "../../fun/get/riwayat/get_list_semua_riwayat";
+import { MODEL_EVENT } from "../../model/interface";
 
 export default function Event_SemuaRiwayat({
   listData,

src/app_modules/event/main/status_page/draft.tsx

@@ -15,49 +15,43 @@ export default function Event_StatusDraft({
 }: {
   listDraft: MODEL_EVENT[];
 }) {
-   const [data, setData] = useState(listDraft);
-   const [activePage, setActivePage] = useState(1);
+  const [data, setData] = useState(listDraft);
+  const [activePage, setActivePage] = useState(1);
 
+  return (
+    <>
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        // --- Main component --- //
+        <Box>
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await event_getAllDraft({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
 
-   return (
-     <>
-       {_.isEmpty(data) ? (
-         <ComponentGlobal_IsEmptyData />
-       ) : (
-         // --- Main component --- //
-         <Box>
-           <ScrollOnly
-             height="75vh"
-             renderLoading={() => (
-               <Center mt={"lg"}>
-                 <Loader color={"yellow"} />
-               </Center>
-             )}
-             data={data}
-             setData={setData}
-             moreData={async () => {
-               const loadData = await event_getAllDraft({
-                 page: activePage + 1,
-               });
-               setActivePage((val) => val + 1);
-
-               return loadData;
-             }}
-           >
-             {(item) => (
-               <ComponentEvent_BoxListStatus
-                 data={item}
-                 path={RouterEvent.detail_draft}
-               />
-             )}
-           </ScrollOnly>
-         </Box>
-       )}
-     </>
-   );
-
-
-
-  
-
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentEvent_BoxListStatus
+                data={item}
+                path={RouterEvent.detail_draft}
+              />
+            )}
+          </ScrollOnly>
+        </Box>
+      )}
+    </>
+  );
 }

src/app_modules/event/main/status_page/publish.tsx

@@ -1,45 +1,58 @@
 "use client";
 
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { Box, Center, Group, Paper, Stack, Text, Title } from "@mantine/core";
-import moment from "moment";
-import { useRouter } from "next/navigation";
-import { MODEL_EVENT } from "../../model/interface";
-import ComponentEvent_BoxListStatus from "../../component/box_list_status";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Box, Center } from "@mantine/core";
 import _ from "lodash";
-import ComponentEvent_IsEmptyData from "../../component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import ComponentEvent_BoxListStatus from "../../component/box_list_status";
+import { event_funGetAllStatusPublish } from "../../fun/get/status/get_all_status_publish";
+import { MODEL_EVENT } from "../../model/interface";
 
 export default function Event_StatusPublish({
   listPublish,
 }: {
   listPublish: MODEL_EVENT[];
 }) {
-  const router = useRouter();
-  
-
-  if (_.isEmpty(listPublish))
-    return <ComponentEvent_IsEmptyData text="Tidak ada data" />;
+  const [data, setData] = useState(listPublish);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {listPublish.map((e, i) => (
-        <Box key={e.id}>
-          <Box>
-            <ComponentEvent_BoxListStatus
-              data={e}
-              path={RouterEvent.detail_publish}
-             
-            />
-            {/* {visible && e?.id === eventId ? (
-              <ComponentGlobal_CardLoadingOverlay />
-            ) : (
-              ""
-            )} */}
-          </Box>
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        // --- Main component --- //
+        <Box>
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await event_funGetAllStatusPublish({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentEvent_BoxListStatus
+                data={item}
+                path={RouterEvent.detail_publish}
+              />
+            )}
+          </ScrollOnly>
         </Box>
-      ))}
+      )}
     </>
   );
 }

src/app_modules/investasi/berita/view.tsx

@@ -19,6 +19,8 @@ import { useRouter } from "next/navigation";
 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";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function BeritaInvestasi({
   dataInvestasi,
@@ -34,17 +36,23 @@ export default function BeritaInvestasi({
         berita.BeritaInvestasi.map((e) => (
           <Paper
             key={e.id}
-            mb={"md"}
-            w={"100%"}
-            bg={"gray"}
-            p={"sm"}
+            style={{
+              padding: "15px",
+              backgroundColor: AccentColor.darkblue,
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px",
+              color: "white",
+              marginBottom: "15px",
+            }}
             onClick={() =>
               router.push(RouterInvestasi.detail_berita + `${e.id}`)
             }
           >
             <Stack>
               <Group position="apart">
-                <Title order={6}>{e.title}</Title>
+                <Title order={6} w={"70%"} lineClamp={1}>
+                  {e.title}
+                </Title>
                 <Text fz={"xs"}>{moment(e.createdAt).format("LL")}</Text>
               </Group>
 
@@ -56,7 +64,10 @@ export default function BeritaInvestasi({
                 </Grid.Col>
                 <Grid.Col span={4}>
                   <AspectRatio ratio={16 / 9} h={50} w={100}>
-                    <Image alt="" src={RouterInvestasi.api_gambar + `${e.imagesId}`} />
+                    <Image
+                      alt=""
+                      src={RouterInvestasi.api_gambar + `${e.imagesId}`}
+                    />
                   </AspectRatio>
                 </Grid.Col>
               </Grid>
@@ -64,9 +75,7 @@ export default function BeritaInvestasi({
           </Paper>
         ))
       ) : (
-        <Center>
-          <Title order={6}>Tidak Ada Berita</Title>
-        </Center>
+        <ComponentGlobal_IsEmptyData />
       )}
     </>
   );

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

@@ -64,7 +64,7 @@ export function ComponentInvestasi_DetailDataNonPublish({
 
         {/* Title dan Persentase */}
         <Center>
-          <Title order={4} align="center">
+          <Title order={3} align="center">
             {_.startCase(data.title)}
           </Title>
         </Center>
@@ -129,8 +129,8 @@ export function ComponentInvestasi_DetailDataNonPublish({
           {listBox.map((e) => (
             <Center key={e.id}>
               <Paper
-                w={100}
                 style={{
+                  width: 100,
                   padding: "15px",
                   backgroundColor: AccentColor.blue,
                   border: `2px solid ${AccentColor.softblue}`,

src/app_modules/investasi/create/view.tsx

@@ -30,13 +30,15 @@ import { useRouter } from "next/navigation";
 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 { gs_investasi_status, gs_investas_menu } 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";
+import mqtt_client from "@/util/mqtt_client";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 
 export default function InvestasiCreate({
   id,
@@ -55,8 +57,8 @@ export default function InvestasiCreate({
   const [pdf, setPdf] = useState<File | null>(null);
   const [filePdf, setFilePdf] = useState<any | null>(null);
 
-  const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
-  const [activeTab, setActiveTab] = useAtom(gs_StatusPortoInvestasi);
+  const [changeColor, setChangeColor] = useAtom(gs_investas_menu);
+  const [activeTab, setActiveTab] = useAtom(gs_investasi_status);
   const [totalLembar, setTotalLembar] = useState(0);
   const [isLoading, setLoading] = useState(false);
 
@@ -93,19 +95,39 @@ export default function InvestasiCreate({
     gmbr.append("file", fl as any);
 
     const flPdf = new FormData();
-    flPdf.append("file", fl as any);
+    flPdf.append("file", pdf as any);
 
-    await funCreateInvestasi(gmbr, flPdf, body as any).then((res) => {
-      if (res.status === 201) {
+    const res = await funCreateInvestasi(gmbr, flPdf, body as any);
+    if (res.status === 201) {
+      const dataNotif = {
+        appId: res.data?.id,
+        status: res.data?.MasterStatusInvestasi?.name,
+        userId: res.data?.authorId,
+        pesan: res.data?.title,
+        kategoriApp: "INVESTASI",
+        title: "Investasi baru",
+      };
+
+      const notif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "ADMIN",
+          JSON.stringify({
+            count: 1,
+          })
+        );
         setChangeColor(1);
         setActiveTab("Review");
         setLoading(true);
-        ComponentGlobal_NotifikasiBerhasil(res.message)
+        ComponentGlobal_NotifikasiBerhasil(res.message);
         router.push(RouterInvestasi.portofolio);
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
       }
-    });
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
   }
 
   async function onTotalLembar({
@@ -115,11 +137,6 @@ export default function InvestasiCreate({
     target: number;
     harga: number;
   }) {
-    // console.log(target, "ini target");
-    // console.log(harga, "ini harga");
-
-    // if (harga === +"Nan") setTotalLembar(0);
-
     const hasil: any = target / harga;
     setTotalLembar(_.floor(hasil === Infinity ? 0 : hasil));
   }
@@ -206,7 +223,7 @@ export default function InvestasiCreate({
                   backgroundColor: "gray.1",
                   padding: "10px",
                   borderRadius: "10px",
-                  color: "gray"
+                  color: "gray",
                 }}
               >
                 <Text>Upload File Prospektus</Text>
@@ -227,7 +244,7 @@ export default function InvestasiCreate({
             )}
             {/* {JSON.stringify(filePdf)} */}
             <FileButton
-              accept="application/pdf"
+              accept={"application/pdf"}
               onChange={async (files: any) => {
                 try {
                   const buffer = URL.createObjectURL(

src/app_modules/investasi/create_berita/view.tsx

@@ -8,7 +8,9 @@ import {
   FileButton,
   Group,
   Image,
+  Paper,
   Stack,
+  Text,
   TextInput,
   Textarea,
   Title,
@@ -19,10 +21,11 @@ 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 { AccentColor, 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";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
 
 export default function CreateBeritaInvestasi({
   idInves,
@@ -61,19 +64,35 @@ export default function CreateBeritaInvestasi({
   return (
     <>
       <Stack px={"xl"}>
-        <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
-          {img ? (
-            <Image alt="" src={img} radius={"sm"} height={300} width={"100%"} />
-          ) : (
-            <Image
-              alt=""
-              src={"/aset/no-img.png"}
-              radius={"sm"}
-              height={300}
-              width={"100%"}
-            />
-          )}
-        </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>
+        )}
         <Group position="center" mt={"md"}>
           <FileButton
             onChange={async (files: any) => {
@@ -101,6 +120,7 @@ export default function CreateBeritaInvestasi({
         </Group>
         <TextInput
           withAsterisk
+          placeholder="Masukan judul berita"
           styles={{
             label: {
               color: "white",
@@ -115,24 +135,33 @@ export default function CreateBeritaInvestasi({
           }}
         />
 
-        <Textarea
-          withAsterisk
-          styles={{
-            label: {
-              color: "white",
-            },
-          }}
-          label="Deskripsi"
-          autosize
-          minRows={2}
-          maxRows={6}
-          onChange={(val) => {
-            setValue({
-              ...value,
-              deskripsi: val.target.value,
-            });
-          }}
-        />
+        <Stack spacing={5}>
+          <Textarea
+            withAsterisk
+            placeholder="Masukan deskripsi berita"
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            label="Deskripsi"
+            autosize
+            maxLength={300}
+            minRows={2}
+            maxRows={6}
+            onChange={(val) => {
+              setValue({
+                ...value,
+                deskripsi: val.target.value,
+              });
+            }}
+          />
+          <ComponentGlobal_InputCountDown
+            lengthInput={value.deskripsi.length}
+            maxInput={300}
+          />
+        </Stack>
+
         <Button
           radius={50}
           bg={MainColor.yellow}
@@ -145,7 +174,6 @@ export default function CreateBeritaInvestasi({
           Simpan
         </Button>
       </Stack>
-    
     </>
   );
 }

src/app_modules/investasi/detail/view.tsx

@@ -16,9 +16,10 @@ import {
   Image,
   Paper,
   Progress,
+  SimpleGrid,
   Stack,
   Text,
-  Title
+  Title,
 } from "@mantine/core";
 import {
   IconBookDownload,
@@ -33,7 +34,10 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { gs_TransferValue } from "../g_state";
 import { MODEL_Investasi } from "../model/model_investasi";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailInvestasi({
   dataInvestasi,
@@ -54,24 +58,25 @@ export default function DetailInvestasi({
   const [transaksiValue, setTransaksiValue] = useAtom(gs_TransferValue);
   const [boxId, setBoxId] = useState(0);
   const [isLoadingBox, setLoadingBox] = useState(false);
+  const [isLoadingButton, setLoadingButton] = useState(false);
 
   const listBox = [
     {
       id: 1,
       name: "Prospektus",
-      icon: <IconBookDownload size={70} />,
+      icon: <IconBookDownload size={70} color="white" />,
       route: RouterInvestasi.detail_prospektus,
     },
     {
       id: 2,
       name: "Dokumen",
-      icon: <IconFileDescription size={70} />,
+      icon: <IconFileDescription size={70} color="white" />,
       route: RouterInvestasi.detail_dokumen,
     },
     {
       id: 3,
       name: "Berita",
-      icon: <IconSpeakerphone size={70} />,
+      icon: <IconSpeakerphone size={70} color="white" />,
       route: RouterInvestasi.berita,
     },
   ];
@@ -85,6 +90,7 @@ export default function DetailInvestasi({
       nomorRekening: "",
       totalTransfer: "",
     });
+    setLoadingButton(true);
   }
 
   return (
@@ -161,12 +167,12 @@ export default function DetailInvestasi({
           )}
         </Group>
 
-        <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
+        <AspectRatio ratio={1 / 1} mx={"sm"} mah={250}>
           <Image
             alt=""
             src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
             radius={"sm"}
-            height={300}
+            height={250}
             width={"100%"}
           />
         </AspectRatio>
@@ -268,67 +274,73 @@ export default function DetailInvestasi({
         </Grid>
 
         {/* List Box */}
-        <Grid mb={"md"}>
+        <Group position="apart" px={"lg"}>
           {listBox.map((e, i) => (
-            <Grid.Col
-              span={"auto"}
-              key={e?.id}
-              onClick={() => {
-                setBoxId(e?.id);
-                setLoadingBox(true);
-                router.push(e.route + `${investasi.id}`);
+            <Paper
+              key={i}
+              style={{
+                padding: "15px",
+                backgroundColor: AccentColor.blue,
+                border: `2px solid ${AccentColor.softblue}`,
+                borderRadius: "10px",
+                color: "white",
               }}
             >
-              <Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
-                <Flex direction={"column"} align={"center"} justify={"center"}>
-                  <Text fz={12}>{e.name}</Text>
-                  <ActionIcon
-                    radius={"xl"}
-                    loading={isLoadingBox && e?.id === boxId ? true : false}
-                    variant="transparent"
-                    size={60}
-                  >
-                    {e.icon}
-                  </ActionIcon>
-                </Flex>
-              </Paper>
-            </Grid.Col>
-          ))}
-        </Grid>
-
-        {investasi.sisaLembar === "0" ||
-        Number(investasi.MasterPencarianInvestor.name) -
-          moment(new Date()).diff(new Date(investasi.countDown), "days") <=
-          0 ? (
-          <Center mb={"md"}>
-            <Button disabled radius={50} w={350} variant="transparent">
-              Investasi Telah Ditutup
-            </Button>
-          </Center>
-        ) : (
-          <Box>
-            {loginUserId === investasi.authorId ? (
-              <Center mb={"md"}>
-                <Button disabled radius={50} w={350}>
-                  Investasi Ini Milik Anda
-                </Button>
-              </Center>
-            ) : (
-              <Center mb={"md"}>
-                <Button
-                  radius={50}
-                  w={350}
-                  bg={Warna.biru}
-                  onClick={() => {
-                    onSubmit();
-                  }}
+              <Flex direction={"column"} align={"center"} justify={"center"}>
+                <Text fz={12}>{e.name}</Text>
+                <ActionIcon
+                  radius={"xl"}
+                  loading={isLoadingBox && e?.id === boxId ? true : false}
+                  variant="transparent"
+                  size={60}
+                  onClick={() => router.push(e.route + `${investasi.id}`)}
                 >
-                  Beli Saham
-                </Button>
-              </Center>
-            )}
-          </Box>
-        )}
+                  {e.icon}
+                </ActionIcon>
+              </Flex>
+            </Paper>
+          ))}
+        </Group>
+
+        <Box my={"md"}>
+          {investasi.sisaLembar === "0" ||
+          Number(investasi.MasterPencarianInvestor.name) -
+            moment(new Date()).diff(new Date(investasi.countDown), "days") <=
+            0 ? (
+            <Center mb={"md"}>
+              <Button disabled radius={50} variant="transparent">
+                Investasi Telah Ditutup
+              </Button>
+            </Center>
+          ) : (
+            <Box>
+              {loginUserId === investasi.authorId ? (
+                <Center mb={"md"}>
+                  <Button disabled radius={50}>
+                    Investasi Ini Milik Anda
+                  </Button>
+                </Center>
+              ) : (
+                <Center mb={"md"}>
+                  <Button
+                    loaderPosition="center"
+                    loading={isLoadingButton}
+                    w={"100%"}
+                    radius={50}
+                    bg={MainColor.yellow}
+                    color="yellow"
+                    c={"black"}
+                    onClick={() => {
+                      onSubmit();
+                    }}
+                  >
+                    Beli Saham
+                  </Button>
+                </Center>
+              )}
+            </Box>
+          )}
+        </Box>
       </Stack>
     </>
   );

src/app_modules/investasi/detail_berita/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,9 @@ export default function LayoutDetailBeritaInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentGlobal_HeaderTamplate title="Detail Berita" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Berita" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/detail_berita/view.tsx

@@ -5,6 +5,7 @@ import { Model_Berita_Investasi } from "../model/model_investasi";
 import { useState } from "react";
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import moment from "moment";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailBeritaInvestasi({
   dataBerita,
@@ -14,17 +15,42 @@ export default function DetailBeritaInvestasi({
   const [berita, setBerita] = useState(dataBerita);
   return (
     <>
-      <Stack spacing={"lg"}>
+      <Stack
+        spacing={"lg"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          padding: "15px",
+          borderRadius: "10px",
+          color: "white",
+        }}
+      >
         <Stack spacing={0}>
-          <Title>{berita.title}</Title>
-          <Text fz={12}>{moment(berita.createdAt).format("lll")}</Text>
+          <Title order={4} align="center">
+            {berita.title}
+          </Title>
+          <Text align="center" fz={12}>
+            {moment(berita.createdAt).format("lll")}
+          </Text>
         </Stack>
-        <AspectRatio ratio={16 / 9}>
+
+        <AspectRatio ratio={1 / 1} mx={"sm"} mah={250}>
           <Image
+            alt=""
+            src={RouterInvestasi.api_gambar + `${berita.imagesId}`}
+            radius={"sm"}
+            height={250}
+            width={"100%"}
+          />
+        </AspectRatio>
+
+        {/* <AspectRatio ratio={16 / 9}>
+          <Image
+            radius={"sm"}
             src={RouterInvestasi.api_gambar + `${berita.imagesId}`}
             alt=""
           />
-        </AspectRatio>
+        </AspectRatio> */}
         <Text>{berita.deskripsi}</Text>
       </Stack>
     </>

src/app_modules/investasi/detail_dokumen/view.tsx

@@ -7,6 +7,7 @@ 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";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailDokumenInvestasi({
   dataInvestasi,
@@ -17,35 +18,44 @@ export default function DetailDokumenInvestasi({
   return (
     <>
       {!_.isEmpty(dokumen.DokumenInvestasi) ? (
-       dokumen.DokumenInvestasi.map((e) => (
-        <Link 
-        key={e.id}
-        href={`/file/${e.url}`}
-        target="_blank"
-        style={{ textDecorationLine: "none" }}
-      >
-        <Paper w={"100%"} h={50} bg={"gray"} mb={"md"}>
-          <Grid
-            align="center"
-            justify="center"
-            h={50}
-            px={"sm"}
-            onClick={() => ""}
+        dokumen.DokumenInvestasi.map((e) => (
+          <Link
+            key={e.id}
+            href={`/file/${e.url}`}
+            target="_blank"
+            style={{ textDecorationLine: "none" }}
           >
-            <Grid.Col span={10}>
-              <Text>{e.title}</Text>
-            </Grid.Col>
-            <Grid.Col span={2}>
-              <Center>
-                <IconChevronRight />
-              </Center>
-            </Grid.Col>
-          </Grid>
-        </Paper>
-      </Link>
-       ))
+            <Paper
+              style={{
+                padding: "15px",
+                backgroundColor: AccentColor.darkblue,
+                border: `2px solid ${AccentColor.blue}`,
+                borderRadius: "10px",
+                color: "white",
+                marginBottom: "15px",
+              }}
+            >
+              <Grid
+                align="center"
+                justify="center"
+                h={50}
+                px={"sm"}
+                onClick={() => ""}
+              >
+                <Grid.Col span={10}>
+                  <Text>{e.title}</Text>
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Center>
+                    <IconChevronRight />
+                  </Center>
+                </Grid.Col>
+              </Grid>
+            </Paper>
+          </Link>
+        ))
       ) : (
-       <ComponentGlobal_IsEmptyData/>
+        <ComponentGlobal_IsEmptyData />
       )}
     </>
   );