TULISAN

Dear Tim Developer,

Mohon implementasi halaman Material Dashboard berdasarkan desain yang diberikan. Halaman menampilkan tiga summary card: Draft (ikon dokumen, angka 300), Active (ikon check, angka 150), dan Obsolete (ikon warning, angka 100). Di bawahnya tampil tabel "Document Approval" yang berisi No, Material ID, SKU, Material Type, Product Name, Description, Status, serta action icon (history, edit, eye) di kolom paling kanan. Terdapat filter dropdown pada bagian atas tabel untuk Material Type dan Status, serta pagination “Previous / 1 2 3 4 5 / Next” di bawah tabel.

Steps to Do (Developer):
1. Buat tiga summary card: Draft 300, Active 150, Obsolete 100 beserta icon sesuai desain.
2. Buat judul section “Document Approval” seperti pada UI.
3. Render tabel dengan column:
o No
o Material ID
o SKU
o Material Type
o Product Name
o Description
o Status
o Action icon.

4. Implement dropdown filter untuk Material Type dan Status pada bagian kanan atas tabel.
5. Tambahkan action icon per row (Tracking & Process) sesuai layout kolom paling kanan.
6. Tampilkan pagination: Previous, halaman 1–5, Next di bagian bawah tabel.
7. Terapkan badge/status style (Draft, Pending, Approved, Rejected) sesuai tampilan warna di desain.
8. Pastikan spacing, alignment, dan ukuran font mengikuti UI yang dikirim.

Berikut Componentnya :

Icon Obsolete : mingcute:down-line
Icon Active : lets-icons:check-fill
Icon Draft : material-symbols:draft
Icon Tracking : solar:route-linear
Icon Process : lucide:file-cog

Port: https://tulisan-dev.minovais.com/
DB: MinovaES_Tulisan_Dev (103.153.60.89)