From 2d68d4dc06901b761ad6ee13947c5d357ba75494 Mon Sep 17 00:00:00 2001 From: nico Date: Tue, 17 Mar 2026 21:19:10 +0700 Subject: [PATCH] Fix New UI Kinerja Divisi --- Kinerja-Divisi-New.md | 139 ++++++++++++++++++ src/components/kinerja-divisi.tsx | 10 +- .../kinerja-divisi/activity-card.tsx | 104 ++++++------- .../kinerja-divisi/archive-card.tsx | 1 + .../kinerja-divisi/discussion-panel.tsx | 1 + .../kinerja-divisi/document-chart.tsx | 11 +- src/components/kinerja-divisi/event-card.tsx | 1 + .../kinerja-divisi/progress-chart.tsx | 2 +- 8 files changed, 205 insertions(+), 64 deletions(-) create mode 100644 Kinerja-Divisi-New.md diff --git a/Kinerja-Divisi-New.md b/Kinerja-Divisi-New.md new file mode 100644 index 0000000..1b9fe94 --- /dev/null +++ b/Kinerja-Divisi-New.md @@ -0,0 +1,139 @@ +Create a modern admin dashboard UI for a village management system using React 19 + Vite + TailwindCSS + Mantine components + Recharts. + +Design style: +- Clean, soft UI with rounded corners (2xl) +- Light gray background (#f5f6f8) +- Card-based layout with subtle shadow +- Smooth spacing and consistent padding +- Professional government-style but still modern +- Use Inter or system font +- Primary color: dark blue +- Accent color: orange for progress +- Success color: green +- Use Mantine components where possible + +Layout: +- Responsive grid layout (desktop-first) +- 4 summary cards on top (horizontal) +- 2 columns main content below +- Left sidebar for division list +- Right content for charts and activity + +--- + +## 🔹 TOP CARDS (4 ITEMS) +Each card contains: +- Title (e.g: "Rakor 2025") +- Progress bar (orange) +- Date (small text) +- Status badge "Selesai" (green) + +Use: +- Mantine Card +- Mantine Progress +- Mantine Badge + +--- + +## 🔹 LEFT PANEL - "Divisi teraktif" +Vertical list of divisions: +- Each item is clickable +- Show division name + number of activities +- Rounded container with hover effect +- Chevron icon on right + +Example items: +- Kesejahteraan (37 kegiatan) +- Pemerintahan (26 kegiatan) +- Keuangan (17 kegiatan) +- etc + +Use: +- Scrollable container +- Soft border + hover highlight + +--- + +## 🔹 CENTER - BAR CHART (Jumlah Dokumen) +- Use Recharts +- Two bars: + - Gambar + - Dokumen +- Color: + - Yellow/orange + - Green +- Show Y axis scale (0–400) + +--- + +## 🔹 RIGHT - PIE CHART (Progres Kegiatan) +- Use Recharts PieChart +- Segments: + - Selesai (green ~83%) + - Dikerjakan (orange ~16%) + - Segera dikerjakan (blue) + - Dibatalkan (red) +- Include legend below + +--- + +## 🔹 BOTTOM LEFT - Diskusi Panel +- List of discussion messages +- Each item: + - Title + - Sender name + - Date +- Styled like notification cards +- Compact and clean + +--- + +## 🔹 BOTTOM RIGHT - "Acara Hari Ini" +- Empty state +- Show text: "Tidak ada acara hari ini" +- Centered, muted text + +--- + +## ⚙️ TECH REQUIREMENTS + +- Use React functional components +- Use TanStack Router (file-based or route config) +- Use Mantine for UI components +- Use Tailwind for layout and spacing +- Use Recharts for charts +- State management: Valtio (simple global state) +- Date formatting: dayjs +- Icons: lucide-react + +--- + +## 📁 COMPONENT STRUCTURE + +- components/ + - DashboardCard.tsx + - DivisionList.tsx + - BarChartCard.tsx + - PieChartCard.tsx + - DiscussionList.tsx + - EmptyState.tsx + +- routes/ + - dashboard.tsx + +--- + +## ✨ EXTRA (IMPORTANT FOR VIBE CODING) + +- Add subtle hover animations (scale 1.02) +- Smooth transitions (150–200ms) +- Keep spacing consistent (gap-4 / gap-6) +- Avoid clutter, prioritize readability +- Make it feel "calm and productive" + +--- + +Output: +- Full React component code (modular, not monolithic) +- Clean, readable, production-ready +- No unnecessary comments \ No newline at end of file diff --git a/src/components/kinerja-divisi.tsx b/src/components/kinerja-divisi.tsx index 6d11190..ff480a5 100644 --- a/src/components/kinerja-divisi.tsx +++ b/src/components/kinerja-divisi.tsx @@ -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, }, ]; diff --git a/src/components/kinerja-divisi/activity-card.tsx b/src/components/kinerja-divisi/activity-card.tsx index 94d987a..235793c 100644 --- a/src/components/kinerja-divisi/activity-card.tsx +++ b/src/components/kinerja-divisi/activity-card.tsx @@ -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 ( + {/* 🔵 HEADER */} - + {title} - - - {date} - - + {/* PROGRESS */} + - {status.toUpperCase()} - - + /> - + {/* FOOTER */} + + + {date} + - - {progress}% - + + {status} + + + ); -} +} \ No newline at end of file diff --git a/src/components/kinerja-divisi/archive-card.tsx b/src/components/kinerja-divisi/archive-card.tsx index ca5f5bd..2a4770f 100644 --- a/src/components/kinerja-divisi/archive-card.tsx +++ b/src/components/kinerja-divisi/archive-card.tsx @@ -28,6 +28,7 @@ export function ArchiveCard({ item, onClick }: ArchiveCardProps) { cursor: "pointer", transition: "transform 0.2s, box-shadow 0.2s", }} + h="100%" onClick={onClick} > diff --git a/src/components/kinerja-divisi/discussion-panel.tsx b/src/components/kinerja-divisi/discussion-panel.tsx index 28b48b3..1006923 100644 --- a/src/components/kinerja-divisi/discussion-panel.tsx +++ b/src/components/kinerja-divisi/discussion-panel.tsx @@ -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%" > diff --git a/src/components/kinerja-divisi/document-chart.tsx b/src/components/kinerja-divisi/document-chart.tsx index fc83e9c..64cf8cf 100644 --- a/src/components/kinerja-divisi/document-chart.tsx +++ b/src/components/kinerja-divisi/document-chart.tsx @@ -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" }} /> - + + {documentData.map((entry, index) => ( + + ))} + diff --git a/src/components/kinerja-divisi/event-card.tsx b/src/components/kinerja-divisi/event-card.tsx index dc771d2..5dbba56 100644 --- a/src/components/kinerja-divisi/event-card.tsx +++ b/src/components/kinerja-divisi/event-card.tsx @@ -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%" > diff --git a/src/components/kinerja-divisi/progress-chart.tsx b/src/components/kinerja-divisi/progress-chart.tsx index e014f6b..cc1f51a 100644 --- a/src/components/kinerja-divisi/progress-chart.tsx +++ b/src/components/kinerja-divisi/progress-chart.tsx @@ -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" }, ];