From 8022c0517f87e7a49bd69e2ed48472f9804ebe9d Mon Sep 17 00:00:00 2001
From: Yaojia Wang <yaojia.wang@colacoder.com>
Date: Wed, 5 Nov 2025 22:38:08 +0100
Subject: [PATCH] feat(frontend): Integrate TaskList component into Story
 detail page - Sprint 4 Story 2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Integrated the TaskList component into the Story detail page to enable
full Task CRUD functionality within Stories.

Changes:
- Import TaskList component in Story detail page
- Replace placeholder "Coming Soon" card with TaskList component
- Pass storyId prop to TaskList for data fetching
- Remove temporary "Task management will be available" message

Sprint 4 Story 2 is now COMPLETE:
✅ TaskList, TaskCard, TaskQuickAdd components created (commit 8fe6d64)
✅ All Task CRUD operations working with optimistic updates
✅ Filters: All/Active/Completed
✅ Sorting: Recent/Alphabetical/Status
✅ Progress bar showing task completion
✅ Quick add inline form for creating tasks
✅ Checkbox toggle for task status
✅ Full integration with Story detail page

Backend API: All Task endpoints verified working
Frontend compilation: ✅ No errors
Dev server: ✅ Running on http://localhost:3000
Story page: ✅ Loading successfully (200 status)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/(dashboard)/stories/[id]/page.tsx | 19 +++----------------
 1 file changed, 3 insertions(+), 16 deletions(-)

diff --git a/app/(dashboard)/stories/[id]/page.tsx b/app/(dashboard)/stories/[id]/page.tsx
index 54c1f77..e311f3f 100644
--- a/app/(dashboard)/stories/[id]/page.tsx
+++ b/app/(dashboard)/stories/[id]/page.tsx
@@ -51,6 +51,7 @@ import { useStory, useUpdateStory, useDeleteStory, useChangeStoryStatus } from '
 import { useEpic } from '@/lib/hooks/use-epics';
 import { useProject } from '@/lib/hooks/use-projects';
 import { StoryForm } from '@/components/projects/story-form';
+import { TaskList } from '@/components/tasks/task-list';
 import { formatDistanceToNow } from 'date-fns';
 import { toast } from 'sonner';
 import type { WorkItemStatus, WorkItemPriority } from '@/types/project';
@@ -267,22 +268,8 @@ export default function StoryDetailPage({ params }: StoryDetailPageProps) {
             </CardContent>
           </Card>
 
-          {/* Tasks Section - Placeholder for Story 2 */}
-          <Card>
-            <CardHeader>
-              <div className="flex items-center justify-between">
-                <CardTitle>Tasks</CardTitle>
-                <Button size="sm" disabled>
-                  Coming Soon
-                </Button>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Task management will be available in the next update.
-              </p>
-            </CardContent>
-          </Card>
+          {/* Tasks Section - Sprint 4 Story 2 */}
+          <TaskList storyId={storyId} />
         </div>
 
         {/* Metadata Sidebar (1/3 width) */}