🧠 PRINSIP UI KASIR MODERN (INI KUNCI)
- ⚡ 1 layar, semua selesai
- 🎯 Fokus ke kecepatan (≤ 3 klik per transaksi)
- 🔍 Produk mudah dicari / scan
- 💰 Total selalu terlihat (real-time)
- 🔴 Error harus jelas (stok habis, dll)
🖥️ LAYOUT UTAMA (ALFAMART STYLE)
----------------------------------------
| LOGO | Search / Scan Barcode |
----------------------------------------
| Produk List | Keranjang (Cart) |
| (grid/card) | |
| | - Item |
| | - Qty |
| | - Total |
----------------------------------------
| TOTAL | BAYAR | KEMBALIAN | BAYAR BTN |
----------------------------------------
🎨 UI IMPLEMENTASI (SIAP PAKAI)
🔥 HTML + CSS + JS (Modern Kasir UI)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GoSmart POS</title>
<style>
body {
font-family: sans-serif;
margin:0;
background:#f4f6f9;
}
.header {
background:#2c3e50;
color:white;
padding:10px;
display:flex;
justify-content:space-between;
}
.container {
display:flex;
height:90vh;
}
.products {
width:60%;
padding:10px;
overflow:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}
.product {
background:white;
padding:10px;
border-radius:10px;
cursor:pointer;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
}
.cart {
width:40%;
background:white;
padding:10px;
display:flex;
flex-direction:column;
}
.cart-items {
flex:1;
overflow:auto;
}
.footer {
background:#ecf0f1;
padding:10px;
}
button {
width:100%;
padding:10px;
background:#27ae60;
color:white;
border:none;
font-size:16px;
}
</style>
</head>
<body>
<div class="header">
<h2>GoSmart POS</h2>
<input id="search" placeholder="Scan / Cari barang">
</div>
<div class="container">
<!-- PRODUK -->
<div class="products" id="products"></div>
<!-- CART -->
<div class="cart">
<div class="cart-items" id="cart"></div>
<div class="footer">
<h3>Total: Rp <span id="total">0</span></h3>
<input type="number" id="bayar" placeholder="Uang bayar">
<p>Kembalian: Rp <span id="kembali">0</span></p>
<button onclick="checkout()">Bayar</button>
</div>
</div>
</div>
<script>
let products = [
{id:1, nama:"Indomie", harga:3500},
{id:2, nama:"Aqua", harga:5000},
{id:3, nama:"Roti", harga:7000}
];
let cart = [];
function loadProduk(){
let html="";
products.forEach(p=>{
html += `<div class="product" onclick="tambah(${p.id})">
<h4>${p.nama}</h4>
<p>Rp ${p.harga}</p>
</div>`;
});
document.getElementById("products").innerHTML = html;
}
function tambah(id){
let p = products.find(x=>x.id==id);
let item = cart.find(x=>x.id==id);
if(item){
item.qty++;
} else {
cart.push({...p, qty:1});
}
render();
}
function render(){
let html="";
let total=0;
cart.forEach(c=>{
total += c.qty * c.harga;
html += `<p>${c.nama} x${c.qty} = Rp ${c.qty*c.harga}</p>`;
});
document.getElementById("cart").innerHTML = html;
document.getElementById("total").innerText = total;
let bayar = document.getElementById("bayar").value || 0;
document.getElementById("kembali").innerText = bayar - total;
}
function checkout(){
alert("Transaksi sukses!");
cart=[];
render();
}
document.getElementById("bayar").addEventListener("input", render);
loadProduk();
</script>
</body>
</html>
🚀 UX LEVEL ALFAMART (WAJIB TAMBAH)
✔ Scan Barcode
- Fokus input di search
- Scanner langsung input → auto tambah cart
✔ Shortcut Keyboard
- Enter → tambah
- F2 → bayar
- ESC → reset
✔ Warna & Feedback
- Hijau → sukses
- Merah → stok habis
- Bunyi “beep” saat scan
🧨 NEXT LEVEL UI (BIAR KELAS RETAIL BESAR)
🔥 Mode Touchscreen (Tablet Kasir)
- Tombol besar
- Grid 2x lebih besar
🔥 Mode Gelap (Night Shift)
- Mata kasir gak capek
🔥 Quick Button Produk Favorit
- Rokok, minuman, dll langsung klik
⚠️ REAL TALK
UI bagus tanpa sistem:
cuma pajangan
UI cepat + backend solid:
jadi mesin uang
