Merge pull request #70 from bipproduction/ui/job

UI/job

package.json

@@ -35,7 +35,6 @@
     "@types/node": "20.4.5",
     "@types/react": "18.2.17",
     "@types/react-dom": "18.2.7",
-    "@types/react-virtualized": "^9.21.30",
     "@types/uuid": "^9.0.4",
     "autoprefixer": "10.4.14",
     "bufferutil": "^4.0.8",
@@ -67,7 +66,6 @@
     "react-responsive-carousel": "^3.2.23",
     "react-simple-toasts": "^5.10.0",
     "react-toastify": "^9.1.3",
-    "react-virtualized": "^9.22.5",
     "socket.io-client": "^4.7.2",
     "tailwindcss": "3.3.3",
     "ts-node": "^10.9.2",

src/app/dev/admin/forum/sub-detail/report-komentar/[id]/page.tsx

@@ -1,15 +1,23 @@
 import { AdminForum_HasilReportKomentar } from "@/app_modules/admin/forum";
 import { adminForum_getListReportKomentarbyId } from "@/app_modules/admin/forum/fun/get/get_list_report_komentar_by_id";
+import adminForum_funGetOneKomentarById from "@/app_modules/admin/forum/fun/get/get_one_komentar_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let komentarId = params.id;
-  const listReport = await adminForum_getListReportKomentarbyId({komentarId: komentarId, page: 1});
+  const listReport = await adminForum_getListReportKomentarbyId({
+    komentarId: komentarId,
+    page: 1,
+  });
+  const dataKomentar = await adminForum_funGetOneKomentarById({
+    komentarId: komentarId,
+  });
 
   return (
     <>
       <AdminForum_HasilReportKomentar
         listReport={listReport}
         komentarId={komentarId}
+        dataKomentar={dataKomentar as any}
       />
     </>
   );

src/app/dev/admin/forum/sub-menu/report-komentar/page.tsx

@@ -0,0 +1,12 @@
+import adminForum_funGetAllReportKomentar from "@/app_modules/admin/forum/fun/get/get_all_report_komentar";
+import AdminForum_TableReportKomentar from "@/app_modules/admin/forum/sub_menu/table_report_komentar";
+
+export default async function Page() {
+  const listData = await adminForum_funGetAllReportKomentar({ page: 1 });
+
+  return (
+    <>
+      <AdminForum_TableReportKomentar listData={listData} />
+    </>
+  );
+}

src/app/dev/forum/create/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/forum/detail/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

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

@@ -1,26 +1,33 @@
-import Forum_Detail from "@/app_modules/forum/detail";
-import { forum_getKomentarById } from "@/app_modules/forum/fun/get/get_komentar_by_id";
+import Forum_MainDetail from "@/app_modules/forum/detail/main_detail";
+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 { forum_countOneTotalKomentarById } from "@/app_modules/forum/fun/count/count_one_total_komentar_by_id";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import { redirect } from "next/navigation";
+import { forum_countTotalKomenById } from "@/app_modules/forum/fun/count/count_total_komentar_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let postingId = params.id;
 
   const userLoginId = await user_getOneUserId();
   const dataPosting = await forum_getOnePostingById(postingId);
-  const listKomentar = await forum_getKomentarById(postingId);
+  const listKomentar = await forum_funGetAllKomentarById({
+    postingId: postingId,
+    page: 1,
+  });
 
   dataPosting?.isActive === false && redirect(RouterForum.beranda);
 
+  const countKomentar = await forum_countTotalKomenById(postingId);
+
   return (
     <>
-      <Forum_Detail
+      <Forum_MainDetail
         dataPosting={dataPosting as any}
         listKomentar={listKomentar as any}
         userLoginId={userLoginId}
+        countKomentar={countKomentar}
       />
     </>
   );

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

@@ -0,0 +1,13 @@
+import { Forum_DetailReportKomentar } from "@/app_modules/forum";
+import forum_funGetOneReportKomentarById from "@/app_modules/forum/fun/get/get_one_report_komentar_by_id";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const komentarId = params.id;
+  const dataKomentar = await forum_funGetOneReportKomentarById({ komentarId: komentarId });
+
+  return (
+    <>
+      <Forum_DetailReportKomentar dataKomentar={dataKomentar as any} />
+    </>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { Forum_DetailReportPosting } from "@/app_modules/forum";
+import forum_funGetOneReportedPostingById from "@/app_modules/forum/fun/get/get_one_posting_reported_by_id";
+
+export default async function Page({params}: {params: {id: string}}) {
+  const postingId = params.id
+  const dataPosting = await forum_funGetOneReportedPostingById({postingId: postingId})
+  return (
+    <>
+      <Forum_DetailReportPosting dataPosting={dataPosting} />
+    </>
+  );
+}

src/app/dev/forum/edit/posting/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

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

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

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

@@ -1,5 +1,5 @@
 import { Forum_Forumku } from "@/app_modules/forum";
-import { forum_getListPostingByAuhtorId } from "@/app_modules/forum/fun/get/get_list_posting_by_author_id";
+import { forum_getAllPostingByAuhtorId } from "@/app_modules/forum/fun/get/get_list_posting_by_author_id";
 import { forum_countOneTotalKomentarById } from "@/app_modules/forum/fun/count/count_one_total_komentar_by_id";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
@@ -25,7 +25,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   //   setTimeout(a, 1000);
   // });
 
-  const dataPosting = await forum_getListPostingByAuhtorId(authorId);
+  const dataPosting = await forum_getAllPostingByAuhtorId({authorId: authorId, page: 1});
   const totalPosting = await forum_countPostingByAuthorId(authorId);
 
   return (

src/app/dev/forum/main/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}

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

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

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

@@ -1,11 +1,16 @@
 import { Forum_ReportKomentarLainnya } from "@/app_modules/forum";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let komentarId = params.id;
+  const userLoginId = await user_getOneUserId();
 
   return (
     <>
-      <Forum_ReportKomentarLainnya komentarId={komentarId} />
+      <Forum_ReportKomentarLainnya
+        komentarId={komentarId}
+        userLoginId={userLoginId}
+      />
     </>
   );
 }

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

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

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

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

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

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

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

@@ -1,11 +1,16 @@
 import { Forum_ReportPostingLainnya } from "@/app_modules/forum";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  let postingIg = params.id;
+  let postingId = params.id;
+  const userLoginId = await user_getOneUserId()
 
   return (
     <>
-      <Forum_ReportPostingLainnya postingIg={postingIg} />
+      <Forum_ReportPostingLainnya
+        postingId={postingId}
+        userLoginId={userLoginId}
+      />
     </>
   );
 }

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

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

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

@@ -1,13 +1,11 @@
 import { Forum_ReportPosting } from "@/app_modules/forum";
-import { forum_getOnePostingById } from "@/app_modules/forum/fun/get/get_one_posting_by_id";
 import { forum_getMasterKategoriReport } from "@/app_modules/forum/fun/master/get_master_kategori_report";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let postingId = params.id;
   const listReport = await forum_getMasterKategoriReport();
-  const userLoginId = await user_getOneUserId()
-  const dataPosting = await forum_getOnePostingById(postingId)
+  const userLoginId = await user_getOneUserId();
 
   return (
     <>

src/app/dev/forum/splash/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/home/page.tsx

@@ -26,7 +26,7 @@ export default async function Page() {
 
   return (
     <>
-      <HomeView dataUser={dataUser as any} dataJob={[]} />
+      <HomeView dataUser={dataUser as any} dataJob={dataJob as any} />
     </>
   );
 }

src/app/dev/job/create/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/arsip/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/arsip/[id]/page.tsx

@@ -1,9 +1,9 @@
 import {  Job_DetailArsip } from "@/app_modules/job";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 export default async function Page({params}:{params: {id: string}}) {
   let jobId = params.id
-  const dataJob = await Job_getOneById(jobId)
+  const dataJob = await job_getOneById(jobId)
   return (
     <>
       <Job_DetailArsip dataJob={dataJob as any} />

src/app/dev/job/detail/draft/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/draft/[id]/page.tsx

@@ -1,10 +1,10 @@
 import Job_DetailDraft from "@/app_modules/job/detail/draft/view";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 
 export default async function Page({params}: {params: {id: string}}) {
   let jobId = params.id
-  const dataJob = await Job_getOneById(jobId)
+  const dataJob = await job_getOneById(jobId)
 
   return (
     <>

src/app/dev/job/detail/main/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

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

@@ -1,11 +1,11 @@
 "use server";
 import { Job_MainDetail } from "@/app_modules/job";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 import app_config from "@/util/app_config";
 
 export default async function Page({ params }: { params: { id: string } }) {
   const idJob = params.id;
-  const dataJob = await Job_getOneById(idJob);
+  const dataJob = await job_getOneById(idJob);
 
   return (
     <>

src/app/dev/job/detail/publish/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/publish/[id]/page.tsx

@@ -1,9 +1,9 @@
 import { Job_DetailPublish } from "@/app_modules/job";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 export default async function Page({params}: {params: {id: string}}) {
   let jobId = params.id
-  const dataJob = await Job_getOneById(jobId)
+  const dataJob = await job_getOneById(jobId)
 
   return (
     <>

src/app/dev/job/detail/reject/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/reject/[id]/page.tsx

@@ -1,10 +1,10 @@
 
 import Job_DetailReject from "@/app_modules/job/detail/reject/view";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 export default async function Page({params}: {params: {id: string}}) {
   let jobId = params.id
-  const dataJob = await Job_getOneById(jobId)
+  const dataJob = await job_getOneById(jobId)
 
   return (
     <>

src/app/dev/job/detail/review/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/review/[id]/page.tsx

@@ -1,5 +1,5 @@
 import Job_DetailReview from "@/app_modules/job/detail/review/view";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 import React from "react";
 
 export default async function Page({
@@ -8,7 +8,7 @@ export default async function Page({
   params: { id: React.ReactNode };
 }) {
   let jobId = params.id;
-  const dataJob = await Job_getOneById(jobId)
+  const dataJob = await job_getOneById(jobId)
 
   return (
     <>

src/app/dev/job/edit/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/edit/[id]/page.tsx

@@ -1,9 +1,9 @@
 import { Job_Edit } from "@/app_modules/job";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let jobId = params.id;
-  const dataJob = await Job_getOneById(jobId);
+  const dataJob = await job_getOneById(jobId);
 
   return (
     <>

src/app/dev/job/main/arsip/page.tsx

@@ -1,12 +1,12 @@
 import { Job_Arsip } from "@/app_modules/job";
-import { Job_getListAllArsipById } from "@/app_modules/job/fun/get/get_list_all_arsip";
+import { job_getAllArsipById } from "@/app_modules/job/fun/get/get_all_arsip";
 
 export default async function Page() {
-  const dataJob = await Job_getListAllArsipById()
+  const dataJob = await job_getAllArsipById({ page: 1 });
 
   return (
     <>
-      <Job_Arsip dataJob={dataJob as any}/>
+      <Job_Arsip dataJob={dataJob as any} />
     </>
   );
 }

src/app/dev/job/main/beranda/page.tsx

@@ -1,12 +1,12 @@
-import { Job_Beranda } from "@/app_modules/job";
-import { Job_getAllListPublish } from "@/app_modules/job/fun/get/get_list_all_publish";
+import { Job_ViewBeranda } from "@/app_modules/job";
+import { job_getAllListPublish } from "@/app_modules/job/fun/get/get_all_publish";
 
 export default async function Page() {
-  const listJob = await Job_getAllListPublish();
+  const listJob = await job_getAllListPublish({ page: 1 });
 
   return (
     <>
-      <Job_Beranda listJob={listJob as any} />
+      <Job_ViewBeranda listJob={listJob as any} />
     </>
   );
 }

src/app/dev/job/main/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/main/status/page.tsx

@@ -1,13 +1,14 @@
 import { Job_Status } from "@/app_modules/job";
-import { Job_getListStatusByStatusId } from "@/app_modules/job/fun/get/get_list_status_by_status_id";
+import job_getAllStatusDraft from "@/app_modules/job/fun/get/status/get_list_draft";
+import job_getAllStatusPublish from "@/app_modules/job/fun/get/status/get_list_publish";
+import job_getAllStatusReject from "@/app_modules/job/fun/get/status/get_list_reject";
+import job_getAllStatusReview from "@/app_modules/job/fun/get/status/get_list_review";
 
 export default async function Page() {
-  const listPublish = await Job_getListStatusByStatusId("1");
-  const listReview = await Job_getListStatusByStatusId("2");
-  const listDraft = await Job_getListStatusByStatusId("3");
-  const listReject = await Job_getListStatusByStatusId("4");
-
-
+  const listPublish = await job_getAllStatusPublish({page: 1});
+  const listReview = await job_getAllStatusReview({ page: 1 });
+  const listDraft = await job_getAllStatusDraft({ page: 1 });
+  const listReject = await job_getAllStatusReject({page: 1});
 
   return (
     <>

src/app/dev/job/non_user_view/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/non_user_view/[id]/page.tsx

@@ -1,11 +1,9 @@
-"use server";
 import { Job_NonUserView } from "@/app_modules/job";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
-import os from "os";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let jobId = params.id;
-  const dataJob = await Job_getOneById(jobId);
+  const dataJob = await job_getOneById(jobId);
   // const platform = os.platform();
   // const hostName =
   //   platform === "darwin"

src/app/dev/job/splash/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/splash/page.tsx

@@ -1,9 +1,9 @@
-import { Job_Splash } from "@/app_modules/job";
+import { Job_ViewSplash } from "@/app_modules/job";
 
 export default async function Page() {
   return (
     <>
-      <Job_Splash />
+      <Job_ViewSplash />
     </>
   );
 }

src/app/emotion.tsx

@@ -1,11 +1,16 @@
 "use client";
-import AppNotif from "@/app_modules/notif";
+import { MainColor } from "@/app_modules/component_global/color/color_pallet";
 // import './globals.css'
 import { CacheProvider } from "@emotion/react";
-import { Image, MantineProvider, useEmotionCache } from "@mantine/core";
+import {
+  Box,
+  Container,
+  MantineProvider,
+  rem,
+  useEmotionCache,
+} from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import { useServerInsertedHTML } from "next/navigation";
-import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 export default function RootStyleRegistry({
@@ -35,8 +40,24 @@ export default function RootStyleRegistry({
           <MantineProvider withGlobalStyles withNormalizeCSS>
             <Notifications position="top-center" containerWidth={300} />
             {children}
-            {/* <ToastContainer position="bottom-center" />
-            <AppNotif /> */}
+            {/* <Box
+              bg={"#252A2F"}
+              pos={"fixed"}
+              w={"100%"}
+              h={"100%"}
+              style={{
+                overflowY: "auto",
+              }}
+            >
+              <Container
+                mih={"100vh"}
+                p={0}
+                size={rem(500)}
+                bg={MainColor.darkblue}
+              >
+                
+              </Container>
+            </Box> */}
           </MantineProvider>
         </CacheProvider>
       </body>

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import MqttLoader from "@/util/mqtt_loader";
 import RootStyleRegistry from "./emotion";
+import { Container } from "@mantine/core";
 
 export default function RootLayout({
   children,

src/app/lib/router_admin/router_admin_forum.ts

@@ -5,7 +5,7 @@ export const RouterAdminForum = {
   // sub menu
   table_posting: "/dev/admin/forum/sub-menu/posting",
   table_report_posting: "/dev/admin/forum/sub-menu/report-posting",
-
+  table_report_komentar: "/dev/admin/forum/sub-menu/report-komentar",
 
   // detail
   detail_posting: "/dev/admin/forum/detail/",

src/app/lib/router_hipmi/router_forum.ts

@@ -13,9 +13,11 @@ export const RouterForum = {
   edit_komentar: "/dev/forum/edit/komentar/",
 
   //detail
-  main_detail: "/dev/forum/detail/",
+  main_detail: "/dev/forum/detail/main-detail/",
+  detail_report_komentar: "/dev/forum/detail/report-komentar/",
+  detail_report_posting: "/dev/forum/detail/report-posting/",
 
-  // komentra
+  // komentar
   komentar: "/dev/forum/komentar/",
 
   //report

src/app/makuro/page.tsx

@@ -47,5 +47,5 @@ export default function App() {
     padding: 8,
   };
 
-  return <Coba />;
+  return <></>;
 }

src/app/zCoba/page.tsx

@@ -1,16 +1,17 @@
+import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import Coba_TestLoading from "@/app_modules/zCoba";
+import { Text } from "@mantine/core";
 
 export default async function Page() {
-
-
-   await new Promise((a, b) => {
-     setTimeout(a, 3000);
-   });
+  await new Promise((a, b) => {
+    setTimeout(a, 3000);
+  });
 
   return (
     <>
       <Coba_TestLoading />
-     
+      {/* <ComponentGlobal_UI_LayoutTamplate /> */}
     </>
   );
 }

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

@@ -0,0 +1,64 @@
+"use client";
+
+import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "@/app_modules/forum/model/interface";
+import {
+  Badge,
+  Box,
+  Divider,
+  Group,
+  Paper,
+  Spoiler,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+
+export default function ComponentAdminForum_ViewOneDetailKomentar({
+  dataKomentar,
+}: {
+  dataKomentar: MODEL_FORUM_KOMENTAR;
+}) {
+  return (
+    <>
+      <Stack spacing={"xs"} h={"100%"} w={"50%"}>
+        <Paper bg={"gray"} p={"xs"} style={{ borderRadius: "6px" }}>
+          <Title order={4} c={"white"}>
+            Detail Komentar
+          </Title>
+        </Paper>
+
+        <Paper withBorder p={"md"} radius={"md"} shadow="sm">
+          <Stack>
+            <Stack spacing={5}>
+              <Group position="apart">
+                <Text fw={"bold"}>
+                  Username:{" "}
+                  <Text span inherit>
+                    {dataKomentar?.Author?.username}
+                  </Text>
+                </Text>
+
+              </Group>
+              {/* <Divider /> */}
+            </Stack>
+
+            <Box>
+              <Spoiler
+                w={500}
+                hideLabel="sembunyikan"
+                maxHeight={100}
+                showLabel="tampilkan"
+              >
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: dataKomentar?.komentar,
+                  }}
+                />
+              </Spoiler>
+            </Box>
+          </Stack>
+        </Paper>
+      </Stack>
+    </>
+  );
+}

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

@@ -21,7 +21,7 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
   return (
     <>
       <Stack spacing={"xs"} h={"100%"} w={"50%"}>
-        <Paper bg={"green.4"} p={"xs"} style={{ borderRadius: "6px" }}>
+        <Paper bg={"gray"} p={"xs"} style={{ borderRadius: "6px" }}>
           <Title order={4} c={"white"}>
             Detail Posting
           </Title>
@@ -31,9 +31,9 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
           <Stack>
             <Stack spacing={5}>
               <Group position="apart">
-                <Text>
+                <Text fw={"bold"}>
                   Username:{" "}
-                  <Text span inherit fw={"bold"}>
+                  <Text span inherit>
                     {dataPosting?.Author?.username}
                   </Text>
                 </Text>
@@ -48,7 +48,7 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
                   {dataPosting?.ForumMaster_StatusPosting?.status}
                 </Badge>
               </Group>
-              <Divider />
+              {/* <Divider /> */}
             </Stack>
 
             <Box>

src/app_modules/admin/forum/fun/count/fun_count_laporan_komentar.ts

@@ -6,6 +6,9 @@ export async function adminForum_countLaporanKomentar() {
   const count = await prisma.forum_ReportKomentar.count({
     where: {
       isActive: true,
+      Forum_Komentar: {
+        isActive: true,
+      },
     },
   });
 

src/app_modules/admin/forum/fun/count/fun_count_laporan_posting.ts

@@ -6,6 +6,9 @@ export async function adminForum_countLaporanPosting() {
   const count = await prisma.forum_ReportPosting.count({
     where: {
       isActive: true,
+      Forum_Posting: {
+        isActive: true,
+      },
     },
   });
 

src/app_modules/admin/forum/fun/count/fun_count_publish.ts

@@ -6,7 +6,9 @@ export async function adminForum_countPublish() {
   const count = await prisma.forum_Posting.count({
     where: {
       isActive: true,
+      
     },
+
   });
 
   return count;

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

@@ -0,0 +1,98 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { ceil } from "lodash";
+
+export default async function adminForum_funGetAllReportKomentar({
+  page,
+  search,
+}: {
+  page: number;
+  search?: string;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.forum_ReportKomentar.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      createdAt: "desc",
+    },
+    where: {
+      Forum_Komentar: {
+        isActive: true,
+        komentar: {
+          contains: search,
+          mode: "insensitive",
+        },
+      },
+    },
+    select: {
+      id: true,
+      isActive: true,
+      createdAt: true,
+      deskripsi: true,
+      forumMaster_KategoriReportId: true,
+      ForumMaster_KategoriReport: {
+        select: {
+          id: true,
+          title: true,
+          deskripsi: true,
+        },
+      },
+      forum_KomentarId: true,
+      Forum_Komentar: {
+        select: {
+          id: true,
+          komentar: true,
+          forum_PostingId: true,
+          // Forum_Posting: {
+          //   select: {
+          //     id: true,
+          //     diskusi: true,
+          //     ForumMaster_StatusPosting: {
+          //       select: {
+          //         id: true,
+          //         status: true,
+          //       },
+          //     },
+          //     Author: {
+          //       select: {
+          //         id: true,
+          //         username: true,
+          //       },
+          //     },
+          //   },
+          // },
+        },
+      },
+      userId: true,
+      User: {
+        select: {
+          id: true,
+          username: true,
+        },
+      },
+    },
+  });
+
+  const nCount = await prisma.forum_ReportKomentar.count({
+    where: {
+      Forum_Komentar: {
+        isActive: true,
+        komentar: {
+          contains: search,
+          mode: "insensitive",
+        },
+      },
+    },
+  });
+
+  const allData = {
+    data: data,
+    nPage: ceil(nCount / takeData),
+  };
+
+  return allData;
+}

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

@@ -0,0 +1,31 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export default async function adminForum_funGetOneKomentarById({
+  komentarId,
+}: {
+  komentarId: string;
+}) {
+
+  const data = await prisma.forum_Komentar.findFirst({
+    where: {
+      id: komentarId,
+    },
+    select: {
+      id: true,
+      isActive: true,
+      authorId: true,
+      Author: {
+        select: {
+          id: true,
+          username: true,
+        },
+      },
+      komentar: true,
+      forum_PostingId: true,
+    },
+  });
+
+  return data;
+}

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

@@ -16,6 +16,7 @@ export async function adminForum_getOnePostingById(postingId: string) {
           status: true,
         },
       },
+      authorId: true,
       Author: {
         select: {
           id: true,

src/app_modules/admin/forum/index.tsx

@@ -4,6 +4,7 @@ import AdminForum_TableReportPosting from "./sub_menu/table_report_posting";
 import AdminForum_DetailPosting from "./detail/detail_posting";
 import AdminForum_HasilReportPosting from "./sub_detail/hasil_report_posting";
 import AdminForum_HasilReportKomentar from "./sub_detail/hasil_report_komentar";
+import AdminForum_TableReportKomentar from "./sub_menu/table_report_komentar";
 
 export {
   AdminForum_Main,
@@ -12,4 +13,5 @@ export {
   AdminForum_DetailPosting as AdminForum_LihatSemuaKomentar,
   AdminForum_HasilReportPosting,
   AdminForum_HasilReportKomentar,
+  AdminForum_TableReportKomentar,
 };

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

@@ -1,17 +1,14 @@
 "use client";
 
-import { RouterAdminForum } from "@/app/lib/router_admin/router_admin_forum";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/component_global/header_tamplate";
-import ComponentAdminDonasi_TombolKembali from "@/app_modules/admin/donasi/component/tombol_kembali";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import {
-  MODEL_FORUM_MASTER_REPORT,
-  MODEL_FORUM_REPORT,
+  MODEL_FORUM_KOMENTAR,
+  MODEL_FORUM_REPORT_POSTING
 } from "@/app_modules/forum/model/interface";
+import mqtt_client from "@/util/mqtt_client";
 import {
-  Badge,
-  Box,
   Button,
   Center,
   Group,
@@ -23,40 +20,50 @@ import {
   Stack,
   Table,
   Text,
-  TextInput,
-  Title,
+  Title
 } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 import {
-  IconMessageCircle,
-  IconFlag3,
-  IconTrash,
-  IconSearch,
+  IconTrash
 } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { adminForum_funDeletePostingById } from "../fun/delete/fun_delete_posting_by_id";
-import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
-import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
-import { adminForum_getListReportKomentarbyId } from "../fun/get/get_list_report_komentar_by_id";
 import ComponentAdminGlobal_BackButton from "../../component_global/back_button";
+import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
+import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
+import ComponentAdminForum_ViewOneDetailKomentar from "../component/detail_one_komentar";
+import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
+import { adminForum_getListReportKomentarbyId } from "../fun/get/get_list_report_komentar_by_id";
+import adminForum_funGetOneKomentarById from "../fun/get/get_one_komentar_by_id";
 
 export default function AdminForum_HasilReportKomentar({
   komentarId,
   listReport,
+  dataKomentar,
 }: {
   komentarId: string;
   listReport: any;
+  dataKomentar: MODEL_FORUM_KOMENTAR;
 }) {
+  const [data, setData] = useState(dataKomentar);
+  console.log(komentarId);
+
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Forum: Hasil Report Komentar" />
         <Group position="apart">
           <ComponentAdminGlobal_BackButton />
-          <ButtonDeleteKomentar komentarId={komentarId} />
+          <ButtonDeleteKomentar
+            komentarId={komentarId}
+            data={data}
+            onSuccess={(val) => {
+              setData(val);
+            }}
+          />
         </Group>
+        <ComponentAdminForum_ViewOneDetailKomentar dataKomentar={data} />
         <HasilReportPosting listReport={listReport} komentarId={komentarId} />
         {/* <pre>{JSON.stringify(listReport, null, 2)}</pre> */}
       </Stack>
@@ -64,23 +71,57 @@ export default function AdminForum_HasilReportKomentar({
   );
 }
 
-function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
+function ButtonDeleteKomentar({
+  komentarId,
+  data,
+  onSuccess,
+}: {
+  komentarId: string;
+  data: MODEL_FORUM_KOMENTAR;
+  onSuccess: (val: any) => void;
+}) {
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
   const [loadingDel2, setLoadingDel2] = useState(false);
 
   async function onDelete() {
-    await adminForum_funDeleteKomentarById(komentarId).then((res) => {
+    await adminForum_funDeleteKomentarById(komentarId).then(async (res) => {
       if (res.status === 200) {
         setLoadingDel2(false);
         close();
-        router.back();
+
+        const dataKomentar = await adminForum_funGetOneKomentarById({
+          komentarId: komentarId,
+        });
+        onSuccess(dataKomentar);
+
+        const dataNotif = {
+          appId: data.id,
+          status: "Report Komentar",
+          // userId harus sama seperti author
+          userId: data.authorId,
+          pesan: data.komentar,
+          kategoriApp: "FORUM",
+          title: "Komentar anda telah di laporkan",
+        };
+
+        const notif = await adminNotifikasi_funCreateToUser({
+          data: dataNotif as any,
+        });
+        if (notif.status === 201) {
+          mqtt_client.publish(
+            "USER",
+            JSON.stringify({ userId: data.authorId, count: 1 })
+          );
+        }
+
         ComponentGlobal_NotifikasiBerhasil(res.message);
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
   }
+
   return (
     <>
       <Modal opened={opened} onClose={close} centered withCloseButton={false}>
@@ -111,17 +152,21 @@ function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
         </Stack>
       </Modal>
 
-      <Button
-        loaderPosition="center"
-        radius={"xl"}
-        color="red"
-        leftIcon={<IconTrash size={15} />}
-        onClick={() => {
-          open();
-        }}
-      >
-        Hapus Komentar
-      </Button>
+      {data.isActive ? (
+        <Button
+          loaderPosition="center"
+          radius={"xl"}
+          color="red"
+          leftIcon={<IconTrash size={15} />}
+          onClick={() => {
+            open();
+          }}
+        >
+          Hapus Komentar
+        </Button>
+      ) : (
+        ""
+      )}
     </>
   );
 }
@@ -134,7 +179,9 @@ function HasilReportPosting({
   komentarId: string;
 }) {
   const router = useRouter();
-  const [data, setData] = useState<MODEL_FORUM_REPORT[]>(listReport.data);
+  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[]>(
+    listReport.data
+  );
   const [nPage, setNPage] = useState(listReport.nPage);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
@@ -230,7 +277,7 @@ function HasilReportPosting({
                       <Center>Username</Center>
                     </th>
                     <th>
-                      <Center>Title</Center>
+                      <Center>Kategori</Center>
                     </th>
                     <th>
                       <Center>Deskripsi</Center>

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

@@ -5,7 +5,7 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_glob
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import {
   MODEL_FORUM_POSTING,
-  MODEL_FORUM_REPORT,
+  MODEL_FORUM_REPORT_POSTING,
 } from "@/app_modules/forum/model/interface";
 import {
   Button,
@@ -31,6 +31,8 @@ import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_da
 import { adminForum_funDeletePostingById } from "../fun/delete/fun_delete_posting_by_id";
 import { adminForum_getListReportPostingById } from "../fun/get/get_list_report_posting_by_id";
 import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
+import mqtt_client from "@/util/mqtt_client";
+import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
 
 export default function AdminForum_HasilReportPosting({
   dataPosting,
@@ -45,7 +47,7 @@ export default function AdminForum_HasilReportPosting({
         <ComponentAdminGlobal_HeaderTamplate name="Forum: Hasil Report Posting" />
         <Group position="apart">
           <ComponentAdminGlobal_BackButton />
-          <ButtonDeletePosting postingId={dataPosting.id} />
+          <ButtonDeletePosting dataPosting={dataPosting} />
         </Group>
         <ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
         <HasilReportPosting
@@ -58,24 +60,45 @@ export default function AdminForum_HasilReportPosting({
   );
 }
 
-function ButtonDeletePosting({ postingId }: { postingId: string }) {
+function ButtonDeletePosting({
+  dataPosting,
+}: {
+  dataPosting: MODEL_FORUM_POSTING;
+}) {
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
-  const [loadingDel, setLoadingDel] = useState(false);
+
   const [loadingDel2, setLoadingDel2] = useState(false);
 
   async function onDelete() {
-    await adminForum_funDeletePostingById(postingId).then((res) => {
-      if (res.status === 200) {
-        setLoadingDel2(false);
-        setLoadingDel(false);
-        close();
-        router.back();
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
+    const del = await adminForum_funDeletePostingById(dataPosting.id);
+    if (del.status === 200) {
+      setLoadingDel2(false);
+      close();
+      router.back();
+
+      const dataNotif = {
+        appId: dataPosting.id,
+        status: "Report Posting",
+        userId: dataPosting.authorId,
+        pesan: dataPosting.diskusi,
+        kategoriApp: "FORUM",
+        title: "Postingan anda telah di laporkan",
+      };
+      const notif = await adminNotifikasi_funCreateToUser({
+        data: dataNotif as any,
+      });
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({ userId: dataPosting.authorId, count: 1 })
+        );
       }
-    });
+
+      ComponentGlobal_NotifikasiBerhasil(del.message);
+    } else {
+      ComponentGlobal_NotifikasiGagal(del.message);
+    }
   }
   return (
     <>
@@ -93,12 +116,13 @@ function ButtonDeletePosting({ postingId }: { postingId: string }) {
               radius={"xl"}
               onClick={() => {
                 close();
-                setLoadingDel(false);
               }}
             >
               Batal
             </Button>
             <Button
+              loaderPosition="center"
+              loading={loadingDel2 ? true : false}
               radius={"xl"}
               color="red"
               onClick={() => {
@@ -112,15 +136,12 @@ function ButtonDeletePosting({ postingId }: { postingId: string }) {
         </Stack>
       </Modal>
       <Button
-        loaderPosition="center"
-        loading={loadingDel ? true : false}
         radius={"xl"}
         color="red"
         leftIcon={<IconTrash size={15} />}
         onClick={() => {
           // onDelete();
           open();
-          setLoadingDel(true);
         }}
       >
         Hapus Posting
@@ -137,7 +158,9 @@ function HasilReportPosting({
   postingId: string;
 }) {
   const router = useRouter();
-  const [data, setData] = useState<MODEL_FORUM_REPORT[]>(listReport.data);
+  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[]>(
+    listReport.data
+  );
   const [nPage, setNPage] = useState(listReport.nPage);
   const [activePage, setActivePage] = useState(1);
 
@@ -232,7 +255,7 @@ function HasilReportPosting({
                       <Center>Username</Center>
                     </th>
                     <th>
-                      <Center>Title</Center>
+                      <Center>Kategori</Center>
                     </th>
                     <th>
                       <Center>Deskripsi</Center>

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

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

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

@@ -1,11 +1,9 @@
 "use client";
 
 import { RouterAdminForum } from "@/app/lib/router_admin/router_admin_forum";
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/component_global/header_tamplate";
 import {
-  MODEL_FORUM_POSTING,
-  MODEL_FORUM_REPORT,
+  MODEL_FORUM_REPORT_POSTING
 } from "@/app_modules/forum/model/interface";
 import {
   Badge,
@@ -13,7 +11,6 @@ import {
   Button,
   Center,
   Group,
-  Modal,
   Pagination,
   Paper,
   ScrollArea,
@@ -22,23 +19,15 @@ import {
   Table,
   Text,
   TextInput,
-  Title,
+  Title
 } from "@mantine/core";
-import { IconMessageCircle, IconSearch } from "@tabler/icons-react";
-import { IconFlag3 } from "@tabler/icons-react";
-import { IconEyeCheck, IconTrash } from "@tabler/icons-react";
-import _, { isEmpty } from "lodash";
+import { IconFlag3, IconSearch } from "@tabler/icons-react";
+import { isEmpty } from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { adminForum_funDeletePostingById } from "../fun/delete/fun_delete_posting_by_id";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import { useDisclosure } from "@mantine/hooks";
-import { adminForum_getListPosting } from "../fun/get/get_list_publish";
-import adminJob_getListPublish from "@/app_modules/admin/job/fun/get/get_list_publish";
+import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
 import ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
 import adminForum_funGetAllReportPosting from "../fun/get/get_all_report_posting";
-import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
 
 export default function AdminForum_TableReportPosting({
   listData,
@@ -58,7 +47,7 @@ export default function AdminForum_TableReportPosting({
 
 function TableView({ listData }: { listData: any }) {
   const router = useRouter();
-  const [data, setData] = useState<MODEL_FORUM_REPORT[]>(listData.data);
+  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[]>(listData.data);
   const [nPage, setNPage] = useState(listData.nPage);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
@@ -109,7 +98,7 @@ function TableView({ listData }: { listData: any }) {
         </Center>
       </td>
 
-      <td>
+      {/* <td>
         <Center w={200}>
           <Text lineClamp={1}>{e?.Forum_Posting.Author.username}</Text>
         </Center>
@@ -130,7 +119,7 @@ function TableView({ listData }: { listData: any }) {
             />
           </Spoiler>
         </Box>
-      </td>
+      </td> */}
 
       <td>
         <Center w={200}>
@@ -160,14 +149,14 @@ function TableView({ listData }: { listData: any }) {
         <Stack align="center" spacing={"xs"}>
           {/* <ButtonAction postingId={e?.id} /> */}
           <ButtonLihatReportLainnya postingId={e?.forum_PostingId} />
-          <ComponentAdminForum_ButtonDeletePosting
+          {/* <ComponentAdminForum_ButtonDeletePosting
             postingId={e?.forum_PostingId}
             onSuccesDelete={(val) => {
               if (val) {
                 onLoadData();
               }
             }}
-          />
+          /> */}
         </Stack>
       </td>
     </tr>
@@ -190,7 +179,7 @@ function TableView({ listData }: { listData: any }) {
             radius={"xl"}
             placeholder="Cari postingan"
             onChange={(val) => {
-              // console.log(val.currentTarget.value)
+
               onSearch(val.currentTarget.value);
             }}
           />
@@ -218,12 +207,12 @@ function TableView({ listData }: { listData: any }) {
                     <th>
                       <Center>Jenis Laporan</Center>
                     </th>
-                    <th>
+                    {/* <th>
                       <Center>Author</Center>
                     </th>
                     <th>
                       <Text>Postingan</Text>
-                    </th>
+                    </th> */}
                     <th>
                       <Center w={200}>Status Posting</Center>
                     </th>

src/app_modules/admin/list_page.tsx

@@ -236,11 +236,11 @@ export const listAdminPage = [
         name: "Report Posting",
         path: RouterAdminForum.table_report_posting,
       },
-      // {
-      //   id: 74,
-      //   name: "Laporan Komentar",
-      //   path: RouterAdminForum.report_komentar,
-      // },
+      {
+        id: 74,
+        name: "Report Komentar",
+        path: RouterAdminForum.table_report_komentar,
+      },
     ],
   },
 

src/app_modules/admin/notifikasi/route_setting/forum.ts

@@ -13,10 +13,21 @@ export default async function adminNotifikasi_findRouterForum({
   onChangeNavbar: (val: any) => void;
   onToggleNavbar: (val: any) => void;
 }) {
-  const routeName = RouterAdminForum.table_report_posting;
-  router.push(routeName);
-   onChangeNavbar({
-     id: 7,
-     childId: 73,
-   });
+  if (data.status === "Report Posting") {
+    const routeName = RouterAdminForum.table_report_posting;
+    router.push(routeName);
+    onChangeNavbar({
+      id: 7,
+      childId: 73,
+    });
+  }
+
+  if (data.status === "Report Komentar") {
+    const routeName = RouterAdminForum.table_report_komentar;
+    router.push(routeName);
+    onChangeNavbar({
+      id: 7,
+      childId: 74,
+    });
+  }
 }

src/app_modules/auth/login/view.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  BackgroundImage,
   Box,
   Button,
   Center,
@@ -81,56 +82,56 @@ export default function Login() {
 
   return (
     <>
-      <Stack
-        align="center"
-        justify="center"
+      <BackgroundImage
+        src={"/aset/global/main_background.png"}
         h={"100vh"}
-        bg={MainColor.darkblue}
-        spacing={100}
+        // pos={"static"}
       >
-        <Stack align="center" spacing={0}>
-          <Title order={3} c={MainColor.yellow}>
-            WELCOME TO
-          </Title>
-          <Title c={MainColor.yellow}>HIPMI APPS</Title>
+        <Stack align="center" justify="center" h={"100vh"} spacing={100}>
+          <Stack align="center" spacing={0}>
+            <Title order={3} c={MainColor.yellow}>
+              WELCOME TO
+            </Title>
+            <Title c={MainColor.yellow}>HIPMI APPS</Title>
+          </Stack>
+
+          <Stack w={300}>
+            <Center>
+              <Text c={"white"}>Nomor telepon</Text>
+            </Center>
+            <PhoneInput
+              inputStyle={{ width: "100%" }}
+              defaultCountry="id"
+              onChange={(val) => {
+                setPhone(val);
+              }}
+            />
+
+            {isError ? (
+              <ComponentGlobal_ErrorInput text="Masukan nomor telepon anda" />
+            ) : (
+              ""
+            )}
+
+            <Button
+              radius={"md"}
+              bg={MainColor.yellow}
+              color={"yellow"}
+              loading={loading ? true : false}
+              loaderPosition="center"
+              c={"black"}
+              style={{
+                borderColor: AccentColor.yellow,
+              }}
+              onClick={() => {
+                onLogin();
+              }}
+            >
+              LOGIN
+            </Button>
+          </Stack>
         </Stack>
-
-        <Stack w={300}>
-          <Center>
-            <Text c={"white"}>Nomor telepon</Text>
-          </Center>
-          <PhoneInput
-            inputStyle={{ width: "100%" }}
-            defaultCountry="id"
-            onChange={(val) => {
-              setPhone(val);
-            }}
-          />
-
-          {isError ? (
-            <ComponentGlobal_ErrorInput text="Masukan nomor telepon anda" />
-          ) : (
-            ""
-          )}
-
-          <Button
-            radius={"md"}
-            bg={MainColor.yellow}
-            color={"yellow"}
-            loading={loading ? true : false}
-            loaderPosition="center"
-            c={"black"}
-            style={{
-              borderColor: AccentColor.yellow,
-            }}
-            onClick={() => {
-              onLogin();
-            }}
-          >
-            LOGIN
-          </Button>
-        </Stack>
-      </Stack>
+      </BackgroundImage>
     </>
   );
 }

src/app_modules/auth/register/view.tsx

@@ -10,8 +10,13 @@ import {
   Center,
   PinInput,
   Stack,
+  BackgroundImage,
 } from "@mantine/core";
-import { IconCircleLetterH, IconCloudLockOpen, IconUserCircle } from "@tabler/icons-react";
+import {
+  IconCircleLetterH,
+  IconCloudLockOpen,
+  IconUserCircle,
+} from "@tabler/icons-react";
 import { gs_nomor } from "../state/state";
 import { useAtom } from "jotai";
 import { useState } from "react";
@@ -28,7 +33,10 @@ import { IconPencilCheck } from "@tabler/icons-react";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
 import { auth_funEditAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
 import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
-import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function Register({ dataOtp }: { dataOtp: any }) {
   const router = useRouter();
@@ -72,85 +80,26 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
   return (
     <>
       {/* <pre>{JSON.stringify(dataOtp,null,2)}</pre> */}
+      <BackgroundImage
+        src={"/aset/global/main_background.png"}
+        h={"100vh"}
+        // pos={"static"}
+      >
+        <Center h={"100vh"}>
+          <Stack h={"100%"} align="center" justify="center" spacing={70}>
+            <Title order={2} c={MainColor.yellow}>
+              REGISTRASI
+            </Title>
 
-      <Center bg={MainColor.darkblue} h={"100vh"}>
-        <Stack h={"100%"} align="center" justify="center" spacing={70}>
-          <Title order={2} c={MainColor.yellow}>
-            REGISTRASI
-          </Title>
+            <IconUserCircle size={100} color="white" />
 
-          <IconUserCircle size={100} color="white" />
-
-          <Stack spacing={"sm"} w={300}>
-            <Text fz={10} c={"white"}>
-              Anda akan terdaftar dengan nomor berikut{" "}
-              <Text inherit span fw={"bold"}>
-                +{nomor}
+            <Stack spacing={"sm"} w={300}>
+              <Text fz={10} c={"white"}>
+                Anda akan terdaftar dengan nomor berikut{" "}
+                <Text inherit span fw={"bold"}>
+                  +{nomor}
+                </Text>
               </Text>
-            </Text>
-            <TextInput
-              ref={focusTrapRef}
-              placeholder="Masukan Username"
-              maxLength={50}
-              error={
-                value.length > 0 && value.length < 5 ? (
-                  <ComponentGlobal_ErrorInput text="Minimal 5 karakter !" />
-                ) : _.values(value).includes(" ") ? (
-                  <Stack spacing={5}>
-                    <ComponentGlobal_ErrorInput text="Tidak boleh ada space" />
-                    <ComponentGlobal_ErrorInput text="Sambungkan huruf meggunakan karakter _" />
-                  </Stack>
-                ) : isValue ? (
-                  <ComponentGlobal_ErrorInput text="Masukan username anda" />
-                ) : (
-                  ""
-                )
-              }
-              onChange={(val) => {
-                val.currentTarget.value.length > 0 ? setIsValue(false) : "";
-                setValue(val.currentTarget.value);
-              }}
-            />
-            <Stack>
-              <Button
-                loading={loading ? true : false}
-                loaderPosition="center"
-                radius={"md"}
-                compact
-                h={40}
-                c={"black"}
-                bg={MainColor.yellow}
-                color={"yellow"}
-                style={{
-                  borderColor: AccentColor.yellow,
-                }}
-                onClick={() => {
-                  onRegistarsi();
-                }}
-              >
-                <Text>DAFTAR</Text>
-              </Button>
-            </Stack>
-          </Stack>
-        </Stack>
-
-        {/* <Stack
-          px={"lg"}
-          spacing={70}
-          w={{ base: 400 }}
-          justify="center"
-          h={"80vh"}
-        >
-          <Center>
-            <IconPencilCheck size={120} />
-          </Center>
-
-          <Stack spacing={"lg"}>
-            <Stack spacing={0}>
-              <Title order={4}>REGISTRASI</Title>
-              <Text fz={"xs"}>Masukan username anda !</Text>
-            </Stack>
-            <Stack spacing={"sm"}>
               <TextInput
                 ref={focusTrapRef}
                 placeholder="Masukan Username"
@@ -174,32 +123,30 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
                   setValue(val.currentTarget.value);
                 }}
               />
-              <Text fz={10} c={"gray"}>
-                Anda akan terdaftar dengan nomor berikut{" "}
-                <Text inherit span fw={"bold"}>
-                  +{nomor}
-                </Text>
-              </Text>
-            </Stack>
-
-            <Stack>
-              <Button
-                loading={loading ? true : false}
-                loaderPosition="center"
-                radius={"md"}
-                compact
-                h={40}
-                color={"teal"}
-                onClick={() => {
-                  onRegistarsi();
-                }}
-              >
-                <Text>DAFTAR</Text>
-              </Button>
+              <Stack>
+                <Button
+                  loading={loading ? true : false}
+                  loaderPosition="center"
+                  radius={"md"}
+                  compact
+                  h={40}
+                  c={"black"}
+                  bg={MainColor.yellow}
+                  color={"yellow"}
+                  style={{
+                    borderColor: AccentColor.yellow,
+                  }}
+                  onClick={() => {
+                    onRegistarsi();
+                  }}
+                >
+                  <Text>DAFTAR</Text>
+                </Button>
+              </Stack>
             </Stack>
           </Stack>
-        </Stack> */}
-      </Center>
+        </Center>
+      </BackgroundImage>
     </>
   );
 }

src/app_modules/auth/splash/view.tsx

@@ -1,12 +1,7 @@
 "use client";
 
 import { MainColor } from "@/app_modules/component_global/color/color_pallet";
-import {
-  Center,
-  Image,
-  Paper,
-  Stack
-} from "@mantine/core";
+import { BackgroundImage, Center, Image, Paper, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 
@@ -24,21 +19,28 @@ export default function SplashScreen({ data }: { data: any }) {
       }, 2000);
     }
   }, []);
+
   return (
     <>
-      <Center h={"100vh"} bg={MainColor.darkblue}>
-        <Stack align="center" justify="center" p={"md"}>
-          {/* <Title c={"#002e59"}>Welcome to</Title> */}
-          <Paper
-            p={{ base: 20, md: 30, lg: 40 }}
-            bg={"gray.1"}
-            radius={"100%"}
-            shadow="xl"
-          >
-            <Image height={200} alt="" src={"/aset/logo/logo-hipmi.png"} />
-          </Paper>
-        </Stack>
-      </Center>
+      <BackgroundImage
+        src={"/aset/global/main_background.png"}
+        h={"100vh"}
+        // pos={"static"}
+      >
+        <Center h={"100vh"}>
+          <Stack align="center" justify="center" p={"md"}>
+            {/* <Title c={"#002e59"}>Welcome to</Title> */}
+            <Paper
+              p={{ base: 20, md: 30, lg: 40 }}
+              bg={"gray.1"}
+              radius={"100%"}
+              shadow="xl"
+            >
+              <Image height={200} alt="" src={"/aset/logo/logo-hipmi.png"} />
+            </Paper>
+          </Stack>
+        </Center>
+      </BackgroundImage>
     </>
   );
 }

src/app_modules/auth/validasi/view.tsx

@@ -11,18 +11,17 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_glob
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 import {
   ActionIcon,
+  BackgroundImage,
   Box,
   Button,
   Center,
   PinInput,
   Stack,
   Text,
-  Title
+  Title,
 } from "@mantine/core";
 import { useFocusTrap } from "@mantine/hooks";
-import {
-  IconChevronLeft
-} from "@tabler/icons-react";
+import { IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { auth_funEditAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
@@ -66,64 +65,74 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
 
   return (
     <>
-      <Stack bg={MainColor.darkblue} h={"100vh"}>
-        <Box
-          pt={"md"}
-          px={"md"}
-          style={{
-            position: "sticky",
-            top: 0,
-          }}
-        >
-          <ActionIcon variant="transparent" onClick={() => router.back()}>
-            <IconChevronLeft color="white" />
-          </ActionIcon>
-        </Box>
-
-        <Stack align="center" justify="center" h={"100vh"} spacing={70}>
-          <Title order={2} color={MainColor.yellow}>
-            Verifikasi Kode OTP
-          </Title>
-
-          <Stack spacing={0} align="center">
-            <Text fz={"xs"}  c={"white"}>
-              Masukan 4 digit kode otp
-            </Text>
-            <Text fz={"xs"}  c={"white"}>
-              Yang dikirim ke <Text span inherit fw={"bold"}> +{nomor}</Text>
-            </Text>
-            <Center>
-              <PinInput
-                ref={focusTrapRef}
-                spacing={"md"}
-                mt={"md"}
-                onChange={(val) => {
-                  setInputOtp(val);
-                }}
-              />
-            </Center>
-          </Stack>
-          <Button
-            w={300}
-            loading={loading ? true : false}
-            loaderPosition="center"
-            radius={"md"}
-            compact
-            h={40}
-            c={"black"}
-            bg={MainColor.yellow}
-            color={"yellow"}
+      <BackgroundImage
+        src={"/aset/global/main_background.png"}
+        h={"100vh"}
+        // pos={"static"}
+      >
+        <Stack h={"100vh"}>
+          <Box
+            pt={"md"}
+            px={"md"}
             style={{
-              borderColor: AccentColor.yellow,
-            }}
-            onClick={() => {
-              onVerifikasi();
+              position: "sticky",
+              top: 0,
             }}
           >
-            <Text>VERIFIKASI</Text>
-          </Button>
+            <ActionIcon variant="transparent" onClick={() => router.back()}>
+              <IconChevronLeft color="white" />
+            </ActionIcon>
+          </Box>
+
+          <Stack align="center" justify="center" h={"100vh"} spacing={70}>
+            <Title order={2} color={MainColor.yellow}>
+              Verifikasi Kode OTP
+            </Title>
+
+            <Stack spacing={0} align="center">
+              <Text fz={"xs"} c={"white"}>
+                Masukan 4 digit kode otp
+              </Text>
+              <Text fz={"xs"} c={"white"}>
+                Yang dikirim ke{" "}
+                <Text span inherit fw={"bold"}>
+                  {" "}
+                  +{nomor}
+                </Text>
+              </Text>
+              <Center>
+                <PinInput
+                  ref={focusTrapRef}
+                  spacing={"md"}
+                  mt={"md"}
+                  onChange={(val) => {
+                    setInputOtp(val);
+                  }}
+                />
+              </Center>
+            </Stack>
+            <Button
+              w={300}
+              loading={loading ? true : false}
+              loaderPosition="center"
+              radius={"md"}
+              compact
+              h={40}
+              c={"black"}
+              bg={MainColor.yellow}
+              color={"yellow"}
+              style={{
+                borderColor: AccentColor.yellow,
+              }}
+              onClick={() => {
+                onVerifikasi();
+              }}
+            >
+              <Text>VERIFIKASI</Text>
+            </Button>
+          </Stack>
         </Stack>
-      </Stack>
+      </BackgroundImage>
     </>
   );
 }

src/app_modules/colab/detail/chat/index.tsx

@@ -1,52 +1,41 @@
 "use client";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { evnPesan } from "@/util/evn";
+import mqtt_client from "@/util/mqtt_client";
 import {
   ActionIcon,
   Box,
-  Button,
-  Card,
   Center,
-  Code,
   Grid,
   Group,
-  Header,
   Loader,
   Paper,
-  ScrollArea,
   Stack,
   Text,
   Textarea,
-  Title,
+  Title
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import {
   IconChevronLeft,
   IconCircle,
   IconInfoSquareRounded,
   IconSend,
 } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import router from "next/router";
-import React, { useRef, useState } from "react";
-import {
-  MODEL_COLLABORATION_MESSAGE,
-  MODEL_COLLABORATION_ROOM_CHAT,
-} from "../../model/interface";
 import _ from "lodash";
-import ComponentColab_IsEmptyData from "../../component/is_empty_data";
-import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
-import { useShallowEffect } from "@mantine/hooks";
-import mqtt_client from "@/util/mqtt_client";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import useInfiniteScroll, {
   ScrollDirection,
   ScrollDirectionBooleanState,
 } from "react-easy-infinite-scroll-hook";
-import toast from "react-simple-toasts";
-import colab_getOneMessageById from "../../fun/get/room_chat/get_one_message_by_id";
-import { List } from "react-virtualized";
-import { evnPesan } from "@/util/evn";
+import ComponentColab_IsEmptyData from "../../component/is_empty_data";
+import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
+import {
+  MODEL_COLLABORATION_MESSAGE,
+  MODEL_COLLABORATION_ROOM_CHAT,
+} from "../../model/interface";
 
 const list = Array(100).fill(0);
 export default function ColabViewChat({

src/app_modules/component_global/author_name_on_header.tsx

@@ -52,7 +52,11 @@ export default function ComponentGlobal_AuthorNameOnHeader({
             {visible ? (
               <Avatar
                 size={30}
-                sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                sx={{
+                  borderStyle: "solid",
+                  borderWidth: "1px",
+                  borderColor: "white",
+                }}
                 radius={"xl"}
                 bg={"gray.1"}
               >
@@ -65,7 +69,11 @@ export default function ComponentGlobal_AuthorNameOnHeader({
             ) : (
               <Avatar
                 size={30}
-                sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                sx={{
+                  borderStyle: "solid",
+                  borderWidth: "1px",
+                  borderColor: "white",
+                }}
                 radius={"xl"}
                 bg={"gray.1"}
                 src={
@@ -77,16 +85,16 @@ export default function ComponentGlobal_AuthorNameOnHeader({
             )}
           </Grid.Col>
           <Grid.Col span={"auto"}>
-            <Stack justify="center" h={"100%"}>
+            <Stack justify="center" h={"100%"} c={"white"}>
               <Group position="apart">
-                <Stack justify="center" h={"100%"}>
+                <Stack justify="center" h={"100%"} >
                   <Text lineClamp={1} fz={"sm"} fw={"bold"}>
                     {authorName ? authorName : "Nama author"}
                   </Text>
                 </Stack>
                 <Stack justify="center" h={"100%"}>
                   {tglPublish ? (
-                    <Text c={"gray"} fz={"xs"}>
+                    <Text c={"white"} fz={"xs"}>
                       {skrng.toLocaleDateString(["id-ID"], {
                         dateStyle: "medium",
                       })}

src/app_modules/component_global/box_information.tsx

@@ -0,0 +1,52 @@
+import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { AccentColor, MainColor } from "./color/color_pallet";
+
+export default function ComponentGlobal_BoxInformation({
+  informasi,
+ isReport,
+}: {
+  informasi: string;
+  isReport?: boolean;
+}) {
+  return (
+    <>
+      {isReport ? (
+        <Paper
+          bg={"blue.3"}
+          p={10}
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `1px solid ${AccentColor.skyblue}`,
+          }}
+        >
+          <Stack spacing={0}>
+            <Text fz={10} fs={"italic"} c={"orange"} fw={"bold"}>
+              * Report
+            </Text>
+            <Text fz={10} c={"white"}>
+              {informasi}
+            </Text>
+          </Stack>
+        </Paper>
+      ) : (
+        <Paper
+          bg={"blue.3"}
+          p={10}
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `1px solid ${AccentColor.skyblue}`,
+          }}
+        >
+          <Group>
+            <Text fz={10} c={"red"} fw={"bold"}>
+              *{" "}
+              <Text span inherit c={"white"} fw={"normal"}>
+                {informasi}
+              </Text>
+            </Text>
+          </Group>
+        </Paper>
+      )}
+    </>
+  );
+}

src/app_modules/component_global/color/color_pallet.ts

@@ -8,5 +8,6 @@ export const AccentColor = {
   blackgray: "#333533",
   darkblue: "#002E59",
   blue: "#00447D",
+  skyblue: "#00BFFF",
   yellow: "#FFD60A",
 };

src/app_modules/component_global/component_layout_tamplate.tsx

@@ -1,21 +1,9 @@
 "use client";
 
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
 import {
   Box,
-  Center,
-  Title,
-  SimpleGrid,
-  Loader,
-  Stack,
-  ActionIcon,
-  Avatar,
-  Text,
+  Stack
 } from "@mantine/core";
-import { IconUserSearch, IconUserCircle } from "@tabler/icons-react";
-import router from "next/router";
-import { ComponentGlobal_NotifikasiPeringatan } from "./notif_global/notifikasi_peringatan";
 
 export default function AppComponentGlobal_LayoutTamplate({
   children,
@@ -44,7 +32,7 @@ export default function AppComponentGlobal_LayoutTamplate({
         </Box>
 
         {/* Children */}
-        <Box p={"sm"} pos={"static"}>
+        <Box p={"md"} pos={"static"}>
           <Stack>
             {children}
             {footer ? (

src/app_modules/component_global/is_empty_data.tsx

@@ -1,22 +1,22 @@
 "use client";
 
-import { Center } from "@mantine/core";
+import { Center, Text } from "@mantine/core";
 
 export default function ComponentGlobal_IsEmptyData({
   text,
   height,
 }: {
-  text: string;
-  height?: number}) {
+  text?: string;
+  height?: number;
+}) {
   return (
     <>
       <Center
-        h={height ? `${height}vh` : "50vh"}
+        h={height ? `${height}vh` : "70vh"}
         fz={"sm"}
         fw={"bold"}
-        c={"gray"}
       >
-        {text}
+        <Text c={"gray"}>{text ? text : "Tidak Ada Data"}</Text>
       </Center>
     </>
   );

src/app_modules/component_global/loading_card.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Overlay, Center, Loader } from "@mantine/core";
 
 export default function ComponentGlobal_CardLoadingOverlay({
@@ -16,7 +14,7 @@ export default function ComponentGlobal_CardLoadingOverlay({
           <Loader
             variant={variant ? variant : "dots"}
             size={size ? size : 20}
-            color="gray"
+            color="white"
           />
         </Center>
       </Overlay>

src/app_modules/component_global/loading_page_v2.tsx

@@ -47,8 +47,8 @@ export default function ComponentGlobal_V2_LoadingPage() {
     <>
       <LoadingOverlay
         visible
-        overlayColor={MainColor.darkblue}
-        overlayOpacity={0.3}
+        // overlayColor={MainColor.darkblue}
+        overlayOpacity={0.1}
         loader={customLOader}
       />
     </>

src/app_modules/component_global/splash/splash_global.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Stack, Loader, ActionIcon, ThemeIcon } from "@mantine/core";
+import ComponentGlobal_UI_LayoutTamplate from "../ui/ui_layout_tamplate";
+import { IconMessages, IconX } from "@tabler/icons-react";
+
+export default function ComponentGlobal_SplashScreen({ icon }: { icon: any }) {
+  return (
+    <>
+      <ComponentGlobal_UI_LayoutTamplate>
+        <Stack h={"90vh"} align="center" justify="center" spacing={"xl"}>
+          <ThemeIcon variant="transparent" size={300} c="white">
+            {icon}
+          </ThemeIcon>
+          <Loader variant="dots" color="white" />
+        </Stack>
+      </ComponentGlobal_UI_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/component_global/ui/ui_drawer.tsx

@@ -0,0 +1,72 @@
+import {
+  Drawer,
+  Stack,
+  Group,
+  ActionIcon,
+  SimpleGrid,
+  Text,
+  Box,
+} from "@mantine/core";
+import { IconX, IconEdit } from "@tabler/icons-react";
+import { MainColor, AccentColor } from "../color/color_pallet";
+import React from "react";
+import { useRouter } from "next/navigation";
+
+export default function ComponentGlobal_UI_Drawer({
+  opened,
+  close,
+  component,
+}: {
+  opened: boolean;
+  close: () => void;
+  component: any[];
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Drawer
+        opened={opened}
+        onClose={() => close()}
+        position={"bottom"}
+        size={"auto"}
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: "transparent",
+          },
+          body: {
+            backgroundColor: MainColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
+      >
+        <Stack spacing={"xs"}>
+          <Group position="right">
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
+          <SimpleGrid cols={4}>
+            {component.map((e, i) => (
+              <Stack key={i} align="center" spacing={"xs"}>
+                <ActionIcon
+                  variant="transparent"
+                  c="white"
+                  onClick={() => router.push(e.path)}
+                >
+                  {e.icon}
+                </ActionIcon>
+                <Text color="white">{e.name}</Text>
+              </Stack>
+            ))}
+          </SimpleGrid>
+        </Stack>
+      </Drawer>
+    </>
+  );
+}

src/app_modules/component_global/ui/ui_header_tamplate.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import {
+  Header,
+  Group,
+  ActionIcon,
+  Text,
+  Title,
+  Box,
+  Loader,
+} from "@mantine/core";
+import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { AccentColor, MainColor } from "../color/color_pallet";
+
+export default function ComponentGlobal_UI_HeaderTamplate({
+  title,
+  posotion,
+  // left button
+  hideButtonLeft,
+  iconLeft,
+  routerLeft,
+  // right button
+  iconRight,
+  routerRight,
+}: {
+  title: string;
+  posotion?: any;
+  // left button
+  hideButtonLeft?: boolean;
+  iconLeft?: any;
+  routerLeft?: any;
+  // right button
+  iconRight?: any;
+  routerRight?: any;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRightLoading, setRightLoading] = useState(false);
+
+  return (
+    <>
+      <Header
+        height={"8vh"}
+        sx={{
+          //   borderRadius: "0px 0px 20px 20px",
+          //   borderBottom: `1px solid ${AccentColor.blue}`,
+          borderStyle: "none",
+        }}
+        bg={MainColor.darkblue}
+      >
+        <Group h={"100%"} position={posotion ? posotion : "apart"} px={"md"}>
+          {hideButtonLeft ? (
+            <ActionIcon disabled variant="transparent"></ActionIcon>
+          ) : (
+            <ActionIcon
+              c={"white"}
+              variant="transparent"
+              radius={"xl"}
+              onClick={() => {
+                setIsLoading(true);
+                routerLeft === undefined
+                  ? router.back()
+                  : router.push(routerLeft);
+              }}
+            >
+              {isLoading ? (
+                <Loader color={AccentColor.yellow} size={20} />
+              ) : iconLeft ? (
+                iconLeft
+              ) : (
+                <IconChevronLeft />
+              )}
+            </ActionIcon>
+          )}
+
+          <Title order={5} c={MainColor.yellow}>
+            {title}
+          </Title>
+
+          {iconRight === undefined ? (
+            <ActionIcon disabled variant="transparent"></ActionIcon>
+          ) : routerRight === undefined ? (
+            <Box>{iconRight}</Box>
+          ) : (
+            <ActionIcon
+              c={"white"}
+              variant="transparent"
+              onClick={() => {
+                setRightLoading(true);
+                router.push(routerRight);
+              }}
+            >
+              {isRightLoading ? (
+                <Loader color={AccentColor.yellow} size={20} />
+              ) : (
+                iconRight
+              )}
+            </ActionIcon>
+          )}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/component_global/ui/ui_layout_tamplate.tsx

@@ -0,0 +1,73 @@
+import {
+  BackgroundImage,
+  Box,
+  Container,
+  Footer,
+  ScrollArea,
+} from "@mantine/core";
+import { AccentColor, MainColor } from "../color/color_pallet";
+
+export default function ComponentGlobal_UI_LayoutTamplate({
+  children,
+  header,
+  footer,
+}: {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  return (
+    <>
+      <BackgroundImage src={"/aset/global/main_background.png"} h={"100vh"} style={{position: "relative"}}>
+        {/* Header */}
+        {header ? (
+          <Box
+            h={"8vh"}
+            style={{
+              zIndex: 10,
+            }}
+            w={"100%"}
+            pos={"sticky"}
+            top={0}
+          >
+            {header}
+          </Box>
+        ) : (
+          ""
+        )}
+
+        {/* Children */}
+        <Box style={{zIndex: 0}} h={footer ? "82vh" : "92vh"} pos={"static"}>
+          <ScrollArea h={"100%"} px={"md"}>
+            {children}
+          </ScrollArea>
+        </Box>
+
+        {/* Footer */}
+        {footer ? (
+          <Box style={{ position: "relative", bottom: 0 }} >
+            <Box
+              style={{
+                zIndex: 10,
+                borderRadius: "20px 20px 0px 0px",
+                borderTop: `2px solid ${AccentColor.blue}`,
+                borderRight: `1px solid ${AccentColor.blue}`,
+                borderLeft: `1px solid ${AccentColor.blue}`,
+                width: "100%",
+              }}
+              bg={AccentColor.darkblue}
+              color="blue"
+              pos={"absolute"}
+              // bottom={0}
+              h={"10vh"}
+            >
+              {footer}
+            </Box>
+          </Box>
+        ) : (
+          ""
+        )}
+      </BackgroundImage>
+    </>
+  );
+}

src/app_modules/component_global/ui/ui_modal.tsx

@@ -0,0 +1,45 @@
+import { Modal, Stack, Title, Group, Button, Box } from "@mantine/core";
+import { MainColor, AccentColor } from "../color/color_pallet";
+
+export default function ComponentGlobal_UI_Modal({
+  opened,
+  close,
+  title,
+  buttonKiri,
+  buttonKanan,
+}: {
+  opened: any;
+  close: any;
+  title: any;
+  buttonKiri: any;
+  buttonKanan: any;
+}) {
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={() => {
+          close();
+        }}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} color="white" align="center">
+            {title}
+          </Title>
+          <Group position="center">
+            <Box>{buttonKiri}</Box>
+            <Box>{buttonKanan}</Box>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}

src/app_modules/forum/component/beranda/beranda_card.tsx

@@ -1,99 +0,0 @@
-"use client";
-
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import { Stack, Card, Group, ActionIcon, Divider, Text } from "@mantine/core";
-import { IconMessageCircle, IconMessageCircleOff } from "@tabler/icons-react";
-
-
-
-import { useState } from "react";
-import { useShallowEffect } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
-import { useAtom } from "jotai";
-
-
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
-import { IconMessageCircleX } from "@tabler/icons-react";
-import { MODEL_FORUM_POSTING } from "../../model/interface";
-import ComponentForum_BerandaAuthorNameOnHeader from "./beranda_author_header";
-
-export default function ComponentForum_BerandaCardView({
-  data,
-  setData,
-  setLoadingKomen,
-  setLoadingDetail,
-  userLoginId,
-}: {
-  data: MODEL_FORUM_POSTING[];
-  setData: any;
-  setLoadingKomen: any;
-  setLoadingDetail: any;
-  userLoginId: any;
-}) {
-  const router = useRouter();
-  return (
-    <>
-      <Stack spacing={"xl"}>
-        {data.map((e, i) => (
-          <Card key={i}>
-            <Card.Section>
-              <ComponentForum_BerandaAuthorNameOnHeader
-                authorName={e?.Author?.Profile?.name}
-                imagesId={e?.Author?.Profile?.imagesId}
-                tglPublish={e?.createdAt}
-                isMoreButton={true}
-                authorId={e?.Author?.id}
-                postingId={e?.id}
-                statusId={e?.ForumMaster_StatusPosting?.id}
-                userLoginId={userLoginId}
-                setData={setData}
-              />
-            </Card.Section>
-
-            <Card.Section
-              sx={{ zIndex: 0 }}
-              p={"lg"}
-              onClick={() => {
-                setLoadingDetail(true);
-                router.push(RouterForum.main_detail + e.id);
-              }}
-            >
-              <Text fz={"sm"} lineClamp={4}>
-                <div dangerouslySetInnerHTML={{ __html: e.diskusi }} />
-              </Text>
-            </Card.Section>
-            
-            <Card.Section>
-              <Stack>
-                <Group spacing={"xs"} px={"sm"}>
-                  <ActionIcon
-                    // loading={loadingKomen ? true : false}
-                    variant="transparent"
-                    sx={{ zIndex: 1 }}
-                    onClick={() => {
-                      (e?.ForumMaster_StatusPosting.id as any) === 1
-                        ? (router.push(RouterForum.komentar + e?.id),
-                          setLoadingKomen(true))
-                        : router.push(RouterForum.main_detail + e?.id);
-                    }}
-                  >
-                    {(e?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-                      <IconMessageCircle color="gray" size={25} />
-                    ) : (
-                      <IconMessageCircleX color="gray" size={25} />
-                    )}
-                  </ActionIcon>
-
-                  {/* <TotalKomentar postingId={e?.id} /> */}
-
-                  <Text c={"gray"}>{e?._count}</Text>
-                </Group>
-                <Divider />
-              </Stack>
-            </Card.Section>
-          </Card>
-        ))}
-      </Stack>
-    </>
-  );
-}

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

@@ -0,0 +1,126 @@
+"use client";
+
+import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
+import { Stack, Paper, Group, Button, Divider } from "@mantine/core";
+import { useState } from "react";
+import dynamic from "next/dynamic";
+const ReactQuill = dynamic(
+  () => {
+    return import("react-quill");
+  },
+  { ssr: false }
+);
+import { forum_funCreateKomentar } from "../../fun/create/fun_create_komentar";
+import { forum_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
+import { MODEL_FORUM_POSTING } from "../../model/interface";
+import { useRouter } from "next/navigation";
+import { MainColor } from "@/app_modules/component_global/color/color_pallet";
+import mqtt_client from "@/util/mqtt_client";
+export default function ComponentForum_DetailCreateKomentar({
+  postingId,
+  onSetKomentar,
+  data,
+  userLoginId,
+}: {
+  postingId: string;
+  onSetKomentar: (val: any) => void;
+  data: MODEL_FORUM_POSTING;
+  userLoginId: string;
+}) {
+  const router = useRouter();
+  const [value, setValue] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [isEmpty, setIsEmpty] = useState(false);
+
+  async function onComment() {
+    if (value.length > 500) {
+      return null;
+    }
+
+    const createComment = await forum_funCreateKomentar(postingId, value);
+    if (createComment.status === 201) {
+      // const loadKomentar = await forum_funGetAllKomentarById(data.id);
+
+      const loadData = await forum_funGetAllKomentarById({
+        postingId: data.id,
+        page: 1,
+      });
+      onSetKomentar(loadData);
+
+      setValue("");
+      setIsEmpty(true);
+      ComponentGlobal_NotifikasiBerhasil(createComment.message, 2000);
+
+      if (userLoginId !== data.Author.id) {
+        const dataNotif = {
+          appId: data.id,
+          userId: data.authorId,
+          pesan: value,
+          kategoriApp: "FORUM",
+          title: "Komentar baru",
+        };
+
+        const createNotifikasi = await notifikasiToUser_funCreate({
+          data: dataNotif as any,
+        });
+
+        if (createNotifikasi.status === 201) {
+          mqtt_client.publish(
+            "USER",
+            JSON.stringify({
+              userId: dataNotif.userId,
+              count: 1,
+            })
+          );
+        }
+      }
+    } else {
+      ComponentGlobal_NotifikasiGagal(createComment.message);
+    }
+  }
+
+  return (
+    <>
+      <Stack>
+        <Paper withBorder shadow="lg">
+          <ReactQuill
+            value={value}
+            theme="bubble"
+            placeholder="Ketik komentar anda?"
+            onChange={(val) => {
+              setValue(val);
+            }}
+          />
+        </Paper>
+
+        <Group position="apart">
+          <ComponentGlobal_InputCountDown
+            maxInput={500}
+            lengthInput={value.length}
+          />
+          <Button
+            style={{
+              transition: "0.5s",
+            }}
+            disabled={
+              value === "" || value === "<p><br></p>" || value.length > 500
+                ? true
+                : false
+            }
+            bg={MainColor.yellow}
+            color={"yellow"}
+            loaderPosition="center"
+            loading={loading ? true : false}
+            radius={"xl"}
+            onClick={() => onComment()}
+          >
+            Balas
+          </Button>
+        </Group>
+      </Stack>
+    </>
+  );
+}

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

@@ -44,6 +44,7 @@ import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_
 import { forum_funEditStatusPostingById } from "../../fun/edit/fun_edit_status_posting_by_id";
 import { forum_getOnePostingById } from "../../fun/get/get_one_posting_by_id";
 import mqtt_client from "@/util/mqtt_client";
+import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
 
 export default function ComponentForum_DetailHeader({
   data,
@@ -85,13 +86,13 @@ export default function ComponentForum_DetailHeader({
           </Grid.Col>
 
           <Grid.Col span={"auto"}>
-            <Stack spacing={0}>
-              <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+            <Stack spacing={3}>
+              <Text lineClamp={1} fz={"sm"} fw={"bold"} color="white">
                 {data?.Author.username ? data?.Author.username : "Nama author "}
               </Text>
               <Badge
                 w={70}
-                variant="light"
+                variant="outline"
                 color={
                   (data?.ForumMaster_StatusPosting.id as any) === 1
                     ? "green"
@@ -153,6 +154,12 @@ function ComponentForum_DetailButtonMore_V2({
     <>
       <Drawer
         // className={classes.radiusCustom}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            borderTop: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={opened}
         onClose={close}
         withCloseButton={false}
@@ -162,9 +169,43 @@ function ComponentForum_DetailButtonMore_V2({
       >
         <Stack>
           {userLoginId != authorId ? (
-            ""
+            <Grid
+              onClick={() => {
+                setLoadingReport(true);
+                router.push(RouterForum.report_posting + postingId);
+              }}
+            >
+              <Grid.Col span={"content"}>
+                <IconFlag3 color={loadingReport ? "gray" : "white"} />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Group>
+                  <Text c={loadingReport ? "gray" : "white"}>
+                    Laporkan posting
+                  </Text>{" "}
+                  {loadingReport ? <Loader size={"sm"} /> : ""}
+                </Group>
+              </Grid.Col>
+            </Grid>
           ) : (
             <Stack>
+              <Grid
+                onClick={() => {
+                  setLoadingEdit(true);
+                  router.push(RouterForum.edit_posting + postingId);
+                }}
+              >
+                <Grid.Col span={"content"}>
+                  <IconEdit color={loadingEdit ? "gray" : "white"} />
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Group>
+                    <Text c={loadingEdit ? "gray" : "white"}>Edit posting</Text>{" "}
+                    {loadingEdit ? <Loader size={"sm"} /> : ""}
+                  </Group>
+                </Grid.Col>
+              </Grid>
+
               <Grid
                 onClick={() => {
                   close();
@@ -173,16 +214,16 @@ function ComponentForum_DetailButtonMore_V2({
               >
                 <Grid.Col span={"content"}>
                   {statusId === 1 ? (
-                    <IconSquareRoundedX color="red" />
+                    <IconSquareRoundedX color="orange" />
                   ) : (
-                    <IconSquareCheck />
+                    <IconSquareCheck color="white" />
                   )}
                 </Grid.Col>
                 <Grid.Col span={"auto"}>
                   {statusId === 1 ? (
-                    <Text c={"red"}>Tutup forum</Text>
+                    <Text c={"orange"}>Tutup forum</Text>
                   ) : (
-                    <Text>Buka forum</Text>
+                    <Text c={"white"}>Buka forum</Text>
                   )}
                 </Grid.Col>
               </Grid>
@@ -200,56 +241,30 @@ function ComponentForum_DetailButtonMore_V2({
                   <Text c={"red"}>Hapus</Text>
                 </Grid.Col>
               </Grid>
-
-              <Grid
-                onClick={() => {
-                  setLoadingEdit(true);
-                  router.push(RouterForum.edit_posting + postingId);
-                }}
-              >
-                <Grid.Col span={"content"}>
-                  <IconEdit color={loadingEdit ? "gray" : "black"} />
-                </Grid.Col>
-                <Grid.Col span={"auto"}>
-                  <Group>
-                    <Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
-                    {loadingEdit ? <Loader size={"sm"} /> : ""}
-                  </Group>
-                </Grid.Col>
-              </Grid>
             </Stack>
           )}
 
-          {userLoginId == authorId ? (
-            ""
-          ) : (
-            <Grid
-              onClick={() => {
-                setLoadingReport(true);
-                router.push(RouterForum.report_posting + postingId);
-              }}
-            >
-              <Grid.Col span={"content"}>
-                <IconFlag3 color={loadingReport ? "gray" : "black"} />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Group>
-                  <Text c={loadingReport ? "gray" : "black"}>
-                    Laporkan posting
-                  </Text>{" "}
-                  {loadingReport ? <Loader size={"sm"} /> : ""}
-                </Group>
-              </Grid.Col>
-            </Grid>
-          )}
-
-          <Button variant="outline" radius={"xl"} onClick={close}>
+          <Button
+            bg={MainColor.yellow}
+            color={"yellow"}
+            style={{
+              border: `1px solid ${AccentColor.yellow}`,
+            }}
+            radius={"xl"}
+            onClick={close}
+          >
             Batal
           </Button>
         </Stack>
       </Drawer>
 
       <Modal
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={openDel}
         onClose={() => {
           setOpenDel(false);
@@ -261,6 +276,12 @@ function ComponentForum_DetailButtonMore_V2({
       </Modal>
 
       <Modal
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={openStatusClose}
         onClose={() => setOpenStatusClose(false)}
         centered
@@ -276,7 +297,7 @@ function ComponentForum_DetailButtonMore_V2({
         />
       </Modal>
 
-      <ActionIcon variant="transparent" onClick={() => open()}>
+      <ActionIcon c="white" variant="transparent" onClick={() => open()}>
         <IconDots size={20} />
       </ActionIcon>
     </>
@@ -317,7 +338,7 @@ function ButtonDelete({
   return (
     <>
       <Stack>
-        <Title order={6}>Yakin menghapus posting ini ?</Title>
+        <Title order={6} color="white">Yakin menghapus posting ini ?</Title>
         <Group position="center">
           <Button radius={"xl"} onClick={() => setOpenDel(false)}>
             Batal
@@ -425,9 +446,13 @@ function ButtonStatus({
     <>
       <Stack>
         {statusId === 1 ? (
-          <Title order={6}>Yakin menutup forum ini ?</Title>
+          <Title color="white" order={6}>
+            Yakin menutup forum ini ?
+          </Title>
         ) : (
-          <Title order={6}>Yakin membuka forum ini ?</Title>
+          <Title color="white" order={6}>
+            Yakin membuka forum ini ?
+          </Title>
         )}
         <Group position="center">
           <Button radius={"xl"} onClick={() => setOpenStatus(false)}>

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

@@ -0,0 +1,92 @@
+"use client";
+
+import {
+  Stack,
+  Center,
+  Box,
+  Card,
+  Spoiler,
+  Divider,
+  Text,
+} from "@mantine/core";
+import _ from "lodash";
+import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
+import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
+import { MainColor } from "@/app_modules/component_global/color/color_pallet";
+
+export default function ComponentForum_KomentarView({
+  data,
+  setKomentar,
+  postingId,
+  userLoginId,
+}: {
+  data: MODEL_FORUM_KOMENTAR;
+  setKomentar: any;
+  postingId: string;
+  userLoginId: string;
+}) {
+  return (
+    <>
+      <Card mb={"xs"} bg={"transparent"}>
+        <Card.Section>
+          <ComponentForum_KomentarAuthorNameOnHeader
+            authorName={data?.Author?.username}
+            imagesId={data?.Author?.Profile?.imagesId}
+            tglPublish={data?.createdAt}
+            userId={data?.Author?.id}
+            komentarId={data?.id}
+            isMoreButton={true}
+            setKomentar={setKomentar}
+            postingId={postingId}
+            userLoginId={userLoginId}
+          />
+        </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>
+            <Divider />
+          </Stack>
+        </Card.Section>
+      </Card>
+
+      {/* <Stack>
+        {_.isEmpty(data) ? (
+          <Center>
+            <Text fw={"bold"} fz={"xs"} c={"white"}>
+              Belum ada komentar
+            </Text>
+          </Center>
+        ) : (
+          <Box>
+            <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

@@ -0,0 +1,101 @@
+"use client";
+
+import { Card, Stack, Group, 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/component_global/color/color_pallet";
+
+export default function ComponentForum_DetailForumView({
+  data,
+  totalKomentar,
+  userLoginId,
+  onLoadData,
+}: {
+  data: MODEL_FORUM_POSTING;
+  totalKomentar: number;
+  userLoginId: string;
+  onLoadData: (val: any) => void;
+}) {
+  return (
+    <>
+      <Card
+        mb={"md"}
+        p={"xl"}
+        bg={MainColor.darkblue}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+        }}
+        radius={"md"}
+      >
+        {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+
+        {/* HEADER */}
+        <Card.Section>
+          <ComponentForum_DetailHeader
+            data={data}
+            userLoginId={userLoginId}
+            onLoadData={(val) => {
+              onLoadData(val);
+            }}
+          />
+        </Card.Section>
+
+        {/* CONTENT */}
+        <Card.Section sx={{ zIndex: 0 }} p={"lg"}>
+          <Stack spacing={"xs"}>
+            <Text fz={"sm"} color="white">
+              {data?.diskusi ? (
+                <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
+              ) : (
+                ""
+              )}
+            </Text>
+          </Stack>
+        </Card.Section>
+
+        {/* FOOTER */}
+        <Card.Section>
+          <Stack>
+            <Group position="apart">
+              <Group spacing={"xs"} px={"sm"}>
+                {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
+                  <IconMessageCircle color="white" size={25} />
+                ) : (
+                  <IconMessageCircleX color="gray" size={25} />
+                )}
+                <Text
+                  c={
+                    (data?.ForumMaster_StatusPosting?.id as any) === 1
+                      ? "white"
+                      : "gray"
+                  }
+                >
+                  {totalKomentar}
+                </Text>
+              </Group>
+              <Group>
+                <Text c={"white"} fz={"sm"}>
+                  {new Date(data?.createdAt).toLocaleTimeString()}
+                  {/* {new Intl.RelativeTimeFormat("id", {style: "short"}).format(-1,"day")} */}
+                </Text>
+                <Text c={"white"} fz={"sm"}>
+                  {data?.createdAt
+                    ? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
+                        dateStyle: "medium",
+                      })
+                    : new Date().toLocaleDateString(["id-ID"], {
+                        dateStyle: "medium",
+                      })}
+                </Text>
+              </Group>
+            </Group>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

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

@@ -1,79 +1,48 @@
 "use client";
 
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import {
-  Stack,
-  Grid,
-  Avatar,
-  Divider,
-  Text,
-  Group,
-  Badge,
-  Loader,
-} from "@mantine/core";
-import { useRouter } from "next/navigation";
-import moment from "moment";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import {
-  IconCircleFilled,
-  IconDots,
-  IconEdit,
-  IconFlag3,
-  IconMessageCircle,
-  IconTrash,
-} from "@tabler/icons-react";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { Avatar, Badge, Grid, Group, Loader, Stack, Text } from "@mantine/core";
 import { IconCircle } from "@tabler/icons-react";
-import { IoIosMore } from "react-icons/io";
-import { useDisclosure } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-import { data } from "autoprefixer";
-import ComponentForum_BerandaButtonMore from "./beranda_button_more";
+import { MODEL_FORUM_POSTING } from "../../model/interface";
+import ComponentForum_ForumkuMoreButton from "./forumku_more_button";
 
-export default function ComponentForum_BerandaAuthorNameOnHeader({
-  authorId,
-  postingId,
-  imagesId,
-  authorName,
-  tglPublish,
-  isPembatas,
+
+export default function ComponentForum_ForumkuHeaderCard({
+  data,
   isMoreButton,
-  statusId,
   userLoginId,
-  setData,
+  onLoadData,
+  allData,
 }: {
-  authorId?: string;
-  postingId?: string;
-  imagesId?: string;
-  authorName?: string;
-  tglPublish?: Date;
-  isPembatas?: boolean;
-  isMoreButton?: boolean;
-  statusId?: string;
+  data: MODEL_FORUM_POSTING;
+  isMoreButton: boolean;
   userLoginId: string;
-  setData?: any;
+  onLoadData: (val: any) => void;
+  allData: any[];
 }) {
   const router = useRouter();
-  const [loading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   return (
     <>
       <Stack spacing={"xs"}>
-        <Grid>
+        <Grid align="center">
           <Grid.Col
             span={"content"}
             onClick={() => {
-              if (authorId) {
-                setLoading(true);
-                router.push(RouterForum.forumku + authorId);
+              if (data.Author.id) {
+                setIsLoading(true);
+                router.push(RouterForum.forumku + data.Author.id);
               } else {
                 ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
               }
             }}
           >
-            {loading ? (
+            {isLoading ? (
               <Loader color="gray" variant="dots" />
             ) : (
               <Avatar
@@ -82,8 +51,9 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
                 radius={"xl"}
                 bg={"gray.1"}
                 src={
-                  imagesId
-                    ? RouterProfile.api_foto_profile + imagesId
+                  data.Author.Profile.imagesId
+                    ? RouterProfile.api_foto_profile +
+                      data.Author.Profile.imagesId
                     : "/aset/global/avatar.png"
                 }
               />
@@ -91,23 +61,28 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
           </Grid.Col>
 
           <Grid.Col span={"auto"}>
-            <Stack justify="center" h={"100%"} spacing={0}>
+            <Stack justify="center" h={"100%"} spacing={3}>
               <Grid>
                 <Grid.Col span={"auto"}>
-                  <Text lineClamp={1} fz={"sm"} fw={"bold"}>
-                    {authorName ? authorName : "Nama author  "}
+                  <Text lineClamp={1} fz={"sm"} fw={"bold"} c={"white"}>
+                    {data.Author.username
+                      ? data.Author.username
+                      : "Nama author  "}
                   </Text>
                 </Grid.Col>
                 <Grid.Col span={"content"}></Grid.Col>
               </Grid>
+
               <Badge
                 w={70}
-                variant="light"
-                color={(statusId as any) === 1 ? "green" : "red"}
+                variant="outline"
+                color={
+                  (data.ForumMaster_StatusPosting.id as any) === 1
+                    ? "green"
+                    : "red"
+                }
               >
-                <Text fz={10}>
-                  {(statusId as any) === 1 ? "Open" : "Close"}
-                </Text>
+                <Text c={"white"} fz={10}>{data?.ForumMaster_StatusPosting.status}</Text>
               </Badge>
             </Stack>
           </Grid.Col>
@@ -115,9 +90,9 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
           <Grid.Col span={"content"}>
             <Group position="center" spacing={"xs"}>
               <Group spacing={3}>
-                <Text c={"gray"} fz={"sm"}>
-                  {tglPublish
-                    ? tglPublish.toLocaleDateString(["id-ID"], {
+                <Text c={"white"} fz={"sm"} >
+                  {data.createdAt !== undefined && data?.createdAt
+                    ? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
                         day: "numeric",
                         month: "short",
                       })
@@ -125,9 +100,10 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
                         day: "numeric",
                         month: "short",
                       })}
+
                   <IconCircle
                     size={5}
-                    color="gray"
+                    color="white"
                     style={{ marginLeft: "5px" }}
                   />
                 </Text>
@@ -135,12 +111,13 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
 
               {isMoreButton ? (
                 <Group position="right">
-                  <ComponentForum_BerandaButtonMore
-                    authorId={authorId}
-                    postingId={postingId as any}
-                    statusId={statusId}
+                  <ComponentForum_ForumkuMoreButton
+                    authorId={data?.Author.id}
+                    postingId={data?.id}
+                    statusId={data?.ForumMaster_StatusPosting.id}
                     userLoginId={userLoginId}
-                    setData={setData}
+                    onLoadData={onLoadData}
+                    allData={allData}
                   />
                 </Group>
               ) : (
@@ -149,7 +126,7 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
             </Group>
           </Grid.Col>
         </Grid>
-        {isPembatas ? <Divider /> : ""}
+        {/* {isPembatas ? <Divider /> : ""} */}
       </Stack>
     </>
   );

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

@@ -3,55 +3,54 @@
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import {
-  Drawer,
-  Stack,
-  Grid,
-  Button,
-  Modal,
-  Title,
-  Group,
   ActionIcon,
-  Text,
-  Box,
-  Center,
+  Button,
+  Drawer,
+  Grid,
+  Group,
   Loader,
+  Modal,
+  Stack,
+  Text,
+  Title,
 } from "@mantine/core";
-import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { useDisclosure } from "@mantine/hooks";
 import {
-  IconTrash,
+  IconDots,
   IconEdit,
   IconFlag3,
-  IconDots,
-  IconSquareRoundedX,
   IconSquareCheck,
+  IconSquareRoundedX,
+  IconTrash,
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-import { createStyles } from "@mantine/core";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-import { useAtom } from "jotai";
-import { gs_forum_loading_edit_posting } from "../../global_state";
-import ComponentForum_LoadingDrawer from "../loading_drawer";
-import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
-import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+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 { forum_getListAllPosting } from "../../fun/get/get_list_all_posting";
-import { forum_getListPostingByAuhtorId } from "../../fun/get/get_list_posting_by_author_id";
+import { MODEL_FORUM_POSTING } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
-export default function ComponentForum_BerandaButtonMore({
+export default function ComponentForum_ForumkuMoreButton({
   authorId,
   postingId,
   statusId,
   userLoginId,
-  setData,
+  onLoadData,
+  allData,
 }: {
   authorId: any;
   postingId?: any;
   statusId?: any;
   userLoginId: any;
-  setData: any;
+  onLoadData: (val: any) => void;
+  allData: any[];
 }) {
   const router = useRouter();
 
@@ -64,12 +63,15 @@ export default function ComponentForum_BerandaButtonMore({
   const [loadingEdit, setLoadingEdit] = useState(false);
   const [loadingReport, setLoadingReport] = useState(false);
 
-  //   if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
-
   return (
     <>
       <Drawer
-        // className={classes.radiusCustom}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            borderTop: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={opened}
         onClose={close}
         withCloseButton={false}
@@ -79,9 +81,43 @@ export default function ComponentForum_BerandaButtonMore({
       >
         <Stack>
           {userLoginId != authorId ? (
-            ""
+            <Grid
+              onClick={() => {
+                setLoadingReport(true);
+                router.push(RouterForum.report_posting + postingId);
+              }}
+            >
+              <Grid.Col span={"content"}>
+                <IconFlag3 color={loadingReport ? "gray" : "white"} />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Group>
+                  <Text c={loadingReport ? "gray" : "white"}>
+                    Laporkan posting
+                  </Text>{" "}
+                  {loadingReport ? <Loader size={"sm"} /> : ""}
+                </Group>
+              </Grid.Col>
+            </Grid>
           ) : (
             <Stack>
+              <Grid
+                onClick={() => {
+                  setLoadingEdit(true);
+                  router.push(RouterForum.edit_posting + postingId);
+                }}
+              >
+                <Grid.Col span={"content"}>
+                  <IconEdit color={loadingEdit ? "gray" : "white"} />
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Group>
+                    <Text c={loadingEdit ? "gray" : "white"}>Edit posting</Text>{" "}
+                    {loadingEdit ? <Loader size={"sm"} /> : ""}
+                  </Group>
+                </Grid.Col>
+              </Grid>
+
               <Grid
                 onClick={() => {
                   close();
@@ -90,16 +126,16 @@ export default function ComponentForum_BerandaButtonMore({
               >
                 <Grid.Col span={"content"}>
                   {statusId === 1 ? (
-                    <IconSquareRoundedX color="red" />
+                    <IconSquareRoundedX color="orange" />
                   ) : (
-                    <IconSquareCheck />
+                    <IconSquareCheck color="white" />
                   )}
                 </Grid.Col>
                 <Grid.Col span={"auto"}>
                   {statusId === 1 ? (
-                    <Text c={"red"}>Tutup forum</Text>
+                    <Text c={"orange"}>Tutup forum</Text>
                   ) : (
-                    <Text>Buka forum</Text>
+                    <Text c={"white"}>Buka forum</Text>
                   )}
                 </Grid.Col>
               </Grid>
@@ -117,56 +153,30 @@ export default function ComponentForum_BerandaButtonMore({
                   <Text c={"red"}>Hapus</Text>
                 </Grid.Col>
               </Grid>
-
-              <Grid
-                onClick={() => {
-                  setLoadingEdit(true);
-                  router.push(RouterForum.edit_posting + postingId);
-                }}
-              >
-                <Grid.Col span={"content"}>
-                  <IconEdit color={loadingEdit ? "gray" : "black"} />
-                </Grid.Col>
-                <Grid.Col span={"auto"}>
-                  <Group>
-                    <Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
-                    {loadingEdit ? <Loader size={"sm"} /> : ""}
-                  </Group>
-                </Grid.Col>
-              </Grid>
             </Stack>
           )}
 
-          {userLoginId == authorId ? (
-            ""
-          ) : (
-            <Grid
-              onClick={() => {
-                setLoadingReport(true);
-                router.push(RouterForum.report_posting + postingId);
-              }}
-            >
-              <Grid.Col span={"content"}>
-                <IconFlag3 color={loadingReport ? "gray" : "black"} />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Group>
-                  <Text c={loadingReport ? "gray" : "black"}>
-                    Laporkan posting
-                  </Text>{" "}
-                  {loadingReport ? <Loader size={"sm"} /> : ""}
-                </Group>
-              </Grid.Col>
-            </Grid>
-          )}
-
-          <Button variant="outline" radius={"xl"} onClick={close}>
+          <Button
+            bg={MainColor.yellow}
+            color={"yellow"}
+            style={{
+              border: `1px solid ${AccentColor.yellow}`,
+            }}
+            radius={"xl"}
+            onClick={close}
+          >
             Batal
           </Button>
         </Stack>
       </Drawer>
 
       <Modal
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={openDel}
         onClose={() => {
           setOpenDel(false);
@@ -177,11 +187,20 @@ export default function ComponentForum_BerandaButtonMore({
         <ButtonDelete
           postingId={postingId}
           setOpenDel={setOpenDel}
-          setData={setData}
+          onLoadData={(val) => {
+            onLoadData(val);
+          }}
+          allData={allData}
         />
       </Modal>
 
       <Modal
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={openStatusClose}
         onClose={() => setOpenStatusClose(false)}
         centered
@@ -191,13 +210,16 @@ export default function ComponentForum_BerandaButtonMore({
           postingId={postingId}
           setOpenStatus={setOpenStatusClose}
           statusId={statusId}
-          setData={setData}
+          onLoadData={(val) => {
+            onLoadData(val);
+          }}
           userLoginId={userLoginId}
           authorId={authorId}
+          allData={allData}
         />
       </Modal>
 
-      <ActionIcon variant="transparent" onClick={() => open()}>
+      <ActionIcon c="white" variant="transparent" onClick={() => open()}>
         <IconDots size={20} />
       </ActionIcon>
     </>
@@ -207,11 +229,13 @@ export default function ComponentForum_BerandaButtonMore({
 function ButtonDelete({
   postingId,
   setOpenDel,
-  setData,
+  onLoadData,
+  allData,
 }: {
   postingId?: string;
   setOpenDel: any;
-  setData: any;
+  onLoadData: (val: any) => void;
+  allData: MODEL_FORUM_POSTING[];
 }) {
   const [loading, setLoading] = useState(false);
 
@@ -219,21 +243,31 @@ function ButtonDelete({
     setOpenDel(false);
     await forum_funDeletePostingById(postingId as any).then(async (res) => {
       if (res.status === 200) {
-        // ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
+        ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
         setLoading(true);
-        const listForum = await forum_getListAllPosting();
-        setData(listForum);
-        return null;
+
+        const cloneData = _.clone(allData);
+        const hapusData = cloneData.filter((e) => e.id !== postingId);
+
+        onLoadData(hapusData);
+
+        mqtt_client.publish(
+          "Forum_hapus_data",
+          JSON.stringify({
+            data: hapusData,
+          })
+        );
       } else {
-        // ComponentGlobal_NotifikasiGagal(res.message);
-        return null;
+        ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
   }
   return (
     <>
       <Stack>
-        <Title order={6}>Yakin menghapus posting ini ?</Title>
+        <Title c={"white"} order={6}>
+          Yakin menghapus posting ini ?
+        </Title>
         <Group position="center">
           <Button radius={"xl"} onClick={() => setOpenDel(false)}>
             Batal
@@ -259,16 +293,18 @@ function ButtonStatus({
   postingId,
   setOpenStatus,
   statusId,
-  setData,
+  onLoadData,
   userLoginId,
   authorId,
+  allData,
 }: {
   postingId?: string;
   setOpenStatus: any;
   statusId?: any;
-  setData: any;
+  onLoadData: (val: any) => void;
   userLoginId: string;
   authorId: string;
+  allData: MODEL_FORUM_POSTING[];
 }) {
   const [loading, setLoading] = useState(false);
 
@@ -280,57 +316,127 @@ function ButtonStatus({
       2
     );
     if (upateStatusClose.status === 200) {
-      const loadData = await forum_getListAllPosting();
-      // ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
-      setData(loadData);
+      ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
       setLoading(true);
-      return null;
-    } else {
-      //  ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
-      return null;
-    }
 
-    // await forum_funEditStatusPostingById(postingId as any, 2).then(
-    //   async (res) => {
-    //     if (res.status === 200) {
-    //       await forum_getListAllPosting().then((val) => {
-    //         setData(val as any);
-    //         ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
-    //         setLoading(true);
-    //       });
-    //     } else {
-    //       ComponentGlobal_NotifikasiGagal(res.message);
-    //     }
-    //   }
-    // );
+      const cloneData = _.clone(allData);
+      const loadData = cloneData.map(
+        (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);
+      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 {
+      ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
+    }
   }
 
   async function onBukaForum() {
     setOpenStatus(false);
 
-    await forum_funEditStatusPostingById(postingId as any, 1).then(
-      async (res) => {
-        if (res.status === 200) {
-          await forum_getListAllPosting().then((val) => {
-            setData(val as any);
-
-            ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
-            setLoading(true);
-          });
-        } else {
-          ComponentGlobal_NotifikasiGagal(res.message);
-        }
-      }
+    const updateStatusOpen = await forum_funEditStatusPostingById(
+      postingId as any,
+      1
     );
+    if (updateStatusOpen.status === 200) {
+      ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
+      setLoading(true);
+
+      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,
+            },
+          }
+        )
+      );
+
+      mqtt_client.publish(
+        "Forum_ganti_status",
+        JSON.stringify({
+          id: postingId,
+          data: loadData,
+        })
+      );
+
+      onLoadData(loadData);
+
+      const findData = cloneData.find((val) => val.id === postingId);
+      const updateDetail = {
+        ...findData,
+        ForumMaster_StatusPosting: {
+          id: 1,
+          status: "Open",
+        },
+      };
+
+      mqtt_client.publish(
+        "Forum_detail_ganti_status",
+        JSON.stringify({
+          id: postingId,
+          data: updateDetail.ForumMaster_StatusPosting,
+        })
+      );
+    } else {
+      ComponentGlobal_NotifikasiGagal(updateStatusOpen.message);
+    }
   }
 
   return (
     <>
       <Stack>
         {statusId === 1 ? (
-          <Title order={6}>Yakin menutup forum ini ?</Title>
+          <Title c={"white"} order={6}>
+            Yakin menutup forum ini ?
+          </Title>
         ) : (
-          <Title order={6}>Yakin membuka forum ini ?</Title>
+          <Title c={"white"} order={6}>
+            Yakin membuka forum ini ?
+          </Title>
         )}
         <Group position="center">
           <Button radius={"xl"} onClick={() => setOpenStatus(false)}>

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

@@ -0,0 +1,87 @@
+"use client";
+
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { ActionIcon, Card, Divider, Group, Stack, Text } from "@mantine/core";
+import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_FORUM_POSTING } from "../../model/interface";
+import ComponentForum_ForumkuHeaderCard from "./forumku_header";
+import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
+
+
+export default function ComponentForum_ForumkuMainCardView({
+  data,
+  userLoginId,
+  onLoadData,
+  allData,
+}: {
+  data: MODEL_FORUM_POSTING;
+  userLoginId: string;
+  onLoadData: (val: any) => void;
+  allData: any[];
+}) {
+  const router = useRouter();
+  const [loadingKomen, setLoadingKomen] = useState(false);
+  const [loadingDetail, setLoadingDetail] = useState(false);
+
+  const [postingId, setPostingId] = useState("");
+
+  return (
+    <>
+      <Card
+        mb={"md"}
+        p={"xl"}
+        bg={MainColor.darkblue}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+        }}
+        radius={"md"}
+      >
+        <Card.Section>
+          <ComponentForum_ForumkuHeaderCard
+            data={data}
+            isMoreButton={true}
+            userLoginId={userLoginId}
+            onLoadData={onLoadData}
+            allData={allData}
+          />
+        </Card.Section>
+
+        <Card.Section
+          sx={{ zIndex: 0 }}
+          p={"lg"}
+          onClick={() => {
+            router.push(RouterForum.main_detail + data?.id);
+          }}
+        >
+          <Text c={"white"} fz={"sm"} lineClamp={4}>
+            <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
+          </Text>
+        </Card.Section>
+
+        <Card.Section>
+          <Stack>
+            <Group spacing={"xs"} px={"sm"}>
+              <ActionIcon
+                loading={loadingKomen && data?.id === postingId ? true : false}
+                variant="transparent"
+                sx={{ zIndex: 1 }}
+              >
+                {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
+                  <IconMessageCircle color="white" size={25} />
+                ) : (
+                  <IconMessageCircleX color="gray" size={25} />
+                )}
+              </ActionIcon>
+
+              {/* <TotalKomentar postingId={e?.id} /> */}
+
+              <Text c={(data?.ForumMaster_StatusPosting?.id as any) === 1 ? "white" : "gray"}>{data?.Forum_Komentar.length}</Text>
+            </Group>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

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

@@ -19,7 +19,7 @@ import { IoIosMore } from "react-icons/io";
 import { useDisclosure } from "@mantine/hooks";
 import { useState } from "react";
 import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
-import ComponentForum_KomentarButtonMore from "../more_button/komentar_button_more";
+import ComponentForum_KomentarButtonMore from "./komentar_button_more";
 
 export default function ComponentForum_KomentarAuthorNameOnHeader({
   userId,
@@ -42,7 +42,7 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
   isMoreButton?: boolean;
   setKomentar?: any;
   postingId?: string;
-  userLoginId: string
+  userLoginId: string;
 }) {
   const router = useRouter();
 
@@ -76,25 +76,17 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
             <Stack justify="center" h={"100%"}>
               <Grid>
                 <Grid.Col span={"auto"}>
-                  <Text lineClamp={1} fz={"sm"} fw={"bold"}>
-                    {authorName
-                      ? authorName
-                      : "Nama author coba di berikan panjang "}
+                  <Text color="white" lineClamp={1} fz={"sm"} fw={"bold"}>
+                    {authorName ? authorName : "Nama author  "}
                   </Text>
                 </Grid.Col>
-                {/* <Grid.Col span={"auto"}>
-                  <Text lineClamp={1} fz={"sm"} c={"gray"}>
-                    {username ? username : "@username "}
-                  </Text>
-                </Grid.Col> */}
-                <Grid.Col span={"content"}></Grid.Col>
               </Grid>
             </Stack>
           </Grid.Col>
           <Grid.Col span={"content"}>
             <Group position="center" spacing={"xs"}>
               <Group spacing={3}>
-                <Text c={"gray"} fz={"sm"}>
+                <Text c={"white"} fz={"sm"}>
                   {tglPublish
                     ? tglPublish.toLocaleDateString(["id-ID"], {
                         day: "numeric",
@@ -107,7 +99,7 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
 
                   <IconCircle
                     size={5}
-                    color="gray"
+                    color="white"
                     style={{ marginLeft: "5px" }}
                   />
                 </Text>

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

@@ -30,7 +30,11 @@ import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import { forum_funDeleteKomentarById } from "../../fun/delete/fun_delete_komentar_by_id";
-import { forum_getKomentarById } from "../../fun/get/get_komentar_by_id";
+import { forum_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function ComponentForum_KomentarButtonMore({
   userId,
@@ -43,7 +47,7 @@ export default function ComponentForum_KomentarButtonMore({
   komentarId: any;
   setKomentar?: any;
   postingId?: string;
-  userLoginId: string
+  userLoginId: string;
 }) {
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
@@ -53,14 +57,19 @@ export default function ComponentForum_KomentarButtonMore({
   const [loadingEdit, setLoadingEdit] = useState(false);
   const [loadingReport, setLoadingReport] = useState(false);
 
-  //   if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
-
- 
-
   return (
     <>
       <Drawer
-        // className={classes.radiusCustom}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            borderTop: `1px solid ${AccentColor.blue}`,
+            borderRadius: "10px 10px 0px 0px",
+          },
+          header: {
+            borderRadius: "10px 10px 0px 0px",
+          },
+        }}
         opened={opened}
         onClose={close}
         withCloseButton={false}
@@ -69,9 +78,7 @@ export default function ComponentForum_KomentarButtonMore({
         size={"auto"}
       >
         <Stack>
-          {userLoginId != userId ? (
-            ""
-          ) : (
+          {userLoginId == userId ? (
             <Stack>
               <Grid
                 onClick={() => {
@@ -86,30 +93,7 @@ export default function ComponentForum_KomentarButtonMore({
                   <Text c={"red"}>Hapus</Text>
                 </Grid.Col>
               </Grid>
-
-              {/* <Grid
-                onClick={() => {
-                  setLoadingEdit(true);
-                  router.push(RouterForum.edit_komentar + komentarId);
-                }}
-              >
-                <Grid.Col span={"content"}>
-                  <IconEdit color={loadingEdit ? "gray" : "black"} />
-                </Grid.Col>
-                <Grid.Col span={"auto"}>
-                  <Group>
-                    <Text c={loadingEdit ? "gray" : "black"}>
-                      Edit komentar
-                    </Text>{" "}
-                    {loadingEdit ? <Loader size={"sm"} /> : ""}
-                  </Group>
-                </Grid.Col>
-              </Grid> */}
             </Stack>
-          )}
-
-          {userLoginId == userId ? (
-            ""
           ) : (
             <Grid
               onClick={() => {
@@ -118,11 +102,11 @@ export default function ComponentForum_KomentarButtonMore({
               }}
             >
               <Grid.Col span={"content"}>
-                <IconFlag3 color={loadingReport ? "gray" : "black"} />
+                <IconFlag3 color={loadingReport ? "gray" : "white"} />
               </Grid.Col>
               <Grid.Col span={"auto"}>
                 <Group>
-                  <Text c={loadingReport ? "gray" : "black"}>
+                  <Text c={loadingReport ? "gray" : "white"}>
                     Laporkan komentar
                   </Text>{" "}
                   {loadingReport ? <Loader size={"sm"} /> : ""}
@@ -131,13 +115,27 @@ export default function ComponentForum_KomentarButtonMore({
             </Grid>
           )}
 
-          <Button variant="outline" radius={"xl"} onClick={close}>
+          <Button
+            bg={MainColor.yellow}
+            color={"yellow"}
+            style={{
+              border: `1px solid ${AccentColor.yellow}`,
+            }}
+            radius={"xl"}
+            onClick={close}
+          >
             Batal
           </Button>
         </Stack>
       </Drawer>
 
       <Modal
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={openDel}
         onClose={() => {
           setOpenDel(false);
@@ -153,7 +151,7 @@ export default function ComponentForum_KomentarButtonMore({
         />
       </Modal>
 
-      <ActionIcon variant="transparent" onClick={() => open()}>
+      <ActionIcon c={"white"} variant="transparent" onClick={() => open()}>
         <IconDots size={20} />
       </ActionIcon>
     </>
@@ -178,7 +176,7 @@ function ButtonDelete({
   async function onDelete() {
     await forum_funDeleteKomentarById(komentarId as any).then(async (res) => {
       if (res.status === 200) {
-        await forum_getKomentarById(postingId as any).then((val) => {
+        await forum_funGetAllKomentarById(postingId as any).then((val) => {
           setKomentar(val);
           setOpenDel(false);
           setLoading(true);
@@ -188,19 +186,11 @@ function ButtonDelete({
         ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
-
-    // await forum_funDeletePostingById(komentarId as any).then((res) => {
-    //   if (res.status === 200) {
-    //     ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
-    //   } else {
-    //     ComponentGlobal_NotifikasiGagal(res.message);
-    //   }
-    // });
   }
   return (
     <>
       <Stack>
-        <Title order={6}>Yakin menghapus komentar ini ?</Title>
+        <Title order={6} c="white">Yakin menghapus komentar ini ?</Title>
         <Group position="center">
           <Button radius={"xl"} onClick={() => setOpenDel(false)}>
             Batal
@@ -208,7 +198,7 @@ function ButtonDelete({
           <Button
             loaderPosition="center"
             loading={loading ? true : false}
-            color="orange"
+            color="red"
             radius={"xl"}
             onClick={() => {
               onDelete();

src/app_modules/forum/component/main_component/card_header.tsx

@@ -1,28 +1,24 @@
 "use client";
 
-import loading from "@/app/dev/home/loading";
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 import {
-  Stack,
-  Loader,
   Avatar,
   Badge,
-  Group,
-  Divider,
   Grid,
-  Text,
+  Group,
+  Loader,
+  Stack,
+  Text
 } from "@mantine/core";
 import { IconCircle } from "@tabler/icons-react";
-import ComponentForum_BerandaButtonMore from "../beranda/beranda_button_more";
-import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
-import ComponentForum_V2_CardMoreButton from "./card_more_button";
+import ComponentForum_BerandaMoreButton from "./card_more_button";
 
-export default function ComponentForum_V2_HeaderCard({
+export default function ComponentForum_BerandaHeaderCard({
   data,
   isMoreButton,
   userLoginId,
@@ -58,7 +54,11 @@ export default function ComponentForum_V2_HeaderCard({
             ) : (
               <Avatar
                 size={40}
-                sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                sx={{
+                  borderStyle: "solid",
+                  borderWidth: "1px",
+                  borderColor: "white",
+                }}
                 radius={"xl"}
                 bg={"gray.1"}
                 src={
@@ -75,7 +75,7 @@ export default function ComponentForum_V2_HeaderCard({
             <Stack justify="center" h={"100%"} spacing={3}>
               <Grid>
                 <Grid.Col span={"auto"}>
-                  <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                  <Text lineClamp={1} fz={"sm"} fw={"bold"} color={"white"}>
                     {data.Author.username
                       ? data.Author.username
                       : "Nama author  "}
@@ -86,7 +86,7 @@ export default function ComponentForum_V2_HeaderCard({
 
               <Badge
                 w={70}
-                variant="light"
+                variant="outline"
                 color={
                   (data.ForumMaster_StatusPosting.id as any) === 1
                     ? "green"
@@ -101,7 +101,7 @@ export default function ComponentForum_V2_HeaderCard({
           <Grid.Col span={"content"}>
             <Group position="center" spacing={"xs"}>
               <Group spacing={3}>
-                <Text c={"gray"} fz={"sm"}>
+                <Text color={"white"} fz={"sm"}>
                   {data.createdAt !== undefined && data?.createdAt
                     ? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
                         day: "numeric",
@@ -114,7 +114,7 @@ export default function ComponentForum_V2_HeaderCard({
 
                   <IconCircle
                     size={5}
-                    color="gray"
+                    color="white"
                     style={{ marginLeft: "5px" }}
                   />
                 </Text>
@@ -122,7 +122,7 @@ export default function ComponentForum_V2_HeaderCard({
 
               {isMoreButton ? (
                 <Group position="right">
-                  <ComponentForum_V2_CardMoreButton
+                  <ComponentForum_BerandaMoreButton
                     authorId={data?.Author.id}
                     postingId={data?.id}
                     statusId={data?.ForumMaster_StatusPosting.id}

src/app_modules/forum/component/main_component/card_more_button.tsx

@@ -4,6 +4,7 @@ import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import {
   ActionIcon,
+  Box,
   Button,
   Drawer,
   Grid,
@@ -32,8 +33,12 @@ 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/component_global/color/color_pallet";
 
-export default function ComponentForum_V2_CardMoreButton({
+export default function ComponentForum_BerandaMoreButton({
   authorId,
   postingId,
   statusId,
@@ -59,12 +64,15 @@ export default function ComponentForum_V2_CardMoreButton({
   const [loadingEdit, setLoadingEdit] = useState(false);
   const [loadingReport, setLoadingReport] = useState(false);
 
-  //   if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
-
   return (
     <>
       <Drawer
-        // className={classes.radiusCustom}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            borderTop: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={opened}
         onClose={close}
         withCloseButton={false}
@@ -74,9 +82,42 @@ export default function ComponentForum_V2_CardMoreButton({
       >
         <Stack>
           {userLoginId != authorId ? (
-            ""
+            <Grid
+              onClick={() => {
+                setLoadingReport(true);
+                router.push(RouterForum.report_posting + postingId);
+              }}
+            >
+              <Grid.Col span={"content"}>
+                <IconFlag3 color={loadingReport ? "gray" : "white"} />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Group>
+                  <Text c={loadingReport ? "gray" : "white"}>
+                    Laporkan posting
+                  </Text>{" "}
+                  {loadingReport ? <Loader size={"sm"} /> : ""}
+                </Group>
+              </Grid.Col>
+            </Grid>
           ) : (
             <Stack>
+              <Grid
+                onClick={() => {
+                  setLoadingEdit(true);
+                  router.push(RouterForum.edit_posting + postingId);
+                }}
+              >
+                <Grid.Col span={"content"}>
+                  <IconEdit color={loadingEdit ? "gray" : "white"} />
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Group>
+                    <Text c={loadingEdit ? "gray" : "white"}>Edit posting</Text>{" "}
+                    {loadingEdit ? <Loader size={"sm"} /> : ""}
+                  </Group>
+                </Grid.Col>
+              </Grid>
               <Grid
                 onClick={() => {
                   close();
@@ -85,16 +126,16 @@ export default function ComponentForum_V2_CardMoreButton({
               >
                 <Grid.Col span={"content"}>
                   {statusId === 1 ? (
-                    <IconSquareRoundedX color="red" />
+                    <IconSquareRoundedX color="orange" />
                   ) : (
-                    <IconSquareCheck />
+                    <IconSquareCheck color="white" />
                   )}
                 </Grid.Col>
                 <Grid.Col span={"auto"}>
                   {statusId === 1 ? (
-                    <Text c={"red"}>Tutup forum</Text>
+                    <Text c={"orange"}>Tutup forum</Text>
                   ) : (
-                    <Text>Buka forum</Text>
+                    <Text c={"white"}>Buka forum</Text>
                   )}
                 </Grid.Col>
               </Grid>
@@ -112,56 +153,30 @@ export default function ComponentForum_V2_CardMoreButton({
                   <Text c={"red"}>Hapus</Text>
                 </Grid.Col>
               </Grid>
-
-              <Grid
-                onClick={() => {
-                  setLoadingEdit(true);
-                  router.push(RouterForum.edit_posting + postingId);
-                }}
-              >
-                <Grid.Col span={"content"}>
-                  <IconEdit color={loadingEdit ? "gray" : "black"} />
-                </Grid.Col>
-                <Grid.Col span={"auto"}>
-                  <Group>
-                    <Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
-                    {loadingEdit ? <Loader size={"sm"} /> : ""}
-                  </Group>
-                </Grid.Col>
-              </Grid>
             </Stack>
           )}
 
-          {userLoginId == authorId ? (
-            ""
-          ) : (
-            <Grid
-              onClick={() => {
-                setLoadingReport(true);
-                router.push(RouterForum.report_posting + postingId);
-              }}
-            >
-              <Grid.Col span={"content"}>
-                <IconFlag3 color={loadingReport ? "gray" : "black"} />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Group>
-                  <Text c={loadingReport ? "gray" : "black"}>
-                    Laporkan posting
-                  </Text>{" "}
-                  {loadingReport ? <Loader size={"sm"} /> : ""}
-                </Group>
-              </Grid.Col>
-            </Grid>
-          )}
-
-          <Button variant="outline" radius={"xl"} onClick={close}>
-            Batal
+          <Button
+            bg={MainColor.yellow}
+            color={"yellow"}
+            style={{
+              border: `1px solid ${AccentColor.yellow}`,
+            }}
+            radius={"xl"}
+            onClick={close}
+          >
+            <Text c={"white"}>Batal</Text>
           </Button>
         </Stack>
       </Drawer>
 
       <Modal
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={openDel}
         onClose={() => {
           setOpenDel(false);
@@ -181,6 +196,12 @@ export default function ComponentForum_V2_CardMoreButton({
       </Modal>
 
       <Modal
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={openStatusClose}
         onClose={() => setOpenStatusClose(false)}
         centered
@@ -199,7 +220,7 @@ export default function ComponentForum_V2_CardMoreButton({
         />
       </Modal>
 
-      <ActionIcon variant="transparent" onClick={() => open()}>
+      <ActionIcon c="white" variant="transparent" onClick={() => open()}>
         <IconDots size={20} />
       </ActionIcon>
     </>
@@ -237,7 +258,6 @@ function ButtonDelete({
             data: hapusData,
           })
         );
-
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
       }
@@ -246,7 +266,9 @@ function ButtonDelete({
   return (
     <>
       <Stack>
-        <Title order={6}>Yakin menghapus posting ini ?</Title>
+        <Title order={6} color="white">
+          Yakin menghapus posting ini ?
+        </Title>
         <Group position="center">
           <Button radius={"xl"} onClick={() => setOpenDel(false)}>
             Batal
@@ -334,8 +356,6 @@ function ButtonStatus({
         },
       };
 
-      console.log(updateDetail);
-
       mqtt_client.publish(
         "Forum_detail_ganti_status",
         JSON.stringify({
@@ -395,8 +415,6 @@ function ButtonStatus({
         },
       };
 
-      console.log(updateDetail.ForumMaster_StatusPosting);
-
       mqtt_client.publish(
         "Forum_detail_ganti_status",
         JSON.stringify({
@@ -413,9 +431,13 @@ function ButtonStatus({
     <>
       <Stack>
         {statusId === 1 ? (
-          <Title order={6}>Yakin menutup forum ini ?</Title>
+          <Title color={"white"} order={6}>
+            Yakin menutup forum ini ?
+          </Title>
         ) : (
-          <Title order={6}>Yakin membuka forum ini ?</Title>
+          <Title color={"white"} order={6}>
+            Yakin membuka forum ini ?
+          </Title>
         )}
         <Group position="center">
           <Button radius={"xl"} onClick={() => setOpenStatus(false)}>