function MainComponent() { const [dimensions, setDimensions] = useState({ length: "", width: "", height: "", weight: "", quantity: "1" }); const [selectedAircraft, setSelectedAircraft] = useState(""); const [selectedAircraftDetails, setSelectedAircraftDetails] = useState(null); const [aircraft, setAircraft] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [result, setResult] = useState(null); const [checking, setChecking] = useState(false); const [alternativeAircraft, setAlternativeAircraft] = useState([]); useEffect(()=>{ async function fetchAircraft() { try { const response = await fetch("/api/listaircraft", { method: "POST" }); if (!response.ok) { throw new Error("Failed to fetch aircraft data"); } const data = await response.json(); // Sort aircraft by payload capacity const sortedAircraft = [ ...data.aircraft ].sort((a, b)=>a.max_payload - b.max_payload); setAircraft(sortedAircraft); } catch (err) { console.error("Error fetching aircraft:", err); setError("Could not load aircraft data"); } finally{ setLoading(false); } } fetchAircraft(); }, []); // Update selected aircraft details when aircraft is selected useEffect(()=>{ if (selectedAircraft && aircraft.length > 0) { const details = aircraft.find((a)=>a.name === selectedAircraft); setSelectedAircraftDetails(details); } else { setSelectedAircraftDetails(null); } }, [ selectedAircraft, aircraft ]); const findAlternativeAircraft = (dimensions, weight)=>{ return aircraft.filter((a)=>// Check if cargo fits in this aircraft dimensions.width <= a.door_width && dimensions.height <= a.door_height && dimensions.length <= a.hold_length && dimensions.width <= a.hold_width && dimensions.height <= a.hold_height && weight <= a.max_payload && // Don't include the currently selected aircraft a.name !== selectedAircraft)// Sort by payload capacity (ascending) to get smallest capable aircraft .sort((a, b)=>a.max_payload - b.max_payload)// Take first 3 .slice(0, 3); }; const handleCheck = async ()=>{ setResult(null); setError(null); setAlternativeAircraft([]); const values = Object.values(dimensions); if (values.some((v)=>!v) || !selectedAircraft) { setError("Please fill in all fields"); return; } const numericDimensions = {}; for (const [key, value] of Object.entries(dimensions)){ const num = Number(value); if (isNaN(num) || num <= 0) { setError("Please enter valid positive numbers"); return; } numericDimensions[key] = num; } // Calculate total weight and validate against aircraft capacity const totalWeight = numericDimensions.weight * numericDimensions.quantity; setChecking(true); try { const response = await fetch("/api/checkloadability", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ length: Number(dimensions.length), width: Number(dimensions.width), height: Number(dimensions.height), weight: totalWeight, quantity: Number(dimensions.quantity), aircraftName: selectedAircraft }) }); if (!response.ok) { throw new Error("Failed to check loadability"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setResult(data); // Find alternative aircraft if current one doesn't work const alternatives = findAlternativeAircraft(numericDimensions, Number(dimensions.weight)); setAlternativeAircraft(alternatives); } catch (err) { console.error("Error checking loadability:", err); setError(err.message || "Failed to check loadability"); } finally{ setChecking(false); } }; const handleReset = ()=>{ setDimensions({ length: "", width: "", height: "", weight: "", quantity: "1" }); setSelectedAircraft(""); setResult(null); setError(null); setAlternativeAircraft([]); }; const isValidInput = (value)=>{ const num = Number(value); return !isNaN(num) && num > 0; }; return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white", __source: { fileName: "", lineNumber: 156, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto p-3", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-light mb-4", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, "Aircraft Loadability Check"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-200 p-4 rounded-md shadow-sm", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-3", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-gray-600 mb-1 block", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, "Aircraft Type ", /*#__PURE__*/ React.createElement("span", { className: "text-red-400", __source: { fileName: "", lineNumber: 165, columnNumber: 31 }, __self: this }, "*")), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, "Loading aircraft...") : error ? /*#__PURE__*/ React.createElement("div", { className: "text-sm text-red-500", __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, error) : /*#__PURE__*/ React.createElement("select", { className: "w-full p-1.5 border border-gray-200 rounded-md focus:outline-none focus:border-blue-400", value: selectedAircraft, onChange: (e)=>setSelectedAircraft(e.target.value), __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this }, "Select an aircraft"), aircraft.map((a, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: a.name, __source: { fileName: "", lineNumber: 179, columnNumber: 21 }, __self: this }, a.name)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-gray-600 mb-1 block", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }, "Quantity ", /*#__PURE__*/ React.createElement("span", { className: "text-red-400", __source: { fileName: "", lineNumber: 190, columnNumber: 26 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "number", min: "1", step: "1", placeholder: "Number of items", className: `w-full p-1.5 border rounded-md focus:outline-none focus:border-blue-400 ${dimensions.quantity && !isValidInput(dimensions.quantity) ? "border-red-400" : "border-gray-200"}`, value: dimensions.quantity, onChange: (e)=>setDimensions({ ...dimensions, quantity: e.target.value }), __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-gray-600 mb-1 block", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, "Length (in) ", /*#__PURE__*/ React.createElement("span", { className: "text-red-400", __source: { fileName: "", lineNumber: 212, columnNumber: 29 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "number", min: "0", step: "any", placeholder: "Enter length", className: `w-full p-1.5 border rounded-md focus:outline-none focus:border-blue-400 ${dimensions.length && !isValidInput(dimensions.length) ? "border-red-400" : "border-gray-200"}`, value: dimensions.length, onChange: (e)=>setDimensions({ ...dimensions, length: e.target.value }), __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-gray-600 mb-1 block", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, "Width (in) ", /*#__PURE__*/ React.createElement("span", { className: "text-red-400", __source: { fileName: "", lineNumber: 234, columnNumber: 28 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "number", min: "0", step: "any", placeholder: "Enter width", className: `w-full p-1.5 border rounded-md focus:outline-none focus:border-blue-400 ${dimensions.width && !isValidInput(dimensions.width) ? "border-red-400" : "border-gray-200"}`, value: dimensions.width, onChange: (e)=>setDimensions({ ...dimensions, width: e.target.value }), __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-gray-600 mb-1 block", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, "Height (in) ", /*#__PURE__*/ React.createElement("span", { className: "text-red-400", __source: { fileName: "", lineNumber: 256, columnNumber: 29 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "number", min: "0", step: "any", placeholder: "Enter height", className: `w-full p-1.5 border rounded-md focus:outline-none focus:border-blue-400 ${dimensions.height && !isValidInput(dimensions.height) ? "border-red-400" : "border-gray-200"}`, value: dimensions.height, onChange: (e)=>setDimensions({ ...dimensions, height: e.target.value }), __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-gray-600 mb-1 block", __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }, "Weight per item (lbs) ", /*#__PURE__*/ React.createElement("span", { className: "text-red-400", __source: { fileName: "", lineNumber: 278, columnNumber: 39 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "number", min: "0", step: "any", placeholder: "Enter weight per item", className: `w-full p-1.5 border rounded-md focus:outline-none focus:border-blue-400 ${dimensions.weight && !isValidInput(dimensions.weight) ? "border-red-400" : "border-gray-200"}`, value: dimensions.weight, onChange: (e)=>setDimensions({ ...dimensions, weight: e.target.value }), __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-3 bg-gray-50 rounded-md text-sm", __source: { fileName: "", lineNumber: 299, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium mb-2", __source: { fileName: "", lineNumber: 300, columnNumber: 13 }, __self: this }, "Selected Aircraft Specifications:"), selectedAircraftDetails ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 304, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 305, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 306, columnNumber: 19 }, __self: this }, "Door Size:"), " ", selectedAircraftDetails.door_width, '" ×', " ", selectedAircraftDetails.door_height, '"'), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 310, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 311, columnNumber: 19 }, __self: this }, "Hold Size:"), " ", selectedAircraftDetails.hold_length, '" ×', " ", selectedAircraftDetails.hold_width, '" ×', " ", selectedAircraftDetails.hold_height, '"'), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 316, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 317, columnNumber: 19 }, __self: this }, "Max Payload:"), " ", selectedAircraftDetails.max_payload.toLocaleString(), " lbs")) : /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 italic", __source: { fileName: "", lineNumber: 322, columnNumber: 15 }, __self: this }, "Selected aircraft details will appear here")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-3 text-sm text-red-500", __source: { fileName: "", lineNumber: 328, columnNumber: 21 }, __self: this }, error), result && /*#__PURE__*/ React.createElement("div", { className: "mt-3", __source: { fileName: "", lineNumber: 332, columnNumber: 13 }, __self: this }, result.loadable ? /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-green-50 text-green-700 rounded-md", __source: { fileName: "", lineNumber: 334, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-base font-medium", __source: { fileName: "", lineNumber: 335, columnNumber: 19 }, __self: this }, "✓ Cargo can be loaded"), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-1", __source: { fileName: "", lineNumber: 338, columnNumber: 19 }, __self: this }, dimensions.quantity, " ", dimensions.quantity === "1" ? "item" : "items", " (total weight:", " ", (Number(dimensions.weight) * Number(dimensions.quantity)).toLocaleString(), " ", "lbs) can be loaded on ", selectedAircraft)) : /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-red-50 text-red-700 rounded-md", __source: { fileName: "", lineNumber: 349, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-base font-medium", __source: { fileName: "", lineNumber: 350, columnNumber: 19 }, __self: this }, "✗ Cargo cannot be loaded"), /*#__PURE__*/ React.createElement("ul", { className: "mt-1 ml-4 list-disc text-sm", __source: { fileName: "", lineNumber: 353, columnNumber: 19 }, __self: this }, !result.constraints.doorFit && /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 355, columnNumber: 23 }, __self: this }, "Individual item is too large for the aircraft door"), !result.constraints.holdFit && /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 360, columnNumber: 23 }, __self: this }, "Total cargo is too large for the aircraft hold"), !result.constraints.weightOk && /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 363, columnNumber: 23 }, __self: this }, "Total weight (", (Number(dimensions.weight) * Number(dimensions.quantity)).toLocaleString(), " ", "lbs) exceeds the aircraft's payload limit")))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-3 bg-blue-50 rounded-md", __source: { fileName: "", lineNumber: 379, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-base font-medium text-blue-700 mb-2", __source: { fileName: "", lineNumber: 380, columnNumber: 13 }, __self: this }, "Alternative Aircraft Options:"), alternativeAircraft.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 384, columnNumber: 15 }, __self: this }, alternativeAircraft.map((aircraft, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-sm", __source: { fileName: "", lineNumber: 386, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-blue-700", __source: { fileName: "", lineNumber: 387, columnNumber: 21 }, __self: this }, aircraft.name), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-4 text-blue-600", __source: { fileName: "", lineNumber: 390, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 391, columnNumber: 23 }, __self: this }, "Door: ", aircraft.door_width, '" × ', aircraft.door_height, '"'), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 394, columnNumber: 23 }, __self: this }, "Hold: ", aircraft.hold_length, '" × ', aircraft.hold_width, '" ×', " ", aircraft.hold_height, '"'), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 398, columnNumber: 23 }, __self: this }, "Max Payload: ", aircraft.max_payload.toLocaleString(), " lbs"))))) : /*#__PURE__*/ React.createElement("div", { className: "text-blue-600 italic", __source: { fileName: "", lineNumber: 406, columnNumber: 15 }, __self: this }, "Alternative aircraft recommendations will appear here")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex gap-3", __source: { fileName: "", lineNumber: 412, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-6 py-1.5 bg-blue-500 text-white text-sm rounded-md hover:bg-blue-600 transition-colors disabled:bg-blue-300", onClick: handleCheck, disabled: checking || loading, __source: { fileName: "", lineNumber: 413, columnNumber: 13 }, __self: this }, checking ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 419, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 420, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 426, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", __source: { fileName: "", lineNumber: 434, columnNumber: 21 }, __self: this })), "Checking...") : "Check Loadability"), /*#__PURE__*/ React.createElement("button", { className: "px-6 py-1.5 border border-gray-300 text-gray-600 text-sm rounded-md hover:bg-gray-50 transition-colors", onClick: handleReset, __source: { fileName: "", lineNumber: 446, columnNumber: 13 }, __self: this }, "Reset"))))); }