Progress Tampilan UI Dashboard Desa Plus NOC
This commit is contained in:
302
PromptDashboard.md
Normal file
302
PromptDashboard.md
Normal file
@@ -0,0 +1,302 @@
|
||||
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
|
||||
Reference in New Issue
Block a user