Perbaikan UI pada Forum

# style: - Tampilan keseluruhan forum di ganti menguikuti UI ## No Issue
2024-07-01 14:26:26 +08:00
parent af6fc79ef7
commit 11b5e8f722
91 changed files with 2711 additions and 1424 deletions
--- a/src/app_modules/admin/forum/component/detail_one_komentar.tsx
+++ b/src/app_modules/admin/forum/component/detail_one_komentar.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "@/app_modules/forum/model/interface";
+import {
+  Badge,
+  Box,
+  Divider,
+  Group,
+  Paper,
+  Spoiler,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+
+export default function ComponentAdminForum_ViewOneDetailKomentar({
+  dataKomentar,
+}: {
+  dataKomentar: MODEL_FORUM_KOMENTAR;
+}) {
+  return (
+    <>
+      <Stack spacing={"xs"} h={"100%"} w={"50%"}>
+        <Paper bg={"gray"} p={"xs"} style={{ borderRadius: "6px" }}>
+          <Title order={4} c={"white"}>
+            Detail Komentar
+          </Title>
+        </Paper>
+
+        <Paper withBorder p={"md"} radius={"md"} shadow="sm">
+          <Stack>
+            <Stack spacing={5}>
+              <Group position="apart">
+                <Text fw={"bold"}>
+                  Username:{" "}
+                  <Text span inherit>
+                    {dataKomentar?.Author?.username}
+                  </Text>
+                </Text>
+
+              </Group>
+              {/* <Divider /> */}
+            </Stack>
+
+            <Box>
+              <Spoiler
+                w={500}
+                hideLabel="sembunyikan"
+                maxHeight={100}
+                showLabel="tampilkan"
+              >
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: dataKomentar?.komentar,
+                  }}
+                />
+              </Spoiler>
+            </Box>
+          </Stack>
+        </Paper>
+      </Stack>
+    </>
+  );
+}
--- a/src/app_modules/admin/forum/component/detail_one_posting.tsx
+++ b/src/app_modules/admin/forum/component/detail_one_posting.tsx
@@ -21,7 +21,7 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
  return (
    <>
      <Stack spacing={"xs"} h={"100%"} w={"50%"}>
-        <Paper bg={"green.4"} p={"xs"} style={{ borderRadius: "6px" }}>
+        <Paper bg={"gray"} p={"xs"} style={{ borderRadius: "6px" }}>
          <Title order={4} c={"white"}>
            Detail Posting
          </Title>
@@ -31,9 +31,9 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
          <Stack>
            <Stack spacing={5}>
              <Group position="apart">
-                <Text>
+                <Text fw={"bold"}>
                  Username:{" "}
-                  <Text span inherit fw={"bold"}>
+                  <Text span inherit>
                    {dataPosting?.Author?.username}
                  </Text>
                </Text>
@@ -48,7 +48,7 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
                  {dataPosting?.ForumMaster_StatusPosting?.status}
                </Badge>
              </Group>
-              <Divider />
+              {/* <Divider /> */}
            </Stack>

            <Box>
--- a/src/app_modules/admin/forum/fun/count/fun_count_laporan_komentar.ts
+++ b/src/app_modules/admin/forum/fun/count/fun_count_laporan_komentar.ts
@@ -6,6 +6,9 @@ export async function adminForum_countLaporanKomentar() {
  const count = await prisma.forum_ReportKomentar.count({
    where: {
      isActive: true,
+      Forum_Komentar: {
+        isActive: true,
+      },
    },
  });

--- a/src/app_modules/admin/forum/fun/count/fun_count_laporan_posting.ts
+++ b/src/app_modules/admin/forum/fun/count/fun_count_laporan_posting.ts
@@ -6,6 +6,9 @@ export async function adminForum_countLaporanPosting() {
  const count = await prisma.forum_ReportPosting.count({
    where: {
      isActive: true,
+      Forum_Posting: {
+        isActive: true,
+      },
    },
  });

--- a/src/app_modules/admin/forum/fun/count/fun_count_publish.ts
+++ b/src/app_modules/admin/forum/fun/count/fun_count_publish.ts
@@ -6,7 +6,9 @@ export async function adminForum_countPublish() {
  const count = await prisma.forum_Posting.count({
    where: {
      isActive: true,
+      
    },
+
  });

  return count;
--- a/src/app_modules/admin/forum/fun/get/get_all_report_komentar.ts
+++ b/src/app_modules/admin/forum/fun/get/get_all_report_komentar.ts
@@ -0,0 +1,98 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { ceil } from "lodash";
+
+export default async function adminForum_funGetAllReportKomentar({
+  page,
+  search,
+}: {
+  page: number;
+  search?: string;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.forum_ReportKomentar.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      createdAt: "desc",
+    },
+    where: {
+      Forum_Komentar: {
+        isActive: true,
+        komentar: {
+          contains: 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_KomentarId: true,
+      Forum_Komentar: {
+        select: {
+          id: true,
+          komentar: 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_ReportKomentar.count({
+    where: {
+      Forum_Komentar: {
+        isActive: true,
+        komentar: {
+          contains: search,
+          mode: "insensitive",
+        },
+      },
+    },
+  });
+
+  const allData = {
+    data: data,
+    nPage: ceil(nCount / takeData),
+  };
+
+  return allData;
+}
--- a/src/app_modules/admin/forum/fun/get/get_all_report_posting.tsx
+++ b/src/app_modules/admin/forum/fun/get/get_all_report_posting.tsx
--- a/src/app_modules/admin/forum/fun/get/get_one_komentar_by_id.ts
+++ b/src/app_modules/admin/forum/fun/get/get_one_komentar_by_id.ts
@@ -0,0 +1,31 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export default async function adminForum_funGetOneKomentarById({
+  komentarId,
+}: {
+  komentarId: string;
+}) {
+
+  const data = await prisma.forum_Komentar.findFirst({
+    where: {
+      id: komentarId,
+    },
+    select: {
+      id: true,
+      isActive: true,
+      authorId: true,
+      Author: {
+        select: {
+          id: true,
+          username: true,
+        },
+      },
+      komentar: true,
+      forum_PostingId: true,
+    },
+  });
+
+  return data;
+}
--- a/src/app_modules/admin/forum/fun/get/get_one_posting_by_id.ts
+++ b/src/app_modules/admin/forum/fun/get/get_one_posting_by_id.ts
@@ -16,6 +16,7 @@ export async function adminForum_getOnePostingById(postingId: string) {
          status: true,
        },
      },
+      authorId: true,
      Author: {
        select: {
          id: true,
--- a/src/app_modules/admin/forum/index.tsx
+++ b/src/app_modules/admin/forum/index.tsx
@@ -4,6 +4,7 @@ import AdminForum_TableReportPosting from "./sub_menu/table_report_posting";
 import AdminForum_DetailPosting from "./detail/detail_posting";
 import AdminForum_HasilReportPosting from "./sub_detail/hasil_report_posting";
 import AdminForum_HasilReportKomentar from "./sub_detail/hasil_report_komentar";
+import AdminForum_TableReportKomentar from "./sub_menu/table_report_komentar";

 export {
  AdminForum_Main,
@@ -12,4 +13,5 @@ export {
  AdminForum_DetailPosting as AdminForum_LihatSemuaKomentar,
  AdminForum_HasilReportPosting,
  AdminForum_HasilReportKomentar,
+  AdminForum_TableReportKomentar,
 };
--- a/src/app_modules/admin/forum/sub_detail/hasil_report_komentar.tsx
+++ b/src/app_modules/admin/forum/sub_detail/hasil_report_komentar.tsx
@@ -6,8 +6,9 @@ import ComponentAdminDonasi_TombolKembali from "@/app_modules/admin/donasi/compo
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import {
+  MODEL_FORUM_KOMENTAR,
  MODEL_FORUM_MASTER_REPORT,
-  MODEL_FORUM_REPORT,
+  MODEL_FORUM_REPORT_POSTING,
 } from "@/app_modules/forum/model/interface";
 import {
  Badge,
@@ -41,22 +42,38 @@ import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
 import { adminForum_getListReportKomentarbyId } from "../fun/get/get_list_report_komentar_by_id";
 import ComponentAdminGlobal_BackButton from "../../component_global/back_button";
+import ComponentAdminForum_ViewOneDetailKomentar from "../component/detail_one_komentar";
+import adminForum_funGetOneKomentarById from "../fun/get/get_one_komentar_by_id";
+import mqtt_client from "@/util/mqtt_client";
+import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";

 export default function AdminForum_HasilReportKomentar({
  komentarId,
  listReport,
+  dataKomentar,
 }: {
  komentarId: string;
  listReport: any;
+  dataKomentar: MODEL_FORUM_KOMENTAR;
 }) {
+  const [data, setData] = useState(dataKomentar);
+  console.log(komentarId);
+
  return (
    <>
      <Stack>
        <ComponentAdminGlobal_HeaderTamplate name="Forum: Hasil Report Komentar" />
        <Group position="apart">
          <ComponentAdminGlobal_BackButton />
-          <ButtonDeleteKomentar komentarId={komentarId} />
+          <ButtonDeleteKomentar
+            komentarId={komentarId}
+            data={data}
+            onSuccess={(val) => {
+              setData(val);
+            }}
+          />
        </Group>
+        <ComponentAdminForum_ViewOneDetailKomentar dataKomentar={data} />
        <HasilReportPosting listReport={listReport} komentarId={komentarId} />
        {/* <pre>{JSON.stringify(listReport, null, 2)}</pre> */}
      </Stack>
@@ -64,23 +81,56 @@ export default function AdminForum_HasilReportKomentar({
  );
 }

-function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
+function ButtonDeleteKomentar({
+  komentarId,
+  data,
+  onSuccess,
+}: {
+  komentarId: string;
+  data: MODEL_FORUM_KOMENTAR;
+  onSuccess: (val: any) => void;
+}) {
  const router = useRouter();
  const [opened, { open, close }] = useDisclosure(false);
  const [loadingDel2, setLoadingDel2] = useState(false);

  async function onDelete() {
-    await adminForum_funDeleteKomentarById(komentarId).then((res) => {
+    await adminForum_funDeleteKomentarById(komentarId).then(async (res) => {
      if (res.status === 200) {
        setLoadingDel2(false);
        close();
-        router.back();
+
+        const dataKomentar = await adminForum_funGetOneKomentarById({
+          komentarId: komentarId,
+        });
+        onSuccess(dataKomentar);
+
+        const dataNotif = {
+          appId: data.id,
+          status: "Report Komentar",
+          userId: data.authorId,
+          pesan: data.komentar,
+          kategoriApp: "FORUM",
+          title: "Komentar anda telah di laporkan",
+        };
+
+        const notif = await adminNotifikasi_funCreateToUser({
+          data: dataNotif as any,
+        });
+        if (notif.status === 201) {
+          mqtt_client.publish(
+            "USER",
+            JSON.stringify({ userId: data.authorId, count: 1 })
+          );
+        }
+
        ComponentGlobal_NotifikasiBerhasil(res.message);
      } else {
        ComponentGlobal_NotifikasiGagal(res.message);
      }
    });
  }
+
  return (
    <>
      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
@@ -111,17 +161,21 @@ function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
        </Stack>
      </Modal>

-      <Button
-        loaderPosition="center"
-        radius={"xl"}
-        color="red"
-        leftIcon={<IconTrash size={15} />}
-        onClick={() => {
-          open();
-        }}
-      >
-        Hapus Komentar
-      </Button>
+      {data.isActive ? (
+        <Button
+          loaderPosition="center"
+          radius={"xl"}
+          color="red"
+          leftIcon={<IconTrash size={15} />}
+          onClick={() => {
+            open();
+          }}
+        >
+          Hapus Komentar
+        </Button>
+      ) : (
+        ""
+      )}
    </>
  );
 }
@@ -134,7 +188,9 @@ function HasilReportPosting({
  komentarId: string;
 }) {
  const router = useRouter();
-  const [data, setData] = useState<MODEL_FORUM_REPORT[]>(listReport.data);
+  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[]>(
+    listReport.data
+  );
  const [nPage, setNPage] = useState(listReport.nPage);
  const [activePage, setActivePage] = useState(1);
  const [isSearch, setSearch] = useState("");
@@ -230,7 +286,7 @@ function HasilReportPosting({
                      <Center>Username</Center>
                    </th>
                    <th>
-                      <Center>Title</Center>
+                      <Center>Kategori</Center>
                    </th>
                    <th>
                      <Center>Deskripsi</Center>
--- a/src/app_modules/admin/forum/sub_detail/hasil_report_posting.tsx
+++ b/src/app_modules/admin/forum/sub_detail/hasil_report_posting.tsx
@@ -5,7 +5,7 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_glob
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import {
  MODEL_FORUM_POSTING,
-  MODEL_FORUM_REPORT,
+  MODEL_FORUM_REPORT_POSTING,
 } from "@/app_modules/forum/model/interface";
 import {
  Button,
@@ -31,6 +31,8 @@ import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_da
 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";

 export default function AdminForum_HasilReportPosting({
  dataPosting,
@@ -45,7 +47,7 @@ export default function AdminForum_HasilReportPosting({
        <ComponentAdminGlobal_HeaderTamplate name="Forum: Hasil Report Posting" />
        <Group position="apart">
          <ComponentAdminGlobal_BackButton />
-          <ButtonDeletePosting postingId={dataPosting.id} />
+          <ButtonDeletePosting dataPosting={dataPosting} />
        </Group>
        <ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
        <HasilReportPosting
@@ -58,24 +60,45 @@ export default function AdminForum_HasilReportPosting({
  );
 }

-function ButtonDeletePosting({ postingId }: { postingId: string }) {
+function ButtonDeletePosting({
+  dataPosting,
+}: {
+  dataPosting: MODEL_FORUM_POSTING;
+}) {
  const router = useRouter();
  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) {
-        setLoadingDel2(false);
-        setLoadingDel(false);
-        close();
-        router.back();
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
+    const del = await adminForum_funDeletePostingById(dataPosting.id);
+    if (del.status === 200) {
+      setLoadingDel2(false);
+      close();
+      router.back();
+
+      const dataNotif = {
+        appId: dataPosting.id,
+        status: "Report Posting",
+        userId: dataPosting.authorId,
+        pesan: dataPosting.diskusi,
+        kategoriApp: "FORUM",
+        title: "Postingan anda telah di laporkan",
+      };
+      const notif = await adminNotifikasi_funCreateToUser({
+        data: dataNotif as any,
+      });
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({ userId: dataPosting.authorId, count: 1 })
+        );
      }
-    });
+
+      ComponentGlobal_NotifikasiBerhasil(del.message);
+    } else {
+      ComponentGlobal_NotifikasiGagal(del.message);
+    }
  }
  return (
    <>
@@ -93,12 +116,13 @@ function ButtonDeletePosting({ postingId }: { postingId: string }) {
              radius={"xl"}
              onClick={() => {
                close();
-                setLoadingDel(false);
              }}
            >
              Batal
            </Button>
            <Button
+              loaderPosition="center"
+              loading={loadingDel2 ? true : false}
              radius={"xl"}
              color="red"
              onClick={() => {
@@ -112,15 +136,12 @@ function ButtonDeletePosting({ postingId }: { postingId: string }) {
        </Stack>
      </Modal>
      <Button
-        loaderPosition="center"
-        loading={loadingDel ? true : false}
        radius={"xl"}
        color="red"
        leftIcon={<IconTrash size={15} />}
        onClick={() => {
          // onDelete();
          open();
-          setLoadingDel(true);
        }}
      >
        Hapus Posting
@@ -137,7 +158,9 @@ function HasilReportPosting({
  postingId: string;
 }) {
  const router = useRouter();
-  const [data, setData] = useState<MODEL_FORUM_REPORT[]>(listReport.data);
+  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[]>(
+    listReport.data
+  );
  const [nPage, setNPage] = useState(listReport.nPage);
  const [activePage, setActivePage] = useState(1);

@@ -232,7 +255,7 @@ function HasilReportPosting({
                      <Center>Username</Center>
                    </th>
                    <th>
-                      <Center>Title</Center>
+                      <Center>Kategori</Center>
                    </th>
                    <th>
                      <Center>Deskripsi</Center>
--- a/src/app_modules/admin/forum/sub_menu/table_report_komentar.tsx
+++ b/src/app_modules/admin/forum/sub_menu/table_report_komentar.tsx
@@ -0,0 +1,261 @@
+"use client";
+
+import { RouterAdminForum } from "@/app/lib/router_admin/router_admin_forum";
+import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/component_global/header_tamplate";
+import {
+  MODEL_FORUM_REPORT_KOMENTAR,
+  MODEL_FORUM_REPORT_POSTING,
+} from "@/app_modules/forum/model/interface";
+import {
+  Badge,
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  ScrollArea,
+  Spoiler,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { IconFlag3, IconSearch } from "@tabler/icons-react";
+import { isEmpty } from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
+import ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
+import adminForum_funGetAllReportPosting from "../fun/get/get_all_report_posting";
+import { Forum_Komentar } from "@/app_modules/forum";
+import adminForum_funGetAllReportKomentar from "../fun/get/get_all_report_komentar";
+import { useShallowEffect } from "@mantine/hooks";
+
+export default function AdminForum_TableReportKomentar({
+  listData,
+}: {
+  listData: any;
+}) {
+  return (
+    <>
+      <Stack>
+        <ComponentAdminGlobal_HeaderTamplate name="Forum" />
+        <TableView listData={listData} />
+        {/* <pre>{JSON.stringify(listPublish, null, 2)}</pre> */}
+      </Stack>
+    </>
+  );
+}
+
+function TableView({ listData }: { listData: any }) {
+  const router = useRouter();
+  const [data, setData] = useState<MODEL_FORUM_REPORT_KOMENTAR[]>(
+    listData.data
+  );
+  const [nPage, setNPage] = useState(listData.nPage);
+  const [activePage, setActivePage] = useState(1);
+  const [isSearch, setSearch] = useState("");
+
+  useShallowEffect(() => {
+    onLoadData({
+      onLoad(val) {
+        setData(val.data as any);
+        setNPage(val.nPage);
+        setActivePage(1);
+      },
+    });
+  }, [setData, setNPage]);
+
+  async function onLoadData({ onLoad }: { onLoad: (val: any) => void }) {
+    const loadData = await adminForum_funGetAllReportKomentar({ page: 1 });
+    onLoad(loadData);
+
+    // setData(loadData.data as any);
+    // setNPage(loadData.nPage);
+  }
+
+  async function onSearch(s: string) {
+    setSearch(s);
+    setActivePage(1);
+    const loadData = await adminForum_funGetAllReportKomentar({
+      page: 1,
+      search: s,
+    });
+    setData(loadData.data as any);
+    setNPage(loadData.nPage);
+  }
+
+  async function onPageClick(p: any) {
+    setActivePage(p);
+    const loadData = await adminForum_funGetAllReportKomentar({
+      search: isSearch,
+      page: p,
+    });
+    setData(loadData.data as any);
+    setNPage(loadData.nPage);
+  }
+
+  const TableRows = data?.map((e, i) => (
+    <tr key={i}>
+      <td>
+        <Center w={200}>
+          <Text lineClamp={1}>{e?.User.username}</Text>
+        </Center>
+      </td>
+      <td>
+        <Center w={200}>
+          {e?.forumMaster_KategoriReportId === null ? (
+            <Text>Lainnya</Text>
+          ) : (
+            <Text lineClamp={1}>{e?.ForumMaster_KategoriReport.title}</Text>
+          )}
+        </Center>
+      </td>
+
+      <td>
+        <Box w={400}>
+          <Spoiler
+            // w={400}
+            maxHeight={60}
+            hideLabel="sembunyikan"
+            showLabel="tampilkan"
+          >
+            <div
+              dangerouslySetInnerHTML={{
+                __html: e?.Forum_Komentar.komentar,
+              }}
+            />
+          </Spoiler>
+        </Box>
+      </td>
+
+      <td>
+        <Center w={150}>
+          <Text>
+            {new Intl.DateTimeFormat(["id-ID"], { dateStyle: "medium" }).format(
+              e.createdAt
+            )}
+          </Text>
+        </Center>
+      </td>
+
+      <td>
+        <Stack align="center" spacing={"xs"}>
+          {/* <ButtonAction postingId={e?.id} /> */}
+          <ButtonLihatReportLainnya komentarId={e?.forum_KomentarId} />
+          {/* <ComponentAdminForum_ButtonDeletePosting
+            postingId={e?.Forum_Komentar.forum_PostingId}
+            onSuccesDelete={(val) => {
+              if (val) {
+                onLoadData();
+              }
+            }}
+          /> */}
+        </Stack>
+      </td>
+    </tr>
+  ));
+
+  return (
+    <>
+      <Stack spacing={"xs"} h={"100%"}>
+        <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>
+
+        {isEmpty(data) ? (
+          <ComponentAdminGlobal_IsEmptyData />
+        ) : (
+          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+            <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
+              <Table
+                verticalSpacing={"md"}
+                horizontalSpacing={"md"}
+                p={"md"}
+                w={"100%"}
+                h={"100%"}
+                striped
+                highlightOnHover
+              >
+                <thead>
+                  <tr>
+                    <th>
+                      <Center>Pelapor</Center>
+                    </th>
+                    
+                    <th>
+                      <Center>Jenis Laporan</Center>
+                    </th>
+
+                    <th>
+                      <Text>Komentar</Text>
+                    </th>
+
+                    <th>
+                      <Center>Tanggal Report</Center>
+                    </th>
+
+                    <th>
+                      <Center>Aksi</Center>
+                    </th>
+
+                  </tr>
+                </thead>
+                <tbody>{TableRows}</tbody>
+              </Table>
+            </ScrollArea>
+            <Center mt={"xl"}>
+              <Pagination
+                value={activePage}
+                total={nPage}
+                onChange={(val) => {
+                  onPageClick(val);
+                }}
+              />
+            </Center>
+          </Paper>
+        )}
+      </Stack>
+    </>
+  );
+}
+
+function ButtonLihatReportLainnya({ komentarId }: { komentarId: string }) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  return (
+    <>
+      <Button
+        fz={"xs"}
+        loading={loading ? true : false}
+        loaderPosition="center"
+        radius={"xl"}
+        w={170}
+        leftIcon={<IconFlag3 size={15} />}
+        onClick={() => {
+          setLoading(true);
+          router.push(RouterAdminForum.report_komentar + komentarId);
+        }}
+      >
+        <Text>Lihat Report Lain</Text>
+      </Button>
+    </>
+  );
+}
--- 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,11 +1,9 @@
 "use client";

 import { RouterAdminForum } from "@/app/lib/router_admin/router_admin_forum";
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/component_global/header_tamplate";
 import {
-  MODEL_FORUM_POSTING,
-  MODEL_FORUM_REPORT,
+  MODEL_FORUM_REPORT_POSTING
 } from "@/app_modules/forum/model/interface";
 import {
  Badge,
@@ -13,7 +11,6 @@ import {
  Button,
  Center,
  Group,
-  Modal,
  Pagination,
  Paper,
  ScrollArea,
@@ -22,23 +19,15 @@ import {
  Table,
  Text,
  TextInput,
-  Title,
+  Title
 } from "@mantine/core";
-import { IconMessageCircle, IconSearch } from "@tabler/icons-react";
-import { IconFlag3 } from "@tabler/icons-react";
-import { IconEyeCheck, IconTrash } from "@tabler/icons-react";
-import _, { isEmpty } from "lodash";
+import { IconFlag3, IconSearch } from "@tabler/icons-react";
+import { isEmpty } from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { adminForum_funDeletePostingById } from "../fun/delete/fun_delete_posting_by_id";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import { useDisclosure } from "@mantine/hooks";
-import { adminForum_getListPosting } from "../fun/get/get_list_publish";
-import adminJob_getListPublish from "@/app_modules/admin/job/fun/get/get_list_publish";
+import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
 import ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
 import adminForum_funGetAllReportPosting from "../fun/get/get_all_report_posting";
-import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";

 export default function AdminForum_TableReportPosting({
  listData,
@@ -58,7 +47,7 @@ export default function AdminForum_TableReportPosting({

 function TableView({ listData }: { listData: any }) {
  const router = useRouter();
-  const [data, setData] = useState<MODEL_FORUM_REPORT[]>(listData.data);
+  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[]>(listData.data);
  const [nPage, setNPage] = useState(listData.nPage);
  const [activePage, setActivePage] = useState(1);
  const [isSearch, setSearch] = useState("");
@@ -109,7 +98,7 @@ function TableView({ listData }: { listData: any }) {
        </Center>
      </td>

-      <td>
+      {/* <td>
        <Center w={200}>
          <Text lineClamp={1}>{e?.Forum_Posting.Author.username}</Text>
        </Center>
@@ -130,7 +119,7 @@ function TableView({ listData }: { listData: any }) {
            />
          </Spoiler>
        </Box>
-      </td>
+      </td> */}

      <td>
        <Center w={200}>
@@ -160,14 +149,14 @@ function TableView({ listData }: { listData: any }) {
        <Stack align="center" spacing={"xs"}>
          {/* <ButtonAction postingId={e?.id} /> */}
          <ButtonLihatReportLainnya postingId={e?.forum_PostingId} />
-          <ComponentAdminForum_ButtonDeletePosting
+          {/* <ComponentAdminForum_ButtonDeletePosting
            postingId={e?.forum_PostingId}
            onSuccesDelete={(val) => {
              if (val) {
                onLoadData();
              }
            }}
-          />
+          /> */}
        </Stack>
      </td>
    </tr>
@@ -190,7 +179,7 @@ function TableView({ listData }: { listData: any }) {
            radius={"xl"}
            placeholder="Cari postingan"
            onChange={(val) => {
-              // console.log(val.currentTarget.value)
+
              onSearch(val.currentTarget.value);
            }}
          />
@@ -218,12 +207,12 @@ function TableView({ listData }: { listData: any }) {
                    <th>
                      <Center>Jenis Laporan</Center>
                    </th>
-                    <th>
+                    {/* <th>
                      <Center>Author</Center>
                    </th>
                    <th>
                      <Text>Postingan</Text>
-                    </th>
+                    </th> */}
                    <th>
                      <Center w={200}>Status Posting</Center>
                    </th>
--- a/src/app_modules/admin/list_page.tsx
+++ b/src/app_modules/admin/list_page.tsx
@@ -236,11 +236,11 @@ export const listAdminPage = [
        name: "Report Posting",
        path: RouterAdminForum.table_report_posting,
      },
-      // {
-      //   id: 74,
-      //   name: "Laporan Komentar",
-      //   path: RouterAdminForum.report_komentar,
-      // },
+      {
+        id: 74,
+        name: "Report Komentar",
+        path: RouterAdminForum.table_report_komentar,
+      },
    ],
  },