function MainComponent() { const [data, setData] = React.useState([ { platform: 'Facebook', followers: 12000, engagement: '8%' }, { platform: 'Twitter', followers: 9000, engagement: '10%' }, { platform: 'Instagram', followers: 15000, engagement: '12%' }, { platform: 'LinkedIn', followers: 7000, engagement: '5%' } ]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [responses, setResponses] = React.useState([]); React.useEffect(()=>{ const fetchAnalytics = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: 'Show me the latest social media analytics.' } ] }) }); const result = await response.json(); setResponses(result.choices.map((choice)=>choice.message.content)); } catch (err) { setError('Failed to load analytics'); } finally{ setLoading(false); } }; fetchAnalytics(); }, []); const renderBarChart = (platform, followers)=>{ const barWidth = `${followers / 15000 * 100}%`; return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#e0e0e0]", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 h-8", style: { width: barWidth }, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this })); }; const renderPieChart = (followers, engagement)=>{ const totalFollowers = data.reduce((acc, item)=>acc + item.followers, 0); const sliceValue = followers / totalFollowers * 360; return /*#__PURE__*/ React.createElement("div", { className: "relative w-32 h-32", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-full h-full rounded-full border-8", style: { borderColor: 'transparent', borderTopColor: '#4caf50', transform: `rotate(${sliceValue}deg)` }, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this })); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-[#f0f0f0] min-h-screen", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "Social Media Analytics Dashboard"), loading && /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, "Loading..."), error && /*#__PURE__*/ React.createElement("p", { className: "text-center text-red-500 font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, data.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.platform, className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, item.platform), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-1 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-users text-[#333] mr-2", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }), item.followers.toLocaleString(), " Followers"), renderBarChart(item.platform, item.followers), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto mt-2", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chart-line text-[#333] mr-2", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }), "Engagement: ", item.engagement), renderPieChart(item.followers, item.engagement)))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, responses.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "AI Insights"), responses.map((response, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, response))))); }