fix: Upload image

Deskripsi: - Upload image job di arahkan ke storage server ## No Issue
2024-09-13 16:12:42 +08:00
parent 3b7e9977f6
commit 370e3ec4e4
55 changed files with 1326 additions and 877 deletions
--- a/src/app_modules/job/component/button/comp_button_save_create.tsx
+++ b/src/app_modules/job/component/button/comp_button_save_create.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { DIRECTORY_ID } from "@/app/lib";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { notifikasiToAdmin_funCreate } from "@/app_modules/notifikasi/fun";
+import mqtt_client from "@/util/mqtt_client";
+import { Button } from "@mantine/core";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { job_funCreateNoFile, job_funCreateWithFile } from "../../fun";
+import { gs_job_hot_menu, gs_job_status } from "../../global_state";
+import { MODEL_JOB } from "../../model/interface";
+
+function Job_ComponentButtonSaveCreate({
+  value,
+  file,
+}: {
+  value: MODEL_JOB;
+  file: File;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
+  const [status, setStatus] = useAtom(gs_job_status);
+
+  async function onCreate() {
+    if (file === null) {
+      const createNoFile = await job_funCreateNoFile({
+        data: value,
+      });
+
+      if (createNoFile.status === 201) {
+        const dataNotif: any = {
+          appId: createNoFile.data?.id as any,
+          status: createNoFile.data?.MasterStatus?.name as any,
+          userId: createNoFile.data?.authorId as any,
+          pesan: createNoFile.data?.title as any,
+          kategoriApp: "JOB",
+          title: "Job baru",
+        };
+
+        const notif = await notifikasiToAdmin_funCreate({
+          data: dataNotif as any,
+        });
+
+        if (notif.status === 201) {
+          mqtt_client.publish(
+            "ADMIN",
+            JSON.stringify({
+              count: 1,
+            })
+          );
+          setHotMenu(2);
+          setStatus("Review");
+          router.replace(RouterJob.status);
+          setIsLoading(true);
+          ComponentGlobal_NotifikasiBerhasil(createNoFile.message);
+        }
+      } else {
+        ComponentGlobal_NotifikasiGagal(createNoFile.message);
+      }
+    } else {
+      const uploadFile = await funGlobal_UploadToStorage({
+        file: file,
+        dirId: DIRECTORY_ID.job_image,
+      });
+
+      if (!uploadFile.success)
+        return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+
+      const createWithFile = await job_funCreateWithFile({
+        data: value,
+        fileId: uploadFile.data.id,
+      });
+
+      if (createWithFile.status === 201) {
+        const dataNotif: any = {
+          appId: createWithFile.data?.id as any,
+          status: createWithFile.data?.MasterStatus?.name as any,
+          userId: createWithFile.data?.authorId as any,
+          pesan: createWithFile.data?.title as any,
+          kategoriApp: "JOB",
+          title: "Job baru",
+        };
+
+        const notif = await notifikasiToAdmin_funCreate({
+          data: dataNotif as any,
+        });
+
+        if (notif.status === 201) {
+          mqtt_client.publish(
+            "ADMIN",
+            JSON.stringify({
+              count: 1,
+            })
+          );
+          setHotMenu(2);
+          setStatus("Review");
+          router.replace(RouterJob.status);
+          setIsLoading(true);
+          ComponentGlobal_NotifikasiBerhasil(createWithFile.message);
+        }
+      } else {
+        ComponentGlobal_NotifikasiGagal(createWithFile.message);
+      }
+    }
+  }
+
+  return (
+    <>
+      <Button
+        disabled={
+          value.title === "" ||
+          value.content === "" ||
+          value.content === "<p><br></p>" ||
+          value.content.length > 500 ||
+          value.deskripsi === "" ||
+          value.deskripsi === "<p><br></p>" ||
+          value.deskripsi.length > 500
+            ? true
+            : false
+        }
+        style={{
+          marginTop: 10,
+          marginBottom: 30,
+          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"
+        c={"black"}
+        loaderPosition="center"
+        loading={isLoading ? true : false}
+        w={"100%"}
+        radius={"xl"}
+        onClick={() => {
+          onCreate();
+        }}
+      >
+        Simpan
+      </Button>
+    </>
+  );
+}
+
+export default Job_ComponentButtonSaveCreate;
--- a/src/app_modules/job/component/button/comp_button_update.tsx
+++ b/src/app_modules/job/component/button/comp_button_update.tsx
@@ -0,0 +1,128 @@
+import { MainColor, AccentColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { Modal, Stack, Title, Group, Button } from "@mantine/core";
+import { useDisclosure, useWindowScroll } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { job_EditById } from "../../fun/edit/fun_edit_by_id";
+import { gs_job_hot_menu, gs_job_status } from "../../global_state";
+import { MODEL_JOB } from "../../model/interface";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { DIRECTORY_ID } from "@/app/lib";
+
+export function Job_ComponentButtonUpdate({
+  value,
+  file,
+}: {
+  value: MODEL_JOB;
+  file: File;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
+  const [status, setStatus] = useAtom(gs_job_status);
+  const [opened, { open, close }] = useDisclosure(false);
+  const [scroll, scrollTo] = useWindowScroll();
+
+  async function onUpdate() {
+    if (file === null) {
+      const update = await job_EditById({
+        data: value,
+      });
+      if (update.status !== 200)
+        return ComponentGlobal_NotifikasiGagal(update.message);
+    } else {
+      const uploadFile = await funGlobal_UploadToStorage({
+        file: file,
+        dirId: DIRECTORY_ID.job_image,
+      });
+
+      if (!uploadFile.success)
+        return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+
+      const updateWithFile = await job_EditById({
+        data: value,
+      });
+      if (updateWithFile.status !== 200)
+        return ComponentGlobal_NotifikasiGagal(updateWithFile.message);
+    }
+
+    setHotMenu(2);
+    setStatus("Draft");
+    setIsLoading(true);
+    router.back();
+    return ComponentGlobal_NotifikasiBerhasil("Berhasil Update");
+  }
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={close}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} c={"white"}>
+            Anda yakin menyimpan data ini ?
+          </Title>
+          <Group position="center">
+            <Button radius={"xl"} onClick={() => close()}>
+              Batal
+            </Button>
+            <Button
+              loaderPosition="center"
+              loading={isLoading ? true : false}
+              color="teal"
+              radius={"xl"}
+              onClick={() => onUpdate()}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      <Button
+        mt={"xs"}
+        mb={"lg"}
+        style={{
+          transition: "0.5s",
+        }}
+        disabled={
+          value.title === "" ||
+          value.content === "" ||
+          value.content === "<p><br></p>" ||
+          value.content.length > 500 ||
+          value.deskripsi === "" ||
+          value.deskripsi === "<p><br></p>" ||
+          value.deskripsi.length > 500
+            ? true
+            : false
+        }
+        bg={MainColor.yellow}
+        color="yellow"
+        c={"black"}
+        radius={"xl"}
+        onClick={() => {
+          open();
+          scrollTo({ y: 0 });
+        }}
+      >
+        Update
+      </Button>
+    </>
+  );
+}
--- a/src/app_modules/job/component/detail/comp_box_upload_image.tsx
+++ b/src/app_modules/job/component/detail/comp_box_upload_image.tsx
@@ -0,0 +1,24 @@
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Box } from "@mantine/core";
+
+export function Job_ComponentBoxUploadImage({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <ComponentGlobal_CardStyles height={300}>
+        <Box
+          style={{
+            height: "100%",
+            borderStyle: "dashed",
+            borderRadius: "5px",
+          }}
+        >
+          {children}
+        </Box>
+      </ComponentGlobal_CardStyles>
+    </>
+  );
+}
--- a/src/app_modules/job/component/detail/detail_data.tsx
+++ b/src/app_modules/job/component/detail/detail_data.tsx
@@ -1,21 +1,35 @@
 "use client";

-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 { APIs } from "@/app/lib";
 import {
  AccentColor,
  MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import {
+  Card,
+  Center,
+  Image,
+  Loader,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { MODEL_JOB } from "../../model/interface";
+import { useState } from "react";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";

 export default function ComponentJob_DetailData({
  data,
 }: {
  data?: MODEL_JOB;
 }) {
+  const [isLoading, setIsLoading] = useState(true);
+
  return (
    <>
      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+
      {data ? (
        <Card
          shadow="lg"
@@ -29,15 +43,34 @@ export default function ComponentJob_DetailData({
        >
          <Card.Section px={"xs"} pb={"lg"}>
            <Stack spacing={"xl"}>
-              {data.imagesId ? (
+              {data.imageId ? (
                <Stack align="center">
+                  {isLoading ? (
+                    <Paper
+                      style={{ zIndex: 1, position: "relative" }}
+                      w={200}
+                      h={300}
+                      bg={AccentColor.blackgray}
+                    >
+                      <Center h={"100%"}>
+                        <ComponentGlobal_Loader size={30} variant="dots" />
+                      </Center>
+                    </Paper>
+                  ) : (
+                    ""
+                  )}
+
                  <Image
-                    alt=""
-                    src={
-                      data.imagesId ? RouterJob.api_gambar + data.imagesId : ""
-                    }
-                    height={300}
-                    width={200}
+                    style={{ zIndex: 2, position: "relative" }}
+                    onLoad={() => {
+                      setIsLoading(false);
+                    }}
+                    onError={() => {
+                      setIsLoading(false);
+                    }}
+                    alt="Image"
+                    src={APIs.GET + data?.imageId}
+                    maw={200}
                  />
                </Stack>
              ) : (
--- a/src/app_modules/job/component/index.ts
+++ b/src/app_modules/job/component/index.ts
@@ -0,0 +1,7 @@
+import Job_ComponentButtonSaveCreate from "./button/comp_button_save_create";
+import { Job_ComponentButtonUpdate } from "./button/comp_button_update";
+import { Job_ComponentBoxUploadImage } from "./detail/comp_box_upload_image";
+
+export { Job_ComponentButtonSaveCreate };
+export { Job_ComponentBoxUploadImage };
+export { Job_ComponentButtonUpdate };
--- a/src/app_modules/job/create/TextEdit.tsx
+++ b/src/app_modules/job/create/TextEdit.tsx
@@ -1,61 +0,0 @@
-"use client";
-
-import { Center, Stack } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import dynamic from "next/dynamic";
-import React, { useState } from "react";
-const ReactQuill = dynamic(
-  () => {
-    return import("react-quill");
-  },
-  { ssr: false }
-);
-import "react-quill/dist/quill.snow.css";
-
-export default function Demo() {
-  const [value, setValue] = useState("");
-  const [udah, setUdah] = useState(false);
-
-  // useShallowEffect(() => {
-  //   if (window && window.document) setUdah(true);
-  // }, []);
-
-  // if (!udah) return <><Center></Center></>;
-  return (
-    <Stack>
-      <ReactQuill
-        defaultValue={`<h2 ">Judul Lowongan Kerja</h2>
-          <p "><br></p>
-          <p><strong>Syarat &amp; Ketentuan :</strong></p>
-          <ol>
-          <li>Minimal pendidika SMA / Sederajat</li>
-          <li>Pasif berbahasa inggris </li>
-          <li>Dll,.</li>
-          </ol>
-          <p></br></p>
-          <p><strong>Deskripsi :</strong></p>
-          <p>Jika berminat dapat menghubungi WA berikut</p>
-          <p>+6281 xxx xxx xx</p>
-          <p>Kirim CV anda melalui email berikut</p>
-          <p>@test-hipmi.com</p>
-          <p>Atau kunjungi website kami:</p>
-          <p><a href="https://test-hipmi.wibudev.com/" rel="noopener noreferrer" target="_blank">https://test-hipmi.wibudev.com/</a></p>
-          `}
-        modules={{
-          toolbar: [
-            [{ header: [1, 2, 3, 4, 5, 6, false] }],
-            ["bold", "italic", "underline", "link"],
-            // [{ align: [] }],
-            [{ list: "ordered" }, { list: "bullet" }],
-
-            ["clean"],
-          ],
-        }}
-        theme="snow"
-        onChange={setValue}
-      />
-      {/* {value}
-      <div dangerouslySetInnerHTML={{ __html: value }} /> */}
-    </Stack>
-  );
-}
--- a/src/app_modules/job/create/view.tsx
+++ b/src/app_modules/job/create/view.tsx
@@ -1,24 +1,19 @@
 "use client";

 import {
+  AspectRatio,
+  Box,
  Button,
  Center,
  FileButton,
-  Group,
  Image,
-  Loader,
-  Paper,
  Stack,
  Text,
  TextInput,
 } from "@mantine/core";
 import { IconCamera, IconUpload } from "@tabler/icons-react";
-import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { gs_job_hot_menu, gs_job_status } from "../global_state";
-
 import dynamic from "next/dynamic";
+import { useState } from "react";
 import "react-quill/dist/quill.snow.css";
 const ReactQuill = dynamic(
  () => {
@@ -27,22 +22,21 @@ const ReactQuill = dynamic(
  { ssr: false }
 );

-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import {
  AccentColor,
  MainColor,
 } from "@/app_modules/_global/color/color_pallet";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
-import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_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 {
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_InputCountDown,
+} from "@/app_modules/_global/component";
+import {
+  Job_ComponentBoxUploadImage,
+  Job_ComponentButtonSaveCreate,
+} from "../component";
 import { defaultDeskripsi, defaultSyarat } from "../component/default_value";
-import { Job_funCreate } from "../fun/create/fun_create";
-import { MODEL_JOB } from "../model/interface";

 export default function Job_Create() {
  const [value, setValue] = useState({
@@ -52,272 +46,172 @@ export default function Job_Create() {
  });
  const [reload, setReload] = useState(false);
  const [file, setFile] = useState<File | null>(null);
-  const [images, setImages] = useState<any | null>();
+  const [img, setImg] = useState<any | null>();

-  useShallowEffect(() => {
-    if (window && window.document) setReload(true);
-  }, []);
+  // useShallowEffect(() => {
+  //   if (window && window.document) setReload(true);
+  // }, []);

  return (
-    <>
-      {!reload ? (
-        <Center h={"50vh"}>
-          <Loader color={MainColor.yellow} />
-        </Center>
-      ) : (
-        <Stack spacing={40}>
-          <Stack align="center" spacing={"xs"}>
-            {images ? (
-              <Image alt="" src={images} height={300} width={200} />
-            ) : (
-              <Paper h={300} w={200} withBorder shadow="lg" bg={"gray.1"}>
-                <Stack justify="center" align="center" h={"100%"}>
-                  <IconUpload color="gray" />
-                  <Text fz={10} fs={"italic"} c={"gray"} fw={"bold"}>
-                    Upload Gambar
-                  </Text>
-                </Stack>
-              </Paper>
+    <Stack>
+      <ComponentGlobal_BoxInformation informasi="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja. " />
+
+      <Stack spacing={"xs"}>
+        <Job_ComponentBoxUploadImage>
+          {img ? (
+            <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
+              <Image
+                style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
+                alt="Foto"
+                height={250}
+                src={img}
+              />
+            </AspectRatio>
+          ) : (
+            <Stack justify="center" align="center" h={"100%"}>
+              <IconUpload color="white" />
+              <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
+                Upload Gambar
+              </Text>
+            </Stack>
+          )}
+        </Job_ComponentBoxUploadImage>
+
+        <Center>
+          <FileButton
+            onChange={async (files: any | null) => {
+              try {
+                const buffer = URL.createObjectURL(
+                  new Blob([new Uint8Array(await files.arrayBuffer())])
+                );
+                setImg(buffer);
+                setFile(files);
+              } catch (error) {
+                console.log(error);
+              }
+            }}
+            accept="image/png,image/jpeg"
+          >
+            {(props) => (
+              <Button
+                {...props}
+                radius={"xl"}
+                w={100}
+                style={{
+                  backgroundColor: MainColor.yellow,
+                  border: `1px solid ${AccentColor.yellow}`,
+                }}
+              >
+                <IconCamera color="black" />
+              </Button>
            )}
-
-            <FileButton
-              onChange={async (files: any | null) => {
-                try {
-                  const buffer = URL.createObjectURL(
-                    new Blob([new Uint8Array(await files.arrayBuffer())])
-                  );
-                  if (files.size > 200000) {
-                    ComponentGlobal_NotifikasiPeringatan(
-                      "Maaf, Ukuran file terlalu besar, maksimal 2mb",
-                      3000
-                    );
-                  } else {
-                    setImages(buffer);
-                    setFile(files);
-                  }
-                } catch (error) {
-                  console.log(error);
-                }
-              }}
-              accept="image/png,image/jpeg"
-            >
-              {(props) => (
-                <Button
-                  {...props}
-                  radius={"xl"}
-                  w={100}
-                  style={{
-                    backgroundColor: MainColor.yellow,
-                    border: `1px solid ${AccentColor.yellow}`,
-                  }}
-                >
-                  <IconCamera />
-                </Button>
-              )}
-            </FileButton>
-          </Stack>
-
-          <ComponentGlobal_BoxInformation informasi="Poster atau Gambar tidak wajib untuk di upload. Upload lah jika dirasa perlu." />
-
-          <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"
-              maxLength={100}
-              onChange={(val) => {
-                setValue({
-                  ...value,
-                  title: val.currentTarget.value,
-                });
-              }}
-            />
-
-            <Stack spacing={3}>
-              <Text fz={"sm"} c={"white"}>
-                Syarat & Ketentuan
-                <Text inherit span c={"red"}>
-                  {" "}
-                  *
-                </Text>
-              </Text>
-
-              <Stack spacing={5}>
-                <ReactQuill
-                  defaultValue={defaultSyarat}
-                  style={{
-                    backgroundColor: "white",
-                  }}
-                  modules={{
-                    toolbar: [
-                      [{ header: [1, 2, 3, 4, 5, 6, false] }],
-                      ["bold", "italic", "underline", "link"],
-                      // [{ align: [] }],
-                      [{ list: "ordered" }, { list: "bullet" }],
-                      ["clean"],
-                    ],
-                  }}
-                  theme="snow"
-                  onChange={(val) => {
-                    setValue({
-                      ...value,
-                      content: val,
-                    });
-                  }}
-                />
-                <ComponentGlobal_InputCountDown
-                  maxInput={500}
-                  lengthInput={value.content.length}
-                />
-              </Stack>
-            </Stack>
-            <Stack spacing={3}>
-              <Text fz={"sm"} c={"white"}>
-                Deskripsi
-                <Text inherit span c={"red"}>
-                  {" "}
-                  *
-                </Text>
-              </Text>
-              <Stack spacing={5}>
-                <ReactQuill
-                  defaultValue={defaultDeskripsi}
-                  style={{
-                    backgroundColor: "white",
-                  }}
-                  modules={{
-                    toolbar: [
-                      [{ header: [1, 2, 3, 4, 5, 6, false] }],
-                      ["bold", "italic", "underline", "link"],
-                      // [{ align: [] }],
-                      [{ list: "ordered" }, { list: "bullet" }],
-                      ["clean"],
-                    ],
-                  }}
-                  theme="snow"
-                  onChange={(val) => {
-                    setValue({
-                      ...value,
-                      deskripsi: val,
-                    });
-                  }}
-                />
-                <ComponentGlobal_InputCountDown
-                  maxInput={500}
-                  lengthInput={value.deskripsi.length}
-                />
-              </Stack>
-            </Stack>
-          </Stack>
-
-          <ButtonAction value={value as any} file={file as any} />
-        </Stack>
-      )}
-    </>
-  );
-}
-
-function ButtonAction({ value, file }: { value: MODEL_JOB; file: FormData }) {
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-
-  const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
-  const [status, setStatus] = useAtom(gs_job_status);
-
-  async function onCreate() {
-    const gambar = new FormData();
-    gambar.append("file", file as any);
-
-    const create = await Job_funCreate(value as any, gambar);
-    if (create.status === 201) {
-      const dataNotif: any = {
-        appId: create.data?.id as any,
-        kategoriApp: "JOB",
-        status: create.data?.MasterStatus?.name as any,
-        userId: create.data?.authorId as any,
-        pesan: create.data?.title as any,
-        title: "Job baru",
-      };
-
-      const notif = await notifikasiToAdmin_funCreate({
-        data: dataNotif as any,
-      });
-      // console.log(notif); .
-
-      if (notif.status === 201) {
-        mqtt_client.publish(
-          "ADMIN",
-          JSON.stringify({
-            count: 1,
-          })
-        );
-        setHotMenu(2);
-        setStatus("Review");
-        router.replace(RouterJob.status);
-        setIsLoading(true);
-        ComponentGlobal_NotifikasiBerhasil(create.message);
-      }
-    } else {
-      ComponentGlobal_NotifikasiGagal(create.message);
-    }
-  }
-
-  return (
-    <>
-      <Stack>
-        <Group grow mb={"lg"}>
-          <Button
-            disabled={
-              value.title === "" ||
-              value.content === "" ||
-              value.content === "<p><br></p>" ||
-              value.content.length > 500 ||
-              value.deskripsi === "" ||
-              value.deskripsi === "<p><br></p>" ||
-              value.deskripsi.length > 500
-                ? true
-                : false
-            }
-            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%"}
-            radius={"xl"}
-            onClick={() => {
-              onCreate();
-            }}
-          >
-            Simpan
-          </Button>
-        </Group>
+          </FileButton>
+        </Center>
      </Stack>
-    </>
+
+      <ComponentGlobal_CardStyles>
+        <Stack>
+          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            withAsterisk
+            label="Judul"
+            placeholder="Masukan judul lowongan kerja"
+            maxLength={100}
+            onChange={(val) => {
+              setValue({
+                ...value,
+                title: val.currentTarget.value,
+              });
+            }}
+          />
+
+          <Stack spacing={3}>
+            <Text fz={"sm"} c={"white"}>
+              Syarat & Ketentuan
+              <Text inherit span c={"red"}>
+                {" "}
+                *
+              </Text>
+            </Text>
+
+            <Stack spacing={5}>
+              <ReactQuill
+                defaultValue={defaultSyarat}
+                style={{
+                  color: "black",
+                  backgroundColor: "white",
+                }}
+                modules={{
+                  toolbar: [
+                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                    ["bold", "italic", "underline", "link"],
+                    // [{ align: [] }],
+                    [{ list: "ordered" }, { list: "bullet" }],
+                    ["clean"],
+                  ],
+                }}
+                theme="snow"
+                onChange={(val) => {
+                  setValue({
+                    ...value,
+                    content: val,
+                  });
+                }}
+              />
+              <ComponentGlobal_InputCountDown
+                maxInput={500}
+                lengthInput={value.content.length}
+              />
+            </Stack>
+          </Stack>
+
+          <Stack spacing={3}>
+            <Text fz={"sm"} c={"white"}>
+              Deskripsi
+              <Text inherit span c={"red"}>
+                {" "}
+                *
+              </Text>
+            </Text>
+
+            <Stack spacing={5}>
+              <ReactQuill
+                defaultValue={defaultDeskripsi}
+                style={{
+                  color: "black",
+                  backgroundColor: "white",
+                }}
+                modules={{
+                  toolbar: [
+                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                    ["bold", "italic", "underline", "link"],
+                    // [{ align: [] }],
+                    [{ list: "ordered" }, { list: "bullet" }],
+                    ["clean"],
+                  ],
+                }}
+                theme="snow"
+                onChange={(val) => {
+                  setValue({
+                    ...value,
+                    deskripsi: val,
+                  });
+                }}
+              />
+              <ComponentGlobal_InputCountDown
+                maxInput={500}
+                lengthInput={value.deskripsi.length}
+              />
+            </Stack>
+          </Stack>
+        </Stack>
+      </ComponentGlobal_CardStyles>
+
+      <Job_ComponentButtonSaveCreate value={value as any} file={file as any} />
+    </Stack>
  );
 }
--- a/src/app_modules/job/edit/view.tsx
+++ b/src/app_modules/job/edit/view.tsx
@@ -3,6 +3,7 @@
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import {
+  AspectRatio,
  Button,
  Center,
  FileButton,
@@ -14,7 +15,7 @@ import {
  Stack,
  Text,
  TextInput,
-  Title
+  Title,
 } from "@mantine/core";
 import {
  useDisclosure,
@@ -36,55 +37,53 @@ import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/inpu
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import dynamic from "next/dynamic";
-import { Job_EditById } from "../fun/edit/fun_edit_by_id";
+import { job_EditById } from "../fun/edit/fun_edit_by_id";
 const ReactQuill = dynamic(
  () => {
    return import("react-quill");
  },
  { ssr: false }
 );
+import "react-quill/dist/quill.snow.css";
+import { Job_ComponentBoxUploadImage, Job_ComponentButtonUpdate } from "../component";
+import { APIs } from "@/app/lib";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";

 export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
  const [value, setValue] = useState(dataJob);
-
  const [reload, setReload] = useState(false);
  const [file, setFile] = useState<File | null>(null);
-  const [images, setImages] = useState<any | null>();
-  const [maxFile, setMaxFile] = useState(false);
+  const [img, setImg] = useState<any | null>();

-  useShallowEffect(() => {
-    if (window && window.document) setReload(true);
-  }, []);
+  // useShallowEffect(() => {
+  //   if (window && window.document) setReload(true);
+  // }, []);

  return (
    <>
-      {!reload ? (
-        <Center h={"50vh"}>
-          <Loader color={MainColor.yellow} />
-        </Center>
-      ) : (
-        <Stack py={"md"} spacing={40}>
-          <Stack align="center">
-            {images ? (
-              <Image alt="" src={images} mah={500} maw={200} />
-            ) : value.imagesId ? (
-              <Image
-                height={300}
-                width={200}
-                alt="Foto"
-                src={RouterJob.api_gambar + value.imagesId}
-              />
+      <Stack>
+        <Stack spacing={"xs"}>
+          <Job_ComponentBoxUploadImage>
+            {value.imageId ? (
+              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
+                <Image
+                  style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
+                  alt="Foto"
+                  height={250}
+                  src={img ? img : APIs.GET + value.imageId}
+                />
+              </AspectRatio>
            ) : (
-              <Paper h={300} w={200} withBorder shadow="lg" bg={"gray.1"}>
-                <Stack justify="center" align="center" h={"100%"}>
-                  <IconUpload color="gray" />
-                  <Text fz={10} fs={"italic"} c={"gray"} fw={"bold"}>
-                    Upload Gambar
-                  </Text>
-                </Stack>
-              </Paper>
+              <Stack justify="center" align="center" h={"100%"}>
+                <IconUpload color="white" />
+                <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
+                  Upload Gambar
+                </Text>
+              </Stack>
            )}
+          </Job_ComponentBoxUploadImage>

+          <Center>
            <FileButton
              onChange={async (files: any | null) => {
                try {
@@ -92,19 +91,8 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
                    new Blob([new Uint8Array(await files.arrayBuffer())])
                  );

-                  if (files.size > 200000) {
-                    // setMaxFile(true);
-                    ComponentGlobal_NotifikasiPeringatan(
-                      "Maaf, Ukuran file terlalu besar, maksimal 2mb",
-                      3000
-                    );
-                  } else {
-                    // console.log(buffer, "ini buffer");
-                    // console.log(files, " ini file");
-
-                    setImages(buffer);
-                    setFile(files);
-                  }
+                  setImg(buffer);
+                  setFile(files);
                } catch (error) {
                  console.log(error);
                }
@@ -121,21 +109,15 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
                    border: `1px solid ${AccentColor.yellow}`,
                  }}
                >
-                  <IconCamera />
+                  <IconCamera color="black" />
                </Button>
              )}
            </FileButton>
-          </Stack>
+          </Center>
+        </Stack>

-          <Stack
-            spacing={"lg"}
-            p={"md"}
-            style={{
-              backgroundColor: MainColor.darkblue,
-              border: `2px solid ${AccentColor.blue}`,
-              borderRadius: "5px 5px 5px 5px",
-            }}
-          >
+        <ComponentGlobal_CardStyles color="black">
+          <Stack>
            <TextInput
              styles={{
                label: {
@@ -230,100 +212,12 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
              </Stack>
            </Stack>
          </Stack>
+        </ComponentGlobal_CardStyles>

-          <ButtonAction value={value as any} file={file as any} />
-        </Stack>
-      )}
+        <Job_ComponentButtonUpdate value={value as any} file={file as any} />
+      </Stack>
    </>
  );
 }

-function ButtonAction({ value, file }: { value: MODEL_JOB; file: FormData }) {
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);

-  const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
-  const [status, setStatus] = useAtom(gs_job_status);
-  const [opened, { open, close }] = useDisclosure(false);
-  const [scroll, scrollTo] = useWindowScroll();
-
-  async function onUpdate() {
-    const gambar = new FormData();
-    gambar.append("file", file as any);
-
-    await Job_EditById(value, gambar).then((res) => {
-      if (res.status === 200) {
-        setHotMenu(2);
-        setStatus("Draft");
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-        setIsLoading(true);
-        router.back();
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
-    });
-  }
-
-  return (
-    <>
-      <Modal
-        opened={opened}
-        onClose={close}
-        centered
-        withCloseButton={false}
-        styles={{
-          content: {
-            backgroundColor: MainColor.darkblue,
-            border: `2px solid ${AccentColor.blue}`,
-          },
-        }}
-      >
-        <Stack>
-          <Title order={6} c={"white"}>
-            Anda yakin menyimpan data ini ?
-          </Title>
-          <Group position="center">
-            <Button radius={"xl"} onClick={() => close()}>
-              Batal
-            </Button>
-            <Button
-              loaderPosition="center"
-              loading={isLoading ? true : false}
-              color="teal"
-              radius={"xl"}
-              onClick={() => onUpdate()}
-            >
-              Simpan
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
-      <Button
-        style={{
-          transition: "0.5s",
-        }}
-        disabled={
-          value.title === "" ||
-          value.content === "" ||
-          value.content === "<p><br></p>" ||
-          value.content.length > 500 ||
-          value.deskripsi === "" ||
-          value.deskripsi === "<p><br></p>" ||
-          value.deskripsi.length > 500
-            ? true
-            : false
-        }
-        // bg={"teal"}
-        color="teal"
-        radius={"xl"}
-        my={"lg"}
-        onClick={() => {
-          open();
-          scrollTo({ y: 0 });
-        }}
-      >
-        Update
-      </Button>
-    </>
-  );
-}
--- a/src/app_modules/job/fun/create/fun_create.ts
+++ b/src/app_modules/job/fun/create/fun_create.ts
@@ -1,95 +0,0 @@
-"use server";
-
-import prisma from "@/app/lib/prisma";
-import { user_funGetOneUserId } from "@/app_modules/fun_global/get_user_token";
-import _ from "lodash";
-import { v4 } from "uuid";
-import fs from "fs";
-import { revalidatePath } from "next/cache";
-import { MODEL_JOB } from "../../model/interface";
-import path from "path";
-const root = process.cwd();
-
-export async function Job_funCreate(req: MODEL_JOB, file: FormData) {
-  const authorId = await user_funGetOneUserId();
-
-  const dataImage: any = file.get("file");
-  if (dataImage !== "null") {
-    const fileName = dataImage.name;
-    const fileExtension = _.lowerCase(dataImage.name.split(".").pop());
-    const fRandomName = v4(fileName) + "." + fileExtension;
-
-    const upload = await prisma.images.create({
-      data: {
-        url: fRandomName,
-        label: "JOB",
-      },
-      select: {
-        id: true,
-        url: true,
-      },
-    });
-
-    if (!upload) return { status: 400, message: "Gagal upload gambar" };
-    const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
-    fs.writeFileSync(
-      path.join(root, `public/job/${upload.url}`),
-      uploadFolder
-    );
-    const createDataWithImg = await prisma.job.create({
-      data: {
-        title: req.title,
-        content: req.content,
-        deskripsi: req.deskripsi,
-        authorId: authorId,
-        imagesId: upload.id,
-      },
-      select: {
-        id: true,
-        authorId: true,
-        MasterStatus: {
-          select: {
-            name: true,
-          },
-        },
-        title: true,
-      },
-    });
-
-    if (!createDataWithImg) return { status: 400, message: "Gagal Disimpan" };
-    revalidatePath("/dev/job/main/status");
-    return {
-      data: createDataWithImg,
-      status: 201,
-      message: "Berhasil Disimpan",
-    };
-  } else {
-    const createDataWithoutImg = await prisma.job.create({
-      data: {
-        title: req.title,
-        content: req.content,
-        deskripsi: req.deskripsi,
-        authorId: authorId,
-      },
-      select: {
-        id: true,
-        authorId: true,
-        MasterStatus: {
-          select: {
-            name: true,
-          },
-        },
-        title: true,
-      },
-    });
-
-    if (!createDataWithoutImg)
-      return { status: 400, message: "Gagal Disimpan" };
-    revalidatePath("/dev/job/main/status");
-    return {
-      data: createDataWithoutImg,
-      status: 201,
-      message: "Berhasil Disimpan",
-    };
-  }
-}
--- a/src/app_modules/job/fun/create/fun_create_no_file.ts
+++ b/src/app_modules/job/fun/create/fun_create_no_file.ts
@@ -0,0 +1,37 @@
+"use server";
+
+import { prisma } from "@/app/lib";
+import { user_funGetOneUserId } from "@/app_modules/fun_global";
+import { revalidatePath } from "next/cache";
+import { MODEL_JOB } from "../../model/interface";
+
+export async function job_funCreateNoFile({ data }: { data: MODEL_JOB }) {
+  const authorId = await user_funGetOneUserId();
+
+  const createNoImage = await prisma.job.create({
+    data: {
+      title: data.title,
+      content: data.content,
+      deskripsi: data.deskripsi,
+      authorId: authorId,
+    },
+    select: {
+      id: true,
+      authorId: true,
+      MasterStatus: {
+        select: {
+          name: true,
+        },
+      },
+      title: true,
+    },
+  });
+
+  if (!createNoImage) return { status: 400, message: "Gagal Disimpan" };
+  revalidatePath("/dev/job/main/status");
+  return {
+    status: 201,
+    message: "Berhasil Disimpan",
+    data: createNoImage,
+  };
+}
--- a/src/app_modules/job/fun/create/fun_create_with_file.ts
+++ b/src/app_modules/job/fun/create/fun_create_with_file.ts
@@ -0,0 +1,131 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_funGetOneUserId } from "@/app_modules/fun_global/get_user_token";
+import _ from "lodash";
+import { v4 } from "uuid";
+import fs from "fs";
+import { revalidatePath } from "next/cache";
+import { MODEL_JOB } from "../../model/interface";
+import path from "path";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { DIRECTORY_ID } from "@/app/lib";
+
+export async function job_funCreateWithFile({
+  data,
+  fileId,
+}: {
+  data: MODEL_JOB;
+  fileId: string;
+}) {
+  const authorId = await user_funGetOneUserId();
+  console.log(authorId);
+
+  const createDataWithoutImg = await prisma.job.create({
+    data: {
+      title: data.title,
+      content: data.content,
+      deskripsi: data.deskripsi,
+      authorId: authorId,
+      imageId: fileId,
+    },
+    select: {
+      id: true,
+      authorId: true,
+      MasterStatus: {
+        select: {
+          name: true,
+        },
+      },
+      title: true,
+    },
+  });
+
+  if (!createDataWithoutImg) return { status: 400, message: "Gagal Disimpan" };
+  revalidatePath("/dev/job/main/status");
+  return {
+    data: createDataWithoutImg,
+    status: 201,
+    message: "Berhasil Disimpan",
+  };
+
+  // const dataImage: any = file.get("file");
+  // if (dataImage !== "null") {
+  //   const fileName = dataImage.name;
+  //   const fileExtension = _.lowerCase(dataImage.name.split(".").pop());
+  //   const fRandomName = v4(fileName) + "." + fileExtension;
+
+  //   const upload = await prisma.images.create({
+  //     data: {
+  //       url: fRandomName,
+  //       label: "JOB",
+  //     },
+  //     select: {
+  //       id: true,
+  //       url: true,
+  //     },
+  //   });
+
+  //   if (!upload) return { status: 400, message: "Gagal upload gambar" };
+  //   const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
+  //   fs.writeFileSync(
+  //     path.join(root, `public/job/${upload.url}`),
+  //     uploadFolder
+  //   );
+  //   const createDataWithImg = await prisma.job.create({
+  //     data: {
+  //       title: req.title,
+  //       content: req.content,
+  //       deskripsi: req.deskripsi,
+  //       authorId: authorId,
+  //       imagesId: upload.id,
+  //     },
+  //     select: {
+  //       id: true,
+  //       authorId: true,
+  //       MasterStatus: {
+  //         select: {
+  //           name: true,
+  //         },
+  //       },
+  //       title: true,
+  //     },
+  //   });
+
+  //   if (!createDataWithImg) return { status: 400, message: "Gagal Disimpan" };
+  //   revalidatePath("/dev/job/main/status");
+  //   return {
+  //     data: createDataWithImg,
+  //     status: 201,
+  //     message: "Berhasil Disimpan",
+  //   };
+  // } else {
+  //   const createDataWithoutImg = await prisma.job.create({
+  //     data: {
+  //       title: req.title,
+  //       content: req.content,
+  //       deskripsi: req.deskripsi,
+  //       authorId: authorId,
+  //     },
+  //     select: {
+  //       id: true,
+  //       authorId: true,
+  //       MasterStatus: {
+  //         select: {
+  //           name: true,
+  //         },
+  //       },
+  //       title: true,
+  //     },
+  //   });
+
+  //   if (!createDataWithoutImg)
+  //     return { status: 400, message: "Gagal Disimpan" };
+  //   revalidatePath("/dev/job/main/status");
+  //   return {
+  //     data: createDataWithoutImg,
+  //     status: 201,
+  //     message: "Berhasil Disimpan",
+  //   };
+  // }
+}
--- a/src/app_modules/job/fun/edit/fun_edit_by_id.ts
+++ b/src/app_modules/job/fun/edit/fun_edit_by_id.ts
@@ -6,68 +6,51 @@ import { v4 } from "uuid";
 import fs from "fs";
 import { MODEL_JOB } from "../../model/interface";
 import { revalidatePath } from "next/cache";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";

-export async function Job_EditById(req: MODEL_JOB, file: FormData) {
-  //   console.log(file);
-  //   console.log(req);
-  //   return { status: 200 };
-
-  const dataImage: any = file.get("file");
-  if (dataImage !== "null") {
-    const fileName = dataImage.name;
-    const fileExtension = _.lowerCase(dataImage.name.split(".").pop());
-    const fRandomName = v4(fileName) + "." + fileExtension;
-
-    const upload = await prisma.images.create({
-      data: {
-        url: fRandomName,
-        label: "JOB",
-      },
-      select: {
-        id: true,
-        url: true,
-      },
-    });
-
-    if (!upload) return { status: 400, message: "Gagal upload gambar" };
-    const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
-    fs.writeFileSync(`./public/job/${upload.url}`, uploadFolder);
-
+export async function job_EditById({
+  data,
+  imageId,
+}: {
+  data: MODEL_JOB;
+  imageId?: string;
+}) {
+  if (imageId == undefined) {
    const updt = await prisma.job.update({
      where: {
-        id: req.id,
+        id: data.id,
      },
      data: {
-        title: req.title,
-        content: req.content,
-        deskripsi: req.deskripsi,
-        imagesId: upload.id,
+        title: data.title,
+        content: data.content,
+        deskripsi: data.deskripsi,
      },
    });
-
    if (!updt) return { status: 400, message: "Gagal Update" };
-    revalidatePath("/dev/job/detail/draft");
+    revalidatePath(RouterJob.status);
+    
    return {
      status: 200,
-      message: "Berhasil Disimpan",
+      message: "Berhasil Update",
    };
  } else {
-    const updt = await prisma.job.update({
+    const updtWithFile = await prisma.job.update({
      where: {
-        id: req.id,
+        id: data.id,
      },
      data: {
-        title: req.title,
-        content: req.content,
-        deskripsi: req.deskripsi,
+        title: data.title,
+        content: data.content,
+        deskripsi: data.deskripsi,
+        imageId: imageId,
      },
    });
+    if (!updtWithFile) return { status: 400, message: "Gagal Update" };
+    revalidatePath(RouterJob.status);

-    if (!updt) return { status: 400, message: "Gagal Update" };
-    revalidatePath("/dev/job/detail/draft");
    return {
      status: 200,
-      message: "Berhasil Disimpan",
+      message: "Berhasil Update",
    };
  }
 }
--- a/src/app_modules/job/fun/get/get_two_for_home_view.ts
+++ b/src/app_modules/job/fun/get/get_two_for_home_view.ts
@@ -10,6 +10,7 @@ export async function job_getTwoForHomeView() {
    },
    where: {
      isActive: true,
+      masterStatusId: "1"
    },
    select: {
      id: true,
--- a/src/app_modules/job/fun/index.ts
+++ b/src/app_modules/job/fun/index.ts
@@ -0,0 +1,5 @@
+import { job_funCreateNoFile } from "./create/fun_create_no_file";
+import { job_funCreateWithFile } from "./create/fun_create_with_file";
+
+export { job_funCreateWithFile };
+export { job_funCreateNoFile };
--- a/src/app_modules/job/model/interface.ts
+++ b/src/app_modules/job/model/interface.ts
@@ -1,11 +1,13 @@
 import { MODEL_USER } from "@/app_modules/home/model/interface";
-import { MODEL_IMAGES, MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
+import {
+  MODEL_NEW_DEFAULT_MASTER
+} from "@/app_modules/model_global/interface";

 export interface MODEL_JOB {
  id: string;
-  title: string
+  title: string;
  content: string;
-  deskripsi: string
+  deskripsi: string;
  isActive: boolean;
  isArsip: boolean;
  createdAt: Date;
@@ -13,8 +15,7 @@ export interface MODEL_JOB {
  catatan: string;
  authorId: string;
  Author: MODEL_USER;
-  Images: MODEL_IMAGES
-  imagesId: string
-  MasterStatus: MODEL_NEW_DEFAULT_MASTER
-  masterStatusId: string
+  MasterStatus: MODEL_NEW_DEFAULT_MASTER;
+  masterStatusId: string;
+  imageId: string;
 }
--- a/src/app_modules/job/non_user_view/view.tsx
+++ b/src/app_modules/job/non_user_view/view.tsx
@@ -1,16 +1,28 @@
 "use client";

-import { Card, Center, Image, Overlay, Stack, Text, Title } from "@mantine/core";
+import {
+  Card,
+  Center,
+  Image,
+  Overlay,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 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/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { APIs } from "@/app/lib";

 export default function Job_NonUserView({ data }: { data: MODEL_JOB }) {
  return (
    <>
-      <Center my={"md"} >
+      <Center my={"md"}>
        <Card
          shadow="lg"
          withBorder
@@ -23,16 +35,13 @@ export default function Job_NonUserView({ data }: { data: MODEL_JOB }) {
        >
          <Card.Section px={"xs"} pb={"lg"} c={"white"}>
            <Stack spacing={"xl"}>
-              {data.imagesId ? (
+              {data.imageId ? (
                <Stack align="center">
                  <Image
                    radius={"sm"}
                    alt=""
-                    src={
-                      data.imagesId ? RouterJob.api_gambar + data.imagesId : ""
-                    }
-                    height={300}
-                    width={200}
+                    src={APIs.GET + data.imageId}
+                    maw={200}
                  />
                </Stack>
              ) : (