Perbaikan UI pada Forum

# style:
- Tampilan keseluruhan forum di ganti menguikuti UI
## No Issue

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/detail/main-detail/[id]/page.tsx

@@ -1,5 +1,5 @@
-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";
@@ -11,13 +11,13 @@ export default async function Page({ params }: { params: { id: string } }) {
 
   const userLoginId = await user_getOneUserId();
   const dataPosting = await forum_getOnePostingById(postingId);
-  const listKomentar = await forum_getKomentarById(postingId);
+  const listKomentar = await forum_funGetAllKomentarById(postingId);
 
   dataPosting?.isActive === false && redirect(RouterForum.beranda);
 
   return (
     <>
-      <Forum_Detail
+      <Forum_MainDetail
         dataPosting={dataPosting as any}
         listKomentar={listKomentar as any}
         userLoginId={userLoginId}

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/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/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]/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]/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/emotion.tsx

@@ -1,11 +1,9 @@
 "use client";
-import AppNotif from "@/app_modules/notif";
 // import './globals.css'
 import { CacheProvider } from "@emotion/react";
-import { Image, MantineProvider, useEmotionCache } from "@mantine/core";
+import { MantineProvider, 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({

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/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

@@ -6,8 +6,9 @@ import ComponentAdminDonasi_TombolKembali from "@/app_modules/admin/donasi/compo
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import {
+  MODEL_FORUM_KOMENTAR,
   MODEL_FORUM_MASTER_REPORT,
-  MODEL_FORUM_REPORT,
+  MODEL_FORUM_REPORT_POSTING,
 } from "@/app_modules/forum/model/interface";
 import {
   Badge,
@@ -41,22 +42,38 @@ import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
 import { adminForum_getListReportKomentarbyId } from "../fun/get/get_list_report_komentar_by_id";
 import ComponentAdminGlobal_BackButton from "../../component_global/back_button";
+import ComponentAdminForum_ViewOneDetailKomentar from "../component/detail_one_komentar";
+import adminForum_funGetOneKomentarById from "../fun/get/get_one_komentar_by_id";
+import mqtt_client from "@/util/mqtt_client";
+import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
 
 export default function AdminForum_HasilReportKomentar({
   komentarId,
   listReport,
+  dataKomentar,
 }: {
   komentarId: string;
   listReport: any;
+  dataKomentar: MODEL_FORUM_KOMENTAR;
 }) {
+  const [data, setData] = useState(dataKomentar);
+  console.log(komentarId);
+
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Forum: Hasil Report Komentar" />
         <Group position="apart">
           <ComponentAdminGlobal_BackButton />
-          <ButtonDeleteKomentar komentarId={komentarId} />
+          <ButtonDeleteKomentar
+            komentarId={komentarId}
+            data={data}
+            onSuccess={(val) => {
+              setData(val);
+            }}
+          />
         </Group>
+        <ComponentAdminForum_ViewOneDetailKomentar dataKomentar={data} />
         <HasilReportPosting listReport={listReport} komentarId={komentarId} />
         {/* <pre>{JSON.stringify(listReport, null, 2)}</pre> */}
       </Stack>
@@ -64,23 +81,56 @@ export default function AdminForum_HasilReportKomentar({
   );
 }
 
-function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
+function ButtonDeleteKomentar({
+  komentarId,
+  data,
+  onSuccess,
+}: {
+  komentarId: string;
+  data: MODEL_FORUM_KOMENTAR;
+  onSuccess: (val: any) => void;
+}) {
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
   const [loadingDel2, setLoadingDel2] = useState(false);
 
   async function onDelete() {
-    await adminForum_funDeleteKomentarById(komentarId).then((res) => {
+    await adminForum_funDeleteKomentarById(komentarId).then(async (res) => {
       if (res.status === 200) {
         setLoadingDel2(false);
         close();
-        router.back();
+
+        const dataKomentar = await adminForum_funGetOneKomentarById({
+          komentarId: komentarId,
+        });
+        onSuccess(dataKomentar);
+
+        const dataNotif = {
+          appId: data.id,
+          status: "Report Komentar",
+          userId: data.authorId,
+          pesan: data.komentar,
+          kategoriApp: "FORUM",
+          title: "Komentar anda telah di laporkan",
+        };
+
+        const notif = await adminNotifikasi_funCreateToUser({
+          data: dataNotif as any,
+        });
+        if (notif.status === 201) {
+          mqtt_client.publish(
+            "USER",
+            JSON.stringify({ userId: data.authorId, count: 1 })
+          );
+        }
+
         ComponentGlobal_NotifikasiBerhasil(res.message);
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
   }
+
   return (
     <>
       <Modal opened={opened} onClose={close} centered withCloseButton={false}>
@@ -111,17 +161,21 @@ function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
         </Stack>
       </Modal>
 
-      <Button
-        loaderPosition="center"
-        radius={"xl"}
-        color="red"
-        leftIcon={<IconTrash size={15} />}
-        onClick={() => {
-          open();
-        }}
-      >
-        Hapus Komentar
-      </Button>
+      {data.isActive ? (
+        <Button
+          loaderPosition="center"
+          radius={"xl"}
+          color="red"
+          leftIcon={<IconTrash size={15} />}
+          onClick={() => {
+            open();
+          }}
+        >
+          Hapus Komentar
+        </Button>
+      ) : (
+        ""
+      )}
     </>
   );
 }
@@ -134,7 +188,9 @@ function HasilReportPosting({
   komentarId: string;
 }) {
   const router = useRouter();
-  const [data, setData] = useState<MODEL_FORUM_REPORT[]>(listReport.data);
+  const [data, setData] = useState<MODEL_FORUM_REPORT_POSTING[]>(
+    listReport.data
+  );
   const [nPage, setNPage] = useState(listReport.nPage);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
@@ -230,7 +286,7 @@ function HasilReportPosting({
                       <Center>Username</Center>
                     </th>
                     <th>
-                      <Center>Title</Center>
+                      <Center>Kategori</Center>
                     </th>
                     <th>
                       <Center>Deskripsi</Center>

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/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/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/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/ui/ui_header_tamplate.tsx

@@ -0,0 +1,89 @@
+"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,
+  // left button
+  hideButtonLeft,
+  iconLeft,
+  routerLeft,
+  // right button
+  iconRight,
+  routerRight,
+}: {
+  title: string;
+  // 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="apart" px={"md"}>
+          <ActionIcon
+            c={"white"}
+            variant="transparent"
+            radius={"xl"}
+            onClick={() => {
+              setIsLoading(true);
+              routerLeft === undefined
+                ? router.back()
+                : router.push(routerLeft);
+            }}
+          >
+            {isLoading ? <Loader 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
+              loading={isRightLoading ? true : false}
+              variant="transparent"
+              onClick={() => {
+                setRightLoading(true);
+                router.push(routerRight);
+              }}
+            >
+              {iconRight}
+            </ActionIcon>
+          )}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/component_global/ui/ui_layout_tamplate.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { BackgroundImage, Box, Center, ScrollArea } from "@mantine/core";
+import { AccentColor, MainColor } from "../color/color_pallet";
+import ComponentGlobal_HeaderTamplate from "../header_tamplate";
+import ComponentGlobal_UI_HeaderTamplate from "./ui_header_tamplate";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+
+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"}
+        pos={"sticky"}
+      >
+        {/* Header */}
+        {header ? (
+          <Box
+            h={"8vh"}
+            style={{
+              zIndex: 98,
+            }}
+            w={"100%"}
+            pos={"sticky"}
+            top={0}
+          >
+            {header}
+          </Box>
+        ) : (
+          ""
+        )}
+
+        {/* Children */}
+        <Box h={footer ? "82vh" : "92vh"} pos={"static"}>
+          <ScrollArea h={"100%"} px={"md"}>
+            {/* {Array.from({ length: 100 }).map((e, i) => (
+              <Box bg={"blue"} key={i} mb={"md"}>
+                {i + 1}
+              </Box>
+            ))} */}
+            {children}
+          </ScrollArea>
+        </Box>
+
+        {/* Footer */}
+        {footer ? (
+          <Box
+            style={{
+              zIndex: 99,
+              borderRadius: "20px 20px 0px 0px",
+              borderTop: `1px solid ${AccentColor.blue}`,
+            }}
+            bg={MainColor.darkblue}
+            w={"100%"}
+            color="blue"
+            pos={"fixed"}
+            bottom={0}
+            h={"10vh"}
+          >
+            {footer}
+          </Box>
+        ) : (
+          ""
+        )}
+      </BackgroundImage>
+    </>
+  );
+}

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,119 @@
+"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";
+
+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);
+      onSetKomentar(loadKomentar);
+
+      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
+            }
+            loaderPosition="center"
+            loading={loading ? true : false}
+            radius={"xl"}
+            onClick={() => onComment()}
+          >
+            Balas
+          </Button>
+        </Group>
+        <Divider />
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,82 @@
+"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";
+
+export default function ComponentForum_ListKomentarView({
+  listKomentar,
+  setKomentar,
+  postingId,
+  userLoginId,
+}: {
+  listKomentar: MODEL_FORUM_KOMENTAR[];
+  setKomentar: any;
+  postingId: string;
+  userLoginId: string;
+}) {
+  return (
+    <>
+      <Stack>
+        {_.isEmpty(listKomentar) ? (
+          <Center>
+            <Text fw={"bold"} fz={"xs"} c={"gray"}>
+              Belum ada komentar
+            </Text>
+          </Center>
+        ) : (
+          <Box>
+            <Center>
+              <Text fz={"xs"} c={"gray"}>
+                {" "}
+                Komentar
+              </Text>
+            </Center>
+            {listKomentar.map((e, i) => (
+              <Card key={i} mt={"xs"}>
+                <Card.Section>
+                  <ComponentForum_KomentarAuthorNameOnHeader
+                    authorName={e?.Author?.Profile?.name}
+                    imagesId={e?.Author?.Profile?.imagesId}
+                    tglPublish={e?.createdAt}
+                    userId={e?.Author?.id}
+                    komentarId={e?.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}>
+                      {e.komentar ? (
+                        <Spoiler
+                          hideLabel="sembunyikan"
+                          maxHeight={100}
+                          showLabel="tampilkan"
+                        >
+                          <div
+                            dangerouslySetInnerHTML={{ __html: e.komentar }}
+                          />
+                        </Spoiler>
+                      ) : (
+                        ""
+                      )}
+                    </Text>
+                  </Stack>
+                </Card.Section>
+                <Card.Section>
+                  <Stack>
+                    <Divider />
+                  </Stack>
+                </Card.Section>
+              </Card>
+            ))}
+          </Box>
+        )}
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,81 @@
+"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";
+
+export default function ComponentForum_DetailForumView({
+  data,
+  totalKomentar,
+  userLoginId,
+  onLoadData,
+}: {
+  data: MODEL_FORUM_POSTING;
+  totalKomentar: number;
+  userLoginId: string;
+  onLoadData: (val: any) => void;
+}) {
+  return (
+    <>
+      <Card style={{ position: "relative", width: "100%" }}>
+        {/* <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 }} py={"sm"}>
+          <Stack spacing={"xs"}>
+            <Text fz={"sm"}>
+              {data?.diskusi ? (
+                <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
+              ) : (
+                ""
+              )}
+            </Text>
+          </Stack>
+        </Card.Section>
+
+        {/* FOOTER */}
+        <Card.Section>
+          <Stack>
+            <Group position="apart">
+              <Group spacing={"xs"}>
+                {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
+                  <IconMessageCircle color="gray" size={25} />
+                ) : (
+                  <IconMessageCircleX color="gray" size={25} />
+                )}
+                <Text c={"gray"}>{totalKomentar}</Text>
+              </Group>
+              <Group>
+                <Text c={"gray"} fz={"sm"}>
+                  {new Date(data?.createdAt).toLocaleTimeString()}
+                  {/* {new Intl.RelativeTimeFormat("id", {style: "short"}).format(-1,"day")} */}
+                </Text>
+                <Text c={"gray"} 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,50 @@
 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";
 
-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();
 
@@ -177,8 +172,12 @@ export default function ComponentForum_BerandaButtonMore({
         <ButtonDelete
           postingId={postingId}
           setOpenDel={setOpenDel}
-          setData={setData}
+          onLoadData={(val) => {
+            onLoadData(val);
+          }}
+          allData={allData}
         />
+        {/* <pre>{JSON.stringify(allData, null, 2)}</pre> */}
       </Modal>
 
       <Modal
@@ -191,13 +190,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 +209,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,14 +223,22 @@ 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);
       }
     });
   }
@@ -259,16 +271,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,48 +294,116 @@ 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",
+        },
+      };
+
+      console.log(updateDetail.ForumMaster_StatusPosting);
+
+      mqtt_client.publish(
+        "Forum_detail_ganti_status",
+        JSON.stringify({
+          id: postingId,
+          data: updateDetail.ForumMaster_StatusPosting,
+        })
+      );
+    } else {
+      ComponentGlobal_NotifikasiGagal(updateStatusOpen.message);
+    }
   }
 
   return (

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

@@ -0,0 +1,88 @@
+"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 (
+    <>
+      {/* <pre>{JSON.stringify(data, null,2)}</pre> */}
+      <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,

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

@@ -30,7 +30,7 @@ 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";
 
 export default function ComponentForum_KomentarButtonMore({
   userId,
@@ -178,7 +178,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);

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}
@@ -77,6 +85,22 @@ export default function ComponentForum_V2_CardMoreButton({
             ""
           ) : (
             <Stack>
+              <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>
               <Grid
                 onClick={() => {
                   close();
@@ -112,23 +136,6 @@ 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>
           )}
 
@@ -199,7 +206,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 +244,6 @@ function ButtonDelete({
             data: hapusData,
           })
         );
-
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
       }

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

@@ -6,9 +6,13 @@ 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_V2_HeaderCard from "./card_header";
+import ComponentForum_BerandaHeaderCard from "./card_header";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
-export default function ComponentForum_V2_MainCardView({
+export default function ComponentForum_BerandaCardView({
   data,
   userLoginId,
   onLoadData,
@@ -27,10 +31,18 @@ export default function ComponentForum_V2_MainCardView({
 
   return (
     <>
-    {/* <pre>{JSON.stringify(data, null,2)}</pre> */}
-      <Card mb={"md"}>
+      {/* <pre>{JSON.stringify(data, null,2)}</pre> */}
+      <Card
+        mb={"md"}
+        p={"xl"}
+        bg={MainColor.darkblue}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+        }}
+        radius={"md"}
+      >
         <Card.Section>
-          <ComponentForum_V2_HeaderCard
+          <ComponentForum_BerandaHeaderCard
             data={data}
             isMoreButton={true}
             userLoginId={userLoginId}
@@ -46,7 +58,7 @@ export default function ComponentForum_V2_MainCardView({
             router.push(RouterForum.main_detail + data?.id);
           }}
         >
-          <Text fz={"sm"} lineClamp={4}>
+          <Text c="white" fz={"sm"} lineClamp={4}>
             <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
           </Text>
         </Card.Section>
@@ -58,16 +70,9 @@ export default function ComponentForum_V2_MainCardView({
                 loading={loadingKomen && data?.id === postingId ? true : false}
                 variant="transparent"
                 sx={{ zIndex: 1 }}
-                // onClick={() => {
-                //   setPostingId(data?.id),
-                //     (data?.ForumMaster_StatusPosting.id as any) === 1
-                //       ? (router.push(RouterForum.komentar + data?.id),
-                //         setLoadingKomen(true))
-                //       : router.push(RouterForum.main_detail + data?.id);
-                // }}
               >
                 {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-                  <IconMessageCircle color="gray" size={25} />
+                  <IconMessageCircle color="white" size={25} />
                 ) : (
                   <IconMessageCircleX color="gray" size={25} />
                 )}
@@ -75,9 +80,8 @@ export default function ComponentForum_V2_MainCardView({
 
               {/* <TotalKomentar postingId={e?.id} /> */}
 
-              <Text c={"gray"}>{data?.Forum_Komentar.length}</Text>
+              <Text color={(data?.ForumMaster_StatusPosting?.id as any) === 1 ? "white" :"gray"}>{data?.Forum_Komentar.length}</Text>
             </Group>
-            <Divider />
           </Stack>
         </Card.Section>
       </Card>

src/app_modules/forum/component/more_button/posting_button_more.tsx

@@ -38,7 +38,7 @@ import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 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 { forum_getAllPostingByAuhtorId } from "../../fun/get/get_list_posting_by_author_id";
 
 export default function ComponentForum_PostingButtonMore({
   authorId,
@@ -277,7 +277,7 @@ function ButtonStatus({
       async (res) => {
         if (res.status === 200) {
           if (userLoginId === authorId) {
-            await forum_getListPostingByAuhtorId(authorId).then((val: any) =>
+            await forum_getAllPostingByAuhtorId({authorId: authorId, page: 1}).then((val: any) =>
               setData(val)
             );
           } else {
@@ -299,7 +299,7 @@ function ButtonStatus({
       async (res) => {
         if (res.status === 200) {
           if (userLoginId === authorId) {
-            await forum_getListPostingByAuhtorId(authorId).then((val: any) =>
+            await forum_getAllPostingByAuhtorId({authorId: authorId, page: 1}).then((val: any) =>
               setData(val)
             );
           } else {

src/app_modules/forum/create/index.tsx

@@ -36,6 +36,10 @@ const ReactQuill = dynamic(
 );
 
 import mqtt_client from "@/util/mqtt_client";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function Forum_Create() {
   const [value, setValue] = useState("");
@@ -95,8 +99,10 @@ function ButtonAction({ value }: { value: string }) {
       ComponentGlobal_NotifikasiBerhasil(create.message);
       setTimeout(() => router.back(), 1000);
 
-      mqtt_client.publish("Forum_create_new", JSON.stringify({isNewPost: true, count: 1 }));
-
+      mqtt_client.publish(
+        "Forum_create_new",
+        JSON.stringify({ isNewPost: true, count: 1 })
+      );
     } else {
       ComponentGlobal_NotifikasiGagal(create.message);
     }
@@ -106,7 +112,12 @@ function ButtonAction({ value }: { value: string }) {
       <Button
         style={{
           transition: "0.5s",
+          border:
+            value === "<p><br></p>" || value === "" || value.length > 500
+              ? ""
+              : `1px solid ${AccentColor.yellow}`,
         }}
+        bg={MainColor.yellow}
         disabled={
           value === "<p><br></p>" || value === "" || value.length > 500
             ? true

src/app_modules/forum/create/layout.tsx

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export default function LayoutForum_Create({
   children,
@@ -12,9 +14,16 @@ export default function LayoutForum_Create({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentForum_HeaderTamplate title="Tambah Postingan" />}>
+    <ComponentGlobal_UI_LayoutTamplate
+    header={<ComponentGlobal_UI_HeaderTamplate title="Tambah Postingan"/>}
+    >
+      {children}
+    </ComponentGlobal_UI_LayoutTamplate>
+
+
+      {/* <AppComponentGlobal_LayoutTamplate header={<ComponentForum_HeaderTamplate title="Tambah Postingan" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </AppComponentGlobal_LayoutTamplate> */}
     </>
   );
 }

src/app_modules/forum/detail/detail_report_komentar.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
+import {
+  Box,
+  Center,
+  Group,
+  List,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
+import { useState } from "react";
+
+export default function Forum_DetailReportKomentar({
+  dataKomentar,
+}: {
+  dataKomentar: any;
+}) {
+  return (
+    <>
+      <AppComponentGlobal_LayoutTamplate
+        header={<ComponentForum_HeaderTamplate title="Report Komentar" />}
+      >
+        {<View dataKomentar={dataKomentar} />}
+      </AppComponentGlobal_LayoutTamplate>
+    </>
+  );
+}
+
+function View({ dataKomentar }: { dataKomentar: any }) {
+  const [data, setData] = useState<MODEL_FORUM_KOMENTAR>(dataKomentar.data);
+  const [list, setList] = useState<any[]>(dataKomentar.list);
+  return (
+    <>
+      <Stack>
+        <Text fw={"bold"} align="center" mb={"lg"}>
+          Komentar anda telah dihapus dari sebuah postingan oleh ADMIN, karena
+          memiliki beberapa laporan dari pengguna lain !
+        </Text>
+
+        <Stack spacing={"xs"}>
+          <Text fw={"bold"}>Komentar anda</Text>
+          <Paper withBorder p={"sm"}>
+            <Text>
+              <div dangerouslySetInnerHTML={{ __html: data.komentar }} />
+            </Text>
+          </Paper>
+        </Stack>
+
+        <Stack spacing={"xs"}>
+          <Text fw={"bold"}>
+            Pada postingan : {data.Forum_Posting.Author.username}
+          </Text>
+          <Paper withBorder p={"sm"}>
+            <Text>
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: data.Forum_Posting.diskusi,
+                }}
+              />
+            </Text>
+          </Paper>
+        </Stack>
+        <Stack spacing={"xs"}>
+          <Text fw={"bold"}>Laporan yang diterima :</Text>
+          <List withPadding>
+            {list.map((x, i) => (
+              <List.Item key={i}>{x}</List.Item>
+            ))}
+          </List>
+        </Stack>
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/detail/detail_report_posting.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
+import { List, Paper, Stack, Text } from "@mantine/core";
+import { MODEL_FORUM_POSTING } from "../model/interface";
+import { useState } from "react";
+
+export default function Forum_DetailReportPosting({
+  dataPosting,
+}: {
+  dataPosting: any;
+}) {
+  return (
+    <>
+      <AppComponentGlobal_LayoutTamplate
+        header={<ComponentForum_HeaderTamplate title="Report Posting" />}
+      >
+        <View dataPosting={dataPosting} />
+      </AppComponentGlobal_LayoutTamplate>
+    </>
+  );
+}
+
+function View({ dataPosting }: { dataPosting: any }) {
+  const [data, setData] = useState<MODEL_FORUM_POSTING>(dataPosting.data);
+  const [list, setList] = useState<any[]>(dataPosting.list);
+
+  return (
+    <>
+      <Stack>
+        <Text fw={"bold"} align="center" mb={"lg"}>
+          Postingan anda telah dihapus dari beranda oleh ADMIN, karena memiliki
+          beberapa laporan dari pengguna lain !
+        </Text>
+
+        <Stack spacing={"xs"}>
+          <Text fw={"bold"}>Pada postingan</Text>
+          <Paper withBorder p={"sm"}>
+            <Text>
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: data.diskusi,
+                }}
+              />
+            </Text>
+          </Paper>
+        </Stack>
+
+        <Stack spacing={"xs"}>
+          <Text fw={"bold"}>Laporan yang diterima :</Text>
+          <List withPadding>
+            {list.map((x, i) => (
+              <List.Item key={i}>{x}</List.Item>
+            ))}
+          </List>
+        </Stack>
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/detail/index.tsx

@@ -1,376 +0,0 @@
-"use client";
-
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import {
-  ActionIcon,
-  Box,
-  Button,
-  Card,
-  Center,
-  Divider,
-  Group,
-  Paper,
-  Spoiler,
-  Stack,
-  Text,
-} from "@mantine/core";
-import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
-import ComponentForum_PostingAuthorNameOnHeader from "../component/header/posting_author_header_name";
-import ComponentForum_DetailOnHeaderAuthorName from "../component/header/detail_author_header_name";
-import { useRouter } from "next/navigation";
-import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
-import ComponentForum_KomentarAuthorNameOnHeader from "../component/header/komentar_author_header_name";
-import _ from "lodash";
-
-import dynamic from "next/dynamic";
-import React, { useState } from "react";
-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 { forum_funCreateKomentar } from "../fun/create/fun_create_komentar";
-const ReactQuill = dynamic(
-  () => {
-    return import("react-quill");
-  },
-  { ssr: false }
-);
-import "react-quill/dist/quill.bubble.css";
-import { forum_getKomentarById } from "../fun/get/get_komentar_by_id";
-import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
-import ComponentForum_DetailHeader from "../component/detail_component/detail_header";
-import { useShallowEffect } from "@mantine/hooks";
-import mqtt_client from "@/util/mqtt_client";
-import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
-import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
-
-export default function Forum_Detail({
-  dataPosting,
-  listKomentar,
-  userLoginId,
-}: {
-  dataPosting: MODEL_FORUM_POSTING;
-  listKomentar: MODEL_FORUM_KOMENTAR[];
-  userLoginId: string;
-}) {
-  const [data, setData] = useState(dataPosting);
-  const [komentar, setKomentar] = useState(listKomentar);
-
-  // useShallowEffect(() => {
-  //   onLoadKomentar({
-  //     onLoad(val) {
-  //       setKomentar(val);
-  //     },
-  //   });
-  // }, [setKomentar]);
-
-  // async function onLoadKomentar({ onLoad }: { onLoad: (val: any) => void }) {
-  //   const loadKomentar = await forum_getKomentarById(data.id);
-  //   onLoad(loadKomentar);
-  // }
-
-  useShallowEffect(() => {
-    mqtt_client.subscribe("Forum_detail_ganti_status");
-
-    mqtt_client.on("message", (topic: any, message: any) => {
-      const newData = JSON.parse(message.toString());
-      if (newData.id === data.id) {
-        const cloneData = _.clone(data);
-
-        // console.log(newData.data);
-        const updateData = {
-          ...cloneData,
-          ForumMaster_StatusPosting: {
-            id: newData.data.id,
-            status: newData.data.status,
-          },
-        };
-
-        setData(updateData as any);
-      }
-    });
-  }, [data]);
-
-  return (
-    <>
-      <Stack px={"xs"}>
-        <ForumView
-          data={data}
-          totalKomentar={komentar.length}
-          userLoginId={userLoginId}
-          onLoadData={(val) => {
-            setData(val);
-          }}
-        />
-        {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-          <CreateKomentar
-            postingId={dataPosting?.id}
-            onSetKomentar={(val) => {
-              setKomentar(val);
-            }}
-            data={data}
-            userLoginId={userLoginId}
-          />
-        ) : (
-          ""
-        )}
-        <KomentarView
-          listKomentar={komentar}
-          setKomentar={setKomentar}
-          postingId={data?.id}
-          userLoginId={userLoginId}
-        />
-      </Stack>
-    </>
-  );
-}
-
-function ForumView({
-  data,
-  totalKomentar,
-  userLoginId,
-  onLoadData,
-}: {
-  data: MODEL_FORUM_POSTING;
-  totalKomentar: number;
-  userLoginId: string;
-  onLoadData: (val: any) => void;
-}) {
-  return (
-    <>
-      <Card style={{ position: "relative", width: "100%" }}>
-        {/* <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 }} py={"sm"}>
-          <Stack spacing={"xs"}>
-            <Text fz={"sm"}>
-              {data?.diskusi ? (
-                <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
-              ) : (
-                ""
-              )}
-            </Text>
-          </Stack>
-        </Card.Section>
-
-        {/* FOOTER */}
-        <Card.Section>
-          <Stack>
-            <Group position="apart">
-              <Group spacing={"xs"}>
-                {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-                  <IconMessageCircle color="gray" size={25} />
-                ) : (
-                  <IconMessageCircleX color="gray" size={25} />
-                )}
-                <Text c={"gray"}>{totalKomentar}</Text>
-              </Group>
-              <Group>
-                <Text c={"gray"} fz={"sm"}>
-                  {new Date(data?.createdAt).toLocaleTimeString()}
-                  {/* {new Intl.RelativeTimeFormat("id", {style: "short"}).format(-1,"day")} */}
-                </Text>
-                <Text c={"gray"} fz={"sm"}>
-                  {data?.createdAt
-                    ? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
-                        dateStyle: "medium",
-                      })
-                    : new Date().toLocaleDateString(["id-ID"], {
-                        dateStyle: "medium",
-                      })}
-                </Text>
-              </Group>
-            </Group>
-            <Divider />
-          </Stack>
-        </Card.Section>
-      </Card>
-    </>
-  );
-}
-
-function CreateKomentar({
-  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_getKomentarById(data.id);
-      onSetKomentar(loadKomentar);
-
-      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
-            }
-            loaderPosition="center"
-            loading={loading ? true : false}
-            radius={"xl"}
-            onClick={() => onComment()}
-          >
-            Balas
-          </Button>
-        </Group>
-        <Divider />
-      </Stack>
-    </>
-  );
-}
-
-function KomentarView({
-  listKomentar,
-  setKomentar,
-  postingId,
-  userLoginId,
-}: {
-  listKomentar: MODEL_FORUM_KOMENTAR[];
-  setKomentar: any;
-  postingId: string;
-  userLoginId: string;
-}) {
-  return (
-    <>
-      <Stack>
-        {_.isEmpty(listKomentar) ? (
-          <Center>
-            <Text fw={"bold"} fz={"xs"} c={"gray"}>
-              Belum ada komentar
-            </Text>
-          </Center>
-        ) : (
-          <Box>
-            <Center>
-              <Text fz={"xs"} c={"gray"}>
-                {" "}
-                Komentar
-              </Text>
-            </Center>
-            {listKomentar.map((e, i) => (
-              <Card key={i} mt={"xs"}>
-                <Card.Section>
-                  <ComponentForum_KomentarAuthorNameOnHeader
-                    authorName={e?.Author?.Profile?.name}
-                    imagesId={e?.Author?.Profile?.imagesId}
-                    tglPublish={e?.createdAt}
-                    userId={e?.Author?.id}
-                    komentarId={e?.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}>
-                      {e.komentar ? (
-                        <Spoiler
-                          hideLabel="sembunyikan"
-                          maxHeight={100}
-                          showLabel="tampilkan"
-                        >
-                          <div
-                            dangerouslySetInnerHTML={{ __html: e.komentar }}
-                          />
-                        </Spoiler>
-                      ) : (
-                        ""
-                      )}
-                    </Text>
-                  </Stack>
-                </Card.Section>
-                <Card.Section>
-                  <Stack>
-                    <Divider />
-                  </Stack>
-                </Card.Section>
-              </Card>
-            ))}
-          </Box>
-        )}
-      </Stack>
-    </>
-  );
-}

src/app_modules/forum/detail/main_detail.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import {
+  Stack
+} from "@mantine/core";
+import _ from "lodash";
+import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
+
+import mqtt_client from "@/util/mqtt_client";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import "react-quill/dist/quill.bubble.css";
+import ComponentForum_DetailCreateKomentar from "../component/detail_component/detail_create_komentar";
+import ComponentForum_ListKomentarView from "../component/detail_component/detail_list_komentar";
+import ComponentForum_DetailForumView from "../component/detail_component/detail_view";
+
+
+export default function Forum_MainDetail({
+  dataPosting,
+  listKomentar,
+  userLoginId,
+}: {
+  dataPosting: MODEL_FORUM_POSTING;
+  listKomentar: MODEL_FORUM_KOMENTAR[];
+  userLoginId: string;
+}) {
+  const [data, setData] = useState(dataPosting);
+  const [komentar, setKomentar] = useState(listKomentar);
+
+  // useShallowEffect(() => {
+  //   onLoadKomentar({
+  //     onLoad(val) {
+  //       setKomentar(val);
+  //     },
+  //   });
+  // }, [setKomentar]);
+
+  // async function onLoadKomentar({ onLoad }: { onLoad: (val: any) => void }) {
+  //   const loadKomentar = await forum_getKomentarById(data.id);
+  //   onLoad(loadKomentar);
+  // }
+
+  useShallowEffect(() => {
+    mqtt_client.subscribe("Forum_detail_ganti_status");
+
+    mqtt_client.on("message", (topic: any, message: any) => {
+      const newData = JSON.parse(message.toString());
+      if (newData.id === data.id) {
+        const cloneData = _.clone(data);
+
+        // console.log(newData.data);
+        const updateData = {
+          ...cloneData,
+          ForumMaster_StatusPosting: {
+            id: newData.data.id,
+            status: newData.data.status,
+          },
+        };
+
+        setData(updateData as any);
+      }
+    });
+  }, [data]);
+
+  return (
+    <>
+      <Stack px={"xs"}>
+        <ComponentForum_DetailForumView
+          data={data}
+          totalKomentar={komentar.length}
+          userLoginId={userLoginId}
+          onLoadData={(val) => {
+            setData(val);
+          }}
+        />
+
+        {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
+          <ComponentForum_DetailCreateKomentar
+            postingId={dataPosting?.id}
+            onSetKomentar={(val) => {
+              setKomentar(val);
+            }}
+            data={data}
+            userLoginId={userLoginId}
+          />
+        ) : (
+          ""
+        )}
+
+        <ComponentForum_ListKomentarView
+          listKomentar={komentar}
+          setKomentar={setKomentar}
+          postingId={data?.id}
+          userLoginId={userLoginId}
+        />
+        
+      </Stack>
+    </>
+  );
+}
+
+
+
+
+
+

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

@@ -26,6 +26,10 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_glob
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 const ReactQuill = dynamic(
   () => {
     return import("react-quill");
@@ -114,6 +118,17 @@ function ButtonAction({
   return (
     <>
       <Button
+        style={{
+          transition: "0.5s",
+          border:
+            diskusi === "<p><br></p>" || diskusi === "" || diskusi.length > 500
+              ? ""
+              : `1px solid ${AccentColor.yellow}`,
+          backgroundColor:
+            diskusi === "<p><br></p>" || diskusi === "" || diskusi.length > 500
+              ? ""
+              : MainColor.yellow,
+        }}
         disabled={
           diskusi === "<p><br></p>" || diskusi === "" || diskusi.length > 500
             ? true
@@ -122,9 +137,6 @@ function ButtonAction({
         loaderPosition="center"
         loading={loading ? true : false}
         radius={"xl"}
-        style={{
-          transition: "0.5s",
-        }}
         onClick={() => {
           onUpdate();
         }}

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

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentForum_HeaderTamplate from "../../component/header/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export default function LayoutForum_EditPosting({
   children,
@@ -12,11 +14,17 @@ export default function LayoutForum_EditPosting({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Edit Postingan" />}
+      >
+        {children}
+      </ComponentGlobal_UI_LayoutTamplate>
+
+      {/* <AppComponentGlobal_LayoutTamplate
         header={<ComponentForum_HeaderTamplate title="Edit Postingan" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </AppComponentGlobal_LayoutTamplate> */}
     </>
   );
 }

src/app_modules/forum/forumku/forum_profile.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import {
+  Center,
+  Avatar,
+  Stack,
+  Button,
+  Divider,
+  Grid,
+  Text,
+} from "@mantine/core";
+import { IconCircleFilled } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+import { useState } from "react";
+
+export default function ComponentForum_ViewForumProfile({
+  auhtorSelectedData,
+  totalPosting,
+}: {
+  auhtorSelectedData: MODEL_USER;
+  totalPosting: number;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  // if (loading) return <ComponentGlobal_V2_LoadingPage />;
+
+  return (
+    <>
+      <Center>
+        <Avatar
+          radius={"100%"}
+          sx={{
+            borderStyle: "solid",
+            borderWidth: "0.5px",
+            borderColor: "black",
+          }}
+          size={100}
+          alt="foto"
+          src={
+            RouterProfile.api_foto_profile +
+            auhtorSelectedData?.Profile?.imagesId
+          }
+        />
+      </Center>
+      <Grid>
+        <Grid.Col span={"auto"}>
+          <Stack spacing={0}>
+            <Text lineClamp={1} fw={"bold"} color={"white"}>
+              {auhtorSelectedData?.Profile?.name}
+            </Text>
+            <Grid gutter={"xs"}>
+              <Grid.Col span={"content"}>
+                <Text lineClamp={1} color={"white"} fz={"sm"}>
+                  {totalPosting} Posting <IconCircleFilled size={5} />
+                </Text>
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text lineClamp={1} color={"white"} fz={"sm"}>
+                  @{auhtorSelectedData?.username}
+                  {""}
+                </Text>
+              </Grid.Col>
+            </Grid>
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={5}>
+          <Stack align="center" justify="center" h={"100%"}>
+            <Button
+              style={{
+                border: `1px solid ${AccentColor.yellow}`,
+                backgroundColor: MainColor.yellow,
+              }}
+              c="white"
+              loaderPosition="center"
+              loading={loading ? true : false}
+              radius={"xl"}
+              variant="outline"
+              onClick={() => {
+                setLoading(true);
+                router.push(
+                  RouterProfile.katalog + auhtorSelectedData?.Profile?.id
+                );
+              }}
+            >
+              Kunjungi Profile
+            </Button>
+          </Stack>
+        </Grid.Col>
+      </Grid>
+    </>
+  );
+}

src/app_modules/forum/forumku/index.tsx

@@ -1,28 +1,28 @@
 "use client";
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
   ActionIcon,
   Affix,
-  Avatar,
-  Button,
   Center,
-  Divider,
-  Grid,
+  Loader,
   Stack,
   Text,
   rem,
 } from "@mantine/core";
 import { useWindowScroll } from "@mantine/hooks";
-import { IconCircleFilled, IconPencilPlus } from "@tabler/icons-react";
+import { IconPencilPlus, IconSearchOff } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentForum_MainCardView from "../component/main_card_view";
 import { MODEL_FORUM_POSTING } from "../model/interface";
+import ComponentForum_ViewForumProfile from "./forum_profile";
+import ComponentForum_PostinganPribadi from "./postingan_pribadi";
+import { ScrollOnly } from "next-scroll-loader";
+import { forum_getAllPostingByAuhtorId } from "../fun/get/get_list_posting_by_author_id";
+import ComponentForum_ForumkuMainCardView from "../component/forumku_component/forumku_view";
+import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
 
 export default function Forum_Forumku({
   auhtorSelectedData,
@@ -36,6 +36,9 @@ export default function Forum_Forumku({
   userLoginId: string;
 }) {
   const router = useRouter();
+  const [data, setData] = useState(dataPosting);
+  const [activePage, setActivePage] = useState(1);
+
   const [scroll, scrollTo] = useWindowScroll();
   const [loadingCreate, setLoadingCreate] = useState(false);
 
@@ -44,21 +47,25 @@ export default function Forum_Forumku({
       {userLoginId === auhtorSelectedData.id ? (
         <Affix position={{ bottom: rem(100), right: rem(30) }}>
           <ActionIcon
-            loading={loadingCreate ? true : false}
             opacity={scroll.y > 0 ? 0.5 : ""}
             style={{
               transition: "0.5s",
+              border: `1px solid ${AccentColor.skyblue}`,
             }}
             size={"xl"}
             radius={"xl"}
             variant="transparent"
-            bg={"blue"}
+            bg={AccentColor.blue}
             onClick={() => {
               setLoadingCreate(true);
               router.push(RouterForum.create);
             }}
           >
-            <IconPencilPlus color="white" />
+            {loadingCreate ? (
+              <Loader size={25} />
+            ) : (
+              <IconPencilPlus color="white" />
+            )}
           </ActionIcon>
         </Affix>
       ) : (
@@ -66,171 +73,54 @@ export default function Forum_Forumku({
       )}
 
       <Stack spacing={"xl"} px={"sm"}>
-        <ForumProfile
+        <ComponentForum_ViewForumProfile
           auhtorSelectedData={auhtorSelectedData}
           totalPosting={totalPosting}
         />
-        {_.isEmpty(dataPosting) ? (
-          <Center>
-            <Text fw={"bold"} fz={"xs"} c={"gray"}>
-              Belum ada posting
-            </Text>
-          </Center>
+
+        {_.isEmpty(data) ? (
+          <Stack align="center" justify="center" h={"80vh"}>
+            <IconSearchOff size={80} color="white" />
+            <Stack spacing={0} align="center">
+              <Text c={"white"} fw={"bold"} fz={"xs"}>
+                Tidak ada data
+              </Text>
+            </Stack>
+          </Stack>
         ) : (
-          <ForumPosting dataPosting={dataPosting} userLoginId={userLoginId} />
+          // --- Main component --- //
+          <ScrollOnly
+            height="80vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await forum_getAllPostingByAuhtorId({
+                page: activePage + 1,
+                authorId: auhtorSelectedData.id,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentForum_ForumkuMainCardView
+                data={item}
+                userLoginId={userLoginId}
+                onLoadData={(val) => {
+                  setData(val);
+                }}
+                allData={data}
+              />
+            )}
+          </ScrollOnly>
         )}
       </Stack>
     </>
   );
 }
-
-function ForumProfile({
-  auhtorSelectedData,
-  totalPosting,
-}: {
-  auhtorSelectedData: MODEL_USER;
-  totalPosting: number;
-}) {
-  const router = useRouter();
-  const [loading, setLoading] = useState(false);
-
-  // if (loading) return <ComponentGlobal_V2_LoadingPage />;
-
-  return (
-    <>
-      <Center>
-        <Avatar
-          radius={"100%"}
-          sx={{
-            borderStyle: "solid",
-            borderWidth: "0.5px",
-            borderColor: "black",
-          }}
-          size={100}
-          alt="foto"
-          src={
-            RouterProfile.api_foto_profile +
-            auhtorSelectedData?.Profile?.imagesId
-          }
-        />
-      </Center>
-      <Grid>
-        <Grid.Col span={"auto"}>
-          <Stack spacing={0}>
-            <Text lineClamp={1} fw={"bold"}>
-              {auhtorSelectedData?.Profile?.name}
-            </Text>
-            <Grid gutter={"xs"}>
-              <Grid.Col span={"content"}>
-                <Text lineClamp={1} c={"gray"} fz={"sm"}>
-                  {totalPosting} Posting <IconCircleFilled size={5} />
-                </Text>
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text lineClamp={1} c={"gray"} fz={"sm"}>
-                  @{auhtorSelectedData?.username}
-                  {""}
-                </Text>
-              </Grid.Col>
-            </Grid>
-          </Stack>
-        </Grid.Col>
-        <Grid.Col span={5}>
-          <Stack align="center" justify="center" h={"100%"}>
-            <Button
-              compact
-              loaderPosition="center"
-              loading={loading ? true : false}
-              radius={"xl"}
-              variant="outline"
-              onClick={() => {
-                setLoading(true);
-                router.push(
-                  RouterProfile.katalog + auhtorSelectedData?.Profile?.id
-                );
-              }}
-            >
-              Kunjungi Profile
-            </Button>
-          </Stack>
-        </Grid.Col>
-      </Grid>
-
-      <Divider />
-    </>
-  );
-}
-
-function ForumPosting({
-  dataPosting,
-  userLoginId,
-}: {
-  dataPosting: MODEL_FORUM_POSTING[];
-  userLoginId: any;
-}) {
-  const router = useRouter();
-  const [data, setData] = useState(dataPosting);
-  const [loadingDetail, setLoadingDetail] = useState(false);
-  const [loadingKomen, setLoadingKomen] = useState(false);
-
-  if (loadingDetail) return <ComponentGlobal_V2_LoadingPage />;
-  if (loadingKomen) return <ComponentGlobal_V2_LoadingPage />;
-  return (
-    <>
-      <ComponentForum_MainCardView
-        data={data}
-        setLoadingKomen={setLoadingKomen}
-        setLoadingDetail={setLoadingDetail}
-        userLoginId={userLoginId}
-        setData={setData}
-      />
-
-      {/* <Stack>
-        {dataPosting.map((e, i) => (
-          <Card key={i}>
-            <Card.Section>
-              <ComponentForum_PostingAuthorNameOnHeader isMoreButton={true} />
-            </Card.Section>
-            <Card.Section
-              sx={{ zIndex: 0 }}
-              p={"sm"}
-              onClick={() => {
-                // console.log("halaman forum");
-                setLoadingDetail(true);
-                router.push(RouterForum.main_detail + i);
-              }}
-            >
-              <Stack spacing={"xs"}>
-                <Text fz={"sm"} lineClamp={4}>
-                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad,
-                  vitae. Quisquam aspernatur, eius consequatur dicta repellendus
-                  facere vero recusandae deleniti voluptas quod architecto,
-                  tenetur totam excepturi rem nam iusto earum.
-                </Text>
-              </Stack>
-            </Card.Section>
-            <Card.Section>
-              <Stack>
-                <Group spacing={"xs"} px={"sm"}>
-                  <ActionIcon
-                    // loading={loadingKomen ? true : false}
-                    variant="transparent"
-                    sx={{ zIndex: 1 }}
-                    onClick={() => {
-                      setLoadingKomen(true);
-                      router.push(RouterForum.komentar + i);
-                    }}
-                  >
-                    <IconMessageCircle color="gray" size={25} />
-                  </ActionIcon>
-                  <Text c={"gray"}>1</Text>
-                </Group>
-                <Divider />
-              </Stack>
-            </Card.Section>
-          </Card>
-        ))}
-      </Stack> */}
-    </>
-  );
-}

src/app_modules/forum/forumku/layout.tsx

@@ -6,6 +6,8 @@ import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { IconX } from "@tabler/icons-react";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export default function LayoutForum_Forumku({
   children,
@@ -16,7 +18,18 @@ export default function LayoutForum_Forumku({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
+        header={
+          <ComponentGlobal_UI_HeaderTamplate
+            title={`${username}`}
+            iconLeft={<IconX />}
+          />
+        }
+      >
+        {children}
+      </ComponentGlobal_UI_LayoutTamplate>
+
+      {/* <AppComponentGlobal_LayoutTamplate
         header={
           <ComponentForum_HeaderTamplate
             title={`${username}`}
@@ -25,7 +38,7 @@ export default function LayoutForum_Forumku({
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </AppComponentGlobal_LayoutTamplate> */}
     </>
   );
 }

src/app_modules/forum/forumku/postingan_pribadi.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentForum_MainCardView from "../component/main_card_view";
+import { MODEL_FORUM_POSTING } from "../model/interface";
+import ComponentForum_ForumkuMainCardView from "../component/forumku_component/forumku_view";
+
+export default function ComponentForum_PostinganPribadi({
+  dataPosting,
+  userLoginId,
+}: {
+  dataPosting: MODEL_FORUM_POSTING[];
+  userLoginId: any;
+}) {
+  const router = useRouter();
+  const [data, setData] = useState(dataPosting);
+  const [loadingDetail, setLoadingDetail] = useState(false);
+  const [loadingKomen, setLoadingKomen] = useState(false);
+
+//   if (loadingDetail) return <ComponentGlobal_V2_LoadingPage />;
+//   if (loadingKomen) return <ComponentGlobal_V2_LoadingPage />;
+
+  return (
+    <>
+    
+
+      {/* <ComponentForum_MainCardView
+        data={data}
+        setLoadingKomen={setLoadingKomen}
+        setLoadingDetail={setLoadingDetail}
+        userLoginId={userLoginId}
+        setData={setData}
+      /> */}
+
+      {/* <Stack>
+        {dataPosting.map((e, i) => (
+          <Card key={i}>
+            <Card.Section>
+              <ComponentForum_PostingAuthorNameOnHeader isMoreButton={true} />
+            </Card.Section>
+            <Card.Section
+              sx={{ zIndex: 0 }}
+              p={"sm"}
+              onClick={() => {
+                // console.log("halaman forum");
+                setLoadingDetail(true);
+                router.push(RouterForum.main_detail + i);
+              }}
+            >
+              <Stack spacing={"xs"}>
+                <Text fz={"sm"} lineClamp={4}>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad,
+                  vitae. Quisquam aspernatur, eius consequatur dicta repellendus
+                  facere vero recusandae deleniti voluptas quod architecto,
+                  tenetur totam excepturi rem nam iusto earum.
+                </Text>
+              </Stack>
+            </Card.Section>
+            <Card.Section>
+              <Stack>
+                <Group spacing={"xs"} px={"sm"}>
+                  <ActionIcon
+                    // loading={loadingKomen ? true : false}
+                    variant="transparent"
+                    sx={{ zIndex: 1 }}
+                    onClick={() => {
+                      setLoadingKomen(true);
+                      router.push(RouterForum.komentar + i);
+                    }}
+                  >
+                    <IconMessageCircle color="gray" size={25} />
+                  </ActionIcon>
+                  <Text c={"gray"}>1</Text>
+                </Group>
+                <Divider />
+              </Stack>
+            </Card.Section>
+          </Card>
+        ))}
+      </Stack> */}
+    </>
+  );
+}

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

@@ -3,27 +3,35 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export async function forum_funCreateReportKomentar(
-  komentarId: string,
-  value: string
-) {
+export async function forum_funCreateReportKomentar({
+  komentarId,
+  kategoriId,
+}: {
+  komentarId: string;
+  kategoriId: any;
+}) {
   const authorId = await user_getOneUserId();
 
   const cekId = await prisma.forumMaster_KategoriReport.findFirst({
     where: {
-      title: value,
+      title: kategoriId,
     },
   });
 
-  const createReport = await prisma.forum_ReportKomentar.create({
-    data: {
-      userId: authorId,
-      forumMaster_KategoriReportId: cekId?.id,
-      forum_KomentarId: komentarId,
-    },
-  });
+  try {
+    const createReport = await prisma.forum_ReportKomentar.create({
+      data: {
+        userId: authorId,
+        forumMaster_KategoriReportId: cekId?.id,
+        forum_KomentarId: komentarId,
+      },
+    });
+
+    if (!createReport)
+      return { status: 400, message: "Gagal menambahkan report komentar !" };
+  } catch (error) {
+    console.log(error);
+  }
 
-  if (!createReport)
-    return { status: 400, message: "Gagal menambahkan report komentar !" };
   return { status: 201, message: "Berhasil me-report komentar !" };
 }

src/app_modules/forum/fun/forum_notifikasi/fun_create_notifikasi.tsx

@@ -0,0 +1,21 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
+
+export default async function forum_funCreateNotifikasiToAdmin({
+  data,
+}: {
+  data: MODEL_NOTIFIKASI;
+}) {
+  console.log(data);
+
+  //   const getAdmin = await prisma.user.findMany({
+  //     where: {
+  //       active: true,
+  //       masterUserRoleId: "2",
+  //     },
+  //   });
+
+  return { status: 201 };
+}

src/app_modules/forum/fun/get/get_all_komentar_by_id.ts

@@ -2,7 +2,7 @@
 
 import prisma from "@/app/lib/prisma";
 
-export async function forum_getKomentarById(postingId: string) {
+export async function forum_funGetAllKomentarById(postingId: string) {
   const data = await prisma.forum_Komentar.findMany({
     orderBy: {
       createdAt: "desc",

src/app_modules/forum/fun/get/get_list_posting_by_author_id.ts

@@ -4,8 +4,19 @@ import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import _ from "lodash";
 
-export async function forum_getListPostingByAuhtorId(authorId: string) {
+export async function forum_getAllPostingByAuhtorId({
+  authorId,
+  page,
+}: {
+  authorId: string;
+  page: any;
+}) {
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
   const get = await prisma.forum_Posting.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       createdAt: "desc",
     },
@@ -22,7 +33,13 @@ export async function forum_getListPostingByAuhtorId(authorId: string) {
       Author: {
         select: {
           id: true,
-          Profile: true,
+          username: true,
+          Profile: {
+            select: {
+              id: true,
+              imagesId: true,
+            },
+          },
         },
       },
       Forum_Komentar: {
@@ -30,14 +47,20 @@ export async function forum_getListPostingByAuhtorId(authorId: string) {
           isActive: true,
         },
       },
-     ForumMaster_StatusPosting: true 
+      ForumMaster_StatusPosting: {
+        select: {
+          id: true,
+          status: true,
+        },
+      },
+      forumMaster_StatusPostingId: true,
     },
   });
 
-  const data = get.map((val) => ({
-    ..._.omit(val, ["Forum_Komentar"]),
-    _count: val.Forum_Komentar.length,
-  }));
+  // const data = get.map((val) => ({
+  //   ..._.omit(val, ["Forum_Komentar"]),
+  //   _count: val.Forum_Komentar.length,
+  // }));
 
-  return data;
+  return get;
 }

src/app_modules/forum/fun/get/get_one_kategori_by_id.ts

@@ -13,5 +13,5 @@ export default async function forum_getOneKategoriById({
     },
   });
 
-  return cekData
+  return cekData;
 }

src/app_modules/forum/fun/get/get_one_posting_reported_by_id.ts

@@ -0,0 +1,46 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import _ from "lodash";
+
+export default async function forum_funGetOneReportedPostingById({
+  postingId,
+}: {
+  postingId: string;
+}) {
+  const data = await prisma.forum_Posting.findFirst({
+    where: {
+      id: postingId,
+    },
+    select: {
+      id: true,
+      diskusi: true,
+      Forum_ReportPosting: {
+        select: {
+          id: true,
+          deskripsi: true,
+          forumMaster_KategoriReportId: true,
+          ForumMaster_KategoriReport: true,
+        },
+      },
+    },
+  });
+
+  // console.log(data)
+
+  const group = _.groupBy(
+    data?.Forum_ReportPosting,
+    (val) => val.ForumMaster_KategoriReport?.title
+  );
+  const getKey = _.keys(group);
+  const filterGroup = getKey.map((e) => e.replace("undefined", "Lainnya"));
+
+  const allData = {
+    data: data,
+    list: filterGroup,
+  };
+
+  // console.log(allData);
+
+  return allData;
+}

src/app_modules/forum/fun/get/get_one_report_komentar_by_id.tsx

@@ -0,0 +1,60 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import _ from "lodash";
+import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
+import { group } from "console";
+
+export default async function forum_funGetOneReportKomentarById({
+  komentarId,
+}: {
+  komentarId: string;
+}) {
+  const data = await prisma.forum_Komentar.findFirst({
+    where: {
+      id: komentarId,
+    },
+    select: {
+      id: true,
+      komentar: true,
+      Forum_Posting: {
+        select: {
+          id: true,
+          diskusi: true,
+          Author: {
+            select: {
+              username: true,
+            },
+          },
+        },
+      },
+
+      Forum_ReportKomentar: {
+        select: {
+          deskripsi: true,
+          ForumMaster_KategoriReport: {
+            select: {
+              id: true,
+              title: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const group = _.groupBy(
+    data?.Forum_ReportKomentar,
+    (v) => v.ForumMaster_KategoriReport?.title
+  );
+
+  const getKey = _.keys(group);
+  const filterGroup = getKey.map((e) => e.replace("undefined", "Lainnya"));
+
+  const allData = {
+    data: data,
+    list: filterGroup,
+  };
+
+  return allData;
+}

src/app_modules/forum/index.ts

@@ -5,7 +5,7 @@ import Forum_Forumku from "./forumku";
 import Forum_Create from "./create";
 import LayoutForum_Create from "./create/layout";
 import LayoutForum_Forumku from "./forumku/layout";
-import Forum_Detail from "./detail";
+import Forum_MainDetail from "./detail/main_detail";
 import LayoutForum_Detail from "./detail/layout";
 import Forum_Komentar from "./komentar";
 import LayoutForum_Komentar from "./komentar/layout";
@@ -19,6 +19,8 @@ import Forum_ReportKomentar from "./report/komentar";
 import LayoutForum_ReportKomentar from "./report/komentar/layout";
 import Forum_ReportPostingLainnya from "./report/posting/lainnya";
 import Forum_ReportKomentarLainnya from "./report/komentar/lainnya";
+import Forum_DetailReportKomentar from "./detail/detail_report_komentar";
+import Forum_DetailReportPosting from "./detail/detail_report_posting";
 
 export {
   Forum_Splash,
@@ -28,7 +30,7 @@ export {
   Forum_Create,
   LayoutForum_Create,
   LayoutForum_Forumku,
-  Forum_Detail,
+  Forum_MainDetail as Forum_Detail,
   LayoutForum_Detail,
   Forum_Komentar,
   LayoutForum_Komentar,
@@ -42,4 +44,6 @@ export {
   LayoutForum_ReportKomentar,
   Forum_ReportPostingLainnya,
   Forum_ReportKomentarLainnya,
+  Forum_DetailReportKomentar,
+  Forum_DetailReportPosting,
 };

src/app_modules/forum/main/beranda.tsx

@@ -11,20 +11,21 @@ import {
   Stack,
   Text,
   TextInput,
-  rem
+  rem,
 } from "@mantine/core";
 import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
-import {
-  IconPencilPlus,
-  IconSearchOff
-} from "@tabler/icons-react";
+import { IconPencilPlus, IconSearchOff } from "@tabler/icons-react";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentForum_V2_MainCardView from "../component/main_component/card_view";
+import ComponentForum_BerandaCardView from "../component/main_component/card_view";
 import { forum_new_getAllPosting } from "../fun/get/new_get_all_posting";
 import { MODEL_FORUM_POSTING } from "../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function Forum_Beranda({
   listForum,
@@ -121,7 +122,7 @@ export default function Forum_Beranda({
   return (
     <>
       {isNewPost && (
-        <Affix position={{ top: rem(70) }} w={"100%"}>
+        <Affix position={{ top: rem(100) }} w={"100%"}>
           <ButtonUpdateBeranda
             countNewPost={countNewPost}
             onSetData={(val) => setData(val)}
@@ -138,25 +139,29 @@ export default function Forum_Beranda({
       {/* <pre>{JSON.stringify(listForum, null, 2)}</pre> */}
       <Affix position={{ bottom: rem(100), right: rem(30) }}>
         <ActionIcon
-          loading={loadingCreate ? true : false}
           opacity={scroll.y > 0 ? 0.5 : ""}
           style={{
             transition: "0.5s",
+            border: `1px solid ${AccentColor.skyblue}`,
           }}
           size={"xl"}
           radius={"xl"}
           variant="transparent"
-          bg={"blue"}
+          bg={AccentColor.blue}
           onClick={() => {
             setLoadingCreate(true);
             router.push(RouterForum.create);
           }}
         >
-          <IconPencilPlus color="white" />
+          {loadingCreate ? (
+            <Loader size={25} />
+          ) : (
+            <IconPencilPlus color="white" />
+          )}
         </ActionIcon>
       </Affix>
 
-      <Stack px={"sm"} spacing={"xl"}>
+      <Stack spacing={"xl"}>
         <TextInput
           radius={"xl"}
           placeholder="Topik forum apa yang anda cari hari ini ?"
@@ -164,11 +169,12 @@ export default function Forum_Beranda({
             onSearch(val.currentTarget.value);
           }}
         />
+
         {_.isEmpty(data) ? (
           <Stack align="center" justify="center" h={"80vh"}>
-            <IconSearchOff size={80} color="gray" />
+            <IconSearchOff size={80} color="white" />
             <Stack spacing={0} align="center">
-              <Text c={"gray"} fw={"bold"} fz={"xs"}>
+              <Text color="white" fw={"bold"} fz={"xs"}>
                 Tidak ada data
               </Text>
             </Stack>
@@ -176,7 +182,7 @@ export default function Forum_Beranda({
         ) : (
           // --- Main component --- //
           <ScrollOnly
-            height="80vh"
+            height="83vh"
             renderLoading={() => (
               <Center mt={"lg"}>
                 <Loader />
@@ -195,7 +201,7 @@ export default function Forum_Beranda({
             }}
           >
             {(item) => (
-              <ComponentForum_V2_MainCardView
+              <ComponentForum_BerandaCardView
                 data={item}
                 userLoginId={userLoginId}
                 onLoadData={(val) => {
@@ -241,6 +247,11 @@ function ButtonUpdateBeranda({
     <>
       <Center>
         <Button
+          style={{
+            transition: "0.5s",
+            border: `1px solid ${AccentColor.skyblue}`,
+          }}
+          bg={AccentColor.blue}
           loaderPosition="center"
           loading={isLoading ? true : false}
           radius={"xl"}

src/app_modules/forum/main/layout.tsx

@@ -9,6 +9,7 @@ import {
   Grid,
   Group,
   Header,
+  Loader,
   Stack,
   Text,
   Title,
@@ -25,6 +26,8 @@ import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export default function LayoutForum_Main({
   children,
@@ -37,8 +40,6 @@ export default function LayoutForum_Main({
   const [hotMenu, setHotMenu] = useState(1);
   const [loading, setLoading] = useState(false);
 
-  if (loading) return <ComponentGlobal_V2_LoadingPage />;
-
   const listFooter = [
     {
       id: 1,
@@ -57,7 +58,46 @@ export default function LayoutForum_Main({
 
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
+        header={
+          <ComponentGlobal_UI_HeaderTamplate
+            title="FORUM"
+            iconRight={
+              <ActionIcon
+                radius={"xl"}
+                variant="transparent"
+                onClick={() => {
+                  setLoading(true);
+                  router.push(RouterForum.forumku + dataAuthor?.id);
+                }}
+              >
+                {loading ? (
+                  <Loader size={20} />
+                ) : (
+                  <Avatar
+                    radius={"xl"}
+                    size={30}
+                    sx={{
+                      borderStyle: "solid",
+                      borderWidth: "0.5px",
+                      borderColor: "black",
+                    }}
+                    alt="foto"
+                    src={
+                      RouterProfile.api_foto_profile +
+                      dataAuthor?.Profile?.imagesId
+                    }
+                  />
+                )}
+              </ActionIcon>
+            }
+          />
+        }
+      >
+        {children}
+      </ComponentGlobal_UI_LayoutTamplate>
+
+      {/* <AppComponentGlobal_LayoutTamplate
         header={
           <Header height={50} sx={{ borderStyle: "none" }}>
             <Group h={50} position="apart" px={"md"}>
@@ -72,6 +112,7 @@ export default function LayoutForum_Main({
               </ActionIcon>
 
               <Title order={5}>Forum</Title>
+              
               <ActionIcon
                 loading={loading ? true : false}
                 variant="transparent"
@@ -132,7 +173,7 @@ export default function LayoutForum_Main({
         // }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </AppComponentGlobal_LayoutTamplate> */}
     </>
   );
 }

src/app_modules/forum/model/interface.tsx

@@ -23,6 +23,7 @@ export interface MODEL_FORUM_KOMENTAR {
   updatedAt: Date;
   komentar: string;
   forum_PostingId: string;
+  Forum_Posting: MODEL_FORUM_POSTING;
   authorId: string;
   Author: MODEL_USER;
   Forum_ReportKomentar: MODEL_FORUM_MASTER_REPORT[];
@@ -45,7 +46,7 @@ export interface MODEL_FORUM_MASTER_STATUS {
   status: string;
 }
 
-export interface MODEL_FORUM_REPORT {
+export interface MODEL_FORUM_REPORT_POSTING {
   id: string;
   isActive: boolean;
   createdAt: Date;
@@ -58,3 +59,17 @@ export interface MODEL_FORUM_REPORT {
   userId: string;
   User: MODEL_USER;
 }
+
+export interface MODEL_FORUM_REPORT_KOMENTAR {
+  id: string;
+  isActive: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  deskripsi: string;
+  ForumMaster_KategoriReport: MODEL_FORUM_MASTER_REPORT;
+  forumMaster_KategoriReportId: string;
+  forum_KomentarId: string,
+  Forum_Komentar: MODEL_FORUM_KOMENTAR;
+  userId: string;
+  User: MODEL_USER;
+}

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

@@ -1,28 +1,40 @@
 "use client";
 
-import { Box, Button, Paper, Radio, Stack, Text, Title } from "@mantine/core";
-import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
-import { useState } from "react";
-import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { useRouter } from "next/navigation";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+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 mqtt_client from "@/util/mqtt_client";
+import { Button, Radio, Stack, Text, Title } from "@mantine/core";
+import { toNumber } from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { forum_funCreateReportKomentar } from "../../fun/create/fun_create_report_komentar";
+import forum_funCreateNotifikasiToAdmin from "../../fun/forum_notifikasi/fun_create_notifikasi";
+
+import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
+import forum_getOneKategoriById from "../../fun/get/get_one_kategori_by_id";
+import getMaster_NamaBank from "@/app_modules/investasi/fun/master/get_nama_bank";
 
 export default function Forum_ReportKomentar({
   komentarId,
   listReport,
+  userLoginId,
 }: {
   komentarId: string;
   listReport: MODEL_FORUM_MASTER_REPORT[];
+  userLoginId: string;
 }) {
   const [reportValue, setReportValue] = useState("Kebencian");
 
   return (
     <>
       <Stack px={"sm"}>
-        <Radio.Group value={reportValue as any} onChange={setReportValue}>
+        <Radio.Group
+          value={reportValue as any}
+          onChange={(val) => {
+            setReportValue(val);
+          }}
+        >
           <Stack spacing={"xl"}>
             {listReport.map((e) => (
               <Stack key={e.id}>
@@ -35,32 +47,67 @@ export default function Forum_ReportKomentar({
             ))}
           </Stack>
         </Radio.Group>
-        <ButtonAction value={reportValue} komentarId={komentarId} />
+        <ButtonAction
+          kategoriId={reportValue}
+          komentarId={komentarId}
+          userLoginId={userLoginId}
+        />
       </Stack>
     </>
   );
 }
 
 function ButtonAction({
-  value,
+  kategoriId,
   komentarId,
+  userLoginId,
 }: {
-  value: string;
+  kategoriId: string;
   komentarId: string;
+  userLoginId: string;
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
 
   async function onReport() {
-    await forum_funCreateReportKomentar(komentarId, value).then((res) => {
-      if (res.status === 201) {
-        ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
-        setLoading(true);
-        router.back();
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
+    const report = await forum_funCreateReportKomentar({
+      komentarId: komentarId,
+      kategoriId: kategoriId,
     });
+
+    if (report.status === 201) {
+      ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
+      setLoading(true);
+      router.back();
+
+      // const get = await getMaster_NamaBank();
+      // console.log(get);
+
+      // await forum_getOneKategoriById({
+      //   kategoriId: kategoriId,
+      // });
+
+      // console.log(getKategori);
+
+      // const dataNotif = {
+      //   appId: komentarId,
+      //   pesan: getKategori?.deskripsi,
+      //   kategoriApp: "FORUM",
+      //   title: getKategori?.title,
+      //   userId: userLoginId,
+      //   status: "Report Komentar",
+      // };
+
+      // const createNotif = await forum_funCreateNotifikasiToAdmin({
+      //   data: dataNotif as any,
+      // });
+
+      // if (createNotif.status === 201) {
+      //   mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+      // }
+    } else {
+      ComponentGlobal_NotifikasiGagal(report.message);
+    }
   }
   return (
     <>
@@ -75,7 +122,7 @@ function ButtonAction({
         </Button>
         <Button
           radius={"xl"}
-          color="red"
+          color="orange"
           loaderPosition="center"
           loading={loading ? true : false}
           onClick={() => onReport()}

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

@@ -61,7 +61,7 @@ function ButtonAction({
         >
           Batal
         </Button>
-        <Button radius={"xl"} color="red" onClick={() => onReport()}>
+        <Button radius={"xl"} color="orange" onClick={() => onReport()}>
           Report
         </Button>
       </Group>

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

@@ -77,10 +77,9 @@ function ButtonAction({
       const getKategori = await forum_getOneKategoriById({
         kategoriId: toNumber(kategoriId),
       });
-      console.log(getKategori);
+      // console.log(getKategori);
 
       ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
-      setLoading(true);
       router.back();
 
       const dataNotif = {
@@ -99,6 +98,8 @@ function ButtonAction({
       if (createNotifikasi.status === 201) {
         mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
       }
+      setLoading(true);
+
     } else {
       ComponentGlobal_NotifikasiGagal(report.message);
     }

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

@@ -8,11 +8,15 @@ import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report
 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 { forum_funCreateReportPostingLainnya } from "../../fun/create/fun_create_report_posting_lainnya";
+import mqtt_client from "@/util/mqtt_client";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 
 export default function Forum_ReportPostingLainnya({
-  postingIg,
+  postingId,
+  userLoginId,
 }: {
-  postingIg: string;
+  postingId: string;
+  userLoginId: string;
 }) {
   const [deskripsi, setDeskripsi] = useState("");
   return (
@@ -26,46 +30,69 @@ export default function Forum_ReportPostingLainnya({
             setDeskripsi(val.currentTarget.value);
           }}
         />
-        <ButtonAction postingIg={postingIg} deskripsi={deskripsi} />
+        <ButtonAction
+          postingId={postingId}
+          deskripsi={deskripsi}
+          userLoginId={userLoginId}
+        />
       </Stack>
     </>
   );
 }
 
 function ButtonAction({
-  postingIg,
+  postingId,
   deskripsi,
+  userLoginId,
 }: {
-  postingIg: string;
+  postingId: string;
   deskripsi: string;
+  userLoginId: string;
 }) {
   const router = useRouter();
 
   async function onReport() {
-    await forum_funCreateReportPostingLainnya(postingIg, deskripsi).then(
-      (res) => {
-        if (res.status === 201) {
-          ComponentGlobal_NotifikasiBerhasil(res.message);
-          router.back();
-        } else {
-          ComponentGlobal_NotifikasiGagal(res.message);
-        }
-      }
+    const report = await forum_funCreateReportPostingLainnya(
+      postingId,
+      deskripsi
     );
+    if (report.status === 201) {
+      ComponentGlobal_NotifikasiBerhasil(report.message);
+      router.back();
+
+      const dataNotif = {
+        appId: postingId,
+        pesan: deskripsi,
+        kategoriApp: "FORUM",
+        title: "Lainnya",
+        userId: userLoginId,
+        status: "Report Posting",
+      };
+
+      const createNotifikasi = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (createNotifikasi.status === 201) {
+        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+      }
+    } else {
+      ComponentGlobal_NotifikasiGagal(report.message);
+    }
   }
   return (
     <>
       <Group position="apart" grow>
         <Button
           radius={"xl"}
-          onClick={() => router.replace(RouterForum.report_posting + postingIg)}
+          onClick={() => router.replace(RouterForum.report_posting + postingId)}
         >
           Batal
         </Button>
         <Button
-        style={{
-          transition: "0.5s"
-        }}
+          style={{
+            transition: "0.5s",
+          }}
           disabled={deskripsi === "" ? true : false}
           radius={"xl"}
           color="orange"

src/app_modules/forum/splash/index.tsx

@@ -1,27 +1,44 @@
 "use client";
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import { Center, Image, Paper } from "@mantine/core";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import { Center, Image, Paper, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 
 export default function Forum_Splash() {
-const router = useRouter()
-    useShallowEffect(() => {
-      setTimeout(() => {
-        // setHotMenu(1);
-        // setStatus("Publish");
-        router.replace(RouterForum.beranda);
-      }, 1000);
-    }, []);
+  const router = useRouter();
+  useShallowEffect(() => {
+    setTimeout(() => {
+      router.replace(RouterForum.beranda);
+    }, 1000);
+  }, []);
 
   return (
     <>
-      <Center h={"100vh"}>
-        <Paper p={{ base: 50, md: 60, lg: 80 }}>
-          <Image alt="logo" src={"/aset/forum/logo.png"} />
-        </Paper>
-      </Center>
+      <ComponentGlobal_UI_LayoutTamplate>
+        <ViewSplash />
+      </ComponentGlobal_UI_LayoutTamplate>
+    </>
+  );
+}
+
+function ViewSplash() {
+  return (
+    <>
+      <Stack h={"90vh"} align="center" justify="center">
+        <Paper
+          radius={"100%"}
+          // p={{ base: 50, md: 60, lg: 80 }}
+        >
+          <Image
+            height={300}
+            radius={"100%"}
+            alt="logo"
+            src={"/aset/forum/logo.png"}
+          />
+        </Paper>
+      </Stack>
     </>
   );
 }

src/app_modules/home/layout.tsx

@@ -92,7 +92,7 @@ export default function HomeLayout({
     mqtt_client.subscribe("USER");
 
     mqtt_client.on("message", (topic: any, message: any) => {
-      console.log(topic);
+      // console.log(topic);
       const data = JSON.parse(message.toString());
 
       if (data.userId === dataUser.id) {
@@ -172,7 +172,7 @@ export default function HomeLayout({
                 <Indicator
                   processing
                   color={MainColor.yellow}
-                  label={<Text fz={10}>{countNotif}</Text>}
+                  label={<Text fz={10} c={MainColor.darkblue}>{countNotif}</Text>}
                 >
                   <IconBell color="white" />
                 </Indicator>

src/app_modules/home/view.tsx

@@ -2,55 +2,38 @@
 
 import {
   ActionIcon,
-  BackgroundImage,
   Box,
-  Center,
-  Flex,
   Group,
   Image,
-  Loader,
-  LoadingOverlay,
   Paper,
-  ScrollArea,
   SimpleGrid,
-  Skeleton,
   Stack,
-  Text,
-  ThemeIcon,
-  Title,
+  Text
 } from "@mantine/core";
 
 import {
   IconAffiliate,
   IconBriefcase,
   IconHeartHandshake,
-  IconMap2,
-  IconMessages,
   IconPackageImport,
   IconPresentation,
-  IconShoppingBag,
-  IconUserCircle,
-  IconUserSearch,
+  IconUserSearch
 } from "@tabler/icons-react";
 
-import toast from "react-simple-toasts";
-import { useRouter } from "next/navigation";
-import { MODEL_PROFILE_OLD } from "./model/user_profile";
-import AppNotif from "../notif";
-import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
-import { MODEL_USER } from "./model/interface";
-import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import { useState } from "react";
-import { useDisclosure } from "@mantine/hooks";
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import ComponentGlobal_V2_LoadingPage from "../component_global/loading_page_v2";
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import { AccentColor, MainColor } from "../component_global/color/color_pallet";
-import { MODEL_JOB } from "../job/model/interface";
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import { useDisclosure } from "@mantine/hooks";
 import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { AccentColor, MainColor } from "../component_global/color/color_pallet";
 import ComponentGlobal_IsEmptyData from "../component_global/is_empty_data";
+import ComponentGlobal_V2_LoadingPage from "../component_global/loading_page_v2";
+import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
+import { MODEL_JOB } from "../job/model/interface";
+import { MODEL_USER } from "./model/interface";
 
 export default function HomeView({
   dataUser,

src/app_modules/notif/index.tsx

@@ -1,17 +0,0 @@
-"use client";
-import { useShallowEffect } from "@mantine/hooks";
-import io from "socket.io-client";
-import { toast } from "react-toastify";
-// const socket = io("https://io.wibudev.com");
-
-export default function AppNotif() {
-  // useShallowEffect(() => {
-  //   socket.on("io", (data) => {
-  //       console.log(JSON.stringify(data))
-  //     if (data && data.id === "hipmi") {
-  //       toast.success(data.data);
-  //     }
-  //   });
-  // }, []);
-  return <></>;
-}

src/app_modules/notifikasi/fun/create/create_notif_to_admin.tsx

@@ -8,6 +8,7 @@ export default async function notifikasiToAdmin_funCreate({
 }: {
   data: MODEL_NOTIFIKASI;
 }) {
+
   const getAdmin = await prisma.user.findMany({
     where: {
       active: true,
@@ -15,6 +16,8 @@ export default async function notifikasiToAdmin_funCreate({
     },
   });
 
+  // console.log(getAdmin);
+
   for (let a of getAdmin) {
     const create = await prisma.notifikasi.create({
       data: {

src/app_modules/notifikasi/main/index.tsx

@@ -29,6 +29,7 @@ import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
 import { useShallowEffect } from "@mantine/hooks";
+import { data } from "autoprefixer";
 
 export default function Notifikasi_MainView({
   listNotifikasi,
@@ -104,7 +105,7 @@ function MainView({ listNotifikasi }: { listNotifikasi: MODEL_NOTIFIKASI[] }) {
 
               e?.kategoriApp === "FORUM" &&
                 redirectDetailForumPage({
-                  appId: e.appId,
+                  data: e,
                   router: router,
                 });
 
@@ -212,12 +213,24 @@ function redirectJobPage({
 }
 
 function redirectDetailForumPage({
-  appId,
+  data,
   router,
 }: {
-  appId: string;
+  data: MODEL_NOTIFIKASI;
   router: AppRouterInstance;
 }) {
-  const path = RouterForum.main_detail + appId;
-  router.push(path);
+  if (data.status === null) {
+    const path = RouterForum.main_detail + data.appId;
+    router.push(path);
+  }
+
+  if (data.status === "Report Komentar") {
+    const path = RouterForum.detail_report_komentar + data.appId;
+    router.push(path);
+  }
+
+  if (data.status === "Report Posting") {
+    const path = RouterForum.detail_report_posting + data.appId;
+    router.push(path);
+  }
 }

src/app_modules/zCoba/index.tsx

@@ -75,7 +75,7 @@ export default function Coba_TestLoading() {
   return (
     <>
       <BackgroundImage src={"/aset/global/main_background.png"}>
-        <Box h={"100vh"}>Apa</Box>
+        <Box h={"100vh"}></Box>
       </BackgroundImage>
     </>
   );

yarn.lock

@@ -277,13 +277,6 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.7.2":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
-  integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
 "@babel/template@^7.24.6":
   version "7.24.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.6.tgz#048c347b2787a6072b24c723664c8d02b67a44f9"
@@ -1359,14 +1352,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-virtualized@^9.21.30":
-  version "9.21.30"
-  resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.30.tgz#ba39821bcb2487512a8a2cdd9fbdb5e6fc87fedb"
-  integrity sha512-4l2TFLQ8BCjNDQlvH85tU6gctuZoEdgYzENQyZHpgTHU7hoLzYgPSOALMAeA58LOWua8AzC6wBivPj1lfl6JgQ==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/react" "*"
-
 "@types/react@*":
   version "18.2.57"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.57.tgz#147b516d8bdb2900219acbfc6f939bdeecca7691"
@@ -1931,7 +1916,7 @@ clsx@1.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
-clsx@^1.0.4, clsx@^1.1.1:
+clsx@^1.1.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -2177,7 +2162,7 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-helpers@^5.0.1, dom-helpers@^5.1.3:
+dom-helpers@^5.0.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
@@ -4374,11 +4359,6 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-property@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.0.tgz#2156ba9d85fa4741faf1918b38efc1eae3c6a136"
@@ -4461,18 +4441,6 @@ react-transition-group@4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-virtualized@^9.22.5:
-  version "9.22.5"
-  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.5.tgz#bfb96fed519de378b50d8c0064b92994b3b91620"
-  integrity sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    clsx "^1.0.4"
-    dom-helpers "^5.1.3"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-lifecycles-compat "^3.0.4"
-
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"