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>
     </>