Fix Bericht speichern: window.prompt() is unsupported in this browser environment, replaced with a proper Modal dialog

components/reports/ReportsPageClient.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { deleteReport, saveReport } from "@/actions/reports";
+import { Modal } from "@/components/ui/Modal";
 import { useToast } from "@/components/ui/Toast";
 import { fmtDate } from "@/lib/format";
 import {
@@ -51,6 +52,9 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
   const searchParams = useSearchParams();
   const { showToast } = useToast();
   const [expandedKey, setExpandedKey] = useState<string | null>(null);
+  const [saveModalOpen, setSaveModalOpen] = useState(false);
+  const [newReportName, setNewReportName] = useState("");
+  const [savingReport, setSavingReport] = useState(false);
 
   function updateParams(patch: Record<string, string | undefined>) {
     const sp = new URLSearchParams(searchParams.toString());
@@ -73,12 +77,18 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
     router.push(`${pathname}?${sp.toString()}`);
   }
 
-  async function handleSaveReport() {
-    const name = window.prompt("Name für diesen Bericht:");
-    if (!name) return;
-    const result = await saveReport({ name, config: { measure, group, split, ...filters } });
+  async function handleConfirmSaveReport() {
+    if (!newReportName.trim()) {
+      showToast("Bitte einen Namen angeben.", "error");
+      return;
+    }
+    setSavingReport(true);
+    const result = await saveReport({ name: newReportName.trim(), config: { measure, group, split, ...filters } });
+    setSavingReport(false);
     if (result.success) {
       showToast("Bericht gespeichert.");
+      setSaveModalOpen(false);
+      setNewReportName("");
       router.refresh();
     } else {
       showToast(result.error ?? "Fehler beim Speichern.", "error");
@@ -273,7 +283,7 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
             </button>
             <button
               type="button"
-              onClick={handleSaveReport}
+              onClick={() => setSaveModalOpen(true)}
               className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface"
             >
               <Save className="h-4 w-4" />
@@ -349,6 +359,37 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
           {rows.length === 0 && <p className="text-sm text-ink-muted">Keine Daten für diese Auswahl.</p>}
         </div>
       </div>
+
+      <Modal
+        open={saveModalOpen}
+        onClose={() => setSaveModalOpen(false)}
+        title="Bericht speichern"
+        footer={
+          <>
+            <button onClick={() => setSaveModalOpen(false)} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+              Abbrechen
+            </button>
+            <button
+              onClick={handleConfirmSaveReport}
+              disabled={savingReport}
+              className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
+            >
+              Speichern
+            </button>
+          </>
+        }
+      >
+        <div>
+          <label className="mb-1 block text-sm font-semibold text-ink">Name für diesen Bericht*</label>
+          <input
+            value={newReportName}
+            onChange={(e) => setNewReportName(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleConfirmSaveReport()}
+            autoFocus
+            className="w-full rounded border border-border px-3 py-2 text-sm"
+          />
+        </div>
+      </Modal>
     </div>
   );
 }