Grid varian admin Merlin sudah lolos development dan berjalan di production, sampai satu komplain dari pemakaian nyata membuatnya dirombak total dalam hitungan jam.
"Kayak kecil banget, gak kebaca, susah buat input."
Itu komplain yang masuk dari klien yang lagi pakai Merlin sungguhan di production, soal grid varian di admin panel.
Grid yang Sudah Selesai
Grid ini bagian dari ProductForm.tsx, tempat pemilik toko atur harga, modal, stok, barcode, titik reorder, dan supplier untuk tiap kombinasi varian produk. Warna dan ukuran, misalnya, jadi baris dan kolom, dan tiap kombinasi punya sel sendiri.
Strukturnya sudah lengkap: field modal (cost price) baru saja ditambahkan, melengkapi tujuh field yang harus muat dalam satu sel, yaitu harga, modal, stok, barcode, titik reorder, jumlah reorder, dan supplier. Semuanya sudah lolos development, sudah dites, dan sudah jalan di production.
Tujuh field itu numpuk vertikal dalam satu sel selebar sekitar 200 pixel.
Komplain yang Datang Hari Itu Juga
Komplain masuk pas klien beneran input data produknya sendiri, bukan pas demo atau testing internal.
Keputusannya kami ambil hari itu juga: rombak total, bukan sekadar geser ukuran atau rapikan spasi. Klien sendiri yang menunjuk pola rujukannya: Shopee dan Tokopedia, sesuatu yang sudah familiar buat penjual di Indonesia. Satu baris untuk satu kombinasi varian, field-nya sejajar horizontal, bukan numpuk vertikal dalam satu sel sempit.
Yang Berubah, Yang Tetap Sama
Layoutnya berubah total. Dari grid nested, baris untuk satu tier dan kolom untuk tier lainnya, menjadi tabel flat, satu baris per kombinasi varian. Label field yang tadinya disingkat ("Min", "Qty", "Spl") jadi ditulis lengkap. Ukuran input yang tadinya kecil dibuat lebih lega.
Yang tidak berubah justru lebih banyak. Fitur atur harga/modal/stok sekaligus untuk semua kombinasi tetap ada, cuma label tombolnya diperjelas. Satu foto untuk satu warna, dipakai bersama oleh semua kombinasi yang berbagi warna itu, dipertahankan persis. Pola yang sama dengan cara Shopee menampilkan satu foto per opsi warna. Cara sistem mencocokkan tiap kombinasi ke data harganya pun tidak diganti, karena kombinasi yang baru dibuat dan belum tersimpan belum punya nomor identitas sendiri.
Semua logika yang membuat grid ini bekerja dengan benar sejak awal tetap dipakai, persis seperti sebelumnya. Yang dirombak cuma cara ia ditampilkan.
Titik yang Sebenarnya Diuji
Grid lama itu sudah lolos development. Semua field yang dibutuhkan sudah ada di tempat yang tepat, dan strukturnya bekerja sebagaimana mestinya. Begitu dirombak pun, strukturnya tidak disentuh sama sekali.
Yang gagal bukan strukturnya. Yang gagal adalah momen ketika struktur itu benar-benar dipakai oleh orang yang harus menginput data produknya sendiri, hari demi hari.
Sesuatu terbukti benar begitu ia dipakai sungguhan — bukan begitu ia selesai dirancang.