Sinkronisasi Arus Kas, Anggaran, & Autofill Cerdas

Masalahnya dulu

Banyak aplikasi keuangan memisahkan fitur pencatatan transaksi harian dengan fitur penyusunan anggaran bulanan sebagai dua modul yang tidak saling bicara. Akibatnya, pengguna harus mengetik kategori secara manual (yang rawan salah ketik sehingga tidak terhitung di laporan anggaran) dan mengetik ulang harga barang/tagihan rutin setiap kali bertransaksi.

Correlated Subquery di Server dan Peta Autofill di Klien

Di MyPocket, tabel rencana (planningexpense dan planningincome) menjadi sumber kebenaran tunggal untuk daftar kategori pengeluaran dan sumber pendapatan. Di sisi server, endpoint perencanaan langsung menghitung realisasi pemakaian anggaran (spent dan realized) pada periode yang dipilih menggunakan correlated subquery. Di sisi klien, custom hook SWR mengekstrak daftar kategori sekaligus membangun peta harga satuan (costMap dan nominalMap) untuk mengisi otomatis form transaksi.

Anggaran tidak boleh sekadar menjadi tabel pasif; ia harus menjadi pengarah otomatis saat pengguna mencatat transaksi harian.

Implementasi di ngodingan ini

Perhatikan bagaimana endpoint perencanaan menghitung pemakaian anggaran per kategori secara dinamis, lalu disambut oleh hook usePlanningExpense di sisi klien untuk menyediakan fitur autofill:

// 1. Server: menghitung realisasi pengeluaran (spent) per kategori anggaran
const rows = await query(
  `SELECT pe.*, COALESCE((
     SELECT SUM(total) FROM cashflowexpense
     WHERE uuidbank = pe.uuidbank
       AND category = pe.category
       AND DATE_FORMAT(expensedate, '%Y-%m') = ?
   ), 0) AS spent
   FROM planningexpense pe
   WHERE pe.uuidbank = ?
   ORDER BY createdat ASC`,
  [period, bank]
);

// 2. Client Hook: membangun daftar kategori & peta harga otomatis (costMap)
const categories = Array.from(
  new Set((items as any[]).map((p: any) => p.category))
).filter(Boolean) as string[];

const costMap: Record<string, number> = {};
(items as any[]).forEach((p: any) => {
  if (p.category && p.cost) costMap[p.category] = Number(p.cost);
});

Jebakan dan detail yang harus dijaga

• Memvalidasi format tahun dan bulan secara ketat sebelum menyusun query filter periode agar input dari URL parameter selalu bersih dan aman.
• Menyinkronkan dua cache SWR sekaligus setelah mutasi: saat transaksi pengeluaran baru disimpan atau dihapus, fungsi reload() memanggil mutateExp() dan mutatePlan() secara bersamaan agar tabel transaksi dan progress bar anggaran langsung diperbarui tanpa reload halaman.
• Memberikan umpan balik visual instan ketika pengeluaran melampaui batas (spent > budget): progress bar otomatis berubah warna menjadi merah (#ef4444) dan memunculkan kartu peringatan berisi daftar kategori yang mengalami over-budget.