First commit - es tut schon mal ganz gut

2026-02-27 12:35:29 +00:00
commit 53124c1c78
27 changed files with 8403 additions and 0 deletions
--- a/components/AusgabenList.tsx
+++ b/components/AusgabenList.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import { AusgabenEntry } from '@/types/ausgaben';
+
+interface AusgabenListProps {
+  entries: AusgabenEntry[];
+  onDelete: (id: number) => void;
+  onEdit: (entry: AusgabenEntry) => void;
+}
+
+export default function AusgabenList({ entries, onDelete, onEdit }: AusgabenListProps) {
+  const handleDelete = async (id: number) => {
+    if (!confirm('Wirklich löschen?')) return;
+
+    try {
+      const response = await fetch(`/api/ausgaben/${id}`, {
+        method: 'DELETE',
+      });
+
+      if (response.ok) {
+        onDelete(id);
+      } else {
+        alert('Fehler beim Löschen!');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+      alert('Fehler beim Löschen!');
+    }
+  };
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('de-DE', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    });
+  };
+
+  const formatAmount = (amount: number) => {
+    return new Intl.NumberFormat('de-DE', {
+      style: 'currency',
+      currency: 'EUR',
+    }).format(amount);
+  };
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full">
+        <thead>
+          <tr className="bg-[#CCCCFF]">
+            <th className="border-b-2 border-black p-2 w-32">Datum</th>
+            <th className="border-b-2 border-black p-2 w-12">Tag</th>
+            <th className="border-b-2 border-black p-2 w-36">Wo</th>
+            <th className="border-b-2 border-black p-2 w-48">Was</th>
+            <th className="border-b-2 border-black p-2 w-8">Betrag</th>
+            <th className="border-b-2 border-black p-2 w-16">Wie</th>
+            <th className="border-b-2 border-black p-2 w-38">Aktion</th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.length === 0 ? (
+            <tr>
+              <td colSpan={7} className="text-center p-4 text-gray-500">
+                Keine Einträge vorhanden
+              </td>
+            </tr>
+          ) : (
+            entries.map((entry, index) => (
+              <tr key={entry.ID} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-100'}>
+                <td className="border-y border-black p-2 text-center">
+                  {formatDate(entry.Datum)}
+                </td>
+                <td className="border-y border-black p-2 text-center">{entry.WochTag.slice(0, 2)}</td>
+                <td className="border-y border-black p-2">{entry.Wo}</td>
+                <td className="border-y border-black p-2">{entry.Was}</td>
+                <td className="border-y border-black p-2 text-right">
+                  {formatAmount(entry.Wieviel)}
+                </td>
+                <td className="border-y border-black p-2 text-center">{entry.Wie}</td>
+                <td className="border-y border-black p-2 text-center">
+                  <button
+                    onClick={() => onEdit(entry)}
+                    className="text-blue-600 hover:text-blue-800 px-3 py-1 rounded text-sm mr-2"
+                  >
+                    Bearbeiten
+                  </button>
+                  <button
+                    onClick={() => handleDelete(entry.ID)}
+                    className="text-red-600 hover:text-red-800 px-3 py-1 rounded text-sm"
+                  >
+                    Löschen
+                  </button>
+                </td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}