Perbaikan UI pada Forum

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

src/app_modules/forum/forumku/forum_profile.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import {
+  Center,
+  Avatar,
+  Stack,
+  Button,
+  Divider,
+  Grid,
+  Text,
+} from "@mantine/core";
+import { IconCircleFilled } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+import { useState } from "react";
+
+export default function ComponentForum_ViewForumProfile({
+  auhtorSelectedData,
+  totalPosting,
+}: {
+  auhtorSelectedData: MODEL_USER;
+  totalPosting: number;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  // if (loading) return <ComponentGlobal_V2_LoadingPage />;
+
+  return (
+    <>
+      <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>
+      <Grid>
+        <Grid.Col span={"auto"}>
+          <Stack spacing={0}>
+            <Text lineClamp={1} fw={"bold"} color={"white"}>
+              {auhtorSelectedData?.Profile?.name}
+            </Text>
+            <Grid gutter={"xs"}>
+              <Grid.Col span={"content"}>
+                <Text lineClamp={1} color={"white"} fz={"sm"}>
+                  {totalPosting} Posting <IconCircleFilled size={5} />
+                </Text>
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text lineClamp={1} color={"white"} fz={"sm"}>
+                  @{auhtorSelectedData?.username}
+                  {""}
+                </Text>
+              </Grid.Col>
+            </Grid>
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={5}>
+          <Stack align="center" justify="center" h={"100%"}>
+            <Button
+              style={{
+                border: `1px solid ${AccentColor.yellow}`,
+                backgroundColor: MainColor.yellow,
+              }}
+              c="white"
+              loaderPosition="center"
+              loading={loading ? true : false}
+              radius={"xl"}
+              variant="outline"
+              onClick={() => {
+                setLoading(true);
+                router.push(
+                  RouterProfile.katalog + auhtorSelectedData?.Profile?.id
+                );
+              }}
+            >
+              Kunjungi Profile
+            </Button>
+          </Stack>
+        </Grid.Col>
+      </Grid>
+    </>
+  );
+}

src/app_modules/forum/forumku/index.tsx

@@ -1,28 +1,28 @@
 "use client";
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
   ActionIcon,
   Affix,
-  Avatar,
-  Button,
   Center,
-  Divider,
-  Grid,
+  Loader,
   Stack,
   Text,
   rem,
 } from "@mantine/core";
 import { useWindowScroll } from "@mantine/hooks";
-import { IconCircleFilled, IconPencilPlus } from "@tabler/icons-react";
+import { IconPencilPlus, IconSearchOff } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentForum_MainCardView from "../component/main_card_view";
 import { MODEL_FORUM_POSTING } from "../model/interface";
+import ComponentForum_ViewForumProfile from "./forum_profile";
+import ComponentForum_PostinganPribadi from "./postingan_pribadi";
+import { ScrollOnly } from "next-scroll-loader";
+import { forum_getAllPostingByAuhtorId } from "../fun/get/get_list_posting_by_author_id";
+import ComponentForum_ForumkuMainCardView from "../component/forumku_component/forumku_view";
+import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
 
 export default function Forum_Forumku({
   auhtorSelectedData,
@@ -36,6 +36,9 @@ export default function Forum_Forumku({
   userLoginId: string;
 }) {
   const router = useRouter();
+  const [data, setData] = useState(dataPosting);
+  const [activePage, setActivePage] = useState(1);
+
   const [scroll, scrollTo] = useWindowScroll();
   const [loadingCreate, setLoadingCreate] = useState(false);
 
@@ -44,21 +47,25 @@ export default function Forum_Forumku({
       {userLoginId === auhtorSelectedData.id ? (
         <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>
       ) : (
@@ -66,171 +73,54 @@ export default function Forum_Forumku({
       )}
 
       <Stack spacing={"xl"} px={"sm"}>
-        <ForumProfile
+        <ComponentForum_ViewForumProfile
           auhtorSelectedData={auhtorSelectedData}
           totalPosting={totalPosting}
         />
-        {_.isEmpty(dataPosting) ? (
-          <Center>
-            <Text fw={"bold"} fz={"xs"} c={"gray"}>
-              Belum ada posting
-            </Text>
-          </Center>
+
+        {_.isEmpty(data) ? (
+          <Stack align="center" justify="center" h={"80vh"}>
+            <IconSearchOff size={80} color="white" />
+            <Stack spacing={0} align="center">
+              <Text c={"white"} fw={"bold"} fz={"xs"}>
+                Tidak ada data
+              </Text>
+            </Stack>
+          </Stack>
         ) : (
-          <ForumPosting dataPosting={dataPosting} userLoginId={userLoginId} />
+          // --- Main component --- //
+          <ScrollOnly
+            height="80vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await forum_getAllPostingByAuhtorId({
+                page: activePage + 1,
+                authorId: auhtorSelectedData.id,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentForum_ForumkuMainCardView
+                data={item}
+                userLoginId={userLoginId}
+                onLoadData={(val) => {
+                  setData(val);
+                }}
+                allData={data}
+              />
+            )}
+          </ScrollOnly>
         )}
       </Stack>
     </>
   );
 }
-
-function ForumProfile({
-  auhtorSelectedData,
-  totalPosting,
-}: {
-  auhtorSelectedData: MODEL_USER;
-  totalPosting: number;
-}) {
-  const router = useRouter();
-  const [loading, setLoading] = useState(false);
-
-  // if (loading) return <ComponentGlobal_V2_LoadingPage />;
-
-  return (
-    <>
-      <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>
-      <Grid>
-        <Grid.Col span={"auto"}>
-          <Stack spacing={0}>
-            <Text lineClamp={1} fw={"bold"}>
-              {auhtorSelectedData?.Profile?.name}
-            </Text>
-            <Grid gutter={"xs"}>
-              <Grid.Col span={"content"}>
-                <Text lineClamp={1} c={"gray"} fz={"sm"}>
-                  {totalPosting} Posting <IconCircleFilled size={5} />
-                </Text>
-              </Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text lineClamp={1} c={"gray"} fz={"sm"}>
-                  @{auhtorSelectedData?.username}
-                  {""}
-                </Text>
-              </Grid.Col>
-            </Grid>
-          </Stack>
-        </Grid.Col>
-        <Grid.Col span={5}>
-          <Stack align="center" justify="center" h={"100%"}>
-            <Button
-              compact
-              loaderPosition="center"
-              loading={loading ? true : false}
-              radius={"xl"}
-              variant="outline"
-              onClick={() => {
-                setLoading(true);
-                router.push(
-                  RouterProfile.katalog + auhtorSelectedData?.Profile?.id
-                );
-              }}
-            >
-              Kunjungi Profile
-            </Button>
-          </Stack>
-        </Grid.Col>
-      </Grid>
-
-      <Divider />
-    </>
-  );
-}
-
-function ForumPosting({
-  dataPosting,
-  userLoginId,
-}: {
-  dataPosting: MODEL_FORUM_POSTING[];
-  userLoginId: any;
-}) {
-  const router = useRouter();
-  const [data, setData] = useState(dataPosting);
-  const [loadingDetail, setLoadingDetail] = useState(false);
-  const [loadingKomen, setLoadingKomen] = useState(false);
-
-  if (loadingDetail) return <ComponentGlobal_V2_LoadingPage />;
-  if (loadingKomen) return <ComponentGlobal_V2_LoadingPage />;
-  return (
-    <>
-      <ComponentForum_MainCardView
-        data={data}
-        setLoadingKomen={setLoadingKomen}
-        setLoadingDetail={setLoadingDetail}
-        userLoginId={userLoginId}
-        setData={setData}
-      />
-
-      {/* <Stack>
-        {dataPosting.map((e, i) => (
-          <Card key={i}>
-            <Card.Section>
-              <ComponentForum_PostingAuthorNameOnHeader isMoreButton={true} />
-            </Card.Section>
-            <Card.Section
-              sx={{ zIndex: 0 }}
-              p={"sm"}
-              onClick={() => {
-                // console.log("halaman forum");
-                setLoadingDetail(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/forumku/layout.tsx

@@ -6,6 +6,8 @@ import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { IconX } from "@tabler/icons-react";
 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_Forumku({
   children,
@@ -16,7 +18,18 @@ export default function LayoutForum_Forumku({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
+        header={
+          <ComponentGlobal_UI_HeaderTamplate
+            title={`${username}`}
+            iconLeft={<IconX />}
+          />
+        }
+      >
+        {children}
+      </ComponentGlobal_UI_LayoutTamplate>
+
+      {/* <AppComponentGlobal_LayoutTamplate
         header={
           <ComponentForum_HeaderTamplate
             title={`${username}`}
@@ -25,7 +38,7 @@ export default function LayoutForum_Forumku({
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </AppComponentGlobal_LayoutTamplate> */}
     </>
   );
 }

src/app_modules/forum/forumku/postingan_pribadi.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentForum_MainCardView from "../component/main_card_view";
+import { MODEL_FORUM_POSTING } from "../model/interface";
+import ComponentForum_ForumkuMainCardView from "../component/forumku_component/forumku_view";
+
+export default function ComponentForum_PostinganPribadi({
+  dataPosting,
+  userLoginId,
+}: {
+  dataPosting: MODEL_FORUM_POSTING[];
+  userLoginId: any;
+}) {
+  const router = useRouter();
+  const [data, setData] = useState(dataPosting);
+  const [loadingDetail, setLoadingDetail] = useState(false);
+  const [loadingKomen, setLoadingKomen] = useState(false);
+
+//   if (loadingDetail) return <ComponentGlobal_V2_LoadingPage />;
+//   if (loadingKomen) return <ComponentGlobal_V2_LoadingPage />;
+
+  return (
+    <>
+    
+
+      {/* <ComponentForum_MainCardView
+        data={data}
+        setLoadingKomen={setLoadingKomen}
+        setLoadingDetail={setLoadingDetail}
+        userLoginId={userLoginId}
+        setData={setData}
+      /> */}
+
+      {/* <Stack>
+        {dataPosting.map((e, i) => (
+          <Card key={i}>
+            <Card.Section>
+              <ComponentForum_PostingAuthorNameOnHeader isMoreButton={true} />
+            </Card.Section>
+            <Card.Section
+              sx={{ zIndex: 0 }}
+              p={"sm"}
+              onClick={() => {
+                // console.log("halaman forum");
+                setLoadingDetail(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> */}
+    </>
+  );
+}