#style: Tampilan home

Deskripsi:
- Tampilan tamplate layout positionnya di ganti fixed ( tidak bisa di tarik ke bawah jika sudah menjadi aplikasi )
- UI Home selesai
- UI User search selesai
- UI Notifikasi selesai
## No issuee

src/app_modules/home/component/button_header.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import { ActionIcon, Indicator, Loader, Text } from "@mantine/core";
+import { MODEL_USER } from "../model/interface";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import { IconBell, IconUserSearch } from "@tabler/icons-react";
+import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
+import { useShallowEffect } from "@mantine/hooks";
+import notifikasi_countUserNotifikasi from "@/app_modules/notifikasi/fun/count/fun_count_by_id";
+
+export function ComponentHome_ButtonHeaderLeft({
+  dataUser,
+}: {
+  dataUser: MODEL_USER;
+}) {
+  const router = useRouter();
+  const [isLoadingUS, setIsLoadingUS] = useState(false);
+
+  return (
+    <>
+      <ActionIcon
+        radius={"xl"}
+        variant={"transparent"}
+        onClick={() => {
+          if (dataUser?.Profile === null) {
+            ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
+          } else {
+            setIsLoadingUS(true);
+            router.push(RouterUserSearch.main, { scroll: false });
+          }
+        }}
+      >
+        {isLoadingUS ? (
+          <Loader color={AccentColor.yellow} size={20} />
+        ) : (
+          <IconUserSearch color="white" />
+        )}
+      </ActionIcon>
+    </>
+  );
+}
+
+export function ComponentHome_ButtonHeaderRight({
+  dataUser,
+  countNotifikasi,
+}: {
+  dataUser: MODEL_USER;
+  countNotifikasi: number;
+}) {
+  const router = useRouter();
+  const [count, setCount] = useState(countNotifikasi);
+  const [isLoadingBell, setIsLoadingBell] = useState(false);
+
+  useShallowEffect(() => {
+    onLoadNotifkasi({
+      onLoad(val) {
+        setCount(val);
+      },
+    });
+  }, []);
+
+  async function onLoadNotifkasi({ onLoad }: { onLoad: (val: any) => void }) {
+    const loadNotifikasi = await notifikasi_countUserNotifikasi();
+    onLoad(loadNotifikasi);
+  }
+
+  return (
+    <>
+      <ActionIcon
+        variant="transparent"
+        onClick={() => {
+          if (dataUser?.Profile === null) {
+            ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
+          } else {
+            router.push(RouterNotifikasi.main, { scroll: false });
+            setIsLoadingBell(true);
+          }
+        }}
+      >
+        {isLoadingBell ? (
+          <Loader color={AccentColor.yellow} size={20} />
+        ) : (
+          <Indicator
+            processing
+            color={MainColor.yellow}
+            label={
+              <Text fz={10} c={MainColor.darkblue}>
+                {count > 99 ? "99+" : count}
+              </Text>
+            }
+          >
+            <IconBell color="white" />
+          </Indicator>
+        )}
+      </ActionIcon>
+    </>
+  );
+}

src/app_modules/home/component/ui_home.tsx

@@ -1,43 +1,49 @@
 "use client";
 
-import {
-  ActionIcon,
-  Box,
-  Center,
-  Group,
-  Image,
-  Loader,
-  LoadingOverlay,
-  Overlay,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-} from "@mantine/core";
-
-import {
-  IconAffiliate,
-  IconBriefcase,
-  IconHeartHandshake,
-  IconPackageImport,
-  IconPresentation,
-  IconUserSearch,
-} from "@tabler/icons-react";
-
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import {
+  Box,
+  Paper,
+  Stack,
+  SimpleGrid,
+  ActionIcon,
+  Loader,
+  Group,
+  Image,
+  Text,
+  Avatar,
+  Center,
+} from "@mantine/core";
+import {
+  IconPresentation,
+  IconAffiliate,
+  IconPackageImport,
+  IconHeartHandshake,
+  IconBriefcase,
+  IconUserSearch,
+  IconMap2,
+  IconMessages,
+  IconShoppingBag,
+  IconUserCircle,
+} from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { AccentColor, MainColor } from "../component_global/color/color_pallet";
-import ComponentGlobal_IsEmptyData from "../component_global/is_empty_data";
-import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
-import { MODEL_JOB } from "../job/model/interface";
-import { MODEL_USER } from "./model/interface";
+import { MODEL_USER } from "../model/interface";
+import { MODEL_JOB } from "@/app_modules/job/model/interface";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 
-export default function HomeView({
+export function Home_UiView({
   dataUser,
   dataJob,
 }: {
@@ -86,7 +92,7 @@ export default function HomeView({
 
   return (
     <>
-      <Box p={"md"}>
+      <Box>
         <Paper
           radius={"xl"}
           mb={"xs"}
@@ -130,7 +136,7 @@ export default function HomeView({
                     } else {
                       setIsLoading(true);
                       setPageId(e.id);
-                      router.push(e.link);
+                      router.push(e.link, { scroll: false });
                     }
                   }
                 }}
@@ -179,13 +185,14 @@ export default function HomeView({
                     );
                   } else {
                     setLoadingJob(true);
-                    return router.push(routePageJob.link);
+                    return router.push(routePageJob.link, { scroll: false });
                   }
                 }
               }}
             >
               <Group>
                 <ActionIcon
+                  variant="transparent"
                   size={40}
                   c={routePageJob.link === "" ? "gray.3" : "white"}
                 >
@@ -230,3 +237,123 @@ export default function HomeView({
     </>
   );
 }
+
+const listHalamanFooter = [
+  {
+    id: 1,
+    name: "Forums",
+    icon: <IconMessages />,
+    link: RouterForum.splash,
+  },
+
+  {
+    id: 2,
+    name: "MarketPlace",
+    icon: <IconShoppingBag />,
+    link: "",
+  },
+  {
+    id: 3,
+    name: "Business Maps",
+    icon: <IconMap2 />,
+    link: "",
+  },
+];
+
+export function Home_UiFooter({ dataUser }: { dataUser: MODEL_USER }) {
+  const router = useRouter();
+  const [isLoadingProfil, setIsLoadingProfile] = useState(false);
+  const [isLoadingPage, setIsLoadingPage] = useState(false);
+  const [pageId, setPageId] = useState(0);
+  return (
+    <>
+      <Box
+        style={{
+          zIndex: 99,
+          borderRadius: "20px 20px 0px 0px",
+        }}
+        w={"100%"}
+        bottom={0}
+        h={"10vh"}
+      >
+        <SimpleGrid cols={4}>
+          {listHalamanFooter.map((e, i) => (
+            <Center h={"10vh"} key={e.id}>
+              <Stack align="center" spacing={0}>
+                <ActionIcon
+                  radius={"xl"}
+                  // loading={isLoadingPage && e.id === pageId ? true : false}
+                  c={e.link === "" ? "gray" : "white"}
+                  variant="transparent"
+                  onClick={() => {
+                    if (dataUser?.Profile === null) {
+                      ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
+                    } else {
+                      e.link === ""
+                        ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
+                        : (router.push(e.link, { scroll: false }),
+                          setIsLoadingPage(true),
+                          setPageId(e?.id));
+                    }
+                  }}
+                >
+                  {isLoadingPage && e.id === pageId ? (
+                    <Loader color={AccentColor.yellow} size={20} />
+                  ) : (
+                    e.icon
+                  )}
+                </ActionIcon>
+                <Text c={e.link === "" ? "gray" : "white"} fz={"xs"}>
+                  {e.name}
+                </Text>
+              </Stack>
+            </Center>
+          ))}
+
+          <Center h={"10vh"}>
+            <Stack
+              align="center"
+              spacing={2}
+              onClick={() => {
+                setIsLoadingProfile(true);
+                if (dataUser?.Profile === null) {
+                  router.push(RouterProfile.create, { scroll: false });
+                } else {
+                  router.push(
+                    RouterProfile.katalog + `${dataUser?.Profile?.id}`,
+                    { scroll: false }
+                  );
+                }
+              }}
+            >
+              <ActionIcon variant={"transparent"}>
+                {dataUser?.Profile === null ? (
+                  <IconUserCircle color="white" />
+                ) : isLoadingProfil ? (
+                  <Loader color={AccentColor.yellow} size={20} />
+                ) : (
+                  <Avatar
+                    radius={"xl"}
+                    size={25}
+                    sx={{
+                      borderStyle: "solid",
+                      borderWidth: "0.5px",
+                      borderColor: "white",
+                    }}
+                    src={
+                      RouterProfile.api_foto_profile +
+                      `${dataUser?.Profile.imagesId}`
+                    }
+                  />
+                )}
+              </ActionIcon>
+              <Text fz={"xs"} c={"white"}>
+                Profile
+              </Text>
+            </Stack>
+          </Center>
+        </SimpleGrid>
+      </Box>
+    </>
+  );
+}

src/app_modules/home/index.ts

@@ -1,5 +1,4 @@
-import HomeView from "./view";
-import HomeLayout from "./layout";
+import HomeView from "./view_home";
 import Home_UserNotActive from "./user_non_active";
 
-export { HomeView, HomeLayout, Home_UserNotActive as Home_UserNonActive };
+export { HomeView, Home_UserNotActive as Home_UserNonActive };

src/app_modules/home/layout.tsx

@@ -1,310 +0,0 @@
-"use client";
-import {
-  ActionIcon,
-  AppShell,
-  Avatar,
-  BackgroundImage,
-  Box,
-  Center,
-  Flex,
-  Footer,
-  Grid,
-  Group,
-  Header,
-  Indicator,
-  Loader,
-  Paper,
-  ScrollArea,
-  SimpleGrid,
-  Stack,
-  Text,
-  ThemeIcon,
-  Title,
-} from "@mantine/core";
-import { HomeView } from ".";
-import {
-  IconUserSearch,
-  IconAward,
-  IconQrcode,
-  IconUserCircle,
-  IconBell,
-  IconMessages,
-  IconShoppingBag,
-  IconMap2,
-} from "@tabler/icons-react";
-import { Logout } from "../auth";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { MODEL_USER } from "./model/interface";
-import React, { useState } from "react";
-import { useRouter } from "next/navigation";
-import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
-import { ComponentGlobal_NotifikasiBerhasil } from "../component_global/notif_global/notifikasi_berhasil";
-import { RouterUserSearch } from "@/app/lib/router_hipmi/router_user_search";
-import { RouterNotifikasi } from "@/app/lib/router_hipmi/router_notifikasi";
-import { useShallowEffect } from "@mantine/hooks";
-import notifikasi_countUserNotifikasi from "../notifikasi/fun/count/fun_count_by_id";
-import mqtt_client from "@/util/mqtt_client";
-import { AccentColor, MainColor } from "../component_global/color/color_pallet";
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-
-export default function HomeLayout({
-  dataUser,
-  children,
-  countNotifikasi,
-}: {
-  dataUser: MODEL_USER;
-  children: React.ReactNode;
-  countNotifikasi: number;
-}) {
-  const router = useRouter();
-  // const [user, setUser] = useState(dataUser);
-  const [isLoadingProfil, setIsLoadingProfile] = useState(false);
-  const [isLoadingUS, setIsLoadingUS] = useState(false);
-  const [isLoadingBell, setIsLoadingBell] = useState(false);
-  const [isLoadingPage, setIsLoadingPage] = useState(false);
-  const [pageId, setPageId] = useState(0);
-
-  const [countNotif, setCountNotif] = useState(countNotifikasi);
-
-  const listHalamanFooter = [
-    {
-      id: 1,
-      name: "Forums",
-      icon: <IconMessages />,
-      link: RouterForum.splash,
-    },
-
-    {
-      id: 2,
-      name: "MarketPlace",
-      icon: <IconShoppingBag />,
-      link: "",
-    },
-    {
-      id: 3,
-      name: "Business Maps",
-      icon: <IconMap2 />,
-      link: "",
-    },
-  ];
-
-  useShallowEffect(() => {
-    mqtt_client.subscribe("USER");
-
-    mqtt_client.on("message", (topic: any, message: any) => {
-      // console.log(topic);
-      const data = JSON.parse(message.toString());
-
-      if (data.userId === dataUser.id) {
-        setCountNotif(countNotif + data.count);
-      }
-    });
-
-    onLoadNotifikasi({
-      onLoad(val) {
-        setCountNotif(val);
-      },
-    });
-  }, [countNotif]);
-
-  async function onLoadNotifikasi({ onLoad }: { onLoad: (val: any) => void }) {
-    const loadNotif = await notifikasi_countUserNotifikasi();
-    onLoad(loadNotif);
-  }
-
-  return (
-    <>
-      <BackgroundImage
-        src={"/aset/global/main_background.png"}
-        h={"100vh"}
-        pos={"static"}
-      >
-        {/* Header */}
-        <Box
-          style={{
-            zIndex: 98,
-          }}
-          w={"100%"}
-          bg={MainColor.darkblue}
-          pos={"sticky"}
-          top={0}
-          h={"8vh"}
-        >
-          <Group position="apart" h={"100%"} px={"md"}>
-            <ActionIcon
-              radius={"xl"}
-              variant={"transparent"}
-              onClick={() => {
-                if (dataUser?.Profile === null) {
-                  ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
-                } else {
-                  setIsLoadingUS(true);
-                  router.push(RouterUserSearch.main);
-                }
-              }}
-            >
-              {isLoadingUS ? (
-                <Loader color={AccentColor.yellow} size={20} />
-              ) : (
-                <IconUserSearch color="white" />
-              )}
-            </ActionIcon>
-
-            <Center>
-              <Title order={4} c={MainColor.yellow}>
-                HIPMI
-              </Title>
-            </Center>
-            <ActionIcon
-              variant="transparent"
-              onClick={() => {
-                if (dataUser?.Profile === null) {
-                  ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
-                } else {
-                  router.push(RouterNotifikasi.main);
-                  setIsLoadingBell(true);
-                }
-              }}
-            >
-              {isLoadingBell ? (
-                <Loader color={AccentColor.yellow} size={20} />
-              ) : (
-                <Indicator
-                  processing
-                  color={MainColor.yellow}
-                  label={
-                    <Text fz={10} c={MainColor.darkblue}>
-                      {countNotif}
-                    </Text>
-                  }
-                >
-                  <IconBell color="white" />
-                </Indicator>
-              )}
-            </ActionIcon>
-          </Group>
-        </Box>
-
-        {/* Children */}
-        <Box h={"82vh"} pos={"static"}>
-          <ScrollArea h={"100%"}>
-            {/* {Array(10)
-              .fill(0)
-              .map((e, i) => (
-                <Paper key={i} withBorder p={"lg"} h={100}>
-                  {i + 1}
-                </Paper>
-              ))} */}
-            {children}
-          </ScrollArea>
-          <Box
-            style={{
-              height: "10vh",
-            }}
-          />
-        </Box>
-
-
-        {/* Footer */}
-        <Box
-          style={{
-            zIndex: 99,
-            borderRadius: "20px 20px 0px 0px",
-          }}
-          // bg={MainColor.darkblue}
-          w={"100%"}
-          // color="blue"
-          pos={"fixed"}
-          bottom={0}
-          h={"10vh"}
-        >
-          <SimpleGrid
-            bg={AccentColor.darkblue}
-            cols={4}
-            style={{
-              borderRadius: "20px 20px 0px 0px",
-              borderTop: `2px solid ${AccentColor.blue}`,
-            }}
-          >
-            {listHalamanFooter.map((e, i) => (
-              <Center h={"10vh"} key={e.id}>
-                <Stack align="center" spacing={0}>
-                  <ActionIcon
-                    radius={"xl"}
-                    // loading={isLoadingPage && e.id === pageId ? true : false}
-                    c={e.link === "" ? "gray" : "white"}
-                    variant="transparent"
-                    onClick={() => {
-                      if (dataUser?.Profile === null) {
-                        ComponentGlobal_NotifikasiPeringatan(
-                          "Lengkapi Profile"
-                        );
-                      } else {
-                        e.link === ""
-                          ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
-                          : (router.push(e.link),
-                            setIsLoadingPage(true),
-                            setPageId(e?.id));
-                      }
-                    }}
-                  >
-                    {isLoadingPage && e.id === pageId ? (
-                      <Loader color={AccentColor.yellow} size={20} />
-                    ) : (
-                      e.icon
-                    )}
-                  </ActionIcon>
-                  <Text c={e.link === "" ? "gray" : "white"} fz={"xs"}>
-                    {e.name}
-                  </Text>
-                </Stack>
-              </Center>
-            ))}
-
-            <Center h={"10vh"}>
-              <Stack
-                align="center"
-                spacing={2}
-                onClick={() => {
-                  setIsLoadingProfile(true);
-                  if (dataUser?.Profile === null) {
-                    router.push(RouterProfile.create);
-                  } else {
-                    router.push(
-                      RouterProfile.katalog + `${dataUser.Profile.id}`
-                    );
-                  }
-                }}
-              >
-                <ActionIcon variant={"transparent"}>
-                  {dataUser?.Profile === null ? (
-                    <IconUserCircle color="white" />
-                  ) : isLoadingProfil ? (
-                    <Loader color={AccentColor.yellow} size={20} />
-                  ) : (
-                    <Avatar
-                      radius={"xl"}
-                      size={25}
-                      sx={{
-                        borderStyle: "solid",
-                        borderWidth: "0.5px",
-                        borderColor: "white",
-                      }}
-                      src={
-                        RouterProfile.api_foto_profile +
-                        `${dataUser?.Profile.imagesId}`
-                      }
-                    />
-                  )}
-                </ActionIcon>
-                <Text fz={"xs"} c={"white"}>
-                  Profile
-                </Text>
-              </Stack>
-            </Center>
-          </SimpleGrid>
-        </Box>
-      </BackgroundImage>
-    </>
-  );
-}

src/app_modules/home/view_home.tsx

@@ -0,0 +1,43 @@
+import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
+import { MODEL_JOB } from "../job/model/interface";
+import {
+  ComponentHome_ButtonHeaderLeft,
+  ComponentHome_ButtonHeaderRight,
+} from "./component/button_header";
+import { Home_UiFooter, Home_UiView } from "./component/ui_home";
+import { MODEL_USER } from "./model/interface";
+
+export default function HomeView({
+  dataUser,
+  dataJob,
+  countNotifikasi,
+}: {
+  dataUser: MODEL_USER;
+  dataJob: MODEL_JOB[];
+  countNotifikasi: number;
+}) {
+  return (
+    <>
+      <LayoutGlobal_UI_Tamplate
+        header={
+          <LayoutGlobal_UI_HeaderTamplate
+            title="HIPMI"
+            customButtonLeft={
+              <ComponentHome_ButtonHeaderLeft dataUser={dataUser} />
+            }
+            customButtonRight={
+              <ComponentHome_ButtonHeaderRight
+                dataUser={dataUser}
+                countNotifikasi={countNotifikasi}
+              />
+            }
+          />
+        }
+        footer={<Home_UiFooter dataUser={dataUser} />}
+      >
+        <Home_UiView dataJob={dataJob} dataUser={dataUser} />
+      </LayoutGlobal_UI_Tamplate>
+    </>
+  );
+}