New scoreboard

[AyushRajSinghParihar]

Description:

This PR introduces a new, modern V2 Scoreboard feature. It includes a real-time leaderboard and new drill-down views for both teams and individual challenges. All new functionality is implemented under the /v2 path to allow for testing and feedback before it becomes the default.

What's Done:

Backend (balancer service):

• ** New Endpoint: Challenge Details (GET /balancer/api/v2/challenges/{challengeKey})**
  • Created a new API to fetch all teams that have solved a specific challenge.
  • The response is sorted chronologically, making it easy to identify the "First Blood" achievement.
• ** Improved Test Coverage**
  • Based on feedback, the unit tests for the new endpoint have been significantly enhanced. They now cover multiple scenarios, including correct sorting, filtering, and handling challenges with no solves.

Frontend (balancer/ui):

• New V2 Scoreboard Page (/v2)

  • A fully functional, real-time leaderboard that replaces the old placeholder.
  • Fetches data using the backend's long-polling mechanism for live updates.
  • Displays the Top 3 teams in styled "cards" and the rest in a list view, as per the design requirements.
  • The Top 3 cards are now clickable and have appropriate text coloring for better UX.
  • Used framer-motion for smooth layout animations when team ranks change.

• New Team Detail Page (/v2/teams/:team)

  • A dedicated page, accessible by clicking a team on the scoreboard.
  • Displays the team's rank, score, and a detailed list of all challenges they have solved, sorted by most recent.

• New Challenge Detail Page (/v2/challenges/:key)

  • A dedicated page, accessible by clicking a challenge on the team detail view.
  • Displays the challenge's details (name, difficulty, description) and a list of all teams that have solved it.
  • The first team to solve the challenge is highlighted with a "First Blood" (🩸) icon.

Next Steps:

• This PR delivers the core functionality for the V2 scoreboard. Future work will include:
  • Implementing the "Cheat Score" feature (deferred from this PR).
  • Gathering feedback and eventually migrating this to become the default scoreboard.

How to Test Manually:

1. Run the project locally:

   task dev

2. Populate with data:

   • In your browser, navigate to http://localhost:8080/balancer.
   • Create 2-3 different teams.
   • For each team, open their Juice Shop instance and solve a few challenges. Have at least two teams solve the same challenge (e.g., "Score Board") a few moments apart.

3. Test the full user flow:

   • Navigate to the new scoreboard at http://localhost:8080/balancer/v2.
   • Verify: The scoreboard should be populated and update automatically as you solve more challenges. The Top 3 cards + the teams on the list should be clickable.
   • Click on a team name to navigate to the Team Detail page.
   • Verify: The page should show the correct solved challenges for that team.
   • From the Team Detail page, click on a solved challenge name to navigate to the Challenge Detail page.
   • Verify: The page should show all teams that solved that challenge, with the first team correctly marked for "First Blood".

---

[J12934]

Please have all components which use motion to be lazy loaded (like the existing score-board)
Motion stuff bloats up the bundle quit a bit. Would prefer to not have it loaded by default.

const AdminPage = lazy(() => import("./pages/AdminPage"));
const ScoreOverviewPage = lazy(() => import("./pages/ScoreOverview"));
const IndividualScorePage = lazy(() => import("./pages/IndividualScorePage"));

[J12934]

All these "user facing texts" (and the ones on the other pages) need to use the FormattedMessage to be translatable.
We should get this right from the beginnig, adding translation stuff in later usually is pretty painful