Hugging Face's logo

Spaces:
Kush26
/
kiit-kaffe
Sleeping

App Files Community
kiit-kaffe
File size: 9,092 Bytes
56fb0d1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!-- ═══════════════════════════════════════
     PAGE 7: ADMIN
═══════════════════════════════════════════ -->
<div id="page-admin" class="page">
  <div class="admin-layout">
    <aside class="admin-sidebar">
      <div class="nav-logo" style="padding: 24px; font-size: 20px;">KIIT<span>KAFE</span> <small style="font-size:10px; color:var(--lime); display:block;">Admin Panel</small></div>
      <nav class="admin-nav">
        <button class="admin-nav-btn active" onclick="switchAdminTab('dash', this)">📊 Dashboard</button>
        <button class="admin-nav-btn" onclick="switchAdminTab('menu', this)">🍔 Manage Menu</button>
        <button class="admin-nav-btn" onclick="switchAdminTab('stock', this)">📦 Stock Manager</button>
        <button class="admin-nav-btn" onclick="switchAdminTab('orders', this)">📋 Active Orders</button>
        <button class="admin-nav-btn" onclick="nav('landing')">🚪 Exit to Site</button>
        <button class="admin-nav-btn" style="margin-top:auto; color:#ff6b6b;" onclick="currentUser=null;nav('landing')">🔒 Logout</button>
      </nav>
    </aside>

    <main class="admin-main">
      <header class="admin-header">
        <h2 id="admin-tab-title">Admin Dashboard</h2>
        <div class="admin-user-info">
          Welcome, <strong>Admin</strong>
        </div>
      </header>

      <!-- DASHBOARD TAB -->
      <div class="admin-tab-content active" id="admin-tab-dash">
        <div class="stats-grid">
          <div class="stat-card">
            <span class="stat-icon">💰</span>
            <div class="stat-info">
              <div class="stat-val" id="stat-revenue">₹0</div>
              <div class="stat-label">Total Revenue</div>
            </div>
          </div>
          <div class="stat-card">
            <span class="stat-icon">📊</span>
            <div class="stat-info">
              <div class="stat-val" id="stat-today-revenue">₹0</div>
              <div class="stat-label">Today's Revenue</div>
            </div>
          </div>
          <div class="stat-card">
            <span class="stat-icon">🛍</span>
            <div class="stat-info">
              <div class="stat-val" id="stat-orders">0</div>
              <div class="stat-label">Total Orders</div>
            </div>
          </div>
          <div class="stat-card">
            <span class="stat-icon">📦</span>
            <div class="stat-info">
              <div class="stat-val" id="stat-today-orders">0</div>
              <div class="stat-label">Today's Orders</div>
            </div>
          </div>
          <div class="stat-card" onclick="showLowStockItems()" style="cursor:pointer;">
            <span class="stat-icon">⚠️</span>
            <div class="stat-info">
              <div class="stat-val" id="stat-lowstock">0</div>
              <div class="stat-label">Low Stock Items</div>
            </div>
          </div>
          <div class="stat-card">
            <span class="stat-icon">⏳</span>
            <div class="stat-info">
              <div class="stat-val" id="stat-pending">0</div>
              <div class="stat-label">Pending Orders</div>
            </div>
          </div>
        </div>

        <div class="admin-dashboard-grid">
          <div class="admin-dash-section">
            <h3>🔥 Popular Items</h3>
            <div id="frequent-items-list" class="frequent-items-list">
              Loading...
            </div>
          </div>
          <div class="admin-dash-section">
            <h3>📋 Recent Orders</h3>
            <div id="admin-recent-orders-list" class="recent-orders-list">Loading orders...</div>
          </div>
        </div>
      </div>

      <!-- MANAGE MENU TAB -->
      <div class="admin-tab-content" id="admin-tab-menu">
        <div class="admin-actions-bar">
          <button class="cta-primary" onclick="showAddItemModal()">+ Add New Item</button>
          <div class="search-wrap" style="flex:1; max-width: 400px;">
            <input type="text" placeholder="Search menu items..." class="admin-menu-search" oninput="filterAdminMenu(this.value)">
          </div>
        </div>
        <div class="admin-items-list" id="admin-items-list">
          <!-- Items will be injected here -->
        </div>
      </div>

      <!-- STOCK MANAGER TAB -->
      <div class="admin-tab-content" id="admin-tab-stock">
        <div class="admin-actions-bar">
          <h3 style="font-size:16px;font-weight:800;color:var(--dark);">📦 Stock Management</h3>
          <button class="cta-primary" onclick="quickAddStock()">+ Quick Add Stock</button>
        </div>
        <div class="stock-manager-grid" id="stock-manager-list">
          <!-- Stock items will be injected here -->
        </div>
      </div>

      <!-- ADD/EDIT ITEM MODAL -->
      <div class="modal-overlay" id="admin-item-modal">
        <div style="background:white;border-radius:20px;padding:32px;max-width:500px;width:100%;animation:popIn 0.3s ease both;">
          <h3 style="font-family:'Syne',sans-serif;font-size:18px;font-weight:900;color:#1a1a1a;margin-bottom:20px;" id="item-modal-title">Add New Item</h3>
          <input type="hidden" id="edit-item-id">
          <div style="margin-bottom:16px;">
            <label style="font-size:12px;font-weight:700;color:#666;display:block;margin-bottom:6px;">Item Name *</label>
            <input type="text" id="item-name" placeholder="e.g. Cold Coffee" style="width:100%;padding:12px;border:1.5px solid #ddd;border-radius:8px;font-size:14px;outline:none;">
          </div>
          <div style="margin-bottom:16px;">
            <label style="font-size:12px;font-weight:700;color:#666;display:block;margin-bottom:6px;">Description</label>
            <textarea id="item-desc" placeholder="e.g. Creamy iced coffee" rows="2" style="width:100%;padding:12px;border:1.5px solid #ddd;border-radius:8px;font-size:14px;outline:none;resize:none;"></textarea>
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
            <div>
              <label style="font-size:12px;font-weight:700;color:#666;display:block;margin-bottom:6px;">Price (₹) *</label>
              <input type="number" id="item-price" placeholder="99" style="width:100%;padding:12px;border:1.5px solid #ddd;border-radius:8px;font-size:14px;outline:none;">
            </div>
            <div>
              <label style="font-size:12px;font-weight:700;color:#666;display:block;margin-bottom:6px;">Stock Qty *</label>
              <input type="number" id="item-stock" placeholder="10" style="width:100%;padding:12px;border:1.5px solid #ddd;border-radius:8px;font-size:14px;outline:none;">
            </div>
          </div>
          <div style="margin-bottom:16px;">
            <label style="font-size:12px;font-weight:700;color:#666;display:block;margin-bottom:6px;">Category *</label>
            <select id="item-category" style="width:100%;padding:12px;border:1.5px solid #ddd;border-radius:8px;font-size:14px;outline:none;background:white;">
              <option value="">Select category</option>
              <option value="Beverages">🥤 Beverages</option>
              <option value="Wafers">🍪 Wafers</option>
              <option value="Snacks">🍟 Snacks</option>
              <option value="Coffee & Drinks">☕ Coffee & Drinks</option>
              <option value="Hot Dogs">🌭 Hot Dogs</option>
              <option value="Biryani">🍛 Biryani</option>
            </select>
          </div>
          <div style="margin-bottom:20px;">
            <label style="font-size:12px;font-weight:700;color:#666;display:block;margin-bottom:6px;">Image URL</label>
            <input type="text" id="item-image" placeholder="https://..." style="width:100%;padding:12px;border:1.5px solid #ddd;border-radius:8px;font-size:14px;outline:none;">
          </div>
          <div style="display:flex;gap:10px;">
            <button onclick="saveItemFromModal()" style="flex:1;padding:12px;background:#2d6a4f;color:white;border-radius:8px;font-weight:700;">Save Item</button>
            <button onclick="closeModal('admin-item-modal')" style="flex:1;padding:12px;background:#f0f0f0;color:#444;border-radius:8px;font-weight:700;">Cancel</button>
          </div>
        </div>
      </div>

      <!-- ORDERS TAB -->
      <div class="admin-tab-content" id="admin-tab-orders">
        <div class="orders-filter-bar">
          <select id="order-status-filter" onchange="renderAdminOrders()">
            <option value="All">All Orders</option>
            <option value="Pending">Pending</option>
            <option value="Preparing">Preparing</option>
            <option value="Completed">Completed</option>
          </select>
        </div>
        <div class="admin-orders-grid" id="admin-orders-list">
          <!-- Orders will be injected here -->
        </div>
      </div>
    </main>
  </div>
</div>