# PO Operational — List View UI Specification
**ERP-LIMS · Modul Lab Operation**
> Versi: 1.0 · Status: Draft · Dibuat: Apr 2025

---

## 1. Gambaran Umum

Halaman ini adalah **pusat monitoring** seluruh kode sampel (KS) yang sedang aktif di lab. Satu baris tabel mewakili **satu kode sampel (KS)**, bukan satu PO — karena unit kerja lab terkecil adalah per kode sampel.

### Hierarki Data

```
SO (Sales Order)
└── PO Operational (1 SO → 1 PO Operational)
    └── Kode Sampel / KS (1 PO → N kode sampel)
        └── Parameter uji (1 KS → N parameter)
```

Baris di tabel ini = level **Kode Sampel**.

---

## 2. Struktur Halaman

```
┌─────────────────────────────────────────────────────┐
│ TOPBAR — Judul halaman                              │
├─────────────────────────────────────────────────────┤
│ SUMMARY BAR — 5 kartu ringkasan                     │
├─────────────────────────────────────────────────────┤
│ TOOLBAR — Search + filter status + kolom toggle     │
├─────────────────────────────────────────────────────┤
│ TABLE — Grouped by SO, 1 baris = 1 KS              │
│  └─ SO group header (collapsible per SO)            │
│  └─ KS rows                                         │
├─────────────────────────────────────────────────────┤
│ DRAWER PREVIEW — Muncul saat hover/klik row         │
├─────────────────────────────────────────────────────┤
│ PAGINATION — Standard TanStack Table                │
└─────────────────────────────────────────────────────┘
```

---

## 3. Summary Bar

5 kartu ringkasan di atas tabel, selalu visible:

| Kartu | Warna | Konten |
|-------|-------|--------|
| Total KS aktif | Netral | Semua KS yang belum selesai |
| In progress | Biru | KS yang sedang dikerjakan |
| Menunggu | Kuning | KS belum ada aktivitas |
| Deadline < 2 hari | Merah | KS yang akan jatuh tempo |
| Out of range | Merah | KS yang ada parameter OOR |

> Kartu **Deadline < 2 hari** dan **Out of range** punya border merah sebagai visual alert. Klik kartu → filter tabel otomatis.

---

## 4. Toolbar

### 4.1 Search

- Placeholder: `Cari nomor PO, KS, customer...`
- Search by: nomor KS, nomor PO, nomor SO, nama customer
- Real-time search, tidak perlu tekan enter

### 4.2 Filter Status

Filter chip horizontal, single select:

| Chip | Filter |
|------|--------|
| Semua (N) | Tidak ada filter |
| In progress (N) | Status = in_progress |
| Menunggu (N) | Status = waiting |
| Selesai (N) | Status = done |
| ⚠ OOR (N) | Ada parameter out_of_range |

> Chip OOR punya warna merah untuk membedakan dari filter status biasa.

### 4.3 Filter Lanjutan

Tombol **Filter ▾** membuka dropdown filter tambahan:
- Filter by analis
- Filter by rentang deadline
- Filter by customer
- Filter by nomor SO

### 4.4 Kolom Toggle

Tombol **Kolom ▾** untuk show/hide kolom sesuai kebutuhan user. Preferensi disimpan di localStorage per user.

---

## 5. Tabel

### 5.1 Grouping by SO

Baris dikelompokkan per SO dengan **group header row**. Group header menampilkan:
- Nomor SO (bold)
- Nama customer
- Jumlah kode sampel dalam SO
- Pill status agregat (OOR / Baru masuk / dll)

Group header bisa di-collapse untuk menyembunyikan semua KS dalam SO tersebut.

### 5.2 Kolom Tabel

| Kolom | Lebar | Keterangan | Sortable |
|-------|-------|------------|----------|
| Kode Sampel | 110px | Nomor KS + nomor PO (sub-text) | ✅ |
| PO Ref | 100px | Link ke SO | ✅ |
| Customer | 140px | Nama customer | ✅ |
| Titik Sampling | 130px | Nama titik + tanggal & waktu | ❌ |
| Progress | 100px | Mini progress bar + angka X/Y | ✅ |
| Analis | 90px | Nama analis (max 2, sisanya +N) | ❌ |
| Deadline | 80px | Tanggal deadline dengan color coding | ✅ |
| OOR | 70px | Flag jumlah parameter out of range | ✅ |
| Status | 70px | Pill status KS | ✅ |
| Aksi | 80px | Tombol Buka / Lihat | ❌ |

### 5.3 Color Coding Kolom Deadline

| Kondisi | Warna | Format |
|---------|-------|--------|
| > 5 hari | Abu (muted) | `30 Apr` |
| 3–5 hari | Kuning (warning) | `30 Apr` bold |
| < 3 hari | Merah (danger) | `30 Apr ⚠` bold |

### 5.4 Progress Bar

- Bar mini width 60px
- Warna bar: hijau jika selesai semua, kuning jika sebagian, merah jika 0%
- Angka `X/Y` di samping bar
- Jika selesai 100%: tampilkan `✓` hijau

### 5.5 Indikator Urgent Row

Baris KS yang deadline < 2 hari mendapat **border kiri merah** (3px) sebagai visual urgency marker, tanpa mengubah background baris.

### 5.6 Kolom Aksi

| Tombol | Warna | Kondisi |
|--------|-------|---------|
| Buka | Biru (primary) | KS belum selesai |
| Lihat | Netral | KS sudah selesai (read-only) |

---

## 6. Drawer Preview

Muncul saat user **hover atau klik row** sebelum membuka full page PO Operational. Drawer ini ringan dan tidak blocking.

### 6.1 Konten Drawer Preview

**Kolom kiri — Info KS:**
- Kode sampel + nomor PO
- Customer
- Titik sampling + waktu

**Kolom tengah — List parameter:**
- Daftar semua parameter dengan pill status per parameter
- Status: Selesai (hijau) / OOR (merah) / Pending (kuning) / Belum assign (abu)

**Kolom kanan — Meta & aksi:**
- Deadline dengan warning jika urgent
- Nama analis yang terlibat
- Tombol **Buka PO Operational →**

### 6.2 Tujuan Drawer Preview

User bisa **scan status parameter** tanpa harus membuka full page. Berguna untuk supervisor yang memantau banyak KS sekaligus.

---

## 7. Page Size & Pagination

Mengikuti standar global ERP-LIMS:

| Setting | Nilai |
|---------|-------|
| Default page size | 25 |
| Opsi page size | 25, 50, 100 |
| Kategori | `master_data` / `transaction` |
| Persist preference | localStorage key: `po_ops_list_pagesize` |

> Karena 1 baris = 1 KS (bukan 1 PO), jumlah baris bisa signifikan. Default 25 sudah tepat.

---

## 8. Business Rules List View

| Rule | Deskripsi |
|------|-----------|
| BR-01 | KS hanya muncul di list setelah proses Penerimaan Sampel selesai |
| BR-02 | Status KS dikalkulasi otomatis dari status parameter di dalamnya |
| BR-03 | KS dengan status Selesai tetap muncul di list selama dalam filter periode aktif |
| BR-04 | Kolom OOR hanya tampil jika ada minimal 1 parameter out_of_range |
| BR-05 | Group header SO muncul meski hanya ada 1 KS dalam SO tersebut |
| BR-06 | Sorting tidak memecah group — sort hanya berlaku dalam group SO |

---

## 9. Akses per Role

| Role | Dapat Lihat | Dapat Buka Detail | Filter Default |
|------|-------------|-------------------|----------------|
| Lab Manager | Semua KS | ✅ | Semua |
| Analis | KS yang di-assign ke dirinya | ✅ | Filter by analis = self |
| Supervisor | Semua KS | ✅ | Semua + flag OOR |
| Sales | KS milik customer-nya | ❌ (read-only) | Filter by customer |
| Finance | Semua KS yang sudah Selesai | ❌ (read-only) | Status = Selesai |

---

## 10. Integrasi dengan Modul Lain

| Modul | Hubungan |
|-------|----------|
| Penerimaan Sampel | KS terbentuk dari proses penerimaan |
| PO Operational Detail | Klik **Buka** → navigasi ke halaman detail |
| Laporan | KS selesai → trigger generate laporan |
| Notifikasi | Deadline < 2 hari → push notif ke analis & supervisor |

---

## 11. Empty States

| Kondisi | Pesan |
|---------|-------|
| Tidak ada KS aktif | "Tidak ada kode sampel aktif saat ini" |
| Filter tidak menemukan hasil | "Tidak ada hasil untuk filter ini — coba ubah filter" |
| Analis belum ada KS | "Belum ada sampel yang di-assign ke kamu" |

---

*Dokumen ini adalah spesifikasi UI/UX list view — lihat dokumen `po-operational-ui-spec.md` untuk spesifikasi halaman detail.*