Blueprint UI/UX: Modul Manufaktur & Sablon

Dokumen ini mendefinisikan Design System, filosofi interaksi, dan pedoman teknis antarmuka pengguna (UI/UX) untuk seluruh sistem Manufaktur ERP BUMDes. Pedoman ini menjamin konsistensi pengalaman visual terlepas dari perangkat yang digunakan.

1. Strategi Responsive & Mobile-First#

Mengingat pengguna modul ini bervariasi (mulai dari Kasir di depan komputer, hingga Mandor Sablon dan Pekerja Borongan di lantai pabrik yang memegang smartphone), aplikasi dibangun dengan pendekatan Mobile-First.

Pendekatan iOS & Android (PWA - Progressive Web App)

Sistem dirancang agar terasa seperti aplikasi Native (asli bawaan handphone) saat dibuka di browser seluler:

• Touch Targets: Semua tombol aksi (Call-to-Action) memiliki ukuran minimal 44x44 piksel (standar pedoman Human Interface Apple) agar mudah ditekan oleh pekerja yang mungkin menggunakan sarung tangan pelindung atau tangan yang kotor.
• Bottom Navigation (Mobile): Saat dibuka di layar kecil (HP), menu sidebar kiri akan menyembunyikan diri (collapse) dan berubah menjadi bilah navigasi bawah (bottom bar) seperti aplikasi Instagram/GoJek, untuk mempermudah navigasi satu tangan (thumb-friendly).
• Gestur Geser (Swipe): Papan Kanban SPK tidak hanya bisa di drag & drop menggunakan kursor mouse di PC, tetapi juga bereaksi terhadap usapan jari (swipe left/right) di layar sentuh untuk mengubah status SPK.

2. Paradigma Tema: Mode Gelap & Terang (Dark / Light Mode)#

Sistem mengadopsi pergantian tema yang cerdas, yang bereaksi secara otomatis terhadap pengaturan sistem operasi pengguna (prefers-color-scheme), namun tetap menyediakan tombol toggle manual.

Konvensi Warna & Glassmorphism

• Mode Gelap (Bawaan/Default Pabrik):
  • Menggunakan latar belakang Deep Slate/Obsidian (bg-slate-950).
  • Mode gelap sangat direkomendasikan untuk layar tablet di ruang sablon yang gelap/remang (ruang afdruk butuh cahaya minim agar film tidak rusak).
  • Menggunakan efek Glassmorphism (latar belakang buram / backdrop-blur) dengan garis batas (border) putih tipis transparan (10% opacity).
• Mode Terang (Light Mode):
  • Menggunakan warna dasar Putih Murni/Abu-abu Salju (bg-slate-50).
  • Cocok digunakan oleh Kasir di meja Front Office dengan paparan sinar matahari atau lampu terang, agar kontras tulisan nota/tagihan terbaca jelas tanpa silau.
  • Efek bayangan (box-shadow) lembut digunakan untuk menonjolkan elemen kartu (SPK) agar seolah melayang di atas latar belakang.

3. Color Tokens (Palet Warna Fungsional)#

Sistem menggunakan semantic colors dari TailwindCSS untuk memberikan isyarat visual kepada operator tanpa harus membaca teks:

• Indigo / Violet (text-indigo-400): Warna merek utama. Digunakan untuk aksi netral, navigasi, dan status SPK Work In Progress (WIP).
• Emerald / Hijau (text-emerald-400): Indikator Kesuksesan. Digunakan untuk SPK yang Completed, profitabilitas, dan peringatan bahwa sistem berjalan normal.
• Amber / Kuning (text-amber-400): Peringatan & Menunggu. Digunakan untuk status SPK Pending, konsumsi tinta, atau HPP yang perlu ditinjau.
• Rose / Merah (text-rose-500): Destruktif. Hanya digunakan untuk menghapus data krusial (seperti membatalkan SPK atau menghapus upah borongan).

4. Tipografi#

• Primary Font (Inter / Roboto): Menggunakan font sans-serif bergaya geometris untuk memastikan angka-angka keuangan (HPP, Stok Tinta) sangat mudah terbaca (tabular-nums) di layar kecil resolusi rendah sekalipun.

5. Fitur Interaksi Lanjutan#

• Kanban Drag & Drop (Telah Aktif): Menggunakan pustaka @dnd-kit/core yang mendukung penuh gestur sentuh (Android/iOS) maupun tarikan kursor (mouse). Fitur ini telah menggantikan tampilan tabel statis di Dasbor Sablon.
• Kanvas Interaktif (Roadmap): Menggunakan fabric.js untuk merender vektor 2D, yang kanvasnya akan otomatis menyesuaikan diri (auto-scale) terhadap lebar layar handphone.
• Integrasi Kamera Asli/Native (Roadmap): Modul inspeksi QC (Quality Control) dapat langsung memanggil kamera bawaan Android/iOS pengguna untuk memotret cacat sablon dan melampirkannya ke dalam SPK sebagai bukti.