1 / 2
Dashboard real-time untuk pemantauan Pendapatan Asli Daerah (PAD), dirancang untuk memberikan visibilitas instan atas capaian pajak daerah dengan performa tinggi dan data yang akurat.
Dashboard Target dan Realisasi PAD Kabupaten Batubara adalah sistem front-end yang menyajikan data penerimaan pajak secara langsung dari sistem database pajak daerah Kabupaten Batu Bara. Sistem ini menampilkan agregasi miliaran rupiah dari berbagai jenis pajak dalam bentuk visualisasi persentase capaian dan selisih anggaran secara live . Pengguna—terutama pemangku kebijakan dan masyarakat umum—dapat melihat pergerakan angka secara instan setiap detiknya berkat antarmuka yang reaktif dan informatif. Secara fungsional, aplikasi ini tidak hanya sekadar menampilkan data statis, tetapi memadukan Server-Side Rendering (SSR) untuk SEO dan inisialisasi first-paint yang instan, ditambah dengan mekanisme client-side polling untuk menjaga data tetap mutakhir (sinkronisasi per 5 detik). Detail per jenis pajak juga diimplementasikan dengan server-side pagination yang mulus untuk menjaga konsumsi memori dan kecepatan loading di sisi client .
Pemerintah daerah membutuhkan visibilitas real-time terhadap arus penerimaan Pendapatan Asli Daerah (PAD) yang bersumber dari berbagai titik pembayaran dan diakumulasikan hingga ratusan miliar rupiah. Tantangan utamanya adalah menyajikan data finansial agregat berskala besar secara langsung ( live ) di front-end tanpa membebani database transaksional di backend . Selain itu, karena dashboard ini diproyeksikan untuk diletakkan di layar command center maupun diakses oleh publik, performa initial load dan kemampuan antarmuka untuk me- refresh data secara mulus (tanpa membuat pengguna merasa sistem " freeze ") menjadi krusial.
Saya merancang aplikasi menggunakan Next.js App Router dengan strategi hybrid rendering . Halaman utama memanfaatkan Server-Side Rendering (SSR) untuk memastikan struktur HTML terkirim secara instan (TTFB < 200ms) tanpa menunggu eksekusi JavaScript. Untuk pembaruan data, saya mengimplementasikan client-side polling asinkron setiap 5 detik yang dipadukan dengan React startTransition . Fitur visualisasi menggunakan custom hook animasi transisi angka dan progress bar yang responsif. Dengan memisahkan beban fetching awal di sisi server dan background sync di sisi klien, sistem tetap reaktif dan tidak memberikan beban spike mendadak pada backend .
Dashboard kini beroperasi sebagai pusat informasi tunggal yang andal, menyajikan pembaruan data pajak daerah yang akurat dan live . Pendekatan hybrid rendering dan optimalisasi animasi UI memastikan User Experience tetap smooth dan angka langsung terbaca di detik pertama akses. Hal ini secara langsung mempermudah eksekutif daerah dalam mengambil keputusan taktis dan meningkatkan transparansi tata kelola keuangan publik.
Technologies and tools used in this project: