From 2381832c6736b1428da6ce2d14b76afb56d1caad Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Wed, 29 Apr 2026 17:13:36 +0200
Subject: [PATCH] feat(ST-1109.7): add status select to PBI dialog

- New components/shared/pbi-status-select.tsx mirrors PrioritySelect:
  PBI_STATUS_LABELS (NL), PBI_STATUS_COLORS, PbiStatusSelect component
- Reuses existing --status-todo/blocked/done MD3 tokens
- PbiDialog: status state with sync-on-open; default 'ready' for create,
  pbi.status for edit; hidden input submits lowercase API value
- Priority + Status sit side-by-side in 2-col grid
- PbiDialogPbi.status is optional; pbi-list.tsx will populate in ST-1109.8

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/backlog/pbi-dialog.tsx       | 23 +++++++++++---
 components/shared/pbi-status-select.tsx | 41 +++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 components/shared/pbi-status-select.tsx

diff --git a/components/backlog/pbi-dialog.tsx b/components/backlog/pbi-dialog.tsx
index b93de29..6af393a 100644
--- a/components/backlog/pbi-dialog.tsx
+++ b/components/backlog/pbi-dialog.tsx
@@ -16,7 +16,9 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { PrioritySelect } from '@/components/shared/priority-select'
+import { PbiStatusSelect } from '@/components/shared/pbi-status-select'
 import { createPbiAction, updatePbiAction } from '@/actions/pbis'
+import type { PbiStatusApi } from '@/lib/task-status'
 
 export interface PbiDialogPbi {
   id: string
@@ -24,6 +26,7 @@ export interface PbiDialogPbi {
   priority: number
   description?: string | null
   code?: string | null
+  status?: PbiStatusApi
 }
 
 type CreateState = { mode: 'create'; productId: string; defaultPriority?: number }
@@ -51,11 +54,16 @@ export function PbiDialog({ state, onClose }: PbiDialogProps) {
   const initialPriority = isEdit ? pbi!.priority : (state?.defaultPriority ?? 2)
   const [priority, setPriority] = useState<number>(initialPriority)
 
-  // Sync priority when dialog opens for a different PBI or switches create/edit mode
+  const initialStatus: PbiStatusApi = isEdit ? (pbi!.status ?? 'ready') : 'ready'
+  const [status, setStatus] = useState<PbiStatusApi>(initialStatus)
+
+  // Sync priority + status when dialog opens for a different PBI or switches create/edit mode
   useEffect(() => {
     if (state) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setPriority(isEdit ? (state as EditState).pbi.priority : ((state as CreateState).defaultPriority ?? 2))
+       
+      setStatus(isEdit ? ((state as EditState).pbi.status ?? 'ready') : 'ready')
     }
   }, [state, isEdit])
 
@@ -105,6 +113,7 @@ export function PbiDialog({ state, onClose }: PbiDialogProps) {
           {isEdit && <input type="hidden" name="id" value={pbi!.id} />}
           {!isEdit && <input type="hidden" name="productId" value={(state as CreateState | null)?.productId ?? ''} />}
           <input type="hidden" name="priority" value={priority} />
+          <input type="hidden" name="status" value={status} />
 
           <div className="grid grid-cols-[6rem_1fr] gap-3">
             <div className="grid gap-1.5">
@@ -135,9 +144,15 @@ export function PbiDialog({ state, onClose }: PbiDialogProps) {
             </div>
           </div>
 
-          <div className="grid gap-1.5">
-            <label className="text-sm font-medium">Prioriteit</label>
-            <PrioritySelect value={priority} onChange={setPriority} />
+          <div className="grid grid-cols-2 gap-3">
+            <div className="grid gap-1.5">
+              <label className="text-sm font-medium">Prioriteit</label>
+              <PrioritySelect value={priority} onChange={setPriority} />
+            </div>
+            <div className="grid gap-1.5">
+              <label className="text-sm font-medium">Status</label>
+              <PbiStatusSelect value={status} onChange={setStatus} />
+            </div>
           </div>
 
           <div className="grid gap-1.5">
diff --git a/components/shared/pbi-status-select.tsx b/components/shared/pbi-status-select.tsx
new file mode 100644
index 0000000..ae93522
--- /dev/null
+++ b/components/shared/pbi-status-select.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
+import { cn } from '@/lib/utils'
+import type { PbiStatusApi } from '@/lib/task-status'
+
+export const PBI_STATUS_LABELS: Record<PbiStatusApi, string> = {
+  ready: 'Klaar voor sprint',
+  blocked: 'Geblokkeerd',
+  done: 'Afgerond',
+}
+
+export const PBI_STATUS_COLORS: Record<PbiStatusApi, string> = {
+  ready: 'bg-status-todo/15 text-status-todo border-status-todo/30',
+  blocked: 'bg-status-blocked/15 text-status-blocked border-status-blocked/30',
+  done: 'bg-status-done/15 text-status-done border-status-done/30',
+}
+
+interface PbiStatusSelectProps {
+  value: PbiStatusApi
+  onChange: (value: PbiStatusApi) => void
+  className?: string
+}
+
+export function PbiStatusSelect({ value, onChange, className }: PbiStatusSelectProps) {
+  return (
+    <Select
+      value={value}
+      onValueChange={(v) => { if (v) onChange(v as PbiStatusApi) }}
+    >
+      <SelectTrigger className={cn('w-full', className)}>
+        {PBI_STATUS_LABELS[value] ?? value}
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="ready">Klaar voor sprint</SelectItem>
+        <SelectItem value="blocked">Geblokkeerd</SelectItem>
+        <SelectItem value="done">Afgerond</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}