From 2db82ec7d1b5fff0fb514932db680f616e80b698 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Mon, 24 Mar 2025 15:42:11 +0800
Subject: [PATCH] fix admin voting - fix admin detail review & reject

---
 .../admin/vote/child/table_reject/index.tsx   |  55 ++---
 .../admin/vote/child/table_review/index.tsx   |  53 ++--
 .../button/comp_button_detail_reject.tsx      | 115 +++++++++
 .../button/comp_button_detail_review.tsx      | 228 ++++++++++++++++++
 .../component/{detail.tsx => comp_detail.tsx} |   0
 ...mp_publish.tsx => comp_detail_publish.tsx} |   4 +-
 .../vote/component/comp_detail_reject.tsx     |  51 ++++
 .../vote/component/comp_detail_review.tsx     |  21 ++
 .../admin/vote/detail/detail_voting.tsx       |  10 +-
 9 files changed, 463 insertions(+), 74 deletions(-)
 create mode 100644 src/app_modules/admin/vote/component/button/comp_button_detail_reject.tsx
 create mode 100644 src/app_modules/admin/vote/component/button/comp_button_detail_review.tsx
 rename src/app_modules/admin/vote/component/{detail.tsx => comp_detail.tsx} (100%)
 rename src/app_modules/admin/vote/component/{comp_publish.tsx => comp_detail_publish.tsx} (85%)
 create mode 100644 src/app_modules/admin/vote/component/comp_detail_reject.tsx
 create mode 100644 src/app_modules/admin/vote/component/comp_detail_review.tsx

diff --git a/src/app_modules/admin/vote/child/table_reject/index.tsx b/src/app_modules/admin/vote/child/table_reject/index.tsx
index 467d3802..bb55b4b9 100644
--- a/src/app_modules/admin/vote/child/table_reject/index.tsx
+++ b/src/app_modules/admin/vote/child/table_reject/index.tsx
@@ -5,15 +5,16 @@ import {
   AdminColor,
 } from "@/app_modules/_global/color/color_pallet";
 import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
 import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
 import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
 import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
 import ComponentAdminGlobal_IsEmptyData from "@/app_modules/admin/_admin_global/is_empty_data";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
+import { RouterAdminVote } from "@/lib/router_admin/router_admin_vote";
 import { clientLogger } from "@/util/clientLogger";
 import {
-  Box,
   Button,
   Center,
   Group,
@@ -21,15 +22,14 @@ import {
   Pagination,
   Paper,
   ScrollArea,
-  Spoiler,
   Stack,
   Table,
   Text,
   Textarea,
-  TextInput,
+  TextInput
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { IconBan, IconSearch } from "@tabler/icons-react";
+import { IconSearch } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -127,7 +127,7 @@ function TableStatus() {
 
     return data?.map((e, i) => (
       <tr key={i}>
-        <td>
+        {/* <td>
           <Center>
             <Button
               color={"red"}
@@ -145,8 +145,8 @@ function TableStatus() {
               </Stack>
             </Button>
           </Center>
-        </td>
-        <td>
+        </td> */}
+        {/* <td>
           <Center c={"white"}>
             <Spoiler
               hideLabel="sembunyikan"
@@ -157,14 +157,14 @@ function TableStatus() {
               {e.catatan}
             </Spoiler>
           </Center>
-        </td>
+        </td> */}
         <td>
-          <Center c={AccentColor.white}>{e?.Author?.Profile?.name}</Center>
+          <Center c={AccentColor.white}>{e?.Author?.username}</Center>
         </td>
         <td>
           <Center c={AccentColor.white}>{e.title}</Center>
         </td>
-        <td>
+        {/* <td>
           <Center c={"white"}>
             <Spoiler
               hideLabel="sembunyikan"
@@ -175,8 +175,8 @@ function TableStatus() {
               {e.deskripsi}
             </Spoiler>
           </Center>
-        </td>
-        <td>
+        </td> */}
+        {/* <td>
           <Stack>
             {e.Voting_DaftarNamaVote.map((v) => (
               <Box key={v.id}>
@@ -184,7 +184,7 @@ function TableStatus() {
               </Box>
             ))}
           </Stack>
-        </td>
+        </td> */}
 
         <td>
           <Center c={AccentColor.white}>
@@ -200,6 +200,12 @@ function TableStatus() {
             }).format(new Date(e?.akhirVote))}
           </Center>
         </td>
+
+        <td>
+          <Center>
+            <Admin_DetailButton path={RouterAdminVote.detail({ id: e.id })} />
+          </Center>
+        </td>
       </tr>
     ));
   };
@@ -229,38 +235,25 @@ function TableStatus() {
         ) : (
           <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"}>
-              <Table
-                verticalSpacing={"md"}
-                horizontalSpacing={"md"}
-                p={"md"}
-                w={1500}
-              >
+              <Table verticalSpacing={"md"} horizontalSpacing={"md"} p={"md"}>
                 <thead>
                   <tr>
-                    <th>
-                      <Center c={AccentColor.white}>Aksi</Center>
-                    </th>
-                    <th>
-                      <Center c={AccentColor.white}>Catatan</Center>
-                    </th>
                     <th>
                       <Center c={AccentColor.white}>Author</Center>
                     </th>
                     <th>
                       <Center c={AccentColor.white}>Judul</Center>
                     </th>
-                    <th>
-                      <Center c={AccentColor.white}>Deskripsi</Center>
-                    </th>
-                    <th>
-                      <Center c={AccentColor.white}>Pilihan</Center>
-                    </th>
+
                     <th>
                       <Center c={AccentColor.white}>Mulai Vote</Center>
                     </th>
                     <th>
                       <Center c={AccentColor.white}>Selesai Vote</Center>
                     </th>
+                    <th>
+                      <Center c={AccentColor.white}>Aksi</Center>
+                    </th>
                   </tr>
                 </thead>
                 <tbody>{renderTableBody()}</tbody>
diff --git a/src/app_modules/admin/vote/child/table_review/index.tsx b/src/app_modules/admin/vote/child/table_review/index.tsx
index 7e4b694e..eb83a1c6 100644
--- a/src/app_modules/admin/vote/child/table_review/index.tsx
+++ b/src/app_modules/admin/vote/child/table_review/index.tsx
@@ -53,6 +53,8 @@ import { apiGetAdminVotingByStatus } from "../../lib/api_fetch_admin_voting";
 import _ from "lodash";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import ComponentAdminGlobal_IsEmptyData from "@/app_modules/admin/_admin_global/is_empty_data";
+import Admin_DetailButton from "@/app_modules/admin/_admin_global/_component/button/detail_button";
+import { RouterAdminVote } from "@/lib/router_admin/router_admin_vote";
 
 export default function AdminVote_TableReview() {
   return (
@@ -127,7 +129,7 @@ function TableStatus() {
   async function onPageClick(p: any) {
     setActivePage(p);
   }
-  
+
   async function onLoadData() {
     handleLoadData();
     setIsLoading(false);
@@ -135,7 +137,6 @@ function TableStatus() {
     setIsAdminVoting_TriggerReview(false);
   }
 
-
   async function onReject() {
     const data = {
       id: dataId,
@@ -216,7 +217,7 @@ function TableStatus() {
         }
         handleLoadData();
         ComponentGlobal_NotifikasiBerhasil(res.message);
-        closePublish()
+        closePublish();
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
       }
@@ -248,27 +249,6 @@ function TableStatus() {
         <td>
           <Center c={AccentColor.white}>{e.title}</Center>
         </td>
-        <td>
-          <Center c={AccentColor.white}>
-            <Spoiler
-              hideLabel="sembunyikan"
-              maw={400}
-              maxHeight={50}
-              showLabel="tampilkan"
-            >
-              {e.deskripsi}
-            </Spoiler>
-          </Center>
-        </td>
-        <td>
-          <Stack>
-            {e.Voting_DaftarNamaVote.map((v) => (
-              <Box key={v.id}>
-                <Text c={AccentColor.white}>- {v.value}</Text>
-              </Box>
-            ))}
-          </Stack>
-        </td>
 
         <td>
           <Center c={AccentColor.white}>
@@ -286,6 +266,12 @@ function TableStatus() {
         </td>
 
         <td>
+          <Center>
+            <Admin_DetailButton path={RouterAdminVote.detail({ id: e.id })} />
+          </Center>
+        </td>
+
+        {/* <td>
           <Stack align="center">
             <Button
               w={120}
@@ -313,7 +299,7 @@ function TableStatus() {
               Reject
             </Button>
           </Stack>
-        </td>
+        </td> */}
       </tr>
     ));
   };
@@ -369,7 +355,6 @@ function TableStatus() {
                 verticalSpacing={"md"}
                 horizontalSpacing={"md"}
                 p={"md"}
-                w={1500}
               >
                 <thead>
                   <tr>
@@ -379,12 +364,6 @@ function TableStatus() {
                     <th>
                       <Center c={AccentColor.white}>Judul</Center>
                     </th>
-                    <th>
-                      <Center c={AccentColor.white}>Deskripsi</Center>
-                    </th>
-                    <th>
-                      <Center c={AccentColor.white}>Pilihan</Center>
-                    </th>
                     <th>
                       <Center c={AccentColor.white}>Mulai Vote</Center>
                     </th>
@@ -414,14 +393,14 @@ function TableStatus() {
       </Stack>
 
       <Modal
-        styles={{ body: { backgroundColor: AdminColor.softBlue}}}
+        styles={{ body: { backgroundColor: AdminColor.softBlue } }}
         opened={openedReject}
         onClose={closeReject}
         centered
         withCloseButton={false}
         size={"md"}
       >
-        <Stack >
+        <Stack>
           <Textarea
             styles={{ label: { color: AdminColor.white } }}
             minRows={2}
@@ -455,7 +434,7 @@ function TableStatus() {
         </Stack>
       </Modal>
       <Modal
-        styles={{ body: { backgroundColor: AdminColor.softBlue}}}
+        styles={{ body: { backgroundColor: AdminColor.softBlue } }}
         opened={openedPublish}
         onClose={closePublish}
         centered
@@ -463,7 +442,9 @@ function TableStatus() {
         size={"md"}
       >
         <Stack align="center">
-          <Title c={AdminColor.white} order={5}>Apakah anda yakin ingin mempublish vote ini?</Title>
+          <Title c={AdminColor.white} order={5}>
+            Apakah anda yakin ingin mempublish vote ini?
+          </Title>
           <Group position="center">
             <Button radius={"xl"} onClick={() => closePublish()}>
               Batal
diff --git a/src/app_modules/admin/vote/component/button/comp_button_detail_reject.tsx b/src/app_modules/admin/vote/component/button/comp_button_detail_reject.tsx
new file mode 100644
index 00000000..098b6c97
--- /dev/null
+++ b/src/app_modules/admin/vote/component/button/comp_button_detail_reject.tsx
@@ -0,0 +1,115 @@
+import { MainColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
+import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
+import { IRealtimeData } from "@/lib/global_state";
+import { Button, Group, Modal, Stack, Textarea, Title } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconBan, IconCheck } from "@tabler/icons-react";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { WibuRealtime } from "wibu-pkg";
+import { AdminVote_funEditStatusPublishById } from "../../fun/edit/fun_edit_status_publish_by_id";
+import { AdminEvent_funEditCatatanById } from "../../fun/edit/fun_edit_status_reject_by_id";
+import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
+import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
+import { AdminVote_funEditCatatanRejectById } from "../../fun/edit/fun_edit_catatan_reject_by_id";
+
+interface Props {
+  data: MODEL_VOTING;
+  onUpdateData: (value: string) => void;
+}
+
+export function AdminVoting_ComponentDetailRejectButton({
+  data,
+  onUpdateData,
+}: Props) {
+  const router = useRouter();
+  const [opened, { open, close }] = useDisclosure(false);
+  const [catatan, setCatatan] = useState(data.catatan);
+  const [isLoading, setLoading] = useState(false);
+  const [newData, setNewData] = useState<MODEL_VOTING>(data);
+
+  async function handleAddReportNote() {
+    try {
+      setLoading(true);
+      const res = await AdminVote_funEditCatatanRejectById(data.id, catatan);
+      if (res.status === 200) {
+
+        onUpdateData(catatan);
+        ComponentAdminGlobal_NotifikasiBerhasil(res.message);
+        close();
+      } else {
+        ComponentAdminGlobal_NotifikasiGagal(res.message);
+      }
+    } catch (error) {
+      console.log("Error get data voting review", error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <>
+      <Group position="center" mt={70}>
+        <Button
+          color="red"
+          leftIcon={<IconBan />}
+          radius={"xl"}
+          onClick={() => {
+            open();
+          }}
+        >
+          Tambah Catatan Report
+        </Button>
+      </Group>
+
+      <Modal
+        styles={{ body: { backgroundColor: AdminColor.softBlue } }}
+        opened={opened}
+        onClose={close}
+        centered
+        withCloseButton={false}
+        size={"md"}
+      >
+        <Stack>
+          <Textarea
+            styles={{ label: { color: AdminColor.white } }}
+            minRows={2}
+            maxRows={5}
+            maxLength={300}
+            autosize
+            label="Masukan Alasan Penolakan"
+            placeholder="Contoh: Karena deskripsi kurang lengkap, dll"
+            value={catatan}
+            onChange={(val) => {
+              setCatatan(val.target.value);
+            }}
+          />
+          <Group position="right">
+            <Button radius={"xl"} onClick={() => close()}>
+              Batal
+            </Button>
+            <Button
+              color="green"
+              loading={isLoading}
+              loaderPosition="center"
+              radius={"xl"}
+              onClick={() => {
+                handleAddReportNote();
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/app_modules/admin/vote/component/button/comp_button_detail_review.tsx b/src/app_modules/admin/vote/component/button/comp_button_detail_review.tsx
new file mode 100644
index 00000000..303af99a
--- /dev/null
+++ b/src/app_modules/admin/vote/component/button/comp_button_detail_review.tsx
@@ -0,0 +1,228 @@
+import { MainColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
+import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
+import { IRealtimeData } from "@/lib/global_state";
+import { Button, Group, Modal, Stack, Textarea, Title } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconBan, IconCheck } from "@tabler/icons-react";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { WibuRealtime } from "wibu-pkg";
+import { AdminVote_funEditStatusPublishById } from "../../fun/edit/fun_edit_status_publish_by_id";
+import { AdminEvent_funEditCatatanById } from "../../fun/edit/fun_edit_status_reject_by_id";
+
+interface Props {
+  data: MODEL_VOTING;
+}
+
+export function AdminVoting_ComponentDetailReviewButton({ data }: Props) {
+  const router = useRouter();
+  const [openedReject, { open: openReject, close: closeReject }] =
+    useDisclosure(false);
+  const [openedPublish, { open: openPublish, close: closePublish }] =
+    useDisclosure(false);
+  const [catatan, setCatatan] = useState("");
+  const [isLoadingPublish, setLoadingPublish] = useState(false);
+  const [isLoadingReject, setLoadingReject] = useState(false);
+
+  async function handlePublish() {
+    const hariIni = new Date();
+    const cekHari = moment(data.awalVote).diff(hariIni, "days");
+
+    if (cekHari < 0)
+      return ComponentGlobal_NotifikasiPeringatan("Tanggal Voting Lewat");
+
+    try {
+      setLoadingPublish(true);
+      const res = await AdminVote_funEditStatusPublishById(data.id);
+      if (res.status === 200) {
+        const dataNotifikasi: IRealtimeData = {
+          appId: res.data?.id as string,
+          status: res.data?.Voting_Status?.name as any,
+          userId: res.data?.authorId as any,
+          pesan: res.data?.title as any,
+          kategoriApp: "VOTING",
+          title: "Voting publish",
+        };
+        const notif = await adminNotifikasi_funCreateToUser({
+          data: dataNotifikasi as any,
+        });
+        if (notif.status === 201) {
+          WibuRealtime.setData({
+            type: "notification",
+            pushNotificationTo: "USER",
+            dataMessage: dataNotifikasi,
+          });
+          WibuRealtime.setData({
+            type: "trigger",
+            pushNotificationTo: "USER",
+            dataMessage: dataNotifikasi,
+          });
+        }
+
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        closePublish();
+        router.back();
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    } catch (error) {
+      console.log("Error get data voting", error);
+      setLoadingPublish(false);
+    }
+  }
+
+  async function handleReject() {
+    const fixData = {
+      id: data.id,
+      catatan: catatan,
+    };
+
+    try {
+      setLoadingReject(true);
+      const res = await AdminEvent_funEditCatatanById(fixData as any);
+      if (res.status === 200) {
+        const dataNotifikasi: IRealtimeData = {
+          appId: res.data?.id as string,
+          status: res.data?.Voting_Status?.name as any,
+          userId: res.data?.authorId as any,
+          pesan: res.data?.title as any,
+          kategoriApp: "VOTING",
+          title: "Voting anda di tolak !",
+        };
+
+        const notif = await adminNotifikasi_funCreateToUser({
+          data: dataNotifikasi as any,
+        });
+
+        if (notif.status === 201) {
+          WibuRealtime.setData({
+            type: "notification",
+            pushNotificationTo: "USER",
+            dataMessage: dataNotifikasi,
+          });
+        }
+
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        closeReject();
+        router.back();
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    } catch (error) {
+      setLoadingReject(false);
+      console.error("Error update voting admin", error);
+    }
+  }
+
+  return (
+    <>
+      <Group position="center" mt={100}>
+        <Button
+          color="green"
+          leftIcon={<IconCheck />}
+          radius={"xl"}
+          onClick={() => {
+            openPublish();
+          }}
+        >
+          Publish
+        </Button>
+        <Button
+          color="red"
+          leftIcon={<IconBan />}
+          radius={"xl"}
+          onClick={() => {
+            openReject();
+          }}
+        >
+          Reject
+        </Button>
+      </Group>
+
+      {/* MODEL PUBLISH */}
+      <Modal
+        styles={{ body: { backgroundColor: AdminColor.softBlue } }}
+        opened={openedPublish}
+        onClose={closePublish}
+        centered
+        withCloseButton={false}
+        size={"md"}
+      >
+        <Stack align="center">
+          <Title c={AdminColor.white} order={5}>
+            Apakah anda yakin ingin mempublish vote ini?
+          </Title>
+          <Group position="center">
+            <Button radius={"xl"} onClick={() => closePublish()}>
+              Batal
+            </Button>
+            <Button
+              loaderPosition="center"
+              loading={isLoadingPublish}
+              radius={"xl"}
+              onClick={() => {
+                handlePublish();
+              }}
+              style={{
+                backgroundColor: MainColor.green,
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* MODEL REJECT */}
+      <Modal
+        styles={{ body: { backgroundColor: AdminColor.softBlue } }}
+        opened={openedReject}
+        onClose={closeReject}
+        centered
+        withCloseButton={false}
+        size={"md"}
+      >
+        <Stack>
+          <Textarea
+            styles={{ label: { color: AdminColor.white } }}
+            minRows={2}
+            maxRows={5}
+            maxLength={300}
+            autosize
+            label="Masukan Alasan Penolakan"
+            placeholder="Contoh: Karena deskripsi kurang lengkap, dll"
+            onChange={(val) => {
+              setCatatan(val.target.value);
+            }}
+          />
+          <Group position="right">
+            <Button radius={"xl"} onClick={() => closeReject()}>
+              Batal
+            </Button>
+            <Button
+              loaderPosition="center"
+              loading={isLoadingReject}
+              radius={"xl"}
+              onClick={() => {
+                handleReject();
+              }}
+              style={{
+                backgroundColor: MainColor.green,
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/app_modules/admin/vote/component/detail.tsx b/src/app_modules/admin/vote/component/comp_detail.tsx
similarity index 100%
rename from src/app_modules/admin/vote/component/detail.tsx
rename to src/app_modules/admin/vote/component/comp_detail.tsx
diff --git a/src/app_modules/admin/vote/component/comp_publish.tsx b/src/app_modules/admin/vote/component/comp_detail_publish.tsx
similarity index 85%
rename from src/app_modules/admin/vote/component/comp_publish.tsx
rename to src/app_modules/admin/vote/component/comp_detail_publish.tsx
index 11acadf1..0796df9f 100644
--- a/src/app_modules/admin/vote/component/comp_publish.tsx
+++ b/src/app_modules/admin/vote/component/comp_detail_publish.tsx
@@ -2,7 +2,7 @@
 
 import { SimpleGrid, Title } from "@mantine/core";
 import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
-import { AdminVoting_ComponentDetail } from "./detail";
+import { AdminVoting_ComponentDetail } from "./comp_detail";
 import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
 import { AdminVoting_ComponentKontributorList } from "./comp_kontributor";
 
@@ -13,7 +13,7 @@ export function AdminVoting_ComponentDetailPublish({ data }: Props) {
 
   return (
     <SimpleGrid cols={2}>
-      <Admin_ComponentBoxStyle style={{height: 700}}>
+      <Admin_ComponentBoxStyle >
         <AdminVoting_ComponentDetail data={data} />
       </Admin_ComponentBoxStyle>
       <AdminVoting_ComponentKontributorList dataHasil={data.Voting_DaftarNamaVote}/>
diff --git a/src/app_modules/admin/vote/component/comp_detail_reject.tsx b/src/app_modules/admin/vote/component/comp_detail_reject.tsx
new file mode 100644
index 00000000..b865f695
--- /dev/null
+++ b/src/app_modules/admin/vote/component/comp_detail_reject.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
+import { Grid, SimpleGrid, Text } from "@mantine/core";
+import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
+import { AdminVoting_ComponentDetail } from "./comp_detail";
+import { AdminVoting_ComponentDetailRejectButton } from "./button/comp_button_detail_reject";
+import { useState } from "react";
+
+interface Props {
+  data: MODEL_VOTING;
+}
+export function AdminVoting_ComponentDetailReject({ data }: Props) {
+  const [newData, setNewData] = useState<MODEL_VOTING>(data);
+
+  return (
+    <SimpleGrid cols={2}>
+      <Admin_ComponentBoxStyle>
+        <AdminVoting_ComponentDetail data={newData} />
+        <ReportNote catatan={newData.catatan} />
+        <AdminVoting_ComponentDetailRejectButton
+          data={newData}
+          onUpdateData={(val) => {
+            setNewData({
+              ...newData,
+              catatan: val,
+            });
+          }}
+        />
+      </Admin_ComponentBoxStyle>
+    </SimpleGrid>
+  );
+}
+
+function ReportNote({ catatan }: { catatan: string }) {
+  return (
+    <>
+      <Grid mt={"md"}>
+        <Grid.Col span={3}>
+          <Text>Catatan report</Text>
+        </Grid.Col>
+        <Grid.Col span={1}>
+          <Text>:</Text>
+        </Grid.Col>
+        <Grid.Col span={"auto"}>
+          <Text>{catatan}</Text>
+        </Grid.Col>
+      </Grid>
+    </>
+  );
+}
diff --git a/src/app_modules/admin/vote/component/comp_detail_review.tsx b/src/app_modules/admin/vote/component/comp_detail_review.tsx
new file mode 100644
index 00000000..22b758b0
--- /dev/null
+++ b/src/app_modules/admin/vote/component/comp_detail_review.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
+import { Button, Group, SimpleGrid } from "@mantine/core";
+import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
+import { AdminVoting_ComponentDetail } from "./comp_detail";
+import { AdminVoting_ComponentDetailReviewButton } from "./button/comp_button_detail_review";
+
+interface Props {
+  data: MODEL_VOTING;
+}
+export function AdminVoting_ComponentDetailReview({ data }: Props) {
+  return (
+    <SimpleGrid cols={2}>
+      <Admin_ComponentBoxStyle>
+        <AdminVoting_ComponentDetail data={data} />
+        <AdminVoting_ComponentDetailReviewButton data={data}/>
+      </Admin_ComponentBoxStyle>
+    </SimpleGrid>
+  );
+}
diff --git a/src/app_modules/admin/vote/detail/detail_voting.tsx b/src/app_modules/admin/vote/detail/detail_voting.tsx
index 5eef6e55..e4ff6c96 100644
--- a/src/app_modules/admin/vote/detail/detail_voting.tsx
+++ b/src/app_modules/admin/vote/detail/detail_voting.tsx
@@ -8,8 +8,10 @@ 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 { AdminVoting_ComponentDetailPublish } from "../component/comp_publish";
+import { AdminVoting_ComponentDetailPublish } from "../component/comp_detail_publish";
 import { apiGetOneVotingById } from "../lib/api_fetch_admin_voting";
+import { AdminVoting_ComponentDetailReview } from "../component/comp_detail_review";
+import { AdminVoting_ComponentDetailReject } from "../component/comp_detail_reject";
 
 export function AdminVote_DetailVoting() {
   const param = useParams<{ id: string }>();
@@ -50,14 +52,12 @@ export function AdminVote_DetailVoting() {
         {data && data.voting_StatusId === "1" ? (
           <AdminVoting_ComponentDetailPublish data={data} />
         ) : data && data.voting_StatusId === "2" ? (
-          "detail review"
+          <AdminVoting_ComponentDetailReview data={data} />
         ) : data && data.voting_StatusId === "4" ? (
-          "detail reject"
+          <AdminVoting_ComponentDetailReject data={data} />
         ) : (
           ""
         )}
-
-        {/* <pre style={{ color: "white" }}>{JSON.stringify(data, null, 2)}</pre> */}
       </Stack>
     </>
   );