fix ui dashboard & event

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