From c74d1337cec734f4ce054668328b58432567decf Mon Sep 17 00:00:00 2001
From: janpeter visser <janpetervisser2@gmail.com>
Date: Mon, 27 Apr 2026 18:10:05 +0200
Subject: [PATCH] feat(backlog): sorteer PBI's en stories op prio/code/datum,
 onthoud keuze in localStorage; vergroot sprint-afronden dialoog

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/(app)/products/[id]/page.tsx    |   3 +-
 components/backlog/pbi-list.tsx     | 104 ++++++++++++++--------------
 components/backlog/story-panel.tsx  |  91 +++++++++++-------------
 components/sprint/sprint-header.tsx |   2 +-
 4 files changed, 94 insertions(+), 106 deletions(-)

diff --git a/app/(app)/products/[id]/page.tsx b/app/(app)/products/[id]/page.tsx
index 92a0e87..77cfe1d 100644
--- a/app/(app)/products/[id]/page.tsx
+++ b/app/(app)/products/[id]/page.tsx
@@ -42,6 +42,7 @@ export default async function ProductBacklogPage({ params }: Props) {
       priority: true,
       status: true,
       pbi_id: true,
+      created_at: true,
     },
   })
 
@@ -88,7 +89,7 @@ export default async function ProductBacklogPage({ params }: Props) {
           left={
             <PbiList
               productId={id}
-              pbis={pbis.map((p: (typeof pbis)[number]) => ({ id: p.id, code: p.code, title: p.title, priority: p.priority, description: p.description }))}
+              pbis={pbis.map((p: (typeof pbis)[number]) => ({ id: p.id, code: p.code, title: p.title, priority: p.priority, description: p.description, created_at: p.created_at }))}
               isDemo={isDemo}
             />
           }
diff --git a/components/backlog/pbi-list.tsx b/components/backlog/pbi-list.tsx
index 7e7cb20..eaec7ae 100644
--- a/components/backlog/pbi-list.tsx
+++ b/components/backlog/pbi-list.tsx
@@ -40,12 +40,8 @@ const PRIORITY_LABELS: Record<number, string> = {
   4: 'Laag',
 }
 
-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',
-}
+
+type SortMode = 'priority' | 'code' | 'date'
 
 interface Pbi {
   id: string
@@ -53,6 +49,7 @@ interface Pbi {
   title: string
   priority: number
   description?: string | null
+  created_at: Date
 }
 
 interface PbiListProps {
@@ -129,10 +126,16 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
   const { selectedPbiId, selectPbi } = useSelectionStore()
   const { pbiOrder, pbiPriority, initPbis, reorderPbis, rollbackPbis, updatePbiPriority } = usePlannerStore()
   const [filterPriority, setFilterPriority] = useState<number | null>(null)
+  const [sortMode, setSortMode] = useState<SortMode>(() => {
+    const saved = typeof window !== 'undefined' ? localStorage.getItem('scrum4me:pbi_sort') : null
+    return (saved === 'priority' || saved === 'code' || saved === 'date') ? saved : 'priority'
+  })
   const [dialogState, setDialogState] = useState<PbiDialogState | null>(null)
   const [activeDragId, setActiveDragId] = useState<string | null>(null)
   const [, startTransition] = useTransition()
 
+  useEffect(() => { localStorage.setItem('scrum4me:pbi_sort', sortMode) }, [sortMode])
+
   // Sync server data into store — use stable string dep to avoid infinite loop
   const pbiIdKey = pbis.map(p => p.id).join(',')
   useEffect(() => {
@@ -150,14 +153,18 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
     .filter(Boolean)
     .map(p => ({ ...p, priority: pbiPriority[p.id] ?? p.priority }))
 
-  const filtered = filterPriority ? orderedPbis.filter(p => p.priority === filterPriority) : orderedPbis
+  const base = filterPriority ? orderedPbis.filter(p => p.priority === filterPriority) : orderedPbis
 
-  const grouped = [1, 2, 3, 4].reduce<Record<number, Pbi[]>>((acc, p) => {
-    acc[p] = filtered.filter(pbi => pbi.priority === p)
-    return acc
-  }, {} as Record<number, Pbi[]>)
-
-  const visiblePriorities = [1, 2, 3, 4].filter(p => grouped[p].length > 0)
+  const filtered = [...base].sort((a, b) => {
+    if (sortMode === 'code') {
+      return (a.code ?? '').localeCompare(b.code ?? '', 'nl', { numeric: true })
+    }
+    if (sortMode === 'date') {
+      return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+    }
+    // priority: sort by priority asc, then drag-and-drop sort_order within group
+    return a.priority !== b.priority ? a.priority - b.priority : 0
+  })
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -231,6 +238,19 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
                 <span>×</span>
               </button>
             )}
+            <Select
+              value={sortMode}
+              onValueChange={(v) => setSortMode(v as SortMode)}
+            >
+              <SelectTrigger className="h-7 w-28 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="priority">Prioriteit</SelectItem>
+                <SelectItem value="code">Code</SelectItem>
+                <SelectItem value="date">Datum</SelectItem>
+              </SelectContent>
+            </Select>
             <Select
               value={filterPriority?.toString() ?? 'all'}
               onValueChange={(v) => setFilterPriority(!v || v === 'all' ? null : parseInt(v))}
@@ -277,46 +297,24 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
             onDragStart={handleDragStart}
             onDragEnd={handleDragEnd}
           >
-            <div className="p-3 space-y-4">
-              {visiblePriorities.map(priority => (
-                <div key={priority}>
-                  <div className="flex items-center gap-2 mb-2">
-                    <span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[priority])}>
-                      {PRIORITY_LABELS[priority]}
-                    </span>
-                    <div className="flex-1 h-px bg-border" />
-                    {!isDemo && (
-                      <button
-                        onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: priority })}
-                        className="text-xs text-muted-foreground hover:text-foreground"
-                        aria-label={`Nieuw PBI aanmaken (${PRIORITY_LABELS[priority]})`}
-                      >
-                        +
-                      </button>
-                    )}
-                  </div>
-
-                  <SortableContext
-                    items={grouped[priority].map(p => p.id)}
-                    strategy={verticalListSortingStrategy}
-                  >
-                    <div className="flex flex-col gap-2">
-                    {grouped[priority].map(pbi => (
-                      <SortablePbiRow
-                        key={pbi.id}
-                        pbi={pbi}
-                        isSelected={selectedPbiId === pbi.id}
-                        isDemo={isDemo}
-                        onSelect={() => selectPbi(pbi.id)}
-                        onEdit={() => setDialogState({ mode: 'edit', productId, pbi })}
-                        onDelete={() => handleDelete(pbi.id)}
-                      />
-                    ))}
-                    </div>
-                  </SortableContext>
-                </div>
-              ))}
-            </div>
+            <SortableContext
+              items={filtered.map(p => p.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="p-3 flex flex-col gap-2">
+                {filtered.map(pbi => (
+                  <SortablePbiRow
+                    key={pbi.id}
+                    pbi={pbi}
+                    isSelected={selectedPbiId === pbi.id}
+                    isDemo={isDemo}
+                    onSelect={() => selectPbi(pbi.id)}
+                    onEdit={() => setDialogState({ mode: 'edit', productId, pbi })}
+                    onDelete={() => handleDelete(pbi.id)}
+                  />
+                ))}
+              </div>
+            </SortableContext>
 
             <DragOverlay>
               {activePbi && (
diff --git a/components/backlog/story-panel.tsx b/components/backlog/story-panel.tsx
index f6a804f..5f4eb6d 100644
--- a/components/backlog/story-panel.tsx
+++ b/components/backlog/story-panel.tsx
@@ -29,16 +29,10 @@ import { useSelectionStore } from '@/stores/selection-store'
 import { usePlannerStore } from '@/stores/planner-store'
 import { reorderStoriesAction } from '@/actions/stories'
 import { StoryDialog, type StoryDialogState } from './story-dialog'
-import { BacklogCard, PRIORITY_BORDER } from './backlog-card'
+import { BacklogCard } from './backlog-card'
 import { cn } from '@/lib/utils'
 
-const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
-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',
-}
+type SortMode = 'priority' | 'code' | 'date'
 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',
@@ -59,6 +53,7 @@ export interface Story {
   priority: number
   status: string
   pbi_id: string
+  created_at: Date
 }
 
 interface StoryPanelProps {
@@ -111,10 +106,16 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
   const { storyOrder, initStories, reorderStories, rollbackStories } = usePlannerStore()
   const [filterStatus, setFilterStatus] = useState<string | null>(null)
   const [filterPriority, setFilterPriority] = useState<number | null>(null)
+  const [sortMode, setSortMode] = useState<SortMode>(() => {
+    const saved = typeof window !== 'undefined' ? localStorage.getItem('scrum4me:story_sort') : null
+    return (saved === 'priority' || saved === 'code' || saved === 'date') ? saved : 'priority'
+  })
   const [storyDialogState, setStoryDialogState] = useState<StoryDialogState | null>(null)
   const [activeDragId, setActiveDragId] = useState<string | null>(null)
   const [, startTransition] = useTransition()
 
+  useEffect(() => { localStorage.setItem('scrum4me:story_sort', sortMode) }, [sortMode])
+
   const rawStories = selectedPbiId ? (storiesByPbi[selectedPbiId] ?? []) : []
 
   // Sync into store — use stable string dep to avoid infinite loop
@@ -130,16 +131,19 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
   const order = (selectedPbiId ? storyOrder[selectedPbiId] : null) ?? rawStories.map(s => s.id)
   const orderedStories = order.map(id => storyMap[id]).filter(Boolean)
 
-  const filtered = orderedStories
+  const base = orderedStories
     .filter(s => !filterStatus || s.status === filterStatus)
     .filter(s => !filterPriority || s.priority === filterPriority)
 
-  const grouped = [1, 2, 3, 4].reduce<Record<number, Story[]>>((acc, p) => {
-    acc[p] = filtered.filter(s => s.priority === p)
-    return acc
-  }, {} as Record<number, Story[]>)
-
-  const visiblePriorities = [1, 2, 3, 4].filter(p => grouped[p].length > 0)
+  const filtered = [...base].sort((a, b) => {
+    if (sortMode === 'code') {
+      return (a.code ?? '').localeCompare(b.code ?? '', 'nl', { numeric: true })
+    }
+    if (sortMode === 'date') {
+      return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+    }
+    return a.priority !== b.priority ? a.priority - b.priority : 0
+  })
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -195,6 +199,16 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
                 Filter wissen ×
               </button>
             )}
+            <Select value={sortMode} onValueChange={(v) => setSortMode(v as SortMode)}>
+              <SelectTrigger className="h-7 w-28 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="priority">Prioriteit</SelectItem>
+                <SelectItem value="code">Code</SelectItem>
+                <SelectItem value="date">Datum</SelectItem>
+              </SelectContent>
+            </Select>
             <Select
               value={filterStatus ?? 'all'}
               onValueChange={(v) => setFilterStatus(!v || v === 'all' ? null : v)}
@@ -244,42 +258,17 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
             onDragStart={handleDragStart}
             onDragEnd={handleDragEnd}
           >
-            <div className="space-y-4">
-              {visiblePriorities.map(priority => (
-                <div key={priority}>
-                  <div className="flex items-center gap-2 mb-2">
-                    <span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[priority])}>
-                      {PRIORITY_LABELS[priority]}
-                    </span>
-                    <div className="flex-1 h-px bg-border" />
-                    {!isDemo && selectedPbiId && (
-                      <button
-                        onClick={() => setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: priority })}
-                        className="text-xs text-muted-foreground hover:text-foreground"
-                      >
-                        +
-                      </button>
-                    )}
-                  </div>
-
-                  <SortableContext
-                    items={grouped[priority].map(s => s.id)}
-                    strategy={rectSortingStrategy}
-                  >
-                    <div className="grid grid-cols-3 gap-2">
-                      {grouped[priority].map(story => (
-                        <SortableStoryBlock
-                          key={story.id}
-                          story={story}
-                          onClick={() => setStoryDialogState({ mode: 'edit', story, productId })}
-                        />
-                      ))}
-                    </div>
-                  </SortableContext>
-
-                </div>
-              ))}
-            </div>
+            <SortableContext items={filtered.map(s => s.id)} strategy={rectSortingStrategy}>
+              <div className="grid grid-cols-3 gap-2">
+                {filtered.map(story => (
+                  <SortableStoryBlock
+                    key={story.id}
+                    story={story}
+                    onClick={() => setStoryDialogState({ mode: 'edit', story, productId })}
+                  />
+                ))}
+              </div>
+            </SortableContext>
 
             <DragOverlay>
               {activeDragId && storyMap[activeDragId] && (
diff --git a/components/sprint/sprint-header.tsx b/components/sprint/sprint-header.tsx
index fcfa447..e923af8 100644
--- a/components/sprint/sprint-header.tsx
+++ b/components/sprint/sprint-header.tsx
@@ -105,7 +105,7 @@ export function SprintHeader({ productId: _productId, productName, sprint, isDem
 
       {/* Complete sprint dialog */}
       <Dialog open={completeOpen} onOpenChange={setCompleteOpen}>
-        <DialogContent className="sm:max-w-lg">
+        <DialogContent className="sm:max-w-2xl">
           <DialogHeader>
             <DialogTitle>Sprint afronden</DialogTitle>
           </DialogHeader>