Backend (FastAPI + SQLAlchemy + SQLite): - JWT auth with access/refresh tokens, bcrypt password hashing - User model with member/organizer/admin roles, auto-approve members - Championship, Registration, ParticipantList, Notification models - Alembic async migrations, seed data with test users - Registration endpoint returns tokens for members, pending for organizers - /registrations/my returns championship title/date/location via eager loading - Admin endpoints: list users, approve/reject organizers Mobile (React Native + Expo + TypeScript): - Zustand auth store, Axios client with token refresh interceptor - Role-based registration (Member vs Organizer) with contextual form labels - Tab navigation with Ionicons, safe area headers, admin tab for admin role - Championships list with status badges, detail screen with registration progress - My Registrations with championship title, progress bar, and tap-to-navigate - Admin panel with pending/all filter, approve/reject with confirmation - Profile screen with role badge, Ionicons info rows, sign out - Password visibility toggle (Ionicons), keyboard flow hints (returnKeyType) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
12 KiB
DanceChamp — Screen Reference
Member App Screens
Navigation: Bottom Tabs
Home | My Champs | Search | Profile
M1: Home
Purpose: Dashboard for the dancer
Elements:
- Header: "DanceChamp" title + bell icon (🔔) with unread count badge
- "Your Active" section: cards for championships they're registered in, showing progress bar (e.g. "Step 5/10")
- "Upcoming Championships" section: browseable cards for live championships
- Each card: championship name, org name, dates, location, status badge, accent color bar
Data: championships (status = 'live') + registrations (for current user)
Navigation:
- Tap card → M5 (Championship Detail)
- Tap bell → M7 (Notifications)
M2: My Champs
Purpose: All championships user is registered for
Elements:
- Tabs: Active | Past
- Championship cards with progress indicator
- Status per card: "Step 3/10 — Pay video fee" or "✅ Registered" or "❌ Failed"
Data: registrations joined with championships
Navigation:
- Tap card → M6 (Progress Tracker)
M3: Search
Purpose: Discover championships
Elements:
- Search bar (text input)
- Filter chips: All, Pole Exotic, Pole Art, Registration Open, Upcoming
- Championship result cards
Data: championships + organizations (for org name)
Navigation:
- Tap card → M5 (Championship Detail)
M4: Profile
Purpose: User profile and settings
Elements:
- Avatar, name, instagram handle, city
- Dance profile: disciplines, experience years
- "My Championships" summary (X active, Y completed)
- Settings list: Edit Profile, Notification Preferences, Connected Accounts, Help, Log Out
Data: users (current user)
M5: Championship Detail
Purpose: Full championship info — 5 tabs
Header: Championship name, org name, back button Tabs: Overview | Categories | Rules | Fees | Judges
Tab: Overview
- Event info: date, location, venue, registration period (start → end)
- Stats: members registered, spots left (if limited)
- "Register" button (if registration open and user not registered)
- If already registered: shows current progress step
Tab: Categories
- Disciplines list, each with levels
- Styles list
- If registered: user's selected level/style highlighted
Tab: Rules
- General rules (expandable list)
- Costume rules
- Scoring criteria: name + max score (0–10)
- Penalties: name + deduction / DQ
Tab: Fees
- Video selection fee
- Championship fees: solo, duet, group
- Refund note
Tab: Judges
- Judge profile cards: photo/emoji, name, instagram link, bio
Data: Full championship with all related tables
Navigation:
- "Register" → M6 (starts registration flow, then shows Progress Tracker)
M6: Progress Tracker
Purpose: 10-step registration checklist for a specific championship
Header: Championship name, back button
Elements:
- Vertical step list (1–10)
- Each step: number, icon, title, status (locked/available/done/failed)
- Current step expanded with action area:
- Step 3 "Record Video": toggle "I've recorded my video"
- Step 5 "Pay Video Fee": upload receipt button, status after upload
- Step 7 "Results": shows PASS ✅ / FAIL ❌ / ⏳ Pending
- Step 10 "Insurance": upload document button
- Progress bar at top: X/10 completed
Data: registrations (single record for this user + championship)
Actions: Update step fields in registrations table
M7: Notifications
Purpose: In-app notification feed
Header: "Notifications" + "Read all" button
Elements:
- Notification cards: icon, type badge, championship name, message, time ago
- Unread: colored left border + accent background tint + dot indicator
- Tap: marks as read
Types: 🔄 Category Changed, ✅ Payment Confirmed, 🏆 Results, ⏰ Deadline, 📋 Registered, 📢 Announcement
Data: notifications (for current user, ordered by created_at desc)
Org App Screens
Navigation: Bottom Tabs
Dashboard | Settings
O1: Dashboard
Purpose: Overview of all org's championships
Elements:
- Header: "Dashboard" + org name + org logo
- "New Championship" card (accent gradient, "+" icon)
- Championship cards: name, dates, location, status badge (LIVE / SETUP 3/5 / AWAITING REVIEW)
- For drafts: readiness bar + section checklist (info ✓, categories ○, fees ○, etc.)
- For live: mini stats (Members, Passed, Pending)
Data: championships (where org_id = current org) + registrations (counts)
Navigation:
- Tap "New Championship" → O2 (Quick Create)
- Tap championship card → O3 (Championship Detail)
O2: Quick Create
Purpose: Minimal form to create a draft championship
Elements:
- Header: "New Championship" + back button
- 3 inputs: Championship Name, Event Date, Location
- Info card: "Your championship will be created as a draft. Configure details later."
- "✨ Create Draft" button (disabled until name filled)
Action: Creates championship with status = 'draft', navigates to O3
O3: Championship Detail (Tabbed)
Purpose: Configure and manage a championship
Header: Championship name, subtitle, back button, "🚀 Go Live" (if all config done)
Tabs (with config status dots):
Overview | Categories (🟢/🟡) | Fees (🟢/🟡) | Rules (🟢/🟡) | Judges (🟢/🟡)
For live championships, add: | Members (N) | Results
Tab: Overview
- If draft: Setup Progress checklist (5 items with checkmarks, tap incomplete → jumps to tab)
- If all done: "🚀 Open Registration" button (or "Go Live")
- Event Info card: inline edit (✎ Edit / ✕ Close toggle)
- Editable fields: name, subtitle, event date, location, venue
- Registration period: Opens (date) + Closes (date), side by side
- Warning: "⚠️ Registration close date must be before event date"
- If live: Stats boxes (Members, Passed, Failed, Pending) + "⚡ Needs Action" (receipts to review, videos to review)
Tab: Categories
- Levels: tag editor (add/remove levels)
- Styles: tag editor (add/remove styles)
- "✓ Mark Categories as Done" button (shown when at least 1 level + 1 style)
Tab: Fees
- Video Selection Fee input
- Championship Fees: Solo, Duet (pp), Group (pp) inputs
- "✓ Mark Fees as Done" button (shown when video fee filled)
Tab: Rules
- General Rules: tag editor
- Costume Rules: tag editor
- Scoring Criteria (0–10): list + tag editor to add new
- Penalties: list with colored values (-2 yellow, DQ red) + tag editor
- "✓ Mark Rules as Done" button (shown when at least 1 rule)
Tab: Judges
- Judge profile cards: emoji avatar, name, instagram, bio, × to remove
- "Add Judge" form: name, instagram, bio inputs + "+ Add Judge" button
- "✓ Mark Judges as Done" button (shown when at least 1 judge)
Tab: Members (live only)
- Search bar
- Filter chips: All (N), 📸 Receipts (N), 🎬 Videos (N), ✅ Passed (N)
- Member cards: name, instagram, level, style, city tags, status badge
- Tap member → O4 (Member Detail)
Tab: Results (live only)
- Stat boxes: Pending, Passed, Failed
- Pending review cards: member name/level + "🎥 View" + Pass/Fail buttons
- Decided list: member name + badge
- "📢 Publish Results" button
O4: Member Detail
Purpose: View/edit a single member's registration
Header: Member name, championship + instagram, back button
Elements:
- Profile card: avatar, name, instagram, city, status badge
- Registration section:
- Discipline (read-only)
- Type: solo/duet/group (read-only)
- Level: value + "✎ Edit" button → expands picker with ⚠️ "Member will be notified"
- Style: value + "✎ Edit" button → expands picker with ⚠️ warning
- Video section: link display + Pass/Fail buttons (if pending) or status badge
- Payment section: fee amount, receipt status, "📸 Confirm" button (if receipt uploaded)
- "🔔 Send Notification" button
Actions: Update registrations fields + create notifications record
O5: Org Settings
Purpose: Organization profile and preferences
Elements:
- Org profile: logo, name, instagram (editable inline when "Edit Organization Profile" tapped)
- Menu items:
- ✎ Edit Organization Profile → inline form (name + instagram) replaces menu
- 🔔 Notification Preferences → sub-screen with toggle switches
- 🔗 Connected Accounts → sub-screen (Instagram ✅, Gmail ✅, Telegram ❌)
- ❓ Help & Support
- 🚪 Log Out (red text)
Admin Panel Screens (Web)
Navigation: Bottom Tabs (mobile-style for prototype, sidebar for production)
Overview | Orgs | Champs | Users
A1: Overview (Dashboard)
Purpose: Platform health at a glance
Elements:
- Header: "Admin Panel" + platform name + version
- Stat boxes: Active Orgs, Live Champs, Total Users
- "⚡ Needs Attention" card (yellow tint):
- 🏢 Organizations awaiting approval (count) → tap goes to A2
- 🏆 Champs awaiting approval from unverified orgs (count) → tap goes to A4
- Platform Health table: total revenue, active/total orgs, blocked users, avg members/champ
- Recent Activity log: action + target (colored by type) + date + actor
A2: Organizations List
Purpose: All organizations on the platform
Elements:
- Search bar
- Filter chips: All (N), ✅ Active (N), ⏳ Pending (N), 🚫 Blocked (N)
- Org cards: logo, name, instagram, status badge, city, champs count, members count
- Tap → A3 (Org Detail)
A3: Organization Detail
Purpose: Review and manage a single org
Elements:
- Profile card: logo, name, instagram, email, city, status badge
- Details table: Joined, Championships, Total members, Verified (✅/❌)
- Approval Policy card:
- Verified: "🛡️ Verified — Auto-approve events" (green tint)
- Unverified: "⏳ Unverified — Events need manual approval" (yellow tint)
- Championships list (belonging to this org)
- Block reason card (if blocked, red tint)
- Actions:
- Pending: [Approve ✅] [Reject ❌]
- Active: [Block 🚫] + [Verify 🛡️] (if not verified)
- Blocked: [Unblock ✅]
- Always: [Delete 🗑️]
A4: Championships List
Purpose: All championships across all orgs
Elements:
- Search bar
- Filter chips: All (N), 🟢 Live (N), ⏳ Awaiting (N), 📝 Draft (N), 🚫 Blocked (N)
- Champ cards: name, "by Org Name 🛡️" (shield if verified), status badge, dates, location, members count
- Tap → A5 (Champ Detail)
A5: Championship Detail
Purpose: Review and manage a single championship
Elements:
- Profile card: trophy emoji, name, org name, dates, location, status badge
- Stats table: Members, Passed, Pending, Revenue
- Approval Policy card: explains why auto-approved or needs review
- Actions:
- Pending approval: [Approve ✅] [Reject ❌]
- Live: [Suspend ⏸️]
- Blocked: [Reinstate ✅]
- Always: [Delete 🗑️]
A6: Users List
Purpose: All platform users
Elements:
- Search bar (name, @handle, email)
- Filter chips: All (N), ✅ Active (N), ⚠️ Warned (N), 🚫 Blocked (N), 🏢 Org Admins (N)
- User cards: avatar (👤 or 🏢 for org admins), name, instagram, city, status badge
- Tap → A7 (User Detail)
A7: User Detail
Purpose: Review and manage a single user
Elements:
- Profile card: avatar, name, instagram, email, status badge
- Info table: City, Joined, Championships joined, Role (Member or Org Admin + org name)
- Warning/Block reason card (if applicable, orange or red tint)
- Actions:
- Active: [Warn ⚠️] [Block 🚫]
- Warned: [Remove Warning ✅] [Block 🚫]
- Blocked: [Unblock ✅]
- Always: [Delete 🗑️]