🌳 Portal Warga Palm Village

Portal Digital Terpadu untuk Kompleks Perumahan Palm Village

Kelola data warga, tagihan IPL (Iuran Pemeliharaan Lingkungan), pembayaran QRIS, laporan keuangan, dan transparansi pengelolaan dana RT/RW — semua dalam satu platform modern yang terinstal sebagai PWA di HP warga.

---

Changelog v1.4.3 — Zero Nominal IPL Recording, Financial Report Sorting & Self-Healing Payments

• Pencatatan IPL Nominal Rp 0 oleh Admin & Bendahara: Kemampuan mengubah nominal pembayaran menjadi Rp 0 (misalnya untuk unit/bulan yang dibebaskan atau disubsidi khusus) disertai perlindungan ketat yang memblokir angka negatif (minus / < 0) di Frontend UI, PostgreSQL DB trigger, dan backend API n8n.
• Self-Healing Transaksi Menggantung (Auto-Cancel Stale): Pembersihan otomatis pada workflow PV API - Payments Cash Create dan PV API - Payments Manual Submit untuk invoice pending/draft lama agar tidak mengunci tagihan (mencegah error 409 PAYMENT_ALREADY_SUBMITTED).
• Interactive Sorting & Quick Search Laporan Keuangan: Penambahan fitur sortir interaktif pada seluruh kolom tabel transaksi rincian laporan keuangan (Periode, Tanggal, Unit, Nama, Kategori, Nominal) serta pencarian real-time.
• Enhanced Resident Name Resolution: Resolusi nama warga otomatis dari data penghuni unit (units.occupant_name) dan metadata pembayaran, serta penyaringan unit demo dari neraca keuangan riil.

---

Changelog v1.4.2 — Resident Pre-population & Visual Denah Enhancements

• Pencatatan Penghuni Tanpa Email (Placeholder Profiles): Pengurus dapat mendaftarkan nama warga dan nomor telepon ke unit rumah tanpa memerlukan email warga. Nama warga langsung tampil utuh di Daftar Rumah, Matriks IPL, dan Laporan.
• Auto-Claim & Rekonsiliasi Akun Google: Deteksi cerdas dan klaim akun pada menu Approval User ketika warga mendaftar/login secara mandiri menggunakan akun Google resmi (Gmail).
• Denah Visual Palm Village Terkini: Pembaruan mapsite resolusi tinggi pada halaman Daftar Rumah dilengkapi modal pratinjau interaktif.
• Penataan Blok CB1 & Isolasi Unit Demo: Standardisasi unit Blok CB1 (CB1/1A & CB1/1B) serta isolasi unit demo untuk menjaga integritas data riil perumahan.

---

Changelog v1.4.1 — DOKU QRIS Production & Transactional Email System

• Universal QRIS Production: Integrasi DOKU QRIS Production aktif dan dapat digunakan langsung oleh seluruh warga dan pengurus perumahan.
• Resilient Checkout & Cancellation: Tombol pembatalan transaksi QRIS yang mengembalikan tagihan secara instan tanpa mengganjal atau memblokir pembayaran via metode lain (Transfer Bank atau Tunai).
• Automated Transactional Emails: Integrasi email transaksional otomatis via worker n8n yang mengirimkan kuitansi berstandar resmi ke Warga serta notifikasi pembayaran masuk ke jajaran Admin, Bendahara, dan Pengurus.
• Clean UI & Versioning: Tampilan antarmuka bersih tanpa embel-embel nama vendor gateway, dilengkapi badge versi aplikasi (v1.4.3) di Header, Halaman Login, dan Footer.

---

---

---

🌟 Sorotan Fitur

🏠 Dashboard Interaktif

Ringkasan status IPL real-time: total tagihan, jumlah terkumpul, tunggakan, dan rasio koleksi — semua dalam kartu statistik yang ringkas.

👨‍👩‍👧‍👦 Manajemen Warga

Database warga lengkap dengan import/export CSV massal, pencarian cerdas, filter multi-kriteria, dan pelacakan status hunian (pemilik/penyewa).

💳 Matriks Pembayaran Multi-Tahun

Grid pembayaran lintas tahun yang memvisualkan status setiap unit per bulan. Pembayaran multi-bulan mendukung transfer/tunai sesuai role, serta QRIS Midtrans Sandbox khusus Admin dan Admin Demo selama masa review.

💰 Pelacakan Pengeluaran

Catat setiap pengeluaran RT dengan bukti kwitansi, kategori terstruktur, dan filter bulanan. Transparansi penuh untuk warga.

📊 Laporan Keuangan & Neraca

Grafik batang & pie interaktif, neraca arus kas otomatis (pemasukan vs pengeluaran), export CSV & print PDF siap audit.

⚙️ Konfigurasi IPL Fleksibel

Besaran IPL = penjumlahan komponen (Kebersihan, Keamanan, dll). Atur denda keterlambatan, jatuh tempo, dan penerima tagihan.

---

🚀 Inovasi & Fitur Unggulan Phase 5 (Terbaru)

Portal Warga Palm Village telah dilengkapi dengan inovasi arsitektur mutakhir untuk kenyamanan, transparansi, dan keamanan maksimal:

---

📋 Status Fitur

Fitur	Status	Detail
🔐 Autentikasi (Login/Register)	✅	Google OAuth 2.0 + Supabase JWT (n8n API ready), 4 role hierarki
🏠 Dashboard & Menu Terkelompok	✅	Statistik real-time, navigasi terkelompok rapi & mobile drawer 100% solid
✏️ Update Profil Mandiri	✅	Warga & staff dapat merubah Nama dan No. HP/WhatsApp secara langsung via modal
👥 Manajemen Warga	✅	CRUD, CSV import/export, search, multi-filter
💳 Matriks Pembayaran	✅	Multi-tahun, multi-bulan, validasi sequential
📋 Daftar Tagihan IPL	✅	Filter periode/status, detail modal, bukti bayar
📊 Laporan Keuangan	✅	Bar chart, pie chart, neraca, thumbnail lampiran pengeluaran, CSV export, print
💰 Pengeluaran	✅	CRUD dengan kwitansi, kategori, filter bulan
⚙️ Pengaturan IPL	✅	Komponen IPL, denda, jatuh tempo, penerima
📱 PWA (Installable)	✅	Service worker, manifest, icon, update prompt
💳 Integrasi QRIS DOKU Production	✅	Universal access (Warga, Pengurus, Bendahara, Admin), webhook real-time, auto-update tagihan
📧 Notifikasi Transaksional Email	✅	n8n MIME worker: Kuitansi Warga & Notifikasi Masuk ke Admin/Bendahara/Pengurus
🤖 Otomasi n8n	✅	Endpoint QRIS Create DOKU, Webhook Production & Transactional Email Worker
📅 Kalender Acara	🚧	Schema DB siap, UI placeholder Phase 2

Legenda: ✅ Implemented  |  🧪 Sandbox / Review  |  🚧 Phase 2 / Planned  |  ⏳ Future

---

🎯 Demo

Mode Demo Tanpa Backend

Aplikasi bisa langsung dijalankan tanpa Supabase menggunakan mode demo. Semua fitur UI berfungsi penuh dengan mock data realistis (15 unit, 16 warga, 100+ tagihan).

Role	Email	Password	Akses
👑 Admin	[email protected]	demo123	Akses penuh sistem (Kelola User & Log)
👁️ Admin Demo	[email protected]	demo123	Read-only untuk fitur lain; pembayaran QRIS diizinkan sebagai pengecualian
💰 Bendahara	[email protected]	demo123	CRUD Pengeluaran, catat tunai & transfer
📋 Pengurus	[email protected]	demo123	Read-only pengeluaran, catat transfer only
🧑 Warga	[email protected]	demo123	Lihat unit & bayar IPL rumah sendiri

---

📸 Screenshots

🔐 Login Page

🏠 Dashboard Admin

👥 Manajemen Warga

💳 Matriks Pembayaran IPL

📊 Laporan Keuangan

💰 Pengeluaran

⚙️ Pengaturan IPL

---

🏗️ Arsitektur

┌─────────────────────────────────────────────────────────────────┐
│                         👤 WARGA / ADMIN                         │
│                   (Browser / PWA di HP & Desktop)                │
└──────────────────────────────┬──────────────────────────────────┘
                               │ HTTPS
                               ▼
┌─────────────────────────────────────────────────────────────────┐
│                    ⚡ VERCEL (React SPA + PWA)                   │
│  ┌──────────┐  ┌───────────┐  ┌──────────┐  ┌───────────────┐  │
│  │ Dashboard │  │ Payment   │  │ Reports  │  │ Settings &    │  │
│  │ & Warga   │  │ Matrix    │  │ & Charts │  │ Expenses      │  │
│  └──────────┘  └───────────┘  └──────────┘  └───────────────┘  │
│         React 18 · Vite 5 · TailwindCSS · React Query           │
└──────┬────────────────────────────────────────────┬─────────────┘
       │ Supabase JS SDK                           │ Webhook / REST
       ▼                                           ▼
┌──────────────────────────────┐   ┌──────────────────────────────┐
│    🟢 SUPABASE CLOUD         │   │      🔄 n8n AUTOMATION       │
│  ┌────────────────────────┐  │   │  ┌────────────────────────┐  │
│  │ Auth + App JWT         │  │   │  │ API Pembayaran QRIS    │  │
│  │ PostgreSQL + RLS       │◄─┼───┼─▶│ Cron Billing Bulanan   │  │
│  │ Storage (Kwitansi)     │  │   │  │ Webhook Midtrans       │  │
│  │ Audit Log              │  │   │  │ Notifikasi WA + Email  │  │
│  └────────────────────────┘  │   │  └────────────────────────┘  │
└──────────────┬───────────────┘   └──────────────┬───────────────┘
               │ API Call                         │ API Call
               ▼                                  ▼
          ┌─────────┐                    ┌─────────────────┐
          │Midtrans │                    │ WhatsApp / SMTP │
          │ (QRIS)  │                    │ (Fonnte/Wablas) │
          └─────────┘                    └─────────────────┘

Alur Pembayaran IPL

Admin/Admin Demo pilih tagihan ──▶ n8n membuat transaksi QRIS
                                              │
                                              ▼
                                  Midtrans Snap Sandbox ──▶ Scan & Bayar
                                              │
                                              ▼
                                      Webhook Midtrans → n8n
                                              │
                                              ▼
                              Validasi notifikasi + update pembayaran/tagihan

---

👥 Role-Based Access Control (RBAC)

Sistem memiliki 4 role utama dan 1 profil Admin Demo read-only. Keamanan diterapkan pada UI serta divalidasi kembali oleh endpoint n8n/database.

Halaman / Fitur	👑 Admin	👁️ Admin Demo	💰 Bendahara	📋 Pengurus	🧑 Warga
🏠 Dashboard	✅	👁️ Lihat saja	✅	✅	✅
👥 Daftar Warga	✅ CRUD + CSV	👁️ Lihat saja	✅ CRUD + CSV	✅ CRUD + CSV	👁️ Lihat saja
💳 Matriks Pembayaran	✅ Semua unit	✅ Semua unit	✅ Semua unit	✅ Semua unit	✅ Unit sendiri
📝 Catat Bayar Tunai	✅	❌	✅	❌	❌
📝 Catat Bayar Transfer	✅	❌	✅	✅	✅ Unit sendiri
💵 Bayar IPL (QRIS Sandbox)	✅	✅	❌	❌	❌
📊 Laporan Keuangan	✅	👁️ Lihat saja	✅	✅	🔒 Blocked
💰 Pengeluaran (CRUD)	✅	👁️ Lihat saja	✅	👁️ Lihat saja	🔒 Blocked
⚙️ Pengaturan IPL (Edit)	✅	👁️ Lihat saja	👁️ Lihat saja	👁️ Lihat saja	🔒 Blocked
👤 Kelola User (CRUD)

---

🛠️ Tech Stack

Kategori	Teknologi	Versi
⚛️ Frontend Framework	React	18.2
⚡ Build Tool	Vite	5.0
🎨 Styling	TailwindCSS	3.4
🔄 State Management	@tanstack/react-query	5.17
📊 Charts	Recharts	3.9
🎯 Icons	React Icons	4.12
📄 CSV Processing	PapaParse	5.5
📱 PWA	vite-plugin-pwa (Workbox)	1.3
🟢 Backend & Auth	Supabase (PostgreSQL + Auth + RLS)	2.39
⚡ Edge Functions	Supabase (Deno/TypeScript)	—
🔄 Automation	n8n (self-hosted)	—
💵 Payment Gateway	Midtrans Snap (QRIS Sandbox)	Sandbox
📲 Notifikasi	WhatsApp (Fonnte/Wablas) + Email (SMTP)	—
🚀 Deployment	Vercel (frontend) + Supabase Cloud (backend)	—

---

⚡ Quick Start

Opsi A: Mode Demo (Tanpa Backend) — ⚡ 2 Menit

# 1. Clone repository
git clone https://github.com/kodok-ijho/PortalWarga.git
cd PortalWarga/client

# 2. Install dependencies
npm install

# 3. Buat file .env (demo mode)
echo "VITE_DEMO_MODE=true" > .env

# 4. Jalankan!
npm run dev

Buka http://localhost:5173, login dengan akun demo (lihat tabel di atas).

---

Opsi B: Production Setup (Dengan Supabase)

1. Clone & Install

git clone https://github.com/kodok-ijho/PortalWarga.git
cd PortalWarga/client
npm install

2. Setup Supabase

1. Buat project baru di supabase.com
2. Buka SQL Editor → paste & run supabase/schema.sql
3. Buka Authentication → enable Email/OTP
4. Buat akun admin awal manual di Auth → Users
5. Set role admin di tabel profiles

3. Konfigurasi Environment

cp .env.example .env

Edit .env:

VITE_DEMO_MODE=false
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-public-key

4. Jalankan

npm run dev

5. Setup n8n API & Midtrans Sandbox

• Konfigurasikan VITE_N8N_API_BASE_URL ke URL webhook n8n.
• Aktifkan workflow pembuatan transaksi QRIS dan webhook notifikasi Midtrans.
• Simpan Midtrans Server Key sebagai credential server-side di n8n, bukan sebagai variable VITE_* atau source frontend.
• Detail implementasi: lihat docs/production/TASK_MIDTRANS_QRIS_SANDBOX.md.

---

🔧 Environment Variables

Variable	Deskripsi	Required	Default
VITE_DEMO_MODE	Aktifkan mode demo (tanpa Supabase)	✅	true
VITE_SUPABASE_URL	URL project Supabase	❌*	—
VITE_SUPABASE_ANON_KEY	Anon public key Supabase	❌*	—
VITE_N8N_API_BASE_URL	Base URL API webhook n8n	❌*	—
VITE_GOOGLE_CLIENT_ID	Client ID Google OAuth untuk login production	❌*	—

*Wajib jika VITE_DEMO_MODE=false

Credential backend dikelola langsung melalui n8n Credentials:

• Midtrans Sandbox Server Key menggunakan credential HTTP Basic Auth.
• Supabase service credential untuk membaca dan memperbarui pembayaran/tagihan.
• Credential notifikasi tambahan (WA/SMTP) bila workflow terkait diaktifkan.

Jangan menuliskan Midtrans Server Key, JWT, atau token transaksi di README, source code, variable VITE_*, maupun repository GitHub.

---

📊 Database Schema

Supabase PostgreSQL dengan 9 tabel, Row Level Security di semua tabel, dan trigger otomatis.

Core Tables (Phase 1)

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│    profiles     │     │      units       │     │    ipl_bills    │
├─────────────────┤     ├──────────────────┤     ├─────────────────┤
│ id (uuid) 🔑    │◀────│ id (bigint) 🔑   │◀────│ id (uuid) 🔑    │
│ full_name       │     │ block            │     │ unit_id → units │
│ phone           │     │ unit_number      │     │ resident_id     │
│ role (enum)     │     │ floor            │     │ period (YYYY-MM)│
│ unit_id → units │     │ size             │     │ amount          │
│ is_active       │     │ is_occupied      │     │ late_fee        │
└─────────────────┘     └──────────────────┘     │ due_date        │
                                                 │ status (enum)   │
┌─────────────────┐                              │ qris_ref        │
│   payments      │◀─────────────────────────────│ payment_id      │
├─────────────────┤                              └─────────────────┘
│ id (uuid) 🔑    │
│ ipl_bill_id     │     ┌──────────────────┐
│ resident_id     │     │    expenses      │
│ amount          │     ├──────────────────┤     (Phase 1 — di mockData)
│ method (enum)   │     │ category         │
│ transaction_id  │     │ amount           │
│ status (enum)   │     │ description      │
│ paid_at         │     │ receipt_url      │
│ metadata (json) │     │ recorded_by      │
└─────────────────┘     └──────────────────┘

Community Tables (Phase 2 — Schema siap)

┌─────────────────┐  ┌──────────────────┐  ┌─────────────────┐
│     events      │  │      rsvp        │  │ forum_categories│
├─────────────────┤  ├──────────────────┤  ├─────────────────┤
│ title           │  │ event_id → events│  │ name (unique)   │
│ description     │  │ resident_id      │  │ description     │
│ event_date      │  │ status (enum)    │  └─────────────────┘
│ location        │  └──────────────────┘  ┌─────────────────┐
│ created_by      │                        │  forum_threads  │
└─────────────────┘                        ├─────────────────┤
                                           │ title           │
                                           │ author_id       │
                                           │ is_pinned       │
                                           │ is_locked       │
                                           └─────────────────┘
                                                      │
                                           ┌─────────────────┐
                                           │   forum_posts   │
                                           ├─────────────────┤
                                           │ thread_id       │
                                           │ author_id       │
                                           │ parent_id (nsted)│
                                           │ content         │
                                           └─────────────────┘

RLS diaktifkan di semua 9 tabel. Helper functions: current_role() dan is_staff() (admin + rt_rw).

Tabel	SELECT	INSERT	UPDATE	DELETE
profiles	Self / Staff	Self	Self	—
units	Everyone	Admin	Admin	Admin
ipl_bills	Own / Staff	Staff	Staff	Staff
payments	Own / Staff	Self / Staff	Staff	Staff
events	Everyone	Staff	Staff	Staff
rsvp	Everyone	Self	Self	Self
forum_categories	Everyone	Staff	Staff	Staff
forum_threads	Everyone	Author	Author / Staff	Author / Staff
forum_posts	Everyone	Author	Author / Staff	Author / Staff

Triggers otomatis:

• handle_new_user() — auto-buat row profiles saat signup
• touch_updated_at() — auto-update updated_at di profiles, ipl_bills, forum_threads

---

📦 Struktur Project

PortalPalmVillage/
│
├── 📄 README.md                    ← Anda di sini!
├── 📄 PLAN.md                      ← Detail arsitektur & roadmap
├── 🔧 vercel.json                  ← SPA rewrite config
├── 🚫 .gitignore
│
├── 📁 supabase/
│   └── 📄 schema.sql               ← Full DB schema + RLS + triggers + seed
│
├── 📁 image/                       ← Aset gambar project
│
├── 📁 legacy-backend/              ← ⚠️ DEPRECATED (Express + MongoDB, arsip)
│
└── 📁 client/                      ← 🎯 MAIN FRONTEND (React + Vite)
    │
    ├── 📄 package.json             ← Dependencies & scripts
    ├── ⚙️ vite.config.js           ← Vite + PWA config
    ├── 🎨 tailwind.config.js       ← Custom theme (Forest + Gold)
    ├── 🔧 postcss.config.js
    ├── 📄 index.html               ← Entry HTML + PWA meta tags
    │
    ├── 📁 public/                  ← Static assets & PWA icons
    │   ├── 🖼️ logo.png
    │   ├── 🖼️ pwa-192x192.png
    │   ├── 🖼️ pwa-512x512.png
    │   ├── 🖼️ pwa-maskable-*.png
    │   └── 🖼️ favicon-*.png
    │
    └── 📁 src/
        │
        ├── 📄 main.jsx             ← Entry point
        ├── 📄 App.jsx              ← Router + Providers + Lazy loading
        ├── 🎨 index.css            ← Tailwind + custom component classes
        │
        ├── 📁 context/
        │   ├── 🔐 AuthContext.jsx  ← Dual-mode auth (Demo + Supabase)
        │   └── 🔔 ToastContext.jsx ← Global notification system
        │
        ├── 📁 hooks/
        │   ├── 📄 useAuth.js       ← Re-export AuthContext
        │   └── 📄 useToast.js      ← Re-export ToastContext
        │
        ├── 📁 services/
        │   ├── 🟢 supabaseClient.js← Supabase client init
        │   └── 📦 mockData.js      ← ~800 baris mock data + helpers
        │
        ├── 📁 components/
        │   ├── 🧩 Layout.jsx       ← ProtectedLayout (auth guard)
        │   ├── 🧭 Header.jsx       ← Top nav, role-based menu
        │   ├── 📦 Footer.jsx
        │   ├── 🪟 Modal.jsx        ← Reusable modal dialog
        │   ├── 📭 Placeholder.jsx  ← Phase 2 placeholder
        │   └── 🔄 PWAUpdatePrompt.jsx
        │
        └── 📁 pages/
            ├── 🏠 Home.jsx         ← Dashboard
            ├── 🔐 Login.jsx        ← Login/Register
            ├── 👥 Residents.jsx    ← CRUD + CSV (lazy)
            ├── 💳 PaymentMatrix.jsx← Multi-tahun grid (lazy)
            ├── 📋 IPLBills.jsx     ← Daftar tagihan
            ├── 📊 Reports.jsx      ← Charts + neraca (lazy)
            ├── 💰 Expenses.jsx     ← CRUD pengeluaran (lazy)
            ├── ⚙️ Settings.jsx     ← Konfigurasi IPL (lazy)
            ├── 📅 Calendar.jsx     ← Phase 2
            ├── 💬 Forum.jsx        ← Phase 2
            └── ❌ NotFound.jsx     ← 404

---

🎨 Design System

Color Palette

Didesain mengikuti logo Palm Village — nuansa hijau hutan yang menenangkan dengan aksen emas yang elegan.

🌲 Forest (Primary)

Shade	Hex	Usage
forest-50	#f1f6f3	Background
forest-100	#dde9e2	Borders
forest-500	#2d6a4f	Accents
forest-800	#1a3d2e	Primary (Logo)
forest-900	#0f2620	Headings
forest-950	#0a1813	Darkest

✨ Gold (Accent / CTA)

Shade	Hex	Usage
gold-50	#fbf7ec	Light bg
gold-100	#f6eed3	Hover bg
gold-500	#d4af37	CTA / Active
gold-600	#bf9b2e	Hover
gold-700	#9e8024	Pressed

Typography

Type	Font	Usage
Sans	Inter (400-700)	Body text, UI
Display	Playfair Display (600-700)	Headings

Custom CSS Classes

.pv-card         /* Standard card: rounded-xl, shadow, border */
.pv-btn-primary  /* Gold CTA button */
.pv-btn-ghost    /* Transparent hover button */
.pv-btn-danger   /* Red danger button */
.pv-badge        /* Small uppercase badge */
.pv-input        /* Form input with gold focus ring */

---

🔐 Keamanan

Two-Layer Security

┌─────────────────────────────────┐
│   Layer 1: Frontend Route Guard │  ← Cegit akses halaman
│   (React Router + role check)   │     berdasarkan role
└────────────────┬────────────────┘
                 ▼
┌─────────────────────────────────┐
│   Layer 2: Database RLS         │  ← Cegit akses data
│   (Supabase Row Level Security) │     di level PostgreSQL
└─────────────────────────────────┘

Aspek	Implementasi
🔒 Data Access	RLS di semua 9 tabel — warga hanya akses data sendiri
🔑 Authentication	Google Account OAuth 2.0 via Supabase Auth + JWT Bearer Token (n8n backend ready)
🛡️ Route Protection	ProtectedLayout guard + per-page role check
🔁 Session	Auto-refresh token, persist via HttpOnly cookie
🚫 Sequential Payment	canPayBill() — cegah pembayaran jika masih ada tagihan periode sebelumnya
💵 QRIS Production	Universal access untuk seluruh role warga dan staff, divalidasi end-to-end melalui gateway DOKU Production
🔐 Asymmetric Signature Security	RSA-SHA256 asymmetric signature + Client-ID auth untuk menjamin integritas komunikasi API dengan DOKU
🛡️ Credential Isolation	Private key (*.key / *.pem) dan Secret Keys dikelola terisolasi di n8n server-side, tidak pernah terekspos ke bundle frontend

---

🚀 Deployment

Frontend → Vercel

1. Push ke GitHub repo ini
2. Import project di Vercel
3. Set Root Directory → client
4. Set Environment Variables:

   VITE_DEMO_MODE=false
   VITE_ENABLE_DEMO_ADMIN=false
   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
   VITE_N8N_API_BASE_URL=https://n8n-icyxwmjq.runner.web.id/webhook
   VITE_GOOGLE_CLIENT_ID=your_google_client_id.apps.googleusercontent.com
   

5. Deploy! Build command & output auto-detected (npm run build → dist/)

Backend → Supabase Cloud

• Database: managed PostgreSQL dengan RLS di seluruh tabel
• Auth: Google OAuth 2.0 + App JWT
• Storage: bucket storage terenkripsi untuk bukti transfer & kwitansi pengeluaran
• Otomasi DB: Trigger & functions untuk auto-update status tagihan dan trigger notifikasi

Automation → n8n Production (n8n-icyxwmjq.runner.web.id)

• PV API - Payments QRIS Create DOKU Production: Generator checkout QRIS dengan signature RSA-SHA256
• PV API - Payments QRIS DOKU Production Webhook: Receiver notifikasi webhook pembayaran sukses real-time
• PV Notifications - Transactional Email v2: MIME worker untuk kuitansi warga & notifikasi pembayaran ke pengurus/bendahara/admin

---

📚 Dokumentasi

Dokumen	Isi
📄 README.md	Dokumen ini — overview & quick start
📄 PLAN.md	Detail arsitektur, skema data, roadmap pengembangan
🗄️ schema.sql	Full database schema + RLS policies + triggers

---

🗺️ Roadmap Pengembangan

✅ Phase 1 — Core RBAC & Basic Operations (Completed)

• Autentikasi dual-mode (Demo + Supabase) & Registrasi Mandiri (HP)
• 4-Tier RBAC (Warga, Pengurus, Bendahara, Admin) & Kontrol UI/UX per Role
• Workflow Approval User baru oleh Pengurus
• Workflow Verifikasi Bukti Pembayaran Transfer oleh Bendahara (Revisi & Batal)
• Kompresi Gambar otomatis sisi klien (Canvas API, <500 KB)
• Manajemen warga + CSV & Kelola User oleh Admin
• Matriks pembayaran multi-tahun & status pending verifikasi
• Laporan keuangan Running Balance, Neraca Alur Kas, dan thumbnail lampiran pengeluaran
• Pengeluaran + kwitansi & Audit Log Sistem (Login, Akses, Transaksi)
• Pengaturan IPL (komponen-based) & Dasbor Proaktif dengan Banner/Badge
• PWA (installable, offline-ready)

✅ Phase 2 — Payment Gateway & Transactional Automation (Completed)

• Integrasi DOKU QRIS Production end-to-end via n8n
• Otentikasi Asymmetric RSA-SHA256 + Client-ID Gateway DOKU
• Universal QRIS Checkout untuk seluruh warga dan pengurus
• Tombol & Mekanisme Pembatalan Transaksi QRIS non-blocking (✕ Batalkan Pembayaran)
• Webhook DOKU Production untuk auto-update status tagihan (paid)
• Worker Notifikasi Email Transaksional otomatis (Kuitansi Warga + Notifikasi Admin/Bendahara/Pengurus)
• Badge Versi Aplikasi (v1.4.1) di Header, Login, dan Footer

🚧 Phase 3 — Enhanced Community & Automation (Current / Up Next)

• Cron Otomatis Pembuatan Tagihan IPL Bulanan: n8n scheduled trigger setiap tanggal 1 bulan berjalan
• Cron Denda Keterlambatan: n8n automated check tanggal 11 bulan berjalan untuk tagihan overdue
• WhatsApp Gateway Notification: Notifikasi tagihan dan kuitansi instan via WhatsApp (Fonnte/Wablas)
• Kalender Acara Lingkungan & RSVP: Pengumuman kegiatan komplek & konfirmasi kehadiran warga
• Forum Diskusi Warga: Ruang aspirasi warga dengan nested komentar dan moderasi pengurus

⏳ Phase 4 — Enterprise & Multi-Complex Enhancement

• Web Push Notifications (Service Worker FCM)
• Dukungan Multi-Kompleks / Multi-Cluster Perumahan
• Mobile App Native Wrapper (Capacitor / React Native)
• Dasbor Analitik & Prediksi Keuangan Berbasis AI

---

📄 License

Distributed under the MIT License. See LICENSE file for details.

---

🌳 Portal Warga Palm Village

Dibuat dengan ❤️ untuk warga Palm Village

⬆ Kembali ke atas