# TimeClock v3.0

🕐 Eine moderne Full-Stack-Zeiterfassungsanwendung mit Node.js und Vue 3.

## Features

- ⏱️ **Echtzeit-Zeiterfassung** - Starten und stoppen Sie Timer mit einem Klick
- 📊 **Detaillierte Statistiken** - Verfolgen Sie Ihre Zeit nach Projekten
- 💼 **Projekt-Management** - Organisieren Sie Ihre Zeiteinträge nach Projekten
- 🎨 **Moderne UI** - Schöne und intuitive Benutzeroberfläche
- 📱 **Responsive Design** - Funktioniert auf Desktop und Mobile

## Technologie-Stack

### Backend
- **Node.js** mit Express.js
- **MySQL-Datenbank** (stechuhr2)
- RESTful API mit klassenbasierter Architektur
- Repository-Pattern für saubere Datenbankabstraktion
- Service-Layer für Business-Logik
- CORS & Helmet für Sicherheit
- Morgan für Logging

### Frontend
- **Vue 3** mit Composition API
- **Vite** als Build-Tool
- **Vue Router** für Navigation
- **Pinia** für State Management
- Moderne CSS mit Gradients

## Installation

### Voraussetzungen
- Node.js (v16 oder höher)
- npm oder yarn

### Backend Setup

```bash
cd backend
npm install

# .env Datei erstellen und konfigurieren
cp .env.example .env
# Bearbeiten Sie .env mit Ihren MySQL-Zugangsdaten

npm run dev
```

Der Backend-Server läuft standardmäßig auf `http://localhost:3010`

**Wichtig:** Siehe `backend/DB_SETUP.md` für detaillierte Datenbank-Konfiguration!

### Frontend Setup

```bash
cd frontend
npm install
npm run dev
```

Das Frontend läuft standardmäßig auf `http://localhost:5010`

## Verwendung

1. Starten Sie zuerst den Backend-Server
2. Starten Sie dann den Frontend-Development-Server
3. Öffnen Sie `http://localhost:5010` in Ihrem Browser

### Dashboard
- Starten Sie einen neuen Timer mit Projekt und Beschreibung
- Sehen Sie die aktuelle Laufzeit in Echtzeit
- Stoppen Sie den Timer, wenn Sie fertig sind
- Sehen Sie Ihre letzten 5 Einträge

### Einträge
- Vollständige Liste aller Zeiteinträge
- Filtern nach Status (laufend/beendet)
- Löschen von Einträgen

### Statistiken
- Gesamtanzahl der Einträge
- Gesamtarbeitsstunden
- Aufschlüsselung nach Projekten
- Detaillierte Projekt-Statistiken

## API-Endpunkte

### GET /api/health
Health-Check des Servers

### GET /api/time-entries
Alle Zeiteinträge abrufen

### POST /api/time-entries
Neuen Zeiteintrag erstellen (Timer starten)

```json
{
  "project": "Projektname",
  "description": "Beschreibung der Tätigkeit"
}
```

### PUT /api/time-entries/:id
Zeiteintrag aktualisieren (Timer stoppen)

```json
{
  "endTime": "2025-10-15T10:30:00.000Z"
}
```

### DELETE /api/time-entries/:id
Zeiteintrag löschen

### GET /api/time-entries/stats/summary
Statistiken abrufen

## Projektstruktur

```
TimeClock/
├── backend/
│   ├── src/
│   │   ├── config/
│   │   │   └── database.js
│   │   ├── controllers/
│   │   │   └── TimeEntryController.js
│   │   ├── services/
│   │   │   └── TimeEntryService.js
│   │   ├── repositories/
│   │   │   ├── WorklogRepository.js
│   │   │   └── UserRepository.js
│   │   ├── models/
│   │   │   └── TimeEntry.js
│   │   ├── routes/
│   │   │   └── timeEntries.js
│   │   └── index.js
│   ├── ARCHITECTURE.md
│   ├── DATABASE.md
│   ├── DB_SETUP.md
│   └── package.json
│
└── frontend/
    ├── src/
    │   ├── assets/
    │   │   └── main.css
    │   ├── components/
    │   ├── router/
    │   │   └── index.js
    │   ├── stores/
    │   │   └── timeStore.js
    │   ├── views/
    │   │   ├── Dashboard.vue
    │   │   ├── Entries.vue
    │   │   └── Stats.vue
    │   ├── App.vue
    │   └── main.js
    ├── index.html
    ├── package.json
    └── vite.config.js
```

## Entwicklung

### Backend-Entwicklung
```bash
cd backend
npm run dev  # Startet mit nodemon für Auto-Reload
```

### Frontend-Entwicklung
```bash
cd frontend
npm run dev  # Startet Vite Dev-Server mit HMR
```

### Build für Produktion

**Frontend:**
```bash
cd frontend
npm run build
```

Die Build-Dateien befinden sich dann im `dist/` Ordner.

## Implementierte Features

- ✅ **MySQL-Datenbank** - Integration mit bestehender stechuhr2-Datenbank
- ✅ **Repository-Pattern** - Saubere Datenbankabstraktion
- ✅ **Service-Layer** - Klare Trennung von Business-Logik
- ✅ **Klassenbasierte Architektur** - Controller und Services als Klassen

## Geplante Erweiterungen

- 👤 **Benutzer-Authentifizierung** - JWT-basiertes Login-System
- 🔐 **Multi-User Support** - Mehrere Benutzer mit Berechtigungen
- 📧 **E-Mail-Berichte** - Automatische Zeitberichte per E-Mail
- 📱 **Mobile App** - React Native oder Flutter App
- 📈 **Erweiterte Analytics** - Grafiken und Diagramme
- 🌐 **Mehrsprachigkeit** - i18n Integration
- 🔔 **Benachrichtigungen** - Push-Notifications
- 📤 **Export-Funktionen** - CSV, PDF Export

## Lizenz

ISC

## Autor

TimeClock v3 - 2025

## Support

Bei Fragen oder Problemen öffnen Sie bitte ein Issue im Repository.