function AdminComponent({ formData, handleInputChange, switchToToolList }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 mb-4", onClick: switchToToolList, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "Admin Input"), formData.tools.map((tool, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Tool ", index + 1), /*#__PURE__*/ React.createElement("input", { type: "text", name: `tool-${index}`, className: "border p-2 w-full mb-2", placeholder: "Tool Name", value: tool.tool, onChange: (e)=>handleInputChange(index, "tool", e.target.value), __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: `length-${index}`, className: "border p-2 w-full mb-2", placeholder: "Length", value: tool.length, onChange: (e)=>handleInputChange(index, "length", e.target.value), __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: `mac-${index}`, className: "border p-2 w-full mb-2", placeholder: "Mac", value: tool.mac, onChange: (e)=>handleInputChange(index, "mac", e.target.value), __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: `program-${index}`, className: "border p-2 w-full mb-2", placeholder: "Program", value: tool.program, onChange: (e)=>handleInputChange(index, "program", e.target.value), __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: `run-${index}`, className: "border p-2 w-full mb-2", placeholder: "Run", value: tool.run, onChange: (e)=>handleInputChange(index, "run", e.target.value), __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this })))); } function ToolListComponent({ formData, handleInfoClick, infoVisible, switchToAdmin }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 mb-4", onClick: switchToAdmin, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "Admin"), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, "WORK 1"), /*#__PURE__*/ React.createElement("img", { src: "./sample-image.jpg", alt: "Image depicting Tool List", className: "w-[400px] h-[300px] mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Order"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Tool"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Length"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Mac"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Program"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Run"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Info"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, formData.tools.map((tool, index)=>{ const toolInfoVisible = infoVisible === index; const toolInfo = /*#__PURE__*/ React.createElement("div", { className: `${toolInfoVisible ? "block" : "hidden"} absolute mt-2`, __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./sample-image.jpg", alt: `Details of Tool ${index + 1}`, className: "w-[400px] h-[300px]", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this })); return /*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, tool.tool), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, tool.length), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, tool.mac), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, tool.program), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, tool.run), /*#__PURE__*/ React.createElement("td", { className: "border p-2 text-blue-500 cursor-pointer", onClick: ()=>handleInfoClick(index), __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }), toolInfo)); })))); } function MainComponent() { const [formData, setFormData] = React.useState({ tools: [ { tool: "", length: "", mac: "", program: "", run: "" }, { tool: "", length: "", mac: "", program: "", run: "" }, { tool: "", length: "", mac: "", program: "", run: "" }, { tool: "", length: "", mac: "", program: "", run: "" }, { tool: "", length: "", mac: "", program: "", run: "" } ] }); const [infoVisible, setInfoVisible] = React.useState(null); const [isAdmin, setIsAdmin] = React.useState(false); const handleInfoClick = (index)=>{ setInfoVisible(infoVisible === index ? null : index); }; const handleInputChange = (index, field, value)=>{ const updatedTools = formData.tools.map((tool, i)=>i === index ? { ...tool, [field]: value } : tool); setFormData({ tools: updatedTools }); }; const switchToAdmin = ()=>setIsAdmin(true); const switchToToolList = ()=>setIsAdmin(false); return /*#__PURE__*/ React.createElement(React.Fragment, null, isAdmin ? /*#__PURE__*/ React.createElement(AdminComponent, { formData: formData, handleInputChange: handleInputChange, switchToToolList: switchToToolList, __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }) : /*#__PURE__*/ React.createElement(ToolListComponent, { formData: formData, handleInfoClick: handleInfoClick, infoVisible: infoVisible, switchToAdmin: switchToAdmin, __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this })); }

Order	Tool	Length	Mac	Program	Run	Info
1
2
3
4
5

Order	Tool	Length	Mac	Program	Run	Info
1
2
3
4
5