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
2025-06-12 15:21:49 +08:00
parent 4b8316cc13
commit aba258517d
9 changed files with 573 additions and 298 deletions
--- a/next.config.js
+++ b/next.config.js
@@ -5,23 +5,23 @@ const nextConfig = {
    serverActions: true,
  },
  output: "standalone",
+  staticPageGenerationTimeout: 180, // tingkatkan menjadi 3 menit
  // eslint: {
  //   ignoreDuringBuilds: true,
  // },
-  async headers() {
-    return [
-      {
-        source: "/(.*)",
-        headers: [
-          {
-            key: "Cache-Control",
-            value: "no-store, max-age=0",
-          },
-        ],
-      },
-    ];
-  },
-  
+  // async headers() {
+  //   return [
+  //     {
+  //       source: "/(.*)",
+  //       headers: [
+  //         {
+  //           key: "Cache-Control",
+  //           value: "no-store, max-age=0",
+  //         },
+  //       ],
+  //     },
+  //   ];
+  // },
 };

 module.exports = nextConfig;
--- a/src/app/api/admin/forum/[id]/report-komentar/route.ts
+++ b/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(request: Request,
-    { params }: { params: { id: string } }
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
 ) {
-    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;
+  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 { id } = params;
-        const komentarId = id
+  try {
+    let fixData;
+    const { id } = params;
+    const komentarId = id;

-        if (!page) {
-            fixData = await prisma.forum_ReportKomentar.findMany({
-
-                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,
-                                },
-                            },
-                        },
-                    },
-                },
-            });
-        } 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
+    if (!page) {
+      fixData = await prisma.forum_ReportKomentar.findMany({
+        orderBy: {
+          createdAt: "desc",
        },
-            { 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 })
+        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,
+                },
+              },
+            },
+          },
+        },
+      });
+    } 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 }
+    );
+  }
+}
--- a/src/app/api/admin/forum/[id]/report-posting/route.ts
+++ b/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,
        },
      });

--- a/src/app/api/admin/forum/komentar/[id]/route.ts
+++ b/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 }
+    );
+  }
+}
--- a/src/app/dev/admin/forum/sub-detail/report-komentar/[id]/page.tsx
+++ b/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;
-  const listReport = await adminForum_getListReportKomentarbyId({
-    komentarId: komentarId,
-    page: 1,
-  });
-  const dataKomentar = await adminForum_funGetOneKomentarById({
-    komentarId: komentarId,
-  });
+  // let komentarId = params.id;
+  // const listReport = await adminForum_getListReportKomentarbyId({
+  //   komentarId: komentarId,
+  //   page: 1,
+  // });
+  // const dataKomentar = await adminForum_funGetOneKomentarById({
+  //   komentarId: komentarId,
+  // });

  return (
    <>
      <AdminForum_HasilReportKomentar
-        listReport={listReport}
-        komentarId={komentarId}
-        dataKomentar={dataKomentar as any}
+        // listReport={listReport}
+        // komentarId={komentarId}
+        // dataKomentar={dataKomentar as any}
      />
    </>
  );
--- a/src/app/dev/admin/forum/sub-detail/report-posting/[id]/page.tsx
+++ b/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;
-  const listReport = await adminForum_getListReportPostingById({
-    postingId: postingId,
-    page: 1,
-  });
+  // let postingId = params.id;
+  // const listReport = await adminForum_getListReportPostingById({
+  //   postingId: postingId,
+  //   page: 1,
+  // });

-  const dataPosting = await adminForum_getOnePostingById(postingId);
+  // const dataPosting = await adminForum_getOnePostingById(postingId);

  return (
    <>
      <AdminForum_HasilReportPosting
-        dataPosting={dataPosting as any}
-        listReport={listReport}
+        // dataPosting={dataPosting as any}
+        // listReport={listReport}
      />
    </>
  );
--- a/src/app_modules/admin/forum/lib/api_fetch_admin_forum.ts
+++ b/src/app_modules/admin/forum/lib/api_fetch_admin_forum.ts
@@ -1,13 +1,15 @@
 export {
-  apiGetAdminForumPublishCountDasboard,
-  apiGetAdminCountForumReportPosting,
-  apiGetAdminCountForumReportKomentar,
-  apiGetAdminForumReportPosting,
-  apiGetAdminForumReportKomentar,
-  apiGetAdminForumPublish,
-  apiGetAdminHasilReportPosting,
-  apiAdminGetKomentarForumById,
+  apiAdminGetListKomentarForumById as apiAdminGetKomentarForumById,
+  apiAdminGetOneKomentarForumById,
  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 ({
-  id,
-}: {
-  id: string;
-}) => {
+const apiAdminGetPostingForumById = async ({ 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
+  }
+};
--- a/src/app_modules/admin/forum/sub_detail/hasil_report_komentar.tsx
+++ b/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({
-  komentarId,
-  listReport,
-  dataKomentar,
-}: {
-  komentarId: string;
-  listReport: any;
-  dataKomentar: MODEL_FORUM_KOMENTAR;
-}) {
-  const [data, setData] = useState(dataKomentar);
+export default function AdminForum_HasilReportKomentar(
+//   {
+//   komentarId,
+//   listReport,
+//   dataKomentar,
+// }: {
+//   komentarId: string;
+//   listReport: any;
+//   dataKomentar: MODEL_FORUM_KOMENTAR;
+// }
+) {
+  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>
-          <ComponentAdminForum_ViewOneDetailKomentar dataKomentar={data} />
-          <Group position="center">
-            <ButtonDeleteKomentar
-              komentarId={komentarId}
-              data={data}
-              onSuccess={(val) => {
-                setData(val);
-              }}
-            />
-          </Group>
-        </Admin_V3_ComponentBreakpoint>
+        {!data ? (
+          <CustomSkeleton height={200} width={"100%"} />
+        ) : (
+          <Admin_V3_ComponentBreakpoint>
+            <ComponentAdminForum_ViewOneDetailKomentar dataKomentar={data} />
+            <Group position="center">
+              <ButtonDeleteKomentar
+                komentarId={id as string}
+                data={data}
+                onSuccess={(val) => {
+                  setData(val);
+                }}
+              />
+            </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[]>(
-    listReport.data
-  );
-  const [nPage, setNPage] = useState(listReport.nPage);
+  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[] | null>(null);
+  const [nPage, setNPage] = useState(1);
  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) => (
-    <tr key={i} style={{ color: AdminColor.white }}>
-      <td>
-        <Box w={100}>
-          <Text>{e?.User?.username}</Text>
-        </Box>
-      </td>
-      <td>
-        <Box w={150}>
-          <Text>
-            {e?.ForumMaster_KategoriReport?.title
-              ? e?.ForumMaster_KategoriReport?.title
-              : "-"}
-          </Text>
-        </Box>
-      </td>
+  const TableRows = () => {
+    if (!Array.isArray(data) || data.length === 0) {
+      return (
+        <tr>
+          <td colSpan={12}>
+            <Center>
+              <Text color="gray">Tidak ada data</Text>
+            </Center>
+          </td>
+        </tr>
+      );
+    }

-      <td>
-        <Box w={300}>
-          <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
-            {e?.ForumMaster_KategoriReport?.deskripsi ? (
-              <Text>{e?.ForumMaster_KategoriReport?.deskripsi}</Text>
-            ) : (
-              <Text>-</Text>
-            )}
-          </Spoiler>
-        </Box>
-      </td>
+    return data?.map((e, i) => (
+      <tr key={i} style={{ color: AdminColor.white }}>
+        <td>
+          <Box w={100}>
+            <Text>{e?.User?.username}</Text>
+          </Box>
+        </td>
+        <td>
+          <Box w={150}>
+            <Text>
+              {e?.ForumMaster_KategoriReport?.title
+                ? e?.ForumMaster_KategoriReport?.title
+                : "-"}
+            </Text>
+          </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>
-  ));
+        <td>
+          <Box w={300}>
+            <Spoiler
+              maxHeight={50}
+              hideLabel="sembunyikan"
+              showLabel="tampilkan"
+            >
+              {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
--- a/src/app_modules/admin/forum/sub_detail/hasil_report_posting.tsx
+++ b/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>
-          <ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
-          <Group position="center">
-            <ButtonDeletePosting dataPosting={dataPosting} />
-          </Group>
-        </Admin_V3_ComponentBreakpoint>
+        {!data ? (
+          <CustomSkeleton height={200} width={"100%"} />
+        ) : (
+          <>
+            <Admin_V3_ComponentBreakpoint>
+              <ComponentAdminForum_ViewOneDetailPosting dataPosting={data} />
+              <Group position="center">
+                <ButtonDeletePosting dataPosting={data} />
+              </Group>
+            </Admin_V3_ComponentBreakpoint>
+          </>
+        )}

-        <HasilReportPosting
-          listReport={listReport}
-          postingId={dataPosting.id}
-        />
+        <HasilReportPosting postingId={id as string} />
      </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[]>(
-    listReport.data
-  );
-  const [nPage, setNPage] = useState(listReport.nPage);
+  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[] | null>(null);
+  const [nPage, setNPage] = useState<number>(1);
  const [activePage, setActivePage] = useState(1);
+  const [isSearch, setSearch] = useState("");

-  async function onPageClick(p: any) {
-    setActivePage(p);
-    const loadData = await adminForum_getListReportPostingById({
-      postingId: postingId,
-      page: p,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
+  useShallowEffect(() => {
+    const loadInitialData = async () => {
+      try {
+        const response = await apiGetAdminForumReportPosting({
+          page: `${activePage}`,
+          search: isSearch,
+        });
+
+        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) => (
-    <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>
+  const onPageClick = (page: number) => {
+    setActivePage(page);
+  };

-      <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>
+  // async function onPageClick(p: any) {
+  //   setActivePage(p);
+  //   const loadData = await adminForum_getListReportPostingById({
+  //     postingId: postingId,
+  //     page: p,
+  //   });
+  //   setData(loadData.data as any);
+  //   setNPage(loadData.nPage);
+  // }

-      <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>
-  ));
+  const TableRows = () => {
+    if (!Array.isArray(data) || data.length === 0) {
+      return (
+        <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} 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>