# Forum

## feat
- Tampilan forum
- Tampilan forumku
- Tampilan komentar
- Tampilam posting
- Tampilan Detail posting
- Tampilan Edit postinf
- Tampilan edit komentat
- Tampilan report posting
- Tampilan report komentar
### No issuee

package.json

@@ -53,6 +53,7 @@
     "react-countdown": "^2.3.5",
     "react-dom": "18.2.0",
     "react-fast-marquee": "^1.6.4",
+    "react-icons": "^5.0.1",
     "react-international-phone": "^4.2.6",
     "react-quill": "^2.0.0",
     "react-responsive-carousel": "^3.2.23",

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

@@ -1,9 +1,9 @@
-import ComponentGlobal_LoadingPage from "@/app_modules/component_global/loading_page";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 
 export default async function Page() {
-    return (
-      <>
-        <ComponentGlobal_LoadingPage height="100%"/>
-      </>
-    );
-}
+  return (
+    <>
+      <ComponentGlobal_V2_LoadingPage />
+    </>
+  );
+}

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

@@ -1,9 +1,9 @@
-import ComponentGlobal_LoadingPage from "@/app_modules/component_global/loading_page";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 
 export default async function Page() {
-    return (
-      <>
-        <ComponentGlobal_LoadingPage height="100vh"/>
-      </>
-    );
-}
+  return (
+    <>
+      <ComponentGlobal_V2_LoadingPage />
+    </>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { LayoutForum_Create } from "@/app_modules/forum";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutForum_Create>{children}</LayoutForum_Create>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,14 @@
+import LayoutForum_Detail from "@/app_modules/forum/detail/layout";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutForum_Detail>{children}</LayoutForum_Detail>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,11 @@
+import Forum_Detail from "@/app_modules/forum/detail";
+
+export default async function Page({params}: {params: {id: string}}) {
+  let forumId = params.id
+
+  return (
+    <>
+      <Forum_Detail forumId={forumId} />
+    </>
+  );
+}

src/app/dev/forum/edit/komentar/[id]/layout.tsx

@@ -0,0 +1,14 @@
+import { LaoyoutForum_EditKomentar } from "@/app_modules/forum";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LaoyoutForum_EditKomentar>{children}</LaoyoutForum_EditKomentar>
+    </>
+  );
+}

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

@@ -0,0 +1,10 @@
+import { Forum_EditKomentar } from "@/app_modules/forum";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let komentarId = params.id;
+  return (
+    <>
+      <Forum_EditKomentar />
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+
+import { LayoutForum_EditPosting } from "@/app_modules/forum";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutForum_EditPosting>{children}</LayoutForum_EditPosting>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,21 @@
+import { LayoutForum_Forumku } from "@/app_modules/forum";
+import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
+import { user_getOneById } from "@/app_modules/home/fun/get/get_one_user_by_id";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const authorId = await User_getUserId();
+  const dataAuthor = await user_getOneById(authorId);
+
+  return (
+    <>
+      <LayoutForum_Forumku username={dataAuthor?.username as any}>
+        {children}
+      </LayoutForum_Forumku>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,29 @@
+import { Forum_Forumku } from "@/app_modules/forum";
+import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
+import { user_getOneById } from "@/app_modules/home/fun/get/get_one_user_by_id";
+import _ from "lodash";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const authorId = params.id;
+  const dataAuthor = await user_getOneById(authorId);
+  const auhtorSelectedData = _.omit(dataAuthor, [
+    "Profile.email",
+    "Profile.alamat",
+    "Profile.jenisKelamin",
+    "Profile.createdAt",
+    "Profile.updatedAt",
+    "Profile.imagesBackgroundId",
+  ]);
+  // console.log(dataAuthor)
+  // console.log(auhtorSelectedData)
+
+  // await new Promise((a, b) => {
+  //   setTimeout(a, 1000);
+  // });
+
+  return (
+    <>
+      <Forum_Forumku auhtorSelectedData={auhtorSelectedData as any} />
+    </>
+  );
+}

src/app/dev/forum/komentar/[id]/layout.tsx

@@ -0,0 +1,8 @@
+import { LayoutForum_Komentar } from "@/app_modules/forum";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return<>
+    <LayoutForum_Komentar>{children}</LayoutForum_Komentar>
+    </>
+}

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

@@ -0,0 +1,12 @@
+import { Forum_Komentar } from "@/app_modules/forum";
+
+export default async function Page({params}: {params: {id: string}}) {
+    let forumId = params.id
+    
+
+  return (
+    <>
+      <Forum_Komentar forumId={forumId} />
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { LayoutForum_Main } from "@/app_modules/forum";
+import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
+import { user_getOneById } from "@/app_modules/home/fun/get/get_one_user_by_id";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const authorId = await User_getUserId();
+  const dataAuthor = await user_getOneById(authorId);
+
+  return (
+    <>
+      <LayoutForum_Main dataAuthor={dataAuthor as any}>{children}</LayoutForum_Main>
+    </>
+  );
+}

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

@@ -0,0 +1,9 @@
+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/page.tsx

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

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

@@ -0,0 +1,14 @@
+import { LayoutForum_ReportKomentar } from "@/app_modules/forum";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutForum_ReportKomentar>{children}</LayoutForum_ReportKomentar>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,8 @@
+import { Forum_ReportKomentar } from "@/app_modules/forum";
+
+export default async function Page({params}: {params: {id: string}}) {
+    let komentarId = params.id
+    return<>
+    <Forum_ReportKomentar id={komentarId}/>
+    </>
+}

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

@@ -0,0 +1,15 @@
+
+import { LayoutForum_ReportPosting } from "@/app_modules/forum";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutForum_ReportPosting>{children}</LayoutForum_ReportPosting>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,11 @@
+import { Forum_ReportPosting } from "@/app_modules/forum";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let id = params.id;
+
+  return (
+    <>
+      <Forum_ReportPosting id={id} />
+    </>
+  );
+}

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

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

src/app/dev/home/layout.tsx

@@ -1,11 +1,11 @@
 import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
 import { HomeLayout } from "@/app_modules/home";
-import { User_getOneById } from "@/app_modules/home/fun/get/get_one_user_by_id";
+import { user_getOneById } from "@/app_modules/home/fun/get/get_one_user_by_id";
 import { redirect } from "next/navigation";
 
 export default async function Layout({ children }: { children: any }) {
   const userId = await User_getUserId();
-  const dataUser = await User_getOneById(userId);
+  const dataUser = await user_getOneById(userId);
 
   return (
     <>

src/app/dev/home/loading.tsx

@@ -1,9 +1,9 @@
-import ComponentGlobal_LoadingPage from "@/app_modules/component_global/loading_page";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 
 export default async function Page() {
   return (
     <>
-      <ComponentGlobal_LoadingPage height="100%"/>
+      <ComponentGlobal_V2_LoadingPage />
     </>
   );
 }

src/app/dev/home/page.tsx

@@ -3,11 +3,11 @@ import { cookies } from "next/headers";
 import { unsealData } from "iron-session";
 import _ from "lodash";
 import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
-import { User_getOneById } from "@/app_modules/home/fun/get/get_one_user_by_id";
+import { user_getOneById } from "@/app_modules/home/fun/get/get_one_user_by_id";
 
 export default async function Page() {
   const userId = await User_getUserId();
-  const dataUser = await User_getOneById(userId);
+  const dataUser = await user_getOneById(userId);
   // await new Promise((a, b) => {
   //   setTimeout(a, 1000);
   // });

src/app/dev/katalog/[id]/loading.tsx

@@ -1,10 +1,9 @@
-import ComponentGlobal_LoadingPage from "@/app_modules/component_global/loading_page";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 
 export default async function Page() {
-    
   return (
     <>
-      <ComponentGlobal_LoadingPage height="100%" />
+      <ComponentGlobal_V2_LoadingPage />
     </>
   );
 }

src/app/dev/katalog/[id]/page.tsx

@@ -12,13 +12,13 @@ import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/g
 import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
 import { Profile_getOneById } from "@/app_modules/katalog/profile/fun/get/get_one_profile";
 import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
-import { User_getOneById } from "@/app_modules/home/fun/get/get_one_user_by_id";
+import { user_getOneById } from "@/app_modules/home/fun/get/get_one_user_by_id";
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export default async function Page({ params }: { params: { id: string } }) {
   let profileId = params.id;
   const authorId = await User_getUserId();
-  const dataUser = await User_getOneById(authorId)
+  const dataUser = await user_getOneById(authorId)
   const listPorto = await funGetListPortofolio(profileId);
   const dataProfile = await Profile_getOneProfileAndUserById(profileId);
   // console.log(dataProfile)

src/app/lib/router_hipmi/router_forum.ts

@@ -0,0 +1,24 @@
+export const RouterForum = {
+  splash: "/dev/forum/splash",
+
+  // main
+  beranda: "/dev/forum/main",
+  forumku: "/dev/forum/forumku/",
+
+  // create
+  create: "/dev/forum/create",
+
+  //edit
+  edit_posting: "/dev/forum/edit/posting/",
+  edit_komentar: "/dev/forum/edit/komentar/",
+
+  //detail
+  main_detail: "/dev/forum/detail/",
+
+  // komentra
+  komentar: "/dev/forum/komentar/",
+
+  //report
+  report_posting: "/dev/forum/report/posting/",
+  report_komentar: "/dev/forum/report/komentar/",
+};

src/app_modules/component_global/author_name_on_header.tsx

@@ -1,20 +1,26 @@
 "use client";
 
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { Stack, Grid, Avatar, Divider, Text } from "@mantine/core";
+import { Stack, Grid, Avatar, Divider, Text, Group } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { ComponentGlobal_NotifikasiPeringatan } from "./notif_global/notifikasi_peringatan";
+import moment from "moment";
 
 export default function ComponentGlobal_AuthorNameOnHeader({
   profileId,
   imagesId,
   authorName,
+  tglPublish,
+  isPembatas,
 }: {
   profileId?: string;
   imagesId?: string;
   authorName?: string;
+  tglPublish?: Date;
+  isPembatas?: boolean;
 }) {
   const router = useRouter();
+  const skrng = new Date();
   return (
     <>
       <Stack spacing={"xs"}>
@@ -43,13 +49,28 @@ export default function ComponentGlobal_AuthorNameOnHeader({
           </Grid.Col>
           <Grid.Col span={"auto"}>
             <Stack justify="center" h={"100%"}>
-              <Text truncate fz={"sm"} fw={"bold"}>
-                {authorName ? authorName : "Nama author"}
-              </Text>
+              <Group position="apart">
+                <Stack justify="center" h={"100%"}>
+                  <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                    {authorName ? authorName : "Nama author"}
+                  </Text>
+                </Stack>
+                <Stack justify="center" h={"100%"}>
+                  {tglPublish ? (
+                    <Text c={"gray"} fz={"xs"}>
+                      {skrng.toLocaleDateString(["id-ID"], {
+                        dateStyle: "medium",
+                      })}
+                    </Text>
+                  ) : (
+                    ""
+                  )}
+                </Stack>
+              </Group>
             </Stack>
           </Grid.Col>
         </Grid>
-        <Divider />
+        {isPembatas ? <Divider /> : ""}
       </Stack>
     </>
   );

src/app_modules/component_global/loading_page.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { Center, Group, Loader, Skeleton, Stack } from "@mantine/core";
-
-/**
- * @param | is On Layout: 100%, is Not On Layout: 100vh
- * @returns Skeleton loading
- */
-export default function ComponentGlobal_LoadingPage({ height }: { height: string }) {
-  return (
-    <>
-      <Center h={height}>
-        <Group>
-          {Array(3)
-            .fill(0)
-            .map((e, i) => (
-              <Skeleton key={i} height={50} circle mb="xl" />
-            ))}
-        </Group>
-        {/* <Stack spacing={0}>
-          {Array(3)
-            .fill(0)
-            .map((v, index) => (
-              <Group key={index}>
-                {Array(3)
-                  .fill(0)
-                  .map((e, i) => (
-                    <Skeleton key={i} height={50} circle mb="xl" />
-                  ))}
-              </Group>
-            ))}
-        </Stack> */}
-      </Center>
-    </>
-  );
-}

src/app_modules/component_global/loading_page_v2.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Box, Center, Group, LoadingOverlay, Skeleton } from "@mantine/core";
+
+export default function ComponentGlobal_V2_LoadingPage() {
+  const customLOader = (
+    <Center h={"100vh"}>
+      <Group>
+        {Array(3)
+          .fill(0)
+          .map((e, i) => (
+            <Skeleton key={i} height={50} circle mb="xl" />
+          ))}
+      </Group>
+    </Center>
+  );
+
+  return (
+    <>
+      
+        <LoadingOverlay visible overlayBlur={2} loader={customLOader} />
+      
+    </>
+  );
+}

src/app_modules/forum/component/author_header_name.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  Stack,
+  Grid,
+  Avatar,
+  Divider,
+  Text,
+  Group,
+  ThemeIcon,
+  ActionIcon,
+  Drawer,
+  Paper,
+  Button,
+  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,
+  IconTrash,
+} from "@tabler/icons-react";
+import { IconCircle } from "@tabler/icons-react";
+import { IoIosMore } from "react-icons/io";
+import { useDisclosure } from "@mantine/hooks";
+import { useState } from "react";
+import ButtonMore from "./button_more";
+
+export default function ComponentForum_AuthorNameOnHeader({
+  forumId,
+  imagesId,
+  authorName,
+  username,
+  tglPublish,
+  isPembatas,
+  tipe,
+  isMoreButton,
+}: {
+  forumId?: string;
+  imagesId?: string;
+  authorName?: string;
+  username?: string;
+  tglPublish?: Date;
+  isPembatas?: boolean;
+  tipe: string;
+  isMoreButton?: boolean;
+}) {
+  const router = useRouter();
+  const skrng = new Date();
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (forumId) {
+                router.push(RouterForum.forumku + forumId);
+              } else {
+                ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+              }
+            }}
+          >
+            <Avatar
+              size={30}
+              sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+              radius={"xl"}
+              bg={"gray.1"}
+              src={
+                imagesId
+                  ? RouterProfile.api_foto_profile + imagesId
+                  : "/aset/global/avatar.png"
+              }
+            />
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Stack justify="center" h={"100%"}>
+              <Grid>
+                <Grid.Col span={"auto"}>
+                  <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                    {authorName
+                      ? authorName
+                      : "Nama author coba di berikan panjang "}
+                  </Text>
+                </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"}>
+                  {skrng.toLocaleDateString(["id-ID"], {
+                    // dateStyle: "medium",
+                    day: "numeric",
+                    month: "short",
+                  })}
+                  <IconCircle
+                    size={5}
+                    color="gray"
+                    style={{ marginLeft: "5px" }}
+                  />
+                </Text>
+              </Group>
+              {isMoreButton ? (
+                <Group position="right">
+                  <ButtonMore id={forumId} tipe={tipe} />
+                </Group>
+              ) : (
+                ""
+              )}
+            </Group>
+          </Grid.Col>
+        </Grid>
+        {isPembatas ? <Divider /> : ""}
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/component/author_name_on_detail.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  Stack,
+  Grid,
+  Avatar,
+  Divider,
+  Text,
+  Group,
+  ThemeIcon,
+  ActionIcon,
+} 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,
+  IconMessageCircle,
+} from "@tabler/icons-react";
+import { IconCircle } from "@tabler/icons-react";
+import ButtonMore from "./button_more";
+
+export default function ComponentForum_AuthorNameOnDetail({
+  forumId,
+  imagesId,
+  authorName,
+  username,
+  tglPublish,
+  isPembatas,
+  tipe,
+}: {
+  forumId?: string;
+  imagesId?: string;
+  authorName?: string;
+  username?: string;
+  tglPublish?: Date;
+  isPembatas?: boolean;
+  tipe: string
+}) {
+  const router = useRouter();
+  const skrng = new Date();
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (forumId) {
+                router.push(RouterForum.forumku + forumId);
+              } else {
+                ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+              }
+            }}
+          >
+            <Avatar
+              size={40}
+              sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+              radius={"xl"}
+              bg={"gray.1"}
+              src={
+                imagesId
+                  ? RouterProfile.api_foto_profile + imagesId
+                  : "/aset/global/avatar.png"
+              }
+            />
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Stack spacing={0}>
+              <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                {authorName ? authorName : "Nama author "}
+              </Text>
+              <Text lineClamp={1} fz={"xs"} c={"gray"}>
+                {username ? username : "@username "}
+              </Text>
+            </Stack>
+
+            {/* <Stack justify="center" h={"100%"}>
+              <Grid>
+                <Grid.Col span={"auto"}>
+                  <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                    {authorName ? authorName : "Nama author "}
+                  </Text>
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Text lineClamp={1} fz={"sm"} c={"gray"}>
+                    {username ? username : "@username "}
+                  </Text>
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Group spacing={3}>
+                    <IconCircle size={5} color="gray" />
+                    <Text c={"gray"} fz={"sm"}>
+                      {skrng.toLocaleDateString(["id-ID"], {
+                        dateStyle: "medium",
+                      })}
+                    </Text>
+                  </Group>
+                </Grid.Col>
+              </Grid>
+            </Stack> */}
+          </Grid.Col>
+          <Grid.Col span={"content"}>
+           <ButtonMore id={forumId} tipe="posting"/>
+          </Grid.Col>
+        </Grid>
+        {isPembatas ? <Divider /> : ""}
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/component/button_more.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import {
+  Drawer,
+  Stack,
+  Grid,
+  Button,
+  Modal,
+  Title,
+  Group,
+  ActionIcon,
+  Text,
+  Box,
+  Center,
+  Loader,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconTrash, IconEdit, IconFlag3, IconDots } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { createStyles } from "@mantine/core";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+import { useAtom } from "jotai";
+import { gs_forum_loading_edit_posting } from "../global_state";
+import ComponentForum_LoadingDrawer from "./loading_drawer";
+
+const useStyles = createStyles((theme) => ({
+  myCustomButton: {
+    ...theme.fn.focusStyles(),
+  },
+  radiusCustom: {
+    // borderRadius: "10px, 10px, 0px,0px",
+    borderTopRightRadius: "10px",
+    borderTopLeftRadius: "10px",
+  },
+}));
+
+export default function ButtonMore({ id, tipe }: { id: any; tipe: string }) {
+  const router = useRouter();
+  const { classes } = useStyles();
+  const [opened, { open, close }] = useDisclosure(false);
+  const [openDel, setOpenDel] = 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>
+          <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);
+              if (tipe === "posting") {
+                router.push(RouterForum.edit_posting + id);
+              } else {
+                router.push(RouterForum.edit_komentar + id);
+              }
+            }}
+          >
+            <Grid.Col span={"content"}>
+              <IconEdit color={loadingEdit ? "gray" : "black"} />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Group>
+                <Text c={loadingEdit ? "gray" : "black"}>Edit {tipe}</Text>{" "}
+                {loadingEdit ? <Loader size={"sm"} /> : ""}
+              </Group>
+            </Grid.Col>
+          </Grid>
+
+          <Grid
+            onClick={() => {
+              setLoadingReport(true);
+              if (tipe === "posting") {
+                router.push(RouterForum.report_posting + id);
+              } else {
+                router.push(RouterForum.report_komentar + id);
+              }
+            }}
+          >
+            <Grid.Col span={"content"}>
+              <IconFlag3 color={loadingReport ? "gray" : "black"} />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Group>
+                <Text c={loadingReport ? "gray" : "black"}>
+                  Laporkan {tipe}
+                </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}
+      >
+        <Stack>
+          <Title order={6}>Yakin menghapus {tipe} ini ?</Title>
+          <Group position="center">
+            <Button radius={"xl"} onClick={() => setOpenDel(false)}>
+              Batal
+            </Button>
+            <Button
+              color="red"
+              radius={"xl"}
+              onClick={() => {
+                setOpenDel(false);
+                if (tipe === "posting") {
+                  ComponentGlobal_NotifikasiBerhasil(
+                    "Postingan Terhapus ",
+                    2000
+                  );
+                } else {
+                  ComponentGlobal_NotifikasiBerhasil(
+                    "Berhasil Hapus Komentar",
+                    2000
+                  );
+                }
+              }}
+            >
+              Hapus
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      <ActionIcon variant="transparent" onClick={() => open()}>
+        <IconDots size={20} />
+      </ActionIcon>
+    </>
+  );
+}

src/app_modules/forum/component/header/header_rata_kiri.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ActionIcon, Group, Header, Title } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function ComponentForum_HeaderRataKiri({
+  title,
+}: {
+  title: string;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Header height={50} sx={{ borderStyle: "none" }}>
+        <Group h={50} px={"md"}>
+          <ActionIcon
+            variant="transparent"
+            onClick={() => {
+              router.back();
+            }}
+          >
+            <IconX />
+          </ActionIcon>
+          <Title order={5}>{title}</Title>
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/forum/component/header/header_tamplate.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
+import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentForum_HeaderTamplate({
+  hideBack,
+  changeIconBack,
+  route,
+  route2,
+  title,
+  icon,
+  bg,
+}: {
+  hideBack?: boolean;
+  changeIconBack?: any;
+  route?: any;
+  route2?: any;
+  title: string;
+  icon?: any;
+  bg?: any;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Header
+        height={50}
+        sx={{ borderStyle: "none" }}
+        bg={bg === null ? "" : bg}
+      >
+        <Group h={50} position="apart" px={"md"}>
+          {hideBack ? (
+            <ActionIcon variant="transparent" disabled></ActionIcon>
+          ) : (
+            <ActionIcon
+              variant="transparent"
+              onClick={() => {
+                if (route === null || route === undefined) {
+                  return router.back();
+                } else {
+                  return router.push(route);
+                }
+              }}
+            >
+              {changeIconBack ? changeIconBack : <IconChevronLeft />}
+            </ActionIcon>
+          )}
+          <Title order={5}>{title}</Title>
+          {(() => {
+            if (route2 === null || route2 === undefined) {
+              return <ActionIcon disabled variant="transparent"></ActionIcon>;
+            } else {
+              return (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => router.push(route2)}
+                >
+                  {icon}
+                </ActionIcon>
+              );
+            }
+          })()}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/forum/component/loading_drawer.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Center, Group, LoadingOverlay, Skeleton } from "@mantine/core";
+
+export default function ComponentForum_LoadingDrawer() {
+  const customLoad = (
+    <Center h={"100vh"}>
+      <Group>
+        {Array(3)
+          .fill(0)
+          .map((e, i) => (
+            <Skeleton key={i} height={50} circle mb="xl" />
+          ))}
+      </Group>
+    </Center>
+  );
+  return (
+    <>
+      {customLoad}
+    </>
+  );
+}

src/app_modules/forum/create/index.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import {
+  ActionIcon,
+  Button,
+  Center,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+} from "@mantine/core";
+import "react-quill/dist/quill.snow.css";
+import "react-quill/dist/quill.bubble.css";
+import { IconPhotoUp } from "@tabler/icons-react";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+
+import dynamic from "next/dynamic";
+import React, { useState } from "react";
+const ReactQuill = dynamic(
+  () => {
+    return import("react-quill");
+  },
+  { ssr: false }
+);
+
+export default function Forum_Create() {
+  const [value, setValue] = useState("");
+  const [reload, setReload] = useState(false);
+  useShallowEffect(() => {
+    if (window && window.document) setReload(true);
+  }, []);
+
+  if (!reload)
+    return (
+      <>
+        <ComponentGlobal_V2_LoadingPage />
+      </>
+    );
+
+  return (
+    <>
+      <Stack>
+        <Paper withBorder shadow="lg">
+          <ReactQuill
+            theme="bubble"
+            placeholder="Apa yang sedang hangat dibicarakan ?"
+            style={{ height: 150 }}
+            onChange={(val) => {
+              setValue(val);
+            }}
+          />
+        </Paper>
+        <Group position="right">
+          {/* <ActionIcon>
+            <IconPhotoUp />
+          </ActionIcon> */}
+          <ButtonAction />
+        </Group>
+      </Stack>
+      <div dangerouslySetInnerHTML={{ __html: value }} />
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  return (
+    <>
+      <Button radius={"xl"} onClick={() => router.back()}>
+        Posting
+      </Button>
+    </>
+  );
+}

src/app_modules/forum/create/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
+
+export default function LayoutForum_Create({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentForum_HeaderTamplate title="Tambah Postingan" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/forum/detail/index.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import {
+  ActionIcon,
+  Box,
+  Card,
+  Divider,
+  Group,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { IconMessageCircle } from "@tabler/icons-react";
+import ComponentForum_AuthorNameOnHeader from "../component/author_header_name";
+import ComponentForum_AuthorNameOnDetail from "../component/author_name_on_detail";
+import { useRouter } from "next/navigation";
+
+export default function Forum_Detail({ forumId }: { forumId: string }) {
+  return (
+    <>
+      <Stack px={"xs"}>
+        <ForumView forumId={forumId} />
+        <DiskusiView />
+      </Stack>
+    </>
+  );
+}
+
+function ForumView({ forumId }: { forumId: string }) {
+  const router = useRouter();
+  return (
+    <>
+      <Card style={{ position: "relative", width: "100%" }}>
+        <Card.Section>
+          <ComponentForum_AuthorNameOnDetail forumId={forumId} tipe="posting" />
+        </Card.Section>
+        <Card.Section sx={{ zIndex: 0 }} py={"sm"}>
+          <Stack spacing={"xs"}>
+            <Text fz={"sm"}>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad,
+              vitae. Quisquam aspernatur, eius consequatur dicta repellendus
+              facere vero recusandae deleniti voluptas quod architecto, tenetur
+              totam excepturi rem nam iusto earum.
+            </Text>
+          </Stack>
+        </Card.Section>
+        <Card.Section>
+          <Stack>
+            <Group position="apart">
+              <Group spacing={"xs"}>
+                <ActionIcon
+                  variant="transparent"
+                  sx={{ zIndex: 1 }}
+                  onClick={() => {
+                    router.push(RouterForum.komentar + forumId);
+                  }}
+                >
+                  <IconMessageCircle color="gray" size={25} />
+                </ActionIcon>
+                <Text c={"gray"}>1</Text>
+              </Group>
+              <Group>
+                <Text c={"gray"} fz={"sm"}>
+                  {new Date(
+                    "August 19, 1975 23:15:30 GMT+00:00"
+                  ).toLocaleTimeString()}
+                </Text>
+                <Text c={"gray"} fz={"sm"}>
+                  {new Date().toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+              </Group>
+            </Group>
+            <Box>
+              <Divider />
+            </Box>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}
+
+function DiskusiView() {
+  return (
+    <>
+      <Stack>
+        {Array(5)
+          .fill(0)
+          .map((e, i) => (
+            <Card key={i} mt={"xs"}>
+              <Card.Section>
+                <ComponentForum_AuthorNameOnHeader
+                  forumId={i as any}
+                  tipe="komentar"
+                  isMoreButton={true}
+                />
+              </Card.Section>
+              <Card.Section sx={{ zIndex: 0 }} p={"sm"}>
+                <Stack spacing={"xs"}>
+                  <Text fz={"sm"} lineClamp={4}>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                    Ad, vitae. Quisquam aspernatur, eius consequatur dicta
+                    repellendus facere vero recusandae deleniti voluptas quod
+                    architecto, tenetur totam excepturi rem nam iusto earum.
+                  </Text>
+                </Stack>
+              </Card.Section>
+              <Card.Section>
+                <Stack>
+                  {/* <Group>
+              <Text c={"gray"} fz={"sm"}>
+                {new Date(
+                  "August 19, 1975 23:15:30 GMT+00:00"
+                ).toLocaleTimeString()}
+              </Text>
+              <Text c={"gray"} fz={"sm"}>
+                {new Date().toLocaleDateString(["id-ID"], {
+                  dateStyle: "medium",
+                })}
+              </Text>
+            </Group> */}
+
+                  <Divider />
+                </Stack>
+              </Card.Section>
+            </Card>
+          ))}
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/detail/layout.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
+import React from "react";
+import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
+import { useRouter } from "next/navigation";
+import { IconChevronLeft } from "@tabler/icons-react";
+
+export default function LayoutForum_Detail({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell
+        header={
+          <Header height={50} sx={{ borderStyle: "none" }}>
+            <Group h={50} px={"md"}>
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  router.back();
+                }}
+              >
+                <IconChevronLeft />
+              </ActionIcon>
+              <Title order={5}>Postingan</Title>
+            </Group>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,84 @@
+"use client"
+
+import {
+  ActionIcon,
+  Button,
+  Center,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+} from "@mantine/core";
+import "react-quill/dist/quill.snow.css";
+import "react-quill/dist/quill.bubble.css";
+import { IconPhotoUp } from "@tabler/icons-react";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+
+
+import dynamic from "next/dynamic";
+import React, { useState } from "react";
+import { useAtom } from "jotai";
+import { gs_forum_loading_edit_posting } from "../../global_state";
+const ReactQuill = dynamic(
+  () => {
+    return import("react-quill");
+  },
+  { ssr: false }
+);
+
+export default function Forum_EditKomentar() {
+  const [value, setValue] = useState("");
+  const [reload, setReload] = useState(false);
+  useShallowEffect(() => {
+    if (window && window.document) setReload(true);
+  }, []);
+
+  if (!reload)
+    return (
+      <>
+        <ComponentGlobal_V2_LoadingPage />
+      </>
+    );
+
+  return (
+    <>
+      <Stack>
+        <Paper withBorder shadow="lg">
+          <ReactQuill
+            theme="bubble"
+            placeholder="Apa yang sedang hangat dibicarakan ?"
+            style={{ height: 150 }}
+            onChange={(val) => {
+              setValue(val);
+            }}
+          />
+        </Paper>
+        <Group position="right">
+          {/* <ActionIcon>
+            <IconPhotoUp />
+          </ActionIcon> */}
+          <ButtonAction />
+        </Group>
+      </Stack>
+      <div dangerouslySetInnerHTML={{ __html: value }} />
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [loadingEdit, setLoadingEdit] = useAtom(gs_forum_loading_edit_posting);
+
+  return (
+    <>
+      <Button radius={"xl"} onClick={() => {
+        router.back()
+
+      }}>
+        Update
+      </Button>
+    </>
+  );
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentForum_HeaderTamplate from "../../component/header/header_tamplate";
+
+export default function LayoutForum_EditKomentar({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentForum_HeaderTamplate title="Edit Komentar" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,84 @@
+"use client"
+
+import {
+  ActionIcon,
+  Button,
+  Center,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+} from "@mantine/core";
+import "react-quill/dist/quill.snow.css";
+import "react-quill/dist/quill.bubble.css";
+import { IconPhotoUp } from "@tabler/icons-react";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+
+
+import dynamic from "next/dynamic";
+import React, { useState } from "react";
+import { useAtom } from "jotai";
+import { gs_forum_loading_edit_posting } from "../../global_state";
+const ReactQuill = dynamic(
+  () => {
+    return import("react-quill");
+  },
+  { ssr: false }
+);
+
+export default function Forum_EditPosting() {
+  const [value, setValue] = useState("");
+  const [reload, setReload] = useState(false);
+  useShallowEffect(() => {
+    if (window && window.document) setReload(true);
+  }, []);
+
+  if (!reload)
+    return (
+      <>
+        <ComponentGlobal_V2_LoadingPage />
+      </>
+    );
+
+  return (
+    <>
+      <Stack>
+        <Paper withBorder shadow="lg">
+          <ReactQuill
+            theme="bubble"
+            placeholder="Apa yang sedang hangat dibicarakan ?"
+            style={{ height: 150 }}
+            onChange={(val) => {
+              setValue(val);
+            }}
+          />
+        </Paper>
+        <Group position="right">
+          {/* <ActionIcon>
+            <IconPhotoUp />
+          </ActionIcon> */}
+          <ButtonAction />
+        </Group>
+      </Stack>
+      <div dangerouslySetInnerHTML={{ __html: value }} />
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [loadingEdit, setLoadingEdit] = useAtom(gs_forum_loading_edit_posting);
+
+  return (
+    <>
+      <Button radius={"xl"} onClick={() => {
+        router.back()
+
+      }}>
+        Update
+      </Button>
+    </>
+  );
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentForum_HeaderTamplate from "../../component/header/header_tamplate";
+
+export default function LayoutForum_EditPosting({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentForum_HeaderTamplate title="Edit Postingan" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/forum/forumku/index.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import {
+  ActionIcon,
+  Avatar,
+  Button,
+  Card,
+  Center,
+  Divider,
+  Group,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { IconCircleFilled, IconMessageCircle } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import ComponentForum_AuthorNameOnHeader from "../component/author_header_name";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { useState } from "react";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+
+export default function Forum_Forumku({
+  auhtorSelectedData,
+}: {
+  auhtorSelectedData: MODEL_USER;
+}) {
+  const router = useRouter();
+  const [loadingDetail, setLoaduingDetail] = useState(false);
+  const [loadingKomen, setLoadingKomen] = useState(false);
+
+  if (loadingDetail) return <ComponentGlobal_V2_LoadingPage />;
+  if (loadingKomen) return <ComponentGlobal_V2_LoadingPage />;
+  return (
+    <>
+      <Stack spacing={"xl"} px={"sm"}>
+        <Center>
+          <Avatar
+            radius={"100%"}
+            sx={{
+              borderStyle: "solid",
+              borderWidth: "0.5px",
+              borderColor: "black",
+            }}
+            size={100}
+            alt="foto"
+            src={
+              RouterProfile.api_foto_profile +
+              auhtorSelectedData?.Profile?.imagesId
+            }
+          />
+        </Center>
+        <Group position="apart">
+          <Stack spacing={0}>
+            <Text lineClamp={1} fw={"bold"}>
+              {auhtorSelectedData?.Profile?.name}
+            </Text>
+            <Text lineClamp={1} c={"gray"} fz={"sm"}>
+              @{auhtorSelectedData?.username}{" "}
+              <Text inherit span>
+                <IconCircleFilled size={5} /> 5 Posting
+              </Text>
+            </Text>
+          </Stack>
+          <Button
+            compact
+            radius={"xl"}
+            variant="outline"
+            onClick={() =>
+              router.push(
+                RouterProfile.katalog + auhtorSelectedData?.Profile?.id
+              )
+            }
+          >
+            Kunjungi Profile
+          </Button>
+        </Group>
+        <Divider />
+
+        <Stack>
+          {Array(5)
+            .fill(0)
+            .map((e, i) => (
+              <Card key={i}>
+                <Card.Section>
+                  <ComponentForum_AuthorNameOnHeader
+                    forumId={i as any}
+                    tipe="posting"
+                    isMoreButton={true}
+                  />
+                </Card.Section>
+                <Card.Section
+                  sx={{ zIndex: 0 }}
+                  p={"sm"}
+                  onClick={() => {
+                    // console.log("halaman forum");
+                    setLoaduingDetail(true);
+                    router.push(RouterForum.main_detail + i);
+                  }}
+                >
+                  <Stack spacing={"xs"}>
+                    <Text fz={"sm"} lineClamp={4}>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                      Ad, vitae. Quisquam aspernatur, eius consequatur dicta
+                      repellendus facere vero recusandae deleniti voluptas quod
+                      architecto, tenetur totam excepturi rem nam iusto earum.
+                    </Text>
+                  </Stack>
+                </Card.Section>
+                <Card.Section>
+                  <Stack>
+                    <Group spacing={"xs"} px={"sm"}>
+                      <ActionIcon
+                        // loading={loadingKomen ? true : false}
+                        variant="transparent"
+                        sx={{ zIndex: 1 }}
+                        onClick={() => {
+                          setLoadingKomen(true);
+                          router.push(RouterForum.komentar + i);
+                        }}
+                      >
+                        <IconMessageCircle color="gray" size={25} />
+                      </ActionIcon>
+                      <Text c={"gray"}>1</Text>
+                    </Group>
+                    <Divider />
+                  </Stack>
+                </Card.Section>
+              </Card>
+            ))}
+        </Stack>
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/forumku/layout.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+
+export default function LayoutForum_Forumku({
+  children,
+  username,
+}: {
+  children: React.ReactNode;
+  username: string;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentForum_HeaderTamplate title={`${username}`} />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/forum/global_state/index.tsx

@@ -0,0 +1,3 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const gs_forum_loading_edit_posting = atomWithStorage("gs_forum_loading_edit_posting", false)

src/app_modules/forum/index.ts

@@ -0,0 +1,41 @@
+import Forum_Splash from "./splash";
+import Forum_Beranda from "./main/beranda";
+import LayoutForum_Main from "./main/layout";
+import Forum_Forumku from "./forumku";
+import Forum_Create from "./create";
+import LayoutForum_Create from "./create/layout";
+import LayoutForum_Forumku from "./forumku/layout";
+import Forum_Detail from "./detail";
+import LayoutForum_Detail from "./detail/layout";
+import Forum_Komentar from "./komentar";
+import LayoutForum_Komentar from "./komentar/layout";
+import Forum_EditPosting from "./edit/posting";
+import LayoutForum_EditPosting from "./edit/posting/layout";
+import Forum_ReportPosting from "./report/posting";
+import LayoutForum_ReportPosting from "./report/posting/layout";
+import Forum_EditKomentar from "./edit/komentar";
+import LayoutForum_EditKomentar from "./edit/komentar/layout";
+import Forum_ReportKomentar from "./report/komentar";
+import LayoutForum_ReportKomentar from "./report/komentar/layout";
+
+export {
+  Forum_Splash,
+  Forum_Beranda,
+  LayoutForum_Main,
+  Forum_Forumku,
+  Forum_Create,
+  LayoutForum_Create,
+  LayoutForum_Forumku,
+  Forum_Detail,
+  LayoutForum_Detail,
+  Forum_Komentar,
+  LayoutForum_Komentar,
+  Forum_EditPosting,
+  LayoutForum_EditPosting,
+  Forum_ReportPosting,
+  LayoutForum_ReportPosting,
+  Forum_EditKomentar,
+  LayoutForum_EditKomentar as LaoyoutForum_EditKomentar,
+  Forum_ReportKomentar,
+  LayoutForum_ReportKomentar,
+};

src/app_modules/forum/komentar/index.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import {
+  ActionIcon,
+  Button,
+  Card,
+  Group,
+  Paper,
+  Stack,
+  Text,
+} from "@mantine/core";
+import ComponentForum_AuthorNameOnHeader from "../component/author_header_name";
+
+import dynamic from "next/dynamic";
+import React, { useState } from "react";
+const ReactQuill = dynamic(
+  () => {
+    return import("react-quill");
+  },
+  { ssr: false }
+);
+import "react-quill/dist/quill.bubble.css";
+import { IconPhotoUp } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function Forum_Komentar({ forumId }: { forumId: string }) {
+  const [value, setValue] = useState("");
+
+  return (
+    <>
+      <Stack px={"sm"}>
+        <Card>
+          <Card.Section>
+            <ComponentForum_AuthorNameOnHeader
+              forumId={forumId}
+              tipe="komentar"
+            />
+          </Card.Section>
+          <Card.Section sx={{ zIndex: 0 }} p={"sm"}>
+            <Stack spacing={"xs"}>
+              <Text fz={"sm"}>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad,
+                vitae. Quisquam aspernatur, eius consequatur dicta repellendus
+                facere vero recusandae deleniti voluptas quod architecto,
+                tenetur totam excepturi rem nam iusto earum.
+              </Text>
+            </Stack>
+          </Card.Section>
+        </Card>
+        <Stack>
+          <Paper withBorder shadow="lg">
+            <ReactQuill
+              theme="bubble"
+              placeholder="Posting balasan anda?"
+              //   style={{ height: 150 }}
+              onChange={(val) => {
+                setValue(val);
+              }}
+            />
+          </Paper>
+          <Group position="apart">
+            <ActionIcon>
+              <IconPhotoUp />
+            </ActionIcon>
+            <ButtonAction forumId={forumId} />
+          </Group>
+        </Stack>
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction({ forumId }: { forumId: string }) {
+  const router = useRouter();
+  return (
+    <>
+      <Button
+        radius={"xl"}
+        onClick={() => router.replace(RouterForum.main_detail + forumId)}
+      >
+        Balas
+      </Button>
+    </>
+  );
+}

src/app_modules/forum/komentar/layout.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import {
+  ActionIcon,
+  AppShell,
+  Button,
+  Group,
+  Header,
+  Title,
+} from "@mantine/core";
+import { IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import React from "react";
+import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
+
+export default function LayoutForum_Komentar({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <AppShell
+        header={
+          <Header height={50} sx={{ borderStyle: "none" }}>
+            <Group h={50} px={"md"}>
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  router.back();
+                }}
+              >
+                <IconChevronLeft />
+              </ActionIcon>
+              <Title order={5}>Komentar</Title>
+            </Group>
+          </Header>
+        }
+        // header={<ComponentForum_HeaderTamplate title="Komentar" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/forum/main/beranda.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import {
+  Affix,
+  rem,
+  ActionIcon,
+  Card,
+  CardSection,
+  Text,
+  Stack,
+  Divider,
+  Group,
+} from "@mantine/core";
+import { useTimeout, useWindowScroll } from "@mantine/hooks";
+import {
+  IconCirclePlus,
+  IconMessageCircle,
+  IconPencilPlus,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import ComponentForum_AuthorNameOnHeader from "../component/author_header_name";
+import { useState } from "react";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+import { useAtom } from "jotai";
+import { gs_forum_loading_edit_posting } from "../global_state";
+
+export default function Forum_Beranda() {
+  const router = useRouter();
+  const skrng = Date.now();
+  const [scroll, scrollTo] = useWindowScroll();
+  const [loadingCreate, setLoadingCreate] = useState(false);
+  const [loadingKomen, setLoadingKomen] = useState(false);
+  const [loadingDetail, setLoaduingDetail] = useState(false);
+
+  if (loadingDetail) return <ComponentGlobal_V2_LoadingPage />;
+  if (loadingKomen) return <ComponentGlobal_V2_LoadingPage />;
+
+  return (
+    <>
+      <Affix position={{ bottom: rem(100), right: rem(30) }}>
+        <ActionIcon
+          loading={loadingCreate ? true : false}
+          opacity={scroll.y > 0 ? 0.5 : ""}
+          style={{
+            transition: "0.5s",
+          }}
+          size={"xl"}
+          radius={"xl"}
+          variant="transparent"
+          bg={"blue"}
+          onClick={() => {
+            setLoadingCreate(true);
+            router.push(RouterForum.create);
+          }}
+        >
+          <IconPencilPlus color="white" />
+        </ActionIcon>
+      </Affix>
+
+      <Stack px={"sm"}>
+        {Array(5)
+          .fill(0)
+          .map((e, i) => (
+            <Card key={i}>
+              <Card.Section>
+                <ComponentForum_AuthorNameOnHeader
+                  forumId={i as any}
+                  tipe="posting"
+                  isMoreButton={true}
+                />
+              </Card.Section>
+              <Card.Section
+                sx={{ zIndex: 0 }}
+                p={"sm"}
+                onClick={() => {
+                  // console.log("halaman forum");
+                  setLoaduingDetail(true);
+                  router.push(RouterForum.main_detail + i);
+                }}
+              >
+                <Stack spacing={"xs"}>
+                  <Text fz={"sm"} lineClamp={4}>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                    Ad, vitae. Quisquam aspernatur, eius consequatur dicta
+                    repellendus facere vero recusandae deleniti voluptas quod
+                    architecto, tenetur totam excepturi rem nam iusto earum.
+                  </Text>
+                </Stack>
+              </Card.Section>
+              <Card.Section>
+                <Stack>
+                  <Group spacing={"xs"} px={"sm"}>
+                    <ActionIcon
+                      // loading={loadingKomen ? true : false}
+                      variant="transparent"
+                      sx={{ zIndex: 1 }}
+                      onClick={() => {
+                        setLoadingKomen(true);
+                        router.push(RouterForum.komentar + i);
+                      }}
+                    >
+                      <IconMessageCircle color="gray" size={25} />
+                    </ActionIcon>
+                    <Text c={"gray"}>1</Text>
+                  </Group>
+                  <Divider />
+                </Stack>
+              </Card.Section>
+            </Card>
+          ))}
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/main/layout.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import {
+  ActionIcon,
+  AppShell,
+  Avatar,
+  Center,
+  Footer,
+  Grid,
+  Group,
+  Header,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import React, { useState } from "react";
+import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { IconChevronLeft, IconCircle, IconHome } from "@tabler/icons-react";
+import router from "next/router";
+import { useRouter } from "next/navigation";
+import { title } from "process";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+
+export default function LayoutForum_Main({
+  children,
+  dataAuthor,
+}: {
+  children: React.ReactNode;
+  dataAuthor: MODEL_USER;
+}) {
+  const router = useRouter();
+  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 (
+    <>
+      <AppShell
+        header={
+          <Header height={50} sx={{ borderStyle: "none" }}>
+            <Group h={50} position="apart" px={"md"}>
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  return router.push(RouterHome.main_home);
+                }}
+              >
+                <IconChevronLeft />
+              </ActionIcon>
+
+              <Title order={5}>Forum</Title>
+              <ActionIcon
+                loading={loading ? true : false}
+                variant="transparent"
+                onClick={() => {
+                  setLoading(true);
+                  router.push(RouterForum.forumku + dataAuthor?.id);
+                }}
+              >
+                <Avatar
+                  radius={"xl"}
+                  size={30}
+                  sx={{
+                    borderStyle: "solid",
+                    borderWidth: "0.5px",
+                    borderColor: "black",
+                  }}
+                  alt="foto"
+                  src={
+                    RouterProfile.api_foto_profile +
+                    dataAuthor?.Profile?.imagesId
+                  }
+                />
+              </ActionIcon>
+            </Group>
+          </Header>
+        }
+
+        // footer={
+        //   <Footer height={60} bg={"dark"}>
+        //     <Grid>
+        //       {listFooter.map((e) => (
+        //         <Grid.Col
+        //           key={e.id}
+        //           span={"auto"}
+        //           pt={"md"}
+        //           onClick={() => {
+        //             router.replace(e.path);
+        //             setHotMenu(e.id);
+        //           }}
+        //         >
+        //           <Center>
+        //             <Stack align="center" spacing={0}>
+        //               <ActionIcon
+        //                 variant="transparent"
+        //                 c={hotMenu === e.id ? "blue" : "white"}
+        //               >
+        //                 {e.icon}
+        //               </ActionIcon>
+        //               <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
+        //                 {e.name}
+        //               </Text>
+        //             </Stack>
+        //           </Center>
+        //         </Grid.Col>
+        //       ))}
+        //     </Grid>
+        //   </Footer>
+        // }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,11 @@
+"use client"
+
+import { Stack } from "@mantine/core"
+
+export default function Forum_ReportKomentar({id}: {id: string}){
+    return <>
+    <Stack>
+        ini laporan
+    </Stack>
+    </>
+}

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

@@ -0,0 +1,26 @@
+"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";
+
+export default function LayoutForum_ReportKomentar({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={
+          <ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Komentar"/>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,11 @@
+"use client"
+
+import { Stack } from "@mantine/core"
+
+export default function Forum_ReportPosting({id}: {id: string}){
+    return <>
+    <Stack>
+        ini laporan
+    </Stack>
+    </>
+}

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

@@ -0,0 +1,26 @@
+"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";
+
+export default function LayoutForum_ReportPosting({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={
+          <ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Posting"/>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/forum/splash/index.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { Center, Image, Paper } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+
+export default function Forum_Splash() {
+const router = useRouter()
+    useShallowEffect(() => {
+      setTimeout(() => {
+        // setHotMenu(1);
+        // setStatus("Publish");
+        router.replace(RouterForum.beranda);
+      }, 2000);
+    }, []);
+
+  return (
+    <>
+      <Center h={"100vh"}>
+        <Paper p={{ base: 50, md: 60, lg: 80 }}>
+          <Image alt="logo" src={"/aset/forum/logo.png"} />
+        </Paper>
+      </Center>
+    </>
+  );
+}

src/app_modules/home/fun/get/get_one_user_by_id.ts

@@ -2,13 +2,14 @@
 
 import prisma from "@/app/lib/prisma";
 
-export async function User_getOneById(userId: string) {
+export async function user_getOneById(userId: string) {
   const data = await prisma.user.findFirst({
     where: {
       id: userId,
     },
     select: {
       id: true,
+      username: true,
       Profile: true,
     },
   });

src/app_modules/home/view.tsx

@@ -38,7 +38,8 @@ import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { useState } from "react";
 import { useDisclosure } from "@mantine/hooks";
-import ComponentGlobal_LoadingPage from "../component_global/loading_page";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import ComponentGlobal_V2_LoadingPage from "../component_global/loading_page_v2";
 
 export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
   const router = useRouter();
@@ -51,7 +52,7 @@ export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
       id: 1,
       name: "Forums",
       icon: <IconMessages size={50} />,
-      link: "",
+      link: RouterForum.splash,
     },
 
     {
@@ -101,16 +102,7 @@ export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
 
   return (
     <>
-      {visible ? (
-        <Box h={"100%"} pos="relative">
-          <LoadingOverlay
-            visible={visible}
-            loader={<ComponentGlobal_LoadingPage height="100%" />}
-          />
-        </Box>
-      ) : (
-        ""
-      )}
+      {visible ? <ComponentGlobal_V2_LoadingPage /> : ""}
 
       <Box>
         <Paper bg={"dark"} radius={5} my={"xs"}>

yarn.lock

@@ -3717,6 +3717,11 @@ react-fast-marquee@^1.6.4:
   resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.6.4.tgz#ac0bed0faee63e4d97e9b8cd03f3bea9f242fab3"
   integrity sha512-LAgvhRmHdqaUQ8R5jCUwzEGFUIjnCCt3T3W8X7j7wF6DWe0SATlpP0JX1V0pp2qX3DYUezmn1Iz5AtRFdL2EWQ==
 
+react-icons@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.0.1.tgz#1694e11bfa2a2888cab47dcc30154ce90485feee"
+  integrity sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==
+
 react-international-phone@^4.2.6:
   version "4.2.6"
   resolved "https://registry.yarnpkg.com/react-international-phone/-/react-international-phone-4.2.6.tgz#a92518b66b44015f5e32c96b646e0355056ae809"