PoleDanceApp/dancechamp-claude-code/docs/SCREENS.md

# 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 🗑️]