wibu/dashboard-desaplus-noc
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: update dashboard components (dashboard-content, help-page, kinerja-divisi)

Browse Source 
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
nico
2026-02-23 10:32:24 +08:00
parent 5801eb4596
commit 38b22dd2dd
3 changed files with 42 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/dashboard-content.tsx
View File

@@ -66,6 +66,12 @@ const eventData = [
{ date: "19 Oktober 2025", title: "Rapat Koordinasi" },
];
const apbdesData = [
{ name: "Belanja", value: 70, color: "blue" },
{ name: "Pendapatan", value: 90, color: "green" },
{ name: "Pembangunan", value: 50, color: "orange" },
];
export function DashboardContent() {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
@@ -480,42 +486,23 @@ export function DashboardContent() {
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>
{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={9}>
<Progress
value={data.value}
size="lg"
radius="xl"
color={data.color}
/>
</Grid.Col>
</Grid>
))}
</Stack>
</Card>
</Stack>

7
src/components/help-page.tsx
View File

@@ -143,13 +143,6 @@ const HelpPage = () => {
return (
<Container size="lg" py="xl">
<Title order={1} mb="xl" ta="center">
Pusat Bantuan
</Title>
<Text size="lg" color="dimmed" ta="center" mb="xl">
Temukan jawaban untuk pertanyaan Anda atau hubungi tim support kami
</Text>
{/* Statistics Section */}
<SimpleGrid cols={3} spacing="lg" mb="xl">
{stats.map((stat, index) => (

44
src/components/kinerja-divisi.tsx
View File

@@ -122,10 +122,10 @@ const KinerjaDivisi = () => {
// Activity progress statistics
const activityProgressStats = [
{ name: "Selesai", value: 12 },
{ name: "Dikerjakan", value: 8 },
{ name: "Segera Dikerjakan", value: 5 },
{ name: "Dibatalkan", value: 2 },
{ name: "Selesai", value: 12, fill: "#10B981" },
{ name: "Dikerjakan", value: 8, fill: "#F59E0B" },
{ name: "Segera Dikerjakan", value: 5, fill: "#EF4444" },
{ name: "Dibatalkan", value: 2, fill: "#6B7280" },
];
const COLORS = ["#10B981", "#F59E0B", "#EF4444", "#6B7280"];
@@ -204,9 +204,9 @@ const KinerjaDivisi = () => {
contentStyle={
dark
? {
backgroundColor: "var(--mantine-color-dark-7)",
borderColor: "var(--mantine-color-dark-6)",
}
backgroundColor: "var(--mantine-color-dark-7)",
borderColor: "var(--mantine-color-dark-6)",
}
: {}
}
/>
@@ -402,9 +402,9 @@ const KinerjaDivisi = () => {
contentStyle={
dark
? {
backgroundColor: "var(--mantine-color-dark-7)",
borderColor: "var(--mantine-color-dark-6)",
}
backgroundColor: "var(--mantine-color-dark-7)",
borderColor: "var(--mantine-color-dark-6)",
}
: {}
}
/>
@@ -434,33 +434,27 @@ const KinerjaDivisi = () => {
Progres Kegiatan
</Title>
<ResponsiveContainer width="100%" height={200}>
<PieChart>
<PieChart
margin={{ top: 20, right: 80, bottom: 20, left: 80 }}
>
<Pie
data={activityProgressStats}
cx="50%"
cy="50%"
labelLine={false}
outerRadius={80}
fill="#8884d8"
labelLine
outerRadius={65}
dataKey="value"
label={({ name, percent }) =>
`${name}: ${percent ? (percent * 100).toFixed(0) : "0"}%`
}
>
{activityProgressStats.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index % COLORS.length]}
/>
))}
</Pie>
/>
<Tooltip
contentStyle={
dark
? {
backgroundColor: "var(--mantine-color-dark-7)",
borderColor: "var(--mantine-color-dark-6)",
}
backgroundColor: "var(--mantine-color-dark-7)",
borderColor: "var(--mantine-color-dark-6)",
}
: {}
}
/>