ElTrack

ElTrack adalah aplikasi pencatatan keuangan pribadi berbasis web untuk membantu pengguna memantau pemasukan, pengeluaran, kategori belanja, metode pembayaran, dan ringkasan dashboard bulanan dalam satu tempat.

Tujuan

Tujuan utama ElTrack adalah membuat pencatatan keuangan harian terasa lebih sederhana, cepat, dan mudah dibaca. Aplikasi ini dirancang supaya pengguna bisa:

• mencatat transaksi harian dengan rapi
• melihat ringkasan finansial bulanan
• memahami pola pengeluaran berdasarkan kategori dan metode pembayaran
• memanfaatkan chatbot AI untuk bantuan interaksi data tertentu

Release

Version: 1.0.0-beta.14

Status: Beta

Fokus versi sekarang:

• autentikasi pengguna
• pencatatan transaksi
• dashboard home
• Goals untuk target menabung dan investasi berbasis Kantong
• Langganan untuk subscription dan tagihan rutin dengan reminder in-app dan Web Push
• hotfix aktivasi Web Push agar tidak loading terus di production
• dropdown Catatan Keuangan mobile yang aman untuk opsi panjang
• chatbot AI dengan insight finansial read-only dan prompt keamanan yang lebih ketat

Fitur

• Login dengan Better Auth (Google provider only)
• Dashboard home dengan:
  • total saldo
  • total pengeluaran
  • total penghasilan
  • rata-rata pengeluaran harian
  • chart tren pengeluaran vs penghasilan
  • distribusi pengeluaran per kategori
  • pengeluaran per metode pembayaran
  • transaksi terbaru
  • top kategori bulan berjalan
• Catatan keuangan:
  • mode tabel
  • mode kalender
  • tambah, ubah, hapus transaksi
• Manajemen Kantong:
  • pencatatan saldo dan sumber dana
  • transfer antar kantong (pemindahan dana)
• Goals:
  • target menabung dan investasi berbasis Kantong
  • progress otomatis dari saldo Kantong terkait
  • media bebas seperti Reksadana, Tabungan Bank, Deposito, Emas, Saham, atau Crypto
• Langganan:
  • catatan subscription aktif dan tagihan rutin
  • reminder in-app dan Web Push untuk H-N, H-1, hari H, dan overdue
  • notifikasi Web Push opt-in per perangkat dengan cron harian
  • catat pembayaran manual ke transaksi pengeluaran
  • kategori Langganan otomatis saat pembayaran dicatat
• Master data:
  • kategori
  • metode pembayaran
  • tipe transaksi
• Chatbot AI dengan TanStack AI + Gemini untuk preview transaksi dan insight finansial read-only

Tech Stack

• TanStack Start + Vite
• React 19
• TypeScript
• Tailwind CSS
• Better Auth (Google provider only)
• MongoDB + Mongoose
• TanStack AI
• Gemini API
• ApexCharts

Struktur Folder

src/
  components/
    chatbot/              # UI chatbot
    dashboard/            # UI dashboard home
    catatan-keuangan/     # UI tabel & kalender transaksi
    layouts/              # layout aplikasi
    langganan/            # UI subscription dan reminder
    selia/                # primitive UI reusable
    shared/               # shared app components
  const/                  # konstanta aplikasi
  db/                     # koneksi DB dan model mongoose
  features/               # backend per feature (repository/service/functions)
    chatbot/
    dashboard/
    langganan/
    kategori/
    metode-pembayaran/
    tipe/
    transaksi/
  hooks/                  # custom hooks
  lib/                    # helper dan utils
  routes/                 # file-based routing TanStack Router
  stores/                 # zustand store
  types/                  # type shared client-side
scripts/
  seed.ts                 # seed data awal

Cara Install

1. Install dependency

npm install

2. Siapkan environment

Copy file contoh env:

cp .env.example .env

Lalu isi value yang dibutuhkan, terutama:

• BETTER_AUTH_SECRET
• BETTER_AUTH_URL
• GOOGLE_CLIENT_ID
• GOOGLE_CLIENT_SECRET
• MONGODB_URI

Jika ingin memakai chatbot AI via Gemini, siapkan juga:

• GOOGLE_API_KEY
• GEMINI_TEXT_MODEL
• GEMINI_VISION_MODEL

3. Jalankan seed data opsional

npm run seed

4. Jalankan aplikasi

npm run dev

App akan berjalan di:

http://localhost:3000

Setup Gemini

Jika ingin memakai fitur chatbot AI, siapkan API key Gemini dari Google AI Studio lalu isi env berikut:

GOOGLE_API_KEY=your_google_ai_api_key
GEMINI_TEXT_MODEL=gemini-2.5-flash-lite
GEMINI_VISION_MODEL=gemini-2.5-flash

Default strategy saat ini:

• chat teks biasa memakai gemini-2.5-flash-lite
• request bergambar atau struk memakai gemini-2.5-flash

Kalau ingin tetap memakai satu model untuk semua request, kamu masih bisa isi GEMINI_MODEL saja sebagai fallback.

Scripts

npm run dev      # menjalankan aplikasi lokal
npm run build    # build production
npm run preview  # preview hasil build
npm run seed     # seed data awal
npm run test     # menjalankan test

Environment Example

Lihat file /.env.example

Saran Pengembangan Berikutnya

• export laporan keuangan
• filter dashboard lebih fleksibel
• insight AI yang lebih kontekstual
• pengaturan profil dan preferensi pengguna