fix job

deskrispi:
- fix status job

src/app_modules/job/main/status/publish.tsx

@@ -8,43 +8,58 @@ import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 import ComponentJob_CardStatus from "../../component/card/card_view";
 import job_getAllStatusPublish from "../../fun/get/status/get_list_publish";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetJobByStatus } from "../../component/api_fetch_job";
 
-export default function Job_Publish({ listPublish }: { listPublish: any }) {
-  const [data, setData] = useState(listPublish);
+export default function Job_Publish({ nameStatus }: { nameStatus: string }) {
+  const [data, setData] = useState<any[] | null>(null);
   const [activePage, setActivePage] = useState(1);
 
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      // const response = await apiGetJobByStatus({ status: nameStatus });
+      // if (response.success) {
+      //   console.log(response.data);
+      // }
+    } catch (error) {}
+  };
+
   return (
     <>
       {_.isEmpty(data) ? (
         <ComponentGlobal_IsEmptyData />
       ) : (
-        // --- Main component --- //
-        <ScrollOnly
-          height="75vh"
-          renderLoading={() => (
-            <Center mt={"lg"}>
-              <Loader color={"yellow"} />
-            </Center>
-          )}
-          data={data}
-          setData={setData}
-          moreData={async () => {
-            const loadData = await job_getAllStatusPublish({
-              page: activePage + 1,
-            });
+        "Publish"
+        // <ScrollOnly
+        //   height="75vh"
+        //   renderLoading={() => (
+        //     <Center mt={"lg"}>
+        //       <Loader color={"yellow"} />
+        //     </Center>
+        //   )}
+        //   data={data}
+        //   setData={setData}
+        //   moreData={async () => {
+        //     const loadData = await job_getAllStatusPublish({
+        //       page: activePage + 1,
+        //     });
 
-            setActivePage((val) => val + 1);
+        //     setActivePage((val) => val + 1);
 
-            return loadData;
-          }}
-        >
-          {(item) => (
-            <ComponentJob_CardStatus
-              data={item}
-              path={RouterJob.detail_publish}
-            />
-          )}
-        </ScrollOnly>
+        //     return loadData;
+        //   }}
+        // >
+        //   {(item) => (
+        //     <ComponentJob_CardStatus
+        //       data={item}
+        //       path={RouterJob.detail_publish}
+        //     />
+        //   )}
+        // </ScrollOnly>
       )}
     </>
   );

src/app_modules/job/main/status/review.tsx

@@ -8,43 +8,58 @@ import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 import ComponentJob_CardStatus from "../../component/card/card_view";
 import job_getAllStatusReview from "../../fun/get/status/get_list_review";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetJobByStatus } from "../../component/api_fetch_job";
 
-export default function Job_Review({ listReview }: { listReview: any[] }) {
-  const [data, setData] = useState(listReview);
+export default function Job_Review({ nameStatus }: { nameStatus: string }) {
+  const [data, setData] = useState<any[] | null>(null);
   const [activePage, setActivePage] = useState(1);
 
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      // const response = await apiGetJobByStatus({ status: nameStatus });
+      // if (response.success) {
+      //   console.log(response.data);
+      // }
+    } catch (error) {}
+  };
+
   return (
     <>
       {_.isEmpty(data) ? (
         <ComponentGlobal_IsEmptyData />
       ) : (
-        // --- Main component --- //
-        <ScrollOnly
-          height="75vh"
-          renderLoading={() => (
-            <Center mt={"lg"}>
-              <Loader color={"yellow"} />
-            </Center>
-          )}
-          data={data}
-          setData={setData}
-          moreData={async () => {
-            const loadData = await job_getAllStatusReview({
-              page: activePage + 1,
-            });
+        "Review"
+        // <ScrollOnly
+        //   height="75vh"
+        //   renderLoading={() => (
+        //     <Center mt={"lg"}>
+        //       <Loader color={"yellow"} />
+        //     </Center>
+        //   )}
+        //   data={data}
+        //   setData={setData}
+        //   moreData={async () => {
+        //     const loadData = await job_getAllStatusReview({
+        //       page: activePage + 1,
+        //     });
 
-            setActivePage((val) => val + 1);
+        //     setActivePage((val) => val + 1);
 
-            return loadData;
-          }}
-        >
-          {(item) => (
-            <ComponentJob_CardStatus
-              data={item}
-              path={RouterJob.detail_review}
-            />
-          )}
-        </ScrollOnly>
+        //     return loadData;
+        //   }}
+        // >
+        //   {(item) => (
+        //     <ComponentJob_CardStatus
+        //       data={item}
+        //       path={RouterJob.detail_review}
+        //     />
+        //   )}
+        // </ScrollOnly>
       )}
     </>
   );

src/app_modules/job/main/status/ui_status.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { MainColor } from "@/app_modules/_global/color";
+import { globalStatusApp } from "@/app_modules/_global/lib";
+import { RouterJob } from "@/lib/router_hipmi/router_job";
+import { Stack, Tabs } from "@mantine/core";
+import { useParams, useRouter } from "next/navigation";
+import Job_NewViewStatus from "./view_status";
+
+export default function Job_UiStatus() {
+  const router = useRouter();
+  const param = useParams<{ id: string }>();
+  const statusId = param.id;
+
+  // const [changeStatus, setChangeStatus] = useState(statusId);
+  // const [nameStatus, setNameStatus] = useState<string | undefined>("");
+
+  // async function onChangeStatus({ statusId }: { statusId: string }) {
+  //   router.replace(RouterJob.status({ id: statusId }));
+  //   const cek = globalStatusApp.find((e) => e.id === statusId);
+
+  //   setNameStatus(cek?.name);
+  // }
+
+  return (
+    <>
+      <Tabs
+        mt={1}
+        color="yellow"
+        variant="pills"
+        radius={"xl"}
+        defaultValue={statusId}
+        value={statusId}
+        onTabChange={(val: any) => {
+          router.replace(RouterJob.status({ id: val }));
+        }}
+        styles={{
+          tabsList: {
+            backgroundColor: MainColor.darkblue,
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          },
+          panel: {
+            paddingTop: 10,
+          },
+        }}
+      >
+        <Stack>
+          <Tabs.List grow>
+            {globalStatusApp.map((e) => (
+              <Tabs.Tab
+                key={e.id}
+                value={e.id}
+                fw={"bold"}
+                color={statusId === e.id ? "black" : MainColor.darkblue}
+                style={{
+                  transition: "0.5s",
+                  backgroundColor:
+                    statusId === e.id ? MainColor.yellow : "white",
+                  color: MainColor.darkblue,
+                }}
+              >
+                {e.name}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+
+          <Job_NewViewStatus />
+        </Stack>
+      </Tabs>
+    </>
+  );
+}

src/app_modules/job/main/status/view_status.tsx

@@ -1,107 +1,105 @@
 "use client";
 
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { globalStatusApp } from "@/app_modules/_global/lib";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { RouterJob } from "@/lib/router_hipmi/router_job";
-import { AccentColor, MainColor } from "@/app_modules/_global/color";
-import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
-import { Stack, Tabs } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import { clientLogger } from "@/util/clientLogger";
+import { Center, Loader, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useParams } from "next/navigation";
 import { useState } from "react";
-import Job_Draft from "./draft";
-import Job_Publish from "./publish";
-import Job_Reject from "./reject";
-import Job_Review from "./review";
+import { apiGetJobByStatus } from "../../component/api_fetch_job";
+import ComponentJob_CardStatus from "../../component/card/card_view";
 
-export default function Job_ViewStatus({
-  statusId,
-  dataJob,
-  listStatus,
-}: {
-  statusId: string;
-  dataJob: any[];
-  listStatus: MODEL_NEW_DEFAULT_MASTER[];
-}) {
-  const router = useRouter();
-  const [changeStatus, setChangeStatus] = useState(statusId);
+export default function Job_NewViewStatus() {
+  const param = useParams<{ id: string }>();
+  const [data, setData] = useState<any[] | null>(null);
+  const [activePage, setActivePage] = useState(1);
 
-  // const listTabs = [
-  //   {
-  //     id: 1,
-  //     path: <Job_Publish listPublish={listPublish} />,
-  //     value: "Publish",
-  //   },
-  //   {
-  //     id: 2,
-  //     path: <Job_Review listReview={listReview} />,
-  //     value: "Review",
-  //   },
-  //   {
-  //     id: 3,
-  //     path: <Job_Draft listDraft={listDraft} />,
-  //     value: "Draft",
-  //   },
-  //   {
-  //     id: 4,
-  //     path: <Job_Reject listReject={listReject} />,
-  //     value: "Reject",
-  //   },
-  // ];
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
 
-  async function onChangeStatus({ statusId }: { statusId: string }) {
-    router.replace(RouterJob.status({ id: statusId }));
-  }
+  const handleLoadData = async () => {
+    try {
+      const cek = globalStatusApp.find((e) => e.id === param.id);
+      const response = await apiGetJobByStatus({
+        status: cek?.name,
+        page: `${activePage}`,
+      });
+      if (response.success) {
+        console.log(response.data);
+        setData(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get job", error);
+    }
+  };
+
+  const hanldeMoreData = async () => {
+    try {
+      const cek = globalStatusApp.find((e) => e.id === param.id);
+      const nextPage = activePage + 1;
+      const response = await apiGetJobByStatus({
+        status: cek?.name,
+        page: `${nextPage}`,
+      });
+      if (response.success) {
+        setActivePage(nextPage);
+        return response.data;
+      }
+    } catch (error) {
+      clientLogger.error("Error get job", error);
+    }
+  };
+
+  if (!data)
+    return (
+      <>
+        <Stack>
+          <CustomSkeleton height={70} width={"100%"} />
+          <CustomSkeleton height={70} width={"100%"} />
+        </Stack>
+      </>
+    );
 
   return (
     <>
-      <Tabs
-        mt={1}
-        color="yellow"
-        variant="pills"
-        radius={"xl"}
-        value={changeStatus}
-        onTabChange={(val: any) => {
-          setChangeStatus(val);
-          onChangeStatus({ statusId: val });
-        }}
-        styles={{
-          tabsList: {
-            backgroundColor: MainColor.darkblue,
-            position: "sticky",
-            top: 0,
-            zIndex: 99,
-          },
-          panel: {
-            paddingTop: 10,
-          },
-        }}
-      >
-        <Stack>
-          <Tabs.List grow>
-            {listStatus.map((e) => (
-              <Tabs.Tab
-                key={e.id}
-                value={e.id}
-                fw={"bold"}
-                color={statusId === e.id ? "black" : "white"}
-                style={{
-                  transition: "0.5s",
-                  backgroundColor:
-                    statusId === e.id ? MainColor.yellow : "white",
-                  border:
-                    statusId === e.id
-                      ? `1px solid ${AccentColor.yellow}`
-                      : `1px solid white`,
-                }}
-              >
-                {e.name}
-              </Tabs.Tab>
-            ))}
-          </Tabs.List>
-          {statusId === "1" && <Job_Publish listPublish={dataJob} />}
-          {statusId === "2" && <Job_Review listReview={dataJob} />}
-          {statusId === "3" && <Job_Draft listDraft={dataJob} />}
-          {statusId === "4" && <Job_Reject listReject={dataJob} />}
-        </Stack>
-      </Tabs>
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        <ScrollOnly
+          height="75vh"
+          renderLoading={() => (
+            <Center mt={"lg"}>
+              <Loader color={"yellow"} />
+            </Center>
+          )}
+          data={data}
+          setData={setData as any}
+          moreData={hanldeMoreData}
+        >
+          {(item) => (
+            <ComponentJob_CardStatus
+              data={item}
+              path={
+                param.id == "1"
+                  ? RouterJob.detail_publish
+                  : param.id == "2"
+                    ? RouterJob.detail_review
+                    : param.id === "3"
+                      ? RouterJob.detail_draft
+                      : param.id === "4"
+                        ? RouterJob.detail_reject
+                        : ""
+              }
+            />
+          )}
+        </ScrollOnly>
+      )}
     </>
   );
 }