fix ui dashboard & event

2025-01-28 21:26:33 +08:00
parent 93874478ac
commit 22fa1e8bcd
18 changed files with 137 additions and 96 deletions
--- a/src/app/api/event/sponsor/[id]/route.ts
+++ b/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,
      },
    });

--- a/src/app_modules/_global/color/color_pallet.ts
+++ b/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
+
--- a/src/app_modules/admin/_admin_global/_component/title_page.tsx
+++ b/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>
    </>
--- a/src/app_modules/admin/_admin_global/back_button.tsx
+++ b/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);
--- a/src/app_modules/admin/_admin_global/header_tamplate.tsx
+++ b/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>
-        <Divider/>
+        <Title mb={"md"} c={AdminColor.white}>{name ?  name : null}</Title>
      </Stack>
    </>
  );
--- a/src/app_modules/admin/donasi/main/index.tsx
+++ b/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"
--- a/src/app_modules/admin/event/main/index.tsx
+++ b/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"
--- a/src/app_modules/admin/investasi/_component/detail_data_author.tsx
+++ b/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"}>
-      <Stack>
+    <Paper bg={AdminColor.softBlue} p={"lg"}>
+      <Stack c={AdminColor.white}>
        <Title order={3}>Data User</Title>
        <Stack spacing={"xs"}>
          <Grid>
--- a/src/app_modules/admin/investasi/_component/detail_data_investasi.tsx
+++ b/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"}>
-        <Stack>
+      <Paper bg={AdminColor.softBlue} p={"lg"}>
+        <Stack c={AdminColor.white}>
          <Title order={3}>Rincian Data Investasi</Title>
          <Grid justify="center">
            <Grid.Col span={6}>
--- a/src/app_modules/admin/investasi/_component/detail_gambar_investasi.tsx
+++ b/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>

--- a/src/app_modules/admin/investasi/_component/ui_detail_file.tsx
+++ b/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"}>
-          <Stack>
+        <Paper bg={AdminColor.softBlue} p={"lg"}>
+          <Stack c={AdminColor.white}>
            <Title order={3}>File & Dokumen</Title>

            <Stack spacing={50}>
--- a/src/app_modules/admin/investasi/_view/detail/view_daftar_transaksi.tsx
+++ b/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>
--- a/src/app_modules/admin/investasi/detail/detail_publish.tsx
+++ b/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"}
--- a/src/app_modules/admin/investasi/main/table_publish.tsx
+++ b/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} />}
-            radius={"xl"}
-            placeholder="Cari nama proyek"
-            onChange={(val) => {
-              onSearch(val.currentTarget.value);
-            }}
-          />
+              icon={<IconSearch size={20} />}
+              radius={"xl"}
+              placeholder={"Cari nama proyek"}
+              onChange={(val) => {
+                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>
--- a/src/app_modules/admin/investasi/main/table_review.tsx
+++ b/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>
--- a/src/app_modules/admin/investasi/main/view.tsx
+++ b/src/app_modules/admin/investasi/main/view.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { RouterAdminInvestasi_OLD } from "@/app/lib/router_hipmi/router_admin";
-import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface"; 
+import { MODEL_INVESTASI } from "@/app_modules/investasi/_lib/interface";
 import {
  ActionIcon,
  Avatar,
@@ -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}>
-                  <Text>{e.name}</Text>
-                  <Title>{e.jumlah}</Title>
-                </Stack>
-              </Group>
+
+              <Stack spacing={0}>
+                <Text fw={"bold"} color={AccentColor.white}>{e.name}</Text>
+                <Flex align={"center"} justify={"space-between"}>
+                  <Title c={AccentColor.white}>{e.jumlah}</Title>
+                  <ThemeIcon radius={"xl"} size={"md"} color={AccentColor.white}>
+                    {e.icon}
+                  </ThemeIcon>
+                </Flex>
+              </Stack>
+
            </Paper>
          ))}
        </SimpleGrid>
--- a/src/app_modules/admin/main_dashboard/main/view.tsx
+++ b/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>
-        <Divider mb={"md"} />
+        <ComponentAdminGlobal_HeaderTamplate name="Main Dashboard"/>
+        {/* <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">
-                <Group position="center">
-                  <Stack align="center" spacing={0}>
-                    <Text>{e.name}</Text>
-                    <Title>{e.jumlah}</Title>
+              <Paper style={{ borderColor: "transparent"}} bg={AdminColor.softBlue} withBorder shadow="md" radius="md" p="md">
+                  <Stack spacing={0}>
+                  <Text fw={"bold"} c={MainColor.white}>{e.name}</Text>
+                  <Flex align={"center"} justify={"space-between"}>
+                    <Title c={MainColor.white}>{e.jumlah}</Title>
+                    <ThemeIcon radius={"xl"} size={"md"} color={AccentColor.white}>{e.icon}</ThemeIcon>
+                  </Flex>
                  </Stack>
-                </Group>
              </Paper>
            </Grid.Col>
          ))}
--- a/src/app_modules/admin/new_layout.tsx
+++ b/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