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

---

## 1. Gambaran Umum

PO Operational adalah dokumen kerja lab yang terbentuk setelah proses **penerimaan sampel**. Satu SO bisa menghasilkan beberapa PO Operational tergantung jumlah kode sampel (titik sampling) yang diterima.

```
SO Confirmed → Penerimaan Sampel → [PO-OPS per SO]
                                        └── KS-001 (Kode Sampel 1)
                                        └── KS-002 (Kode Sampel 2)
                                        └── KS-003 (Kode Sampel 3)
```

---

## 2. Struktur Halaman

### 2.1 Layout Utama

Layout dua kolom: **main content** (flex) + **sidebar** (192px fixed).

```
┌─────────────────────────────────────────────┬──────────────┐
│ TOPBAR — Nomor PO, status, deadline         │              │
├─────────────────────────────────────────────┤   Sidebar    │
│ INFO HEADER — Customer, tgl terima, analis  │   (192px)    │
├─────────────────────────────────────────────┤              │
│ SECTION: Kode Sampel & Pengujian            │              │
│  └─ KS-001 [accordion expanded]             │              │
│      └─ Tabel parameter per baris           │              │
│  └─ KS-002 [collapsed]                      │              │
│  └─ KS-003 [collapsed]                      │              │
├─────────────────────────────────────────────┤              │
│ ACTION BAR                                  │              │
└─────────────────────────────────────────────┴──────────────┘
```

### 2.2 Topbar

| Elemen | Konten |
|--------|--------|
| Nomor PO | `PO-OPS-2025-XXXX` |
| Referensi | `dari SO-XXXX` (link ke SO) |
| Status badge | Draft / In progress / Selesai / Ditolak |
| Deadline | Tanggal batas penyelesaian |

**Status badge mapping:**

| Status | Warna | Kondisi |
|--------|-------|---------|
| In progress | Biru (info) | Ada parameter yang sedang dikerjakan |
| Menunggu | Kuning (warning) | Semua parameter belum dimulai |
| Selesai | Hijau (success) | Semua parameter sudah ada hasil |
| Out of range | Merah (danger) | Ada hasil yang melampaui baku mutu |

---

## 3. Info Header

Field read-only, tidak bisa diedit di halaman ini (hanya bisa diubah di halaman Penerimaan Sampel).

| Field | Tipe | Keterangan |
|-------|------|------------|
| Customer | Text | Nama customer dari SO |
| Tanggal terima sampel | Date | Tanggal sampel diterima lab |
| Diterima oleh | Text | Nama petugas penerimaan |
| Kondisi sampel | Badge | Baik / Rusak / Kurang |

---

## 4. Kode Sampel Accordion

### 4.1 Header Accordion

Setiap kode sampel ditampilkan sebagai accordion row. Klik header untuk expand/collapse.

```
[▼] KS-001 · Outlet IPAL Utara — 28 Apr 08.00   [===  ] 3/5   [In progress]
[▶] KS-002 · Saluran Pembuangan Barat — 28 Apr 10.00  [=    ] 1/3   [Menunggu]
[▶] KS-003 · Inlet IPAL — 29 Apr 08.00          [=====] 4/4   [Selesai]
```

**Elemen header accordion:**

| Elemen | Deskripsi |
|--------|-----------|
| Chevron | Indikator open/closed |
| Kode sampel | Format `KS-XXX` |
| Nama titik | Nama titik sampling + tanggal + waktu pengambilan |
| Progress bar | Visual bar + angka `X/Y parameter` |
| Status badge | Status keseluruhan kode sampel |

### 4.2 Tabel Parameter (dalam accordion)

Kolom tabel parameter per kode sampel:

| Kolom | Lebar | Keterangan |
|-------|-------|------------|
| Parameter | 100px | Nama + kategori (sub-text) |
| Metode | 120px | Kode metode standar |
| Satuan | 60px | Satuan pengukuran |
| Analis | 130px | Chip assign analis |
| Hasil | 90px | Nilai hasil atau tombol input |
| Baku mutu | 80px | Nilai referensi regulasi |
| Status | 76px | Pill status per parameter |

**Status per parameter:**

| Status | Pill | Kondisi |
|--------|------|---------|
| Selesai | Hijau | Hasil sudah diinput, dalam batas |
| Out of range | Merah | Hasil melebihi baku mutu |
| Pending | Kuning | Analis sudah assign, belum input hasil |
| Belum assign | Abu | Analis belum di-assign |

### 4.3 Kolom Analis — Chip Assign

```
[ Agus R. ]     ← sudah di-assign (chip biru)
[ + Assign ]    ← belum di-assign (chip abu, klik buka modal assign)
```

- Klik chip assigned → bisa ganti analis
- Klik `+ Assign` → dropdown/modal pilih analis yang tersedia
- Analis yang sedang overload ditandai dengan indikator kapasitas

### 4.4 Kolom Hasil — Input Trigger

```
✓ 24.5 mg/L     ← hasil sudah ada, dalam batas (hijau)
⚠ 312 mg/L      ← hasil sudah ada, out of range (merah)
+ Input hasil   ← belum ada hasil (biru, klik buka drawer)
Belum di-assign ← analis belum assign (abu, non-interaktif)
```

---

## 5. Drawer Input Hasil

Muncul dari sisi kanan saat user klik **+ Input hasil** pada baris parameter yang belum ada hasilnya.

### 5.1 Field Drawer

| Field | Tipe | Required |
|-------|------|----------|
| Parameter | Read-only | — |
| Kode sampel | Read-only | — |
| Analis | Read-only (dari assignment) | — |
| Nilai hasil uji | Number input | ✅ |
| Satuan | Read-only | — |
| Tanggal analisis | Date | ✅ |
| Catatan analis | Textarea | Opsional |

### 5.2 Validasi Otomatis

Setelah nilai diinput, sistem otomatis:
1. Bandingkan nilai dengan baku mutu regulasi yang terkait
2. Set status `Selesai` jika dalam batas, `Out of range` jika melebihi
3. Highlight baris dengan warna sesuai status
4. Update progress bar kode sampel

### 5.3 Action Drawer

| Tombol | Fungsi |
|--------|--------|
| Batal | Tutup drawer, tidak simpan |
| Simpan hasil | Simpan dan update status parameter |

---

## 6. Sidebar

### 6.1 Progress Keseluruhan

- Angka besar: jumlah parameter selesai
- Progress bar: persentase dari total parameter
- Breakdown: Selesai / Pending / Belum assign / Out of range

### 6.2 Deadline Warning

Tampil otomatis jika sisa waktu < 3 hari dan masih ada parameter pending.

```
⚠ Sisa 2 hari — 7 parameter belum selesai
```

### 6.3 Analis Terlibat

Daftar analis beserta jumlah parameter yang di-assign. Parameter yang belum di-assign ditampilkan terpisah sebagai `unassigned`.

### 6.4 Ringkasan Kode Sampel

Daftar semua kode sampel beserta status masing-masing. Klik untuk scroll ke accordion yang sesuai.

### 6.5 Dokumen Terkait

- Berita acara penerimaan (dari modul Penerimaan Sampel)
- Form chain of custody
- Upload dokumen tambahan

---

## 7. Action Bar

| Tombol | Kondisi | Fungsi |
|--------|---------|--------|
| Kembali | Selalu aktif | Kembali ke daftar PO Operational |
| Cetak work order | Selalu aktif | Generate PDF work order per kode sampel |
| Laporkan anomali | Selalu aktif | Form laporan anomali ke supervisor |
| Selesaikan PO | Aktif hanya jika semua parameter selesai | Ubah status PO ke Selesai, trigger generate laporan |

> **Catatan:** Tombol **Selesaikan PO** disabled (opacity 50%) selama masih ada parameter yang belum selesai. Tidak blocking — user tetap bisa simpan progress.

---

## 8. Business Rules

| Rule | Deskripsi |
|------|-----------|
| BR-01 | PO Operational hanya bisa dibuat setelah Penerimaan Sampel selesai |
| BR-02 | 1 SO bisa menghasilkan N PO Operational sesuai jumlah kode sampel |
| BR-03 | Analis di-assign per parameter, bukan per kode sampel |
| BR-04 | Status kode sampel dihitung otomatis dari status parameter di dalamnya |
| BR-05 | Parameter dengan status Out of range tidak menghalangi penyelesaian PO, tapi muncul di laporan sebagai flagged |
| BR-06 | PO bisa diselesaikan hanya jika semua parameter punya nilai hasil (termasuk Out of range) |
| BR-07 | Setelah PO Selesai, data terkunci — perubahan hasil harus lewat proses revisi |

---

## 9. Integrasi Modul

| Modul | Arah | Data yang Dikonsumsi/Dikirim |
|-------|------|------------------------------|
| Penerimaan Sampel | ← Menerima | Kode sampel, kondisi, tanggal terima |
| Master Data — Parameter | ← Referensi | Baku mutu, metode, satuan |
| Human Capital | ← Referensi | Daftar analis aktif & kapasitas |
| Laporan | → Mengirim | Hasil uji semua parameter per kode sampel |
| Finance | → Notifikasi | Trigger invoice setelah PO selesai |

---

## 10. Page Size & Pagination

Halaman ini **tidak menggunakan pagination** — semua kode sampel dalam 1 PO ditampilkan sekaligus dalam accordion. Jumlah kode sampel per PO secara nature terbatas (biasanya 1–20 titik).

Tabel parameter dalam setiap accordion juga ditampilkan **full tanpa pagination** karena jumlah parameter per kode sampel relatif sedikit (biasanya 3–15 parameter).

---

## 11. State Diagram PO Operational

```
[Dibuat] → [In Progress] → [Selesai] → [Laporan digenerate]
                ↓
          [Anomali dilaporkan] → [Review supervisor]
```

---

*Dokumen ini adalah spesifikasi UI/UX — implementasi backend dan database schema terpisah.*