diff --git a/src/app/api/forum/[id]/report-komentar/route.ts b/src/app/api/forum/[id]/report-komentar/route.ts
new file mode 100644
index 00000000..bd4a4367
--- /dev/null
+++ b/src/app/api/forum/[id]/report-komentar/route.ts
@@ -0,0 +1,73 @@
+import prisma from "@/lib/prisma";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    const data = await prisma.forum_Komentar.findFirst({
+      where: {
+        id: id,
+      },
+      select: {
+        id: true,
+        komentar: true,
+        Forum_Posting: {
+          select: {
+            id: true,
+            diskusi: true,
+            Author: {
+              select: {
+                username: true,
+              },
+            },
+          },
+        },
+
+        Forum_ReportKomentar: {
+          select: {
+            deskripsi: true,
+            ForumMaster_KategoriReport: {
+              select: {
+                id: true,
+                title: true,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    const group = _.groupBy(
+      data?.Forum_ReportKomentar,
+      (v) => v.ForumMaster_KategoriReport?.title
+    );
+
+    const getKey = _.keys(group);
+    const filterGroup = getKey.map((e) => e.replace("undefined", "Lainnya"));
+
+    const allData = {
+      data: data,
+      list: filterGroup,
+    };
+
+    return NextResponse.json({
+      success: true,
+      message: "Success get data report komentar",
+      data: allData,
+    });
+  } catch (error) {
+    console.error("Error get data report komentar", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error get data report komentar",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/forum/[id]/report-posting/route.ts b/src/app/api/forum/[id]/report-posting/route.ts
new file mode 100644
index 00000000..243639cf
--- /dev/null
+++ b/src/app/api/forum/[id]/report-posting/route.ts
@@ -0,0 +1,57 @@
+import _ from "lodash";
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    const data = await prisma.forum_Posting.findFirst({
+      where: {
+        id: id,
+      },
+      select: {
+        id: true,
+        diskusi: true,
+        Forum_ReportPosting: {
+          select: {
+            id: true,
+            deskripsi: true,
+            forumMaster_KategoriReportId: true,
+            ForumMaster_KategoriReport: true,
+          },
+        },
+      },
+    });
+
+    const group = _.groupBy(
+      data?.Forum_ReportPosting,
+      (val) => val.ForumMaster_KategoriReport?.title
+    );
+    const getKey = _.keys(group);
+    const filterGroup = getKey.map((e) => e.replace("undefined", "Lainnya"));
+
+    const allData = {
+      data: data,
+      list: filterGroup,
+    };
+
+    return NextResponse.json({
+      success: true,
+      message: "Success get data report posting",
+      data: allData,
+    });
+  } catch (error) {
+    console.error("Error get data report posting", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error get data report posting",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/dev/(user)/forum/detail/report-komentar/[id]/page.tsx b/src/app/dev/(user)/forum/detail/report-komentar/[id]/page.tsx
index afb7f262..86741044 100644
--- a/src/app/dev/(user)/forum/detail/report-komentar/[id]/page.tsx
+++ b/src/app/dev/(user)/forum/detail/report-komentar/[id]/page.tsx
@@ -1,13 +1,9 @@
 import { Forum_DetailReportKomentar } from "@/app_modules/forum";
-import forum_funGetOneReportKomentarById from "@/app_modules/forum/fun/get/get_one_report_komentar_by_id";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  const komentarId = params.id;
-  const dataKomentar = await forum_funGetOneReportKomentarById({ komentarId: komentarId });
 
+export default async function Page() {
   return (
     <>
-      <Forum_DetailReportKomentar dataKomentar={dataKomentar as any} />
+      <Forum_DetailReportKomentar />
     </>
   );
 }
diff --git a/src/app/dev/(user)/forum/detail/report-posting/[id]/page.tsx b/src/app/dev/(user)/forum/detail/report-posting/[id]/page.tsx
index faa3d24a..016415b4 100644
--- a/src/app/dev/(user)/forum/detail/report-posting/[id]/page.tsx
+++ b/src/app/dev/(user)/forum/detail/report-posting/[id]/page.tsx
@@ -1,12 +1,9 @@
 import { Forum_DetailReportPosting } from "@/app_modules/forum";
-import forum_funGetOneReportedPostingById from "@/app_modules/forum/fun/get/get_one_posting_reported_by_id";
 
-export default async function Page({params}: {params: {id: string}}) {
-  const postingId = params.id
-  const dataPosting = await forum_funGetOneReportedPostingById({postingId: postingId})
+export default async function Page() {
   return (
     <>
-      <Forum_DetailReportPosting dataPosting={dataPosting} />
+      <Forum_DetailReportPosting />
     </>
   );
 }
diff --git a/src/app_modules/_global/fun/generate_seeder.ts b/src/app_modules/_global/fun/generate_seeder.ts
index 2631ff4f..2595028d 100644
--- a/src/app_modules/_global/fun/generate_seeder.ts
+++ b/src/app_modules/_global/fun/generate_seeder.ts
@@ -665,8 +665,10 @@ const limit = pLimit(1);
 export async function generate_seeder() {
   try {
     await Promise.all(listSeederQueue.map((fn) => limit(fn)));
+    await prisma.$disconnect();
   } catch (error) {
     console.error("error generate seeder", error);
+    await prisma.$disconnect();
   }
 
   return { status: 200, success: true };
diff --git a/src/app_modules/forum/component/api_fetch_forum.ts b/src/app_modules/forum/component/api_fetch_forum.ts
index d1a7a2c6..3ba87191 100644
--- a/src/app_modules/forum/component/api_fetch_forum.ts
+++ b/src/app_modules/forum/component/api_fetch_forum.ts
@@ -4,6 +4,8 @@ export {
   apiGetForumkuByUserId as apiGetForumkuById,
   apiGetKomentarForumById,
   apiGetMasterReportForum,
+  apiGetOneReportedPostingById,
+  apiGetOneReportKomentarById,
 };
 
 const apiGetAllForum = async ({
@@ -191,4 +193,82 @@ const apiGetMasterReportForum = async () => {
       throw error; // Re-throw the error to handle it in the calling function
     }
 
-}
\ No newline at end of file
+}
+
+const apiGetOneReportedPostingById = async ({ id }: { id: string }) => {
+    try {
+      // Fetch token from cookie
+      const { token } = await fetch("/api/get-cookie").then((res) =>
+        res.json()
+      );
+      if (!token) {
+        console.error("No token found");
+        return null;
+      }
+
+      const response = await fetch(`/api/forum/${id}/report-posting`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      // Check if the response is OK
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null);
+        console.error(
+          "Failed to get all forum:",
+          response.statusText,
+          errorData
+        );
+        throw new Error(errorData?.message || "Failed to get all forum");
+      }
+
+      // Return the JSON response
+      return await response.json();
+    } catch (error) {
+      console.error("Error get all forum", error);
+      throw error; // Re-throw the error to handle it in the calling function
+    }
+  };
+
+  const apiGetOneReportKomentarById = async ({ id }: { id: string }) => {
+    try {
+      // Fetch token from cookie
+      const { token } = await fetch("/api/get-cookie").then((res) =>
+        res.json()
+      );
+      if (!token) {
+        console.error("No token found");
+        return null;
+      }
+
+      const response = await fetch(`/api/forum/${id}/report-komentar`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      // Check if the response is OK
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null);
+        console.error(
+          "Failed to get all forum:",
+          response.statusText,
+          errorData
+        );
+        throw new Error(errorData?.message || "Failed to get all forum");
+      }
+
+      // Return the JSON response
+      return await response.json();
+    } catch (error) {
+      console.error("Error get all forum", error);
+      throw error; // Re-throw the error to handle it in the calling function
+    }
+  };
\ No newline at end of file
diff --git a/src/app_modules/forum/component/detail_component/ui_report_komentar.tsx b/src/app_modules/forum/component/detail_component/ui_report_komentar.tsx
index e0cd88ec..4465cfa8 100644
--- a/src/app_modules/forum/component/detail_component/ui_report_komentar.tsx
+++ b/src/app_modules/forum/component/detail_component/ui_report_komentar.tsx
@@ -1,17 +1,67 @@
-"use client"
+"use client";
 
 import { Stack, Paper, Text, List, Box } from "@mantine/core";
 import { useState } from "react";
 import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { useShallowEffect } from "@mantine/hooks";
+import { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { apiGetOneReportKomentarById } from "../api_fetch_forum";
+import { useParams } from "next/navigation";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+
+export function ComponentForum_UiDetailReportKomentar() {
+  const params = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_FORUM_KOMENTAR | null>(null);
+  const [list, setList] = useState<any[]>([]);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetOneReportKomentarById({
+        id: params.id,
+      });
+
+      if (response.success) {
+        setData(response.data.data);
+        setList(response.data.list);
+      } else {
+        setData(null);
+        setList([]);
+      }
+    } catch (error) {
+      console.error("Error get data report posting", error);
+      setData(null);
+      setList([]);
+    }
+  }
+
+  useShallowEffect(() => {
+    // Add custom style for stickers inside Quill editor
+    const style = document.createElement("style");
+    style.textContent = `
+          .chat-content img {
+          max-width: 70px !important;
+          max-height: 70px !important;
+        }
+      `;
+    document.head.appendChild(style);
+    return () => {
+      // Clean up when component unmounts
+      document.head.removeChild(style);
+    };
+  }, []);
+
+  if (!data || !list) {
+    return <CustomSkeleton height={400} />;
+  }
 
-export function ComponentForum_UiDetailReportKomentar({
-  dataKomentar,
-}: {
-  dataKomentar: any;
-}) {
-  const [data, setData] = useState<MODEL_FORUM_KOMENTAR>(dataKomentar.data);
-  const [list, setList] = useState<any[]>(dataKomentar.list);
   return (
     <>
       <Box
@@ -41,21 +91,33 @@ export function ComponentForum_UiDetailReportKomentar({
             <Text fw={"bold"}>
               Pada postingan : {data.Forum_Posting.Author.username}
             </Text>
-            <Paper withBorder p={"sm"}>
-              <Text>
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: data.Forum_Posting.diskusi,
-                  }}
-                />
+            {/* CONTENT */}
+            <Box
+              style={{
+                backgroundColor: MainColor.soft_darkblue,
+                padding: 10,
+                borderRadius: 8,
+              }}
+            >
+              <Text fz={"sm"} color="white">
+                {data?.Forum_Posting.diskusi ? (
+                  <Comp_V3_SetInnerHTMLWithStiker
+                    props={data.Forum_Posting.diskusi}
+                    className="chat-content"
+                  />
+                ) : (
+                  ""
+                )}
               </Text>
-            </Paper>
+            </Box>
           </Stack>
           <Stack spacing={"xs"}>
             <Text fw={"bold"}>Laporan yang diterima :</Text>
             <List withPadding>
               {list.map((x, i) => (
-                <List.Item c={"white"} key={i}>{x}</List.Item>
+                <List.Item c={"white"} key={i}>
+                  {x}
+                </List.Item>
               ))}
             </List>
           </Stack>
@@ -63,4 +125,4 @@ export function ComponentForum_UiDetailReportKomentar({
       </Box>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app_modules/forum/component/detail_component/ui_report_posting.tsx b/src/app_modules/forum/component/detail_component/ui_report_posting.tsx
index 345b670e..861426d8 100644
--- a/src/app_modules/forum/component/detail_component/ui_report_posting.tsx
+++ b/src/app_modules/forum/component/detail_component/ui_report_posting.tsx
@@ -1,20 +1,66 @@
 "use client";
 
-import { Stack, Paper, Text, List, Box } from "@mantine/core";
-import { useState } from "react";
-import { MODEL_FORUM_POSTING } from "../../model/interface";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Box, List, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { MODEL_FORUM_POSTING } from "../../model/interface";
+import { apiGetOneReportedPostingById } from "../api_fetch_forum";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export function ComponentForum_UiDetailReportPosting({
-  dataPosting,
-}: {
-  dataPosting: any;
-}) {
-  const [data, setData] = useState<MODEL_FORUM_POSTING>(dataPosting.data);
-  const [list, setList] = useState<any[]>(dataPosting.list);
+export function ComponentForum_UiDetailReportPosting() {
+  const params = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_FORUM_POSTING | null>(null);
+  const [list, setList] = useState<any[]>([]);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetOneReportedPostingById({
+        id: params.id,
+      });
+
+      if (response.success) {
+        setData(response.data.data);
+        setList(response.data.list);
+      } else {
+        setData(null);
+        setList([]);
+      }
+    } catch (error) {
+      console.error("Error get data report posting", error);
+      setData(null);
+      setList([]);
+    }
+  }
+
+  useShallowEffect(() => {
+    // Add custom style for stickers inside Quill editor
+    const style = document.createElement("style");
+    style.textContent = `
+        .chat-content img {
+        max-width: 70px !important;
+        max-height: 70px !important;
+      }
+    `;
+    document.head.appendChild(style);
+    return () => {
+      // Clean up when component unmounts
+      document.head.removeChild(style);
+    };
+  }, []);
+
+  if (!data || !list) {
+    return <CustomSkeleton height={400} />;
+  }
 
   return (
     <>
@@ -33,15 +79,25 @@ export function ComponentForum_UiDetailReportPosting({
           </Text>
           <Stack spacing={"xs"}>
             <Text fw={"bold"}>Pada postingan</Text>
-            <Paper withBorder p={"sm"}>
-              <Text>
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: data.diskusi,
-                  }}
-                />
+            {/* CONTENT */}
+            <Box
+              style={{
+                backgroundColor: MainColor.soft_darkblue,
+                padding: 10,
+                borderRadius: 8,
+              }}
+            >
+              <Text fz={"sm"} color="white">
+                {data?.diskusi ? (
+                  <Comp_V3_SetInnerHTMLWithStiker
+                    props={data?.diskusi}
+                    className="chat-content"
+                  />
+                ) : (
+                  ""
+                )}
               </Text>
-            </Paper>
+            </Box>
           </Stack>
 
           <Stack spacing={"xs"}>
diff --git a/src/app_modules/forum/detail/detail_report_komentar.tsx b/src/app_modules/forum/detail/detail_report_komentar.tsx
index 9228a894..501e704f 100644
--- a/src/app_modules/forum/detail/detail_report_komentar.tsx
+++ b/src/app_modules/forum/detail/detail_report_komentar.tsx
@@ -3,17 +3,13 @@ import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate
 import { ComponentForum_UiDetailReportKomentar } from "../component/detail_component/ui_report_komentar";
 
 
-export default function Forum_DetailReportKomentar({
-  dataKomentar,
-}: {
-  dataKomentar: any;
-}) {
+export default function Forum_DetailReportKomentar() {
   return (
     <>
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Report Komentar" />}
       >
-        {<ComponentForum_UiDetailReportKomentar dataKomentar={dataKomentar} />}
+        {<ComponentForum_UiDetailReportKomentar  />}
       </UIGlobal_LayoutTamplate>
     </>
   );
diff --git a/src/app_modules/forum/detail/detail_report_posting.tsx b/src/app_modules/forum/detail/detail_report_posting.tsx
index ccbe8cfa..820939b1 100644
--- a/src/app_modules/forum/detail/detail_report_posting.tsx
+++ b/src/app_modules/forum/detail/detail_report_posting.tsx
@@ -1,19 +1,14 @@
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import { Stack, Text } from "@mantine/core";
 import { ComponentForum_UiDetailReportPosting } from "../component/detail_component/ui_report_posting";
 
-export default function Forum_DetailReportPosting({
-  dataPosting,
-}: {
-  dataPosting: any;
-}) {
+export default function Forum_DetailReportPosting() {
   return (
     <>
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Report Posting" />}
       >
-        <ComponentForum_UiDetailReportPosting dataPosting={dataPosting} />
+        <ComponentForum_UiDetailReportPosting />
       </UIGlobal_LayoutTamplate>
     </>
   );