Hugging Face's logo

Spaces:
GilbertKambu
/
webprojects
Running

App Files Community
GilbertKambu commited on
Commit
913401f
·
verified ·
1 Parent(s): 450c734

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1089 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Webprojects
3
- emoji: 👁
4
- colorFrom: green
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: webprojects
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1089 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ghost Burger - Fast Food Ordering System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .menu-item:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
13
+ }
14
+ .receipt {
15
+ background: repeating-linear-gradient(
16
+ to bottom,
17
+ white,
18
+ white 24px,
19
+ #f0f0f0 24px,
20
+ #f0f0f0 25px
21
+ );
22
+ }
23
+ @media print {
24
+ .no-print {
25
+ display: none !important;
26
+ }
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-100 font-sans">
31
+ <!-- Login Page -->
32
+ <div id="login-page" class="min-h-screen flex items-center justify-center bg-gray-900">
33
+ <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-md">
34
+ <div class="text-center mb-8">
35
+ <img src="https://via.placeholder.com/100x100?text=🍔" alt="Ghost Burger Logo" class="mx-auto h-20 w-20">
36
+ <h1 class="text-3xl font-bold text-gray-800 mt-4">Ghost Burger</h1>
37
+ <p class="text-gray-600">Fast Food Ordering System</p>
38
+ </div>
39
+ <form id="login-form" class="space-y-6">
40
+ <div>
41
+ <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
42
+ <input type="text" id="username" name="username" required
43
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
44
+ </div>
45
+ <div>
46
+ <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
47
+ <input type="password" id="password" name="password" required
48
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
49
+ </div>
50
+ <div>
51
+ <button type="submit"
52
+ class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
53
+ Sign in
54
+ </button>
55
+ </div>
56
+ </form>
57
+ </div>
58
+ </div>
59
+
60
+ <!-- Main App Container (hidden initially) -->
61
+ <div id="app-container" class="hidden min-h-screen">
62
+ <!-- Header/Navigation -->
63
+ <header class="bg-gray-900 text-white shadow-lg">
64
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
65
+ <div class="flex justify-between h-16 items-center">
66
+ <div class="flex items-center">
67
+ <img src="https://via.placeholder.com/40x40?text=GB" alt="Logo" class="h-8 w-8">
68
+ <span class="ml-2 text-xl font-bold">Ghost Burger</span>
69
+ </div>
70
+ <nav class="hidden md:flex space-x-8">
71
+ <a href="#" class="nav-link active" data-page="billing">Billing</a>
72
+ <a href="#" class="nav-link" data-page="admin-dashboard">Admin Dashboard</a>
73
+ <a href="#" class="nav-link" data-page="reports">Reports</a>
74
+ </nav>
75
+ <div class="flex items-center">
76
+ <span id="current-user" class="mr-4"></span>
77
+ <button id="logout-btn" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md text-sm font-medium">
78
+ Logout
79
+ </button>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </header>
84
+
85
+ <!-- Main Content Area -->
86
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
87
+ <!-- Billing Page -->
88
+ <div id="billing-page" class="page-content">
89
+ <div class="flex flex-col md:flex-row gap-6">
90
+ <!-- Menu Items -->
91
+ <div class="w-full md:w-2/3">
92
+ <h2 class="text-2xl font-bold mb-6">Menu Items</h2>
93
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
94
+ <!-- Menu items will be populated here by JavaScript -->
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Order Summary -->
99
+ <div class="w-full md:w-1/3 bg-white p-6 rounded-lg shadow-md">
100
+ <h2 class="text-2xl font-bold mb-6">Order Summary</h2>
101
+ <div id="order-items" class="mb-6 space-y-3">
102
+ <!-- Order items will be populated here -->
103
+ <div class="text-gray-500 italic">No items added yet</div>
104
+ </div>
105
+ <div class="border-t border-gray-200 pt-4 mb-6">
106
+ <div class="flex justify-between font-semibold text-lg">
107
+ <span>Total:</span>
108
+ <span id="order-total">KSh 0.00</span>
109
+ </div>
110
+ </div>
111
+ <div class="mb-6">
112
+ <label class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label>
113
+ <div class="flex space-x-4">
114
+ <label class="inline-flex items-center">
115
+ <input type="radio" name="payment-method" value="cash" checked
116
+ class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
117
+ <span class="ml-2">Cash</span>
118
+ </label>
119
+ <label class="inline-flex items-center">
120
+ <input type="radio" name="payment-method" value="mpesa"
121
+ class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
122
+ <span class="ml-2">MPesa</span>
123
+ </label>
124
+ </div>
125
+ </div>
126
+ <div id="mpesa-section" class="hidden mb-6">
127
+ <label for="phone-number" class="block text-sm font-medium text-gray-700">Phone Number</label>
128
+ <input type="tel" id="phone-number"
129
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
130
+ <button id="process-mpesa" class="mt-2 w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md">
131
+ Process MPesa Payment
132
+ </button>
133
+ </div>
134
+ <div class="flex space-x-4">
135
+ <button id="print-receipt" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md">
136
+ <i class="fas fa-print mr-2"></i> Print Receipt
137
+ </button>
138
+ <button id="email-receipt" class="flex-1 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md">
139
+ <i class="fas fa-envelope mr-2"></i> Email Receipt
140
+ </button>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Admin Dashboard -->
147
+ <div id="admin-dashboard" class="page-content hidden">
148
+ <h1 class="text-3xl font-bold mb-8">Admin Dashboard</h1>
149
+
150
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
151
+ <div class="bg-white p-6 rounded-lg shadow-md">
152
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Total Sales</h3>
153
+ <p class="text-3xl font-bold text-indigo-600">KSh 24,850</p>
154
+ <p class="text-sm text-gray-500 mt-1">Today</p>
155
+ </div>
156
+ <div class="bg-white p-6 rounded-lg shadow-md">
157
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Orders</h3>
158
+ <p class="text-3xl font-bold text-green-600">42</p>
159
+ <p class="text-sm text-gray-500 mt-1">Today</p>
160
+ </div>
161
+ <div class="bg-white p-6 rounded-lg shadow-md">
162
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Top Item</h3>
163
+ <p class="text-3xl font-bold text-yellow-600">Ghost Burger</p>
164
+ <p class="text-sm text-gray-500 mt-1">15 sold today</p>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="bg-white p-6 rounded-lg shadow-md mb-8">
169
+ <div class="flex justify-between items-center mb-6">
170
+ <h2 class="text-xl font-bold">User Management</h2>
171
+ <button id="add-user-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md">
172
+ <i class="fas fa-plus mr-2"></i> Add User
173
+ </button>
174
+ </div>
175
+ <div class="overflow-x-auto">
176
+ <table class="min-w-full divide-y divide-gray-200">
177
+ <thead class="bg-gray-50">
178
+ <tr>
179
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
180
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
181
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
182
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
183
+ </tr>
184
+ </thead>
185
+ <tbody class="bg-white divide-y divide-gray-200">
186
+ <tr>
187
+ <td class="px-6 py-4 whitespace-nowrap">Admin User</td>
188
+ <td class="px-6 py-4 whitespace-nowrap">admin@ghostburger.com</td>
189
+ <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Admin</span></td>
190
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
191
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
192
+ <button class="text-red-600 hover:text-red-900">Delete</button>
193
+ </td>
194
+ </tr>
195
+ <tr>
196
+ <td class="px-6 py-4 whitespace-nowrap">Staff User</td>
197
+ <td class="px-6 py-4 whitespace-nowrap">staff@ghostburger.com</td>
198
+ <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Staff</span></td>
199
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
200
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
201
+ <button class="text-red-600 hover:text-red-900">Delete</button>
202
+ </td>
203
+ </tr>
204
+ </tbody>
205
+ </table>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
210
+ <div class="bg-white p-6 rounded-lg shadow-md">
211
+ <div class="flex justify-between items-center mb-6">
212
+ <h2 class="text-xl font-bold">Add Menu Item</h2>
213
+ </div>
214
+ <form id="add-item-form" class="space-y-4">
215
+ <div>
216
+ <label for="item-name" class="block text-sm font-medium text-gray-700">Item Name</label>
217
+ <input type="text" id="item-name" name="item-name" required
218
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
219
+ </div>
220
+ <div>
221
+ <label for="item-price" class="block text-sm font-medium text-gray-700">Price</label>
222
+ <input type="number" id="item-price" name="item-price" required
223
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
224
+ </div>
225
+ <div>
226
+ <label for="item-category" class="block text-sm font-medium text-gray-700">Category</label>
227
+ <select id="item-category" name="item-category" required
228
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
229
+ <option value="">Select a category</option>
230
+ <option value="burgers">Burgers</option>
231
+ <option value="fries">Fries</option>
232
+ <option value="drinks">Drinks</option>
233
+ <option value="desserts">Desserts</option>
234
+ </select>
235
+ </div>
236
+ <div>
237
+ <label for="item-image" class="block text-sm font-medium text-gray-700">Image</label>
238
+ <input type="file" id="item-image" name="item-image" accept="image/*"
239
+ class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
240
+ </div>
241
+ <div>
242
+ <button type="submit"
243
+ class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md">
244
+ Add Item
245
+ </button>
246
+ </div>
247
+ </form>
248
+ </div>
249
+
250
+ <div class="bg-white p-6 rounded-lg shadow-md">
251
+ <div class="flex justify-between items-center mb-6">
252
+ <h2 class="text-xl font-bold">Delete Menu Items</h2>
253
+ </div>
254
+ <div class="space-y-4">
255
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-md">
256
+ <div class="flex items-center">
257
+ <img src="https://via.placeholder.com/50x50?text=🍔" alt="Ghost Burger" class="h-10 w-10 rounded-full">
258
+ <div class="ml-3">
259
+ <p class="font-medium">Ghost Burger</p>
260
+ <p class="text-sm text-gray-500">KSh 450</p>
261
+ </div>
262
+ </div>
263
+ <button class="text-red-600 hover:text-red-900">
264
+ <i class="fas fa-trash"></i>
265
+ </button>
266
+ </div>
267
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-md">
268
+ <div class="flex items-center">
269
+ <img src="https://via.placeholder.com/50x50?text=🍟" alt="Fries" class="h-10 w-10 rounded-full">
270
+ <div class="ml-3">
271
+ <p class="font-medium">French Fries</p>
272
+ <p class="text-sm text-gray-500">KSh 200</p>
273
+ </div>
274
+ </div>
275
+ <button class="text-red-600 hover:text-red-900">
276
+ <i class="fas fa-trash"></i>
277
+ </button>
278
+ </div>
279
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-md">
280
+ <div class="flex items-center">
281
+ <img src="https://via.placeholder.com/50x50?text=🥤" alt="Soda" class="h-10 w-10 rounded-full">
282
+ <div class="ml-3">
283
+ <p class="font-medium">Soda</p>
284
+ <p class="text-sm text-gray-500">KSh 150</p>
285
+ </div>
286
+ </div>
287
+ <button class="text-red-600 hover:text-red-900">
288
+ <i class="fas fa-trash"></i>
289
+ </button>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Reports Page -->
297
+ <div id="reports-page" class="page-content hidden">
298
+ <h1 class="text-3xl font-bold mb-8">Reports</h1>
299
+
300
+ <div class="bg-white p-6 rounded-lg shadow-md mb-8">
301
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
302
+ <h2 class="text-xl font-bold mb-4 md:mb-0">Sales Report</h2>
303
+ <div class="flex space-x-4">
304
+ <div>
305
+ <label for="report-period" class="block text-sm font-medium text-gray-700">Period</label>
306
+ <select id="report-period"
307
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
308
+ <option value="today">Today</option>
309
+ <option value="week">This Week</option>
310
+ <option value="month">This Month</option>
311
+ <option value="custom">Custom</option>
312
+ </select>
313
+ </div>
314
+ <div id="custom-date-range" class="hidden">
315
+ <label for="start-date" class="block text-sm font-medium text-gray-700">Date Range</label>
316
+ <div class="flex space-x-2">
317
+ <input type="date" id="start-date"
318
+ class="mt-1 block px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
319
+ <input type="date" id="end-date"
320
+ class="mt-1 block px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
321
+ </div>
322
+ </div>
323
+ <div class="flex items-end">
324
+ <button id="generate-report" class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md">
325
+ Generate
326
+ </button>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <div class="overflow-x-auto">
332
+ <table class="min-w-full divide-y divide-gray-200">
333
+ <thead class="bg-gray-50">
334
+ <tr>
335
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
336
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
337
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Items</th>
338
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment</th>
339
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
340
+ </tr>
341
+ </thead>
342
+ <tbody class="bg-white divide-y divide-gray-200">
343
+ <tr>
344
+ <td class="px-6 py-4 whitespace-nowrap">2023-06-15</td>
345
+ <td class="px-6 py-4 whitespace-nowrap">#GB-00123</td>
346
+ <td class="px-6 py-4">Ghost Burger, Fries, Soda</td>
347
+ <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">MPesa</span></td>
348
+ <td class="px-6 py-4 whitespace-nowrap">KSh 800</td>
349
+ </tr>
350
+ <tr>
351
+ <td class="px-6 py-4 whitespace-nowrap">2023-06-15</td>
352
+ <td class="px-6 py-4 whitespace-nowrap">#GB-00122</td>
353
+ <td class="px-6 py-4">Double Ghost Burger, Large Fries</td>
354
+ <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Cash</span></td>
355
+ <td class="px-6 py-4 whitespace-nowrap">KSh 900</td>
356
+ </tr>
357
+ </tbody>
358
+ </table>
359
+ </div>
360
+
361
+ <div class="mt-6 flex justify-between items-center">
362
+ <div class="text-sm text-gray-500">
363
+ Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">42</span> results
364
+ </div>
365
+ <div class="flex space-x-2">
366
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
367
+ Previous
368
+ </button>
369
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
370
+ Next
371
+ </button>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
377
+ <div class="bg-white p-6 rounded-lg shadow-md">
378
+ <h2 class="text-xl font-bold mb-6">Top Selling Items</h2>
379
+ <div class="space-y-4">
380
+ <div>
381
+ <div class="flex justify-between mb-1">
382
+ <span class="text-sm font-medium text-gray-700">Ghost Burger</span>
383
+ <span class="text-sm font-medium text-gray-700">42</span>
384
+ </div>
385
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
386
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%"></div>
387
+ </div>
388
+ </div>
389
+ <div>
390
+ <div class="flex justify-between mb-1">
391
+ <span class="text-sm font-medium text-gray-700">French Fries</span>
392
+ <span class="text-sm font-medium text-gray-700">35</span>
393
+ </div>
394
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
395
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 62%"></div>
396
+ </div>
397
+ </div>
398
+ <div>
399
+ <div class="flex justify-between mb-1">
400
+ <span class="text-sm font-medium text-gray-700">Soda</span>
401
+ <span class="text-sm font-medium text-gray-700">28</span>
402
+ </div>
403
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
404
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 50%"></div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="bg-white p-6 rounded-lg shadow-md">
411
+ <h2 class="text-xl font-bold mb-6">Payment Methods</h2>
412
+ <div class="flex justify-center">
413
+ <div class="w-64 h-64">
414
+ <canvas id="paymentChart"></canvas>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="mt-6 flex justify-end">
421
+ <button id="export-pdf" class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-md mr-3">
422
+ <i class="fas fa-file-pdf mr-2"></i> Export PDF
423
+ </button>
424
+ <button id="export-csv" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md">
425
+ <i class="fas fa-file-excel mr-2"></i> Export CSV
426
+ </button>
427
+ </div>
428
+ </div>
429
+ </main>
430
+ </div>
431
+
432
+ <!-- Receipt Modal -->
433
+ <div id="receipt-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
434
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
435
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
436
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
437
+ </div>
438
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
439
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
440
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
441
+ <div class="receipt p-6 w-full max-w-md mx-auto">
442
+ <div class="text-center mb-4">
443
+ <h2 class="text-2xl font-bold">GHOST BURGER</h2>
444
+ <p class="text-sm">123 Fast Food Lane, Nairobi</p>
445
+ <p class="text-sm">Tel: 0700 123 456</p>
446
+ </div>
447
+ <div class="border-t border-b border-gray-300 py-2 my-2">
448
+ <div class="flex justify-between">
449
+ <span>Order #GB-00123</span>
450
+ <span id="receipt-date">2023-06-15 14:30</span>
451
+ </div>
452
+ </div>
453
+ <div id="receipt-items" class="mb-4">
454
+ <!-- Receipt items will be populated here -->
455
+ </div>
456
+ <div class="border-t border-gray-300 pt-2">
457
+ <div class="flex justify-between font-semibold">
458
+ <span>Total:</span>
459
+ <span id="receipt-total">KSh 0.00</span>
460
+ </div>
461
+ <div class="mt-2 text-sm" id="receipt-payment-method">
462
+ Payment Method: Cash
463
+ </div>
464
+ <div class="mt-4 text-center text-xs">
465
+ Thank you for dining with us!
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse no-print">
471
+ <button type="button" id="print-receipt-btn"
472
+ class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
473
+ <i class="fas fa-print mr-2"></i> Print Receipt
474
+ </button>
475
+ <button type="button" id="close-receipt-modal"
476
+ class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
477
+ Close
478
+ </button>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Email Receipt Modal -->
485
+ <div id="email-receipt-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
486
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
487
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
488
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
489
+ </div>
490
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
491
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
492
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
493
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Email Receipt</h3>
494
+ <div class="mb-4">
495
+ <label for="customer-email" class="block text-sm font-medium text-gray-700">Customer Email</label>
496
+ <input type="email" id="customer-email"
497
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
498
+ placeholder="customer@example.com">
499
+ </div>
500
+ <div class="mb-4">
501
+ <label for="receipt-message" class="block text-sm font-medium text-gray-700">Message (optional)</label>
502
+ <textarea id="receipt-message" rows="3"
503
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">Thank you for dining at Ghost Burger! Here's your receipt.</textarea>
504
+ </div>
505
+ </div>
506
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
507
+ <button type="button" id="send-email-receipt"
508
+ class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
509
+ <i class="fas fa-paper-plane mr-2"></i> Send Receipt
510
+ </button>
511
+ <button type="button" id="close-email-receipt-modal"
512
+ class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
513
+ Cancel
514
+ </button>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ </div>
519
+
520
+ <!-- Add User Modal -->
521
+ <div id="add-user-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
522
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
523
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
524
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
525
+ </div>
526
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
527
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
528
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
529
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Add New User</h3>
530
+ <form id="add-user-form" class="space-y-4">
531
+ <div>
532
+ <label for="new-user-name" class="block text-sm font-medium text-gray-700">Full Name</label>
533
+ <input type="text" id="new-user-name" name="new-user-name" required
534
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
535
+ </div>
536
+ <div>
537
+ <label for="new-user-email" class="block text-sm font-medium text-gray-700">Email</label>
538
+ <input type="email" id="new-user-email" name="new-user-email" required
539
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
540
+ </div>
541
+ <div>
542
+ <label for="new-user-role" class="block text-sm font-medium text-gray-700">Role</label>
543
+ <select id="new-user-role" name="new-user-role" required
544
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
545
+ <option value="">Select a role</option>
546
+ <option value="admin">Admin</option>
547
+ <option value="staff">Staff</option>
548
+ </select>
549
+ </div>
550
+ <div>
551
+ <label for="new-user-password" class="block text-sm font-medium text-gray-700">Password</label>
552
+ <input type="password" id="new-user-password" name="new-user-password" required
553
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
554
+ </div>
555
+ <div>
556
+ <label for="new-user-confirm-password" class="block text-sm font-medium text-gray-700">Confirm Password</label>
557
+ <input type="password" id="new-user-confirm-password" name="new-user-confirm-password" required
558
+ class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
559
+ </div>
560
+ </form>
561
+ </div>
562
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
563
+ <button type="button" id="save-new-user"
564
+ class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
565
+ Save User
566
+ </button>
567
+ <button type="button" id="cancel-add-user"
568
+ class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
569
+ Cancel
570
+ </button>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </div>
575
+
576
+ <!-- MPesa Processing Modal -->
577
+ <div id="mpesa-processing-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
578
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
579
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
580
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
581
+ </div>
582
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
583
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full">
584
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
585
+ <div class="text-center">
586
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
587
+ <i class="fas fa-mobile-alt text-green-600"></i>
588
+ </div>
589
+ <h3 class="mt-3 text-lg leading-6 font-medium text-gray-900">MPesa Payment Processing</h3>
590
+ <div class="mt-2">
591
+ <p class="text-sm text-gray-500">Please check your phone and enter your MPesa PIN to complete the payment of <span id="mpesa-amount" class="font-bold">KSh 0.00</span>.</p>
592
+ <div id="mpesa-spinner" class="mt-4">
593
+ <div class="flex justify-center">
594
+ <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
595
+ </div>
596
+ <p class="mt-2 text-sm text-gray-500">Waiting for payment confirmation...</p>
597
+ </div>
598
+ <div id="mpesa-success" class="hidden mt-4">
599
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
600
+ <i class="fas fa-check text-green-600"></i>
601
+ </div>
602
+ <p class="mt-2 text-sm text-green-600">Payment received! Transaction ID: <span id="mpesa-transaction-id" class="font-bold">NCJ892HJK2</span></p>
603
+ </div>
604
+ <div id="mpesa-failure" class="hidden mt-4">
605
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
606
+ <i class="fas fa-times text-red-600"></i>
607
+ </div>
608
+ <p class="mt-2 text-sm text-red-600">Payment failed. Please try again or use another payment method.</p>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
614
+ <button type="button" id="mpesa-done-btn" class="hidden w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">
615
+ Done
616
+ </button>
617
+ <button type="button" id="mpesa-retry-btn" class="hidden w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
618
+ Retry
619
+ </button>
620
+ <button type="button" id="mpesa-cancel-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
621
+ Cancel
622
+ </button>
623
+ </div>
624
+ </div>
625
+ </div>
626
+ </div>
627
+
628
+ <script>
629
+ // Sample menu data
630
+ const menuItems = [
631
+ { id: 1, name: "Ghost Burger", price: 450, category: "burgers", image: "🍔" },
632
+ { id: 2, name: "Double Ghost Burger", price: 650, category: "burgers", image: "🍔🍔" },
633
+ { id: 3, name: "Cheese Ghost Burger", price: 500, category: "burgers", image: "🧀🍔" },
634
+ { id: 4, name: "French Fries", price: 200, category: "fries", image: "🍟" },
635
+ { id: 5, name: "Large Fries", price: 300, category: "fries", image: "🍟🍟" },
636
+ { id: 6, name: "Cheese Fries", price: 350, category: "fries", image: "🧀🍟" },
637
+ { id: 7, name: "Soda", price: 150, category: "drinks", image: "🥤" },
638
+ { id: 8, name: "Milkshake", price: 250, category: "drinks", image: "🥛" },
639
+ { id: 9, name: "Ice Cream", price: 200, category: "desserts", image: "🍦" },
640
+ { id: 10, name: "Chocolate Cake", price: 300, category: "desserts", image: "🍫🍰" }
641
+ ];
642
+
643
+ // Current order
644
+ let currentOrder = [];
645
+ let currentUser = null;
646
+
647
+ // DOM elements
648
+ const loginPage = document.getElementById('login-page');
649
+ const appContainer = document.getElementById('app-container');
650
+ const loginForm = document.getElementById('login-form');
651
+ const logoutBtn = document.getElementById('logout-btn');
652
+ const currentUserSpan = document.getElementById('current-user');
653
+ const navLinks = document.querySelectorAll('.nav-link');
654
+ const pageContents = document.querySelectorAll('.page-content');
655
+ const menuContainer = document.querySelector('#billing-page .grid');
656
+ const orderItemsContainer = document.getElementById('order-items');
657
+ const orderTotalSpan = document.getElementById('order-total');
658
+ const paymentMethodRadios = document.querySelectorAll('input[name="payment-method"]');
659
+ const mpesaSection = document.getElementById('mpesa-section');
660
+ const printReceiptBtn = document.getElementById('print-receipt');
661
+ const emailReceiptBtn = document.getElementById('email-receipt');
662
+ const receiptModal = document.getElementById('receipt-modal');
663
+ const closeReceiptModal = document.getElementById('close-receipt-modal');
664
+ const printReceiptBtnModal = document.getElementById('print-receipt-btn');
665
+ const emailReceiptModal = document.getElementById('email-receipt-modal');
666
+ const closeEmailReceiptModal = document.getElementById('close-email-receipt-modal');
667
+ const sendEmailReceiptBtn = document.getElementById('send-email-receipt');
668
+ const addUserBtn = document.getElementById('add-user-btn');
669
+ const addUserModal = document.getElementById('add-user-modal');
670
+ const cancelAddUserBtn = document.getElementById('cancel-add-user');
671
+ const saveNewUserBtn = document.getElementById('save-new-user');
672
+ const processMpesaBtn = document.getElementById('process-mpesa');
673
+ const mpesaProcessingModal = document.getElementById('mpesa-processing-modal');
674
+ const mpesaCancelBtn = document.getElementById('mpesa-cancel-btn');
675
+ const mpesaDoneBtn = document.getElementById('mpesa-done-btn');
676
+ const mpesaRetryBtn = document.getElementById('mpesa-retry-btn');
677
+ const mpesaAmountSpan = document.getElementById('mpesa-amount');
678
+ const reportPeriodSelect = document.getElementById('report-period');
679
+ const customDateRangeDiv = document.getElementById('custom-date-range');
680
+
681
+ // Initialize the app
682
+ function initApp() {
683
+ // Populate menu items
684
+ renderMenuItems();
685
+
686
+ // Set up event listeners
687
+ setupEventListeners();
688
+ }
689
+
690
+ // Render menu items
691
+ function renderMenuItems() {
692
+ menuContainer.innerHTML = '';
693
+ menuItems.forEach(item => {
694
+ const menuItem = document.createElement('div');
695
+ menuItem.className = 'bg-white p-4 rounded-lg shadow-md cursor-pointer menu-item transition duration-300';
696
+ menuItem.innerHTML = `
697
+ <div class="text-4xl text-center mb-2">${item.image}</div>
698
+ <h3 class="font-medium text-center">${item.name}</h3>
699
+ <p class="text-center text-gray-600">KSh ${item.price.toFixed(2)}</p>
700
+ `;
701
+ menuItem.addEventListener('click', () => addToOrder(item));
702
+ menuContainer.appendChild(menuItem);
703
+ });
704
+ }
705
+
706
+ // Add item to order
707
+ function addToOrder(item) {
708
+ const existingItem = currentOrder.find(orderItem => orderItem.id === item.id);
709
+
710
+ if (existingItem) {
711
+ existingItem.quantity += 1;
712
+ } else {
713
+ currentOrder.push({
714
+ id: item.id,
715
+ name: item.name,
716
+ price: item.price,
717
+ quantity: 1
718
+ });
719
+ }
720
+
721
+ renderOrderItems();
722
+ }
723
+
724
+ // Remove item from order
725
+ function removeFromOrder(itemId) {
726
+ const itemIndex = currentOrder.findIndex(item => item.id === itemId);
727
+
728
+ if (itemIndex !== -1) {
729
+ if (currentOrder[itemIndex].quantity > 1) {
730
+ currentOrder[itemIndex].quantity -= 1;
731
+ } else {
732
+ currentOrder.splice(itemIndex, 1);
733
+ }
734
+
735
+ renderOrderItems();
736
+ }
737
+ }
738
+
739
+ // Render order items
740
+ function renderOrderItems() {
741
+ if (currentOrder.length === 0) {
742
+ orderItemsContainer.innerHTML = '<div class="text-gray-500 italic">No items added yet</div>';
743
+ orderTotalSpan.textContent = 'KSh 0.00';
744
+ return;
745
+ }
746
+
747
+ let html = '';
748
+ let total = 0;
749
+
750
+ currentOrder.forEach(item => {
751
+ const itemTotal = item.price * item.quantity;
752
+ total += itemTotal;
753
+
754
+ html += `
755
+ <div class="flex justify-between items-center">
756
+ <div>
757
+ <span class="font-medium">${item.name}</span>
758
+ <div class="text-sm text-gray-500">
759
+ KSh ${item.price.toFixed(2)} × ${item.quantity}
760
+ </div>
761
+ </div>
762
+ <div class="flex items-center">
763
+ <span class="font-medium mr-3">KSh ${itemTotal.toFixed(2)}</span>
764
+ <button class="text-red-500 hover:text-red-700 remove-item" data-id="${item.id}">
765
+ <i class="fas fa-times"></i>
766
+ </button>
767
+ </div>
768
+ </div>
769
+ `;
770
+ });
771
+
772
+ orderItemsContainer.innerHTML = html;
773
+ orderTotalSpan.textContent = `KSh ${total.toFixed(2)}`;
774
+
775
+ // Add event listeners to remove buttons
776
+ document.querySelectorAll('.remove-item').forEach(button => {
777
+ button.addEventListener('click', (e) => {
778
+ e.stopPropagation();
779
+ removeFromOrder(parseInt(button.dataset.id));
780
+ });
781
+ });
782
+ }
783
+
784
+ // Render receipt
785
+ function renderReceipt(paymentMethod) {
786
+ const receiptItems = document.getElementById('receipt-items');
787
+ const receiptTotal = document.getElementById('receipt-total');
788
+ const receiptPaymentMethod = document.getElementById('receipt-payment-method');
789
+
790
+ let html = '';
791
+ let total = 0;
792
+
793
+ currentOrder.forEach(item => {
794
+ const itemTotal = item.price * item.quantity;
795
+ total += itemTotal;
796
+
797
+ html += `
798
+ <div class="flex justify-between mb-1">
799
+ <span>${item.name} × ${item.quantity}</span>
800
+ <span>KSh ${itemTotal.toFixed(2)}</span>
801
+ </div>
802
+ `;
803
+ });
804
+
805
+ receiptItems.innerHTML = html;
806
+ receiptTotal.textContent = `KSh ${total.toFixed(2)}`;
807
+ receiptPaymentMethod.textContent = `Payment Method: ${paymentMethod === 'mpesa' ? 'MPesa' : 'Cash'}`;
808
+
809
+ // Set current date and time
810
+ const now = new Date();
811
+ const dateStr = now.toISOString().split('T')[0];
812
+ const timeStr = now.toTimeString().substring(0, 5);
813
+ document.getElementById('receipt-date').textContent = `${dateStr} ${timeStr}`;
814
+
815
+ // Set MPesa transaction details if applicable
816
+ if (paymentMethod === 'mpesa') {
817
+ const transactionId = `MP${Math.floor(Math.random() * 1000000000).toString().padStart(9, '0')}`;
818
+ receiptPaymentMethod.innerHTML += `<div class="mt-1">Transaction ID: ${transactionId}</div>`;
819
+ }
820
+ }
821
+
822
+ // Setup event listeners
823
+ function setupEventListeners() {
824
+ // Login form
825
+ loginForm.addEventListener('submit', (e) => {
826
+ e.preventDefault();
827
+ const username = document.getElementById('username').value;
828
+ const password = document.getElementById('password').value;
829
+
830
+ // Simple authentication (in a real app, this would be server-side)
831
+ if (username && password) {
832
+ currentUser = {
833
+ name: username === 'admin' ? 'Admin User' : 'Staff User',
834
+ role: username === 'admin' ? 'admin' : 'staff'
835
+ };
836
+
837
+ loginPage.classList.add('hidden');
838
+ appContainer.classList.remove('hidden');
839
+ currentUserSpan.textContent = `Logged in as ${currentUser.name} (${currentUser.role})`;
840
+
841
+ // Show appropriate pages based on role
842
+ if (currentUser.role === 'staff') {
843
+ document.querySelector('[data-page="admin-dashboard"]').style.display = 'none';
844
+ document.querySelector('[data-page="reports"]').style.display = 'none';
845
+ showPage('billing');
846
+ } else {
847
+ showPage('billing');
848
+ }
849
+ }
850
+ });
851
+
852
+ // Logout button
853
+ logoutBtn.addEventListener('click', () => {
854
+ currentUser = null;
855
+ currentOrder = [];
856
+ appContainer.classList.add('hidden');
857
+ loginPage.classList.remove('hidden');
858
+ document.getElementById('username').value = '';
859
+ document.getElementById('password').value = '';
860
+ });
861
+
862
+ // Navigation links
863
+ navLinks.forEach(link => {
864
+ link.addEventListener('click', (e) => {
865
+ e.preventDefault();
866
+ showPage(link.dataset.page);
867
+ });
868
+ });
869
+
870
+ // Payment method radio buttons
871
+ paymentMethodRadios.forEach(radio => {
872
+ radio.addEventListener('change', (e) => {
873
+ if (e.target.value === 'mpesa') {
874
+ mpesaSection.classList.remove('hidden');
875
+ } else {
876
+ mpesaSection.classList.add('hidden');
877
+ }
878
+ });
879
+ });
880
+
881
+ // Print receipt button
882
+ printReceiptBtn.addEventListener('click', () => {
883
+ if (currentOrder.length === 0) {
884
+ alert('Please add items to the order first');
885
+ return;
886
+ }
887
+
888
+ const paymentMethod = document.querySelector('input[name="payment-method"]:checked').value;
889
+ renderReceipt(paymentMethod);
890
+ receiptModal.classList.remove('hidden');
891
+ });
892
+
893
+ // Email receipt button
894
+ emailReceiptBtn.addEventListener('click', () => {
895
+ if (currentOrder.length === 0) {
896
+ alert('Please add items to the order first');
897
+ return;
898
+ }
899
+
900
+ emailReceiptModal.classList.remove('hidden');
901
+ });
902
+
903
+ // Close receipt modal
904
+ closeReceiptModal.addEventListener('click', () => {
905
+ receiptModal.classList.add('hidden');
906
+ });
907
+
908
+ // Print receipt from modal
909
+ printReceiptBtnModal.addEventListener('click', () => {
910
+ window.print();
911
+ });
912
+
913
+ // Close email receipt modal
914
+ closeEmailReceiptModal.addEventListener('click', () => {
915
+ emailReceiptModal.classList.add('hidden');
916
+ });
917
+
918
+ // Send email receipt
919
+ sendEmailReceipt.addEventListener('click', () => {
920
+ const email = document.getElementById('customer-email').value;
921
+ if (!email) {
922
+ alert('Please enter customer email');
923
+ return;
924
+ }
925
+
926
+ alert(`Receipt sent to ${email}`);
927
+ emailReceiptModal.classList.add('hidden');
928
+ currentOrder = [];
929
+ renderOrderItems();
930
+ });
931
+
932
+ // Add user button
933
+ addUserBtn.addEventListener('click', () => {
934
+ addUserModal.classList.remove('hidden');
935
+ });
936
+
937
+ // Cancel add user
938
+ cancelAddUserBtn.addEventListener('click', () => {
939
+ addUserModal.classList.add('hidden');
940
+ });
941
+
942
+ // Save new user
943
+ saveNewUserBtn.addEventListener('click', () => {
944
+ const name = document.getElementById('new-user-name').value;
945
+ const email = document.getElementById('new-user-email').value;
946
+ const role = document.getElementById('new-user-role').value;
947
+ const password = document.getElementById('new-user-password').value;
948
+ const confirmPassword = document.getElementById('new-user-confirm-password').value;
949
+
950
+ if (!name || !email || !role || !password || !confirmPassword) {
951
+ alert('Please fill in all fields');
952
+ return;
953
+ }
954
+
955
+ if (password !== confirmPassword) {
956
+ alert('Passwords do not match');
957
+ return;
958
+ }
959
+
960
+ alert(`User ${name} (${role}) added successfully`);
961
+ addUserModal.classList.add('hidden');
962
+ document.getElementById('add-user-form').reset();
963
+ });
964
+
965
+ // Process MPesa payment
966
+ processMpesaBtn.addEventListener('click', () => {
967
+ const phoneNumber = document.getElementById('phone-number').value;
968
+ if (!phoneNumber || phoneNumber.length < 9) {
969
+ alert('Please enter a valid phone number');
970
+ return;
971
+ }
972
+
973
+ if (currentOrder.length === 0) {
974
+ alert('Please add items to the order first');
975
+ return;
976
+ }
977
+
978
+ // Calculate total
979
+ let total = 0;
980
+ currentOrder.forEach(item => {
981
+ total += item.price * item.quantity;
982
+ });
983
+
984
+ mpesaAmountSpan.textContent = `KSh ${total.toFixed(2)}`;
985
+ mpesaProcessingModal.classList.remove('hidden');
986
+
987
+ // Simulate MPesa processing
988
+ const mpesaSpinner = document.getElementById('mpesa-spinner');
989
+ const mpesaSuccess = document.getElementById('mpesa-success');
990
+ const mpesaFailure = document.getElementById('mpesa-failure');
991
+
992
+ mpesaSpinner.classList.remove('hidden');
993
+ mpesaSuccess.classList.add('hidden');
994
+ mpesaFailure.classList.add('hidden');
995
+ mpesaDoneBtn.classList.add('hidden');
996
+ mpesaRetryBtn.classList.add('hidden');
997
+
998
+ setTimeout(() => {
999
+ // Randomly decide if payment succeeds (80% chance)
1000
+ const success = Math.random() < 0.8;
1001
+
1002
+ mpesaSpinner.classList.add('hidden');
1003
+
1004
+ if (success) {
1005
+ mpesaSuccess.classList.remove('hidden');
1006
+ mpesaDoneBtn.classList.remove('hidden');
1007
+
1008
+ // Generate random transaction ID
1009
+ const transactionId = `MP${Math.floor(Math.random() * 1000000000).toString().padStart(9, '0')}`;
1010
+ document.getElementById('mpesa-transaction-id').textContent = transactionId;
1011
+ } else {
1012
+ mpesaFailure.classList.remove('hidden');
1013
+ mpesaRetryBtn.classList.remove('hidden');
1014
+ }
1015
+ }, 3000);
1016
+ });
1017
+
1018
+ // MPesa modal buttons
1019
+ mpesaCancelBtn.addEventListener('click', () => {
1020
+ mpesaProcessingModal.classList.add('hidden');
1021
+ });
1022
+
1023
+ mpesaDoneBtn.addEventListener('click', () => {
1024
+ mpesaProcessingModal.classList.add('hidden');
1025
+ const paymentMethod = document.querySelector('input[name="payment-method"]:checked').value;
1026
+ renderReceipt(paymentMethod);
1027
+ receiptModal.classList.remove('hidden');
1028
+
1029
+ // Clear order after successful payment
1030
+ currentOrder = [];
1031
+ renderOrderItems();
1032
+ });
1033
+
1034
+ mpesaRetryBtn.addEventListener('click', () => {
1035
+ document.getElementById('mpesa-spinner').classList.remove('hidden');
1036
+ document.getElementById('mpesa-success').classList.add('hidden');
1037
+ document.getElementById('mpesa-failure').classList.add('hidden');
1038
+ mpesaDoneBtn.classList.add('hidden');
1039
+ mpesaRetryBtn.classList.add('hidden');
1040
+
1041
+ setTimeout(() => {
1042
+ // Randomly decide if payment succeeds (80% chance)
1043
+ const success = Math.random() < 0.8;
1044
+
1045
+ document.getElementById('mpesa-spinner').classList.add('hidden');
1046
+
1047
+ if (success) {
1048
+ document.getElementById('mpesa-success').classList.remove('hidden');
1049
+ mpesaDoneBtn.classList.remove('hidden');
1050
+
1051
+ // Generate random transaction ID
1052
+ const transactionId = `MP${Math.floor(Math.random() * 1000000000).toString().padStart(9, '0')}`;
1053
+ document.getElementById('mpesa-transaction-id').textContent = transactionId;
1054
+ } else {
1055
+ document.getElementById('mpesa-failure').classList.remove('hidden');
1056
+ mpesaRetryBtn.classList.remove('hidden');
1057
+ }
1058
+ }, 3000);
1059
+ });
1060
+
1061
+ // Report period selector
1062
+ reportPeriodSelect.addEventListener('change', (e) => {
1063
+ if (e.target.value === 'custom') {
1064
+ customDateRangeDiv.classList.remove('hidden');
1065
+ } else {
1066
+ customDateRangeDiv.classList.add('hidden');
1067
+ }
1068
+ });
1069
+ }
1070
+
1071
+ // Show page
1072
+ function showPage(pageName) {
1073
+ pageContents.forEach(content => {
1074
+ content.classList.add('hidden');
1075
+ });
1076
+
1077
+ navLinks.forEach(link => {
1078
+ link.classList.remove('active');
1079
+ });
1080
+
1081
+ document.getElementById(`${pageName}-page`).classList.remove('hidden');
1082
+ document.querySelector(`[data-page="${pageName}"]`).classList.add('active');
1083
+ }
1084
+
1085
+ // Initialize the app when DOM is loaded
1086
+ document.addEventListener('DOMContentLoaded', initApp);
1087
+ </script>
1088
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GilbertKambu/webprojects" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1089
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Here’s a detailed description and functional breakdown for your Ghost Burger fast food system, based on your requirements. The system will be developed in PHP, likely using Laravel for structure (highly recommended), and will feature user authentication, role-based access control, billing, item management, reporting, MPesa integration, and e/physical receipts. 🍔 Ghost Burger – System Specification (PHP-based) 1. System Overview Ghost Burger is a fast food ordering and billing system built in PHP. It supports user authentication for staff and administrators, each with distinct roles and permissions. The platform allows for fast order processing through clickable images of menu items and provides options for printing or emailing receipts. Admins manage users, menu items, payments, and reports, while staff members handle day-to-day orders and billing. 2. User Roles & Authentication 🔐 Authentication Page Login page for all users (staff and admins). Username and password login (can use Laravel Breeze or Jetstream). Role-based redirection after login. 👤 User Roles Administrator Full access to all pages and controls. Can add/edit/delete users. Can add/delete menu items. Can view system reports and transactions. Can manage MPesa payment integration. Staff Access to: Billing page. Order-taking interface (clickable food item images). Print or send e-receipts. Cannot modify database content (menu, users, etc.). 3. Pages & Features 🧾 Billing Page (Staff & Admin Access) Display menu as image tiles with food names (clickable to add to order). Live order summary (with quantities, price calculation). Option to: Print receipt (physical via connected printer). Send e-receipt via email. Option to choose payment method: Cash / MPesa. 💼 Admin Dashboard a. User Management Add new users (staff or admin). Delete users. Reset passwords or update user details. b. Item Management Add Item Page: Fields: Name, Category, Image Upload, Price. Delete Item Page: List of current items with delete button. c. Reports Page Daily/weekly/monthly reports. Filters: Date range, item/category, payment method. Export as PDF or CSV. Printable view. d. MPesa Integration Integration with MPesa STK Push API. Record MPesa transaction IDs in database. Show confirmation on billing page when payment is successful. 4. Database Structure (MySQL) 🔧 Tables Overview plaintext Copy Edit users (id, name, email, password, role) menu_items (id, name, image_path, price, category) orders (id, user_id, total_price, payment_method, created_at) order_items (id, order_id, menu_item_id, quantity, price) payments (id, order_id, payment_method, mpesa_transaction_id, created_at) receipts (id, order_id, receipt_type, sent_to, created_at) 5. Technologies Used Backend: PHP (Laravel 12 recommended) Frontend: Blade + Vue (optional but ideal for interactive UI) Authentication: Laravel Breeze or Jetstream Database: MySQL Printing: JavaScript print trigger / PDF for e-receipts MPesa: Daraja API for STK push Image Handling: Laravel file upload and storage system 6. Extra Features (Optional) Staff activity logging. Admin dashboard analytics: Top-selling items, peak hours, etc. Receipt preview before printing/sending.