Merge pull request #262 from bipproduction/Nico/03-feb-25

Nico/03 feb 25

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
-    "WillLuke.nextjs.addTypesOnSave": true,
+  "WillLuke.nextjs.addTypesOnSave": true,
-    "WillLuke.nextjs.hasPrompted": true
+  "WillLuke.nextjs.hasPrompted": true,
-}
+  "prismaERDPreviewer.preferredTheme": "dark"
+}

src/app/api/admin/forum/dashboard/publish/route.ts

@@ -0,0 +1,44 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request, { params }: {
+    params: { status: string }
+}) {
+    const method = request.method;
+    if (method !== "GET") {
+        return NextResponse.json({
+            success: false,
+            message: "Method not allowed",
+        },
+            { status: 405 }
+        )
+    }
+    try {
+        let fixData;
+        fixData = await prisma.forum_Posting.count({
+            where: {
+               isActive: true,
+            }
+        })
+
+        return NextResponse.json({
+            success: true,
+            message: "Success get data forum dashboard",
+            data: fixData,
+        },
+            { status: 200 }
+        );
+    } catch (error) {
+        backendLogger.error("Error get data forum dashboard", error);
+        return NextResponse.json({
+            success: false,
+            message: "Error get data forum dashboard",
+            reason: (error as Error).message
+        },
+            { status: 500 }
+        )
+    } finally {
+        await prisma.$disconnect();
+    }
+}

src/app/api/admin/forum/dashboard/report_komentar/route.ts

@@ -0,0 +1,41 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+    const method = request.method;
+    if (method !== "GET") {
+        return NextResponse.json({
+            success: false,
+            message: "Method not allowed",
+        },
+            { status: 405 }
+        )
+    }
+    try {
+        let fixData;
+        fixData = await prisma.forum_ReportKomentar.count({
+            where: {
+                isActive: true,
+            }
+        })
+        return NextResponse.json({
+            success: true,
+            message: "Success get data forum dashboard",
+            data: fixData,
+        },
+            { status: 200 }
+        );
+    } catch (error) {
+        backendLogger.error("Error get data forum dashboard", error);
+        return NextResponse.json({
+            success: false,
+            message: "Error get data forum dashboard",
+            reason: (error as Error).message
+        },
+            { status: 500 }
+        )
+    } finally {
+        await prisma.$disconnect();
+    }
+}

src/app/api/admin/forum/dashboard/report_posting/route.ts

@@ -0,0 +1,41 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+    const method = request.method;
+    if (method !== "GET") {
+        return NextResponse.json({
+            success: false,
+            message: "Method not allowed",
+        },
+            { status: 405 }
+        )
+    }
+    try {
+        let fixData;
+        fixData = await prisma.forum_ReportPosting.count({
+            where: {
+                isActive: true,
+            }
+        })
+        return NextResponse.json({
+            success: true,
+            message: "Success get data forum dashboard",
+            data: fixData,
+        },
+            { status: 200 }
+        );
+    } catch (error) {
+        backendLogger.error("Error get data forum dashboard", error);
+        return NextResponse.json({
+            success: false,
+            message: "Error get data forum dashboard",
+            reason: (error as Error).message
+        },
+            { status: 500 }
+        )
+    } finally {
+        await prisma.$disconnect();
+    }
+}

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

@@ -14,9 +14,9 @@ export default async function Page() {
   return (
     <>
       <AdminForum_Main
-        countPublish={countPublish}
+        // countPublish={countPublish}
-        countLaporanPosting={countLaporanPosting}
+        // countLaporanPosting={countLaporanPosting}
-        countLaporanKomentar={countLaporanKomentar}
+        // countLaporanKomentar={countLaporanKomentar}
       />
     </>
   );

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" }}
       >

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"}
+              c={selectPage === e.id ? AdminColor.white : "gray"}
-              bg={selectPage === e.id ? "blue" : "gray.3"}
+              bg={selectPage === e.id ? AccentColor.blue : AccentColor.darkblue}
               onClick={() => {
                 setSelectPage(e.id);
               }}

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}

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>

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"

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

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>

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>

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>

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>

src/app_modules/admin/forum/lib/api_fetch_admin_forum.ts

@@ -0,0 +1,56 @@
+export {
+    apiGetAdminForumPublishCountDasboard,
+    apiGetAdminForumReportPosting,
+    apiGetAdminForumReportKomentar
+}
+
+const apiGetAdminForumPublishCountDasboard = async () => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/forum/dashboard/publish`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+        },
+    })
+
+    return await response.json().catch(() => null);
+}
+
+const apiGetAdminForumReportPosting = async () => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/forum/dashboard/report_posting`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+        },
+    })
+
+    return await response.json().catch(() => null);
+}
+
+const apiGetAdminForumReportKomentar = async () => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/forum/dashboard/report_komentar`, {
+        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/forum/main/dashboard.tsx

@@ -1,58 +1,127 @@
 "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";
+import { useShallowEffect } from "@mantine/hooks";
+import { clientLogger } from "@/util/clientLogger";
+import global_limit from "@/app/lib/limit";
+import { apiGetAdminForumPublishCountDasboard } from "../lib/api_fetch_admin_forum";
+import { useState } from "react";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function AdminForum_Main({
+export default function AdminForum_Main() {
-  countPublish,
-  countLaporanPosting,
-  countLaporanKomentar,
-}: {
-  countPublish: number;
-  countLaporanPosting: number;
-  countLaporanKomentar: number;
-}) {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Forum" />
         <ForumMain
-          countPublish={countPublish}
+        // countPublish={countPublish}
-          countLaporanPosting={countLaporanPosting}
+        // countLaporanPosting={countLaporanPosting}
-          countLaporanKomentar={countLaporanKomentar}
+        // countLaporanKomentar={countLaporanKomentar}
         />
       </Stack>
     </>
   );
 }
 
-function ForumMain({
+function ForumMain() {
-  countPublish,
+  const [countPublish, setCountPublish] = useState<number | null>(null);
-  countLaporanPosting,
+  const [countLaporanPosting, setCountLaporanPosting] = useState<number | null>(null);
-  countLaporanKomentar,
+  const [countLaporanKomentar, setCountLaporanKomentar] = useState<number | null>(null);
-}: {
+
-  countPublish: number;
+
-  countLaporanPosting: number;
+  useShallowEffect(() => {
-  countLaporanKomentar: number;
+    handlerLoadData();
-}) {
+  }, [])
+
+  async function handlerLoadData() {
+    try {
+      const listLoadData = [
+        global_limit(() => onLoadCountPublish()),
+        global_limit(() => onLoadCountReportPosting()),
+        global_limit(() => onLoadCountReportKomentar()),
+      ]
+      const result = await Promise.all(listLoadData);
+    } catch (error) {
+      clientLogger.error("Error handler load data", error);
+    }
+  }
+
+  async function onLoadCountPublish() {
+    try {
+      const response = await apiGetAdminForumPublishCountDasboard()
+      if (response) {
+        setCountPublish(response.data)
+      }
+    } catch (error) {
+      clientLogger.error("Error get count publish", error);
+    }
+  }
+
+  async function onLoadCountReportPosting() {
+    try {
+      const response = await apiGetAdminForumPublishCountDasboard()
+      if (response) {
+        setCountLaporanPosting(response.data)
+      }
+    } catch (error) {
+      clientLogger.error("Error get count publish", error);
+    }
+  }
+
+  async function onLoadCountReportKomentar() {
+    try {
+      const response = await apiGetAdminForumPublishCountDasboard()
+      if (response) {
+        setCountLaporanKomentar(response.data)
+      }
+    } catch (error) {
+      clientLogger.error("Error get count publish", error);
+    }
+  }
+
   const listBox = [
     {
       id: 1,
       name: "Publish",
-      jumlah: countPublish,
+      jumlah: countPublish == null ? (
+        <CustomSkeleton width={40} height={40} />
+      ) : countPublish ? (
+        countPublish
+      ) : (
+        "-"
+      ),
       color: "green",
+      icon: <IconUpload size={18} color="#4CAF4F" />
     },
     {
       id: 2,
       name: "Report Posting",
-      jumlah: countLaporanPosting,
+      jumlah: countLaporanPosting == null ? (
+        <CustomSkeleton width={40} height={40} />
+      ) : countLaporanPosting ? (
+        countLaporanPosting
+      ) : (
+        "-"
+      ),
       color: "orange",
+      icon: <IconFlag size={18} color="#FF9800" />
     },
     {
       id: 3,
       name: "Report Komentar",
-      jumlah: countLaporanKomentar,
+      jumlah: countLaporanKomentar == null ? (
+        <CustomSkeleton width={40} height={40} />
+      ) : countLaporanKomentar ? (
+        countLaporanKomentar
+      ) : (
+        "-"
+      ),
       color: "red",
+      icon: <IconMessageReport size={18} color="#F44336" />
     },
   ];
   return (
@@ -69,18 +138,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 spacing={0}>
-              <Stack align="center" spacing={0}>
+              <Text fw={"bold"} c={AccentColor.white}>{e.name}</Text>
-                <Text>{e.name}</Text>
+              <Flex align={"center"} justify={"space-between"}>
-                <Title>{e.jumlah ? e.jumlah : 0}</Title>
+                <Title color={AccentColor.white}>{e.jumlah ? e.jumlah : 0}</Title>
-              </Stack>
+                <ThemeIcon
-            </Group>
+                  radius={"xl"}
+                  size={"md"}
+                  color={AccentColor.white}
+                >
+                  {e.icon}
+                </ThemeIcon>
+              </Flex>
+            </Stack>
           </Paper>
         ))}
       </SimpleGrid>

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>

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>

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>

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>

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>

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>

src/app_modules/admin/job/lib/api_fetch_admin_job.ts

@@ -0,0 +1,39 @@
+export {
+    apiGetJobStatusCountDashboard,
+    apiGetJobArsipCount
+}
+
+const apiGetJobStatusCountDashboard = async ({ name }: {
+    name: "Publish" | "Review" | "Reject";
+}) => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/job/dashboard/${name}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    return await response.json().catch(() => null)
+}
+
+const apiGetJobArsipCount = async () => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/job/dashboard/arsip`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+        }
+    });
+    return await response.json().catch(() => null)
+
+};

src/app_modules/admin/job/main/index.tsx

@@ -1,10 +1,17 @@
 "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";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import global_limit from "@/app/lib/limit";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetJobArsipCount, apiGetJobStatusCountDashboard } from "../lib/api_fetch_admin_job";
 
 export default function AdminJob_Main({
   // countPublish,
@@ -12,10 +19,10 @@ export default function AdminJob_Main({
   // countReject,
   // countArsip,
 }: {
-  // countPublish: number;
+    // countPublish: number;
-  // countReview: number;
+    // countReview: number;
-  // countReject: number;
+    // countReject: number;
-  // countArsip: number
+    // countArsip: number
   }) {
   const [countPublish, setCountPublish] = useState<number | null>(null);
   const [countReview, setCountReview] = useState<number | null>(null);
@@ -23,42 +30,133 @@ export default function AdminJob_Main({
   const [countArsip, setCountArsip] = useState<number | null>(null);
   const router = useRouter();
 
-  async function onLoadCountPublish() {
-  try {
-    
-  } catch (error) {
-    clientLogger.error("Error get count publish", error)
-  }
-}
 
+  useShallowEffect(() => {
+    handlerLoadData();
+  }, []);
+  async function handlerLoadData() {
+    try {
+      const listLoadData = [
+        global_limit(() => onLoadCountPublish()),
+        global_limit(() => onLoadCountReview()),
+        global_limit(() => onLoadCountReject()),
+        global_limit(() => onLoadCountArsip()),
+      ]
+    } catch (error) {
+      clientLogger.error("Error handler load data", error)
+    }
+  }
+
+  async function onLoadCountPublish() {
+    try {
+      const response = await apiGetJobStatusCountDashboard({
+        name: "Publish",
+      })
+      if (response) {
+        setCountPublish(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count publish", error)
+    }
+  }
+
+  async function onLoadCountReview() {
+    try {
+      const response = await apiGetJobStatusCountDashboard({
+        name: "Review",
+      })
+
+      if (response) {
+        setCountReview(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count review", error)
+    }
+  }
+
+  async function onLoadCountReject() {
+    try {
+      const response = await apiGetJobStatusCountDashboard({
+        name: "Reject",
+      })
+
+      if (response) {
+        setCountReject(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count reject", error)
+    }
+  }
+
+  async function onLoadCountArsip() {
+    try {
+      const response = await apiGetJobArsipCount()
+
+      if (response) {
+        setCountArsip(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get count arsip", error)
+    }
+  }
   const listStatus = [
     {
       id: 1,
       name: "Publish",
-      jumlah: countPublish,
+      jumlah: countPublish == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countPublish ? (
+        countPublish
+      ) : (
+        "-"
+      ),
       color: "green",
       text_color: "white",
+      icon: <IconUpload size={18} color="#4CAF4F" />
+
+
     },
     {
       id: 2,
       name: "Review",
-      jumlah: countReview,
+      jumlah: countReview == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countReview ? (
+        countReview
+      ) : (
+        "-"
+      ),
       color: "orange",
       text_color: "white",
+      icon: <IconBookmark size={18} color="#FF7043" />
     },
     {
       id: 3,
       name: "Reject",
-      jumlah: countReject,
+      jumlah: countReject == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countReject ? (
+        countReject
+      ) : (
+        "-"
+      ),
       color: "red",
       text_color: "white",
+      icon: <IconAlertTriangle size={18} color="#FF4B4C" />
     },
     {
       id: 4,
       name: "Arsip",
-      jumlah: countArsip,
+      jumlah: countArsip == null ? (
+        <CustomSkeleton height={40} width={40} />
+      ) : countArsip ? (
+        countArsip
+      ) : (
+        "-"
+      ),
       color: "gray",
       text_color: "white",
+      icon: <IconArchive size={18} color="#007CBA" />
     },
   ];
   return (
@@ -77,18 +175,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}>
+              <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>

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 c={AdminColor.white}>Sorry !</Title>
-            <Title order={4} align="center">
+            <Title c={AdminColor.white} order={4} align="center">
               View Only Available For Desktop
             </Title>
             <Button onClick={() => onClickLogout()}>Logout</Button>

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>

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,

src/middleware.ts

@@ -42,6 +42,7 @@ const middlewareConfig: MiddlewareConfig = {
     // "/api/admin/donasi/dashboard/*",
     // "/api/admin/voting/dashboard/*",
     // "/api/admin/job/dashboard/*",
+    // "/api/admin/forum/dashboard/*",
 
 
     // Akses awal