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

Progress Tampilan UI Dashboard Desa Plus NOC

Browse Source
This commit is contained in:
nico
2026-03-17 20:53:33 +07:00
parent 8c35d58b38
commit f0c37272b9
21 changed files with 574 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/bumdes-page.tsx
View File

@@ -386,4 +386,4 @@ const BumdesPage = () => {
);
};
export default BumdesPage;
export default BumdesPage;

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

@@ -1,4 +1,4 @@
import { Grid, Stack, useMantineColorScheme } from "@mantine/core";
import { Grid, Image, Stack, useMantineColorScheme } from "@mantine/core";
import { CheckCircle, FileText, MessageCircle, Users } from "lucide-react";
import { ActivityList } from "./dashboard/activity-list";
import { ChartAPBDes } from "./dashboard/chart-apbdes";
@@ -8,149 +8,26 @@ import { SatisfactionChart } from "./dashboard/satisfaction-chart";
import { SDGSCard } from "./dashboard/sdgs-card";
import { StatCard } from "./dashboard/stat-card";
// SDGs Icons
function EnergyIcon() {
return (
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 4L14 24H22L20 44L34 20H26L24 4Z"
fill="currentColor"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
function PeaceIcon() {
return (
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="24" cy="24" r="20" stroke="currentColor" strokeWidth="2" />
<path
d="M24 4V44M24 24L10 38M24 24L38 38"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
);
}
function HealthIcon() {
return (
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 44C24 44 6 28 6 18C6 11.373 11.373 6 18 6C21.5 6 24.5 7.5 24 12C23.5 7.5 26.5 6 30 6C36.627 6 42 11.373 42 18C42 28 24 44 24 44Z"
fill="currentColor"
stroke="currentColor"
strokeWidth="2"
strokeLinejoin="round"
/>
</svg>
);
}
function PovertyIcon() {
return (
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="6" y="18" width="36" height="26" rx="2" fill="currentColor" />
<path
d="M14 18V12C14 8.686 16.686 6 20 6H28C31.314 6 34 8.686 34 12V18"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
);
}
function OceanIcon() {
return (
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 30C6 30 10 26 14 30C18 34 22 30 26 30C30 30 34 34 38 30C42 26 46 30 46 30"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M6 38C6 38 10 34 14 38C18 42 22 38 26 38C30 38 34 42 38 38C42 34 46 38 46 38"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
<circle cx="24" cy="16" r="6" fill="currentColor" />
</svg>
);
}
const sdgsData = [
{
title: "Desa Berenergi Bersih dan Terbarukan",
score: 99.64,
icon: <EnergyIcon />,
color: "#FACC15",
bgColor: "#FEF9C3",
image: "SDGS-7.png",
},
{
title: "Desa Damai Berkeadilan",
score: 78.65,
icon: <PeaceIcon />,
color: "#3B82F6",
bgColor: "#DBEAFE",
image: "SDGS-16.png",
},
{
title: "Desa Sehat dan Sejahtera",
score: 77.37,
icon: <HealthIcon />,
color: "#22C55E",
bgColor: "#DCFCE7",
image: "SDGS-3.png",
},
{
title: "Desa Tanpa Kemiskinan",
score: 52.62,
icon: <PovertyIcon />,
color: "#EF4444",
bgColor: "#FEE2E2",
},
{
title: "Desa Peduli Lingkungan Laut",
score: 50.0,
icon: <OceanIcon />,
color: "#06B6D4",
bgColor: "#CFFAFE",
image: "SDGS-1.png",
},
];
@@ -202,37 +79,35 @@ export function DashboardContent() {
{/* Section 2: Chart & Division Progress */}
<Grid gutter="lg">
<Grid.Col span={{ base: 12, lg: 8 }}>
<Grid.Col span={{ base: 12, lg: 7 }}>
<ChartSurat />
</Grid.Col>
<Grid.Col span={{ base: 12, lg: 4 }}>
<DivisionProgress />
</Grid.Col>
</Grid>
{/* Section 3: APBDes Chart */}
<ChartAPBDes />
{/* Section 4 & 5: Activity List & Satisfaction Chart */}
<Grid gutter="lg">
<Grid.Col span={{ base: 12, lg: 6 }}>
<ActivityList />
</Grid.Col>
<Grid.Col span={{ base: 12, lg: 6 }}>
<Grid.Col span={{ base: 12, lg: 5 }}>
<SatisfactionChart />
</Grid.Col>
</Grid>
{/* Section 3: APBDes Chart */}
<Grid gutter="lg">
<Grid.Col span={{ base: 12, lg: 7 }}>
<DivisionProgress />
</Grid.Col>
<Grid.Col span={{ base: 12, lg: 5 }}>
<ActivityList />
{/* <SatisfactionChart /> */}
</Grid.Col>
</Grid>
<ChartAPBDes />
{/* Section 6: SDGs Desa Cards */}
<Grid gutter="md">
{sdgsData.map((sdg, index) => (
<Grid.Col key={index} span={{ base: 12, sm: 6, md: 4, lg: 2.4 }}>
<Grid.Col key={index} span={{ base: 9, md: 3 }}>
<SDGSCard
image={<Image src={sdg.image} alt={sdg.title} />}
title={sdg.title}
score={sdg.score}
icon={sdg.icon}
color={sdg.color}
bgColor={sdg.bgColor}
/>
</Grid.Col>
))}

35
src/components/dashboard/sdgs-card.tsx
View File

@@ -4,18 +4,10 @@ import type { ReactNode } from "react";
interface SDGSCardProps {
title: string;
score: number;
icon: ReactNode;
color: string;
bgColor: string;
image: ReactNode;
}
export function SDGSCard({
title,
score,
icon,
color,
bgColor,
}: SDGSCardProps) {
export function SDGSCard({ title, score, image }: SDGSCardProps) {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
@@ -24,29 +16,28 @@ export function SDGSCard({
p="md"
radius="xl"
withBorder
bg={bgColor}
style={{
borderColor: dark ? "#334155" : bgColor,
borderColor: dark ? "#334155" : "white",
boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
}}
h="100%"
>
<Group justify="space-between" align="flex-start" w="100%">
<Box>{image}</Box>
<Box style={{ flex: 1 }}>
<Text size="sm" c={dark ? "white" : "gray.8"} fw={500} mb="xs">
<Text
ta={"center"}
size="sm"
c={dark ? "white" : "gray.8"}
fw={500}
mb="xs"
>
{title}
</Text>
<Text size="xl" fw={700} c={color}>
<Text ta={"center"} size="xl" c={dark ? "white" : "gray.8"} fw={700}>
{score.toFixed(2)}
</Text>
</Box>
<Box
style={{
color,
opacity: 0.8,
}}
>
{icon}
</Box>
</Group>
</Card>
);

2
src/components/demografi-pekerjaan.tsx
View File

@@ -408,4 +408,4 @@ const DemografiPekerjaan = () => {
);
};
export default DemografiPekerjaan;
export default DemografiPekerjaan;

2
src/components/header.tsx
View File

@@ -118,4 +118,4 @@ export function Header() {
</Group>
</Group>
);
}
}

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

@@ -432,4 +432,4 @@ const HelpPage = () => {
);
};
export default HelpPage;
export default HelpPage;

2
src/components/jenna-analytic.tsx
View File

@@ -280,4 +280,4 @@ const JennaAnalytic = () => {
</Box>
);
};
export default JennaAnalytic;
export default JennaAnalytic;

2
src/components/keamanan-page.tsx
View File

@@ -322,4 +322,4 @@ const KeamananPage = () => {
);
};
export default KeamananPage;
export default KeamananPage;

2
src/components/keuangan-anggaran.tsx
View File

@@ -354,4 +354,4 @@ const KeuanganAnggaran = () => {
);
};
export default KeuanganAnggaran;
export default KeuanganAnggaran;

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

@@ -1,13 +1,12 @@
import { Grid, Stack } from "@mantine/core";
import {
ActivityCard,
ArchiveCard,
DiscussionPanel,
DivisionList,
DocumentChart,
EventCard,
ProgressChart,
} from ".";
import { ActivityCard, } from "./kinerja-divisi/activity-card";
import { DivisionList } from "./kinerja-divisi/division-list";
import { DocumentChart } from "./kinerja-divisi/document-chart";
import { ProgressChart } from "./kinerja-divisi/progress-chart";
import { DiscussionPanel } from "./kinerja-divisi/discussion-panel";
import { EventCard } from "./kinerja-divisi/event-card";
import { ArchiveCard } from "./kinerja-divisi/archive-card";
// Data for program kegiatan (Section 1)
const programKegiatanData = [

2
src/components/pengaduan-layanan-publik.tsx
View File

@@ -840,4 +840,4 @@ const PengaduanLayananPublik = () => {
);
};
export default PengaduanLayananPublik;
export default PengaduanLayananPublik;

28
src/components/sidebar.tsx
View File

@@ -3,6 +3,7 @@ import {
Box,
Collapse,
Group,
Image,
Input,
NavLink as MantineNavLink,
Stack,
@@ -60,30 +61,7 @@ export function Sidebar({ className }: SidebarProps) {
return (
<Box className={className}>
{/* Logo */}
<Box
p="md"
style={{ borderBottom: "1px solid var(--mantine-color-gray-3)" }}
>
<Group gap="xs">
<Badge
color="dark"
variant="filled"
size="xl"
radius="md"
py="xs"
px="md"
style={{ fontSize: "1.5rem", fontWeight: "bold" }}
>
DESA
</Badge>
<Badge color="green" variant="filled" size="md" radius="md">
+
</Badge>
</Group>
<Text size="xs" c="dimmed" mt="xs">
Digitalisasi Desa Transparansi Kerja
</Text>
</Box>
<Image src="/logo-desa-plus.png" alt="Logo" />
{/* Search */}
<Box p="md">
@@ -204,4 +182,4 @@ export function Sidebar({ className }: SidebarProps) {
</Stack>
</Box>
);
}
}

2
src/components/sosial-page.tsx
View File

@@ -462,4 +462,4 @@ const SosialPage = () => {
);
};
export default SosialPage;
export default SosialPage;