oxpoe
eaf05f2811
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
203 lines
9.7 KiB
Markdown
203 lines
9.7 KiB
Markdown
# 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.
|