From d92e548f8854686309921de7770b7c017ce1eceb Mon Sep 17 00:00:00 2001
From: janpeter visser <janpetervisser2@gmail.com>
Date: Fri, 24 Apr 2026 11:51:27 +0200
Subject: [PATCH] feat: ST-301-ST-312 M3 Sprint Backlog en Sprint Planning

- useSprintStore met sprintStoryOrder/taskOrder (ST-301)
- Sprint aanmaken modal met Sprint Goal validatie (ST-302)
- Sprint Backlog pagina SplitPane layout met Sprint Goal header (ST-303)
- Stories toevoegen aan Sprint via knop in rechterpaneel (ST-304)
- Sprint Backlog volgorde aanpassen via dnd-kit (ST-305)
- Story uit Sprint verwijderen met status terug naar OPEN (ST-306)
- Sprint Planning pagina SplitPane met story selectie (ST-307)
- Taken aanmaken inline in rechterpaneel (ST-308)
- Taak drag-and-drop verticaal met optimistische update (ST-309)
- Taakstatus toggle TO_DO/IN_PROGRESS/DONE met voortgangsindicator (ST-310)
- Taak inline bewerken en verwijderen (ST-311)
- Sprint afronden dialoog met per-story Done/Terug keuze (ST-312)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 actions/sprints.ts                            | 181 +++++++++++++
 actions/tasks.ts                              | 141 ++++++++++
 app/(app)/products/[id]/page.tsx              |  26 +-
 app/(app)/products/[id]/sprint/page.tsx       | 119 +++++++++
 .../products/[id]/sprint/planning/page.tsx    | 135 ++++++++++
 components/sprint/planning-left.tsx           |  57 ++++
 components/sprint/planning-right-client.tsx   |  39 +++
 components/sprint/sprint-backlog.tsx          | 246 ++++++++++++++++++
 components/sprint/sprint-header.tsx           | 144 ++++++++++
 components/sprint/start-sprint-button.tsx     |  96 +++++++
 components/sprint/task-list.tsx               | 245 +++++++++++++++++
 stores/sprint-store.ts                        |  57 ++++
 12 files changed, 1480 insertions(+), 6 deletions(-)
 create mode 100644 actions/sprints.ts
 create mode 100644 actions/tasks.ts
 create mode 100644 app/(app)/products/[id]/sprint/page.tsx
 create mode 100644 app/(app)/products/[id]/sprint/planning/page.tsx
 create mode 100644 components/sprint/planning-left.tsx
 create mode 100644 components/sprint/planning-right-client.tsx
 create mode 100644 components/sprint/sprint-backlog.tsx
 create mode 100644 components/sprint/sprint-header.tsx
 create mode 100644 components/sprint/start-sprint-button.tsx
 create mode 100644 components/sprint/task-list.tsx
 create mode 100644 stores/sprint-store.ts

diff --git a/actions/sprints.ts b/actions/sprints.ts
new file mode 100644
index 0000000..583fffb
--- /dev/null
+++ b/actions/sprints.ts
@@ -0,0 +1,181 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { cookies } from 'next/headers'
+import { getIronSession } from 'iron-session'
+import { z } from 'zod'
+import { prisma } from '@/lib/prisma'
+import { SessionData, sessionOptions } from '@/lib/session'
+
+async function getSession() {
+  return getIronSession<SessionData>(await cookies(), sessionOptions)
+}
+
+async function verifyProductOwnership(productId: string, userId: string) {
+  return prisma.product.findFirst({ where: { id: productId, user_id: userId } })
+}
+
+// --- Sprint ---
+
+export async function createSprintAction(_prevState: unknown, formData: FormData) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const parsed = z.object({
+    productId: z.string(),
+    sprint_goal: z.string().min(1, 'Sprint Goal is verplicht').max(500),
+  }).safeParse({
+    productId: formData.get('productId'),
+    sprint_goal: formData.get('sprint_goal'),
+  })
+  if (!parsed.success) return { error: parsed.error.flatten().fieldErrors }
+
+  const product = await verifyProductOwnership(parsed.data.productId, session.userId)
+  if (!product) return { error: 'Product niet gevonden' }
+
+  const existing = await prisma.sprint.findFirst({
+    where: { product_id: parsed.data.productId, status: 'ACTIVE' },
+  })
+  if (existing) return { error: 'Er is al een actieve Sprint voor dit product', sprintId: existing.id }
+
+  const sprint = await prisma.sprint.create({
+    data: {
+      product_id: parsed.data.productId,
+      sprint_goal: parsed.data.sprint_goal,
+      status: 'ACTIVE',
+    },
+  })
+
+  revalidatePath(`/products/${parsed.data.productId}`)
+  return { success: true, sprintId: sprint.id }
+}
+
+export async function updateSprintGoalAction(_prevState: unknown, formData: FormData) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const id = formData.get('id') as string
+  const sprint_goal = formData.get('sprint_goal') as string
+  if (!sprint_goal?.trim()) return { error: 'Sprint Goal is verplicht' }
+
+  const sprint = await prisma.sprint.findFirst({
+    where: { id, product: { user_id: session.userId } },
+  })
+  if (!sprint) return { error: 'Sprint niet gevonden' }
+
+  await prisma.sprint.update({ where: { id }, data: { sprint_goal } })
+  revalidatePath(`/products/${sprint.product_id}/sprint`)
+  return { success: true }
+}
+
+export async function addStoryToSprintAction(sprintId: string, storyId: string) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const sprint = await prisma.sprint.findFirst({
+    where: { id: sprintId, product: { user_id: session.userId } },
+  })
+  if (!sprint) return { error: 'Sprint niet gevonden' }
+
+  const story = await prisma.story.findFirst({
+    where: { id: storyId, product: { user_id: session.userId } },
+  })
+  if (!story) return { error: 'Story niet gevonden' }
+
+  // Sort order = last in sprint + 1
+  const last = await prisma.story.findFirst({
+    where: { sprint_id: sprintId },
+    orderBy: { sort_order: 'desc' },
+  })
+
+  await prisma.story.update({
+    where: { id: storyId },
+    data: { sprint_id: sprintId, status: 'IN_SPRINT', sort_order: (last?.sort_order ?? 0) + 1.0 },
+  })
+
+  revalidatePath(`/products/${sprint.product_id}/sprint`)
+  revalidatePath(`/products/${sprint.product_id}`)
+  return { success: true }
+}
+
+export async function removeStoryFromSprintAction(storyId: string) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const story = await prisma.story.findFirst({
+    where: { id: storyId, product: { user_id: session.userId } },
+    include: { sprint: true },
+  })
+  if (!story) return { error: 'Story niet gevonden' }
+
+  const productId = story.product_id
+
+  await prisma.story.update({
+    where: { id: storyId },
+    data: { sprint_id: null, status: 'OPEN' },
+  })
+
+  revalidatePath(`/products/${productId}/sprint`)
+  revalidatePath(`/products/${productId}`)
+  return { success: true }
+}
+
+export async function reorderSprintStoriesAction(sprintId: string, orderedIds: string[]) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const sprint = await prisma.sprint.findFirst({
+    where: { id: sprintId, product: { user_id: session.userId } },
+  })
+  if (!sprint) return { error: 'Sprint niet gevonden' }
+
+  await prisma.$transaction(
+    orderedIds.map((id, i) =>
+      prisma.story.update({ where: { id }, data: { sort_order: i + 1.0 } })
+    )
+  )
+
+  revalidatePath(`/products/${sprint.product_id}/sprint`)
+  return { success: true }
+}
+
+export async function completeSprintAction(
+  sprintId: string,
+  decisions: Record<string, 'DONE' | 'OPEN'>
+) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const sprint = await prisma.sprint.findFirst({
+    where: { id: sprintId, product: { user_id: session.userId } },
+  })
+  if (!sprint) return { error: 'Sprint niet gevonden' }
+
+  await prisma.$transaction([
+    // Update all story statuses based on decisions
+    ...Object.entries(decisions).map(([storyId, status]) =>
+      prisma.story.update({
+        where: { id: storyId },
+        data: {
+          status,
+          sprint_id: status === 'OPEN' ? null : undefined,
+        },
+      })
+    ),
+    // Close the sprint
+    prisma.sprint.update({
+      where: { id: sprintId },
+      data: { status: 'COMPLETED', completed_at: new Date() },
+    }),
+  ])
+
+  revalidatePath(`/products/${sprint.product_id}`)
+  revalidatePath(`/products/${sprint.product_id}/sprint`)
+  return { success: true }
+}
diff --git a/actions/tasks.ts b/actions/tasks.ts
new file mode 100644
index 0000000..1b8a2cf
--- /dev/null
+++ b/actions/tasks.ts
@@ -0,0 +1,141 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { cookies } from 'next/headers'
+import { getIronSession } from 'iron-session'
+import { z } from 'zod'
+import { prisma } from '@/lib/prisma'
+import { SessionData, sessionOptions } from '@/lib/session'
+
+async function getSession() {
+  return getIronSession<SessionData>(await cookies(), sessionOptions)
+}
+
+const taskSchema = z.object({
+  title: z.string().min(1, 'Titel is verplicht').max(200),
+  description: z.string().max(1000).optional(),
+  priority: z.coerce.number().int().min(1).max(4),
+})
+
+export async function createTaskAction(_prevState: unknown, formData: FormData) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const storyId = formData.get('storyId') as string
+  const sprintId = formData.get('sprintId') as string
+
+  const parsed = taskSchema.safeParse({
+    title: formData.get('title'),
+    description: formData.get('description') || undefined,
+    priority: formData.get('priority') ?? 2,
+  })
+  if (!parsed.success) return { error: parsed.error.flatten().fieldErrors }
+
+  const story = await prisma.story.findFirst({
+    where: { id: storyId, product: { user_id: session.userId } },
+  })
+  if (!story) return { error: 'Story niet gevonden' }
+
+  const last = await prisma.task.findFirst({
+    where: { story_id: storyId },
+    orderBy: { sort_order: 'desc' },
+  })
+
+  const task = await prisma.task.create({
+    data: {
+      story_id: storyId,
+      sprint_id: sprintId || null,
+      title: parsed.data.title,
+      description: parsed.data.description ?? null,
+      priority: parsed.data.priority,
+      sort_order: (last?.sort_order ?? 0) + 1.0,
+      status: 'TO_DO',
+    },
+  })
+
+  revalidatePath(`/products/${story.product_id}/sprint/planning`)
+  return { success: true, task }
+}
+
+export async function updateTaskAction(_prevState: unknown, formData: FormData) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const id = formData.get('id') as string
+  const parsed = taskSchema.safeParse({
+    title: formData.get('title'),
+    description: formData.get('description') || undefined,
+    priority: formData.get('priority'),
+  })
+  if (!parsed.success) return { error: parsed.error.flatten().fieldErrors }
+
+  const task = await prisma.task.findFirst({
+    where: { id },
+    include: { story: { include: { product: true } } },
+  })
+  if (!task || task.story.product.user_id !== session.userId) return { error: 'Taak niet gevonden' }
+
+  await prisma.task.update({
+    where: { id },
+    data: { title: parsed.data.title, description: parsed.data.description ?? null, priority: parsed.data.priority },
+  })
+
+  revalidatePath(`/products/${task.story.product_id}/sprint/planning`)
+  return { success: true }
+}
+
+export async function updateTaskStatusAction(id: string, status: 'TO_DO' | 'IN_PROGRESS' | 'DONE') {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const task = await prisma.task.findFirst({
+    where: { id },
+    include: { story: { include: { product: true } } },
+  })
+  if (!task || task.story.product.user_id !== session.userId) return { error: 'Taak niet gevonden' }
+
+  await prisma.task.update({ where: { id }, data: { status } })
+
+  revalidatePath(`/products/${task.story.product_id}/sprint/planning`)
+  return { success: true }
+}
+
+export async function deleteTaskAction(id: string) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const task = await prisma.task.findFirst({
+    where: { id },
+    include: { story: { include: { product: true } } },
+  })
+  if (!task || task.story.product.user_id !== session.userId) return { error: 'Taak niet gevonden' }
+
+  await prisma.task.delete({ where: { id } })
+
+  revalidatePath(`/products/${task.story.product_id}/sprint/planning`)
+  return { success: true }
+}
+
+export async function reorderTasksAction(storyId: string, orderedIds: string[]) {
+  const session = await getSession()
+  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+
+  const story = await prisma.story.findFirst({
+    where: { id: storyId, product: { user_id: session.userId } },
+  })
+  if (!story) return { error: 'Story niet gevonden' }
+
+  await prisma.$transaction(
+    orderedIds.map((id, i) =>
+      prisma.task.update({ where: { id }, data: { sort_order: i + 1.0 } })
+    )
+  )
+
+  revalidatePath(`/products/${story.product_id}/sprint/planning`)
+  return { success: true }
+}
diff --git a/app/(app)/products/[id]/page.tsx b/app/(app)/products/[id]/page.tsx
index 03e6204..e6d35d2 100644
--- a/app/(app)/products/[id]/page.tsx
+++ b/app/(app)/products/[id]/page.tsx
@@ -7,6 +7,7 @@ import { SplitPane } from '@/components/split-pane/split-pane'
 import { PbiList } from '@/components/backlog/pbi-list'
 import { StoryPanel } from '@/components/backlog/story-panel'
 import type { Story } from '@/components/backlog/story-panel'
+import { StartSprintButton } from '@/components/sprint/start-sprint-button'
 import Link from 'next/link'
 
 interface Props {
@@ -22,6 +23,10 @@ export default async function ProductBacklogPage({ params }: Props) {
   })
   if (!product) notFound()
 
+  const activeSprint = await prisma.sprint.findFirst({
+    where: { product_id: id, status: 'ACTIVE' },
+  })
+
   const pbis = await prisma.pbi.findMany({
     where: { product_id: id },
     orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
@@ -60,12 +65,21 @@ export default async function ProductBacklogPage({ params }: Props) {
             <p className="text-xs text-muted-foreground mt-0.5">{product.description}</p>
           )}
         </div>
-        <Link
-          href={`/products/${id}/settings`}
-          className="text-xs text-muted-foreground hover:text-foreground"
-        >
-          Instellingen
-        </Link>
+        <div className="flex items-center gap-3">
+          {activeSprint ? (
+            <Link href={`/products/${id}/sprint`} className="text-xs text-primary hover:underline font-medium">
+              Sprint actief →
+            </Link>
+          ) : (
+            !isDemo && <StartSprintButton productId={id} />
+          )}
+          <Link
+            href={`/products/${id}/settings`}
+            className="text-xs text-muted-foreground hover:text-foreground"
+          >
+            Instellingen
+          </Link>
+        </div>
       </div>
 
       {/* Split pane */}
diff --git a/app/(app)/products/[id]/sprint/page.tsx b/app/(app)/products/[id]/sprint/page.tsx
new file mode 100644
index 0000000..f6c15de
--- /dev/null
+++ b/app/(app)/products/[id]/sprint/page.tsx
@@ -0,0 +1,119 @@
+import { notFound, redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { getIronSession } from 'iron-session'
+import { SessionData, sessionOptions } from '@/lib/session'
+import { prisma } from '@/lib/prisma'
+import { SplitPane } from '@/components/split-pane/split-pane'
+import { SprintBacklogLeft, SprintBacklogRight } from '@/components/sprint/sprint-backlog'
+import { SprintHeader } from '@/components/sprint/sprint-header'
+import type { SprintStory, PbiWithStories } from '@/components/sprint/sprint-backlog'
+import Link from 'next/link'
+
+interface Props {
+  params: Promise<{ id: string }>
+}
+
+export default async function SprintBacklogPage({ params }: Props) {
+  const { id } = await params
+  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
+
+  const product = await prisma.product.findFirst({
+    where: { id, user_id: session.userId },
+  })
+  if (!product) notFound()
+
+  const sprint = await prisma.sprint.findFirst({
+    where: { product_id: id, status: 'ACTIVE' },
+  })
+  if (!sprint) redirect(`/products/${id}`)
+
+  // Stories in this sprint
+  const sprintStories = await prisma.story.findMany({
+    where: { sprint_id: sprint.id },
+    orderBy: { sort_order: 'asc' },
+    include: { tasks: { select: { id: true, status: true } } },
+  })
+
+  const sprintStoryItems: SprintStory[] = sprintStories.map(s => ({
+    id: s.id,
+    title: s.title,
+    priority: s.priority,
+    status: s.status,
+    taskCount: s.tasks.length,
+    doneCount: s.tasks.filter(t => t.status === 'DONE').length,
+  }))
+
+  // All PBIs with their non-sprint stories for the right panel
+  const pbis = await prisma.pbi.findMany({
+    where: { product_id: id },
+    orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
+    include: {
+      stories: {
+        orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
+      },
+    },
+  })
+
+  const pbisWithStories: PbiWithStories[] = pbis
+    .filter(pbi => pbi.stories.length > 0)
+    .map(pbi => ({
+      id: pbi.id,
+      title: pbi.title,
+      stories: pbi.stories.map(s => ({
+        id: s.id,
+        title: s.title,
+        priority: s.priority,
+        status: s.status,
+        taskCount: 0,
+        doneCount: 0,
+      })),
+    }))
+
+  const sprintStoryIds = new Set(sprintStories.map(s => s.id))
+  const isDemo = session.isDemo ?? false
+
+  return (
+    <div className="flex flex-col h-full">
+      <SprintHeader
+        productId={id}
+        productName={product.name}
+        sprint={sprint}
+        isDemo={isDemo}
+        sprintStories={sprintStoryItems}
+      />
+
+      <div className="flex-1 overflow-hidden">
+        <SplitPane
+          storageKey={`sprint-${id}`}
+          left={
+            <SprintBacklogLeft
+              sprintId={sprint.id}
+              stories={sprintStoryItems}
+              isDemo={isDemo}
+              selectedStoryId={null}
+              onSelectStory={() => {}}
+            />
+          }
+          right={
+            <SprintBacklogRight
+              sprintId={sprint.id}
+              pbisWithStories={pbisWithStories}
+              sprintStoryIds={sprintStoryIds}
+              isDemo={isDemo}
+              onStoryAdded={() => {}}
+            />
+          }
+        />
+      </div>
+
+      <div className="border-t border-border px-4 py-2 bg-surface-container-low shrink-0 flex items-center gap-4">
+        <Link href={`/products/${id}/sprint/planning`} className="text-sm text-primary hover:underline">
+          Sprint Planning →
+        </Link>
+        <Link href={`/products/${id}`} className="text-sm text-muted-foreground hover:text-foreground">
+          ← Product Backlog
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/app/(app)/products/[id]/sprint/planning/page.tsx b/app/(app)/products/[id]/sprint/planning/page.tsx
new file mode 100644
index 0000000..dae6818
--- /dev/null
+++ b/app/(app)/products/[id]/sprint/planning/page.tsx
@@ -0,0 +1,135 @@
+import { notFound, redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { getIronSession } from 'iron-session'
+import { SessionData, sessionOptions } from '@/lib/session'
+import { prisma } from '@/lib/prisma'
+import { SplitPane } from '@/components/split-pane/split-pane'
+import { PlanningLeft } from '@/components/sprint/planning-left'
+import { TaskList } from '@/components/sprint/task-list'
+import type { Task } from '@/components/sprint/task-list'
+import { SprintHeader } from '@/components/sprint/sprint-header'
+import type { SprintStory } from '@/components/sprint/sprint-backlog'
+import Link from 'next/link'
+
+interface Props {
+  params: Promise<{ id: string }>
+}
+
+export default async function SprintPlanningPage({ params }: Props) {
+  const { id } = await params
+  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
+
+  const product = await prisma.product.findFirst({
+    where: { id, user_id: session.userId },
+  })
+  if (!product) notFound()
+
+  const sprint = await prisma.sprint.findFirst({
+    where: { product_id: id, status: 'ACTIVE' },
+  })
+  if (!sprint) redirect(`/products/${id}`)
+
+  const sprintStories = await prisma.story.findMany({
+    where: { sprint_id: sprint.id },
+    orderBy: { sort_order: 'asc' },
+    include: {
+      tasks: {
+        orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
+      },
+    },
+  })
+
+  const sprintStoryItems: SprintStory[] = sprintStories.map(s => ({
+    id: s.id,
+    title: s.title,
+    priority: s.priority,
+    status: s.status,
+    taskCount: s.tasks.length,
+    doneCount: s.tasks.filter(t => t.status === 'DONE').length,
+  }))
+
+  // Tasks by story
+  const tasksByStory: Record<string, Task[]> = {}
+  for (const story of sprintStories) {
+    tasksByStory[story.id] = story.tasks.map(t => ({
+      id: t.id,
+      title: t.title,
+      description: t.description,
+      priority: t.priority,
+      status: t.status,
+      story_id: t.story_id,
+      sprint_id: t.sprint_id,
+    }))
+  }
+
+  const isDemo = session.isDemo ?? false
+
+  return (
+    <div className="flex flex-col h-full">
+      <SprintHeader
+        productId={id}
+        productName={product.name}
+        sprint={sprint}
+        isDemo={isDemo}
+        sprintStories={sprintStoryItems}
+      />
+
+      <div className="flex-1 overflow-hidden">
+        <SplitPane
+          storageKey={`planning-${id}`}
+          left={
+            <PlanningLeft
+              stories={sprintStoryItems}
+            />
+          }
+          right={
+            <PlanningRight
+              sprintId={sprint.id}
+              productId={id}
+              stories={sprintStoryItems}
+              tasksByStory={tasksByStory}
+              isDemo={isDemo}
+            />
+          }
+        />
+      </div>
+
+      <div className="border-t border-border px-4 py-2 bg-surface-container-low shrink-0">
+        <Link href={`/products/${id}/sprint`} className="text-sm text-muted-foreground hover:text-foreground">
+          ← Sprint Backlog
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+// Right panel — shows tasks of selected story
+function PlanningRight({
+  sprintId,
+  productId,
+  stories,
+  tasksByStory,
+  isDemo,
+}: {
+  sprintId: string
+  productId: string
+  stories: SprintStory[]
+  tasksByStory: Record<string, Task[]>
+  isDemo: boolean
+}) {
+  // This is a Server Component wrapper — PlanningLeft manages selection via URL/store
+  // We render TaskList for the first story if only one, or show instruction
+  // The actual selection is client-side via PlanningLeft
+  return (
+    <PlanningRightClient
+      sprintId={sprintId}
+      productId={productId}
+      stories={stories}
+      tasksByStory={tasksByStory}
+      isDemo={isDemo}
+    />
+  )
+}
+
+// We need a client component for the right side that reads selection store
+import { PlanningRightClient } from '@/components/sprint/planning-right-client'
diff --git a/components/sprint/planning-left.tsx b/components/sprint/planning-left.tsx
new file mode 100644
index 0000000..73b3917
--- /dev/null
+++ b/components/sprint/planning-left.tsx
@@ -0,0 +1,57 @@
+'use client'
+
+import { useSelectionStore } from '@/stores/selection-store'
+import { PanelNavBar } from '@/components/shared/panel-nav-bar'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+import type { SprintStory } from './sprint-backlog'
+
+const PRIORITY_COLORS: Record<number, string> = {
+  1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
+  2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
+  3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
+  4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
+}
+const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
+
+interface PlanningLeftProps {
+  stories: SprintStory[]
+}
+
+export function PlanningLeft({ stories }: PlanningLeftProps) {
+  const { selectedStoryId, selectStory } = useSelectionStore()
+
+  return (
+    <div className="flex flex-col h-full">
+      <PanelNavBar title="Sprint Backlog" />
+      <div className="flex-1 overflow-y-auto">
+        {stories.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center mt-8 px-4">
+            Geen stories in de Sprint.
+          </p>
+        ) : (
+          stories.map(story => (
+            <div
+              key={story.id}
+              onClick={() => selectStory(story.id)}
+              className={cn(
+                'flex items-center gap-3 px-4 py-2.5 border-b border-border cursor-pointer transition-colors hover:bg-surface-container',
+                selectedStoryId === story.id && 'bg-primary-container text-primary-container-foreground'
+              )}
+            >
+              <div className="flex-1 min-w-0">
+                <p className="text-sm truncate">{story.title}</p>
+                <div className="flex items-center gap-1.5 mt-0.5">
+                  <Badge className={cn('text-[10px] px-1.5 py-0 border', PRIORITY_COLORS[story.priority])}>
+                    {PRIORITY_LABELS[story.priority]}
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">{story.doneCount}/{story.taskCount} klaar</span>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/sprint/planning-right-client.tsx b/components/sprint/planning-right-client.tsx
new file mode 100644
index 0000000..2c5ad2a
--- /dev/null
+++ b/components/sprint/planning-right-client.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { useSelectionStore } from '@/stores/selection-store'
+import { TaskList } from './task-list'
+import type { Task } from './task-list'
+import type { SprintStory } from './sprint-backlog'
+
+interface PlanningRightClientProps {
+  sprintId: string
+  productId: string
+  stories: SprintStory[]
+  tasksByStory: Record<string, Task[]>
+  isDemo: boolean
+}
+
+export function PlanningRightClient({ sprintId, productId, stories, tasksByStory, isDemo }: PlanningRightClientProps) {
+  const { selectedStoryId } = useSelectionStore()
+
+  const story = stories.find(s => s.id === selectedStoryId)
+  const tasks = selectedStoryId ? (tasksByStory[selectedStoryId] ?? []) : []
+
+  if (!selectedStoryId || !story) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-sm text-muted-foreground">Selecteer een story om de taken te bekijken.</p>
+      </div>
+    )
+  }
+
+  return (
+    <TaskList
+      storyId={selectedStoryId}
+      sprintId={sprintId}
+      productId={productId}
+      tasks={tasks}
+      isDemo={isDemo}
+    />
+  )
+}
diff --git a/components/sprint/sprint-backlog.tsx b/components/sprint/sprint-backlog.tsx
new file mode 100644
index 0000000..d5e89f7
--- /dev/null
+++ b/components/sprint/sprint-backlog.tsx
@@ -0,0 +1,246 @@
+'use client'
+
+import { useState, useTransition, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import {
+  DndContext, DragEndEvent, DragOverEvent, DragStartEvent, DragOverlay,
+  PointerSensor, useSensor, useSensors, closestCenter,
+} from '@dnd-kit/core'
+import {
+  SortableContext, useSortable, verticalListSortingStrategy, arrayMove,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { PanelNavBar } from '@/components/shared/panel-nav-bar'
+import { useSprintStore } from '@/stores/sprint-store'
+import {
+  addStoryToSprintAction,
+  removeStoryFromSprintAction,
+  reorderSprintStoriesAction,
+} from '@/actions/sprints'
+import { cn } from '@/lib/utils'
+
+const STATUS_COLORS: Record<string, string> = {
+  OPEN: 'bg-status-todo/15 text-status-todo border-status-todo/30',
+  IN_SPRINT: 'bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30',
+  DONE: 'bg-status-done/15 text-status-done border-status-done/30',
+}
+const STATUS_LABELS: Record<string, string> = { OPEN: 'Open', IN_SPRINT: 'In Sprint', DONE: 'Klaar' }
+
+const PRIORITY_COLORS: Record<number, string> = {
+  1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
+  2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
+  3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
+  4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
+}
+const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
+
+export interface SprintStory {
+  id: string
+  title: string
+  priority: number
+  status: string
+  taskCount: number
+  doneCount: number
+}
+
+export interface PbiWithStories {
+  id: string
+  title: string
+  stories: SprintStory[]
+}
+
+// --- Left panel: Sprint Backlog ---
+function SortableSprintRow({
+  story, isDemo, onRemove, onClick,
+}: { story: SprintStory; isDemo: boolean; onRemove: () => void; onClick: () => void }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: story.id })
+  const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.4 : 1 }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      onClick={onClick}
+      className="group flex items-center gap-3 px-4 py-2.5 border-b border-border hover:bg-surface-container transition-colors cursor-pointer"
+    >
+      {!isDemo && (
+        <span {...attributes} {...listeners} onClick={e => e.stopPropagation()}
+          className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm">
+          ⠿
+        </span>
+      )}
+      <div className="flex-1 min-w-0">
+        <p className="text-sm truncate">{story.title}</p>
+        <div className="flex items-center gap-1.5 mt-0.5">
+          <Badge className={cn('text-[10px] px-1.5 py-0 border', PRIORITY_COLORS[story.priority])}>
+            {PRIORITY_LABELS[story.priority]}
+          </Badge>
+          <span className="text-xs text-muted-foreground">{story.doneCount}/{story.taskCount} klaar</span>
+        </div>
+      </div>
+      {!isDemo && (
+        <button onClick={e => { e.stopPropagation(); onRemove() }}
+          className="opacity-0 group-hover:opacity-100 text-xs text-muted-foreground hover:text-error shrink-0">
+          Verwijderen
+        </button>
+      )}
+    </div>
+  )
+}
+
+interface SprintBacklogLeftProps {
+  sprintId: string
+  stories: SprintStory[]
+  isDemo: boolean
+  onSelectStory: (id: string) => void
+  selectedStoryId: string | null
+}
+
+export function SprintBacklogLeft({ sprintId, stories, isDemo, onSelectStory, selectedStoryId }: SprintBacklogLeftProps) {
+  const { sprintStoryOrder, initSprint, reorderSprintStories, rollbackSprint, removeStoryFromSprint } = useSprintStore()
+  const [, startTransition] = useTransition()
+
+  const idKey = stories.map(s => s.id).join(',')
+  useEffect(() => {
+    initSprint(sprintId, idKey ? idKey.split(',') : [])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sprintId, idKey])
+
+  const storyMap = Object.fromEntries(stories.map(s => [s.id, s]))
+  const order = sprintStoryOrder[sprintId] ?? stories.map(s => s.id)
+  const orderedStories = order.map(id => storyMap[id]).filter(Boolean)
+
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+    const prevOrder = [...order]
+    const newOrder = arrayMove([...order], order.indexOf(active.id as string), order.indexOf(over.id as string))
+    reorderSprintStories(sprintId, newOrder)
+    startTransition(async () => {
+      const result = await reorderSprintStoriesAction(sprintId, newOrder)
+      if (!result.success) { rollbackSprint(sprintId, prevOrder); toast.error('Volgorde opslaan mislukt') }
+    })
+  }
+
+  function handleRemove(storyId: string) {
+    removeStoryFromSprint(sprintId, storyId)
+    startTransition(async () => {
+      const result = await removeStoryFromSprintAction(storyId)
+      if (!result.success) toast.error('Verwijderen mislukt')
+    })
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <PanelNavBar title="Sprint Backlog" />
+      <div className="flex-1 overflow-y-auto">
+        {orderedStories.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center mt-8 px-4">
+            Geen stories in de Sprint. Sleep stories vanuit het rechterpaneel.
+          </p>
+        ) : (
+          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+            <SortableContext items={orderedStories.map(s => s.id)} strategy={verticalListSortingStrategy}>
+              {orderedStories.map(story => (
+                <SortableSprintRow
+                  key={story.id}
+                  story={story}
+                  isDemo={isDemo}
+                  onRemove={() => handleRemove(story.id)}
+                  onClick={() => onSelectStory(story.id)}
+                />
+              ))}
+            </SortableContext>
+          </DndContext>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// --- Right panel: Product Backlog stories grouped by PBI (droppable source) ---
+interface SprintBacklogRightProps {
+  sprintId: string
+  pbisWithStories: PbiWithStories[]
+  sprintStoryIds: Set<string>
+  isDemo: boolean
+  onStoryAdded: (storyId: string) => void
+}
+
+export function SprintBacklogRight({ sprintId, pbisWithStories, sprintStoryIds, isDemo, onStoryAdded }: SprintBacklogRightProps) {
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set())
+  const [, startTransition] = useTransition()
+  const { addStoryToSprint } = useSprintStore()
+  const router = useRouter()
+
+  function toggle(pbiId: string) {
+    setCollapsed(prev => {
+      const next = new Set(prev)
+      next.has(pbiId) ? next.delete(pbiId) : next.add(pbiId)
+      return next
+    })
+  }
+
+  function handleAdd(storyId: string) {
+    addStoryToSprint(sprintId, storyId)
+    onStoryAdded(storyId)
+    startTransition(async () => {
+      const result = await addStoryToSprintAction(sprintId, storyId)
+      if (!result.success) {
+        toast.error(result.error ?? 'Toevoegen mislukt')
+        router.refresh()
+      }
+    })
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <PanelNavBar title="Product Backlog" />
+      <div className="flex-1 overflow-y-auto py-2">
+        {pbisWithStories.map(pbi => (
+          <div key={pbi.id}>
+            <button
+              onClick={() => toggle(pbi.id)}
+              className="w-full flex items-center gap-2 px-4 py-1.5 hover:bg-surface-container transition-colors text-left"
+            >
+              <span className="text-xs">{collapsed.has(pbi.id) ? '▶' : '▼'}</span>
+              <span className="text-sm font-medium truncate flex-1">{pbi.title}</span>
+              <span className="text-xs text-muted-foreground">{pbi.stories.length}</span>
+            </button>
+
+            {!collapsed.has(pbi.id) && pbi.stories.map(story => {
+              const inSprint = sprintStoryIds.has(story.id)
+              return (
+                <div
+                  key={story.id}
+                  className={cn(
+                    'flex items-center gap-3 px-6 py-2 border-b border-border/50 transition-colors',
+                    inSprint ? 'opacity-50' : 'hover:bg-surface-container'
+                  )}
+                >
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm truncate">{story.title}</p>
+                    <Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
+                      {STATUS_LABELS[story.status]}
+                    </Badge>
+                  </div>
+                  {!inSprint && !isDemo && (
+                    <Button size="sm" variant="outline" className="h-6 text-xs shrink-0" onClick={() => handleAdd(story.id)}>
+                      + Sprint
+                    </Button>
+                  )}
+                  {inSprint && <span className="text-xs text-muted-foreground shrink-0">In Sprint</span>}
+                </div>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/components/sprint/sprint-header.tsx b/components/sprint/sprint-header.tsx
new file mode 100644
index 0000000..14382cf
--- /dev/null
+++ b/components/sprint/sprint-header.tsx
@@ -0,0 +1,144 @@
+'use client'
+
+import { useState, useTransition, useActionState } from 'react'
+import { useFormStatus } from 'react-dom'
+import { Button } from '@/components/ui/button'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { updateSprintGoalAction, completeSprintAction } from '@/actions/sprints'
+import type { SprintStory } from './sprint-backlog'
+
+interface Sprint {
+  id: string
+  sprint_goal: string
+  status: string
+}
+
+interface SprintHeaderProps {
+  productId: string
+  productName: string
+  sprint: Sprint
+  isDemo: boolean
+  sprintStories: SprintStory[]
+}
+
+function SaveGoalButton() {
+  const { pending } = useFormStatus()
+  return <Button type="submit" size="sm" disabled={pending}>{pending ? 'Opslaan…' : 'Opslaan'}</Button>
+}
+
+export function SprintHeader({ productId, productName, sprint, isDemo, sprintStories }: SprintHeaderProps) {
+  const [editingGoal, setEditingGoal] = useState(false)
+  const [completeOpen, setCompleteOpen] = useState(false)
+  const [decisions, setDecisions] = useState<Record<string, 'DONE' | 'OPEN'>>({})
+  const [isCompleting, startCompleting] = useTransition()
+
+  const [, goalFormAction] = useActionState(
+    async (_prev: unknown, fd: FormData) => {
+      const result = await updateSprintGoalAction(_prev, fd)
+      if (result?.success) setEditingGoal(false)
+      return result
+    },
+    undefined
+  )
+
+  function setDecision(storyId: string, value: 'DONE' | 'OPEN') {
+    setDecisions(prev => ({ ...prev, [storyId]: value }))
+  }
+
+  function handleComplete() {
+    // Default: stories without explicit decision → OPEN
+    const finalDecisions: Record<string, 'DONE' | 'OPEN'> = {}
+    sprintStories.forEach(s => {
+      finalDecisions[s.id] = decisions[s.id] ?? 'OPEN'
+    })
+
+    startCompleting(async () => {
+      await completeSprintAction(sprint.id, finalDecisions)
+      setCompleteOpen(false)
+    })
+  }
+
+  return (
+    <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0">
+      <div className="flex items-center justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">{productName}</span>
+            <span className="text-muted-foreground">›</span>
+            <span className="text-xs font-medium text-primary">Sprint actief</span>
+          </div>
+
+          {editingGoal ? (
+            <form action={goalFormAction} className="flex gap-2 mt-1">
+              <input type="hidden" name="id" value={sprint.id} />
+              <Textarea name="sprint_goal" defaultValue={sprint.sprint_goal} rows={2} className="text-sm flex-1" autoFocus />
+              <div className="flex flex-col gap-1">
+                <SaveGoalButton />
+                <Button type="button" size="sm" variant="ghost" onClick={() => setEditingGoal(false)}>×</Button>
+              </div>
+            </form>
+          ) : (
+            <button onClick={() => !isDemo && setEditingGoal(true)} className="text-left mt-0.5 group">
+              <p className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
+                {sprint.sprint_goal}
+              </p>
+            </button>
+          )}
+        </div>
+
+        {!isDemo && (
+          <Button size="sm" variant="outline" className="shrink-0 border-warning/40 text-warning hover:bg-warning/10" onClick={() => setCompleteOpen(true)}>
+            Sprint afronden
+          </Button>
+        )}
+      </div>
+
+      {/* Complete sprint dialog */}
+      <Dialog open={completeOpen} onOpenChange={setCompleteOpen}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Sprint afronden</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 p-1">
+            <p className="text-sm text-muted-foreground">
+              Geef per story aan wat er mee moet gebeuren:
+            </p>
+            <div className="space-y-2 max-h-64 overflow-y-auto">
+              {sprintStories.map(story => (
+                <div key={story.id} className="flex items-center justify-between gap-3 p-2 bg-surface-container-low rounded-lg">
+                  <span className="text-sm truncate flex-1">{story.title}</span>
+                  <div className="flex gap-1 shrink-0">
+                    <button
+                      onClick={() => setDecision(story.id, 'DONE')}
+                      className={`text-xs px-2 py-1 rounded transition-colors ${(decisions[story.id] ?? 'OPEN') === 'DONE' ? 'bg-status-done/20 text-status-done font-medium' : 'text-muted-foreground hover:bg-surface-container'}`}
+                    >
+                      Done
+                    </button>
+                    <button
+                      onClick={() => setDecision(story.id, 'OPEN')}
+                      className={`text-xs px-2 py-1 rounded transition-colors ${(decisions[story.id] ?? 'OPEN') === 'OPEN' ? 'bg-status-todo/20 text-status-todo font-medium' : 'text-muted-foreground hover:bg-surface-container'}`}
+                    >
+                      Terug
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="flex gap-2 justify-end">
+              <Button variant="ghost" onClick={() => setCompleteOpen(false)}>Annuleren</Button>
+              <Button disabled={isCompleting} onClick={handleComplete}>
+                {isCompleting ? 'Bezig…' : 'Sprint afronden'}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/components/sprint/start-sprint-button.tsx b/components/sprint/start-sprint-button.tsx
new file mode 100644
index 0000000..76f6d6b
--- /dev/null
+++ b/components/sprint/start-sprint-button.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import { useState, useActionState } from 'react'
+import { useFormStatus } from 'react-dom'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { createSprintAction } from '@/actions/sprints'
+
+interface StartSprintButtonProps {
+  productId: string
+}
+
+function SubmitButton() {
+  const { pending } = useFormStatus()
+  return (
+    <Button type="submit" disabled={pending}>
+      {pending ? 'Aanmaken…' : 'Sprint starten'}
+    </Button>
+  )
+}
+
+export function StartSprintButton({ productId }: StartSprintButtonProps) {
+  const [open, setOpen] = useState(false)
+  const router = useRouter()
+
+  const [state, formAction] = useActionState(
+    async (_prev: unknown, fd: FormData) => {
+      const result = await createSprintAction(_prev, fd)
+      if (result.success) {
+        setOpen(false)
+        router.push(`/products/${productId}/sprint`)
+      }
+      return result
+    },
+    undefined
+  )
+
+  const globalError = typeof state?.error === 'string' ? state.error : undefined
+
+  return (
+    <>
+      <Button size="sm" onClick={() => setOpen(true)}>
+        Sprint starten
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Nieuwe Sprint starten</DialogTitle>
+          </DialogHeader>
+
+          <form action={formAction} className="space-y-4 p-1">
+            <input type="hidden" name="productId" value={productId} />
+
+            <div className="space-y-1.5">
+              <label className="text-sm font-medium text-foreground">
+                Sprint Goal <span className="text-error">*</span>
+              </label>
+              <Textarea
+                name="sprint_goal"
+                required
+                rows={3}
+                placeholder="Wat wil je aan het einde van deze Sprint bereikt hebben?"
+                autoFocus
+              />
+              {typeof state?.error === 'object' && (state.error as Record<string, string[]>).sprint_goal && (
+                <p className="text-xs text-error">{(state.error as Record<string, string[]>).sprint_goal[0]}</p>
+              )}
+            </div>
+
+            {globalError && (
+              <div className="bg-error-container text-error-container-foreground rounded-lg px-3 py-2 text-sm border-l-4 border-error">
+                {globalError}
+              </div>
+            )}
+
+            <div className="flex gap-2 justify-end">
+              <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+                Annuleren
+              </Button>
+              <SubmitButton />
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/components/sprint/task-list.tsx b/components/sprint/task-list.tsx
new file mode 100644
index 0000000..26b0a9d
--- /dev/null
+++ b/components/sprint/task-list.tsx
@@ -0,0 +1,245 @@
+'use client'
+
+import { useState, useTransition, useEffect, useActionState } from 'react'
+import { useFormStatus } from 'react-dom'
+import {
+  DndContext, DragEndEvent, DragOverlay, DragStartEvent,
+  PointerSensor, useSensor, useSensors, closestCenter,
+} from '@dnd-kit/core'
+import {
+  SortableContext, useSortable, verticalListSortingStrategy, arrayMove,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { PanelNavBar } from '@/components/shared/panel-nav-bar'
+import { useSprintStore } from '@/stores/sprint-store'
+import {
+  createTaskAction, updateTaskStatusAction, updateTaskAction,
+  deleteTaskAction, reorderTasksAction,
+} from '@/actions/tasks'
+import { cn } from '@/lib/utils'
+
+const STATUS_CYCLE: Record<string, 'TO_DO' | 'IN_PROGRESS' | 'DONE'> = {
+  TO_DO: 'IN_PROGRESS',
+  IN_PROGRESS: 'DONE',
+  DONE: 'TO_DO',
+}
+const STATUS_COLORS: Record<string, string> = {
+  TO_DO: 'bg-status-todo/15 text-status-todo border-status-todo/30',
+  IN_PROGRESS: 'bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30',
+  DONE: 'bg-status-done/15 text-status-done border-status-done/30',
+}
+const STATUS_LABELS: Record<string, string> = { TO_DO: 'To Do', IN_PROGRESS: 'Bezig', DONE: 'Klaar' }
+
+const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
+
+export interface Task {
+  id: string
+  title: string
+  description: string | null
+  priority: number
+  status: string
+  story_id: string
+  sprint_id: string | null
+}
+
+interface TaskListProps {
+  storyId: string
+  sprintId: string
+  productId: string
+  tasks: Task[]
+  isDemo: boolean
+}
+
+function SortableTaskRow({
+  task, isDemo, onStatusToggle, onDelete,
+}: { task: Task; isDemo: boolean; onStatusToggle: () => void; onDelete: () => void }) {
+  const [editing, setEditing] = useState(false)
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id })
+  const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.4 : 1 }
+
+  const [, formAction] = useActionState(
+    async (_prev: unknown, fd: FormData) => {
+      const result = await updateTaskAction(_prev, fd)
+      if (result?.success) setEditing(false)
+      return result
+    },
+    undefined
+  )
+
+  if (editing) {
+    return (
+      <div ref={setNodeRef} style={style} className="px-4 py-2 border-b border-border bg-surface-container">
+        <form action={formAction} className="space-y-2">
+          <input type="hidden" name="id" value={task.id} />
+          <input type="hidden" name="priority" value={task.priority} />
+          <Input name="title" defaultValue={task.title} className="h-7 text-sm" required autoFocus />
+          <div className="flex gap-2">
+            <EditSubmitButton />
+            <Button type="button" variant="ghost" size="sm" className="h-7" onClick={() => setEditing(false)}>Annuleren</Button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} className="group flex items-center gap-3 px-4 py-2.5 border-b border-border hover:bg-surface-container/50 transition-colors">
+      {!isDemo && (
+        <span {...attributes} {...listeners} className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 text-sm select-none">⠿</span>
+      )}
+      <div className="flex-1 min-w-0">
+        <p className={cn('text-sm truncate', task.status === 'DONE' && 'line-through text-muted-foreground')}>
+          {task.title}
+        </p>
+        <span className="text-xs text-muted-foreground">{PRIORITY_LABELS[task.priority]}</span>
+      </div>
+      <button onClick={onStatusToggle} disabled={isDemo}>
+        <Badge className={cn('text-xs border cursor-pointer hover:opacity-80 transition-opacity', STATUS_COLORS[task.status])}>
+          {STATUS_LABELS[task.status]}
+        </Badge>
+      </button>
+      {!isDemo && (
+        <div className="opacity-0 group-hover:opacity-100 flex gap-1">
+          <button onClick={() => setEditing(true)} className="text-xs text-muted-foreground hover:text-foreground">Bewerk</button>
+          <button onClick={onDelete} className="text-xs text-muted-foreground hover:text-error">×</button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function EditSubmitButton() {
+  const { pending } = useFormStatus()
+  return <Button type="submit" size="sm" className="h-7" disabled={pending}>{pending ? '…' : 'Opslaan'}</Button>
+}
+
+function CreateTaskForm({ storyId, sprintId, onDone }: { storyId: string; sprintId: string; onDone: () => void }) {
+  const [, formAction] = useActionState(
+    async (_prev: unknown, fd: FormData) => {
+      const result = await createTaskAction(_prev, fd)
+      if (result?.success) onDone()
+      return result
+    },
+    undefined
+  )
+  return (
+    <form action={formAction} className="flex gap-2 px-4 py-2 border-b border-border">
+      <input type="hidden" name="storyId" value={storyId} />
+      <input type="hidden" name="sprintId" value={sprintId} />
+      <input type="hidden" name="priority" value="2" />
+      <Input name="title" autoFocus placeholder="Taaknaam…" className="h-7 text-sm flex-1" required />
+      <CreateSubmitButton />
+      <Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>×</Button>
+    </form>
+  )
+}
+
+function CreateSubmitButton() {
+  const { pending } = useFormStatus()
+  return <Button type="submit" size="sm" className="h-7" disabled={pending}>{pending ? '…' : 'Toevoegen'}</Button>
+}
+
+export function TaskList({ storyId, sprintId, productId, tasks, isDemo }: TaskListProps) {
+  const { taskOrder, initTasks, reorderTasks, rollbackTasks } = useSprintStore()
+  const [creating, setCreating] = useState(false)
+  const [activeDragId, setActiveDragId] = useState<string | null>(null)
+  const [, startTransition] = useTransition()
+
+  const idKey = tasks.map(t => t.id).join(',')
+  useEffect(() => {
+    initTasks(storyId, idKey ? idKey.split(',') : [])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [storyId, idKey])
+
+  const taskMap = Object.fromEntries(tasks.map(t => [t.id, t]))
+  const order = taskOrder[storyId] ?? tasks.map(t => t.id)
+  const orderedTasks = order.map(id => taskMap[id]).filter(Boolean)
+
+  const doneCount = orderedTasks.filter(t => t.status === 'DONE').length
+
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+    const prevOrder = [...order]
+    const newOrder = arrayMove([...order], order.indexOf(active.id as string), order.indexOf(over.id as string))
+    reorderTasks(storyId, newOrder)
+    setActiveDragId(null)
+    startTransition(async () => {
+      const result = await reorderTasksAction(storyId, newOrder)
+      if (!result.success) { rollbackTasks(storyId, prevOrder); toast.error('Volgorde opslaan mislukt') }
+    })
+  }
+
+  function handleStatusToggle(task: Task) {
+    startTransition(async () => {
+      await updateTaskStatusAction(task.id, STATUS_CYCLE[task.status] ?? 'TO_DO')
+    })
+  }
+
+  function handleDelete(id: string) {
+    startTransition(async () => {
+      await deleteTaskAction(id)
+    })
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <PanelNavBar
+        title="Taken"
+        actions={
+          <>
+            <span className="text-xs text-muted-foreground">{doneCount}/{orderedTasks.length} klaar</span>
+            {!isDemo && (
+              <Button size="sm" className="h-7 text-xs" onClick={() => setCreating(true)}>+ Taak</Button>
+            )}
+          </>
+        }
+      />
+
+      <div className="flex-1 overflow-y-auto">
+        {creating && (
+          <CreateTaskForm storyId={storyId} sprintId={sprintId} onDone={() => setCreating(false)} />
+        )}
+
+        {orderedTasks.length === 0 && !creating ? (
+          <div className="text-center mt-8 space-y-3">
+            <p className="text-sm text-muted-foreground">Geen taken voor deze story.</p>
+            {!isDemo && <Button size="sm" variant="outline" onClick={() => setCreating(true)}>Maak eerste taak aan</Button>}
+          </div>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={e => setActiveDragId(e.active.id as string)}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext items={orderedTasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
+              {orderedTasks.map(task => (
+                <SortableTaskRow
+                  key={task.id}
+                  task={task}
+                  isDemo={isDemo}
+                  onStatusToggle={() => handleStatusToggle(task)}
+                  onDelete={() => handleDelete(task.id)}
+                />
+              ))}
+            </SortableContext>
+            <DragOverlay>
+              {activeDragId && taskMap[activeDragId] && (
+                <div className="bg-surface-container-low border border-primary rounded px-4 py-2 text-sm shadow-lg opacity-90">
+                  {taskMap[activeDragId].title}
+                </div>
+              )}
+            </DragOverlay>
+          </DndContext>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/stores/sprint-store.ts b/stores/sprint-store.ts
new file mode 100644
index 0000000..c332eea
--- /dev/null
+++ b/stores/sprint-store.ts
@@ -0,0 +1,57 @@
+import { create } from 'zustand'
+
+interface SprintStore {
+  // sprintId → storyId[]
+  sprintStoryOrder: Record<string, string[]>
+  // storyId → taskId[]
+  taskOrder: Record<string, string[]>
+
+  initSprint: (sprintId: string, storyIds: string[]) => void
+  addStoryToSprint: (sprintId: string, storyId: string) => void
+  removeStoryFromSprint: (sprintId: string, storyId: string) => void
+  reorderSprintStories: (sprintId: string, storyIds: string[]) => void
+  rollbackSprint: (sprintId: string, storyIds: string[]) => void
+
+  initTasks: (storyId: string, taskIds: string[]) => void
+  reorderTasks: (storyId: string, taskIds: string[]) => void
+  rollbackTasks: (storyId: string, taskIds: string[]) => void
+}
+
+export const useSprintStore = create<SprintStore>((set) => ({
+  sprintStoryOrder: {},
+  taskOrder: {},
+
+  initSprint: (sprintId, storyIds) =>
+    set((s) => ({ sprintStoryOrder: { ...s.sprintStoryOrder, [sprintId]: storyIds } })),
+
+  addStoryToSprint: (sprintId, storyId) =>
+    set((s) => ({
+      sprintStoryOrder: {
+        ...s.sprintStoryOrder,
+        [sprintId]: [...(s.sprintStoryOrder[sprintId] ?? []), storyId],
+      },
+    })),
+
+  removeStoryFromSprint: (sprintId, storyId) =>
+    set((s) => ({
+      sprintStoryOrder: {
+        ...s.sprintStoryOrder,
+        [sprintId]: (s.sprintStoryOrder[sprintId] ?? []).filter((id) => id !== storyId),
+      },
+    })),
+
+  reorderSprintStories: (sprintId, storyIds) =>
+    set((s) => ({ sprintStoryOrder: { ...s.sprintStoryOrder, [sprintId]: storyIds } })),
+
+  rollbackSprint: (sprintId, storyIds) =>
+    set((s) => ({ sprintStoryOrder: { ...s.sprintStoryOrder, [sprintId]: storyIds } })),
+
+  initTasks: (storyId, taskIds) =>
+    set((s) => ({ taskOrder: { ...s.taskOrder, [storyId]: taskIds } })),
+
+  reorderTasks: (storyId, taskIds) =>
+    set((s) => ({ taskOrder: { ...s.taskOrder, [storyId]: taskIds } })),
+
+  rollbackTasks: (storyId, taskIds) =>
+    set((s) => ({ taskOrder: { ...s.taskOrder, [storyId]: taskIds } })),
+}))