Gambaran Umum
Emisell Merchant Dashboard adalah panel kontrol utama bagi merchant di platform Emisell. Aku bergabung ke project ini di tengah pengembangan — mewarisi codebase yang sudah ada, menyelesaikan bug yang ada, dan menambahkan fitur-fitur baru di atas yang sudah dibangun. Mencakup berbagai fitur: analytics penjualan, manajemen pesanan dan draft, katalog produk, manajemen pelanggan, konfigurasi diskon, manajemen konten, serta pengaturan toko yang mendalam seperti checkout, shipping & delivery, dan manajemen lokasi.
Masalah
Mengelola toko online berarti menangani banyak hal sekaligus — mulai dari memantau performa penjualan hingga mengkonfigurasi aturan pengiriman dan mengelola data pelanggan. Dashboard yang tidak terstruktur membuat semua ini terasa overwhelming. Emisell Merchant Dashboard dibangun untuk memberikan merchant satu hub yang terorganisir untuk mengoperasikan seluruh toko mereka secara efisien.
Fitur Utama
- Analytics — gross sales, average order value, orders over time, dan retur, semua bisa difilter berdasarkan rentang tanggal
- Manajemen Pesanan — daftar pesanan lengkap dan draft orders
- Manajemen Produk & Pelanggan — katalog produk, varian, dan data pelanggan
- Diskon — konfigurasi aturan diskon
- Konten & Settings — manajemen konten beserta pengaturan lengkap yang mencakup alur checkout, shipping & delivery, lokasi toko, dan lainnya
Highlight Teknis
Dynamic address schema per negara menjadi salah satu tantangan yang cukup kompleks — setiap negara memiliki kebutuhan field alamat yang berbeda (state, provinsi, format kode pos, dll.), sehingga skema form harus bersifat dinamis dan dikendalikan oleh negara yang dipilih, bukan dikodekan secara statis.
Arsitektur berbasis fitur menjadi kunci agar codebase tetap manageable di skala ini.
Komponen dibagi menjadi dua layer: compose (komponen spesifik yang terikat pada halaman atau
domain tertentu) dan shared (komponen yang dapat digunakan ulang lintas fitur). Pemisahan ini
membuat setiap fitur berdiri sendiri dan mencegah codebase menjadi berantakan seiring project
terus berkembang.
Sinkronisasi server state ditangani dengan kombinasi SWR (yang sudah ada di codebase sebelumnya) dan TanStack Query untuk fitur-fitur baru. Keduanya digunakan sesuai kebutuhan — SWR untuk pola fetching sederhana yang sudah ada, TanStack Query untuk alur yang berat mutasi dan membutuhkan invalidasi cache yang lebih granular antar fitur yang saling terhubung.