Add holidays routes to backend and frontend; implement holiday associations and update UI components for admin holidays management

backend/set-user-admin.sql

@@ -0,0 +1,24 @@
+-- SQL Script: Benutzer zu Admin machen
+-- Setzt die Rolle eines Benutzers auf 'admin'
+-- Ausführen mit: mysql -u stechuhr -p stechuhr < set-user-admin.sql
+
+USE stechuhr;
+
+-- Zeige aktuelle Benutzer und ihre Rollen
+-- role: 0 = user, 1 = admin
+SELECT id, full_name, role FROM user;
+
+-- Setze User mit ID 1 auf Admin (role = 1)
+UPDATE user SET role = 1 WHERE id = 1;
+
+-- Zeige das Ergebnis
+SELECT id, full_name, role, 
+  CASE role 
+    WHEN 0 THEN 'user' 
+    WHEN 1 THEN 'admin' 
+    ELSE 'unknown' 
+  END as role_name 
+FROM user WHERE id = 1;
+
+SELECT 'Benutzer erfolgreich zu Admin gemacht!' AS status;
+

backend/src/config/database.js

@@ -76,6 +76,7 @@ class Database {
     const State = require('../models/State');
     const WeeklyWorktime = require('../models/WeeklyWorktime');
     const Holiday = require('../models/Holiday');
+    const HolidayState = require('../models/HolidayState');
     const Vacation = require('../models/Vacation');
     const Sick = require('../models/Sick');
     const SickType = require('../models/SickType');
@@ -91,6 +92,7 @@ class Database {
     State.initialize(this.sequelize);
     WeeklyWorktime.initialize(this.sequelize);
     Holiday.initialize(this.sequelize);
+    HolidayState.initialize(this.sequelize);
     Vacation.initialize(this.sequelize);
     Sick.initialize(this.sequelize);
     SickType.initialize(this.sequelize);
@@ -107,7 +109,7 @@ class Database {
    * Model-Assoziationen definieren
    */
   defineAssociations() {
-    const { User, Worklog, AuthInfo, AuthToken, AuthIdentity, State, WeeklyWorktime, Vacation, Sick, SickType, Timefix, Timewish } = this.sequelize.models;
+    const { User, Worklog, AuthInfo, AuthToken, AuthIdentity, State, WeeklyWorktime, Holiday, HolidayState, Vacation, Sick, SickType, Timefix, Timewish } = this.sequelize.models;
 
     // User Assoziationen
     User.hasMany(Worklog, { foreignKey: 'user_id', as: 'worklogs' });
@@ -151,6 +153,25 @@ class Database {
     // SickType Assoziationen
     SickType.hasMany(Sick, { foreignKey: 'sick_type_id', as: 'sickLeaves' });
     
+    // Holiday Assoziationen (Many-to-Many mit State)
+    Holiday.belongsToMany(State, {
+      through: HolidayState,
+      foreignKey: 'holiday_id',
+      otherKey: 'state_id',
+      as: 'states'
+    });
+    
+    State.belongsToMany(Holiday, {
+      through: HolidayState,
+      foreignKey: 'state_id',
+      otherKey: 'holiday_id',
+      as: 'holidays'
+    });
+    
+    // HolidayState Assoziationen
+    HolidayState.belongsTo(Holiday, { foreignKey: 'holiday_id', as: 'holiday' });
+    HolidayState.belongsTo(State, { foreignKey: 'state_id', as: 'state' });
+    
     // Timewish Assoziationen
     Timewish.belongsTo(User, { foreignKey: 'user_id', as: 'user' });
     User.hasMany(Timewish, { foreignKey: 'user_id', as: 'timewishes' });

backend/src/controllers/HolidayController.js

@@ -0,0 +1,86 @@
+const HolidayService = require('../services/HolidayService');
+
+/**
+ * Controller für Feiertage
+ * Verarbeitet HTTP-Requests und delegiert an HolidayService
+ */
+class HolidayController {
+  /**
+   * Holt alle Bundesländer
+   */
+  async getAllStates(req, res) {
+    try {
+      const states = await HolidayService.getAllStates();
+      res.json(states);
+    } catch (error) {
+      console.error('Fehler beim Abrufen der Bundesländer:', error);
+      res.status(500).json({ 
+        message: 'Fehler beim Abrufen der Bundesländer',
+        error: error.message 
+      });
+    }
+  }
+
+  /**
+   * Holt alle Feiertage
+   */
+  async getAllHolidays(req, res) {
+    try {
+      const holidays = await HolidayService.getAllHolidays();
+      res.json(holidays);
+    } catch (error) {
+      console.error('Fehler beim Abrufen der Feiertage:', error);
+      res.status(500).json({ 
+        message: 'Fehler beim Abrufen der Feiertage',
+        error: error.message 
+      });
+    }
+  }
+
+  /**
+   * Erstellt einen neuen Feiertag
+   */
+  async createHoliday(req, res) {
+    try {
+      const { date, hours, description, stateIds } = req.body;
+      
+      if (!date || !description) {
+        return res.status(400).json({ 
+          message: 'Datum und Beschreibung sind erforderlich' 
+        });
+      }
+      
+      const holiday = await HolidayService.createHoliday(date, hours, description, stateIds);
+      res.status(201).json(holiday);
+    } catch (error) {
+      console.error('Fehler beim Erstellen des Feiertags:', error);
+      res.status(error.message.includes('existiert bereits') ? 409 : 500).json({ 
+        message: error.message 
+      });
+    }
+  }
+
+  /**
+   * Löscht einen Feiertag
+   */
+  async deleteHoliday(req, res) {
+    try {
+      const holidayId = parseInt(req.params.id);
+      
+      if (isNaN(holidayId)) {
+        return res.status(400).json({ message: 'Ungültige ID' });
+      }
+      
+      await HolidayService.deleteHoliday(holidayId);
+      res.json({ message: 'Feiertag gelöscht' });
+    } catch (error) {
+      console.error('Fehler beim Löschen des Feiertags:', error);
+      res.status(error.message.includes('nicht gefunden') ? 404 : 500).json({ 
+        message: error.message 
+      });
+    }
+  }
+}
+
+module.exports = new HolidayController();
+

backend/src/index.js

@@ -86,6 +86,10 @@ app.use('/api/workdays', authenticateToken, workdaysRouter);
 const calendarRouter = require('./routes/calendar');
 app.use('/api/calendar', authenticateToken, calendarRouter);
 
+// Holidays routes (geschützt, nur Admin) - MIT ID-Hashing
+const holidaysRouter = require('./routes/holidays');
+app.use('/api/holidays', authenticateToken, holidaysRouter);
+
 // Error handling middleware
 app.use((err, req, res, next) => {
   console.error(err.stack);

backend/src/models/Holiday.js

@@ -42,6 +42,19 @@ class Holiday extends Model {
 
     return Holiday;
   }
+
+  /**
+   * Definiert Assoziationen mit anderen Models
+   */
+  static associate(models) {
+    // Holiday hat viele States (Many-to-Many über HolidayState)
+    Holiday.belongsToMany(models.State, {
+      through: models.HolidayState,
+      foreignKey: 'holiday_id',
+      otherKey: 'state_id',
+      as: 'states'
+    });
+  }
 }
 
 module.exports = Holiday;

backend/src/models/HolidayState.js

@@ -0,0 +1,69 @@
+const { Model, DataTypes } = require('sequelize');
+
+/**
+ * HolidayState Model
+ * Junction Table für Many-to-Many Beziehung zwischen Holiday und State
+ */
+class HolidayState extends Model {
+  static initialize(sequelize) {
+    HolidayState.init(
+      {
+        holiday_id: {
+          type: DataTypes.BIGINT,
+          primaryKey: true,
+          allowNull: false,
+          references: {
+            model: 'holiday',
+            key: 'id'
+          }
+        },
+        state_id: {
+          type: DataTypes.BIGINT,
+          primaryKey: true,
+          allowNull: false,
+          references: {
+            model: 'state',
+            key: 'id'
+          }
+        }
+      },
+      {
+        sequelize,
+        tableName: 'holiday_state',
+        timestamps: false,
+        indexes: [
+          {
+            name: 'fk_holiday_state_holiday',
+            fields: ['holiday_id']
+          },
+          {
+            name: 'fk_holiday_state_state',
+            fields: ['state_id']
+          }
+        ]
+      }
+    );
+
+    return HolidayState;
+  }
+
+  /**
+   * Definiert Assoziationen mit anderen Models
+   */
+  static associate(models) {
+    // HolidayState gehört zu einem Holiday
+    HolidayState.belongsTo(models.Holiday, {
+      foreignKey: 'holiday_id',
+      as: 'holiday'
+    });
+
+    // HolidayState gehört zu einem State
+    HolidayState.belongsTo(models.State, {
+      foreignKey: 'state_id',
+      as: 'state'
+    });
+  }
+}
+
+module.exports = HolidayState;
+

backend/src/models/State.js

@@ -33,6 +33,19 @@ class State extends Model {
 
     return State;
   }
+
+  /**
+   * Definiert Assoziationen mit anderen Models
+   */
+  static associate(models) {
+    // State hat viele Holidays (Many-to-Many über HolidayState)
+    State.belongsToMany(models.Holiday, {
+      through: models.HolidayState,
+      foreignKey: 'state_id',
+      otherKey: 'holiday_id',
+      as: 'holidays'
+    });
+  }
 }
 
 module.exports = State;

backend/src/models/User.js

@@ -99,6 +99,24 @@ class User extends Model {
   getWeeklyHours() {
     return this.week_hours;
   }
+
+  /**
+   * Rolle als String zurückgeben
+   * 0 = 'user', 1 = 'admin'
+   */
+  getRoleString() {
+    return this.role === 1 ? 'admin' : 'user';
+  }
+
+  /**
+   * JSON-Serialisierung überschreiben
+   */
+  toJSON() {
+    const values = { ...this.get() };
+    // Füge role_string hinzu für Frontend
+    values.role_string = this.getRoleString();
+    return values;
+  }
 }
 
 module.exports = User;

backend/src/models/index.js

@@ -9,6 +9,7 @@ const AuthInfo = require('./AuthInfo');
 const State = require('./State');
 const WeeklyWorktime = require('./WeeklyWorktime');
 const Holiday = require('./Holiday');
+const HolidayState = require('./HolidayState');
 const Vacation = require('./Vacation');
 const Sick = require('./Sick');
 const SickType = require('./SickType');
@@ -22,6 +23,7 @@ module.exports = {
   State,
   WeeklyWorktime,
   Holiday,
+  HolidayState,
   Vacation,
   Sick,
   SickType,

backend/src/routes/holidays.js

@@ -0,0 +1,23 @@
+const express = require('express');
+const router = express.Router();
+const HolidayController = require('../controllers/HolidayController');
+const unhashRequestIds = require('../middleware/unhashRequest');
+
+/**
+ * Routen für Feiertage (nur für Admins)
+ */
+
+// GET /api/holidays/states - Alle Bundesländer abrufen
+router.get('/states', HolidayController.getAllStates.bind(HolidayController));
+
+// GET /api/holidays - Alle Feiertage abrufen
+router.get('/', HolidayController.getAllHolidays.bind(HolidayController));
+
+// POST /api/holidays - Neuen Feiertag erstellen
+router.post('/', HolidayController.createHoliday.bind(HolidayController));
+
+// DELETE /api/holidays/:id - Feiertag löschen
+router.delete('/:id', unhashRequestIds, HolidayController.deleteHoliday.bind(HolidayController));
+
+module.exports = router;
+

backend/src/services/HolidayService.js

@@ -0,0 +1,180 @@
+const database = require('../config/database');
+const { Op } = require('sequelize');
+
+/**
+ * Service-Klasse für Feiertage
+ * Verwaltet bundesweite und regionale Feiertage
+ */
+class HolidayService {
+  /**
+   * Holt alle verfügbaren Bundesländer
+   * @returns {Promise<Array>} Array von States
+   */
+  async getAllStates() {
+    const { State } = database.getModels();
+    
+    const states = await State.findAll({
+      order: [['state_name', 'ASC']],
+      raw: true
+    });
+    
+    return states.map(s => ({
+      id: s.id,
+      name: s.state_name
+    }));
+  }
+
+  /**
+   * Holt alle Feiertage, aufgeteilt in zukünftige und vergangene
+   * Vergangene: Nur aktuelles Jahr und maximal 3 Monate zurück
+   * @returns {Promise<Object>} { future: [], past: [] }
+   */
+  async getAllHolidays() {
+    const { Holiday, State, HolidayState } = database.getModels();
+    
+    const today = new Date();
+    const currentYear = today.getFullYear();
+    const todayStr = `${currentYear}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+    
+    // Berechne Startdatum für vergangene Feiertage
+    const threeMonthsAgo = new Date(today);
+    threeMonthsAgo.setMonth(today.getMonth() - 3);
+    const yearStart = new Date(currentYear, 0, 1);
+    const pastStartDate = yearStart < threeMonthsAgo ? yearStart : threeMonthsAgo;
+    const pastStartDateStr = `${pastStartDate.getFullYear()}-${String(pastStartDate.getMonth() + 1).padStart(2, '0')}-${String(pastStartDate.getDate()).padStart(2, '0')}`;
+    
+    // Zukünftige Feiertage (inkl. heute) mit States
+    const futureHolidays = await Holiday.findAll({
+      where: {
+        date: {
+          [Op.gte]: todayStr
+        }
+      },
+      include: [
+        {
+          model: State,
+          as: 'states',
+          attributes: ['id', 'state_name'],
+          through: { attributes: [] } // Keine Attribute der Junction Table
+        }
+      ],
+      order: [['date', 'ASC']]
+    });
+    
+    // Vergangene Feiertage (nur aktuelles Jahr / letzte 3 Monate) mit States
+    const pastHolidays = await Holiday.findAll({
+      where: {
+        date: {
+          [Op.gte]: pastStartDateStr,
+          [Op.lt]: todayStr
+        }
+      },
+      include: [
+        {
+          model: State,
+          as: 'states',
+          attributes: ['id', 'state_name'],
+          through: { attributes: [] }
+        }
+      ],
+      order: [['date', 'DESC']]
+    });
+    
+    return {
+      future: futureHolidays.map(h => this._formatHoliday(h)),
+      past: pastHolidays.map(h => this._formatHoliday(h))
+    };
+  }
+
+  /**
+   * Erstellt einen neuen Feiertag
+   * @param {string} date - Datum (YYYY-MM-DD)
+   * @param {number} hours - Freie Stunden (Standard: 8)
+   * @param {string} description - Beschreibung
+   * @param {Array<number>} stateIds - Array von State-IDs (leer = bundesweit)
+   * @returns {Promise<Object>} Erstellter Feiertag
+   */
+  async createHoliday(date, hours, description, stateIds = []) {
+    const { Holiday, State, HolidayState } = database.getModels();
+    
+    // Prüfe ob schon ein Feiertag an diesem Datum existiert
+    const existing = await Holiday.findOne({
+      where: { date }
+    });
+    
+    if (existing) {
+      throw new Error('An diesem Datum existiert bereits ein Feiertag');
+    }
+    
+    const holiday = await Holiday.create({
+      date,
+      hours: hours || 8,
+      description,
+      version: 0
+    });
+    
+    // Verknüpfe mit States (falls angegeben)
+    if (stateIds && stateIds.length > 0) {
+      for (const stateId of stateIds) {
+        await HolidayState.create({
+          holiday_id: holiday.id,
+          state_id: stateId
+        });
+      }
+    }
+    
+    // Lade Holiday mit States neu
+    const holidayWithStates = await Holiday.findByPk(holiday.id, {
+      include: [
+        {
+          model: State,
+          as: 'states',
+          attributes: ['id', 'state_name'],
+          through: { attributes: [] }
+        }
+      ]
+    });
+    
+    return this._formatHoliday(holidayWithStates);
+  }
+
+  /**
+   * Löscht einen Feiertag
+   * @param {number} id - Holiday-ID
+   * @returns {Promise<void>}
+   */
+  async deleteHoliday(id) {
+    const { Holiday } = database.getModels();
+    
+    const holiday = await Holiday.findByPk(id);
+    
+    if (!holiday) {
+      throw new Error('Feiertag nicht gefunden');
+    }
+    
+    await holiday.destroy();
+  }
+
+  /**
+   * Formatiert einen Feiertag für die API
+   */
+  _formatHoliday(holiday) {
+    // Holiday kann ein Plain Object (raw: true) oder eine Sequelize Instance sein
+    const states = holiday.states || [];
+    const stateNames = Array.isArray(states) 
+      ? states.map(s => s.state_name || s.name).filter(Boolean)
+      : [];
+    
+    return {
+      id: holiday.id,
+      date: holiday.date,
+      hours: holiday.hours,
+      description: holiday.description,
+      states: stateNames,
+      isFederal: stateNames.length === 0 // Kein State = Bundesfeiertag
+    };
+  }
+}
+
+module.exports = new HolidayService();
+

frontend/src/App.vue

@@ -72,6 +72,7 @@ const pageTitle = computed(() => {
     'sick': 'Krankheit',
     'workdays': 'Arbeitstage',
     'calendar': 'Kalender',
+    'admin-holidays': 'Feiertage',
     'entries': 'Einträge',
     'stats': 'Statistiken'
   }

frontend/src/components/SideMenu.vue

@@ -44,7 +44,17 @@ import { useAuthStore } from '../stores/authStore'
 const auth = useAuthStore()
 
 // Rolle: 'user' | 'admin' (Fallback: 'user')
-const role = computed(() => (auth.user?.role || 'user').toString().toLowerCase())
+// Verwende role_string (vom Backend gemappt) oder fallback zu 'user'
+const role = computed(() => {
+  if (auth.user?.role_string) {
+    return auth.user.role_string.toLowerCase()
+  }
+  // Fallback für alte Implementierung oder wenn role ein Number ist
+  if (typeof auth.user?.role === 'number') {
+    return auth.user.role === 1 ? 'admin' : 'user'
+  }
+  return (auth.user?.role || 'user').toString().toLowerCase()
+})
 
 const SECTIONS_USER = [
   {

frontend/src/router/index.js

@@ -15,6 +15,7 @@ import Vacation from '../views/Vacation.vue'
 import Sick from '../views/Sick.vue'
 import Workdays from '../views/Workdays.vue'
 import Calendar from '../views/Calendar.vue'
+import Holidays from '../views/Holidays.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -91,6 +92,12 @@ const router = createRouter({
       component: Calendar,
       meta: { requiresAuth: true }
     },
+    {
+      path: '/admin/holidays',
+      name: 'admin-holidays',
+      component: Holidays,
+      meta: { requiresAuth: true, requiresAdmin: true }
+    },
     {
       path: '/entries',
       name: 'entries',

frontend/src/views/Holidays.vue

@@ -0,0 +1,585 @@
+<template>
+  <div class="holidays-page">
+    <div class="card">
+      <!-- Formular zum Erstellen eines Feiertags -->
+      <form @submit.prevent="createHoliday" class="holiday-form">
+        <h3>Feiertag hinzufügen</h3>
+        
+        <div class="form-row">
+          <div class="form-group">
+            <label for="date">Datum</label>
+            <input 
+              type="date" 
+              id="date" 
+              v-model="form.date" 
+              required
+            >
+          </div>
+          
+          <div class="form-group">
+            <label for="hours">Freie Stunden</label>
+            <input 
+              type="number" 
+              id="hours" 
+              v-model.number="form.hours" 
+              min="0"
+              max="24"
+              required
+            >
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group full-width">
+            <label for="description">Beschreibung</label>
+            <input 
+              type="text" 
+              id="description" 
+              v-model="form.description" 
+              placeholder="z.B. Tag der Deutschen Einheit"
+              required
+            >
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group full-width">
+            <label>
+              <input 
+                type="checkbox" 
+                v-model="form.isFederal"
+                @change="onFederalChange"
+              >
+              Bundesfeiertag (gilt für alle Bundesländer)
+            </label>
+          </div>
+        </div>
+
+        <div class="form-row" v-if="!form.isFederal">
+          <div class="form-group full-width">
+            <label for="states">Bundesländer</label>
+            <div class="states-grid">
+              <label 
+                v-for="state in availableStates" 
+                :key="state.id"
+                class="state-checkbox"
+              >
+                <input 
+                  type="checkbox" 
+                  :value="state.id"
+                  v-model="form.selectedStates"
+                >
+                {{ state.name }}
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary" :disabled="loading">
+            {{ loading ? 'Wird gespeichert...' : 'Feiertag hinzufügen' }}
+          </button>
+        </div>
+      </form>
+
+      <hr>
+
+      <!-- Zwei-Spalten-Layout für Tabellen -->
+      <div class="tables-container">
+        <!-- Zukünftige Feiertage -->
+        <div class="table-column">
+          <h3>Zukünftige Feiertage</h3>
+          <table class="holidays-table">
+            <thead>
+              <tr>
+                <th>Datum</th>
+                <th>Freie Stunden</th>
+                <th>Beschreibung</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="futureHolidays.length === 0">
+                <td colspan="4" class="no-data">Keine zukünftigen Feiertage</td>
+              </tr>
+              <tr v-for="holiday in futureHolidays" :key="holiday.id">
+                <td>{{ formatDate(holiday.date) }}</td>
+                <td>{{ holiday.hours }}</td>
+                <td>
+                  <div>{{ holiday.description }}</div>
+                  <div v-if="holiday.states && holiday.states.length > 0" class="state-tags">
+                    <span v-for="state in holiday.states" :key="state" class="state-tag">
+                      {{ state }}
+                    </span>
+                  </div>
+                  <div v-else class="federal-tag">Bundesfeiertag</div>
+                </td>
+                <td>
+                  <button 
+                    @click="deleteHoliday(holiday.id)" 
+                    class="btn btn-delete-small"
+                    :disabled="loading"
+                  >
+                    ×
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Vergangene Feiertage -->
+        <div class="table-column">
+          <h3>Vergangene Feiertage</h3>
+          <table class="holidays-table">
+            <thead>
+              <tr>
+                <th>Datum</th>
+                <th>Freie Stunden</th>
+                <th>Beschreibung</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="pastHolidays.length === 0">
+                <td colspan="4" class="no-data">Keine vergangenen Feiertage</td>
+              </tr>
+              <tr v-for="holiday in pastHolidays" :key="holiday.id">
+                <td>{{ formatDate(holiday.date) }}</td>
+                <td>{{ holiday.hours }}</td>
+                <td>
+                  <div>{{ holiday.description }}</div>
+                  <div v-if="holiday.states && holiday.states.length > 0" class="state-tags">
+                    <span v-for="state in holiday.states" :key="state" class="state-tag">
+                      {{ state }}
+                    </span>
+                  </div>
+                  <div v-else class="federal-tag">Bundesfeiertag</div>
+                </td>
+                <td>
+                  <button 
+                    @click="deleteHoliday(holiday.id)" 
+                    class="btn btn-delete-small"
+                    :disabled="loading"
+                  >
+                    ×
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal-Komponente -->
+    <Modal 
+      v-if="showModal"
+      :show="showModal"
+      :title="modalConfig.title"
+      :message="modalConfig.message"
+      :type="modalConfig.type"
+      :confirmText="modalConfig.confirmText"
+      :cancelText="modalConfig.cancelText"
+      @confirm="onConfirm" 
+      @cancel="onCancel" 
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useAuthStore } from '../stores/authStore'
+import { useModal } from '../composables/useModal'
+import Modal from '../components/Modal.vue'
+
+const authStore = useAuthStore()
+const futureHolidays = ref([])
+const pastHolidays = ref([])
+const availableStates = ref([])
+const loading = ref(false)
+
+const { showModal, modalConfig, alert, confirm, onConfirm, onCancel } = useModal()
+
+const form = ref({
+  date: new Date().toISOString().split('T')[0],
+  hours: 8,
+  description: '',
+  isFederal: true,
+  selectedStates: []
+})
+
+// Lade alle Bundesländer
+async function loadStates() {
+  try {
+    const response = await fetch('http://localhost:3010/api/holidays/states', {
+      headers: {
+        'Authorization': `Bearer ${authStore.token}`
+      }
+    })
+    
+    if (!response.ok) {
+      throw new Error('Fehler beim Laden der Bundesländer')
+    }
+    
+    availableStates.value = await response.json()
+  } catch (error) {
+    console.error('Fehler beim Laden der Bundesländer:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  }
+}
+
+// Lade alle Feiertage
+async function loadHolidays() {
+  try {
+    loading.value = true
+    const response = await fetch('http://localhost:3010/api/holidays', {
+      headers: {
+        'Authorization': `Bearer ${authStore.token}`
+      }
+    })
+    
+    if (!response.ok) {
+      throw new Error('Fehler beim Laden der Feiertage')
+    }
+    
+    const data = await response.json()
+    futureHolidays.value = data.future || []
+    pastHolidays.value = data.past || []
+  } catch (error) {
+    console.error('Fehler beim Laden der Feiertage:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Wenn "Bundesfeiertag" geändert wird
+function onFederalChange() {
+  if (form.value.isFederal) {
+    form.value.selectedStates = []
+  }
+}
+
+// Erstelle neuen Feiertag
+async function createHoliday() {
+  if (!form.value.date || !form.value.description) {
+    await alert('Bitte füllen Sie alle Felder aus', 'Fehlende Angaben')
+    return
+  }
+  
+  // Validierung: Wenn nicht bundesweit, müssen Bundesländer ausgewählt sein
+  if (!form.value.isFederal && form.value.selectedStates.length === 0) {
+    await alert('Bitte wählen Sie mindestens ein Bundesland aus oder markieren Sie als Bundesfeiertag', 'Fehlende Angaben')
+    return
+  }
+  
+  try {
+    loading.value = true
+    const response = await fetch('http://localhost:3010/api/holidays', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${authStore.token}`
+      },
+      body: JSON.stringify({
+        date: form.value.date,
+        hours: form.value.hours,
+        description: form.value.description,
+        stateIds: form.value.isFederal ? [] : form.value.selectedStates
+      })
+    })
+    
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Fehler beim Erstellen des Feiertags')
+    }
+    
+    // Formular zurücksetzen
+    resetForm()
+    
+    // Liste neu laden
+    await loadHolidays()
+  } catch (error) {
+    console.error('Fehler beim Erstellen des Feiertags:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Lösche Feiertag
+async function deleteHoliday(id) {
+  const confirmed = await confirm('Möchten Sie diesen Feiertag wirklich löschen?', 'Feiertag löschen')
+  
+  if (!confirmed) {
+    return
+  }
+  
+  try {
+    loading.value = true
+    const response = await fetch(`http://localhost:3010/api/holidays/${id}`, {
+      method: 'DELETE',
+      headers: {
+        'Authorization': `Bearer ${authStore.token}`
+      }
+    })
+    
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Fehler beim Löschen des Feiertags')
+    }
+    
+    await loadHolidays()
+  } catch (error) {
+    console.error('Fehler beim Löschen des Feiertags:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Formatiere Datum für Anzeige (DD.MM.YYYY)
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  const date = new Date(dateStr + 'T00:00:00')
+  return date.toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric'
+  })
+}
+
+// Formular zurücksetzen
+function resetForm() {
+  form.value = {
+    date: new Date().toISOString().split('T')[0],
+    hours: 8,
+    description: '',
+    isFederal: true,
+    selectedStates: []
+  }
+}
+
+// Initiales Laden
+onMounted(async () => {
+  await Promise.all([
+    loadStates(),
+    loadHolidays()
+  ])
+})
+</script>
+
+<style scoped>
+.holidays-page {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.holiday-form h3 {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.form-row {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.form-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group.full-width {
+  flex: 1;
+}
+
+.form-group label {
+  font-weight: 500;
+  margin-bottom: 6px;
+  font-size: 13px;
+  color: #333;
+}
+
+.form-group input {
+  padding: 8px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #4CAF50;
+  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
+}
+
+.form-actions {
+  margin-top: 8px;
+}
+
+.states-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.state-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: background 0.2s;
+}
+
+.state-checkbox:hover {
+  background: #f5f5f5;
+}
+
+.state-checkbox input[type="checkbox"] {
+  cursor: pointer;
+}
+
+.state-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.state-tag {
+  display: inline-block;
+  background: #e3f2fd;
+  color: #1976d2;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.federal-tag {
+  display: inline-block;
+  background: #f3e5f5;
+  color: #7b1fa2;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 600;
+  margin-top: 4px;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #eee;
+  margin: 20px 0;
+}
+
+.tables-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+}
+
+.table-column h3 {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  color: #333;
+}
+
+.holidays-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.holidays-table th {
+  text-align: left;
+  padding: 10px 8px;
+  background: #f5f5f5;
+  border-bottom: 2px solid #ddd;
+  font-weight: 600;
+  font-size: 12px;
+  color: #666;
+}
+
+.holidays-table th:last-child {
+  width: 40px;
+}
+
+.holidays-table td {
+  padding: 10px 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.holidays-table tbody tr:hover {
+  background: #f9f9f9;
+}
+
+.no-data {
+  text-align: center;
+  color: #999;
+  font-style: italic;
+  padding: 20px !important;
+}
+
+.btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #4CAF50, #45a049);
+  color: white;
+  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
+}
+
+.btn-delete-small {
+  background: #f44336;
+  color: white;
+  padding: 4px 8px;
+  font-size: 16px;
+  line-height: 1;
+  border-radius: 3px;
+}
+
+.btn-delete-small:hover:not(:disabled) {
+  background: #da190b;
+}
+</style>
+