eigenen 'Löschen'-Dialog

components/WerteList.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { WerteEntry } from '@/types/werte';
 
 interface WerteListProps {
@@ -8,7 +9,38 @@ interface WerteListProps {
   onEdit?: (entry: WerteEntry) => void;
 }
 
+function ConfirmDialog({
+  onConfirm,
+  onCancel,
+}: {
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="bg-white border border-gray-300 rounded-lg shadow-lg p-6 w-80 text-center">
+        <p className="mb-6 text-gray-800 font-medium">Eintrag wirklich löschen?</p>
+        <div className="flex justify-center gap-4">
+          <button
+            onClick={onConfirm}
+            className="bg-red-500 hover:bg-red-600 text-white font-medium py-1.5 px-6 rounded-lg transition-colors"
+          >
+            Löschen
+          </button>
+          <button
+            onClick={onCancel}
+            className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-1.5 px-6 rounded-lg transition-colors"
+          >
+            Abbrechen
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function WerteList({ entries, onDelete, onEdit }: WerteListProps) {
+  const [confirmId, setConfirmId] = useState<number | null>(null);
   const formatValue = (value: number | string | null | undefined) => {
     if (value === null || value === undefined || value === '' || value === '0' || value === '0.0') {
       return '-';
@@ -44,10 +76,6 @@ export default function WerteList({ entries, onDelete, onEdit }: WerteListProps)
   };
 
   const handleDelete = async (id: number) => {
-    if (!confirm('Eintrag wirklich löschen?')) {
-      return;
-    }
-
     try {
       const response = await fetch(`/api/werte/${id}`, {
         method: 'DELETE',
@@ -61,6 +89,8 @@ export default function WerteList({ entries, onDelete, onEdit }: WerteListProps)
     } catch (error) {
       console.error('Error:', error);
       alert('Fehler beim Löschen!');
+    } finally {
+      setConfirmId(null);
     }
   };
 
@@ -74,6 +104,12 @@ export default function WerteList({ entries, onDelete, onEdit }: WerteListProps)
 
   return (
     <div className="overflow-x-auto">
+      {confirmId !== null && (
+        <ConfirmDialog
+          onConfirm={() => handleDelete(confirmId)}
+          onCancel={() => setConfirmId(null)}
+        />
+      )}
       <table className="w-full border-collapse">
         <thead>
           <tr className="bg-[#CCCCFF] border-b-2 border-gray-400">
@@ -117,7 +153,7 @@ export default function WerteList({ entries, onDelete, onEdit }: WerteListProps)
                     )}
                     {onDelete && (
                       <button
-                        onClick={() => entry.ID && handleDelete(entry.ID)}
+                        onClick={() => entry.ID && setConfirmId(entry.ID)}
                         className="text-red-600 hover:text-red-800 text-sm"
                       >
                         Löschen