UI Job

# style
- UI Job di bagian user selesai

# fix
- Scroll data untuk beranda dan tampilan yang lain selesi

## No issue

src/app_modules/job/detail/arsip/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutJob_DetailArsip({
   children,
@@ -12,9 +11,11 @@ export default function LayoutJob_DetailArsip({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentJob_HeaderTamplate title="Detail Arsip" />}>
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Arsip" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/detail/arsip/view.tsx

@@ -11,6 +11,8 @@ import { useAtom } from "jotai";
 import { Job_funEditArsipById } from "../../fun/edit/fun_edit_arsip_by_id";
 import { gs_job_status, gs_job_hot_menu } from "../../global_state";
 import { useState } from "react";
+import { useDisclosure } from "@mantine/hooks";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
 
 export default function Job_DetailArsip({ dataJob }: { dataJob: MODEL_JOB }) {
   return (
@@ -28,13 +30,14 @@ function ButtonAction({ jobId }: { jobId: string }) {
   const [isLoading, setLoading] = useState(false);
   const [status, setStatus] = useAtom(gs_job_status);
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
+  const [opened, { open, close }] = useDisclosure();
 
-  async function onAction() {
+  async function onPublish() {
     await Job_funEditArsipById(jobId, false).then((res) => {
       if (res.status === 200) {
         setStatus("Publish");
         setHotMenu(1);
-        ComponentGlobal_NotifikasiBerhasil("Berhasil Diarsipkan");
+        ComponentGlobal_NotifikasiBerhasil("Berhasil Dipublish");
         setLoading(true);
         router.replace(RouterJob.beranda);
       } else {
@@ -44,14 +47,43 @@ function ButtonAction({ jobId }: { jobId: string }) {
   }
   return (
     <>
+      <ComponentGlobal_UI_Modal
+        opened={opened}
+        close={() => close()}
+        title={
+          " Mempublish akan menampilkan info lowongan kerja ke beranda, anda yakin ?"
+        }
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              close();
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="teal"
+            onClick={() => {
+              onPublish();
+            }}
+          >
+            Simpan
+          </Button>
+        }
+      />
+
       <Button
         loaderPosition="center"
         loading={isLoading ? true : false}
         radius={"xl"}
         color="green"
-        mb={30}
+        my={"lg"}
         onClick={() => {
-          onAction();
+          open();
         }}
       >
         Publish Lagi

src/app_modules/job/detail/draft/layout.tsx

@@ -1,32 +1,74 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import {
+  ActionIcon,
+  AppShell,
+  Box,
+  Drawer,
+  Group,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import React from "react";
 import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import { IconEdit } from "@tabler/icons-react";
+import { IconDots, IconEdit, IconX } from "@tabler/icons-react";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import { useRouter } from "next/navigation";
+import { useDisclosure } from "@mantine/hooks";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_UI_Drawer from "@/app_modules/component_global/ui/ui_drawer";
 
 export default function LayoutJob_DetailDraft({
   children,
   jobId,
 }: {
   children: React.ReactNode;
-  jobId: string
+  jobId: string;
 }) {
+  const router = useRouter();
+  const [opened, { open, close }] = useDisclosure();
+
+  const listComponent = [
+    {
+      id: "1",
+      name: "Edit Job",
+      icon: <IconEdit />,
+      path: RouterJob.edit + jobId,
+    },
+  ];
+
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
         header={
-          <ComponentJob_HeaderTamplate
+          <ComponentGlobal_UI_HeaderTamplate
             title="Detail Draft"
-            icon={<IconEdit />}
-            route2={RouterJob.edit + jobId}
+            iconRight={
+              <ActionIcon variant="transparent" onClick={() => open()}>
+                <IconDots color="white" />
+              </ActionIcon>
+            }
+            // routerRight={}
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
+
+      <ComponentGlobal_UI_Drawer
+        opened={opened}
+        close={close}
+        component={listComponent}
+      />
     </>
   );
 }

src/app_modules/job/detail/draft/view.tsx

@@ -16,13 +16,23 @@ import ComponentJob_NotedBox from "../../component/detail/noted_box";
 import { MODEL_JOB } from "../../model/interface";
 import mqtt_client from "@/util/mqtt_client";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import ComponentGlobal_BoxInformation from "@/app_modules/component_global/box_information";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import { useState } from "react";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
 
 export default function Job_DetailDraft({ dataJob }: { dataJob: MODEL_JOB }) {
   return (
     <>
       <Stack>
         {dataJob.catatan ? (
-          <ComponentJob_NotedBox informasi={dataJob.catatan} />
+          <ComponentGlobal_BoxInformation
+            informasi={dataJob.catatan}
+            isReport={true}
+          />
         ) : (
           ""
         )}
@@ -37,8 +47,9 @@ function ButtonAction({ jobId }: { jobId: string }) {
   const router = useRouter();
   const [status, setStatus] = useAtom(gs_job_status);
   const [opened, { open, close }] = useDisclosure();
+  const [isAjukan, setAjukan] = useState(false);
 
-  async function onAction() {
+  async function onAjukan() {
     const update = await Job_funEditStatusByStatusId(jobId, "2");
     if (update.status === 200) {
       const dataNotif = {
@@ -80,39 +91,148 @@ function ButtonAction({ jobId }: { jobId: string }) {
 
   return (
     <>
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-        <Paper px={"lg"}>
-          <Stack>
-            <Title order={6}>Yakin ingin menghapus ini ?</Title>
-            <Group grow>
-              <Button
-                radius={"xl"}
-                onClick={() => {
-                  close();
-                }}
-              >
-                Batal
-              </Button>
-              <Button
-                radius={"xl"}
-                color="red"
-                onClick={() => {
-                  onDelete();
-                }}
-              >
-                Hapus
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Modal>
+      {/* HAPUS */}
+      {/* <Modal
+        opened={opened}
+        onClose={close}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} c={"white"} align="center">
+            Yakin ingin menghapus ini ?
+          </Title>
+          <Group position="center">
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                close();
+              }}
+            >
+              Batal
+            </Button>
+            <Button
+              radius={"xl"}
+              color="red"
+              onClick={() => {
+                onDelete();
+              }}
+            >
+              Hapus
+            </Button>
+          </Group>
+        </Stack>
+      </Modal> */}
 
-      <Group grow mb={50}>
+      {/* AJUKAN KEMBALI */}
+      {/* <Modal
+        opened={isAjukan}
+        onClose={() => {
+          setAjukan(false);
+        }}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} c={"white"} align="center">
+            Anda yakin akan melakukan pengajuan review kembali ?
+          </Title>
+          <Group position="center">
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                setAjukan(false);
+              }}
+            >
+              Batal
+            </Button>
+            <Button
+              radius={"xl"}
+              color="yellow"
+              onClick={() => {
+                onAjukan();
+              }}
+            >
+              Ajukan
+            </Button>
+          </Group>
+        </Stack>
+      </Modal> */}
+
+      {/* Ajukan */}
+      <ComponentGlobal_UI_Modal
+        opened={isAjukan}
+        close={() => setAjukan(false)}
+        title={" Anda sudah yakin akan melakukan pengajuan review kembali ?"}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              setAjukan(false);
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="orange"
+            onClick={() => {
+              onAjukan();
+            }}
+          >
+            Simpan
+          </Button>
+        }
+      />
+
+      {/* Hapus */}
+      <ComponentGlobal_UI_Modal
+        opened={opened}
+        close={() => close()}
+        title={"Anda yakin ingin menghapus ?"}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              close();
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="red"
+            onClick={() => {
+              onDelete();
+            }}
+          >
+            hapus
+          </Button>
+        }
+      />
+
+      <Group grow my={"lg"}>
         <Button
           radius={"xl"}
           color="yellow"
           onClick={() => {
-            onAction();
+            setAjukan(true);
           }}
         >
           Ajukan Review

src/app_modules/job/detail/main/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutJob_MainDetail({
   children,
@@ -12,9 +11,11 @@ export default function LayoutJob_MainDetail({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentJob_HeaderTamplate title=" Detail Job" />}>
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Job" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/detail/main/view.tsx

@@ -1,16 +1,11 @@
 "use client";
 
+import { Button, Center, Stack } from "@mantine/core";
+import { IconBrandWhatsapp } from "@tabler/icons-react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import ComponentJob_DetailData from "../../component/detail/detail_data";
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { Stack, Button, Center, Anchor } from "@mantine/core";
-import { useAtom } from "jotai";
-import { gs_job_status, gs_job_hot_menu } from "../../global_state";
-import Link from "next/link";
-import { IconBrandWhatsapp } from "@tabler/icons-react";
 import { MODEL_JOB } from "../../model/interface";
-import { gen_page } from "../../../../../gen_page";
 
 export default function Job_MainDetail({
   dataJob,
@@ -22,7 +17,6 @@ export default function Job_MainDetail({
   return (
     <>
       <Stack>
-        {/* <Anchor href={gen_page.devForumMain()}>kesana</Anchor> */}
         <ComponentJob_DetailData data={dataJob} />
         <ButtonAction jobId={dataJob.id} hostName={hostName} />
       </Stack>
@@ -45,7 +39,7 @@ function ButtonAction({
         <Button
           radius={"xl"}
           color="teal"
-          mb={30}
+          my={"lg"}
           leftIcon={<IconBrandWhatsapp />}
         >
           <Link

src/app_modules/job/detail/publish/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutJob_DetailPublish({
   children,
@@ -12,9 +11,11 @@ export default function LayoutJob_DetailPublish({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentJob_HeaderTamplate title="Detail Publish" />}>
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Publish" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/detail/publish/view.tsx

@@ -1,17 +1,22 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import ComponentJob_DetailData from "../../component/detail/detail_data";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { Stack, Button } from "@mantine/core";
-import { useAtom } from "jotai";
-import { gs_job_hot_menu, gs_job_status } from "../../global_state";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
-import { Job_funEditArsipById } from "../../fun/edit/fun_edit_arsip_by_id";
-import { MODEL_JOB } from "../../model/interface";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { Button, Group, Modal, Paper, Stack, Title } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
+import ComponentJob_DetailData from "../../component/detail/detail_data";
+import { Job_funEditArsipById } from "../../fun/edit/fun_edit_arsip_by_id";
+import { gs_job_hot_menu, gs_job_status } from "../../global_state";
+import { MODEL_JOB } from "../../model/interface";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
 
 export default function Job_DetailPublish({ dataJob }: { dataJob: MODEL_JOB }) {
   return (
@@ -27,11 +32,12 @@ export default function Job_DetailPublish({ dataJob }: { dataJob: MODEL_JOB }) {
 function ButtonAction({ jobId }: { jobId: string }) {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
+  const [opened, { open, close }] = useDisclosure();
 
   const [status, setStatus] = useAtom(gs_job_status);
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
 
-  async function onAction() {
+  async function onArsipkan() {
     await Job_funEditArsipById(jobId, true).then((res) => {
       if (res.status === 200) {
         setStatus("Publish");
@@ -46,14 +52,82 @@ function ButtonAction({ jobId }: { jobId: string }) {
   }
   return (
     <>
+      {/* <Modal
+        opened={opened}
+        onClose={close}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} color="white" align="center">
+            Mengarsipkan akan menghilangkan info lowongan kerja dari beranda,
+            anda yakin ?
+          </Title>
+          <Group grow>
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                close();
+              }}
+            >
+              Batal
+            </Button>
+            <Button
+              loading={isLoading ? true : false}
+              loaderPosition="center"
+              radius={"xl"}
+              color="teal"
+              onClick={() => {
+                onArsipkan();
+              }}
+            >
+              Arsip
+            </Button>
+          </Group>
+        </Stack>
+      </Modal> */}
+
+      <ComponentGlobal_UI_Modal
+        opened={opened}
+        close={() => close()}
+        title={
+          " Mengarsipkan akan menghilangkan info lowongan kerja dari beranda, anda yakin ?"
+        }
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              close();
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="teal"
+            onClick={() => {
+              onArsipkan();
+            }}
+          >
+            Simpan
+          </Button>
+        }
+      />
+
       <Button
-        loading={isLoading ? true : false}
-        loaderPosition="center"
         radius={"xl"}
-        color="green"
-        mb={30}
+        color="teal"
+        my={"lg"}
         onClick={() => {
-          onAction();
+          open();
         }}
       >
         Arsipkan

src/app_modules/job/detail/reject/layout.tsx

@@ -4,6 +4,10 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import { IconEdit } from "@tabler/icons-react";
 
 export default function LayoutJob_DetailReject({
   children,
@@ -12,9 +16,11 @@ export default function LayoutJob_DetailReject({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentJob_HeaderTamplate title="Detail Reject" />}>
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Reject" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/detail/reject/view.tsx

@@ -2,25 +2,32 @@
 
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { Stack, Button, Group, Modal, Paper, Title } from "@mantine/core";
+import { Button, Group, Modal, Paper, Stack, Title } from "@mantine/core";
 import { useAtom } from "jotai";
 
-import ComponentJob_DetailData from "../../component/detail/detail_data";
-import { gs_job_status } from "../../global_state";
-import { useRouter } from "next/navigation";
-import { useDisclosure } from "@mantine/hooks";
-import ComponentJob_NotedBox from "../../component/detail/noted_box";
-import { MODEL_JOB } from "../../model/interface";
-import { Job_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_status_id";
+import ComponentGlobal_BoxInformation from "@/app_modules/component_global/box_information";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { useDisclosure } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import ComponentJob_DetailData from "../../component/detail/detail_data";
 import { Job_funDeleteById } from "../../fun/delete/fun_delete_by_id";
+import { Job_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_status_id";
+import { gs_job_status } from "../../global_state";
+import { MODEL_JOB } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
 
 export default function Job_DetailReject({ dataJob }: { dataJob: MODEL_JOB }) {
-  
   return (
     <>
       <Stack>
-        <ComponentJob_NotedBox informasi={dataJob.catatan} />
+        <ComponentGlobal_BoxInformation
+          informasi={dataJob.catatan}
+          isReport={true}
+        />
         <ComponentJob_DetailData data={dataJob} />
         <ButtonAction jobId={dataJob.id} />
       </Stack>
@@ -33,7 +40,7 @@ function ButtonAction({ jobId }: { jobId: string }) {
   const [status, setStatus] = useAtom(gs_job_status);
   const [opened, { open, close }] = useDisclosure();
 
-  async function onAction() {
+  async function onEditKembali() {
     await Job_funEditStatusByStatusId(jobId, "3").then((res) => {
       if (res.status === 200) {
         router.push(RouterJob.status);
@@ -59,39 +66,77 @@ function ButtonAction({ jobId }: { jobId: string }) {
 
   return (
     <>
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-        <Paper px={"lg"}>
-          <Stack>
-            <Title order={6}>Yakin ingin menghapus ini ?</Title>
-            <Group grow>
-              <Button
-                radius={"xl"}
-                onClick={() => {
-                  close();
-                }}
-              >
-                Batal
-              </Button>
-              <Button
-                radius={"xl"}
-                color="red"
-                onClick={() => {
-                  onDelete();
-                }}
-              >
-                Hapus
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Modal>
+      <ComponentGlobal_UI_Modal
+        opened={opened}
+        close={() => close()}
+        title={" Anda yakin ingin menghapus  ?"}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              close();
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="red"
+            onClick={() => {
+              onDelete();
+            }}
+          >
+            Hapus
+          </Button>
+        }
+      />
 
-      <Group grow mb={50}>
+      {/* <Modal
+        opened={opened}
+        onClose={close}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} c={"white"} align="center">
+            Yakin ingin menghapus ini ?
+          </Title>
+          <Group position="center">
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                close();
+              }}
+            >
+              Batal
+            </Button>
+            <Button
+              radius={"xl"}
+              color="red"
+              onClick={() => {
+                onDelete();
+              }}
+            >
+              Hapus
+            </Button>
+          </Group>
+        </Stack>
+      </Modal> */}
+
+      <Group grow my={"xl"}>
         <Button
           radius={"xl"}
           color="orange"
           onClick={() => {
-            onAction();
+            onEditKembali();
           }}
         >
           Edit Kembali

src/app_modules/job/detail/review/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
 
 export default function LayoutJob_DetailReview({
   children,
@@ -12,9 +11,11 @@ export default function LayoutJob_DetailReview({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentJob_HeaderTamplate title="Detail Review" />}>
+      <ComponentGlobal_UI_LayoutTamplate
+        header={<ComponentGlobal_UI_HeaderTamplate title="Detail Review" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
     </>
   );
 }

src/app_modules/job/detail/review/view.tsx

@@ -12,6 +12,9 @@ import { Job_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_s
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 import mqtt_client from "@/util/mqtt_client";
+import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
+import { useDisclosure } from "@mantine/hooks";
+import { useState } from "react";
 
 export default function Job_DetailReview({ dataJob }: { dataJob: MODEL_JOB }) {
   return (
@@ -27,6 +30,8 @@ export default function Job_DetailReview({ dataJob }: { dataJob: MODEL_JOB }) {
 function ButtonAction({ jobId }: { jobId: string }) {
   const router = useRouter();
   const [status, setStatus] = useAtom(gs_job_status);
+  const [opened, { open, close }] = useDisclosure();
+  const [isOpen, setOpen] = useState(false);
 
   async function onAction() {
     const update = await Job_funEditStatusByStatusId(jobId, "3");
@@ -57,12 +62,39 @@ function ButtonAction({ jobId }: { jobId: string }) {
   }
   return (
     <>
+      <ComponentGlobal_UI_Modal
+        opened={isOpen}
+        close={() => setOpen(false)}
+        title={"Anda yakin membatalkan review ?"}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color="orange"
+            onClick={() => {
+              onAction();
+            }}
+          >
+            Simpan
+          </Button>
+        }
+      />
+
       <Button
         radius={"xl"}
         color="orange"
-        mb={50}
+        my={"xl"}
         onClick={() => {
-          onAction();
+          setOpen(true);
         }}
       >
         Batalkan Review