# Dokumen Acuan Proyek & Master Blueprint - SI-PERKASA BINMAS (NEXT) ## Status Dokumen Dokumen ini merupakan **Cetak Biru Utama (Master Blueprint)** proyek. Dokumen ini bukan sekadar garis besar, melainkan spesifikasi teknis dan operasional yang mengikat seluruh fase pengembangan. Tidak ada satu baris kode pun yang ditulis di luar ketentuan dokumen ini. --- # BAGIAN I: VISI, BISNIS & FILOSOFI ## 1. Visi Proyek Membangun **Sistem Informasi Digitalisasi Perwabku** yang tangguh, *Production-Ready*, dan mampu digunakan di lingkungan operasional kepolisian (Satker Ditbinmas Polda Sulteng) secara berkesinambungan. **Prinsip:** Paperless, Workflow Management Terpusat, Smart Checklist, Real-Time Monitoring, Audit Trail Akuntabel. ## 2. Baseline Gambar Referensi & Koreksi Logika Aplikasi mereplika desain referensi secara *pixel-perfect* (persis sama) dengan beberapa perbaikan logika *user experience*: * **Form Input:** Bersifat *Mobile-Responsive* agar Bamin mudah *upload* dari lapangan. * **Dashboard:** Murni untuk *monitoring* dan *live queue*, tidak untuk input data. * **Koreksi UX Halaman Validasi:** **Wajib** menambahkan teks informasi *Nilai Nominal* dokumen di area atas Layout 2 (karena di gambar desain asli hal krusial ini terlewat/hilang). * **Fitur Ekstra Header & Preview:** Wajib menambahkan ikon/tombol *Logout* di header kanan (tidak ada di *mockup*), dan mengaktifkan fungsi tombol *Download PDF* (ikon biru kecil) di bawah area pratinjau dokumen. * **Koreksi Paradoks Aktor (Role Logic):** Mengabaikan teks `[User: Kaur Keu]` di header Layout 2. Karena tombol *Approve* meneruskan dokumen ke Kaur Keu, maka pengguna di layar validasi ini ditetapkan sebagai **Verifikator Staf**, bukan Kaur Keu. ## 2.b. Spesifikasi Visual & Estetika UI (Pixel-Perfect Guarantee) Tampilan aplikasi **wajib** terlihat profesional, premium, dan 100% identik dengan gambar referensi. Ketentuan desain: * **Layout Utama:** Terdiri dari Top Header, Sidebar Kiri yang konsisten, dan Area Konten Utama. * **Palet Warna:** * *Primary (Header & Tabel):* Navy Blue / Biru Dongker (kode hex mendekati `#1c3d5a`). * *Secondary (Background):* Abu-abu sangat terang dan Putih bersih untuk area kerja. * *Aksen & Status:* Hijau terang untuk status sukses/Approve (Capaian 98.75%), Merah untuk Reject/Error, dan Emas/Kuning untuk ikon profil/peringatan. * **Elemen Spesifik:** Kartu indikator kinerja (KPI) harus memiliki *drop-shadow* lembut, tabel memiliki *header* biru gelap dengan teks putih tebal, dan *breadcrumb* navigasi menggunakan gaya `< KEMBALI...`. * **Split Layout (Halaman Validasi):** Mempertahankan dua kolom sejajar (Kiri untuk pratinjau PDF, Kanan untuk Form Checklist & Tombol Aksi) agar terlihat kokoh dan fungsional. ## 3. Workflow (Alur Kerja Operasional yang Dikoreksi) 1. **Bamin:** Input Kegiatan → Upload PDF Perwabku → Masuk Antrean. 2. **Verifikator Staf (Bukan Kaur Keu):** Buka Validasi (PDF di kiri, Form di kanan) → Checklist Indikator: * *(Reject)* → Isi Catatan → Klik Reject → Status Ditolak → Notifikasi WA ke Bamin. * *(Approve)* → Klik Approve → Diteruskan ke **Kaur Keu** untuk proses Tanda Tangan Elektronik (TTE). 3. **Kaur Keu:** Menerima dokumen yang sudah divalidasi Staf → Melakukan TTE → Status Selesai. 4. **Pimpinan:** Akses Dashboard → Pantau Serapan Anggaran & Status Dokumen Real-Time. ## 4. Modul & Aktor * **Modul:** Dashboard, Input Perwabku, Validasi Berkas, Tracking System, Executive Report, Integrasi LKIP, Pengaturan User, Log Aktivitas. * **Aktor (RBAC):** Bamin (Input), Verifikator Staf (Validasi Awal), Kaur Keu (TTE & Finalisasi), Pimpinan/Kasubdit (Monitoring), Admin (Manajemen Data). --- # BAGIAN II: SPESIFIKASI TEKNIS & ARSITEKTUR ## 5. Teknologi Pendukung (Tech Stack) Aplikasi dikembangkan tanpa *framework* berat untuk menjaga performa dan fleksibilitas *server* instansi. * **Backend:** PHP Murni (Native) Minimal Versi 8.0+. * **Database:** MySQL / MariaDB (Driver PDO wajib). * **Frontend HTML:** HTML5 Semantik. * **Frontend CSS:** Tailwind CSS via CDN (Penggunaan `` untuk mempercepat pengembangan UI secara dinamis namun tetap memastikan akurasi *pixel-perfect* tanpa *build step* rumit). * **Frontend JS:** Vanilla JavaScript (ES6) untuk manipulasi DOM (PDF.js, AJAX Live Dashboard). ## 5.b. Spesifikasi Lingkungan (Server Requirements) * **Web Server:** Apache (direkomendasikan karena mendukung `.htaccess` bawaan untuk proteksi ketat folder `/storage/`) atau Nginx. * **PHP Version:** Minimal PHP 8.1+ (Wajib mendukung PDO dan tipe data modern). * **Database Server:** MySQL 8.0+ atau MariaDB 10.4+. ## 6. Standar Struktur Folder (MVC Native) Untuk menghindari *Spaghetti Code*, aplikasi menggunakan arsitektur MVC manual: ```text /web_skolahpolisi/ │ ├── /app/ # Inti aplikasi (Logika Backend) │ ├── /controllers/ # Logika bisnis (Validasi, Upload, dll) │ ├── /models/ # Interaksi Database (Query PDO) │ ├── /views/ # Tampilan Antarmuka (HTML campuran PHP) │ │ ├── /layouts/ # Header, Footer, Sidebar │ │ ├── /dashboard/ │ │ └── /validasi/ │ └── /core/ # Router, Konfigurasi DB, Helper │ ├── /public/ # Folder yang terekspos ke publik │ ├── /assets/ │ │ ├── /css/ # style.css (Vanilla CSS) │ │ ├── /js/ # script.js, pdf.js │ │ └── /images/ # Logo Polda, Icon │ └── index.php # Front Controller (Entry point) │ ├── /storage/ # Folder penyimpanan aman (TERTUTUP DARI AKSES URL) │ ├── /uploads/ # File PDF dokumen (Terlindungi) │ └── /logs/ # File log error sistem │ └── master_plan_si_perkasa.md ``` ## 6.b. Strategi Routing (URL Structure) Karena tidak menggunakan *framework*, aplikasi akan menggunakan pola *Front Controller* tersentralisasi melalui `index.php` (dengan bantuan `.htaccess` untuk *pretty URL* jika diperlukan): * `/?page=dashboard` → Memanggil Controller Dashboard. * `/?page=validasi&doc_id=123` → Memanggil Controller Validasi untuk dokumen spesifik. * `/?action=approve_dokumen` → Endpoint POST untuk memproses validasi. Pendekatan ini menjaga keamanan URL dan memudahkan *maintenance*. ## 7. Standar Keamanan Sistem (Security Hardening) Karena menggunakan PHP Murni, keamanan dikendalikan secara manual dengan standar ketat: 1. **Proteksi SQL Injection:** Semua interaksi *database* **WAJIB** menggunakan *Prepared Statements* via PDO. Dilarang keras menggunakan *raw query* langsung. 2. **Proteksi XSS (Cross-Site Scripting):** Semua input *user* (terutama catatan koreksi) harus di-*sanitize*, dan saat ditampilkan harus diproses menggunakan fungsi `htmlspecialchars()`. 3. **Proteksi Akses File:** Folder `/storage/uploads/` dilarang diakses langsung via URL browser. Akses dokumen PDF dialirkan (*stream*) melalui *script* PHP pembaca yang memvalidasi otorisasi (Session). 4. **Autentikasi & Sesi:** * Password disimpan menggunakan fungsi `password_hash()` (Algoritma Bcrypt/Argon2). * Implementasi mekanisme *Session Fixation Protection*. * Fitur *Auto-Logout* jika sistem *idle* lebih dari 30 menit. 5. **Validasi Upload:** Pengecekan file *upload* tidak hanya dari ekstensi (`.pdf`), tetapi menggunakan MIME Type *checking* (Finfo) untuk mencegah eksploitasi file terselubung. ## 8. Spesifikasi Integrasi & Notifikasi * **WA Alert System:** Menggunakan API pihak ketiga lokal (Gateway WA) dengan metode antrean (cURL POST). Pesan dikirim secara *background* jika memungkinkan. * **Notifikasi In-App:** Menggunakan *polling* AJAX sederhana (tiap 60 detik) untuk memunculkan notifikasi merah di *header* tanpa me-*refresh* halaman. --- # BAGIAN III: ROADMAP & EKSEKUSI ## 9. Roadmap Pengembangan (Siklus Berurutan) 1. **Fase 1: Perencanaan & Baseline** (SELESAI - Master Blueprint). 2. **Fase 2: Entity Relationship Diagram (ERD) & Database.** Pembuatan skema tabel yang ternormalisasi (Users, Perwabku, Logs, Notifications). 3. **Fase 3: Kerangka Dasar MVC & Setup Server.** Membuat struktur folder `/app/` dan konfigurasi koneksi DB (PDO). 4. **Fase 4: Frontend Development (UI/UX).** *Slicing* gambar referensi menjadi HTML & Tailwind CSS (*Pixel-Perfect*). 5. **Fase 5: Core Backend - Manajemen Dokumen.** Modul *Upload* (Bamin) dan *PDF Viewer* internal. 6. **Fase 6: Core Backend - Validation Engine.** Pembuatan sistem *Smart Checklist*, Logika *Approve/Reject*, dan Perekaman Jejak. 7. **Fase 7: Core Backend - Dashboard & Report.** Query Data analitik untuk IKPA dan Serapan Anggaran (*Live*). 8. **Fase 8: Integrasi WA & Notifikasi.** 9. **Fase 9: Audit Trail & Quality Assurance (Testing).** ## 10. Database (Rancangan Skema Rinci) Rancangan wajib mengikuti normalisasi data (Minimal 3NF) untuk integritas pelaporan keuangan: 1. **`users`:** `id` (PK), `nama_lengkap`, `nrp` (sebagai Username), `password_hash`, `role_id` (FK), `is_active`, `created_at`. 2. **`roles`:** `id` (PK), `nama_role` (Operator, Verifikator, Pimpinan). 3. **`dokumen_perwabku`:** `id` (PK), `nomor_dokumen`, `user_id_bamin` (FK), `nama_kegiatan`, `nominal_anggaran`, `file_path`, `status` (ENUM: 'Menunggu', 'Review Kaur', 'Koreksi', 'Approve'), `created_at`, `updated_at`. 4. **`checklist_result`:** `id` (PK), `dokumen_id` (FK), `item_nama` (Sprin, RPD, Kuitansi, GPS), `is_valid` (Boolean), `catatan_koreksi` (Text), `validated_by` (FK), `validated_at`. 5. **`audit_logs`:** `id` (PK), `user_id` (FK), `action` (VARCHAR), `description` (TEXT), `ip_address`, `timestamp`. 6. **`notifikasi_wa`:** `id` (PK), `dokumen_id` (FK), `pesan`, `status_kirim` (Pending/Sent/Failed), `timestamp`. ## 11. Komitmen Final Dokumen ini menyatakan bahwa Master Plan telah selesai. Jika ada perubahan signifikan pada logika bisnis, *database*, atau desain, harus melalui revisi dokumen ini. Sistem yang dihasilkan berorientasi pada ketahanan, efisiensi kinerja polisi, dan transparansi anggaran.