1807 lines
101 KiB
Markdown
1807 lines
101 KiB
Markdown
# 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
|