fix responsive admin forum

deskripsi:
- fix table postig
- fix report posting & report komentar

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

@@ -1,5 +1,6 @@
 import _ from "lodash";
 import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
 
 export async function GET(
   request: Request,

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

@@ -27,11 +27,7 @@ export async function GET(request: Request) {
             },
           },
         },
-        select: {
+        include: {
-          id: true,
-          isActive: true,
-          createdAt: true,
-          deskripsi: true,
           ForumMaster_KategoriReport: true,
           User: {
             select: {
@@ -46,6 +42,7 @@ export async function GET(request: Request) {
           },
           Forum_Komentar: {
             select: {
+              id: true,
               komentar: true,
             },
           },
@@ -67,11 +64,7 @@ export async function GET(request: Request) {
             },
           },
         },
-        select: {
+        include: {
-          id: true,
-          isActive: true,
-          createdAt: true,
-          deskripsi: true,
           ForumMaster_KategoriReport: true,
           User: {
             select: {
@@ -86,6 +79,7 @@ export async function GET(request: Request) {
           },
           Forum_Komentar: {
             select: {
+              id: true,
               komentar: true,
             },
           },

src/app_modules/_global/component/new/comp_set_inner_html.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { MainColor } from "../../color";
+
+export function Component_SetInnerHtml({
+  props,
+  color,
+}: {
+  props: string 
+  color?: string;
+}) {
+  return (
+    <>
+      <div
+        style={{
+          color: color ? color : MainColor.white,
+        }}
+        dangerouslySetInnerHTML={{
+          __html: props,
+        }}
+      />
+    </>
+  );
+}

src/app_modules/admin/forum/component/detail_one_komentar.tsx

@@ -1,7 +1,11 @@
 "use client";
 
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "@/app_modules/forum/model/interface";
+import { Component_SetInnerHtml } from "@/app_modules/_global/component/new/comp_set_inner_html";
+import {
+  MODEL_FORUM_KOMENTAR,
+  MODEL_FORUM_POSTING,
+} from "@/app_modules/forum/model/interface";
 import {
   Badge,
   Box,
@@ -21,13 +25,7 @@ export default function ComponentAdminForum_ViewOneDetailKomentar({
 }) {
   return (
     <>
-      <Stack spacing={"xs"} h={"100%"} w={"50%"}>
+      <Stack spacing={"xs"} h={"100%"}>
-        <Paper bg={AdminColor.softBlue} p={"xs"} style={{ borderRadius: "6px" }}>
-          <Title order={4} c={"white"}>
-            Detail Komentar
-          </Title>
-        </Paper>
-
         <Paper p={"md"} radius={"md"} bg={AdminColor.softBlue}>
           <Stack>
             <Stack spacing={5}>
@@ -38,23 +36,17 @@ export default function ComponentAdminForum_ViewOneDetailKomentar({
                     {dataKomentar?.Author?.username}
                   </Text>
                 </Text>
-
               </Group>
               {/* <Divider /> */}
             </Stack>
 
             <Box>
               <Spoiler
-                w={500}
                 hideLabel="sembunyikan"
                 maxHeight={100}
                 showLabel="tampilkan"
               >
-                <div
+                <Component_SetInnerHtml props={dataKomentar?.komentar} />
-                  dangerouslySetInnerHTML={{
-                    __html: dataKomentar?.komentar,
-                  }}
-                />
               </Spoiler>
             </Box>
           </Stack>

src/app_modules/admin/forum/component/detail_one_posting.tsx

@@ -22,7 +22,6 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
 }) {
   return (
     <>
-      <Admin_V3_ComponentBreakpoint>
         <Paper p={"md"} radius={"md"} bg={AdminColor.softBlue} shadow="sm">
           <Stack>
             <Stack spacing={5}>
@@ -65,7 +64,8 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
             </Box>
           </Stack>
         </Paper>
-      </Admin_V3_ComponentBreakpoint>
+      {/* <Admin_V3_ComponentBreakpoint>
+      </Admin_V3_ComponentBreakpoint> */}
     </>
   );
 }

src/app_modules/admin/forum/detail/detail_posting.tsx

@@ -45,6 +45,7 @@ import { apiAdminGetKomentarForumById } from "../lib/api_fetch_admin_forum";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import moment from "moment";
 import "moment/locale/id";
+import { Admin_ComponentModal } from "../../_admin_global/_component/comp_admin_modal";
 
 export default function AdminForum_DetailPosting({
   dataPosting,
@@ -72,10 +73,11 @@ function TableKomentar({ postingId }: { postingId: string }) {
   const [isSearch, setSearch] = useState("");
   const [isLoadingReport, setLoadingReport] = useState(false);
   const [idData, setIdData] = useState("");
+  const [isDelete, setDelete] = useState(false);
 
   useShallowEffect(() => {
     handleLoadData();
-  }, []);
+  }, [isSearch, activePage, isDelete]);
 
   async function handleLoadData() {
     try {
@@ -87,6 +89,7 @@ function TableKomentar({ postingId }: { postingId: string }) {
 
       if (response && response.success) {
         setData(response.data.data);
+        setDelete(false);
       }
     } catch (error) {
       console.error("Invalid data format received:", error);
@@ -97,24 +100,10 @@ function TableKomentar({ postingId }: { postingId: string }) {
   async function onSearch(s: string) {
     setSearch(s);
     setActivePage(1);
-    const loadData = await adminForum_getListKomentarById({
-      postingId: postingId,
-      page: 1,
-      search: s,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
   }
 
   async function onPageClick(p: any) {
     setActivePage(p);
-    const loadData = await adminForum_getListKomentarById({
-      postingId: postingId,
-      search: isSearch,
-      page: p,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
   }
 
   const rowTable = () => {
@@ -131,7 +120,7 @@ function TableKomentar({ postingId }: { postingId: string }) {
     }
 
     return data?.map((e, i) => (
-      <tr key={i}>
+      <tr key={i} >
         <td>
           <Box c={AdminColor.white} w={100}>
             <Text lineClamp={1}>{e?.Author?.username}</Text>
@@ -158,7 +147,7 @@ function TableKomentar({ postingId }: { postingId: string }) {
           </Box>
         </td>
         <td>
-          <Center w={100}>
+          <Center>
             <Text
               c={
                 e?.Forum_ReportKomentar?.length >= 3 ? "red" : AdminColor.white
@@ -171,7 +160,7 @@ function TableKomentar({ postingId }: { postingId: string }) {
           </Center>
         </td>
         <td>
-          <Stack align="center" spacing={"xs"} w={200}>
+          <Stack align="center" spacing={"xs"}>
             <Button
               disabled={e?.Forum_ReportKomentar.length <= 0 ? true : false}
               loaderPosition="center"
@@ -188,7 +177,12 @@ function TableKomentar({ postingId }: { postingId: string }) {
             >
               Lihat Report
             </Button>
-            <ButtonDeleteKomentar komentarId={e?.id} />
+            <ButtonDeleteKomentar
+              komentarId={e?.id}
+              onSuccessDelete={(val) => {
+                setDelete(val);
+              }}
+            />
           </Stack>
         </td>
       </tr>
@@ -269,7 +263,13 @@ function TableKomentar({ postingId }: { postingId: string }) {
   );
 }
 
-function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
+function ButtonDeleteKomentar({
+  komentarId,
+  onSuccessDelete,
+}: {
+  komentarId: string;
+  onSuccessDelete: (val: any) => void;
+}) {
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
   const [loadindDel, setLoadingDel] = useState(false);
@@ -280,7 +280,9 @@ function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
       if (res.status === 200) {
         setLoadingDel(false);
         setLoadingDel2(false);
+        onSuccessDelete(true);
         ComponentGlobal_NotifikasiBerhasil(res.message);
+
         close();
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
@@ -289,9 +291,15 @@ function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
   }
   return (
     <>
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+      <Admin_ComponentModal
+        opened={opened}
+        onClose={close}
+        withCloseButton={false}
+      >
         <Stack>
-          <Title order={5}>Anda yakin menghapus komentar ini ?</Title>
+          <Title order={5} c={AdminColor.white}>
+            Anda yakin menghapus komentar ini ?
+          </Title>
           <Group position="center">
             <Button
               radius={"xl"}
@@ -304,7 +312,7 @@ function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
             </Button>
             <Button
               loaderPosition="center"
-              loading={loadingDel2 ? true : false}
+              loading={loadingDel2}
               radius={"xl"}
               color="red"
               onClick={() => {
@@ -316,10 +324,10 @@ function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
             </Button>
           </Group>
         </Stack>
-      </Modal>
+      </Admin_ComponentModal>
 
       <Button
-        loading={loadindDel ? true : false}
+        loading={loadindDel}
         loaderPosition="center"
         radius={"xl"}
         w={170}

src/app_modules/admin/forum/fun/get/get_list_report_komentar_by_id.ts

@@ -19,7 +19,7 @@ export async function adminForum_getListReportKomentarbyId({
     take: takeData,
     skip: skipData,
     orderBy: {
-      createdAt: "desc"
+      createdAt: "desc",
     },
     where: {
       forum_KomentarId: komentarId,
@@ -32,6 +32,7 @@ export async function adminForum_getListReportKomentarbyId({
       ForumMaster_KategoriReport: true,
       User: {
         select: {
+          username: true,
           Profile: {
             select: {
               id: true,
@@ -51,8 +52,8 @@ export async function adminForum_getListReportKomentarbyId({
 
   const allData = {
     data: data,
-    nPage: ceil(nCount / takeData)
+    nPage: ceil(nCount / takeData),
-  }
+  };
 
   return allData;
 }

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

@@ -1,19 +1,21 @@
 "use client";
 
-import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
+import {
+  AdminColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
 import {
   MODEL_FORUM_KOMENTAR,
-  MODEL_FORUM_REPORT_POSTING
+  MODEL_FORUM_REPORT_POSTING,
 } from "@/app_modules/forum/model/interface";
 import mqtt_client from "@/util/mqtt_client";
 import {
+  Box,
   Button,
-  Center,
   Group,
-  Modal,
-  Pagination,
   Paper,
   ScrollArea,
   Spoiler,
@@ -23,20 +25,19 @@ import {
   Title
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import {
+import { IconTrash } from "@tabler/icons-react";
-  IconTrash
-} from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { Admin_ComponentModal } from "../../_admin_global/_component/comp_admin_modal";
 import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
 import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
+import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
 import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
 import ComponentAdminForum_ViewOneDetailKomentar from "../component/detail_one_komentar";
 import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
 import { adminForum_getListReportKomentarbyId } from "../fun/get/get_list_report_komentar_by_id";
-import adminForum_funGetOneKomentarById from "../fun/get/get_one_komentar_by_id";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminForum_HasilReportKomentar({
   komentarId,
@@ -48,14 +49,16 @@ export default function AdminForum_HasilReportKomentar({
   dataKomentar: MODEL_FORUM_KOMENTAR;
 }) {
   const [data, setData] = useState(dataKomentar);
-  console.log(komentarId);
 
   return (
     <>
       <Stack>
-        <ComponentAdminGlobal_HeaderTamplate name="Forum: Hasil Report Komentar" />
+        <ComponentAdminGlobal_HeaderTamplate name="Forum: Report" />
-        <Group position="apart">
         <AdminGlobal_ComponentBackButton />
+
+        <Admin_V3_ComponentBreakpoint>
+          <ComponentAdminForum_ViewOneDetailKomentar dataKomentar={data} />
+          <Group position="center">
             <ButtonDeleteKomentar
               komentarId={komentarId}
               data={data}
@@ -64,7 +67,8 @@ export default function AdminForum_HasilReportKomentar({
               }}
             />
           </Group>
-        <ComponentAdminForum_ViewOneDetailKomentar dataKomentar={data} />
+        </Admin_V3_ComponentBreakpoint>
+
         <HasilReportPosting listReport={listReport} komentarId={komentarId} />
         {/* <pre>{JSON.stringify(listReport, null, 2)}</pre> */}
       </Stack>
@@ -90,11 +94,12 @@ function ButtonDeleteKomentar({
       if (res.status === 200) {
         setLoadingDel2(false);
         close();
+        router.back();
 
-        const dataKomentar = await adminForum_funGetOneKomentarById({
+        // const dataKomentar = await adminForum_funGetOneKomentarById({
-          komentarId: komentarId,
+        //   komentarId: komentarId,
-        });
+        // });
-        onSuccess(dataKomentar);
+        // onSuccess(dataKomentar);
 
         const dataNotif = {
           appId: data.id,
@@ -125,9 +130,15 @@ function ButtonDeleteKomentar({
 
   return (
     <>
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+      <Admin_ComponentModal
+        opened={opened}
+        onClose={close}
+        withCloseButton={false}
+      >
         <Stack>
-          <Title order={5}>Anda yakin menghapus komentar ini ?</Title>
+          <Title order={5} c={MainColor.white}>
+            Anda yakin menghapus komentar ini ?
+          </Title>
           <Group position="center">
             <Button
               radius={"xl"}
@@ -151,7 +162,7 @@ function ButtonDeleteKomentar({
             </Button>
           </Group>
         </Stack>
-      </Modal>
+      </Admin_ComponentModal>
 
       {data?.isActive ? (
         <Button
@@ -186,7 +197,6 @@ function HasilReportPosting({
   const [nPage, setNPage] = useState(listReport.nPage);
   const [activePage, setActivePage] = useState(1);
 
-
   async function onPageClick(p: any) {
     setActivePage(p);
     const loadData = await adminForum_getListReportKomentarbyId({
@@ -198,24 +208,24 @@ function HasilReportPosting({
   }
 
   const TableRows = data?.map((e, i) => (
-    <tr key={i}>
+    <tr key={i} style={{ color: AdminColor.white }}>
       <td>
-        <Center w={150}>
+        <Box w={100}>
-          <Text>{e?.User?.Profile?.name}</Text>
+          <Text>{e?.User?.username}</Text>
-        </Center>
+        </Box>
       </td>
       <td>
-        <Center w={150}>
+        <Box w={150}>
           <Text>
             {e?.ForumMaster_KategoriReport?.title
               ? e?.ForumMaster_KategoriReport?.title
               : "-"}
           </Text>
-        </Center>
+        </Box>
       </td>
 
       <td>
-        <Center w={300}>
+        <Box w={300}>
           <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
             {e?.ForumMaster_KategoriReport?.deskripsi ? (
               <Text>{e?.ForumMaster_KategoriReport?.deskripsi}</Text>
@@ -223,19 +233,18 @@ function HasilReportPosting({
               <Text>-</Text>
             )}
           </Spoiler>
-        </Center>
+        </Box>
       </td>
 
       <td>
-        <Center w={300}>
+        <Box w={300}>
           <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
             {e?.deskripsi ? <Text>{e?.deskripsi}</Text> : <Text>-</Text>}
           </Spoiler>
-        </Center>
+        </Box>
       </td>
     </tr>
   ));
-  console.log("Ini data", data);
 
   return (
     <>
@@ -247,16 +256,8 @@ function HasilReportPosting({
           style={{ borderRadius: "6px" }}
         >
           <Title order={4} c={"white"}>
-            Report Komentar
+            Hasil Report Komentar
           </Title>
-          {/* <TextInput
-            icon={<IconSearch size={20} />}
-            radius={"xl"}
-            placeholder="Cari postingan"
-            onChange={(val) => {
-              onSearch(val.currentTarget.value);
-            }}
-          /> */}
         </Group>
 
         {_.isEmpty(data) ? (
@@ -270,21 +271,20 @@ function HasilReportPosting({
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-                
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center>Username</Center>
+                      <Text c={AdminColor.white}>Username</Text>
                     </th>
                     <th>
-                      <Center>Kategori</Center>
+                      <Text c={AdminColor.white}>Kategori</Text>
                     </th>
                     <th>
-                      <Center>Deskripsi</Center>
+                      <Text c={AdminColor.white}>Deskripsi</Text>
                     </th>
                     <th>
-                      <Center>Deskripsi Lainnya</Center>
+                      <Text c={AdminColor.white}>Deskripsi Lainnya</Text>
                     </th>
                   </tr>
                 </thead>
@@ -292,15 +292,11 @@ function HasilReportPosting({
                 <tbody>{TableRows}</tbody>
               </Table>
             </ScrollArea>
-            <Center mt={"xl"}>
+            <Admin_V3_ComponentPaginationBreakpoint
-              <Pagination
               value={activePage}
               total={nPage}
-                onChange={(val) => {
+              onChange={onPageClick}
-                  onPageClick(val);
-                }}
             />
-            </Center>
           </Paper>
         )}
       </Stack>

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

@@ -1,25 +1,26 @@
 "use client";
 
-import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
 import {
   MODEL_FORUM_POSTING,
   MODEL_FORUM_REPORT_POSTING,
 } from "@/app_modules/forum/model/interface";
+import mqtt_client from "@/util/mqtt_client";
 import {
   Button,
   Center,
   Group,
   Modal,
-  Pagination,
   Paper,
   ScrollArea,
   Spoiler,
   Stack,
   Table,
   Text,
-  Title,
+  Title
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconTrash } from "@tabler/icons-react";
@@ -28,12 +29,12 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
 import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
+import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
+import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
+import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
 import { adminForum_funDeletePostingById } from "../fun/delete/fun_delete_posting_by_id";
 import { adminForum_getListReportPostingById } from "../fun/get/get_list_report_posting_by_id";
-import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
-import mqtt_client from "@/util/mqtt_client";
-import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminForum_HasilReportPosting({
   dataPosting,
@@ -45,12 +46,16 @@ export default function AdminForum_HasilReportPosting({
   return (
     <>
       <Stack>
-        <ComponentAdminGlobal_HeaderTamplate name="Forum: Hasil Report Posting" />
+        <ComponentAdminGlobal_HeaderTamplate name="Forum: Report" />
-        <Group position="apart">
         <AdminGlobal_ComponentBackButton />
+
+        <Admin_V3_ComponentBreakpoint>
+          <ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
+          <Group position="center">
             <ButtonDeletePosting dataPosting={dataPosting} />
           </Group>
-        <ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
+        </Admin_V3_ComponentBreakpoint>
+
         <HasilReportPosting
           listReport={listReport}
           postingId={dataPosting.id}
@@ -196,7 +201,9 @@ function HasilReportPosting({
         <Center c={AdminColor.white} w={300}>
           <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
             {e?.ForumMaster_KategoriReport?.deskripsi ? (
-              <Text style={{textJustify: "auto", textAlign: "justify"}}>{e?.ForumMaster_KategoriReport?.deskripsi}</Text>
+              <Text style={{ textJustify: "auto", textAlign: "justify" }}>
+                {e?.ForumMaster_KategoriReport?.deskripsi}
+              </Text>
             ) : (
               <Text>-</Text>
             )}
@@ -207,7 +214,13 @@ function HasilReportPosting({
       <td>
         <Center c={AdminColor.white} w={300}>
           <Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
-            {e?.deskripsi ? <Text style={{textJustify: "auto", textAlign: "justify"}}>{e?.deskripsi}</Text> : <Text>-</Text>}
+            {e?.deskripsi ? (
+              <Text style={{ textJustify: "auto", textAlign: "justify" }}>
+                {e?.deskripsi}
+              </Text>
+            ) : (
+              <Text>-</Text>
+            )}
           </Spoiler>
         </Center>
       </td>
@@ -247,21 +260,28 @@ function HasilReportPosting({
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-                
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center w={150} c={AdminColor.white}>Username</Center>
+                      <Center w={150} c={AdminColor.white}>
+                        Username
+                      </Center>
                     </th>
                     <th>
-                      <Center w={150} c={AdminColor.white}>Kategori</Center>
+                      <Center w={150} c={AdminColor.white}>
+                        Kategori
+                      </Center>
                     </th>
                     <th>
-                      <Center w={300} c={AdminColor.white}>Deskripsi</Center>
+                      <Center w={300} c={AdminColor.white}>
+                        Deskripsi
+                      </Center>
                     </th>
                     <th>
-                      <Center w={300} c={AdminColor.white}>Deskripsi Lainnya</Center>
+                      <Center w={300} c={AdminColor.white}>
+                        Deskripsi Lainnya
+                      </Center>
                     </th>
                   </tr>
                 </thead>
@@ -269,15 +289,14 @@ function HasilReportPosting({
                 <tbody>{TableRows}</tbody>
               </Table>
             </ScrollArea>
-            <Center mt={"xl"}>
+
-              <Pagination
+            <Admin_V3_ComponentPaginationBreakpoint
               value={activePage}
               total={nPage}
               onChange={(val) => {
                 onPageClick(val);
               }}
             />
-            </Center>
           </Paper>
         )}
       </Stack>

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

@@ -27,6 +27,7 @@ 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";
+import { Component_SetInnerHtml } from "@/app_modules/_global/component/new/comp_set_inner_html";
 
 export default function AdminForum_TablePosting() {
   return (
@@ -126,25 +127,21 @@ function TablePublish() {
 
         {/* Deskripsi */}
         <td>
-          <Box w={150}>
+          <Box w={250}>
             <Spoiler
               // w={400}
               maxHeight={50}
               hideLabel="sembunyikan"
               showLabel="tampilkan"
             >
-              <div
+              <Component_SetInnerHtml props={e?.diskusi} />
-                dangerouslySetInnerHTML={{
-                  __html: e?.diskusi,
-                }}
-              />
             </Spoiler>
           </Box>
         </td>
 
         {/* Jumlah komentar */}
         <td>
-          <Center w={150}>
+          <Center>
             <Text fw={"bold"} fz={"lg"}>
               {e?.Forum_Komentar.length}
             </Text>
@@ -153,7 +150,7 @@ function TablePublish() {
 
         {/* Jumlah report */}
         <td>
-          <Center w={150}>
+          <Center>
             <Text
               c={e?.Forum_ReportPosting?.length >= 3 ? "red" : AdminColor.white}
               fw={"bold"}

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

@@ -141,7 +141,7 @@ function TableView() {
 
         <td>
           <Stack align="center" spacing={"xs"}>
-            <ButtonLihatReportLainnya komentarId={e?.forum_KomentarId} />
+            <ButtonLihatReportLainnya komentarId={e?.Forum_Komentar.id} />
           </Stack>
         </td>
       </tr>

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

@@ -187,7 +187,7 @@ function TableView() {
                       <Text c={AdminColor.white}>Postingan</Text>
                     </th>
                     <th>
-                      <Center c={AdminColor.white} w={250}>
+                      <Center c={AdminColor.white}>
                         Status Posting
                       </Center>
                     </th>