function MainComponent() { const [activeTab, setActiveTab] = React.useState('dashboard'); const renderContent = ()=>{ switch(activeTab){ case 'dashboard': return /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 12, columnNumber: 17 }, __self: this }, "Total Clients"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 13, columnNumber: 17 }, __self: this }, "24")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }, "Active Projects"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, "12")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 20, columnNumber: 17 }, __self: this }, "Revenue"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 21, columnNumber: 17 }, __self: this }, "$45,000")))); case 'clients': return /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Clients"), /*#__PURE__*/ React.createElement("table", { className: "w-full bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, "Projects"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }, "John Doe"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, "john@example.com"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, "3")), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, "Jane Smith"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, "jane@example.com"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, "2"))))); case 'projects': return /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Projects"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "Website Redesign"), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, "Client: ABC Corp"), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "Deadline: 2024-06-30"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: '45%' }, __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, "SEO Campaign"), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "Client: XYZ Inc"), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "Deadline: 2024-08-15"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: '30%' }, __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }))))); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Agency Management Platform")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-gray-800 text-white w-full md:w-64 p-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('dashboard'), className: `w-full text-left p-2 rounded ${activeTab === 'dashboard' ? 'bg-blue-600' : 'hover:bg-gray-700'}`, __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tachometer-alt mr-2", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }), " Dashboard")), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('clients'), className: `w-full text-left p-2 rounded ${activeTab === 'clients' ? 'bg-blue-600' : 'hover:bg-gray-700'}`, __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users mr-2", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }), " Clients")), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('projects'), className: `w-full text-left p-2 rounded ${activeTab === 'projects' ? 'bg-blue-600' : 'hover:bg-gray-700'}`, __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-project-diagram mr-2", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }), " Projects")))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, renderContent()))); }