\n {/* Navigation Header */}\n

\n 📦\n Shipping Operations\n

\n setCurrentView('dashboard')}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n currentView === 'dashboard'\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'\n }`}\n >\n Dashboard\n \n setCurrentView('create')}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n currentView === 'create'\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'\n }`}\n >\n Create Shipment\n \n setCurrentView('shipments')}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n currentView === 'shipments'\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'\n }`}\n >\n All Shipments\n \n

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

\n {\n if (e.key === 'Enter') {\n const value = (e.target as HTMLInputElement).value.trim();\n if (value) {\n handleTrackShipment(value);\n (e.target as HTMLInputElement).value = '';\n }\n }\n }}\n />\n

\n 🔍\n

\n\n {/* Mobile Navigation */}\n

\n setCurrentView('dashboard')}\n className={`block w-full text-left px-3 py-2 rounded-md text-base font-medium transition-colors ${\n currentView === 'dashboard'\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'\n }`}\n >\n Dashboard\n \n setCurrentView('create')}\n className={`block w-full text-left px-3 py-2 rounded-md text-base font-medium transition-colors ${\n currentView === 'create'\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'\n }`}\n >\n Create Shipment\n \n setCurrentView('shipments')}\n className={`block w-full text-left px-3 py-2 rounded-md text-base font-medium transition-colors ${\n currentView === 'shipments'\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'\n }`}\n >\n All Shipments\n \n

\n\n {/* Main Content */}\n

\n {currentView === 'dashboard' && (\n setCurrentView('create')}\n />\n )}\n \n {currentView === 'create' && (\n \n )}\n \n {currentView === 'track' && (\n setCurrentView('dashboard')}\n />\n )}\n \n {currentView === 'shipments' && (\n \n )}\n

\n );\n}",[],[104,256,263],{"_108":270,"_100":271,"_152":272,"_154":257,"_155":139,"_156":273,"_158":159,"_110":274,"_105":31,"_161":179,"_163":275,"_164":27,"_165":-5,"_166":276,"_103":277},"928c3e10-3f84-11f0-97aa-76b3cceeab13","Dashboard.tsx","928c3f00-3f84-11f0-97aa-76b3cceeab13",17,["D",1748849907533],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { DashboardStats, Shipment } from \"../../shared/types.ts\";\nimport { formatCurrency } from \"../../shared/utils.ts\";\n\ninterface DashboardProps {\n stats: DashboardStats | null;\n onTrackShipment: (trackingNumber: string) => void;\n onCreateShipment: () => void;\n}\n\nexport default function Dashboard({ stats, onTrackShipment, onCreateShipment }: DashboardProps) {\n const [recentShipments, setRecentShipments] = useState([]);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n loadRecentShipments();\n }, []);\n\n const loadRecentShipments = async () => {\n try {\n const response = await fetch('/api/shipments?limit=5');\n const result = await response.json();\n if (result.success) {\n setRecentShipments(result.data.data);\n }\n } catch (error) {\n console.error('Failed to load recent shipments:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const StatCard = ({ title, value, icon, color, subtitle }: {\n title: string;\n value: string | number;\n icon: string;\n color: string;\n subtitle?: string;\n }) => (\n

\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}",[],[104,256,271],{"_108":279,"_100":280,"_152":281,"_154":257,"_155":139,"_156":138,"_158":159,"_110":282,"_105":31,"_161":179,"_163":283,"_164":27,"_165":-5,"_166":284,"_103":285},"be3b8598-3f84-11f0-8ec6-76b3cceeab13","ShipmentForm.tsx","be3b8638-3f84-11f0-8ec6-76b3cceeab13",["D",1748849980823],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { CreateShipmentRequest, Carrier, ShippingRate } from \"../../shared/types.ts\";\nimport { isValidEmail, isValidPhone, isValidZipCode } from \"../../shared/utils.ts\";\n\ninterface ShipmentFormProps {\n onShipmentCreated: () => void;\n}\n\nexport default function ShipmentForm({ onShipmentCreated }: ShipmentFormProps) {\n const [formData, setFormData] = useState({\n origin: {\n street: '',\n city: '',\n state: '',\n zipCode: '',\n country: 'US'\n },\n destination: {\n street: '',\n city: '',\n state: '',\n zipCode: '',\n country: 'US'\n },\n sender: {\n name: '',\n phone: '',\n email: ''\n },\n recipient: {\n name: '',\n phone: '',\n email: ''\n },\n packages: [{\n weight: 1,\n dimensions: {\n length: 12,\n width: 12,\n height: 6\n },\n value: 100,\n description: '',\n fragile: false,\n hazardous: false\n }],\n serviceType: 'standard',\n carrier: 'ups',\n notes: ''\n });\n\n const [carriers, setCarriers] = useState([]);\n const [rates, setRates] = useState([]);\n const [loading, setLoading] = useState(false);\n const [errors, setErrors] = useState>({});\n const [step, setStep] = useState(1);\n\n useEffect(() => {\n loadCarriers();\n }, []);\n\n const loadCarriers = async () => {\n try {\n const response = await fetch('/api/routes/carriers');\n const result = await response.json();\n if (result.success) {\n setCarriers(result.data);\n }\n } catch (error) {\n console.error('Failed to load carriers:', error);\n }\n };\n\n const calculateRates = async () => {\n if (!formData.origin.zipCode || !formData.destination.zipCode || !formData.packages.length) {\n return;\n }\n\n try {\n const response = await fetch('/api/routes/rates', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n origin: formData.origin,\n destination: formData.destination,\n packages: formData.packages\n })\n });\n \n const result = await response.json();\n if (result.success) {\n setRates(result.data);\n }\n } catch (error) {\n console.error('Failed to calculate rates:', error);\n }\n };\n\n const validateForm = () => {\n const newErrors: Record = {};\n\n // Origin validation\n if (!formData.origin.street) newErrors['origin.street'] = 'Street address is required';\n if (!formData.origin.city) newErrors['origin.city'] = 'City is required';\n if (!formData.origin.state) newErrors['origin.state'] = 'State is required';\n if (!formData.origin.zipCode) newErrors['origin.zipCode'] = 'ZIP code is required';\n else if (!isValidZipCode(formData.origin.zipCode)) newErrors['origin.zipCode'] = 'Invalid ZIP code';\n\n // Destination validation\n if (!formData.destination.street) newErrors['destination.street'] = 'Street address is required';\n if (!formData.destination.city) newErrors['destination.city'] = 'City is required';\n if (!formData.destination.state) newErrors['destination.state'] = 'State is required';\n if (!formData.destination.zipCode) newErrors['destination.zipCode'] = 'ZIP code is required';\n else if (!isValidZipCode(formData.destination.zipCode)) newErrors['destination.zipCode'] = 'Invalid ZIP code';\n\n // Sender validation\n if (!formData.sender.name) newErrors['sender.name'] = 'Sender name is required';\n if (!formData.sender.phone) newErrors['sender.phone'] = 'Sender phone is required';\n else if (!isValidPhone(formData.sender.phone)) newErrors['sender.phone'] = 'Invalid phone number';\n if (!formData.sender.email) newErrors['sender.email'] = 'Sender email is required';\n else if (!isValidEmail(formData.sender.email)) newErrors['sender.email'] = 'Invalid email address';\n\n // Recipient validation\n if (!formData.recipient.name) newErrors['recipient.name'] = 'Recipient name is required';\n if (!formData.recipient.phone) newErrors['recipient.phone'] = 'Recipient phone is required';\n else if (!isValidPhone(formData.recipient.phone)) newErrors['recipient.phone'] = 'Invalid phone number';\n if (!formData.recipient.email) newErrors['recipient.email'] = 'Recipient email is required';\n else if (!isValidEmail(formData.recipient.email)) newErrors['recipient.email'] = 'Invalid email address';\n\n // Package validation\n formData.packages.forEach((pkg, index) => {\n if (!pkg.description) newErrors[`packages.${index}.description`] = 'Package description is required';\n if (pkg.weight <= 0) newErrors[`packages.${index}.weight`] = 'Weight must be greater than 0';\n if (pkg.value <= 0) newErrors[`packages.${index}.value`] = 'Value must be greater than 0';\n if (pkg.dimensions.length <= 0) newErrors[`packages.${index}.length`] = 'Length must be greater than 0';\n if (pkg.dimensions.width <= 0) newErrors[`packages.${index}.width`] = 'Width must be greater than 0';\n if (pkg.dimensions.height <= 0) newErrors[`packages.${index}.height`] = 'Height must be greater than 0';\n });\n\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!validateForm()) {\n return;\n }\n\n setLoading(true);\n try {\n const response = await fetch('/api/shipments', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(formData)\n });\n\n const result = await response.json();\n if (result.success) {\n alert(`Shipment created successfully! Tracking number: ${result.data.trackingNumber}`);\n onShipmentCreated();\n } else {\n alert(`Error: ${result.error}`);\n }\n } catch (error) {\n alert('Failed to create shipment. Please try again.');\n } finally {\n setLoading(false);\n }\n };\n\n const updateFormData = (path: string, value: any) => {\n setFormData(prev => {\n const newData = { ...prev };\n const keys = path.split('.');\n let current: any = newData;\n \n for (let i = 0; i < keys.length - 1; i++) {\n if (current[keys[i]] === undefined) {\n current[keys[i]] = {};\n }\n current = current[keys[i]];\n }\n \n current[keys[keys.length - 1]] = value;\n return newData;\n });\n };\n\n const addPackage = () => {\n setFormData(prev => ({\n ...prev,\n packages: [...prev.packages, {\n weight: 1,\n dimensions: { length: 12, width: 12, height: 6 },\n value: 100,\n description: '',\n fragile: false,\n hazardous: false\n }]\n }));\n };\n\n const removePackage = (index: number) => {\n setFormData(prev => ({\n ...prev,\n packages: prev.packages.filter((_, i) => i !== index)\n }));\n };\n\n const InputField = ({ \n label, \n path, \n type = 'text', \n required = false,\n placeholder = ''\n }: {\n label: string;\n path: string;\n type?: string;\n required?: boolean;\n placeholder?: string;\n }) => {\n const getValue = (obj: any, path: string) => {\n return path.split('.').reduce((o, p) => o?.[p], obj) || '';\n };\n\n return (\n

\n \n {label} {required && *}\n \n updateFormData(path, e.target.value)}\n placeholder={placeholder}\n className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent form-input ${\n errors[path] ? 'border-red-500' : 'border-gray-300'\n }`}\n />\n {errors[path] &&

{errors[path]}

}\n

\n );\n };\n\n const SelectField = ({ \n label, \n path, \n options, \n required = false \n }: {\n label: string;\n path: string;\n options: { value: string; label: string }[];\n required?: boolean;\n }) => {\n const getValue = (obj: any, path: string) => {\n return path.split('.').reduce((o, p) => o?.[p], obj) || '';\n };\n\n return (\n

\n \n {label} {required && *}\n \n updateFormData(path, e.target.value)}\n className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${\n errors[path] ? 'border-red-500' : 'border-gray-300'\n }`}\n >\n {options.map(option => (\n \n ))}\n \n {errors[path] &&

{errors[path]}

}\n

\n );\n };\n\n const states = [\n 'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA',\n 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD',\n 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',\n 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC',\n 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'\n ].map(state => ({ value: state, label: state }));\n\n const serviceTypes = [\n { value: 'standard', label: 'Standard (5-7 days)' },\n { value: 'expedited', label: 'Expedited (2-3 days)' },\n { value: 'two_day', label: 'Two Day' },\n { value: 'overnight', label: 'Overnight' },\n { value: 'ground', label: 'Ground (7-10 days)' }\n ];\n\n return (\n

Create New Shipment

Fill in the details to create a new shipment

\n\n

\n {/* Step 1: Addresses */}\n

\n {/* Origin Address */}\n

\n 📍\n Origin Address\n

\n \n

\n \n \n

\n \n

\n\n {/* Destination Address */}\n

\n 🎯\n Destination Address\n

\n \n

\n \n \n

\n \n

\n\n {/* Step 2: Contacts */}\n

\n {/* Sender */}\n

\n 👤\n Sender Information\n

\n \n \n \n

\n\n {/* Recipient */}\n

\n 👥\n Recipient Information\n

\n \n \n \n

\n\n {/* Step 3: Packages */}\n

\n 📦\n Package Details\n

\n \n + Add Package\n \n

\n\n {formData.packages.map((pkg, index) => (\n

Package {index + 1}

\n {formData.packages.length > 1 && (\n removePackage(index)}\n className=\"text-red-600 hover:text-red-700 text-sm\"\n >\n Remove\n \n )}\n

\n\n

\n \n \n \n \n

\n\n

\n \n \n

\n\n

\n \n updateFormData(`packages.${index}.fragile`, e.target.checked)}\n className=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n />\n Fragile\n \n \n updateFormData(`packages.${index}.hazardous`, e.target.checked)}\n className=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n />\n Hazardous\n \n

\n ))}\n

\n\n {/* Step 4: Shipping Options */}\n

\n 🚚\n Shipping Options\n

\n\n

\n ({ value: c.id, label: c.name }))}\n required \n />\n \n

\n\n

\n \n Special Instructions\n \n updateFormData('notes', e.target.value)}\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"Any special delivery instructions...\"\n />\n

\n\n {/* Rate Calculator */}\n

Shipping Rates

\n \n Calculate Rates\n \n

\n \n {rates.length > 0 && (\n

\n {rates.slice(0, 5).map((rate, index) => (\n

\n \n {rate.carrier.toUpperCase()} {rate.serviceType} ({rate.estimatedDays} days)\n \n ${rate.cost}\n

\n ))}\n

\n )}\n

\n\n {/* Submit */}\n

\n window.history.back()}\n className=\"px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors\"\n >\n Cancel\n \n \n {loading ? 'Creating...' : 'Create Shipment'}\n \n

\n );\n}",[],[104,256,280],[104,256],{"_108":288,"_100":289,"_152":290,"_154":250,"_155":139,"_156":291,"_158":159,"_110":292,"_105":31,"_161":293,"_163":294,"_164":27,"_165":-5,"_166":295,"_103":296},"5cc7d3f2-3f84-11f0-861e-76b3cceeab13","favicon.svg","5cc7d49c-3f84-11f0-861e-76b3cceeab13",13,["D",1748849817324],"file","",[],[104,289],{"_108":298,"_100":299,"_152":300,"_154":250,"_155":139,"_156":251,"_158":159,"_110":301,"_105":31,"_161":293,"_163":302,"_164":27,"_165":-5,"_166":303,"_103":304},"58371622-3f84-11f0-a07d-76b3cceeab13","index.html","583716e0-3f84-11f0-a07d-76b3cceeab13",["D",1748849809664],"\n\n\n \n \n Shipping Operations Dashboard\n \n \n \n \n\n\n

Loading Shipping Operations Dashboard...

\n \n \n\n",[],[104,299],{"_108":306,"_100":307,"_152":308,"_154":250,"_155":139,"_156":309,"_158":159,"_110":310,"_105":31,"_161":179,"_163":311,"_164":27,"_165":-5,"_166":312,"_103":313},"6ccca6c4-3f84-11f0-8a96-76b3cceeab13","index.tsx","6ccca764-3f84-11f0-8a96-76b3cceeab13",15,["D",1748849844199],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\n// Get initial data injected by the server\nconst initialData = (window as any).__INITIAL_DATA__ || null;\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[104,307],{"_108":315,"_100":316,"_152":317,"_154":250,"_155":139,"_156":318,"_158":159,"_110":319,"_105":31,"_161":293,"_163":320,"_164":27,"_165":-5,"_166":321,"_103":322},"68d5e63e-3f84-11f0-a84d-76b3cceeab13","style.css","68d5e710-3f84-11f0-a84d-76b3cceeab13",14,["D",1748849837542],"/* Custom styles for the shipping operations dashboard */\n\n/* Loading animations */\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.fade-in {\n animation: fadeIn 0.3s ease-out;\n}\n\n/* Status badge animations */\n.status-badge {\n transition: all 0.2s ease-in-out;\n}\n\n.status-badge:hover {\n transform: scale(1.05);\n}\n\n/* Card hover effects */\n.card-hover {\n transition: all 0.2s ease-in-out;\n}\n\n.card-hover:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n}\n\n/* Form input focus styles */\n.form-input {\n transition: all 0.2s ease-in-out;\n}\n\n.form-input:focus {\n transform: scale(1.02);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Button animations */\n.btn-primary {\n transition: all 0.2s ease-in-out;\n}\n\n.btn-primary:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);\n}\n\n.btn-primary:active {\n transform: translateY(0);\n}\n\n/* Progress bar animation */\n.progress-bar {\n background: linear-gradient(90deg, #3b82f6, #1d4ed8, #3b82f6);\n background-size: 200% 100%;\n animation: shimmer 2s infinite;\n}\n\n@keyframes shimmer {\n 0% { background-position: -200% 0; }\n 100% { background-position: 200% 0; }\n}\n\n/* Tracking timeline styles */\n.timeline-item {\n position: relative;\n}\n\n.timeline-item::before {\n content: '';\n position: absolute;\n left: 15px;\n top: 40px;\n bottom: -20px;\n width: 2px;\n background: #e5e7eb;\n}\n\n.timeline-item:last-child::before {\n display: none;\n}\n\n.timeline-dot {\n position: relative;\n z-index: 1;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n}\n\n/* Map container */\n.map-container {\n min-height: 400px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n}\n\n.map-placeholder {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n color: white;\n}\n\n/* Responsive table */\n.table-responsive {\n overflow-x: auto;\n}\n\n.table-responsive table {\n min-width: 600px;\n}\n\n/* Mobile optimizations */\n@media (max-width: 768px) {\n .mobile-stack {\n flex-direction: column;\n }\n \n .mobile-full {\n width: 100%;\n }\n \n .mobile-text-sm {\n font-size: 0.875rem;\n }\n}\n\n/* Print styles */\n@media print {\n .no-print {\n display: none !important;\n }\n \n .print-break {\n page-break-after: always;\n }\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n .dark-mode {\n background-color: #1f2937;\n color: #f9fafb;\n }\n \n .dark-mode .bg-white {\n background-color: #374151;\n }\n \n .dark-mode .text-gray-900 {\n color: #f9fafb;\n }\n \n .dark-mode .text-gray-600 {\n color: #d1d5db;\n }\n \n .dark-mode .border-gray-200 {\n border-color: #4b5563;\n }\n}",[],[104,316],[104],{"_108":325,"_100":326,"_152":327,"_154":-5,"_155":139,"_156":328,"_158":159,"_110":329,"_105":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":330,"_103":348},"315cd2ae-3f7e-11f0-88aa-76b3cceeab13","shared","6de60aef-890f-4595-adec-15171bec4210",2,["D",1748847167495],[331,339],{"_108":332,"_100":333,"_152":334,"_154":327,"_155":139,"_156":328,"_158":159,"_110":335,"_105":31,"_161":179,"_163":336,"_164":27,"_165":-5,"_166":337,"_103":338},"315cbe5e-3f7e-11f0-88aa-76b3cceeab13","types.ts","315cbf58-3f7e-11f0-88aa-76b3cceeab13",["D",1748847167495],"// Shared TypeScript interfaces for the shipping operation system\n\nexport interface Address {\n street: string;\n city: string;\n state: string;\n zipCode: string;\n country: string;\n latitude?: number;\n longitude?: number;\n}\n\nexport interface Contact {\n name: string;\n phone: string;\n email: string;\n}\n\nexport interface Package {\n id: string;\n weight: number; // in pounds\n dimensions: {\n length: number; // in inches\n width: number;\n height: number;\n };\n value: number; // in USD\n description: string;\n fragile: boolean;\n hazardous: boolean;\n}\n\nexport type ShipmentStatus = \n | 'pending'\n | 'picked_up'\n | 'in_transit'\n | 'out_for_delivery'\n | 'delivered'\n | 'exception'\n | 'cancelled';\n\nexport type ServiceType = \n | 'standard'\n | 'expedited'\n | 'overnight'\n | 'two_day'\n | 'ground';\n\nexport type CarrierType = \n | 'ups'\n | 'fedex'\n | 'usps'\n | 'dhl'\n | 'local';\n\nexport interface Shipment {\n id: string;\n trackingNumber: string;\n carrier: CarrierType;\n serviceType: ServiceType;\n status: ShipmentStatus;\n \n // Addresses\n origin: Address;\n destination: Address;\n \n // Contacts\n sender: Contact;\n recipient: Contact;\n \n // Package details\n packages: Package[];\n \n // Shipping details\n estimatedDelivery: string; // ISO date string\n actualDelivery?: string; // ISO date string\n cost: number;\n \n // Timestamps\n createdAt: string; // ISO date string\n updatedAt: string; // ISO date string\n \n // Optional fields\n notes?: string;\n signature?: string;\n proofOfDelivery?: string;\n}\n\nexport interface TrackingEvent {\n id: string;\n shipmentId: string;\n status: ShipmentStatus;\n location: string;\n timestamp: string; // ISO date string\n description: string;\n scanType?: string;\n}\n\nexport interface Route {\n id: string;\n driverId?: string;\n shipmentIds: string[];\n stops: Address[];\n estimatedDistance: number; // in miles\n estimatedDuration: number; // in minutes\n optimized: boolean;\n createdAt: string;\n}\n\nexport interface Carrier {\n id: CarrierType;\n name: string;\n services: ServiceType[];\n trackingUrlTemplate: string; // e.g., \"https://www.ups.com/track?tracknum={trackingNumber}\"\n apiEndpoint?: string;\n}\n\nexport interface ShippingRate {\n carrier: CarrierType;\n serviceType: ServiceType;\n cost: number;\n estimatedDays: number;\n guaranteed: boolean;\n}\n\nexport interface DashboardStats {\n totalShipments: number;\n pendingShipments: number;\n inTransitShipments: number;\n deliveredToday: number;\n totalRevenue: number;\n averageDeliveryTime: number; // in hours\n}\n\n// API Response types\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n message?: string;\n}\n\nexport interface PaginatedResponse {\n data: T[];\n total: number;\n page: number;\n limit: number;\n hasMore: boolean;\n}\n\n// Form types\nexport interface CreateShipmentRequest {\n origin: Address;\n destination: Address;\n sender: Contact;\n recipient: Contact;\n packages: Omit[];\n serviceType: ServiceType;\n carrier: CarrierType;\n notes?: string;\n}\n\nexport interface UpdateShipmentRequest {\n status?: ShipmentStatus;\n estimatedDelivery?: string;\n actualDelivery?: string;\n notes?: string;\n signature?: string;\n proofOfDelivery?: string;\n}\n\nexport interface RouteOptimizationRequest {\n shipmentIds: string[];\n startLocation?: Address;\n maxStops?: number;\n vehicleCapacity?: number;\n}",[],[326,333],{"_108":340,"_100":341,"_152":342,"_154":327,"_155":139,"_156":343,"_158":159,"_110":344,"_105":31,"_161":179,"_163":345,"_164":27,"_165":-5,"_166":346,"_103":347},"41105c66-3f7e-11f0-a9cc-76b3cceeab13","utils.ts","41105d38-3f7e-11f0-a9cc-76b3cceeab13",3,["D",1748847193843],"// Shared utility functions for the shipping operation system\n\nimport type { Address, Package, ShipmentStatus } from './types.ts';\n\n/**\n * Generate a unique tracking number\n */\nexport function generateTrackingNumber(carrier: string): string {\n const prefix = carrier.toUpperCase().substring(0, 3);\n const timestamp = Date.now().toString().slice(-8);\n const random = Math.random().toString(36).substring(2, 6).toUpperCase();\n return `${prefix}${timestamp}${random}`;\n}\n\n/**\n * Generate a unique ID\n */\nexport function generateId(): string {\n return Math.random().toString(36).substring(2) + Date.now().toString(36);\n}\n\n/**\n * Calculate distance between two addresses using Haversine formula\n */\nexport function calculateDistance(addr1: Address, addr2: Address): number {\n if (!addr1.latitude || !addr1.longitude || !addr2.latitude || !addr2.longitude) {\n return 0;\n }\n\n const R = 3959; // Earth's radius in miles\n const dLat = toRadians(addr2.latitude - addr1.latitude);\n const dLon = toRadians(addr2.longitude - addr1.longitude);\n \n const a = \n Math.sin(dLat / 2) * Math.sin(dLat / 2) +\n Math.cos(toRadians(addr1.latitude)) * Math.cos(toRadians(addr2.latitude)) *\n Math.sin(dLon / 2) * Math.sin(dLon / 2);\n \n const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n return R * c;\n}\n\nfunction toRadians(degrees: number): number {\n return degrees * (Math.PI / 180);\n}\n\n/**\n * Calculate package volume in cubic inches\n */\nexport function calculateVolume(pkg: Package): number {\n return pkg.dimensions.length * pkg.dimensions.width * pkg.dimensions.height;\n}\n\n/**\n * Calculate total weight of packages\n */\nexport function calculateTotalWeight(packages: Package[]): number {\n return packages.reduce((total, pkg) => total + pkg.weight, 0);\n}\n\n/**\n * Calculate total value of packages\n */\nexport function calculateTotalValue(packages: Package[]): number {\n return packages.reduce((total, pkg) => total + pkg.value, 0);\n}\n\n/**\n * Estimate shipping cost based on weight, distance, and service type\n */\nexport function estimateShippingCost(\n weight: number,\n distance: number,\n serviceType: string\n): number {\n const baseRate = 5.99;\n const weightRate = weight * 0.75;\n const distanceRate = distance * 0.15;\n \n const serviceMultiplier = {\n standard: 1.0,\n expedited: 1.5,\n two_day: 2.0,\n overnight: 3.0,\n ground: 0.8\n }[serviceType] || 1.0;\n \n return Math.round((baseRate + weightRate + distanceRate) * serviceMultiplier * 100) / 100;\n}\n\n/**\n * Estimate delivery time based on distance and service type\n */\nexport function estimateDeliveryTime(distance: number, serviceType: string): number {\n const baseDays = {\n overnight: 1,\n two_day: 2,\n expedited: 3,\n standard: 5,\n ground: 7\n }[serviceType] || 5;\n \n // Add extra days for long distances\n const extraDays = distance > 1000 ? 2 : distance > 500 ? 1 : 0;\n \n return baseDays + extraDays;\n}\n\n/**\n * Format address as a single string\n */\nexport function formatAddress(address: Address): string {\n return `${address.street}, ${address.city}, ${address.state} ${address.zipCode}, ${address.country}`;\n}\n\n/**\n * Get status color for UI display\n */\nexport function getStatusColor(status: ShipmentStatus): string {\n const colors = {\n pending: 'text-yellow-600 bg-yellow-100',\n picked_up: 'text-blue-600 bg-blue-100',\n in_transit: 'text-purple-600 bg-purple-100',\n out_for_delivery: 'text-orange-600 bg-orange-100',\n delivered: 'text-green-600 bg-green-100',\n exception: 'text-red-600 bg-red-100',\n cancelled: 'text-gray-600 bg-gray-100'\n };\n \n return colors[status] || 'text-gray-600 bg-gray-100';\n}\n\n/**\n * Get human-readable status text\n */\nexport function getStatusText(status: ShipmentStatus): string {\n const statusTexts = {\n pending: 'Pending Pickup',\n picked_up: 'Picked Up',\n in_transit: 'In Transit',\n out_for_delivery: 'Out for Delivery',\n delivered: 'Delivered',\n exception: 'Exception',\n cancelled: 'Cancelled'\n };\n \n return statusTexts[status] || status;\n}\n\n/**\n * Validate email address\n */\nexport function isValidEmail(email: string): boolean {\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n return emailRegex.test(email);\n}\n\n/**\n * Validate phone number (basic US format)\n */\nexport function isValidPhone(phone: string): boolean {\n const phoneRegex = /^\$?([0-9]{3})\$?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;\n return phoneRegex.test(phone);\n}\n\n/**\n * Validate ZIP code (US format)\n */\nexport function isValidZipCode(zipCode: string): boolean {\n const zipRegex = /^\\d{5}(-\\d{4})?$/;\n return zipRegex.test(zipCode);\n}\n\n/**\n * Format date for display\n */\nexport function formatDate(dateString: string): string {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit'\n });\n}\n\n/**\n * Format currency\n */\nexport function formatCurrency(amount: number): string {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD'\n }).format(amount);\n}\n\n/**\n * Debounce function for search inputs\n */\nexport function debounce any>(\n func: T,\n wait: number\n): (...args: Parameters) => void {\n let timeout: number;\n return (...args: Parameters) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => func(...args), wait);\n };\n}",[],[326,341],[326],{"_108":350,"_100":351,"_152":352,"_154":-5,"_155":139,"_156":242,"_158":159,"_110":353,"_105":31,"_161":293,"_163":354,"_164":27,"_165":-5,"_166":355,"_103":356},"269bc0b4-3f7e-11f0-aa5b-76b3cceeab13","README.md","269bc172-3f7e-11f0-aa5b-76b3cceeab13",["D",1748847149456],"# Shipping Operation Coder\n\nA comprehensive shipping operations management system built on Val Town.\n\n## Features\n\n- **Shipment Management**: Create, track, and manage shipments\n- **Route Optimization**: Calculate optimal delivery routes\n- **Tracking System**: Real-time shipment tracking with status updates\n- **Carrier Integration**: Support for multiple shipping carriers\n- **Cost Calculator**: Shipping cost estimation based on weight, distance, and service type\n- **Dashboard**: Operations dashboard for monitoring all shipments\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema setup\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ ├── shipments.ts # Shipment CRUD operations\n│ │ ├── tracking.ts # Tracking endpoints\n│ │ ├── routes.ts # Route optimization\n│ │ └── static.ts # Static file serving\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── Dashboard.tsx # Operations dashboard\n│ │ ├── ShipmentForm.tsx # Create/edit shipments\n│ │ ├── TrackingView.tsx # Shipment tracking interface\n│ │ └── RouteMap.tsx # Route visualization\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Custom styles\n└── shared/\n ├── types.ts # Shared TypeScript interfaces\n └── utils.ts # Shared utility functions\n```\n\n## API Endpoints\n\n- `GET /api/shipments` - List all shipments\n- `POST /api/shipments` - Create new shipment\n- `GET /api/shipments/:id` - Get shipment details\n- `PUT /api/shipments/:id` - Update shipment\n- `DELETE /api/shipments/:id` - Delete shipment\n- `GET /api/tracking/:trackingNumber` - Track shipment\n- `POST /api/routes/optimize` - Calculate optimal route\n- `GET /api/carriers` - List available carriers\n\n## Getting Started\n\n1. The system automatically sets up the database on first run\n2. Access the dashboard at the root URL\n3. Create shipments using the form interface\n4. Track shipments using tracking numbers\n5. View optimized routes for deliveries\n\n## Technologies Used\n\n- **Backend**: Hono.js, SQLite\n- **Frontend**: React, TypeScript, TailwindCSS\n- **Mapping**: OpenStreetMap integration\n- **Styling**: TailwindCSS via Twind",[],[351],"files",[149,168,174,183,193,200,209,217,226,236,248,254,261,269,278,287,297,305,314,324,331,339,349],"counts",{"_361":31,"_362":242,"_363":31,"_364":31},"pulls","branches","forks","envVars","contents",[367,370,373,376,379],{"_108":255,"_100":256,"_152":257,"_154":250,"_155":139,"_156":258,"_158":159,"_110":368,"_105":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":369},["D",1748849871859],[104,256],{"_108":288,"_100":289,"_152":290,"_154":250,"_155":139,"_156":291,"_158":159,"_110":371,"_105":31,"_161":293,"_163":294,"_164":27,"_165":-5,"_103":372},["D",1748849817324],[104,289],{"_108":298,"_100":299,"_152":300,"_154":250,"_155":139,"_156":251,"_158":159,"_110":374,"_105":31,"_161":293,"_163":302,"_164":27,"_165":-5,"_103":375},["D",1748849809664],[104,299],{"_108":306,"_100":307,"_152":308,"_154":250,"_155":139,"_156":309,"_158":159,"_110":377,"_105":31,"_161":179,"_163":311,"_164":27,"_165":-5,"_103":378},["D",1748849844199],[104,307],{"_108":315,"_100":316,"_152":317,"_154":250,"_155":139,"_156":318,"_158":159,"_110":380,"_105":31,"_161":293,"_163":320,"_164":27,"_165":-5,"_103":381},["D",1748849837542],[104,316],{"_108":249,"_100":104,"_152":250,"_154":-5,"_155":139,"_156":251,"_158":159,"_110":383,"_105":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":384},["D",1748849809664],[104],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_98":99,"_100":101,"_102":42,"_105":-7,"_103":104,"_106":391,"_147":395,"_357":465,"_293":466,"_365":468,"_479":-5,"_480":27,"_481":-5,"_482":-5,"_483":-5,"_484":485},{"_108":109,"_100":101,"_110":392,"_112":-5,"_113":27,"_114":115,"_116":-5,"_117":-5,"_12":118,"_119":-5,"_120":27,"_121":-5,"_122":31,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":27,"_21":393,"_136":394},["D",1748847110812],{"_98":99,"_134":135},{"_105":138,"_100":42,"_108":139,"_140":109,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":101,"_146":99},[396,426,453,462],{"_108":150,"_100":151,"_152":153,"_154":-5,"_155":139,"_156":157,"_158":159,"_110":160,"_105":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":397,"_103":425},[398,407,422],{"_108":169,"_100":170,"_152":171,"_154":153,"_155":139,"_156":157,"_158":159,"_110":172,"_105":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":399,"_103":406},[400,403],{"_108":175,"_100":176,"_152":177,"_154":171,"_155":139,"_156":157,"_158":159,"_110":178,"_105":31,"_161":179,"_163":180,"_164":27,"_165":-5,"_166":401,"_103":402},[],[151,170,176],{"_108":184,"_100":185,"_152":186,"_154":171,"_155":139,"_156":187,"_158":159,"_110":188,"_105":31,"_161":179,"_163":189,"_164":27,"_165":-5,"_166":404,"_103":405},[],[151,170,185],[151,170],{"_108":194,"_100":195,"_152":196,"_154":153,"_155":139,"_156":197,"_158":159,"_110":198,"_105":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":408,"_103":421},[409,412,415,418],{"_108":201,"_100":202,"_152":203,"_154":196,"_155":139,"_156":204,"_158":159,"_110":205,"_105":31,"_161":179,"_163":206,"_164":27,"_165":-5,"_166":410,"_103":411},[],[151,195,202],{"_108":210,"_100":211,"_152":212,"_154":196,"_155":139,"_156":197,"_158":159,"_110":213,"_105":31,"_161":179,"_163":214,"_164":27,"_165":-5,"_166":413,"_103":414},[],[151,195,211],{"_108":218,"_100":219,"_152":220,"_154":196,"_155":139,"_156":221,"_158":159,"_110":222,"_105":31,"_161":179,"_163":223,"_164":27,"_165":-5,"_166":416,"_103":417},[],[151,195,219],{"_108":227,"_100":228,"_152":229,"_154":196,"_155":139,"_156":230,"_158":159,"_110":231,"_105":31,"_161":179,"_163":232,"_164":27,"_165":-5,"_166":419,"_103":420},[],[151,195,228],[151,195],{"_108":237,"_100":238,"_152":239,"_154":153,"_155":139,"_156":240,"_158":159,"_110":241,"_105":242,"_161":243,"_163":244,"_164":27,"_165":-5,"_166":423,"_103":424},[],[151,238],[151],{"_108":249,"_100":104,"_152":250,"_154":-5,"_155":139,"_156":251,"_158":159,"_110":252,"_105":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":427,"_103":452},[428,440,443,446,449],{"_108":255,"_100":256,"_152":257,"_154":250,"_155":139,"_156":258,"_158":159,"_110":259,"_105":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":429,"_103":439},[430,433,436],{"_108":262,"_100":263,"_152":264,"_154":257,"_155":139,"_156":258,"_158":159,"_110":265,"_105":31,"_161":179,"_163":266,"_164":27,"_165":-5,"_166":431,"_103":432},[],[104,256,263],{"_108":270,"_100":271,"_152":272,"_154":257,"_155":139,"_156":273,"_158":159,"_110":274,"_105":31,"_161":179,"_163":275,"_164":27,"_165":-5,"_166":434,"_103":435},[],[104,256,271],{"_108":279,"_100":280,"_152":281,"_154":257,"_155":139,"_156":138,"_158":159,"_110":282,"_105":31,"_161":179,"_163":283,"_164":27,"_165":-5,"_166":437,"_103":438},[],[104,256,280],[104,256],{"_108":288,"_100":289,"_152":290,"_154":250,"_155":139,"_156":291,"_158":159,"_110":292,"_105":31,"_161":293,"_163":294,"_164":27,"_165":-5,"_166":441,"_103":442},[],[104,289],{"_108":298,"_100":299,"_152":300,"_154":250,"_155":139,"_156":251,"_158":159,"_110":301,"_105":31,"_161":293,"_163":302,"_164":27,"_165":-5,"_166":444,"_103":445},[],[104,299],{"_108":306,"_100":307,"_152":308,"_154":250,"_155":139,"_156":309,"_158":159,"_110":310,"_105":31,"_161":179,"_163":311,"_164":27,"_165":-5,"_166":447,"_103":448},[],[104,307],{"_108":315,"_100":316,"_152":317,"_154":250,"_155":139,"_156":318,"_158":159,"_110":319,"_105":31,"_161":293,"_163":320,"_164":27,"_165":-5,"_166":450,"_103":451},[],[104,316],[104],{"_108":325,"_100":326,"_152":327,"_154":-5,"_155":139,"_156":328,"_158":159,"_110":329,"_105":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":454,"_103":461},[455,458],{"_108":332,"_100":333,"_152":334,"_154":327,"_155":139,"_156":328,"_158":159,"_110":335,"_105":31,"_161":179,"_163":336,"_164":27,"_165":-5,"_166":456,"_103":457},[],[326,333],{"_108":340,"_100":341,"_152":342,"_154":327,"_155":139,"_156":343,"_158":159,"_110":344,"_105":31,"_161":179,"_163":345,"_164":27,"_165":-5,"_166":459,"_103":460},[],[326,341],[326],{"_108":350,"_100":351,"_152":352,"_154":-5,"_155":139,"_156":242,"_158":159,"_110":353,"_105":31,"_161":293,"_163":354,"_164":27,"_165":-5,"_166":463,"_103":464},[],[351],[396,398,400,403,407,409,412,415,418,422,426,428,430,433,436,440,443,446,449,453,455,458,462],{"_108":249,"_100":104,"_152":250,"_154":-5,"_155":139,"_156":251,"_158":159,"_110":383,"_105":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":467},[104],[469,471,473,475,477],{"_108":255,"_100":256,"_152":257,"_154":250,"_155":139,"_156":258,"_158":159,"_110":368,"_105":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":470},[104,256],{"_108":288,"_100":289,"_152":290,"_154":250,"_155":139,"_156":291,"_158":159,"_110":371,"_105":31,"_161":293,"_163":294,"_164":27,"_165":-5,"_103":472},[104,289],{"_108":298,"_100":299,"_152":300,"_154":250,"_155":139,"_156":251,"_158":159,"_110":374,"_105":31,"_161":293,"_163":302,"_164":27,"_165":-5,"_103":474},[104,299],{"_108":306,"_100":307,"_152":308,"_154":250,"_155":139,"_156":309,"_158":159,"_110":377,"_105":31,"_161":179,"_163":311,"_164":27,"_165":-5,"_103":476},[104,307],{"_108":315,"_100":316,"_152":317,"_154":250,"_155":139,"_156":318,"_158":159,"_110":380,"_105":31,"_161":293,"_163":320,"_164":27,"_165":-5,"_103":478},[104,316],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"routes/_app","actionData","errors"]