function MainComponent() { const [stockItems, setStockItems] = React.useState([ { id: 1, name: "FUJI", notes: "54/60/65", soh: "5 BOX", order: "" }, { id: 2, name: "GALA SMALL", notes: "108", soh: "", order: "" }, { id: 3, name: "GALA LARGE", notes: "65/70", soh: "2 BOX", order: "6 BOX" }, { id: 4, name: "GRANNY", notes: "65", soh: "2 BOX", order: "2 BOX" }, { id: 5, name: "GRANNY COMPO MED", notes: "", soh: "", order: "" }, { id: 6, name: "GOLDEN DEL LARGE", notes: "54/60", soh: "", order: "" }, { id: 7, name: "PINK LADY SMALL", notes: "", soh: "NIL", order: "6 BOX" } ]); // Valid SOH and Order options based on the second image const validOptions = { soh: [ "NIL", "1 BIN", "2 BIN", "Full Show", "1 BOX", "2 BOX", "3 BOX", "4 BOX", "5 BOX", "6 BOX", "12X5", "13X5", "14X5", "-", "15X5", "7 BOX", "8 BOX", "9 BOX", "10 BOX", "11 BOX", "12 BOX", "13 BOX", "14 BOX", "1 BAG", "2 BAG", "3 BAG", "4 BAG", "5 BAG", "6 BAG", "7 BAG", "8 BAG", "9 BAG", "10 BAG", "11 BAG", "12 BAG", "13 BAG", "14 BAG", "15 BAG", "1 TRAY", "2 TRAY", "3 TRAY", "4 TRAY", "5 TRAY", "6 TRAY", "7 TRAY", "8 TRAY", "9 TRAY", "10 TRAY", "Don't Need" ], order: [ "NIL", "1 BOX", "2 BOX", "3 BOX", "4 BOX", "5 BOX", "6 BOX", "7 BOX", "8 BOX", "9 BOX", "10 BOX", "11 BOX", "12 BOX", "13 BOX", "14 BOX", "1 BAG", "2 BAG", "3 BAG", "4 BAG", "5 BAG", "6 BAG", "7 BAG", "8 BAG", "9 BAG", "10 BAG", "11 BAG", "12 BAG", "13 BAG", "14 BAG", "15 BAG", "1 TRAY", "2 TRAY", "3 TRAY", "4 TRAY", "5 TRAY", "6 TRAY", "7 TRAY", "8 TRAY", "9 TRAY", "10 TRAY" ] }; const handleStockChange = (id, field, value)=>{ if (validOptions[field].includes(value.toUpperCase())) { setStockItems((currentItems)=>currentItems.map((item)=>item.id === id ? { ...item, [field]: value.toUpperCase() } : item)); } }; const makeInputField = (item, field)=>/*#__PURE__*/ React.createElement("input", { type: "text", name: field, value: item[field], onChange: (e)=>handleStockChange(item.id, field, e.target.value), className: "w-full p-2 text-center border-2 border-[#000000] focus:outline-none", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }); const stockTableRows = stockItems.map((item)=>/*#__PURE__*/ React.createElement("tr", { key: item.id, __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-3 text-center font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("td", { className: "p-3 text-center font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, item.notes), /*#__PURE__*/ React.createElement("td", { className: "p-3 text-center font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, makeInputField(item, 'soh')), /*#__PURE__*/ React.createElement("td", { className: "p-3 text-center font-roboto bg-[#FFFF99]", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, makeInputField(item, 'order')))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto my-8", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-center font-roboto font-bold mb-6", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "Stocktake"), /*#__PURE__*/ React.createElement("table", { className: "w-full table-fixed", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "text-left bg-[#e0e0e0]", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-3 font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "PRODUCT"), /*#__PURE__*/ React.createElement("th", { className: "p-3 font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "NOTES (size, price, etc.)"), /*#__PURE__*/ React.createElement("th", { className: "p-3 font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "SOH"), /*#__PURE__*/ React.createElement("th", { className: "p-3 font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "ORDER"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, stockTableRows))); }

PRODUCT	NOTES (size, price, etc.)	SOH	ORDER
FUJI	54/60/65
GALA SMALL	108
GALA LARGE	65/70
GRANNY	65
GRANNY COMPO MED
GOLDEN DEL LARGE	54/60
PINK LADY SMALL