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

# 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