66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
|
|
import Grid from "@mui/material/Grid2";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import SessionsChart from "../SessionsChart/sessionChart";
|
|
import StatCard, { StatCardProps } from "../StatCard/statCard";
|
|
import ResourcesPieChart from "../ResourcePieChart/resourcePieChart";
|
|
import RoundedBarChart from "../barChartCard/barChartCard";
|
|
import LineChartCard from "../LineChartCard/lineChartCard";
|
|
|
|
const data: StatCardProps[] = [
|
|
{
|
|
title: "Total Charge Stations",
|
|
value: "86",
|
|
},
|
|
{
|
|
title: "Charging Completed",
|
|
value: "12",
|
|
},
|
|
{
|
|
title: "Active Users",
|
|
value: "24",
|
|
},
|
|
{
|
|
title: "Total Energy Consumed",
|
|
value: "08",
|
|
},
|
|
];
|
|
|
|
export default function MainGrid() {
|
|
return (
|
|
<Box sx={{ width: "100%", maxWidth: { sm: "100%", md: "1700px" } }}>
|
|
{/* cards */}
|
|
<Typography component="h2" variant="h6" sx={{ mb: 2 }}>
|
|
Dashboard
|
|
</Typography>
|
|
<Grid
|
|
container
|
|
spacing={3}
|
|
columns={12}
|
|
|
|
// sx={{ mb: (theme) => theme.spacing(2) }}
|
|
>
|
|
{data.map((card, index) => (
|
|
<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}>
|
|
<StatCard {...card} />
|
|
</Grid>
|
|
))}
|
|
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<SessionsChart />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<ResourcesPieChart />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<RoundedBarChart />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<LineChartCard />
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
}
|