Desa Digital — Public Service & Village Administration Platform

Platform administrasi dan pelayanan publik desa berbasis web yang mengintegrasikan data kependudukan (Kepala & Anggota Keluarga), bantuan sosial, kegiatan desa, dan proyek pembangunan ke dalam satu dashboard terpusat. Mengusung arsitektur SPA Vue 3 + Pinia yang terhubung ke RESTful API Laravel 12, dilengkapi otorisasi berbasis peran (RBAC via Spatie Permission), autentikasi Laravel Sanctum, dan integrasi pembayaran tiket kegiatan desa via Midtrans Snap SDK. Dibangun secara kolaboratif dengan fokus pada pengembangan frontend dan integrasi API end-to-end.

---

Ringkasan Proyek

• Kategori: Personal Project
• Peran: Full-Stack Engineer
• Tech Stack: Vue 3, Vite, Vue Router, Pinia, Axios, Chart.js, Lodash, Luxon, Numeral, Laravel 12 (PHP 8.2), Laravel Sanctum, Spatie Laravel Permission, Midtrans PHP SDK

---

Masalah yang Dihadapi

Sebelum sistem administrasi terpusat diterapkan, tata kelola data di tingkat desa menghadapi beberapa tantangan operasional:

• Penyimpanan Data Terfragmentasi: Data warga, bantuan sosial, dan proyek pembangunan tersebar di lembar kerja manual atau berkas fisik yang rentan hilang dan sulit diperbarui.
• Risiko Duplikasi & Ketidaktepatan Sasaran: Penyaluran bantuan sosial rawan tumpang tindih akibat ketiadaan validasi data kependudukan terpadu (Single Source of Truth).
• Proses Administrasi Lambat: Pendaftaran kegiatan desa, pembayaran kontribusi, dan monitoring pembangunan dilakukan secara manual tanpa transparansi real-time.
• Lemahnya Kontrol Akses Data: Ketiadaan pembatasan hak akses berbasis peran yang dapat memicu risiko kebocoran data sensitif warga desa.

---

Solusi & Fitur Utama

1. Dashboard Analitik & Statistik Desa
   Visualisasi statistik real-time (Chart.js) untuk total populasi, jumlah Kepala Keluarga (KK), distribusi bantuan sosial, status pendaftaran kegiatan, dan progress pembangunan desa.

2. Manajemen Data Kependudukan (KK & Anggota Keluarga)
   Pengelolaan data induk kependudukan bertingkat (parent-child relationship) yang mendukung operasi CRUD, pencarian terdebonse, dan tabel data ber-pagination cepat.

3. Manajemen Bantuan Sosial (Bansos) & Tracking
   Pencatatan jenis bantuan, pemetaan penerima manfaat (beneficiaries), serta pemantauan status penyaluran bantuan sosial untuk mencegah penerimaan ganda.

4. Event Management & Payment Gateway Integration
   Publikasi kegiatan desa, pendaftaran peserta, dan pembayaran tiket kontribusi secara otomatis melalui integrasi Midtrans Snap SDK (Virtual Account, E-Wallet, QRIS) beserta penanganan callback webhook.

5. Pencatatan Program Pembangunan Desa
   Pengelolaan log infrastruktur dan program pembangunan desa, termasuk pendataan peserta/pendaftar proyek swadaya masyarakat.

6. Role-Based Access Control (RBAC) & Route Guard
   Proteksi antarmuka dan rute API berbasis peran pengguna (admin, kepala_keluarga) menggunakan kombinasi Spatie Permission di backend dan navigation guards di frontend.

---

Tech Stack & Arsitektur

Desa Digital mengadopsi arsitektur Single Page Application (SPA) yang terpisah secara tegas antara antarmuka klien dan RESTful API server.

• Frontend Architecture: Vue 3 (Composition API) dan Vite untuk module bundling berkecepatan tinggi. Pinia mengelola state terpusat per domain (familyStore, eventStore, bansosStore), didukung oleh Axios (interseptor token & handler error) dan Vue Router (route guards).
• Backend Architecture: Laravel 12 (PHP 8.2) berarsitektur Controller-Repository-Request Validation untuk pemisahan tanggung jawab kode yang rapi.
• Security & Authorization: Laravel Sanctum untuk autentikasi berbasis token (bearer/cookie), Spatie Laravel Permission untuk manajemen izin granular, dan validasi Form Request ketat.
• External Integration: Midtrans PHP SDK untuk pembuatan Snap Token transaksi dan pengolahan status otorisasi pembayaran via callback webhook.

---

Tantangan Teknis & Solusi

• Konsistensi State pada Tabel Data Ber-Pagination & Filter:
  Tantangan: Melakukan pencarian dan pencetus kueri berulang saat pengguna mengetik kata kunci dapat membebani server dan menyebabkan state UI jumps.
  Solusi: Membangun standardisasi modul store Pinia dengan opsi server terpusat (serverOptions), dipadukan dengan teknik debounce searching (Lodash) untuk meminimalkan panggilan REST API.

• Keandalan Transaksi Pembayaran Event Pihak Ketiga:
  Tantangan: Memastikan status pembayaran peserta event di sistem lokal selalu sinkron dengan status transaksi di Midtrans.
  Solusi: Menerapkan alur pemicuan Snap Token saat pembuatan data peserta, serta membangun endpoint callback webhook khusus yang memverifikasi signature key Midtrans secara atomik sebelum memperbarui status pembayaran.

• Penanganan Error API & Pengalaman Pengguna (UX Feedback):
  Tantangan: Kegagalan respons API (validasi 422, unauthenticated 401, server error 500) dapat membingungkan pengguna jika tidak ditangani dengan jelas.
  Solusi: Mengimplementasikan interceptor Axios dan helper error handler terpusat yang memetakan pesan error dari backend secara otomatis ke notifikasi UI (toast/alert).

---

Pembelajaran & Catatan Teknis

• Merancang dan membangun aplikasi SPA berbasis Vue 3 dan Pinia yang terhubung ke RESTful API Laravel 12.
• Mengintegrasikan payment gateway industri (Midtrans Snap SDK) beserta penanganan callback webhook berstatus atomik.
• Menerapkan kontrol akses berbasis peran (RBAC) end-to-end, mulai dari Spatie Permission di backend hingga route guard di Vue Router.