UI Job

# style
- UI Job di bagian user selesai

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

## No issue

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 />
+    </>
+  );
+}