# Screen-by-Screen UI Spec
## Sistem Inventory Sarang Burung Walet

## 1. Login Screen
### Tujuan
Autentikasi user berdasarkan role.

### Section
- logo / app name
- email/phone field
- password field
- login button
- error message area

### Notes
- simple, fast, no clutter

---

## 2. Dashboard
### Tujuan
Memberi gambaran cepat kondisi bisnis.

### Layout
- top header
- metrics cards row
- charts row
- alerts row
- quick actions panel

### Data utama
- total stok aktif
- nilai inventory
- pembelian bulan ini
- penjualan bulan ini
- shrinkage bulan ini
- lot aging alert

### CTA
- buat pembelian
- receipt baru
- sales baru
- scan lot

---

## 3. Supplier List
### Tujuan
Kelola data supplier.

### Layout
- page header
- filter/search bar
- create supplier button
- table list

### Kolom table
- code
- name
- phone
- email
- bank_name
- bank_account_number
- status
- actions

### Detail view supplier
Section:
- informasi umum
- informasi pembayaran
- histori pembelian

---

## 4. Customer List
### Tujuan
Kelola data customer.

### Layout
- page header
- filter/search bar
- create customer button
- table list

### Kolom table
- code
- name
- phone
- email
- bank_name
- bank_account_number
- status
- actions

### Detail view customer
Section:
- informasi umum
- informasi pembayaran
- histori penjualan

---

## 5. Purchase List
### Tujuan
Lihat seluruh purchase.

### Layout
- filter bar
- summary chips
- purchase table

### Kolom
- purchase no
- supplier
- purchase date
- total
- status
- line count
- actions

---

## 6. Purchase Form
### Tujuan
Membuat purchase multi-line.

### Header section
- supplier select
- bank info preview supplier
- purchase date
- invoice supplier
- notes

### Lines section
Kolom:
- item type
- grade
- qty
- unit
- unit price
- subtotal
- classification status
- note

### Summary section
- total lines
- grand total

### Actions
- save draft
- submit
- cancel

---

## 7. Receipt List
### Tujuan
Melihat seluruh receipt.

### Kolom
- receipt no
- purchase no
- supplier
- receipt date
- status
- total lines
- actions

---

## 8. Receipt Form
### Tujuan
Menerima barang dan membentuk lot.

### Header section
- purchase ref
- supplier
- bank info supplier (readonly)
- receipt date
- receiver

### Lines section
- item
- ordered qty
- received qty
- accepted qty
- rejected qty
- unit cost
- warehouse
- location

### Actions
- save receipt
- finalize receipt
- generate lot

---

## 9. Stock Summary
### Tujuan
Ringkasan stok per jenis-grade-gudang.

### Table columns
- item type
- grade
- warehouse
- qty total
- inventory value
- active lot count

---

## 10. Stock Lot List
### Tujuan
Melihat semua lot aktif/detail.

### Filter
- supplier
- item type
- grade
- warehouse
- status
- aging

### Table columns
- lot code
- supplier
- item type
- grade
- available qty
- unit cost
- warehouse
- location
- aging
- status
- actions

---

## 11. Lot Detail
### Tujuan
Pusat traceability dan aksi lot.

### Section 1. Summary card
- lot code
- supplier
- item type
- grade
- available qty
- unit cost
- status

### Section 2. Supplier info
- supplier name
- bank_name
- bank_account_number

### Section 3. Quantity breakdown
- original qty
- available qty
- reserved qty
- damaged qty
- shrinkage qty

### Section 4. Traceability
- parent lot
- child lots
- purchase ref
- receipt ref

### Section 5. Movement history
- timeline/table of movements

### Section 6. Sales usage
- invoice list
- allocated qty
- customer

### Actions
- hold
- release
- transfer
- regrade
- print label

---

## 12. Sorting Session Form
### Tujuan
Pecah satu lot menjadi beberapa hasil.

### Section
- source lot selector
- source lot summary
- results table
- shrinkage input
- reject input
- notes

### Result columns
- item type
- grade
- qty result
- cost

---

## 13. Regrade Form
### Tujuan
Ubah sebagian qty lot ke grade baru.

### Fields
- source lot
- source grade
- target grade
- qty
- reason
- notes

### Preview
- qty remaining source
- target lot result

---

## 14. Sales List
### Tujuan
Lihat semua sales order.

### Kolom
- sales no
- customer
- customer bank
- sales date
- grand total
- costing total
- gross margin
- status
- actions

---

## 15. Sales Form
### Tujuan
Membuat order penjualan.

### Header section
- customer select
- customer bank info preview
- sales date
- notes

### Line section
- item type
- grade
- qty
- unit
- selling price
- subtotal

### Summary
- grand total

### Actions
- save draft
- continue to allocation

---

## 16. Allocation Screen
### Tujuan
Memecah kebutuhan sales line ke beberapa lot.

### Left panel
- sales line summary
- qty required
- qty allocated
- qty remaining

### Main table
- lot code
- supplier
- available qty
- unit cost
- received at
- FIFO badge
- allocate qty input

### Bottom summary
- total allocated
- total cost
- avg cost
- validation state

### Actions
- auto allocate
- clear allocation
- save allocation

---

## 17. Picking Screen
### Tujuan
Konfirmasi pengambilan aktual.

### Section
- sales summary
- QR scanner panel
- allocation rows

### Row fields
- lot code
- allocated qty
- picked qty
- variance
- status

### Actions
- confirm picking
- report variance

---

## 18. Barcode Lookup Screen
### Tujuan
Lookup cepat setelah scan.

### Section
- scanner
- manual input
- result summary card
- trace summary
- quick actions

### Quick actions
- open lot detail
- transfer
- hold/release
- print label

---

## 19. Adjustment Form
### Tujuan
Input adjustment dan shrinkage.

### Fields
- lot
- lot snapshot
- adjustment type
- reason
- qty before
- qty change
- qty after preview
- cost impact preview
- notes

### Actions
- save draft
- submit / post

---

## 20. Returns Screens
### Sales Return
- sales ref
- customer
- item lines
- lot ref jika ada
- qty return
- condition
- resolution

### Purchase Return
- purchase ref
- supplier
- lot ref
- qty return
- cost
- notes

---

## 21. Reports
### Layout umum
- report header
- filter bar
- summary cards
- chart section
- data table
- export buttons

### Report yang perlu didesain
- stock summary
- stock lots
- purchase history
- sales margin
- supplier quality
- shrinkage
- traceability

---

## 22. Mobile-Specific Screens
Prioritas mobile:
- barcode scan
- receipt quick input
- transfer lot
- picking
- lot lookup

### Design notes mobile
- large touch targets
- sticky action button
- simplified data layout
- bottom sheet for actions

---

## 23. UI States yang Harus Didukung
Untuk semua screen penting, designer perlu siapkan:
- empty state
- loading state
- error state
- success toast/dialog
- permission denied state
- no result state

---

## 24. Penutup
Dokumen ini dimaksudkan agar desainer bisa langsung membuat layout detail per screen di Figma, lengkap dengan section, field, table columns, dan interaction priority.