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.
2026-07-03 22:45:07 +02:00
commit fc25eff643
24 changed files with 3938 additions and 0 deletions
@@ -0,0 +1,45 @@
+<script setup>
+import { computed } from 'vue';
+import { store } from './store.js';
+import { utilizationColor } from './helpers.js';
+
+const utilization = computed(() => store.utilization);
+
+function percent(hours, capacity) {
+  if (!capacity) return 0;
+  return Math.round((hours / capacity) * 100);
+}
+</script>
+
+<template>
+  <div class="panel-section">
+    <h2>Auslastung</h2>
+    <p class="muted">Geplante Stunden pro Woche im Verhältnis zur Kapazität je Mitarbeiter.</p>
+
+    <div v-if="utilization" style="overflow-x: auto">
+      <table class="heatmap-table">
+        <thead>
+          <tr>
+            <th style="text-align: left">Mitarbeiter</th>
+            <th v-for="week in utilization.weeks" :key="week">{{ week }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="employee in utilization.employees" :key="employee.id">
+            <td style="text-align: left">{{ employee.name }}</td>
+            <td v-for="(hours, idx) in employee.hours" :key="idx">
+              <div
+                class="heatmap-cell"
+                :style="{ background: utilizationColor(percent(hours, employee.weekly_capacity_hours)) }"
+                :title="`${hours}h von ${employee.weekly_capacity_hours}h`"
+              >
+                {{ percent(hours, employee.weekly_capacity_hours) }}%
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p v-else class="muted">Lade Auslastung…</p>
+  </div>
+</template>