function MainComponent({ summaryData, chartData, onConnectToDatabase }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#f5f5f5] min-h-screen font-sans", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center py-4 px-6 bg-[#007bff] text-white", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#0056b3] rounded", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Logout"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#28a745] rounded", onClick: onConnectToDatabase, __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Connect to Database"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 my-6", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, summaryData.map((item, index)=>/*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white rounded shadow", key: index, __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-semibold", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, item.value), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, item.description)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded shadow p-4 mt-6", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Chart"), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] bg-gray-200", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded shadow p-4 mt-6", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Input Data"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "inputNamaBarang", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Nama Barang"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "inputNamaBarang", name: "namaBarang", type: "text", placeholder: "Masukkan nama barang", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "inputKuantitas", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Kuantitas"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "inputKuantitas", name: "kuantitas", type: "number", placeholder: "Masukkan kuantitas", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "inputHarga", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Harga"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "inputHarga", name: "harga", type: "number", placeholder: "Masukkan harga", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "inputTotal", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Total"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "inputTotal", name: "total", type: "number", placeholder: "Masukkan total", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-[#007bff] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Submit")))); } function StoryComponent() { const summaryData = [ { title: 'Total Users', value: 1200, description: 'Since last month' }, { title: 'New Orders', value: 350, description: 'Since last month' }, { title: 'Revenue', value: '$24,000', description: 'Since last month' }, { title: 'Feedback', value: '98%', description: 'Positive Feedback' } ]; const chartData = {}; const handleConnectToDatabase = ()=>{ console.log('Connecting to database...'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 110, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { summaryData: summaryData, chartData: chartData, onConnectToDatabase: handleConnectToDatabase, __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this })); }