#Job Vacancy

## feat
- Tampilan user
### No Issuue

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

@@ -0,0 +1,14 @@
+import { LayoutJob_Create } from "@/app_modules/job";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutJob_Create>{children}</LayoutJob_Create>
+    </>
+  );
+}

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

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

src/app/dev/job/detail/arsip/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutJob_DetailArsip } from "@/app_modules/job";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutJob_DetailArsip>{children}</LayoutJob_DetailArsip>
+    </>
+  );
+}

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

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

src/app/dev/job/detail/draft/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutJob_DetailDraft } from "@/app_modules/job";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutJob_DetailDraft>{children}</LayoutJob_DetailDraft>
+    </>
+  );
+}

src/app/dev/job/detail/draft/page.tsx

@@ -0,0 +1,10 @@
+import Job_DetailDraft from "@/app_modules/job/detail/draft/view";
+
+
+export default async function Page() {
+  return (
+    <>
+      <Job_DetailDraft />
+    </>
+  );
+}

src/app/dev/job/detail/main/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutJob_MainDetail } from "@/app_modules/job";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutJob_MainDetail>{children}</LayoutJob_MainDetail>
+    </>
+  );
+}

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

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

src/app/dev/job/detail/publish/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutJob_DetailPublish } from "@/app_modules/job";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutJob_DetailPublish>{children}</LayoutJob_DetailPublish>
+    </>
+  );
+}

src/app/dev/job/detail/publish/page.tsx

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

src/app/dev/job/detail/reject/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutJob_DetailReject } from "@/app_modules/job";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutJob_DetailReject>{children}</LayoutJob_DetailReject>
+    </>
+  );
+}

src/app/dev/job/detail/reject/page.tsx

@@ -0,0 +1,10 @@
+
+import Job_DetailReject from "@/app_modules/job/detail/reject/view";
+
+export default async function Page() {
+  return (
+    <>
+      <Job_DetailReject/>
+    </>
+  );
+}

src/app/dev/job/detail/review/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutJob_DetailReview } from "@/app_modules/job";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutJob_DetailReview>{children}</LayoutJob_DetailReview>
+    </>
+  );
+}

src/app/dev/job/detail/review/page.tsx

@@ -0,0 +1,9 @@
+import Job_DetailReview from "@/app_modules/job/detail/review/view";
+
+export default async function Page() {
+  return (
+    <>
+      <Job_DetailReview />
+    </>
+  );
+}

src/app/dev/job/edit/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutJob_Edit } from "@/app_modules/job";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutJob_Edit>{children}</LayoutJob_Edit>
+    </>
+  );
+}

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { LayoutJob_Main } from "@/app_modules/job";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutJob_Main>{children}</LayoutJob_Main>
+    </>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { Job_Status } from "@/app_modules/job";
+
+export default async function Page() {
+  return (
+    <>
+      <Job_Status
+        listDraft={[]}
+        listPublish={[]}
+        listReject={[]}
+        listReview={[]}
+      />
+    </>
+  );
+}

src/app/dev/job/non_user_view/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutJob_NonUserView } from "@/app_modules/job";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutJob_NonUserView>{children}</LayoutJob_NonUserView>
+    </>
+  );
+}

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

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

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

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

src/app/lib/router_hipmi/router_job.ts

@@ -0,0 +1,23 @@
+export const RouterJob = {
+  spalsh: "/dev/job/splash",
+
+  // main
+  beranda: "/dev/job/main/beranda",
+  status: "/dev/job/main/status",
+  arsip: "/dev/job/main/arsip",
+
+  // create & edit
+  create: "/dev/job/create",
+  edit: "/dev/job/edit",
+
+  // detail
+  main_detail: "/dev/job/detail/main",
+  detail_publish: "/dev/job/detail/publish",
+  detail_review: "/dev/job/detail/review",
+  detail_draft: "/dev/job/detail/draft",
+  detail_reject: "/dev/job/detail/reject",
+  detail_arsip: "/dev/job/detail/arsip",
+
+  // non user
+  non_user_view: "/dev/job/non_user_view",
+};

src/app_modules/home/layout.tsx

@@ -86,7 +86,7 @@ export default function HomeLayout({
                     ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
                   } else {
                     // router.push(RouterProfile.katalog + `${user.Profile.id}`);
-                    router.push(RouterUserSearch.main)
+                    router.push(RouterUserSearch.main);
                   }
                 }}
               >
@@ -111,7 +111,23 @@ export default function HomeLayout({
               >
                 <Stack align="center" spacing={2}>
                   <ActionIcon variant={"transparent"}>
-                    {user.Profile === null ? <IconUserCircle color="white" /> : <Avatar radius={"xl"} size={30} src={RouterProfile.api_foto_profile + `${user.Profile.imagesId}`}/>} 
+                    {user.Profile === null ? (
+                      <IconUserCircle color="white" />
+                    ) : (
+                      <Avatar
+                        radius={"xl"}
+                        size={30}
+                        sx={{
+                          borderStyle: "solid",
+                          borderWidth: "0.5px",
+                          borderColor: "white",
+                        }}
+                        src={
+                          RouterProfile.api_foto_profile +
+                          `${user.Profile.imagesId}`
+                        }
+                      />
+                    )}
                   </ActionIcon>
                   <Text fz={"xs"} c={"white"}>
                     Profile
@@ -122,7 +138,6 @@ export default function HomeLayout({
           </Footer>
         }
       >
-
         {children}
       </AppShell>
     </>

src/app_modules/home/view.tsx

@@ -34,6 +34,7 @@ import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
 import { MODEL_USER } from "./model/interface";
 import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 
 export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
   const router = useRouter();
@@ -62,7 +63,7 @@ export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
       id: 4,
       name: "Job Vacancy",
       icon: <IconBriefcase size={50} />,
-      link: "",
+      link: RouterJob.spalsh,
     },
 
     {

src/app_modules/job/component/card_view_status.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Stack, Card, Grid, Image, Text } from "@mantine/core";
+import _ from "lodash";
+import ComponentJob_IsEmptyData from "./is_empty_data";
+import { useRouter } from "next/navigation";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+
+export default function ComponentJob_CardViewStatus({
+  listData,
+  path,
+}: {
+  listData?: any[];
+  path?: any;
+}) {
+  const router = useRouter();
+  if (_.isEmpty(listData))
+    return (
+      <>
+        <ComponentJob_IsEmptyData text="Data tidak ada" />
+      </>
+    );
+
+  return (
+    <>
+      <Stack>
+        {listData?.map((e, i) => (
+          <Card
+            key={i}
+            shadow="lg"
+            withBorder
+            radius={"md"}
+            onClick={() => {
+              if (path === undefined) {
+                return ComponentGlobal_NotifikasiPeringatan(
+                  "Path tidak ditemukan"
+                );
+              } else {
+                router.push(path);
+              }
+            }}
+          >
+            <Card.Section>
+              <Grid>
+                <Grid.Col span={6}>
+                  <Image alt="foto" src={"/aset/no-file.png"} />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <Stack justify="center" h={"100%"}>
+                    <Text fw={"bold"} fz={20} truncate>
+                      Judul Lowongan Kerja
+                    </Text>
+                    <Text lineClamp={3}>
+                      Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                      Laboriosam est id neque iste voluptatem consequuntur
+                      veritatis dolorem illo et, repellat praesentium maiores
+                      amet omnis voluptas aliquid tenetur nam sint obcaecati.
+                    </Text>
+                  </Stack>
+                </Grid.Col>
+              </Grid>
+            </Card.Section>
+          </Card>
+        ))}
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,49 @@
+"use client"
+
+import { Card, Stack, Skeleton, Image, Text } from "@mantine/core";
+
+
+export default function ComponentJob_DetailData(){
+    return (
+      <>
+        <Card shadow="lg" withBorder p={30}>
+          <Card.Section px={"xs"} pb={"lg"}>
+            <Stack spacing={"xl"}>
+              <Stack align="center">
+                <Image alt="" src={"/aset/no-file.png"} mah={500} maw={200} />
+                <Text fz={20} fw={"bold"}>
+                  Judul Lowongan Kerja
+                </Text>
+              </Stack>
+
+              <Stack>
+                <Text fw={"bold"} fz={"xs"}>
+                  Syarat & Ketentuan :
+                </Text>
+                <Stack>
+                  {Array(5)
+                    .fill(0)
+                    .map((e, i) => (
+                      <Skeleton key={i} height={8} radius="xl" />
+                    ))}
+                </Stack>
+              </Stack>
+
+              <Stack>
+                <Text fw={"bold"} fz={"xs"}>
+                  Deskripsi
+                </Text>
+                <Stack>
+                  {Array(5)
+                    .fill(0)
+                    .map((e, i) => (
+                      <Skeleton key={i} height={8} radius="xl" />
+                    ))}
+                </Stack>
+              </Stack>
+            </Stack>
+          </Card.Section>
+        </Card>
+      </>
+    );
+}

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

@@ -0,0 +1,22 @@
+import { Center, Grid, Group, Paper, Text, Title } from "@mantine/core";
+
+export default function ComponentJob_NotedBox({
+  informasi,
+}: {
+  informasi: string;
+}) {
+  return (
+    <>
+      <Paper bg={"blue.3"} p={10}>
+        <Group>
+          <Text fz={10} fs={"italic"}>
+            <Text span inherit c={"red"}>
+              *{" "}
+            </Text>
+            {informasi}
+          </Text>
+        </Group>
+      </Paper>
+    </>
+  );
+}

src/app_modules/job/component/header_tamplate.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
+import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentJob_HeaderTamplate({
+  hideBack,
+  changeIconBack,
+  route,
+  route2,
+  title,
+  icon,
+  bg,
+}: {
+  hideBack?: boolean;
+  changeIconBack?: any;
+  route?: any;
+  route2?: any;
+  title: string;
+  icon?: any;
+  bg?: any;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Header
+        height={50}
+        sx={{ borderStyle: "none" }}
+        bg={bg === null ? "" : bg}
+      >
+        <Group h={50} position="apart" px={"md"}>
+          {hideBack ? (
+            <ActionIcon variant="transparent" disabled></ActionIcon>
+          ) : (
+            <ActionIcon
+              variant="transparent"
+              onClick={() => {
+                if (route === null || route === undefined) {
+                  return router.back();
+                } else {
+                  return router.push(route);
+                }
+              }}
+            >
+              {changeIconBack ? changeIconBack : <IconChevronLeft />}
+            </ActionIcon>
+          )}
+          <Title order={5}>{title}</Title>
+          {(() => {
+            if (route2 === null || route2 === undefined) {
+              return <ActionIcon disabled variant="transparent"></ActionIcon>;
+            } else {
+              return (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => router.push(route2)}
+                >
+                  {icon}
+                </ActionIcon>
+              );
+            }
+          })()}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/job/component/is_empty_data.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { Center } from "@mantine/core";
+
+export default function ComponentJob_IsEmptyData({ text }: { text: string }) {
+  return (
+    <>
+      <Center h={"50vh"} fz={"sm"} fw={"bold"}>
+        {text}
+      </Center>
+    </>
+  );
+}

src/app_modules/job/create/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentJob_HeaderTamplate from "../component/header_tamplate";
+
+export default function LayoutJob_Create({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentJob_HeaderTamplate title="Tambah Job" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/job/create/view.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import {
+  AspectRatio,
+  Box,
+  Button,
+  Center,
+  Flex,
+  Image,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { IconCamera } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { gs_job_hot_menu, gs_job_status } from "../global_state";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+
+export default function Job_Create() {
+  const [value, setValue] = useState<any>();
+  const [ambil, setAmbil] = useState<String[]>([]);
+
+  return (
+    <>
+      <Stack px={"sm"}>
+        <Stack align="center">
+          <Image alt="" src={"/aset/no-file.png"} mah={500} maw={200} />
+          <Button radius={"xl"} w={100}>
+            <IconCamera />
+          </Button>
+        </Stack>
+        {/* <Stack>
+          {ambil.map((v, k) => (
+            <Text key={k}> {v}</Text>
+          ))}
+        </Stack>
+        <Stack>
+          <TextInput
+            withAsterisk
+            label="Judul"
+            placeholder="Masukan judul lowongan"
+            onChange={(val) => {}}
+          />
+          <Textarea
+            minRows={5}
+            withAsterisk
+            label="Syarat dan Ketentuan"
+            placeholder={`Contoh ${"\n"}- Minimal lulusan SMA ${"\n"}- Pasif berbahasa inggris ${"\n"}- Dll,`}
+            onChange={(val) => {
+              const data = val.currentTarget.value.split("\n");
+              if (!_.isEmpty(data)) {
+                setAmbil(data);
+              }
+            }}
+          />
+          <Textarea
+          minRows={5}
+            withAsterisk
+            label="Deskripsi"
+            placeholder="Lokasi, Alamat Email, Nomor yang dapat dihubungi"
+            onChange={(val) => {}}
+          />
+        </Stack> */}
+
+
+
+
+        {/* <ButtonAction /> */}
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
+  const [status, setStatus] = useAtom(gs_job_status);
+
+  return (
+    <>
+      <Button
+        radius={"xl"}
+        mt={"lg"}
+        mb={70}
+        onClick={() => {
+          router.replace(RouterJob.status);
+          setHotMenu(2);
+          setStatus("Review");
+          ComponentGlobal_NotifikasiBerhasil("Tambah Lowongan Berhasil");
+        }}
+      >
+        Simpan
+      </Button>
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutJob_DetailArsip({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentJob_HeaderTamplate title="Detail Arsip" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,14 @@
+"use client";
+
+import { Stack } from "@mantine/core";
+import ComponentJob_DetailData from "../../component/detail/detail_data";
+
+export default function Job_DetailArsip() {
+  return (
+    <>
+      <Stack>
+        <ComponentJob_DetailData />
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
+import { IconEdit } from "@tabler/icons-react";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+
+export default function LayoutJob_DetailDraft({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={
+          <ComponentJob_HeaderTamplate
+            title="Detail Draft"
+            icon={<IconEdit />}
+            route2={RouterJob.edit}
+          />
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,92 @@
+"use client";
+
+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 { 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";
+
+export default function Job_DetailDraft() {
+  return (
+    <>
+      <Stack>
+        <ComponentJob_DetailData />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [status, setStatus] = useAtom(gs_job_status);
+  const [opened, { open, close }] = useDisclosure();
+
+  async function onAction() {
+    router.push(RouterJob.status);
+    setStatus("Review");
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Diajukan");
+  }
+
+  async function onDelete() {
+    router.push(RouterJob.status);
+    setStatus("Draft");
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Hapus Draft");
+  }
+
+  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>
+
+      <Group grow mb={50} >
+        <Button
+          radius={"xl"}
+          color="yellow"
+          onClick={() => {
+            onAction();
+          }}
+        >
+          Ajukan Review
+        </Button>
+        <Button
+          radius={"xl"}
+          color="red"
+          onClick={() => {
+            open();
+          }}
+        >
+          Hapus
+        </Button>
+      </Group>
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutJob_MainDetail({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentJob_HeaderTamplate title=" Detail Job" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,59 @@
+"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 { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { Stack, Button, Center } 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";
+
+export default function Job_MainDetail() {
+  return (
+    <>
+      <Stack>
+        <ComponentJob_DetailData />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [status, setStatus] = useAtom(gs_job_status);
+  const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
+
+  async function onAction() {
+    // router.push(RouterJob.arsip);
+    // setStatus("Publish");
+    // setHotMenu(3);
+    // ComponentGlobal_NotifikasiBerhasil("Berhasil Diarsipkan");
+  }
+
+  return (
+    <>
+      <Center>
+        <Button
+          radius={"xl"}
+          color="teal"
+          mb={30}
+          leftIcon={<IconBrandWhatsapp />}
+          onClick={() => {
+            onAction();
+          }}
+        >
+          <Link
+            style={{ textDecoration: "none", color: "white" }}
+            href={`whatsapp://send?text=Job Vacancy HIPMI BADUNG : http://localhost:3000/dev/job/non_user_view`}
+            // href={`https://t.me/share/url?url={${"http://localhost:3000/dev/job/non_user_view"}}&text={Lowongan Kerja Ini}`}
+          >
+            Bagikan ke WhatsApp
+          </Link>
+        </Button>
+      </Center>
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutJob_DetailPublish({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentJob_HeaderTamplate title="Detail Publish" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,46 @@
+"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 { 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";
+
+export default function Job_DetailPublish() {
+  return (
+    <>
+      <Stack>
+        <ComponentJob_DetailData />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [status, setStatus] = useAtom(gs_job_status);
+  const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu)
+  async function onAction() {
+    router.push(RouterJob.arsip);
+    setStatus("Publish");
+    setHotMenu(3)
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Diarsipkan");
+  }
+  return (
+    <>
+      <Button
+        radius={"xl"}
+        color="green"
+        mb={30}
+        onClick={() => {
+          onAction();
+        }}
+      >
+        Arsipkan
+      </Button>
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutJob_DetailReject({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentJob_HeaderTamplate title="Detail Reject" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,94 @@
+"use client";
+
+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 { 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";
+
+export default function Job_DetailReject() {
+  return (
+    <>
+      <Stack>
+        <ComponentJob_NotedBox informasi="Alasan reject"/>
+        <ComponentJob_DetailData />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [status, setStatus] = useAtom(gs_job_status);
+  const [opened, { open, close }] = useDisclosure();
+
+  async function onAction() {
+    router.push(RouterJob.status);
+    setStatus("Draft");
+    ComponentGlobal_NotifikasiBerhasil("Masuk Draft");
+  }
+
+  async function onDelete() {
+    router.push(RouterJob.status);
+    setStatus("Reject");
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Hapus Job");
+  }
+
+  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>
+
+      <Group grow mb={50}>
+        <Button
+          radius={"xl"}
+          color="orange"
+          onClick={() => {
+            onAction();
+          }}
+        >
+          Edit Kembali
+        </Button>
+        <Button
+          radius={"xl"}
+          color="red"
+          onClick={() => {
+            open();
+          }}
+        >
+          Hapus
+        </Button>
+      </Group>
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutJob_DetailReview({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentJob_HeaderTamplate title="Detail Review" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { Button, Card, Image, Skeleton, Stack, Text } from "@mantine/core";
+import ComponentJob_DetailData from "../../component/detail/detail_data";
+import { useRouter } from "next/navigation";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { useAtom } from "jotai";
+import { gs_job_status } from "../../global_state";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+
+export default function Job_DetailReview() {
+  return (
+    <>
+      <Stack>
+        <ComponentJob_DetailData />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [status, setStatus] = useAtom(gs_job_status);
+  async function onAction() {
+    router.push(RouterJob.status);
+    setStatus("Draft");
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Dibatalkan");
+  }
+  return (
+    <>
+      <Button
+        radius={"xl"}
+        color="red"
+        mb={50}
+        onClick={() => {
+          onAction();
+        }}
+      >
+        Batalkan Review
+      </Button>
+    </>
+  );
+}

src/app_modules/job/edit/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentJob_HeaderTamplate from "../component/header_tamplate";
+
+export default function LayoutJob_Edit({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentJob_HeaderTamplate title="Edit Job" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/job/edit/view.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { Button, Image, Stack, Text, TextInput, Textarea } from "@mantine/core";
+import { IconCamera } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { gs_job_hot_menu, gs_job_status } from "../global_state";
+
+export default function Job_Edit() {
+  const [value, setValue] = useState<any>();
+  const [ambil, setAmbil] = useState<String[]>([]);
+
+  return (
+    <>
+      <Stack px={"sm"}>
+        <Stack align="center">
+          <Image alt="" src={"/aset/no-file.png"} mah={500} maw={200} />
+          <Button radius={"xl"} w={100} color="teal">
+            <IconCamera />
+          </Button>
+        </Stack>
+        <Stack>
+          {ambil.map((v, k) => (
+            <Text key={k}> {v}</Text>
+          ))}
+        </Stack>
+        <Stack>
+          <TextInput
+            withAsterisk
+            label="Judul"
+            placeholder="Masukan judul lowongan"
+            onChange={(val) => {}}
+          />
+          <Textarea
+            minRows={5}
+            withAsterisk
+            label="Syarat dan Ketentuan"
+            placeholder={`Contoh ${"\n"}- Minimal lulusan SMA ${"\n"}- Pasif berbahasa inggris ${"\n"}- Dll,`}
+            onChange={(val) => {
+              const data = val.currentTarget.value.split("\n");
+              if (!_.isEmpty(data)) {
+                setAmbil(data);
+              }
+            }}
+          />
+          <Textarea
+            minRows={5}
+            withAsterisk
+            label="Deskripsi"
+            placeholder="Lokasi, Alamat Email, Nomor yang dapat dihubungi"
+            onChange={(val) => {}}
+          />
+        </Stack>
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
+  const [status, setStatus] = useAtom(gs_job_status);
+
+  return (
+    <>
+      <Button
+        color="teal"
+        radius={"xl"}
+        mt={"lg"}
+        mb={70}
+        onClick={() => {
+          router.replace(RouterJob.status);
+          setHotMenu(2);
+          setStatus("Review");
+          ComponentGlobal_NotifikasiBerhasil("Tambah Lowongan Berhasil");
+        }}
+      >
+        Update
+      </Button>
+    </>
+  );
+}

src/app_modules/job/global_state/index.ts

@@ -0,0 +1,9 @@
+import { atomWithStorage } from "jotai/utils";
+
+/**
+ * @param 1: Beranda, 2: Status, 3: Arsip
+ * @returns halaman pada layout
+ */
+export const gs_job_hot_menu = atomWithStorage("gs_jobs_hot_menu", 1);
+
+export const gs_job_status = atomWithStorage<any>("gs_job_status", "Publish");

src/app_modules/job/index.ts

@@ -0,0 +1,49 @@
+import Job_Beranda from "./main/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_Create from "./create/view";
+import LayoutJob_Create from "./create/layout";
+import Job_DetailPublish from "./detail/publish/view";
+import LayoutJob_DetailPublish from "./detail/publish/layout";
+import Job_Review from "./main/status/review";
+import LayoutJob_DetailReview from "./detail/review/layout";
+import Job_Draft from "./main/status/draft";
+import LayoutJob_DetailDraft from "./detail/draft/layout";
+import Job_Reject from "./main/status/reject";
+import LayoutJob_DetailReject from "./detail/reject/layout";
+import Job_MainDetail from "./detail/main/view";
+import LayoutJob_MainDetail from "./detail/main/layout";
+import Job_NonUserView from "./non_user_view/view";
+import LayoutJob_NonUserView from "./non_user_view/layout";
+import Job_DetailArsip from "./detail/arsip/view";
+import LayoutJob_DetailArsip from "./detail/arsip/layout";
+import Job_Edit from "./edit/view";
+import LayoutJob_Edit from "./edit/layout";
+
+export {
+  Job_Beranda,
+  LayoutJob_Main,
+  Job_Splash,
+  Job_Status,
+  Job_Arsip,
+  Job_Create,
+  LayoutJob_Create,
+  Job_DetailPublish,
+  LayoutJob_DetailPublish,
+  Job_Review,
+  LayoutJob_DetailReview,
+  Job_Draft,
+  LayoutJob_DetailDraft,
+  Job_Reject,
+  LayoutJob_DetailReject,
+  Job_MainDetail,
+  LayoutJob_MainDetail,
+  Job_NonUserView,
+  LayoutJob_NonUserView,
+  Job_DetailArsip,
+  LayoutJob_DetailArsip,
+  Job_Edit,
+  LayoutJob_Edit,
+};

src/app_modules/job/main/arsip.tsx

@@ -0,0 +1,17 @@
+"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";
+
+export default function Job_Arsip() {
+  return (
+    <>
+      <ComponentJob_CardViewStatus
+        listData={[{ id: 1 }, { id: 2 }]}
+        path={RouterJob.detail_arsip}
+      />
+    </>
+  );
+}

src/app_modules/job/main/beranda.tsx

@@ -0,0 +1,73 @@
+"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,
+  Grid,
+  Image,
+  Stack,
+  Text,
+  Title,
+  rem,
+} from "@mantine/core";
+import { IconCirclePlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function Job_Beranda() {
+  const router = useRouter();
+  return (
+    <>
+      <Affix position={{ bottom: rem(100), right: rem(30) }}>
+        <ActionIcon
+          size={"xl"}
+          radius={"xl"}
+          variant="transparent"
+          bg={"blue"}
+          onClick={() => {
+            router.push(RouterJob.create);
+          }}
+        >
+          <IconCirclePlus color="white" size={40} />
+        </ActionIcon>
+      </Affix>
+
+      <Stack>
+        {Array(5)
+          .fill(0)
+          .map((e, i) => (
+            <Card key={i} shadow="lg" withBorder p={30} radius={"md"}>
+              <Card.Section>
+                <ComponentGlobal_AuthorNameOnHeader />
+              </Card.Section>
+              <Card.Section onClick={() => router.push(RouterJob.main_detail)}>
+                <Grid>
+                  <Grid.Col span={6}>
+                    <Image alt="foto" src={"/aset/no-file.png"} />
+                  </Grid.Col>
+                  <Grid.Col span={6}>
+                    <Stack justify="center" h={"100%"}>
+                      <Text fw={"bold"} fz={20} truncate>
+                        Judul Lowongan Kerja
+                      </Text>
+                      <Text lineClamp={3}>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing
+                        elit. Laboriosam est id neque iste voluptatem
+                        consequuntur veritatis dolorem illo et, repellat
+                        praesentium maiores amet omnis voluptas aliquid tenetur
+                        nam sint obcaecati.
+                      </Text>
+                    </Stack>
+                  </Grid.Col>
+                </Grid>
+              </Card.Section>
+            </Card>
+          ))}
+      </Stack>
+    </>
+  );
+}

src/app_modules/job/main/layout.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import {
+  ActionIcon,
+  AppShell,
+  Center,
+  Footer,
+  Grid,
+  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 { useAtom } from "jotai";
+import { gs_job_hot_menu } from "../global_state";
+
+export default function LayoutJob_Main({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
+
+  const listFooter = [
+    {
+      id: 1,
+      name: "Beranda",
+      path: RouterJob.beranda,
+      icon: <IconHome />,
+    },
+
+    {
+      id: 2,
+      name: "Status",
+      path: RouterJob.status,
+      icon: <IconReservedLine />,
+    },
+    {
+      id: 3,
+      name: "Arsip",
+      path: RouterJob.arsip,
+      icon: <IconHistory />,
+    },
+  ];
+
+  return (
+    <>
+      <AppShell
+        header={<ComponentJob_HeaderTamplate title="Job Vacancy" />}
+        footer={
+          <Footer height={70} bg={"dark"}>
+            <Grid>
+              {listFooter.map((e) => (
+                <Grid.Col
+                  key={e.id}
+                  span={"auto"}
+                  pt={"md"}
+                  onClick={() => {
+                    router.replace(e.path);
+                    setHotMenu(e.id);
+
+                  }}
+                >
+                  <Center>
+                    <Stack align="center" spacing={0}>
+                      <ActionIcon
+                        variant="transparent"
+                        c={hotMenu === e.id ? "blue" : "white"}
+                      >
+                        {e.icon}
+                      </ActionIcon>
+                      <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
+                        {e.name}
+                      </Text>
+                    </Stack>
+                  </Center>
+                </Grid.Col>
+              ))}
+            </Grid>
+          </Footer>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,16 @@
+"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";
+
+export default function Job_Draft() {
+  return (
+    <>
+      <ComponentJob_CardViewStatus
+        listData={[{ id: 1 }, { id: 2 }]}
+        path={RouterJob.detail_draft}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,46 @@
+"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";
+
+export default function Job_Publish() {
+  return (
+    <>
+      <ComponentJob_CardViewStatus
+        listData={[{ id: 1 }, { id: 2 }]}
+        path={RouterJob.detail_publish}
+      />
+      {/* <Stack>
+        {Array(2)
+          .fill(0)
+          .map((e, i) => (
+            <Card key={i} shadow="lg" withBorder radius={"md"}>
+              <Card.Section>
+                <Grid>
+                  <Grid.Col span={6}>
+                    <Image alt="foto" src={"/aset/no-file.png"} />
+                  </Grid.Col>
+                  <Grid.Col span={6}>
+                    <Stack justify="center" h={"100%"}>
+                      <Text fw={"bold"} fz={20} truncate>
+                        Judul Lowongan Kerja
+                      </Text>
+                      <Text lineClamp={3}>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing
+                        elit. Laboriosam est id neque iste voluptatem
+                        consequuntur veritatis dolorem illo et, repellat
+                        praesentium maiores amet omnis voluptas aliquid tenetur
+                        nam sint obcaecati.
+                      </Text>
+                    </Stack>
+                  </Grid.Col>
+                </Grid>
+              </Card.Section>
+            </Card>
+          ))}
+      </Stack> */}
+    </>
+  );
+}

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

@@ -0,0 +1,16 @@
+"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";
+
+export default function Job_Reject() {
+  return (
+    <>
+      <ComponentJob_CardViewStatus
+        listData={[{ id: 1 }, { id: 2 }]}
+        path={RouterJob.detail_reject}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,16 @@
+"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";
+
+export default function Job_Review() {
+  return (
+    <>
+      <ComponentJob_CardViewStatus
+        listData={[{ id: 1 }, { id: 2 }]}
+        path={RouterJob.detail_review}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,80 @@
+"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 { useAtom } from "jotai";
+import { gs_job_status } from "../../global_state";
+
+export default function Job_Status({
+  listPublish,
+  listReview,
+  listDraft,
+  listReject,
+}: {
+  listPublish: any[];
+  listReview: any[];
+  listDraft: any[];
+  listReject: any[];
+}) {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_job_status);
+  const listTabs = [
+    {
+      id: 1,
+      path: <Job_Publish />,
+      value: "Publish",
+    },
+    {
+      id: 2,
+      path: <Job_Review />,
+      value: "Review",
+    },
+    {
+      id: 3,
+      path: <Job_Draft />,
+      value: "Draft",
+    },
+    {
+      id: 4,
+      path: <Job_Reject />,
+      value: "Reject",
+    },
+  ];
+  return (
+    <>
+      <Tabs
+        color="blue"
+        variant="pills"
+        radius={"xl"}
+        defaultValue={"Publish"}
+        value={tabsStatus}
+        onTabChange={setTabsStatus}
+      >
+        <Stack>
+          <Tabs.List grow>
+            {listTabs.map((e) => (
+              <Tabs.Tab
+                key={e.id}
+                value={e.value}
+                bg={tabsStatus === e.value ? "blue" : "gray.1"}
+                fw={tabsStatus === e.value ? "bold" : "normal"}
+              >
+                {e.value}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+          {listTabs.map((e) => (
+            <Tabs.Panel key={e.id} value={e.value}>
+              {e.path}
+            </Tabs.Panel>
+          ))}
+        </Stack>
+      </Tabs>
+    </>
+  );
+}

src/app_modules/job/non_user_view/layout.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentJob_HeaderTamplate from "../component/header_tamplate";
+
+export default function LayoutJob_NonUserView({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={
+          <ComponentJob_HeaderTamplate
+            hideBack={true}
+            title="JOB VACANCY HIMPI BADUNG"
+          />
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/job/non_user_view/view.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { Stack, Text } from "@mantine/core";
+import ComponentJob_DetailData from "../component/detail/detail_data";
+
+export default function Job_NonUserView() {
+  return (
+    <>
+      <Stack>
+        <ComponentJob_DetailData />
+        <Text></Text>
+      </Stack>
+    </>
+  );
+}

src/app_modules/job/splash/view.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { Center, Image, Paper, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_job_hot_menu } from "../global_state";
+
+export default function Job_Splash() {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
+
+  useShallowEffect(() => {
+    setTimeout(() => {
+      setHotMenu(1);
+      router.replace(RouterJob.beranda);
+    }, 2000);
+  }, []);
+
+  return (
+    <>
+      <Center h={"100vh"}>
+        <Paper>
+          <Image alt="logo" src={"/aset/job/logo.png"} />
+        </Paper>
+      </Center>
+    </>
+  );
+}

src/app_modules/user_search/fun/get/get_list_user.ts

@@ -4,7 +4,6 @@ import prisma from "@/app/lib/prisma";
 
 export async function UserSearch_getListUser() {
   const data = await prisma.user.findMany({
-  
     select: {
       id: true,
       username: true,

src/app_modules/user_search/main/index.tsx

@@ -40,6 +40,7 @@ export default function UserSearch_MainView({
   //     </Center>
   //   </>
   // );
+
   return (
     <>
       <Box>
@@ -54,49 +55,54 @@ export default function UserSearch_MainView({
             ""
           ) : (
             <Box>
-              {user?.map((e) => (
-                <Stack key={e.id} spacing={"xs"}>
-                  <Grid>
-                    <Grid.Col span={2}>
-                      <Center h={"100%"}>
-                        <Avatar
-                          radius={"xl"}
-                          size={"md"}
-                          src={
-                            RouterProfile.api_foto_profile +
-                            `${e?.Profile?.imagesId}`
-                          }
-                        />
-                      </Center>
-                    </Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Stack spacing={0}>
-                        <Text fw={"bold"} truncate>
-                          {e?.Profile?.name}
-                        </Text>
-                        <Text fz={"sm"} fs={"italic"}>
-                          +{e?.nomor}
-                        </Text>
-                      </Stack>
-                    </Grid.Col>
-                    <Grid.Col span={2}>
-                      <Center h={"100%"}>
-                        <ActionIcon
-                          variant="transparent"
-                          onClick={() =>
-                            router.push(
-                              RouterProfile.katalog + `${e?.Profile?.id}`
-                            )
-                          }
-                        >
-                          <IconChevronRight />
-                        </ActionIcon>
-                      </Center>
-                    </Grid.Col>
-                  </Grid>
-                  <Divider />
-                </Stack>
-              ))}
+              {user?.map((e) =>
+                e.Profile === null ? (
+                  ""
+                ) : (
+                  <Stack key={e.id} spacing={"xs"} mt={"xs"}>
+                    <Grid >
+                      <Grid.Col span={2}>
+                        <Center h={"100%"}>
+                          <Avatar
+                          sx={{borderStyle: "solid", borderWidth: "0.5px"}}
+                            radius={"xl"}
+                            size={"md"}
+                            src={
+                              RouterProfile.api_foto_profile +
+                              `${e?.Profile?.imagesId}`
+                            }
+                          />
+                        </Center>
+                      </Grid.Col>
+                      <Grid.Col span={"auto"}>
+                        <Stack spacing={0}>
+                          <Text fw={"bold"} truncate>
+                            {e?.Profile?.name}
+                          </Text>
+                          <Text fz={"sm"} fs={"italic"}>
+                            +{e?.nomor}
+                          </Text>
+                        </Stack>
+                      </Grid.Col>
+                      <Grid.Col span={2}>
+                        <Center h={"100%"}>
+                          <ActionIcon
+                            variant="transparent"
+                            onClick={() =>
+                              router.push(
+                                RouterProfile.katalog + `${e?.Profile?.id}`
+                              )
+                            }
+                          >
+                            <IconChevronRight />
+                          </ActionIcon>
+                        </Center>
+                      </Grid.Col>
+                    </Grid>
+                    <Divider />
+                  </Stack>
+                )
+              )}
             </Box>
           )}
         </Stack>

src/app_modules/vote/main/status/index.tsx

@@ -45,6 +45,7 @@ export default function Vote_Status({
       value: "Reject",
     },
   ];
+  
   return (
     <>
       <Tabs