convert to next.js

.dockerignore

@@ -1,44 +1 @@
-# Python
-__pycache__/
-*.py[cod]
-*$py.class
-*.so
-.Python
-env/
-venv/
-ENV/
-env.bak/
-venv.bak/
-
-# IDE
-.vscode/
-.idea/
-*.swp
-*.swo
-*~
-
-# OS
-.DS_Store
-Thumbs.db
-
-# Git
-.git/
-.gitignore
-
-# Documentation
-*.md
-!README.md
-
-# Tests
-tests/
-test_*.py
-*_test.py
-
-# Logs
-*.log
-logs/
-
-# Temporary files
-*.tmp
-*.temp
-.cache/
+.env*

.gitignore

@@ -1,10 +1,41 @@
-# Build local
-docker-compose.yml
-venv-ts-frontend/
-.streamlit/
-# Secrets
-.env
-
-# Other
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
 .DS_Store
-*/__pycache__/
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -1,18 +1,66 @@
-FROM python:3.12-slim
+# syntax=docker.io/docker/dockerfile:1
 
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
-RUN apt-get update && apt-get install -y \
-    gcc \
-    && rm -rf /var/lib/apt/lists/*
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
 
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
 
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-EXPOSE 8501
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
 
-HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
+ENV PORT=3000
 
-ENTRYPOINT ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]

README.md

@@ -1,74 +1,19 @@
 ---
-title: TS Arena
+title: TS-Arena
 emoji: 🚀
 colorFrom: red
 colorTo: red
 sdk: docker
-app_port: 8501
-tags:
-- streamlit
-models:
-- google/timesfm-2.0-500m-pytorch
-- Maple728/TimeMoE-50M
-- Salesforce/moirai-1.1-R-large
-- thuml/sundial-base-128m
-
 pinned: false
+app_port: 3000
 short_description: Time Series Forecasting Arena
 ---
+# TS-Arena Frontend
 
-# TS-Arena Streamlit Dashboard
-
-This is a Streamlit version of the TS-Arena Challenge Dashboard.
-
-## Installation
-
-1. Install dependencies:
-```bash
-pip install -r requirements.txt
-```
-
-2. Set up environment variables:
-```bash
-export X_API_URL="your_api_url_here"
-export X_API_KEY="your_api_key_here"
-```
-
-Or create a `.env` file with:
-```
-X_API_URL=your_api_url_here
-X_API_KEY=your_api_key_here
-```
-
-## Running the App
-
-```bash
-streamlit run app.py
-```
-
-The app will be available at `http://localhost:8501`
-
-## Features
-
-- **Model Ranking**: View and filter model rankings based on performance metrics (Tab 1)
-- **Challenge Visualization**: Select and visualize active and completed challenges (Tab 2)
-- **Time Series Selection**: Choose specific time series to analyze within a challenge
-- **Interactive Plots**: Plotly charts with zoom, pan, and hover features
-- **Upcoming Challenges**: View upcoming challenges in the sidebar
-- **Add Model**: Information on how to participate and register your models (Tab 3)
-
-## Differences from Gradio Version
-
-Streamlit has some differences in behavior compared to Gradio:
+## Concept
 
-1. **State Management**: Streamlit uses session state and reruns the entire script on interaction
-2. **Layout**: Streamlit uses `st.sidebar` for the sidebar and columns for layout
-3. **Interactivity**: Dropdowns and multiselect widgets automatically trigger reruns
-4. **Tabs**: Uses `st.tabs()` instead of Gradio's `gr.Tab()`
+TS-Arena is a platform designed for **pre-registered forecasts into the real future**. This approach ensures rigorous, information leakage-free evaluations by comparing model predictions against data that did not exist at the time of the forecast.
 
-## File Structure
+This repository contains the backend infrastructure that powers the TS-Arena platform. It is designed to be self-hostable, allowing you to run your own instance of the benchmarking environment.
 
-- `app.py` - Main Streamlit application
-- `utils/api_client.py` - API client for fetching challenge data
-- `utils/utils.py` - Utility functions for parsing durations
-- `requirements.txt` - Python dependencies
+For more information visit our [Git repository](https://github.com/DAG-UPB/ts-arena-backend).

app.py

@@ -1,185 +0,0 @@
-from components.challenges_tab_component import render_challenges_tab_component
-from components.filter_component import render_filter_component, set_rankings_session_state
-import streamlit as st
-import pandas as pd
-import sys
-import os
-
-from components.challenge_list_component import render_challenge_list_component
-
-# Add src to path for imports
-sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'src'))
-from utils.api_client import ChallengeStatus, DashboardAPIClient
-
-# Get API URL from environment variable
-api_url = os.getenv('X_API_URL', '')
-if api_url:
-    os.environ['DASHBOARD_API_URL'] = api_url
-    print(f"Loaded API URL from X_API_URL: {api_url}", file=sys.stderr)
-else:
-    print("Warning: X_API_URL environment variable not set, using default", file=sys.stderr)
-
-# Get API key from environment variable
-api_key = os.getenv('X_API_KEY', '')
-if api_key:
-    os.environ['DASHBOARD_API_KEY'] = api_key
-    print(f"Loaded API key from X_API_KEY environment variable", file=sys.stderr)
-else:
-    print("Warning: X_API_KEY environment variable not set", file=sys.stderr)
-
-# Initialize API client
-api_client = DashboardAPIClient()
-
-# Page config
-st.set_page_config(
-    page_title="TS-Arena Challenge Dashboard",
-    page_icon="🏟️",
-    layout="wide",
-    initial_sidebar_state="expanded"
-)
-
-# Custom CSS to make sidebar wider
-st.markdown("""
-    <style>
-    [data-testid="stSidebar"] {
-        min-width: 400px;
-        max-width: 400px;
-    }
-    .challenge-list-container {
-        max-height: 45vh;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding-right: 5px;
-    }
-    .upcoming-list-container {
-        max-height: 45vh;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding-right: 5px;
-    }
-    /* Custom scrollbar styling */
-    .challenge-list-container::-webkit-scrollbar,
-    .upcoming-list-container::-webkit-scrollbar {
-        width: 8px;
-    }
-    .challenge-list-container::-webkit-scrollbar-track,
-    .upcoming-list-container::-webkit-scrollbar-track {
-        background: #f1f1f1;
-        border-radius: 4px;
-    }
-    .challenge-list-container::-webkit-scrollbar-thumb,
-    .upcoming-list-container::-webkit-scrollbar-thumb {
-        background: #888;
-        border-radius: 4px;
-    }
-    .challenge-list-container::-webkit-scrollbar-thumb:hover,
-    .upcoming-list-container::-webkit-scrollbar-thumb:hover {
-        background: #555;
-    }
-    </style>
-""", unsafe_allow_html=True)
-
-
-# Main app
-st.title("🏟️ TS-Arena – The Live-Forecasting Benchmark (Prototype)")
-
-# Sidebar for challenge list
-with st.sidebar:
-    st.header("🗓️ Upcoming")
-    upcoming_challenges = api_client.list_upcoming_challenges()
-    # Show only newest 5 challenges to reduce loading time 
-    show_first = 5
-    challenges_display = upcoming_challenges[:show_first]
-    render_challenge_list_component(challenges=challenges_display, api_client=api_client, challange_list_type="upcoming", show_first=5)
-
-# Create tabs
-tab1, tab2, tab3 = st.tabs(["Model Ranking", "Challenges", "Add Model"])
-
-with tab1:
-    with st.spinner("Loading model ranking..."):
-        render_filter_component(api_client=api_client, filter_type="model_ranking")
-        st.markdown("---")
-        if st.session_state.get('filtered_rankings') is None:
-            set_rankings_session_state(api_client=api_client)
-            st.rerun()
-        # Main content area
-        st.header("🏆 Model Ranking")
-        
-        # Display rankings table from session state if available
-        filtered_rankings = st.session_state.get('filtered_rankings', None)
-        if filtered_rankings:
-            df_rankings = pd.concat([pd.DataFrame(df) for df in filtered_rankings], ignore_index=True)
-            tab_headers = list(df_rankings['time_ranges'].unique())
-            tabs = st.tabs(tab_headers)
-            for unique_timerange, tab in zip(tab_headers, tabs):
-                filtered_by_time = df_rankings[df_rankings['time_ranges'] == unique_timerange].reset_index(drop=True)
-                with tab:
-                    st.dataframe(filtered_by_time, use_container_width=True)
-        else:
-            st.info("No models match the selected filters")
-
-with tab2:
-    render_challenges_tab_component(api_client=api_client)
-
-with tab3:
-    st.header("🚀 Join the TS-Arena Benchmark!")
-    
-    st.markdown("""
-    Ready to test your forecasting models against the best? Participate actively in our benchmark challenges! 
-    Simply send us an email and we'll provide you with an API key to get started.
-    
-    ### How it works:
-    
-    Email us with your organization name and we'll send you an API key. 
-    With this key, you can register your own models and officially participate in active competitions 
-    once your model is registered.
-    """)
-    
-    col1, col2 = st.columns(2)
-    
-    with col1:
-        st.markdown("""
-        <a href="mailto:DataAnalytics@wiwi.uni-paderborn.de?subject=TS-Arena API Key Request&body=Hello,%0D%0A%0D%0AI would like to participate in the TS-Arena benchmark.%0D%0A%0D%0AOrganization: [Please specify your organization]%0D%0A%0D%0ABest regards" 
-           style="display: inline-block; padding: 10px 20px; background-color: #667eea; color: white; text-decoration: none; border-radius: 5px; font-weight: bold;">
-            📧 Request API Key
-        </a>
-        """, unsafe_allow_html=True)
-    
-    with col2:
-        st.markdown("""
-        <a href="mailto:DataAnalytics@wiwi.uni-paderborn.de?subject=TS-Arena Questions&body=Hello,%0D%0A%0D%0AI have questions about participating in the TS-Arena benchmark.%0D%0A%0D%0ABest regards" 
-           style="display: inline-block; padding: 10px 20px; background-color: #764ba2; color: white; text-decoration: none; border-radius: 5px; font-weight: bold;">
-            ❓ Ask Questions
-        </a>
-        """, unsafe_allow_html=True)
-    
-    st.markdown("---")
-    
-    st.markdown("""
-    ### Bring the benchmark to life with your models!
-    
-    - 🔑 **Personal API Key** for model registration and submission
-    - 📊 **Access to benchmark datasets** and challenge specifications
-    - 🏆 **Rankings and leaderboards** showing your model's performance
-    - 📈 **Detailed evaluation metrics** across multiple time series
-    - 🤝 **Community support** from fellow forecasting researchers
-    
-    ### Requirements:
-    
-    - Valid organization or affiliation
-    - Commitment to fair participation
-    - Adherence to benchmark guidelines
-    
-    For more information, please contact us via email!
-
-    ### Help Us Validate Your Model Implementation:
-    Transparency is at the heart of our live benchmarking project. We have integrated a wide range of state-of-the-art time series forecasting models to provide the community with real-time performance insights.
-    To ensure that every model is evaluated under optimal conditions, **we invite the original authors and maintainers to review our implementations.** If you are a developer of one of the featured models, we would value your feedback on:
-    
-    - Model configuration and hyperparameters.
-    - Data preprocessing steps.
-    - Implementation-specific nuances.
-                
-    Our goal is to represent your work as accurately as possible. Please visit our [GitHub Repository](https://github.com/DAG-UPB/ts-arena) to review the code or open an issue for any suggested improvements.
-    """)
-    # TODO: Change link to GitHub Repository

components/challange_card_component.py

@@ -1,196 +0,0 @@
-import sys
-import streamlit as st
-import time
-from datetime import datetime, timezone
-
-from utils.api_client import ChallengeStatus
-from utils.utils import duration_to_max_unit, parse_iso8601_duration, to_local
-
-@st.fragment(run_every="1s")
-def timer_fragment():
-    now = datetime.now(timezone.utc)
-
-    st.markdown(
-        f"""
-        <div style='font-size:1.1em; font-weight:bold; color:#1f2937;'>
-            ⏱️ {now.strftime("%Y-%m-%d %H:%M:%S %Z")}
-        </div>
-        """,
-        unsafe_allow_html=True,
-    )
-
-def render_challenge_card(challenge, api_client):
-    """Render a challenge card in the sidebar."""
-    status = challenge.get('status', 'unknown')
-    desc = challenge.get('description', 'TBA')
-    challenge_id = str(challenge.get('challenge_id', ''))[:8]
-    n_series = challenge.get('n_time_series', 0)
-    model_count = challenge.get('model_count', 0)
-    forecast_horizon_interval = challenge.get('horizon', 'TBA')
-    context_length_interval = challenge.get('context_length', 'TBA')
-    
-    # Try to get frequency from series data for accurate parsing
-    frequency_iso = 'PT1H'  # Default to 1 hour
-    forecast_horizon_from_series = None
-    context_length_from_series = None
-    
-    try:
-        challenge_id_full = challenge.get('challenge_id')
-        series_list = api_client.get_challenge_series(challenge_id_full)
-        if series_list and len(series_list) > 0:
-            frequency_iso = series_list[0].get('frequency', 'PT1H')
-            # Get forecast_horizon and context from series level (more accurate)
-            forecast_horizon_from_series = series_list[0].get('horizon')
-    except Exception as e:
-        print(f"DEBUG: Could not get series data for {challenge_id}: {e}", file=sys.stderr)
-    
-    # Use series-level horizon if available, otherwise fall back to challenge-level
-    horizon_to_parse = forecast_horizon_from_series or forecast_horizon_interval
-    context_to_parse = context_length_from_series or context_length_interval
-    
-    # Parse intervals with frequency - handle both string intervals and numeric values
-    if horizon_to_parse != 'TBA' and horizon_to_parse is not None:
-        if isinstance(horizon_to_parse, (int, float)):
-            forecast_horizon_num = int(horizon_to_parse)
-        elif isinstance(horizon_to_parse, str):
-            try:
-                _, horizon_seconds = parse_iso8601_duration(horizon_to_parse)
-                _, frequency_seconds = parse_iso8601_duration(frequency_iso)
-                if frequency_seconds > 0:
-                    forecast_horizon_num = int(horizon_seconds / frequency_seconds)
-                else:
-                    forecast_horizon_num = 'TBA'
-            except Exception as parse_e:
-                forecast_horizon_num = 'TBA'
-        else:
-            forecast_horizon_num = 'TBA'
-    else:
-        forecast_horizon_num = 'TBA'
-
-    if context_to_parse != 'TBA' and context_to_parse is not None:
-        if isinstance(context_to_parse, (int, float)):
-            context_length_num = int(context_to_parse)
-        elif isinstance(context_to_parse, str):
-            try:
-                _, context_seconds = parse_iso8601_duration(context_to_parse)
-                _, frequency_seconds = parse_iso8601_duration(frequency_iso)
-                if frequency_seconds > 0:
-                    context_length_num = int(context_seconds / frequency_seconds)
-                else:
-                    context_length_num = 'TBA'
-            except Exception as parse_e:
-                context_length_num = 'TBA'
-        else:
-            context_length_num = 'TBA'
-    else:
-        context_length_num = 'TBA'
-    
-    # Parse frequency for display using duration_to_max_unit
-    frequency_display = frequency_iso
-    try:
-        freq_parts, _ = parse_iso8601_duration(frequency_iso)
-        frequency_display = duration_to_max_unit(freq_parts)
-    except Exception as e:
-        print(f"DEBUG: Could not parse frequency for display: {e}", file=sys.stderr)
-    
-    status_color = '#16a34a' if status == ChallengeStatus.ACTIVE.value else '#2563eb'
-    
-    # Get dates
-    reg_start = challenge.get('registration_start', '')
-    final_eval = challenge.get('end_time', '')
-    
-    dates_html = ""
-    if reg_start:
-        reg_start_iso = to_local(reg_start, "UTC").isoformat()
-        dates_html += f"""<div><div id="reg-time-{challenge_id_full}" style="font-size: 0.85em; color: #4b5563;">
-      📅 Registration opens: <span></span>
-    </div>
-
-    <script>
-    if (!document.querySelector("#reg-time-{challenge_id_full} span").textContent) {{
-      const iso{challenge_id_full} = "{reg_start_iso}";
-      const date{challenge_id_full} = new Date(iso{challenge_id_full});
-
-      const formatted{challenge_id_full} = date{challenge_id_full}.toLocaleString(undefined, {{
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit"
-      }});
-
-      document.querySelector("#reg-time-{challenge_id_full} span").textContent = formatted{challenge_id_full};
-    }}
-    </script>"""
-    if final_eval:
-        final_iso = str(to_local(final_eval, "UTC").isoformat())
-        dates_html += f"""<div><div id="final-time-{challenge_id_full}" style="font-size: 0.85em; color: #4b5563;">
-      ⏰ Final Evaluation: <span></span>
-    </div>
-
-    <script>
-    if (!document.querySelector("#final-time-{challenge_id_full} span").textContent) {{
-      const iso{challenge_id_full} = "{final_iso}";
-      const date{challenge_id_full} = new Date(iso{challenge_id_full});
-
-      const formatted{challenge_id_full} = date{challenge_id_full}.toLocaleString(undefined, {{
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit"
-      }});
-
-      document.querySelector("#final-time-{challenge_id_full} span").textContent = formatted{challenge_id_full};
-    }}
-    </script></div></div>"""
-
-    # Countdown Closes in & Starts in
-    time = None
-    match status:
-        # Time has to be in CET for JS countdown.
-        case ChallengeStatus.REGISTRATION.value:
-            time = to_local(challenge.get('registration_end', ''), "CET")
-        case ChallengeStatus.ACTIVE.value:
-            time = to_local(challenge.get('end_time', ''), "CET")
-        case ChallengeStatus.ANNOUNCED.value:
-            time = to_local(challenge.get('registration_start', ''), "CET")
-        case _:
-            pass
-    
-    markdown = f"""
-    <div style='border: 2px solid {status_color}; padding: 15px; margin-bottom: 15px; border-radius: 8px; 
-                background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);'>
-        <div style='display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;'>
-            <div style='font-size: 1.2em; font-weight: bold; color: {status_color};'>{desc}</div>
-            <div style='background: {status_color}; color: white; padding: 4px 12px; border-radius: 12px; 
-                        font-size: 0.85em; font-weight: bold;'>{status.upper()}</div>
-        </div>
-        <div style='color: #6b7280; font-size: 0.9em; margin-bottom: 8px;'>ID: {challenge_id}</div>
-        <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;'>
-            <div style='background: white; padding: 8px; border-radius: 5px; border: 1px solid #e5e7eb;'>
-                <div style='font-size: 0.75em; color: #9ca3af;'>TIME SERIES</div>
-                <div style='font-size: 1.1em; font-weight: bold; color: #1f2937;'>{n_series}</div>
-            </div>
-            <div style='background: white; padding: 8px; border-radius: 5px; border: 1px solid #e5e7eb;'>
-                <div style='font-size: 0.75em; color: #9ca3af;'>MODELS</div>
-                <div style='font-size: 1.1em; font-weight: bold; color: #1f2937;'>{model_count}</div>
-            </div>
-            <div style='background: white; padding: 8px; border-radius: 5px; border: 1px solid #e5e7eb;'>
-                <div style='font-size: 0.75em; color: #9ca3af;'>HORIZON (STEPS x FREQ)</div>
-                <div style='font-size: 1.1em; font-weight: bold; color: #1f2937;'>{forecast_horizon_num} x {frequency_display}</div>
-            </div>
-            <div style='background: white; padding: 8px; border-radius: 5px; border: 1px solid #e5e7eb;'>
-                <div style='font-size: 0.75em; color: #9ca3af;'>CONTEXT LENGTH</div>
-                <div style='font-size: 1.1em; font-weight: bold; color: #1f2937;'>{context_length_num}</div>
-            </div>
-        </div>
-        <div style='margin-top: 10px; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 5px;'>
-            {dates_html}
-        </div>
-        <div class='ts-arena-countdown' data-challenge-time="{time}" data-reg-status="{status}" style='font-size: 0.9em; margin-top: 5px; padding: 5px; background: #f0f4ff; border-radius: 3px;'>{'Loading...'}</div>
-    </div>"""
-    return markdown
-    

components/challenge_list_component.py

@@ -1,86 +0,0 @@
-import streamlit as st
-import streamlit.components.v1 as components
-import sys
-
-from components.challange_card_component import render_challenge_card
-
-
-def get_time_js_script()->str:
-    return """<script>
-        (function(){
-            function updateCountdowns(){
-                var els = document.querySelectorAll('.ts-arena-countdown');
-                if(!els) return "Problem";
-                els.forEach(function(el){
-                    var status = el.getAttribute('data-reg-status');
-                    if (!status) return;
-                    var ds = el.getAttribute('data-challenge-time');
-                    if (!ds) return;
-                    var targetDate = new Date(ds);
-                    if(isNaN(targetDate.getTime())) return;
-                    var now = new Date();
-                    const cetString = now.toLocaleString('en-US', { timeZone: 'Europe/Paris' });
-                    now = new Date(cetString);
-                    var diff = Math.floor((targetDate - now) / 1000);
-                    var display_time = '';
-                    console.log('MADE IT TO DIFF')
-                    if(diff > 0){
-                        var days = Math.floor(diff / (24*3600));
-                        diff = diff % (24*3600);
-                        var hours = Math.floor(diff / 3600);
-                        diff = diff % 3600;
-                        var minutes = Math.floor(diff / 60);
-                        if(days > 0) display_time = days + 'd ' + hours + 'h ' + minutes + 'm';
-                        else if(hours > 0) display_time = hours + 'h ' + minutes + 'm';
-                        else display_time = minutes + 'm';
-                    }
-                    var diplay_text = 'TBD';
-                    if (status == 'registration') {
-                        if (diff <= 0) {
-                            diplay_text = 'Registration closed';
-                        } else {
-                            diplay_text = 'Registration closes in: ' + display_time;
-                        }
-                    }
-                    if (status == 'announced') {
-                        if (diff <= 0) {
-                            diplay_text = 'Registration open now!';
-                        } else {
-                            diplay_text = 'Registration opens in: ' + display_time;
-                        }
-                    }
-                    if (status == 'active') {
-                        if (diff <= 0) {
-                            diplay_text = 'Challenge ended';
-                        } else {
-                            diplay_text = 'Results in: ' + display_time;
-                        }
-                    }
-                    el.innerHTML = '\u23F1 <strong style="color: #667eea;">' + diplay_text + '</strong>';
-                    
-                });
-            }
-            updateCountdowns();
-            setInterval(updateCountdowns, 3000);
-        })();
-        </script>
-    """  
-
-def render_challenge_list_component(challenges, api_client, challange_list_type: str = "ongoing", show_first: int = 5):
-    # Create scrollable container for active challenges
-    challenge_container = st.container(height="stretch")
-    with challenge_container:
-        try:
-            if challenges:
-                cards = []
-                for challenge in challenges:
-                    cards.append(render_challenge_card(challenge, api_client=api_client))
-                components.html("<div class='ts-arena-upcoming-container' style='font-family: Arial, sans-serif;'>"+"".join(cards)+get_time_js_script()+"</div>", height=700, scrolling=True)
-                return 
-        except Exception as e:
-            st.write(e)
-            print(f"Error loading {challange_list_type} challenges: {e}", file=sys.stderr)
-        if challange_list_type == "ongoing":
-            st.write("No active challenges")
-        else:
-            st.write("No upcoming challenges")

components/challenges_tab_component.py

@@ -1,545 +0,0 @@
-from datetime import datetime, timezone
-import sys
-import traceback
-from typing import Any, Dict, List, Optional
-import pandas as pd
-from components.filter_models_component import render_filter_models_component
-import plotly.graph_objects as go
-import plotly.express as px
-import numpy as np
-import streamlit as st
-
-from components.filter_component import render_filter_component, set_challenges_session_state
-from utils.api_client import ChallengeStatus, DashboardAPIClient, hash_func_dashboard_api_client
-from utils.utils import duration_to_max_unit, parse_iso8601_duration
-
-    
-def get_challenge_horizon_steps_from_series(series_list):
-    """
-    Uses the series list to determine the forecast horizon in steps.
-    """
-    frequency_iso = series_list[0].get('frequency', 'PT1H')
-    horizon_iso = series_list[0].get('horizon')
-    return get_challenge_horizon(frequency_iso, horizon_iso)
-    
-
-def get_challenge_horizon_steps_from_challenge(challenge):
-    frequency_iso = challenge.get('frequency', 'PT1H')
-    horizon_iso = challenge.get('horizon')
-    return get_challenge_horizon(frequency_iso, horizon_iso)
-
-
-def get_challenge_horizon(frequency_iso: str, horizon_iso: str) -> int:
-    if horizon_iso and frequency_iso:
-        try:
-            _, horizon_seconds = parse_iso8601_duration(horizon_iso)
-            _, frequency_seconds = parse_iso8601_duration(frequency_iso)
-            if frequency_seconds > 0:
-                steps = int(horizon_seconds / frequency_seconds)
-                return steps
-        except Exception as parse_e:
-            print(f"Error parsing horizon: {parse_e}", file=sys.stderr)
-    return -1
-    
-
-@st.cache_data(hash_funcs={DashboardAPIClient: hash_func_dashboard_api_client}, show_spinner="Loading forecasts...")
-def get_forecasts(api_client: DashboardAPIClient, challenge_id: str, series_id: int) -> Dict[str, Any]:
-    forecasts = api_client.get_series_forecasts(challenge_id, series_id)
-    forecasts = dict(
-        sorted(forecasts.items(), key=lambda item: item[1]["current_mase"])
-    )
-    return forecasts
-
-
-def get_series_choices_for_challenge(challenge_id, api_client: DashboardAPIClient) -> List[Dict[str, Any]]:
-    """Get list of time series for a given challenge."""
-    if not challenge_id:
-        return []
-    
-    try:
-        # Don't try to get series for mock challenges
-        if str(challenge_id).startswith('mock'):
-            return []
-        
-        # Get series list from API
-        series_list = api_client.get_challenge_series(challenge_id)
-        if not series_list:
-            return []
-        
-        # Format series choices with ID and name
-        choices = []
-        for series_info in series_list:
-            series_id = series_info.get('series_id')
-            series_name = series_info.get('name', f'Series {series_id}')
-            series_description = series_info.get('description', series_id)
-            choices.append({
-                'id': series_id,
-                'name': series_name,
-                'description': series_description,
-                'display': f"{series_description} (ID: {series_id})"
-            })
-        
-        return choices
-    except Exception as e:
-        print(f"Error getting series choices: {e}", file=sys.stderr)
-        return []
-    
-
-@st.cache_data(show_spinner="Drawing plots...")
-def make_demo_forecast_plot(forecast_horizon, challenge_desc="Demo Challenge"):
-    """Generate demo forecast plot with synthetic data."""
-    np.random.seed(42)
-    
-    historical_len = 50
-    forecast_len = int(forecast_horizon)
-    time = np.arange(historical_len + forecast_len)
-    
-    historical_data = 100 + 10 * np.sin(np.linspace(0, 4 * np.pi, historical_len)) + np.random.normal(0, 2, historical_len)
-    
-    fig = go.Figure()
-    
-    # Add historical data
-    fig.add_trace(go.Scatter(
-        x=time[:historical_len],
-        y=historical_data,
-        mode='lines',
-        name='Historical Data',
-        line=dict(color='black', width=3),
-        legendgroup='historical',
-    ))
-    
-    model_names = [
-        "ARIMA", "Prophet", "LSTM", "XGBoost", 
-        "Random Forest", "ETS", "Theta", "TBATS",
-        "Neural Prophet", "Ensemble"
-    ]
-    
-    colors = px.colors.qualitative.Plotly + px.colors.qualitative.Set2
-    
-    for i, model_name in enumerate(model_names):
-        base_forecast = 100 + 10 * np.sin(np.linspace(4 * np.pi, 4 * np.pi + 2 * np.pi, forecast_len))
-        noise = np.random.normal(0, 1 + i * 0.3, forecast_len)
-        trend = np.linspace(0, i * 0.5, forecast_len)
-        forecast = base_forecast + noise + trend
-        
-        forecast_x = np.concatenate([[time[historical_len - 1]], time[historical_len:]])
-        forecast_y = np.concatenate([[historical_data[-1]], forecast])
-        
-        fig.add_trace(go.Scatter(
-            x=forecast_x,
-            y=forecast_y,
-            mode='lines',
-            name=model_name,
-            line=dict(color=colors[i % len(colors)], width=2, dash='solid'),
-            legendgroup=f'model_{i}',
-            hovertemplate=f'<b>{model_name}</b><br>Time: %{{x}}<br>Value: %{{y:.2f}}<extra></extra>'
-        ))
-        
-        upper_bound = forecast + (3 + i * 0.5)
-        lower_bound = forecast - (3 + i * 0.5)
-        
-        fig.add_trace(go.Scatter(
-            x=np.concatenate([time[historical_len:], time[historical_len:][::-1]]),
-            y=np.concatenate([upper_bound, lower_bound[::-1]]),
-            fill='toself',
-            fillcolor=colors[i % len(colors)],
-            opacity=0.15,
-            line=dict(width=0),
-            name=f'{model_name} CI',
-            legendgroup=f'model_{i}',
-            showlegend=False,
-            hoverinfo='skip'
-        ))
-    
-    fig.add_vline(
-        x=historical_len - 0.5,
-        line_dash="dash",
-        line_color="gray",
-        opacity=0.7,
-        annotation_text="Forecast Start",
-        annotation_position="top"
-    )
-    
-    fig.update_layout(
-        title={
-            'text': f'📈 {challenge_desc} - Forecast Comparison ({forecast_len} steps ahead)',
-            'x': 0.5,
-            'xanchor': 'center',
-            'font': {'size': 20, 'color': '#2c3e50'}
-        },
-        xaxis_title='Time',
-        yaxis_title='Value',
-        hovermode='x unified',
-        template='plotly_white',
-        height=600,
-        font=dict(family="Arial, sans-serif", size=12),
-        plot_bgcolor='rgba(245, 245, 245, 0.5)',
-    )
-    
-    fig.update_xaxes(
-        showgrid=True,
-        gridwidth=1,
-        gridcolor='lightgray',
-        showline=True,
-        linewidth=2,
-        linecolor='gray'
-    )
-    
-    fig.update_yaxes(
-        showgrid=True,
-        gridwidth=1,
-        gridcolor='lightgray',
-        showline=True,
-        linewidth=2,
-        linecolor='gray'
-    )
-    
-    return fig
-
-
-@st.cache_data(hash_funcs={DashboardAPIClient: hash_func_dashboard_api_client}, show_spinner="Drawing plots...")
-def plot_real_challenge_data(challenge: Dict[str, Any], forecast_horizon: int, api_client: DashboardAPIClient, selected_series_ids: List[int] = None, selected_readable_model_ids: List[str] = None) -> Optional[go.Figure]:
-    """Plot real challenge data from API with selected series and forecasts."""
-    try:
-        challenge_id = challenge.get('challenge_id')
-        challenge_desc = challenge.get('description', 'Challenge')
-        
-        # Get all series for this challenge
-        series_list = api_client.get_challenge_series(challenge_id)
-        if not series_list:
-            return None
-        
-        # Filter series based on selection
-        if selected_series_ids:
-            series_list = [s for s in series_list if s.get('series_id') in selected_series_ids]
-        
-        if not series_list:
-            fig = go.Figure()
-            fig.add_annotation(
-                text="No series selected or found",
-                xref="paper", yref="paper",
-                x=0.5, y=0.5, showarrow=False,
-                font=dict(size=16, color="gray")
-            )
-            return fig
-        
-        # Create figure
-        fig = go.Figure()
-        
-        # Color palette for models
-        colors = px.colors.qualitative.Plotly + px.colors.qualitative.Set2 + px.colors.qualitative.Set3
-        model_color_map = {}
-        color_idx = 0
-        
-        inferred_frequency = None
-        steps_to_show = forecast_horizon
-        
-        # Process each series
-        for series_idx, series_info in enumerate(series_list):
-            series_id = series_info.get('series_id')
-            series_name = series_info.get('name', f'Series {series_id}')
-            
-            # Get context data (historical)
-            context_df = api_client.get_challenge_data_for_series(
-                challenge_id, series_id,
-                series_info.get('context_start_time'),
-                series_info.get('context_end_time')
-            )
-            
-            # Get actual data (test/live data)
-            actual_df = api_client.get_challenge_data_for_series(
-                challenge_id, series_id,
-                series_info.get('context_end_time'),
-                series_info.get('end_time')
-            )
-            
-            # Infer frequency
-            if inferred_frequency is None and not context_df.empty and len(context_df) >= 2:
-                try:
-                    frequency_iso = series_info.get('frequency', 'PT1H')
-                    horizon_iso = series_info.get('horizon') or challenge.get('horizon')
-                    
-                    if horizon_iso and frequency_iso:
-                        _, horizon_seconds = parse_iso8601_duration(horizon_iso)
-                        _, frequency_seconds = parse_iso8601_duration(frequency_iso)
-                        
-                        if frequency_seconds > 0:
-                            steps_to_show = int(horizon_seconds / frequency_seconds)
-                            freq_parts, _ = parse_iso8601_duration(frequency_iso)
-                            inferred_frequency = duration_to_max_unit(freq_parts)
-                except Exception as e:
-                    print(f"Error calculating steps: {e}", file=sys.stderr)
-            
-            # Add context data (historical)
-            if not context_df.empty:
-                hist_name = "Historical Data" if len(series_list) == 1 else f"Historical - {series_name}"
-                fig.add_trace(go.Scatter(
-                    x=context_df["ts"],
-                    y=context_df["value"],
-                    name=hist_name,
-                    mode="lines",
-                    line=dict(color="black", width=3),
-                    legendgroup=f"series_{series_id}",
-                    hovertemplate=f"<b>{hist_name}</b><br>Time: %{{x}}<br>Value: %{{y}}<extra></extra>",
-                ))
-            
-            # Get forecasts for this series
-            forecasts = get_forecasts(api_client, challenge_id, series_id) 
-            
-            # Add forecasts
-            for model_readable_id, data in forecasts.items():
-                df = data["data"]
-                model_label = data.get("label", model_readable_id)
-                if df.empty:
-                    continue
-
-                if not model_readable_id in selected_readable_model_ids:
-                    continue
-                
-                if model_label not in model_color_map:
-                    model_color_map[model_label] = colors[color_idx % len(colors)]
-                    color_idx += 1
-                
-                color = model_color_map[model_label]
-                prelim_mase = data.get('current_mase')
-                if prelim_mase is None:
-                    prelim_mase = "N/A"
-                else:
-                    prelim_mase = f"{prelim_mase:.2f}"
-                display_name = f"{model_label} - Prelim MASE: {prelim_mase}"
-                if len(series_list) > 1:
-                    display_name += f" ({series_name})"
-                
-                # Connect forecast to last historical point
-                if not context_df.empty and not df.empty:
-                    last_hist_ts = context_df["ts"].iloc[-1]
-                    last_hist_val = context_df["value"].iloc[-1]
-                    forecast_x = pd.concat([pd.Series([last_hist_ts]), df["ts"]]).reset_index(drop=True)
-                    forecast_y = pd.concat([pd.Series([last_hist_val]), df["y"]]).reset_index(drop=True)
-                else:
-                    forecast_x = df["ts"]
-                    forecast_y = df["y"]
-                
-                fig.add_trace(go.Scatter(
-                    x=forecast_x,
-                    y=forecast_y,
-                    name=display_name,
-                    mode="lines+markers",
-                    line=dict(color=color, width=2),
-                    marker=dict(size=4),
-                    legendgroup=model_label,
-                    hovertemplate=f"<b>{display_name}</b><br>Time: %{{x}}<br>Value: %{{y:.2f}}<extra></extra>",
-                ))
-            
-            # Add actual data for first series only
-            if series_idx == 0 and not actual_df.empty:
-                actual_df_limited = actual_df.head(steps_to_show)
-                if not actual_df_limited.empty:
-                    fig.add_trace(go.Scatter(
-                        x=actual_df_limited["ts"],
-                        y=actual_df_limited["value"],
-                        name=f"Actual - {series_name}",
-                        mode="lines",
-                        line=dict(color="grey", width=3, dash="dot"),
-                        marker=dict(size=6, symbol="diamond"),
-                        legendgroup=f"series_{series_id}",
-                        hovertemplate=f"<b>Actual - {series_name}</b><br>Time: %{{x}}<br>Value: %{{y}}<extra></extra>",
-                    ))
-        
-        # Update layout
-        fig.update_layout(
-            xaxis_title='Time',
-            yaxis_title='Value',
-            hovermode='x unified',
-            template='plotly_white',
-            height=600,
-            font=dict(family="Arial, sans-serif", size=12),
-            plot_bgcolor='rgba(245, 245, 245, 0.5)',
-        )
-        
-        fig.update_xaxes(
-            showgrid=True,
-            gridwidth=1,
-            gridcolor='lightgray',
-            showline=True,
-            linewidth=2,
-            linecolor='gray'
-        )
-        
-        fig.update_yaxes(
-            showgrid=True,
-            gridwidth=1,
-            gridcolor='lightgray',
-            showline=True,
-            linewidth=2,
-            linecolor='gray'
-        )
-        
-        return fig
-        
-    except Exception as e:
-        print(f"Error plotting real challenge data: {e}", file=sys.stderr)
-        traceback.print_exc()
-        return None    
-    
-
-def render_challenges_tab_component(api_client: DashboardAPIClient):
-    render_filter_component(api_client=api_client, filter_type="active_challenges")
-    st.markdown("---")
-        
-    # Main content area
-    st.header("🎯 Visualize a Challenge")
-    
-    # Challenge selection
-    if st.session_state.get('filtered_challenges') is None:
-        with st.spinner("Loading active challenges..."):
-            now = datetime.now(timezone.utc).strftime("%Y-%m-%dT") 
-            set_challenges_session_state(
-                api_client=api_client,
-                selected_from_date=now+ "00:00:00.000Z",
-                selected_to_date=now + "23:59:59.999Z",
-                selected_statuses=[ChallengeStatus.ACTIVE.value],
-            )
-            st.rerun()
-    active_completed_challenges = st.session_state['filtered_challenges']
-    challenge_options = {f"{c.get('status')} • {c.get('description')}, Start Date: {datetime.strptime(c.get('start_time'), '%Y-%m-%dT%H:%M:%S.%fZ').strftime('%Y-%m-%d %H:%M:%S') if c.get('start_time') else 'N/A'} ({str(c.get('challenge_id', ''))[:8]})": c 
-                        for c in active_completed_challenges}
-    
-    if challenge_options:
-        selected_challenge_key = st.selectbox(
-            "Challenge Selection",
-            options=list(challenge_options.keys()),
-            key="challenge_select"
-        )
-        
-        selected_challenge = challenge_options[selected_challenge_key]
-        challenge_id = str(selected_challenge.get('challenge_id', ''))
-        challenge_id_short = challenge_id[:8] if challenge_id != '' else ''
-        challenge_name = selected_challenge.get('description', 'Challenge')
-        
-        # Series selection
-        series_options = get_series_choices_for_challenge(challenge_id, api_client)
-        
-        # Display challenge heading
-        st.subheader(f"📊 {challenge_name}")
-        
-        # Get detailed challenge info
-        status = selected_challenge.get('status', 'unknown')
-        n_series = selected_challenge.get('n_time_series', 0)
-        model_count = selected_challenge.get('model_count', 0)
-
-        if status == ChallengeStatus.ANNOUNCED.value:
-            if n_series == 0:
-                n_series = "tbd"
-            if model_count == 0:
-                model_count = "tbd"
-
-        challenge_id = str(selected_challenge.get('challenge_id', ''))[:8]
-        
-        # Get frequency and calculate horizon/context in steps
-        frequency_iso = 'PT1H'  # Default
-        context_length_num = 'N/A'
-        frequency_display = 'N/A'
-        
-        try:
-            challenge_id_full = selected_challenge.get('challenge_id')
-            series_list = api_client.get_challenge_series(challenge_id_full)
-            forecast_horizon_steps_num = get_challenge_horizon_steps_from_series(series_list)
-            if forecast_horizon_steps_num == -1:
-                forecast_horizon_steps_num = get_challenge_horizon_steps_from_challenge(selected_challenge)
-            if series_list and len(series_list) > 0:
-                frequency_iso = series_list[0].get('frequency', 'PT1H')
-                context_iso = series_list[0].get('context_length') or selected_challenge.get('context_length')
-                
-                # Parse frequency for display
-                try:
-                    freq_parts, _ = parse_iso8601_duration(frequency_iso)
-                    frequency_display = duration_to_max_unit(freq_parts)
-                except:
-                    frequency_display = frequency_iso
-                
-                context_length_num = context_iso
-        except Exception as e:
-            print(f"Error getting series data for challenge info: {e}", file=sys.stderr)
-        
-        # Status color
-        status_color = '#16a34a' if status == ChallengeStatus.ACTIVE.value else '#2563eb'
-        
-        # Compact single-line info display matching Gradio version
-        st.markdown(f"""
-        <div style='display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;'>
-            <div style='background: {status_color}; color: white; padding: 3px 10px; border-radius: 4px; font-size: 0.8em; font-weight: 600;'>{status.upper()}</div>
-            <div style='color: #6b7280; font-size: 0.9em;'>ID: <strong>{challenge_id}</strong></div>
-            <div style='height: 20px; width: 1px; background: #d1d5db;'></div>
-            <div style='color: #6b7280; font-size: 0.9em;'>Series: <strong style='color: #1f2937;'>{n_series}</strong></div>
-            <div style='color: #6b7280; font-size: 0.9em;'>Models: <strong style='color: #1f2937;'>{model_count}</strong></div>
-            <div style='color: #6b7280; font-size: 0.9em;'>Horizon: <strong style='color: #1f2937;'>{forecast_horizon_steps_num if forecast_horizon_steps_num != -1 else 'N/A'  } Steps</strong></div>
-            <div style='color: #6b7280; font-size: 0.9em;'>Context: <strong style='color: #1f2937;'>{context_length_num}</strong></div>
-            <div style='color: #6b7280; font-size: 0.9em;'>Frequency: <strong style='color: #1f2937;'>{frequency_display}</strong></div>
-        </div>
-        """, unsafe_allow_html=True)
-  
-        models = api_client.list_models_for_challenge(challenge_id)
-        selected_series_ids, selected_readable_model_ids = render_filter_models_component(series_options, models)
-        
-        # Individual plots for each series (default)
-        with st.spinner("Loading individual series plots..."):
-            try:
-                challenge_id_full = selected_challenge.get('challenge_id')
-                
-                if not str(challenge_id_full).startswith('mock'):
-                    # Get series list
-                    series_list = api_client.get_challenge_series(challenge_id_full)
-                    
-                    if series_list and selected_series_ids:
-                        # Filter to selected series
-                        filtered_series = [s for s in series_list if s.get('series_id') in selected_series_ids]
-                        
-                        if filtered_series:
-                            # Create scrollable container for individual plots
-                            individual_plots_container = st.container(height=800)
-                            with individual_plots_container:
-                                for series_info in filtered_series:
-                                    series_id = series_info.get('series_id')
-                                    series_name = series_info.get('name', f'Series {series_id}')
-                                    series_desc = series_info.get('description', '')
-                                    if series_desc:
-                                        expander_title = f"📈 {series_desc} (ID: {series_id})"
-                                    else:
-                                        expander_title = f"📈 {series_name} (ID: {series_id})"
-                                    with st.expander(expander_title, expanded=True):
-                                        # Plot this individual series
-                                        fig = plot_real_challenge_data(
-                                            challenge=selected_challenge,
-                                            forecast_horizon=forecast_horizon_steps_num,
-                                            api_client=api_client,
-                                            selected_series_ids=[series_id],
-                                            selected_readable_model_ids=selected_readable_model_ids,
-                                        )
-                                        if fig:
-                                            st.plotly_chart(fig, width="stretch")
-                                        else:
-                                            st.warning(f"Could not load data for {series_name}")
-                        else:
-                            st.info("No series selected")
-                    else:
-                        st.info("No series available or none selected")
-                else:
-                    st.info("Individual series plots not available for demo data")
-                    fig = make_demo_forecast_plot(forecast_horizon_steps_num, challenge_name)
-                    st.plotly_chart(fig, width="stretch")
-                    
-            except Exception as e:
-                st.error(f"Error loading individual plots: {str(e)}")
-                traceback.print_exc()
-        # Interactive features info
-        st.markdown("""
-        **Interactive Features:**
-        - 🖱️ **Click legend items** to show/hide individual models
-        - 🔍 **Zoom** by dragging a box on the chart
-        - 👆 **Pan** by clicking and dragging
-        - 🔄 **Reset** by double-clicking the chart
-        - 📊 **Hover** to see exact values
-        """)
-    else:
-        st.info("No challenges available")

components/filter_component.py

@@ -1,170 +0,0 @@
-from typing import List, Optional
-import streamlit as st
-import pandas as pd
-import sys
-
-from utils.api_client import ChallengeStatus, DashboardAPIClient
-
-# Cached function to set rankings in session state
-def set_rankings_session_state(
-    api_client: DashboardAPIClient,
-    selected_domains: Optional[List[str]] = None,
-    selected_categories: Optional[List[str]] = None,
-    selected_frequencies: Optional[List[str]] = None,
-    selected_horizons: Optional[List[str]] = None
-):
-    if 'filtered_rankings' not in st.session_state:
-        st.session_state['filtered_rankings'] = None
-
-    filter_options = api_client.get_filter_options()
-    filtered_rankings = []
-    for time_range in filter_options.get("time_ranges", ['All']):
-        loop_dict = api_client.get_filtered_rankings(
-            domains=selected_domains if selected_domains else None,
-            categories=selected_categories if selected_categories else None,
-            frequencies=selected_frequencies if selected_frequencies else None,
-            horizons=selected_horizons if selected_horizons else None,
-            time_range=time_range
-        )
-        loop_dict = [{**item, "time_ranges": time_range} for item in loop_dict]
-        filtered_rankings.append(loop_dict)
-    st.session_state['filtered_rankings'] = filtered_rankings
-
-
-def set_challenges_session_state(
-    api_client: DashboardAPIClient,
-    selected_domains: Optional[List[str]] = None,
-    selected_categories: Optional[List[str]] = None,
-    selected_frequencies: Optional[List[str]] = None,
-    selected_horizons: Optional[List[str]] = None,
-    selected_from_date: Optional[str] = None,
-    selected_to_date: Optional[str] = None,
-    selected_statuses: Optional[List[str]] = None
-):
-    filtered_rankings = api_client.get_filtered_challenges(
-        domain=selected_domains if selected_domains else None,
-        category=selected_categories if selected_categories else None,
-        frequency=selected_frequencies if selected_frequencies else None,
-        horizon=selected_horizons if selected_horizons else None,
-        from_date=selected_from_date if selected_from_date else None,
-        to_date=selected_to_date if selected_to_date else None,
-        status=selected_statuses if selected_statuses else None
-    )
-    if filtered_rankings:
-        st.session_state["filtered_challenges"] = filtered_rankings
-    else:
-        st.session_state["filtered_challenges"] = []
-        st.info("No challenges match the selected filters")
-
-def render_filter_component(api_client: DashboardAPIClient, filter_type: str = "model_ranking"):
-    """
-    Render the filter component in the Streamlit app.
-
-    Args:
-        api_client: Instance of DashboardAPIClient to fetch filter options and rankings.
-    """
-
-    # Add filter section right after the header
-    if filter_type == "model_ranking":
-        st.markdown("### 🔍 Filter Model Rankings")
-    elif filter_type == "active_challenges":
-        st.markdown("### 🔍 Filter Active Challenges")
-
-    # Get filter options from API
-    filter_options = api_client.get_filter_options()
-
-    # Create columns for filters
-    col1, col2, col3 = st.columns(3)
-    col5, col6, col7, col8 = st.columns(4)
-
-    with col1:
-        selected_domains = st.multiselect(
-            "Domain",
-            options=filter_options.get("domains", []),
-            help="Filter by domain",
-            key=f"domain_filter_{filter_type}"
-        )
-
-    with col2:
-        selected_categories = st.multiselect(
-            "Category",
-            options=filter_options.get("categories", []),
-            help="Filter by category",
-            key=f"category_filter_{filter_type}"
-        )
-
-    with col3:
-        selected_frequencies = st.multiselect(
-            "Frequency",
-            options=filter_options.get("frequencies", []),
-            help="Filter by time series frequency",
-            key=f"frequency_filter_{filter_type}"
-        )
-
-    with col5:
-        selected_horizons = st.multiselect(
-            "Horizon",
-            options=filter_options.get("horizons", []),
-            help="Filter by forecast horizon",
-            key=f"horizon_filter_{filter_type}"
-        )
-
-    # Active Challenges specific filters
-    selected_statuses = None
-    selected_from_date = None
-    selected_to_date = None
-    if filter_type == "active_challenges":
-        with col6:
-            selected_from_date = st.date_input(
-                "End Date From",
-                value="today",
-                help="Filter by Date",
-                key=f"from_date_filter_{filter_type}"
-            )
-            selected_from_date = selected_from_date.strftime(
-                "%Y-%m-%dT00:00:00.000Z")
-        with col7:
-            selected_to_date = st.date_input(
-                "End Date To",
-                value='today',
-                help="Filter by Date",
-                key=f"to_date_filter_{filter_type}"
-            )
-            selected_to_date = selected_to_date.strftime(
-                "%Y-%m-%dT23:59:59.999Z")
-        with col8:
-            selected_statuses = st.multiselect(
-                "Status",
-                options=[ChallengeStatus.ACTIVE.value,
-                         ChallengeStatus.COMPLETED.value],
-                default=[ChallengeStatus.ACTIVE.value],
-                help="Filter by challenge status",
-                key=f"status_filter_{filter_type}"
-            )
-        # TODO: Filter for registration start and end date
-
-    # Apply filters button
-    if st.button("🔍 Apply Filters", type="primary", key=f"apply_filters_button_{filter_type}"):
-        try:
-            if filter_type == "model_ranking":
-                set_rankings_session_state(
-                    api_client,
-                    selected_domains=selected_domains,
-                    selected_categories=selected_categories,
-                    selected_frequencies=selected_frequencies,
-                    selected_horizons=selected_horizons
-                )
-
-            elif filter_type == "active_challenges":
-                set_challenges_session_state(
-                    api_client,
-                    selected_domains=selected_domains,
-                    selected_categories=selected_categories,
-                    selected_frequencies=selected_frequencies,
-                    selected_horizons=selected_horizons,
-                    selected_from_date=selected_from_date,
-                    selected_to_date=selected_to_date,
-                    selected_statuses=selected_statuses
-                )
-        except Exception as e:
-            st.error(f"Error applying filters: {str(e)}")

components/filter_models_component.py

@@ -1,76 +0,0 @@
-import streamlit as st
-
-def render_filter_models_component(series_options: list[dict], models: list[dict]):
-    # Select series:
-    if series_options:
-        # Default to first two series only
-        default_selection = [s['description'] for s in series_options[:2]]
-        
-        selected_series = st.multiselect(
-            "Time Series Selection",
-            options=[s['description'] for s in series_options],
-            default=default_selection,
-            help="Select which time series to display in the plot",
-            key="series_select"
-        )
-        
-        # Extract series IDs from selection
-        selected_series_ids = [
-            s['id'] for s in series_options 
-            if s['description'] in selected_series
-        ]
-    else:
-        selected_series_ids = None
-    
-    # Select models:
-    if models:
-        selected_readable_model_ids = [model["readable_id"] for model in models]
-        max_value = [model["model_size"] for model in models if model["model_size"] is not None]
-        max_value = max(max_value) if max_value else 0
-        # Filter size
-        selected_size = st.number_input(
-            "Model Max Size",
-            min_value=0,
-            value=max_value,
-            step=1,
-            help="Filter models by size (in million)",
-            key="model_size_filter"
-        )
-        # Nones are always displayed 
-        deselected_sizes_ids = [model["readable_id"] for model in models if model["model_size"] is not None and model["model_size"] > selected_size]
-
-        # Filter name
-        selected_names = st.text_input(
-            "Model Name Contains",
-            value="",
-            help="Filter models by name containing this text. Multiple names can be separated by commas.",
-            key="model_name_filter"
-        )
-        if selected_names.strip(",").strip() == "":
-            deselected_name_ids = []
-        else:
-            deselected_name_ids = selected_readable_model_ids.copy()
-        for multiple in selected_names.split(","):
-            multiple = multiple.strip()
-            if multiple:
-                deselected_name_ids = list(set([model["readable_id"] for model in models if multiple.lower() not in model["name"].lower() and multiple.lower() != model["readable_id"].lower()]) & set(deselected_name_ids))
-
-        # Filter by architecture
-        available_architectures = list(set(model["architecture"] for model in models if model["architecture"] is not None))
-        select_architecture = st.multiselect(
-            "Model Architecture",
-            options=available_architectures,
-            default=available_architectures,
-            help="Filter by model architecture",
-            key="model_architecture_filter"
-        )
-        deselected_architecture_ids = [
-            model["readable_id"] for model in models 
-            if model["architecture"] not in select_architecture
-        ]
-
-        # Combine filters
-        selected_readable_model_ids = list(set(selected_readable_model_ids) - set(deselected_sizes_ids) - set(deselected_name_ids) - set(deselected_architecture_ids))
-    else:
-        selected_readable_model_ids = None
-    return selected_series_ids, selected_readable_model_ids

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+// next.config.js
+module.exports = {
+  // ... rest of the configuration.
+  output: "standalone",
+};

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "ts-arena",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.9",
+    "@tanstack/react-table": "^8.21.3",
+    "humanize-duration": "^3.33.2",
+    "iso8601-duration": "^2.1.3",
+    "lucide-react": "^0.563.0",
+    "next": "16.1.1",
+    "plotly.js": "^3.3.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-plotly.js": "^2.6.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/humanize-duration": "^3.27.4",
+    "@types/node": "^20",
+    "@types/plotly.js": "^3.0.9",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/react-plotly.js": "^2.6.4",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

requirements.txt

@@ -1,7 +0,0 @@
-streamlit>=1.28.0
-plotly>=5.17.0
-numpy>=1.24.0
-pandas>=2.0.0
-requests>=2.31.0
-isodate>=0.6.1
-python-dotenv>=1.0.0

src/app/add-model/page.tsx

@@ -0,0 +1,221 @@
+import Breadcrumbs from '@/src/components/Breadcrumbs';
+import { Mail, Key, TrendingUp, Trophy, BarChart3, Users, CheckCircle, Github } from 'lucide-react';
+
+export default function InfoPage() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <Breadcrumbs items={[{ label: 'Add Model', href: '/add-model' }]} />
+      
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-gray-900">Join the TS-Arena Benchmark</h1>
+        <p className="mt-2 text-gray-600">
+          Test your forecasting models against the best in real-time benchmark challenges
+        </p>
+      </div>
+
+      {/* Main CTA Section */}
+      <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-200 p-6 mb-8">
+        <h2 className="text-xl font-semibold text-gray-900 mb-3">Get Started</h2>
+        <p className="text-gray-700 mb-4">
+          Ready to test your forecasting models against the best? Participate actively in our benchmark challenges! 
+          Simply send us an email and we&apos;ll provide you with an API key to get started. Find detailed participation instructions in our{' '}
+          <a 
+            href="https://github.com/DAG-UPB/ts-arena-backend" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="text-blue-700 hover:text-blue-900 font-semibold underline"
+          >
+            Git repository
+          </a>.
+        </p>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <a 
+                  href="mailto:DataAnalytics@wiwi.uni-paderborn.de?subject=TS-Arena API Key Request&body=Hello,%0D%0A%0D%0AI would like to participate in the TS-Arena benchmark.%0D%0A%0D%0AOrganization: [Please specify your organization]%0D%0A%0D%0ABest regards"
+                  className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors shadow-sm"
+                >
+                  <Mail className="w-5 h-5" />
+                  Request API Key
+                </a>
+                <a 
+                  href="mailto:DataAnalytics@wiwi.uni-paderborn.de?subject=TS-Arena Questions&body=Hello,%0D%0A%0D%0AI have questions about participating in the TS-Arena benchmark.%0D%0A%0D%0ABest regards"
+                  className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-white hover:bg-gray-50 text-gray-900 font-semibold rounded-lg border border-gray-300 transition-colors shadow-sm"
+                >
+                  <Mail className="w-5 h-5" />
+                  Ask Questions
+                </a>
+              </div>
+      </div>
+
+      {/* How it Works */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
+        <h2 className="text-xl font-semibold text-gray-900 mb-4">How it Works</h2>
+        <div className="space-y-4 text-gray-700">
+          <div className="flex gap-4">
+            <div className="flex-shrink-0 w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center font-semibold">
+              1
+            </div>
+            <div>
+              <h3 className="font-medium text-gray-900 mb-1">Request an API Key</h3>
+              <p className="text-sm text-gray-600">
+                Email us with your organization name and we&apos;ll send you an API key.
+              </p>
+            </div>
+          </div>
+          
+          <div className="flex gap-4">
+            <div className="flex-shrink-0 w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center font-semibold">
+              2
+            </div>
+            <div>
+              <h3 className="font-medium text-gray-900 mb-1">Register Your Model</h3>
+              <p className="text-sm text-gray-600">
+                Use your API key to register models for challenges in the registration phase.
+              </p>
+            </div>
+          </div>
+          
+          <div className="flex gap-4">
+            <div className="flex-shrink-0 w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center font-semibold">
+              3
+            </div>
+            <div>
+              <h3 className="font-medium text-gray-900 mb-1">Submit Forecasts</h3>
+              <p className="text-sm text-gray-600">
+                Obtain time-series context via our API and submit your forecasts before registration closes.
+              </p>
+            </div>
+          </div>
+          
+          <div className="flex gap-4">
+            <div className="flex-shrink-0 w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center font-semibold">
+              4
+            </div>
+            <div>
+              <h3 className="font-medium text-gray-900 mb-1">Track Performance</h3>
+              <p className="text-sm text-gray-600">
+                During the active phase, your model is evaluated on live data. Monitor performance on leaderboards and explore forecasts through interactive plots.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Benefits Grid */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
+        <h2 className="text-xl font-semibold text-gray-900 mb-4">What You Get</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="flex gap-3">
+            <Key className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
+            <div>
+              <h3 className="font-medium text-gray-900">Personal API Key</h3>
+              <p className="text-sm text-gray-600">For model registration and submission</p>
+            </div>
+          </div>
+          
+          <div className="flex gap-3">
+            <BarChart3 className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
+            <div>
+              <h3 className="font-medium text-gray-900">Benchmark Datasets</h3>
+              <p className="text-sm text-gray-600">Access to datasets and challenge specifications</p>
+            </div>
+          </div>
+          
+          <div className="flex gap-3">
+            <Trophy className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
+            <div>
+              <h3 className="font-medium text-gray-900">Rankings & Leaderboards</h3>
+              <p className="text-sm text-gray-600">Real-time performance tracking</p>
+            </div>
+          </div>
+          
+          <div className="flex gap-3">
+            <TrendingUp className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
+            <div>
+              <h3 className="font-medium text-gray-900">Detailed Metrics</h3>
+              <p className="text-sm text-gray-600">Comprehensive evaluation across time series</p>
+            </div>
+          </div>
+          
+          <div className="flex gap-3">
+            <Users className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
+            <div>
+              <h3 className="font-medium text-gray-900">Community Support</h3>
+              <p className="text-sm text-gray-600">Connect with forecasting researchers</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Requirements */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
+        <h2 className="text-xl font-semibold text-gray-900 mb-4">Requirements</h2>
+        <div className="space-y-2">
+          <div className="flex gap-2 items-start">
+            <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
+            <span className="text-gray-700">Valid organization or affiliation</span>
+          </div>
+          <div className="flex gap-2 items-start">
+            <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
+            <span className="text-gray-700">Commitment to fair participation</span>
+          </div>
+          <div className="flex gap-2 items-start">
+            <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
+            <span className="text-gray-700">Adherence to benchmark guidelines</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Model Validation Section */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+        <div className="flex items-start gap-3 mb-4">
+          <Github className="w-6 h-6 text-gray-900 flex-shrink-0 mt-1" />
+          <div>
+            <h2 className="text-xl font-semibold text-gray-900 mb-2">Help Us Validate Model Implementations</h2>
+            <p className="text-gray-700">
+              Transparency is at the heart of our live benchmarking project. We have integrated a wide range of 
+              state-of-the-art time series forecasting models to provide the community with real-time performance insights.
+            </p>
+          </div>
+        </div>
+        
+        <div className="bg-gray-50 rounded-lg p-4 mb-4">
+          <p className="text-gray-700 mb-3">
+            To ensure that every model is evaluated under optimal conditions, <strong>we invite the original authors 
+            and maintainers to review our implementations.</strong> If you are a developer of one of the featured models, 
+            we would value your feedback on:
+          </p>
+          <ul className="space-y-2 ml-4">
+            <li className="flex gap-2 items-start text-gray-700">
+              <span className="text-blue-600 font-bold">•</span>
+              <span>Model configuration and hyperparameters</span>
+            </li>
+            <li className="flex gap-2 items-start text-gray-700">
+              <span className="text-blue-600 font-bold">•</span>
+              <span>Data preprocessing steps</span>
+            </li>
+            <li className="flex gap-2 items-start text-gray-700">
+              <span className="text-blue-600 font-bold">•</span>
+              <span>Implementation-specific nuances</span>
+            </li>
+          </ul>
+        </div>
+        
+        <p className="text-gray-700 mb-4">
+          Our goal is to represent your work as accurately as possible. Please visit our GitHub repository 
+          to review the code or open an issue for any suggested improvements.
+        </p>
+        
+        <a 
+          href="https://github.com/DAG-UPB" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 hover:bg-gray-800 text-white font-medium rounded-lg transition-colors"
+        >
+          <Github className="w-5 h-5" />
+          View on GitHub
+        </a>
+      </div>
+    </div>
+  );
+}

src/app/api/v1/API_STRUCTURE.md

@@ -0,0 +1,75 @@
+# API Structure Documentation
+## Structure
+
+```
+/src/app/api/v1/
+├── definitions/
+│   ├── route.ts                                  GET /api/v1/definitions
+│   └── [definitionId]/
+│       └── rounds/
+│           └── route.ts                          GET /api/v1/definitions/{id}/rounds
+├── rounds/
+│   ├── route.ts                                  GET /api/v1/rounds
+│   ├── metadata/
+│   │   └── route.ts                              GET /api/v1/rounds/metadata
+│   └── [roundId]/
+│       ├── route.ts                              GET /api/v1/rounds/{id}
+│       ├── leaderboard/
+│       │   └── route.ts                          GET /api/v1/rounds/{id}/leaderboard
+│       ├── models/
+│       │   └── route.ts                          GET /api/v1/rounds/{id}/models
+│       └── series/
+│           ├── route.ts                          GET /api/v1/rounds/{id}/series
+│           └── [seriesId]/
+│               ├── data/
+│               │   └── route.ts                  GET /api/v1/rounds/{id}/series/{id}/data
+│               └── forecasts/
+│                   └── route.ts                  GET /api/v1/rounds/{id}/series/{id}/forecasts
+└── models/
+    ├── rankings/
+    │   └── route.ts                              GET /api/v1/models/rankings
+    ├── ranking-filters/
+    │   └── route.ts                              GET /api/v1/models/ranking-filters
+    └── [modelId]/
+        ├── route.ts                              GET /api/v1/models/{id}
+        ├── rankings/
+        │   └── route.ts                          GET /api/v1/models/{id}/rankings
+        ├── series-by-definition/
+        │   └── route.ts                          GET /api/v1/models/{id}/series-by-definition
+        └── definitions/
+            └── [definitionId]/
+                └── series/
+                    └── [seriesId]/
+                        └── forecasts/
+                            └── route.ts          GET /api/v1/models/{id}/definitions/{id}/series/{id}/forecasts
+```
+
+## Service Layer
+
+The service layer has been organized into three domain-specific files:
+
+### definitionService.ts
+Handles challenge definition-related API calls:
+- `getDefinitionRounds()` - Get rounds for a specific definition
+
+### roundService.ts
+Handles round-related API calls:
+- `getChallenges()` - List all rounds (previously called challenges)
+- `getRoundsMetadata()` - Get filter metadata
+- `getChallengeSeries()` - Get series for a round
+- `getSeriesData()` - Get time series data
+- `getSeriesForecasts()` - Get forecasts for a series
+- `getRoundModels()` - Get models participating in a round
+
+### modelService.ts
+Handles model-related API calls:
+- `getFilteredRankings()` - Get model rankings with filters
+- `getRankingFilters()` - Get available ranking filters
+- `getModelDetails()` - Get model details
+- `getModelRankings()` - Get model ranking history
+- `getModelSeriesByDefinition()` - Get series grouped by definition
+- `getModelSeriesForecasts()` - Get model forecasts across rounds
+
+## Authentication
+
+All API routes forward the `X-API-Key` header to the backend API for authentication.

src/app/api/v1/definitions/[definitionId]/rounds/route.ts

@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ definitionId: string }> | { definitionId: string } }
+) {
+  const resolvedParams = await Promise.resolve(params);
+  const { definitionId } = resolvedParams;
+  
+  if (!definitionId || definitionId === 'undefined') {
+    return NextResponse.json(
+      { error: 'Invalid definition ID' },
+      { status: 400 }
+    );
+  }
+  
+  // Forward query params to backend
+  const searchParams = request.nextUrl.searchParams;
+  const queryString = searchParams.toString();
+  const url = `${API_BASE_URL}/api/v1/definitions/${definitionId}/rounds${queryString ? '?' + queryString : ''}`;
+  
+  console.log('Calling definition rounds API:', url);
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch rounds for definition' },
+        { status: response.status }
+      );
+    }
+    
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching rounds for definition:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/v1/definitions/route.ts

@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET() {
+  const url = `${API_BASE_URL}/api/v1/definitions`;
+  
+  console.log('Calling challenge definitions API:', url);
+  console.log('API_BASE_URL:', API_BASE_URL);
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch challenge definitions' },
+        { status: response.status }
+      );
+    }
+    
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching challenge definitions:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/v1/models/[modelId]/definitions/[definitionId]/series/[seriesId]/forecasts/route.ts

@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ modelId: string; definitionId: string; seriesId: string }> }
+) {
+  const { modelId, definitionId, seriesId } = await params;
+  
+  // Parse IDs as numbers for the external API
+  const modelIdNum = parseInt(modelId, 10);
+  const definitionIdNum = parseInt(definitionId, 10);
+  const seriesIdNum = parseInt(seriesId, 10);
+  
+  if (isNaN(modelIdNum) || isNaN(definitionIdNum) || isNaN(seriesIdNum)) {
+    return NextResponse.json({ error: 'Invalid model ID, definition ID, or series ID' }, { status: 400 });
+  }
+  
+  // Get query parameters for date filtering
+  const searchParams = request.nextUrl.searchParams;
+  const startDate = searchParams.get('start_date');
+  const endDate = searchParams.get('end_date');
+  
+  // Build URL with query parameters
+  const urlParams = new URLSearchParams();
+  if (startDate) urlParams.append('start_time', startDate);
+  if (endDate) urlParams.append('end_time', endDate);
+  
+  const queryString = urlParams.toString();
+  const url = `${API_BASE_URL}/api/v1/models/${modelIdNum}/definitions/${definitionIdNum}/series/${seriesIdNum}/forecasts${queryString ? '?' + queryString : ''}`;
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    const data = await response.json();
+    
+    if (!response.ok) {
+      console.error('API returned error:', data);
+      return NextResponse.json(data, { status: response.status });
+    }
+    
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Fetch error:', error);
+    return NextResponse.json({ error: 'Failed to fetch forecasts' }, { status: 500 });
+  }
+}

src/app/api/v1/models/[modelId]/rankings/route.ts

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ modelId: string }> }
+) {
+  const { modelId } = await params;
+  
+  
+  // Parse modelId as number for the external API
+  const modelIdNum = parseInt(modelId, 10);
+  
+  
+  if (isNaN(modelIdNum)) {
+    return NextResponse.json({ error: 'Invalid model ID' }, { status: 400 });
+  }
+  
+  const url = `${API_BASE_URL}/api/v1/models/${modelIdNum}/rankings`;
+  
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    const data = await response.json();
+    
+    if (!response.ok) {
+      console.error('API returned error:', data);
+      return NextResponse.json(data, { status: response.status });
+    }
+    
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Fetch error:', error);
+    return NextResponse.json({ error: 'Failed to fetch rankings' }, { status: 500 });
+  }
+}

src/app/api/v1/models/[modelId]/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ modelId: string }> }
+) {
+  const { modelId } = await params;
+  
+  // Parse modelId as number for the external API
+  const modelIdNum = parseInt(modelId, 10);
+  
+  if (isNaN(modelIdNum)) {
+    return NextResponse.json({ error: 'Invalid model ID' }, { status: 400 });
+  }
+  
+  const url = `${API_BASE_URL}/api/v1/models/${modelIdNum}`;
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    const data = await response.json();
+    
+    if (!response.ok) {
+      console.error('API returned error:', data);
+      return NextResponse.json(data, { status: response.status });
+    }
+    
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Fetch error:', error);
+    return NextResponse.json({ error: 'Failed to fetch model details' }, { status: 500 });
+  }
+}

src/app/api/v1/models/[modelId]/series-by-definition/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ modelId: string }> }
+) {
+  const { modelId } = await params;
+  
+  // Parse modelId as number for the external API
+  const modelIdNum = parseInt(modelId, 10);
+  
+  if (isNaN(modelIdNum)) {
+    return NextResponse.json({ error: 'Invalid model ID' }, { status: 400 });
+  }
+  
+  const url = `${API_BASE_URL}/api/v1/models/${modelIdNum}/series-by-definition`;
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    const data = await response.json();
+    
+    if (!response.ok) {
+      console.error('API returned error:', data);
+      return NextResponse.json(data, { status: response.status });
+    }
+    
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Fetch error:', error);
+    return NextResponse.json({ error: 'Failed to fetch series by definition' }, { status: 500 });
+  }
+}

src/app/api/v1/models/ranking-filters/route.ts

@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET() {
+  const url = `${API_BASE_URL}/api/v1/models/ranking-filters`;
+  
+  console.log('Calling ranking filters API:', url);
+  console.log('API_BASE_URL:', API_BASE_URL);
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch ranking filters' },
+        { status: response.status }
+      );
+    }
+    
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching ranking filters:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/v1/models/rankings/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  
+  const params = new URLSearchParams();
+  searchParams.forEach((value, key) => {
+    params.append(key, value);
+  });
+  
+  const url = `${API_BASE_URL}/api/v1/models/rankings${params.toString() ? '?' + params.toString() : ''}`;
+  
+  console.log('Calling external API:', url);
+  console.log('API_BASE_URL:', API_BASE_URL);
+  
+  // ToDo: Add error handling
+  const response = await fetch(url, {
+    headers: {
+      'X-API-Key': API_KEY,
+    }
+  });
+  
+  const data = await response.json();
+  return NextResponse.json(data);
+}

src/app/api/v1/rounds/[roundId]/leaderboard/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ roundId: string }> | { roundId: string } }
+) {
+  const resolvedParams = await Promise.resolve(params);
+  const { roundId } = resolvedParams;
+  
+  if (!roundId || roundId === 'undefined') {
+    return NextResponse.json(
+      { error: 'Invalid round ID' },
+      { status: 400 }
+    );
+  }
+  
+  const url = `${API_BASE_URL}/api/v1/rounds/${roundId}/leaderboard`;
+  
+  console.log('Calling round leaderboard API:', url);
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch leaderboard' },
+        { status: response.status }
+      );
+    }
+    
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching leaderboard:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/v1/rounds/[roundId]/models/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ roundId: string }> | { roundId: string } }
+) {
+  const resolvedParams = await Promise.resolve(params);
+  const { roundId } = resolvedParams;
+  
+  if (!roundId || roundId === 'undefined') {
+    return NextResponse.json(
+      { error: 'Invalid round ID' },
+      { status: 400 }
+    );
+  }
+  
+  const url = `${API_BASE_URL}/api/v1/rounds/${roundId}/models`;
+  
+  console.log('Calling round models API:', url);
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch models for round' },
+        { status: response.status }
+      );
+    }
+    
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching models for round:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/v1/rounds/[roundId]/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ roundId: string }> | { roundId: string } }
+) {
+  const resolvedParams = await Promise.resolve(params);
+  const { roundId } = resolvedParams;
+  
+  if (!roundId || roundId === 'undefined') {
+    return NextResponse.json(
+      { error: 'Invalid round ID' },
+      { status: 400 }
+    );
+  }
+  
+  const url = `${API_BASE_URL}/api/v1/rounds/${roundId}`;
+  
+  console.log('Calling round API:', url);
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch round' },
+        { status: response.status }
+      );
+    }
+    
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching round:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/v1/rounds/[roundId]/series/[seriesId]/data/route.ts

@@ -0,0 +1,59 @@
+import { NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ roundId: string; seriesId: string }> }
+) {
+  const { roundId, seriesId } = await params;
+  const { searchParams } = new URL(request.url);
+  const startTime = searchParams.get('start_time');
+  const endTime = searchParams.get('end_time');
+  
+  console.log('Data API route - params:', { roundId, seriesId, startTime, endTime });
+  
+  if (!startTime || !endTime) {
+    return NextResponse.json(
+      { error: 'start_time and end_time query parameters are required' },
+      { status: 400 }
+    );
+  }
+  
+  const queryParams = new URLSearchParams({
+    start_time: startTime,
+    end_time: endTime,
+  });
+  
+  const url = `${API_BASE_URL}/api/v1/rounds/${roundId}/series/${seriesId}/data?${queryParams.toString()}`;
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    console.log('Data API response status:', response.status);
+    
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Data API error response:', response.status, errorText);
+      return NextResponse.json(
+        { error: 'Failed to fetch series data', details: errorText, externalStatus: response.status },
+        { status: response.status }
+      );
+    }
+    
+    const data = await response.json();
+    console.log('Data API success');
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching series data:', error);
+    return NextResponse.json(
+      { error: 'Internal server error', details: error instanceof Error ? error.message : String(error) },
+      { status: 500 }
+    );
+  }
+}

src/app/api/v1/rounds/[roundId]/series/[seriesId]/forecasts/route.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ roundId: string; seriesId: string }> }
+) {
+  const { roundId, seriesId } = await params;
+  const url = `${API_BASE_URL}/api/v1/rounds/${roundId}/series/${seriesId}/forecasts`;
+  
+  console.log('Forecasts API route - params:', { roundId, seriesId });
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    console.log('Forecasts API response status:', response.status);
+    
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Forecasts API error response:', response.status, errorText);
+      return NextResponse.json(
+        { error: 'Failed to fetch forecasts', details: errorText, externalStatus: response.status },
+        { status: response.status }
+      );
+    }
+    
+    const data = await response.json();
+    console.log('Forecasts API success, data keys:', Object.keys(data));
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching forecasts:', error);
+    return NextResponse.json(
+      { error: 'Internal server error', details: error instanceof Error ? error.message : String(error) },
+      { status: 500 }
+    );
+  }
+}

src/app/api/v1/rounds/[roundId]/series/route.ts

@@ -0,0 +1,38 @@
+import { NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ roundId: string }> }
+) {
+  const { roundId } = await params;
+  const url = `${API_BASE_URL}/api/v1/rounds/${roundId}/series`;
+  
+  console.log('Calling external API:', url);
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch round series' },
+        { status: response.status }
+      );
+    }
+    
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching round series:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/v1/rounds/metadata/route.ts

@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET() {
+  const url = `${API_BASE_URL}/api/v1/rounds/metadata`;
+  
+  console.log('Calling rounds metadata API:', url);
+  console.log('API_BASE_URL:', API_BASE_URL);
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch rounds metadata' },
+        { status: response.status }
+      );
+    }
+    
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching rounds metadata:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/v1/rounds/route.ts

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASH_BOARD_API_URL || '';
+const API_KEY = process.env.NEXT_PUBLIC_DASH_BOARD_API_KEY || '';
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  
+  // Build query parameters from the request
+  const queryParams = new URLSearchParams();
+  
+  // Add filter parameters if they exist
+  const domains = searchParams.getAll('domain');
+  const categories = searchParams.getAll('category');
+  const frequencies = searchParams.getAll('frequency');
+  const horizons = searchParams.getAll('horizon');
+  const from = searchParams.get('from');
+  const to = searchParams.get('to');
+  const status = searchParams.get('status');
+  const searchTerm = searchParams.get('search');
+  
+  domains.forEach(d => queryParams.append('domain', d));
+  categories.forEach(c => queryParams.append('category', c));
+  frequencies.forEach(f => queryParams.append('frequency', f));
+  horizons.forEach(h => queryParams.append('horizon', h));
+  if (from) queryParams.append('from', from);
+  if (to) queryParams.append('to', to);
+  if (status && status !== 'all') queryParams.append('status', status);
+  if (searchTerm) queryParams.append('search', searchTerm);
+  
+  const queryString = queryParams.toString();
+  const url = `${API_BASE_URL}/api/v1/rounds${queryString ? '?' + queryString : ''}`;
+  
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'X-API-Key': API_KEY,
+      }
+    });
+    
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch rounds' },
+        { status: response.status }
+      );
+    }
+    
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching rounds:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

src/app/challenges/[challengeId]/[roundId]/page.tsx

@@ -0,0 +1,455 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Breadcrumbs from '@/src/components/Breadcrumbs';
+import TimeSeriesChart from '@/src/components/TimeSeriesChart';
+import Link from 'next/link';
+import { Clock, ChevronRight, Info } from 'lucide-react';
+
+interface RoundMetadata {
+  round_id: number;
+  name: string;
+  description: string;
+  status: string;
+  context_length: number;
+  horizon: string;
+  start_time: string;
+  end_time: string;
+  registration_start: string;
+  registration_end: string;
+  frequency?: string;
+}
+
+interface LeaderboardEntry {
+  model_id: number;
+  readable_id: string;
+  model_name: string;
+  series_id: number;
+  series_name: string;
+  forecast_count: number;
+  mase: number | null;
+  rmse: number | null;
+  is_final: boolean;
+  rank: number;
+}
+
+interface ModelRow {
+  model_id: number;
+  readable_id: string;
+  model_name: string;
+  seriesRanks: Record<number, { rank: number; mase: number | null }>;
+  avgRank: number;
+}
+
+export default function RoundDetail() {
+  const params = useParams();
+  const router = useRouter();
+  const challengeId = params.challengeId;
+  const [round, setRound] = useState<RoundMetadata | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [leaderboard, setLeaderboard] = useState<LeaderboardEntry[]>([]);
+  const [leaderboardLoading, setLeaderboardLoading] = useState(false);
+  const [leaderboardPage, setLeaderboardPage] = useState(1);
+  const MODELS_PER_PAGE = 10;
+
+  useEffect(() => {
+    const fetchRound = async () => {
+      // Handle params.roundId which can be string | string[] | undefined
+      const roundIdParam = params.roundId;
+      if (!roundIdParam) {
+        setError('Invalid round ID: undefined');
+        setLoading(false);
+        return;
+      }
+
+      const roundId = Array.isArray(roundIdParam) ? roundIdParam[0] : roundIdParam;
+      
+      try {
+        setLoading(true);
+        setError(null);
+
+        // Fetch the round data using the rounds endpoint
+        const response = await fetch(`/api/v1/rounds/${roundId}`);
+        
+        if (!response.ok) {
+          throw new Error('Failed to fetch round data');
+        }
+        
+        const data: RoundMetadata = await response.json();
+        setRound(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+        console.error('Error fetching round:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRound();
+  }, [params.roundId]);
+
+  // Fetch leaderboard data
+  useEffect(() => {
+    const fetchLeaderboard = async () => {
+      const roundIdParam = params.roundId;
+      if (!roundIdParam) return;
+
+      const roundId = Array.isArray(roundIdParam) ? roundIdParam[0] : roundIdParam;
+      
+      try {
+        setLeaderboardLoading(true);
+        const response = await fetch(`/api/v1/rounds/${roundId}/leaderboard`);
+        
+        if (!response.ok) {
+          console.error('Failed to fetch leaderboard');
+          return;
+        }
+        
+        const data: LeaderboardEntry[] = await response.json();
+        setLeaderboard(data);
+      } catch (err) {
+        console.error('Error fetching leaderboard:', err);
+      } finally {
+        setLeaderboardLoading(false);
+      }
+    };
+
+    fetchLeaderboard();
+  }, [params.roundId]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 p-6">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex justify-center items-center h-64">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !round) {
+    return (
+      <div className="min-h-screen bg-gray-50 p-6">
+        <div className="max-w-7xl mx-auto">
+          <div className="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded">
+            <p className="font-semibold">Error</p>
+            <p className="text-sm">{error || 'Round not found'}</p>
+          </div>
+          <button
+            onClick={() => router.back()}
+            className="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium"
+          >
+            ← Go back
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-6">
+      <div className="max-w-7xl mx-auto">
+        <Breadcrumbs 
+          items={[
+            { label: 'Challenges', href: '/challenges' },
+            { label: `Challenge #${challengeId}`, href: `/challenges/${challengeId}` },
+            { label: `Round #${params.roundId || ''}`, href: `/challenges/${challengeId}/${params.roundId}` }
+          ]} 
+        />
+        
+        <header className="mb-8">
+          <div className="flex items-start justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900">
+                {round.name || `Round ${params.roundId}`}
+              </h1>
+              {round.description && (
+                <p className="text-gray-600 mt-2">{round.description}</p>
+              )}
+            </div>
+            {round.status && (
+              <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${
+                round.status === 'active' 
+                  ? 'bg-green-100 text-green-800'
+                  : round.status === 'completed'
+                  ? 'bg-blue-100 text-blue-800'
+                  : round.status === 'registration'
+                  ? 'bg-yellow-100 text-yellow-800'
+                  : 'bg-gray-100 text-gray-800'
+              }`}>
+                {round.status.charAt(0).toUpperCase() + round.status.slice(1)}
+              </span>
+            )}
+          </div>
+        </header>
+
+        {/* Registration Banner */}
+        {round.status === 'registration' && (
+          <Link 
+            href="/add-model"
+            className="mb-6 bg-yellow-50 border border-yellow-200 rounded-lg px-6 py-4 block hover:bg-yellow-100 hover:border-yellow-300 transition-colors cursor-pointer"
+          >
+            <div className="flex items-center">
+              <Clock className="h-6 w-6 text-yellow-600 mr-3 flex-shrink-0" />
+              <div>
+                <p className="text-yellow-800 font-medium">
+                  Registration is open — submit your forecasts by{' '}
+                  <span className="font-semibold">
+                    {round.registration_end 
+                      ? new Date(round.registration_end).toLocaleDateString('en-US', { 
+                          weekday: 'long',
+                          year: 'numeric', 
+                          month: 'long', 
+                          day: 'numeric',
+                          hour: '2-digit',
+                          minute: '2-digit'
+                        })
+                      : 'the registration deadline'}
+                  </span>
+                </p>
+              </div>
+              <ChevronRight className="h-5 w-5 text-yellow-600 ml-auto flex-shrink-0" />
+            </div>
+          </Link>
+        )}
+
+        {/* Leaderboard Section */}
+        <div className="mb-8 bg-white rounded-lg shadow-md overflow-hidden">
+          <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
+            <h2 className="text-xl font-semibold text-gray-900">Round Leaderboard</h2>
+            <p className="text-sm text-gray-500 mt-1">Model rankings per series based on MASE score</p>
+          </div>
+          
+          {round.status === 'registration' ? (
+            <div className="px-6 py-12 text-center text-gray-500">
+              <Clock className="mx-auto h-12 w-12 text-gray-400 mb-4" strokeWidth={1.5} />
+              <p className="text-lg font-medium text-gray-600">No leaderboard data available yet</p>
+              <p className="text-sm text-gray-400 mt-1">The leaderboard will be available once the round begins.</p>
+            </div>
+          ) : leaderboardLoading ? (
+            <div className="px-6 py-12 text-center text-gray-500">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
+              Loading leaderboard...
+            </div>
+          ) : leaderboard.length > 0 ? (
+            (() => {
+              // Get unique series IDs and build a map of series_id to series_name
+              const seriesIds = [...new Set(leaderboard.map(entry => entry.series_id))].sort((a, b) => a - b);
+              const seriesNameMap = new Map<number, string>();
+              leaderboard.forEach(entry => {
+                if (!seriesNameMap.has(entry.series_id)) {
+                  seriesNameMap.set(entry.series_id, entry.series_name);
+                }
+              });
+              
+              // Group data by model
+              const modelMap = new Map<number, ModelRow>();
+              leaderboard.forEach(entry => {
+                if (!modelMap.has(entry.model_id)) {
+                  modelMap.set(entry.model_id, {
+                    model_id: entry.model_id,
+                    readable_id: entry.readable_id,
+                    model_name: entry.model_name,
+                    seriesRanks: {},
+                    avgRank: 0
+                  });
+                }
+                const model = modelMap.get(entry.model_id)!;
+                model.seriesRanks[entry.series_id] = { rank: entry.rank, mase: entry.mase };
+              });
+              
+              // Calculate average rank and sort
+              const modelRows = Array.from(modelMap.values()).map(model => {
+                const ranks = Object.values(model.seriesRanks).map(r => r.rank);
+                model.avgRank = ranks.length > 0 ? ranks.reduce((sum, r) => sum + r, 0) / ranks.length : Infinity;
+                return model;
+              }).sort((a, b) => a.avgRank - b.avgRank);
+
+              // Pagination
+              const totalModels = modelRows.length;
+              const totalPages = Math.ceil(totalModels / MODELS_PER_PAGE);
+              const startIndex = (leaderboardPage - 1) * MODELS_PER_PAGE;
+              const paginatedModels = modelRows.slice(startIndex, startIndex + MODELS_PER_PAGE);
+
+              return (
+                <div>
+                  <div className="overflow-x-auto">
+                    <table className="min-w-full divide-y divide-gray-200">
+                      <thead className="bg-gray-50">
+                        <tr>
+                          <th scope="col" className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sticky left-0 bg-gray-50 z-10">
+                            Model
+                          </th>
+                          <th scope="col" className="px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider bg-blue-50">
+                            Avg Rank
+                          </th>
+                          {seriesIds.map(seriesId => (
+                            <th key={seriesId} scope="col" className="px-2 py-3 text-center text-xs font-medium text-gray-500 tracking-wider align-bottom min-w-[60px] max-w-[100px]">
+                              <div className="text-xs leading-tight">
+                                {(seriesNameMap.get(seriesId) || `Series ${seriesId}`).replace(/[_-]/g, ' ')}
+                              </div>
+                            </th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody className="bg-white divide-y divide-gray-200">
+                        {paginatedModels.map((model) => (
+                          <tr key={model.model_id} className="hover:bg-gray-50">
+                            <td className="px-4 py-3 whitespace-nowrap sticky left-0 bg-white z-10">
+                              <Link 
+                                href={`/models/${model.model_id}`}
+                                className="text-sm font-medium text-blue-600 hover:text-blue-800"
+                            >
+                              {model.model_name}
+                            </Link>
+                            <p className="text-xs text-gray-500">{model.readable_id}</p>
+                          </td>
+                          <td className="px-3 py-3 text-center text-sm font-semibold text-gray-900 bg-blue-50">
+                            {model.avgRank.toFixed(2)}
+                          </td>
+                          {seriesIds.map(seriesId => {
+                            const rankData = model.seriesRanks[seriesId];
+                            if (!rankData) {
+                              return (
+                                <td key={seriesId} className="px-3 py-3 text-center text-sm text-gray-400">
+                                  -
+                                </td>
+                              );
+                            }
+                            return (
+                              <td key={seriesId} className="px-3 py-3 text-center">
+                                <span 
+                                  className={`inline-flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold ${
+                                    rankData.rank === 1 
+                                      ? 'bg-yellow-100 text-yellow-800'
+                                      : rankData.rank === 2
+                                      ? 'bg-gray-200 text-gray-800'
+                                      : rankData.rank === 3
+                                      ? 'bg-orange-100 text-orange-800'
+                                      : 'bg-gray-100 text-gray-600'
+                                  }`}
+                                  title={rankData.mase !== null ? `MASE: ${rankData.mase.toFixed(4)}` : 'MASE: N/A'}
+                                >
+                                  {rankData.rank}
+                                </span>
+                              </td>
+                            );
+                          })}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                  </div>
+
+                  {/* Pagination Controls */}
+                  {totalPages > 1 && (
+                    <div className="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
+                      <div className="text-sm text-gray-700">
+                        Showing {startIndex + 1} to {Math.min(startIndex + MODELS_PER_PAGE, totalModels)} of {totalModels} models
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <button
+                          onClick={() => setLeaderboardPage(leaderboardPage - 1)}
+                          disabled={leaderboardPage === 1}
+                          className={`px-3 py-1 rounded text-sm font-medium ${
+                            leaderboardPage === 1
+                              ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                              : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                          }`}
+                        >
+                          Previous
+                        </button>
+                        
+                        <div className="flex items-center space-x-1">
+                          {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {
+                            const showPage = 
+                              page === 1 || 
+                              page === totalPages || 
+                              (page >= leaderboardPage - 1 && page <= leaderboardPage + 1);
+                            
+                            const showEllipsis = 
+                              (page === 2 && leaderboardPage > 3) || 
+                              (page === totalPages - 1 && leaderboardPage < totalPages - 2);
+
+                            if (!showPage && !showEllipsis) return null;
+                            
+                            if (showEllipsis) {
+                              return (
+                                <span key={page} className="px-2 text-gray-500">
+                                  ...
+                                </span>
+                              );
+                            }
+
+                            return (
+                              <button
+                                key={page}
+                                onClick={() => setLeaderboardPage(page)}
+                                className={`px-3 py-1 rounded text-sm font-medium ${
+                                  leaderboardPage === page
+                                    ? 'bg-blue-600 text-white'
+                                    : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                                }`}
+                              >
+                                {page}
+                              </button>
+                            );
+                          })}
+                        </div>
+
+                        <button
+                          onClick={() => setLeaderboardPage(leaderboardPage + 1)}
+                          disabled={leaderboardPage === totalPages}
+                          className={`px-3 py-1 rounded text-sm font-medium ${
+                            leaderboardPage === totalPages
+                              ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                              : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                          }`}
+                        >
+                          Next
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })()
+          ) : (
+            <div className="px-6 py-12 text-center text-gray-500">
+              No leaderboard data available for this round
+            </div>
+          )}
+        </div>
+
+        {/* Time Series Chart Section */}
+        {round.status === 'registration' ? (
+          <div className="bg-white rounded-lg shadow-md overflow-hidden">
+            <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
+              <h2 className="text-xl font-semibold text-gray-900">Time Series Data</h2>
+            </div>
+            <div className="px-6 py-12 text-center text-gray-500">
+              <Info className="mx-auto h-12 w-12 text-gray-400 mb-4" strokeWidth={1.5} />
+              <p className="text-lg font-medium text-gray-600">Series data not yet available</p>
+              <p className="text-sm text-gray-400 mt-1">The time series will be revealed once the round starts.</p>
+            </div>
+          </div>
+        ) : (
+          <TimeSeriesChart
+            challengeId={round.round_id}
+            challengeName={round.name || `Round ${params.roundId}`}
+            challengeDescription={round.description || undefined}
+            startDate={round.start_time || undefined}
+            endDate={round.end_time || undefined}
+            frequency={round.frequency || undefined}
+            horizon={round.horizon}
+            status={round.status}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

src/app/challenges/[challengeId]/page.tsx

@@ -0,0 +1,750 @@
+'use client';
+
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { Info } from 'lucide-react';
+import Breadcrumbs from '@/src/components/Breadcrumbs';
+import RankingsTable from '@/src/components/RankingsTable';
+import type { ChallengeDefinition, DefinitionRound, PaginationInfo } from '@/src/types/challenge';
+import { getFilteredRankings, type RankingsResponse } from '@/src/services/modelService';
+import { getDefinitionRounds } from '@/src/services/definitionService';
+import Link from 'next/link';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+
+export default function ChallengeDefinitionDetail() {
+  const params = useParams();
+  const router = useRouter();
+  const [definition, setDefinition] = useState<ChallengeDefinition | null>(null);
+  const [rankings, setRankings] = useState<RankingsResponse | null>(null);
+  const [selectedCalculationDate, setSelectedCalculationDate] = useState<string>(
+    new Date().toISOString().split('T')[0]
+  );
+  const [loading, setLoading] = useState(true);
+  const [rankingsLoading, setRankingsLoading] = useState(false);
+  const [rankingsPage, setRankingsPage] = useState(1);
+  const [roundsData, setRoundsData] = useState<Record<string, { rounds: DefinitionRound[]; pagination: PaginationInfo | null }>>({});
+  const [roundsLoading, setRoundsLoading] = useState<Record<string, boolean>>({});
+  const [expandedStatuses, setExpandedStatuses] = useState<Record<string, boolean>>({
+    active: true,
+    registration: true,
+    completed: false,
+    cancelled: false,
+  });
+  const [error, setError] = useState<string | null>(null);
+
+  const ROUNDS_PER_PAGE = 10;
+  const STATUSES = ['active', 'registration', 'completed', 'cancelled'];
+
+  useEffect(() => {
+    const fetchDefinition = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch('/api/v1/definitions');
+        
+        if (!response.ok) {
+          throw new Error('Failed to fetch challenge definitions');
+        }
+        
+        const data: ChallengeDefinition[] = await response.json();
+        const found = data.find(d => d.id === Number(params.challengeId));
+        
+        if (!found) {
+          setError('Challenge definition not found');
+        } else {
+          setDefinition(found);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+        console.error('Error fetching challenge definition:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (params.challengeId) {
+      fetchDefinition();
+    }
+  }, [params.challengeId]);
+
+  // Fetch rankings for the definition
+  useEffect(() => {
+    const fetchRankings = async () => {
+      if (!definition || !definition.id) return;
+
+      try {
+        setRankingsLoading(true);
+        const filters: any = { 
+          definition_id: definition.id,
+          limit: 100
+        };
+        if (selectedCalculationDate) {
+          filters.calculation_date = selectedCalculationDate;
+        }
+        const rankingsData = await getFilteredRankings(filters);
+        setRankings(rankingsData);
+      } catch (err) {
+        console.error('Error fetching rankings:', err);
+      } finally {
+        setRankingsLoading(false);
+      }
+    };
+
+    fetchRankings();
+  }, [definition, selectedCalculationDate]);
+
+  // Reset to page 1 when calculation date changes
+  useEffect(() => {
+    setRankingsPage(1);
+  }, [selectedCalculationDate]);
+
+  // Fetch rounds for the definition (per status with pagination)
+  const fetchRoundsForStatus = useCallback(async (status: string, page: number = 1) => {
+    if (!definition || !definition.id) return;
+
+    const ROUNDS_PER_PAGE = 10;
+
+    try {
+      setRoundsLoading(prev => ({ ...prev, [status]: true }));
+      const response = await getDefinitionRounds(definition.id, {
+        page,
+        pageSize: ROUNDS_PER_PAGE,
+        status,
+      });
+      setRoundsData(prev => ({
+        ...prev,
+        [status]: {
+          rounds: response.items,
+          pagination: response.pagination,
+        },
+      }));
+    } catch (err) {
+      console.error(`Error fetching ${status} rounds:`, err);
+    } finally {
+      setRoundsLoading(prev => ({ ...prev, [status]: false }));
+    }
+  }, [definition]);
+
+  // Initial fetch of rounds for all statuses
+  useEffect(() => {
+    if (!definition || !definition.id) return;
+    
+    STATUSES.forEach(status => {
+      fetchRoundsForStatus(status, 1);
+    });
+  }, [definition, fetchRoundsForStatus]);
+
+  const handlePageChange = (status: string, page: number) => {
+    fetchRoundsForStatus(status, page);
+  };
+
+  // Rankings pagination calculations
+  const RANKINGS_PER_PAGE = 10;
+  const totalRankings = rankings?.rankings.length || 0;
+  const totalRankingsPages = Math.ceil(totalRankings / RANKINGS_PER_PAGE);
+  const startRankingIndex = (rankingsPage - 1) * RANKINGS_PER_PAGE;
+  const endRankingIndex = startRankingIndex + RANKINGS_PER_PAGE;
+  const paginatedRankings = rankings?.rankings.slice(startRankingIndex, endRankingIndex) || [];
+
+  const toggleStatus = (status: string) => {
+    setExpandedStatuses(prev => ({
+      ...prev,
+      [status]: !prev[status]
+    }));
+  };
+
+  const getStatusConfig = (status: string) => {
+    const configs: Record<string, { label: string; color: string; bgColor: string; borderColor: string }> = {
+      registration: {
+        label: 'Registration',
+        color: 'text-yellow-800',
+        bgColor: 'bg-yellow-50',
+        borderColor: 'border-yellow-200'
+      },
+      active: {
+        label: 'Active',
+        color: 'text-green-800',
+        bgColor: 'bg-green-50',
+        borderColor: 'border-green-200'
+      },
+      completed: {
+        label: 'Completed',
+        color: 'text-blue-800',
+        bgColor: 'bg-blue-50',
+        borderColor: 'border-blue-200'
+      },
+      cancelled: {
+        label: 'Cancelled',
+        color: 'text-gray-800',
+        bgColor: 'bg-gray-50',
+        borderColor: 'border-gray-200'
+      }
+    };
+    return configs[status] || {
+      label: status.charAt(0).toUpperCase() + status.slice(1),
+      color: 'text-gray-800',
+      bgColor: 'bg-gray-50',
+      borderColor: 'border-gray-200'
+    };
+  };
+
+  // Get statuses that have data
+  const statusesWithData = useMemo(() => {
+    return STATUSES.filter(status => {
+      const data = roundsData[status];
+      return data && data.pagination && data.pagination.total_items > 0;
+    });
+  }, [roundsData]);
+
+  if (loading) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex justify-center items-center h-64">
+          <div className="text-gray-500">Loading challenge definition...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !definition) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded">
+          <p className="font-semibold">Error</p>
+          <p className="text-sm">{error || 'Challenge definition not found'}</p>
+        </div>
+        <button
+          onClick={() => router.back()}
+          className="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium"
+        >
+          ← Go back
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <Breadcrumbs 
+        items={[
+          { label: 'Challenges', href: '/challenges' },
+          { label: `Challenge #${params.challengeId}`, href: `/challenges/${params.challengeId}` }
+        ]} 
+      />
+      
+      <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
+        <div className="px-6 py-5 border-b border-gray-200 bg-gray-50">
+          <div className="flex items-start justify-between">
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">{definition.name}</h1>
+              <p className="mt-1 text-sm text-gray-500">ID: {definition.id}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="px-6 py-5">
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900 mb-2">Description</h2>
+              <p className="text-gray-700">{definition.description}</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <h3 className="text-sm font-semibold text-gray-900 mb-3">Schedule Information</h3>
+                <dl className="space-y-3">
+                  <div>
+                    <dt className="text-sm font-medium text-gray-500">Schedule ID</dt>
+                    <dd className="mt-1 text-sm text-gray-900 font-mono bg-gray-50 px-3 py-2 rounded">
+                      {definition.schedule_id}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-sm font-medium text-gray-500">Frequency</dt>
+                    <dd className="mt-1 text-sm text-gray-900 font-medium">
+                      {definition.frequency}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-sm font-medium text-gray-500">Horizon</dt>
+                    <dd className="mt-1 text-sm text-gray-900 font-medium">
+                      {definition.horizon}
+                    </dd>
+                  </div>
+                  {(definition.next_registration_start || definition.next_registration_end) && (
+                    <div className="pt-2 border-t border-gray-200">
+                      <dt className="text-sm font-medium text-gray-700 mb-2">Next Registration Period</dt>
+                      {definition.next_registration_start && (
+                        <dd className="mt-1 text-sm text-gray-900">
+                          <span className="text-gray-500">Opens:</span>{' '}
+                          <span className="font-medium">
+                            {new Date(definition.next_registration_start).toLocaleDateString('en-US', {
+                              weekday: 'short',
+                              year: 'numeric',
+                              month: 'short',
+                              day: 'numeric',
+                              hour: '2-digit',
+                              minute: '2-digit'
+                            })}
+                          </span>
+                        </dd>
+                      )}
+                      {definition.next_registration_end && (
+                        <dd className="mt-1 text-sm text-gray-900">
+                          <span className="text-gray-500">Closes:</span>{' '}
+                          <span className="font-medium">
+                            {new Date(definition.next_registration_end).toLocaleDateString('en-US', {
+                              weekday: 'short',
+                              year: 'numeric',
+                              month: 'short',
+                              day: 'numeric',
+                              hour: '2-digit',
+                              minute: '2-digit'
+                            })}
+                          </span>
+                        </dd>
+                      )}
+                    </div>
+                  )}
+                </dl>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-semibold text-gray-900 mb-3">Configuration</h3>
+                <dl className="space-y-3">
+                  <div>
+                    <dt className="text-sm font-medium text-gray-500">Context Length</dt>
+                    <dd className="mt-1 text-sm text-gray-900 font-medium">
+                      {definition.context_length}
+                    </dd>
+                  </div>
+                  {definition.domain && (
+                    <div>
+                      <dt className="text-sm font-medium text-gray-500">Domain</dt>
+                      <dd className="mt-1 text-sm text-gray-900 font-medium">
+                        {definition.domain}
+                      </dd>
+                    </div>
+                  )}
+                  {definition.subdomain && (
+                    <div>
+                      <dt className="text-sm font-medium text-gray-500">Subdomain</dt>
+                      <dd className="mt-1 text-sm text-gray-900 font-medium">
+                        {definition.subdomain}
+                      </dd>
+                    </div>
+                  )}
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Rankings Section */}
+      {definition && (
+        <div className="mt-8">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-2xl font-semibold text-gray-900">Model Rankings</h2>
+            
+            {/* Calculation Date Filter */}
+            <div className="flex items-center gap-2">
+              <label className="text-xs text-gray-500">Calculation Date</label>
+              <div className="relative group">
+                <Info className="w-4 h-4 text-gray-400 cursor-help" />
+                <div className="absolute right-0 top-6 w-64 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
+                  <div className="font-medium mb-1">Calculation Date</div>
+                  <div className="text-gray-200">
+                    Sets the cutoff date for model evaluation. Use this to view rankings as they appeared on a specific date. All models are ranked based on their performance up to this date.
+                  </div>
+                </div>
+              </div>
+              <input
+                type="date"
+                value={selectedCalculationDate}
+                onChange={(e) => setSelectedCalculationDate(e.target.value)}
+                className="px-2 py-1 text-xs bg-white border border-gray-200 rounded text-gray-600 hover:border-gray-300 focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400"
+              />
+            </div>
+          </div>
+          
+          {rankingsLoading ? (
+            <div className="bg-white rounded-lg shadow-md p-12 text-center text-gray-500">
+              Loading rankings...
+            </div>
+          ) : rankings && rankings.rankings.length > 0 ? (
+            <>
+              <RankingsTable rankings={paginatedRankings} />
+              
+              {/* Rankings Pagination */}
+              {totalRankingsPages > 1 && (
+                <div className="mt-4 bg-white rounded-lg shadow-md px-6 py-4 flex items-center justify-between">
+                  <div className="text-sm text-gray-700">
+                    Showing {startRankingIndex + 1} to {Math.min(endRankingIndex, totalRankings)} of {totalRankings} models
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <button
+                      onClick={() => setRankingsPage(p => Math.max(1, p - 1))}
+                      disabled={rankingsPage === 1}
+                      className={`px-3 py-1 rounded text-sm font-medium ${
+                        rankingsPage === 1
+                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                          : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                      }`}
+                    >
+                      Previous
+                    </button>
+                    
+                    <div className="flex items-center space-x-1">
+                      {Array.from({ length: totalRankingsPages }, (_, i) => i + 1).map((page) => {
+                        const showPage = 
+                          page === 1 || 
+                          page === totalRankingsPages || 
+                          (page >= rankingsPage - 1 && page <= rankingsPage + 1);
+                        
+                        const showEllipsis = 
+                          (page === 2 && rankingsPage > 3) || 
+                          (page === totalRankingsPages - 1 && rankingsPage < totalRankingsPages - 2);
+
+                        if (!showPage && !showEllipsis) return null;
+                        
+                        if (showEllipsis) {
+                          return (
+                            <span key={page} className="px-2 text-gray-500">
+                              ...
+                            </span>
+                          );
+                        }
+
+                        return (
+                          <button
+                            key={page}
+                            onClick={() => setRankingsPage(page)}
+                            className={`px-3 py-1 rounded text-sm font-medium ${
+                              rankingsPage === page
+                                ? 'bg-blue-600 text-white'
+                                : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                            }`}
+                          >
+                            {page}
+                          </button>
+                        );
+                      })}
+                    </div>
+                    
+                    <button
+                      onClick={() => setRankingsPage(p => Math.min(totalRankingsPages, p + 1))}
+                      disabled={rankingsPage === totalRankingsPages}
+                      className={`px-3 py-1 rounded text-sm font-medium ${
+                        rankingsPage === totalRankingsPages
+                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                          : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                      }`}
+                    >
+                      Next
+                    </button>
+                  </div>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="bg-white rounded-lg shadow-md p-12 text-center text-gray-500">
+              No rankings available
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Rounds Section */}
+      {definition && (
+        <div className="mt-8 bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
+          <div className="px-6 py-5 border-b border-gray-200 bg-gray-50">
+            <h2 className="text-xl font-bold text-gray-900">Challenge Rounds</h2>
+            <p className="mt-1 text-sm text-gray-500">
+              All rounds associated with this challenge definition, grouped by status
+            </p>
+          </div>
+
+          <div className="divide-y divide-gray-200">
+            {STATUSES.map((status) => {
+              const statusData = roundsData[status];
+              const config = getStatusConfig(status);
+              const isExpanded = expandedStatuses[status];
+              const isLoading = roundsLoading[status];
+              const rounds = statusData?.rounds || [];
+              const pagination = statusData?.pagination;
+              const totalRounds = pagination?.total_items || 0;
+              const currentPage = pagination?.page || 1;
+              const totalPages = pagination?.total_pages || 1;
+
+                return (
+                  <div key={status} className="border-b border-gray-200 last:border-b-0">
+                    {/* Status Header */}
+                    <button
+                      onClick={() => toggleStatus(status)}
+                      className={`w-full px-6 py-4 flex items-center justify-between hover:bg-gray-50 transition-colors ${config.bgColor}`}
+                    >
+                      <div className="flex items-center space-x-3">
+                        {isExpanded ? (
+                          <ChevronDown className="h-5 w-5 text-gray-500" />
+                        ) : (
+                          <ChevronRight className="h-5 w-5 text-gray-500" />
+                        )}
+                        <span className={`text-lg font-semibold ${config.color}`}>
+                          {config.label}
+                        </span>
+                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          status === 'active' 
+                            ? 'bg-green-100 text-green-800'
+                            : status === 'registration'
+                            ? 'bg-yellow-100 text-yellow-800'
+                            : status === 'completed'
+                            ? 'bg-blue-100 text-blue-800'
+                            : status === 'cancelled'
+                            ? 'bg-gray-100 text-gray-800'
+                            : 'bg-gray-100 text-gray-800'
+                        }`}>
+                          {totalRounds} {totalRounds === 1 ? 'round' : 'rounds'}
+                        </span>
+                      </div>
+                    </button>
+
+                    {/* Expandable Content */}
+                    {isExpanded && (
+                      <div className="overflow-x-auto">
+                        {isLoading ? (
+                          <div className="px-6 py-8 flex items-center justify-center">
+                            <div className="flex items-center gap-3 text-gray-500">
+                              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
+                              <span>Loading rounds...</span>
+                            </div>
+                          </div>
+                        ) : totalRounds === 0 ? (
+                          <div className="px-6 py-8 text-center text-gray-500">
+                            No rounds available for this status
+                          </div>
+                        ) : (
+                          <>
+                        <table className="min-w-full divide-y divide-gray-200">
+                          <thead className="bg-gray-50">
+                            <tr>
+                              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Name
+                              </th>
+                              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Description
+                              </th>
+                              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Registration
+                              </th>
+                              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Start Time
+                              </th>
+                              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                End Time
+                              </th>
+                              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Context Length
+                              </th>
+                              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Frequency
+                              </th>
+                              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Horizon
+                              </th>
+                              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Domains
+                              </th>
+                              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Categories
+                              </th>
+                              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                Subcategories
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody className="bg-white divide-y divide-gray-200">
+                            {rounds.map((round, roundIndex) => {
+                              return (
+                              <tr key={`round-${round.id}-${roundIndex}`} className="hover:bg-gray-50">
+                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                  <Link 
+                                    href={`/challenges/${params.challengeId}/${round.id}`}
+                                    className="text-blue-600 hover:text-blue-800 hover:underline"
+                                  >
+                                    {round.name}
+                                  </Link>
+                                </td>
+                                <td className="px-6 py-4 text-sm text-gray-900 max-w-xs">
+                                  {round.description}
+                                </td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                                  <div>{new Date(round.registration_start).toLocaleDateString('en-US', {
+                                    year: 'numeric',
+                                    month: 'short',
+                                    day: 'numeric',
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                  })}</div>
+                                  <div className="text-xs text-gray-500">to</div>
+                                  <div>{new Date(round.registration_end).toLocaleDateString('en-US', {
+                                    year: 'numeric',
+                                    month: 'short',
+                                    day: 'numeric',
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                  })}</div>
+                                </td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                                  {new Date(round.start_time).toLocaleDateString('en-US', {
+                                    year: 'numeric',
+                                    month: 'short',
+                                    day: 'numeric',
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                  })}
+                                </td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                                  {new Date(round.end_time).toLocaleDateString('en-US', {
+                                    year: 'numeric',
+                                    month: 'short',
+                                    day: 'numeric',
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                  })}
+                                </td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                                  {round.context_length}
+                                </td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                                  {round.frequency}
+                                </td>
+                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                                  {round.horizon}
+                                </td>
+                                <td className="px-6 py-4 text-sm text-gray-900">
+                                  <div className="flex flex-wrap gap-1">
+                                    {round.domains && round.domains.length > 0 ? (
+                                      round.domains.map((domain, idx) => (
+                                        <span key={idx} className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
+                                          {domain}
+                                        </span>
+                                      ))
+                                    ) : (
+                                      <span className="text-gray-400 text-xs">-</span>
+                                    )}
+                                  </div>
+                                </td>
+                                <td className="px-6 py-4 text-sm text-gray-900">
+                                  <div className="flex flex-wrap gap-1">
+                                    {round.categories && round.categories.length > 0 ? (
+                                      round.categories.map((category, idx) => (
+                                        <span key={idx} className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800">
+                                          {category}
+                                        </span>
+                                      ))
+                                    ) : (
+                                      <span className="text-gray-400 text-xs">-</span>
+                                    )}
+                                  </div>
+                                </td>
+                                <td className="px-6 py-4 text-sm text-gray-900">
+                                  <div className="flex flex-wrap gap-1">
+                                    {round.subcategories && round.subcategories.length > 0 ? (
+                                      round.subcategories.map((subcategory, idx) => (
+                                        <span key={idx} className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-pink-100 text-pink-800">
+                                          {subcategory}
+                                        </span>
+                                      ))
+                                    ) : (
+                                      <span className="text-gray-400 text-xs">-</span>
+                                    )}
+                                  </div>
+                                </td>
+                              </tr>
+                            )})}
+                          </tbody>
+                        </table>
+
+                        {/* Pagination Controls */}
+                        {totalPages > 1 && (
+                          <div className="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
+                            <div className="text-sm text-gray-700">
+                              Showing {((currentPage - 1) * ROUNDS_PER_PAGE) + 1} to {Math.min(currentPage * ROUNDS_PER_PAGE, totalRounds)} of {totalRounds} rounds
+                            </div>
+                            <div className="flex items-center space-x-2">
+                              <button
+                                onClick={() => handlePageChange(status, currentPage - 1)}
+                                disabled={!pagination?.has_previous}
+                                className={`px-3 py-1 rounded text-sm font-medium ${
+                                  !pagination?.has_previous
+                                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                                    : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                                }`}
+                              >
+                                Previous
+                              </button>
+                              
+                              <div className="flex items-center space-x-1">
+                                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {
+                                  const showPage = 
+                                    page === 1 || 
+                                    page === totalPages || 
+                                    (page >= currentPage - 1 && page <= currentPage + 1);
+                                  
+                                  const showEllipsis = 
+                                    (page === 2 && currentPage > 3) || 
+                                    (page === totalPages - 1 && currentPage < totalPages - 2);
+
+                                  if (!showPage && !showEllipsis) return null;
+                                  
+                                  if (showEllipsis) {
+                                    return (
+                                      <span key={page} className="px-2 text-gray-500">
+                                        ...
+                                      </span>
+                                    );
+                                  }
+
+                                  return (
+                                    <button
+                                      key={page}
+                                      onClick={() => handlePageChange(status, page)}
+                                      className={`px-3 py-1 rounded text-sm font-medium ${
+                                        currentPage === page
+                                          ? 'bg-blue-600 text-white'
+                                          : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                                      }`}
+                                    >
+                                      {page}
+                                    </button>
+                                  );
+                                })}
+                              </div>
+                              
+                              <button
+                                onClick={() => handlePageChange(status, currentPage + 1)}
+                                disabled={!pagination?.has_next}
+                                className={`px-3 py-1 rounded text-sm font-medium ${
+                                  !pagination?.has_next
+                                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                                    : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                                }`}
+                              >
+                                Next
+                              </button>
+                            </div>
+                          </div>
+                        )}
+                        </>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/app/challenges/page.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import Link from 'next/link';
+import Breadcrumbs from '@/src/components/Breadcrumbs';
+import type { ChallengeDefinition } from '@/src/types/challenge';
+
+type GroupByOption = 'none' | 'frequency' | 'horizon' | 'domain' | 'subdomain';
+
+
+export default function ChallengeDefinitions() {
+  const [definitions, setDefinitions] = useState<ChallengeDefinition[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [groupBy, setGroupBy] = useState<GroupByOption>('none');
+
+  useEffect(() => {
+    const fetchDefinitions = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch('/api/v1/definitions');
+        
+        if (!response.ok) {
+          throw new Error('Failed to fetch challenges');
+        }
+        
+        const data = await response.json();
+        setDefinitions(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+        console.error('Error fetching challenges:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchDefinitions();
+  }, []);
+
+  const groupedDefinitions = useMemo(() => {
+    if (groupBy === 'none') {
+      return { 'All Challenges': [...definitions] };
+    }
+
+    const groups: Record<string, ChallengeDefinition[]> = {};
+    
+    definitions.forEach((def) => {
+      let key: string;
+      
+      switch (groupBy) {
+        case 'frequency':
+          key = def.frequency || 'No Frequency';
+          break;
+        case 'horizon':
+          key = def.horizon || 'No Horizon';
+          break;
+        case 'domain':
+          key = def.domain || 'No Domain';
+          break;
+        case 'subdomain':
+          key = def.subdomain || 'No Subdomain';
+          break;
+        default:
+          key = 'Other';
+      }
+      
+      if (!groups[key]) {
+        groups[key] = [];
+      }
+      groups[key].push(def);
+    });
+
+    // Sort groups so "No X" entries appear last
+    const sortedGroups: Record<string, ChallengeDefinition[]> = {};
+    const sortedKeys = Object.keys(groups).sort((a, b) => {
+      const aIsNo = a.startsWith('No ');
+      const bIsNo = b.startsWith('No ');
+      
+      if (aIsNo && !bIsNo) return 1;
+      if (!aIsNo && bIsNo) return -1;
+      return a.localeCompare(b);
+    });
+    
+    sortedKeys.forEach(key => {
+      sortedGroups[key] = groups[key];
+    });
+
+    return sortedGroups;
+  }, [definitions, groupBy]);
+
+  if (loading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex justify-center items-center h-64">
+          <div className="text-gray-500">Loading challenges...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded">
+          <p className="font-semibold">Error loading challenges</p>
+          <p className="text-sm">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <Breadcrumbs items={[{ label: 'Challenges', href: '/challenges' }]} />
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-gray-900">Challenges</h1>
+        <p className="mt-2 text-gray-600">
+          Available challenges and their configurations
+        </p>
+      </div>
+
+      <div className="mb-6 flex items-center justify-end gap-3">
+        <label htmlFor="groupBy" className="text-sm font-medium text-gray-700">
+          Group by:
+        </label>
+        <select
+          id="groupBy"
+          value={groupBy}
+          onChange={(e) => setGroupBy(e.target.value as GroupByOption)}
+          className="block rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
+        >
+          <option value="none">None</option>
+          <option value="frequency">Frequency</option>
+          <option value="horizon">Horizon</option>
+          <option value="domain">Domain</option>
+          <option value="subdomain">Subdomain</option>
+        </select>
+      </div>
+
+      <div className="space-y-8">
+        {Object.entries(groupedDefinitions).map(([groupName, groupDefs]) => (
+          <div key={groupName}>
+            {groupBy !== 'none' && (
+              <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+                {groupName}
+                <span className="ml-2 text-sm font-normal text-gray-500">
+                  ({groupDefs.length} {groupDefs.length === 1 ? 'challenge' : 'challenges'})
+                </span>
+              </h2>
+            )}
+            
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {groupDefs.map((definition) => (
+                <Link
+                  key={definition.id}
+                  href={`/challenges/${definition.id}`}
+                  className="bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden flex flex-col cursor-pointer"
+                >
+                  <div className="p-6 flex-1">
+                    <div className="flex items-start justify-between mb-3">
+                      <h2 className="text-xl font-semibold text-gray-900">
+                        {definition.name}
+                      </h2>
+                    </div>
+
+                    <p className="text-gray-600 text-sm mb-4">{definition.description}</p>
+
+                    <div className="space-y-2 text-sm">
+
+                      <div className="flex justify-between">
+                        <span className="text-gray-500">Frequency:</span>
+                        <span className="text-gray-900 font-medium">
+                          {definition.frequency}
+                        </span>
+                      </div>
+
+                      <div className="flex justify-between">
+                        <span className="text-gray-500">Horizon:</span>
+                        <span className="text-gray-900 font-medium">
+                          {definition.horizon}
+                        </span>
+                      </div>
+
+                      <div className="flex justify-between">
+                        <span className="text-gray-500">Context Length:</span>
+                        <span className="text-gray-900 font-medium">
+                          {definition.context_length}
+                        </span>
+                      </div>
+
+                      {definition.domain && (
+                        <div className="flex justify-between">
+                          <span className="text-gray-500">Domain:</span>
+                          <span className="text-gray-900 font-medium">
+                            {definition.domain}
+                          </span>
+                        </div>
+                      )}
+
+                      {definition.subdomain && (
+                        <div className="flex justify-between">
+                          <span className="text-gray-500">Subdomain:</span>
+                          <span className="text-gray-900 font-medium">
+                            {definition.subdomain}
+                          </span>
+                        </div>
+                      )}
+
+                      {(definition.next_registration_start || definition.next_registration_end) && (
+                        <div className="pt-2 mt-2 border-t border-gray-200">
+                          <div className="text-xs font-medium text-gray-700 mb-1">Next Registration:</div>
+                          {definition.next_registration_start && (
+                            <div className="text-xs text-gray-600">
+                              Opens: {new Date(definition.next_registration_start).toLocaleDateString('en-US', {
+                                month: 'short',
+                                day: 'numeric',
+                                hour: '2-digit',
+                                minute: '2-digit'
+                              })}
+                            </div>
+                          )}
+                          {definition.next_registration_end && (
+                            <div className="text-xs text-gray-600">
+                              Closes: {new Date(definition.next_registration_end).toLocaleDateString('en-US', {
+                                month: 'short',
+                                day: 'numeric',
+                                hour: '2-digit',
+                                minute: '2-digit'
+                              })}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="bg-gray-50 px-6 py-3 border-t border-gray-200">
+                    <span className="text-xs text-gray-500">ID: {definition.id}</span>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {definitions.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-gray-500">No challenges available</p>
+        </div>
+      )}
+    </div>
+  );
+}

src/app/globals.css

@@ -0,0 +1,31 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+  overflow-x: hidden;
+}
+
+html {
+  overflow-x: hidden;
+}

src/app/layout.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import Navigation from "@/src/components/Navigation";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "TS-Arena",
+  description: "Time Series Forecasting Arena - Browse challenges and visualize time series data",
+  // TODO: Change icon
+  icons: {
+    icon: '/file.svg',
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <Navigation />
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/models/[modelId]/page.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import Breadcrumbs from '@/src/components/Breadcrumbs';
+import ModelPerformanceCharts from '@/src/components/ModelPerformanceCharts';
+import ModelSeriesList from '@/src/components/ModelSeriesList';
+import { getModelRankings, ModelDetailRankings, getModelSeriesByDefinition, ModelSeriesByDefinition, getModelDetails, ModelDetails } from '@/src/services/modelService';
+
+export default function ModelDetailPage() {
+  const params = useParams();
+  const modelId = params.modelId as string;
+  
+  const [modelDetails, setModelDetails] = useState<ModelDetails | null>(null);
+  const [rankingsData, setRankingsData] = useState<ModelDetailRankings | null>(null);
+  const [seriesData, setSeriesData] = useState<ModelSeriesByDefinition | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!modelId) {
+      setLoading(false);
+      return;
+    }
+
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const [details, rankings, series] = await Promise.all([
+          getModelDetails(modelId),
+          getModelRankings(modelId),
+          getModelSeriesByDefinition(modelId)
+        ]);
+        setModelDetails(details);
+        setRankingsData(rankings);
+        setSeriesData(series);
+      } catch (error) {
+        console.error('Error fetching model data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [modelId]);
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-7xl mx-auto">
+        <Breadcrumbs 
+          items={[
+            { label: 'Rankings', href: '/' },
+            { label: `Model #${modelId}`, href: `/models/${modelId}` }
+          ]} 
+        />
+
+        <div className="bg-white rounded-lg shadow-md p-8 mb-6">
+          <h1 className="text-3xl font-bold text-gray-900 mb-6">Model Details</h1>
+          
+          {loading ? (
+            <div className="text-center">
+              <div className="text-lg text-gray-600">Loading model details...</div>
+            </div>
+          ) : modelDetails ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label className="block text-sm font-medium text-gray-500 mb-1">
+                  Model Name
+                </label>
+                <div className="text-lg text-gray-900">{modelDetails.name}</div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-500 mb-1">
+                  Model ID
+                </label>
+                <div className="text-lg text-gray-900 font-mono">{modelDetails.readable_id}</div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-500 mb-1">
+                  Model Family
+                </label>
+                <div className="text-lg text-gray-900">{modelDetails.model_family}</div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-500 mb-1">
+                  Model Size
+                </label>
+                <div className="text-lg text-gray-900">{modelDetails.model_size.toLocaleString()} parameters</div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-500 mb-1">
+                  Hosting
+                </label>
+                <div className="text-lg text-gray-900">{modelDetails.hosting}</div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-500 mb-1">
+                  Architecture
+                </label>
+                <div className="text-lg text-gray-900">{modelDetails.architecture}</div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-500 mb-1">
+                  Pretraining Data
+                </label>
+                <div className="text-lg text-gray-900">{modelDetails.pretraining_data}</div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-500 mb-1">
+                  Publishing Date
+                </label>
+                <div className="text-lg text-gray-900">
+                  {new Date(modelDetails.publishing_date).toLocaleDateString()}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="text-center">
+              <div className="text-lg text-gray-600">Failed to load model details.</div>
+            </div>
+          )}
+        </div>
+
+        <div className="mb-6">
+          <h2 className="text-2xl font-semibold text-gray-900 mb-4">Performance by Challenge</h2>
+          {loading ? (
+            <div className="bg-white rounded-lg shadow-md p-8 text-center">
+              <div className="text-lg text-gray-600">Loading rankings...</div>
+            </div>
+          ) : rankingsData ? (
+            <ModelPerformanceCharts definitionRankings={rankingsData.definition_rankings} />
+          ) : (
+            <div className="bg-white rounded-lg shadow-md p-8 text-center">
+              <div className="text-lg text-gray-600">Failed to load rankings data.</div>
+            </div>
+          )}
+        </div>
+
+        <div>
+          {loading ? (
+            <div className="bg-white rounded-lg shadow-md p-8 text-center">
+              <div className="text-lg text-gray-600">Loading series data...</div>
+            </div>
+          ) : seriesData ? (
+            <ModelSeriesList definitions={seriesData.definitions} modelId={modelId} />
+          ) : (
+            <div className="bg-white rounded-lg shadow-md p-8 text-center">
+              <div className="text-lg text-gray-600">Failed to load series data.</div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,272 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Info } from 'lucide-react';
+import Breadcrumbs from '@/src/components/Breadcrumbs';
+import RankingsTable from '@/src/components/RankingsTable';
+import TimeSeriesChart from '@/src/components/TimeSeriesChart';
+import { getFilteredRankings, getRankingFilters, ModelRanking, FilterOptions, ChallengeDefinition } from '@/src/services/modelService';
+import { getDefinitionRounds } from '@/src/services/definitionService';
+
+const DEFINITION_ID = 226;
+const SERIES_ID = 1371;
+
+interface RankingsData {
+  overall: ModelRanking[];
+  byDefinition: Record<number, ModelRanking[]>;
+  byFrequencyHorizon: Record<string, ModelRanking[]>;
+}
+
+export default function Home() {
+  const [filterOptions, setFilterOptions] = useState<FilterOptions>({
+    definitions: [],
+    frequency_horizons: [],
+  });
+  const [rankingsData, setRankingsData] = useState<RankingsData>({
+    overall: [],
+    byDefinition: {},
+    byFrequencyHorizon: {},
+  });
+  const [selectedCalculationDate, setSelectedCalculationDate] = useState<string>(
+    new Date().toISOString().split('T')[0]
+  );
+  const [loading, setLoading] = useState(true);
+  const [isMounted, setIsMounted] = useState(false);
+  const [oldestActiveRound, setOldestActiveRound] = useState<any>(null);
+  const [roundLoading, setRoundLoading] = useState(true);
+
+  // Format frequency_horizon for display (e.g., "00:15:00::1 day" -> "15min / 1 day")
+  const formatFrequencyHorizon = (fh: string) => {
+    const parts = fh.split('::');
+    if (parts.length !== 2) return fh;
+    
+    const [freq, horizon] = parts;
+    const freqMatch = freq.match(/(\d+):(\d+):(\d+)/);
+    let freqStr = freq;
+    if (freqMatch) {
+      const hours = parseInt(freqMatch[1]);
+      const mins = parseInt(freqMatch[2]);
+      if (hours > 0) {
+        freqStr = `${hours}h`;
+      } else if (mins > 0) {
+        freqStr = `${mins}min`;
+      }
+    }
+    
+    return `${freqStr} / ${horizon}`;
+  };
+
+  useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+
+  // Fetch oldest active round for definition 226
+  useEffect(() => {
+    const fetchOldestActiveRound = async () => {
+      try {
+        setRoundLoading(true);
+        const response = await getDefinitionRounds(DEFINITION_ID, { status: 'active' });
+        
+        if (response.items && response.items.length > 0) {
+          // Sort by start_time to get the oldest
+          const sorted = [...response.items].sort((a, b) => 
+            new Date(a.start_time).getTime() - new Date(b.start_time).getTime()
+          );
+          setOldestActiveRound(sorted[0]);
+        }
+      } catch (error) {
+        console.error('Error fetching active rounds:', error);
+      } finally {
+        setRoundLoading(false);
+      }
+    };
+
+    fetchOldestActiveRound();
+  }, []);
+
+  useEffect(() => {
+    if (!isMounted) return;
+
+    const fetchAllData = async () => {
+      try {
+        setLoading(true);
+        
+        // First fetch filter options
+        const options = await getRankingFilters();
+        setFilterOptions(options);
+        
+        // Build base filters
+        const baseFilters: any = { limit: 100 };
+        if (selectedCalculationDate) {
+          baseFilters.calculation_date = selectedCalculationDate;
+        }
+        
+        // Fetch overall rankings (no definition/frequency filters)
+        const overallResponse = await getFilteredRankings(baseFilters);
+        
+        // Fetch rankings for each definition (limit concurrency)
+        const byDefinitionPromises = options.definitions.map(async (def: ChallengeDefinition) => {
+          const response = await getFilteredRankings({ 
+            ...baseFilters,
+            definition_id: def.id,
+          });
+          return { id: def.id, rankings: response.rankings };
+        });
+        
+        // Fetch rankings for each frequency/horizon (limit concurrency)
+        const byFrequencyHorizonPromises = options.frequency_horizons.map(async (fh: string) => {
+          const response = await getFilteredRankings({ 
+            ...baseFilters,
+            frequency_horizon: fh,
+          });
+          return { fh, rankings: response.rankings };
+        });
+        
+        // Process in batches to avoid overwhelming the browser
+        const definitionResults = await Promise.all(byDefinitionPromises);
+        const frequencyHorizonResults = await Promise.all(byFrequencyHorizonPromises);
+        
+        const byDefinition: Record<number, ModelRanking[]> = {};
+        definitionResults.forEach(({ id, rankings }) => {
+          byDefinition[id] = rankings;
+        });
+        
+        const byFrequencyHorizon: Record<string, ModelRanking[]> = {};
+        frequencyHorizonResults.forEach(({ fh, rankings }) => {
+          byFrequencyHorizon[fh] = rankings;
+        });
+        
+        setRankingsData({
+          overall: overallResponse.rankings,
+          byDefinition,
+          byFrequencyHorizon,
+        });
+      } catch (error) {
+        console.error('Error fetching rankings:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchAllData();
+  }, [selectedCalculationDate, isMounted]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 p-8">
+        <main className="max-w-7xl mx-auto">
+          <Breadcrumbs items={[{ label: 'Rankings', href: '/' }]} />
+          <h1 className="text-3xl font-bold text-gray-900 mb-8">
+            TS-Arena Model Rankings
+          </h1>
+          <div className="text-center py-12">
+            <div className="text-lg text-gray-600">Loading rankings...</div>
+          </div>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <main className="max-w-7xl mx-auto">
+        <Breadcrumbs items={[{ label: 'Rankings', href: '/' }]} />
+        <div className="flex items-center justify-between mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">
+            TS-Arena Model Rankings
+          </h1>
+        </div>
+
+        {/* Time Series Chart Section */}
+        {roundLoading ? (
+          <div className="bg-white rounded-lg shadow-md p-8 mb-8">
+            <div className="flex items-center justify-center">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+              <span className="ml-3 text-gray-600">Loading time series data...</span>
+            </div>
+          </div>
+        ) : oldestActiveRound ? (
+          <div className="mb-8">
+            <TimeSeriesChart
+              challengeId={oldestActiveRound.id}
+              challengeName={oldestActiveRound.name || oldestActiveRound.round_name}
+              challengeDescription={oldestActiveRound.description}
+              startDate={oldestActiveRound.start_time}
+              endDate={oldestActiveRound.end_time}
+              frequency={oldestActiveRound.frequency}
+              seriesId={SERIES_ID}
+              on_title_page={true}
+              definitionId={DEFINITION_ID}
+            />
+          </div>
+        ) : (
+          <div className="bg-white rounded-lg shadow-md p-8 text-center text-gray-500 mb-8">
+            <p>No active rounds available at the moment.</p>
+          </div>
+        )}
+
+        {/* Overall Rankings (Full Table) */}
+        <div className="mb-8">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-2xl font-semibold text-gray-900">Overall Rankings</h2>
+            
+            {/* Calculation Date Filter */}
+            <div className="flex items-center gap-2">
+              <label className="text-xs text-gray-500">Calculation Date</label>
+              <div className="relative group">
+                <Info className="w-4 h-4 text-gray-400 cursor-help" />
+                <div className="absolute right-0 top-6 w-64 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
+                  <div className="font-medium mb-1">Calculation Date</div>
+                  <div className="text-gray-200">
+                    Sets the cutoff date for model evaluation. Use this to view rankings as they appeared on a specific date. All models are ranked based on their performance up to this date.
+                  </div>
+                </div>
+              </div>
+              <input
+                type="date"
+                value={selectedCalculationDate}
+                onChange={(e) => setSelectedCalculationDate(e.target.value)}
+                className="px-2 py-1 text-xs bg-white border border-gray-200 rounded text-gray-600 hover:border-gray-300 focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400"
+              />
+            </div>
+          </div>
+          <RankingsTable rankings={rankingsData.overall} />
+        </div>
+
+        {/* Rankings by Challenge Definition */}
+        <div className="mb-8">
+          <h2 className="text-2xl font-semibold text-gray-900 mb-4">Rankings by Challenge</h2>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {filterOptions.definitions.map((def) => (
+              <RankingsTable
+                key={def.id}
+                rankings={rankingsData.byDefinition[def.id] || []}
+                compact
+                title={def.name}
+                limit={10}
+                definitionId={def.id}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Rankings by Frequency/Horizon */}
+        <div className="mb-8">
+          <h2 className="text-2xl font-semibold text-gray-900 mb-4">Rankings by Frequency / Horizon</h2>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {filterOptions.frequency_horizons.map((fh) => (
+              <RankingsTable
+                key={fh}
+                rankings={rankingsData.byFrequencyHorizon[fh] || []}
+                compact
+                title={formatFrequencyHorizon(fh)}
+                limit={10}
+              />
+            ))}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

src/components/Breadcrumbs.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { ChevronRight } from 'lucide-react';
+
+interface BreadcrumbItem {
+  label: string;
+  href: string;
+}
+
+interface BreadcrumbsProps {
+  items?: BreadcrumbItem[];
+}
+
+export default function Breadcrumbs({ items }: BreadcrumbsProps) {
+  const pathname = usePathname();
+
+  // Generate breadcrumbs from path if not provided
+  const breadcrumbs = items || generateBreadcrumbsFromPath(pathname);
+
+  if (breadcrumbs.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav className="flex items-center space-x-2 text-sm text-gray-600 mb-6">
+      <Link
+        href="/"
+        className="hover:text-gray-900 transition-colors"
+      >
+        Home
+      </Link>
+      {breadcrumbs.map((crumb, index) => (
+        <div key={crumb.href} className="flex items-center space-x-2">
+          <ChevronRight className="h-4 w-4 text-gray-400" />
+          {index === breadcrumbs.length - 1 ? (
+            <span className="font-medium text-gray-900">{crumb.label}</span>
+          ) : (
+            <Link
+              href={crumb.href}
+              className="hover:text-gray-900 transition-colors"
+            >
+              {crumb.label}
+            </Link>
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+}
+
+function generateBreadcrumbsFromPath(pathname: string): BreadcrumbItem[] {
+  const paths = pathname.split('/').filter(Boolean);
+  const breadcrumbs: BreadcrumbItem[] = [];
+
+  let currentPath = '';
+  paths.forEach((path, index) => {
+    currentPath += `/${path}`;
+    
+    // Create readable labels
+    let label = path
+      .split('-')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+
+    // Special handling for specific routes
+    if (path === 'challenges') {
+      label = 'Challenges';
+    } else if (path === 'add-model') {
+      label = 'Add Model';
+    } else if (!isNaN(Number(path))) {
+      // If it's a number (ID), keep it as is
+      label = `#${path}`;
+    }
+
+    breadcrumbs.push({
+      label,
+      href: currentPath,
+    });
+  });
+
+  return breadcrumbs;
+}

src/components/ChallengeList.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import type { Challenge } from '@/src/types/challenge';
+
+interface ChallengeListProps {
+  challenges: Challenge[];
+  selectedChallengeId?: number;
+  onSelectChallenge: (challengeId: number) => void;
+}
+
+export default function ChallengeList({ 
+  challenges, 
+  selectedChallengeId, 
+  onSelectChallenge
+}: ChallengeListProps) {
+
+  return (
+    <div className="space-y-4">
+      {/* Challenge List */}
+      <div className="grid gap-3">
+        {challenges.length === 0 ? (
+          <div className="text-center py-8 text-gray-500">
+            No challenges found matching your filters.
+          </div>
+        ) : (
+          challenges.map((challenge) => (
+            <button
+              key={challenge.challenge_id}
+              onClick={() => onSelectChallenge(challenge.challenge_id)}
+              className={`w-full text-left p-4 border rounded-lg transition-all ${
+                selectedChallengeId === challenge.challenge_id
+                  ? 'border-blue-500 bg-blue-50 shadow-md'
+                  : 'border-gray-200 hover:border-blue-300 hover:bg-gray-50'
+              }`}
+            >
+              <div className="flex justify-between items-start mb-2">
+                <h3 className="font-semibold text-lg">{challenge.name || `Challenge ${challenge.challenge_id}`}</h3>
+                <span
+                  className={`px-3 py-1 rounded-full text-xs font-medium ${
+                    challenge.status === 'active'
+                      ? 'bg-green-100 text-green-800'
+                      : 'bg-gray-100 text-gray-800'
+                  }`}
+                >
+                  {challenge.status}
+                </span>
+              </div>
+              <div className="text-sm text-gray-600 space-y-1">
+                <p>ID: {challenge.challenge_id}</p>
+                {challenge.description && <p className="italic">{challenge.description}</p>}
+                <div className="flex gap-4 text-xs text-gray-500 mt-2">
+                  {challenge.start_time && (
+                    <span>Start: {new Date(challenge.start_time).toLocaleDateString()}</span>
+                  )}
+                  {challenge.end_time && (
+                    <span>End: {new Date(challenge.end_time).toLocaleDateString()}</span>
+                  )}
+                  <span>Series: {challenge.n_time_series}</span>
+                </div>
+              </div>
+            </button>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

src/components/FilterPanel.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { Listbox, ListboxButton, Label, ListboxOption, ListboxOptions } from '@headlessui/react';
+
+export interface RoundsFilterOptions {
+  domains: string[];
+  categories: string[];
+  subcategories: string[];
+  frequencies: string[];
+  horizons: string[];
+}
+
+interface FilterPanelProps {
+  filterOptions: RoundsFilterOptions;
+  selectedDomains: string[];
+  selectedCategories: string[];
+  selectedFrequencies: string[];
+  selectedHorizons: string[];
+  status?: 'active' | 'completed' | 'all';
+  endDateFrom?: string;
+  endDateTo?: string;
+  searchTerm?: string;
+  onDomainsChange: (domains: string[]) => void;
+  onCategoriesChange: (categories: string[]) => void;
+  onFrequenciesChange: (frequencies: string[]) => void;
+  onHorizonsChange: (horizons: string[]) => void;
+  onStatusChange: (status: 'active' | 'completed' | 'all') => void;
+  onEndDateFromChange: (date: string) => void;
+  onEndDateToChange: (date: string) => void;
+  onSearchTermChange: (searchTerm: string) => void;
+  onClearFilters: () => void;
+}
+
+interface MultiSelectProps {
+  label: string;
+  options: string[];
+  selected: string[];
+  onChange: (values: string[]) => void;
+}
+
+function MultiSelect({ label, options, selected, onChange }: MultiSelectProps) {
+  const handleRemove = (value: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange(selected.filter((v) => v !== value));
+  };
+
+  const handleSelect = (values: string[]) => {
+    onChange(values);
+  };
+
+  return (
+    <Listbox value={selected} onChange={handleSelect} multiple>
+      <div className="relative">
+        <Label className="block text-sm font-medium text-gray-700 mb-2">
+          {label}
+        </Label>
+        
+        <ListboxButton className="relative w-full min-h-[42px] p-2 text-left bg-white border border-gray-300 rounded-md cursor-pointer hover:border-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
+          {selected.length > 0 ? (
+            <div className="flex flex-wrap gap-1">
+              {selected.map((item) => (
+                <span
+                  key={item}
+                  className="inline-flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-md border border-blue-200"
+                >
+                  {item}
+                  <span
+                    className="hover:text-blue-900 cursor-pointer"
+                    onClick={(e) => handleRemove(item, e)}
+                  >
+                    ×
+                  </span>
+                </span>
+              ))}
+            </div>
+          ) : (
+            <span className="text-gray-400 text-sm">Select {label.toLowerCase()}...</span>
+          )}
+        </ListboxButton>
+
+        <ListboxOptions className="absolute z-20 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto focus:outline-none transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0">
+          {options.map((option) => (
+            <ListboxOption
+              key={option}
+              value={option}
+              className="flex items-center px-3 py-2 cursor-pointer data-[focus]:bg-blue-50 data-[selected]:bg-blue-100 data-[selected]:font-medium"
+            >
+              {option}
+            </ListboxOption>
+          ))}
+        </ListboxOptions>
+      </div>
+    </Listbox>
+  );
+}
+
+export default function FilterPanel({
+  filterOptions,
+  selectedDomains,
+  selectedCategories,
+  selectedFrequencies,
+  selectedHorizons,
+  status,
+  endDateFrom,
+  endDateTo,
+  searchTerm,
+  onDomainsChange,
+  onCategoriesChange,
+  onFrequenciesChange,
+  onHorizonsChange,
+  onStatusChange,
+  onEndDateFromChange,
+  onEndDateToChange,
+  onSearchTermChange,
+  onClearFilters,
+}: FilterPanelProps) {
+  return (
+    <div className="bg-white p-6 rounded-lg shadow-md mb-6">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-semibold">Filters</h2>
+        <button
+          onClick={onClearFilters}
+          className="px-4 py-2 text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-md transition-colors"
+        >
+          Clear All
+        </button>
+      </div>
+      
+      <div className="space-y-4">
+        {/* Status and Search in same row */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-2">
+              Status
+            </label>
+            <select
+              id="status"
+              value={status || 'all'}
+              onChange={(e) => onStatusChange(e.target.value as 'active' | 'completed' | 'all')}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+            >
+              <option value="all">All</option>
+              <option value="active">Active</option>
+              <option value="completed">Completed</option>
+            </select>
+          </div>
+          
+          <div>
+            <label htmlFor="searchTerm" className="block text-sm font-medium text-gray-700 mb-2">
+              Search
+            </label>
+            <input
+              id="searchTerm"
+              type="text"
+              placeholder="Search by name, ID, or description..."
+              value={searchTerm || ''}
+              onChange={(e) => onSearchTermChange(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        {/* Multi-select filters */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <MultiSelect
+            label="Domain"
+            options={filterOptions.domains}
+            selected={selectedDomains}
+            onChange={onDomainsChange}
+          />
+
+          <MultiSelect
+            label="Category"
+            options={filterOptions.categories}
+            selected={selectedCategories}
+            onChange={onCategoriesChange}
+          />
+
+          <MultiSelect
+            label="Frequency"
+            options={filterOptions.frequencies}
+            selected={selectedFrequencies}
+            onChange={onFrequenciesChange}
+          />
+
+          <MultiSelect
+            label="Horizon"
+            options={filterOptions.horizons}
+            selected={selectedHorizons}
+            onChange={onHorizonsChange}
+          />
+        </div>
+
+        {/* Date Range Filters */}
+        <div>
+          <h3 className="text-sm font-medium text-gray-700 mb-3">End Date Range</h3>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label htmlFor="endDateFrom" className="block text-xs text-gray-600 mb-1">
+                From
+              </label>
+              <input
+                id="endDateFrom"
+                type="date"
+                value={endDateFrom || ''}
+                onChange={(e) => onEndDateFromChange(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+              />
+            </div>
+            <div>
+              <label htmlFor="endDateTo" className="block text-xs text-gray-600 mb-1">
+                To
+              </label>
+              <input
+                id="endDateTo"
+                type="date"
+                value={endDateTo || ''}
+                onChange={(e) => onEndDateToChange(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ModelPerformanceCharts.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import dynamic from 'next/dynamic';
+import { DefinitionRankingWithHistory } from '@/src/services/modelService';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+
+const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });
+
+interface ModelPerformanceChartsProps {
+  definitionRankings: DefinitionRankingWithHistory[];
+}
+
+export default function ModelPerformanceCharts({ definitionRankings }: ModelPerformanceChartsProps) {
+  const [expandedDefinitions, setExpandedDefinitions] = useState<Record<number, boolean>>({});
+
+  const toggleDefinition = (definitionId: number) => {
+    setExpandedDefinitions(prev => ({
+      ...prev,
+      [definitionId]: !prev[definitionId]
+    }));
+  };
+
+  if (!definitionRankings || definitionRankings.length === 0) {
+    return (
+      <div className="bg-white rounded-lg shadow-md p-8 text-center text-gray-500">
+        No ranking data available for this model.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {definitionRankings.map((definition) => {
+        const isExpanded = expandedDefinitions[definition.definition_id];
+        const dailyRankings = definition.daily_rankings || [];
+        
+        // Sort rankings by date
+        const sortedRankings = [...dailyRankings].sort((a, b) => 
+          new Date(a.calculation_date).getTime() - new Date(b.calculation_date).getTime()
+        );
+
+        // Prepare data for Plotly
+        const dates = sortedRankings.map(r => r.calculation_date);
+        const eloScores = sortedRankings.map(r => r.elo_score);
+        const eloUpper = sortedRankings.map(r => r.elo_ci_upper);
+        const eloLower = sortedRankings.map(r => r.elo_ci_lower);
+        const ranks = sortedRankings.map(r => r.rank_position);
+
+        return (
+          <div key={definition.definition_id} className="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
+            <button
+              onClick={() => toggleDefinition(definition.definition_id)}
+              className="w-full px-6 py-4 flex items-center justify-between bg-gray-50 hover:bg-gray-100 transition-colors"
+            >
+              <div className="flex items-center space-x-3">
+                {isExpanded ? (
+                  <ChevronDown className="h-5 w-5 text-gray-500" />
+                ) : (
+                  <ChevronRight className="h-5 w-5 text-gray-500" />
+                )}
+                <h3 className="text-lg font-semibold text-gray-900">
+                  {definition.definition_name}
+                </h3>
+              </div>
+              <div className="flex items-center space-x-4">
+                {sortedRankings.length > 0 && (
+                  <>
+                    <span className="text-blue-600 text-base font-semibold">ELO: {sortedRankings[sortedRankings.length - 1].elo_score.toFixed(1)}</span>
+                    <span className="text-gray-700 text-base font-semibold">Rank: #{sortedRankings[sortedRankings.length - 1].rank_position}</span>
+                  </>
+                )}
+                <Link
+                  href={`/challenges/${definition.definition_id}`}
+                  onClick={(e) => e.stopPropagation()}
+                  className="text-sm text-blue-600 hover:text-blue-800 hover:underline"
+                >
+                  View Challenge →
+                </Link>
+              </div>
+            </button>
+
+            {isExpanded && sortedRankings.length > 0 && (
+              <div className="p-6">
+                <Plot
+                  data={[
+                    {
+                      x: dates,
+                      y: eloLower,
+                      fill: 'none',
+                      line: { color: 'transparent' },
+                      name: '95% CI Lower',
+                      type: 'scatter',
+                      mode: 'lines',
+                      showlegend: false,
+                      hoverinfo: 'skip',
+                    },
+                    {
+                      x: dates,
+                      y: eloUpper,
+                      fill: 'tonexty',
+                      fillcolor: 'rgba(59, 130, 246, 0.2)',
+                      line: { color: 'transparent' },
+                      name: '95% CI Upper',
+                      type: 'scatter',
+                      mode: 'lines',
+                      showlegend: false,
+                      hoverinfo: 'skip',
+                    },
+                    {
+                      x: dates,
+                      y: eloScores,
+                      name: 'ELO Score',
+                      type: 'scatter',
+                      mode: 'lines+markers',
+                      line: { color: 'rgb(59, 130, 246)', width: 2 },
+                      marker: { color: 'rgb(59, 130, 246)', size: 6 },
+                      customdata: ranks,
+                      hovertemplate: 
+                        '<b>Date:</b> %{x}<br>' +
+                        '<b>ELO Score:</b> %{y:.1f}<br>' +
+                        '<b>Rank:</b> #%{customdata}<br>' +
+                        '<extra></extra>',
+                    },
+                  ] as any}
+                  layout={{
+                    title: 'ELO Score Over Time',
+                    xaxis: {
+                      title: 'Date',
+                      gridcolor: '#e5e7eb',
+                      showgrid: true,
+                    },
+                    yaxis: {
+                      title: 'ELO Score',
+                      gridcolor: '#e5e7eb',
+                      showgrid: true,
+                      range: [0, Math.max(...eloUpper, ...eloScores, ...eloLower) * 1.05],
+                    },
+                    hovermode: 'closest',
+                    showlegend: true,
+                    legend: {
+                      x: 0,
+                      y: 1,
+                      bgcolor: 'rgba(255, 255, 255, 0.8)',
+                    },
+                    margin: { l: 60, r: 40, t: 50, b: 60 },
+                    paper_bgcolor: 'white',
+                    plot_bgcolor: 'white',
+                  } as any}
+                  config={{
+                    responsive: true,
+                    displayModeBar: true,
+                    displaylogo: false,
+                    modeBarButtonsToRemove: ['lasso2d', 'select2d'],
+                  }}
+                  style={{ width: '100%', height: '400px' }}
+                />
+
+                {/* Current stats */}
+                <div className="mt-4 grid grid-cols-3 gap-4 text-sm">
+                  <div className="bg-gray-50 p-3 rounded">
+                    <div className="text-gray-500 text-xs">Current Rank</div>
+                    <div className="text-lg font-semibold text-gray-900">
+                      #{sortedRankings[sortedRankings.length - 1].rank_position}
+                    </div>
+                  </div>
+                  <div className="bg-gray-50 p-3 rounded">
+                    <div className="text-gray-500 text-xs">Current ELO</div>
+                    <div className="text-lg font-semibold text-gray-900">
+                      {sortedRankings[sortedRankings.length - 1].elo_score.toFixed(1)}
+                    </div>
+                  </div>
+                  <div className="bg-gray-50 p-3 rounded">
+                    <div className="text-gray-500 text-xs">95% CI</div>
+                    <div className="text-lg font-semibold text-gray-900">
+                      [{sortedRankings[sortedRankings.length - 1].elo_ci_lower.toFixed(0)}, {sortedRankings[sortedRankings.length - 1].elo_ci_upper.toFixed(0)}]
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {isExpanded && sortedRankings.length === 0 && (
+              <div className="p-6 text-center text-gray-500">
+                No ranking history available for this challenge.
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+