fix ui tamplate

src/app_modules/home/component/new_footer_home.tsx

@@ -21,90 +21,77 @@ export default function NewFooterHome({ dataUser }: { dataUser: any | null }) {
   const router = useRouter();
 
   return (
-    <Box
-      style={{
-        zIndex: 99,
-        borderRadius: "20px 20px 0px 0px",
-      }}
-      w={"100%"}
-      bottom={0}
-      h={"9vh"}
-    >
-      <SimpleGrid cols={listMenuHomeFooter.length + 1}>
-        {listMenuHomeFooter.map((e) => (
-          <Center h={"9vh"} key={e.id}>
-            <Stack
-              align="center"
-              spacing={0}
-              onClick={() => {
-                if (!dataUser) {
-                  return null;
-                } else if (dataUser?.profile === undefined) {
-                  router.push(RouterProfile.create, { scroll: false });
-                } else if (e.link == "") {
-                  ComponentGlobal_NotifikasiPeringatan("Cooming Soon");
-                } else {
-                  router.push(e.link, { scroll: false });
-                }
-              }}
+    <SimpleGrid cols={listMenuHomeFooter.length + 1} w={"100%"}>
+      {listMenuHomeFooter.map((e) => (
+        <Center key={e.id}>
+          <Stack
+            align="center"
+            spacing={0}
+            onClick={() => {
+              if (!dataUser) {
+                return null;
+              } else if (dataUser?.profile === undefined) {
+                router.push(RouterProfile.create, { scroll: false });
+              } else if (e.link == "") {
+                ComponentGlobal_NotifikasiPeringatan("Cooming Soon");
+              } else {
+                router.push(e.link, { scroll: false });
+              }
+            }}
+          >
+            <ActionIcon
+              radius={"xl"}
+              c={e.link === "" ? "gray" : MainColor.white}
+              variant="transparent"
             >
-              <ActionIcon
-                radius={"xl"}
-                c={e.link === "" ? "gray" : MainColor.white}
-                variant="transparent"
-              >
-                {e.icon}
-              </ActionIcon>
-              <Text
-                lineClamp={1}
-                c={e.link === "" ? "gray" : MainColor.white}
-                fz={12}
-              >
-                {e.name}
-              </Text>
-            </Stack>
-          </Center>
-        ))}
-
-        <Center h={"9vh"}>
-          <Stack align="center" spacing={2}>
-            {!dataUser ? (
-              <CustomSkeleton height={25} width={25} radius={"xl"} />
-            ) : dataUser?.profile === undefined ? (
-              <ActionIcon
-                variant={"transparent"}
-                onClick={() =>
-                  router.push(RouterProfile.create, { scroll: false })
-                }
-              >
-                <IconUserCircle color="white" />
-              </ActionIcon>
-            ) : (
-              <ActionIcon
-                variant={"transparent"}
-                onClick={() => {
-                  router.push(
-                    RouterProfile.katalogOLD + `${dataUser?.profile}`,
-                    {
-                      scroll: false,
-                    }
-                  );
-                }}
-              >
-                <Home_ComponentAvatarProfile
-                  url={APIs.GET({
-                    fileId: dataUser?.imageId as string,
-                    size: "50",
-                  })}
-                />
-              </ActionIcon>
-            )}
-            <Text fz={10} c={MainColor.white}>
-              Profile
+              {e.icon}
+            </ActionIcon>
+            <Text
+              lineClamp={1}
+              c={e.link === "" ? "gray" : MainColor.white}
+              fz={12}
+            >
+              {e.name}
             </Text>
           </Stack>
         </Center>
-      </SimpleGrid>
-    </Box>
+      ))}
+
+      <Center>
+        <Stack align="center" spacing={2}>
+          {!dataUser ? (
+            <CustomSkeleton height={25} width={25} radius={"xl"} />
+          ) : dataUser?.profile === undefined ? (
+            <ActionIcon
+              variant={"transparent"}
+              onClick={() =>
+                router.push(RouterProfile.create, { scroll: false })
+              }
+            >
+              <IconUserCircle color="white" />
+            </ActionIcon>
+          ) : (
+            <ActionIcon
+              variant={"transparent"}
+              onClick={() => {
+                router.push(RouterProfile.katalogOLD + `${dataUser?.profile}`, {
+                  scroll: false,
+                });
+              }}
+            >
+              <Home_ComponentAvatarProfile
+                url={APIs.GET({
+                  fileId: dataUser?.imageId as string,
+                  size: "50",
+                })}
+              />
+            </ActionIcon>
+          )}
+          <Text fz={10} c={MainColor.white}>
+            Profile
+          </Text>
+        </Stack>
+      </Center>
+    </SimpleGrid>
   );
 }

src/app_modules/home/v2_home_view.tsx

@@ -7,7 +7,6 @@ import { useShallowEffect } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import { useState } from "react";
 import { NewUI_Header } from "../_global/ui/new_ui_header";
-import { NewUI_Tamplate } from "../_global/ui/new_ui_tamplate";
 import { gs_notifikasi_kategori_app } from "../notifikasi/lib";
 import { apiGetNotifikasiHome, apiGetDataHome } from "./fun/get/api_home";
 import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
@@ -21,6 +20,7 @@ import BodyHome from "./component/body_home";
 import { NewUI_Footer } from "../_global/ui/new_ui_footer";
 import NewFooterHome from "./component/new_footer_home";
 import { NewUI_Content } from "../_global/ui/new_ui_content";
+import { NewUI_Tamplate } from "../_global/ui/new_ui_tamplate";
 
 export function V2_View_Home() {
   const [countNtf, setCountNtf] = useState<number | null>(null);

src/app_modules/home/v3_home_view.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { gs_user_ntf } from "@/lib/global_state";
+import global_limit from "@/lib/limit";
+import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
+import { RouterNotifikasi } from "@/lib/router_hipmi/router_notifikasi";
+import { RouterUserSearch } from "@/lib/router_hipmi/router_user_search";
+import { clientLogger } from "@/util/clientLogger";
+import { ActionIcon, Indicator, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconBell, IconUserSearch } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MainColor } from "../_global/color";
+import { Component_Header } from "../_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewFooter,
+  UI_NewHeader,
+} from "../_global/ui/V2_layout_tamplate";
+import { gs_notifikasi_kategori_app } from "../notifikasi/lib";
+import BodyHome from "./component/body_home";
+import NewFooterHome from "./component/new_footer_home";
+import { apiGetDataHome, apiGetNotifikasiHome } from "./fun/get/api_home";
+
+export function V3_View_Home() {
+  const [countNtf, setCountNtf] = useState<number | null>(null);
+  const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf);
+  const [dataUser, setDataUser] = useState<any | null>(null);
+  const [categoryPage, setCategoryPage] = useAtom(gs_notifikasi_kategori_app);
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    if (countNtf != null) {
+      setCountNtf(countNtf + newUserNtf);
+      setNewUserNtf(0);
+    }
+  }, [newUserNtf]);
+
+  useShallowEffect(() => {
+    hanlderLoadData();
+  }, []);
+
+  async function hanlderLoadData() {
+    try {
+      const listLoadData = [
+        global_limit(() => onLoadNotifikasi()),
+        global_limit(() => cekUserLogin()),
+      ];
+
+      await Promise.all(listLoadData);
+    } catch (error) {
+      clientLogger.error("Error handler load data", error);
+    }
+  }
+
+  async function onLoadNotifikasi() {
+    try {
+      const response = await apiGetNotifikasiHome();
+      if (response && response.success) {
+        setCountNtf(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error load notifikasi", error);
+    }
+  }
+
+  async function cekUserLogin() {
+    try {
+      const response = await apiGetDataHome({
+        path: "?cat=cek_profile",
+      });
+      if (response && response.success) {
+        setDataUser(response.data);
+      } else {
+        setDataUser(null);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data home", error);
+      setDataUser(null);
+    }
+  }
+
+  return (
+    <>
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header
+            title="HIPMI"
+            customButtonLeft={
+              !dataUser && !countNtf ? (
+                <ActionIcon radius={"xl"} variant={"transparent"}>
+                  <IconUserSearch color={"gray"} />
+                </ActionIcon>
+              ) : dataUser?.profile === undefined ? (
+                <ActionIcon
+                  radius={"xl"}
+                  variant={"transparent"}
+                  onClick={() => {
+                    router.push(RouterProfile.create, { scroll: false });
+                  }}
+                >
+                  <IconUserSearch color={MainColor.white} />
+                </ActionIcon>
+              ) : (
+                <ActionIcon
+                  radius={"xl"}
+                  variant={"transparent"}
+                  onClick={() => {
+                    router.push(RouterUserSearch.main, { scroll: false });
+                  }}
+                >
+                  <IconUserSearch color={MainColor.white} />
+                </ActionIcon>
+              )
+            }
+            customButtonRight={
+              !dataUser && !countNtf ? (
+                <ActionIcon radius={"xl"} variant={"transparent"}>
+                  <IconBell color={"gray"} />
+                </ActionIcon>
+              ) : dataUser?.profile === undefined ? (
+                <ActionIcon
+                  radius={"xl"}
+                  variant={"transparent"}
+                  onClick={() => {
+                    router.push(RouterProfile.create, { scroll: false });
+                  }}
+                >
+                  <IconBell color={MainColor.white} />
+                </ActionIcon>
+              ) : (
+                <ActionIcon
+                  variant="transparent"
+                  disabled={countNtf == null}
+                  onClick={() => {
+                    setCategoryPage("Semua");
+                    router.push(
+                      RouterNotifikasi.categoryApp({ name: "semua" }),
+                      {
+                        scroll: false,
+                      }
+                    );
+                  }}
+                >
+                  {countNtf != null && countNtf > 0 ? (
+                    <Indicator
+                      processing
+                      color={MainColor.yellow}
+                      label={
+                        <Text fz={10} c={MainColor.darkblue}>
+                          {countNtf > 99 ? "99+" : countNtf}
+                        </Text>
+                      }
+                    >
+                      <IconBell color={MainColor.white} />
+                    </Indicator>
+                  ) : (
+                    <IconBell color={MainColor.white} />
+                  )}
+                </ActionIcon>
+              )
+            }
+          />
+        </UI_NewHeader>
+        <UI_NewChildren>
+          <BodyHome dataUser={dataUser} />
+        </UI_NewChildren>
+
+        <UI_NewFooter>
+          <NewFooterHome dataUser={dataUser} />
+        </UI_NewFooter>
+      </UI_NewLayoutTamplate>
+    </>
+  );
+}