Order Wireframes

3 layar pesanan utama LabaBersih v2: list, detail, dan import XLSX. Setiap wireframe menggunakan design system yang sama dan bisa langsung diterjemahkan ke Phoenix LiveView HEEx template.

3 Screens Interactive Realistic Data
/app/pesanan
Pesanan List
Daftar semua pesanan dengan 2-level row pattern. 7 kolom utama + sub-row untuk nomor platform, tanggal, dan resi. Stats, segmented control, search, dan filter.

Pesanan

Dikemas
37
Dikirim
2.313
Selesai
2.271
RTS
22
s/d
ID Pesanan
Customer
Platform
Status
Jrnl
Bayar
Revenue
PS2603-00001
Budi Santoso
TikTok
Selesai
✓
Lunas
Rp 200.000
TK-583220220389722059 · 30 Mar 14:05 · JX77099001
PS2603-00002
Siti Rahayu
TikTok
Dikirim
✓
Belum Bayar
Rp 135.000
TK-583220220389722060 · 30 Mar 14:12
PS2603-00003
Andi Wijaya
Shopee
RTS
✓
—
Rp 450.000
SHP-260330-00142 · 30 Mar 15:30 · SPX001234
PS2603-00004
Dewi Lestari
TikTok
Dikemas
✗
Belum Bayar
Rp 89.000
TK-583220220389722061 · 30 Mar 16:00
PS2603-00005
Rudi Hartono
Mengantar
Dikirim
✓
Belum Bayar
Rp 312.000
MNG-260330-0088 · 30 Mar 17:15
PS2603-00006
Maya Putri
TikTok
Dibuat
✗
—
Rp 175.000
TK-583220220389722062 · 31 Mar 09:00
<!-- LiveView: OrderLive.Index | phx-change="filter" | phx-click="navigate" | stream :orders -->
/app/pesanan/:id
Detail Pesanan
Info lengkap 1 pesanan: info grid 2 kolom, items table, fee estimasi, jurnal terkait, dan audit trail.
Kembali ke Pesanan

PS2603-00001

Selesai
Informasi Pesanan
Nomor Pesanan TK-583220220389722059
Customer Budi Santoso
Phone 0812****5678
Platform TikTok
Toko TikTok Bestari ID
Sumber XLSX Import
Status & Pembayaran
Status Selesai
Pembayaran Lunas
Total Rp 200.000
No. Resi JX77099001
Kurir JNE REG
Tanggal Kirim 30 Mar 2026, 17:18 WIB
Items
Produk
SKU
Qty
Harga
Subtotal
Forbest Ayam 1kg
FB-AYM-1KG
×3
Rp 45.000
Rp 135.000
Forbest Sapi 500g
FB-SPI-500G
×1
Rp 65.000
Rp 65.000
Total
Rp 200.000
Fee Estimasi (dari fee mapping toko)
Admin Platform 3% × Rp 200.000 Rp 6.000
Komisi Dinamis 5% × Rp 200.000 Rp 10.000
Total Fee Rp 16.000
Piutang Estimasi Rp 184.000
Jurnal Terkait
JE2603-00042
Penjualan
30 Mar 2026
Posted
JE2603-00101
Rekonsiliasi
5 Apr 2026
Posted
Audit Trail
Dibuat — system
30 Mar 2026, 14:05 WIB
Import XLSX
Dikemas — system
30 Mar 2026, 15:30 WIB
Resi: JX77099001
Dikirim — nelly@toko.com
30 Mar 2026, 17:18 WIB
Packing PKG-260330-001
Selesai — system
5 Apr 2026, 10:00 WIB
Rekonsiliasi
<!-- LiveView: OrderLive.Show | assigns: @order, @items, @fee_estimates, @journals, @audit_trail -->
/app/pesanan/import
Import Pesanan
Upload XLSX pesanan dari TikTok, Shopee, atau Mengantar. Format otomatis terdeteksi. Tanpa staging — langsung masuk production.
State A: Upload Form
Kembali ke Pesanan

Import Pesanan

Klik untuk pilih file atau drag & drop
Format: Shopee, TikTok, Mengantar (.xlsx)
Format otomatis terdeteksi dari kolom header
<!-- LiveView: OrderImportLive | phx-change="validate" | phx-submit="upload" | allow_upload :xlsx -->
State B: Processing
Kembali ke Pesanan

Import Pesanan

Memproses 300 pesanan...
Mendeteksi format TikTok XLSX, mencocokkan SKU
State C: Complete
Kembali ke Pesanan

Import Pesanan

Selesai
285
Berhasil
10
Duplikat (skip)
3
SKU Unknown
2
Gagal
SKU Tidak Dikenal (3)
SKU
Nama dari XLSX
Order
Aksi
XYZ-001
Produk Baru A
PS2603-00287
XYZ-002
Produk Baru B
PS2603-00290
ABC-999
Unknown Item
PS2603-00295
Gagal (2)
Baris
Error
Data
Baris 45
Nomor pesanan kosong
—
Baris 189
Total harga tidak valid
"abc"
<!-- LiveView: OrderImportLive | assigns: @result, @sku_unknown, @errors | phx-click="create_product" -->
Navigasi Wireframes
Pesanan List Detail Pesanan Import XLSX
LabaBersih v2 — Order Wireframes — Design System Reference