# 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

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} />
+      
+    </>
+  );
+}