Merge branch 'join' into bagas/10-feb-25

src/app/api/admin/forum/komentar/route.ts

@@ -0,0 +1,133 @@
+import { count } from 'console';
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+import _ from 'lodash';
+
+export async function GET(request: Request) {
+    const method = request.method;
+    if (method !== "GET") {
+        return NextResponse.json({
+            success: false,
+            message: "Method not allowed"
+        },
+            { status: 405 }
+        );
+    }
+
+    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;
+
+    console.log("Ini page", page)
+
+    try {
+        let fixData;
+
+        if (!page) {
+            fixData = await prisma.forum_ReportKomentar.findMany({
+                
+                orderBy: {
+                    createdAt: "desc"
+                  },
+                  where: {
+                    Forum_Komentar: {
+                      isActive: true,
+                      komentar: {
+                        contains: search ? search : "",
+                        mode: "insensitive",
+                      },
+                    },
+                  },
+                  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_Komentar: {
+                    isActive: true,
+                    komentar: {
+                      contains: search ? search : "",
+                      mode: "insensitive",
+                    },
+                  },
+                  },
+                  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_Komentar: {
+                    isActive: true,
+                    komentar: {
+                      contains: search ? search : "",
+                      mode: "insensitive",
+                    },
+                  },
+                }
+            })
+
+            fixData = {
+                data: data,
+                nCount: _.ceil(nCount / takeData)
+            }
+        }
+        
+        return NextResponse.json({
+            success: true,
+            message: "Success get data forum komentar",
+            data: fixData,
+        },
+            { status: 200 }
+        )
+    } catch (error) {
+        backendLogger.error("Error get data forum komentar", error);
+        return NextResponse.json({
+            success: false,
+            message: "Error get data forum komentar",
+            reason: (error as Error).message
+        },
+        )
+    } finally {
+        await prisma.$disconnect();
+    }
+}

src/app/api/admin/forum/posting/route.ts

@@ -0,0 +1,150 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request,
+    { postingId }: { postingId: string }) {
+    const method = request.method;
+    if (method !== "GET") {
+        return NextResponse.json({
+            success: false,
+            message: "Method not allowed",
+        },
+            { status: 405 }
+        )
+    }
+
+    
+    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;
+
+        if (!page) {
+            fixData = await prisma.forum_ReportPosting.findMany({
+                
+                orderBy: {
+                    createdAt: "desc",
+                },
+                where: {
+                    forum_PostingId: postingId,
+                },
+                select: {
+                    id: true,
+                    deskripsi: true,
+                    createdAt: true,
+                    User: {
+                      select: {
+                        id: true,
+                        username: true,
+                        Profile: {
+                          select: {
+                            name: true,
+                          },
+                        },
+                      },
+                    },
+                    ForumMaster_KategoriReport: {
+                      select: {
+                        id: true,
+                        title: true,
+                        deskripsi: true,
+                      },
+                    },
+                  },
+            });
+        } else {
+            const data = await prisma.forum_ReportPosting.findMany({
+                take: takeData,
+                skip: skipData,
+                orderBy: {
+                    createdAt: "desc",
+                },
+                where: {
+                    Forum_Posting: {
+                        isActive: true,
+                        diskusi: {
+                            contains: search ? search : '',
+                            mode: "insensitive"
+                        }
+                    },
+
+                },
+                select: {
+                    id: true,
+                    isActive: true,
+                    createdAt: true,
+                    deskripsi: true,
+                    forumMaster_KategoriReportId: true,
+                    ForumMaster_KategoriReport: {
+                        select: {
+                            id: true,
+                            title: true,
+                            deskripsi: true,
+                        },
+                    },
+
+                    forum_PostingId: true,
+                    Forum_Posting: {
+                        select: {
+                            id: true,
+                            diskusi: true,
+                            ForumMaster_StatusPosting: {
+                                select: {
+                                    id: true,
+                                    status: true,
+                                }
+                            },
+                            Author: {
+                                select: {
+                                    id: true,
+                                    username: true
+                                }
+                            }
+                        },
+                    },
+                    userId: true,
+                    User: {
+                        select: {
+                            id: true,
+                            username: true,
+                        },
+                    },
+                },
+            });
+            const nCount = await prisma.forum_ReportPosting.count({
+                where: {
+                    isActive: true,
+                }
+            })
+
+
+            fixData = {
+                data: data,
+                nCount: _.ceil(nCount / takeData)
+            }
+        }
+        return NextResponse.json({
+            success: true,
+            message: "Success get data forum posting",
+            data: fixData
+        },
+            { status: 200 }
+        )
+    } catch (error) {
+        backendLogger.error("Error get data forum posting >>", error);
+        return NextResponse.json({
+            success: false,
+            message: "Error get data forum posting",
+        },
+            { status: 500 }
+        )
+    } finally {
+        await prisma.$disconnect();
+    }
+}

src/app/api/admin/forum/publish/route.ts

@@ -24,6 +24,40 @@ export async function GET(request: Request) {
         let fixData;
 
         if (!page) {
+            fixData = await prisma.forum_Posting.findMany({
+                orderBy: {
+                    createdAt: "desc",
+                },
+                where: {
+                    isActive: true,
+                    diskusi: {
+                        contains: search ? search : "",
+                        mode: "insensitive",
+                    },
+                },
+                select: {
+                    id: true,
+                    diskusi: true,
+                    isActive: true,
+                    createdAt: true,
+                    Author: {
+                        select: {
+                            id: true,
+                            username: true,
+                            Profile: true,
+                        },
+                    },
+                    Forum_ReportPosting: true,
+                    Forum_Komentar: {
+                        where: {
+                            isActive: true,
+                        },
+                    },
+                    ForumMaster_StatusPosting: true,
+                },
+            });
+
+        } else {
             const data = await prisma.forum_Posting.findMany({
                 take: takeData,
                 skip: skipData,
@@ -73,7 +107,6 @@ export async function GET(request: Request) {
                 data: data,
                 nCount: _.ceil(nCount / takeData)
             }
-
         }
         return NextResponse.json({
             success: true,
@@ -91,5 +124,7 @@ export async function GET(request: Request) {
         },
             { status: 500 }
         )
+    } finally {
+        await prisma.$disconnect()
     }
 }

src/app/dev/admin/forum/sub-menu/posting/page.tsx

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

src/app/dev/admin/forum/sub-menu/report-komentar/page.tsx

@@ -1,12 +1,10 @@
-import adminForum_funGetAllReportKomentar from "@/app_modules/admin/forum/fun/get/get_all_report_komentar";
 import AdminForum_TableReportKomentar from "@/app_modules/admin/forum/sub_menu/table_report_komentar";
 
 export default async function Page() {
-  const listData = await adminForum_funGetAllReportKomentar({ page: 1 });
   
   return (
     <>
-      <AdminForum_TableReportKomentar listData={listData} />
+      <AdminForum_TableReportKomentar  />
     </>
   );
 }

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

@@ -1,7 +1,10 @@
 export {
     apiGetAdminForumPublishCountDasboard,
+    apiGetAdminCountForumReportPosting ,
+    apiGetAdminCountForumReportKomentar,
     apiGetAdminForumReportPosting,
-    apiGetAdminForumReportKomentar
+    apiGetAdminForumReportKomentar,
+    apiGetAdminForumPublish
 }
 
 const apiGetAdminForumPublishCountDasboard = async () => {
@@ -21,7 +24,7 @@ const apiGetAdminForumPublishCountDasboard = async () => {
     return await response.json().catch(() => null);
 }
 
-const apiGetAdminForumReportPosting = async () => {
+const apiGetAdminCountForumReportPosting = async () => {
     const { token } = await fetch("/api/get-cookie").then((res) => res.json());
     if (!token) return await token.json().catch(() => null);
 
@@ -35,10 +38,11 @@ const apiGetAdminForumReportPosting = async () => {
         },
     })
 
+   
     return await response.json().catch(() => null);
 }
 
-const apiGetAdminForumReportKomentar = async () => {
+const apiGetAdminCountForumReportKomentar = async () => {
     const { token } = await fetch("/api/get-cookie").then((res) => res.json());
     if (!token) return await token.json().catch(() => null);
 
@@ -52,5 +56,56 @@ const apiGetAdminForumReportKomentar = async () => {
         },
     })
 
+    return await response.json().catch(() => null);
+}
+const apiGetAdminForumReportPosting = async () => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/forum/posting`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+        },
+    })
+
+    return await response.json().catch(() => null);
+}
+const apiGetAdminForumReportKomentar = async({ page } : { page?: string}) => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+    
+    const isPage = page ? `?page=${page}` : "";
+    const response = await fetch(`/api/admin/forum/komentar${isPage}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+        },
+    })
+
+    return await response.json().catch(() => null);
+}
+const  apiGetAdminForumPublish = async ({ page }: { page?: string }) => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const isPage = page ? `?page=${page}` : "";
+    const response = await fetch(`/api/admin/forum/publish${isPage}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+        },
+    })
+    
+
     return await response.json().catch(() => null);
 }

src/app_modules/admin/forum/main/dashboard.tsx

@@ -8,7 +8,7 @@ import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { useShallowEffect } from "@mantine/hooks";
 import { clientLogger } from "@/util/clientLogger";
 import global_limit from "@/app/lib/limit";
-import { apiGetAdminForumPublishCountDasboard } from "../lib/api_fetch_admin_forum";
+import { apiGetAdminCountForumReportKomentar, apiGetAdminCountForumReportPosting, apiGetAdminForumPublishCountDasboard } from "../lib/api_fetch_admin_forum";
 import { useState } from "react";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
@@ -63,7 +63,7 @@ function ForumMain() {
 
   async function onLoadCountReportPosting() {
     try {
-      const response = await apiGetAdminForumPublishCountDasboard()
+      const response = await apiGetAdminCountForumReportPosting()
       if (response) {
         setCountLaporanPosting(response.data)
       }
@@ -74,7 +74,7 @@ function ForumMain() {
 
   async function onLoadCountReportKomentar() {
     try {
-      const response = await apiGetAdminForumPublishCountDasboard()
+      const response = await apiGetAdminCountForumReportKomentar()
       if (response) {
         setCountLaporanKomentar(response.data)
       }

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

@@ -1,16 +1,17 @@
 "use client";
 
+
 import { RouterAdminForum } from "@/app/lib/router_admin/router_admin_forum";
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_FORUM_POSTING } from "@/app_modules/forum/model/interface";
+import { clientLogger } from "@/util/clientLogger";
 import {
   Badge,
   Box,
   Button,
   Center,
-  Group,
-  Modal,
   Pagination,
   Paper,
   ScrollArea,
@@ -18,154 +19,170 @@ import {
   Stack,
   Table,
   Text,
-  TextInput,
+  TextInput
-  Title,
 } from "@mantine/core";
-import { IconMessageCircle, IconSearch } from "@tabler/icons-react";
+import { useShallowEffect } from "@mantine/hooks";
-import { IconFlag3 } from "@tabler/icons-react";
+import { IconFlag3, IconMessageCircle, IconSearch } from "@tabler/icons-react";
-import { IconEyeCheck, IconTrash } from "@tabler/icons-react";
-import _, { isEmpty } from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { adminForum_funDeletePostingById } from "../fun/delete/fun_delete_posting_by_id";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { useDisclosure } from "@mantine/hooks";
-import { adminForum_getListPosting } from "../fun/get/get_list_publish";
-import adminJob_getListPublish from "@/app_modules/admin/job/fun/get/get_list_publish";
-import ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
-import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
+import { apiGetAdminForumPublish } from "../lib/api_fetch_admin_forum";
 
-export default function AdminForum_TablePosting({
+
-  listPublish,
+export default function AdminForum_TablePosting() {
-}: {
-  listPublish: any;
-}) {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Forum" />
-        <TablePublish listPublish={listPublish} />
+        <TablePublish />
         {/* <pre>{JSON.stringify(listPublish, null, 2)}</pre> */}
       </Stack>
     </>
   );
 }
 
-function TablePublish({ listPublish }: { listPublish: any }) {
+
+function TablePublish() {
   const router = useRouter();
-  const [data, setData] = useState<MODEL_FORUM_POSTING[]>(listPublish.data);
+  const [data, setData] = useState<MODEL_FORUM_POSTING[] | null>(null);
-  const [nPage, setNPage] = useState(listPublish.nPage);
+  const [nPage, setNPage] = useState<number>(1);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
 
-  async function onSearch(s: string) {
-    setSearch(s);
-    setActivePage(1);
-    const loadData = await adminForum_getListPosting({
-      page: 1,
-      search: s,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
-  }
 
-  async function onPageClick(p: any) {
+  useShallowEffect(() => {
-    setActivePage(p);
+    const loadInitialData = async () => {
-    const loadData = await adminForum_getListPosting({
+      try {
-      search: isSearch,
+        const response = await apiGetAdminForumPublish({
-      page: p,
+          page: `${activePage}`
-    });
+        })
-    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) {
+        clientLogger.error("Invlid data format recieved:", error);
+        setData([]);
+      }
+    }
+    loadInitialData();
+  }, [activePage, isSearch]);
+  
+  const onSearch = (searchTerm: string) => {
+    setSearch(searchTerm);
+    setActivePage(1);
   }
 
   async function onLoadData() {
-     const loadData = await adminForum_getListPosting({
+    const loadData = await apiGetAdminForumPublish({
-       page: 1,
+      page: `${activePage}`
-     });
+    });
-     setData(loadData.data as any);
+    setData(loadData.data.data);
-     setNPage(loadData.nPage);
+    setNPage(loadData.data.nPage);
   }
 
-  const TableRows = data?.map((e, i) => (
+  const onPageClick = (page: number) => {
-    <tr key={i}>
+    setActivePage(page);
-      <td>
+  }
-        <Center w={200}>
+
-          <Text c={AdminColor.white} lineClamp={1}>{e?.Author?.username}</Text>
+
-        </Center>
+  const renderTableBody = () => {
-      </td>
+    if (!Array.isArray(data) || data.length === 0) {
-      <td>
+      return (
-        <Center w={100}>
+        <tr>
-          <Badge
+          <td colSpan={12}>
-            color={
+            <Center>
-              (e?.ForumMaster_StatusPosting?.id as any) === 1 ? "green" : "red"
+              <Text color="gray">Tidak ada data</Text>
-            }
+            </Center>
-          >
+          </td>
-            {e?.ForumMaster_StatusPosting?.status}
+        </tr>
-          </Badge>
+      )
-        </Center>
+    }
-      </td>
+    return data?.map((e, i) => (
-      <td>
+      <tr key={i}>
-        <Box w={400}>
+        <td>
-          <Spoiler
+          <Center w={200}>
-            // w={400}
+            <Text c={AdminColor.white} lineClamp={1}>{e?.Author?.username}</Text>
-            maxHeight={60}
+          </Center>
-            hideLabel="sembunyikan"
+        </td>
-            showLabel="tampilkan"
+        <td>
-          >
+          <Center w={100}>
-            <div
+            <Badge
-              dangerouslySetInnerHTML={{
+              color={
-                __html: e?.diskusi,
+                (e?.ForumMaster_StatusPosting?.id as any) === 1 ? "green" : "red"
+              }
+            >
+              {e?.ForumMaster_StatusPosting?.status}
+            </Badge>
+          </Center>
+        </td>
+        <td>
+          <Box w={400}>
+            <Spoiler
+              // w={400}
+              c={AdminColor.white}
+              maxHeight={60}
+              hideLabel="sembunyikan"
+              showLabel="tampilkan"
+            >
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: e?.diskusi,
+                }}
+              />
+            </Spoiler>
+          </Box>
+        </td>
+        <td>
+          <Center w={150}>
+            <Text c={AdminColor.white}>
+              {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
+               new Date(e?.createdAt)
+              )}
+            </Text>
+          </Center>
+        </td>
+        <td>
+          <Center w={150}>
+            <Text c={AdminColor.white} fw={"bold"} fz={"lg"}>
+              {e?.Forum_Komentar.length}
+            </Text>
+          </Center>
+        </td>
+        <td>
+          <Center w={150}>
+            <Text
+              c={e?.Forum_ReportPosting?.length >= 3 ? "red" : AdminColor.white}
+              fw={"bold"}
+              fz={"lg"}
+            >
+              {e?.Forum_ReportPosting.length}
+            </Text>
+          </Center>
+        </td>
+        <td>
+          <Stack align="center" spacing={"xs"}>
+            <ButtonAction postingId={e?.id} />
+            <ComponentAdminForum_ButtonDeletePosting
+              postingId={e?.id}
+              onSuccesDelete={(val) => {
+                if (val) {
+                  onLoadData();
+                }
               }}
             />
-          </Spoiler>
+          </Stack>
-        </Box>
+        </td>
-      </td>
+      </tr>
-      <td>
+    ));
-        <Center w={150}>
+  }
-          <Text c={AdminColor.white}>
+
-            {new Intl.DateTimeFormat(["id-ID"], { dateStyle: "medium" }).format(
-              e.createdAt
-            )}
-          </Text>
-        </Center>
-      </td>
-      <td>
-        <Center w={150}>
-          <Text c={AdminColor.white} fw={"bold"} fz={"lg"}>
-            {e?.Forum_Komentar.length}
-          </Text>
-        </Center>
-      </td>
-      <td>
-        <Center w={150}>
-          <Text
-            c={e?.Forum_ReportPosting?.length >= 3 ? "red" : "black"}
-            fw={"bold"}
-            fz={"lg"}
-          >
-            {e?.Forum_ReportPosting.length}
-          </Text>
-        </Center>
-      </td>
-      <td>
-        <Stack align="center" spacing={"xs"}>
-          <ButtonAction postingId={e?.id} />
-          <ComponentAdminForum_ButtonDeletePosting
-            postingId={e?.id}
-            onSuccesDelete={(val) => {
-              if (val) {
-                onLoadData();
-              }
-            }}
-          />
-        </Stack>
-      </td>
-    </tr>
-  ));
 
   return (
     <>
@@ -175,36 +192,37 @@ function TablePublish({ listPublish }: { listPublish: any }) {
           color={AdminColor.softBlue}
           component={
             <TextInput
-            icon={<IconSearch size={20} />}
+              icon={<IconSearch size={20} />}
-            radius={"xl"}
+              radius={"xl"}
-            placeholder="Cari postingan"
+              placeholder="Cari postingan"
-            onChange={(val) => {
+              onChange={(val) => {
-              onSearch(val.currentTarget.value);
+                onSearch(val.currentTarget.value);
-            }}
+              }}
-          />
+            />
           }
         />
         {/* <Group
-          position="apart"
+         position="apart"
-          bg={"green.4"}
+         bg={"green.4"}
-          p={"xs"}
+         p={"xs"}
-          style={{ borderRadius: "6px" }}
+         style={{ borderRadius: "6px" }}
-        >
+       >
-          <Title order={4} c={"white"}>
+         <Title order={4} c={"white"}>
-            Posting
+           Posting
-          </Title>
+         </Title>
-          <TextInput
+         <TextInput
-            icon={<IconSearch size={20} />}
+           icon={<IconSearch size={20} />}
-            radius={"xl"}
+           radius={"xl"}
-            placeholder="Cari postingan"
+           placeholder="Cari postingan"
-            onChange={(val) => {
+           onChange={(val) => {
-              onSearch(val.currentTarget.value);
+             onSearch(val.currentTarget.value);
-            }}
+           }}
-          />
+         />
-        </Group> */}
+       </Group> */}
 
-        {isEmpty(data) ? (
+
-          <ComponentAdminGlobal_IsEmptyData />
+        {!data ? (
+          <CustomSkeleton height={"80vh"} width={"100%"} />
         ) : (
           <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
@@ -215,6 +233,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
                 w={"100%"}
                 h={"100%"}
 
+
               >
                 <thead>
                   <tr>
@@ -241,7 +260,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
                     </th>
                   </tr>
                 </thead>
-                <tbody>{TableRows}</tbody>
+                <tbody>{renderTableBody()}</tbody>
               </Table>
             </ScrollArea>
             <Center mt={"xl"}>
@@ -260,11 +279,13 @@ function TablePublish({ listPublish }: { listPublish: any }) {
   );
 }
 
+
 function ButtonAction({ postingId }: { postingId: string }) {
   const router = useRouter();
   const [loadingKomentar, setLoadingKomentar] = useState(false);
   const [loadingReport, setLoadingReport] = useState(false);
 
+
   return (
     <>
       <Button
@@ -299,11 +320,13 @@ function ButtonAction({ postingId }: { postingId: string }) {
   );
 }
 
+
 // function ButtonDeletePosting({ postingId }: { postingId: string }) {
 //   const [opened, { open, close }] = useDisclosure(false);
 //   const [loadingDel, setLoadingDel] = useState(false);
 //   const [loadingDel2, setLoadingDel2] = useState(false);
 
+
 //   async function onDelete() {
 //     await adminForum_funDeletePostingById(postingId).then((res) => {
 //       if (res.status === 200) {
@@ -371,3 +394,6 @@ function ButtonAction({ postingId }: { postingId: string }) {
 //     </>
 //   );
 // }
+
+
+

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

@@ -1,15 +1,18 @@
 "use client";
 
+
 import { RouterAdminForum } from "@/app/lib/router_admin/router_admin_forum";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import {
   MODEL_FORUM_REPORT_KOMENTAR
 } from "@/app_modules/forum/model/interface";
+import { clientLogger } from "@/util/clientLogger";
 import {
   Box,
   Button,
   Center,
-  Group,
   Pagination,
   Paper,
   ScrollArea,
@@ -17,143 +20,159 @@ import {
   Stack,
   Table,
   Text,
-  TextInput,
+  TextInput
-  Title
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconFlag3, IconSearch } from "@tabler/icons-react";
-import { isEmpty } from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
-import adminForum_funGetAllReportKomentar from "../fun/get/get_all_report_komentar";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { apiGetAdminForumReportKomentar } from "../lib/api_fetch_admin_forum";
 
-export default function AdminForum_TableReportKomentar({
+
-  listData,
+export default function AdminForum_TableReportKomentar() {
-}: {
-  listData: any;
-}) {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Forum" />
-        <TableView listData={listData} />
+        <TableView />
         {/* <pre>{JSON.stringify(listPublish, null, 2)}</pre> */}
       </Stack>
     </>
   );
 }
 
-function TableView({ listData }: { listData: any }) {
+
+function TableView() {
   const router = useRouter();
-  const [data, setData] = useState<MODEL_FORUM_REPORT_KOMENTAR[]>(
+  const [data, setData] = useState<MODEL_FORUM_REPORT_KOMENTAR[] | null>(null);
-    listData.data
+  const [nPage, setNPage] = useState<number>(1);
-  );
-  const [nPage, setNPage] = useState(listData.nPage);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
 
+
   useShallowEffect(() => {
-    onLoadData({
+    const loadInitialData = async () => {
-      onLoad(val) {
+      try {
-        setData(val.data as any);
+        const response = await apiGetAdminForumReportKomentar({
-        setNPage(val.nPage);
+          page: `${activePage}`
-        setActivePage(1);
+        })
-      },
+        if (response?.success && response?.data.data) {
-    });
+          setData(response.data.data);
-  }, [setData, setNPage]);
+          setNPage(response.data.nCount || 1)
+        } else {
+          console.error("Invalid data format recieved", response)
+          setData([])
+        }
+      } catch (error) {
+        clientLogger.error("Invalid data format recieved", error)
+        setData([])
+      }
+    }
+    loadInitialData();
+  }, [activePage, isSearch]);
 
-  async function onLoadData({ onLoad }: { onLoad: (val: any) => void }) {
-    const loadData = await adminForum_funGetAllReportKomentar({ page: 1 });
-    onLoad(loadData);
 
-    // setData(loadData.data as any);
+  // async function onLoadData({ onLoad }: { onLoad: (val: any) => void }) {
-    // setNPage(loadData.nPage);
+  //   const loadData = await apiGetAdminForumReportKomentar(
-  }
+  //     { page: `${activePage}` });
+  //   onLoad(loadData);
 
-  async function onSearch(s: string) {
+
-    setSearch(s);
+  //   setData(loadData.data.data);
+  //   setNPage(loadData.data.nPage);
+  // }
+
+
+  const onSearch = (searchTerm: string) => {
+    setSearch(searchTerm);
     setActivePage(1);
-    const loadData = await adminForum_funGetAllReportKomentar({
-      page: 1,
-      search: s,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
   }
 
-  async function onPageClick(p: any) {
+
-    setActivePage(p);
+  const onPageClick = (page: number) => {
-    const loadData = await adminForum_funGetAllReportKomentar({
+    setActivePage(page);
-      search: isSearch,
-      page: p,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
   }
 
-  const TableRows = data?.map((e, i) => (
-    <tr key={i}>
-      <td>
-        <Center w={200}>
-          <Text c={AdminColor.white} lineClamp={1}>{e?.User.username}</Text>
-        </Center>
-      </td>
-      <td>
-        <Center w={200}>
-          {e?.forumMaster_KategoriReportId === null ? (
-            <Text c={AdminColor.white}>Lainnya</Text>
-          ) : (
-            <Text c={AdminColor.white} lineClamp={1}>{e?.ForumMaster_KategoriReport.title}</Text>
-          )}
-        </Center>
-      </td>
 
-      <td>
+  const renderTableBody = () => {
-        <Box w={400}>
+    if (!Array.isArray(data) || data.length === 0) {
-          <Spoiler
+      return (
-            // w={400}
+        <tr>
-            maxHeight={60}
+          <td colSpan={12}>
-            hideLabel="sembunyikan"
+            <Center>
-            showLabel="tampilkan"
+              <Text color="gray">Tidak ada data</Text>
-          >
+            </Center>
-            <div
+          </td>
-              dangerouslySetInnerHTML={{
+        </tr>
-                __html: e?.Forum_Komentar.komentar,
+      )
-              }}
+    }
-            />
+    return data?.map((e, i) => (
-          </Spoiler>
+      <tr key={i}>
-        </Box>
+        <td>
-      </td>
+          <Center w={200}>
-
+            <Text c={AdminColor.white} lineClamp={1}>{e?.User?.Profile?.name}</Text>
-      <td>
+          </Center>
-        <Center w={150}>
+        </td>
-          <Text>
+        <td>
-            {new Intl.DateTimeFormat(["id-ID"], { dateStyle: "medium" }).format(
+          <Center w={200}>
-              e.createdAt
+            {e?.forumMaster_KategoriReportId === null ? (
+              <Text c={AdminColor.white}>Lainnya</Text>
+            ) : (
+              <Text c={AdminColor.white} lineClamp={1}>{e?.ForumMaster_KategoriReport?.title}</Text>
             )}
-          </Text>
+          </Center>
-        </Center>
+        </td>
-      </td>
+
+
+        <td>
+          <Box w={400}>
+            <Spoiler
+              c={AdminColor.white}
+              // w={400}
+              maxHeight={60}
+              hideLabel="sembunyikan"
+              showLabel="tampilkan"
+            >
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: e?.deskripsi,
+                }}
+              />
+            </Spoiler>
+          </Box>
+        </td>
+
+
+        <td>
+          <Center w={150} >
+            <Text c={AdminColor.white}>
+              {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
+                new Date(e?.createdAt)
+              )}
+            </Text>
+          </Center>
+        </td>
+
+
+        <td>
+          <Stack align="center" spacing={"xs"}>
+            {/* <ButtonAction postingId={e?.id} /> */}
+            <ButtonLihatReportLainnya komentarId={e?.forum_KomentarId} />
+            {/* <ComponentAdminForum_ButtonDeletePosting
+             postingId={e?.Forum_Komentar.forum_PostingId}
+             onSuccesDelete={(val) => {
+               if (val) {
+                 onLoadData();
+               }
+             }}
+           /> */}
+          </Stack>
+        </td>
+      </tr>
+    ));
+  }
 
-      <td>
-        <Stack align="center" spacing={"xs"}>
-          {/* <ButtonAction postingId={e?.id} /> */}
-          <ButtonLihatReportLainnya komentarId={e?.forum_KomentarId} />
-          {/* <ComponentAdminForum_ButtonDeletePosting
-            postingId={e?.Forum_Komentar.forum_PostingId}
-            onSuccesDelete={(val) => {
-              if (val) {
-                onLoadData();
-              }
-            }}
-          /> */}
-        </Stack>
-      </td>
-    </tr>
-  ));
 
   return (
     <>
@@ -163,36 +182,37 @@ function TableView({ listData }: { listData: any }) {
           color={AdminColor.softBlue}
           component={
             <TextInput
-            icon={<IconSearch size={20} />}
+              icon={<IconSearch size={20} />}
-            radius={"xl"}
+              radius={"xl"}
-            placeholder="Cari postingan"
+              placeholder="Cari postingan"
-            onChange={(val) => {
+              onChange={(val) => {
-              onSearch(val.currentTarget.value);
+                onSearch(val.currentTarget.value);
-            }}
+              }}
-          />
+            />
           }
         />
         {/* <Group
-          position="apart"
+         position="apart"
-          bg={"yellow.4"}
+         bg={"yellow.4"}
-          p={"xs"}
+         p={"xs"}
-          style={{ borderRadius: "6px" }}
+         style={{ borderRadius: "6px" }}
-        >
+       >
-          <Title order={4} c={"white"}>
+         <Title order={4} c={"white"}>
-            Report Komentar
+           Report Komentar
-          </Title>
+         </Title>
-          <TextInput
+         <TextInput
-            icon={<IconSearch size={20} />}
+           icon={<IconSearch size={20} />}
-            radius={"xl"}
+           radius={"xl"}
-            placeholder="Cari postingan"
+           placeholder="Cari postingan"
-            onChange={(val) => {
+           onChange={(val) => {
-              onSearch(val.currentTarget.value);
+             onSearch(val.currentTarget.value);
-            }}
+           }}
-          />
+         />
-        </Group> */}
+       </Group> */}
 
-        {isEmpty(data) ? (
+
-          <ComponentAdminGlobal_IsEmptyData />
+        {!data ? (
+          <CustomSkeleton height={"80vh"} width={"100%"} />
         ) : (
           <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
@@ -203,6 +223,7 @@ function TableView({ listData }: { listData: any }) {
                 w={"100%"}
                 h={"100%"}
 
+
               >
                 <thead>
                   <tr>
@@ -210,25 +231,30 @@ function TableView({ listData }: { listData: any }) {
                       <Center c={AdminColor.white}>Pelapor</Center>
                     </th>
 
+
                     <th>
                       <Center c={AdminColor.white}>Jenis Laporan</Center>
                     </th>
 
+
                     <th>
                       <Text c={AdminColor.white}>Komentar</Text>
                     </th>
 
+
                     <th>
                       <Center c={AdminColor.white}>Tanggal Report</Center>
                     </th>
 
+
                     <th>
                       <Center c={AdminColor.white}>Aksi</Center>
                     </th>
 
+
                   </tr>
                 </thead>
-                <tbody>{TableRows}</tbody>
+                <tbody>{renderTableBody()}</tbody>
               </Table>
             </ScrollArea>
             <Center mt={"xl"}>
@@ -247,6 +273,7 @@ function TableView({ listData }: { listData: any }) {
   );
 }
 
+
 function ButtonLihatReportLainnya({ komentarId }: { komentarId: string }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
@@ -269,3 +296,6 @@ function ButtonLihatReportLainnya({ komentarId }: { komentarId: string }) {
     </>
   );
 }
+
+
+

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

@@ -86,12 +86,12 @@ function TableView({ listData }: { listData: any }) {
   const TableRows = data?.map((e, i) => (
     <tr key={i}>
       <td>
-        <Center w={200}>
+        <Center c={AdminColor.white} w={200}>
           <Text lineClamp={1}>{e?.User.username}</Text>
         </Center>
       </td>
       <td>
-        <Center w={200}>
+        <Center c={AdminColor.white} w={200}>
           {e?.forumMaster_KategoriReportId === null ? (
             <Text>Lainnya</Text>
           ) : (
@@ -139,7 +139,7 @@ function TableView({ listData }: { listData: any }) {
 
       <td>
         <Center w={150}>
-          <Text>
+          <Text c={AdminColor.white}>
             {new Intl.DateTimeFormat(["id-ID"], { dateStyle: "medium" }).format(
               e.createdAt
             )}

src/app_modules/forum/model/interface.tsx

@@ -61,6 +61,7 @@ export interface MODEL_FORUM_REPORT_POSTING {
 }
 
 export interface MODEL_FORUM_REPORT_KOMENTAR {
+  komentar: string | TrustedHTML;
   id: string;
   isActive: boolean;
   createdAt: Date;

src/middleware.ts

@@ -33,7 +33,7 @@ const middlewareConfig: MiddlewareConfig = {
     "/api/event/*",
 
     // ADMIN API
-    // >> buat disini <<
+    // >> buat dibawah sini <<
 
     // Akses awal
     "/api/get-cookie",