Lalabase
Tickets, Doku, Zeiterfassung und Kundengespräche an einem Ort, durchsuchbar per KI. Für Softwarefirmen mit Kundenprojekten. Open Source: auf deinem eigenen Server oder in unserer Cloud in Deutschland.
翻譯準備中
尚未偵測到更新。GitHub 發布版本後會顯示在這裡。
個人 GitHub 帳號下公開儲存庫的擁有者可以登入並驗證所有權,自行管理介紹,無需管理員核准。
登入並產生驗證檔案,在 30 分鐘內將其提交至此儲存庫的預設分支。其他分支或分叉儲存庫中的檔案無效。然後在下方檢查檔案,即可無需管理員核准直接管理專案。請保留檔案以維持管理權限。
如需登入,將前往登入頁面。登入後請回到此處,再次點擊所選的驗證按鈕。
在專案資料夾中執行 /nomorevibe verify,即可驗證所有權並自行管理介紹。
一分鐘完成驗證Ruang warga apss repo
翻譯準備中
取自儲存庫 README
正在載入完整 README。 以下為已儲存的摘錄。
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檢視完整 README ↗
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.
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).units.occupant_name) dan metadata pembayaran, serta penyaringan unit demo dari neraca keuangan riil.v1.4.3) di Header, Halaman Login, dan Footer.
Ringkasan status IPL real-time: total tagihan, jumlah terkumpul, tunggakan, dan rasio koleksi — semua dalam kartu statistik yang ringkas.
Database warga lengkap dengan import/export CSV massal, pencarian cerdas, filter multi-kriteria, dan pelacakan status hunian (pemilik/penyewa).
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.
Catat setiap pengeluaran RT dengan bukti kwitansi, kategori terstruktur, dan filter bulanan. Transparansi penuh untuk warga.
Grafik batang & pie interaktif, neraca arus kas otomatis (pemasukan vs pengeluaran), export CSV & print PDF siap audit.
Besaran IPL = penjumlahan komponen (Kebersihan, Keamanan, dll). Atur denda keterlambatan, jatuh tempo, dan penerima tagihan.
Portal Warga Palm Village telah dilengkapi dengan inovasi arsitektur mutakhir untuk kenyamanan, transparansi, dan keamanan maksimal:
| 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
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 | 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 |
┌─────────────────────────────────────────────────────────────────┐
│ 👤 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) │
└─────────┘ └─────────────────┘
Admin/Admin Demo pilih tagihan ──▶ n8n membuat transaksi QRIS
│
▼
Midtrans Snap Sandbox ──▶ Scan & Bayar
│
▼
Webhook Midtrans → n8n
│
▼
Validasi notifikasi + update pembayaran/tagihan
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) |
| 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) | — |
# 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).
git clone https://github.com/kodok-ijho/PortalWarga.git
cd PortalWarga/client
npm install
supabase/schema.sqlprofilescp .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
npm run dev
VITE_N8N_API_BASE_URL ke URL webhook n8n.VITE_* atau source frontend.docs/production/TASK_MIDTRANS_QRIS_SANDBOX.md.| 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:
Jangan menuliskan Midtrans Server Key, JWT, atau token transaksi di README, source code, variable VITE_*, maupun repository GitHub.
Supabase PostgreSQL dengan 9 tabel, Row Level Security di semua tabel, dan trigger otomatis.
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ 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 │
└─────────────────┘ └──────────────────┘
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ 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 signuptouch_updated_at() — auto-update updated_at di profiles, ipl_bills, forum_threadsPortalPalmVillage/
│
├── 📄 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
Didesain mengikuti logo Palm Village — nuansa hijau hutan yang menenangkan dengan aksen emas yang elegan.
| 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 |
| 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 |
| Type | Font | Usage |
|---|---|---|
| Sans | Inter (400-700) | Body text, UI |
| Display | Playfair Display (600-700) | Headings |
.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 */
┌─────────────────────────────────┐
│ 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 |
clientVITE_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
npm run build → dist/)n8n-icyxwmjq.runner.web.id)PV API - Payments QRIS Create DOKU Production: Generator checkout QRIS dengan signature RSA-SHA256PV API - Payments QRIS DOKU Production Webhook: Receiver notifikasi webhook pembayaran sukses real-timePV Notifications - Transactional Email v2: MIME worker untuk kuitansi warga & notifikasi pembayaran ke pengurus/bendahara/admin| 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 |
✕ Batalkan Pembayaran)paid)v1.4.1) di Header, Login, dan FooterDistributed under the MIT License. See LICENSE file for details.
Dibuat dengan ❤️ untuk warga Palm Village
| 💬 Forum Diskusi | 🚧 | Schema DB siap (nested comments), UI Phase 2 |
| 📲 Notifikasi WhatsApp | 🚧 | Via n8n gateway (Fonnte/Wablas) |
| ✅ |
| 👁️ Lihat saja |
| ❌ |
| ❌ |
| ❌ |
| 📋 Log Sistem (Audit) | ✅ | 👁️ Lihat saja | ❌ | ❌ | ❌ |
| 📅 Kalender Acara | 🚧 | 👁️ Lihat saja | 🚧 | 🚧 | 🚧 |
| 💬 Forum Diskusi | 🚧 | 👁️ Lihat saja | 🚧 | 🚧 | 🚧 |