wibu/jenna-mcp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tambahan

Browse Source
This commit is contained in:
bipproduction
2025-10-13 17:34:42 +08:00
parent c3ac52cbe5
commit b4b6105288
1 changed files with 202 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/pages/scr/dashboard/dashboard_home.tsx
View File

@@ -1,7 +1,206 @@
import {
Card,
Container,
Flex,
Group,
Stack,
Text,
Title,
Progress,
Badge,
Button,
Grid,
Divider,
} from "@mantine/core";
import {
IconActivity,
IconUsers,
IconServer,
IconDatabase,
IconSettings,
IconArrowRight,
} from "@tabler/icons-react";
export default function Dashboard() { export default function Dashboard() {
return ( return (
<div> <Container
<h1>Dashboard</h1> size="xl"
</div> 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>
<Button
variant="gradient"
gradient={{ from: "teal", to: "cyan", deg: 45 }}
radius="md"
rightSection={<IconArrowRight size={18} />}
style={{
boxShadow: "0 0 12px rgba(0,255,200,0.3)",
}}
>
View Details
</Button>
</Flex>
<Grid>
<Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
<MetricCard
icon={<IconUsers size={28} />}
label="Active Users"
value="1,248"
change="+12%"
color="teal"
/>
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
<MetricCard
icon={<IconServer size={28} />}
label="Server Uptime"
value="99.98%"
change="+0.02%"
color="cyan"
/>
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
<MetricCard
icon={<IconDatabase size={28} />}
label="Database Ops"
value="82.4K"
change="+5.6%"
color="blue"
/>
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
<MetricCard
icon={<IconActivity size={28} />}
label="System Health"
value="Stable"
change=""
color="green"
/>
</Grid.Col>
</Grid>
<Card
radius="lg"
p="xl"
withBorder
style={{
background:
"linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
borderColor: "rgba(100,100,100,0.2)",
boxShadow: "0 0 25px rgba(0,255,200,0.08)",
}}
>
<Stack gap="md">
<Flex align="center" justify="space-between">
<Title order={4} c="gray.0">
System Performance
</Title>
<IconSettings size={20} color="gray" />
</Flex>
<Divider my="xs" />
<Text size="sm" c="dimmed">
Resource usage and performance indicators.
</Text>
<Stack gap="sm" mt="md">
<ProgressSection label="CPU Usage" value={68} color="teal" />
<ProgressSection label="Memory Usage" value={75} color="cyan" />
<ProgressSection label="Network Load" value={42} color="blue" />
<ProgressSection label="Disk Space" value={88} color="red" />
</Stack>
</Stack>
</Card>
</Stack>
</Container>
);
}
function MetricCard({
icon,
label,
value,
change,
color,
}: {
icon: React.ReactNode;
label: string;
value: string;
change?: string;
color: string;
}) {
return (
<Card
radius="lg"
p="md"
withBorder
style={{
background:
"linear-gradient(145deg, rgba(30,30,30,0.95), rgba(55,55,55,0.9))",
borderColor: "rgba(100,100,100,0.2)",
transition: "transform 0.15s ease, box-shadow 0.15s ease",
}}
onMouseEnter={(e) =>
(e.currentTarget.style.boxShadow = "0 0 10px rgba(0,255,200,0.2)")
}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<Stack gap={6}>
<Group gap={6}>
{icon}
<Text size="sm" c="dimmed">
{label}
</Text>
</Group>
<Flex align="center" justify="space-between">
<Text fw={600} size="xl" c="gray.0">
{value}
</Text>
{change && (
<Text size="sm" c={color}>
{change}
</Text>
)}
</Flex>
</Stack>
</Card>
);
}
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>
); );
} }