UI Job

# style
- UI Job di bagian user selesai

# fix
- Scroll data untuk beranda dan tampilan yang lain selesi

## No issue

src/app/dev/job/create/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/arsip/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/arsip/[id]/page.tsx

@@ -1,9 +1,9 @@
 import {  Job_DetailArsip } from "@/app_modules/job";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 export default async function Page({params}:{params: {id: string}}) {
   let jobId = params.id
-  const dataJob = await Job_getOneById(jobId)
+  const dataJob = await job_getOneById(jobId)
   return (
     <>
       <Job_DetailArsip dataJob={dataJob as any} />

src/app/dev/job/detail/draft/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/draft/[id]/page.tsx

@@ -1,10 +1,10 @@
 import Job_DetailDraft from "@/app_modules/job/detail/draft/view";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 
 export default async function Page({params}: {params: {id: string}}) {
   let jobId = params.id
-  const dataJob = await Job_getOneById(jobId)
+  const dataJob = await job_getOneById(jobId)
 
   return (
     <>

src/app/dev/job/detail/main/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/main/[id]/page.tsx

@@ -1,11 +1,11 @@
 "use server";
 import { Job_MainDetail } from "@/app_modules/job";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 import app_config from "@/util/app_config";
 
 export default async function Page({ params }: { params: { id: string } }) {
   const idJob = params.id;
-  const dataJob = await Job_getOneById(idJob);
+  const dataJob = await job_getOneById(idJob);
 
   return (
     <>

src/app/dev/job/detail/publish/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/publish/[id]/page.tsx

@@ -1,9 +1,9 @@
 import { Job_DetailPublish } from "@/app_modules/job";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 export default async function Page({params}: {params: {id: string}}) {
   let jobId = params.id
-  const dataJob = await Job_getOneById(jobId)
+  const dataJob = await job_getOneById(jobId)
 
   return (
     <>

src/app/dev/job/detail/reject/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/reject/[id]/page.tsx

@@ -1,10 +1,10 @@
 
 import Job_DetailReject from "@/app_modules/job/detail/reject/view";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 export default async function Page({params}: {params: {id: string}}) {
   let jobId = params.id
-  const dataJob = await Job_getOneById(jobId)
+  const dataJob = await job_getOneById(jobId)
 
   return (
     <>

src/app/dev/job/detail/review/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/detail/review/[id]/page.tsx

@@ -1,5 +1,5 @@
 import Job_DetailReview from "@/app_modules/job/detail/review/view";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 import React from "react";
 
 export default async function Page({
@@ -8,7 +8,7 @@ export default async function Page({
   params: { id: React.ReactNode };
 }) {
   let jobId = params.id;
-  const dataJob = await Job_getOneById(jobId)
+  const dataJob = await job_getOneById(jobId)
 
   return (
     <>

src/app/dev/job/edit/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/edit/[id]/page.tsx

@@ -1,9 +1,9 @@
 import { Job_Edit } from "@/app_modules/job";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let jobId = params.id;
-  const dataJob = await Job_getOneById(jobId);
+  const dataJob = await job_getOneById(jobId);
 
   return (
     <>

src/app/dev/job/main/arsip/page.tsx

@@ -1,12 +1,12 @@
 import { Job_Arsip } from "@/app_modules/job";
-import { Job_getListAllArsipById } from "@/app_modules/job/fun/get/get_list_all_arsip";
+import { job_getAllArsipById } from "@/app_modules/job/fun/get/get_all_arsip";
 
 export default async function Page() {
-  const dataJob = await Job_getListAllArsipById()
+  const dataJob = await job_getAllArsipById({ page: 1 });
 
   return (
     <>
-      <Job_Arsip dataJob={dataJob as any}/>
+      <Job_Arsip dataJob={dataJob as any} />
     </>
   );
 }

src/app/dev/job/main/beranda/page.tsx

@@ -1,12 +1,12 @@
-import { Job_Beranda } from "@/app_modules/job";
-import { Job_getAllListPublish } from "@/app_modules/job/fun/get/get_list_all_publish";
+import { Job_ViewBeranda } from "@/app_modules/job";
+import { job_getAllListPublish } from "@/app_modules/job/fun/get/get_all_publish";
 
 export default async function Page() {
-  const listJob = await Job_getAllListPublish();
+  const listJob = await job_getAllListPublish({ page: 1 });
 
   return (
     <>
-      <Job_Beranda listJob={listJob as any} />
+      <Job_ViewBeranda listJob={listJob as any} />
     </>
   );
 }

src/app/dev/job/main/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/main/status/page.tsx

@@ -1,13 +1,14 @@
 import { Job_Status } from "@/app_modules/job";
-import { Job_getListStatusByStatusId } from "@/app_modules/job/fun/get/get_list_status_by_status_id";
+import job_getAllStatusDraft from "@/app_modules/job/fun/get/status/get_list_draft";
+import job_getAllStatusPublish from "@/app_modules/job/fun/get/status/get_list_publish";
+import job_getAllStatusReject from "@/app_modules/job/fun/get/status/get_list_reject";
+import job_getAllStatusReview from "@/app_modules/job/fun/get/status/get_list_review";
 
 export default async function Page() {
-  const listPublish = await Job_getListStatusByStatusId("1");
-  const listReview = await Job_getListStatusByStatusId("2");
-  const listDraft = await Job_getListStatusByStatusId("3");
-  const listReject = await Job_getListStatusByStatusId("4");
-
-
+  const listPublish = await job_getAllStatusPublish({page: 1});
+  const listReview = await job_getAllStatusReview({ page: 1 });
+  const listDraft = await job_getAllStatusDraft({ page: 1 });
+  const listReject = await job_getAllStatusReject({page: 1});
 
   return (
     <>

src/app/dev/job/non_user_view/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/non_user_view/[id]/page.tsx

@@ -1,11 +1,9 @@
-"use server";
 import { Job_NonUserView } from "@/app_modules/job";
-import { Job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
-import os from "os";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let jobId = params.id;
-  const dataJob = await Job_getOneById(jobId);
+  const dataJob = await job_getOneById(jobId);
   // const platform = os.platform();
   // const hostName =
   //   platform === "darwin"

src/app/dev/job/splash/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/job/splash/page.tsx

@@ -1,9 +1,9 @@
-import { Job_Splash } from "@/app_modules/job";
+import { Job_ViewSplash } from "@/app_modules/job";
 
 export default async function Page() {
   return (
     <>
-      <Job_Splash />
+      <Job_ViewSplash />
     </>
   );
 }

src/app/emotion.tsx

@@ -1,7 +1,14 @@
 "use client";
+import { MainColor } from "@/app_modules/component_global/color/color_pallet";
 // import './globals.css'
 import { CacheProvider } from "@emotion/react";
-import { MantineProvider, useEmotionCache } from "@mantine/core";
+import {
+  Box,
+  Container,
+  MantineProvider,
+  rem,
+  useEmotionCache,
+} from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import { useServerInsertedHTML } from "next/navigation";
 import "react-toastify/dist/ReactToastify.css";
@@ -33,8 +40,24 @@ export default function RootStyleRegistry({
           <MantineProvider withGlobalStyles withNormalizeCSS>
             <Notifications position="top-center" containerWidth={300} />
             {children}
-            {/* <ToastContainer position="bottom-center" />
-            <AppNotif /> */}
+            {/* <Box
+              bg={"#252A2F"}
+              pos={"fixed"}
+              w={"100%"}
+              h={"100%"}
+              style={{
+                overflowY: "auto",
+              }}
+            >
+              <Container
+                mih={"100vh"}
+                p={0}
+                size={rem(500)}
+                bg={MainColor.darkblue}
+              >
+                
+              </Container>
+            </Box> */}
           </MantineProvider>
         </CacheProvider>
       </body>

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import MqttLoader from "@/util/mqtt_loader";
 import RootStyleRegistry from "./emotion";
+import { Container } from "@mantine/core";
 
 export default function RootLayout({
   children,

src/app/makuro/page.tsx

@@ -47,5 +47,5 @@ export default function App() {
     padding: 8,
   };
 
-  return <Coba />;
+  return <></>;
 }

src/app_modules/component_global/author_name_on_header.tsx

@@ -52,7 +52,11 @@ export default function ComponentGlobal_AuthorNameOnHeader({
             {visible ? (
               <Avatar
                 size={30}
-                sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                sx={{
+                  borderStyle: "solid",
+                  borderWidth: "1px",
+                  borderColor: "white",
+                }}
                 radius={"xl"}
                 bg={"gray.1"}
               >
@@ -65,7 +69,11 @@ export default function ComponentGlobal_AuthorNameOnHeader({
             ) : (
               <Avatar
                 size={30}
-                sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                sx={{
+                  borderStyle: "solid",
+                  borderWidth: "1px",
+                  borderColor: "white",
+                }}
                 radius={"xl"}
                 bg={"gray.1"}
                 src={
@@ -77,16 +85,16 @@ export default function ComponentGlobal_AuthorNameOnHeader({
             )}
           </Grid.Col>
           <Grid.Col span={"auto"}>
-            <Stack justify="center" h={"100%"}>
+            <Stack justify="center" h={"100%"} c={"white"}>
               <Group position="apart">
-                <Stack justify="center" h={"100%"}>
+                <Stack justify="center" h={"100%"} >
                   <Text lineClamp={1} fz={"sm"} fw={"bold"}>
                     {authorName ? authorName : "Nama author"}
                   </Text>
                 </Stack>
                 <Stack justify="center" h={"100%"}>
                   {tglPublish ? (
-                    <Text c={"gray"} fz={"xs"}>
+                    <Text c={"white"} fz={"xs"}>
                       {skrng.toLocaleDateString(["id-ID"], {
                         dateStyle: "medium",
                       })}

src/app_modules/component_global/box_information.tsx

@@ -0,0 +1,52 @@
+import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { AccentColor, MainColor } from "./color/color_pallet";
+
+export default function ComponentGlobal_BoxInformation({
+  informasi,
+ isReport,
+}: {
+  informasi: string;
+  isReport?: boolean;
+}) {
+  return (
+    <>
+      {isReport ? (
+        <Paper
+          bg={"blue.3"}
+          p={10}
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `1px solid ${AccentColor.skyblue}`,
+          }}
+        >
+          <Stack spacing={0}>
+            <Text fz={10} fs={"italic"} c={"orange"} fw={"bold"}>
+              * Report
+            </Text>
+            <Text fz={10} c={"white"}>
+              {informasi}
+            </Text>
+          </Stack>
+        </Paper>
+      ) : (
+        <Paper
+          bg={"blue.3"}
+          p={10}
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `1px solid ${AccentColor.skyblue}`,
+          }}
+        >
+          <Group>
+            <Text fz={10} c={"red"} fw={"bold"}>
+              *{" "}
+              <Text span inherit c={"white"} fw={"normal"}>
+                {informasi}
+              </Text>
+            </Text>
+          </Group>
+        </Paper>
+      )}
+    </>
+  );
+}

src/app_modules/component_global/is_empty_data.tsx

@@ -1,22 +1,22 @@
 "use client";
 
-import { Center } from "@mantine/core";
+import { Center, Text } from "@mantine/core";
 
 export default function ComponentGlobal_IsEmptyData({
   text,
   height,
 }: {
-  text: string;
-  height?: number}) {
+  text?: string;
+  height?: number;
+}) {
   return (
     <>
       <Center
-        h={height ? `${height}vh` : "50vh"}
+        h={height ? `${height}vh` : "70vh"}
         fz={"sm"}
         fw={"bold"}
-        c={"gray"}
       >
-        {text}
+        <Text c={"gray"}>{text ? text : "Tidak Ada Data"}</Text>
       </Center>
     </>
   );

src/app_modules/component_global/loading_card.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Overlay, Center, Loader } from "@mantine/core";
 
 export default function ComponentGlobal_CardLoadingOverlay({
@@ -16,7 +14,7 @@ export default function ComponentGlobal_CardLoadingOverlay({
           <Loader
             variant={variant ? variant : "dots"}
             size={size ? size : 20}
-            color="gray"
+            color="white"
           />
         </Center>
       </Overlay>

src/app_modules/component_global/splash/splash_global.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Stack, Loader, ActionIcon, ThemeIcon } from "@mantine/core";
+import ComponentGlobal_UI_LayoutTamplate from "../ui/ui_layout_tamplate";
+import { IconMessages, IconX } from "@tabler/icons-react";
+
+export default function ComponentGlobal_SplashScreen({ icon }: { icon: any }) {
+  return (
+    <>
+      <ComponentGlobal_UI_LayoutTamplate>
+        <Stack h={"90vh"} align="center" justify="center" spacing={"xl"}>
+          <ThemeIcon variant="transparent" size={300} c="white">
+            {icon}
+          </ThemeIcon>
+          <Loader variant="dots" color="white" />
+        </Stack>
+      </ComponentGlobal_UI_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/component_global/ui/ui_drawer.tsx

@@ -0,0 +1,72 @@
+import {
+  Drawer,
+  Stack,
+  Group,
+  ActionIcon,
+  SimpleGrid,
+  Text,
+  Box,
+} from "@mantine/core";
+import { IconX, IconEdit } from "@tabler/icons-react";
+import { MainColor, AccentColor } from "../color/color_pallet";
+import React from "react";
+import { useRouter } from "next/navigation";
+
+export default function ComponentGlobal_UI_Drawer({
+  opened,
+  close,
+  component,
+}: {
+  opened: boolean;
+  close: () => void;
+  component: any[];
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Drawer
+        opened={opened}
+        onClose={() => close()}
+        position={"bottom"}
+        size={"auto"}
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: "transparent",
+          },
+          body: {
+            backgroundColor: MainColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
+      >
+        <Stack spacing={"xs"}>
+          <Group position="right">
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
+          <SimpleGrid cols={4}>
+            {component.map((e, i) => (
+              <Stack key={i} align="center" spacing={"xs"}>
+                <ActionIcon
+                  variant="transparent"
+                  c="white"
+                  onClick={() => router.push(e.path)}
+                >
+                  {e.icon}
+                </ActionIcon>
+                <Text color="white">{e.name}</Text>
+              </Stack>
+            ))}
+          </SimpleGrid>
+        </Stack>
+      </Drawer>
+    </>
+  );
+}

src/app_modules/component_global/ui/ui_header_tamplate.tsx

@@ -66,7 +66,7 @@ export default function ComponentGlobal_UI_HeaderTamplate({
               }}
             >
               {isLoading ? (
-                <Loader size={20} />
+                <Loader color={AccentColor.yellow} size={20} />
               ) : iconLeft ? (
                 iconLeft
               ) : (
@@ -85,14 +85,18 @@ export default function ComponentGlobal_UI_HeaderTamplate({
             <Box>{iconRight}</Box>
           ) : (
             <ActionIcon
-              loading={isRightLoading ? true : false}
+              c={"white"}
               variant="transparent"
               onClick={() => {
                 setRightLoading(true);
                 router.push(routerRight);
               }}
             >
-              {iconRight}
+              {isRightLoading ? (
+                <Loader color={AccentColor.yellow} size={20} />
+              ) : (
+                iconRight
+              )}
             </ActionIcon>
           )}
         </Group>

src/app_modules/component_global/ui/ui_layout_tamplate.tsx

@@ -1,10 +1,11 @@
-"use client";
-
-import { BackgroundImage, Box, Center, ScrollArea } from "@mantine/core";
+import {
+  BackgroundImage,
+  Box,
+  Container,
+  Footer,
+  ScrollArea,
+} from "@mantine/core";
 import { AccentColor, MainColor } from "../color/color_pallet";
-import ComponentGlobal_HeaderTamplate from "../header_tamplate";
-import ComponentGlobal_UI_HeaderTamplate from "./ui_header_tamplate";
-import { RouterHome } from "@/app/lib/router_hipmi/router_home";
 
 export default function ComponentGlobal_UI_LayoutTamplate({
   children,
@@ -17,16 +18,13 @@ export default function ComponentGlobal_UI_LayoutTamplate({
 }) {
   return (
     <>
-      <BackgroundImage
-        src={"/aset/global/main_background.png"}
-        h={"100vh"}
-      >
+      <BackgroundImage src={"/aset/global/main_background.png"} h={"100vh"} style={{position: "relative"}}>
         {/* Header */}
         {header ? (
           <Box
             h={"8vh"}
             style={{
-              zIndex: 98,
+              zIndex: 10,
             }}
             w={"100%"}
             pos={"sticky"}
@@ -39,33 +37,32 @@ export default function ComponentGlobal_UI_LayoutTamplate({
         )}
 
         {/* Children */}
-        <Box h={footer ? "82vh" : "92vh"} pos={"static"}>
+        <Box style={{zIndex: 0}} h={footer ? "82vh" : "92vh"} pos={"static"}>
           <ScrollArea h={"100%"} px={"md"}>
-            {/* {Array.from({ length: 100 }).map((e, i) => (
-              <Box bg={"blue"} key={i} mb={"md"}>
-                {i + 1}
-              </Box>
-            ))} */}
             {children}
           </ScrollArea>
         </Box>
 
         {/* Footer */}
         {footer ? (
-          <Box
-            style={{
-              zIndex: 99,
-              borderRadius: "20px 20px 0px 0px",
-              borderTop: `1px solid ${AccentColor.blue}`,
-            }}
-            bg={MainColor.darkblue}
-            w={"100%"}
-            color="blue"
-            pos={"fixed"}
-            bottom={0}
-            h={"10vh"}
-          >
-            {footer}
+          <Box style={{ position: "relative", bottom: 0 }} >
+            <Box
+              style={{
+                zIndex: 10,
+                borderRadius: "20px 20px 0px 0px",
+                borderTop: `2px solid ${AccentColor.blue}`,
+                borderRight: `1px solid ${AccentColor.blue}`,
+                borderLeft: `1px solid ${AccentColor.blue}`,
+                width: "100%",
+              }}
+              bg={AccentColor.darkblue}
+              color="blue"
+              pos={"absolute"}
+              // bottom={0}
+              h={"10vh"}
+            >
+              {footer}
+            </Box>
           </Box>
         ) : (
           ""

src/app_modules/component_global/ui/ui_modal.tsx

@@ -0,0 +1,45 @@
+import { Modal, Stack, Title, Group, Button, Box } from "@mantine/core";
+import { MainColor, AccentColor } from "../color/color_pallet";
+
+export default function ComponentGlobal_UI_Modal({
+  opened,
+  close,
+  title,
+  buttonKiri,
+  buttonKanan,
+}: {
+  opened: any;
+  close: any;
+  title: any;
+  buttonKiri: any;
+  buttonKanan: any;
+}) {
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={() => {
+          close();
+        }}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} color="white" align="center">
+            {title}
+          </Title>
+          <Group position="center">
+            <Box>{buttonKiri}</Box>
+            <Box>{buttonKanan}</Box>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}

src/app_modules/forum/detail/main_detail.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Center, Loader, Stack } from "@mantine/core";
+import { Box, Center, Loader, Stack } from "@mantine/core";
 import _ from "lodash";
 import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
 
@@ -23,7 +23,7 @@ export default function Forum_MainDetail({
   dataPosting: MODEL_FORUM_POSTING;
   listKomentar: MODEL_FORUM_KOMENTAR[];
   userLoginId: string;
-  countKomentar: number
+  countKomentar: number;
 }) {
   const [data, setData] = useState(dataPosting);
   const [lsKomentar, setLsKomentar] = useState(listKomentar);
@@ -90,34 +90,37 @@ export default function Forum_MainDetail({
           ""
         )}
 
-        <ScrollOnly
-          height={lsKomentar.length < 5 ? "50vh" : "70vh"}
-          renderLoading={() => (
-            <Center mt={"lg"}>
-              <Loader color={"yellow"} />
-            </Center>
-          )}
-          data={lsKomentar}
-          setData={setLsKomentar}
-          moreData={async () => {
-            const loadData = await forum_funGetAllKomentarById({
-              postingId: data.id,
-              page: activePage + 1,
-            });
-            setActivePage((val) => val + 1);
+        <Box >
+          <ScrollOnly
+          
+            height={"60vh"}
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={lsKomentar}
+            setData={setLsKomentar}
+            moreData={async () => {
+              const loadData = await forum_funGetAllKomentarById({
+                postingId: data.id,
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
 
-            return loadData;
-          }}
-        >
-          {(item) => (
-            <ComponentForum_KomentarView
-              data={item}
-              setKomentar={setLsKomentar}
-              postingId={data?.id}
-              userLoginId={userLoginId}
-            />
-          )}
-        </ScrollOnly>
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentForum_KomentarView
+                data={item}
+                setKomentar={setLsKomentar}
+                postingId={data?.id}
+                userLoginId={userLoginId}
+              />
+            )}
+          </ScrollOnly>
+        </Box>
       </Stack>
     </>
   );

src/app_modules/forum/main/beranda.tsx

@@ -151,7 +151,7 @@ export default function Forum_Beranda({
           }}
         >
           {loadingCreate ? (
-            <Loader size={25} />
+            <Loader color={AccentColor.yellow} size={25} />
           ) : (
             <IconPencilPlus color="white" />
           )}

src/app_modules/forum/splash/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import ComponentGlobal_SplashScreen from "@/app_modules/component_global/splash/splash_global";
 import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import {
   Avatar,
@@ -25,20 +26,7 @@ export default function Forum_Splash() {
 
   return (
     <>
-      <ComponentGlobal_UI_LayoutTamplate>
-        <ViewSplash />
-      </ComponentGlobal_UI_LayoutTamplate>
-    </>
-  );
-}
-
-function ViewSplash() {
-  return (
-    <>
-      <Stack h={"90vh"} align="center" justify="center" spacing={"xl"}>
-        <IconMessages size={350} color="white" />
-        <Loader variant="dots" color="white" />
-      </Stack>
+      <ComponentGlobal_SplashScreen icon={<IconMessages size={300} />} />
     </>
   );
 }

src/app_modules/home/layout.tsx

@@ -58,7 +58,7 @@ export default function HomeLayout({
 }) {
   const router = useRouter();
   // const [user, setUser] = useState(dataUser);
-  const [idLoadingProfil, setIsLoadingProfile] = useState(false);
+  const [isLoadingProfil, setIsLoadingProfile] = useState(false);
   const [isLoadingUS, setIsLoadingUS] = useState(false);
   const [isLoadingBell, setIsLoadingBell] = useState(false);
   const [isLoadingPage, setIsLoadingPage] = useState(false);
@@ -144,7 +144,7 @@ export default function HomeLayout({
               }}
             >
               {isLoadingUS ? (
-                <Loader size={20} />
+                <Loader color={AccentColor.yellow} size={20} />
               ) : (
                 <IconUserSearch color="white" />
               )}
@@ -167,12 +167,16 @@ export default function HomeLayout({
               }}
             >
               {isLoadingBell ? (
-                <Loader size={20} />
+                <Loader color={AccentColor.yellow} size={20} />
               ) : (
                 <Indicator
                   processing
                   color={MainColor.yellow}
-                  label={<Text fz={10} c={MainColor.darkblue}>{countNotif}</Text>}
+                  label={
+                    <Text fz={10} c={MainColor.darkblue}>
+                      {countNotif}
+                    </Text>
+                  }
                 >
                   <IconBell color="white" />
                 </Indicator>
@@ -182,7 +186,6 @@ export default function HomeLayout({
         </Box>
 
         {/* Children */}
-
         <Box h={"82vh"} pos={"static"}>
           <ScrollArea h={"100%"}>
             {/* {Array(10)
@@ -201,14 +204,6 @@ export default function HomeLayout({
           />
         </Box>
 
-        {/* <Box h={"100%"} pos={"static"}>
-          <ScrollArea h={"100%"}>{children}</ScrollArea>
-          <Box
-            style={{
-              height: "10vh",
-            }}
-          />
-        </Box> */}
 
         {/* Footer */}
         <Box
@@ -216,9 +211,9 @@ export default function HomeLayout({
             zIndex: 99,
             borderRadius: "20px 20px 0px 0px",
           }}
-          bg={MainColor.darkblue}
+          // bg={MainColor.darkblue}
           w={"100%"}
-          color="blue"
+          // color="blue"
           pos={"fixed"}
           bottom={0}
           h={"10vh"}
@@ -228,94 +223,84 @@ export default function HomeLayout({
             cols={4}
             style={{
               borderRadius: "20px 20px 0px 0px",
-              border: `1px solid ${AccentColor.blue}`,
+              borderTop: `2px solid ${AccentColor.blue}`,
             }}
           >
             {listHalamanFooter.map((e, i) => (
               <Center h={"10vh"} key={e.id}>
-                {isLoadingPage && e.id === pageId ? (
-                  <Center>
-                    <Loader size={"sm"} />
-                  </Center>
-                ) : (
-                  <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));
-                        }
-                      }}
-                    >
-                      {e.icon}
-                    </ActionIcon>
-                    <Text c={e.link === "" ? "gray" : "white"} fz={"xs"}>
-                      {e.name}
-                    </Text>
-                  </Stack>
-                )}
+                <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"}>
-              {idLoadingProfil ? (
-                <Center>
-                  <Loader size={"sm"} />
-                </Center>
-              ) : (
-                <Center>
-                  <Stack
-                    align="center"
-                    spacing={2}
-                    onClick={() => {
-                      setIsLoadingProfile(true);
-                      if (dataUser?.Profile === null) {
-                        router.push(RouterProfile.create);
-                      } else {
-                        router.push(
-                          RouterProfile.katalog + `${dataUser.Profile.id}`
-                        );
+              <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 variant={"transparent"}>
-                      {dataUser?.Profile === null ? (
-                        <IconUserCircle color="white" />
-                      ) : (
-                        <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>
-              )}
+                    />
+                  )}
+                </ActionIcon>
+                <Text fz={"xs"} c={"white"}>
+                  Profile
+                </Text>
+              </Stack>
             </Center>
           </SimpleGrid>
         </Box>

src/app_modules/home/view.tsx

@@ -47,6 +47,7 @@ export default function HomeView({
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [pageId, setPageId] = useState(0);
+  const [isLoadingJob, setLoadingJob] = useState(false);
 
   const listPageOnBox = [
     {
@@ -140,7 +141,11 @@ export default function HomeView({
                     variant="transparent"
                     c={e.link === "" ? "gray.3" : "white"}
                   >
-                    {isLoading && e.id === pageId ? <Loader /> : e.icon}
+                    {isLoading && e.id === pageId ? (
+                      <Loader color={AccentColor.yellow} />
+                    ) : (
+                      e.icon
+                    )}
                   </ActionIcon>
                   <Text c={e.link === "" ? "gray.3" : "white"} fz={"sm"}>
                     {e.name}
@@ -173,6 +178,7 @@ export default function HomeView({
                       "Cooming Soon !!"
                     );
                   } else {
+                    setLoadingJob(true);
                     return router.push(routePageJob.link);
                   }
                 }
@@ -183,7 +189,11 @@ export default function HomeView({
                   size={40}
                   c={routePageJob.link === "" ? "gray.3" : "white"}
                 >
-                  {routePageJob.icon}
+                  {isLoadingJob ? (
+                    <Loader color={AccentColor.yellow} size={20} />
+                  ) : (
+                    routePageJob.icon
+                  )}
                 </ActionIcon>
                 <Text c={routePageJob.link === "" ? "gray.3" : "white"}>
                   {routePageJob.name}

src/app_modules/job/component/beranda/card_view.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import {
+  MainColor,
+  AccentColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_CardLoadingOverlay from "@/app_modules/component_global/loading_card";
+import { Card, Grid, Center, Text } from "@mantine/core";
+import { MODEL_JOB } from "../../model/interface";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentJob_BerandaCardView({
+  data,
+}: {
+  data: MODEL_JOB;
+}) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+  const [jobId, setJobId] = useState("");
+
+  return (
+    <>
+      <Card
+        mb={"md"}
+        shadow="lg"
+        p={30}
+        radius={"md"}
+        style={{
+          backgroundColor: MainColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+        }}
+      >
+        <Card.Section style={{ zIndex: 99 }}>
+          <ComponentGlobal_AuthorNameOnHeader
+            authorName={data.Author.username}
+            imagesId={data.Author.Profile.imagesId}
+            profileId={data.Author.Profile.id}
+            isPembatas={true}
+          />
+        </Card.Section>
+        <Card.Section
+          onClick={() => {
+            visible ? "" : setJobId(data.id),
+              setVisible(true),
+              router.push(RouterJob.main_detail + data.id);
+          }}
+          mt={"lg"}
+        >
+          <Grid>
+            <Grid.Col span={"auto"}>
+              <Center h={"100%"}>
+                <Text fw={"bold"} fz={"xl"} lineClamp={1} c={"white"}>
+                  {data.title}
+                </Text>
+              </Center>
+            </Grid.Col>
+          </Grid>
+        </Card.Section>
+        {visible && data.id === jobId ? (
+          <ComponentGlobal_CardLoadingOverlay />
+        ) : (
+          ""
+        )}
+      </Card>
+    </>
+  );
+}

src/app_modules/job/component/button/create_button.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
+import { Affix, rem, ActionIcon, Loader, Box } from "@mantine/core";
+import { IconPencilPlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentJob_CreateButton() {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <ActionIcon
+        variant="transparent"
+        radius={"xl"}
+        size={"xl"}
+        style={{
+          position: "absolute",
+          zIndex: 1,
+          bottom: 100,
+          right: 30,
+          transition: "0.5s",
+          border: `1px solid ${AccentColor.skyblue}`,
+          backgroundColor: AccentColor.blue,
+          padding: 3,
+        }}
+        onClick={() => {
+          setLoading(true);
+          router.push(RouterJob.create);
+        }}
+      >
+        {isLoading ? (
+          <Loader color={AccentColor.yellow} size={25} />
+        ) : (
+          <IconPencilPlus color="white" />
+        )}
+      </ActionIcon>
+
+      {/* <Affix withinPortal position={{ bottom: 150, right: 30 }}>
+        <ActionIcon
+          style={{
+            transition: "0.5s",
+            border: `1px solid ${AccentColor.skyblue}`,
+          }}
+          bg={AccentColor.blue}
+          size={"xl"}
+          radius={"xl"}
+          variant="transparent"
+          onClick={() => {
+            setLoading(true);
+            router.push(RouterJob.create);
+          }}
+        >
+          {isLoading ? (
+            <Loader color={AccentColor.yellow} size={25} />
+          ) : (
+            <IconPencilPlus color="white" />
+          )}
+        </ActionIcon>
+      </Affix> */}
+    </>
+  );
+}

src/app_modules/job/component/card/card_view.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import { Card, Center, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_JOB } from "../../model/interface";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import ComponentGlobal_CardLoadingOverlay from "@/app_modules/component_global/loading_card";
+
+export default function ComponentJob_CardStatus({
+  data,
+  path,
+}: {
+  data: MODEL_JOB;
+  path: string;
+}) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Card
+        style={{
+          backgroundColor: MainColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+        }}
+        mb={"md"}
+        shadow="lg"
+        withBorder
+        radius={"md"}
+        p={20}
+        onClick={() => {
+          if (path === undefined) {
+            ComponentGlobal_NotifikasiPeringatan("Path tidak ditemukan");
+          } else {
+            router.push(path + data.id);
+            setVisible(true);
+            // visible
+            //   ? ""
+            //   : (setJobId(e?.id), setVisible(true), router.push(path + e?.id));
+          }
+        }}
+      >
+        <Card.Section>
+          <Center h={"100%"}>
+            <Text mt={"md"} fw={"bold"} lineClamp={1} c={"white"}>
+              {data?.title}
+            </Text>
+          </Center>
+        </Card.Section>
+        {visible ? <ComponentGlobal_CardLoadingOverlay /> : ""}
+      </Card>
+    </>
+  );
+}

src/app_modules/job/component/card_view_status.tsx

@@ -10,6 +10,11 @@ import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { IconChevronRight } from "@tabler/icons-react";
 import { useState } from "react";
 import ComponentGlobal_CardLoadingOverlay from "@/app_modules/component_global/loading_card";
+import {
+  MainColor,
+  AccentColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
 
 export default function ComponentJob_CardViewStatus({
   listData,
@@ -25,7 +30,7 @@ export default function ComponentJob_CardViewStatus({
   if (_.isEmpty(listData))
     return (
       <>
-        <ComponentJob_IsEmptyData text="Data tidak ada" />
+        <ComponentGlobal_IsEmptyData />
       </>
     );
 
@@ -34,6 +39,10 @@ export default function ComponentJob_CardViewStatus({
       <Stack>
         {listData?.map((e, i) => (
           <Card
+            style={{
+              backgroundColor: MainColor.darkblue,
+              border: `2px solid ${AccentColor.blue}`,
+            }}
             key={i}
             shadow="lg"
             withBorder
@@ -53,16 +62,12 @@ export default function ComponentJob_CardViewStatus({
               }
             }}
           >
-            <Card.Section px={"sm"}>
-              <Grid>
-                <Grid.Col span={"auto"}>
-                  <Center h={"100%"}>
-                    <Text fw={"bold"} lineClamp={1}>
-                      {e?.title}
-                    </Text>
-                  </Center>
-                </Grid.Col>
-              </Grid>
+            <Card.Section>
+              <Center h={"100%"}>
+                <Text mt={"md"} fw={"bold"} lineClamp={1} c={"white"}>
+                  {e?.title}
+                </Text>
+              </Center>
             </Card.Section>
             {visible && e?.id === jobId ? (
               <ComponentGlobal_CardLoadingOverlay />

src/app_modules/job/component/default_value.ts

@@ -11,14 +11,4 @@ export let defaultDeskripsi = `
 <p>+6281 xxx xxx xx</p>
 <p>Kirim CV anda melalui email berikut</p>
 <p>test-email@gmail.com</p>
-<p>Atau kunjungi website kami:</p>
-<p>
-<a
-href="https://www.google.co.id/?hl=id"
-rel="noopener noreferrer"
-target="_blank"
->
-https://www.google.co.id/?hl=id
-</a>
-</p>
 `;

src/app_modules/job/component/detail/detail_data.tsx

@@ -3,6 +3,10 @@
 import { Card, Stack, Skeleton, Image, Text, Center } from "@mantine/core";
 import { MODEL_JOB } from "../../model/interface";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
 export default function ComponentJob_DetailData({
   data,
@@ -13,7 +17,16 @@ export default function ComponentJob_DetailData({
     <>
       {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
       {data ? (
-        <Card shadow="lg" withBorder p={30}>
+        <Card
+          shadow="lg"
+          withBorder
+          p={30}
+          style={{
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          }}
+          c={"white"}
+        >
           <Card.Section px={"xs"} pb={"lg"}>
             <Stack spacing={"xl"}>
               {data.imagesId ? (

src/app_modules/job/component/is_empty_data.tsx

@@ -5,7 +5,7 @@ import { Center } from "@mantine/core";
 export default function ComponentJob_IsEmptyData({ text }: { text: string }) {
   return (
     <>
-      <Center h={"50vh"} fz={"sm"} fw={"bold"} c={"gray"}>
+      <Center h={"50vh"} fz={"sm"} fw={"bold"} c={"white"}>
         {text}
       </Center>
     </>

src/app_modules/job/create/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentJob_HeaderTamplate from "../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutJob_Create({
   children,
@@ -12,11 +11,11 @@ export default function LayoutJob_Create({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentJob_HeaderTamplate title="Tambah Job" />}
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Tambah Job" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/create/view.tsx

@@ -27,20 +27,22 @@ const ReactQuill = dynamic(
   { ssr: false }
 );
 
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import ComponentGlobal_BoxInformation from "@/app_modules/component_global/box_information";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 import mqtt_client from "@/util/mqtt_client";
 import { useShallowEffect } from "@mantine/hooks";
 import { defaultDeskripsi, defaultSyarat } from "../component/default_value";
-import ComponentJob_NotedBox from "../component/detail/noted_box";
-import { MODEL_JOB } from "../model/interface";
 import { Job_funCreate } from "../fun/create/fun_create";
-import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import { MODEL_NOTIFIKASI } from "@/app_modules/notifikasi/model/interface";
+import { MODEL_JOB } from "../model/interface";
 
 export default function Job_Create() {
   const [value, setValue] = useState({
@@ -56,23 +58,14 @@ export default function Job_Create() {
     if (window && window.document) setReload(true);
   }, []);
 
-  if (!reload)
-    return (
-      <>
-        <Center h={"50vh"}>
-          <ComponentGlobal_V2_LoadingPage />
-        </Center>
-      </>
-    );
-
   return (
     <>
       {!reload ? (
         <Center h={"50vh"}>
-          <Loader />
+          <Loader color={MainColor.yellow} />
         </Center>
       ) : (
-        <Stack px={"sm"} spacing={40}>
+        <Stack spacing={40}>
           <Stack align="center" spacing={"xs"}>
             {images ? (
               <Image alt="" src={images} height={300} width={200} />
@@ -110,11 +103,13 @@ export default function Job_Create() {
             >
               {(props) => (
                 <Button
-                  compact
                   {...props}
                   radius={"xl"}
-                  variant="outline"
-                  w={150}
+                  w={100}
+                  style={{
+                    backgroundColor: MainColor.yellow,
+                    border: `1px solid ${AccentColor.yellow}`,
+                  }}
                 >
                   <IconCamera />
                 </Button>
@@ -122,10 +117,23 @@ export default function Job_Create() {
             </FileButton>
           </Stack>
 
-          <ComponentJob_NotedBox informasi="Poster atau Gambar tidak wajib untuk di upload. Upload lah jika dirasa perlu." />
+          <ComponentGlobal_BoxInformation informasi="Poster atau Gambar tidak wajib untuk di upload. Upload lah jika dirasa perlu." />
 
-          <Stack spacing={"lg"}>
+          <Stack
+            spacing={"lg"}
+            p={"md"}
+            style={{
+              backgroundColor: MainColor.darkblue,
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "5px 5px 5px 5px",
+            }}
+          >
             <TextInput
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
               withAsterisk
               label="Judul"
               placeholder="Masukan judul lowongan kerja"
@@ -139,7 +147,7 @@ export default function Job_Create() {
             />
 
             <Stack spacing={3}>
-              <Text fz={"sm"}>
+              <Text fz={"sm"} c={"white"}>
                 Syarat & Ketentuan
                 <Text inherit span c={"red"}>
                   {" "}
@@ -150,6 +158,9 @@ export default function Job_Create() {
               <Stack spacing={5}>
                 <ReactQuill
                   defaultValue={defaultSyarat}
+                  style={{
+                    backgroundColor: "white",
+                  }}
                   modules={{
                     toolbar: [
                       [{ header: [1, 2, 3, 4, 5, 6, false] }],
@@ -174,7 +185,7 @@ export default function Job_Create() {
               </Stack>
             </Stack>
             <Stack spacing={3}>
-              <Text fz={"sm"}>
+              <Text fz={"sm"} c={"white"}>
                 Deskripsi
                 <Text inherit span c={"red"}>
                   {" "}
@@ -184,6 +195,9 @@ export default function Job_Create() {
               <Stack spacing={5}>
                 <ReactQuill
                   defaultValue={defaultDeskripsi}
+                  style={{
+                    backgroundColor: "white",
+                  }}
                   modules={{
                     toolbar: [
                       [{ header: [1, 2, 3, 4, 5, 6, false] }],
@@ -249,7 +263,6 @@ function ButtonAction({ value, file }: { value: MODEL_JOB; file: FormData }) {
             count: 1,
           })
         );
-
         setHotMenu(2);
         setStatus("Review");
         router.replace(RouterJob.status);
@@ -264,7 +277,7 @@ function ButtonAction({ value, file }: { value: MODEL_JOB; file: FormData }) {
   return (
     <>
       <Stack>
-        <Group grow mt={"lg"} mb={70}>
+        <Group grow mb={"lg"}>
           <Button
             disabled={
               value.title === "" ||
@@ -279,7 +292,19 @@ function ButtonAction({ value, file }: { value: MODEL_JOB; file: FormData }) {
             }
             style={{
               transition: "0.5s",
+              border:
+                value.title === "" ||
+                value.content === "" ||
+                value.content === "<p><br></p>" ||
+                value.content.length > 500 ||
+                value.deskripsi === "" ||
+                value.deskripsi === "<p><br></p>" ||
+                value.deskripsi.length > 500
+                  ? ""
+                  : `2px solid ${AccentColor.yellow}`,
             }}
+            bg={MainColor.yellow}
+            color="yellow"
             loaderPosition="center"
             loading={isLoading ? true : false}
             w={"100%"}

src/app_modules/job/detail/arsip/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutJob_DetailArsip({
   children,
@@ -12,9 +11,11 @@ export default function LayoutJob_DetailArsip({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentJob_HeaderTamplate title="Detail Arsip" />}>
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Arsip" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/detail/arsip/view.tsx

@@ -11,6 +11,8 @@ import { useAtom } from "jotai";
 import { Job_funEditArsipById } from "../../fun/edit/fun_edit_arsip_by_id";
 import { gs_job_status, gs_job_hot_menu } from "../../global_state";
 import { useState } from "react";
+import { useDisclosure } from "@mantine/hooks";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
 
 export default function Job_DetailArsip({ dataJob }: { dataJob: MODEL_JOB }) {
   return (
@@ -28,13 +30,14 @@ function ButtonAction({ jobId }: { jobId: string }) {
   const [isLoading, setLoading] = useState(false);
   const [status, setStatus] = useAtom(gs_job_status);
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
+  const [opened, { open, close }] = useDisclosure();
 
-  async function onAction() {
+  async function onPublish() {
     await Job_funEditArsipById(jobId, false).then((res) => {
       if (res.status === 200) {
         setStatus("Publish");
         setHotMenu(1);
-        ComponentGlobal_NotifikasiBerhasil("Berhasil Diarsipkan");
+        ComponentGlobal_NotifikasiBerhasil("Berhasil Dipublish");
         setLoading(true);
         router.replace(RouterJob.beranda);
       } else {
@@ -44,14 +47,43 @@ function ButtonAction({ jobId }: { jobId: string }) {
   }
   return (
     <>
+      <ComponentGlobal_UI_Modal
+        opened={opened}
+        close={() => close()}
+        title={
+          " Mempublish akan menampilkan info lowongan kerja ke beranda, anda yakin ?"
+        }
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              close();
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="teal"
+            onClick={() => {
+              onPublish();
+            }}
+          >
+            Simpan
+          </Button>
+        }
+      />
+
       <Button
         loaderPosition="center"
         loading={isLoading ? true : false}
         radius={"xl"}
         color="green"
-        mb={30}
+        my={"lg"}
         onClick={() => {
-          onAction();
+          open();
         }}
       >
         Publish Lagi

src/app_modules/job/detail/draft/layout.tsx

@@ -1,32 +1,74 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import {
+  ActionIcon,
+  AppShell,
+  Box,
+  Drawer,
+  Group,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import React from "react";
 import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import { IconEdit } from "@tabler/icons-react";
+import { IconDots, IconEdit, IconX } from "@tabler/icons-react";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 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";
+import { useRouter } from "next/navigation";
+import { useDisclosure } from "@mantine/hooks";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_UI_Drawer from "@/app_modules/component_global/ui/ui_drawer";
 
 export default function LayoutJob_DetailDraft({
   children,
   jobId,
 }: {
   children: React.ReactNode;
-  jobId: string
+  jobId: string;
 }) {
+  const router = useRouter();
+  const [opened, { open, close }] = useDisclosure();
+
+  const listComponent = [
+    {
+      id: "1",
+      name: "Edit Job",
+      icon: <IconEdit />,
+      path: RouterJob.edit + jobId,
+    },
+  ];
+
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
         header={
-          <ComponentJob_HeaderTamplate
+          <ComponentGlobal_UI_HeaderTamplate
             title="Detail Draft"
-            icon={<IconEdit />}
-            route2={RouterJob.edit + jobId}
+            iconRight={
+              <ActionIcon variant="transparent" onClick={() => open()}>
+                <IconDots color="white" />
+              </ActionIcon>
+            }
+            // routerRight={}
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
+
+      <ComponentGlobal_UI_Drawer
+        opened={opened}
+        close={close}
+        component={listComponent}
+      />
     </>
   );
 }

src/app_modules/job/detail/draft/view.tsx

@@ -16,13 +16,23 @@ import ComponentJob_NotedBox from "../../component/detail/noted_box";
 import { MODEL_JOB } from "../../model/interface";
 import mqtt_client from "@/util/mqtt_client";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import ComponentGlobal_BoxInformation from "@/app_modules/component_global/box_information";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import { useState } from "react";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
 
 export default function Job_DetailDraft({ dataJob }: { dataJob: MODEL_JOB }) {
   return (
     <>
       <Stack>
         {dataJob.catatan ? (
-          <ComponentJob_NotedBox informasi={dataJob.catatan} />
+          <ComponentGlobal_BoxInformation
+            informasi={dataJob.catatan}
+            isReport={true}
+          />
         ) : (
           ""
         )}
@@ -37,8 +47,9 @@ function ButtonAction({ jobId }: { jobId: string }) {
   const router = useRouter();
   const [status, setStatus] = useAtom(gs_job_status);
   const [opened, { open, close }] = useDisclosure();
+  const [isAjukan, setAjukan] = useState(false);
 
-  async function onAction() {
+  async function onAjukan() {
     const update = await Job_funEditStatusByStatusId(jobId, "2");
     if (update.status === 200) {
       const dataNotif = {
@@ -80,39 +91,148 @@ function ButtonAction({ jobId }: { jobId: string }) {
 
   return (
     <>
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-        <Paper px={"lg"}>
-          <Stack>
-            <Title order={6}>Yakin ingin menghapus ini ?</Title>
-            <Group grow>
-              <Button
-                radius={"xl"}
-                onClick={() => {
-                  close();
-                }}
-              >
-                Batal
-              </Button>
-              <Button
-                radius={"xl"}
-                color="red"
-                onClick={() => {
-                  onDelete();
-                }}
-              >
-                Hapus
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Modal>
+      {/* HAPUS */}
+      {/* <Modal
+        opened={opened}
+        onClose={close}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} c={"white"} align="center">
+            Yakin ingin menghapus ini ?
+          </Title>
+          <Group position="center">
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                close();
+              }}
+            >
+              Batal
+            </Button>
+            <Button
+              radius={"xl"}
+              color="red"
+              onClick={() => {
+                onDelete();
+              }}
+            >
+              Hapus
+            </Button>
+          </Group>
+        </Stack>
+      </Modal> */}
 
-      <Group grow mb={50}>
+      {/* AJUKAN KEMBALI */}
+      {/* <Modal
+        opened={isAjukan}
+        onClose={() => {
+          setAjukan(false);
+        }}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} c={"white"} align="center">
+            Anda yakin akan melakukan pengajuan review kembali ?
+          </Title>
+          <Group position="center">
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                setAjukan(false);
+              }}
+            >
+              Batal
+            </Button>
+            <Button
+              radius={"xl"}
+              color="yellow"
+              onClick={() => {
+                onAjukan();
+              }}
+            >
+              Ajukan
+            </Button>
+          </Group>
+        </Stack>
+      </Modal> */}
+
+      {/* Ajukan */}
+      <ComponentGlobal_UI_Modal
+        opened={isAjukan}
+        close={() => setAjukan(false)}
+        title={" Anda sudah yakin akan melakukan pengajuan review kembali ?"}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              setAjukan(false);
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="orange"
+            onClick={() => {
+              onAjukan();
+            }}
+          >
+            Simpan
+          </Button>
+        }
+      />
+
+      {/* Hapus */}
+      <ComponentGlobal_UI_Modal
+        opened={opened}
+        close={() => close()}
+        title={"Anda yakin ingin menghapus ?"}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              close();
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="red"
+            onClick={() => {
+              onDelete();
+            }}
+          >
+            hapus
+          </Button>
+        }
+      />
+
+      <Group grow my={"lg"}>
         <Button
           radius={"xl"}
           color="yellow"
           onClick={() => {
-            onAction();
+            setAjukan(true);
           }}
         >
           Ajukan Review

src/app_modules/job/detail/main/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutJob_MainDetail({
   children,
@@ -12,9 +11,11 @@ export default function LayoutJob_MainDetail({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentJob_HeaderTamplate title=" Detail Job" />}>
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Job" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/detail/main/view.tsx

@@ -1,16 +1,11 @@
 "use client";
 
+import { Button, Center, Stack } from "@mantine/core";
+import { IconBrandWhatsapp } from "@tabler/icons-react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import ComponentJob_DetailData from "../../component/detail/detail_data";
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { Stack, Button, Center, Anchor } from "@mantine/core";
-import { useAtom } from "jotai";
-import { gs_job_status, gs_job_hot_menu } from "../../global_state";
-import Link from "next/link";
-import { IconBrandWhatsapp } from "@tabler/icons-react";
 import { MODEL_JOB } from "../../model/interface";
-import { gen_page } from "../../../../../gen_page";
 
 export default function Job_MainDetail({
   dataJob,
@@ -22,7 +17,6 @@ export default function Job_MainDetail({
   return (
     <>
       <Stack>
-        {/* <Anchor href={gen_page.devForumMain()}>kesana</Anchor> */}
         <ComponentJob_DetailData data={dataJob} />
         <ButtonAction jobId={dataJob.id} hostName={hostName} />
       </Stack>
@@ -45,7 +39,7 @@ function ButtonAction({
         <Button
           radius={"xl"}
           color="teal"
-          mb={30}
+          my={"lg"}
           leftIcon={<IconBrandWhatsapp />}
         >
           <Link

src/app_modules/job/detail/publish/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutJob_DetailPublish({
   children,
@@ -12,9 +11,11 @@ export default function LayoutJob_DetailPublish({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentJob_HeaderTamplate title="Detail Publish" />}>
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Publish" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/detail/publish/view.tsx

@@ -1,17 +1,22 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import ComponentJob_DetailData from "../../component/detail/detail_data";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { Stack, Button } from "@mantine/core";
-import { useAtom } from "jotai";
-import { gs_job_hot_menu, gs_job_status } from "../../global_state";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
-import { Job_funEditArsipById } from "../../fun/edit/fun_edit_arsip_by_id";
-import { MODEL_JOB } from "../../model/interface";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { Button, Group, Modal, Paper, Stack, Title } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
+import ComponentJob_DetailData from "../../component/detail/detail_data";
+import { Job_funEditArsipById } from "../../fun/edit/fun_edit_arsip_by_id";
+import { gs_job_hot_menu, gs_job_status } from "../../global_state";
+import { MODEL_JOB } from "../../model/interface";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
 
 export default function Job_DetailPublish({ dataJob }: { dataJob: MODEL_JOB }) {
   return (
@@ -27,11 +32,12 @@ export default function Job_DetailPublish({ dataJob }: { dataJob: MODEL_JOB }) {
 function ButtonAction({ jobId }: { jobId: string }) {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
+  const [opened, { open, close }] = useDisclosure();
 
   const [status, setStatus] = useAtom(gs_job_status);
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
 
-  async function onAction() {
+  async function onArsipkan() {
     await Job_funEditArsipById(jobId, true).then((res) => {
       if (res.status === 200) {
         setStatus("Publish");
@@ -46,14 +52,82 @@ function ButtonAction({ jobId }: { jobId: string }) {
   }
   return (
     <>
+      {/* <Modal
+        opened={opened}
+        onClose={close}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} color="white" align="center">
+            Mengarsipkan akan menghilangkan info lowongan kerja dari beranda,
+            anda yakin ?
+          </Title>
+          <Group grow>
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                close();
+              }}
+            >
+              Batal
+            </Button>
+            <Button
+              loading={isLoading ? true : false}
+              loaderPosition="center"
+              radius={"xl"}
+              color="teal"
+              onClick={() => {
+                onArsipkan();
+              }}
+            >
+              Arsip
+            </Button>
+          </Group>
+        </Stack>
+      </Modal> */}
+
+      <ComponentGlobal_UI_Modal
+        opened={opened}
+        close={() => close()}
+        title={
+          " Mengarsipkan akan menghilangkan info lowongan kerja dari beranda, anda yakin ?"
+        }
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              close();
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="teal"
+            onClick={() => {
+              onArsipkan();
+            }}
+          >
+            Simpan
+          </Button>
+        }
+      />
+
       <Button
-        loading={isLoading ? true : false}
-        loaderPosition="center"
         radius={"xl"}
-        color="green"
-        mb={30}
+        color="teal"
+        my={"lg"}
         onClick={() => {
-          onAction();
+          open();
         }}
       >
         Arsipkan

src/app_modules/job/detail/reject/layout.tsx

@@ -4,6 +4,10 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import { IconEdit } from "@tabler/icons-react";
 
 export default function LayoutJob_DetailReject({
   children,
@@ -12,9 +16,11 @@ export default function LayoutJob_DetailReject({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentJob_HeaderTamplate title="Detail Reject" />}>
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Reject" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/detail/reject/view.tsx

@@ -2,25 +2,32 @@
 
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { Stack, Button, Group, Modal, Paper, Title } from "@mantine/core";
+import { Button, Group, Modal, Paper, Stack, Title } from "@mantine/core";
 import { useAtom } from "jotai";
 
-import ComponentJob_DetailData from "../../component/detail/detail_data";
-import { gs_job_status } from "../../global_state";
-import { useRouter } from "next/navigation";
-import { useDisclosure } from "@mantine/hooks";
-import ComponentJob_NotedBox from "../../component/detail/noted_box";
-import { MODEL_JOB } from "../../model/interface";
-import { Job_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_status_id";
+import ComponentGlobal_BoxInformation from "@/app_modules/component_global/box_information";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { useDisclosure } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import ComponentJob_DetailData from "../../component/detail/detail_data";
 import { Job_funDeleteById } from "../../fun/delete/fun_delete_by_id";
+import { Job_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_status_id";
+import { gs_job_status } from "../../global_state";
+import { MODEL_JOB } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
 
 export default function Job_DetailReject({ dataJob }: { dataJob: MODEL_JOB }) {
-  
   return (
     <>
       <Stack>
-        <ComponentJob_NotedBox informasi={dataJob.catatan} />
+        <ComponentGlobal_BoxInformation
+          informasi={dataJob.catatan}
+          isReport={true}
+        />
         <ComponentJob_DetailData data={dataJob} />
         <ButtonAction jobId={dataJob.id} />
       </Stack>
@@ -33,7 +40,7 @@ function ButtonAction({ jobId }: { jobId: string }) {
   const [status, setStatus] = useAtom(gs_job_status);
   const [opened, { open, close }] = useDisclosure();
 
-  async function onAction() {
+  async function onEditKembali() {
     await Job_funEditStatusByStatusId(jobId, "3").then((res) => {
       if (res.status === 200) {
         router.push(RouterJob.status);
@@ -59,39 +66,77 @@ function ButtonAction({ jobId }: { jobId: string }) {
 
   return (
     <>
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-        <Paper px={"lg"}>
-          <Stack>
-            <Title order={6}>Yakin ingin menghapus ini ?</Title>
-            <Group grow>
-              <Button
-                radius={"xl"}
-                onClick={() => {
-                  close();
-                }}
-              >
-                Batal
-              </Button>
-              <Button
-                radius={"xl"}
-                color="red"
-                onClick={() => {
-                  onDelete();
-                }}
-              >
-                Hapus
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Modal>
+      <ComponentGlobal_UI_Modal
+        opened={opened}
+        close={() => close()}
+        title={" Anda yakin ingin menghapus  ?"}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              close();
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="red"
+            onClick={() => {
+              onDelete();
+            }}
+          >
+            Hapus
+          </Button>
+        }
+      />
 
-      <Group grow mb={50}>
+      {/* <Modal
+        opened={opened}
+        onClose={close}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} c={"white"} align="center">
+            Yakin ingin menghapus ini ?
+          </Title>
+          <Group position="center">
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                close();
+              }}
+            >
+              Batal
+            </Button>
+            <Button
+              radius={"xl"}
+              color="red"
+              onClick={() => {
+                onDelete();
+              }}
+            >
+              Hapus
+            </Button>
+          </Group>
+        </Stack>
+      </Modal> */}
+
+      <Group grow my={"xl"}>
         <Button
           radius={"xl"}
           color="orange"
           onClick={() => {
-            onAction();
+            onEditKembali();
           }}
         >
           Edit Kembali

src/app_modules/job/detail/review/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutJob_DetailReview({
   children,
@@ -12,9 +11,11 @@ export default function LayoutJob_DetailReview({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentJob_HeaderTamplate title="Detail Review" />}>
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Review" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/detail/review/view.tsx

@@ -12,6 +12,9 @@ import { Job_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_s
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 import mqtt_client from "@/util/mqtt_client";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
+import { useDisclosure } from "@mantine/hooks";
+import { useState } from "react";
 
 export default function Job_DetailReview({ dataJob }: { dataJob: MODEL_JOB }) {
   return (
@@ -27,6 +30,8 @@ export default function Job_DetailReview({ dataJob }: { dataJob: MODEL_JOB }) {
 function ButtonAction({ jobId }: { jobId: string }) {
   const router = useRouter();
   const [status, setStatus] = useAtom(gs_job_status);
+  const [opened, { open, close }] = useDisclosure();
+  const [isOpen, setOpen] = useState(false);
 
   async function onAction() {
     const update = await Job_funEditStatusByStatusId(jobId, "3");
@@ -57,12 +62,39 @@ function ButtonAction({ jobId }: { jobId: string }) {
   }
   return (
     <>
+      <ComponentGlobal_UI_Modal
+        opened={isOpen}
+        close={() => setOpen(false)}
+        title={"Anda yakin membatalkan review ?"}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="orange"
+            onClick={() => {
+              onAction();
+            }}
+          >
+            Simpan
+          </Button>
+        }
+      />
+
       <Button
         radius={"xl"}
         color="orange"
-        mb={50}
+        my={"xl"}
         onClick={() => {
-          onAction();
+          setOpen(true);
         }}
       >
         Batalkan Review

src/app_modules/job/edit/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentJob_HeaderTamplate from "../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutJob_Edit({
   children,
@@ -12,11 +11,12 @@ export default function LayoutJob_Edit({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentJob_HeaderTamplate title="Edit Job" />}
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Edit Job" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
+
     </>
   );
 }

src/app_modules/job/edit/view.tsx

@@ -36,6 +36,10 @@ import { Job_EditById } from "../fun/edit/fun_edit_by_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import dynamic from "next/dynamic";
 import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 const ReactQuill = dynamic(
   () => {
     return import("react-quill");
@@ -55,23 +59,14 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
     if (window && window.document) setReload(true);
   }, []);
 
-  if (!reload)
-    return (
-      <>
-        <Center h={"50vh"}>
-          <Loader />
-        </Center>
-      </>
-    );
-
   return (
     <>
       {!reload ? (
         <Center h={"50vh"}>
-          <Loader />
+          <Loader color={MainColor.yellow} />
         </Center>
       ) : (
-        <Stack px={"sm"} spacing={40}>
+        <Stack py={"md"} spacing={40}>
           <Stack align="center">
             {images ? (
               <Image alt="" src={images} mah={500} maw={200} />
@@ -121,11 +116,13 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
             >
               {(props) => (
                 <Button
-                  compact
                   {...props}
                   radius={"xl"}
-                  variant="outline"
-                  w={150}
+                  w={100}
+                  style={{
+                    backgroundColor: MainColor.yellow,
+                    border: `1px solid ${AccentColor.yellow}`,
+                  }}
                 >
                   <IconCamera />
                 </Button>
@@ -133,8 +130,21 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
             </FileButton>
           </Stack>
 
-          <Stack spacing={"lg"}>
+          <Stack
+            spacing={"lg"}
+            p={"md"}
+            style={{
+              backgroundColor: MainColor.darkblue,
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "5px 5px 5px 5px",
+            }}
+          >
             <TextInput
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
               withAsterisk
               label="Judul"
               placeholder="Masukan judul lowongan kerja"
@@ -149,7 +159,7 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
             />
 
             <Stack spacing={3}>
-              <Text fz={"sm"}>
+              <Text fz={"sm"} c={"white"}>
                 Syarat & Ketentuan
                 <Text inherit span c={"red"}>
                   {" "}
@@ -158,6 +168,9 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
               </Text>
               <Stack spacing={5}>
                 <ReactQuill
+                  style={{
+                    backgroundColor: "white",
+                  }}
                   modules={{
                     toolbar: [
                       [{ header: [1, 2, 3, 4, 5, 6, false] }],
@@ -183,7 +196,7 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
               </Stack>
             </Stack>
             <Stack spacing={3}>
-              <Text fz={"sm"}>
+              <Text fz={"sm"} c={"white"}>
                 Deskripsi
                 <Text inherit span c={"red"}>
                   {" "}
@@ -192,6 +205,9 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
               </Text>
               <Stack spacing={5}>
                 <ReactQuill
+                  style={{
+                    backgroundColor: "white",
+                  }}
                   modules={{
                     toolbar: [
                       [{ header: [1, 2, 3, 4, 5, 6, false] }],
@@ -253,9 +269,22 @@ function ButtonAction({ value, file }: { value: MODEL_JOB; file: FormData }) {
 
   return (
     <>
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+      <Modal
+        opened={opened}
+        onClose={close}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
         <Stack>
-          <Title order={6}>Anda yakin menyimpan data ini ?</Title>
+          <Title order={6} c={"white"}>
+            Anda yakin menyimpan data ini ?
+          </Title>
           <Group position="center">
             <Button radius={"xl"} onClick={() => close()}>
               Batal
@@ -287,10 +316,10 @@ function ButtonAction({ value, file }: { value: MODEL_JOB; file: FormData }) {
             ? true
             : false
         }
+        // bg={"teal"}
         color="teal"
         radius={"xl"}
-        mt={"lg"}
-        mb={70}
+        my={"lg"}
         onClick={() => {
           open();
           scrollTo({ y: 0 });

src/app_modules/job/fun/get/get_all_arsip.ts

@@ -3,13 +3,23 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export async function Job_getListAllArsipById() {
+export async function job_getAllArsipById({page}: {page: number}) {
+  
   const authorId = await user_getOneUserId();
 
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
   const get = await prisma.job.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
     where: {
       authorId: authorId,
       isArsip: true,
+      isActive: true,
     },
   });
 

src/app_modules/job/fun/get/get_all_publish.ts

@@ -0,0 +1,45 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function job_getAllListPublish({
+  page,
+  search,
+}: {
+  page: any;
+  search?: string;
+}) {
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.job.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      masterStatusId: "1",
+      isActive: true,
+      isArsip: false,
+      title: {
+        mode: "insensitive",
+        contains: search,
+      },
+    },
+    select: {
+      id: true,
+      title: true,
+      Author: {
+        select: {
+          id: true,
+          username: true,
+          Profile: true,
+        },
+      },
+    },
+  });
+
+  return data;
+}

src/app_modules/job/fun/get/get_list_status_by_status_id.ts

@@ -1,68 +0,0 @@
-"use server";
-
-import prisma from "@/app/lib/prisma";
-import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
-
-export async function Job_getListStatusByStatusId(statusId: string) {
-  const authorId = await user_getOneUserId();
-  if (statusId === "1") {
-    const data = await prisma.job.findMany({
-      orderBy: {
-        updatedAt: "desc",
-      },
-      where: {
-        masterStatusId: "1",
-        authorId: authorId,
-        isActive: true,
-        isArsip: false
-      },
-    });
-
-    return data;
-  }
-
-  if (statusId === "2") {
-    const data = await prisma.job.findMany({
-      orderBy: {
-        updatedAt: "desc",
-      },
-      where: {
-        masterStatusId: "2",
-        authorId: authorId,
-        isActive: true,
-      },
-    });
-
-    return data;
-  }
-
-  if (statusId === "3") {
-    const data = await prisma.job.findMany({
-      orderBy: {
-        updatedAt: "desc",
-      },
-      where: {
-        masterStatusId: "3",
-        authorId: authorId,
-        isActive: true,
-      },
-    });
-
-    return data;
-  }
-
-  if (statusId === "4") {
-    const data = await prisma.job.findMany({
-      orderBy: {
-        updatedAt: "desc",
-      },
-      where: {
-        masterStatusId: "4",
-        authorId: authorId,
-        isActive: true,
-      },
-    });
-
-    return data;
-  }
-}

src/app_modules/job/fun/get/get_one_by_id.ts

@@ -2,7 +2,7 @@
 
 import prisma from "@/app/lib/prisma";
 
-export async function Job_getOneById(jobId: any) {
+export async function job_getOneById(jobId: any) {
   const get = await prisma.job.findFirst({
     where: {
       id: jobId,

src/app_modules/job/fun/get/status/get_list_draft.ts

@@ -0,0 +1,29 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export default async function job_getAllStatusDraft({
+  page,
+}: {
+  page: number;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const authorId = await user_getOneUserId();
+  const data = await prisma.job.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      masterStatusId: "3",
+      authorId: authorId,
+      isActive: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/job/fun/get/status/get_list_publish.ts

@@ -3,25 +3,27 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export async function Job_getAllListPublish() {
+export default async function job_getAllStatusPublish({
+  page,
+}: {
+  page: number;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const authorId = await user_getOneUserId();
   const data = await prisma.job.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       updatedAt: "desc",
     },
     where: {
       masterStatusId: "1",
+      authorId: authorId,
       isActive: true,
       isArsip: false,
     },
-    select: {
-        id: true,
-        title: true,
-        Author: {
-            select: {
-                Profile: true
-            }
-        }
-    }
   });
 
   return data;

src/app_modules/job/fun/get/status/get_list_reject.ts

@@ -0,0 +1,29 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export default async function job_getAllStatusReject({
+  page,
+}: {
+  page: number;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const authorId = await user_getOneUserId();
+  const data = await prisma.job.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      masterStatusId: "4",
+      authorId: authorId,
+      isActive: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/job/fun/get/status/get_list_review.ts

@@ -3,15 +3,24 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export default async function job_getListReject({}: {}) {
-  const userId = await user_getOneUserId();
+export default async function job_getAllStatusReview({
+  page,
+}: {
+  page: number;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const authorId = await user_getOneUserId();
   const data = await prisma.job.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       updatedAt: "desc",
     },
     where: {
       masterStatusId: "2",
-      authorId: userId,
+      authorId: authorId,
       isActive: true,
     },
   });

src/app_modules/job/index.ts

@@ -1,8 +1,8 @@
-import Job_Beranda from "./main/beranda";
+import Job_ViewBeranda from "./main/beranda/view_beranda";
 import LayoutJob_Main from "./main/layout";
-import Job_Splash from "./splash/view";
-import Job_Status from "./main/status/view";
-import Job_Arsip from "./main/arsip";
+import Job_ViewSplash from "./splash/view_splash";
+import Job_ViewStatus from "./main/status/view_status";
+import Job_ViewArsip from "./main/arsip/view_arsip";
 import Job_Create from "./create/view";
 import LayoutJob_Create from "./create/layout";
 import Job_DetailPublish from "./detail/publish/view";
@@ -23,11 +23,11 @@ import Job_Edit from "./edit/view";
 import LayoutJob_Edit from "./edit/layout";
 
 export {
-  Job_Beranda,
+  Job_ViewBeranda,
   LayoutJob_Main,
-  Job_Splash,
-  Job_Status,
-  Job_Arsip,
+  Job_ViewSplash,
+  Job_ViewStatus as Job_Status,
+  Job_ViewArsip as Job_Arsip,
   Job_Create,
   LayoutJob_Create,
   Job_DetailPublish,

src/app_modules/job/main/arsip.tsx

@@ -1,16 +0,0 @@
-"use client";
-
-import ComponentJob_CardViewStatus from "../component/card_view_status";
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import { MODEL_JOB } from "../model/interface";
-
-export default function Job_Arsip({ dataJob }: { dataJob: MODEL_JOB[] }) {
-  return (
-    <>
-      <ComponentJob_CardViewStatus
-        listData={dataJob}
-        path={RouterJob.detail_arsip}
-      />
-    </>
-  );
-}

src/app_modules/job/main/arsip/ui_arsip.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { useState } from "react"
+import { MODEL_JOB } from "../../model/interface"
+import _ from "lodash";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import { Box, Center, Loader } from "@mantine/core";
+import { ScrollOnly } from "next-scroll-loader";
+import ComponentJob_CardStatus from "../../component/card/card_view";
+import job_getAllStatusPublish from "../../fun/get/status/get_list_publish";
+import { job_getAllArsipById } from "../../fun/get/get_all_arsip";
+
+export function Job_UI_Arsip({listData}: {listData: MODEL_JOB[]}){
+    const [data, setData] = useState(listData)
+    const [activePage, setActivePage] = useState(1);
+
+    return (
+      <>
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData />
+        ) : (
+          // --- Main component --- //
+          <Box >
+            <ScrollOnly
+              height="85vh"
+              renderLoading={() => (
+                <Center mt={"lg"}>
+                  <Loader color={"yellow"} />
+                </Center>
+              )}
+              data={data}
+              setData={setData}
+              moreData={async () => {
+                const loadData = await job_getAllArsipById({
+                  page: activePage + 1,
+                });
+
+                setActivePage((val) => val + 1);
+
+                return loadData;
+              }}
+            >
+              {(item) => (
+                <ComponentJob_CardStatus
+                  data={item}
+                  path={RouterJob.detail_arsip}
+                />
+              )}
+            </ScrollOnly>
+          </Box>
+        )}
+      </>
+    );
+}

src/app_modules/job/main/arsip/view_arsip.tsx

@@ -0,0 +1,11 @@
+import { Box } from "@mantine/core";
+import { MODEL_JOB } from "../../model/interface";
+import { Job_UI_Arsip } from "./ui_arsip";
+
+export default function Job_ViewArsip({ dataJob }: { dataJob: MODEL_JOB[] }) {
+  return (
+    <>
+      <Job_UI_Arsip listData={dataJob} />;
+    </>
+  );
+}

src/app_modules/job/main/beranda.tsx

@@ -1,120 +0,0 @@
-"use client";
-
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
-import {
-  ActionIcon,
-  Affix,
-  Card,
-  Center,
-  Grid,
-  Image,
-  Loader,
-  Overlay,
-  Stack,
-  Text,
-  Title,
-  rem,
-} from "@mantine/core";
-import { IconCirclePlus, IconPencilPlus } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import { MODEL_JOB } from "../model/interface";
-import ComponentJob_DetailData from "../component/detail/detail_data";
-import ComponentJob_CardViewStatus from "../component/card_view_status";
-import _ from "lodash";
-import ComponentJob_IsEmptyData from "../component/is_empty_data";
-import { useState } from "react";
-import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/component_global/loading_card";
-import { Job_getAllListPublish } from "../fun/get/get_list_all_publish";
-
-export default function Job_Beranda({ listJob }: { listJob: MODEL_JOB[] }) {
-  const router = useRouter();
-
-  const [data, setData] = useState(listJob);
-  const [isLoading, setLoading] = useState(false);
-  const [scroll, scrollTo] = useWindowScroll();
-  const [visible, setVisible] = useState(false);
-  const [jobId, setJobId] = useState("");
-
-  useShallowEffect(() => {
-    onLoad({
-      setData(val) {
-        setData(val);
-      },
-    });
-  }, [setData]);
-
-  async function onLoad({ setData }: { setData: (val: any) => void }) {
-    const loadData = await Job_getAllListPublish();
-    setData(loadData);
-  }
-
-  return (
-    <>
-      <Affix position={{ bottom: rem(150), right: rem(30) }}>
-        <ActionIcon
-          loading={isLoading ? true : false}
-          opacity={scroll.y > 0 ? 0.5 : ""}
-          style={{
-            transition: "0.5s",
-          }}
-          size={"xl"}
-          radius={"xl"}
-          variant="transparent"
-          bg={"blue"}
-          onClick={() => {
-            setLoading(true);
-            router.push(RouterJob.create);
-          }}
-        >
-          <IconPencilPlus color="white" />
-        </ActionIcon>
-      </Affix>
-
-      {_.isEmpty(data) ? (
-        <ComponentJob_IsEmptyData text="Data tidak ada" />
-      ) : (
-        <Stack>
-          {data.map((e, i) => (
-            <Card key={i} shadow="lg" withBorder p={30} radius={"md"}>
-              <Card.Section style={{ zIndex: 99 }}>
-                <ComponentGlobal_AuthorNameOnHeader
-                  authorName={e.Author.Profile.name}
-                  imagesId={e.Author.Profile.imagesId}
-                  profileId={e.Author.Profile.id}
-                  isPembatas={true}
-                />
-              </Card.Section>
-              <Card.Section
-                onClick={() => {
-                  visible ? "" : setJobId(e.id),
-                    setVisible(true),
-                    router.push(RouterJob.main_detail + e.id);
-                }}
-                mt={"lg"}
-              >
-                <Grid>
-                  <Grid.Col span={"auto"}>
-                    <Center h={"100%"}>
-                      <Text fw={"bold"} fz={"xl"} lineClamp={1}>
-                        {e.title}
-                      </Text>
-                    </Center>
-                  </Grid.Col>
-                </Grid>
-              </Card.Section>
-              {visible && e.id === jobId ? (
-                <ComponentGlobal_CardLoadingOverlay />
-              ) : (
-                ""
-              )}
-            </Card>
-          ))}
-        </Stack>
-      )}
-    </>
-  );
-}

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

@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+import { MODEL_JOB } from "../../model/interface";
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import { Stack, TextInput, Center, Loader } from "@mantine/core";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import ComponentJob_BerandaCardView from "../../component/beranda/card_view";
+import { job_getAllListPublish } from "../../fun/get/get_all_publish";
+import ComponentJob_CreateButton from "../../component/button/create_button";
+
+export function Job_UiBeranda({ listData }: { listData: MODEL_JOB[] }) {
+  const [data, setData] = useState(listData);
+  const [activePage, setActivePage] = useState(1);
+  const [isSearch, setIsSearch] = useState("");
+
+  async function onSearch(text: string) {
+    setIsSearch(text);
+    const loadData = await job_getAllListPublish({
+      page: activePage,
+      search: text,
+    });
+    setData(loadData as any);
+    setActivePage(1);
+  }
+
+  return (
+    <>
+      <Stack my={1} spacing={30}>
+        <ComponentJob_CreateButton />
+
+        <TextInput
+          style={{
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          }}
+          radius={"xl"}
+          placeholder="Pekerjaan apa yang anda cari ?"
+          onChange={(val) => {
+            onSearch(val.currentTarget.value);
+          }}
+        />
+
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData />
+        ) : (
+          // --- Main component --- //
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await job_getAllListPublish({
+                page: activePage + 1,
+                search: isSearch,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => <ComponentJob_BerandaCardView data={item} />}
+          </ScrollOnly>
+        )}
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,10 @@
+import { MODEL_JOB } from "../../model/interface";
+import { Job_UiBeranda } from "./ui_beranda";
+
+export default function Job_ViewBeranda({ listJob }: { listJob: MODEL_JOB[] }) {
+  return (
+    <>
+      <Job_UiBeranda listData={listJob} />
+    </>
+  );
+}

src/app_modules/job/main/layout.tsx

@@ -1,24 +1,17 @@
 "use client";
 
-import {
-  ActionIcon,
-  AppShell,
-  Center,
-  Footer,
-  Grid,
-  Loader,
-  Stack,
-  Text,
-} from "@mantine/core";
-import React, { useState } from "react";
-import ComponentJob_HeaderTamplate from "../component/header_tamplate";
-import { IconHistory, IconHome, IconReservedLine } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { MainColor } from "@/app_modules/component_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+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 { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutJob_Main({
   children,
@@ -53,57 +46,79 @@ export default function LayoutJob_Main({
 
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
         header={
-          <ComponentJob_HeaderTamplate
-            title="Job Vacancy"
-            route={RouterHome.main_home}
+          <ComponentGlobal_UI_HeaderTamplate
+            title="JOB"
+            routerLeft={RouterHome.main_home}
           />
         }
         footer={
-          <Footer height={"10vh"} bg={"dark"}>
-            <Stack justify="center" h={"100%"}>
-              <Grid>
-                {listFooter.map((e) => (
-                  <Grid.Col
-                    key={e.id}
-                    span={"auto"}
-                    pt={"md"}
-                    onClick={() => {
-                      // setLoading(true);
-                      // setTimeout(() => router.replace(e.path), 3000);
-                      router.replace(e.path);
-                      setHotMenuId(e.id);
-                      // setTimeout(() => setLoading(false), 1000);
-                    }}
-                  >
-                    <Center>
-                      <Stack align="center" spacing={0}>
-                        <ActionIcon
-                          variant="transparent"
-                          c={hotMenuId === e.id ? "blue" : "white"}
-                        >
-                          {e.icon}
-                          {/* {isLoading && hotMenuId === e.id ? (
-                            <Loader />
-                          ) : (
-                            e.icon
-                          )} */}
-                        </ActionIcon>
-                        <Text fz={10} c={hotMenuId === e.id ? "blue" : "white"}>
-                          {e.name}
-                        </Text>
-                      </Stack>
-                    </Center>
-                  </Grid.Col>
-                ))}
-              </Grid>
-            </Stack>
-          </Footer>
+          <SimpleGrid cols={3} h={"10vh"} mx={"xs"}>
+            {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>
+          // <Stack justify="center" h={"100%"}>
+          //   <Grid>
+          //     {listFooter.map((e) => (
+          //       <Grid.Col
+          //         key={e.id}
+          //         span={"auto"}
+          //         pt={"md"}
+          //         onClick={() => {
+          //           // setLoading(true);
+          //           // setTimeout(() => router.replace(e.path), 3000);
+          //           router.replace(e.path);
+          //           setHotMenuId(e.id);
+          //           // setTimeout(() => setLoading(false), 1000);
+          //         }}
+          //       >
+          //         <Center>
+          //           <Stack align="center" spacing={0}>
+          //             <ActionIcon
+          //               radius={"xl"}
+          //               variant="transparent"
+          //               c={hotMenuId === e.id ? MainColor.yellow : "white"}
+          //             >
+          //               {e.icon}
+          //             </ActionIcon>
+          //             <Text
+          //               fz={10}
+          //               c={hotMenuId === e.id ? MainColor.yellow : "white"}
+          //             >
+          //               {e.name}
+          //             </Text>
+          //           </Stack>
+          //         </Center>
+          //       </Grid.Col>
+          //     ))}
+          //   </Grid>
+          // </Stack>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/main/status/draft.tsx

@@ -1,17 +1,53 @@
 "use client";
 
-import { Stack, Card, Grid, Image, Text } from "@mantine/core";
-import ComponentJob_CardViewStatus from "../../component/card_view_status";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import ComponentJob_CardPreview from "../../component/card_preview";
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import { Center, Loader } from "@mantine/core";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import ComponentJob_CardStatus from "../../component/card/card_view";
+import job_getAllStatusDraft from "../../fun/get/status/get_list_draft";
 
 export default function Job_Draft({ listDraft }: { listDraft: any }) {
+  const [data, setData] = useState(listDraft);
+  const [activePage, setActivePage] = useState(1);
+
   return (
     <>
-      <ComponentJob_CardViewStatus
-        listData={listDraft}
-        path={RouterJob.detail_draft}
-      />
+      <>
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData />
+        ) : (
+          // --- Main component --- //
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await job_getAllStatusDraft({
+                page: activePage + 1,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentJob_CardStatus
+                data={item}
+                path={RouterJob.detail_draft}
+              />
+            )}
+          </ScrollOnly>
+        )}
+      </>
     </>
   );
 }

src/app_modules/job/main/status/publish.tsx

@@ -1,19 +1,51 @@
 "use client";
 
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
-import { Stack, Card, Grid, Image, Text } from "@mantine/core";
-import ComponentJob_CardViewStatus from "../../component/card_view_status";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import ComponentJob_CardPreview from "../../component/card_preview";
-import { Job_getListStatusByStatusId } from "../../fun/get/get_list_status_by_status_id";
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import { Center, Loader } from "@mantine/core";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import ComponentJob_CardStatus from "../../component/card/card_view";
+import job_getAllStatusPublish from "../../fun/get/status/get_list_publish";
 
 export default function Job_Publish({ listPublish }: { listPublish: any }) {
+  const [data, setData] = useState(listPublish);
+  const [activePage, setActivePage] = useState(1);
+
   return (
     <>
-      <ComponentJob_CardViewStatus
-        listData={listPublish}
-        path={RouterJob.detail_publish}
-      />
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        // --- Main component --- //
+        <ScrollOnly
+          height="75vh"
+          renderLoading={() => (
+            <Center mt={"lg"}>
+              <Loader color={"yellow"} />
+            </Center>
+          )}
+          data={data}
+          setData={setData}
+          moreData={async () => {
+            const loadData = await job_getAllStatusPublish({
+              page: activePage + 1,
+            });
+
+            setActivePage((val) => val + 1);
+
+            return loadData;
+          }}
+        >
+          {(item) => (
+            <ComponentJob_CardStatus
+              data={item}
+              path={RouterJob.detail_publish}
+            />
+          )}
+        </ScrollOnly>
+      )}
     </>
   );
 }

src/app_modules/job/main/status/reject.tsx

@@ -1,14 +1,51 @@
 "use client";
 
-import { Stack, Card, Grid, Image, Text } from "@mantine/core";
-import ComponentJob_CardViewStatus from "../../component/card_view_status";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import { MODEL_JOB } from "../../model/interface";
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import { Center, Loader } from "@mantine/core";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import ComponentJob_CardStatus from "../../component/card/card_view";
+import job_getAllStatusReject from "../../fun/get/status/get_list_reject";
+
+export default function Job_Reject({ listReject }: { listReject: any[] }) {
+  const [data, setData] = useState(listReject);
+  const [activePage, setActivePage] = useState(1);
 
-export default function Job_Reject({ listReject }: { listReject : MODEL_JOB[]}) {
   return (
     <>
-      <ComponentJob_CardViewStatus listData={listReject} path={RouterJob.detail_reject} />
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        // --- Main component --- //
+        <ScrollOnly
+          height="75vh"
+          renderLoading={() => (
+            <Center mt={"lg"}>
+              <Loader color={"yellow"} />
+            </Center>
+          )}
+          data={data}
+          setData={setData}
+          moreData={async () => {
+            const loadData = await job_getAllStatusReject({
+              page: activePage + 1,
+            });
+
+            setActivePage((val) => val + 1);
+
+            return loadData;
+          }}
+        >
+          {(item) => (
+            <ComponentJob_CardStatus
+              data={item}
+              path={RouterJob.detail_reject}
+            />
+          )}
+        </ScrollOnly>
+      )}
     </>
   );
 }

src/app_modules/job/main/status/review.tsx

@@ -1,17 +1,51 @@
 "use client";
 
-import { Stack, Card, Grid, Image, Text } from "@mantine/core";
-import ComponentJob_CardViewStatus from "../../component/card_view_status";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import { Center, Loader } from "@mantine/core";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import ComponentJob_CardStatus from "../../component/card/card_view";
+import job_getAllStatusReview from "../../fun/get/status/get_list_review";
 
-export default function Job_Review({ listReview }: { listReview : any[]}) {
+export default function Job_Review({ listReview }: { listReview: any[] }) {
+  const [data, setData] = useState(listReview);
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      <ComponentJob_CardViewStatus
-        listData={listReview}
-        path={RouterJob.detail_review}
-      />
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        // --- Main component --- //
+        <ScrollOnly
+          height="75vh"
+          renderLoading={() => (
+            <Center mt={"lg"}>
+              <Loader color={"yellow"} />
+            </Center>
+          )}
+          data={data}
+          setData={setData}
+          moreData={async () => {
+            const loadData = await job_getAllStatusReview({
+              page: activePage + 1,
+            });
+
+            setActivePage((val) => val + 1);
+
+            return loadData;
+          }}
+        >
+          {(item) => (
+            <ComponentJob_CardStatus
+              data={item}
+              path={RouterJob.detail_review}
+            />
+          )}
+        </ScrollOnly>
+      )}
     </>
   );
 }

src/app_modules/job/main/status/ui_status.tsx

@@ -1,16 +1,18 @@
 "use client";
 
-import { Stack, Tabs } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import Job_Publish from "./publish";
-import Job_Review from "./review";
-import Job_Draft from "./draft";
-import Job_Reject from "./reject";
+import { Tabs, Stack } from "@mantine/core";
 import { useAtom } from "jotai";
 import { gs_job_status } from "../../global_state";
+import Job_Draft from "./draft";
+import Job_Publish from "./publish";
+import Job_Reject from "./reject";
+import Job_Review from "./review";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 
-export default function Job_Status({
+export default function Job_UiStatus({
   listPublish,
   listReview,
   listDraft,
@@ -21,7 +23,6 @@ export default function Job_Status({
   listDraft: any[];
   listReject: any[];
 }) {
-  const router = useRouter();
   const [tabsStatus, setTabsStatus] = useAtom(gs_job_status);
   const listTabs = [
     {
@@ -41,36 +42,50 @@ export default function Job_Status({
     },
     {
       id: 4,
-      path: <Job_Reject listReject={listReject}/>,
+      path: <Job_Reject listReject={listReject} />,
       value: "Reject",
     },
   ];
   return (
     <>
       <Tabs
-        color="blue"
+        mt={1}
+        color="yellow"
         variant="pills"
         radius={"xl"}
         defaultValue={"Publish"}
         value={tabsStatus}
         onTabChange={setTabsStatus}
+        styles={{
+          tabsList: {
+            backgroundColor: MainColor.darkblue,
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          },
+          panel: {
+            paddingTop: 10
+          }
+          
+        }}
       >
         <Stack>
           <Tabs.List grow>
             {listTabs.map((e) => (
               <Tabs.Tab
-                sx={
-                  tabsStatus === e.value
-                    ? {
-                        boxShadow:
-                          "0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.2)",
-                      }
-                    : {}
-                }
                 key={e.id}
                 value={e.value}
-                bg={tabsStatus === e.value ? "blue" : "gray.1"}
-                fw={tabsStatus === e.value ? "bold" : "normal"}
+                fw={"bold"}
+                color={tabsStatus === e.value ? "black" : "white"}
+                style={{
+                  transition: "0.5s",
+                  backgroundColor:
+                    tabsStatus === e.value ? MainColor.yellow : "white",
+                  border:
+                    tabsStatus === e.value
+                      ? `1px solid ${AccentColor.yellow}`
+                      : `1px solid white`,
+                }}
               >
                 {e.value}
               </Tabs.Tab>

src/app_modules/job/main/status/view_status.tsx

@@ -0,0 +1,24 @@
+import Job_UiStatus from "./ui_status";
+
+export default function Job_ViewStatus({
+  listPublish,
+  listReview,
+  listDraft,
+  listReject,
+}: {
+  listPublish: any[];
+  listReview: any[];
+  listDraft: any[];
+  listReject: any[];
+}) {
+  return (
+    <>
+      <Job_UiStatus
+        listPublish={listPublish}
+        listDraft={listDraft}
+        listReject={listReject}
+        listReview={listReview}
+      />
+    </>
+  );
+}

src/app_modules/job/non_user_view/layout.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import { AppShell, Center } from "@mantine/core";
 import React from "react";
 import ComponentJob_HeaderTamplate from "../component/header_tamplate";
 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 LayoutJob_NonUserView({
   children,
@@ -12,16 +14,11 @@ export default function LayoutJob_NonUserView({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={
-          <ComponentJob_HeaderTamplate
-            hideBack={true}
-            title="JOB VACANCY HIMPI BADUNG"
-          />
-        }
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Job Vacancy" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/non_user_view/view.tsx

@@ -5,13 +5,23 @@ import ComponentJob_DetailData from "../component/detail/detail_data";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { data } from "autoprefixer";
 import { MODEL_JOB } from "../model/interface";
+import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
 
 export default function Job_NonUserView({ data }: { data: MODEL_JOB }) {
   return (
     <>
-      <Center>
-        <Card shadow="lg" withBorder p={30} w={{ base: 400 }}>
-          <Card.Section px={"xs"} pb={"lg"}>
+      <Center my={"md"} >
+        <Card
+          shadow="lg"
+          withBorder
+          p={"xl"}
+          // w={{ base: 400 }}
+          style={{
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          }}
+        >
+          <Card.Section px={"xs"} pb={"lg"} c={"white"}>
             <Stack spacing={"xl"}>
               {data.imagesId ? (
                 <Stack align="center">

src/app_modules/job/splash/ui_splash.tsx

@@ -1,33 +1,29 @@
 "use client";
 
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import { Center, Image, Paper, Stack, Text } from "@mantine/core";
+import ComponentGlobal_SplashScreen from "@/app_modules/component_global/splash/splash_global";
 import { useShallowEffect } from "@mantine/hooks";
+import { IconBriefcase } from "@tabler/icons-react";
 import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
-import { gs_job_hot_menu, gs_job_status } from "../global_state";
 
-export default function Job_Splash() {
+import { gs_job_hot_menu, gs_job_status } from "../global_state";
+import { useRouter } from "next/navigation";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+
+export function Job_UiSplash() {
   const router = useRouter();
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
   const [status, setStatus] = useAtom(gs_job_status);
-  
 
   useShallowEffect(() => {
     setTimeout(() => {
       setHotMenu(1);
-      setStatus("Publish")
+      setStatus("Publish");
       router.replace(RouterJob.beranda);
     }, 1000);
   }, []);
-
   return (
     <>
-      <Center h={"100vh"}>
-        <Paper p={{ base: 50, md: 60, lg: 80 }}>
-          <Image alt="logo" src={"/aset/job/logo.png"} />
-        </Paper>
-      </Center>
+      <ComponentGlobal_SplashScreen icon={<IconBriefcase size={300} />} />
     </>
   );
 }

src/app_modules/job/splash/view_splash.tsx

@@ -0,0 +1,9 @@
+import { Job_UiSplash } from "./ui_splash";
+
+export default function Job_ViewSplash() {
+  return (
+    <>
+      <Job_UiSplash />
+    </>
+  );
+}

src/app_modules/zCoba/index.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import {
+  ActionIcon,
+  Affix,
   BackgroundImage,
   Box,
   Button,
@@ -8,9 +10,12 @@ import {
   Group,
   LoadingOverlay,
   Paper,
+  ScrollArea,
+  SimpleGrid,
   Skeleton,
   Stack,
   Text,
+  rem,
 } from "@mantine/core";
 import { useState } from "react";
 
@@ -23,6 +28,10 @@ import { useShallowEffect } from "@mantine/hooks";
 import { ScrollOnly } from "next-scroll-loader";
 import _ from "lodash";
 import ComponentGlobal_V2_LoadingPage from "../component_global/loading_page_v2";
+import ComponentGlobal_UI_LayoutTamplate from "../component_global/ui/ui_layout_tamplate";
+import ComponentGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
+import { Icon123, IconPencilPlus, IconX } from "@tabler/icons-react";
+import { AccentColor, MainColor } from "../component_global/color/color_pallet";
 
 const newData = Array(20)
   .fill(0)
@@ -74,9 +83,9 @@ export default function Coba_TestLoading() {
 
   return (
     <>
-      <BackgroundImage src={"/aset/global/main_background.png"}>
-        <Box h={"100vh"}></Box>
-      </BackgroundImage>
+      <ComponentGlobal_UI_LayoutTamplate>
+        <CreateButton />
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 
@@ -93,6 +102,7 @@ export default function Coba_TestLoading() {
     </>
   );
 
+  // Clone data
   return (
     <>
       <Box mt={"lg"}>
@@ -122,3 +132,113 @@ export default function Coba_TestLoading() {
     </>
   );
 }
+
+function CreateButton() {
+  return (
+    <>
+      <ActionIcon
+        p={3}
+        variant="filled"
+        radius={"xl"}
+        size={"xl"}
+        style={{
+          position: "absolute",
+          zIndex: 1,
+          bottom: 150,
+          right: 30,
+        }}
+      >
+        <IconPencilPlus size={30} />
+      </ActionIcon>
+
+      {/* <Affix
+        bg={"blue"}
+        withinPortal
+        portalProps={{}}
+        position={{ bottom: rem(150), right: rem(30) }}
+      >
+        <ActionIcon
+          style={{
+            transition: "0.5s",
+            border: `1px solid ${AccentColor.skyblue}`,
+          }}
+          bg={AccentColor.blue}
+          size={"xl"}
+          radius={"xl"}
+          variant="transparent"
+          onClick={() => {}}
+        >
+          <IconPencilPlus color="white" />
+        </ActionIcon>
+      </Affix> */}
+    </>
+  );
+}
+
+function BackgroundImageComponent() {
+  const footer = (
+    <SimpleGrid cols={4}>
+      {Array.from({ length: 4 }).map((e, i) => (
+        <Center key={i} h={"10vh"}>
+          <Stack align="center" c={"white"} spacing={0}>
+            <ActionIcon>
+              <IconX color="white" />
+            </ActionIcon>
+            <Text>Apa</Text>
+          </Stack>
+        </Center>
+      ))}
+    </SimpleGrid>
+  );
+  return (
+    <>
+      <BackgroundImage src={"/aset/global/main_background.png"} h={"100vh"}>
+        {/* Header */}
+        <Box
+          h={"8vh"}
+          style={{
+            zIndex: 98,
+          }}
+          w={"100%"}
+          pos={"sticky"}
+          top={0}
+        >
+          <ComponentGlobal_UI_HeaderTamplate title="Coba" />
+        </Box>
+
+        {/* Children */}
+        <Box h={"82vh"} pos={"static"}>
+          <ScrollArea h={"100%"} px={"md"}>
+            {Array.from({ length: 10 }).map((e, i) => (
+              <Box bg={"blue"} key={i} mb={"md"} py={"lg"}>
+                {i + 1}
+              </Box>
+            ))}
+          </ScrollArea>
+        </Box>
+
+        {/* Footer */}
+        <Box style={{ position: "relative", bottom: 0 }} bg={"red"}>
+          <Box
+            style={{
+              zIndex: 1,
+              borderRadius: "20px 20px 0px 0px",
+              borderTop: `2px solid ${AccentColor.blue}`,
+              borderRight: `1px solid ${AccentColor.blue}`,
+              borderLeft: `1px solid ${AccentColor.blue}`,
+              position: "absolute",
+              width: "100%",
+              backgroundColor: MainColor.darkblue,
+            }}
+            color="blue"
+            // pos={"fixed"}
+            // bottom={0}
+            h={"10vh"}
+          >
+            {footer}
+          </Box>
+        </Box>
+      </BackgroundImage>
+    </>
+  );
+}