From 7e7856c32affb623df04822bb151c81f4659008e Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Fri, 31 Jan 2025 11:40:30 +0800
Subject: [PATCH 1/2] Add API Dashboard Donasi & Fix UI Dashboard

---
 .../admin/donasi/dashboard/[name]/route.ts    |   5 +-
 src/app/dev/admin/donasi/main/page.tsx        |   6 +-
 .../_component/comp_admin_modal_publish.tsx   |   2 +
 .../_component/comp_admin_modal_report.tsx    |   3 +
 .../donasi/detail/publish/detail_publish.tsx  |  62 ++++----
 .../donasi/lib/api_fetch_admin_donasi.ts      |  26 +++-
 src/app_modules/admin/donasi/main/index.tsx   | 145 +++++++++++++++---
 .../admin/donasi/sub_menu/table_kategori.tsx  |  19 +--
 .../admin/donasi/sub_menu/table_publish.tsx   |  33 ++--
 .../admin/donasi/sub_menu/table_reject.tsx    |  29 ++--
 .../admin/investasi/detail/detail_review.tsx  |   4 +-
 .../admin/investasi/main/table_reject.tsx     |  23 ++-
 .../admin/vote/child/riwayat/index.tsx        |  33 ++--
 .../admin/vote/child/table_publish/index.tsx  |  32 ++--
 .../admin/vote/child/table_reject/index.tsx   |  37 +++--
 .../admin/vote/child/table_review/index.tsx   |  31 ++--
 src/app_modules/admin/vote/main/index.tsx     |  35 +++--
 src/middleware.ts                             |   1 +
 18 files changed, 331 insertions(+), 195 deletions(-)

diff --git a/src/app/api/admin/donasi/dashboard/[name]/route.ts b/src/app/api/admin/donasi/dashboard/[name]/route.ts
index 16a64c4a..61118d40 100644
--- a/src/app/api/admin/donasi/dashboard/[name]/route.ts
+++ b/src/app/api/admin/donasi/dashboard/[name]/route.ts
@@ -25,6 +25,9 @@ export async function GET(request: Request, { params }: {
             where: {
                 DonasiMaster_Status: {
                     name: fixStatus
+                },
+                DonasiMaster_Ketegori: {
+                    name: fixStatus
                 }
             }
         });
@@ -47,4 +50,4 @@ export async function GET(request: Request, { params }: {
     } finally {
         await prisma.$disconnect();
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/dev/admin/donasi/main/page.tsx b/src/app/dev/admin/donasi/main/page.tsx
index 2fadbc04..133a7c09 100644
--- a/src/app/dev/admin/donasi/main/page.tsx
+++ b/src/app/dev/admin/donasi/main/page.tsx
@@ -10,9 +10,9 @@ export default async function Page() {
   return (
     <>
       <AdminDonasi_Main
-        countPublish={countPublish as number}
-        countReview={countReview as number}
-        countReject={countReject as number}
+        // countPublish={countPublish as number}
+        // countReview={countReview as number}
+        // countReject={countReject as number}
       />
     </>
   );
diff --git a/src/app_modules/admin/_admin_global/_component/comp_admin_modal_publish.tsx b/src/app_modules/admin/_admin_global/_component/comp_admin_modal_publish.tsx
index e64c4321..d962a119 100644
--- a/src/app_modules/admin/_admin_global/_component/comp_admin_modal_publish.tsx
+++ b/src/app_modules/admin/_admin_global/_component/comp_admin_modal_publish.tsx
@@ -1,3 +1,4 @@
+import { AdminColor } from '@/app_modules/_global/color/color_pallet';
 import { Group, Modal, Stack } from '@mantine/core';
 import React from 'react';
 
@@ -11,6 +12,7 @@ function Admin_ComponentModalPublish({ onClose, opened, title, buttonKiri, butto
   return (
     <>
       <Modal
+        styles={{ content: { backgroundColor: AdminColor.softBlue, }, header: { backgroundColor: AdminColor.softBlue }, title: { color: AdminColor.white } }}
         centered
         opened={opened}
         onClose={onClose}
diff --git a/src/app_modules/admin/_admin_global/_component/comp_admin_modal_report.tsx b/src/app_modules/admin/_admin_global/_component/comp_admin_modal_report.tsx
index aed01faf..9abdc037 100644
--- a/src/app_modules/admin/_admin_global/_component/comp_admin_modal_report.tsx
+++ b/src/app_modules/admin/_admin_global/_component/comp_admin_modal_report.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { Group, Modal, Stack, Textarea } from "@mantine/core";
 import React from "react";
 
@@ -25,6 +26,8 @@ export function Admin_ComponentModalReport({
   return (
     <>
       <Modal
+        style={{ color: AdminColor.white}}
+        styles={{ content: { backgroundColor: AdminColor.softBlue,  }, header: { backgroundColor: AdminColor.softBlue }, title: { color: AdminColor.white } }}
         opened={opened}
         onClose={onClose}
         title={title}
diff --git a/src/app_modules/admin/donasi/detail/publish/detail_publish.tsx b/src/app_modules/admin/donasi/detail/publish/detail_publish.tsx
index 414b7aae..27f8171f 100644
--- a/src/app_modules/admin/donasi/detail/publish/detail_publish.tsx
+++ b/src/app_modules/admin/donasi/detail/publish/detail_publish.tsx
@@ -48,6 +48,7 @@ import { adminDonasi_getListDonatur } from "../../fun/get/get_list_donatur_by_id
 import { AdminDonasi_getOneById } from "../../fun/get/get_one_by_id";
 import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
 import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminDonasi_DetailPublish({
   dataPublish,
@@ -108,7 +109,7 @@ function TampilanDetailDonasi({
 
   return (
     <>
-      <Paper radius={"md"} p={"md"}>
+      <Paper bg={AdminColor.softBlue} radius={"md"} p={"md"}>
         <Stack>
           <SimpleGrid
             cols={3}
@@ -119,7 +120,7 @@ function TampilanDetailDonasi({
               { maxWidth: "36rem", cols: 1, spacing: "sm" },
             ]}
           >
-            <Paper withBorder p={"xs"}>
+            <Paper p={"xs"}>
               <Stack>
                 <Title align="center" order={4}>
                   Gambar Donasi
@@ -128,7 +129,7 @@ function TampilanDetailDonasi({
               </Stack>
             </Paper>
 
-            <Paper withBorder p={"sm"}>
+            <Paper p={"sm"}>
               <Stack spacing={5}>
                 <Title order={4}>Detail Donasi</Title>
                 <Grid>
@@ -379,25 +380,25 @@ function TampilanListDonatur({
   const tableRows = lisDonatur.map((e, i) => (
     <tr key={i}>
       <td>
-        <Center>{e?.Author.username}</Center>
+        <Center c={AccentColor.white}>{e?.Author.username}</Center>
       </td>
       <td>
-        <Center>{e?.DonasiMaster_Bank?.name}</Center>
+        <Center c={AccentColor.white}>{e?.DonasiMaster_Bank?.name}</Center>
       </td>
       <td>
-        <Center>
-          <ComponentGlobal_TampilanRupiah color="black" nominal={+e?.nominal} />
+        <Center c={AccentColor.white}>
+          <ComponentGlobal_TampilanRupiah  nominal={+e?.nominal} />
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
             e?.createdAt
           )}
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           <Badge w={150} variant="dot">
             {e?.DonasiMaster_StatusInvoice?.name}
           </Badge>
@@ -458,7 +459,7 @@ function TampilanListDonatur({
         {/* <pre>{JSON.stringify(dataDonasi, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Daftar Donatur"
-          color="gray.4"
+          color={AdminColor.softBlue}
           component={
             <Group>
               <ActionIcon
@@ -486,38 +487,36 @@ function TampilanListDonatur({
           }
         />
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
             <Table
               verticalSpacing={"xl"}
               horizontalSpacing={"md"}
               p={"md"}
               w={1500}
-              striped
-              highlightOnHover
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Nama Donatur</Center>
+                    <Center c={AccentColor.white}>Nama Donatur</Center>
                   </th>
                   <th>
-                    <Center>Nama Bank</Center>
+                    <Center c={AccentColor.white}>Nama Bank</Center>
                   </th>
                   <th>
-                    <Center>Jumlah Donasi</Center>
+                    <Center c={AccentColor.white}>Jumlah Donasi</Center>
                   </th>
                   <th>
-                    <Center>Tanggal</Center>
+                    <Center c={AccentColor.white}>Tanggal</Center>
                   </th>
                   <th>
-                    <Center>Status</Center>
+                    <Center c={AccentColor.white}>Status</Center>
                   </th>
                   <th>
-                    <Center>Bukti Transfer</Center>
+                    <Center c={AccentColor.white}>Bukti Transfer</Center>
                   </th>
                   <th>
-                    <Center>Aksi</Center>
+                    <Center c={AccentColor.white}>Aksi</Center>
                   </th>
                 </tr>
               </thead>
@@ -697,15 +696,15 @@ function TampilanListPencairan({
   const rowTable = data.map((e) => (
     <tr key={e.id}>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <TampilanRupiahDonasi nominal={e.nominalCair} />
         </Center>
       </td>
       <td>
-        <Center>{moment(e.createdAt).format("ll")}</Center>
+        <Center c={AdminColor.white}>{moment(e.createdAt).format("ll")}</Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Text>{e.title}</Text>
         </Center>
       </td>
@@ -755,7 +754,7 @@ function TampilanListPencairan({
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Rincian Pencairan Dana"
-          color="gray.4"
+          color={AdminColor.softBlue}
           component={
             <Group>
             <ActionIcon
@@ -783,30 +782,29 @@ function TampilanListPencairan({
           }
         />
       
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
             <Table
               verticalSpacing={"xl"}
               horizontalSpacing={"md"}
               p={"md"}
               w={1500}
-              striped
-              highlightOnHover
+              
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Nominal</Center>
+                    <Center c={AccentColor.white}>Nominal</Center>
                   </th>
                   <th>
-                    <Center>Tanggal</Center>
+                    <Center c={AccentColor.white}>Tanggal</Center>
                   </th>
                   <th>
-                    <Center>Judul</Center>
+                    <Center c={AccentColor.white}>Judul</Center>
                   </th>
-                  <th>Deskripsi</th>
+                  <th style={{ color: AccentColor.white}}>Deskripsi</th>
                   <th>
-                    <Center>Bukti Transfer</Center>
+                    <Center c={AccentColor.white}>Bukti Transfer</Center>
                   </th>
                 </tr>
               </thead>
diff --git a/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts b/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts
index f1852371..deff9dba 100644
--- a/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts
+++ b/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts
@@ -1,9 +1,13 @@
+export {
+    apiGetDonasiStatusCountDashboard,
+    apiGetDonasiKategoriCountDashboard
+};
 const apiGetDonasiStatusCountDashboard = async ({ name }:
     { name: "Publish" | "Review" | "Reject" }) => {
     const { token } = await fetch("/api/get-cookie").then((res) => res.json());
     if (!token) return await token.json().catch(() => null);
-
-    const response = await fetch(`api/admin/donasi/dashboard/${name}`, {
+    
+    const response = await fetch(`/api/admin/donasi/dashboard/${name}`, {
         method: "GET",
         headers: {
             "Content-Type": "application/json",
@@ -13,4 +17,20 @@ const apiGetDonasiStatusCountDashboard = async ({ name }:
         }
     });
     return await response.json().catch(() => null);
-};
\ No newline at end of file
+};
+
+const apiGetDonasiKategoriCountDashboard = async ({ name }: { name: "Kategori" }) => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/donasi/dashboard/${name}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control_Allow-Origin": "*",
+            Authorization: `Bearer ${token}`
+        }
+    });
+    return await response.json().catch(() => null);
+}
\ No newline at end of file
diff --git a/src/app_modules/admin/donasi/main/index.tsx b/src/app_modules/admin/donasi/main/index.tsx
index 1ef0f5a8..8521ae7c 100644
--- a/src/app_modules/admin/donasi/main/index.tsx
+++ b/src/app_modules/admin/donasi/main/index.tsx
@@ -20,51 +20,150 @@ import { useRouter } from "next/navigation";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { useState } from "react";
+import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import global_limit from "@/app/lib/limit";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetDonasiKategoriCountDashboard, apiGetDonasiStatusCountDashboard } from "../lib/api_fetch_admin_donasi";
 
 export default function AdminDonasi_Main({
-  countPublish,
-  countReview,
-  
-  countReject,
+  // countPublish,
+  // countReview,
+
+  // countReject,
 }: {
-  countPublish: number;
-  countReview: number;
+    // countPublish: number;
+    // countReview: number;
+
+    // countReject: number;
+  }) {
+
+  const [countPublish, setCountPublish] = useState<number | null>(null);
+  const [countReview, setCountReview] = useState<number | null>(null);
+  const [countReject, setCountReject] = useState<number | null>(null);
+  const [countKategori, setCountKategori] = useState<number | null>(null);
   
-  countReject: number;
-}) {
+  useShallowEffect(() => {
+    handlerLoadData();
+  }, []);
+  async function handlerLoadData() {
+    try {
+      const listLoadData = [
+        global_limit(() => onLoadCountPublish()),
+        global_limit(() => onLoadCountReview()),
+        global_limit(() => onLoadCountReject()),
+        global_limit(() => onLoadCountKategori()),
+      ];
+      const result = await Promise.all(listLoadData);
+    } catch (error) {
+      clientLogger.error("Error handler load data", error);
+    }
+  }
+  async function onLoadCountPublish() {
+    try {
+      const response = await apiGetDonasiStatusCountDashboard({
+        name: "Publish",
+      })
+
+      if (response) {
+        setCountPublish(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count publish", error);
+    }
+  }
+  async function onLoadCountReview() {
+    try {
+      const response = await apiGetDonasiStatusCountDashboard({
+        name: "Review",
+      })
+      if (response) {
+        setCountReview(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count review", error);
+    }
+  }
+  async function onLoadCountReject() {
+    try {
+      const response = await apiGetDonasiStatusCountDashboard({
+        name: "Reject",
+      })
+      if (response) {
+        setCountReject(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count reject", error);
+    }
+  }
+  async function onLoadCountKategori() {
+    try {
+      const response = await apiGetDonasiKategoriCountDashboard({
+        name: "Kategori"
+      })
+      if (response) {
+        setCountKategori(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count kategori", error);
+    }
+  }
+
+
   const router = useRouter();
   const listBox = [
     {
       id: 1,
       name: "Publish",
-      jumlah: countPublish,
-      link: RouterAdminDonasi_OLD.table_publish,
+      jumlah: countPublish == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countPublish ? (
+        countPublish
+      ) : (
+        "-"
+      ),
       color: MainColor.green,
-      icon: <IconUpload size={18} color="#4CAF4F"/>,
+      icon: <IconUpload size={18} color="#4CAF4F" />,
     },
     {
       id: 2,
       name: "Review",
-      jumlah: countReview,
-      link: RouterAdminDonasi_OLD.table_review,
+      jumlah: countReview == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countReview ? (
+        countReview
+      ) : (
+        "-"
+      ),
       color: MainColor.orange,
-      icon: <IconBookmark size={18}  color="#FF7043"/>
+      icon: <IconBookmark size={18} color="#FF7043" />
     },
     {
       id: 3,
       name: "Reject",
-      jumlah: countReject,
-      link: RouterAdminDonasi_OLD.table_reject,
+      jumlah: countReject == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countReject ? (
+        countReject
+      ) : (
+        "-"
+      ),
       color: MainColor.red,
       icon: <IconAlertTriangle size={18} color="#FF4B4C" />
     },
     {
       id: 4,
       name: "Kategori",
-      jumlah: 5,
-      link: RouterAdminDonasi_OLD.table_kategori,
+      jumlah: countKategori == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countKategori ? (
+        countKategori
+      ) : (
+        "-"
+      ),
       color: AccentColor.softblue,
-      icon: <IconCategory size={18} color="#007CBA"/>
+      icon: <IconCategory size={18} color="#007CBA" />
 
     }
   ];
@@ -89,9 +188,9 @@ export default function AdminDonasi_Main({
               shadow="md"
               radius="md"
               p="md"
-              // sx={{ borderColor: e.color, borderStyle: "solid" }}
+            // sx={{ borderColor: e.color, borderStyle: "solid" }}
             >
-                <Stack spacing={0}>
+              <Stack spacing={0}>
                 <Text c={AccentColor.white} fw={"bold"}>{e.name}</Text>
                 <Flex align={"center"} justify={"space-between"}>
                   <Title c={AccentColor.white} fw={"bold"}>{e.jumlah ? e.jumlah : 0}</Title>
@@ -99,8 +198,8 @@ export default function AdminDonasi_Main({
                     {e.icon}
                   </ThemeIcon>
                 </Flex>
-                </Stack>
-              
+              </Stack>
+
             </Paper>
           ))}
         </SimpleGrid>
diff --git a/src/app_modules/admin/donasi/sub_menu/table_kategori.tsx b/src/app_modules/admin/donasi/sub_menu/table_kategori.tsx
index e1d8fca4..b852816b 100644
--- a/src/app_modules/admin/donasi/sub_menu/table_kategori.tsx
+++ b/src/app_modules/admin/donasi/sub_menu/table_kategori.tsx
@@ -30,6 +30,8 @@ import adminDonasi_funDeleteKategori from "../fun/delete/fun_delete_by_id";
 import adminDonasi_funUpdatekategoriById from "../fun/update/fun_update_kategori_by_id";
 import _ from "lodash";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
+import { AccentColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminDonasi_TableKategori({
   listKategori,
@@ -115,7 +117,7 @@ function TableView({ list }: { list: MODEL_NEW_DEFAULT_MASTER[] }) {
   const rowTable = data.map((e, i) => (
     <tr key={i}>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           <Text>{e?.name}</Text>
         </Center>
       </td>
@@ -149,7 +151,7 @@ function TableView({ list }: { list: MODEL_NEW_DEFAULT_MASTER[] }) {
               });
             }}
           >
-            <IconEdit color="green" />
+            <IconEdit color={AdminColor.green} />
           </ActionIcon>
         </Group>
       </td>
@@ -162,7 +164,7 @@ function TableView({ list }: { list: MODEL_NEW_DEFAULT_MASTER[] }) {
         {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Kategori"
-          color="gray.4"
+          color={AdminColor.softBlue}
           component={
             <Button
             w={120}
@@ -199,26 +201,25 @@ function TableView({ list }: { list: MODEL_NEW_DEFAULT_MASTER[] }) {
 
         <Grid>
           <Grid.Col span={"auto"}>
-            <Paper p={"md"} withBorder shadow="lg" h={"70vh"}>
+            <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"70vh"}>
               <ScrollArea w={"100%"} h={"90%"}>
                 <Table
                   verticalSpacing={"xs"}
                   horizontalSpacing={"md"}
                   p={"md"}
                   w={"100%"}
-                  striped
-                  highlightOnHover
+                 
                 >
                   <thead>
                     <tr>
                       <th>
-                        <Center>Kategori</Center>
+                        <Center c={AccentColor.white}>Kategori</Center>
                       </th>
                       <th>
-                        <Center>Status</Center>
+                        <Center c={AccentColor.white}>Status</Center>
                       </th>
                       <th>
-                        <Center>Aksi</Center>
+                        <Center c={AccentColor.white}>Aksi</Center>
                       </th>
                     </tr>
                   </thead>
diff --git a/src/app_modules/admin/donasi/sub_menu/table_publish.tsx b/src/app_modules/admin/donasi/sub_menu/table_publish.tsx
index b6048cef..21c053cb 100644
--- a/src/app_modules/admin/donasi/sub_menu/table_publish.tsx
+++ b/src/app_modules/admin/donasi/sub_menu/table_publish.tsx
@@ -72,23 +72,23 @@ function TableStatus({ listPublish }: { listPublish: any }) {
   const TableRows = data.map((e, i) => (
     <tr key={i}>
       <td>
-        <Center>{e.title}</Center>
+        <Center c={AccentColor.white}>{e.title}</Center>
       </td>
       <td>
-        <Center>
-          <ComponentGlobal_TampilanRupiah color="black" nominal={+e.target} />
+        <Center c={AccentColor.white}>
+          <ComponentGlobal_TampilanRupiah nominal={+e.target} />
         </Center>
       </td>
       <td>
-        <Center>
-          <ComponentGlobal_TampilanRupiah color="black" nominal={+e.terkumpul} />
+        <Center c={AccentColor.white}>
+          <ComponentGlobal_TampilanRupiah nominal={+e.terkumpul} />
         </Center>
       </td>
       <td>
-        <Center>{e.DonasiMaster_Ketegori.name}</Center>
+        <Center c={AccentColor.white}>{e.DonasiMaster_Ketegori.name}</Center>
       </td>
       <td>
-        <Center>{e.DonasiMaster_Durasi.name} hari</Center>
+        <Center c={AccentColor.white}>{e.DonasiMaster_Durasi.name} hari</Center>
       </td>
       <td>
         <Center>
@@ -118,7 +118,7 @@ function TableStatus({ listPublish }: { listPublish: any }) {
         {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Publish"
-          color={AdminColor.green}
+          color={AdminColor.softBlue}
           component={
             <TextInput
             icon={<IconSearch size={20} />}
@@ -147,35 +147,34 @@ function TableStatus({ listPublish }: { listPublish: any }) {
           />
         </Group> */}
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
             <Table
               verticalSpacing={"md"}
               horizontalSpacing={"md"}
               p={"md"}
               w={1500}
-              striped
-              highlightOnHover
+              
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Judul</Center>
+                    <Center c={AccentColor.white}>Judul</Center>
                   </th>
                   <th>
-                    <Center>Target</Center>
+                    <Center c={AccentColor.white}>Target</Center>
                   </th>
                   <th>
-                    <Center>Terkumpul</Center>
+                    <Center c={AccentColor.white}>Terkumpul</Center>
                   </th>
                   <th>
-                    <Center>Ketegori</Center>
+                    <Center c={AccentColor.white}>Ketegori</Center>
                   </th>
                   <th>
-                    <Center>Durasi</Center>
+                    <Center c={AccentColor.white}>Durasi</Center>
                   </th>
                   <th>
-                    <Center>Aksi</Center>
+                    <Center c={AccentColor.white}>Aksi</Center>
                   </th>
                 </tr>
               </thead>
diff --git a/src/app_modules/admin/donasi/sub_menu/table_reject.tsx b/src/app_modules/admin/donasi/sub_menu/table_reject.tsx
index c6d354d9..a71bfd1e 100644
--- a/src/app_modules/admin/donasi/sub_menu/table_reject.tsx
+++ b/src/app_modules/admin/donasi/sub_menu/table_reject.tsx
@@ -75,21 +75,21 @@ function TableStatus({ dataReject }: { dataReject: any }) {
   const TableRows = data.map((e, i) => (
     <tr key={i}>
       <td>
-        <Center>{e?.Author?.username}</Center>
+        <Center c={AccentColor.white}>{e?.Author?.username}</Center>
       </td>
       <td>
-        <Center>{e?.title}</Center>
+        <Center c={AccentColor.white}>{e?.title}</Center>
       </td>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           <ComponentGlobal_TampilanRupiah color="black" nominal={+e.target} />
         </Center>
       </td>
       <td>
-        <Center>{e?.DonasiMaster_Ketegori.name}</Center>
+        <Center c={AccentColor.white}>{e?.DonasiMaster_Ketegori.name}</Center>
       </td>
       <td>
-        <Center>{e?.DonasiMaster_Durasi.name} hari</Center>
+        <Center c={AccentColor.white}>{e?.DonasiMaster_Durasi.name} hari</Center>
       </td>
       <td>
         <Center>
@@ -117,7 +117,7 @@ function TableStatus({ dataReject }: { dataReject: any }) {
         {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Reject"
-          color={AdminColor.red}
+          color={AdminColor.softBlue}
           component={
             <TextInput
             icon={<IconSearch size={20} />}
@@ -146,35 +146,34 @@ function TableStatus({ dataReject }: { dataReject: any }) {
           />
         </Group> */}
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
             <Table
               verticalSpacing={"md"}
               horizontalSpacing={"md"}
               p={"md"}
               w={1500}
-              striped
-              highlightOnHover
+            
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Username</Center>
+                    <Center c={AccentColor.white}>Username</Center>
                   </th>
                   <th>
-                    <Center>Judul</Center>
+                    <Center c={AccentColor.white}>Judul</Center>
                   </th>
                   <th>
-                    <Center>Target</Center>
+                    <Center c={AccentColor.white}>Target</Center>
                   </th>
                   <th>
-                    <Center>Ketegori</Center>
+                    <Center c={AccentColor.white}>Ketegori</Center>
                   </th>
                   <th>
-                    <Center>Durasi</Center>
+                    <Center c={AccentColor.white}>Durasi</Center>
                   </th>
                   <th>
-                    <Center>Alasan</Center>
+                    <Center c={AccentColor.white}>Alasan</Center>
                   </th>
                 </tr>
               </thead>
diff --git a/src/app_modules/admin/investasi/detail/detail_review.tsx b/src/app_modules/admin/investasi/detail/detail_review.tsx
index a3ee11ec..3ed91740 100644
--- a/src/app_modules/admin/investasi/detail/detail_review.tsx
+++ b/src/app_modules/admin/investasi/detail/detail_review.tsx
@@ -212,7 +212,7 @@ export default function AdminInvestasi_DetailReview({
         buttonKanan={
           <Button
             loaderPosition="center"
-            bg={MainColor.green}
+            style={{ backgroundColor: MainColor.green }}
             loading={isLoadingReject}
             radius={"xl"}
             onClick={() => {
@@ -235,7 +235,7 @@ export default function AdminInvestasi_DetailReview({
         buttonKanan={
           <Button
             loaderPosition="center"
-            bg={MainColor.green}
+            style={{ backgroundColor: MainColor.green }}
             loading={isLoadingPublish}
             radius={"xl"}
             onClick={() => {
diff --git a/src/app_modules/admin/investasi/main/table_reject.tsx b/src/app_modules/admin/investasi/main/table_reject.tsx
index c4e5f1c3..9d81340c 100644
--- a/src/app_modules/admin/investasi/main/table_reject.tsx
+++ b/src/app_modules/admin/investasi/main/table_reject.tsx
@@ -30,7 +30,7 @@ import { adminInvestasi_funGetAllReject } from "../fun/get/get_all_reject";
 import { RouterAdminInvestasi } from "@/app/lib/router_admin/router_admin_investasi";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { MainColor } from "@/app_modules/_global/color";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Admin_TableRejectInvestasi({
   dataInvestsi,
@@ -153,17 +153,17 @@ function TableView({ listData }: { listData: any }) {
     <tr key={e.id}>
       <td>
         <Center w={200}>
-          <Text lineClamp={1}>{e.author.username}</Text>
+          <Text c={AccentColor.white} lineClamp={1}>{e.author.username}</Text>
         </Center>
       </td>
       <td>
         <Center w={400}>
-          <Text lineClamp={1}>{e.title}</Text>
+          <Text c={AccentColor.white} lineClamp={1}>{e.title}</Text>
         </Center>
       </td>
       <td>
         <Center w={400}>
-          <Text lineClamp={1}>{e.catatan}</Text>
+          <Text c={AccentColor.white} lineClamp={1}>{e.catatan}</Text>
         </Center>
       </td>
 
@@ -193,7 +193,7 @@ function TableView({ listData }: { listData: any }) {
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Reject"
-          color={AdminColor.red}
+          color={AdminColor.softBlue}
           component={
             <TextInput
             icon={<IconSearch size={20} />}
@@ -227,7 +227,7 @@ function TableView({ listData }: { listData: any }) {
         {_.isEmpty(data) ? (
           <ComponentAdminGlobal_IsEmptyData />
         ) : (
-          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
               <Table
                 verticalSpacing={"md"}
@@ -235,22 +235,21 @@ function TableView({ listData }: { listData: any }) {
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-                striped
-                highlightOnHover
+               
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center w={200}>Username</Center>
+                      <Center c={AccentColor.white} w={200}>Username</Center>
                     </th>
                     <th>
-                      <Center w={400}>Nama Proyek</Center>
+                      <Center c={AccentColor.white} w={400}>Nama Proyek</Center>
                     </th>
                     <th>
-                      <Center w={400}>Catatan Penolakan</Center>
+                      <Center c={AccentColor.white} w={400}>Catatan Penolakan</Center>
                     </th>
                     <th>
-                      <Center w={200}>Aksi</Center>
+                      <Center c={AccentColor.white} w={200}>Aksi</Center>
                     </th>
                   </tr>
                 </thead>
diff --git a/src/app_modules/admin/vote/child/riwayat/index.tsx b/src/app_modules/admin/vote/child/riwayat/index.tsx
index 976f0ffc..7d261e09 100644
--- a/src/app_modules/admin/vote/child/riwayat/index.tsx
+++ b/src/app_modules/admin/vote/child/riwayat/index.tsx
@@ -26,6 +26,8 @@ import ComponentAdminVote_DetailHasil from "../../component/detail_hasil";
 import { adminVote_funGetListRiwayat } from "../../fun";
 import { AdminVote_getHasilById } from "../../fun/get/get_hasil_by_id";
 import { AdminVote_getListKontributorById } from "../../fun/get/get_list_kontributor_by_id";
+import { AccentColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminVote_Riwayat({
   dataVote,
@@ -98,10 +100,10 @@ function TableStatus({ listPublish }: { listPublish: any }) {
         </Center>
       </td>
       <td>
-        <Center>{e?.Author?.username}</Center>
+        <Center c={AccentColor.white}>{e?.Author?.username}</Center>
       </td>
       <td>
-        <Center>{e?.title}</Center>
+        <Center c={AccentColor.white}>{e?.title}</Center>
       </td>
       <td>
         <Center>
@@ -119,18 +121,18 @@ function TableStatus({ listPublish }: { listPublish: any }) {
         <Stack>
           {e?.Voting_DaftarNamaVote.map((v) => (
             <Box key={v?.id}>
-              <Text>- {v?.value}</Text>
+              <Text c={AccentColor.white}>- {v?.value}</Text>
             </Box>
           ))}
         </Stack>
       </th>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           {e?.awalVote.toLocaleDateString("id-ID", { dateStyle: "long" })}
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           {e?.akhirVote.toLocaleDateString("id-ID", { dateStyle: "long" })}
         </Center>
       </td>
@@ -143,7 +145,7 @@ function TableStatus({ listPublish }: { listPublish: any }) {
         {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Riwayat"
-          color="gray.4"
+          color={AdminColor.softBlue}
           component={
             <TextInput
             icon={<IconSearch size={20} />}
@@ -172,38 +174,37 @@ function TableStatus({ listPublish }: { listPublish: any }) {
           />
         </Group> */}
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
             <Table
               verticalSpacing={"md"}
               horizontalSpacing={"md"}
               p={"md"}
               w={1500}
-              striped
-              highlightOnHover
+              
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Aksi</Center>
+                    <Center c={AccentColor.white}>Aksi</Center>
                   </th>
                   <th>
-                    <Center>Username</Center>
+                    <Center c={AccentColor.white}>Username</Center>
                   </th>
                   <th>
-                    <Center>Judul</Center>
+                    <Center c={AccentColor.white}>Judul</Center>
                   </th>
                   <th>
-                    <Center>Deskripsi</Center>
+                    <Center c={AccentColor.white}>Deskripsi</Center>
                   </th>
                   <th>
-                    <Center>Pilihan</Center>
+                    <Center c={AccentColor.white}>Pilihan</Center>
                   </th>
                   <th>
-                    <Center>Mulai Vote</Center>
+                    <Center c={AccentColor.white}>Mulai Vote</Center>
                   </th>
                   <th>
-                    <Center>Selesai Vote</Center>
+                    <Center c={AccentColor.white}>Selesai Vote</Center>
                   </th>
                 </tr>
               </thead>
diff --git a/src/app_modules/admin/vote/child/table_publish/index.tsx b/src/app_modules/admin/vote/child/table_publish/index.tsx
index 8e23b3fc..226acca4 100644
--- a/src/app_modules/admin/vote/child/table_publish/index.tsx
+++ b/src/app_modules/admin/vote/child/table_publish/index.tsx
@@ -28,7 +28,7 @@ import { AdminVote_getListKontributorById } from "../../fun/get/get_list_kontrib
 import { adminVote_funGetListPublish } from "../../fun/get/status/get_list_publish";
 import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
 import { MainColor } from "@/app_modules/_global/color";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminVote_TablePublish({
   dataVote,
@@ -101,10 +101,10 @@ function TableStatus({ listPublish }: { listPublish: any }) {
         </Center>
       </td>
       <td>
-        <Center>{e?.Author?.username}</Center>
+        <Center c={AccentColor.white}>{e?.Author?.username}</Center>
       </td>
       <td>
-        <Center>{e?.title}</Center>
+        <Center c={AccentColor.white}>{e?.title}</Center>
       </td>
       <td>
         <Center>
@@ -122,18 +122,18 @@ function TableStatus({ listPublish }: { listPublish: any }) {
         <Stack>
           {e?.Voting_DaftarNamaVote.map((v) => (
             <Box key={v?.id}>
-              <Text>- {v?.value}</Text>
+              <Text c={AccentColor.white}>- {v?.value}</Text>
             </Box>
           ))}
         </Stack>
       </th>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           {e?.awalVote.toLocaleDateString("id-ID", { dateStyle: "long" })}
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           {e?.akhirVote.toLocaleDateString("id-ID", { dateStyle: "long" })}
         </Center>
       </td>
@@ -146,7 +146,7 @@ function TableStatus({ listPublish }: { listPublish: any }) {
         {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Publish"
-          color={AdminColor.green}
+          color={AdminColor.softBlue}
           component={
             <TextInput
             icon={<IconSearch size={20} />}
@@ -175,38 +175,36 @@ function TableStatus({ listPublish }: { listPublish: any }) {
           />
         </Group> */}
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
             <Table
               verticalSpacing={"md"}
               horizontalSpacing={"md"}
               p={"md"}
               w={1500}
-              striped
-              highlightOnHover
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Aksi</Center>
+                    <Center c={AccentColor.white}>Aksi</Center>
                   </th>
                   <th>
-                    <Center>Username</Center>
+                    <Center c={AccentColor.white}>Username</Center>
                   </th>
                   <th>
-                    <Center>Judul</Center>
+                    <Center c={AccentColor.white}>Judul</Center>
                   </th>
                   <th>
-                    <Center>Deskripsi</Center>
+                    <Center c={AccentColor.white}>Deskripsi</Center>
                   </th>
                   <th>
-                    <Center>Pilihan</Center>
+                    <Center c={AccentColor.white}>Pilihan</Center>
                   </th>
                   <th>
-                    <Center>Mulai Vote</Center>
+                    <Center c={AccentColor.white}>Mulai Vote</Center>
                   </th>
                   <th>
-                    <Center>Selesai Vote</Center>
+                    <Center c={AccentColor.white}>Selesai Vote</Center>
                   </th>
                 </tr>
               </thead>
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 8bbf07d0..96337d24 100644
--- a/src/app_modules/admin/vote/child/table_reject/index.tsx
+++ b/src/app_modules/admin/vote/child/table_reject/index.tsx
@@ -29,7 +29,7 @@ import { adminVote_funGetListReject } from "../../fun";
 import { AdminVote_funEditCatatanRejectById } from "../../fun/edit/fun_edit_catatan_reject_by_id";
 import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
 import { MainColor } from "@/app_modules/_global/color";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminVote_TableReject({ dataVote }: { dataVote: any }) {
   return (
@@ -109,7 +109,7 @@ function TableStatus({ listData }: { listData: any }) {
               setCatatan(e.catatan);
             }}
           >
-            <Stack spacing={0}>
+            <Stack c={AccentColor.white} spacing={0}>
               <Text fz={10}>Tambah</Text>
               <Text fz={10}>Catatan</Text>
             </Stack>
@@ -129,10 +129,10 @@ function TableStatus({ listData }: { listData: any }) {
         </Center>
       </td>
       <td>
-        <Center>{e?.Author?.Profile?.name}</Center>
+        <Center c={AccentColor.white}>{e?.Author?.Profile?.name}</Center>
       </td>
       <td>
-        <Center>{e.title}</Center>
+        <Center c={AccentColor.white}>{e.title}</Center>
       </td>
       <td>
         <Center>
@@ -150,18 +150,18 @@ function TableStatus({ listData }: { listData: any }) {
         <Stack>
           {e.Voting_DaftarNamaVote.map((v) => (
             <Box key={v.id}>
-              <Text>- {v.value}</Text>
+              <Text c={AccentColor.white}>- {v.value}</Text>
             </Box>
           ))}
         </Stack>
       </th>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           {e.awalVote.toLocaleDateString("id-ID", { dateStyle: "long" })}
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           {e.akhirVote.toLocaleDateString("id-ID", { dateStyle: "long" })}
         </Center>
       </td>
@@ -174,7 +174,7 @@ function TableStatus({ listData }: { listData: any }) {
         {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Reject"
-          color={AdminColor.red}
+          color={AdminColor.softBlue}
           component={
             <TextInput
             icon={<IconSearch size={20} />}
@@ -203,41 +203,40 @@ function TableStatus({ listData }: { listData: any }) {
           />
         </Group> */}
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
             <Table
               verticalSpacing={"md"}
               horizontalSpacing={"md"}
               p={"md"}
               w={1500}
-              striped
-              highlightOnHover
+              
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Aksi</Center>
+                    <Center c={AccentColor.white}>Aksi</Center>
                   </th>
                   <th>
-                    <Center>Catatan</Center>
+                    <Center c={AccentColor.white}>Catatan</Center>
                   </th>
                   <th>
-                    <Center>Author</Center>
+                    <Center c={AccentColor.white}>Author</Center>
                   </th>
                   <th>
-                    <Center>Judul</Center>
+                    <Center c={AccentColor.white}>Judul</Center>
                   </th>
                   <th>
-                    <Center>Deskripsi</Center>
+                    <Center c={AccentColor.white}>Deskripsi</Center>
                   </th>
                   <th>
-                    <Center>Pilihan</Center>
+                    <Center c={AccentColor.white}>Pilihan</Center>
                   </th>
                   <th>
-                    <Center>Mulai Vote</Center>
+                    <Center c={AccentColor.white}>Mulai Vote</Center>
                   </th>
                   <th>
-                    <Center>Selesai Vote</Center>
+                    <Center c={AccentColor.white}>Selesai Vote</Center>
                   </th>
                 </tr>
               </thead>
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 584499fa..5f944ceb 100644
--- a/src/app_modules/admin/vote/child/table_review/index.tsx
+++ b/src/app_modules/admin/vote/child/table_review/index.tsx
@@ -123,10 +123,10 @@ function TableStatus({ listData }: { listData: any }) {
   const TableRows = data.map((e, i) => (
     <tr key={i}>
       <td>
-        <Center>{e?.Author?.username}</Center>
+        <Center c={AccentColor.white}>{e?.Author?.username}</Center>
       </td>
       <td>
-        <Center>{e.title}</Center>
+        <Center c={AccentColor.white}>{e.title}</Center>
       </td>
       <td>
         <Center>
@@ -144,18 +144,18 @@ function TableStatus({ listData }: { listData: any }) {
         <Stack>
           {e.Voting_DaftarNamaVote.map((v) => (
             <Box key={v.id}>
-              <Text>- {v.value}</Text>
+              <Text c={AccentColor.white}>- {v.value}</Text>
             </Box>
           ))}
         </Stack>
       </th>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           {e.awalVote.toLocaleDateString("id-ID", { dateStyle: "long" })}
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
           {e.akhirVote.toLocaleDateString("id-ID", { dateStyle: "long" })}
         </Center>
       </td>
@@ -212,7 +212,7 @@ function TableStatus({ listData }: { listData: any }) {
         {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Review"
-          color={AdminColor.orange}
+          color={AdminColor.softBlue}
           component={
             <TextInput
               icon={<IconSearch size={20} />}
@@ -241,7 +241,7 @@ function TableStatus({ listData }: { listData: any }) {
           />
         </Group> */}
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
           {isShowReload && (
             <Affix position={{ top: rem(200) }} w={"100%"}>
               <Center>
@@ -270,32 +270,31 @@ function TableStatus({ listData }: { listData: any }) {
               horizontalSpacing={"md"}
               p={"md"}
               w={1500}
-              striped
-              highlightOnHover
+             
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Username</Center>
+                    <Center c={AccentColor.white}>Username</Center>
                   </th>
                   <th>
-                    <Center>Judul</Center>
+                    <Center c={AccentColor.white}>Judul</Center>
                   </th>
                   <th>
-                    <Center>Deskripsi</Center>
+                    <Center c={AccentColor.white}>Deskripsi</Center>
                   </th>
                   <th>
-                    <Center>Pilihan</Center>
+                    <Center c={AccentColor.white}>Pilihan</Center>
                   </th>
                   <th>
-                    <Center>Mulai Vote</Center>
+                    <Center c={AccentColor.white}>Mulai Vote</Center>
                   </th>
                   <th>
-                    <Center>Selesai Vote</Center>
+                    <Center c={AccentColor.white}>Selesai Vote</Center>
                   </th>
 
                   <th>
-                    <Center>Aksi</Center>
+                    <Center c={AccentColor.white}>Aksi</Center>
                   </th>
                 </tr>
               </thead>
diff --git a/src/app_modules/admin/vote/main/index.tsx b/src/app_modules/admin/vote/main/index.tsx
index 883ad486..d2667d44 100644
--- a/src/app_modules/admin/vote/main/index.tsx
+++ b/src/app_modules/admin/vote/main/index.tsx
@@ -1,8 +1,10 @@
 "use client";
 
-import { Stack, SimpleGrid, Paper, Group, Title, Text } from "@mantine/core";
+import { Stack, SimpleGrid, Paper, Group, Title, Text, Flex, ThemeIcon } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { IconAlertTriangle, IconBookmark, IconHistory, IconUpload } from "@tabler/icons-react";
+import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminVote_Main({
   countPublish,
@@ -25,18 +27,21 @@ export default function AdminVote_Main({
       name: "Publish",
       jumlah: countPublish,
       color: "green",
+      icon: <IconUpload size={18} color="#4CAF4F"/>
     },
     {
       id: 2,
       name: "Review",
       jumlah: countReview,
       color: "orange",
+      icon: <IconBookmark size={18} color="#FF7043" />
     },
     {
       id: 3,
       name: "Reject",
       jumlah: countReject,
       color: "red",
+      icon: <IconAlertTriangle size={18} color="#FF4B4C" />
     },
     {
       id: 4,
@@ -44,6 +49,7 @@ export default function AdminVote_Main({
       jumlah: countDraft,
       path: "",
       color: "gray",
+      icon: <IconHistory size={18} color="#007CBA" />
     },
   ];
 
@@ -64,22 +70,31 @@ export default function AdminVote_Main({
           {listStatus.map((e, i) => (
             <Paper
               key={i}
-              bg={`${e.color}.2`}
+              bg={AdminColor.softBlue}
               shadow="md"
               radius="md"
               p="md"
-              // sx={{ borderColor: e.color, borderStyle: "solid" }}
+            // sx={{ borderColor: e.color, borderStyle: "solid" }}
             >
-              <Group position="center">
-                <Stack align="center" spacing={0}>
-                  <Text>{e.name}</Text>
-                  <Title>{e.jumlah ? e.jumlah : 0}</Title>
-                </Stack>
-              </Group>
+
+              <Stack spacing={0}>
+                <Text fw={"bold"} c={AccentColor.white}>{e.name}</Text>
+                <Flex align={"center"} justify={"space-between"}>
+                  <Title color={AccentColor.white}>{e.jumlah ? e.jumlah : 0}</Title>
+                  <ThemeIcon
+                    radius={"xl"}
+                    size={"md"}
+                    color={AccentColor.white}
+                  >
+                    {e.icon}
+                  </ThemeIcon>
+                </Flex>
+              </Stack>
+
             </Paper>
           ))}
         </SimpleGrid>
-       
+
       </Stack>
     </>
   );
diff --git a/src/middleware.ts b/src/middleware.ts
index b20103f3..a6d0687c 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -39,6 +39,7 @@ const middlewareConfig: MiddlewareConfig = {
     // ADMIN API
     // "/api/admin/event/*",
     // "/api/admin/investasi/*",
+    // "/api/admin/donasi/dashboard/*",
 
 
     // Akses awal

From d2a1f85ec0445c9753b96f10d3e09b1f25e382bf Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Fri, 31 Jan 2025 17:48:35 +0800
Subject: [PATCH 2/2] Add API Dashboard ADMIN Doasi, Job, dan Voting

---
 .../admin/donasi/dashboard/[name]/route.ts    |   3 -
 .../admin/donasi/dashboard/kategori/route.ts  |  39 ++++++
 .../api/admin/job/dashboard/[status]/route.ts |  50 +++++++
 .../api/admin/job/dashboard/arsip/route.ts    |  44 ++++++
 .../admin/voting/dashboard/[name]/route.ts    |  51 +++++++
 .../admin/voting/dashboard/riwayat/route.ts   |  44 ++++++
 src/app/dev/admin/job/main/page.tsx           |  16 +--
 src/app/dev/admin/vote/main/page.tsx          |  16 +--
 .../donasi/lib/api_fetch_admin_donasi.ts      |   4 +-
 src/app_modules/admin/donasi/main/index.tsx   |   4 +-
 src/app_modules/admin/job/main/index.tsx      |  32 +++--
 .../admin/vote/lib/api_fetch_admin_voting.ts  |  36 +++++
 src/app_modules/admin/vote/main/index.tsx     | 125 +++++++++++++++---
 .../job/lib/api_fetch_admin_job.ts            |  30 +++++
 src/middleware.ts                             |   2 +
 15 files changed, 443 insertions(+), 53 deletions(-)
 create mode 100644 src/app/api/admin/donasi/dashboard/kategori/route.ts
 create mode 100644 src/app/api/admin/job/dashboard/[status]/route.ts
 create mode 100644 src/app/api/admin/job/dashboard/arsip/route.ts
 create mode 100644 src/app/api/admin/voting/dashboard/[name]/route.ts
 create mode 100644 src/app/api/admin/voting/dashboard/riwayat/route.ts
 create mode 100644 src/app_modules/admin/vote/lib/api_fetch_admin_voting.ts
 create mode 100644 src/app_modules/job/lib/api_fetch_admin_job.ts

diff --git a/src/app/api/admin/donasi/dashboard/[name]/route.ts b/src/app/api/admin/donasi/dashboard/[name]/route.ts
index 61118d40..8b164d12 100644
--- a/src/app/api/admin/donasi/dashboard/[name]/route.ts
+++ b/src/app/api/admin/donasi/dashboard/[name]/route.ts
@@ -26,9 +26,6 @@ export async function GET(request: Request, { params }: {
                 DonasiMaster_Status: {
                     name: fixStatus
                 },
-                DonasiMaster_Ketegori: {
-                    name: fixStatus
-                }
             }
         });
         return NextResponse.json({
diff --git a/src/app/api/admin/donasi/dashboard/kategori/route.ts b/src/app/api/admin/donasi/dashboard/kategori/route.ts
new file mode 100644
index 00000000..ed0063d8
--- /dev/null
+++ b/src/app/api/admin/donasi/dashboard/kategori/route.ts
@@ -0,0 +1,39 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+    const method = request.method;
+    if (method !== 'GET') {
+        return NextResponse.json({
+            success: false,
+            message: 'Method not allowed',
+        },
+            { status: 405 }
+        )
+    }
+
+    try {
+        let fixData;
+        fixData = await prisma.donasiMaster_Kategori.count({});
+        return NextResponse.json({
+            success: true,
+            message: 'Success get data donasi dashboard',
+            data: fixData
+        },
+            { status: 200 }
+        )
+    } catch (error) {
+        backendLogger.error('Error get data donasi dashboard >>', error);
+        return NextResponse.json({
+            success: false,
+            message: 'Error get data donasi dashboard',
+            reason: (error as Error).message
+        },
+            { status: 500 }
+        )
+    } finally {
+        await prisma.$disconnect();
+    }
+}
\ No newline at end of file
diff --git a/src/app/api/admin/job/dashboard/[status]/route.ts b/src/app/api/admin/job/dashboard/[status]/route.ts
new file mode 100644
index 00000000..dd45ec7e
--- /dev/null
+++ b/src/app/api/admin/job/dashboard/[status]/route.ts
@@ -0,0 +1,50 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request, { params }: {
+    params: { status: string }
+}) {
+    const method = request.method;
+    if (method !== "GET") {
+        return NextResponse.json({
+            success: false,
+            message: "Method not allowed",
+        },
+            { status: 405 }
+        )
+    }
+    const { status } = params;
+    try {
+        let fixData;
+        const fixStatus = _.startCase(status);
+        fixData = await prisma.job.count({
+            where: {
+                MasterStatus: {
+                    name: fixStatus,
+                },
+                isArsip: false,
+            }
+        });
+
+        return NextResponse.json({
+            success: true,
+            message: "Success get data job-vacancy dashboard",
+            data: fixData
+        },
+            { status: 200 }
+        );
+    } catch (error) {
+        backendLogger.error("Error get data job-vacancy dashboard", error);
+        return NextResponse.json({
+            success: false,
+            message: "Error get data job-vacancy dashboard",
+            reason: (error as Error).message,
+        },
+            { status: 500 }
+        )
+    } finally {
+        await prisma.$disconnect();
+    }
+}
\ No newline at end of file
diff --git a/src/app/api/admin/job/dashboard/arsip/route.ts b/src/app/api/admin/job/dashboard/arsip/route.ts
new file mode 100644
index 00000000..fd1d45c5
--- /dev/null
+++ b/src/app/api/admin/job/dashboard/arsip/route.ts
@@ -0,0 +1,44 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+    const method = request.method;
+    if (method !== "GET") {
+        return NextResponse.json({
+            success: false,
+            message: "Method not allowed",
+        },
+            { status: 405 }
+        );
+    }
+    try {
+        let fixData;
+        fixData = await prisma.job.count({
+            where: {
+                MasterStatus: {
+                    name: "Publish"
+                },
+                isArsip: true
+            }
+        })
+        return NextResponse.json({
+            success: true,
+            message: "Success get data job-vacancy dashboard",
+            data: fixData
+        },
+            { status: 200 }
+        )
+    } catch (error) {
+        backendLogger.error("Error get data job-vacancy dashboard", error);
+        return NextResponse.json({
+            success: false,
+            message: "Error get data job-vacancy dashboard",
+            reason: (error as Error).message
+        },
+            { status: 500 }
+        )
+    } finally {
+        await prisma.$disconnect();
+    }
+}
\ No newline at end of file
diff --git a/src/app/api/admin/voting/dashboard/[name]/route.ts b/src/app/api/admin/voting/dashboard/[name]/route.ts
new file mode 100644
index 00000000..3f498707
--- /dev/null
+++ b/src/app/api/admin/voting/dashboard/[name]/route.ts
@@ -0,0 +1,51 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request, { params }: {
+    params: { name: string }
+}) {
+    const method = request.method;
+    if (method !== "GET") {
+        return NextResponse.json({
+            success: false,
+            message: "Method not allowed",
+        },
+            { status: 405 }
+        )
+    }
+
+    const { name } = params;
+    try {
+        let fixData;
+        const fixStatus = _.startCase(name);
+        fixData = await prisma.voting.count({
+            where: {
+                Voting_Status: {
+                    name: fixStatus
+                },
+                isArsip: false
+            },
+        })
+
+        return NextResponse.json({
+            success: true,
+            message: "Success get data voting dashboard",
+            data: fixData
+        },
+            { status: 200 }
+        )
+    } catch (error) {
+        backendLogger.error("Error get data voting dashboard >>", error);
+        return NextResponse.json({
+            success: false,
+            message: "Error get data voting dashboard",
+            reason: (error as Error).message
+        },
+            { status: 500 }
+        )
+    } finally {
+        await prisma.$disconnect();
+    }
+}
\ No newline at end of file
diff --git a/src/app/api/admin/voting/dashboard/riwayat/route.ts b/src/app/api/admin/voting/dashboard/riwayat/route.ts
new file mode 100644
index 00000000..3857af0e
--- /dev/null
+++ b/src/app/api/admin/voting/dashboard/riwayat/route.ts
@@ -0,0 +1,44 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+    const method = request.method;
+    if (method !== "GET") {
+        return NextResponse.json({
+            success: false,
+            message: "Method not allowed",
+        },
+            { status: 405 }
+        )
+    }
+    try {
+        let fixData;
+        fixData = await prisma.voting.count({
+            where: {
+                Voting_Status: {
+                    name: "Publish",
+                },
+                isArsip: true,
+            }
+        })
+        return NextResponse.json({
+            success: true,
+            message: 'Success get data voting dashboard',
+            data: fixData
+        },
+            { status: 200 }
+        )
+    } catch (error) {
+        backendLogger.error('Error get data voting dashboard >>', error);
+        NextResponse.json({
+            success: false,
+            message: 'Error get data voting dashboard',
+            reason: (error as Error).message
+        },
+            { status: 500 }
+        )
+    } finally {
+        await prisma.$disconnect();
+    }
+}
\ No newline at end of file
diff --git a/src/app/dev/admin/job/main/page.tsx b/src/app/dev/admin/job/main/page.tsx
index 140eb795..ce9c1d7b 100644
--- a/src/app/dev/admin/job/main/page.tsx
+++ b/src/app/dev/admin/job/main/page.tsx
@@ -2,10 +2,10 @@ import { AdminJob_Main } from "@/app_modules/admin/job";
 import { AdminJob_funCountStatusByStatusId } from "@/app_modules/admin/job/fun/count/fun_count_job_by_status_id";
 
 export default async function Page() {
-    const countPublish = await AdminJob_funCountStatusByStatusId("1")
-    const countReview = await AdminJob_funCountStatusByStatusId("2");
-    const countReject = await AdminJob_funCountStatusByStatusId("4");
-    const countArsip = await AdminJob_funCountStatusByStatusId("0")
+    // const countPublish = await AdminJob_funCountStatusByStatusId("1")
+    // const countReview = await AdminJob_funCountStatusByStatusId("2");
+    // const countReject = await AdminJob_funCountStatusByStatusId("4");
+    // const countArsip = await AdminJob_funCountStatusByStatusId("0")
 
 
 
@@ -13,10 +13,10 @@ export default async function Page() {
     return (
       <>
         <AdminJob_Main
-          countPublish={countPublish as number}
-          countReview={countReview as number}
-          countReject={countReject as number}
-          countArsip={countArsip as number}
+          // countPublish={countPublish as number}
+          // countReview={countReview as number}
+          // countReject={countReject as number}
+          // countArsip={countArsip as number}
         />
       </>
     );
diff --git a/src/app/dev/admin/vote/main/page.tsx b/src/app/dev/admin/vote/main/page.tsx
index 6fefc7ff..cf2dd932 100644
--- a/src/app/dev/admin/vote/main/page.tsx
+++ b/src/app/dev/admin/vote/main/page.tsx
@@ -2,18 +2,18 @@ import { AdminVote_Main } from "@/app_modules/admin/vote";
 import AdminVote_funCountByStatusId from "@/app_modules/admin/vote/fun/count/fun_count_vote_by_status_id";
 
 export default async function Page() {
-    const countPublish = await AdminVote_funCountByStatusId("1");
-    const countReview = await AdminVote_funCountByStatusId("2");
-    const countDraft = await AdminVote_funCountByStatusId("0");
-    const countReject = await AdminVote_funCountByStatusId("4");
+    // const countPublish = await AdminVote_funCountByStatusId("1");
+    // const countReview = await AdminVote_funCountByStatusId("2");
+    // const countDraft = await AdminVote_funCountByStatusId("0");
+    // const countReject = await AdminVote_funCountByStatusId("4");
 
   return (
     <>
       <AdminVote_Main
-        countPublish={countPublish as number}
-        countReview={countReview as number}
-        countDraft={countDraft as number}
-        countReject={countReject as number}
+        // countPublish={countPublish as number}
+        // countReview={countReview as number}
+        // countDraft={countDraft as number}
+        // countReject={countReject as number}
       />
     </>
   );
diff --git a/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts b/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts
index deff9dba..be1e50e4 100644
--- a/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts
+++ b/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts
@@ -19,11 +19,11 @@ const apiGetDonasiStatusCountDashboard = async ({ name }:
     return await response.json().catch(() => null);
 };
 
-const apiGetDonasiKategoriCountDashboard = async ({ name }: { name: "Kategori" }) => {
+const apiGetDonasiKategoriCountDashboard = async () => {
     const { token } = await fetch("/api/get-cookie").then((res) => res.json());
     if (!token) return await token.json().catch(() => null);
 
-    const response = await fetch(`/api/admin/donasi/dashboard/${name}`, {
+    const response = await fetch(`/api/admin/donasi/dashboard/kategori`, {
         method: "GET",
         headers: {
             "Content-Type": "application/json",
diff --git a/src/app_modules/admin/donasi/main/index.tsx b/src/app_modules/admin/donasi/main/index.tsx
index 8521ae7c..27f17de1 100644
--- a/src/app_modules/admin/donasi/main/index.tsx
+++ b/src/app_modules/admin/donasi/main/index.tsx
@@ -99,9 +99,7 @@ export default function AdminDonasi_Main({
   }
   async function onLoadCountKategori() {
     try {
-      const response = await apiGetDonasiKategoriCountDashboard({
-        name: "Kategori"
-      })
+      const response = await apiGetDonasiKategoriCountDashboard()
       if (response) {
         setCountKategori(response.data);
       }
diff --git a/src/app_modules/admin/job/main/index.tsx b/src/app_modules/admin/job/main/index.tsx
index 79a1fd27..6f36fe71 100644
--- a/src/app_modules/admin/job/main/index.tsx
+++ b/src/app_modules/admin/job/main/index.tsx
@@ -3,20 +3,34 @@
 import { Group, Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function AdminJob_Main({
-  countPublish,
-  countReview,
-  countReject,
-  countArsip,
+  // countPublish,
+  // countReview,
+  // countReject,
+  // countArsip,
 }: {
-  countPublish: number;
-  countReview: number;
-  countReject: number;
-  countArsip: number
-}) {
+  // countPublish: number;
+  // countReview: number;
+  // countReject: number;
+  // countArsip: number
+  }) {
+  const [countPublish, setCountPublish] = useState<number | null>(null);
+  const [countReview, setCountReview] = useState<number | null>(null);
+  const [countReject, setCountReject] = useState<number | null>(null);
+  const [countArsip, setCountArsip] = useState<number | null>(null);
   const router = useRouter();
 
+  async function onLoadCountPublish() {
+  try {
+    
+  } catch (error) {
+    clientLogger.error("Error get count publish", error)
+  }
+}
+
   const listStatus = [
     {
       id: 1,
diff --git a/src/app_modules/admin/vote/lib/api_fetch_admin_voting.ts b/src/app_modules/admin/vote/lib/api_fetch_admin_voting.ts
new file mode 100644
index 00000000..f916bbb3
--- /dev/null
+++ b/src/app_modules/admin/vote/lib/api_fetch_admin_voting.ts
@@ -0,0 +1,36 @@
+export {
+    apiGetVoteStatusCountDashboard,
+    apiGetVoteRiwayatCount
+}
+const apiGetVoteStatusCountDashboard = async ({ name }: {
+    name: "Publish" | "Review" | "Reject";
+}) => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/voting/dashboard/${name}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+        }
+    });
+    return await response.json().catch(() => null);
+}
+const apiGetVoteRiwayatCount = async () => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/voting/dashboard/riwayat`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+        }
+    });
+    return await response.json().catch(() => null);
+}
\ No newline at end of file
diff --git a/src/app_modules/admin/vote/main/index.tsx b/src/app_modules/admin/vote/main/index.tsx
index d2667d44..6296f016 100644
--- a/src/app_modules/admin/vote/main/index.tsx
+++ b/src/app_modules/admin/vote/main/index.tsx
@@ -5,49 +5,134 @@ import { useRouter } from "next/navigation";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import { IconAlertTriangle, IconBookmark, IconHistory, IconUpload } from "@tabler/icons-react";
 import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { useState } from "react";
+import { clientLogger } from "@/util/clientLogger";
+import { apiGetVoteRiwayatCount, apiGetVoteStatusCountDashboard } from "../lib/api_fetch_admin_voting";
+import global_limit from "@/app/lib/limit";
+import { useShallowEffect } from "@mantine/hooks";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+
+export default function AdminVote_Main() {
+  const [countPublish, setCountPublish] = useState<number | null>(null);
+  const [countReview, setCountReview] = useState<number | null>(null);
+  const [countReject, setCountReject] = useState<number | null>(null);
+  const [countRiwayat, setCountRiwayat] = useState<number | null>(null);
+
+  useShallowEffect(() => {
+    handlerLoadData();
+  }, []);
+  async function handlerLoadData() {
+    try {
+      const listLoadData = [
+        global_limit(() => onLoadCountPublish()),
+        global_limit(() => onLoadCountReview()),
+        global_limit(() => onLoadCountReject()),
+        global_limit(() => onLoadCountRiwayat()),
+      ];
+      const result = await Promise.all(listLoadData);
+    } catch (error) {
+      clientLogger.error("Error handler load data", error);
+    }
+  }
+  async function onLoadCountPublish() {
+    try {
+      const response = await apiGetVoteStatusCountDashboard({
+        name: "Publish",
+      })
+      if (response) {
+        setCountPublish(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count publish", error);
+    }
+  }
+  async function onLoadCountReview() {
+    try {
+      const response = await apiGetVoteStatusCountDashboard({
+        name: "Review",
+      })
+
+      if (response) {
+        setCountReview(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count review", error);
+    }
+  }
+  async function onLoadCountReject() {
+    try {
+      const response = await apiGetVoteStatusCountDashboard({
+        name: "Reject",
+      })
+      if (response) {
+        setCountReject(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count reject", error);
+    }
+  }
+  async function onLoadCountRiwayat() {
+    try {
+      const response = await apiGetVoteRiwayatCount()
+      if (response) {
+        setCountRiwayat(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count riwayat", error);
+    }
+  }
 
-export default function AdminVote_Main({
-  countPublish,
-  countReview,
-  countDraft,
-  countReject,
-  countRiwayat,
-}: {
-  countPublish?: number;
-  countReview?: number;
-  countDraft?: number;
-  countReject?: number;
-  countRiwayat?: number;
-}) {
   const router = useRouter();
-
   const listStatus = [
     {
       id: 1,
       name: "Publish",
-      jumlah: countPublish,
+      jumlah: countPublish == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countPublish ? (
+        countPublish
+      ) : (
+        "-"
+      ),
       color: "green",
-      icon: <IconUpload size={18} color="#4CAF4F"/>
+      icon: <IconUpload size={18} color="#4CAF4F" />
     },
     {
       id: 2,
       name: "Review",
-      jumlah: countReview,
+      jumlah: countReview == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countReview ? (
+        countReview
+      ) : (
+        "-"
+      ),
       color: "orange",
       icon: <IconBookmark size={18} color="#FF7043" />
     },
     {
       id: 3,
       name: "Reject",
-      jumlah: countReject,
+      jumlah: countReject == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countReject ? (
+        countReject
+      ) : (
+        "-"
+      ),
       color: "red",
       icon: <IconAlertTriangle size={18} color="#FF4B4C" />
     },
     {
       id: 4,
       name: "Riwayat",
-      jumlah: countDraft,
-      path: "",
+      jumlah: countRiwayat == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countRiwayat ? (
+        countRiwayat
+      ) : (
+        "-"
+      ),
       color: "gray",
       icon: <IconHistory size={18} color="#007CBA" />
     },
diff --git a/src/app_modules/job/lib/api_fetch_admin_job.ts b/src/app_modules/job/lib/api_fetch_admin_job.ts
new file mode 100644
index 00000000..ba61c164
--- /dev/null
+++ b/src/app_modules/job/lib/api_fetch_admin_job.ts
@@ -0,0 +1,30 @@
+const apiGetJobStatuCountDashboard = async ({ name }: { name: "Publish" | "Review" | "Reject" }) => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/job/dashboard/${name}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+        },
+    })
+    return await response.json().catch(() => null)
+}
+const apiGetJobStatusCountArsip = async () => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/job/dashboard/arsip`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+        },
+    })
+    return await response.json().catch(() => null);
+}
\ No newline at end of file
diff --git a/src/middleware.ts b/src/middleware.ts
index a6d0687c..0251f643 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -40,6 +40,8 @@ const middlewareConfig: MiddlewareConfig = {
     // "/api/admin/event/*",
     // "/api/admin/investasi/*",
     // "/api/admin/donasi/dashboard/*",
+    // "/api/admin/voting/dashboard/*",
+    // "/api/admin/job/dashboard/*",
 
 
     // Akses awal