Initial commit: Ressourcenplanung-App

Vue 3 + Vite Frontend und Node/Express + SQLite Backend für
Projekt-, Aufgaben-, Mitarbeiter- und Teamverwaltung inkl.
Gantt-Zeitplan und Auslastungs-Heatmap.

client/src/App.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { store } from './store.js';
+import SchedulePanel from './SchedulePanel.vue';
+import UtilizationPanel from './UtilizationPanel.vue';
+import ProjectsPanel from './ProjectsPanel.vue';
+import EmployeesPanel from './EmployeesPanel.vue';
+import TeamsPanel from './TeamsPanel.vue';
+
+const tabs = [
+  { id: 'schedule', label: 'Zeitplan' },
+  { id: 'utilization', label: 'Auslastung' },
+  { id: 'projects', label: 'Projekte' },
+  { id: 'employees', label: 'Mitarbeiter' },
+  { id: 'teams', label: 'Teams' },
+];
+const activeTab = ref('schedule');
+
+onMounted(() => store.loadAll());
+</script>
+
+<template>
+  <header class="topbar">
+    <h1>Ressourcenplanung</h1>
+    <nav class="tabs">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        :class="{ active: activeTab === tab.id }"
+        @click="activeTab = tab.id"
+      >
+        {{ tab.label }}
+      </button>
+    </nav>
+  </header>
+  <main>
+    <p v-if="store.loading" class="muted">Lade Daten…</p>
+    <p v-if="store.error" class="muted" style="color: #ef4444">{{ store.error }}</p>
+    <template v-else>
+      <SchedulePanel v-if="activeTab === 'schedule'" />
+      <UtilizationPanel v-if="activeTab === 'utilization'" />
+      <ProjectsPanel v-if="activeTab === 'projects'" />
+      <EmployeesPanel v-if="activeTab === 'employees'" />
+      <TeamsPanel v-if="activeTab === 'teams'" />
+    </template>
+  </main>
+</template>