--- story_id: sprint_4_story_1 sprint: sprint_4 priority: P0 status: completed story_points: 5 estimated_days: 3 created_date: 2025-11-05 completion_date: 2025-11-05 assignee: Frontend Team --- # Story 1: Story Detail Page Foundation **Sprint**: Sprint 4 **Priority**: P0 (Critical) **Estimated**: 3 days **Owner**: Frontend Team ## Description Create the Story detail page (`/stories/[id]`) to fix the critical 404 error when users click on Story cards. This page will display comprehensive Story information including title, description, status, priority, metadata, and parent Epic context using a two-column layout consistent with the existing Epic detail page. ## User Story **As a** project manager or developer, **I want** to view detailed Story information by clicking on a Story card, **So that** I can see the full Story description, acceptance criteria, Tasks, and manage Story metadata. ## Acceptance Criteria - [ ] Clicking Story card from Epic detail page navigates to `/stories/{id}` page (no 404 error) - [ ] Page displays Story title, description, status, priority, and all metadata - [ ] Two-column layout with main content area and metadata sidebar - [ ] Breadcrumb navigation shows: Projects > Project > Epics > Epic > Stories > Story - [ ] Metadata sidebar shows status, priority, assignee, time tracking, dates, and parent Epic card - [ ] Edit button opens Story form dialog with current Story data - [ ] Delete button shows confirmation dialog and removes Story - [ ] Loading states display skeleton loaders - [ ] Error states handle 404, network errors, and permission errors - [ ] Responsive design works on mobile, tablet, and desktop - [ ] Back button (or ESC key) navigates to parent Epic detail page ## Technical Requirements **New Route**: - `app/(dashboard)/stories/[id]/page.tsx` - Story detail page (400-500 lines) **New Components**: - `components/projects/story-header.tsx` - Story page header (100-150 lines) - `components/projects/story-metadata-sidebar.tsx` - Story sidebar (150-200 lines) **Reuse Pattern**: 85% similar to Epic detail page - Reference: `app/(dashboard)/epics/[id]/page.tsx` (534 lines) - Adapt Epic structure for Story context - Replace Stories list with Tasks list (Story 2 dependency) **API Integration**: - Use `useStory(id)` hook (already exists) - Use `useUpdateStory()` hook for Edit action - Use `useDeleteStory()` hook for Delete action **Layout Structure**: ``` ┌────────────────────────────────────────────────────────┐ │ [Breadcrumb Navigation] [Actions] │ ├────────────────────────────────────────────────────────┤ │ [←] Story Title [Edit][Delete] │ │ [Status Badge] [Priority Badge] │ ├────────────────────────────────────────────────────────┤ │ ┌────────────────────────┐ ┌──────────────────────┐ │ │ │ Main Content │ │ Metadata Sidebar │ │ │ │ - Description │ │ - Status │ │ │ │ - Acceptance Criteria │ │ - Priority │ │ │ │ - Tasks (Story 2) │ │ - Assignee │ │ │ │ │ │ - Time Tracking │ │ │ │ │ │ - Dates │ │ │ │ │ │ - Parent Epic Card │ │ │ └────────────────────────┘ └──────────────────────┘ │ └────────────────────────────────────────────────────────┘ ``` ## Tasks - [x] [Task 1](sprint_4_story_1_task_1.md) - Create Story detail page route and layout - [x] [Task 2](sprint_4_story_1_task_2.md) - Implement Story header component - [x] [Task 3](sprint_4_story_1_task_3.md) - Implement Story metadata sidebar component - [x] [Task 4](sprint_4_story_1_task_4.md) - Integrate Story API data loading and error handling - [x] [Task 5](sprint_4_story_1_task_5.md) - Add Edit and Delete actions with dialogs - [x] [Task 6](sprint_4_story_1_task_6.md) - Implement responsive design and accessibility **Progress**: 6/6 tasks completed ✅ ## Dependencies **Prerequisites**: - ✅ Story API ready (`GET /api/v1/stories/{id}`) - ✅ `useStory(id)` hook implemented (`lib/hooks/use-stories.ts`) - ✅ Story types defined (`types/project.ts`) - ✅ Story form component exists (`components/projects/story-form.tsx`) - ✅ Epic detail page as reference pattern **Blocked By**: None (can start immediately) **Blocks**: - Story 2 (Task Management) - depends on Story detail page existing ## Definition of Done - All 6 tasks completed - Story detail page accessible at `/stories/{id}` route - Page displays all Story information correctly - Layout consistent with Epic detail page - Edit and Delete actions working - Loading and error states implemented - Responsive design tested on all breakpoints - Accessibility requirements met (keyboard navigation, ARIA labels) - Code reviewed and approved - Git commit created with descriptive message ## Test Plan **Manual Testing**: 1. Navigate to Epic detail page 2. Click any Story card → Verify navigates to `/stories/{id}` (no 404) 3. Verify Story title, description, status, priority display correctly 4. Verify breadcrumb navigation shows full hierarchy 5. Verify metadata sidebar shows assignee, time, dates, parent Epic 6. Click Edit → Verify form opens with Story data 7. Edit Story → Verify changes saved and reflected 8. Click Delete → Verify confirmation dialog appears 9. Delete Story → Verify redirected to Epic detail page 10. Test invalid Story ID → Verify 404 error page 11. Test mobile/tablet/desktop responsive layouts 12. Test keyboard navigation (Tab, Enter, ESC) **E2E Test** (Playwright): ```typescript test('user can view story details', async ({ page }) => { await page.goto('/epics/epic-123'); await page.click('[data-testid="story-card"]'); await expect(page).toHaveURL(/\/stories\/story-\w+/); await expect(page.locator('h1')).toContainText('Story Title'); await expect(page.locator('[data-testid="story-status"]')).toBeVisible(); }); ``` **Verification Commands**: ```bash # Check route exists ls app/(dashboard)/stories/[id]/page.tsx # Run dev server and test npm run dev # Navigate to http://localhost:3000/stories/[valid-id] # Build for production npm run build # Verify no build errors ``` ## UX Design Reference **Design Document**: `docs/designs/STORY_UX_UI_DESIGN.md` - Section: "Story Detail Page Design" (lines 117-164) - Layout: Two-column (main content + metadata sidebar) - Breadcrumb: Projects > Project > Epics > Epic > Stories > Story - Header: Title, Status, Priority, Edit, Delete actions - Sidebar: Metadata fields and parent Epic card **Design Tokens**: ```css /* Status Colors */ Backlog: bg-slate-100 text-slate-700 Todo: bg-blue-100 text-blue-700 InProgress: bg-amber-100 text-amber-700 Done: bg-green-100 text-green-700 /* Priority Colors */ Low: bg-blue-100 text-blue-700 Medium: bg-yellow-100 text-yellow-700 High: bg-orange-100 text-orange-700 Critical: bg-red-100 text-red-700 /* Typography */ Story Title: 32px, Bold, Line-height 1.2 Story Description: 16px, Regular, Line-height 1.6 Metadata Label: 14px, Medium Metadata Value: 14px, Regular ``` ## Notes **Why This Matters**: - **Critical Bug**: Users currently see 404 error when clicking Story cards - **User Experience**: Enables Epic → Story → Task navigation - **Foundation**: Required for Story 2 (Task Management) - **Consistency**: Maintains design patterns established by Epic detail page **Code Reuse Strategy**: - Copy `app/(dashboard)/epics/[id]/page.tsx` structure - Replace `useEpic` → `useStory` - Replace `useStories` → `useTasks` (Story 2) - Update breadcrumb (add Story level) - Adapt sidebar (Parent Project → Parent Epic) - 85% code reuse, 50-60% faster development **Performance Targets**: - Page load time: < 1 second - Time to interactive: < 2 seconds - Lighthouse score: >= 90 - No layout shift (CLS < 0.1) **Accessibility Requirements** (WCAG 2.1 Level AA): - Keyboard navigation: All interactive elements - Focus indicators: 2px solid outline - ARIA labels: All buttons and links - Screen reader: Proper heading hierarchy (h1 → h2 → h3) - Color contrast: 4.5:1 minimum for text --- **Created**: 2025-11-05 by Frontend Agent **Updated**: 2025-11-05