fix: Upload image

Deskripsi:
- Upload image job di arahkan ke storage server
## No Issue

prisma/schema.prisma

@@ -114,7 +114,6 @@ model Images {
   Donasi_PencairanDana   Donasi_PencairanDana[]
   Donasi_Invoice         Donasi_Invoice[]
   Portofolio             Portofolio[]
-  Job                    Job[]
   Image_Map              BusinessMaps[]           @relation("ImageMap")
   Image_Pin              BusinessMaps[]           @relation("ImagePin")
   Investasi_Invoice      Investasi_Invoice[]
@@ -684,16 +683,15 @@ model Job {
   updatedAt DateTime @updatedAt
   isArsip   Boolean  @default(false)
   catatan   String?
+  title     String
+  content   String   @db.Text
+  deskripsi String   @db.Text
 
-  title          String
-  content        String        @db.Text
-  deskripsi      String        @db.Text
-  Images         Images?       @relation(fields: [imagesId], references: [id])
-  imagesId       String?
   Author         User?         @relation(fields: [authorId], references: [id])
   authorId       String?
   MasterStatus   MasterStatus? @relation(fields: [masterStatusId], references: [id])
   masterStatusId String?       @default("2")
+  imageId        String?
 }
 
 // ========================================= FORUM ========================================= //

src/app/contoh/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 import { ComponentNotifikasi_CardSkeleton } from "@/app_modules/notifikasi/component";
+import Coba_UploadFile from "@/app_modules/zCoba/ui_coba_upload_file";
 import { Box, Button, Flex, Paper, Stack, Title } from "@mantine/core";
 
 export default function Page() {
-
+  return (
-  return<>
+    <>
-  <ComponentNotifikasi_CardSkeleton/>
+      <Coba_UploadFile />
-  </>
+    </>
-
+  );
 
   return (
     <Stack
@@ -27,15 +28,15 @@ export default function Page() {
           gap: "20px",
           position: "relative",
           overflowX: "scroll",
-        //   scrollSnapType: "x",
+          //   scrollSnapType: "x",
-        //   scrollbarGutter: "unset",
+          //   scrollbarGutter: "unset",
           scrollbarWidth: "none",
-          backgroundColor:"red"
+          backgroundColor: "red",
         }}
       >
         <Flex gap={"md"} bg={"cyan"}>
           {Array.from(new Array(10), (_, i) => (
-            <Paper component={Button} w={"200px"}  px={"md"} key={i}>
+            <Paper component={Button} w={"200px"} px={"md"} key={i}>
               Contoh
             </Paper>
           ))}

src/app/dev/admin/job/child/review/page.tsx

@@ -1,6 +1,5 @@
 import { AdminJob_TableReview } from "@/app_modules/admin/job";
 import adminJob_getListReview from "@/app_modules/admin/job/fun/get/get_list_review";
-import { AdminJob_getListTableByStatusId } from "@/app_modules/admin/job/fun/get/get_list_table_by_status_id";
 
 export default async function Page() {
   const dataReview = await adminJob_getListReview({ page: 1 });

src/app/dev/auth/login/page.tsx

@@ -2,7 +2,7 @@ import { Login } from "@/app_modules/auth";
 import { cookies } from "next/headers";
 
 export default function Page() {
-  const c = cookies().getAll();
+  const c: any = cookies().getAll();
 
   return (
     <>

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

@@ -7,22 +7,16 @@ import { unsealData } from "iron-session";
 import { getConfig } from "@/bin/config";
 import yaml from "yaml";
 import fs from "fs";
+import { user_funGetOneUserId } from "@/app_modules/fun_global";
 
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export default async function PageSplash() {
-  const c = cookies().get("ssn");
+  const userLoginId = await user_funGetOneUserId();
-  const tkn = !c
-    ? null
-    : JSON.parse(
-        await unsealData(c.value as string, {
-          password: (await getConfig()).server.password,
-        })
-      );
 
   return (
     <>
-      <SplashScreen data={tkn} />
+      <SplashScreen userLoginId={userLoginId} />
     </>
   );
 }

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

@@ -4,8 +4,10 @@ import { user_funGetOneUserId } from "@/app_modules/fun_global/get_user_token";
 import _ from "lodash";
 
 export default async function Page() {
-  const userId = await user_funGetOneUserId()
+  const userId = await user_funGetOneUserId();
   const listTipeAcara = await Event_getMasterTipeAcara();
 
-  return <Event_Create listTipeAcara={listTipeAcara as any} authorId={userId}/>;
+  return (
+    <Event_Create listTipeAcara={listTipeAcara as any} authorId={userId} />
+  );
 }

src/app/layout.tsx

@@ -1,16 +1,20 @@
 import MqttLoader from "@/util/mqtt_loader";
 import RootStyleRegistry from "./emotion";
-import { Container } from "@mantine/core";
+import "./globals.css";
-import './globals.css'
+import { TokenProvider } from "./lib/token";
+
+const token = process.env.WS_APIKEY;
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  if (!token) return <>require token</>;
   return (
     <RootStyleRegistry>
       <MqttLoader />
+      <TokenProvider token={token} />
       {children}
     </RootStyleRegistry>
   );

src/app/lib/APIs.ts

@@ -0,0 +1,7 @@
+const APIs = {
+  GET: "https://wibu-storage.wibudev.com/api/files/",
+};
+
+export default APIs
+
+

src/app/lib/api.ts

@@ -1,20 +0,0 @@
-export const ApiHipmi = {
-  // Get one token
-  get_token: "/api/user/get-token",
-  //  Auth
-  login: "/api/auth/login",
-  validasi: "/api/auth/validasi",
-  register: "/api/auth/register",
-  logout: "/api/auth/logout",
-
-  //Profile
-  create_profile: "/api/profile/create",
-  edit_profile: "/api/profile/edit",
-  get_foto: "/api/profile/foto/",
-
-  //Portofolio
-  create_portofolio: "/api/portofolio/create",
-
-  //Investasi
-  get_gambar_investasi: "/api/investasi/gambar"
-};

src/app/lib/id-derectory.ts

@@ -0,0 +1,14 @@
+const DIRECTORY_ID = {
+  profile_foto: "cm0x93rgo000jbp5tj8baoaus",
+  profile_background: "cm0x93ze8000lbp5t1a8uc9wl",
+  portofolio_logo: "cm0yjl6ug000310njwmk6j0tx",
+  map_pin: "cm0yjq8up000710njv5klra32",
+  map_image: "cm0yjqnxl000910njplqho07w",
+  investasi_image: "cm0yjs35h000b10njb35o12h1",
+  investasi_bukti_transfer: "cm0yjsflu000d10njrc3lnqho",
+  donasi_image: "cm0yk1coh000f10nj597a99kv",
+  donasi_bukti_transfer: "cm0yk1pmh000h10njhi6m8b8t",
+  job_image: "cm0ypp6zl0003kp7jf59zuvjy",
+};
+
+export default DIRECTORY_ID;

src/app/lib/index.ts

@@ -0,0 +1,7 @@
+import APIs from "./APIs";
+import DIRECTORY_ID from "./id-derectory";
+import prisma from "./prisma";
+
+export { DIRECTORY_ID };
+export { prisma };
+export { APIs };

src/app/lib/token.ts

@@ -0,0 +1,18 @@
+"use client";
+
+class TokenStorage {
+  static value = "";
+  static get() {
+    return TokenStorage.value;
+  }
+  static set(value: string) {
+    TokenStorage.value = value;
+  }
+}
+
+function TokenProvider({ token }: { token: string }) {
+  TokenStorage.set(token);
+  return null;
+}
+
+export { TokenStorage, TokenProvider };

src/app_modules/_global/component/box_information.tsx

@@ -3,10 +3,12 @@ import { AccentColor, MainColor } from "../color/color_pallet";
 
 export default function ComponentGlobal_BoxInformation({
   informasi,
- isReport,
+  isReport,
+  fonsize,
 }: {
   informasi: string;
   isReport?: boolean;
+  fonsize?: number | string;
 }) {
   return (
     <>
@@ -20,10 +22,15 @@ export default function ComponentGlobal_BoxInformation({
           }}
         >
           <Stack spacing={0}>
-            <Text fz={12} fs={"italic"} c={"orange"} fw={"bold"}>
+            <Text
+              fz={fonsize ? fonsize : 12}
+              fs={"italic"}
+              c={"orange"}
+              fw={"bold"}
+            >
               * Report
             </Text>
-            <Text fz={12} c={"white"}>
+            <Text fz={fonsize ? fonsize : 12} c={"white"}>
               {informasi}
             </Text>
           </Stack>
@@ -38,7 +45,7 @@ export default function ComponentGlobal_BoxInformation({
           }}
         >
           <Group>
-            <Text fz={12} c={"red"} fw={"bold"}>
+            <Text fz={fonsize ? fonsize : 12} c={"red"} fw={"bold"}>
               *{" "}
               <Text span inherit c={"white"} fw={"normal"}>
                 {informasi}

src/app_modules/_global/component/comp_card_box_and_background.tsx

@@ -0,0 +1,43 @@
+import { AccentColor } from "@/app_modules/_global/color";
+import { Card } from "@mantine/core";
+import React from "react";
+
+export function ComponentGlobal_CardStyles({
+  children,
+  backgroundColor,
+  border,
+  marginBottom,
+  height,
+  color,
+  onClickHandler,
+}: {
+  children: React.ReactNode;
+  backgroundColor?: string;
+  border?: string;
+  marginBottom?: string | number;
+  height?: string | number;
+  color?: string;
+  onClickHandler?: React.MouseEventHandler<HTMLDivElement>;
+}) {
+  return (
+    <>
+      <Card
+        style={{
+          backgroundColor: backgroundColor
+            ? backgroundColor
+            : AccentColor.darkblue,
+          border: `2px solid ${border ? border : AccentColor.blue}`,
+          paddingInline: "15px",
+          paddingBlock: "15px",
+          borderRadius: "10px",
+          color: color ? color : "white",
+          height: height ? height : "auto",
+          marginBottom: marginBottom ? marginBottom : "0x",
+        }}
+        onClick={onClickHandler}
+      >
+        {children}
+      </Card>
+    </>
+  );
+}

src/app_modules/_global/component/index.ts

@@ -1,9 +1,15 @@
+import ComponentGlobal_BoxInformation from "./box_information";
 import ComponentGlobal_AvatarAndAuthorName from "./comp_author_name_and_avatar";
+import { ComponentGlobal_CardStyles } from "./comp_card_box_and_background";
 import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
 import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
 import ComponentGlobal_TampilanRupiah from "./comp_tampilan_rupiah";
+import ComponentGlobal_InputCountDown from "./input_countdown";
 
 export { ComponentGlobal_TampilanRupiah };
 export { ComponentGlobal_TampilanAngkaRatusan };
 export { ComponentGlobal_AvatarAndAuthorName };
 export { ComponentGlobal_CardLoadingOverlay };
+export { ComponentGlobal_BoxInformation };
+export { ComponentGlobal_InputCountDown };
+export { ComponentGlobal_CardStyles };

src/app_modules/_global/component/loader.tsx

@@ -1,10 +1,20 @@
 import { Loader } from "@mantine/core";
 import { MainColor } from "../color/color_pallet";
 
-export default function ComponentGlobal_Loader({ size }: { size?: number }) {
+export default function ComponentGlobal_Loader({
+  size,
+  variant,
+}: {
+  size?: number;
+  variant?: "dots" | "bars" | "oval";
+}) {
   return (
     <>
-      <Loader color={MainColor.yellow} size={size ? size : 20} />
+      <Loader
+        variant={variant ? variant : "oval"}
+        color={MainColor.yellow}
+        size={size ? size : 20}
+      />
     </>
   );
 }

src/app_modules/_global/fun/index.ts

@@ -0,0 +1,3 @@
+import { funGlobal_UploadToStorage } from "./upload/fun_upload_to_storage";
+
+export { funGlobal_UploadToStorage };

src/app_modules/_global/fun/upload/fun_upload_to_storage.ts

@@ -0,0 +1,55 @@
+import { TokenStorage } from "@/app/lib/token";
+
+export async function funGlobal_UploadToStorage({
+  file,
+  dirId,
+}: {
+  file: File;
+  dirId: string;
+}) {
+  if (!file) console.log("Tidak ada file");
+
+  const allowedMimeTypes = [
+    "image/png",
+    "image/jpeg",
+    "image/gif",
+    "text/csv",
+    "application/pdf",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "application/vnd.ms-excel",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "text/plain",
+  ];
+
+  if (!allowedMimeTypes.includes(file.type)) console.log("File tidak sesuai");
+
+  if (file.size > 100 * 1024 * 1024) console.log("File terlalu besar");
+
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("dirId", dirId);
+
+  try {
+    const res = await fetch("https://wibu-storage.wibudev.com/api/upload", {
+      method: "POST",
+      body: formData,
+      headers: {
+        Authorization: `Bearer ${TokenStorage.value}`,
+      },
+    });
+
+    const dataRes = await res.json();
+
+    if (res.ok) {
+      return { success: true, data: dataRes.data };
+    } else {
+      const errorText = await res.text();
+      console.error("Error:", errorText);
+      return { success: false, data: {} };
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    return { success: false, data: {} };
+  }
+}

src/app_modules/_global/notif_global/index.ts

@@ -0,0 +1,7 @@
+import { ComponentGlobal_NotifikasiBerhasil } from "./notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "./notifikasi_gagal";
+import { ComponentGlobal_NotifikasiPeringatan } from "./notifikasi_peringatan";
+
+export { ComponentGlobal_NotifikasiBerhasil };
+export { ComponentGlobal_NotifikasiGagal };
+export { ComponentGlobal_NotifikasiPeringatan };

src/app_modules/admin/_admin_global/logout.tsx

@@ -1,6 +1,9 @@
 "use client";
-import { myConsole } from "@/app/fun/my_console";
+import { Warna } from "@/app/lib/warna";
-import { ApiHipmi } from "@/app/lib/api";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { auth_Logout } from "@/app_modules/auth/fun/fun_logout";
+import { gs_kodeId } from "@/app_modules/auth/state/state";
 import {
   ActionIcon,
   Button,
@@ -10,15 +13,10 @@ import {
   Stack,
   Title,
 } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import { useAtom } from "jotai";
-import { IconLogout } from "@tabler/icons-react";
-import { Warna } from "@/app/lib/warna";
 import { useDisclosure } from "@mantine/hooks";
-import { gs_kodeId, gs_nomor, gs_otp } from "@/app_modules/auth/state/state";
+import { IconLogout } from "@tabler/icons-react";
-import { auth_Logout } from "@/app_modules/auth/fun/fun_logout";
+import { useAtom } from "jotai";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { useRouter } from "next/navigation";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { useState } from "react";
 
 export default function Admin_Logout() {

src/app_modules/admin/job/child/arsip/index.tsx

@@ -1,40 +1,21 @@
 "use client";
 
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
-import { adminEvent_getListPesertaById } from "@/app_modules/admin/event/fun/get/get_list_peserta_by_id";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import {
-  MODEL_EVENT,
-  MODEL_EVENT_PESERTA,
-} from "@/app_modules/event/model/interface";
 import { MODEL_JOB } from "@/app_modules/job/model/interface";
 import {
-  MODEL_VOTE_KONTRIBUTOR,
-  MODEL_VOTING,
-  MODEL_VOTING_DAFTAR_NAMA_VOTE,
-} from "@/app_modules/vote/model/interface";
-import {
-  Avatar,
-  Badge,
   Box,
   Button,
-  Card,
   Center,
-  Divider,
-  Grid,
-  Group,
   Modal,
-  Paper,
   ScrollArea,
   Spoiler,
   Stack,
   Table,
   Text,
-  Title,
+  Title
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { IconEyeCheck, IconEyeShare } from "@tabler/icons-react";
+import { IconEyeCheck } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -74,13 +55,13 @@ function TableStatus({ listArsip }: { listArsip: MODEL_JOB[] }) {
         </td>
         <td>
           <Center w={150}>
-            {e.imagesId ? (
+            {e.imageId ? (
               <Button
                 color="green"
                 radius={"xl"}
                 leftIcon={<IconEyeCheck />}
                 onClick={() => {
-                  setImg(e.imagesId);
+                  setImg(e.imageId);
                   open();
                 }}
               >

src/app_modules/admin/job/child/publish/index.tsx

@@ -16,16 +16,14 @@ import {
   Table,
   Text,
   TextInput,
-  Title
+  Title,
 } from "@mantine/core";
-import {
+import { IconEyeCheck, IconSearch } from "@tabler/icons-react";
-  IconEyeCheck,
-  IconSearch
-} from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import adminJob_getListPublish from "../../fun/get/get_list_publish";
 import { IconPhotoCheck } from "@tabler/icons-react";
+import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
 
 export default function AdminJob_TablePublish({
   dataPublish,
@@ -49,7 +47,7 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
   const [nPage, setNPage] = useState(dataPublish.nPage);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
-
+  const [isLoadingShowImage, setLoadingShowImage] = useState(false);
 
   async function onSearch(s: string) {
     setSearch(s);
@@ -102,19 +100,22 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
       </td>
       <td>
         <Center w={200}>
-          {e.imagesId ? (
+          {e.imageId ? (
             <Button
+              loaderPosition="center"
+              loading={isLoadingShowImage}
               color="green"
               radius={"xl"}
               leftIcon={<IconPhotoCheck />}
               onClick={() => {
-                router.push(RouterAdminJob.detail_poster + e?.imagesId);
+                setLoadingShowImage(true);
+                router.push(RouterAdminJob.detail_poster + e?.imageId);
               }}
             >
               Lihat
             </Button>
           ) : (
-            <Center w={200} >
+            <Center w={200}>
               <Text fw={"bold"} fz={"xs"} fs={"italic"}>
                 Tidak ada poster
               </Text>
@@ -147,28 +148,22 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
 
   return (
     <>
-      
-
       <Stack spacing={"xs"} h={"100%"}>
         {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
-        <Group
+        <ComponentAdminGlobal_TitlePage
-          position="apart"
+          name="Publish"
-          bg={"green.4"}
+          color="green.4"
-          p={"xs"}
+          component={
-          style={{ borderRadius: "6px" }}
+            <TextInput
-        >
+              icon={<IconSearch size={20} />}
-          <Title order={4} c={"white"}>
+              radius={"xl"}
-            Publish
+              placeholder="Masukan judul"
-          </Title>
+              onChange={(val) => {
-          <TextInput
+                onSearch(val.currentTarget.value);
-            icon={<IconSearch size={20} />}
+              }}
-            radius={"xl"}
+            />
-            placeholder="Masukan judul"
+          }
-            onChange={(val) => {
+        />
-              onSearch(val.currentTarget.value);
-            }}
-          />
-        </Group>
 
         <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
@@ -217,8 +212,6 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
           </Center>
         </Paper>
       </Stack>
-
-     
     </>
   );
 }

src/app_modules/admin/job/child/reject/index.tsx

@@ -97,13 +97,13 @@ function TableStatus({ listReject }: { listReject: any }) {
       </td>
       <td>
         <Center w={150}>
-          {e.imagesId ? (
+          {e.imageId ? (
             <Button
               color="green"
               radius={"xl"}
               leftIcon={<IconPhotoCheck />}
               onClick={() => {
-                router.push(RouterAdminJob.detail_poster + e?.imagesId);
+                router.push(RouterAdminJob.detail_poster + e?.imageId);
               }}
             >
               Lihat

src/app_modules/admin/job/child/review/index.tsx

@@ -85,7 +85,7 @@ function TableStatus({ listReview }: { listReview: any }) {
 
   async function onSearch(s: string) {
     setSearch(s);
-    setActivePage(1)
+    setActivePage(1);
     const loadData = await adminJob_getListReview({
       page: 1,
       search: s,
@@ -123,13 +123,13 @@ function TableStatus({ listReview }: { listReview: any }) {
       </td>
       <td>
         <Center w={200}>
-          {e.imagesId ? (
+          {e.imageId ? (
             <Button
               color="green"
               radius={"xl"}
               leftIcon={<IconPhotoCheck />}
               onClick={() => {
-                router.push(RouterAdminJob.detail_poster + e?.imagesId);
+                router.push(RouterAdminJob.detail_poster + e?.imageId);
               }}
             >
               Lihat

src/app_modules/admin/job/detail/detail_poster.tsx

@@ -3,23 +3,30 @@
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { Center, Image, Stack } from "@mantine/core";
 import ComponentAdminGlobal_BackButton from "../../_admin_global/back_button";
+import { APIs } from "@/app/lib";
+import { useState } from "react";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 
 export default function AdminJob_DetailPoster({
   imageId,
 }: {
   imageId: string;
 }) {
+  const [isLoading, setLoading] = useState(true);
+
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_BackButton />
         <Center>
-          <Image
+          <Image onLoad={() => setLoading(false)} alt="Foto" src={APIs.GET + imageId} mah={500} maw={300} />
-            alt="Foto"
+          {isLoading ? (
-            src={RouterJob.api_gambar + imageId}
+            <Center h={"100%"}>
-            mah={500}
+              <ComponentGlobal_Loader size={30} variant="dots" />
-            maw={300}
+            </Center>
-          />
+          ) : (
+            ""
+          )}
         </Center>
       </Stack>
     </>

src/app_modules/admin/job/fun/get/get_list_publish.ts

@@ -27,19 +27,8 @@ export default async function adminJob_getListPublish({
         mode: "insensitive",
       },
     },
-    select: {
+    include: {
-      id: true,
-      title: true,
-      isActive: true,
-      isArsip: true,
-      createdAt: true,
-      updatedAt: true,
-      content: true,
-      deskripsi: true,
-      catatan: true,
-      authorId: true,
       Author: true,
-      imagesId: true,
     },
   });
 

src/app_modules/admin/job/fun/get/get_list_reject.ts

@@ -27,18 +27,8 @@ export default async function adminJob_getListReject({
         mode: "insensitive",
       },
     },
-    select: {
+    include: {
-      id: true,
-      title: true,
-      isActive: true,
-      createdAt: true,
-      updatedAt: true,
-      content: true,
-      deskripsi: true,
-      catatan: true,
-      authorId: true,
       Author: true,
-      imagesId: true,
     },
   });
 

src/app_modules/admin/job/fun/get/get_list_review.ts

@@ -27,18 +27,8 @@ export default async function adminJob_getListReview({
         mode: "insensitive",
       },
     },
-    select: {
+    include: {
-      id: true,
-      title: true,
-      isActive: true,
-      createdAt: true,
-      updatedAt: true,
-      content: true,
-      deskripsi: true,
-      catatan: true,
-      authorId: true,
       Author: true,
-      imagesId: true,
     },
   });
 

src/app_modules/admin/job/fun/get/get_list_table_by_status_id.ts

@@ -13,19 +13,8 @@ export async function AdminJob_getListTableByStatusId(statusId: string) {
         isActive: true,
         isArsip: true,
       },
-      select: {
+      include: {
-        id: true,
-        title: true,
-        isActive: true,
-        isArsip: true,
-        createdAt: true,
-        updatedAt: true,
-        content: true,
-        deskripsi: true,
-        catatan: true,
-        authorId: true,
         Author: true,
-        imagesId: true,
       },
     });
 
@@ -41,18 +30,8 @@ export async function AdminJob_getListTableByStatusId(statusId: string) {
         isActive: true,
         isArsip: false,
       },
-      select: {
+      include: {
-        id: true,
-        title: true,
-        isActive: true,
-        createdAt: true,
-        updatedAt: true,
-        content: true,
-        deskripsi: true,
-        catatan: true,
-        authorId: true,
         Author: true,
-        imagesId: true,
       },
     });
 
@@ -67,18 +46,8 @@ export async function AdminJob_getListTableByStatusId(statusId: string) {
         masterStatusId: "2",
         isActive: true,
       },
-      select: {
+      include: {
-        id: true,
-        title: true,
-        isActive: true,
-        createdAt: true,
-        updatedAt: true,
-        content: true,
-        deskripsi: true,
-        catatan: true,
-        authorId: true,
         Author: true,
-        imagesId: true,
       },
     });
 
@@ -94,18 +63,8 @@ export async function AdminJob_getListTableByStatusId(statusId: string) {
         masterStatusId: "4",
         isActive: true,
       },
-      select: {
+      include: {
-        id: true,
-        title: true,
-        isActive: true,
-        createdAt: true,
-        updatedAt: true,
-        content: true,
-        deskripsi: true,
-        catatan: true,
-        authorId: true,
         Author: true,
-        imagesId: true,
       },
     });
 

src/app_modules/auth/splash/view.tsx

@@ -13,11 +13,11 @@ import {
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 
-export default function SplashScreen({ data }: { data: any }) {
+export default function SplashScreen({ userLoginId }: { userLoginId: any }) {
   const router = useRouter();
 
   useShallowEffect(() => {
-    if (!data) {
+    if (!userLoginId) {
       setTimeout(() => {
         return router.push("/dev/auth/login", { scroll: false });
       }, 1000);
@@ -38,8 +38,13 @@ export default function SplashScreen({ data }: { data: any }) {
         <Center h={"100vh"}>
           <Stack align="center" justify="center" p={"md"}>
             {/* <Title c={"#002e59"}>Welcome to</Title> */}
-            <Avatar size={300} radius={"100%"} >
+            <Avatar size={300} radius={"100%"}>
-              <Image  height={250} width={250} alt="Logo" src={"/aset/logo/logo-hipmi.png"} />
+              <Image
+                height={250}
+                width={250}
+                alt="Logo"
+                src={"/aset/logo/logo-hipmi.png"}
+              />
             </Avatar>
           </Stack>
         </Center>

src/app_modules/fun_global/get_user_token.ts

@@ -6,11 +6,14 @@ import fs from "fs";
 import { unsealData } from "iron-session";
 import { redirect } from "next/navigation";
 import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
+import _ from "lodash";
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export async function user_funGetOneUserId() {
-  const c = cookies().get("ssn");
+  const kukis = cookies();
-  if (!c?.value || c.value === "") return redirect(RouterAuth.login);
+  const c = kukis.get("ssn");
+  if (!c || !c?.value || _.isEmpty(c?.value) || _.isUndefined(c?.value))
+    return redirect(RouterAuth.login);
 
   const token = JSON.parse(
     await unsealData(c?.value as string, {
@@ -18,5 +21,5 @@ export async function user_funGetOneUserId() {
     })
   );
 
-  return token.id
+  return token.id;
 }

src/app_modules/investasi/_component/comp_card_border_and_background.tsx

@@ -1,7 +1,6 @@
 import { AccentColor } from "@/app_modules/_global/color";
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 import { Card } from "@mantine/core";
-import React, { useState } from "react";
+import React from "react";
 
 export function Investasi_ComponentStylesCard({
   children,
@@ -16,7 +15,6 @@ export function Investasi_ComponentStylesCard({
   marginBottom?: string | number;
   onClickHandler?: React.MouseEventHandler<HTMLDivElement>;
 }) {
-
   return (
     <>
       <Card

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;

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

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

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 { APIs } from "@/app/lib";
-import { MODEL_JOB } from "../../model/interface";
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 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=""
+                    style={{ zIndex: 2, position: "relative" }}
-                    src={
+                    onLoad={() => {
-                      data.imagesId ? RouterJob.api_gambar + data.imagesId : ""
+                      setIsLoading(false);
-                    }
+                    }}
-                    height={300}
+                    onError={() => {
-                    width={200}
+                      setIsLoading(false);
+                    }}
+                    alt="Image"
+                    src={APIs.GET + data?.imageId}
+                    maw={200}
                   />
                 </Stack>
               ) : (

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 };

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

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 {
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+  ComponentGlobal_BoxInformation,
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+  ComponentGlobal_CardStyles,
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+  ComponentGlobal_InputCountDown,
-import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+} from "@/app_modules/_global/component";
-import mqtt_client from "@/util/mqtt_client";
+import {
-import { useShallowEffect } from "@mantine/hooks";
+  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(() => {
+  // useShallowEffect(() => {
-    if (window && window.document) setReload(true);
+  //   if (window && window.document) setReload(true);
-  }, []);
+  // }, []);
 
   return (
-    <>
+    <Stack>
-      {!reload ? (
+      <ComponentGlobal_BoxInformation informasi="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja. " />
-        <Center h={"50vh"}>
+
-          <Loader color={MainColor.yellow} />
+      <Stack spacing={"xs"}>
-        </Center>
+        <Job_ComponentBoxUploadImage>
-      ) : (
+          {img ? (
-        <Stack spacing={40}>
+            <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
-          <Stack align="center" spacing={"xs"}>
+              <Image
-            {images ? (
+                style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
-              <Image alt="" src={images} height={300} width={200} />
+                alt="Foto"
-            ) : (
+                height={250}
-              <Paper h={300} w={200} withBorder shadow="lg" bg={"gray.1"}>
+                src={img}
-                <Stack justify="center" align="center" h={"100%"}>
+              />
-                  <IconUpload color="gray" />
+            </AspectRatio>
-                  <Text fz={10} fs={"italic"} c={"gray"} fw={"bold"}>
+          ) : (
-                    Upload Gambar
+            <Stack justify="center" align="center" h={"100%"}>
-                  </Text>
+              <IconUpload color="white" />
-                </Stack>
+              <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
-              </Paper>
+                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>
-            <FileButton
+        </Center>
-              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>
       </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>
   );
 }

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 [img, setImg] = useState<any | null>();
-  const [maxFile, setMaxFile] = useState(false);
 
-  useShallowEffect(() => {
+  // useShallowEffect(() => {
-    if (window && window.document) setReload(true);
+  //   if (window && window.document) setReload(true);
-  }, []);
+  // }, []);
 
   return (
     <>
-      {!reload ? (
+      <Stack>
-        <Center h={"50vh"}>
+        <Stack spacing={"xs"}>
-          <Loader color={MainColor.yellow} />
+          <Job_ComponentBoxUploadImage>
-        </Center>
+            {value.imageId ? (
-      ) : (
+              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
-        <Stack py={"md"} spacing={40}>
+                <Image
-          <Stack align="center">
+                  style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
-            {images ? (
+                  alt="Foto"
-              <Image alt="" src={images} mah={500} maw={200} />
+                  height={250}
-            ) : value.imagesId ? (
+                  src={img ? img : APIs.GET + value.imageId}
-              <Image
+                />
-                height={300}
+              </AspectRatio>
-                width={200}
-                alt="Foto"
-                src={RouterJob.api_gambar + value.imagesId}
-              />
             ) : (
-              <Paper h={300} w={200} withBorder shadow="lg" bg={"gray.1"}>
+              <Stack justify="center" align="center" h={"100%"}>
-                <Stack justify="center" align="center" h={"100%"}>
+                <IconUpload color="white" />
-                  <IconUpload color="gray" />
+                <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
-                  <Text fz={10} fs={"italic"} c={"gray"} fw={"bold"}>
+                  Upload Gambar
-                    Upload Gambar
+                </Text>
-                  </Text>
+              </Stack>
-                </Stack>
-              </Paper>
             )}
+          </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) {
+                  setImg(buffer);
-                    // setMaxFile(true);
+                  setFile(files);
-                    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);
-                  }
                 } 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
+        <ComponentGlobal_CardStyles color="black">
-            spacing={"lg"}
+          <Stack>
-            p={"md"}
-            style={{
-              backgroundColor: MainColor.darkblue,
-              border: `2px solid ${AccentColor.blue}`,
-              borderRadius: "5px 5px 5px 5px",
-            }}
-          >
             <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} />
+        <Job_ComponentButtonUpdate value={value as any} file={file as any} />
-        </Stack>
+      </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>
-    </>
-  );
-}

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",
-    };
-  }
-}

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,
+  };
+}

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

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) {
+export async function job_EditById({
-  //   console.log(file);
+  data,
-  //   console.log(req);
+  imageId,
-  //   return { status: 200 };
+}: {
-
+  data: MODEL_JOB;
-  const dataImage: any = file.get("file");
+  imageId?: string;
-  if (dataImage !== "null") {
+}) {
-    const fileName = dataImage.name;
+  if (imageId == undefined) {
-    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);
-
     const updt = await prisma.job.update({
       where: {
-        id: req.id,
+        id: data.id,
       },
       data: {
-        title: req.title,
+        title: data.title,
-        content: req.content,
+        content: data.content,
-        deskripsi: req.deskripsi,
+        deskripsi: data.deskripsi,
-        imagesId: upload.id,
       },
     });
-
     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,
+        title: data.title,
-        content: req.content,
+        content: data.content,
-        deskripsi: req.deskripsi,
+        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",
     };
   }
 }

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,

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 };

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
+  MasterStatus: MODEL_NEW_DEFAULT_MASTER;
-  imagesId: string
+  masterStatusId: string;
-  MasterStatus: MODEL_NEW_DEFAULT_MASTER
+  imageId: string;
-  masterStatusId: string
 }

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={
+                    src={APIs.GET + data.imageId}
-                      data.imagesId ? RouterJob.api_gambar + data.imagesId : ""
+                    maw={200}
-                    }
-                    height={300}
-                    width={200}
                   />
                 </Stack>
               ) : (

src/app_modules/notifikasi/fun/index.ts

@@ -0,0 +1,9 @@
+import notifikasiToAdmin_funCreate from "./create/create_notif_to_admin";
+import notifikasiToUser_funCreate from "./create/create_notif_to_user";
+import { notifikasiToUser_CreateGroupCollaboration } from "./create/create_notif_to_user_collaboration";
+import { notifikasiToUser_CreateKabarDonasi } from "./create/create_notif_to_user_kabar_donasi";
+
+export { notifikasiToAdmin_funCreate };
+export { notifikasiToUser_CreateGroupCollaboration };
+export { notifikasiToUser_CreateKabarDonasi };
+export { notifikasiToUser_funCreate };

src/app_modules/notifikasi/ui/ui_notifiaksi.tsx

@@ -21,17 +21,15 @@ import {
   gs_vote_status,
 } from "@/app_modules/vote/global_state";
 import { Box, Button, Center, Flex, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { useAtom } from "jotai";
-import _, { find } from "lodash";
+import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
-import { ComponentNotifikasi_CardSkeleton } from "../component";
 import { ComponentNotifiaksi_CardView } from "../component/card_view";
 import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
-import { MODEL_NOTIFIKASI } from "../model/interface";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { gs_notifikasi_kategori_app } from "../lib";
-import { useShallowEffect } from "@mantine/hooks";
+import { MODEL_NOTIFIKASI } from "../model/interface";
 
 export function Notifikasi_UiView({
   listNotifikasi,

src/app_modules/zCoba/ui_coba_upload_file.tsx

@@ -0,0 +1,219 @@
+import { TokenStorage } from "@/app/lib/token";
+import {
+  Box,
+  Button,
+  Card,
+  Center,
+  FileButton,
+  Image,
+  Paper,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconCamera, IconUpload } from "@tabler/icons-react";
+import { useState } from "react";
+import { AccentColor, MainColor } from "../_global/color";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "../_global/notif_global";
+import { DIRECTORY_ID } from "@/app/lib";
+import { funGlobal_UploadToStorage } from "../_global/fun";
+
+export default function Coba_UploadFile() {
+  const [data, setData] = useState<any>();
+  const [file, setFile] = useState<File | null>(null);
+  const [images, setImages] = useState<any | null>();
+
+  async function loadListDir(setData: any) {
+    const rootDirEndPoint = await fetch(
+      "https://wibu-storage.wibudev.com/api/dir/root/list",
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${TokenStorage.value}`,
+        },
+      }
+    );
+    const dataDir = await rootDirEndPoint.json();
+    // console.log(dataDir);
+
+    const dirHipmiEndPoint = await fetch(
+      `https://wibu-storage.wibudev.com/api/dir/${dataDir.dirs[0].id}/list`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${TokenStorage.value}`,
+        },
+      }
+    );
+
+    const hipmiDir = await dirHipmiEndPoint.json();
+    // console.log(hipmiDir.dirs[0]);
+    setData(hipmiDir.dirs[0]);
+  }
+
+  // async function CcekToken() {
+  //    const rootDirEndPoint = await fetch(
+  //      "https://wibu-storage.wibudev.com/api/dir/root/list",
+  //      {
+  //        method: "GET",
+  //        headers: {
+  //          "Content-Type": "application/json",
+  //          Authorization: `Bearer ${process.env.WS_APIKEY}`,
+  //        },
+  //      }
+  //    );
+  //    const dataDir = await rootDirEndPoint.json();
+  //    console.log(dataDir);
+  // }
+
+  useShallowEffect(() => {
+    loadListDir(setData);
+    // CekToken()
+  }, [setData]);
+
+  const [imagesId, setImagesId] = useState("");
+  return (
+    <Stack bg={"gray"} h={"100vh"}>
+      <Stack p={"lg"} bg={"gray"}>
+        <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>
+          )}
+
+          <FileButton
+            onChange={async (files: any | null) => {
+              try {
+                const buffer = URL.createObjectURL(
+                  new Blob([new Uint8Array(await files.arrayBuffer())])
+                );
+                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>
+
+        <Center>
+          <Button
+            onClick={async () => {
+              const res = await funGlobal_UploadToStorage({
+                file: file as any,
+                dirId: DIRECTORY_ID.job_image,
+              });
+
+              console.log(res?.data?.id);
+            }}
+          >
+            Simpan
+          </Button>
+        </Center>
+      </Stack>
+      {/* <Stack p={"lg"}>
+        <pre>{JSON.stringify(data, null, 2)}</pre>
+      </Stack> */}
+
+      {/* <Card>
+        <Image
+          height={200}
+          width={150}
+          mah={300}
+          maw={200}
+          alt="Foto"
+          src={
+            "https://wibu-storage.wibudev.com/api/files/cm0xihezt000nacbb89k2zo1j"
+          }
+        />
+      </Card> */}
+    </Stack>
+  );
+}
+
+async function coba_ButtonFileUpload({
+  file,
+  dirId,
+  onDone,
+}: {
+  file: File;
+  dirId: string;
+  onDone: () => void;
+}) {
+  if (!file) return ComponentGlobal_NotifikasiPeringatan("Tidak ada file");
+
+  const allowedMimeTypes = [
+    "image/png",
+    "image/jpeg",
+    "image/gif",
+    "text/csv",
+    "application/pdf",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "application/vnd.ms-excel",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "text/plain",
+  ];
+
+  if (!allowedMimeTypes.includes(file.type))
+    return ComponentGlobal_NotifikasiPeringatan("File tidak sesuai");
+
+  if (file.size > 100 * 1024 * 1024)
+    return ComponentGlobal_NotifikasiPeringatan("File terlalu besar");
+
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("dirId", dirId);
+
+  try {
+    const res = await fetch("https://wibu-storage.wibudev.com/api/upload", {
+      method: "POST",
+      body: formData,
+      headers: {
+        Authorization: `Bearer ${TokenStorage.value}`,
+      },
+    });
+
+    const dataRes = await res.json();
+
+    if (res.ok) {
+      console.log("File Sukses Di Upload");
+      console.log(dataRes);
+    } else {
+      const errorText = await res.text();
+      console.log("jika error", errorText);
+    }
+  } catch (error) {
+    console.error("Upload error:", error);
+  } finally {
+    onDone();
+  }
+}