refactor: modularize dashboard components per PromptDashboard.md
- Create reusable StatCard component for header metrics
- Create ChartSurat component for bar chart (surat statistics)
- Create DivisionProgress component for divisi teraktif
- Create ChartAPBDes component for APBDes horizontal bar chart
- Create ActivityList component for calendar events
- Create SatisfactionChart component for donut chart
- Create SDGSCard component for SDGs metrics
- Refactor DashboardContent to use new modular components
- Add proper dark mode support with specified colors
- Implement responsive grid layout (12/6/1 columns)
- Add custom SDGs icons (Energy, Peace, Health, Poverty, Ocean)
New components structure:
src/components/dashboard/
- stat-card.tsx
- chart-surat.tsx
- chart-apbdes.tsx
- division-progress.tsx
- activity-list.tsx
- satisfaction-chart.tsx
- sdgs-card.tsx
- index.ts (exports)
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
69
src/components/dashboard/activity-list.tsx
Normal file
69
src/components/dashboard/activity-list.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { Calendar } from "lucide-react";
|
||||
|
||||
interface EventData {
|
||||
date: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const events: EventData[] = [
|
||||
{ date: "1 Oktober 2025", title: "Hari Kesaktian Pancasila" },
|
||||
{ date: "15 Oktober 2025", title: "Davest" },
|
||||
{ date: "19 Oktober 2025", title: "Rapat Koordinasi" },
|
||||
];
|
||||
|
||||
export function ActivityList() {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
bg={dark ? "#1E293B" : "white"}
|
||||
style={{
|
||||
borderColor: dark ? "#334155" : "white",
|
||||
boxShadow: dark
|
||||
? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
|
||||
: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||
}}
|
||||
>
|
||||
<Group gap="xs" mb="lg">
|
||||
<Calendar
|
||||
style={{ width: 20, height: 20 }}
|
||||
color={dark ? "#E2E8F0" : "#1E3A5F"}
|
||||
/>
|
||||
<Title order={4} c={dark ? "white" : "gray.9"}>
|
||||
Kalender & Kegiatan Mendatang
|
||||
</Title>
|
||||
</Group>
|
||||
<Stack gap="md">
|
||||
{events.map((event, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
style={{
|
||||
borderLeft: "4px solid var(--mantine-color-blue-filled)",
|
||||
paddingLeft: 12,
|
||||
}}
|
||||
>
|
||||
<Text size="sm" c="dimmed">
|
||||
{event.date}
|
||||
</Text>
|
||||
<Text fw={500} c={dark ? "white" : "gray.9"}>
|
||||
{event.title}
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
74
src/components/dashboard/chart-apbdes.tsx
Normal file
74
src/components/dashboard/chart-apbdes.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import {
|
||||
Card,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
Cell,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
|
||||
const apbdesData = [
|
||||
{ name: "Belanja", value: 70, color: "#3B82F6" },
|
||||
{ name: "Pangan", value: 45, color: "#22C55E" },
|
||||
{ name: "Pembiayaan", value: 55, color: "#FACC15" },
|
||||
{ name: "Pendapatan", value: 90, color: "#3B82F6" },
|
||||
];
|
||||
|
||||
export function ChartAPBDes() {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
bg={dark ? "#1E293B" : "white"}
|
||||
style={{
|
||||
borderColor: dark ? "#334155" : "white",
|
||||
boxShadow: dark
|
||||
? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
|
||||
: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||
}}
|
||||
>
|
||||
<Title order={4} c={dark ? "white" : "gray.9"} mb="lg">
|
||||
Grafik APBDes
|
||||
</Title>
|
||||
<Stack gap="xs">
|
||||
{apbdesData.map((item, index) => (
|
||||
<Group key={index} align="center" gap="md">
|
||||
<Text size="sm" fw={500} w={100} c={dark ? "white" : "gray.7"}>
|
||||
{item.name}
|
||||
</Text>
|
||||
<ResponsiveContainer width="100%" height={20}>
|
||||
<BarChart layout="vertical" data={[item]}>
|
||||
<XAxis type="number" hide domain={[0, 100]} />
|
||||
<YAxis type="category" hide dataKey="name" />
|
||||
<Tooltip
|
||||
formatter={(value: number) => [`${value}%`, ""]}
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1E293B" : "white",
|
||||
borderColor: dark ? "#334155" : "#e5e7eb",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="value" radius={[4, 4, 4, 4]}>
|
||||
<Cell fill={item.color} />
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
110
src/components/dashboard/chart-surat.tsx
Normal file
110
src/components/dashboard/chart-surat.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Card,
|
||||
Group,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
|
||||
const chartData = [
|
||||
{ month: "Jan", value: 150 },
|
||||
{ month: "Feb", value: 165 },
|
||||
{ month: "Mar", value: 195 },
|
||||
{ month: "Apr", value: 160 },
|
||||
{ month: "Mei", value: 205 },
|
||||
{ month: "Jun", value: 185 },
|
||||
];
|
||||
|
||||
export function ChartSurat() {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
bg={dark ? "#1E293B" : "white"}
|
||||
style={{
|
||||
borderColor: dark ? "#334155" : "white",
|
||||
boxShadow: dark
|
||||
? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
|
||||
: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" mb="md">
|
||||
<Box>
|
||||
<Title order={4} c={dark ? "white" : "gray.9"} mb={5}>
|
||||
Statistik Pengajuan Surat
|
||||
</Title>
|
||||
<Text size="sm" c="dimmed">
|
||||
Trend pengajuan surat 6 bulan terakhir
|
||||
</Text>
|
||||
</Box>
|
||||
<ActionIcon variant="subtle" size="lg" radius="md">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 5L13 10L8 15"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={chartData}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke={dark ? "#334155" : "#e5e7eb"}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
ticks={[0, 55, 110, 165, 220]}
|
||||
tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1E293B" : "white",
|
||||
borderColor: dark ? "#334155" : "#e5e7eb",
|
||||
borderRadius: "8px",
|
||||
boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
|
||||
}}
|
||||
labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="value"
|
||||
fill="var(--mantine-color-blue-filled)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
69
src/components/dashboard/division-progress.tsx
Normal file
69
src/components/dashboard/division-progress.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
Group,
|
||||
Progress,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
|
||||
interface DivisionData {
|
||||
name: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
const divisionData: DivisionData[] = [
|
||||
{ name: "Kesejahteraan", value: 37 },
|
||||
{ name: "Pemberdayaan", value: 26 },
|
||||
{ name: "Keuangan", value: 17 },
|
||||
{ name: "Sekretaris Desa", value: 15 },
|
||||
];
|
||||
|
||||
const max_value = 37;
|
||||
|
||||
export function DivisionProgress() {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
bg={dark ? "#1E293B" : "white"}
|
||||
style={{
|
||||
borderColor: dark ? "#334155" : "white",
|
||||
boxShadow: dark
|
||||
? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
|
||||
: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||
}}
|
||||
>
|
||||
<Title order={4} c={dark ? "white" : "gray.9"} mb="lg">
|
||||
Divisi Teraktif
|
||||
</Title>
|
||||
<Stack gap="sm">
|
||||
{divisionData.map((divisi, index) => (
|
||||
<Box key={index}>
|
||||
<Group justify="space-between" mb={5}>
|
||||
<Text size="sm" fw={500} c={dark ? "white" : "gray.7"}>
|
||||
{divisi.name}
|
||||
</Text>
|
||||
<Text size="sm" fw={600} c={dark ? "white" : "gray.9"}>
|
||||
{divisi.value} Kegiatan
|
||||
</Text>
|
||||
</Group>
|
||||
<Progress
|
||||
value={(divisi.value / max_value) * 100}
|
||||
size="sm"
|
||||
radius="xl"
|
||||
color="blue"
|
||||
animated
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
7
src/components/dashboard/index.ts
Normal file
7
src/components/dashboard/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export { ActivityList } from "./activity-list";
|
||||
export { ChartAPBDes } from "./chart-apbdes";
|
||||
export { ChartSurat } from "./chart-surat";
|
||||
export { DivisionProgress } from "./division-progress";
|
||||
export { SatisfactionChart } from "./satisfaction-chart";
|
||||
export { SDGSCard } from "./sdgs-card";
|
||||
export { StatCard } from "./stat-card";
|
||||
82
src/components/dashboard/satisfaction-chart.tsx
Normal file
82
src/components/dashboard/satisfaction-chart.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
|
||||
|
||||
const satisfactionData = [
|
||||
{ name: "Sangat Puas", value: 25, color: "#4E5BA6" },
|
||||
{ name: "Puas", value: 25, color: "#F4C542" },
|
||||
{ name: "Cukup", value: 25, color: "#8CC63F" },
|
||||
{ name: "Kurang", value: 25, color: "#E57373" },
|
||||
];
|
||||
|
||||
export function SatisfactionChart() {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
bg={dark ? "#1E293B" : "white"}
|
||||
style={{
|
||||
borderColor: dark ? "#334155" : "white",
|
||||
boxShadow: dark
|
||||
? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
|
||||
: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||
}}
|
||||
>
|
||||
<Title order={4} c={dark ? "white" : "gray.9"} mb={5}>
|
||||
Tingkat Kepuasan
|
||||
</Title>
|
||||
<Text size="sm" c="dimmed" mb="md">
|
||||
Tingkat kepuasan layanan
|
||||
</Text>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={satisfactionData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={80}
|
||||
outerRadius={120}
|
||||
paddingAngle={2}
|
||||
dataKey="value"
|
||||
>
|
||||
{satisfactionData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1E293B" : "white",
|
||||
borderColor: dark ? "#334155" : "#e5e7eb",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
<Group justify="center" gap="md" mt="md">
|
||||
{satisfactionData.map((item, index) => (
|
||||
<Group key={index} gap="xs">
|
||||
<Box
|
||||
w={12}
|
||||
h={12}
|
||||
style={{ backgroundColor: item.color, borderRadius: "50%" }}
|
||||
/>
|
||||
<Text size="sm" c={dark ? "white" : "gray.7"}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
</Group>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
53
src/components/dashboard/sdgs-card.tsx
Normal file
53
src/components/dashboard/sdgs-card.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Box, Card, Group, Text, useMantineColorScheme } from "@mantine/core";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface SDGSCardProps {
|
||||
title: string;
|
||||
score: number;
|
||||
icon: ReactNode;
|
||||
color: string;
|
||||
bgColor: string;
|
||||
}
|
||||
|
||||
export function SDGSCard({
|
||||
title,
|
||||
score,
|
||||
icon,
|
||||
color,
|
||||
bgColor,
|
||||
}: SDGSCardProps) {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
bg={bgColor}
|
||||
style={{
|
||||
borderColor: dark ? "#334155" : bgColor,
|
||||
boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" align="flex-start" w="100%">
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Text size="sm" c={dark ? "white" : "gray.8"} fw={500} mb="xs">
|
||||
{title}
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={color}>
|
||||
{score.toFixed(2)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
color,
|
||||
opacity: 0.8,
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</Box>
|
||||
</Group>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
86
src/components/dashboard/stat-card.tsx
Normal file
86
src/components/dashboard/stat-card.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
Group,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface StatCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
detail?: string;
|
||||
trend?: string;
|
||||
trendValue?: number;
|
||||
icon: ReactNode;
|
||||
iconColor?: string;
|
||||
}
|
||||
|
||||
export function StatCard({
|
||||
title,
|
||||
value,
|
||||
detail,
|
||||
trend,
|
||||
trendValue,
|
||||
icon,
|
||||
iconColor = "darmasaba-blue",
|
||||
}: StatCardProps) {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const isPositiveTrend = trendValue ? trendValue >= 0 : true;
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
bg={dark ? "#1E293B" : "white"}
|
||||
style={{
|
||||
borderColor: dark ? "#334155" : "white",
|
||||
boxShadow: dark
|
||||
? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
|
||||
: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||
}}
|
||||
h="100%"
|
||||
>
|
||||
<Group justify="space-between" align="flex-start" w="100%">
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Text size="sm" c="dimmed" mb="xs">
|
||||
{title}
|
||||
</Text>
|
||||
<Group align="baseline" gap="xs">
|
||||
<Text size="xl" fw={700} c={dark ? "white" : "gray.9"}>
|
||||
{value}
|
||||
</Text>
|
||||
</Group>
|
||||
{detail && (
|
||||
<Text size="sm" c="dimmed" mt="xs">
|
||||
{detail}
|
||||
</Text>
|
||||
)}
|
||||
{trend && (
|
||||
<Text
|
||||
size="sm"
|
||||
c={isPositiveTrend ? "green" : "red"}
|
||||
mt="xs"
|
||||
fw={500}
|
||||
>
|
||||
{trend}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<ThemeIcon
|
||||
variant="filled"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
color={dark ? "gray" : iconColor}
|
||||
>
|
||||
{icon}
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user