fix admin forum

deskripsi:
- fix tampilan table admin untuk set inner html : unutk stiker view

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

@@ -0,0 +1,28 @@
+import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Box, Spoiler } from "@mantine/core";
+
+export const AdminForum_CompTableSetHtmlStiker = ({
+  data,
+  classname,
+  maxHeight,
+  boxWidth,
+}: {
+  data: string;
+  classname: string;
+  maxHeight?: number;
+  boxWidth?: number;
+}) => {
+  return (
+    <>
+      <Box w={boxWidth ?? 250}>
+        <Spoiler
+          maxHeight={maxHeight ?? 50}
+          hideLabel="sembunyikan"
+          showLabel="tampilkan"
+        >
+          <Comp_V3_SetHtmlWithSticker props={data} className={classname} />
+        </Spoiler>
+      </Box>
+    </>
+  );
+};

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

@@ -17,12 +17,30 @@ import {
   Text,
   Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { AdminForum_CompTableSetHtmlStiker } from "./comp_table_set_html_stiker";
 
 export default function ComponentAdminForum_ViewOneDetailKomentar({
   dataKomentar,
 }: {
   dataKomentar: MODEL_FORUM_KOMENTAR;
 }) {
+  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);
+    };
+  }, []);
+
   return (
     <>
       <Stack spacing={"xs"} h={"100%"}>
@@ -40,15 +58,11 @@ export default function ComponentAdminForum_ViewOneDetailKomentar({
               {/* <Divider /> */}
             </Stack>
 
-            <Box>
+            <AdminForum_CompTableSetHtmlStiker
-              <Spoiler
+              data={dataKomentar.komentar}
-                hideLabel="sembunyikan"
+              classname="chat-content"
-                maxHeight={100}
+              maxHeight={100}
-                showLabel="tampilkan"
+            />
-              >
-                <Comp_DangerouslySetInnerHTML props={dataKomentar?.komentar} />
-              </Spoiler>
-            </Box>
           </Stack>
         </Paper>
       </Stack>

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

@@ -4,68 +4,71 @@ import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { MODEL_FORUM_POSTING } from "@/app_modules/forum/model/interface";
 import {
   Badge,
-  Box,
-  Divider,
   Group,
   Paper,
-  Spoiler,
   Stack,
-  Text,
+  Text
-  Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
+import { AdminForum_CompTableSetHtmlStiker } from "./comp_table_set_html_stiker";
 
 export default function ComponentAdminForum_ViewOneDetailPosting({
   dataPosting,
 }: {
   dataPosting: MODEL_FORUM_POSTING;
 }) {
+  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);
+    };
+  }, []);
+
   return (
     <>
-      <Admin_V3_ComponentBreakpoint cols={2}>
+      <Paper p={"md"} radius={"md"} bg={AdminColor.softBlue} shadow="sm">
-        <Paper p={"md"} radius={"md"} bg={AdminColor.softBlue} shadow="sm">
+        <Stack>
-          <Stack>
+          <Stack spacing={5}>
-            <Stack spacing={5}>
+            <Admin_V3_ComponentBreakpoint allCols={2}>
-              <Admin_V3_ComponentBreakpoint allCols={2}>
+              <Text c={AdminColor.white} fw={"bold"}>
-                <Text c={AdminColor.white} fw={"bold"}>
+                Username:{" "}
-                  Username:{" "}
+                <Text span inherit lineClamp={1}>
-                  <Text span inherit lineClamp={1}>
+                  {dataPosting?.Author?.username}
-                    {dataPosting?.Author?.username}
-                  </Text>
                 </Text>
+              </Text>
 
-                <Group position="right">
+              <Group position="right">
-                  <Badge
+                <Badge
-                    color={
+                  color={
-                      (dataPosting?.ForumMaster_StatusPosting?.id as any) === 1
+                    (dataPosting?.ForumMaster_StatusPosting?.id as any) === 1
-                        ? "green"
+                      ? "green"
-                        : "red"
+                      : "red"
-                    }
+                  }
-                  >
+                >
-                    {dataPosting?.ForumMaster_StatusPosting?.status}
+                  {dataPosting?.ForumMaster_StatusPosting?.status}
-                  </Badge>
+                </Badge>
-                </Group>
+              </Group>
-              </Admin_V3_ComponentBreakpoint>
+            </Admin_V3_ComponentBreakpoint>
-              {/* <Divider /> */}
+            {/* <Divider /> */}
-            </Stack>
-
-            <Box>
-              <Spoiler
-                c={AdminColor.white}
-                hideLabel="sembunyikan"
-                maxHeight={100}
-                showLabel="tampilkan"
-              >
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: dataPosting?.diskusi,
-                  }}
-                />
-              </Spoiler>
-            </Box>
           </Stack>
-        </Paper>
+
-      </Admin_V3_ComponentBreakpoint>
+          <AdminForum_CompTableSetHtmlStiker
+            data={dataPosting.diskusi}
+            classname="chat-content"
+            maxHeight={100}
+          />
+        </Stack>
+      </Paper>
     </>
   );
 }

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

@@ -1,21 +1,20 @@
 "use client";
 
-import { RouterAdminForum } from "@/lib/router_admin/router_admin_forum";
+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 ComponentAdminDonasi_TombolKembali from "@/app_modules/admin/donasi/component/tombol_kembali";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import {
   MODEL_FORUM_KOMENTAR,
   MODEL_FORUM_POSTING,
 } from "@/app_modules/forum/model/interface";
+import { RouterAdminForum } from "@/lib/router_admin/router_admin_forum";
 import {
-  Badge,
   Box,
   Button,
   Center,
-  Grid,
   Group,
-  Modal,
-  Pagination,
   Paper,
   ScrollArea,
   Spoiler,
@@ -25,27 +24,21 @@ import {
   TextInput,
   Title,
 } from "@mantine/core";
-import { IconSearch, IconTrash } from "@tabler/icons-react";
-import { IconFlag3 } from "@tabler/icons-react";
-import _ from "lodash";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
+import { IconFlag3, IconSearch, IconTrash } from "@tabler/icons-react";
-import { adminForum_getListKomentarById } from "../fun/get/get_list_komentar_by_id";
-import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
-import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
-import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
-import { apiAdminGetKomentarForumById } from "../lib/api_fetch_admin_forum";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import moment from "moment";
 import "moment/locale/id";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { Admin_ComponentModal } from "../../_admin_global/_component/comp_admin_modal";
+import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
+import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
+import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
+import { apiAdminGetKomentarForumById } from "../lib/api_fetch_admin_forum";
+import { AdminForum_CompTableSetHtmlStiker } from "../component/comp_table_set_html_stiker";
+import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
 
 export default function AdminForum_DetailPosting({
   dataPosting,
@@ -54,11 +47,12 @@ export default function AdminForum_DetailPosting({
 }) {
   return (
     <>
-      {/* <pre>{JSON.stringify(listKomentar, null, 2)}</pre> */}
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Forum: Detail" />
         <AdminGlobal_ComponentBackButton />
-        <ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
+        <Admin_V3_ComponentBreakpoint>
+          <ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
+        </Admin_V3_ComponentBreakpoint>
         <TableKomentar postingId={dataPosting.id} />
       </Stack>
     </>
@@ -90,6 +84,7 @@ function TableKomentar({ postingId }: { postingId: string }) {
       if (response && response.success) {
         setData(response.data.data);
         setDelete(false);
+        setNPage(response.data.nCount || 1);
       }
     } catch (error) {
       console.error("Invalid data format received:", error);
@@ -106,6 +101,22 @@ function TableKomentar({ postingId }: { postingId: string }) {
     setActivePage(p);
   }
 
+  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);
+    };
+  }, []);
+
   const rowTable = () => {
     if (!Array.isArray(data) || data.length === 0) {
       return (
@@ -120,26 +131,17 @@ 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>
           </Box>
         </td>
         <td>
-          <Box w={200}>
+          <AdminForum_CompTableSetHtmlStiker
-            <Spoiler
+            data={e.komentar}
-              c={AdminColor.white}
+            classname="chat-content"
-              maxHeight={50}
+          />
-              hideLabel="sembunyikan"
-              showLabel="tampilkan"
-            >
-              <div
-                style={{ textAlign: "justify", textJustify: "auto" }}
-                dangerouslySetInnerHTML={{ __html: e?.komentar }}
-              />
-            </Spoiler>
-          </Box>
         </td>
         <td>
           <Box c={AdminColor.white} w={100}>

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

@@ -28,6 +28,8 @@ import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/com
 import ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
 import { apiGetAdminForumPublish } from "../lib/api_fetch_admin_forum";
 import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
+import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { AdminForum_CompTableSetHtmlStiker } from "../component/comp_table_set_html_stiker";
 
 export default function AdminForum_TablePosting() {
   return (
@@ -48,6 +50,22 @@ function TablePublish() {
   const [isSearch, setSearch] = useState("");
   const [isDelete, setDelete] = useState(false);
 
+  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);
+    };
+  }, []);
+
   useShallowEffect(() => {
     const loadInitialData = async () => {
       try {
@@ -127,16 +145,7 @@ function TablePublish() {
 
         {/* Deskripsi */}
         <td>
-          <Box w={250}>
+          <AdminForum_CompTableSetHtmlStiker data={e.diskusi} classname="chat-content" />
-            <Spoiler
-              // w={400}
-              maxHeight={50}
-              hideLabel="sembunyikan"
-              showLabel="tampilkan"
-            >
-              <Comp_DangerouslySetInnerHTML props={e?.diskusi} />
-            </Spoiler>
-          </Box>
         </td>
 
         {/* Jumlah komentar */}

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

@@ -16,7 +16,7 @@ import {
   Stack,
   Table,
   Text,
-  TextInput
+  TextInput,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconFlag3, IconSearch } from "@tabler/icons-react";
@@ -25,6 +25,7 @@ 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";
+import { AdminForum_CompTableSetHtmlStiker } from "../component/comp_table_set_html_stiker";
 
 export default function AdminForum_TableReportKomentar() {
   return (
@@ -45,6 +46,22 @@ function TableView() {
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
 
+  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);
+    };
+  }, []);
+
   useShallowEffect(() => {
     const loadInitialData = async () => {
       try {
@@ -111,22 +128,10 @@ function TableView() {
         </td>
 
         <td>
-          <Box w={150}>
+          <AdminForum_CompTableSetHtmlStiker
-            <Spoiler
+            data={e.Forum_Komentar.komentar}
-              style={{ textAlign: "justify", textJustify: "auto" }}
+            classname="chat-content"
-              c={AdminColor.white}
+          />
-              // w={400}
-              maxHeight={50}
-              hideLabel="sembunyikan"
-              showLabel="tampilkan"
-            >
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: e?.Forum_Komentar.komentar,
-                }}
-              />
-            </Spoiler>
-          </Box>
         </td>
 
         <td>

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

@@ -17,7 +17,7 @@ import {
   Stack,
   Table,
   Text,
-  TextInput
+  TextInput,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconFlag3, IconSearch } from "@tabler/icons-react";
@@ -26,6 +26,7 @@ import { useState } from "react";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 import { apiGetAdminForumReportPosting } from "../lib/api_fetch_admin_forum";
+import { AdminForum_CompTableSetHtmlStiker } from "../component/comp_table_set_html_stiker";
 
 export default function AdminForum_TableReportPosting() {
   return (
@@ -46,6 +47,22 @@ function TableView() {
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
 
+  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);
+    };
+  }, []);
+
   useShallowEffect(() => {
     const loadInitialData = async () => {
       try {
@@ -106,20 +123,10 @@ function TableView() {
         </td>
 
         <td>
-          <Box w={150}>
+          <AdminForum_CompTableSetHtmlStiker
-            <Spoiler
+            data={e.Forum_Posting.diskusi}
-              // w={400}
+            classname="chat-content"
-              maxHeight={50}
+          />
-              hideLabel="sembunyikan"
-              showLabel="tampilkan"
-            >
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: e?.Forum_Posting.diskusi,
-                }}
-              />
-            </Spoiler>
-          </Box>
         </td>
 
         <td>
@@ -187,9 +194,7 @@ function TableView() {
                       <Text c={AdminColor.white}>Postingan</Text>
                     </th>
                     <th>
-                      <Center c={AdminColor.white}>
+                      <Center c={AdminColor.white}>Status Posting</Center>
-                        Status Posting
-                      </Center>
                     </th>
 
                     <th>