open-isp/docs/ui-ux.md

UI/UX Rules — Billing RTRW (SKYFIBER)

Dokumen acuan wajib untuk semua pekerjaan UI/UX di project ini. Setiap kali membuat / mengubah tampilan, ikuti aturan di bawah.

---

Peran

Act as an Expert Senior Frontend Developer.

Your task is to generate a highly responsive, modern, and fluid web layout for [Sebutkan apa yang ingin dibuat, misal: a Dashboard / Landing Page / Navigation Bar] using [Sebutkan teknologi, misal: HTML & Tailwind CSS / HTML & Vanilla CSS / EJS].

Di project ini umumnya: EJS + Vanilla CSS (public/css/admin.css, landing.css, auth.css, admin-theme.css) dan Bootstrap Icons (bukan emoji di UI).

---

Strict Layout & Responsiveness Requirements

1. Fluid Typography & Spacing

• Gunakan fungsi CSS clamp() untuk ukuran font, padding, dan margin agar skala mulus di semua ukuran layar (mobile → desktop 4K) tanpa hanya mengandalkan media query yang patah-patah.
• Contoh: font-size: clamp(0.95rem, 0.9rem + 0.5vw, 1.25rem); padding: clamp(12px, 2vw, 28px);

2. Zero Overlap Guarantee

Pastikan teks, kartu, tombol, dan ikon tidak pernah tumpang tindih atau keluar dari kontainernya:

• overflow-wrap: break-word; atau word-break: break-word; untuk teks panjang (mis. link, nama panjang, kode).
• min-width: 0; pada flex/grid children agar tidak meluber keluar parent.
• Gunakan flex-wrap: wrap + CSS gap (bukan margin tetap) untuk jarak antar item.
• Gambar & ikon harus responsif: max-width: 100%; height: auto; atau aspect-ratio + object-fit: contain|cover.

3. Flexible & Mappable Structure (CSS Grid / Flexbox)

• Bangun layout yang self-adapting.
• CSS Grid dengan repeat(auto-fit, minmax(..., 1fr)) untuk grid kartu agar otomatis memetakan ke ruang layar yang tersedia. Contoh: grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
• Flexbox untuk perataan (alignment) & distribusi.
• Hindari tinggi tetap (height: 100px); gunakan min-height agar konten bisa memanjang dengan aman.

4. Mobile-First Approach

• Mulai dari layout vertikal yang solid untuk mobile.
• Lalu naikkan dengan media query (@media (min-width: ...)) atau breakpoint Tailwind (md:, lg:) untuk memetakan ke grid/flex horizontal di layar besar.

5. Debug-Friendly & Minimal Bugs

• Tulis HTML yang bersih, semantik, dan dangkal (hindari div soup).
• Gunakan CSS Custom Properties (Variabel) terpusat untuk warna, spacing, dan font agar perubahan cepat & mudah. Contoh: --primary: #ADFF2F; --bg: #0A0D14; --radius: 14px;
• Beri komentar jelas di kode yang menjelaskan logika layout.

---

Output

Output tepat kode yang diperlukan, pastikan:

• siap dijalankan (ready to run),
• bebas bug (bug-free),
• mudah di-debug.

---

Catatan khusus project ini

• Tema: dark (default) + lime #ADFF2F di atas near-black #0A0D14; harus ada toggle dark/light di setiap halaman.
• Ikon: Bootstrap Icons saja untuk UI (emoji hanya untuk teks WhatsApp).
• Brand: nama & logo diambil dari settings (brandName / brandLogo), jangan hardcode.
• Bilingual (ID/EN) via t('key', 'fallback') — identifier kode tetap Inggris.
• Admin: markup sidebar & admin.css/dashboard.ejs diperlakukan "frozen"; penyesuaian via overlay admin-theme.css.
• Scroll: area konten admin = .mw (scroll container). Jangan bikin konten terpotong; .page dibiarkan tumbuh (flex: 0 0 auto) agar .mw bisa scroll.
• Modal: satu scroll saja (.mb yang scroll, .mbody overflow: visible) — hindari nested scroll yang mengunci.
• Responsif: gunakan 100dvh (bukan 100vh) untuk area penuh-layar di mobile.

---

Checklist cepat sebelum selesai

• Ukuran font/spacing pakai clamp() di elemen utama.
• Tidak ada teks/ikon yang meluber/overlap (cek min-width:0, overflow-wrap, flex-wrap).
• Grid kartu pakai repeat(auto-fit, minmax(..., 1fr)).
• Tidak ada height tetap pada blok konten (pakai min-height).
• Mobile-first + breakpoint untuk layar besar.
• HTML semantik & dangkal; warna/spacing via CSS variables.
• Dark/light berfungsi; ikon Bootstrap Icons; bilingual ID/EN.
• Scroll & modal normal di mobile dan desktop.