Merge pull request #277 from bipproduction/Nico/05-feb-25

API ADMIN DASHBOARD DONASI

src/app/api/admin/donasi/[status]/route.ts

@@ -0,0 +1,152 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { data } from "autoprefixer";
+import _, { take } from "lodash";
+import moment from "moment";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request,
+    { params }: { params: { status: string } }) {
+    const method = request.method;
+    if (method !== "GET") {
+        return NextResponse.json({
+            succes: false,
+            message: "Method not allowed"
+        },
+            { status: 405 }
+        );
+    }
+
+    const { status } = params;
+    const { searchParams } = new URL(request.url);
+    const search = searchParams.get("search");
+    const page = searchParams.get("page");
+    const takeData = 10;
+    const skipData = Number(page) * takeData - takeData;
+
+    try {
+        let fixData;
+        const fixStatus = _.startCase(status);
+        
+
+        if (!page && !search) {
+            fixData = await prisma.donasi.findMany({
+                orderBy: {
+                    updatedAt: "desc",
+                },
+                where: {
+                    active: true,
+                    DonasiMaster_Status: {
+                        name: fixStatus
+                    }
+                },
+                include: {
+                    Author: {
+                        select: {
+                            id: true,
+                            username: true,
+                            Profile: {
+                                select: {
+                                    name: true
+                                }
+                            }
+                        }
+                    },
+                    DonasiMaster_Status: true,
+                    DonasiMaster_Ketegori: true,
+                    DonasiMaster_Durasi: true
+                }
+            })
+        } else if (!page && search) {
+            fixData = await prisma.donasi.findMany({
+                orderBy: {
+                    updatedAt: "desc"
+                },
+                where: {
+                    active: true,
+                    DonasiMaster_Status: {
+                        name: fixStatus
+                    },
+                    title: {
+                        contains: search,
+                        mode: "insensitive"
+                    }
+                },
+                include: {
+                    Author: {
+                        select: {
+                            id: true,
+                            username: true,
+                            Profile: {
+                                select: {
+                                    name: true
+                                }
+                            }
+                        }
+                    },
+                    DonasiMaster_Status: true,
+                    DonasiMaster_Ketegori: true,
+                    DonasiMaster_Durasi: true
+                }
+            })
+        } else if (page && !search) {
+            const data = await prisma.donasi.findMany({
+                take: takeData,
+                skip: skipData,
+                orderBy: [
+                    {
+                        publishTime: "desc"
+                    }
+                ],
+                where: {
+                    active: true,
+                    DonasiMaster_Status: {
+                        name: fixStatus
+                    }
+                },
+                include: {
+                    Author: true,
+                    imageDonasi: true,
+                    DonasiMaster_Status: true,
+                    DonasiMaster_Ketegori: true,
+                    DonasiMaster_Durasi: true
+                }
+            })
+
+            const nCount = await prisma.donasi.count({
+                where: {
+                    active: true,
+                    DonasiMaster_Status: {
+                        name: fixStatus
+                    },
+                }
+            })
+
+            console.log("data >", data)
+            fixData = {
+                data: data,
+                nCount: _.ceil(nCount / takeData)
+            }
+        }
+
+        return NextResponse.json({
+            success: true,
+            message: "Success",
+            data: fixData
+        },
+            { status: 200 }
+        )
+
+    } catch (error) {
+        backendLogger.error("Error geta data table donasi event dashboard>>", error)
+        return NextResponse.json({
+            success: false,
+            message: "Failed get data table donasi dashboard",
+            reason: (error as Error).message
+        },
+            { status: 500 }
+        );
+    } finally {
+        await prisma.$disconnect();
+    }
+}

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

@@ -2,11 +2,11 @@ import { AdminDonasi_TablePublish } from "@/app_modules/admin/donasi";
 import adminDonasi_getListPublish from "@/app_modules/admin/donasi/fun/get/get_list_publish";
 
 export default async function Page() {
-    const listPublish = await adminDonasi_getListPublish({
+    // const listPublish = await adminDonasi_getListPublish({
-      page: 1,
+    //   page: 1,
-    });
+    // });
     // console.log(listPublish)
     return<>
-    <AdminDonasi_TablePublish listPublish={listPublish as any}/>
+    <AdminDonasi_TablePublish />
     </>
 }

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

@@ -2,11 +2,11 @@ import { AdminDonasi_TableReject } from "@/app_modules/admin/donasi";
 import adminDonasi_getListReject from "@/app_modules/admin/donasi/fun/get/get_list_reject";
 
 export default async function Page() {
-  const dataReject = await adminDonasi_getListReject({ page: 1 });
+  // const dataReject = await adminDonasi_getListReject({ page: 1 });
   // console.log(dataReject)
   return (
     <>
-      <AdminDonasi_TableReject dataReject={dataReject as any} />
+      <AdminDonasi_TableReject />
     </>
   );
 }

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

@@ -2,7 +2,7 @@ import { AdminDonasi_TableReview } from "@/app_modules/admin/donasi";
 import adminDonasi_getListReview from "@/app_modules/admin/donasi/fun/get/get_list_review";
 
 export default async function Page() {
-  const listReview = await adminDonasi_getListReview({page: 1});
+  // const listReview = await adminDonasi_getListReview({page: 1});
   // console.log(listReview);
-  return <AdminDonasi_TableReview listReview={listReview as any} />;
+  return <AdminDonasi_TableReview  />;
 }

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

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

src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts

@@ -1,8 +1,9 @@
 export {
-    apiGetDonasiStatusCountDashboard,
+    apiGetAdminDonasiStatusCountDashboard,
-    apiGetDonasiKategoriCountDashboard
+    apiGetAdminDonasiKategoriCountDashboard,
+    apiGetAdminDonasiByStatus
 };
-const apiGetDonasiStatusCountDashboard = async ({ name }:
+const apiGetAdminDonasiStatusCountDashboard = async ({ name }:
     { name: "Publish" | "Review" | "Reject" }) => {
     const { token } = await fetch("/api/get-cookie").then((res) => res.json());
     if (!token) return await token.json().catch(() => null);
@@ -19,7 +20,7 @@ const apiGetDonasiStatusCountDashboard = async ({ name }:
     return await response.json().catch(() => null);
 };
 
-const apiGetDonasiKategoriCountDashboard = async () => {
+const apiGetAdminDonasiKategoriCountDashboard = async () => {
     const { token } = await fetch("/api/get-cookie").then((res) => res.json());
     if (!token) return await token.json().catch(() => null);
 
@@ -34,3 +35,34 @@ const apiGetDonasiKategoriCountDashboard = async () => {
     });
     return await response.json().catch(() => null);
 }
+
+const apiGetAdminDonasiByStatus = async ({
+    status,
+    page,
+    search }: {
+        status: "Publish" | "Review" | "Reject",
+        page: string;
+        search: string;
+    }) => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    console.log("Ini token", token)
+    console.log("Ini Page", page)
+    console.log("Ini search", search)
+    const isPage = page ? `?page=${page}` : "";
+    const isSearch = search ? `&search=${search}` : "";
+    const response = await fetch(
+        `/api/admin/donasi/${status}${isPage}${isSearch}`,
+        {
+            headers: {
+                "Content-Type": "application/json",
+                Accept: "application/json",
+                "Access-Control-Allow-Origin": "*",
+                Authorization: `Bearer ${token}`
+            }
+        }
+    )
+    console.log("Ini response", response)
+    return await response.json().catch(() => null);
+}

src/app_modules/admin/donasi/main/index.tsx

@@ -25,7 +25,8 @@ import { clientLogger } from "@/util/clientLogger";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import global_limit from "@/app/lib/limit";
 import { useShallowEffect } from "@mantine/hooks";
-import { apiGetDonasiKategoriCountDashboard, apiGetDonasiStatusCountDashboard } from "../lib/api_fetch_admin_donasi";
+import { apiGetAdminDonasiKategoriCountDashboard, apiGetAdminDonasiStatusCountDashboard } from "../lib/api_fetch_admin_donasi";
+
 
 export default function AdminDonasi_Main({
   // countPublish,
@@ -62,7 +63,7 @@ export default function AdminDonasi_Main({
   }
   async function onLoadCountPublish() {
     try {
-      const response = await apiGetDonasiStatusCountDashboard({
+      const response = await apiGetAdminDonasiStatusCountDashboard({
         name: "Publish",
       })
 
@@ -75,7 +76,7 @@ export default function AdminDonasi_Main({
   }
   async function onLoadCountReview() {
     try {
-      const response = await apiGetDonasiStatusCountDashboard({
+      const response = await apiGetAdminDonasiStatusCountDashboard({
         name: "Review",
       })
       if (response) {
@@ -87,7 +88,7 @@ export default function AdminDonasi_Main({
   }
   async function onLoadCountReject() {
     try {
-      const response = await apiGetDonasiStatusCountDashboard({
+      const response = await apiGetAdminDonasiStatusCountDashboard({
         name: "Reject",
       })
       if (response) {
@@ -99,7 +100,7 @@ export default function AdminDonasi_Main({
   }
   async function onLoadCountKategori() {
     try {
-      const response = await apiGetDonasiKategoriCountDashboard()
+      const response = await apiGetAdminDonasiKategoriCountDashboard()
       if (response) {
         setCountKategori(response.data);
       }

src/app_modules/admin/donasi/sub_menu/table_publish.tsx

@@ -12,6 +12,7 @@ import {
   ScrollArea,
   Stack,
   Table,
+  Text,
   TextInput,
   Title
 } from "@mantine/core";
@@ -23,94 +24,120 @@ import adminDonasi_getListPublish from "../fun/get/get_list_publish";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { useShallowEffect } from "@mantine/hooks";
+import { clientLogger } from "@/util/clientLogger";
+import { apiGetAdminDonasiByStatus } from "../lib/api_fetch_admin_donasi";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function AdminDonasi_TablePublish({
+export default function AdminDonasi_TablePublish() {
-  listPublish,
-}: {
-  listPublish: any;
-}) {
   return (
     <>
       <Stack h={"100%"}>
         <ComponentAdminGlobal_HeaderTamplate name="Donasi" />
-        <TableStatus listPublish={listPublish as any} />
+        <TableStatus />
       </Stack>
     </>
   );
 }
 
-function TableStatus({ listPublish }: { listPublish: any }) {
+function TableStatus() {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
   const [idData, setIdData] = useState("");
 
-  const [data, setData] = useState<MODEL_DONASI[]>(listPublish.data);
+  const [data, setData] = useState<MODEL_DONASI[] | null>(null);
-  const [isNPage, setNPage] = useState(listPublish.nPage);
+  const [isNPage, setNPage] = useState<number>(1);
   const [isActivePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
 
-  async function onSearch(s: string) {
+  useShallowEffect(() => {
-    setSearch(s);
+    const loadInitialData = async () => {
-    const loadData = await adminDonasi_getListPublish({
+      try {
-      page: 1,
+        const response = await apiGetAdminDonasiByStatus({
-      search: s,
+          status: "Publish",
-    });
+          page: `${isActivePage}`,
-    setData(loadData.data as any);
+          search: isSearch
-    setNPage(loadData.nPage);
+        })
+
+        if (response?.success && response?.data.data) {
+          setData(response.data.data);
+          setNPage(response.data.nPage || 1);
+        } else {
+          console.error("Invalid data format recieved:", response);
+          setData([]);
+        }
+      } catch (error) {
+        clientLogger.error("Invalid data format recieved:", error);
+        setData([]);
+      }
+    }
+    loadInitialData();
+  }, [isActivePage, isSearch])
+
+  const onSearch = (searchTerm: string) => {
+    setSearch(searchTerm);
+    setActivePage(1);
   }
 
-  async function onPageClick(p: any) {
+  const onPageClick = (page: number) => {
-    setActivePage(p);
+    setActivePage(page);
-    const loadData = await adminDonasi_getListPublish({
+  }
-      search: isSearch,
+  const renderTableBody = () => {
-      page: p,
+    if (!Array.isArray(data) || data.length === 0) {
-    });
+      return (
-    setData(loadData.data as any);
+        <tr>
-    setNPage(loadData.nPage);
+          <td colSpan={12}>
+            <Center>
+              <Text color="gray">Tidak ada data</Text>
+            </Center>
+          </td>
+        </tr>
+      )
+    }
+    return data.map((e, i) => (
+      <tr key={i}>
+        <td>
+          <Center c={AccentColor.white}>{e.title}</Center>
+        </td>
+        <td>
+          <Center c={AccentColor.white}>
+            <ComponentGlobal_TampilanRupiah nominal={+e.target} />
+          </Center>
+        </td>
+        <td>
+          <Center c={AccentColor.white}>
+            <ComponentGlobal_TampilanRupiah nominal={+e.terkumpul} />
+          </Center>
+        </td>
+        <td>
+          <Center c={AccentColor.white}>{e.DonasiMaster_Ketegori.name}</Center>
+        </td>
+        <td>
+          <Center c={AccentColor.white}>{e.DonasiMaster_Durasi.name} hari</Center>
+        </td>
+        <td>
+          <Center>
+            <Button
+              loaderPosition="center"
+              loading={isLoading && e?.id === idData ? true : false}
+              style={{ backgroundColor: MainColor.green, }}
+              c={AccentColor.white}
+              leftIcon={<IconEyeCheck />}
+              radius={"xl"}
+              onClick={() => {
+                setLoading(true);
+                setIdData(e?.id);
+                router.push(RouterAdminDonasi_OLD.detail_publish + `${e.id}`);
+              }}
+            >
+              Tampilkan
+            </Button>
+          </Center>
+        </td>
+      </tr>
+    ));
   }
 
-  const TableRows = data.map((e, i) => (
-    <tr key={i}>
-      <td>
-        <Center c={AccentColor.white}>{e.title}</Center>
-      </td>
-      <td>
-        <Center c={AccentColor.white}>
-          <ComponentGlobal_TampilanRupiah nominal={+e.target} />
-        </Center>
-      </td>
-      <td>
-        <Center c={AccentColor.white}>
-          <ComponentGlobal_TampilanRupiah nominal={+e.terkumpul} />
-        </Center>
-      </td>
-      <td>
-        <Center c={AccentColor.white}>{e.DonasiMaster_Ketegori.name}</Center>
-      </td>
-      <td>
-        <Center c={AccentColor.white}>{e.DonasiMaster_Durasi.name} hari</Center>
-      </td>
-      <td>
-        <Center>
-          <Button
-            loaderPosition="center"
-            loading={isLoading && e?.id === idData ? true : false}
-            style={{ backgroundColor: MainColor.green,  }}
-            c={AccentColor.white}
-            leftIcon={<IconEyeCheck />}
-            radius={"xl"}
-            onClick={() => {
-              setLoading(true);
-              setIdData(e?.id);
-              router.push(RouterAdminDonasi_OLD.detail_publish + `${e.id}`);
-            }}
-          >
-            Tampilkan
-          </Button>
-        </Center>
-      </td>
-    </tr>
-  ));
 
   return (
     <>
@@ -121,13 +148,13 @@ function TableStatus({ listPublish }: { listPublish: any }) {
           color={AdminColor.softBlue}
           component={
             <TextInput
-            icon={<IconSearch size={20} />}
+              icon={<IconSearch size={20} />}
-            radius={"xl"}
+              radius={"xl"}
-            placeholder="Masukan judul"
+              placeholder="Masukan judul"
-            onChange={(val) => {
+              onChange={(val) => {
-              onSearch(val.currentTarget.value);
+                onSearch(val.currentTarget.value);
-            }}
+              }}
-          />
+            />
           }
         />
         {/* <Group
@@ -147,52 +174,57 @@ function TableStatus({ listPublish }: { listPublish: any }) {
           />
         </Group> */}
 
-        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
+        {!data ? (
-          <ScrollArea w={"100%"} h={"90%"}>
+          <CustomSkeleton height={"80vh"} width={"100%"} />
-            <Table
+        ) : (
-              verticalSpacing={"md"}
+          <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
-              horizontalSpacing={"md"}
+            <ScrollArea w={"100%"} h={"90%"}>
-              p={"md"}
+              <Table
-              w={1500}
+                verticalSpacing={"md"}
+                horizontalSpacing={"md"}
+                p={"md"}
+                w={1500}
 
-            >
+              >
-              <thead>
+                <thead>
-                <tr>
+                  <tr>
-                  <th>
+                    <th>
-                    <Center c={AccentColor.white}>Judul</Center>
+                      <Center c={AccentColor.white}>Judul</Center>
-                  </th>
+                    </th>
-                  <th>
+                    <th>
-                    <Center c={AccentColor.white}>Target</Center>
+                      <Center c={AccentColor.white}>Target</Center>
-                  </th>
+                    </th>
-                  <th>
+                    <th>
-                    <Center c={AccentColor.white}>Terkumpul</Center>
+                      <Center c={AccentColor.white}>Terkumpul</Center>
-                  </th>
+                    </th>
-                  <th>
+                    <th>
-                    <Center c={AccentColor.white}>Ketegori</Center>
+                      <Center c={AccentColor.white}>Ketegori</Center>
-                  </th>
+                    </th>
-                  <th>
+                    <th>
-                    <Center c={AccentColor.white}>Durasi</Center>
+                      <Center c={AccentColor.white}>Durasi</Center>
-                  </th>
+                    </th>
-                  <th>
+                    <th>
-                    <Center c={AccentColor.white}>Aksi</Center>
+                      <Center c={AccentColor.white}>Aksi</Center>
-                  </th>
+                    </th>
-                </tr>
+                  </tr>
-              </thead>
+                </thead>
-              <tbody>{TableRows}</tbody>
+                <tbody>{renderTableBody()}</tbody>
-            </Table>
+              </Table>
-          </ScrollArea>
+            </ScrollArea>
-          {/* <ScrollArea>
+            {/* <ScrollArea>
           </ScrollArea> */}
-          <Center mt={"xl"}>
+            <Center mt={"xl"}>
-            <Pagination
+              <Pagination
-              value={isActivePage}
+                value={isActivePage}
-              total={isNPage}
+                total={isNPage}
-              onChange={(val) => {
+                onChange={(val) => {
-                onPageClick(val);
+                  onPageClick(val);
-              }}
+                }}
-            />
+              />
-          </Center>
+            </Center>
-        </Paper>
+          </Paper>
+        )}
+
       </Stack>
     </>
   );

src/app_modules/admin/donasi/sub_menu/table_reject.tsx

@@ -18,7 +18,7 @@ import {
   TextInput,
   Title
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconEyeEdit, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -26,90 +26,118 @@ import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import adminDonasi_getListReject from "../fun/get/get_list_reject";
 import { IconEyeCheck } from "@tabler/icons-react";
+import { clientLogger } from "@/util/clientLogger";
+import { apiGetAdminDonasiByStatus } from "../lib/api_fetch_admin_donasi";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function AdminDonasi_TableReject({
+export default function AdminDonasi_TableReject() {
-  dataReject,
-}: {
-  dataReject: any;
-}) {
   return (
     <>
       <Stack h={"100%"}>
         <ComponentAdminGlobal_HeaderTamplate name="Donasi" />
-        <TableStatus dataReject={dataReject} />
+        <TableStatus />
       </Stack>
     </>
   );
 }
 
-function TableStatus({ dataReject }: { dataReject: any }) {
+function TableStatus() {
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
   const [isLoading, setLoading] = useState(false);
   const [idData, setIdData] = useState("");
-  const [data, setData] = useState<MODEL_DONASI[]>(dataReject.data);
+  const [data, setData] = useState<MODEL_DONASI[] | null>(null);
-  const [isNPage, setNPage] = useState(dataReject.nPage);
+  const [isNPage, setNPage] = useState<number>(1);
   const [isActivePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
 
-  async function onSearch(s: string) {
+
-    setSearch(s);
+  useShallowEffect(() => {
-    const loadData = await adminDonasi_getListReject({
+    const loadInitialData = async () => {
-      page: 1,
+      try {
-      search: s,
+        const response = await apiGetAdminDonasiByStatus({
-    });
+          status: "Reject",
-    setData(loadData.data as any);
+          page: `${isActivePage}`,
-    setNPage(loadData.nPage);
+          search: isSearch
+        })
+
+        if (response?.success && response?.data.data) {
+          setData(response.data.data);
+          setNPage(response.data.nPage || 1);
+        } else {
+          console.error("Invalid data format recieved:", response);
+          setData([]);
+        }
+      } catch (error) {
+        clientLogger.error("Invalid data format recieved:", error);
+        setData([]);
+      }
+    }
+    loadInitialData();
+  }, [isActivePage, isSearch])
+
+
+  const onSearch = (searchTerm: string) => {
+    setSearch(searchTerm);
+    setActivePage(1);
   }
 
-  async function onPageClick(p: any) {
+  const onPageClick = (page: number) => {
-    setActivePage(p);
+    setActivePage(page);
-    const loadData = await adminDonasi_getListReject({
-      search: isSearch,
-      page: p,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
   }
 
-  const TableRows = data.map((e, i) => (
+  const renderTableBody = () => {
-    <tr key={i}>
+    if (!Array.isArray(data) || data.length === 0) {
-      <td>
+      return (
-        <Center c={AccentColor.white}>{e?.Author?.username}</Center>
+        <tr>
-      </td>
+          <td colSpan={12}>
-      <td>
+            <Center>
-        <Center c={AccentColor.white}>{e?.title}</Center>
+              <Text color="gray">Tidak ada data</Text>
-      </td>
+            </Center>
-      <td>
+          </td>
-        <Center c={AccentColor.white}>
+        </tr>
-          <ComponentGlobal_TampilanRupiah color="black" nominal={+e.target} />
+      )
-        </Center>
+    }
-      </td>
+    return data.map((e, i) => (
-      <td>
+      <tr key={i}>
-        <Center c={AccentColor.white}>{e?.DonasiMaster_Ketegori.name}</Center>
+        <td>
-      </td>
+          <Center c={AccentColor.white}>{e?.Author?.username}</Center>
-      <td>
+        </td>
-        <Center c={AccentColor.white}>{e?.DonasiMaster_Durasi.name} hari</Center>
+        <td>
-      </td>
+          <Center c={AccentColor.white}>{e?.title}</Center>
-      <td>
+        </td>
-        <Center>
+        <td>
-          <Button
+          <Center c={AccentColor.white}>
-            style={{ backgroundColor: MainColor.green }}
+            <ComponentGlobal_TampilanRupiah  nominal={+e.target} />
-            color={AccentColor.white}
+          </Center>
-            leftIcon={<IconEyeCheck />}
+        </td>
-            radius={"xl"}
+        <td>
-            onClick={() =>
+          <Center c={AccentColor.white}>{e?.DonasiMaster_Ketegori.name}</Center>
-              router.push(RouterAdminDonasi_OLD.detail_reject + `${e.id}`)
+        </td>
-            }
+        <td>
-          >
+          <Center c={AccentColor.white}>{e?.DonasiMaster_Durasi.name} hari</Center>
-            Lihat Alasan
+        </td>
-          </Button>
+        <td>
-        </Center>
+          <Center>
+            <Button
+              style={{ backgroundColor: MainColor.green }}
+              color={AccentColor.white}
+              leftIcon={<IconEyeCheck />}
+              radius={"xl"}
+              onClick={() =>
+                router.push(RouterAdminDonasi_OLD.detail_reject + `${e.id}`)
+              }
+            >
+              Lihat Alasan
+            </Button>
+          </Center>
+
+          {/* <ModalReject opened={opened} close={close} /> */}
+        </td>
+      </tr>
+    ));
+  }
 
-        {/* <ModalReject opened={opened} close={close} /> */}
-      </td>
-    </tr>
-  ));
 
   return (
     <>
@@ -120,13 +148,13 @@ function TableStatus({ dataReject }: { dataReject: any }) {
           color={AdminColor.softBlue}
           component={
             <TextInput
-            icon={<IconSearch size={20} />}
+              icon={<IconSearch size={20} />}
-            radius={"xl"}
+              radius={"xl"}
-            placeholder="Masukan judul"
+              placeholder="Masukan judul"
-            onChange={(val) => {
+              onChange={(val) => {
-              onSearch(val.currentTarget.value);
+                onSearch(val.currentTarget.value);
-            }}
+              }}
-          />
+            />
           }
         />
         {/* <Group
@@ -146,55 +174,60 @@ function TableStatus({ dataReject }: { dataReject: any }) {
           />
         </Group> */}
 
-        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
+        {!data ? (
-          <ScrollArea w={"100%"} h={"90%"}>
+          <CustomSkeleton height={"80vh"} width={"100%"} />
-            <Table
+        ) : (
-              verticalSpacing={"md"}
-              horizontalSpacing={"md"}
-              p={"md"}
-              w={1500}
 
-            >
+
-              <thead>
+          <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
-                <tr>
+            <ScrollArea w={"100%"} h={"90%"}>
-                  <th>
+              <Table
-                    <Center c={AccentColor.white}>Username</Center>
+                verticalSpacing={"md"}
-                  </th>
+                horizontalSpacing={"md"}
-                  <th>
+                p={"md"}
-                    <Center c={AccentColor.white}>Judul</Center>
+                w={1500}
-                  </th>
+
-                  <th>
+              >
-                    <Center c={AccentColor.white}>Target</Center>
+                <thead>
-                  </th>
+                  <tr>
-                  <th>
+                    <th>
-                    <Center c={AccentColor.white}>Ketegori</Center>
+                      <Center c={AccentColor.white}>Username</Center>
-                  </th>
+                    </th>
-                  <th>
+                    <th>
-                    <Center c={AccentColor.white}>Durasi</Center>
+                      <Center c={AccentColor.white}>Judul</Center>
-                  </th>
+                    </th>
-                  <th>
+                    <th>
-                    <Center c={AccentColor.white}>Alasan</Center>
+                      <Center c={AccentColor.white}>Target</Center>
-                  </th>
+                    </th>
-                </tr>
+                    <th>
-              </thead>
+                      <Center c={AccentColor.white}>Ketegori</Center>
-              <tbody>{TableRows}</tbody>
+                    </th>
-            </Table>
+                    <th>
-          </ScrollArea>
+                      <Center c={AccentColor.white}>Durasi</Center>
-          {/* <ScrollArea>
+                    </th>
+                    <th>
+                      <Center c={AccentColor.white}>Alasan</Center>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>{renderTableBody()}</tbody>
+              </Table>
+            </ScrollArea>
+            {/* <ScrollArea>
           </ScrollArea> */}
-          <Center mt={"xl"}>
+            <Center mt={"xl"}>
-            <Pagination
+              <Pagination
-              value={isActivePage}
+                value={isActivePage}
-              total={isNPage}
+                total={isNPage}
-              onChange={(val) => {
+                onChange={(val) => {
-                onPageClick(val);
+                  onPageClick(val);
-              }}
+                }}
-            />
+              />
-          </Center>
+            </Center>
-        </Paper>
+          </Paper>
+        )}
       </Stack>
-
+      {/* {data.map((e, i) => (
-      {data.map((e, i) => (
         <Modal
           key={e.id}
           opened={opened}
@@ -207,7 +240,7 @@ function TableStatus({ dataReject }: { dataReject: any }) {
             <Text>{i}</Text>
           </Stack>
         </Modal>
-      ))}
+      ))} */}
     </>
   );
 }

src/app_modules/admin/donasi/sub_menu/table_review.tsx

@@ -16,6 +16,7 @@ import {
   ScrollArea,
   Stack,
   Table,
+  Text,
   TextInput,
   Title,
 } from "@mantine/core";
@@ -28,28 +29,28 @@ import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamp
 import adminDonasi_getListReview from "../fun/get/get_list_review";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { apiGetAdminDonasiByStatus } from "../lib/api_fetch_admin_donasi";
+import { error } from "console";
+import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function AdminDonasi_TableReview({
+export default function AdminDonasi_TableReview() {
-  listReview,
-}: {
-  listReview: MODEL_DONASI[];
-}) {
   return (
     <>
       <Stack h={"100%"}>
         <ComponentAdminGlobal_HeaderTamplate name="Donasi" />
-        <TableStatus listReview={listReview} />
+        <TableStatus />
       </Stack>
     </>
   );
 }
 
-function TableStatus({ listReview }: { listReview: any }) {
+function TableStatus() {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
   const [idData, setIdData] = useState("");
-  const [data, setData] = useState<MODEL_DONASI[]>(listReview.data);
+  const [data, setData] = useState<MODEL_DONASI[] | null>(null);
-  const [isNPage, setNPage] = useState(listReview.nPage);
+  const [isNPage, setNPage] = useState<number>(1);
   const [isActivePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
 
@@ -61,80 +62,100 @@ function TableStatus({ listReview }: { listReview: any }) {
   const [isLoadingReload, setLoadingReload] = useState(false);
 
   useShallowEffect(() => {
-    if (isAdminDonasi_TriggerReview) {
+    loadInitialData();
-      setIsShowReload(true);
+  }, [isActivePage, isSearch]);
+
+  const loadInitialData = async () => {
+    try {
+      const response = await apiGetAdminDonasiByStatus({
+        status: "Review",
+        page: `${isActivePage}`,
+        search: isSearch
+      })
+      console.log("IniData", response)
+
+      if (response?.success && response?.data?.data) {
+        setData(response.data.data);
+        setNPage(response.data.nPage || 1);
+      } else {
+        console.error("Invalid data format received:", response);
+        setData([]);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data table publish", error);
+      setData([]);
     }
-  }, [isAdminDonasi_TriggerReview, setIsShowReload]);
+  }
-
   async function onLoadData() {
-    const loadData = await adminDonasi_getListReview({ page: 1 });
+    loadInitialData();
-
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
     setLoadingReload(false);
     setIsShowReload(false);
     setIsAdminDonasi_TriggerReview(false);
   }
 
-  async function onSearch(s: string) {
+  const onSearch = async (searchTerm: string) => {
-    setSearch(s);
+    setSearch(searchTerm);
-    const loadData = await adminDonasi_getListReview({
+    setActivePage(1);
-      page: 1,
-      search: s,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
   }
 
-  async function onPageClick(p: any) {
+  const onPageClick = (page: number) => {
-    setActivePage(p);
+    setActivePage(page);
-    const loadData = await adminDonasi_getListReview({
+  }
-      search: isSearch,
+
-      page: p,
+  const renderTableBody = () => {
-    });
+    if (!Array.isArray(data) || data.length === 0) {
-    setData(loadData.data as any);
+      return (
-    setNPage(loadData.nPage);
+        <tr>
+          <td colSpan={12}>
+            <Center>
+              <Text color="gray">Tidak ada data</Text>
+            </Center>
+          </td>
+        </tr>
+      )
+    }
+
+    return data.map((e, i) => (
+      <tr key={i}>
+        <td>
+          <Center c={AdminColor.white}>{e?.Author?.username}</Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white}>{e?.title}</Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white}>
+            <ComponentGlobal_TampilanRupiah nominal={+e.target} />
+          </Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white}>{e?.DonasiMaster_Ketegori.name}</Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white}>{e?.DonasiMaster_Durasi.name} hari</Center>
+        </td>
+        <td>
+          <Center>
+            <Button
+              loaderPosition="center"
+              loading={isLoading && e?.id == idData ? true : false}
+              style={{ backgroundColor: MainColor.green, color: AccentColor.white }}
+              leftIcon={<IconEyeCheck />}
+              radius={"xl"}
+              onClick={() => {
+                setLoading(true);
+                setIdData(e?.id);
+                router.push(RouterAdminDonasi_OLD.detail_review + `${e?.id}`);
+              }}
+            >
+              Tampilkan
+            </Button>
+          </Center>
+        </td>
+      </tr>
+    ));
   }
 
-  const TableRows = data.map((e, i) => (
-    <tr key={i}>
-      <td>
-        <Center>{e?.Author?.username}</Center>
-      </td>
-      <td>
-        <Center>{e?.title}</Center>
-      </td>
-      <td>
-        <Center>
-          <ComponentGlobal_TampilanRupiah color="black" nominal={+e.target} />
-        </Center>
-      </td>
-      <td>
-        <Center>{e?.DonasiMaster_Ketegori.name}</Center>
-      </td>
-      <td>
-        <Center>{e?.DonasiMaster_Durasi.name} hari</Center>
-      </td>
-      <td>
-        <Center>
-          <Button
-            loaderPosition="center"
-            loading={isLoading && e?.id == idData ? true : false}
-            style={{ backgroundColor: MainColor.green, color: AccentColor.white }}
-            leftIcon={<IconEyeCheck />}
-            radius={"xl"}
-            onClick={() => {
-              setLoading(true);
-              setIdData(e?.id);
-              router.push(RouterAdminDonasi_OLD.detail_review + `${e?.id}`);
-            }}
-          >
-            Tampilkan
-          </Button>
-        </Center>
-      </td>
-    </tr>
-  ));
 
   return (
     <>
@@ -142,7 +163,7 @@ function TableStatus({ listReview }: { listReview: any }) {
         {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Review"
-          color={AdminColor.orange}
+          color={AdminColor.softBlue}
           component={
             <TextInput
               icon={<IconSearch size={20} />}
@@ -170,74 +191,77 @@ function TableStatus({ listReview }: { listReview: any }) {
             }}
           />
         </Group> */}
+        {!data ? (
+          <CustomSkeleton height={"80vh"} width={"100%"} />
+        ) : (
+          <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
+            {isShowReload && (
+              <Affix position={{ top: rem(200) }} w={"100%"}>
+                <Center>
+                  <Button
+                    style={{
+                      transition: "0.5s",
+                      border: `1px solid ${AccentColor.skyblue}`,
+                    }}
+                    bg={AccentColor.blue}
+                    loaderPosition="center"
+                    loading={isLoadingReload}
+                    radius={"xl"}
+                    opacity={0.8}
+                    onClick={() => onLoadData()}
+                    leftIcon={<IconRefresh />}
+                  >
+                    Update Data
+                  </Button>
+                </Center>
+              </Affix>
+            )}
+            <ScrollArea w={"100%"} h={"90%"}>
+              <Table
+                verticalSpacing={"md"}
+                horizontalSpacing={"md"}
+                p={"md"}
+                w={1500}
+                h={"100%"}
+
+              >
+                <thead>
+                  <tr>
+                    <th>
+                      <Center c={AdminColor.white}>Username</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Judul</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Target</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Ketegori</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Durasi</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Aksi</Center>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>{renderTableBody()}</tbody>
+              </Table>
+            </ScrollArea>
+            <Center mt={"xl"}>
+              <Pagination
+                value={isActivePage}
+                total={isNPage}
+                onChange={(val) => {
+                  onPageClick(val);
+                }}
+              />
+            </Center>
+          </Paper>
+        )}
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
-          {isShowReload && (
-            <Affix position={{ top: rem(200) }} w={"100%"}>
-              <Center>
-                <Button
-                  style={{
-                    transition: "0.5s",
-                    border: `1px solid ${AccentColor.skyblue}`,
-                  }}
-                  bg={AccentColor.blue}
-                  loaderPosition="center"
-                  loading={isLoadingReload}
-                  radius={"xl"}
-                  opacity={0.8}
-                  onClick={() => onLoadData()}
-                  leftIcon={<IconRefresh />}
-                >
-                  Update Data
-                </Button>
-              </Center>
-            </Affix>
-          )}
-          <ScrollArea w={"100%"} h={"90%"}>
-            <Table
-              verticalSpacing={"md"}
-              horizontalSpacing={"md"}
-              p={"md"}
-              w={1500}
-              h={"100%"}
-              striped
-              highlightOnHover
-            >
-              <thead>
-                <tr>
-                  <th>
-                    <Center>Username</Center>
-                  </th>
-                  <th>
-                    <Center>Judul</Center>
-                  </th>
-                  <th>
-                    <Center>Target</Center>
-                  </th>
-                  <th>
-                    <Center>Ketegori</Center>
-                  </th>
-                  <th>
-                    <Center>Durasi</Center>
-                  </th>
-                  <th>
-                    <Center>Aksi</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>{TableRows}</tbody>
-            </Table>
-          </ScrollArea>
-          <Center mt={"xl"}>
-            <Pagination
-              value={isActivePage}
-              total={isNPage}
-              onChange={(val) => {
-                onPageClick(val);
-              }}
-            />
-          </Center>
-        </Paper>
       </Stack>
     </>
   );

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

@@ -30,26 +30,22 @@ import { useShallowEffect } from "@mantine/hooks";
 import { clientLogger } from "@/util/clientLogger";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function Admin_TablePublishInvestasi({
+export default function Admin_TablePublishInvestasi() {
-  dataInvestsi,
-}: {
-  dataInvestsi: MODEL_INVESTASI[];
-}) {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Investasi" />
-        <TableView listData={dataInvestsi} />
+        <TableView  />
         {/* <pre>{JSON.stringify(listPublish, null, 2)}</pre> */}
       </Stack>
     </>
   );
 }
 
-function TableView({ listData }: { listData: any }) {
+function TableView() {
   const router = useRouter();
-  const [data, setData] = useState<MODEL_INVESTASI[]>(listData.data);
+  const [data, setData] = useState<MODEL_INVESTASI[] | null>(null);
-  const [nPage, setNPage] = useState(listData.nPage);
+  const [nPage, setNPage] = useState<number>(1);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
   const [isLoading, setLoading] = useState(false);

src/middleware.ts

@@ -39,7 +39,7 @@ const middlewareConfig: MiddlewareConfig = {
     // ADMIN API
     // "/api/admin/event/*",
     // "/api/admin/investasi/*",
-    // "/api/admin/donasi/dashboard/*",
+    "/api/admin/donasi/*",
     // "/api/admin/voting/dashboard/*",
     // "/api/admin/job/dashboard/*",
     // "/api/admin/forum/dashboard/*",