Summen-Statistik der Kategorien

Eigenes 'Löschen' PopUp

components/AusgabenList.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { AusgabenEntry } from '@/types/ausgaben';
 
 interface AusgabenListProps {
@@ -9,14 +10,12 @@ interface AusgabenListProps {
 }
 
 export default function AusgabenList({ entries, onDelete, onEdit }: AusgabenListProps) {
-  const handleDelete = async (id: number) => {
-    if (!confirm('Wirklich löschen?')) return;
+  const [confirmId, setConfirmId] = useState<number | null>(null);
 
+  const handleDeleteConfirmed = async (id: number) => {
+    setConfirmId(null);
     try {
-      const response = await fetch(`/api/ausgaben/${id}`, {
-        method: 'DELETE',
-      });
-
+      const response = await fetch(`/api/ausgaben/${id}`, { method: 'DELETE' });
       if (response.ok) {
         onDelete(id);
       } else {
@@ -83,7 +82,7 @@ export default function AusgabenList({ entries, onDelete, onEdit }: AusgabenList
                     Bearbeiten
                   </button>
                   <button
-                    onClick={() => handleDelete(entry.ID)}
+                    onClick={() => setConfirmId(entry.ID)}
                     className="text-red-600 hover:text-red-800 px-3 py-1 rounded text-sm"
                   >
                     Löschen
@@ -94,6 +93,29 @@ export default function AusgabenList({ entries, onDelete, onEdit }: AusgabenList
           )}
         </tbody>
       </table>
+
+      {/* Bestätigungs-Modal */}
+      {confirmId !== null && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div className="bg-white border-2 border-black rounded-lg shadow-xl p-6 w-80">
+            <p className="text-lg font-semibold mb-6 text-center">Eintrag wirklich löschen?</p>
+            <div className="flex justify-center gap-4">
+              <button
+                onClick={() => handleDeleteConfirmed(confirmId)}
+                className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg transition-colors"
+              >
+                Löschen
+              </button>
+              <button
+                onClick={() => setConfirmId(null)}
+                className="bg-gray-200 hover:bg-gray-300 text-black font-medium py-2 px-6 rounded-lg transition-colors"
+              >
+                Abbrechen
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }