AbelBirdNest-Stock/docs/project-spec/walet-wireframe.md

Wireframe Layar Aplikasi Sistem Inventory Walet

1. Dashboard

Tujuan

Memberikan gambaran cepat kondisi bisnis.

Komponen

• Total stok aktif
• Nilai inventory
• Pembelian bulan ini
• Penjualan bulan ini
• Susut bulan ini
• Top 5 supplier
• Top 5 customer
• Lot aging alert
• Lot hold alert
• Shortcut ke Purchase, Receiving, Sales, Inventory

Widget utama

• Stok per jenis-grade
• Margin per periode
• Grafik pembelian vs penjualan
• Susut per supplier

---

2. Purchase List

Tujuan

Melihat semua transaksi pembelian.

Catatan master terkait:

• data supplier perlu menyimpan nama bank dan nomor rekening untuk kebutuhan pembayaran

Komponen

• Filter tanggal
• Filter supplier
• Filter status
• Tombol buat pembelian baru
• Tabel:
  • nomor pembelian
  • supplier
  • tanggal
  • total
  • status
  • jumlah line
  • aksi detail/edit

---

3. Purchase Form

Tujuan

Membuat transaksi pembelian multi jenis dan multi grade.

Header

• Purchase no
• Supplier
• Tanggal pembelian
• Invoice supplier
• Catatan

Detail line items

Kolom:

• Jenis
• Grade
• Qty
• Satuan
• Harga beli
• Subtotal
• Status klasifikasi
• Catatan

Aksi

• Tambah baris
• Simpan draft
• Submit
• Print

---

4. Receipt Form

Tujuan

Menerima barang dari pembelian dan membuat lot.

Header

• Receipt no
• Referensi purchase
• Supplier
• Tanggal terima
• Petugas penerima

Tabel line receiving

• Item purchase
• Qty ordered
• Qty received
• Qty accepted
• Qty rejected
• Unit cost
• Status
• Catatan

Aksi

• Generate lot
• Print QR label
• Simpan receipt

---

5. Receipt Detail

Tujuan

Melihat hasil penerimaan dan lot yang terbentuk.

Komponen

• Ringkasan receipt
• Daftar lot hasil receipt
• Kode lot
• Jenis
• Grade
• Qty
• Gudang
• Lokasi
• QR status
• Tombol print ulang label

---

6. Stock Summary

Tujuan

Melihat stok ringkas per jenis-grade.

Komponen

• Filter gudang
• Filter jenis
• Filter grade
• Tabel:
  • jenis
  • grade
  • qty total
  • nilai total
  • jumlah lot aktif

---

7. Stock Lot List

Tujuan

Melihat stok detail berbasis lot.

Tabel

• Lot code
• Supplier
• Jenis
• Grade
• Qty awal
• Qty tersedia
• Unit cost
• Tanggal masuk
• Aging
• Status
• Gudang
• Lokasi
• Aksi detail

Filter

• supplier
• jenis
• grade
• status
• gudang
• aging

---

8. Lot Detail

Tujuan

Menjadi pusat traceability satu lot.

Section

Informasi utama

• Lot code
• Supplier
• Jenis
• Grade
• Qty awal
• Qty available
• Unit cost
• Gudang
• Lokasi
• Status

Parent-child relation

• Parent lot
• Child lots hasil sortasi/regrade

Movement history

• receiving
• sorting
• adjustment
• transfer
• sales allocation
• return

Sales usage

• invoice mana saja yang memakai lot ini
• qty per invoice

Aksi

• print ulang label
• hold lot
• release lot
• pindah lokasi
• adjustment
• regrade

---

9. Sorting Session Form

Tujuan

Memecah satu lot menjadi beberapa lot hasil sortasi.

Input utama

• Source lot
• Qty input
• Tanggal sortasi
• Operator
• Catatan

Hasil sortasi table

• Jenis hasil
• Grade hasil
• Qty hasil
• Cost
• Catatan

Additional

• Qty shrinkage
• Qty reject

Aksi

• Generate child lots
• Simpan sesi

---

10. Regrade Form

Tujuan

Memindahkan sebagian qty dari satu grade ke grade lain.

Komponen

• Source lot
• Grade asal
• Grade tujuan
• Qty pindah
• Alasan
• Catatan

Output

• lot lama berkurang
• lot baru terbentuk atau ditambah

---

11. Sales Form

Tujuan

Membuat transaksi penjualan.

Catatan master terkait:

• data customer perlu menyimpan nama bank dan nomor rekening untuk kebutuhan pembayaran/settlement

Header

• Sales no
• Customer
• Tanggal
• Catatan

Detail lines

• Jenis
• Grade
• Qty
• Satuan
• Harga jual
• Subtotal

Aksi

• Simpan draft
• Lanjut ke allocation
• Submit

---

12. Allocation Screen

Tujuan

Mengalokasikan kebutuhan penjualan ke satu atau banyak lot.

Layout

Kiri

• informasi sales line
• jenis
• grade
• qty dibutuhkan

Kanan

• daftar lot tersedia
  • lot code
  • supplier
  • qty available
  • unit cost
  • tanggal masuk
  • rekomendasi FIFO

Interaksi

• auto allocate
• manual select qty per lot
• validasi total allocation = qty line
• tampil total costing hasil allocation

---

13. Picking Screen

Tujuan

Memvalidasi pengambilan barang nyata dari lot teralokasi.

Komponen

• scan QR lot
• tampil info lot
• qty dialokasikan
• qty diambil aktual
• selisih jika ada
• konfirmasi picking selesai

---

14. Transfer Form

Tujuan

Memindahkan lot antar gudang atau lokasi.

Komponen

• scan/pilih lot
• gudang asal
• lokasi asal
• gudang tujuan
• lokasi tujuan
• qty pindah
• catatan

---

15. Stock Adjustment Form

Tujuan

Mencatat perubahan stok selain transaksi normal.

Komponen

• lot
• qty before
• qty change
• qty after
• jenis adjustment
• alasan
• cost impact
• catatan

---

16. Barcode / QR Lookup

Tujuan

Lookup cepat dari hasil scan.

Hasil scan menampilkan

• lot code
• supplier
• jenis
• grade
• qty available
• cost
• lokasi
• status
• histori singkat

Aksi cepat

• buka detail lot
• print label ulang
• pindah lokasi
• hold/release

---

17. Reports

Jenis laporan

• Pembelian
• Penerimaan
• Stok summary
• Stok lot
• Aging
• Sortasi
• Sales
• Margin
• Shrinkage
• Supplier quality
• Traceability

Filter umum

• tanggal
• supplier
• customer
• jenis
• grade
• gudang
• status

---

18. Design Notes

• halaman operasional harus mobile-friendly
• allocation screen harus cepat, jangan terlalu penuh
• lot detail harus jadi layar kunci karena pusat trace
• scan workflow harus seminim mungkin input manual
• warna status penting, misal active, hold, closed, rejected

19. Prioritas Wireframe MVP

Urutan yang sebaiknya didesain dulu:

1. Dashboard
2. Purchase Form
3. Receipt Form
4. Stock Lot List
5. Lot Detail
6. Sales Form
7. Allocation Screen
8. Picking Screen
9. Sorting Session Form
10. Barcode Lookup