fix(compiler): key-based remount on hard-delete dialogs

Replaces the `if (open) { setStage(...); setCode(''); ... }` reset
useEffect with a key-based remount of the dialog body. The body now
mounts fresh each time the dialog opens; useState initialisers
run naturally instead of being chased by an effect.

Pattern (apply to remaining dialogs in the same shape):

```tsx
export function MyDialog(props) {
  return (
    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
      <DialogContent>
        {props.open && <MyDialogBody key={props.id} {...props} />}
      </DialogContent>
    </Dialog>
  );
}
```

Applied to:
- hard-delete-dialog (keyed on clientId)
- bulk-hard-delete-dialog (keyed on joined clientIds)

set-state-in-effect: 43 → 41.

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

src/components/clients/bulk-hard-delete-dialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AlertTriangle, Loader2, Mail } from 'lucide-react';
 import { toast } from 'sonner';
@@ -32,7 +32,21 @@ interface SkippedRow {
   reason: string;
 }
 
-export function BulkHardDeleteDialog({ open, onOpenChange, clientIds, onDeleted }: Props) {
+/**
+ * Key-based remount of the body when the dialog opens — fresh state per
+ * open without an open→reset useEffect (React Compiler-safe).
+ */
+export function BulkHardDeleteDialog(props: Props) {
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {props.open && <BulkHardDeleteDialogBody key={props.clientIds.join(',')} {...props} />}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function BulkHardDeleteDialogBody({ onOpenChange, clientIds, onDeleted }: Props) {
   const qc = useQueryClient();
   const [stage, setStage] = useState<Stage>('intent');
   const [code, setCode] = useState('');
@@ -43,17 +57,6 @@ export function BulkHardDeleteDialog({ open, onOpenChange, clientIds, onDeleted
 
   const expectedPhrase = `DELETE ${clientIds.length} CLIENT${clientIds.length === 1 ? '' : 'S'}`;
 
-  useEffect(() => {
-    if (open) {
-      setStage('intent');
-      setCode('');
-      setTypedPhrase('');
-      setMaskedEmail(null);
-      setSkipped([]);
-      setPartialDeleted(0);
-    }
-  }, [open]);
-
   const requestCode = useMutation({
     mutationFn: () =>
       apiFetch<{ data: { count: number; sentToMaskedEmail: string } }>(
@@ -105,147 +108,145 @@ export function BulkHardDeleteDialog({ open, onOpenChange, clientIds, onDeleted
   const codeValid = /^\d{4}$/.test(code.trim());
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 text-destructive">
-            <AlertTriangle className="h-5 w-5" />
-            Permanently delete {clientIds.length} client{clientIds.length === 1 ? '' : 's'}
-          </DialogTitle>
-          <DialogDescription>
-            All selected clients must already be archived. This cannot be undone.
-          </DialogDescription>
-        </DialogHeader>
+    <>
+      <DialogHeader>
+        <DialogTitle className="flex items-center gap-2 text-destructive">
+          <AlertTriangle className="h-5 w-5" />
+          Permanently delete {clientIds.length} client{clientIds.length === 1 ? '' : 's'}
+        </DialogTitle>
+        <DialogDescription>
+          All selected clients must already be archived. This cannot be undone.
+        </DialogDescription>
+      </DialogHeader>
 
-        {stage === 'intent' && (
-          <div className="space-y-3 text-sm text-muted-foreground">
-            <p>
-              We&rsquo;ll email a 4-digit confirmation code to your account address. The code is
-              tied to this exact set of clients and expires in 10 minutes.
-            </p>
-            <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900 text-xs">
-              For each client we delete: client record + addresses, contacts, notes, tags, portal
-              user, GDPR records, all interests, all reservations. Signed documents, email threads,
-              files and reminders are detached but kept.
+      {stage === 'intent' && (
+        <div className="space-y-3 text-sm text-muted-foreground">
+          <p>
+            We&rsquo;ll email a 4-digit confirmation code to your account address. The code is tied
+            to this exact set of clients and expires in 10 minutes.
+          </p>
+          <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900 text-xs">
+            For each client we delete: client record + addresses, contacts, notes, tags, portal
+            user, GDPR records, all interests, all reservations. Signed documents, email threads,
+            files and reminders are detached but kept.
+          </div>
+        </div>
+      )}
+
+      {stage === 'confirm' && (
+        <div className="space-y-3">
+          <div className="flex items-start gap-2 rounded-md border border-blue-300 bg-blue-50 p-3 text-xs text-blue-900">
+            <Mail className="h-4 w-4 shrink-0 mt-0.5" />
+            <div>
+              Code sent to <span className="font-mono">{maskedEmail}</span>. Enter both fields
+              below.
             </div>
           </div>
-        )}
-
-        {stage === 'confirm' && (
-          <div className="space-y-3">
-            <div className="flex items-start gap-2 rounded-md border border-blue-300 bg-blue-50 p-3 text-xs text-blue-900">
-              <Mail className="h-4 w-4 shrink-0 mt-0.5" />
-              <div>
-                Code sent to <span className="font-mono">{maskedEmail}</span>. Enter both fields
-                below.
-              </div>
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="bhd-code">4-digit code from email</Label>
-              <Input
-                id="bhd-code"
-                inputMode="numeric"
-                maxLength={4}
-                value={code}
-                onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
-                placeholder="0000"
-                className="font-mono tracking-[0.4em] text-center text-lg"
-                autoComplete="off"
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="bhd-phrase">
-                Type <span className="font-mono font-semibold">{expectedPhrase}</span> to confirm
-              </Label>
-              <Input
-                id="bhd-phrase"
-                value={typedPhrase}
-                onChange={(e) => setTypedPhrase(e.target.value)}
-                placeholder={expectedPhrase}
-                autoComplete="off"
-                className="font-mono"
-              />
-            </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="bhd-code">4-digit code from email</Label>
+            <Input
+              id="bhd-code"
+              inputMode="numeric"
+              maxLength={4}
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
+              placeholder="0000"
+              className="font-mono tracking-[0.4em] text-center text-lg"
+              autoComplete="off"
+            />
           </div>
-        )}
+          <div className="space-y-1.5">
+            <Label htmlFor="bhd-phrase">
+              Type <span className="font-mono font-semibold">{expectedPhrase}</span> to confirm
+            </Label>
+            <Input
+              id="bhd-phrase"
+              value={typedPhrase}
+              onChange={(e) => setTypedPhrase(e.target.value)}
+              placeholder={expectedPhrase}
+              autoComplete="off"
+              className="font-mono"
+            />
+          </div>
+        </div>
+      )}
 
-        {stage === 'partial' && (
-          <div className="space-y-3 text-sm">
-            <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900">
-              {partialDeleted} of {clientIds.length} permanently deleted. {skipped.length} skipped —
-              see below.
-            </div>
-            <div className="rounded-md border max-h-60 overflow-y-auto">
-              <table className="w-full text-xs">
-                <thead className="bg-muted/50 sticky top-0">
-                  <tr>
-                    <th className="text-left px-2 py-1.5 font-medium">Client ID</th>
-                    <th className="text-left px-2 py-1.5 font-medium">Reason</th>
+      {stage === 'partial' && (
+        <div className="space-y-3 text-sm">
+          <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900">
+            {partialDeleted} of {clientIds.length} permanently deleted. {skipped.length} skipped —
+            see below.
+          </div>
+          <div className="rounded-md border max-h-60 overflow-y-auto">
+            <table className="w-full text-xs">
+              <thead className="bg-muted/50 sticky top-0">
+                <tr>
+                  <th className="text-left px-2 py-1.5 font-medium">Client ID</th>
+                  <th className="text-left px-2 py-1.5 font-medium">Reason</th>
+                </tr>
+              </thead>
+              <tbody>
+                {skipped.map((row) => (
+                  <tr key={row.clientId} className="border-t">
+                    <td className="px-2 py-1.5 font-mono text-[11px]">
+                      {row.clientId.slice(0, 8)}…
+                    </td>
+                    <td className="px-2 py-1.5">{row.reason}</td>
                   </tr>
-                </thead>
-                <tbody>
-                  {skipped.map((row) => (
-                    <tr key={row.clientId} className="border-t">
-                      <td className="px-2 py-1.5 font-mono text-[11px]">
-                        {row.clientId.slice(0, 8)}…
-                      </td>
-                      <td className="px-2 py-1.5">{row.reason}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
+                ))}
+              </tbody>
+            </table>
           </div>
-        )}
+        </div>
+      )}
 
-        <DialogFooter>
-          {stage !== 'partial' && (
-            <Button variant="outline" onClick={() => onOpenChange(false)}>
-              Cancel
-            </Button>
-          )}
-          {stage === 'intent' && (
-            <Button
-              variant="destructive"
-              onClick={() => requestCode.mutate()}
-              disabled={requestCode.isPending}
-            >
-              {requestCode.isPending ? (
-                <>
-                  <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Sending…
-                </>
-              ) : (
-                'Send confirmation code'
-              )}
-            </Button>
-          )}
-          {stage === 'confirm' && (
-            <Button
-              variant="destructive"
-              onClick={() => bulkDelete.mutate()}
-              disabled={!codeValid || !phraseMatches || bulkDelete.isPending}
-            >
-              {bulkDelete.isPending ? (
-                <>
-                  <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Deleting…
-                </>
-              ) : (
-                `Permanently delete ${clientIds.length}`
-              )}
-            </Button>
-          )}
-          {stage === 'partial' && (
-            <Button
-              onClick={() => {
-                onOpenChange(false);
-                onDeleted?.(partialDeleted);
-              }}
-            >
-              Done
-            </Button>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      <DialogFooter>
+        {stage !== 'partial' && (
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+        )}
+        {stage === 'intent' && (
+          <Button
+            variant="destructive"
+            onClick={() => requestCode.mutate()}
+            disabled={requestCode.isPending}
+          >
+            {requestCode.isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Sending…
+              </>
+            ) : (
+              'Send confirmation code'
+            )}
+          </Button>
+        )}
+        {stage === 'confirm' && (
+          <Button
+            variant="destructive"
+            onClick={() => bulkDelete.mutate()}
+            disabled={!codeValid || !phraseMatches || bulkDelete.isPending}
+          >
+            {bulkDelete.isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Deleting…
+              </>
+            ) : (
+              `Permanently delete ${clientIds.length}`
+            )}
+          </Button>
+        )}
+        {stage === 'partial' && (
+          <Button
+            onClick={() => {
+              onOpenChange(false);
+              onDeleted?.(partialDeleted);
+            }}
+          >
+            Done
+          </Button>
+        )}
+      </DialogFooter>
+    </>
   );
 }