IDAMAN-TSL: Sistem Informasi Data Pemanfaatan Tumbuhan & Satwa Liar
Portal manajemen dan pengolahan data pemanfaatan flora dan fauna liar terintegrasi untuk Balai Besar Konservasi Sumber Daya Alam (BBKSDA) Jawa Barat. Dilengkapi fitur statistik interaktif, manajemen izin penangkar, serta database referensi taksonomi.
Latar Belakang & Solusi Proyek
Operasional tim internal sebelumnya sangat bergantung pada berkas spreadsheet yang terfragmentasi dan portal usang. Alat-alat tersebut memuat halaman sangat lambat, tidak konsisten secara UI, serta sulit dikembangkan seiring bertambahnya struktur tim.
IDAMAN-TSL mengoordinasikan seluruh sumber daya dalam satu dashboard terpadu. Menggunakan Next.js App Router dan React Server Components yang dioptimalkan, portal ini dapat dimuat dalam waktu kurang dari 400ms. Tailwind CSS digunakan untuk menerapkan sistem desain yang ketat dengan konsistensi visual yang tinggi.
Optimizing Multi-Criteria Taxonomy Search & Verification Workflows
Admin BBKSDA Jabar harus mengelola ribuan data izin penangkar TSL dengan berbagai kriteria penyaringan (IUCN, CITES, status perlindungan) dan memproses verifikasi izin yang masuk. Melakukan query langsung ke database untuk setiap interaksi filter menyebabkan beban server tinggi dan antarmuka melambat.
Mengimplementasikan pencarian client-side terindeks menggunakan Fuse.js untuk data referensi taksonomi statis dan optimasi state React untuk dynamic filtering tabel Penangkar. Untuk alur verifikasi berkas, ditambahkan optimisasi cache di sisi klien menggunakan React Server Components guna mempercepat transisi status data permohonan tanpa merender ulang seluruh halaman.
- Taxonomy Indexing: Membuat indeks taksonomi hierarkis (Kingdom -> Spesies) di sisi klien untuk pencarian instan.
- Dynamic Filtering: Mengoptimalkan performa rendering baris tabel Penangkar menggunakan React memoization.
- State Verification: Memperbarui status verifikasi secara optimistik di UI sebelum respons API selesai guna menghindari jeda visual.
System Architecture
Urutan eksekusi transaksi, validasi sesi autentikasi, dan pipeline sinkronisasi data real-time pada arsitektur sistem.
Role-Based JWT Auth
Pengguna (Admin Pusat, Bidang, atau Seksi Wilayah) melakukan autentikasi via Next.js; Express.js memvalidasi kredensial dan menerbitkan token JWT terenkripsi.
Client-Side State Hydration
Next.js memuat data dari REST API; data Penangkar & Referensi TSL diolah secara lokal menggunakan React State untuk pencarian instan tanpa overhead query.
PostgreSQL Database Transaction
Saat data diperbarui, Express.js memproses request, memvalidasi skema data, dan melakukan query transaksi aman ke database PostgreSQL di Azure.
Hierarchical Verification
Berkas permohonan TSL mengalir sekuensial: diinput di Seksi Wilayah, diverifikasi oleh Bidang Wilayah, dan disetujui di tingkat Admin Pusat.
Tech Stack
Rasional pemilihan fondasi teknologi, bahasa pemrograman, database, dan protokol integrasi eksternal.
Next.js & React (App Router)
Membangun antarmuka portal data konservasi TSL BBKSDA Jawa Barat dengan struktur komponen modular yang menyajikan dashboard statistik interaktif dan katalog spesies terlindungi secara instan.
Express.js & Node.js REST API
Layanan perantara yang memproses filter multi-kriteria data unit penangkaran, pengedar satwa DN/LN, dan rekapitulasi izin tahunan dengan optimasi caching response kueri.
TypeScript
Menjaga konsistensi model data hukum izin konservasi, kuota penangkaran, dan taksonomi satwa liar agar tidak terjadi ketidakcocokan tipe data (type mismatch) antara frontend dan backend.
Tailwind CSS
Menyusun tata letak tabel data berdensitas tinggi, kartu metrik ringkasan eksekutif, dan status verifikasi hukum dengan konsistensi visual serta kontras tinggi.
Playwright & Jest
Menjalankan serangkaian pengujian otomatis end-to-end pada alur filter tabel dan validasi hak akses untuk menjamin keandalan sistem sebelum dideploy untuk operasional instansi.
Core Capabilities
Rincian fitur fungsional utama, kemampuan penanganan transaksi, dan mekanisme keandalan sistem.
Visualisasi Statistik TSL
Dashboard interaktif dengan grafik statistik tahunan penangkar, pengedar DN/LN, dan lembaga konservasi secara real-time.
Manajemen Penangkar TSL
Sistem pencarian dan pengelolaan data izin unit penangkaran flora/fauna liar, lengkap dengan status perlindungan spesies.
Database Referensi TSL
Database taksonomi TSL lengkap dengan filter kingdom, genus, spesies, serta status kelangkaan standar nasional dan IUCN.
Verifikasi Berkas Digital
Modul pemrosesan berkas permohonan masuk dari penangkar secara transparan, akuntabel, dan terintegrasi cepat.
Sistem Informasi Terintegrasi
Tampilan antarmuka sistem informasi data pemanfaatan tumbuhan dan satwa liar Jawa Barat yang responsif dan modern.
Portal Utama & Landing Page
Gerbang utama sistem informasi terintegrasi untuk publik dan petugas Balai Besar Konservasi Sumber Daya Alam (BBKSDA) Jawa Barat.
Gerbang utama sistem informasi terintegrasi untuk publik dan petugas Balai Besar Konservasi Sumber Daya Alam (BBKSDA) Jawa Barat.
HikePass Mobile
Aplikasi mobile berbasis Flutter & GetX terintegrasi dengan Supabase BaaS dan Google Gemini AI. Membantu mendigitalisasi birokrasi perizinan SIMAKSI, audit barang bawaan pendaki, serta pelaporan kondisi jalur pendakian secara real-time.
