v0.71.0: admin panel — users table, login/sessions, generic DB CRUD modal

components/Modal.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect, type ReactNode } from 'react';
+
+// v0.71.0 — reusable modal dialog: fixed overlay (z-index 60, above the z-50 toast stack),
+// centered panel, closes on Escape and backdrop click (inner-panel clicks do not close it).
+// Foundation for future modal-based features; keep this generic.
+export default function Modal({ open, onClose, title, children }: { open: boolean; onClose: () => void; title: string; children: ReactNode }) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-panel" role="dialog" aria-modal="true" aria-label={title} onClick={(e) => e.stopPropagation()}>
+        <header className="modal-header">
+          <h2>{title}</h2>
+          <button type="button" data-testid="modal-close" className="pane-btn" onClick={onClose} aria-label="Close dialog">
+            ×
+          </button>
+        </header>
+        {children}
+      </div>
+    </div>
+  );
+}