fix ui tamplate

src/app_modules/job/component/new_footer.tsx

@@ -0,0 +1,68 @@
+import { MainColor } from "@/app_modules/_global/color";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { RouterJob } from "@/lib/router_hipmi/router_job";
+import { SimpleGrid, Stack, ActionIcon, Text } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconHome, IconReservedLine, IconHistory } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useState } from "react";
+import { gs_job_hot_menu } from "../global_state";
+import { useRouter } from "next/navigation";
+
+export function NewFooter() {
+     const router = useRouter();
+      const [hotMenuId, setHotMenuId] = useAtom(gs_job_hot_menu);
+      const [isLoading, setLoading] = useState(false);
+      const [opened, handlers] = useDisclosure(false);
+    
+      const listFooter = [
+        {
+          id: 1,
+          name: "Beranda",
+          path: RouterJob.beranda,
+          icon: <IconHome />,
+        },
+    
+        {
+          id: 2,
+          name: "Status",
+          path: RouterJob.status({ id: "1" }),
+          icon: <IconReservedLine />,
+        },
+        {
+          id: 3,
+          name: "Arsip",
+          path: RouterJob.arsip,
+          icon: <IconHistory />,
+        },
+      ];
+    return (
+      <>
+        <SimpleGrid cols={3} h={"9vh"} mx={"xs"} w={"100%"}>
+          {listFooter.map((e, i) => (
+            <Stack key={i} align="center" justify="center" spacing={0}>
+              <ActionIcon
+                // disabled={e.path === "" ? true : false}
+                variant="transparent"
+                c={hotMenuId === e.id ? MainColor.yellow : "white"}
+                onClick={() =>
+                  e.path === ""
+                    ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
+                    : (router.replace(e.path), setHotMenuId(e.id))
+                }
+              >
+                {e.icon}
+              </ActionIcon>
+              <Text
+                c={hotMenuId === e.id ? MainColor.yellow : "white"}
+                fz={"xs"}
+                lineClamp={1}
+              >
+                {e.name}
+              </Text>
+            </Stack>
+          ))}
+        </SimpleGrid>
+      </>
+    );
+}

src/app_modules/job/main/beranda/view_beranda.tsx

@@ -4,9 +4,9 @@ import { gs_jobTiggerBeranda } from "@/lib/global_state";
 import { RouterJob } from "@/lib/router_hipmi/router_job";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { Box, Center, Loader, Stack, TextInput } from "@mantine/core";
+import { ActionIcon, Box, Center, Loader, Stack, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { IconSearch } from "@tabler/icons-react";
+import { IconPlus, IconSearch } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
@@ -19,6 +19,7 @@ import ComponentJob_BerandaCardView from "../../component/beranda/card_view";
 import { MODEL_JOB } from "../../model/interface";
 import { apiGetJob } from "../../component/api_fetch_job";
 import { clientLogger } from "@/util/clientLogger";
+import Component_NewCreateButton from "@/app_modules/_global/component/new/new_button_create";
 
 export default function Job_ViewBeranda() {
   const [data, setData] = useState<MODEL_JOB[]>([]);
@@ -115,6 +116,8 @@ export default function Job_ViewBeranda() {
           />
         )}
 
+        {/* <Component_NewCreateButton path={RouterJob.create} /> */}
+
         <ComponentGlobal_CreateButton path={RouterJob.create} />
 
         <TextInput
@@ -131,7 +134,11 @@ export default function Job_ViewBeranda() {
           }}
         />
 
-        <Box mb={"xl"}>
+        {/* <ActionIcon>
+          <IconPlus />
+        </ActionIcon> */}
+
+        <Box >
           {!data?.length && isLoading ? (
             <Job_ComponentSkeletonBeranda />
           ) : _.isEmpty(data) ? (
@@ -139,7 +146,7 @@ export default function Job_ViewBeranda() {
           ) : (
             // --- Main component --- //
             <ScrollOnly
-              height="75vh"
+              height="80vh"
               renderLoading={() => (
                 <Center mt={"lg"}>
                   <Loader color={"yellow"} />

src/app_modules/job/main/new_layout.tsx

@@ -1,87 +1,31 @@
 "use client";
 
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { NewUI_Content } from "@/app_modules/_global/ui/new_ui_content";
-import { NewUI_Footer } from "@/app_modules/_global/ui/new_ui_footer";
-import { NewUI_Header } from "@/app_modules/_global/ui/new_ui_header";
-import { NewUI_Tamplate } from "@/app_modules/_global/ui/new_ui_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewFooter,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import { RouterHome } from "@/lib/router_hipmi/router_home";
-import { RouterJob } from "@/lib/router_hipmi/router_job";
-import { ActionIcon, SimpleGrid, Stack, Text } from "@mantine/core";
-import { IconHistory, IconHome, IconReservedLine } from "@tabler/icons-react";
-import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
-import React, { useState } from "react";
-import { gs_job_hot_menu } from "../global_state";
+import React from "react";
+import { NewFooter } from "../component/new_footer";
 
 export default function NewLayoutJob_Main({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const router = useRouter();
-  const [hotMenuId, setHotMenuId] = useAtom(gs_job_hot_menu);
-  const [isLoading, setLoading] = useState(false);
-
-  const listFooter = [
-    {
-      id: 1,
-      name: "Beranda",
-      path: RouterJob.beranda,
-      icon: <IconHome />,
-    },
-
-    {
-      id: 2,
-      name: "Status",
-      path: RouterJob.status({ id: "1" }),
-      icon: <IconReservedLine />,
-    },
-    {
-      id: 3,
-      name: "Arsip",
-      path: RouterJob.arsip,
-      icon: <IconHistory />,
-    },
-  ];
-
   return (
     <>
-      <NewUI_Tamplate>
-        <NewUI_Header title="Job ni" routerLeft={RouterHome.main_home} />
-
-        <NewUI_Content isScroll="unset">{children}</NewUI_Content>
-
-        <NewUI_Footer>
-          <SimpleGrid cols={3} h={"9vh"} mx={"xs"} w={"100%"}>
-            {listFooter.map((e, i) => (
-              <Stack key={i} align="center" justify="center" spacing={0}>
-                <ActionIcon
-                  // disabled={e.path === "" ? true : false}
-                  variant="transparent"
-                  c={hotMenuId === e.id ? MainColor.yellow : "white"}
-                  onClick={() =>
-                    e.path === ""
-                      ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
-                      : (router.replace(e.path), setHotMenuId(e.id))
-                  }
-                >
-                  {e.icon}
-                </ActionIcon>
-                <Text
-                  c={hotMenuId === e.id ? MainColor.yellow : "white"}
-                  fz={"xs"}
-                  lineClamp={1}
-                >
-                  {e.name}
-                </Text>
-              </Stack>
-            ))}
-          </SimpleGrid>
-        </NewUI_Footer>
-      </NewUI_Tamplate>
-
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Job" routerLeft={RouterHome.main_home} />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+        <UI_NewFooter>
+          <NewFooter />
+        </UI_NewFooter>
+      </UI_NewLayoutTamplate>
     </>
   );
 }