ColaFlow/docs/plans/sprint_4_story_1_task_1.md

task_id, story_id, sprint_id, status, type, assignee, created_date, estimated_hours

task_id	story_id	sprint_id	status	type	assignee	created_date	estimated_hours
sprint_4_story_1_task_1	sprint_4_story_1	sprint_4	not_started	frontend	Frontend Developer 1	2025-11-05	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

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

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