feat(ST-507): add code input to Product, Pbi and Story forms

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/products/product-form.tsx

@@ -5,6 +5,7 @@ import { useFormStatus } from 'react-dom'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
+import { cn } from '@/lib/utils'
 
 type FieldErrors = Record<string, string[]>
 type ActionResult = { error?: string | FieldErrors; success?: boolean } | undefined
@@ -34,6 +35,7 @@ interface ProductFormProps {
   defaultValues?: {
     id?: string
     name?: string
+    code?: string | null
     description?: string
     repo_url?: string
     definition_of_done?: string
@@ -52,21 +54,39 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
         <input type="hidden" name="id" value={defaultValues.id} />
       )}
 
-      <div className="space-y-1.5">
-        <label htmlFor="name" className="text-sm font-medium text-foreground">
-          Naam <span className="text-error">*</span>
-        </label>
-        <Input
-          id="name"
-          name="name"
-          required
-          defaultValue={defaultValues?.name}
-          placeholder="bijv. DevPlanner"
-          className={fieldError('name') ? 'border-error' : ''}
-        />
-        {fieldError('name') && (
-          <p className="text-xs text-error">{fieldError('name')}</p>
-        )}
+      <div className="grid grid-cols-[8rem_1fr] gap-3">
+        <div className="space-y-1.5">
+          <label htmlFor="code" className="text-sm font-medium text-foreground">
+            Code
+          </label>
+          <Input
+            id="code"
+            name="code"
+            defaultValue={defaultValues?.code ?? ''}
+            placeholder="optioneel"
+            maxLength={30}
+            className={cn('font-mono text-sm', fieldError('code') ? 'border-error' : '')}
+          />
+          {fieldError('code') && (
+            <p className="text-xs text-error">{fieldError('code')}</p>
+          )}
+        </div>
+        <div className="space-y-1.5">
+          <label htmlFor="name" className="text-sm font-medium text-foreground">
+            Naam <span className="text-error">*</span>
+          </label>
+          <Input
+            id="name"
+            name="name"
+            required
+            defaultValue={defaultValues?.name}
+            placeholder="bijv. DevPlanner"
+            className={fieldError('name') ? 'border-error' : ''}
+          />
+          {fieldError('name') && (
+            <p className="text-xs text-error">{fieldError('name')}</p>
+          )}
+        </div>
       </div>
 
       <div className="space-y-1.5">