diff --git a/package.json b/package.json
index b0ac8d88..7efdb4e9 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "@types/react-dom": "18.2.7",
     "@types/uuid": "^9.0.4",
     "autoprefixer": "10.4.14",
+    "echarts": "^5.4.3",
+    "echarts-for-react": "^3.0.2",
     "embla-carousel-react": "^8.0.0-rc14",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.12",
diff --git a/public/portofolio/logo/eac70e5a-cdfd-4323-a23b-f097a593e0fe.png b/public/portofolio/logo/eac70e5a-cdfd-4323-a23b-f097a593e0fe.png
new file mode 100644
index 00000000..256b64ba
Binary files /dev/null and b/public/portofolio/logo/eac70e5a-cdfd-4323-a23b-f097a593e0fe.png differ
diff --git a/src/app/dev/admin/layout.tsx b/src/app/dev/admin/layout.tsx
index e7937178..5e041dce 100644
--- a/src/app/dev/admin/layout.tsx
+++ b/src/app/dev/admin/layout.tsx
@@ -1,4 +1,4 @@
-import { AdminLayout } from "@/app_modules/admin/main";
+import { AdminLayout } from "@/app_modules/admin/main_dashboard";
 import React from "react";
 
 export default async function Layout({
diff --git a/src/app/dev/admin/main/dashboard/page.tsx b/src/app/dev/admin/main/dashboard/page.tsx
index 2151cea9..ee00cc55 100644
--- a/src/app/dev/admin/main/dashboard/page.tsx
+++ b/src/app/dev/admin/main/dashboard/page.tsx
@@ -1,5 +1,10 @@
-import { AdminMain } from "@/app_modules/admin/main";
+import { AdminMain } from "@/app_modules/admin/main_dashboard";
+import { AdminMainDashboard_CountPOrtofolio } from "@/app_modules/admin/main_dashboard/fun/count/fun_count_portofolio";
+import { AdminMainDashboard_CountUser } from "@/app_modules/admin/main_dashboard/fun/count/fun_count_user";
 
 export default async function Page() {
-  return <AdminMain />;
+  const countUser = await AdminMainDashboard_CountUser();
+  const countPorto = await AdminMainDashboard_CountPOrtofolio();
+
+  return <AdminMain countUser={countUser} countPorto={countPorto} />;
 }
diff --git a/src/app/dev/splash/admin/page.tsx b/src/app/dev/splash/admin/page.tsx
index 6597e069..16e07bd7 100644
--- a/src/app/dev/splash/admin/page.tsx
+++ b/src/app/dev/splash/admin/page.tsx
@@ -1,4 +1,4 @@
-import { SplashDashboardAdmin } from "@/app_modules/admin/main";
+import { SplashDashboardAdmin } from "@/app_modules/admin/main_dashboard";
 
 export default async function Page() {
     return<>
diff --git a/src/app_modules/admin/component/logout.tsx b/src/app_modules/admin/component/logout.tsx
new file mode 100644
index 00000000..510007fd
--- /dev/null
+++ b/src/app_modules/admin/component/logout.tsx
@@ -0,0 +1,63 @@
+"use client";
+import { myConsole } from "@/app/fun/my_console";
+import { ApiHipmi } from "@/app/lib/api";
+import { ActionIcon, Button, Group, Modal, Stack, Title } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useAtom } from "jotai";
+import { IconLogout } from "@tabler/icons-react";
+import { Warna } from "@/app/lib/warna";
+import { useDisclosure } from "@mantine/hooks";
+import { gs_nomor, gs_otp } from "@/app_modules/auth/state/state";
+
+export default function Admin_Logout() {
+  const router = useRouter();
+  const [nomor, setnomor] = useAtom(gs_nomor);
+  const [code, setCode] = useAtom(gs_otp);
+
+  const [opened, { toggle }] = useDisclosure(false);
+
+  const onLogout = async () => {
+    router.push("/dev/auth/login");
+
+    // await fetch(ApiHipmi.logout)
+    //   .then((res) => res.json())
+    //   .then((val) => {
+    //     if (val.status == 200) {
+    //         setnomor(null);
+    //         setCode(null);
+
+    //       router.push("/dev/auth/login");
+    //     }
+    //   });
+  };
+
+  return (
+    <>
+      <Modal opened={opened} onClose={toggle} centered withCloseButton={false}>
+        <Stack>
+          <Title order={6}>Anda yakin ingin keluar ?</Title>
+          <Group align="center" position="center">
+            <Button compact onClick={toggle} radius={50}>
+              Batal
+            </Button>
+            <Button
+              compact
+              radius={50}
+              bg={Warna.merah}
+              color="red"
+              onClick={() => onLogout()}
+            >
+              Keluar
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+      <ActionIcon variant="transparent">
+        <IconLogout color={Warna.merah} onClick={toggle} />
+      </ActionIcon>
+      {/* <Button radius={"xl"} color={"red"} onClick={toggle}>
+        Logout
+      </Button> */}
+    </>
+  );
+}
diff --git a/src/app_modules/admin/main/view.tsx b/src/app_modules/admin/main/view.tsx
deleted file mode 100644
index d5a651e7..00000000
--- a/src/app_modules/admin/main/view.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import { Center, Divider, Stack, Title } from "@mantine/core";
-import Admin_Investasi from "../investasi/main/view";
-
-export default function AdminMain() {
-  return (
-    <>
-      <Stack spacing={"sm"}>
-        <Title>Main Dashboard</Title>
-        <Divider mb={"md"} />
-        <Stack align="center" justify="center" h={"80vh"}>
-          <Title>Cooming Soon !!</Title>
-        </Stack>
-      </Stack>
-    </>
-  );
-}
diff --git a/src/app_modules/admin/main_dashboard/fun/count/fun_count_portofolio.ts b/src/app_modules/admin/main_dashboard/fun/count/fun_count_portofolio.ts
new file mode 100644
index 00000000..0b2ab9d7
--- /dev/null
+++ b/src/app_modules/admin/main_dashboard/fun/count/fun_count_portofolio.ts
@@ -0,0 +1,8 @@
+"use server"
+
+import prisma from "@/app/lib/prisma"
+
+export async function AdminMainDashboard_CountPOrtofolio() {
+    const data = await prisma.portofolio.count({})
+    return data
+}
\ No newline at end of file
diff --git a/src/app_modules/admin/main_dashboard/fun/count/fun_count_user.ts b/src/app_modules/admin/main_dashboard/fun/count/fun_count_user.ts
new file mode 100644
index 00000000..36a66612
--- /dev/null
+++ b/src/app_modules/admin/main_dashboard/fun/count/fun_count_user.ts
@@ -0,0 +1,8 @@
+"use server"
+
+import prisma from "@/app/lib/prisma"
+
+export async function AdminMainDashboard_CountUser() {
+    const data = await prisma.user.count()
+    return data
+}
\ No newline at end of file
diff --git a/src/app_modules/admin/main/index.tsx b/src/app_modules/admin/main_dashboard/index.tsx
similarity index 56%
rename from src/app_modules/admin/main/index.tsx
rename to src/app_modules/admin/main_dashboard/index.tsx
index 83aa17a4..415381b9 100644
--- a/src/app_modules/admin/main/index.tsx
+++ b/src/app_modules/admin/main_dashboard/index.tsx
@@ -1,5 +1,5 @@
-import AdminMain from "./view";
-import AdminLayout from "./layout";
+import AdminMain from "./main/view";
+import AdminLayout from "./main/layout";
 import SplashDashboardAdmin from "./splash";
 
 export { AdminMain, AdminLayout, SplashDashboardAdmin };
diff --git a/src/app_modules/admin/main/layout.tsx b/src/app_modules/admin/main_dashboard/main/layout.tsx
similarity index 94%
rename from src/app_modules/admin/main/layout.tsx
rename to src/app_modules/admin/main_dashboard/main/layout.tsx
index 91437b28..3b6d3774 100644
--- a/src/app_modules/admin/main/layout.tsx
+++ b/src/app_modules/admin/main_dashboard/main/layout.tsx
@@ -20,7 +20,7 @@ import {
   useMantineTheme,
 } from "@mantine/core";
 import React, { useState } from "react";
-import ComponentGlobal_HeaderTamplate from "../../component_global/header_tamplate";
+import ComponentGlobal_HeaderTamplate from "../../../component_global/header_tamplate";
 import { useDisclosure } from "@mantine/hooks";
 import { IconLetterH, IconLogout } from "@tabler/icons-react";
 import {
@@ -33,7 +33,8 @@ import { useRouter } from "next/navigation";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
 import { Logout } from "@/app_modules/auth";
 import { useAtom } from "jotai";
-import { gs_adminDonasi_hotMenu } from "../donasi/global_state";
+import { gs_adminDonasi_hotMenu } from "../../donasi/global_state";
+import Admin_Logout from "../../component/logout";
 
 export default function AdminLayout({
   children,
@@ -134,7 +135,7 @@ export default function AdminLayout({
                     </Text>
                   ))}
                 </Group> */}
-                <Logout />
+                <Admin_Logout/>
               </Group>
             </MediaQuery>
           </Header>
diff --git a/src/app_modules/admin/main_dashboard/main/view.tsx b/src/app_modules/admin/main_dashboard/main/view.tsx
new file mode 100644
index 00000000..d47cb52d
--- /dev/null
+++ b/src/app_modules/admin/main_dashboard/main/view.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import {
+  ActionIcon,
+  Box,
+  Center,
+  Divider,
+  Grid,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import Admin_Investasi from "../../investasi/main/view";
+import { IconChevronsRight } from "@tabler/icons-react";
+import router from "next/router";
+import * as echarts from 'echarts';
+import EChartsReact from "echarts-for-react";
+
+
+export default function AdminMain({countUser, countPorto}: {countUser: number, countPorto: number} ) {
+  const listBox = [
+    {
+      id: 1,
+      name: "User",
+      jumlah: countUser,
+      link: "",
+      color: "green",
+    },
+    {
+      id: 2,
+      name: "Portofolio",
+      jumlah: countPorto,
+      link: "",
+      color: "orange",
+    },
+  ];
+
+  return (
+    <>
+      <Stack spacing={"sm"}>
+        <Title>Main Dashboard</Title>
+        <Divider mb={"md"} />
+        {/* <Stack align="center" justify="center" h={"80vh"}>
+          <Title>Cooming Soon !!</Title>
+        </Stack> */}
+
+        <Grid>
+          {listBox.map((e) => (
+            <Grid.Col md={4} lg={4} key={e.id}>
+              <Paper
+                withBorder
+                // bg={`${e.color}.2`}
+                shadow="md"
+                radius="md"
+                p="md"
+                //   sx={{ borderColor: e.color, borderStyle: "solid" }}
+              >
+                <Group position="center">
+                  <Stack align="center" spacing={0}>
+                    <Text>{e.name}</Text>
+                    <Title>{e.jumlah}</Title>
+                  </Stack>
+                </Group>
+              </Paper>
+            </Grid.Col>
+          ))}
+
+          <Grid.Col md={4} lg={4}>
+            {/* <PieChart /> */}
+          </Grid.Col>
+        </Grid>
+      </Stack>
+    </>
+  );
+}
+
+// const PieChart = () => {
+//   const option: echarts.EChartsOption = {
+//     title: {},
+//     tooltip: {
+//       trigger: "item",
+//     },
+//     legend: {
+//       top: "bottom",
+//     },
+//     series: [
+//       {
+//         name: "Anggota Partai",
+//         type: "pie",
+//         bottom: "40",
+//         data: [
+//           { value: 10, name: "Laki-Laki" },
+//           { value: 20, name: "Perempuan" },
+//         ],
+//       },
+//     ],
+//   };
+
+//   return (
+//     <>
+//       <Box
+//         sx={{
+//           backgroundColor: "gray",
+//         }}
+//       >
+//         <Text ta={"center"} fz={20} fw={700}>
+//           Jenis Kelamin
+//         </Text>
+//         <EChartsReact style={{ height: 300 }} option={option} />
+//       </Box>
+//     </>
+//   );
+// };
diff --git a/src/app_modules/admin/main/splash.tsx b/src/app_modules/admin/main_dashboard/splash.tsx
similarity index 100%
rename from src/app_modules/admin/main/splash.tsx
rename to src/app_modules/admin/main_dashboard/splash.tsx
diff --git a/yarn.lock b/yarn.lock
index e6daf34e..83e1f980 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1434,6 +1434,22 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
+echarts-for-react@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz#ac5859157048a1066d4553e34b328abb24f2b7c1"
+  integrity sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    size-sensor "^1.0.1"
+
+echarts@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.3.tgz#f5522ef24419164903eedcfd2b506c6fc91fb20c"
+  integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.4.4"
+
 electron-to-chromium@^1.4.601:
   version "1.4.616"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.616.tgz#4bddbc2c76e1e9dbf449ecd5da3d8119826ea4fb"
@@ -3333,6 +3349,11 @@ signal-exit@^4.0.1:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+size-sensor@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-1.0.2.tgz#b8f8da029683cf2b4e22f12bf8b8f0a1145e8471"
+  integrity sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -3372,6 +3393,7 @@ streamsearch@^1.1.0:
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3622,6 +3644,11 @@ tsconfig-paths@^3.15.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -3902,3 +3929,10 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zrender@5.4.4:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.4.tgz#8854f1d95ecc82cf8912f5a11f86657cb8c9e261"
+  integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
+  dependencies:
+    tslib "2.3.0"