firefrost-services/services/arbiter-3.0/src/views/admin/dashboard.ejs

    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <div class="text-sm text-gray-500 dark:text-gray-400">Active Subscribers</div>
            <div class="text-3xl font-bold mt-2"><%= activeSubscribers %></div>
        </div>
        <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <div class="text-sm text-gray-500 dark:text-gray-400">Total MRR</div>
            <div class="text-3xl font-bold mt-2">$<%= totalMRR.toFixed(0) %></div>
        </div>
        <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <div class="text-sm text-gray-500 dark:text-gray-400">Servers Online</div>
            <div class="text-3xl font-bold mt-2"><%= serversOnline %></div>
        </div>
        <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <div class="text-sm text-gray-500 dark:text-gray-400">Last Sync</div>
            <% if (lastSyncTime) { %>
                <div class="text-xl font-bold mt-2 text-green-500">✓</div>
                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    <%= new Date(lastSyncTime).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) %>
                    <%= new Date(lastSyncTime).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }) %>
                </div>
            <% } else { %>
                <div class="text-xl font-bold mt-2 text-yellow-500">—</div>
                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">Never</div>
            <% } %>
        </div>
    </div>

    <!-- Social Overview Card -->
    <% if (socialTotals && socialTotals.posts > 0) { %>
    <a href="/admin/social" class="block bg-gradient-to-r from-pink-500/10 via-purple-500/10 to-blue-500/10 rounded-lg border border-purple-500/30 p-6 mb-6 hover:border-purple-400/50 transition group">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-2">
                <span class="text-2xl">📊</span>
                <h3 class="text-lg font-semibold text-purple-400 group-hover:text-purple-300 transition">Social Overview</h3>
            </div>
            <span class="text-xs text-gray-500">Click for details →</span>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="text-center">
                <div class="text-2xl font-bold text-gray-200"><%= socialTotals.posts %></div>
                <div class="text-xs text-gray-500">Total Posts</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-cyan-400"><%= socialTotals.views.toLocaleString() %></div>
                <div class="text-xs text-gray-500">Total Views</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-pink-400"><%= socialTotals.likes.toLocaleString() %></div>
                <div class="text-xs text-gray-500">Total Likes</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-green-400"><%= socialTotals.comments %></div>
                <div class="text-xs text-gray-500">Comments</div>
            </div>
        </div>
        <% if (Object.keys(socialTotals.platforms).length > 0) { %>
        <div class="flex gap-4 mt-4 pt-4 border-t border-gray-700/50">
            <% for (const [platform, stats] of Object.entries(socialTotals.platforms)) { %>
            <div class="flex items-center gap-2 text-sm">
                <% if (platform === 'tiktok') { %>
                    <span class="text-pink-400">🎵</span>
                <% } else if (platform === 'bluesky') { %>
                    <span class="text-blue-400">🦋</span>
                <% } else if (platform === 'instagram') { %>
                    <span class="text-purple-400">📷</span>
                <% } else if (platform === 'facebook') { %>
                    <span class="text-blue-600">📘</span>
                <% } else if (platform === 'x') { %>
                    <span class="text-gray-400">𝕏</span>
                <% } %>
                <span class="text-gray-400 capitalize"><%= platform %></span>
                <span class="text-gray-500">(<%= stats.views.toLocaleString() %> views)</span>
            </div>
            <% } %>
        </div>
        <% } %>
    </a>
    <% } %>

    <!-- New Features Card -->
    <div class="bg-gradient-to-r from-green-500/10 to-emerald-500/10 rounded-lg border border-green-500/30 p-6 mb-6">
        <div class="flex items-center gap-2 mb-4">
            <span class="text-green-500 text-xl">✨</span>
            <h3 class="text-lg font-semibold text-green-400">New Features</h3>
            <span class="text-xs bg-green-500/20 text-green-400 px-2 py-0.5 rounded-full">Just Added</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <a href="/admin/infrastructure" class="group flex items-start gap-3 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition border border-transparent hover:border-green-500/30">
                <span class="text-2xl">🌐</span>
                <div>
                    <div class="font-medium text-gray-200 group-hover:text-green-400 transition">Infrastructure</div>
                    <div class="text-sm text-gray-400 mt-1">
                        Interactive topology map of all 8 servers with live data from Trinity Core. Zoom, pan, and click any node to drill into specs, services, and game servers.
                    </div>
                </div>
            </a>
            <a href="/admin/social" class="group flex items-start gap-3 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition border border-transparent hover:border-green-500/30">
                <span class="text-2xl">📈</span>
                <div>
                    <div class="font-medium text-gray-200 group-hover:text-green-400 transition">Social Analytics</div>
                    <div class="text-sm text-gray-400 mt-1">
                        Track posts, views, likes, and engagement across all platforms. Per-post analytics with platform breakdowns and trend tracking.
                    </div>
                </div>
            </a>
            <a href="/admin/about" class="group flex items-start gap-3 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition border border-transparent hover:border-green-500/30">
                <span class="text-2xl">ℹ️</span>
                <div>
                    <div class="font-medium text-gray-200 group-hover:text-green-400 transition">About &amp; Deploy</div>
                    <div class="text-sm text-gray-400 mt-1">
                        Console version info, module registry with status badges, and one-click Arbiter deployment — all in one place.
                    </div>
                </div>
            </a>
            <a href="/admin/discord" class="group flex items-start gap-3 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition border border-transparent hover:border-green-500/30">
                <span class="text-2xl">💬</span>
                <div>
                    <div class="font-medium text-gray-200 group-hover:text-green-400 transition">Discord Dashboard</div>
                    <div class="text-sm text-gray-400 mt-1">
                        Full server structure visualization with channel tree, role hierarchy, permission matrix, and health checks.
                    </div>
                </div>
            </a>
        </div>
    </div>

    <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <h3 class="text-lg font-semibold mb-4">🔥❄️ Welcome to Trinity Console</h3>
        <p class="text-gray-600 dark:text-gray-400">
            The command center for Firefrost Gaming. Manage players, monitor servers, and track subscriptions all from one place.
        </p>
        <p class="text-gray-600 dark:text-gray-400 mt-4">
            <strong>Fire + Frost + Foundation = Where Love Builds Legacy</strong>
        </p>
    </div>

    <!-- v2 Teaser -->
    <div class="bg-gradient-to-r from-fire/10 via-universal/10 to-frost/10 rounded-lg border border-universal/30 p-6 mt-6">
        <h3 class="text-lg font-semibold mb-3 bg-gradient-to-r from-fire via-universal to-frost text-transparent bg-clip-text">
            🚀 Coming in v2.0 — Trinity Core
        </h3>
        <p class="text-gray-500 dark:text-gray-400 text-sm mb-4">
            A complete platform rebuild with plugin architecture and AI-powered operations.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div class="flex items-start gap-2">
                <span class="text-universal">🤖</span>
                <div>
                    <div class="font-medium text-gray-700 dark:text-gray-200">Trinity Codex AI</div>
                    <div class="text-gray-500 dark:text-gray-400 text-xs">Ask questions about Firefrost in natural language</div>
                </div>
            </div>
            <div class="flex items-start gap-2">
                <span class="text-universal">🔔</span>
                <div>
                    <div class="font-medium text-gray-700 dark:text-gray-200">Smart Notifications</div>
                    <div class="text-gray-500 dark:text-gray-400 text-xs">Real-time alerts via Discord</div>
                </div>
            </div>
            <div class="flex items-start gap-2">
                <span class="text-universal">🔐</span>
                <div>
                    <div class="font-medium text-gray-700 dark:text-gray-200">Approval Workflows</div>
                    <div class="text-gray-500 dark:text-gray-400 text-xs">Discord button approvals for sensitive actions</div>
                </div>
            </div>
            <div class="flex items-start gap-2">
                <span class="text-universal">🧩</span>
                <div>
                    <div class="font-medium text-gray-700 dark:text-gray-200">Plugin Architecture</div>
                    <div class="text-gray-500 dark:text-gray-400 text-xs">12 self-registering modules: Dashboard, Players, Servers, Infrastructure, Financials, Tasks, Docs, Team, Marketing, Chroniclers, System, Health</div>
                </div>
            </div>
            <div class="flex items-start gap-2">
                <span class="text-universal">👥</span>
                <div>
                    <div class="font-medium text-gray-700 dark:text-gray-200">Granular Permissions</div>
                    <div class="text-gray-500 dark:text-gray-400 text-xs">Role-based access control for staff</div>
                </div>
            </div>
            <div class="flex items-start gap-2">
                <span class="text-universal">🌐</span>
                <div>
                    <div class="font-medium text-gray-700 dark:text-gray-200">Distributed Mesh</div>
                    <div class="text-gray-500 dark:text-gray-400 text-xs">Manage all servers from anywhere</div>
                </div>
            </div>
        </div>
    </div>