Papicode
PREMIUMNext.js

Sistem Pembayaran Iuran Warga

Rp 50.000

Deskripsi

Website manajemen iuran perumahan digital pembayaran IPL online, tagihan warga, kwitansi otomatis, dan laporan keuangan real-time.

Sistem

Sistem ini melayani tiga peran Super Admin mengelola seluruh perumahan dan admin di bawahnya beserta audit log, Admin Perumahan mengatur blok, rumah, warga, jenis iuran, tagihan, dan laporan keuangan per perumahan, sedangkan Warga cukup membuka dashboard untuk melihat tagihan aktif, membayar langsung via QRIS/VA/e-wallet, mengunduh kwitansi, dan memantau riwayat pembayaran mereka. Seluruh proses dari penagihan hingga pelunasan berjalan otomatis, termasuk pengingat via WhatsApp dan denda keterlambatan terjadwal, sehingga pengurus tidak perlu lagi menagih manual dari rumah ke rumah.

Fitur

  • Pembayaran iuran online (QRIS, Virtual Account, transfer bank, e-wallet, kartu kredit)
  • Dashboard multi-role: Super Admin, Admin Perumahan, Warga
  • Kelola blok, rumah, warga, dan jenis iuran (IPL, keamanan, kebersihan, air, sampah, dll)
  • Kwitansi digital otomatis yang bisa diakses publik lewat link tanpa login
  • Pengingat tagihan otomatis via WhatsApp
  • Denda keterlambatan otomatis (terjadwal via cron)
  • Laporan keuangan dan statistik per perumahan maupun gabungan
  • PWA — bisa dipakai offline dan dapat notifikasi push
  • Mode demo tanpa perlu setup database sama sekali

Panduan Instalasi

  1. Extract & install dependency
unzip urunan-iuran-source.zip -d urunan-iuran
cd urunan-iuran
npm install
  1. Jalankan langsung (mode demo, tanpa setup apa-apa)
npm run dev

Buka http://localhost:3000 — aplikasi langsung jalan pakai data contoh (tidak konek ke database manapun). Cocok buat lihat-lihat tampilan/fitur dulu. 3. Setup database asli (Supabase) — kalau mau data beneran & bisa disimpan

  1. Buat project baru di supabase.com → catat Project URL, anon key, dan service_role key (Settings → API).
  2. Salin .env.example jadi .env.local:
cp .env.example .env.local
  1. isi .env.local dengan kredensial Supabase tadi:
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxxx
SUPABASE_SERVICE_ROLE_KEY=xxxxx
  1. Migrasi skema database File migrasi ada di folder supabase/migrations/ (urut sesuai nomor file). Ada dua cara:
    1. via supabase
npx supabase login
npx supabase link --project-ref xxxxx   # project-ref dari URL project Supabase kamu
npx supabase db push
  1. Manual via SQL Editor: buka Supabase Dashboard → SQL Editor → copy-paste isi tiap file di supabase/migrations/ satu per satu, urut dari nomor terkecil, lalu klik Run. Juga jalankan setup_db.sql di root project kalau ada tabel tambahan di situ.
  2. Isi data contoh (opsional, biar dashboard nggak kosong)
npx tsx scripts/seed-supabase.ts

Script ini bikin 5 perumahan, 10 warga per perumahan, admin, data keuangan, dan tagihan dengan berbagai status (lunas/tunggakan/pending) — otomatis aman dijalankan ulang. 6. Jalankan ulang aplikasi

npm run dev
  1. (Opsional) Aktifkan pembayaran & notifikasi WA asli
    1. Paywuz: isi PAYWUZ_API_KEY di .env.local (dari dashboard Paywuz), lalu set Payment Notification URL di dashboard Paywuz ke http://localhost:3000/api/payments/paywuz-notification (pakai tool seperti ngrok kalau perlu expose ke internet untuk testing webhook).
    2. Fonnte (reminder WA): daftar & connect device di fonnte.com, salin token ke FONNTE_TOKEN.
    3. Denda otomatis: opsional, jadwalkan select public.apply_overdue_fines(); via pg_cron di Supabase kalau mau denda keterlambatan jalan otomatis tiap hari.

Login untuk membeli source code.

Login
Lihat Demo