Fina - AI Powered Financial App

Dashboard finansial berbasis AI yang dirancang untuk memangkas friksi pencatatan pengeluaran harian lewat integrasi pemrosesan bahasa alami, input multimodal, dan analitik pengeluaran otomatis.

Fina Intelligence Hub Dashboard

Overview

Kebanyakan aplikasi pencatatan keuangan gagal dipakai jangka panjang karena proses input transaksi yang melelahkan dan penuh friksi. Fina merombak pendekatan pencatatan kas dari akarnya dengan menempatkan Generative AI langsung di tengah alur pengguna. Alih-alih mengisi formulir panjang, memilih dropdown akun, dan memilih kategori secara manual, pengguna cukup mengetik atau berbicara seperti biasa (contohnya: "Beli makan siang di bakery 50rb"). Sistem akan mengekstrak, mengkategorikan, dan menyimpan transaksi ke database secara instan.

Dibangun sebagai proyek implementasi nyata dari materi WPU AI Apps course, Fina tidak sekadar menjadi wrapper prompt, melainkan mengintegrasikan function calling, pemrosesan multimodal, dan alur kerja agentic ke dalam aplikasi full-stack modern.

Fitur Utama

1. Pencatatan Transaksi Berbasis Bahasa Alami & Multimodal

Natural Language Parsing: Input pengeluaran maupun pemasukan dapat dilakukan via teks bebas atau pesan suara.
Gemini Function Calling: Memetakan kalimat acak ke dalam parameter terstruktur (nominal, kategori, catatan, waktu transaksi) secara akurat.
Dukungan Multimodal: Membaca struk belanja atau gambar bukti bayar untuk otomatisasi ekstraksi data pengeluaran.

2. Generative AI Insights & Visualisasi Data

Pusat Wawasan Finansial Interaktif: Pengguna bisa bertanya tentang tren pengeluaran langsung dengan bahasa Indonesia santai (misalnya: "kategori pengeluaran saya bulan ini").
Pembuatan Chart Dinamis: Menggunakan Recharts yang diorkestrasi oleh AI untuk menampilkan pie chart proporsi pengeluaran, perbandingan arus kas, dan grafik tren.
Rekomendasi Cerdas: Memberikan ringkasan kesehatan finansial dan saran penghematan berbasis pola riwayat pengeluaran.

3. Agentic Financial Wizard

Perencanaan Anggaran Terpadu: Asisten berbasis agen yang membimbing penataan batas pengeluaran bulanan dan target tabungan.
Eksekusi Alat Otonom: Menjalankan kueri multi-tahap ke Supabase tanpa menuntut pengguna melakukan navigasi manual.

Arsitektur Sistem

Input Pengguna (Suara / Teks / Gambar)
               │
               ▼
    Next.js 16 (React 19) App Router
               │
    ┌──────────┴──────────┐
    ▼                     ▼
Gemini API 2.5        Supabase DB & Auth
(@google/genai)       (PostgreSQL + Migrasi)
Function Calling          │
    │                     ▼
    └──────────────► TanStack Query Cache
                          │
                          ▼
              Recharts & Dashboard UI Dinamis

Frontend & Runtime: Next.js 16 dengan React 19 App Router, memanfaatkan SSR dan client components reaktif untuk performa optimal.
AI Core: SDK resmi @google/genai (Gemini API) untuk memproses teks, multimodal, dan deklarasi fungsi terstruktur yang memanipulasi mutasi data.
Basis Data: Supabase PostgreSQL dengan skrip migrasi terstruktur untuk tabel dompet, kategori, dan rekaman transaksi.
Manajemen State & Antarmuka: TanStack Query untuk caching data yang sinkron, didukung Radix UI dan Tailwind CSS v4.

Tech Stack

Framework: Next.js 16, React 19 (App Router)
AI Engine: Google Gemini API (@google/genai), Function Calling, Multimodal
Database: Supabase (PostgreSQL)
Data Fetching: TanStack Query (React Query)
Form & Validasi: React Hook Form, Zod
Styling & UI: Tailwind CSS v4, Radix UI, Lucide Icons
Visualisasi Data: Recharts