SeretDana / Fluidana

Fluidana (juga dikenal sebagai SeretDana) adalah aplikasi pencatatan keuangan pribadi modern berbasis web yang dirancang khusus untuk mahasiswa dan generasi muda. Aplikasi ini membantu pengguna dalam melacak pengeluaran, membuat anggaran bulanan, mengatur tujuan keuangan (tabungan), dan memantau tagihan yang harus dibayar.

Fitur Utama

• Dashboard Interaktif: Ringkasan lengkap mengenai sisa saldo, persentase pengeluaran, dan batas pengeluaran harian.
• Auto-Categorization: Pengeluaran secara otomatis dikategorikan berdasarkan deskripsi (misalnya: "Makan di warteg" otomatis masuk ke "Makanan & Minuman").
• Manajemen Anggaran: Pantau batas anggaran untuk setiap kategori.
• Tujuan Keuangan (Savings Goals): Buat target tabungan dan pantau progresnya.
• Tagihan: Pengingat tagihan bulanan atau rutin (Kos, Listrik, Internet).

Teknologi yang Digunakan

• Frontend: Vue.js 3 (Composition API), Vite, Vue Router
• Styling: Tailwind CSS, Headless UI (Heroicons)
• Animasi: AOS (Animate on Scroll), VueUse Motion
• Backend/BaaS: Supabase (PostgreSQL, Authentication, Row-Level Security)

Struktur Direktori

Setelah dilakukan refactoring, struktur direktori proyek menjadi lebih modular:

src/
├── assets/          # Logo, gambar, dan aset statis
├── components/      # Komponen UI modular
│   ├── dashboard/   # Komponen khusus halaman dashboard (Cards, Lists)
│   ├── landing/     # Komponen khusus halaman landing page
│   ├── layout/      # Komponen layout (Sidebar, MobileNav)
│   └── modal/       # Komponen modal serbaguna
├── composables/     # (Opsional) Vue composables untuk logika state
├── lib/             # Konfigurasi eksternal (Supabase client)
├── router/          # Konfigurasi Vue Router (index.js)
├── utils/           # Fungsi utilitas murni
│   ├── categoryHelper.js # Logika klasifikasi kategori otomatis
│   └── formatters.js     # Helper format mata uang dan tanggal
├── views/           # Halaman utama aplikasi (Dashboard, Auth, Landing)
├── App.vue          # Root component
├── main.js          # Entry point aplikasi
└── style.css        # Global styles

Cara Menjalankan Proyek Secara Lokal

1. Prasyarat

• Node.js (v16 atau lebih baru direkomendasikan)
• Akun Supabase (untuk backend)

2. Instalasi Dependensi

Jalankan perintah berikut di terminal:

npm install

3. Konfigurasi Environment Variables

Buat file .env.local di root proyek dan tambahkan kredensial Supabase Anda:

VITE_SUPABASE_URL=https://project-id.supabase.co
VITE_SUPABASE_ANON_KEY=ey...

4. Menjalankan Server Pengembangan

npm run dev

Buka browser dan akses URL lokal yang diberikan (biasanya http://localhost:5173).

5. Build untuk Produksi

npm run build

Kontribusi

Panduan untuk developer:

1. Komponen halaman (Pages) berada di folder src/views/.
2. Komponen kecil (UI) berada di folder src/components/.
3. Tambahkan rute baru di src/router/index.js.
4. Jika membuat fungsi logika yang kompleks (tanpa UI), letakkan di folder src/utils/ atau src/composables/.