function MainComponent() { const [metrics, setMetrics] = React.useState({ sales: null, customers: null, performance: null }); const handleFileUpload = (event)=>{ const file = event.target.files[0]; if (!file) return; // Placeholder logic for setting metrics after loading an Excel file const loadedMetrics = { sales: { value: "500K", change: "5%" }, customers: { value: "8K", change: "10%" }, performance: { value: "85%", change: "2%" } }; setMetrics(loadedMetrics); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-gray-900", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Company Dashboard"))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto py-6 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-6 sm:px-0", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-4 border-dashed border-gray-200 rounded-lg h-96 flex justify-center items-center", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-lg font-medium text-gray-800", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, "Upload Excel File to Load Metrics"), /*#__PURE__*/ React.createElement("label", { className: "cursor-pointer bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }, "Select File"), /*#__PURE__*/ React.createElement("input", { name: "excelFile", type: "file", className: "hidden", accept: ".xlsx, .xls", onChange: handleFileUpload, __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(MetricCard, { icon: "fas fa-file-excel", color: "bg-blue-500", title: "Sales Metrics", value: metrics.sales?.value, change: metrics.sales?.change, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(MetricCard, { icon: "fas fa-users", color: "bg-green-500", title: "Customer Metrics", value: metrics.customers?.value, change: metrics.customers?.change, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(MetricCard, { icon: "fas fa-chart-line", color: "bg-yellow-500", title: "Performance Metrics", value: metrics.performance?.value, change: metrics.performance?.change, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }))))); } function MetricCard({ icon, color, title, value, change }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white overflow-hidden shadow rounded-lg", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-5 sm:p-6", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex-shrink-0 ${color} rounded-md p-3`, __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} text-white text-xl`, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, title), value && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-900", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, `Value: ${value}`), change && /*#__PURE__*/ React.createElement("div", { className: "mt-1 text-sm text-gray-600", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, `Change: ${change}`))))); }