fix admin job

- fix detail job

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

@@ -1,13 +1,9 @@
 import { AdminJob_TableReject } from "@/app_modules/admin/job";
-import adminJob_getListReject from "@/app_modules/admin/job/fun/get/get_list_reject";
-import { AdminJob_getListTableByStatusId } from "@/app_modules/admin/job/fun/get/get_list_table_by_status_id";
 
 export default async function Page() {
-  
-
   return (
     <>
-      <AdminJob_TableReject  />
+      <AdminJob_TableReject />
     </>
   );
 }

src/app_modules/admin/job/_components/detail/image_view.tsx

@@ -1,24 +1,38 @@
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { Admin_ComponentBoxStyle } from "@/app_modules/admin/_admin_global/_component/comp_admin_boxstyle";
-import { APIs } from "@/lib";
+import { APIs, pathAssetImage } from "@/lib";
 import { Center, Image } from "@mantine/core";
+import { IconError404 } from "@tabler/icons-react";
 import { data } from "autoprefixer";
 import { useState } from "react";
 
 export function AdminJob_ComponentImageView({ imageId }: { imageId: string }) {
   const [isLoading, setLoading] = useState(false);
+  const [isError, setError] = useState(false);
 
   return (
     <>
       <Admin_ComponentBoxStyle>
         <Center h={"100%"}>
-          <Image
+          {isError ? (
-            onLoad={() => setLoading(false)}
+            <Image
-            alt="Foto"
+              height={100}
-            src={APIs.GET({ fileId: imageId })}
+              width={100}
-            mah={500}
+              alt="Error image"
-            maw={300}
+              src={pathAssetImage.no_image}
-          />
+            />
+          ) : (
+            <Image
+              onLoad={() => setLoading(false)}
+              onError={() => {
+                setError(true);
+              }}
+              alt="Foto"
+              src={APIs.GET({ fileId: imageId })}
+              mah={500}
+              maw={300}
+            />
+          )}
         </Center>
         {isLoading ? (
           <Center h={"100%"}>

src/app_modules/admin/job/_components/detail/reject.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_InputCountDown } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+} from "@/app_modules/_global/notif_global";
+import { Admin_ComponentBoxStyle } from "@/app_modules/admin/_admin_global/_component/comp_admin_boxstyle";
+import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
+import { MODEL_JOB } from "@/app_modules/job/model/interface";
+import { IRealtimeData } from "@/lib/global_state";
+import {
+  Button,
+  Grid,
+  Group,
+  Modal,
+  SimpleGrid,
+  Stack,
+  Text,
+  Textarea,
+} from "@mantine/core";
+import { IconBan } from "@tabler/icons-react";
+import { useState } from "react";
+import { WibuRealtime } from "wibu-pkg";
+import { AdminJob_funEditCatatanById } from "../../fun/edit/fun_edit_catatan_by_id";
+import { AdminJob_ComponentImageView } from "./image_view";
+
+export function AdminJob_DetailReject({ data }: { data: MODEL_JOB }) {
+  const [isLoading, setLoading] = useState(false);
+  const [isModal, setModal] = useState(false);
+  const [newData, setNewData] = useState<MODEL_JOB>(data);
+  const [catatan, setCatatan] = useState(data.catatan);
+
+  const listData = [
+    {
+      title: "Username",
+      value: newData.Author.username,
+    },
+    {
+      title: "Judul",
+      value: newData.title,
+    },
+    {
+      title: "Report",
+      value: newData.catatan,
+    },
+    {
+      title: "Konten",
+      value: <div dangerouslySetInnerHTML={{ __html: newData.content }} />,
+    },
+    {
+      title: "Deskripsi",
+      value: <div dangerouslySetInnerHTML={{ __html: newData.deskripsi }} />,
+    },
+  ];
+
+  async function onReject() {
+    try {
+      setLoading(true);
+      const reject = await AdminJob_funEditCatatanById(newData.id, catatan);
+      if (reject.status === 200) {
+        const dataNotifikasi: IRealtimeData = {
+          appId: reject.data?.id as any,
+          status: reject.data?.MasterStatus?.name as any,
+          userId: reject.data?.authorId as any,
+          pesan: reject.data?.title as any,
+          kategoriApp: "JOB",
+          title: "Report tambahan",
+        };
+
+        const notif = await adminNotifikasi_funCreateToUser({
+          data: dataNotifikasi as any,
+        });
+
+        if (notif.status === 201) {
+          WibuRealtime.setData({
+            type: "notification",
+            pushNotificationTo: "USER",
+            dataMessage: dataNotifikasi,
+          });
+        }
+        setModal(false);
+        setNewData({ ...newData, catatan: catatan });
+        ComponentGlobal_NotifikasiBerhasil(reject.message);
+      } else {
+        ComponentGlobal_NotifikasiGagal(reject.message);
+      }
+    } catch (error) {
+      console.log("Error reject", error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <>
+      <SimpleGrid cols={2}>
+        <Admin_ComponentBoxStyle>
+          {listData.map((item, index) => (
+            <Grid key={index}>
+              <Grid.Col span={2}>
+                <Text>{item.title}</Text>
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <Text>:</Text>
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>{item.value}</Text>
+              </Grid.Col>
+            </Grid>
+          ))}
+
+          <Group position="center" mt={"xl"}>
+            <Button
+              color={"red"}
+              leftIcon={<IconBan />}
+              radius={"xl"}
+              c={AdminColor.white}
+              onClick={() => {
+                setModal(true);
+              }}
+            >
+              Tambah Catatan
+            </Button>
+          </Group>
+        </Admin_ComponentBoxStyle>
+
+        {newData.imageId && (
+          <AdminJob_ComponentImageView imageId={newData.imageId} />
+        )}
+      </SimpleGrid>
+
+      <Modal
+        styles={{
+          header: { backgroundColor: AdminColor.softBlue },
+          body: { backgroundColor: AdminColor.softBlue },
+          title: { color: AdminColor.white },
+        }}
+        opened={isModal}
+        onClose={() => {
+          setModal(false);
+        }}
+        withCloseButton={false}
+        size={"sm"}
+        centered
+      >
+        <Stack>
+          <Stack spacing={5}>
+            <Textarea
+              minRows={3}
+              maxRows={5}
+              maxLength={300}
+              autosize
+              label={
+                <Text c={AdminColor.white} fw={"bold"}>
+                  Alasan Penolakan
+                </Text>
+              }
+              placeholder="Masukkan alasan penolakan lowongan ini"
+              value={catatan}
+              onChange={(val) => setCatatan(val.target.value)}
+            />
+            <ComponentGlobal_InputCountDown
+              lengthInput={newData.catatan.length}
+              maxInput={300}
+            />
+          </Stack>
+          <Group position="right">
+            <Button radius={"xl"} onClick={() => setModal(false)}>
+              Batal
+            </Button>
+            <Button
+              loading={isLoading}
+              loaderPosition="center"
+              style={{
+                transition: "0.5s",
+              }}
+              disabled={newData.catatan === "" ? true : false}
+              radius={"xl"}
+              onClick={() => {
+                onReject();
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}

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

@@ -1,17 +1,18 @@
 "use client";
 
-import { SimpleGrid, Stack, Text } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { MODEL_JOB } from "@/app_modules/job/model/interface";
+import { clientLogger } from "@/util/clientLogger";
+import { SimpleGrid, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
+import { useState } from "react";
 import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { useState } from "react";
-import { useShallowEffect } from "@mantine/hooks";
-import { clientLogger } from "@/util/clientLogger";
-import { apiGetOneJobById } from "../lib/api_fetch_admin_job";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { AdminJob_DetailPublish } from "../_components/detail/publish";
-import { MODEL_JOB } from "@/app_modules/job/model/interface";
+import { AdminJob_DetailReject } from "../_components/detail/reject";
 import { AdminJob_DetailReview } from "../_components/detail/review";
+import { apiGetOneJobById } from "../lib/api_fetch_admin_job";
 
 export function AdminJob_ViewDetailPublish() {
   const param = useParams<{ id: string }>();
@@ -28,7 +29,6 @@ export function AdminJob_ViewDetailPublish() {
       });
 
       if (response) {
-        console.log(response.data);
         setData(response.data);
       }
     } catch (error) {
@@ -50,6 +50,8 @@ export function AdminJob_ViewDetailPublish() {
           <AdminJob_DetailPublish data={data} />
         ) : data.MasterStatus.name === "Review" ? (
           <AdminJob_DetailReview data={data} />
+        ) : data.MasterStatus.name === "Reject" ? (
+          <AdminJob_DetailReject data={data} />
         ) : (
           ""
         )}

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

@@ -1,15 +1,19 @@
 "use client";
 
-import { IRealtimeData } from "@/lib/global_state";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { RouterAdminJob } from "@/lib/router_admin/router_admin_job";
 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 { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
 import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_JOB } from "@/app_modules/job/model/interface";
+import { IRealtimeData } from "@/lib/global_state";
+import { RouterAdminJob } from "@/lib/router_admin/router_admin_job";
+import { clientLogger } from "@/util/clientLogger";
 import {
+  Box,
   Button,
   Center,
   Group,
@@ -24,16 +28,16 @@ import {
   TextInput,
   Textarea,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconBan, IconPhotoCheck, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { WibuRealtime } from "wibu-pkg";
 import { AdminJob_funEditCatatanById } from "../../fun/edit/fun_edit_catatan_by_id";
 import adminJob_getListReject from "../../fun/get/get_list_reject";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { apiGetAdminJobByStatus } from "../../lib/api_fetch_admin_job";
-import { clientLogger } from "@/util/clientLogger";
+import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
-import { useShallowEffect } from "@mantine/hooks";
+import { RouterAdminGlobal } from "@/lib";
 
 export default function AdminJob_TableReject() {
   return (
@@ -55,8 +59,10 @@ function TableStatus() {
 
   const [reject, setReject] = useState(false);
   const [jobId, setJobId] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
+
   const [catatan, setCatatan] = useState("");
+  const [isLoadingShowImage, setLoadingShowImage] = useState(false);
+  const [dataId, setDataId] = useState("");
 
   useShallowEffect(() => {
     loadInitialData();
@@ -66,30 +72,30 @@ function TableStatus() {
       const response = await apiGetAdminJobByStatus({
         name: "Reject",
         page: `${activePage}`,
-        search: isSearch
+        search: isSearch,
       });
 
       if (response?.success && response?.data.data) {
         setData(response.data.data);
         setNPage(response.data.nPage || 1);
       } else {
-        console.error('Invalid data format recieved:', response)
+        console.error("Invalid data format recieved:", response);
         setData([]);
       }
     } catch (error) {
       clientLogger.error("Invalid data format recieced:", error);
-      setData([])
+      setData([]);
     }
-  }
+  };
 
   const onSearch = async (searchTerm: string) => {
     setSearch(searchTerm);
     setActivePage(1);
-  }
+  };
 
   const onPageClick = (page: number) => {
     setActivePage(page);
-  }
+  };
 
   const renderTableBody = () => {
     if (!Array.isArray(data) || data.length === 0) {
@@ -101,45 +107,47 @@ function TableStatus() {
             </Center>
           </td>
         </tr>
-      )
+      );
     }
+
     return data?.map((e, i) => (
       <tr key={i}>
         <td>
-          <Center w={150}>
+          <Center>
             <Text c={AdminColor.white}>{e?.Author?.username}</Text>
           </Center>
         </td>
+
         <td>
-          <Spoiler
+          <Center>
-            w={200}
+            <Box w={150}>
-            maxHeight={50}
+              <Text c={"white"} truncate>
-            hideLabel="sembunyikan"
+                {e.title}
-            showLabel="tampilkan"
+              </Text>
-            c={AdminColor.white}
+            </Box>
-          >
+          </Center>
-            {e.title}
-          </Spoiler>
         </td>
         <td>
-          <Center w={150}>
+          <Center>
             {e.imageId ? (
               <Button
-                loading={isLoading && e?.imageId === jobId}
                 loaderPosition="center"
+                loading={isLoadingShowImage && e.id === dataId}
                 color="green"
                 radius={"xl"}
                 leftIcon={<IconPhotoCheck />}
                 onClick={() => {
-                  setJobId(e?.imageId);
+                  setLoadingShowImage(true);
-                  setIsLoading(true);
+                  setDataId(e.id);
-                  router.push(RouterAdminJob.detail_poster + e?.imageId);
+                  router.push(
+                    RouterAdminGlobal.preview_image({ id: e.imageId })
+                  );
                 }}
               >
                 Lihat
               </Button>
             ) : (
-              <Center w={150}>
+              <Center>
                 <Text c={AdminColor.white} fw={"bold"} fz={"xs"} fs={"italic"}>
                   Tidak ada poster
                 </Text>
@@ -148,58 +156,110 @@ function TableStatus() {
           </Center>
         </td>
         <td>
-          <Spoiler
+          <Center>
-            c={AdminColor.white}
+            <Admin_DetailButton path={RouterAdminJob.detail({ id: e.id })} />
-            w={400}
+          </Center>
-            maxHeight={50}
-            hideLabel="sembunyikan"
-            showLabel="tampilkan"
-          >
-            <div dangerouslySetInnerHTML={{ __html: e.content }} />
-          </Spoiler>
-        </td>
-        <td>
-          <Spoiler
-            c={AdminColor.white}
-            hideLabel="sembunyikan"
-            w={400}
-            maxHeight={50}
-            showLabel="tampilkan"
-          >
-            <div dangerouslySetInnerHTML={{ __html: e.deskripsi }} />
-          </Spoiler>
-        </td>
-        <td>
-          <Spoiler
-            c={AdminColor.white}
-            hideLabel="sembunyikan"
-            w={400}
-            maxHeight={50}
-            showLabel="tampilkan"
-          >
-            {e.catatan}
-          </Spoiler>
-        </td>
-        <td>
-          <Button
-            color={"red"}
-            leftIcon={<IconBan />}
-            radius={"xl"}
-            onClick={() => {
-              setReject(true);
-              setJobId(e.id);
-              setCatatan(e.catatan);
-            }}
-          >
-            <Stack spacing={0} c={AdminColor.white}>
-              <Text fz={10}>Tambah</Text>
-              <Text fz={10}>Catatan</Text>
-            </Stack>
-          </Button>
         </td>
       </tr>
     ));
-  }
+
+    // return data?.map((e, i) => (
+    //   <tr key={i}>
+    //     <td>
+    //       <Center w={150}>
+    //         <Text c={AdminColor.white}>{e?.Author?.username}</Text>
+    //       </Center>
+    //     </td>
+    //     <td>
+    //       <Spoiler
+    //         w={200}
+    //         maxHeight={50}
+    //         hideLabel="sembunyikan"
+    //         showLabel="tampilkan"
+    //         c={AdminColor.white}
+    //       >
+    //         {e.title}
+    //       </Spoiler>
+    //     </td>
+    //     <td>
+    //       <Center w={150}>
+    //         {e.imageId ? (
+    //           <Button
+    //             loading={isLoading && e?.imageId === jobId}
+    //             loaderPosition="center"
+    //             color="green"
+    //             radius={"xl"}
+    //             leftIcon={<IconPhotoCheck />}
+    //             onClick={() => {
+    //               setJobId(e?.imageId);
+    //               setIsLoading(true);
+    //               router.push(RouterAdminJob.detail_poster + e?.imageId);
+    //             }}
+    //           >
+    //             Lihat
+    //           </Button>
+    //         ) : (
+    //           <Center w={150}>
+    //             <Text c={AdminColor.white} fw={"bold"} fz={"xs"} fs={"italic"}>
+    //               Tidak ada poster
+    //             </Text>
+    //           </Center>
+    //         )}
+    //       </Center>
+    //     </td>
+    //     <td>
+    //       <Spoiler
+    //         c={AdminColor.white}
+    //         w={400}
+    //         maxHeight={50}
+    //         hideLabel="sembunyikan"
+    //         showLabel="tampilkan"
+    //       >
+    //         <div dangerouslySetInnerHTML={{ __html: e.content }} />
+    //       </Spoiler>
+    //     </td>
+    //     <td>
+    //       <Spoiler
+    //         c={AdminColor.white}
+    //         hideLabel="sembunyikan"
+    //         w={400}
+    //         maxHeight={50}
+    //         showLabel="tampilkan"
+    //       >
+    //         <div dangerouslySetInnerHTML={{ __html: e.deskripsi }} />
+    //       </Spoiler>
+    //     </td>
+    //     <td>
+    //       <Spoiler
+    //         c={AdminColor.white}
+    //         hideLabel="sembunyikan"
+    //         w={400}
+    //         maxHeight={50}
+    //         showLabel="tampilkan"
+    //       >
+    //         {e.catatan}
+    //       </Spoiler>
+    //     </td>
+    //     <td>
+    //       <Button
+    //         color={"red"}
+    //         leftIcon={<IconBan />}
+    //         radius={"xl"}
+    //         onClick={() => {
+    //           setReject(true);
+    //           setJobId(e.id);
+    //           setCatatan(e.catatan);
+    //         }}
+    //       >
+    //         <Stack spacing={0} c={AdminColor.white}>
+    //           <Text fz={10}>Tambah</Text>
+    //           <Text fz={10}>Catatan</Text>
+    //         </Stack>
+    //       </Button>
+    //     </td>
+    //   </tr>
+    // ));
+  };
 
   return (
     <>
@@ -273,54 +333,48 @@ function TableStatus() {
           }
         />
 
-        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
+        {!data ? (
-          <ScrollArea w={"100%"} h={"90%"}>
+          <CustomSkeleton height={"80vh"} width={"100%"} />
-            <Table
+        ) : (
-              verticalSpacing={"md"}
+          <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
-              horizontalSpacing={"md"}
+            <ScrollArea w={"100%"} h={"90%"}>
-              p={"md"}
+              <Table
-              w={"100%"}
+                verticalSpacing={"md"}
-              h={"100%"}
+                horizontalSpacing={"md"}
-
+                p={"md"}
-            >
+                w={"100%"}
-              <thead>
+                h={"100%"}
-                <tr>
+              >
-                  <th>
+                <thead>
-                    <Center c={AdminColor.white}>Author</Center>
+                  <tr>
-                  </th>
+                    <th>
-                  <th>
+                      <Center c={AdminColor.white}>Author</Center>
-                    <Text c={AdminColor.white}>Judul</Text>
+                    </th>
-                  </th>
+                    <th>
-                  <th>
+                      <Center c={AdminColor.white}>Judul</Center>
-                    <Center c={AdminColor.white}>Poster</Center>
+                    </th>
-                  </th>
+                    <th>
-                  <th>
+                      <Center c={AdminColor.white}>Poster</Center>
-                    <Text c={AdminColor.white}>Syarat Ketentuan</Text>
+                    </th>
-                  </th>
+                    <th>
-                  <th>
+                      <Center c={AdminColor.white}>Aksi</Center>
-                    <Text c={AdminColor.white}>Deskripsi</Text>
+                    </th>
-                  </th>
+                  </tr>
-                  <th>
+                </thead>
-                    <Text c={AdminColor.white}>Report</Text>
+                <tbody>{renderTableBody()}</tbody>
-                  </th>
+              </Table>
-                  <th>
+            </ScrollArea>
-                    <Center c={AdminColor.white}>Aksi</Center>
+            <Center mt={"xl"}>
-                  </th>
+              <Pagination
-                </tr>
+                value={activePage}
-              </thead>
+                total={nPage}
-              <tbody>{renderTableBody()}</tbody>
+                onChange={(val) => {
-            </Table>
+                  onPageClick(val);
-          </ScrollArea>
+                }}
-          <Center mt={"xl"}>
+              />
-            <Pagination
+            </Center>
-              value={activePage}
+          </Paper>
-              total={nPage}
+        )}
-              onChange={(val) => {
-                onPageClick(val);
-              }}
-            />
-          </Center>
-        </Paper>
       </Stack>
     </>
   );