Belanja cepat & aman
Kamu bisa browsing produk tanpa login. Untuk wishlist, keranjang, dan checkout direct payment, silakan masuk sebagai buyer.
Registrasi akan diverifikasi admin (demo) sebelum akun bisa dipakai untuk checkout.
Belanja harian jadi lebih mudah
Cari buah segar & kebutuhan rumah tangga, simpan ke wishlist, lalu checkout. Diskon dihitung otomatis di “API layer”.
Tip: gunakan menu pencarian agar katalog tetap “lega” di HP.
Promo hari ini
Diskon Otomatis
Tanpa kupon, dihitung di backend.
Buah ≥ 3 item
Subtotal ≥ 100k
Pilihan
Produk unggulan
Dipilih otomatis dari stok tersedia & harga menarik.
Diskon otomatis dihitung saat checkout (di “API layer”), bukan dari total yang dikirim UI.
0 produk
Klik ♥ untuk wishlist, + untuk keranjang
Keranjang
Direct payment saat checkout
Histori transaksi
Menampilkan 5 transaksi terakhir.
Pencarian Produk
Atur keyword & filter untuk mempersempit hasil
Tips: gunakan kategori + ketersediaan supaya hasil makin relevan.
Wishlist
Produk yang kamu simpan (per akun)
Keranjang & Checkout
Direct payment: order akan otomatis berstatus Order Terkirim
Item
Info
Menu Histori dan Notifikasi sekarang ada di sidebar/menu utama agar checkout lebih fokus.
Ringkasan
SubtotalRp0
Diskon (otomatis + produk)- Rp0
Biaya layananRp0
TotalRp0
Perhitungan final dilakukan di “API layer” (anti manipulasi).
Histori transaksi
Menampilkan semua order milik akun kamu
Export untuk laporan pribadi.
| Order | Waktu | Total | Status |
|---|
Notifikasi
Notifikasi terbaru untuk akun kamu
Fitur Penjual (Seller)
Kelola produk (CRUD), stok, harga, dan pesanan untuk produk milikmu.
Produk saya
Perubahan stok/harga tervalidasi & diproteksi RBAC
0 item
Pesanan masuk
Hanya pesanan untuk produk milikmu
Catatan
- Pesanan buyer akan mengurangi stok produk (di “API”).
- Seller hanya bisa mengubah produk miliknya (RBAC + ownership).
- Update status pesanan akan mengirim notifikasi ke buyer.
Tambah Produk
Validasi input: nama, kategori, harga, stok
Fitur Sistem
Diskon otomatis, notifikasi, laporan, serta role & permission (RBAC).
Diskon otomatis (rules)
Rules diproses di “API layer” saat checkout.
Notifikasi (broadcast)
Kirim pesan ke buyer/seller/admin
Log notifikasi (terbaru)
Diskon Produk (manual)
Atur diskon berdasarkan nama produk (admin). Diskon ini dihitung dulu, lalu diskon rule keranjang.
Akses diproteksi RBAC (permission: discount:manage).
Flat = potongan per item (qty).
Produk diskon aktif
Daftar produk yang sedang punya diskon manual.
Branding (Hero Text & Logo)
Ubah teks hero dan logo aplikasi (khusus admin). Disimpan ke backend D1 bila tersedia.
Max 180 karakter. Tampilan buyer akan mengikuti setting ini.
Maks ukuran file 1MB. Akan di-resize & dikompres otomatis.
Preview
Logo & teks hero yang akan tampil di halaman buyer.
Hero Title
—
—
Catatan: logo tersimpan sebagai data URL agar kompatibel static hosting (demo).
Maintain Toko (admin)
Kelola data toko: rekening pembayaran, nomor WA, email, alamat. Digunakan untuk konfirmasi order & pembayaran.
Preview rekening
Akan dipakai saat admin mengirim konfirmasi pembayaran ke buyer.
—
Bank: —
Rekening: —
A/N: —
Kontak: — • —
Alamat: —
Kelola Ongkir & Konfirmasi Order (admin)
Masukkan ongkir manual per order dan kirim instruksi pembayaran (rekening) ke buyer.
Daftar order terbaru
Pilih order untuk mengisi ongkir dan mengirim konfirmasi.
Detail & konfirmasi
Pilih salah satu order di sebelah kiri.
Ongkir akan ditambahkan ke total order (grand total).
Notifikasi akan masuk ke menu Notifikasi buyer.
Registrasi Buyer (admin)
Kelola pendaftaran akun buyer (approve/reject). Data disimpan di backend D1 jika tersedia.
Antrian registrasi
Akses diproteksi RBAC (permission: user:registration_manage).
Detail
Pilih salah satu registrasi untuk melihat detail.
Gambar Produk (admin)
Upload gambar untuk ditampilkan di kartu produk (disimpan di localStorage sebagai data URL)
Akses diproteksi RBAC (permission: product:image_manage).
Maks ukuran file 1MB. Gambar akan di-resize & dikompres otomatis untuk menghemat storage.
Preview
Menampilkan gambar tersimpan / draft upload.
Tips: ukuran localStorage terbatas. Gunakan gambar kecil.
Laporan
Ringkasan transaksi & inventory (simulasi)
Total order
0
GMV
Rp0
Diskon terpakai
Rp0
Produk low stock
0
Top produk (berdasarkan qty)
Low stock list
Role & Permission (RBAC)
Toggle permission untuk melihat efek pada UI & API (demo)
| Permission | buyer | seller | admin |
|---|
Perubahan disimpan di localStorage dan langsung mempengaruhi proteksi endpoint.
Keamanan & Data
Checklist & audit sederhana: validasi input, proteksi API, role-based access, enkripsi data sensitif, perlindungan transaksi & user data.
Kontrol keamanan yang diimplementasikan (demo)
- Validasi input: normalisasi string, batas panjang, angka non-negatif, format HP, Luhn (kartu).
- Proteksi API: semua aksi sensitif lewat api.request(), wajib token + permission check + ownership check.
- Role-based access: buyer/seller/admin dibatasi endpoint & UI.
- Enkripsi data sensitif: metadata pembayaran transaksi disimpan sebagai ciphertext AES-GCM.
- Perlindungan transaksi: total final dihitung ulang di “API” dari produk + qty + rules diskon (bukan dari input UI).
Audit hasil
Menampilkan ringkasan konfigurasi & data yang tersimpan
Simulasi “API protection” & RBAC
Coba jalankan operasi berikut untuk melihat enforcement permission.
Hasil akan muncul sebagai toast.