DustinSvehla/shipsync-analytics-dashboard
0
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>ShipSync Analytics Dashboard</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>11 <style>12 .vanta-bg {13 position: absolute;14 width: 100%;15 height: 100%;16 z-index: -1;17 }18 .glass-card {19 background: rgba(255, 255, 255, 0.15);20 backdrop-filter: blur(10px);21 -webkit-backdrop-filter: blur(10px);22 border-radius: 10px;23 border: 1px solid rgba(255, 255, 255, 0.18);24 }25 </style>26</head>27<body class="bg-gray-900 text-white min-h-screen">28 <div class="vanta-bg" id="vanta-bg"></div>29 30 <header class="container mx-auto px-4 py-8">31 <div class="flex justify-between items-center">32 <div>33 <h1 class="text-4xl font-bold">ShipSync <span class="text-blue-400">Analytics</span></h1>34 <p class="text-blue-200 mt-2">January 2025 - October 2025 Shipping Performance</p>35 </div>36 <div class="flex items-center space-x-4">37 <i data-feather="bell" class="text-blue-300 hover:text-blue-100 cursor-pointer"></i>38 <div class="flex items-center">39 <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">40 <i data-feather="user"></i>41 </div>42 <span class="ml-2">Admin</span>43 </div>44 </div>45 </div>46 </header>47 48 <main class="container mx-auto px-4 pb-16">49 <!-- Summary Cards -->50 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">51 <div class="glass-card p-6">52 <div class="flex items-center">53 <div class="p-3 rounded-full bg-blue-500/20">54 <i data-feather="clock" class="text-blue-400"></i>55 </div>56 <div class="ml-4">57 <p class="text-sm text-blue-200">Avg Lead Time</p>58 <h3 class="text-2xl font-bold">32 <span class="text-sm">days</span></h3>59 </div>60 </div>61 <div class="mt-4 flex items-center">62 <span class="text-sm text-red-400">+2 days from goal</span>63 </div>64 </div>65 66 <div class="glass-card p-6">67 <div class="flex items-center">68 <div class="p-3 rounded-full bg-green-500/20">69 <i data-feather="dollar-sign" class="text-green-400"></i>70 </div>71 <div class="ml-4">72 <p class="text-sm text-green-200">Total Spend</p>73 <h3 class="text-2xl font-bold">$2.02M</h3>74 </div>75 </div>76 <div class="mt-4 flex items-center">77 <span class="text-sm text-yellow-400">3% reduction target</span>78 </div>79 </div>80 81 <div class="glass-card p-6">82 <div class="flex items-center">83 <div class="p-3 rounded-full bg-purple-500/20">84 <i data-feather="package" class="text-purple-400"></i>85 </div>86 <div class="ml-4">87 <p class="text-sm text-purple-200">Items Received</p>88 <h3 class="text-2xl font-bold">7,265</h3>89 </div>90 </div>91 </div>92 93 <div class="glass-card p-6">94 <div class="flex items-center">95 <div class="p-3 rounded-full bg-yellow-500/20">96 <i data-feather="check-circle" class="text-yellow-400"></i>97 </div>98 <div class="ml-4">99 <p class="text-sm text-yellow-200">On-Time Ship %</p>100 <h3 class="text-2xl font-bold">76%</h3>101 </div>102 </div>103 <div class="mt-4 flex items-center">104 <span class="text-sm text-red-400">Target: 97%</span>105 </div>106 </div>107 </div>108 109 <!-- Main Charts -->110 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">111 <div class="glass-card p-6">112 <div class="flex justify-between items-center mb-4">113 <h3 class="text-xl font-semibold">Lead Time Distribution</h3>114 <div class="flex space-x-2">115 <button class="px-3 py-1 text-xs bg-blue-600 rounded-md">Days</button>116 <button class="px-3 py-1 text-xs bg-gray-700 rounded-md">Weeks</button>117 </div>118 </div>119 <canvas id="leadTimeChart" height="250"></canvas>120 </div>121 122 <div class="glass-card p-6">123 <div class="flex justify-between items-center mb-4">124 <h3 class="text-xl font-semibold">Shipping Performance</h3>125 </div>126 <canvas id="shipPerformanceChart" height="250"></canvas>127 </div>128 </div>129 130 <!-- Data Table -->131 <div class="glass-card overflow-hidden mb-8">132 <div class="p-6">133 <div class="flex justify-between items-center mb-4">134 <h3 class="text-xl font-semibold">Shipping Data</h3>135 <div class="relative">136 <input type="text" placeholder="Search..." class="bg-gray-700/50 border border-gray-600 rounded-md pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">137 <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>138 </div>139 </div>140 <div class="overflow-x-auto">141 <table class="min-w-full divide-y divide-gray-700">142 <thead>143 <tr>144 <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Order Date</th>145 <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Promise Date</th>146 <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Receipt Date</th>147 <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Lead Time</th>148 <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>149 </tr>150 </thead>151 <tbody class="divide-y divide-gray-700">152 <!-- Sample rows (would be populated dynamically in a real app) -->153 <tr>154 <td class="px-6 py-4 whitespace-nowrap">7/31/2025</td>155 <td class="px-6 py-4 whitespace-nowrap">10/10/2025</td>156 <td class="px-6 py-4 whitespace-nowrap">10/6/2025</td>157 <td class="px-6 py-4 whitespace-nowrap">67 days</td>158 <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-red-500/20 text-red-300">Late</span></td>159 </tr>160 <tr>161 <td class="px-6 py-4 whitespace-nowrap">7/31/2025</td>162 <td class="px-6 py-4 whitespace-nowrap">9/17/2025</td>163 <td class="px-6 py-4 whitespace-nowrap">9/23/2025</td>164 <td class="px-6 py-4 whitespace-nowrap">54 days</td>165 <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-red-500/20 text-red-300">Late</span></td>166 </tr>167 <tr>168 <td class="px-6 py-4 whitespace-nowrap">7/16/2025</td>169 <td class="px-6 py-4 whitespace-nowrap">8/8/2025</td>170 <td class="px-6 py-4 whitespace-nowrap">8/7/2025</td>171 <td class="px-6 py-4 whitespace-nowrap">22 days</td>172 <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-500/20 text-green-300">Early</span></td>173 </tr>174 <tr>175 <td class="px-6 py-4 whitespace-nowrap">5/12/2025</td>176 <td class="px-6 py-4 whitespace-nowrap">6/13/2025</td>177 <td class="px-6 py-4 whitespace-nowrap">6/4/2025</td>178 <td class="px-6 py-4 whitespace-nowrap">23 days</td>179 <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-500/20 text-green-300">Early</span></td>180 </tr>181 <tr>182 <td class="px-6 py-4 whitespace-nowrap">8/21/2025</td>183 <td class="px-6 py-4 whitespace-nowrap">10/15/2025</td>184 <td class="px-6 py-4 whitespace-nowrap">9/19/2025</td>185 <td class="px-6 py-4 whitespace-nowrap">29 days</td>186 <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-500/20 text-yellow-300">On Time</span></td>187 </tr>188 </tbody>189 </table>190 </div>191 </div>192 </div>193 194 <!-- Goals Section -->195 <div class="glass-card p-6">196 <h3 class="text-xl font-semibold mb-4">Performance Goals</h3>197 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">198 <div>199 <div class="flex items-center mb-4">200 <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-3">201 <i data-feather="target" class="w-4 h-4"></i>202 </div>203 <h4 class="font-medium">Reduce Average Lead Time</h4>204 </div>205 <p class="text-sm text-gray-300 ml-11 mb-4">Target: ≤30 days (Current: 32 days)</p>206 <div class="w-full bg-gray-700 rounded-full h-2.5 ml-11">207 <div class="bg-blue-600 h-2.5 rounded-full" style="width: 85%"></div>208 </div>209 </div>210 211 <div>212 <div class="flex items-center mb-4">213 <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center mr-3">214 <i data-feather="clock" class="w-4 h-4"></i>215 </div>216 <h4 class="font-medium">Reduce Late Shipments</h4>217 </div>218 <p class="text-sm text-gray-300 ml-11 mb-4">Target: ≤3% (Current: 24%)</p>219 <div class="w-full bg-gray-700 rounded-full h-2.5 ml-11">220 <div class="bg-green-600 h-2.5 rounded-full" style="width: 12.5%"></div>221 </div>222 </div>223 224 <div>225 <div class="flex items-center mb-4">226 <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mr-3">227 <i data-feather="dollar-sign" class="w-4 h-4"></i>228 </div>229 <h4 class="font-medium">Reduce Material Costs</h4>230 </div>231 <p class="text-sm text-gray-300 ml-11 mb-4">Target: 3% reduction per item</p>232 <div class="w-full bg-gray-700 rounded-full h-2.5 ml-11">233 <div class="bg-purple-600 h-2.5 rounded-full" style="width: 45%"></div>234 </div>235 </div>236 237 <div>238 <div class="flex items-center mb-4">239 <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center mr-3">240 <i data-feather="alert-circle" class="w-4 h-4"></i>241 </div>242 <h4 class="font-medium">Improve Communication</h4>243 </div>244 <p class="text-sm text-gray-300 ml-11 mb-4">Ensure date fields are updated pre-shipment</p>245 <div class="w-full bg-gray-700 rounded-full h-2.5 ml-11">246 <div class="bg-yellow-600 h-2.5 rounded-full" style="width: 60%"></div>247 </div>248 </div>249 </div>250 </div>251 </main>252 253 <footer class="container mx-auto px-4 py-6 text-center text-gray-400 text-sm">254 <p>© 2025 ShipSync Analytics Dashboard. All rights reserved.</p>255 </footer>256 257 <script>258 // Initialize Vanta.js background259 VANTA.GLOBE({260 el: "#vanta-bg",261 mouseControls: true,262 touchControls: true,263 gyroControls: false,264 minHeight: 200.00,265 minWidth: 200.00,266 scale: 1.00,267 scaleMobile: 1.00,268 color: 0x3b82f6,269 backgroundColor: 0x111827,270 size: 0.8271 });272 273 // Initialize charts274 document.addEventListener('DOMContentLoaded', function() {275 feather.replace();276 277 // Lead Time Distribution Chart278 const leadTimeCtx = document.getElementById('leadTimeChart').getContext('2d');279 const leadTimeChart = new Chart(leadTimeCtx, {280 type: 'bar',281 data: {282 labels: ['0-10', '11-20', '21-30', '31-40', '41-50', '51-60', '60+'],283 datasets: [{284 label: 'Number of Orders',285 data: [8, 32, 45, 28, 15, 10, 12],286 backgroundColor: 'rgba(59, 130, 246, 0.7)',287 borderColor: 'rgba(59, 130, 246, 1)',288 borderWidth: 1289 }]290 },291 options: {292 responsive: true,293 plugins: {294 legend: {295 display: false296 }297 },298 scales: {299 y: {300 beginAtZero: true,301 grid: {302 color: 'rgba(255, 255, 255, 0.1)'303 },304 ticks: {305 color: 'rgba(255, 255, 255, 0.7)'306 }307 },308 x: {309 grid: {310 display: false311 },312 ticks: {313 color: 'rgba(255, 255, 255, 0.7)'314 }315 }316 }317 }318 });319 320 // Shipping Performance Chart321 const shipPerformanceCtx = document.getElementById('shipPerformanceChart').getContext('2d');322 const shipPerformanceChart = new Chart(shipPerformanceCtx, {323 type: 'doughnut',324 data: {325 labels: ['Late', 'On Time', 'Early'],326 datasets: [{327 data: [61, 40, 151],328 backgroundColor: [329 'rgba(239, 68, 68, 0.7)',330 'rgba(234, 179, 8, 0.7)',331 'rgba(34, 197, 94, 0.7)'332 ],333 borderColor: [334 'rgba(239, 68, 68, 1)',335 'rgba(234, 179, 8, 1)',336 'rgba(34, 197, 94, 1)'337 ],338 borderWidth: 1339 }]340 },341 options: {342 responsive: true,343 plugins: {344 legend: {345 position: 'bottom',346 labels: {347 color: 'rgba(255, 255, 255, 0.7)'348 }349 }350 },351 cutout: '70%'352 }353 });354 });355 </script>356</body>357</html>358