TimeClock Frontend v3.0

Vue 3 Frontend für die TimeClock Zeiterfassungsanwendung.

Installation

npm install

Entwicklung

npm run dev

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

Build

npm run build

Die Build-Dateien werden im dist/ Ordner erstellt.

Preview (nach Build)

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:

// 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:

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