Initial import of AbelBirdNest Stock
This commit is contained in:
532
docs/project-spec/walet-screen-ui-spec.md
Normal file
532
docs/project-spec/walet-screen-ui-spec.md
Normal file
@ -0,0 +1,532 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user