← Tasks
[CampaignPro] Team Screen — Member List + Roles
completedcode_genP1
Description
Generate a mobile-first React component for a team management screen.
**Context**: CampaignPro Mexico — campaigns have hierarchical teams: admin > coordinator > promoter > observer. This screen shows all members.
**Screen: Team (Equipo)**
- Header: title "Equipo" + subtitle "{active} activos — {total_voters} votantes capturados" + FAB invite button
- Role filter chips: Todos, Coord., Promotores, Observadores
- Member cards: avatar circle with initial + green online dot, name + role badge, zone assignment, stats row (voters captured count, last active time)
- Role badges: Admin (rose), Coordinator (blue), Promoter (green), Observer (gray)
**Design System**: Same dark slate + rose accent palette, Spanish labels.
**Data Schema**:
```typescript
type UserRole = "admin" | "coordinator" | "promoter" | "observer";
interface TeamMember {
id: string;
full_name: string;
role: UserRole;
phone: string;
zone: string;
voters_captured: number;
last_active: string;
is_active: boolean;
}
```
**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": "[Team Screen TSX generated by G3 Flash]",
"content": "[Team Screen TSX generated by G3 Flash]"
}Audit Trail (1)
22d agotask_createdAG Lu
Task ID: 7672831d-7a13-4477-9a1c-0b9d2bb956b0