Sunset — eSIM Admin Webapp Redesign

Tantangan

Sunset adalah admin webapp internal buat ngelola produk eSIM — jualan paket, monitoring aktivasi, refund, customer lookup, semuanya di satu tempat. Versi lama-nya jalan, bener-bener jalan, tapi dipake setiap hari sama tim CS dan ops, dan udah masuk fase "udah saatnya naik kelas".

Masalahnya tiga lapis:

1. Visual capek. UI lama bootstrap-vibe, padet, kontras lemah. Tim CS ngeluh kalo shift sore mata sakit.
2. Performa berat. Halaman list transaksi bisa render 500+ row dengan filter chip dan pagination — scroll-nya nge-jank di laptop standar tim, dan tab background-nya makan RAM banyak banget.
3. Gak ada theme yang konsisten. Dark mode setengah jadi: ada panel item yang tetep putih nyala kalo diklik, dialog yang flash white saat open. Bikin pengalaman pecah.

Brief-nya: redesign full dengan estetika yang sama kayak SookeyMail (yang Boss udah suka banget) — dark cyberpunk, gradient halus, shadcn-based — tapi tanpa nge-rewrite logic backend. Admin only, jadi gak perlu mikir SEO atau public landing. Tujuan akhirnya simple: tim CS senyum waktu buka panel di pagi hari.

Solusi

Karena scope-nya UI + perf, kita pisahin kerjaan jadi tiga gelombang:

Gelombang 1 — Theme system. Token warna disusun ulang dari nol pakai pendekatan SookeyMail: violet-950 sebagai background base, fuchsia-400/cyan-300 sebagai accent, dan glass surface (bg-white/[0.04] + backdrop-blur tipis) untuk semua card. Light theme dibikin paralel dari awal, bukan tambalan, jadi tiap komponen punya pasangan dark+light yang bener-bener disetup.

Gelombang 2 — Komponen. Semua building block migrate ke shadcn — table, dialog, dropdown, command palette. Nge-migrasi sambil ngerapiin: tabel transaksi yang dulunya <div> sok-tabel diganti pakai @tanstack/react-table + shadcn <Table>, jadi sortable, filterable, dan keyboard-accessible by default.

Gelombang 3 — Performance. Ini bagian paling teknis dan paling keliatan hasilnya:

• content-visibility: auto di row tabel panjang — browser cuma render row yang keliatan di viewport, sisanya di-skip sampai scroll mendekat. Scroll 500-row langsung halus.
• GPU-accelerated marquee di header status (running ticker eSIM aktivasi) pakai pure transform: translateX() di-loop, bukan left: animation. CPU-nya santai banget sekarang.
• will-change: transform dipasang strategis (cuma di elemen yang bener-bener animate, bukan di mana-mana), supaya browser pre-promote layer tanpa nge-bloat memory.
• contain: layout paint di card yang isolated — ngebatesin scope reflow, jadi update di satu card gak ngetrigger relayout grid penuh.
• Transform-only animations — semua hover/focus animation pakai transform/opacity, gak ada lagi yang animate width/top/margin. Hasilnya konsisten 60fps di laptop developer level menengah.

Framer Motion dipake hemat — cuma buat dialog open/close dan beberapa micro-interaksi kunci. Bukan buat tiap hover, karena Motion + 500-row table = masalah baru.

Tech

• Next.js 14 dengan App Router. Versi sengaja gak naik ke 15 karena beberapa dependency internal Sunset masih nungguin update — stability menang dari novelty di project internal.
• Tailwind v3 + theme custom (violet-950 base, dual mode dari awal).
• shadcn/ui — table, dialog, dropdown, sheet, command palette, toast.
• Framer Motion — dipake selektif, bukan default.
• TanStack Table — buat tabel besar dengan sort/filter native.
• Performance toolkit — content-visibility, will-change, contain, transform-only animation, dan strategic memoization (React.memo + useMemo cuma di hot path).

Branding-nya nyambung sama vibe SookeyMail tapi dengan twist cyberpunk: lebih banyak grid pattern, scanline halus di hero panel, dan accent neon yang sedikit lebih aggressive — karena ini admin tools, boleh sedikit ganas.

Outcome

Tiga minggu dari kickoff sampai handoff ke tim ops. Sunset internal sekarang jadi panel yang tim buka dengan senang, bukan dengan keluhan:

• Lighthouse Performance 96 di halaman tabel transaksi (sebelumnya 64). Bukan magic — murni dari teknik perf di atas.
• Scroll 500-row tabel = 60fps stabil di laptop tim CS yang spec-nya menengah. Sebelumnya frame-drop tiap 200-300ms.
• Dark + light theme konsisten — nol white-flash saat dialog open, semua state hover/focus rapi di kedua mode.
• Time-to-interactive turun ~40% di halaman dashboard utama, dari measurement Chrome DevTools profiling sebelum vs sesudah.
• Tim CS feedback: "Akhirnya panel-nya enak dipake shift malem, mata gak capek lagi."

"Sunset sekarang kerasa kayak produk, bukan tools internal yang asal jalan." — Lead Ops Sunset

Karena Sunset bersifat admin-only dan berisi data sensitif customer, gak ada public URL. Galeri di halaman ini menampilkan placeholder visual yang merefleksikan struktur layout dan estetika — screenshot real dari production di-redact sebelum ditampilkan publik, dan akan disubstitusi pasca-launch fase berikutnya.