Merge pull request #317 from bipproduction/bagas/18-feb-25

fix forum dan version 1.2.56

.gitignore

@@ -38,11 +38,11 @@ yarn-error.log*
 
 # logs
 logs/
-**/logs/
+# **/logs/
-*.log
+# *.log
-**/*.log
+# **/*.log
-log/
+# log/
-**/log/
+# **/log/
 
 # typescript
 *.tsbuildinfo

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.2.56](https://github.com/bipproduction/hipmi/compare/v1.2.55...v1.2.56) (2025-02-19)
+
 ## [1.2.55](https://github.com/bipproduction/hipmi/compare/v1.2.54...v1.2.55) (2025-02-12)
 
 ## [1.2.54](https://github.com/bipproduction/hipmi/compare/v1.2.53...v1.2.54) (2025-02-12)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hipmi",
-  "version": "1.2.55",
+  "version": "1.2.56",
   "private": true,
   "type": "module",
   "prisma": {

run.build.dev

@@ -1 +0,0 @@
-nice -n 19 bun --env-file=.env.build run --bun build

run.env.build.dev

@@ -0,0 +1 @@
+nice -n 19 bun --env-file=.env run --bun build

run.env.start.dev

@@ -0,0 +1 @@
+nice -n 19 bun --env-file=.env run --bun start

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

@@ -0,0 +1,93 @@
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export { GET };
+
+async function GET(request: Request, { params }: { params: { id: string } }) {
+  try {
+    let fixData;
+    const { id } = params;
+    const { searchParams } = new URL(request.url);
+    const page = searchParams.get("page");
+    const takeData = 5;
+    const skipData = Number(page) * takeData - takeData;
+
+    if (!page) {
+      fixData = await prisma.forum_Komentar.findMany({
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          forum_PostingId: id,
+          isActive: true,
+        },
+        select: {
+          id: true,
+          isActive: true,
+          komentar: true,
+          createdAt: true,
+          Author: {
+            select: {
+              id: true,
+              username: true,
+              Profile: {
+                select: {
+                  name: true,
+                  imageId: true,
+                },
+              },
+            },
+          },
+          authorId: true,
+        },
+      });
+    } else {
+      fixData = await prisma.forum_Komentar.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          forum_PostingId: id,
+          isActive: true,
+        },
+        select: {
+          id: true,
+          isActive: true,
+          komentar: true,
+          createdAt: true,
+          Author: {
+            select: {
+              id: true,
+              username: true,
+              Profile: {
+                select: {
+                  name: true,
+                  imageId: true,
+                },
+              },
+            },
+          },
+          authorId: true,
+        },
+      });
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: "Berhasil mendapatkan data",
+      data: fixData,
+    });
+  } catch (error) {
+    backendLogger.error("Error Get Forum Komentar >>", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "API Error Get Data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

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

@@ -24,7 +24,6 @@ async function GET(request: Request, { params }: { params: { id: string } }) {
             Profile: true,
           },
         },
-
         _count: {
           select: {
             Forum_Komentar: true,
@@ -35,10 +34,15 @@ async function GET(request: Request, { params }: { params: { id: string } }) {
       },
     });
 
+    const fixData = {
+      ...data,
+      count: data?._count.Forum_Komentar,
+    }
+
     return NextResponse.json({
       success: true,
       message: "Success get data",
-      data: data,
+      data: fixData,
     });
   } catch (error) {
     backendLogger.error("Error get data forum", error);

src/app/api/forum/forumku/[id]/route.ts

@@ -11,9 +11,6 @@ async function GET(request: Request, { params }: { params: { id: string } }) {
     const takeData = 5;
     const skipData = Number(page) * takeData - takeData;
 
-    console.log("id", id)
-    console.log("page >", page)
-
     if (!page) {
       fixData = await prisma.forum_Posting.findMany({
         orderBy: {

src/app/api/forum/master/route.ts

@@ -0,0 +1,32 @@
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+import backendLogger from "@/util/backendLogger";
+
+export async function GET(request: Request) {
+  try {
+    const data = await prisma.forumMaster_KategoriReport.findMany({
+      orderBy: {
+        createdAt: "asc",
+      },
+      where: {
+        isActive: true,
+      },
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Berhasil mendapatkan data",
+      data: data,
+    });
+  } catch (error) {
+    backendLogger.error("Error Get Master Kategori Report >>", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Gagal mendapatkan data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/dev/forum/detail/main-detail/[id]/page.tsx

@@ -1,33 +1,12 @@
-import { RouterForum } from "@/lib/router_hipmi/router_forum";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import Forum_MainDetail from "@/app_modules/forum/detail/main_detail";
-import { forum_countTotalKomenById } from "@/app_modules/forum/fun/count/count_total_komentar_by_id";
-import { forum_funGetAllKomentarById } from "@/app_modules/forum/fun/get/get_all_komentar_by_id";
-import { forum_getOnePostingById } from "@/app_modules/forum/fun/get/get_one_posting_by_id";
-import { redirect } from "next/navigation";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  let postingId = params.id;
   const userLoginId = await funGetUserIdByToken();
 
-  const dataPosting = await forum_getOnePostingById(postingId);
-  const listKomentar = await forum_funGetAllKomentarById({
-    postingId: postingId,
-    page: 1,
-  });
-
-  // dataPosting?.isActive === false && redirect(RouterForum.beranda);
-
-  const countKomentar = await forum_countTotalKomenById(postingId);
-
   return (
     <>
-      <Forum_MainDetail
+      <Forum_MainDetail userLoginId={userLoginId as string} />
-        dataPosting={dataPosting as any}
-        listKomentar={listKomentar as any}
-        userLoginId={userLoginId as string}
-        countKomentar={countKomentar}
-      />
     </>
   );
 }

src/app/dev/forum/forumku/[id]/page.tsx

@@ -1,42 +1,12 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Forum_Forumku } from "@/app_modules/forum";
-import { forum_countPostingByAuthorId } from "@/app_modules/forum/fun/count/count_posting_by_author_id";
-import { forum_getAllPostingByAuhtorId } from "@/app_modules/forum/fun/get/get_list_posting_by_author_id";
-import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
-import _ from "lodash";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  const authorId = params.id;
   const userLoginId = await funGetUserIdByToken();
 
-  const dataAuthor = await user_getOneByUserId(authorId);
-  const auhtorSelectedData = _.omit(dataAuthor, [
-    "Profile.email",
-    "Profile.alamat",
-    "Profile.jenisKelamin",
-    "Profile.createdAt",
-    "Profile.updatedAt",
-    "Profile.imagesBackgroundId",
-  ]);
-  // console.log(dataAuthor)
-  // console.log(auhtorSelectedData)  
-
-  // await new Promise((a, b) => {
-  //   setTimeout(a, 1000);
-  // });
-
-  const dataPosting = await forum_getAllPostingByAuhtorId({
-    authorId: authorId,
-    page: 1,
-  });
-  const totalPosting = await forum_countPostingByAuthorId(authorId);
-
   return (
     <>
-      <Forum_Forumku
+      <Forum_Forumku userLoginId={userLoginId as any} />
-        totalPosting={totalPosting}
-        userLoginId={userLoginId as any}
-      />
     </>
   );
 }

src/app/dev/forum/report/komentar-lainnya/[id]/page.tsx

@@ -1,14 +1,12 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Forum_ReportKomentarLainnya } from "@/app_modules/forum";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  let komentarId = params.id;
   const userLoginId = await funGetUserIdByToken();
 
   return (
     <>
       <Forum_ReportKomentarLainnya
-        komentarId={komentarId}
         userLoginId={userLoginId as string}
       />
     </>

src/app/dev/forum/report/komentar/[id]/page.tsx

@@ -1,22 +1,12 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Forum_ReportKomentar } from "@/app_modules/forum";
-import { forum_getMasterKategoriReport } from "@/app_modules/forum/fun/master/get_master_kategori_report";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  let komentarId = params.id;
   const userLoginId = await funGetUserIdByToken();
 
-  const listReport = await forum_getMasterKategoriReport();
-  
-
-
   return (
     <>
-      <Forum_ReportKomentar
+      <Forum_ReportKomentar userLoginId={userLoginId as any} />
-        komentarId={komentarId}
-        listReport={listReport as any}
-        userLoginId={userLoginId as any}
-      />
     </>
   );
 }

src/app/dev/forum/report/posting-lainnya/[id]/page.tsx

@@ -1,16 +1,12 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Forum_ReportPostingLainnya } from "@/app_modules/forum";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  let postingId = params.id;
   const userLoginId = await funGetUserIdByToken();
 
   return (
     <>
-      <Forum_ReportPostingLainnya
+      <Forum_ReportPostingLainnya userLoginId={userLoginId as string} />
-        postingId={postingId}
-        userLoginId={userLoginId as string}
-      />
     </>
   );
 }

src/app/dev/forum/report/posting/[id]/page.tsx

@@ -1,18 +1,13 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Forum_ReportPosting } from "@/app_modules/forum";
-import { forum_getMasterKategoriReport } from "@/app_modules/forum/fun/master/get_master_kategori_report";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  let postingId = params.id;
   const userLoginId = await funGetUserIdByToken();
   
-  const listReport = await forum_getMasterKategoriReport();
 
   return (
     <>
       <Forum_ReportPosting
-        postingId={postingId}
-        listReport={listReport as any}
         userLoginId={userLoginId as string}
       />
     </>

src/app/zCoba/skeleton/page.tsx

@@ -16,24 +16,24 @@ export default function Voting_ComponentSkeletonViewPuh() {
         header={<UIGlobal_LayoutHeaderTamplate title="Skeleton Maker" />}
       >
         <Stack>
-          <Center>
+          <Grid align="center">
-            <CustomSkeleton height={100} width={100} circle />
+            <Grid.Col span={2}>
-          </Center>
+              <CustomSkeleton height={40} width={40} circle />
-
-          <Grid grow>
-            <Grid.Col span={6}>
-              <Stack spacing={"xs"}>
-                <CustomSkeleton height={20} width={"80%"} />
-                <CustomSkeleton height={20} width={"80%"} />
-              </Stack>
             </Grid.Col>
-
+            <Grid.Col span={4}>
-            <Grid.Col span={6}>
+              <CustomSkeleton height={20} width={"100%"} />
+            </Grid.Col>
+            <Grid.Col span={3} offset={3}>
               <Group position="right">
-                <CustomSkeleton height={50} width={"80%"} radius={"xl"} />
+                <CustomSkeleton height={20} width={"50%"} />
               </Group>
             </Grid.Col>
           </Grid>
+
+          <Stack>
+            <CustomSkeleton height={20} width={"100%"} radius={"xl"} />
+            <CustomSkeleton height={20} width={"100%"} radius={"xl"} />
+          </Stack>
         </Stack>
 
         {/* <Stack spacing={"xl"} p={"sm"}>

src/app_modules/forum/component/api_fetch_forum.ts

@@ -1,4 +1,10 @@
-export { apiGetAllForum, apiGetOneForumById, apiGetForumkuById };
+export {
+  apiGetAllForum,
+  apiGetOneForumById,
+  apiGetForumkuByUserId as apiGetForumkuById,
+  apiGetKomentarForumById,
+  apiGetMasterReportForum,
+};
 
 const apiGetAllForum = async ({
   page,
@@ -72,7 +78,7 @@ const apiGetOneForumById = async ({ id }: { id: string }) => {
   }
 };
 
-const apiGetForumkuById = async ({
+const apiGetForumkuByUserId = async ({
   id,
   page,
 }: {
@@ -111,3 +117,78 @@ const apiGetForumkuById = async ({
     throw error; // Re-throw the error to handle it in the calling function
   }
 };
+
+const apiGetKomentarForumById = async ({ id , page}: { id: string , page: 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 nextPage = `?page=${page}`;
+    const response = await fetch(`/api/forum/${id}/komentar${nextPage}`, {
+      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 apiGetMasterReportForum = async () => {
+    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/master`, {
+        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
+    }
+
+}

src/app_modules/forum/component/detail_component/detail_create_komentar.tsx

@@ -19,16 +19,18 @@ import { MODEL_FORUM_POSTING } from "../../model/interface";
 import { useRouter } from "next/navigation";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import mqtt_client from "@/util/mqtt_client";
+import backendLogger from "@/util/backendLogger";
+import { clientLogger } from "@/util/clientLogger";
 export default function ComponentForum_DetailCreateKomentar({
   postingId,
-  onSetKomentar,
   data,
   userLoginId,
+  onSetNewKomentar,
 }: {
   postingId: string;
-  onSetKomentar: (val: any) => void;
   data: MODEL_FORUM_POSTING;
   userLoginId: string;
+  onSetNewKomentar: (val: boolean) => void;
 }) {
   const router = useRouter();
   const [value, setValue] = useState("");
@@ -40,45 +42,46 @@ export default function ComponentForum_DetailCreateKomentar({
       return null;
     }
 
-    const createComment = await forum_funCreateKomentar(postingId, value);
+    try {
-    if (createComment.status === 201) {
+      setLoading(true);
-      // const loadKomentar = await forum_funGetAllKomentarById(data.id);
+      const createComment = await forum_funCreateKomentar(postingId, value);
+      if (createComment.status === 201) {
 
-      const loadData = await forum_funGetAllKomentarById({
+        onSetNewKomentar(true);
-        postingId: data.id,
+        setValue("");
-        page: 1,
+        setIsEmpty(true);
-      });
+        ComponentGlobal_NotifikasiBerhasil(createComment.message, 2000);
-      onSetKomentar(loadData);
 
-      setValue("");
+        if (userLoginId !== data.Author.id) {
-      setIsEmpty(true);
+          const dataNotif = {
-      ComponentGlobal_NotifikasiBerhasil(createComment.message, 2000);
+            appId: data.id,
+            userId: data.authorId,
+            pesan: value,
+            kategoriApp: "FORUM",
+            title: "Komentar baru",
+          };
 
-      if (userLoginId !== data.Author.id) {
+          const createNotifikasi = await notifikasiToUser_funCreate({
-        const dataNotif = {
+            data: dataNotif as any,
-          appId: data.id,
+          });
-          userId: data.authorId,
-          pesan: value,
-          kategoriApp: "FORUM",
-          title: "Komentar baru",
-        };
 
-        const createNotifikasi = await notifikasiToUser_funCreate({
+          if (createNotifikasi.status === 201) {
-          data: dataNotif as any,
+            mqtt_client.publish(
-        });
+              "USER",
-
+              JSON.stringify({
-        if (createNotifikasi.status === 201) {
+                userId: dataNotif.userId,
-          mqtt_client.publish(
+                count: 1,
-            "USER",
+              })
-            JSON.stringify({
+            );
-              userId: dataNotif.userId,
+          }
-              count: 1,
-            })
-          );
         }
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(createComment.message);
       }
-    } else {
+    } catch (error) {
-      ComponentGlobal_NotifikasiGagal(createComment.message);
+      setLoading(false);
+      clientLogger.error("Error create komentar forum", error);
     }
   }
 
@@ -117,8 +120,9 @@ export default function ComponentForum_DetailCreateKomentar({
             }
             bg={MainColor.yellow}
             color={"yellow"}
+            c="black"
             loaderPosition="center"
-            loading={loading ? true : false}
+            loading={loading}
             radius={"xl"}
             onClick={() => onComment()}
           >

src/app_modules/forum/component/detail_component/detail_header.tsx

@@ -50,6 +50,8 @@ import {
 } from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { clientLogger } from "@/util/clientLogger";
+import _ from "lodash";
 
 export default function ComponentForum_DetailHeader({
   data,
@@ -123,7 +125,8 @@ export default function ComponentForum_DetailHeader({
               postingId={data?.id}
               authorId={data?.Author.id}
               userLoginId={userLoginId}
-              statusId={data?.forumMaster_StatusPostingId}
+              statusId={data?.ForumMaster_StatusPosting.id}
+              dataPosting={data}
               onLoadData={(val) => {
                 onLoadData(val);
               }}
@@ -141,12 +144,14 @@ function ComponentForum_DetailButtonMore_V2({
   postingId,
   statusId,
   userLoginId,
+  dataPosting,
   onLoadData,
 }: {
   authorId: any;
   postingId?: any;
   statusId: any;
   userLoginId: any;
+  dataPosting: any;
   onLoadData: (val: any) => void;
 }) {
   const router = useRouter();
@@ -312,6 +317,7 @@ function ComponentForum_DetailButtonMore_V2({
           postingId={postingId}
           setOpenStatus={setOpenStatusClose}
           statusId={statusId}
+          dataPosting={dataPosting}
           onLoadData={(val) => {
             onLoadData(val);
           }}
@@ -338,13 +344,15 @@ function ButtonDelete({
   if (loading) return <ComponentGlobal_V2_LoadingPage />;
 
   async function onDelete() {
-    setOpenDel(false);
+    try {
-    await forum_funDeletePostingById(postingId as any).then((res) => {
+      setLoading(true);
-      if (res.status === 200) {
+      const responseDelete = await forum_funDeletePostingById(postingId as any);
-        ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
+      if (responseDelete.status === 200) {
-        setLoading(true);
+        setOpenDel(false);
         router.back();
 
+        ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
+
         // mqtt_client.publish(
         //   "Forum_detail_hapus_data",
         //   JSON.stringify({
@@ -352,9 +360,13 @@ function ButtonDelete({
         //   })
         // );
       } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(responseDelete.message);
       }
-    });
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error get data forum", error);
+    }
   }
   return (
     <>
@@ -387,38 +399,40 @@ function ButtonStatus({
   postingId,
   setOpenStatus,
   statusId,
+  dataPosting,
   onLoadData,
 }: {
   postingId?: string;
   setOpenStatus: any;
   statusId?: any;
+  dataPosting: any;
   onLoadData: (val: any) => void;
 }) {
   const [loading, setLoading] = useState(false);
 
   async function onTutupForum() {
-    setOpenStatus(false);
+    try {
-
-    const closeForum = await forum_funEditStatusPostingById(
-      postingId as any,
-      2
-    );
-    if (closeForum.status === 200) {
-      ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
       setLoading(true);
+      const closeForum = await forum_funEditStatusPostingById(
+        postingId as any,
+        2
+      );
 
-      const loadData = await forum_getOnePostingById(postingId as any);
+      if (closeForum.status === 200) {
-      onLoadData(loadData);
+        setOpenStatus(false);
+        ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
 
-      if (loadData) {
+        const cloneData = _.clone(dataPosting);
         const updateData = {
-          ...loadData,
+          ...cloneData,
           ForumMaster_StatusPosting: {
             id: 2,
             status: "Close",
           },
         };
 
+        onLoadData(updateData);
+
         mqtt_client.publish(
           "Forum_detail_ganti_status",
           JSON.stringify({
@@ -426,32 +440,39 @@ function ButtonStatus({
             data: updateData.ForumMaster_StatusPosting,
           })
         );
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(closeForum.message);
       }
-    } else {
+    } catch (error) {
-      ComponentGlobal_NotifikasiGagal(closeForum.message);
+      setLoading(false);
+      clientLogger.error("Error get data forum", error);
     }
   }
 
   async function onBukaForum() {
-    setOpenStatus(false);
+    setLoading(true);
 
-    const openForum = await forum_funEditStatusPostingById(postingId as any, 1);
+    try {
-    if (openForum.status === 200) {
+      const openForum = await forum_funEditStatusPostingById(
-      ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
+        postingId as any,
-      setLoading(true);
+        1
+      );
+      if (openForum.status === 200) {
+        setOpenStatus(false);
+        ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
 
-      const loadData = await forum_getOnePostingById(postingId as any);
+        const cloneData = _.clone(dataPosting);
-      onLoadData(loadData);
-
-      if (loadData) {
         const updateData = {
-          ...loadData,
+          ...cloneData,
           ForumMaster_StatusPosting: {
             id: 1,
             status: "Open",
           },
         };
 
+        onLoadData(updateData);
+
         mqtt_client.publish(
           "Forum_detail_ganti_status",
           JSON.stringify({
@@ -459,9 +480,13 @@ function ButtonStatus({
             data: updateData.ForumMaster_StatusPosting,
           })
         );
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(openForum.message);
       }
-    } else {
+    } catch (error) {
-      ComponentGlobal_NotifikasiGagal(openForum.message);
+      setLoading(false);
+      clientLogger.error("Error get data forum", error);
     }
   }
 

src/app_modules/forum/component/detail_component/detail_list_komentar.tsx

@@ -1,14 +1,9 @@
 "use client";
 
-import {
+import { Card, Divider, Spoiler, Stack, Text } from "@mantine/core";
-  Card,
-  Divider,
-  Spoiler,
-  Stack,
-  Text
-} from "@mantine/core";
 import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
 import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 
 export default function ComponentForum_KomentarView({
   data,
@@ -23,65 +18,34 @@ export default function ComponentForum_KomentarView({
 }) {
   return (
     <>
-      <Card mb={"xs"} bg={"transparent"}>
+      <ComponentGlobal_CardStyles>
-        <Card.Section>
+        <ComponentForum_KomentarAuthorNameOnHeader
-          <ComponentForum_KomentarAuthorNameOnHeader
+          tglPublish={data?.createdAt}
-            tglPublish={data?.createdAt}
+          userId={data?.Author?.id}
-            userId={data?.Author?.id}
+          komentarId={data?.id}
-            komentarId={data?.id}
+          isMoreButton={true}
-            isMoreButton={true}
+          setKomentar={setKomentar}
-            setKomentar={setKomentar}
+          postingId={postingId}
-            postingId={postingId}
+          userLoginId={userLoginId}
-            userLoginId={userLoginId}
+          profile={data.Author.Profile}
-            profile={data.Author.Profile}
+        />
-          />
-        </Card.Section>
-        <Card.Section sx={{ zIndex: 0 }} p={"sm"}>
-          <Stack spacing={"xs"}>
-            <Text fz={"sm"} lineClamp={4} c={"white"}>
-              {data.komentar ? (
-                <Spoiler
-                  hideLabel="sembunyikan"
-                  maxHeight={100}
-                  showLabel="tampilkan"
-                >
-                  <div dangerouslySetInnerHTML={{ __html: data.komentar }} />
-                </Spoiler>
-              ) : (
-                ""
-              )}
-            </Text>
-          </Stack>
-        </Card.Section>
 
-        <Card.Section>
+        <Stack spacing={"xs"} sx={{ zIndex: 0 }} p={"sm"}>
-          <Stack>
+          <Text fz={"sm"} lineClamp={4} c={"white"}>
-            <Divider />
+            {data.komentar ? (
-          </Stack>
+              <Spoiler
-        </Card.Section>
+                hideLabel="sembunyikan"
-      </Card>
+                maxHeight={100}
-
+                showLabel="tampilkan"
-      {/* <Stack>
+              >
-        {_.isEmpty(data) ? (
+                <div dangerouslySetInnerHTML={{ __html: data.komentar }} />
-          <Center>
+              </Spoiler>
-            <Text fw={"bold"} fz={"xs"} c={"white"}>
+            ) : (
-              Belum ada komentar
+              ""
-            </Text>
+            )}
-          </Center>
+          </Text>
-        ) : (
+        </Stack>
-          <Box>
+      </ComponentGlobal_CardStyles>
-            <Center>
-              <Text fw={"bold"} fz={"xs"} c={"white"}>
-                {" "}
-                Komentar
-              </Text>
-            </Center>
-            {data.map((e, i) => (
-             
-            ))}
-          </Box>
-        )}
-      </Stack> */}
     </>
   );
 }

src/app_modules/forum/component/detail_component/detail_view.tsx

@@ -1,14 +1,10 @@
 "use client";
 
-import { Card, Stack, Group, Text, Box } from "@mantine/core";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Box, Group, Stack, Text } from "@mantine/core";
 import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
 import ComponentForum_DetailHeader from "./detail_header";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 
 export default function ComponentForum_DetailForumView({
   data,

src/app_modules/forum/component/forumku_component/forumku_header.tsx

@@ -1,16 +1,13 @@
 "use client";
 
-import { RouterForum } from "@/lib/router_hipmi/router_forum";
+import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
-import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { Avatar, Badge, Grid, Group, Loader, Stack, Text } from "@mantine/core";
+import { RouterForum } from "@/lib/router_hipmi/router_forum";
+import { Badge, Grid, Group, Stack, Text } from "@mantine/core";
 import { IconCircle } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
 import ComponentForum_ForumkuMoreButton from "./forumku_more_button";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
 
 export default function ComponentForum_ForumkuHeaderCard({
   data,
@@ -52,7 +49,7 @@ export default function ComponentForum_ForumkuHeaderCard({
                 <Grid.Col span={"auto"}>
                   <Text lineClamp={1} fz={"sm"} fw={"bold"} c={"white"}>
                     {data.Author.username
-                      ? data.Author.username
+                      ? data.Author.Profile.name
                       : "Nama author  "}
                   </Text>
                 </Grid.Col>
@@ -68,9 +65,7 @@ export default function ComponentForum_ForumkuHeaderCard({
                     : "red"
                 }
               >
-                <Text c={"white"} fz={10}>
+                <Text fz={10}>{data?.ForumMaster_StatusPosting.status}</Text>
-                  {data?.ForumMaster_StatusPosting.status}
-                </Text>
               </Badge>
             </Stack>
           </Grid.Col>

src/app_modules/forum/component/forumku_component/forumku_more_button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { RouterForum } from "@/lib/router_hipmi/router_forum";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { RouterForum } from "@/lib/router_hipmi/router_forum";
 import {
   ActionIcon,
   Button,
@@ -26,16 +26,17 @@ import {
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { clientLogger } from "@/util/clientLogger";
 import mqtt_client from "@/util/mqtt_client";
 import _ from "lodash";
 import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
 import { forum_funEditStatusPostingById } from "../../fun/edit/fun_edit_status_posting_by_id";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentForum_ForumkuMoreButton({
   authorId,
@@ -254,11 +255,12 @@ function ButtonDelete({
   const [loading, setLoading] = useState(false);
 
   async function onDelete() {
-    setOpenDel(false);
+    try {
-    await forum_funDeletePostingById(postingId as any).then(async (res) => {
+      setLoading(true);
-      if (res.status === 200) {
+
-        ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
+      const deleteData = await forum_funDeletePostingById(postingId as any);
-        setLoading(true);
+      if (deleteData.status === 200) {
+        setOpenDel(false);
 
         const cloneData = _.clone(allData);
         const hapusData = cloneData.filter((e) => e.id !== postingId);
@@ -271,10 +273,16 @@ function ButtonDelete({
             data: hapusData,
           })
         );
+
+        ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
       } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(deleteData.message);
       }
-    });
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error get data forum", error);
+    }
   }
   return (
     <>
@@ -323,120 +331,131 @@ function ButtonStatus({
   const [loading, setLoading] = useState(false);
 
   async function onTutupForum() {
-    setOpenStatus(false);
+    try {
-
-    const upateStatusClose = await forum_funEditStatusPostingById(
-      postingId as any,
-      2
-    );
-    if (upateStatusClose.status === 200) {
-      ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
       setLoading(true);
-
+      const upateStatusClose = await forum_funEditStatusPostingById(
-      const cloneData = _.clone(allData);
+        postingId as any,
-      const loadData = cloneData.map(
+        2
-        (e) => (
-          e.id === postingId,
-          {
-            ...e,
-            ForumMaster_StatusPosting: {
-              id: e.id === postingId ? 2 : e.ForumMaster_StatusPosting.id,
-              status:
-                e.id === postingId
-                  ? "Close"
-                  : e.ForumMaster_StatusPosting.status,
-            },
-          }
-        )
-      );
-      onLoadData(loadData);
-
-      //
-      mqtt_client.publish(
-        "Forum_ganti_status",
-        JSON.stringify({
-          id: postingId,
-          data: loadData,
-        })
       );
 
-      const findData = cloneData.find((val) => val.id === postingId);
+      if (upateStatusClose.status === 200) {
-      const updateDetail = {
+        setOpenStatus(false);
-        ...findData,
+        ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
-        ForumMaster_StatusPosting: {
-          id: 2,
-          status: "Close",
-        },
-      };
 
-      mqtt_client.publish(
+        const cloneData = _.clone(allData);
-        "Forum_detail_ganti_status",
+        const loadData = cloneData.map(
-        JSON.stringify({
+          (e) => (
-          id: postingId,
+            e.id === postingId,
-          data: updateDetail.ForumMaster_StatusPosting,
+            {
-        })
+              ...e,
-      );
+              ForumMaster_StatusPosting: {
-    } else {
+                id: e.id === postingId ? 2 : e.ForumMaster_StatusPosting.id,
-      ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
+                status:
+                  e.id === postingId
+                    ? "Close"
+                    : e.ForumMaster_StatusPosting.status,
+              },
+            }
+          )
+        );
+        onLoadData(loadData);
+
+        mqtt_client.publish(
+          "Forum_ganti_status",
+          JSON.stringify({
+            id: postingId,
+            data: loadData,
+          })
+        );
+
+        const findData = cloneData.find((val) => val.id === postingId);
+        const updateDetail = {
+          ...findData,
+          ForumMaster_StatusPosting: {
+            id: 2,
+            status: "Close",
+          },
+        };
+
+        mqtt_client.publish(
+          "Forum_detail_ganti_status",
+          JSON.stringify({
+            id: postingId,
+            data: updateDetail.ForumMaster_StatusPosting,
+          })
+        );
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error get data forum", error);
     }
   }
 
   async function onBukaForum() {
-    setOpenStatus(false);
+    try {
-
-    const updateStatusOpen = await forum_funEditStatusPostingById(
-      postingId as any,
-      1
-    );
-    if (updateStatusOpen.status === 200) {
-      ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
       setLoading(true);
-
+      const updateStatusOpen = await forum_funEditStatusPostingById(
-      const cloneData = _.clone(allData);
+        postingId as any,
-      const loadData = cloneData.map(
+        1
-        (e) => (
-          e.id === postingId,
-          {
-            ...e,
-            ForumMaster_StatusPosting: {
-              id: e.id === postingId ? 1 : e.ForumMaster_StatusPosting.id,
-              status:
-                e.id === postingId
-                  ? "Open"
-                  : e.ForumMaster_StatusPosting.status,
-            },
-          }
-        )
       );
 
-      mqtt_client.publish(
+      if (updateStatusOpen.status === 200) {
-        "Forum_ganti_status",
+        setOpenStatus(false);
-        JSON.stringify({
+        ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
-          id: postingId,
-          data: loadData,
-        })
-      );
 
-      onLoadData(loadData);
+        const cloneData = _.clone(allData);
+        const loadData = cloneData.map(
+          (e) => (
+            e.id === postingId,
+            {
+              ...e,
+              ForumMaster_StatusPosting: {
+                id: e.id === postingId ? 1 : e.ForumMaster_StatusPosting.id,
+                status:
+                  e.id === postingId
+                    ? "Open"
+                    : e.ForumMaster_StatusPosting.status,
+              },
+            }
+          )
+        );
 
-      const findData = cloneData.find((val) => val.id === postingId);
+        mqtt_client.publish(
-      const updateDetail = {
+          "Forum_ganti_status",
-        ...findData,
+          JSON.stringify({
-        ForumMaster_StatusPosting: {
+            id: postingId,
-          id: 1,
+            data: loadData,
-          status: "Open",
+          })
-        },
+        );
-      };
 
-      mqtt_client.publish(
+        onLoadData(loadData);
-        "Forum_detail_ganti_status",
+
-        JSON.stringify({
+        const findData = cloneData.find((val) => val.id === postingId);
-          id: postingId,
+        const updateDetail = {
-          data: updateDetail.ForumMaster_StatusPosting,
+          ...findData,
-        })
+          ForumMaster_StatusPosting: {
-      );
+            id: 1,
-    } else {
+            status: "Open",
-      ComponentGlobal_NotifikasiGagal(updateStatusOpen.message);
+          },
+        };
+
+        mqtt_client.publish(
+          "Forum_detail_ganti_status",
+          JSON.stringify({
+            id: postingId,
+            data: updateDetail.ForumMaster_StatusPosting,
+          })
+        );
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(updateStatusOpen.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error get data forum", error);
     }
   }
 

src/app_modules/forum/component/komentar_component/komentar_author_header_name.tsx

@@ -12,6 +12,7 @@ import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { data } from "autoprefixer";
 import { MODEL_PROFILE } from "@/app_modules/katalog/profile/model/interface";
+import moment from "moment";
 
 export default function ComponentForum_KomentarAuthorNameOnHeader({
   userId,
@@ -84,10 +85,11 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
               <Group spacing={3}>
                 <Text c={"white"} fz={"sm"}>
                   {tglPublish
-                    ? tglPublish.toLocaleDateString(["id-ID"], {
+                    ? new Intl.DateTimeFormat("id-ID", {
                         day: "numeric",
                         month: "short",
-                      })
+                        year: "numeric",
+                      }).format(new Date(tglPublish))
                     : new Date().toLocaleDateString(["id-ID"], {
                         day: "numeric",
                         month: "short",

src/app_modules/forum/component/skeleton_view.tsx

@@ -1,7 +1,12 @@
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { Center, Grid, Group, Stack } from "@mantine/core";
 
-export { Forum_SkeletonCard, Forum_SkeletonForumku };
+export {
+  Forum_SkeletonCard,
+  Forum_SkeletonForumku,
+  Forum_SkeletonKomentar,
+  Forum_SkeletonListKomentar,
+};
 
 function Forum_SkeletonCard() {
   return (
@@ -14,7 +19,7 @@ function Forum_SkeletonCard() {
   );
 }
 
-function Forum_SkeletonForumku(){
+function Forum_SkeletonForumku() {
   return (
     <>
       <Stack spacing={"xl"}>
@@ -40,3 +45,29 @@ function Forum_SkeletonForumku(){
     </>
   );
 }
+
+function Forum_SkeletonKomentar() {
+  return (
+    <>
+      <Stack mt={"lg"}>
+        <CustomSkeleton height={50} />
+        <Group position="apart">
+          <CustomSkeleton height={15} width={"20%"} radius={"xl"} />
+          <CustomSkeleton height={40} width={"30%"} radius={"xl"} />
+        </Group>
+      </Stack>
+    </>
+  );
+}
+
+function Forum_SkeletonListKomentar() {
+  return (
+    <>
+      <Stack>
+        {Array.from(new Array(2)).map((e, i) => (
+          <CustomSkeleton key={i} height={100} />
+        ))}
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/detail/main_detail.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, Center, Loader, Stack, TextInput } from "@mantine/core";
+import { Box, Center, Group, Loader, Stack, TextInput } from "@mantine/core";
 import _ from "lodash";
 import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
 import mqtt_client from "@/util/mqtt_client";
@@ -12,42 +12,106 @@ import ComponentForum_KomentarView from "../component/detail_component/detail_li
 import ComponentForum_DetailForumView from "../component/detail_component/detail_view";
 import { ScrollOnly } from "next-scroll-loader";
 import { forum_funGetAllKomentarById } from "../fun/get/get_all_komentar_by_id";
+import {
+  apiGetKomentarForumById,
+  apiGetOneForumById,
+} from "../component/api_fetch_forum";
+import { useParams } from "next/navigation";
+import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import {
+  Forum_SkeletonKomentar,
+  Forum_SkeletonListKomentar,
+} from "../component/skeleton_view";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 
 export default function Forum_MainDetail({
-  dataPosting,
-  listKomentar,
   userLoginId,
-  countKomentar,
 }: {
-  dataPosting: MODEL_FORUM_POSTING;
-  listKomentar: MODEL_FORUM_KOMENTAR[];
   userLoginId: string;
-  countKomentar: number;
 }) {
-  const [data, setData] = useState(dataPosting);
+  const param = useParams<{ id: string }>();
-  const [lsKomentar, setLsKomentar] = useState(listKomentar);
+  const [dataPosting, setDataPosting] = useState<MODEL_FORUM_POSTING | null>(
+    null
+  );
+  const [listKomentar, setListKomentar] = useState<MODEL_FORUM_KOMENTAR[]>([]);
   const [activePage, setActivePage] = useState(1);
+  const [newKomentar, setNewKomentar] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
-  // useShallowEffect(() => {
+  useShallowEffect(() => {
-  //   onLoadKomentar({
+    handleLoadData();
-  //     onLoad(val) {
+  }, []);
-  //       setKomentar(val);
-  //     },
-  //   });
-  // }, [setKomentar]);
 
-  // async function onLoadKomentar({ onLoad }: { onLoad: (val: any) => void }) {
+  const handleLoadData = async () => {
-  //   const loadKomentar = await forum_getKomentarById(data.id);
+    try {
-  //   onLoad(loadKomentar);
+      setIsLoading(true);
-  // }
+      const response = await apiGetOneForumById({
+        id: param.id,
+      });
+
+      if (response) {
+        setDataPosting(response.data);
+      } else {
+        setDataPosting(null);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data forum", error);
+      setDataPosting(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useShallowEffect(() => {
+    handleLoadDataKomentar();
+  }, [newKomentar]);
+
+  const handleLoadDataKomentar = async () => {
+    try {
+      const response = await apiGetKomentarForumById({
+        id: param.id,
+        page: `${activePage}`,
+      });
+
+      if (response.success) {
+        setListKomentar(response.data);
+      } else {
+        setListKomentar([]);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data komentar forum", error);
+      setListKomentar([]);
+    }
+  };
+
+  const handleMoreDataKomentar = async () => {
+    try {
+      const nextPage = activePage + 1;
+      const response = await apiGetKomentarForumById({
+        id: param.id,
+        page: `${nextPage}`,
+      });
+
+      if (response.success) {
+        setActivePage(nextPage);
+        return response.data;
+      } else {
+        return null;
+      }
+    } catch (error) {
+      clientLogger.error("Error get data komentar forum", error);
+      return null;
+    }
+  };
 
   useShallowEffect(() => {
     mqtt_client.subscribe("Forum_detail_ganti_status");
 
     mqtt_client.on("message", (topic: any, message: any) => {
       const newData = JSON.parse(message.toString());
-      if (newData.id === data.id) {
+      if (newData.id === dataPosting?.id) {
-        const cloneData = _.clone(data);
+        const cloneData = _.clone(dataPosting);
 
         // console.log(newData.data);
         const updateData = {
@@ -58,66 +122,70 @@ export default function Forum_MainDetail({
           },
         };
 
-        setData(updateData as any);
+        setDataPosting(updateData as any);
       }
     });
-  }, [data]);
+  }, [dataPosting]);
 
   return (
     <>
       <Stack>
-        <ComponentForum_DetailForumView
+        {!dataPosting || !listKomentar ? (
-          data={data}
+          <CustomSkeleton height={200} width={"100%"} />
-          totalKomentar={countKomentar}
-          userLoginId={userLoginId}
-          onLoadData={(val) => {
-            setData(val);
-          }}
-        />
-
-        {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-          <ComponentForum_DetailCreateKomentar
-            postingId={dataPosting?.id}
-            onSetKomentar={(val) => {
-              setLsKomentar(val);
-            }}
-            data={data}
-            userLoginId={userLoginId}
-          />
         ) : (
-          ""
+          <ComponentForum_DetailForumView
+            data={dataPosting}
+            totalKomentar={dataPosting.count}
+            userLoginId={userLoginId}
+            onLoadData={(val) => {
+              setDataPosting(val);
+            }}
+          />
         )}
 
-        <Box>
+        {!dataPosting ? (
-          <ScrollOnly
+          <Forum_SkeletonKomentar />
-            height={"60vh"}
+        ) : (
-            renderLoading={() => (
+          (dataPosting?.ForumMaster_StatusPosting?.id as any) === 1 && (
-              <Center mt={"lg"}>
+            <ComponentForum_DetailCreateKomentar
-                <Loader color={"yellow"} />
+              postingId={dataPosting?.id}
-              </Center>
+              data={dataPosting}
-            )}
+              userLoginId={userLoginId}
-            data={lsKomentar}
+              onSetNewKomentar={(val) => {
-            setData={setLsKomentar}
+                setNewKomentar(val);
-            moreData={async () => {
+              }}
-              const loadData = await forum_funGetAllKomentarById({
+            />
-                postingId: data.id,
+          )
-                page: activePage + 1,
+        )}
-              });
-              setActivePage((val) => val + 1);
 
-              return loadData;
+        {!listKomentar.length && isLoading ? (
-            }}
+          <Forum_SkeletonListKomentar />
-          >
+        ) : _.isEmpty(listKomentar) ? (
-            {(item) => (
+          <ComponentGlobal_IsEmptyData text="Tidak ada komentar" />
-              <ComponentForum_KomentarView
+        ) : (
-                data={item}
+          <Box>
-                setKomentar={setLsKomentar}
+            <ScrollOnly
-                postingId={data?.id}
+              height={"60vh"}
-                userLoginId={userLoginId}
+              renderLoading={() => (
-              />
+                <Center mt={"lg"}>
-            )}
+                  <Loader color={"yellow"} />
-          </ScrollOnly>
+                </Center>
-        </Box>
+              )}
+              data={listKomentar}
+              setData={setListKomentar}
+              moreData={handleMoreDataKomentar}
+            >
+              {(item) => (
+                <ComponentForum_KomentarView
+                  data={item}
+                  setKomentar={setListKomentar}
+                  postingId={dataPosting?.id as any}
+                  userLoginId={userLoginId}
+                />
+              )}
+            </ScrollOnly>
+          </Box>
+        )}
       </Stack>
     </>
   );

src/app_modules/forum/forumku/index.tsx

@@ -1,44 +1,33 @@
 "use client";
 
-import { RouterForum } from "@/lib/router_hipmi/router_forum";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { apiGetUserById } from "@/app_modules/_global/lib/api_user";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
+import { RouterForum } from "@/lib/router_hipmi/router_forum";
+import { clientLogger } from "@/util/clientLogger";
 import {
-  ActionIcon,
-  Affix,
   Center,
   Loader,
-  Stack,
+  Stack
-  Text,
-  rem,
 } from "@mantine/core";
-import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
+import { useShallowEffect } from "@mantine/hooks";
-import { IconPencilPlus, IconSearchOff } from "@tabler/icons-react";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentForum_ForumkuMainCardView from "../component/forumku_component/forumku_view";
-import { forum_getAllPostingByAuhtorId } from "../fun/get/get_list_posting_by_author_id";
-import { MODEL_FORUM_POSTING } from "../model/interface";
-import ComponentForum_ViewForumProfile from "./forum_profile";
-import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
-import { apiGetUserById } from "@/app_modules/_global/lib/api_user";
-import backendLogger from "@/util/backendLogger";
-import { clientLogger } from "@/util/clientLogger";
 import { apiGetForumkuById } from "../component/api_fetch_forum";
+import ComponentForum_ForumkuMainCardView from "../component/forumku_component/forumku_view";
+import { Forum_ComponentIsDataEmpty } from "../component/other_component";
 import {
   Forum_SkeletonCard,
   Forum_SkeletonForumku,
 } from "../component/skeleton_view";
-import { data } from "autoprefixer";
+import { MODEL_FORUM_POSTING } from "../model/interface";
-import { Forum_ComponentIsDataEmpty } from "../component/other_component";
+import ComponentForum_ViewForumProfile from "./forum_profile";
 
 export default function Forum_Forumku({
-  totalPosting,
   userLoginId,
 }: {
-  totalPosting: number;
   userLoginId: string;
 }) {
   const router = useRouter();
@@ -56,7 +45,6 @@ export default function Forum_Forumku({
         });
 
         if (response) {
-          console.log("response", response);
           setDataUser(response.data);
         }
       } catch (error) {
@@ -117,7 +105,7 @@ export default function Forum_Forumku({
         ) : (
           <ComponentForum_ViewForumProfile
             auhtorSelectedData={dataUser}
-            totalPosting={totalPosting}
+            totalPosting={dataPosting.length}
           />
         )}
 

src/app_modules/forum/fun/create/fun_create_komentar.tsx

@@ -8,17 +8,26 @@ export async function forum_funCreateKomentar(
   postingId: string,
   komentar: string
 ) {
-  const userLoginId = await funGetUserIdByToken();
+  try {
+    const userLoginId = await funGetUserIdByToken();
 
-  const create = await prisma.forum_Komentar.create({
+    const create = await prisma.forum_Komentar.create({
-    data: {
+      data: {
-      komentar: komentar,
+        komentar: komentar,
-      forum_PostingId: postingId,
+        forum_PostingId: postingId,
-      authorId: userLoginId,
+        authorId: userLoginId,
-    },
+      },
-  });
+    });
 
-  if (!create) return { status: 400, message: "Gagal menambahkan komentar" };
+    if (!create) return { status: 400, message: "Gagal menambahkan komentar" };
-  revalidatePath("/dev/forum/detail");
+
-  return { status: 201, message: "Berhasil menambahkan komentar" };
+    return { status: 201, message: "Berhasil menambahkan komentar" };
+  } catch (error) {
+    console.log(error);
+    return {
+      status: 500,
+      message: "Error API",
+      error: (error as Error).message,
+    };
+  }
 }

src/app_modules/forum/fun/create/fun_create_report_komentar.ts

@@ -12,6 +12,9 @@ export async function forum_funCreateReportKomentar({
 }) {
   const userLoginId = await funGetUserIdByToken();
 
+  if (!userLoginId)
+    return { status: 400, message: "Gagal menambahkan report komentar !" };
+
   try {
     const createReport = await prisma.forum_ReportKomentar.create({
       data: {
@@ -23,9 +26,15 @@ export async function forum_funCreateReportKomentar({
 
     if (!createReport)
       return { status: 400, message: "Gagal menambahkan report komentar !" };
+
+    return { status: 201, message: "Berhasil me-report komentar !" };
   } catch (error) {
     console.log(error);
+    return {
+      status: 500,
+      message: "Error API",
+      error: (error as Error).message,
+    };
   }
 
-  return { status: 201, message: "Berhasil me-report komentar !" };
 }

src/app_modules/forum/fun/create/fun_create_report_komentar_lainnya.ts

@@ -2,21 +2,33 @@
 
 import prisma from "@/lib/prisma";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import backendLogger from "@/util/backendLogger";
 
 export async function forum_funCreateReportKomentarLainnya(
   komentarId: string,
   deskripsi: string
 ) {
-  const userLoginId = await funGetUserIdByToken();
+  try {
+    const userLoginId = await funGetUserIdByToken();
+    if (!userLoginId)
+      return { status: 400, message: "Gagal menambah report !" };
 
-  const create = await prisma.forum_ReportKomentar.create({
+    const create = await prisma.forum_ReportKomentar.create({
-    data: {
+      data: {
-      forum_KomentarId: komentarId,
+        forum_KomentarId: komentarId,
-      deskripsi: deskripsi,
+        deskripsi: deskripsi,
-      userId: userLoginId,
+        userId: userLoginId,
-    },
+      },
-  });
+    });
 
-  if (!create) return { status: 400, message: "Gagal menambah report !" };
+    if (!create) return { status: 400, message: "Gagal menambah report !" };
-  return { status: 201, message: "Berhasil menambah report !" };
+    return { status: 201, message: "Berhasil menambah report !" };
+  } catch (error) {
+    backendLogger.error("Error create report komentar lainnya", error);
+    return {
+      status: 500,
+      message: "Error API",
+      error: (error as Error).message,
+    };
+  }
 }

src/app_modules/forum/fun/create/fun_create_report_posting.ts

@@ -3,7 +3,6 @@
 import prisma from "@/lib/prisma";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 
-
 export async function forum_funCreateReportPosting({
   postingId,
   kategoriId,
@@ -11,18 +10,28 @@ export async function forum_funCreateReportPosting({
   postingId: string;
   kategoriId: number;
 }) {
+  try {
     const userLoginId = await funGetUserIdByToken();
+    if (!userLoginId)
+      return { status: 400, message: "Gagal menambahkan report posting!" };
 
+    const createReport = await prisma.forum_ReportPosting.create({
+      data: {
+        userId: userLoginId,
+        forum_PostingId: postingId,
+        forumMaster_KategoriReportId: kategoriId,
+      },
+    });
 
-  const createReport = await prisma.forum_ReportPosting.create({
+    if (!createReport)
-    data: {
+      return { status: 400, message: "Gagal menambahkan report posting!" };
-      userId: userLoginId,
-      forum_PostingId: postingId,
-      forumMaster_KategoriReportId: kategoriId,
-    },
-  });
 
-  if (!createReport)
+    return { status: 201, message: "Berhasil me-report posting!" };
-    return { status: 400, message: "Gagal menambahkan report posting!" };
+  } catch (error) {
-  return { status: 201, message: "Berhasil me-report posting!" };
+    return {
+      status: 400,
+      message: "Error menambahkan report posting",
+      error: (error as Error).message,
+    };
+  }
 }

src/app_modules/forum/fun/create/fun_create_report_posting_lainnya.ts

@@ -3,20 +3,32 @@
 import prisma from "@/lib/prisma";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 
-
 export async function forum_funCreateReportPostingLainnya(
   postingId: string,
   deskripsi: string
 ) {
-  const userLoginId = await funGetUserIdByToken();
+  try {
-  const create = await prisma.forum_ReportPosting.create({
+    const userLoginId = await funGetUserIdByToken();
-    data: {
+    if (!userLoginId)
-      forum_PostingId: postingId,
+      return { status: 400, message: "Gagal menambah report !" };
-      deskripsi: deskripsi,
-      userId: userLoginId,
-    },
-  });
 
-  if (!create) return { status: 400, message: "Gagal menambah report !" };
+    const create = await prisma.forum_ReportPosting.create({
-  return { status: 201, message: "Berhasil menambah report !" };
+      data: {
+        forum_PostingId: postingId,
+        deskripsi: deskripsi,
+        userId: userLoginId,
+      },
+    });
+
+    if (!create) return { status: 400, message: "Gagal menambah report !" };
+
+    return { status: 201, message: "Berhasil menambah report !" };
+  } catch (error) {
+    console.log(error);
+    return {
+      status: 500,
+      message: "Error API",
+      error: (error as Error).message,
+    };
+  }
 }

src/app_modules/forum/fun/delete/fun_delete_posting_by_id.ts

@@ -4,16 +4,25 @@ import prisma from "@/lib/prisma";
 import { revalidatePath } from "next/cache";
 
 export async function forum_funDeletePostingById(forumId: string) {
-  const del = await prisma.forum_Posting.update({
+  try {
-    where: {
+    const del = await prisma.forum_Posting.update({
-      id: forumId,
+      where: {
-    },
+        id: forumId,
-    data: {
+      },
-      isActive: false,
+      data: {
-    },
+        isActive: false,
-  });
+      },
+    });
 
-  if (!del) return { status: 400, message: "Gagal dihapus" };
+    if (!del) return { status: 400, message: "Gagal dihapus" };
-  revalidatePath("/dev/forum/main");
+    revalidatePath("/dev/forum/main");
-  return { status: 200, message: "Berhasil dihapus" };
+    return { status: 200, message: "Berhasil dihapus" };
+  } catch (error) {
+    console.log(error);
+    return {
+      status: 500,
+      message: "Error API",
+      error: (error as Error).message,
+    };
+  }
 }

src/app_modules/forum/fun/master/get_master_kategori_report.ts

@@ -4,8 +4,5 @@ import prisma from "@/lib/prisma";
 
 export async function forum_getMasterKategoriReport() {
   const data = await prisma.forumMaster_KategoriReport.findMany({});
-
-  const changeType = JSON.stringify(data, null,2)
-
   return data;
 }

src/app_modules/forum/model/interface.tsx

@@ -14,6 +14,7 @@ export interface MODEL_FORUM_POSTING {
   Forum_ReportPosting: MODEL_FORUM_MASTER_REPORT[];
   ForumMaster_StatusPosting: MODEL_FORUM_MASTER_STATUS;
   forumMaster_StatusPostingId: number;
+  count: number
 }
 
 export interface MODEL_FORUM_KOMENTAR {

src/app_modules/forum/report/komentar/index.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { RouterForum } from "@/lib/router_hipmi/router_forum";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { RouterForum } from "@/lib/router_hipmi/router_forum";
 import mqtt_client from "@/util/mqtt_client";
 import { Button, Radio, Stack, Text, Title } from "@mantine/core";
 import { toNumber } from "lodash";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { forum_funCreateReportKomentar } from "../../fun/create/fun_create_report_komentar";
 
@@ -14,21 +14,43 @@ import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetMasterReportForum } from "../../component/api_fetch_forum";
 import forum_getOneKategoriById from "../../fun/get/get_one_kategori_by_id";
 import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
 
 export default function Forum_ReportKomentar({
-  komentarId,
-  listReport,
   userLoginId,
 }: {
-  komentarId: string;
-  listReport: MODEL_FORUM_MASTER_REPORT[];
   userLoginId: string;
 }) {
+  const param = useParams<{ id: string }>();
+  const komentarId = param.id;
+  const [listReport, setListReport] = useState<
+    MODEL_FORUM_MASTER_REPORT[] | null
+  >(null);
   const [reportValue, setReportValue] = useState("1");
 
+  useShallowEffect(() => {
+    handleLoadMasterReport();
+  }, []);
+
+  const handleLoadMasterReport = async () => {
+    try {
+      const response = await apiGetMasterReportForum();
+      if (response.success) {
+        setListReport(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get master report", error);
+    }
+  };
+
+  if (!listReport) return <CustomSkeleton height={50} width={"100%"} />;
+
   return (
     <>
       <Stack
@@ -87,37 +109,43 @@ function ButtonAction({
   const [isLoadingLain, setIsLoadingLain] = useState(false);
 
   async function onReport() {
-    const report = await forum_funCreateReportKomentar({
+    try {
-      komentarId: komentarId,
+      setLoading(true);
-      kategoriId: kategoriId,
+      const report = await forum_funCreateReportKomentar({
-    });
+        komentarId: komentarId,
-
-    if (report.status === 201) {
-      const getKategori = await forum_getOneKategoriById({
         kategoriId: kategoriId,
       });
-      // console.log(getKategori);
-      const dataNotif = {
-        appId: komentarId,
-        pesan: getKategori?.deskripsi,
-        kategoriApp: "FORUM",
-        title: getKategori?.title,
-        userId: userLoginId,
-        status: "Report Komentar",
-      };
-      const createNotif = await notifikasiToAdmin_funCreate({
-        data: dataNotif as any,
-      });
 
-      if (createNotif.status === 201) {
+      if (report.status === 201) {
-        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+        const getKategori = await forum_getOneKategoriById({
+          kategoriId: kategoriId,
+        });
+        // console.log(getKategori);
+        const dataNotif = {
+          appId: komentarId,
+          pesan: getKategori?.deskripsi,
+          kategoriApp: "FORUM",
+          title: getKategori?.title,
+          userId: userLoginId,
+          status: "Report Komentar",
+        };
+        const createNotif = await notifikasiToAdmin_funCreate({
+          data: dataNotif as any,
+        });
+
+        if (createNotif.status === 201) {
+          mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+        }
+
+        router.back();
+        return ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(report.message);
       }
-
+    } catch (error) {
-      setLoading(true);
+      clientLogger.error("Error report komentar", error);
-      router.back();
+      setLoading(false);
-      return ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
-    } else {
-      ComponentGlobal_NotifikasiGagal(report.message);
     }
   }
   return (
@@ -125,7 +153,7 @@ function ButtonAction({
       <Stack mt={"md"}>
         <Button
           loaderPosition="center"
-          loading={isLoadingLain ? true : false}
+          loading={isLoadingLain}
           radius={"xl"}
           onClick={() => {
             setIsLoadingLain(true);
@@ -138,7 +166,7 @@ function ButtonAction({
           radius={"xl"}
           color="orange"
           loaderPosition="center"
-          loading={loading ? true : false}
+          loading={loading}
           onClick={() => onReport()}
         >
           Report

src/app_modules/forum/report/komentar/lainnya.tsx

@@ -2,7 +2,7 @@
 
 import { RouterForum } from "@/lib/router_hipmi/router_forum";
 import { Button, Group, Stack, Textarea } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
@@ -11,15 +11,17 @@ import { forum_funCreateReportPostingLainnya } from "../../fun/create/fun_create
 import { forum_funCreateReportKomentarLainnya } from "../../fun/create/fun_create_report_komentar_lainnya";
 import mqtt_client from "@/util/mqtt_client";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Forum_ReportKomentarLainnya({
-  komentarId,
   userLoginId,
 }: {
-  komentarId: string;
   userLoginId: string;
 }) {
+  const param = useParams<{ id: string }>();
+  const komentarId = param.id;
   const [deskripsi, setDeskripsi] = useState("");
+
   return (
     <>
       <Stack>
@@ -51,41 +53,53 @@ function ButtonAction({
   userLoginId: string;
 }) {
   const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
 
   async function onReport() {
-    const report = await forum_funCreateReportKomentarLainnya(
+    try {
-      komentarId,
+      setLoading(true);
-      deskripsi
+      const report = await forum_funCreateReportKomentarLainnya(
-    );
+        komentarId,
+        deskripsi
+      );
 
-    if (report.status === 201) {
+      if (report.status === 201) {
-      const dataNotif = {
+        const dataNotif = {
-        appId: komentarId,
+          appId: komentarId,
-        pesan: deskripsi,
+          pesan: deskripsi,
-        kategoriApp: "FORUM",
+          kategoriApp: "FORUM",
-        title: "Lainnya",
+          title: "Lainnya",
-        userId: userLoginId,
+          userId: userLoginId,
-        status: "Report Komentar",
+          status: "Report Komentar",
-      };
+        };
 
-      const createNotifikasi = await notifikasiToAdmin_funCreate({
+        const createNotifikasi = await notifikasiToAdmin_funCreate({
-        data: dataNotif as any,
+          data: dataNotif as any,
-      });
+        });
 
-      if (createNotifikasi.status === 201) {
+        if (createNotifikasi.status === 201) {
-        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+          mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+        }
+
+        ComponentGlobal_NotifikasiBerhasil(report.message);
+        router.back();
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(report.message);
       }
-
+    } catch (error) {
-      ComponentGlobal_NotifikasiBerhasil(report.message);
+      setLoading(false);
-      router.back();
+      clientLogger.error("Error report komentar lainnya", error);
-    } else {
-      ComponentGlobal_NotifikasiGagal(report.message);
     }
   }
   return (
     <>
       <Group position="apart" grow>
         <Button
+          disabled={isLoading}
+          style={{
+            transition: "0.5s",
+          }}
           radius={"xl"}
           onClick={() =>
             router.replace(RouterForum.report_komentar + komentarId)
@@ -94,6 +108,8 @@ function ButtonAction({
           Batal
         </Button>
         <Button
+          loading={isLoading}
+          loaderPosition="center"
           style={{
             transition: "0.5s",
           }}

src/app_modules/forum/report/posting/index.tsx

@@ -11,23 +11,43 @@ import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/cre
 import mqtt_client from "@/util/mqtt_client";
 import { Button, Radio, Stack, Text, Title } from "@mantine/core";
 import { toNumber } from "lodash";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
 import forum_getOneKategoriById from "../../fun/get/get_one_kategori_by_id";
 import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetMasterReportForum } from "../../component/api_fetch_forum";
+import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 export default function Forum_ReportPosting({
-  postingId,
-  listReport,
   userLoginId,
 }: {
-  postingId: string;
-  listReport: MODEL_FORUM_MASTER_REPORT[];
   userLoginId: string;
 }) {
+  const param = useParams<{ id: string }>();
+  const postingId = param.id;
+  const [listReport, setListReport] = useState<MODEL_FORUM_MASTER_REPORT[] | null>(null);
   const [reportValue, setReportValue] = useState("1");
 
+  useShallowEffect(() => {
+    handleLoadMasterReport();
+  }, []);
+
+  const handleLoadMasterReport = async () => {
+    try {
+      const response = await apiGetMasterReportForum();
+      if (response.success) {
+        setListReport(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get master report", error);
+    }
+  };
+
+  if (!listReport) return <CustomSkeleton height={50} width={"100%"} />;
+
   return (
     <>
       <Stack
@@ -86,38 +106,45 @@ function ButtonAction({
   const [isLoadingLain, setIsLoadingLain] = useState(false);
 
   async function onReport() {
-    const report = await forum_funCreateReportPosting({
+    try {
-      postingId: postingId,
-      kategoriId: kategoriId,
-    });
-    if (report.status === 201) {
-      const getKategori = await forum_getOneKategoriById({
-        kategoriId: toNumber(kategoriId),
-      });
-      // console.log(getKategori);
-
-      ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
-      router.back();
-
-      const dataNotif = {
-        appId: postingId,
-        pesan: getKategori?.deskripsi,
-        kategoriApp: "FORUM",
-        title: getKategori?.title,
-        userId: userLoginId,
-        status: "Report Posting",
-      };
-
-      const createNotifikasi = await notifikasiToAdmin_funCreate({
-        data: dataNotif as any,
-      });
-
-      if (createNotifikasi.status === 201) {
-        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
-      }
       setIsLoading(true);
-    } else {
+
-      ComponentGlobal_NotifikasiGagal(report.message);
+      const report = await forum_funCreateReportPosting({
+        postingId: postingId,
+        kategoriId: kategoriId,
+      });
+      if (report.status === 201) {
+        const getKategori = await forum_getOneKategoriById({
+          kategoriId: toNumber(kategoriId),
+        });
+        // console.log(getKategori);
+
+        ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
+        router.back();
+
+        const dataNotif = {
+          appId: postingId,
+          pesan: getKategori?.deskripsi,
+          kategoriApp: "FORUM",
+          title: getKategori?.title,
+          userId: userLoginId,
+          status: "Report Posting",
+        };
+
+        const createNotifikasi = await notifikasiToAdmin_funCreate({
+          data: dataNotif as any,
+        });
+
+        if (createNotifikasi.status === 201) {
+          mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+        }
+      } else {
+        setIsLoading(false);
+        ComponentGlobal_NotifikasiGagal(report.message);
+      }
+    } catch (error) {
+      clientLogger.error("Error Report Posting", error);
+      setIsLoading(false);
     }
   }
   return (

src/app_modules/forum/report/posting/lainnya.tsx

@@ -2,7 +2,7 @@
 
 import { RouterForum } from "@/lib/router_hipmi/router_forum";
 import { Button, Group, Stack, Textarea } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
@@ -10,15 +10,17 @@ import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_glo
 import { forum_funCreateReportPostingLainnya } from "../../fun/create/fun_create_report_posting_lainnya";
 import mqtt_client from "@/util/mqtt_client";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Forum_ReportPostingLainnya({
-  postingId,
   userLoginId,
 }: {
-  postingId: string;
   userLoginId: string;
 }) {
+  const param = useParams<{ id: string }>();
+  const postingId = param.id;
   const [deskripsi, setDeskripsi] = useState("");
+
   return (
     <>
       <Stack>
@@ -50,50 +52,64 @@ function ButtonAction({
   userLoginId: string;
 }) {
   const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
 
   async function onReport() {
-    const report = await forum_funCreateReportPostingLainnya(
+    try {
-      postingId,
+      setIsLoading(true);
-      deskripsi
+      const report = await forum_funCreateReportPostingLainnya(
-    );
+        postingId,
-    if (report.status === 201) {
+        deskripsi
-      ComponentGlobal_NotifikasiBerhasil(report.message);
+      );
-      router.back();
+      if (report.status === 201) {
+        ComponentGlobal_NotifikasiBerhasil(report.message);
+        router.back();
 
-      const dataNotif = {
+        const dataNotif = {
-        appId: postingId,
+          appId: postingId,
-        pesan: deskripsi,
+          pesan: deskripsi,
-        kategoriApp: "FORUM",
+          kategoriApp: "FORUM",
-        title: "Lainnya",
+          title: "Lainnya",
-        userId: userLoginId,
+          userId: userLoginId,
-        status: "Report Posting",
+          status: "Report Posting",
-      };
+        };
 
-      const createNotifikasi = await notifikasiToAdmin_funCreate({
+        const createNotifikasi = await notifikasiToAdmin_funCreate({
-        data: dataNotif as any,
+          data: dataNotif as any,
-      });
+        });
 
-      if (createNotifikasi.status === 201) {
+        if (createNotifikasi.status === 201) {
-        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+          mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+        }
+      } else {
+        setIsLoading(false);
+        ComponentGlobal_NotifikasiGagal(report.message);
       }
-    } else {
+    } catch (error) {
-      ComponentGlobal_NotifikasiGagal(report.message);
+      setIsLoading(false);
+      clientLogger.error("Error create report posting", error);
     }
   }
   return (
     <>
       <Group position="apart" grow>
         <Button
+          style={{
+            transition: "0.5s",
+          }}
+          disabled={isLoading}
           radius={"xl"}
           onClick={() => router.replace(RouterForum.report_posting + postingId)}
         >
           Batal
         </Button>
         <Button
+          loading={isLoading}
+          loaderPosition="center"
           style={{
             transition: "0.5s",
           }}
-          disabled={deskripsi === "" ? true : false}
+          disabled={deskripsi === ""}
           radius={"xl"}
           color="orange"
           onClick={() => onReport()}

src/app_modules/forum/report/posting/layout.tsx

@@ -13,7 +13,7 @@ export default function LayoutForum_ReportPosting({
     <>
       <UIGlobal_LayoutTamplate
         header={
-          <UIGlobal_LayoutHeaderTamplate title="Mengumpulkan Informasi Posting" />
+          <UIGlobal_LayoutHeaderTamplate title="Informasi Report Posting" />
         }
       >
         {children}

src/middleware.ts

@@ -34,7 +34,6 @@ const middlewareConfig: MiddlewareConfig = {
 
     // ADMIN API
     // >> buat dibawah sini << 
-    "/api/admin/vote/*",
     
 
     // Akses awal