Auto

components/AusgabenForm.tsx

@@ -32,6 +32,10 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
   const [year, setYear] = useState('');
   const [isLoadingStats, setIsLoadingStats] = useState(false);
   
+  // Autocomplete data
+  const [autoCompleteWo, setAutoCompleteWo] = useState<string[]>([]);
+  const [autoCompleteWas, setAutoCompleteWas] = useState<string[]>([]);
+
   const fetchStats = useCallback(async (y: string, m: string) => {
     if (!y || !m) return;
     
@@ -49,6 +53,19 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
     }
   }, [typ]);
 
+  const fetchAutoComplete = useCallback(async () => {
+    try {
+      const response = await fetch(`/api/ausgaben/autocomplete?typ=${typ}`);
+      const data = await response.json();
+      if (data.success) {
+        setAutoCompleteWo(data.data.wo);
+        setAutoCompleteWas(data.data.was);
+      }
+    } catch (error) {
+      console.error('Error fetching autocomplete data:', error);
+    }
+  }, [typ]);
+
   // Initialize month/year on first load
   useEffect(() => {
     const now = new Date();
@@ -65,6 +82,11 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
     }
   }, [month, year, typ, fetchStats]);
 
+  // Fetch autocomplete data when typ changes
+  useEffect(() => {
+    fetchAutoComplete();
+  }, [typ, fetchAutoComplete]);
+
   const handleMonthChange = (newMonth: string) => {
     setMonth(newMonth);
   };
@@ -248,8 +270,14 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
                   onChange={(e) => setFormData({ ...formData, Wo: 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"
                   placeholder="Geschäft/Ort"
+                  list="wo-suggestions"
                   required
                 />
+                <datalist id="wo-suggestions">
+                  {autoCompleteWo.map((wo, index) => (
+                    <option key={index} value={wo} />
+                  ))}
+                </datalist>
               </td>
               <td className="p-2">
                 <input
@@ -258,8 +286,14 @@ export default function AusgabenForm({ onSuccess, selectedEntry, typ }: Ausgaben
                   onChange={(e) => setFormData({ ...formData, Was: 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"
                   placeholder="Beschreibung"
+                  list="was-suggestions"
                   required
                 />
+                <datalist id="was-suggestions">
+                  {autoCompleteWas.map((was, index) => (
+                    <option key={index} value={was} />
+                  ))}
+                </datalist>
               </td>
               <td className="p-2 w-24">
                 <input