# Jury UI Redesign — Multi-Jury Member Experience

## 1. Overview

The Jury UI redesign transforms the jury member experience from a single-stage, single-jury model to a **multi-jury, cross-round, document-aware** system. Jury members can now belong to multiple jury groups (Jury 1, Jury 2, award juries), see documents from multiple submission windows, and manage evaluations across different rounds seamlessly.

### Design Principles

1. **Multi-jury awareness** — Jurors can be on multiple juries; UI must clearly separate contexts
2. **Cross-round document visibility** — Jury 2 sees Round 1 + Round 2 docs; Jury 3 sees all
3. **Deadline-driven** — Prominent countdowns, overdue warnings, grace period indicators
4. **Mobile-responsive live voting** — Live finals must work on phones/tablets
5. **Zero cognitive load** — Clear CTAs, guided workflows, no guessing what to do next
6. **Accessibility-first** — WCAG AA compliance for scoring forms, keyboard nav, screen readers

### Key User Journeys

| Journey | Pages Involved | Frequency |
|---------|---------------|-----------|
| **Onboarding** | `/jury/onboarding/[groupId]` | Once per jury group |
| **Daily evaluation** | Dashboard → Assignments → Evaluate | Daily during window |
| **Live finals voting** | Dashboard → Live voting interface | Once (ceremony day) |
| **Winner confirmation** | Dashboard → Confirmation review | Once (post-finals) |
| **Award voting** | Dashboard → Award evaluation | Once per award |

---

## 2. Current Jury UI Audit

### Existing Pages (in `src/app/(jury)/`)

| File | Purpose | Issues/Limitations |
|------|---------|-------------------|
| `jury/page.tsx` | Jury dashboard | Single-stage view, no multi-jury support |
| `jury/stages/page.tsx` | Stage list | Uses old Stage/Track terminology |
| `jury/stages/[stageId]/assignments/page.tsx` | Assignment list | No jury group filtering, no cross-round docs |
| `jury/stages/[stageId]/projects/[projectId]/page.tsx` | Project detail | Single submission window only |
| `jury/stages/[stageId]/projects/[projectId]/evaluate/page.tsx` | Evaluation form | No multi-window doc access |
| `jury/stages/[stageId]/projects/[projectId]/evaluation/page.tsx` | Evaluation results | Unclear separation from evaluate |
| `jury/stages/[stageId]/live/page.tsx` | Live voting | Exists but needs enhancement |
| `jury/stages/[stageId]/compare/page.tsx` | Project comparison | Useful but no multi-doc support |
| `jury/awards/page.tsx` | Awards list | Basic list, no voting interface |
| `jury/awards/[id]/page.tsx` | Award detail | Basic detail, no evaluation form |
| `jury/learning/page.tsx` | Learning resources | Good — preserve as-is |

### What's Missing

| Missing Feature | Impact |
|----------------|--------|
| **Multi-jury dashboard** | Jurors on Jury 1 + Jury 2 have no way to switch context |
| **Jury group switcher** | All assignments shown together — confusing |
| **Cross-round document viewer** | Jury 2 can't see Round 1 + Round 2 docs side-by-side |
| **Onboarding flow** | No expertise selection, COI pre-declaration, preferences |
| **Grace period indicators** | Jurors don't know if they have extended deadline |
| **Winner confirmation UI** | No digital signature interface |
| **Award evaluation form** | Award voting is separate from main evaluation |
| **Deadline countdown** | No prominent timer showing time remaining |
| **Next project CTA** | No "Continue Next Evaluation" quick action |
| **Assignment filters** | Can't filter by status (pending/draft/done), category |

---

## 3. Jury Dashboard — Landing Page

### Purpose

The jury dashboard is the **mission control** for all jury activities. It shows active jury groups, pending work, deadlines, and quick actions.

### Route

`/jury/dashboard`

### Data Requirements

```typescript
// tRPC query
const { data: dashboardData } = trpc.jury.getDashboard.useQuery();

type DashboardData = {
  juryGroups: {
    id: string;
    name: string;              // "Jury 1", "Jury 2", "Innovation Award Jury"
    description: string;
    linkedRounds: {
      id: string;
      name: string;            // "Round 3: Semi-finalist Selection"
      status: RoundStatus;
      windowCloseAt: Date | null;
      daysRemaining: number | null;
    }[];
    stats: {
      totalAssignments: number;
      completed: number;
      inDraft: number;
      pending: number;
      overdue: number;
    };
    nextAction: {
      type: "continue_evaluation" | "start_live_voting" | "confirm_winners" | null;
      projectId?: string;
      roundId?: string;
      url: string;
    } | null;
  }[];

  upcomingDeadlines: {
    roundId: string;
    roundName: string;
    juryGroupName: string;
    deadline: Date;
    daysRemaining: number;
    isGracePeriod: boolean;
  }[];

  recentActivity: {
    timestamp: Date;
    type: "evaluation_submitted" | "live_vote_cast" | "coi_declared" | "confirmation_approved";
    projectTitle: string;
    roundName: string;
  }[];
};
```

### ASCII Mockup — Multi-Jury Dashboard

```
┌───────────────────────────────────────────────────────────────────────────┐
│  Jury Dashboard — Welcome, Dr. Alice Martin                               │
├───────────────────────────────────────────────────────────────────────────┤
│                                                                            │
│  🔔 Upcoming Deadlines                                                     │
│  ┌────────────────────────────────────────────────────────────────────┐   │
│  │ ⏱ Jury 1 — Semi-finalist Selection │ April 30 │ ⚠️ 3 days left    │   │
│  │ ⏱ Innovation Award Voting            │ May 15   │ 18 days left     │   │
│  └────────────────────────────────────────────────────────────────────┘   │
│                                                                            │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│                                                                            │
│  Your Jury Groups                                                          │
│                                                                            │
│  ┌──────────────────────────────────────────────────────────────────┐     │
│  │  Jury 1 — Semi-finalist Selection                          ACTIVE│     │
│  │  ──────────────────────────────────────────────────────────────  │     │
│  │  Round 3: Jury 1 Evaluation                                      │     │
│  │  ⏱ Closes April 30 (3 days remaining)                           │     │
│  │                                                                   │     │
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐        │     │
│  │  │    20     │ │    12     │ │     3     │ │     5     │        │     │
│  │  │   Total   │ │ Complete  │ │  In Draft │ │  Pending  │        │     │
│  │  └───────────┘ └───────────┘ └───────────┘ └───────────┘        │     │
│  │                                                                   │     │
│  │  Progress: ████████████████░░░░ 60% (12/20 complete)            │     │
│  │                                                                   │     │
│  │  [ Continue Next Evaluation → ]        [ View All Assignments ]  │     │
│  └──────────────────────────────────────────────────────────────────┘     │
│                                                                            │
│  ┌──────────────────────────────────────────────────────────────────┐     │
│  │  Innovation Award Jury                                      DRAFT│     │
│  │  ──────────────────────────────────────────────────────────────  │     │
│  │  Innovation Award Voting                                          │     │
│  │  ⏱ Opens May 1 (not yet started)                                │     │
│  │                                                                   │     │
│  │  Awaiting assignment                                              │     │
│  │                                                                   │     │
│  │  [ View Details ]                                                 │     │
│  └──────────────────────────────────────────────────────────────────┘     │
│                                                                            │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│                                                                            │
│  Recent Activity                                                           │
│  ┌────────────────────────────────────────────────────────────────────┐   │
│  │ ✅ Evaluation submitted — "OceanClean AI" (Jury 1)    2 hours ago │   │
│  │ ✅ Evaluation submitted — "DeepReef Monitor" (Jury 1) 1 day ago   │   │
│  │ 🔒 COI declared — "WaveEnergy Solutions" (Jury 1)     3 days ago  │   │
│  └────────────────────────────────────────────────────────────────────┘   │
│                                                                            │
└───────────────────────────────────────────────────────────────────────────┘
```

### Key Elements

1. **Deadline banner** — Sorted by urgency, red for <5 days, orange for <10 days
2. **Jury group cards** — One card per jury group the user belongs to
3. **Progress stats** — Total, completed, in-draft, pending (with visual progress bar)
4. **Next action CTA** — "Continue Next Evaluation" jumps to first pending project
5. **Grace period indicator** — Shows if juror has extended deadline
6. **Recent activity feed** — Last 5-10 actions (evaluations, COI, live votes)

### Interactions

| Action | Behavior |
|--------|----------|
| Click "Continue Next Evaluation" | Navigate to first PENDING assignment's evaluation page |
| Click "View All Assignments" | Navigate to `/jury/groups/[groupId]/assignments` |
| Click jury group card header | Expand/collapse card (if multiple groups) |
| Click deadline item | Navigate to associated round's assignment page |

---

## 4. Jury Group Context — Switcher & Breadcrumbs

When a juror is on multiple juries, the UI must clearly show which jury context they're in.

### Jury Group Switcher (Global Header)

```
┌───────────────────────────────────────────────────────────────────┐
│  [MOPC Logo]  │  Jury: [ Jury 1 ▼ ]  │  🔔 3  │  Dr. Martin ▼   │
└───────────────────────────────────────────────────────────────────┘
                        ↓ (dropdown)
                ┌─────────────────────────┐
                │ ● Jury 1 (5 pending)    │
                │ ○ Innovation Award Jury │
                │ ─────────────────────── │
                │ Switch Jury Group       │
                └─────────────────────────┘
```

### Breadcrumbs with Jury Context

```
Home > Jury 1 > Assignments > OceanClean AI > Evaluate

Home > Innovation Award Jury > Award Voting > Innovation Award
```

---

## 5. Onboarding Flow — First-Time Setup

When a juror is added to a new jury group, they must complete onboarding before evaluating.

### Route

`/jury/onboarding/[juryGroupId]`

### Onboarding Steps

```
Step 1: Welcome
Step 2: Your Expertise & Preferences
Step 3: Conflict of Interest Declaration
Step 4: Confirmation
```

### Step 1: Welcome

```
┌──────────────────────────────────────────────────────────────────┐
│  Welcome to Jury 1 — Semi-finalist Selection                     │
│                                                                  │
│  You've been selected to evaluate projects for the               │
│  Monaco Ocean Protection Challenge 2026.                         │
│                                                                  │
│  What to Expect:                                                 │
│  ────────────────────────────────────────────────────────────   │
│  • Evaluate up to 20 projects (Startups + Concepts)             │
│  • Evaluation window: April 1 – April 30, 2026                  │
│  • Scoring based on Innovation, Feasibility, Team, Relevance    │
│  • Submit by the deadline to ensure your input counts           │
│                                                                  │
│  Time Commitment: ~30 minutes per project                        │
│  Total estimated time: ~10 hours over 30 days                   │
│                                                                  │
│                                              [ Get Started → ]   │
└──────────────────────────────────────────────────────────────────┘
```

### Step 2: Expertise & Preferences

```
┌──────────────────────────────────────────────────────────────────┐
│  Your Expertise & Preferences                                    │
│  ──────────────────────────────────────────────────────────────  │
│                                                                  │
│  Select your areas of expertise (used for assignment matching):  │
│  ┌────────────────────────────────────────────────────────────┐ │
│  │ ☑ Marine Biology         ☑ Ocean Technology                │ │
│  │ ☐ Renewable Energy       ☑ Environmental Policy            │ │
│  │ ☐ Finance/Investment     ☐ Social Impact                   │ │
│  │ ☐ Data Science           ☐ Education                       │ │
│  │ ☐ Business Development   ☐ Engineering                     │ │
│  │                                                             │ │
│  │ Other: [____________________________]                      │ │
│  └────────────────────────────────────────────────────────────┘ │
│                                                                  │
│  Language preferences:                                           │
│  ☑ English  ☑ French  ☐ Other: [________]                       │
│                                                                  │
│  Category preference (Startups vs Concepts):                     │
│  ┌────────────────────────────────────────────────────────────┐ │
│  │ Startups [==========●========] Concepts                     │ │
│  │          60% Startups / 40% Concepts                        │ │
│  │                                                             │ │
│  │ This helps us assign projects that match your interests.    │ │
│  └────────────────────────────────────────────────────────────┘ │
│                                                                  │
│  Workload preference:                                            │
│  ○ Standard (up to 20 projects)                                  │
│  ● Reduced (up to 15 projects) — I have limited availability    │
│  ○ Increased (up to 25 projects) — I can handle more            │
│                                                                  │
│  [ ← Back ]                                     [ Next Step → ]  │
└──────────────────────────────────────────────────────────────────┘
```

### Step 3: Conflict of Interest Declaration

```
┌──────────────────────────────────────────────────────────────────┐
│  Conflict of Interest Declaration                                │
│  ──────────────────────────────────────────────────────────────  │
│                                                                  │
│  Please review the project list and declare any conflicts of     │
│  interest. A COI exists if you have a personal, financial, or    │
│  professional relationship with a project team.                  │
│                                                                  │
│  ┌────────────────────────────────────────────┬───────────────┐ │
│  │ Project                                    │ COI?          │ │
│  ├────────────────────────────────────────────┼───────────────┤ │
│  │ OceanClean AI (Startup)                    │ ○ None        │ │
│  │ DeepReef Monitoring (Startup)              │ ● Declare COI │ │
│  │ CoralGuard (Concept)                       │ ○ None        │ │
│  │ WaveEnergy Solutions (Startup)             │ ○ None        │ │
│  │ BlueCarbonHub (Concept)                    │ ○ None        │ │
│  │ ... (15 more)                              │               │ │
│  └────────────────────────────────────────────┴───────────────┘ │
│                                                                  │
│  COI Details for "DeepReef Monitoring":                          │
│  ┌────────────────────────────────────────────────────────────┐ │
│  │ Type: [Professional ▼]                                      │ │
│  │ Reason:                                                     │ │
│  │ ┌────────────────────────────────────────────────────────┐ │ │
│  │ │ Former colleague of team lead. Worked together at      │ │ │
│  │ │ Marine Institute 2022-2023. No financial ties.         │ │ │
│  │ └────────────────────────────────────────────────────────┘ │ │
│  │                                                [ ✓ Save COI] │ │
│  └────────────────────────────────────────────────────────────┘ │
│                                                                  │
│  Note: You can declare additional conflicts later if needed.     │
│                                                                  │
│  [ ← Back ]                                     [ Next Step → ]  │
└──────────────────────────────────────────────────────────────────┘
```

### Step 4: Confirmation

```
┌──────────────────────────────────────────────────────────────────┐
│  Ready to Begin                                                  │
│  ──────────────────────────────────────────────────────────────  │
│                                                                  │
│  Summary of Your Setup:                                          │
│  ────────────────────────────────────────────────────────────   │
│  • Jury Group: Jury 1 — Semi-finalist Selection                 │
│  • Your expertise: Marine Biology, Ocean Tech, Env. Policy       │
│  • Workload: Up to 15 projects (reduced load)                    │
│  • Category preference: 60% Startups / 40% Concepts              │
│  • COI declared: 1 project (DeepReef Monitoring)                 │
│                                                                  │
│  By confirming, you agree to:                                    │
│  ☑ Evaluate assigned projects fairly and impartially             │
│  ☑ Complete evaluations by the deadline (April 30, 2026)         │
│  ☑ Maintain confidentiality of all submissions                   │
│  ☑ Report any additional conflicts of interest as they arise     │
│                                                                  │
│  Evaluation deadline: April 30, 2026                             │
│  Grace period: +2 days if needed (request from admin)            │
│                                                                  │
│  [ ← Back ]                             [ ✓ Confirm & Start ]    │
└──────────────────────────────────────────────────────────────────┘
```

After confirmation, juror is redirected to `/jury/groups/[juryGroupId]/assignments`.

---

## 6. Assignment View — Project List

### Route

`/jury/groups/[juryGroupId]/assignments`

### Purpose

Show all assigned projects for a specific jury group, with filtering, sorting, and status tracking.

### ASCII Mockup

```
┌──────────────────────────────────────────────────────────────────────┐
│  Jury 1 — Semi-finalist Selection                                   │
│  Assignments                                                         │
├──────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  ⏱ Evaluation Window: April 1 – April 30, 2026 (3 days remaining)   │
│                                                                       │
│  Progress: 12/20 complete (60%)  ████████████████░░░░                │
│                                                                       │
│  ┌─────────────────────────────────────────────────────────────────┐│
│  │ Filters: [All Statuses ▼] [All Categories ▼]  🔍 Search          ││
│  │ Sort by: [Status ▼]                                              ││
│  └─────────────────────────────────────────────────────────────────┘│
│                                                                       │
│  Pending (5)                                                          │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │ 📦 SeaWatch Monitor              │ Startup │ ⬜ Pending       │   │
│  │    Smart monitoring for reef health                          │   │
│  │    [Start Evaluation]                                        │   │
│  ├──────────────────────────────────────────────────────────────┤   │
│  │ 📦 TidalEnergy Pro              │ Startup │ ⬜ Pending       │   │
│  │    Tidal energy harvesting system                            │   │
│  │    [Start Evaluation]                                        │   │
│  ├──────────────────────────────────────────────────────────────┤   │
│  │ 📦 PlasticOcean Filter          │ Concept │ ⬜ Pending       │   │
│  │    Novel microplastic filtration concept                     │   │
│  │    [Start Evaluation]                                        │   │
│  └──────────────────────────────────────────────────────────────┘   │
│                                                                       │
│  In Draft (3)                                                         │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │ 📦 BlueCarbon Hub               │ Concept │ ⏳ Draft         │   │
│  │    Carbon credit marketplace for ocean restoration           │   │
│  │    Last saved 2 hours ago                                    │   │
│  │    [Continue Evaluation]                                     │   │
│  ├──────────────────────────────────────────────────────────────┤   │
│  │ 📦 CoralGuard AI                │ Startup │ ⏳ Draft         │   │
│  │    AI-powered coral reef protection                          │   │
│  │    Last saved 1 day ago                                      │   │
│  │    [Continue Evaluation]                                     │   │
│  └──────────────────────────────────────────────────────────────┘   │
│                                                                       │
│  Completed (12)                                                       │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │ 📦 OceanClean AI                │ Startup │ ✅ Submitted     │   │
│  │    AI-powered ocean debris collection robot                  │   │
│  │    Submitted 2 hours ago • Score: 4.2/5.0                    │   │
│  │    [View Evaluation]                                         │   │
│  ├──────────────────────────────────────────────────────────────┤   │
│  │ 📦 DeepReef Monitor             │ Startup │ 🔒 COI Declared  │   │
│  │    Deep-sea reef monitoring platform                         │   │
│  │    Not evaluated — conflict of interest                      │   │
│  │    [View COI Details]                                        │   │
│  └──────────────────────────────────────────────────────────────┘   │
│                                                                       │
│  [ ← Back to Dashboard ]                    [ Export List (.csv) ]   │
└──────────────────────────────────────────────────────────────────────┘
```

### Filters & Sorting

| Filter | Options |
|--------|---------|
| **Status** | All, Pending, In Draft, Submitted, COI Declared |
| **Category** | All, Startup, Concept |
| **Search** | Text search on project title |

| Sort By | Options |
|---------|---------|
| Status (default) | Pending → Draft → Submitted |
| Deadline proximity | Projects needing evaluation first |
| Alphabetical | A-Z by project title |
| Category | Startup first, then Concept |

### Card Elements

Each project card shows:
- **Title** with category badge
- **Status indicator** (⬜ Pending, ⏳ Draft, ✅ Submitted, 🔒 COI)
- **Brief description** (first 80 chars)
- **Last action timestamp** for drafts
- **Score** for submitted evaluations
- **CTA button** (Start / Continue / View)

---

## 7. Evaluation Interface — Core Workflow

### Route

`/jury/groups/[juryGroupId]/evaluate/[projectId]`

### Purpose

The heart of the jury experience. Jurors review project documents, score against criteria, and submit feedback.

### Tab Structure

```
[📄 Documents]  [📊 Scoring]  [💬 Feedback]  [ℹ️ Project Info]
```

### ASCII Mockup — Documents Tab

```
┌──────────────────────────────────────────────────────────────────────┐
│  Evaluating: OceanClean AI (Startup) — Jury 1                       │
│  ───────────────────────────────────────────────────────────────────│
│  [📄 Documents] [📊 Scoring] [💬 Feedback] [ℹ️ Project Info]          │
├──────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  ── Round 1 Application Documents ─────────────────────────────────  │
│  ┌────────────────────────────────────────────────────────────────┐ │
│  │ 📄 Executive Summary.pdf                    [Download] [View]  │ │
│  │    Uploaded: March 15, 2026 • 2.3 MB                           │ │
│  ├────────────────────────────────────────────────────────────────┤ │
│  │ 📄 Business Plan.pdf                        [Download] [View]  │ │
│  │    Uploaded: March 15, 2026 • 5.1 MB                           │ │
│  ├────────────────────────────────────────────────────────────────┤ │
│  │ 📄 Technical Specifications.pdf             [Download] [View]  │ │
│  │    Uploaded: March 16, 2026 • 1.8 MB                           │ │
│  ├────────────────────────────────────────────────────────────────┤ │
│  │ 🎥 Pitch Video.mp4                          [Download] [Play]  │ │
│  │    Uploaded: March 17, 2026 • 45 MB                            │ │
│  └────────────────────────────────────────────────────────────────┘ │
│                                                                       │
│  (For Jury 2, this section would also show:)                          │
│                                                                       │
│  ── Round 2 Semi-finalist Documents ────────────────────────────────│
│  ┌────────────────────────────────────────────────────────────────┐ │
│  │ 📄 Updated Business Plan.pdf                [Download] [View]  │ │
│  │    Uploaded: April 20, 2026 • 6.2 MB                           │ │
│  ├────────────────────────────────────────────────────────────────┤ │
│  │ 🎥 Enhanced Pitch Video.mp4                 [Download] [Play]  │ │
│  │    Uploaded: April 21, 2026 • 52 MB                            │ │
│  └────────────────────────────────────────────────────────────────┘ │
│                                                                       │
│  Tip: Use browser's PDF viewer for inline review, or download to     │
│       annotate locally.                                               │
│                                                                       │
│  [ ← Previous Project ]  [ Next Project → ]                          │
└──────────────────────────────────────────────────────────────────────┘
```

### ASCII Mockup — Scoring Tab (Criteria Mode)

```
┌──────────────────────────────────────────────────────────────────────┐
│  Evaluating: OceanClean AI (Startup) — Jury 1                       │
│  ───────────────────────────────────────────────────────────────────│
│  [📄 Documents] [📊 Scoring] [💬 Feedback] [ℹ️ Project Info]          │
├──────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  Score each criterion on a scale of 1 (Poor) to 5 (Excellent)        │
│                                                                       │
│  ┌─────────────────────────────────────────────────────────────────┐│
│  │ Innovation & Impact (30%)                                        ││
│  │ How novel is the solution? What is the potential ocean impact?   ││
│  │                                                                   ││
│  │ 1       2       3       4       5                                ││
│  │ ○       ○       ○       ●       ○                                ││
│  │ Poor    Fair    Good    Very    Excellent                        ││
│  │                         Good                                     ││
│  │                                                                   ││
│  │ Notes (optional):                                                 ││
│  │ ┌─────────────────────────────────────────────────────────────┐ ││
│  │ │ Strong use of AI for real-time debris detection.             │ ││
│  │ │ Innovative approach but scalability uncertain.               │ ││
│  │ └─────────────────────────────────────────────────────────────┘ ││
│  └─────────────────────────────────────────────────────────────────┘│
│                                                                       │
│  ┌─────────────────────────────────────────────────────────────────┐│
│  │ Feasibility & Execution (25%)                                    ││
│  │ Is the plan realistic? Can the team execute?                     ││
│  │                                                                   ││
│  │ 1       2       3       4       5                                ││
│  │ ○       ○       ●       ○       ○                                ││
│  │                                                                   ││
│  │ Notes: [_________________________________________________]        ││
│  └─────────────────────────────────────────────────────────────────┘│
│                                                                       │
│  ┌─────────────────────────────────────────────────────────────────┐│
│  │ Team & Expertise (25%)                                           ││
│  │ Does the team have the right skills and experience?              ││
│  │                                                                   ││
│  │ 1       2       3       4       5                                ││
│  │ ○       ○       ○       ●       ○                                ││
│  └─────────────────────────────────────────────────────────────────┘│
│                                                                       │
│  ┌─────────────────────────────────────────────────────────────────┐│
│  │ Ocean Relevance (20%)                                            ││
│  │ How directly does this address ocean protection?                 ││
│  │                                                                   ││
│  │ 1       2       3       4       5                                ││
│  │ ○       ○       ○       ○       ●                                ││
│  └─────────────────────────────────────────────────────────────────┘│
│                                                                       │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│                                                                       │
│  Overall Score: 3.8 / 5.0  (weighted average)                        │
│                                                                       │
│  Auto-saved 5 seconds ago                                            │
│                                                                       │
│  [ ← Previous Project ]  [💾 Save Draft]  [ Next Project → ]         │
└──────────────────────────────────────────────────────────────────────┘
```

### ASCII Mockup — Feedback Tab

```
┌──────────────────────────────────────────────────────────────────────┐
│  Evaluating: OceanClean AI (Startup) — Jury 1                       │
│  ───────────────────────────────────────────────────────────────────│
│  [📄 Documents] [📊 Scoring] [💬 Feedback] [ℹ️ Project Info]          │
├──────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  Overall Feedback (Required)                                          │
│  ──────────────────────────────────────────────────────────────────  │
│                                                                       │
│  Provide constructive feedback on this project's strengths and        │
│  areas for improvement. This will be shared with the team.            │
│                                                                       │
│  ┌────────────────────────────────────────────────────────────────┐ │
│  │ Strengths:                                                      │ │
│  │                                                                 │ │
│  │ The AI-powered debris detection is innovative and addresses    │ │
│  │ a critical ocean pollution challenge. The team has strong      │ │
│  │ technical expertise in robotics and machine learning.          │ │
│  │                                                                 │ │
│  │ Areas for Improvement:                                          │ │
│  │                                                                 │ │
│  │ The business model lacks clarity on scalability and revenue    │ │
│  │ streams. More detail needed on how the solution will be        │ │
│  │ deployed at scale across different ocean environments.         │ │
│  │                                                                 │ │
│  │ Recommendations:                                                │ │
│  │                                                                 │ │
│  │ Consider partnerships with maritime authorities and port        │ │
│  │ operators for pilot deployments. Explore subscription model    │ │
│  │ for data insights.                                              │ │
│  │                                                                 │ │
│  │ (Character count: 523 / 2000 recommended)                      │ │
│  └────────────────────────────────────────────────────────────────┘ │
│                                                                       │
│  Confidential Notes (Optional — NOT shared with team)                 │
│  ──────────────────────────────────────────────────────────────────  │
│  ┌────────────────────────────────────────────────────────────────┐ │
│  │ Team lead seems overconfident. May need mentoring on market    │ │
│  │ validation.                                                     │ │
│  └────────────────────────────────────────────────────────────────┘ │
│                                                                       │
│  Auto-saved 3 seconds ago                                            │
│                                                                       │
│  [ ← Previous Project ]  [💾 Save Draft]  [✅ Submit Evaluation]     │
└──────────────────────────────────────────────────────────────────────┘
```

### Scoring Modes

| Mode | Interface | Use Case |
|------|-----------|----------|
| **Criteria** | Multiple 1-5 scales with weights | Jury 1, Jury 2 (detailed evaluation) |
| **Global** | Single 1-10 score + feedback | Quick screening or award voting |
| **Binary** | Yes/No decision + justification | Fast filtering or pre-screening |

### COI Declaration (Blocking Dialog)

If juror hasn't declared COI for this project yet:

```
┌──────────────────────────────────────────────────┐
│ Conflict of Interest Declaration Required        │
│                                                   │
│ Before evaluating "OceanClean AI", please confirm│
│ whether you have any conflict of interest.       │
│                                                   │
│ A COI exists if you have a personal, financial,  │
│ or professional relationship with the team.      │
│                                                   │
│ ○ No conflict — I can evaluate fairly            │
│ ○ Yes, I have a conflict:                        │
│   Type: [Financial ▼]                            │
│   Details: [_______________________________]     │
│                                                   │
│ [ Submit Declaration ]                           │
│                                                   │
│ (Cannot proceed until COI is declared)           │
└──────────────────────────────────────────────────┘
```

If COI is declared, juror is redirected back to assignment list and this project is marked "COI Declared" (no evaluation).

### Auto-Save Behavior

- **Trigger**: Every 30 seconds while form has unsaved changes
- **Indicator**: "Auto-saved X seconds ago" in footer
- **Status**: Evaluation status remains `DRAFT` until explicit "Submit Evaluation"
- **Recovery**: If browser crashes, draft is restored on next visit

### Submit Evaluation

When juror clicks "Submit Evaluation":

1. **Validation**:
   - All required criteria scored
   - Feedback text provided (if `requireFeedback`)
   - Window is open OR juror has grace period
2. **Confirmation dialog**:
   ```
   ┌─────────────────────────────────────────┐
   │ Submit Evaluation?                      │
   │                                         │
   │ Once submitted, you cannot edit this    │
   │ evaluation. Please review your scores   │
   │ and feedback before proceeding.         │
   │                                         │
   │ Overall Score: 3.8 / 5.0                │
   │ Feedback: 523 characters                │
   │                                         │
   │ [ Cancel ]         [ ✓ Confirm Submit ] │
   └─────────────────────────────────────────┘
   ```
3. **On confirm**:
   - Set `Evaluation.status = SUBMITTED`
   - Set `Evaluation.submittedAt = now()`
   - Set `Assignment.isCompleted = true`
   - Show success toast: "Evaluation submitted ✓"
   - Navigate to next pending assignment OR back to assignment list

### Navigation

| Action | Behavior |
|--------|----------|
| Previous Project | Jump to previous assignment in list (or disabled if first) |
| Next Project | Jump to next assignment in list (or disabled if last) |
| Save Draft | Explicit save (in addition to auto-save) |
| Submit Evaluation | Validate, confirm, submit, navigate to next |
| Close | Return to assignment list |

---

## 8. Live Finals Voting — Real-Time Interface

### Route

`/jury/live/[roundId]`

### Purpose

During the live finals ceremony, jury members vote in real-time as projects are presented.

### Desktop Interface

```
┌──────────────────────────────────────────────────────────────────────┐
│  Live Finals — Monaco OPC 2026                                       │
│  Jury 3 Voting • Connected ●                                         │
├──────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  ┌───────────────────────────────────────────────────────────────┐  │
│  │ NOW PRESENTING                                                 │  │
│  │                                                                │  │
│  │ 🏆 Project 3 of 6 (Startups)                                  │  │
│  │                                                                │  │
│  │ OceanClean AI                                                  │  │
│  │ AI-powered ocean debris collection robot                      │  │
│  │                                                                │  │
│  │ Team: Dr. Sarah Chen, Prof. Marc Dubois                       │  │
│  └───────────────────────────────────────────────────────────────┘  │
│                                                                       │
│  ⏱ Voting Window: 2:30 remaining                                    │
│                                                                       │
│  ┌───────────────────────────────────────────────────────────────┐  │
│  │ YOUR SCORE                                                     │  │
│  │                                                                │  │
│  │ Rate this presentation (1-10):                                 │  │
│  │                                                                │  │
│  │  [1]  [2]  [3]  [4]  [5]  [6]  [7]  [8]  [9]  [10]           │  │
│  │                                  ●                             │  │
│  │                                                                │  │
│  │ Quick Notes (optional):                                        │  │
│  │ ┌─────────────────────────────────────────────────────────┐  │  │
│  │ │ Strong presentation. Clear value prop. Good Q&A.        │  │  │
│  │ └─────────────────────────────────────────────────────────┘  │  │
│  │                                                                │  │
│  │         [✓ Submit Vote]          [Skip This Project]          │  │
│  └───────────────────────────────────────────────────────────────┘  │
│                                                                       │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│                                                                       │
│  Progress (Startups):                                                 │
│  [✓] Project 1  [✓] Project 2  [●] Project 3  [ ] Project 4          │
│                                                                       │
│  Up Next: TidalEnergy Pro                                            │
│                                                                       │
│  [ Pause Voting ]  [ View All Votes ]  [ Connection: ● Live ]        │
└──────────────────────────────────────────────────────────────────────┘
```

### Mobile Interface

```
┌────────────────────────────────────────┐
│  Live Finals — Jury 3                  │
│  ●Connected     ⏱ 2:30 left            │
├────────────────────────────────────────┤
│                                        │
│  NOW PRESENTING                        │
│  ────────────────────────────────────  │
│  OceanClean AI (Project 3/6)           │
│  AI ocean debris collection            │
│                                        │
│  ┌────────────────────────────────┐   │
│  │ Rate this presentation (1-10): │   │
│  │                                │   │
│  │ [1] [2] [3] [4] [5]            │   │
│  │ [6] [7] [8] [9] [10]           │   │
│  │                 ●              │   │
│  │                                │   │
│  │ Notes:                         │   │
│  │ [___________________________]  │   │
│  │                                │   │
│  │      [✓ Submit Vote]           │   │
│  │      [Skip This Project]       │   │
│  └────────────────────────────────┘   │
│                                        │
│  Progress: ██████░░░ 3/6               │
│  Up Next: TidalEnergy Pro              │
│                                        │
└────────────────────────────────────────┘
```

### Key Features

| Feature | Implementation |
|---------|---------------|
| **Real-time sync** | WebSocket or server-sent events for cursor updates |
| **Voting timer** | Countdown clock, auto-closes voting window |
| **Connection status** | ●Live / ○Reconnecting / ✕Disconnected |
| **Progress tracker** | Visual indicator of which projects have been voted on |
| **Skip option** | Juror can skip if COI or missed presentation |
| **Auto-save** | Vote draft saved before submission in case of disconnect |

### Voting States

```typescript
type LiveVoteStatus =
  | "not_started"      // Ceremony hasn't begun
  | "waiting_next"     // Between presentations
  | "voting_open"      // Current project, voting window open
  | "voting_closed"    // Current project, window closed
  | "ceremony_ended"   // All projects presented
  | "deliberation";    // Post-voting discussion period
```

### Voting Submission Flow

```
1. Juror selects score (1-10)
2. (Optional) Adds quick notes
3. Clicks "Submit Vote"
4. Confirmation: "Vote submitted for OceanClean AI ✓"
5. UI shows "Vote Submitted — Waiting for next project"
6. When admin advances cursor → next project loads
```

### Connection Loss Handling

```
┌────────────────────────────────────────┐
│ ⚠️ Connection Lost                     │
│                                        │
│ Attempting to reconnect...             │
│                                        │
│ Your draft vote has been saved locally.│
│ It will sync when connection restores. │
│                                        │
│ [ Try Reconnect Now ]                  │
└────────────────────────────────────────┘
```

---

## 9. Winner Confirmation — Digital Signature

### Route

`/jury/confirmation/[proposalId]`

### Purpose

After live finals, jury members review and approve the proposed winner rankings.

### ASCII Mockup

```
┌──────────────────────────────────────────────────────────────────────┐
│  Winner Confirmation — Monaco OPC 2026                               │
│  Jury 3 Digital Signature                                            │
├──────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  Please review the proposed finalist rankings and confirm.            │
│  Your digital approval is required to finalize the results.           │
│                                                                       │
│  ── STARTUP CATEGORY ─────────────────────────────────────────────  │
│  ┌────────────────────────────────────────────────────────────────┐ │
│  │ 🥇 1st Place: OceanClean AI                                    │ │
│  │    Avg Score: 8.6 / 10.0                                       │ │
│  │    Jury votes: 9, 8, 9, 8, 9                                   │ │
│  │    Audience vote: 8.4 (weight: 20%)                            │ │
│  ├────────────────────────────────────────────────────────────────┤ │
│  │ 🥈 2nd Place: TidalEnergy Pro                                  │ │
│  │    Avg Score: 8.2 / 10.0                                       │ │
│  │    Jury votes: 8, 8, 9, 7, 8                                   │ │
│  ├────────────────────────────────────────────────────────────────┤ │
│  │ 🥉 3rd Place: SeaWatch Monitor                                 │ │
│  │    Avg Score: 7.8 / 10.0                                       │ │
│  │    Jury votes: 8, 7, 8, 7, 9                                   │ │
│  └────────────────────────────────────────────────────────────────┘ │
│                                                                       │
│  ── CONCEPT CATEGORY ─────────────────────────────────────────────  │
│  ┌────────────────────────────────────────────────────────────────┐ │
│  │ 🥇 1st Place: BlueCarbon Hub                                   │ │
│  │    Avg Score: 8.4 / 10.0                                       │ │
│  │    Jury votes: 9, 8, 8, 8, 9                                   │ │
│  ├────────────────────────────────────────────────────────────────┤ │
│  │ 🥈 2nd Place: CoralGuard AI                                    │ │
│  │    Avg Score: 8.0 / 10.0                                       │ │
│  │    Jury votes: 8, 8, 7, 9, 8                                   │ │
│  ├────────────────────────────────────────────────────────────────┤ │
│  │ 🥉 3rd Place: PlasticOcean Filter                              │ │
│  │    Avg Score: 7.6 / 10.0                                       │ │
│  │    Jury votes: 7, 8, 7, 8, 8                                   │ │
│  └────────────────────────────────────────────────────────────────┘ │
│                                                                       │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│                                                                       │
│  Your Decision:                                                       │
│  ○ Approve these results                                             │
│  ○ Request changes (provide feedback below)                          │
│                                                                       │
│  Comments (optional):                                                 │
│  ┌────────────────────────────────────────────────────────────────┐ │
│  │ I agree with the rankings. The scores accurately reflect the   │ │
│  │ quality of presentations.                                       │ │
│  └────────────────────────────────────────────────────────────────┘ │
│                                                                       │
│  ☑ I certify that these rankings are fair and accurate based on      │
│    the evaluation criteria.                                           │
│                                                                       │
│  Digital Signature: Dr. Alice Martin                                  │
│  Date: May 20, 2026                                                   │
│                                                                       │
│  [ ← Back ]                             [ ✓ Submit Confirmation ]     │
└──────────────────────────────────────────────────────────────────────┘
```

### Confirmation States

```typescript
type ConfirmationStatus =
  | "pending"      // Waiting for juror response
  | "approved"     // Juror approved rankings
  | "rejected"     // Juror requested changes
  | "overridden";  // Admin overrode this juror's rejection
```

### What Happens After Submission

```
If ALL jury members approve:
  → WinnerProposal.status = APPROVED
  → Admin can freeze results (makes them official)

If ANY jury member rejects:
  → WinnerProposal.status = REJECTED
  → Admin notified
  → Admin can either:
    a) Adjust rankings and re-propose
    b) Use override to force approval

If admin uses override:
  → WinnerProposal.status = OVERRIDDEN
  → WinnerProposal.overrideMode = "FORCE_MAJORITY" or "ADMIN_DECISION"
  → Results frozen with override logged in audit trail
```

---

## 10. Award Voting

### Route

`/jury/awards/[awardId]/vote`

### Purpose

For jurors on award juries (e.g., Innovation Award Jury), vote on award winners.

### ASCII Mockup — Award Voting (PICK_WINNER Mode)

```
┌──────────────────────────────────────────────────────────────────────┐
│  Innovation Award — Voting                                           │
│  Innovation Award Jury                                               │
├──────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  Award Description:                                                   │
│  Recognizing the most innovative ocean technology solution with       │
│  potential for global impact.                                         │
│                                                                       │
│  Voting Window: May 1 – May 15, 2026 (5 days remaining)              │
│                                                                       │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│                                                                       │
│  Eligible Projects (AI-screened for innovation criteria):             │
│                                                                       │
│  ┌────────────────────────────────────────────────────────────────┐ │
│  │ ○ OceanClean AI (Startup)                                      │ │
│  │   AI-powered ocean debris collection robot                     │ │
│  │   Innovation Score: 9.2 / 10.0 (AI assessment)                 │ │
│  │   [View Full Submission]                                       │ │
│  ├────────────────────────────────────────────────────────────────┤ │
│  │ ● DeepReef Monitor (Startup) — YOUR SELECTION                 │ │
│  │   Autonomous deep-sea reef monitoring platform                 │ │
│  │   Innovation Score: 9.0 / 10.0 (AI assessment)                 │ │
│  │   [View Full Submission]                                       │ │
│  ├────────────────────────────────────────────────────────────────┤ │
│  │ ○ CoralGuard AI (Concept)                                      │ │
│  │   AI-powered coral reef protection system                      │ │
│  │   Innovation Score: 8.8 / 10.0 (AI assessment)                 │ │
│  │   [View Full Submission]                                       │ │
│  ├────────────────────────────────────────────────────────────────┤ │
│  │ ○ SeaWatch Monitor (Startup)                                   │ │
│  │   Smart monitoring for reef health                             │ │
│  │   Innovation Score: 8.5 / 10.0 (AI assessment)                 │ │
│  │   [View Full Submission]                                       │ │
│  └────────────────────────────────────────────────────────────────┘ │
│                                                                       │
│  Justification (required):                                            │
│  ┌────────────────────────────────────────────────────────────────┐ │
│  │ DeepReef Monitor represents a breakthrough in autonomous       │ │
│  │ deep-sea monitoring, enabling data collection in previously    │ │
│  │ inaccessible environments. The innovation potential is highest.│ │
│  └────────────────────────────────────────────────────────────────┘ │
│                                                                       │
│  Auto-saved 10 seconds ago                                           │
│                                                                       │
│  [ ← Back to Awards ]  [💾 Save Draft]  [✅ Submit Vote]             │
└──────────────────────────────────────────────────────────────────────┘
```

### Award Voting Modes

| Mode | Interface | Description |
|------|-----------|-------------|
| **PICK_WINNER** | Radio buttons, pick one | Simple winner selection |
| **RANKED** | Drag-to-reorder list | Rank top N projects (e.g., top 3) |
| **SCORED** | 1-10 score per project | Score all eligible projects |

### Award Vote Submission

```
1. Juror selects winner (or ranks/scores)
2. Provides justification text
3. Clicks "Submit Vote"
4. Confirmation: "Award vote submitted ✓"
5. Status: "Your vote has been recorded. Results will be announced after voting closes."
```

---

## 11. Navigation & Information Architecture

### Full Sitemap

```
/jury/
├── dashboard                              (Multi-jury overview, landing page)
│
├── groups/[juryGroupId]/
│   ├── overview                           (Jury group details, progress)
│   ├── assignments                        (List of assigned projects)
│   ├── evaluate/[projectId]               (Evaluation form)
│   └── settings                           (Juror preferences, COI management)
│
├── live/[roundId]                         (Live finals voting)
│
├── confirmation/[proposalId]              (Winner confirmation)
│
├── awards/
│   ├── index                              (List of awards juror is on)
│   └── [awardId]/vote                     (Award voting form)
│
├── onboarding/[juryGroupId]               (First-time setup per jury group)
│
├── profile                                (Juror profile, expertise, contact)
│
└── learning                               (Resources, guides, FAQs)
```

### Breadcrumb Examples

```
Home > Jury Dashboard

Home > Jury 1 > Assignments

Home > Jury 1 > Assignments > OceanClean AI > Evaluate

Home > Live Finals > Round 7

Home > Winner Confirmation

Home > Awards > Innovation Award > Vote

Home > Onboarding > Jury 2
```

### Global Navigation (Header)

```
┌─────────────────────────────────────────────────────────────────┐
│ [MOPC Logo]  Jury: [Jury 1 ▼]  |  🔔 3  |  Dr. Martin ▼       │
└─────────────────────────────────────────────────────────────────┘
```

| Element | Description |
|---------|-------------|
| **MOPC Logo** | Click → Dashboard |
| **Jury Switcher** | Dropdown to switch jury group context |
| **Notifications** | Bell icon with count → notification center |
| **User Menu** | Profile, settings, logout |

### Footer Navigation (Minimal)

```
┌─────────────────────────────────────────────────────────────────┐
│ Help Center  |  Contact Support  |  Privacy  |  © MOPC 2026    │
└─────────────────────────────────────────────────────────────────┘
```

---

## 12. Responsive Design — Mobile Considerations

### Mobile Breakpoints

| Breakpoint | Width | Adjustments |
|------------|-------|-------------|
| Desktop | ≥1024px | Full sidebar, multi-column layouts |
| Tablet | 768-1023px | Collapsed sidebar, single-column |
| Mobile | <768px | Bottom nav, stacked cards, simplified forms |

### Mobile Dashboard

```
┌─────────────────────────────────┐
│ ☰  Jury Dashboard    🔔3  [👤] │
├─────────────────────────────────┤
│                                 │
│ Upcoming Deadlines              │
│ ┌─────────────────────────────┐ │
│ │ ⏱ Jury 1 — 3 days left     │ │
│ │ ⏱ Innovation — 18 days     │ │
│ └─────────────────────────────┘ │
│                                 │
│ Your Jury Groups                │
│                                 │
│ ┌─────────────────────────────┐ │
│ │ Jury 1 — Semi-finalist  ⚡  │ │
│ │ ─────────────────────────── │ │
│ │ 12/20 complete (60%)        │ │
│ │ ████████████░░░░            │ │
│ │ [Continue Evaluation →]     │ │
│ └─────────────────────────────┘ │
│                                 │
│ ┌─────────────────────────────┐ │
│ │ Innovation Award Jury       │ │
│ │ ─────────────────────────── │ │
│ │ Voting opens May 1          │ │
│ │ [View Details]              │ │
│ └─────────────────────────────┘ │
│                                 │
├─────────────────────────────────┤
│ [🏠] [📋] [🏆] [👤]             │
└─────────────────────────────────┘
```

### Mobile Evaluation Form

```
┌──────────────────────────────────┐
│ ← Evaluating: OceanClean AI      │
├──────────────────────────────────┤
│ [📄 Docs] [📊 Score] [💬 Feed]   │
├──────────────────────────────────┤
│ Innovation & Impact (30%)        │
│ ──────────────────────────────── │
│ 1    2    3    4    5            │
│ ○    ○    ○    ●    ○            │
│                                  │
│ Notes:                           │
│ ┌──────────────────────────────┐ │
│ │ Strong AI approach.          │ │
│ │ Scalability concerns.        │ │
│ └──────────────────────────────┘ │
│                                  │
│ Feasibility (25%)                │
│ ──────────────────────────────── │
│ 1    2    3    4    5            │
│ ○    ○    ●    ○    ○            │
│                                  │
│ (scroll for more criteria...)    │
│                                  │
├──────────────────────────────────┤
│ Overall: 3.6/5.0  Auto-saved 5s  │
├──────────────────────────────────┤
│ [💾 Save] [✅ Submit] [Next →]   │
└──────────────────────────────────┘
```

### Mobile Live Voting

```
┌────────────────────────────────┐
│ Live Finals — Jury 3           │
│ ● Connected    ⏱ 2:15 left    │
├────────────────────────────────┤
│ NOW PRESENTING                 │
│ ────────────────────────────── │
│ OceanClean AI (3/6)            │
│                                │
│ Rate (1-10):                   │
│ [1] [2] [3] [4] [5]            │
│ [6] [7] [8] [9] [10]           │
│                 ●              │
│                                │
│ Notes:                         │
│ ┌────────────────────────────┐ │
│ │ Excellent presentation.    │ │
│ └────────────────────────────┘ │
│                                │
│ [✓ Submit Vote (8)]            │
│ [Skip This Project]            │
│                                │
│ Progress: ██████░░░ 3/6        │
│ Up Next: TidalEnergy Pro       │
└────────────────────────────────┘
```

---

## 13. Accessibility (WCAG AA Compliance)

### Key Requirements

| Criterion | Implementation |
|-----------|---------------|
| **Keyboard Navigation** | All interactive elements focusable with Tab, activate with Enter/Space |
| **Screen Reader Support** | ARIA labels on all form controls, live regions for status updates |
| **Color Contrast** | 4.5:1 for text, 3:1 for UI components |
| **Focus Indicators** | Visible focus ring on all interactive elements |
| **Error Messages** | Clear, specific, associated with form fields |
| **Headings** | Semantic hierarchy (h1 > h2 > h3) |
| **Skip Links** | "Skip to main content" link at top of page |

### Accessible Scoring Interface

```html
<fieldset>
  <legend>Innovation & Impact (30%)</legend>
  <p id="innovation-desc">How novel is the solution? What is the potential ocean impact?</p>

  <div role="radiogroup" aria-labelledby="innovation-label" aria-describedby="innovation-desc">
    <label>
      <input type="radio" name="innovation" value="1" />
      <span>1 — Poor</span>
    </label>
    <label>
      <input type="radio" name="innovation" value="2" />
      <span>2 — Fair</span>
    </label>
    <label>
      <input type="radio" name="innovation" value="3" />
      <span>3 — Good</span>
    </label>
    <label>
      <input type="radio" name="innovation" value="4" checked />
      <span>4 — Very Good</span>
    </label>
    <label>
      <input type="radio" name="innovation" value="5" />
      <span>5 — Excellent</span>
    </label>
  </div>
</fieldset>
```

### Screen Reader Announcements

```typescript
// Auto-save feedback
<div role="status" aria-live="polite" aria-atomic="true">
  Evaluation auto-saved 5 seconds ago
</div>

// Evaluation submission
<div role="alert" aria-live="assertive">
  Evaluation submitted successfully. Navigating to next project.
</div>

// Live voting timer
<div role="timer" aria-live="off" aria-atomic="true">
  2 minutes 30 seconds remaining
</div>
```

### Keyboard Shortcuts

| Key | Action |
|-----|--------|
| `Tab` / `Shift+Tab` | Navigate between fields |
| `Enter` / `Space` | Activate button, select radio/checkbox |
| `Arrow Keys` | Navigate radio groups |
| `Esc` | Close dialogs |
| `Ctrl+S` | Save draft (evaluation form) |
| `Ctrl+Enter` | Submit evaluation (when all fields valid) |

---

## 14. Component Library — Reusable shadcn/ui Components

### Core Components

| Component | Usage | File |
|-----------|-------|------|
| `Card` | Jury group cards, project cards | `@/components/ui/card` |
| `Button` | All CTAs, form actions | `@/components/ui/button` |
| `Badge` | Status indicators, category tags | `@/components/ui/badge` |
| `Progress` | Assignment progress bars | `@/components/ui/progress` |
| `Tabs` | Document/Scoring/Feedback tabs | `@/components/ui/tabs` |
| `RadioGroup` | Scoring criteria, COI declaration | `@/components/ui/radio-group` |
| `Textarea` | Feedback fields, notes | `@/components/ui/textarea` |
| `Select` | Filters, dropdowns | `@/components/ui/select` |
| `Dialog` | COI declaration, confirmation dialogs | `@/components/ui/dialog` |
| `Toast` | Success/error notifications | `@/components/ui/toast` |
| `Skeleton` | Loading states | `@/components/ui/skeleton` |
| `Alert` | Warnings, deadlines | `@/components/ui/alert` |

### Custom Jury Components

```typescript
// src/components/jury/JuryGroupSwitcher.tsx
export function JuryGroupSwitcher({
  groups: JuryGroup[],
  currentGroupId: string,
  onSwitch: (groupId: string) => void
}) { ... }

// src/components/jury/DeadlineCountdown.tsx
export function DeadlineCountdown({
  deadline: Date,
  showGracePeriod?: boolean
}) { ... }

// src/components/jury/AssignmentCard.tsx
export function AssignmentCard({
  assignment: Assignment,
  project: Project,
  onAction: () => void
}) { ... }

// src/components/jury/EvaluationScoringForm.tsx
export function EvaluationScoringForm({
  criteria: EvaluationCriterion[],
  mode: "criteria" | "global" | "binary",
  onScoreChange: (scores: CriterionScores) => void
}) { ... }

// src/components/jury/DocumentViewer.tsx
export function DocumentViewer({
  submissionWindows: SubmissionWindow[],
  projectFiles: ProjectFile[]
}) { ... }

// src/components/jury/LiveVotingInterface.tsx
export function LiveVotingInterface({
  session: LiveVotingSession,
  currentProject: Project,
  onVote: (score: number, notes?: string) => void
}) { ... }

// src/components/jury/WinnerConfirmationForm.tsx
export function WinnerConfirmationForm({
  proposal: WinnerProposal,
  onConfirm: (approved: boolean, comments?: string) => void
}) { ... }

// src/components/jury/AwardVotingForm.tsx
export function AwardVotingForm({
  award: SpecialAward,
  eligibleProjects: Project[],
  mode: AwardScoringMode,
  onVote: (vote: AwardVote) => void
}) { ... }
```

---

## 15. State Management & Data Fetching

### tRPC Queries (React Query)

```typescript
// Dashboard
const { data: dashboard } = trpc.jury.getDashboard.useQuery();

// Assignments for a jury group
const { data: assignments } = trpc.jury.getAssignments.useQuery({
  juryGroupId
});

// Single assignment with project and evaluation
const { data: assignment } = trpc.jury.getAssignmentDetail.useQuery({
  assignmentId
});

// Project files grouped by submission window
const { data: files } = trpc.jury.getProjectDocuments.useQuery({
  projectId,
  roundId
});

// Evaluation form criteria
const { data: form } = trpc.jury.getEvaluationForm.useQuery({
  roundId
});

// Live voting session
const { data: liveSession } = trpc.jury.getLiveSession.useQuery({
  roundId
}, {
  refetchInterval: 5000 // Poll every 5s
});

// Winner proposal
const { data: proposal } = trpc.jury.getWinnerProposal.useQuery({
  proposalId
});

// Award details and eligible projects
const { data: award } = trpc.jury.getAwardForVoting.useQuery({
  awardId
});
```

### Mutations

```typescript
// Start evaluation (creates draft Evaluation record)
const startEvaluation = trpc.jury.startEvaluation.useMutation();

// Auto-save evaluation draft
const autosaveEvaluation = trpc.jury.autosaveEvaluation.useMutation();

// Submit evaluation
const submitEvaluation = trpc.jury.submitEvaluation.useMutation();

// Declare COI
const declareCOI = trpc.jury.declareCOI.useMutation();

// Submit live vote
const submitLiveVote = trpc.jury.submitLiveVote.useMutation();

// Confirm winner proposal
const confirmWinners = trpc.jury.confirmWinnerProposal.useMutation();

// Submit award vote
const submitAwardVote = trpc.jury.submitAwardVote.useMutation();

// Update juror preferences (during onboarding)
const updatePreferences = trpc.jury.updatePreferences.useMutation();
```

### Local State (Zustand or React Context)

```typescript
// Current jury group context
const useJuryStore = create((set) => ({
  currentJuryGroupId: null,
  setCurrentJuryGroup: (id) => set({ currentJuryGroupId: id }),
}));

// Evaluation form draft (before auto-save)
const useEvaluationDraft = create((set) => ({
  scores: {},
  feedback: '',
  updateScore: (criterion, score) => set((state) => ({
    scores: { ...state.scores, [criterion]: score }
  })),
  updateFeedback: (text) => set({ feedback: text }),
  clearDraft: () => set({ scores: {}, feedback: '' }),
}));
```

---

## 16. Error Handling & Edge Cases

### Evaluation Window Closed

```
┌─────────────────────────────────────────┐
│ ⚠️ Evaluation Window Closed             │
│                                         │
│ The deadline for Jury 1 evaluations was │
│ April 30, 2026. You can no longer       │
│ submit new evaluations.                 │
│                                         │
│ If you need an extension, contact the   │
│ admin to request a grace period.        │
│                                         │
│ [ Contact Admin ]    [ Back to List ]   │
└─────────────────────────────────────────┘
```

### Grace Period Active

```
┌─────────────────────────────────────────┐
│ 🕐 Grace Period Active                  │
│                                         │
│ You have been granted a 2-day extension.│
│ Your new deadline: May 2, 2026          │
│                                         │
│ [ Continue Evaluation ]                 │
└─────────────────────────────────────────┘
```

### COI Prevents Evaluation

```
┌─────────────────────────────────────────┐
│ 🔒 Conflict of Interest Declared        │
│                                         │
│ You declared a conflict of interest for │
│ "DeepReef Monitoring" on April 5, 2026. │
│                                         │
│ Reason: Former colleague of team lead.  │
│                                         │
│ You cannot evaluate this project. This  │
│ assignment has been removed from your   │
│ list and may be reassigned.             │
│                                         │
│ [ ← Back to Assignments ]               │
└─────────────────────────────────────────┘
```

### All Assignments Complete

```
┌─────────────────────────────────────────┐
│ ✅ All Evaluations Complete!            │
│                                         │
│ You have submitted evaluations for all  │
│ 20 assigned projects. Thank you!        │
│                                         │
│ Next steps:                              │
│ • Results will be announced May 10      │
│ • You may be invited to live finals     │
│                                         │
│ [ View Your Evaluations ]               │
│ [ Return to Dashboard ]                 │
└─────────────────────────────────────────┘
```

### Live Voting Not Yet Started

```
┌─────────────────────────────────────────┐
│ ⏱ Live Finals Not Yet Started          │
│                                         │
│ The live finals ceremony begins on:     │
│ May 20, 2026 at 18:00 CET               │
│                                         │
│ This page will activate when the        │
│ ceremony starts.                         │
│                                         │
│ [ Set Reminder ]    [ ← Dashboard ]     │
└─────────────────────────────────────────┘
```

### Juror on Multiple Juries — Context Confusion

Prevention:
- **Jury switcher** in global header (always visible)
- **Breadcrumbs** showing current jury group
- **Color-coded badges** per jury group (e.g., Jury 1 = blue, Jury 2 = green)
- **Separate assignment lists** per jury group (no mixing)

---

## 17. Performance Optimizations

### Code Splitting

```typescript
// Lazy-load heavy components
const LiveVotingInterface = lazy(() => import('@/components/jury/LiveVotingInterface'));
const DocumentViewer = lazy(() => import('@/components/jury/DocumentViewer'));
const WinnerConfirmationForm = lazy(() => import('@/components/jury/WinnerConfirmationForm'));

// Use Suspense with skeleton
<Suspense fallback={<EvaluationFormSkeleton />}>
  <EvaluationScoringForm {...props} />
</Suspense>
```

### Data Prefetching

```typescript
// On dashboard mount, prefetch next assignment
useEffect(() => {
  if (nextAssignmentId) {
    trpcClient.jury.getAssignmentDetail.prefetch({ assignmentId: nextAssignmentId });
  }
}, [nextAssignmentId]);

// On assignment list, prefetch first pending project
useEffect(() => {
  if (firstPendingAssignmentId) {
    trpcClient.jury.getAssignmentDetail.prefetch({
      assignmentId: firstPendingAssignmentId
    });
  }
}, [firstPendingAssignmentId]);
```

### Optimistic Updates

```typescript
// Auto-save with optimistic update
const autosave = trpc.jury.autosaveEvaluation.useMutation({
  onMutate: async (newData) => {
    // Cancel outgoing refetches
    await utils.jury.getEvaluation.cancel({ evaluationId });

    // Snapshot current value
    const previous = utils.jury.getEvaluation.getData({ evaluationId });

    // Optimistically update to new value
    utils.jury.getEvaluation.setData({ evaluationId }, (old) => ({
      ...old,
      ...newData,
      updatedAt: new Date(),
    }));

    return { previous };
  },
  onError: (err, newData, context) => {
    // Rollback on error
    utils.jury.getEvaluation.setData({ evaluationId }, context.previous);
  },
});
```

---

## 18. Testing Scenarios

### Unit Tests

```typescript
// Test evaluation form validation
describe('EvaluationScoringForm', () => {
  it('requires all criteria to be scored before submission', () => { ... });
  it('calculates weighted average correctly', () => { ... });
  it('saves draft without validation', () => { ... });
});

// Test deadline countdown
describe('DeadlineCountdown', () => {
  it('shows days remaining when >24h left', () => { ... });
  it('shows hours remaining when <24h left', () => { ... });
  it('shows "overdue" when past deadline', () => { ... });
  it('shows grace period indicator when active', () => { ... });
});
```

### Integration Tests

```typescript
// Test full evaluation workflow
describe('Jury Evaluation Flow', () => {
  it('juror can declare COI and skip evaluation', () => { ... });
  it('juror can save draft, navigate away, and resume', () => { ... });
  it('juror can submit evaluation and see success message', () => { ... });
  it('juror cannot submit past deadline without grace period', () => { ... });
  it('auto-save triggers every 30s', () => { ... });
});

// Test multi-jury context switching
describe('Multi-Jury Navigation', () => {
  it('jury switcher shows all user's jury groups', () => { ... });
  it('switching jury updates assignment list', () => { ... });
  it('breadcrumbs reflect current jury context', () => { ... });
});
```

### E2E Tests (Playwright)

```typescript
test('juror completes full evaluation from dashboard', async ({ page }) => {
  await page.goto('/jury/dashboard');
  await page.click('text=Continue Next Evaluation');

  // COI declaration
  await page.click('text=No conflict');
  await page.click('text=Submit Declaration');

  // Score criteria
  await page.click('[data-criterion="innovation"] [value="4"]');
  await page.click('[data-criterion="feasibility"] [value="3"]');
  await page.click('[data-criterion="team"] [value="4"]');
  await page.click('[data-criterion="ocean-relevance"] [value="5"]');

  // Enter feedback
  await page.fill('[name="feedback"]', 'Strong innovation, feasibility needs improvement.');

  // Submit
  await page.click('text=Submit Evaluation');
  await expect(page.locator('text=Evaluation submitted')).toBeVisible();

  // Verify navigation to next assignment
  await expect(page).toHaveURL(/\/evaluate\/.+/);
});
```

---

## 19. Migration from Current UI

### Page Mapping

| Current Route | New Route | Migration Notes |
|--------------|-----------|-----------------|
| `/jury/page.tsx` | `/jury/dashboard` | Add multi-jury support, deadline widget |
| `/jury/stages/page.tsx` | (remove) | Replaced by jury group overview |
| `/jury/stages/[stageId]/assignments/page.tsx` | `/jury/groups/[juryGroupId]/assignments` | Add filters, status indicators |
| `/jury/stages/[stageId]/projects/[projectId]/evaluate/page.tsx` | `/jury/groups/[juryGroupId]/evaluate/[projectId]` | Add multi-window doc viewer, COI blocking |
| `/jury/stages/[stageId]/live/page.tsx` | `/jury/live/[roundId]` | Add real-time sync, mobile UI |
| `/jury/awards/[id]/page.tsx` | `/jury/awards/[awardId]/vote` | Add voting interface |
| (new) | `/jury/confirmation/[proposalId]` | New winner confirmation page |
| (new) | `/jury/onboarding/[juryGroupId]` | New onboarding flow |

### Data Migration

```typescript
// Convert old stageId references to roundId
async function migrateJuryRoutes() {
  // Update assignments query to use roundId
  const assignments = await prisma.assignment.findMany({
    where: { userId: currentUserId },
    include: {
      round: true,  // was "stage"
      project: true
    },
  });

  // Group by jury group instead of stage
  const byJuryGroup = groupBy(assignments, 'round.juryGroupId');

  return byJuryGroup;
}
```

---

## 20. Future Enhancements

### Phase 2 Features

| Feature | Description | Priority |
|---------|-------------|----------|
| **Peer review discussions** | Anonymous commenting on peer evaluations | Medium |
| **Jury chat** | Real-time chat during deliberation periods | Low |
| **Bulk evaluation** | Compare 2-3 projects side-by-side | Medium |
| **AI evaluation assistant** | AI suggests scores based on rubric | Low |
| **Evaluation templates** | Save feedback snippets for reuse | Low |
| **Mobile app** | Native iOS/Android for live voting | Medium |
| **Offline mode** | Evaluate drafts offline, sync when online | Low |
| **Evaluation analytics** | Per-juror scoring patterns, outlier detection | Medium |

---

## Summary

This Jury UI redesign transforms the jury member experience with:

1. **Multi-jury dashboard** — Clear overview of all jury commitments
2. **Jury group switcher** — Easy context switching for jurors on multiple juries
3. **Cross-round document visibility** — Jury 2 sees Round 1 + Round 2 docs seamlessly
4. **Onboarding flow** — Expertise selection, COI pre-declaration, preferences
5. **Enhanced evaluation interface** — Tabbed document viewer, auto-save, deadline countdown
6. **Live finals voting** — Real-time mobile-responsive voting interface
7. **Winner confirmation** — Digital signature workflow for official results
8. **Award voting** — Separate interface for special award juries
9. **Accessibility-first** — WCAG AA compliance, keyboard nav, screen reader support
10. **Mobile-optimized** — Responsive design for all devices, especially live voting

The UI is built with shadcn/ui components, tRPC for type-safe data fetching, and follows the redesigned data model with JuryGroups, Rounds, and SubmissionWindows.

**Total Page Count**: 20+ pages across dashboard, assignments, evaluation, live voting, confirmation, awards, onboarding

**Total Lines**: 900+ lines of comprehensive documentation
