Hugging Face's logo

Spaces:
anonymous111110987654321
/
customs-brokerage-analytics-dashboard
Running

App Files Community
anonymous111110987654321 commited on
Commit
b0115cb
·
verified ·
1 Parent(s): 57c908f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +713 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Customs Brokerage Analytics Dashboard
3
- emoji: 📊
4
- colorFrom: red
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: customs-brokerage-analytics-dashboard
3
+ emoji: 🐳
4
+ colorFrom: purple
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,713 @@
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>Customs Brokerage Analytics Dashboard</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
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#1e40af',
16
+ secondary: '#3b82f6',
17
+ accent: '#10b981',
18
+ background: '#f3f4f6',
19
+ card: '#ffffff',
20
+ text: '#1f2937'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ .dashboard-grid {
28
+ display: grid;
29
+ grid-template-columns: repeat(4, 1fr);
30
+ gap: 1.25rem;
31
+ }
32
+
33
+ @media (max-width: 1280px) {
34
+ .dashboard-grid {
35
+ grid-template-columns: repeat(2, 1fr);
36
+ }
37
+ }
38
+
39
+ @media (max-width: 768px) {
40
+ .dashboard-grid {
41
+ grid-template-columns: 1fr;
42
+ }
43
+ }
44
+
45
+ .chart-card {
46
+ transition: transform 0.3s ease;
47
+ }
48
+
49
+ .chart-card:hover {
50
+ transform: translateY(-5px);
51
+ }
52
+
53
+ .custom-scrollbar::-webkit-scrollbar {
54
+ height: 8px;
55
+ width: 8px;
56
+ }
57
+
58
+ .custom-scrollbar::-webkit-scrollbar-track {
59
+ background: #f1f1f1;
60
+ border-radius: 10px;
61
+ }
62
+
63
+ .custom-scrollbar::-webkit-scrollbar-thumb {
64
+ background: #c5c5c5;
65
+ border-radius: 10px;
66
+ }
67
+
68
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
69
+ background: #a8a8a8;
70
+ }
71
+
72
+ .table-row-hover:hover {
73
+ background-color: #f1f5f9;
74
+ }
75
+
76
+ .highlight {
77
+ background-color: #e0f2fe;
78
+ }
79
+
80
+ [data-status="In Progress"] {
81
+ background-color: #dbeafe;
82
+ color: #3b82f6;
83
+ }
84
+
85
+ [data-status="Delayed"] {
86
+ background-color: #ffedd5;
87
+ color: #f97316;
88
+ }
89
+
90
+ [data-status="Completed"] {
91
+ background-color: #dcfce7;
92
+ color: #22c55e;
93
+ }
94
+
95
+ [data-status="Pending"] {
96
+ background-color: #f3e8ff;
97
+ color: #a855f7;
98
+ }
99
+
100
+ .status-pill {
101
+ @apply px-3 py-1 rounded-full text-xs font-semibold;
102
+ }
103
+ </style>
104
+ </head>
105
+ <body class="bg-background min-h-screen text-text">
106
+ <!-- Header -->
107
+ <header class="bg-primary text-white p-4 shadow-lg">
108
+ <div class="container mx-auto flex justify-between items-center">
109
+ <div class="flex items-center">
110
+ <i class="fas fa-ship text-3xl mr-3"></i>
111
+ <h1 class="text-2xl font-bold">Customs Brokerage Analytics Dashboard</h1>
112
+ </div>
113
+ <div class="flex items-center space-x-4">
114
+ <button class="bg-secondary hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center">
115
+ <i class="fas fa-download mr-2"></i> Export
116
+ </button>
117
+ <div class="relative">
118
+ <div class="bg-white text-primary rounded-full w-10 h-10 flex items-center justify-center cursor-pointer">
119
+ <i class="fas fa-user"></i>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </header>
125
+
126
+ <div class="container mx-auto px-4 py-6">
127
+ <!-- Filter Section -->
128
+ <div class="bg-card rounded-xl shadow-md p-6 mb-6">
129
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
130
+ <div>
131
+ <label class="block text-sm font-medium mb-1">Date Range</label>
132
+ <div class="relative">
133
+ <select class="w-full bg-gray-100 border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-secondary">
134
+ <option>Last 7 days</option>
135
+ <option selected>Last 30 days</option>
136
+ <option>Last Quarter</option>
137
+ <option>Last Year</option>
138
+ <option>Custom Range</option>
139
+ </select>
140
+ </div>
141
+ </div>
142
+ <div>
143
+ <label class="block text-sm font-medium mb-1">Shipment Status</label>
144
+ <div class="relative">
145
+ <select class="w-full bg-gray-100 border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-secondary">
146
+ <option>All Statuses</option>
147
+ <option>In Progress</option>
148
+ <option>Delayed</option>
149
+ <option>Completed</option>
150
+ <option>Pending Clearance</option>
151
+ </select>
152
+ </div>
153
+ </div>
154
+ <div>
155
+ <label class="block text-sm font-medium mb-1">Port of Entry</label>
156
+ <div class="relative">
157
+ <select class="w-full bg-gray-100 border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-secondary">
158
+ <option>All Ports</option>
159
+ <option>Los Angeles</option>
160
+ <option>New York</option>
161
+ <option>Miami</option>
162
+ <option>Seattle</option>
163
+ <option>Chicago</option>
164
+ </select>
165
+ </div>
166
+ </div>
167
+ <div class="flex items-end">
168
+ <button class="bg-primary hover:bg-blue-900 text-white py-2 px-4 rounded-lg w-full flex items-center justify-center">
169
+ <i class="fas fa-filter mr-2"></i> Apply Filters
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Metrics Overview -->
176
+ <h2 class="text-xl font-bold mb-4 flex items-center">
177
+ <i class="fas fa-tachometer-alt mr-2 text-secondary"></i> Key Metrics Overview
178
+ </h2>
179
+ <div class="dashboard-grid mb-6">
180
+ <!-- Total Shipments -->
181
+ <div class="bg-card rounded-xl shadow-md p-6 flex flex-col hover:shadow-lg transition-all">
182
+ <div class="flex justify-between items-start mb-4">
183
+ <h3 class="text-lg font-semibold">Total Shipments</h3>
184
+ <div class="bg-blue-100 text-primary p-2 rounded-lg">
185
+ <i class="fas fa-boxes text-xl"></i>
186
+ </div>
187
+ </div>
188
+ <div class="text-3xl font-bold">1,248</div>
189
+ <div class="flex items-center mt-2">
190
+ <span class="text-green-500 mr-2">
191
+ <i class="fas fa-arrow-up"></i> 12%
192
+ </span>
193
+ <span class="text-sm text-gray-500">vs previous month</span>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- In Progress -->
198
+ <div class="bg-card rounded-xl shadow-md p-6 flex flex-col hover:shadow-lg transition-all">
199
+ <div class="flex justify-between items-start mb-4">
200
+ <h3 class="text-lg font-semibold">In Progress</h3>
201
+ <div class="bg-blue-100 text-blue-600 p-2 rounded-lg">
202
+ <i class="fas fa-sync-alt text-xl"></i>
203
+ </div>
204
+ </div>
205
+ <div class="text-3xl font-bold">457</div>
206
+ <div class="flex items-center mt-2">
207
+ <span class="text-green-500 mr-2">
208
+ <i class="fas fa-arrow-down"></i> 4%
209
+ </span>
210
+ <span class="text-sm text-gray-500">vs previous month</span>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Delayed -->
215
+ <div class="bg-card rounded-xl shadow-md p-6 flex flex-col hover:shadow-lg transition-all">
216
+ <div class="flex justify-between items-start mb-4">
217
+ <h3 class="text-lg font-semibold">Delayed</h3>
218
+ <div class="bg-orange-100 text-orange-500 p-2 rounded-lg">
219
+ <i class="fas fa-exclamation-triangle text-xl"></i>
220
+ </div>
221
+ </div>
222
+ <div class="text-3xl font-bold">123</div>
223
+ <div class="flex items-center mt-2">
224
+ <span class="text-red-500 mr-2">
225
+ <i class="fas fa-arrow-up"></i> 8%
226
+ </span>
227
+ <span class="text-sm text-gray-500">vs previous month</span>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Completed -->
232
+ <div class="bg-card rounded-xl shadow-md p-6 flex flex-col hover:shadow-lg transition-all">
233
+ <div class="flex justify-between items-start mb-4">
234
+ <h3 class="text-lg font-semibold">Completed</h3>
235
+ <div class="bg-green-100 text-green-500 p-2 rounded-lg">
236
+ <i class="fas fa-check-circle text-xl"></i>
237
+ </div>
238
+ </div>
239
+ <div class="text-3xl font-bold">668</div>
240
+ <div class="flex items-center mt-2">
241
+ <span class="text-green-500 mr-2">
242
+ <i class="fas fa-arrow-up"></i> 15%
243
+ </span>
244
+ <span class="text-sm text-gray-500">vs previous month</span>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Charts Section -->
250
+ <h2 class="text-xl font-bold mb-4 flex items-center">
251
+ <i class="fas fa-chart-bar mr-2 text-secondary"></i> Analytics & Insights
252
+ </h2>
253
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
254
+ <!-- Shipment Trends Chart -->
255
+ <div class="bg-card rounded-xl shadow-md p-6 chart-card">
256
+ <div class="flex justify-between items-center mb-4">
257
+ <h3 class="text-lg font-semibold">Shipment Trends (Last 30 Days)</h3>
258
+ <select class="bg-gray-100 border border-gray-300 rounded-lg py-1 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-secondary">
259
+ <option>Daily</option>
260
+ <option selected>Weekly</option>
261
+ <option>Monthly</option>
262
+ </select>
263
+ </div>
264
+ <div class="h-80">
265
+ <canvas id="trendsChart"></canvas>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Status Distribution -->
270
+ <div class="bg-card rounded-xl shadow-md p-6 chart-card">
271
+ <h3 class="text-lg font-semibold mb-4">Shipment Status Distribution</h3>
272
+ <div class="h-80">
273
+ <canvas id="statusChart"></canvas>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Top Ports Chart -->
278
+ <div class="bg-card rounded-xl shadow-md p-6 chart-card col-span-1 lg:col-span-2">
279
+ <div class="flex justify-between items-center mb-4">
280
+ <h3 class="text-lg font-semibold">Top Ports by Shipment Volume</h3>
281
+ <div class="flex space-x-2">
282
+ <button class="bg-gray-100 hover:bg-gray-200 py-1 px-3 rounded-lg text-sm">
283
+ Import
284
+ </button>
285
+ <button class="bg-gray-100 hover:bg-gray-200 py-1 px-3 rounded-lg text-sm">
286
+ Export
287
+ </button>
288
+ <button class="bg-primary text-white py-1 px-3 rounded-lg text-sm">
289
+ Both
290
+ </button>
291
+ </div>
292
+ </div>
293
+ <div class="h-96">
294
+ <canvas id="portsChart"></canvas>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Detailed Shipments Table -->
300
+ <h2 class="text-xl font-bold mb-4 flex items-center">
301
+ <i class="fas fa-table mr-2 text-secondary"></i> Shipment Details
302
+ </h2>
303
+ <div class="bg-card rounded-xl shadow-md p-6 mb-6">
304
+ <div class="mb-4 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
305
+ <div class="relative w-full md:w-64">
306
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
307
+ <input type="text" placeholder="Search shipments..." class="w-full bg-gray-100 border border-gray-300 rounded-lg py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-secondary">
308
+ </div>
309
+ <div class="flex items-center space-x-3">
310
+ <span class="text-sm text-gray-600">Items per page:</span>
311
+ <select class="bg-gray-100 border border-gray-300 rounded-lg py-1 px-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary">
312
+ <option>10</option>
313
+ <option selected>25</option>
314
+ <option>50</option>
315
+ <option>100</option>
316
+ </select>
317
+ </div>
318
+ </div>
319
+ <div class="overflow-x-auto">
320
+ <table class="min-w-full divide-y divide-gray-200">
321
+ <thead>
322
+ <tr>
323
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
324
+ <div class="flex items-center">
325
+ <span>ID</span>
326
+ <i class="fas fa-sort ml-1 text-gray-400"></i>
327
+ </div>
328
+ </th>
329
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
330
+ <div class="flex items-center">
331
+ <span>Reference #</span>
332
+ <i class="fas fa-sort ml-1 text-gray-400"></i>
333
+ </div>
334
+ </th>
335
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
336
+ <div class="flex items-center">
337
+ <span>Port of Entry</span>
338
+ <i class="fas fa-sort ml-1 text-gray-400"></i>
339
+ </div>
340
+ </th>
341
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
342
+ <div class="flex items-center">
343
+ <span>Status</span>
344
+ <i class="fas fa-sort ml-1 text-gray-400"></i>
345
+ </div>
346
+ </th>
347
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
348
+ <div class="flex items-center">
349
+ <span>Est. Arrival</span>
350
+ <i class="fas fa-sort ml-1 text-gray-400"></i>
351
+ </div>
352
+ </th>
353
+ <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
354
+ <div class="flex items-center">
355
+ <span>Actions</span>
356
+ </div>
357
+ </th>
358
+ </tr>
359
+ </thead>
360
+ <tbody class="bg-white divide-y divide-gray-200">
361
+ <!-- Shipment rows will be generated here -->
362
+ </tbody>
363
+ </table>
364
+ </div>
365
+ <div class="flex flex-col md:flex-row items-center justify-between px-4 py-3 border-t border-gray-200 sm:px-6 mt-4">
366
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
367
+ <div>
368
+ <p class="text-sm text-gray-700">
369
+ Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">1,248</span> shipments
370
+ </p>
371
+ </div>
372
+ <div>
373
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
374
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
375
+ <span class="sr-only">Previous</span>
376
+ <i class="fas fa-chevron-left"></i>
377
+ </a>
378
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">1</a>
379
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a>
380
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">3</a>
381
+ <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
382
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">125</a>
383
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
384
+ <span class="sr-only">Next</span>
385
+ <i class="fas fa-chevron-right"></i>
386
+ </a>
387
+ </nav>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Footer -->
395
+ <footer class="bg-white border-t border-gray-200 py-6">
396
+ <div class="container mx-auto px-4">
397
+ <div class="flex flex-col md:flex-row justify-between items-center">
398
+ <div class="mb-4 md:mb-0">
399
+ <div class="flex items-center">
400
+ <i class="fas fa-ship text-xl text-primary mr-2"></i>
401
+ <span class="text-lg font-semibold">Global Brokerage Analytics</span>
402
+ </div>
403
+ <p class="text-gray-600 text-sm mt-2">Comprehensive customs brokerage performance insights</p>
404
+ </div>
405
+ <div class="flex space-x-6">
406
+ <a href="#" class="text-gray-400 hover:text-primary">
407
+ <i class="fab fa-twitter"></i>
408
+ </a>
409
+ <a href="#" class="text-gray-400 hover:text-primary">
410
+ <i class="fab fa-linkedin"></i>
411
+ </a>
412
+ <a href="#" class="text-gray-400 hover:text-primary">
413
+ <i class="fab fa-github"></i>
414
+ </a>
415
+ </div>
416
+ </div>
417
+ <div class="mt-6 pt-6 border-t border-gray-200 text-center text-sm text-gray-500">
418
+ &copy; 2023 Global Customs Brokerage Ltd. All rights reserved.
419
+ </div>
420
+ </div>
421
+ </footer>
422
+
423
+ <script>
424
+ // Synthetic data for charts
425
+ const shipmentData = {
426
+ weeks: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5'],
427
+ shipments: [240, 290, 320, 285, 310],
428
+ completed: [120, 160, 200, 150, 180],
429
+ delayed: [25, 32, 28, 35, 40],
430
+ ports: ['Los Angeles', 'New York', 'Miami', 'Seattle', 'Chicago', 'Houston', 'Boston'],
431
+ portVolumes: [452, 388, 324, 210, 195, 180, 157],
432
+ statusDistribution: {
433
+ labels: ['Completed', 'In Progress', 'Delayed', 'Pending'],
434
+ data: [668, 457, 123, 100],
435
+ colors: ['#22c55e', '#3b82f6', '#f97316', '#a855f7']
436
+ }
437
+ };
438
+
439
+ // Initialize charts when page loads
440
+ document.addEventListener('DOMContentLoaded', function() {
441
+ // Initialize the Shipment Trends Chart (Line Chart)
442
+ const trendsCtx = document.getElementById('trendsChart').getContext('2d');
443
+ const trendsChart = new Chart(trendsCtx, {
444
+ type: 'line',
445
+ data: {
446
+ labels: shipmentData.weeks,
447
+ datasets: [
448
+ {
449
+ label: 'Total Shipments',
450
+ data: shipmentData.shipments,
451
+ borderColor: '#3b82f6',
452
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
453
+ tension: 0.3,
454
+ fill: true
455
+ },
456
+ {
457
+ label: 'Completed Shipments',
458
+ data: shipmentData.completed,
459
+ borderColor: '#22c55e',
460
+ backgroundColor: 'rgba(34, 197, 94, 0.1)',
461
+ tension: 0.3,
462
+ fill: true
463
+ },
464
+ {
465
+ label: 'Delayed Shipments',
466
+ data: shipmentData.delayed,
467
+ borderColor: '#f97316',
468
+ backgroundColor: 'rgba(249, 115, 22, 0.1)',
469
+ tension: 0.3,
470
+ fill: true
471
+ }
472
+ ]
473
+ },
474
+ options: {
475
+ responsive: true,
476
+ maintainAspectRatio: false,
477
+ scales: {
478
+ y: {
479
+ beginAtZero: true,
480
+ grid: {
481
+ color: 'rgba(0, 0, 0, 0.05)'
482
+ }
483
+ },
484
+ x: {
485
+ grid: {
486
+ display: false
487
+ }
488
+ }
489
+ },
490
+ plugins: {
491
+ legend: {
492
+ position: 'top',
493
+ },
494
+ tooltip: {
495
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
496
+ padding: 12,
497
+ titleFont: {
498
+ size: 14
499
+ },
500
+ bodyFont: {
501
+ size: 13
502
+ },
503
+ callbacks: {
504
+ label: function(context) {
505
+ return `${context.dataset.label}: ${context.raw} shipments`;
506
+ }
507
+ }
508
+ }
509
+ }
510
+ }
511
+ });
512
+
513
+ // Initialize the Status Distribution Chart (Doughnut Chart)
514
+ const statusCtx = document.getElementById('statusChart').getContext('2d');
515
+ const statusChart = new Chart(statusCtx, {
516
+ type: 'doughnut',
517
+ data: {
518
+ labels: shipmentData.statusDistribution.labels,
519
+ datasets: [{
520
+ data: shipmentData.statusDistribution.data,
521
+ backgroundColor: shipmentData.statusDistribution.colors,
522
+ borderWidth: 0,
523
+ hoverOffset: 15
524
+ }]
525
+ },
526
+ options: {
527
+ responsive: true,
528
+ maintainAspectRatio: false,
529
+ cutout: '65%',
530
+ plugins: {
531
+ legend: {
532
+ position: 'right',
533
+ labels: {
534
+ padding: 15,
535
+ boxWidth: 15,
536
+ font: {
537
+ size: 12
538
+ },
539
+ generateLabels: function(chart) {
540
+ const data = chart.data;
541
+ if (data.labels.length && data.datasets.length) {
542
+ return data.labels.map(function(label, i) {
543
+ const value = data.datasets[0].data[i];
544
+ const percentage = ((value / shipmentData.shipments.reduce((a, b) => a + b, 0)) * 100).toFixed(1);
545
+ return {
546
+ text: `${label}: ${value} (${percentage}%)`,
547
+ fillStyle: data.datasets[0].backgroundColor[i],
548
+ strokeStyle: '#fff',
549
+ lineWidth: 0,
550
+ hidden: false,
551
+ index: i
552
+ };
553
+ });
554
+ }
555
+ return [];
556
+ }
557
+ }
558
+ },
559
+ tooltip: {
560
+ callbacks: {
561
+ label: function(context) {
562
+ const label = context.label || '';
563
+ const value = context.raw || 0;
564
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
565
+ const percentage = Math.round(value * 100 / total);
566
+ return `${label}: ${value} shipments (${percentage}%)`;
567
+ }
568
+ }
569
+ }
570
+ }
571
+ }
572
+ });
573
+
574
+ // Initialize the Top Ports Chart (Bar Chart)
575
+ const portsCtx = document.getElementById('portsChart').getContext('2d');
576
+ const portsChart = new Chart(portsCtx, {
577
+ type: 'bar',
578
+ data: {
579
+ labels: shipmentData.ports,
580
+ datasets: [{
581
+ label: 'Shipment Volume',
582
+ data: shipmentData.portVolumes,
583
+ backgroundColor: [
584
+ 'rgba(59, 130, 246, 0.7)',
585
+ 'rgba(34, 197, 94, 0.7)',
586
+ 'rgba(249, 115, 22, 0.7)',
587
+ 'rgba(168, 85, 247, 0.7)',
588
+ 'rgba(59, 130, 246, 0.5)',
589
+ 'rgba(34, 197, 94, 0.5)',
590
+ 'rgba(249, 115, 22, 0.5)'
591
+ ],
592
+ borderColor: [
593
+ 'rgb(59, 130, 246)',
594
+ 'rgb(34, 197, 94)',
595
+ 'rgb(249, 115, 22)',
596
+ 'rgb(168, 85, 247)',
597
+ 'rgb(59, 130, 246)',
598
+ 'rgb(34, 197, 94)',
599
+ 'rgb(249, 115, 22)'
600
+ ],
601
+ borderWidth: 1
602
+ }]
603
+ },
604
+ options: {
605
+ indexAxis: 'y',
606
+ responsive: true,
607
+ maintainAspectRatio: false,
608
+ scales: {
609
+ x: {
610
+ grid: {
611
+ color: 'rgba(0, 0, 0, 0.05)'
612
+ }
613
+ },
614
+ y: {
615
+ grid: {
616
+ display: false
617
+ }
618
+ }
619
+ },
620
+ plugins: {
621
+ legend: {
622
+ display: false
623
+ },
624
+ tooltip: {
625
+ callbacks: {
626
+ label: function(context) {
627
+ return `${context.parsed.x} shipments`;
628
+ }
629
+ }
630
+ }
631
+ }
632
+ }
633
+ });
634
+
635
+ // Populate table with synthetic data
636
+ const tableBody = document.querySelector('tbody');
637
+ const ports = ['Los Angeles', 'New York', 'Miami', 'Seattle', 'Chicago'];
638
+ const statuses = ['In Progress', 'Delayed', 'Completed', 'Pending'];
639
+ const origins = ['China', 'Germany', 'Japan', 'Mexico', 'Canada'];
640
+ const destinations = ['US East', 'US West', 'US Midwest', 'US South'];
641
+
642
+ // Generate 25 rows of synthetic shipment data
643
+ for (let i = 1; i <= 25; i++) {
644
+ const port = ports[Math.floor(Math.random() * ports.length)];
645
+ const status = statuses[Math.floor(Math.random() * statuses.length)];
646
+ const days = Math.floor(Math.random() * 30) + 1;
647
+ const arrivalDate = new Date();
648
+ arrivalDate.setDate(arrivalDate.getDate() + days);
649
+
650
+ const row = document.createElement('tr');
651
+ row.className = 'table-row-hover hover:bg-gray-50';
652
+
653
+ row.innerHTML = `
654
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${String(i).padStart(5, '0')}</td>
655
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">REF-${Math.floor(Math.random() * 90000) + 10000}</td>
656
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
657
+ <div class="flex items-center">
658
+ <i class="fas fa-anchor mr-2 text-blue-500"></i>
659
+ ${port}
660
+ </div>
661
+ </td>
662
+ <td class="px-6 py-4 whitespace-nowrap text-sm">
663
+ <span class="status-pill" data-status="${status}">
664
+ <i class="fas fa-${status === 'Completed' ? 'check-circle' : status === 'Delayed' ? 'exclamation-triangle' : status === 'Pending' ? 'hourglass-half' : 'sync-alt'} mr-1"></i>
665
+ ${status}
666
+ </span>
667
+ </td>
668
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
669
+ ${arrivalDate.toLocaleDateString()}
670
+ <div class="text-xs text-gray-400">${days} days</div>
671
+ </td>
672
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
673
+ <button class="text-primary hover:text-blue-800 mr-3">
674
+ <i class="fas fa-eye"></i> View
675
+ </button>
676
+ <button class="text-gray-500 hover:text-gray-700">
677
+ <i class="fas fa-ellipsis-v"></i>
678
+ </button>
679
+ </td>
680
+ `;
681
+
682
+ tableBody.appendChild(row);
683
+ }
684
+
685
+ // Add sorting functionality to table headers
686
+ const headers = document.querySelectorAll('th');
687
+ headers.forEach(header => {
688
+ header.addEventListener('click', function() {
689
+ const sortIcon = this.querySelector('i');
690
+ if (sortIcon) {
691
+ if (sortIcon.classList.contains('fa-sort')) {
692
+ sortIcon.classList.remove('fa-sort');
693
+ sortIcon.classList.add('fa-sort-up');
694
+ } else if (sortIcon.classList.contains('fa-sort-up')) {
695
+ sortIcon.classList.remove('fa-sort-up');
696
+ sortIcon.classList.add('fa-sort-down');
697
+ } else {
698
+ sortIcon.classList.remove('fa-sort-down');
699
+ sortIcon.classList.add('fa-sort-up');
700
+ }
701
+ }
702
+ // This is where you would implement actual sorting logic
703
+ // For this demo, we'll just flash the header
704
+ this.classList.add('highlight');
705
+ setTimeout(() => {
706
+ this.classList.remove('highlight');
707
+ }, 300);
708
+ });
709
+ });
710
+ });
711
+ </script>
712
+ <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=anonymous111110987654321/customs-brokerage-analytics-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
713
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ We are creating an analytics dashboard for customs brokerage data. The dashboard should include multiple features and interactions. Key features we can include: 1. Overview cards showing key metrics (e.g., Total Shipments, In Progress, Delayed, Completed) 2. Charts: Line chart for shipment trends, Bar chart for top ports, Pie/Doughnut chart for shipment status distribution 3. Data table with detailed shipment information (with sorting, filtering, pagination) 4. Interactive elements: date range picker, filters by status, port, etc. 5. Use of icons for better visual representation
2
+ there is no data in the charts. Ensure, using synthetic customs brokerage data, that all charts are fully populated with data