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

Story 1.2: Workspace Shell & Ant Design Foundation

Status: ready-for-dev

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.

Completion Notes List

• Story context created and marked ready-for-dev.

File List

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