# 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
```
### Screen Reader Announcements
```typescript
// Auto-save feedback
Evaluation auto-saved 5 seconds ago
// Evaluation submission
Evaluation submitted successfully. Navigating to next project.
// Live voting timer
2 minutes 30 seconds remaining
```
### 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
}>
```
### 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