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

Fix New UI Kinerja Divisi

Browse Source
This commit is contained in:
nico
2026-03-17 21:19:10 +07:00
parent 97e6caa332
commit 2d68d4dc06
8 changed files with 205 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import { Grid, Stack } from "@mantine/core";
import { ActivityCard, } from "./kinerja-divisi/activity-card";
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";
@@ -14,25 +14,25 @@ const programKegiatanData = [
title: "Rakor 2025",
date: "3 Juli 2025",
progress: 90,
status: "selesai" as const,
status: "Selesai" as const,
},
{
title: "Pemutakhiran Indeks Desa",
date: "3 Juli 2025",
progress: 85,
status: "selesai" as const,
status: "Selesai" as const,
},
{
title: "Mengurus Akta Cerai Warga",
date: "3 Juli 2025",
progress: 80,
status: "selesai" as const,
status: "Selesai" as const,
},
{
title: "Pasek 7 Desa Adat",
date: "3 Juli 2025",
progress: 92,
status: "selesai" as const,
status: "Selesai" as const,
},
];

104
src/components/kinerja-divisi/activity-card.tsx
View File

@@ -1,17 +1,10 @@
import {
Box,
Card,
Group,
Progress,
Text,
useMantineColorScheme,
} from "@mantine/core";
import { Card, Text, Progress, Group, Box } from "@mantine/core";
interface ActivityCardProps {
title: string;
date: string;
progress: number;
status: "selesai" | "berjalan" | "tertunda";
status: "Selesai" | "Berjalan" | "Tertunda";
}
export function ActivityCard({
@@ -20,16 +13,13 @@ export function ActivityCard({
progress,
status,
}: ActivityCardProps) {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
const getStatusColor = (s: string) => {
switch (s) {
case "selesai":
const getStatusColor = () => {
switch (status) {
case "Selesai":
return "#22C55E";
case "berjalan":
case "Berjalan":
return "#3B82F6";
case "tertunda":
case "Tertunda":
return "#EF4444";
default:
return "#9CA3AF";
@@ -38,58 +28,62 @@ export function ActivityCard({
return (
<Card
p="md"
radius="xl"
withBorder
bg={dark ? "#1E293B" : "white"}
p={0}
withBorder={false}
style={{
borderColor: dark ? "#334155" : "white",
boxShadow: dark
? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
backgroundColor: "#F3F4F6",
overflow: "hidden",
}}
>
{/* 🔵 HEADER */}
<Box
style={{
borderLeft: `4px solid #3B82F6`,
paddingLeft: 12,
marginBottom: 12,
backgroundColor: "#1E3A5F",
padding: "16px",
textAlign: "center",
}}
>
<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"}>
<Text c="white" fw={700} size="md">
{title}
</Text>
</Box>
<Group justify="space-between" mb="xs">
<Text size="xs" c="dimmed">
{date}
</Text>
<Box
style={{
backgroundColor: getStatusColor(status),
color: "white",
padding: "2px 8px",
borderRadius: 4,
fontSize: 11,
fontWeight: 600,
{/* CONTENT */}
<Box p="md">
{/* PROGRESS */}
<Progress
value={progress}
radius="xl"
size="lg"
color="orange"
styles={{
root: {
height: 16,
},
}}
>
{status.toUpperCase()}
</Box>
</Group>
/>
<Progress
value={progress}
size="sm"
radius="xl"
color={progress === 100 ? "green" : "yellow"}
animated={progress < 100}
/>
{/* FOOTER */}
<Group justify="space-between" mt="md">
<Text size="sm" fw={500}>
{date}
</Text>
<Text size="xs" c="dimmed" mt="xs" ta="right">
{progress}%
</Text>
<Box
style={{
backgroundColor: getStatusColor(),
color: "white",
padding: "4px 12px",
borderRadius: 999,
fontSize: 12,
fontWeight: 600,
}}
>
{status}
</Box>
</Group>
</Box>
</Card>
);
}
}

1
src/components/kinerja-divisi/archive-card.tsx
View File

@@ -28,6 +28,7 @@ export function ArchiveCard({ item, onClick }: ArchiveCardProps) {
cursor: "pointer",
transition: "transform 0.2s, box-shadow 0.2s",
}}
h="100%"
onClick={onClick}
>
<Group gap="md">

1
src/components/kinerja-divisi/discussion-panel.tsx
View File

@@ -48,6 +48,7 @@ export function DiscussionPanel() {
? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
}}
h="100%"
>
<Group gap="xs" mb="md">
<MessageCircle size={20} color={dark ? "#E2E8F0" : "#1E3A5F"} />

11
src/components/kinerja-divisi/document-chart.tsx
View File

@@ -3,6 +3,7 @@ import {
Bar,
BarChart,
CartesianGrid,
Cell,
ResponsiveContainer,
Tooltip,
XAxis,
@@ -10,8 +11,8 @@ import {
} from "recharts";
const documentData = [
{ name: "Gambar", value: 300 },
{ name: "Dokumen", value: 310 },
{ name: "Gambar", jumlah: 300, color: "#FACC15" },
{ name: "Dokumen", jumlah: 310, color: "#22C55E" },
];
export function DocumentChart() {
@@ -61,7 +62,11 @@ export function DocumentChart() {
}}
labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
/>
<Bar dataKey="value" fill="#3B82F6" radius={[4, 4, 0, 0]} />
<Bar dataKey="jumlah" radius={[4, 4, 0, 0]}>
{documentData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>
</Card>

1
src/components/kinerja-divisi/event-card.tsx
View File

@@ -33,6 +33,7 @@ export function EventCard({ agendas = [] }: EventCardProps) {
? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
}}
h="100%"
>
<Group gap="xs" mb="md">
<Calendar size={20} color={dark ? "#E2E8F0" : "#1E3A5F"} />

2
src/components/kinerja-divisi/progress-chart.tsx
View File

@@ -10,7 +10,7 @@ import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
const progressData = [
{ name: "Selesai", value: 83.33, color: "#22C55E" },
{ name: "Dikerjakan", value: 16.67, color: "#FACC15" },
{ name: "Dikerjakan", value: 16.67, color: "#F59E0B" },
{ name: "Segera Dikerjakan", value: 0, color: "#3B82F6" },
{ name: "Dibatalkan", value: 0, color: "#EF4444" },
];