fix: admin forum

deskripsi:
- perubahan dari use server menjadi API
next.config.js
src/app/api/admin/forum/[id]/report-komentar/route.ts
src/app/api/admin/forum/[id]/report-posting/route.ts
src/app/api/admin/forum/komentar/[id]/route.ts
src/app/dev/admin/forum/sub-detail/report-komentar/[id]/page.tsx
src/app/dev/admin/forum/sub-detail/report-posting/[id]/page.tsx
src/app_modules/admin/forum/lib/api_fetch_admin_forum.ts
src/app_modules/admin/forum/sub_detail/hasil_report_komentar.tsx
src/app_modules/admin/forum/sub_detail/hasil_report_posting.tsx

No Issue

next.config.js

@@ -5,23 +5,23 @@ const nextConfig = {
     serverActions: true,
   },
   output: "standalone",
+  staticPageGenerationTimeout: 180, // tingkatkan menjadi 3 menit
   // eslint: {
   //   ignoreDuringBuilds: true,
   // },
-  async headers() {
+  // async headers() {
-    return [
+  //   return [
-      {
+  //     {
-        source: "/(.*)",
+  //       source: "/(.*)",
-        headers: [
+  //       headers: [
-          {
+  //         {
-            key: "Cache-Control",
+  //           key: "Cache-Control",
-            value: "no-store, max-age=0",
+  //           value: "no-store, max-age=0",
-          },
+  //         },
-        ],
+  //       ],
-      },
+  //     },
-    ];
+  //   ];
-  },
+  // },
-  
 };
 
 module.exports = nextConfig;

src/app/api/admin/forum/[id]/report-komentar/route.ts

@@ -3,103 +3,107 @@ import _ from "lodash";
 import { NextResponse } from "next/server";
 import prisma from "@/lib/prisma";
 
-
+export async function GET(
-export async function GET(request: Request,
+  request: Request,
-    { params }: { params: { id: string } }
+  { params }: { params: { id: string } }
 ) {
-    const { searchParams } = new URL(request.url);
+  const { searchParams } = new URL(request.url);
-    const search = searchParams.get('search');
+  const search = searchParams.get("search");
-    const page = searchParams.get('page');
+  const page = searchParams.get("page");
-    const takeData = 10;
+  const takeData = 10;
-    const skipData = Number(page) * takeData - takeData;
+  const skipData = Number(page) * takeData - takeData;
 
-    try {
+  try {
-        let fixData;
+    let fixData;
-        const { id } = params;
+    const { id } = params;
-        const komentarId = id
+    const komentarId = id;
 
-        if (!page) {
+    if (!page) {
-            fixData = await prisma.forum_ReportKomentar.findMany({
+      fixData = await prisma.forum_ReportKomentar.findMany({
-
+        orderBy: {
-                orderBy: {
+          createdAt: "desc",
-                    createdAt: "desc"
-                },
-                where: {
-                    forum_KomentarId: komentarId,
-                },
-                select: {
-                    id: true,
-                    isActive: true,
-                    createdAt: true,
-                    deskripsi: true,
-                    ForumMaster_KategoriReport: true,
-                    User: {
-                        select: {
-                            Profile: {
-                                select: {
-                                    id: true,
-                                    name: true,
-                                },
-                            },
-                        },
-                    },
-                },
-            });
-        } else {
-            const data = await prisma.forum_ReportKomentar.findMany({
-                take: takeData,
-                skip: skipData,
-                orderBy: {
-                    createdAt: "desc"
-                },
-                where: {
-                    forum_KomentarId: komentarId,
-                },
-                select: {
-                    id: true,
-                    isActive: true,
-                    createdAt: true,
-                    deskripsi: true,
-                    ForumMaster_KategoriReport: true,
-                    User: {
-                        select: {
-                            Profile: {
-                                select: {
-                                    id: true,
-                                    name: true,
-                                },
-                            },
-                        },
-                    },
-                },
-            });
-
-            const nCount = await prisma.forum_ReportKomentar.count({
-                where: {
-                    forum_KomentarId: komentarId,
-                }
-            })
-
-            fixData = {
-                data: data,
-                nPage: _.ceil(nCount / takeData)
-            }
-        }
-
-        return NextResponse.json({
-            success: true,
-            message: "Success get detail data report komentar",
-            data: fixData
         },
-            { status: 200 }
+        where: {
-        )
+          forum_KomentarId: komentarId,
-    } catch (error) {
+        },
-        backendLogger.error("Error get detail data report komentar >>", error);
+        select: {
-        return NextResponse.json({
+          id: true,
-            success: false,
+          isActive: true,
-            message: "Error get detail data report komentar",
+          createdAt: true,
-            reason: (error as Error).message
+          deskripsi: true,
-        }, { status: 500 })
+          ForumMaster_KategoriReport: true,
+          User: {
+            select: {
+              username: true,
+              Profile: {
+                select: {
+                  id: true,
+                  name: true,
+                },
+              },
+            },
+          },
+        },
+      });
+    } else {
+      const data = await prisma.forum_ReportKomentar.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          forum_KomentarId: komentarId,
+        },
+        select: {
+          id: true,
+          isActive: true,
+          createdAt: true,
+          deskripsi: true,
+          ForumMaster_KategoriReport: true,
+          User: {
+            select: {
+              username: true,
+              Profile: {
+                select: {
+                  id: true,
+                  name: true,
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const nCount = await prisma.forum_ReportKomentar.count({
+        where: {
+          forum_KomentarId: komentarId,
+        },
+      });
+
+      fixData = {
+        data: data,
+        nPage: _.ceil(nCount / takeData),
+      };
     }
 
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Success get detail data report komentar",
+        data: fixData,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error get detail data report komentar >>", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error get detail data report komentar",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
 }

src/app/api/admin/forum/[id]/report-posting/route.ts

@@ -85,7 +85,7 @@ export async function GET(request: Request,
       });
       const nCount = await prisma.forum_ReportPosting.count({
         where: {
-          isActive: true,
+          forum_PostingId: postingId,
         },
       });
 

src/app/api/admin/forum/komentar/[id]/route.ts

@@ -0,0 +1,45 @@
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    const data = await prisma.forum_Komentar.findFirst({
+      where: {
+        id: id,
+      },
+      select: {
+        id: true,
+        isActive: true,
+        authorId: true,
+        Author: {
+          select: {
+            id: true,
+            username: true,
+          },
+        },
+        komentar: true,
+        forum_PostingId: true,
+      },
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Success get data komentar",
+      data: data,
+    });
+  } catch (error) {
+    console.error("Error get data komentar", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error get data komentar",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/dev/admin/forum/sub-detail/report-komentar/[id]/page.tsx

@@ -1,23 +1,21 @@
 import { AdminForum_HasilReportKomentar } from "@/app_modules/admin/forum";
-import { adminForum_getListReportKomentarbyId } from "@/app_modules/admin/forum/fun/get/get_list_report_komentar_by_id";
-import adminForum_funGetOneKomentarById from "@/app_modules/admin/forum/fun/get/get_one_komentar_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  let komentarId = params.id;
+  // let komentarId = params.id;
-  const listReport = await adminForum_getListReportKomentarbyId({
+  // const listReport = await adminForum_getListReportKomentarbyId({
-    komentarId: komentarId,
+  //   komentarId: komentarId,
-    page: 1,
+  //   page: 1,
-  });
+  // });
-  const dataKomentar = await adminForum_funGetOneKomentarById({
+  // const dataKomentar = await adminForum_funGetOneKomentarById({
-    komentarId: komentarId,
+  //   komentarId: komentarId,
-  });
+  // });
 
   return (
     <>
       <AdminForum_HasilReportKomentar
-        listReport={listReport}
+        // listReport={listReport}
-        komentarId={komentarId}
+        // komentarId={komentarId}
-        dataKomentar={dataKomentar as any}
+        // dataKomentar={dataKomentar as any}
       />
     </>
   );

src/app/dev/admin/forum/sub-detail/report-posting/[id]/page.tsx

@@ -3,19 +3,19 @@ import { adminForum_getListReportPostingById } from "@/app_modules/admin/forum/f
 import { adminForum_getOnePostingById } from "@/app_modules/admin/forum/fun/get/get_one_posting_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  let postingId = params.id;
+  // let postingId = params.id;
-  const listReport = await adminForum_getListReportPostingById({
+  // const listReport = await adminForum_getListReportPostingById({
-    postingId: postingId,
+  //   postingId: postingId,
-    page: 1,
+  //   page: 1,
-  });
+  // });
 
-  const dataPosting = await adminForum_getOnePostingById(postingId);
+  // const dataPosting = await adminForum_getOnePostingById(postingId);
 
   return (
     <>
       <AdminForum_HasilReportPosting
-        dataPosting={dataPosting as any}
+        // dataPosting={dataPosting as any}
-        listReport={listReport}
+        // listReport={listReport}
       />
     </>
   );

src/app_modules/admin/forum/lib/api_fetch_admin_forum.ts

@@ -1,13 +1,15 @@
 export {
-  apiGetAdminForumPublishCountDasboard,
+  apiAdminGetListKomentarForumById as apiAdminGetKomentarForumById,
-  apiGetAdminCountForumReportPosting,
+  apiAdminGetOneKomentarForumById,
-  apiGetAdminCountForumReportKomentar,
-  apiGetAdminForumReportPosting,
-  apiGetAdminForumReportKomentar,
-  apiGetAdminForumPublish,
-  apiGetAdminHasilReportPosting,
-  apiAdminGetKomentarForumById,
   apiAdminGetPostingForumById,
+  apiGetAdminCountForumReportKomentar,
+  apiGetAdminCountForumReportPosting,
+  apiGetAdminForumPublish,
+  apiGetAdminForumPublishCountDasboard,
+  apiGetAdminForumReportKomentar,
+  apiGetAdminForumReportPosting,
+  apiGetAdminHasilReportPosting,
+  apiAdminGetListReportKomentarById,
 };
 
 const apiGetAdminForumPublishCountDasboard = async () => {
@@ -162,7 +164,7 @@ const apiGetAdminHasilReportPosting = async ({
   return await response.json().catch(() => null);
 };
 
-const apiAdminGetKomentarForumById = async ({
+const apiAdminGetListKomentarForumById = async ({
   id,
   page,
   search,
@@ -214,11 +216,7 @@ const apiAdminGetKomentarForumById = async ({
   }
 };
 
-const apiAdminGetPostingForumById = async ({
+const apiAdminGetPostingForumById = async ({ id }: { id: string }) => {
-  id,
-}: {
-  id: string;
-}) => {
   try {
     const { token } = await fetch("/api/get-cookie").then((res) => res.json());
     if (!token) {
@@ -256,3 +254,81 @@ const apiAdminGetPostingForumById = async ({
     throw error; // Re-throw the error to handle it in the calling function
   }
 };
+
+const apiAdminGetOneKomentarForumById = async ({ id }: { id: string }) => {
+  try {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    const response = await fetch(`/api/admin/forum/komentar/${id}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Failed to get admin komentar forum",
+        response.statusText,
+        errorData
+      );
+      throw new Error(
+        errorData?.message || "Failed to get admin komentar forum"
+      );
+    }
+
+    // Return the JSON response
+    const resulst = await response.json();
+    return resulst;
+  } catch (error) {
+    console.error("Error get admin komentar forum", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};
+
+const apiAdminGetListReportKomentarById = async ({ id, page }: { id: string; page?: string }) => {
+  try {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    const response = await fetch(`/api/admin/forum/${id}/report-komentar${page ? `?page=${page}` : ""}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Failed to get admin list report komentar forum",
+        response.statusText,
+        errorData
+      );
+      throw new Error(
+        errorData?.message || "Failed to get admin list report komentar forum"
+      );
+    }
+
+    // Return the JSON response
+    const resulst = await response.json();
+    return resulst;
+  } catch (error) {
+    console.error("Error get admin list report komentar forum", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};

src/app_modules/admin/forum/sub_detail/hasil_report_komentar.tsx

@@ -7,6 +7,7 @@ import {
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import {
   MODEL_FORUM_KOMENTAR,
   MODEL_FORUM_REPORT_POSTING,
@@ -15,6 +16,7 @@ import mqtt_client from "@/util/mqtt_client";
 import {
   Box,
   Button,
+  Center,
   Group,
   Paper,
   ScrollArea,
@@ -24,10 +26,10 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconTrash } from "@tabler/icons-react";
 import _ from "lodash";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { Admin_ComponentModal } from "../../_admin_global/_component/comp_admin_modal";
 import Admin_ComponentBackButton from "../../_admin_global/back_button";
@@ -37,18 +39,42 @@ import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_g
 import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
 import ComponentAdminForum_ViewOneDetailKomentar from "../component/detail_one_komentar";
 import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
-import { adminForum_getListReportKomentarbyId } from "../fun/get/get_list_report_komentar_by_id";
+import {
+  apiAdminGetListReportKomentarById,
+  apiAdminGetOneKomentarForumById,
+} from "../lib/api_fetch_admin_forum";
 
-export default function AdminForum_HasilReportKomentar({
+export default function AdminForum_HasilReportKomentar(
-  komentarId,
+//   {
-  listReport,
+//   komentarId,
-  dataKomentar,
+//   listReport,
-}: {
+//   dataKomentar,
-  komentarId: string;
+// }: {
-  listReport: any;
+//   komentarId: string;
-  dataKomentar: MODEL_FORUM_KOMENTAR;
+//   listReport: any;
-}) {
+//   dataKomentar: MODEL_FORUM_KOMENTAR;
-  const [data, setData] = useState(dataKomentar);
+// }
+) {
+  const { id } = useParams();
+  const [data, setData] = useState<MODEL_FORUM_KOMENTAR | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiAdminGetOneKomentarForumById({
+        id: id as string,
+      });
+      if (response && response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error("Invalid data get one forum", error);
+      setData(null);
+    }
+  }
 
   return (
     <>
@@ -56,20 +82,24 @@ export default function AdminForum_HasilReportKomentar({
         <ComponentAdminGlobal_HeaderTamplate name="Forum: Report" />
         <Admin_ComponentBackButton />
 
-        <Admin_V3_ComponentBreakpoint>
+        {!data ? (
-          <ComponentAdminForum_ViewOneDetailKomentar dataKomentar={data} />
+          <CustomSkeleton height={200} width={"100%"} />
-          <Group position="center">
+        ) : (
-            <ButtonDeleteKomentar
+          <Admin_V3_ComponentBreakpoint>
-              komentarId={komentarId}
+            <ComponentAdminForum_ViewOneDetailKomentar dataKomentar={data} />
-              data={data}
+            <Group position="center">
-              onSuccess={(val) => {
+              <ButtonDeleteKomentar
-                setData(val);
+                komentarId={id as string}
-              }}
+                data={data}
-            />
+                onSuccess={(val) => {
-          </Group>
+                  setData(val);
-        </Admin_V3_ComponentBreakpoint>
+                }}
+              />
+            </Group>
+          </Admin_V3_ComponentBreakpoint>
+        )}
 
-        <HasilReportPosting listReport={listReport} komentarId={komentarId} />
+        <HasilReportPosting komentarId={id as string} />
       </Stack>
     </>
   );
@@ -188,67 +218,106 @@ function ButtonDeleteKomentar({
 }
 
 function HasilReportPosting({
-  listReport,
+  // listReport,
   komentarId,
 }: {
-  listReport: any;
+  // listReport: any;
   komentarId: string;
 }) {
   const router = useRouter();
-  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[]>(
+  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[] | null>(null);
-    listReport.data
+  const [nPage, setNPage] = useState(1);
-  );
-  const [nPage, setNPage] = useState(listReport.nPage);
   const [activePage, setActivePage] = useState(1);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, [komentarId, activePage]);
+
+  async function onLoadData() {
+    try {
+      const response = await apiAdminGetListReportKomentarById({
+        id: komentarId,
+        page: `${activePage}`,
+      });
+      if (response && response.success) {
+        setData(response.data.data);
+        setNPage(response.data.nPage);
+      }
+    } catch (error) {
+      console.error("Invalid data format received:", error);
+      setData([]);
+      setNPage(1);
+    }
+  }
+
   async function onPageClick(p: any) {
     setActivePage(p);
-    const loadData = await adminForum_getListReportKomentarbyId({
-      komentarId: komentarId,
-      page: p,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
   }
 
-  const TableRows = data?.map((e, i) => (
+  const TableRows = () => {
-    <tr key={i} style={{ color: AdminColor.white }}>
+    if (!Array.isArray(data) || data.length === 0) {
-      <td>
+      return (
-        <Box w={100}>
+        <tr>
-          <Text>{e?.User?.username}</Text>
+          <td colSpan={12}>
-        </Box>
+            <Center>
-      </td>
+              <Text color="gray">Tidak ada data</Text>
-      <td>
+            </Center>
-        <Box w={150}>
+          </td>
-          <Text>
+        </tr>
-            {e?.ForumMaster_KategoriReport?.title
+      );
-              ? e?.ForumMaster_KategoriReport?.title
+    }
-              : "-"}
-          </Text>
-        </Box>
-      </td>
 
-      <td>
+    return data?.map((e, i) => (
-        <Box w={300}>
+      <tr key={i} style={{ color: AdminColor.white }}>
-          <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
+        <td>
-            {e?.ForumMaster_KategoriReport?.deskripsi ? (
+          <Box w={100}>
-              <Text>{e?.ForumMaster_KategoriReport?.deskripsi}</Text>
+            <Text>{e?.User?.username}</Text>
-            ) : (
+          </Box>
-              <Text>-</Text>
+        </td>
-            )}
+        <td>
-          </Spoiler>
+          <Box w={150}>
-        </Box>
+            <Text>
-      </td>
+              {e?.ForumMaster_KategoriReport?.title
+                ? e?.ForumMaster_KategoriReport?.title
+                : "-"}
+            </Text>
+          </Box>
+        </td>
 
-      <td>
+        <td>
-        <Box w={300}>
+          <Box w={300}>
-          <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
+            <Spoiler
-            {e?.deskripsi ? <Text>{e?.deskripsi}</Text> : <Text>-</Text>}
+              maxHeight={50}
-          </Spoiler>
+              hideLabel="sembunyikan"
-        </Box>
+              showLabel="tampilkan"
-      </td>
+            >
-    </tr>
+              {e?.ForumMaster_KategoriReport?.deskripsi ? (
-  ));
+                <Text>{e?.ForumMaster_KategoriReport?.deskripsi}</Text>
+              ) : (
+                <Text>-</Text>
+              )}
+            </Spoiler>
+          </Box>
+        </td>
+
+        <td>
+          <Box w={300}>
+            <Spoiler
+              maxHeight={50}
+              hideLabel="sembunyikan"
+              showLabel="tampilkan"
+            >
+              {e?.deskripsi ? <Text>{e?.deskripsi}</Text> : <Text>-</Text>}
+            </Spoiler>
+          </Box>
+        </td>
+      </tr>
+    ));
+  };
+
+  if (!data) {
+    return <CustomSkeleton height={400} width={"100%"} />;
+  }
 
   return (
     <>
@@ -293,7 +362,7 @@ function HasilReportPosting({
                   </tr>
                 </thead>
 
-                <tbody>{TableRows}</tbody>
+                <tbody>{TableRows()}</tbody>
               </Table>
             </ScrollArea>
             <Admin_V3_ComponentPaginationBreakpoint

src/app_modules/admin/forum/sub_detail/hasil_report_posting.tsx

@@ -7,6 +7,7 @@ import {
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import {
   MODEL_FORUM_POSTING,
   MODEL_FORUM_REPORT_POSTING,
@@ -24,10 +25,10 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconTrash } from "@tabler/icons-react";
 import _ from "lodash";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { Admin_ComponentModal } from "../../_admin_global/_component/comp_admin_modal";
 import Admin_ComponentBackButton from "../../_admin_global/back_button";
@@ -37,32 +38,61 @@ import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_g
 import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
 import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
 import { adminForum_funDeletePostingById } from "../fun/delete/fun_delete_posting_by_id";
-import { adminForum_getListReportPostingById } from "../fun/get/get_list_report_posting_by_id";
+import {
+  apiAdminGetPostingForumById,
+  apiGetAdminForumReportPosting,
+} from "../lib/api_fetch_admin_forum";
+
+export default function AdminForum_HasilReportPosting(
+  {
+    // dataPosting,
+    // listReport,
+  }: {
+    // dataPosting: MODEL_FORUM_POSTING;
+    // listReport: any;
+  }
+) {
+  const { id } = useParams();
+  const [data, setData] = useState<MODEL_FORUM_POSTING | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiAdminGetPostingForumById({
+        id: id as string,
+      });
+      if (response && response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error("Invalid data format received:", error);
+      setData(null);
+    }
+  }
 
-export default function AdminForum_HasilReportPosting({
-  dataPosting,
-  listReport,
-}: {
-  dataPosting: MODEL_FORUM_POSTING;
-  listReport: any;
-}) {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Forum: Report" />
         <Admin_ComponentBackButton />
 
-        <Admin_V3_ComponentBreakpoint>
+        {!data ? (
-          <ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
+          <CustomSkeleton height={200} width={"100%"} />
-          <Group position="center">
+        ) : (
-            <ButtonDeletePosting dataPosting={dataPosting} />
+          <>
-          </Group>
+            <Admin_V3_ComponentBreakpoint>
-        </Admin_V3_ComponentBreakpoint>
+              <ComponentAdminForum_ViewOneDetailPosting dataPosting={data} />
+              <Group position="center">
+                <ButtonDeletePosting dataPosting={data} />
+              </Group>
+            </Admin_V3_ComponentBreakpoint>
+          </>
+        )}
 
-        <HasilReportPosting
+        <HasilReportPosting postingId={id as string} />
-          listReport={listReport}
-          postingId={dataPosting.id}
-        />
       </Stack>
     </>
   );
@@ -164,75 +194,128 @@ function ButtonDeletePosting({
 }
 
 function HasilReportPosting({
-  listReport,
+  // listReport,
   postingId,
 }: {
-  listReport: any;
+  // listReport: any;
   postingId: string;
 }) {
   const router = useRouter();
-  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[]>(
+  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[] | null>(null);
-    listReport.data
+  const [nPage, setNPage] = useState<number>(1);
-  );
-  const [nPage, setNPage] = useState(listReport.nPage);
   const [activePage, setActivePage] = useState(1);
+  const [isSearch, setSearch] = useState("");
 
-  async function onPageClick(p: any) {
+  useShallowEffect(() => {
-    setActivePage(p);
+    const loadInitialData = async () => {
-    const loadData = await adminForum_getListReportPostingById({
+      try {
-      postingId: postingId,
+        const response = await apiGetAdminForumReportPosting({
-      page: p,
+          page: `${activePage}`,
-    });
+          search: isSearch,
-    setData(loadData.data as any);
+        });
-    setNPage(loadData.nPage);
+
+        if (response?.success && response?.data.data) {
+          setData(response.data.data);
+          setNPage(response.data.nCount || 1);
+        } else {
+          console.error("Invalid data format recieved", response), setData([]);
+        }
+      } catch (error) {
+        console.error("Invalid data format recieved", error);
+        setData([]);
+      }
+    };
+    loadInitialData();
+  }, [activePage, isSearch]);
+  async function onSearch(searchTerm: string) {
+    setSearch(searchTerm);
+    setActivePage(1);
   }
 
-  const TableRows = data?.map((e, i) => (
+  const onPageClick = (page: number) => {
-    <tr key={i}>
+    setActivePage(page);
-      <td>
+  };
-        <Center c={AdminColor.white} w={150}>
-          <Text>{e?.User?.username}</Text>
-        </Center>
-      </td>
-      <td>
-        <Center c={AdminColor.white} w={150}>
-          <Text>
-            {e?.ForumMaster_KategoriReport?.title
-              ? e?.ForumMaster_KategoriReport?.title
-              : "-"}
-          </Text>
-        </Center>
-      </td>
 
-      <td>
+  // async function onPageClick(p: any) {
-        <Center c={AdminColor.white} w={300}>
+  //   setActivePage(p);
-          <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
+  //   const loadData = await adminForum_getListReportPostingById({
-            {e?.ForumMaster_KategoriReport?.deskripsi ? (
+  //     postingId: postingId,
-              <Text style={{ textJustify: "auto", textAlign: "justify" }}>
+  //     page: p,
-                {e?.ForumMaster_KategoriReport?.deskripsi}
+  //   });
-              </Text>
+  //   setData(loadData.data as any);
-            ) : (
+  //   setNPage(loadData.nPage);
-              <Text>-</Text>
+  // }
-            )}
-          </Spoiler>
-        </Center>
-      </td>
 
-      <td>
+  const TableRows = () => {
-        <Center c={AdminColor.white} w={300}>
+    if (!Array.isArray(data) || data.length === 0) {
-          <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
+      return (
-            {e?.deskripsi ? (
+        <tr>
-              <Text style={{ textJustify: "auto", textAlign: "justify" }}>
+          <td colSpan={12}>
-                {e?.deskripsi}
+            <Center>
-              </Text>
+              <Text color="gray">Tidak ada data</Text>
-            ) : (
+            </Center>
-              <Text>-</Text>
+          </td>
-            )}
+        </tr>
-          </Spoiler>
+      );
-        </Center>
+    }
-      </td>
+
-    </tr>
+    return data?.map((e, i) => (
-  ));
+      <tr key={i}>
+        <td>
+          <Center c={AdminColor.white} w={150}>
+            <Text>{e?.User?.username}</Text>
+          </Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white} w={150}>
+            <Text>
+              {e?.ForumMaster_KategoriReport?.title
+                ? e?.ForumMaster_KategoriReport?.title
+                : "-"}
+            </Text>
+          </Center>
+        </td>
+
+        <td>
+          <Center c={AdminColor.white} w={300}>
+            <Spoiler
+              maxHeight={50}
+              hideLabel="sembunyikan"
+              showLabel="tampilkan"
+            >
+              {e?.ForumMaster_KategoriReport?.deskripsi ? (
+                <Text style={{ textJustify: "auto", textAlign: "justify" }}>
+                  {e?.ForumMaster_KategoriReport?.deskripsi}
+                </Text>
+              ) : (
+                <Text>-</Text>
+              )}
+            </Spoiler>
+          </Center>
+        </td>
+
+        <td>
+          <Center c={AdminColor.white} w={300}>
+            <Spoiler
+              maxHeight={50}
+              hideLabel="sembunyikan"
+              showLabel="tampilkan"
+            >
+              {e?.deskripsi ? (
+                <Text style={{ textJustify: "auto", textAlign: "justify" }}>
+                  {e?.deskripsi}
+                </Text>
+              ) : (
+                <Text>-</Text>
+              )}
+            </Spoiler>
+          </Center>
+        </td>
+      </tr>
+    ));
+  };
+
+  if (!data) return <CustomSkeleton height={400} width={"100%"} />;
 
   return (
     <>
@@ -293,7 +376,7 @@ function HasilReportPosting({
                   </tr>
                 </thead>
 
-                <tbody>{TableRows}</tbody>
+                <tbody>{TableRows()}</tbody>
               </Table>
             </ScrollArea>