| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Menu - Hotel Management</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | </head> |
| | <body class="bg-gray-50 font-sans"> |
| | <div class="flex h-screen overflow-hidden"> |
| | |
| | <div class="bg-indigo-800 text-white w-64 flex-shrink-0"> |
| | <div class="p-4 flex items-center space-x-3 border-b border-indigo-700"> |
| | <div class="bg-white p-2 rounded-lg"> |
| | <i data-feather="home" class="text-indigo-800"></i> |
| | </div> |
| | <h1 class="text-xl font-bold">Hotel Manager</h1> |
| | </div> |
| | <nav class="p-4 space-y-2"> |
| | <a href="index.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-indigo-100 hover:text-white"> |
| | <i data-feather="grid"></i> |
| | <span>Dashboard</span> |
| | </a> |
| | <a href="orders.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-indigo-100 hover:text-white"> |
| | <i data-feather="clipboard"></i> |
| | <span>Orders</span> |
| | </a> |
| | <a href="tables.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-indigo-100 hover:text-white"> |
| | <i data-feather="users"></i> |
| | <span>Tables</span> |
| | </a> |
| | <a href="menu.html" class="flex items-center space-x-3 p-3 rounded-lg bg-indigo-700 text-white"> |
| | <i data-feather="book-open"></i> |
| | <span>Menu</span> |
| | </a> |
| | <a href="billing.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-indigo-100 hover:text-white"> |
| | <i data-feather="dollar-sign"></i> |
| | <span>Billing</span> |
| | </a> |
| | <a href="reports.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 text-indigo-100 hover:text-white"> |
| | <i data-feather="pie-chart"></i> |
| | <span>Reports</span> |
| | </a> |
| | </nav> |
| | </div> |
| |
|
| | |
| | <div class="flex-1 overflow-auto"> |
| | |
| | <header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
| | <h2 class="text-xl font-semibold text-gray-800">Menu Management</h2> |
| | <div class="flex items-center space-x-4"> |
| | <div class="relative"> |
| | <i data-feather="bell" class="text-gray-500 hover:text-indigo-600 cursor-pointer"></i> |
| | </div> |
| | <div class="flex items-center space-x-2"> |
| | <img src="http://static.photos/people/40x40/1" alt="User" class="h-8 w-8 rounded-full"> |
| | <span class="text-sm font-medium">Admin</span> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <main class="p-6"> |
| | <div class="bg-white rounded-lg shadow overflow-hidden"> |
| | <div class="p-4 border-b flex justify-between items-center"> |
| | <h3 class="font-semibold text-lg">Menu Items</h3> |
| | <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm flex items-center space-x-2" onclick="openAddItemModal()"> |
| | <i data-feather="plus" class="w-4 h-4"></i> |
| | <span>Add Item</span> |
| | </button> |
| | </div> |
| | <div class="overflow-x-auto"> |
| | <table class="min-w-full divide-y divide-gray-200"> |
| | <thead class="bg-gray-50"> |
| | <tr> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Item</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
| | </tr> |
| | </thead> |
| | <tbody class="bg-white divide-y divide-gray-200" id="menuTable"> |
| | |
| | </tbody> |
| | </table> |
| | </div> |
| | </div> |
| | </main> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="addItemModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> |
| | <div class="bg-white rounded-lg p-6 w-full max-w-md"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <h3 class="text-lg font-semibold">Add Menu Item</h3> |
| | <button onclick="closeAddItemModal()"> |
| | <i data-feather="x" class="text-gray-500"></i> |
| | </button> |
| | </div> |
| | <form id="addItemForm"> |
| | <div class="mb-4"> |
| | <label class="block text-gray-700 text-sm font-bold mb-2" for="itemName"> |
| | Item Name |
| | </label> |
| | <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
| | id="itemName" type="text" placeholder="Item name" required> |
| | </div> |
| | <div class="mb-4"> |
| | <label class="block text-gray-700 text-sm font-bold mb-2" for="itemCategory"> |
| | Category |
| | </label> |
| | <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
| | id="itemCategory" required> |
| | <option value="">Select category</option> |
| | <option value="Starters">Starters</option> |
| | <option value="Main Course">Main Course</option> |
| | <option value="Desserts">Desserts</option> |
| | <option value="Beverages">Beverages</option> |
| | </select> |
| | </div> |
| | <div class="mb-4"> |
| | <label class="block text-gray-700 text-sm font-bold mb-2" for="itemPrice"> |
| | Price (₹) |
| | </label> |
| | <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
| | id="itemPrice" type="number" min="0" step="0.01" placeholder="Price" required> |
| | </div> |
| | <div class="mb-4"> |
| | <label class="block text-gray-700 text-sm font-bold mb-2" for="itemDescription"> |
| | Description |
| | </label> |
| | <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
| | id="itemDescription" rows="3" placeholder="Item description"></textarea> |
| | </div> |
| | <div class="flex justify-end space-x-3"> |
| | <button type="button" class="bg-gray-300 text-gray-800 px-4 py-2 rounded-md" onclick="closeAddItemModal()"> |
| | Cancel |
| | </button> |
| | <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md"> |
| | Add Item |
| | </button> |
| | </div> |
| | </form> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | feather.replace(); |
| | |
| | |
| | const menuItems = [ |
| | { id: 1, name: "Butter Chicken", category: "Main Course", price: "₹250", description: "Tandoori chicken in a rich tomato and butter sauce" }, |
| | { id: 2, name: "Paneer Tikka", category: "Starters", price: "₹180", description: "Grilled cottage cheese with spices" }, |
| | { id: 3, name: "Dal Makhani", category: "Main Course", price: "₹200", description: "Black lentils cooked with butter and cream" }, |
| | { id: 4, name: "Gulab Jamun", category: "Desserts", price: "₹120", description: "Deep-fried milk balls in sugar syrup" }, |
| | { id: 5, name: "Masala Chai", category: "Beverages", price: "₹50", description: "Spiced Indian tea with milk" } |
| | ]; |
| | |
| | |
| | const menuTable = document.getElementById('menuTable'); |
| | menuItems.forEach(item => { |
| | const row = document.createElement('tr'); |
| | row.innerHTML = ` |
| | <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.name}</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.category}</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.price}</td> |
| | <td class="px-6 py-4 text-sm text-gray-500">${item.description}</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| | <button class="text-indigo-600 hover:text-indigo-900 mr-3" onclick="editMenuItem(${item.id})">Edit</button> |
| | <button class="text-red-600 hover:text-red-900" onclick="deleteMenuItem(${item.id})">Delete</button> |
| | </td> |
| | `; |
| | menuTable.appendChild(row); |
| | }); |
| | |
| | |
| | function openAddItemModal() { |
| | document.getElementById('addItemModal').classList.remove('hidden'); |
| | } |
| | |
| | function closeAddItemModal() { |
| | document.getElementById('addItemModal').classList.add('hidden'); |
| | } |
| | |
| | |
| | document.getElementById('addItemForm').addEventListener('submit', function(e) { |
| | e.preventDefault(); |
| | const itemName = document.getElementById('itemName').value; |
| | const itemCategory = document.getElementById('itemCategory').value; |
| | const itemPrice = document.getElementById('itemPrice').value; |
| | const itemDescription = document.getElementById('itemDescription').value; |
| | |
| | |
| | const newItem = { |
| | id: menuItems.length + 1, |
| | name: itemName, |
| | category: itemCategory, |
| | price: `₹${itemPrice}`, |
| | description: itemDescription |
| | }; |
| | menuItems.push(newItem); |
| | |
| | |
| | const row = document.createElement('tr'); |
| | row.innerHTML = ` |
| | <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${newItem.name}</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${newItem.category}</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${newItem.price}</td> |
| | <td class="px-6 py-4 text-sm text-gray-500">${newItem.description}</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| | <button class="text-indigo-600 hover:text-indigo-900 mr-3" onclick="editMenuItem(${newItem.id})">Edit</button> |
| | <button class="text-red-600 hover:text-red-900" onclick="deleteMenuItem(${newItem.id})">Delete</button> |
| | </td> |
| | `; |
| | menuTable.appendChild(row); |
| | |
| | |
| | this.reset(); |
| | closeAddItemModal(); |
| | feather.replace(); |
| | }); |
| | |
| | |
| | function editMenuItem(id) { |
| | const item = menuItems.find(m => m.id === id); |
| | if (item) { |
| | alert(`Editing ${item.name}`); |
| | } |
| | } |
| | |
| | function deleteMenuItem(id) { |
| | if (confirm('Are you sure you want to delete this menu item?')) { |
| | const itemIndex = menuItems.findIndex(m => m.id === id); |
| | if (itemIndex !== -1) { |
| | menuItems.splice(itemIndex, 1); |
| | const rows = document.querySelectorAll('#menuTable tr'); |
| | if (rows.length > itemIndex) { |
| | rows[itemIndex].remove(); |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | </body> |
| | </html> |
