diff --git a/.gitignore b/.gitignore index 3e6f1b5..4052a6b 100644 --- a/.gitignore +++ b/.gitignore @@ -37,6 +37,9 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json # Dashboard-MD Dashboard-MD +# md +*.md + # Playwright artifacts test-results/ playwright-report/ diff --git a/Kinerja-Divisi-New.md b/Kinerja-Divisi-New.md deleted file mode 100644 index 1b9fe94..0000000 --- a/Kinerja-Divisi-New.md +++ /dev/null @@ -1,139 +0,0 @@ -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/PromptDashboard.md b/PromptDashboard.md deleted file mode 100644 index ac3edbe..0000000 --- a/PromptDashboard.md +++ /dev/null @@ -1,302 +0,0 @@ -Buat halaman dashboard admin modern untuk sistem pemerintahan desa bernama **Darmasaba Dashboard NOC**. - -Gunakan stack berikut: - -Frontend: - -* React 19 -* Bun runtime -* Vite -* TailwindCSS -* Mantine UI -* Mantine Charts atau Recharts -* Tabler Icons -* TanStack Router -* Dayjs - -UI harus modular dengan reusable components. - -Gunakan **TailwindCSS sebagai styling utama** dengan warna dari konfigurasi berikut: - -Primary: -darmasaba-navy (#1E3A5F) - -Secondary: -darmasaba-blue (#3B82F6) - -Success: -#22C55E - -Warning: -#FACC15 - -Danger: -#EF4444 - -Background: -#F5F8FB - -Dashboard harus memiliki **Light Mode dan Dark Mode**. - -Dark Mode Color Rules: -background: #0F172A -card: #1E293B -border: #334155 -text: #E2E8F0 - -Card style: - -* rounded-xl -* soft shadow -* padding besar -* border subtle -* smooth hover animation - -Gunakan grid layout responsive. - ---- - -SECTION 1 — PROGRAM KEGIATAN - -Buat 4 card horizontal di bagian atas yang menampilkan kegiatan desa. - -Setiap card memiliki: - -* header biru -* progress bar kegiatan -* tanggal kegiatan -* badge status - -Data card: - -1. - -Judul: Rakor 2025 -Tanggal: 3 Juli 2025 -Progress: 90% -Status: selesai - -2. - -Judul: Pemutakhiran Indeks Desa -Tanggal: 3 Juli 2025 -Progress: 85% -Status: selesai - -3. - -Judul: Mengurus Akta Cerai Warga -Tanggal: 3 Juli 2025 -Progress: 80% -Status: selesai - -4. - -Judul: Pasek 7 Desa Adat -Tanggal: 3 Juli 2025 -Progress: 92% -Status: selesai - -Progress bar: - -* rounded -* warna warning -* animasi smooth - -Status badge: - -* success color - ---- - -SECTION 2 — GRID DASHBOARD - -Layout: - -3 column grid. - -Left column (sidebar style): -Divisi Teraktif - -List item card dengan arrow icon. - -Data: - -Kesejahteraan — 37 kegiatan -Pemerintahan — 26 kegiatan -Keuangan — 17 kegiatan -Sekretaris Desa — 15 kegiatan -Tata Usaha TK — 14 kegiatan -Perangkat Kewilayahan — 12 kegiatan -Pelayanan — 10 kegiatan -Perencanaan — 9 kegiatan -Tata Usaha & Umum — 7 kegiatan - -Setiap item: - -* rounded -* hover effect -* arrow icon kanan - ---- - -Middle column: - -Jumlah Dokumen - -Gunakan **Bar Chart**. - -Kategori: - -* Gambar -* Dokumen - -Nilai: - -* Gambar: 300 -* Dokumen: 310 - -Gunakan: -Recharts atau Mantine Charts. - ---- - -Right column: - -Progres Kegiatan - -Gunakan **Pie Chart**. - -Data: - -Selesai — 83.33% -Dikerjakan — 16.67% -Segera Dikerjakan — 0% -Dibatalkan — 0% - -Legend harus berwarna. - ---- - -SECTION 3 — DISCUSSION PANEL - -Judul: Diskusi - -Tampilkan list diskusi internal staf. - -Item card memiliki: - -* icon chat -* judul pesan -* nama pengirim -* tanggal - -Contoh data: - -"Kepada Pelayanan, mohon di cek..." -Pengirim: I.B Surya Prabhawa Manu -Tanggal: 12 Apr 2025 - -"Kepada staf perencanaan @suar..." -Pengirim: Ni Nyoman Yuliani -Tanggal: 14 Jun 2025 - -"ijin atau mohon kepada KBD sar..." -Pengirim: Ni Wayan Martini -Tanggal: 12 Apr 2025 - ---- - -SECTION 4 — ACARA HARI INI - -Card sederhana. - -Jika tidak ada acara tampilkan: - -"Tidak ada acara hari ini" - ---- - -SECTION 5 — ARSIP DIGITAL PERANGKAT DESA - -Grid 2 column. - -Menu arsip: - -Surat Keputusan -Dokumentasi -Laporan Keuangan -Notulensi Rapat - -Setiap item berupa card clickable dengan: - -* icon dokumen -* border -* hover effect - ---- - -DESIGN STYLE - -Gunakan gaya: - -Modern Government Dashboard -Clean UI -Soft shadow -Rounded-xl -Spacing besar -Minimalistic - ---- - -RESPONSIVE RULES - -Desktop: -12 column grid - -Tablet: -6 column grid - -Mobile: -single column stack - ---- - -COMPONENT STRUCTURE - -src/components/dashboard - -activity-card.tsx -division-list.tsx -document-chart.tsx -progress-chart.tsx -discussion-panel.tsx -event-card.tsx -archive-card.tsx - -src/pages - -dashboard.tsx - ---- - -CODE QUALITY - -Gunakan: - -* React hooks -* reusable components -* Mantine components jika perlu -* Tailwind utility classes -* dark mode support -* responsive layout -* clean TypeScript - ---- - -Output: - -* Halaman dashboard lengkap -* Semua komponen reusable -* Chart sudah bekerja -* Layout identik dengan desain dashboard modern pemerintahan diff --git a/public/light-mode.png b/public/light-mode.png new file mode 100644 index 0000000..90aef6d Binary files /dev/null and b/public/light-mode.png differ diff --git a/public/white.png b/public/white.png new file mode 100644 index 0000000..bafd884 Binary files /dev/null and b/public/white.png differ diff --git a/src/components/jenna-analytic.tsx b/src/components/jenna-analytic.tsx index 063a56c..7c04b84 100644 --- a/src/components/jenna-analytic.tsx +++ b/src/components/jenna-analytic.tsx @@ -1,123 +1,79 @@ -import { BarChart } from "@mantine/charts"; import { Badge, Box, - Button, Card, Grid, + GridCol, Group, Progress, Stack, Text, + ThemeIcon, Title, useMantineColorScheme, } from "@mantine/core"; -import React from "react"; +import { + MessageCircle, + CheckCircle, + AlertTriangle, + Clock, + TrendingUp, +} from "lucide-react"; +import { + Bar, + BarChart, + CartesianGrid, + ResponsiveContainer, + Tooltip, + XAxis, + YAxis, +} from "recharts"; -// Sample Data +// KPI Data const kpiData = [ { id: 1, title: "Interaksi Hari Ini", value: "61", - delta: "+15% dari kemarin", - deltaType: "positive", - icon: ( - - - - ), + subtitle: "+15% dari kemarin", + trend: "positive", + icon: MessageCircle, }, { id: 2, title: "Jawaban Otomatis", value: "87%", - sub: "53 dari 61 interaksi", - icon: ( - - - - ), + subtitle: "53 dari 61 interaksi", + icon: CheckCircle, }, { id: 3, title: "Belum Ditindak", value: "8", - sub: "Perlu respon manual", - deltaType: "negative", - icon: ( - - - - ), + subtitle: "Perlu respon manual", + icon: AlertTriangle, }, { id: 4, title: "Waktu Respon", value: "2.3 sec", - sub: "Rata-rata", - icon: ( - - - - ), + subtitle: "Rata-rata", + icon: Clock, }, ]; +// Chart Data const chartData = [ - { day: "Sen", total: 100 }, - { day: "Sel", total: 120 }, - { day: "Rab", total: 90 }, - { day: "Kam", total: 150 }, - { day: "Jum", total: 110 }, - { day: "Sab", total: 80 }, - { day: "Min", total: 130 }, + { day: "Sen", total: 45 }, + { day: "Sel", total: 62 }, + { day: "Rab", total: 38 }, + { day: "Kam", total: 75 }, + { day: "Jum", total: 58 }, + { day: "Sab", total: 32 }, + { day: "Min", total: 51 }, ]; +// Top Topics Data const topTopics = [ { topic: "Cara mengurus KTP", count: 89 }, { topic: "Syarat Kartu Keluarga", count: 76 }, @@ -126,6 +82,7 @@ const topTopics = [ { topic: "Info program bansos", count: 48 }, ]; +// Busy Hours Data const busyHours = [ { period: "Pagi (08–12)", percentage: 30 }, { period: "Siang (12–16)", percentage: 40 }, @@ -138,146 +95,206 @@ const JennaAnalytic = () => { const dark = colorScheme === "dark"; return ( - - - {/* KPI Cards */} - - {kpiData.map((kpi) => ( - - - - - {kpi.title} - - {React.cloneElement(kpi.icon, { - className: "h-6 w-6", // Keeping classes for now, can be replaced by Mantine Icon component if available or styled with sx prop - color: "var(--mantine-color-dimmed)", // Set color via prop - })} - - - {kpi.value} - - {kpi.delta && ( - - {kpi.delta} - - )} - {kpi.sub && ( - - {kpi.sub} - - )} - - - ))} - - - - - Interaksi Chatbot - - - - - {/* Charts and Lists Section */} - - {/* Grafik Interaksi Chatbot (now Bar Chart) */} - + + {/* TOP SECTION - 4 STAT CARDS */} + + {kpiData.map((item) => ( + - - Jam Tersibuk - - - {busyHours.map((item, index) => ( - - {item.period} - - - - {item.percentage}% - - - - ))} - + + + + {item.title} + + + {item.value} + + + {item.trend === "positive" && ( + + )} + + {item.subtitle} + + + + + + + + ))} + - {/* Topik Pertanyaan Terbanyak & Jam Tersibuk */} - - - {/* Topik Pertanyaan Terbanyak */} - - - Topik Pertanyaan Terbanyak - - - {topTopics.map((item, index) => ( - + + + Interaksi Chatbot + + + + + + + + + + + + + + {/* BOTTOM SECTION - 2 COLUMNS */} + + {/* LEFT: TOPIK PERTANYAAN TERBANYAK */} + + + + Topik Pertanyaan Terbanyak + + + {topTopics.map((item, index) => ( + + + + {item.topic} + + - - {item.topic} - - - {item.count}x - - - ))} - - - - {/* Jam Tersibuk */} + {item.count}x + + + + ))} - - - - + + + + {/* RIGHT: JAM TERSIBUK */} + + + + Jam Tersibuk + + + {busyHours.map((item, index) => ( + + + + {item.period} + + + {item.percentage}% + + + + + ))} + + + + + ); }; + export default JennaAnalytic; diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx index 6d79647..7302781 100644 --- a/src/components/sidebar.tsx +++ b/src/components/sidebar.tsx @@ -61,7 +61,10 @@ export function Sidebar({ className }: SidebarProps) { return ( {/* Logo */} - Logo + Logo {/* Search */} diff --git a/src/routes/jenna-analytic.tsx b/src/routes/jenna-analytic.tsx index 14da69f..2699fbe 100644 --- a/src/routes/jenna-analytic.tsx +++ b/src/routes/jenna-analytic.tsx @@ -1,9 +1,51 @@ +import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core"; +import { useDisclosure } from "@mantine/hooks"; import { createFileRoute } from "@tanstack/react-router"; +import { Header } from "@/components/header"; +import JennaAnalytic from "@/components/jenna-analytic"; +import { Sidebar } from "@/components/sidebar"; export const Route = createFileRoute("/jenna-analytic")({ - component: RouteComponent, + component: JennaAnalyticPage, }); -function RouteComponent() { - return
Hello "/jenna-analytic"!
; +function JennaAnalyticPage() { + const [opened, { toggle }] = useDisclosure(); + const { colorScheme } = useMantineColorScheme(); + const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E"; + const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white"; + const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff"; + + return ( + + + + +
+ + + + +
+ +
+ + + + + + + ); }