Hugging Face's logo

Spaces:
anonymous111110987654321
/
customs-brokerage-analytics
Running

App Files Community
anonymous111110987654321 commited on
Commit
4ef1c2d
·
verified ·
1 Parent(s): beaf6ed

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +846 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Customs Brokerage Analytics
3
- emoji: 📚
4
- colorFrom: pink
5
  colorTo: yellow
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
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: yellow
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,846 @@
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
+ <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.1.96/css/materialdesignicons.min.css">
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
11
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#1a56db',
18
+ secondary: '#7e3af2',
19
+ success: '#0e9f6e',
20
+ warning: '#f05f14',
21
+ danger: '#e02424',
22
+ background: {
23
+ light: '#f9fafb',
24
+ dark: '#1f2a37'
25
+ },
26
+ card: {
27
+ light: '#ffffff',
28
+ dark: '#374151'
29
+ },
30
+ text: {
31
+ light: '#111827',
32
+ dark: '#e5e7eb'
33
+ }
34
+ }
35
+ }
36
+ },
37
+ darkMode: 'class'
38
+ }
39
+ </script>
40
+ <style>
41
+ .scrollbar-hidden::-webkit-scrollbar {
42
+ display: none;
43
+ }
44
+
45
+ .chart-container {
46
+ background: rgba(255, 255, 255, 0.03);
47
+ border-radius: 0.75rem;
48
+ backdrop-filter: blur(16px);
49
+ }
50
+
51
+ .bg-gradient-primary {
52
+ background: linear-gradient(135deg, #1a56db 0%, #7e3af2 100%);
53
+ }
54
+
55
+ .outlier-row:nth-child(even) {
56
+ background-color: rgba(244, 63, 94, 0.1);
57
+ }
58
+
59
+ .dark .outlier-row:nth-child(even) {
60
+ background-color: rgba(244, 63, 94, 0.2);
61
+ }
62
+
63
+ .entry-timeline {
64
+ position: relative;
65
+ }
66
+
67
+ .entry-timeline::before {
68
+ content: '';
69
+ position: absolute;
70
+ top: 0;
71
+ left: 0;
72
+ width: 4px;
73
+ height: 100%;
74
+ background: linear-gradient(to bottom, #7e3af2, #1a56db);
75
+ border-radius: 4px;
76
+ }
77
+
78
+ .fade-in {
79
+ animation: fadeIn 0.3s ease-in-out;
80
+ }
81
+
82
+ @keyframes fadeIn {
83
+ from { opacity: 0; transform: translateY(10px); }
84
+ to { opacity: 1; transform: translateY(0); }
85
+ }
86
+
87
+ .heatmap-day {
88
+ border-radius: 4px;
89
+ transition: all 0.2s;
90
+ }
91
+
92
+ .heatmap-day:hover {
93
+ transform: scale(1.05);
94
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
95
+ }
96
+ </style>
97
+ </head>
98
+ <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200 min-h-screen">
99
+ <!-- Header -->
100
+ <header class="sticky top-0 z-50 bg-white dark:bg-gray-800 shadow-md">
101
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
102
+ <div class="flex items-center space-x-3">
103
+ <div class="bg-gradient-primary p-2 rounded-lg">
104
+ <span class="mdi mdi-ship-wheel text-white text-2xl"></span>
105
+ </div>
106
+ <h1 class="text-xl font-bold">Customs Brokerage Analytics</h1>
107
+ </div>
108
+
109
+ <div class="flex items-center space-x-4">
110
+ <div id="theme-toggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 cursor-pointer">
111
+ <span class="mdi mdi-weather-sunny text-yellow-500 block dark:hidden"></span>
112
+ <span class="mdi mdi-weather-night text-indigo-400 hidden dark:block"></span>
113
+ </div>
114
+
115
+ <div class="relative group">
116
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10 flex items-center justify-center text-gray-600">
117
+ <span class="mdi mdi-account text-xl"></span>
118
+ </div>
119
+ <div class="absolute right-0 w-48 mt-2 rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 hidden group-hover:block z-50">
120
+ <div class="py-1 px-4 text-sm">
121
+ <p class="font-semibold">Analytics User</p>
122
+ <p class="text-gray-500">customs@brokerage.com</p>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </header>
129
+
130
+ <main class="container mx-auto px-4 py-8">
131
+ <!-- Filters Section -->
132
+ <section class="mb-8 bg-card-light dark:bg-card rounded-xl shadow-md p-4">
133
+ <div class="flex flex-wrap gap-4 items-end">
134
+ <div class="flex-1 min-w-[200px]">
135
+ <label class="block text-sm font-medium mb-1">Port of Entry</label>
136
+ <select class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-primary focus:border-primary">
137
+ <option>All Ports</option>
138
+ <option>New York (NYC)</option>
139
+ <option>Los Angeles (LAX)</option>
140
+ <option>Chicago (ORD)</option>
141
+ <option>Miami (MIA)</option>
142
+ <option>Seattle (SEA)</option>
143
+ </select>
144
+ </div>
145
+
146
+ <div class="flex-1 min-w-[200px]">
147
+ <label class="block text-sm font-medium mb-1">Date Range</label>
148
+ <input id="date-range" class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm" placeholder="Select date range">
149
+ </div>
150
+
151
+ <div class="flex-1 min-w-[200px]">
152
+ <label class="block text-sm font-medium mb-1">Mode of Transport</label>
153
+ <select class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-primary focus:border-primary">
154
+ <option>All Modes</option>
155
+ <option>Ocean Freight</option>
156
+ <option>Air Freight</option>
157
+ <option>Truck</option>
158
+ <option>Rail</option>
159
+ </select>
160
+ </div>
161
+
162
+ <div>
163
+ <button class="px-4 py-2 bg-primary text-white rounded-lg font-medium hover:bg-blue-800 transition">
164
+ Apply Filters
165
+ </button>
166
+ </div>
167
+
168
+ <div>
169
+ <button class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition">
170
+ Reset
171
+ </button>
172
+ </div>
173
+ </div>
174
+ </section>
175
+
176
+ <!-- KPI Section -->
177
+ <section class="mb-8">
178
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
179
+ <div class="bg-gradient-primary rounded-xl p-5 text-white">
180
+ <div class="flex justify-between items-start">
181
+ <div>
182
+ <p class="opacity-80">Total Duty</p>
183
+ <h2 class="text-2xl font-bold mt-1">$2.34M</h2>
184
+ </div>
185
+ <span class="mdi mdi-cash text-3xl opacity-60"></span>
186
+ </div>
187
+ <p class="mt-2 text-sm opacity-90">↑ 12.4% from last month</p>
188
+ </div>
189
+
190
+ <div class="bg-green-500 rounded-xl p-5 text-white">
191
+ <div class="flex justify-between items-start">
192
+ <div>
193
+ <p class="opacity-80">Avg Release Time</p>
194
+ <h2 class="text-2xl font-bold mt-1">38.2 hrs</h2>
195
+ </div>
196
+ <span class="mdi mdi-clock-outline text-3xl opacity-60"></span>
197
+ </div>
198
+ <p class="mt-2 text-sm opacity-90">↓ 2.3 days from Q2</p>
199
+ </div>
200
+
201
+ <div class="bg-yellow-500 rounded-xl p-5 text-white">
202
+ <div class="flex justify-between items-start">
203
+ <div>
204
+ <p class="opacity-80">Late Filings</p>
205
+ <h2 class="text-2xl font-bold mt-1">4.1%</h2>
206
+ </div>
207
+ <span class="mdi mdi-alert-circle-outline text-3xl opacity-60"></span>
208
+ </div>
209
+ <p class="mt-2 text-sm opacity-90">↑ 0.7% from Q2</p>
210
+ </div>
211
+
212
+ <div class="bg-purple-500 rounded-xl p-5 text-white">
213
+ <div class="flex justify-between items-start">
214
+ <div>
215
+ <p class="opacity-80">USMCA Savings</p>
216
+ <h2 class="text-2xl font-bold mt-1">$312K</h2>
217
+ </div>
218
+ <span class="mdi mdi-hand-coin text-3xl opacity-60"></span>
219
+ </div>
220
+ <p class="mt-2 text-sm opacity-90">↑ 21.7% YoY</p>
221
+ </div>
222
+ </div>
223
+ </section>
224
+
225
+ <!-- Charts Section -->
226
+ <section class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
227
+ <!-- Pareto Chart -->
228
+ <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in">
229
+ <div class="flex justify-between items-center mb-4">
230
+ <h3 class="text-lg font-semibold">Top HTS Codes by Duty Value</h3>
231
+ <div class="flex space-x-2">
232
+ <button class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
233
+ <span class="mdi mdi-filter"></span>
234
+ </button>
235
+ <button class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
236
+ <span class="mdi mdi-download"></span>
237
+ </button>
238
+ </div>
239
+ </div>
240
+ <div id="pareto-chart" class="h-80"></div>
241
+ </div>
242
+
243
+ <!-- Trend Lines -->
244
+ <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in">
245
+ <div class="flex justify-between items-center mb-4">
246
+ <h3 class="text-lg font-semibold">Monthly Duty vs. Freight Spend</h3>
247
+ <div class="flex space-x-3 items-center">
248
+ <span class="text-sm">Show: </span>
249
+ <div class="flex space-x-1 bg-gray-100 dark:bg-gray-700 p-1 rounded-lg">
250
+ <button class="px-3 py-1 rounded-md bg-white dark:bg-gray-600 text-primary font-medium">Duty</button>
251
+ <button class="px-3 py-1 rounded-md text-gray-500 hover:text-gray-800 dark:hover:text-gray-200">Freight</button>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ <div id="trend-chart" class="h-80"></div>
256
+ </div>
257
+
258
+ <!-- Heatmap -->
259
+ <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in">
260
+ <div class="flex justify-between items-center mb-4">
261
+ <h3 class="text-lg font-semibold">Broker Workload Distribution</h3>
262
+ <div class="flex space-x-2 items-center">
263
+ <span class="text-sm">Broker:</span>
264
+ <select class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm">
265
+ <option>All Brokers</option>
266
+ <option>John D.</option>
267
+ <option>Sarah M.</option>
268
+ <option>Michael T.</option>
269
+ </select>
270
+ </div>
271
+ </div>
272
+ <div id="heatmap" class="h-80">
273
+ <div class="flex flex-col h-full">
274
+ <div class="flex mb-4">
275
+ <div class="w-32"></div>
276
+ <div class="flex-1 grid grid-cols-7 gap-1 text-center">
277
+ <span class="text-xs opacity-70">Mon</span>
278
+ <span class="text-xs opacity-70">Tue</span>
279
+ <span class="text-xs opacity-70">Wed</span>
280
+ <span class="text-xs opacity-70">Thu</span>
281
+ <span class="text-xs opacity-70">Fri</span>
282
+ <span class="text-xs opacity-70">Sat</span>
283
+ <span class="text-xs opacity-70">Sun</span>
284
+ </div>
285
+ </div>
286
+ <div class="flex-1 overflow-auto">
287
+ <div class="flex mb-1">
288
+ <div class="w-32 py-1 text-xs font-medium">Broker 1</div>
289
+ <div class="flex-1 grid grid-cols-7 gap-1">
290
+ <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="15 entries - Apr 1"><span class="text-xs">15</span></div>
291
+ <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="25 entries - Apr 2"><span class="text-xs">25</span></div>
292
+ <div class="heatmap-day bg-green-500 dark:bg-green-500 p-1" title="45 entries - Apr 3"><span class="text-xs">45</span></div>
293
+ <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="27 entries - Apr 4"><span class="text-xs">27</span></div>
294
+ <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="18 entries - Apr 5"><span class="text-xs">18</span></div>
295
+ <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div>
296
+ <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div>
297
+ </div>
298
+ </div>
299
+ <div class="flex mb-1">
300
+ <div class="w-32 py-1 text-xs font-medium">Broker 2</div>
301
+ <div class="flex-1 grid grid-cols-7 gap-1">
302
+ <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="22 entries - Apr 1"><span class="text-xs">22</span></div>
303
+ <div class="heatmap-day bg-green-500 dark:bg-green-500 p-1" title="38 entries - Apr 2"><span class="text-xs">38</span></div>
304
+ <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="29 entries - Apr 3"><span class="text-xs">29</span></div>
305
+ <div class="heatmap-day bg-green-500 dark:bg-green-500 p-1" title="41 entries - Apr 4"><span class="text-xs">41</span></div>
306
+ <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="32 entries - Apr 5"><span class="text-xs">32</span></div>
307
+ <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div>
308
+ <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div>
309
+ </div>
310
+ </div>
311
+ <div class="flex mb-1">
312
+ <div class="w-32 py-1 text-xs font-medium">Broker 3</div>
313
+ <div class="flex-1 grid grid-cols-7 gap-1">
314
+ <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="28 entries - Apr 1"><span class="text-xs">28</span></div>
315
+ <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="17 entries - Apr 2"><span class="text-xs">17</span></div>
316
+ <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="27 entries - Apr 3"><span class="text-xs">27</span></div>
317
+ <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="19 entries - Apr 4"><span class="text-xs">19</span></div>
318
+ <div class="heatmap-day bg-green-500 dark:bg-green-500 p-1" title="39 entries - Apr 5"><span class="text-xs">39</span></div>
319
+ <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div>
320
+ <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div>
321
+ </div>
322
+ </div>
323
+ <div class="flex mb-1">
324
+ <div class="w-32 py-1 text-xs font-medium">Broker 4</div>
325
+ <div class="flex-1 grid grid-cols-7 gap-1">
326
+ <div class="heatmap-day bg-green-500 dark:bg-green-500 p-1" title="40 entries - Apr 1"><span class="text-xs">40</span></div>
327
+ <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="14 entries - Apr 2"><span class="text-xs">14</span></div>
328
+ <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="33 entries - Apr 3"><span class="text-xs">33</span></div>
329
+ <div class="heatmap-day bg-green-300 dark:bg-green-700 p-1" title="31 entries - Apr 4"><span class="text-xs">31</span></div>
330
+ <div class="heatmap-day bg-green-100 dark:bg-green-900 p-1" title="18 entries - Apr 5"><span class="text-xs">18</span></div>
331
+ <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div>
332
+ <div class="heatmap-day bg-gray-100 dark:bg-gray-800 p-1"></div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ <div class="mt-3 flex items-center justify-center">
337
+ <div class="flex items-center text-xs">
338
+ <span class="mr-2">Entries per day:</span>
339
+ <div class="h-4 w-4 bg-green-100 dark:bg-green-900 mr-1"></div>
340
+ <span>0-20</span>
341
+ <div class="h-4 w-4 bg-green-300 dark:bg-green-700 mx-1"></div>
342
+ <span>21-30</span>
343
+ <div class="h-4 w-4 bg-green-500 dark:bg-green-500 ml-1"></div>
344
+ <span>31+</span>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Cycle Time Funnel -->
352
+ <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in">
353
+ <div class="flex justify-between items-center mb-4">
354
+ <h3 class="text-lg font-semibold">Entry Cycle Time Analysis</h3>
355
+ <div class="flex items-center">
356
+ <span class="text-xs mr-2">Avg:</span>
357
+ <span class="font-semibold text-primary">42 hrs</span>
358
+ </div>
359
+ </div>
360
+ <div class="h-80 flex items-center justify-center">
361
+ <div id="funnel-chart" class="w-full h-full"></div>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Geo Map -->
366
+ <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in">
367
+ <div class="flex justify-between items-center mb-4">
368
+ <h3 class="text-lg font-semibold">Port Dwell Time Analysis</h3>
369
+ <div class="flex items-center">
370
+ <span class="text-xs mr-2">Data: </span>
371
+ <div class="flex bg-gray-100 dark:bg-gray-700 p-1 rounded-lg">
372
+ <button class="px-2 py-1 rounded-md bg-white dark:bg-gray-600 text-primary font-medium text-xs">Days</button>
373
+ <button class="px-2 py-1 rounded-md text-xs text-gray-500 hover:text-gray-800 dark:hover:text-gray-200">Hours</button>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ <div id="geo-chart" class="h-80"></div>
378
+ </div>
379
+
380
+ <!-- What If Panel -->
381
+ <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in">
382
+ <div class="flex justify-between items-center mb-4">
383
+ <h3 class="text-lg font-semibold">Mode Shift Impact Simulation</h3>
384
+ <div class="flex items-center">
385
+ <button class="px-3 py-1 bg-primary text-white text-sm rounded-lg">Apply</button>
386
+ </div>
387
+ </div>
388
+ <div class="h-80">
389
+ <div class="mb-6">
390
+ <div class="flex justify-between text-sm mb-2">
391
+ <span>Shift Volume from Ocean to Air</span>
392
+ <span class="font-medium">15%</span>
393
+ </div>
394
+ <input type="range" min="0" max="30" value="15" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer">
395
+ </div>
396
+
397
+ <div class="grid grid-cols-2 gap-6 mt-8">
398
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
399
+ <div class="text-center mb-3">
400
+ <span class="mdi mdi-ship text-3xl text-blue-500"></span>
401
+ <h4 class="font-semibold mt-1">Ocean Impact</h4>
402
+ </div>
403
+ <div class="space-y-2">
404
+ <div class="flex justify-between text-sm">
405
+ <span>Duty Cost:</span>
406
+ <span class="font-medium text-red-500">+ $47,800</span>
407
+ </div>
408
+ <div class="flex justify-between text-sm">
409
+ <span>Brokerage Fee:</span>
410
+ <span class="font-medium text-red-500">+ $12,300</span>
411
+ </div>
412
+ <div class="flex justify-between text-sm">
413
+ <span>MPF:</span>
414
+ <span class="font-medium text-red-500">+ $8,200</span>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
420
+ <div class="text-center mb-3">
421
+ <span class="mdi mdi-airplane text-3xl text-purple-500"></span>
422
+ <h4 class="font-semibold mt-1">Air Impact</h4>
423
+ </div>
424
+ <div class="space-y-2">
425
+ <div class="flex justify-between text-sm">
426
+ <span>Release Time:</span>
427
+ <span class="font-medium text-green-500">-16 hours</span>
428
+ </div>
429
+ <div class="flex justify-between text-sm">
430
+ <span>Storage Costs:</span>
431
+ <span class="font-medium text-green-500">- $28,900</span>
432
+ </div>
433
+ <div class="flex justify-between text-sm">
434
+ <span>Demurrage:</span>
435
+ <span class="font-medium text-green-500">- $5,700</span>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </section>
443
+
444
+ <!-- Outlier Table -->
445
+ <section class="mb-8">
446
+ <div class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in">
447
+ <div class="flex justify-between items-center mb-4">
448
+ <h3 class="text-lg font-semibold">Compliance Outliers & Exceptions</h3>
449
+ <div class="flex space-x-2">
450
+ <button class="px-3 py-1 text-sm border border-primary text-primary rounded-lg">Filter by Status</button>
451
+ <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg">
452
+ <span class="mdi mdi-plus mr-1"></span> New
453
+ </button>
454
+ </div>
455
+ </div>
456
+
457
+ <div class="overflow-x-auto">
458
+ <table class="w-full text-sm">
459
+ <thead class="border-b border-gray-200 dark:border-gray-700">
460
+ <tr>
461
+ <th class="py-3 px-4 text-left font-medium">Entry No.</th>
462
+ <th class="py-3 px-4 text-left font-medium">Issue Type</th>
463
+ <th class="py-3 px-4 text-left font-medium">HTS Code</th>
464
+ <th class="py-3 px-4 text-left font-medium">Declared Value</th>
465
+ <th class="py-3 px-4 text-left font-medium">Duty Paid</th>
466
+ <th class="py-3 px-4 text-left font-medium">Country</th>
467
+ <th class="py-3 px-4 text-left font-medium">Status</th>
468
+ <th class="py-3 px-4 text-left font-medium">Actions</th>
469
+ </tr>
470
+ </thead>
471
+ <tbody>
472
+ <tr class="outlier-row hover:bg-gray-50 dark:hover:bg-gray-800">
473
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
474
+ <div>IT-2024-007156</div>
475
+ <div class="text-xs opacity-60">04/05/2024</div>
476
+ </td>
477
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
478
+ <span class="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs">Missing Value</span>
479
+ </td>
480
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">8471.70.51</td>
481
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$0.00</td>
482
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$0.00</td>
483
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">CN</td>
484
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
485
+ <span class="px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 text-xs">Review Needed</span>
486
+ </td>
487
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
488
+ <button class="text-primary hover:text-blue-700 mr-2">
489
+ <span class="mdi mdi-pencil"></span>
490
+ </button>
491
+ <button class="text-green-500 hover:text-green-700">
492
+ <span class="mdi mdi-check"></span>
493
+ </button>
494
+ </td>
495
+ </tr>
496
+
497
+ <tr class="outlier-row hover:bg-gray-50 dark:hover:bg-gray-800">
498
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
499
+ <div>IT-2024-008932</div>
500
+ <div class="text-xs opacity-60">04/03/2024</div>
501
+ </td>
502
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
503
+ <span class="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs">Late Filing</span>
504
+ </td>
505
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">6204.62.20</td>
506
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$21,450.00</td>
507
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$4,290.00</td>
508
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">MX</td>
509
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
510
+ <span class="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs">In Progress</span>
511
+ </td>
512
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
513
+ <button class="text-primary hover:text-blue-700 mr-2">
514
+ <span class="mdi mdi-pencil"></span>
515
+ </button>
516
+ <button class="text-green-500 hover:text-green-700">
517
+ <span class="mdi mdi-check"></span>
518
+ </button>
519
+ </td>
520
+ </tr>
521
+
522
+ <tr class="outlier-row hover:bg-gray-50 dark:hover:bg-gray-800">
523
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
524
+ <div>IT-2024-009451</div>
525
+ <div class="text-xs opacity-60">04/06/2024</div>
526
+ </td>
527
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
528
+ <span class="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs">Duplicate Entry</span>
529
+ </td>
530
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">6402.19.05</td>
531
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$15,200.00</td>
532
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$1,520.00</td>
533
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">VN</td>
534
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
535
+ <span class="px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 text-xs">Review Needed</span>
536
+ </td>
537
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
538
+ <button class="text-primary hover:text-blue-700 mr-2">
539
+ <span class="mdi mdi-pencil"></span>
540
+ </button>
541
+ <button class="text-green-500 hover:text-green-700">
542
+ <span class="mdi mdi-check"></span>
543
+ </button>
544
+ </td>
545
+ </tr>
546
+
547
+ <tr class="outlier-row hover:bg-gray-50 dark:hover:bg-gray-800">
548
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
549
+ <div>IT-2024-010823</div>
550
+ <div class="text-xs opacity-60">04/02/2024</div>
551
+ </td>
552
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
553
+ <span class="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs">USMCA Claim Issue</span>
554
+ </td>
555
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">8708.29.50</td>
556
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$82,300.00</td>
557
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">$8,230.00</td>
558
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">CA</td>
559
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
560
+ <span class="px-2 py-1 rounded-full bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs">Resolved</span>
561
+ </td>
562
+ <td class="py-3 px-4 border-b border-gray-100 dark:border-gray-800">
563
+ <button class="text-gray-500 hover:text-gray-700 mr-2" title="Edit">
564
+ <span class="mdi mdi-eye"></span>
565
+ </button>
566
+ <button class="text-red-500 hover:text-red-700" title="Delete">
567
+ <span class="mdi mdi-delete"></span>
568
+ </button>
569
+ </td>
570
+ </tr>
571
+ </tbody>
572
+ </table>
573
+ </div>
574
+
575
+ <div class="mt-4 flex justify-between items-center">
576
+ <div class="text-sm opacity-70">
577
+ Showing 4 of 37 outliers
578
+ </div>
579
+ <div class="flex space-x-2">
580
+ <button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">Previous</button>
581
+ <button class="px-3 py-1 bg-primary text-white rounded-lg">Next</button>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </section>
586
+
587
+ <!-- Download Center -->
588
+ <section class="bg-card-light dark:bg-card rounded-xl shadow-md p-6 fade-in">
589
+ <h3 class="text-lg font-semibold mb-4">Download Center</h3>
590
+
591
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
592
+ <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition">
593
+ <div class="flex justify-between items-start mb-3">
594
+ <span class="mdi mdi-file-document-outline text-3xl text-primary"></span>
595
+ <span class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-xs rounded">CSV</span>
596
+ </div>
597
+ <h4 class="font-medium mb-1">Transaction Report</h4>
598
+ <p class="text-sm opacity-70 mb-3">All entries for current period</p>
599
+ <button class="w-full py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm">
600
+ Download (124K rows)
601
+ </button>
602
+ </div>
603
+
604
+ <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition">
605
+ <div class="flex justify-between items-start mb-3">
606
+ <span class="mdi mdi-finance text-3xl text-green-500"></span>
607
+ <span class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-xs rounded">CSV</span>
608
+ </div>
609
+ <h4 class="font-medium mb-1">Duty Analysis</h4>
610
+ <p class="text-sm opacity-70 mb-3">By HTS, value and duty rate</p>
611
+ <button class="w-full py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm">
612
+ Download (22K rows)
613
+ </button>
614
+ </div>
615
+
616
+ <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition">
617
+ <div class="flex justify-between items-start mb-3">
618
+ <span class="mdi mdi-timetable text-3xl text-purple-500"></span>
619
+ <span class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-xs rounded">CSV</span>
620
+ </div>
621
+ <h4 class="font-medium mb-1">Cycle Time Report</h4>
622
+ <p class="text-sm opacity-70 mb-3">Entry milestone times</p>
623
+ <button class="w-full py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm">
624
+ Download (18K rows)
625
+ </button>
626
+ </div>
627
+
628
+ <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition">
629
+ <div class="flex justify-between items-start mb-3">
630
+ <span class="mdi mdi-chart-box-outline text-3xl text-orange-500"></span>
631
+ <span class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-xs rounded">PNG</span>
632
+ </div>
633
+ <h4 class="font-medium mb-1">Dashboard Export</h4>
634
+ <p class="text-sm opacity-70 mb-3">Full dashboard as image</p>
635
+ <button class="w-full py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm">
636
+ Download Image
637
+ </button>
638
+ </div>
639
+ </div>
640
+ </section>
641
+ </main>
642
+
643
+ <footer class="mt-12 py-6 bg-gray-50 dark:bg-gray-800">
644
+ <div class="container mx-auto px-4 text-center text-sm opacity-80">
645
+ <p>Customs Brokerage Analytics Dashboard v1.0 - Synthesized data from 50,000 customs entry records</p>
646
+ <p class="mt-2">© 2024 Global Trade Analytics. All rights reserved.</p>
647
+ </div>
648
+ </footer>
649
+
650
+ <script>
651
+ // Initialize date range picker
652
+ flatpickr("#date-range", {
653
+ mode: "range",
654
+ dateFormat: "M j, Y",
655
+ defaultDate: ["2024-03-01", "2024-04-15"]
656
+ });
657
+
658
+ // Theme toggle
659
+ document.getElementById('theme-toggle').addEventListener('click', function() {
660
+ document.documentElement.classList.toggle('dark');
661
+ localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
662
+ });
663
+
664
+ // Load saved theme preference
665
+ if (localStorage.getItem('theme') === 'dark') {
666
+ document.documentElement.classList.add('dark');
667
+ }
668
+
669
+ // Initialize charts with sample data
670
+ document.addEventListener('DOMContentLoaded', function() {
671
+ // Pareto Chart
672
+ Plotly.newPlot('pareto-chart', [{
673
+ x: ['8471.70.51', '6204.62.20', '6402.19.05', '8708.29.50', '3926.90.85', '8517.62.00', '6307.90.98', '2936.90.50', '9403.70.80', '3402.20.90'],
674
+ y: [342800, 312400, 284500, 265300, 243100, 221700, 204800, 192400, 187500, 173200],
675
+ type: 'bar',
676
+ marker: {
677
+ color: '#1a56db'
678
+ },
679
+ name: 'Duty Paid'
680
+ }], {
681
+ title: false,
682
+ margin: {t: 10, l: 50, r: 20, b: 90},
683
+ xaxis: {
684
+ tickangle: -45
685
+ },
686
+ yaxis: {
687
+ title: 'USD'
688
+ },
689
+ plot_bgcolor: 'transparent',
690
+ paper_bgcolor: 'transparent',
691
+ font: {
692
+ family: 'inherit',
693
+ color: 'inherit'
694
+ }
695
+ });
696
+
697
+ // Trend Chart
698
+ const months = ['Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar'];
699
+ Plotly.newPlot('trend-chart', [{
700
+ x: months,
701
+ y: [1.12, 1.28, 1.65, 1.92, 2.12, 2.34],
702
+ type: 'scatter',
703
+ mode: 'lines+markers',
704
+ marker: {
705
+ color: '#1a56db',
706
+ size: 8
707
+ },
708
+ line: {
709
+ color: '#1a56db',
710
+ width: 3
711
+ },
712
+ name: 'Duty Paid (Millions)'
713
+ }, {
714
+ x: months,
715
+ y: [0.84, 0.89, 0.94, 0.92, 0.96, 1.02],
716
+ type: 'scatter',
717
+ mode: 'lines+markers',
718
+ marker: {
719
+ color: '#7e3af2',
720
+ size: 8
721
+ },
722
+ line: {
723
+ color: '#7e3af2',
724
+ width: 3
725
+ },
726
+ yaxis: 'y2',
727
+ name: 'Freight Spend (Millions)'
728
+ }], {
729
+ title: false,
730
+ margin: {t: 10, l: 50, r: 50, b: 50},
731
+ plot_bgcolor: 'transparent',
732
+ paper_bgcolor: 'transparent',
733
+ font: {
734
+ family: 'inherit',
735
+ color: 'inherit'
736
+ },
737
+ yaxis: {
738
+ title: 'Duty Paid',
739
+ showgrid: true,
740
+ gridcolor: 'rgba(0,0,0,0.1)'
741
+ },
742
+ yaxis2: {
743
+ title: 'Freight Spend',
744
+ overlaying: 'y',
745
+ side: 'right',
746
+ showgrid: false
747
+ },
748
+ legend: {
749
+ x: 0.5,
750
+ y: 1.2,
751
+ xanchor: 'center',
752
+ orientation: 'h'
753
+ }
754
+ });
755
+
756
+ // Funnel Chart
757
+ const funnelStages = ['Arrival', 'ISF Filed', 'Entry Filed', 'CBP Release', 'Delivery'];
758
+ const funnelValues = [50000, 49200, 48600, 48150, 47800];
759
+ const avgTimes = ['-', '12h', '18h', '8h', '4h'];
760
+
761
+ let funnelData = [];
762
+ for (let i = 0; i < funnelStages.length; i++) {
763
+ funnelData.push({
764
+ type: 'funnel',
765
+ name: funnelStages[i],
766
+ y: [funnelStages[i] + ' ' + avgTimes[i]],
767
+ x: [funnelValues[i]],
768
+ textinfo: "value+percent initial",
769
+ marker: {
770
+ color: ['#7e3af2', '#1a56db', '#0e9f6e', '#f05f14', '#e02424'][i]
771
+ },
772
+ hoverinfo: 'name+text'
773
+ });
774
+ }
775
+
776
+ Plotly.newPlot('funnel-chart', funnelData, {
777
+ title: false,
778
+ margin: {t: 30, l: 0, r: 0, b: 30},
779
+ funnelmode: 'stack',
780
+ showlegend: false,
781
+ plot_bgcolor: 'transparent',
782
+ paper_bgcolor: 'transparent',
783
+ font: {
784
+ family: 'inherit',
785
+ color: 'inherit'
786
+ }
787
+ });
788
+
789
+ // Geo Chart
790
+ const ports = [
791
+ {name: 'New York', lat: 40.7, lon: -74, value: 4.2},
792
+ {name: 'Los Angeles', lat: 34.05, lon: -118.25, value: 5.7},
793
+ {name: 'Chicago', lat: 41.88, lon: -87.63, value: 2.8},
794
+ {name: 'Houston', lat: 29.76, lon: -95.37, value: 3.4},
795
+ {name: 'Miami', lat: 25.76, lon: -80.19, value: 4.5},
796
+ {name: 'Seattle', lat: 47.61, lon: -122.33, value: 3.9},
797
+ {name: 'Montreal', lat: 45.50, lon: -73.56, value: 3.1},
798
+ {name: 'Vancouver', lat: 49.25, lon: -123.12, value: 3.3},
799
+ {name: 'Toronto', lat: 43.65, lon: -79.38, value: 2.6}
800
+ ];
801
+
802
+ const portData = ports.map(p => ({
803
+ type: 'scattergeo',
804
+ mode: 'markers',
805
+ lat: [p.lat],
806
+ lon: [p.lon],
807
+ text: [`${p.name}: ${p.value} days`],
808
+ marker: {
809
+ size: p.value * 6,
810
+ color: p.value > 4.5 ? '#f05f14' : (p.value > 3.5 ? '#1a56db' : '#0e9f6e'),
811
+ opacity: 0.8,
812
+ line: {
813
+ width: 1,
814
+ color: '#ffffff'
815
+ }
816
+ },
817
+ name: p.name
818
+ }));
819
+
820
+ const geoLayout = {
821
+ geo: {
822
+ scope: 'north america',
823
+ showcountries: true,
824
+ countrycolor: '#cccccc',
825
+ showland: true,
826
+ landcolor: 'rgba(200, 200, 200, 0.2)',
827
+ showocean: true,
828
+ oceancolor: 'rgba(64, 164, 223, 0.1)',
829
+ projection: {
830
+ type: 'natural earth'
831
+ },
832
+ center: {
833
+ lat: 45,
834
+ lon: -95
835
+ }
836
+ },
837
+ margin: {t: 10, l: 0, r: 0, b: 0},
838
+ showlegend: false,
839
+ paper_bgcolor: 'transparent'
840
+ };
841
+
842
+ Plotly.newPlot('geo-chart', portData, geoLayout);
843
+ });
844
+ </script>
845
+ <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" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
846
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ **Up-leveled Prompt for Claude 4** ``` You are a senior data-viz engineer tasked with building an interactive customs-brokerage analytics dashboard from scratch, using a synthetic dataset you will generate on-the-fly. **1 · Synthetic Data Spec** • Rows: ≥ 50 000 customs-entry records (realistic scale). • Core tables & sample fields – Shipments: Entry_No, B/L_No, Arrival_Date, Port, Carrier, Mode, PGA_Flag – Merchandise: SKU, Description, HTS_Code, Declared_Value, Duty_Rate, Duty_Paid, Country_of_Origin – Fees & Charges: Brokerage_Fee, MPF, Harbor_Maint_Fee, Storage_Days, Demurrage_Cost – Milestones: ISF_Filed_TS, Entry_Filed_TS, CBP_Release_TS, Delivery_TS – Compliance Flags: Late_Filing, Duplicate_Entry, Missing_Value, USMCA_Claim • Inject believable variation, seasonality, and a small % of data-quality issues (nulls, outliers, duplicates). **2 · Tech Stack & Architecture** • Use Python 3.11, Pandas, Plotly Dash (latest) for a single-page web app. • Modular layout with reusable callbacks; no global variables. • Follow best practices: .env for secrets, config.py for constants, data.py for ETL/generation, app.py for UI. **3 · Must-Have Dashboard Features** 1. **Dynamic KPI Strip** – Total Duty, Avg Entry-to-Release (hrs), % Late Filings, Estimated USMCA Savings. 2. **Pareto Bar + Drill-Down** – Top 20 HTS codes by duty; click a bar to filter the whole page. 3. **Trend Lines** – Monthly duty vs. freight spend with dual-axis toggle. 4. **Heat-Map** – Broker workload (entries × day × broker). 5. **Cycle-Time Funnel** – Arrival → ISF → Entry → Release → Delivery with stage durations. 6. **Geospatial Plot** – Port dwell time choropleth on a map of North America. 7. **Outlier Table** – sortable grid flagging duplicate entries & zero-value lines with inline edit simulation. 8. **What-If Panel** – sliders to simulate shifting % volume from ocean→air and project incremental duty/MPF. 9. **Download Center** – CSV & PNG exports that respect current filter state. **4 · Interactivity & UX** • Global filters (multiselects + date range) persisted in URL query params. • Responsive layout (≥ 1200 px and mobile breakpoint at 768 px). • Tooltips & hover-templates with plain-English explanations. • Dark-mode toggle using Dash Bootstrap Components. **5 · Documentation & Testing** • Inline docstrings + README with run instructions. • Unit tests for data generator and key callbacks using pytest. **Deliverables (return as one Markdown-formatted reply)** 1. Step-by-step explanation of your design decisions. 2. The full, runnable code base (data.py, app.py, requirements.txt, etc.). 3. Brief user guide describing how to use each dashboard section. Go beyond minimal viability—strive for a production-ready, polished implementation that a customs-brokerage analyst could deploy as-is. ```