Files
PoleDanceApp/dancechamp-claude-code/docs/SCREENS.md
Dianaka123 789d2bf0a6 Full app rebuild: FastAPI backend + React Native mobile with auth, championships, admin
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>
2026-02-25 22:46:50 +03:00

12 KiB
Raw Blame History

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)

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 (010)
  • 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 (110)
  • 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 (010): 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 🗑️]