feat: enhance export functionality with PDF and database management features

This commit is contained in:
Felix Schlusche
2025-10-24 17:24:00 +02:00
parent a02f97cc7f
commit c17801e86c

158
README.md
View File

@@ -82,7 +82,25 @@ Eine Full-Stack-Zeiterfassungsanwendung, entwickelt mit Node.js, Express, SQLite
- Spalten: Datum, Start, Ende, Pause (Min), Netto (h), Arbeitsort, Abweichung (h) - Spalten: Datum, Start, Ende, Pause (Min), Netto (h), Arbeitsort, Abweichung (h)
- **CSV-Export (Abweichungen)**: Nur Tage ≠ 8,0h - **CSV-Export (Abweichungen)**: Nur Tage ≠ 8,0h
- Ideal für Gleitzeit-Nachweise - Ideal für Gleitzeit-Nachweise
- **Deutsches Format**: Semikolon-getrennt, Komma-Dezimal - **PDF-Export**:
- **Monats-Export**: Exportiert aktuellen Monat als formatierten PDF
- **Bulk-Export**: Exportiert ausgewählte Einträge (im Bulk-Modus)
- Professionelles Layout mit Mitarbeiter-Info und Statistiken
- Automatische Tabelle mit allen Einträgen
- Deutsche Formatierung (Datum, Währung, Dezimalstellen)
- **Deutsches Format**: Semikolon-getrennt (CSV), Komma-Dezimal
### 💾 Datenbank-Management
- **Datenbank-Export**: Vollständiger Export aller Daten als JSON
- Enthält alle Einträge und Einstellungen
- Versioniert für Kompatibilität
- Zeitstempel im Dateinamen
- **Datenbank-Import**: Wiederherstellen aus JSON-Backup
- Validierung der Datenstruktur
- Bestätigungs-Dialog vor Überschreiben
- Löscht alte Daten vor Import
- Importiert Einträge und Einstellungen
- **Instanz-Migration**: Einfaches Wechseln zwischen Servern/Instanzen
### 🎨 Modernes UI/UX ### 🎨 Modernes UI/UX
- **Premium Design**: Glass-Morphism, Gradients, Schatten, Animationen - **Premium Design**: Glass-Morphism, Gradients, Schatten, Animationen
@@ -104,10 +122,13 @@ Eine Full-Stack-Zeiterfassungsanwendung, entwickelt mit Node.js, Express, SQLite
- Tailwind CSS (CDN) - Tailwind CSS (CDN)
- Lucide Icons - Lucide Icons
- Flatpickr (Datums-/Zeit-Picker) - Flatpickr (Datums-/Zeit-Picker)
- jsPDF mit autoTable Plugin (PDF-Generierung)
**Infrastructure:** **Infrastructure:**
- Docker & Docker Compose - Docker & Docker Compose
- Multi-Stage Build für optimierte Images - Multi-Stage Build für optimierte Images
- Gitea Actions CI/CD für automatische Builds
- Gitea Container Registry für Image-Hosting
## 📁 Projektstruktur ## 📁 Projektstruktur
@@ -119,7 +140,15 @@ timetracker/
│ └── timetracker.db # SQLite Datenbank (generiert) │ └── timetracker.db # SQLite Datenbank (generiert)
├── public/ ├── public/
│ ├── index.html # Single-Page Application │ ├── index.html # Single-Page Application
── app.js # Frontend-Logik (~2700 Zeilen) ── favicon.svg # App Icon
│ └── js/
│ ├── state.js # Globaler State
│ ├── utils.js # Hilfsfunktionen
│ ├── holidays.js # Feiertagsberechnung
│ ├── api.js # Backend-Kommunikation
│ └── main.js # Hauptlogik (~3700 Zeilen)
├── .gitea/workflows/ # CI/CD Workflows
│ └── docker-build.yml # Docker Build & Push
├── media/screenshots/ # App-Screenshots ├── media/screenshots/ # App-Screenshots
├── Dockerfile # Container-Image ├── Dockerfile # Container-Image
├── docker-compose.yml # Orchestrierung ├── docker-compose.yml # Orchestrierung
@@ -161,7 +190,37 @@ docker-compose down -v
**App läuft auf:** `http://localhost:3000` **App läuft auf:** `http://localhost:3000`
### 🐋 Option 2: Docker (manuell) ### 🐋 Option 2: Vorgefertigtes Docker Image (Gitea Registry)
```bash
# Login zur Registry
docker login gitea.fx-se.de
# Image pullen
docker pull gitea.fx-se.de/maggot/timetracker:latest
# Container starten
docker run -d \
-p 3000:3000 \
-v $(pwd)/db:/app/db \
--name timetracker \
gitea.fx-se.de/maggot/timetracker:latest
```
**docker-compose.yml mit Registry-Image:**
```yaml
version: '3.8'
services:
app:
image: gitea.fx-se.de/maggot/timetracker:latest
ports:
- "3000:3000"
volumes:
- ./db:/app/db
restart: unless-stopped
```
### 🔨 Option 3: Docker (manuell bauen)
```bash ```bash
# Image bauen # Image bauen
@@ -171,7 +230,7 @@ docker build -t zeiterfassung .
docker run -p 3000:3000 -v $(pwd)/db:/app/db zeiterfassung docker run -p 3000:3000 -v $(pwd)/db:/app/db zeiterfassung
``` ```
### 💻 Option 3: Lokal (ohne Docker) ### 💻 Option 4: Lokal (ohne Docker)
**Voraussetzungen:** Node.js 18+ **Voraussetzungen:** Node.js 18+
@@ -182,11 +241,32 @@ npm start
**App läuft auf:** `http://localhost:3000` **App läuft auf:** `http://localhost:3000`
## 📤 CSV-Export ## 📤 Export-Funktionen
Die App bietet zwei Export-Modi über die Filter-Ansicht: Die App bietet mehrere Export-Modi für verschiedene Anwendungsfälle:
### Export Alle (📥) ### PDF-Export 📄
**Monats-Export:**
- Klicke auf "PDF Export" in der Monatsansicht
- Exportiert alle Einträge des aktuellen Monats
- Professionelles Layout mit:
- Mitarbeiter-Informationen (Name, Personal-Nr.)
- Monatsstatistiken (Soll/Ist/Saldo)
- Vollständige Tabelle aller Einträge
- Deutsche Formatierung
**Bulk-Export:**
- Aktiviere Bulk-Modus und wähle Einträge aus
- Klicke auf "PDF exportieren"
- Exportiert nur ausgewählte Einträge
- Gleiche Formatierung wie Monats-Export
### CSV-Export 📊
Die App bietet zwei CSV-Export-Modi über die Filter-Ansicht:
**Export Alle (📥)**
Exportiert **alle** Einträge im gewählten Zeitraum. Exportiert **alle** Einträge im gewählten Zeitraum.
**Spalten:** **Spalten:**
@@ -201,7 +281,7 @@ Datum;Start;Ende;Pause (min);Netto (h);Arbeitsort;Abweichung (h)
2025-10-23;08:30;16:30;30;7,50;Büro;-0,50 2025-10-23;08:30;16:30;30;7,50;Büro;-0,50
``` ```
### Export Abweichungen (⚠️) **Export Abweichungen (⚠️)**
Exportiert **nur** Tage mit ≠ 8,0 Stunden. Exportiert **nur** Tage mit ≠ 8,0 Stunden.
**Zweck:** Gleitzeit-Nachweise für HR (nur relevante Über-/Unterschreitungen) **Zweck:** Gleitzeit-Nachweise für HR (nur relevante Über-/Unterschreitungen)
@@ -215,6 +295,26 @@ Exportiert **nur** Tage mit ≠ 8,0 Stunden.
**Format:** Semikolon-getrennt, Komma-Dezimal, YYYY-MM-DD Datum **Format:** Semikolon-getrennt, Komma-Dezimal, YYYY-MM-DD Datum
### Datenbank-Backup 💾
**Export:**
1. Gehe zu Einstellungen
2. Klicke auf "Datenbank exportieren"
3. JSON-Datei mit Zeitstempel wird heruntergeladen
4. Enthält: Alle Einträge + Einstellungen + Version
**Import:**
1. Gehe zu Einstellungen
2. Klicke auf "Datenbank importieren"
3. Wähle JSON-Backup-Datei
4. Bestätige Überschreiben der Daten
5. Alte Daten werden gelöscht, neue importiert
**Verwendung:**
- Regelmäßige Backups vor Updates
- Migration zwischen Instanzen/Servern
- Datensicherung
## 📡 API-Endpunkte ## 📡 API-Endpunkte
### Einträge ### Einträge
@@ -228,13 +328,45 @@ Exportiert **nur** Tage mit ≠ 8,0 Stunden.
- `POST /api/settings` - Setting speichern `{key, value}` - `POST /api/settings` - Setting speichern `{key, value}`
- `GET /api/settings` - Alle Settings - `GET /api/settings` - Alle Settings
### Datenbank-Management
- `GET /api/database/export` - Vollständigen DB-Export als JSON
- `POST /api/database/import` - DB-Import aus JSON
- `DELETE /api/entries/all` - Alle Einträge löschen (für Import)
## 🔄 CI/CD & Deployment
Die App verwendet Gitea Actions für automatische Builds und Deployments:
**Automatische Docker Builds:**
- Bei Push zu `main`/`master` Branch
- Nur bei relevanten Änderungen (Server, Frontend, Dependencies)
- Ignoriert README, Workflow-Änderungen
- Erstellt Images mit Tags: `latest` + Commit-SHA
**Container Registry:**
- Gehostet auf Gitea: `gitea.fx-se.de/maggot/timetracker`
- Authentifizierung via Personal Access Token
- Automatischer Push nach erfolgreichem Build
**Workflow-Konfiguration:**
```yaml
# Triggert nur bei:
- server.js, package.json, Dockerfile
- db/**, public/**
- Ignoriert: *.md, .gitea/workflows/**, .gitignore
```
**Siehe:** `.gitea/workflows/docker-build.yml` für Details
## 🛠️ Entwicklung ## 🛠️ Entwicklung
**Architektur:** Single-Page Application (SPA) mit REST-API Backend **Architektur:** Single-Page Application (SPA) mit REST-API Backend
**Tech-Details:** **Tech-Details:**
- Flatpickr für Touch-optimierte Picker - Modulare Frontend-Architektur (5 separate JS-Dateien)
- Flatpickr für Touch-optimierte Picker (auch in Tabellen-Inline-Edit)
- Lucide Icons für Symbolik - Lucide Icons für Symbolik
- jsPDF + autoTable für PDF-Generierung
- SQLite für dateibasierte Persistenz - SQLite für dateibasierte Persistenz
- Server-seitige Berechnungen für Datenintegrität - Server-seitige Berechnungen für Datenintegrität
- Responsive Design (Tailwind CSS via CDN) - Responsive Design (Tailwind CSS via CDN)
@@ -243,6 +375,14 @@ Exportiert **nur** Tage mit ≠ 8,0 Stunden.
- SQLite-Datenbank: `db/timetracker.db` - SQLite-Datenbank: `db/timetracker.db`
- Automatische Migrations beim Start - Automatische Migrations beim Start
- Volume-Mounting in Docker für Persistenz - Volume-Mounting in Docker für Persistenz
- JSON-basierte Backups für Migration
**Code-Organisation:**
- `state.js`: Globaler Application State
- `utils.js`: Hilfsfunktionen (Datum, Zeit, Format)
- `holidays.js`: Feiertagsberechnung (16 Bundesländer)
- `api.js`: Backend-Kommunikation
- `main.js`: Hauptlogik, UI, Event-Handler
## 📄 Lizenz ## 📄 Lizenz