fix ui dashboard & event

src/app/api/event/sponsor/[id]/route.ts

@@ -37,7 +37,7 @@ export async function POST(
         fileName: req.fileName as string,
         fileExt: req.fileExt as string,
         fileId: req.fileId as string,
-        authorId: userLoginId,
+        // authorId: userLoginId,
       },
     });
 

src/app_modules/_global/color/color_pallet.ts

@@ -10,7 +10,7 @@ export const MainColor = {
 };
 
 export const AccentColor = {
-  blackgray: "#333533",
+  blackgray: "#333533FF",
   darkblue: "#002E59",
   blue: "#00447D",
   softblue: "#007CBA",
@@ -24,9 +24,20 @@ export const AdminColor = {
   yellow: "#FFEB99",
   green: "#A7DCA5",
   orange: "#F7C69B",
-  red: "#F4A8A8"
+  red: "#F4A8A8",
+  bgAdmin: "#182c47",
+  white: "#D6D9DCFF",
+  dividerWhite: "#D6D9DC2E",
+  softBlue: "#163C64FF"
+  
 }
 //yellow: "#FFC300"
 //yellow: "#FFD60A"
 // white: "#FEFFFE"
 
+// Warna Terang: #80a7c4
+// Warna Sedang: #40738d
+// Warna Asli: #002e59
+// Warna Lebih Gelap: #001f3b
+// Warna Tergelap: #001323
+

src/app_modules/admin/_admin_global/_component/title_page.tsx

@@ -21,7 +21,7 @@ export function ComponentAdminGlobal_TitlePage({
         p={"xs"}
         style={{ borderRadius: "6px" }}
       >
-        <Title order={4}>{name}</Title>
+        <Title c={"white"} order={4}>{name}</Title>
         {component ? component : ""}
       </Group>
     </>

src/app_modules/admin/_admin_global/back_button.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { Group, Button, Loader } from "@mantine/core";
 import { IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -17,7 +18,7 @@ export default function AdminGlobal_ComponentBackButton({
     <>
       <Group>
         <Button
-          c={"gray"}
+          c={AccentColor.white}
           leftIcon={
             isLoading ? (
               <Loader size={"xs"} color={"gray"} />
@@ -25,7 +26,7 @@ export default function AdminGlobal_ComponentBackButton({
               <IconChevronLeft />
             )
           }
-          variant="white"
+          style={{ backgroundColor: AdminColor.softBlue}}
           onClick={() => {
             setLoading(true);
             // setTimeout(() => , 3000);

src/app_modules/admin/_admin_global/header_tamplate.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { Box, Title, Divider, Stack } from "@mantine/core";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { Divider, Stack, Title } from "@mantine/core";
 
 export default function ComponentAdminGlobal_HeaderTamplate({name}: {name: string}) {
   return (
     <>
       <Stack spacing={5} >
-        <Title>{name ?  name : null}</Title>
+        <Title mb={"md"} c={AdminColor.white}>{name ?  name : null}</Title>
-        <Divider/>
       </Stack>
     </>
   );

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

@@ -19,6 +19,7 @@ import { IconAlertTriangle, IconBookmark, IconCategory, IconChevronsRight, IconU
 import { useRouter } from "next/navigation";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminDonasi_Main({
   countPublish,
@@ -84,7 +85,7 @@ export default function AdminDonasi_Main({
           {listBox.map((e, i) => (
             <Paper
               key={i}
-              bg={e.color}
+              bg={AdminColor.softBlue}
               shadow="md"
               radius="md"
               p="md"

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

@@ -15,6 +15,7 @@ import {
 import { IconAlertTriangle, IconBookmark, IconBriefcase, IconHistory, IconUpload } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminEvent_Main({
   countPublish,
@@ -104,7 +105,7 @@ export default function AdminEvent_Main({
           {listStatus.map((e, i) => (
             <Paper
               key={i}
-              bg={e.color}
+              bg={AdminColor.softBlue}
               shadow="md"
               radius="md"
               p="md"
@@ -136,7 +137,7 @@ export default function AdminEvent_Main({
           {listBox2.map((e, i) => (
             <Paper
               key={i}
-              bg={e.color}
+              bg={AdminColor.softBlue}
               shadow="md"
               radius="md"
               p="md"

src/app_modules/admin/investasi/_component/detail_data_author.tsx

@@ -1,3 +1,4 @@
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { Paper, Stack, Title, Grid, Text } from "@mantine/core";
 
@@ -7,8 +8,8 @@ export function ComponentAdminInvestasi_DetailDataAuthor({
   data: any;
 }) {
   return (
-    <Paper withBorder p={"lg"}>
+    <Paper bg={AdminColor.softBlue} p={"lg"}>
-      <Stack>
+      <Stack c={AdminColor.white}>
         <Title order={3}>Data User</Title>
         <Stack spacing={"xs"}>
           <Grid>

src/app_modules/admin/investasi/_component/detail_data_investasi.tsx

@@ -1,10 +1,11 @@
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { Paper, Stack, Title, Grid, Box, Text } from "@mantine/core";
 
 export function ComponentAdminInvestasi_DetailData({ data }: { data: any }) {
   return (
     <>
-      <Paper withBorder p={"lg"}>
+      <Paper bg={AdminColor.softBlue} p={"lg"}>
-        <Stack>
+        <Stack c={AdminColor.white}>
           <Title order={3}>Rincian Data Investasi</Title>
           <Grid justify="center">
             <Grid.Col span={6}>

src/app_modules/admin/investasi/_component/detail_gambar_investasi.tsx

@@ -1,12 +1,13 @@
 import { Paper, Stack, Title } from "@mantine/core";
 import { Admin_ComponentLoadImageLandscape } from "../../_admin_global";
+import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export function ComponentAdminInvestasi_DetailGambar({imagesId}: {imagesId: any}) {
     return (
       <>
-        <Paper withBorder p={"lg"}>
+        <Paper bg={AdminColor.softBlue}  p={"lg"}>
           <Stack>
-            <Title align="center" order={3}>
+            <Title c={AdminColor.white} align="center" order={3}>
               Gambar Proyek
             </Title>
 

src/app_modules/admin/investasi/_component/ui_detail_file.tsx

@@ -1,5 +1,6 @@
 import { APIs } from "@/app/lib";
 import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { MODEL_INVESTASI_DOKUMEN } from "@/app_modules/investasi/_lib/interface";
 import {
   SimpleGrid,
@@ -37,8 +38,8 @@ export function ComponentAdminInvestasi_UIDetailFile({
           { maxWidth: "36rem", cols: 1, spacing: "sm" },
         ]}
       >
-        <Paper withBorder p={"lg"}>
+        <Paper bg={AdminColor.softBlue} p={"lg"}>
-          <Stack>
+          <Stack c={AdminColor.white}>
             <Title order={3}>File & Dokumen</Title>
 
             <Stack spacing={50}>

src/app_modules/admin/investasi/_view/detail/view_daftar_transaksi.tsx

@@ -26,6 +26,7 @@ import {
   AdminInvestasi_ComponentCekBuktiTransfer,
 } from "../../_component";
 import { adminInvestasi_funGetAllTransaksiById } from "../../fun";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export function AdminInvestasi_ViewDaftarTransaksi({
   dataTransaksi,
@@ -167,7 +168,7 @@ export function AdminInvestasi_ViewDaftarTransaksi({
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Transkasi"
-          color="gray.4"
+          color={AdminColor.softBlue}
           component={<Group>
             <ActionIcon
               size={"lg"}
@@ -232,7 +233,7 @@ export function AdminInvestasi_ViewDaftarTransaksi({
           </Group>
         </Group> */}
 
-        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+        <Paper bg={AdminColor.softBlue} p={"md"} shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
             <Table
               verticalSpacing={"xl"}
@@ -245,28 +246,28 @@ export function AdminInvestasi_ViewDaftarTransaksi({
               <thead>
                 <tr>
                   <th>
-                    <Center>Nama Investor</Center>
+                    <Center c={AdminColor.white}>Nama Investor</Center>
                   </th>
                   <th>
-                    <Center>Nama Bank</Center>
+                    <Center c={AdminColor.white}>Nama Bank</Center>
                   </th>
                   <th>
-                    <Center>Jumlah Investasi</Center>
+                    <Center c={AdminColor.white}>Jumlah Investasi</Center>
                   </th>
                   <th>
-                    <Center>Lembar Terbeli</Center>
+                    <Center c={AdminColor.white}>Lembar Terbeli</Center>
                   </th>
                   <th>
-                    <Center>Tanggal</Center>
+                    <Center c={AdminColor.white}>Tanggal</Center>
                   </th>
                   <th>
-                    <Center>Status</Center>
+                    <Center c={AdminColor.white}>Status</Center>
                   </th>
                   <th>
-                    <Center>Bukti Transfer</Center>
+                    <Center c={AdminColor.white}>Bukti Transfer</Center>
                   </th>
                   <th>
-                    <Center>Aksi</Center>
+                    <Center c={AdminColor.white}>Aksi</Center>
                   </th>
                 </tr>
               </thead>

src/app_modules/admin/investasi/detail/detail_publish.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
-import { Button, Group, Stack } from "@mantine/core";
+import { Button, Group, Stack, Tabs } from "@mantine/core";
 import { IconCircleCheck } from "@tabler/icons-react";
 import { useState } from "react";
 import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
@@ -50,7 +50,7 @@ export function AdminInvestasi_DetailPublish({
 
         <Group>
           {listPage.map((e) => (
-            <Button
+            <Button variant="outline"
               key={e.id}
               color={selectPage == e.id ? "green" : "gray"}
               radius={"xl"}

src/app_modules/admin/investasi/main/table_publish.tsx

@@ -24,7 +24,7 @@ import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data"
 import { adminInvestasi_funGetAllPublish } from "../fun/get/get_all_publish";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { MainColor } from "@/app_modules/_global/color";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Admin_TablePublishInvestasi({
   dataInvestsi,
@@ -76,26 +76,26 @@ function TableView({ listData }: { listData: any }) {
     <tr key={e.id}>
       <td>
         <Center w={200}>
-          <Text lineClamp={1}>{e.author.username}</Text>
+          <Text c={AccentColor.white} lineClamp={1}>{e.author.username}</Text>
         </Center>
       </td>
       <td>
         <Center w={400}>
-          <Text lineClamp={1}>{e.title}</Text>
+          <Text c={AccentColor.white} lineClamp={1}>{e.title}</Text>
         </Center>
       </td>
       <td>
-        <Center w={200}>{_.toNumber(e.progress).toFixed(2)} %</Center>
+        <Center c={AccentColor.white} w={200}>{_.toNumber(e.progress).toFixed(2)} %</Center>
       </td>
       <td>
-        <Center w={200}>
+        <Center c={AccentColor.white} w={200}>
           {new Intl.NumberFormat("id-ID", {
             maximumFractionDigits: 10,
           }).format(+e.sisaLembar)}
         </Center>
       </td>
       <td>
-        <Center w={200}>
+        <Center c={AccentColor.white} w={200}>
           {new Intl.NumberFormat("id-ID", {
             maximumFractionDigits: 10,
           }).format(+e.totalLembar)}
@@ -103,7 +103,7 @@ function TableView({ listData }: { listData: any }) {
       </td>
       <td>
         <Center w={200}>
-          <Text lineClamp={1}>{e.Investasi_Invoice.length}</Text>
+          <Text c={AccentColor.white} lineClamp={1}>{e.Investasi_Invoice.length}</Text>
         </Center>
       </td>
       <td>
@@ -133,16 +133,16 @@ function TableView({ listData }: { listData: any }) {
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Publish"
-          color={AdminColor.green}
+          color={AdminColor.softBlue}
           component={
             <TextInput
-            icon={<IconSearch size={20} />}
+              icon={<IconSearch size={20} />}
-            radius={"xl"}
+              radius={"xl"}
-            placeholder="Cari nama proyek"
+              placeholder={"Cari nama proyek"}
-            onChange={(val) => {
+              onChange={(val) => {
-              onSearch(val.currentTarget.value);
+                onSearch(val.currentTarget.value);
-            }}
+              }}
-          />
+            />
           }
         />
         {/* <Group
@@ -167,7 +167,7 @@ function TableView({ listData }: { listData: any }) {
         {_.isEmpty(data) ? (
           <ComponentAdminGlobal_IsEmptyData />
         ) : (
-          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Paper bg={AdminColor.softBlue} p={"md"} shadow="lg" h={"80vh"}>
             <ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
               <Table
                 verticalSpacing={"md"}
@@ -175,31 +175,31 @@ function TableView({ listData }: { listData: any }) {
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-                striped
+
-                highlightOnHover
+
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center w={200}>Username</Center>
+                      <Center c={AccentColor.white} w={200}>Username</Center>
                     </th>
                     <th>
-                      <Center w={400}>Nama Proyek</Center>
+                      <Center c={AccentColor.white} w={400}>Nama Proyek</Center>
                     </th>
                     <th>
-                      <Center w={200}>Progres</Center>
+                      <Center c={AccentColor.white} w={200}>Progres</Center>
                     </th>
                     <th>
-                      <Center w={200}>Sisa Saham</Center>
+                      <Center c={AccentColor.white} w={200}>Sisa Saham</Center>
                     </th>
                     <th>
-                      <Center w={200}>Total Saham</Center>
+                      <Center c={AccentColor.white} w={200}>Total Saham</Center>
                     </th>
                     <th>
-                      <Center w={200}>Validasi</Center>
+                      <Center c={AccentColor.white} w={200}>Validasi</Center>
                     </th>
                     <th>
-                      <Center w={200}>Aksi</Center>
+                      <Center c={AccentColor.white} w={200}>Aksi</Center>
                     </th>
                   </tr>
                 </thead>

src/app_modules/admin/investasi/main/table_review.tsx

@@ -101,29 +101,29 @@ function TableView({ listData }: { listData: any }) {
   const tableBody = data.map((e) => (
     <tr key={e.id}>
       <td>
-        <Center w={200}>
+        <Center c={AccentColor.white} w={200}>
           <Text lineClamp={1}>{e.author.username}</Text>
         </Center>
       </td>
       <td>
-        <Center w={400}>
+        <Center c={AccentColor.white} w={400}>
           <Text lineClamp={1}>{e.title}</Text>
         </Center>
       </td>
       <td>
-        <Center w={200}>
+        <Center c={AccentColor.white} w={200}>
           <Text lineClamp={1}>{e.roi} %</Text>
         </Center>
       </td>
       <td>
-        <Center w={200}>
+        <Center c={AccentColor.white} w={200}>
           <ComponentAdminGlobal_TampilanRupiahDonasi
             nominal={_.toNumber(e.targetDana)}
           />
         </Center>
       </td>
       <td>
-        <Center w={200}>
+        <Center c={AccentColor.white} w={200}>
           <ComponentAdminGlobal_TampilanRupiahDonasi
             nominal={_.toNumber(e.hargaLembar)}
           />
@@ -155,7 +155,7 @@ function TableView({ listData }: { listData: any }) {
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Review"
-          color={AdminColor.orange}
+          color={AdminColor.softBlue}
           component={
             <TextInput
             icon={<IconSearch size={20} />}
@@ -189,7 +189,7 @@ function TableView({ listData }: { listData: any }) {
         {_.isEmpty(data) ? (
           <ComponentAdminGlobal_IsEmptyData />
         ) : (
-          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
             {isShowReload && (
               <Paper bg={"red"} w={"50%"}>
                 <Affix position={{ top: rem(200) }} w={"100%"}>
@@ -221,29 +221,27 @@ function TableView({ listData }: { listData: any }) {
                 p={"md"}
                 w={"100%"}
                 h={"100%"}
-                striped
-                highlightOnHover
               >
                 <thead>
                   <tr>
                     <th>
-                      <Center w={200}>Username</Center>
+                      <Center c={AccentColor.white} w={200}>Username</Center>
                     </th>
                     <th>
-                      <Center w={400}>Nama Proyek</Center>
+                      <Center c={AccentColor.white} w={400}>Nama Proyek</Center>
                     </th>
                     <th>
-                      <Center w={200}>ROI</Center>
+                      <Center c={AccentColor.white} w={200}>ROI</Center>
                     </th>
                     <th>
-                      <Center w={200}>Target Dana</Center>
+                      <Center c={AccentColor.white} w={200}>Target Dana</Center>
                     </th>
                     <th>
-                      <Center w={200}>Harga Perlembar</Center>
+                      <Center c={AccentColor.white} w={200}>Harga Perlembar</Center>
                     </th>
 
                     <th>
-                      <Center w={200}>Aksi</Center>
+                      <Center c={AccentColor.white} w={200}>Aksi</Center>
                     </th>
                   </tr>
                 </thead>

src/app_modules/admin/investasi/main/view.tsx

@@ -9,6 +9,7 @@ import {
   Box,
   Center,
   Divider,
+  Flex,
   Grid,
   Group,
   Paper,
@@ -17,16 +18,20 @@ import {
   Stack,
   Table,
   Text,
+  ThemeIcon,
   Title,
 } from "@mantine/core";
 import {
+  IconAlertTriangle,
   IconArrowBadgeRight,
   IconArrowBigRightLine,
   IconArrowsMaximize,
+  IconBookmark,
   IconCaretRight,
   IconChevronsDownRight,
   IconChevronsRight,
   IconEdit,
+  IconUpload,
   IconZoomCheck,
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -39,6 +44,8 @@ import _ from "lodash";
 import TableTotalInvestasi from "./table_total_investasi";
 import TablePublikasiProgresInvestasi from "./table_publikasi_progres";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Admin_Investasi({
   listInvestasi,
@@ -66,21 +73,25 @@ export default function Admin_Investasi({
       name: "Publish",
       jumlah: countPublish,
       link: RouterAdminInvestasi_OLD.table_status_publish,
-      color: "green",
+      color: MainColor.green,
+      icon: <IconUpload size={18} color="#4CAF4F" />,
     },
     {
       id: 2,
       name: "Review",
       jumlah: countReview,
       link: RouterAdminInvestasi_OLD.table_status_review,
-      color: "orange",
+      color: MainColor.orange,
+      icon: <IconBookmark size={18} color="#FF7043" />
     },
     {
       id: 3,
       name: "Reject",
       jumlah: countReject,
       link: RouterAdminInvestasi_OLD.table_status_reject,
-      color: "red",
+      color: MainColor.red,
+      icon: <IconAlertTriangle size={18} color="#FF4B4C" />
+
     },
   ];
 
@@ -101,18 +112,23 @@ export default function Admin_Investasi({
           {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}>
+              <Stack spacing={0}>
-                  <Text>{e.name}</Text>
+                <Text fw={"bold"} color={AccentColor.white}>{e.name}</Text>
-                  <Title>{e.jumlah}</Title>
+                <Flex align={"center"} justify={"space-between"}>
-                </Stack>
+                  <Title c={AccentColor.white}>{e.jumlah}</Title>
-              </Group>
+                  <ThemeIcon radius={"xl"} size={"md"} color={AccentColor.white}>
+                    {e.icon}
+                  </ThemeIcon>
+                </Flex>
+              </Stack>
+
             </Paper>
           ))}
         </SimpleGrid>

src/app_modules/admin/main_dashboard/main/view.tsx

@@ -1,6 +1,9 @@
 "use client";
 
-import { Divider, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { AccentColor, AdminColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import { Divider, Flex, Grid, Group, Paper, Stack, Text, ThemeIcon, Title } from "@mantine/core";
+import { IconFileText, IconUsers } from "@tabler/icons-react";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 
 export default function AdminMain({
   countUser,
@@ -15,33 +18,35 @@ export default function AdminMain({
       name: "User",
       jumlah: countUser,
       link: "",
-      color: "green",
+      icon: <IconUsers size={18} color="#0066CCFF" />
     },
     {
       id: 2,
       name: "Portofolio",
       jumlah: countPorto,
       link: "",
-      color: "orange",
+      icon: <IconFileText size={18} color={"#B6A22EFF"}/>
     },
   ];
 
   return (
     <>
       <Stack spacing={"sm"}>
-        <Title>Main Dashboard</Title>
+        <ComponentAdminGlobal_HeaderTamplate name="Main Dashboard"/>
-        <Divider mb={"md"} />
+        {/* <Title c={AdminColor.white}>Main Dashboard</Title>
+        <Divider c={AdminColor.dividerWhite} mb={"md"} size={"xs"} /> */}
 
         <Grid>
           {listBox.map((e) => (
             <Grid.Col md={4} lg={4} key={e.id}>
-              <Paper withBorder shadow="md" radius="md" p="md">
+              <Paper style={{ borderColor: "transparent"}} bg={AdminColor.softBlue} withBorder shadow="md" radius="md" p="md">
-                <Group position="center">
+                  <Stack spacing={0}>
-                  <Stack align="center" spacing={0}>
+                  <Text fw={"bold"} c={MainColor.white}>{e.name}</Text>
-                    <Text>{e.name}</Text>
+                  <Flex align={"center"} justify={"space-between"}>
-                    <Title>{e.jumlah}</Title>
+                    <Title c={MainColor.white}>{e.jumlah}</Title>
+                    <ThemeIcon radius={"xl"} size={"md"} color={AccentColor.white}>{e.icon}</ThemeIcon>
+                  </Flex>
                   </Stack>
-                </Group>
               </Paper>
             </Grid.Col>
           ))}

src/app_modules/admin/new_layout.tsx

@@ -36,6 +36,7 @@ import {
 } from "./_admin_global/new_global_state";
 import adminNotifikasi_getByUserId from "./notifikasi/fun/get/get_notifikasi_by_user_id";
 import { ComponentAdmin_UIDrawerNotifikasi } from "./notifikasi/ui_drawer_notifikasi";
+import { AdminColor } from "../_global/color/color_pallet";
 
 export function Admin_NewLayout({
   children,
@@ -93,10 +94,12 @@ export function Admin_NewLayout({
   return (
     <>
       <AppShell
+        bg={"#001f3b"}
         padding="md"
         navbarOffsetBreakpoint={1024}
         navbar={
           <Navbar
+            style={{ borderColor: "transparent" }}
             height={"100%"}
             width={{ base: 250 }}
             hiddenBreakpoint={1024}
@@ -182,7 +185,7 @@ export function Admin_NewLayout({
         }
       >
         {!matches ? (
-          <Stack align="center" justify="center" h={"100%"}>
+          <Stack  align="center" justify="center" h={"100%"}>
             <Title>Sorry !</Title>
             <Title order={4} align="center">
               View Only Available For Desktop