function NewComponent({ scenario }) { return /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, scenario); } function NewComponentStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { scenario: "New Scenario", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { scenario: "Challenging Scenario", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { scenario: "Role-Playing Adventure", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function CrmComponent({ title = "CRM" }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title)); } function CrmComponentStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CrmComponent, { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CrmComponent, { title: "Custom CRM Title", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function MainComponent() { const [activeTab, setActiveTab] = React.useState('dashboard'); const [proposals, setProposals] = React.useState([]); const [conversations, setConversations] = React.useState([]); const [rolePlays, setRolePlays] = React.useState([]); const [performance, setPerformance] = React.useState({}); const [customers, setCustomers] = React.useState([]); const [salesData, setSalesData] = React.useState({}); const handleTabChange = (tab)=>{ setActiveTab(tab); }; const generateProposal = ()=>{ const newProposal = { id: proposals.length + 1, title: 'New Proposal', content: 'AI-generated content' }; setProposals([ ...proposals, newProposal ]); }; const startRolePlay = ()=>{ const newRolePlay = { id: rolePlays.length + 1, scenario: 'New Scenario', feedback: '' }; setRolePlays([ ...rolePlays, newRolePlay ]); }; const renderContent = ()=>{ switch(activeTab){ case 'dashboard': return /*#__PURE__*/ React.createElement("div", { className: "p-4", __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 }, "Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, "Sales Performance"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, "Total Sales: $", salesData.totalSales || 0), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, "Conversion Rate: ", salesData.conversionRate || 0, "%")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "Lead Status"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, "New Leads: ", salesData.newLeads || 0), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "Qualified Leads: ", salesData.qualifiedLeads || 0)), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "Customer Engagement"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "Active Customers: ", salesData.activeCustomers || 0), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "Pending Follow-ups: ", salesData.pendingFollowUps || 0)))); case 'proposals': return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "AI-Driven Sales Proposals"), /*#__PURE__*/ React.createElement("button", { onClick: generateProposal, className: "bg-blue-500 text-white px-4 py-2 rounded mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Generate New Proposal"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, proposals.map((proposal)=>/*#__PURE__*/ React.createElement("div", { key: proposal.id, className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, proposal.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, proposal.content))))); case 'conversations': return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Real-Time Conversation Assistance"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "AI-powered conversation assistance is active. Start a call or compose an email to receive real-time feedback and suggestions."))); case 'roleplays': return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Role-Playing Scenarios"), /*#__PURE__*/ React.createElement("button", { onClick: startRolePlay, className: "bg-blue-500 text-white px-4 py-2 rounded mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Start New Role-Play"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, rolePlays.map((rolePlay)=>/*#__PURE__*/ React.createElement("div", { key: rolePlay.id, className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, rolePlay.scenario), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, rolePlay.feedback))))); case 'performance': return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Performance Grading and Feedback"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "Recent Performance"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "Grade: ", performance.grade || 'N/A'), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "Feedback: ", performance.feedback || 'No recent interactions'))); case 'crm': return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "CRM"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, customers.map((customer)=>/*#__PURE__*/ React.createElement(NewComponent, { key: customer.id, scenario: customer.name, __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this })))); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100", __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, "AI-Driven Sales Service Platform")), /*#__PURE__*/ React.createElement("nav", { className: "bg-blue-500 text-white p-2", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange('dashboard'), className: `px-3 py-2 rounded ${activeTab === 'dashboard' ? 'bg-blue-700' : ''}`, __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, "Dashboard")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange('proposals'), className: `px-3 py-2 rounded ${activeTab === 'proposals' ? 'bg-blue-700' : ''}`, __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "Proposals")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange('conversations'), className: `px-3 py-2 rounded ${activeTab === 'conversations' ? 'bg-blue-700' : ''}`, __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, "Conversations")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange('roleplays'), className: `px-3 py-2 rounded ${activeTab === 'roleplays' ? 'bg-blue-700' : ''}`, __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, "Role-Plays")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange('performance'), className: `px-3 py-2 rounded ${activeTab === 'performance' ? 'bg-blue-700' : ''}`, __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, "Performance")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange('crm'), className: `px-3 py-2 rounded ${activeTab === 'crm' ? 'bg-blue-700' : ''}`, __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "CRM")))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow overflow-auto", __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, renderContent()), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-200 p-4 text-center", __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, "© 2023 AI-Driven Sales Service Platform. All rights reserved."))); }