admin
fc25eff643
Vue 3 + Vite Frontend und Node/Express + SQLite Backend für Projekt-, Aufgaben-, Mitarbeiter- und Teamverwaltung inkl. Gantt-Zeitplan und Auslastungs-Heatmap.
48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<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>
|