\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}","deleted","label",[169,170,153],"frontend","components","permalink","https://www.val.town/x/Shsragab/Shippingrevolution/code/frontend/components/ShipmentForm.tsx","extension","actionData","errors"]