nico
b77f6e8fa3
- Update APBDes data with actual values (390M, 470M, 290M) - Fix SDGS Desa layout to display horizontally with auto-wrap - Add responsive grid for SDGS cards (1 col mobile, 2 tablet, 3 desktop) - Add GitHub OAuth redirectURI configuration Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
517 lines
12 KiB
TypeScript
517 lines
12 KiB
TypeScript
import {
|
|
Briefcase,
|
|
Calendar,
|
|
CheckCircle,
|
|
FileText,
|
|
MessageCircle,
|
|
Users,
|
|
} from "lucide-react";
|
|
import {
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
Cell,
|
|
Pie,
|
|
PieChart,
|
|
ResponsiveContainer,
|
|
Tooltip, // Added Tooltip import
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
|
|
// Import Mantine components
|
|
|
|
import {
|
|
ActionIcon,
|
|
Badge,
|
|
Box,
|
|
Card, // Added for icon containers
|
|
Grid,
|
|
Group,
|
|
Image,
|
|
Progress,
|
|
SimpleGrid,
|
|
Stack,
|
|
Text,
|
|
ThemeIcon,
|
|
Title,
|
|
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" },
|
|
];
|
|
|
|
const apbdesData = [
|
|
{ name: "Belanja", value: 390, label: "390M" },
|
|
{ name: "Pendapatan", value: 470, label: "470M" },
|
|
{ name: "Pembiayaan", value: 290, label: "290M" },
|
|
];
|
|
|
|
const sdgsData = [
|
|
{ label: "Desa Berenergi Bersih Dan Terbarukan", value: 99.64, image: "/SDGS-7.png" },
|
|
{ label: "Desa Damai Berkeadilan", value: 78.65, image: "/SDGS-16.png" },
|
|
{ label: "Desa Sehat Dan Sejahtera", value: 77.37, image: "/SDGS-3.png" },
|
|
{ label: "Desa Tanpa Kemiskinan", value: 52.62, image: "/SDGS-1.png" }
|
|
];
|
|
|
|
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"
|
|
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
radius="md"
|
|
h="100%"
|
|
withBorder
|
|
bg={dark ? "#141D34" : "white"}
|
|
>
|
|
<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-navy"}
|
|
>
|
|
<FileText style={{ width: "70%", height: "70%" }} />
|
|
</ThemeIcon>
|
|
</Group>
|
|
</Card>
|
|
</Grid.Col>
|
|
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
|
|
<Card
|
|
p="md"
|
|
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
radius="md"
|
|
h="100%"
|
|
withBorder
|
|
bg={dark ? "#141D34" : "white"}
|
|
>
|
|
<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-navy"}
|
|
>
|
|
<MessageCircle style={{ width: "70%", height: "70%" }} />
|
|
</ThemeIcon>
|
|
</Group>
|
|
</Card>
|
|
</Grid.Col>
|
|
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
|
|
<Card
|
|
p="md"
|
|
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
radius="md"
|
|
h="100%"
|
|
withBorder
|
|
bg={dark ? "#141D34" : "white"}
|
|
>
|
|
<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-navy"}
|
|
>
|
|
<CheckCircle style={{ width: "70%", height: "70%" }} />
|
|
</ThemeIcon>
|
|
</Group>
|
|
</Card>
|
|
</Grid.Col>
|
|
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
|
|
<Card
|
|
p="md"
|
|
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
radius="md"
|
|
h="100%"
|
|
withBorder
|
|
bg={dark ? "#141D34" : "white"}
|
|
>
|
|
<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-navy"}
|
|
>
|
|
<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"
|
|
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
radius="md"
|
|
withBorder
|
|
bg={dark ? "#141D34" : "white"}
|
|
>
|
|
<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="#1E3A5F"
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</Card>
|
|
</Grid.Col>
|
|
|
|
{/* Pie Chart */}
|
|
<Grid.Col span={{ base: 12, lg: 6 }}>
|
|
<Card
|
|
p="md"
|
|
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
radius="md"
|
|
withBorder
|
|
bg={dark ? "#141D34" : "white"}
|
|
>
|
|
<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"
|
|
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
radius="md"
|
|
withBorder
|
|
bg={dark ? "#141D34" : "white"}
|
|
>
|
|
<Group gap="xs" mb="lg">
|
|
<Box>
|
|
{/* Original SVG icon */}
|
|
<Briefcase color="#1E3A5F" />
|
|
</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="#1E3A5F"
|
|
/>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
</Card>
|
|
</Grid.Col>
|
|
|
|
{/* Kalender */}
|
|
<Grid.Col span={{ base: 12, lg: 6 }}>
|
|
<Card
|
|
p="md"
|
|
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
radius="md"
|
|
withBorder
|
|
bg={dark ? "#141D34" : "white"}
|
|
>
|
|
<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 #1E3A5F",
|
|
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"
|
|
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
radius="md"
|
|
withBorder
|
|
bg={dark ? "#141D34" : "white"}
|
|
>
|
|
<Title order={4} mb="lg">
|
|
Grafik APBDes
|
|
</Title>
|
|
<Stack gap="xs">
|
|
{apbdesData.map((data, index) => (
|
|
<Grid key={index} align="center">
|
|
<Grid.Col span={3}>
|
|
<Text size="sm" fw={500}>
|
|
{data.name}
|
|
</Text>
|
|
</Grid.Col>
|
|
<Grid.Col span={7}>
|
|
<Progress
|
|
value={(data.value / 470) * 100}
|
|
size="lg"
|
|
radius="xl"
|
|
color="#1E3A5F"
|
|
/>
|
|
</Grid.Col>
|
|
<Grid.Col span={2}>
|
|
<Text size="sm" fw={600} ta="right">
|
|
{data.label}
|
|
</Text>
|
|
</Grid.Col>
|
|
</Grid>
|
|
))}
|
|
</Stack>
|
|
</Card>
|
|
|
|
{/* SDGS Desa */}
|
|
<Card
|
|
p="md"
|
|
style={{ borderColor: dark ? "#141D34" : "white" }}
|
|
radius="md"
|
|
withBorder
|
|
bg={dark ? "#141D34" : "white"}
|
|
>
|
|
<Title order={4} mb="lg">
|
|
SDGS Desa
|
|
</Title>
|
|
<SimpleGrid cols={{ base: 2, md: 5 }}>
|
|
{sdgsData.map((data, index) => (
|
|
<Card key={index} withBorder bg={dark ? "#141D34" : "white"} p="md">
|
|
<Group gap="sm" align="center">
|
|
<Image src={data.image} width={40} height={40} />
|
|
<Box>
|
|
<Text size="sm" ta={"center"} fw={500} lineClamp={2}>
|
|
{data.label}
|
|
</Text>
|
|
<Text size="sm" ta={"center"} fw={600} c="darmasaba-blue">
|
|
{data.value}
|
|
</Text>
|
|
</Box>
|
|
</Group>
|
|
</Card>
|
|
))}
|
|
</SimpleGrid>
|
|
</Card>
|
|
</Stack>
|
|
);
|
|
}
|