API Dashboard Investasi & Event
This commit is contained in:
@@ -10,6 +10,7 @@ import { apiGetCountPortofolio, apiGetCountUserActive } from "../lib/api_fetch_m
|
||||
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);
|
||||
@@ -34,7 +35,7 @@ export default function AdminMain() {
|
||||
clientLogger.error("Error get count user data", error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function onLoadDataPortofolio() {
|
||||
try {
|
||||
const response = await apiGetCountPortofolio();
|
||||
@@ -52,14 +53,26 @@ export default function AdminMain() {
|
||||
{
|
||||
id: 1,
|
||||
name: "User",
|
||||
jumlah: countUser,
|
||||
jumlah:
|
||||
countUser == null ? (<CustomSkeleton height={40} width={40} />
|
||||
) : countUser ? (
|
||||
countUser
|
||||
) : (
|
||||
"-"
|
||||
),
|
||||
link: "",
|
||||
icon: <IconUsers size={18} color="#0066CCFF" />
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Portofolio",
|
||||
jumlah: countPortofolio,
|
||||
jumlah:
|
||||
countPortofolio == null ? (<CustomSkeleton height={40} width={40} />
|
||||
) : countPortofolio ? (
|
||||
countPortofolio
|
||||
) : (
|
||||
"-"
|
||||
),
|
||||
link: "",
|
||||
icon: <IconFileText size={18} color={"#B6A22EFF"} />
|
||||
},
|
||||
@@ -68,35 +81,31 @@ export default function AdminMain() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{!countUser && !countPortofolio ? (
|
||||
<MainDashboardSkeleton />
|
||||
) : (
|
||||
<Stack spacing={"sm"}>
|
||||
<ComponentAdminGlobal_HeaderTamplate name="Main Dashboard" />
|
||||
{/* <Title c={AdminColor.white}>Main Dashboard</Title>
|
||||
<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>
|
||||
{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>
|
||||
</Stack>
|
||||
)}
|
||||
))}
|
||||
|
||||
<Grid.Col md={4} lg={4}>
|
||||
{/* <PieChart /> */}
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user