Spaces:
Sleeping
Sleeping
File size: 6,662 Bytes
90537f3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 |
{% extends "base.html" %}
{% block title %}Chef Dashboard - Tabble-v3{% endblock %}
{% block content %}
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>
<i class="fas fa-hat-chef me-2 text-success"></i>
Chef Dashboard
</h2>
<div class="badge bg-success fs-6">
<i class="fas fa-circle me-1"></i>Kitchen Online
</div>
</div>
</div>
</div>
<div class="row g-4">
<!-- Quick Stats -->
<div class="col-md-3">
<div class="card bg-warning text-dark">
<div class="card-body text-center">
<i class="fas fa-clock fa-2x mb-2"></i>
<h5 id="pending-orders">0</h5>
<small>Pending Orders</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-info text-white">
<div class="card-body text-center">
<i class="fas fa-fire fa-2x mb-2"></i>
<h5 id="cooking-orders">0</h5>
<small>Cooking</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-success text-white">
<div class="card-body text-center">
<i class="fas fa-check fa-2x mb-2"></i>
<h5 id="completed-orders">0</h5>
<small>Completed Today</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-primary text-white">
<div class="card-body text-center">
<i class="fas fa-utensils fa-2x mb-2"></i>
<h5 id="total-dishes">0</h5>
<small>Total Dishes</small>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">
<i class="fas fa-list me-2"></i>
Live Orders
</h5>
<button class="btn btn-sm btn-outline-primary" onclick="refreshOrders()">
<i class="fas fa-sync-alt me-1"></i>Refresh
</button>
</div>
<div class="card-body">
<div id="orders-container">
<div class="text-center text-muted py-4">
<i class="fas fa-utensils fa-3x mb-3"></i>
<p>No orders at the moment</p>
<small>Orders will appear here automatically</small>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-bolt me-2"></i>
Quick Actions
</h5>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-3">
<a href="/chef/orders" class="btn btn-outline-primary w-100">
<i class="fas fa-list me-2"></i>View All Orders
</a>
</div>
<div class="col-md-3">
<button class="btn btn-outline-success w-100" onclick="markAllReady()">
<i class="fas fa-check-double me-2"></i>Mark All Ready
</button>
</div>
<div class="col-md-3">
<a href="/admin" class="btn btn-outline-warning w-100">
<i class="fas fa-cog me-2"></i>Admin Panel
</a>
</div>
<div class="col-md-3">
<a href="/docs" target="_blank" class="btn btn-outline-info w-100">
<i class="fas fa-book me-2"></i>API Docs
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
// Chef dashboard functionality
let ordersData = [];
function loadChefStats() {
// This would normally fetch from the API
// For demo purposes, using placeholder data
document.getElementById('pending-orders').textContent = '3';
document.getElementById('cooking-orders').textContent = '2';
document.getElementById('completed-orders').textContent = '15';
document.getElementById('total-dishes').textContent = '45';
}
function refreshOrders() {
const btn = event.target;
const originalText = btn.innerHTML;
btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Loading...';
btn.disabled = true;
// Simulate API call
setTimeout(() => {
btn.innerHTML = originalText;
btn.disabled = false;
loadOrders();
}, 1000);
}
function loadOrders() {
const container = document.getElementById('orders-container');
// This would normally fetch real orders from the API
container.innerHTML = `
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
Connect to the database to see live orders. Use the API endpoints at <a href="/docs" target="_blank">/docs</a>
</div>
`;
}
function markAllReady() {
if (confirm('Mark all cooking orders as ready?')) {
alert('Feature will be available when connected to database');
}
}
// Load data on page load
document.addEventListener('DOMContentLoaded', function() {
loadChefStats();
loadOrders();
// Auto-refresh every 30 seconds
setInterval(loadOrders, 30000);
});
</script>
{% endblock %} |