admin
06ea149d41
Führt Login mit vier Rollen (Admin, Teamleiter, Mitarbeiter, Beobachter) ein, über die Teammitglieder eigenen Urlaub inkl. Pflicht-Vertreter eintragen können. Die Auslastungsberechnung berücksichtigt Urlaub jetzt als reduzierte Kapazität. Neue Konten vergeben ihr Passwort selbst beim ersten Login. Migrationsskript für bestehende Mitarbeiter aus der Vorversion inklusive. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
46 lines
1.5 KiB
Vue
46 lines
1.5 KiB
Vue
<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.capacity[idx])) }"
|
|
:title="`${hours}h von ${employee.capacity[idx]}h (Urlaub bereits abgezogen, nominal ${employee.weekly_capacity_hours}h)`"
|
|
>
|
|
{{ percent(hours, employee.capacity[idx]) }}%
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p v-else class="muted">Lade Auslastung…</p>
|
|
</div>
|
|
</template>
|