109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { AccentColor, AdminColor, MainColor } from "@/app_modules/_global/color/color_pallet";
|
|
import { Divider, Flex, Grid, Group, Paper, Stack, Text, ThemeIcon, Title } from "@mantine/core";
|
|
import { IconFileText, IconUsers } from "@tabler/icons-react";
|
|
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
|
|
import { useState } from "react";
|
|
import { useShallowEffect } from "@mantine/hooks";
|
|
import { apiGetCountPortofolio, apiGetCountUserActive } from "../lib/api_fetch_main_dashboard";
|
|
import { NextResponse } from "next/server";
|
|
import { clientLogger } from "@/util/clientLogger";
|
|
import MainDashboardSkeleton from "../../_admin_global/_component/skeleton/main_dashboard_skeleton";
|
|
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
|
|
|
|
export default function AdminMain() {
|
|
const [countUser, setCountUser] = useState<number | null>(null);
|
|
const [countPortofolio, setCountPortofolio] = useState<number | null>(null);
|
|
|
|
useShallowEffect(() => {
|
|
onLoadDataUser();
|
|
onLoadDataPortofolio();
|
|
}, []);
|
|
|
|
async function onLoadDataUser() {
|
|
try {
|
|
const response = await apiGetCountUserActive();
|
|
if (response) {
|
|
setCountUser(response.data);
|
|
}
|
|
|
|
} catch (error) {
|
|
clientLogger.error("Error get count user data", error);
|
|
}
|
|
}
|
|
|
|
async function onLoadDataPortofolio() {
|
|
try {
|
|
const response = await apiGetCountPortofolio();
|
|
if (response) {
|
|
// console.log("Response Portofolio",response);
|
|
setCountPortofolio(response.data);
|
|
}
|
|
|
|
} catch (error) {
|
|
clientLogger.error("Error get count portofolio data", error);
|
|
}
|
|
}
|
|
|
|
const listBox = [
|
|
{
|
|
id: 1,
|
|
name: "User",
|
|
jumlah:
|
|
countUser == null ? (<CustomSkeleton height={40} width={40} />
|
|
) : countUser ? (
|
|
countUser
|
|
) : (
|
|
"-"
|
|
),
|
|
link: "",
|
|
icon: <IconUsers size={18} color="#0066CCFF" />
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Portofolio",
|
|
jumlah:
|
|
countPortofolio == null ? (<CustomSkeleton height={40} width={40} />
|
|
) : countPortofolio ? (
|
|
countPortofolio
|
|
) : (
|
|
"-"
|
|
),
|
|
link: "",
|
|
icon: <IconFileText size={18} color={"#B6A22EFF"} />
|
|
},
|
|
];
|
|
|
|
|
|
return (
|
|
<>
|
|
<Stack spacing={"sm"}>
|
|
<ComponentAdminGlobal_HeaderTamplate name="Main Dashboard" />
|
|
{/* <Title c={AdminColor.white}>Main Dashboard</Title>
|
|
<Divider c={AdminColor.dividerWhite} mb={"md"} size={"xs"} /> */}
|
|
|
|
<Grid>
|
|
{listBox.map((e) => (
|
|
<Grid.Col md={4} lg={4} key={e.id}>
|
|
<Paper style={{ borderColor: "transparent" }} bg={AdminColor.softBlue} withBorder shadow="md" radius="md" p="md">
|
|
<Stack spacing={0}>
|
|
<Text fw={"bold"} c={MainColor.white}>{e.name}</Text>
|
|
<Flex align={"center"} justify={"space-between"}>
|
|
<Title c={MainColor.white}>{e.jumlah}</Title>
|
|
<ThemeIcon radius={"xl"} size={"md"} color={AccentColor.white}>{e.icon}</ThemeIcon>
|
|
</Flex>
|
|
</Stack>
|
|
</Paper>
|
|
</Grid.Col>
|
|
))}
|
|
|
|
<Grid.Col md={4} lg={4}>
|
|
{/* <PieChart /> */}
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Stack>
|
|
</>
|
|
);
|
|
}
|