Notifiaksi Forum

# feat
- Notifikasi user to user
- Realtime user to user
## No issuee

package.json

@@ -53,7 +53,7 @@
     "mqtt": "^5.5.0",
     "next": "^13.5.4-canary.8",
     "next-dev": "^1.1.9",
-    "next-scroll-loader": "^1.0.5",
+    "next-scroll-loader": "^1.0.9",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-countdown": "^2.3.5",

prisma/schema.prisma

@@ -865,8 +865,9 @@ model Notifikasi {
   Role       MasterUserRole? @relation(fields: [userRoleId], references: [id])
   userRoleId String
 
-  User    User    @relation("UserNotifikasi", fields: [userId], references: [id], map: "NotifikasiUser")
+  User    User?    @relation("UserNotifikasi", fields: [userId], references: [id], map: "NotifikasiUser")
-  userId  String
+  userId  String?
   Admin   User?   @relation("AdminNotifikasi", fields: [adminId], references: [id], map: "NotifikasiAdmin")
   adminId String?
+
 }

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

@@ -3,22 +3,23 @@ import { forum_getKomentarById } from "@/app_modules/forum/fun/get/get_komentar_
 import { forum_getOnePostingById } from "@/app_modules/forum/fun/get/get_one_posting_by_id";
 import { forum_countOneTotalKomentarById } from "@/app_modules/forum/fun/count/count_one_total_komentar_by_id";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { redirect } from "next/navigation";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let postingId = params.id;
 
-  const userLoginId = await user_getOneUserId()
+  const userLoginId = await user_getOneUserId();
   const dataPosting = await forum_getOnePostingById(postingId);
   const listKomentar = await forum_getKomentarById(postingId);
-  const totalKomentar = await forum_countOneTotalKomentarById(postingId)
 
-  
+  dataPosting?.isActive === false && redirect(RouterForum.beranda);
+
   return (
     <>
       <Forum_Detail
         dataPosting={dataPosting as any}
         listKomentar={listKomentar as any}
-        totalKomentar={totalKomentar}
         userLoginId={userLoginId}
       />
     </>

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

@@ -1,20 +1,17 @@
-
 import { Forum_Beranda } from "@/app_modules/forum";
-import { forum_getListAllPosting } from "@/app_modules/forum/fun/get/get_list_all_posting";
 import { forum_new_getAllPosting } from "@/app_modules/forum/fun/get/new_get_all_posting";
 import forum_v2_getAllPosting from "@/app_modules/forum/fun/get/v2_get_all_posting";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
 export default async function Page() {
-  const listForum = await forum_v2_getAllPosting({});
+  const listForum = await forum_new_getAllPosting({ page: 1 });
   const userLoginId = await user_getOneUserId();
 
+  // console.log(JSON.stringify(listForum, null, 2));
+
   return (
     <>
-      <Forum_Beranda
+      <Forum_Beranda listForum={listForum as any} userLoginId={userLoginId} />
-        listForum={listForum as any}
-        userLoginId={userLoginId}
-      />
     </>
   );
 }

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

@@ -1,15 +1,20 @@
 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)
 
   return (
     <>
       <Forum_ReportPosting
         postingId={postingId}
         listReport={listReport as any}
+        userLoginId={userLoginId}
       />
     </>
   );

src/app_modules/admin/job/child/publish/index.tsx

@@ -114,7 +114,7 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
               Lihat
             </Button>
           ) : (
-            <Center w={200}>
+            <Center w={200} >
               <Text fw={"bold"} fz={"xs"} fs={"italic"}>
                 Tidak ada poster
               </Text>
@@ -176,7 +176,7 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
               verticalSpacing={"md"}
               horizontalSpacing={"md"}
               p={"md"}
-              w={1500}
+              w={"100%"}
               h={"100%"}
               striped
               highlightOnHover

src/app_modules/admin/job/child/reject/index.tsx

@@ -249,7 +249,7 @@ function TableStatus({ listReject }: { listReject: any }) {
               verticalSpacing={"md"}
               horizontalSpacing={"md"}
               p={"md"}
-              w={1500}
+              w={"100%"}
               h={"100%"}
               striped
               highlightOnHover

src/app_modules/admin/job/child/review/index.tsx

@@ -278,7 +278,7 @@ function TableStatus({ listReview }: { listReview: any }) {
               verticalSpacing={"md"}
               horizontalSpacing={"md"}
               p={"md"}
-              w={1500}
+              w={"100%"}
               h={"100%"}
               striped
               highlightOnHover
@@ -375,6 +375,7 @@ async function onReject({
   if (reject.status === 200) {
     const loadData = await adminJob_getListReview({ page: 1 });
     onLoadData(loadData);
+
     ComponentGlobal_NotifikasiBerhasil(reject.message);
 
     const dataNotif = {
@@ -393,7 +394,7 @@ async function onReject({
     if (notif.status === 201) {
       mqtt_client.publish(
         "USER",
-        JSON.stringify({ userId: reject?.data?.authorId, count: 1 })
+        JSON.stringify({ userId: dataNotif.userId, count: 1 })
       );
     }
   } else {

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

@@ -0,0 +1,466 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  Stack,
+  Grid,
+  Avatar,
+  Divider,
+  Text,
+  Group,
+  ThemeIcon,
+  ActionIcon,
+  Badge,
+  Button,
+  Drawer,
+  Loader,
+  Modal,
+  Title,
+} 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,
+  IconSquareCheck,
+  IconSquareRoundedX,
+  IconTrash,
+} from "@tabler/icons-react";
+import { IconCircle } from "@tabler/icons-react";
+import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
+import ComponentForum_DetailMoreButton from "../more_button/detail_more_button";
+import { MODEL_FORUM_POSTING } from "../../model/interface";
+import { useDisclosure } from "@mantine/hooks";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+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 { useState } from "react";
+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_getOnePostingById } from "../../fun/get/get_one_posting_by_id";
+import mqtt_client from "@/util/mqtt_client";
+
+export default function ComponentForum_DetailHeader({
+  data,
+  userLoginId,
+  onLoadData,
+}: {
+  data?: MODEL_FORUM_POSTING;
+  userLoginId: string;
+  onLoadData: (val: any) => void;
+}) {
+  const router = useRouter();
+
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (data?.Author?.id) {
+                router.push(RouterForum.forumku + data?.Author?.id);
+              } else {
+                ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+              }
+            }}
+          >
+            <Avatar
+              size={40}
+              sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+              radius={"xl"}
+              bg={"gray.1"}
+              src={
+                data?.Author.Profile.imagesId
+                  ? RouterProfile.api_foto_profile +
+                    data?.Author.Profile.imagesId
+                  : "/aset/global/avatar.png"
+              }
+            />
+          </Grid.Col>
+
+          <Grid.Col span={"auto"}>
+            <Stack spacing={0}>
+              <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                {data?.Author.username ? data?.Author.username : "Nama author "}
+              </Text>
+              <Badge
+                w={70}
+                variant="light"
+                color={
+                  (data?.ForumMaster_StatusPosting.id as any) === 1
+                    ? "green"
+                    : "red"
+                }
+              >
+                <Text fz={10}>
+                  {(data?.ForumMaster_StatusPosting.id as any) === 1
+                    ? "Open"
+                    : "Close"}
+                </Text>
+              </Badge>
+            </Stack>
+          </Grid.Col>
+
+          <Grid.Col span={"content"}>
+            <ComponentForum_DetailButtonMore_V2
+              postingId={data?.id}
+              authorId={data?.Author.id}
+              userLoginId={userLoginId}
+              statusId={data?.forumMaster_StatusPostingId}
+              onLoadData={(val) => {
+                onLoadData(val);
+              }}
+            />
+          </Grid.Col>
+        </Grid>
+        {/* {isPembatas ? <Divider /> : ""} */}
+      </Stack>
+    </>
+  );
+}
+
+function ComponentForum_DetailButtonMore_V2({
+  authorId,
+  postingId,
+  statusId,
+  userLoginId,
+  onLoadData,
+}: {
+  authorId: any;
+  postingId?: any;
+  statusId: any;
+  userLoginId: any;
+  onLoadData: (val: any) => void;
+}) {
+  const router = useRouter();
+  const [opened, { open, close }] = useDisclosure(false);
+  const [openDel, setOpenDel] = useState(false);
+  const [openStatusClose, setOpenStatusClose] = useState(false);
+
+  // loading
+  const [loadingEdit, setLoadingEdit] = useState(false);
+  const [loadingReport, setLoadingReport] = useState(false);
+
+  //   if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
+
+  return (
+    <>
+      <Drawer
+        // className={classes.radiusCustom}
+        opened={opened}
+        onClose={close}
+        withCloseButton={false}
+        overlayProps={{ opacity: 0.1, blur: 1 }}
+        position="bottom"
+        size={"auto"}
+      >
+        <Stack>
+          {userLoginId != authorId ? (
+            ""
+          ) : (
+            <Stack>
+              <Grid
+                onClick={() => {
+                  close();
+                  setOpenStatusClose(true);
+                }}
+              >
+                <Grid.Col span={"content"}>
+                  {statusId === 1 ? (
+                    <IconSquareRoundedX color="red" />
+                  ) : (
+                    <IconSquareCheck />
+                  )}
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  {statusId === 1 ? (
+                    <Text c={"red"}>Tutup forum</Text>
+                  ) : (
+                    <Text>Buka forum</Text>
+                  )}
+                </Grid.Col>
+              </Grid>
+
+              <Grid
+                onClick={() => {
+                  close();
+                  setOpenDel(true);
+                }}
+              >
+                <Grid.Col span={"content"}>
+                  <IconTrash color="red" />
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Text c={"red"}>Hapus</Text>
+                </Grid.Col>
+              </Grid>
+
+              <Grid
+                onClick={() => {
+                  setLoadingEdit(true);
+                  router.push(RouterForum.edit_posting + postingId);
+                }}
+              >
+                <Grid.Col span={"content"}>
+                  <IconEdit color={loadingEdit ? "gray" : "black"} />
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Group>
+                    <Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
+                    {loadingEdit ? <Loader size={"sm"} /> : ""}
+                  </Group>
+                </Grid.Col>
+              </Grid>
+            </Stack>
+          )}
+
+          {userLoginId == authorId ? (
+            ""
+          ) : (
+            <Grid
+              onClick={() => {
+                setLoadingReport(true);
+                router.push(RouterForum.report_posting + postingId);
+              }}
+            >
+              <Grid.Col span={"content"}>
+                <IconFlag3 color={loadingReport ? "gray" : "black"} />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Group>
+                  <Text c={loadingReport ? "gray" : "black"}>
+                    Laporkan posting
+                  </Text>{" "}
+                  {loadingReport ? <Loader size={"sm"} /> : ""}
+                </Group>
+              </Grid.Col>
+            </Grid>
+          )}
+
+          <Button variant="outline" radius={"xl"} onClick={close}>
+            Batal
+          </Button>
+        </Stack>
+      </Drawer>
+
+      <Modal
+        opened={openDel}
+        onClose={() => {
+          setOpenDel(false);
+        }}
+        centered
+        withCloseButton={false}
+      >
+        <ButtonDelete postingId={postingId} setOpenDel={setOpenDel} />
+      </Modal>
+
+      <Modal
+        opened={openStatusClose}
+        onClose={() => setOpenStatusClose(false)}
+        centered
+        withCloseButton={false}
+      >
+        <ButtonStatus
+          postingId={postingId}
+          setOpenStatus={setOpenStatusClose}
+          statusId={statusId}
+          onLoadData={(val) => {
+            onLoadData(val);
+          }}
+        />
+      </Modal>
+
+      <ActionIcon variant="transparent" onClick={() => open()}>
+        <IconDots size={20} />
+      </ActionIcon>
+    </>
+  );
+}
+
+function ButtonDelete({
+  postingId,
+  setOpenDel,
+}: {
+  postingId?: string;
+  setOpenDel: any;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  if (loading) return <ComponentGlobal_V2_LoadingPage />;
+
+  async function onDelete() {
+    setOpenDel(false);
+    await forum_funDeletePostingById(postingId as any).then((res) => {
+      if (res.status === 200) {
+        ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
+        setLoading(true);
+        router.back();
+
+        // mqtt_client.publish(
+        //   "Forum_detail_hapus_data",
+        //   JSON.stringify({
+        //     id: postingId,
+        //   })
+        // );
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    });
+  }
+  return (
+    <>
+      <Stack>
+        <Title order={6}>Yakin menghapus posting ini ?</Title>
+        <Group position="center">
+          <Button radius={"xl"} onClick={() => setOpenDel(false)}>
+            Batal
+          </Button>
+          <Button
+            loaderPosition="center"
+            loading={loading ? true : false}
+            color="red"
+            radius={"xl"}
+            onClick={() => {
+              onDelete();
+            }}
+          >
+            Hapus
+          </Button>
+        </Group>
+      </Stack>
+    </>
+  );
+}
+
+function ButtonStatus({
+  postingId,
+  setOpenStatus,
+  statusId,
+  onLoadData,
+}: {
+  postingId?: string;
+  setOpenStatus: any;
+  statusId?: any;
+  onLoadData: (val: any) => void;
+}) {
+  const [loading, setLoading] = useState(false);
+
+  async function onTutupForum() {
+    setOpenStatus(false);
+
+    const closeForum = await forum_funEditStatusPostingById(
+      postingId as any,
+      2
+    );
+    if (closeForum.status === 200) {
+      ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
+      setLoading(true);
+
+      const loadData = await forum_getOnePostingById(postingId as any);
+      onLoadData(loadData);
+
+      if (loadData) {
+        const updateData = {
+          ...loadData,
+          ForumMaster_StatusPosting: {
+            id: 2,
+            status: "Close",
+          },
+        };
+
+        mqtt_client.publish(
+          "Forum_detail_ganti_status",
+          JSON.stringify({
+            id: postingId,
+            data: updateData.ForumMaster_StatusPosting,
+          })
+        );
+      }
+    } else {
+      ComponentGlobal_NotifikasiGagal(closeForum.message);
+    }
+  }
+
+  async function onBukaForum() {
+    setOpenStatus(false);
+
+    const openForum = await forum_funEditStatusPostingById(postingId as any, 1);
+    if (openForum.status === 200) {
+      ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
+      setLoading(true);
+
+      const loadData = await forum_getOnePostingById(postingId as any);
+      onLoadData(loadData);
+
+      if (loadData) {
+        const updateData = {
+          ...loadData,
+          ForumMaster_StatusPosting: {
+            id: 1,
+            status: "Open",
+          },
+        };
+
+        mqtt_client.publish(
+          "Forum_detail_ganti_status",
+          JSON.stringify({
+            id: postingId,
+            data: updateData.ForumMaster_StatusPosting,
+          })
+        );
+      }
+    } else {
+      ComponentGlobal_NotifikasiGagal(openForum.message);
+    }
+  }
+
+  return (
+    <>
+      <Stack>
+        {statusId === 1 ? (
+          <Title order={6}>Yakin menutup forum ini ?</Title>
+        ) : (
+          <Title order={6}>Yakin membuka forum ini ?</Title>
+        )}
+        <Group position="center">
+          <Button radius={"xl"} onClick={() => setOpenStatus(false)}>
+            Batal
+          </Button>
+
+          {statusId === 1 ? (
+            <Button
+              loaderPosition="center"
+              loading={loading ? true : false}
+              color="orange"
+              radius={"xl"}
+              onClick={() => {
+                onTutupForum();
+              }}
+            >
+              Tutup
+            </Button>
+          ) : (
+            <Button
+              loaderPosition="center"
+              loading={loading ? true : false}
+              color="green"
+              radius={"xl"}
+              onClick={() => {
+                onBukaForum();
+              }}
+            >
+              Buka
+            </Button>
+          )}
+        </Group>
+      </Stack>
+    </>
+  );
+}

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

@@ -27,11 +27,13 @@ export default function ComponentForum_V2_HeaderCard({
   isMoreButton,
   userLoginId,
   onLoadData,
+  allData,
 }: {
   data: MODEL_FORUM_POSTING;
   isMoreButton: boolean;
   userLoginId: string;
-  onLoadData: (val: any) => void
+  onLoadData: (val: any) => void;
+  allData: any[];
 }) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
@@ -91,11 +93,7 @@ export default function ComponentForum_V2_HeaderCard({
                     : "red"
                 }
               >
-                <Text fz={10}>
+                <Text fz={10}>{data?.ForumMaster_StatusPosting.status}</Text>
-                  {(data.ForumMaster_StatusPosting.id as any) === 1
-                    ? "Open"
-                    : "Close"}
-                </Text>
               </Badge>
             </Stack>
           </Grid.Col>
@@ -104,8 +102,8 @@ export default function ComponentForum_V2_HeaderCard({
             <Group position="center" spacing={"xs"}>
               <Group spacing={3}>
                 <Text c={"gray"} fz={"sm"}>
-                  {data.createdAt
+                  {data.createdAt !== undefined && data?.createdAt
-                    ? data.createdAt.toLocaleDateString(["id-ID"], {
+                    ? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
                         day: "numeric",
                         month: "short",
                       })
@@ -130,8 +128,8 @@ export default function ComponentForum_V2_HeaderCard({
                     statusId={data?.ForumMaster_StatusPosting.id}
                     userLoginId={userLoginId}
                     onLoadData={onLoadData}
+                    allData={allData}
                   />
-
                 </Group>
               ) : (
                 ""

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

@@ -29,9 +29,11 @@ import { useState } from "react";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 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_new_getAllPosting } from "../../fun/get/new_get_all_posting";
 import forum_v2_getAllPosting from "../../fun/get/v2_get_all_posting";
+import { forum_new_getAllPosting } from "../../fun/get/new_get_all_posting";
+import _ from "lodash";
+import { MODEL_FORUM_POSTING } from "../../model/interface";
+import mqtt_client from "@/util/mqtt_client";
 
 export default function ComponentForum_V2_CardMoreButton({
   authorId,
@@ -39,12 +41,14 @@ export default function ComponentForum_V2_CardMoreButton({
   statusId,
   userLoginId,
   onLoadData,
+  allData,
 }: {
   authorId: any;
   postingId?: any;
   statusId?: any;
   userLoginId: any;
   onLoadData: (val: any) => void;
+  allData: any[];
 }) {
   const router = useRouter();
 
@@ -170,8 +174,12 @@ export default function ComponentForum_V2_CardMoreButton({
         <ButtonDelete
           postingId={postingId}
           setOpenDel={setOpenDel}
-          onLoadData={onLoadData}
+          onLoadData={(val) => {
+            onLoadData(val);
+          }}
+          allData={allData}
         />
+        {/* <pre>{JSON.stringify(allData, null, 2)}</pre> */}
       </Modal>
 
       <Modal
@@ -184,9 +192,12 @@ export default function ComponentForum_V2_CardMoreButton({
           postingId={postingId}
           setOpenStatus={setOpenStatusClose}
           statusId={statusId}
-          onLoadData={onLoadData}
+          onLoadData={(val) => {
+            onLoadData(val);
+          }}
           userLoginId={userLoginId}
           authorId={authorId}
+          allData={allData}
         />
       </Modal>
 
@@ -201,10 +212,12 @@ function ButtonDelete({
   postingId,
   setOpenDel,
   onLoadData,
+  allData,
 }: {
   postingId?: string;
   setOpenDel: any;
   onLoadData: (val: any) => void;
+  allData: MODEL_FORUM_POSTING[];
 }) {
   const [loading, setLoading] = useState(false);
 
@@ -212,14 +225,23 @@ 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 loadData = await forum_new_getAllPosting({ page: 1 });
+
-        onLoadData(loadData);
+        const cloneData = _.clone(allData);
-        return null;
+        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);
+        ComponentGlobal_NotifikasiGagal(res.message);
-        return null;
       }
     });
   }
@@ -255,6 +277,7 @@ function ButtonStatus({
   onLoadData,
   userLoginId,
   authorId,
+  allData,
 }: {
   postingId?: string;
   setOpenStatus: any;
@@ -262,6 +285,7 @@ function ButtonStatus({
   onLoadData: (val: any) => void;
   userLoginId: string;
   authorId: string;
+  allData: MODEL_FORUM_POSTING[];
 }) {
   const [loading, setLoading] = useState(false);
 
@@ -274,35 +298,117 @@ function ButtonStatus({
     );
     if (upateStatusClose.status === 200) {
       ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
-
-      const loadData = await forum_v2_getAllPosting({})
-      onLoadData(loadData);
       setLoading(true);
 
+      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",
+        },
+      };
+
+      console.log(updateDetail);
+
+      mqtt_client.publish(
+        "Forum_detail_ganti_status",
+        JSON.stringify({
+          id: postingId,
+          data: updateDetail.ForumMaster_StatusPosting,
+        })
+      );
     } else {
-       ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
+      ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
-
     }
-
   }
 
   async function onBukaForum() {
     setOpenStatus(false);
 
-    await forum_funEditStatusPostingById(postingId as any, 1).then(
+    const updateStatusOpen = await forum_funEditStatusPostingById(
-      async (res) => {
+      postingId as any,
-        if (res.status === 200) {
+      1
-          const loadData = await forum_v2_getAllPosting({});
-          onLoadData(loadData);
-
-          ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
-          setLoading(true);
-
-        } else {
-          ComponentGlobal_NotifikasiGagal(res.message);
-        }
-      }
     );
+    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/main_component/card_view.tsx

@@ -1,24 +1,23 @@
 "use client";
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import { Stack, Card, Group, ActionIcon, Divider, Text } from "@mantine/core";
+import { ActionIcon, Card, Divider, Group, Stack, Text } from "@mantine/core";
 import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import ComponentForum_BerandaAuthorNameOnHeader from "../beranda/beranda_author_header";
-import ComponentForum_V2_HeaderCard from "./card_header";
-import { MODEL_FORUM_POSTING } from "../../model/interface";
 import { useState } from "react";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/component_global/loading_card";
+import { MODEL_FORUM_POSTING } from "../../model/interface";
-import ComponentForum_CardLoadingOverlay from "../card_loader";
+import ComponentForum_V2_HeaderCard from "./card_header";
 
 export default function ComponentForum_V2_MainCardView({
   data,
   userLoginId,
   onLoadData,
+  allData,
 }: {
-  data: MODEL_FORUM_POSTING[];
+  data: MODEL_FORUM_POSTING;
   userLoginId: string;
   onLoadData: (val: any) => void;
+  allData: any[];
 }) {
   const router = useRouter();
   const [loadingKomen, setLoadingKomen] = useState(false);
@@ -28,70 +27,60 @@ export default function ComponentForum_V2_MainCardView({
 
   return (
     <>
-      <Stack spacing={"xl"}>
+    {/* <pre>{JSON.stringify(data, null,2)}</pre> */}
-        {data.map((e, i) => (
+      <Card mb={"md"}>
-          <Card key={i} >
+        <Card.Section>
-            <Card.Section>
+          <ComponentForum_V2_HeaderCard
-              <ComponentForum_V2_HeaderCard
+            data={data}
-                data={e}
+            isMoreButton={true}
-                isMoreButton={true}
+            userLoginId={userLoginId}
-                userLoginId={userLoginId}
+            onLoadData={onLoadData}
-                onLoadData={onLoadData}
+            allData={allData}
-              />
+          />
-              {/* <ComponentForum_BerandaAuthorNameOnHeader
+        </Card.Section>
-                tglPublish={e?.createdAt}
-                isMoreButton={true}
-                postingId={e?.id}
-                statusId={e?.ForumMaster_StatusPosting?.id}
-                userLoginId={userLoginId}
-                setData={setData}
-              /> */}
-            </Card.Section>
 
-            <Card.Section
+        <Card.Section
-              sx={{ zIndex: 0 }}
+          sx={{ zIndex: 0 }}
-              p={"lg"}
+          p={"lg"}
-              onClick={() => {
+          onClick={() => {
-                  router.push(RouterForum.main_detail + e.id)
+            router.push(RouterForum.main_detail + data?.id);
-              }}
+          }}
-            >
+        >
-              <Text fz={"sm"} lineClamp={4}>
+          <Text fz={"sm"} lineClamp={4}>
-                <div dangerouslySetInnerHTML={{ __html: e.diskusi }} />
+            <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
-              </Text>
+          </Text>
-            </Card.Section>
+        </Card.Section>
 
-            <Card.Section>
+        <Card.Section>
-              <Stack>
+          <Stack>
-                <Group spacing={"xs"} px={"sm"}>
+            <Group spacing={"xs"} px={"sm"}>
-                  <ActionIcon
+              <ActionIcon
-                    loading={loadingKomen && e?.id === postingId ? true : false}
+                loading={loadingKomen && data?.id === postingId ? true : false}
-                    variant="transparent"
+                variant="transparent"
-                    sx={{ zIndex: 1 }}
+                sx={{ zIndex: 1 }}
-                    onClick={() => {
+                // onClick={() => {
-                      setPostingId(e?.id),
+                //   setPostingId(data?.id),
-                        (e?.ForumMaster_StatusPosting.id as any) === 1
+                //     (data?.ForumMaster_StatusPosting.id as any) === 1
-                          ? (router.push(RouterForum.komentar + e?.id),
+                //       ? (router.push(RouterForum.komentar + data?.id),
-                            setLoadingKomen(true))
+                //         setLoadingKomen(true))
-                          : router.push(RouterForum.main_detail + e?.id);
+                //       : router.push(RouterForum.main_detail + data?.id);
-                    }}
+                // }}
-                  >
+              >
-                    {(e?.ForumMaster_StatusPosting?.id as any) === 1 ? (
+                {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-                      <IconMessageCircle color="gray" size={25} />
+                  <IconMessageCircle color="gray" size={25} />
-                    ) : (
+                ) : (
-                      <IconMessageCircleX color="gray" size={25} />
+                  <IconMessageCircleX color="gray" size={25} />
-                    )}
+                )}
-                  </ActionIcon>
+              </ActionIcon>
 
-                  {/* <TotalKomentar postingId={e?.id} /> */}
+              {/* <TotalKomentar postingId={e?.id} /> */}
 
-                  <Text c={"gray"}>{e?.Forum_Komentar.length}</Text>
+              <Text c={"gray"}>{data?.Forum_Komentar.length}</Text>
-                </Group>
+            </Group>
-                <Divider />
+            <Divider />
-              </Stack>
+          </Stack>
-            </Card.Section>
+        </Card.Section>
-          </Card>
+      </Card>
-        ))}
-      </Stack>
     </>
   );
 }

src/app_modules/forum/create/index.tsx

@@ -95,7 +95,7 @@ function ButtonAction({ value }: { value: string }) {
       ComponentGlobal_NotifikasiBerhasil(create.message);
       setTimeout(() => router.back(), 1000);
 
-      mqtt_client.publish("Forum_user_to_user", JSON.stringify({isNewPost: true, count: 1 }));
+      mqtt_client.publish("Forum_create_new", JSON.stringify({isNewPost: true, count: 1 }));
 
     } else {
       ComponentGlobal_NotifikasiGagal(create.message);

src/app_modules/forum/detail/index.tsx

@@ -14,7 +14,7 @@ import {
   Stack,
   Text,
 } from "@mantine/core";
-import { IconMessageCircle } from "@tabler/icons-react";
+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";
@@ -36,32 +36,78 @@ const ReactQuill = dynamic(
 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,
-  totalKomentar,
   userLoginId,
 }: {
   dataPosting: MODEL_FORUM_POSTING;
   listKomentar: MODEL_FORUM_KOMENTAR[];
-  totalKomentar: number;
   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
-          dataPosting={dataPosting}
+          data={data}
-          totalKomentar={totalKomentar}
+          totalKomentar={komentar.length}
           userLoginId={userLoginId}
+          onLoadData={(val) => {
+            setData(val);
+          }}
         />
-        {(dataPosting?.ForumMaster_StatusPosting?.id as any) === 1 ? (
+        {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
           <CreateKomentar
             postingId={dataPosting?.id}
-            setKomentar={setKomentar}
+            onSetKomentar={(val) => {
+              setKomentar(val);
+            }}
+            data={data}
+            userLoginId={userLoginId}
           />
         ) : (
           ""
@@ -69,7 +115,7 @@ export default function Forum_Detail({
         <KomentarView
           listKomentar={komentar}
           setKomentar={setKomentar}
-          postingId={dataPosting?.id}
+          postingId={data?.id}
           userLoginId={userLoginId}
         />
       </Stack>
@@ -78,66 +124,65 @@ export default function Forum_Detail({
 }
 
 function ForumView({
-  dataPosting,
+  data,
   totalKomentar,
   userLoginId,
+  onLoadData,
 }: {
-  dataPosting: MODEL_FORUM_POSTING;
+  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>
-          {/* <pre>{JSON.stringify(dataPosting, null, 2)}</pre> */}
+          <ComponentForum_DetailHeader
-          <ComponentForum_DetailOnHeaderAuthorName
+            data={data}
-            authorId={dataPosting?.Author?.id}
-            authorName={dataPosting?.Author?.Profile?.name}
-            username={dataPosting?.Author?.username}
-            imagesId={dataPosting?.Author?.Profile?.imagesId}
-            postingId={dataPosting?.id}
-            tglPublish={dataPosting?.createdAt}
             userLoginId={userLoginId}
-            statusId={dataPosting?.ForumMaster_StatusPosting?.id}
+            onLoadData={(val) => {
+              onLoadData(val);
+            }}
           />
         </Card.Section>
+
+        {/* CONTENT */}
         <Card.Section sx={{ zIndex: 0 }} py={"sm"}>
           <Stack spacing={"xs"}>
             <Text fz={"sm"}>
-              {dataPosting?.diskusi ? (
+              {data?.diskusi ? (
-                <div
+                <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
-                  dangerouslySetInnerHTML={{ __html: dataPosting?.diskusi }}
-                />
               ) : (
                 ""
               )}
             </Text>
           </Stack>
         </Card.Section>
+
+        {/* FOOTER */}
         <Card.Section>
           <Stack>
             <Group position="apart">
               <Group spacing={"xs"}>
-                {/* <ActionIcon
+                {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-                  variant="transparent"
+                  <IconMessageCircle color="gray" size={25} />
-                  sx={{ zIndex: 1 }}
+                ) : (
-                  onClick={() => {
+                  <IconMessageCircleX color="gray" size={25} />
-                    router.push(RouterForum.komentar + dataPosting.id);
+                )}
-                  }}
-                >
-                </ActionIcon> */}
-                <IconMessageCircle color="gray" size={25} />
                 <Text c={"gray"}>{totalKomentar}</Text>
               </Group>
               <Group>
                 <Text c={"gray"} fz={"sm"}>
-                  {new Date(dataPosting?.createdAt).toLocaleTimeString()}
+                  {new Date(data?.createdAt).toLocaleTimeString()}
                   {/* {new Intl.RelativeTimeFormat("id", {style: "short"}).format(-1,"day")} */}
                 </Text>
                 <Text c={"gray"} fz={"sm"}>
-                  {dataPosting?.createdAt
+                  {data?.createdAt
-                    ? dataPosting?.createdAt.toLocaleDateString(["id-ID"], {
+                    ? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
                         dateStyle: "medium",
                       })
                     : new Date().toLocaleDateString(["id-ID"], {
@@ -156,10 +201,14 @@ function ForumView({
 
 function CreateKomentar({
   postingId,
-  setKomentar,
+  onSetKomentar,
+  data,
+  userLoginId,
 }: {
   postingId: string;
-  setKomentar: any;
+  onSetKomentar: (val: any) => void;
+  data: MODEL_FORUM_POSTING;
+  userLoginId: string;
 }) {
   const router = useRouter();
   const [value, setValue] = useState("");
@@ -171,20 +220,41 @@ function CreateKomentar({
       return null;
     }
 
-    await forum_funCreateKomentar(postingId, value).then(async (res) => {
+    const createComment = await forum_funCreateKomentar(postingId, value);
-      if (res.status === 201) {
+    if (createComment.status === 201) {
-        await forum_getKomentarById(postingId).then((val) => {
+      const loadKomentar = await forum_getKomentarById(data.id);
-          setKomentar(val);
+      onSetKomentar(loadKomentar);
-          // setLoading(true);
+
-          setValue("");
+      setValue("");
-          setIsEmpty(true);
+      setIsEmpty(true);
-          ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+      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,
         });
-        // router.replace(RouterForum.main_detail + postingId, { scroll: false });
+
-      } else {
+        if (createNotifikasi.status === 201) {
-        ComponentGlobal_NotifikasiGagal(res.message);
+          mqtt_client.publish(
+            "USER",
+            JSON.stringify({
+              userId: dataNotif.userId,
+              count: 1,
+            })
+          );
+        }
       }
-    });
+    } else {
+      ComponentGlobal_NotifikasiGagal(createComment.message);
+    }
   }
 
   return (
@@ -200,13 +270,12 @@ function CreateKomentar({
             }}
           />
         </Paper>
-        <Group position="right">
+
+        <Group position="apart">
           <ComponentGlobal_InputCountDown
             maxInput={500}
             lengthInput={value.length}
           />
-        </Group>
-        <Group position="right">
           <Button
             style={{
               transition: "0.5s",
@@ -251,45 +320,55 @@ function KomentarView({
             </Text>
           </Center>
         ) : (
-          listKomentar.map((e, i) => (
+          <Box>
-            <Card key={i} mt={"xs"}>
+            <Center>
-              <Card.Section>
+              <Text fz={"xs"} c={"gray"}>
-                <ComponentForum_KomentarAuthorNameOnHeader
+                {" "}
-                  authorName={e?.Author?.Profile?.name}
+                Komentar
-                  imagesId={e?.Author?.Profile?.imagesId}
+              </Text>
-                  tglPublish={e?.createdAt}
+            </Center>
-                  userId={e?.Author?.id}
+            {listKomentar.map((e, i) => (
-                  komentarId={e?.id}
+              <Card key={i} mt={"xs"}>
-                  isMoreButton={true}
+                <Card.Section>
-                  setKomentar={setKomentar}
+                  <ComponentForum_KomentarAuthorNameOnHeader
-                  postingId={postingId}
+                    authorName={e?.Author?.Profile?.name}
-                  userLoginId={userLoginId}
+                    imagesId={e?.Author?.Profile?.imagesId}
-                />
+                    tglPublish={e?.createdAt}
-              </Card.Section>
+                    userId={e?.Author?.id}
-              <Card.Section sx={{ zIndex: 0 }} p={"sm"}>
+                    komentarId={e?.id}
-                <Stack spacing={"xs"}>
+                    isMoreButton={true}
-                  <Text fz={"sm"} lineClamp={4}>
+                    setKomentar={setKomentar}
-                    {e.komentar ? (
+                    postingId={postingId}
-                      <Spoiler
+                    userLoginId={userLoginId}
-                        hideLabel="sembunyikan"
+                  />
-                        maxHeight={100}
+                </Card.Section>
-                        showLabel="tampilkan"
+                <Card.Section sx={{ zIndex: 0 }} p={"sm"}>
-                      >
+                  <Stack spacing={"xs"}>
-                        <div dangerouslySetInnerHTML={{ __html: e.komentar }} />
+                    <Text fz={"sm"} lineClamp={4}>
-                      </Spoiler>
+                      {e.komentar ? (
-                    ) : (
+                        <Spoiler
-                      ""
+                          hideLabel="sembunyikan"
-                    )}
+                          maxHeight={100}
-                  </Text>
+                          showLabel="tampilkan"
-                </Stack>
+                        >
-              </Card.Section>
+                          <div
-              <Card.Section>
+                            dangerouslySetInnerHTML={{ __html: e.komentar }}
-                <Stack>
+                          />
-                  <Divider />
+                        </Spoiler>
-                </Stack>
+                      ) : (
-              </Card.Section>
+                        ""
-            </Card>
+                      )}
-          ))
+                    </Text>
+                  </Stack>
+                </Card.Section>
+                <Card.Section>
+                  <Stack>
+                    <Divider />
+                  </Stack>
+                </Card.Section>
+              </Card>
+            ))}
+          </Box>
         )}
       </Stack>
     </>

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

@@ -20,13 +20,14 @@ export async function forum_getOnePostingById(postingId: string) {
           Profile: true,
         },
       },
+      
       _count: {
         select: {
           Forum_Komentar: true,
         },
       },
-      ForumMaster_StatusPosting: true
+      ForumMaster_StatusPosting: true,
-    
+      forumMaster_StatusPostingId: true,
     },
   });
 

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

@@ -1,18 +1,16 @@
 "use server";
 
-import _, { ceil } from "lodash";
 import prisma from "@/app/lib/prisma";
-import { forum_countOneTotalKomentarById } from "../count/count_one_total_komentar_by_id";
+import { ceil } from "lodash";
-import { forum_countTotalKomenById } from "../count/count_total_komentar_by_id";
 
 export async function forum_new_getAllPosting({
   page,
   search,
 }: {
-  page: number;
+  page: any;
   search?: string;
 }) {
-  const takeData = 10;
+  const takeData = 5;
   const skipData = page * takeData - takeData;
 
   const getData = await prisma.forum_Posting.findMany({
@@ -51,25 +49,15 @@ export async function forum_new_getAllPosting({
           isActive: true,
         },
       },
-      ForumMaster_StatusPosting: true,
+      ForumMaster_StatusPosting: {
-    },
+        select: {
-  });
+          id: true,
-
+          status: true,
-  const nCount = await prisma.forum_Posting.count({
+        },
-    where: {
-      isActive: true,
-      diskusi: {
-        mode: "insensitive",
-        contains: search,
       },
+      forumMaster_StatusPostingId: true,
     },
   });
 
-  const allData = {
+  return getData;
-    data: getData,
-    nPage: ceil(nCount / takeData),
-  };
-  
-
-  return allData;
 }

src/app_modules/forum/komentar/index.tsx

@@ -66,7 +66,8 @@ export default function Forum_Komentar({
             </Stack>
           </Card.Section>
         </Card>
-        <CreateKomentar postingId={dataPosting?.id} />
+        {dataPosting?.ForumMaster_StatusPosting?.id === "1" ?  <CreateKomentar postingId={dataPosting?.id} /> : "" }
+       
       </Stack>
     </>
   );

src/app_modules/forum/main/beranda.tsx

@@ -18,6 +18,7 @@ import {
   Center,
   Button,
   Pagination,
+  Loader,
 } from "@mantine/core";
 import { useShallowEffect, useTimeout, useWindowScroll } from "@mantine/hooks";
 import {
@@ -43,6 +44,7 @@ import mqtt_client from "@/util/mqtt_client";
 import ComponentForum_V2_MainCardView from "../component/main_component/card_view";
 import { forum_new_getAllPosting } from "../fun/get/new_get_all_posting";
 import forum_v2_getAllPosting from "../fun/get/v2_get_all_posting";
+import { ScrollOnly } from "next-scroll-loader";
 
 export default function Forum_Beranda({
   listForum,
@@ -55,62 +57,87 @@ export default function Forum_Beranda({
   const [scroll, scrollTo] = useWindowScroll();
 
   const [data, setData] = useState<MODEL_FORUM_POSTING[]>(listForum);
-  // const [nPage, setNPage] = useState(listForum.nPage);
+  const [activePage, setActivePage] = useState(1);
-  // const [activePage, setActivePage] = useState(1);
   const [isSearch, setIsSearch] = useState("");
 
   const [loadingCreate, setLoadingCreate] = useState(false);
 
-  // 
+  //
   const [isNewPost, setIsNewPost] = useState(false);
   const [countNewPost, setCountNewPost] = useState(0);
 
-  // useShallowEffect(() => {
+  useShallowEffect(() => {
-  //   onLoadAllData({
+    onLoadAllData({
-  //     onLoad(val) {
+      onLoad(val) {
-  //       setData(val.data);
+        setData(val);
-  //       setNPage(val.nPage);
+      },
-  //     },
+    });
-  //   });
+  }, [setData]);
-  // }, [setData, setNPage]);
 
-  // async function onLoadAllData({ onLoad }: { onLoad: (val: any) => void }) {
+  async function onLoadAllData({ onLoad }: { onLoad: (val: any) => void }) {
-  //   const loadData = await forum_new_getAllPosting({ page: 1 });
+    const loadData = await forum_new_getAllPosting({ page: 1 });
-  //   onLoad(loadData);
+    onLoad(loadData);
-  // }
+  }
 
   useShallowEffect(() => {
-    mqtt_client.subscribe("Forum_user_to_user");
+    mqtt_client.subscribe("Forum_create_new");
+    mqtt_client.subscribe("Forum_ganti_status");
+    mqtt_client.subscribe("Forum_hapus_data");
+    mqtt_client.subscribe("Forum_detail_ganti_status");
 
     mqtt_client.on("message", (topic: any, message: any) => {
-      const data = JSON.parse(message.toString());
+      // console.log(topic);
-      // console.log(data);
+      const cloneData = _.clone(data);
-      setIsNewPost(data.isNewPost);
+
-      const tambah = countNewPost + data.count;
+      if (topic === "Forum_create_new") {
-      setCountNewPost(tambah);
+        const newData = JSON.parse(message.toString());
+        setIsNewPost(newData.isNewPost);
+        const tambah = countNewPost + newData.count;
+        setCountNewPost(tambah);
+      }
+
+      if (topic === "Forum_hapus_data") {
+        const newData = JSON.parse(message.toString());
+        setData(newData.data);
+      }
+
+      if (topic === "Forum_ganti_status") {
+        const newData = JSON.parse(message.toString());
+        setData(newData.data);
+      }
+
+      if (topic === "Forum_detail_ganti_status") {
+        const newData = JSON.parse(message.toString());
+
+        const updateOneData = cloneData.map((val) => ({
+          ...val,
+          ForumMaster_StatusPosting: {
+            id:
+              val.id === newData.id
+                ? newData.data.id
+                : val.ForumMaster_StatusPosting.id,
+            status:
+              val.id === newData.id
+                ? newData.data.status
+                : val.ForumMaster_StatusPosting.status,
+          },
+        }));
+
+        setData(updateOneData as any);
+      }
     });
-  }, [countNewPost]);
+  }, [countNewPost, data]);
 
   async function onSearch(text: string) {
     setIsSearch(text);
-    const search = await forum_v2_getAllPosting({search: text});
+    const loadSearch = await forum_new_getAllPosting({
-    setData(search as any);
+      page: activePage,
-    // setNPage(search.nPage);
+      search: text,
-    // setActivePage(1);
+    });
+    setData(loadSearch as any);
+    setActivePage(1);
   }
 
-  // async function onClickPage(nextpage: number) {
-  //   setActivePage(nextpage);
-  //   const next = await forum_new_getAllPosting({
-  //     page: nextpage,
-  //     search: isSearch,
-  //   });
-  //   scrollTo({ y: 0 });
-  //   setData(next.data as any);
-  //   setNPage(next.nPage);
-  // }
-
-
   return (
     <>
       {isNewPost && (
@@ -118,7 +145,7 @@ export default function Forum_Beranda({
           <ButtonUpdateBeranda
             countNewPost={countNewPost}
             onSetData={(val) => setData(val)}
-            onSetNewPost={(val) => {
+            onSetIsNewPost={(val) => {
               setIsNewPost(val);
             }}
             onSetCountNewPosting={(val) => {
@@ -168,32 +195,38 @@ export default function Forum_Beranda({
           </Stack>
         ) : (
           // --- Main component --- //
-          <ComponentForum_V2_MainCardView
+          <ScrollOnly
+            height="80vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader />
+              </Center>
+            )}
             data={data}
-            userLoginId={userLoginId}
+            setData={setData}
-            onLoadData={(val) => {
+            moreData={async () => {
-              setData(val);
+              const loadData = await forum_new_getAllPosting({
-              // setNPage(val.nPage);
+                page: activePage + 1,
+                search: isSearch,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
             }}
-          />
+          >
+            {(item) => (
+              <ComponentForum_V2_MainCardView
+                data={item}
+                userLoginId={userLoginId}
+                onLoadData={(val) => {
+                  setData(val);
+                }}
+                allData={data}
+              />
+            )}
+          </ScrollOnly>
         )}
       </Stack>
-
-      {/* <Center mt={"md"}>
-        <Pagination
-          value={activePage}
-          total={nPage}
-          onChange={(val) => {
-            onClickPage(val);
-          }}
-          styles={(theme) => ({
-            control: {
-              borderRadius: "100%",
-             
-            },
-          })}
-        />
-      </Center> */}
     </>
   );
 }
@@ -201,12 +234,12 @@ export default function Forum_Beranda({
 function ButtonUpdateBeranda({
   countNewPost,
   onSetData,
-  onSetNewPost,
+  onSetIsNewPost,
   onSetCountNewPosting,
 }: {
   countNewPost: number;
   onSetData: (val: any) => void;
-  onSetNewPost: (val: any) => void;
+  onSetIsNewPost: (val: any) => void;
   onSetCountNewPosting: (val: any) => void;
 }) {
   const [scroll, scrollTo] = useWindowScroll();
@@ -214,10 +247,11 @@ function ButtonUpdateBeranda({
 
   async function onLoadData() {
     setIsLoading(true);
-    const loadData = await forum_getListAllPosting();
+    const loadData = await forum_new_getAllPosting({ page: 1 });
+
     if (loadData) {
       onSetData(loadData);
-      onSetNewPost(false);
+      onSetIsNewPost(false);
       setIsLoading(false);
       onSetCountNewPosting(0);
     }

src/app_modules/forum/model/interface.tsx

@@ -9,10 +9,11 @@ export interface MODEL_FORUM_POSTING {
   diskusi: string;
   authorId: string;
   Author: MODEL_USER;
-  _count: number
+  _count: number;
   Forum_Komentar: MODEL_FORUM_KOMENTAR[];
   Forum_ReportPosting: MODEL_FORUM_MASTER_REPORT[];
   ForumMaster_StatusPosting: MODEL_FORUM_MASTER_STATUS;
+  forumMaster_StatusPostingId: number
 }
 
 export interface MODEL_FORUM_KOMENTAR {

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

@@ -8,13 +8,18 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_glob
 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";
 
 export default function Forum_ReportPosting({
   postingId,
   listReport,
+  userLoginId,
 }: {
   postingId: string;
   listReport: MODEL_FORUM_MASTER_REPORT[];
+  userLoginId: string;
 }) {
   const [reportValue, setReportValue] = useState("Kebencian");
 
@@ -34,7 +39,11 @@ export default function Forum_ReportPosting({
             ))}
           </Stack>
         </Radio.Group>
-        <ButtonAction value={reportValue} postingId={postingId} />
+        <ButtonAction
+          value={reportValue}
+          postingId={postingId}
+          userLoginId={userLoginId}
+        />
       </Stack>
     </>
   );
@@ -43,36 +52,55 @@ export default function Forum_ReportPosting({
 function ButtonAction({
   value,
   postingId,
+  userLoginId,
 }: {
   value: string;
   postingId: string;
+  userLoginId: string;
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
 
   async function onReport() {
-    await forum_funCreateReportPosting(postingId, value).then((res) => {
+    const report = await forum_funCreateReportPosting(postingId, value);
-      if (res.status === 201) {
+    if (report.status === 201) {
-        ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+      ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
-        setLoading(true);
+      setLoading(true);
-        router.back();
+      router.back();
-      } else {
+
-        ComponentGlobal_NotifikasiGagal(res.message);
+      // const dataNotif = {
-      }
+      //   appId: postingId,
-    });
+      //   pesan: value,
+      //   kategoriApp: "FORUM",
+      //   title: "Report Posting",
+      //   userId: userLoginId,
+      // };
+
+      // const notif = await notifikasiToAdmin_funCreate({
+      //   data: dataNotif as any,
+      // });
+
+      // if (notif.status === 201) {
+      //   mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+      // }
+    } else {
+      ComponentGlobal_NotifikasiGagal(report.message);
+    }
   }
   return (
     <>
       <Stack mt={"md"}>
         <Button
           radius={"xl"}
-          onClick={() => router.replace(RouterForum.report_posting_lainnya + postingId)}
+          onClick={() =>
+            router.replace(RouterForum.report_posting_lainnya + postingId)
+          }
         >
           Lainnya
         </Button>
         <Button
           radius={"xl"}
-          color="red"
+          color="orange"
           loaderPosition="center"
           loading={loading ? true : false}
           onClick={() => onReport()}

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

@@ -62,7 +62,15 @@ function ButtonAction({
         >
           Batal
         </Button>
-        <Button radius={"xl"} color="red" onClick={() => onReport()}>
+        <Button
+        style={{
+          transition: "0.5s"
+        }}
+          disabled={deskripsi === "" ? true : false}
+          radius={"xl"}
+          color="orange"
+          onClick={() => onReport()}
+        >
           Report
         </Button>
       </Group>

src/app_modules/home/layout.tsx

@@ -56,9 +56,12 @@ export default function HomeLayout({
 
   useShallowEffect(() => {
     mqtt_client.subscribe("USER");
+    // mqtt_client.subscribe("Notifikasi_forum_create_komentar");
 
     mqtt_client.on("message", (topic: any, message: any) => {
+      console.log(topic);
       const data = JSON.parse(message.toString());
+
       if (data.userId === dataUser.id) {
         setCountNotif(countNotif + data.count);
       }

src/app_modules/job/create/view.tsx

@@ -36,7 +36,7 @@ import { defaultDeskripsi, defaultSyarat } from "../component/default_value";
 import ComponentJob_NotedBox from "../component/detail/noted_box";
 import { MODEL_JOB } from "../model/interface";
 import { Job_funCreate } from "../fun/create/fun_create";
-import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
@@ -229,7 +229,7 @@ function ButtonAction({ value, file }: { value: MODEL_JOB; file: FormData }) {
 
     const create = await Job_funCreate(value as any, gambar);
     if (create.status === 201) {
-      const dataNotif : any = {
+      const dataNotif: any = {
         appId: create.data?.id as any,
         kategoriApp: "JOB",
         status: create.data?.MasterStatus?.name as any,
@@ -237,8 +237,10 @@ function ButtonAction({ value, file }: { value: MODEL_JOB; file: FormData }) {
         pesan: create.data?.title as any,
         title: "Job baru",
       };
-      const notif = await notifikasiToAdmin_funCreate({ data: dataNotif as any });
+      const notif = await notifikasiToAdmin_funCreate({
-      console.log(notif)
+        data: dataNotif as any,
+      });
+      // console.log(notif);
 
       if (notif.status === 201) {
         mqtt_client.publish(

src/app_modules/job/detail/draft/view.tsx

@@ -15,7 +15,7 @@ import { Job_funDeleteById } from "../../fun/delete/fun_delete_by_id";
 import ComponentJob_NotedBox from "../../component/detail/noted_box";
 import { MODEL_JOB } from "../../model/interface";
 import mqtt_client from "@/util/mqtt_client";
-import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 
 export default function Job_DetailDraft({ dataJob }: { dataJob: MODEL_JOB }) {
   return (

src/app_modules/job/detail/review/view.tsx

@@ -10,7 +10,7 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_glob
 import { MODEL_JOB } from "../../model/interface";
 import { Job_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_status_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 import mqtt_client from "@/util/mqtt_client";
 
 export default function Job_DetailReview({ dataJob }: { dataJob: MODEL_JOB }) {

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

@@ -0,0 +1,24 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { MODEL_NOTIFIKASI } from "../../model/interface";
+
+export default async function notifikasiToUser_funCreate({
+  data,
+}: {
+  data: MODEL_NOTIFIKASI;
+}) {
+  const created = await prisma.notifikasi.create({
+    data: {
+      userId: data.userId,
+      appId: data.appId,
+      status: data.status,
+      title: data.title,
+      pesan: data.pesan,
+      kategoriApp: data.kategoriApp,
+      userRoleId: "1",
+    },
+  });
+  if (!created) return { status: 400, message: "Gagal mengirim notifikasi" };
+  return { status: 201, message: "Berhasil mengirim notifikasi" };
+}

src/app_modules/notifikasi/main/index.tsx

@@ -26,6 +26,9 @@ import { useAtom } from "jotai";
 import { gs_job_hot_menu, gs_job_status } from "@/app_modules/job/global_state";
 import _ from "lodash";
 import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
+import { useShallowEffect } from "@mantine/hooks";
 
 export default function Notifikasi_MainView({
   listNotifikasi,
@@ -51,6 +54,19 @@ function MainView({ listNotifikasi }: { listNotifikasi: MODEL_NOTIFIKASI[] }) {
   const [jobMenuId, setJobMenuId] = useAtom(gs_job_hot_menu);
   const [jobStatus, setJobStatus] = useAtom(gs_job_status);
 
+  useShallowEffect(() => {
+    onLoadData({
+      onLoad(val) {
+        setData(val);
+      },
+    });
+  }, []);
+
+  async function onLoadData({ onLoad }: { onLoad: (val: any) => void }) {
+    const loadData = await notifikasi_getByUserId();
+    onLoad(loadData);
+  }
+
   if (_.isEmpty(data)) {
     return <ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />;
   }
@@ -74,7 +90,6 @@ function MainView({ listNotifikasi }: { listNotifikasi: MODEL_NOTIFIKASI[] }) {
               borderColor: "gray",
               borderStyle: "solid",
               borderWidth: "0.5px",
-             
             }}
             onClick={async () => {
               e?.kategoriApp === "JOB" &&
@@ -87,12 +102,19 @@ function MainView({ listNotifikasi }: { listNotifikasi: MODEL_NOTIFIKASI[] }) {
                   },
                 });
 
-              const cek = await notifikasi_funUpdateIsReadById({
+              e?.kategoriApp === "FORUM" &&
+                redirectDetailForumPage({
+                  appId: e.appId,
+                  router: router,
+                });
+
+              const updateIsRead = await notifikasi_funUpdateIsReadById({
                 notifId: e?.id,
               });
-              if (cek.status === 200) return null;
+              if (updateIsRead.status === 200) return null;
             }}
           >
+            {/* <pre>{JSON.stringify(e, null, 2)}</pre> */}
             <Card.Section p={"sm"}>
               <Stack spacing={"xs"}>
                 <Group position="apart">
@@ -105,13 +127,22 @@ function MainView({ listNotifikasi }: { listNotifikasi: MODEL_NOTIFIKASI[] }) {
               </Stack>
             </Card.Section>
             <Card.Section px={"sm"} pb={"sm"}>
-              <Stack spacing={0}>
+              <Stack spacing={e.kategoriApp === "FORUM" ? 0 : "xs"}>
                 <Text lineClamp={2} fw={"bold"} fz={"xs"}>
                   {e?.title}
                 </Text>
-                <Text lineClamp={2} fz={"xs"}>
+                {e.kategoriApp === "FORUM" ? (
-                  {e?.pesan}
+                  <div
-                </Text>
+                    style={{ fontSize: 12 }}
+                    dangerouslySetInnerHTML={{ __html: e?.pesan }}
+                  />
+                ) : (
+                  // <Text >
+                  // </Text>
+                  <Text lineClamp={2} fz={"xs"}>
+                    {e?.pesan}
+                  </Text>
+                )}
               </Stack>
             </Card.Section>
             <Card.Section p={"sm"}>
@@ -179,3 +210,14 @@ function redirectJobPage({
 
   router.push(path);
 }
+
+function redirectDetailForumPage({
+  appId,
+  router,
+}: {
+  appId: string;
+  router: AppRouterInstance;
+}) {
+  const path = RouterForum.main_detail + appId;
+  router.push(path);
+}

src/app_modules/zCoba/index.tsx

@@ -2,6 +2,7 @@
 
 import {
   Box,
+  Button,
   Center,
   Group,
   LoadingOverlay,
@@ -18,120 +19,83 @@ import useInfiniteScroll, {
 import { createItems, loadMore } from "./utils";
 import { v4 as uuidv4 } from "uuid";
 import { useShallowEffect } from "@mantine/hooks";
+import { ScrollOnly } from "next-scroll-loader";
+import _ from "lodash";
+
+const newData = Array(20)
+  .fill(0)
+  .map((e, i) => i + 1);
+
+const data2 = [
+  {
+    id: 1,
+    name: "bagas",
+    age: 28,
+  },
+  {
+    id: 2,
+    name: "lukman",
+    age: 25,
+  },
+  {
+    id: 3,
+    name: "marcel",
+    age: 23,
+  },
+];
 
 export default function Coba_TestLoading() {
-  const [data, setData] = useState<any[]>([]);
+  // const [data, setData] = useState<any[]>(newData);
-  const [isLoading, setIsLoading] = useState(false);
+  // const [isLoading, setIsLoading] = useState(false);
 
-  const next = async (direction: ScrollDirection) => {
+  // return (
-    try {
+  //   <>
-      setIsLoading(true);
+  //     <ScrollOnly
-      const newData = await loadMore();
+  //       height="90vh"
+  //       data={data}
+  //       setData={setData}
+  //       moreData={async () => {
+  //         const newData = Array.from(
+  //           { length: 50 },
+  //           (_, i) => i + data.length + 1
+  //         );
+  //         await new Promise((resolve) => setTimeout(resolve, 2000));
+  //         return newData;
+  //       }}
+  //     >
+  //       {(item) => <div style={{height: 50}}> {item}</div>}
+  //     </ScrollOnly>
+  //   </>
+  // );
 
-      setData((prev) =>
+  const [data, setData] = useState(data2);
-        direction === "up" ? [...newData, ...prev] : [...prev, ...newData]
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const ref = useInfiniteScroll({
-    next,
-    rowCount: data.length,
-    hasMore: { up: true },
-  });
-
-  useShallowEffect(() => {
-    const d = createItems();
-    setData([...d]);
-  }, []);
-
-  //   const next = async (direction: ScrollDirection) => {
-  // setIsLoading(true);
-  // const ar = Array.from({ length: 100 }).map((v, i) => "baru" + i);
-  // const d = direction === "up" ? [...ar, ...obrolan] : [];
-  // console.log(d);
-  // setObrolan(d);
-  // await new Promise((r) => setTimeout(r, 100));
-  // setIsLoading(false);
-  //   };
-
-  //   const ref = useInfiniteScroll({
-  //     next,
-  //     rowCount: obrolan.length,
-  //     hasMore: { up: true },
-  //   });
-
-  useShallowEffect(() => {
-    // const a = Array.from({ length: 100 }).map((x) => "apa");
-    // setObrolan(a);
-    // mqtt_client.subscribe(roomId);
-    // mqtt_client.on("message", (data: any, msg: any) => {
-    //   onList(setObrolan);
-    // });
-  }, []);
 
   return (
     <>
-      <Box p={"lg"}>
+      <Box mt={"lg"}>
-        <div
+        <Stack>
-          ref={ref as any}
+          <Button
-          style={{
+            onClick={() => {
-            height: "90vh",
+              const clone = _.clone(data);
-            overflowY: "auto",
+              const dataBaru = clone.map(
-          }}
+                (e) => (
-        >
+                  e.id === 1,
-          {isLoading && <div>Loading...</div>}
+                  {
-          <Stack>
+                    ...e,
-            {data.map((item, index) => (
+                    name: e.id === 1 ? "firman" : e.name,
-              <Paper key={index} p={"md"} bg={"blue.1"}>
+                    age: e.id === 1 ? 30 : e.age,
-                <Text>{item}</Text>
+                  }
-              </Paper>
+                )
-            ))}
+              );
-          </Stack>
+              setData(dataBaru);
-        </div>
+            }}
+          >
+            Update
+          </Button>
+        </Stack>
+
+        <pre>{JSON.stringify(data, null, 2)}</pre>
       </Box>
     </>
   );
 }
-
-// export default function ComponentCobaCoba_LoadingPage() {
-//   const listhHuruf = [
-//     {
-//       huruf: "H",
-//     },
-//     {
-//       huruf: "I",
-//     },
-//     {
-//       huruf: "P",
-//     },
-//     {
-//       huruf: "M",
-//     },
-//     {
-//       huruf: "I",
-//     },
-//   ];
-//   const customLOader = (
-//     <Center h={"100vh"}>
-//       <Group>
-//         {listhHuruf.map((e, i) => (
-//           <Center key={i} h={"100%"}>
-//             <Skeleton height={50} circle radius={"100%"} />
-//             <Text sx={{ position: "absolute" }} c={"gray.4"} fw={"bold"}>
-//               {e.huruf}
-//             </Text>
-//           </Center>
-//         ))}
-//       </Group>
-//     </Center>
-//   );
-
-//   return (
-//     <>
-//       <LoadingOverlay visible overlayBlur={2} loader={customLOader} />
-//     </>
-//   );
-// }

yarn.lock

@@ -3718,10 +3718,10 @@ next-dev@^1.1.9:
     readdirp "^3.6.0"
     yargs "^17.7.2"
 
-next-scroll-loader@^1.0.5:
+next-scroll-loader@^1.0.9:
-  version "1.0.5"
+  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/next-scroll-loader/-/next-scroll-loader-1.0.5.tgz#e25aaed2c3e5c60bf6d2fa89a387b62483b2ffd0"
+  resolved "https://registry.yarnpkg.com/next-scroll-loader/-/next-scroll-loader-1.0.9.tgz#5d33260c086fbce9061ab5281694355395e91d4f"
-  integrity sha512-j2/yQkjtCZttnpZcKMyLbIylBsGsutFD4Net0cdk3lYOWN7FmPRUlpK0JrZP+KGnq6pyuXh6OxCxY9HJ8BWGZQ==
+  integrity sha512-TezMxzzgJ1XP7rk+dFbAgIpWtvTPUx1KnE8o19Rr/rxT5WnHZ67HBzP9KXAM1t4MAao+HT9OwG1KDSCi0GL8lg==
   dependencies:
     react "^18.3.1"
     react-dom "^18.3.1"