function MainComponent() { const [modalVisible, setModalVisible] = React.useState(false); const [selectedMember, setSelectedMember] = React.useState(null); const exampleData = { month: '2024年7月', liverName: 'サンプルライバー', id: '1234567890', plan: 'スタンダード', fullName: '山田太郎', totalPayment: '123,456', totalTaxableIncome: '123,456', totalSalary: '123,456', totalBonus: '123,456', otherSalary: [ { description: '¥100 紹介CP', amount: 100 }, { description: '¥100 紹介CP', amount: 100 }, { description: '¥100 紹介CP', amount: 100 } ], totalDeductions: '123,456', administrativeFee: '123,456', transferFee: '123,456', otherDeductions: [ { description: '¥100 紹介CP', amount: 100 }, { description: '¥100 紹介CP', amount: 100 }, { description: '¥100 紹介CP', amount: 100 } ], totalExpenses: '123,456', transportationExpenses: '123,456', otherExpenses: [ { description: '¥100 紹介CP', amount: 100 }, { description: '¥100 紹介CP', amount: 100 }, { description: '¥100 紹介CP', amount: 100 } ], incomeTax: '123' }; const openModal = (section)=>{ setSelectedMember(section); setModalVisible(true); }; const closeModal = ()=>{ setSelectedMember(null); setModalVisible(false); }; const renderSection = (title, items, showExpandButton = false)=>/*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center text-sm", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, item.label), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, item.value)))), showExpandButton && /*#__PURE__*/ React.createElement("button", { onClick: ()=>openModal(title.toLowerCase()), className: "mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "詳細を見る")); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-6", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "月次報酬計算 ", exampleData.month), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, 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 mr-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "明細"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "配信履歴"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mb-6 bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 87, columnNumber: 16 }, __self: this }, "氏名:"), " ", exampleData.fullName), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 88, columnNumber: 16 }, __self: this }, "ID:"), " ", exampleData.id)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 91, columnNumber: 16 }, __self: this }, "ライバー名:"), " ", exampleData.liverName), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 92, columnNumber: 16 }, __self: this }, "選択プラン:"), " ", exampleData.plan))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, renderSection('情報', [ { label: '支払合計', value: exampleData.totalPayment }, { label: '源泉所得税', value: exampleData.totalTaxableIncome } ]), renderSection('支給', [ { label: '支給計', value: exampleData.totalSalary }, { label: '発生金額合計', value: exampleData.totalSalary }, { label: 'その他支給合計', value: exampleData.totalSalary }, { label: '内税', value: exampleData.incomeTax } ], true), renderSection('控除', [ { label: '控除計', value: exampleData.totalDeductions }, { label: '事務手数料', value: exampleData.administrativeFee }, { label: '振込手数料', value: exampleData.transferFee }, { label: 'その他控除合計', value: exampleData.totalDeductions } ], true)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, renderSection('精算', [ { label: '清算計', value: exampleData.totalExpenses }, { label: '交通費', value: exampleData.transportationExpenses }, { label: 'その他精算合計', value: exampleData.totalExpenses } ], true)))), modalVisible && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 w-[400px]", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "その他", selectedMember), /*#__PURE__*/ React.createElement("div", { className: "mb-4 max-h-60 overflow-y-auto", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, exampleData[`other${selectedMember.charAt(0).toUpperCase() + selectedMember.slice(1)}`].map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center mb-2 text-sm", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }, item.description), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, item.amount)))), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full", onClick: closeModal, __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "閉じる")))); }

月次報酬計算 2024年7月

情報

支給

控除

精算