stechuhr3/frontend

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