ldraney/westside-playground

Archived

Fork 0

Commerce page: full @-comment spec + shared CSS/JS + complete DB schema mapping #50

New issue

Closed

opened 2026-04-06 22:01:27 +00:00 by forgejo_admin · 3 comments

forgejo_admin commented

2026-04-06 22:01:27 +00:00

Contributor

Type

Feature

Lineage

Upstream of forgejo_admin/westside-landing#226 (Svelte implementation). This ticket produces the Gate 1 deliverable that #226 promotes to production.

Repo

forgejo_admin/westside-playground

User Story

As Marcus (admin)
I want to see jersey orders, subscriptions, and contracts in a dedicated Commerce view
So that I can answer "who ordered what?" without scrolling through 59 player cards.

Maps to story:WS-S9 — "As an admin, I want to track payment status per player so that I know who owes what."

Context

commerce.html already exists as a rough prototype (created during scoping session). It needs to be brought up to SOP spec per sop-capacitor-mobile-lifecycle:

Full @-comment header mapping all API endpoints, state, interactivity, and gaps
Zero inline <style> — all CSS moved to shared/style.css
Zero inline <script> — all JS moved to shared/app.js
Complete DB schema coverage (gaps identified below)

Design principle: surface data with as few steps as possible.

DB fields to map (from Player model):

Jersey:

jersey_option (reversible, jersey_warmup, opt_out)
jersey_order_status (none, pending, paid, shipped)
jersey_size (YS, YM, YL, YXL, AS, AM, AL, AXL)
jersey_number (string 0-99)

Subscriptions:

subscription_status (active, past_due, canceled, none)
monthly_fee (integer, cents — $160 or $200)

Contracts:

contract_status (none, offered, signed)
contract_signed_at (datetime)
contract_signed_by (string)

Current gaps in prototype:

Missing shipped jersey status filter
Subscriptions conflate past_due and canceled as "Overdue"
Missing monthly_fee column in subscriptions
Missing contract_signed_at and contract_signed_by in contracts
Inline <style> block needs moving to shared/style.css
Inline <script> block needs moving to shared/app.js
@-comment header is incomplete (missing @state, @interactivity, @gaps, @complexity)

File Targets

Files the agent should modify or create:

commerce.html — rewrite with full @-comment spec, remove inline style/script, complete DB field mapping
shared/style.css — add commerce-specific styles (tab-bar, summary-row, data-table)
shared/app.js — add tab switching and filter logic for commerce page

Files the agent should NOT touch:

Other HTML pages — no changes to existing pages
shared/style.css existing rules — only append new rules

Acceptance Criteria

commerce.html has full @-comment header per sop-capacitor-mobile-lifecycle format
Zero inline <style> blocks in commerce.html
Zero inline <script> blocks in commerce.html (except minimal DOM wiring if needed)
Jerseys tab shows all 4 statuses: none, pending, paid, shipped
Subscriptions tab distinguishes past_due vs canceled (not lumped as "Overdue")
Subscriptions tab shows monthly_fee column
Contracts tab shows signed_at date and signed_by name
Filter tabs work for each of the three panels
Tab switching between Jerseys/Subscriptions/Contracts works
Page renders correctly on mobile (phone viewport)
https://playground.tail5b443a.ts.net/westside/commerce.html loads with no console errors

Test Expectations

No automated tests — static HTML playground
Manual: open on phone browser, verify all tabs, filters, mobile layout
Run command: N/A (static files, no build)

Constraints

Follow sop-capacitor-mobile-lifecycle @-comment spec format exactly
All CSS in shared/style.css, all JS in shared/app.js
Use existing design system tokens (--color-, --space-, --font-size-*)
Match existing badge classes (badge-paid, badge-pending, badge-behind, badge-registered)
Mock data should use real player names from production DB where possible

Checklist

PR opened
No inline styles or scripts
@-comment spec complete
All DB commerce fields mapped

forgejo_admin/westside-landing#226 — downstream Svelte implementation
sop-capacitor-mobile-lifecycle — playground SOP with @-comment format
project-westside-basketball — westside project page with user stories

### Type Feature ### Lineage Upstream of `forgejo_admin/westside-landing#226` (Svelte implementation). This ticket produces the Gate 1 deliverable that #226 promotes to production. ### Repo `forgejo_admin/westside-playground` ### User Story As Marcus (admin) I want to see jersey orders, subscriptions, and contracts in a dedicated Commerce view So that I can answer "who ordered what?" without scrolling through 59 player cards. Maps to `story:WS-S9` — "As an admin, I want to track payment status per player so that I know who owes what." ### Context `commerce.html` already exists as a rough prototype (created during scoping session). It needs to be brought up to SOP spec per `sop-capacitor-mobile-lifecycle`: - Full @-comment header mapping all API endpoints, state, interactivity, and gaps - Zero inline `<style>` — all CSS moved to `shared/style.css` - Zero inline `<script>` — all JS moved to `shared/app.js` - Complete DB schema coverage (gaps identified below) Design principle: surface data with as few steps as possible. **DB fields to map (from Player model):** Jersey: - `jersey_option` (reversible, jersey_warmup, opt_out) - `jersey_order_status` (none, pending, paid, shipped) - `jersey_size` (YS, YM, YL, YXL, AS, AM, AL, AXL) - `jersey_number` (string 0-99) Subscriptions: - `subscription_status` (active, past_due, canceled, none) - `monthly_fee` (integer, cents — $160 or $200) Contracts: - `contract_status` (none, offered, signed) - `contract_signed_at` (datetime) - `contract_signed_by` (string) **Current gaps in prototype:** - Missing `shipped` jersey status filter - Subscriptions conflate `past_due` and `canceled` as "Overdue" - Missing `monthly_fee` column in subscriptions - Missing `contract_signed_at` and `contract_signed_by` in contracts - Inline `<style>` block needs moving to `shared/style.css` - Inline `<script>` block needs moving to `shared/app.js` - @-comment header is incomplete (missing @state, @interactivity, @gaps, @complexity) ### File Targets Files the agent should modify or create: - `commerce.html` — rewrite with full @-comment spec, remove inline style/script, complete DB field mapping - `shared/style.css` — add commerce-specific styles (tab-bar, summary-row, data-table) - `shared/app.js` — add tab switching and filter logic for commerce page Files the agent should NOT touch: - Other HTML pages — no changes to existing pages - `shared/style.css` existing rules — only append new rules ### Acceptance Criteria - [ ] `commerce.html` has full @-comment header per sop-capacitor-mobile-lifecycle format - [ ] Zero inline `<style>` blocks in commerce.html - [ ] Zero inline `<script>` blocks in commerce.html (except minimal DOM wiring if needed) - [ ] Jerseys tab shows all 4 statuses: none, pending, paid, shipped - [ ] Subscriptions tab distinguishes past_due vs canceled (not lumped as "Overdue") - [ ] Subscriptions tab shows monthly_fee column - [ ] Contracts tab shows signed_at date and signed_by name - [ ] Filter tabs work for each of the three panels - [ ] Tab switching between Jerseys/Subscriptions/Contracts works - [ ] Page renders correctly on mobile (phone viewport) - [ ] `https://playground.tail5b443a.ts.net/westside/commerce.html` loads with no console errors ### Test Expectations - [ ] No automated tests — static HTML playground - [ ] Manual: open on phone browser, verify all tabs, filters, mobile layout - Run command: N/A (static files, no build) ### Constraints - Follow `sop-capacitor-mobile-lifecycle` @-comment spec format exactly - All CSS in `shared/style.css`, all JS in `shared/app.js` - Use existing design system tokens (--color-*, --space-*, --font-size-*) - Match existing badge classes (badge-paid, badge-pending, badge-behind, badge-registered) - Mock data should use real player names from production DB where possible ### Checklist - [ ] PR opened - [ ] No inline styles or scripts - [ ] @-comment spec complete - [ ] All DB commerce fields mapped ### Related - `forgejo_admin/westside-landing#226` — downstream Svelte implementation - `sop-capacitor-mobile-lifecycle` — playground SOP with @-comment format - `project-westside-basketball` — westside project page with user stories

forgejo_admin commented

2026-04-06 22:11:56 +00:00

Author

Contributor

Scope Review: NEEDS_REFINEMENT

Review note: review-865-2026-04-06

Issue is well-written with all Feature template sections present. File targets verified — all 3 files exist and gaps described in the issue are confirmed. Repo placement is correct.

Issues found:

story:marcus-admin is not a valid story code — project page uses WS-SXX format. Should be story:WS-S9 (admin payment tracking).
No architecture note exists for arch-admin-portal in pal-e-docs. Needs to be created.
Board item #863 has identical labels and a null title — possible duplicate or incomplete sibling that should be reconciled.

Action needed before dispatch:

[LABEL] Fix story label: marcus-admin → WS-S9
[SCOPE] Create arch-admin-portal architecture note
[SCOPE] Reconcile board item #863 (same labels, null title)

## Scope Review: NEEDS_REFINEMENT Review note: `review-865-2026-04-06` Issue is well-written with all Feature template sections present. File targets verified — all 3 files exist and gaps described in the issue are confirmed. Repo placement is correct. **Issues found:** - `story:marcus-admin` is not a valid story code — project page uses `WS-SXX` format. Should be `story:WS-S9` (admin payment tracking). - No architecture note exists for `arch-admin-portal` in pal-e-docs. Needs to be created. - Board item #863 has identical labels and a null title — possible duplicate or incomplete sibling that should be reconciled. **Action needed before dispatch:** 1. `[LABEL]` Fix story label: `marcus-admin` → `WS-S9` 2. `[SCOPE]` Create `arch-admin-portal` architecture note 3. `[SCOPE]` Reconcile board item #863 (same labels, null title)

forgejo_admin commented

2026-04-06 22:14:11 +00:00

Author

Contributor

Scope refinement (review-865 feedback):

Added explicit story:WS-S9 mapping to issue body (was story:marcus-admin, not a valid story code)
Board labels updated: arch:admin-portal → arch:westside-app, story:marcus-admin → story:WS-S9
Sibling board item #863 (westside-landing#226) given title and scope:svelte-promotion to distinguish from this playground ticket's scope:playground
Updated Related section to point to project-westside-basketball (where user stories live)

**Scope refinement (review-865 feedback):** 1. Added explicit `story:WS-S9` mapping to issue body (was `story:marcus-admin`, not a valid story code) 2. Board labels updated: `arch:admin-portal` → `arch:westside-app`, `story:marcus-admin` → `story:WS-S9` 3. Sibling board item #863 (westside-landing#226) given title and `scope:svelte-promotion` to distinguish from this playground ticket's `scope:playground` 4. Updated Related section to point to `project-westside-basketball` (where user stories live)

forgejo_admin commented

2026-04-06 22:16:14 +00:00

Author

Contributor

Scope Review: APPROVED

Review note: review-865-2026-04-06-v2
Re-review passed. All three refinement issues resolved (story label, arch label, sibling reconciliation). Template complete, file targets verified, traceability confirmed. One non-blocking [SCOPE] item: create arch-westside-app note (systemic gap across 29 board items). Ready for dispatch.

## Scope Review: APPROVED Review note: `review-865-2026-04-06-v2` Re-review passed. All three refinement issues resolved (story label, arch label, sibling reconciliation). Template complete, file targets verified, traceability confirmed. One non-blocking [SCOPE] item: create arch-westside-app note (systemic gap across 29 board items). Ready for dispatch.