Fix UI Admin

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>

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>