upd: menu home

Deskripsi
:
- tampilan grafik

NO Issues

src/components/DashboardGrafik.tsx

@@ -1,6 +1,6 @@
 import apiFetch from "@/lib/apiFetch";
-import { Card, Divider, Flex, Stack, Title } from "@mantine/core";
-import { IconSettings } from "@tabler/icons-react";
+import { Card, Divider, Flex, Stack, Text, Title } from "@mantine/core";
+import { IconChartBar } from "@tabler/icons-react";
 import type { EChartsOption } from "echarts";
 import EChartsReact from "echarts-for-react";
 import { useEffect, useState } from "react";
@@ -21,7 +21,7 @@ export default function DashboardGrafik() {
          darkMode: true,
          animation: true,
          legend: {
-            textStyle: { color: "#fff" } // warna legend putih
+            textStyle: { color: "#fff" }
          },
          tooltip: {},
          dataset: {
@@ -34,7 +34,8 @@ export default function DashboardGrafik() {
          },
          yAxis: {
             type: "value",
-            minInterval: 1
+            minInterval: 1,
+            axisLabel: { color: "#fff" }
          },
          color: ["#1abc9c", "#10816aff"],
          series: [
@@ -62,20 +63,19 @@ export default function DashboardGrafik() {
             boxShadow: "0 0 25px rgba(0,255,200,0.08)",
          }}
       >
-         <Stack gap="md">
+         <Stack gap="sm">
             <Flex align="center" justify="space-between">
-               <Title order={4} c="gray.0">
-                  System Performance
-               </Title>
-               <IconSettings size={20} color="gray" />
+               <Flex direction={"column"}>
+                  <Title order={4} c="gray.0">
+                     Grafik Pengaduan dan Pelayanan Surat
+                  </Title>
+                  <Text size="sm">7 Hari Terakhir</Text>
+               </Flex>
+               <IconChartBar size={20} color="gray" />
             </Flex>
             <Divider my="xs" />
             <Stack gap="sm">
-               <EChartsReact style={{ height: 400, width: "100%" }} option={options} />
-               {/* <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" /> */}
+               <EChartsReact style={{ height: 400 }} option={options} />
             </Stack>
          </Stack>
       </Card>