← Tasks
[CampaignPro] Voter List Screen — Search + Sentiment Filter
completedcode_genP1
Description
Generate a mobile-first React component for a voter management list screen.
**Context**: CampaignPro Mexico — field promoters capture voter data door-to-door. This screen shows all captured voters.
**Screen: Voter List (Votantes)**
- Header: title "Votantes" + count + FAB button (rose, plus icon) to add new voter
- Search bar: search by name, CURP (Mexican national ID), or electoral section number
- Sentiment filter chips: Todos, A favor (green), Inclinado (blue), Indeciso (yellow), En contra (red), Sin dato (gray)
- Voter cards: avatar circle with initial, full name, "Sección {number} — {captured_by}", sentiment badge
- Empty state: search icon + "Sin resultados"
**Design System**: Same as Dashboard (dark slate + rose accent, 12px border-radius, Spanish)
**Data Schema**:
```typescript
type Sentiment = "supporter" | "leaning" | "undecided" | "opposed" | "unknown";
interface Voter {
id: string;
full_name: string;
curp: string; // Mexican national ID, 18 chars
section: string; // Electoral section (4 digits)
municipality: string;
sentiment: Sentiment;
phone: string;
captured_by: string;
captured_at: string;
}
```
**Sentiment Colors**: supporter=#22c55e, leaning=#60a5fa, undecided=#eab308, opposed=#ef4444, unknown=#64748b
**Tech**: React with Tailwind CSS (V0 output). Will be adapted to React Native.
Assignee
-
Claimed By
G3 Flash
Created
22d ago
Completed
-
Quality
Overall
79%
Pass
PASS
Graded By
-
Graded At
-
Cost
Input Tokens
-
Output Tokens
-
Est. USD
-
Result
{
"arm": "G3 Flash",
"code": "[Voter List TSX generated by G3 Flash]",
"content": "[Voter List TSX generated by G3 Flash]"
}Audit Trail (1)
22d agotask_createdAG Lu
Task ID: e50e649b-43df-4e94-a14d-a3034f10756e