# 📐 BLUEPRINT UI/UX MOBILE SCANNER SYSTEM
**Standar Desain Antarmuka Pemindaian Barcode/QR Code untuk Seluruh Modul Transaksi**

---

## 1. Pendahuluan & Tujuan Standardisasi

Blueprint ini ditetapkan sebagai acuan resmi pengembangan dan penyelarasan antarmuka pengguna (UI/UX) pada seluruh modul transaksi yang memiliki fitur **Mobile / Tablet Scanner Mode** (`followupPreviewMobile` / `followupDariHp`).

### Tujuan Utama:
1. **Kepatuhan ISO 9241-110 (Dialogue Principles)**: Eliminasi kelelahan visual (*alarm fatigue*) dengan mengganti warna peringatan ekstrem menjadi hirarki warna terstruktur.
2. **Kepatuhan ISO 9241-210 & Fitts's Law (Touch Ergonomics)**: Menjamin ukuran elemen interaktif (*input barcode*, *checkbox*, *button*) minimal **48px–52px** agar mudah dan cepat dioperasikan pada layar sentuh genggam.
3. **Kepatuhan WCAG 2.1 Level AA (Accessibility & Contrast)**: Memastikan rasio kontras teks terhadap latar belakang berada di atas **4.5:1 (atau > 7:1 untuk elemen kritis)** tanpa ada teks yang hilang atau bertabrakan dengan background gelap.

---

## 2. Cakupan Modul Target Implementasi

Blueprint ini berlaku untuk modul transaksi utama yang menggunakan alur pemindaian scanner:

1. **`pindahgudang`** *(Modul Acuan / Reference Module)*
2. **`penjualan`**
3. **`distribusifg`**
4. **`distribusifgproject`**
5. **`pembelian`**
6. **`pembelianfgproject`**
7. **`konversi`**

---

## 3. Spesifikasi Arsitektur Komponen UI/UX Scanner

```
+-----------------------------------------------------------------------------------+
| 1. SCANNER INPUT BAR (Sticky / Top Focus Area)                                   |
|    [ Input Barcode (Height: 52px, Font: 20px, Focus Glow) ]  [ Checkbox Multi ]  |
+-----------------------------------------------------------------------------------+
| 2. HEADER TRANSAKSI DARK NAVY (#1E293B) + SCOPED CSS OVERRIDES                    |
|    Title (White) | Origin -> Destination (Bright Cyan #38BDF8) | Nomor (Pill)  |
+-----------------------------------------------------------------------------------+
| 3. PETUNJUK PEMINDAIAN (Collapsible Accordion Panel - #FEFCE8)                     |
|    [v] PETUNJUK PEMINDAIAN (Klik untuk buka/tutup)                                |
+-----------------------------------------------------------------------------------+
| 4. TABEL INFORMASI STOK BARANG & LEGENDA                                          |
|    Legenda Status: [Stok Kosong Red] [Stok Kurang Amber] [Stok Cukup Green]       |
|    Tabel Netral (Zebra Striping) + Status Badge Chips (Font-weight 800)           |
+-----------------------------------------------------------------------------------+
```

---

## 4. Rincian Detail Komponen & Snippet Kode Standard

### Komponen A: Input Barcode & Touch Ergonomics
**Lokasi View**: `application/modules/[modul]/views/followUp.php`

```php
// 1. Text Info Panduan Cursor
$list_data .= "<div class='text-bold text-center margin hidden-xs' style='color: #1E293B; font-size: 18px; font-weight: 600; margin-bottom: 15px;'>
    <i class='fa fa-barcode text-primary'></i> Pastikan Cursor mengarah ke form Input Barcode/QRCode sebelum melakukan scan
</div>";

// 2. Checkbox Multi Serial dengan Touch Target 22px x 22px
$list_data .= "
    <div class='text-center margin' style='margin-bottom: 15px;'>
        <label style='font-size: 16px; cursor: pointer; user-select: none;'>
            <input type='checkbox' id='multi_mode_toggle' style='width: 22px; height: 22px; vertical-align: middle; cursor: pointer;'> 
            <span style='vertical-align: middle; font-weight: 600; color: #334155; margin-left: 6px;'>Gunakan Multi Serial</span>
        </label>
    </div>
";

// 3. Input Form Barcode dengan Focus Glow & Height 52px
$list_data .= "
    <div class='row hidden-xs'>
        <div class='container-fluid'>
            <div id='input-group-qr' class='input-group' style='display:block!important; max-width: 600px; margin: 0 auto;'>
                <input id='qr_scaner' type='$tipe_input' onclick='select()' class='form-control text-center text-bold' value='' placeholder='kode produk' 
                       style='height: 52px; font-size: 20px; border: 2px solid #2563EB; border-radius: 8px; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); transition: all 0.2s ease-in-out;'>
                <span id='qr_scaner_go_group' class='input-group-btn hidden'>
                    <button id='qr_scaner_go' type='button' class='btn btn-info btn-flat' style='height: 52px; font-size: 16px; font-weight: bold; border-radius: 0 8px 8px 0;'><i class='fa fa-send'></i> GO!</button>
                </span>
            </div>
        </div>
    </div>
";
```

---

### Komponen B: Header Transaksi & Scoped CSS Overrides
**Lokasi Controller**: `application/modules/[modul]/controllers/FollowUp.php`

> [!IMPORTANT]
> **Aturan Scoped CSS**: Untuk mencegah bentrokan warna (*color collision*) saat variabel dinamis seperti `$pihak_name_asal` atau `$nomer` mengandung tag HTML/link dari helper CI, WAJIB menyertakan aturan CSS `.header-dark-custom`.

```php
$list_data .= "<style>
    .header-dark-custom { background-color: #1E293B !important; color: #FFFFFF !important; padding: 14px 18px !important; border-radius: 6px 6px 0 0 !important; }
    .header-dark-custom * { color: #FFFFFF !important; }
    .header-dark-custom a, .header-dark-custom .pihak-highlight, .header-dark-custom .pihak-highlight * { color: #38BDF8 !important; font-weight: 700 !important; text-decoration: underline !important; }
    .header-dark-custom .nomer-highlight, .header-dark-custom .nomer-highlight * { color: #F8FAFC !important; font-weight: 700 !important; }
</style>";

$list_data .= "<div class='box box-default' style='margin-bottom:15px; border:1px solid #1E293B; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.1); background-color:#FFFFFF;'>";
$list_data .= "<div class='box-header with-border header-dark-custom'>";
$list_data .= "<h3 style='margin:0; font-size:17px; font-weight:700; color:#FFFFFF;'><i class='fa fa-exchange' style='color:#38BDF8; margin-right:8px;'></i><span class='capitalize' style='color:#FFFFFF;'>$title</span> dari <span class='pihak-highlight'>$pihak_name_asal</span> ke <span class='pihak-highlight'>$pihak_name</span></h3>";
$list_data .= "<div style='margin-top:8px; font-size:14px; color:#CBD5E1; font-weight:600;'><span class='nomer-highlight' style='background:#334155; color:#F8FAFC !important; padding:3px 10px; border-radius:4px; font-weight:700; border:1px solid #475569;'>Nomor: $nomer</span> &nbsp;&nbsp;|&nbsp;&nbsp; <span style='color:#E2E8F0 !important; font-weight:600;'>$tanggal</span></div>";
$list_data .= "</div>";
```

---

### Komponen C: Petunjuk Pemindaian (Collapsible Accordion)
**Lokasi Controller**: `application/modules/[modul]/controllers/FollowUp.php`

```php
$list_data .= "<div class='panel panel-default' style='margin-bottom:15px; border-radius:6px; border:1px solid #FEF08A; background-color:#FEFCE8;'>
    <div class='panel-heading' style='background-color:#FEF08A; color:#854D0E; padding:8px 15px; cursor:pointer;' data-toggle='collapse' data-target='#petunjukScanBody'>
        <h4 class='panel-title' style='font-size:14px; font-weight:bold;'><i class='fa fa-info-circle text-amber'></i> PETUNJUK PEMINDAIAN (Klik untuk buka/tutup)</h4>
    </div>
    <div id='petunjukScanBody' class='panel-collapse collapse in' style='padding:12px 15px; color:#713F12;'>
        <ol style='margin-bottom:0; padding-left:20px;'>
            <li>PRODUK SERIAL WAJIB MENGGUNAKAN SCANNER;</li>
            <li><b>CARA:</b> <b>STEP 1</b> SCAN SKU &nbsp;&Rightarrow;&nbsp; <b>STEP 2</b> SCAN SERIAL;</li>
            <li>MANUAL INPUT SERIAL (KHUSUS PENGGUNAAN PC NON SCANNER DEVICE);</li>
            <li><b>CARA:</b> <b>STEP 1</b> KLIK PADA NAMA UNIT &nbsp;&Rightarrow;&nbsp; <b>STEP 2</b> KLIK PART (Indoor/Outdoor Unit) &nbsp;&Rightarrow;&nbsp; <b>STEP 3</b> KETIK SERIAL PADA FORM;</li>
            <li>PRODUK NON SERIAL ISIKAN JUMLAH DIKIRIM/DITERIMA <b>(WAJIB SAMA).</b></li>
        </ol>
    </div>
</div>";
```

---

### Komponen D: Legenda Stok & Tabel Informasi Stok (Solid Chips WCAG AA)
**Lokasi Controller**: `application/modules/[modul]/controllers/FollowUp.php`

```php
// 1. Box Container Informasi Stok
$list_kurang = "<div class='box box-default' style='border:1px solid #CBD5E1; border-radius:6px; margin-bottom:15px;'>";
$list_kurang .= "<div class='box-header' style='background-color:#1E293B; color:#FFFFFF; padding:10px 15px;'>";
$list_kurang .= "<h4 class='box-title text-bold' style='font-size:15px; color:#FFFFFF;'><i class='fa fa-cubes' style='color:#38BDF8;'></i> INFORMASI STOK BARANG </h4>";
$list_kurang .= "<div class='box-tools pull-right'><button type='button' class='btn btn-box-tool' data-widget='collapse' style='color:#FFFFFF;'><i class='fa fa-minus'></i></button></div>";
$list_kurang .= "</div>";

// 2. Legenda Solid Chips (Font-weight 800)
$list_kurang .= "<div class='box-body' style='display:block; padding:15px;'>";
$list_kurang .= "<div style='margin-bottom:16px; padding:12px 16px; background:#FFFFFF; border-radius:8px; border:2px solid #CBD5E1; display:flex; align-items:center; gap:12px; flex-wrap:wrap;'>";
$list_kurang .= "<strong style='color:#0F172A; font-size:14px; font-weight:800; margin-right:10px;'><i class='fa fa-info-circle' style='color:#2563EB;'></i> LEGENDA STOK:</strong> ";
$list_kurang .= "<span style='background-color:#DC2626; color:#FFFFFF; font-weight:800; font-size:13px; padding:6px 14px; border-radius:6px; display:inline-block; letter-spacing:0.5px; box-shadow:0 1px 2px rgba(0,0,0,0.1);'><i class='fa fa-times-circle'></i> Stok Kosong</span> ";
$list_kurang .= "<span style='background-color:#D97706; color:#FFFFFF; font-weight:800; font-size:13px; padding:6px 14px; border-radius:6px; display:inline-block; letter-spacing:0.5px; box-shadow:0 1px 2px rgba(0,0,0,0.1);'><i class='fa fa-exclamation-triangle'></i> Stok Kurang</span> ";
$list_kurang .= "<span style='background-color:#16A34A; color:#FFFFFF; font-weight:800; font-size:13px; padding:6px 14px; border-radius:6px; display:inline-block; letter-spacing:0.5px; box-shadow:0 1px 2px rgba(0,0,0,0.1);'><i class='fa fa-check-circle'></i> Stok Cukup</span>";
$list_kurang .= "</div>";

// 3. Render Tabel Stok Netral dengan Solid Status Badges
$list_kurang .= "<table class='table table-responsive table-bordered table-striped' style='width:100%; margin-top:0px; background-color:#FFFFFF;'>";
$list_kurang .= "<thead style='background-color:#F1F5F9;'>";
$list_kurang .= "<tr>
    <th style='color:#0F172A; font-weight:700;'>no.</th>
    <th style='color:#0F172A; font-weight:700;'>pid</th>
    <th style='color:#0F172A; font-weight:700;'>sku</th>
    <th style='color:#0F172A; font-weight:700;'>nama</th>
    <th style='color:#0F172A; font-weight:700;'>jumlah</th>
    <th style='color:#0F172A; font-weight:700;'>stok</th>
    <th style='color:#0F172A; font-weight:700;'>status / keterangan</th>
</tr></thead><tbody>";

foreach ($itemsProduk_data as $pidd => $pspecc) {
    $stok = isset($stokNows[$pidd]) ? $stokNows[$pidd] : 0;
    if ($stok < $pspecc["jml"]) {
        $itemsProduk_kurang[] = $pidd;
        $ket = "<span class='meta' style='color:#64748B; font-weight:600;'>stok kurang, silahkan tambah stok dahulu.</span>";
        if ($stok == 0) {
            $badgeStatus = "<span style='background-color:#DC2626; color:#FFFFFF; font-weight:800; padding:6px 12px; font-size:12px; border-radius:6px; display:inline-block;'><i class='fa fa-times-circle'></i> Stok Kosong</span>";
        } else {
            $badgeStatus = "<span style='background-color:#D97706; color:#FFFFFF; font-weight:800; padding:6px 12px; font-size:12px; border-radius:6px; display:inline-block;'><i class='fa fa-exclamation-triangle'></i> Stok Kurang</span>";
        }
    } else {
        $ket = "<span style='color:#16A34A; font-weight:600;'><i class='fa fa-check-circle'></i> Stok Cukup</span>";
        $badgeStatus = "<span style='background-color:#16A34A; color:#FFFFFF; font-weight:800; padding:6px 12px; font-size:12px; border-radius:6px; display:inline-block;'><i class='fa fa-check-circle'></i> Stok Cukup</span>";
    }
    
    $no++;
    $list_kurang .= "<tr style='background-color:#FFFFFF;'>";
    $list_kurang .= "<td style='color:#334155;'>$no.</td>";
    $list_kurang .= "<td style='color:#334155; font-weight:600;'>" . $pspecc["id"] . "</td>";
    $list_kurang .= "<td style='color:#334155;'>" . $pspecc["produk_kode"] . "</td>";
    $list_kurang .= "<td style='color:#1E293B; font-weight:700;'>" . $pspecc["nama"] . "</td>";
    $list_kurang .= "<td style='color:#334155; font-weight:bold;'>" . $pspecc["jml"] . "</td>";
    $list_kurang .= "<td style='color:#334155; font-weight:bold;'>" . $stok . "</td>";
    $list_kurang .= "<td>$badgeStatus &nbsp; $ket</td>";
    $list_kurang .= "</tr>";
}
$list_kurang .= "</tbody></table>";
```

---

## 5. Checklist Verifikasi & Matriks Kepatuhan (Compliance Audit Checklist)

Sebelum menyelesaikan implementasi pada modul target baru, lakukan pengujian berikut:

| Kriteria / Fitur | Metode Pengujian | Standar Minimum yang Wajib Dipenuhi |
| :--- | :--- | :--- |
| **Kepatuhan PHP 5.6** | Linter / Execution Check | Bebas dari sintaks PHP 7+ (`??`, `[]`, `fn()`). Wajib menggunakan `array()`, `isset() ? :`. |
| **Pencegahan Alarm Fatigue** | Inspeksi Visual | Tidak ada baris tabel pekat merah/kuning. Header menggunakan Scoped Dark Navy (`#1E293B`). |
| **Ketebalan Legenda Stok** | Inspeksi Visual | Legenda stok menggunakan Solid Badges dengan teks putih tebal (Font-weight 800) + ikon. |
| **Target Sentuh Input Barcode** | DevTools Mobile Emulation | Tinggi input `#qr_scaner` minimal **52px** dengan font **20px** tebal. |
| **Keterbacaan Teks (WCAG AA)** | WebAIM Contrast Checker | Rasio kontras teks terhadap latar belakang minimal **4.5:1** (dan **> 7:1** pada nama gudang/link). |
| **Zero Placeholders Rule** | Code Audit | Penggantian fungsi dilakukan secara utuh dari `{` sampai `}` tanpa komentar shortcut (`// ...`). |

---

## 6. Prosedur Replikasi ke Modul Target

Setiap AI Agent atau Developer yang hendak mengimplementasikan UI/UX Scanner ini ke modul target (`penjualan`, `distribusifg`, `distribusifgproject`, `pembelian`, `pembelianfgproject`, `konversi`) wajib mengikuti alur kerja berikut:

1. **Buka Berkas Target**:
   * Controller: `application/modules/[nama_modul]/controllers/FollowUp.php`
   * View: `application/modules/[nama_modul]/views/followUp.php`
2. **Terapkan Komponen A** pada `views/followUp.php` untuk styling `#qr_scaner` dan `#multi_mode_toggle`.
3. **Terapkan Komponen B, C, & D** pada method `shopingCart()` di `controllers/FollowUp.php`.
4. **Verifikasi Hasil**:
   * Lakukan refresh dan pastikan header tidak memiliki bentrokan warna, serta legenda stok tampil tebal dan kontras.