ok

note/detailUI.md

@@ -0,0 +1,58 @@
+**Overlay/Status**
+- Loader Overlay: layar penuh dengan spinner `ThreeDots` dan pesan `screenMessag
+e`; muncul saat `loading` true.
+- Grayscale State: seluruh konten `div.Cafe` menjadi abu-abu saat `isExceededDea
+dline` true (kelas `grayscale`).
+- Modal Pesan: “Kafe sedang tidak tersedia” dapat muncul via `setModal("message"
+, ...)` ketika `isExceededDeadline` dari socket; modalnya dikelola global (di lu
+ar file ini).
+
+**Header**
+- Bar Atas “Menu”: judul “Menu”, info toko (nama, gambar), profil user, opsi log
+out, akses pegawai, table code.
+- Edit Mode Toggle: kontrol untuk mengaktifkan/menonaktifkan mode edit kategori/
+item (prop `isEditMode` + `setIsEditMode`).
+
+**Branding/Watermark**
+- Dev Watermark (atas): `div.Watermark` kecil hanya tampil jika `API_BASE_URL` b
+ukan domain resmi prod/dev (indikator environment).
+- Footer Watermark: komponen `<Watermark />` di bagian paling bawah halaman.
+
+**Music**
+- Music Player: widget pemutar/antrian lagu dengan dukungan Spotify; menampilkan
+ status login Spotify (`isSpotifyNeedLogin`) dan antrian (`queue`), interaksi vi
+a `socket`.
+
+**Kategori (ItemTypeLister)**
+- Daftar Kategori: list tipe menu (nama + gambar tipe, visibilitas).
+- Filter Kategori: memilih 1 kategori untuk menyaring tampilan item (`filterId`)
+.
+- Edit Kategori: saat `isEditMode` aktif, bisa memilih tipe yang sedang diedit (
+`beingEditedType`) dan mengubah urutan tipe (via kontrol di ItemLister).
+
+**Daftar Item per Kategori (ItemLister x N)**
+- Section per Kategori: render berulang untuk setiap tipe yang lolos filter. Men
+ampilkan:
+  - Judul/nama kategori dan gambar (bila ada).
+  - Daftar item dalam kategori (nama, harga, promo, deskripsi, gambar, visibilit
+as).
+- Aksi Item:
+  - Tambah item: tombol/form untuk membuat item (owner/akses yang berwenang).
+  - Ubah item: edit nama, harga, promo, deskripsi, gambar.
+- Reorder Kategori: panah/aksi “naik/turun” pada section untuk memindahkan posis
+i kategori (memanggil `moveItemType*`).
+- Raw Mode: jika tidak edit dan filter spesifik aktif, `raw` true untuk gaya tam
+pilan ringkas.
+
+**Sticky Bar (Keranjang & Transaksi)**
+- Tombol Cart (kiri, utama): muncul jika bukan edit mode dan (user login atau ke
+ranjang > 0).
+  - Menampilkan jumlah item (dengan “+” jika ada transaksi terakhir), total harg
+a “Rp{totalPrice}” atau teks “Open bill” (jika `lastTransaction.payment_type == 
+'paylater'`).
+  - Posisi: sticky di bawah (offset bottom ~40px), lebar responsif.
+- Tombol Transactions (kanan, kecil): hanya muncul jika user login; navigasi ke 
+riwayat transaksi.
+
+
+material list, material