Blueprint Filter Modul Keuangan Universal

Updated: Sep 2026Oleh: SystemModul Keuangan & Akuntansi

🎛️ BLUEPRINT FILTER MODUL KEUANGAN UNIVERSAL & KONTEKSTUAL

Standar Arsitektur Komponen Filter, Sinkronisasi URL, dan Pengalaman Pengguna ERP BUMDes#

BUMDes Bolulango — Kabupaten Boalemo, Gorontalo Standar Arsitektur Antarmuka Modul Keuangan, Buku Besar, Utang-Piutang, dan Arus Kas

🧭 1. Latar Belakang & Urgensi Standardisasi#

Dalam tata kelola sistem ERP terintegrasi dengan 25+ unit usaha, bilah filter (Filter Bar) merupakan garda terdepan interaksi pengelola keuangan, manajer unit, direksi, dan auditor saat mengevaluasi kinerja bisnis.

Sebelumnya, komponen filter pada modul-modul keuangan (seperti Buku Besar, Utang & Piutang, Jurnal Umum, dan Arus Kas) dikembangkan secara terpisah dengan inkonsistensi sebagai berikut:

Keterbatasan Rentang Waktu: Hanya menyediakan seleksi per bulan kalender atau tahun tunggal, belum mendukung rentang tanggal kustom (date range picker) untuk audit cut-off harian atau mingguan.
Ketiadaan Filter Domain-Specific: Pada modul Utang-Piutang (AR/AP), filter belum menyaring jenis liabilitas (utang dagang vs dana talangan perorangan) atau status jatuh tempo (aging brackets).
Ketergantungan pada HTML Native Select: Tampilan menu tarik-turun (dropdown) bawaan peramban kurang menyatu dengan bahasa desain modern (glassmorphism, dark mode terpadu, dan rounded tokens).
Ketiadaan Indikator Visual Filter Aktif: Pengguna kesulitan mengetahui filter apa saja yang sedang aktif saat melihat tabel data yang panjang.

Blueprint ini menetapkan spesifikasi komponen UniversalFilterBar yang seragam, adaptif, dan kontekstual.

🏗️ 2. Arsitektur Komponen: `UniversalFilterBar`#

Memuat diagram alur...

Komponen ini dirancang modular dan terbagi dalam 4 sub-komponen utama:

A. Selektor Unit Usaha Hierarkis (Business Unit Selector)

Tampilan Pohon Unit: Menampilkan unit induk holding, sub-holding Ketapang, divisi, hingga sub-unit dengan indentasi visual yang jelas (🌐 Semua Unit, ↳ Sub-Holding, ↳ Unit Usaha).
Isolasi Peran (RBAC): Jika pengguna memiliki peran terbatas (admin_unit, kepala_unit), opsi terkunci otomatis hanya pada unit yang ditugaskan (assigned unit).

B. Pengontrol Dimensi Waktu Fleksibel (Temporal Engine)

Mendukung 3 mode seleksi waktu:

Mode Bulanan Standar: Pilihan Bulan (Januari - Desember) dan Tahun (dinamis dari data transaksi riil).
Mode Rentang Tanggal Kustom (Custom Date Range): Dua bidang kalender popover (Tanggal Mulai s/d Tanggal Selesai) untuk kebutuhan rekonsiliasi kas spesifik (misal: 15 Februari 2026 s/d 25 Maret 2026).
Pintasan Cepat (Quick Presets): Tombol aksi instan:

Hari Ini
Bulan Berjalan (MTD)
Kuartal Berjalan (Q1 / Q2 / Q3 / Q4)
Tahun Berjalan (YTD)
Semua Periode (Kumulatif)

C. Filter Kontekstual Spesifik Modul (Domain-Specific Slots)

Pada modul Utang & Piutang (AR/AP), filter menyematkan kontrol khusus:

Kategori Kewajiban / Tagihan:

Semua Jenis
Utang Dagang Pakan & Sapronak
Dana Talangan Pengurus / Pihak Ketiga
Beban Operasional Akrual

Mitra Bisnis Terpilih: Dropdown pencarian nama mitra (supplier, customer, atau perorangan seperti Ansor, Erwin, Mujid, KDMP).
Status Penagihan & Jatuh Tempo:

Semua Status
Belum Lunas (Unpaid)
Sebagian (Partial)
Lunas (Paid)
Jatuh Tempo H-7 (Early Warning System)
Menunggak (Overdue > 30 Hari)

D. Bilah Filter Aktif (Active Filter Chips)

Di bawah bilah filter utama, ditampilkan chips penanda filter aktif dengan tombol silang (✕) untuk membatalkan filter individual secara cepat, disertai tombol Reset Semua Filter.

📊 3. Spesifikasi Parameter URL (URL Query Schema)#

Seluruh status filter harus tersimpan pada parameter URL (deep-linking friendly), sehingga hasil penyaringan dapat dibagikan langsung antar-staf atau di-bookmark oleh pengawas.

Parameter	Tipe Data	Nilai Default	Keterangan
`unitId`	`string (UUID \| 'all')`	`'all'`	ID Unit usaha sasaran atau konsolidasi seluruh BUMDes
`consolidated`	`boolean`	`true`	`true` jika mengikutsertakan anak unit (child units), `false` untuk unit mandiri murni
`month`	`integer (1-12 \| 'all')`	`undefined`	Bulan laporan terpilih
`year`	`integer`	`Tahun Aktif`	Tahun pembukuan
`startDate`	`string (YYYY-MM-DD)`	`undefined`	Batas awal rentang tanggal kustom
`endDate`	`string (YYYY-MM-DD)`	`undefined`	Batas akhir rentang tanggal kustom
`debtType`	`string`	`'all'`	Kategori utang: `trade`, `bailout`, `accrual`
`partnerId`	`string (UUID)`	`undefined`	Filter transaksi mitra tertentu
`status`	`string`	`'all'`	Status: `unpaid`, `partial`, `paid`, `overdue`

🎨 4. Standar Desain UI/UX & Aksesibilitas#

Komponen Visual Elegan: Menggunakan pustaka headless (Radix UI Popover / Command) dengan sentuhan styling Tailwind CSS:

Container: bg-white/80 dark:bg-white/5 backdrop-blur-xl border border-slate-200 dark:border-white/10 rounded-2xl p-4 shadow-sm.
Select Trigger: Sudut membulat rounded-xl, teks tebal berukuran text-xs font-bold, warna latar bg-slate-100 dark:bg-black/50.
Accent Color: Aksen hijau zamrud (Emerald-500) untuk seleksi aktif, dan aksen jingga (Amber-500) untuk unit mandiri.

Indikator Loading Real-time: Memanfaatkan hook useTransition dari React 19 / Next.js 15 untuk memberikan efek peredupan (opacity-60) pada tabel selama data baru dimuat tanpa membekukan antarmuka.
Responsive Flow: Penataan otomatis berpindah dari baris horizontal pada desktop menjadi tata letak bertumpuk yang rapi pada tablet dan gawai genggam (mobile).

🚀 5. Rencana Pelaksanaan & Penerapan#

Tahap 1 (Utang & Piutang): Meningkatkan DebtReceivableClient.tsx dengan menambahkan pemilih mitra bisnis, filter jenis utang talangan, dan kustom rentang tanggal.
Tahap 2 (Ekstraksi Komponen Global): Memisahkan logika filter menjadi komponen bersama components/finance/UniversalFilterBar.tsx.
Tahap 3 (Standardisasi Lintas Modul): Menerapkan komponen bersama ke modul Buku Besar, Jurnal Penyesuaian, Laporan Arus Kas, dan Neraca Saldo.