kedaimaster/note/detailUI.md

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