Hugging Face's logo

Spaces:
Umang8896
/
usfl
Running

App Files Community
Umang8896 commited on
Commit
92c866d
·
verified ·
1 Parent(s): 0a7d787

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +563 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Usfl
3
- emoji: 💻
4
- colorFrom: gray
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: usfl
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: red
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,563 @@
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>SwiftHaul TMS - Trucking Management 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
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .sidebar.collapsed {
14
+ width: 70px;
15
+ }
16
+ .sidebar.collapsed .sidebar-text {
17
+ display: none;
18
+ }
19
+ .sidebar.collapsed .logo-text {
20
+ display: none;
21
+ }
22
+ .sidebar.collapsed .nav-item {
23
+ justify-content: center;
24
+ }
25
+ .main-content {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .sidebar.collapsed + .main-content {
29
+ margin-left: 70px;
30
+ }
31
+ .map-container {
32
+ height: 400px;
33
+ background-color: #e5e7eb;
34
+ position: relative;
35
+ overflow: hidden;
36
+ }
37
+ .map-placeholder {
38
+ position: absolute;
39
+ top: 50%;
40
+ left: 50%;
41
+ transform: translate(-50%, -50%);
42
+ text-align: center;
43
+ color: #6b7280;
44
+ }
45
+ .driver-status-active {
46
+ background-color: #d1fae5;
47
+ color: #065f46;
48
+ }
49
+ .driver-status-inactive {
50
+ background-color: #fee2e2;
51
+ color: #b91c1c;
52
+ }
53
+ .driver-status-available {
54
+ background-color: #dbeafe;
55
+ color: #1e40af;
56
+ }
57
+ .load-status-pending {
58
+ background-color: #fef3c7;
59
+ color: #92400e;
60
+ }
61
+ .load-status-in-progress {
62
+ background-color: #bfdbfe;
63
+ color: #1e40af;
64
+ }
65
+ .load-status-completed {
66
+ background-color: #d1fae5;
67
+ color: #065f46;
68
+ }
69
+ .load-status-cancelled {
70
+ background-color: #f3f4f6;
71
+ color: #6b7280;
72
+ }
73
+ .animate-pulse {
74
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
75
+ }
76
+ @keyframes pulse {
77
+ 0%, 100% {
78
+ opacity: 1;
79
+ }
80
+ 50% {
81
+ opacity: 0.5;
82
+ }
83
+ }
84
+ </style>
85
+ </head>
86
+ <body class="bg-gray-50">
87
+ <div class="flex h-screen overflow-hidden">
88
+ <!-- Sidebar -->
89
+ <div class="sidebar bg-blue-800 text-white w-64 flex flex-col">
90
+ <div class="p-4 flex items-center space-x-2 border-b border-blue-700">
91
+ <div class="bg-white p-2 rounded-lg">
92
+ <i class="fas fa-truck text-blue-800 text-xl"></i>
93
+ </div>
94
+ <span class="logo-text text-xl font-bold">SwiftHaul TMS</span>
95
+ </div>
96
+ <div class="p-4 border-b border-blue-700 flex items-center space-x-4">
97
+ <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
98
+ <i class="fas fa-user text-white"></i>
99
+ </div>
100
+ <div class="sidebar-text">
101
+ <div class="font-medium">Admin User</div>
102
+ <div class="text-xs text-blue-200">Administrator</div>
103
+ </div>
104
+ </div>
105
+ <nav class="flex-1 overflow-y-auto p-4 space-y-2">
106
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg bg-blue-700">
107
+ <i class="fas fa-tachometer-alt w-6 text-center"></i>
108
+ <span class="sidebar-text">Dashboard</span>
109
+ </a>
110
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700">
111
+ <i class="fas fa-truck-loading w-6 text-center"></i>
112
+ <span class="sidebar-text">Load Management</span>
113
+ </a>
114
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700">
115
+ <i class="fas fa-users w-6 text-center"></i>
116
+ <span class="sidebar-text">Drivers</span>
117
+ </a>
118
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700">
119
+ <i class="fas fa-trailer w-6 text-center"></i>
120
+ <span class="sidebar-text">Equipment</span>
121
+ </a>
122
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700">
123
+ <i class="fas fa-map-marked-alt w-6 text-center"></i>
124
+ <span class="sidebar-text">Dispatch</span>
125
+ </a>
126
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700">
127
+ <i class="fas fa-file-invoice-dollar w-6 text-center"></i>
128
+ <span class="sidebar-text">Invoicing</span>
129
+ </a>
130
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700">
131
+ <i class="fas fa-chart-line w-6 text-center"></i>
132
+ <span class="sidebar-text">Reports</span>
133
+ </a>
134
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700">
135
+ <i class="fas fa-cog w-6 text-center"></i>
136
+ <span class="sidebar-text">Settings</span>
137
+ </a>
138
+ </nav>
139
+ <div class="p-4 border-t border-blue-700">
140
+ <button onclick="toggleSidebar()" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-blue-700 w-full">
141
+ <i class="fas fa-chevron-left w-6 text-center"></i>
142
+ <span class="sidebar-text">Collapse Menu</span>
143
+ </button>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Main Content -->
148
+ <div class="main-content flex-1 flex flex-col overflow-hidden ml-64">
149
+ <!-- Top Navigation -->
150
+ <header class="bg-white shadow-sm p-4 flex items-center justify-between">
151
+ <div class="flex items-center space-x-4">
152
+ <h1 class="text-xl font-semibold text-gray-800">Dashboard Overview</h1>
153
+ </div>
154
+ <div class="flex items-center space-x-4">
155
+ <div class="relative">
156
+ <i class="fas fa-bell text-gray-500 hover:text-blue-600 cursor-pointer"></i>
157
+ <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
158
+ </div>
159
+ <div class="relative">
160
+ <i class="fas fa-envelope text-gray-500 hover:text-blue-600 cursor-pointer"></i>
161
+ <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
162
+ </div>
163
+ <div class="flex items-center space-x-2">
164
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
165
+ <i class="fas fa-user text-blue-600"></i>
166
+ </div>
167
+ <span class="text-sm font-medium">Admin</span>
168
+ </div>
169
+ </div>
170
+ </header>
171
+
172
+ <!-- Main Content Area -->
173
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
174
+ <!-- Stats Cards -->
175
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
176
+ <div class="bg-white rounded-lg shadow p-6">
177
+ <div class="flex items-center justify-between">
178
+ <div>
179
+ <p class="text-gray-500 text-sm">Active Loads</p>
180
+ <h3 class="text-2xl font-bold">24</h3>
181
+ </div>
182
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
183
+ <i class="fas fa-truck-loading text-xl"></i>
184
+ </div>
185
+ </div>
186
+ <div class="mt-4">
187
+ <span class="text-green-500 text-sm font-medium">+12% from last week</span>
188
+ </div>
189
+ </div>
190
+ <div class="bg-white rounded-lg shadow p-6">
191
+ <div class="flex items-center justify-between">
192
+ <div>
193
+ <p class="text-gray-500 text-sm">Available Drivers</p>
194
+ <h3 class="text-2xl font-bold">8</h3>
195
+ </div>
196
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
197
+ <i class="fas fa-users text-xl"></i>
198
+ </div>
199
+ </div>
200
+ <div class="mt-4">
201
+ <span class="text-red-500 text-sm font-medium">-2 from yesterday</span>
202
+ </div>
203
+ </div>
204
+ <div class="bg-white rounded-lg shadow p-6">
205
+ <div class="flex items-center justify-between">
206
+ <div>
207
+ <p class="text-gray-500 text-sm">Revenue This Month</p>
208
+ <h3 class="text-2xl font-bold">$124,850</h3>
209
+ </div>
210
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
211
+ <i class="fas fa-dollar-sign text-xl"></i>
212
+ </div>
213
+ </div>
214
+ <div class="mt-4">
215
+ <span class="text-green-500 text-sm font-medium">+8% from last month</span>
216
+ </div>
217
+ </div>
218
+ <div class="bg-white rounded-lg shadow p-6">
219
+ <div class="flex items-center justify-between">
220
+ <div>
221
+ <p class="text-gray-500 text-sm">On-Time Delivery</p>
222
+ <h3 class="text-2xl font-bold">92%</h3>
223
+ </div>
224
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
225
+ <i class="fas fa-clock text-xl"></i>
226
+ </div>
227
+ </div>
228
+ <div class="mt-4">
229
+ <span class="text-green-500 text-sm font-medium">+3% from last month</span>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Map and Recent Activity -->
235
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
236
+ <div class="lg:col-span-2 bg-white rounded-lg shadow">
237
+ <div class="p-4 border-b border-gray-200">
238
+ <h2 class="text-lg font-semibold text-gray-800">Loads Overview Map</h2>
239
+ </div>
240
+ <div class="map-container">
241
+ <div class="map-placeholder">
242
+ <i class="fas fa-map-marked-alt text-5xl mb-4"></i>
243
+ <p>Interactive map would display here</p>
244
+ <p class="text-sm mt-2">Showing active loads and driver locations</p>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ <div class="bg-white rounded-lg shadow">
249
+ <div class="p-4 border-b border-gray-200">
250
+ <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2>
251
+ </div>
252
+ <div class="p-4 space-y-4">
253
+ <div class="flex items-start space-x-3">
254
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600">
255
+ <i class="fas fa-truck"></i>
256
+ </div>
257
+ <div>
258
+ <p class="text-sm font-medium">Load #TRK-2456 assigned to Driver Johnson</p>
259
+ <p class="text-xs text-gray-500">10 minutes ago</p>
260
+ </div>
261
+ </div>
262
+ <div class="flex items-start space-x-3">
263
+ <div class="p-2 rounded-full bg-green-100 text-green-600">
264
+ <i class="fas fa-check-circle"></i>
265
+ </div>
266
+ <div>
267
+ <p class="text-sm font-medium">Load #TRK-2342 delivered successfully</p>
268
+ <p class="text-xs text-gray-500">1 hour ago</p>
269
+ </div>
270
+ </div>
271
+ <div class="flex items-start space-x-3">
272
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600">
273
+ <i class="fas fa-exclamation-triangle"></i>
274
+ </div>
275
+ <div>
276
+ <p class="text-sm font-medium">Delay reported on Load #TRK-2398</p>
277
+ <p class="text-xs text-gray-500">2 hours ago</p>
278
+ </div>
279
+ </div>
280
+ <div class="flex items-start space-x-3">
281
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600">
282
+ <i class="fas fa-file-invoice"></i>
283
+ </div>
284
+ <div>
285
+ <p class="text-sm font-medium">Invoice #INV-5678 sent to customer</p>
286
+ <p class="text-xs text-gray-500">3 hours ago</p>
287
+ </div>
288
+ </div>
289
+ <div class="flex items-start space-x-3">
290
+ <div class="p-2 rounded-full bg-red-100 text-red-600">
291
+ <i class="fas fa-times-circle"></i>
292
+ </div>
293
+ <div>
294
+ <p class="text-sm font-medium">Load #TRK-2312 cancelled by customer</p>
295
+ <p class="text-xs text-gray-500">5 hours ago</p>
296
+ </div>
297
+ </div>
298
+ <div class="text-center pt-2">
299
+ <button class="text-blue-600 text-sm font-medium hover:text-blue-800">
300
+ View All Activity <i class="fas fa-chevron-right ml-1"></i>
301
+ </button>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Active Loads and Drivers -->
308
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
309
+ <!-- Active Loads Table -->
310
+ <div class="bg-white rounded-lg shadow overflow-hidden">
311
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
312
+ <h2 class="text-lg font-semibold text-gray-800">Active Loads</h2>
313
+ <button class="text-blue-600 text-sm font-medium hover:text-blue-800">
314
+ View All <i class="fas fa-chevron-right ml-1"></i>
315
+ </button>
316
+ </div>
317
+ <div class="overflow-x-auto">
318
+ <table class="min-w-full divide-y divide-gray-200">
319
+ <thead class="bg-gray-50">
320
+ <tr>
321
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Load #</th>
322
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Origin</th>
323
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Destination</th>
324
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
325
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Driver</th>
326
+ </tr>
327
+ </thead>
328
+ <tbody class="bg-white divide-y divide-gray-200">
329
+ <tr class="hover:bg-gray-50 cursor-pointer">
330
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TRK-2456</td>
331
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Chicago, IL</td>
332
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dallas, TX</td>
333
+ <td class="px-6 py-4 whitespace-nowrap">
334
+ <span class="px-2 py-1 text-xs rounded-full load-status-in-progress">In Transit</span>
335
+ </td>
336
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">M. Johnson</td>
337
+ </tr>
338
+ <tr class="hover:bg-gray-50 cursor-pointer">
339
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TRK-2455</td>
340
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Atlanta, GA</td>
341
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Denver, CO</td>
342
+ <td class="px-6 py-4 whitespace-nowrap">
343
+ <span class="px-2 py-1 text-xs rounded-full load-status-pending">Pending Pickup</span>
344
+ </td>
345
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R. Williams</td>
346
+ </tr>
347
+ <tr class="hover:bg-gray-50 cursor-pointer">
348
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TRK-2454</td>
349
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Los Angeles, CA</td>
350
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Phoenix, AZ</td>
351
+ <td class="px-6 py-4 whitespace-nowrap">
352
+ <span class="px-2 py-1 text-xs rounded-full load-status-in-progress">In Transit</span>
353
+ </td>
354
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">T. Davis</td>
355
+ </tr>
356
+ <tr class="hover:bg-gray-50 cursor-pointer">
357
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TRK-2453</td>
358
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Houston, TX</td>
359
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Memphis, TN</td>
360
+ <td class="px-6 py-4 whitespace-nowrap">
361
+ <span class="px-2 py-1 text-xs rounded-full load-status-completed">Delivered</span>
362
+ </td>
363
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">J. Smith</td>
364
+ </tr>
365
+ <tr class="hover:bg-gray-50 cursor-pointer">
366
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">TRK-2452</td>
367
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Seattle, WA</td>
368
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Salt Lake City, UT</td>
369
+ <td class="px-6 py-4 whitespace-nowrap">
370
+ <span class="px-2 py-1 text-xs rounded-full load-status-pending">Pending Pickup</span>
371
+ </td>
372
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">A. Brown</td>
373
+ </tr>
374
+ </tbody>
375
+ </table>
376
+ </div>
377
+ </div>
378
+
379
+ <!-- Drivers Status -->
380
+ <div class="bg-white rounded-lg shadow overflow-hidden">
381
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
382
+ <h2 class="text-lg font-semibold text-gray-800">Drivers Status</h2>
383
+ <button class="text-blue-600 text-sm font-medium hover:text-blue-800">
384
+ View All <i class="fas fa-chevron-right ml-1"></i>
385
+ </button>
386
+ </div>
387
+ <div class="overflow-x-auto">
388
+ <table class="min-w-full divide-y divide-gray-200">
389
+ <thead class="bg-gray-50">
390
+ <tr>
391
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Driver</th>
392
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
393
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Location</th>
394
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Load</th>
395
+ </tr>
396
+ </thead>
397
+ <tbody class="bg-white divide-y divide-gray-200">
398
+ <tr class="hover:bg-gray-50 cursor-pointer">
399
+ <td class="px-6 py-4 whitespace-nowrap">
400
+ <div class="flex items-center">
401
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
402
+ <i class="fas fa-user text-blue-600"></i>
403
+ </div>
404
+ <div class="ml-4">
405
+ <div class="text-sm font-medium text-gray-900">Michael Johnson</div>
406
+ <div class="text-sm text-gray-500">Truck #TRK-789</div>
407
+ </div>
408
+ </div>
409
+ </td>
410
+ <td class="px-6 py-4 whitespace-nowrap">
411
+ <span class="px-2 py-1 text-xs rounded-full driver-status-active">On Duty</span>
412
+ </td>
413
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oklahoma City, OK</td>
414
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">TRK-2456</td>
415
+ </tr>
416
+ <tr class="hover:bg-gray-50 cursor-pointer">
417
+ <td class="px-6 py-4 whitespace-nowrap">
418
+ <div class="flex items-center">
419
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
420
+ <i class="fas fa-user text-blue-600"></i>
421
+ </div>
422
+ <div class="ml-4">
423
+ <div class="text-sm font-medium text-gray-900">Robert Williams</div>
424
+ <div class="text-sm text-gray-500">Truck #TRK-456</div>
425
+ </div>
426
+ </div>
427
+ </td>
428
+ <td class="px-6 py-4 whitespace-nowrap">
429
+ <span class="px-2 py-1 text-xs rounded-full driver-status-available">Available</span>
430
+ </td>
431
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Atlanta, GA</td>
432
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">TRK-2455</td>
433
+ </tr>
434
+ <tr class="hover:bg-gray-50 cursor-pointer">
435
+ <td class="px-6 py-4 whitespace-nowrap">
436
+ <div class="flex items-center">
437
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
438
+ <i class="fas fa-user text-blue-600"></i>
439
+ </div>
440
+ <div class="ml-4">
441
+ <div class="text-sm font-medium text-gray-900">Thomas Davis</div>
442
+ <div class="text-sm text-gray-500">Truck #TRK-123</div>
443
+ </div>
444
+ </div>
445
+ </td>
446
+ <td class="px-6 py-4 whitespace-nowrap">
447
+ <span class="px-2 py-1 text-xs rounded-full driver-status-active">On Duty</span>
448
+ </td>
449
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Flagstaff, AZ</td>
450
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">TRK-2454</td>
451
+ </tr>
452
+ <tr class="hover:bg-gray-50 cursor-pointer">
453
+ <td class="px-6 py-4 whitespace-nowrap">
454
+ <div class="flex items-center">
455
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
456
+ <i class="fas fa-user text-blue-600"></i>
457
+ </div>
458
+ <div class="ml-4">
459
+ <div class="text-sm font-medium text-gray-900">Jennifer Smith</div>
460
+ <div class="text-sm text-gray-500">Truck #TRK-987</div>
461
+ </div>
462
+ </div>
463
+ </td>
464
+ <td class="px-6 py-4 whitespace-nowrap">
465
+ <span class="px-2 py-1 text-xs rounded-full driver-status-inactive">Off Duty</span>
466
+ </td>
467
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Memphis, TN</td>
468
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
469
+ </tr>
470
+ <tr class="hover:bg-gray-50 cursor-pointer">
471
+ <td class="px-6 py-4 whitespace-nowrap">
472
+ <div class="flex items-center">
473
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
474
+ <i class="fas fa-user text-blue-600"></i>
475
+ </div>
476
+ <div class="ml-4">
477
+ <div class="text-sm font-medium text-gray-900">Andrew Brown</div>
478
+ <div class="text-sm text-gray-500">Truck #TRK-654</div>
479
+ </div>
480
+ </div>
481
+ </td>
482
+ <td class="px-6 py-4 whitespace-nowrap">
483
+ <span class="px-2 py-1 text-xs rounded-full driver-status-available">Available</span>
484
+ </td>
485
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Seattle, WA</td>
486
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">TRK-2452</td>
487
+ </tr>
488
+ </tbody>
489
+ </table>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </main>
494
+ </div>
495
+ </div>
496
+
497
+ <script>
498
+ // Toggle sidebar collapse
499
+ function toggleSidebar() {
500
+ const sidebar = document.querySelector('.sidebar');
501
+ const toggleButtonIcon = sidebar.querySelector('.fa-chevron-left');
502
+
503
+ sidebar.classList.toggle('collapsed');
504
+
505
+ if (sidebar.classList.contains('collapsed')) {
506
+ toggleButtonIcon.classList.remove('fa-chevron-left');
507
+ toggleButtonIcon.classList.add('fa-chevron-right');
508
+ sidebar.querySelector('.sidebar-text').textContent = 'Expand Menu';
509
+ } else {
510
+ toggleButtonIcon.classList.remove('fa-chevron-right');
511
+ toggleButtonIcon.classList.add('fa-chevron-left');
512
+ sidebar.querySelector('.sidebar-text').textContent = 'Collapse Menu';
513
+ }
514
+ }
515
+
516
+ // Simulate loading data
517
+ document.addEventListener('DOMContentLoaded', function() {
518
+ // This is where you would typically fetch data from an API
519
+ console.log('TMS Dashboard loaded');
520
+
521
+ // Example of updating a status in real-time
522
+ setInterval(() => {
523
+ const randomLoad = Math.floor(Math.random() * 5) + 1;
524
+ const statuses = ['On Duty', 'Available', 'Off Duty'];
525
+ const randomStatus = statuses[Math.floor(Math.random() * statuses.length)];
526
+
527
+ const driverRow = document.querySelector(`tbody tr:nth-child(${randomLoad}) td:nth-child(2)`);
528
+ if (driverRow) {
529
+ const span = driverRow.querySelector('span');
530
+ span.textContent = randomStatus;
531
+
532
+ // Remove all status classes
533
+ span.classList.remove('driver-status-active', 'driver-status-available', 'driver-status-inactive');
534
+
535
+ // Add appropriate class
536
+ if (randomStatus === 'On Duty') {
537
+ span.classList.add('driver-status-active');
538
+ } else if (randomStatus === 'Available') {
539
+ span.classList.add('driver-status-available');
540
+ } else {
541
+ span.classList.add('driver-status-inactive');
542
+ }
543
+ }
544
+ }, 10000);
545
+ });
546
+
547
+ // Example function to show a modal for load details
548
+ function showLoadDetails(loadId) {
549
+ alert(`Showing details for Load #${loadId}\nThis would open a modal in a real application.`);
550
+ }
551
+
552
+ // Add click event to load rows
553
+ document.querySelectorAll('tbody tr').forEach(row => {
554
+ row.addEventListener('click', function() {
555
+ const loadId = this.querySelector('td:first-child').textContent;
556
+ if (loadId.startsWith('TRK-')) {
557
+ showLoadDetails(loadId);
558
+ }
559
+ });
560
+ });
561
+ </script>
562
+ <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=Umang8896/usfl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
563
+ </html>
prompts.txt ADDED
File without changes