feat: Admin dashboard redesign + Family CRM page

### Lineage `plan-wkq` → Phase 10 (Playground) ### Repo `forgejo_admin/westside-playground` ### User Story As Marcus (admin/sales guy), when I open the app I see my pipeline at a glance — how many families registered, how many are paying, who's overdue, how many teams. Each number takes me to the detail I need. ### Context The admin dashboard needs a redesign. Marcus runs this like a mini CRM. The current stat cards ("Registered", "Paid Up", "Overdue", "Teams") don't link anywhere and the labels are confusing. Also the bottom nav has "My Player" which makes no sense for admin. **The pipeline:** ``` Leads → Registered ($30 paid) → Placed (on team) → Active ($200/mo) → Overdue (needs call) ``` **Two pages:** 1. **`admin.html` (dashboard)** — 4 clickable stat cards that link to the right places 2. **`admin-families.html` (new CRM page)** — all families with pipeline status, filterable ### File Targets Files to modify: - `admin.html` — redesign stat cards as clickable pipeline numbers, fix bottom nav (remove "My Player", use Dashboard | Teams | Sign Out), remove the overdue section (it moves to the CRM page), keep Teams section and Quick Actions Files to create: - `admin-families.html` — Family CRM page ### Acceptance Criteria **admin.html redesign:** - [ ] 4 stat cards, each clickable: - "Registered" (53) → links to `admin-families.html` - "Active" (48) → links to `admin-families.html?filter=active` (just use `admin-families.html` with a comment noting the filter) - "Teams" (6) → links to `admin-teams.html` - "Overdue" (4) → links to `admin-families.html?filter=overdue` (same, just link with comment) - [ ] Stat cards styled as tappable cards (subtle hover/active state, cursor pointer) - [ ] Remove the "Overdue Families" detail section (that data lives in the CRM page now) - [ ] Keep the Teams section with clickable team cards (from PR #8) - [ ] Keep Quick Actions: Manage Teams, Manage Users - [ ] Bottom nav: Dashboard (active) | Teams | Sign Out — NO "My Player" - [ ] Payment health bar can stay — it's a good at-a-glance metric **admin-families.html (CRM page):** - [ ] Page title: "Families" with subtitle showing total count - [ ] Filter tabs at top: All | Leads | Active | Overdue - All = everyone - Leads = signed up but not yet subscribed (paid tryout fee, no monthly subscription) - Active = paying monthly subscription - Overdue = subscription past due - [ ] Family rows showing: Player name, Parent name, Parent phone (tap to call), Email, Team assignment (or "Unassigned"), Payment status badge (ACTIVE / OVERDUE / LEAD), Last payment date - [ ] 8-10 placeholder family rows with mix of statuses - [ ] Search bar at top to filter by name - [ ] Sort indicator (by name, by status, by last payment) - [ ] Tapping a row could expand or link to player profile — use `player-profile.html` link - [ ] Admin nav consistent with other admin pages - [ ] Bottom nav: Dashboard | Teams | Sign Out ### Test Expectations - No automated tests (static HTML). Visual verification only. ### Constraints - HTML + CSS only, minimal JS for tab filtering and search - Use existing CSS from `shared/app.css` — stat-cards, info-card, list-row, badge patterns - Follow existing admin page patterns - Player data is placeholder — use real player names from the current roster (Marcus Jr, Connor, Owence, etc.) - Phone numbers should be `tel:` links for tap-to-call on mobile ### Checklist - [ ] PR opened - [ ] No unrelated changes ### Related - `project-westside-basketball`

forgejo_admin commented

2026-03-16 22:43:11 +00:00

Owner

Lineage

plan-wkq → Phase 10 (Playground)

Repo

forgejo_admin/westside-playground

User Story

As Marcus (admin/sales guy), when I open the app I see my pipeline at a glance — how many families registered, how many are paying, who's overdue, how many teams. Each number takes me to the detail I need.

Context

The admin dashboard needs a redesign. Marcus runs this like a mini CRM. The current stat cards ("Registered", "Paid Up", "Overdue", "Teams") don't link anywhere and the labels are confusing. Also the bottom nav has "My Player" which makes no sense for admin.

The pipeline:

Leads → Registered ($30 paid) → Placed (on team) → Active ($200/mo) → Overdue (needs call)

Two pages:

admin.html (dashboard) — 4 clickable stat cards that link to the right places
admin-families.html (new CRM page) — all families with pipeline status, filterable

File Targets

Files to modify:

admin.html — redesign stat cards as clickable pipeline numbers, fix bottom nav (remove "My Player", use Dashboard | Teams | Sign Out), remove the overdue section (it moves to the CRM page), keep Teams section and Quick Actions

Files to create:

admin-families.html — Family CRM page

Acceptance Criteria

admin.html redesign:

4 stat cards, each clickable:
- "Registered" (53) → links to admin-families.html
- "Active" (48) → links to admin-families.html?filter=active (just use admin-families.html with a comment noting the filter)
- "Teams" (6) → links to admin-teams.html
- "Overdue" (4) → links to admin-families.html?filter=overdue (same, just link with comment)
Stat cards styled as tappable cards (subtle hover/active state, cursor pointer)
Remove the "Overdue Families" detail section (that data lives in the CRM page now)
Keep the Teams section with clickable team cards (from PR #8)
Keep Quick Actions: Manage Teams, Manage Users
Bottom nav: Dashboard (active) | Teams | Sign Out — NO "My Player"
Payment health bar can stay — it's a good at-a-glance metric

admin-families.html (CRM page):

Page title: "Families" with subtitle showing total count
Filter tabs at top: All | Leads | Active | Overdue
- All = everyone
- Leads = signed up but not yet subscribed (paid tryout fee, no monthly subscription)
- Active = paying monthly subscription
- Overdue = subscription past due
Family rows showing: Player name, Parent name, Parent phone (tap to call), Email, Team assignment (or "Unassigned"), Payment status badge (ACTIVE / OVERDUE / LEAD), Last payment date
8-10 placeholder family rows with mix of statuses
Search bar at top to filter by name
Sort indicator (by name, by status, by last payment)
Tapping a row could expand or link to player profile — use player-profile.html link
Admin nav consistent with other admin pages
Bottom nav: Dashboard | Teams | Sign Out

Test Expectations

No automated tests (static HTML). Visual verification only.

Constraints

HTML + CSS only, minimal JS for tab filtering and search
Use existing CSS from shared/app.css — stat-cards, info-card, list-row, badge patterns
Follow existing admin page patterns
Player data is placeholder — use real player names from the current roster (Marcus Jr, Connor, Owence, etc.)
Phone numbers should be tel: links for tap-to-call on mobile