Hello, Cuan Buddies! Want to track your income & expenses using a dashboard that's cool, fast, and mobile-friendly? In this article, we'll create a Financial Dashboard from the repo Wimboro/financial-dashboard complete with login Supabase, data from Google Sheets, and AI Insights using Gemini. Awesome! GitHub
What Will You Get 🎯
- Grafik interaktif: tren bulanan, pembagian kategori, detail harian.
- Mode gelap/terang, desain responsif.
- AI Insights: klik tombol “✨ Dapatkan Wawasan Pengeluaran”.
- Login aman via Supabase, sinkron real-time dari Google Sheets.
- Siap Android via Capacitor (build APK gampang). GitHub
Yang Kamu Butuhkan (Cepat Aja)
- Node.js + npm terpasang.
- Akun Supabase (Project URL + anon key).
- Google Sheet ID (dibuat publik “Anyone with the link can view”).
- Gemini API Key (Google AI Studio).
- (Opsional) Backend URL buat fitur hapus transaksi di produksi. GitHub
Setup Kilat ⚡
# 1) Clone & install
git clone https://github.com/Wimboro/financial-dashboard
cd financial-dashboard
npm install
# 2) Copy env
cp .env.example .env
Isi .env dengan nilai punyamu:
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
VITE_GOOGLE_SHEET_ID=
VITE_GEMINI_API_KEY=
VITE_BACKEND_API_URL_LOCALHOST=http://localhost:4000/api
VITE_BACKEND_API_URL_PRODUCTION=
Semua variabel & struktur repo ada di README proyek. GitHub
Siapkan Layanannya
1) Supabase (Auth)
- Buat project → Settings → API → ambil Project URL & anon public key.
- Detail setup auth ada di
SUPABASE_SETUP.md. GitHub
2) Google Sheets (Sumber Data)
- Buat Sheet dengan kolom: Date, Description, Category, Amount (+ opsional User ID, Timestamp).
- Share: Anyone with the link can view.
- Ambil SHEET_ID dari URL:
.../spreadsheets/d/{SHEET_ID}/edit. GitHub
3) Gemini (AI Insights)
- Go to Google AI Studio, buat API key, tempel ke
.env. GitHub
Jalanin Aplikasi 🚀
# Dev mode (hot reload)
npm run dev
# production build
npm run build
npm run preview
# Quality check
npm run lint
npx tsc --noEmit
Port default: http://localhost:5173. GitHub
Format Data di Google Sheets (Contoh)
| Date | Description | Category | Amount | User ID | Timestamp |
|---|---|---|---|---|---|
| 2024-01-15 | Coffee | Food | -5000 | user123 | 2024-01-15T10:30:00Z |
| 2024-01-15 | Salary | Income | 5000000 | user123 | 2024-01-15T09:00:00Z |
Catatan:
- + = pemasukan, – = pengeluaran
- Tanggal
YYYY-MM-DD, Category bebas (Food, Transport, Salary, dll). GitHub
Fitur di UI yang Bikin Betah 👀
- Monthly Trends: income vs expense per bulan
- Category Breakdown: pie chart pengeluaran
- Daily Analysis: detail transaksi harian
- Dark Mode toggle
- AI Insights dari Gemini via tombol “✨”
Semua fitur ini tersedia di repo & didokumentasikan di README. GitHub
Build Jadi APK Android 📱 (Opsional tapi Rekomended)
Prasyarat: Android Studio, JDK ≥ 11, Android SDK API ≥ 22, Node ≥ 16. GitHub
Langkah:
npm install -g @capacitor/cli
npm run build
npx stamp sync android
npx stamp open android
# Then build APK in Android Studio (Build → Build APKs)
Butuh rilis? ./gradlew assembleRelease di folder android/. Tips & troubleshooting ada di README Android. GitHub
Keamanan (Wajib Baca)
- Jangan commit
.envke repo publik. - Rutin rotate API key.
- Pisahkan env dev vs production. GitHub
Siap Gas? 💪
There you have it—a modern, lightweight financial dashboard that you can take to Android. Go ahead and tweak & customize it to your needs. Don't forget to star the repository! GitHub
A complete reference for features & steps is in the repo's README. The writing style of this article is adapted to follow the content on Hidden Cyber which is relaxed, clear, and practical. You can see an example of the tone & structure in the post about the financial WhatsApp bot on the site. Hidden Cyber
