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" }, { 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() { export function DashboardContent() {
const { colorScheme } = useMantineColorScheme(); const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark"; const dark = colorScheme === "dark";
@@ -480,42 +486,23 @@ export function DashboardContent() {
Grafik APBDes Grafik APBDes
</Title> </Title>
<Stack gap="xs"> <Stack gap="xs">
<Group align="center" gap="md"> {apbdesData.map((data, index) => (
<Text size="sm" fw={500} w={60}> <Grid key={index} align="center">
Belanja <Grid.Col span={3}>
</Text> <Text size="sm" fw={500}>
<Progress {data.name}
value={70} </Text>
size="lg" </Grid.Col>
radius="xl" <Grid.Col span={9}>
color="blue" <Progress
style={{ flex: 1 }} value={data.value}
/> size="lg"
</Group> radius="xl"
<Group align="center" gap="md"> color={data.color}
<Text size="sm" fw={500} w={60}> />
Pendapatan </Grid.Col>
</Text> </Grid>
<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> </Stack>
</Card> </Card>
</Stack> </Stack>

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

@@ -143,13 +143,6 @@ const HelpPage = () => {
return ( return (
<Container size="lg" py="xl"> <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 */} {/* Statistics Section */}
<SimpleGrid cols={3} spacing="lg" mb="xl"> <SimpleGrid cols={3} spacing="lg" mb="xl">
{stats.map((stat, index) => ( {stats.map((stat, index) => (

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

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