Build Admin Dashboard with Real Platform Metrics

[LRxDarkDevil]

Build Admin Dashboard with Real Platform Metrics

Overview

Create a comprehensive admin overview dashboard displaying key platform metrics, health indicators, and actionable insights for platform monitoring.

Scope

• Display total active users count
• Show pending startup applications count (awaiting admin review)
• Show pending volunteer applications count (awaiting review)
• Show pending blog submissions count (awaiting moderation)
• Show event statistics (upcoming, past 30 days, total attendees)
• Show connection requests pending approval
• Add metrics for new users (this week/month)
• Real-time or periodic refresh capability

Acceptance Criteria

• Dashboard fetches all metrics from Firestore using efficient queries
• Numbers update on page refresh (or real-time if feasible)
• Each metric card is clickable and drills down to detail view
• Example: "Pending Startups (5)" → /admin/startups?status=pending
• Loading skeleton displays while fetching data
• Error states handle Firestore query failures gracefully
• Admin-only access verified (403 for non-admins)
• Responsive design works on mobile, tablet, and desktop
• No hardcoded mock data—all data from Firestore

Related Files

• app/admin/page.tsx — main dashboard page
• lib/services/admin.ts — create if needed for admin queries

Design Notes

• Keep dashboard minimal and scannable
• Highlight action items (red: pending approvals, yellow: warnings)
• Show trends or sparklines if helpful (7-day trend for metrics)

Why This Matters

• Gives admins visibility into platform health
• Enables rapid response to pending items
• Foundation for monitoring and alerting