AbelBirdNest-Stock/docs/project-spec/walet-user-flow-visual-for-figma.md

# User Flow Visual untuk Figma
## Sistem Inventory Sarang Burung Walet

Dokumen ini dibuat agar desainer bisa langsung menggambar user flow visual di Figma atau FigJam.

---

# 1. Node Legend yang Disarankan
Gunakan standar shape berikut di Figma/FigJam:

- **Rectangle** = screen/page
- **Rounded rectangle** = modal/drawer/panel aksi
- **Diamond** = decision point
- **Parallelogram** = input/scanning/manual entry
- **Small tag/badge** = status atau note penting
- **Arrow** = alur utama
- **Dashed arrow** = alur alternatif / exception flow

Warna saran:
- Biru = flow utama
- Hijau = success path
- Oranye = warning/manual override
- Merah = error/blocked state
- Ungu = traceability / lookup path

---

# 2. Sitemap Ringkas
Susun dari kiri ke kanan:

```text
Login
  -> Dashboard
    -> Master Data
      -> Suppliers
      -> Customers
      -> Item Types
      -> Item Grades
      -> Warehouses
    -> Purchases
    -> Receipts
    -> Lots
    -> Sorting
    -> Sales
    -> Adjustments
    -> Returns
    -> Barcode Lookup
    -> Reports
```

---

# 3. Flow 1. Purchase to Receipt to Lot
## Tujuan
Menggambarkan alur dari pembelian sampai lot terbentuk.

## Node urutan
```text
Dashboard
  -> Purchase List
  -> Purchase Form
  -> [Decision: Save Draft or Submit?]
      -> Save Draft -> Purchase Detail
      -> Submit -> Purchase Detail
  -> Create Receipt
  -> Receipt Form
  -> [Decision: Finalize Receipt?]
      -> No -> Draft Receipt Detail
      -> Yes -> Generate Lots
  -> Receipt Detail
  -> Lot Detail
```

## Notes untuk designer
- tampilkan supplier info termasuk bank info di purchase/receipt
- receipt punya branch untuk accepted/rejected qty
- setelah finalize, harus ada cabang ke lot result

---

# 4. Flow 2. Lot to Sorting / Regrade
## Tujuan
Menggambarkan alur perubahan lot setelah QC/sortasi.

## Node urutan
```text
Dashboard
  -> Lot List
  -> Lot Detail
  -> [Decision: Need Sorting or Regrade?]
      -> Sorting
        -> Sorting Session Form
        -> [Decision: Output valid?]
            -> No -> Error / revise rows
            -> Yes -> Child Lots Created
        -> Sorting Result Detail
        -> Child Lot Detail
      -> Regrade
        -> Regrade Form
        -> [Decision: Qty valid?]
            -> No -> Error
            -> Yes -> New Grade Lot / Updated Lot
        -> Lot Detail
```

## Notes
- decision node harus jelas memisahkan sorting dan regrade
- gunakan warna oranye untuk warning jika qty tidak balance
- gunakan node kecil untuk menandai shrinkage/reject

---

# 5. Flow 3. Sales Order to Allocation to Picking
## Tujuan
Ini flow paling penting untuk desain, karena inti kompleksitas sistem ada di sini.

## Node urutan
```text
Dashboard
  -> Sales List
  -> Sales Form
  -> Sales Detail
  -> Allocation Screen
  -> [Decision: Auto allocate or Manual allocate?]
      -> Auto Allocate FIFO
      -> Manual Select Lots
  -> [Decision: Allocation complete?]
      -> No -> Back to Allocation Screen
      -> Yes -> Save Allocation
  -> Picking Screen
  -> [Decision: Picked qty matches allocation?]
      -> Yes -> Confirm Picking
      -> No -> Variance Flow
  -> Sales Detail Final
```

## Variance subflow
```text
Picking Screen
  -> Variance Warning
  -> [Decision: allow override?]
      -> No -> Back to Picking
      -> Yes -> Save Variance + Audit
  -> Sales Detail Final
```

## Notes
- allocation page perlu ditandai sebagai "critical workflow"
- tampilkan alur campuran lot dari beberapa supplier
- gunakan dashed flow untuk manual override

---

# 6. Flow 4. Barcode / QR Lookup
## Tujuan
Flow cepat untuk user gudang.

## Node urutan
```text
Dashboard
  -> Barcode Scan Page
  -> [Decision: Scan success?]
      -> No -> Manual Input
      -> Yes -> Lookup Result
  -> [Decision: What next?]
      -> Open Lot Detail
      -> Transfer Lot
      -> Hold/Release Lot
      -> Picking Context
```

## Notes
- flow ini sebaiknya punya versi mobile frame
- scan success dan scan fail harus digambar

---

# 7. Flow 5. Stock Adjustment / Shrinkage
## Tujuan
Menggambarkan flow perubahan stok di luar transaksi normal.

## Node urutan
```text
Dashboard
  -> Lot Detail / Adjustment Menu
  -> Adjustment Form
  -> [Decision: Above approval threshold?]
      -> No -> Post Adjustment
      -> Yes -> Pending Approval
          -> Approver Review
          -> [Decision: Approve?]
              -> Reject -> Back to Draft/Cancelled
              -> Approve -> Post Adjustment
  -> Updated Lot Detail
  -> Movement Ledger Updated
```

## Notes
- cocok digambar dengan lane approval terpisah
- gunakan merah untuk shrinkage/loss branch

---

# 8. Flow 6. Sales Return
## Node urutan
```text
Sales Detail
  -> Create Sales Return
  -> Sales Return Form
  -> [Decision: Return linked to source lot?]
      -> Yes -> Return to existing lot / controlled flow
      -> No -> Create return lot
  -> [Decision: Condition good?]
      -> Yes -> Restock
      -> No -> Regrade / Reject
  -> Return Detail
```

---

# 9. Flow 7. Purchase Return
## Node urutan
```text
Purchase Detail / Lot Detail
  -> Create Purchase Return
  -> Purchase Return Form
  -> Confirm Return
  -> Lot Reduced
  -> Movement Ledger Updated
```

---

# 10. Flow 8. Traceability Lookup
## Tujuan
Membantu designer memahami bagaimana user menelusuri asal barang.

## Backward trace
```text
Sales Detail
  -> Sales Line
  -> Allocation Rows
  -> Lot Detail
  -> Receipt Detail
  -> Purchase Detail
  -> Supplier Detail
```

## Forward trace
```text
Supplier Detail
  -> Purchase List
  -> Purchase Detail
  -> Lots Created
  -> Sales Allocations
  -> Sales Detail
  -> Customer Detail
```

## Notes
- trace flow bisa diberi warna ungu
- cocok dibuat sebagai separate flow map

---

# 11. Rekomendasi Layout Frame di Figma/FigJam
## Board 1. Sitemap
- high-level only

## Board 2. Core Transaction Flows
- purchase -> receipt -> lot
- lot -> sorting/regrade
- sales -> allocation -> picking

## Board 3. Supporting Flows
- scan lookup
- adjustment
- return
- traceability

## Board 4. Role Overlay
Tambahkan badge kecil pada node untuk role:
- OWN
- PUR
- WH
- QC
- SAL

---

# 12. Rekomendasi Label per Screen
Gunakan format:
- `Screen: Purchase Form`
- `Decision: Allocation complete?`
- `Modal: Hold Lot Confirmation`
- `Exception: Pick qty variance`

Ini bikin flow mudah dibaca saat handoff.

---

# 13. Rekomendasi untuk Prototype Link
Untuk prototype yang perlu diklik duluan:
1. Dashboard
2. Purchase Form
3. Receipt Form
4. Lot Detail
5. Sales Form
6. Allocation Screen
7. Picking Screen
8. Barcode Scan

---

# 14. Deliverable yang Disarankan dari Designer
Setelah menggambar flow ini, output minimal:
- 1 figjam board user flow
- 1 screen map desktop
- 1 screen map mobile operasional
- clickable prototype untuk sales allocation flow

---

# 15. Penutup
Flow yang paling penting untuk digambar dulu adalah:
- purchase -> receipt -> lot
- lot -> sorting/regrade
- sales -> allocation -> picking
- scan -> lookup -> action

Kalau empat flow ini sudah jelas di Figma/FigJam, desainer akan jauh lebih cepat masuk ke desain screen detail.