# SeCu Frontend

Vue 3 + TailwindCSS Frontend für die SeCu Mitarbeiterverwaltung.

## Tech Stack

- **Framework:** Vue 3 (Composition API)
- **Build:** Vite
- **Styling:** TailwindCSS
- **State:** Pinia
- **Routing:** Vue Router

## Setup

```bash
# Dependencies installieren
npm install

# Development Server starten
npm run dev

# Production Build
npm run build
```

## Umgebungsvariablen

Erstelle `.env.local`:

```
VITE_API_URL=http://localhost:8004/api
```

Für Production:
```
VITE_API_URL=https://api.secu.kronos-soulution.de/api
```

## Struktur

```
src/
├── api/           # API Client
├── assets/        # CSS & statische Dateien
├── components/
│   ├── common/    # Wiederverwendbare Komponenten
│   └── layout/    # Layout-Komponenten (Sidebar, Header)
├── composables/   # Vue Composables
├── router/        # Vue Router Konfiguration
├── stores/        # Pinia Stores
│   └── auth.ts    # Authentifizierung
└── views/         # Seiten
    ├── LoginView.vue
    ├── DashboardView.vue
    ├── OrdersView.vue
    ├── OrderDetailView.vue
    ├── UsersView.vue
    ├── AvailabilityView.vue
    ├── TimesheetsView.vue
    ├── SettingsView.vue
    └── ModulesView.vue
```

## Features

- 🔐 **Login/Registrierung** mit JWT Auth
- 📊 **Dashboard** mit Statistiken
- 📋 **Aufträge** erstellen, bearbeiten, zuweisen
- 👥 **Mitarbeiter** verwalten (Chef/Disponent)
- 📅 **Verfügbarkeit** im Kalender melden
- ⏱️ **Stundenzettel** einreichen & genehmigen
- ⚙️ **Module** aktivieren/deaktivieren (Chef)
- 🌙 **Dark Mode** Support
- 📱 **Responsive** Design

## Rollen

| Rolle | Zugriff |
|-------|---------|
| Chef | Vollzugriff + Module verwalten |
| Disponent | Mitarbeiter + Aufträge + Stundenzettel |
| Mitarbeiter | Eigene Aufträge, Verfügbarkeit, Stundenzettel |

## Port

Development: `3006`

---

*SeCu Frontend v1.0.0*