MINOVA DEMO

Dear Tim Developer,

Menindaklanjuti permintaan pembuatan Widget Document Approval, berikut kami sampaikan tanggapan dan penyesuaian dari sisi UI/UX dengan mengacu pada desain yang telah dilampirkan.

1. Konsep Umum UI
Widget Document Approval dirancang sebagai single page approval workspace, sehingga user dapat:
• Melihat daftar dokumen yang membutuhkan aksi approval.
• Melihat detail dokumen secara langsung tanpa berpindah halaman.
• Melakukan Approve / Reject dalam satu konteks layar.
Hal ini bertujuan untuk meningkatkan efisiensi proses approval dan meminimalkan navigasi user.

2. Document List (Bagian Atas)
• Menampilkan daftar dokumen berdasarkan:
o Document Type
o Document No
o Created Date
o Requester
o Status (Pending Action / In Review / Approved)
• Data yang ditampilkan bersifat user-specific, sesuai PIC yang dimapping di tabel PARAMETERAPPROVER.
• Dokumen akan muncul apabila memenuhi kondisi:
o DocStatus = In Process
o Status = Open
o User login merupakan PIC approver pada tabel approver terkait.
• Dilengkapi filter:
o Document Type
o Date Range
o Search by Document Number

3. Document Detail (Bagian Bawah – One Page View)
Saat user mengklik salah satu dokumen di Document List:
• Detail dokumen akan tampil di bagian bawah halaman yang sama, mencakup:
o Document Summary (Requester, Department, Total Value)
o Line Items
o Attachments
o Linked Objects (PO, Invoice, dll)
• Tidak membuka halaman baru, demi menjaga konteks kerja user.

4. Approval Timeline (Panel Kanan)
• Menampilkan alur approval secara visual:
o Document Created
o Current Approval Step (highlight)
o Next / Upcoming Approval
• Timeline bersifat read-only untuk memberikan kejelasan posisi dokumen dalam flow approval.

5. Review Verdict
• Area input Comments (mandatory).
• Action button:
o Approve Document
o Reject
• Button hanya aktif apabila dokumen berada pada status Awaiting User Approval.

6. Konsistensi Desain
• Status badge menggunakan warna konsisten:
o Pending Action (kuning)
o In Review (biru)
o Approved (hijau)
• Layout dan komponen mengikuti standar UI existing agar konsisten dengan modul Logistic & Service lainnya.

7. Catatan Tambahan
• Menu:
o MenuID: DOCUMENTAPPROVAL
o Path: Logistic & Service > Document Approval
• Untuk detail visual (spacing, typography, component state), desain akan dituangkan lebih lanjut dalam Figma sesuai arahan.

Notes: Mungkin jika ada yang kurang jelas bisa melihat dari redmine 4159 ini yaa

Menu Path: Logistic & Service > Document Approval
Port: https://demo.minovais.com/
DB: MinovaES_Demo (103.153.60.89)

Terimakasih.