From 91f61f99c52abcc15fcbe714811f007ab25679a0 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Mon, 3 Feb 2025 00:54:43 +0800
Subject: [PATCH] Fix UI Admin

---
 .vscode/settings.json                         |  7 +-
 .../_admin_global/_component/title_page.tsx   |  3 +-
 src/app_modules/admin/app_info/ui/ui_main.tsx |  5 +-
 .../admin/app_info/view/view_info_bank.tsx    | 57 ++++++++++----
 .../app_info/view/view_info_whatsapp.tsx      | 12 +--
 .../view/view_kategori_portofolio.tsx         | 24 +++---
 .../admin/colab/dashboard/index.tsx           | 32 +++++---
 .../admin/colab/sub_menu/group.tsx            | 30 ++++----
 .../admin/colab/sub_menu/publish.tsx          | 33 ++++----
 .../admin/colab/sub_menu/reject.tsx           | 34 ++++-----
 src/app_modules/admin/developer/index.tsx     | 75 +++++++++----------
 .../admin/forum/main/dashboard.tsx            | 31 +++++---
 .../admin/forum/sub_menu/table_posting.tsx    | 27 ++++---
 .../forum/sub_menu/table_report_komentar.tsx  | 23 +++---
 .../forum/sub_menu/table_report_posting.tsx   | 19 +++--
 .../admin/job/_view/view_table_review.tsx     | 23 +++---
 .../admin/job/child/publish/index.tsx         | 23 +++---
 .../admin/job/child/reject/index.tsx          | 25 +++----
 src/app_modules/admin/job/main/index.tsx      | 54 ++++++++-----
 src/app_modules/admin/new_layout.tsx          |  4 +-
 .../admin/user-access/view/index.tsx          | 19 ++---
 src/app_modules/admin/vote/main/index.tsx     |  1 +
 22 files changed, 315 insertions(+), 246 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 35412482..beaf1e6a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
-    "WillLuke.nextjs.addTypesOnSave": true,
-    "WillLuke.nextjs.hasPrompted": true
-}
\ No newline at end of file
+  "WillLuke.nextjs.addTypesOnSave": true,
+  "WillLuke.nextjs.hasPrompted": true,
+  "prismaERDPreviewer.preferredTheme": "dark"
+}
diff --git a/src/app_modules/admin/_admin_global/_component/title_page.tsx b/src/app_modules/admin/_admin_global/_component/title_page.tsx
index c8e58108..804666de 100644
--- a/src/app_modules/admin/_admin_global/_component/title_page.tsx
+++ b/src/app_modules/admin/_admin_global/_component/title_page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { Group, Title, TextInput } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";
 import React from "react";
@@ -17,7 +18,7 @@ export function ComponentAdminGlobal_TitlePage({
     <>
       <Group
         position="apart"
-        bg={color ? color : "gray.4"}
+        bg={color ? color : AdminColor.softBlue}
         p={"xs"}
         style={{ borderRadius: "6px" }}
       >
diff --git a/src/app_modules/admin/app_info/ui/ui_main.tsx b/src/app_modules/admin/app_info/ui/ui_main.tsx
index 03782b1a..e682dc73 100644
--- a/src/app_modules/admin/app_info/ui/ui_main.tsx
+++ b/src/app_modules/admin/app_info/ui/ui_main.tsx
@@ -9,6 +9,7 @@ import {
   AdminAppInformation_ViewInformasiWhatApps,
   AdminAppInformation_ViewKategoriPortofolio,
 } from "../view";
+import { AccentColor, AdminColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminAppInformation_UiMain({
   nomorAdmin,
@@ -45,8 +46,8 @@ export default function AdminAppInformation_UiMain({
             <Button
               key={i}
               radius={"xl"}
-              c={"white"}
-              bg={selectPage === e.id ? "blue" : "gray.3"}
+              c={selectPage === e.id ? AdminColor.white : "gray"}
+              bg={selectPage === e.id ? AccentColor.blue : AccentColor.darkblue}
               onClick={() => {
                 setSelectPage(e.id);
               }}
diff --git a/src/app_modules/admin/app_info/view/view_info_bank.tsx b/src/app_modules/admin/app_info/view/view_info_bank.tsx
index 4c144ff4..98e1491b 100644
--- a/src/app_modules/admin/app_info/view/view_info_bank.tsx
+++ b/src/app_modules/admin/app_info/view/view_info_bank.tsx
@@ -28,6 +28,8 @@ import adminAppInformation_createBank from "../fun/create/fun_create_new_bank";
 import adminAppInformation_getMasterBank from "../fun/master/get_list_bank";
 import adminAppInformation_updateStatusBankById from "../fun/update/fun_udpate_status_bank";
 import adminAppInformation_updateDataBankById from "../fun/update/fun_update_data_bank";
+import { AccentColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminAppInformation_ViewInfoBank({
   listBank,
@@ -126,7 +128,7 @@ export default function AdminAppInformation_ViewInfoBank({
     data.map((e, i) => (
       <tr key={i}>
         <td>
-          <Center w={150}>
+          <Center c={AccentColor.white} w={150}>
             <Text>{e?.namaBank}</Text>
           </Center>
         </td>
@@ -148,12 +150,12 @@ export default function AdminAppInformation_ViewInfoBank({
           </Center>
         </td>
         <td>
-          <Center>
+          <Center c={AccentColor.white}>
             <Text>{e?.namaAkun}</Text>
           </Center>
         </td>
         <td>
-          <Center>
+          <Center c={AccentColor.white}>
             <Text>{e?.norek}</Text>
           </Center>
         </td>
@@ -175,7 +177,7 @@ export default function AdminAppInformation_ViewInfoBank({
               }}
             >
               <Tooltip label="Edit">
-                <IconEdit color="green" />
+                <IconEdit color={AccentColor.white} />
               </Tooltip>
             </ActionIcon>
           </Stack>
@@ -198,32 +200,31 @@ export default function AdminAppInformation_ViewInfoBank({
 
         <Grid>
           <Grid.Col span={9}>
-            <Paper p={"md"} withBorder shadow="lg" h={"65vh"}>
+            <Paper p={"md"} bg={AdminColor.softBlue}  h={"65vh"}>
               <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
                 <Table
                   verticalSpacing={"xs"}
                   horizontalSpacing={"md"}
                   p={"md"}
                   w={1000}
-                  striped
-                  highlightOnHover
+                  
                 >
                   <thead>
                     <tr>
                       <th>
-                        <Center w={150}>Bank</Center>
+                        <Center c={AdminColor.white} w={150}>Bank</Center>
                       </th>
                       <th>
-                        <Center>Status</Center>
+                        <Center c={AdminColor.white}>Status</Center>
                       </th>
                       <th>
-                        <Center>Nama Rekening</Center>
+                        <Center c={AdminColor.white}>Nama Rekening</Center>
                       </th>
                       <th>
-                        <Center>Nomor Rekening</Center>
+                        <Center c={AdminColor.white}>Nomor Rekening</Center>
                       </th>
                       <th>
-                        <Center>Aksi</Center>
+                        <Center c={AdminColor.white}>Aksi</Center>
                       </th>
                     </tr>
                   </thead>
@@ -235,14 +236,18 @@ export default function AdminAppInformation_ViewInfoBank({
 
           <Grid.Col span={3}>
             {isCreate ? (
-              <Paper p={"md"} withBorder shadow="lg">
+              <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg">
                 <Stack>
                   <Center>
-                    <Title order={5}>Tambah Daftar Bank</Title>
+                    <Title c={AccentColor.white} order={5}>Tambah Daftar Bank</Title>
                   </Center>
 
                   <TextInput
                     label={"Nama Bank"}
+                    styles={{
+                      label: {
+                        color: AdminColor.white,}
+                    }}
                     placeholder="Masukan nama bank"
                     onChange={(val) => {
                       setNewData({
@@ -254,6 +259,10 @@ export default function AdminAppInformation_ViewInfoBank({
 
                   <TextInput
                     label={"Nama Rekening"}
+                    styles={{
+                      label: {
+                        color: AdminColor.white,}
+                    }}
                     placeholder="Masukan nama rekening"
                     onChange={(val) => {
                       setNewData({
@@ -265,6 +274,10 @@ export default function AdminAppInformation_ViewInfoBank({
 
                   <TextInput
                     label={"Nomor Rekening Bank"}
+                    styles={{
+                      label: {
+                        color: AdminColor.white,}
+                    }}
                     placeholder=" Masukan nomor rekening bank"
                     type="number"
                     onChange={(val) => {
@@ -304,13 +317,17 @@ export default function AdminAppInformation_ViewInfoBank({
             )}
 
             {isUpdate ? (
-              <Paper p={"md"} withBorder shadow="lg">
+              <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg">
                 <Stack>
                   <Center>
-                    <Title order={5}>Update Data Bank</Title>
+                    <Title c={AdminColor.white} order={5}>Update Data Bank</Title>
                   </Center>
                   <TextInput
                     label={"Nama Bank"}
+                    styles={{
+                      label: {
+                        color: AdminColor.white,}
+                    }}
                     placeholder="Masukan nama bank"
                     value={updateData.namaBank}
                     onChange={(val) => {
@@ -321,6 +338,10 @@ export default function AdminAppInformation_ViewInfoBank({
 
                   <TextInput
                     label={"Nama Rekening"}
+                    styles={{
+                      label: {
+                        color: AdminColor.white,}
+                    }}
                     placeholder="Masukan nama rekening"
                     value={updateData.namaAkun}
                     onChange={(val) => {
@@ -331,6 +352,10 @@ export default function AdminAppInformation_ViewInfoBank({
 
                   <TextInput
                     label={"Nomor Rekening Bank"}
+                    styles={{
+                      label: {
+                        color: AdminColor.white,}
+                    }}
                     placeholder=" Masukan nomor rekening bank"
                     type="number"
                     value={updateData.norek}
diff --git a/src/app_modules/admin/app_info/view/view_info_whatsapp.tsx b/src/app_modules/admin/app_info/view/view_info_whatsapp.tsx
index 50d1895f..00bb9129 100644
--- a/src/app_modules/admin/app_info/view/view_info_whatsapp.tsx
+++ b/src/app_modules/admin/app_info/view/view_info_whatsapp.tsx
@@ -18,7 +18,7 @@ import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_
 import adminAppInformation_getNomorAdmin from "../fun/master/get_nomor_admin";
 import adminAppInformation_funUpdateNomorAdmin from "../fun/update/fun_update_nomor";
 import { useDisclosure } from "@mantine/hooks";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, AdminColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminAppInformation_ViewInformasiWhatApps({
   nomorAdmin,
@@ -55,17 +55,17 @@ export default function AdminAppInformation_ViewInformasiWhatApps({
         <Stack spacing={"xs"}>
           <Group
             position="apart"
-            bg={"gray.4"}
+            bg={AdminColor.softBlue}
             p={"xs"}
             style={{ borderRadius: "6px" }}
           >
-            <Title order={4}>Informasi WhatsApp</Title>
+            <Title c={AdminColor.white} order={4}>Informasi WhatsApp</Title>
           </Group>
         </Stack>
 
-        <Paper w={"50%"} withBorder p={"md"}>
+        <Paper w={"50%"} bg={AdminColor.softBlue} p={"md"}>
           <Stack>
-            <Paper bg={"gray.4"} p={"xl"}>
+            <Paper c={AdminColor.white} bg={AccentColor.darkblue} p={"xl"}>
               <Group position="apart">
                 <Title order={2}>{`+${dataNomor.nomor}`}</Title>
                 <Tooltip label={"Edit"}>
@@ -82,7 +82,7 @@ export default function AdminAppInformation_ViewInformasiWhatApps({
                       style={{
                         transition: "0.2s",
                       }}
-                      color={MainColor.darkblue}
+                      color={AdminColor.white}
                     />
                   </ActionIcon>
                 </Tooltip>
diff --git a/src/app_modules/admin/app_info/view/view_kategori_portofolio.tsx b/src/app_modules/admin/app_info/view/view_kategori_portofolio.tsx
index ec2533e5..b9222ac0 100644
--- a/src/app_modules/admin/app_info/view/view_kategori_portofolio.tsx
+++ b/src/app_modules/admin/app_info/view/view_kategori_portofolio.tsx
@@ -26,6 +26,7 @@ import {
     adminAppInformation_funGetBidangBisnis,
     adminAppInformation_funUpdateBidangBisnis,
 } from "../fun";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export function AdminAppInformation_ViewKategoriPortofolio({
   dataBidangBisnis,
@@ -128,7 +129,7 @@ export function AdminAppInformation_ViewKategoriPortofolio({
     <tr key={i}>
       <td>
         <Center>
-          <Text>{e?.name}</Text>
+          <Text c={AdminColor.white}>{e?.name}</Text>
         </Center>
       </td>
       <td>
@@ -164,7 +165,7 @@ export function AdminAppInformation_ViewKategoriPortofolio({
             }}
           >
             <Tooltip label="Edit">
-              <IconEdit color="green" />
+              <IconEdit color={AdminColor.white} />
             </Tooltip>
           </ActionIcon>
         </Stack>
@@ -193,26 +194,25 @@ export function AdminAppInformation_ViewKategoriPortofolio({
 
         <Grid>
           <Grid.Col span={9}>
-            <Paper p={"md"} withBorder shadow="lg" h={"65vh"}>
+            <Paper p={"md"} bg={AdminColor.softBlue} h={"65vh"}>
               <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
                 <Table
                   verticalSpacing={"xs"}
                   horizontalSpacing={"md"}
                   p={"md"}
                   w={"100%"}
-                  striped
-                  highlightOnHover
+                  
                 >
                   <thead>
                     <tr>
                       <th>
-                        <Center>Kategori</Center>
+                        <Center c={AdminColor.white}>Kategori</Center>
                       </th>
                       <th>
-                        <Center>Status</Center>
+                        <Center c={AdminColor.white}>Status</Center>
                       </th>
                       <th>
-                        <Center>Aksi</Center>
+                        <Center c={AdminColor.white}>Aksi</Center>
                       </th>
                     </tr>
                   </thead>
@@ -225,10 +225,10 @@ export function AdminAppInformation_ViewKategoriPortofolio({
           <Grid.Col span={3}>
             {/* Form Create */}
             {isCreate ? (
-              <Paper p={"md"} withBorder shadow="lg">
+              <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg">
                 <Stack>
                   <Center>
-                    <Title order={5}>Tambah Bidang Bisnis</Title>
+                    <Title c={AdminColor.white} order={5}>Tambah Bidang Bisnis</Title>
                   </Center>
 
                   <TextInput
@@ -269,10 +269,10 @@ export function AdminAppInformation_ViewKategoriPortofolio({
             )}
             {/* Form Update */}
             {isUpdate ? (
-              <Paper p={"md"} withBorder shadow="lg">
+              <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg">
                 <Stack>
                   <Center>
-                    <Title order={5}>Update Bidang Bisnis</Title>
+                    <Title c={AdminColor.white} order={5}>Update Bidang Bisnis</Title>
                   </Center>
                   <TextInput
                     placeholder="Masukan bidang bisnis"
diff --git a/src/app_modules/admin/colab/dashboard/index.tsx b/src/app_modules/admin/colab/dashboard/index.tsx
index 120d5e96..c269c6be 100644
--- a/src/app_modules/admin/colab/dashboard/index.tsx
+++ b/src/app_modules/admin/colab/dashboard/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, IconMessage2, IconUpload } from "@tabler/icons-react";
+import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminColab_Dashboard({
   countPublish,
@@ -21,18 +23,21 @@ export default function AdminColab_Dashboard({
       name: "Publish",
       jumlah: countPublish,
       color: "green",
+      icon: <IconUpload size={18} color="#4CAF4F" />
     },
     {
       id: 2,
       name: "Group Chat",
       jumlah: countRoom,
       color: "orange",
+      icon: <IconMessage2 size={18} color="#FF9800" />
     },
     {
       id: 3,
       name: "Reject",
       jumlah: countReject,
       color: "red",
+      icon: <IconAlertTriangle size={18} color="#FF4B4C" />
     },
   ];
   return (
@@ -51,18 +56,27 @@ export default function AdminColab_Dashboard({
           {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>
diff --git a/src/app_modules/admin/colab/sub_menu/group.tsx b/src/app_modules/admin/colab/sub_menu/group.tsx
index 0de9fb13..d7ba5a58 100644
--- a/src/app_modules/admin/colab/sub_menu/group.tsx
+++ b/src/app_modules/admin/colab/sub_menu/group.tsx
@@ -31,6 +31,7 @@ import adminColab_getOneRoomChatById from "../fun/get/get_one_room_chat_by_id";
 import adminColab_getListAllGroupChat from "../fun/get/get_list_all_group_chat";
 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 AdminColab_TableGroup({
   listGroup,
@@ -84,29 +85,29 @@ function TableMenu({ listGroup }: { listGroup: any }) {
   const tableRow = data.map((e, i) => (
     <tr key={i}>
       <td>
-        <Center>{noAwal++}</Center>
+        <Center c={AdminColor.white}>{noAwal++}</Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Text lineClamp={1}>
             {e?.ProjectCollaboration?.Author?.Profile?.name}
           </Text>
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Text lineClamp={1}>{e?.name}</Text>
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Text>
             {e?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name}
           </Text>
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Text>{e?.ProjectCollaboration_AnggotaRoomChat.length}</Text>
         </Center>
       </td>
@@ -152,40 +153,39 @@ function TableMenu({ listGroup }: { listGroup: any }) {
       <Stack spacing={"xs"}>
         <ComponentAdminGlobal_TitlePage
           name="Group Chat"
-          color={AccentColor.softblue}
+          color={AdminColor.softBlue}
           component={
             <></>
           }
         />
-        <Paper p={"md"} withBorder shadow="lg">
+        <Paper p={"md"} bg={AdminColor.softBlue}>
           <Stack>
             <ScrollArea h={"65vh"}>
               <Table
                 verticalSpacing={"xs"}
                 horizontalSpacing={"md"}
                 p={"md"}
-                striped
-                highlightOnHover
+                
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center>No</Center>
+                      <Center c={AdminColor.white}>No</Center>
                     </th>
                     <th>
-                      <Center>Admin Room</Center>
+                      <Center c={AdminColor.white}>Admin Room</Center>
                     </th>
                     <th>
-                      <Center>Nama Group</Center>
+                      <Center c={AdminColor.white}>Nama Group</Center>
                     </th>
                     <th>
-                      <Center>Industri</Center>
+                      <Center c={AdminColor.white}>Industri</Center>
                     </th>
                     <th>
-                      <Center>Anggota Group</Center>
+                      <Center c={AdminColor.white}>Anggota Group</Center>
                     </th>
                     <th>
-                      <Center>Aksi</Center>
+                      <Center c={AdminColor.white}>Aksi</Center>
                     </th>
                   </tr>
                 </thead>
diff --git a/src/app_modules/admin/colab/sub_menu/publish.tsx b/src/app_modules/admin/colab/sub_menu/publish.tsx
index acdb54fb..1c9ed06a 100644
--- a/src/app_modules/admin/colab/sub_menu/publish.tsx
+++ b/src/app_modules/admin/colab/sub_menu/publish.tsx
@@ -30,6 +30,7 @@ import _ from "lodash";
 import { IconBan, IconCheck, IconEye } from "@tabler/icons-react";
 import adminColab_funReportProjectById from "../fun/edit/fun_report_project_by_id";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminColab_TablePublish({
   listData,
@@ -74,29 +75,29 @@ function TableMenu({ listData }: { listData: any }) {
   const tableRow = data.map((e, i) => (
     <tr key={i}>
       <td>
-        <Center>{noAwal++}</Center>
+        <Center c={AdminColor.white}>{noAwal++}</Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Text lineClamp={1}>{e?.Author?.Profile?.name}</Text>
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Box>
-            <Center>
+            <Center c={AdminColor.white}>
               <Text lineClamp={1}>{e?.title}</Text>
             </Center>
           </Box>
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Text>{e?.ProjectCollaborationMaster_Industri.name}</Text>
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Text>{e?.ProjectCollaboration_Partisipasi.length}</Text>
         </Center>
       </td>
@@ -209,41 +210,41 @@ function TableMenu({ listData }: { listData: any }) {
       <Stack spacing={"xs"}>
         <Group
           position="apart"
-          bg={"green.4"}
+          bg={AdminColor.softBlue}
           p={"xs"}
           style={{ borderRadius: "6px" }}
+          c={AdminColor.white}
         >
           <Title order={4}>Publish</Title>
         </Group>
-        <Paper p={"md"} withBorder shadow="lg" >
+        <Paper p={"md"} bg={AdminColor.softBlue} >
           <Stack>
             <ScrollArea h={"65vh"}>
               <Table
                 verticalSpacing={"xs"}
                 horizontalSpacing={"md"}
                 p={"md"}
-                striped
-                highlightOnHover
+                
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center>No</Center>
+                      <Center c={AdminColor.white}>No</Center>
                     </th>
                     <th>
-                      <Center>Username</Center>
+                      <Center c={AdminColor.white}>Username</Center>
                     </th>
                     <th>
-                      <Center>Title</Center>
+                      <Center c={AdminColor.white}>Title</Center>
                     </th>
                     <th>
-                      <Center>Industri</Center>
+                      <Center c={AdminColor.white}>Industri</Center>
                     </th>
                     <th>
-                      <Center>Jumlah Partisipan</Center>
+                      <Center c={AdminColor.white}>Jumlah Partisipan</Center>
                     </th>
                     <th>
-                      <Center>Aksi</Center>
+                      <Center c={AdminColor.white}>Aksi</Center>
                     </th>
                   </tr>
                 </thead>
diff --git a/src/app_modules/admin/colab/sub_menu/reject.tsx b/src/app_modules/admin/colab/sub_menu/reject.tsx
index f5c51c72..50f77bf9 100644
--- a/src/app_modules/admin/colab/sub_menu/reject.tsx
+++ b/src/app_modules/admin/colab/sub_menu/reject.tsx
@@ -18,6 +18,7 @@ import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamp
 import { useState } from "react";
 import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
 import adminColab_getListAllRejected from "../fun/get/get_list_all_reject";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminColab_TableRejected({
   listReject,
@@ -49,29 +50,29 @@ function TableMenu({ listReject }: { listReject: any }) {
   const tableRow = data?.map((e, i) => (
     <tr key={i}>
       <td>
-        <Center>{noAwal++}</Center>
+        <Center c={AdminColor.white}>{noAwal++}</Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Text lineClamp={1}>{e?.Author?.Profile?.name}</Text>
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Box>
-            <Center>
+            <Center c={AdminColor.white}>
               <Text lineClamp={1}>{e?.title}</Text>
             </Center>
           </Box>
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Text>{e?.ProjectCollaborationMaster_Industri.name}</Text>
         </Center>
       </td>
       <td>
-        <Center>
+        <Center c={AdminColor.white}>
           <Text>{e?.ProjectCollaboration_Partisipasi.length}</Text>
         </Center>
       </td>
@@ -129,41 +130,40 @@ function TableMenu({ listReject }: { listReject: any }) {
       <Stack spacing={"xs"}>
         <Group
           position="apart"
-          bg={"red.4"}
+          bg={AdminColor.softBlue}
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
-          <Title order={4}>Reject</Title>
+          <Title c={AdminColor.white} order={4}>Reject</Title>
         </Group>
-        <Paper p={"md"} withBorder shadow="lg">
+        <Paper p={"md"} bg={AdminColor.softBlue}>
           <Stack>
             <ScrollArea h={"65vh"}>
               <Table
                 verticalSpacing={"lg"}
                 horizontalSpacing={"md"}
                 p={"md"}
-                striped
-                highlightOnHover
+                
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center>No</Center>
+                      <Center c={AdminColor.white}>No</Center>
                     </th>
                     <th>
-                      <Center>Username</Center>
+                      <Center c={AdminColor.white}>Username</Center>
                     </th>
                     <th>
-                      <Center>Title</Center>
+                      <Center c={AdminColor.white}>Title</Center>
                     </th>
                     <th>
-                      <Center>Industri</Center>
+                      <Center c={AdminColor.white}>Industri</Center>
                     </th>
                     <th>
-                      <Center>Jumlah Partisipan</Center>
+                      <Center c={AdminColor.white}>Jumlah Partisipan</Center>
                     </th>
                     <th>
-                      <Center>Report</Center>
+                      <Center c={AdminColor.white}>Report</Center>
                     </th>
                   </tr>
                 </thead>
diff --git a/src/app_modules/admin/developer/index.tsx b/src/app_modules/admin/developer/index.tsx
index 481e636f..11580659 100644
--- a/src/app_modules/admin/developer/index.tsx
+++ b/src/app_modules/admin/developer/index.tsx
@@ -24,6 +24,7 @@ import adminDeveloper_funGetListAllAdmin from "./fun/get/fun_get_list_all_admin"
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import adminDeveloper_funGetListAllUser from "./fun/get/fun_get_list_all_user";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminDeveloper({
   listUser,
@@ -144,7 +145,8 @@ function NewTableUser({
       <Stack spacing={"xs"}>
         <Group
           position="apart"
-          bg={"cyan.4"}
+          c={AdminColor.white}
+          bg={AdminColor.softBlue}
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
@@ -158,24 +160,23 @@ function NewTableUser({
             }}
           />
         </Group>
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
           <Table
             verticalSpacing={"xs"}
             horizontalSpacing={"md"}
             p={"md"}
-            striped
-            highlightOnHover
+            
           >
             <thead>
               <tr>
                 <th>
-                  <Center>Username</Center>
+                  <Center c={AdminColor.white}>Username</Center>
                 </th>
                 <th>
-                  <Center>Nomor</Center>
+                  <Center c={AdminColor.white}>Nomor</Center>
                 </th>
                 <th>
-                  <Center>Aksi</Center>
+                  <Center c={AdminColor.white}>Aksi</Center>
                 </th>
               </tr>
             </thead>
@@ -183,10 +184,10 @@ function NewTableUser({
               {dataUser.map((v: any, i: any) => (
                 <tr key={v.id}>
                   <td>
-                    <Center>{v.username}</Center>
+                    <Center c={AdminColor.white}>{v.username}</Center>
                   </td>
                   <td>
-                    <Center>{v.nomor}</Center>
+                    <Center c={AdminColor.white}>{v.nomor}</Center>
                   </td>
                   <td>
                     <Center>
@@ -281,8 +282,9 @@ function NewTableAdmin({
     <>
       <Stack spacing={"xs"}>
         <Group
+          c={AdminColor.white}
           position="apart"
-          bg={"blue.4"}
+          bg={AdminColor.softBlue}
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
@@ -296,24 +298,23 @@ function NewTableAdmin({
             }}
           />
         </Group>
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
           <Table
             verticalSpacing={"xs"}
             horizontalSpacing={"md"}
             p={"md"}
-            striped
-            highlightOnHover
+            
           >
             <thead>
               <tr>
                 <th>
-                  <Center>Username</Center>
+                  <Center c={AdminColor.white}>Username</Center>
                 </th>
                 <th>
-                  <Center>Nomor</Center>
+                  <Center c={AdminColor.white}>Nomor</Center>
                 </th>
                 <th>
-                  <Center>Aksi</Center>
+                  <Center c={AdminColor.white}>Aksi</Center>
                 </th>
               </tr>
             </thead>
@@ -321,10 +322,10 @@ function NewTableAdmin({
               {dataAdmin.map((v: any, i: any) => (
                 <tr key={v.id}>
                   <td>
-                    <Center>{v.username}</Center>
+                    <Center c={AdminColor.white}>{v.username}</Center>
                   </td>
                   <td>
-                    <Center>{v.nomor}</Center>
+                    <Center c={AdminColor.white}>{v.nomor}</Center>
                   </td>
                   <td>
                     <Center>
@@ -384,10 +385,10 @@ function TableAdmin({
   const tableBody = dataAdmin.map((e) => (
     <tr key={e.id}>
       <td>
-        <Center>{e.username}</Center>
+        <Center c={AdminColor.white}>{e.username}</Center>
       </td>
       <td>
-        <Center>{e.nomor}</Center>
+        <Center c={AdminColor.white}>{e.nomor}</Center>
       </td>
       <td>
         <Center>
@@ -404,35 +405,34 @@ function TableAdmin({
       <Stack spacing={"xs"}>
         <Group
           position="apart"
-          bg={"blue.4"}
+          bg={AdminColor.softBlue}
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
-          <Title order={4}>Table Admin</Title>
+          <Title c={AdminColor.white} order={4}>Table Admin</Title>
           <TextInput
             icon={<IconSearch size={20} />}
             radius={"xl"}
             placeholder="Masukan username"
           />
         </Group>
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
           <Table
             verticalSpacing={"xs"}
             horizontalSpacing={"md"}
             p={"md"}
-            striped
-            highlightOnHover
+            
           >
             <thead>
               <tr>
                 <th>
-                  <Center>Username</Center>
+                  <Center c={AdminColor.white}>Username</Center>
                 </th>
                 <th>
-                  <Center>Nomor</Center>
+                  <Center c={AdminColor.white}>Nomor</Center>
                 </th>
                 <th>
-                  <Center>Aksi</Center>
+                  <Center c={AdminColor.white}>Aksi</Center>
                 </th>
               </tr>
             </thead>
@@ -472,10 +472,10 @@ function TableUser({
   const tableBody = dataUser.map((e) => (
     <tr key={e.id}>
       <td>
-        <Center>{e.username}</Center>
+        <Center c={AdminColor.white}>{e.username}</Center>
       </td>
       <td>
-        <Center>{e.nomor}</Center>
+        <Center c={AdminColor.white}>{e.nomor}</Center>
       </td>
       <td>
         <Center>
@@ -492,35 +492,34 @@ function TableUser({
       <Stack spacing={"xs"}>
         <Group
           position="apart"
-          bg={"cyan.4"}
+          bg={AdminColor.softBlue}
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
-          <Title order={4}>Table User</Title>
+          <Title c={AdminColor.white} order={4}>Table User</Title>
           <TextInput
             icon={<IconSearch size={20} />}
             radius={"xl"}
             placeholder="Masukan username"
           />
         </Group>
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
           <Table
             verticalSpacing={"xs"}
             horizontalSpacing={"md"}
             p={"md"}
-            striped
-            highlightOnHover
+            
           >
             <thead>
               <tr>
                 <th>
-                  <Center>Username</Center>
+                  <Center c={AdminColor.white}>Username</Center>
                 </th>
                 <th>
-                  <Center>Nomor</Center>
+                  <Center c={AdminColor.white}>Nomor</Center>
                 </th>
                 <th>
-                  <Center>Aksi</Center>
+                  <Center c={AdminColor.white}>Aksi</Center>
                 </th>
               </tr>
             </thead>
diff --git a/src/app_modules/admin/forum/main/dashboard.tsx b/src/app_modules/admin/forum/main/dashboard.tsx
index a360a2c7..af59829d 100644
--- a/src/app_modules/admin/forum/main/dashboard.tsx
+++ b/src/app_modules/admin/forum/main/dashboard.tsx
@@ -1,7 +1,10 @@
 "use client";
 
-import { Group, Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import { Flex, Group, Paper, SimpleGrid, Stack, Text, ThemeIcon, Title } from "@mantine/core";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { IconFlag, IconMessageReport, IconUpload } from "@tabler/icons-react";
+import { AccentColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminForum_Main({
   countPublish,
@@ -41,18 +44,21 @@ function ForumMain({
       name: "Publish",
       jumlah: countPublish,
       color: "green",
+      icon: <IconUpload size={18} color="#4CAF4F" />
     },
     {
       id: 2,
       name: "Report Posting",
       jumlah: countLaporanPosting,
       color: "orange",
+      icon: <IconFlag size={18} color="#FF9800" />
     },
     {
       id: 3,
       name: "Report Komentar",
       jumlah: countLaporanKomentar,
       color: "red",
+      icon: <IconMessageReport size={18} color="#F44336" />
     },
   ];
   return (
@@ -69,18 +75,25 @@ function ForumMain({
         {listBox.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>
diff --git a/src/app_modules/admin/forum/sub_menu/table_posting.tsx b/src/app_modules/admin/forum/sub_menu/table_posting.tsx
index 78bd6829..a367e1bf 100644
--- a/src/app_modules/admin/forum/sub_menu/table_posting.tsx
+++ b/src/app_modules/admin/forum/sub_menu/table_posting.tsx
@@ -94,7 +94,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
     <tr key={i}>
       <td>
         <Center w={200}>
-          <Text lineClamp={1}>{e?.Author?.username}</Text>
+          <Text c={AdminColor.white} lineClamp={1}>{e?.Author?.username}</Text>
         </Center>
       </td>
       <td>
@@ -126,7 +126,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
       </td>
       <td>
         <Center w={150}>
-          <Text>
+          <Text c={AdminColor.white}>
             {new Intl.DateTimeFormat(["id-ID"], { dateStyle: "medium" }).format(
               e.createdAt
             )}
@@ -135,7 +135,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
       </td>
       <td>
         <Center w={150}>
-          <Text fw={"bold"} fz={"lg"}>
+          <Text c={AdminColor.white} fw={"bold"} fz={"lg"}>
             {e?.Forum_Komentar.length}
           </Text>
         </Center>
@@ -172,7 +172,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Posting"
-          color={AdminColor.green}
+          color={AdminColor.softBlue}
           component={
             <TextInput
             icon={<IconSearch size={20} />}
@@ -206,7 +206,7 @@ function TablePublish({ listPublish }: { listPublish: any }) {
         {isEmpty(data) ? (
           <ComponentAdminGlobal_IsEmptyData />
         ) : (
-          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
               <Table
                 verticalSpacing={"md"}
@@ -214,31 +214,30 @@ function TablePublish({ listPublish }: { listPublish: any }) {
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-                striped
-                highlightOnHover
+                
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center>Username</Center>
+                      <Center c={AdminColor.white}>Username</Center>
                     </th>
                     <th>
-                      <Center>Status</Center>
+                      <Center c={AdminColor.white}>Status</Center>
                     </th>
                     <th>
-                      <Text>Postingan</Text>
+                      <Text c={AdminColor.white}>Postingan</Text>
                     </th>
                     <th>
-                      <Center>Tanggal Publish</Center>
+                      <Center c={AdminColor.white}>Tanggal Publish</Center>
                     </th>
                     <th>
-                      <Center>Komentar Aktif</Center>
+                      <Center c={AdminColor.white}>Komentar Aktif</Center>
                     </th>
                     <th>
-                      <Center>Total Report Posting</Center>
+                      <Center c={AdminColor.white}>Total Report Posting</Center>
                     </th>
                     <th>
-                      <Center>Aksi</Center>
+                      <Center c={AdminColor.white}>Aksi</Center>
                     </th>
                   </tr>
                 </thead>
diff --git a/src/app_modules/admin/forum/sub_menu/table_report_komentar.tsx b/src/app_modules/admin/forum/sub_menu/table_report_komentar.tsx
index 315b80a9..18e49792 100644
--- a/src/app_modules/admin/forum/sub_menu/table_report_komentar.tsx
+++ b/src/app_modules/admin/forum/sub_menu/table_report_komentar.tsx
@@ -98,15 +98,15 @@ function TableView({ listData }: { listData: any }) {
     <tr key={i}>
       <td>
         <Center w={200}>
-          <Text lineClamp={1}>{e?.User.username}</Text>
+          <Text c={AdminColor.white} lineClamp={1}>{e?.User.username}</Text>
         </Center>
       </td>
       <td>
         <Center w={200}>
           {e?.forumMaster_KategoriReportId === null ? (
-            <Text>Lainnya</Text>
+            <Text c={AdminColor.white}>Lainnya</Text>
           ) : (
-            <Text lineClamp={1}>{e?.ForumMaster_KategoriReport.title}</Text>
+            <Text c={AdminColor.white} lineClamp={1}>{e?.ForumMaster_KategoriReport.title}</Text>
           )}
         </Center>
       </td>
@@ -160,7 +160,7 @@ function TableView({ listData }: { listData: any }) {
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Report Komentar"
-          color={AdminColor.yellow}
+          color={AdminColor.softBlue}
           component={
             <TextInput
             icon={<IconSearch size={20} />}
@@ -194,7 +194,7 @@ function TableView({ listData }: { listData: any }) {
         {isEmpty(data) ? (
           <ComponentAdminGlobal_IsEmptyData />
         ) : (
-          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
               <Table
                 verticalSpacing={"md"}
@@ -202,29 +202,28 @@ function TableView({ listData }: { listData: any }) {
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-                striped
-                highlightOnHover
+                
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center>Pelapor</Center>
+                      <Center c={AdminColor.white}>Pelapor</Center>
                     </th>
                     
                     <th>
-                      <Center>Jenis Laporan</Center>
+                      <Center c={AdminColor.white}>Jenis Laporan</Center>
                     </th>
 
                     <th>
-                      <Text>Komentar</Text>
+                      <Text c={AdminColor.white}>Komentar</Text>
                     </th>
 
                     <th>
-                      <Center>Tanggal Report</Center>
+                      <Center c={AdminColor.white}>Tanggal Report</Center>
                     </th>
 
                     <th>
-                      <Center>Aksi</Center>
+                      <Center c={AdminColor.white}>Aksi</Center>
                     </th>
 
                   </tr>
diff --git a/src/app_modules/admin/forum/sub_menu/table_report_posting.tsx b/src/app_modules/admin/forum/sub_menu/table_report_posting.tsx
index 87e16e00..593d7b36 100644
--- a/src/app_modules/admin/forum/sub_menu/table_report_posting.tsx
+++ b/src/app_modules/admin/forum/sub_menu/table_report_posting.tsx
@@ -169,7 +169,7 @@ function TableView({ listData }: { listData: any }) {
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Report Posting"
-          color={AdminColor.orange}
+          color={AdminColor.softBlue}
           component={
             <TextInput
             icon={<IconSearch size={20} />}
@@ -205,7 +205,7 @@ function TableView({ listData }: { listData: any }) {
         {isEmpty(data) ? (
           <ComponentAdminGlobal_IsEmptyData />
         ) : (
-          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
               <Table
                 verticalSpacing={"md"}
@@ -213,32 +213,31 @@ function TableView({ listData }: { listData: any }) {
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-                striped
-                highlightOnHover
+                
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center>Pelapor</Center>
+                      <Center c={AdminColor.white}>Pelapor</Center>
                     </th>
                     <th>
-                      <Center>Jenis Laporan</Center>
+                      <Center c={AdminColor.white}>Jenis Laporan</Center>
                     </th>
                     {/* <th>
-                      <Center>Author</Center>
+                      <Center c={AdminColor.white}>Author</Center>
                     </th>
                     <th>
                       <Text>Postingan</Text>
                     </th> */}
                     <th>
-                      <Center w={200}>Status Posting</Center>
+                      <Center c={AdminColor.white} w={200}>Status Posting</Center>
                     </th>
                     <th>
-                      <Center>Tanggal Report</Center>
+                      <Center c={AdminColor.white}>Tanggal Report</Center>
                     </th>
 
                     <th>
-                      <Center>Aksi</Center>
+                      <Center c={AdminColor.white}>Aksi</Center>
                     </th>
                   </tr>
                 </thead>
diff --git a/src/app_modules/admin/job/_view/view_table_review.tsx b/src/app_modules/admin/job/_view/view_table_review.tsx
index 3d9c21cd..b0d2b677 100644
--- a/src/app_modules/admin/job/_view/view_table_review.tsx
+++ b/src/app_modules/admin/job/_view/view_table_review.tsx
@@ -126,7 +126,7 @@ export default function AdminJob_ViewTavleReview({
     <tr key={i}>
       <td>
         <Center w={150}>
-          <Text>{e?.Author?.username}</Text>
+          <Text c={AdminColor.white}>{e?.Author?.username}</Text>
         </Center>
       </td>
       <td>
@@ -158,7 +158,7 @@ export default function AdminJob_ViewTavleReview({
             </Button>
           ) : (
             <Center w={150}>
-              <Text fw={"bold"} fz={"xs"} fs={"italic"}>
+              <Text c={AdminColor.white} fw={"bold"} fz={"xs"} fs={"italic"}>
                 Tidak ada poster
               </Text>
             </Center>
@@ -311,7 +311,7 @@ export default function AdminJob_ViewTavleReview({
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Review"
-          color={AdminColor.orange}
+          color={AdminColor.softBlue}
           component={
             <TextInput
               icon={<IconSearch size={20} />}
@@ -324,7 +324,7 @@ export default function AdminJob_ViewTavleReview({
           }
         />
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
           {isShowReload && (
             <Paper bg={"red"} w={"50%"}>
               <Affix position={{ top: rem(200) }} w={"100%"}>
@@ -356,28 +356,27 @@ export default function AdminJob_ViewTavleReview({
               p={"md"}
               w={"100%"}
               h={"100%"}
-              striped
-              highlightOnHover
+              
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Author</Center>
+                    <Center c={AdminColor.white}>Author</Center>
                   </th>
                   <th>
-                    <Text>Judul</Text>
+                    <Text c={AdminColor.white}>Judul</Text>
                   </th>
                   <th>
-                    <Center>Poster</Center>
+                    <Center c={AdminColor.white}>Poster</Center>
                   </th>
                   <th>
-                    <Text>Syarat Ketentuan</Text>
+                    <Text c={AdminColor.white}>Syarat Ketentuan</Text>
                   </th>
                   <th>
-                    <Text>Deskripsi</Text>
+                    <Text c={AdminColor.white}>Deskripsi</Text>
                   </th>
                   <th>
-                    <Center>Aksi</Center>
+                    <Center c={AdminColor.white}>Aksi</Center>
                   </th>
                 </tr>
               </thead>
diff --git a/src/app_modules/admin/job/child/publish/index.tsx b/src/app_modules/admin/job/child/publish/index.tsx
index 69c42174..6cbce6b4 100644
--- a/src/app_modules/admin/job/child/publish/index.tsx
+++ b/src/app_modules/admin/job/child/publish/index.tsx
@@ -74,7 +74,7 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
     <tr key={i}>
       <td>
         <Center w={150}>
-          <Text>{e?.Author?.username}</Text>
+          <Text c={AdminColor.white}>{e?.Author?.username}</Text>
         </Center>
       </td>
       <td>
@@ -117,7 +117,7 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
             </Button>
           ) : (
             <Center w={200}>
-              <Text fw={"bold"} fz={"xs"} fs={"italic"}>
+              <Text c={AdminColor.white} fw={"bold"} fz={"xs"} fs={"italic"}>
                 Tidak ada poster
               </Text>
             </Center>
@@ -153,7 +153,7 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
         {/* <pre>{JSON.stringify(listUser, null, 2)}</pre> */}
         <ComponentAdminGlobal_TitlePage
           name="Publish"
-          color={AdminColor.green}
+          color={AdminColor.softBlue}
           component={
             <TextInput
               icon={<IconSearch size={20} />}
@@ -166,7 +166,7 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
           }
         />
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
             <Table
               verticalSpacing={"md"}
@@ -174,28 +174,27 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
               p={"md"}
               w={"100%"}
               h={"100%"}
-              striped
-              highlightOnHover
+              
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Author</Center>
+                    <Center c={AdminColor.white}>Author</Center>
                   </th>
                   <th>
-                    <Center>Status</Center>
+                    <Center c={AdminColor.white}>Status</Center>
                   </th>
                   <th>
-                    <Text>Judul</Text>
+                    <Text c={AdminColor.white}>Judul</Text>
                   </th>
                   <th>
-                    <Center>Poster</Center>
+                    <Center c={AdminColor.white}>Poster</Center>
                   </th>
                   <th>
-                    <Text>Syarat Ketentuan</Text>
+                    <Text c={AdminColor.white}>Syarat Ketentuan</Text>
                   </th>
                   <th>
-                    <Text>Deskripsi</Text>
+                    <Text c={AdminColor.white}>Deskripsi</Text>
                   </th>
                 </tr>
               </thead>
diff --git a/src/app_modules/admin/job/child/reject/index.tsx b/src/app_modules/admin/job/child/reject/index.tsx
index e272f751..571a9b00 100644
--- a/src/app_modules/admin/job/child/reject/index.tsx
+++ b/src/app_modules/admin/job/child/reject/index.tsx
@@ -84,7 +84,7 @@ function TableStatus({ listReject }: { listReject: any }) {
     <tr key={i}>
       <td>
         <Center w={150}>
-          <Text>{e?.Author?.username}</Text>
+          <Text c={AdminColor.white}>{e?.Author?.username}</Text>
         </Center>
       </td>
       <td>
@@ -116,7 +116,7 @@ function TableStatus({ listReject }: { listReject: any }) {
             </Button>
           ) : (
             <Center w={150}>
-              <Text fw={"bold"} fz={"xs"} fs={"italic"}>
+              <Text c={AdminColor.white} fw={"bold"} fz={"xs"} fs={"italic"}>
                 Tidak ada poster
               </Text>
             </Center>
@@ -232,7 +232,7 @@ function TableStatus({ listReject }: { listReject: any }) {
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Reject"
-          color={AdminColor.red}
+          color={AdminColor.softBlue}
           component={
             <TextInput
               icon={<IconSearch size={20} />}
@@ -245,7 +245,7 @@ function TableStatus({ listReject }: { listReject: any }) {
           }
         />
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
             <Table
               verticalSpacing={"md"}
@@ -253,31 +253,30 @@ function TableStatus({ listReject }: { listReject: any }) {
               p={"md"}
               w={"100%"}
               h={"100%"}
-              striped
-              highlightOnHover
+              
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Author</Center>
+                    <Center c={AdminColor.white}>Author</Center>
                   </th>
                   <th>
-                    <Text>Judul</Text>
+                    <Text c={AdminColor.white}>Judul</Text>
                   </th>
                   <th>
-                    <Center>Poster</Center>
+                    <Center c={AdminColor.white}>Poster</Center>
                   </th>
                   <th>
-                    <Text>Syarat Ketentuan</Text>
+                    <Text c={AdminColor.white}>Syarat Ketentuan</Text>
                   </th>
                   <th>
-                    <Text>Deskripsi</Text>
+                    <Text c={AdminColor.white}>Deskripsi</Text>
                   </th>
                   <th>
-                    <Text>Report</Text>
+                    <Text c={AdminColor.white}>Report</Text>
                   </th>
                   <th>
-                    <Center>Aksi</Center>
+                    <Center c={AdminColor.white}>Aksi</Center>
                   </th>
                 </tr>
               </thead>
diff --git a/src/app_modules/admin/job/main/index.tsx b/src/app_modules/admin/job/main/index.tsx
index 6f36fe71..311e281c 100644
--- a/src/app_modules/admin/job/main/index.tsx
+++ b/src/app_modules/admin/job/main/index.tsx
@@ -1,10 +1,13 @@
 "use client";
 
-import { Group, Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import { Flex, Group, Paper, SimpleGrid, Stack, Text, ThemeIcon, 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";
+import { IconAlertTriangle, IconArchive, IconBookmark, IconUpload } from "@tabler/icons-react";
+import { AccentColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminJob_Main({
   // countPublish,
@@ -12,10 +15,10 @@ export default function AdminJob_Main({
   // 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);
@@ -24,12 +27,12 @@ export default function AdminJob_Main({
   const router = useRouter();
 
   async function onLoadCountPublish() {
-  try {
-    
-  } catch (error) {
-    clientLogger.error("Error get count publish", error)
+    try {
+
+    } catch (error) {
+      clientLogger.error("Error get count publish", error)
+    }
   }
-}
 
   const listStatus = [
     {
@@ -38,6 +41,9 @@ export default function AdminJob_Main({
       jumlah: countPublish,
       color: "green",
       text_color: "white",
+      icon: <IconUpload size={18} color="#4CAF4F" />
+      
+      
     },
     {
       id: 2,
@@ -45,6 +51,7 @@ export default function AdminJob_Main({
       jumlah: countReview,
       color: "orange",
       text_color: "white",
+      icon: <IconBookmark size={18} color="#FF7043" />
     },
     {
       id: 3,
@@ -52,6 +59,7 @@ export default function AdminJob_Main({
       jumlah: countReject,
       color: "red",
       text_color: "white",
+      icon: <IconAlertTriangle size={18} color="#FF4B4C" />
     },
     {
       id: 4,
@@ -59,6 +67,7 @@ export default function AdminJob_Main({
       jumlah: countArsip,
       color: "gray",
       text_color: "white",
+      icon: <IconArchive size={18} color="#007CBA" />
     },
   ];
   return (
@@ -77,18 +86,27 @@ export default function AdminJob_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>
diff --git a/src/app_modules/admin/new_layout.tsx b/src/app_modules/admin/new_layout.tsx
index 7e9f9460..97a6063a 100644
--- a/src/app_modules/admin/new_layout.tsx
+++ b/src/app_modules/admin/new_layout.tsx
@@ -186,8 +186,8 @@ export function Admin_NewLayout({
       >
         {!matches ? (
           <Stack  align="center" justify="center" h={"100%"}>
-            <Title>Sorry !</Title>
-            <Title order={4} align="center">
+            <Title c={AdminColor.white}>Sorry !</Title>
+            <Title c={AdminColor.white} order={4} align="center">
               View Only Available For Desktop
             </Title>
             <Button onClick={() => onClickLogout()}>Logout</Button>
diff --git a/src/app_modules/admin/user-access/view/index.tsx b/src/app_modules/admin/user-access/view/index.tsx
index 9a23c1e4..f4b96ef2 100644
--- a/src/app_modules/admin/user-access/view/index.tsx
+++ b/src/app_modules/admin/user-access/view/index.tsx
@@ -23,6 +23,7 @@ import adminUserAccess_getListUser from "../fun/get/get_list_all_user";
 import { WibuRealtime } from "wibu-pkg";
 import { gs_access_user, IRealtimeData } from "@/app/lib/global_state";
 import { useAtom } from "jotai";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminUserAccess_View({ listUser }: { listUser: any }) {
   const [data, setData] = useState<MODEL_USER[]>(listUser.data);
@@ -120,10 +121,10 @@ export default function AdminUserAccess_View({ listUser }: { listUser: any }) {
   const tableBody = data.map((e, i) => (
     <tr key={e.id}>
       <td>
-        <Center>{e.username}</Center>
+        <Center c={AdminColor.white}>{e.username}</Center>
       </td>
       <td>
-        <Center>+{e.nomor}</Center>
+        <Center c={AdminColor.white}>+{e.nomor}</Center>
       </td>
       <td>
         {e.active === false ? (
@@ -163,8 +164,9 @@ export default function AdminUserAccess_View({ listUser }: { listUser: any }) {
     <>
       <Stack spacing={"xs"} h={"90vh"}>
         <Group
+          c={AdminColor.white}
           position="apart"
-          bg={"blue.4"}
+          bg={AdminColor.softBlue}
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
@@ -179,25 +181,24 @@ export default function AdminUserAccess_View({ listUser }: { listUser: any }) {
           />
         </Group>
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
             <Table
               verticalSpacing={"xs"}
               horizontalSpacing={"md"}
               p={"md"}
-              striped
-              highlightOnHover
+              
             >
               <thead>
                 <tr>
                   <th>
-                    <Center>Username</Center>
+                    <Center c={AdminColor.white}>Username</Center>
                   </th>
                   <th>
-                    <Center>Nomor</Center>
+                    <Center c={AdminColor.white}>Nomor</Center>
                   </th>
                   <th>
-                    <Center>Aksi</Center>
+                    <Center c={AdminColor.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 6296f016..fdc7de35 100644
--- a/src/app_modules/admin/vote/main/index.tsx
+++ b/src/app_modules/admin/vote/main/index.tsx
@@ -96,6 +96,7 @@ export default function AdminVote_Main() {
       ),
       color: "green",
       icon: <IconUpload size={18} color="#4CAF4F" />
+      
     },
     {
       id: 2,