69 lines
1.4 KiB
TypeScript
69 lines
1.4 KiB
TypeScript
import DashboardCountData from "@/components/DashboardCountData";
|
|
import DashboardGrafik from "@/components/DashboardGrafik";
|
|
import DashboardLastData from "@/components/DashboardLastData";
|
|
import {
|
|
Badge,
|
|
Container,
|
|
Flex,
|
|
Group,
|
|
Progress,
|
|
Stack,
|
|
Text,
|
|
Title,
|
|
} from "@mantine/core";
|
|
|
|
export default function Dashboard() {
|
|
return (
|
|
<Container
|
|
size="xl"
|
|
py="xl"
|
|
w={"100%"}
|
|
style={{
|
|
minHeight: "100vh",
|
|
background:
|
|
"radial-gradient(circle at top left, rgba(0,255,200,0.05), transparent 70%)",
|
|
}}
|
|
>
|
|
<Stack gap="xl">
|
|
<Flex align="center" justify="space-between">
|
|
<Group>
|
|
<Title order={2} c="gray.0">
|
|
Dashboard Overview
|
|
</Title>
|
|
<Badge color="teal" variant="light" size="lg" radius="sm">
|
|
Live
|
|
</Badge>
|
|
</Group>
|
|
</Flex>
|
|
<DashboardCountData />
|
|
<DashboardGrafik />
|
|
<DashboardLastData />
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
function ProgressSection({
|
|
label,
|
|
value,
|
|
color,
|
|
}: {
|
|
label: string;
|
|
value: number;
|
|
color: string;
|
|
}) {
|
|
return (
|
|
<Stack gap={4}>
|
|
<Flex justify="space-between">
|
|
<Text size="sm" c="gray.0">
|
|
{label}
|
|
</Text>
|
|
<Text size="sm" c="dimmed">
|
|
{value}%
|
|
</Text>
|
|
</Flex>
|
|
<Progress value={value} color={color} radius="xl" size="md" />
|
|
</Stack>
|
|
);
|
|
}
|