# TimeClock Frontend v3.0

Vue 3 Frontend für die TimeClock Zeiterfassungsanwendung.

## Installation

```bash
npm install
```

## Entwicklung

```bash
npm run dev
```

Öffnen Sie `http://localhost:5010` in Ihrem Browser.

## Build

```bash
npm run build
```

Die Build-Dateien werden im `dist/` Ordner erstellt.

## Preview (nach Build)

```bash
npm run preview
```

## Technologien

- **Vue 3** - Progressive JavaScript Framework
- **Vue Router** - Offizielle Router-Bibliothek
- **Pinia** - State Management
- **Vite** - Next Generation Frontend Tooling

## Projektstruktur

```
src/
├── assets/          # CSS und statische Assets
├── components/      # Wiederverwendbare Komponenten
├── router/          # Vue Router Konfiguration
├── stores/          # Pinia Stores
├── views/           # Seiten-Komponenten
│   ├── Dashboard.vue
│   ├── Entries.vue
│   └── Stats.vue
├── App.vue          # Root-Komponente
└── main.js          # Entry Point
```

## Features

### Dashboard
- Timer starten/stoppen
- Echtzeit-Anzeige der laufenden Zeit
- Projekt und Beschreibung eingeben
- Letzte 5 Einträge anzeigen

### Einträge
- Tabellarische Übersicht aller Einträge
- Status-Anzeige (laufend/beendet)
- Einträge löschen

### Statistiken
- Gesamtstatistiken
- Projekt-basierte Auswertungen
- Visualisierung der Arbeitszeit

## State Management

Die Anwendung verwendet Pinia für zentrales State Management:

```javascript
// stores/timeStore.js
const timeStore = useTimeStore()

// Verfügbare Actions
timeStore.fetchEntries()
timeStore.startTimer({ project, description })
timeStore.stopTimer()
timeStore.deleteEntry(id)
timeStore.fetchStats()
```

## API-Konfiguration

Die API-URL ist in `src/stores/timeStore.js` konfiguriert:

```javascript
const API_URL = 'http://localhost:3010/api'
```

Für Produktion sollte dies in eine Environment-Variable verschoben werden.

## Styling

Die Anwendung verwendet:
- Custom CSS mit CSS Variables
- Moderne Gradients
- Responsive Design
- Card-basiertes Layout