OPEN-ISP v0.5 (pickle-lime) — rilis open-source perdana

Aplikasi billing & manajemen ISP (fiber optic) — PWA pelanggan, portal teknisi & kolektor, admin panel lengkap, multi-vendor OLT, RADIUS, WhatsApp/Telegram, pembayaran QRIS. Kredit & lisensi (ISC): - Base kode & repo: alijayanet/billing-rtrw oleh Alijaya Net — terima kasih banyak atas base kode dan repo yang bermanfaat. - Add-on: GoWA, LibreSpeed/OpenSpeedTest, Uptime Kuma, notification-forwarder. - Dikembangkan menjadi OPEN-ISP oleh oxpoe — https://github.com/oxpoe/open-isp
2026-10-09 05:51:21 +07:00
commit eaf05f2811
@@ -0,0 +1,202 @@
+# Rencana Desain & Modernisasi UI/UX — Billing RT/RW Net
+*(Mengadopsi Referensi uiverse.io, ColorlibHQ/gentelella, dan Google Fonts)*
+
+> **Status Server Biznet**: ✅ **Berhasil Dimatikan & Dinonaktifkan** (`systemctl stop/disable`, `pm2 stop/delete`). Tidak ada lagi tabrakan bot Telegram ataupun service jaringan.  
+> **Server Produksi Aktif**: VPS `deneva` (`116.212.74.115` — port `3001`).
+
+---
+
+## 1. Konsep Desain & Pendekatan Dua Arah (Dual-Persona)
+
+Aplikasi ini melayani dua profil pengguna yang berbeda secara mendasar:
+1. **Pelanggan (Customer Portal & Landing/Login)**: Menggunakan smartphone, membutuhkan antarmuka yang modern, bersih, intuitif, cepat, dan kaya animasi mikro.
+   * **Referensi Utama**: **`uiverse.io`** (Glassmorphism, animasi tombol neon/glow, switch toggle interaktif, floating dock, card 3D halus).
+2. **Admin & Teknisi (Admin & NOC Portal)**: Membutuhkan visualisasi data densitas tinggi (*high-density information*), pemantauan lalu lintas real-time, status ONU dalam jumlah ratusan, serta tabel data yang efisien.
+   * **Referensi Utama**: **`ColorlibHQ/gentelella`** (Gentelella Admin — Tile KPI counters, multi-tab `x_panel` containers, collapsible sidebar, traffic charts, dense status badges).
+
+```mermaid
+graph TD
+    subgraph UI_Reference_System["Sistem Referensi Desain"]
+        UIVERSE["uiverse.io (Modern CSS Components)"]
+        GENTELELLA["ColorlibHQ/gentelella (Admin Dashboard)"]
+        GFONTS["Google Fonts (Universal Typography)"]
+    end
+
+    subgraph Customer_Side["Portal Pelanggan (PWA & Login)"]
+        CustLogin["views/login.ejs (Hero & Glass Card)"]
+        CustDash["views/dashboard.ejs (5-Tab App Shell)"]
+        CustIsolated["views/isolated.ejs (Walled Garden)"]
+    end
+
+    subgraph Admin_Side["Portal Admin, NOC & Teknisi"]
+        AdminDash["views/admin/dashboard.ejs (Tile Stats & Charts)"]
+        AdminTables["views/admin/* (Customers, OLT, Billing)"]
+        AdminSidebar["views/admin/partials/sidebar.ejs"]
+        AdminMap["views/admin/map.ejs (Network Topology)"]
+    end
+
+    UIVERSE -->|Glass Cards, Neon Toggles, Pill Buttons| Customer_Side
+    GENTELELLA -->|Tile Counters, X-Panels, Dense Tables| Admin_Side
+    GFONTS -->|Plus Jakarta Sans, Inter, JetBrains Mono| Customer_Side
+    GFONTS --> Admin_Side
+```
+
+---
+
+## 2. Tipografi Universal (Google Fonts)
+
+Untuk memastikan kompatibilitas rendering 100% di semua browser (Chrome, Safari iOS, Firefox, Edge, Android WebView) tanpa ketergantungan pada font sistem lokal:
+
+| Peruntukan | Font Family | Bobot (Weights) | Karakteristik & Kegunaan |
+|---|---|---|---|
+| **Customer Portal & Landing** | **Plus Jakarta Sans** | `300, 400, 500, 600, 700, 800` | Modern geometric sans, sangat nyaman dibaca di layar AMOLED HP, angka tagihan tegas dan modern. |
+| **Admin & Operasional** | **Inter** | `300, 400, 500, 600, 700, 800` | Standar industri dashboard, metrik angka rapat (*tabular numbers*), hierarki teks rapi. |
+| **Data Teknis & Jaringan** | **JetBrains Mono** | `400, 500, 700` | Alamat IP, MAC Address, OID SNMP, Serial Number ONU, nilai redaman optik (dBm). |
+
+### Standar Preconnect & Loading:
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+```
+
+---
+
+## 3. Peta Komponen & Transformasi Desain
+
+### 3.1 Portal Admin (Adopsi `ColorlibHQ/gentelella`)
+
+#### A. Gentelella Top Metric Stats ("Tile Count")
+Pada dashboard admin (`views/admin/dashboard.ejs`), susunan metrik diganti dengan pola **Gentelella Tile Count**:
+* **Format**: Baris kartu metrik ringkas horizontal dengan ikon latar samar, angka besar tebal, label deskriptif, dan indikator persentase tren (hijau naik / merah turun).
+* **Komponen yang Diterapkan**:
+  1. `Total Pelanggan`: Angka aktif vs total, delta pertumbuhan bulanan.
+  2. `PPPoE Online`: Real-time active sessions dengan status dot hijau berkedip.
+  3. `Total ONU & Signal`: Jumlah online/offline + ONU dengan redaman kritis (< -27 dBm).
+  4. `Tagihan & Kas Masuk`: Pendapatan bulan berjalan vs tagihan tertunda (*unpaid*).
+
+```
+┌─────────────────┬─────────────────┬─────────────────┬─────────────────┐
+│ TOTAL PELANGGAN │  PPPoE ONLINE   │  STATUS FTTH    │ PENDAPATAN BULAN │
+│   1,248         │   1,180         │   102 / 105     │ Rp 42.500.000   │
+│ ▲ +12 bln ini   │ ● 94.5% online  │ ⚠️ 3 Redaman Low│ ▲ 88% Tertagih  │
+└─────────────────┴─────────────────┴─────────────────┴─────────────────┘
+```
+
+#### B. Kontainer Widget Bergaya `x_panel`
+* Seluruh card data admin menggunakan struktur `x_panel`:
+  * `x_title`: Judul section dengan border bawah tipis, sub-teks muted, dan *toolbox* kanan (tombol refresh data via AJAX, filter tanggal, expand/collapse).
+  * `x_content`: Area konten responsif dengan padding lega, kompatibel dengan mode gelap dan terang.
+
+#### C. Tabel Data Responsif (*Dense Table*)
+* Border halus (`border-slate-800`), font `Inter` 13px, baris zebra-stripe halus saat hover.
+* Badge status terstandarisasi:
+  * Online: Badge hijau lembut (`bg-emerald-500/10 text-emerald-400 border border-emerald-500/20`).
+  * Offline / Suspend: Badge merah lembut (`bg-rose-500/10 text-rose-400 border border-rose-500/20`).
+  * Isolir: Badge amber (`bg-amber-500/10 text-amber-400 border border-amber-500/20`).
+
+---
+
+### 3.2 Portal Pelanggan & Login (Adopsi `uiverse.io`)
+
+#### A. Card Glassmorphism dengan Border Glow
+* Card profil router, tagihan, dan paket internet menggunakan teknik glassmorphism tingkat tinggi dari `uiverse.io`:
+  * Background: `rgba(30, 41, 59, 0.75)` dengan `backdrop-filter: blur(16px)`.
+  * Border: Gradasi tipis `linear-gradient(135deg, rgba(45, 212, 191, 0.3), rgba(99, 102, 241, 0.1), transparent)`.
+  * Shadow: `0 10px 30px -10px rgba(0, 0, 0, 0.5)`.
+
+#### B. Switch Toggle & Input Kustom (Form Ganti WiFi & Settings)
+* Mengganti checkbox standar dengan **animated toggle switch** gaya `uiverse.io`:
+  * Toggle 2.4 GHz vs 5 GHz dengan slider pill bercahaya.
+  * Input password dengan animated floating border dan icon eye reveal responsif.
+  * Tombol submit: Efek hover *lift-up* (`translateY(-2px)`) dengan box-shadow glow warna Teal `#14b8a6`.
+
+#### C. Floating Action Dock (PWA Mobile Navigation)
+* Penyempurnaan 5-tab dock navigasi bawah:
+  * Efek frosted glass yang lebih pekat (`backdrop-blur-xl`).
+  * Active pill bergradasi halus dengan transisi kurva cubic-bezier (`cubic-bezier(0.34, 1.56, 0.64, 1)`).
+  * Touch feedback haptic visual saat tab ditekan di layar HP.
+
+---
+
+## 4. Design Tokens & Palette Warna
+
+```css
+:root {
+  /* Brand Core (Skyfiber Identity) */
+  --brand-teal-50:  #f0fdfa;
+  --brand-teal-400: #2dd4bf;
+  --brand-teal-500: #14b8a6;
+  --brand-teal-600: #0d9488;
+  --brand-indigo:   #6366f1;
+  --brand-cyan:     #06b6d4;
+
+  /* Dark Theme Palette (Default) */
+  --bg-dark-base:   #0b0f19;
+  --bg-dark-card:   #1e293b;
+  --bg-dark-panel:  #161b26;
+  --border-dark:    rgba(148, 163, 184, 0.15);
+  --text-dark-high: #f8fafc;
+  --text-dark-med:  #94a3b8;
+  --text-dark-low:  #64748b;
+
+  /* Light Theme Palette */
+  --bg-light-base:  #f8fafc;
+  --bg-light-card:  #ffffff;
+  --bg-light-panel: #f1f5f9;
+  --border-light:   rgba(15, 23, 42, 0.08);
+  --text-light-high:#0f172a;
+  --text-light-med: #475569;
+  --text-light-low: #94a3b8;
+
+  /* Status Colors */
+  --status-online:  #10b981;
+  --status-offline: #f43f5e;
+  --status-warning: #f59e0b;
+  --status-info:    #38bdf8;
+}
+```
+
+---
+
+## 5. Rencana Tahapan Eksekusi (Implementation Milestones)
+
+```mermaid
+gantt
+    title Roadmap Eksekusi Desain & Modernisasi
+    dateFormat  X
+    axisFormat  Fase %s
+
+    section Persiapan
+    Matikan Service Biznet & Verifikasi Port  :done, 0, 1
+    Integrasi Google Fonts Universal          :done, 1, 2
+
+    section Portal Pelanggan (uiverse.io)
+    Modernisasi Komponen WiFi & Card Glass    :active, 2, 4
+    Input Micro-Animations & Button Glow       : 4, 5
+    Verifikasi PWA Mobile & Responsive Check   : 5, 6
+
+    section Portal Admin (Gentelella)
+    Implementasi Top Tile Stats Count         : 6, 8
+    Standardisasi X-Panel & Action Toolbox     : 8, 9
+    Penyelarasan Tabel Data & Badges           : 9, 10
+
+    section Validasi & Deploy
+    Pengujian Lintas Browser & Dark/Light Mode : 10, 11
+    Restart Service & Verifikasi Uptime        : 11, 12
+```
+
+### Tahap 1: Penguatan Komponen Customer Portal (Uiverse Style)
+1. Terapkan card glassmorphism dengan glow gradient pada form ganti SSID & Password di `views/dashboard.ejs`.
+2. Sempurnakan animated button untuk aksi "Simpan Wi-Fi", "Beli Voucher", dan "Cek Tagihan".
+3. Pastikan visual state mode terang (*light mode*) memiliki kontras tajam pada teks muted dan input field.
+
+### Tahap 2: Modernisasi Admin Dashboard (Gentelella Style)
+1. Perbarui bagian atas `views/admin/dashboard.ejs` dengan modul **Gentelella Tile Stats**:
+   * Total Pelanggan, Status Sesi MikroTik Aktif, Status ONU (Online/Offline/Warning Redaman), dan Tagihan Lunas/Tertunda.
+2. Tata ulang card monitoring ke dalam format `x_panel` yang memiliki toolbar aksi (Refresh AJAX, filter status, expand).
+
+### Tahap 3: Uji Coba Lintas Perangkat & Validasi Akhir
+1. Uji di mobile browser (Android Chrome & iOS Safari).
+2. Verifikasi seluruh endpoint AJAX, ganti SSID modem, dan refresh ONU tetap berfungsi tanpa gangguan.
+3. Pastikan log journalctl pada `billing-rtrw.service` di `deneva` tetap bersih dan stabil.