🎨 Frontend komplett implementiert

Views:
- Login/Registrierung
- Dashboard mit Stats
- Aufträge (Liste + Detail)
- Mitarbeiterverwaltung
- Verfügbarkeitskalender
- Stundenzettel
- Einstellungen
- Module (Dev-Panel)

Features:
- Vue 3 + Composition API
- TailwindCSS mit Dark Mode
- Pinia State Management
- JWT Auth mit Refresh
- Responsive Design
- Rollen-basierte Navigation

src/components/layout/AppHeader.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+
+defineEmits<{
+  'toggle-sidebar': []
+  'logout': []
+}>()
+
+const authStore = useAuthStore()
+const darkMode = ref(localStorage.getItem('darkMode') === 'true')
+const dropdownOpen = ref(false)
+
+function toggleDarkMode() {
+  darkMode.value = !darkMode.value
+  localStorage.setItem('darkMode', String(darkMode.value))
+  document.documentElement.classList.toggle('dark', darkMode.value)
+}
+
+// Initialize dark mode
+if (darkMode.value) {
+  document.documentElement.classList.add('dark')
+}
+</script>
+
+<template>
+  <header class="h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-4 lg:px-6">
+    <!-- Mobile menu button -->
+    <button
+      class="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
+      @click="$emit('toggle-sidebar')"
+    >
+      <span class="text-2xl">☰</span>
+    </button>
+
+    <!-- Page title placeholder -->
+    <div class="flex-1 lg:ml-0">
+      <h1 class="text-lg font-semibold text-gray-900 dark:text-white hidden lg:block">
+        Mitarbeiterverwaltung
+      </h1>
+    </div>
+
+    <!-- Right side actions -->
+    <div class="flex items-center gap-2">
+      <!-- Dark mode toggle -->
+      <button
+        class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
+        @click="toggleDarkMode"
+      >
+        <span class="text-xl">{{ darkMode ? '☀️' : '🌙' }}</span>
+      </button>
+
+      <!-- User dropdown -->
+      <div class="relative">
+        <button
+          class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
+          @click="dropdownOpen = !dropdownOpen"
+        >
+          <div class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+            <span class="text-primary-600 dark:text-primary-300 text-sm font-medium">
+              {{ authStore.user?.first_name?.[0] }}{{ authStore.user?.last_name?.[0] }}
+            </span>
+          </div>
+          <span class="hidden sm:block text-sm font-medium text-gray-700 dark:text-gray-200">
+            {{ authStore.fullName }}
+          </span>
+        </button>
+
+        <!-- Dropdown menu -->
+        <div
+          v-if="dropdownOpen"
+          class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50"
+          @click="dropdownOpen = false"
+        >
+          <router-link
+            to="/settings"
+            class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            ⚙️ Einstellungen
+          </router-link>
+          <hr class="my-1 border-gray-200 dark:border-gray-700">
+          <button
+            class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
+            @click="$emit('logout')"
+          >
+            🚪 Abmelden
+          </button>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>

src/components/layout/AppLayout.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import AppSidebar from './AppSidebar.vue'
+import AppHeader from './AppHeader.vue'
+
+const authStore = useAuthStore()
+const router = useRouter()
+const sidebarOpen = ref(false)
+
+async function handleLogout() {
+  await authStore.logout()
+  router.push('/login')
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <!-- Mobile sidebar backdrop -->
+    <div
+      v-if="sidebarOpen"
+      class="fixed inset-0 z-40 bg-black/50 lg:hidden"
+      @click="sidebarOpen = false"
+    />
+
+    <!-- Sidebar -->
+    <AppSidebar
+      :open="sidebarOpen"
+      @close="sidebarOpen = false"
+    />
+
+    <!-- Main content -->
+    <div class="lg:pl-64">
+      <AppHeader
+        @toggle-sidebar="sidebarOpen = !sidebarOpen"
+        @logout="handleLogout"
+      />
+
+      <main class="p-6">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>

src/components/layout/AppSidebar.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+defineProps<{
+  open: boolean
+}>()
+
+defineEmits<{
+  close: []
+}>()
+
+const route = useRoute()
+const authStore = useAuthStore()
+
+const navigation = computed(() => {
+  const items = [
+    { name: 'Dashboard', href: '/', icon: '📊' },
+    { name: 'Aufträge', href: '/orders', icon: '📋' },
+  ]
+
+  if (authStore.canManageUsers) {
+    items.push({ name: 'Mitarbeiter', href: '/users', icon: '👥' })
+  }
+
+  items.push(
+    { name: 'Verfügbarkeit', href: '/availability', icon: '📅' },
+    { name: 'Stundenzettel', href: '/timesheets', icon: '⏱️' },
+  )
+
+  if (authStore.isChef) {
+    items.push({ name: 'Module', href: '/modules', icon: '⚙️' })
+  }
+
+  items.push({ name: 'Einstellungen', href: '/settings', icon: '🔧' })
+
+  return items
+})
+
+function isActive(href: string) {
+  if (href === '/') return route.path === '/'
+  return route.path.startsWith(href)
+}
+</script>
+
+<template>
+  <aside
+    :class="[
+      'fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transform transition-transform lg:translate-x-0',
+      open ? 'translate-x-0' : '-translate-x-full'
+    ]"
+  >
+    <!-- Logo -->
+    <div class="h-16 flex items-center px-6 border-b border-gray-200 dark:border-gray-700">
+      <span class="text-2xl font-bold text-primary-600">🔐 SeCu</span>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="mt-6 px-3">
+      <router-link
+        v-for="item in navigation"
+        :key="item.href"
+        :to="item.href"
+        :class="[
+          'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors',
+          isActive(item.href)
+            ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
+            : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+        ]"
+        @click="$emit('close')"
+      >
+        <span class="text-xl">{{ item.icon }}</span>
+        <span class="font-medium">{{ item.name }}</span>
+      </router-link>
+    </nav>
+
+    <!-- User info -->
+    <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-3">
+        <div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+          <span class="text-primary-600 dark:text-primary-300 font-medium">
+            {{ authStore.user?.first_name?.[0] }}{{ authStore.user?.last_name?.[0] }}
+          </span>
+        </div>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
+            {{ authStore.fullName }}
+          </p>
+          <p class="text-xs text-gray-500 dark:text-gray-400 capitalize">
+            {{ authStore.user?.role }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>