[{"_1":2,"_136":-5,"_137":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":17,"_25":26,"_27":28,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_56":57,"_58":59,"_60":42,"_61":62,"_63":64,"_65":42,"_66":42,"_67":64,"_68":64,"_69":64,"_70":26,"_71":26,"_72":73,"_74":75,"_76":77,"_78":79,"_80":81,"_98":-5,"_99":17,"_100":101,"_132":32,"_133":134,"_135":17},"id","774938c22498019d9f53","isMyApp",false,"name","Pace Terminal","description","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.","brief","Your exclusive one-person Bloomberg where you're the only journalist, editor, and publisher.","isLive","isPublic",true,"tags",[29,30],"💰","👑","cover","https://cdn.dev.fun/snapshot/774938c22498019d9f53/73112_3162ff7f.webp","cdnUrl","https://cdn.dev.fun/app/774938c22498019d9f53/73112","createdAt",["D",1747288213163],"updatedAt",["D",1748879159031],"lastCommitId",["B","73112"],"tier",1,"credits",55,{"_14":46,"_47":48,"_49":-5,"_50":48,"_51":52,"_53":-5,"_54":55},"0d634fa7-96fc-41e3-8c66-c712ff1e4235","uniqueId","AygcLpbG6kGE271nhZeHfdDezt76rcYEM73cWsWNHxXj","username","solanaWallet","displayName","Ayg...xXj","bio","avatar","/avatar.svg","commitCount",328,"forkCount",2,"likeCount","runsCount",409,"downvoteCount",0,"upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","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: '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 ||

Something went wrong. Please try again.

;\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

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/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}","packageJson","{\"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\"}}","appFunctions",[],"token",{"_18":82,"_83":82,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":95,"_96":97,"_72":73},"buidl","symbol","price",0.0009019,"marketcap",901967,"image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","https://buidl.eco/","twitter","https://x.com/buidldao_","devCount",320,"appCount",2183,"upstreamApp","isLordOfDev","analytics",[102,106,108,110,112,114,116,118,120,122,124,126,128,130],{"_103":104,"_105":64},"day","2025-08-09","runCount",{"_103":107,"_105":64},"2025-08-10",{"_103":109,"_105":64},"2025-08-11",{"_103":111,"_105":64},"2025-08-12",{"_103":113,"_105":64},"2025-08-13",{"_103":115,"_105":64},"2025-08-14",{"_103":117,"_105":64},"2025-08-15",{"_103":119,"_105":64},"2025-08-16",{"_103":121,"_105":64},"2025-08-17",{"_103":123,"_105":64},"2025-08-18",{"_103":125,"_105":64},"2025-08-19",{"_103":127,"_105":64},"2025-08-20",{"_103":129,"_105":64},"2025-08-21",{"_103":131,"_105":64},"2025-08-22","snapshot","ogImage","https://cdn.dev.fun/og/image/774938c22498019d9f53/8232ef51.webp","isDevbase","actionData","errors"]
</article></body></html>

say something