\n {icon}\n

{title}

{value}

\n {subtitle &&

{subtitle}

}\n

\n );\n\n const getStatusColor = (status: string) => {\n const colors = {\n pending: 'bg-yellow-100 text-yellow-800',\n picked_up: 'bg-blue-100 text-blue-800',\n in_transit: 'bg-purple-100 text-purple-800',\n out_for_delivery: 'bg-orange-100 text-orange-800',\n delivered: 'bg-green-100 text-green-800',\n exception: 'bg-red-100 text-red-800',\n cancelled: 'bg-gray-100 text-gray-800'\n };\n return colors[status as keyof typeof colors] || 'bg-gray-100 text-gray-800';\n };\n\n const formatStatus = (status: string) => {\n return status.split('_').map(word => \n word.charAt(0).toUpperCase() + word.slice(1)\n ).join(' ');\n };\n\n return (\n

\n {/* Header */}\n

Dashboard

Overview of your shipping operations

\n \n + Create Shipment\n \n

\n\n {/* Stats Grid */}\n {stats && (\n

\n \n \n \n \n

\n )}\n\n {/* Revenue and Performance */}\n {stats && (\n

Revenue

\n {formatCurrency(stats.totalRevenue)}\n

Total revenue from delivered shipments

\n \n

Performance

\n {stats.averageDeliveryTime}h\n

Average delivery time

\n )}\n\n {/* Quick Track */}\n

Quick Track

\n {\n if (e.key === 'Enter') {\n const value = (e.target as HTMLInputElement).value.trim();\n if (value) {\n onTrackShipment(value);\n (e.target as HTMLInputElement).value = '';\n }\n }\n }}\n />\n {\n const input = document.querySelector('input[placeholder=\"Enter tracking number...\"]') as HTMLInputElement;\n const value = input?.value.trim();\n if (value) {\n onTrackShipment(value);\n input.value = '';\n }\n }}\n className=\"bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors btn-primary\"\n >\n Track\n \n

\n\n {/* Recent Shipments */}\n

Recent Shipments

\n \n {loading ? (\n

Loading shipments...

\n ) : recentShipments.length === 0 ? (\n

No shipments found

\n \n Create your first shipment\n \n

\n ) : (\n

\n {recentShipments.map((shipment) => (\n

\n \n {shipment.trackingNumber}\n \n \n {formatStatus(shipment.status)}\n \n

\n {shipment.origin.city}, {shipment.origin.state}\n →\n {shipment.destination.city}, {shipment.destination.state}\n

\n {shipment.recipient.name} • {shipment.carrier.toUpperCase()}\n

\n {formatCurrency(shipment.cost)}\n

\n onTrackShipment(shipment.trackingNumber)}\n className=\"mt-1 text-sm text-blue-600 hover:text-blue-700 font-medium\"\n >\n Track →\n \n

\n ))}\n

\n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Shsragab/Shippingrevolution/code/frontend/components/Dashboard.tsx","extension","actionData","errors"]