Port playground prototypes to SvelteKit (Phase 10f-4) #30

New issue

Closed

opened 2026-03-15 23:39:23 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-03-15 23:39:23 +00:00

Owner

Lineage

plan-2026-03-08-tryout-prep → Phase 10f → Phase 10f-4

Repo

forgejo_admin/westside-app

User Story

As Marcus (admin), a coach, or a parent
I want dashboard pages that reflect post-tryout operations (payments, team info, parent contact)
So that the app serves its actual current purpose instead of showing obsolete tryout-day UI

Context

Tryouts are over. The current SvelteKit pages still show tryout-day triage UI (check-in, tryout number assignment, waiver buckets). The westside-playground repo (~/westside-playground/) has working HTML/CSS prototypes for post-tryout dashboards that look correct on mobile. SvelteKit .svelte files are just HTML — we port the playground markup directly and swap hardcoded fake data for {data.xxx} template bindings.

The playground's shared/app.css (589 lines) is a complete design system with components: .stat-card, .player-card, .badge-*, .list-row, .info-card, .bottom-nav, .team-card, .schedule-item, etc.

Key decisions:

Replace src/app.css entirely with playground's shared/app.css
Replace tryout-focused page layouts (NOT incremental update — full replacement)
The AuthStatus.svelte nav component stays as-is (it already works with role-based nav)
Landing page (+page.svelte at root) stays as-is (PR #29)
Schedule/practices are NOT in the API — use placeholder text or defer that section
Payment data: derive collection stats from roster payment_status field
Teams data: use existing fetchTeams() from src/lib/server/api.js

File Targets

Files to modify:

src/app.css — REPLACE entirely with ~/westside-playground/shared/app.css content
src/app.html — Update inline critical styles if any CSS custom property names changed (check --color-bg, --color-text still match)
src/routes/player/+page.svelte — Port from ~/westside-playground/parent.html: info-card layout with player profile, team info, payment status, schedule
src/routes/player/+page.server.js — May need to also call fetchMyTeam() or fetchTeams() to get team name/coach for the player card
src/routes/coach/+page.svelte — Port from ~/westside-playground/coach.html: player card grid with parent contact info (parent_name, parent_phone) and payment badges
src/routes/coach/+page.server.js — Likely unchanged (already fetches roster with parent data)
src/routes/admin/+page.svelte — Port from ~/westside-playground/admin.html: stats row, payment health bar, overdue families list, teams summary, quick action buttons
src/routes/admin/+page.server.js — Add fetchTeams() call, derive payment stats from roster

Files NOT to touch:

src/routes/+page.svelte — Landing page (PR #29, working)
src/routes/+page.server.js — Role redirect (working)
src/routes/admin/teams/ — Draft board (working)
src/routes/admin/users/ — User management (working)
src/routes/signin/, src/routes/signout/ — Auth routes
src/auth.js, src/hooks.server.js — Auth config
src/lib/components/AuthStatus.svelte — Nav component (working)

Acceptance Criteria

When I visit /player as a parent, I see my player's profile card with name, position, school, and team info (not tryout triage)
When I visit /coach as a coach, I see a player card grid with parent name, phone (clickable tel: link), and payment badge per player
When I visit /admin as Marcus, I see an operations dashboard with stats (active players, payment status counts), payment health bar, overdue families list, teams summary, and quick action buttons
All pages use the playground design system (dark theme, red brand, card-based layouts)
Mobile-first: pages look correct at 390px width
Data comes from real API responses (not hardcoded)
Landing page (/) is unchanged
Auth redirects still work (admin→/admin, coach→/coach, player→/player)

Test Expectations

npm run build passes with zero errors
npm run check passes (Svelte type checking)
Run command: cd ~/westside-app && npm run build && npm run check

Constraints

Read the playground HTML files (~/westside-playground/parent.html, coach.html, admin.html) as the design spec — copy their HTML structure
Read ~/westside-playground/shared/app.css and copy it to src/app.css
Use CSS classes from the playground design system (don't invent new ones)
Keep <style> blocks in .svelte files minimal — page-specific overrides only
The AuthStatus.svelte component provides the top nav — do NOT add a duplicate nav from playground HTML
The playground has a <nav class="bottom-nav"> on each page — include it if it doesn't conflict with AuthStatus nav
For data that doesn't exist in the API (schedule, practice times), use a placeholder like "Schedule coming soon" or omit the section
Payment status values from API: check what payment_status field returns and map to badge classes (badge-success, badge-danger, badge-warning)
Do NOT remove any existing API functions from src/lib/server/api.js — only add if needed

Checklist

PR opened
npm run build passes
npm run check passes
No unrelated changes

project-westside-basketball — project this affects
plan-2026-03-08-tryout-prep — parent plan
Phase 10f-1, 10f-2, 10f-3 COMPLETED (landing page port)

### Lineage `plan-2026-03-08-tryout-prep` → Phase 10f → Phase 10f-4 ### Repo `forgejo_admin/westside-app` ### User Story As Marcus (admin), a coach, or a parent I want dashboard pages that reflect post-tryout operations (payments, team info, parent contact) So that the app serves its actual current purpose instead of showing obsolete tryout-day UI ### Context Tryouts are over. The current SvelteKit pages still show tryout-day triage UI (check-in, tryout number assignment, waiver buckets). The `westside-playground` repo (`~/westside-playground/`) has working HTML/CSS prototypes for post-tryout dashboards that look correct on mobile. SvelteKit `.svelte` files are just HTML — we port the playground markup directly and swap hardcoded fake data for `{data.xxx}` template bindings. The playground's `shared/app.css` (589 lines) is a complete design system with components: `.stat-card`, `.player-card`, `.badge-*`, `.list-row`, `.info-card`, `.bottom-nav`, `.team-card`, `.schedule-item`, etc. Key decisions: - Replace `src/app.css` entirely with playground's `shared/app.css` - Replace tryout-focused page layouts (NOT incremental update — full replacement) - The `AuthStatus.svelte` nav component stays as-is (it already works with role-based nav) - Landing page (`+page.svelte` at root) stays as-is (PR #29) - Schedule/practices are NOT in the API — use placeholder text or defer that section - Payment data: derive collection stats from roster `payment_status` field - Teams data: use existing `fetchTeams()` from `src/lib/server/api.js` ### File Targets Files to modify: - `src/app.css` — REPLACE entirely with `~/westside-playground/shared/app.css` content - `src/app.html` — Update inline critical styles if any CSS custom property names changed (check `--color-bg`, `--color-text` still match) - `src/routes/player/+page.svelte` — Port from `~/westside-playground/parent.html`: info-card layout with player profile, team info, payment status, schedule - `src/routes/player/+page.server.js` — May need to also call `fetchMyTeam()` or `fetchTeams()` to get team name/coach for the player card - `src/routes/coach/+page.svelte` — Port from `~/westside-playground/coach.html`: player card grid with parent contact info (`parent_name`, `parent_phone`) and payment badges - `src/routes/coach/+page.server.js` — Likely unchanged (already fetches roster with parent data) - `src/routes/admin/+page.svelte` — Port from `~/westside-playground/admin.html`: stats row, payment health bar, overdue families list, teams summary, quick action buttons - `src/routes/admin/+page.server.js` — Add `fetchTeams()` call, derive payment stats from roster Files NOT to touch: - `src/routes/+page.svelte` — Landing page (PR #29, working) - `src/routes/+page.server.js` — Role redirect (working) - `src/routes/admin/teams/` — Draft board (working) - `src/routes/admin/users/` — User management (working) - `src/routes/signin/`, `src/routes/signout/` — Auth routes - `src/auth.js`, `src/hooks.server.js` — Auth config - `src/lib/components/AuthStatus.svelte` — Nav component (working) ### Acceptance Criteria - [ ] When I visit `/player` as a parent, I see my player's profile card with name, position, school, and team info (not tryout triage) - [ ] When I visit `/coach` as a coach, I see a player card grid with parent name, phone (clickable tel: link), and payment badge per player - [ ] When I visit `/admin` as Marcus, I see an operations dashboard with stats (active players, payment status counts), payment health bar, overdue families list, teams summary, and quick action buttons - [ ] All pages use the playground design system (dark theme, red brand, card-based layouts) - [ ] Mobile-first: pages look correct at 390px width - [ ] Data comes from real API responses (not hardcoded) - [ ] Landing page (`/`) is unchanged - [ ] Auth redirects still work (admin→/admin, coach→/coach, player→/player) ### Test Expectations - [ ] `npm run build` passes with zero errors - [ ] `npm run check` passes (Svelte type checking) - Run command: `cd ~/westside-app && npm run build && npm run check` ### Constraints - Read the playground HTML files (`~/westside-playground/parent.html`, `coach.html`, `admin.html`) as the design spec — copy their HTML structure - Read `~/westside-playground/shared/app.css` and copy it to `src/app.css` - Use CSS classes from the playground design system (don't invent new ones) - Keep `<style>` blocks in `.svelte` files minimal — page-specific overrides only - The `AuthStatus.svelte` component provides the top nav — do NOT add a duplicate nav from playground HTML - The playground has a `<nav class="bottom-nav">` on each page — include it if it doesn't conflict with AuthStatus nav - For data that doesn't exist in the API (schedule, practice times), use a placeholder like "Schedule coming soon" or omit the section - Payment status values from API: check what `payment_status` field returns and map to badge classes (`badge-success`, `badge-danger`, `badge-warning`) - Do NOT remove any existing API functions from `src/lib/server/api.js` — only add if needed ### Checklist - [ ] PR opened - [ ] `npm run build` passes - [ ] `npm run check` passes - [ ] No unrelated changes ### Related - `project-westside-basketball` — project this affects - `plan-2026-03-08-tryout-prep` — parent plan - Phase 10f-1, 10f-2, 10f-3 COMPLETED (landing page port)