function MainComponent() { const [ingredients, setIngredients] = React.useState([ { name: 'Tomatoes', quantity: '2', unit: 'kg', expireDate: '2023-12-01' }, { name: 'Potatoes', quantity: '5', unit: 'kg', expireDate: '2023-11-15' } ]); const [recipes, setRecipes] = React.useState([ { name: 'Tomato Soup', ingredients: [ 'Tomatoes' ], time: '30 mins' }, { name: 'Mashed Potatoes', ingredients: [ 'Potatoes' ], time: '45 mins' } ]); const [mealPlans, setMealPlans] = React.useState([]); const [userStats, setUserStats] = React.useState({ weight: '', height: '', activityLevel: '' }); const [trackedMeals, setTrackedMeals] = React.useState([]); const handleMealPlanSubmit = (event)=>{ event.preventDefault(); const data = new FormData(event.target); const mealPlanName = data.get('mealPlanName'); const timeAvailable = data.get('timeAvailable'); const mealPlanIngredients = data.get('mealPlanIngredients').split(',').map((i)=>i.trim()); const planRecipes = recipes.filter((recipe)=>{ const hasAllIngredients = mealPlanIngredients.every((ing)=>recipe.ingredients.includes(ing)); return hasAllIngredients && parseInt(recipe.time) <= parseInt(timeAvailable); }); setMealPlans([ ...mealPlans, { name: mealPlanName, meals: planRecipes.map((r)=>r.name) } ]); }; const handleUserStatsSubmit = (event)=>{ event.preventDefault(); const data = new FormData(event.target); setUserStats({ weight: data.get('weight'), height: data.get('height'), activityLevel: data.get('activityLevel') }); }; const handleTrackMeal = (mealName)=>{ setTrackedMeals([ ...trackedMeals, mealName ]); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 min-h-screen font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[800px] mx-auto", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Food Inventory, Meal Planning and Tracking"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Inventory"), /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-2", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "py-2", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("th", { className: "py-2", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "Unit"), /*#__PURE__*/ React.createElement("th", { className: "py-2", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, "Expire Date"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, ingredients.map((ingredient, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, ingredient.name), /*#__PURE__*/ React.createElement("td", { className: "py-2", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, ingredient.quantity), /*#__PURE__*/ React.createElement("td", { className: "py-2", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, ingredient.unit), /*#__PURE__*/ React.createElement("td", { className: "py-2", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, ingredient.expireDate)))))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Recipes"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, recipes.map((recipe, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2 border-b pb-2", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, recipe.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, "Ingredients: ", recipe.ingredients.join(', ')), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, "Time: ", recipe.time), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTrackMeal(recipe.name), className: "mt-2 bg-green-500 text-white py-1 px-3 rounded", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, "Track Meal"))))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "Meal Plan Criteria and Tracking"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleMealPlanSubmit, __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, "Name:"), /*#__PURE__*/ React.createElement("input", { name: "mealPlanName", className: "mt-1 block w-full bg-white border border-gray-300 rounded py-2 px-3", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "Time Available (mins):"), /*#__PURE__*/ React.createElement("input", { name: "timeAvailable", type: "number", className: "mt-1 block w-full bg-white border border-gray-300 rounded py-2 px-3", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "Ingredients:"), /*#__PURE__*/ React.createElement("input", { name: "mealPlanIngredients", className: "mt-1 block w-full bg-white border border-gray-300 rounded py-2 px-3", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "Create Meal Plan"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "Generated Meal Plans"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, mealPlans.map((plan, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2 border-b pb-2", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, plan.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, "Meals: ", plan.meals.join(', ')))))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "User Statistics"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleUserStatsSubmit, __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, "Weight:"), /*#__PURE__*/ React.createElement("input", { name: "weight", type: "number", className: "mt-1 block w-full bg-white border border-gray-300 rounded py-2 px-3", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, "Height:"), /*#__PURE__*/ React.createElement("input", { name: "height", type: "number", className: "mt-1 block w-full bg-white border border-gray-300 rounded py-2 px-3", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }, "Activity Level:"), /*#__PURE__*/ React.createElement("input", { name: "activityLevel", className: "mt-1 block w-full bg-white border border-gray-300 rounded py-2 px-3", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "Submit Stats"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, "Tracked Meals"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, trackedMeals.map((meal, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2 border-b pb-2", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 153, columnNumber: 17 }, __self: this }, meal))))))); }

Name	Quantity	Unit	Expire Date
Tomatoes	2	kg	2023-12-01
Potatoes	5	kg	2023-11-15