Perbaikan UI pada Forum

# style:
- Tampilan keseluruhan forum di ganti menguikuti UI
## No Issue

src/app_modules/forum/main/beranda.tsx

@@ -11,20 +11,21 @@ import {
   Stack,
   Text,
   TextInput,
-  rem
+  rem,
 } from "@mantine/core";
 import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
-import {
-  IconPencilPlus,
-  IconSearchOff
-} from "@tabler/icons-react";
+import { IconPencilPlus, IconSearchOff } from "@tabler/icons-react";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentForum_V2_MainCardView from "../component/main_component/card_view";
+import ComponentForum_BerandaCardView from "../component/main_component/card_view";
 import { forum_new_getAllPosting } from "../fun/get/new_get_all_posting";
 import { MODEL_FORUM_POSTING } from "../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function Forum_Beranda({
   listForum,
@@ -121,7 +122,7 @@ export default function Forum_Beranda({
   return (
     <>
       {isNewPost && (
-        <Affix position={{ top: rem(70) }} w={"100%"}>
+        <Affix position={{ top: rem(100) }} w={"100%"}>
           <ButtonUpdateBeranda
             countNewPost={countNewPost}
             onSetData={(val) => setData(val)}
@@ -138,25 +139,29 @@ export default function Forum_Beranda({
       {/* <pre>{JSON.stringify(listForum, null, 2)}</pre> */}
       <Affix position={{ bottom: rem(100), right: rem(30) }}>
         <ActionIcon
-          loading={loadingCreate ? true : false}
           opacity={scroll.y > 0 ? 0.5 : ""}
           style={{
             transition: "0.5s",
+            border: `1px solid ${AccentColor.skyblue}`,
           }}
           size={"xl"}
           radius={"xl"}
           variant="transparent"
-          bg={"blue"}
+          bg={AccentColor.blue}
           onClick={() => {
             setLoadingCreate(true);
             router.push(RouterForum.create);
           }}
         >
-          <IconPencilPlus color="white" />
+          {loadingCreate ? (
+            <Loader size={25} />
+          ) : (
+            <IconPencilPlus color="white" />
+          )}
         </ActionIcon>
       </Affix>
 
-      <Stack px={"sm"} spacing={"xl"}>
+      <Stack spacing={"xl"}>
         <TextInput
           radius={"xl"}
           placeholder="Topik forum apa yang anda cari hari ini ?"
@@ -164,11 +169,12 @@ export default function Forum_Beranda({
             onSearch(val.currentTarget.value);
           }}
         />
+
         {_.isEmpty(data) ? (
           <Stack align="center" justify="center" h={"80vh"}>
-            <IconSearchOff size={80} color="gray" />
+            <IconSearchOff size={80} color="white" />
             <Stack spacing={0} align="center">
-              <Text c={"gray"} fw={"bold"} fz={"xs"}>
+              <Text color="white" fw={"bold"} fz={"xs"}>
                 Tidak ada data
               </Text>
             </Stack>
@@ -176,7 +182,7 @@ export default function Forum_Beranda({
         ) : (
           // --- Main component --- //
           <ScrollOnly
-            height="80vh"
+            height="83vh"
             renderLoading={() => (
               <Center mt={"lg"}>
                 <Loader />
@@ -195,7 +201,7 @@ export default function Forum_Beranda({
             }}
           >
             {(item) => (
-              <ComponentForum_V2_MainCardView
+              <ComponentForum_BerandaCardView
                 data={item}
                 userLoginId={userLoginId}
                 onLoadData={(val) => {
@@ -241,6 +247,11 @@ function ButtonUpdateBeranda({
     <>
       <Center>
         <Button
+          style={{
+            transition: "0.5s",
+            border: `1px solid ${AccentColor.skyblue}`,
+          }}
+          bg={AccentColor.blue}
           loaderPosition="center"
           loading={isLoading ? true : false}
           radius={"xl"}

src/app_modules/forum/main/layout.tsx

@@ -9,6 +9,7 @@ import {
   Grid,
   Group,
   Header,
+  Loader,
   Stack,
   Text,
   Title,
@@ -25,6 +26,8 @@ import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
 
 export default function LayoutForum_Main({
   children,
@@ -37,8 +40,6 @@ export default function LayoutForum_Main({
   const [hotMenu, setHotMenu] = useState(1);
   const [loading, setLoading] = useState(false);
 
-  if (loading) return <ComponentGlobal_V2_LoadingPage />;
-
   const listFooter = [
     {
       id: 1,
@@ -57,7 +58,46 @@ export default function LayoutForum_Main({
 
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
+        header={
+          <ComponentGlobal_UI_HeaderTamplate
+            title="FORUM"
+            iconRight={
+              <ActionIcon
+                radius={"xl"}
+                variant="transparent"
+                onClick={() => {
+                  setLoading(true);
+                  router.push(RouterForum.forumku + dataAuthor?.id);
+                }}
+              >
+                {loading ? (
+                  <Loader size={20} />
+                ) : (
+                  <Avatar
+                    radius={"xl"}
+                    size={30}
+                    sx={{
+                      borderStyle: "solid",
+                      borderWidth: "0.5px",
+                      borderColor: "black",
+                    }}
+                    alt="foto"
+                    src={
+                      RouterProfile.api_foto_profile +
+                      dataAuthor?.Profile?.imagesId
+                    }
+                  />
+                )}
+              </ActionIcon>
+            }
+          />
+        }
+      >
+        {children}
+      </ComponentGlobal_UI_LayoutTamplate>
+
+      {/* <AppComponentGlobal_LayoutTamplate
         header={
           <Header height={50} sx={{ borderStyle: "none" }}>
             <Group h={50} position="apart" px={"md"}>
@@ -72,6 +112,7 @@ export default function LayoutForum_Main({
               </ActionIcon>
 
               <Title order={5}>Forum</Title>
+              
               <ActionIcon
                 loading={loading ? true : false}
                 variant="transparent"
@@ -132,7 +173,7 @@ export default function LayoutForum_Main({
         // }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </AppComponentGlobal_LayoutTamplate> */}
     </>
   );
 }