Admin Dashboard Main
# feat - Tampilan jumlah user - Tampilan jumlah portofolio # No issue
This commit is contained in:
@@ -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",
|
||||
|
||||
BIN
public/portofolio/logo/eac70e5a-cdfd-4323-a23b-f097a593e0fe.png
Normal file
BIN
public/portofolio/logo/eac70e5a-cdfd-4323-a23b-f097a593e0fe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
@@ -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({
|
||||
|
||||
@@ -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} />;
|
||||
}
|
||||
|
||||
@@ -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<>
|
||||
|
||||
63
src/app_modules/admin/component/logout.tsx
Normal file
63
src/app_modules/admin/component/logout.tsx
Normal 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> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -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 };
|
||||
@@ -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>
|
||||
115
src/app_modules/admin/main_dashboard/main/view.tsx
Normal file
115
src/app_modules/admin/main_dashboard/main/view.tsx
Normal 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>
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
34
yarn.lock
34
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"
|
||||
|
||||
Reference in New Issue
Block a user