#52 - feat: sponsor dashboard prototype — pipeline board + sponsor card - ldraney/westside-playground

### Type Feature ### Lineage Standalone — first UI for sponsor management (WS-S29). Playground prototype before promotion to westside-app. ### Repo `forgejo_admin/westside-playground` ### User Story As an admin, I want to see all my sponsors in a visual pipeline board — who's a prospect, who responded, who's negotiating, who's committed — so I can manage relationships at a glance and never lose track of a conversation. ### Context The basketball-api sponsor system is built (model, CRUD, blast endpoint, seed data). But there's no UI — status updates are raw API calls. Marcus needs a visual dashboard. This is a playground prototype. Pure HTML/CSS/JS, no framework. Design locks here, then promotes to westside-app with real API bindings. The pipeline mirrors the SponsorStatus enum: prospect → contacted → responded → negotiating → committed → declined. Reference: `westside-sponsors` note in pal-e-docs has tier definitions, active sponsors, and lifecycle. ### File Targets Files the agent should create: - `sponsor-dashboard/index.html` — pipeline board view (kanban columns by status) - `sponsor-dashboard/sponsor-card.html` — single sponsor detail/edit view - `sponsor-dashboard/sponsor-list.html` — filterable table view - `sponsor-dashboard/styles.css` — dashboard styles ### Acceptance Criteria **Pipeline Board (index.html):** - [ ] 6 columns matching SponsorStatus: Prospect, Contacted, Responded, Negotiating, Committed, Declined - [ ] Each sponsor renders as a card showing: business_name, category badge, tier (if set), last_contacted_at - [ ] Cards are visually draggable between columns (CSS drag states, JS optional for prototype) - [ ] Column headers show count (e.g., "Prospect (44)") - [ ] Stats bar at top: total sponsors, response rate %, committed count, total committed revenue - [ ] Mobile-responsive — Marcus uses his phone **Sponsor Card (sponsor-card.html):** - [ ] Full sponsor detail view: all fields from the model - [ ] Editable fields: status (dropdown), tier (dropdown), notes (textarea), amount_committed, amount_paid - [ ] Quick action buttons: "Mark Responded", "Move to Negotiating", "Mark Committed" - [ ] Contact info section: email, phone, contact_name - [ ] Presentation section: logo preview, website link, description, cta_text - [ ] Timeline/history placeholder (future: shows email_log entries) **Sponsor List (sponsor-list.html):** - [ ] Table view of all sponsors, sortable by status, category, tier, last_contacted_at - [ ] Filter dropdowns for status and category - [ ] Search by business name - [ ] Bulk action placeholder (future: select multiple, blast, update status) **Styling:** - [ ] Westside brand: red (#C41E3A), black (#1a1a1a), white - [ ] Card design matches existing westside-app admin card patterns - [ ] Status columns color-coded (prospect=gray, contacted=blue, responded=yellow, negotiating=orange, committed=green, declined=red) - [ ] Mobile-first layout — board scrolls horizontally on phone ### Test Expectations - [ ] Manual: open index.html in browser, verify 6 columns render - [ ] Manual: sponsor cards display mock data correctly - [ ] Manual: responsive layout works on phone-width viewport - [ ] Manual: sponsor-card.html shows all fields with edit controls ### Constraints - Pure HTML/CSS/JS — no SvelteKit, no build tools - Use mock/hardcoded data matching real sponsors (Snoopy, NanoReleaf, Coach West + a few prospects) - No Tailwind — pure CSS vars + explicit styles (per project convention) - Follow existing westside-playground patterns for file structure - Mobile-first — Marcus manages sponsors from his phone ### Checklist - [ ] PR opened - [ ] No unrelated changes ### Related - `arch-domain-sponsorship` — domain model - `westside-sponsors` — tier definitions, active sponsors - basketball-api#357 — model extension (presentation fields this UI will consume)

forgejo_admin commented

2026-04-06 23:50:13 +00:00

Contributor

Type

Feature

Lineage

Standalone — first UI for sponsor management (WS-S29). Playground prototype before promotion to westside-app.

Repo

forgejo_admin/westside-playground

User Story

As an admin, I want to see all my sponsors in a visual pipeline board — who's a prospect, who responded, who's negotiating, who's committed — so I can manage relationships at a glance and never lose track of a conversation.

Context

The basketball-api sponsor system is built (model, CRUD, blast endpoint, seed data). But there's no UI — status updates are raw API calls. Marcus needs a visual dashboard.

This is a playground prototype. Pure HTML/CSS/JS, no framework. Design locks here, then promotes to westside-app with real API bindings.

The pipeline mirrors the SponsorStatus enum: prospect → contacted → responded → negotiating → committed → declined.

Reference: westside-sponsors note in pal-e-docs has tier definitions, active sponsors, and lifecycle.

File Targets

Files the agent should create:

sponsor-dashboard/index.html — pipeline board view (kanban columns by status)
sponsor-dashboard/sponsor-card.html — single sponsor detail/edit view
sponsor-dashboard/sponsor-list.html — filterable table view
sponsor-dashboard/styles.css — dashboard styles

Acceptance Criteria

Pipeline Board (index.html):

6 columns matching SponsorStatus: Prospect, Contacted, Responded, Negotiating, Committed, Declined
Each sponsor renders as a card showing: business_name, category badge, tier (if set), last_contacted_at
Cards are visually draggable between columns (CSS drag states, JS optional for prototype)
Column headers show count (e.g., "Prospect (44)")
Stats bar at top: total sponsors, response rate %, committed count, total committed revenue
Mobile-responsive — Marcus uses his phone

Sponsor Card (sponsor-card.html):

Full sponsor detail view: all fields from the model
Editable fields: status (dropdown), tier (dropdown), notes (textarea), amount_committed, amount_paid
Quick action buttons: "Mark Responded", "Move to Negotiating", "Mark Committed"
Contact info section: email, phone, contact_name
Presentation section: logo preview, website link, description, cta_text
Timeline/history placeholder (future: shows email_log entries)

Sponsor List (sponsor-list.html):

Table view of all sponsors, sortable by status, category, tier, last_contacted_at
Filter dropdowns for status and category
Search by business name
Bulk action placeholder (future: select multiple, blast, update status)

Styling:

Westside brand: red (#C41E3A), black (#1a1a1a), white
Card design matches existing westside-app admin card patterns
Status columns color-coded (prospect=gray, contacted=blue, responded=yellow, negotiating=orange, committed=green, declined=red)
Mobile-first layout — board scrolls horizontally on phone

Test Expectations

Manual: open index.html in browser, verify 6 columns render
Manual: sponsor cards display mock data correctly
Manual: responsive layout works on phone-width viewport
Manual: sponsor-card.html shows all fields with edit controls

Constraints

Pure HTML/CSS/JS — no SvelteKit, no build tools
Use mock/hardcoded data matching real sponsors (Snoopy, NanoReleaf, Coach West + a few prospects)
No Tailwind — pure CSS vars + explicit styles (per project convention)
Follow existing westside-playground patterns for file structure
Mobile-first — Marcus manages sponsors from his phone