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

Story 1.2: Workspace Shell & Ant Design Foundation

Status: done

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)
7. Given an authenticated user views the workspace shell When the shell renders Then a Logout action is accessible from the shell header or user menu dropdown, clearly labeled “Log Out”, keyboard-accessible, and visible in all role workspaces (UX-DR10)
8. Given a user activates the Logout action When activated Then a Popconfirm prompt asks for confirmation before the logout flow is initiated — no silent or accidental logout

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
• Cover acceptance criteria #7 in implementation and tests (AC: #7)
  • Add user menu or header utility slot to workspace shell with accessible “Log Out” action (Ant Design Dropdown or Avatar menu)
  • Ensure logout control is visible and reachable via keyboard in all role workspaces
• Cover acceptance criteria #8 in implementation and tests (AC: #8)
  • Wrap logout action in Ant Design Popconfirm before invoking the OIDC logout flow
• 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.
• Added “Log Out” button to the WorkspaceShell header using Ant Design Popconfirm + LogoutOutlined icon — keyboard accessible, labeled, visible in all role workspaces (AC #7, AC #8).
• Added onLogout: () => Promise<void> prop to WorkspaceShell; App.tsx wires handleLogout callback that calls logout() from authContracts.ts then redirects to the Keycloak login URL.
• All 18 frontend tests pass; lint and build clean.

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.
• 2026-05-05: Added logout ACs (7, 8): accessible “Log Out” control in workspace shell header/user menu and Popconfirm guard. Sprint Change Proposal approved by Daniel.
• 2026-05-05: Implemented ACs 7 & 8 — Popconfirm-guarded “Log Out” button in header, onLogout prop wired through App.tsx. 18/18 frontend tests passing.