Datenbank aufgefüllt und Einträge angepasst (bei 'Wie')

components/AusgabenForm.tsx

@@ -1,21 +1,26 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import { CreateAusgabenEntry, AusgabenEntry, ZAHLUNGSARTEN, Zahlungsart, MonthlyStats } from '@/types/ausgaben';
+import { useState, useEffect, useCallback } from 'react';
+import { CreateAusgabenEntry, AusgabenEntry, ZAHLUNGSARTEN_HAUSHALT, ZAHLUNGSARTEN_PRIVAT, MonthlyStats } from '@/types/ausgaben';
 
 interface AusgabenFormProps {
   onSuccess: () => void;
   selectedEntry?: AusgabenEntry | null;
+  typ: number; // 0 = Haushalt, 1 = Privat
 }
 
-export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormProps) {
+export default function AusgabenForm({ onSuccess, selectedEntry, typ }: AusgabenFormProps) {
+  const zahlungsarten = typ === 0 ? ZAHLUNGSARTEN_HAUSHALT : ZAHLUNGSARTEN_PRIVAT;
+  const defaultZahlungsart = typ === 0 ? 'ECR' : 'bar';
+
   const [formData, setFormData] = useState<CreateAusgabenEntry>({
     Datum: '',
     WochTag: '',
     Wo: '',
     Was: '',
     Wieviel: '',
-    Wie: 'EC-R',
+    Wie: defaultZahlungsart,
+    TYP: typ,
     OK: 0,
   });
 
@@ -28,22 +33,12 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
   const [year, setYear] = useState('');
   const [isLoadingStats, setIsLoadingStats] = useState(false);
 
-  // Initialize stats with current month/year
-  useEffect(() => {
-    const now = new Date();
-    const currentMonth = String(now.getMonth() + 1).padStart(2, '0');
-    const currentYear = String(now.getFullYear());
-    setMonth(currentMonth);
-    setYear(currentYear);
-    fetchStats(currentYear, currentMonth);
-  }, []);
-
-  const fetchStats = async (y: string, m: string) => {
+  const fetchStats = useCallback(async (y: string, m: string) => {
     if (!y || !m) return;
     
     setIsLoadingStats(true);
     try {
-      const response = await fetch(`/api/ausgaben/stats?year=${y}&month=${m}`);
+      const response = await fetch(`/api/ausgaben/stats?year=${y}&month=${m}&typ=${typ}`);
       const data = await response.json();
       if (data.success) {
         setStats(data.data);
@@ -53,16 +48,30 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
     } finally {
       setIsLoadingStats(false);
     }
-  };
+  }, [typ]);
+
+  // Initialize month/year on first load
+  useEffect(() => {
+    const now = new Date();
+    const currentMonth = String(now.getMonth() + 1).padStart(2, '0');
+    const currentYear = String(now.getFullYear());
+    setMonth(currentMonth);
+    setYear(currentYear);
+  }, []);
+
+  // Fetch stats when month, year, or typ changes
+  useEffect(() => {
+    if (month && year) {
+      fetchStats(year, month);
+    }
+  }, [month, year, typ, fetchStats]);
 
   const handleMonthChange = (newMonth: string) => {
     setMonth(newMonth);
-    fetchStats(year, newMonth);
   };
 
   const handleYearChange = (newYear: string) => {
     setYear(newYear);
-    fetchStats(newYear, month);
   };
 
   const formatAmount = (amount: number | null) => {
@@ -85,6 +94,7 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
         Was: selectedEntry.Was,
         Wieviel: selectedEntry.Wieviel.toString(),
         Wie: selectedEntry.Wie,
+        TYP: selectedEntry.TYP,
         OK: selectedEntry.OK || 0,
       });
       
@@ -99,11 +109,12 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
         ...prev,
         Datum: dateStr,
         WochTag: weekday,
+        TYP: typ,
       }));
       
       setEditId(null);
     }
-  }, [selectedEntry]);
+  }, [selectedEntry, typ]);
 
   const getWeekday = (date: Date): string => {
     const weekdays = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
@@ -167,7 +178,8 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
       Wo: '',
       Was: '',
       Wieviel: '',
-      Wie: 'EC-R',
+      Wie: defaultZahlungsart,
+      TYP: typ,
       OK: 0,
     });
     
@@ -240,11 +252,11 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
               <td className="p-2 w-38">
                 <select
                   value={formData.Wie}
-                  onChange={(e) => setFormData({ ...formData, Wie: e.target.value as Zahlungsart })}
+                  onChange={(e) => setFormData({ ...formData, Wie: e.target.value })}
                   className="w-full px-2 py-1 text-base rounded border-2 border-gray-400 bg-white focus:border-blue-500 focus:outline-none"
                   required
                 >
-                  {ZAHLUNGSARTEN.map((za) => (
+                  {zahlungsarten.map((za) => (
                     <option key={za.value} value={za.value}>
                       {za.label}
                     </option>
@@ -281,7 +293,7 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
               </td>
             </tr>
             <tr>
-              <td colSpan={6} className="p-3 pt-6 border-t border-gray-300">
+              <td colSpan={6} className="p-3 pt-6 border-t border-black">
                 <div className="flex items-center justify-between">
                   <div className="flex gap-4 items-center">
                     <label className="font-semibold">Monat:</label>