tambahan

src/pages/scr/dashboard/dashboard_home.tsx

@@ -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() {
   return (
-    <div>
-      <h1>Dashboard</h1>
-    </div>
+    <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>
+          <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>
   );
 }