Add API Dashboard Donasi & Fix UI Dashboard

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();
     }
-}
+}

src/app/dev/admin/donasi/main/page.tsx

@@ -10,9 +10,9 @@ export default async function Page() {
   return (
     <>
       <AdminDonasi_Main
-        countPublish={countPublish as number}
+        // countPublish={countPublish as number}
-        countReview={countReview as number}
+        // countReview={countReview as number}
-        countReject={countReject as number}
+        // countReject={countReject as number}
       />
     </>
   );

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}

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}

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>
+        <Center c={AccentColor.white}>
-          <ComponentGlobal_TampilanRupiah color="black" nominal={+e?.nominal} />
+          <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>

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);
-};
+};
+
+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);
+}

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,
+  // countPublish,
-  countReview,
+  // countReview,
-  
+
-  countReject,
+  // countReject,
 }: {
-  countPublish: number;
+    // countPublish: number;
-  countReview: 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,
+      jumlah: countPublish == null ? (
-      link: RouterAdminDonasi_OLD.table_publish,
+        <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,
+      jumlah: countReview == null ? (
-      link: RouterAdminDonasi_OLD.table_review,
+        <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,
+      jumlah: countReject == null ? (
-      link: RouterAdminDonasi_OLD.table_reject,
+        <CustomSkeleton height={40} width={40} />
+      ) : countReject ? (
+        countReject
+      ) : (
+        "-"
+      ),
       color: MainColor.red,
       icon: <IconAlertTriangle size={18} color="#FF4B4C" />
     },
     {
       id: 4,
       name: "Kategori",
-      jumlah: 5,
+      jumlah: countKategori == null ? (
-      link: RouterAdminDonasi_OLD.table_kategori,
+        <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>

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>

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>
+        <Center c={AccentColor.white}>
-          <ComponentGlobal_TampilanRupiah color="black" nominal={+e.target} />
+          <ComponentGlobal_TampilanRupiah nominal={+e.target} />
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AccentColor.white}>
-          <ComponentGlobal_TampilanRupiah color="black" nominal={+e.terkumpul} />
+          <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>

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>

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={() => {

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>

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>

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>

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>

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>

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}>
+              <Stack spacing={0}>
-                  <Text>{e.name}</Text>
+                <Text fw={"bold"} c={AccentColor.white}>{e.name}</Text>
-                  <Title>{e.jumlah ? e.jumlah : 0}</Title>
+                <Flex align={"center"} justify={"space-between"}>
-                </Stack>
+                  <Title color={AccentColor.white}>{e.jumlah ? e.jumlah : 0}</Title>
-              </Group>
+                  <ThemeIcon
+                    radius={"xl"}
+                    size={"md"}
+                    color={AccentColor.white}
+                  >
+                    {e.icon}
+                  </ThemeIcon>
+                </Flex>
+              </Stack>
+
             </Paper>
           ))}
         </SimpleGrid>
-       
+
       </Stack>
     </>
   );

src/middleware.ts

@@ -39,6 +39,7 @@ const middlewareConfig: MiddlewareConfig = {
     // ADMIN API
     // "/api/admin/event/*",
     // "/api/admin/investasi/*",
+    // "/api/admin/donasi/dashboard/*",
 
 
     // Akses awal