99 lines
3.0 KiB
JavaScript
99 lines
3.0 KiB
JavaScript
import React, { useState } from "react";
|
|
import AdminLayout from "./Layout/AdminLayout";
|
|
import { FaHome } from "react-icons/fa";
|
|
import { FaShop, FaUser } from "react-icons/fa6";
|
|
import ReactApexChart from "react-apexcharts";
|
|
|
|
const Dashboard = (props) => {
|
|
const { module, user, materi } = props;
|
|
|
|
const [barChart, setBarChart] = useState({
|
|
theme: {
|
|
mode: "light",
|
|
palette: "palette1",
|
|
monochrome: {
|
|
enabled: false,
|
|
color: "#255aee",
|
|
shadeTo: "light",
|
|
shadeIntensity: 0.65,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "Total materi",
|
|
data: materi.map((item) => item.module.length),
|
|
color: "#0f172a",
|
|
},
|
|
],
|
|
chart: {
|
|
type: "bar",
|
|
height: 350,
|
|
background: "#00000000",
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: "55%",
|
|
endingShape: "rounded",
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ["transparent"],
|
|
},
|
|
xaxis: {
|
|
categories: materi.map((item) => item.nama),
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<AdminLayout title="Dashboard">
|
|
<div className="flex min-h-full w-full rounded-[5px] h-full flex-col duration-300 ease-in-out border-[#D6D6D6] dark:border-primary">
|
|
<div className="flex flex-col md:flex-row gap-3 items-center">
|
|
<CardDashboard
|
|
title="Total Module"
|
|
icon={<FaHome />}
|
|
value={`+${module}`}
|
|
/>
|
|
<CardDashboard
|
|
title="Total Users"
|
|
icon={<FaUser />}
|
|
value={`+${user}`}
|
|
/>
|
|
</div>
|
|
<h1 className="font-bold text-2xl mt-6">Grafik Materi</h1>
|
|
<div className="flex flex-col mt-3">
|
|
<ReactApexChart
|
|
width={"100%"}
|
|
options={barChart}
|
|
height={300}
|
|
series={barChart.series}
|
|
type="bar"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
);
|
|
};
|
|
|
|
const CardDashboard = ({ title, icon, value }) => {
|
|
return (
|
|
<div className="flex flex-row w-full h-full duration-300 flex-1 gap-1 border-[2px] px-6 py-4 rounded-[5px]">
|
|
<div className="flex flex-col pr-12 flex-1">
|
|
<h1 className="text-sm">{title}</h1>
|
|
<p className="font-semibold text-2xl mt-1">{value}</p>
|
|
</div>
|
|
<div className="mt-1">{icon}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|