function MainComponent() { const [engineerName, setEngineerName] = React.useState(''); const [issueDate, setIssueDate] = React.useState(''); const [invoiceNumber, setInvoiceNumber] = React.useState(''); const [projectName, setProjectName] = React.useState(''); const [workPeriodStart, setWorkPeriodStart] = React.useState(''); const [workPeriodEnd, setWorkPeriodEnd] = React.useState(''); const [contractUnitPrice, setContractUnitPrice] = React.useState(''); const [quantity, setQuantity] = React.useState(''); const [upperLimit, setUpperLimit] = React.useState(''); const [lowerLimit, setLowerLimit] = React.useState(''); const [contractType, setContractType] = React.useState(''); const [overtimeUnit, setOvertimeUnit] = React.useState(''); const [deductionUnit, setDeductionUnit] = React.useState(''); const [overtimePrice, setOvertimePrice] = React.useState(''); const [deductionPrice, setDeductionPrice] = React.useState(''); const [roundingUnit, setRoundingUnit] = React.useState(''); const [previousMonthCarryOver, setPreviousMonthCarryOver] = React.useState(''); const [bankName, setBankName] = React.useState(''); const [bankBranch, setBankBranch] = React.useState(''); const [accountNumber, setAccountNumber] = React.useState(''); const [transferAccountName, setTransferAccountName] = React.useState(''); const [billingClosingDate, setBillingClosingDate] = React.useState(''); const [paymentSite, setPaymentSite] = React.useState(''); const [paymentDueDate, setPaymentDueDate] = React.useState(''); const [burdenOfTransferFee, setBurdenOfTransferFee] = React.useState(''); const createInvoice = ()=>{ // Function logic to handle invoice creation }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-gray-100 p-8 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white shadow-xl rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-blue-500 text-white", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "engineerName", className: "bg-transparent border-none p-1 text-sm focus:outline-none", value: engineerName, onChange: (e)=>setEngineerName(e.target.value), placeholder: "エンジニア氏名", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "issueDate", className: "bg-transparent border-none p-1 text-lg font-bold focus:outline-none", value: issueDate, onChange: (e)=>setIssueDate(e.target.value), placeholder: "請求書発行日", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "invoiceNumber", className: "bg-transparent border-none p-1 text-sm focus:outline-none", value: invoiceNumber, onChange: (e)=>setInvoiceNumber(e.target.value), placeholder: "請求書番号", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 border-b-2 border-blue-500", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "projectName", className: "bg-transparent border-none p-1 text-3xl font-bold focus:outline-none", value: projectName, onChange: (e)=>setProjectName(e.target.value), placeholder: "案件名", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-blue-600 text-xl font-bold", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "¥", /*#__PURE__*/ React.createElement("input", { type: "text", name: "contractUnitPrice", className: "w-32 bg-transparent border-none p-1 text-3xl font-bold focus:outline-none", value: contractUnitPrice, onChange: (e)=>setContractUnitPrice(e.target.value), placeholder: "契約単価", __source: { fileName: "", lineNumber: 82, columnNumber: 16 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4 text-xs", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4 text-right", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: createInvoice, __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "請求書を作成"))))); }