ldraney/westside-playground

Archived

Fork 0

fix: single-page sponsor dashboard — inline details, drag-and-drop, no inline CSS/JS #56

New issue

Open

opened 2026-04-07 17:16:58 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-04-07 17:16:58 +00:00

Contributor

Type

Feature

Lineage

Replaces westside-playground#54/#55. Dashboard works but violates playground conventions (inline CSS/JS) and takes too many steps to manage sponsors. This ticket consolidates into a single page with inline expandable cards and drag-and-drop.

Repo

forgejo_admin/westside-playground

User Story

As an admin on my phone, I want to see my entire sponsor pipeline, tap a card to see details, drag to update status, and add notes — all without leaving the page — so I manage sponsors in seconds, not minutes.

Context

Current sponsor dashboard has 3 separate HTML pages. That's 2-3 taps to do anything. Mobile-first means Marcus should open ONE page and see everything. Details expand inline (no page navigation). Status changes are drag-and-drop or tap-to-change.

Design principle: "Client sees all their data with as few steps as possible."

MANDATORY: Read these files before writing ANY code:

shared/style.css — all CSS goes here, NO inline styles
shared/app.js — all JS goes here, NO inline scripts
admin.html — structural template (nav, page-header, container, bottom-nav)
Current sponsor-dashboard/index.html — keep the good parts (dark theme, stats row, svelte-notes)

File Targets

Files the agent should modify:

sponsor-dashboard/index.html — rebuild as single-page app with board + inline details
shared/style.css — add/update sponsor-specific classes (drag states, expandable cards, modal)
shared/app.js — add sponsor interactivity (drag-and-drop, expand/collapse, view toggle, filter)

Files the agent should DELETE:

sponsor-dashboard/sponsor-card.html — absorbed into inline expandable cards
sponsor-dashboard/sponsor-list.html — absorbed into list view toggle

Acceptance Criteria

Single page architecture:

ONE HTML file: sponsor-dashboard/index.html
sponsor-card.html and sponsor-list.html DELETED
NO inline style= attributes anywhere
NO inline <script> blocks — all JS in shared/app.js
All new CSS in shared/style.css following existing patterns

Stats bar:

.stats-row at top: Total (44), Contacted (23), Responded (1), Committed (2), Declined (21)
Stats update dynamically when cards move (JS)

View toggle:

Two buttons: "Board" and "List" — toggles between pipeline board and table view
Same page, same data, different layout
Board is default view

Pipeline board (board view):

6 columns: Prospect, Contacted, Responded, Negotiating, Committed, Declined
Column headers show count, colored top border matching status
Horizontal scroll on mobile
Cards are draggable between columns (HTML5 drag-and-drop API)
Drop target highlights when dragging over a column
Drag completes → card moves to new column, counts update

Rich sponsor cards:

Compact state: business_name, category badge, tier badge (if set), last_contacted date
Responded/Negotiating/Committed cards also show contact_name + phone in compact state
Tap card → expands inline (slide-down animation) showing full detail panel
Expanded state: all fields — email, phone, contact_name, status dropdown, tier dropdown, notes textarea, amount fields, website link
"Save" button on expanded card (no-op in playground, just visual)
Tap again or tap "Close" → collapses back to compact
Only one card expanded at a time

List view:

Table layout: business_name, category, status, tier, email, last_contacted
Sortable column headers (click to sort)
Filter dropdowns for status and category
Search input for business name
Same expand-on-tap behavior as board cards (or just show all fields in table row)

Mock data (matches real database state):

Contacted (23): Crown Burgers, Raising Cane's x3, Cafe Rio, Dominos, Costa Vida, Sodalicious, Swig, Wingstop, Cafe Zupas, Panda Express, Big O Tires, Discount Tire, Tire Pros, Oakland Construction, First Utah Bank, Zions Bank x2, Buffalo Wild Wings, 7-Eleven, Professional Dental, Abundant Dental
Responded (1): Raising Cane's (contact: Chloe Greep, 626-802-0317, "wants to partner, asked for call")
- NOTE: Update one of the 3 Raising Cane's entries to "responded" with Chloe's info
Negotiating (1): NanoReleaf (CBD therapy, tier TBD)
Committed (2): Snoopy THA Barber (Community Partner), Coach West Recruiting (Community Partner)
Declined (21): Bank of America, US Bank x2, Chick-fil-A, Chipotle, etc. (show first 5, collapse rest with "and 16 more...")

Svelte-notes annotations:

Full @route, @auth, @api, @state, @bottom-nav, @svelte-notes comment block
Every interactive element annotated with its Svelte equivalent
CSS sections in shared/style.css annotated with /* Svelte: SponsorCard.svelte */ etc.

Test Expectations

Manual: open index.html — one page, stats visible, pipeline board visible
Manual: tap a sponsor card — expands inline with full details
Manual: drag a card from Contacted to Responded — card moves, counts update
Manual: toggle to List view — same data in table format
Manual: phone viewport — horizontal scroll works, cards readable, bottom nav visible
Manual: grep -r 'style=' sponsor-dashboard/ returns 0 results
Manual: grep -r '<script' sponsor-dashboard/ returns only <script src= (no inline)

Constraints

NO inline CSS — shared/style.css only
NO inline JS — shared/app.js only
NO Tailwind
NO separate detail/list pages — single page with expandable cards and view toggle
Mobile-first — Marcus manages sponsors from his phone
Follow existing shared/style.css patterns and naming conventions
Dark theme throughout
HTML5 Drag and Drop API for card movement (no library)
CSS animations for card expand/collapse (transition on max-height or similar)

Checklist

PR opened
sponsor-card.html deleted
sponsor-list.html deleted
Zero inline styles
Zero inline scripts
Drag-and-drop functional
No unrelated changes

arch-domain-sponsorship — domain model
westside-sponsors — tier definitions, active sponsors

### Type Feature ### Lineage Replaces westside-playground#54/#55. Dashboard works but violates playground conventions (inline CSS/JS) and takes too many steps to manage sponsors. This ticket consolidates into a single page with inline expandable cards and drag-and-drop. ### Repo `forgejo_admin/westside-playground` ### User Story As an admin on my phone, I want to see my entire sponsor pipeline, tap a card to see details, drag to update status, and add notes — all without leaving the page — so I manage sponsors in seconds, not minutes. ### Context Current sponsor dashboard has 3 separate HTML pages. That's 2-3 taps to do anything. Mobile-first means Marcus should open ONE page and see everything. Details expand inline (no page navigation). Status changes are drag-and-drop or tap-to-change. Design principle: **"Client sees all their data with as few steps as possible."** **MANDATORY: Read these files before writing ANY code:** - `shared/style.css` — all CSS goes here, NO inline styles - `shared/app.js` — all JS goes here, NO inline scripts - `admin.html` — structural template (nav, page-header, container, bottom-nav) - Current `sponsor-dashboard/index.html` — keep the good parts (dark theme, stats row, svelte-notes) ### File Targets Files the agent should modify: - `sponsor-dashboard/index.html` — rebuild as single-page app with board + inline details - `shared/style.css` — add/update sponsor-specific classes (drag states, expandable cards, modal) - `shared/app.js` — add sponsor interactivity (drag-and-drop, expand/collapse, view toggle, filter) Files the agent should DELETE: - `sponsor-dashboard/sponsor-card.html` — absorbed into inline expandable cards - `sponsor-dashboard/sponsor-list.html` — absorbed into list view toggle ### Acceptance Criteria **Single page architecture:** - [ ] ONE HTML file: `sponsor-dashboard/index.html` - [ ] sponsor-card.html and sponsor-list.html DELETED - [ ] NO inline `style=` attributes anywhere - [ ] NO inline `<script>` blocks — all JS in shared/app.js - [ ] All new CSS in shared/style.css following existing patterns **Stats bar:** - [ ] `.stats-row` at top: Total (44), Contacted (23), Responded (1), Committed (2), Declined (21) - [ ] Stats update dynamically when cards move (JS) **View toggle:** - [ ] Two buttons: "Board" and "List" — toggles between pipeline board and table view - [ ] Same page, same data, different layout - [ ] Board is default view **Pipeline board (board view):** - [ ] 6 columns: Prospect, Contacted, Responded, Negotiating, Committed, Declined - [ ] Column headers show count, colored top border matching status - [ ] Horizontal scroll on mobile - [ ] Cards are draggable between columns (HTML5 drag-and-drop API) - [ ] Drop target highlights when dragging over a column - [ ] Drag completes → card moves to new column, counts update **Rich sponsor cards:** - [ ] Compact state: business_name, category badge, tier badge (if set), last_contacted date - [ ] Responded/Negotiating/Committed cards also show contact_name + phone in compact state - [ ] Tap card → expands inline (slide-down animation) showing full detail panel - [ ] Expanded state: all fields — email, phone, contact_name, status dropdown, tier dropdown, notes textarea, amount fields, website link - [ ] "Save" button on expanded card (no-op in playground, just visual) - [ ] Tap again or tap "Close" → collapses back to compact - [ ] Only one card expanded at a time **List view:** - [ ] Table layout: business_name, category, status, tier, email, last_contacted - [ ] Sortable column headers (click to sort) - [ ] Filter dropdowns for status and category - [ ] Search input for business name - [ ] Same expand-on-tap behavior as board cards (or just show all fields in table row) **Mock data (matches real database state):** - Contacted (23): Crown Burgers, Raising Cane's x3, Cafe Rio, Dominos, Costa Vida, Sodalicious, Swig, Wingstop, Cafe Zupas, Panda Express, Big O Tires, Discount Tire, Tire Pros, Oakland Construction, First Utah Bank, Zions Bank x2, Buffalo Wild Wings, 7-Eleven, Professional Dental, Abundant Dental - Responded (1): Raising Cane's (contact: Chloe Greep, 626-802-0317, "wants to partner, asked for call") - NOTE: Update one of the 3 Raising Cane's entries to "responded" with Chloe's info - Negotiating (1): NanoReleaf (CBD therapy, tier TBD) - Committed (2): Snoopy THA Barber (Community Partner), Coach West Recruiting (Community Partner) - Declined (21): Bank of America, US Bank x2, Chick-fil-A, Chipotle, etc. (show first 5, collapse rest with "and 16 more...") **Svelte-notes annotations:** - [ ] Full `@route`, `@auth`, `@api`, `@state`, `@bottom-nav`, `@svelte-notes` comment block - [ ] Every interactive element annotated with its Svelte equivalent - [ ] CSS sections in shared/style.css annotated with `/* Svelte: SponsorCard.svelte */` etc. ### Test Expectations - [ ] Manual: open index.html — one page, stats visible, pipeline board visible - [ ] Manual: tap a sponsor card — expands inline with full details - [ ] Manual: drag a card from Contacted to Responded — card moves, counts update - [ ] Manual: toggle to List view — same data in table format - [ ] Manual: phone viewport — horizontal scroll works, cards readable, bottom nav visible - [ ] Manual: `grep -r 'style=' sponsor-dashboard/` returns 0 results - [ ] Manual: `grep -r '<script' sponsor-dashboard/` returns only `<script src=` (no inline) ### Constraints - NO inline CSS — shared/style.css only - NO inline JS — shared/app.js only - NO Tailwind - NO separate detail/list pages — single page with expandable cards and view toggle - Mobile-first — Marcus manages sponsors from his phone - Follow existing shared/style.css patterns and naming conventions - Dark theme throughout - HTML5 Drag and Drop API for card movement (no library) - CSS animations for card expand/collapse (transition on max-height or similar) ### Checklist - [ ] PR opened - [ ] sponsor-card.html deleted - [ ] sponsor-list.html deleted - [ ] Zero inline styles - [ ] Zero inline scripts - [ ] Drag-and-drop functional - [ ] No unrelated changes ### Related - `arch-domain-sponsorship` — domain model - `westside-sponsors` — tier definitions, active sponsors

Commenting is not possible because the repository is archived.

No labels

No milestone

No project

No assignees

1 participant

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

ldraney/westside-playground#56

No description provided.

Rows
Columns