Admin Dashboard Main
# feat - Tampilan jumlah user - Tampilan jumlah portofolio # No issue
This commit is contained in:
@@ -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
|
||||
}
|
||||
5
src/app_modules/admin/main_dashboard/index.tsx
Normal file
5
src/app_modules/admin/main_dashboard/index.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import AdminMain from "./main/view";
|
||||
import AdminLayout from "./main/layout";
|
||||
import SplashDashboardAdmin from "./splash";
|
||||
|
||||
export { AdminMain, AdminLayout, SplashDashboardAdmin };
|
||||
159
src/app_modules/admin/main_dashboard/main/layout.tsx
Normal file
159
src/app_modules/admin/main_dashboard/main/layout.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ActionIcon,
|
||||
AppShell,
|
||||
Avatar,
|
||||
Box,
|
||||
Burger,
|
||||
Divider,
|
||||
Drawer,
|
||||
Footer,
|
||||
Group,
|
||||
Header,
|
||||
MediaQuery,
|
||||
NavLink,
|
||||
Navbar,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
useMantineTheme,
|
||||
} from "@mantine/core";
|
||||
import React, { useState } from "react";
|
||||
import ComponentGlobal_HeaderTamplate from "../../../component_global/header_tamplate";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { IconLetterH, IconLogout } from "@tabler/icons-react";
|
||||
import {
|
||||
RouterAdminAward,
|
||||
RouterAdminDashboard,
|
||||
RouterAdminDonasi,
|
||||
RouterAdminInvestasi,
|
||||
} from "@/app/lib/router_hipmi/router_admin";
|
||||
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 Admin_Logout from "../../component/logout";
|
||||
|
||||
export default function AdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const theme = useMantineTheme();
|
||||
const [opened, setOpened] = useState(false);
|
||||
const router = useRouter();
|
||||
const [active, setActive] = useAtom(gs_adminDonasi_hotMenu);
|
||||
|
||||
const listAdminPage = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Dashboard",
|
||||
route: RouterAdminDashboard.main_admin,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Investasi",
|
||||
route: RouterAdminInvestasi.main_investasi,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Donasi",
|
||||
route: RouterAdminDonasi.main_donasi,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
padding="sm"
|
||||
navbarOffsetBreakpoint="md"
|
||||
asideOffsetBreakpoint="sm"
|
||||
navbar={
|
||||
<MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
|
||||
<Navbar
|
||||
width={{ lg: 200, md: 200, sm: 200, base: 200 }}
|
||||
hiddenBreakpoint="md"
|
||||
hidden={!opened}
|
||||
p="xs"
|
||||
bg={"gray.2"}
|
||||
>
|
||||
{listAdminPage.map((e, i) => (
|
||||
<Box key={i}>
|
||||
<NavLink
|
||||
sx={{
|
||||
":hover": {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
}}
|
||||
fw={active === i ? "bold" : "normal"}
|
||||
// key={e.id}
|
||||
label={e.name}
|
||||
onClick={() => {
|
||||
setActive(i);
|
||||
router.push(e.route);
|
||||
}}
|
||||
/>
|
||||
{active === i ? <Divider size={"lg"} color="gray" /> : ""}
|
||||
</Box>
|
||||
))}
|
||||
</Navbar>
|
||||
</MediaQuery>
|
||||
}
|
||||
header={
|
||||
<Header height={50} bg={"gray.2"}>
|
||||
{/* Mobile View */}
|
||||
<MediaQuery largerThan="md" styles={{ display: "none" }}>
|
||||
<Group h={50} align="center" px={"md"} position="apart">
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={() => setOpened((o) => !o)}
|
||||
size="sm"
|
||||
color={theme.colors.gray[6]}
|
||||
mr="xl"
|
||||
/>
|
||||
<Title order={6}>Dashboard Admin</Title>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
onClick={() => router.push(RouterHome.main_home)}
|
||||
>
|
||||
<IconLogout color="red" />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</MediaQuery>
|
||||
|
||||
{/* Web View */}
|
||||
<MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
|
||||
<Group position="apart" align="center" h={50} px={"md"}>
|
||||
<Text fw={"lighter"}>Dashboard Admin</Text>
|
||||
<Title order={4}> HIPMI</Title>
|
||||
{/* <Group>
|
||||
{listAdminPage.map((e) => (
|
||||
<Text key={e.id} onClick={() => router.push(e.route)}>
|
||||
{e.name}
|
||||
</Text>
|
||||
))}
|
||||
</Group> */}
|
||||
<Admin_Logout/>
|
||||
</Group>
|
||||
</MediaQuery>
|
||||
</Header>
|
||||
}
|
||||
>
|
||||
{/* {JSON.stringify(active)} */}
|
||||
|
||||
{children}
|
||||
</AppShell>
|
||||
<Drawer opened={opened} onClose={() => setOpened(false)} size={"50%"}>
|
||||
<Stack spacing={"xl"}>
|
||||
{listAdminPage.map((e) => (
|
||||
<Text key={e.id} onClick={() => router.push(e.route)}>
|
||||
{e.name}
|
||||
</Text>
|
||||
))}
|
||||
</Stack>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
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>
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
30
src/app_modules/admin/main_dashboard/splash.tsx
Normal file
30
src/app_modules/admin/main_dashboard/splash.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
|
||||
import { AspectRatio, Center, Image, Stack, Text, Title } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function SplashDashboardAdmin() {
|
||||
const router = useRouter();
|
||||
useShallowEffect(() => {
|
||||
setTimeout(() => router.push(RouterAdminDashboard.main_admin), 2000)
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
{/* <Stack align="center" justify="center" h={"100vh"}>
|
||||
<Title order={4} c={"orange"}>
|
||||
Selamat Datang, ADMIN
|
||||
</Title>
|
||||
<Title c={"red"}>HIPMI</Title>
|
||||
|
||||
</Stack> */}
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image src={"/aset/logo/logo-hipmi.png"} alt="Logo" />
|
||||
</AspectRatio>
|
||||
<Center>
|
||||
<Title>Welcome Admin</Title>
|
||||
</Center>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user