← Tasks
[UI-02] Campaign Selection Screen
completedui_genP0
Description
## UI-02: Campaign Selection Screen
Section: UI Screens | Milestone: M1 | Owner: None
### Failing Tests
- **campaigns_screen_file** (file_exists): File `src/screens/CampaignsScreen.tsx` must exist
### Acceptance Criteria
- File `src/screens/CampaignsScreen.tsx` must exist
### Codebase Conventions
- Trilingual comments: // EN: ... // VI: ... // ES: ...
- SPEC section refs in comments
- Zod at module level with .safeParse()
- (supabase as any) with eslint-disable
- NextResponse.json() responses
- Error format: { error: 'message' }
### Dependencies
- API-02: FAIL
Assignee
-
Claimed By
Cloud Lu → Claude Sonnet
Created
23d ago
Completed
19d ago
Quality
Overall
79%
Pass
PASS
Graded By
-
Graded At
-
Cost
Input Tokens
-
Output Tokens
-
Est. USD
-
Result
{
"cost": {
"input_tokens": 15,
"estimated_usd": 0.02373,
"output_tokens": 1579
},
"model": "claude-sonnet-4-20250514",
"status": "success",
"transport": "anthropic_api",
"latency_ms": 27360,
"response_text": "# Campaign Selection Screen UI\n\nI'll design a campaign selection screen that allows users to browse and choose from available campaigns. Here's a comprehensive UI design:\n\n## Screen Layout\n\n### Header Section\n- **Title**: \"Select Campaign\"\n- **User profile icon** (top right)\n- **Back button** (top left)\n\n### Campaign Grid/List\n```\n┌─────────────────────────────────────┐\n│ 🎯 FEATURED CAMPAIGNS │\n├─────────────────────────────────────┤\n│ ┌─────┐ ┌─────┐ ┌─────┐ │\n│ │ IMG │ │ IMG │ │ IMG │ │\n│ │ │ │ │ │ │ │\n│ └─────┘ └─────┘ └─────┘ │\n│ New Active Ending Soon │\n├─────────────────────────────────────┤\n│ 📋 ALL CAMPAIGNS │\n├─────────────────────────────────────┤\n│ [Filter] [Sort] [Search] │\n├─────────────────────────────────────┤\n│ Campaign List Items... │\n└─────────────────────────────────────┘\n```\n\n## Campaign Card Design\n\n### Individual Campaign Card\n```\n┌──────────────────────────────────────┐\n│ [Campaign Image/Thumbnail] │\n│ │\n│ Campaign Title 🏆 │\n│ Brief description text... │\n│ │\n│ 📅 Duration: 30 days │\n│ 🎁 Reward: $500 prize │\n│ 👥 1.2k participants │\n│ │\n│ Progress: ████████░░ 80% │\n│ │\n│ [JOIN CAMPAIGN] [STATUS BADGE] │\n└──────────────────────────────────────┘\n```\n\n## Key UI Elements\n\n### 1. Filter Options\n- **Status**: Active, Upcoming, Completed\n- **Category**: Photo, Video, Social, Review\n- **Duration**: 1-7 days, 1-4 weeks, 1+ months\n- **Reward Type**: Cash, Products, Points, Recognition\n\n### 2. Sort Options\n- Most Popular\n- Newest First\n- Ending Soon\n- Highest Reward\n- Best Match\n\n### 3. Campaign Status Badges\n- 🟢 **ACTIVE** (green)\n- 🟡 **STARTING SOON** (yellow)\n- 🔴 **ENDING SOON** (red)\n- ⚫ **COMPLETED** (gray)\n- 🔵 **JOINED** (blue)\n\n## Interactive Features\n\n### Campaign Preview Modal\nWhen tapping a campaign card:\n```\n┌──────────────────────────────────────┐\n│ ✕ PREVIEW │\n├──────────────────────────────────────┤\n│ [Hero Image] │\n│ │\n│ Campaign Name │\n│ ⭐⭐⭐⭐⭐ 4.8 rating │\n│ │\n│ 📝 Full Description │\n│ Lorem ipsum dolor sit amet... │\n│ │\n│ 🎯 Objectives: │\n│ • Complete 5 tasks │\n│ • Submit creative content │\n│ • Engage with community │\n│ │\n│ 🏆 Rewards: │\n│ • 1st place: $500 │\n│ • Top 10: $50 each │\n│ • All participants: 100 points │\n│ │\n│ [JOIN CAMPAIGN] [LEARN MORE] │\n└──────────────────────────────────────┘\n```\n\n## Color Scheme & Styling\n\n### Primary Colors\n- **Background**: #F8F9FA (light gray)\n- **Cards**: #FFFFFF (white)\n- **Primary Action**: #007BFF (blue)\n- **Success**: #28A745 (green)\n- **Warning**: #FFC107 (yellow)\n- **Danger**: #DC3545 (red)\n\n### Typography\n- **Headers**: Bold, 18-24px\n- **Body Text**: Regular, 14-16px\n- **Captions**: Light, 12-14px\n\n## Responsive Design\n\n### Mobile Layout (< 768px)\n- Single column card layout\n- Collapsible filter sidebar\n- Sticky search bar\n- Swipeable featured campaigns\n\n### Tablet/Desktop (> 768px)\n- 2-3 column grid layout\n- Side panel filters\n- Expanded card previews\n- Hover effects\n\n## Accessibility Features\n\n### Screen Reader Support\n- Alt text for all images\n- ARIA labels for interactive elements\n- Semantic HTML structure\n\n### Keyboard Navigation\n- Tab order through campaigns\n- Enter to select/join\n- Escape to close modals\n\n### Visual Accessibility\n- High contrast mode support\n- Scalable text (up to 200%)\n- Clear focus indicators\n- Color-blind friendly badges\n\n## Loading States\n\n### Initial Load\n```\n┌──────────────────────────────────────┐\n│ ⟳ Loading campaigns... │\n│ │\n│ ┌─────┐ ┌─────┐ ┌─────┐ │\n│ │ ░░░ │ │ ░░░ │ │ ░░░ │ │\n│ │ ░░░ │ │ ░░░ │ │ ░░░ │ │\n│ └─────┘ └─────┘ └─────┘ │\n└──────────────────────────────────────┘\n```\n\n### Empty State\n```\n┌──────────────────────────────────────┐\n│ 🔍 │\n│ No campaigns found │\n│ │\n│ Try adjusting your filters or │\n│ check back later for new │\n│ campaigns! │\n│ │\n│ [CLEAR FILTERS] │\n└──────────────────────────────────────┘\n```\n\nThis campaign selection screen provides users with a comprehensive view of available campaigns while maintaining ease of use and clear navigation paths."
}Task ID: e8dd42fd-5d08-49d3-9783-34fd2683fedd