# UI/UX Design Guidelines: B2B Supplier & Minimarket
*Berdasarkan prinsip Apple Human Interface Guidelines (HIG)*

Dokumen ini adalah panduan desain UI/UX untuk menyederhanakan proses operasional B2B (Minimarket ⇄ Supplier) yang biasanya kompleks, kaku, dan membingungkan (seperti ERP tradisional) menjadi pengalaman yang **intuitif, ringan, dan fokus** layaknya aplikasi ekosistem Apple.

---

## 1. Prinsip Utama (Core Principles)

Menurut Apple HIG, desain yang baik harus memiliki 3 hal: **Clarity (Kejelasan)**, **Deference (Rasa Hormat pada Konten)**, dan **Depth (Kedalaman)**.

Dalam konteks operasional Minimarket:
- **Jangan gunakan tabel raksasa (Excel-like)** di layar *mobile*. Gunakan antarmuka berbasis *Card* (Kartu) yang hanya menampilkan informasi yang relevan saat ini.
- **Progressive Disclosure (Pengungkapan Bertahap):** Sembunyikan form kompleks. Jangan paksa user melihat 20 kolom data jika mereka hanya butuh tahu "Hari ini laku berapa?".
- **Bahasa Manusia:** Hindari jargon sistem (misal: "Purchase Order #1204", "Receiving Note"). Gunakan bahasa sehari-hari: "Pesanan Hari Ini", "Barang Masuk", "Pencairan".

---

## 2. Bedah UX per Proses Bisnis

### A. Forecasting & Order (Koperasi ➡️ Supplier)
**Masalah ERP Tradisional:** Form PO yang panjang, harus input *Item Code*, cari nama barang, dan ketik angka manual.
**Apple HIG Solution (Smart Suggestions):**
- **Saran Otomatis (Siri-like Suggestion):** Layar tidak menampilkan form kosong, melainkan **Kartu Saran Restock**. 
  > *"Berdasarkan penjualan 7 hari terakhir, stok Indomie Goreng Anda sisa 10. Disarankan pesan 50 pcs."*
- **One-Tap Action:** Admin hanya perlu menekan tombol **"Setujui & Kirim Pesanan"**. Tidak perlu mengetik angka sama sekali kecuali mereka ingin mengubah (Override) kuantitasnya menggunakan tombol *Stepper* `[ - ] 50 [ + ]`.

### B. Dashboard Supplier (Sisi Supplier)
**Masalah ERP Tradisional:** Terlalu banyak menu navigasi.
**Apple HIG Solution (Glanceable Dashboard):**
Saat Supplier membuka aplikasi di pagi hari, yang paling penting bagi mereka adalah visibilitas cepat (*Glanceable*).
- **At a Glance Header:** Tampilkan angka besar di atas layar:
  - **Rp 1.450.000** (Estimasi Uang Cair Hari Ini)
  - **3 Pesanan Masuk** (Harus dikirim hari ini)
- **Status Ring (Metrik Visual):** Gunakan diagram lingkaran (*Activity Rings* ala Apple Watch) yang menunjukkan persentase barang mereka yang sudah laku di minimarket hari ini.

### C. Receiving / Penerimaan Barang (Proses Paling Krusial)
Ini adalah proses paling rawan *human-error* dan manipulasi.
**Masalah ERP Tradisional:** Staf harus memegang kertas PO fisik, mencentang pakai pulpen, lalu kembali ke komputer untuk mengetik ulang (Input Receiving).
**Apple HIG Solution (Direct Manipulation & Fluid Modals):**
- **Mobile-First Scanning:** Staf gudang cukup memegang *smartphone*/iPad.
- **Tampilan Checklist Dinamis:** 
  Tampilkan daftar barang yang *diharapkan* datang hari ini dalam bentuk *List*.
- **The "All Good" Button:** Sediakan tombol centang hijau besar di sebelah setiap nama barang. Jika fisik barang yang datang *pas* (100% sama dengan PO), staf cukup **Tap 1 kali**. Selesai.
- **Bottom Sheet untuk Discrepancy (Selisih):**
  Jika barang kurang/lebih/rusak, staf menekan (Long-press atau tap area lain) pada barang tersebut, lalu muncul *Bottom Sheet* (Slide-up modal) yang halus:
  - Tersedia slider atau *Numpad* besar ala iOS untuk mengetik angka aktual.
  - Tersedia *segmented control* (Tombol pilh): `[Layak Jual]  [Rusak/Cacat]`.
  - Jika qty melebihi 20%, berikan haptic feedback (getar) dan animasi *shake* (goyang) pada inputan dengan teks merah *"Melebihi batas toleransi pengiriman (Max 20%)"*.

### D. Settlement / Pencairan Dana (Sore Hari)
**Masalah ERP Tradisional:** Rekonsiliasi panjang, harus mencocokkan nota bon dan buku kasir.
**Apple HIG Solution (Wallet & Apple Pay Experience):**
- Buat layaknya aplikasi dompet digital.
- **Kartu Settlement:** Tampilkan kartu bernama "Saldo Siap Cair". Di dalamnya tertulis rincian otomatis hasil kalkulasi:
  `(Barang Laku x Harga Modal) - (Retur Barang Rusak) = Rp X`
- Saat Admin memproses pencairan tunai, gunakan animasi "Slide to Confirm" (Geser untuk Cairkan) atau *FaceID/PIN validation* agar proses mutasi laci kasir ini terasa aman, sah, dan tidak bisa dipencet tidak sengaja.
- **Sukses:** Tampilkan ikon centang hijau besar (*Success Checkmark*) ala Apple Pay.

---

## 3. Komponen Desain & Gaya (Styling)
Untuk memastikan teman Anda dapat meracik UI ini dengan Tailwind CSS / React:
1. **Glassmorphism:** Gunakan `backdrop-blur-xl bg-white/70` (atau `bg-slate-900/80` di Dark Mode) untuk *Bottom Sheets* dan *Top Navigation* agar terasa menyatu dengan lapisan sistem.
2. **Elevasi (Shadows):** Elemen yang bisa diklik / *Cards* harus tampak menonjol. Gunakan shadow yang sangat lembut (`shadow-sm shadow-slate-200/50`).
3. **Corner Radius:** Elemen ala Apple sangat membulat dan ramah. Gunakan `rounded-2xl` atau `rounded-[20px]` untuk *Cards* dan `rounded-full` untuk *Buttons*.
4. **Typography:** Gunakan hierarki huruf tebal (*Bold*) untuk judul angka uang/metrik, dan warna teks `text-slate-500` untuk label agar tidak mendominasi visual.

## Kesimpulan
Dengan meminjam prinsip Apple, kita tidak membuat staf Minimarket merasa sedang "bekerja memasukkan data", melainkan mereka hanya melakukan proses validasi cepat (Tap, Scroll, Geser). Sistemlah yang melakukan pekerjaan kotor di belakang layar.