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>
This commit is contained in:
Dianaka123
371
dancechamp-claude-code/docs/SCREENS.md
Normal file
371
dancechamp-claude-code/docs/SCREENS.md
Normal file
@@ -0,0 +1,371 @@
|
||||
# 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 🗑️]
|
||||
Reference in New Issue
Block a user