Summen-Statistik der Kategorien

Eigenes 'Löschen' PopUp

components/AusgabenForm.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { CreateAusgabenEntry, AusgabenEntry, ZAHLUNGSARTEN_HAUSHALT, ZAHLUNGSARTEN_PRIVAT, MonthlyStats } from '@/types/ausgaben';
+import { CreateAusgabenEntry, AusgabenEntry, ZAHLUNGSARTEN_HAUSHALT, ZAHLUNGSARTEN_PRIVAT } from '@/types/ausgaben';
 import { Category } from '@/app/api/categories/route';
 
 interface AusgabenFormProps {
@@ -28,12 +28,6 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [editId, setEditId] = useState<number | null>(null);
   
-  // Monthly stats
-  const [stats, setStats] = useState<MonthlyStats | null>(null);
-  const [month, setMonth] = useState('');
-  const [year, setYear] = useState('');
-  const [isLoadingStats, setIsLoadingStats] = useState(false);
-  
   // Autocomplete data
   const [autoCompleteWo, setAutoCompleteWo] = useState<string[]>([]);
   const [autoCompleteWas, setAutoCompleteWas] = useState<string[]>([]);
@@ -41,23 +35,6 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
   const [katDropdownOpen, setKatDropdownOpen] = useState(false);
   const katDropdownRef = useRef<HTMLDivElement>(null);
 
-  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}&typ=${typ}`);
-      const data = await response.json();
-      if (data.success) {
-        setStats(data.data);
-      }
-    } catch (error) {
-      console.error('Error fetching stats:', error);
-    } finally {
-      setIsLoadingStats(false);
-    }
-  }, [typ]);
-
   const fetchAutoComplete = useCallback(async () => {
     try {
       const response = await fetch(`/api/ausgaben/autocomplete?typ=${typ}`);
@@ -71,22 +48,6 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
     }
   }, [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]);
-
   // Fetch autocomplete data when typ changes
   useEffect(() => {
     fetchAutoComplete();
@@ -111,21 +72,6 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
       .catch(() => {});
   }, []);
 
-  const handleMonthChange = (newMonth: string) => {
-    setMonth(newMonth);
-  };
-
-  const handleYearChange = (newYear: string) => {
-    setYear(newYear);
-  };
-
-  const formatAmount = (amount: number | null) => {
-    if (amount === null || amount === undefined) return '0,00 €';
-    return new Intl.NumberFormat('de-DE', {
-      style: 'currency',
-      currency: 'EUR',
-    }).format(amount);
-  };
 
   useEffect(() => {
     if (selectedEntry) {
@@ -211,7 +157,7 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
         Wo: formData.Wo,
         Was: formData.Was,
         Kat: formData.Kat,
-        Wieviel: formData.Wieviel,
+        Wieviel: String(formData.Wieviel).replace(',', '.'),
         Wie: formData.Wie,
         TYP: formData.TYP,
       };
@@ -227,8 +173,6 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
       if (response.ok) {
         handleReset();
         onSuccess();
-        // Refresh stats after successful save
-        fetchStats(year, month);
       } else {
         alert('Fehler beim Speichern!');
       }
@@ -355,11 +299,14 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
               </td>
               <td className="p-2 w-24">
                 <input
-                  type="number"
-                  step="0.01"
+                  type="text"
+                  inputMode="decimal"
                   value={formData.Wieviel}
-                  onChange={(e) => setFormData({ ...formData, Wieviel: 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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  onChange={(e) => {
+                    const val = e.target.value.replace(/[^0-9.,]/g, '').replace(',', '.');
+                    setFormData({ ...formData, Wieviel: val });
+                  }}
+                  className="w-full px-2 py-1 text-base rounded border-2 border-gray-400 bg-white focus:border-blue-500 focus:outline-none"
                   placeholder="0.00"
                   required
                 />
@@ -405,53 +352,6 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
             Löschen
           </button>
         </div>
-
-        {/* Monatsstatistiken */}
-        <div className="mt-6 pt-4 pb-6 -mb-6 border-t border-black -mx-6 px-6 bg-[#E0E0FF]">
-          <div className="flex items-center justify-between pt-1">
-            <div className="flex gap-4 items-center">
-              <label className="font-semibold">Monat:</label>
-              <select
-                value={month}
-                onChange={(e) => handleMonthChange(e.target.value)}
-                className="border border-gray-400 rounded px-3 py-1"
-              >
-                <option value="01">Januar</option>
-                <option value="02">Februar</option>
-                <option value="03">März</option>
-                <option value="04">April</option>
-                <option value="05">Mai</option>
-                <option value="06">Juni</option>
-                <option value="07">Juli</option>
-                <option value="08">August</option>
-                <option value="09">September</option>
-                <option value="10">Oktober</option>
-                <option value="11">November</option>
-                <option value="12">Dezember</option>
-              </select>
-              
-              <label className="font-semibold">Jahr:</label>
-              <input
-                type="number"
-                value={year}
-                onChange={(e) => handleYearChange(e.target.value)}
-                className="border border-gray-400 rounded px-3 py-1 w-24"
-                min="2013"
-                max="2099"
-              />
-            </div>
-
-            <div>
-              {isLoadingStats ? (
-                <span>Lade...</span>
-              ) : stats ? (
-                <span className="font-bold text-lg">
-                  Summe: {formatAmount(stats.totalAusgaben)}
-                </span>
-              ) : null}
-            </div>
-          </div>
-        </div>
       </form>
     </div>
   );