feat(product-dialog): conform aan dialog-pattern + entity-profile

Story 2 van PBI "Alle dialogen conform docs/patterns/dialog.md".

- lib/schemas/product.ts — gedeeld zod-schema (Dialog API)
- actions/products.ts — createProductAction/updateProductAction returnen
  nu code+fieldErrors voor 422-validatie en code: 403 voor demo/auth
- ProductDialog adopt useDirtyCloseGuard, useDialogSubmitShortcut,
  entityDialog* layout-classes; 422-fieldErrors mappen naar form.setError
- docs/specs/dialogs/product.md — entity-profile

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

__tests__/actions/products.test.ts

@@ -107,7 +107,10 @@ describe('createProductAction', () => {
 
     const result = await createProductAction(VALID_DATA)
 
-    expect(result).toMatchObject({ error: expect.stringContaining('gebruik') })
+    expect(result).toMatchObject({
+      code: 422,
+      fieldErrors: { code: expect.arrayContaining([expect.stringContaining('gebruik')]) },
+    })
     expect(mockTransaction).not.toHaveBeenCalled()
   })
 

actions/products.ts

@@ -10,8 +10,10 @@ import { SessionData, sessionOptions } from '@/lib/session'
 import { Role } from '@prisma/client'
 import { isValidCode, MAX_CODE_LENGTH, normalizeCode } from '@/lib/code'
 import { productAccessFilter } from '@/lib/product-access'
+import { productSchema as productInput, type ProductInput } from '@/lib/schemas/product'
 
-const productSchema = z.object({
+// Legacy FormData schema for ProductForm components (other constraints than dialog)
+const productFormDataSchema = z.object({
   name: z.string().min(1, 'Naam is verplicht').max(100, 'Naam mag maximaal 100 tekens bevatten'),
   code: z
     .string()
@@ -29,25 +31,13 @@ const productSchema = z.object({
     .max(500, 'Definition of Done mag maximaal 500 tekens bevatten'),
 })
 
-// Dialog-based schema (data-object API)
+type ProductFieldErrors = Partial<Record<keyof ProductInput, string[]>>
-const productInput = z.object({
+type ProductActionResult =
-  name: z.string().min(1).max(200),
+  | { success: true; productId: string }
-  code: z.string().max(20).optional(),
+  | { error: string; code?: number; fieldErrors?: ProductFieldErrors }
-  description: z.string().max(4000).optional(),
+type UpdateProductResult =
-  repo_url: z
+  | { success: true }
-    .string()
+  | { error: string; code?: number; fieldErrors?: ProductFieldErrors }
-    .url()
-    .regex(/^https:\/\/github\.com\//)
-    .optional()
-    .nullable(),
-  definition_of_done: z.string().max(4000).optional(),
-  auto_pr: z.boolean().default(false),
-})
-
-export type ProductInput = z.infer<typeof productInput>
-
-type ProductActionResult = { success: true; productId: string } | { error: string }
-type UpdateProductResult = { success: true } | { error: string }
 
 async function getSession() {
   return getIronSession<SessionData>(await cookies(), sessionOptions)
@@ -56,20 +46,30 @@ async function getSession() {
 // Data-object API used by ProductDialog
 export async function createProductAction(data: ProductInput): Promise<ProductActionResult> {
   const session = await getSession()
-  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (!session.userId) return { error: 'Niet ingelogd', code: 403 }
-  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus', code: 403 }
 
   const parsed = productInput.safeParse(data)
-  if (!parsed.success) return { error: parsed.error.flatten().formErrors[0] ?? 'Ongeldige invoer' }
+  if (!parsed.success) {
+    return {
+      error: 'Validatie mislukt',
+      code: 422,
+      fieldErrors: parsed.error.flatten().fieldErrors as ProductFieldErrors,
+    }
+  }
 
   const code = normalizeCode(parsed.data.code)
   if (code !== null && !isValidCode(code)) {
-    return { error: 'Code mag alleen letters, cijfers, punten, koppeltekens of underscores bevatten' }
+    return {
+      error: 'Validatie mislukt',
+      code: 422,
+      fieldErrors: { code: ['Alleen letters, cijfers, punten, koppeltekens of underscores'] },
+    }
   }
 
   if (code) {
     const dup = await prisma.product.findFirst({ where: { user_id: session.userId, code } })
-    if (dup) return { error: 'Code is al in gebruik' }
+    if (dup) return { error: 'Validatie mislukt', code: 422, fieldErrors: { code: ['Code is al in gebruik'] } }
   }
 
   const userId = session.userId
@@ -97,21 +97,31 @@ export async function createProductAction(data: ProductInput): Promise<ProductAc
 // Data-object API used by ProductDialog
 export async function updateProductAction(id: string, data: ProductInput): Promise<UpdateProductResult> {
   const session = await getSession()
-  if (!session.userId) return { error: 'Niet ingelogd' }
+  if (!session.userId) return { error: 'Niet ingelogd', code: 403 }
-  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus', code: 403 }
 
   const parsed = productInput.safeParse(data)
-  if (!parsed.success) return { error: parsed.error.flatten().formErrors[0] ?? 'Ongeldige invoer' }
+  if (!parsed.success) {
+    return {
+      error: 'Validatie mislukt',
+      code: 422,
+      fieldErrors: parsed.error.flatten().fieldErrors as ProductFieldErrors,
+    }
+  }
 
   const product = await prisma.product.findFirst({
     where: { id, ...productAccessFilter(session.userId) },
     select: { id: true },
   })
-  if (!product) return { error: 'Product niet gevonden of geen toegang' }
+  if (!product) return { error: 'Product niet gevonden of geen toegang', code: 403 }
 
   const code = normalizeCode(parsed.data.code)
   if (code !== null && !isValidCode(code)) {
-    return { error: 'Code mag alleen letters, cijfers, punten, koppeltekens of underscores bevatten' }
+    return {
+      error: 'Validatie mislukt',
+      code: 422,
+      fieldErrors: { code: ['Alleen letters, cijfers, punten, koppeltekens of underscores'] },
+    }
   }
 
   const userId = session.userId
@@ -149,7 +159,7 @@ export async function createProductFormAction(_prevState: unknown, formData: For
   if (!session.userId) return { error: 'Niet ingelogd' }
   if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
 
-  const parsed = productSchema.safeParse({
+  const parsed = productFormDataSchema.safeParse({
     name: formData.get('name'),
     code: (formData.get('code') as string) || undefined,
     description: formData.get('description') || undefined,
@@ -198,7 +208,7 @@ export async function updateProductFormAction(_prevState: unknown, formData: For
   const id = formData.get('id') as string
   if (!id) return { error: 'Product niet gevonden' }
 
-  const parsed = productSchema.safeParse({
+  const parsed = productFormDataSchema.safeParse({
     name: formData.get('name'),
     code: (formData.get('code') as string) || undefined,
     description: formData.get('description') || undefined,

components/dialogs/product-dialog.tsx

@@ -3,35 +3,32 @@
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
 import { toast } from 'sonner'
 import { cn } from '@/lib/utils'
 import {
   Dialog,
   DialogContent,
-  DialogHeader,
   DialogTitle,
-  DialogFooter,
-  DialogClose,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
+import {
+  useDirtyCloseGuard,
+  DirtyCloseGuardDialog,
+} from '@/components/shared/use-dirty-close-guard'
+import { useDialogSubmitShortcut } from '@/components/shared/use-dialog-submit-shortcut'
+import {
+  entityDialogBodyClasses,
+  entityDialogContentClasses,
+  entityDialogFooterClasses,
+  entityDialogHeaderClasses,
+} from '@/components/shared/entity-dialog-layout'
+import { productSchema, type ProductInput } from '@/lib/schemas/product'
 import { createProductAction, updateProductAction } from '@/actions/products'
 import { useProductsStore } from '@/stores/products-store'
 
-const formSchema = z.object({
-  name: z.string().min(1, 'Naam is verplicht').max(200),
-  code: z.string().max(20).optional(),
-  description: z.string().max(4000).optional(),
-  repo_url: z.string().max(200).optional(),
-  definition_of_done: z.string().max(4000).optional(),
-  auto_pr: z.boolean(),
-})
-
-type FormValues = z.infer<typeof formSchema>
-
 export interface ProductDialogProduct {
   id: string
   name: string
@@ -54,8 +51,9 @@ export function ProductDialog(props: Props) {
 
   const [isPending, setIsPending] = useState(false)
 
-  const form = useForm<FormValues>({
+  const form = useForm<ProductInput>({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(productSchema),
+    mode: 'onTouched',
     defaultValues: {
       name: product?.name ?? '',
       code: product?.code ?? '',
@@ -66,7 +64,7 @@ export function ProductDialog(props: Props) {
     },
   })
 
-  // Reset form when dialog opens or switches product
+  // Reset when opening or switching product
   useEffect(() => {
     if (open) {
       form.reset({
@@ -81,14 +79,13 @@ export function ProductDialog(props: Props) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, product?.id])
 
-  async function onSubmit(values: FormValues) {
+  const closeGuard = useDirtyCloseGuard(form.formState.isDirty, () => onOpenChange(false))
-    if (isDemo) {
+  const handleKeyDown = useDialogSubmitShortcut(() => form.handleSubmit(onSubmit)())
-      toast.error('Niet beschikbaar in demo-modus')
+
-      return
+  async function onSubmit(values: ProductInput) {
-    }
     setIsPending(true)
     try {
-      const payload = {
+      const payload: ProductInput = {
         name: values.name,
         code: values.code || undefined,
         description: values.description || undefined,
@@ -97,14 +94,29 @@ export function ProductDialog(props: Props) {
         auto_pr: values.auto_pr,
       }
 
+      function applyError(result: { error: string; code?: number; fieldErrors?: Partial<Record<keyof ProductInput, string[]>> }) {
+        if (result.code === 422 && result.fieldErrors) {
+          for (const [field, errors] of Object.entries(result.fieldErrors)) {
+            if (errors && errors.length > 0) {
+              form.setError(field as keyof ProductInput, { message: errors[0] })
+            }
+          }
+          const firstError = Object.keys(result.fieldErrors)[0] as keyof ProductInput | undefined
+          if (firstError) form.setFocus(firstError)
+          return
+        }
+        toast.error(result.error)
+      }
+
       if (mode === 'create') {
         const result = await createProductAction(payload)
         if ('error' in result) {
-          toast.error(result.error)
+          applyError(result)
           return
         }
+        const productId = result.productId
         addProduct({
-          id: result.productId,
+          id: productId,
           name: values.name,
           code: values.code ?? null,
           description: values.description ?? null,
@@ -114,11 +126,11 @@ export function ProductDialog(props: Props) {
         })
         toast.success('Product aangemaakt')
         onOpenChange(false)
-        props.onSaved?.(result.productId)
+        props.onSaved?.(productId)
       } else {
         const result = await updateProductAction(product!.id, payload)
         if ('error' in result) {
-          toast.error(result.error)
+          applyError(result)
           return
         }
         updateProduct(product!.id, {
@@ -141,130 +153,156 @@ export function ProductDialog(props: Props) {
   const autoPr = form.watch('auto_pr')
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <>
-      <DialogContent className="sm:max-w-lg">
+      <Dialog open={open} onOpenChange={(v) => { if (!v) closeGuard.attemptClose(); else onOpenChange(v) }}>
-        <DialogHeader>
+        <DialogContent
-          <DialogTitle>{mode === 'edit' ? 'Product bewerken' : 'Nieuw product'}</DialogTitle>
+          showCloseButton={false}
-        </DialogHeader>
+          onKeyDown={handleKeyDown}
-
+          className={entityDialogContentClasses}
-        <form
-          id="product-form"
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="grid gap-4"
         >
-          <div className="grid gap-1.5">
+          <div className={entityDialogHeaderClasses}>
-            <label htmlFor="product-name" className="text-sm font-medium">
+            <DialogTitle className="text-xl font-semibold">
-              Naam <span className="text-error">*</span>
+              {mode === 'edit' ? 'Product bewerken' : 'Nieuw product'}
-            </label>
+            </DialogTitle>
-            <Input
-              id="product-name"
-              autoFocus={mode === 'create'}
-              disabled={isDemo}
-              maxLength={200}
-              {...form.register('name')}
-              className={form.formState.errors.name ? 'border-error' : ''}
-            />
-            {form.formState.errors.name && (
-              <p className="text-xs text-error">{form.formState.errors.name.message}</p>
-            )}
           </div>
 
-          <div className="grid gap-1.5">
+          <form
-            <label htmlFor="product-code" className="text-sm font-medium">
+            id="product-form"
-              Code <span className="text-muted-foreground font-normal">(optioneel)</span>
+            onSubmit={form.handleSubmit(onSubmit)}
-            </label>
+            className={entityDialogBodyClasses}
-            <Input
+          >
-              id="product-code"
+            <div className="grid gap-1.5">
-              disabled={isDemo}
+              <label htmlFor="product-name" className="text-sm font-medium">
-              maxLength={20}
+                Naam <span className="text-error">*</span>
-              placeholder="korte slug, bv. SCRUM4ME"
+              </label>
-              className="font-mono text-sm"
+              <Input
-              {...form.register('code')}
+                id="product-name"
-            />
+                autoFocus={mode === 'create'}
-          </div>
+                disabled={isDemo}
-
+                maxLength={200}
-          <div className="grid gap-1.5">
+                aria-invalid={!!form.formState.errors.name}
-            <label htmlFor="product-description" className="text-sm font-medium">
+                {...form.register('name')}
-              Beschrijving <span className="text-muted-foreground font-normal">(optioneel)</span>
+                className={form.formState.errors.name ? 'border-error' : ''}
-            </label>
-            <Textarea
-              id="product-description"
-              disabled={isDemo}
-              rows={3}
-              maxLength={4000}
-              className="resize-none"
-              {...form.register('description')}
-            />
-          </div>
-
-          <div className="grid gap-1.5">
-            <label htmlFor="product-repo-url" className="text-sm font-medium">
-              Repository URL <span className="text-muted-foreground font-normal">(optioneel)</span>
-            </label>
-            <Input
-              id="product-repo-url"
-              disabled={isDemo}
-              placeholder="https://github.com/owner/repo"
-              {...form.register('repo_url')}
-            />
-          </div>
-
-          <div className="grid gap-1.5">
-            <label htmlFor="product-dod" className="text-sm font-medium">
-              Definition of Done <span className="text-muted-foreground font-normal">(optioneel)</span>
-            </label>
-            <Textarea
-              id="product-dod"
-              disabled={isDemo}
-              rows={4}
-              maxLength={4000}
-              className="resize-none"
-              {...form.register('definition_of_done')}
-            />
-          </div>
-
-          <div className="flex items-start gap-3">
-            <button
-              type="button"
-              role="switch"
-              aria-checked={autoPr}
-              disabled={isDemo}
-              onClick={() => form.setValue('auto_pr', !autoPr)}
-              className={cn(
-                'relative mt-0.5 inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent',
-                'transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                'disabled:cursor-not-allowed disabled:opacity-50',
-                autoPr ? 'bg-primary' : 'bg-input',
-              )}
-            >
-              <span
-                className={cn(
-                  'pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-sm',
-                  'transition-transform duration-200',
-                  autoPr ? 'translate-x-4' : 'translate-x-0',
-                )}
               />
-            </button>
+              {form.formState.errors.name && (
-            <div className="grid gap-0.5">
+                <p className="text-xs text-error">{form.formState.errors.name.message}</p>
-              <span className="text-sm font-medium">Automatisch PR aanmaken na voltooide story</span>
+              )}
-              <span className="text-xs text-muted-foreground">
+            </div>
-                Bij elke voltooide story automatisch een PR aanmaken in <code>repo_url</code>
+
-              </span>
+            <div className="grid gap-1.5">
+              <label htmlFor="product-code" className="text-sm font-medium">
+                Code <span className="text-muted-foreground font-normal">(optioneel)</span>
+              </label>
+              <Input
+                id="product-code"
+                disabled={isDemo}
+                maxLength={20}
+                placeholder="korte slug, bv. SCRUM4ME"
+                aria-invalid={!!form.formState.errors.code}
+                className={cn('font-mono text-sm', form.formState.errors.code && 'border-error')}
+                {...form.register('code')}
+              />
+              {form.formState.errors.code && (
+                <p className="text-xs text-error">{form.formState.errors.code.message}</p>
+              )}
+            </div>
+
+            <div className="grid gap-1.5">
+              <label htmlFor="product-description" className="text-sm font-medium">
+                Beschrijving <span className="text-muted-foreground font-normal">(optioneel)</span>
+              </label>
+              <Textarea
+                id="product-description"
+                disabled={isDemo}
+                rows={3}
+                maxLength={4000}
+                className="resize-none"
+                {...form.register('description')}
+              />
+            </div>
+
+            <div className="grid gap-1.5">
+              <label htmlFor="product-repo-url" className="text-sm font-medium">
+                Repository URL <span className="text-muted-foreground font-normal">(optioneel)</span>
+              </label>
+              <Input
+                id="product-repo-url"
+                disabled={isDemo}
+                placeholder="https://github.com/owner/repo"
+                aria-invalid={!!form.formState.errors.repo_url}
+                {...form.register('repo_url')}
+                className={form.formState.errors.repo_url ? 'border-error' : ''}
+              />
+              {form.formState.errors.repo_url && (
+                <p className="text-xs text-error">{form.formState.errors.repo_url.message}</p>
+              )}
+            </div>
+
+            <div className="grid gap-1.5">
+              <label htmlFor="product-dod" className="text-sm font-medium">
+                Definition of Done <span className="text-muted-foreground font-normal">(optioneel)</span>
+              </label>
+              <Textarea
+                id="product-dod"
+                disabled={isDemo}
+                rows={4}
+                maxLength={4000}
+                className="resize-none"
+                {...form.register('definition_of_done')}
+              />
+            </div>
+
+            <div className="flex items-start gap-3">
+              <button
+                type="button"
+                role="switch"
+                aria-checked={autoPr}
+                disabled={isDemo}
+                onClick={() => form.setValue('auto_pr', !autoPr, { shouldDirty: true })}
+                className={cn(
+                  'relative mt-0.5 inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent',
+                  'transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  'disabled:cursor-not-allowed disabled:opacity-50',
+                  autoPr ? 'bg-primary' : 'bg-input',
+                )}
+              >
+                <span
+                  className={cn(
+                    'pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-sm',
+                    'transition-transform duration-200',
+                    autoPr ? 'translate-x-4' : 'translate-x-0',
+                  )}
+                />
+              </button>
+              <div className="grid gap-0.5">
+                <span className="text-sm font-medium">Automatisch PR aanmaken na voltooide story</span>
+                <span className="text-xs text-muted-foreground">
+                  Bij elke voltooide story automatisch een PR aanmaken in <code>repo_url</code>
+                </span>
+              </div>
+            </div>
+          </form>
+
+          <div className={entityDialogFooterClasses}>
+            <div className="flex items-center justify-end gap-2">
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={closeGuard.attemptClose}
+                disabled={isPending}
+              >
+                Annuleren
+              </Button>
+              <DemoTooltip show={isDemo}>
+                <Button type="submit" form="product-form" disabled={isPending || isDemo}>
+                  {isPending ? '…' : mode === 'edit' ? 'Opslaan' : 'Aanmaken'}
+                </Button>
+              </DemoTooltip>
             </div>
           </div>
-        </form>
+        </DialogContent>
-
+      </Dialog>
-        <DialogFooter>
+      <DirtyCloseGuardDialog guard={closeGuard} />
-          <DialogClose render={<Button type="button" variant="outline" />}>
+    </>
-            Annuleren
-          </DialogClose>
-          <DemoTooltip show={isDemo}>
-            <Button type="submit" form="product-form" disabled={isPending || isDemo}>
-              {isPending ? '…' : mode === 'edit' ? 'Opslaan' : 'Aanmaken'}
-            </Button>
-          </DemoTooltip>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
   )
 }

docs/INDEX.md

@@ -2,7 +2,7 @@
 
 # Documentation Index
 
-Auto-generated on 2026-05-03 from front-matter and headings.
+Auto-generated on 2026-05-04 from front-matter and headings.
 
 ## Architecture Decision Records
 
@@ -24,6 +24,7 @@ Auto-generated on 2026-05-03 from front-matter and headings.
 | Title | Status | Updated |
 |---|---|---|
 | [PbiDialog Profiel](./specs/dialogs/pbi.md) | active | 2026-05-03 |
+| [ProductDialog Profiel](./specs/dialogs/product.md) | active | 2026-05-04 |
 | [StoryDialog Profiel](./specs/dialogs/story.md) | active | 2026-05-03 |
 | [TaskDialog Profiel](./specs/dialogs/task.md) | active | 2026-05-03 |
 | [Scrum4Me — Functionele Specificatie](./specs/functional.md) | active | 2026-05-03 |

docs/specs/dialogs/product.md

@@ -0,0 +1,59 @@
+---
+title: "ProductDialog Profiel"
+status: active
+audience: [ai-agent, contributor]
+language: nl
+last_updated: 2026-05-04
+---
+
+# ProductDialog Profiel
+
+> Volgt `docs/patterns/dialog.md`. Dit document beschrijft alleen de afwijkingen en entity-specifieke keuzes.
+
+## Velden
+
+| Veld | Type | Mode | Validatie |
+|---|---|---|---|
+| `name` | string | both | min 1, max 200 |
+| `code` | string? | both | max 20, alleen `[a-zA-Z0-9._-]`; uniek per gebruiker |
+| `description` | string? | both | max 4000, markdown vrij |
+| `repo_url` | string? \| null | both | https URL, moet beginnen met `https://github.com/` |
+| `definition_of_done` | string? | both | max 4000, vrije tekst |
+| `auto_pr` | boolean | both | default `false` |
+
+## URL- of state-pattern
+
+- Gekozen: **state-based** (§11.2)
+- Reden: dialog leeft binnen één parent-component (`ProductList` op `/dashboard` en de product-actions-bar op `/products/[id]`); deep-linking is niet vereist
+- Open-state komt uit `ProductList` (lijst-context) of `EditProductButton` (single-item context)
+
+## Status-veld
+
+N.v.t. — Product heeft geen status-enum. `archived` is een boolean buiten dit dialog (eigen archive-flow).
+
+## Server actions
+
+- `createProductAction(data)` in `actions/products.ts` — context-arg via `revalidatePath('/products')` + `revalidatePath('/dashboard')`
+- `updateProductAction(id, data)` in `actions/products.ts` — context-arg via `revalidatePath('/products/${id}')` + `revalidatePath('/dashboard')` + `pg_notify('product_updated')`
+- Beide hebben `session.userId`-check, `session.isDemo`-check (laag 2 demo-policy) en `productAccessFilter` voor update
+- Resultaat-shape: `{ success: true, productId? }` of `{ error: string, code?: 422|403, fieldErrors?: Record<string, string[]> }`
+
+## Foutcodes
+
+| Code | Wanneer | UI |
+|---|---|---|
+| 422 | zod-validatie of code-uniqueness | `fieldErrors` → `form.setError`, geen toast, focus naar eerste error-veld |
+| 403 | niet ingelogd, demo-modus, of geen toegang tot product | toast met message |
+| 500 | onverwacht | huidige behandeling: error wordt door React opgevangen — laat de form open |
+
+## Speciale gedragingen
+
+- **Custom switch voor `auto_pr`**: native `<button role="switch">` met MD3-kleur-tokens (geen aparte primitive in v1; zou gepromoot moeten worden naar `components/shared/switch.tsx` zodra elders nodig).
+- **Code-uniqueness server-side**: bij conflict wordt `fieldErrors.code` gezet; veld krijgt rode rand.
+- **`useProductsStore` updates**: na succesvolle save wordt de in-memory store synchroon bijgewerkt zodat de productlijst onmiddellijk reageert (lokaal-first).
+
+## Bewust NIET in v1
+
+- Verwijderen vanuit deze dialog (loopt via `archiveProductAction` op een andere knop)
+- Bulk edit
+- Members beheren (eigen scherm op `/products/[id]/settings`)

lib/schemas/product.ts

@@ -0,0 +1,18 @@
+import { z } from 'zod'
+
+export const productSchema = z.object({
+  name: z.string().trim().min(1, 'Naam is verplicht').max(200, 'Maximaal 200 tekens'),
+  code: z.string().trim().max(20, 'Maximaal 20 tekens').optional(),
+  description: z.string().max(4000, 'Maximaal 4000 tekens').optional(),
+  repo_url: z
+    .string()
+    .url('Voer een geldige URL in (inclusief https://)')
+    .regex(/^https:\/\/github\.com\//, 'Alleen GitHub-URLs worden ondersteund')
+    .optional()
+    .nullable()
+    .or(z.literal('')),
+  definition_of_done: z.string().max(4000, 'Maximaal 4000 tekens').optional(),
+  auto_pr: z.boolean(),
+})
+
+export type ProductInput = z.infer<typeof productSchema>