DompetQu - Aplikasi Manajemen Keuangan

DompetQu adalah aplikasi web modern untuk mengelola keuangan pribadi dengan antarmuka yang profesional dan fitur-fitur canggih.

✨ Fitur Utama

🏠 Dashboard

• Ringkasan keuangan real-time
• Kartu ringkasan pemasukan, pengeluaran, dan saldo
• Grafik pengeluaran berdasarkan kategori
• Transaksi terbaru

💰 Manajemen Transaksi

• Tambah, edit, dan hapus transaksi
• Kategori pemasukan dan pengeluaran
• Filter berdasarkan tanggal dan kategori
• Pencarian transaksi

📊 Budget & Perencanaan

• Set budget bulanan per kategori
• Tracking progress budget
• Notifikasi ketika mendekati batas

📈 Laporan & Analitik

• Laporan bulanan dan tahunan
• Grafik perbandingan kategori
• Export data ke CSV
• Analisis tren pengeluaran

🚀 Teknologi yang Digunakan

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Styling: Custom CSS dengan Grid & Flexbox
• Charts: Chart.js untuk visualisasi data
• Icons: Font Awesome
• Backend: Flask (Python)
• Storage: Local Storage + API

🛠️ Cara Menjalankan

Persyaratan Sistem

• Python 3.7+
• Browser modern (Chrome, Firefox, Safari, Edge)

Langkah Instalasi

1. Clone atau download proyek ini

   git clone <repository-url>
   cd DompetQu

2. Jalankan server Flask

   python simple_app.py

3. Buka browser dan akses

   http://localhost:5000
   

📱 Fitur Responsif

Aplikasi DompetQu dirancang dengan pendekatan mobile-first dan sepenuhnya responsif:

• Desktop: Layout penuh dengan sidebar navigation
• Tablet: Layout terkompresi dengan navigation collapsed
• Mobile: Single column layout dengan hamburger menu

🎨 Desain & UI/UX

Tema Warna

• Primary: Biru profesional (#2563eb)
• Secondary: Abu-abu netral (#6b7280)
• Accent: Hijau untuk pemasukan (#10b981)
• Warning: Merah untuk pengeluaran (#ef4444)

Tipografi

• Font Family: Inter (Google Fonts)
• Hierarchy: Clear heading structure
• Readability: Optimized line-height dan spacing

Komponen UI

• Card-based layout
• Smooth animations dan transitions
• Consistent spacing system
• Accessible color contrast

🔧 API Endpoints

Kategori

GET /api/categories

Mengembalikan daftar kategori pemasukan dan pengeluaran.

Transaksi

GET /api/transactions
POST /api/transactions
PUT /api/transactions/:id
DELETE /api/transactions/:id

Mengelola data transaksi (memerlukan autentikasi).

Dashboard

GET /api/dashboard

Mengembalikan ringkasan data dashboard.

📊 Data Sample

Aplikasi dilengkapi dengan data sample untuk testing:

• 10+ kategori siap pakai
• Transaksi contoh untuk berbagai periode
• Budget sample untuk testing

🔒 Keamanan & Privacy

• Data disimpan secara lokal di browser
• Tidak ada data yang dikirim ke server eksternal
• API endpoints memerlukan autentikasi
• Fallback ke local storage jika API gagal

🚀 Deployment

Untuk Production

1. Konfigurasi environment variables
2. Setup database untuk persistence
3. Configure reverse proxy (nginx/apache)
4. Enable HTTPS dengan SSL certificate

Static Hosting

Aplikasi dapat di-host sebagai static files dengan backend API terpisah.

🤝 Kontribusi

1. Fork repository
2. Buat branch fitur baru (git checkout -b feature/AmazingFeature)
3. Commit perubahan (git commit -m 'Add some AmazingFeature')
4. Push ke branch (git push origin feature/AmazingFeature)
5. Buat Pull Request

📝 Lisensi

Proyek ini menggunakan lisensi MIT. Lihat file LICENSE untuk detail lebih lanjut.

📞 Dukungan

Jika Anda mengalami masalah atau memiliki pertanyaan:

1. Periksa bagian Troubleshooting di bawah
2. Buat issue di repository GitHub
3. Kontak tim development

🔍 Troubleshooting

Server tidak bisa start

# Pastikan port 5000 tidak digunakan
lsof -i :5000

# Gunakan port alternatif
python simple_app.py --port 8000

Chart tidak muncul

• Pastikan koneksi internet untuk Chart.js CDN
• Periksa console browser untuk error JavaScript

Data tidak tersimpan

• Periksa localStorage browser
• Pastikan JavaScript tidak disabled

Dibuat dengan ❤️ untuk membantu Anda mengelola keuangan dengan lebih baik.

DompetQu - Kelola Keuangan, Kuasai Masa Depan!