---
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
