Skip to content

Stats Dashboard — frontend implementation #471

@adityapat24

Description

@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.

Metadata

Metadata

Assignees

No fields configured for Feature.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions