feat(frontend): Create Sprint 4 Stories and Tasks for Story Management

Created comprehensive Story and Task files for Sprint 4 frontend implementation: Story 1: Story Detail Page Foundation (P0 Critical - 3 days) - 6 tasks: route creation, header, sidebar, data loading, Edit/Delete, responsive design - Fixes critical 404 error when clicking Story cards - Two-column layout consistent with Epic detail page Story 2: Task Management in Story Detail (P0 Critical - 2 days) - 6 tasks: API verification, hooks, TaskList, TaskCard, TaskForm, integration - Complete Task CRUD with checkbox status toggle - Filters, sorting, and optimistic UI updates Story 3: Enhanced Story Form (P1 High - 2 days) - 6 tasks: acceptance criteria, assignee selector, tags, story points, integration - Aligns with UX design specification - Backward compatible with existing Stories Story 4: Quick Add Story Workflow (P1 High - 2 days) - 5 tasks: inline form, keyboard shortcuts, batch creation, navigation - Rapid Story creation with minimal fields - Keyboard shortcut (Cmd/Ctrl + N) Story 5: Story Card Component (P2 Medium - 1 day) - 4 tasks: component variants, visual states, Task count, optimization - Reusable component with list/kanban/compact variants - React.memo optimization Story 6: Kanban Story Creation Enhancement (P2 Optional - 2 days) - 4 tasks: Epic card enhancement, inline form, animation, real-time updates - Contextual Story creation from Kanban - Stretch goal - implement only if ahead of schedule Total: 6 Stories, 31 Tasks, 12 days estimated Priority breakdown: P0 (2), P1 (2), P2 (2 optional) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 21:49:57 +01:00
parent b3c92042ed
commit 88d6413f81
18 changed files with 3629 additions and 0 deletions
--- a/docs/plans/sprint_4_story_1_task_1.md
+++ b/docs/plans/sprint_4_story_1_task_1.md
@@ -0,0 +1,152 @@
+---
+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.