open-isp/docs/RENCANA_DESAIN_DAN_MODERNISASI.md

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).

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:

<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

: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)

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.