Claude

{

  "prompt": "# Prompt Pengembangan Web App Manajemen Arsip Berkas Kantor\n\n## Peran Anda\nAnda adalah arsitek perangkat lunak senior, full-stack engineer, dan UI/UX designer yang berpengalaman membangun aplikasi manajemen dokumen berskala perusahaan. Tugas Anda adalah merancang dan menjabarkan implementasi sistem berdasarkan spesifikasi berikut.\n\nGunakan bahasa Indonesia teknis yang jelas, ringkas, dan terstruktur. Jika ada asumsi yang Anda buat, jelaskan secara eksplisit di bagian awal jawaban.\n\n## Tujuan\nBangun sebuah web application modern untuk sistem manajemen arsip dan berkas kantor dengan UI/UX elegan, profesional, dan mudah digunakan. Aplikasi harus clean, minimalis, namun tetap kaya fitur, dengan fokus pada kemudahan pencarian, pengelolaan dokumen, kolaborasi tim, dan keamanan.\n\n## Target Pengguna\n- Staf administrasi kantor\n- Manajer atau pimpinan yang sering mengakses dokumen penting\n- Tim legal atau keuangan yang membutuhkan jejak audit dan keamanan tinggi\n\n## Alur Utama Pengguna (high-level)\n1. Login dan masuk ke dashboard analitik.\n2. Mengunggah, mengelola, dan mengategorikan berkas.\n3. Mencari dan membuka dokumen dengan cepat.\n4. Berkolaborasi melalui komentar, tugas, dan approval workflow.\n5. Mengakses laporan dan analitik penggunaan dokumen.\n6. Mengatur keamanan, role, dan hak akses.\n\n## Spesifikasi Desain UI/UX\n- Design style: modern, clean, minimalist dengan sentuhan glassmorphism atau neumorphism (tidak berlebihan agar tetap profesional).\n- Palet warna: kombinasi warna profesional (navy blue, putih, abu muda) dengan accent color yang kontras namun elegan (misalnya teal atau orange).\n- Tipografi: font sans-serif yang mudah dibaca dan profesional, seperti Inter, Poppins, atau Roboto, sertakan rekomendasi pairing ukuran dan weight untuk heading, body, dan label.\n- Layout: fully responsive untuk desktop, tablet, dan mobile dengan grid system yang konsisten.\n- Animasi: smooth transitions dan micro-interactions (hover, klik, drag and drop, loading) yang halus dan tidak mengganggu kinerja.\n- Dashboard: menampilkan ringkasan metrik kunci dengan cards, charts, dan infografik yang ringkas dan informatif.\n\n## Fitur Utama\n\n### 1. Dashboard Analitik\n- Visualisasi data berkas (bar atau line charts, pie charts, heatmaps bila relevan).\n- Statistik hampir real-time: total dokumen, dokumen baru dalam periode tertentu, kategori terbanyak, dokumen yang paling sering diakses.\n- Activity timeline: recent uploads, edits, approvals, shares.\n- Storage usage meter dengan breakdown per kategori, tipe file, dan pengguna.\n- Performance metrics dasar: jumlah request, aktivitas user, antrian proses berat seperti OCR.\n\n### 2. Manajemen Berkas\n- Upload multiple files dengan drag and drop area, progress bar, dan status per file.\n- Dukungan tipe file umum: PDF, gambar (JPG atau PNG), dokumen Office (Word, Excel, PowerPoint), dan file teks.\n- Automatic file categorization: modul berbasis AI atau aturan sederhana; jelaskan pendekatan implementasinya dan bagaimana dapat dikembangkan.\n- Advanced search dengan filter: rentang tanggal, tipe dokumen, ukuran, tags, creator, status (draft, approved, archived).\n- Preview dokumen tanpa download: PDF viewer, image viewer, dan integrasi viewer dokumen Office berbasis web.\n- Version control: riwayat versi, metadata tiap versi, kemampuan rollback ke versi sebelumnya.\n- Bulk operations: move, delete, archive, tambah atau hapus tag, ubah kategori.\n\n### 3. Sistem Organisasi\n- Folder hierarchy dengan nesting tak terbatas, tampilan tree yang collapsible.\n- Smart folders dengan rules-based filtering, misalnya semua dokumen dengan tag tertentu, milik departemen tertentu, atau dibuat dalam 30 hari terakhir.\n- Custom tags dan metadata management: membuat, mengedit, menghapus tag, serta field metadata kustom per organisasi.\n- Color-coded categories atau labels untuk memudahkan visual scanning.\n- Quick access: recent files, favorites atau bookmarks, dan pinned folders.\n\n### 4. Analytics dan Reporting\n- Document lifecycle analytics: dibuat, di-review, disetujui, diarsipkan, kedaluwarsa.\n- User engagement metrics: dokumen paling sering diakses, user paling aktif, jam sibuk.\n- Storage optimization suggestions: dokumen besar yang jarang diakses, kandidat arsip atau penghapusan.\n- Automated reports bulanan atau kuartalan yang dapat dijadwalkan dan dikirim via email.\n- Export laporan ke PDF dan Excel atau CSV.\n- Predictive analytics sederhana untuk kebutuhan storage berdasarkan tren penggunaan.\n\n### 5. Collaboration Features\n- Real-time document sharing dengan pengaturan izin: view, comment, edit.\n- Comment dan annotation system pada dokumen; bila secara teknis sulit untuk tipe file tertentu, jelaskan batasannya.\n- Task assignment terkait dokumen, misalnya review, approval, atau melengkapi data, dengan due date dan status.\n- Approval workflow management: definisi alur persetujuan single-step atau multi-step, status pending, approved, atau rejected, dan jejak keputusan.\n- Team workspace dengan permissions, misalnya per departemen atau proyek, yang mengatur siapa yang bisa melihat atau mengedit folder tertentu.\n\n### 6. Security dan Compliance\n- Autentikasi aman, misalnya berbasis JWT atau OAuth2, dengan opsi two-factor authentication; jelaskan desain dan alur dasarnya.\n- Enkripsi untuk penyimpanan dan transfer data sensitif; jelaskan opsi implementasi di sisi server dan transport layer.\n- Audit trail lengkap: log setiap aksi penting seperti view, download, edit, delete, share, dan login.\n- Role-based access control atau RBAC yang fleksibel, mencakup role global dan hak akses per folder atau proyek.\n- Watermark dinamis untuk dokumen sensitif yang memuat nama user dan timestamp.\n- Automatic backup scheduling dan strategi restore.\n- Kepatuhan dasar terhadap regulasi privasi seperti GDPR: data minimization, hak akses data, penghapusan data, dan logging consent bila relevan.\n\n### 7. Smart Features\n- OCR untuk scanning dan digitalisasi dokumen fisik, termasuk pipeline proses, antrian, dan batas ukuran file.\n- Auto-tagging berbasis AI berdasarkan isi dokumen dan metadata; jelaskan pendekatan sederhana yang bisa dikembangkan.\n- Smart search dengan natural language processing, misalnya pencarian kontrak yang akan kedaluwarsa bulan ini.\n- Duplicate detection berdasarkan hash file, ukuran, dan kemiripan konten.\n- Document expiry reminders: notifikasi sebelum dokumen kedaluwarsa atau butuh review.\n- Integrasi dengan kalender eksternal atau internal untuk deadline dan due date task.\n\n## Teknologi yang Disarankan\nJelaskan dan pilih satu kombinasi stack utama, lalu sebutkan alternatifnya secara singkat.\n\n- Frontend: salah satu dari React, Vue.js, atau Angular. Gunakan Tailwind CSS atau Material UI atau library komponen modern lain.\n- Backend: Node.js dengan Express atau NestJS, atau Python dengan Django atau FastAPI, atau Laravel. Pilih satu utama dan jelaskan alasan pemilihan.\n- Database: PostgreSQL sebagai pilihan utama, atau MongoDB bila ada kebutuhan dokumen fleksibel; jelaskan skenario penggunaannya.\n- Storage: AWS S3 atau Google Cloud Storage untuk file binary.\n- Search dan analytics: Elasticsearch atau OpenSearch untuk advanced search dan filtering.\n- Real-time: WebSocket, misalnya dengan Socket.IO, atau solusi real-time lain seperti Pusher atau Firebase, untuk live updates.\n- Deployment: jelaskan opsi deployment menggunakan Docker, pengelolaan environment staging dan production, serta integrasi CI atau CD dasar.\n\n## Kebutuhan Antarmuka Pengguna\n- Sidebar navigasi intuitif dengan menu yang bisa collapse atau expand dan icon yang jelas.\n- Global search bar yang selalu terlihat di top bar dengan shortcut keyboard, misalnya Ctrl atau Cmd ditambah K.\n- Dark mode toggle dengan penyimpanan preferensi per user.\n- Dashboard widgets yang bisa dikustomisasi, misalnya menambah, menghapus, atau mengubah posisi beberapa kartu.\n- Keyboard shortcuts untuk power users untuk navigasi, pencarian, dan upload.\n- Accessibility compliance minimal WCAG 2.1 AA: kontras warna, focus state yang jelas, atribut ARIA, dan dukungan screen reader.\n- Loading dan empty states yang informatif dan estetis, misalnya skeleton loading dan ilustrasi ringan.\n\n## Responsivitas dan Mobile\n- Tampilan mobile yang terasa seperti native dengan bottom navigation bila relevan dan komponen yang besar dan mudah disentuh.\n- Touch-optimized interactions seperti swipe untuk aksi tertentu dan long-press options di mobile bila masuk akal.\n- Mode offline terbatas dengan kemampuan sinkronisasi ketika online kembali; jelaskan pendekatan teknis, misalnya PWA dengan IndexedDB.\n- Web push notifications untuk update penting seperti task baru, approval, atau dokumen yang akan kedaluwarsa.\n\n## Target Kinerja\n- Waktu load halaman utama kurang dari 2 detik pada koneksi jaringan yang wajar.\n- Waktu respon pencarian kurang dari 500 milidetik untuk query umum.\n- Indikator progress upload file yang jelas, baik per file maupun total.\n- Pagination atau infinite scroll dengan lazy loading untuk daftar dokumen besar.\n- Caching strategy menggunakan HTTP caching, CDN, dan client-side caching untuk file dan data yang sering diakses.\n\n## Output yang Diharapkan\nSusun jawaban secara terstruktur dengan urutan berikut:\n\n1. Ringkasan arsitektur sistem: deskripsi komponen utama frontend, backend, database, storage, dan layanan pendukung.\n2. Pemilihan stack teknologi dan alasan masing-masing.\n3. Desain database: schema utama, tabel atau koleksi, dan relasi penting.\n4. Desain API: daftar endpoint utama dengan method, path, parameter kunci, dan kebutuhan otorisasi.\n5. Desain modul frontend:\n   - Struktur halaman dan information architecture atau sitemap.\n   - Daftar komponen UI kunci dengan deskripsi singkat.\n   - Penjelasan alur UX untuk use case utama seperti upload, pencarian, dan approval.\n6. Desain keamanan, logging, dan audit trail.\n7. Strategi kinerja, skalabilitas, dan reliability termasuk backup dan recovery.\n8. Contoh kode penting:\n   - Contoh schema atau model database.\n   - Contoh endpoint API untuk membuat dan mencari dokumen.\n   - Contoh komponen frontend utama, misalnya komponen upload dan daftar dokumen.\n9. Rekomendasi lanjutan dan kemungkinan pengembangan fitur di masa depan.\n\nPastikan solusi berfokus pada user experience yang sangat baik, visual design yang memukau namun tetap profesional, serta fungsi yang aman dan andal."

}