G-NIVA UI System

1. Design Tokens & Typography

Clean hierarchical typography scale tailored for mobile and desktop screens.

Display (28px)

G-NIVA Business OS

Page Title (22px)

Ringkasan Penjualan & Inventaris

Section Title (18px)

Daftar Transaksi Terbaru

Body Text (15px)

G-NIVA dirancang untuk membantu pemilik bisnis mengelola operasi penjualan secara efisien dari perangkat genggam.

Caption & Label (12-13px)

Diperbarui 5 menit yang lalu • Sinkronisasi otomatis aktif

2. Button System

Touch targets $\ge 44\text{px}$ with Normal, Hover, Active, Focus, Disabled, and Loading states.

3. Form & Input Controls

Accessible inputs with clear labels, helper text, currency prefixes, and error states.

Nama Produk

Contoh: Kopi Susu Gula Aren 250ml

Harga Jual

Harga dalam mata uang pilihan Anda

Kategori

SKU / Barcode

Format SKU tidak valid. Gunakan huruf dan angka.

Catatan Tambahan

Aktifkan untuk transaksi Produk akan langsung terlihat pada katalog kasir/POS

Kirim notifikasi otomatis

Tunai QRIS Transfer Bank

4. Cards & Metric Displays

Clean glanceable metric cards with trends and interactive action cards.

Penjualan Hari Ini

Rp 8.450.000 +14%

Pesanan Hari Ini

42 +8%

Pendapatan Bersih

Rp 6.120.000 -2.4%

Manajemen Stok Produk

18 produk aktif • 2 produk mencapai batas minimum stok

5. Badges & Status Indicators

Pill badges with subtle background tint and status indicators.

Lunas Menunggu Jatuh Tempo Stok Tersedia Stok Menipis Nonaktif

6. Feedback Alerts

Contextual alerts for success, warnings, errors, and system announcements.

Transaksi Berhasil Disimpan

Struk penjualan nomor #INV-2026-0042 telah dicatat ke buku kas.

Peringatan Stok Minimum

Susu Segar UHT 1L tersisa 3 unit. Harap lakukan pemesanan ulang.

Gagal Memproses Pembayaran

Koneksi ke gateway pembayaran QRIS timeout. Silakan coba kembali.

Informasi Pembaruan

Fondasi Sprint 02 telah aktif dengan 100% komponen reusable.

7. Interactive Layer (Toast, Modal, Bottom Sheet)

Dynamic client-side overlays: Toast notifications, Modal dialogs, and Bottom Sheets.

Segmented Tabs Component:

Tab konten Penjualan: Menampilkan rangkuman transaksi harian dan status pembayaran.

8. Empty, Loading, & Error States

Fallback states: informative empty states, smooth shimmering skeletons, and in-component errors.

Belum ada produk

Tambahkan produk pertama Anda untuk mulai mengelola inventaris bisnis.

Shimmering Skeleton Loader:

Terjadi kendala

Kami tidak dapat memuat informasi ini sekarang. Silakan coba kembali.