Files

Yaojia Wang d3ef2c1441 docs: Mark Sprint 4 Story 1 as completed with implementation summary

2025-11-05 22:02:30 +01:00

8.8 KiB

Raw Blame History

story_id, sprint, priority, status, story_points, estimated_days, created_date, completion_date, assignee

story_id	sprint	priority	status	story_points	estimated_days	created_date	completion_date	assignee
sprint_4_story_1	sprint_4	P0	completed	5	3	2025-11-05	2025-11-05	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

Task 1 - Create Story detail page route and layout
Task 2 - Implement Story header component
Task 3 - Implement Story metadata sidebar component
Task 4 - Integrate Story API data loading and error handling
Task 5 - Add Edit and Delete actions with dialogs
Task 6 - 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:

Navigate to Epic detail page
Click any Story card → Verify navigates to /stories/{id} (no 404)
Verify Story title, description, status, priority display correctly
Verify breadcrumb navigation shows full hierarchy
Verify metadata sidebar shows assignee, time, dates, parent Epic
Click Edit → Verify form opens with Story data
Edit Story → Verify changes saved and reflected
Click Delete → Verify confirmation dialog appears
Delete Story → Verify redirected to Epic detail page
Test invalid Story ID → Verify 404 error page
Test mobile/tablet/desktop responsive layouts
Test keyboard navigation (Tab, Enter, ESC)

E2E Test (Playwright):

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:

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

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

8.8 KiB Raw Blame History