Cafe Ledger

Cafe Manager — UI Prototype :root{ –brand: #7b3f00; /* coffee brown */ –accent: #f4b400; /* warm accent */ } body{font-family: Inter, system-ui, -apple-system, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, Arial;} .sidebar{min-width:240px; max-width:260px; background:linear-gradient(180deg, #fff 0%, #fff 60%); border-right:1px solid #e9e9e9} .sidebar .nav-link{color:#333} .brand {font-weight:700; color:var(–brand);} .page-title{font-weight:600} .card-compact .card-body{padding:.6rem} .item-photo{width:80px; height:60px; object-fit:cover; border-radius:6px} .small-muted{font-size:.85rem; color:#666} .badge-available{background:#28a745} .badge-unavailable{background:#dc3545} .table-sm td, .table-sm th{padding:.45rem} .sidebar-footer{position:absolute; bottom:1rem; left:0; right:0; padding:0 1rem} /* Responsive tweaks */ @media (max-width:991px){ .sidebar{position:fixed; left:-300px; top:0; bottom:0; z-index:1050; transition:left .25s} .sidebar.show{left:0} .content-overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1040} } https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js // Basic client-side navigation for single-file prototype const pages = [‘dashboard’,’menu’,’orders’,’reservations’,’staff’,’reports’,’settings’]; function showPage(name){ pages.forEach(p=>{ const el = document.getElementById(‘page-‘+p); if(!el) return; if(p===name){ el.classList.remove(‘d-none’); } else { el.classList.add(‘d-none’); } }); // update active nav document.querySelectorAll(‘#mainNav a’).forEach(a=>a.classList.toggle(‘active’, a.dataset.page===name)); document.getElementById(‘pageTitle’).textContent = name.charAt(0).toUpperCase()+name.slice(1); } function navigateTo(name){ showPage(name); window.scrollTo(0,0); } // Sidebar toggle for mobile document.getElementById(‘sidebarToggle’).addEventListener(‘click’, ()=>{ document.getElementById(‘sidebar’).classList.toggle(‘show’); const overlay = document.querySelector(‘.content-overlay’); if(!overlay){ const ov = document.createElement(‘div’); ov.className=’content-overlay’; ov.addEventListener(‘click’, ()=>{document.getElementById(‘sidebar’).classList.remove(‘show’); ov.remove();}); document.body.appendChild(ov); } else { overlay.remove(); } }); // Wire nav links document.querySelectorAll(‘#mainNav a’).forEach(a=>{ a.addEventListener(‘click’, (e)=>{ e.preventDefault(); const page=a.dataset.page; showPage(page); if(window.innerWidth{ const name = document.getElementById(‘itemName’).value || ‘New Item’; const cat = document.getElementById(‘itemCategory’).value || ‘General’; const price = document.getElementById(‘itemPrice’).value || ‘0’; const desc = document.getElementById(‘itemDesc’).value || ”; const img = document.getElementById(‘itemImage’).value || (‘https://picsum.photos/seed/’+encodeURIComponent(name)+’/80/60’); const tbody = document.getElementById(‘menuTable’); const tr = document.createElement(‘tr’); tr.innerHTML = ` ${cat} ₹${price} Available EditDelete `; tbody.prepend(tr); document.getElementById(‘totalItems’).textContent = tbody.querySelectorAll(‘tr’).length; modalItem.hide(); }); function editItem(btn){ const row = btn.closest(‘tr’); const name = row.querySelector(‘td:nth-child(2) .fw-bold’).textContent; const desc = row.querySelector(‘td:nth-child(2) .small-muted’).textContent; document.getElementById(‘itemName’).value = name; document.getElementById(‘itemDesc’).value = desc; modalItem.show(); } function deleteItem(btn){ if(confirm(‘Delete this item?’)) btn.closest(‘tr’).remove(); document.getElementById(‘totalItems’).textContent = document.getElementById(‘menuTable’).querySelectorAll(‘tr’).length; } function refreshSummary(){ alert(‘Refreshing summary — UI only’); } function filterOrders(){ alert(‘Filter orders — UI only’); } function openReservation(){ new bootstrap.Modal(document.getElementById(‘modalReservation’)).show(); } function openAddStaff(){ alert(‘Add staff UI — not implemented’); } // initialize showPage(‘dashboard’);