Add 2 files

index.html

@@ -124,10 +124,10 @@
     </header>
 
     <div class="container mx-auto px-4 py-6">
-        <!-- Filter Section -->
+        <!-- Enhanced Filter Section -->
         <div class="bg-card rounded-xl shadow-md p-6 mb-6">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-                <div>
+            <div class="grid grid-cols-1 md:grid-cols-6 gap-4">
+                <div class="md:col-span-1">
                     <label class="block text-sm font-medium mb-1">Date Range</label>
                     <div class="relative">
                         <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">
@@ -139,7 +139,7 @@
                         </select>
                     </div>
                 </div>
-                <div>
+                <div class="md:col-span-1">
                     <label class="block text-sm font-medium mb-1">Shipment Status</label>
                     <div class="relative">
                         <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">
@@ -151,7 +151,7 @@
                         </select>
                     </div>
                 </div>
-                <div>
+                <div class="md:col-span-1">
                     <label class="block text-sm font-medium mb-1">Port of Entry</label>
                     <div class="relative">
                         <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">
@@ -164,7 +164,38 @@
                         </select>
                     </div>
                 </div>
-                <div class="flex items-end">
+                <!-- New Filter 1: Origin Country -->
+                <div class="md:col-span-1">
+                    <label class="block text-sm font-medium mb-1">Origin Country</label>
+                    <div class="relative">
+                        <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">
+                            <option>All Countries</option>
+                            <option>China</option>
+                            <option>Germany</option>
+                            <option>Japan</option>
+                            <option>Mexico</option>
+                            <option>Canada</option>
+                            <option>South Korea</option>
+                            <option>United Kingdom</option>
+                        </select>
+                    </div>
+                </div>
+                <!-- New Filter 2: Destination Region -->
+                <div class="md:col-span-1">
+                    <label class="block text-sm font-medium mb-1">Destination Region</label>
+                    <div class="relative">
+                        <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">
+                            <option>All Regions</option>
+                            <option>US East</option>
+                            <option>US West</option>
+                            <option>Midwest</option>
+                            <option>South</option>
+                            <option>Northeast</option>
+                            <option>Southwest</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="md:col-span-1 flex items-end">
                     <button class="bg-primary hover:bg-blue-900 text-white py-2 px-4 rounded-lg w-full flex items-center justify-center">
                         <i class="fas fa-filter mr-2"></i> Apply Filters
                     </button>
@@ -294,6 +325,32 @@
                     <canvas id="portsChart"></canvas>
                 </div>
             </div>
+
+            <!-- Additional Charts -->
+            <div class="bg-card rounded-xl shadow-md p-6 chart-card">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-semibold">Clearance Times by Origin</h3>
+                    <button class="bg-gray-100 hover:bg-gray-200 py-1 px-3 rounded-lg text-sm">
+                        Details
+                    </button>
+                </div>
+                <div class="h-80">
+                    <canvas id="clearanceTimesChart"></canvas>
+                </div>
+            </div>
+
+            <div class="bg-card rounded-xl shadow-md p-6 chart-card">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-semibold">Value Distribution ($ millions)</h3>
+                    <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">
+                        <option selected>Commercial</option>
+                        <option>Personal</option>
+                    </select>
+                </div>
+                <div class="h-80">
+                    <canvas id="valueDistributionChart"></canvas>
+                </div>
+            </div>
         </div>
 
         <!-- Detailed Shipments Table -->
@@ -338,6 +395,12 @@
                                     <i class="fas fa-sort ml-1 text-gray-400"></i>
                                 </div>
                             </th>
+                            <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">
+                                <div class="flex items-center">
+                                    <span>Origin</span>
+                                    <i class="fas fa-sort ml-1 text-gray-400"></i>
+                                </div>
+                            </th>
                             <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">
                                 <div class="flex items-center">
                                     <span>Status</span>
@@ -421,7 +484,7 @@
     </footer>
 
     <script>
-        // Synthetic data for charts
+        // Enhanced synthetic data for all charts
         const shipmentData = {
             weeks: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5'],
             shipments: [240, 290, 320, 285, 310],
@@ -433,6 +496,14 @@
                 labels: ['Completed', 'In Progress', 'Delayed', 'Pending'],
                 data: [668, 457, 123, 100],
                 colors: ['#22c55e', '#3b82f6', '#f97316', '#a855f7']
+            },
+            originData: {
+                labels: ['China', 'Germany', 'Japan', 'Mexico', 'Canada'],
+                clearanceTimes: [2.3, 1.8, 2.1, 1.2, 1.5]
+            },
+            valueDistribution: {
+                labels: ['< $10k', '$10k-50k', '$50k-100k', '$100k-500k', '$500k+'],
+                data: [420, 385, 247, 156, 40]
             }
         };
 
@@ -451,7 +522,8 @@
                             borderColor: '#3b82f6',
                             backgroundColor: 'rgba(59, 130, 246, 0.1)',
                             tension: 0.3,
-                            fill: true
+                            fill: true,
+                            pointRadius: 4
                         },
                         {
                             label: 'Completed Shipments',
@@ -459,7 +531,8 @@
                             borderColor: '#22c55e',
                             backgroundColor: 'rgba(34, 197, 94, 0.1)',
                             tension: 0.3,
-                            fill: true
+                            fill: true,
+                            pointRadius: 4
                         },
                         {
                             label: 'Delayed Shipments',
@@ -467,7 +540,8 @@
                             borderColor: '#f97316',
                             backgroundColor: 'rgba(249, 115, 22, 0.1)',
                             tension: 0.3,
-                            fill: true
+                            fill: true,
+                            pointRadius: 4
                         }
                     ]
                 },
@@ -479,6 +553,10 @@
                             beginAtZero: true,
                             grid: {
                                 color: 'rgba(0, 0, 0, 0.05)'
+                            },
+                            title: {
+                                display: true,
+                                text: 'Number of Shipments'
                             }
                         },
                         x: {
@@ -505,6 +583,13 @@
                                     return `${context.dataset.label}: ${context.raw} shipments`;
                                 }
                             }
+                        },
+                        title: {
+                            display: true,
+                            text: 'Weekly Shipment Volume',
+                            font: {
+                                size: 16
+                            }
                         }
                     }
                 }
@@ -541,7 +626,7 @@
                                     if (data.labels.length && data.datasets.length) {
                                         return data.labels.map(function(label, i) {
                                             const value = data.datasets[0].data[i];
-                                            const percentage = ((value / shipmentData.shipments.reduce((a, b) => a + b, 0)) * 100).toFixed(1);
+                                            const percentage = ((value / shipmentData.statusDistribution.data.reduce((a, b) => a + b, 0)) * 100).toFixed(1);
                                             return {
                                                 text: `${label}: ${value} (${percentage}%)`,
                                                 fillStyle: data.datasets[0].backgroundColor[i],
@@ -566,6 +651,13 @@
                                     return `${label}: ${value} shipments (${percentage}%)`;
                                 }
                             }
+                        },
+                        title: {
+                            display: true,
+                            text: 'Status Breakdown',
+                            font: {
+                                size: 16
+                            }
                         }
                     }
                 }
@@ -609,6 +701,10 @@
                         x: {
                             grid: {
                                 color: 'rgba(0, 0, 0, 0.05)'
+                            },
+                            title: {
+                                display: true,
+                                text: 'Number of Shipments'
                             }
                         },
                         y: {
@@ -627,6 +723,119 @@
                                     return `${context.parsed.x} shipments`;
                                 }
                             }
+                        },
+                        title: {
+                            display: true,
+                            text: 'Port Volumes (Annual)',
+                            font: {
+                                size: 16
+                            }
+                        }
+                    }
+                }
+            });
+
+            // Clearance Times by Origin (Bar Chart)
+            const clearanceCtx = document.getElementById('clearanceTimesChart').getContext('2d');
+            const clearanceChart = new Chart(clearanceCtx, {
+                type: 'bar',
+                data: {
+                    labels: shipmentData.originData.labels,
+                    datasets: [{
+                        label: 'Average Clearance (days)',
+                        data: shipmentData.originData.clearanceTimes,
+                        backgroundColor: 'rgba(156, 163, 175, 0.7)',
+                        borderColor: 'rgb(75, 85, 99)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.05)'
+                            },
+                            title: {
+                                display: true,
+                                text: 'Days'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                display: false
+                            }
+                        }
+                    },
+                    plugins: {
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return `Avg: ${context.raw} days`;
+                                }
+                            }
+                        },
+                        title: {
+                            display: true,
+                            text: 'Clearance Times by Origin',
+                            font: {
+                                size: 16
+                            }
+                        }
+                    }
+                }
+            });
+
+            // Value Distribution Chart (Horizontal Bar)
+            const valueCtx = document.getElementById('valueDistributionChart').getContext('2d');
+            const valueChart = new Chart(valueCtx, {
+                type: 'bar',
+                data: {
+                    labels: shipmentData.valueDistribution.labels,
+                    datasets: [{
+                        label: 'Number of Shipments',
+                        data: shipmentData.valueDistribution.data,
+                        backgroundColor: 'rgba(14, 165, 233, 0.7)',
+                        borderColor: 'rgb(2, 132, 199)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    indexAxis: 'y',
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.05)'
+                            },
+                            title: {
+                                display: true,
+                                text: 'Number of Shipments'
+                            }
+                        },
+                        y: {
+                            grid: {
+                                display: false
+                            }
+                        }
+                    },
+                    plugins: {
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return `${context.parsed.x} shipments`;
+                                }
+                            }
+                        },
+                        title: {
+                            display: true,
+                            text: 'Shipment Value Distribution',
+                            font: {
+                                size: 16
+                            }
                         }
                     }
                 }
@@ -639,10 +848,11 @@
             const origins = ['China', 'Germany', 'Japan', 'Mexico', 'Canada'];
             const destinations = ['US East', 'US West', 'US Midwest', 'US South'];
             
-            // Generate 25 rows of synthetic shipment data
+            // Generate 25 rows of enhanced synthetic shipment data
             for (let i = 1; i <= 25; i++) {
                 const port = ports[Math.floor(Math.random() * ports.length)];
                 const status = statuses[Math.floor(Math.random() * statuses.length)];
+                const origin = origins[Math.floor(Math.random() * origins.length)];
                 const days = Math.floor(Math.random() * 30) + 1;
                 const arrivalDate = new Date();
                 arrivalDate.setDate(arrivalDate.getDate() + days);
@@ -659,6 +869,12 @@
                             ${port}
                         </div>
                     </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <div class="flex items-center">
+                            <i class="fas fa-globe-americas mr-2 text-green-500"></i>
+                            ${origin}
+                        </div>
+                    </td>
                     <td class="px-6 py-4 whitespace-nowrap text-sm">
                         <span class="status-pill" data-status="${status}">
                             <i class="fas fa-${status === 'Completed' ? 'check-circle' : status === 'Delayed' ? 'exclamation-triangle' : status === 'Pending' ? 'hourglass-half' : 'sync-alt'} mr-1"></i>
@@ -707,6 +923,16 @@
                     }, 300);
                 });
             });
+            
+            // Filter change functionality
+            document.querySelectorAll('.bg-card select').forEach(select => {
+                select.addEventListener('change', function() {
+                    this.parentElement.parentElement.classList.add('bg-blue-50');
+                    setTimeout(() => {
+                        this.parentElement.parentElement.classList.remove('bg-blue-50');
+                    }, 500);
+                });
+            });
         });
     </script>
 <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>

prompts.txt

@@ -1,2 +1,3 @@
 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
-there is no data in the charts.  Ensure, using synthetic customs brokerage data, that all charts are fully populated with data
+there is no data in the charts.  Ensure, using synthetic customs brokerage data, that all charts are fully populated with data
+add two additional filters to the top section