# 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 πŸ—‘οΈ]