Merge pull request #79 from madhura68/feat/sprint-backlog-filter-popover

feat(sprint): filter popover + edit-iconen op PBI/story/taak

app/(app)/products/[id]/sprint/page.tsx

@@ -3,6 +3,7 @@ import { notFound, redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { getAccessibleProduct } from '@/lib/product-access'
 import { prisma } from '@/lib/prisma'
+import { pbiStatusToApi } from '@/lib/task-status'
 import { SprintBoardClient } from '@/components/sprint/sprint-board-client'
 import { SprintHeader } from '@/components/sprint/sprint-header'
 import type { SprintStory, PbiWithStories, ProductMember } from '@/components/sprint/sprint-backlog'
@@ -69,6 +70,10 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
     id: s.id,
     code: s.code,
     title: s.title,
+    description: s.description,
+    acceptance_criteria: s.acceptance_criteria,
+    pbi_id: s.pbi_id,
+    created_at: s.created_at,
     priority: s.priority,
     status: s.status,
     taskCount: s.tasks.length,
@@ -108,10 +113,17 @@ export default async function SprintBoardPage({ params, searchParams }: Props) {
       id: pbi.id,
       code: pbi.code,
       title: pbi.title,
+      priority: pbi.priority,
+      status: pbiStatusToApi(pbi.status),
+      description: pbi.description,
       stories: pbi.stories.map(s => ({
         id: s.id,
         code: s.code,
         title: s.title,
+        description: s.description,
+        acceptance_criteria: s.acceptance_criteria,
+        pbi_id: s.pbi_id,
+        created_at: s.created_at,
         priority: s.priority,
         status: s.status,
         taskCount: 0,

components/sprint/sprint-backlog.tsx

@@ -1,12 +1,14 @@
 'use client'
 
-import { useState, useTransition } from 'react'
+import { useState, useTransition, useEffect } from 'react'
-import { Trash2, MoreHorizontal, ChevronsUp, ChevronsDown, ListFilter } from 'lucide-react'
+import { Trash2, MoreHorizontal, ChevronsUp, ChevronsDown, ListFilter, Pencil } from 'lucide-react'
 import { useDroppable, useDraggable } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { toast } from 'sonner'
 import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { CodeBadge } from '@/components/shared/code-badge'
 import {
   DropdownMenu, DropdownMenuContent, DropdownMenuItem,
@@ -17,8 +19,12 @@ import { UserAvatar } from '@/components/shared/user-avatar'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { PRIORITY_BORDER } from '@/components/backlog/backlog-card'
+import { PRIORITY_COLORS } from '@/components/shared/priority-select'
 import { useSprintStore } from '@/stores/sprint-store'
 import { claimStoryAction, unclaimStoryAction, reassignStoryAction, claimAllUnassignedInActiveSprintAction } from '@/actions/stories'
+import { PbiDialog, type PbiDialogState } from '@/components/backlog/pbi-dialog'
+import { StoryDialog, type StoryDialogState } from '@/components/backlog/story-dialog'
+import type { PbiStatusApi } from '@/lib/task-status'
 import { cn } from '@/lib/utils'
 
 const STATUS_COLORS: Record<string, string> = {
@@ -32,6 +38,10 @@ export interface SprintStory {
   id: string
   code: string | null
   title: string
+  description: string | null
+  acceptance_criteria: string | null
+  pbi_id: string
+  created_at: Date
   priority: number
   status: string
   taskCount: number
@@ -49,19 +59,23 @@ export interface PbiWithStories {
   id: string
   code: string | null
   title: string
+  priority: number
+  status: PbiStatusApi
+  description: string | null
   stories: SprintStory[]
 }
 
 // --- Left panel: Sprint Backlog ---
 
 function SortableSprintRow({
-  story, isDemo, onRemove, onSelect, isSelected,
+  story, isDemo, onRemove, onSelect, onEdit, isSelected,
   currentUserId, productId, members, onAssigneeChange,
 }: {
   story: SprintStory
   isDemo: boolean
   onRemove: () => void
   onSelect: () => void
+  onEdit: () => void
   isSelected: boolean
   currentUserId: string
   productId: string
@@ -189,6 +203,16 @@ function SortableSprintRow({
                   </DropdownMenuContent>
                 </DropdownMenu>
               </DemoTooltip>
+              <DemoTooltip show={isDemo}>
+                <button
+                  onClick={e => { e.stopPropagation(); if (!isDemo) onEdit() }}
+                  className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
+                  aria-label="Bewerk story"
+                  disabled={isDemo}
+                >
+                  <Pencil size={14} />
+                </button>
+              </DemoTooltip>
               <DemoTooltip show={isDemo}>
                 <button
                   onClick={e => { e.stopPropagation(); if (!isDemo) onRemove() }}
@@ -227,6 +251,7 @@ export function SprintBacklogLeft({
   const { sprintStoryOrder } = useSprintStore()
   const { setNodeRef, isOver } = useDroppable({ id: 'sprint-zone' })
   const [isPending, startTransition] = useTransition()
+  const [storyDialogState, setStoryDialogState] = useState<StoryDialogState | null>(null)
 
   const unassignedCount = stories.filter(s => s.assignee_id === null).length
   const currentUserUsername = members.find(m => m.userId === currentUserId)?.username ?? null
@@ -288,6 +313,7 @@ export function SprintBacklogLeft({
                 isDemo={isDemo}
                 onRemove={() => onRemove(story.id)}
                 onSelect={() => onSelect(story.id)}
+                onEdit={() => setStoryDialogState({ mode: 'edit', story, productId })}
                 isSelected={selectedStoryId === story.id}
                 currentUserId={currentUserId}
                 productId={productId}
@@ -298,12 +324,76 @@ export function SprintBacklogLeft({
           </SortableContext>
         )}
       </div>
+      <StoryDialog
+        state={storyDialogState}
+        onClose={() => setStoryDialogState(null)}
+        isDemo={isDemo}
+      />
     </div>
   )
 }
 
 // --- Right panel: Product Backlog grouped by PBI ---
 
+const PRIORITY_LABELS_SPRINT: Record<number, string> = {
+  1: 'Kritiek',
+  2: 'Hoog',
+  3: 'Gemiddeld',
+  4: 'Laag',
+}
+
+const PRIORITY_OPTIONS_SPRINT: Array<{ value: number | 'all'; label: string }> = [
+  { value: 'all', label: 'Alle' },
+  { value: 1, label: 'Kritiek' },
+  { value: 2, label: 'Hoog' },
+  { value: 3, label: 'Gemiddeld' },
+  { value: 4, label: 'Laag' },
+]
+
+type StoryStatusFilter = 'OPEN' | 'IN_SPRINT' | 'DONE' | 'all'
+
+const STATUS_OPTIONS_SPRINT: Array<{ value: StoryStatusFilter; label: string }> = [
+  { value: 'all', label: 'Alle' },
+  { value: 'OPEN', label: 'Open' },
+  { value: 'IN_SPRINT', label: 'In Sprint' },
+  { value: 'DONE', label: 'Klaar' },
+]
+
+function FilterPills<T extends string | number>({
+  label,
+  options,
+  value,
+  onChange,
+}: {
+  label: string
+  options: Array<{ value: T; label: string }>
+  value: T
+  onChange: (v: T) => void
+}) {
+  return (
+    <div className="space-y-1.5">
+      <p className="text-xs font-medium text-muted-foreground">{label}</p>
+      <div className="flex flex-wrap gap-1.5">
+        {options.map((opt) => (
+          <button
+            key={String(opt.value)}
+            type="button"
+            onClick={() => onChange(opt.value)}
+            className={cn(
+              'text-xs px-2.5 py-1 rounded-full border transition-colors',
+              value === opt.value
+                ? 'bg-primary text-primary-foreground border-primary'
+                : 'bg-transparent border-border hover:bg-surface-container'
+            )}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 function DraggablePbiStoryRow({
   story,
   isDemo,
@@ -371,10 +461,11 @@ interface SprintBacklogRightProps {
   pbisWithStories: PbiWithStories[]
   sprintStoryIds: Set<string>
   isDemo: boolean
+  productId: string
   onAdd: (storyId: string) => void
 }
 
-export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, onAdd }: SprintBacklogRightProps) {
+export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, productId, onAdd }: SprintBacklogRightProps) {
   const [collapsed, setCollapsed] = useState<Set<string>>(() => {
     const auto = new Set<string>()
     for (const pbi of pbisWithStories) {
@@ -384,8 +475,47 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
     }
     return auto
   })
+  const [filterPriority, setFilterPriority] = useState<number | 'all'>('all')
+  const [filterStatus, setFilterStatus] = useState<StoryStatusFilter>('all')
+  const [prefsLoaded, setPrefsLoaded] = useState(false)
+  const [pbiDialogState, setPbiDialogState] = useState<PbiDialogState | null>(null)
   const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' })
 
+  // Hydrate filter prefs from localStorage post-mount (avoids SSR mismatch).
+  // setState calls here are intentional: hydrating from localStorage on first paint.
+  useEffect(() => {
+    const savedPriority = localStorage.getItem('scrum4me:sprint_pb_filter_priority')
+    if (savedPriority && savedPriority !== 'all') {
+      const n = parseInt(savedPriority, 10)
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      if (Number.isInteger(n) && n >= 1 && n <= 4) setFilterPriority(n)
+    }
+    const savedStatus = localStorage.getItem('scrum4me:sprint_pb_filter_status')
+    if (savedStatus === 'OPEN' || savedStatus === 'IN_SPRINT' || savedStatus === 'DONE') {
+       
+      setFilterStatus(savedStatus)
+    }
+     
+    setPrefsLoaded(true)
+  }, [])
+
+  useEffect(() => { if (prefsLoaded) localStorage.setItem('scrum4me:sprint_pb_filter_priority', String(filterPriority)) }, [filterPriority, prefsLoaded])
+  useEffect(() => { if (prefsLoaded) localStorage.setItem('scrum4me:sprint_pb_filter_status', filterStatus) }, [filterStatus, prefsLoaded])
+
+  const filteredPbis = pbisWithStories
+    .map(pbi => ({
+      ...pbi,
+      stories: pbi.stories.filter(s =>
+        (filterPriority === 'all' || s.priority === filterPriority) &&
+        (filterStatus === 'all' || s.status === filterStatus)
+      ),
+    }))
+    .filter(pbi => pbi.stories.length > 0)
+
+  const activeFilterCount =
+    (filterPriority !== 'all' ? 1 : 0) +
+    (filterStatus !== 'all' ? 1 : 0)
+
   function toggle(pbiId: string) {
     setCollapsed(prev => {
       const next = new Set(prev)
@@ -395,7 +525,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
   }
 
   function collapseAll() {
-    setCollapsed(new Set(pbisWithStories.map(p => p.id)))
+    setCollapsed(new Set(filteredPbis.map(p => p.id)))
   }
 
   function expandAll() {
@@ -404,7 +534,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
 
   function onlyNotDone() {
     const auto = new Set<string>()
-    for (const pbi of pbisWithStories) {
+    for (const pbi of filteredPbis) {
       if (pbi.stories.length > 0 && pbi.stories.every(s => s.status === 'DONE')) {
         auto.add(pbi.id)
       }
@@ -412,32 +542,96 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
     setCollapsed(auto)
   }
 
-  const collapseActions = (
+  const headerActions = (
-    <TooltipProvider>
+    <>
-      <Tooltip>
+      {filterPriority !== 'all' && (
-        <TooltipTrigger onClick={collapseAll} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alles inklappen">
+        <button
-          <ChevronsUp size={14} />
+          onClick={() => setFilterPriority('all')}
-        </TooltipTrigger>
+          className="flex items-center gap-1 text-xs text-primary hover:underline"
-        <TooltipContent>Alles inklappen</TooltipContent>
+          aria-label="Wis prioriteitsfilter"
-      </Tooltip>
+        >
-      <Tooltip>
+          <Badge className={cn('text-xs', PRIORITY_COLORS[filterPriority])}>
-        <TooltipTrigger onClick={expandAll} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alles uitklappen">
+            {PRIORITY_LABELS_SPRINT[filterPriority]}
-          <ChevronsDown size={14} />
+          </Badge>
-        </TooltipTrigger>
+          <span>×</span>
-        <TooltipContent>Alles uitklappen</TooltipContent>
+        </button>
-      </Tooltip>
+      )}
-      <Tooltip>
+      {filterStatus !== 'all' && (
-        <TooltipTrigger onClick={onlyNotDone} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alleen niet klaar">
+        <button
-          <ListFilter size={14} />
+          onClick={() => setFilterStatus('all')}
-        </TooltipTrigger>
+          className="flex items-center gap-1 text-xs text-primary hover:underline"
-        <TooltipContent>Alleen niet klaar</TooltipContent>
+          aria-label="Wis statusfilter"
-      </Tooltip>
+        >
-    </TooltipProvider>
+          <Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[filterStatus])}>
+            {STATUS_LABELS[filterStatus]}
+          </Badge>
+          <span>×</span>
+        </button>
+      )}
+      <Popover>
+        <PopoverTrigger
+          render={
+            <Button variant="outline" size="sm" className="h-7 text-xs">
+              {`Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}`}
+            </Button>
+          }
+        />
+        <PopoverContent align="end" className="w-72 space-y-4">
+          <FilterPills
+            label="Prioriteit"
+            options={PRIORITY_OPTIONS_SPRINT}
+            value={filterPriority}
+            onChange={setFilterPriority}
+          />
+          <FilterPills
+            label="Status"
+            options={STATUS_OPTIONS_SPRINT}
+            value={filterStatus}
+            onChange={setFilterStatus}
+          />
+          <div className="flex justify-end pt-1 border-t border-border">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              disabled={activeFilterCount === 0}
+              onClick={() => {
+                setFilterPriority('all')
+                setFilterStatus('all')
+              }}
+            >
+              Wis filters
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger onClick={collapseAll} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alles inklappen">
+            <ChevronsUp size={14} />
+          </TooltipTrigger>
+          <TooltipContent>Alles inklappen</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger onClick={expandAll} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alles uitklappen">
+            <ChevronsDown size={14} />
+          </TooltipTrigger>
+          <TooltipContent>Alles uitklappen</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger onClick={onlyNotDone} className="text-muted-foreground hover:text-foreground p-0.5 rounded" aria-label="Alleen niet klaar">
+            <ListFilter size={14} />
+          </TooltipTrigger>
+          <TooltipContent>Alleen niet klaar</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </>
   )
 
   return (
     <div className="flex flex-col h-full">
-      <PanelNavBar title="Product Backlog" actions={collapseActions} />
+      <PanelNavBar title="Product Backlog" actions={headerActions} />
       <div
         ref={setNodeRef}
         className={cn(
@@ -445,11 +639,14 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
           isOver && 'bg-error/5 ring-2 ring-inset ring-error/20 rounded'
         )}
       >
-        {pbisWithStories.map(pbi => (
+        {filteredPbis.map(pbi => (
           <div key={pbi.id}>
-            <button
+            <div
+              role="button"
+              tabIndex={0}
               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 select-none"
+              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(pbi.id) } }}
+              className="group w-full flex items-center gap-2 px-4 py-1.5 hover:bg-surface-container transition-colors text-left select-none cursor-pointer"
             >
               <span className="text-xs">{collapsed.has(pbi.id) ? '▶' : '▼'}</span>
               <span className="text-sm font-medium truncate flex-1">{pbi.title}</span>
@@ -457,7 +654,20 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
               <span className="text-xs text-muted-foreground">
                 {pbi.stories.filter(s => s.status === 'DONE').length}/{pbi.stories.length} klaar
               </span>
-            </button>
+              <DemoTooltip show={isDemo}>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (!isDemo) setPbiDialogState({ mode: 'edit', productId, pbi: { id: pbi.id, title: pbi.title, code: pbi.code, priority: pbi.priority, status: pbi.status, description: pbi.description } })
+                  }}
+                  className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded disabled:opacity-40 disabled:cursor-not-allowed"
+                  aria-label="Bewerk PBI"
+                  disabled={isDemo}
+                >
+                  <Pencil size={14} />
+                </button>
+              </DemoTooltip>
+            </div>
 
             {!collapsed.has(pbi.id) && pbi.stories.map(story => {
               const inSprint = sprintStoryIds.has(story.id)
@@ -490,6 +700,11 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
           </div>
         ))}
       </div>
+      <PbiDialog
+        state={pbiDialogState}
+        onClose={() => setPbiDialogState(null)}
+        isDemo={isDemo}
+      />
     </div>
   )
 }

components/sprint/sprint-board-client.tsx

@@ -210,6 +210,7 @@ export function SprintBoardClient({
             pbisWithStories={pbisWithStories}
             sprintStoryIds={sprintStoryIds}
             isDemo={isDemo}
+            productId={productId}
             onAdd={handleAdd}
           />,
           <SprintBacklogLeft

components/sprint/task-list.tsx

@@ -11,6 +11,7 @@ import {
   sortableKeyboardCoordinates,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
+import { Pencil } from 'lucide-react'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
@@ -120,6 +121,16 @@ function SortableTaskRow({
             </button>
           </div>
         </div>
+        <DemoTooltip show={isDemo}>
+          <button
+            onClick={(e) => { e.stopPropagation(); if (!isDemo) onEdit() }}
+            className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded shrink-0 mt-0.5 disabled:opacity-40 disabled:cursor-not-allowed"
+            aria-label="Bewerk taak"
+            disabled={isDemo}
+          >
+            <Pencil size={14} />
+          </button>
+        </DemoTooltip>
       </div>
     </div>
   )