function MainComponent() { const [aeration, setAeration] = React.useState(''); const [species, setSpecies] = React.useState(''); const [weight, setWeight] = React.useState(''); const [temperature, setTemperature] = React.useState(''); const [result, setResult] = React.useState(''); const handleAerationChange = (event)=>{ setAeration(event.target.value); }; const handleSpeciesChange = (event)=>{ setSpecies(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); let N; const W = parseFloat(weight); const T = parseFloat(temperature); const speciesConstants = { Pangasius: { k1: 1, a: 0.364, b: -0.03 }, 'Nile Tilapia': { k1: 1.25, a: 0.179, b: -0.035 }, 'Indian major carp': { k1: 0.8, a: 0.283, b: -0.041 }, 'Chinese carp': { k1: 0.8, a: 0.325, b: -0.03 }, 'Pabda catfish': { k1: 0.8, a: 0.354, b: -0.0411 }, 'Shingi catfish': { k1: 0.8, a: 0.297, b: -0.0219 }, 'Koi climbing perch': { k1: 1, a: 0.126, b: -0.048 }, Shrimp: { k1: 15, a: 10, b: 0.5 } }; if (aeration === 'No Aeration') { const k1 = speciesConstants[species].k1; N = k1 * Math.pow(W, -0.33); } else { const a = speciesConstants[species].a; const b = speciesConstants[species].b; const OCR = a * Math.pow(W / 1000, b) * Math.pow(1.024, T - 20); const E = 0.8; // Default for demonstration, this should be user input based on aeration type const OTR = 2; // Default for demonstration, this should also be user input N = OTR * E / (OCR * W); } setResult(`Number of fish per cubic meter: ${N.toFixed(2)}`); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "Fish Stock Calculation"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "weight", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Average weight of individual fish (g):"), /*#__PURE__*/ React.createElement("input", { id: "weight", name: "weight", className: "w-full px-3 py-2 border rounded", type: "number", value: weight, onChange: (e)=>setWeight(e.target.value), __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "temperature", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Water temperature in °C:"), /*#__PURE__*/ React.createElement("input", { id: "temperature", name: "temperature", className: "w-full px-3 py-2 border rounded", type: "number", value: temperature, onChange: (e)=>setTemperature(e.target.value), __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "species", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Select species:"), /*#__PURE__*/ React.createElement("select", { id: "species", name: "species", className: "w-full px-3 py-2 border rounded", value: species, onChange: handleSpeciesChange, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "--Select--"), /*#__PURE__*/ React.createElement("option", { value: "Pangasius", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Pangasius"), /*#__PURE__*/ React.createElement("option", { value: "Nile Tilapia", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Nile Tilapia"), /*#__PURE__*/ React.createElement("option", { value: "Indian major carp", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Indian major carp"), /*#__PURE__*/ React.createElement("option", { value: "Chinese carp", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Chinese carp"), /*#__PURE__*/ React.createElement("option", { value: "Pabda catfish", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Pabda catfish"), /*#__PURE__*/ React.createElement("option", { value: "Shingi catfish", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Shingi catfish"), /*#__PURE__*/ React.createElement("option", { value: "Koi climbing perch", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Koi climbing perch"), /*#__PURE__*/ React.createElement("option", { value: "Shrimp", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Shrimp"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "aeration", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Aeration system:"), /*#__PURE__*/ React.createElement("select", { id: "aeration", name: "aeration", className: "w-full px-3 py-2 border rounded", value: aeration, onChange: handleAerationChange, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "--Select--"), /*#__PURE__*/ React.createElement("option", { value: "No Aeration", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "No Aeration"), /*#__PURE__*/ React.createElement("option", { value: "Combination of surface and mechanical aerators and diffused air systems", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Combination of surface and mechanical aerators and diffused air systems"), /*#__PURE__*/ React.createElement("option", { value: "Mechanical aerators and surface", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Mechanical aerators and surface"), /*#__PURE__*/ React.createElement("option", { value: "Diffused Air Systems", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Diffused Air Systems"))), aeration === 'Combination of surface and mechanical aerators and diffused air systems' && /*#__PURE__*/ React.createElement("div", { id: "combinationDetails", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Combination Aeration Details"), /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "combinationAerators", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Select Aerators:"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "smallPaddle", name: "smallPaddle", value: "smallPaddle", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "smallPaddle", className: "ml-2", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Small paddle wheels")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "venturi", name: "venturi", value: "venturi", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "venturi", className: "ml-2", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Venturi injectors")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "turbo", name: "turbo", value: "turbo", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "turbo", className: "ml-2", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "Turbo aerators")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "fountain", name: "fountain", value: "fountain", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "fountain", className: "ml-2", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Fountain aerators")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "largePaddle", name: "largePaddle", value: "largePaddle", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "largePaddle", className: "ml-2", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, "Large paddle wheels")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "propeller", name: "propeller", value: "propeller", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "propeller", className: "ml-2", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "Propeller-aspirators")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "pushWave", name: "pushWave", value: "pushWave", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "pushWave", className: "ml-2", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, "Push wave")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "doubleSpeed", name: "doubleSpeed", value: "doubleSpeed", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "doubleSpeed", className: "ml-2", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, "Double speed aerator")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "airFlowRateCa", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "Air flow rate (cubic meter):"), /*#__PURE__*/ React.createElement("input", { id: "airFlowRateCa", name: "airFlowRateCa", className: "w-full px-3 py-2 border rounded", type: "number", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "numDiffuserCa", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "Number of diffuser:"), /*#__PURE__*/ React.createElement("input", { id: "numDiffuserCa", name: "numDiffuserCa", className: "w-full px-3 py-2 border rounded", type: "number", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "sizeDiffuserCa", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, "Size of diffuser:"), /*#__PURE__*/ React.createElement("input", { id: "sizeDiffuserCa", name: "sizeDiffuserCa", className: "w-full px-3 py-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "depthDiffuserCa", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "Diffuser submerged depth (m):"), /*#__PURE__*/ React.createElement("input", { id: "depthDiffuserCa", name: "depthDiffuserCa", className: "w-full px-3 py-2 border rounded", type: "number", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "typeDiffuserCa", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, "Type of diffuser:"), /*#__PURE__*/ React.createElement("input", { id: "typeDiffuserCa", name: "typeDiffuserCa", className: "w-full px-3 py-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "horsePowerCa", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, "Horse power of surface aerators:"), /*#__PURE__*/ React.createElement("input", { id: "horsePowerCa", name: "horsePowerCa", className: "w-full px-3 py-2 border rounded", type: "number", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }))), aeration === 'Mechanical aerators and surface' && /*#__PURE__*/ React.createElement("div", { id: "mechanicalDetails", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, "Mechanical Aeration Details"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "horsePower", __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, "Horse power:"), /*#__PURE__*/ React.createElement("input", { id: "horsePower", name: "horsePower", className: "w-full px-3 py-2 border rounded", type: "number", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }))), aeration === 'Diffused Air Systems' && /*#__PURE__*/ React.createElement("div", { id: "diffusedDetails", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, "Diffused Air System Details"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "airFlowRate", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, "Air flow rate (cubic meter):"), /*#__PURE__*/ React.createElement("input", { id: "airFlowRate", name: "airFlowRate", className: "w-full px-3 py-2 border rounded", type: "number", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "numDiffuser", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, "Number of diffuser:"), /*#__PURE__*/ React.createElement("input", { id: "numDiffuser", name: "numDiffuser", className: "w-full px-3 py-2 border rounded", type: "number", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "sizeDiffuser", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, "Size of diffuser:"), /*#__PURE__*/ React.createElement("input", { id: "sizeDiffuser", name: "sizeDiffuser", className: "w-full px-3 py-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "depthDiffuser", __source: { fileName: "", lineNumber: 179, columnNumber: 15 }, __self: this }, "Diffuser submerged depth (m):"), /*#__PURE__*/ React.createElement("input", { id: "depthDiffuser", name: "depthDiffuser", className: "w-full px-3 py-2 border rounded", type: "number", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-semibold mb-2", htmlFor: "typeDiffuser", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, "Type of diffuser:"), /*#__PURE__*/ React.createElement("input", { id: "typeDiffuser", name: "typeDiffuser", className: "w-full px-3 py-2 border rounded", type: "text", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 190, columnNumber: 9 }, __self: this }, "Calculate")), /*#__PURE__*/ React.createElement("div", { id: "result", className: "mt-6", __source: { fileName: "", lineNumber: 192, columnNumber: 7 }, __self: this }, result)); }