function NewComponent({ tabs, activeTab, setActiveTab, renderTabContent }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "B2B TV Channel Licensing CMS")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-gray-800 text-white w-full md:w-64 p-4", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, tabs.map((tab)=>/*#__PURE__*/ React.createElement("li", { key: tab.id, className: "mb-2", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab(tab.id), className: `w-full text-left p-2 rounded ${activeTab === tab.id ? 'bg-blue-500' : 'hover:bg-gray-700'}`, __source: { fileName: "", lineNumber: 12, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${tab.icon} mr-2`, __source: { fileName: "", lineNumber: 18, columnNumber: 19 }, __self: this }), tab.label))))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow p-6", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, renderTabContent()))); } function NewComponentStory() { const [activeTab, setActiveTab] = React.useState('resellers'); const tabs = [ { id: 'resellers', icon: 'fa-users', label: 'Resellers' }, { id: 'channels', icon: 'fa-tv', label: 'TV Channels' }, { id: 'suppliers', icon: 'fa-truck', label: 'Suppliers' }, { id: 'costs', icon: 'fa-dollar-sign', label: 'Costs' }, { id: 'contracts', icon: 'fa-file-contract', label: 'Contracts' }, { id: 'customers', icon: 'fa-user-tie', label: 'Customers' } ]; const renderTabContent = ()=>{ switch(activeTab){ case 'resellers': return; case 'channels': return; case 'suppliers': return; case 'costs': return; case 'contracts': return; case 'customers': return; default: return null; } }; return /*#__PURE__*/ React.createElement(NewComponent, { tabs: tabs, activeTab: activeTab, setActiveTab: setActiveTab, renderTabContent: renderTabContent, __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }); } function MainComponent() { const [activeTab, setActiveTab] = React.useState('resellers'); const tabs = [ { id: 'resellers', icon: 'fa-users', label: 'Resellers' }, { id: 'channels', icon: 'fa-tv', label: 'TV Channels' }, { id: 'suppliers', icon: 'fa-truck', label: 'Suppliers' }, { id: 'costs', icon: 'fa-dollar-sign', label: 'Costs' }, { id: 'contracts', icon: 'fa-file-contract', label: 'Contracts' }, { id: 'customers', icon: 'fa-user-tie', label: 'Customers' } ]; const renderTabContent = ()=>{ switch(activeTab){ case 'resellers': return /*#__PURE__*/ React.createElement(ResellersList, { __source: { fileName: "", lineNumber: 16, columnNumber: 16 }, __self: this }); case 'channels': return /*#__PURE__*/ React.createElement(TVChannelsList, { __source: { fileName: "", lineNumber: 18, columnNumber: 16 }, __self: this }); case 'suppliers': return /*#__PURE__*/ React.createElement(SuppliersList, { __source: { fileName: "", lineNumber: 20, columnNumber: 16 }, __self: this }); case 'costs': return /*#__PURE__*/ React.createElement(CostManagement, { __source: { fileName: "", lineNumber: 22, columnNumber: 16 }, __self: this }); case 'contracts': return /*#__PURE__*/ React.createElement(ContractManagement, { __source: { fileName: "", lineNumber: 24, columnNumber: 16 }, __self: this }); case 'customers': return /*#__PURE__*/ React.createElement(CustomersList, { __source: { fileName: "", lineNumber: 26, columnNumber: 16 }, __self: this }); default: return null; } }; return /*#__PURE__*/ React.createElement(NewComponent, { tabs: tabs, activeTab: activeTab, setActiveTab: setActiveTab, renderTabContent: renderTabContent, __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }); } function ResellersList() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "Resellers Management"), /*#__PURE__*/ React.createElement("table", { className: "w-full bg-white shadow-md rounded", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Status"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Acme Resellers"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "contact@acmeresellers.com"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-green-200 text-green-800 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 58, columnNumber: 33 }, __self: this }, "Active")))))); } function TVChannelsList() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, "TV Channels Management"), /*#__PURE__*/ React.createElement("table", { className: "w-full bg-white shadow-md rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Channel Name"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Genre"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "License Status"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Sports Plus"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Sports"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-blue-200 text-blue-800 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 82, columnNumber: 33 }, __self: this }, "Licensed")))))); } function SuppliersList() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, "Suppliers Management"), /*#__PURE__*/ React.createElement("table", { className: "w-full bg-white shadow-md rounded", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Supplier Name"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Services"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "Global Media Solutions"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "info@globalmedia.com"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Content Distribution"))))); } function CostManagement() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, "Cost Management"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, "Monthly Overview"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "Total Revenue"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "$150,000")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "Total Expenses"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, "$100,000")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "Net Profit"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-green-600", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, "$50,000"))))); } function ContractManagement() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 141, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, "Contract Management"), /*#__PURE__*/ React.createElement("table", { className: "w-full bg-white shadow-md rounded", __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, "Contract ID"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, "Party"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "Start Date"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "End Date"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, "Status"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, "CNT-001"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, "Acme Resellers"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, "2024-01-01"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, "2024-12-31"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-yellow-200 text-yellow-800 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 159, columnNumber: 33 }, __self: this }, "Active")))))); } function CustomersList() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 169, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 170, columnNumber: 7 }, __self: this }, "Customers Management"), /*#__PURE__*/ React.createElement("table", { className: "w-full bg-white shadow-md rounded", __source: { fileName: "", lineNumber: 171, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, "Customer Name"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("th", { className: "p-2 text-left", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, "Subscription"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 179, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, "John Doe"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, "john.doe@example.com"), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, "Premium Package"))))); }