---
task_id: sprint_4_story_1_task_1
story_id: sprint_4_story_1
sprint_id: sprint_4
status: not_started
type: frontend
assignee: Frontend Developer 1
created_date: 2025-11-05
estimated_hours: 4
---

# Task 1: Create Story Detail Page Route and Layout

## Description

Create the Story detail page route at `app/(dashboard)/stories/[id]/page.tsx` with a two-column layout structure. This task establishes the foundational page structure that will be enhanced with components in subsequent tasks.

## What to Do

1. Create new directory: `app/(dashboard)/stories/[id]/`
2. Create page component: `page.tsx`
3. Copy layout structure from Epic detail page (`app/(dashboard)/epics/[id]/page.tsx`)
4. Implement two-column grid layout (main content + sidebar)
5. Add basic page wrapper and container
6. Set up TypeScript types and props
7. Test route accessibility

**Key Changes from Epic Page**:
- Route: `/stories/[id]` instead of `/epics/[id]`
- Page title: "Story Detail" instead of "Epic Detail"
- Breadcrumb: Add Story level in hierarchy
- Prepare sections: Description, Acceptance Criteria (placeholder), Tasks (placeholder for Story 2)

## Files to Modify/Create

- `app/(dashboard)/stories/[id]/page.tsx` (new, ~100 lines initial structure)

## Implementation Details

```typescript
// app/(dashboard)/stories/[id]/page.tsx
import { Suspense } from 'react';
import { notFound } from 'next/navigation';
import { Card } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

interface StoryDetailPageProps {
  params: { id: string };
}

export default function StoryDetailPage({ params }: StoryDetailPageProps) {
  return (
    <div className="container mx-auto px-4 py-6 max-w-7xl">
      {/* Breadcrumb Navigation - Task 1 */}
      <div className="mb-4">
        {/* Placeholder for breadcrumb */}
      </div>

      {/* Story Header - Task 2 */}
      <div className="mb-6">
        {/* Placeholder for story header */}
      </div>

      {/* Two-column layout */}
      <div className="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6">
        {/* Main Content Column */}
        <div className="space-y-6">
          {/* Story Description Card */}
          <Card className="p-6">
            {/* Placeholder for description - Task 4 */}
          </Card>

          {/* Acceptance Criteria Card */}
          <Card className="p-6">
            {/* Placeholder for acceptance criteria - Story 3 */}
          </Card>

          {/* Tasks Section - Story 2 dependency */}
          <Card className="p-6">
            {/* Placeholder for tasks list - Story 2 */}
          </Card>
        </div>

        {/* Metadata Sidebar Column - Task 3 */}
        <aside>
          {/* Placeholder for metadata sidebar */}
        </aside>
      </div>
    </div>
  );
}

// Loading state
export function StoryDetailPageSkeleton() {
  return (
    <div className="container mx-auto px-4 py-6 max-w-7xl">
      <Skeleton className="h-4 w-64 mb-4" />
      <Skeleton className="h-12 w-96 mb-6" />
      <div className="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6">
        <div className="space-y-6">
          <Skeleton className="h-48 w-full" />
          <Skeleton className="h-32 w-full" />
          <Skeleton className="h-64 w-full" />
        </div>
        <Skeleton className="h-96 w-full" />
      </div>
    </div>
  );
}
```

## Acceptance Criteria

- [ ] Route `/stories/[id]` is accessible (no 404 error)
- [ ] Page renders with two-column layout on desktop
- [ ] Layout is responsive (single column on mobile)
- [ ] TypeScript types are properly defined
- [ ] No console errors or warnings
- [ ] Loading skeleton displays during data fetch

## Testing

```bash
# Start dev server
npm run dev

# Test route
# Navigate to: http://localhost:3000/stories/[any-valid-story-id]
# Should see basic page structure (not 404)

# Test responsive layout
# Resize browser window
# Desktop (> 1024px): Two columns
# Mobile (< 1024px): Single column
```

## Dependencies

**Prerequisites**:
- ✅ Next.js 15 app directory structure
- ✅ shadcn/ui Card and Skeleton components

**Blocks**:
- Task 2, 3, 4, 5, 6 (all depend on page structure existing)

## Estimated Time

4 hours

## Notes

This task creates the "skeleton" of the Story detail page. Subsequent tasks will fill in the components and functionality. Keep the structure simple and focus on layout correctness.