Admin Dashboard Main

# feat
- Tampilan jumlah user
- Tampilan jumlah portofolio
# No issue
This commit is contained in:
2024-01-19 17:01:49 +08:00
parent 5f4337333a
commit d926f75a3a
14 changed files with 245 additions and 27 deletions

View File

@@ -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",

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

@@ -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({

View File

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

View File

@@ -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<>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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>

View File

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

View File

@@ -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"