# thinkrank/1.0.0/src/admin/components/pages/Dashboard.js ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO, version 1.0.0. 302 lines. - Page: https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/pages/Dashboard.js - Raw: https://pluginprobe.com/plugins/thinkrank/1.0.0/raw/src/admin/components/pages/Dashboard.js - Modified: 2025-08-10T10:57:26+00:00 Line numbers below start at 1. Link to a line or a range by appending a fragment to the page URL, for example `https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/pages/Dashboard.js#L10-L20`. ```javascript /** * Dashboard Page Component * * Main dashboard for ThinkRank admin interface * * @package ThinkRank * @since 1.0.0 */ import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Card, CardBody, CardHeader, Spinner } from '@wordpress/components'; import apiFetch from '@wordpress/api-fetch'; // AI Provider Icons - Reusing from Settings page for consistency const OpenAIIcon = () => ( ); const ClaudeIcon = () => ( ); /** * Dashboard Component */ const Dashboard = () => { return (

); }; /** * Overview Tab Component */ const OverviewTab = () => { const [settings, setSettings] = useState(null); const [briefCount, setBriefCount] = useState(0); const [isLoading, setIsLoading] = useState(true); // Helper function to check if API is actually configured const isApiConfigured = (settings) => { if (!settings?.ai_provider) return false; const apiKeyField = settings.ai_provider === 'openai' ? 'openai_api_key' : 'claude_api_key'; const apiKey = settings[apiKeyField]; // Check if API key exists - masked keys (••••••••) indicate a saved key return apiKey && apiKey.trim() && (apiKey.includes('••••') || apiKey.length > 10); }; useEffect(() => { const loadDashboardData = async () => { try { // Load settings to show API connection status const settingsResponse = await apiFetch({ path: '/thinkrank/v1/settings', method: 'GET', }); setSettings(settingsResponse); // Load brief count const briefsResponse = await apiFetch({ path: '/thinkrank/v1/content-brief/list', method: 'GET', }); setBriefCount(briefsResponse?.data?.length || 0); } catch (error) { console.error('Failed to load dashboard data:', error); } finally { setIsLoading(false); } }; loadDashboardData(); // Also refresh when the component becomes visible (e.g., tab switch) const handleVisibilityChange = () => { if (!document.hidden) { loadDashboardData(); } }; document.addEventListener('visibilitychange', handleVisibilityChange); return () => { document.removeEventListener('visibilitychange', handleVisibilityChange); }; }, []); if (isLoading) { return (

); } // Professional icons for dashboard cards const CheckIcon = () => ( ); const DocumentIcon = () => ( ); const StatusIcon = () => ( ); return (

{__('Dashboard Overview', 'thinkrank')}

{__('Your AI-powered content brief generator status and statistics.', 'thinkrank')}

{/* AI Status Card */}

{/* Status Badge */}

{isApiConfigured(settings) ? __('Connected', 'thinkrank') : __('Not Connected', 'thinkrank')}

{isApiConfigured(settings) && settings?.ai_provider === 'claude' ? ( ) : isApiConfigured(settings) && settings?.ai_provider === 'openai' ? ( ) : ( )}

{__('AI Provider', 'thinkrank')}

{isApiConfigured(settings) ? ( <>

{settings.ai_provider === 'openai' ? 'OpenAI' : (settings.ai_provider === 'claude' ? 'Claude' : 'Gemini')}

{(() => { const model = settings.ai_provider === 'claude' ? settings.claude_model : (settings.ai_provider === 'gemini' ? settings.gemini_model : settings.openai_model); // Use shared ModelBadge display names switch (model) { case 'gpt-5-nano': return 'GPT‑5‑nano'; case 'gpt-5-mini': return 'GPT‑5‑mini'; case 'gpt-5': return 'GPT‑5'; case 'gpt-4o': return 'GPT‑4o'; case 'claude-sonnet-4-0': case 'claude-sonnet-4-20250514': return 'Claude 4 Sonnet'; case 'claude-opus-4-0': case 'claude-opus-4-20250514': return 'Claude 4 Opus'; case 'claude-3-7-sonnet-latest': case 'claude-3-7-sonnet-20250219': return 'Claude 3.7 Sonnet'; case 'claude-3-5-sonnet-latest': case 'claude-3-5-sonnet-20241022': return 'Claude 3.5 Sonnet'; case 'claude-3-5-haiku-latest': case 'claude-3-5-haiku-20241022': return 'Claude 3.5 Haiku'; case 'gemini-2.5-flash': return 'Gemini 2.5 Flash'; case 'gemini-2.5-flash-lite': return 'Gemini 2.5 Flash-Lite'; case 'gemini-2.5-pro': return 'Gemini 2.5 Pro'; case 'gemini-2.0-flash': return 'Gemini 2.0 Flash'; case 'gemini-1.5-flash': return 'Gemini 1.5 Flash'; default: return model; } return model || 'Not configured'; })()}

) : ( <>

{__('Not Configured', 'thinkrank')}

{__('Configure API settings', 'thinkrank')}

)}

{/* Content Briefs Card */}

{/* Status Badge */}

{briefCount > 0 ? __('Active', 'thinkrank') : __('Empty', 'thinkrank')}

{__('Content Briefs', 'thinkrank')}

{briefCount}

{__('Total Created', 'thinkrank')}

{/* System Status Card */}

{/* Status Badge */}

{isApiConfigured(settings) ? __('Ready', 'thinkrank') : __('Setup Required', 'thinkrank')}

{__('System Status', 'thinkrank')}

{isApiConfigured(settings) ? __('Operational', 'thinkrank') : __('Setup Required', 'thinkrank')}

{isApiConfigured(settings) ? __('All systems running smoothly', 'thinkrank') : __('Configure API to get started', 'thinkrank')}

); }; export default Dashboard; ```