Admin Dashboard Main

# feat
- Tampilan jumlah user
- Tampilan jumlah portofolio
# No issue

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> */}
+    </>
+  );
+}

src/app_modules/admin/main/view.tsx

@@ -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>
-    </>
-  );
-}

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

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

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

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>

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>
+//     </>
+//   );
+// };