From 73c27ac43ef200eed7b16cabe44bf28f0c400dc6 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Thu, 30 Apr 2026 00:36:03 +0200
Subject: [PATCH] feat(ST-1114): add DirtyCloseGuard reusable component for
 dirty-form close confirmation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../entity-dialog/dirty-close-guard.tsx       | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 components/entity-dialog/dirty-close-guard.tsx

diff --git a/components/entity-dialog/dirty-close-guard.tsx b/components/entity-dialog/dirty-close-guard.tsx
new file mode 100644
index 0000000..eedd362
--- /dev/null
+++ b/components/entity-dialog/dirty-close-guard.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from '@/components/ui/alert-dialog'
+
+interface DirtyCloseGuardProps {
+  isDirty: boolean
+  onConfirm: () => void
+  children: (attemptClose: () => void) => React.ReactNode
+}
+
+export function DirtyCloseGuard({ isDirty, onConfirm, children }: DirtyCloseGuardProps) {
+  const [open, setOpen] = useState(false)
+
+  function attemptClose() {
+    if (isDirty) {
+      setOpen(true)
+    } else {
+      onConfirm()
+    }
+  }
+
+  return (
+    <>
+      {children(attemptClose)}
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogContent size="sm">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Wijzigingen niet opgeslagen</AlertDialogTitle>
+            <AlertDialogDescription>
+              Wil je de wijzigingen weggooien?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setOpen(false)}>
+              Blijven
+            </AlertDialogCancel>
+            <AlertDialogAction
+              variant="destructive"
+              onClick={() => { setOpen(false); onConfirm() }}
+            >
+              Weggooien
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}