# 13. UI/UX Design System — Modern & Elegant (Lebih Baik dari ESB Order)

## Tujuan

- **Lebih modern & elegan** dari ESB Order: bersih, konsisten, aksesibel.
- **Siap multi-client:** Admin, POS, KDS, Customer (QR) — masing-masing bisa tema ringan berbeda, token sama.
- **Profesional:** cocok UMKM hingga enterprise; tidak “toy” atau template generic.

---

## 1. Prinsip Visual

| Prinsip | Penerapan |
|--------|-----------|
| **Clarity** | Hierarki jelas: primary action menonjol, secondary teredam. |
| **Consistency** | Spacing 4/8px grid; radius konsisten; satu keluarga font. |
| **Efficiency** | POS/KDS: sedikit klik, besar tap target; keyboard shortcut. |
| **Accessibility** | Kontras WCAG AA; focus visible; label & aria. |
| **Responsive** | Admin di desktop & tablet; POS/KDS bisa fixed layout; Customer mobile-first. |

---

## 2. Design Tokens (CSS Variables)

### Warna — Brand & Semantic

```css
/* Primary (aksi, link, brand) */
--color-primary:       #0d9488;   /* teal-600 */
--color-primary-hover:  #0f766e;
--color-primary-light: #ccfbf1;

/* Neutral (background, text) */
--color-bg:            #f8fafc;
--color-surface:       #ffffff;
--color-border:        #e2e8f0;
--color-text:         #0f172a;
--color-text-muted:    #64748b;

/* Status */
--color-success:       #16a34a;
--color-warning:       #ca8a04;
--color-error:         #dc2626;
--color-info:          #2563eb;
```

### Typography

- **Font family:** Inter, Plus Jakarta Sans, atau system-ui (fallback).
- **Scale:** 12, 14, 16, 18, 20, 24, 30 (px atau rem).
- **Weight:** 400 (body), 500 (medium), 600 (semibold), 700 (bold).
- **Line height:** 1.25 (heading), 1.5 (body).

### Spacing (8px grid)

- 4, 8, 12, 16, 24, 32, 40, 48, 64 (px).
- Gap card: 16–24; padding section: 24–32.

### Radius & Shadow

- **Radius:** 6px (button, input), 8–12px (card), 9999px (pill).
- **Shadow:** card: `0 1px 3px rgba(0,0,0,.08)`; elevated: `0 4px 12px rgba(0,0,0,.08)`.

---

## 3. Komponen Umum

| Komponen | Gaya |
|----------|------|
| **Button primary** | Background primary, putih text; hover lebih gelap; radius 8px; padding 10px 20px. |
| **Button secondary** | Border + text; hover background subtle. |
| **Input** | Border 1px, radius 8px, focus ring 2px primary. |
| **Card** | Background surface, border atau shadow ring, radius 12px, padding 24px. |
| **Table** | Header background subtle; row hover; border-bottom saja. |
| **Badge** | Pill kecil; success/warning/error/neutral. |
| **Sidebar** | Lebar 260px; item aktif background primary-light + border kiri primary. |
| **Top bar** | Tinggi 56–64px; judul + aksi kanan; border-bottom. |

---

## 4. Layout Per Client

### Admin Web

- **Layout:** Sidebar kiri (navigasi modul) + top bar + content area.
- **Content:** Max-width 1280px; card-based section.
- **Density:** Medium (bukan padat seperti legacy ESB).

### POS Web

- **Layout:** Optional sidebar ringkas (kategori) + area produk grid + cart kanan/bawah + bar bawah (total, payment).
- **Touch:** Tombol besar; jumlah jelas; warna status (unpaid/paid).

### Kitchen Display (KDS)

- **Layout:** Fullscreen; kartu order per meja/order; warna status (new/cooking/ready); timer besar; minimal teks, maksimal visual.

### Customer (QR / Web)

- **Layout:** Mobile-first; list kategori → produk → cart → checkout; single column; CTA jelas.

---

## 5. Halaman Kunci (Blueprint)

- **Login:** Centered card; logo; form email/password; “Lupa password”; error inline.
- **Dashboard:** Ringkasan hari (revenue, order count); quick action; chart sederhana (opsional).
- **List (Outlet, Menu, Order):** Filter + tabel + pagination; tombol “Tambah” menonjol.
- **Form (CRUD):** Group field; validasi inline; tombol Simpan/Batal.
- **POS:** Grid produk; cart dengan item + modifier; total + tombol Bayar; receipt preview.

---

## 6. Aksesibilitas & Responsive

- Kontras teks ≥ 4.5:1 (AA).
- Focus visible (outline/ring) untuk keyboard.
- Label untuk input; aria-label untuk icon-only.
- Breakpoint: 640 (sm), 768 (md), 1024 (lg), 1280 (xl); sidebar collapse di mobile jadi drawer.

---

## 7. Perbandingan dengan ESB Order (Target)

| Aspek | ESB Order (umum) | Smart Order OS (target) |
|-------|-------------------|---------------------------|
| Tampilan | Padat, banyak tabel | Lebih lega, card & spacing konsisten |
| Warna | Sering monoton | Primary + semantic status jelas |
| Typography | Standar | Scale & weight konsisten |
| Navigasi | Menu banyak level | Sidebar jelas, grouping modul |
| Form | Banyak field sekaligus | Grouping, validasi inline |
| POS | Klik banyak | Sedikit langkah, tombol besar |
| Mobile | Sering tidak dioptimalkan | Mobile-first untuk customer & admin ringan |

Implementasi teknis: token di `resources/css/app.css` (atau file design-tokens); komponen Blade/component + Tailwind; Alpine.js untuk interaksi ringan.
