frontend

Peta transisi status di frontend bikin opsi mustahil mati sebelum diklik. Backend tetap satu-satunya penjaga; kodenya cuma union type dan satu map.

TL;DR: Awalnya flowStageOf isinya ternary berlapis dan tombol admin masih nawarin status yang udah gak ada sampai backend nolak pakai 409. Akhirnya dibikin union type buat enam status plus map NEXT_STATUSES biar UI cuma nyalain opsi yang boleh, sisanya biar backend yang mutusin. Ternary diganti switch, label dipisah, aria-disabled ternyata cuma semantik jadi validasi tetap dobel di handler sama backend.

Lima subpage terasa seperti website lain setelah homepage didesain ulang. Solusinya bukan mempercantik satu per satu, tapi memindahkan bahasa desain ke komponen shared.

TL;DR: Awalnya homepage cakep tapi halaman lain kayak website beda jadi berantakan. Ternyata solusinya simpel cukup pakai dua komponen shared page-hero dan page-cta biar semua halaman konsisten. Ganti token sekali semua ikut keubah, kartu jadi lebih clean tanpa border tebal dan tombol pill-nya seragam.

Bentuk kartu perusahaan berubah tiga kali dalam seminggu, tapi kontrak konten bertipe tetap: field opsional plus guard bikin data kosong otomatis singkir.

TL;DR: Penulis bikin kartu perusahaan di Next.js pakai array TS lokal, dan datanya berubah bentuk tiga kali dalam seminggu. Untung field opsional plus guard truthiness bikin data kosong atau placeholder otomatis gak tampil. Nambah kartu ketujuh pun cuma edit file konten, komponennya aman total.

Header navy gelap terasa berat di light mode. Solusinya: taruh 92% alpha di dalam token --color-header, biar backdrop-blur bekerja tanpa override per komponen.

TL;DR: Awalnya gue coba fix header light mode lewat bg-white/60 per komponen, malah ribet karena semua elemen harus di-override. Solusinya ternyata lewat token: bikin --color-header dengan nilai alpha di tokens.css, ditambah backdrop-blur-md buat efek kaca buram. Sekali ubah token, light sama dark mode langsung konsisten semua, cuma konsekuencinya navbar nggak ikut berubah kalau --background diganti total.

Dua angka untuk satu server yang sama: skor risiko dan skor kesehatan arahnya kebalikan, dan sidebar saya masih baca arah lama.

TL;DR: Dashboard gue bingung karena ring detail nunjukin 92 hijau, sidebar server yang sama bilang 30 merah. Ternyata sidebar masih baca skor risiko lama, sisanya udah pindah ke field health yang arahnya kebalikan. Fix-nya cuma dua baris, pelajarannya: migrasi arah metrik harus sekali di batas API.

Wrapper mobile fullscreen di bawah header fixed 66px pakai mt-66px plus calc 100dvh-66px, transcript tanpa cap 45vh, dan header ringkas ala aplikasi pesan.

Chat mobile butuh struktur sendiri ala aplikasi pesan, tetapi logika jawaban tetap satu sumber lewat TurnBody yang diekspor ulang.

TL;DR: Layar sempit butuh struktur beda, bukan versi dipampatkan, jadi ChatMobileThread dibuat khusus di bawah breakpoint lg dengan pola aplikasi pesan: header sticky, gelembung dua sisi, dan composer di bawah. Desktop tiga kolom tak tersentuh. Logika jawaban tetap satu sumber karena TurnBody dipakai ulang lewat named export; 271 barisnya murni tata letak.

Badge rujukan di daftar sumber dihitung lewat indexOf dari array asli, bukan posisi iterasi list hasil filter, supaya nomornya tetap nyambung.

TL;DR: Nomor badge di sidebar dihitung dari array hasil filter, bukan turn.sources asli, sehingga begitu satu knowledge entry tersaring semua nomor bergeser dan rujukan melenceng ke kartu salah. Fixnya satu baris: hitung nomor via indexOf di array asli, filter tetap cuma urusan tampilan. Pelajarannya, angka rujukan harus lahir dari data asli, posisi render cuma milik tampilan.

Kartu sumber kini dirender inline di bawah jawaban chat; komponen dipakai ulang lewat named export dengan id unik per panel dan state expand terpisah.

TL;DR: Commit kecil memindahkan render kartu sumber ke bawah jawaban di panel tengah, bukan cuma di sidebar. Yang kelihatan sepele ternyata nyeret dua kontrak lama: SourceCard harus jadi named export karena filenya kini punya dua komponen, dan id kartu perlu sufiks biar tetap unik di satu dokumen. Expanded state juga dibuat milik panel tengah sendiri, direset otomatis tiap pindah turn.