Stats Dashboard — frontend implementation

[adityapat24]

Goal

The redesigned stats dashboard is fully built and styled. Real chart library, real layout, driven by the mocked StatsPayload.

Tasks

Stats page

• /admin/stats: server-fetches GET /api/v1/stats, passes the typed payload to StatsDashboard.
• "Last updated" timestamp with a manual refresh button.
  • What this accomplishes: Admins know how stale the data is and can force a refresh during admissions decisions.

StatsDashboard component

• Top row: 4-5 StatCard tiles for the headline numbers (total applicants, submitted, admitted, RSVP'd).
• Grid below: StatusBreakdownChart, DemographicsChart, SubmissionTimeline arranged responsively.
  • What this accomplishes: One screen tells an admin the state of the cohort at a glance, then lets them drill into breakdowns.

StatCard component

• Big number, label below, optional delta indicator (e.g., "+12 from yesterday") with color-coded arrow.
• Hover shows tooltip with metric definition.
  • What this accomplishes: Glanceable headline metrics with enough context to interpret them without needing a wiki.

StatusBreakdownChart component

• Donut chart using recharts, colors for each status, legend with counts and percentages.
  • What this accomplishes: Visual sense of the application funnel — how many are stuck in draft, how many submitted.

DemographicsChart component

• Bar chart with a dropdown to switch dimensions (school, year, major).
  • What this accomplishes: Admins can quickly answer "how many applicants from Northeastern?" or "what's the year breakdown?"

SubmissionTimeline component

• Line chart of daily submissions over the last 30 days.
• Hover reveals exact count per day.
  • What this accomplishes: Shows the time-shape of submissions — early trickle, marketing-push spikes, last-day rush. Useful for next year's planning.

Loading and empty states

• Skeleton cards and chart placeholders while fetching.
• Friendly empty state if a metric has no data ("No submissions yet").
  • What this accomplishes: Page works on day one of registration when most metrics are zero.

Styling

• Cohesive color palette across all charts.
• Desktop friendly

Definition of done

• /admin/stats renders the full dashboard with mock data and looks production-ready.
• All charts respond correctly to changes in the mock payload.
• Refresh button re-fetches and updates the "last updated" timestamp.