From f489d9acb7fcdf62f32447932da5d55985f20d49 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Wed, 16 Apr 2025 15:11:39 +0800
Subject: [PATCH] fix responsive admin forum deskripsi: - fix table

---
 src/app/api/admin/forum/komentar/route.ts     | 229 ++++++++-------
 src/app/api/admin/forum/posting/route.ts      | 276 +++++++++---------
 src/app/api/admin/forum/publish/route.ts      | 216 +++++++-------
 src/app/dev/admin/forum/main/page.tsx         |  18 +-
 .../dev/admin/forum/sub-menu/posting/page.tsx |   5 +-
 .../admin/forum/lib/api_fetch_admin_forum.ts  | 250 +++++++++-------
 .../admin/forum/main/dashboard.tsx            | 129 ++++----
 .../admin/forum/sub_menu/table_posting.tsx    | 183 ++++++------
 .../forum/sub_menu/table_report_komentar.tsx  | 152 +++-------
 .../forum/sub_menu/table_report_posting.tsx   | 151 +++-------
 .../admin/job/child/publish/index.tsx         |  16 +-
 11 files changed, 772 insertions(+), 853 deletions(-)

diff --git a/src/app/api/admin/forum/komentar/route.ts b/src/app/api/admin/forum/komentar/route.ts
index c9a7f0e2..7353924c 100644
--- a/src/app/api/admin/forum/komentar/route.ts
+++ b/src/app/api/admin/forum/komentar/route.ts
@@ -1,121 +1,128 @@
 import { prisma } from "@/lib";
 import backendLogger from "@/util/backendLogger";
-import _ from 'lodash';
+import _ from "lodash";
 import { NextResponse } from "next/server";
 
 export async function GET(request: Request) {
+  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;
 
-    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",
+    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: {
+              username: true,
+              Profile: {
+                select: {
+                  id: true,
+                  name: true,
                 },
-                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",
-                    },
-                  },
-                }
-            })
+              },
+            },
+          },
+          Forum_Komentar: {
+            select: {
+              komentar: 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: {
+              username: true,
+              Profile: {
+                select: {
+                  id: true,
+                  name: true,
+                },
+              },
+            },
+          },
+          Forum_Komentar: {
+            select: {
+              komentar: 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
-        },
-        )
+      fixData = {
+        data: data,
+        nCount: _.ceil(nCount / takeData),
+      };
     }
-}
\ No newline at end of file
+
+    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,
+    });
+  }
+}
diff --git a/src/app/api/admin/forum/posting/route.ts b/src/app/api/admin/forum/posting/route.ts
index 27841bd5..51d36ec8 100644
--- a/src/app/api/admin/forum/posting/route.ts
+++ b/src/app/api/admin/forum/posting/route.ts
@@ -4,140 +4,150 @@ import _ from "lodash";
 import { NextResponse } from "next/server";
 
 export async function GET(request: Request) {
-    
-    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;
+  try {
+    let fixData;
 
-        if (!page) {
-            fixData = await prisma.forum_ReportPosting.findMany({
-                
-                orderBy: {
-                    createdAt: "desc",
-                },
-                where: {
-                    Forum_Posting: {
-                        isActive: true,
-                        diskusi: {
-                            contains: search ? search : '',
-                            mode: "insensitive"
-                        }
-                    },
-                },
-                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
+    if (!page) {
+      fixData = await prisma.forum_ReportPosting.findMany({
+        orderBy: {
+          createdAt: "desc",
         },
-            { status: 200 }
-        )
-    } catch (error) {
-        backendLogger.error("Error get data forum posting >>", error);
-        return NextResponse.json({
-            success: false,
-            message: "Error get data forum posting",
+        where: {
+          Forum_Posting: {
+            isActive: true,
+            diskusi: {
+              contains: search ? search : "",
+              mode: "insensitive",
+            },
+          },
         },
-            { status: 500 }
-        )
-    } 
-}
\ No newline at end of file
+        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,
+            },
+          },
+          Forum_Posting: {
+            select: {
+              diskusi: 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: {
+          Forum_Posting: {
+            isActive: true,
+            diskusi: {
+              contains: search ? search : "",
+              mode: "insensitive",
+            },
+          },
+        },
+      });
+
+      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 }
+    );
+  }
+}
diff --git a/src/app/api/admin/forum/publish/route.ts b/src/app/api/admin/forum/publish/route.ts
index 79c4fcb8..1bd4f355 100644
--- a/src/app/api/admin/forum/publish/route.ts
+++ b/src/app/api/admin/forum/publish/route.ts
@@ -4,116 +4,116 @@ import _ from "lodash";
 import { NextResponse } from "next/server";
 
 export async function GET(request: Request) {
+  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;
 
-    try {
-        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,
-                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,
-                },
-            });
-
-            const nCount = await prisma.forum_Posting.count({
-                where: {
-                    isActive: true,
-                    diskusi: {
-                        contains: search ? search : "",
-                        mode: "insensitive",
-                    },
-                },
-            });
-
-            fixData = {
-                data: data,
-                nCount: _.ceil(nCount / takeData)
-            }
-        }
-        return NextResponse.json({
-            success: true,
-            message: "Success get data table forum",
-            data: fixData
+    if (!page) {
+      fixData = await prisma.forum_Posting.findMany({
+        orderBy: {
+          createdAt: "desc",
         },
-            { status: 200 }
-        )
-    } catch (error) {
-        backendLogger.error("Error get data table forum", error)
-        return NextResponse.json({
-            success: false,
-            message: "Error get data table forum",
-            reason: (error as Error)
+        where: {
+          isActive: true,
+          diskusi: {
+            contains: search ? search : "",
+            mode: "insensitive",
+          },
         },
-            { status: 500 }
-        )
+        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,
+        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,
+        },
+      });
+
+      const nCount = await prisma.forum_Posting.count({
+        where: {
+          isActive: true,
+          diskusi: {
+            contains: search ? search : "",
+            mode: "insensitive",
+          },
+        },
+      });
+
+      fixData = {
+        data: data,
+        nCount: _.ceil(nCount / takeData),
+      };
     }
-}
\ No newline at end of file
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Success get data table forum",
+        data: fixData,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error get data table forum", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error get data table forum",
+        reason: error as Error,
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/dev/admin/forum/main/page.tsx b/src/app/dev/admin/forum/main/page.tsx
index 032267b4..ffd816d2 100644
--- a/src/app/dev/admin/forum/main/page.tsx
+++ b/src/app/dev/admin/forum/main/page.tsx
@@ -1,23 +1,13 @@
 import { AdminForum_Main } from "@/app_modules/admin/forum";
-import { adminForum_countLaporanKomentar } from "@/app_modules/admin/forum/fun/count/fun_count_laporan_komentar";
-import { adminForum_countLaporanPosting } from "@/app_modules/admin/forum/fun/count/fun_count_laporan_posting";
-import { adminForum_countPublish } from "@/app_modules/admin/forum/fun/count/fun_count_publish";
 
 export default async function Page() {
-//   await new Promise((a, b) => {
-//     setTimeout(a, 4000);
-//   });
-  const countPublish = await adminForum_countPublish();
-  const countLaporanPosting = await adminForum_countLaporanPosting()
-   const countLaporanKomentar = await adminForum_countLaporanKomentar();
+  //   await new Promise((a, b) => {
+  //     setTimeout(a, 4000);
+  //   });
 
   return (
     <>
-      <AdminForum_Main
-        // countPublish={countPublish}
-        // countLaporanPosting={countLaporanPosting}
-        // countLaporanKomentar={countLaporanKomentar}
-      />
+      <AdminForum_Main />
     </>
   );
 }
diff --git a/src/app/dev/admin/forum/sub-menu/posting/page.tsx b/src/app/dev/admin/forum/sub-menu/posting/page.tsx
index 55e43394..bec91655 100644
--- a/src/app/dev/admin/forum/sub-menu/posting/page.tsx
+++ b/src/app/dev/admin/forum/sub-menu/posting/page.tsx
@@ -1,12 +1,9 @@
 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() {
-  
-
   return (
     <>
-      <AdminForum_TablePublish  />
+      <AdminForum_TablePublish />
     </>
   );
 }
diff --git a/src/app_modules/admin/forum/lib/api_fetch_admin_forum.ts b/src/app_modules/admin/forum/lib/api_fetch_admin_forum.ts
index d611494e..3c6f5367 100644
--- 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,133 +1,161 @@
 export {
-    apiGetAdminForumPublishCountDasboard,
-    apiGetAdminCountForumReportPosting,
-    apiGetAdminCountForumReportKomentar,
-    apiGetAdminForumReportPosting,
-    apiGetAdminForumReportKomentar,
-    apiGetAdminForumPublish,
-    apiGetAdminHasilReportPosting
-}
+  apiGetAdminForumPublishCountDasboard,
+  apiGetAdminCountForumReportPosting,
+  apiGetAdminCountForumReportKomentar,
+  apiGetAdminForumReportPosting,
+  apiGetAdminForumReportKomentar,
+  apiGetAdminForumPublish,
+  apiGetAdminHasilReportPosting,
+};
 
 const apiGetAdminForumPublishCountDasboard = async () => {
-    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
+  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/dashboard/publish`, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        },
-    })
+  const response = await fetch(`/api/admin/forum/dashboard/publish`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
 
-    return await response.json().catch(() => null);
-}
+  return await response.json().catch(() => null);
+};
 
 const apiGetAdminCountForumReportPosting = async () => {
-    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
+  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/dashboard/report_posting`, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        },
-    })
+  const response = await fetch(`/api/admin/forum/dashboard/report_posting`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
 
-
-    return await response.json().catch(() => null);
-}
+  return await response.json().catch(() => null);
+};
 
 const apiGetAdminCountForumReportKomentar = async () => {
-    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
+  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/dashboard/report_komentar`, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        },
-    })
+  const response = await fetch(`/api/admin/forum/dashboard/report_komentar`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
 
-    return await response.json().catch(() => null);
-}
-const apiGetAdminForumReportPosting = async ({ page }: { page?: string }) => {
-    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
+  return await response.json().catch(() => null);
+};
+const apiGetAdminForumReportPosting = async ({
+  page,
+  search,
+}: {
+  page?: string;
+  search?: 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/posting${isPage}`, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        },
-    })
+  const isPage = page ? `?page=${page}` : "";
+  const isSeach = search ? `&search=${search}` : "";
+  const response = await fetch(`/api/admin/forum/posting${isPage}${isSeach}`, {
+    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);
+  return await response.json().catch(() => null);
+};
+const apiGetAdminForumReportKomentar = async ({
+  page,
+  search,
+}: {
+  page?: string;
+  search?: 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}`,
-        },
-    })
+  const isPage = page ? `?page=${page}` : "";
+  const isSeach = search ? `&search=${search}` : "";
+  const response = await fetch(`/api/admin/forum/komentar${isPage}${isSeach}`, {
+    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);
+  return await response.json().catch(() => null);
+};
+const apiGetAdminForumPublish = async ({
+  page,
+  search,
+}: {
+  page?: string;
+  search?: 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}`,
-        },
-    })
+  const isPage = page ? `?page=${page}` : "";
+  const isSearch = search ? `&search=${search}` : "";
+  const response = await fetch(
+    `/api/admin/forum/publish/${isPage}${isSearch}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "Access-Control-Allow-Origin": "*",
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
 
+  return await response.json().catch(() => null);
+};
 
-    return await response.json().catch(() => null);
-}
+const apiGetAdminHasilReportPosting = async ({
+  page,
+  id,
+}: {
+  page?: string;
+  id: string;
+}) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
 
-const apiGetAdminHasilReportPosting = async ({ page, id }: { page?: string, id: 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/${id}/report_posting${isPage}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "Access-Control-Allow-Origin": "*",
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
 
-    const isPage = page ? `?page=${page}` : "";
-    const response = await fetch(`/api/admin/forum/${id}/report_posting${isPage}`, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        }
-    })
-
-    return await response.json().catch(() => null);
-
-}
\ No newline at end of file
+  return await response.json().catch(() => null);
+};
diff --git a/src/app_modules/admin/forum/main/dashboard.tsx b/src/app_modules/admin/forum/main/dashboard.tsx
index 54fdd1e4..b6e11873 100644
--- a/src/app_modules/admin/forum/main/dashboard.tsx
+++ b/src/app_modules/admin/forum/main/dashboard.tsx
@@ -1,27 +1,38 @@
 "use client";
 
-import { Flex, Group, Paper, SimpleGrid, Stack, Text, ThemeIcon, Title } from "@mantine/core";
-import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { IconFlag, IconMessageReport, IconUpload } from "@tabler/icons-react";
 import { AccentColor } from "@/app_modules/_global/color";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { useShallowEffect } from "@mantine/hooks";
-import { clientLogger } from "@/util/clientLogger";
-import global_limit from "@/lib/limit";
-import { apiGetAdminCountForumReportKomentar, apiGetAdminCountForumReportPosting, apiGetAdminForumPublishCountDasboard } from "../lib/api_fetch_admin_forum";
-import { useState } from "react";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import global_limit from "@/lib/limit";
+import { clientLogger } from "@/util/clientLogger";
+import {
+  Flex,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  ThemeIcon,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconFlag, IconMessageReport, IconUpload } from "@tabler/icons-react";
+import { useState } from "react";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import {
+  apiGetAdminCountForumReportKomentar,
+  apiGetAdminCountForumReportPosting,
+  apiGetAdminForumPublish,
+  apiGetAdminForumPublishCountDasboard,
+  apiGetAdminForumReportKomentar,
+  apiGetAdminForumReportPosting,
+} from "../lib/api_fetch_admin_forum";
 
 export default function AdminForum_Main() {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Forum" />
-        <ForumMain
-        // countPublish={countPublish}
-        // countLaporanPosting={countLaporanPosting}
-        // countLaporanKomentar={countLaporanKomentar}
-        />
+        <ForumMain />
       </Stack>
     </>
   );
@@ -29,13 +40,16 @@ export default function AdminForum_Main() {
 
 function ForumMain() {
   const [countPublish, setCountPublish] = useState<number | null>(null);
-  const [countLaporanPosting, setCountLaporanPosting] = useState<number | null>(null);
-  const [countLaporanKomentar, setCountLaporanKomentar] = useState<number | null>(null);
-
+  const [countLaporanPosting, setCountLaporanPosting] = useState<number | null>(
+    null
+  );
+  const [countLaporanKomentar, setCountLaporanKomentar] = useState<
+    number | null
+  >(null);
 
   useShallowEffect(() => {
     handlerLoadData();
-  }, [])
+  }, []);
 
   async function handlerLoadData() {
     try {
@@ -43,7 +57,7 @@ function ForumMain() {
         global_limit(() => onLoadCountPublish()),
         global_limit(() => onLoadCountReportPosting()),
         global_limit(() => onLoadCountReportKomentar()),
-      ]
+      ];
       const result = await Promise.all(listLoadData);
     } catch (error) {
       clientLogger.error("Error handler load data", error);
@@ -52,9 +66,9 @@ function ForumMain() {
 
   async function onLoadCountPublish() {
     try {
-      const response = await apiGetAdminForumPublishCountDasboard()
+      const response = await apiGetAdminForumPublish({});
       if (response) {
-        setCountPublish(response.data)
+        setCountPublish(response.data.length);
       }
     } catch (error) {
       clientLogger.error("Error get count publish", error);
@@ -63,9 +77,9 @@ function ForumMain() {
 
   async function onLoadCountReportPosting() {
     try {
-      const response = await apiGetAdminCountForumReportPosting()
+      const response = await apiGetAdminForumReportPosting({});
       if (response) {
-        setCountLaporanPosting(response.data)
+        setCountLaporanPosting(response.data.length);
       }
     } catch (error) {
       clientLogger.error("Error get count publish", error);
@@ -74,9 +88,9 @@ function ForumMain() {
 
   async function onLoadCountReportKomentar() {
     try {
-      const response = await apiGetAdminCountForumReportKomentar()
+      const response = await apiGetAdminForumReportKomentar({});
       if (response) {
-        setCountLaporanKomentar(response.data)
+        setCountLaporanKomentar(response.data.length);
       }
     } catch (error) {
       clientLogger.error("Error get count publish", error);
@@ -87,41 +101,44 @@ function ForumMain() {
     {
       id: 1,
       name: "Publish",
-      jumlah: countPublish == null ? (
-        <CustomSkeleton width={40} height={40} />
-      ) : countPublish ? (
-        countPublish
-      ) : (
-        "-"
-      ),
+      jumlah:
+        countPublish == null ? (
+          <CustomSkeleton width={40} height={40} />
+        ) : countPublish ? (
+          countPublish
+        ) : (
+          "-"
+        ),
       color: "green",
-      icon: <IconUpload size={18} color="#4CAF4F" />
+      icon: <IconUpload size={18} color="#4CAF4F" />,
     },
     {
       id: 2,
       name: "Report Posting",
-      jumlah: countLaporanPosting == null ? (
-        <CustomSkeleton width={40} height={40} />
-      ) : countLaporanPosting ? (
-        countLaporanPosting
-      ) : (
-        "-"
-      ),
+      jumlah:
+        countLaporanPosting == null ? (
+          <CustomSkeleton width={40} height={40} />
+        ) : countLaporanPosting ? (
+          countLaporanPosting
+        ) : (
+          "-"
+        ),
       color: "orange",
-      icon: <IconFlag size={18} color="#FF9800" />
+      icon: <IconFlag size={18} color="#FF9800" />,
     },
     {
       id: 3,
       name: "Report Komentar",
-      jumlah: countLaporanKomentar == null ? (
-        <CustomSkeleton width={40} height={40} />
-      ) : countLaporanKomentar ? (
-        countLaporanKomentar
-      ) : (
-        "-"
-      ),
+      jumlah:
+        countLaporanKomentar == null ? (
+          <CustomSkeleton width={40} height={40} />
+        ) : countLaporanKomentar ? (
+          countLaporanKomentar
+        ) : (
+          "-"
+        ),
       color: "red",
-      icon: <IconMessageReport size={18} color="#F44336" />
+      icon: <IconMessageReport size={18} color="#F44336" />,
     },
   ];
   return (
@@ -142,17 +159,17 @@ function ForumMain() {
             shadow="md"
             radius="md"
             p="md"
-          // sx={{ borderColor: e.color, borderStyle: "solid" }}
+            // sx={{ borderColor: e.color, borderStyle: "solid" }}
           >
             <Stack spacing={0}>
-              <Text fw={"bold"} c={AccentColor.white}>{e.name}</Text>
+              <Text fw={"bold"} c={AccentColor.white}>
+                {e.name}
+              </Text>
               <Flex align={"center"} justify={"space-between"}>
-                <Title color={AccentColor.white}>{e.jumlah ? e.jumlah : 0}</Title>
-                <ThemeIcon
-                  radius={"xl"}
-                  size={"md"}
-                  color={AccentColor.white}
-                >
+                <Title color={AccentColor.white}>
+                  {e.jumlah ? e.jumlah : 0}
+                </Title>
+                <ThemeIcon radius={"xl"} size={"md"} color={AccentColor.white}>
                   {e.icon}
                 </ThemeIcon>
               </Flex>
diff --git a/src/app_modules/admin/forum/sub_menu/table_posting.tsx b/src/app_modules/admin/forum/sub_menu/table_posting.tsx
index 5f03dc65..dd66322f 100644
--- a/src/app_modules/admin/forum/sub_menu/table_posting.tsx
+++ b/src/app_modules/admin/forum/sub_menu/table_posting.tsx
@@ -1,64 +1,60 @@
 "use client";
 
-
-import { RouterAdminForum } from "@/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_POSTING } from "@/app_modules/forum/model/interface";
+import { RouterAdminForum } from "@/lib/router_admin/router_admin_forum";
 import { clientLogger } from "@/util/clientLogger";
 import {
   Badge,
   Box,
   Button,
   Center,
-  Pagination,
   Paper,
   ScrollArea,
   Spoiler,
   Stack,
   Table,
   Text,
-  TextInput
+  TextInput,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconFlag3, IconMessageCircle, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 import ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
 import { apiGetAdminForumPublish } from "../lib/api_fetch_admin_forum";
 
-
 export default function AdminForum_TablePosting() {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Forum" />
         <TablePublish />
-        {/* <pre>{JSON.stringify(listPublish, null, 2)}</pre> */}
       </Stack>
     </>
   );
 }
 
-
 function TablePublish() {
   const router = useRouter();
   const [data, setData] = useState<MODEL_FORUM_POSTING[] | null>(null);
   const [nPage, setNPage] = useState<number>(1);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
-
+  const [isDelete, setDelete] = useState(false);
 
   useShallowEffect(() => {
     const loadInitialData = async () => {
       try {
         const response = await apiGetAdminForumPublish({
-          page: `${activePage}`
-        })
-        
-        
+          page: `${activePage}`,
+          search: isSearch,
+        });
+
         if (response?.success && response?.data.data) {
           setData(response.data.data);
           setNPage(response.data.nCount || 1);
@@ -70,27 +66,22 @@ function TablePublish() {
         clientLogger.error("Invlid data format recieved:", error);
         setData([]);
       }
-    }
+    };
     loadInitialData();
-  }, [activePage, isSearch]);
-  
+  }, [activePage, isSearch, isDelete]);
+
   const onSearch = (searchTerm: string) => {
     setSearch(searchTerm);
     setActivePage(1);
-  }
+  };
 
-  async function onLoadData() {
-    const loadData = await apiGetAdminForumPublish({
-      page: `${activePage}`
-    });
-    setData(loadData.data.data);
-    setNPage(loadData.data.nCount);
+  async function onDelete(val: boolean) {
+    setDelete(val);
   }
 
   const onPageClick = (page: number) => {
     setActivePage(page);
-  }
-
+  };
 
   const renderTableBody = () => {
     if (!Array.isArray(data) || data.length === 0) {
@@ -102,42 +93,77 @@ function TablePublish() {
             </Center>
           </td>
         </tr>
-      )
+      );
     }
     return data?.map((e, i) => (
-      <tr key={i}>
+      <tr key={i} style={{
+        color: AdminColor.white
+      }}>
+        {/* Aksi */}
         <td>
-          <Center w={100}>
-            <Text c={AdminColor.white} lineClamp={1}>{e?.Author?.username}</Text>
-          </Center>
+          <Stack align="center" spacing={"xs"}>
+            <ButtonAction postingId={e?.id} />
+            <ComponentAdminForum_ButtonDeletePosting
+              postingId={e?.id}
+              onSuccesDelete={(val) => {
+                onDelete(val);
+              }}
+            />
+          </Stack>
         </td>
+
+        {/* Status */}
         <td>
-          <Center w={100}>
+          <Center>
             <Badge
               color={
-                (e?.ForumMaster_StatusPosting?.id as any) === 1 ? "green" : "red"
+                (e?.ForumMaster_StatusPosting?.id as any) === 1
+                  ? "green"
+                  : "red"
               }
             >
               {e?.ForumMaster_StatusPosting?.status}
             </Badge>
           </Center>
         </td>
+
+        {/* Author */}
         <td>
-          <Center w={150}>
-            <Text c={AdminColor.white}>
-              {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
-               new Date(e?.createdAt)
-              )}
+          <Box w={100}>
+            <Text lineClamp={1}>
+              {e?.Author?.username}
             </Text>
-          </Center>
+          </Box>
         </td>
+
+        {/* Deskripsi */}
+        <td>
+          <Box w={150}>
+            <Spoiler
+              // w={400}
+              maxHeight={50}
+              hideLabel="sembunyikan"
+              showLabel="tampilkan"
+            >
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: e?.diskusi,
+                }}
+              />
+            </Spoiler>
+          </Box>
+        </td>
+
+        {/* Jumlah komentar */}
         <td>
           <Center w={150}>
-            <Text c={AdminColor.white} fw={"bold"} fz={"lg"}>
+            <Text fw={"bold"} fz={"lg"}>
               {e?.Forum_Komentar.length}
             </Text>
           </Center>
         </td>
+
+        {/* Jumlah report */}
         <td>
           <Center w={150}>
             <Text
@@ -149,23 +175,19 @@ function TablePublish() {
             </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>
+
+        {/* <td>
+          <Box w={100}>
+            <Text>
+              {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
+                new Date(e?.createdAt)
+              )}
+            </Text>
+          </Box>
+        </td> */}
       </tr>
     ));
-  }
-
+  };
 
   return (
     <>
@@ -184,25 +206,6 @@ function TablePublish() {
             />
           }
         />
-        {/* <Group
-         position="apart"
-         bg={"green.4"}
-         p={"xs"}
-         style={{ borderRadius: "6px" }}
-       >
-         <Title order={4} c={"white"}>
-           Posting
-         </Title>
-         <TextInput
-           icon={<IconSearch size={20} />}
-           radius={"xl"}
-           placeholder="Cari postingan"
-           onChange={(val) => {
-             onSearch(val.currentTarget.value);
-           }}
-         />
-       </Group> */}
-
 
         {!data ? (
           <CustomSkeleton height={"80vh"} width={"100%"} />
@@ -215,19 +218,21 @@ function TablePublish() {
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-
-
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center c={AdminColor.white}>Username</Center>
+                      <Center c={AdminColor.white}>Aksi</Center>
                     </th>
+
                     <th>
                       <Center c={AdminColor.white}>Status</Center>
                     </th>
                     <th>
-                      <Center c={AdminColor.white}>Tanggal Publish</Center>
+                      <Text c={AdminColor.white}>Username</Text>
+                    </th>
+                    <th>
+                      <Text c={AdminColor.white}>Postingan</Text>
                     </th>
                     <th>
                       <Center c={AdminColor.white}>Komentar Aktif</Center>
@@ -235,23 +240,18 @@ function TablePublish() {
                     <th>
                       <Center c={AdminColor.white}>Total Report Posting</Center>
                     </th>
-                    <th>
-                      <Center c={AdminColor.white}>Aksi</Center>
-                    </th>
                   </tr>
                 </thead>
                 <tbody>{renderTableBody()}</tbody>
               </Table>
             </ScrollArea>
-            <Center mt={"xl"}>
-              <Pagination
-                value={activePage}
-                total={nPage}
-                onChange={(val) => {
-                  onPageClick(val);
-                }}
-              />
-            </Center>
+            <Admin_V3_ComponentPaginationBreakpoint
+              value={activePage}
+              total={nPage}
+              onChange={(val) => {
+                onPageClick(val);
+              }}
+            />
           </Paper>
         )}
       </Stack>
@@ -259,13 +259,11 @@ function TablePublish() {
   );
 }
 
-
 function ButtonAction({ postingId }: { postingId: string }) {
   const router = useRouter();
   const [loadingKomentar, setLoadingKomentar] = useState(false);
   const [loadingReport, setLoadingReport] = useState(false);
 
-
   return (
     <>
       <Button
@@ -300,13 +298,11 @@ 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) {
@@ -374,6 +370,3 @@ function ButtonAction({ postingId }: { postingId: string }) {
 //     </>
 //   );
 // }
-
-
-
diff --git a/src/app_modules/admin/forum/sub_menu/table_report_komentar.tsx b/src/app_modules/admin/forum/sub_menu/table_report_komentar.tsx
index 80f2616c..621e8d95 100644
--- a/src/app_modules/admin/forum/sub_menu/table_report_komentar.tsx
+++ b/src/app_modules/admin/forum/sub_menu/table_report_komentar.tsx
@@ -1,19 +1,15 @@
 "use client";
 
-
-import { RouterAdminForum } from "@/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 { MODEL_FORUM_REPORT_KOMENTAR } from "@/app_modules/forum/model/interface";
+import { RouterAdminForum } from "@/lib/router_admin/router_admin_forum";
 import { clientLogger } from "@/util/clientLogger";
 import {
   Box,
   Button,
   Center,
-  Pagination,
   Paper,
   ScrollArea,
   Spoiler,
@@ -27,9 +23,9 @@ import { IconFlag3, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 import { apiGetAdminForumReportKomentar } from "../lib/api_fetch_admin_forum";
 
-
 export default function AdminForum_TableReportKomentar() {
   return (
     <>
@@ -42,7 +38,6 @@ export default function AdminForum_TableReportKomentar() {
   );
 }
 
-
 function TableView() {
   const router = useRouter();
   const [data, setData] = useState<MODEL_FORUM_REPORT_KOMENTAR[] | null>(null);
@@ -50,50 +45,37 @@ function TableView() {
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
 
-
   useShallowEffect(() => {
     const loadInitialData = async () => {
       try {
         const response = await apiGetAdminForumReportKomentar({
-          page: `${activePage}`
-        })
+          page: `${activePage}`,
+          search: isSearch,
+        });
+
         if (response?.success && response?.data.data) {
           setData(response.data.data);
-          setNPage(response.data.nCount || 1)
+          setNPage(response.data.nCount || 1);
         } else {
-          console.error("Invalid data format recieved", response)
-          setData([])
+          console.error("Invalid data format recieved", response);
+          setData([]);
         }
       } catch (error) {
-        clientLogger.error("Invalid data format recieved", error)
-        setData([])
+        clientLogger.error("Invalid data format recieved", error);
+        setData([]);
       }
-    }
+    };
     loadInitialData();
   }, [activePage, isSearch]);
 
-
-  // async function onLoadData({ onLoad }: { onLoad: (val: any) => void }) {
-  //   const loadData = await apiGetAdminForumReportKomentar(
-  //     { page: `${activePage}` });
-  //   onLoad(loadData);
-
-
-  //   setData(loadData.data.data);
-  //   setNPage(loadData.data.nPage);
-  // }
-
-
   const onSearch = (searchTerm: string) => {
     setSearch(searchTerm);
     setActivePage(1);
-  }
-
+  };
 
   const onPageClick = (page: number) => {
     setActivePage(page);
-  }
-
+  };
 
   const renderTableBody = () => {
     if (!Array.isArray(data) || data.length === 0) {
@@ -105,75 +87,66 @@ function TableView() {
             </Center>
           </td>
         </tr>
-      )
+      );
     }
     return data?.map((e, i) => (
       <tr key={i}>
         <td>
-          <Center w={150}>
-            <Text c={AdminColor.white} lineClamp={1}>{e?.User?.Profile?.name}</Text>
-          </Center>
+          <Box w={100}>
+            <Text c={AdminColor.white} lineClamp={1}>
+              {e?.User?.username}
+            </Text>
+          </Box>
         </td>
         <td>
-          <Center w={150}>
-            {e?.forumMaster_KategoriReportId === null ? (
+          <Box w={150}>
+            {!e?.ForumMaster_KategoriReport ? (
               <Text c={AdminColor.white}>Lainnya</Text>
             ) : (
-              <Text c={AdminColor.white} lineClamp={1}>{e?.ForumMaster_KategoriReport?.title}</Text>
+              <Text c={AdminColor.white} lineClamp={1}>
+                {e?.ForumMaster_KategoriReport?.title}
+              </Text>
             )}
-          </Center>
+          </Box>
         </td>
 
-
         <td>
-          <Box w={250}>
+          <Box w={150}>
             <Spoiler
-              style={{ textAlign: "justify", textJustify: "auto"}}
+              style={{ textAlign: "justify", textJustify: "auto" }}
               c={AdminColor.white}
               // w={400}
-              maxHeight={60}
+              maxHeight={50}
               hideLabel="sembunyikan"
               showLabel="tampilkan"
             >
               <div
                 dangerouslySetInnerHTML={{
-                  __html: e?.deskripsi,
+                  __html: e?.Forum_Komentar.komentar,
                 }}
               />
             </Spoiler>
           </Box>
         </td>
 
-
         <td>
-          <Center w={150} >
+          <Box w={150}>
             <Text c={AdminColor.white}>
               {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
                 new Date(e?.createdAt)
               )}
             </Text>
-          </Center>
+          </Box>
         </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>
     ));
-  }
-
+  };
 
   return (
     <>
@@ -185,32 +158,13 @@ function TableView() {
             <TextInput
               icon={<IconSearch size={20} />}
               radius={"xl"}
-              placeholder="Cari postingan"
+              placeholder="Cari Komentar"
               onChange={(val) => {
                 onSearch(val.currentTarget.value);
               }}
             />
           }
         />
-        {/* <Group
-         position="apart"
-         bg={"yellow.4"}
-         p={"xs"}
-         style={{ borderRadius: "6px" }}
-       >
-         <Title order={4} c={"white"}>
-           Report Komentar
-         </Title>
-         <TextInput
-           icon={<IconSearch size={20} />}
-           radius={"xl"}
-           placeholder="Cari postingan"
-           onChange={(val) => {
-             onSearch(val.currentTarget.value);
-           }}
-         />
-       </Group> */}
-
 
         {!data ? (
           <CustomSkeleton height={"80vh"} width={"100%"} />
@@ -223,50 +177,40 @@ function TableView() {
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-
-
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center c={AdminColor.white}>Pelapor</Center>
+                      <Text c={AdminColor.white}>Pelaporr</Text>
                     </th>
 
-
                     <th>
-                      <Center c={AdminColor.white}>Jenis Laporan</Center>
+                      <Text c={AdminColor.white}>Jenis Laporan</Text>
                     </th>
 
-
                     <th>
-                      <Center c={AdminColor.white}>Komentar</Center>
+                      <Text c={AdminColor.white}>Komentar</Text>
                     </th>
 
-
                     <th>
-                      <Center c={AdminColor.white}>Tanggal Report</Center>
+                      <Text c={AdminColor.white}>Tanggal Report</Text>
                     </th>
 
-
                     <th>
                       <Center c={AdminColor.white}>Aksi</Center>
                     </th>
-
-
                   </tr>
                 </thead>
                 <tbody>{renderTableBody()}</tbody>
               </Table>
             </ScrollArea>
-            <Center mt={"xl"}>
-              <Pagination
-                value={activePage}
-                total={nPage}
-                onChange={(val) => {
-                  onPageClick(val);
-                }}
-              />
-            </Center>
+            <Admin_V3_ComponentPaginationBreakpoint
+              value={activePage}
+              total={nPage}
+              onChange={(val) => {
+                onPageClick(val);
+              }}
+            />
           </Paper>
         )}
       </Stack>
@@ -274,7 +218,6 @@ function TableView() {
   );
 }
 
-
 function ButtonLihatReportLainnya({ komentarId }: { komentarId: string }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
@@ -297,6 +240,3 @@ function ButtonLihatReportLainnya({ komentarId }: { komentarId: string }) {
     </>
   );
 }
-
-
-
diff --git a/src/app_modules/admin/forum/sub_menu/table_report_posting.tsx b/src/app_modules/admin/forum/sub_menu/table_report_posting.tsx
index 8de23063..47fd57ff 100644
--- a/src/app_modules/admin/forum/sub_menu/table_report_posting.tsx
+++ b/src/app_modules/admin/forum/sub_menu/table_report_posting.tsx
@@ -1,39 +1,31 @@
 "use client";
 
-import { RouterAdminForum } from "@/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 {
-  MODEL_FORUM_REPORT_POSTING
-} from "@/app_modules/forum/model/interface";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { MODEL_FORUM_REPORT_POSTING } from "@/app_modules/forum/model/interface";
+import { RouterAdminForum } from "@/lib/router_admin/router_admin_forum";
+import { clientLogger } from "@/util/clientLogger";
 import {
   Badge,
   Box,
   Button,
   Center,
-  Group,
-  Pagination,
   Paper,
   ScrollArea,
   Spoiler,
   Stack,
   Table,
   Text,
-  TextInput,
-  Title
+  TextInput
 } 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 ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
-import adminForum_funGetAllReportPosting from "../fun/get/get_all_report_posting";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { useShallowEffect } from "@mantine/hooks";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 import { apiGetAdminForumReportPosting } from "../lib/api_fetch_admin_forum";
-import { clientLogger } from "@/util/clientLogger";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 export default function AdminForum_TableReportPosting() {
   return (
@@ -59,20 +51,20 @@ function TableView() {
       try {
         const response = await apiGetAdminForumReportPosting({
           page: `${activePage}`,
-        })
+          search: isSearch,
+        });
 
         if (response?.success && response?.data.data) {
           setData(response.data.data);
-          setNPage(response.data.nCount || 1)
+          setNPage(response.data.nCount || 1);
         } else {
-          console.error("Invalid data format recieved", response),
-            setData([])
+          console.error("Invalid data format recieved", response), setData([]);
         }
       } catch (error) {
-        clientLogger.error("Invalid data format recieved", error)
-        setData([])
+        clientLogger.error("Invalid data format recieved", error);
+        setData([]);
       }
-    }
+    };
     loadInitialData();
   }, [activePage, isSearch]);
   async function onSearch(searchTerm: string) {
@@ -82,7 +74,7 @@ function TableView() {
 
   const onPageClick = (page: number) => {
     setActivePage(page);
-  }
+  };
 
   const renderTableBody = () => {
     if (!Array.isArray(data) || data.length === 0) {
@@ -94,36 +86,30 @@ function TableView() {
             </Center>
           </td>
         </tr>
-      )
+      );
     }
     return data?.map((e, i) => (
-      <tr key={i}>
+      <tr key={i} style={{ color: AdminColor.white }}>
         <td>
-          <Center c={AdminColor.white} w={150}>
+          <Text w={100}>
             <Text lineClamp={1}>{e?.User.username}</Text>
-          </Center>
+          </Text>
         </td>
         <td>
-          <Center c={AdminColor.white} w={150}>
+          <Text w={150}>
             {e?.forumMaster_KategoriReportId === null ? (
               <Text>Lainnya</Text>
             ) : (
               <Text lineClamp={1}>{e?.ForumMaster_KategoriReport.title}</Text>
             )}
-          </Center>
+          </Text>
         </td>
-  
-        {/* <td>
-          <Center w={200}>
-            <Text lineClamp={1}>{e?.Forum_Posting.Author.username}</Text>
-          </Center>
-        </td>
-  
+
         <td>
-          <Box w={400}>
+          <Box w={150}>
             <Spoiler
               // w={400}
-              maxHeight={60}
+              maxHeight={50}
               hideLabel="sembunyikan"
               showLabel="tampilkan"
             >
@@ -134,10 +120,10 @@ function TableView() {
               />
             </Spoiler>
           </Box>
-        </td> */}
-  
+        </td>
+
         <td>
-          <Center w={250}>
+          <Center>
             <Badge
               color={
                 (e?.Forum_Posting?.ForumMaster_StatusPosting?.id as any) === 1
@@ -149,34 +135,15 @@ function TableView() {
             </Badge>
           </Center>
         </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 postingId={e?.forum_PostingId} />
-            {/* <ComponentAdminForum_ButtonDeletePosting
-              postingId={e?.forum_PostingId}
-              onSuccesDelete={(val) => {
-                if (val) {
-                  onLoadData();
-                }
-              }}
-            /> */}
           </Stack>
         </td>
       </tr>
     ));
-  }
+  };
 
   return (
     <>
@@ -190,31 +157,11 @@ function TableView() {
               radius={"xl"}
               placeholder="Cari postingan"
               onChange={(val) => {
-
                 onSearch(val.currentTarget.value);
               }}
             />
           }
         />
-        {/* <Group
-          position="apart"
-          bg={"orange.4"}
-          p={"xs"}
-          style={{ borderRadius: "6px" }}
-        >
-          <Title order={4} c={"white"}>
-            Report Posting
-          </Title>
-          <TextInput
-            icon={<IconSearch size={20} />}
-            radius={"xl"}
-            placeholder="Cari postingan"
-            onChange={(val) => {
-
-              onSearch(val.currentTarget.value);
-            }}
-          />
-        </Group> */}
 
         {!data ? (
           <CustomSkeleton height={"80vh"} width={"100%"} />
@@ -227,27 +174,22 @@ function TableView() {
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center c={AdminColor.white}>Pelapor</Center>
+                      <Text c={AdminColor.white}>Pelapor</Text>
                     </th>
                     <th>
-                      <Center c={AdminColor.white}>Jenis Laporan</Center>
-                    </th>
-                    {/* <th>
-                      <Center c={AdminColor.white}>Author</Center>
+                      <Text c={AdminColor.white}>Jenis Laporan</Text>
                     </th>
                     <th>
-                      <Text>Postingan</Text>
-                    </th> */}
-                    <th>
-                      <Center c={AdminColor.white} w={250}>Status Posting</Center>
+                      <Text c={AdminColor.white}>Postingan</Text>
                     </th>
                     <th>
-                      <Center c={AdminColor.white}>Tanggal Report</Center>
+                      <Center c={AdminColor.white} w={250}>
+                        Status Posting
+                      </Center>
                     </th>
 
                     <th>
@@ -258,15 +200,13 @@ function TableView() {
                 <tbody>{renderTableBody()}</tbody>
               </Table>
             </ScrollArea>
-            <Center mt={"xl"}>
-              <Pagination
-                value={activePage}
-                total={nPage}
-                onChange={(val) => {
-                  onPageClick(val);
-                }}
-              />
-            </Center>
+            <Admin_V3_ComponentPaginationBreakpoint
+              value={activePage}
+              total={nPage}
+              onChange={(val) => {
+                onPageClick(val);
+              }}
+            />
           </Paper>
         )}
       </Stack>
@@ -280,8 +220,7 @@ function ButtonLihatReportLainnya({ postingId }: { postingId: string }) {
   return (
     <>
       <Button
-        fz={"xs"}
-        loading={loading ? true : false}
+        loading={loading}
         loaderPosition="center"
         radius={"xl"}
         w={170}
@@ -291,7 +230,7 @@ function ButtonLihatReportLainnya({ postingId }: { postingId: string }) {
           router.push(RouterAdminForum.report_posting + postingId);
         }}
       >
-        <Text>Lihat Report Lain</Text>
+        <Text> Report Lain</Text>
       </Button>
     </>
   );
diff --git a/src/app_modules/admin/job/child/publish/index.tsx b/src/app_modules/admin/job/child/publish/index.tsx
index c9db30d5..9493d42d 100644
--- a/src/app_modules/admin/job/child/publish/index.tsx
+++ b/src/app_modules/admin/job/child/publish/index.tsx
@@ -204,15 +204,13 @@ function TableStatus() {
                 <tbody>{renderTableBody()}</tbody>
               </Table>
             </ScrollArea>
-            <Center mt={"xl"}>
-              <Admin_V3_ComponentPaginationBreakpoint
-                value={activePage}
-                total={nPage}
-                onChange={(val) => {
-                  onPageClick(val);
-                }}
-              />
-            </Center>
+            <Admin_V3_ComponentPaginationBreakpoint
+              value={activePage}
+              total={nPage}
+              onChange={(val) => {
+                onPageClick(val);
+              }}
+            />
           </Paper>
         )}
       </Stack>