Jagana — Personal Finance Management & AI Financial Assistant

Platform manajemen keuangan pribadi berbasis web yang membantu pengguna mengelola kondisi finansial secara komprehensif: pencatatan transaksi multi-rekening, budgeting per kategori, penelusuran utang-piutang, target tabungan (saving goals), split bill kelompok, analitik visual, hingga pemindaian struk otomatis berbasis AI (Vision OCR) dan asisten finansial kontekstual. Dibangun mandiri secara end-to-end.

---

Ringkasan Proyek

• Kategori: Personal Project
• Peran: Full-Stack Engineer
• Tech Stack: Next.js (App Router), React, TypeScript, Tailwind CSS, Radix UI, Recharts, Drizzle ORM, PostgreSQL, Supabase Auth (SSR), OpenRouter API (LLM Chat & Vision Parsing), Docker

---

Masalah yang Dihadapi

Pengelolaan keuangan pribadi sering kali terpecah di berbagai media fisik maupun digital (catatan manual, lembar kerja spreadsheet, dan aplikasi terpisah), yang memicu kendala operasional:

• Ketiadaan Visibilitas Real-Time: Ketiadaan satu sumber data terpusat (Single Source of Truth) membuat pengguna kesulitan memantau kondisi arus kas secara langsung.
• Kebocoran Anggaran: Tidak adanya sistem pemantauan batas pengeluaran (budget limit alerts) yang terintegrasi dengan kategori transaksi.
• Fragmentasi Utang-Piutang & Tagihan Rutin: Pencatatan tagihan langganan berkala dan piutang kelompok (split bill) dilakukan secara terpisah tanpa pengingat otomatis.
• Entri Data Berulang: Proses pencatatan transaksi dari struk fisik dilakukan secara manual dan memakan waktu.

---

Solusi & Fitur Utama

1. Dashboard Finansial & Analitik Arus Kas
   Ringkasan total saldo multi-rekening, kalkulasi pemasukan/pengeluaran bulanan, indikator financial health score, visualisasi grafik tren (Recharts), dan rincian transaksi terkini.

2. Manajemen Multi-Rekening & Transfer Instan
   Pengelolaan portofolio rekening (bank, e-wallet, kas tunai) dilengkapi dengan pencatatan mutasi transfer antar-rekening secara atomik.

3. Budgeting per Kategori & Target Tabungan (Saving Goals)
   Pengaturan batas anggaran bulanan per kategori dengan indikator realisasi, serta modul pemantauan alokasi dana untuk target tabungan khusus.

4. Debt & Subscription Management
   Manajemen utang-piutang beserta riwayat cicilan, serta pencatatan transaksi berulang (recurring subscriptions) berbasis frekuensi (mingguan, bulanan, tahunan).

5. Split Bill & Group Expense Settlement
   Fitur pembagian tagihan kelompok untuk menghitung kalkulasi biaya per peserta dan status pelunasan (settlement) secara terstruktur.

6. AI Receipt Scanner (Vision OCR Parsing)
   Pemindaian struk belanja otomatis berbasis AI Vision untuk mengekstrak nominal, tanggal, merchant, dan deskripsi transaksi secara instan tanpa entri manual.

7. Contextual AI Financial Assistant
   Asisten obrolan interaktif yang menganalisis profil ringkasan keuangan pengguna (pemasukan, anggaran, utang, tabungan) untuk memberikan rekomendasi finansial secara kontekstual.

---

Tech Stack & Arsitektur

Jagana disusun menggunakan pola arsitektur Next.js App Router yang memisahkan logika antarmuka, business logic server, dan akses basis data.

• Frontend & Visualization: Next.js (App Router) dan React dalam mode TypeScript Strict, dipadukan dengan Tailwind CSS, Radix UI (accessible primitives), dan Recharts untuk rendering grafik analitik.
• Backend & Database Layer: Next.js Server Actions dan Route Handlers sebagai pengolah logika bisnis, beroperasi di atas Drizzle ORM (type-safe queries) dan PostgreSQL.
• Security & Data Isolation: Supabase Auth SSR mengamankan sesi pengguna di tingkat server (Server Side Rendering) dan mengisolasi akses kueri basis data berbasis user_id.
• AI Gateway Integration: OpenRouter API dimanfaatkan untuk integrasi model LLM (asisten obrolan kontekstual) dan pemrosesan gambar Vision OCR untuk ekstraksi data struk.

---

Tantangan Teknis & Solusi

• Normalisasi Skema Domain Finansial Kompleks:
  Tantangan: Relasi antar-entitas transaksi, anggaran, utang-piutang, tagihan rutin, dan split bill sangat erat dan rawan memicu ketidakkonsistenan data.
  Solusi: Merancang skema relasional ter-normalisasi di Drizzle ORM dan memisahkan logic service layer di backend sesuai domain fungsinya.

• Akurasi & Konsistensi Output AI OCR Struk Belanja:
  Tantangan: Hasil pemindaian gambar dari model vision kerap menghasilkan teks tidak terstruktur atau hallucinated JSON.
  Solusi: Menerapkan strict JSON schema enforcement pada system prompt OpenRouter dan membungkus hasil ekstraksi dengan fungsi validasi/parsing sebelum disajikan ke formulir transaksi pengguna.

• Prompt Augmentation untuk AI Financial Assistant:
  Tantangan: Jawaban asisten AI generik sering kali tidak relevan dengan kondisi finansial nyata pengguna.
  Solusi: Membangun mekanisme context-injected prompt yang menyertakan data agregasi keuangan pengguna (pemasukan, saldo, beban utang, realisasi anggaran) secara aman dalam sesi obrolan.

• Agregasi Data Analitik Dashboard Berkinerja Tinggi:
  Tantangan: Kalkulasi visual grafik dan tren bulanan dari ribuan transaksi berpotensi melambatkan performa rendering client-side.
  Solusi: Memindahkan seluruh proses kalkulasi dan agregasi data statistik ke tingkat server (Server-Side Aggregation) sehingga frontend hanya menerima data siap render.

---

Pembelajaran & Catatan Teknis

• Mengarsitekturkan aplikasi manajemen finansial full-stack dengan pemisahan domain service layer dan data isolation per pengguna (user_id).
• Mengintegrasikan pemrosesan AI Vision OCR dengan penanganan structured JSON output validation untuk otomatisasi entri data.
• Merancang visualisasi grafik analitik yang responsif dan teragregasi secara server-side menggunakan Next.js App Router.