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

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

src/components/dashboard-content.tsx

@@ -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>

src/components/help-page.tsx

@@ -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) => (

src/components/kinerja-divisi.tsx

@@ -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)",
+											}
 											: {}
 									}
 								/>