Campaign_Tracker/_bmad-output/implementation-artifacts/1-2-workspace-shell-ant-design-foundation.md

Story 1.2: Workspace Shell & Ant Design Foundation

Status: review

Story

As a any authenticated user, I want a consistent tri-pane application layout with the Ant Design visual system applied, so that I have a predictable, accessible, and keyboard-navigable operational environment from day one.

Acceptance Criteria

1. Given the app loads after authentication When an authenticated user enters the application Then the tri-pane layout renders with a left navigation pane, center content area, and collapsible right panel
2. Given the Ant Design token configuration is applied When the UI renders Then colorPrimary is #1F4E79, teal secondary is #0F766E, semantic status colors (success/warning/error/info/overdue) match the UX spec, and compact density profile is active (UX-DR1)
3. Given a user interacts with any focusable element When tabbing through the interface Then visible 2px focus indicators are present on all interactive elements with logical tab order (UX-DR9)
4. Given the viewport is 1280–1599px When the layout renders Then the right panel is collapsible and the tri-pane adapts to compact mode (UX-DR15)
5. Given the viewport is below 1280px When the layout renders Then a reduced read mode with a support notice is displayed and full editing is not available
6. Given any status indicator renders When viewed Then status is conveyed with both color and a text label or icon — never color alone (UX-DR12)

Tasks / Subtasks

• Implement story behavior in aligned backend/frontend modules (AC: #1)
  • Add or update API/service/UI components required by the story scope
  • Keep legacy Access entities read-only and route writes to extension-layer structures
• Cover acceptance criteria #2 in implementation and tests (AC: #2)
  • Add validation/error handling and UX state updates as needed
• Cover acceptance criteria #3 in implementation and tests (AC: #3)
  • Add validation/error handling and UX state updates as needed
• Cover acceptance criteria #4 in implementation and tests (AC: #4)
  • Add validation/error handling and UX state updates as needed
• Validate and document completion evidence
  • Verify build/tests for touched modules
  • Capture changed files and any migration/config implications

Dev Notes

• Follow Epic 1 architecture constraints: ASP.NET Core + React separation, RBAC-aware patterns, and immutable legacy tables.
• Reuse shared component and workflow patterns defined in UX and architecture docs; avoid parallel custom implementations.
• Keep changes scoped to this story; do not pull forward Epic 2+ features.

Project Structure Notes

• Backend: Campaign_Tracker.Server/
• Frontend: campaign-tracker-client/
• Story artifacts: _bmad-output/implementation-artifacts/

References

• Story source: _bmad-output/planning-artifacts/epics.md (Epic 1 / Story 1.2)
• Architecture constraints: _bmad-output/planning-artifacts/architecture.md
• UX patterns: _bmad-output/planning-artifacts/ux-design-specification.md

Dev Agent Record

Agent Model Used

GPT-5 Codex

Debug Log References

• Story generated from epic source and architecture/UX planning artifacts.
• 2026-05-05: Added failing frontend contract tests for workspace tokens, breakpoints, edit gating, right-panel collapse rules, and non-color-only statuses.
• 2026-05-05: Verified npm test, npm run lint, npm run build, and dotnet test campaign-tracker.sln.

Implementation Plan

• Replace the starter Vite screen with an Ant Design ConfigProvider and tri-pane workspace shell.
• Centralize UX tokens, status semantics, and breakpoint rules in a tested workspace contract module.
• Keep backend and legacy data untouched for this shell story; expose only read-only operational sample context in the UI.

Completion Notes List

• Story context created and marked ready-for-dev.
• Implemented the authenticated operations workspace shell with Ant Design ConfigProvider, compact theme tokens, left navigation pane, center operations grid, and right risk/provenance panel.
• Added responsive desktop behavior: compact tri-pane with collapsible right panel from 1280px to 1599px, persistent right panel at 1600px+, and reduced read mode with disabled editing below 1280px.
• Added visible 2px focus indicators and status indicators that pair semantic colors with icons and text labels.
• No backend write path was added; legacy Access data is represented as read-only source context and future updates are labeled for extension records.

File List

• _bmad-output/implementation-artifacts/sprint-status.yaml
• _bmad-output/implementation-artifacts/1-2-workspace-shell-ant-design-foundation.md
• campaign-tracker-client/package.json
• campaign-tracker-client/package-lock.json
• campaign-tracker-client/src/App.css
• campaign-tracker-client/src/App.tsx
• campaign-tracker-client/src/index.css
• campaign-tracker-client/src/main.tsx
• campaign-tracker-client/src/workspace/WorkspaceShell.css
• campaign-tracker-client/src/workspace/WorkspaceShell.tsx
• campaign-tracker-client/src/workspace/workspaceContracts.test.ts
• campaign-tracker-client/src/workspace/workspaceContracts.ts

Change Log

• 2026-05-05: Implemented Workspace Shell & Ant Design Foundation and marked story ready for review.