Lewati ke konten
Skematik
Semua templateBikin PRD gratis
Semua template
Mobile App

Catat Keuangan Pribadi

Aplikasi mobile offline-first untuk mencatat pemasukan dan pengeluaran pribadi secara harian dengan kategori, pengingat, dan laporan bulanan bergrafik. Dirancang agar cepat dan mudah digunakan oleh individu yang ingin mengontrol keuangan.

Pakai template

Catat Keuangan Pribadi

Aplikasi mobile offline-first untuk mencatat pemasukan dan pengeluaran pribadi secara harian dengan kategori, pengingat, dan laporan bulanan bergrafik. Dirancang agar cepat dan mudah digunakan oleh individu yang ingin mengontrol keuangan.

Problem

Banyak individu kesulitan melacak pengeluaran harian mereka, menyebabkan ketidakpastian finansial dan potensi overspending. Aplikasi yang ada seringkali terlalu kompleks, memerlukan koneksi internet, atau memiliki antarmuka yang membingungkan bagi pengguna awam.

Goals

  • Pengguna dapat mencatat transaksi (pemasukan/pengeluaran) dalam waktu maksimal 10 detik per transaksi.
  • Pengguna dapat melihat ringkasan saldo terkini dan riwayat transaksi harian/bulanan dengan cepat.
  • Pengguna menerima notifikasi pengingat harian untuk mencatat transaksi pada waktu yang ditentukan.
  • Aplikasi berfungsi penuh tanpa koneksi internet, memastikan aksesibilitas di mana saja dan kapan saja.
  • Aplikasi mendukung hingga 1000 transaksi per bulan tanpa penurunan performa UI yang signifikan (p95 render list < 1.5s).

Non-Goals

  • Sinkronisasi data ke cloud atau antar perangkat.
  • Fitur budgeting yang kompleks atau target keuangan.
  • Integrasi dengan rekening bank, e-wallet, atau layanan keuangan lainnya.
  • Dukungan multi-mata uang atau kurs tukar.
  • Fitur investasi, pinjaman, atau manajemen aset.
  • Autentikasi pengguna atau fitur multi-user.
  • Ekspor data ke format CSV/PDF.

Target Users

  • Mahasiswa/Karyawan Muda — Mencatat pemasukan dan pengeluaran dengan cepat dan mudah, mengkategorikan transaksi untuk memahami pola pengeluaran, serta mendapatkan gambaran keuangan bulanan tanpa perlu koneksi internet.
  • Freelancer/Pekerja Lepas — Mencatat arus kas harian secara mandiri, mengelola kategori pengeluaran bisnis dan pribadi, serta mendapatkan pengingat agar tidak lupa mencatat transaksi.

User Stories

  • must-have
    Sebagai pengguna, saya ingin dengan cepat menambahkan transaksi pemasukan atau pengeluaran, agar catatan keuangan saya selalu terbarui tanpa memakan banyak waktu.
  • must-have
    Sebagai pengguna, saya ingin mengategorikan setiap transaksi saya, agar saya bisa melihat ke mana uang saya pergi dan mengidentifikasi area pengeluaran utama.
  • should-have
    Sebagai pengguna, saya ingin menerima pengingat harian untuk mencatat transaksi, agar saya tidak lupa memperbarui catatan keuangan saya dan menjaga konsistensi.
  • must-have
    Sebagai pengguna, saya ingin melihat laporan bulanan dengan grafik pengeluaran per kategori, agar saya dapat dengan mudah meninjau kesehatan finansial saya dan membuat keputusan yang lebih baik.
  • should-have
    Sebagai pengguna, saya ingin mengelola daftar kategori (menambah, mengedit, menghapus), agar saya dapat menyesuaikan kategori sesuai dengan kebutuhan dan kebiasaan pengeluaran saya.
  • must-have
    Sebagai pengguna, saya ingin melihat saldo terkini dan riwayat transaksi terbaru di layar utama, agar saya selalu tahu posisi keuangan saya secara sekilas.

User Flow

  1. Pengguna mengunduh dan menginstal aplikasi 'Dompetku'.
  2. Pengguna membuka aplikasi dan melihat layar Dashboard yang menampilkan saldo awal Rp 0 dan daftar transaksi kosong.
  3. Pengguna menekan tombol '+' untuk menambahkan transaksi baru.
  4. Pengguna memilih tipe transaksi 'Pemasukan', memasukkan nominal '500000', deskripsi 'Gaji Bulanan', dan memilih tanggal hari ini. Pengguna menekan 'Simpan'.
  5. Pengguna kembali ke Dashboard dan melihat saldo diperbarui menjadi Rp 500.000 dan transaksi 'Gaji Bulanan' muncul di riwayat.
  6. Pengguna menekan tombol '+' lagi, memilih tipe 'Pengeluaran', memasukkan nominal '25000', deskripsi 'Makan Siang', dan memilih kategori 'Makanan'. Pengguna menekan 'Simpan'.
  7. Pengguna kembali ke Dashboard dan melihat saldo diperbarui menjadi Rp 475.000 dan transaksi 'Makan Siang' muncul di riwayat.
  8. Pengguna menavigasi ke layar 'Kategori' untuk menambahkan kategori baru 'Transportasi'.
  9. Pengguna menavigasi ke layar 'Pengaturan', mengaktifkan 'Pengingat Harian', dan mengatur waktu ke pukul 19:00.
  10. Pada pukul 19:00, pengguna menerima notifikasi 'Jangan lupa catat transaksi hari ini!'.
Memuat diagram…

Features

Input Transaksi (Pemasukan & Pengeluaran)

must-have

Pengguna dapat menambahkan transaksi baru dengan nominal, deskripsi, tanggal, tipe (pemasukan/pengeluaran), dan kategori.

  • Pengguna dapat mengisi nominal, deskripsi (opsional), tanggal (default hari ini), tipe, dan memilih kategori (opsional) pada form input transaksi.
  • Nominal transaksi harus berupa angka positif dan tidak boleh nol; input negatif atau nol akan ditolak dengan pesan kesalahan.
  • Setelah transaksi disimpan, saldo total di dashboard akan diperbarui secara otomatis.
  • Pengguna dapat melihat transaksi yang baru ditambahkan dalam daftar riwayat transaksi.

Manajemen Kategori

should-have

Pengguna dapat melihat, menambah, mengedit, dan menghapus kategori untuk transaksi mereka.

  • Pengguna dapat melihat daftar kategori yang ada, menampilkan nama dan tipe (jika ada).
  • Pengguna dapat menambahkan kategori baru dengan nama unik dan tipe (opsional, bisa untuk pemasukan atau pengeluaran).
  • Pengguna dapat mengedit nama atau tipe kategori yang sudah ada.
  • Kategori tidak dapat dihapus jika ada transaksi aktif yang menggunakannya; sistem akan menampilkan pesan kesalahan yang relevan.
  • Nama kategori harus unik (case-insensitive) untuk kategori yang aktif; penambahan kategori dengan nama duplikat akan ditolak.

Pengingat Harian

should-have

Pengguna dapat mengaktifkan atau menonaktifkan pengingat harian untuk mencatat transaksi pada waktu yang ditentukan.

  • Pengguna dapat mengaktifkan/menonaktifkan fitur pengingat harian melalui layar pengaturan.
  • Pengguna dapat memilih waktu spesifik (jam dan menit) untuk pengingat harian.
  • Aplikasi akan mengirimkan notifikasi lokal pada waktu yang ditentukan setiap hari jika fitur diaktifkan.
  • Notifikasi akan berisi pesan sederhana seperti 'Jangan lupa catat transaksi hari ini!'.

Laporan Bulanan & Grafik

must-have

Menampilkan ringkasan keuangan bulanan, termasuk total pemasukan, pengeluaran, dan grafik distribusi pengeluaran per kategori.

  • Pengguna dapat memilih bulan dan tahun untuk melihat laporan.
  • Laporan akan menampilkan total pemasukan dan total pengeluaran untuk bulan yang dipilih.
  • Grafik batang akan menampilkan 5 kategori pengeluaran terbesar untuk bulan tersebut, dengan 'Lain-lain' untuk sisanya.
  • Jika tidak ada transaksi di bulan yang dipilih, laporan akan menunjukkan total nol dan grafik kosong dengan pesan 'Tidak ada data'.

Ringkasan Saldo & Riwayat Transaksi

must-have

Menampilkan saldo keuangan terkini dan daftar riwayat transaksi terbaru di layar utama.

  • Saldo terkini (total pemasukan - total pengeluaran) ditampilkan dengan jelas di bagian atas layar dashboard.
  • Daftar riwayat transaksi terbaru (minimal 10 transaksi terakhir) ditampilkan di bawah saldo.
  • Setiap entri transaksi di riwayat menampilkan tanggal, deskripsi, kategori, nominal, dan tipe (pemasukan/pengeluaran).
  • Pengguna dapat melihat daftar transaksi lengkap dengan opsi filter berdasarkan tipe dan kategori, serta sorting berdasarkan tanggal atau nominal.

Tech Stack

Frontend: React Native
Backend: Tidak ada (Offline-first)
Database: SQLite (via Expo SQLite)
Hosting: Google Play Store & Apple App Store

Aplikasi ini dirancang sebagai aplikasi mobile offline-first, dengan penyimpanan data sepenuhnya di perangkat pengguna menggunakan SQLite.

Architecture

Aplikasi ini mengadopsi arsitektur mobile offline-first. Antarmuka pengguna (UI) berinteraksi langsung dengan database lokal SQLite di perangkat. Logika bisnis diimplementasikan dalam lapisan layanan yang mengelola operasi database dan persiapan data untuk tampilan.

UI Layer (React Native Components)

Menampilkan antarmuka pengguna, menerima input dari pengguna, dan menavigasi antar layar. Berinteraksi dengan Service Layer untuk mengambil dan mengirim data.

Service Layer (Business Logic & Data Access)

Mengandung logika bisnis aplikasi (validasi, perhitungan saldo, agregasi laporan) dan berinteraksi langsung dengan Local Database untuk operasi CRUD. Bertindak sebagai perantara antara UI dan Database.

Local Database (SQLite)

Penyimpanan data transaksi, kategori, dan pengaturan aplikasi secara persisten di perangkat pengguna.

Notification Service (Expo Notifications)

Mengelola penjadwalan dan pengiriman notifikasi lokal untuk pengingat harian.

Alur data

  1. Pengguna berinteraksi dengan UI (misalnya, mengisi form transaksi).
  2. UI mengirim data transaksi ke Service Layer.
  3. Service Layer memvalidasi data, melakukan perhitungan saldo, dan menyimpan transaksi ke Local Database.
  4. Local Database mengembalikan status operasi ke Service Layer.
  5. Service Layer memperbarui state aplikasi dan memberi tahu UI untuk menampilkan data terbaru (misalnya, saldo baru atau daftar transaksi yang diperbarui).
  6. Untuk laporan, UI meminta data dari Service Layer dengan parameter bulan/tahun.
  7. Service Layer mengambil data dari Local Database, mengagregasinya, dan mengembalikannya ke UI untuk ditampilkan dalam bentuk tabel dan grafik.
  8. Notification Service membaca pengaturan pengingat dari Local Database dan menjadwalkan notifikasi lokal harian.
Memuat diagram…

Database Schema

Ini struktur data aplikasimu. Kamu tidak perlu paham semuanya — AI yang akan membuatnya. Kolom created_at/updated_at ditambahkan otomatis tiap tabel.

transactionsMenyimpan catatan pemasukan dan pengeluaran harian pengguna.
iduuidPrimary Key
amountnumericNominal transaksi, selalu positif. Tipe transaksi (income/expense) ditentukan oleh kolom 'type'.
descriptiontextDeskripsi singkat transaksi
transaction_datetimestampTanggal dan waktu transaksi (default saat ini)
typeenum:TransactionTypeTipe transaksi: Pemasukan (INCOME) atau Pengeluaran (EXPENSE)
category_iduuidForeign Key ke tabel categories
categoriessoft deleteDaftar kategori untuk mengelompokkan transaksi.
iduuidPrimary Key
nametextNama kategori, unik hanya untuk baris aktif — partial unique index (UNIQUE WHERE deleted_at IS NULL)
typeenum:TransactionTypeTipe kategori (opsional, bisa untuk INCOME atau EXPENSE). Jika null, bisa dipakai untuk keduanya.
settingsMenyimpan pengaturan aplikasi, seperti preferensi pengingat.
iduuidPrimary Key. Hanya akan ada satu baris (misal dengan ID statis '1' atau selalu ambil baris pertama).
reminder_enabledbooleanStatus apakah pengingat harian aktif atau tidak (default false)
reminder_timetextWaktu pengingat harian dalam format HH:MM (mis. '19:00'). Null jika pengingat tidak aktif.

Relasi

  • transactions.category_id → categories.id (many-to-one)
Memuat diagram…

Struktur Folder

Struktur ini dikunci agar AI agent membangun dengan susunan file yang sama.

  • src/ — Kode sumber aplikasi
  • src/components/ — Komponen UI yang dapat digunakan kembali (atom, molecules)
  • src/screens/ — Layar/halaman utama aplikasi (organisms, templates)
  • src/navigation/ — Konfigurasi navigasi React Navigation
  • src/database/ — Inisialisasi database dan skema migrasi
  • src/services/ — Logika bisnis dan interaksi dengan database
  • src/utils/ — Fungsi-fungsi utilitas dan helper
  • src/hooks/ — Custom React Hooks
  • src/assets/ — Aset statis seperti gambar dan font
  • src/notifications/ — Logika terkait notifikasi
  • src/types/ — Definisi tipe TypeScript

Enum

TransactionTypeINCOME · EXPENSE

Library Inti

react-native · frontendexpo-sqlite · frontendreact-navigation · frontendreact-native-chart-kit · frontendexpo-notifications · frontenddate-fns · sharedzod · shared

Tasks (siap kirim ke AI agent)

T1
Setup Proyek React Native & Navigasi Dasar· M

Inisialisasi proyek React Native dengan Expo, siapkan struktur folder dasar, dan konfigurasi navigasi antar layar (Dashboard, Transaksi, Kategori, Laporan, Pengaturan).

Lihat isi perintah
Buat proyek React Native baru menggunakan Expo. Instal 'react-navigation/native' dan 'react-navigation/stack'. Buat file 'src/navigation/AppNavigator.js' untuk mengatur stack navigator dengan layar 'Dashboard', 'TransactionForm', 'Categories', 'Reports', dan 'Settings'. Pastikan navigasi dasar berfungsi.
T2
Inisialisasi Database Lokal (SQLite)· M· Butuh dulu: T1

Konfigurasi SQLite menggunakan `expo-sqlite` dan buat skema tabel awal (`transactions`, `categories`, `settings`).

Lihat isi perintah
Instal 'expo-sqlite'. Buat file 'src/database/database.js' yang berisi fungsi untuk membuka database dan menjalankan migrasi awal untuk membuat tabel 'transactions', 'categories', dan 'settings' sesuai skema yang telah ditentukan. Pastikan tabel dibuat dengan benar saat aplikasi pertama kali dijalankan.
T3
Implementasi Model Data (TypeScript)· S· Butuh dulu: T2

Definisikan interface TypeScript untuk entitas `Transaction`, `Category`, dan `Setting` agar konsisten di seluruh aplikasi.

Lihat isi perintah
Buat file 'src/types/index.ts'. Definisikan interface TypeScript untuk ITransaction, ICategory, dan ISetting yang merefleksikan skema database. Sertakan enum TransactionType ('INCOME', 'EXPENSE').
T4
Layar Dashboard (Ringkasan Saldo & Transaksi Terbaru)· L· Butuh dulu: T3

Buat komponen UI untuk layar dashboard yang menampilkan saldo terkini dan daftar transaksi terbaru.

Lihat isi perintah
Buat komponen 'src/screens/DashboardScreen.js'. Tampilkan placeholder untuk 'Saldo Terkini' dan daftar 'Transaksi Terbaru'. Tambahkan tombol '+' untuk navigasi ke form input transaksi. Gunakan `useState` dan `useEffect` untuk memuat data placeholder.
T5
Form Input Transaksi (UI)· M· Butuh dulu: T4

Rancang dan implementasikan antarmuka pengguna untuk menambahkan transaksi baru, termasuk input nominal, deskripsi, tanggal, tipe, dan kategori.

Lihat isi perintah
Buat komponen 'src/screens/TransactionFormScreen.js'. Desain form dengan input untuk nominal (TextInput numerik), deskripsi (TextInput), tanggal (DatePicker), tipe (SegmentedControl/RadioGroup untuk Pemasukan/Pengeluaran), dan kategori (Picker/Dropdown). Tambahkan tombol 'Simpan'.
T6
Logika Input Transaksi (Service & DB)· L· Butuh dulu: T5

Implementasikan fungsi untuk menyimpan transaksi ke database lokal dan memperbarui saldo total.

Lihat isi perintah
Buat file 'src/services/transactionService.js'. Implementasikan fungsi `addTransaction(transaction: ITransaction)` yang memvalidasi input (nominal > 0) dan menyimpan data ke tabel `transactions` di SQLite. Setelah berhasil, hitung ulang saldo total dari semua transaksi dan perbarui tampilan di DashboardScreen.
T7
Layar Daftar Kategori (UI)· M· Butuh dulu: T4

Buat antarmuka pengguna untuk menampilkan daftar kategori yang ada dan tombol untuk menambah kategori baru.

Lihat isi perintah
Buat komponen 'src/screens/CategoriesScreen.js'. Tampilkan daftar kategori dalam FlatList. Tambahkan tombol 'Tambah Kategori' yang menavigasi ke form tambah/edit kategori. Setiap item kategori harus memiliki opsi untuk mengedit atau menghapus.
T8
Logika CRUD Kategori (Service & DB)· L· Butuh dulu: T7

Implementasikan fungsi untuk menambah, mengedit, dan menghapus kategori dari database lokal, termasuk penanganan validasi nama unik dan relasi dengan transaksi.

Lihat isi perintah
Buat file 'src/services/categoryService.js'. Implementasikan fungsi `addCategory(name: string, type: TransactionType)` yang memastikan nama unik (case-insensitive) dan menyimpan ke tabel `categories`. Implementasikan `updateCategory(id: string, name: string, type: TransactionType)`. Implementasikan `deleteCategory(id: string)` yang menolak penghapusan jika ada transaksi yang mereferensikannya, dengan pesan kesalahan yang jelas. Pastikan `softDelete` diimplementasikan untuk kategori.
T9
Integrasi Kategori ke Form Transaksi· S· Butuh dulu: T6, T8

Hubungkan daftar kategori yang sudah ada ke form input transaksi agar pengguna bisa memilih kategori.

Lihat isi perintah
Di 'src/screens/TransactionFormScreen.js', ambil daftar kategori dari `categoryService.getAllCategories()` dan tampilkan dalam komponen Picker/Dropdown. Pastikan pengguna dapat memilih kategori dan `category_id` disimpan bersama transaksi.
T10
Layar Laporan Bulanan (UI)· M· Butuh dulu: T4

Buat antarmuka pengguna untuk layar laporan bulanan, termasuk pemilih bulan/tahun dan area untuk menampilkan total dan grafik.

Lihat isi perintah
Buat komponen 'src/screens/ReportsScreen.js'. Tambahkan komponen pemilih bulan/tahun. Tampilkan placeholder untuk 'Total Pemasukan', 'Total Pengeluaran', dan area untuk grafik. Gunakan `useState` untuk mengelola bulan/tahun yang dipilih.
T11
Logika Laporan Bulanan (Service)· L· Butuh dulu: T10

Implementasikan fungsi untuk mengambil dan mengagregasi data transaksi berdasarkan bulan dan tahun untuk laporan.

Lihat isi perintah
Buat file 'src/services/reportService.js'. Implementasikan fungsi `getMonthlyReport(year: number, month: number)` yang mengambil semua transaksi untuk bulan dan tahun yang diberikan (zona waktu Asia/Jakarta). Hitung total pemasukan dan pengeluaran. Agregasi pengeluaran per kategori untuk menyiapkan data grafik. Jika tidak ada transaksi, kembalikan data kosong.
T12
Implementasi Grafik Kategori· M· Butuh dulu: T11

Integrasikan library grafik untuk menampilkan distribusi pengeluaran per kategori di laporan bulanan.

Lihat isi perintah
Instal 'react-native-chart-kit'. Di 'src/screens/ReportsScreen.js', gunakan data yang dihasilkan oleh `reportService.getMonthlyReport` untuk merender grafik batang yang menunjukkan 5 kategori pengeluaran terbesar. Pastikan grafik menampilkan label dan nilai dengan benar.
T13
Layar Pengaturan (UI)· M· Butuh dulu: T4

Buat antarmuka pengguna untuk mengelola pengaturan aplikasi, termasuk toggle pengingat harian dan pemilih waktu.

Lihat isi perintah
Buat komponen 'src/screens/SettingsScreen.js'. Tambahkan toggle switch untuk 'Aktifkan Pengingat Harian' dan pemilih waktu (TimePicker) yang hanya aktif jika pengingat diaktifkan. Tambahkan tombol 'Simpan Pengaturan'.
T14
Logika Pengaturan & Notifikasi· L· Butuh dulu: T13

Implementasikan fungsi untuk menyimpan pengaturan pengingat ke database dan menjadwalkan notifikasi lokal harian.

Lihat isi perintah
Instal 'expo-notifications'. Buat file 'src/services/notificationService.js'. Implementasikan fungsi `saveSettings(settings: ISetting)` yang menyimpan status `reminder_enabled` dan `reminder_time` ke tabel `settings`. Buat fungsi `scheduleDailyReminder(time: string)` yang menjadwalkan notifikasi lokal berulang setiap hari pada waktu yang ditentukan. Pastikan notifikasi dibatalkan dan dijadwalkan ulang saat pengaturan berubah.
T15
Refaktor & Optimasi· L· Butuh dulu: T6, T8, T9, T12, T14

Tinjau ulang kode, perbaiki bug minor, optimasi performa, dan pastikan konsistensi gaya kode.

Lihat isi perintah
Lakukan review menyeluruh pada seluruh codebase. Pastikan semua komponen UI responsif dan konsisten. Optimalkan query database di `transactionService` dan `reportService` untuk performa yang lebih baik. Periksa penanganan error dan validasi di semua form. Pastikan semua dependensi terinstal dan berfungsi dengan baik.

Risks

  • Kehilangan data pengguna jika perangkat rusak atau aplikasi terhapus, karena tidak ada fitur backup cloud di MVP.
  • Potensi penurunan performa UI jika jumlah transaksi sangat besar (puluhan ribu) tanpa optimasi lebih lanjut pada query atau rendering list.
  • Kompleksitas dalam menjamin notifikasi pengingat berfungsi konsisten di berbagai versi dan merek perangkat Android/iOS.
  • Perubahan nama kategori atau tipe transaksi di masa depan tidak akan mengubah data transaksi historis, yang mungkin membingungkan jika tidak ada mekanisme migrasi data historis (namun ini adalah perilaku yang diinginkan untuk akurasi laporan historis).

Open Questions

  • Apakah ada kebutuhan untuk fitur ekspor data (misalnya ke CSV atau PDF) di masa mendatang?