UI Forum untuk user

- UI selesai
- Realtime dan notifikasi selesai
## No Issuee

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

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

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

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

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

@@ -5,22 +5,29 @@ import { forum_countOneTotalKomentarById } from "@/app_modules/forum/fun/count/c
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import { redirect } from "next/navigation";
+import { forum_countTotalKomenById } from "@/app_modules/forum/fun/count/count_total_komentar_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let postingId = params.id;
 
   const userLoginId = await user_getOneUserId();
   const dataPosting = await forum_getOnePostingById(postingId);
-  const listKomentar = await forum_funGetAllKomentarById(postingId);
+  const listKomentar = await forum_funGetAllKomentarById({
+    postingId: postingId,
+    page: 1,
+  });
 
   dataPosting?.isActive === false && redirect(RouterForum.beranda);
 
+  const countKomentar = await forum_countTotalKomenById(postingId);
+
   return (
     <>
       <Forum_MainDetail
         dataPosting={dataPosting as any}
         listKomentar={listKomentar as any}
         userLoginId={userLoginId}
+        countKomentar={countKomentar}
       />
     </>
   );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,18 +1,14 @@
 "use client";
 
-import { RouterAdminForum } from "@/app/lib/router_admin/router_admin_forum";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/component_global/header_tamplate";
-import ComponentAdminDonasi_TombolKembali from "@/app_modules/admin/donasi/component/tombol_kembali";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import {
   MODEL_FORUM_KOMENTAR,
-  MODEL_FORUM_MASTER_REPORT,
+  MODEL_FORUM_REPORT_POSTING
-  MODEL_FORUM_REPORT_POSTING,
 } from "@/app_modules/forum/model/interface";
+import mqtt_client from "@/util/mqtt_client";
 import {
-  Badge,
-  Box,
   Button,
   Center,
   Group,
@@ -24,28 +20,22 @@ import {
   Stack,
   Table,
   Text,
-  TextInput,
+  Title
-  Title,
 } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 import {
-  IconMessageCircle,
+  IconTrash
-  IconFlag3,
-  IconTrash,
-  IconSearch,
 } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { adminForum_funDeletePostingById } from "../fun/delete/fun_delete_posting_by_id";
-import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
-import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
-import { adminForum_getListReportKomentarbyId } from "../fun/get/get_list_report_komentar_by_id";
 import ComponentAdminGlobal_BackButton from "../../component_global/back_button";
-import ComponentAdminForum_ViewOneDetailKomentar from "../component/detail_one_komentar";
+import ComponentAdminGlobal_IsEmptyData from "../../component_global/is_empty_data";
-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";
+import ComponentAdminForum_ViewOneDetailKomentar from "../component/detail_one_komentar";
+import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
+import { adminForum_getListReportKomentarbyId } from "../fun/get/get_list_report_komentar_by_id";
+import adminForum_funGetOneKomentarById from "../fun/get/get_one_komentar_by_id";
 
 export default function AdminForum_HasilReportKomentar({
   komentarId,
@@ -108,6 +98,7 @@ function ButtonDeleteKomentar({
         const dataNotif = {
           appId: data.id,
           status: "Report Komentar",
+          // userId harus sama seperti author
           userId: data.authorId,
           pesan: data.komentar,
           kategoriApp: "FORUM",

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

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

src/app_modules/component_global/ui/ui_header_tamplate.tsx

@@ -16,6 +16,7 @@ import { AccentColor, MainColor } from "../color/color_pallet";
 
 export default function ComponentGlobal_UI_HeaderTamplate({
   title,
+  posotion,
   // left button
   hideButtonLeft,
   iconLeft,
@@ -25,6 +26,7 @@ export default function ComponentGlobal_UI_HeaderTamplate({
   routerRight,
 }: {
   title: string;
+  posotion?: any;
   // left button
   hideButtonLeft?: boolean;
   iconLeft?: any;
@@ -48,20 +50,31 @@ export default function ComponentGlobal_UI_HeaderTamplate({
         }}
         bg={MainColor.darkblue}
       >
-        <Group h={"100%"} position="apart" px={"md"}>
+        <Group h={"100%"} position={posotion ? posotion : "apart"} px={"md"}>
-          <ActionIcon
+          {hideButtonLeft ? (
-            c={"white"}
+            <ActionIcon disabled variant="transparent"></ActionIcon>
-            variant="transparent"
+          ) : (
-            radius={"xl"}
+            <ActionIcon
-            onClick={() => {
+              c={"white"}
-              setIsLoading(true);
+              variant="transparent"
-              routerLeft === undefined
+              radius={"xl"}
-                ? router.back()
+              onClick={() => {
-                : router.push(routerLeft);
+                setIsLoading(true);
-            }}
+                routerLeft === undefined
-          >
+                  ? router.back()
-            {isLoading ? <Loader size={20} /> : iconLeft ? iconLeft : <IconChevronLeft />}
+                  : router.push(routerLeft);
-          </ActionIcon>
+              }}
+            >
+              {isLoading ? (
+                <Loader size={20} />
+              ) : iconLeft ? (
+                iconLeft
+              ) : (
+                <IconChevronLeft />
+              )}
+            </ActionIcon>
+          )}
+
           <Title order={5} c={MainColor.yellow}>
             {title}
           </Title>

src/app_modules/component_global/ui/ui_layout_tamplate.tsx

@@ -20,7 +20,6 @@ export default function ComponentGlobal_UI_LayoutTamplate({
       <BackgroundImage
         src={"/aset/global/main_background.png"}
         h={"100vh"}
-        pos={"sticky"}
       >
         {/* Header */}
         {header ? (

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

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
@@ -17,7 +17,8 @@ import { forum_funCreateKomentar } from "../../fun/create/fun_create_komentar";
 import { forum_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
 import { useRouter } from "next/navigation";
-
+import { MainColor } from "@/app_modules/component_global/color/color_pallet";
+import mqtt_client from "@/util/mqtt_client";
 export default function ComponentForum_DetailCreateKomentar({
   postingId,
   onSetKomentar,
@@ -41,8 +42,13 @@ export default function ComponentForum_DetailCreateKomentar({
 
     const createComment = await forum_funCreateKomentar(postingId, value);
     if (createComment.status === 201) {
-      const loadKomentar = await forum_funGetAllKomentarById(data.id);
+      // const loadKomentar = await forum_funGetAllKomentarById(data.id);
-      onSetKomentar(loadKomentar);
+
+      const loadData = await forum_funGetAllKomentarById({
+        postingId: data.id,
+        page: 1,
+      });
+      onSetKomentar(loadData);
 
       setValue("");
       setIsEmpty(true);
@@ -104,6 +110,8 @@ export default function ComponentForum_DetailCreateKomentar({
                 ? true
                 : false
             }
+            bg={MainColor.yellow}
+            color={"yellow"}
             loaderPosition="center"
             loading={loading ? true : false}
             radius={"xl"}
@@ -112,8 +120,7 @@ export default function ComponentForum_DetailCreateKomentar({
             Balas
           </Button>
         </Group>
-        <Divider />
       </Stack>
     </>
   );
-}
+}

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

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

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

@@ -1,82 +1,92 @@
-"use client"
+"use client";
 
-import { Stack, Center, Box, Card, Spoiler, Divider, Text } from "@mantine/core";
+import {
+  Stack,
+  Center,
+  Box,
+  Card,
+  Spoiler,
+  Divider,
+  Text,
+} from "@mantine/core";
 import _ from "lodash";
 import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
 import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
+import { MainColor } from "@/app_modules/component_global/color/color_pallet";
 
-export default function ComponentForum_ListKomentarView({
+export default function ComponentForum_KomentarView({
-  listKomentar,
+  data,
   setKomentar,
   postingId,
   userLoginId,
 }: {
-  listKomentar: MODEL_FORUM_KOMENTAR[];
+  data: MODEL_FORUM_KOMENTAR;
   setKomentar: any;
   postingId: string;
   userLoginId: string;
 }) {
   return (
     <>
-      <Stack>
+      <Card mb={"xs"} bg={"transparent"}>
-        {_.isEmpty(listKomentar) ? (
+        <Card.Section>
+          <ComponentForum_KomentarAuthorNameOnHeader
+            authorName={data?.Author?.username}
+            imagesId={data?.Author?.Profile?.imagesId}
+            tglPublish={data?.createdAt}
+            userId={data?.Author?.id}
+            komentarId={data?.id}
+            isMoreButton={true}
+            setKomentar={setKomentar}
+            postingId={postingId}
+            userLoginId={userLoginId}
+          />
+        </Card.Section>
+        <Card.Section sx={{ zIndex: 0 }} p={"sm"}>
+          <Stack spacing={"xs"}>
+            <Text fz={"sm"} lineClamp={4} c={"white"}>
+              {data.komentar ? (
+                <Spoiler
+                  hideLabel="sembunyikan"
+                  maxHeight={100}
+                  showLabel="tampilkan"
+                >
+                  <div dangerouslySetInnerHTML={{ __html: data.komentar }} />
+                </Spoiler>
+              ) : (
+                ""
+              )}
+            </Text>
+          </Stack>
+        </Card.Section>
+
+        <Card.Section>
+          <Stack>
+            <Divider />
+          </Stack>
+        </Card.Section>
+      </Card>
+
+      {/* <Stack>
+        {_.isEmpty(data) ? (
           <Center>
-            <Text fw={"bold"} fz={"xs"} c={"gray"}>
+            <Text fw={"bold"} fz={"xs"} c={"white"}>
               Belum ada komentar
             </Text>
           </Center>
         ) : (
           <Box>
             <Center>
-              <Text fz={"xs"} c={"gray"}>
+              <Text fw={"bold"} fz={"xs"} c={"white"}>
                 {" "}
                 Komentar
               </Text>
             </Center>
-            {listKomentar.map((e, i) => (
+            {data.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>
+      </Stack> */}
     </>
   );
-}
+}

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

@@ -4,6 +4,10 @@ import { Card, Stack, Group, Text } from "@mantine/core";
 import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
 import ComponentForum_DetailHeader from "./detail_header";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function ComponentForum_DetailForumView({
   data,
@@ -18,7 +22,15 @@ export default function ComponentForum_DetailForumView({
 }) {
   return (
     <>
-      <Card style={{ position: "relative", width: "100%" }}>
+      <Card
+        mb={"md"}
+        p={"xl"}
+        bg={MainColor.darkblue}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+        }}
+        radius={"md"}
+      >
         {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
 
         {/* HEADER */}
@@ -33,9 +45,9 @@ export default function ComponentForum_DetailForumView({
         </Card.Section>
 
         {/* CONTENT */}
-        <Card.Section sx={{ zIndex: 0 }} py={"sm"}>
+        <Card.Section sx={{ zIndex: 0 }} p={"lg"}>
           <Stack spacing={"xs"}>
-            <Text fz={"sm"}>
+            <Text fz={"sm"} color="white">
               {data?.diskusi ? (
                 <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
               ) : (
@@ -49,20 +61,28 @@ export default function ComponentForum_DetailForumView({
         <Card.Section>
           <Stack>
             <Group position="apart">
-              <Group spacing={"xs"}>
+              <Group spacing={"xs"} px={"sm"}>
                 {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-                  <IconMessageCircle color="gray" size={25} />
+                  <IconMessageCircle color="white" size={25} />
                 ) : (
                   <IconMessageCircleX color="gray" size={25} />
                 )}
-                <Text c={"gray"}>{totalKomentar}</Text>
+                <Text
+                  c={
+                    (data?.ForumMaster_StatusPosting?.id as any) === 1
+                      ? "white"
+                      : "gray"
+                  }
+                >
+                  {totalKomentar}
+                </Text>
               </Group>
               <Group>
-                <Text c={"gray"} fz={"sm"}>
+                <Text c={"white"} fz={"sm"}>
                   {new Date(data?.createdAt).toLocaleTimeString()}
                   {/* {new Intl.RelativeTimeFormat("id", {style: "short"}).format(-1,"day")} */}
                 </Text>
-                <Text c={"gray"} fz={"sm"}>
+                <Text c={"white"} fz={"sm"}>
                   {data?.createdAt
                     ? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
                         dateStyle: "medium",

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

@@ -32,6 +32,10 @@ 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_ForumkuMoreButton({
   authorId,
@@ -59,12 +63,15 @@ export default function ComponentForum_ForumkuMoreButton({
   const [loadingEdit, setLoadingEdit] = useState(false);
   const [loadingReport, setLoadingReport] = useState(false);
 
-  //   if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
-
   return (
     <>
       <Drawer
-        // className={classes.radiusCustom}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            borderTop: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={opened}
         onClose={close}
         withCloseButton={false}
@@ -74,9 +81,43 @@ export default function ComponentForum_ForumkuMoreButton({
       >
         <Stack>
           {userLoginId != authorId ? (
-            ""
+            <Grid
+              onClick={() => {
+                setLoadingReport(true);
+                router.push(RouterForum.report_posting + postingId);
+              }}
+            >
+              <Grid.Col span={"content"}>
+                <IconFlag3 color={loadingReport ? "gray" : "white"} />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Group>
+                  <Text c={loadingReport ? "gray" : "white"}>
+                    Laporkan posting
+                  </Text>{" "}
+                  {loadingReport ? <Loader size={"sm"} /> : ""}
+                </Group>
+              </Grid.Col>
+            </Grid>
           ) : (
             <Stack>
+              <Grid
+                onClick={() => {
+                  setLoadingEdit(true);
+                  router.push(RouterForum.edit_posting + postingId);
+                }}
+              >
+                <Grid.Col span={"content"}>
+                  <IconEdit color={loadingEdit ? "gray" : "white"} />
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Group>
+                    <Text c={loadingEdit ? "gray" : "white"}>Edit posting</Text>{" "}
+                    {loadingEdit ? <Loader size={"sm"} /> : ""}
+                  </Group>
+                </Grid.Col>
+              </Grid>
+
               <Grid
                 onClick={() => {
                   close();
@@ -85,16 +126,16 @@ export default function ComponentForum_ForumkuMoreButton({
               >
                 <Grid.Col span={"content"}>
                   {statusId === 1 ? (
-                    <IconSquareRoundedX color="red" />
+                    <IconSquareRoundedX color="orange" />
                   ) : (
-                    <IconSquareCheck />
+                    <IconSquareCheck color="white" />
                   )}
                 </Grid.Col>
                 <Grid.Col span={"auto"}>
                   {statusId === 1 ? (
-                    <Text c={"red"}>Tutup forum</Text>
+                    <Text c={"orange"}>Tutup forum</Text>
                   ) : (
-                    <Text>Buka forum</Text>
+                    <Text c={"white"}>Buka forum</Text>
                   )}
                 </Grid.Col>
               </Grid>
@@ -112,56 +153,30 @@ export default function ComponentForum_ForumkuMoreButton({
                   <Text c={"red"}>Hapus</Text>
                 </Grid.Col>
               </Grid>
-
-              <Grid
-                onClick={() => {
-                  setLoadingEdit(true);
-                  router.push(RouterForum.edit_posting + postingId);
-                }}
-              >
-                <Grid.Col span={"content"}>
-                  <IconEdit color={loadingEdit ? "gray" : "black"} />
-                </Grid.Col>
-                <Grid.Col span={"auto"}>
-                  <Group>
-                    <Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
-                    {loadingEdit ? <Loader size={"sm"} /> : ""}
-                  </Group>
-                </Grid.Col>
-              </Grid>
             </Stack>
           )}
 
-          {userLoginId == authorId ? (
+          <Button
-            ""
+            bg={MainColor.yellow}
-          ) : (
+            color={"yellow"}
-            <Grid
+            style={{
-              onClick={() => {
+              border: `1px solid ${AccentColor.yellow}`,
-                setLoadingReport(true);
+            }}
-                router.push(RouterForum.report_posting + postingId);
+            radius={"xl"}
-              }}
+            onClick={close}
-            >
+          >
-              <Grid.Col span={"content"}>
-                <IconFlag3 color={loadingReport ? "gray" : "black"} />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Group>
-                  <Text c={loadingReport ? "gray" : "black"}>
-                    Laporkan posting
-                  </Text>{" "}
-                  {loadingReport ? <Loader size={"sm"} /> : ""}
-                </Group>
-              </Grid.Col>
-            </Grid>
-          )}
-
-          <Button variant="outline" radius={"xl"} onClick={close}>
             Batal
           </Button>
         </Stack>
       </Drawer>
 
       <Modal
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={openDel}
         onClose={() => {
           setOpenDel(false);
@@ -177,10 +192,15 @@ export default function ComponentForum_ForumkuMoreButton({
           }}
           allData={allData}
         />
-        {/* <pre>{JSON.stringify(allData, null, 2)}</pre> */}
       </Modal>
 
       <Modal
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={openStatusClose}
         onClose={() => setOpenStatusClose(false)}
         centered
@@ -245,7 +265,9 @@ function ButtonDelete({
   return (
     <>
       <Stack>
-        <Title order={6}>Yakin menghapus posting ini ?</Title>
+        <Title c={"white"} order={6}>
+          Yakin menghapus posting ini ?
+        </Title>
         <Group position="center">
           <Button radius={"xl"} onClick={() => setOpenDel(false)}>
             Batal
@@ -392,8 +414,6 @@ function ButtonStatus({
         },
       };
 
-      console.log(updateDetail.ForumMaster_StatusPosting);
-
       mqtt_client.publish(
         "Forum_detail_ganti_status",
         JSON.stringify({
@@ -410,9 +430,13 @@ function ButtonStatus({
     <>
       <Stack>
         {statusId === 1 ? (
-          <Title order={6}>Yakin menutup forum ini ?</Title>
+          <Title c={"white"} order={6}>
+            Yakin menutup forum ini ?
+          </Title>
         ) : (
-          <Title order={6}>Yakin membuka forum ini ?</Title>
+          <Title c={"white"} order={6}>
+            Yakin membuka forum ini ?
+          </Title>
         )}
         <Group position="center">
           <Button radius={"xl"} onClick={() => setOpenStatus(false)}>

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

@@ -29,7 +29,6 @@ export default function ComponentForum_ForumkuMainCardView({
 
   return (
     <>
-      {/* <pre>{JSON.stringify(data, null,2)}</pre> */}
       <Card
         mb={"md"}
         p={"xl"}

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

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

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

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

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

@@ -67,12 +67,12 @@ export default function ComponentForum_BerandaMoreButton({
   return (
     <>
       <Drawer
-        // styles={{
+        styles={{
-        //   content: {
+          content: {
-        //     backgroundColor: MainColor.darkblue,
+            backgroundColor: MainColor.darkblue,
-        //     borderTop: `1px solid ${AccentColor.blue}`,
+            borderTop: `1px solid ${AccentColor.blue}`,
-        //   },
+          },
-        // }}
+        }}
         opened={opened}
         onClose={close}
         withCloseButton={false}
@@ -82,7 +82,24 @@ export default function ComponentForum_BerandaMoreButton({
       >
         <Stack>
           {userLoginId != authorId ? (
-            ""
+            <Grid
+              onClick={() => {
+                setLoadingReport(true);
+                router.push(RouterForum.report_posting + postingId);
+              }}
+            >
+              <Grid.Col span={"content"}>
+                <IconFlag3 color={loadingReport ? "gray" : "white"} />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Group>
+                  <Text c={loadingReport ? "gray" : "white"}>
+                    Laporkan posting
+                  </Text>{" "}
+                  {loadingReport ? <Loader size={"sm"} /> : ""}
+                </Group>
+              </Grid.Col>
+            </Grid>
           ) : (
             <Stack>
               <Grid
@@ -92,11 +109,11 @@ export default function ComponentForum_BerandaMoreButton({
                 }}
               >
                 <Grid.Col span={"content"}>
-                  <IconEdit color={loadingEdit ? "gray" : "black"} />
+                  <IconEdit color={loadingEdit ? "gray" : "white"} />
                 </Grid.Col>
                 <Grid.Col span={"auto"}>
                   <Group>
-                    <Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
+                    <Text c={loadingEdit ? "gray" : "white"}>Edit posting</Text>{" "}
                     {loadingEdit ? <Loader size={"sm"} /> : ""}
                   </Group>
                 </Grid.Col>
@@ -109,16 +126,16 @@ export default function ComponentForum_BerandaMoreButton({
               >
                 <Grid.Col span={"content"}>
                   {statusId === 1 ? (
-                    <IconSquareRoundedX color="red" />
+                    <IconSquareRoundedX color="orange" />
                   ) : (
-                    <IconSquareCheck />
+                    <IconSquareCheck color="white" />
                   )}
                 </Grid.Col>
                 <Grid.Col span={"auto"}>
                   {statusId === 1 ? (
-                    <Text c={"red"}>Tutup forum</Text>
+                    <Text c={"orange"}>Tutup forum</Text>
                   ) : (
-                    <Text>Buka forum</Text>
+                    <Text c={"white"}>Buka forum</Text>
                   )}
                 </Grid.Col>
               </Grid>
@@ -139,36 +156,27 @@ export default function ComponentForum_BerandaMoreButton({
             </Stack>
           )}
 
-          {userLoginId == authorId ? (
+          <Button
-            ""
+            bg={MainColor.yellow}
-          ) : (
+            color={"yellow"}
-            <Grid
+            style={{
-              onClick={() => {
+              border: `1px solid ${AccentColor.yellow}`,
-                setLoadingReport(true);
+            }}
-                router.push(RouterForum.report_posting + postingId);
+            radius={"xl"}
-              }}
+            onClick={close}
-            >
+          >
-              <Grid.Col span={"content"}>
+            <Text c={"white"}>Batal</Text>
-                <IconFlag3 color={loadingReport ? "gray" : "black"} />
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Group>
-                  <Text c={loadingReport ? "gray" : "black"}>
-                    Laporkan posting
-                  </Text>{" "}
-                  {loadingReport ? <Loader size={"sm"} /> : ""}
-                </Group>
-              </Grid.Col>
-            </Grid>
-          )}
-
-          <Button variant="outline" radius={"xl"} onClick={close}>
-            Batal
           </Button>
         </Stack>
       </Drawer>
 
       <Modal
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={openDel}
         onClose={() => {
           setOpenDel(false);
@@ -188,6 +196,12 @@ export default function ComponentForum_BerandaMoreButton({
       </Modal>
 
       <Modal
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `1px solid ${AccentColor.blue}`,
+          },
+        }}
         opened={openStatusClose}
         onClose={() => setOpenStatusClose(false)}
         centered
@@ -252,7 +266,9 @@ function ButtonDelete({
   return (
     <>
       <Stack>
-        <Title order={6}>Yakin menghapus posting ini ?</Title>
+        <Title order={6} color="white">
+          Yakin menghapus posting ini ?
+        </Title>
         <Group position="center">
           <Button radius={"xl"} onClick={() => setOpenDel(false)}>
             Batal
@@ -340,8 +356,6 @@ function ButtonStatus({
         },
       };
 
-      console.log(updateDetail);
-
       mqtt_client.publish(
         "Forum_detail_ganti_status",
         JSON.stringify({
@@ -401,8 +415,6 @@ function ButtonStatus({
         },
       };
 
-      console.log(updateDetail.ForumMaster_StatusPosting);
-
       mqtt_client.publish(
         "Forum_detail_ganti_status",
         JSON.stringify({
@@ -419,9 +431,13 @@ function ButtonStatus({
     <>
       <Stack>
         {statusId === 1 ? (
-          <Title order={6}>Yakin menutup forum ini ?</Title>
+          <Title color={"white"} order={6}>
+            Yakin menutup forum ini ?
+          </Title>
         ) : (
-          <Title order={6}>Yakin membuka forum ini ?</Title>
+          <Title color={"white"} order={6}>
+            Yakin membuka forum ini ?
+          </Title>
         )}
         <Group position="center">
           <Button radius={"xl"} onClick={() => setOpenStatus(false)}>

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

@@ -1,16 +1,16 @@
 "use client";
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import { ActionIcon, Card, Divider, Group, Stack, Text } from "@mantine/core";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import { ActionIcon, Card, 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_BerandaHeaderCard from "./card_header";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/component_global/color/color_pallet";
 
 export default function ComponentForum_BerandaCardView({
   data,
@@ -31,7 +31,6 @@ export default function ComponentForum_BerandaCardView({
 
   return (
     <>
-      {/* <pre>{JSON.stringify(data, null,2)}</pre> */}
       <Card
         mb={"md"}
         p={"xl"}

src/app_modules/forum/detail/layout.tsx

@@ -8,6 +8,8 @@ import { IconChevronLeft } from "@tabler/icons-react";
 import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 import { revalidatePath } from "next/cache";
 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 const dynamic = "force-dynamic";
 export default function LayoutForum_Detail({
@@ -22,7 +24,13 @@ export default function LayoutForum_Detail({
 
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Postingan" posotion={"left"} />}
+      >
+        {children}
+      </ComponentGlobal_UI_LayoutTamplate>
+
+      {/* <AppComponentGlobal_LayoutTamplate
         header={
           <Header height={50} sx={{ borderStyle: "none" }}>
             <Group h={50} px={"md"}>
@@ -31,7 +39,6 @@ export default function LayoutForum_Detail({
                 variant="transparent"
                 onClick={() => {
                   setLoading(true);
-                  // revalidatePath("/dev/forum/main");
                   router.back();
                 }}
               >
@@ -43,7 +50,7 @@ export default function LayoutForum_Detail({
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </AppComponentGlobal_LayoutTamplate> */}
     </>
   );
 }

src/app_modules/forum/detail/main_detail.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import {
+import { Center, Loader, Stack } from "@mantine/core";
-  Stack
-} from "@mantine/core";
 import _ from "lodash";
 import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
 
@@ -11,21 +9,26 @@ 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_KomentarView from "../component/detail_component/detail_list_komentar";
 import ComponentForum_DetailForumView from "../component/detail_component/detail_view";
-
+import { ScrollOnly } from "next-scroll-loader";
+import { forum_funGetAllKomentarById } from "../fun/get/get_all_komentar_by_id";
 
 export default function Forum_MainDetail({
   dataPosting,
   listKomentar,
   userLoginId,
+  countKomentar,
 }: {
   dataPosting: MODEL_FORUM_POSTING;
   listKomentar: MODEL_FORUM_KOMENTAR[];
   userLoginId: string;
+  countKomentar: number
 }) {
   const [data, setData] = useState(dataPosting);
-  const [komentar, setKomentar] = useState(listKomentar);
+  const [lsKomentar, setLsKomentar] = useState(listKomentar);
+
+  const [activePage, setActivePage] = useState(1);
 
   // useShallowEffect(() => {
   //   onLoadKomentar({
@@ -64,10 +67,10 @@ export default function Forum_MainDetail({
 
   return (
     <>
-      <Stack px={"xs"}>
+      <Stack>
         <ComponentForum_DetailForumView
           data={data}
-          totalKomentar={komentar.length}
+          totalKomentar={countKomentar}
           userLoginId={userLoginId}
           onLoadData={(val) => {
             setData(val);
@@ -78,7 +81,7 @@ export default function Forum_MainDetail({
           <ComponentForum_DetailCreateKomentar
             postingId={dataPosting?.id}
             onSetKomentar={(val) => {
-              setKomentar(val);
+              setLsKomentar(val);
             }}
             data={data}
             userLoginId={userLoginId}
@@ -87,20 +90,35 @@ export default function Forum_MainDetail({
           ""
         )}
 
-        <ComponentForum_ListKomentarView
+        <ScrollOnly
-          listKomentar={komentar}
+          height={lsKomentar.length < 5 ? "50vh" : "70vh"}
-          setKomentar={setKomentar}
+          renderLoading={() => (
-          postingId={data?.id}
+            <Center mt={"lg"}>
-          userLoginId={userLoginId}
+              <Loader color={"yellow"} />
-        />
+            </Center>
-        
+          )}
+          data={lsKomentar}
+          setData={setLsKomentar}
+          moreData={async () => {
+            const loadData = await forum_funGetAllKomentarById({
+              postingId: data.id,
+              page: activePage + 1,
+            });
+            setActivePage((val) => val + 1);
+
+            return loadData;
+          }}
+        >
+          {(item) => (
+            <ComponentForum_KomentarView
+              data={item}
+              setKomentar={setLsKomentar}
+              postingId={data?.id}
+              userLoginId={userLoginId}
+            />
+          )}
+        </ScrollOnly>
       </Stack>
     </>
   );
 }
-
-
-
-
-
-

src/app_modules/forum/forumku/forum_profile.tsx

@@ -6,15 +6,7 @@ import {
   MainColor,
 } from "@/app_modules/component_global/color/color_pallet";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
-import {
+import { Avatar, Button, Center, Grid, Stack, Text } from "@mantine/core";
-  Center,
-  Avatar,
-  Stack,
-  Button,
-  Divider,
-  Grid,
-  Text,
-} from "@mantine/core";
 import { IconCircleFilled } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
@@ -30,17 +22,16 @@ export default function ComponentForum_ViewForumProfile({
   const router = useRouter();
   const [loading, setLoading] = useState(false);
 
-  // if (loading) return <ComponentGlobal_V2_LoadingPage />;
-
   return (
     <>
       <Center>
         <Avatar
+          bg={"gray"}
           radius={"100%"}
           sx={{
             borderStyle: "solid",
             borderWidth: "0.5px",
-            borderColor: "black",
+            borderColor: AccentColor.yellow,
           }}
           size={100}
           alt="foto"

src/app_modules/forum/forumku/index.tsx

@@ -1,6 +1,10 @@
 "use client";
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
   ActionIcon,
@@ -14,15 +18,13 @@ import {
 import { useWindowScroll } from "@mantine/hooks";
 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_ForumkuMainCardView from "../component/forumku_component/forumku_view";
+import { forum_getAllPostingByAuhtorId } from "../fun/get/get_list_posting_by_author_id";
 import { MODEL_FORUM_POSTING } from "../model/interface";
 import ComponentForum_ViewForumProfile from "./forum_profile";
-import 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,
@@ -72,7 +74,7 @@ export default function Forum_Forumku({
         ""
       )}
 
-      <Stack spacing={"xl"} px={"sm"}>
+      <Stack spacing={"xl"}>
         <ComponentForum_ViewForumProfile
           auhtorSelectedData={auhtorSelectedData}
           totalPosting={totalPosting}
@@ -90,10 +92,10 @@ export default function Forum_Forumku({
         ) : (
           // --- Main component --- //
           <ScrollOnly
-            height="80vh"
+            height={data.length < 5 ? "60vh" : "100vh"}
             renderLoading={() => (
               <Center mt={"lg"}>
-                <Loader />
+                <Loader color={"yellow"} />
               </Center>
             )}
             data={data}

src/app_modules/forum/fun/count/count_total_komentar_by_id.ts

@@ -2,31 +2,19 @@
 
 import prisma from "@/app/lib/prisma";
 
-
+// PERCOBAAN
-// PERCOBAAN 
+export async function forum_countTotalKomenById(postingId: string) {
-export async function forum_countTotalKomenById(postingId: any[]) {
   // console.log(postingId)
 
-  const data = postingId.map(async (e) => {
+  const get = await prisma.forum_Komentar.count({
-    const get = await prisma.forum_Komentar.count({
+    where: {
-      where: {
+      forum_PostingId: postingId,
-        forum_PostingId: e,
+      isActive: true,
-        isActive: true,
+    },
-      },
-      select: {
-        forum_PostingId: true,
 
-      },
-    });
-    console.log(get);
   });
 
-  //   const data = await prisma.forum_Komentar.count({
+  // console.log(get);
-  //     where: {
-  //       forum_PostingId: postingId,
-  //       isActive: true,
-  //     },
-  //   });
 
-  //   return data;
+  return get;
 }

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

@@ -11,18 +11,19 @@ export async function forum_funCreateReportKomentar({
   kategoriId: any;
 }) {
   const authorId = await user_getOneUserId();
+  // console.log(kategoriId);
 
-  const cekId = await prisma.forumMaster_KategoriReport.findFirst({
+  // const cekId = await prisma.forumMaster_KategoriReport.findFirst({
-    where: {
+  //   where: {
-      title: kategoriId,
+  //     title: kategoriId,
-    },
+  //   },
-  });
+  // });
 
   try {
     const createReport = await prisma.forum_ReportKomentar.create({
       data: {
         userId: authorId,
-        forumMaster_KategoriReportId: cekId?.id,
+        forumMaster_KategoriReportId: kategoriId,
         forum_KomentarId: komentarId,
       },
     });

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

@@ -1,21 +0,0 @@
-"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,8 +2,19 @@
 
 import prisma from "@/app/lib/prisma";
 
-export async function forum_funGetAllKomentarById(postingId: string) {
+export async function forum_funGetAllKomentarById({
+  postingId,
+  page,
+}: {
+  postingId: string;
+  page: number;
+}) {
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
   const data = await prisma.forum_Komentar.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       createdAt: "desc",
     },
@@ -19,6 +30,7 @@ export async function forum_funGetAllKomentarById(postingId: string) {
       Author: {
         select: {
           id: true,
+          username: true,
           Profile: {
             select: {
               name: true,

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

@@ -1,9 +1,7 @@
 "use server";
 
-import _ from "lodash";
 import prisma from "@/app/lib/prisma";
-import { forum_countOneTotalKomentarById } from "../count/count_one_total_komentar_by_id";
+import _ from "lodash";
-import { forum_countTotalKomenById } from "../count/count_total_komentar_by_id";
 
 export async function forum_getListAllPosting() {
   const get = await prisma.forum_Posting.findMany({

src/app_modules/forum/main/beranda.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
 import mqtt_client from "@/util/mqtt_client";
 import {
   ActionIcon,
@@ -22,10 +23,6 @@ import { useState } from "react";
 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,
@@ -185,7 +182,7 @@ export default function Forum_Beranda({
             height="83vh"
             renderLoading={() => (
               <Center mt={"lg"}>
-                <Loader />
+                <Loader color={"yellow"} />
               </Center>
             )}
             data={data}

src/app_modules/forum/main/layout.tsx

@@ -40,21 +40,6 @@ export default function LayoutForum_Main({
   const [hotMenu, setHotMenu] = useState(1);
   const [loading, setLoading] = useState(false);
 
-  const listFooter = [
-    {
-      id: 1,
-      name: "Beranda",
-      path: RouterForum.beranda,
-      icon: <IconHome />,
-    },
-
-    {
-      id: 2,
-      name: "ForumKu",
-      path: RouterForum.forumku,
-      icon: <IconCircle />,
-    },
-  ];
 
   return (
     <>

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

@@ -9,11 +9,14 @@ 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 {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 import forum_getOneKategoriById from "../../fun/get/get_one_kategori_by_id";
-import getMaster_NamaBank from "@/app_modules/investasi/fun/master/get_nama_bank";
+import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
 
 export default function Forum_ReportKomentar({
   komentarId,
@@ -24,12 +27,21 @@ export default function Forum_ReportKomentar({
   listReport: MODEL_FORUM_MASTER_REPORT[];
   userLoginId: string;
 }) {
-  const [reportValue, setReportValue] = useState("Kebencian");
+  const [reportValue, setReportValue] = useState("1");
 
   return (
     <>
-      <Stack px={"sm"}>
+      <Stack
+        mb={"md"}
+        p={"sm"}
+        bg={MainColor.darkblue}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px 10px 10px 10px",
+        }}
+      >
         <Radio.Group
+          c={"white"}
           value={reportValue as any}
           onChange={(val) => {
             setReportValue(val);
@@ -37,10 +49,14 @@ export default function Forum_ReportKomentar({
         >
           <Stack spacing={"xl"}>
             {listReport.map((e) => (
-              <Stack key={e.id}>
+              <Stack key={e?.id.toString()}>
                 <Radio
-                  value={e.title}
+                  value={e?.id.toString()}
-                  label={<Title order={5}>{e.title}</Title>}
+                  label={
+                    <Title c={"white"} order={5}>
+                      {e.title}
+                    </Title>
+                  }
                 />
                 <Text>{e.deskripsi}</Text>
               </Stack>
@@ -48,7 +64,7 @@ export default function Forum_ReportKomentar({
           </Stack>
         </Radio.Group>
         <ButtonAction
-          kategoriId={reportValue}
+          kategoriId={toNumber(reportValue)}
           komentarId={komentarId}
           userLoginId={userLoginId}
         />
@@ -62,12 +78,13 @@ function ButtonAction({
   komentarId,
   userLoginId,
 }: {
-  kategoriId: string;
+  kategoriId: number;
   komentarId: string;
   userLoginId: string;
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
+  const [isLoadingLain, setIsLoadingLain] = useState(false);
 
   async function onReport() {
     const report = await forum_funCreateReportKomentar({
@@ -76,35 +93,29 @@ function ButtonAction({
     });
 
     if (report.status === 201) {
-      ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
+      const getKategori = await forum_getOneKategoriById({
+        kategoriId: kategoriId,
+      });
+      // console.log(getKategori);
+      const dataNotif = {
+        appId: komentarId,
+        pesan: getKategori?.deskripsi,
+        kategoriApp: "FORUM",
+        title: getKategori?.title,
+        userId: userLoginId,
+        status: "Report Komentar",
+      };
+      const createNotif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (createNotif.status === 201) {
+        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+      }
+
       setLoading(true);
       router.back();
-
+      return ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
-      // 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);
     }
@@ -113,10 +124,13 @@ function ButtonAction({
     <>
       <Stack mt={"md"}>
         <Button
+          loaderPosition="center"
+          loading={isLoadingLain ? true : false}
           radius={"xl"}
-          onClick={() =>
+          onClick={() => {
-            router.replace(RouterForum.report_komentar_lainnya + komentarId)
+            setIsLoadingLain(true);
-          }
+            router.replace(RouterForum.report_komentar_lainnya + komentarId);
+          }}
         >
           Lainnya
         </Button>

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

@@ -9,8 +9,16 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_glob
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import { forum_funCreateReportPostingLainnya } from "../../fun/create/fun_create_report_posting_lainnya";
 import { forum_funCreateReportKomentarLainnya } from "../../fun/create/fun_create_report_komentar_lainnya";
+import mqtt_client from "@/util/mqtt_client";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 
-export default function Forum_ReportKomentarLainnya({ komentarId }: { komentarId: string }) {
+export default function Forum_ReportKomentarLainnya({
+  komentarId,
+  userLoginId,
+}: {
+  komentarId: string;
+  userLoginId: string;
+}) {
   const [deskripsi, setDeskripsi] = useState("");
   return (
     <>
@@ -23,7 +31,11 @@ export default function Forum_ReportKomentarLainnya({ komentarId }: { komentarId
             setDeskripsi(val.currentTarget.value);
           }}
         />
-        <ButtonAction komentarId={komentarId} deskripsi={deskripsi} />
+        <ButtonAction
+          komentarId={komentarId}
+          deskripsi={deskripsi}
+          userLoginId={userLoginId}
+        />
       </Stack>
     </>
   );
@@ -32,23 +44,43 @@ export default function Forum_ReportKomentarLainnya({ komentarId }: { komentarId
 function ButtonAction({
   komentarId,
   deskripsi,
+  userLoginId,
 }: {
   komentarId: string;
   deskripsi: string;
+  userLoginId: string;
 }) {
   const router = useRouter();
 
   async function onReport() {
-    await forum_funCreateReportKomentarLainnya(komentarId, deskripsi).then(
+    const report = await forum_funCreateReportKomentarLainnya(
-      (res) => {
+      komentarId,
-        if (res.status === 201) {
+      deskripsi
-          ComponentGlobal_NotifikasiBerhasil(res.message);
-          router.back();
-        } else {
-          ComponentGlobal_NotifikasiGagal(res.message);
-        }
-      }
     );
+
+    if (report.status === 201) {
+      const dataNotif = {
+        appId: komentarId,
+        pesan: deskripsi,
+        kategoriApp: "FORUM",
+        title: "Lainnya",
+        userId: userLoginId,
+        status: "Report Komentar",
+      };
+
+      const createNotifikasi = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (createNotifikasi.status === 201) {
+        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+      }
+
+      ComponentGlobal_NotifikasiBerhasil(report.message);
+      router.back();
+    } else {
+      ComponentGlobal_NotifikasiGagal(report.message);
+    }
   }
   return (
     <>
@@ -61,7 +93,15 @@ function ButtonAction({
         >
           Batal
         </Button>
-        <Button radius={"xl"} color="orange" onClick={() => onReport()}>
+        <Button
+          style={{
+            transition: "0.5s",
+          }}
+          disabled={deskripsi === "" ? true : false}
+          radius={"xl"}
+          color="orange"
+          onClick={() => onReport()}
+        >
           Report
         </Button>
       </Group>

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

@@ -1,12 +1,10 @@
 "use client";
 
-import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
-import React from "react";
-import ComponentForum_HeaderTamplate from "../../component/header/header_tamplate";
-import { IconChevronLeft, IconX } from "@tabler/icons-react";
-import router from "next/router";
-import ComponentForum_HeaderRataKiri from "../../component/header/header_rata_kiri";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import React from "react";
+import ComponentForum_HeaderRataKiri from "../../component/header/header_rata_kiri";
+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_ReportKomentar({
   children,
@@ -15,13 +13,20 @@ export default function LayoutForum_ReportKomentar({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
+        header={
+          <ComponentGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Komentar" />
+        }
+      >
+        {children}
+      </ComponentGlobal_UI_LayoutTamplate>
+      {/* <AppComponentGlobal_LayoutTamplate
         header={
           <ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Komentar"/>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </AppComponentGlobal_LayoutTamplate> */}
     </>
   );
 }

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

@@ -1,18 +1,21 @@
 "use client";
 
-import { Box, Button, Paper, Radio, Stack, Text, Title } from "@mantine/core";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+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 notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+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_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 mqtt_client from "@/util/mqtt_client";
-import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
-import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 import forum_getOneKategoriById from "../../fun/get/get_one_kategori_by_id";
-import { toNumber } from "lodash";
+import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
 
 export default function Forum_ReportPosting({
   postingId,
@@ -27,8 +30,17 @@ export default function Forum_ReportPosting({
 
   return (
     <>
-      <Stack px={"sm"}>
+      <Stack
+        mb={"md"}
+        p={"sm"}
+        bg={MainColor.darkblue}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px 10px 10px 10px",
+        }}
+      >
         <Radio.Group
+          c={"white"}
           value={reportValue as any}
           onChange={(val: any) => {
             setReportValue(val);
@@ -39,7 +51,11 @@ export default function Forum_ReportPosting({
               <Stack key={e?.id.toString()}>
                 <Radio
                   value={e.id.toString()}
-                  label={<Title order={5}>{e.title}</Title>}
+                  label={
+                    <Title c={"white"} order={5}>
+                      {e.title}
+                    </Title>
+                  }
                 />
                 <Text>{e.deskripsi}</Text>
               </Stack>
@@ -66,7 +82,8 @@ function ButtonAction({
   userLoginId: string;
 }) {
   const router = useRouter();
-  const [loading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingLain, setIsLoadingLain] = useState(false);
 
   async function onReport() {
     const report = await forum_funCreateReportPosting({
@@ -98,8 +115,7 @@ function ButtonAction({
       if (createNotifikasi.status === 201) {
         mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
       }
-      setLoading(true);
+      setIsLoading(true);
-
     } else {
       ComponentGlobal_NotifikasiGagal(report.message);
     }
@@ -108,10 +124,13 @@ function ButtonAction({
     <>
       <Stack mt={"md"}>
         <Button
+          loaderPosition="center"
+          loading={isLoadingLain ? true : false}
           radius={"xl"}
-          onClick={() =>
+          onClick={() => {
-            router.replace(RouterForum.report_posting_lainnya + postingId)
+            setIsLoadingLain(true);
-          }
+            router.replace(RouterForum.report_posting_lainnya + postingId);
+          }}
         >
           Lainnya
         </Button>
@@ -119,7 +138,7 @@ function ButtonAction({
           radius={"xl"}
           color="orange"
           loaderPosition="center"
-          loading={loading ? true : false}
+          loading={isLoading ? true : false}
           onClick={() => onReport()}
         >
           Report

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

@@ -1,12 +1,8 @@
 "use client";
 
-import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentForum_HeaderTamplate from "../../component/header/header_tamplate";
-import { IconChevronLeft, IconX } from "@tabler/icons-react";
-import router from "next/router";
-import ComponentForum_HeaderRataKiri from "../../component/header/header_rata_kiri";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutForum_ReportPosting({
   children,
@@ -15,13 +11,15 @@ export default function LayoutForum_ReportPosting({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
         header={
-          <ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Posting" />
+          <ComponentGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Posting" />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
+
+  
     </>
   );
 }

src/app_modules/forum/splash/index.tsx

@@ -2,8 +2,17 @@
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
-import { Center, Image, Paper, Stack } from "@mantine/core";
+import {
+  Avatar,
+  Center,
+  Image,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+} from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
+import { IconMessages } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
 export default function Forum_Splash() {
@@ -26,18 +35,9 @@ export default function Forum_Splash() {
 function ViewSplash() {
   return (
     <>
-      <Stack h={"90vh"} align="center" justify="center">
+      <Stack h={"90vh"} align="center" justify="center" spacing={"xl"}>
-        <Paper
+        <IconMessages size={350} color="white" />
-          radius={"100%"}
+        <Loader variant="dots" color="white" />
-          // 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/view.tsx

@@ -3,12 +3,16 @@
 import {
   ActionIcon,
   Box,
+  Center,
   Group,
   Image,
+  Loader,
+  LoadingOverlay,
+  Overlay,
   Paper,
   SimpleGrid,
   Stack,
-  Text
+  Text,
 } from "@mantine/core";
 
 import {
@@ -17,20 +21,18 @@ import {
   IconHeartHandshake,
   IconPackageImport,
   IconPresentation,
-  IconUserSearch
+  IconUserSearch,
 } from "@tabler/icons-react";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 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";
@@ -43,8 +45,8 @@ export default function HomeView({
   dataJob: MODEL_JOB[];
 }) {
   const router = useRouter();
-  const [loading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
-  const [visible, { toggle }] = useDisclosure(false);
+  const [pageId, setPageId] = useState(0);
 
   const listPageOnBox = [
     {
@@ -83,8 +85,6 @@ export default function HomeView({
 
   return (
     <>
-      {visible ? <ComponentGlobal_V2_LoadingPage /> : ""}
-
       <Box p={"md"}>
         <Paper
           radius={"xl"}
@@ -127,8 +127,9 @@ export default function HomeView({
                         "Cooming Soon !!"
                       );
                     } else {
-                      toggle();
+                      setIsLoading(true);
-                      return router.push(e.link);
+                      setPageId(e.id);
+                      router.push(e.link);
                     }
                   }
                 }}
@@ -139,7 +140,7 @@ export default function HomeView({
                     variant="transparent"
                     c={e.link === "" ? "gray.3" : "white"}
                   >
-                    {e.icon}
+                    {isLoading && e.id === pageId ? <Loader /> : e.icon}
                   </ActionIcon>
                   <Text c={e.link === "" ? "gray.3" : "white"} fz={"sm"}>
                     {e.name}
@@ -172,7 +173,6 @@ export default function HomeView({
                       "Cooming Soon !!"
                     );
                   } else {
-                    toggle();
                     return router.push(routePageJob.link);
                   }
                 }