# 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.