function MainComponent() { const [clients, setClients] = React.useState([]); const [totalSales, setTotalSales] = React.useState(0); const [consultingFee, setConsultingFee] = React.useState(0); const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const clientName = formData.get('clientName'); const saleAmount = parseFloat(formData.get('saleAmount')); if (!clientName || isNaN(saleAmount) || saleAmount <= 0) return; const fee = saleAmount * 0.2; const updatedTotalSales = totalSales + saleAmount; const updatedConsultingFee = consultingFee + fee; setClients([ ...clients, { clientName, saleAmount, fee } ]); setTotalSales(updatedTotalSales); setConsultingFee(updatedConsultingFee); }; const generateInvoice = (client)=>{ return `請求書: クライアント名: ${client.clientName}, 売上金額: ¥${client.saleAmount}, コンサルティング料金: ¥${client.fee}`; }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "売上報告ツール"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", htmlFor: "clientName", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "クライアント名"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", id: "clientName", name: "clientName", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", htmlFor: "saleAmount", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "売上金額"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "saleAmount", name: "saleAmount", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", type: "submit", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "データを入力")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "計算結果"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 rounded p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "総売上: ", /*#__PURE__*/ React.createElement("span", { id: "totalSales", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, "¥", totalSales)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "コンサルティング料金 (20%): ", /*#__PURE__*/ React.createElement("span", { id: "consultingFee", __source: { fileName: "", lineNumber: 45, columnNumber: 32 }, __self: this }, "¥", consultingFee)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "請求書"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 rounded p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, clients.length === 0 ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 51, columnNumber: 35 }, __self: this }, "No data available") : clients.map((client, index)=>/*#__PURE__*/ React.createElement("p", { key: index, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, generateInvoice(client))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "ダッシュボード"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 rounded p-4 overflow-x-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-left", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "クライアント名"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, "売上金額"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "コンサルティング料金"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "請求書"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, clients.length === 0 ? /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", colSpan: "4", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, "No data")) : clients.map((client, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 76, columnNumber: 21 }, __self: this }, client.clientName), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 77, columnNumber: 21 }, __self: this }, "¥", client.saleAmount), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, "¥", client.fee), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 79, columnNumber: 21 }, __self: this }, generateInvoice(client))))))))); }