# Forum Created

## feat
- CRUD Forum
- CRD Koment
- Tampilan forum profile
### No issue

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

@@ -0,0 +1,117 @@
+"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 ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
+import ComponentForum_DetailMoreButton from "../more_button/detail_more_button";
+
+export default function ComponentForum_DetailOnHeaderAuthorName({
+  authorId,
+  postingId,
+  imagesId,
+  authorName,
+  username,
+  isPembatas,
+}: {
+  authorId?: string
+  postingId?: string;
+  imagesId?: string;
+  authorName?: string;
+  username?: string;
+  tglPublish?: Date;
+  isPembatas?: boolean;
+}) {
+  const router = useRouter();
+
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (authorId) {
+                router.push(RouterForum.forumku + authorId);
+              } 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"}>
+            <ComponentForum_DetailMoreButton
+              postingId={postingId}
+              authorId={authorId}
+            />
+          </Grid.Col>
+        </Grid>
+        {isPembatas ? <Divider /> : ""}
+      </Stack>
+    </>
+  );
+}

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

@@ -1,6 +1,15 @@
 "use client";
 
-import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+import {
+  Header,
+  Group,
+  ActionIcon,
+  Text,
+  Title,
+  Center,
+  Loader,
+} from "@mantine/core";
 import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -23,6 +32,9 @@ export default function ComponentForum_HeaderTamplate({
   bg?: any;
 }) {
   const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  if (loading) return <ComponentGlobal_V2_LoadingPage />;
+  
   return (
     <>
       <Header
@@ -37,6 +49,7 @@ export default function ComponentForum_HeaderTamplate({
             <ActionIcon
               variant="transparent"
               onClick={() => {
+                setLoading(true);
                 if (route === null || route === undefined) {
                   return router.back();
                 } else {

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

@@ -0,0 +1,132 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { Stack, Grid, Avatar, Divider, Text, Group } 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 ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
+import ComponentForum_KomentarButtonMore from "../more_button/komentar_button_more";
+
+export default function ComponentForum_KomentarAuthorNameOnHeader({
+  userId,
+  komentarId,
+  imagesId,
+  authorName,
+  tglPublish,
+  isPembatas,
+  isMoreButton,
+  setKomentar,
+  postingId,
+}: {
+  userId?: string;
+  komentarId?: string;
+  imagesId?: string;
+  authorName?: string;
+  tglPublish?: Date;
+  isPembatas?: boolean;
+  isMoreButton?: boolean;
+  setKomentar?: any;
+  postingId?: string
+}) {
+  const router = useRouter();
+
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (userId) {
+                router.push(RouterForum.forumku + userId);
+              } 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"}>
+                  {tglPublish
+                    ? tglPublish.toLocaleDateString(["id-ID"], {
+                        day: "numeric",
+                        month: "short",
+                      })
+                    : new Date().toLocaleDateString(["id-ID"], {
+                        day: "numeric",
+                        month: "short",
+                      })}
+
+                  <IconCircle
+                    size={5}
+                    color="gray"
+                    style={{ marginLeft: "5px" }}
+                  />
+                </Text>
+              </Group>
+              {isMoreButton ? (
+                <Group position="right">
+                  <ComponentForum_KomentarButtonMore
+                    userId={userId}
+                    komentarId={komentarId}
+                    setKomentar={setKomentar}
+                    postingId={postingId}
+                  />
+                </Group>
+              ) : (
+                ""
+              )}
+            </Group>
+          </Grid.Col>
+        </Grid>
+        {isPembatas ? <Divider /> : ""}
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,123 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { Stack, Grid, Avatar, Divider, Text, Group } 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 ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
+
+export default function ComponentForum_PostingAuthorNameOnHeader({
+  authorId,
+  postingId,
+  imagesId,
+  authorName,
+  tglPublish,
+  isPembatas,
+  isMoreButton,
+}: {
+  authorId?: string;
+  postingId?: string;
+  imagesId?: string;
+  authorName?: string;
+  tglPublish?: Date;
+  isPembatas?: boolean;
+  isMoreButton?: boolean;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (authorId) {
+                router.push(RouterForum.forumku + authorId);
+              } 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"}>
+                  {tglPublish
+                    ? tglPublish.toLocaleDateString(["id-ID"], {
+                        day: "numeric",
+                        month: "short",
+                      })
+                    : new Date().toLocaleDateString(["id-ID"], {
+                        day: "numeric",
+                        month: "short",
+                      })}
+                  <IconCircle
+                    size={5}
+                    color="gray"
+                    style={{ marginLeft: "5px" }}
+                  />
+                </Text>
+              </Group>
+              {isMoreButton ? (
+                <Group position="right">
+                  <ComponentForum_PostingButtonMore
+                    authorId={authorId}
+                    postingId={postingId as any}
+                  />
+                </Group>
+              ) : (
+                ""
+              )}
+            </Group>
+          </Grid.Col>
+        </Grid>
+        {isPembatas ? <Divider /> : ""}
+      </Stack>
+    </>
+  );
+}