# Figma-Ready Design Brief
## AbelBirdnest Stock

## 1. Tujuan Brief
Dokumen ini dibuat agar tim UI/UX atau desainer Figma bisa langsung mulai mendesain tanpa harus membaca seluruh dokumen teknis dari nol.

Target desain:
- desain aplikasi web responsive
- prioritas pada operasional gudang, purchasing, sales, dan traceability
- desain harus cepat dipakai, bukan sekadar cantik
- mobile usability penting untuk flow scan, receiving, transfer, dan picking

## 2. Konteks Produk
`AbelBirdnest Stock` adalah sistem inventory sarang burung walet berbasis lot/batch dengan kemampuan:
- pembelian multi jenis dan multi grade
- penerimaan barang dan pembentukan lot
- sortasi / regrade
- penjualan parsial dari banyak lot
- costing berbasis allocation nyata
- traceability supplier ke customer
- barcode / QR lookup dan scan workflow

## 3. User Utama
### Owner
Tujuan:
- melihat dashboard
- melihat laporan, margin, shrinkage, traceability

### Admin Purchasing
Tujuan:
- membuat pembelian
- mengelola supplier
- melihat histori harga

### Admin Gudang
Tujuan:
- menerima barang
- mengelola lot
- transfer, hold, release, adjustment
- scan QR/barcode

### Tim QC / Sortasi
Tujuan:
- sortasi lot
- regrade
- catat shrinkage dan reject

### Admin Sales
Tujuan:
- buat sales order
- allocate lot
- picking
- cek trace sumber barang

## 4. Platform dan Breakpoints
### Primary
- Desktop web untuk office/admin tasks
- Mobile web untuk gudang/scan tasks

### Breakpoints saran
- Mobile: 360-480px
- Tablet: 768px
- Desktop: 1280px+

## 5. Design Principles
- information dense but clear
- focus on traceability and status visibility
- minimize typing for operational workflows
- prioritize fast actions and readable tables
- destructive or high-risk actions must be explicit
- quantity, cost, status, and lot identity must always stand out

## 6. Visual Direction
### Tone
- modern business app
- clean, efficient, trustworthy
- operational, not decorative

### Suggested look
- neutral base colors
- strong status color coding
- lots of cards, tables, badges, and side panels
- subtle but clear hierarchy

### Suggested color logic
- Active: green
- Hold: yellow/orange
- Closed: gray
- Rejected: red
- Draft: blue-gray
- Alert/shrinkage variance: red/orange

## 7. Typography Guidance
- clear sans-serif
- body 14-16px desktop
- compact but readable table text 12-14px
- headings should clearly separate sections

## 8. Core UX Priorities
### A. Lot identity must be obvious
Every lot-related screen should surface:
- lot code
- item type
- grade
- available qty
- supplier
- status
- warehouse/location

### B. Allocation must feel safe
Sales allocation UI must clearly show:
- required qty
- selected qty
- remaining qty
- cost impact
- recommended FIFO lots

### C. Scan flow must be fast
For mobile scan pages:
- camera first
- manual input fallback
- instant lookup result
- quick actions after scan

### D. Movement history must be readable
Movement timeline should be understandable even by non-technical user.

## 9. Design Output Expected from UI/UX Team
Minimal deliverables:
- sitemap / screen map
- low-fi wireframe cleanup
- hi-fi UI for key screens
- mobile variant for scan flows
- clickable prototype for core flows
- handoff specs for frontend team

## 10. Screen Priority for Hi-Fi Design
Prioritas desain visual:
1. Login
2. Dashboard
3. Purchase Form
4. Receipt Form
5. Stock Lot List
6. Lot Detail
7. Sales Form
8. Allocation Screen
9. Picking Screen
10. Barcode Lookup
11. Sorting Session Form
12. Reports

## 11. Key Flows to Prototype
### Flow 1. Purchase to Receipt
- create purchase
- receive goods
- generate lot
- view lot detail

### Flow 2. Lot to Sorting
- select lot
- create sorting session
- create child lots
- review results

### Flow 3. Sales Allocation
- create sales order
- choose item/grade
- allocate from multiple lots
- confirm costing
- proceed to picking

### Flow 4. Scan Lookup
- open scan page
- scan QR
- display lot data
- navigate to lot detail or action page

## 12. Components that Need Design Attention
- data table
- filter bar
- summary cards
- status badges
- qty editor
- cost summary panel
- movement timeline
- QR scanner panel
- traceability source panel
- sticky action footer

## 13. Special UX Notes
### A. Numbers
Design must support large financial values and decimal quantities.

### B. Tables
Many screens are data-heavy. Table readability is critical.

### C. Status
Status should never rely on color only. Add badges/text.

### D. Bank fields
Supplier and customer screens must include:
- bank name
- bank account number

### E. Audit-sensitive actions
Actions like hold, release, regrade, adjustment, finalize should feel deliberate.

## 14. Suggested Figma File Structure
```text
AbelBirdnest Stock Design
  00 Cover
  01 Foundations
    - Colors
    - Typography
    - Spacing
    - Icons
  02 Components
    - Buttons
    - Inputs
    - Tables
    - Cards
    - Badges
    - Modals
    - Scanner
  03 Desktop Screens
  04 Mobile Screens
  05 Prototypes
  06 Dev Handoff
```

## 15. Suggested Foundations
### Components to define early
- Button primary/secondary/destructive
- Text field
- Number field
- Select field
- Date picker
- Badge status
- Table row states
- Card summary
- Drawer/modal
- Timeline item

## 16. Success Criteria for Design
Design dianggap berhasil jika:
- user bisa paham status lot dalam beberapa detik
- sales allocation tidak membingungkan
- scan flow cepat dipakai di HP
- traceability tidak terasa kompleks walau datanya kaya
- tabel tetap nyaman dibaca walau padat

## 17. Penutup
Brief ini harus dipakai bersama dokumen wireframe, component tree, dan frontend structure. Fokus utama desain bukan sekadar estetika, tapi membuat proses inventory walet yang kompleks terasa jelas, aman, dan cepat dipakai.
