#style:

Deskripsi:
- UI Voting bagian beranda dan status
## Noissue

src/app_modules/vote/detail/draft/index.tsx

@@ -13,6 +13,13 @@ import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_glo
 import { Vote_funDeleteById } from "../../fun/delete/fun_delete_by_id";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import moment from "moment";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { useState } from "react";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 
 export default function Vote_DetailDraft({
   dataVote,
@@ -21,7 +28,15 @@ export default function Vote_DetailDraft({
 }) {
   return (
     <>
-      <Stack>
+      <Stack spacing={"xl"}>
+        {dataVote?.catatan ? (
+          <ComponentGlobal_BoxInformation
+            isReport
+            informasi={dataVote?.catatan}
+          />
+        ) : (
+          ""
+        )}
         <ComponentVote_DetailDataSebelumPublish data={dataVote} />
         <ButtonAction voteId={dataVote.id} awalVote={dataVote.awalVote} />
       </Stack>
@@ -38,7 +53,9 @@ function ButtonAction({
 }) {
   const router = useRouter();
   const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
-  const [opened, { open, close }] = useDisclosure(false);
+  const [openModal1, setOpenModal1] = useState(false);
+  const [openModal2, setOpenModal2] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   async function onUpdate() {
     const hariIni = new Date();
@@ -51,6 +68,7 @@ function ButtonAction({
       if (res.status === 200) {
         setTabsStatus("Review");
         ComponentGlobal_NotifikasiBerhasil("Berhasil Ajukan Review", 2000);
+        setIsLoading(true);
         router.back();
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
@@ -75,9 +93,10 @@ function ButtonAction({
       <SimpleGrid cols={2}>
         <Button
           radius={"xl"}
+          bg={MainColor.yellow}
           color="yellow"
           onClick={() => {
-            onUpdate();
+            setOpenModal1(true);
           }}
         >
           Ajukan Review
@@ -86,37 +105,71 @@ function ButtonAction({
           radius={"xl"}
           color="red"
           onClick={() => {
-            open();
+            setOpenModal2(true);
           }}
         >
           Hapus
         </Button>
       </SimpleGrid>
 
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-        <Stack>
-          <Title order={6}>Yakin menghapus vote ini ?</Title>
-          <Group position="center">
-            <Button
-              radius={"xl"}
-              onClick={() => {
-                close();
-              }}
-            >
-              Kembali
-            </Button>
-            <Button
-              radius={"xl"}
-              onClick={() => {
-                onDelete();
-              }}
-              color="red"
-            >
-              Hapus
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
+      {/* MODAL AJUKAN */}
+      <UIGlobal_Modal
+        title={"Anda yakin akan melakukan pengajuan review kembali ?"}
+        opened={openModal1}
+        close={() => setOpenModal1(false)}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              setOpenModal1(false);
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            loaderPosition="center"
+            loading={isLoading ? true : false}
+            radius={"xl"}
+            onClick={() => {
+              onUpdate();
+            }}
+            color="yellow"
+            bg={MainColor.yellow}
+          >
+            Ajukan
+          </Button>
+        }
+      />
+
+      {/* MODAL HAPUS */}
+      <UIGlobal_Modal
+        title={"Anda yakin menghapus voting ini ?"}
+        opened={openModal2}
+        close={() => setOpenModal2(false)}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              setOpenModal2(false);
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              onDelete();
+            }}
+            color="red"
+          >
+            Hapus
+          </Button>
+        }
+      />
     </>
   );
 }

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

@@ -1,32 +1,57 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
-import React from "react";
+import { ActionIcon, AppShell } from "@mantine/core";
+import React, { useState } from "react";
 import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
-import { IconEdit } from "@tabler/icons-react";
+import { IconDotsVertical, IconEdit } from "@tabler/icons-react";
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
 
 export default function LayoutVote_DetailDraft({
   children,
-  voteId
+  voteId,
 }: {
   children: React.ReactNode;
-  voteId: string
+  voteId: string;
 }) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const listComponent = [
+    {
+      id: "1",
+      name: "Edit Voting",
+      icon: <IconEdit />,
+      path: RouterVote.edit + voteId,
+    },
+  ];
+
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentVote_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Detail Draft"
-            icon={<IconEdit />}
-            route2={RouterVote.edit + voteId}
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => setOpenDrawer(true)}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listComponent}
+      />
     </>
   );
 }