#Job Vacancy

## feat
- Tampilan user
### No Issuue

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