FinTrack

# Pengeluaran Harian - Fintech Dashboard

Aplikasi **Pengeluaran Harian** adalah sebuah dashboard finansial modern yang dirancang untuk mencatat dan memantau pengeluaran harian dengan antarmuka premium, *dark mode*, dan efek *glassmorphism*. Dibangun menggunakan ekosistem React terkini, aplikasi ini menawarkan pengalaman pengguna setingkat SaaS (Software as a Service) dengan performa tinggi dan animasi yang responsif.

## ✨ Fitur Utama

- **Premium UI/UX:** Desain antarmuka *dark mode* permanen yang elegan dengan tekstur dan *glassmorphism* untuk tampilan futuristik dan profesional.
- **Manajemen Transaksi Lengkap:** Tambah, edit, dan hapus data pengeluaran dengan form interaktif serta *confirmation modal* yang aman.
- **Visualisasi Data Interaktif:** Grafik analitik pengeluaran harian dan bulanan yang responsif menggunakan Recharts.
- **Animasi Mulus:** Transisi antar halaman, efek *hover*, *loading state*, dan *pop-up modal* yang ditenagai oleh Framer Motion.
- **Backend & Database:** Integrasi langsung dengan Supabase untuk manajemen *user* dan penyimpanan data (*PostgreSQL*) yang cepat dan aman.
- **Komponen Modern:** Penggunaan *custom date picker*, tabel responsif dengan *sticky header*, serta ikon-ikon modern dari Lucide React.
- **Fully Responsive:** Tata letak grid yang rapi dan optimal untuk berbagai ukuran layar (desktop, tablet, maupun seluler) dengan *mobile-drawer navigation*.

## 🚀 Teknologi yang Digunakan

- **Frontend Core:** [React 19](https://react.dev/) + [Vite](https://vitejs.dev/) + [React Router](https://reactrouter.com/)
- **Styling:** [Tailwind CSS](https://tailwindcss.com/)
- **Animasi:** [Framer Motion](https://www.framer.com/motion/)
- **Chart / Grafik:** [Recharts](https://recharts.org/)
- **Ikonografi:** [Lucide React](https://lucide.dev/)
- **Utilitas Waktu:** [date-fns](https://date-fns.org/)
- **Backend (BaaS):** [Supabase](https://supabase.com/)

## 📦 Instalasi & Cara Menjalankan Lokal

Ikuti langkah-langkah di bawah ini untuk menjalankan proyek secara lokal:

### 1. Persiapan
Pastikan [Node.js](https://nodejs.org/) sudah terinstal di sistem Anda.

### 2. Kloning Repositori
```bash
git clone <url-repositori-anda>
cd pengeluaran-harian
```

### 3. Instalasi Dependensi
```bash
npm install
```

### 4. Konfigurasi Environment (Supabase)
Buat file bernama `.env` atau `.env.local` di *root* direktori proyek, lalu isi dengan kredensial proyek Supabase Anda:
```env
VITE_SUPABASE_URL=https://[PROJECT-ID].supabase.co
VITE_SUPABASE_ANON_KEY=[YOUR-ANON-KEY]
```

### 5. Menjalankan Development Server
```bash
npm run dev
```
Buka browser dan akses `http://localhost:5173/` untuk melihat aplikasi.

## 🗄️ Setup Database (Supabase)

Proyek ini telah menyediakan file SQL untuk mempermudah setup database di Supabase:
1. Buka *SQL Editor* di *dashboard* Supabase Anda.
2. Jalankan isi dari `setup-profiles.sql` untuk menyiapkan tabel profil dan *trigger* yang diperlukan.
3. Jalankan isi dari `fix-expenses-table.sql` jika diperlukan untuk mengatur struktur tabel pengeluaran atau menyelesaikan isu-isu skema (seperti *null constraint*).

## 📄 Lisensi

Proyek ini dibuat untuk keperluan *personal/private tracking* dan merupakan prototipe aplikasi finansial.