328bc9e776
Implement a new endpoint for account deletion in AuthController, allowing users to permanently delete their accounts and associated data. Update AuthService to handle account deletion logic, including confirmation checks and data removal from the database. Enhance frontend with new views and components for account deletion and privacy information, including links in the side menu and profile view. Update mobile app to support account deletion and privacy sections, improving user experience and compliance with data protection standards.
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