mit Auth, aber ohne Hash

.env.example

@@ -2,3 +2,13 @@ DB_HOST=localhost
 DB_USER=root
 DB_PASSWORD=your_password
 DB_NAME=RXF
+
+# Authentication Configuration
+# Format: username:passwordHash,username2:passwordHash2 (max 5 users)
+# Use 'node scripts/generate-password.js [password]' to generate hashes
+# Leave empty to disable authentication
+# Example hashes below (passwords: admin123, pass1):
+AUTH_USERS=admin:$2b$10$DKLO7uQPmdAw9Z64NChro.8mOsnqZQaRZjctWDojIkK926ROBVyJW,user1:$2b$10$K613Z70Hodr6xyEh10Mw2uoRZMV3U4LIB09929JUWw2n/pXKoUqaW
+
+# Secret key for JWT session encryption (change in production!)
+AUTH_SECRET=your-super-secret-key-change-this-in-production

DEPLOYMENT.md

@@ -60,7 +60,7 @@ npm start
 
 ### Schema erstellen
 
-Falls die Tabelle `Ausgaben_Tag` noch nicht existiert:
+Falls die Tabelle `Ausgaben` noch nicht existiert:
 
 ```bash
 mysql -u root -p RXF < create_table.sql
@@ -72,7 +72,7 @@ Die Anwendung verwendet die gleiche MySQL-Datenbank wie die alte Ausgaben-Anwend
 
 - **Host:** gitea-db (oder localhost für lokale Entwicklung)
 - **Database:** RXF
-- **Table:** Ausgaben_Tag
+- **Table:** Ausgaben
 
 Die Zugangsdaten werden über Umgebungsvariablen in `.env` konfiguriert.
 
@@ -172,7 +172,7 @@ docker-compose -f docker-compose.local.yml up -d --build
 Die Datenbank sollte regelmäßig gesichert werden:
 
 ```bash
-mysqldump -u root -p RXF Ausgaben_Tag > backup_$(date +%Y%m%d).sql
+mysqldump -u root -p RXF Ausgaben > backup_$(date +%Y%m%d).sql
 ```
 
 ### Application Files

MIGRATION.md

@@ -20,7 +20,7 @@ Dieser Leitfaden hilft Ihnen bei der Migration von der alten PHP/jQuery-basierte
 
 ## Was bleibt gleich?
 
-✓ **Datenbank:** Gleiche MySQL-Datenbank (`RXF.Ausgaben_Tag`)
+✓ **Datenbank:** Gleiche MySQL-Datenbank (`RXF.Ausgaben`)
 ✓ **Datenstruktur:** Identische Tabellenfelder
 ✓ **Funktionalität:** Alle Features der alten Version
 ✓ **Look & Feel:** Ähnliches Design (angelehnt an werte-next)
@@ -37,7 +37,6 @@ Dieser Leitfaden hilft Ihnen bei der Migration von der alten PHP/jQuery-basierte
 | Löschen | ✓ | ✓ | ✓ Implementiert |
 | Datepicker | ✓ jQuery UI | ✓ HTML5 | ✓ Implementiert |
 | Wochentag auto | ✓ | ✓ | ✓ Implementiert |
-| OK-Checkbox | ✓ | ✓ | ✓ Implementiert |
 | Tab-Navigation | ✓ jQuery UI | ✓ React | ✓ Implementiert |
 
 ## Datenbank
@@ -45,7 +44,7 @@ Dieser Leitfaden hilft Ihnen bei der Migration von der alten PHP/jQuery-basierte
 Die Datenbanktabelle bleibt **unverändert**:
 
 ```sql
-Ausgaben_Tag (
+Ausgaben (
   ID          int(11) AUTO_INCREMENT,
   Datum       date,
   WochTag     varchar(20),

README.md

@@ -8,26 +8,20 @@ Dies ist die modernisierte Version des alten PHP/jQuery-basierten Ausgaben-Progr
 
 ## Features
 
-- **Eingabe-Tab**: Erfassen von Ausgaben mit:
+- **Zwei Tabs für verschiedene Ausgabenkategorien:**
+  - **Haushalt (TYP=0)**: Zahlungsarten ECR, ECB, barR, barB, Ein(nahme), Uber(weisung)
+  - **Privat (TYP=1)**: Zahlungsarten bar, EC, VISA, MASTER, Einnahme, Uber(weisung)
+
+- **Eingabeformular mit integrierten Features:**
   - Datum (mit automatischem Wochentag)
   - Wo (Geschäft/Ort)
   - Was (Beschreibung)
   - Wieviel (Betrag in Euro)
-  - Wie (Zahlungsart: bar, EC, VISA, MASTER, Einnahme, Überweisung)
+  - Wie (Zahlungsart - abhängig vom aktiven Tab)
-  - OK-Checkbox für Kontrolle
+  - Monatliche Statistiken im Formular (Gesamtsumme, aufgeschlüsselt nach Zahlungsart)
-  - Monatsstatistiken
+  - Letzte 10 Einträge direkt unter dem Formular mit Bearbeiten/Löschen-Funktion
-  - Letzte 10 Einträge
+  - Bearbeiten-Funktion: Klick auf Eintrag lädt ihn ins Formular
-
+  - Filterung nach aktivem TYP (Haushalt/Privat)
-- **Listen-Tab**: Vollständige Auflistung aller Einträge mit:
-  - Bearbeiten-Funktion
-  - Löschen-Funktion
-  - Sortierung nach Datum (absteigend)
-
-- **Statistik-Tab**: Monatliche Auswertungen mit:
-  - Gesamtausgaben
-  - Aufschlüsselung nach Zahlungsart
-  - Einnahmen
-  - Überweisungen
 
 ## Technologie-Stack
 
@@ -81,24 +75,26 @@ npm start
 
 ## Datenbank-Schema
 
-Die Anwendung verwendet die Tabelle `Ausgaben_Tag` mit folgenden Feldern:
+Die Anwendung verwendet die Tabelle `Ausgaben` mit folgenden Feldern:
 
 - `ID` (auto_increment)
 - `Datum` (date)
-- `WochTag` (varchar)
 - `Wo` (varchar) - Geschäft/Ort
 - `Was` (varchar) - Beschreibung
 - `Wieviel` (decimal) - Betrag
 - `Wie` (varchar) - Zahlungsart
+- `TYP` (tinyint) - 0=Haushalt, 1=Privat
 - `OK` (tinyint) - Kontrollstatus
 
+**Hinweis:** Der Wochentag (`WochTag`) wird nicht in der Datenbank gespeichert, sondern dynamisch aus dem `Datum`-Feld berechnet.
+
 ## API Endpoints
 
-- `GET /api/ausgaben` - Einträge abrufen (mit limit, startDate, month, year params)
+- `GET /api/ausgaben` - Einträge abrufen (mit limit, startDate, month, year, typ params)
-- `POST /api/ausgaben` - Neuen Eintrag erstellen
+- `POST /api/ausgaben` - Neuen Eintrag erstellen (mit TYP)
-- `PUT /api/ausgaben/[id]` - Eintrag aktualisieren
+- `PUT /api/ausgaben/[id]` - Eintrag aktualisieren (mit TYP)
 - `DELETE /api/ausgaben/[id]` - Eintrag löschen
-- `GET /api/ausgaben/stats` - Monatsstatistiken (mit month, year params)
+- `GET /api/ausgaben/stats` - Monatsstatistiken (mit month, year, typ params)
 
 ## Migration von der alten Version
 

app/api/ausgaben/[id]/route.ts

@@ -10,24 +10,30 @@ export async function PUT(
   try {
     const { id } = await context.params;
     const body = await request.json();
-    const { Datum, WochTag, Wo, Was, Wieviel, Wie, OK } = body;
+    const { Datum, Wo, Was, Wieviel, Wie, TYP } = body;
+
+    if (!Datum || !Wo || !Was || !Wieviel || !Wie || TYP === undefined) {
+      return NextResponse.json(
+        { success: false, error: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
 
     const pool = getDbPool();
 
     const query = `
-      UPDATE Ausgaben_Tag
+      UPDATE Ausgaben
-      SET Datum = ?, WochTag = ?, Wo = ?, Was = ?, Wieviel = ?, Wie = ?, OK = ?
+      SET Datum = ?, Wo = ?, Was = ?, Wieviel = ?, Wie = ?, TYP = ?
       WHERE ID = ?
     `;
 
     const [result] = await pool.query<ResultSetHeader>(query, [
       Datum,
-      WochTag,
       Wo,
       Was,
       parseFloat(Wieviel),
       Wie,
-      OK || 0,
+      TYP,
       parseInt(id),
     ]);
 
@@ -59,7 +65,7 @@ export async function DELETE(
     const { id } = await context.params;
     const pool = getDbPool();
 
-    const query = 'DELETE FROM Ausgaben_Tag WHERE ID = ?';
+    const query = 'DELETE FROM Ausgaben WHERE ID = ?';
     const [result] = await pool.query<ResultSetHeader>(query, [parseInt(id)]);
 
     if (result.affectedRows === 0) {

app/api/ausgaben/autocomplete/route.ts

@@ -0,0 +1,51 @@
+import { NextResponse } from 'next/server';
+import { getDbPool } from '@/lib/db';
+import { RowDataPacket } from 'mysql2';
+
+// GET /api/ausgaben/autocomplete - Fetch unique Wo and Was values for autocomplete
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const typ = searchParams.get('typ');
+
+    const pool = getDbPool();
+
+    let query = 'SELECT DISTINCT Wo, Was FROM Ausgaben';
+    const params: any[] = [];
+
+    if (typ !== null && typ !== undefined) {
+      query += ' WHERE TYP = ?';
+      params.push(parseInt(typ));
+    }
+
+    query += ' ORDER BY Wo, Was';
+
+    const [rows] = await pool.query<RowDataPacket[]>(query, params);
+
+    // Extract unique Wo and Was values
+    const woSet = new Set<string>();
+    const wasSet = new Set<string>();
+
+    rows.forEach((row) => {
+      if (row.Wo) woSet.add(row.Wo);
+      if (row.Was) wasSet.add(row.Was);
+    });
+
+    const wo = Array.from(woSet).sort();
+    const was = Array.from(wasSet).sort();
+
+    return NextResponse.json({
+      success: true,
+      data: {
+        wo,
+        was,
+      },
+    });
+  } catch (error) {
+    console.error('Database error:', error);
+    return NextResponse.json(
+      { success: false, error: 'Database error' },
+      { status: 500 }
+    );
+  }
+}

app/api/ausgaben/route.ts

@@ -10,20 +10,42 @@ export async function GET(request: Request) {
     const startDate = searchParams.get('startDate');
     const month = searchParams.get('month');
     const year = searchParams.get('year');
+    const typ = searchParams.get('typ');
 
     const pool = getDbPool();
 
-    let query = 'SELECT * FROM Ausgaben_Tag';
+    let query = `SELECT 
+      ID, Datum, Wo, Was, Wieviel, Wie, TYP,
+      CASE DAYOFWEEK(Datum)
+        WHEN 1 THEN 'Sonntag'
+        WHEN 2 THEN 'Montag'
+        WHEN 3 THEN 'Dienstag'
+        WHEN 4 THEN 'Mittwoch'
+        WHEN 5 THEN 'Donnerstag'
+        WHEN 6 THEN 'Freitag'
+        WHEN 7 THEN 'Samstag'
+      END as WochTag
+      FROM Ausgaben`;
     const params: any[] = [];
+    const conditions: string[] = [];
+
+    if (typ !== null && typ !== undefined) {
+      conditions.push('TYP = ?');
+      params.push(parseInt(typ));
+    }
 
     if (month && year) {
-      query += ' WHERE YEAR(Datum) = ? AND MONTH(Datum) = ?';
+      conditions.push('YEAR(Datum) = ? AND MONTH(Datum) = ?');
       params.push(year, month);
     } else if (startDate) {
-      query += ' WHERE Datum >= ?';
+      conditions.push('Datum >= ?');
       params.push(startDate);
     }
 
+    if (conditions.length > 0) {
+      query += ' WHERE ' + conditions.join(' AND ');
+    }
+
     query += ' ORDER BY Datum DESC, ID DESC LIMIT ?';
     params.push(parseInt(limit));
 
@@ -46,9 +68,9 @@ export async function GET(request: Request) {
 export async function POST(request: Request) {
   try {
     const body = await request.json();
-    const { Datum, WochTag, Wo, Was, Wieviel, Wie, OK } = body;
+    const { Datum, Wo, Was, Wieviel, Wie, TYP } = body;
 
-    if (!Datum || !Wo || !Was || !Wieviel || !Wie) {
+    if (!Datum || !Wo || !Was || !Wieviel || !Wie || TYP === undefined) {
       return NextResponse.json(
         { success: false, error: 'Missing required fields' },
         { status: 400 }
@@ -58,18 +80,17 @@ export async function POST(request: Request) {
     const pool = getDbPool();
 
     const query = `
-      INSERT INTO Ausgaben_Tag (Datum, WochTag, Wo, Was, Wieviel, Wie, OK)
+      INSERT INTO Ausgaben (Datum, Wo, Was, Wieviel, Wie, TYP)
-      VALUES (?, ?, ?, ?, ?, ?, ?)
+      VALUES (?, ?, ?, ?, ?, ?)
     `;
 
     const [result] = await pool.query<ResultSetHeader>(query, [
       Datum,
-      WochTag,
       Wo,
       Was,
       parseFloat(Wieviel),
       Wie,
-      OK || 0,
+      TYP,
     ]);
 
     return NextResponse.json({

app/api/ausgaben/stats/route.ts

@@ -8,53 +8,73 @@ export async function GET(request: Request) {
     const { searchParams } = new URL(request.url);
     const month = searchParams.get('month');
     const year = searchParams.get('year');
+    const typ = searchParams.get('typ');
 
-    if (!month || !year) {
+    if (!month || !year || typ === null) {
       return NextResponse.json(
-        { success: false, error: 'Month and year are required' },
+        { success: false, error: 'Month, year and typ are required' },
         { status: 400 }
       );
     }
 
     const pool = getDbPool();
 
-    // Get total ausgaben and breakdown by payment type
+    // Get total ausgaben and breakdown by payment type based on TYP
-    const query = `
+    let query: string;
-      SELECT 
+    
-        SUM(CASE WHEN Wie IN ('EC-R', 'EC-B', 'bar-R', 'bar-B', 'Ueber') THEN Wieviel ELSE 0 END) as totalAusgaben,
+    if (parseInt(typ) === 0) {
-        SUM(CASE WHEN Wie = 'EC-R' THEN Wieviel ELSE 0 END) as ECR,
+      // Haushalt - unterstützt beide Varianten: mit/ohne Bindestrich und Ein/Einnahme, Uber/Ueber
-        SUM(CASE WHEN Wie = 'EC-B' THEN Wieviel ELSE 0 END) as ECB,
+      query = `
-        SUM(CASE WHEN Wie = 'bar-R' THEN Wieviel ELSE 0 END) as barR,
+        SELECT 
-        SUM(CASE WHEN Wie = 'bar-B' THEN Wieviel ELSE 0 END) as barB,
+          SUM(CASE WHEN Wie IN ('EC-R', 'ECR', 'EC-B', 'ECB', 'bar-R', 'barR', 'bar-B', 'barB', 'Ueber', 'Uber') THEN Wieviel ELSE 0 END) as totalAusgaben,
-        SUM(CASE WHEN Wie = 'Einnahme' THEN Wieviel ELSE 0 END) as Einnahmen,
+          SUM(CASE WHEN Wie IN ('EC-R', 'ECR') THEN Wieviel ELSE 0 END) as ECR,
-        SUM(CASE WHEN Wie = 'Ueber' THEN Wieviel ELSE 0 END) as Ueberweisungen
+          SUM(CASE WHEN Wie IN ('EC-B', 'ECB') THEN Wieviel ELSE 0 END) as ECB,
-      FROM Ausgaben_Tag
+          SUM(CASE WHEN Wie IN ('bar-R', 'barR') THEN Wieviel ELSE 0 END) as barR,
-      WHERE YEAR(Datum) = ? AND MONTH(Datum) = ?
+          SUM(CASE WHEN Wie IN ('bar-B', 'barB') THEN Wieviel ELSE 0 END) as barB,
-    `;
+          SUM(CASE WHEN Wie IN ('Einnahme', 'Ein') THEN Wieviel ELSE 0 END) as Einnahmen,
+          SUM(CASE WHEN Wie IN ('Ueber', 'Uber') THEN Wieviel ELSE 0 END) as Ueberweisungen
+        FROM Ausgaben
+        WHERE YEAR(Datum) = ? AND MONTH(Datum) = ? AND TYP = 0
+      `;
+    } else {
+      // Privat - unterstützt Uber/Ueber für Überweisung
+      query = `
+        SELECT 
+          SUM(CASE WHEN Wie IN ('bar', 'EC', 'VISA', 'MASTER', 'Uber', 'Ueber') THEN Wieviel ELSE 0 END) as totalAusgaben,
+          SUM(CASE WHEN Wie = 'bar' THEN Wieviel ELSE 0 END) as bar,
+          SUM(CASE WHEN Wie = 'EC' THEN Wieviel ELSE 0 END) as EC,
+          SUM(CASE WHEN Wie = 'VISA' THEN Wieviel ELSE 0 END) as VISA,
+          SUM(CASE WHEN Wie = 'MASTER' THEN Wieviel ELSE 0 END) as MASTER,
+          SUM(CASE WHEN Wie = 'Einnahme' THEN Wieviel ELSE 0 END) as Einnahmen,
+          SUM(CASE WHEN Wie IN ('Uber', 'Ueber') THEN Wieviel ELSE 0 END) as Ueberweisungen
+        FROM Ausgaben
+        WHERE YEAR(Datum) = ? AND MONTH(Datum) = ? AND TYP = 1
+      `;
+    }
 
     const [rows] = await pool.query<RowDataPacket[]>(query, [year, month]);
 
-    const data = rows[0] || {
+    const data = rows[0] || {};
-      totalAusgaben: 0,
-      ECR: 0,
-      ECB: 0,
-      barR: 0,
-      barB: 0,
-      Einnahmen: 0,
-      Ueberweisungen: 0,
-    };
 
     // Convert string values from MySQL to numbers
-    const parsedData = {
+    const parsedData: any = {
       totalAusgaben: parseFloat(data.totalAusgaben) || 0,
-      ECR: parseFloat(data.ECR) || 0,
-      ECB: parseFloat(data.ECB) || 0,
-      barR: parseFloat(data.barR) || 0,
-      barB: parseFloat(data.barB) || 0,
       Einnahmen: parseFloat(data.Einnahmen) || 0,
       Ueberweisungen: parseFloat(data.Ueberweisungen) || 0,
     };
 
+    if (parseInt(typ) === 0) {
+      parsedData.ECR = parseFloat(data.ECR) || 0;
+      parsedData.ECB = parseFloat(data.ECB) || 0;
+      parsedData.barR = parseFloat(data.barR) || 0;
+      parsedData.barB = parseFloat(data.barB) || 0;
+    } else {
+      parsedData.bar = parseFloat(data.bar) || 0;
+      parsedData.EC = parseFloat(data.EC) || 0;
+      parsedData.VISA = parseFloat(data.VISA) || 0;
+      parsedData.MASTER = parseFloat(data.MASTER) || 0;
+    }
+
     return NextResponse.json({
       success: true,
       data: parsedData,

app/page.tsx

@@ -7,20 +7,23 @@ import { AusgabenEntry } from '@/types/ausgaben';
 import packageJson from '@/package.json';
 
 export default function Home() {
+  const [activeTab, setActiveTab] = useState(0); // 0 = Haushalt, 1 = Privat
   const [entries, setEntries] = useState<AusgabenEntry[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [selectedEntry, setSelectedEntry] = useState<AusgabenEntry | null>(null);
 
   const version = packageJson.version;
+  const buildDate = process.env.NEXT_PUBLIC_BUILD_DATE || new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
 
   useEffect(() => {
     fetchRecentEntries();
-  }, []);
+    setSelectedEntry(null); // Clear selected entry when switching tabs
+  }, [activeTab]);
 
   const fetchRecentEntries = async () => {
     setIsLoading(true);
     try {
-      const response = await fetch('/api/ausgaben?limit=10', {
+      const response = await fetch(`/api/ausgaben?limit=20&typ=${activeTab}`, {
         cache: 'no-store',
         headers: {
           'Cache-Control': 'no-cache',
@@ -58,12 +61,36 @@ export default function Home() {
       <main className="max-w-7xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
         <h1 className="text-3xl font-bold text-center mb-6">Ausgaben - Log</h1>
         
+        {/* Tab Navigation */}
+        <div className="flex gap-2 mb-6">
+          <button
+            onClick={() => setActiveTab(0)}
+            className={`flex-1 py-3 px-6 rounded-lg font-semibold transition-colors ${
+              activeTab === 0
+                ? 'bg-[#85B7D7] text-black'
+                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+          >
+            Haushalt
+          </button>
+          <button
+            onClick={() => setActiveTab(1)}
+            className={`flex-1 py-3 px-6 rounded-lg font-semibold transition-colors ${
+              activeTab === 1
+                ? 'bg-[#85B7D7] text-black'
+                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+          >
+            Privat
+          </button>
+        </div>
+
         <div>
           <h2 className="text-xl font-semibold mb-4">Eingabe</h2>
-          <AusgabenForm onSuccess={handleSuccess} selectedEntry={selectedEntry} />
+          <AusgabenForm onSuccess={handleSuccess} selectedEntry={selectedEntry} typ={activeTab} />
           
           <div className="mt-6 bg-white border border-black rounded-lg shadow-md p-6">
-            <h3 className="text-xl font-semibold mb-4">Letzte 10 Einträge</h3>
+            <h3 className="text-xl font-semibold mb-4">Letzte 20 Einträge</h3>
             {isLoading ? (
               <div className="text-center py-4">Lade Daten...</div>
             ) : (
@@ -73,14 +100,14 @@ export default function Home() {
         </div>
 
         {/* Footer */}
-        <footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4 border-t-2 border-black pt-4">
+        <footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4 ">
           <div>
             <a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
               mailto:rxf@gmx.de
             </a>
           </div>
           <div className="text-right">
-            Version {version}
+            Version {version} - {buildDate}
           </div>
         </footer>
       </main>

components/AusgabenForm.tsx

@@ -1,22 +1,26 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
-import { CreateAusgabenEntry, AusgabenEntry, ZAHLUNGSARTEN, Zahlungsart, MonthlyStats } from '@/types/ausgaben';
+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,
-    OK: 0,
+    TYP: typ,
   });
 
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -28,22 +32,16 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
   const [year, setYear] = useState('');
   const [isLoadingStats, setIsLoadingStats] = useState(false);
   
-  // Initialize stats with current month/year
+  // Autocomplete data
-  useEffect(() => {
+  const [autoCompleteWo, setAutoCompleteWo] = useState<string[]>([]);
-    const now = new Date();
+  const [autoCompleteWas, setAutoCompleteWas] = useState<string[]>([]);
-    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 +51,48 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
     } finally {
       setIsLoadingStats(false);
     }
-  };
+  }, [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();
+    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();
+  }, [typ, fetchAutoComplete]);
 
   const handleMonthChange = (newMonth: string) => {
     setMonth(newMonth);
-    fetchStats(year, newMonth);
   };
 
   const handleYearChange = (newYear: string) => {
     setYear(newYear);
-    fetchStats(newYear, month);
   };
 
   const formatAmount = (amount: number | null) => {
@@ -85,26 +115,43 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
         Was: selectedEntry.Was,
         Wieviel: selectedEntry.Wieviel.toString(),
         Wie: selectedEntry.Wie,
-        OK: selectedEntry.OK || 0,
+        TYP: selectedEntry.TYP,
       });
       
-      setEditId(selectedEntry.ID);
+      // Handle both uppercase and lowercase ID field names
+      const entryId = (selectedEntry as any).id || selectedEntry.ID;
+      setEditId(entryId);
     } else {
-      // Initialize with current date for new entry
+      // Reset form for new entry
       const now = new Date();
       const dateStr = now.toISOString().split('T')[0];
       const weekday = getWeekday(now);
       
-      setFormData(prev => ({
+      setFormData({
-        ...prev,
         Datum: dateStr,
         WochTag: weekday,
-      }));
+        Wo: '',
+        Was: '',
+        Wieviel: '',
+        Wie: defaultZahlungsart,
+        TYP: typ,
+      });
       
       setEditId(null);
     }
   }, [selectedEntry]);
 
+  // Update TYP when tab changes
+  useEffect(() => {
+    if (!selectedEntry) {
+      setFormData(prev => ({
+        ...prev,
+        TYP: typ,
+        Wie: defaultZahlungsart,
+      }));
+    }
+  }, [typ]);
+
   const getWeekday = (date: Date): string => {
     const weekdays = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
     return weekdays[date.getDay()];
@@ -132,12 +179,22 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
       const url = editId ? `/api/ausgaben/${editId}` : '/api/ausgaben';
       const method = editId ? 'PUT' : 'POST';
       
+      // Send only the fields we need, excluding any extra fields
+      const dataToSend = {
+        Datum: formData.Datum,
+        Wo: formData.Wo,
+        Was: formData.Was,
+        Wieviel: formData.Wieviel,
+        Wie: formData.Wie,
+        TYP: formData.TYP,
+      };
+      
       const response = await fetch(url, {
         method: method,
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify(formData),
+        body: JSON.stringify(dataToSend),
       });
 
       if (response.ok) {
@@ -167,8 +224,9 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
       Wo: '',
       Was: '',
       Wieviel: '',
-      Wie: 'EC-R',
+      Wie: defaultZahlungsart,
-      OK: 0,
+      TYP: typ,
+
     });
     
     setEditId(null);
@@ -212,8 +270,14 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
                   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
@@ -222,8 +286,14 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
                   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
@@ -240,11 +310,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>
@@ -252,83 +322,78 @@ export default function AusgabenForm({ onSuccess, selectedEntry }: AusgabenFormP
                 </select>
               </td>
             </tr>
-            <tr>
-              <th className="p-2 w-32">{formData.WochTag}</th>
-              <th className="p-2"></th>
-              <th className="p-2"></th>
-              <th className="p-2"></th>
-              <th className="p-2"></th>
-              <th className="p-2"></th>
-            </tr>
-            <tr>
-              <td colSpan={6} className="p-3">
-                <div className="flex gap-3 justify-center">
-                  <button
-                    type="submit"
-                    disabled={isSubmitting}
-                    className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-2 px-8 rounded-lg transition-colors disabled:opacity-50"
-                  >
-                    {isSubmitting ? 'Speichere...' : editId ? 'Aktualisieren' : 'Speichern'}
-                  </button>
-                  <button
-                    type="button"
-                    onClick={handleReset}
-                    className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-2 px-8 rounded-lg transition-colors"
-                  >
-                    Löschen
-                  </button>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td colSpan={6} className="p-3 pt-6 border-t border-gray-300">
-                <div className="flex items-center justify-between">
-                  <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>
-              </td>
-            </tr>
           </tbody>
         </table>
+
+        {/* Wochentag */}
+        <div className="mt-3 text-left pl-3">
+          <span className="font-semibold">{formData.WochTag}</span>
+        </div>
+
+        {/* Buttons */}
+        <div className="mb-3 flex gap-10 justify-center">
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-2 px-8 rounded-lg transition-colors disabled:opacity-50"
+          >
+            {isSubmitting ? 'Speichere...' : editId ? 'Aktualisieren' : 'Speichern'}
+          </button>
+          <button
+            type="button"
+            onClick={handleReset}
+            className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-2 px-8 rounded-lg transition-colors"
+          >
+            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>
   );

components/AusgabenList.tsx

@@ -67,7 +67,7 @@ export default function AusgabenList({ entries, onDelete, onEdit }: AusgabenList
             </tr>
           ) : (
             entries.map((entry, index) => (
-              <tr key={entry.ID} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-100'}>
+              <tr key={entry.ID || `entry-idx-${index}`} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-100'}>
                 <td className="border-y border-black p-2 text-center">
                   {formatDate(entry.Datum)}
                 </td>

create_table.sql

@@ -2,15 +2,23 @@
 -- Diese Tabelle sollte bereits in der Docker MySQL-Datenbank existieren
 -- Falls nicht, hier ist das CREATE Statement:
 
-CREATE TABLE IF NOT EXISTS `Ausgaben_Tag` (
+CREATE TABLE IF NOT EXISTS `Ausgaben` (
   `ID` int(11) NOT NULL AUTO_INCREMENT,
   `Datum` date NOT NULL,
-  `WochTag` varchar(20) DEFAULT NULL,
   `Wo` varchar(255) DEFAULT NULL,
   `Was` varchar(500) DEFAULT NULL,
   `Wieviel` decimal(10,2) NOT NULL,
   `Wie` varchar(50) DEFAULT NULL,
+  `TYP` tinyint(1) NOT NULL DEFAULT 0 COMMENT '0=Haushalt, 1=Privat',
   `OK` tinyint(1) DEFAULT 0,
   PRIMARY KEY (`ID`),
-  KEY `idx_datum` (`Datum`)
+  KEY `idx_datum` (`Datum`),
+  KEY `idx_typ` (`TYP`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- Upgrade existing table: Add TYP column if it doesn't exist
+ALTER TABLE `Ausgaben` ADD COLUMN IF NOT EXISTS `TYP` tinyint(1) NOT NULL DEFAULT 0 COMMENT '0=Haushalt, 1=Privat' AFTER `Wie`;
+ALTER TABLE `Ausgaben` ADD INDEX IF NOT EXISTS `idx_typ` (`TYP`);
+
+-- Remove WochTag column if it exists (no longer stored in DB, calculated from Datum)
+-- ALTER TABLE `Ausgaben` DROP COLUMN IF EXISTS `WochTag`;

deploy.sh

@@ -0,0 +1,55 @@
+#!/bin/bash
+
+# Deploy Script für ausgaben-next
+# Baut das Docker Image und lädt es zu docker.citysensor.de hoch
+
+set -e
+
+# Konfiguration
+REGISTRY="docker.citysensor.de"
+IMAGE_NAME="ausgaben-next"
+TAG="${1:-latest}"  # Erster Parameter oder "latest"
+FULL_IMAGE="${REGISTRY}/${IMAGE_NAME}:${TAG}"
+
+# Build-Datum
+BUILD_DATE=$(date +%d.%m.%Y)
+
+echo "=========================================="
+echo "Ausgaben-Next Deploy Script"
+echo "=========================================="
+echo "Registry: ${REGISTRY}"
+echo "Image: ${IMAGE_NAME}"
+echo "Tag: ${TAG}"
+echo "Build-Datum: ${BUILD_DATE}"
+echo "=========================================="
+echo ""
+
+# 1. Docker Image bauen
+echo ">>> Baue Docker Image..."
+docker build \
+  --build-arg BUILD_DATE="${BUILD_DATE}" \
+  -t "${IMAGE_NAME}:${TAG}" \
+  -t "${FULL_IMAGE}" \
+  .
+
+echo ">>> Build erfolgreich!"
+echo ""
+
+# 2. Login zur Registry (falls noch nicht eingeloggt)
+echo ">>> Login zu ${REGISTRY}..."
+docker login "${REGISTRY}"
+echo ""
+
+# 3. Image pushen
+echo ">>> Pushe Image zu ${REGISTRY}..."
+docker push "${FULL_IMAGE}"
+
+echo ""
+echo "=========================================="
+echo "✓ Deploy erfolgreich abgeschlossen!"
+echo "=========================================="
+echo ""
+echo "Auf dem Server ausführen:"
+echo "  docker pull ${FULL_IMAGE}"
+echo "  docker-compose -f docker-compose.prod.yml up -d"
+echo ""

docker-compose.prod.yml

@@ -0,0 +1,37 @@
+# Docker Compose für Production Server mit Traefik
+services:
+  ausgaben-app:
+    image: docker.citysensor.de/ausgaben-next:latest
+    container_name: ausgaben-next-app
+    restart: unless-stopped
+    expose:
+      - 3000
+    environment:
+      - NODE_ENV=production
+      - DB_HOST=${DB_HOST}
+      - DB_USER=${DB_USER}
+      - DB_PASS=${DB_PASS}
+      - DB_NAME=${DB_NAME}
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.ausgaben.entrypoints=http
+      - traefik.http.routers.ausgaben.rule=Host(`ausgaben.fuerst-stuttgart.de`)
+      - traefik.http.middlewares.ausgaben-https-redirect.redirectscheme.scheme=https
+      - traefik.http.routers.ausgaben.middlewares=ausgaben-https-redirect
+      - traefik.http.routers.ausgaben-secure.entrypoints=https
+      - traefik.http.routers.ausgaben-secure.rule=Host(`ausgaben.fuerst-stuttgart.de`)
+      - traefik.http.routers.ausgaben-secure.tls=true
+      - traefik.http.routers.ausgaben-secure.tls.certresolver=letsencrypt
+      - traefik.http.routers.ausgaben-secure.service=ausgaben
+      - traefik.http.services.ausgaben.loadbalancer.server.port=3000  
+    networks:
+      - proxy
+      - gitea-internal
+
+networks:
+  proxy:
+    name: dockge_default
+    external: true
+  gitea-internal:
+    name: gitea_gitea-internal
+    external: true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ausgaben_next",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3005",

types/ausgaben.ts

@@ -8,7 +8,7 @@ export interface AusgabenEntry {
   Was: string;
   Wieviel: number;
   Wie: string;
-  OK?: number;
+  TYP: number;
 }
 
 export interface CreateAusgabenEntry {
@@ -18,26 +18,48 @@ export interface CreateAusgabenEntry {
   Was: string;
   Wieviel: string | number;
   Wie: string;
-  OK?: number;
+  TYP: number;
 }
 
 export interface MonthlyStats {
   totalAusgaben: number;
-  ECR: number;
+  ECR?: number;
-  ECB: number;
+  ECB?: number;
-  barR: number;
+  barR?: number;
-  barB: number;
+  barB?: number;
+  bar?: number;
+  EC?: number;
+  VISA?: number;
+  MASTER?: number;
   Einnahmen: number;
   Ueberweisungen: number;
 }
 
-export type Zahlungsart = 'EC-R' | 'EC-B' | 'bar-R' | 'bar-B' | 'Einnahme' | 'Ueber';
+// Haushalt Zahlungsarten (TYP = 0)
+// Verwende alte Formate ohne Bindestriche für Kompatibilität mit bestehenden Daten
+export type ZahlungsartHaushalt = 'ECR' | 'ECB' | 'barR' | 'barB' | 'Ein' | 'Uber';
 
-export const ZAHLUNGSARTEN: { value: Zahlungsart; label: string }[] = [
+export const ZAHLUNGSARTEN_HAUSHALT: { value: ZahlungsartHaushalt; label: string }[] = [
-  { value: 'EC-R', label: 'EC-R' },
+  { value: 'ECR', label: 'EC-R' },
-  { value: 'EC-B', label: 'EC-B' },
+  { value: 'ECB', label: 'EC-B' },
-  { value: 'bar-R', label: 'bar-R' },
+  { value: 'barR', label: 'bar-R' },
-  { value: 'bar-B', label: 'bar-B' },
+  { value: 'barB', label: 'bar-B' },
-  { value: 'Einnahme', label: 'Einnahme' },
+  { value: 'Ein', label: 'Einnahme' },
-  { value: 'Ueber', label: 'Überweisung' },
+  { value: 'Uber', label: 'Überweisung' },
 ];
+
+// Privat Zahlungsarten (TYP = 1)
+export type ZahlungsartPrivat = 'bar' | 'EC' | 'VISA' | 'MASTER' | 'Einnahme' | 'Uber';
+
+export const ZAHLUNGSARTEN_PRIVAT: { value: ZahlungsartPrivat; label: string }[] = [
+  { value: 'bar', label: 'bar' },
+  { value: 'EC', label: 'EC' },
+  { value: 'VISA', label: 'VISA' },
+  { value: 'MASTER', label: 'Master' },
+  { value: 'Einnahme', label: 'Einnahme' },
+  { value: 'Uber', label: 'Überweisung' },
+];
+
+// Legacy exports for backward compatibility
+export type Zahlungsart = ZahlungsartHaushalt | ZahlungsartPrivat;
+export const ZAHLUNGSARTEN = ZAHLUNGSARTEN_HAUSHALT;

upgrade_typ.sql

@@ -0,0 +1,23 @@
+-- Upgrade-Skript: TYP-Spalte zur Ausgaben-Tabelle hinzufügen
+-- Dieses Skript fügt die TYP-Spalte zur bestehenden Tabelle hinzu
+
+-- TYP-Spalte hinzufügen (falls nicht vorhanden)
+ALTER TABLE `Ausgaben` 
+ADD COLUMN IF NOT EXISTS `TYP` tinyint(1) NOT NULL DEFAULT 0 COMMENT '0=Haushalt, 1=Privat' AFTER `Wie`;
+
+-- Index für TYP hinzufügen (falls nicht vorhanden)
+ALTER TABLE `Ausgaben` 
+ADD INDEX IF NOT EXISTS `idx_typ` (`TYP`);
+
+-- Bestehende Einträge: Setze TYP=0 (Haushalt) für alle Einträge ohne TYP
+UPDATE `Ausgaben` 
+SET `TYP` = 0 
+WHERE `TYP` IS NULL OR `TYP` = 0;
+
+-- Optional: WochTag-Spalte entfernen (falls vorhanden)
+-- Der Wochentag wird jetzt dynamisch aus dem Datum berechnet
+-- Kommentieren Sie die folgende Zeile aus, wenn Sie die Spalte entfernen möchten:
+-- ALTER TABLE `Ausgaben` DROP COLUMN IF EXISTS `WochTag`;
+
+-- Zeige Struktur der Tabelle
+DESCRIBE `Ausgaben`;