Rencana Anggaran Bulanan & Peringatan Otomatis
Membantu menetapkan batas pengeluaran bulanan dan memberi peringatan otomatis saat belanja sudah mendekati atau melewati batas yang direncanakan.
Membantu menetapkan batas pengeluaran bulanan dan memberi peringatan otomatis saat belanja sudah mendekati atau melewati batas yang direncanakan.
Tantangan & Kebutuhan Pengguna
Pada banyak aplikasi keuangan, tabel rencana anggaran dan tabel transaksi berjalan sendiri-sendiri. Pengguna harus mengetik kategori secara manual (yang rentan salah eja sehingga tidak terhitung di progres anggaran) serta berulang kali mengetik nominal harga barang atau pendapatan tetap yang sebenarnya sudah pernah ditulis saat menyusun rencana anggaran.
Rencana anggaran tidak boleh hanya menjadi laporan pasif di akhir bulan; ia harus menjadi pengarah aktif saat transaksi harian diinput.
Solusi & Cara Kerja
Tabel perencanaan (`planningexpense` dan `planningincome`) dijadikan sumber referensi tunggal untuk kategori pengeluaran dan sumber pendapatan. Di sisi server, query perencanaan menyertakan *correlated subquery* yang menjumlahkan realisasi transaksi (`spent` dan `realized`) sesuai filter bulan dan tahun yang dipilih pengguna. Di sisi klien, custom hook SWR (`usePlanningExpense` dan `usePlanningIncome`) mengekstrak daftar kategori unik sekaligus merakit objek kamus harga (`costMap` dan `nominalMap`). Begitu pengguna memilih kategori di modal tambah transaksi, harga satuan atau nominal target langsung terisi otomatis.
Berikut adalah sinergi antara *correlated subquery* di endpoint perencanaan dan pembentukan `costMap` serta fungsi autofill di sisi klien:
Detail & Hal yang Diperhatikan
- Sanitasi Filter Periode Dinamis: Parameter `year` dan `month` dari URL divalidasi ketat dengan ekspresi reguler (`/^[0-9]{4}$/` dan `/^[0-9]{2}$/`) sebelum membentuk kondisi filter tanggal pada subquery.
- Revalidasi Ganda Cache SWR: Setiap kali transaksi kas ditambah, diubah, atau dihapus, fungsi `reload()` memicu `mutateExp()` dan `mutatePlan()` secara serentak agar tabel transaksi dan progress bar anggaran langsung sinkron.
- Deteksi Visual Over-Budget: Ketika nilai `spent > budget`, komponen otomatis mengubah warna progress bar menjadi merah (`#ef4444`), menghitung selisih kelebihan pengeluaran, dan memunculkan kartu peringatan kategori yang melampaui batas.
Pemisahan state filter periode antara tab Transaksi (year/month) dan tab Anggaran (budgetYear/budgetMonth) memungkinkan pengguna memeriksa riwayat transaksi bulan lalu sambil tetap memantau anggaran bulan berjalan tanpa saling menimpa state.