Hugging Face's logo

Spaces:
wajdi22
/
civissol
Running

App Files Community
wajdi22 commited on
Commit
c697e98
·
verified ·
1 Parent(s): 8e145a2

take some tips frome my app https://civissol-drilling-co-e0s6.bolt.host - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +968 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Civissol
3
- emoji: 👀
4
- colorFrom: blue
5
- colorTo: pink
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: civissol
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,968 @@
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>Civissol Drilling Company App</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ colors: {
13
+ primary: '#1e40af',
14
+ secondary: '#1e3a8a',
15
+ accent: '#3b82f6',
16
+ }
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
22
+ <style>
23
+ .sidebar {
24
+ transition: all 0.3s;
25
+ }
26
+ .dashboard-card:hover {
27
+ transform: translateY(-5px);
28
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
29
+ }
30
+ .mobile-menu {
31
+ display: none;
32
+ }
33
+ @media (max-width: 768px) {
34
+ .sidebar {
35
+ position: fixed;
36
+ left: -100%;
37
+ top: 0;
38
+ z-index: 50;
39
+ height: 100vh;
40
+ }
41
+ .sidebar.active {
42
+ left: 0;
43
+ }
44
+ .mobile-menu {
45
+ display: block;
46
+ }
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="bg-gray-100">
51
+ <!-- Login/Signup Screens -->
52
+ <div id="authContainer" class="fixed inset-0 bg-white z-50 flex items-center justify-center">
53
+ <div class="w-full max-w-md p-8 bg-white rounded-lg shadow-lg">
54
+ <!-- Login Form -->
55
+ <div id="loginForm">
56
+ <h2 class="text-2xl font-bold text-center mb-6">Login to Civissol</h2>
57
+ <form>
58
+ <div class="mb-4">
59
+ <label class="block text-gray-700 mb-2" for="loginUsername">Username or Email</label>
60
+ <input type="text" id="loginUsername" class="w-full px-3 py-2 border rounded-md" placeholder="Enter your username or email" required>
61
+ </div>
62
+ <div class="mb-6">
63
+ <label class="block text-gray-700 mb-2" for="loginPassword">Password</label>
64
+ <input type="password" id="loginPassword" class="w-full px-3 py-2 border rounded-md" required>
65
+ </div>
66
+ <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 mb-4">
67
+ Login
68
+ </button>
69
+ <p class="text-center text-sm">
70
+ Don't have an account?
71
+ <button id="showSignup" class="text-blue-600 hover:underline">Sign up</button>
72
+ </p>
73
+ </form>
74
+ </div>
75
+
76
+ <!-- Signup Form -->
77
+ <div id="signupForm" class="hidden">
78
+ <h2 class="text-2xl font-bold text-center mb-6">Sign Up for Civissol</h2>
79
+ <form>
80
+ <div class="mb-4">
81
+ <label class="block text-gray-700 mb-2" for="signupName">Full Name</label>
82
+ <input type="text" id="signupName" class="w-full px-3 py-2 border rounded-md" placeholder="Enter your full name" required>
83
+ </div>
84
+ <div class="mb-4">
85
+ <label class="block text-gray-700 mb-2" for="signupEmail">Email</label>
86
+ <input type="email" id="signupEmail" class="w-full px-3 py-2 border rounded-md" placeholder="Enter your email" required>
87
+ </div>
88
+ <div class="mb-4">
89
+ <label class="block text-gray-700 mb-2" for="signupPhone">Phone Number (Optional)</label>
90
+ <input type="tel" id="signupPhone" class="w-full px-3 py-2 border rounded-md" placeholder="+1 (___) ___-____">
91
+ </div>
92
+ <div class="mb-4">
93
+ <label class="block text-gray-700 mb-2" for="signupPassword">Password</label>
94
+ <input type="password" id="signupPassword" class="w-full px-3 py-2 border rounded-md" placeholder="Create a password" required minlength="8">
95
+ </div>
96
+ <div class="mb-4">
97
+ <label class="block text-gray-700 mb-2">Request Role</label>
98
+ <select class="w-full px-3 py-2 border rounded-md">
99
+ <option>Normal User</option>
100
+ <option>Admin (Requires Approval)</option>
101
+ </select>
102
+ </div>
103
+ <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 mb-4">
104
+ Request Access
105
+ </button>
106
+ <p class="text-center text-sm">
107
+ Already have an account?
108
+ <button id="showLogin" class="text-blue-600 hover:underline">Login</button>
109
+ </p>
110
+ </form>
111
+ </div>
112
+
113
+ <!-- Approval Pending Message -->
114
+ <div id="approvalPending" class="hidden text-center">
115
+ <i class="fas fa-clock text-4xl text-yellow-500 mb-4"></i>
116
+ <h3 class="text-xl font-bold mb-2">Waiting for Admin Approval</h3>
117
+ <p class="text-gray-600 mb-4">Your signup request has been submitted. An admin will review your application shortly.</p>
118
+ <button id="backToLogin" class="text-blue-600 hover:underline">Back to Login</button>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Mobile Menu Button -->
124
+ <div class="mobile-menu lg:hidden fixed top-4 left-4 z-50">
125
+ <button id="menuToggle" class="p-2 rounded-md bg-blue-600 text-white">
126
+ <i class="fas fa-bars"></i>
127
+ </button>
128
+ </div>
129
+
130
+ <!-- Sidebar -->
131
+ <div id="sidebar" class="sidebar w-56 bg-gray-900 text-white fixed h-full overflow-y-auto">
132
+ <div class="p-4 flex items-center space-x-2 border-b border-gray-700">
133
+ <i class="fas fa-hammer text-accent text-2xl"></i>
134
+ <h1 class="text-xl font-bold">Civissol</h1>
135
+ </div>
136
+ <div class="p-4">
137
+ <div class="flex items-center space-x-3 mb-6">
138
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
139
+ <span id="userInitial" class="font-bold">A</span>
140
+ </div>
141
+ <div>
142
+ <p id="userName" class="font-medium">Admin User</p>
143
+ <p id="userRole" class="text-xs text-gray-400">Administrator</p>
144
+ </div>
145
+ </div>
146
+
147
+ <nav>
148
+ <ul class="space-y-2">
149
+ <li>
150
+ <a href="#" data-cmd="CMD-DASH" class="flex items-center space-x-3 p-2 rounded-md bg-gray-800 hover:bg-gray-700">
151
+ <i class="fas fa-tachometer-alt text-accent w-5 text-center"></i>
152
+ <span class="text-sm">Dashboard</span>
153
+ </a>
154
+ </li>
155
+ <li>
156
+ <a href="#" data-cmd="CMD-MACH" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700">
157
+ <i class="fas fa-cogs text-blue-400"></i>
158
+ <span>Machines</span>
159
+ </a>
160
+ </li>
161
+ <li>
162
+ <a href="#" data-cmd="CMD-INVT" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700">
163
+ <i class="fas fa-boxes text-blue-400"></i>
164
+ <span>Inventory</span>
165
+ </a>
166
+ </li>
167
+ <li>
168
+ <a href="#" data-cmd="CMD-TASK" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700">
169
+ <i class="fas fa-tasks text-blue-400"></i>
170
+ <span>Tasks</span>
171
+ </a>
172
+ </li>
173
+ <li>
174
+ <a href="#" data-cmd="CMD-LOC" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700">
175
+ <i class="fas fa-map-marker-alt text-blue-400"></i>
176
+ <span>Locations</span>
177
+ </a>
178
+ </li>
179
+ <li>
180
+ <a href="#" data-cmd="CMD-PROB" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700">
181
+ <i class="fas fa-exclamation-triangle text-blue-400"></i>
182
+ <span>Problem Reports</span>
183
+ </a>
184
+ </li>
185
+ <li>
186
+ <a href="#" data-cmd="CMD-MOV" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700">
187
+ <i class="fas fa-exchange-alt text-blue-400"></i>
188
+ <span>Movements</span>
189
+ </a>
190
+ </li>
191
+ <li id="adminSection">
192
+ <div class="mt-6 pt-4 border-t border-gray-700">
193
+ <p class="text-xs uppercase text-gray-400 mb-2">Admin Tools</p>
194
+ <ul class="space-y-2">
195
+ <li>
196
+ <a href="#" data-cmd="CMD-USRMGMT" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700">
197
+ <i class="fas fa-users-cog text-blue-400"></i>
198
+ <span>User Management</span>
199
+ </a>
200
+ </li>
201
+ <li>
202
+ <a href="#" data-cmd="CMD-ADMTOOL-SET" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700">
203
+ <i class="fas fa-cog text-blue-400"></i>
204
+ <span>Settings</span>
205
+ </a>
206
+ </li>
207
+ <li>
208
+ <a href="#" data-cmd="CMD-ADMTOOL-ROLE" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700">
209
+ <i class="fas fa-user-shield text-blue-400"></i>
210
+ <span>Manage Roles</span>
211
+ </a>
212
+ </li>
213
+ <li>
214
+ <a href="#" data-cmd="CMD-RPRT" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700">
215
+ <i class="fas fa-chart-line text-blue-400"></i>
216
+ <span>Reports</span>
217
+ </a>
218
+ </li>
219
+ <li>
220
+ <a href="#" data-cmd="CMD-RPRT-EXP" class="flex items-center space-x-3 p-2 rounded-md hover:bg-gray-700">
221
+ <i class="fas fa-file-export text-blue-400"></i>
222
+ <span>Export Reports</span>
223
+ </a>
224
+ </li>
225
+ </ul>
226
+ </div>
227
+ </li>
228
+ </ul>
229
+ </nav>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Admin Approval Section (hidden by default) -->
234
+ <div id="adminApprovalSection" class="hidden ml-0 lg:ml-64 p-4">
235
+ <div class="bg-white rounded-lg shadow-sm p-4">
236
+ <h2 class="text-xl font-semibold mb-4">Pending Approvals</h2>
237
+ <div class="overflow-x-auto">
238
+ <table class="min-w-full divide-y divide-gray-200">
239
+ <thead class="bg-gray-50">
240
+ <tr>
241
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
242
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Phone</th>
243
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Requested Role</th>
244
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
245
+ </tr>
246
+ </thead>
247
+ <tbody class="bg-white divide-y divide-gray-200">
248
+ <tr>
249
+ <td class="px-4 py-2 whitespace-nowrap text-sm">John Doe</td>
250
+ <td class="px-4 py-2 whitespace-nowrap text-sm">+1234567890</td>
251
+ <td class="px-4 py-2 whitespace-nowrap text-sm">Admin</td>
252
+ <td class="px-4 py-2 whitespace-nowrap">
253
+ <button class="text-green-600 hover:text-green-800 mr-2">Approve</button>
254
+ <button class="text-red-600 hover:text-red-800">Reject</button>
255
+ </td>
256
+ </tr>
257
+ </tbody>
258
+ </table>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Main Content -->
264
+ <div class="ml-0 lg:ml-64 transition-all duration-300">
265
+ <header class="bg-primary text-white">
266
+ <div class="px-6 py-3 flex justify-between items-center">
267
+ <h2 class="text-lg font-semibold">Dashboard</h2>
268
+ <div class="flex items-center space-x-4">
269
+ <div class="relative">
270
+ <button class="p-2 rounded-full hover:bg-secondary">
271
+ <i class="fas fa-bell"></i>
272
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
273
+ </button>
274
+ </div>
275
+ <button id="logoutBtn" class="px-3 py-1 bg-secondary rounded-md text-sm hover:bg-blue-900">
276
+ Logout
277
+ </button>
278
+ </div>
279
+ </div>
280
+ </header>
281
+
282
+ <main class="p-4">
283
+ <!-- Dashboard Cards -->
284
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
285
+ <div class="dashboard-card bg-gray-800 text-white p-4 rounded-lg shadow-sm border-l-4 border-accent transition duration-300">
286
+ <div class="flex justify-between items-start">
287
+ <div>
288
+ <p class="text-xs text-gray-300 uppercase tracking-wider">Active Machines</p>
289
+ <h3 class="text-2xl font-bold mt-1">24</h3>
290
+ </div>
291
+ <div class="p-2 bg-gray-700 rounded-md">
292
+ <i class="fas fa-cogs text-accent"></i>
293
+ </div>
294
+ </div>
295
+ <div class="mt-2 text-xs text-gray-400">
296
+ <span class="text-green-400">+2</span> from last week
297
+ </div>
298
+ </div>
299
+
300
+ <div class="dashboard-card bg-white p-4 rounded-lg shadow-sm border-l-4 border-green-500 transition duration-300">
301
+ <div class="flex justify-between items-start">
302
+ <div>
303
+ <p class="text-sm text-gray-500">Inventory Items</p>
304
+ <h3 class="text-2xl font-bold">187</h3>
305
+ </div>
306
+ <div class="p-2 bg-green-100 rounded-md">
307
+ <i class="fas fa-boxes text-green-500"></i>
308
+ </div>
309
+ </div>
310
+ <div class="mt-2 text-xs text-gray-500">
311
+ <span class="text-red-500">-5</span> from last week
312
+ </div>
313
+ </div>
314
+
315
+ <div class="dashboard-card bg-white p-4 rounded-lg shadow-sm border-l-4 border-yellow-500 transition duration-300">
316
+ <div class="flex justify-between items-start">
317
+ <div>
318
+ <p class="text-sm text-gray-500">Open Tasks</p>
319
+ <h3 class="text-2xl font-bold">8</h3>
320
+ </div>
321
+ <div class="p-2 bg-yellow-100 rounded-md">
322
+ <i class="fas fa-tasks text-yellow-500"></i>
323
+ </div>
324
+ </div>
325
+ <div class="mt-2 text-xs text-gray-500">
326
+ <span class="text-green-500">-3</span> from last week
327
+ </div>
328
+ </div>
329
+
330
+ <div class="dashboard-card bg-white p-4 rounded-lg shadow-sm border-l-4 border-red-500 transition duration-300">
331
+ <div class="flex justify-between items-start">
332
+ <div>
333
+ <p class="text-sm text-gray-500">Problem Reports</p>
334
+ <h3 class="text-2xl font-bold">5</h3>
335
+ </div>
336
+ <div class="p-2 bg-red-100 rounded-md">
337
+ <i class="fas fa-exclamation-triangle text-red-500"></i>
338
+ </div>
339
+ </div>
340
+ <div class="mt-2 text-xs text-gray-500">
341
+ <span class="text-green-500">-1</span> from last week
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Recent Activity and Machine Status -->
347
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
348
+ <!-- Recent Activity -->
349
+ <div class="lg:col-span-2 bg-white p-4 rounded-lg shadow-sm">
350
+ <div class="flex justify-between items-center mb-4">
351
+ <h3 class="font-semibold text-gray-800">Recent Activity</h3>
352
+ <button class="text-sm text-blue-500 hover:text-blue-700">View All</button>
353
+ </div>
354
+ <div class="space-y-4">
355
+ <div class="flex items-start space-x-3 p-3 hover:bg-gray-800 rounded-lg transition">
356
+ <div class="p-2 bg-gray-700 rounded-full">
357
+ <i class="fas fa-exchange-alt text-accent text-sm"></i>
358
+ </div>
359
+ <div>
360
+ <p class="text-sm font-medium text-white">Machine #DR-245 moved to Site B</p>
361
+ <p class="text-xs text-gray-400">10 minutes ago by John Doe</p>
362
+ </div>
363
+ </div>
364
+ <div class="flex items-start space-x-3">
365
+ <div class="p-2 bg-green-100 rounded-full">
366
+ <i class="fas fa-check-circle text-green-500 text-sm"></i>
367
+ </div>
368
+ <div>
369
+ <p class="text-sm font-medium">Task #T-104 completed</p>
370
+ <p class="text-xs text-gray-500">45 minutes ago by Admin</p>
371
+ </div>
372
+ </div>
373
+ <div class="flex items-start space-x-3">
374
+ <div class="p-2 bg-red-100 rounded-full">
375
+ <i class="fas fa-exclamation-triangle text-red-500 text-sm"></i>
376
+ </div>
377
+ <div>
378
+ <p class="text-sm font-medium">New problem reported for Machine #DR-112</p>
379
+ <p class="text-xs text-gray-500">2 hours ago by Site Worker</p>
380
+ </div>
381
+ </div>
382
+ <div class="flex items-start space-x-3">
383
+ <div class="p-2 bg-purple-100 rounded-full">
384
+ <i class="fas fa-box text-purple-500 text-sm"></i>
385
+ </div>
386
+ <div>
387
+ <p class="text-sm font-medium">Inventory updated: 10 Drill Bits added</p>
388
+ <p class="text-xs text-gray-500">5 hours ago by Warehouse</p>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Machine Status -->
395
+ <div class="bg-white p-4 rounded-lg shadow-sm">
396
+ <div class="flex justify-between items-center mb-4">
397
+ <h3 class="font-semibold text-gray-800">Machine Status</h3>
398
+ <button class="text-sm text-blue-500 hover:text-blue-700">View All</button>
399
+ </div>
400
+ <div class="space-y-3">
401
+ <div class="flex items-center justify-between">
402
+ <div class="flex items-center space-x-2">
403
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
404
+ <span class="text-sm">Operational</span>
405
+ </div>
406
+ <span class="text-sm font-medium">18</span>
407
+ </div>
408
+ <div class="flex items-center justify-between">
409
+ <div class="flex items-center space-x-2">
410
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
411
+ <span class="text-sm">Maintenance</span>
412
+ </div>
413
+ <span class="text-sm font-medium">3</span>
414
+ </div>
415
+ <div class="flex items-center justify-between">
416
+ <div class="flex items-center space-x-2">
417
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
418
+ <span class="text-sm">Out of Service</span>
419
+ </div>
420
+ <span class="text-sm font-medium">2</span>
421
+ </div>
422
+ <div class="flex items-center justify-between">
423
+ <div class="flex items-center space-x-2">
424
+ <div class="w-3 h-3 rounded-full bg-blue-500"></div>
425
+ <span class="text-sm">On Site</span>
426
+ </div>
427
+ <span class="text-sm font-medium">14</span>
428
+ </div>
429
+ </div>
430
+
431
+ <div class="mt-6">
432
+ <h4 class="text-sm font-medium mb-2">Quick Actions</h4>
433
+ <div class="grid grid-cols-2 gap-2">
434
+ <button data-action="add-machine" class="bg-blue-50 text-blue-600 text-xs py-2 px-3 rounded hover:bg-blue-100">
435
+ <i class="fas fa-plus mr-1"></i> Add Machine
436
+ </button>
437
+ <button data-cmd="CMD-TASK-ASSIGN" class="bg-green-50 text-green-600 text-xs py-2 px-3 rounded hover:bg-green-100">
438
+ <i class="fas fa-tasks mr-1"></i> Create Task
439
+ </button>
440
+ <button data-cmd="CMD-INVT-SEND" class="bg-purple-50 text-purple-600 text-xs py-2 px-3 rounded hover:bg-purple-100">
441
+ <i class="fas fa-box mr-1"></i> Add Inventory
442
+ </button>
443
+ <button data-action="report-problem" class="bg-red-50 text-red-600 text-xs py-2 px-3 rounded hover:bg-red-100">
444
+ <i class="fas fa-exclamation mr-1"></i> Report Problem
445
+ </button>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <!-- Recent Machines and Tasks -->
452
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
453
+ <!-- Recent Machines -->
454
+ <div class="bg-white p-4 rounded-lg shadow-sm">
455
+ <div class="flex justify-between items-center mb-4">
456
+ <h3 class="font-semibold text-gray-800">Recent Machines</h3>
457
+ <button class="text-sm text-blue-500 hover:text-blue-700">View All</button>
458
+ </div>
459
+ <div class="overflow-x-auto">
460
+ <table class="min-w-full divide-y divide-gray-200">
461
+ <thead class="bg-gray-50">
462
+ <tr>
463
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
464
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
465
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Location</th>
466
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
467
+ </tr>
468
+ </thead>
469
+ <tbody class="bg-white divide-y divide-gray-200">
470
+ <tr>
471
+ <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">DR-245</td>
472
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Rotary Drill</td>
473
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Site B</td>
474
+ <td class="px-4 py-2 whitespace-nowrap">
475
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Operational</span>
476
+ </td>
477
+ </tr>
478
+ <tr>
479
+ <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">DR-112</td>
480
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Percussion Drill</td>
481
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Warehouse</td>
482
+ <td class="px-4 py-2 whitespace-nowrap">
483
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Out of Service</span>
484
+ </td>
485
+ </tr>
486
+ <tr>
487
+ <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">DR-301</td>
488
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Core Drill</td>
489
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Site A</td>
490
+ <td class="px-4 py-2 whitespace-nowrap">
491
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">On Site</span>
492
+ </td>
493
+ </tr>
494
+ <tr>
495
+ <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">DR-178</td>
496
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Rotary Drill</td>
497
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Maintenance</td>
498
+ <td class="px-4 py-2 whitespace-nowrap">
499
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Maintenance</span>
500
+ </td>
501
+ </tr>
502
+ </tbody>
503
+ </table>
504
+ </div>
505
+ </div>
506
+
507
+ <!-- Recent Tasks -->
508
+ <div class="bg-white p-4 rounded-lg shadow-sm">
509
+ <div class="flex justify-between items-center mb-4">
510
+ <h3 class="font-semibold text-gray-800">Recent Tasks</h3>
511
+ <button class="text-sm text-blue-500 hover:text-blue-700">View All</button>
512
+ </div>
513
+ <div class="space-y-4">
514
+ <div class="border-l-4 border-blue-500 pl-3 py-1">
515
+ <div class="flex justify-between items-start">
516
+ <div>
517
+ <p class="font-medium text-sm">Inspect Machine #DR-112</p>
518
+ <p class="text-xs text-gray-500">Assigned to: Maintenance Team</p>
519
+ </div>
520
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">In Progress</span>
521
+ </div>
522
+ <p class="text-xs mt-1 text-gray-600">Due: Today, 5:00 PM</p>
523
+ </div>
524
+ <div class="border-l-4 border-green-500 pl-3 py-1">
525
+ <div class="flex justify-between items-start">
526
+ <div>
527
+ <p class="font-medium text-sm">Deliver Drill Bits to Site C</p>
528
+ <p class="text-xs text-gray-500">Assigned to: Logistics</p>
529
+ </div>
530
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span>
531
+ </div>
532
+ <p class="text-xs mt-1 text-gray-600">Completed: Today, 10:30 AM</p>
533
+ </div>
534
+ <div class="border-l-4 border-yellow-500 pl-3 py-1">
535
+ <div class="flex justify-between items-start">
536
+ <div>
537
+ <p class="font-medium text-sm">Annual Maintenance #DR-245</p>
538
+ <p class="text-xs text-gray-500">Assigned to: Tech Team</p>
539
+ </div>
540
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Pending</span>
541
+ </div>
542
+ <p class="text-xs mt-1 text-gray-600">Due: Tomorrow, 9:00 AM</p>
543
+ </div>
544
+ <div class="border-l-4 border-red-500 pl-3 py-1">
545
+ <div class="flex justify-between items-start">
546
+ <div>
547
+ <p class="font-medium text-sm">Fix Hydraulic Issue #DR-178</p>
548
+ <p class="text-xs text-gray-500">Assigned to: Specialist</p>
549
+ </div>
550
+ <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">Overdue</span>
551
+ </div>
552
+ <p class="text-xs mt-1 text-gray-600">Due: Yesterday, 3:00 PM</p>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ </main>
558
+ </div>
559
+
560
+ <!-- Section Content Containers -->
561
+ <div id="dashboardContent" class="ml-0 lg:ml-64 hidden">
562
+ <!-- Dashboard content will go here -->
563
+ </div>
564
+
565
+ <div id="machinesContent" class="ml-0 lg:ml-64 hidden">
566
+ <!-- Machines content will go here -->
567
+ </div>
568
+
569
+ <div id="inventoryContent" class="ml-0 lg:ml-64 hidden">
570
+ <header class="bg-white shadow-sm">
571
+ <div class="px-4 py-3 flex justify-between items-center">
572
+ <h2 class="text-xl font-semibold text-gray-800">Inventory Management</h2>
573
+ <button class="px-3 py-1 bg-blue-600 rounded-md text-sm text-white hover:bg-blue-700">
574
+ Add Item
575
+ </button>
576
+ </div>
577
+ </header>
578
+
579
+ <main class="p-4">
580
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
581
+ <table class="min-w-full divide-y divide-gray-200">
582
+ <thead class="bg-gray-50">
583
+ <tr>
584
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Item ID</th>
585
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
586
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Category</th>
587
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Quantity</th>
588
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Location</th>
589
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
590
+ </tr>
591
+ </thead>
592
+ <tbody class="bg-white divide-y divide-gray-200">
593
+ <tr>
594
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INV-1001</td>
595
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Drill Bit 5"</td>
596
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Drill Components</td>
597
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">24</td>
598
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse A</td>
599
+ <td class="px-6 py-4 whitespace-nowrap">
600
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">In Stock</span>
601
+ </td>
602
+ </tr>
603
+ <tr>
604
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INV-1002</td>
605
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Hydraulic Hose</td>
606
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Hydraulics</td>
607
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12</td>
608
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Site B</td>
609
+ <td class="px-6 py-4 whitespace-nowrap">
610
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Low Stock</span>
611
+ </td>
612
+ </tr>
613
+ <tr>
614
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INV-1003</td>
615
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Engine Oil 5W-30</td>
616
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lubricants</td>
617
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td>
618
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Maintenance</td>
619
+ <td class="px-6 py-4 whitespace-nowrap">
620
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Reorder</span>
621
+ </td>
622
+ </tr>
623
+ </tbody>
624
+ </table>
625
+ </div>
626
+ </main>
627
+ </div>
628
+
629
+ <div id="tasksContent" class="ml-0 lg:ml-64 hidden">
630
+ <!-- Tasks content will go here -->
631
+ </div>
632
+
633
+ <div id="locationsContent" class="ml-0 lg:ml-64 hidden">
634
+ <!-- Locations content will go here -->
635
+ </div>
636
+
637
+ <div id="problemReportsContent" class="ml-0 lg:ml-64 hidden">
638
+ <!-- Problem Reports content will go here -->
639
+ </div>
640
+
641
+ <div id="movementsContent" class="ml-0 lg:ml-64 hidden">
642
+ <!-- Movements content will go here -->
643
+ </div>
644
+
645
+ <div id="userManagementContent" class="ml-0 lg:ml-64 hidden">
646
+ <!-- User Management content will go here -->
647
+ </div>
648
+
649
+ <div id="reportsContent" class="ml-0 lg:ml-64 hidden">
650
+ <!-- Reports content will go here -->
651
+ </div>
652
+
653
+ <!-- Add Machine Modal -->
654
+ <div id="addMachineModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
655
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
656
+ <div class="flex justify-between items-center border-b px-6 py-4">
657
+ <h3 class="text-lg font-semibold">Add New Machine</h3>
658
+ <button id="closeMachineModal" class="text-gray-500 hover:text-gray-700">
659
+ <i class="fas fa-times"></i>
660
+ </button>
661
+ </div>
662
+ <div class="p-6">
663
+ <form>
664
+ <div class="mb-4">
665
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="machineId">Machine ID</label>
666
+ <input type="text" id="machineId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
667
+ </div>
668
+ <div class="mb-4">
669
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="machineType">Type</label>
670
+ <select id="machineType" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
671
+ <option>Rotary Drill</option>
672
+ <option>Percussion Drill</option>
673
+ <option>Core Drill</option>
674
+ <option>Diamond Drill</option>
675
+ </select>
676
+ </div>
677
+ <div class="mb-4">
678
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="machineLocation">Location</label>
679
+ <select id="machineLocation" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
680
+ <option>Warehouse</option>
681
+ <option>Site A</option>
682
+ <option>Site B</option>
683
+ <option>Site C</option>
684
+ <option>Maintenance</option>
685
+ </select>
686
+ </div>
687
+ <div class="mb-4">
688
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="machineStatus">Status</label>
689
+ <select id="machineStatus" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
690
+ <option>Operational</option>
691
+ <option>Maintenance</option>
692
+ <option>Out of Service</option>
693
+ <option>On Site</option>
694
+ </select>
695
+ </div>
696
+ <div class="flex justify-end space-x-3 mt-6">
697
+ <button type="button" id="cancelMachine" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
698
+ <button type="submit" class="px-4 py-2 bg-blue-600 rounded-md text-sm font-medium text-white hover:bg-blue-700">Add Machine</button>
699
+ </div>
700
+ </form>
701
+ </div>
702
+ </div>
703
+ </div>
704
+
705
+ <!-- Report Problem Modal -->
706
+ <div id="reportProblemModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
707
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
708
+ <div class="flex justify-between items-center border-b px-6 py-4">
709
+ <h3 class="text-lg font-semibold">Report Problem</h3>
710
+ <button id="closeProblemModal" class="text-gray-500 hover:text-gray-700">
711
+ <i class="fas fa-times"></i>
712
+ </button>
713
+ </div>
714
+ <div class="p-6">
715
+ <form>
716
+ <div class="mb-4">
717
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="problemMachine">Machine</label>
718
+ <select id="problemMachine" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
719
+ <option>Select Machine</option>
720
+ <option>DR-245 (Rotary Drill)</option>
721
+ <option>DR-112 (Percussion Drill)</option>
722
+ <option>DR-301 (Core Drill)</option>
723
+ <option>DR-178 (Rotary Drill)</option>
724
+ </select>
725
+ </div>
726
+ <div class="mb-4">
727
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="problemType">Problem Type</label>
728
+ <select id="problemType" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
729
+ <option>Mechanical Issue</option>
730
+ <option>Electrical Issue</option>
731
+ <option>Hydraulic Failure</option>
732
+ <option>Other</option>
733
+ </select>
734
+ </div>
735
+ <div class="mb-4">
736
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="problemDescription">Description</label>
737
+ <textarea id="problemDescription" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
738
+ </div>
739
+ <div class="mb-4">
740
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="problemUrgency">Urgency</label>
741
+ <select id="problemUrgency" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
742
+ <option>Low</option>
743
+ <option>Medium</option>
744
+ <option>High</option>
745
+ <option>Critical</option>
746
+ </select>
747
+ </div>
748
+ <div class="flex justify-end space-x-3 mt-6">
749
+ <button type="button" id="cancelProblem" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
750
+ <button type="submit" class="px-4 py-2 bg-red-600 rounded-md text-sm font-medium text-white hover:bg-red-700">Report Problem</button>
751
+ </div>
752
+ </form>
753
+ </div>
754
+ </div>
755
+ </div>
756
+
757
+ <script>
758
+ // Auth Flow
759
+ document.getElementById('showSignup').addEventListener('click', function() {
760
+ document.getElementById('loginForm').classList.add('hidden');
761
+ document.getElementById('signupForm').classList.remove('hidden');
762
+ });
763
+
764
+ document.getElementById('showLogin').addEventListener('click', function() {
765
+ document.getElementById('signupForm').classList.add('hidden');
766
+ document.getElementById('loginForm').classList.remove('hidden');
767
+ });
768
+
769
+ document.getElementById('backToLogin').addEventListener('click', function() {
770
+ document.getElementById('approvalPending').classList.add('hidden');
771
+ document.getElementById('loginForm').classList.remove('hidden');
772
+ });
773
+
774
+ // Handle form submissions
775
+ document.querySelector('#signupForm form').addEventListener('submit', function(e) {
776
+ e.preventDefault();
777
+ const name = document.getElementById('signupName').value.trim();
778
+ const email = document.getElementById('signupEmail').value.trim();
779
+ const password = document.getElementById('signupPassword').value;
780
+
781
+ if (!name || !email || !password) {
782
+ alert('Please fill all required fields');
783
+ return;
784
+ }
785
+
786
+ if (password.length < 8) {
787
+ alert('Password must be at least 8 characters');
788
+ return;
789
+ }
790
+
791
+ document.getElementById('signupForm').classList.add('hidden');
792
+ document.getElementById('approvalPending').classList.remove('hidden');
793
+ // In real app, send data to server
794
+ });
795
+
796
+ document.querySelector('#loginForm form').addEventListener('submit', function(e) {
797
+ e.preventDefault();
798
+ const username = document.getElementById('loginUsername').value.trim();
799
+ const password = document.getElementById('loginPassword').value;
800
+
801
+ if (!username || !password) {
802
+ alert('Please enter both username and password');
803
+ return;
804
+ }
805
+
806
+ // In real app, validate credentials with server
807
+ document.getElementById('authContainer').classList.add('hidden');
808
+ });
809
+
810
+ // Navigation
811
+ function navigateTo(path) {
812
+ // In a SPA, this would load the appropriate component
813
+ console.log('Navigating to:', path);
814
+ // For demo, just highlight the active menu item
815
+ document.querySelectorAll('nav a').forEach(link => {
816
+ link.classList.remove('bg-gray-700');
817
+ if (link.getAttribute('href') === path) {
818
+ link.classList.add('bg-gray-700');
819
+ }
820
+ });
821
+ }
822
+
823
+ // Set up navigation
824
+ document.querySelectorAll('nav a').forEach(link => {
825
+ link.addEventListener('click', function(e) {
826
+ e.preventDefault();
827
+ const cmd = this.getAttribute('data-cmd');
828
+
829
+ // Hide all content sections
830
+ document.querySelectorAll('[id$="Content"]').forEach(section => {
831
+ section.classList.add('hidden');
832
+ });
833
+
834
+ // Handle different commands
835
+ switch(cmd) {
836
+ case 'CMD-DASH':
837
+ document.querySelector('.ml-0').classList.remove('hidden');
838
+ break;
839
+ case 'CMD-MACH':
840
+ case 'CMD-MACH-PROF':
841
+ document.getElementById('machinesContent').classList.remove('hidden');
842
+ break;
843
+ case 'CMD-MACH-PROB':
844
+ openModal('reportProblemModal');
845
+ break;
846
+ case 'CMD-INVT':
847
+ case 'CMD-INVT-SEND':
848
+ case 'CMD-INVT-RETURN':
849
+ document.getElementById('inventoryContent').classList.remove('hidden');
850
+ break;
851
+ case 'CMD-TASK':
852
+ case 'CMD-TASK-ASSIGN':
853
+ document.getElementById('tasksContent').classList.remove('hidden');
854
+ break;
855
+ case 'CMD-LOC':
856
+ case 'CMD-LOC-ASSIGN':
857
+ document.getElementById('locationsContent').classList.remove('hidden');
858
+ break;
859
+ case 'CMD-PROB':
860
+ case 'CMD-PROB-CLOSE':
861
+ document.getElementById('problemReportsContent').classList.remove('hidden');
862
+ break;
863
+ case 'CMD-MOV':
864
+ case 'CMD-MOV-TRACK':
865
+ document.getElementById('movementsContent').classList.remove('hidden');
866
+ break;
867
+ case 'CMD-USRMGMT':
868
+ case 'CMD-USRMGMT-APP':
869
+ document.getElementById('userManagementContent').classList.remove('hidden');
870
+ break;
871
+ case 'CMD-RPRT':
872
+ case 'CMD-RPRT-EXP':
873
+ document.getElementById('reportsContent').classList.remove('hidden');
874
+ break;
875
+ case 'CMD-ADMTOOL-SET':
876
+ case 'CMD-ADMTOOL-ROLE':
877
+ // For demo, just show admin approval section
878
+ document.getElementById('adminApprovalSection').classList.remove('hidden');
879
+ break;
880
+ }
881
+
882
+ // Update active menu item
883
+ document.querySelectorAll('nav a').forEach(navLink => {
884
+ navLink.classList.remove('bg-gray-700');
885
+ });
886
+ this.classList.add('bg-gray-700');
887
+ });
888
+ });
889
+
890
+ // Toggle sidebar on mobile
891
+ document.getElementById('menuToggle').addEventListener('click', function() {
892
+ document.getElementById('sidebar').classList.toggle('active');
893
+ });
894
+
895
+ // Close modals
896
+ function closeModal(modalId) {
897
+ document.getElementById(modalId).classList.add('hidden');
898
+ }
899
+
900
+ // Open modals
901
+ function openModal(modalId) {
902
+ document.getElementById(modalId).classList.remove('hidden');
903
+ }
904
+
905
+ // Event listeners for modals
906
+ document.getElementById('closeMachineModal').addEventListener('click', function() {
907
+ closeModal('addMachineModal');
908
+ });
909
+
910
+ document.getElementById('cancelMachine').addEventListener('click', function() {
911
+ closeModal('addMachineModal');
912
+ });
913
+
914
+ document.getElementById('closeProblemModal').addEventListener('click', function() {
915
+ closeModal('reportProblemModal');
916
+ });
917
+
918
+ document.getElementById('cancelProblem').addEventListener('click', function() {
919
+ closeModal('reportProblemModal');
920
+ });
921
+
922
+ // Quick action buttons
923
+ document.querySelectorAll('.quick-action').forEach(button => {
924
+ button.addEventListener('click', function() {
925
+ const action = this.getAttribute('data-action');
926
+ if (action === 'add-machine') {
927
+ openModal('addMachineModal');
928
+ } else if (action === 'report-problem') {
929
+ openModal('reportProblemModal');
930
+ }
931
+ });
932
+ });
933
+
934
+ // Simulate user role (Admin/Normal User)
935
+ function setUserRole(isAdmin) {
936
+ const userRole = document.getElementById('userRole');
937
+ const adminSection = document.getElementById('adminSection');
938
+ const adminApprovalSection = document.getElementById('adminApprovalSection');
939
+
940
+ if (isAdmin) {
941
+ userRole.textContent = 'Administrator';
942
+ adminSection.style.display = 'block';
943
+ adminApprovalSection.classList.remove('hidden');
944
+ } else {
945
+ userRole.textContent = 'Normal User';
946
+ adminSection.style.display = 'none';
947
+ adminApprovalSection.classList.add('hidden');
948
+ }
949
+ }
950
+
951
+ // Toggle user role for demo purposes
952
+ document.getElementById('logoutBtn').addEventListener('click', function() {
953
+ const currentRole = document.getElementById('userRole').textContent;
954
+ const isAdmin = currentRole === 'Normal User'; // Toggle for demo
955
+
956
+ setUserRole(isAdmin);
957
+ document.getElementById('userName').textContent = isAdmin ? 'Admin User' : 'Normal User';
958
+ document.getElementById('userInitial').textContent = isAdmin ? 'A' : 'U';
959
+
960
+ // Show notification
961
+ alert(`Logged in as ${isAdmin ? 'Administrator' : 'Normal User'}`);
962
+ });
963
+
964
+ // Initialize as Admin
965
+ setUserRole(true);
966
+ </script>
967
+ <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=wajdi22/civissol" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
968
+ </html>