function LineGraph({ data, onChangeValue, title }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFF] p-4 shadow-sm", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, data.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.id, className: "flex justify-between", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, item.id), /*#__PURE__*/ React.createElement("input", { type: "number", name: item.id, value: item.value, onChange: (e)=>onChangeValue(e, item.id, title), className: "border border-gray-300 p-1 w-3/4", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }))))); } function LineGraphStory() { const handleInputChange = (e, id, title)=>{ console.log(`Value changed for ${id} in ${title}: ${e.target.value}`); }; const sampleGraphData = [ { id: 'DataPoint1', value: 3 }, { id: 'DataPoint2', value: 7 }, { id: 'DataPoint3', value: 5 } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LineGraph, { data: sampleGraphData, onChangeValue: handleInputChange, title: "Sample Line Graph", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this })); } function MainComponent() { const [activeSection, setActiveSection] = React.useState('dashboard'); const [selectedGraph, setSelectedGraph] = React.useState(null); const [data, setData] = React.useState({ profit: Array.from({ length: 10 }, (_, i)=>({ id: `Profit${i}`, value: Math.floor(Math.random() * 100000) + 10000 })), sales: Array.from({ length: 10 }, (_, i)=>({ id: `Sales${i}`, value: Math.floor(Math.random() * 500000) + 50000 })), satisfaction: Array.from({ length: 10 }, (_, i)=>({ id: `Satisfaction${i}`, value: Math.floor(Math.random() * 100) + 1 })) }); const handleSectionChange = (section)=>{ setActiveSection(section); setSelectedGraph(null); }; const handleGraphSelection = (graph)=>{ setSelectedGraph(graph); }; const handleInputChange = (e, id, title)=>{ setData((currentData)=>{ const newData = { ...currentData }; newData[title.toLowerCase()].forEach((item)=>{ if (item.id === id) { item.value = Number(e.target.value); } }); return newData; }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col bg-[#F0F2F5]", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#FFF] shadow-sm p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#333]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "経営管理ダッシュボード"), /*#__PURE__*/ React.createElement("button", { className: "text-[#007BFF] font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "ログアウト"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-64 bg-[#FFF] p-4 shadow-inner", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "font-roboto text-[#333]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: `mb-4 cursor-pointer ${activeSection === 'dashboard' ? 'text-blue-500' : ''}`, onClick: ()=>handleSectionChange('dashboard'), __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "ダッシュボード"), /*#__PURE__*/ React.createElement("li", { className: `mb-4 cursor-pointer ${activeSection === 'analysis' ? 'text-blue-500' : ''}`, onClick: ()=>handleSectionChange('analysis'), __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "分析"), /*#__PURE__*/ React.createElement("li", { className: `mb-4 cursor-pointer ${activeSection === 'forecast' ? 'text-blue-500' : ''}`, onClick: ()=>handleSectionChange('forecast'), __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "予測"), /*#__PURE__*/ React.createElement("li", { className: `cursor-pointer ${activeSection === 'settings' ? 'text-blue-500' : ''}`, onClick: ()=>handleSectionChange('settings'), __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "設定"))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4 overflow-auto", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, activeSection === 'dashboard' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4 text-[#333]", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "概要"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, [ 'profit', 'sales', 'satisfaction' ].map((key, index)=>/*#__PURE__*/ React.createElement("div", { key: key, className: "bg-[#FFF] p-4 shadow-sm cursor-pointer", onClick: ()=>handleGraphSelection(key), __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 21 }, __self: this }, key), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 21 }, __self: this }, data[key][index]?.value.toLocaleString()))))), activeSection === 'analysis' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4 text-[#333]", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "分析画面"), selectedGraph && /*#__PURE__*/ React.createElement(LineGraph, { data: data[selectedGraph], onChangeValue: handleInputChange, title: selectedGraph.charAt(0).toUpperCase() + selectedGraph.slice(1), __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }), !selectedGraph && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#333]", __source: { fileName: "", lineNumber: 72, columnNumber: 34 }, __self: this }, "グラフを選択してください。")), activeSection === 'forecast' && /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4 text-[#333]", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "予測画面"), activeSection === 'settings' && /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4 text-[#333]", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "設定画面")))); }