[{"_1":2,"_195":-5,"_196":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_194":-5,"_108":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_5":46,"_57":58,"_59":60,"_61":62,"_63":64,"_65":60,"_66":67,"_68":43,"_69":70,"_71":72,"_73":17,"_74":25,"_75":76,"_77":78,"_79":80,"_81":82,"_97":98,"_150":25,"_151":152,"_108":33,"_110":193},"id","4b25487a985cd10e8c60","isMyApp",false,"name","PaceTerminal","description","Your lightning-fast publishing empire with Bloomberg-style elegance and zero patience required. Experience single-click token loading with buttery-smooth transitions that make your content appear almost before you decide to click it.","brief","Blink and you'll miss how fast your tokens load in this turbocharged minimalist publishing platform.","isLive",true,"isPublic","tags",[29,30,31],"🔥","💰","👑","cover","https://cdn.dev.fun/snapshot/4b25487a985cd10e8c60/74415_793ad160.webp","cdnUrl","https://cdn.dev.fun/app/4b25487a985cd10e8c60/74415","createdAt",["D",1748882103286],"updatedAt",["D",1749194978481],"lastCommitId",["B","74415"],"tier",1,"credits",-17,{"_14":47,"_48":49,"_50":-5,"_51":49,"_52":53,"_54":-5,"_55":56},"0d634fa7-96fc-41e3-8c66-c712ff1e4235","uniqueId","AygcLpbG6kGE271nhZeHfdDezt76rcYEM73cWsWNHxXj","username","solanaWallet","displayName","Ayg...xXj","bio","avatar","/avatar.svg","commitCount",73,"forkCount",0,"likeCount",4,"runsCount",4334,"downvoteCount","upvoteCount",5,"upvoteRate","commentCount",6,"visitorCount",9,"isArchived","isRenamed","contractAddress","6HsMxxNDee1WsRzonNtEEu35Lti4CXey8wzueY7rpump","code","import { useState, useEffect, useRef } from 'react';\nimport { Edit2, Trash2, X, Image as ImageIcon, Eye, Edit, ArrowLeft, ArrowRight, Plus, Info, RefreshCw, Users, Lock, LogOut, Link, HelpCircle, Keyboard, Calendar, Star, Users as UsersIcon, Save, Send, ExternalLink } from 'lucide-react';\nimport { useChat } from 'ai/react';\nimport { BarChart, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';\nimport { fetchTokenInfoByAddress } from '@devfunlabs/web-sdk';\nimport { StateClient } from '@devfunlabs/state-client';\nconst stateClient = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: '4b25487a985cd10e8c60'\n});\nconst saveEntity = async (entityName, entityData) => {\n try {\n await stateClient.createEntity(entityName, entityData);\n } catch (error) {\n await stateClient.updateEntity(entityName, entityData.id, entityData);\n }\n};\nconst ADMIN_USERNAME = 'pacecrypto';\nconst ADMIN_PASSWORD = 'ardoganteng';\nfunction ErrorBoundary({\n children,\n fallback\n}) {\n const [hasError, setHasError] = useState(false);\n const [error, setError] = useState(null);\n useEffect(() => {\n const errorHandler = error => {\n console.error(\"Caught error:\", error);\n setError(error);\n setHasError(true);\n };\n window.addEventListener('error', errorHandler);\n return () => window.removeEventListener('error', errorHandler);\n }, []);\n if (hasError) {\n return typeof fallback === 'function' ? fallback(error) : fallback ||

Something went wrong. Please try again.

;\n }\n return children;\n}\nconst AdSettingsModal = ({\n section,\n image,\n setImage,\n url,\n setUrl,\n onSave,\n onCancel\n}) => {\n const imageInputRef = useRef(null);\n const handleImageFileChange = e => {\n if (e.target.files && e.target.files[0]) {\n const file = e.target.files[0];\n const reader = new FileReader();\n reader.onload = loadEvent => {\n setImage(loadEvent.target.result);\n };\n reader.readAsDataURL(file);\n }\n };\n return

Edit {section === 'top' ? 'Top' : 'Bottom'} Ad Slot

\n \n

\n Ad Image\n

\n {image ? $\"Ad$ : }\n

\n \n Upload a file\n \n \n

or paste URL below

PNG, JPG, GIF

\n\n

\n Image URL\n setImage(e.target.value)} className=\"w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition\" placeholder=\"https://example.com/ad.png\" />\n

\n\n

\n Link URL\n setUrl(e.target.value)} className=\"w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition\" placeholder=\"https://your-product.com\" />\n

\n \n \n

;\n};\nconst AdsSlot2 = ({\n isAdmin\n}) => {\n const [topAdClosed, setTopAdClosed] = useState(false);\n const [bottomAdClosed, setBottomAdClosed] = useState(false);\n const [topAdTimer, setTopAdTimer] = useState(60);\n const [bottomAdTimer, setBottomAdTimer] = useState(60);\n const [topAdImage, setTopAdImage] = useState('');\n const [topAdUrl, setTopAdUrl] = useState('');\n const [bottomAdImage, setBottomAdImage] = useState('');\n const [bottomAdUrl, setBottomAdUrl] = useState('');\n const [showTopAdSettings, setShowTopAdSettings] = useState(false);\n const [showBottomAdSettings, setShowBottomAdSettings] = useState(false);\n useEffect(() => {\n const fetchAds = async () => {\n try {\n const topAdData = await stateClient.getEntity('adContent', 'topAd');\n if (topAdData && topAdData.image) {\n setTopAdImage(topAdData.image);\n setTopAdUrl(topAdData.url || '');\n }\n } catch (e) {\n console.error(\"Failed to fetch top ad\", e);\n }\n try {\n const bottomAdData = await stateClient.getEntity('adContent', 'bottomAd');\n if (bottomAdData && bottomAdData.image) {\n setBottomAdImage(bottomAdData.image);\n setBottomAdUrl(bottomAdData.url || '');\n }\n } catch (e) {\n console.error(\"Failed to fetch bottom ad\", e);\n }\n };\n fetchAds();\n if (isAdmin) {\n const savedTopAdClosed = localStorage.getItem('paceterminal-top-ad-closed') === 'true';\n const savedBottomAdClosed = localStorage.getItem('paceterminal-bottom-ad-closed') === 'true';\n if (savedTopAdClosed) setTopAdClosed(savedTopAdClosed);\n if (savedBottomAdClosed) setBottomAdClosed(savedBottomAdClosed);\n }\n }, [isAdmin]);\n useEffect(() => {\n if (!isAdmin) return;\n let topInterval;\n let bottomInterval;\n if (!topAdClosed && topAdTimer > 0) {\n topInterval = setInterval(() => {\n setTopAdTimer(prev => prev - 1);\n }, 1000);\n }\n if (!bottomAdClosed && bottomAdTimer > 0) {\n bottomInterval = setInterval(() => {\n setBottomAdTimer(prev => prev - 1);\n }, 1000);\n }\n return () => {\n clearInterval(topInterval);\n clearInterval(bottomInterval);\n };\n }, [topAdClosed, bottomAdClosed, topAdTimer, bottomAdTimer, isAdmin]);\n const handleCloseTopAd = () => {\n if (topAdTimer <= 0) {\n setTopAdClosed(true);\n localStorage.setItem('paceterminal-top-ad-closed', 'true');\n }\n };\n const handleCloseBottomAd = () => {\n if (bottomAdTimer <= 0) {\n setBottomAdClosed(true);\n localStorage.setItem('paceterminal-bottom-ad-closed', 'true');\n }\n };\n const saveTopAdSettings = () => {\n localStorage.setItem('paceterminal-top-ad-image', topAdImage);\n localStorage.setItem('paceterminal-top-ad-url', topAdUrl);\n setTopAdClosed(false);\n localStorage.removeItem('paceterminal-top-ad-closed');\n try {\n stateClient.createEntity('adContent', {\n id: 'topAd',\n image: topAdImage,\n url: topAdUrl,\n lastUpdated: new Date().toISOString()\n }).catch(() => {\n stateClient.updateEntity('adContent', 'topAd', {\n image: topAdImage,\n url: topAdUrl,\n lastUpdated: new Date().toISOString()\n });\n });\n } catch (error) {\n console.error(\"Error saving ad content to server:\", error);\n }\n setShowTopAdSettings(false);\n };\n const saveBottomAdSettings = () => {\n localStorage.setItem('paceterminal-bottom-ad-image', bottomAdImage);\n localStorage.setItem('paceterminal-bottom-ad-url', bottomAdUrl);\n setBottomAdClosed(false);\n localStorage.removeItem('paceterminal-bottom-ad-closed');\n try {\n stateClient.createEntity('adContent', {\n id: 'bottomAd',\n image: bottomAdImage,\n url: bottomAdUrl,\n lastUpdated: new Date().toISOString()\n }).catch(() => {\n stateClient.updateEntity('adContent', 'bottomAd', {\n image: bottomAdImage,\n url: bottomAdUrl,\n lastUpdated: new Date().toISOString()\n });\n });\n } catch (error) {\n console.error(\"Error saving ad content to server:\", error);\n }\n setShowBottomAdSettings(false);\n };\n return <>\n {showTopAdSettings && isAdmin && setShowTopAdSettings(false)} />}\n {showBottomAdSettings && isAdmin && setShowBottomAdSettings(false)} />}\n

\n {!topAdClosed &&

\n Sponsored\n {isAdmin && }\n

\n {topAdImage ? \n $\"Advertisement\"$ \n :

\n Lelang Lapak Iklan Di X @PaceTerminal!\n

\n Your Ad Here\n

}\n

\n {isAdmin && <>\n \n {topAdTimer > 0 &&

\n {topAdTimer}s\n

}\n }\n

}\n \n {!bottomAdClosed &&

\n Sponsored\n {isAdmin && }\n

\n \n

\n {bottomAdImage ? \n $\"Advertisement\"$ \n :

SPACE AVAILABLE

\n Lelang Lapak Iklan Di X @PaceTerminal!\n

\n Premium Spot\n

}\n

\n {isAdmin && <>\n \n {bottomAdTimer > 0 &&

\n {bottomAdTimer}s\n

}\n }\n

}\n

\n ;\n};\nexport default function App() {\n const [isLoading, setIsLoading] = useState(true);\n const [isAdmin, setIsAdmin] = useState(false);\n const [showLoginModal, setShowLoginModal] = useState(false);\n const [loginUsername, setLoginUsername] = useState('');\n const [loginPassword, setLoginPassword] = useState('');\n const [loginError, setLoginError] = useState('');\n const [fomoCronActive, setFomoCronActive] = useState(false);\n const [posts, setPosts] = useState([]);\n const [isAdding, setIsAdding] = useState(false);\n const [isEditing, setIsEditing] = useState(false);\n const [creatorMode, setCreatorMode] = useState(false);\n const [isTerminalMode,,] = useState(true);\n const [tokens, setTokens] = useState([]);\n const [trendingTokens, setTrendingTokens] = useState([]);\n const [selectedToken, setSelectedToken] = useState(null);\n const [isAddingToken, setIsAddingToken] = useState(false);\n const [isAddingTrendingToken, setIsAddingTrendingToken] = useState(false);\n const [trendingTokenAddress, setTrendingTokenAddress] = useState('');\n const [, setContractAddress] = useState('');\n const [, setLastUpdated] = useState(new Date());\n const [isLoadingToken, setIsLoadingToken] = useState(false);\n const [starredTokens, setStarredTokens] = useState([]);\n const [, setTitle] = useState('');\n const [, setContent] = useState('');\n const [, setImageUrl] = useState('');\n const [, setImageFile] = useState(null);\n const [, setPostTokenAddress] = useState('');\n const [, setTokenLookupError] = useState('');\n const [selectedPost, setSelectedPost] = useState(null);\n const [currentPost,,] = useState(null);\n const [, setTokenError] = useState('');\n const [trendingTokenError, setTrendingTokenError] = useState('');\n const [, setTokenChartData] = useState([]);\n const [isLoadingChart, setIsLoadingChart] = useState(false);\n const [chartTimeframe] = useState('24h');\n const [activeDashboardTab, setActiveDashboardTab] = useState('tokenInfo');\n const [fomoSettings, setFomoSettings] = useState({\n weights: {\n mentions: 40,\n sentiment: 30,\n priceAction: 20,\n volume: 10\n },\n refreshInterval: 15,\n threshold: {\n low: 30,\n medium: 60,\n high: 80\n }\n });\n const [selectedDeveloper, setSelectedDeveloper] = useState(null);\n const [fomoHistory, setFomoHistory] = useState([]);\n const [fomoData, setFomoData] = useState({\n score: 0,\n trend: 0,\n components: {\n mentions: 0,\n sentiment: 0,\n priceAction: 0,\n volume: 0\n },\n lastUpdated: null\n });\n const [, setTokenomics] = useState({\n totalSupply: 1000000000,\n circulatingSupply: 400000000,\n revenue: {\n total: 2500000,\n launchcoin: 850000,\n trading: 950000,\n staking: 700000\n },\n distribution: [{\n id: '1',\n title: 'Team',\n percentage: 15,\n color: '#4C9AFF'\n }, {\n id: '2',\n title: 'Investors',\n percentage: 20,\n color: '#6554C0'\n }, {\n id: '3',\n title: 'Community',\n percentage: 35,\n color: '#36B37E'\n }, {\n id: '4',\n title: 'Treasury',\n percentage: 10,\n color: '#FF8B00'\n }, {\n id: '5',\n title: 'Liquidity',\n percentage: 10,\n color: '#FFAB00'\n }, {\n id: '6',\n title: 'Ecosystem',\n percentage: 10,\n color: '#00B8D9'\n }]\n });\n const [currentDate] = useState(new Date().toLocaleDateString('id-ID', {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n }));\n const [showCalendar, setShowCalendar] = useState(false);\n const [selectedCalendarDate, setSelectedCalendarDate] = useState(new Date());\n const [viewMonth, setViewMonth] = useState(new Date());\n useEffect(() => {\n const storedAuth = localStorage.getItem('paceterminal-auth');\n if (storedAuth) {\n try {\n const authData = JSON.parse(storedAuth);\n if (authData.isAdmin) {\n setIsAdmin(true);\n }\n } catch (error) {\n console.error(\"Error parsing auth data:\", error);\n }\n }\n const storedStarredTokens = localStorage.getItem('paceterminal-starred-tokens');\n if (storedStarredTokens) {\n try {\n const starredTokensData = JSON.parse(storedStarredTokens);\n setStarredTokens(starredTokensData);\n } catch (error) {\n console.error(\"Error parsing starred tokens data:\", error);\n }\n }\n const storedArticles = localStorage.getItem('paceterminal-articles-backup');\n if (storedArticles) {\n try {\n const articlesData = JSON.parse(storedArticles);\n if (articlesData && articlesData.length > 0) {\n console.log(\"Loaded\", articlesData.length, \"articles from local backup\");\n setArticles(articlesData);\n }\n } catch (error) {\n console.error(\"Error parsing backup articles data:\", error);\n }\n }\n const storedTeamMembers = localStorage.getItem('paceterminal-team-backup');\n if (storedTeamMembers) {\n try {\n const teamData = JSON.parse(storedTeamMembers);\n if (teamData && teamData.length > 0) {\n console.log(\"Loaded\", teamData.length, \"team members from local backup\");\n setTeamMembers(teamData);\n }\n } catch (error) {\n console.error(\"Error parsing backup team data:\", error);\n }\n }\n const storedPosts = localStorage.getItem('paceterminal-posts-backup');\n if (storedPosts) {\n try {\n const postsData = JSON.parse(storedPosts);\n if (postsData && postsData.length > 0) {\n console.log(\"Loaded\", postsData.length, \"articles from local backup\");\n setPosts(postsData);\n }\n } catch (error) {\n console.error(\"Error parsing backup posts data:\", error);\n }\n }\n const loadingTimer = setTimeout(() => {\n setIsLoading(false);\n }, 2500);\n return () => clearTimeout(loadingTimer);\n }, []);\n const [isUserInteracting, setIsUserInteracting] = useState(false);\n const [lastRefreshTime, setLastRefreshTime] = useState({});\n const interactionTimeoutRef = useRef(null);\n const markUserInteraction = () => {\n setIsUserInteracting(true);\n if (interactionTimeoutRef.current) {\n clearTimeout(interactionTimeoutRef.current);\n }\n interactionTimeoutRef.current = setTimeout(() => {\n setIsUserInteracting(false);\n }, 30000);\n };\n useEffect(() => {\n const fetchTokens = async () => {\n try {\n const fetchedTokens = await stateClient.getEntities('tokens');\n if (fetchedTokens && fetchedTokens.length > 0) {\n setTokens(fetchedTokens);\n }\n } catch (error) {\n console.error(\"Error fetching tokens:\", error);\n }\n };\n fetchTokens();\n const fetchTrendingTokens = async () => {\n try {\n const fetchedTrendingTokens = await stateClient.getEntities('trendingTokens');\n if (fetchedTrendingTokens && fetchedTrendingTokens.length > 0) {\n setTrendingTokens(fetchedTrendingTokens);\n }\n } catch (error) {\n console.error(\"Error fetching trending tokens:\", error);\n }\n };\n fetchTrendingTokens();\n }, []);\n useEffect(() => {\n if (!selectedToken || !selectedToken.contractAddress) return;\n setIsLoadingToken(true);\n try {\n setActiveDashboardTab('tokenInfo');\n setLastRefreshTime(prev => ({\n ...prev,\n [`token_${selectedToken.contractAddress}`]: Date.now()\n }));\n } catch (error) {\n console.error(\"Error loading token data:\", error);\n } finally {\n setIsLoadingToken(false);\n }\n }, [selectedToken?.contractAddress]);\n useEffect(() => {\n if (selectedToken && fomoCronActive && !isUserInteracting) {\n const visualRefreshInterval = setInterval(() => {\n if (!isUserInteracting) {\n updateFomoData(false, false);\n }\n }, Math.max(fomoSettings.refreshInterval * 60 * 1000, 300000));\n const dataStorageInterval = setInterval(() => {\n if (!isUserInteracting) {\n console.log(\"Hourly FOMO data storage triggered\");\n updateFomoData(false, true);\n }\n }, 60 * 60 * 1000);\n return () => {\n clearInterval(visualRefreshInterval);\n clearInterval(dataStorageInterval);\n };\n }\n }, [isTerminalMode, selectedToken, fomoCronActive, fomoSettings.refreshInterval, isUserInteracting]);\n useEffect(() => {\n if (selectedToken) {\n loadFomoData();\n }\n }, [selectedToken]);\n const loadFomoData = async () => {\n try {\n const tokenFomoSettings = await stateClient.getEntity('fomoSettings', selectedToken.contractAddress);\n if (tokenFomoSettings) {\n setFomoSettings(tokenFomoSettings);\n }\n const tokenFomoHistory = await stateClient.getEntity('fomoHistory', selectedToken.contractAddress);\n if (tokenFomoHistory && tokenFomoHistory.history) {\n setFomoHistory(tokenFomoHistory.history);\n } else {\n setFomoHistory([]);\n }\n const tokenFomoData = await stateClient.getEntity('fomoData', selectedToken.contractAddress);\n if (tokenFomoData) {\n setFomoData(tokenFomoData);\n } else {\n updateFomoData(true, true);\n }\n } catch (error) {\n console.error(\"Error loading FOMO data:\", error);\n updateFomoData(true, true);\n }\n };\n const handleLogin = e => {\n e.preventDefault();\n setLoginError('');\n if (loginUsername === ADMIN_USERNAME && loginPassword === ADMIN_PASSWORD) {\n setIsAdmin(true);\n localStorage.setItem('paceterminal-auth', JSON.stringify({\n isAdmin: true\n }));\n setShowLoginModal(false);\n setLoginUsername('');\n setLoginPassword('');\n } else {\n setLoginError('Invalid username or password');\n }\n };\n const handleLogout = () => {\n setIsAdmin(false);\n setCreatorMode(false);\n localStorage.removeItem('paceterminal-auth');\n };\n const handleLogoClick = () => {\n setIsAdding(false);\n setIsEditing(false);\n setShowCalendar(false);\n };\n const resetForm = () => {\n setTitle('');\n setContent('');\n setImageUrl('');\n setImageFile(null);\n setPostTokenAddress('');\n setTokenLookupError('');\n setIsPublicPost(true);\n };\n const handleAddTokenWithMetrics = async tokenData => {\n setIsLoadingToken(true);\n setTokenError('');\n try {\n const tokenInfo = await fetchTokenInfoByAddress(tokenData.contractAddress);\n if (!tokenInfo) {\n setTokenError('Token not found. Please check the contract address.');\n return;\n }\n if (!tokens.some(t => t.contractAddress === tokenInfo.contractAddress)) {\n const newToken = {\n id: tokenInfo.contractAddress,\n ...tokenInfo,\n description: tokenData.description || tokenInfo.description,\n startupMetrics: {\n arr: tokenData.startupMetrics.arr,\n growthRate: tokenData.startupMetrics.growthRate,\n activeUsers: tokenData.startupMetrics.activeUsers,\n totalUsers: tokenData.startupMetrics.totalUsers,\n category: tokenData.startupMetrics.category,\n shortDescription: tokenData.startupMetrics.shortDescription,\n socialFollowers: tokenData.socialFollowers || {\n twitter: 1000,\n telegram: 500,\n discord: 2000,\n reddit: 1000\n }\n },\n growthData: tokenData.growthData,\n tokenomics: tokenData.tokenomics\n };\n setTokens(prev => [newToken, ...prev]);\n await stateClient.createEntity('tokens', newToken);\n setContractAddress('');\n setIsAddingToken(false);\n } else {\n setTokenError('Token already exists in your list.');\n }\n } catch (error) {\n console.error(\"Error adding token:\", error);\n setTokenError('Failed to add token. Please try again.');\n } finally {\n setIsLoadingToken(false);\n }\n };\n const handleUpdateToken = async tokenData => {\n setIsLoadingToken(true);\n try {\n if (selectedToken) {\n const updatedToken = {\n ...selectedToken,\n description: tokenData.description,\n startupMetrics: {\n ...selectedToken.startupMetrics,\n arr: tokenData.startupMetrics.arr,\n growthRate: tokenData.startupMetrics.growthRate,\n activeUsers: tokenData.startupMetrics.activeUsers,\n totalUsers: tokenData.startupMetrics.totalUsers,\n category: tokenData.startupMetrics.category,\n shortDescription: tokenData.startupMetrics.shortDescription,\n socialFollowers: tokenData.socialFollowers\n },\n growthData: tokenData.growthData,\n tokenomics: tokenData.tokenomics,\n fomoSettings: tokenData.fomoSettings || fomoSettings,\n onchainData: selectedToken.onchainData || null,\n lastUpdated: new Date().toISOString()\n };\n await stateClient.updateEntity('tokens', selectedToken.id, updatedToken);\n setTokens(tokens.map(token => token.contractAddress === selectedToken.contractAddress ? updatedToken : token));\n setSelectedToken(updatedToken);\n setIsEditing(false);\n try {\n await stateClient.createEntity('fomoSettings', {\n id: selectedToken.contractAddress,\n ...tokenData.fomoSettings\n });\n await stateClient.createEntity('startupMetrics', {\n id: selectedToken.contractAddress,\n ...tokenData.startupMetrics,\n socialFollowers: tokenData.socialFollowers,\n lastUpdated: new Date().toISOString()\n });\n await stateClient.createEntity('tokenomics', {\n id: selectedToken.contractAddress,\n ...tokenData.tokenomics,\n lastUpdated: new Date().toISOString()\n });\n await stateClient.createEntity('growthData', {\n id: selectedToken.contractAddress,\n data: tokenData.growthData,\n lastUpdated: new Date().toISOString()\n });\n } catch (error) {\n console.error(\"Error creating token metrics:\", error);\n try {\n await stateClient.updateEntity('fomoSettings', selectedToken.contractAddress, tokenData.fomoSettings);\n await stateClient.updateEntity('startupMetrics', selectedToken.contractAddress, {\n ...tokenData.startupMetrics,\n socialFollowers: tokenData.socialFollowers,\n lastUpdated: new Date().toISOString()\n });\n await stateClient.updateEntity('tokenomics', selectedToken.contractAddress, {\n ...tokenData.tokenomics,\n lastUpdated: new Date().toISOString()\n });\n await stateClient.updateEntity('growthData', selectedToken.contractAddress, {\n data: tokenData.growthData,\n lastUpdated: new Date().toISOString()\n });\n } catch (updateError) {\n console.error(\"Error updating token metrics:\", updateError);\n }\n }\n }\n } catch (error) {\n console.error(\"Error updating token:\", error);\n alert(\"Failed to update token. Please try again.\");\n } finally {\n setIsLoadingToken(false);\n }\n };\n const handleAddTrendingToken = async () => {\n setIsLoadingToken(true);\n setTrendingTokenError('');\n try {\n const tokenInfo = await fetchTokenInfoByAddress(trendingTokenAddress);\n if (!tokenInfo) {\n setTrendingTokenError('Token not found. Please check the contract address.');\n setIsLoadingToken(false);\n return;\n }\n if (!trendingTokens.some(t => t.contractAddress === tokenInfo.contractAddress)) {\n const newTrendingToken = {\n id: tokenInfo.contractAddress,\n ...tokenInfo,\n addedAt: new Date().toISOString()\n };\n setTrendingTokens(prev => [newTrendingToken, ...prev]);\n await stateClient.createEntity('trendingTokens', newTrendingToken);\n setTrendingTokenAddress('');\n setIsAddingTrendingToken(false);\n } else {\n setTrendingTokenError('Token already exists in trending list.');\n }\n } catch (error) {\n console.error(\"Error adding trending token:\", error);\n setTrendingTokenError('Failed to add trending token. Please try again.');\n } finally {\n setIsLoadingToken(false);\n }\n };\n const handleDeleteTrendingToken = async (contractAddress, e) => {\n e.stopPropagation();\n if (confirm('Are you sure you want to remove this trending token?')) {\n try {\n setTrendingTokens(prev => prev.filter(t => t.contractAddress !== contractAddress));\n await stateClient.deleteEntity('trendingTokens', contractAddress);\n console.log(`✅ Trending token deleted successfully: ${contractAddress}`);\n } catch (error) {\n console.error(\"Error deleting trending token:\", error);\n alert(\"Failed to delete trending token. Please try again.\");\n }\n }\n };\n const toggleStarToken = (tokenAddress, e) => {\n e.stopPropagation();\n const newStarredTokens = [...starredTokens];\n const index = newStarredTokens.indexOf(tokenAddress);\n if (index === -1) {\n newStarredTokens.push(tokenAddress);\n } else {\n newStarredTokens.splice(index, 1);\n }\n setStarredTokens(newStarredTokens);\n localStorage.setItem('paceterminal-starred-tokens', JSON.stringify(newStarredTokens));\n };\n const handleSelectToken = async token => {\n if (!token || !token.contractAddress) return;\n setSelectedToken({\n ...token,\n isLoading: true\n });\n setActiveDashboardTab('tokenInfo');\n setIsLoadingToken(true);\n try {\n let tokenWithMetrics = {\n ...token,\n isLoading: true\n };\n try {\n const generatedMetrics = {\n arr: Math.random() * 1000000 + 100000,\n growthRate: Math.random() * 30 + 5,\n activeUsers: Math.floor(Math.random() * 50000 + 5000),\n totalUsers: Math.floor(Math.random() * 200000 + 50000),\n category: ['DeFi', 'NFTs', 'Gaming', 'Infrastructure', 'Social'][Math.floor(Math.random() * 5)],\n socialFollowers: {\n twitter: Math.floor(Math.random() * 100000 + 1000),\n telegram: Math.floor(Math.random() * 50000 + 500),\n discord: Math.floor(Math.random() * 30000 + 2000),\n reddit: Math.floor(Math.random() * 20000 + 1000)\n },\n history: [],\n lastUpdated: new Date().toISOString()\n };\n tokenWithMetrics.startupMetrics = generatedMetrics;\n } catch (error) {\n console.error(\"Error loading startup metrics:\", error);\n tokenWithMetrics.startupMetrics = token.startupMetrics || {\n arr: Math.random() * 1000000 + 100000,\n growthRate: Math.random() * 30 + 5,\n activeUsers: Math.floor(Math.random() * 50000 + 5000),\n totalUsers: Math.floor(Math.random() * 200000 + 50000),\n category: ['DeFi', 'NFTs', 'Gaming', 'Infrastructure', 'Social'][Math.floor(Math.random() * 5)],\n socialFollowers: {\n twitter: Math.floor(Math.random() * 100000 + 1000),\n telegram: Math.floor(Math.random() * 50000 + 500),\n discord: Math.floor(Math.random() * 30000 + 2000),\n reddit: Math.floor(Math.random() * 20000 + 1000)\n },\n history: []\n };\n }\n try {\n const savedOnchainData = await stateClient.getEntity('onchainData', token.contractAddress);\n if (savedOnchainData) {\n tokenWithMetrics.onchainData = savedOnchainData;\n } else {\n const generatedOnchainData = {\n holdersCount: Math.floor(Math.random() * 10000 + 1000),\n marketCap: Math.random() * 50000000 + 1000000,\n holderGrowth: Math.random() * 20 + 5,\n lastUpdated: new Date().toISOString()\n };\n tokenWithMetrics.onchainData = generatedOnchainData;\n try {\n await stateClient.createEntity('onchainData', {\n id: token.contractAddress,\n ...generatedOnchainData\n });\n } catch (createError) {\n console.error(\"Error creating onchain data:\", createError);\n }\n }\n } catch (error) {\n console.error(\"Error loading onchain data:\", error);\n tokenWithMetrics.onchainData = {\n holdersCount: Math.floor(Math.random() * 10000 + 1000),\n marketCap: Math.random() * 50000000 + 1000000,\n holderGrowth: Math.random() * 20 + 5,\n lastUpdated: new Date().toISOString()\n };\n }\n try {\n const savedGrowthData = await stateClient.getEntity('growthData', token.contractAddress);\n if (savedGrowthData && savedGrowthData.data) {\n tokenWithMetrics.growthData = savedGrowthData.data;\n } else {\n const generatedGrowthData = [{\n month: 'Jan',\n growth: token.startupMetrics?.growthRate * 0.85 || Math.random() * 10\n }, {\n month: 'Feb',\n growth: token.startupMetrics?.growthRate * 0.9 || Math.random() * 12\n }, {\n month: 'Mar',\n growth: token.startupMetrics?.growthRate * 0.95 || Math.random() * 14\n }, {\n month: 'Apr',\n growth: token.startupMetrics?.growthRate * 0.97 || Math.random() * 16\n }, {\n month: 'May',\n growth: token.startupMetrics?.growthRate * 1.0 || Math.random() * 18\n }, {\n month: 'Jun',\n growth: token.startupMetrics?.growthRate * 1.1 || Math.random() * 20\n }];\n tokenWithMetrics.growthData = generatedGrowthData;\n try {\n await stateClient.createEntity('growthData', {\n id: token.contractAddress,\n data: generatedGrowthData,\n lastUpdated: new Date().toISOString()\n });\n } catch (createError) {\n console.error(\"Error creating growth data:\", createError);\n }\n }\n } catch (error) {\n console.error(\"Error loading growth data:\", error);\n }\n setSelectedToken(tokenWithMetrics);\n const promises = [fetchTokenChartData(token.contractAddress), (async () => {\n try {\n const savedTokenomics = await stateClient.getEntity('tokenomics', token.contractAddress);\n if (savedTokenomics) {\n setTokenomics(savedTokenomics);\n } else if (token.tokenomics) {\n setTokenomics(token.tokenomics);\n }\n } catch (error) {\n console.error(\"Error loading tokenomics:\", error);\n if (token.tokenomics) {\n setTokenomics(token.tokenomics);\n }\n }\n })()];\n Promise.all(promises).catch(error => {\n console.error(\"Error loading token data:\", error);\n });\n setFomoData({\n score: 0,\n trend: 0,\n components: {\n mentions: 0,\n sentiment: 0,\n priceAction: 0,\n volume: 0\n },\n lastUpdated: null\n });\n setFomoHistory([]);\n if (!fomoCronActive) {\n setFomoCronActive(true);\n }\n } catch (error) {\n console.error(\"Error selecting token:\", error);\n } finally {\n setIsLoadingToken(false);\n }\n };\n const fetchTokenChartData = async (address, forceRefresh = false) => {\n const cacheKey = `chart_${address}`;\n if (!forceRefresh && lastRefreshTime[cacheKey] && Date.now() - lastRefreshTime[cacheKey] < 300000) {\n console.log(`Using cached chart data for ${address} - last refreshed ${(Date.now() - lastRefreshTime[cacheKey]) / 1000}s ago`);\n return;\n }\n setIsLoadingChart(true);\n try {\n const response = await fetch(`https://rpc.dev.fun/4b25487a985cd10e8c60?url=${encodeURIComponent(`https://api.dexscreener.com/latest/dex/tokens/${address}`)}`);\n const data = await response.json();\n if (data && data.pairs && data.pairs.length > 0) {\n const pair = data.pairs[0];\n let socialFollowers;\n setLastRefreshTime(prev => ({\n ...prev,\n [cacheKey]: Date.now()\n }));\n try {\n const savedStartupMetrics = await stateClient.getEntity('startupMetrics', address);\n if (savedStartupMetrics && savedStartupMetrics.socialFollowers) {\n socialFollowers = savedStartupMetrics.socialFollowers;\n } else {\n socialFollowers = {\n twitter: Math.floor(Math.random() * 100000 + 1000),\n telegram: Math.floor(Math.random() * 50000 + 500),\n discord: Math.floor(Math.random() * 30000 + 2000),\n reddit: Math.floor(Math.random() * 20000 + 1000)\n };\n if (isAdmin) {\n try {\n await stateClient.createEntity('socialFollowers', {\n id: address,\n ...socialFollowers,\n lastUpdated: new Date().toISOString()\n });\n } catch (error) {\n try {\n await stateClient.updateEntity('socialFollowers', address, socialFollowers);\n } catch (updateError) {\n console.error(\"Error saving social followers:\", updateError);\n }\n }\n }\n }\n } catch (error) {\n socialFollowers = {\n twitter: Math.floor(Math.random() * 100000 + 1000),\n telegram: Math.floor(Math.random() * 50000 + 500),\n discord: Math.floor(Math.random() * 30000 + 2000),\n reddit: Math.floor(Math.random() * 20000 + 1000)\n };\n }\n const actualPrice = parseFloat(pair.priceUsd);\n const actualPriceChange = parseFloat(pair.priceChange.h24);\n const tokenMetrics = {\n price: actualPrice,\n marketcap: parseFloat(pair.fdv),\n priceChangeIn24h: actualPriceChange,\n volumeIn24h: parseFloat(pair.volume.h24),\n liquidityInUSD: parseFloat(pair.liquidity.usd)\n };\n setSelectedToken(prevToken => ({\n ...prevToken,\n ...tokenMetrics,\n startupMetrics: {\n ...(prevToken?.startupMetrics || {})\n }\n }));\n const priceHistoryUrl = `https://io8.dexscreener.io/u/chart/bars/${pair.chainId}/${pair.pairAddress}/0`;\n const historyResponse = await fetch(`https://rpc.dev.fun/4b25487a985cd10e8c60?url=${encodeURIComponent(priceHistoryUrl)}`);\n const historyData = await historyResponse.json();\n if (historyData && historyData.data && historyData.data.length > 0) {\n const chartData = historyData.data.filter((_, index) => {\n const dataLength = historyData.data.length;\n if (chartTimeframe === '24h') return index > dataLength - 25;\n if (chartTimeframe === '7d') return index > dataLength - 84;\n if (chartTimeframe === '30d') return index > dataLength - 180;\n return true;\n }).map(bar => {\n const date = new Date(bar[0]);\n return {\n date: chartTimeframe === '24h' ? date.toLocaleTimeString('en-US', {\n hour: '2-digit',\n minute: '2-digit'\n }) : date.toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric'\n }),\n price: parseFloat(bar[4]),\n timestamp: date.getTime()\n };\n });\n setTokenChartData(chartData);\n try {\n await stateClient.createEntity('chartData', {\n id: address,\n data: chartData,\n timestamp: new Date().toISOString(),\n tokenMetrics: tokenMetrics\n });\n } catch (error) {\n try {\n await stateClient.updateEntity('chartData', address, {\n data: chartData,\n timestamp: new Date().toISOString(),\n tokenMetrics: tokenMetrics\n });\n } catch (updateError) {\n console.error(\"Error storing chart data:\", updateError);\n }\n }\n } else {\n setTokenChartData(generateChartData({\n price: 0.01,\n priceChangeIn24h: 0\n }));\n }\n } else {\n setTokenChartData(generateChartData({\n price: 0.01,\n priceChangeIn24h: 0\n }));\n }\n } catch (error) {\n console.error(\"Error fetching token chart data:\", error);\n setTokenChartData(generateChartData({\n price: 0.01,\n priceChangeIn24h: 0\n }));\n } finally {\n setIsLoadingChart(false);\n }\n };\n const [, setIsPublicPost] = useState(true);\n const handleCancel = () => {\n setIsAdding(false);\n setIsEditing(false);\n resetForm();\n };\n const handleCloseFullArticle = () => {\n setSelectedPost(null);\n };\n const CalendarView = ({\n selectedDate,\n setSelectedDate,\n viewMonth,\n setViewMonth,\n onClose\n }) => {\n const isSameDay = (date1, date2) => {\n return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();\n };\n const prevMonth = () => {\n setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() - 1, 1));\n };\n const nextMonth = () => {\n setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 1));\n };\n const generateCalendarDays = () => {\n const year = viewMonth.getFullYear();\n const month = viewMonth.getMonth();\n const firstDay = new Date(year, month, 1);\n const lastDay = new Date(year, month + 1, 0);\n const firstDayOfWeek = firstDay.getDay();\n const daysFromPrevMonth = firstDayOfWeek;\n const daysInMonth = lastDay.getDate();\n const daysFromNextMonth = Math.ceil((daysInMonth + daysFromPrevMonth) / 7) * 7 - (daysInMonth + daysFromPrevMonth);\n const days = [];\n const prevMonthLastDay = new Date(year, month, 0).getDate();\n for (let i = daysFromPrevMonth - 1; i >= 0; i--) {\n const date = new Date(year, month - 1, prevMonthLastDay - i);\n days.push({\n date,\n isCurrentMonth: false,\n isToday: isSameDay(date, new Date()),\n isSameDay: d => isSameDay(date, d)\n });\n }\n for (let i = 1; i <= daysInMonth; i++) {\n const date = new Date(year, month, i);\n days.push({\n date,\n isCurrentMonth: true,\n isToday: isSameDay(date, new Date()),\n isSameDay: d => isSameDay(date, d)\n });\n }\n for (let i = 1; i <= daysFromNextMonth; i++) {\n const date = new Date(year, month + 1, i);\n days.push({\n date,\n isCurrentMonth: false,\n isToday: isSameDay(date, new Date()),\n isSameDay: d => isSameDay(date, d)\n });\n }\n return days;\n };\n return

Calendar

\n \n

\n {viewMonth.toLocaleDateString('id-ID', {\n month: 'long',\n year: 'numeric'\n })}\n

\n \n

\n\n

\n {}\n {['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'].map(day =>

\n {day}\n

)}\n {}\n {generateCalendarDays().map((day, index) =>

setSelectedDate(day.date)}>\n {day.date.getDate()}\n

)}\n

;\n };\n const updateFomoData = async (isInitial = false, shouldSave = false) => {\n if (!selectedToken) return;\n const simulateMentions = () => {\n const followers = selectedToken.startupMetrics?.socialFollowers?.twitter || 1000;\n const baseRate = followers / 10000;\n const randomFactor = Math.random() * 0.5 + 0.75;\n const mentionsScore = Math.min(100, Math.max(0, baseRate * randomFactor * 100));\n return mentionsScore;\n };\n const simulateSentiment = () => {\n const priceChange = selectedToken.priceChangeIn24h || 0;\n const sentimentBase = 50 + priceChange * 2;\n const randomFactor = Math.random() * 30 - 15;\n return Math.min(100, Math.max(0, sentimentBase + randomFactor));\n };\n const getPriceActionScore = () => {\n const priceChange = selectedToken.priceChangeIn24h || 0;\n const baseScore = 50 + priceChange * 2;\n return Math.min(100, Math.max(0, baseScore));\n };\n const getVolumeScore = () => {\n const volume = selectedToken.volumeIn24h || 0;\n const marketCap = selectedToken.marketcap || 1000000;\n const volumeRatio = volume / marketCap;\n const volumeScore = volumeRatio * 5000;\n return Math.min(100, Math.max(0, volumeScore));\n };\n const components = {\n mentions: simulateMentions(),\n sentiment: simulateSentiment(),\n priceAction: getPriceActionScore(),\n volume: getVolumeScore()\n };\n const {\n weights\n } = fomoSettings;\n const weightSum = Object.values(weights).reduce((sum, weight) => sum + weight, 0);\n let weightedScore = 0;\n Object.entries(components).forEach(([key, value]) => {\n weightedScore += value * weights[key] / weightSum;\n });\n let trend = 0;\n if (fomoData.score > 0 && !isInitial) {\n trend = weightedScore - fomoData.score;\n }\n const newFomoData = {\n id: selectedToken.contractAddress,\n score: Math.round(weightedScore),\n trend: parseFloat(trend.toFixed(1)),\n components,\n lastUpdated: new Date().toISOString()\n };\n setFomoData(newFomoData);\n const newHistoryEntry = {\n time: new Date().toLocaleTimeString('en-US', {\n hour: '2-digit',\n minute: '2-digit'\n }),\n score: newFomoData.score,\n trend: newFomoData.trend,\n timestamp: new Date().getTime()\n };\n const updatedHistory = [...fomoHistory, newHistoryEntry];\n if (updatedHistory.length > 24) {\n setFomoHistory(updatedHistory.slice(updatedHistory.length - 24));\n } else {\n setFomoHistory(updatedHistory);\n }\n if (shouldSave) {\n try {\n await stateClient.createEntity('fomoData', newFomoData);\n } catch (error) {\n console.error(\"Error creating FOMO data:\", error);\n try {\n await stateClient.updateEntity('fomoData', selectedToken.contractAddress, newFomoData);\n } catch (updateError) {\n console.error(\"Error updating FOMO data:\", updateError);\n }\n }\n try {\n let existingHistory = [];\n try {\n const tokenFomoHistory = await stateClient.getEntity('fomoHistory', selectedToken.contractAddress);\n if (tokenFomoHistory && tokenFomoHistory.history) {\n existingHistory = tokenFomoHistory.history;\n }\n } catch (fetchError) {\n console.error(\"Error fetching existing FOMO history:\", fetchError);\n }\n const completeHistory = [...existingHistory, newHistoryEntry];\n const historyToSave = {\n id: selectedToken.contractAddress,\n history: completeHistory.length > 168 ? completeHistory.slice(completeHistory.length - 168) : completeHistory,\n lastSaved: new Date().toISOString()\n };\n await stateClient.createEntity('fomoHistory', historyToSave);\n } catch (error) {\n console.error(\"Error creating FOMO history:\", error);\n try {\n await stateClient.updateEntity('fomoHistory', selectedToken.contractAddress, {\n history: updatedHistory,\n lastSaved: new Date().toISOString()\n });\n } catch (updateError) {\n console.error(\"Error updating FOMO history:\", updateError);\n }\n }\n }\n };\n const TokenForm = () => {\n const [editMode, setEditMode] = useState(false);\n const [tokenData, setTokenData] = useState({\n contractAddress: '',\n description: '',\n startupMetrics: {\n arr: 100000,\n growthRate: 10,\n activeUsers: 5000,\n totalUsers: 20000,\n category: 'DeFi',\n shortDescription: ''\n },\n socialFollowers: {\n twitter: 1000,\n telegram: 500,\n discord: 2000,\n reddit: 1000\n },\n fomoSettings: {\n weights: {\n mentions: 40,\n sentiment: 30,\n priceAction: 20,\n volume: 10\n },\n refreshInterval: 15,\n threshold: {\n low: 30,\n medium: 60,\n high: 80\n }\n },\n tokenomics: {\n totalSupply: 1000000000,\n circulatingSupply: 400000000,\n revenue: {\n total: 2500000,\n launchcoin: 850000,\n trading: 950000,\n staking: 700000\n },\n distribution: [{\n id: '1',\n title: 'Team',\n percentage: 15,\n color: '#4C9AFF'\n }, {\n id: '2',\n title: 'Investors',\n percentage: 20,\n color: '#6554C0'\n }, {\n id: '3',\n title: 'Community',\n percentage: 35,\n color: '#36B37E'\n }, {\n id: '4',\n title: 'Treasury',\n percentage: 10,\n color: '#FF8B00'\n }, {\n id: '5',\n title: 'Liquidity',\n percentage: 10,\n color: '#FFAB00'\n }, {\n id: '6',\n title: 'Ecosystem',\n percentage: 10,\n color: '#00B8D9'\n }]\n },\n growthData: [{\n month: 'Jan',\n growth: 5\n }, {\n month: 'Feb',\n growth: 7\n }, {\n month: 'Mar',\n growth: 8\n }, {\n month: 'Apr',\n growth: 9\n }, {\n month: 'May',\n growth: 10\n }, {\n month: 'Jun',\n growth: 12\n }]\n });\n useEffect(() => {\n if (isEditing && currentPost) {\n setEditMode(true);\n setIsPublicPost(currentPost.isPublic !== false);\n setTokenData({\n contractAddress: selectedToken.contractAddress || '',\n description: selectedToken.description || '',\n startupMetrics: {\n arr: selectedToken.startupMetrics?.arr || 100000,\n growthRate: selectedToken.startupMetrics?.growthRate || 10,\n activeUsers: selectedToken.startupMetrics?.activeUsers || 5000,\n totalUsers: selectedToken.startupMetrics?.totalUsers || 20000,\n category: selectedToken.startupMetrics?.category || 'DeFi',\n shortDescription: selectedToken.startupMetrics?.shortDescription || ''\n },\n socialFollowers: {\n twitter: selectedToken.startupMetrics?.socialFollowers?.twitter || 1000,\n telegram: selectedToken.startupMetrics?.socialFollowers?.telegram || 500,\n discord: selectedToken.startupMetrics?.socialFollowers?.discord || 2000,\n reddit: selectedToken.startupMetrics?.socialFollowers?.reddit || 1000\n },\n fomoSettings: selectedToken.fomoSettings || fomoSettings,\n tokenomics: selectedToken.tokenomics || {\n totalSupply: 1000000000,\n circulatingSupply: 400000000,\n revenue: {\n total: 2500000,\n launchcoin: 850000,\n trading: 950000,\n staking: 700000\n },\n distribution: [{\n id: '1',\n title: 'Team',\n percentage: 15,\n color: '#4C9AFF'\n }, {\n id: '2',\n title: 'Investors',\n percentage: 20,\n color: '#6554C0'\n }, {\n id: '3',\n title: 'Community',\n percentage: 35,\n color: '#36B37E'\n }, {\n id: '4',\n title: 'Treasury',\n percentage: 10,\n color: '#FF8B00'\n }, {\n id: '5',\n title: 'Liquidity',\n percentage: 10,\n color: '#FFAB00'\n }, {\n id: '6',\n title: 'Ecosystem',\n percentage: 10,\n color: '#00B8D9'\n }]\n },\n growthData: selectedToken.growthData || [{\n month: 'Jan',\n growth: 5\n }, {\n month: 'Feb',\n growth: 7\n }, {\n month: 'Mar',\n growth: 8\n }, {\n month: 'Apr',\n growth: 9\n }, {\n month: 'May',\n growth: 10\n }, {\n month: 'Jun',\n growth: 12\n }]\n });\n } else {\n setEditMode(false);\n setContractAddress(tokenData.contractAddress);\n }\n }, [isEditing, selectedToken]);\n const handleTokenDataChange = (field, value) => {\n if (field.includes('.')) {\n const [section, subfield] = field.split('.');\n if (field.includes('.revenue.')) {\n const [,, revenueField] = field.split('.');\n setTokenData({\n ...tokenData,\n tokenomics: {\n ...tokenData.tokenomics,\n revenue: {\n ...tokenData.tokenomics.revenue,\n [revenueField]: value\n }\n }\n });\n } else {\n setTokenData({\n ...tokenData,\n [section]: {\n ...tokenData[section],\n [subfield]: value\n }\n });\n }\n } else {\n setTokenData({\n ...tokenData,\n [field]: value\n });\n }\n };\n const handleTokenomicsChange = (field, value) => {\n setTokenData({\n ...tokenData,\n tokenomics: {\n ...tokenData.tokenomics,\n [field]: value\n }\n });\n };\n const handleGrowthDataChange = (index, value) => {\n const updatedGrowthData = [...tokenData.growthData];\n updatedGrowthData[index].growth = parseFloat(value);\n setTokenData({\n ...tokenData,\n growthData: updatedGrowthData\n });\n };\n const handleSubmit = e => {\n e.preventDefault();\n if (editMode) {\n handleUpdateToken(tokenData);\n } else {\n handleAddTokenWithMetrics(tokenData);\n }\n };\n return

\n {editMode ? 'Edit Token' : 'Add New Token'}\n

\n \n

\n \n Contract Address\n \n handleTokenDataChange('contractAddress', e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"Enter token contract address\" disabled={editMode} required />\n

\n \n Description\n \n

handleTokenDataChange('description', e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 h-32\" placeholder=\"Write about this token...\" />\n          </div>\n          <div className=\"border-t border-gray-200 pt-4\">\n            <h3 className=\"text-lg font-medium mb-4\">Startup Metrics</h3>\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n              <div>\n                <label htmlFor=\"arr\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Annual Recurring Revenue (USD)\n                </label>\n                <div className=\"flex items-center\">\n                  <span className=\"bg-gray-100 p-2 rounded-l\">$</span>\n                  <input id=\"arr\" type=\"number\" value={tokenData.startupMetrics.arr} onChange={e => handleTokenDataChange('startupMetrics.arr', parseFloat(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-r focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"100000\" min=\"0\" />\n                </div>\n              </div>\n              <div>\n                <label htmlFor=\"growthRate\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Growth Rate (% per month)\n                </label>\n                <div className=\"flex items-center\">\n                  <input id=\"growthRate\" type=\"number\" value={tokenData.startupMetrics.growthRate} onChange={e => handleTokenDataChange('startupMetrics.growthRate', parseFloat(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"10\" min=\"0\" max=\"100\" />\n                  <span className=\"bg-gray-100 p-2 rounded-r\">%</span>\n                </div>\n              </div>\n              <div>\n                <label htmlFor=\"activeUsers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Active Users\n                </label>\n                <input id=\"activeUsers\" type=\"number\" value={tokenData.startupMetrics.activeUsers} onChange={e => handleTokenDataChange('startupMetrics.activeUsers', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"5000\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"totalUsers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Total Users\n                </label>\n                <input id=\"totalUsers\" type=\"number\" value={tokenData.startupMetrics.totalUsers} onChange={e => handleTokenDataChange('startupMetrics.totalUsers', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"20000\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"category\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Category\n                </label>\n                <select id=\"category\" value={tokenData.startupMetrics.category} onChange={e => handleTokenDataChange('startupMetrics.category', e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                  <option value=\"DeFi\">DeFi</option>\n                  <option value=\"NFTs\">NFTs</option>\n                  <option value=\"Gaming\">Gaming</option>\n                  <option value=\"Infrastructure\">Infrastructure</option>\n                  <option value=\"Social\">Social</option>\n                  <option value=\"DAO\">DAO</option>\n                  <option value=\"Metaverse\">Metaverse</option>\n                  <option value=\"Other\">Other</option>\n                </select>\n              </div>\n              <div>\n                <label htmlFor=\"shortDescription\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Short Description\n                </label>\n                <input id=\"shortDescription\" type=\"text\" value={tokenData.startupMetrics.shortDescription} onChange={e => handleTokenDataChange('startupMetrics.shortDescription', e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"One-liner about the token\" />\n              </div>\n            </div>\n            <h4 className=\"text-sm font-medium text-gray-700 mb-2\">Social Followers</h4>\n            <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6\">\n              <div>\n                <label htmlFor=\"twitterFollowers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Twitter\n                </label>\n                <input id=\"twitterFollowers\" type=\"number\" value={tokenData.socialFollowers.twitter} onChange={e => setTokenData({\n                  ...tokenData,\n                  socialFollowers: {\n                    ...tokenData.socialFollowers,\n                    twitter: parseInt(e.target.value)\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"1000\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"telegramFollowers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Telegram\n                </label>\n                <input id=\"telegramFollowers\" type=\"number\" value={tokenData.socialFollowers.telegram} onChange={e => setTokenData({\n                  ...tokenData,\n                  socialFollowers: {\n                    ...tokenData.socialFollowers,\n                    telegram: parseInt(e.target.value)\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"500\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"discordFollowers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Discord\n                </label>\n                <input id=\"discordFollowers\" type=\"number\" value={tokenData.socialFollowers.discord} onChange={e => setTokenData({\n                  ...tokenData,\n                  socialFollowers: {\n                    ...tokenData.socialFollowers,\n                    discord: parseInt(e.target.value)\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"2000\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"redditFollowers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Reddit\n                </label>\n                <input id=\"redditFollowers\" type=\"number\" value={tokenData.socialFollowers.reddit} onChange={e => setTokenData({\n                  ...tokenData,\n                  socialFollowers: {\n                    ...tokenData.socialFollowers,\n                    reddit: parseInt(e.target.value)\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"1000\" min=\"0\" />\n              </div>\n            </div>\n            <h3 className=\"text-lg font-medium mb-4\">Growth Chart Data</h3>\n            <div className=\"grid grid-cols-3 sm:grid-cols-6 gap-4 mb-6\">\n              {tokenData.growthData.map((data, index) => <div key={index}>\n                  <label htmlFor={`growth-${index}`} className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    {data.month}\n                  </label>\n                  <div className=\"flex items-center\">\n                    <input id={`growth-${index}`} type=\"number\" value={data.growth} onChange={e => handleGrowthDataChange(index, e.target.value)} className=\"w-full p-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" step=\"0.1\" />\n                    <span className=\"bg-gray-100 p-2 rounded-r\">%</span>\n                  </div>\n                </div>)}\n            </div>\n          </div>\n          <div className=\"border-t border-gray-200 pt-4\">\n            <h3 className=\"text-lg font-medium mb-4\">FOMO Settings</h3>\n            <div className=\"mb-4\">\n              <label htmlFor=\"refreshInterval\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Refresh Interval (minutes)\n              </label>\n              <input id=\"refreshInterval\" type=\"number\" value={tokenData.fomoSettings.refreshInterval} onChange={e => setTokenData({\n                ...tokenData,\n                fomoSettings: {\n                  ...tokenData.fomoSettings,\n                  refreshInterval: parseInt(e.target.value)\n                }\n              })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"1\" max=\"60\" />\n            </div>\n            <h4 className=\"text-sm font-medium text-gray-700 mb-2\">Component Weights (%)</h4>\n            <div className=\"grid grid-cols-2 gap-4 mb-4\">\n              <div>\n                <label htmlFor=\"mentionsWeight\" className=\"block text-sm text-gray-600 mb-1\">\n                  Mentions Weight\n                </label>\n                <input id=\"mentionsWeight\" type=\"number\" value={tokenData.fomoSettings.weights.mentions} onChange={e => setTokenData({\n                  ...tokenData,\n                  fomoSettings: {\n                    ...tokenData.fomoSettings,\n                    weights: {\n                      ...tokenData.fomoSettings.weights,\n                      mentions: parseInt(e.target.value)\n                    }\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n              </div>\n              <div>\n                <label htmlFor=\"sentimentWeight\" className=\"block text-sm text-gray-600 mb-1\">\n                  Sentiment Weight\n                </label>\n                <input id=\"sentimentWeight\" type=\"number\" value={tokenData.fomoSettings.weights.sentiment} onChange={e => setTokenData({\n                  ...tokenData,\n                  fomoSettings: {\n                    ...tokenData.fomoSettings,\n                    weights: {\n                      ...tokenData.fomoSettings.weights,\n                      sentiment: parseInt(e.target.value)\n                    }\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n              </div>\n              <div>\n                <label htmlFor=\"priceActionWeight\" className=\"block text-sm text-gray-600 mb-1\">\n                  Price Action Weight\n                </label>\n                <input id=\"priceActionWeight\" type=\"number\" value={tokenData.fomoSettings.weights.priceAction} onChange={e => setTokenData({\n                  ...tokenData,\n                  fomoSettings: {\n                    ...tokenData.fomoSettings,\n                    weights: {\n                      ...tokenData.fomoSettings.weights,\n                      priceAction: parseInt(e.target.value)\n                    }\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n              </div>\n              <div>\n                <label htmlFor=\"volumeWeight\" className=\"block text-sm text-gray-600 mb-1\">\n                  Volume Weight\n                </label>\n                <input id=\"volumeWeight\" type=\"number\" value={tokenData.fomoSettings.weights.volume} onChange={e => setTokenData({\n                  ...tokenData,\n                  fomoSettings: {\n                    ...tokenData.fomoSettings,\n                    weights: {\n                      ...tokenData.fomoSettings.weights,\n                      volume: parseInt(e.target.value)\n                    }\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n              </div>\n            </div>\n            <div className=\"mb-4\">\n              <label className=\"block text-sm font-medium text-gray-700 mb-2\">FOMO Thresholds</label>\n              <p className=\"text-xs text-gray-500 mb-3\">Set score thresholds for low, medium, and high FOMO levels</p>\n              <div className=\"grid grid-cols-3 gap-4\">\n                <div>\n                  <label htmlFor=\"low-threshold\" className=\"block text-sm text-gray-600 mb-1\">\n                    Low FOMO\n                  </label>\n                  <input id=\"low-threshold\" type=\"number\" value={tokenData.fomoSettings.threshold.low} onChange={e => setTokenData({\n                    ...tokenData,\n                    fomoSettings: {\n                      ...tokenData.fomoSettings,\n                      threshold: {\n                        ...tokenData.fomoSettings.threshold,\n                        low: parseInt(e.target.value)\n                      }\n                    }\n                  })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n                </div>\n                <div>\n                  <label htmlFor=\"medium-threshold\" className=\"block text-sm text-gray-600 mb-1\">\n                    Medium FOMO\n                  </label>\n                  <input id=\"medium-threshold\" type=\"number\" value={tokenData.fomoSettings.threshold.medium} onChange={e => setTokenData({\n                    ...tokenData,\n                    fomoSettings: {\n                      ...tokenData.fomoSettings,\n                      threshold: {\n                        ...tokenData.fomoSettings.threshold,\n                        medium: parseInt(e.target.value)\n                      }\n                    }\n                  })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n                </div>\n                <div>\n                  <label htmlFor=\"high-threshold\" className=\"block text-sm text-gray-600 mb-1\">\n                    High FOMO\n                  </label>\n                  <input id=\"high-threshold\" type=\"number\" value={tokenData.fomoSettings.threshold.high} onChange={e => setTokenData({\n                    ...tokenData,\n                    fomoSettings: {\n                      ...tokenData.fomoSettings,\n                      threshold: {\n                        ...tokenData.fomoSettings.threshold,\n                        high: parseInt(e.target.value)\n                      }\n                    }\n                  })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n                </div>\n              </div>\n            </div>\n          </div>\n          <div className=\"border-t border-gray-200 pt-4\">\n            <h3 className=\"text-lg font-medium mb-4\">Tokenomics</h3>\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n              <div>\n                <label htmlFor=\"totalSupply\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Total Supply\n                </label>\n                <input id=\"totalSupply\" type=\"number\" value={tokenData.tokenomics.totalSupply} onChange={e => handleTokenomicsChange('totalSupply', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"1000000000\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"circulatingSupply\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Circulating Supply\n                </label>\n                <input id=\"circulatingSupply\" type=\"number\" value={tokenData.tokenomics.circulatingSupply} onChange={e => handleTokenomicsChange('circulatingSupply', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"400000000\" min=\"0\" />\n              </div>\n            </div>\n            <h4 className=\"text-sm font-medium text-gray-700 mb-2\">Revenue (USD)</h4>\n            <div className=\"grid grid-cols-2 gap-4 mb-4\">\n              <div>\n                <label htmlFor=\"totalRevenue\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Total Revenue\n                </label>\n                <div className=\"flex items-center\">\n                  <span className=\"bg-gray-100 p-2 rounded-l\">$</span>\n                  <input id=\"totalRevenue\" type=\"number\" value={tokenData.tokenomics.revenue.total} onChange={e => handleTokenDataChange('tokenomics.revenue.total', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-r focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"2500000\" min=\"0\" />\n                </div>\n              </div>\n              <div>\n                <label htmlFor=\"launchcoinRevenue\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Launchcoin Revenue\n                </label>\n                <div className=\"flex items-center\">\n                  <span className=\"bg-gray-100 p-2 rounded-l\">$</span>\n                  <input id=\"launchcoinRevenue\" type=\"number\" value={tokenData.tokenomics.revenue.launchcoin} onChange={e => handleTokenDataChange('tokenomics.revenue.launchcoin', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-r focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"850000\" min=\"0\" />\n                </div>\n              </div>\n              <div>\n                <label htmlFor=\"tradingRevenue\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Trading Revenue\n                </label>\n                <div className=\"flex items-center\">\n                  <span className=\"bg-gray-100 p-2 rounded-l\">$</span>\n                  <input id=\"tradingRevenue\" type=\"number\" value={tokenData.tokenomics.revenue.trading} onChange={e => handleTokenDataChange('tokenomics.revenue.trading', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-r focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"950000\" min=\"0\" />\n                </div>\n              </div>\n              <div>\n                <label htmlFor=\"stakingRevenue\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Staking Revenue\n                </label>\n                <div className=\"flex items-center\">\n                  <span className=\"bg-gray-100 p-2 rounded-l\">$</span>\n                  <input id=\"stakingRevenue\" type=\"number\" value={tokenData.tokenomics.revenue.staking} onChange={e => handleTokenDataChange('tokenomics.revenue.staking', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-r focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"700000\" min=\"0\" />\n                </div>\n              </div>\n            </div>\n            <h4 className=\"text-sm font-medium text-gray-700 mb-2\">Distribution</h4>\n            <p className=\"text-sm text-gray-500 mb-4\">\n              Token distribution can be edited directly in the Tokenomics tab after saving.\n            </p>\n          </div>\n          <div className=\"flex justify-end space-x-4\">\n            <button type=\"button\" onClick={() => {\n              setIsAddingToken(false);\n              setIsEditing(false);\n            }} className=\"px-4 py-2 text-gray-700 bg-gray-100 rounded hover:bg-gray-200\">\n              Cancel\n            </button>\n            <button type=\"submit\" className=\"px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700 flex items-center\" disabled={isLoadingToken}>\n              {isLoadingToken ? <>\n                  <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                  Loading...\n                </> : editMode ? <>\n                  <Edit size={18} className=\"mr-2\" />\n                  Update Token\n                </> : <>\n                  <Plus size={18} className=\"mr-2\" />\n                  Add Token\n                </>}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>;\n  };\n  const TokenomicsView = ({\n    token\n  }) => {\n    const [imageUrl, setImageUrl] = useState('');\n    const [imageFile, setImageFile] = useState(null);\n    const [isLoading, setIsLoading] = useState(false);\n    const [tokenomicsLoaded, setTokenomicsLoaded] = useState(false);\n    const [showTimelineSection,,] = useState(false);\n    useEffect(() => {\n      if (token && token.contractAddress && !tokenomicsLoaded) {\n        fetchTokenomicsImage(token.contractAddress);\n        setTokenomicsLoaded(true);\n      }\n    }, [token, tokenomicsLoaded]);\n    const fetchTimelineMetrics = async contractAddress => {\n      if (!contractAddress) return;\n      try {\n        setIsLoading(true);\n        console.log(`Fetching timeline metrics for ${contractAddress}`);\n        const existingData = await stateClient.getEntity('startupMetrics', contractAddress);\n        console.log(\"Fetched data:\", existingData);\n        if (existingData && existingData.history && Array.isArray(existingData.history)) {\n          console.log(`Loaded ${existingData.history.length} existing metrics`);\n          const sortedMetrics = [...existingData.history].sort((a, b) => new Date(a.date) - new Date(b.date));\n          setTimelineMetrics(sortedMetrics);\n        } else {\n          console.log(\"No existing metrics found or invalid format\");\n          setTimelineMetrics([]);\n        }\n      } catch (error) {\n        console.error(\"Error fetching timeline metrics:\", error);\n        setTimelineMetrics([]);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    useEffect(() => {\n      if (token && token.contractAddress) {\n        fetchTimelineMetrics(token.contractAddress);\n      }\n    }, [token]);\n    const formatDateForInput = date => {\n      const d = new Date(date);\n      return d.toISOString().split('T')[0];\n    };\n    const calculatePercentageChange = (currentValue, previousValue) => {\n      if (!previousValue) return null;\n      return (currentValue - previousValue) / previousValue * 100;\n    };\n    const handleAddTimelineMetric = async () => {\n      if (!token || !token.contractAddress || !timelineValue.trim()) return;\n      setIsSubmittingTimeline(true);\n      try {\n        const metricEntry = {\n          id: `${timelineLabel || 'metric'}-${new Date(timelineDate).toISOString().split('T')[0]}-${Date.now()}`,\n          title: timelineLabel || token.symbol || 'Metric',\n          value: parseFloat(timelineValue),\n          date: timelineDate.toISOString(),\n          timestamp: new Date().toISOString(),\n          tokenId: token.contractAddress\n        };\n        try {\n          await saveEntity('startupMetric', metricEntry);\n          console.log(\"Metric saved successfully as individual entity\");\n          try {\n            const allMetrics = await stateClient.getEntities('startupMetric');\n            const tokenMetrics = allMetrics.filter(metric => metric.tokenId === token.contractAddress);\n            if (tokenMetrics && tokenMetrics.length > 0) {\n              console.log(`Loaded ${tokenMetrics.length} metrics for this token`);\n              const sortedMetrics = [...tokenMetrics].sort((a, b) => new Date(a.date) - new Date(b.date));\n              setTimelineMetrics(sortedMetrics);\n            } else {\n              console.log(\"No metrics found for this token\");\n              setTimelineMetrics([]);\n            }\n          } catch (error) {\n            console.error(\"Error fetching updated metrics:\", error);\n          }\n          setTimelineValue('');\n          setTimelineDate(new Date());\n          setTimelineLabel('');\n          setShowSuccessMessage(true);\n          setTimeout(() => {\n            setShowSuccessMessage(false);\n          }, 3000);\n        } catch (saveError) {\n          console.error(\"Detailed save error:\", saveError);\n          throw new Error(`Save operation failed: ${saveError.message || \"Unknown error\"}`);\n        }\n      } catch (error) {\n        console.error(\"Error adding timeline metric:\", error);\n        if (error.message.includes(\"network\") || error.message.includes(\"timeout\")) {\n          alert(\"Network error while saving. Please check your connection and try again.\");\n        } else if (error.message.includes(\"permission\") || error.message.includes(\"access\")) {\n          alert(\"Permission error. You may not have rights to save this data.\");\n        } else {\n          alert(`Failed to save metric: ${error.message || \"Unknown error\"}. Please try again.`);\n        }\n      } finally {\n        setIsSubmittingTimeline(false);\n      }\n    };\n    const fetchTokenomicsImage = async contractAddress => {\n      setIsLoading(true);\n      try {\n        const tokenomicsImage = await stateClient.getEntity('tokenomicsImage', contractAddress);\n        if (tokenomicsImage && tokenomicsImage.imageUrl) {\n          setImageUrl(tokenomicsImage.imageUrl);\n        } else {\n          setImageUrl('');\n        }\n      } catch (error) {\n        console.error(\"Error fetching tokenomics image:\", error);\n        setImageUrl('');\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    const handleImageChange = e => {\n      if (e.target.files && e.target.files[0]) {\n        setImageFile(e.target.files[0]);\n      }\n    };\n    const handleImageUrlChange = e => {\n      setImageUrl(e.target.value);\n    };\n    const saveTokenomicsImage = async () => {\n      if (!token || !isAdmin) return;\n      setIsLoading(true);\n      try {\n        let finalImageUrl = imageUrl;\n        if (imageFile) {\n          const reader = new FileReader();\n          reader.readAsDataURL(imageFile);\n          await new Promise((resolve, reject) => {\n            reader.onload = () => {\n              finalImageUrl = reader.result;\n              resolve();\n            };\n            reader.onerror = reject;\n          });\n        }\n        if (!finalImageUrl) {\n          alert('Please enter an image URL or upload an image file');\n          setIsLoading(false);\n          return;\n        }\n        const tokenomicsImageData = {\n          id: token.contractAddress,\n          imageUrl: finalImageUrl,\n          lastUpdated: new Date().toISOString()\n        };\n        try {\n          await stateClient.createEntity('tokenomicsImage', tokenomicsImageData);\n        } catch (error) {\n          await stateClient.updateEntity('tokenomicsImage', token.contractAddress, tokenomicsImageData);\n        }\n        setImageFile(null);\n        alert('Tokenomics image saved successfully!');\n      } catch (error) {\n        console.error(\"Error saving tokenomics image:\", error);\n        alert('Failed to save image. Please try again.');\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    return <div className=\"bg-white p-4 rounded-lg shadow-sm border border-gray-200\">\n      {isLoading ? <div className=\"flex flex-col justify-center items-center h-64\">\n        <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n        <span className=\"text-gray-700 font-medium\">Sabar Nggih...</span>\n      </div> : showTimelineSection ? <div className=\"mb-8 timeline-metrics\">\n          <div className=\"flex justify-between items-center mb-4\">\n            <h3 className=\"text-lg font-medium\">Metrics Timeline</h3>\n            {isAdmin && creatorMode && !isAddingTimeline && <button onClick={() => setIsAddingTimeline(true)} className=\"flex items-center px-3 py-1.5 bg-gray-800 text-white text-sm rounded hover:bg-gray-900\">\n                <Plus size={16} className=\"mr-1\" />\n                Add Timeline Data\n              </button>}\n          </div>\n          \n          {isAdmin && creatorMode && isAddingTimeline && <div className=\"mb-6 p-4 bg-gray-100 border border-gray-200 rounded-lg\">\n              <div className=\"flex justify-between items-center mb-3\">\n                <h3 className=\"text-sm font-medium text-gray-800\">Add Timeline Metric</h3>\n                <button onClick={() => setIsAddingTimeline(false)} className=\"text-gray-500 hover:text-gray-700\">\n                  <X size={18} />\n                </button>\n              </div>\n              \n              <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-gray-700 mb-1\">Value</label>\n                  <input type=\"number\" value={timelineValue} onChange={e => setTimelineValue(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"e.g., 5000\" />\n                </div>\n                <div>\n                  <label className=\"block text-sm font-medium text-gray-700 mb-1\">Date</label>\n                  <input type=\"date\" value={formatDateForInput(timelineDate)} onChange={e => setTimelineDate(new Date(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n                </div>\n                <div>\n                  <label className=\"block text-sm font-medium text-gray-700 mb-1\">Label (Optional)</label>\n                  <input type=\"text\" value={timelineLabel} onChange={e => setTimelineLabel(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"e.g., Q1 2025\" />\n                </div>\n              </div>\n              \n              <div className=\"flex justify-end\">\n                <button onClick={handleAddTimelineMetric} className=\"px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-900 flex items-center font-mono tracking-tight\" disabled={isSubmittingTimeline || !timelineValue.trim()}>\n                  {isSubmittingTimeline ? <RefreshCw size={16} className=\"mr-2 animate-spin\" /> : <span className=\"mr-2\">$></span>}\n                  {isSubmittingTimeline ? 'PROCESSING...' : 'SUBMIT'}\n                </button>\n              </div>\n            </div>}\n          \n        {showSuccessMessage && <div className=\"mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-800 flex items-center font-mono animate-fadeIn\">\n              <span className=\"mr-2\">$></span>\n              <span className=\"font-medium\">DATA SAVED SUCCESSFULLY</span>\n              <span className=\"ml-2 text-xs opacity-70\">Refreshed timeline with new data point</span>\n            </div>}\n          \n        {timelineMetrics.length > 0 ? <div className=\"space-y-6\">\n              <div className=\"flex justify-between items-center mb-2\">\n                <h4 className=\"text-sm font-medium text-gray-700\">Visualization</h4>\n                <div className=\"flex space-x-2\">\n                  <button onClick={() => setTimelineChartType('line')} className={`px-2 py-1 text-xs rounded ${timelineChartType === 'line' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-800'}`}>\n                    Line\n                  </button>\n                  <button onClick={() => setTimelineChartType('bar')} className={`px-2 py-1 text-xs rounded ${timelineChartType === 'bar' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-800'}`}>\n                    Bar\n                  </button>\n                  <button onClick={() => setTimelineChartType('candlestick')} className={`px-2 py-1 text-xs rounded ${timelineChartType === 'candlestick' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-800'}`}>\n                    Candlestick\n                  </button>\n                </div>\n              </div>\n              \n              {}\n              <div className=\"bg-white p-4 border border-gray-200 rounded-lg\">\n                {timelineMetrics.map((metric, index) => <div key={metric.id} className=\"mb-1\">\n                    <span className=\"text-gray-600\">{new Date(metric.date).toLocaleDateString()}: </span>\n                    <span className=\"font-medium\">{metric.value}</span>\n                    {metric.label && <span className=\"ml-2 text-xs bg-gray-100 px-2 py-0.5 rounded\">{metric.label}</span>}\n                  </div>)}\n              </div>\n              \n              <div className=\"overflow-x-auto\">\n                <table className=\"min-w-full divide-y divide-gray-200\">\n                  <thead className=\"bg-gray-50\">\n                    <tr>\n                      <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Date</th>\n                      <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Label</th>\n                      <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Value</th>\n                      <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Change</th>\n                    </tr>\n                  </thead>\n                  <tbody className=\"bg-white divide-y divide-gray-200\">\n                    {timelineMetrics.map((metric, index) => {\n                  const prevValue = index > 0 ? timelineMetrics[index - 1].value : null;\n                  const percentChange = calculatePercentageChange(metric.value, prevValue);\n                  return <tr key={metric.id}>\n                          <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n                            {new Date(metric.date).toLocaleDateString()}\n                          </td>\n                          <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n                            {metric.label}\n                          </td>\n                          <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n                            {metric.value.toLocaleString()}\n                          </td>\n                          <td className=\"px-6 py-4 whitespace-nowrap text-sm\">\n                            {percentChange !== null ? <span className={percentChange >= 0 ? \"text-green-600\" : \"text-red-600\"}>\n                                {percentChange >= 0 ? \"+\" : \"\"}{percentChange.toFixed(2)}%\n                              </span> : \"-\"}\n                          </td>\n                        </tr>;\n                })}\n                  </tbody>\n                </table>\n              </div>\n            </div> : <div className=\"text-center py-12 bg-gray-50 rounded-lg border border-gray-200\">\n              <div className=\"bg-gray-100 rounded-full p-4 inline-block mb-4\">\n                <BarChart size={30} className=\"text-gray-400\" />\n              </div>\n              <h3 className=\"text-lg font-medium mb-2\">No Timeline Data</h3>\n              <p className=\"text-gray-600 max-w-md mx-auto mb-6\">\n                {isAdmin && creatorMode ? \"Add data points to track metrics over time and visualize growth trends.\" : \"No timeline metrics have been added for this token yet.\"}\n              </p>\n              {isAdmin && creatorMode && <button onClick={() => setIsAddingTimeline(true)} className=\"px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-900 inline-flex items-center\">\n                  <Plus size={18} className=\"mr-2\" />\n                  Add First Data Point\n                </button>}\n            </div>}\n        </div> : <>\n            {imageUrl ? <div className=\"flex justify-center\">\n                <div className=\"max-w-full border border-gray-200 rounded-lg overflow-hidden shadow-sm\">\n                  <img src={imageUrl} alt=\"Tokenomics diagram\" className=\"max-w-full h-auto object-contain\" />\n                </div>\n              </div> : <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n                <div className=\"bg-gray-100 rounded-full p-4 mb-4\">\n                  <ImageIcon size={30} className=\"text-gray-400\" />\n                </div>\n                <h3 className=\"text-lg font-medium mb-2\">No Tokenomics Image</h3>\n                <p className=\"text-gray-600 max-w-md mb-4\">\n                  {isAdmin && creatorMode ? \"Upload an image showing the token's distribution and flywheel.\" : \"No tokenomics image has been added for this token yet.\"}\n                </p>\n              </div>}\n            {isAdmin && creatorMode && <div className=\"border-t border-gray-200 pt-4 mt-4\">                \n                <div className=\"grid grid-cols-1 gap-4 mb-4\">\n                  <div>\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                      Image URL\n                    </label>\n                    <input type=\"text\" value={imageUrl} onChange={handleImageUrlChange} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"https://example.com/tokenomics.png\" />\n                  </div>\n                  <div>\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                      Or Upload Image\n                    </label>\n                    <div className=\"flex items-center\">\n                      <div className=\"relative flex-1\">\n                        <input type=\"file\" id=\"image-upload\" onChange={handleImageChange} className=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\" accept=\"image/*\" />\n                        <div className=\"w-full p-2 border border-gray-300 rounded flex items-center bg-gray-50 text-gray-500\">\n                          {imageFile ? imageFile.name : \"Choose file...\"}\n                        </div>\n                      </div>\n                      <button type=\"button\" className=\"ml-2 flex items-center justify-center px-4 py-2 bg-gray-100 border border-gray-300 rounded hover:bg-gray-200\" onClick={() => document.getElementById('image-upload').click()}>\n                        <ImageIcon size={18} className=\"mr-2\" />\n                        <span>Browse</span>\n                      </button>\n                    </div>\n                  </div>\n                </div>\n                <div className=\"flex justify-end\">\n                  <button onClick={saveTokenomicsImage} className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" disabled={isLoading}>\n                    {isLoading ? <>\n                        <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                        Saving...\n                      </> : <>\n                        <ImageIcon size={18} className=\"mr-2\" />\n                        Save Image\n                      </>}\n                  </button>\n                </div>\n              </div>}\n          </>}\n      </div>;\n  };\n  const generateChartData = token => {\n    const currentPrice = token?.price || 0.01676;\n    const percentageChange = token?.priceChangeIn24h || -32.95;\n    const startingPrice = currentPrice / (1 + percentageChange / 100);\n    const data = [];\n    const maxDataPoints = 30;\n    const dataPoints = chartTimeframe === '24h' ? 24 : chartTimeframe === '7d' ? 7 : maxDataPoints;\n    for (let i = 0; i < dataPoints; i++) {\n      const date = new Date();\n      if (chartTimeframe === '24h') {\n        date.setHours(date.getHours() - (dataPoints - i));\n      } else if (chartTimeframe === '7d') {\n        date.setDate(date.getDate() - (dataPoints - i) / 7);\n      } else {\n        date.setDate(date.getDate() - (dataPoints - i));\n      }\n      const progressFactor = i / (dataPoints - 1);\n      const decline = startingPrice - (startingPrice - currentPrice) * progressFactor;\n      const variationFactor = 0.02 * (1 - progressFactor);\n      const variation = (Math.random() - 0.5) * 2 * variationFactor * decline;\n      const price = decline + variation;\n      const formattedDate = chartTimeframe === '24h' ? date.toLocaleTimeString('en-US', {\n        hour: '2-digit',\n        minute: '2-digit'\n      }) : date.toLocaleDateString('en-US', {\n        month: 'short',\n        day: 'numeric'\n      });\n      data.push({\n        date: formattedDate,\n        price: price,\n        timestamp: date.getTime()\n      });\n    }\n    return data;\n  };\n  const TokenMetrics = ({\n    token\n  }) => {\n    const [metricType, setMetricType] = useState('static');\n    const [metricName, setMetricName] = useState('');\n    const [metricValue, setMetricValue] = useState('');\n    const [metricFormat, setMetricFormat] = useState('none');\n    const [metricDate, setMetricDate] = useState(new Date());\n    const [metricDescription, setMetricDescription] = useState('');\n    const [isSubmitting, setIsSubmitting] = useState(false);\n    const [showSuccessMessage, setShowSuccessMessage] = useState(false);\n    const [errorMessage, setErrorMessage] = useState('');\n    const formatDateForInput = date => {\n      const d = new Date(date);\n      return d.toISOString().split('T')[0];\n    };\n    const calculatePercentageChange = (currentValue, previousValue) => {\n      if (!previousValue) return null;\n      return (currentValue - previousValue) / previousValue * 100;\n    };\n    const [staticMetrics, setStaticMetrics] = useState([]);\n    const [isAddingMetric, setIsAddingMetric] = useState(false);\n    const [isLoading, setIsLoading] = useState(true);\n    const [, setMetricsLoaded] = useState(false);\n    const [dynamicMetrics, setDynamicMetrics] = useState([]);\n    const [, setDynamicMetricsLoaded] = useState(false);\n    useEffect(() => {\n      if (token && token.contractAddress) {\n        fetchMetrics(token.contractAddress);\n      }\n    }, [token]);\n    const fetchMetrics = async contractAddress => {\n      setIsLoading(true);\n      try {\n        const staticData = await stateClient.getEntities('startupMetric', {\n          type: 'static',\n          tokenId: contractAddress\n        });\n        if (staticData && staticData.length > 0) {\n          setStaticMetrics(staticData);\n        } else {\n          setStaticMetrics([]);\n        }\n        const dynamicData = await stateClient.getEntities('startupMetric', {\n          type: 'dynamic',\n          tokenId: contractAddress\n        });\n        if (dynamicData && dynamicData.length > 0) {\n          const sortedMetrics = [...dynamicData].sort((a, b) => new Date(a.date) - new Date(b.date));\n          const groupedMetrics = {};\n          sortedMetrics.forEach(metric => {\n            if (!groupedMetrics[metric.name]) {\n              groupedMetrics[metric.name] = [];\n            }\n            groupedMetrics[metric.name].push(metric);\n          });\n          setDynamicMetrics(groupedMetrics);\n        } else {\n          setDynamicMetrics({});\n        }\n        setMetricsLoaded(true);\n        setDynamicMetricsLoaded(true);\n      } catch (error) {\n        console.error(\"Error fetching metrics:\", error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    const handleAddMetric = async () => {\n      if (!token || !token.contractAddress || !metricName.trim() || !metricValue.trim()) {\n        setErrorMessage(\"Please enter both name and value for the metric\");\n        return;\n      }\n      setIsSubmitting(true);\n      setErrorMessage('');\n      try {\n        const currentTime = new Date().toISOString();\n        const metricEntry = {\n          id: `${token.contractAddress}-${metricName}-${currentTime}`,\n          name: metricName,\n          value: parseFloat(metricValue),\n          format: metricFormat,\n          description: metricDescription.trim(),\n          tokenId: token.contractAddress,\n          timestamp: currentTime,\n          type: metricType\n        };\n        if (metricType === 'dynamic') {\n          metricEntry.date = metricDate.toISOString();\n        }\n        await saveEntity('startupMetric', metricEntry);\n        setShowSuccessMessage(true);\n        setTimeout(() => setShowSuccessMessage(false), 3000);\n        setMetricName('');\n        setMetricValue('');\n        setMetricFormat('none');\n        setMetricDescription('');\n        setMetricDate(new Date());\n        fetchMetrics(token.contractAddress);\n      } catch (error) {\n        console.error(\"Detailed save error:\", error);\n        setErrorMessage(error.message || \"Failed to save metric. Please try again.\");\n      } finally {\n        setIsSubmitting(false);\n      }\n    };\n    const handleDeleteMetric = async metricId => {\n      if (!confirm('Are you sure you want to delete this metric?')) return;\n      try {\n        await stateClient.deleteEntity('startupMetric', metricId);\n        fetchMetrics(token.contractAddress);\n      } catch (error) {\n        console.error(\"Error deleting metric:\", error);\n        setErrorMessage(\"Failed to delete metric. Please try again.\");\n      }\n    };\n    const renderDynamicMetricsChart = (metricName, metricsData) => {\n      if (!metricsData || metricsData.length === 0) return null;\n      const sortedData = [...metricsData].sort((a, b) => new Date(a.date) - new Date(b.date));\n      const chartData = sortedData.map(metric => ({\n        date: new Date(metric.date).toLocaleDateString(),\n        value: metric.value\n      }));\n      return <div className=\"border border-gray-200 rounded-lg p-4 bg-white\">\n          <h4 className=\"text-sm font-medium text-gray-700 mb-2\">{metricName} Timeline</h4>\n          <div className=\"h-40 bg-gray-50 rounded overflow-hidden\">\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <LineChart data={chartData} margin={{\n              top: 5,\n              right: 5,\n              left: 5,\n              bottom: 5\n            }}>\n                <CartesianGrid strokeDasharray=\"3 3\" stroke=\"#f0f0f0\" />\n                <XAxis dataKey=\"date\" stroke=\"#666\" fontSize={10} tickLine={false} axisLine={{\n                stroke: '#e0e0e0'\n              }} />\n                <YAxis stroke=\"#666\" fontSize={10} tickLine={false} axisLine={{\n                stroke: '#e0e0e0'\n              }} width={40} />\n                <Tooltip contentStyle={{\n                backgroundColor: 'white',\n                border: '1px solid #e0e0e0',\n                borderRadius: '4px',\n                fontSize: '12px'\n              }} />\n                <Line type=\"monotone\" dataKey=\"value\" stroke=\"#3b82f6\" strokeWidth={2} dot={{\n                r: 3,\n                strokeWidth: 1\n              }} activeDot={{\n                r: 5,\n                strokeWidth: 0,\n                fill: '#2563eb'\n              }} />\n              </LineChart>\n            </ResponsiveContainer>\n          </div>\n          <div className=\"mt-2\">\n            <div className=\"text-xs text-gray-500\">Latest: {chartData[chartData.length - 1].value.toLocaleString()} ({chartData[chartData.length - 1].date})</div>\n          </div>\n        </div>;\n    };\n    const formatValue = (value, format) => {\n      if (!value && value !== 0) return '-';\n      switch (format) {\n        case 'dollar':\n          return `$${Number(value).toLocaleString()}`;\n        case 'users':\n          return `${Number(value).toLocaleString()} users`;\n        case 'percentage':\n          return `${Number(value).toLocaleString()}%`;\n        case 'items':\n          return `${Number(value).toLocaleString()} items`;\n        default:\n          return Number(value).toLocaleString();\n      }\n    };\n    const renderMetricCards = () => {\n      if (metricType === 'static') {\n        return <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n            {staticMetrics.length > 0 ? staticMetrics.map(metric => <div key={metric.id} className=\"bg-white p-4 rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow\">\n                  <div className=\"flex justify-between items-start\">\n                    <div>\n                      <h3 className=\"text-lg font-bold\">{metric.name}</h3>\n                      <div className=\"text-2xl font-mono mt-2\">{formatValue(metric.value, metric.format)}</div>\n                    </div>\n                    {isAdmin && creatorMode && <button onClick={() => handleDeleteMetric(metric.id)} className=\"p-1 text-red-500 hover:bg-red-50 rounded\">\n                        <Trash2 size={16} />\n                      </button>}\n                  </div>\n                  {metric.description && <div className=\"text-sm text-gray-600 mt-2 bg-gray-50 p-2 rounded-md border border-gray-100\">\n                      {metric.description}\n                    </div>}\n                  <div className=\"text-xs text-gray-500 mt-3\">\n                    Added {new Date(metric.timestamp).toLocaleDateString()}\n                  </div>\n                </div>) : <div className=\"col-span-3 text-center py-6 text-gray-500\">\n                No static metrics added yet\n              </div>}\n          </div>;\n      } else {\n        return <div className=\"space-y-6\">\n            {Object.keys(dynamicMetrics).length > 0 ? Object.entries(dynamicMetrics).map(([name, metrics]) => <div key={name} className=\"space-y-2\">\n                  <h3 className=\"text-lg font-medium\">{name}</h3>\n                  {renderDynamicMetricsChart(name, metrics)}\n                  \n                  <div className=\"overflow-x-auto\">\n                    <table className=\"min-w-full divide-y divide-gray-200\">\n                      <thead className=\"bg-gray-50\">\n                        <tr>\n                          <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Date</th>\n                          <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Value</th>\n                          <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Change</th>\n                          {isAdmin && creatorMode && <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Actions</th>}\n                        </tr>\n                      </thead>\n                      <tbody className=\"bg-white divide-y divide-gray-200\">\n                        {metrics.map((metric, index) => {\n                    const prevValue = index > 0 ? metrics[index - 1].value : null;\n                    const percentChange = calculatePercentageChange(metric.value, prevValue);\n                    return <tr key={metric.id}>\n                              <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n                                {new Date(metric.date).toLocaleDateString()}\n                              </td>\n                              <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n                                {formatValue(metric.value, metric.format)}\n                              </td>\n                              <td className=\"px-6 py-4 whitespace-nowrap text-sm\">\n                                {percentChange !== null ? <span className={percentChange >= 0 ? \"text-green-600\" : \"text-red-600\"}>\n                                    {percentChange >= 0 ? \"+\" : \"\"}{percentChange.toFixed(2)}%\n                                  </span> : \"-\"}\n                              </td>\n                              {isAdmin && creatorMode && <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n                                  <button onClick={() => handleDeleteMetric(metric.id)} className=\"text-red-500 hover:text-red-700\">\n                                    <Trash2 size={14} />\n                                  </button>\n                                </td>}\n                            </tr>;\n                  })}\n                      </tbody>\n                    </table>\n                  </div>\n                </div>) : <div className=\"text-center py-6 text-gray-500\">\n                No dynamic metrics added yet\n              </div>}\n          </div>;\n      }\n    };\n    if (!token) return null;\n    return <div className=\"bg-white p-4 rounded-lg shadow-sm border border-gray-200\">\n        {token?.description && <div className=\"mb-6 pb-4 border-b border-gray-200\">\n            <h3 className=\"text-lg font-medium mb-2\">About {token.symbol}</h3>\n            <p className=\"text-gray-700\">{token.description}</p>\n          </div>}\n        \n        <div className=\"flex justify-between items-center mb-6\">\n          <h2 className=\"text-lg font-bold\">Startup Metrics</h2>\n          \n          {isAdmin && creatorMode && <div className=\"flex space-x-3\">\n              <button onClick={() => setIsAddingMetric(!isAddingMetric)} className=\"flex items-center px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700\">\n                {isAddingMetric ? <>\n                    <X size={16} className=\"mr-1\" />\n                    Cancel\n                  </> : <>\n                    <Plus size={16} className=\"mr-1\" />\n                    Add Metric\n                  </>}\n              </button>\n            </div>}\n        </div>\n      {isLoading ? <div className=\"flex flex-col justify-center items-center h-64\">\n            <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n            <span className=\"text-gray-700 font-medium\">Sabar Nggih...</span>\n          </div> : <>\n            {isAdmin && creatorMode && isAddingMetric && <div className=\"mb-6 p-5 bg-blue-50 border border-blue-200 rounded-lg shadow-sm\">\n                <div className=\"flex justify-between items-center mb-4\">\n                  <h3 className=\"text-lg font-medium text-blue-800\">Add New Metric</h3>\n                  <button onClick={() => setIsAddingMetric(false)} className=\"text-gray-500 hover:text-gray-700\">\n                    <X size={18} />\n                  </button>\n                </div>\n                \n                {}\n                <div className=\"mb-5\">\n                  <div className=\"flex justify-center space-x-2 p-2 bg-white rounded-lg border border-gray-200\">\n                    <button onClick={() => setMetricType('static')} className={`px-4 py-2 rounded-md ${metricType === 'static' ? 'bg-blue-600 text-white font-medium' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>\n                      Static Data\n                    </button>\n                    <button onClick={() => setMetricType('dynamic')} className={`px-4 py-2 rounded-md ${metricType === 'dynamic' ? 'bg-blue-600 text-white font-medium' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>\n                      Dynamic Data\n                    </button>\n                  </div>\n                  <div className=\"mt-2 text-xs text-gray-600 text-center\">\n                    {metricType === 'static' ? 'Static data is a single value that represents the current state' : 'Dynamic data tracks values over time to show trends and growth'}\n                  </div>\n                </div>\n                \n                {}\n                {errorMessage && <div className=\"mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm\">\n                    {errorMessage}\n                  </div>}\n                \n                {}\n                <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n                  <div className=\"md:col-span-2\">\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                      Metric Name\n                    </label>\n                    <input type=\"text\" value={metricName} onChange={e => setMetricName(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"e.g., Monthly Active Users, Revenue, etc.\" />\n                  </div>\n                  \n                  <div className={metricType === 'dynamic' ? 'md:col-span-1' : 'md:col-span-1'}>\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                      Value\n                    </label>\n                    <input type=\"number\" value={metricValue} onChange={e => setMetricValue(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"e.g., 5000\" />\n                  </div>\n                  \n                  <div className={metricType === 'dynamic' ? 'md:col-span-1' : 'md:col-span-1'}>\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                      Format\n                    </label>\n                    <select value={metricFormat} onChange={e => setMetricFormat(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                      <option value=\"none\">Number</option>\n                      <option value=\"dollar\">Dollar ($)</option>\n                      <option value=\"users\">Users</option>\n                      <option value=\"percentage\">Percentage (%)</option>\n                      <option value=\"items\">Items</option>\n                    </select>\n                  </div>\n                  \n                  <div className=\"md:col-span-2\">\n                    <label htmlFor=\"metricDescription\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                      Description (optional)\n                    </label>\n                    <textarea id=\"metricDescription\" value={metricDescription} onChange={e => setMetricDescription(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"Add context or explanation for this metric (optional)\" rows=\"2\" />\n                  </div>\n                  \n                  {metricType === 'dynamic' && <div>\n                      <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                        Date\n                      </label>\n                      <input type=\"date\" value={formatDateForInput(metricDate)} onChange={e => setMetricDate(new Date(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n                    </div>}\n                </div>\n                \n                {}\n                <div className=\"flex justify-end\">\n                  <button onClick={handleAddMetric} className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" disabled={isSubmitting || !metricName.trim() || !metricValue.trim()}>\n                    {isSubmitting ? <>\n                        <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                        Saving...\n                      </> : <>\n                        <Save size={18} className=\"mr-2\" />\n                        Save Metric\n                      </>}\n                  </button>\n                </div>\n                \n                {}\n                {showSuccessMessage && <div className=\"mt-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-800 flex items-center\">\n                    <div className=\"mr-2 bg-green-100 rounded-full p-1\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4 text-green-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n                      </svg>\n                    </div>\n                    <span className=\"font-medium\">Metric saved successfully!</span>\n                  </div>}\n              </div>}\n            \n            {}\n            <div className=\"mb-5\">\n              <div className=\"border-b border-gray-200\">\n                <nav className=\"-mb-px flex space-x-8\">\n                  <button onClick={() => setMetricType('static')} className={`whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm ${metricType === 'static' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>\n                    Static Metrics\n                  </button>\n                  <button onClick={() => setMetricType('dynamic')} className={`whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm ${metricType === 'dynamic' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>\n                    Dynamic Metrics\n                  </button>\n                </nav>\n              </div>\n            </div>\n            \n            {}\n            {renderMetricCards()}\n          </>}\n        </div>;\n  };\n  const SocialMediaStats = ({\n    token,\n    type = 'alpha'\n  }) => {\n    const [embedCode, setEmbedCode] = useState('');\n    const [embedTitle, setEmbedTitle] = useState('');\n    const [embedDescription, setEmbedDescription] = useState('');\n    const [embedError, setEmbedError] = useState('');\n    const [savedEmbeds, setSavedEmbeds] = useState([]);\n    const [isLoadingEmbed, setIsLoadingEmbed] = useState(false);\n    const [editingEmbedIndex, setEditingEmbedIndex] = useState(null);\n    const [showAddEmbedForm, setShowAddEmbedForm] = useState(false);\n    const [previewEmbed, setPreviewEmbed] = useState('');\n    const embedContainerRefs = useRef([]);\n    const [embedsLoaded, setEmbedsLoaded] = useState(false);\n    const entityName = type === 'alpha' ? 'socialEmbeds' : 'updateEmbeds';\n    useEffect(() => {\n      if (token && token.contractAddress && !embedsLoaded) {\n        fetchEmbeds(token.contractAddress);\n        setEmbedsLoaded(true);\n      }\n    }, [token, embedsLoaded, type, entityName]);\n    const fetchEmbeds = async contractAddress => {\n      setIsLoadingEmbed(true);\n      try {\n        const savedEmbedData = await stateClient.getEntity(entityName, contractAddress);\n        if (savedEmbedData && savedEmbedData.embeds && Array.isArray(savedEmbedData.embeds)) {\n          setSavedEmbeds(savedEmbedData.embeds);\n          setTimeout(() => {\n            loadAllEmbedScripts();\n          }, 100);\n        } else {\n          if (type === 'alpha') {\n            try {\n              const oldEmbedData = await stateClient.getEntity('socialEmbed', contractAddress);\n              if (oldEmbedData && oldEmbedData.embedCode) {\n                const newEmbedFormat = [{\n                  id: Date.now().toString(),\n                  title: 'Social Media Embed',\n                  code: oldEmbedData.embedCode,\n                  createdAt: oldEmbedData.lastUpdated || new Date().toISOString()\n                }];\n                setSavedEmbeds(newEmbedFormat);\n                if (isAdmin) {\n                  await stateClient.createEntity(entityName, {\n                    id: contractAddress,\n                    embeds: newEmbedFormat,\n                    lastUpdated: new Date().toISOString()\n                  });\n                }\n              } else {\n                setSavedEmbeds([]);\n              }\n            } catch (err) {\n              setSavedEmbeds([]);\n            }\n          } else {\n            setSavedEmbeds([]);\n          }\n        }\n      } catch (error) {\n        console.error(`Error fetching ${type} embeds:`, error);\n        setSavedEmbeds([]);\n      } finally {\n        setIsLoadingEmbed(false);\n      }\n    };\n    const loadAllEmbedScripts = () => {\n      embedContainerRefs.current.forEach((ref, index) => {\n        if (!ref) return;\n        const embedContent = savedEmbeds[index]?.code || '';\n        if (embedContent) {\n          while (ref.firstChild) {\n            ref.removeChild(ref.firstChild);\n          }\n          const tempDiv = document.createElement('div');\n          tempDiv.innerHTML = embedContent;\n          Array.from(tempDiv.childNodes).forEach(node => {\n            if (node.nodeName !== 'SCRIPT') {\n              ref.appendChild(node.cloneNode(true));\n            }\n          });\n          const scriptTags = tempDiv.querySelectorAll('script');\n          scriptTags.forEach(oldScript => {\n            const newScript = document.createElement('script');\n            Array.from(oldScript.attributes).forEach(attr => {\n              newScript.setAttribute(attr.name, attr.value);\n            });\n            newScript.innerHTML = oldScript.innerHTML;\n            ref.appendChild(newScript);\n          });\n        }\n      });\n    };\n    const loadSingleEmbedScript = ref => {\n      if (!ref) return;\n      const existingScripts = Array.from(ref.querySelectorAll('script')).map(script => {\n        return {\n          attributes: Array.from(script.attributes),\n          innerHTML: script.innerHTML\n        };\n      });\n      ref.querySelectorAll('script').forEach(script => script.remove());\n      existingScripts.forEach(scriptData => {\n        const newScript = document.createElement('script');\n        scriptData.attributes.forEach(attr => {\n          newScript.setAttribute(attr.name, attr.value);\n        });\n        newScript.innerHTML = scriptData.innerHTML;\n        ref.appendChild(newScript);\n      });\n    };\n    useEffect(() => {\n      if (savedEmbeds.length > 0) {\n        setTimeout(() => {\n          loadAllEmbedScripts();\n        }, 300);\n        setTimeout(() => {\n          if (window.twttr && typeof window.twttr.widgets === 'object' && typeof window.twttr.widgets.load === 'function') {\n            window.twttr.widgets.load();\n          }\n        }, 1000);\n      }\n    }, [savedEmbeds]);\n    useEffect(() => {\n      if (previewEmbed) {\n        setTimeout(() => {\n          const previewContainer = document.getElementById('embed-preview-container');\n          if (previewContainer) {\n            loadSingleEmbedScript(previewContainer);\n          }\n        }, 100);\n      }\n    }, [previewEmbed]);\n    const handlePreviewEmbed = () => {\n      if (!embedCode.trim()) {\n        setEmbedError('Please enter embed code to preview');\n        return;\n      }\n      setEmbedError('');\n      setPreviewEmbed(embedCode);\n      setTimeout(() => {\n        const previewContainer = document.getElementById('embed-preview-container');\n        if (previewContainer) {\n          loadSingleEmbedScript(previewContainer);\n          if (embedCode.includes('twitter') && window.twttr && typeof window.twttr.widgets === 'object') {\n            try {\n              window.twttr.widgets.load(previewContainer);\n            } catch (e) {\n              console.log('Twitter widget load error', e);\n            }\n          }\n        }\n      }, 100);\n    };\n    const handleAddEmbed = async () => {\n      if (!embedCode.trim()) {\n        setEmbedError('Please enter a valid embed code');\n        return;\n      }\n      if (!embedTitle.trim()) {\n        setEmbedError('Please enter a title for this embed');\n        return;\n      }\n      setEmbedError('');\n      let cleanedEmbedCode = embedCode.trim();\n      const newEmbed = {\n        id: Date.now().toString(),\n        title: embedTitle,\n        description: embedDescription.trim(),\n        code: cleanedEmbedCode,\n        createdAt: new Date().toISOString()\n      };\n      const updatedEmbeds = editingEmbedIndex !== null ? savedEmbeds.map((embed, index) => index === editingEmbedIndex ? newEmbed : embed) : [...savedEmbeds, newEmbed];\n      if (token && isAdmin) {\n        try {\n          try {\n            await stateClient.createEntity(entityName, {\n              id: token.contractAddress,\n              embeds: updatedEmbeds,\n              lastUpdated: new Date().toISOString()\n            });\n          } catch (createError) {\n            await stateClient.updateEntity(entityName, token.contractAddress, {\n              embeds: updatedEmbeds,\n              lastUpdated: new Date().toISOString()\n            });\n          }\n          setSavedEmbeds(updatedEmbeds);\n          setEmbedCode('');\n          setEmbedTitle('');\n          setEmbedDescription('');\n          setPreviewEmbed('');\n          setEditingEmbedIndex(null);\n          setShowAddEmbedForm(false);\n          if (type === 'alpha') {\n            try {\n              await stateClient.deleteEntity('socialEmbed', token.contractAddress);\n            } catch (error) {}\n          }\n          console.log(`${type} embed saved successfully!`);\n        } catch (error) {\n          console.error(`Error saving ${type} embeds:`, error);\n          setEmbedError('Failed to save embed. Please try again.');\n        }\n      } else {\n        setSavedEmbeds(updatedEmbeds);\n        setEmbedCode('');\n        setEmbedTitle('');\n        setEmbedDescription('');\n        setPreviewEmbed('');\n        setEditingEmbedIndex(null);\n        setShowAddEmbedForm(false);\n      }\n    };\n    const handleEditEmbed = index => {\n      const embedToEdit = savedEmbeds[index];\n      setEmbedTitle(embedToEdit.title);\n      setEmbedDescription(embedToEdit.description || '');\n      setEmbedCode(embedToEdit.code);\n      setPreviewEmbed(embedToEdit.code);\n      setEditingEmbedIndex(index);\n      setShowAddEmbedForm(true);\n    };\n    const handleDeleteEmbed = async index => {\n      if (!confirm('Are you sure you want to delete this embed?')) return;\n      const updatedEmbeds = savedEmbeds.filter((_, i) => i !== index);\n      if (token && isAdmin) {\n        try {\n          await stateClient.createEntity(entityName, {\n            id: token.contractAddress,\n            embeds: updatedEmbeds,\n            lastUpdated: new Date().toISOString()\n          }).catch(async () => {\n            await stateClient.updateEntity(entityName, token.contractAddress, {\n              embeds: updatedEmbeds,\n              lastUpdated: new Date().toISOString()\n            });\n          });\n          setSavedEmbeds(updatedEmbeds);\n          setLastUpdated(new Date());\n        } catch (error) {\n          console.error(`Error deleting ${type} embed:`, error);\n          alert('Failed to delete embed. Please try again.');\n        }\n      }\n    };\n    const handleMoveEmbed = async (index, direction) => {\n      if (direction === 'up' && index === 0 || direction === 'down' && index === savedEmbeds.length - 1) {\n        return;\n      }\n      const newIndex = direction === 'up' ? index - 1 : index + 1;\n      const updatedEmbeds = [...savedEmbeds];\n      [updatedEmbeds[index], updatedEmbeds[newIndex]] = [updatedEmbeds[newIndex], updatedEmbeds[index]];\n      if (token && isAdmin) {\n        try {\n          await stateClient.createEntity(entityName, {\n            id: token.contractAddress,\n            embeds: updatedEmbeds,\n            lastUpdated: new Date().toISOString()\n          }).catch(async () => {\n            await stateClient.updateEntity(entityName, token.contractAddress, {\n              embeds: updatedEmbeds,\n              lastUpdated: new Date().toISOString()\n            });\n          });\n          setSavedEmbeds(updatedEmbeds);\n          setLastUpdated(new Date());\n        } catch (error) {\n          console.error(`Error reordering ${type} embeds:`, error);\n          alert('Failed to reorder embeds. Please try again.');\n        }\n      }\n    };\n    const handleCancelEdit = () => {\n      setEmbedCode('');\n      setEmbedTitle('');\n      setEmbedDescription('');\n      setPreviewEmbed('');\n      setEditingEmbedIndex(null);\n      setShowAddEmbedForm(false);\n      setEmbedError('');\n    };\n    return <div className=\"transition-opacity duration-150 ease-in-out flex-1 overflow-y-auto\">\n        <div className=\"flex justify-end mb-4\">\n          {isAdmin && creatorMode && !showAddEmbedForm && <button onClick={() => setShowAddEmbedForm(true)} className=\"flex items-center px-3 py-1.5 bg-blue-600 text-white text-xs rounded hover:bg-blue-700\">\n              <Plus size={14} className=\"mr-1\" />\n              Add {type === 'alpha' ? 'Alpha' : 'Update'} Embed\n            </button>}\n        </div>\n        {isAdmin && creatorMode && showAddEmbedForm && <div className=\"mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg\">\n            <div className=\"flex justify-between items-center mb-3\">\n              <h3 className=\"text-sm font-medium text-blue-800\">\n                {editingEmbedIndex !== null ? `Edit ${type === 'alpha' ? 'Alpha' : 'Update'} Embed` : `Add New ${type === 'alpha' ? 'Alpha' : 'Update'} Embed`}\n              </h3>\n              <button onClick={handleCancelEdit} className=\"text-gray-500 hover:text-gray-700\">\n                <X size={18} />\n              </button>\n            </div>\n            <div className=\"space-y-4\">\n              <div>\n                <label htmlFor=\"embedTitle\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Embed Title\n                </label>\n                <input id=\"embedTitle\" type=\"text\" value={embedTitle} onChange={e => setEmbedTitle(e.target.value)} placeholder=\"Twitter Feed, YouTube Video, etc.\" className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n              </div>\n              <div>\n                <label htmlFor=\"embedDescription\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Description (optional)\n                </label>\n                <textarea id=\"embedDescription\" value={embedDescription} onChange={e => setEmbedDescription(e.target.value)} placeholder=\"Provide context about this social feed...\" className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 h-20\" />\n              </div>\n              <div>\n                <label htmlFor=\"embedCode\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Embed Code\n                </label>\n                <textarea id=\"embedCode\" value={embedCode} onChange={e => setEmbedCode(e.target.value)} placeholder=\"<a class='twitter-timeline' href='https://twitter.com/username'>Tweets by Username</a><script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script>\" className=\"w-full p-3 text-sm border border-gray-300 rounded font-mono h-32 focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n              </div>\n              {previewEmbed && <div className=\"border border-gray-200 rounded-lg p-4 bg-white\">\n                  <h4 className=\"text-sm font-medium text-gray-700 mb-2\">Preview</h4>\n                  <div id=\"embed-preview-container\" className=\"overflow-hidden rounded-lg border border-gray-100\" dangerouslySetInnerHTML={{\n              __html: previewEmbed\n            }} />\n                </div>}\n              {embedError && <div className=\"text-sm text-red-500\">{embedError}</div>}\n              <div className=\"flex space-x-3\">\n                <button onClick={handlePreviewEmbed} className=\"flex items-center px-3 py-2 bg-gray-100 text-gray-800 text-sm rounded hover:bg-gray-200\">\n                  <Eye size={16} className=\"mr-1\" />\n                  Preview\n                </button>\n                <button onClick={handleAddEmbed} className=\"flex items-center px-3 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 disabled:opacity-50\" disabled={!embedCode.trim() || !embedTitle.trim()}>\n                  <Link size={16} className=\"mr-1\" />\n                  {editingEmbedIndex !== null ? 'Update Embed' : 'Add Embed'}\n                </button>\n              </div>\n              <div className=\"text-xs text-gray-500\">\n                <p className=\"font-medium mb-1\">Example Embed Codes:</p>\n                <p className=\"mb-1\">Twitter Timeline:</p>\n                <code className=\"text-xs block bg-gray-50 p-2 rounded overflow-x-auto\">\n                  <a class=\"twitter-timeline\" href=\"https://twitter.com/elonmusk\">Tweets by Elon Musk</a><br />\n                  <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n                </code>\n              </div>\n            </div>\n          </div>}\n        {isAdmin && creatorMode && savedEmbeds.length > 0 && !showAddEmbedForm && <div className=\"mb-6\">\n            <h3 className=\"text-sm font-medium text-gray-700 mb-3\">\n              Manage {type === 'alpha' ? 'Alpha' : 'Update'} Embeds\n            </h3>\n            <div className=\"space-y-2 bg-gray-50 p-3 rounded-lg border border-gray-200\">\n              {savedEmbeds.map((embed, index) => <div key={embed.id} className=\"flex items-center justify-between p-3 bg-white rounded border border-gray-200 hover:border-blue-200 transition-colors\">\n                  <div className=\"flex items-center flex-1 min-w-0\">\n                    <div className=\"w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mr-3\">\n                      <span className=\"font-medium text-blue-800\">{index + 1}</span>\n                    </div>\n                    <div className=\"truncate\">\n                      <div className=\"font-medium text-gray-900 truncate\">{embed.title}</div>\n                      <div className=\"text-xs text-gray-500\">\n                        Added {new Date(embed.createdAt).toLocaleDateString()}\n                      </div>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center space-x-2 ml-4\">\n                    <button onClick={() => handleMoveEmbed(index, 'up')} disabled={index === 0} className={`p-1 rounded ${index === 0 ? 'text-gray-300 cursor-not-allowed' : 'text-gray-500 hover:bg-gray-100'}`} title=\"Move up\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m18 15-6-6-6 6\" /></svg>\n                    </button>\n                    <button onClick={() => handleMoveEmbed(index, 'down')} disabled={index === savedEmbeds.length - 1} className={`p-1 rounded ${index === savedEmbeds.length - 1 ? 'text-gray-300 cursor-not-allowed' : 'text-gray-500 hover:bg-gray-100'}`} title=\"Move down\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m6 9 6 6 6-6\" /></svg>\n                    </button>\n                    <button onClick={() => handleEditEmbed(index)} className=\"p-1 text-blue-600 hover:bg-blue-50 rounded\" title=\"Edit\">\n                      <Edit2 size={16} />\n                    </button>\n                    <button onClick={() => handleDeleteEmbed(index)} className=\"p-1 text-red-600 hover:bg-red-50 rounded\" title=\"Delete\">\n                      <Trash2 size={16} />\n                    </button>\n                  </div>\n                </div>)}\n            </div>\n          </div>}\n        <div className=\"social-embed-container\">\n        {isLoadingEmbed ? <div className=\"flex flex-col items-center justify-center h-64 text-center\">\n      <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n      <div className=\"text-gray-700 font-medium\">Sabar Nggih...</div>\n    </div> : savedEmbeds.length > 0 ? <div className=\"space-y-8\">\n              {savedEmbeds.map((embed, index) => <div key={embed.id} className=\"bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden\">\n                  {}\n                  <div className={`py-5 px-4 border-b border-gray-100 ${type === 'alpha' ? 'bg-blue-50' : 'bg-green-50'}`}>\n                    <div className={`bg-white py-3 px-4 border ${type === 'alpha' ? 'border-blue-100' : 'border-green-100'} rounded-lg shadow-sm`}>\n                      <h3 className=\"text-3xl font-bold text-gray-900 text-center\">{embed.title || (type === 'alpha' ? \"Alpha Content\" : \"Update Content\")}</h3>\n                    </div>\n                  </div>\n                  {}\n                  <div className=\"px-4 pt-2 pb-4 bg-white\">\n                    <div ref={el => {\n                embedContainerRefs.current[index] = el;\n                if (el && !el.hasChildNodes() && embed.code) {\n                  setTimeout(() => {\n                    el.innerHTML = embed.code;\n                    loadSingleEmbedScript(el);\n                  }, 0);\n                }\n              }} className=\"embed-container min-h-[200px] flex items-center justify-center\" />\n                  </div>\n                  {}\n                  {embed.description && <div className=\"p-4 bg-gray-50 border-t border-gray-100\">\n                      <p className=\"text-base text-gray-600\">{embed.description}</p>\n                    </div>}\n                </div>)}\n            </div> : <div className=\"flex flex-col items-center justify-center h-64 text-center\">\n              <div className=\"mb-4\">\n                <Link size={32} className=\"text-gray-400\" />\n              </div>\n              <h3 className=\"text-lg font-medium mb-2\">\n                No {type === 'alpha' ? 'Alpha' : 'Update'} Embeds Available\n              </h3>\n              <p className=\"text-gray-600 max-w-md mb-4\">\n                {isAdmin && creatorMode ? `Click the 'Add ${type === 'alpha' ? 'Alpha' : 'Update'} Embed' button to add content for this token.` : `No ${type === 'alpha' ? 'alpha' : 'update'} embeds have been set for this token yet.`}\n              </p>\n            </div>}\n        </div>\n      </div>;\n  };\n  const TokenChart = ({\n    token\n  }) => {\n    const [showRefreshButton, setShowRefreshButton] = useState(false);\n    const chartRef = useRef(null);\n    const chartLoadTimeRef = useRef(null);\n    useEffect(() => {\n      if (token && !isLoadingChart) {\n        chartLoadTimeRef.current = Date.now();\n        const timer = setInterval(() => {\n          if (chartLoadTimeRef.current && Date.now() - chartLoadTimeRef.current > 300000) {\n            setShowRefreshButton(true);\n            clearInterval(timer);\n          }\n        }, 60000);\n        return () => clearInterval(timer);\n      }\n    }, [token, isLoadingChart]);\n    const handleManualRefresh = () => {\n      if (token) {\n        setShowRefreshButton(false);\n        fetchTokenChartData(token.contractAddress, true);\n        chartLoadTimeRef.current = Date.now();\n      }\n    };\n    if (!token) return null;\n    return <div className=\"bg-white p-4 rounded-lg shadow-sm border border-gray-200 transition-opacity duration-150 ease-in-out relative\">\n        {showRefreshButton && <button onClick={handleManualRefresh} className=\"absolute top-2 right-2 z-10 bg-blue-600 text-white px-2 py-1 text-xs rounded-md shadow-sm flex items-center\">\n            <RefreshCw size={12} className=\"mr-1\" />\n            Refresh Chart\n          </button>}\n        <div className=\"h-auto\" ref={chartRef}>\n        {isLoadingChart ? <div className=\"h-full min-h-[400px] flex flex-col items-center justify-center\">\n            <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n            <span className=\"text-gray-700 font-medium\">Sabar Nggih...</span>\n          </div> : <>\n              <style dangerouslySetInnerHTML={{\n            __html: `\n                  #dexscreener-widget {\n                    position: relative;\n                    width: 100%;\n                    max-width: 100%;\n                    height: 250px;\n                    overflow: hidden;\n                    border-radius: 12px;\n                    box-shadow: 0 0 8px rgba(0,0,0,0.1);\n                  }\n                  #dexscreener-widget iframe {\n                    position: absolute;\n                    top: -100px;\n                    left: 0;\n                    width: 100%;\n                    height: 500px;\n                    border: none;\n                  }\n                  #dexscreener-embed{position:relative;width:100%;padding-bottom:65%;}\n                  @media(min-width:1400px){#dexscreener-embed{padding-bottom:45%;}}\n                  #dexscreener-embed iframe{position:absolute;width:100%;height:100%;top:0;left:0;border:0;}\n                `\n          }} />\n              <div id=\"dexscreener-embed\">\n                <iframe src={`https://dexscreener.com/solana/${token.contractAddress}?embed=1&loadChartSettings=0&trades=0&tabs=0&loadChartSettings=0&chartTheme=light&theme=light&chartStyle=1&chartType=usd&interval=60`} title={`${token.symbol} token info`} />\n              </div>\n            </>}\n        </div>\n      </div>;\n  };\n  const EmptyTerminalState = () => <div className=\"flex flex-col items-center justify-center h-full text-center\">\n      <div className=\"bg-blue-50 rounded-full p-4 mb-4\">\n        <Info size={40} className=\"text-blue-400\" />\n      </div>\n      <h2 className=\"text-2xl font-bold mb-2\">Monggo Dipilih</h2>\n      <p className=\"text-gray-600 mb-6 max-w-md\">\n        {creatorMode ? \"Add tokens to track them in your personal terminal. View price charts, market data, and more.\" : \"Monggo Klik Token Yang Jenengan Ingin Pelajari\"}\n      </p>\n      <div className=\"flex space-x-4\">\n        {creatorMode && <button onClick={() => setIsAddingToken(true)} className=\"px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700 flex items-center\">\n            <Plus size={18} className=\"mr-2\" />\n            Add Your First Token\n          </button>}\n      </div>\n    </div>;\n  const ArticlesView = ({\n    token\n  }) => {\n    const [isAddingArticle, setIsAddingArticle] = useState(false);\n    const [editingArticleId, setEditingArticleId] = useState(null);\n    const [selectedArticle, setSelectedArticle] = useState(null);\n    const [articleTitle, setArticleTitle] = useState('');\n    const [articleContent, setArticleContent] = useState('');\n    const [articleImage, setArticleImage] = useState('');\n    const [currentImageUrl, setCurrentImageUrl] = useState('');\n    const [cursorPosition, setCursorPosition] = useState(0);\n    const [comments, setComments] = useState([]);\n    const [commentContent, setCommentContent] = useState('');\n    const [isLoadingComments, setIsLoadingComments] = useState(false);\n    const [isWalletConnected, setIsWalletConnected] = useState(false);\n    const [walletAddress, setWalletAddress] = useState('');\n    const [sortCommentsBy, setSortCommentsBy] = useState('newest');\n    const [isSubmittingComment, setIsSubmittingComment] = useState(false);\n    const [isSubmitting, setIsSubmitting] = useState(false);\n    const [articles, setArticles] = useState([]);\n    const [isLoading, setIsLoading] = useState(true);\n    const [renderError, setRenderError] = useState(null);\n    const contentRef = useRef(null);\n    useEffect(() => {\n      fetchArticles();\n    }, []);\n    const fetchArticles = async () => {\n      setIsLoading(true);\n      setRenderError(null);\n      try {\n        console.log(\"Fetching articles from database...\");\n        const fetchedArticles = await stateClient.getEntities('articles');\n        console.log(\"Fetched articles:\", fetchedArticles?.length || 0);\n        const storedArticles = localStorage.getItem('paceterminal-articles-backup');\n        let backupArticles = [];\n        if (storedArticles) {\n          try {\n            backupArticles = JSON.parse(storedArticles);\n            console.log(\"Found backup articles:\", backupArticles?.length || 0);\n          } catch (e) {\n            console.error(\"Error parsing backup articles:\", e);\n            backupArticles = [];\n          }\n        }\n        let mergedArticles = [];\n        if (fetchedArticles && fetchedArticles.length > 0) {\n          const validDbArticles = fetchedArticles.filter(article => article && article.id).map(article => ({\n            ...article,\n            content: article.content || '',\n            createdAt: article.createdAt || new Date().toISOString(),\n            updatedAt: article.updatedAt || article.createdAt || new Date().toISOString()\n          }));\n          if (backupArticles && backupArticles.length > 0) {\n            const dbArticleIds = validDbArticles.map(a => a.id);\n            const uniqueBackupArticles = backupArticles.filter(a => !dbArticleIds.includes(a.id));\n            if (uniqueBackupArticles.length > 0) {\n              console.log(`Found ${uniqueBackupArticles.length} unique articles in backup`);\n              uniqueBackupArticles.forEach(async article => {\n                try {\n                  await stateClient.createEntity('articles', article);\n                  console.log(\"Restored article from backup to DB:\", article.id);\n                } catch (restoreError) {\n                  console.log(\"Error saving backup article to DB:\", restoreError);\n                }\n              });\n            }\n            mergedArticles = [...validDbArticles, ...uniqueBackupArticles];\n          } else {\n            mergedArticles = validDbArticles;\n          }\n        } else if (backupArticles && backupArticles.length > 0) {\n          console.log(\"Using local backup for articles:\", backupArticles.length);\n          mergedArticles = backupArticles;\n          for (const article of backupArticles) {\n            try {\n              await stateClient.createEntity('articles', article);\n              console.log(\"Restored article from backup:\", article.id);\n            } catch (restoreError) {\n              console.log(\"Could not restore article to DB:\", article.id, restoreError.message);\n            }\n          }\n        } else {\n          console.log(\"No articles found in database or backup\");\n          mergedArticles = [];\n        }\n        mergedArticles.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));\n        console.log(\"Final article count:\", mergedArticles.length);\n        setArticles(mergedArticles);\n        localStorage.setItem('paceterminal-articles-backup', JSON.stringify(mergedArticles));\n      } catch (error) {\n        console.error(\"Error in fetchArticles:\", error);\n        const storedArticles = localStorage.getItem('paceterminal-articles-backup');\n        if (storedArticles) {\n          try {\n            const backupArticles = JSON.parse(storedArticles);\n            if (backupArticles && backupArticles.length > 0) {\n              console.log(\"Using local backup after fetch error:\", backupArticles.length);\n              setArticles(backupArticles);\n            } else {\n              setArticles([]);\n            }\n          } catch (e) {\n            console.error(\"Error parsing backup articles:\", e);\n            setArticles([]);\n          }\n        } else {\n          setArticles([]);\n        }\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    const handleAddArticle = async () => {\n      if (!articleTitle.trim() || !articleContent.trim()) {\n        alert('Please enter both title and content for the article');\n        return;\n      }\n      if (articleContent.length > 500000) {\n        alert('Article content is too large. Please reduce the size or split into multiple articles.');\n        return;\n      }\n      setIsSubmitting(true);\n      try {\n        const articleId = editingArticleId || `article-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n        const articleData = {\n          id: articleId,\n          title: articleTitle,\n          content: articleContent,\n          image: articleImage,\n          createdAt: new Date().toISOString(),\n          updatedAt: new Date().toISOString(),\n          author: 'Admin',\n          tokenId: token?.contractAddress || null\n        };\n        let updatedArticles = [];\n        setArticles(prev => {\n          const updated = editingArticleId ? prev.map(article => article.id === editingArticleId ? articleData : article) : [articleData, ...prev];\n          updatedArticles = updated;\n          return updated;\n        });\n        localStorage.setItem('paceterminal-articles-backup', JSON.stringify(updatedArticles));\n        if (editingArticleId) {\n          try {\n            console.log(\"Attempting to update article:\", editingArticleId);\n            await stateClient.updateEntity('articles', editingArticleId, articleData);\n            console.log(\"Article updated successfully:\", editingArticleId);\n          } catch (updateError) {\n            console.error(\"Error updating article, trying to create instead:\", updateError);\n            try {\n              console.log(\"Attempting to create article after update failure\");\n              await stateClient.createEntity('articles', articleData);\n              console.log(\"Article created after update failure:\", articleId);\n            } catch (createError) {\n              console.error(\"Failed to create article after update failure:\", createError);\n            }\n          }\n        } else {\n          try {\n            console.log(\"Attempting to create new article:\", articleId);\n            await stateClient.createEntity('articles', articleData);\n            console.log(\"Article created successfully:\", articleId);\n          } catch (createError) {\n            console.error(\"Error creating article, trying with a new ID:\", createError);\n            try {\n              const newId = `article-${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;\n              console.log(\"Trying with new ID:\", newId);\n              articleData.id = newId;\n              await stateClient.createEntity('articles', articleData);\n              console.log(\"Article created with new ID:\", articleData.id);\n              setArticles(prev => prev.map(article => article.id === articleId ? {\n                ...article,\n                id: newId\n              } : article));\n              localStorage.setItem('paceterminal-articles-backup', JSON.stringify(updatedArticles.map(article => article.id === articleId ? {\n                ...article,\n                id: newId\n              } : article)));\n            } catch (retryError) {\n              console.error(\"Failed to create article with new ID:\", retryError);\n            }\n          }\n        }\n        try {\n          console.log(\"Verifying articles are saved...\");\n          const savedArticles = await stateClient.getEntities('articles');\n          console.log(`Found ${savedArticles?.length || 0} saved articles`);\n        } catch (verifyError) {\n          console.error(\"Error verifying saved articles:\", verifyError);\n        }\n        resetArticleForm();\n      } catch (error) {\n        console.error(\"Error saving article:\", error);\n        if (error.message && error.message.includes('too large')) {\n          alert('Article content is too large for storage. Please reduce the size or split into multiple articles.');\n        } else {\n          alert('Failed to save article. Please try again.');\n        }\n      } finally {\n        setIsSubmitting(false);\n      }\n    };\n    const handleEditArticle = article => {\n      setArticleTitle(article.title);\n      setArticleContent(article.content);\n      setArticleImage(article.image || '');\n      setEditingArticleId(article.id);\n      setIsAddingArticle(true);\n    };\n    const handleDeleteArticle = async id => {\n      if (!confirm('Are you sure you want to delete this article?')) return;\n      try {\n        await stateClient.deleteEntity('articles', id);\n        await fetchArticles();\n        if (selectedArticle && selectedArticle.id === id) {\n          setSelectedArticle(null);\n        }\n      } catch (error) {\n        console.error(\"Error deleting article:\", error);\n        alert('Failed to delete article. Please try again.');\n      }\n    };\n    const resetArticleForm = () => {\n      setArticleTitle('');\n      setArticleContent('');\n      setArticleImage('');\n      setEditingArticleId(null);\n      setIsAddingArticle(false);\n    };\n    const formatDate = dateString => {\n      const options = {\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric'\n      };\n      return new Date(dateString).toLocaleDateString('id-ID', options);\n    };\n    const formatTimestamp = date => {\n      return new Date(date).toLocaleString('id-ID', {\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n        hour: '2-digit',\n        minute: '2-digit'\n      });\n    };\n    const shortenAddress = address => {\n      if (!address) return '';\n      return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;\n    };\n    const connectWallet = () => {\n      setIsWalletConnected(true);\n      const mockAddress = '0x' + Math.random().toString(36).substring(2, 10) + Math.random().toString(36).substring(2, 10);\n      setWalletAddress(mockAddress);\n    };\n    useEffect(() => {\n      if (selectedArticle) {\n        fetchComments(selectedArticle.id);\n      }\n    }, [selectedArticle]);\n    const fetchComments = async articleId => {\n      if (!articleId) return;\n      setIsLoadingComments(true);\n      try {\n        const fetchedComments = await stateClient.getEntities('comments', {\n          articleId\n        });\n        if (fetchedComments && fetchedComments.length > 0) {\n          setComments(fetchedComments);\n        } else {\n          setComments([]);\n        }\n      } catch (error) {\n        console.error(\"Error fetching comments:\", error);\n        setComments([]);\n      } finally {\n        setIsLoadingComments(false);\n      }\n    };\n    const handleSubmitComment = async e => {\n      e.preventDefault();\n      if (!commentContent.trim() || !isWalletConnected || !selectedArticle) return;\n      setIsSubmittingComment(true);\n      const newComment = {\n        id: `comment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,\n        articleId: selectedArticle.id,\n        content: commentContent.trim(),\n        walletAddress: walletAddress,\n        authorType: token && walletAddress.toLowerCase() === token.creatorAddress?.toLowerCase() ? 'creator' : 'user',\n        createdAt: new Date().toISOString()\n      };\n      try {\n        await stateClient.createEntity('comments', newComment);\n        setComments(prevComments => [newComment, ...prevComments]);\n        setCommentContent('');\n      } catch (error) {\n        console.error(\"Error saving comment:\", error);\n        alert(\"Failed to post comment. Please try again.\");\n      } finally {\n        setIsSubmittingComment(false);\n      }\n    };\n    const getSortedComments = () => {\n      if (!comments.length) return [];\n      return [...comments].sort((a, b) => {\n        if (sortCommentsBy === 'newest') {\n          return new Date(b.createdAt) - new Date(a.createdAt);\n        } else {\n          return new Date(a.createdAt) - new Date(b.createdAt);\n        }\n      });\n    };\n    if (isLoading) {\n      return <div className=\"flex flex-col justify-center items-center h-64\">\n          <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n          <span className=\"text-gray-700 font-medium\">Sabar Nggih...</span>\n        </div>;\n    }\n    if (selectedArticle) {\n      const renderContent = content => {\n        if (!content) return null;\n        try {\n          const chunkSize = 10000;\n          const contentLength = content.length;\n          if (contentLength <= chunkSize) {\n            return renderContentChunk(content);\n          } else {\n            const chunks = [];\n            for (let i = 0; i < contentLength; i += chunkSize) {\n              const chunk = content.substring(i, Math.min(i + chunkSize, contentLength));\n              chunks.push(renderContentChunk(chunk));\n            }\n            return <>{chunks}</>;\n          }\n        } catch (error) {\n          console.error(\"Error rendering article content:\", error);\n          setRenderError(error.message);\n          return <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 my-4\">\n              <p className=\"font-medium\">Error rendering content</p>\n              <p className=\"text-sm mt-1\">The article content couldn't be displayed properly.</p>\n            </div>;\n        }\n      };\n      const renderContentChunk = chunk => {\n        const parts = chunk.split(/(\\[img:[^\\]]+\\])/g);\n        return parts.map((part, index) => {\n          const imgMatch = part.match(/\\[img:([^\\]]+)\\]/);\n          if (imgMatch) {\n            const imgUrl = imgMatch[1];\n            return <div key={`img-${index}`} className=\"my-8 flex justify-center\">\n                <img src={imgUrl} alt=\"Article image\" className=\"max-w-full rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 object-contain max-h-[600px]\" />\n              </div>;\n          }\n          return part ? <div key={`text-${index}`} className=\"my-4 leading-relaxed\" style={{\n            whiteSpace: 'pre-wrap'\n          }}>\n              {part}\n            </div> : null;\n        });\n      };\n      return <div className=\"flex flex-col md:flex-row gap-6\">\n    <article className=\"bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden md:flex-1\">\n          <div className=\"flex justify-between items-center p-4 border-b border-gray-200 bg-gray-50\">\n            <button onClick={() => setSelectedArticle(null)} className=\"px-3 py-1.5 bg-white text-gray-700 rounded-md hover:bg-gray-100 flex items-center text-sm shadow-sm border border-gray-200\">\n              <ArrowLeft size={16} className=\"mr-1\" />\n              Back to Articles\n            </button>\n            \n            {isAdmin && creatorMode && <div className=\"flex space-x-2\">\n                <button onClick={() => handleEditArticle(selectedArticle)} className=\"p-1.5 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 shadow-sm border border-blue-200\">\n                  <Edit2 size={16} />\n                </button>\n                <button onClick={() => handleDeleteArticle(selectedArticle.id)} className=\"p-1.5 bg-red-50 text-red-700 rounded-md hover:bg-red-100 shadow-sm border border-red-200\">\n                  <Trash2 size={16} />\n                </button>\n              </div>}\n          </div>\n          \n          <div className=\"px-6 py-8\">\n            {}\n            {selectedArticle.image && <div className=\"mb-8 -mx-6 md:-mx-10\">\n                <img src={selectedArticle.image} alt={selectedArticle.title} className=\"w-full h-auto object-cover shadow-md\" style={{\n                maxHeight: \"500px\"\n              }} />\n              </div>}\n            \n            {}\n            <h1 className=\"text-4xl md:text-5xl font-serif font-bold mb-4 leading-tight\">{selectedArticle.title}</h1>\n            \n            {}\n            <div className=\"flex items-center text-gray-600 mb-8 pb-6 border-b border-gray-100\">\n              <span className=\"mr-3 font-medium\">{formatDate(selectedArticle.createdAt)}</span>\n              <span className=\"text-gray-500\">By {selectedArticle.author || 'Admin'}</span>\n            </div>\n            \n            {}\n            <ErrorBoundary fallback={<div className=\"p-8 text-center text-red-500\">\n              An error occurred while rendering this article. The content may be too large or contain invalid formatting.\n            </div>}>\n              <div className=\"prose max-w-none text-lg text-gray-800\" style={{\n                lineHeight: '1.8'\n              }}>\n                {renderError ? <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg text-red-700\">\n                    <p className=\"font-medium\">Error displaying article</p>\n                    <p className=\"text-sm mt-1\">{renderError}</p>\n                    <button onClick={() => setRenderError(null)} className=\"mt-2 px-3 py-1 bg-red-100 text-red-800 rounded-md text-sm hover:bg-red-200\">\n                      Try Again\n                    </button>\n                  </div> : renderContent(selectedArticle.content)}\n              </div>\n            </ErrorBoundary>\n          </div>\n        </article>\n        \n        {}\n        <div className=\"bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden md:w-96\">\n          <div className=\"p-4 border-b border-gray-200 bg-gray-50\">\n            <h3 className=\"text-xl font-serif font-bold text-gray-900 flex items-center\">\n              <Edit2 size={18} className=\"mr-2\" />\n              WACANA\n            </h3>\n          </div>\n          \n          <div className=\"p-4\">\n            <div className=\"flex items-center justify-between mb-4\">\n              <div className=\"text-sm font-medium text-gray-700\">Discussion</div>\n              <div className=\"flex items-center\">\n                <span className=\"text-xs mr-1 text-gray-600\">Sort by:</span>\n                <select value={sortCommentsBy} onChange={e => setSortCommentsBy(e.target.value)} className=\"text-xs bg-gray-100 border border-gray-200 rounded-md px-1 py-0.5 focus:outline-none focus:ring-1 focus:ring-blue-500\">\n                  <option value=\"newest\">Newest</option>\n                  <option value=\"oldest\">Oldest</option>\n                </select>\n              </div>\n            </div>\n            \n            {!isWalletConnected ? <div className=\"bg-gray-100 border border-gray-200 rounded-lg p-4 mb-4 text-center\">\n                <div className=\"mb-3\">\n                  <Lock className=\"w-8 h-8 mx-auto text-gray-400 mb-2\" />\n                  <h4 className=\"text-base font-medium mb-1\">Monggo Sambungke Dompet Untuk Ninggalke Wacana</h4>\n                  <p className=\"text-sm text-gray-600 mb-3\">Connect your wallet to join the conversation</p>\n                </div>\n                <button onClick={connectWallet} className=\"px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-900 transition-colors shadow-md flex items-center mx-auto text-sm\">\n                  <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Wallet\" className=\"w-4 h-4 mr-2\" />\n                  <span>Connect Wallet</span>\n                </button>\n              </div> : <div className=\"mb-4\">\n                <div className=\"flex items-start mb-3\">\n                  <div className=\"flex-shrink-0 bg-gray-100 rounded-full p-1.5 mr-2\">\n                    <Users size={14} className=\"text-gray-500\" />\n                  </div>\n                  <div className=\"flex-grow\">\n                    <div className=\"flex items-center mb-1\">\n                      <span className=\"text-xs font-mono bg-gray-100 px-2 py-0.5 rounded text-gray-700\">\n                        {shortenAddress(walletAddress)}\n                      </span>\n                    </div>\n                    <form onSubmit={handleSubmitComment}>\n                      <div className=\"border border-gray-200 rounded-lg overflow-hidden mb-2\">\n                        <textarea value={commentContent} onChange={e => setCommentContent(e.target.value)} placeholder=\"Share your thoughts...\" className=\"w-full p-3 focus:outline-none resize-none text-sm\" rows={2} />\n                      </div>\n                      <div className=\"flex justify-end\">\n                        <button type=\"submit\" className=\"px-3 py-1.5 bg-gray-800 text-white rounded-md hover:bg-gray-900 flex items-center text-sm\" disabled={!commentContent.trim() || isSubmittingComment}>\n                          {isSubmittingComment ? <RefreshCw size={14} className=\"mr-1 animate-spin\" /> : <Send size={14} className=\"mr-1\" />}\n                          Post Comment\n                        </button>\n                      </div>\n                    </form>\n                  </div>\n                </div>\n              </div>}\n            \n            <div className=\"space-y-4 max-h-[500px] overflow-y-auto\">\n              {isLoadingComments ? <div className=\"flex flex-col items-center justify-center py-8\">\n                  <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Loading\" className=\"w-8 h-8 mb-2 animate-pulse\" />\n                  <span className=\"text-sm text-gray-700 font-medium\">Loading comments...</span>\n                </div> : getSortedComments().length > 0 ? getSortedComments().map(comment => <div key={comment.id} className={`p-3 rounded-lg ${comment.authorType === 'creator' ? 'bg-blue-50 border border-blue-100' : 'bg-gray-50 border border-gray-100'}`}>\n                    <div className=\"flex items-start\">\n                      <div className=\"flex-shrink-0 bg-gray-200 rounded-full p-1.5 mr-2\">\n                        <Users size={14} className=\"text-gray-500\" />\n                      </div>\n                      <div className=\"flex-grow\">\n                        <div className=\"flex items-center mb-1\">\n                          <span className={`text-xs font-mono px-1.5 py-0.5 rounded ${comment.authorType === 'creator' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700'}`}>\n                            {shortenAddress(comment.walletAddress)}\n                          </span>\n                          {comment.authorType === 'creator' && <span className=\"ml-1 text-xs bg-blue-500 text-white px-1.5 py-0.5 rounded-full text-[10px]\">\n                              Creator\n                            </span>}\n                        </div>\n                        <div className=\"text-sm text-gray-700 mt-1\">{comment.content}</div>\n                        <div className=\"text-xs text-gray-500 mt-1\">\n                          {formatTimestamp(comment.createdAt)}\n                        </div>\n                      </div>\n                    </div>\n                  </div>) : <div className=\"text-center py-8 bg-gray-50 rounded-lg\">\n                  <div className=\"bg-gray-100 rounded-full p-3 inline-block mb-3\">\n                    <Edit2 size={16} className=\"text-gray-400\" />\n                  </div>\n                  <h3 className=\"text-base font-medium mb-1\">No Comments Yet</h3>\n                  <p className=\"text-sm text-gray-600\">Be the first to share your thoughts!</p>\n                </div>}\n            </div>\n          </div>\n        </div>\n      </div>;\n    }\n    const insertImageAtCursor = () => {\n      if (!currentImageUrl.trim()) return;\n      const imageTag = `[img:${currentImageUrl}]`;\n      const newContent = articleContent.substring(0, cursorPosition) + imageTag + articleContent.substring(cursorPosition);\n      setArticleContent(newContent);\n      setCurrentImageUrl('');\n      if (contentRef.current) {\n        contentRef.current.focus();\n        const newPosition = cursorPosition + imageTag.length;\n        contentRef.current.setSelectionRange(newPosition, newPosition);\n      }\n    };\n    const handleContentChange = e => {\n      setArticleContent(e.target.value);\n      setCursorPosition(e.target.selectionStart);\n    };\n    const handleContentClick = e => {\n      setCursorPosition(e.target.selectionStart);\n    };\n    const handleContentKeyUp = e => {\n      setCursorPosition(e.target.selectionStart);\n    };\n    if (isAddingArticle) {\n      return <div className=\"bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden\">\n          <div className=\"flex justify-between items-center p-4 border-b border-gray-200 bg-gray-50\">\n            <h2 className=\"text-xl font-bold\">{editingArticleId ? 'Edit Article' : 'Create New Article'}</h2>\n            <button onClick={resetArticleForm} className=\"p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full\">\n              <X size={20} />\n            </button>\n          </div>\n          \n          <div className=\"p-6\">\n            <div className=\"mb-4\">\n              <label htmlFor=\"articleTitle\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Title\n              </label>\n              <input id=\"articleTitle\" type=\"text\" value={articleTitle} onChange={e => setArticleTitle(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"Enter article title\" required />\n            </div>\n            \n            <div className=\"mb-4\">\n              <label htmlFor=\"articleImage\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Featured Image URL (optional)\n              </label>\n              <input id=\"articleImage\" type=\"text\" value={articleImage} onChange={e => setArticleImage(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"https://example.com/image.jpg\" />\n              {articleImage && <div className=\"mt-2 p-2 border border-gray-200 rounded bg-gray-50\">\n                  <p className=\"text-xs text-gray-500 mb-1\">Featured Image Preview:</p>\n                  <img src={articleImage} alt=\"Featured image preview\" className=\"h-32 object-contain rounded border border-gray-300\" onError={e => {\n                e.target.src = \"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\";\n                e.target.className += \" p-2\";\n              }} />\n                </div>}\n            </div>\n            \n            {}\n            <div className=\"mb-4 p-4 bg-blue-50 border border-blue-100 rounded-lg\">\n              <div className=\"flex items-end\">\n                <div className=\"flex-1 mr-2\">\n                  <label htmlFor=\"inlineImageUrl\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Insert Image in Content\n                  </label>\n                  <input id=\"inlineImageUrl\" type=\"text\" value={currentImageUrl} onChange={e => setCurrentImageUrl(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"https://example.com/inline-image.jpg\" />\n                </div>\n                <button onClick={insertImageAtCursor} className=\"px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" disabled={!currentImageUrl.trim()}>\n                  <ImageIcon size={16} className=\"mr-1\" />\n                  Insert at Cursor\n                </button>\n              </div>\n              <p className=\"text-xs text-gray-600 mt-2\">\n                Position your cursor in the content where you want the image to appear, then click \"Insert at Cursor\"\n              </p>\n            </div>\n            \n            <div className=\"mb-6\">\n              <label htmlFor=\"articleContent\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Content\n              </label>\n              <textarea id=\"articleContent\" ref={contentRef} value={articleContent} onChange={handleContentChange} onClick={handleContentClick} onKeyUp={handleContentKeyUp} className=\"w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[300px] font-sans\" placeholder=\"Write your article content here...\" required />\n            </div>\n            \n            <div className=\"flex justify-end space-x-3\">\n              <button onClick={resetArticleForm} className=\"px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200\">\n                Cancel\n              </button>\n              <button onClick={handleAddArticle} className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" disabled={isSubmitting || !articleTitle.trim() || !articleContent.trim()}>\n                {isSubmitting ? <>\n                    <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                    Saving...\n                  </> : <>\n                    <Save size={18} className=\"mr-2\" />\n                    {editingArticleId ? 'Update Article' : 'Publish Article'}\n                  </>}\n              </button>\n            </div>\n          </div>\n        </div>;\n    }\n    return <div className=\"bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden\">\n        <div className=\"flex justify-between items-center p-4 border-b border-gray-200 bg-gray-50\">\n          <h2 className=\"text-xl font-bold flex items-center\">\n            <Edit2 size={20} className=\"mr-2 text-blue-600\" />\n            Articles\n          </h2>\n          {isAdmin && creatorMode && <button onClick={() => setIsAddingArticle(true)} className=\"px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center text-sm shadow-sm\">\n              <Plus size={16} className=\"mr-1\" />\n              New Article\n            </button>}\n        </div>\n        \n        {articles.length > 0 ? <div className=\"divide-y divide-gray-100\">\n            {articles.map(article => <div key={article.id} className=\"p-5 hover:bg-gray-50 transition-colors cursor-pointer flex\" onClick={() => setSelectedArticle(article)}>\n                {article.image && <div className=\"mr-5 flex-shrink-0\">\n                    <img src={article.image} alt={article.title} className=\"w-24 h-24 object-cover rounded-md shadow-sm hover:shadow transition-shadow\" />\n                  </div>}\n                <div className=\"flex-1\">\n                  <h3 className=\"text-xl font-bold mb-1 leading-tight\">{article.title}</h3>\n                  <div className=\"text-sm text-gray-500 mb-2 flex items-center\">\n                    <Calendar size={12} className=\"mr-1\" />\n                    {formatDate(article.createdAt)} \n                    <span className=\"mx-2\">•</span> \n                    <span className=\"font-medium text-gray-700\">{article.author || 'Admin'}</span>\n                  </div>\n                  <p className=\"text-gray-700 line-clamp-3 leading-relaxed\">\n                    {}\n                    {article.content ? article.content.replace(/\\[img:[^\\]]+\\]/g, ' [Image] ').substring(0, 180) + (article.content.length > 180 ? '...' : '') : 'No content'}\n                  </p>\n                </div>\n                <div className=\"ml-2 self-center text-blue-500\">\n                  <ArrowRight size={18} />\n                </div>\n              </div>)}\n          </div> : <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n            <div className=\"bg-blue-50 rounded-full p-4 mb-4\">\n              <Edit2 size={30} className=\"text-blue-400\" />\n            </div>\n            <h3 className=\"text-lg font-medium mb-2\">No Articles Yet</h3>\n            <p className=\"text-gray-600 max-w-md mb-6\">\n              {isAdmin && creatorMode ? \"Start your publishing empire by creating your first article.\" : \"No articles have been published yet.\"}\n            </p>\n            {isAdmin && creatorMode && <button onClick={() => setIsAddingArticle(true)} className=\"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center shadow-md\">\n                <Plus size={18} className=\"mr-2\" />\n                Create First Article\n              </button>}\n          </div>}\n      </div>;\n  };\n  const [compareMode, setCompareMode] = useState(false);\n  const [comparingTokens, setComparingTokens] = useState([]);\n  const handleToggleCompare = () => {\n    setCompareMode(!compareMode);\n    setComparingTokens([]);\n  };\n  const handleSelectCompareToken = token => {\n    if (comparingTokens.some(t => t.contractAddress === token.contractAddress)) {\n      setComparingTokens(comparingTokens.filter(t => t.contractAddress !== token.contractAddress));\n    } else if (comparingTokens.length < 2) {\n      setComparingTokens([...comparingTokens, token]);\n    }\n  };\n  const TerminalView = () => <div className=\"grid grid-cols-5 gap-4 h-full\">\n      <div className=\"col-span-1 overflow-hidden border border-gray-300 rounded-lg bg-white flex flex-col shadow-md\">\n        <div className=\"bg-gray-900 p-3\">\n          <div className=\"flex justify-between items-center\">\n            <div className=\"w-8\">\n              {isAdmin && creatorMode && <button onClick={() => {\n              setSelectedToken(null);\n              setIsEditing(false);\n              setIsAddingToken(true);\n            }} className=\"p-1.5 bg-gray-800 text-white hover:bg-gray-700 rounded-full transition-colors\" title=\"Add new token\">\n                  <Plus size={16} />\n                </button>}\n            </div>\n            <h3 className=\"font-bold text-sm uppercase tracking-wider text-white text-center flex-1\">Curated Token</h3>\n            <div className=\"w-8\"></div>\n          </div>\n        </div>\n        <style dangerouslySetInnerHTML={{\n        __html: `\n            @keyframes fadeIn {\n              from { opacity: 0; transform: translateY(-10px); }\n              to { opacity: 1; transform: translateY(0); }\n            }\n            .animate-fadeIn {\n              animation: fadeIn 0.2s ease-out forwards;\n            }\n          `\n      }} />\n        <div className=\"flex-1 overflow-y-auto bg-gray-50\">\n          {tokens.length > 0 ? <>\n              {compareMode && <div className=\"bg-blue-100 p-2 border-b border-blue-200\">\n                  <p className=\"text-center text-xs text-blue-900 font-bold\">\n                    Select up to 2 tokens to compare\n                    {comparingTokens.length > 0 && ` (${comparingTokens.length}/2)`}\n                  </p>\n                </div>}\n              {}\n              {tokens.sort((a, b) => {\n            const aIsStarred = starredTokens.includes(a.contractAddress);\n            const bIsStarred = starredTokens.includes(b.contractAddress);\n            if (aIsStarred && !bIsStarred) return -1;\n            if (!aIsStarred && bIsStarred) return 1;\n            return a.symbol?.localeCompare(b.symbol);\n          }).map(token => <div key={token.contractAddress} onClick={() => compareMode ? handleSelectCompareToken(token) : handleSelectToken(token)} onTouchStart={() => markUserInteraction()} className={`p-4 border-b border-gray-200 hover:bg-gray-100 cursor-pointer transition-all duration-100 ease-in-out active:bg-blue-100\n                    ${selectedToken && selectedToken.contractAddress === token.contractAddress && !compareMode ? 'bg-blue-50 border-l-4 border-l-blue-500' : ''} \n                    ${compareMode && comparingTokens.some(t => t.contractAddress === token.contractAddress) ? 'bg-green-50 border-l-4 border-l-green-500' : ''}\n                    ${starredTokens.includes(token.contractAddress) ? 'bg-yellow-50' : ''}\n                    relative`}>\n                  <div className=\"flex items-center justify-between\">\n                    <div className=\"flex items-center\">\n                      {token.image ? <img src={token.image} alt={token.symbol} className=\"w-10 h-10 mr-3 rounded-full\" /> : <div className=\"w-10 h-10 mr-3 bg-gray-200 rounded-full flex items-center justify-center\">\n                          <span className=\"text-sm font-bold\">{token.symbol?.substring(0, 2)}</span>\n                        </div>}\n                      <div>\n                        <div className=\"flex items-center\">\n                          <h3 className=\"font-bold text-base\">{token.symbol}</h3>\n                          {starredTokens.includes(token.contractAddress) && <span className=\"ml-1 text-yellow-400 animate-pulse text-lg\">★</span>}\n                        </div>\n                        <div className=\"text-sm text-gray-600 truncate max-w-[140px]\">{token.name || token.symbol}</div>\n                      </div>\n                    </div>\n                    <button onClick={e => toggleStarToken(token.contractAddress, e)} className=\"text-gray-400 hover:text-yellow-500 transition-colors p-2\" title={starredTokens.includes(token.contractAddress) ? \"Remove from favorites\" : \"Add to favorites\"}>\n                      {starredTokens.includes(token.contractAddress) ? <Star size={20} className=\"fill-yellow-400 text-yellow-400\" /> : <Star size={20} />}\n                    </button>\n                  </div>\n                  {!compareMode && creatorMode && isAdmin && <div className=\"mt-2 flex justify-between\">\n                      <div className=\"text-xs text-gray-400 italic\">\n                        {token.lastUpdated && new Date(token.lastUpdated).toLocaleTimeString([], {\n                  hour: '2-digit',\n                  minute: '2-digit'\n                })}\n                      </div>\n                      <div className=\"flex space-x-2\">\n                        <button onClick={e => {\n                  e.stopPropagation();\n                }} className=\"text-xs text-gray-500 hover:text-blue-700 transition-colors duration-150\" title=\"Refresh price data\">\n                          <RefreshCw size={14} />\n                        </button>\n                        <button onClick={e => {\n                  e.stopPropagation();\n                  setSelectedToken(token);\n                  setIsEditing(true);\n                }} className=\"text-xs text-blue-500 hover:text-blue-700 transition-colors duration-150\" title=\"Edit token metrics\">\n                          <Edit2 size={14} />\n                        </button>\n                        <button onClick={e => {\n                  e.stopPropagation();\n                  if (confirm('Are you sure you want to remove this token?')) {\n                    setTokens(tokens.filter(t => t.contractAddress !== token.contractAddress));\n                    stateClient.deleteEntity('tokens', token.contractAddress).catch(console.error);\n                  }\n                }} className=\"text-xs text-red-500 hover:text-red-700 transition-colors duration-150\" title=\"Remove token\">\n                          <Trash2 size={14} />\n                        </button>\n                      </div>\n                    </div>}\n                </div>)}\n            </> : <div className=\"p-4 text-center text-gray-500 text-sm\">\n              {isAdmin && creatorMode ? \"Click + to add tokens to your watchlist\" : \"No tokens added yet\"}\n            </div>}\n        </div>\n        <div className=\"p-3 border-t border-gray-300 bg-gray-900\">\n          <h3 className=\"font-bold text-sm uppercase tracking-wider text-white text-center mb-2\">Trending Token</h3>\n          <div className=\"bg-gray-800 rounded-lg p-3 mb-2\">\n            {isAdmin && creatorMode && <div className=\"flex justify-center mb-2\">\n                <button onClick={() => setIsAddingTrendingToken(true)} className=\"px-2 py-1 bg-gray-700 text-white text-xs rounded hover:bg-gray-600 flex items-center\">\n                  <Plus size={12} className=\"mr-1\" />\n                  Add Trending\n                </button>\n              </div>}\n            {isAddingTrendingToken && <div className=\"p-3 bg-gray-700 rounded-lg mb-2 animate-fadeIn\">\n                <div className=\"flex flex-col space-y-2\">\n                  <input type=\"text\" value={trendingTokenAddress} onChange={e => setTrendingTokenAddress(e.target.value)} placeholder=\"Enter token CA\" className=\"w-full p-2 text-sm bg-gray-600 text-white border border-gray-500 rounded placeholder-gray-400\" />\n                  {trendingTokenError && <div className=\"text-red-400 text-sm px-1\">{trendingTokenError}</div>}\n                  <div className=\"flex justify-between space-x-2\">\n                    <button onClick={() => setIsAddingTrendingToken(false)} className=\"px-3 py-2 bg-gray-600 text-white text-sm rounded hover:bg-gray-500 flex-1\">\n                      Cancel\n                    </button>\n                    <button onClick={handleAddTrendingToken} className=\"px-3 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 flex-1 flex items-center justify-center\" disabled={isLoadingToken || !trendingTokenAddress.trim()}>\n                      {isLoadingToken ? <RefreshCw size={12} className=\"animate-spin\" /> : 'Add'}\n                    </button>\n                  </div>\n                </div>\n              </div>}\n            {trendingTokens.length > 0 ? <div className=\"space-y-2 max-h-60 overflow-y-auto\">\n                {trendingTokens.map(token => <div key={token.contractAddress} onClick={() => handleSelectToken(token)} className=\"p-3 border border-gray-700 hover:bg-gray-700 cursor-pointer transition-all duration-150 ease-in-out rounded flex items-center relative group\">\n                    {token.image ? <img src={token.image} alt={token.symbol} className=\"w-8 h-8 mr-3 rounded-full\" /> : <div className=\"w-8 h-8 mr-3 bg-gray-600 rounded-full flex items-center justify-center\">\n                        <span className=\"text-sm font-bold text-white\">{token.symbol?.substring(0, 2)}</span>\n                      </div>}\n                    <div>\n                      <h3 className=\"font-bold text-sm text-white\">{token.symbol}</h3>\n                      <div className=\"text-xs text-gray-400 truncate max-w-[140px]\">{token.name || token.symbol}</div>\n                    </div>\n                    {isAdmin && creatorMode && <button onClick={e => handleDeleteTrendingToken(token.contractAddress, e)} className=\"absolute right-2 p-1.5 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:bg-red-600\" title=\"Remove trending token\">\n                      <Trash2 size={12} />\n                    </button>}\n                  </div>)}\n              </div> : <div className=\"text-center text-gray-400 text-xs\">\n                {isAdmin && creatorMode ? \"Add trending tokens manually\" : \"No trending tokens added yet\"}\n              </div>}\n          </div>\n        </div>\n        {tokens.length > 1 && <div className=\"p-3 border-t border-gray-300 bg-gray-100\">\n            <button onClick={handleToggleCompare} className={`w-full py-2 rounded-md text-sm font-bold flex items-center justify-center shadow-sm\n                ${compareMode ? 'bg-red-100 text-red-700 hover:bg-red-200 border border-red-300' : 'bg-blue-600 text-white hover:bg-blue-700'}`}>\n              {compareMode ? <>\n                  <X size={16} className=\"mr-2\" />\n                  Cancel Compare\n                </> : <>\n                  <BarChart size={16} className=\"mr-2\" />\n                  Compare Metrics\n                </>}\n            </button>\n          </div>}\n      </div>\n      <div className=\"col-span-4 overflow-y-auto space-y-4 h-full flex flex-col\">\n        {selectedToken ? <>\n            <div className=\"mb-4 sticky top-0 z-10 bg-gray-800 shadow-md rounded-lg\">\n              <div className=\"flex items-center p-1 overflow-x-auto\">\n                <button onClick={() => setActiveDashboardTab('tokenInfo')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'tokenInfo' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Chart\n                </button>\n                <button onClick={() => setActiveDashboardTab('metrics')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'metrics' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Metrics\n                </button>\n                <button onClick={() => setActiveDashboardTab('mutuals')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'mutuals' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Team\n                </button>\n                <button onClick={() => setActiveDashboardTab('tokenomics')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'tokenomics' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Flywheels\n                </button>\n                <button onClick={() => setActiveDashboardTab('social')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'social' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Alpha\n                </button>\n                <button onClick={() => setActiveDashboardTab('update')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'update' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Update\n                </button>\n                <button onClick={() => setActiveDashboardTab('articles')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'articles' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Articles\n                </button>\n              </div>\n            </div>\n            <div className=\"transition-opacity duration-150 ease-in-out\">\n          {activeDashboardTab === 'tokenInfo' && <TokenChart token={selectedToken} />}\n          {activeDashboardTab === 'metrics' && <TokenMetrics token={selectedToken} />}\n          {activeDashboardTab === 'mutuals' && <ErrorBoundary fallback={<div className=\"p-8 text-center text-red-500\">Error loading Team section. Please refresh the page.</div>}>\n              <MutualsView />\n            </ErrorBoundary>}\n          {activeDashboardTab === 'social' && <SocialMediaStats token={selectedToken} type=\"alpha\" />}\n          {activeDashboardTab === 'update' && <SocialMediaStats token={selectedToken} type=\"update\" />}\n          {activeDashboardTab === 'tokenomics' && <TokenomicsView token={selectedToken} />}\n          {activeDashboardTab === 'articles' && <ArticlesView token={selectedToken} />}\n          \n            </div>\n          </> : <EmptyTerminalState />}\n      </div>\n    </div>;\n  const [showKeyboardHelp, setShowKeyboardHelp] = useState(false);\n  const [showNotesSidebar, setShowNotesSidebar] = useState(false);\n  const [notesContent, setNotesContent] = useState('');\n  const [isSavingNotes, setIsSavingNotes] = useState(false);\n  const [notesLastSaved, setNotesLastSaved] = useState(null);\n  const [showAIAssistant, setShowAIAssistant] = useState(false);\n  const notesTextareaRef = useRef(null);\n  const [keyboardShortcuts] = useState([{\n    key: '?',\n    description: 'Show/hide keyboard shortcuts'\n  }, {\n    key: 'C',\n    description: 'Show/hide calendar view'\n  }, {\n    key: 'N',\n    description: 'Open/close notes sidebar'\n  }, {\n    key: 'Shift+C',\n    description: 'Toggle compare mode'\n  }, {\n    key: 'N',\n    description: isAdmin ? 'Create new article' : 'Not available'\n  }, {\n    key: 'A',\n    description: isAdmin ? 'Add new token' : 'Not available'\n  }, {\n    key: 'ESC',\n    description: 'Close current modal or view'\n  }, {\n    key: '1-7',\n    description: 'Switch Terminal tabs'\n  }, {\n    key: 'S',\n    description: 'Search tokens'\n  }, {\n    key: 'R',\n    description: 'Refresh current data'\n  }, {\n    key: 'H',\n    description: 'Return to home view'\n  }]);\n  useEffect(() => {\n    if (notesTextareaRef.current && showNotesSidebar) {\n      notesTextareaRef.current.focus();\n    }\n  }, [showNotesSidebar]);\n  useEffect(() => {\n    const fetchUserNotes = async () => {\n      try {\n        const userNotesId = localStorage.getItem('paceterminal-notes-id') || `notes-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n        if (!localStorage.getItem('paceterminal-notes-id')) {\n          localStorage.setItem('paceterminal-notes-id', userNotesId);\n        }\n        const userNotes = await stateClient.getEntity('userNotes', userNotesId);\n        if (userNotes && userNotes.content) {\n          setNotesContent(userNotes.content);\n          setNotesLastSaved(new Date(userNotes.lastSaved));\n        }\n      } catch (error) {\n        console.error(\"Error fetching user notes:\", error);\n      }\n    };\n    fetchUserNotes();\n  }, []);\n  const saveUserNotes = async () => {\n    try {\n      setIsSavingNotes(true);\n      const userNotesId = localStorage.getItem('paceterminal-notes-id') || `notes-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n      if (!localStorage.getItem('paceterminal-notes-id')) {\n        localStorage.setItem('paceterminal-notes-id', userNotesId);\n      }\n      const currentTime = new Date();\n      try {\n        await stateClient.createEntity('userNotes', {\n          id: userNotesId,\n          content: notesContent,\n          lastSaved: currentTime.toISOString()\n        });\n      } catch (error) {\n        await stateClient.updateEntity('userNotes', userNotesId, {\n          content: notesContent,\n          lastSaved: currentTime.toISOString()\n        });\n      }\n      setNotesLastSaved(currentTime);\n    } catch (error) {\n      console.error(\"Error saving notes:\", error);\n    } finally {\n      setIsSavingNotes(false);\n    }\n  };\n  useEffect(() => {\n    const handleKeyDown = e => {\n      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {\n        return;\n      }\n      switch (e.key) {\n        case '?':\n          setShowKeyboardHelp(prev => !prev);\n          break;\n        case 'n':\n        case 'N':\n          if (e.ctrlKey && !e.shiftKey && !isAdding && !isEditing && !isAddingToken) {\n            setShowNotesSidebar(prev => !prev);\n          }\n          break;\n        case 'r':\n        case 'R':\n          if (selectedToken) {\n            fetchTokenChartData(selectedToken.contractAddress);\n          } else {\n            (async () => {\n              try {\n                const fetchedPosts = await stateClient.getEntities('posts');\n                if (fetchedPosts && fetchedPosts.length > 0) {\n                  setPosts(fetchedPosts);\n                }\n              } catch (error) {\n                console.error(\"Error fetching posts:\", error);\n              }\n            })();\n          }\n          break;\n        case 'c':\n        case 'C':\n          if (!isAdding && !isEditing && !isAddingToken) {\n            if (e.shiftKey && tokens.length > 1) {\n              setCompareMode(prev => !prev);\n              setComparingTokens([]);\n            } else {\n              setShowCalendar(prev => !prev);\n            }\n          }\n          break;\n        case 'a':\n        case 'A':\n          if (isAdmin && creatorMode && !isAdding && !isEditing && !isAddingToken) {\n            setIsAddingToken(true);\n          }\n          break;\n        case 'Escape':\n          if (showKeyboardHelp) {\n            setShowKeyboardHelp(false);\n          } else if (selectedPost) {\n            handleCloseFullArticle();\n          } else if (isAdding || isEditing) {\n            handleCancel();\n          } else if (isAddingToken) {\n            setIsAddingToken(false);\n            setIsEditing(false);\n          }\n          break;\n        case 'h':\n        case 'H':\n          handleLogoClick();\n          break;\n        case '1':\n          if (isTerminalMode && selectedToken) setActiveDashboardTab('tokenInfo');\n          break;\n        case '2':\n          if (isTerminalMode && selectedToken) setActiveDashboardTab('metrics');\n          break;\n        case '3':\n          if (isTerminalMode && selectedToken) setActiveDashboardTab('mutuals');\n          break;\n        case '4':\n          if (isTerminalMode && selectedToken) setActiveDashboardTab('tokenomics');\n          break;\n        case '5':\n          if (isTerminalMode && selectedToken) setActiveDashboardTab('social');\n          break;\n        case '6':\n          if (selectedToken) setActiveDashboardTab('update');\n          break;\n        case '7':\n          break;\n        default:\n          break;\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [isTerminalMode, isAdmin, creatorMode, isAdding, isEditing, isAddingToken, selectedPost, selectedToken, showKeyboardHelp]);\n  const MutualsView = () => {\n    const [teamMembers, setTeamMembers] = useState([]);\n    const [name, setName] = useState('');\n    const [role, setRole] = useState('Team');\n    const [bio, setBio] = useState('');\n    const [twitter, setTwitter] = useState('');\n    const [imageUrl, setImageUrl] = useState('');\n    const [previousProjects, setPreviousProjects] = useState('');\n    const [accountMutual, setAccountMutual] = useState('');\n    const [commitment, setCommitment] = useState('');\n    const [showForm, setShowForm] = useState(false);\n    const [isLoading, setIsLoading] = useState(true);\n    const [isSubmitting, setIsSubmitting] = useState(false);\n    useEffect(() => {\n      fetchTeamMembers();\n    }, []);\n    const fetchTeamMembers = async () => {\n      setIsLoading(true);\n      try {\n        const entityId = selectedToken?.contractAddress || 'global';\n        console.log(\"Fetching team members for entity:\", entityId);\n        try {\n          const response = await stateClient.getEntity('team', entityId);\n          console.log(\"Team response:\", response);\n          if (response && response.members && Array.isArray(response.members)) {\n            console.log(`Found ${response.members.length} team members`);\n            setTeamMembers(response.members);\n            localStorage.setItem('paceterminal-team-backup', JSON.stringify(response.members));\n          } else {\n            const storedTeamMembers = localStorage.getItem('paceterminal-team-backup');\n            if (storedTeamMembers) {\n              try {\n                const backupTeam = JSON.parse(storedTeamMembers);\n                if (backupTeam && backupTeam.length > 0) {\n                  console.log(\"Using local backup for team members:\", backupTeam.length);\n                  setTeamMembers(backupTeam);\n                  try {\n                    await stateClient.createEntity('team', {\n                      id: entityId,\n                      members: backupTeam,\n                      lastUpdated: new Date().toISOString()\n                    });\n                    console.log(\"Restored team members from backup for:\", entityId);\n                  } catch (restoreError) {\n                    try {\n                      await stateClient.updateEntity('team', entityId, {\n                        members: backupTeam,\n                        lastUpdated: new Date().toISOString()\n                      });\n                      console.log(\"Updated team members from backup for:\", entityId);\n                    } catch (updateError) {\n                      console.error(\"Failed to restore team members from backup:\", updateError);\n                    }\n                  }\n                  return;\n                }\n              } catch (e) {\n                console.error(\"Error parsing backup team members:\", e);\n              }\n            }\n            console.log(\"No team members found or invalid format\");\n            setTeamMembers([]);\n          }\n        } catch (fetchError) {\n          console.error(\"Specific error fetching team:\", fetchError);\n          const storedTeamMembers = localStorage.getItem('paceterminal-team-backup');\n          if (storedTeamMembers) {\n            try {\n              const backupTeam = JSON.parse(storedTeamMembers);\n              if (backupTeam && backupTeam.length > 0) {\n                console.log(\"Using local backup for team members after fetch error:\", backupTeam.length);\n                setTeamMembers(backupTeam);\n                return;\n              }\n            } catch (e) {\n              console.error(\"Error parsing backup team members:\", e);\n            }\n          }\n          setTeamMembers([]);\n        }\n      } catch (error) {\n        console.error(\"General error fetching team members:\", error);\n        setTeamMembers([]);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    const resetForm = () => {\n      setName('');\n      setRole('Team');\n      setBio('');\n      setTwitter('');\n      setImageUrl('');\n      setPreviousProjects('');\n      setAccountMutual('');\n      setCommitment('');\n      setShowForm(false);\n    };\n    const handleDeleteTeamMember = async id => {\n      if (!window.confirm('Are you sure you want to delete this team member?')) return;\n      try {\n        const updatedMembers = teamMembers.filter(member => member.id !== id);\n        setTeamMembers(updatedMembers);\n        localStorage.setItem('paceterminal-team-backup', JSON.stringify(updatedMembers));\n        const entityId = selectedToken?.contractAddress || 'global';\n        try {\n          await stateClient.updateEntity('team', entityId, {\n            members: updatedMembers,\n            lastUpdated: new Date().toISOString()\n          });\n          console.log(\"Team member deleted successfully\");\n        } catch (error) {\n          console.error(\"Error deleting team member:\", error);\n          alert(\"Failed to delete team member from database, but removed from local view.\");\n        }\n      } catch (error) {\n        console.error(\"Error in delete operation:\", error);\n        alert(\"Failed to delete team member. Please try again.\");\n      }\n    };\n    const handleAddTeamMember = async () => {\n      if (!name.trim()) {\n        alert('Name is required');\n        return;\n      }\n      setIsSubmitting(true);\n      const newMember = {\n        id: Date.now().toString(),\n        name: name.trim(),\n        role: role,\n        bio: bio.trim(),\n        twitter: twitter.trim(),\n        imageUrl: imageUrl.trim(),\n        ...(role === 'Developer' && {\n          previousProjects: previousProjects.trim(),\n          accountMutual: accountMutual.trim(),\n          commitment: commitment.trim()\n        })\n      };\n      const updatedMembers = [...teamMembers, newMember];\n      setTeamMembers(updatedMembers);\n      localStorage.setItem('paceterminal-team-backup', JSON.stringify(updatedMembers));\n      try {\n        const entityId = selectedToken?.contractAddress || 'global';\n        try {\n          await stateClient.updateEntity('team', entityId, {\n            members: updatedMembers,\n            lastUpdated: new Date().toISOString()\n          });\n          console.log(\"Team members updated successfully for:\", entityId);\n        } catch (updateError) {\n          console.log(\"Team doesn't exist yet, creating new:\", updateError.message);\n          try {\n            await stateClient.createEntity('team', {\n              id: entityId,\n              members: updatedMembers,\n              lastUpdated: new Date().toISOString()\n            });\n            console.log(\"Team members created successfully for:\", entityId);\n          } catch (createError) {\n            console.error(\"Failed to create team entity:\", createError);\n            throw createError;\n          }\n        }\n        resetForm();\n      } catch (error) {\n        console.error(\"Error saving team member:\", error);\n        alert(\"Failed to save team member. Please try again.\");\n      } finally {\n        setIsSubmitting(false);\n      }\n    };\n    return <div className=\"bg-white p-6 rounded-lg shadow-sm border border-gray-200\">\n        <div className=\"flex justify-between items-center mb-6\">\n          <h2 className=\"text-xl font-bold flex items-center\">\n            <UsersIcon className=\"mr-2 text-blue-500\" size={24} />\n            Team Members\n          </h2>\n          \n          {isAdmin && creatorMode && !showForm && <button onClick={() => setShowForm(true)} className=\"flex items-center px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700\">\n              <Plus size={16} className=\"mr-1\" />\n              Add Member\n            </button>}\n        </div>\n        \n        {isLoading ? <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n            <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n            <span className=\"text-gray-700 font-medium\">Sabar Nggih...</span>\n          </div> : <>\n            {isAdmin && creatorMode && showForm && <div className=\"mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg\">\n            <div className=\"flex justify-between items-center mb-4\">\n                <h3 className=\"text-lg font-medium text-blue-800\">\n                  Add Team Member\n                </h3>\n                <button onClick={resetForm} className=\"text-gray-500 hover:text-gray-700 p-1 rounded\">\n                  <X size={18} />\n                </button>\n              </div>\n              \n              <div className=\"space-y-4\">\n                <div>\n                  <label htmlFor=\"memberName\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Name*\n                  </label>\n                  <input id=\"memberName\" type=\"text\" value={name} onChange={e => setName(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded\" placeholder=\"Enter name\" required />\n                </div>\n                \n                <div>\n                  <label htmlFor=\"memberRole\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Role\n                  </label>\n                  <select id=\"memberRole\" value={role} onChange={e => setRole(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded\">\n                    <option value=\"Team\">Team</option>\n                    <option value=\"Developer\">Developer</option>\n                    <option value=\"Advisor\">Advisor</option>\n                    <option value=\"Investor\">Investor</option>\n                    <option value=\"Community Manager\">Community Manager</option>\n                  </select>\n                </div>\n                \n                {role === 'Developer' && <div className=\"border-t border-gray-200 mt-4 pt-4 space-y-4\">\n                    <div className=\"text-sm font-medium text-blue-600\">Developer-specific Information</div>\n                    <div>\n                      <label htmlFor=\"previousProjects\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                        Previous Projects\n                      </label>\n                      <textarea id=\"previousProjects\" value={previousProjects} onChange={e => setPreviousProjects(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded h-20\" placeholder=\"List previous projects developed by this person\" />\n                    </div>\n                    <div>\n                      <label htmlFor=\"accountMutual\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                        Account Mutual\n                      </label>\n                      <textarea id=\"accountMutual\" value={accountMutual} onChange={e => setAccountMutual(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded h-20\" placeholder=\"Mutual connections and accounts\" />\n                    </div>\n                    <div>\n                      <label htmlFor=\"commitment\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                        Commitment\n                      </label>\n                      <textarea id=\"commitment\" value={commitment} onChange={e => setCommitment(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded\" placeholder=\"Commitment level to the project (e.g., Full-time, 80%)\" />\n                    </div>\n                  </div>}\n                \n                <div>\n                  <label htmlFor=\"memberImageUrl\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Profile Image URL\n                  </label>\n                  <input id=\"memberImageUrl\" type=\"text\" value={imageUrl} onChange={e => setImageUrl(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded\" placeholder=\"https://example.com/image.jpg\" />\n                  {imageUrl && <div className=\"mt-2 p-2 border border-gray-200 rounded bg-gray-50\">\n                      <p className=\"text-xs text-gray-500 mb-1\">Preview:</p>\n                      <img src={imageUrl} alt=\"Profile preview\" className=\"w-16 h-16 object-cover rounded-full border border-gray-300\" onError={e => {\n                  e.target.src = \"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\";\n                  e.target.className += \" p-2\";\n                }} />\n                    </div>}\n                </div>\n                \n                <div>\n                  <label htmlFor=\"memberTwitter\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Twitter Handle\n                  </label>\n                  <div className=\"flex\">\n                    <span className=\"inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-r-0 border-gray-300 rounded-l-md\">\n                      @\n                    </span>\n                    <input id=\"memberTwitter\" type=\"text\" value={twitter} onChange={e => setTwitter(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded-r\" placeholder=\"username (without @)\" />\n                  </div>\n                </div>\n                \n                <div>\n                  <label htmlFor=\"memberBio\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Bio\n                  </label>\n                  <textarea id=\"memberBio\" value={bio} onChange={e => setBio(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded h-24\" placeholder=\"Brief description of this team member\" />\n                </div>\n              </div>\n              \n              <div className=\"flex space-x-3 mt-4\">\n                <button onClick={resetForm} className=\"px-3 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-50\">\n                  Cancel\n                </button>\n                <button onClick={handleAddTeamMember} className=\"px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" disabled={!name.trim() || isSubmitting}>\n                  {isSubmitting ? <>\n                      <RefreshCw size={16} className=\"mr-2 animate-spin\" />\n                      Saving...\n                    </> : <>\n                      <Save size={16} className=\"mr-2\" />\n                      Add Member\n                    </>}\n                </button>\n              </div>\n            </div>}\n        \n        {teamMembers.length > 0 ? <div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6\">\n                {teamMembers.map(member => <div key={member.id} className=\"group bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1\">\n                    {isAdmin && creatorMode && <button onClick={() => handleDeleteTeamMember(member.id)} className=\"absolute top-2 right-2 z-10 p-1.5 bg-red-600 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:bg-red-700 shadow-sm\" title=\"Delete team member\">\n                        <Trash2 size={14} />\n                      </button>}\n                    <div className=\"relative h-48 bg-gradient-to-br from-blue-100 to-gray-100 overflow-hidden\">\n                      {member.imageUrl ? <img src={member.imageUrl} alt={member.name} className=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\" onError={e => {\n                e.target.onerror = null;\n                e.target.src = \"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\";\n                e.target.className = \"w-full h-full object-contain p-8\";\n              }} /> : <div className=\"absolute inset-0 flex items-center justify-center\">\n                          <div className=\"w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center text-3xl font-bold text-gray-400\">\n                            {member.name.charAt(0)}\n                          </div>\n                        </div>}\n                      <div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-gray-900 to-transparent p-4 pt-8\">\n                        <div className=\"flex justify-between items-center\">\n                          <h3 className=\"font-bold text-lg text-white\">{member.name}</h3>\n                          <span className=\"text-xs bg-white/90 px-3 py-1 rounded-full text-gray-800 font-medium\">\n                            {member.role}\n                          </span>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"p-4\">\n                      {member.twitter && <a href={`https://twitter.com/${member.twitter}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-blue-500 flex items-center text-sm mb-3 hover:text-blue-700 transition-colors\">\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"w-4 h-4 mr-1\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                            <path d=\"M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z\" />\n                          </svg>\n                          @{member.twitter}\n                        </a>}\n                      <p className=\"text-gray-700 text-sm leading-relaxed\">\n                        {member.bio || \"Team member of the project.\"}\n                      </p>\n                      \n                      {member.role === 'Developer' && <div className=\"mt-3 pt-3 border-t border-gray-100\">\n                          <button onClick={e => {\n                  e.stopPropagation();\n                  setSelectedDeveloper(member);\n                }} className=\"text-blue-600 text-sm font-medium flex items-center hover:text-blue-800\">\n                            <ExternalLink size={14} className=\"mr-1\" />\n                            See Developer Details\n                          </button>\n                        </div>}\n                    </div>\n                  </div>)}\n              </div> : <div className=\"flex flex-col items-center justify-center py-8 text-center\">\n                <div className=\"bg-gray-100 p-4 rounded-full mb-4\">\n                  <Users size={24} className=\"text-gray-400\" />\n                </div>\n                <h3 className=\"text-lg font-medium mb-2\">\n                  No Team Members\n                </h3>\n                <p className=\"text-gray-600 max-w-md mb-4\">\n                  {isAdmin && creatorMode ? \"Add your first team member to get started.\" : \"No team members have been added yet.\"}\n                </p>\n                {isAdmin && creatorMode && <button onClick={() => setShowForm(true)} className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\">\n                    <Plus size={16} className=\"mr-2\" />\n                    Add Team Member\n                  </button>}\n              </div>}\n          </>}\n      </div>;\n  };\n  const NotesAIAssistant = ({\n    notesContent,\n    onClose\n  }) => {\n    const allPostsContent = posts.map(post => `Judul: ${post.title}\\nTanggal: ${new Date(post.created).toLocaleDateString('id-ID')}\\nKonten: ${post.content}\\n`).join('\\n---\\n');\n    const systemPrompt = `\nKamu adalah Semar, asisten pribadi yang berasal dari mitologi Jawa, penuh kebijaksanaan dan ketenangan.\nKamu memiliki akses ke catatan pribadi pengguna:\n\"\"\"\n${notesContent || \"Pengguna belum menulis catatan apapun.\"}\n\"\"\"\nDan semua berita di PaceTerminal:\n\"\"\"\n${allPostsContent || \"Belum ada berita yang tersedia di PaceTerminal.\"}\n\"\"\"\nSebagai asisten pribadi, tugasmu:\n- Menjawab dengan ringkas, tepat, dan akurat\n- Membantu mencari dan mengorganisir informasi dari catatan dan berita\n- Memberi jawaban dengan sentuhan bahasa Jawa yang sopan (seperti \"nggih\", \"monggo\", \"sampun\")\n- Menjaga ketenangan dalam setiap jawaban\nPanduan menjawab:\n- Berikan jawaban singkat namun informatif\n- Untuk berita, fokus pada fakta utama dan bantu menemukan berita yang relevan\n- Untuk catatan pribadi, bantu mengorganisir dan menemukan informasi penting\n- Jika informasi tidak ada, jawab dengan jujur dan singkat\n- Gunakan kata-kata menenangkan dan bahasa Jawa yang sopan secara wajar\nSelalu jaga privasi pengguna dan berikan ketenangan dalam setiap interaksi.\n`;\n    const messageContainerRef = useRef(null);\n    const inputRef = useRef(null);\n    const {\n      messages,\n      input,\n      handleInputChange,\n      handleSubmit,\n      isLoading\n    } = useChat({\n      api: 'https://chat.dev.fun/chat/4b25487a985cd10e8c60',\n      initialMessages: [{\n        id: 'system',\n        role: 'system',\n        content: systemPrompt\n      }],\n      onError: error => {\n        console.error(\"Semar AI error:\", error);\n      }\n    });\n    const visibleMessages = messages.filter(message => message.role !== 'system');\n    useEffect(() => {\n      if (messageContainerRef.current) {\n        messageContainerRef.current.scrollTop = messageContainerRef.current.scrollHeight;\n      }\n    }, [visibleMessages.length]);\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.focus();\n      }\n    }, []);\n    return <div className=\"fixed bottom-4 right-4 bg-white rounded-xl shadow-2xl border border-gray-200 w-[350px] z-50\">\n        <div className=\"p-3 flex justify-between items-center bg-white rounded-t-xl border-b border-gray-200\">\n          <h3 className=\"font-bold text-gray-800 text-base flex items-center\">\n            <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-5 h-5 mr-2\" />\n            Semar AI\n          </h3>\n          <button onClick={onClose} className=\"p-1 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors\">\n            <X size={18} />\n          </button>\n        </div>\n        <div ref={messageContainerRef} className=\"max-h-80 overflow-y-auto p-3 bg-white\">\n          {visibleMessages.length === 0 ? <div className=\"text-center p-4 bg-white rounded-lg border border-gray-200\">\n              <div className=\"mx-auto mb-3\">\n                <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-16 h-16\" />\n              </div>\n              <p className=\"text-sm font-medium text-gray-800 mb-2\">\n                Monggo, pripun nggih? Ada yang bisa Semar bantu?\n              </p>\n              <p className=\"text-xs text-gray-600\">\n                Saya bisa membantu Anda dengan catatan atau berita di PaceTerminal\n              </p>\n            </div> : <div className=\"space-y-3\">\n              {visibleMessages.map(message => <div key={message.id} className={`p-2 rounded-lg text-sm ${message.role === 'user' ? 'bg-gray-100 ml-8 border border-gray-200 text-gray-800' : 'bg-gray-100 mr-8 border border-gray-200 text-gray-800'}`}>\n                  {message.role === 'assistant' && <div className=\"flex items-start\">\n                      <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-4 h-4 mr-2\" />\n                      <div className=\"whitespace-pre-wrap font-medium\">{message.content}</div>\n                    </div>}\n                  {message.role === 'user' && <div className=\"flex justify-end\">\n                      <div className=\"whitespace-pre-wrap font-medium\">{message.content}</div>\n                    </div>}\n                </div>)}\n              {isLoading && <div className=\"p-2 rounded-lg bg-gray-100 mr-8 border border-gray-200\">\n                  <div className=\"flex items-start\">\n                    <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-4 h-4 mr-2\" />\n                    <div className=\"flex space-x-1\">\n                      <div className=\"w-2 h-2 bg-gray-500 rounded-full animate-pulse\" style={{\n                  animationDelay: '0ms'\n                }}></div>\n                      <div className=\"w-2 h-2 bg-gray-700 rounded-full animate-pulse\" style={{\n                  animationDelay: '300ms'\n                }}></div>\n                      <div className=\"w-2 h-2 bg-gray-500 rounded-full animate-pulse\" style={{\n                  animationDelay: '600ms'\n                }}></div>\n                    </div>\n                  </div>\n                </div>}\n            </div>}\n        </div>\n        <div className=\"p-3 border-t border-gray-200 bg-white rounded-b-xl\">\n          <form onSubmit={handleSubmit} className=\"flex items-center space-x-2\">\n            <input ref={inputRef} type=\"text\" value={input} onChange={handleInputChange} placeholder=\"Tanya Semar...\" className=\"flex-1 p-2 text-sm bg-white text-gray-800 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent placeholder-gray-400 font-medium\" autoFocus />\n            <button type=\"submit\" className={`p-2 rounded-lg ${isLoading ? 'bg-gray-200 text-gray-400' : 'bg-gray-700 text-white hover:bg-gray-800'} shadow-lg`} disabled={isLoading || !input.trim()}>\n              {isLoading ? <RefreshCw size={16} className=\"animate-spin\" /> : <Send size={16} />}\n            </button>\n          </form>\n          <p className=\"text-xs text-gray-500 text-center mt-2 font-medium\">\n            Your Personal Assistant\n          </p>\n        </div>\n      </div>;\n  };\n  const LoadingScreen = () => <div className=\"fixed inset-0 bg-[#f8f3e3] flex flex-col items-center justify-center z-50 transition-opacity duration-1000\" style={{\n    opacity: isLoading ? 1 : 0,\n    pointerEvents: isLoading ? 'auto' : 'none'\n  }}>\n      <div className=\"relative\">\n        <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar\" className=\"w-32 h-32 mb-4 animate-pulse\" style={{\n        animation: \"pulse 2s infinite ease-in-out\"\n      }} />\n        <div className=\"absolute -bottom-2 left-0 right-0 h-4 bg-[#f8f3e3] blur-sm\"></div>\n      </div>\n      <h1 className=\"text-5xl font-bold text-gray-800 tracking-widest mb-4 animate-fadeIn\">\n        MONGGO\n      </h1>\n      <div className=\"flex space-x-3 mt-4\">\n        <div className=\"w-3 h-3 rounded-full bg-gray-800 animate-bounce\" style={{\n        animationDelay: \"0ms\"\n      }}></div>\n        <div className=\"w-3 h-3 rounded-full bg-gray-800 animate-bounce\" style={{\n        animationDelay: \"300ms\"\n      }}></div>\n        <div className=\"w-3 h-3 rounded-full bg-gray-800 animate-bounce\" style={{\n        animationDelay: \"600ms\"\n      }}></div>\n      </div>\n      <style jsx>{`\n        @keyframes pulse {\n          0%, 100% { transform: scale(1); }\n          50% { transform: scale(1.1); }\n        }\n        @keyframes fadeIn {\n          from { opacity: 0; transform: translateY(10px); }\n          to { opacity: 1; transform: translateY(0); }\n        }\n        .animate-fadeIn {\n          animation: fadeIn 1s ease-out forwards;\n        }\n      `}</style>\n    </div>;\n  useEffect(() => {\n    const handleUserInteraction = () => {\n      markUserInteraction();\n    };\n    document.addEventListener('mousedown', handleUserInteraction);\n    document.addEventListener('keydown', handleUserInteraction);\n    document.addEventListener('touchstart', handleUserInteraction);\n    document.addEventListener('scroll', handleUserInteraction);\n    return () => {\n      document.removeEventListener('mousedown', handleUserInteraction);\n      document.removeEventListener('keydown', handleUserInteraction);\n      document.removeEventListener('touchstart', handleUserInteraction);\n      document.removeEventListener('scroll', handleUserInteraction);\n      if (interactionTimeoutRef.current) {\n        clearTimeout(interactionTimeoutRef.current);\n      }\n    };\n  }, []);\n  return <div className=\"h-screen w-screen overflow-hidden bg-gray-50 text-gray-900\">\n      <LoadingScreen />\n      \n      <div className=\"flex w-full h-full\">\n        <AdsSlot2 isAdmin={isAdmin} />\n        \n        <div className=\"flex flex-col flex-1 min-w-0\">\n      {isAddingToken && <TokenForm />}\n      {selectedDeveloper && <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\" onClick={() => setSelectedDeveloper(null)}>\n          <div className=\"bg-white rounded-lg overflow-hidden shadow-lg w-full max-w-lg\" onClick={e => e.stopPropagation()}>\n            <div className=\"p-4 bg-gray-800 text-white flex justify-between items-center\">\n              <h2 className=\"text-xl font-bold\">{selectedDeveloper.name} - Developer Profile</h2>\n              <button onClick={() => setSelectedDeveloper(null)} className=\"p-1 rounded-full hover:bg-gray-700\">\n                <X size={20} />\n              </button>\n            </div>\n            <div className=\"p-4\">\n              <div className=\"mb-4 border-b pb-2\">\n                <h3 className=\"font-bold mb-2\">Previous Projects</h3>\n                <p className=\"whitespace-pre-wrap\">{selectedDeveloper.previousProjects || `${selectedDeveloper.name} is known for developing cutting-edge blockchain applications.`}</p>\n              </div>\n              <div className=\"mb-4 border-b pb-2\">\n                <h3 className=\"font-bold mb-2\">Account Mutual</h3>\n                <p className=\"whitespace-pre-wrap\">{selectedDeveloper.accountMutual || \"Successful launches: 4+\\nYears of experience: 5+\\nTrusted by top projects in the space\"}</p>\n              </div>\n              <div className=\"mb-4 border-b pb-2\">\n                <h3 className=\"font-bold mb-2\">Commitment</h3>\n                <p className=\"whitespace-pre-wrap\">{selectedDeveloper.commitment || \"90% committed to the project\"}</p>\n              </div>\n              <div>\n                <h3 className=\"font-bold mb-2\">Network</h3>\n                <p>Connected with major projects and developers in the ecosystem</p>\n              </div>\n            </div>\n            <div className=\"p-4 bg-gray-100 flex justify-end\">\n              <button onClick={() => setSelectedDeveloper(null)} className=\"px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-900\">\n                Close\n              </button>\n            </div>\n          </div>\n        </div>}\n      {showLoginModal && <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\">\n          <div className=\"bg-white rounded-lg p-6 max-w-md w-full\">\n            <div className=\"flex justify-between items-center mb-4\">\n              <h2 className=\"text-xl font-serif font-bold\">Admin Login</h2>\n              <button onClick={() => setShowLoginModal(false)} className=\"text-gray-500 hover:text-gray-700\">\n                <X size={20} />\n              </button>\n            </div>\n            <form onSubmit={handleLogin} className=\"space-y-4\">\n              {loginError && <div className=\"p-2 bg-red-50 text-red-600 text-sm rounded\">\n                  {loginError}\n                </div>}\n              <div>\n                <label htmlFor=\"username\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Username\n                </label>\n                <input id=\"username\" type=\"text\" value={loginUsername} onChange={e => setLoginUsername(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" required />\n              </div>\n              <div>\n                <label htmlFor=\"password\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Password\n                </label>\n                <input id=\"password\" type=\"password\" value={loginPassword} onChange={e => setLoginPassword(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" required />\n              </div>\n              <div className=\"flex justify-end\">\n                <button type=\"submit\" className=\"px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700\">\n                  Login\n                </button>\n              </div>\n            </form>\n          </div>\n        </div>}\n      {showKeyboardHelp && <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\" onClick={() => setShowKeyboardHelp(false)}>\n          <div className=\"bg-white rounded-lg p-6 max-w-xl w-full\" onClick={e => e.stopPropagation()}>\n            <div className=\"flex justify-between items-center mb-4\">\n              <h2 className=\"text-xl font-serif font-bold flex items-center\">\n                <Keyboard size={24} className=\"mr-2\" />\n                Keyboard Shortcuts\n              </h2>\n              <button onClick={() => setShowKeyboardHelp(false)} className=\"text-gray-500 hover:text-gray-700\">\n                <X size={20} />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-2 gap-x-8 gap-y-3\">\n              {keyboardShortcuts.map((shortcut, index) => <div key={index} className=\"flex items-center\">\n                  <div className=\"bg-gray-100 rounded px-2 py-1 font-mono text-sm font-bold mr-3 min-w-[32px] text-center\">\n                    {shortcut.key}\n                  </div>\n                  <div className=\"text-gray-700\">{shortcut.description}</div>\n                </div>)}\n            </div>\n            <p className=\"mt-6 text-sm text-gray-500\">Press ? anytime to show/hide this dialog</p>\n          </div>\n        </div>}\n      <header className=\"bg-white border-b border-gray-200 z-10 flex-shrink-0\">\n        <div className=\"max-w-screen-2xl w-full mx-auto p-2 md:p-3\">\n          <div className=\"flex items-baseline justify-center relative\">\n          {}\n          <div onClick={handleLogoClick} className=\"flex flex-col items-center group cursor-pointer w-full\">\n                <h1 className=\"text-5xl md:text-7xl font-bold tracking-tight group-hover:text-gray-800 transition-all duration-300 text-center logo-hover\" style={{\n                  fontFamily: 'Verdana, Arial, sans-serif',\n                  letterSpacing: '0.08em',\n                  fontWeight: '900',\n                  textTransform: 'uppercase',\n                  textShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'\n                }}>\n                  PACETERMINAL\n                </h1>\n                <style jsx>{`\n                  .logo-hover:hover {\n                    transform: scale(1.01) !important;\n                    letter-spacing: 0.085em;\n                  }\n                `}</style>\n                <div className=\"my-2\"></div>\n                  {}\n                <style jsx>{`\n                  @keyframes blink {\n                    0%, 100% { opacity: 1; }\n                    50% { opacity: 0; }\n                  }\n                  .animate-blink {\n                    animation: blink 1s step-end infinite;\n                  }\n                `}</style>\n              </div>\n            <div className=\"flex items-center space-x-3 absolute right-4 top-4\">\n              <button onClick={() => setShowNotesSidebar(true)} className=\"bg-white rounded-md border-[1px] border-gray-300 shadow-[0_0_15px_rgba(0,0,0,0.1)] px-4 py-2 text-gray-800 hover:bg-gray-50 flex items-center transition-all duration-300\" title=\"Cathetan\">\n                <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-5 h-5 mr-2\" />\n                <span className=\"text-sm font-bold\">CATHETAN</span>\n              </button>\n              {isAdmin && <div className=\"flex items-center\">\n                  <span className={`mr-1 text-xs font-medium ${creatorMode ? 'text-gray-900' : 'text-gray-500'}`}>\n                    <Edit size={14} className=\"inline mr-0.5\" />\n                    Edit\n                  </span>\n                  <label className=\"relative inline-flex items-center cursor-pointer\">\n                    <input type=\"checkbox\" value=\"\" className=\"sr-only peer\" checked={!creatorMode} onChange={() => setCreatorMode(!creatorMode)} />\n                    <div className=\"w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600\"></div>\n                  </label>\n                  <span className={`ml-1 text-xs font-medium ${!creatorMode ? 'text-gray-900' : 'text-gray-500'}`}>\n                    <Eye size={14} className=\"inline mr-0.5\" />\n                    View\n                  </span>\n                </div>}\n              <button onClick={() => setShowKeyboardHelp(true)} className=\"ml-2 p-1 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100\" title=\"Keyboard shortcuts\">\n                <HelpCircle size={16} />\n              </button>\n              \n              {isAdmin && !isAdding && !isEditing && !isAddingToken && creatorMode && <button onClick={() => setIsAddingToken(true)} className=\"flex items-center px-2 py-1 text-xs text-white bg-gray-700 rounded hover:bg-gray-800 border border-gray-600 shadow-sm\">\n                  <Plus size={12} className=\"mr-1\" />\n                  Add Token\n                </button>}\n              {isAdmin && <div className=\"flex flex-col items-end\">\n                  <button onClick={handleLogout} className=\"flex items-center px-2 py-1 text-xs text-red-600 bg-red-50 rounded hover:bg-red-100\">\n                    <LogOut size={12} className=\"mr-1\" />\n                    Logout\n                  </button>\n                  <div className=\"mt-1 px-3 py-1 rounded bg-gray-800 text-gray-300 flex items-center text-xs\">\n                    {isTerminalMode ? <>\n                        <span className=\"font-mono mr-1 text-xs text-gray-400 animate-pulse\">{\"%\"}</span>\n                        <span className=\"text-xs font-medium\">{creatorMode ? \"Creator Mode\" : \"Viewer Mode\"}</span>\n                      </> : <>\n                        <span className=\"font-mono mr-1 text-xs text-gray-400\">{\">\"}</span>\n                        <span className=\"text-xs font-medium\">{creatorMode ? \"Creator Mode\" : \"Viewer Mode\"}</span>\n                      </>}\n                  </div>\n                </div>}\n            </div>\n          </div>\n          <div className=\"relative py-2 mt-4\">\n            <div className=\"absolute top-0 left-0 right-0 h-px bg-gray-300\"></div>\n            <div className=\"absolute bottom-0 left-0 right-0 h-px bg-gray-300\"></div>\n            <div className=\"flex justify-center items-center\">\n              <div onClick={() => setShowCalendar(true)} className=\"text-sm text-gray-700 font-bold px-4 bg-white cursor-pointer hover:scale-110 transition-transform duration-200 flex items-center\">\n                <Calendar size={14} className=\"mr-1.5\" />\n                {currentDate}\n              </div>\n            </div>\n          </div>\n        </div>\n      </header>\n      <main className=\"flex-grow overflow-auto w-full h-full\">\n        <div className=\"max-w-screen-2xl mx-auto p-1 md:p-2 h-full\">\n          {showCalendar ? <CalendarView selectedDate={selectedCalendarDate} setSelectedDate={setSelectedCalendarDate} viewMonth={viewMonth} setViewMonth={setViewMonth} onClose={() => setShowCalendar(false)} /> : <TerminalView />}\n        </div>\n      </main>\n    <footer className=\"border-t border-gray-200\">\n        <div className=\"max-w-screen-2xl w-full mx-auto py-1 px-3 text-gray-500 text-xs\">\n          <div className=\"flex justify-between items-center\">\n            <div className=\"flex items-center\">\n              <span>PACETERMINAL - Hong Wilaheng Sekareng Bawono Langgeng</span>\n            </div>\n          {!isAdmin && <button onClick={() => setShowLoginModal(true)} className=\"text-gray-400 hover:text-gray-600 flex items-center text-xs bg-gray-800 px-2 py-1 rounded-sm border border-gray-700 shadow-sm\" title=\"Admin Login\">\n                <Lock size={10} className=\"mr-1\" />\n                Admin\n              </button>}\n          </div>\n        </div>\n      </footer>\n        </div>\n      </div>\n      {isAdmin && <div className={`fixed bottom-4 right-4 px-4 py-2 bg-white border-2 border-gray-400 rounded-md shadow-lg transition-opacity duration-300 ${creatorMode ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>\n          <div className=\"flex items-center text-sm font-medium\">\n            <Edit size={16} className=\"mr-2 text-blue-600\" />\n            Creator Mode Active\n          </div>\n        </div>}\n      {}\n      <div className={`fixed top-0 right-0 h-full w-96 bg-white border-l border-gray-200 shadow-2xl transform transition-transform duration-300 ease-in-out z-50 ${showNotesSidebar ? 'translate-x-0' : 'translate-x-full'}`}>\n        <div className=\"flex flex-col h-full\">\n          <div className=\"p-5 border-b border-gray-200 flex justify-between items-center bg-white\">\n            <h3 className=\"font-bold text-gray-800 text-xl flex items-center\">\n              <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-6 h-6 mr-3\" />\n              Cathetan\n            </h3>\n            <button onClick={() => setShowNotesSidebar(false)} className=\"p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors\">\n              <X size={24} />\n            </button>\n          </div>\n          <div className=\"flex-grow p-5 overflow-y-auto bg-gray-50\">\n            <textarea ref={notesTextareaRef} value={notesContent} onChange={e => setNotesContent(e.target.value)} className=\"w-full h-full p-4 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none font-sans text-base text-gray-800\" placeholder=\"Ketik catatan pribadi Anda di sini...\" />\n          </div>\n          <div className=\"p-5 border-t border-gray-200 bg-white\">\n            <div className=\"mb-3\">\n              <div className=\"text-sm text-gray-600 mb-3 font-medium\">\n                {notesLastSaved ? <>Terakhir disimpan: {notesLastSaved.toLocaleTimeString('id-ID', {\n                  hour: '2-digit',\n                  minute: '2-digit'\n                })}</> : <>Belum disimpan</>}\n              </div>\n              <div className=\"flex flex-col space-y-3 w-full\">\n                <button onClick={() => setShowAIAssistant(!showAIAssistant)} className=\"px-4 py-3 bg-gray-700 text-white rounded-lg hover:bg-gray-800 flex items-center w-full justify-center shadow-lg font-medium text-base\">\n                  <img src=\"https://cdn.dev.fun/asset/4b25487a985cd10e8c60/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-5 h-5 mr-2\" />\n                  Tanya Semar AI\n                </button>\n                <button onClick={saveUserNotes} className=\"px-4 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-900 flex items-center w-full justify-center disabled:opacity-50 shadow-lg font-medium text-base\" disabled={isSavingNotes}>\n                  {isSavingNotes ? <>\n                    <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                    Menyimpan...\n                  </> : <>\n                    <Save size={18} className=\"mr-2\" />\n                    Simpan\n                  </>}\n                </button>\n              </div>\n            </div>\n            <p className=\"text-sm text-gray-600 italic\">\n              Catatan Anda bersifat pribadi dan hanya dapat diakses dari perangkat Anda.\n            </p>\n            <p className=\"text-sm text-gray-500 text-center mt-3 font-medium\">\n              Your Personal Note\n            </p>\n          </div>\n        </div>\n      </div>\n      {showAIAssistant && <NotesAIAssistant key={posts.length} notesContent={notesContent} onClose={() => setShowAIAssistant(false)} />}\n    </div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"recharts\":\"2.8.0\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"@devfunlabs/state-client\":\"0.8.1\",\"zod\":\"3.22.4\",\"socket.io-client\":\"4.7.5\",\"framer-motion\":\"10.16.4\",\"react-router-dom\":\"6.18.0\",\"ai\":\"4.0.0\"}}","token",{"_18":19,"_83":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":62,"_96":62,"_75":76},"symbol","PACE","price",0.0001564,"marketcap",181631.7159245,"image","https://pump.mypinata.cloud/ipfs/QmccXMuhGnL4Ljrsz5FM4zbwKMnju7CzrHej5pbU2fjvpg?img-width=256&img-dpr=2","website","https://dev.fun/p/4b25487a985cd10e8c60","twitter","https://x.com/PaceTerminal","devCount","appCount","upstreamApp",{"_14":99,"_36":100,"_38":101,"_102":103,"_18":104,"_20":105,"_22":106,"_75":107,"_108":109,"_110":111,"_34":112,"_42":43,"_44":113,"_114":115,"_116":-5,"_117":17,"_26":25,"_73":25,"_74":25,"_118":17,"_119":25,"_120":25,"_57":121,"_59":122,"_61":43,"_63":123,"_69":60,"_66":43,"_65":60,"_124":47,"_125":-5,"_40":126,"_127":128,"_148":17,"_24":17,"_68":43,"_27":149},"774938c22498019d9f53",["D",1747288213163],["D",1749238655058],"template","web","Pace Terminal","Your personal publishing empire with Bloomberg-style elegance but zero competition. Create, edit, and curate your own newspaper with pristine white backgrounds and minimalist controls that put the focus entirely on your content.","Your exclusive one-person Bloomberg where you're the only journalist, editor, and publisher.","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","snapshot","https://cdn.dev.fun/snapshot/774938c22498019d9f53/73112_3162ff7f.webp","ogImage","https://cdn.dev.fun/og/image/774938c22498019d9f53/94109c19.webp","https://cdn.dev.fun/app/774938c22498019d9f53/73112",55,"featureScore","0","devbaseSchema","isAutomated","isTagHot","isTagMoney","isTagCrown",328,2,409,"userId","upstreamAppId",["B","73112"],"lastCommit",{"_14":126,"_36":129,"_130":131,"_132":133,"_77":134,"_79":135,"_136":137,"_138":139,"_140":133,"_108":109,"_34":112,"_141":17,"_142":17,"_143":25,"_102":103,"_144":-5,"_116":-5,"_145":-5,"_6":99,"_124":47,"_146":147},["D",1748879159031],"input","ok now for article section, use better format for the reader, then eneabling admin to insert an image in the middle of artifcle, dont changed the sterd function or hosting function, just what i want","output","<<<<<<< OLD\n  const ArticlesView = ({\n    token\n  }) => {\n    const [isAddingArticle, setIsAddingArticle] = useState(false);\n    const [editingArticleId, setEditingArticleId] = useState(null);\n    const [selectedArticle, setSelectedArticle] = useState(null);\n    const [articleTitle, setArticleTitle] = useState('');\n    const [articleContent, setArticleContent] = useState('');\n    const [articleImage, setArticleImage] = useState('');\n    const [isSubmitting, setIsSubmitting] = useState(false);\n    const [articles, setArticles] = useState([]);\n    const [isLoading, setIsLoading] = useState(true);\n=======\n  const ArticlesView = ({\n    token\n  }) => {\n    const [isAddingArticle, setIsAddingArticle] = useState(false);\n    const [editingArticleId, setEditingArticleId] = useState(null);\n    const [selectedArticle, setSelectedArticle] = useState(null);\n    const [articleTitle, setArticleTitle] = useState('');\n    const [articleContent, setArticleContent] = useState('');\n    const [articleImage, setArticleImage] = useState('');\n    const [currentImageUrl, setCurrentImageUrl] = useState('');\n    const [cursorPosition, setCursorPosition] = useState(0);\n    const [isSubmitting, setIsSubmitting] = useState(false);\n    const [articles, setArticles] = useState([]);\n    const [isLoading, setIsLoading] = useState(true);\n    const contentRef = useRef(null);\n>>>>>>> NEW\n\n<<<<<<< OLD\n    if (selectedArticle) {\n      return <div className=\"bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden\">\n          <div className=\"flex justify-between items-center p-4 border-b border-gray-200\">\n            <button onClick={() => setSelectedArticle(null)} className=\"px-3 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 flex items-center text-sm\">\n              <ArrowLeft size={16} className=\"mr-1\" />\n              Back to Articles\n            </button>\n            \n            {isAdmin && creatorMode && <div className=\"flex space-x-2\">\n                <button onClick={() => handleEditArticle(selectedArticle)} className=\"p-1.5 bg-blue-100 text-blue-700 rounded hover:bg-blue-200\">\n                  <Edit2 size={16} />\n                </button>\n                <button onClick={() => handleDeleteArticle(selectedArticle.id)} className=\"p-1.5 bg-red-100 text-red-700 rounded hover:bg-red-200\">\n                  <Trash2 size={16} />\n                </button>\n              </div>}\n          </div>\n          \n          <div className=\"p-6\">\n            <h1 className=\"text-3xl font-serif font-bold mb-4\">{selectedArticle.title}</h1>\n            \n            <div className=\"flex items-center text-gray-600 mb-6\">\n              <span className=\"mr-3\">{formatDate(selectedArticle.createdAt)}</span>\n              <span>By {selectedArticle.author || 'Admin'}</span>\n            </div>\n            \n            {selectedArticle.image && <div className=\"mb-6\">\n                <img src={selectedArticle.image} alt={selectedArticle.title} className=\"w-full h-auto object-cover rounded-lg\" />\n              </div>}\n            \n            <div className=\"prose max-w-none\" style={{\n            whiteSpace: 'pre-wrap',\n            lineHeight: '1.8',\n            fontSize: '1.1rem'\n          }}>\n              {selectedArticle.content}\n            </div>\n          </div>\n        </div>;\n    }\n=======\n    if (selectedArticle) {\n      // Function to render content with embedded images\n      const renderContent = (content) => {\n        if (!content) return null;\n        \n        // Split content by image markers [img:URL]\n        const parts = content.split(/(\\[img:[^\\]]+\\])/g);\n        \n        return parts.map((part, index) => {\n          // Check if this part is an image marker\n          const imgMatch = part.match(/\\[img:([^\\]]+)\\]/);\n          if (imgMatch) {\n            const imgUrl = imgMatch[1];\n            return (\n              <div key={index} className=\"my-8 flex justify-center\">\n                <img \n                  src={imgUrl} \n                  alt=\"Article image\" \n                  className=\"max-w-full rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 object-contain max-h-[600px]\" \n                />\n              </div>\n            );\n          }\n          // Regular text\n          return part ? (\n            <div key={index} className=\"my-4 leading-relaxed\" style={{ whiteSpace: 'pre-wrap' }}>\n              {part}\n            </div>\n          ) : null;\n        });\n      };\n\n      return (\n        <article className=\"bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden\">\n          <div className=\"flex justify-between items-center p-4 border-b border-gray-200 bg-gray-50\">\n            <button \n              onClick={() => setSelectedArticle(null)} \n              className=\"px-3 py-1.5 bg-white text-gray-700 rounded-md hover:bg-gray-100 flex items-center text-sm shadow-sm border border-gray-200\"\n            >\n              <ArrowLeft size={16} className=\"mr-1\" />\n              Back to Articles\n            </button>\n            \n            {isAdmin && creatorMode && (\n              <div className=\"flex space-x-2\">\n                <button \n                  onClick={() => handleEditArticle(selectedArticle)} \n                  className=\"p-1.5 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 shadow-sm border border-blue-200\"\n                >\n                  <Edit2 size={16} />\n                </button>\n                <button \n                  onClick={() => handleDeleteArticle(selectedArticle.id)} \n                  className=\"p-1.5 bg-red-50 text-red-700 rounded-md hover:bg-red-100 shadow-sm border border-red-200\"\n                >\n                  <Trash2 size={16} />\n                </button>\n              </div>\n            )}\n          </div>\n          \n          <div className=\"max-w-3xl mx-auto px-6 py-8\">\n            {/* Featured image */}\n            {selectedArticle.image && (\n              <div className=\"mb-8 -mx-6 md:-mx-10\">\n                <img \n                  src={selectedArticle.image} \n                  alt={selectedArticle.title} \n                  className=\"w-full h-auto object-cover shadow-md\"\n                  style={{ maxHeight: \"500px\" }}\n                />\n              </div>\n            )}\n            \n            {/* Article title */}\n            <h1 className=\"text-4xl md:text-5xl font-serif font-bold mb-4 leading-tight\">{selectedArticle.title}</h1>\n            \n            {/* Article metadata */}\n            <div className=\"flex items-center text-gray-600 mb-8 pb-6 border-b border-gray-100\">\n              <span className=\"mr-3 font-medium\">{formatDate(selectedArticle.createdAt)}</span>\n              <span className=\"text-gray-500\">By {selectedArticle.author || 'Admin'}</span>\n            </div>\n            \n            {/* Article content */}\n            <div className=\"prose max-w-none text-lg text-gray-800\" style={{ lineHeight: '1.8' }}>\n              {renderContent(selectedArticle.content)}\n            </div>\n          </div>\n        </article>\n      );\n    }\n>>>>>>> NEW\n\n<<<<<<< OLD\n    if (isAddingArticle) {\n      return <div className=\"bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden\">\n          <div className=\"flex justify-between items-center p-4 border-b border-gray-200\">\n            <h2 className=\"text-xl font-bold\">{editingArticleId ? 'Edit Article' : 'Create New Article'}</h2>\n            <button onClick={resetArticleForm} className=\"p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded\">\n              <X size={20} />\n            </button>\n          </div>\n          \n          <div className=\"p-6\">\n            <div className=\"mb-4\">\n              <label htmlFor=\"articleTitle\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Title\n              </label>\n              <input id=\"articleTitle\" type=\"text\" value={articleTitle} onChange={e => setArticleTitle(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"Enter article title\" required />\n            </div>\n            \n            <div className=\"mb-4\">\n              <label htmlFor=\"articleImage\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Image URL (optional)\n              </label>\n              <input id=\"articleImage\" type=\"text\" value={articleImage} onChange={e => setArticleImage(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"https://example.com/image.jpg\" />\n            </div>\n            \n            <div className=\"mb-6\">\n              <label htmlFor=\"articleContent\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Content\n              </label>\n              <textarea id=\"articleContent\" value={articleContent} onChange={e => setArticleContent(e.target.value)} className=\"w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[300px]\" placeholder=\"Write your article content here...\" required />\n            </div>\n            \n            <div className=\"flex justify-end space-x-3\">\n              <button onClick={resetArticleForm} className=\"px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200\">\n                Cancel\n              </button>\n              <button onClick={handleAddArticle} className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" disabled={isSubmitting || !articleTitle.trim() || !articleContent.trim()}>\n                {isSubmitting ? <>\n                    <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                    Saving...\n                  </> : <>\n                    <Save size={18} className=\"mr-2\" />\n                    {editingArticleId ? 'Update Article' : 'Publish Article'}\n                  </>}\n              </button>\n            </div>\n          </div>\n        </div>;\n    }\n=======\n    // Insert image at cursor position in the content\n    const insertImageAtCursor = () => {\n      if (!currentImageUrl.trim()) return;\n      \n      const imageTag = `[img:${currentImageUrl}]`;\n      const newContent = \n        articleContent.substring(0, cursorPosition) + \n        imageTag + \n        articleContent.substring(cursorPosition);\n      \n      setArticleContent(newContent);\n      setCurrentImageUrl('');\n      \n      // Focus back to the content area\n      if (contentRef.current) {\n        contentRef.current.focus();\n        const newPosition = cursorPosition + imageTag.length;\n        contentRef.current.setSelectionRange(newPosition, newPosition);\n      }\n    };\n    \n    // Track cursor position in content textarea\n    const handleContentChange = (e) => {\n      setArticleContent(e.target.value);\n      setCursorPosition(e.target.selectionStart);\n    };\n    \n    // Remember cursor position when clicking in the textarea\n    const handleContentClick = (e) => {\n      setCursorPosition(e.target.selectionStart);\n    };\n    \n    // Remember cursor position when using keyboard in the textarea\n    const handleContentKeyUp = (e) => {\n      setCursorPosition(e.target.selectionStart);\n    };\n\n    if (isAddingArticle) {\n      return (\n        <div className=\"bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden\">\n          <div className=\"flex justify-between items-center p-4 border-b border-gray-200 bg-gray-50\">\n            <h2 className=\"text-xl font-bold\">{editingArticleId ? 'Edit Article' : 'Create New Article'}</h2>\n            <button onClick={resetArticleForm} className=\"p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full\">\n              <X size={20} />\n            </button>\n          </div>\n          \n          <div className=\"p-6\">\n            <div className=\"mb-4\">\n              <label htmlFor=\"articleTitle\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Title\n              </label>\n              <input \n                id=\"articleTitle\" \n                type=\"text\" \n                value={articleTitle} \n                onChange={e => setArticleTitle(e.target.value)} \n                className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" \n                placeholder=\"Enter article title\" \n                required \n              />\n            </div>\n            \n            <div className=\"mb-4\">\n              <label htmlFor=\"articleImage\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Featured Image URL (optional)\n              </label>\n              <input \n                id=\"articleImage\" \n                type=\"text\" \n                value={articleImage} \n                onChange={e => setArticleImage(e.target.value)} \n                className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" \n                placeholder=\"https://example.com/image.jpg\" \n              />\n              {articleImage && (\n                <div className=\"mt-2 p-2 border border-gray-200 rounded bg-gray-50\">\n                  <p className=\"text-xs text-gray-500 mb-1\">Featured Image Preview:</p>\n                  <img \n                    src={articleImage} \n                    alt=\"Featured image preview\" \n                    className=\"h-32 object-contain rounded border border-gray-300\" \n                    onError={e => {\n                      e.target.src = \"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\";\n                      e.target.className += \" p-2\";\n                    }} \n                  />\n                </div>\n              )}\n            </div>\n            \n            {/* Insert image in content */}\n            <div className=\"mb-4 p-4 bg-blue-50 border border-blue-100 rounded-lg\">\n              <div className=\"flex items-end\">\n                <div className=\"flex-1 mr-2\">\n                  <label htmlFor=\"inlineImageUrl\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Insert Image in Content\n                  </label>\n                  <input \n                    id=\"inlineImageUrl\" \n                    type=\"text\" \n                    value={currentImageUrl} \n                    onChange={e => setCurrentImageUrl(e.target.value)} \n                    className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" \n                    placeholder=\"https://example.com/inline-image.jpg\" \n                  />\n                </div>\n                <button \n                  onClick={insertImageAtCursor} \n                  className=\"px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\"\n                  disabled={!currentImageUrl.trim()}\n                >\n                  <ImageIcon size={16} className=\"mr-1\" />\n                  Insert at Cursor\n                </button>\n              </div>\n              <p className=\"text-xs text-gray-600 mt-2\">\n                Position your cursor in the content where you want the image to appear, then click \"Insert at Cursor\"\n              </p>\n            </div>\n            \n            <div className=\"mb-6\">\n              <label htmlFor=\"articleContent\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Content\n              </label>\n              <textarea \n                id=\"articleContent\" \n                ref={contentRef}\n                value={articleContent} \n                onChange={handleContentChange}\n                onClick={handleContentClick}\n                onKeyUp={handleContentKeyUp}\n                className=\"w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[300px] font-sans\"\n                placeholder=\"Write your article content here...\" \n                required \n              />\n            </div>\n            \n            <div className=\"flex justify-end space-x-3\">\n              <button onClick={resetArticleForm} className=\"px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200\">\n                Cancel\n              </button>\n              <button \n                onClick={handleAddArticle} \n                className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" \n                disabled={isSubmitting || !articleTitle.trim() || !articleContent.trim()}\n              >\n                {isSubmitting ? (\n                  <>\n                    <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                    Saving...\n                  </>\n                ) : (\n                  <>\n                    <Save size={18} className=\"mr-2\" />\n                    {editingArticleId ? 'Update Article' : 'Publish Article'}\n                  </>\n                )}\n              </button>\n            </div>\n          </div>\n        </div>\n      );\n    }\n>>>>>>> NEW\n\n<<<<<<< OLD\n    return <div className=\"bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden\">\n        <div className=\"flex justify-between items-center p-4 border-b border-gray-200\">\n          <h2 className=\"text-xl font-bold\">Articles</h2>\n          {isAdmin && creatorMode && <button onClick={() => setIsAddingArticle(true)} className=\"px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center text-sm\">\n              <Plus size={16} className=\"mr-1\" />\n              New Article\n            </button>}\n        </div>\n        \n        {articles.length > 0 ? <div className=\"divide-y divide-gray-200\">\n            {articles.map(article => <div key={article.id} className=\"p-4 hover:bg-gray-50 transition-colors cursor-pointer flex\" onClick={() => setSelectedArticle(article)}>\n                {article.image && <div className=\"mr-4 flex-shrink-0\">\n                    <img src={article.image} alt={article.title} className=\"w-20 h-20 object-cover rounded\" />\n                  </div>}\n                <div>\n                  <h3 className=\"text-lg font-bold mb-1\">{article.title}</h3>\n                  <div className=\"text-sm text-gray-600 mb-2\">\n                    {formatDate(article.createdAt)} • {article.author || 'Admin'}\n                  </div>\n                  <p className=\"text-gray-700 line-clamp-2\">\n                    {article.content.substring(0, 150)}\n                    {article.content.length > 150 ? '...' : ''}\n                  </p>\n                </div>\n              </div>)}\n          </div> : <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n            <div className=\"bg-gray-100 rounded-full p-4 mb-4\">\n              <Edit2 size={30} className=\"text-gray-400\" />\n            </div>\n            <h3 className=\"text-lg font-medium mb-2\">No Articles Yet</h3>\n            <p className=\"text-gray-600 max-w-md mb-6\">\n              {isAdmin && creatorMode ? \"Start your publishing empire by creating your first article.\" : \"No articles have been published yet.\"}\n            </p>\n            {isAdmin && creatorMode && <button onClick={() => setIsAddingArticle(true)} className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\">\n                <Plus size={18} className=\"mr-2\" />\n                Create First Article\n              </button>}\n          </div>}\n      </div>;\n=======\n    return (\n      <div className=\"bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden\">\n        <div className=\"flex justify-between items-center p-4 border-b border-gray-200 bg-gray-50\">\n          <h2 className=\"text-xl font-bold flex items-center\">\n            <Edit2 size={20} className=\"mr-2 text-blue-600\" />\n            Articles\n          </h2>\n          {isAdmin && creatorMode && (\n            <button \n              onClick={() => setIsAddingArticle(true)} \n              className=\"px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center text-sm shadow-sm\"\n            >\n              <Plus size={16} className=\"mr-1\" />\n              New Article\n            </button>\n          )}\n        </div>\n        \n        {articles.length > 0 ? (\n          <div className=\"divide-y divide-gray-100\">\n            {articles.map(article => (\n              <div \n                key={article.id} \n                className=\"p-5 hover:bg-gray-50 transition-colors cursor-pointer flex\" \n                onClick={() => setSelectedArticle(article)}\n              >\n                {article.image && (\n                  <div className=\"mr-5 flex-shrink-0\">\n                    <img \n                      src={article.image} \n                      alt={article.title} \n                      className=\"w-24 h-24 object-cover rounded-md shadow-sm hover:shadow transition-shadow\" \n                    />\n                  </div>\n                )}\n                <div className=\"flex-1\">\n                  <h3 className=\"text-xl font-bold mb-1 leading-tight\">{article.title}</h3>\n                  <div className=\"text-sm text-gray-500 mb-2 flex items-center\">\n                    <Calendar size={12} className=\"mr-1\" />\n                    {formatDate(article.createdAt)} \n                    <span className=\"mx-2\">•</span> \n                    <span className=\"font-medium text-gray-700\">{article.author || 'Admin'}</span>\n                  </div>\n                  <p className=\"text-gray-700 line-clamp-3 leading-relaxed\">\n                    {/* Remove image tags for summary display */}\n                    {article.content.replace(/\\[img:[^\\]]+\\]/g, ' [Image] ').substring(0, 180)}\n                    {article.content.length > 180 ? '...' : ''}\n                  </p>\n                </div>\n                <div className=\"ml-2 self-center text-blue-500\">\n                  <ArrowRight size={18} />\n                </div>\n              </div>\n            ))}\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n            <div className=\"bg-blue-50 rounded-full p-4 mb-4\">\n              <Edit2 size={30} className=\"text-blue-400\" />\n            </div>\n            <h3 className=\"text-lg font-medium mb-2\">No Articles Yet</h3>\n            <p className=\"text-gray-600 max-w-md mb-6\">\n              {isAdmin && creatorMode \n                ? \"Start your publishing empire by creating your first article.\" \n                : \"No articles have been published yet.\"\n              }\n            </p>\n            {isAdmin && creatorMode && (\n              <button \n                onClick={() => setIsAddingArticle(true)} \n                className=\"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center shadow-md\"\n              >\n                <Plus size={18} className=\"mr-2\" />\n                Create First Article\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n    );\n>>>>>>> NEW","import { useState, useEffect, useRef } from 'react';\nimport { Edit2, Trash2, X, Image as ImageIcon, Eye, Edit, ArrowLeft, ArrowRight, Plus, Info, RefreshCw, Users, Lock, LogOut, Link, HelpCircle, Keyboard, Calendar, Star, Users as UsersIcon, Save, Send, ExternalLink } from 'lucide-react';\nimport { useChat } from 'ai/react';\nimport { BarChart, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';\nimport { fetchTokenInfoByAddress } from '@devfunlabs/web-sdk';\nimport { StateClient } from '@devfunlabs/state-client';\nconst stateClient = new StateClient({\n  baseURL: 'https://state.dev.fun',\n  appId: '774938c22498019d9f53'\n});\nconst saveEntity = async (entityName, entityData) => {\n  try {\n    await stateClient.createEntity(entityName, entityData);\n  } catch (error) {\n    await stateClient.updateEntity(entityName, entityData.id, entityData);\n  }\n};\nconst ADMIN_USERNAME = 'pacecrypto';\nconst ADMIN_PASSWORD = 'ardoganteng';\nfunction ErrorBoundary({\n  children,\n  fallback\n}) {\n  const [hasError, setHasError] = useState(false);\n  const [error, setError] = useState(null);\n  useEffect(() => {\n    const errorHandler = error => {\n      console.error(\"Caught error:\", error);\n      setError(error);\n      setHasError(true);\n    };\n    window.addEventListener('error', errorHandler);\n    return () => window.removeEventListener('error', errorHandler);\n  }, []);\n  if (hasError) {\n    return typeof fallback === 'function' ? fallback(error) : fallback || <div className=\"p-8 text-center text-red-500\">Something went wrong. Please try again.</div>;\n  }\n  return children;\n}\nexport default function App() {\n  const [isLoading, setIsLoading] = useState(true);\n  const [isAdmin, setIsAdmin] = useState(false);\n  const [showLoginModal, setShowLoginModal] = useState(false);\n  const [loginUsername, setLoginUsername] = useState('');\n  const [loginPassword, setLoginPassword] = useState('');\n  const [loginError, setLoginError] = useState('');\n  const [fomoCronActive, setFomoCronActive] = useState(false);\n  const [posts, setPosts] = useState([]);\n  const [isAdding, setIsAdding] = useState(false);\n  const [isEditing, setIsEditing] = useState(false);\n  const [creatorMode, setCreatorMode] = useState(false);\n  const [isTerminalMode,,] = useState(true);\n  const [tokens, setTokens] = useState([]);\n  const [trendingTokens, setTrendingTokens] = useState([]);\n  const [selectedToken, setSelectedToken] = useState(null);\n  const [isAddingToken, setIsAddingToken] = useState(false);\n  const [isAddingTrendingToken, setIsAddingTrendingToken] = useState(false);\n  const [trendingTokenAddress, setTrendingTokenAddress] = useState('');\n  const [, setContractAddress] = useState('');\n  const [, setLastUpdated] = useState(new Date());\n  const [isLoadingToken, setIsLoadingToken] = useState(false);\n  const [starredTokens, setStarredTokens] = useState([]);\n  const [, setTitle] = useState('');\n  const [, setContent] = useState('');\n  const [, setImageUrl] = useState('');\n  const [, setImageFile] = useState(null);\n  const [, setPostTokenAddress] = useState('');\n  const [, setTokenLookupError] = useState('');\n  const [selectedPost, setSelectedPost] = useState(null);\n  const [currentPost,,] = useState(null);\n  const [, setTokenError] = useState('');\n  const [trendingTokenError, setTrendingTokenError] = useState('');\n  const [, setTokenChartData] = useState([]);\n  const [isLoadingChart, setIsLoadingChart] = useState(false);\n  const [chartTimeframe] = useState('24h');\n  const [activeDashboardTab, setActiveDashboardTab] = useState('tokenInfo');\n  const [fomoSettings, setFomoSettings] = useState({\n    weights: {\n      mentions: 40,\n      sentiment: 30,\n      priceAction: 20,\n      volume: 10\n    },\n    refreshInterval: 15,\n    threshold: {\n      low: 30,\n      medium: 60,\n      high: 80\n    }\n  });\n  const [selectedDeveloper, setSelectedDeveloper] = useState(null);\n  const [fomoHistory, setFomoHistory] = useState([]);\n  const [fomoData, setFomoData] = useState({\n    score: 0,\n    trend: 0,\n    components: {\n      mentions: 0,\n      sentiment: 0,\n      priceAction: 0,\n      volume: 0\n    },\n    lastUpdated: null\n  });\n  const [, setTokenomics] = useState({\n    totalSupply: 1000000000,\n    circulatingSupply: 400000000,\n    revenue: {\n      total: 2500000,\n      launchcoin: 850000,\n      trading: 950000,\n      staking: 700000\n    },\n    distribution: [{\n      id: '1',\n      title: 'Team',\n      percentage: 15,\n      color: '#4C9AFF'\n    }, {\n      id: '2',\n      title: 'Investors',\n      percentage: 20,\n      color: '#6554C0'\n    }, {\n      id: '3',\n      title: 'Community',\n      percentage: 35,\n      color: '#36B37E'\n    }, {\n      id: '4',\n      title: 'Treasury',\n      percentage: 10,\n      color: '#FF8B00'\n    }, {\n      id: '5',\n      title: 'Liquidity',\n      percentage: 10,\n      color: '#FFAB00'\n    }, {\n      id: '6',\n      title: 'Ecosystem',\n      percentage: 10,\n      color: '#00B8D9'\n    }]\n  });\n  const [currentDate] = useState(new Date().toLocaleDateString('id-ID', {\n    weekday: 'long',\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  }));\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [selectedCalendarDate, setSelectedCalendarDate] = useState(new Date());\n  const [viewMonth, setViewMonth] = useState(new Date());\n  useEffect(() => {\n    const storedAuth = localStorage.getItem('paceterminal-auth');\n    if (storedAuth) {\n      try {\n        const authData = JSON.parse(storedAuth);\n        if (authData.isAdmin) {\n          setIsAdmin(true);\n        }\n      } catch (error) {\n        console.error(\"Error parsing auth data:\", error);\n      }\n    }\n    const storedStarredTokens = localStorage.getItem('paceterminal-starred-tokens');\n    if (storedStarredTokens) {\n      try {\n        const starredTokensData = JSON.parse(storedStarredTokens);\n        setStarredTokens(starredTokensData);\n      } catch (error) {\n        console.error(\"Error parsing starred tokens data:\", error);\n      }\n    }\n    const storedPosts = localStorage.getItem('paceterminal-posts-backup');\n    if (storedPosts) {\n      try {\n        const postsData = JSON.parse(storedPosts);\n        if (postsData && postsData.length > 0) {\n          console.log(\"Loaded\", postsData.length, \"articles from local backup\");\n          setPosts(postsData);\n        }\n      } catch (error) {\n        console.error(\"Error parsing backup posts data:\", error);\n      }\n    }\n    const loadingTimer = setTimeout(() => {\n      setIsLoading(false);\n    }, 2500);\n    return () => clearTimeout(loadingTimer);\n  }, []);\n  const [isUserInteracting, setIsUserInteracting] = useState(false);\n  const [lastRefreshTime, setLastRefreshTime] = useState({});\n  const interactionTimeoutRef = useRef(null);\n  const markUserInteraction = () => {\n    setIsUserInteracting(true);\n    if (interactionTimeoutRef.current) {\n      clearTimeout(interactionTimeoutRef.current);\n    }\n    interactionTimeoutRef.current = setTimeout(() => {\n      setIsUserInteracting(false);\n    }, 30000);\n  };\n  useEffect(() => {\n    const fetchTokens = async () => {\n      try {\n        const fetchedTokens = await stateClient.getEntities('tokens');\n        if (fetchedTokens && fetchedTokens.length > 0) {\n          setTokens(fetchedTokens);\n        }\n      } catch (error) {\n        console.error(\"Error fetching tokens:\", error);\n      }\n    };\n    fetchTokens();\n    const fetchTrendingTokens = async () => {\n      try {\n        const fetchedTrendingTokens = await stateClient.getEntities('trendingTokens');\n        if (fetchedTrendingTokens && fetchedTrendingTokens.length > 0) {\n          setTrendingTokens(fetchedTrendingTokens);\n        }\n      } catch (error) {\n        console.error(\"Error fetching trending tokens:\", error);\n      }\n    };\n    fetchTrendingTokens();\n  }, []);\n  useEffect(() => {\n    if (!selectedToken || !selectedToken.contractAddress) return;\n    setIsLoadingToken(true);\n    try {\n      setActiveDashboardTab('tokenInfo');\n      setLastRefreshTime(prev => ({\n        ...prev,\n        [`token_${selectedToken.contractAddress}`]: Date.now()\n      }));\n    } catch (error) {\n      console.error(\"Error loading token data:\", error);\n    } finally {\n      setIsLoadingToken(false);\n    }\n  }, [selectedToken?.contractAddress]);\n  useEffect(() => {\n    if (selectedToken && fomoCronActive && !isUserInteracting) {\n      const visualRefreshInterval = setInterval(() => {\n        if (!isUserInteracting) {\n          updateFomoData(false, false);\n        }\n      }, Math.max(fomoSettings.refreshInterval * 60 * 1000, 300000));\n      const dataStorageInterval = setInterval(() => {\n        if (!isUserInteracting) {\n          console.log(\"Hourly FOMO data storage triggered\");\n          updateFomoData(false, true);\n        }\n      }, 60 * 60 * 1000);\n      return () => {\n        clearInterval(visualRefreshInterval);\n        clearInterval(dataStorageInterval);\n      };\n    }\n  }, [isTerminalMode, selectedToken, fomoCronActive, fomoSettings.refreshInterval, isUserInteracting]);\n  useEffect(() => {\n    if (selectedToken) {\n      loadFomoData();\n    }\n  }, [selectedToken]);\n  const loadFomoData = async () => {\n    try {\n      const tokenFomoSettings = await stateClient.getEntity('fomoSettings', selectedToken.contractAddress);\n      if (tokenFomoSettings) {\n        setFomoSettings(tokenFomoSettings);\n      }\n      const tokenFomoHistory = await stateClient.getEntity('fomoHistory', selectedToken.contractAddress);\n      if (tokenFomoHistory && tokenFomoHistory.history) {\n        setFomoHistory(tokenFomoHistory.history);\n      } else {\n        setFomoHistory([]);\n      }\n      const tokenFomoData = await stateClient.getEntity('fomoData', selectedToken.contractAddress);\n      if (tokenFomoData) {\n        setFomoData(tokenFomoData);\n      } else {\n        updateFomoData(true, true);\n      }\n    } catch (error) {\n      console.error(\"Error loading FOMO data:\", error);\n      updateFomoData(true, true);\n    }\n  };\n  const handleLogin = e => {\n    e.preventDefault();\n    setLoginError('');\n    if (loginUsername === ADMIN_USERNAME && loginPassword === ADMIN_PASSWORD) {\n      setIsAdmin(true);\n      localStorage.setItem('paceterminal-auth', JSON.stringify({\n        isAdmin: true\n      }));\n      setShowLoginModal(false);\n      setLoginUsername('');\n      setLoginPassword('');\n    } else {\n      setLoginError('Invalid username or password');\n    }\n  };\n  const handleLogout = () => {\n    setIsAdmin(false);\n    setCreatorMode(false);\n    localStorage.removeItem('paceterminal-auth');\n  };\n  const handleLogoClick = () => {\n    setIsAdding(false);\n    setIsEditing(false);\n  };\n  const resetForm = () => {\n    setTitle('');\n    setContent('');\n    setImageUrl('');\n    setImageFile(null);\n    setPostTokenAddress('');\n    setTokenLookupError('');\n    setIsPublicPost(true);\n  };\n  const handleAddTokenWithMetrics = async tokenData => {\n    setIsLoadingToken(true);\n    setTokenError('');\n    try {\n      const tokenInfo = await fetchTokenInfoByAddress(tokenData.contractAddress);\n      if (!tokenInfo) {\n        setTokenError('Token not found. Please check the contract address.');\n        return;\n      }\n      if (!tokens.some(t => t.contractAddress === tokenInfo.contractAddress)) {\n        const newToken = {\n          id: tokenInfo.contractAddress,\n          ...tokenInfo,\n          description: tokenData.description || tokenInfo.description,\n          startupMetrics: {\n            arr: tokenData.startupMetrics.arr,\n            growthRate: tokenData.startupMetrics.growthRate,\n            activeUsers: tokenData.startupMetrics.activeUsers,\n            totalUsers: tokenData.startupMetrics.totalUsers,\n            category: tokenData.startupMetrics.category,\n            shortDescription: tokenData.startupMetrics.shortDescription,\n            socialFollowers: tokenData.socialFollowers || {\n              twitter: 1000,\n              telegram: 500,\n              discord: 2000,\n              reddit: 1000\n            }\n          },\n          growthData: tokenData.growthData,\n          tokenomics: tokenData.tokenomics\n        };\n        setTokens(prev => [newToken, ...prev]);\n        await stateClient.createEntity('tokens', newToken);\n        setContractAddress('');\n        setIsAddingToken(false);\n      } else {\n        setTokenError('Token already exists in your list.');\n      }\n    } catch (error) {\n      console.error(\"Error adding token:\", error);\n      setTokenError('Failed to add token. Please try again.');\n    } finally {\n      setIsLoadingToken(false);\n    }\n  };\n  const handleUpdateToken = async tokenData => {\n    setIsLoadingToken(true);\n    try {\n      if (selectedToken) {\n        const updatedToken = {\n          ...selectedToken,\n          description: tokenData.description,\n          startupMetrics: {\n            ...selectedToken.startupMetrics,\n            arr: tokenData.startupMetrics.arr,\n            growthRate: tokenData.startupMetrics.growthRate,\n            activeUsers: tokenData.startupMetrics.activeUsers,\n            totalUsers: tokenData.startupMetrics.totalUsers,\n            category: tokenData.startupMetrics.category,\n            shortDescription: tokenData.startupMetrics.shortDescription,\n            socialFollowers: tokenData.socialFollowers\n          },\n          growthData: tokenData.growthData,\n          tokenomics: tokenData.tokenomics,\n          fomoSettings: tokenData.fomoSettings || fomoSettings,\n          onchainData: selectedToken.onchainData || null,\n          lastUpdated: new Date().toISOString()\n        };\n        await stateClient.updateEntity('tokens', selectedToken.id, updatedToken);\n        setTokens(tokens.map(token => token.contractAddress === selectedToken.contractAddress ? updatedToken : token));\n        setSelectedToken(updatedToken);\n        setIsEditing(false);\n        try {\n          await stateClient.createEntity('fomoSettings', {\n            id: selectedToken.contractAddress,\n            ...tokenData.fomoSettings\n          });\n          await stateClient.createEntity('startupMetrics', {\n            id: selectedToken.contractAddress,\n            ...tokenData.startupMetrics,\n            socialFollowers: tokenData.socialFollowers,\n            lastUpdated: new Date().toISOString()\n          });\n          await stateClient.createEntity('tokenomics', {\n            id: selectedToken.contractAddress,\n            ...tokenData.tokenomics,\n            lastUpdated: new Date().toISOString()\n          });\n          await stateClient.createEntity('growthData', {\n            id: selectedToken.contractAddress,\n            data: tokenData.growthData,\n            lastUpdated: new Date().toISOString()\n          });\n        } catch (error) {\n          console.error(\"Error creating token metrics:\", error);\n          try {\n            await stateClient.updateEntity('fomoSettings', selectedToken.contractAddress, tokenData.fomoSettings);\n            await stateClient.updateEntity('startupMetrics', selectedToken.contractAddress, {\n              ...tokenData.startupMetrics,\n              socialFollowers: tokenData.socialFollowers,\n              lastUpdated: new Date().toISOString()\n            });\n            await stateClient.updateEntity('tokenomics', selectedToken.contractAddress, {\n              ...tokenData.tokenomics,\n              lastUpdated: new Date().toISOString()\n            });\n            await stateClient.updateEntity('growthData', selectedToken.contractAddress, {\n              data: tokenData.growthData,\n              lastUpdated: new Date().toISOString()\n            });\n          } catch (updateError) {\n            console.error(\"Error updating token metrics:\", updateError);\n          }\n        }\n      }\n    } catch (error) {\n      console.error(\"Error updating token:\", error);\n      alert(\"Failed to update token. Please try again.\");\n    } finally {\n      setIsLoadingToken(false);\n    }\n  };\n  const handleAddTrendingToken = async () => {\n    setIsLoadingToken(true);\n    setTrendingTokenError('');\n    try {\n      const tokenInfo = await fetchTokenInfoByAddress(trendingTokenAddress);\n      if (!tokenInfo) {\n        setTrendingTokenError('Token not found. Please check the contract address.');\n        setIsLoadingToken(false);\n        return;\n      }\n      if (!trendingTokens.some(t => t.contractAddress === tokenInfo.contractAddress)) {\n        const newTrendingToken = {\n          id: tokenInfo.contractAddress,\n          ...tokenInfo,\n          addedAt: new Date().toISOString()\n        };\n        setTrendingTokens(prev => [newTrendingToken, ...prev]);\n        await stateClient.createEntity('trendingTokens', newTrendingToken);\n        setTrendingTokenAddress('');\n        setIsAddingTrendingToken(false);\n      } else {\n        setTrendingTokenError('Token already exists in trending list.');\n      }\n    } catch (error) {\n      console.error(\"Error adding trending token:\", error);\n      setTrendingTokenError('Failed to add trending token. Please try again.');\n    } finally {\n      setIsLoadingToken(false);\n    }\n  };\n  const handleDeleteTrendingToken = async (contractAddress, e) => {\n    e.stopPropagation();\n    if (confirm('Are you sure you want to remove this trending token?')) {\n      try {\n        setTrendingTokens(prev => prev.filter(t => t.contractAddress !== contractAddress));\n        await stateClient.deleteEntity('trendingTokens', contractAddress);\n        console.log(`✅ Trending token deleted successfully: ${contractAddress}`);\n      } catch (error) {\n        console.error(\"Error deleting trending token:\", error);\n        alert(\"Failed to delete trending token. Please try again.\");\n      }\n    }\n  };\n  const toggleStarToken = (tokenAddress, e) => {\n    e.stopPropagation();\n    const newStarredTokens = [...starredTokens];\n    const index = newStarredTokens.indexOf(tokenAddress);\n    if (index === -1) {\n      newStarredTokens.push(tokenAddress);\n    } else {\n      newStarredTokens.splice(index, 1);\n    }\n    setStarredTokens(newStarredTokens);\n    localStorage.setItem('paceterminal-starred-tokens', JSON.stringify(newStarredTokens));\n  };\n  const handleSelectToken = async token => {\n    if (!token || !token.contractAddress) return;\n    setIsLoadingToken(true);\n    try {\n      let tokenWithMetrics = {\n        ...token\n      };\n      setActiveDashboardTab('tokenInfo');\n      try {\n        const generatedMetrics = {\n          arr: Math.random() * 1000000 + 100000,\n          growthRate: Math.random() * 30 + 5,\n          activeUsers: Math.floor(Math.random() * 50000 + 5000),\n          totalUsers: Math.floor(Math.random() * 200000 + 50000),\n          category: ['DeFi', 'NFTs', 'Gaming', 'Infrastructure', 'Social'][Math.floor(Math.random() * 5)],\n          socialFollowers: {\n            twitter: Math.floor(Math.random() * 100000 + 1000),\n            telegram: Math.floor(Math.random() * 50000 + 500),\n            discord: Math.floor(Math.random() * 30000 + 2000),\n            reddit: Math.floor(Math.random() * 20000 + 1000)\n          },\n          history: [],\n          lastUpdated: new Date().toISOString()\n        };\n        tokenWithMetrics.startupMetrics = generatedMetrics;\n      } catch (error) {\n        console.error(\"Error loading startup metrics:\", error);\n        tokenWithMetrics.startupMetrics = token.startupMetrics || {\n          arr: Math.random() * 1000000 + 100000,\n          growthRate: Math.random() * 30 + 5,\n          activeUsers: Math.floor(Math.random() * 50000 + 5000),\n          totalUsers: Math.floor(Math.random() * 200000 + 50000),\n          category: ['DeFi', 'NFTs', 'Gaming', 'Infrastructure', 'Social'][Math.floor(Math.random() * 5)],\n          socialFollowers: {\n            twitter: Math.floor(Math.random() * 100000 + 1000),\n            telegram: Math.floor(Math.random() * 50000 + 500),\n            discord: Math.floor(Math.random() * 30000 + 2000),\n            reddit: Math.floor(Math.random() * 20000 + 1000)\n          },\n          history: []\n        };\n      }\n      try {\n        const savedOnchainData = await stateClient.getEntity('onchainData', token.contractAddress);\n        if (savedOnchainData) {\n          tokenWithMetrics.onchainData = savedOnchainData;\n        } else {\n          const generatedOnchainData = {\n            holdersCount: Math.floor(Math.random() * 10000 + 1000),\n            marketCap: Math.random() * 50000000 + 1000000,\n            holderGrowth: Math.random() * 20 + 5,\n            lastUpdated: new Date().toISOString()\n          };\n          tokenWithMetrics.onchainData = generatedOnchainData;\n          try {\n            await stateClient.createEntity('onchainData', {\n              id: token.contractAddress,\n              ...generatedOnchainData\n            });\n          } catch (createError) {\n            console.error(\"Error creating onchain data:\", createError);\n          }\n        }\n      } catch (error) {\n        console.error(\"Error loading onchain data:\", error);\n        tokenWithMetrics.onchainData = {\n          holdersCount: Math.floor(Math.random() * 10000 + 1000),\n          marketCap: Math.random() * 50000000 + 1000000,\n          holderGrowth: Math.random() * 20 + 5,\n          lastUpdated: new Date().toISOString()\n        };\n      }\n      try {\n        const savedGrowthData = await stateClient.getEntity('growthData', token.contractAddress);\n        if (savedGrowthData && savedGrowthData.data) {\n          tokenWithMetrics.growthData = savedGrowthData.data;\n        } else {\n          const generatedGrowthData = [{\n            month: 'Jan',\n            growth: token.startupMetrics?.growthRate * 0.85 || Math.random() * 10\n          }, {\n            month: 'Feb',\n            growth: token.startupMetrics?.growthRate * 0.9 || Math.random() * 12\n          }, {\n            month: 'Mar',\n            growth: token.startupMetrics?.growthRate * 0.95 || Math.random() * 14\n          }, {\n            month: 'Apr',\n            growth: token.startupMetrics?.growthRate * 0.97 || Math.random() * 16\n          }, {\n            month: 'May',\n            growth: token.startupMetrics?.growthRate * 1.0 || Math.random() * 18\n          }, {\n            month: 'Jun',\n            growth: token.startupMetrics?.growthRate * 1.1 || Math.random() * 20\n          }];\n          tokenWithMetrics.growthData = generatedGrowthData;\n          try {\n            await stateClient.createEntity('growthData', {\n              id: token.contractAddress,\n              data: generatedGrowthData,\n              lastUpdated: new Date().toISOString()\n            });\n          } catch (createError) {\n            console.error(\"Error creating growth data:\", createError);\n          }\n        }\n      } catch (error) {\n        console.error(\"Error loading growth data:\", error);\n      }\n      setSelectedToken(tokenWithMetrics);\n      await fetchTokenChartData(token.contractAddress);\n      try {\n        const savedTokenomics = await stateClient.getEntity('tokenomics', token.contractAddress);\n        if (savedTokenomics) {\n          setTokenomics(savedTokenomics);\n        } else if (token.tokenomics) {\n          setTokenomics(token.tokenomics);\n        }\n      } catch (error) {\n        console.error(\"Error loading tokenomics:\", error);\n        if (token.tokenomics) {\n          setTokenomics(token.tokenomics);\n        }\n      }\n      setFomoData({\n        score: 0,\n        trend: 0,\n        components: {\n          mentions: 0,\n          sentiment: 0,\n          priceAction: 0,\n          volume: 0\n        },\n        lastUpdated: null\n      });\n      setFomoHistory([]);\n      if (!fomoCronActive) {\n        setFomoCronActive(true);\n      }\n    } catch (error) {\n      console.error(\"Error selecting token:\", error);\n    } finally {\n      setIsLoadingToken(false);\n    }\n  };\n  const fetchTokenChartData = async (address, forceRefresh = false) => {\n    const cacheKey = `chart_${address}`;\n    if (!forceRefresh && lastRefreshTime[cacheKey] && Date.now() - lastRefreshTime[cacheKey] < 300000) {\n      console.log(`Using cached chart data for ${address} - last refreshed ${(Date.now() - lastRefreshTime[cacheKey]) / 1000}s ago`);\n      return;\n    }\n    setIsLoadingChart(true);\n    try {\n      const response = await fetch(`https://rpc.dev.fun/774938c22498019d9f53?url=${encodeURIComponent(`https://api.dexscreener.com/latest/dex/tokens/${address}`)}`);\n      const data = await response.json();\n      if (data && data.pairs && data.pairs.length > 0) {\n        const pair = data.pairs[0];\n        let socialFollowers;\n        setLastRefreshTime(prev => ({\n          ...prev,\n          [cacheKey]: Date.now()\n        }));\n        try {\n          const savedStartupMetrics = await stateClient.getEntity('startupMetrics', address);\n          if (savedStartupMetrics && savedStartupMetrics.socialFollowers) {\n            socialFollowers = savedStartupMetrics.socialFollowers;\n          } else {\n            socialFollowers = {\n              twitter: Math.floor(Math.random() * 100000 + 1000),\n              telegram: Math.floor(Math.random() * 50000 + 500),\n              discord: Math.floor(Math.random() * 30000 + 2000),\n              reddit: Math.floor(Math.random() * 20000 + 1000)\n            };\n            if (isAdmin) {\n              try {\n                await stateClient.createEntity('socialFollowers', {\n                  id: address,\n                  ...socialFollowers,\n                  lastUpdated: new Date().toISOString()\n                });\n              } catch (error) {\n                try {\n                  await stateClient.updateEntity('socialFollowers', address, socialFollowers);\n                } catch (updateError) {\n                  console.error(\"Error saving social followers:\", updateError);\n                }\n              }\n            }\n          }\n        } catch (error) {\n          socialFollowers = {\n            twitter: Math.floor(Math.random() * 100000 + 1000),\n            telegram: Math.floor(Math.random() * 50000 + 500),\n            discord: Math.floor(Math.random() * 30000 + 2000),\n            reddit: Math.floor(Math.random() * 20000 + 1000)\n          };\n        }\n        const actualPrice = parseFloat(pair.priceUsd);\n        const actualPriceChange = parseFloat(pair.priceChange.h24);\n        const tokenMetrics = {\n          price: actualPrice,\n          marketcap: parseFloat(pair.fdv),\n          priceChangeIn24h: actualPriceChange,\n          volumeIn24h: parseFloat(pair.volume.h24),\n          liquidityInUSD: parseFloat(pair.liquidity.usd)\n        };\n        setSelectedToken(prevToken => ({\n          ...prevToken,\n          ...tokenMetrics,\n          startupMetrics: {\n            ...(prevToken?.startupMetrics || {})\n          }\n        }));\n        const priceHistoryUrl = `https://io8.dexscreener.io/u/chart/bars/${pair.chainId}/${pair.pairAddress}/0`;\n        const historyResponse = await fetch(`https://rpc.dev.fun/774938c22498019d9f53?url=${encodeURIComponent(priceHistoryUrl)}`);\n        const historyData = await historyResponse.json();\n        if (historyData && historyData.data && historyData.data.length > 0) {\n          const chartData = historyData.data.filter((_, index) => {\n            const dataLength = historyData.data.length;\n            if (chartTimeframe === '24h') return index > dataLength - 25;\n            if (chartTimeframe === '7d') return index > dataLength - 84;\n            if (chartTimeframe === '30d') return index > dataLength - 180;\n            return true;\n          }).map(bar => {\n            const date = new Date(bar[0]);\n            return {\n              date: chartTimeframe === '24h' ? date.toLocaleTimeString('en-US', {\n                hour: '2-digit',\n                minute: '2-digit'\n              }) : date.toLocaleDateString('en-US', {\n                month: 'short',\n                day: 'numeric'\n              }),\n              price: parseFloat(bar[4]),\n              timestamp: date.getTime()\n            };\n          });\n          setTokenChartData(chartData);\n          try {\n            await stateClient.createEntity('chartData', {\n              id: address,\n              data: chartData,\n              timestamp: new Date().toISOString(),\n              tokenMetrics: tokenMetrics\n            });\n          } catch (error) {\n            try {\n              await stateClient.updateEntity('chartData', address, {\n                data: chartData,\n                timestamp: new Date().toISOString(),\n                tokenMetrics: tokenMetrics\n              });\n            } catch (updateError) {\n              console.error(\"Error storing chart data:\", updateError);\n            }\n          }\n        } else {\n          setTokenChartData(generateChartData({\n            price: 0.01,\n            priceChangeIn24h: 0\n          }));\n        }\n      } else {\n        setTokenChartData(generateChartData({\n          price: 0.01,\n          priceChangeIn24h: 0\n        }));\n      }\n    } catch (error) {\n      console.error(\"Error fetching token chart data:\", error);\n      setTokenChartData(generateChartData({\n        price: 0.01,\n        priceChangeIn24h: 0\n      }));\n    } finally {\n      setIsLoadingChart(false);\n    }\n  };\n  const [, setIsPublicPost] = useState(true);\n  const handleCancel = () => {\n    setIsAdding(false);\n    setIsEditing(false);\n    resetForm();\n  };\n  const handleCloseFullArticle = () => {\n    setSelectedPost(null);\n  };\n  const CalendarView = ({\n    selectedDate,\n    setSelectedDate,\n    viewMonth,\n    setViewMonth,\n    onClose\n  }) => {\n    const isSameDay = (date1, date2) => {\n      return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();\n    };\n    const prevMonth = () => {\n      setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() - 1, 1));\n    };\n    const nextMonth = () => {\n      setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 1));\n    };\n    const generateCalendarDays = () => {\n      const year = viewMonth.getFullYear();\n      const month = viewMonth.getMonth();\n      const firstDay = new Date(year, month, 1);\n      const lastDay = new Date(year, month + 1, 0);\n      const firstDayOfWeek = firstDay.getDay();\n      const daysFromPrevMonth = firstDayOfWeek;\n      const daysInMonth = lastDay.getDate();\n      const daysFromNextMonth = Math.ceil((daysInMonth + daysFromPrevMonth) / 7) * 7 - (daysInMonth + daysFromPrevMonth);\n      const days = [];\n      const prevMonthLastDay = new Date(year, month, 0).getDate();\n      for (let i = daysFromPrevMonth - 1; i >= 0; i--) {\n        const date = new Date(year, month - 1, prevMonthLastDay - i);\n        days.push({\n          date,\n          isCurrentMonth: false,\n          isToday: isSameDay(date, new Date()),\n          isSameDay: d => isSameDay(date, d)\n        });\n      }\n      for (let i = 1; i <= daysInMonth; i++) {\n        const date = new Date(year, month, i);\n        days.push({\n          date,\n          isCurrentMonth: true,\n          isToday: isSameDay(date, new Date()),\n          isSameDay: d => isSameDay(date, d)\n        });\n      }\n      for (let i = 1; i <= daysFromNextMonth; i++) {\n        const date = new Date(year, month + 1, i);\n        days.push({\n          date,\n          isCurrentMonth: false,\n          isToday: isSameDay(date, new Date()),\n          isSameDay: d => isSameDay(date, d)\n        });\n      }\n      return days;\n    };\n    return <div className=\"bg-white shadow-md border border-gray-200 border-[1px] rounded-lg animate-fadeIn mx-auto max-w-5xl p-8\">\n        <div className=\"flex justify-center items-center mb-8\">\n          <h2 className=\"text-3xl font-serif font-bold\">Calendar</h2>\n        </div>\n      <div className=\"flex justify-between items-center mb-8\">\n          <button onClick={prevMonth} className=\"p-3 hover:bg-gray-100 rounded-full transition-colors\" aria-label=\"Previous Month\">\n            <ArrowLeft size={24} />\n          </button>\n          <h3 className=\"text-2xl font-medium\">\n            {viewMonth.toLocaleDateString('id-ID', {\n            month: 'long',\n            year: 'numeric'\n          })}\n          </h3>\n          <button onClick={nextMonth} className=\"p-3 hover:bg-gray-100 rounded-full transition-colors\" aria-label=\"Next Month\">\n            <ArrowRight size={24} />\n          </button>\n        </div>\n\n        <div className=\"grid grid-cols-7 gap-2 mb-8\">\n          {}\n          {['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'].map(day => <div key={day} className=\"text-center font-medium py-3 text-gray-600 text-base\">\n              {day}\n            </div>)}\n          {}\n          {generateCalendarDays().map((day, index) => <div key={index} className={`py-4 text-center rounded-lg hover:bg-gray-100 cursor-pointer transition-colors ${day.isCurrentMonth ? '' : 'text-gray-400'} ${day.isToday ? 'bg-blue-50 font-bold' : ''} ${day.isSameDay(selectedDate) ? 'border-2 border-blue-500' : ''}`} onClick={() => setSelectedDate(day.date)}>\n              <span className=\"text-lg\">{day.date.getDate()}</span>\n            </div>)}\n        </div>\n        </div>;\n  };\n  const updateFomoData = async (isInitial = false, shouldSave = false) => {\n    if (!selectedToken) return;\n    const simulateMentions = () => {\n      const followers = selectedToken.startupMetrics?.socialFollowers?.twitter || 1000;\n      const baseRate = followers / 10000;\n      const randomFactor = Math.random() * 0.5 + 0.75;\n      const mentionsScore = Math.min(100, Math.max(0, baseRate * randomFactor * 100));\n      return mentionsScore;\n    };\n    const simulateSentiment = () => {\n      const priceChange = selectedToken.priceChangeIn24h || 0;\n      const sentimentBase = 50 + priceChange * 2;\n      const randomFactor = Math.random() * 30 - 15;\n      return Math.min(100, Math.max(0, sentimentBase + randomFactor));\n    };\n    const getPriceActionScore = () => {\n      const priceChange = selectedToken.priceChangeIn24h || 0;\n      const baseScore = 50 + priceChange * 2;\n      return Math.min(100, Math.max(0, baseScore));\n    };\n    const getVolumeScore = () => {\n      const volume = selectedToken.volumeIn24h || 0;\n      const marketCap = selectedToken.marketcap || 1000000;\n      const volumeRatio = volume / marketCap;\n      const volumeScore = volumeRatio * 5000;\n      return Math.min(100, Math.max(0, volumeScore));\n    };\n    const components = {\n      mentions: simulateMentions(),\n      sentiment: simulateSentiment(),\n      priceAction: getPriceActionScore(),\n      volume: getVolumeScore()\n    };\n    const {\n      weights\n    } = fomoSettings;\n    const weightSum = Object.values(weights).reduce((sum, weight) => sum + weight, 0);\n    let weightedScore = 0;\n    Object.entries(components).forEach(([key, value]) => {\n      weightedScore += value * weights[key] / weightSum;\n    });\n    let trend = 0;\n    if (fomoData.score > 0 && !isInitial) {\n      trend = weightedScore - fomoData.score;\n    }\n    const newFomoData = {\n      id: selectedToken.contractAddress,\n      score: Math.round(weightedScore),\n      trend: parseFloat(trend.toFixed(1)),\n      components,\n      lastUpdated: new Date().toISOString()\n    };\n    setFomoData(newFomoData);\n    const newHistoryEntry = {\n      time: new Date().toLocaleTimeString('en-US', {\n        hour: '2-digit',\n        minute: '2-digit'\n      }),\n      score: newFomoData.score,\n      trend: newFomoData.trend,\n      timestamp: new Date().getTime()\n    };\n    const updatedHistory = [...fomoHistory, newHistoryEntry];\n    if (updatedHistory.length > 24) {\n      setFomoHistory(updatedHistory.slice(updatedHistory.length - 24));\n    } else {\n      setFomoHistory(updatedHistory);\n    }\n    if (shouldSave) {\n      try {\n        await stateClient.createEntity('fomoData', newFomoData);\n      } catch (error) {\n        console.error(\"Error creating FOMO data:\", error);\n        try {\n          await stateClient.updateEntity('fomoData', selectedToken.contractAddress, newFomoData);\n        } catch (updateError) {\n          console.error(\"Error updating FOMO data:\", updateError);\n        }\n      }\n      try {\n        let existingHistory = [];\n        try {\n          const tokenFomoHistory = await stateClient.getEntity('fomoHistory', selectedToken.contractAddress);\n          if (tokenFomoHistory && tokenFomoHistory.history) {\n            existingHistory = tokenFomoHistory.history;\n          }\n        } catch (fetchError) {\n          console.error(\"Error fetching existing FOMO history:\", fetchError);\n        }\n        const completeHistory = [...existingHistory, newHistoryEntry];\n        const historyToSave = {\n          id: selectedToken.contractAddress,\n          history: completeHistory.length > 168 ? completeHistory.slice(completeHistory.length - 168) : completeHistory,\n          lastSaved: new Date().toISOString()\n        };\n        await stateClient.createEntity('fomoHistory', historyToSave);\n      } catch (error) {\n        console.error(\"Error creating FOMO history:\", error);\n        try {\n          await stateClient.updateEntity('fomoHistory', selectedToken.contractAddress, {\n            history: updatedHistory,\n            lastSaved: new Date().toISOString()\n          });\n        } catch (updateError) {\n          console.error(\"Error updating FOMO history:\", updateError);\n        }\n      }\n    }\n  };\n  const TokenForm = () => {\n    const [editMode, setEditMode] = useState(false);\n    const [tokenData, setTokenData] = useState({\n      contractAddress: '',\n      description: '',\n      startupMetrics: {\n        arr: 100000,\n        growthRate: 10,\n        activeUsers: 5000,\n        totalUsers: 20000,\n        category: 'DeFi',\n        shortDescription: ''\n      },\n      socialFollowers: {\n        twitter: 1000,\n        telegram: 500,\n        discord: 2000,\n        reddit: 1000\n      },\n      fomoSettings: {\n        weights: {\n          mentions: 40,\n          sentiment: 30,\n          priceAction: 20,\n          volume: 10\n        },\n        refreshInterval: 15,\n        threshold: {\n          low: 30,\n          medium: 60,\n          high: 80\n        }\n      },\n      tokenomics: {\n        totalSupply: 1000000000,\n        circulatingSupply: 400000000,\n        revenue: {\n          total: 2500000,\n          launchcoin: 850000,\n          trading: 950000,\n          staking: 700000\n        },\n        distribution: [{\n          id: '1',\n          title: 'Team',\n          percentage: 15,\n          color: '#4C9AFF'\n        }, {\n          id: '2',\n          title: 'Investors',\n          percentage: 20,\n          color: '#6554C0'\n        }, {\n          id: '3',\n          title: 'Community',\n          percentage: 35,\n          color: '#36B37E'\n        }, {\n          id: '4',\n          title: 'Treasury',\n          percentage: 10,\n          color: '#FF8B00'\n        }, {\n          id: '5',\n          title: 'Liquidity',\n          percentage: 10,\n          color: '#FFAB00'\n        }, {\n          id: '6',\n          title: 'Ecosystem',\n          percentage: 10,\n          color: '#00B8D9'\n        }]\n      },\n      growthData: [{\n        month: 'Jan',\n        growth: 5\n      }, {\n        month: 'Feb',\n        growth: 7\n      }, {\n        month: 'Mar',\n        growth: 8\n      }, {\n        month: 'Apr',\n        growth: 9\n      }, {\n        month: 'May',\n        growth: 10\n      }, {\n        month: 'Jun',\n        growth: 12\n      }]\n    });\n    useEffect(() => {\n      if (isEditing && currentPost) {\n        setEditMode(true);\n        setIsPublicPost(currentPost.isPublic !== false);\n        setTokenData({\n          contractAddress: selectedToken.contractAddress || '',\n          description: selectedToken.description || '',\n          startupMetrics: {\n            arr: selectedToken.startupMetrics?.arr || 100000,\n            growthRate: selectedToken.startupMetrics?.growthRate || 10,\n            activeUsers: selectedToken.startupMetrics?.activeUsers || 5000,\n            totalUsers: selectedToken.startupMetrics?.totalUsers || 20000,\n            category: selectedToken.startupMetrics?.category || 'DeFi',\n            shortDescription: selectedToken.startupMetrics?.shortDescription || ''\n          },\n          socialFollowers: {\n            twitter: selectedToken.startupMetrics?.socialFollowers?.twitter || 1000,\n            telegram: selectedToken.startupMetrics?.socialFollowers?.telegram || 500,\n            discord: selectedToken.startupMetrics?.socialFollowers?.discord || 2000,\n            reddit: selectedToken.startupMetrics?.socialFollowers?.reddit || 1000\n          },\n          fomoSettings: selectedToken.fomoSettings || fomoSettings,\n          tokenomics: selectedToken.tokenomics || {\n            totalSupply: 1000000000,\n            circulatingSupply: 400000000,\n            revenue: {\n              total: 2500000,\n              launchcoin: 850000,\n              trading: 950000,\n              staking: 700000\n            },\n            distribution: [{\n              id: '1',\n              title: 'Team',\n              percentage: 15,\n              color: '#4C9AFF'\n            }, {\n              id: '2',\n              title: 'Investors',\n              percentage: 20,\n              color: '#6554C0'\n            }, {\n              id: '3',\n              title: 'Community',\n              percentage: 35,\n              color: '#36B37E'\n            }, {\n              id: '4',\n              title: 'Treasury',\n              percentage: 10,\n              color: '#FF8B00'\n            }, {\n              id: '5',\n              title: 'Liquidity',\n              percentage: 10,\n              color: '#FFAB00'\n            }, {\n              id: '6',\n              title: 'Ecosystem',\n              percentage: 10,\n              color: '#00B8D9'\n            }]\n          },\n          growthData: selectedToken.growthData || [{\n            month: 'Jan',\n            growth: 5\n          }, {\n            month: 'Feb',\n            growth: 7\n          }, {\n            month: 'Mar',\n            growth: 8\n          }, {\n            month: 'Apr',\n            growth: 9\n          }, {\n            month: 'May',\n            growth: 10\n          }, {\n            month: 'Jun',\n            growth: 12\n          }]\n        });\n      } else {\n        setEditMode(false);\n        setContractAddress(tokenData.contractAddress);\n      }\n    }, [isEditing, selectedToken]);\n    const handleTokenDataChange = (field, value) => {\n      if (field.includes('.')) {\n        const [section, subfield] = field.split('.');\n        if (field.includes('.revenue.')) {\n          const [,, revenueField] = field.split('.');\n          setTokenData({\n            ...tokenData,\n            tokenomics: {\n              ...tokenData.tokenomics,\n              revenue: {\n                ...tokenData.tokenomics.revenue,\n                [revenueField]: value\n              }\n            }\n          });\n        } else {\n          setTokenData({\n            ...tokenData,\n            [section]: {\n              ...tokenData[section],\n              [subfield]: value\n            }\n          });\n        }\n      } else {\n        setTokenData({\n          ...tokenData,\n          [field]: value\n        });\n      }\n    };\n    const handleTokenomicsChange = (field, value) => {\n      setTokenData({\n        ...tokenData,\n        tokenomics: {\n          ...tokenData.tokenomics,\n          [field]: value\n        }\n      });\n    };\n    const handleGrowthDataChange = (index, value) => {\n      const updatedGrowthData = [...tokenData.growthData];\n      updatedGrowthData[index].growth = parseFloat(value);\n      setTokenData({\n        ...tokenData,\n        growthData: updatedGrowthData\n      });\n    };\n    const handleSubmit = e => {\n      e.preventDefault();\n      if (editMode) {\n        handleUpdateToken(tokenData);\n      } else {\n        handleAddTokenWithMetrics(tokenData);\n      }\n    };\n    return <div className=\"fixed inset-0 bg-white z-50 overflow-y-auto p-4 md:p-8\">\n      <div className=\"max-w-3xl mx-auto\">\n        <div className=\"flex justify-between items-center mb-8\">\n          <h2 className=\"text-2xl font-serif font-bold text-gray-900\">\n            {editMode ? 'Edit Token' : 'Add New Token'}\n          </h2>\n          <button onClick={() => {\n            setIsAddingToken(false);\n            setIsEditing(false);\n          }} className=\"p-2 hover:bg-gray-100 rounded-full\">\n            <X size={24} />\n          </button>\n        </div>\n        <form onSubmit={handleSubmit} className=\"space-y-8\">\n          <div>\n            <label htmlFor=\"contractAddress\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n              Contract Address\n            </label>\n            <input id=\"contractAddress\" type=\"text\" value={tokenData.contractAddress} onChange={e => handleTokenDataChange('contractAddress', e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"Enter token contract address\" disabled={editMode} required />\n          </div>\n          <div>\n            <label htmlFor=\"description\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n              Description\n            </label>\n            <textarea id=\"description\" value={tokenData.description} onChange={e => handleTokenDataChange('description', e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 h-32\" placeholder=\"Write about this token...\" />\n          </div>\n          <div className=\"border-t border-gray-200 pt-4\">\n            <h3 className=\"text-lg font-medium mb-4\">Startup Metrics</h3>\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n              <div>\n                <label htmlFor=\"arr\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Annual Recurring Revenue (USD)\n                </label>\n                <div className=\"flex items-center\">\n                  <span className=\"bg-gray-100 p-2 rounded-l\">$</span>\n                  <input id=\"arr\" type=\"number\" value={tokenData.startupMetrics.arr} onChange={e => handleTokenDataChange('startupMetrics.arr', parseFloat(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-r focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"100000\" min=\"0\" />\n                </div>\n              </div>\n              <div>\n                <label htmlFor=\"growthRate\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Growth Rate (% per month)\n                </label>\n                <div className=\"flex items-center\">\n                  <input id=\"growthRate\" type=\"number\" value={tokenData.startupMetrics.growthRate} onChange={e => handleTokenDataChange('startupMetrics.growthRate', parseFloat(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"10\" min=\"0\" max=\"100\" />\n                  <span className=\"bg-gray-100 p-2 rounded-r\">%</span>\n                </div>\n              </div>\n              <div>\n                <label htmlFor=\"activeUsers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Active Users\n                </label>\n                <input id=\"activeUsers\" type=\"number\" value={tokenData.startupMetrics.activeUsers} onChange={e => handleTokenDataChange('startupMetrics.activeUsers', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"5000\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"totalUsers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Total Users\n                </label>\n                <input id=\"totalUsers\" type=\"number\" value={tokenData.startupMetrics.totalUsers} onChange={e => handleTokenDataChange('startupMetrics.totalUsers', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"20000\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"category\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Category\n                </label>\n                <select id=\"category\" value={tokenData.startupMetrics.category} onChange={e => handleTokenDataChange('startupMetrics.category', e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\">\n                  <option value=\"DeFi\">DeFi</option>\n                  <option value=\"NFTs\">NFTs</option>\n                  <option value=\"Gaming\">Gaming</option>\n                  <option value=\"Infrastructure\">Infrastructure</option>\n                  <option value=\"Social\">Social</option>\n                  <option value=\"DAO\">DAO</option>\n                  <option value=\"Metaverse\">Metaverse</option>\n                  <option value=\"Other\">Other</option>\n                </select>\n              </div>\n              <div>\n                <label htmlFor=\"shortDescription\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Short Description\n                </label>\n                <input id=\"shortDescription\" type=\"text\" value={tokenData.startupMetrics.shortDescription} onChange={e => handleTokenDataChange('startupMetrics.shortDescription', e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"One-liner about the token\" />\n              </div>\n            </div>\n            <h4 className=\"text-sm font-medium text-gray-700 mb-2\">Social Followers</h4>\n            <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6\">\n              <div>\n                <label htmlFor=\"twitterFollowers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Twitter\n                </label>\n                <input id=\"twitterFollowers\" type=\"number\" value={tokenData.socialFollowers.twitter} onChange={e => setTokenData({\n                  ...tokenData,\n                  socialFollowers: {\n                    ...tokenData.socialFollowers,\n                    twitter: parseInt(e.target.value)\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"1000\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"telegramFollowers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Telegram\n                </label>\n                <input id=\"telegramFollowers\" type=\"number\" value={tokenData.socialFollowers.telegram} onChange={e => setTokenData({\n                  ...tokenData,\n                  socialFollowers: {\n                    ...tokenData.socialFollowers,\n                    telegram: parseInt(e.target.value)\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"500\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"discordFollowers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Discord\n                </label>\n                <input id=\"discordFollowers\" type=\"number\" value={tokenData.socialFollowers.discord} onChange={e => setTokenData({\n                  ...tokenData,\n                  socialFollowers: {\n                    ...tokenData.socialFollowers,\n                    discord: parseInt(e.target.value)\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"2000\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"redditFollowers\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Reddit\n                </label>\n                <input id=\"redditFollowers\" type=\"number\" value={tokenData.socialFollowers.reddit} onChange={e => setTokenData({\n                  ...tokenData,\n                  socialFollowers: {\n                    ...tokenData.socialFollowers,\n                    reddit: parseInt(e.target.value)\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"1000\" min=\"0\" />\n              </div>\n            </div>\n            <h3 className=\"text-lg font-medium mb-4\">Growth Chart Data</h3>\n            <div className=\"grid grid-cols-3 sm:grid-cols-6 gap-4 mb-6\">\n              {tokenData.growthData.map((data, index) => <div key={index}>\n                  <label htmlFor={`growth-${index}`} className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    {data.month}\n                  </label>\n                  <div className=\"flex items-center\">\n                    <input id={`growth-${index}`} type=\"number\" value={data.growth} onChange={e => handleGrowthDataChange(index, e.target.value)} className=\"w-full p-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" step=\"0.1\" />\n                    <span className=\"bg-gray-100 p-2 rounded-r\">%</span>\n                  </div>\n                </div>)}\n            </div>\n          </div>\n          <div className=\"border-t border-gray-200 pt-4\">\n            <h3 className=\"text-lg font-medium mb-4\">FOMO Settings</h3>\n            <div className=\"mb-4\">\n              <label htmlFor=\"refreshInterval\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Refresh Interval (minutes)\n              </label>\n              <input id=\"refreshInterval\" type=\"number\" value={tokenData.fomoSettings.refreshInterval} onChange={e => setTokenData({\n                ...tokenData,\n                fomoSettings: {\n                  ...tokenData.fomoSettings,\n                  refreshInterval: parseInt(e.target.value)\n                }\n              })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"1\" max=\"60\" />\n            </div>\n            <h4 className=\"text-sm font-medium text-gray-700 mb-2\">Component Weights (%)</h4>\n            <div className=\"grid grid-cols-2 gap-4 mb-4\">\n              <div>\n                <label htmlFor=\"mentionsWeight\" className=\"block text-sm text-gray-600 mb-1\">\n                  Mentions Weight\n                </label>\n                <input id=\"mentionsWeight\" type=\"number\" value={tokenData.fomoSettings.weights.mentions} onChange={e => setTokenData({\n                  ...tokenData,\n                  fomoSettings: {\n                    ...tokenData.fomoSettings,\n                    weights: {\n                      ...tokenData.fomoSettings.weights,\n                      mentions: parseInt(e.target.value)\n                    }\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n              </div>\n              <div>\n                <label htmlFor=\"sentimentWeight\" className=\"block text-sm text-gray-600 mb-1\">\n                  Sentiment Weight\n                </label>\n                <input id=\"sentimentWeight\" type=\"number\" value={tokenData.fomoSettings.weights.sentiment} onChange={e => setTokenData({\n                  ...tokenData,\n                  fomoSettings: {\n                    ...tokenData.fomoSettings,\n                    weights: {\n                      ...tokenData.fomoSettings.weights,\n                      sentiment: parseInt(e.target.value)\n                    }\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n              </div>\n              <div>\n                <label htmlFor=\"priceActionWeight\" className=\"block text-sm text-gray-600 mb-1\">\n                  Price Action Weight\n                </label>\n                <input id=\"priceActionWeight\" type=\"number\" value={tokenData.fomoSettings.weights.priceAction} onChange={e => setTokenData({\n                  ...tokenData,\n                  fomoSettings: {\n                    ...tokenData.fomoSettings,\n                    weights: {\n                      ...tokenData.fomoSettings.weights,\n                      priceAction: parseInt(e.target.value)\n                    }\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n              </div>\n              <div>\n                <label htmlFor=\"volumeWeight\" className=\"block text-sm text-gray-600 mb-1\">\n                  Volume Weight\n                </label>\n                <input id=\"volumeWeight\" type=\"number\" value={tokenData.fomoSettings.weights.volume} onChange={e => setTokenData({\n                  ...tokenData,\n                  fomoSettings: {\n                    ...tokenData.fomoSettings,\n                    weights: {\n                      ...tokenData.fomoSettings.weights,\n                      volume: parseInt(e.target.value)\n                    }\n                  }\n                })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n              </div>\n            </div>\n            <div className=\"mb-4\">\n              <label className=\"block text-sm font-medium text-gray-700 mb-2\">FOMO Thresholds</label>\n              <p className=\"text-xs text-gray-500 mb-3\">Set score thresholds for low, medium, and high FOMO levels</p>\n              <div className=\"grid grid-cols-3 gap-4\">\n                <div>\n                  <label htmlFor=\"low-threshold\" className=\"block text-sm text-gray-600 mb-1\">\n                    Low FOMO\n                  </label>\n                  <input id=\"low-threshold\" type=\"number\" value={tokenData.fomoSettings.threshold.low} onChange={e => setTokenData({\n                    ...tokenData,\n                    fomoSettings: {\n                      ...tokenData.fomoSettings,\n                      threshold: {\n                        ...tokenData.fomoSettings.threshold,\n                        low: parseInt(e.target.value)\n                      }\n                    }\n                  })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n                </div>\n                <div>\n                  <label htmlFor=\"medium-threshold\" className=\"block text-sm text-gray-600 mb-1\">\n                    Medium FOMO\n                  </label>\n                  <input id=\"medium-threshold\" type=\"number\" value={tokenData.fomoSettings.threshold.medium} onChange={e => setTokenData({\n                    ...tokenData,\n                    fomoSettings: {\n                      ...tokenData.fomoSettings,\n                      threshold: {\n                        ...tokenData.fomoSettings.threshold,\n                        medium: parseInt(e.target.value)\n                      }\n                    }\n                  })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n                </div>\n                <div>\n                  <label htmlFor=\"high-threshold\" className=\"block text-sm text-gray-600 mb-1\">\n                    High FOMO\n                  </label>\n                  <input id=\"high-threshold\" type=\"number\" value={tokenData.fomoSettings.threshold.high} onChange={e => setTokenData({\n                    ...tokenData,\n                    fomoSettings: {\n                      ...tokenData.fomoSettings,\n                      threshold: {\n                        ...tokenData.fomoSettings.threshold,\n                        high: parseInt(e.target.value)\n                      }\n                    }\n                  })} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" min=\"0\" max=\"100\" />\n                </div>\n              </div>\n            </div>\n          </div>\n          <div className=\"border-t border-gray-200 pt-4\">\n            <h3 className=\"text-lg font-medium mb-4\">Tokenomics</h3>\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n              <div>\n                <label htmlFor=\"totalSupply\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Total Supply\n                </label>\n                <input id=\"totalSupply\" type=\"number\" value={tokenData.tokenomics.totalSupply} onChange={e => handleTokenomicsChange('totalSupply', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"1000000000\" min=\"0\" />\n              </div>\n              <div>\n                <label htmlFor=\"circulatingSupply\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Circulating Supply\n                </label>\n                <input id=\"circulatingSupply\" type=\"number\" value={tokenData.tokenomics.circulatingSupply} onChange={e => handleTokenomicsChange('circulatingSupply', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"400000000\" min=\"0\" />\n              </div>\n            </div>\n            <h4 className=\"text-sm font-medium text-gray-700 mb-2\">Revenue (USD)</h4>\n            <div className=\"grid grid-cols-2 gap-4 mb-4\">\n              <div>\n                <label htmlFor=\"totalRevenue\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Total Revenue\n                </label>\n                <div className=\"flex items-center\">\n                  <span className=\"bg-gray-100 p-2 rounded-l\">$</span>\n                  <input id=\"totalRevenue\" type=\"number\" value={tokenData.tokenomics.revenue.total} onChange={e => handleTokenDataChange('tokenomics.revenue.total', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-r focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"2500000\" min=\"0\" />\n                </div>\n              </div>\n              <div>\n                <label htmlFor=\"launchcoinRevenue\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Launchcoin Revenue\n                </label>\n                <div className=\"flex items-center\">\n                  <span className=\"bg-gray-100 p-2 rounded-l\">$</span>\n                  <input id=\"launchcoinRevenue\" type=\"number\" value={tokenData.tokenomics.revenue.launchcoin} onChange={e => handleTokenDataChange('tokenomics.revenue.launchcoin', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-r focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"850000\" min=\"0\" />\n                </div>\n              </div>\n              <div>\n                <label htmlFor=\"tradingRevenue\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Trading Revenue\n                </label>\n                <div className=\"flex items-center\">\n                  <span className=\"bg-gray-100 p-2 rounded-l\">$</span>\n                  <input id=\"tradingRevenue\" type=\"number\" value={tokenData.tokenomics.revenue.trading} onChange={e => handleTokenDataChange('tokenomics.revenue.trading', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-r focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"950000\" min=\"0\" />\n                </div>\n              </div>\n              <div>\n                <label htmlFor=\"stakingRevenue\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Staking Revenue\n                </label>\n                <div className=\"flex items-center\">\n                  <span className=\"bg-gray-100 p-2 rounded-l\">$</span>\n                  <input id=\"stakingRevenue\" type=\"number\" value={tokenData.tokenomics.revenue.staking} onChange={e => handleTokenDataChange('tokenomics.revenue.staking', parseInt(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded-r focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"700000\" min=\"0\" />\n                </div>\n              </div>\n            </div>\n            <h4 className=\"text-sm font-medium text-gray-700 mb-2\">Distribution</h4>\n            <p className=\"text-sm text-gray-500 mb-4\">\n              Token distribution can be edited directly in the Tokenomics tab after saving.\n            </p>\n          </div>\n          <div className=\"flex justify-end space-x-4\">\n            <button type=\"button\" onClick={() => {\n              setIsAddingToken(false);\n              setIsEditing(false);\n            }} className=\"px-4 py-2 text-gray-700 bg-gray-100 rounded hover:bg-gray-200\">\n              Cancel\n            </button>\n            <button type=\"submit\" className=\"px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700 flex items-center\" disabled={isLoadingToken}>\n              {isLoadingToken ? <>\n                  <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                  Loading...\n                </> : editMode ? <>\n                  <Edit size={18} className=\"mr-2\" />\n                  Update Token\n                </> : <>\n                  <Plus size={18} className=\"mr-2\" />\n                  Add Token\n                </>}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>;\n  };\n  const TokenomicsView = ({\n    token\n  }) => {\n    const [imageUrl, setImageUrl] = useState('');\n    const [imageFile, setImageFile] = useState(null);\n    const [isLoading, setIsLoading] = useState(false);\n    const [tokenomicsLoaded, setTokenomicsLoaded] = useState(false);\n    const [showTimelineSection,,] = useState(false);\n    useEffect(() => {\n      if (token && token.contractAddress && !tokenomicsLoaded) {\n        fetchTokenomicsImage(token.contractAddress);\n        setTokenomicsLoaded(true);\n      }\n    }, [token, tokenomicsLoaded]);\n    const fetchTimelineMetrics = async contractAddress => {\n      if (!contractAddress) return;\n      try {\n        setIsLoading(true);\n        console.log(`Fetching timeline metrics for ${contractAddress}`);\n        const existingData = await stateClient.getEntity('startupMetrics', contractAddress);\n        console.log(\"Fetched data:\", existingData);\n        if (existingData && existingData.history && Array.isArray(existingData.history)) {\n          console.log(`Loaded ${existingData.history.length} existing metrics`);\n          const sortedMetrics = [...existingData.history].sort((a, b) => new Date(a.date) - new Date(b.date));\n          setTimelineMetrics(sortedMetrics);\n        } else {\n          console.log(\"No existing metrics found or invalid format\");\n          setTimelineMetrics([]);\n        }\n      } catch (error) {\n        console.error(\"Error fetching timeline metrics:\", error);\n        setTimelineMetrics([]);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    useEffect(() => {\n      if (token && token.contractAddress) {\n        fetchTimelineMetrics(token.contractAddress);\n      }\n    }, [token]);\n    const formatDateForInput = date => {\n      const d = new Date(date);\n      return d.toISOString().split('T')[0];\n    };\n    const calculatePercentageChange = (currentValue, previousValue) => {\n      if (!previousValue) return null;\n      return (currentValue - previousValue) / previousValue * 100;\n    };\n    const handleAddTimelineMetric = async () => {\n      if (!token || !token.contractAddress || !timelineValue.trim()) return;\n      setIsSubmittingTimeline(true);\n      try {\n        const metricEntry = {\n          id: `${timelineLabel || 'metric'}-${new Date(timelineDate).toISOString().split('T')[0]}-${Date.now()}`,\n          title: timelineLabel || token.symbol || 'Metric',\n          value: parseFloat(timelineValue),\n          date: timelineDate.toISOString(),\n          timestamp: new Date().toISOString(),\n          tokenId: token.contractAddress\n        };\n        try {\n          await saveEntity('startupMetric', metricEntry);\n          console.log(\"Metric saved successfully as individual entity\");\n          try {\n            const allMetrics = await stateClient.getEntities('startupMetric');\n            const tokenMetrics = allMetrics.filter(metric => metric.tokenId === token.contractAddress);\n            if (tokenMetrics && tokenMetrics.length > 0) {\n              console.log(`Loaded ${tokenMetrics.length} metrics for this token`);\n              const sortedMetrics = [...tokenMetrics].sort((a, b) => new Date(a.date) - new Date(b.date));\n              setTimelineMetrics(sortedMetrics);\n            } else {\n              console.log(\"No metrics found for this token\");\n              setTimelineMetrics([]);\n            }\n          } catch (error) {\n            console.error(\"Error fetching updated metrics:\", error);\n          }\n          setTimelineValue('');\n          setTimelineDate(new Date());\n          setTimelineLabel('');\n          setShowSuccessMessage(true);\n          setTimeout(() => {\n            setShowSuccessMessage(false);\n          }, 3000);\n        } catch (saveError) {\n          console.error(\"Detailed save error:\", saveError);\n          throw new Error(`Save operation failed: ${saveError.message || \"Unknown error\"}`);\n        }\n      } catch (error) {\n        console.error(\"Error adding timeline metric:\", error);\n        if (error.message.includes(\"network\") || error.message.includes(\"timeout\")) {\n          alert(\"Network error while saving. Please check your connection and try again.\");\n        } else if (error.message.includes(\"permission\") || error.message.includes(\"access\")) {\n          alert(\"Permission error. You may not have rights to save this data.\");\n        } else {\n          alert(`Failed to save metric: ${error.message || \"Unknown error\"}. Please try again.`);\n        }\n      } finally {\n        setIsSubmittingTimeline(false);\n      }\n    };\n    const fetchTokenomicsImage = async contractAddress => {\n      setIsLoading(true);\n      try {\n        const tokenomicsImage = await stateClient.getEntity('tokenomicsImage', contractAddress);\n        if (tokenomicsImage && tokenomicsImage.imageUrl) {\n          setImageUrl(tokenomicsImage.imageUrl);\n        } else {\n          setImageUrl('');\n        }\n      } catch (error) {\n        console.error(\"Error fetching tokenomics image:\", error);\n        setImageUrl('');\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    const handleImageChange = e => {\n      if (e.target.files && e.target.files[0]) {\n        setImageFile(e.target.files[0]);\n      }\n    };\n    const handleImageUrlChange = e => {\n      setImageUrl(e.target.value);\n    };\n    const saveTokenomicsImage = async () => {\n      if (!token || !isAdmin) return;\n      setIsLoading(true);\n      try {\n        let finalImageUrl = imageUrl;\n        if (imageFile) {\n          const reader = new FileReader();\n          reader.readAsDataURL(imageFile);\n          await new Promise((resolve, reject) => {\n            reader.onload = () => {\n              finalImageUrl = reader.result;\n              resolve();\n            };\n            reader.onerror = reject;\n          });\n        }\n        if (!finalImageUrl) {\n          alert('Please enter an image URL or upload an image file');\n          setIsLoading(false);\n          return;\n        }\n        const tokenomicsImageData = {\n          id: token.contractAddress,\n          imageUrl: finalImageUrl,\n          lastUpdated: new Date().toISOString()\n        };\n        try {\n          await stateClient.createEntity('tokenomicsImage', tokenomicsImageData);\n        } catch (error) {\n          await stateClient.updateEntity('tokenomicsImage', token.contractAddress, tokenomicsImageData);\n        }\n        setImageFile(null);\n        alert('Tokenomics image saved successfully!');\n      } catch (error) {\n        console.error(\"Error saving tokenomics image:\", error);\n        alert('Failed to save image. Please try again.');\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    return <div className=\"bg-white p-4 rounded-lg shadow-sm border border-gray-200\">\n      {isLoading ? <div className=\"flex flex-col justify-center items-center h-64\">\n        <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n        <span className=\"text-gray-700 font-medium\">Sabar Nggih...</span>\n      </div> : showTimelineSection ? <div className=\"mb-8 timeline-metrics\">\n          <div className=\"flex justify-between items-center mb-4\">\n            <h3 className=\"text-lg font-medium\">Metrics Timeline</h3>\n            {isAdmin && creatorMode && !isAddingTimeline && <button onClick={() => setIsAddingTimeline(true)} className=\"flex items-center px-3 py-1.5 bg-gray-800 text-white text-sm rounded hover:bg-gray-900\">\n                <Plus size={16} className=\"mr-1\" />\n                Add Timeline Data\n              </button>}\n          </div>\n          \n          {isAdmin && creatorMode && isAddingTimeline && <div className=\"mb-6 p-4 bg-gray-100 border border-gray-200 rounded-lg\">\n              <div className=\"flex justify-between items-center mb-3\">\n                <h3 className=\"text-sm font-medium text-gray-800\">Add Timeline Metric</h3>\n                <button onClick={() => setIsAddingTimeline(false)} className=\"text-gray-500 hover:text-gray-700\">\n                  <X size={18} />\n                </button>\n              </div>\n              \n              <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-gray-700 mb-1\">Value</label>\n                  <input type=\"number\" value={timelineValue} onChange={e => setTimelineValue(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"e.g., 5000\" />\n                </div>\n                <div>\n                  <label className=\"block text-sm font-medium text-gray-700 mb-1\">Date</label>\n                  <input type=\"date\" value={formatDateForInput(timelineDate)} onChange={e => setTimelineDate(new Date(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n                </div>\n                <div>\n                  <label className=\"block text-sm font-medium text-gray-700 mb-1\">Label (Optional)</label>\n                  <input type=\"text\" value={timelineLabel} onChange={e => setTimelineLabel(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"e.g., Q1 2025\" />\n                </div>\n              </div>\n              \n              <div className=\"flex justify-end\">\n                <button onClick={handleAddTimelineMetric} className=\"px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-900 flex items-center font-mono tracking-tight\" disabled={isSubmittingTimeline || !timelineValue.trim()}>\n                  {isSubmittingTimeline ? <RefreshCw size={16} className=\"mr-2 animate-spin\" /> : <span className=\"mr-2\">$></span>}\n                  {isSubmittingTimeline ? 'PROCESSING...' : 'SUBMIT'}\n                </button>\n              </div>\n            </div>}\n          \n        {showSuccessMessage && <div className=\"mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-800 flex items-center font-mono animate-fadeIn\">\n              <span className=\"mr-2\">$></span>\n              <span className=\"font-medium\">DATA SAVED SUCCESSFULLY</span>\n              <span className=\"ml-2 text-xs opacity-70\">Refreshed timeline with new data point</span>\n            </div>}\n          \n        {timelineMetrics.length > 0 ? <div className=\"space-y-6\">\n              <div className=\"flex justify-between items-center mb-2\">\n                <h4 className=\"text-sm font-medium text-gray-700\">Visualization</h4>\n                <div className=\"flex space-x-2\">\n                  <button onClick={() => setTimelineChartType('line')} className={`px-2 py-1 text-xs rounded ${timelineChartType === 'line' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-800'}`}>\n                    Line\n                  </button>\n                  <button onClick={() => setTimelineChartType('bar')} className={`px-2 py-1 text-xs rounded ${timelineChartType === 'bar' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-800'}`}>\n                    Bar\n                  </button>\n                  <button onClick={() => setTimelineChartType('candlestick')} className={`px-2 py-1 text-xs rounded ${timelineChartType === 'candlestick' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-800'}`}>\n                    Candlestick\n                  </button>\n                </div>\n              </div>\n              \n              {}\n              <div className=\"bg-white p-4 border border-gray-200 rounded-lg\">\n                {timelineMetrics.map((metric, index) => <div key={metric.id} className=\"mb-1\">\n                    <span className=\"text-gray-600\">{new Date(metric.date).toLocaleDateString()}: </span>\n                    <span className=\"font-medium\">{metric.value}</span>\n                    {metric.label && <span className=\"ml-2 text-xs bg-gray-100 px-2 py-0.5 rounded\">{metric.label}</span>}\n                  </div>)}\n              </div>\n              \n              <div className=\"overflow-x-auto\">\n                <table className=\"min-w-full divide-y divide-gray-200\">\n                  <thead className=\"bg-gray-50\">\n                    <tr>\n                      <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Date</th>\n                      <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Label</th>\n                      <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Value</th>\n                      <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Change</th>\n                    </tr>\n                  </thead>\n                  <tbody className=\"bg-white divide-y divide-gray-200\">\n                    {timelineMetrics.map((metric, index) => {\n                  const prevValue = index > 0 ? timelineMetrics[index - 1].value : null;\n                  const percentChange = calculatePercentageChange(metric.value, prevValue);\n                  return <tr key={metric.id}>\n                          <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n                            {new Date(metric.date).toLocaleDateString()}\n                          </td>\n                          <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n                            {metric.label}\n                          </td>\n                          <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n                            {metric.value.toLocaleString()}\n                          </td>\n                          <td className=\"px-6 py-4 whitespace-nowrap text-sm\">\n                            {percentChange !== null ? <span className={percentChange >= 0 ? \"text-green-600\" : \"text-red-600\"}>\n                                {percentChange >= 0 ? \"+\" : \"\"}{percentChange.toFixed(2)}%\n                              </span> : \"-\"}\n                          </td>\n                        </tr>;\n                })}\n                  </tbody>\n                </table>\n              </div>\n            </div> : <div className=\"text-center py-12 bg-gray-50 rounded-lg border border-gray-200\">\n              <div className=\"bg-gray-100 rounded-full p-4 inline-block mb-4\">\n                <BarChart size={30} className=\"text-gray-400\" />\n              </div>\n              <h3 className=\"text-lg font-medium mb-2\">No Timeline Data</h3>\n              <p className=\"text-gray-600 max-w-md mx-auto mb-6\">\n                {isAdmin && creatorMode ? \"Add data points to track metrics over time and visualize growth trends.\" : \"No timeline metrics have been added for this token yet.\"}\n              </p>\n              {isAdmin && creatorMode && <button onClick={() => setIsAddingTimeline(true)} className=\"px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-900 inline-flex items-center\">\n                  <Plus size={18} className=\"mr-2\" />\n                  Add First Data Point\n                </button>}\n            </div>}\n        </div> : <>\n            {imageUrl ? <div className=\"flex justify-center\">\n                <div className=\"max-w-full border border-gray-200 rounded-lg overflow-hidden shadow-sm\">\n                  <img src={imageUrl} alt=\"Tokenomics diagram\" className=\"max-w-full h-auto object-contain\" />\n                </div>\n              </div> : <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n                <div className=\"bg-gray-100 rounded-full p-4 mb-4\">\n                  <ImageIcon size={30} className=\"text-gray-400\" />\n                </div>\n                <h3 className=\"text-lg font-medium mb-2\">No Tokenomics Image</h3>\n                <p className=\"text-gray-600 max-w-md mb-4\">\n                  {isAdmin && creatorMode ? \"Upload an image showing the token's distribution and flywheel.\" : \"No tokenomics image has been added for this token yet.\"}\n                </p>\n              </div>}\n            {isAdmin && creatorMode && <div className=\"border-t border-gray-200 pt-4 mt-4\">                \n                <div className=\"grid grid-cols-1 gap-4 mb-4\">\n                  <div>\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                      Image URL\n                    </label>\n                    <input type=\"text\" value={imageUrl} onChange={handleImageUrlChange} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"https://example.com/tokenomics.png\" />\n                  </div>\n                  <div>\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                      Or Upload Image\n                    </label>\n                    <div className=\"flex items-center\">\n                      <div className=\"relative flex-1\">\n                        <input type=\"file\" id=\"image-upload\" onChange={handleImageChange} className=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\" accept=\"image/*\" />\n                        <div className=\"w-full p-2 border border-gray-300 rounded flex items-center bg-gray-50 text-gray-500\">\n                          {imageFile ? imageFile.name : \"Choose file...\"}\n                        </div>\n                      </div>\n                      <button type=\"button\" className=\"ml-2 flex items-center justify-center px-4 py-2 bg-gray-100 border border-gray-300 rounded hover:bg-gray-200\" onClick={() => document.getElementById('image-upload').click()}>\n                        <ImageIcon size={18} className=\"mr-2\" />\n                        <span>Browse</span>\n                      </button>\n                    </div>\n                  </div>\n                </div>\n                <div className=\"flex justify-end\">\n                  <button onClick={saveTokenomicsImage} className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" disabled={isLoading}>\n                    {isLoading ? <>\n                        <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                        Saving...\n                      </> : <>\n                        <ImageIcon size={18} className=\"mr-2\" />\n                        Save Image\n                      </>}\n                  </button>\n                </div>\n              </div>}\n          </>}\n      </div>;\n  };\n  const generateChartData = token => {\n    const currentPrice = token?.price || 0.01676;\n    const percentageChange = token?.priceChangeIn24h || -32.95;\n    const startingPrice = currentPrice / (1 + percentageChange / 100);\n    const data = [];\n    const maxDataPoints = 30;\n    const dataPoints = chartTimeframe === '24h' ? 24 : chartTimeframe === '7d' ? 7 : maxDataPoints;\n    for (let i = 0; i < dataPoints; i++) {\n      const date = new Date();\n      if (chartTimeframe === '24h') {\n        date.setHours(date.getHours() - (dataPoints - i));\n      } else if (chartTimeframe === '7d') {\n        date.setDate(date.getDate() - (dataPoints - i) / 7);\n      } else {\n        date.setDate(date.getDate() - (dataPoints - i));\n      }\n      const progressFactor = i / (dataPoints - 1);\n      const decline = startingPrice - (startingPrice - currentPrice) * progressFactor;\n      const variationFactor = 0.02 * (1 - progressFactor);\n      const variation = (Math.random() - 0.5) * 2 * variationFactor * decline;\n      const price = decline + variation;\n      const formattedDate = chartTimeframe === '24h' ? date.toLocaleTimeString('en-US', {\n        hour: '2-digit',\n        minute: '2-digit'\n      }) : date.toLocaleDateString('en-US', {\n        month: 'short',\n        day: 'numeric'\n      });\n      data.push({\n        date: formattedDate,\n        price: price,\n        timestamp: date.getTime()\n      });\n    }\n    return data;\n  };\n  const TokenMetrics = ({\n    token\n  }) => {\n    const [metricType, setMetricType] = useState('static');\n    const [metricName, setMetricName] = useState('');\n    const [metricValue, setMetricValue] = useState('');\n    const [metricDate, setMetricDate] = useState(new Date());\n    const [isSubmitting, setIsSubmitting] = useState(false);\n    const [showSuccessMessage, setShowSuccessMessage] = useState(false);\n    const [errorMessage, setErrorMessage] = useState('');\n    const formatDateForInput = date => {\n      const d = new Date(date);\n      return d.toISOString().split('T')[0];\n    };\n    const calculatePercentageChange = (currentValue, previousValue) => {\n      if (!previousValue) return null;\n      return (currentValue - previousValue) / previousValue * 100;\n    };\n    const [staticMetrics, setStaticMetrics] = useState([]);\n    const [isAddingMetric, setIsAddingMetric] = useState(false);\n    const [isLoading, setIsLoading] = useState(true);\n    const [, setMetricsLoaded] = useState(false);\n    const [dynamicMetrics, setDynamicMetrics] = useState([]);\n    const [, setDynamicMetricsLoaded] = useState(false);\n    useEffect(() => {\n      if (token && token.contractAddress) {\n        fetchMetrics(token.contractAddress);\n      }\n    }, [token]);\n    const fetchMetrics = async contractAddress => {\n      setIsLoading(true);\n      try {\n        const staticData = await stateClient.getEntities('startupMetric', {\n          type: 'static',\n          tokenId: contractAddress\n        });\n        if (staticData && staticData.length > 0) {\n          setStaticMetrics(staticData);\n        } else {\n          setStaticMetrics([]);\n        }\n        const dynamicData = await stateClient.getEntities('startupMetric', {\n          type: 'dynamic',\n          tokenId: contractAddress\n        });\n        if (dynamicData && dynamicData.length > 0) {\n          const sortedMetrics = [...dynamicData].sort((a, b) => new Date(a.date) - new Date(b.date));\n          const groupedMetrics = {};\n          sortedMetrics.forEach(metric => {\n            if (!groupedMetrics[metric.name]) {\n              groupedMetrics[metric.name] = [];\n            }\n            groupedMetrics[metric.name].push(metric);\n          });\n          setDynamicMetrics(groupedMetrics);\n        } else {\n          setDynamicMetrics({});\n        }\n        setMetricsLoaded(true);\n        setDynamicMetricsLoaded(true);\n      } catch (error) {\n        console.error(\"Error fetching metrics:\", error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    const handleAddMetric = async () => {\n      if (!token || !token.contractAddress || !metricName.trim() || !metricValue.trim()) {\n        setErrorMessage(\"Please enter both name and value for the metric\");\n        return;\n      }\n      setIsSubmitting(true);\n      setErrorMessage('');\n      try {\n        const currentTime = new Date().toISOString();\n        const metricEntry = {\n          id: `${token.contractAddress}-${metricName}-${currentTime}`,\n          name: metricName,\n          value: parseFloat(metricValue),\n          tokenId: token.contractAddress,\n          timestamp: currentTime,\n          type: metricType\n        };\n        if (metricType === 'dynamic') {\n          metricEntry.date = metricDate.toISOString();\n        }\n        await saveEntity('startupMetric', metricEntry);\n        setShowSuccessMessage(true);\n        setTimeout(() => setShowSuccessMessage(false), 3000);\n        setMetricName('');\n        setMetricValue('');\n        setMetricDate(new Date());\n        fetchMetrics(token.contractAddress);\n      } catch (error) {\n        console.error(\"Detailed save error:\", error);\n        setErrorMessage(error.message || \"Failed to save metric. Please try again.\");\n      } finally {\n        setIsSubmitting(false);\n      }\n    };\n    const handleDeleteMetric = async metricId => {\n      if (!confirm('Are you sure you want to delete this metric?')) return;\n      try {\n        await stateClient.deleteEntity('startupMetric', metricId);\n        fetchMetrics(token.contractAddress);\n      } catch (error) {\n        console.error(\"Error deleting metric:\", error);\n        setErrorMessage(\"Failed to delete metric. Please try again.\");\n      }\n    };\n    const renderDynamicMetricsChart = (metricName, metricsData) => {\n      if (!metricsData || metricsData.length === 0) return null;\n      const sortedData = [...metricsData].sort((a, b) => new Date(a.date) - new Date(b.date));\n      const chartData = sortedData.map(metric => ({\n        date: new Date(metric.date).toLocaleDateString(),\n        value: metric.value\n      }));\n      return <div className=\"border border-gray-200 rounded-lg p-4 bg-white\">\n          <h4 className=\"text-sm font-medium text-gray-700 mb-2\">{metricName} Timeline</h4>\n          <div className=\"h-40 bg-gray-50 rounded overflow-hidden\">\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <LineChart data={chartData} margin={{\n              top: 5,\n              right: 5,\n              left: 5,\n              bottom: 5\n            }}>\n                <CartesianGrid strokeDasharray=\"3 3\" stroke=\"#f0f0f0\" />\n                <XAxis dataKey=\"date\" stroke=\"#666\" fontSize={10} tickLine={false} axisLine={{\n                stroke: '#e0e0e0'\n              }} />\n                <YAxis stroke=\"#666\" fontSize={10} tickLine={false} axisLine={{\n                stroke: '#e0e0e0'\n              }} width={40} />\n                <Tooltip contentStyle={{\n                backgroundColor: 'white',\n                border: '1px solid #e0e0e0',\n                borderRadius: '4px',\n                fontSize: '12px'\n              }} />\n                <Line type=\"monotone\" dataKey=\"value\" stroke=\"#3b82f6\" strokeWidth={2} dot={{\n                r: 3,\n                strokeWidth: 1\n              }} activeDot={{\n                r: 5,\n                strokeWidth: 0,\n                fill: '#2563eb'\n              }} />\n              </LineChart>\n            </ResponsiveContainer>\n          </div>\n          <div className=\"mt-2\">\n            <div className=\"text-xs text-gray-500\">Latest: {chartData[chartData.length - 1].value.toLocaleString()} ({chartData[chartData.length - 1].date})</div>\n          </div>\n        </div>;\n    };\n    const renderMetricCards = () => {\n      if (metricType === 'static') {\n        return <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n            {staticMetrics.length > 0 ? staticMetrics.map(metric => <div key={metric.id} className=\"bg-white p-4 rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow\">\n                  <div className=\"flex justify-between items-start\">\n                    <div>\n                      <h3 className=\"text-lg font-bold\">{metric.name}</h3>\n                      <div className=\"text-2xl font-mono mt-2\">{metric.value.toLocaleString()}</div>\n                    </div>\n                    {isAdmin && creatorMode && <button onClick={() => handleDeleteMetric(metric.id)} className=\"p-1 text-red-500 hover:bg-red-50 rounded\">\n                        <Trash2 size={16} />\n                      </button>}\n                  </div>\n                  <div className=\"text-xs text-gray-500 mt-3\">\n                    Added {new Date(metric.timestamp).toLocaleDateString()}\n                  </div>\n                </div>) : <div className=\"col-span-3 text-center py-6 text-gray-500\">\n                No static metrics added yet\n              </div>}\n          </div>;\n      } else {\n        return <div className=\"space-y-6\">\n            {Object.keys(dynamicMetrics).length > 0 ? Object.entries(dynamicMetrics).map(([name, metrics]) => <div key={name} className=\"space-y-2\">\n                  <h3 className=\"text-lg font-medium\">{name}</h3>\n                  {renderDynamicMetricsChart(name, metrics)}\n                  \n                  <div className=\"overflow-x-auto\">\n                    <table className=\"min-w-full divide-y divide-gray-200\">\n                      <thead className=\"bg-gray-50\">\n                        <tr>\n                          <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Date</th>\n                          <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Value</th>\n                          <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Change</th>\n                          {isAdmin && creatorMode && <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Actions</th>}\n                        </tr>\n                      </thead>\n                      <tbody className=\"bg-white divide-y divide-gray-200\">\n                        {metrics.map((metric, index) => {\n                    const prevValue = index > 0 ? metrics[index - 1].value : null;\n                    const percentChange = calculatePercentageChange(metric.value, prevValue);\n                    return <tr key={metric.id}>\n                              <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n                                {new Date(metric.date).toLocaleDateString()}\n                              </td>\n                              <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n                                {metric.value.toLocaleString()}\n                              </td>\n                              <td className=\"px-6 py-4 whitespace-nowrap text-sm\">\n                                {percentChange !== null ? <span className={percentChange >= 0 ? \"text-green-600\" : \"text-red-600\"}>\n                                    {percentChange >= 0 ? \"+\" : \"\"}{percentChange.toFixed(2)}%\n                                  </span> : \"-\"}\n                              </td>\n                              {isAdmin && creatorMode && <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n                                  <button onClick={() => handleDeleteMetric(metric.id)} className=\"text-red-500 hover:text-red-700\">\n                                    <Trash2 size={14} />\n                                  </button>\n                                </td>}\n                            </tr>;\n                  })}\n                      </tbody>\n                    </table>\n                  </div>\n                </div>) : <div className=\"text-center py-6 text-gray-500\">\n                No dynamic metrics added yet\n              </div>}\n          </div>;\n      }\n    };\n    if (!token) return null;\n    return <div className=\"bg-white p-4 rounded-lg shadow-sm border border-gray-200\">\n        {token?.description && <div className=\"mb-6 pb-4 border-b border-gray-200\">\n            <h3 className=\"text-lg font-medium mb-2\">About {token.symbol}</h3>\n            <p className=\"text-gray-700\">{token.description}</p>\n          </div>}\n        \n        <div className=\"flex justify-between items-center mb-6\">\n          <h2 className=\"text-lg font-bold\">Startup Metrics</h2>\n          \n          {isAdmin && creatorMode && <div className=\"flex space-x-3\">\n              <button onClick={() => setIsAddingMetric(!isAddingMetric)} className=\"flex items-center px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700\">\n                {isAddingMetric ? <>\n                    <X size={16} className=\"mr-1\" />\n                    Cancel\n                  </> : <>\n                    <Plus size={16} className=\"mr-1\" />\n                    Add Metric\n                  </>}\n              </button>\n            </div>}\n        </div>\n      {isLoading ? <div className=\"flex flex-col justify-center items-center h-64\">\n            <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n            <span className=\"text-gray-700 font-medium\">Sabar Nggih...</span>\n          </div> : <>\n            {isAdmin && creatorMode && isAddingMetric && <div className=\"mb-6 p-5 bg-blue-50 border border-blue-200 rounded-lg shadow-sm\">\n                <div className=\"flex justify-between items-center mb-4\">\n                  <h3 className=\"text-lg font-medium text-blue-800\">Add New Metric</h3>\n                  <button onClick={() => setIsAddingMetric(false)} className=\"text-gray-500 hover:text-gray-700\">\n                    <X size={18} />\n                  </button>\n                </div>\n                \n                {}\n                <div className=\"mb-5\">\n                  <div className=\"flex justify-center space-x-2 p-2 bg-white rounded-lg border border-gray-200\">\n                    <button onClick={() => setMetricType('static')} className={`px-4 py-2 rounded-md ${metricType === 'static' ? 'bg-blue-600 text-white font-medium' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>\n                      Static Data\n                    </button>\n                    <button onClick={() => setMetricType('dynamic')} className={`px-4 py-2 rounded-md ${metricType === 'dynamic' ? 'bg-blue-600 text-white font-medium' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>\n                      Dynamic Data\n                    </button>\n                  </div>\n                  <div className=\"mt-2 text-xs text-gray-600 text-center\">\n                    {metricType === 'static' ? 'Static data is a single value that represents the current state' : 'Dynamic data tracks values over time to show trends and growth'}\n                  </div>\n                </div>\n                \n                {}\n                {errorMessage && <div className=\"mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm\">\n                    {errorMessage}\n                  </div>}\n                \n                {}\n                <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n                  <div className=\"md:col-span-2\">\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                      Metric Name\n                    </label>\n                    <input type=\"text\" value={metricName} onChange={e => setMetricName(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"e.g., Monthly Active Users, Revenue, etc.\" />\n                  </div>\n                  \n                  <div className={metricType === 'dynamic' ? 'md:col-span-1' : 'md:col-span-2'}>\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                      Value\n                    </label>\n                    <input type=\"number\" value={metricValue} onChange={e => setMetricValue(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"e.g., 5000\" />\n                  </div>\n                  \n                  {metricType === 'dynamic' && <div>\n                      <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                        Date\n                      </label>\n                      <input type=\"date\" value={formatDateForInput(metricDate)} onChange={e => setMetricDate(new Date(e.target.value))} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n                    </div>}\n                </div>\n                \n                {}\n                <div className=\"flex justify-end\">\n                  <button onClick={handleAddMetric} className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" disabled={isSubmitting || !metricName.trim() || !metricValue.trim()}>\n                    {isSubmitting ? <>\n                        <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                        Saving...\n                      </> : <>\n                        <Save size={18} className=\"mr-2\" />\n                        Save Metric\n                      </>}\n                  </button>\n                </div>\n                \n                {}\n                {showSuccessMessage && <div className=\"mt-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-800 flex items-center\">\n                    <div className=\"mr-2 bg-green-100 rounded-full p-1\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4 text-green-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n                      </svg>\n                    </div>\n                    <span className=\"font-medium\">Metric saved successfully!</span>\n                  </div>}\n              </div>}\n            \n            {}\n            <div className=\"mb-5\">\n              <div className=\"border-b border-gray-200\">\n                <nav className=\"-mb-px flex space-x-8\">\n                  <button onClick={() => setMetricType('static')} className={`whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm ${metricType === 'static' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>\n                    Static Metrics\n                  </button>\n                  <button onClick={() => setMetricType('dynamic')} className={`whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm ${metricType === 'dynamic' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>\n                    Dynamic Metrics\n                  </button>\n                </nav>\n              </div>\n            </div>\n            \n            {}\n            {renderMetricCards()}\n          </>}\n        </div>;\n  };\n  const SocialMediaStats = ({\n    token,\n    type = 'alpha'\n  }) => {\n    const [embedCode, setEmbedCode] = useState('');\n    const [embedTitle, setEmbedTitle] = useState('');\n    const [embedDescription, setEmbedDescription] = useState('');\n    const [embedError, setEmbedError] = useState('');\n    const [savedEmbeds, setSavedEmbeds] = useState([]);\n    const [isLoadingEmbed, setIsLoadingEmbed] = useState(false);\n    const [editingEmbedIndex, setEditingEmbedIndex] = useState(null);\n    const [showAddEmbedForm, setShowAddEmbedForm] = useState(false);\n    const [previewEmbed, setPreviewEmbed] = useState('');\n    const embedContainerRefs = useRef([]);\n    const [embedsLoaded, setEmbedsLoaded] = useState(false);\n    const entityName = type === 'alpha' ? 'socialEmbeds' : 'updateEmbeds';\n    useEffect(() => {\n      if (token && token.contractAddress && !embedsLoaded) {\n        fetchEmbeds(token.contractAddress);\n        setEmbedsLoaded(true);\n      }\n    }, [token, embedsLoaded, type, entityName]);\n    const fetchEmbeds = async contractAddress => {\n      setIsLoadingEmbed(true);\n      try {\n        const savedEmbedData = await stateClient.getEntity(entityName, contractAddress);\n        if (savedEmbedData && savedEmbedData.embeds && Array.isArray(savedEmbedData.embeds)) {\n          setSavedEmbeds(savedEmbedData.embeds);\n          setTimeout(() => {\n            loadAllEmbedScripts();\n          }, 100);\n        } else {\n          if (type === 'alpha') {\n            try {\n              const oldEmbedData = await stateClient.getEntity('socialEmbed', contractAddress);\n              if (oldEmbedData && oldEmbedData.embedCode) {\n                const newEmbedFormat = [{\n                  id: Date.now().toString(),\n                  title: 'Social Media Embed',\n                  code: oldEmbedData.embedCode,\n                  createdAt: oldEmbedData.lastUpdated || new Date().toISOString()\n                }];\n                setSavedEmbeds(newEmbedFormat);\n                if (isAdmin) {\n                  await stateClient.createEntity(entityName, {\n                    id: contractAddress,\n                    embeds: newEmbedFormat,\n                    lastUpdated: new Date().toISOString()\n                  });\n                }\n              } else {\n                setSavedEmbeds([]);\n              }\n            } catch (err) {\n              setSavedEmbeds([]);\n            }\n          } else {\n            setSavedEmbeds([]);\n          }\n        }\n      } catch (error) {\n        console.error(`Error fetching ${type} embeds:`, error);\n        setSavedEmbeds([]);\n      } finally {\n        setIsLoadingEmbed(false);\n      }\n    };\n    const loadAllEmbedScripts = () => {\n      embedContainerRefs.current.forEach((ref, index) => {\n        if (!ref) return;\n        const embedContent = savedEmbeds[index]?.code || '';\n        if (embedContent) {\n          while (ref.firstChild) {\n            ref.removeChild(ref.firstChild);\n          }\n          const tempDiv = document.createElement('div');\n          tempDiv.innerHTML = embedContent;\n          Array.from(tempDiv.childNodes).forEach(node => {\n            if (node.nodeName !== 'SCRIPT') {\n              ref.appendChild(node.cloneNode(true));\n            }\n          });\n          const scriptTags = tempDiv.querySelectorAll('script');\n          scriptTags.forEach(oldScript => {\n            const newScript = document.createElement('script');\n            Array.from(oldScript.attributes).forEach(attr => {\n              newScript.setAttribute(attr.name, attr.value);\n            });\n            newScript.innerHTML = oldScript.innerHTML;\n            ref.appendChild(newScript);\n          });\n        }\n      });\n    };\n    const loadSingleEmbedScript = ref => {\n      if (!ref) return;\n      const existingScripts = Array.from(ref.querySelectorAll('script')).map(script => {\n        return {\n          attributes: Array.from(script.attributes),\n          innerHTML: script.innerHTML\n        };\n      });\n      ref.querySelectorAll('script').forEach(script => script.remove());\n      existingScripts.forEach(scriptData => {\n        const newScript = document.createElement('script');\n        scriptData.attributes.forEach(attr => {\n          newScript.setAttribute(attr.name, attr.value);\n        });\n        newScript.innerHTML = scriptData.innerHTML;\n        ref.appendChild(newScript);\n      });\n    };\n    useEffect(() => {\n      if (savedEmbeds.length > 0) {\n        setTimeout(() => {\n          loadAllEmbedScripts();\n        }, 300);\n        setTimeout(() => {\n          if (window.twttr && typeof window.twttr.widgets === 'object' && typeof window.twttr.widgets.load === 'function') {\n            window.twttr.widgets.load();\n          }\n        }, 1000);\n      }\n    }, [savedEmbeds]);\n    useEffect(() => {\n      if (previewEmbed) {\n        setTimeout(() => {\n          const previewContainer = document.getElementById('embed-preview-container');\n          if (previewContainer) {\n            loadSingleEmbedScript(previewContainer);\n          }\n        }, 100);\n      }\n    }, [previewEmbed]);\n    const handlePreviewEmbed = () => {\n      if (!embedCode.trim()) {\n        setEmbedError('Please enter embed code to preview');\n        return;\n      }\n      setEmbedError('');\n      setPreviewEmbed(embedCode);\n      setTimeout(() => {\n        const previewContainer = document.getElementById('embed-preview-container');\n        if (previewContainer) {\n          loadSingleEmbedScript(previewContainer);\n          if (embedCode.includes('twitter') && window.twttr && typeof window.twttr.widgets === 'object') {\n            try {\n              window.twttr.widgets.load(previewContainer);\n            } catch (e) {\n              console.log('Twitter widget load error', e);\n            }\n          }\n        }\n      }, 100);\n    };\n    const handleAddEmbed = async () => {\n      if (!embedCode.trim()) {\n        setEmbedError('Please enter a valid embed code');\n        return;\n      }\n      if (!embedTitle.trim()) {\n        setEmbedError('Please enter a title for this embed');\n        return;\n      }\n      setEmbedError('');\n      let cleanedEmbedCode = embedCode.trim();\n      const newEmbed = {\n        id: Date.now().toString(),\n        title: embedTitle,\n        description: embedDescription.trim(),\n        code: cleanedEmbedCode,\n        createdAt: new Date().toISOString()\n      };\n      const updatedEmbeds = editingEmbedIndex !== null ? savedEmbeds.map((embed, index) => index === editingEmbedIndex ? newEmbed : embed) : [...savedEmbeds, newEmbed];\n      if (token && isAdmin) {\n        try {\n          try {\n            await stateClient.createEntity(entityName, {\n              id: token.contractAddress,\n              embeds: updatedEmbeds,\n              lastUpdated: new Date().toISOString()\n            });\n          } catch (createError) {\n            await stateClient.updateEntity(entityName, token.contractAddress, {\n              embeds: updatedEmbeds,\n              lastUpdated: new Date().toISOString()\n            });\n          }\n          setSavedEmbeds(updatedEmbeds);\n          setEmbedCode('');\n          setEmbedTitle('');\n          setEmbedDescription('');\n          setPreviewEmbed('');\n          setEditingEmbedIndex(null);\n          setShowAddEmbedForm(false);\n          if (type === 'alpha') {\n            try {\n              await stateClient.deleteEntity('socialEmbed', token.contractAddress);\n            } catch (error) {}\n          }\n          console.log(`${type} embed saved successfully!`);\n        } catch (error) {\n          console.error(`Error saving ${type} embeds:`, error);\n          setEmbedError('Failed to save embed. Please try again.');\n        }\n      } else {\n        setSavedEmbeds(updatedEmbeds);\n        setEmbedCode('');\n        setEmbedTitle('');\n        setEmbedDescription('');\n        setPreviewEmbed('');\n        setEditingEmbedIndex(null);\n        setShowAddEmbedForm(false);\n      }\n    };\n    const handleEditEmbed = index => {\n      const embedToEdit = savedEmbeds[index];\n      setEmbedTitle(embedToEdit.title);\n      setEmbedDescription(embedToEdit.description || '');\n      setEmbedCode(embedToEdit.code);\n      setPreviewEmbed(embedToEdit.code);\n      setEditingEmbedIndex(index);\n      setShowAddEmbedForm(true);\n    };\n    const handleDeleteEmbed = async index => {\n      if (!confirm('Are you sure you want to delete this embed?')) return;\n      const updatedEmbeds = savedEmbeds.filter((_, i) => i !== index);\n      if (token && isAdmin) {\n        try {\n          await stateClient.createEntity(entityName, {\n            id: token.contractAddress,\n            embeds: updatedEmbeds,\n            lastUpdated: new Date().toISOString()\n          }).catch(async () => {\n            await stateClient.updateEntity(entityName, token.contractAddress, {\n              embeds: updatedEmbeds,\n              lastUpdated: new Date().toISOString()\n            });\n          });\n          setSavedEmbeds(updatedEmbeds);\n          setLastUpdated(new Date());\n        } catch (error) {\n          console.error(`Error deleting ${type} embed:`, error);\n          alert('Failed to delete embed. Please try again.');\n        }\n      }\n    };\n    const handleMoveEmbed = async (index, direction) => {\n      if (direction === 'up' && index === 0 || direction === 'down' && index === savedEmbeds.length - 1) {\n        return;\n      }\n      const newIndex = direction === 'up' ? index - 1 : index + 1;\n      const updatedEmbeds = [...savedEmbeds];\n      [updatedEmbeds[index], updatedEmbeds[newIndex]] = [updatedEmbeds[newIndex], updatedEmbeds[index]];\n      if (token && isAdmin) {\n        try {\n          await stateClient.createEntity(entityName, {\n            id: token.contractAddress,\n            embeds: updatedEmbeds,\n            lastUpdated: new Date().toISOString()\n          }).catch(async () => {\n            await stateClient.updateEntity(entityName, token.contractAddress, {\n              embeds: updatedEmbeds,\n              lastUpdated: new Date().toISOString()\n            });\n          });\n          setSavedEmbeds(updatedEmbeds);\n          setLastUpdated(new Date());\n        } catch (error) {\n          console.error(`Error reordering ${type} embeds:`, error);\n          alert('Failed to reorder embeds. Please try again.');\n        }\n      }\n    };\n    const handleCancelEdit = () => {\n      setEmbedCode('');\n      setEmbedTitle('');\n      setEmbedDescription('');\n      setPreviewEmbed('');\n      setEditingEmbedIndex(null);\n      setShowAddEmbedForm(false);\n      setEmbedError('');\n    };\n    return <div className=\"transition-opacity duration-150 ease-in-out flex-1 overflow-y-auto\">\n        <div className=\"flex justify-end mb-4\">\n          {isAdmin && creatorMode && !showAddEmbedForm && <button onClick={() => setShowAddEmbedForm(true)} className=\"flex items-center px-3 py-1.5 bg-blue-600 text-white text-xs rounded hover:bg-blue-700\">\n              <Plus size={14} className=\"mr-1\" />\n              Add {type === 'alpha' ? 'Alpha' : 'Update'} Embed\n            </button>}\n        </div>\n        {isAdmin && creatorMode && showAddEmbedForm && <div className=\"mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg\">\n            <div className=\"flex justify-between items-center mb-3\">\n              <h3 className=\"text-sm font-medium text-blue-800\">\n                {editingEmbedIndex !== null ? `Edit ${type === 'alpha' ? 'Alpha' : 'Update'} Embed` : `Add New ${type === 'alpha' ? 'Alpha' : 'Update'} Embed`}\n              </h3>\n              <button onClick={handleCancelEdit} className=\"text-gray-500 hover:text-gray-700\">\n                <X size={18} />\n              </button>\n            </div>\n            <div className=\"space-y-4\">\n              <div>\n                <label htmlFor=\"embedTitle\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Embed Title\n                </label>\n                <input id=\"embedTitle\" type=\"text\" value={embedTitle} onChange={e => setEmbedTitle(e.target.value)} placeholder=\"Twitter Feed, YouTube Video, etc.\" className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n              </div>\n              <div>\n                <label htmlFor=\"embedDescription\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Description (optional)\n                </label>\n                <textarea id=\"embedDescription\" value={embedDescription} onChange={e => setEmbedDescription(e.target.value)} placeholder=\"Provide context about this social feed...\" className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 h-20\" />\n              </div>\n              <div>\n                <label htmlFor=\"embedCode\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Embed Code\n                </label>\n                <textarea id=\"embedCode\" value={embedCode} onChange={e => setEmbedCode(e.target.value)} placeholder=\"<a class='twitter-timeline' href='https://twitter.com/username'>Tweets by Username</a><script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script>\" className=\"w-full p-3 text-sm border border-gray-300 rounded font-mono h-32 focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n              </div>\n              {previewEmbed && <div className=\"border border-gray-200 rounded-lg p-4 bg-white\">\n                  <h4 className=\"text-sm font-medium text-gray-700 mb-2\">Preview</h4>\n                  <div id=\"embed-preview-container\" className=\"overflow-hidden rounded-lg border border-gray-100\" dangerouslySetInnerHTML={{\n              __html: previewEmbed\n            }} />\n                </div>}\n              {embedError && <div className=\"text-sm text-red-500\">{embedError}</div>}\n              <div className=\"flex space-x-3\">\n                <button onClick={handlePreviewEmbed} className=\"flex items-center px-3 py-2 bg-gray-100 text-gray-800 text-sm rounded hover:bg-gray-200\">\n                  <Eye size={16} className=\"mr-1\" />\n                  Preview\n                </button>\n                <button onClick={handleAddEmbed} className=\"flex items-center px-3 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 disabled:opacity-50\" disabled={!embedCode.trim() || !embedTitle.trim()}>\n                  <Link size={16} className=\"mr-1\" />\n                  {editingEmbedIndex !== null ? 'Update Embed' : 'Add Embed'}\n                </button>\n              </div>\n              <div className=\"text-xs text-gray-500\">\n                <p className=\"font-medium mb-1\">Example Embed Codes:</p>\n                <p className=\"mb-1\">Twitter Timeline:</p>\n                <code className=\"text-xs block bg-gray-50 p-2 rounded overflow-x-auto\">\n                  <a class=\"twitter-timeline\" href=\"https://twitter.com/elonmusk\">Tweets by Elon Musk</a><br />\n                  <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n                </code>\n              </div>\n            </div>\n          </div>}\n        {isAdmin && creatorMode && savedEmbeds.length > 0 && !showAddEmbedForm && <div className=\"mb-6\">\n            <h3 className=\"text-sm font-medium text-gray-700 mb-3\">\n              Manage {type === 'alpha' ? 'Alpha' : 'Update'} Embeds\n            </h3>\n            <div className=\"space-y-2 bg-gray-50 p-3 rounded-lg border border-gray-200\">\n              {savedEmbeds.map((embed, index) => <div key={embed.id} className=\"flex items-center justify-between p-3 bg-white rounded border border-gray-200 hover:border-blue-200 transition-colors\">\n                  <div className=\"flex items-center flex-1 min-w-0\">\n                    <div className=\"w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mr-3\">\n                      <span className=\"font-medium text-blue-800\">{index + 1}</span>\n                    </div>\n                    <div className=\"truncate\">\n                      <div className=\"font-medium text-gray-900 truncate\">{embed.title}</div>\n                      <div className=\"text-xs text-gray-500\">\n                        Added {new Date(embed.createdAt).toLocaleDateString()}\n                      </div>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center space-x-2 ml-4\">\n                    <button onClick={() => handleMoveEmbed(index, 'up')} disabled={index === 0} className={`p-1 rounded ${index === 0 ? 'text-gray-300 cursor-not-allowed' : 'text-gray-500 hover:bg-gray-100'}`} title=\"Move up\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m18 15-6-6-6 6\" /></svg>\n                    </button>\n                    <button onClick={() => handleMoveEmbed(index, 'down')} disabled={index === savedEmbeds.length - 1} className={`p-1 rounded ${index === savedEmbeds.length - 1 ? 'text-gray-300 cursor-not-allowed' : 'text-gray-500 hover:bg-gray-100'}`} title=\"Move down\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m6 9 6 6 6-6\" /></svg>\n                    </button>\n                    <button onClick={() => handleEditEmbed(index)} className=\"p-1 text-blue-600 hover:bg-blue-50 rounded\" title=\"Edit\">\n                      <Edit2 size={16} />\n                    </button>\n                    <button onClick={() => handleDeleteEmbed(index)} className=\"p-1 text-red-600 hover:bg-red-50 rounded\" title=\"Delete\">\n                      <Trash2 size={16} />\n                    </button>\n                  </div>\n                </div>)}\n            </div>\n          </div>}\n        <div className=\"social-embed-container\">\n        {isLoadingEmbed ? <div className=\"flex flex-col items-center justify-center h-64 text-center\">\n      <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n      <div className=\"text-gray-700 font-medium\">Sabar Nggih...</div>\n    </div> : savedEmbeds.length > 0 ? <div className=\"space-y-8\">\n              {savedEmbeds.map((embed, index) => <div key={embed.id} className=\"bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden\">\n                  {}\n                  <div className={`py-5 px-4 border-b border-gray-100 ${type === 'alpha' ? 'bg-blue-50' : 'bg-green-50'}`}>\n                    <div className={`bg-white py-3 px-4 border ${type === 'alpha' ? 'border-blue-100' : 'border-green-100'} rounded-lg shadow-sm`}>\n                      <h3 className=\"text-3xl font-bold text-gray-900 text-center\">{embed.title || (type === 'alpha' ? \"Alpha Content\" : \"Update Content\")}</h3>\n                    </div>\n                  </div>\n                  {}\n                  <div className=\"px-4 pt-2 pb-4 bg-white\">\n                    <div ref={el => {\n                embedContainerRefs.current[index] = el;\n                if (el && !el.hasChildNodes() && embed.code) {\n                  setTimeout(() => {\n                    el.innerHTML = embed.code;\n                    loadSingleEmbedScript(el);\n                  }, 0);\n                }\n              }} className=\"embed-container min-h-[200px] flex items-center justify-center\" />\n                  </div>\n                  {}\n                  {embed.description && <div className=\"p-4 bg-gray-50 border-t border-gray-100\">\n                      <p className=\"text-base text-gray-600\">{embed.description}</p>\n                    </div>}\n                </div>)}\n            </div> : <div className=\"flex flex-col items-center justify-center h-64 text-center\">\n              <div className=\"mb-4\">\n                <Link size={32} className=\"text-gray-400\" />\n              </div>\n              <h3 className=\"text-lg font-medium mb-2\">\n                No {type === 'alpha' ? 'Alpha' : 'Update'} Embeds Available\n              </h3>\n              <p className=\"text-gray-600 max-w-md mb-4\">\n                {isAdmin && creatorMode ? `Click the 'Add ${type === 'alpha' ? 'Alpha' : 'Update'} Embed' button to add content for this token.` : `No ${type === 'alpha' ? 'alpha' : 'update'} embeds have been set for this token yet.`}\n              </p>\n            </div>}\n        </div>\n      </div>;\n  };\n  const TokenChart = ({\n    token\n  }) => {\n    const [showRefreshButton, setShowRefreshButton] = useState(false);\n    const chartRef = useRef(null);\n    const chartLoadTimeRef = useRef(null);\n    useEffect(() => {\n      if (token && !isLoadingChart) {\n        chartLoadTimeRef.current = Date.now();\n        const timer = setInterval(() => {\n          if (chartLoadTimeRef.current && Date.now() - chartLoadTimeRef.current > 300000) {\n            setShowRefreshButton(true);\n            clearInterval(timer);\n          }\n        }, 60000);\n        return () => clearInterval(timer);\n      }\n    }, [token, isLoadingChart]);\n    const handleManualRefresh = () => {\n      if (token) {\n        setShowRefreshButton(false);\n        fetchTokenChartData(token.contractAddress, true);\n        chartLoadTimeRef.current = Date.now();\n      }\n    };\n    if (!token) return null;\n    return <div className=\"bg-white p-4 rounded-lg shadow-sm border border-gray-200 transition-opacity duration-150 ease-in-out relative\">\n        {showRefreshButton && <button onClick={handleManualRefresh} className=\"absolute top-2 right-2 z-10 bg-blue-600 text-white px-2 py-1 text-xs rounded-md shadow-sm flex items-center\">\n            <RefreshCw size={12} className=\"mr-1\" />\n            Refresh Chart\n          </button>}\n        <div className=\"h-auto\" ref={chartRef}>\n        {isLoadingChart ? <div className=\"h-full min-h-[400px] flex flex-col items-center justify-center\">\n            <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n            <span className=\"text-gray-700 font-medium\">Sabar Nggih...</span>\n          </div> : <>\n              <style dangerouslySetInnerHTML={{\n            __html: `\n                  #dexscreener-widget {\n                    position: relative;\n                    width: 100%;\n                    max-width: 100%;\n                    height: 250px;\n                    overflow: hidden;\n                    border-radius: 12px;\n                    box-shadow: 0 0 8px rgba(0,0,0,0.1);\n                  }\n                  #dexscreener-widget iframe {\n                    position: absolute;\n                    top: -100px;\n                    left: 0;\n                    width: 100%;\n                    height: 500px;\n                    border: none;\n                  }\n                  #dexscreener-embed{position:relative;width:100%;padding-bottom:65%;}\n                  @media(min-width:1400px){#dexscreener-embed{padding-bottom:45%;}}\n                  #dexscreener-embed iframe{position:absolute;width:100%;height:100%;top:0;left:0;border:0;}\n                `\n          }} />\n              <div id=\"dexscreener-embed\">\n                <iframe src={`https://dexscreener.com/solana/${token.contractAddress}?embed=1&loadChartSettings=0&trades=0&tabs=0&loadChartSettings=0&chartTheme=light&theme=light&chartStyle=1&chartType=usd&interval=60`} title={`${token.symbol} token info`} />\n              </div>\n            </>}\n        </div>\n      </div>;\n  };\n  const EmptyTerminalState = () => <div className=\"flex flex-col items-center justify-center h-full text-center\">\n      <div className=\"bg-blue-50 rounded-full p-4 mb-4\">\n        <Info size={40} className=\"text-blue-400\" />\n      </div>\n      <h2 className=\"text-2xl font-bold mb-2\">Terminal Mode Activated</h2>\n      <p className=\"text-gray-600 mb-6 max-w-md\">\n        {creatorMode ? \"Add tokens to track them in your personal terminal. View price charts, market data, and more.\" : \"No tokens have been added to this terminal yet.\"}\n      </p>\n      <div className=\"flex space-x-4\">\n        {creatorMode && <button onClick={() => setIsAddingToken(true)} className=\"px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700 flex items-center\">\n            <Plus size={18} className=\"mr-2\" />\n            Add Your First Token\n          </button>}\n        <button onClick={() => setActiveDashboardTab('articles')} className=\"px-4 py-2 text-white bg-gray-700 rounded hover:bg-gray-800 flex items-center\">\n          <Edit2 size={18} className=\"mr-2\" />\n          Browse Articles\n        </button>\n      </div>\n    </div>;\n  const ArticlesView = ({\n    token\n  }) => {\n    const [isAddingArticle, setIsAddingArticle] = useState(false);\n    const [editingArticleId, setEditingArticleId] = useState(null);\n    const [selectedArticle, setSelectedArticle] = useState(null);\n    const [articleTitle, setArticleTitle] = useState('');\n    const [articleContent, setArticleContent] = useState('');\n    const [articleImage, setArticleImage] = useState('');\n    const [currentImageUrl, setCurrentImageUrl] = useState('');\n    const [cursorPosition, setCursorPosition] = useState(0);\n    const [isSubmitting, setIsSubmitting] = useState(false);\n    const [articles, setArticles] = useState([]);\n    const [isLoading, setIsLoading] = useState(true);\n    const contentRef = useRef(null);\n    useEffect(() => {\n      fetchArticles();\n    }, []);\n    const fetchArticles = async () => {\n      setIsLoading(true);\n      try {\n        const fetchedArticles = await stateClient.getEntities('articles');\n        if (fetchedArticles && fetchedArticles.length > 0) {\n          setArticles(fetchedArticles.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)));\n        } else {\n          setArticles([]);\n        }\n      } catch (error) {\n        console.error(\"Error fetching articles:\", error);\n        setArticles([]);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    const handleAddArticle = async () => {\n      if (!articleTitle.trim() || !articleContent.trim()) {\n        alert('Please enter both title and content for the article');\n        return;\n      }\n      setIsSubmitting(true);\n      try {\n        const articleData = {\n          id: editingArticleId || Date.now().toString(),\n          title: articleTitle,\n          content: articleContent,\n          image: articleImage,\n          createdAt: new Date().toISOString(),\n          updatedAt: new Date().toISOString(),\n          author: 'Admin',\n          tokenId: token?.contractAddress || null\n        };\n        if (editingArticleId) {\n          await stateClient.updateEntity('articles', editingArticleId, articleData);\n        } else {\n          await stateClient.createEntity('articles', articleData);\n        }\n        await fetchArticles();\n        resetArticleForm();\n      } catch (error) {\n        console.error(\"Error saving article:\", error);\n        alert('Failed to save article. Please try again.');\n      } finally {\n        setIsSubmitting(false);\n      }\n    };\n    const handleEditArticle = article => {\n      setArticleTitle(article.title);\n      setArticleContent(article.content);\n      setArticleImage(article.image || '');\n      setEditingArticleId(article.id);\n      setIsAddingArticle(true);\n    };\n    const handleDeleteArticle = async id => {\n      if (!confirm('Are you sure you want to delete this article?')) return;\n      try {\n        await stateClient.deleteEntity('articles', id);\n        await fetchArticles();\n        if (selectedArticle && selectedArticle.id === id) {\n          setSelectedArticle(null);\n        }\n      } catch (error) {\n        console.error(\"Error deleting article:\", error);\n        alert('Failed to delete article. Please try again.');\n      }\n    };\n    const resetArticleForm = () => {\n      setArticleTitle('');\n      setArticleContent('');\n      setArticleImage('');\n      setEditingArticleId(null);\n      setIsAddingArticle(false);\n    };\n    const formatDate = dateString => {\n      const options = {\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric'\n      };\n      return new Date(dateString).toLocaleDateString('id-ID', options);\n    };\n    if (isLoading) {\n      return <div className=\"flex flex-col justify-center items-center h-64\">\n          <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n          <span className=\"text-gray-700 font-medium\">Sabar Nggih...</span>\n        </div>;\n    }\n    if (selectedArticle) {\n      const renderContent = content => {\n        if (!content) return null;\n        const parts = content.split(/(\\[img:[^\\]]+\\])/g);\n        return parts.map((part, index) => {\n          const imgMatch = part.match(/\\[img:([^\\]]+)\\]/);\n          if (imgMatch) {\n            const imgUrl = imgMatch[1];\n            return <div key={index} className=\"my-8 flex justify-center\">\n                <img src={imgUrl} alt=\"Article image\" className=\"max-w-full rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 object-contain max-h-[600px]\" />\n              </div>;\n          }\n          return part ? <div key={index} className=\"my-4 leading-relaxed\" style={{\n            whiteSpace: 'pre-wrap'\n          }}>\n              {part}\n            </div> : null;\n        });\n      };\n      return <article className=\"bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden\">\n          <div className=\"flex justify-between items-center p-4 border-b border-gray-200 bg-gray-50\">\n            <button onClick={() => setSelectedArticle(null)} className=\"px-3 py-1.5 bg-white text-gray-700 rounded-md hover:bg-gray-100 flex items-center text-sm shadow-sm border border-gray-200\">\n              <ArrowLeft size={16} className=\"mr-1\" />\n              Back to Articles\n            </button>\n            \n            {isAdmin && creatorMode && <div className=\"flex space-x-2\">\n                <button onClick={() => handleEditArticle(selectedArticle)} className=\"p-1.5 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 shadow-sm border border-blue-200\">\n                  <Edit2 size={16} />\n                </button>\n                <button onClick={() => handleDeleteArticle(selectedArticle.id)} className=\"p-1.5 bg-red-50 text-red-700 rounded-md hover:bg-red-100 shadow-sm border border-red-200\">\n                  <Trash2 size={16} />\n                </button>\n              </div>}\n          </div>\n          \n          <div className=\"max-w-3xl mx-auto px-6 py-8\">\n            {}\n            {selectedArticle.image && <div className=\"mb-8 -mx-6 md:-mx-10\">\n                <img src={selectedArticle.image} alt={selectedArticle.title} className=\"w-full h-auto object-cover shadow-md\" style={{\n              maxHeight: \"500px\"\n            }} />\n              </div>}\n            \n            {}\n            <h1 className=\"text-4xl md:text-5xl font-serif font-bold mb-4 leading-tight\">{selectedArticle.title}</h1>\n            \n            {}\n            <div className=\"flex items-center text-gray-600 mb-8 pb-6 border-b border-gray-100\">\n              <span className=\"mr-3 font-medium\">{formatDate(selectedArticle.createdAt)}</span>\n              <span className=\"text-gray-500\">By {selectedArticle.author || 'Admin'}</span>\n            </div>\n            \n            {}\n            <div className=\"prose max-w-none text-lg text-gray-800\" style={{\n            lineHeight: '1.8'\n          }}>\n              {renderContent(selectedArticle.content)}\n            </div>\n          </div>\n        </article>;\n    }\n    const insertImageAtCursor = () => {\n      if (!currentImageUrl.trim()) return;\n      const imageTag = `[img:${currentImageUrl}]`;\n      const newContent = articleContent.substring(0, cursorPosition) + imageTag + articleContent.substring(cursorPosition);\n      setArticleContent(newContent);\n      setCurrentImageUrl('');\n      if (contentRef.current) {\n        contentRef.current.focus();\n        const newPosition = cursorPosition + imageTag.length;\n        contentRef.current.setSelectionRange(newPosition, newPosition);\n      }\n    };\n    const handleContentChange = e => {\n      setArticleContent(e.target.value);\n      setCursorPosition(e.target.selectionStart);\n    };\n    const handleContentClick = e => {\n      setCursorPosition(e.target.selectionStart);\n    };\n    const handleContentKeyUp = e => {\n      setCursorPosition(e.target.selectionStart);\n    };\n    if (isAddingArticle) {\n      return <div className=\"bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden\">\n          <div className=\"flex justify-between items-center p-4 border-b border-gray-200 bg-gray-50\">\n            <h2 className=\"text-xl font-bold\">{editingArticleId ? 'Edit Article' : 'Create New Article'}</h2>\n            <button onClick={resetArticleForm} className=\"p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full\">\n              <X size={20} />\n            </button>\n          </div>\n          \n          <div className=\"p-6\">\n            <div className=\"mb-4\">\n              <label htmlFor=\"articleTitle\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Title\n              </label>\n              <input id=\"articleTitle\" type=\"text\" value={articleTitle} onChange={e => setArticleTitle(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"Enter article title\" required />\n            </div>\n            \n            <div className=\"mb-4\">\n              <label htmlFor=\"articleImage\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Featured Image URL (optional)\n              </label>\n              <input id=\"articleImage\" type=\"text\" value={articleImage} onChange={e => setArticleImage(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"https://example.com/image.jpg\" />\n              {articleImage && <div className=\"mt-2 p-2 border border-gray-200 rounded bg-gray-50\">\n                  <p className=\"text-xs text-gray-500 mb-1\">Featured Image Preview:</p>\n                  <img src={articleImage} alt=\"Featured image preview\" className=\"h-32 object-contain rounded border border-gray-300\" onError={e => {\n                e.target.src = \"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\";\n                e.target.className += \" p-2\";\n              }} />\n                </div>}\n            </div>\n            \n            {}\n            <div className=\"mb-4 p-4 bg-blue-50 border border-blue-100 rounded-lg\">\n              <div className=\"flex items-end\">\n                <div className=\"flex-1 mr-2\">\n                  <label htmlFor=\"inlineImageUrl\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Insert Image in Content\n                  </label>\n                  <input id=\"inlineImageUrl\" type=\"text\" value={currentImageUrl} onChange={e => setCurrentImageUrl(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" placeholder=\"https://example.com/inline-image.jpg\" />\n                </div>\n                <button onClick={insertImageAtCursor} className=\"px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" disabled={!currentImageUrl.trim()}>\n                  <ImageIcon size={16} className=\"mr-1\" />\n                  Insert at Cursor\n                </button>\n              </div>\n              <p className=\"text-xs text-gray-600 mt-2\">\n                Position your cursor in the content where you want the image to appear, then click \"Insert at Cursor\"\n              </p>\n            </div>\n            \n            <div className=\"mb-6\">\n              <label htmlFor=\"articleContent\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Content\n              </label>\n              <textarea id=\"articleContent\" ref={contentRef} value={articleContent} onChange={handleContentChange} onClick={handleContentClick} onKeyUp={handleContentKeyUp} className=\"w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[300px] font-sans\" placeholder=\"Write your article content here...\" required />\n            </div>\n            \n            <div className=\"flex justify-end space-x-3\">\n              <button onClick={resetArticleForm} className=\"px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200\">\n                Cancel\n              </button>\n              <button onClick={handleAddArticle} className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" disabled={isSubmitting || !articleTitle.trim() || !articleContent.trim()}>\n                {isSubmitting ? <>\n                    <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                    Saving...\n                  </> : <>\n                    <Save size={18} className=\"mr-2\" />\n                    {editingArticleId ? 'Update Article' : 'Publish Article'}\n                  </>}\n              </button>\n            </div>\n          </div>\n        </div>;\n    }\n    return <div className=\"bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden\">\n        <div className=\"flex justify-between items-center p-4 border-b border-gray-200 bg-gray-50\">\n          <h2 className=\"text-xl font-bold flex items-center\">\n            <Edit2 size={20} className=\"mr-2 text-blue-600\" />\n            Articles\n          </h2>\n          {isAdmin && creatorMode && <button onClick={() => setIsAddingArticle(true)} className=\"px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center text-sm shadow-sm\">\n              <Plus size={16} className=\"mr-1\" />\n              New Article\n            </button>}\n        </div>\n        \n        {articles.length > 0 ? <div className=\"divide-y divide-gray-100\">\n            {articles.map(article => <div key={article.id} className=\"p-5 hover:bg-gray-50 transition-colors cursor-pointer flex\" onClick={() => setSelectedArticle(article)}>\n                {article.image && <div className=\"mr-5 flex-shrink-0\">\n                    <img src={article.image} alt={article.title} className=\"w-24 h-24 object-cover rounded-md shadow-sm hover:shadow transition-shadow\" />\n                  </div>}\n                <div className=\"flex-1\">\n                  <h3 className=\"text-xl font-bold mb-1 leading-tight\">{article.title}</h3>\n                  <div className=\"text-sm text-gray-500 mb-2 flex items-center\">\n                    <Calendar size={12} className=\"mr-1\" />\n                    {formatDate(article.createdAt)} \n                    <span className=\"mx-2\">•</span> \n                    <span className=\"font-medium text-gray-700\">{article.author || 'Admin'}</span>\n                  </div>\n                  <p className=\"text-gray-700 line-clamp-3 leading-relaxed\">\n                    {}\n                    {article.content.replace(/\\[img:[^\\]]+\\]/g, ' [Image] ').substring(0, 180)}\n                    {article.content.length > 180 ? '...' : ''}\n                  </p>\n                </div>\n                <div className=\"ml-2 self-center text-blue-500\">\n                  <ArrowRight size={18} />\n                </div>\n              </div>)}\n          </div> : <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n            <div className=\"bg-blue-50 rounded-full p-4 mb-4\">\n              <Edit2 size={30} className=\"text-blue-400\" />\n            </div>\n            <h3 className=\"text-lg font-medium mb-2\">No Articles Yet</h3>\n            <p className=\"text-gray-600 max-w-md mb-6\">\n              {isAdmin && creatorMode ? \"Start your publishing empire by creating your first article.\" : \"No articles have been published yet.\"}\n            </p>\n            {isAdmin && creatorMode && <button onClick={() => setIsAddingArticle(true)} className=\"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center shadow-md\">\n                <Plus size={18} className=\"mr-2\" />\n                Create First Article\n              </button>}\n          </div>}\n      </div>;\n  };\n  const [compareMode, setCompareMode] = useState(false);\n  const [comparingTokens, setComparingTokens] = useState([]);\n  const handleToggleCompare = () => {\n    setCompareMode(!compareMode);\n    setComparingTokens([]);\n  };\n  const handleSelectCompareToken = token => {\n    if (comparingTokens.some(t => t.contractAddress === token.contractAddress)) {\n      setComparingTokens(comparingTokens.filter(t => t.contractAddress !== token.contractAddress));\n    } else if (comparingTokens.length < 2) {\n      setComparingTokens([...comparingTokens, token]);\n    }\n  };\n  const TerminalView = () => <div className=\"grid grid-cols-5 gap-4 h-full\">\n      <div className=\"col-span-1 overflow-hidden border border-gray-300 rounded-lg bg-white flex flex-col shadow-md\">\n        <div className=\"bg-gray-900 p-3\">\n          <div className=\"flex justify-between items-center\">\n            <div className=\"w-8\">\n              {isAdmin && creatorMode && <button onClick={() => {\n              setSelectedToken(null);\n              setIsEditing(false);\n              setIsAddingToken(true);\n            }} className=\"p-1.5 bg-gray-800 text-white hover:bg-gray-700 rounded-full transition-colors\" title=\"Add new token\">\n                  <Plus size={16} />\n                </button>}\n            </div>\n            <h3 className=\"font-bold text-sm uppercase tracking-wider text-white text-center flex-1\">Curated Token</h3>\n            <div className=\"w-8\"></div>\n          </div>\n        </div>\n        <style dangerouslySetInnerHTML={{\n        __html: `\n            @keyframes fadeIn {\n              from { opacity: 0; transform: translateY(-10px); }\n              to { opacity: 1; transform: translateY(0); }\n            }\n            .animate-fadeIn {\n              animation: fadeIn 0.2s ease-out forwards;\n            }\n          `\n      }} />\n        <div className=\"flex-1 overflow-y-auto bg-gray-50\">\n          {tokens.length > 0 ? <>\n              {compareMode && <div className=\"bg-blue-100 p-2 border-b border-blue-200\">\n                  <p className=\"text-center text-xs text-blue-900 font-bold\">\n                    Select up to 2 tokens to compare\n                    {comparingTokens.length > 0 && ` (${comparingTokens.length}/2)`}\n                  </p>\n                </div>}\n              {}\n              {tokens.sort((a, b) => {\n            const aIsStarred = starredTokens.includes(a.contractAddress);\n            const bIsStarred = starredTokens.includes(b.contractAddress);\n            if (aIsStarred && !bIsStarred) return -1;\n            if (!aIsStarred && bIsStarred) return 1;\n            return a.symbol?.localeCompare(b.symbol);\n          }).map(token => <div key={token.contractAddress} onClick={() => compareMode ? handleSelectCompareToken(token) : handleSelectToken(token)} className={`p-4 border-b border-gray-200 hover:bg-gray-100 cursor-pointer transition-all duration-150 ease-in-out \n                    ${selectedToken && selectedToken.contractAddress === token.contractAddress && !compareMode ? 'bg-blue-50 border-l-4 border-l-blue-500' : ''} \n                    ${compareMode && comparingTokens.some(t => t.contractAddress === token.contractAddress) ? 'bg-green-50 border-l-4 border-l-green-500' : ''}\n                    ${starredTokens.includes(token.contractAddress) ? 'bg-yellow-50' : ''}\n                    relative`}>\n                  <div className=\"flex items-center justify-between\">\n                    <div className=\"flex items-center\">\n                      {token.image ? <img src={token.image} alt={token.symbol} className=\"w-10 h-10 mr-3 rounded-full\" /> : <div className=\"w-10 h-10 mr-3 bg-gray-200 rounded-full flex items-center justify-center\">\n                          <span className=\"text-sm font-bold\">{token.symbol?.substring(0, 2)}</span>\n                        </div>}\n                      <div>\n                        <div className=\"flex items-center\">\n                          <h3 className=\"font-bold text-base\">{token.symbol}</h3>\n                          {starredTokens.includes(token.contractAddress) && <span className=\"ml-1 text-yellow-400 animate-pulse text-lg\">★</span>}\n                        </div>\n                        <div className=\"text-sm text-gray-600 truncate max-w-[140px]\">{token.name || token.symbol}</div>\n                      </div>\n                    </div>\n                    <button onClick={e => toggleStarToken(token.contractAddress, e)} className=\"text-gray-400 hover:text-yellow-500 transition-colors p-2\" title={starredTokens.includes(token.contractAddress) ? \"Remove from favorites\" : \"Add to favorites\"}>\n                      {starredTokens.includes(token.contractAddress) ? <Star size={20} className=\"fill-yellow-400 text-yellow-400\" /> : <Star size={20} />}\n                    </button>\n                  </div>\n                  {!compareMode && creatorMode && isAdmin && <div className=\"mt-2 flex justify-between\">\n                      <div className=\"text-xs text-gray-400 italic\">\n                        {token.lastUpdated && new Date(token.lastUpdated).toLocaleTimeString([], {\n                  hour: '2-digit',\n                  minute: '2-digit'\n                })}\n                      </div>\n                      <div className=\"flex space-x-2\">\n                        <button onClick={e => {\n                  e.stopPropagation();\n                }} className=\"text-xs text-gray-500 hover:text-blue-700 transition-colors duration-150\" title=\"Refresh price data\">\n                          <RefreshCw size={14} />\n                        </button>\n                        <button onClick={e => {\n                  e.stopPropagation();\n                  setSelectedToken(token);\n                  setIsEditing(true);\n                }} className=\"text-xs text-blue-500 hover:text-blue-700 transition-colors duration-150\" title=\"Edit token metrics\">\n                          <Edit2 size={14} />\n                        </button>\n                        <button onClick={e => {\n                  e.stopPropagation();\n                  if (confirm('Are you sure you want to remove this token?')) {\n                    setTokens(tokens.filter(t => t.contractAddress !== token.contractAddress));\n                    stateClient.deleteEntity('tokens', token.contractAddress).catch(console.error);\n                  }\n                }} className=\"text-xs text-red-500 hover:text-red-700 transition-colors duration-150\" title=\"Remove token\">\n                          <Trash2 size={14} />\n                        </button>\n                      </div>\n                    </div>}\n                </div>)}\n            </> : <div className=\"p-4 text-center text-gray-500 text-sm\">\n              {isAdmin && creatorMode ? \"Click + to add tokens to your watchlist\" : \"No tokens added yet\"}\n            </div>}\n        </div>\n        <div className=\"p-3 border-t border-gray-300 bg-gray-900\">\n          <h3 className=\"font-bold text-sm uppercase tracking-wider text-white text-center mb-2\">Trending Token</h3>\n          <div className=\"bg-gray-800 rounded-lg p-3 mb-2\">\n            {isAdmin && creatorMode && <div className=\"flex justify-center mb-2\">\n                <button onClick={() => setIsAddingTrendingToken(true)} className=\"px-2 py-1 bg-gray-700 text-white text-xs rounded hover:bg-gray-600 flex items-center\">\n                  <Plus size={12} className=\"mr-1\" />\n                  Add Trending\n                </button>\n              </div>}\n            {isAddingTrendingToken && <div className=\"p-3 bg-gray-700 rounded-lg mb-2 animate-fadeIn\">\n                <div className=\"flex flex-col space-y-2\">\n                  <input type=\"text\" value={trendingTokenAddress} onChange={e => setTrendingTokenAddress(e.target.value)} placeholder=\"Enter token CA\" className=\"w-full p-2 text-sm bg-gray-600 text-white border border-gray-500 rounded placeholder-gray-400\" />\n                  {trendingTokenError && <div className=\"text-red-400 text-sm px-1\">{trendingTokenError}</div>}\n                  <div className=\"flex justify-between space-x-2\">\n                    <button onClick={() => setIsAddingTrendingToken(false)} className=\"px-3 py-2 bg-gray-600 text-white text-sm rounded hover:bg-gray-500 flex-1\">\n                      Cancel\n                    </button>\n                    <button onClick={handleAddTrendingToken} className=\"px-3 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 flex-1 flex items-center justify-center\" disabled={isLoadingToken || !trendingTokenAddress.trim()}>\n                      {isLoadingToken ? <RefreshCw size={12} className=\"animate-spin\" /> : 'Add'}\n                    </button>\n                  </div>\n                </div>\n              </div>}\n            {trendingTokens.length > 0 ? <div className=\"space-y-2 max-h-60 overflow-y-auto\">\n                {trendingTokens.map(token => <div key={token.contractAddress} onClick={() => handleSelectToken(token)} className=\"p-3 border border-gray-700 hover:bg-gray-700 cursor-pointer transition-all duration-150 ease-in-out rounded flex items-center relative group\">\n                    {token.image ? <img src={token.image} alt={token.symbol} className=\"w-8 h-8 mr-3 rounded-full\" /> : <div className=\"w-8 h-8 mr-3 bg-gray-600 rounded-full flex items-center justify-center\">\n                        <span className=\"text-sm font-bold text-white\">{token.symbol?.substring(0, 2)}</span>\n                      </div>}\n                    <div>\n                      <h3 className=\"font-bold text-sm text-white\">{token.symbol}</h3>\n                      <div className=\"text-xs text-gray-400 truncate max-w-[140px]\">{token.name || token.symbol}</div>\n                    </div>\n                    {isAdmin && creatorMode && <button onClick={e => handleDeleteTrendingToken(token.contractAddress, e)} className=\"absolute right-2 p-1.5 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:bg-red-600\" title=\"Remove trending token\">\n                      <Trash2 size={12} />\n                    </button>}\n                  </div>)}\n              </div> : <div className=\"text-center text-gray-400 text-xs\">\n                {isAdmin && creatorMode ? \"Add trending tokens manually\" : \"No trending tokens added yet\"}\n              </div>}\n          </div>\n        </div>\n        {tokens.length > 1 && <div className=\"p-3 border-t border-gray-300 bg-gray-100\">\n            <button onClick={handleToggleCompare} className={`w-full py-2 rounded-md text-sm font-bold flex items-center justify-center shadow-sm\n                ${compareMode ? 'bg-red-100 text-red-700 hover:bg-red-200 border border-red-300' : 'bg-blue-600 text-white hover:bg-blue-700'}`}>\n              {compareMode ? <>\n                  <X size={16} className=\"mr-2\" />\n                  Cancel Compare\n                </> : <>\n                  <BarChart size={16} className=\"mr-2\" />\n                  Compare Metrics\n                </>}\n            </button>\n          </div>}\n      </div>\n      <div className=\"col-span-4 overflow-y-auto space-y-4 h-full flex flex-col\">\n        {selectedToken ? <>\n            <div className=\"mb-4 sticky top-0 z-10 bg-gray-800 shadow-md rounded-lg\">\n              <div className=\"flex items-center p-1 overflow-x-auto\">\n                <button onClick={() => setActiveDashboardTab('tokenInfo')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'tokenInfo' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Chart\n                </button>\n                <button onClick={() => setActiveDashboardTab('metrics')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'metrics' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Metrics\n                </button>\n                <button onClick={() => setActiveDashboardTab('mutuals')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'mutuals' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Team\n                </button>\n                <button onClick={() => setActiveDashboardTab('tokenomics')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'tokenomics' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Flywheels\n                </button>\n                <button onClick={() => setActiveDashboardTab('social')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'social' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Alpha\n                </button>\n                <button onClick={() => setActiveDashboardTab('update')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'update' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Update\n                </button>\n                <button onClick={() => setActiveDashboardTab('articles')} className={`px-4 py-3 font-bold text-sm whitespace-nowrap transition-all duration-150 ease-in-out rounded-t-lg mx-1 ${activeDashboardTab === 'articles' ? 'bg-white text-gray-900' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}`}>\n                  Articles\n                </button>\n              </div>\n            </div>\n            <div className=\"transition-opacity duration-150 ease-in-out\">\n          {activeDashboardTab === 'tokenInfo' && <TokenChart token={selectedToken} />}\n          {activeDashboardTab === 'metrics' && <TokenMetrics token={selectedToken} />}\n          {activeDashboardTab === 'mutuals' && <ErrorBoundary fallback={<div className=\"p-8 text-center text-red-500\">Error loading Team section. Please refresh the page.</div>}>\n              <MutualsView />\n            </ErrorBoundary>}\n          {activeDashboardTab === 'social' && <SocialMediaStats token={selectedToken} type=\"alpha\" />}\n          {activeDashboardTab === 'update' && <SocialMediaStats token={selectedToken} type=\"update\" />}\n          {activeDashboardTab === 'tokenomics' && <TokenomicsView token={selectedToken} />}\n          {activeDashboardTab === 'articles' && <ArticlesView token={selectedToken} />}\n          \n            </div>\n          </> : <EmptyTerminalState />}\n      </div>\n    </div>;\n  const [showKeyboardHelp, setShowKeyboardHelp] = useState(false);\n  const [showNotesSidebar, setShowNotesSidebar] = useState(false);\n  const [notesContent, setNotesContent] = useState('');\n  const [isSavingNotes, setIsSavingNotes] = useState(false);\n  const [notesLastSaved, setNotesLastSaved] = useState(null);\n  const [showAIAssistant, setShowAIAssistant] = useState(false);\n  const notesTextareaRef = useRef(null);\n  const [keyboardShortcuts] = useState([{\n    key: '?',\n    description: 'Show/hide keyboard shortcuts'\n  }, {\n    key: 'C',\n    description: 'Show/hide calendar view'\n  }, {\n    key: 'N',\n    description: 'Open/close notes sidebar'\n  }, {\n    key: 'Shift+C',\n    description: 'Toggle compare mode'\n  }, {\n    key: 'N',\n    description: isAdmin ? 'Create new article' : 'Not available'\n  }, {\n    key: 'A',\n    description: isAdmin ? 'Add new token' : 'Not available'\n  }, {\n    key: 'ESC',\n    description: 'Close current modal or view'\n  }, {\n    key: '1-7',\n    description: 'Switch Terminal tabs'\n  }, {\n    key: 'S',\n    description: 'Search tokens'\n  }, {\n    key: 'R',\n    description: 'Refresh current data'\n  }, {\n    key: 'H',\n    description: 'Return to home view'\n  }]);\n  useEffect(() => {\n    if (notesTextareaRef.current && showNotesSidebar) {\n      notesTextareaRef.current.focus();\n    }\n  }, [showNotesSidebar]);\n  useEffect(() => {\n    const fetchUserNotes = async () => {\n      try {\n        const userNotesId = localStorage.getItem('paceterminal-notes-id') || `notes-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n        if (!localStorage.getItem('paceterminal-notes-id')) {\n          localStorage.setItem('paceterminal-notes-id', userNotesId);\n        }\n        const userNotes = await stateClient.getEntity('userNotes', userNotesId);\n        if (userNotes && userNotes.content) {\n          setNotesContent(userNotes.content);\n          setNotesLastSaved(new Date(userNotes.lastSaved));\n        }\n      } catch (error) {\n        console.error(\"Error fetching user notes:\", error);\n      }\n    };\n    fetchUserNotes();\n  }, []);\n  const saveUserNotes = async () => {\n    try {\n      setIsSavingNotes(true);\n      const userNotesId = localStorage.getItem('paceterminal-notes-id') || `notes-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n      if (!localStorage.getItem('paceterminal-notes-id')) {\n        localStorage.setItem('paceterminal-notes-id', userNotesId);\n      }\n      const currentTime = new Date();\n      try {\n        await stateClient.createEntity('userNotes', {\n          id: userNotesId,\n          content: notesContent,\n          lastSaved: currentTime.toISOString()\n        });\n      } catch (error) {\n        await stateClient.updateEntity('userNotes', userNotesId, {\n          content: notesContent,\n          lastSaved: currentTime.toISOString()\n        });\n      }\n      setNotesLastSaved(currentTime);\n    } catch (error) {\n      console.error(\"Error saving notes:\", error);\n    } finally {\n      setIsSavingNotes(false);\n    }\n  };\n  useEffect(() => {\n    const handleKeyDown = e => {\n      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {\n        return;\n      }\n      switch (e.key) {\n        case '?':\n          setShowKeyboardHelp(prev => !prev);\n          break;\n        case 'n':\n        case 'N':\n          if (e.ctrlKey && !e.shiftKey && !isAdding && !isEditing && !isAddingToken) {\n            setShowNotesSidebar(prev => !prev);\n          }\n          break;\n        case 'r':\n        case 'R':\n          if (selectedToken) {\n            fetchTokenChartData(selectedToken.contractAddress);\n          } else {\n            (async () => {\n              try {\n                const fetchedPosts = await stateClient.getEntities('posts');\n                if (fetchedPosts && fetchedPosts.length > 0) {\n                  setPosts(fetchedPosts);\n                }\n              } catch (error) {\n                console.error(\"Error fetching posts:\", error);\n              }\n            })();\n          }\n          break;\n        case 'c':\n        case 'C':\n          if (!isAdding && !isEditing && !isAddingToken) {\n            if (e.shiftKey && tokens.length > 1) {\n              setCompareMode(prev => !prev);\n              setComparingTokens([]);\n            } else {\n              setShowCalendar(prev => !prev);\n            }\n          }\n          break;\n        case 'a':\n        case 'A':\n          if (isAdmin && creatorMode && !isAdding && !isEditing && !isAddingToken) {\n            setIsAddingToken(true);\n          }\n          break;\n        case 'Escape':\n          if (showKeyboardHelp) {\n            setShowKeyboardHelp(false);\n          } else if (selectedPost) {\n            handleCloseFullArticle();\n          } else if (isAdding || isEditing) {\n            handleCancel();\n          } else if (isAddingToken) {\n            setIsAddingToken(false);\n            setIsEditing(false);\n          }\n          break;\n        case 'h':\n        case 'H':\n          handleLogoClick();\n          break;\n        case '1':\n          if (isTerminalMode && selectedToken) setActiveDashboardTab('tokenInfo');\n          break;\n        case '2':\n          if (isTerminalMode && selectedToken) setActiveDashboardTab('metrics');\n          break;\n        case '3':\n          if (isTerminalMode && selectedToken) setActiveDashboardTab('mutuals');\n          break;\n        case '4':\n          if (isTerminalMode && selectedToken) setActiveDashboardTab('tokenomics');\n          break;\n        case '5':\n          if (isTerminalMode && selectedToken) setActiveDashboardTab('social');\n          break;\n        case '6':\n          if (selectedToken) setActiveDashboardTab('update');\n          break;\n        case '7':\n          break;\n        default:\n          break;\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [isTerminalMode, isAdmin, creatorMode, isAdding, isEditing, isAddingToken, selectedPost, selectedToken, showKeyboardHelp]);\n  const MutualsView = () => {\n    const [teamMembers, setTeamMembers] = useState([]);\n    const [name, setName] = useState('');\n    const [role, setRole] = useState('Team');\n    const [bio, setBio] = useState('');\n    const [twitter, setTwitter] = useState('');\n    const [imageUrl, setImageUrl] = useState('');\n    const [previousProjects, setPreviousProjects] = useState('');\n    const [accountMutual, setAccountMutual] = useState('');\n    const [commitment, setCommitment] = useState('');\n    const [showForm, setShowForm] = useState(false);\n    const [isLoading, setIsLoading] = useState(true);\n    const [isSubmitting, setIsSubmitting] = useState(false);\n    useEffect(() => {\n      fetchTeamMembers();\n    }, []);\n    const fetchTeamMembers = async () => {\n      setIsLoading(true);\n      try {\n        const response = await stateClient.getEntity('team', selectedToken?.contractAddress || 'global');\n        if (response && response.members && Array.isArray(response.members)) {\n          setTeamMembers(response.members);\n        } else {\n          setTeamMembers([]);\n        }\n      } catch (error) {\n        console.error(\"Error fetching team members:\", error);\n        setTeamMembers([]);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    const resetForm = () => {\n      setName('');\n      setRole('Team');\n      setBio('');\n      setTwitter('');\n      setImageUrl('');\n      setPreviousProjects('');\n      setAccountMutual('');\n      setCommitment('');\n      setShowForm(false);\n    };\n    const handleAddTeamMember = async () => {\n      if (!name.trim()) {\n        alert('Name is required');\n        return;\n      }\n      setIsSubmitting(true);\n      const newMember = {\n        id: Date.now().toString(),\n        name: name.trim(),\n        role: role,\n        bio: bio.trim(),\n        twitter: twitter.trim(),\n        imageUrl: imageUrl.trim(),\n        ...(role === 'Developer' && {\n          previousProjects: previousProjects.trim(),\n          accountMutual: accountMutual.trim(),\n          commitment: commitment.trim()\n        })\n      };\n      const updatedMembers = [...teamMembers, newMember];\n      try {\n        const entityId = selectedToken?.contractAddress || 'global';\n        try {\n          await stateClient.createEntity('team', {\n            id: entityId,\n            members: updatedMembers,\n            lastUpdated: new Date().toISOString()\n          });\n        } catch (error) {\n          await stateClient.updateEntity('team', entityId, {\n            members: updatedMembers,\n            lastUpdated: new Date().toISOString()\n          });\n        }\n        setTeamMembers(updatedMembers);\n        resetForm();\n      } catch (error) {\n        console.error(\"Error saving team member:\", error);\n        alert(\"Failed to save team member. Please try again.\");\n      } finally {\n        setIsSubmitting(false);\n      }\n    };\n    return <div className=\"bg-white p-6 rounded-lg shadow-sm border border-gray-200\">\n        <div className=\"flex justify-between items-center mb-6\">\n          <h2 className=\"text-xl font-bold flex items-center\">\n            <UsersIcon className=\"mr-2 text-blue-500\" size={24} />\n            Team Members\n          </h2>\n          \n          {isAdmin && creatorMode && !showForm && <button onClick={() => setShowForm(true)} className=\"flex items-center px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700\">\n              <Plus size={16} className=\"mr-1\" />\n              Add Member\n            </button>}\n        </div>\n        \n        {isLoading ? <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n            <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar\" className=\"w-12 h-12 mb-2\" />\n            <span className=\"text-gray-700 font-medium\">Sabar Nggih...</span>\n          </div> : <>\n            {isAdmin && creatorMode && showForm && <div className=\"mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg\">\n            <div className=\"flex justify-between items-center mb-4\">\n                <h3 className=\"text-lg font-medium text-blue-800\">\n                  Add Team Member\n                </h3>\n                <button onClick={resetForm} className=\"text-gray-500 hover:text-gray-700 p-1 rounded\">\n                  <X size={18} />\n                </button>\n              </div>\n              \n              <div className=\"space-y-4\">\n                <div>\n                  <label htmlFor=\"memberName\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Name*\n                  </label>\n                  <input id=\"memberName\" type=\"text\" value={name} onChange={e => setName(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded\" placeholder=\"Enter name\" required />\n                </div>\n                \n                <div>\n                  <label htmlFor=\"memberRole\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Role\n                  </label>\n                  <select id=\"memberRole\" value={role} onChange={e => setRole(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded\">\n                    <option value=\"Team\">Team</option>\n                    <option value=\"Developer\">Developer</option>\n                    <option value=\"Advisor\">Advisor</option>\n                    <option value=\"Investor\">Investor</option>\n                    <option value=\"Community Manager\">Community Manager</option>\n                  </select>\n                </div>\n                \n                {role === 'Developer' && <div className=\"border-t border-gray-200 mt-4 pt-4 space-y-4\">\n                    <div className=\"text-sm font-medium text-blue-600\">Developer-specific Information</div>\n                    <div>\n                      <label htmlFor=\"previousProjects\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                        Previous Projects\n                      </label>\n                      <textarea id=\"previousProjects\" value={previousProjects} onChange={e => setPreviousProjects(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded h-20\" placeholder=\"List previous projects developed by this person\" />\n                    </div>\n                    <div>\n                      <label htmlFor=\"accountMutual\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                        Account Mutual\n                      </label>\n                      <textarea id=\"accountMutual\" value={accountMutual} onChange={e => setAccountMutual(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded h-20\" placeholder=\"Mutual connections and accounts\" />\n                    </div>\n                    <div>\n                      <label htmlFor=\"commitment\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                        Commitment\n                      </label>\n                      <textarea id=\"commitment\" value={commitment} onChange={e => setCommitment(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded\" placeholder=\"Commitment level to the project (e.g., Full-time, 80%)\" />\n                    </div>\n                  </div>}\n                \n                <div>\n                  <label htmlFor=\"memberImageUrl\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Profile Image URL\n                  </label>\n                  <input id=\"memberImageUrl\" type=\"text\" value={imageUrl} onChange={e => setImageUrl(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded\" placeholder=\"https://example.com/image.jpg\" />\n                  {imageUrl && <div className=\"mt-2 p-2 border border-gray-200 rounded bg-gray-50\">\n                      <p className=\"text-xs text-gray-500 mb-1\">Preview:</p>\n                      <img src={imageUrl} alt=\"Profile preview\" className=\"w-16 h-16 object-cover rounded-full border border-gray-300\" onError={e => {\n                  e.target.src = \"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\";\n                  e.target.className += \" p-2\";\n                }} />\n                    </div>}\n                </div>\n                \n                <div>\n                  <label htmlFor=\"memberTwitter\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Twitter Handle\n                  </label>\n                  <div className=\"flex\">\n                    <span className=\"inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-r-0 border-gray-300 rounded-l-md\">\n                      @\n                    </span>\n                    <input id=\"memberTwitter\" type=\"text\" value={twitter} onChange={e => setTwitter(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded-r\" placeholder=\"username (without @)\" />\n                  </div>\n                </div>\n                \n                <div>\n                  <label htmlFor=\"memberBio\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                    Bio\n                  </label>\n                  <textarea id=\"memberBio\" value={bio} onChange={e => setBio(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded h-24\" placeholder=\"Brief description of this team member\" />\n                </div>\n              </div>\n              \n              <div className=\"flex space-x-3 mt-4\">\n                <button onClick={resetForm} className=\"px-3 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-50\">\n                  Cancel\n                </button>\n                <button onClick={handleAddTeamMember} className=\"px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\" disabled={!name.trim() || isSubmitting}>\n                  {isSubmitting ? <>\n                      <RefreshCw size={16} className=\"mr-2 animate-spin\" />\n                      Saving...\n                    </> : <>\n                      <Save size={16} className=\"mr-2\" />\n                      Add Member\n                    </>}\n                </button>\n              </div>\n            </div>}\n        \n        {teamMembers.length > 0 ? <div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6\">\n                {teamMembers.map(member => <div key={member.id} className=\"group bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1\">\n                    <div className=\"relative h-48 bg-gradient-to-br from-blue-100 to-gray-100 overflow-hidden\">\n                      {member.imageUrl ? <img src={member.imageUrl} alt={member.name} className=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\" onError={e => {\n                e.target.onerror = null;\n                e.target.src = \"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\";\n                e.target.className = \"w-full h-full object-contain p-8\";\n              }} /> : <div className=\"absolute inset-0 flex items-center justify-center\">\n                          <div className=\"w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center text-3xl font-bold text-gray-400\">\n                            {member.name.charAt(0)}\n                          </div>\n                        </div>}\n                      <div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-gray-900 to-transparent p-4 pt-8\">\n                        <div className=\"flex justify-between items-center\">\n                          <h3 className=\"font-bold text-lg text-white\">{member.name}</h3>\n                          <span className=\"text-xs bg-white/90 px-3 py-1 rounded-full text-gray-800 font-medium\">\n                            {member.role}\n                          </span>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"p-4\">\n                      {member.twitter && <a href={`https://twitter.com/${member.twitter}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-blue-500 flex items-center text-sm mb-3 hover:text-blue-700 transition-colors\">\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"w-4 h-4 mr-1\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                            <path d=\"M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z\" />\n                          </svg>\n                          @{member.twitter}\n                        </a>}\n                      <p className=\"text-gray-700 text-sm leading-relaxed\">\n                        {member.bio || \"Team member of the project.\"}\n                      </p>\n                      \n                      {member.role === 'Developer' && <div className=\"mt-3 pt-3 border-t border-gray-100\">\n                          <button onClick={e => {\n                  e.stopPropagation();\n                  setSelectedDeveloper(member);\n                }} className=\"text-blue-600 text-sm font-medium flex items-center hover:text-blue-800\">\n                            <ExternalLink size={14} className=\"mr-1\" />\n                            See Developer Details\n                          </button>\n                        </div>}\n                    </div>\n                  </div>)}\n              </div> : <div className=\"flex flex-col items-center justify-center py-8 text-center\">\n                <div className=\"bg-gray-100 p-4 rounded-full mb-4\">\n                  <Users size={24} className=\"text-gray-400\" />\n                </div>\n                <h3 className=\"text-lg font-medium mb-2\">\n                  No Team Members\n                </h3>\n                <p className=\"text-gray-600 max-w-md mb-4\">\n                  {isAdmin && creatorMode ? \"Add your first team member to get started.\" : \"No team members have been added yet.\"}\n                </p>\n                {isAdmin && creatorMode && <button onClick={() => setShowForm(true)} className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center\">\n                    <Plus size={16} className=\"mr-2\" />\n                    Add Team Member\n                  </button>}\n              </div>}\n          </>}\n      </div>;\n  };\n  const NotesAIAssistant = ({\n    notesContent,\n    onClose\n  }) => {\n    const allPostsContent = posts.map(post => `Judul: ${post.title}\\nTanggal: ${new Date(post.created).toLocaleDateString('id-ID')}\\nKonten: ${post.content}\\n`).join('\\n---\\n');\n    const systemPrompt = `\nKamu adalah Semar, asisten pribadi yang berasal dari mitologi Jawa, penuh kebijaksanaan dan ketenangan.\nKamu memiliki akses ke catatan pribadi pengguna:\n\"\"\"\n${notesContent || \"Pengguna belum menulis catatan apapun.\"}\n\"\"\"\nDan semua berita di PaceTerminal:\n\"\"\"\n${allPostsContent || \"Belum ada berita yang tersedia di PaceTerminal.\"}\n\"\"\"\nSebagai asisten pribadi, tugasmu:\n- Menjawab dengan ringkas, tepat, dan akurat\n- Membantu mencari dan mengorganisir informasi dari catatan dan berita\n- Memberi jawaban dengan sentuhan bahasa Jawa yang sopan (seperti \"nggih\", \"monggo\", \"sampun\")\n- Menjaga ketenangan dalam setiap jawaban\nPanduan menjawab:\n- Berikan jawaban singkat namun informatif\n- Untuk berita, fokus pada fakta utama dan bantu menemukan berita yang relevan\n- Untuk catatan pribadi, bantu mengorganisir dan menemukan informasi penting\n- Jika informasi tidak ada, jawab dengan jujur dan singkat\n- Gunakan kata-kata menenangkan dan bahasa Jawa yang sopan secara wajar\nSelalu jaga privasi pengguna dan berikan ketenangan dalam setiap interaksi.\n`;\n    const messageContainerRef = useRef(null);\n    const inputRef = useRef(null);\n    const {\n      messages,\n      input,\n      handleInputChange,\n      handleSubmit,\n      isLoading\n    } = useChat({\n      api: 'https://chat.dev.fun/chat/774938c22498019d9f53',\n      initialMessages: [{\n        id: 'system',\n        role: 'system',\n        content: systemPrompt\n      }],\n      onError: error => {\n        console.error(\"Semar AI error:\", error);\n      }\n    });\n    const visibleMessages = messages.filter(message => message.role !== 'system');\n    useEffect(() => {\n      if (messageContainerRef.current) {\n        messageContainerRef.current.scrollTop = messageContainerRef.current.scrollHeight;\n      }\n    }, [visibleMessages.length]);\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.focus();\n      }\n    }, []);\n    return <div className=\"fixed bottom-4 right-4 bg-white rounded-xl shadow-2xl border border-gray-200 w-[350px] z-50\">\n        <div className=\"p-3 flex justify-between items-center bg-white rounded-t-xl border-b border-gray-200\">\n          <h3 className=\"font-bold text-gray-800 text-base flex items-center\">\n            <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-5 h-5 mr-2\" />\n            Semar AI\n          </h3>\n          <button onClick={onClose} className=\"p-1 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors\">\n            <X size={18} />\n          </button>\n        </div>\n        <div ref={messageContainerRef} className=\"max-h-80 overflow-y-auto p-3 bg-white\">\n          {visibleMessages.length === 0 ? <div className=\"text-center p-4 bg-white rounded-lg border border-gray-200\">\n              <div className=\"mx-auto mb-3\">\n                <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-16 h-16\" />\n              </div>\n              <p className=\"text-sm font-medium text-gray-800 mb-2\">\n                Monggo, pripun nggih? Ada yang bisa Semar bantu?\n              </p>\n              <p className=\"text-xs text-gray-600\">\n                Saya bisa membantu Anda dengan catatan atau berita di PaceTerminal\n              </p>\n            </div> : <div className=\"space-y-3\">\n              {visibleMessages.map(message => <div key={message.id} className={`p-2 rounded-lg text-sm ${message.role === 'user' ? 'bg-gray-100 ml-8 border border-gray-200 text-gray-800' : 'bg-gray-100 mr-8 border border-gray-200 text-gray-800'}`}>\n                  {message.role === 'assistant' && <div className=\"flex items-start\">\n                      <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-4 h-4 mr-2\" />\n                      <div className=\"whitespace-pre-wrap font-medium\">{message.content}</div>\n                    </div>}\n                  {message.role === 'user' && <div className=\"flex justify-end\">\n                      <div className=\"whitespace-pre-wrap font-medium\">{message.content}</div>\n                    </div>}\n                </div>)}\n              {isLoading && <div className=\"p-2 rounded-lg bg-gray-100 mr-8 border border-gray-200\">\n                  <div className=\"flex items-start\">\n                    <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-4 h-4 mr-2\" />\n                    <div className=\"flex space-x-1\">\n                      <div className=\"w-2 h-2 bg-gray-500 rounded-full animate-pulse\" style={{\n                  animationDelay: '0ms'\n                }}></div>\n                      <div className=\"w-2 h-2 bg-gray-700 rounded-full animate-pulse\" style={{\n                  animationDelay: '300ms'\n                }}></div>\n                      <div className=\"w-2 h-2 bg-gray-500 rounded-full animate-pulse\" style={{\n                  animationDelay: '600ms'\n                }}></div>\n                    </div>\n                  </div>\n                </div>}\n            </div>}\n        </div>\n        <div className=\"p-3 border-t border-gray-200 bg-white rounded-b-xl\">\n          <form onSubmit={handleSubmit} className=\"flex items-center space-x-2\">\n            <input ref={inputRef} type=\"text\" value={input} onChange={handleInputChange} placeholder=\"Tanya Semar...\" className=\"flex-1 p-2 text-sm bg-white text-gray-800 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent placeholder-gray-400 font-medium\" autoFocus />\n            <button type=\"submit\" className={`p-2 rounded-lg ${isLoading ? 'bg-gray-200 text-gray-400' : 'bg-gray-700 text-white hover:bg-gray-800'} shadow-lg`} disabled={isLoading || !input.trim()}>\n              {isLoading ? <RefreshCw size={16} className=\"animate-spin\" /> : <Send size={16} />}\n            </button>\n          </form>\n          <p className=\"text-xs text-gray-500 text-center mt-2 font-medium\">\n            Your Personal Assistant\n          </p>\n        </div>\n      </div>;\n  };\n  const LoadingScreen = () => <div className=\"fixed inset-0 bg-[#f8f3e3] flex flex-col items-center justify-center z-50 transition-opacity duration-1000\" style={{\n    opacity: isLoading ? 1 : 0,\n    pointerEvents: isLoading ? 'auto' : 'none'\n  }}>\n      <div className=\"relative\">\n        <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar\" className=\"w-32 h-32 mb-4 animate-pulse\" style={{\n        animation: \"pulse 2s infinite ease-in-out\"\n      }} />\n        <div className=\"absolute -bottom-2 left-0 right-0 h-4 bg-[#f8f3e3] blur-sm\"></div>\n      </div>\n      <h1 className=\"text-5xl font-bold text-gray-800 tracking-widest mb-4 animate-fadeIn\">\n        MONGGO\n      </h1>\n      <div className=\"flex space-x-3 mt-4\">\n        <div className=\"w-3 h-3 rounded-full bg-gray-800 animate-bounce\" style={{\n        animationDelay: \"0ms\"\n      }}></div>\n        <div className=\"w-3 h-3 rounded-full bg-gray-800 animate-bounce\" style={{\n        animationDelay: \"300ms\"\n      }}></div>\n        <div className=\"w-3 h-3 rounded-full bg-gray-800 animate-bounce\" style={{\n        animationDelay: \"600ms\"\n      }}></div>\n      </div>\n      <style jsx>{`\n        @keyframes pulse {\n          0%, 100% { transform: scale(1); }\n          50% { transform: scale(1.1); }\n        }\n        @keyframes fadeIn {\n          from { opacity: 0; transform: translateY(10px); }\n          to { opacity: 1; transform: translateY(0); }\n        }\n        .animate-fadeIn {\n          animation: fadeIn 1s ease-out forwards;\n        }\n      `}</style>\n    </div>;\n  useEffect(() => {\n    const handleUserInteraction = () => {\n      markUserInteraction();\n    };\n    document.addEventListener('mousedown', handleUserInteraction);\n    document.addEventListener('keydown', handleUserInteraction);\n    document.addEventListener('touchstart', handleUserInteraction);\n    document.addEventListener('scroll', handleUserInteraction);\n    return () => {\n      document.removeEventListener('mousedown', handleUserInteraction);\n      document.removeEventListener('keydown', handleUserInteraction);\n      document.removeEventListener('touchstart', handleUserInteraction);\n      document.removeEventListener('scroll', handleUserInteraction);\n      if (interactionTimeoutRef.current) {\n        clearTimeout(interactionTimeoutRef.current);\n      }\n    };\n  }, []);\n  return <div className=\"h-screen w-screen flex flex-col overflow-hidden bg-gray-50 text-gray-900\">\n      <LoadingScreen />\n      \n      {isAddingToken && <TokenForm />}\n      {selectedDeveloper && <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\" onClick={() => setSelectedDeveloper(null)}>\n          <div className=\"bg-white rounded-lg overflow-hidden shadow-lg w-full max-w-lg\" onClick={e => e.stopPropagation()}>\n            <div className=\"p-4 bg-gray-800 text-white flex justify-between items-center\">\n              <h2 className=\"text-xl font-bold\">{selectedDeveloper.name} - Developer Profile</h2>\n              <button onClick={() => setSelectedDeveloper(null)} className=\"p-1 rounded-full hover:bg-gray-700\">\n                <X size={20} />\n              </button>\n            </div>\n            <div className=\"p-4\">\n              <div className=\"mb-4 border-b pb-2\">\n                <h3 className=\"font-bold mb-2\">Previous Projects</h3>\n                <p className=\"whitespace-pre-wrap\">{selectedDeveloper.previousProjects || `${selectedDeveloper.name} is known for developing cutting-edge blockchain applications.`}</p>\n              </div>\n              <div className=\"mb-4 border-b pb-2\">\n                <h3 className=\"font-bold mb-2\">Account Mutual</h3>\n                <p className=\"whitespace-pre-wrap\">{selectedDeveloper.accountMutual || \"Successful launches: 4+\\nYears of experience: 5+\\nTrusted by top projects in the space\"}</p>\n              </div>\n              <div className=\"mb-4 border-b pb-2\">\n                <h3 className=\"font-bold mb-2\">Commitment</h3>\n                <p className=\"whitespace-pre-wrap\">{selectedDeveloper.commitment || \"90% committed to the project\"}</p>\n              </div>\n              <div>\n                <h3 className=\"font-bold mb-2\">Network</h3>\n                <p>Connected with major projects and developers in the ecosystem</p>\n              </div>\n            </div>\n            <div className=\"p-4 bg-gray-100 flex justify-end\">\n              <button onClick={() => setSelectedDeveloper(null)} className=\"px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-900\">\n                Close\n              </button>\n            </div>\n          </div>\n        </div>}\n      {showLoginModal && <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\">\n          <div className=\"bg-white rounded-lg p-6 max-w-md w-full\">\n            <div className=\"flex justify-between items-center mb-4\">\n              <h2 className=\"text-xl font-serif font-bold\">Admin Login</h2>\n              <button onClick={() => setShowLoginModal(false)} className=\"text-gray-500 hover:text-gray-700\">\n                <X size={20} />\n              </button>\n            </div>\n            <form onSubmit={handleLogin} className=\"space-y-4\">\n              {loginError && <div className=\"p-2 bg-red-50 text-red-600 text-sm rounded\">\n                  {loginError}\n                </div>}\n              <div>\n                <label htmlFor=\"username\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Username\n                </label>\n                <input id=\"username\" type=\"text\" value={loginUsername} onChange={e => setLoginUsername(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" required />\n              </div>\n              <div>\n                <label htmlFor=\"password\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Password\n                </label>\n                <input id=\"password\" type=\"password\" value={loginPassword} onChange={e => setLoginPassword(e.target.value)} className=\"w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\" required />\n              </div>\n              <div className=\"flex justify-end\">\n                <button type=\"submit\" className=\"px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700\">\n                  Login\n                </button>\n              </div>\n            </form>\n          </div>\n        </div>}\n      {showKeyboardHelp && <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\" onClick={() => setShowKeyboardHelp(false)}>\n          <div className=\"bg-white rounded-lg p-6 max-w-xl w-full\" onClick={e => e.stopPropagation()}>\n            <div className=\"flex justify-between items-center mb-4\">\n              <h2 className=\"text-xl font-serif font-bold flex items-center\">\n                <Keyboard size={24} className=\"mr-2\" />\n                Keyboard Shortcuts\n              </h2>\n              <button onClick={() => setShowKeyboardHelp(false)} className=\"text-gray-500 hover:text-gray-700\">\n                <X size={20} />\n              </button>\n            </div>\n            <div className=\"grid grid-cols-2 gap-x-8 gap-y-3\">\n              {keyboardShortcuts.map((shortcut, index) => <div key={index} className=\"flex items-center\">\n                  <div className=\"bg-gray-100 rounded px-2 py-1 font-mono text-sm font-bold mr-3 min-w-[32px] text-center\">\n                    {shortcut.key}\n                  </div>\n                  <div className=\"text-gray-700\">{shortcut.description}</div>\n                </div>)}\n            </div>\n            <p className=\"mt-6 text-sm text-gray-500\">Press ? anytime to show/hide this dialog</p>\n          </div>\n        </div>}\n      <header className=\"bg-white border-b border-gray-200 z-10 flex-shrink-0\">\n        <div className=\"max-w-screen-2xl w-full mx-auto p-2 md:p-3\">\n          <div className=\"flex items-baseline justify-center relative\">\n          {}\n          <div onClick={handleLogoClick} className=\"flex flex-col items-center group cursor-pointer w-full\">\n                <h1 className=\"text-5xl md:text-7xl font-bold tracking-tight group-hover:text-gray-800 transition-all duration-300 text-center logo-hover\" style={{\n              fontFamily: 'Verdana, Arial, sans-serif',\n              letterSpacing: '0.08em',\n              fontWeight: '900',\n              textTransform: 'uppercase',\n              textShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'\n            }}>\n                  PACETERMINAL\n                </h1>\n                <style jsx>{`\n                  .logo-hover:hover {\n                    transform: scale(1.01) !important;\n                    letter-spacing: 0.085em;\n                  }\n                `}</style>\n                <div className=\"my-2\"></div>\n                  {}\n                <style jsx>{`\n                  @keyframes blink {\n                    0%, 100% { opacity: 1; }\n                    50% { opacity: 0; }\n                  }\n                  .animate-blink {\n                    animation: blink 1s step-end infinite;\n                  }\n                `}</style>\n              </div>\n            <div className=\"flex items-center space-x-3 absolute right-4 top-4\">\n              <button onClick={() => setShowNotesSidebar(true)} className=\"bg-white rounded-md border-[1px] border-gray-300 shadow-[0_0_15px_rgba(0,0,0,0.1)] px-4 py-2 text-gray-800 hover:bg-gray-50 flex items-center transition-all duration-300\" title=\"Cathetan\">\n                <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-5 h-5 mr-2\" />\n                <span className=\"text-sm font-bold\">CATHETAN</span>\n              </button>\n              {isAdmin && <div className=\"flex items-center\">\n                  <span className={`mr-1 text-xs font-medium ${creatorMode ? 'text-gray-900' : 'text-gray-500'}`}>\n                    <Edit size={14} className=\"inline mr-0.5\" />\n                    Edit\n                  </span>\n                  <label className=\"relative inline-flex items-center cursor-pointer\">\n                    <input type=\"checkbox\" value=\"\" className=\"sr-only peer\" checked={!creatorMode} onChange={() => setCreatorMode(!creatorMode)} />\n                    <div className=\"w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600\"></div>\n                  </label>\n                  <span className={`ml-1 text-xs font-medium ${!creatorMode ? 'text-gray-900' : 'text-gray-500'}`}>\n                    <Eye size={14} className=\"inline mr-0.5\" />\n                    View\n                  </span>\n                </div>}\n              <button onClick={() => setShowKeyboardHelp(true)} className=\"ml-2 p-1 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100\" title=\"Keyboard shortcuts\">\n                <HelpCircle size={16} />\n              </button>\n              \n              {isAdmin && !isAdding && !isEditing && !isAddingToken && creatorMode && <button onClick={() => setIsAddingToken(true)} className=\"flex items-center px-2 py-1 text-xs text-white bg-gray-700 rounded hover:bg-gray-800 border border-gray-600 shadow-sm\">\n                  <Plus size={12} className=\"mr-1\" />\n                  Add Token\n                </button>}\n              {isAdmin && <div className=\"flex flex-col items-end\">\n                  <button onClick={handleLogout} className=\"flex items-center px-2 py-1 text-xs text-red-600 bg-red-50 rounded hover:bg-red-100\">\n                    <LogOut size={12} className=\"mr-1\" />\n                    Logout\n                  </button>\n                  <div className=\"mt-1 px-3 py-1 rounded bg-gray-800 text-gray-300 flex items-center text-xs\">\n                    {isTerminalMode ? <>\n                        <span className=\"font-mono mr-1 text-xs text-gray-400 animate-pulse\">{\"%\"}</span>\n                        <span className=\"text-xs font-medium\">{creatorMode ? \"Creator Mode\" : \"Viewer Mode\"}</span>\n                      </> : <>\n                        <span className=\"font-mono mr-1 text-xs text-gray-400\">{\">\"}</span>\n                        <span className=\"text-xs font-medium\">{creatorMode ? \"Creator Mode\" : \"Viewer Mode\"}</span>\n                      </>}\n                  </div>\n                </div>}\n            </div>\n          </div>\n          <div className=\"relative py-2 mt-4\">\n            <div className=\"absolute top-0 left-0 right-0 h-px bg-gray-300\"></div>\n            <div className=\"absolute bottom-0 left-0 right-0 h-px bg-gray-300\"></div>\n            <div className=\"flex justify-center items-center\">\n              <div onClick={() => setShowCalendar(true)} className=\"text-sm text-gray-700 font-bold px-4 bg-white cursor-pointer hover:scale-110 transition-transform duration-200 flex items-center\">\n                <Calendar size={14} className=\"mr-1.5\" />\n                {currentDate}\n              </div>\n            </div>\n          </div>\n        </div>\n      </header>\n      <main className=\"flex-grow overflow-auto w-full h-full\">\n        <div className=\"max-w-screen-2xl mx-auto p-1 md:p-2 h-full\">\n          {showCalendar ? <CalendarView selectedDate={selectedCalendarDate} setSelectedDate={setSelectedCalendarDate} viewMonth={viewMonth} setViewMonth={setViewMonth} onClose={() => setShowCalendar(false)} /> : <TerminalView />}\n        </div>\n      </main>\n    <footer className=\"border-t border-gray-200\">\n        <div className=\"max-w-screen-2xl w-full mx-auto py-1 px-3 text-gray-500 text-xs\">\n          <div className=\"flex justify-between items-center\">\n            <div className=\"flex items-center\">\n              <span>PACETERMINAL - Hong Wilaheng Sekareng Bawono Langgeng</span>\n            </div>\n          {!isAdmin && <button onClick={() => setShowLoginModal(true)} className=\"text-gray-400 hover:text-gray-600 flex items-center text-xs bg-gray-800 px-2 py-1 rounded-sm border border-gray-700 shadow-sm\" title=\"Admin Login\">\n                <Lock size={10} className=\"mr-1\" />\n                Admin\n              </button>}\n          </div>\n        </div>\n      </footer>\n      {isAdmin && <div className={`fixed bottom-4 right-4 px-4 py-2 bg-white border-2 border-gray-400 rounded-md shadow-lg transition-opacity duration-300 ${creatorMode ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>\n          <div className=\"flex items-center text-sm font-medium\">\n            <Edit size={16} className=\"mr-2 text-blue-600\" />\n            Creator Mode Active\n          </div>\n        </div>}\n      {}\n      <div className={`fixed top-0 right-0 h-full w-96 bg-white border-l border-gray-200 shadow-2xl transform transition-transform duration-300 ease-in-out z-50 ${showNotesSidebar ? 'translate-x-0' : 'translate-x-full'}`}>\n        <div className=\"flex flex-col h-full\">\n          <div className=\"p-5 border-b border-gray-200 flex justify-between items-center bg-white\">\n            <h3 className=\"font-bold text-gray-800 text-xl flex items-center\">\n              <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-6 h-6 mr-3\" />\n              Cathetan\n            </h3>\n            <button onClick={() => setShowNotesSidebar(false)} className=\"p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors\">\n              <X size={24} />\n            </button>\n          </div>\n          <div className=\"flex-grow p-5 overflow-y-auto bg-gray-50\">\n            <textarea ref={notesTextareaRef} value={notesContent} onChange={e => setNotesContent(e.target.value)} className=\"w-full h-full p-4 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none font-sans text-base text-gray-800\" placeholder=\"Ketik catatan pribadi Anda di sini...\" />\n          </div>\n          <div className=\"p-5 border-t border-gray-200 bg-white\">\n            <div className=\"mb-3\">\n              <div className=\"text-sm text-gray-600 mb-3 font-medium\">\n                {notesLastSaved ? <>Terakhir disimpan: {notesLastSaved.toLocaleTimeString('id-ID', {\n                  hour: '2-digit',\n                  minute: '2-digit'\n                })}</> : <>Belum disimpan</>}\n              </div>\n              <div className=\"flex flex-col space-y-3 w-full\">\n                <button onClick={() => setShowAIAssistant(!showAIAssistant)} className=\"px-4 py-3 bg-gray-700 text-white rounded-lg hover:bg-gray-800 flex items-center w-full justify-center shadow-lg font-medium text-base\">\n                  <img src=\"https://cdn.dev.fun/asset/774938c22498019d9f53/semar_13b58187.png\" alt=\"Semar AI\" className=\"w-5 h-5 mr-2\" />\n                  Tanya Semar AI\n                </button>\n                <button onClick={saveUserNotes} className=\"px-4 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-900 flex items-center w-full justify-center disabled:opacity-50 shadow-lg font-medium text-base\" disabled={isSavingNotes}>\n                  {isSavingNotes ? <>\n                    <RefreshCw size={18} className=\"mr-2 animate-spin\" />\n                    Menyimpan...\n                  </> : <>\n                    <Save size={18} className=\"mr-2\" />\n                    Simpan\n                  </>}\n                </button>\n              </div>\n            </div>\n            <p className=\"text-sm text-gray-600 italic\">\n              Catatan Anda bersifat pribadi dan hanya dapat diakses dari perangkat Anda.\n            </p>\n            <p className=\"text-sm text-gray-500 text-center mt-3 font-medium\">\n              Your Personal Note\n            </p>\n          </div>\n        </div>\n      </div>\n      {showAIAssistant && <NotesAIAssistant notesContent={notesContent} onClose={() => setShowAIAssistant(false)} />}\n    </div>;\n}","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"recharts\":\"2.8.0\",\"@devfunlabs/web-sdk\":\"0.4.0\",\"react-router-dom\":\"6.18.0\",\"framer-motion\":\"10.16.4\",\"@devfunlabs/state-client\":\"0.8.1\",\"zod\":\"3.22.4\",\"@solana/web3.js\":\"1.95.3\",\"socket.io-client\":\"4.7.2\",\"ai\":\"4.0.0\"}}","thinking","Let's analyze the latest requirement:\n\n1. Improve the format of the article section for readers\n2. Enable admins to insert an image in the middle of the article\n3. Don't change the stored function or hosting function\n\nLet's find the relevant parts of the code that handle the article display and editing. I'll first identify the ArticlesView component and understand how articles are currently being displayed and edited.\n\nI can see the ArticlesView component in the code. It handles:\n- Displaying a list of articles\n- Showing an individual article when selected\n- Adding and editing articles\n\nThe current article editing form has:\n- Title field\n- Image URL field (at the top of the article)\n- Content textarea\n\nWhat we need to do:\n1. Improve the article reading experience with better formatting\n2. Add functionality for admins to insert images within the article content (not just at the top)\n\nFor improving the article reading experience, I can:\n- Enhance typography and spacing\n- Add better visual hierarchy \n- Improve readability with line height, font size, etc.\n\nFor adding images within the article, I'll need to:\n- Modify the article editing form to support inserting images at cursor positions\n- Update the article display to properly render these embedded images\n\nLet's get started by identifying the exact sections of code to modify.","changelog","Enhanced the article section with a beautiful reading experience including elegant typography, proper spacing, and image management! Now admins can insert images anywhere in the article content for richer storytelling.","diff","isRephrased","isDebug","isSuccess","error","extensions","messageId",["B","138247"],"isDraft",[30,31],"isLordOfDev","analytics",[153,157,159,161,163,165,167,169,171,173,175,177,179,181,183,184,186,188,190],{"_154":155,"_156":60},"day","2025-05-23","runCount",{"_154":158,"_156":60},"2025-05-24",{"_154":160,"_156":60},"2025-05-25",{"_154":162,"_156":60},"2025-05-26",{"_154":164,"_156":60},"2025-05-27",{"_154":166,"_156":60},"2025-05-28",{"_154":168,"_156":60},"2025-05-29",{"_154":170,"_156":60},"2025-05-30",{"_154":172,"_156":60},"2025-05-31",{"_154":174,"_156":60},"2025-06-01",{"_154":176,"_156":60},"2025-06-02",{"_154":178,"_156":60},"2025-06-03",{"_154":180,"_156":60},"2025-06-04",{"_154":182,"_156":60},"2025-06-05",{"_154":176,"_156":72},{"_154":178,"_156":185},11,{"_154":180,"_156":187},2517,{"_154":182,"_156":189},1395,{"_154":191,"_156":192},"2025-06-06",403,"https://cdn.dev.fun/og/image/4b25487a985cd10e8c60/800a72f4.webp","commitDetail","actionData","errors"]
</article></body></html>