feat: finalize kinerja divisi feature implementation
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
408
src/components/dashboard-content.tsx
Normal file
408
src/components/dashboard-content.tsx
Normal file
@@ -0,0 +1,408 @@
|
||||
import {
|
||||
Calendar,
|
||||
CheckCircle,
|
||||
FileText,
|
||||
MessageCircle,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Cell,
|
||||
Pie,
|
||||
PieChart,
|
||||
ResponsiveContainer,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip, // Added Tooltip import
|
||||
} from "recharts";
|
||||
|
||||
// Import Mantine components
|
||||
|
||||
import {
|
||||
Grid,
|
||||
Stack,
|
||||
Group,
|
||||
Text,
|
||||
Title,
|
||||
ActionIcon,
|
||||
Progress,
|
||||
Box,
|
||||
Badge,
|
||||
ThemeIcon,
|
||||
Card, // Added for icon containers
|
||||
useMantineColorScheme, // Add this import
|
||||
} from "@mantine/core";
|
||||
|
||||
const barChartData = [
|
||||
{ month: "Jan", value: 145 },
|
||||
{ month: "Feb", value: 165 },
|
||||
{ month: "Mar", value: 195 },
|
||||
{ month: "Apr", value: 155 },
|
||||
{ month: "Mei", value: 205 },
|
||||
{ month: "Jun", value: 185 },
|
||||
];
|
||||
|
||||
const pieChartData = [
|
||||
{ name: "Puas", value: 25 },
|
||||
{ name: "Cukup", value: 25 },
|
||||
{ name: "Kurang", value: 25 },
|
||||
{ name: "Sangat puas", value: 25 },
|
||||
];
|
||||
|
||||
const COLORS = ["#4E5BA6", "#F4C542", "#8CC63F", "#E57373"];
|
||||
|
||||
const divisiData = [
|
||||
{ name: "Kesejahteraan", value: 37 },
|
||||
{ name: "Pemerintahan", value: 26 },
|
||||
{ name: "Keuangan", value: 17 },
|
||||
{ name: "Sekretaris Desa", value: 15 },
|
||||
];
|
||||
|
||||
const eventData = [
|
||||
{ date: "1 Oktober 2025", title: "Hari Kesaktian Pancasila" },
|
||||
{ date: "15 Oktober 2025", title: "Davest" },
|
||||
{ date: "19 Oktober 2025", title: "Rapat Koordinasi" },
|
||||
];
|
||||
|
||||
export function DashboardContent() {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === 'dark';
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
{/* Stats Cards */}
|
||||
<Grid gutter="md">
|
||||
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
|
||||
<Card p="md" radius="md" h="100%" withBorder>
|
||||
<Group justify="space-between" align="flex-start" w="100%">
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Text size="sm" c="dimmed" mb="xs">
|
||||
Surat Minggu Ini
|
||||
</Text>
|
||||
<Group align="baseline" gap="xs">
|
||||
<Text size="xl" fw={700}>
|
||||
99
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed" mt="xs">
|
||||
14 baru, 14 diproses
|
||||
</Text>
|
||||
<Text size="sm" c="red" mt="xs">
|
||||
12% dari minggu lalu ↗ +12%
|
||||
</Text>
|
||||
</Box>
|
||||
<ThemeIcon variant="filled" size="xl" radius="xl" color={dark ? 'gray' : 'darmasaba-blue'}>
|
||||
<FileText style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
|
||||
<Card p="md" radius="md" h="100%" withBorder>
|
||||
<Group justify="space-between" align="flex-start" w="100%">
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Text size="sm" c="dimmed" mb="xs">
|
||||
Pengaduan Aktif
|
||||
</Text>
|
||||
<Group align="baseline" gap="xs">
|
||||
<Text size="xl" fw={700}>
|
||||
28
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed" mt="xs">
|
||||
14 baru, 14 diproses
|
||||
</Text>
|
||||
</Box>
|
||||
<ThemeIcon variant="filled" size="xl" radius="xl" color={dark ? 'gray' : 'darmasaba-blue'}>
|
||||
<MessageCircle style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
|
||||
<Card p="md" radius="md" h="100%" withBorder>
|
||||
<Group justify="space-between" align="flex-start" w="100%">
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Text size="sm" c="dimmed" mb="xs">
|
||||
Layanan Selesai
|
||||
</Text>
|
||||
<Group align="baseline" gap="xs">
|
||||
<Text size="xl" fw={700}>
|
||||
156
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed" mt="xs">
|
||||
bulan ini
|
||||
</Text>
|
||||
<Text size="sm" c="red" mt="xs">
|
||||
+8%
|
||||
</Text>
|
||||
</Box>
|
||||
<ThemeIcon variant="filled" size="xl" radius="xl" color={dark ? 'gray' : 'darmasaba-blue'}>
|
||||
<CheckCircle style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
|
||||
<Card p="md" radius="md" h="100%" withBorder>
|
||||
<Group justify="space-between" align="flex-start" w="100%">
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Text size="sm" c="dimmed" mb="xs">
|
||||
Kepuasan Warga
|
||||
</Text>
|
||||
<Group align="baseline" gap="xs">
|
||||
<Text size="xl" fw={700}>
|
||||
87.2%
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed" mt="xs">
|
||||
dari 482 responden
|
||||
</Text>
|
||||
</Box>
|
||||
<ThemeIcon variant="filled" size="xl" radius="xl" color={dark ? 'gray' : 'darmasaba-blue'}>
|
||||
<Users style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid gutter="lg">
|
||||
{/* Bar Chart */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<Card p="md" radius="md" withBorder>
|
||||
<Group justify="space-between" mb="md">
|
||||
<Box>
|
||||
<Title order={4} 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">
|
||||
{/* Original SVG converted to a generic Icon placeholder */}
|
||||
<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={barChartData}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke="var(--mantine-color-gray-3)"
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "var(--mantine-color-text)" }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
ticks={[0, 55, 110, 165, 220]}
|
||||
tick={{ fill: "var(--mantine-color-text)" }}
|
||||
/>
|
||||
<Tooltip />
|
||||
<Bar
|
||||
dataKey="value"
|
||||
fill="var(--mantine-color-blue-filled)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
{/* Pie Chart */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<Card p="md" radius="md" withBorder>
|
||||
<Title order={4} mb={5}>
|
||||
Tingkat Kepuasan
|
||||
</Title>
|
||||
<Text size="sm" c="dimmed" mb="md">
|
||||
Tingkat kepuasan layanan
|
||||
</Text>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={pieChartData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={80}
|
||||
outerRadius={120}
|
||||
paddingAngle={2}
|
||||
dataKey="value"
|
||||
>
|
||||
{pieChartData.map((_entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={COLORS[index]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
<Group justify="center" gap="md" mt="md">
|
||||
<Group gap="xs">
|
||||
<Box w={12} h={12} style={{ backgroundColor: COLORS[0], borderRadius: "50%" }} />
|
||||
<Text size="sm">Sangat puas (0%)</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<Box w={12} h={12} style={{ backgroundColor: COLORS[1], borderRadius: "50%" }} />
|
||||
<Text size="sm">Puas (0%)</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<Box w={12} h={12} style={{ backgroundColor: COLORS[2], borderRadius: "50%" }} />
|
||||
<Text size="sm">Cukup (0%)</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<Box w={12} h={12} style={{ backgroundColor: COLORS[3], borderRadius: "50%" }} />
|
||||
<Text size="sm">Kurang (0%)</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
{/* Bottom Section */}
|
||||
<Grid gutter="lg">
|
||||
{/* Divisi Teraktif */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<Card p="md" radius="md" withBorder>
|
||||
<Group gap="xs" mb="lg">
|
||||
<Box>
|
||||
{/* Original SVG icon */}
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="3"
|
||||
y="3"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x="3"
|
||||
y="14"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x="14"
|
||||
y="3"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x="14"
|
||||
y="14"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
<Title order={4}>Divisi Teraktif</Title>
|
||||
</Group>
|
||||
<Stack gap="sm">
|
||||
{divisiData.map((divisi, index) => (
|
||||
<Box key={index}>
|
||||
<Group justify="space-between" mb={5}>
|
||||
<Text size="sm" fw={500}>
|
||||
{divisi.name}
|
||||
</Text>
|
||||
<Text size="sm" fw={600}>
|
||||
{divisi.value} Kegiatan
|
||||
</Text>
|
||||
</Group>
|
||||
<Progress
|
||||
value={(divisi.value / 37) * 100}
|
||||
size="sm"
|
||||
radius="xl"
|
||||
color="blue"
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
{/* Kalender */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<Card p="md" radius="md" withBorder>
|
||||
<Group gap="xs" mb="lg">
|
||||
<Calendar style={{ width: 20, height: 20 }} />
|
||||
<Title order={4}>Kalender & Kegiatan Mendatang</Title>
|
||||
</Group>
|
||||
<Stack gap="md">
|
||||
{eventData.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}>{event.title}</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
{/* APBDes Chart */}
|
||||
<Card p="md" radius="md" withBorder>
|
||||
<Title order={4} mb="lg">
|
||||
Grafik APBDes
|
||||
</Title>
|
||||
<Stack gap="xs">
|
||||
<Group align="center" gap="md">
|
||||
<Text size="sm" fw={500} w={60}>
|
||||
Belanja
|
||||
</Text>
|
||||
<Progress value={70} size="lg" radius="xl" color="blue" style={{ flex: 1 }} />
|
||||
</Group>
|
||||
<Group align="center" gap="md">
|
||||
<Text size="sm" fw={500} w={60}>
|
||||
Pendapatan
|
||||
</Text>
|
||||
<Progress value={90} size="lg" radius="xl" color="green" style={{ flex: 1 }} />
|
||||
</Group>
|
||||
<Group align="center" gap="md">
|
||||
<Text size="sm" fw={500} w={60}>
|
||||
Pembangunan
|
||||
</Text>
|
||||
<Progress value={50} size="lg" radius="xl" color="orange" style={{ flex: 1 }} />
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user