532 lines
6.7 KiB
Markdown
532 lines
6.7 KiB
Markdown
# 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. |