wirabasalamah/AbelBirdNest-Stock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
AbelBirdNest-Stock/docs/project-spec/walet-screen-ui-spec.md

6.7 KiB
Raw Permalink Blame History

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.