added init files

.gitignore

@@ -0,0 +1,22 @@
+# Haupt .gitignore im Projekt-Root
+backend/node_modules/
+frontend/node_modules/
+backend/database/*.db
+backend/database/*.db-journal
+backend/dist/
+frontend/build/
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.DS_Store
+Thumbs.db
+.idea/
+.vscode/
+*.tgz
+*.tar.gz

backend/dockerfile

@@ -0,0 +1,8 @@
+# backend/Dockerfile
+FROM node:18-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --only=production
+COPY . .
+EXPOSE 3001
+CMD ["node", "dist/server.js"]

backend/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "schichtplan-backend",
+  "version": "1.0.0",
+  "type": "commonjs",
+  "scripts": {
+    "dev": "ts-node src/server.ts",
+    "build": "tsc",
+    "start": "node dist/server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "cors": "^2.8.5",
+    "sqlite3": "^5.1.6",
+    "uuid": "^9.0.0",
+    "jsonwebtoken": "^9.0.2",
+    "bcryptjs": "^2.4.3"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.17",
+    "@types/cors": "^2.8.13",
+    "@types/jsonwebtoken": "^9.0.2",
+    "@types/bcryptjs": "^2.4.2",
+    "@types/uuid": "^9.0.2",
+    "typescript": "^5.0.0",
+    "ts-node": "^10.9.0"
+  }
+}

backend/src/controllers/authController.ts

@@ -0,0 +1,168 @@
+// backend/src/controllers/authController.ts
+import { Request, Response } from 'express';
+import bcrypt from 'bcryptjs';
+import jwt from 'jsonwebtoken';
+import { v4 as uuidv4 } from 'uuid';
+import { db } from '../services/databaseService';
+import { AuthRequest } from '../middleware/auth';
+
+const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';
+const JWT_EXPIRES_IN = process.env.JWT_EXPIRES_IN || '7d';
+
+export const login = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { email, password } = req.body;
+
+    if (!email || !password) {
+      res.status(400).json({ error: 'Email and password are required' });
+      return;
+    }
+
+    // User aus Datenbank holen
+    const user = await db.get<any>(
+      'SELECT * FROM users WHERE email = ?',
+      [email]
+    );
+
+    if (!user) {
+      res.status(401).json({ error: 'Invalid credentials' });
+      return;
+    }
+
+    // Passwort vergleichen
+    const isPasswordValid = await bcrypt.compare(password, user.password);
+    if (!isPasswordValid) {
+      res.status(401).json({ error: 'Invalid credentials' });
+      return;
+    }
+
+    // JWT Token generieren
+    const token = jwt.sign(
+      { 
+        userId: user.id, 
+        email: user.email, 
+        role: user.role 
+      },
+      JWT_SECRET as jwt.Secret,
+      { expiresIn: JWT_EXPIRES_IN as jwt.SignOptions['expiresIn'] }
+    );
+
+    // User ohne Passwort zurückgeben
+    const { password: _, ...userWithoutPassword } = user;
+
+    res.json({
+      user: userWithoutPassword,
+      token,
+      expiresIn: JWT_EXPIRES_IN
+    });
+
+  } catch (error) {
+    console.error('Login error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const register = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { email, password, name, role = 'user' } = req.body;
+
+    if (!email || !password || !name) {
+      res.status(400).json({ error: 'Email, password and name are required' });
+      return;
+    }
+
+    // Check if user already exists
+    const existingUser = await db.get<any>(
+      'SELECT id FROM users WHERE email = ?',
+      [email]
+    );
+
+    if (existingUser) {
+      res.status(409).json({ error: 'User already exists' });
+      return;
+    }
+
+    // Validate role
+    const validRoles = ['admin', 'instandhalter', 'user'];
+    if (!validRoles.includes(role)) {
+      res.status(400).json({ error: 'Invalid role' });
+      return;
+    }
+
+    // Hash password
+    const hashedPassword = await bcrypt.hash(password, 10);
+    const userId = uuidv4();
+
+    // Create user
+    await db.run(
+      'INSERT INTO users (id, email, password, name, role) VALUES (?, ?, ?, ?, ?)',
+      [userId, email, hashedPassword, name, role]
+    );
+
+    // Generate token
+    const token = jwt.sign(
+      { 
+        userId, 
+        email, 
+        role 
+      },
+      JWT_SECRET as jwt.Secret,
+      { expiresIn: JWT_EXPIRES_IN as jwt.SignOptions['expiresIn'] }
+    );
+
+    // Return user without password
+    const user = {
+      id: userId,
+      email,
+      name,
+      role,
+      createdAt: new Date().toISOString()
+    };
+
+    res.status(201).json({
+      user,
+      token,
+      expiresIn: JWT_EXPIRES_IN
+    });
+
+  } catch (error) {
+    console.error('Registration error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const logout = async (req: AuthRequest, res: Response): Promise<void> => {
+  try {
+    // Bei JWT gibt es keinen Server-side logout, aber wir können den Token client-seitig entfernen
+    res.json({ message: 'Logged out successfully' });
+  } catch (error) {
+    console.error('Logout error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const getCurrentUser = async (req: AuthRequest, res: Response): Promise<void> => {
+  try {
+    const userId = req.user?.userId;
+
+    if (!userId) {
+      res.status(401).json({ error: 'Not authenticated' });
+      return;
+    }
+
+    const user = await db.get<any>(
+      'SELECT id, email, name, role, created_at FROM users WHERE id = ?',
+      [userId]
+    );
+
+    if (!user) {
+      res.status(404).json({ error: 'User not found' });
+      return;
+    }
+
+    res.json(user);
+  } catch (error) {
+    console.error('Get current user error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};

backend/src/controllers/shiftPlanController.ts

@@ -0,0 +1,334 @@
+// backend/src/controllers/shiftPlanController.ts
+import { Request, Response } from 'express';
+import { v4 as uuidv4 } from 'uuid';
+import { db } from '../services/databaseService';
+import { AuthRequest } from '../middleware/auth';
+
+export interface ShiftPlan {
+  id: string;
+  name: string;
+  startDate: string;
+  endDate: string;
+  templateId?: string;
+  status: 'draft' | 'published';
+  createdBy: string;
+  createdAt: string;
+}
+
+export interface AssignedShift {
+  id: string;
+  shiftPlanId: string;
+  date: string;
+  startTime: string;
+  endTime: string;
+  requiredEmployees: number;
+  assignedEmployees: string[];
+}
+
+export interface CreateShiftPlanRequest {
+  name: string;
+  startDate: string;
+  endDate: string;
+  templateId?: string;
+}
+
+export const getShiftPlans = async (req: AuthRequest, res: Response): Promise<void> => {
+  try {
+    const userId = req.user?.userId;
+    const userRole = req.user?.role;
+
+    let query = `
+      SELECT sp.*, u.name as created_by_name 
+      FROM shift_plans sp
+      LEFT JOIN users u ON sp.created_by = u.id
+    `;
+
+    // Regular users can only see published plans
+    if (userRole === 'user') {
+      query += ` WHERE sp.status = 'published'`;
+    }
+
+    query += ` ORDER BY sp.created_at DESC`;
+
+    const shiftPlans = await db.all<ShiftPlan>(query);
+
+    res.json(shiftPlans);
+  } catch (error) {
+    console.error('Error fetching shift plans:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const getShiftPlan = async (req: AuthRequest, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+    const userId = req.user?.userId;
+    const userRole = req.user?.role;
+
+    let query = `
+      SELECT sp.*, u.name as created_by_name 
+      FROM shift_plans sp
+      LEFT JOIN users u ON sp.created_by = u.id
+      WHERE sp.id = ?
+    `;
+
+    // Regular users can only see published plans
+    if (userRole === 'user') {
+      query += ` AND sp.status = 'published'`;
+    }
+
+    const shiftPlan = await db.get<ShiftPlan>(query, [id]);
+
+    if (!shiftPlan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+
+    // Load assigned shifts
+    const assignedShifts = await db.all<any>(`
+      SELECT * FROM assigned_shifts 
+      WHERE shift_plan_id = ? 
+      ORDER BY date, start_time
+    `, [id]);
+
+    const shiftPlanWithShifts = {
+      ...shiftPlan,
+      shifts: assignedShifts.map(shift => ({
+        id: shift.id,
+        date: shift.date,
+        startTime: shift.start_time,
+        endTime: shift.end_time,
+        requiredEmployees: shift.required_employees,
+        assignedEmployees: JSON.parse(shift.assigned_employees || '[]')
+      }))
+    };
+
+    res.json(shiftPlanWithShifts);
+  } catch (error) {
+    console.error('Error fetching shift plan:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const createShiftPlan = async (req: AuthRequest, res: Response): Promise<void> => {
+  try {
+    const { name, startDate, endDate, templateId }: CreateShiftPlanRequest = req.body;
+    const userId = req.user?.userId;
+
+    if (!userId) {
+      res.status(401).json({ error: 'Unauthorized' });
+      return;
+    }
+
+    if (!name || !startDate || !endDate) {
+      res.status(400).json({ error: 'Name, start date and end date are required' });
+      return;
+    }
+
+    const shiftPlanId = uuidv4();
+
+    await db.run('BEGIN TRANSACTION');
+
+    try {
+      // Create shift plan
+      await db.run(
+        `INSERT INTO shift_plans (id, name, start_date, end_date, template_id, status, created_by) 
+         VALUES (?, ?, ?, ?, ?, ?, ?)`,
+        [shiftPlanId, name, startDate, endDate, templateId, 'draft', userId]
+      );
+
+      // If template is provided, generate shifts from template
+      if (templateId) {
+        await generateShiftsFromTemplate(shiftPlanId, templateId, startDate, endDate);
+      }
+
+      await db.run('COMMIT');
+
+      // Return created shift plan
+      const createdPlan = await db.get<ShiftPlan>(`
+        SELECT sp.*, u.name as created_by_name 
+        FROM shift_plans sp
+        LEFT JOIN users u ON sp.created_by = u.id
+        WHERE sp.id = ?
+      `, [shiftPlanId]);
+
+      const assignedShifts = await db.all<any>(`
+        SELECT * FROM assigned_shifts 
+        WHERE shift_plan_id = ? 
+        ORDER BY date, start_time
+      `, [shiftPlanId]);
+
+      res.status(201).json({
+        ...createdPlan,
+        shifts: assignedShifts.map(shift => ({
+          id: shift.id,
+          date: shift.date,
+          startTime: shift.start_time,
+          endTime: shift.end_time,
+          requiredEmployees: shift.required_employees,
+          assignedEmployees: JSON.parse(shift.assigned_employees || '[]')
+        }))
+      });
+
+    } catch (error) {
+      await db.run('ROLLBACK');
+      throw error;
+    }
+
+  } catch (error) {
+    console.error('Error creating shift plan:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const updateShiftPlan = async (req: AuthRequest, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+    const { name, status, shifts } = req.body;
+    const userId = req.user?.userId;
+
+    // Check if shift plan exists
+    const existingPlan: any = await db.get('SELECT * FROM shift_plans WHERE id = ?', [id]);
+    if (!existingPlan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+
+    // Check permissions (only admin/instandhalter or creator can update)
+    if (existingPlan.created_by !== userId && !['admin', 'instandhalter'].includes(req.user?.role || '')) {
+      res.status(403).json({ error: 'Insufficient permissions' });
+      return;
+    }
+
+    await db.run('BEGIN TRANSACTION');
+
+    try {
+      // Update shift plan
+      if (name !== undefined || status !== undefined) {
+        await db.run(
+          `UPDATE shift_plans 
+           SET name = COALESCE(?, name), 
+               status = COALESCE(?, status)
+           WHERE id = ?`,
+          [name, status, id]
+        );
+      }
+
+      // Update shifts if provided
+      if (shifts) {
+        for (const shift of shifts) {
+          await db.run(
+            `UPDATE assigned_shifts 
+             SET required_employees = ?, 
+                 assigned_employees = ?
+             WHERE id = ? AND shift_plan_id = ?`,
+            [shift.requiredEmployees, JSON.stringify(shift.assignedEmployees || []), shift.id, id]
+          );
+        }
+      }
+
+      await db.run('COMMIT');
+
+      // Return updated shift plan
+      const updatedPlan = await db.get<ShiftPlan>(`
+        SELECT sp.*, u.name as created_by_name 
+        FROM shift_plans sp
+        LEFT JOIN users u ON sp.created_by = u.id
+        WHERE sp.id = ?
+      `, [id]);
+
+      const assignedShifts = await db.all<any>(`
+        SELECT * FROM assigned_shifts 
+        WHERE shift_plan_id = ? 
+        ORDER BY date, start_time
+      `, [id]);
+
+      res.json({
+        ...updatedPlan,
+        shifts: assignedShifts.map(shift => ({
+          id: shift.id,
+          date: shift.date,
+          startTime: shift.start_time,
+          endTime: shift.end_time,
+          requiredEmployees: shift.required_employees,
+          assignedEmployees: JSON.parse(shift.assigned_employees || '[]')
+        }))
+      });
+
+    } catch (error) {
+      await db.run('ROLLBACK');
+      throw error;
+    }
+
+  } catch (error) {
+    console.error('Error updating shift plan:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const deleteShiftPlan = async (req: AuthRequest, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+    const userId = req.user?.userId;
+
+    // Check if shift plan exists
+    const existingPlan: any = await db.get('SELECT * FROM shift_plans WHERE id = ?', [id]);
+    if (!existingPlan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+
+    // Check permissions (only admin/instandhalter or creator can delete)
+    if (existingPlan.created_by !== userId && !['admin', 'instandhalter'].includes(req.user?.role || '')) {
+      res.status(403).json({ error: 'Insufficient permissions' });
+      return;
+    }
+
+    await db.run('DELETE FROM shift_plans WHERE id = ?', [id]);
+    // Assigned shifts will be automatically deleted due to CASCADE
+
+    res.status(204).send();
+  } catch (error) {
+    console.error('Error deleting shift plan:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+// Helper function to generate shifts from template
+async function generateShiftsFromTemplate(shiftPlanId: string, templateId: string, startDate: string, endDate: string): Promise<void> {
+  // Get template shifts
+  const templateShifts = await db.all<any>(`
+    SELECT * FROM template_shifts 
+    WHERE template_id = ? 
+    ORDER BY day_of_week, start_time
+  `, [templateId]);
+
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  // Generate shifts for each day in the date range
+  for (let date = new Date(start); date <= end; date.setDate(date.getDate() + 1)) {
+    const dayOfWeek = date.getDay(); // 0 = Sunday, 1 = Monday, etc.
+
+    // Find template shifts for this day of week
+    const shiftsForDay = templateShifts.filter(shift => shift.day_of_week === dayOfWeek);
+
+    for (const templateShift of shiftsForDay) {
+      const shiftId = uuidv4();
+      
+      await db.run(
+        `INSERT INTO assigned_shifts (id, shift_plan_id, date, start_time, end_time, required_employees, assigned_employees) 
+         VALUES (?, ?, ?, ?, ?, ?, ?)`,
+        [
+          shiftId,
+          shiftPlanId,
+          date.toISOString().split('T')[0],
+          templateShift.start_time,
+          templateShift.end_time,
+          templateShift.required_employees,
+          JSON.stringify([])
+        ]
+      );
+    }
+  }
+}

backend/src/controllers/shiftTemplateController.ts

@@ -0,0 +1,280 @@
+// backend/src/controllers/shiftTemplateController.ts
+import { Request, Response } from 'express';
+import { v4 as uuidv4 } from 'uuid';
+import { db } from '../services/databaseService';
+import { ShiftTemplate, CreateShiftTemplateRequest, UpdateShiftTemplateRequest } from '../models/ShiftTemplate';
+
+export const getTemplates = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const templates = await db.all<ShiftTemplate>(`
+      SELECT st.*, u.name as created_by_name 
+      FROM shift_templates st
+      LEFT JOIN users u ON st.created_by = u.id
+      ORDER BY st.created_at DESC
+    `);
+
+    // Für jede Vorlage die Schichten laden
+    const templatesWithShifts = await Promise.all(
+      templates.map(async (template) => {
+        const shifts = await db.all<any>(`
+          SELECT * FROM template_shifts 
+          WHERE template_id = ? 
+          ORDER BY day_of_week, start_time
+        `, [template.id]);
+
+        return {
+          ...template,
+          shifts: shifts.map(shift => ({
+            id: shift.id,
+            dayOfWeek: shift.day_of_week,
+            name: shift.name,
+            startTime: shift.start_time,
+            endTime: shift.end_time,
+            requiredEmployees: shift.required_employees,
+            color: shift.color
+          }))
+        };
+      })
+    );
+
+    res.json(templatesWithShifts);
+  } catch (error) {
+    console.error('Error fetching templates:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const getTemplate = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+
+    const template = await db.get<ShiftTemplate>(`
+      SELECT st.*, u.name as created_by_name 
+      FROM shift_templates st
+      LEFT JOIN users u ON st.created_by = u.id
+      WHERE st.id = ?
+    `, [id]);
+
+    if (!template) {
+      res.status(404).json({ error: 'Template not found' });
+      return;
+    }
+
+    const shifts = await db.all<any>(`
+      SELECT * FROM template_shifts 
+      WHERE template_id = ? 
+      ORDER BY day_of_week, start_time
+    `, [id]);
+
+    const templateWithShifts = {
+      ...template,
+      shifts: shifts.map(shift => ({
+        id: shift.id,
+        dayOfWeek: shift.day_of_week,
+        name: shift.name,
+        startTime: shift.start_time,
+        endTime: shift.end_time,
+        requiredEmployees: shift.required_employees,
+        color: shift.color
+      }))
+    };
+
+    res.json(templateWithShifts);
+  } catch (error) {
+    console.error('Error fetching template:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const createTemplate = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { name, description, isDefault, shifts }: CreateShiftTemplateRequest = req.body;
+    const userId = (req as any).user?.userId; // From auth middleware
+
+    if (!userId) {
+      res.status(401).json({ error: 'Unauthorized' });
+      return;
+    }
+
+    const templateId = uuidv4();
+
+    // Start transaction
+    await db.run('BEGIN TRANSACTION');
+
+    try {
+      // Insert template
+      await db.run(
+        `INSERT INTO shift_templates (id, name, description, is_default, created_by) 
+         VALUES (?, ?, ?, ?, ?)`,
+        [templateId, name, description, isDefault ? 1 : 0, userId]
+      );
+
+      // Insert shifts
+      for (const shift of shifts) {
+        const shiftId = uuidv4();
+        await db.run(
+          `INSERT INTO template_shifts (id, template_id, day_of_week, name, start_time, end_time, required_employees, color) 
+           VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+          [shiftId, templateId, shift.dayOfWeek, shift.name, shift.startTime, shift.endTime, shift.requiredEmployees, shift.color || '#3498db']
+        );
+      }
+
+      // If this is set as default, remove default from other templates
+      if (isDefault) {
+        await db.run(
+          `UPDATE shift_templates SET is_default = 0 WHERE id != ? AND is_default = 1`,
+          [templateId]
+        );
+      }
+
+      await db.run('COMMIT');
+
+      // Return created template
+      const createdTemplate = await db.get<ShiftTemplate>(`
+        SELECT st.*, u.name as created_by_name 
+        FROM shift_templates st
+        LEFT JOIN users u ON st.created_by = u.id
+        WHERE st.id = ?
+      `, [templateId]);
+
+      const templateShifts = await db.all<any>(`
+        SELECT * FROM template_shifts 
+        WHERE template_id = ? 
+        ORDER BY day_of_week, start_time
+      `, [templateId]);
+
+      res.status(201).json({
+        ...createdTemplate,
+        shifts: templateShifts.map(shift => ({
+          id: shift.id,
+          dayOfWeek: shift.day_of_week,
+          name: shift.name,
+          startTime: shift.start_time,
+          endTime: shift.end_time,
+          requiredEmployees: shift.required_employees,
+          color: shift.color
+        }))
+      });
+
+    } catch (error) {
+      await db.run('ROLLBACK');
+      throw error;
+    }
+
+  } catch (error) {
+    console.error('Error creating template:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const updateTemplate = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+    const { name, description, isDefault, shifts }: UpdateShiftTemplateRequest = req.body;
+
+    // Check if template exists
+    const existingTemplate = await db.get('SELECT * FROM shift_templates WHERE id = ?', [id]);
+    if (!existingTemplate) {
+      res.status(404).json({ error: 'Template not found' });
+      return;
+    }
+
+    await db.run('BEGIN TRANSACTION');
+
+    try {
+      // Update template
+      if (name !== undefined || description !== undefined || isDefault !== undefined) {
+        await db.run(
+          `UPDATE shift_templates 
+           SET name = COALESCE(?, name), 
+               description = COALESCE(?, description),
+               is_default = COALESCE(?, is_default)
+           WHERE id = ?`,
+          [name, description, isDefault ? 1 : 0, id]
+        );
+      }
+
+      // If updating shifts, replace all shifts
+      if (shifts) {
+        // Delete existing shifts
+        await db.run('DELETE FROM template_shifts WHERE template_id = ?', [id]);
+
+        // Insert new shifts
+        for (const shift of shifts) {
+          const shiftId = uuidv4();
+          await db.run(
+            `INSERT INTO template_shifts (id, template_id, day_of_week, name, start_time, end_time, required_employees, color) 
+             VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+            [shiftId, id, shift.dayOfWeek, shift.name, shift.startTime, shift.endTime, shift.requiredEmployees, shift.color || '#3498db']
+          );
+        }
+      }
+
+      // If this is set as default, remove default from other templates
+      if (isDefault) {
+        await db.run(
+          `UPDATE shift_templates SET is_default = 0 WHERE id != ? AND is_default = 1`,
+          [id]
+        );
+      }
+
+      await db.run('COMMIT');
+
+      // Return updated template
+      const updatedTemplate = await db.get<ShiftTemplate>(`
+        SELECT st.*, u.name as created_by_name 
+        FROM shift_templates st
+        LEFT JOIN users u ON st.created_by = u.id
+        WHERE st.id = ?
+      `, [id]);
+
+      const templateShifts = await db.all<any>(`
+        SELECT * FROM template_shifts 
+        WHERE template_id = ? 
+        ORDER BY day_of_week, start_time
+      `, [id]);
+
+      res.json({
+        ...updatedTemplate,
+        shifts: templateShifts.map(shift => ({
+          id: shift.id,
+          dayOfWeek: shift.day_of_week,
+          name: shift.name,
+          startTime: shift.start_time,
+          endTime: shift.end_time,
+          requiredEmployees: shift.required_employees,
+          color: shift.color
+        }))
+      });
+
+    } catch (error) {
+      await db.run('ROLLBACK');
+      throw error;
+    }
+
+  } catch (error) {
+    console.error('Error updating template:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const deleteTemplate = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+
+    // Check if template exists
+    const existingTemplate = await db.get('SELECT * FROM shift_templates WHERE id = ?', [id]);
+    if (!existingTemplate) {
+      res.status(404).json({ error: 'Template not found' });
+      return;
+    }
+
+    await db.run('DELETE FROM shift_templates WHERE id = ?', [id]);
+    // Template shifts will be automatically deleted due to CASCADE
+
+    res.status(204).send();
+  } catch (error) {
+    console.error('Error deleting template:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};

backend/src/database/schema.sql

@@ -0,0 +1,24 @@
+-- Zusätzliche Tabellen für shift_plans
+CREATE TABLE IF NOT EXISTS shift_plans (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL,
+  start_date TEXT NOT NULL,
+  end_date TEXT NOT NULL,
+  template_id TEXT,
+  status TEXT CHECK(status IN ('draft', 'published')) DEFAULT 'draft',
+  created_by TEXT NOT NULL,
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+  FOREIGN KEY (created_by) REFERENCES users(id),
+  FOREIGN KEY (template_id) REFERENCES shift_templates(id)
+);
+
+CREATE TABLE IF NOT EXISTS assigned_shifts (
+  id TEXT PRIMARY KEY,
+  shift_plan_id TEXT NOT NULL,
+  date TEXT NOT NULL,
+  start_time TEXT NOT NULL,
+  end_time TEXT NOT NULL,
+  required_employees INTEGER DEFAULT 1,
+  assigned_employees TEXT DEFAULT '[]', -- JSON array of user IDs
+  FOREIGN KEY (shift_plan_id) REFERENCES shift_plans(id) ON DELETE CASCADE
+);

backend/src/middleware/auth.ts

@@ -0,0 +1,40 @@
+// backend/src/middleware/auth.ts
+import { Request, Response, NextFunction } from 'express';
+import jwt from 'jsonwebtoken';
+
+const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';
+
+export interface AuthRequest extends Request {
+  user?: {
+    userId: string;
+    email: string;
+    role: string;
+  };
+}
+
+export const authMiddleware = (req: AuthRequest, res: Response, next: NextFunction): void => {
+  const token = req.header('Authorization')?.replace('Bearer ', '');
+
+  if (!token) {
+    res.status(401).json({ error: 'Access denied. No token provided.' });
+    return;
+  }
+
+  try {
+    const decoded = jwt.verify(token, JWT_SECRET) as any;
+    req.user = decoded;
+    next();
+  } catch (error) {
+    res.status(400).json({ error: 'Invalid token.' });
+  }
+};
+
+export const requireRole = (roles: string[]) => {
+  return (req: AuthRequest, res: Response, next: NextFunction): void => {
+    if (!req.user || !roles.includes(req.user.role)) {
+      res.status(403).json({ error: 'Access denied. Insufficient permissions.' });
+      return;
+    }
+    next();
+  };
+};

backend/src/models/Shift.ts

@@ -0,0 +1,35 @@
+// backend/src/models/Shift.ts
+export interface ShiftTemplate {
+  id: string;
+  name: string;
+  shifts: TemplateShift[];
+  createdBy: string;
+}
+
+export interface TemplateShift {
+  dayOfWeek: number; // 0-6
+  name: string;
+  startTime: string; // "08:00"
+  endTime: string;   // "12:00"
+  requiredEmployees: number;
+}
+
+export interface ShiftPlan {
+  id: string;
+  name: string;
+  startDate: string;
+  endDate: string;
+  templateId?: string;
+  shifts: AssignedShift[];
+  status: 'draft' | 'published';
+  createdBy: string;
+}
+
+export interface AssignedShift {
+  id: string;
+  date: string;
+  startTime: string;
+  endTime: string;
+  requiredEmployees: number;
+  assignedEmployees: string[];
+}

backend/src/models/ShiftTemplate.ts

@@ -0,0 +1,35 @@
+// backend/src/models/ShiftTemplate.ts
+export interface ShiftTemplate {
+  id: string;
+  name: string;
+  description?: string;
+  isDefault: boolean;
+  createdBy: string;
+  createdAt: string;
+  shifts: TemplateShift[];
+}
+
+export interface TemplateShift {
+  id: string;
+  templateId: string;
+  dayOfWeek: number;
+  name: string;
+  startTime: string;
+  endTime: string;
+  requiredEmployees: number;
+  color?: string;
+}
+
+export interface CreateShiftTemplateRequest {
+  name: string;
+  description?: string;
+  isDefault: boolean;
+  shifts: Omit<TemplateShift, 'id' | 'templateId'>[];
+}
+
+export interface UpdateShiftTemplateRequest {
+  name?: string;
+  description?: string;
+  isDefault?: boolean;
+  shifts?: Omit<TemplateShift, 'id' | 'templateId'>[];
+}

backend/src/models/User.ts

@@ -0,0 +1,15 @@
+// backend/src/models/User.ts
+export interface User {
+  id: string;
+  email: string;
+  password: string; // gehashed
+  name: string;
+  role: 'admin' | 'instandhalter' | 'user';
+  createdAt: Date;
+}
+
+export interface UserSession {
+  userId: string;
+  token: string;
+  expiresAt: Date;
+}

backend/src/routes/auth.ts

@@ -0,0 +1,13 @@
+// backend/src/routes/auth.ts
+import express from 'express';
+import { login, register, logout, getCurrentUser } from '../controllers/authController';
+import { authMiddleware } from '../middleware/auth';
+
+const router = express.Router();
+
+router.post('/login', login);
+router.post('/register', register);
+router.post('/logout', authMiddleware, logout);
+router.get('/me', authMiddleware, getCurrentUser);
+
+export default router;

backend/src/routes/shiftPlans.ts

@@ -0,0 +1,21 @@
+// backend/src/routes/shiftPlans.ts
+import express from 'express';
+import { authMiddleware, requireRole } from '../middleware/auth';
+import { 
+  getShiftPlans, 
+  getShiftPlan, 
+  createShiftPlan, 
+  updateShiftPlan, 
+  deleteShiftPlan 
+} from '../controllers/shiftPlanController';
+
+const router = express.Router();
+
+router.use(authMiddleware);
+router.get('/', getShiftPlans);
+router.get('/:id', getShiftPlan);
+router.post('/', requireRole(['admin', 'instandhalter']), createShiftPlan);
+router.put('/:id', updateShiftPlan);
+router.delete('/:id', deleteShiftPlan);
+
+export default router;

backend/src/routes/shiftTemplates.ts

@@ -0,0 +1,21 @@
+// backend/src/routes/shiftTemplates.ts
+import express from 'express';
+import { authMiddleware } from '../middleware/auth';
+import { 
+  getTemplates, 
+  getTemplate, 
+  createTemplate, 
+  updateTemplate, 
+  deleteTemplate 
+} from '../controllers/shiftTemplateController';
+
+const router = express.Router();
+
+router.use(authMiddleware);
+router.get('/', getTemplates);
+router.get('/:id', getTemplate);
+router.post('/', createTemplate);
+router.put('/:id', updateTemplate);
+router.delete('/:id', deleteTemplate);
+
+export default router;

backend/src/scripts/seedData.ts

@@ -0,0 +1,52 @@
+// backend/src/scripts/seedData.ts
+import { db } from '../services/databaseService';
+import { v4 as uuidv4 } from 'uuid';
+import bcrypt from 'bcryptjs';
+
+export const seedData = async () => {
+  try {
+    // Admin User erstellen
+    const adminId = uuidv4();
+    const hashedPassword = await bcrypt.hash('admin123', 10);
+    
+    await db.run(
+      `INSERT OR IGNORE INTO users (id, email, password, name, role) VALUES (?, ?, ?, ?, ?)`,
+      [adminId, 'admin@schichtplan.de', hashedPassword, 'System Administrator', 'admin']
+    );
+
+    // Standard Vorlage erstellen
+    const templateId = uuidv4();
+    
+    await db.run(
+      `INSERT OR IGNORE INTO shift_templates (id, name, description, is_default, created_by) VALUES (?, ?, ?, ?, ?)`,
+      [templateId, 'Standard Woche', 'Standard Schichtplan für Montag bis Freitag', 1, adminId]
+    );
+
+    // Standard Schichten
+    const shifts = [
+      { day: 1, name: 'Vormittag', start: '08:00', end: '12:00', employees: 2 },
+      { day: 1, name: 'Nachmittag', start: '11:30', end: '15:30', employees: 2 },
+      { day: 2, name: 'Vormittag', start: '08:00', end: '12:00', employees: 2 },
+      { day: 2, name: 'Nachmittag', start: '11:30', end: '15:30', employees: 2 },
+      { day: 3, name: 'Vormittag', start: '08:00', end: '12:00', employees: 2 },
+      { day: 3, name: 'Nachmittag', start: '11:30', end: '15:30', employees: 2 },
+      { day: 4, name: 'Vormittag', start: '08:00', end: '12:00', employees: 2 },
+      { day: 4, name: 'Nachmittag', start: '11:30', end: '15:30', employees: 2 },
+      { day: 5, name: 'Vormittag', start: '08:00', end: '12:00', employees: 2 }
+    ];
+
+    for (const shift of shifts) {
+      await db.run(
+        `INSERT OR IGNORE INTO template_shifts (id, template_id, day_of_week, name, start_time, end_time, required_employees) VALUES (?, ?, ?, ?, ?, ?, ?)`,
+        [uuidv4(), templateId, shift.day, shift.name, shift.start, shift.end, shift.employees]
+      );
+    }
+
+    console.log('Test data seeded successfully');
+  } catch (error) {
+    console.error('Error seeding test data:', error);
+  }
+};
+
+// Beim Start ausführen
+seedData();

backend/src/server.ts

@@ -0,0 +1,44 @@
+// backend/src/server.ts
+import express from 'express';
+import cors from 'cors';
+import { db } from './services/databaseService.js';
+import { seedData } from './scripts/seedData.js';
+import authRoutes from './routes/auth.js';
+import shiftTemplateRoutes from './routes/shiftTemplates.js';
+import shiftPlanRoutes from './routes/shiftPlans.js';
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// Routes
+app.use('/api/auth', authRoutes);
+app.use('/api/shift-templates', shiftTemplateRoutes);
+app.use('/api/shift-plans', shiftPlanRoutes);
+
+// Health check
+app.get('/api/health', (req, res) => {
+  res.json({ status: 'OK', timestamp: new Date().toISOString() });
+});
+
+// Error handling
+app.use((err: any, req: express.Request, res: express.Response, next: express.NextFunction) => {
+  console.error('Unhandled error:', err);
+  res.status(500).json({ error: 'Internal server error' });
+});
+
+// Start server
+app.listen(PORT, async () => {
+  console.log(`Server running on port ${PORT}`);
+  await seedData();
+});
+
+// Graceful shutdown
+process.on('SIGINT', async () => {
+  console.log('Shutting down gracefully...');
+  await db.close();
+  process.exit(0);
+});

backend/src/services/databaseService.ts

@@ -0,0 +1,129 @@
+// backend/src/services/databaseService.ts
+import sqlite3 from 'sqlite3';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// __dirname für ES Modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const dbPath = path.join(__dirname, '../../database/schichtplan.db');
+
+export class DatabaseService {
+  private db: sqlite3.Database;
+
+  constructor() {
+    this.db = new sqlite3.Database(dbPath, (err) => {
+      if (err) {
+        console.error('Database connection error:', err);
+      } else {
+        console.log('Connected to SQLite database');
+        this.initializeDatabase();
+      }
+    });
+  }
+
+  private initializeDatabase() {
+    const schema = `
+      CREATE TABLE IF NOT EXISTS users (
+        id TEXT PRIMARY KEY,
+        email TEXT UNIQUE NOT NULL,
+        password TEXT NOT NULL,
+        name TEXT NOT NULL,
+        role TEXT CHECK(role IN ('admin', 'instandhalter', 'user')) NOT NULL,
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+      );
+
+      CREATE TABLE IF NOT EXISTS shift_templates (
+        id TEXT PRIMARY KEY,
+        name TEXT NOT NULL,
+        description TEXT,
+        is_default BOOLEAN DEFAULT FALSE,
+        created_by TEXT NOT NULL,
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (created_by) REFERENCES users(id)
+      );
+
+      CREATE TABLE IF NOT EXISTS template_shifts (
+        id TEXT PRIMARY KEY,
+        template_id TEXT NOT NULL,
+        day_of_week INTEGER NOT NULL CHECK (day_of_week >= 0 AND day_of_week <= 6),
+        name TEXT NOT NULL,
+        start_time TEXT NOT NULL,
+        end_time TEXT NOT NULL,
+        required_employees INTEGER DEFAULT 1,
+        color TEXT DEFAULT '#3498db',
+        FOREIGN KEY (template_id) REFERENCES shift_templates(id) ON DELETE CASCADE
+      );
+
+      CREATE TABLE IF NOT EXISTS shift_plans (
+        id TEXT PRIMARY KEY,
+        name TEXT NOT NULL,
+        start_date TEXT NOT NULL,
+        end_date TEXT NOT NULL,
+        template_id TEXT,
+        status TEXT CHECK(status IN ('draft', 'published')) DEFAULT 'draft',
+        created_by TEXT NOT NULL,
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (created_by) REFERENCES users(id),
+        FOREIGN KEY (template_id) REFERENCES shift_templates(id)
+      );
+
+      CREATE TABLE IF NOT EXISTS assigned_shifts (
+        id TEXT PRIMARY KEY,
+        shift_plan_id TEXT NOT NULL,
+        date TEXT NOT NULL,
+        start_time TEXT NOT NULL,
+        end_time TEXT NOT NULL,
+        required_employees INTEGER DEFAULT 1,
+        assigned_employees TEXT DEFAULT '[]',
+        FOREIGN KEY (shift_plan_id) REFERENCES shift_plans(id) ON DELETE CASCADE
+      );
+    `;
+
+    this.db.exec(schema, (err) => {
+      if (err) {
+        console.error('Database initialization error:', err);
+      } else {
+        console.log('Database initialized successfully');
+      }
+    });
+  }
+
+  run(sql: string, params: any[] = []): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.db.run(sql, params, function(err) {
+        if (err) reject(err);
+        else resolve();
+      });
+    });
+  }
+
+  get<T>(sql: string, params: any[] = []): Promise<T | undefined> {
+    return new Promise((resolve, reject) => {
+      this.db.get(sql, params, (err, row) => {
+        if (err) reject(err);
+        else resolve(row as T);
+      });
+    });
+  }
+
+  all<T>(sql: string, params: any[] = []): Promise<T[]> {
+    return new Promise((resolve, reject) => {
+      this.db.all(sql, params, (err, rows) => {
+        if (err) reject(err);
+        else resolve(rows as T[]);
+      });
+    });
+  }
+
+  close(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.db.close((err) => {
+        if (err) reject(err);
+        else resolve();
+      });
+    });
+  }
+}
+
+export const db = new DatabaseService();

backend/tsconfig.json

@@ -0,0 +1,20 @@
+// backend/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "ignoreDeprecations": "6.0",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3.8'
+services:
+  frontend:
+    build: ./frontend
+    ports:
+      - "80:80"
+    depends_on:
+      - backend
+
+  backend:
+    build: ./backend
+    ports:
+      - "3001:3001"
+    environment:
+      - DATABASE_URL=file:./dev.db
+      - JWT_SECRET=your-secret-key
+
+  # Später: Database service hinzufügen

frontend/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

frontend/dockerfile

@@ -0,0 +1,8 @@
+# backend/Dockerfile
+FROM node:18-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --only=production
+COPY . .
+EXPOSE 3001
+CMD ["node", "dist/server.js"]

frontend/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.126",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "@types/react-router-dom": "^5.3.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.3",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

frontend/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

frontend/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

frontend/src/App.tsx

@@ -0,0 +1,82 @@
+// frontend/src/App.tsx
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './contexts/AuthContext';
+import Login from './pages/Auth/Login';
+import Dashboard from './pages/Dashboard/Dashboard';
+import ShiftTemplateList from './pages/ShiftTemplates/ShiftTemplateList';
+import ShiftTemplateEditor from './pages/ShiftTemplates/ShiftTemplateEditor';
+
+// Protected Route Component
+const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { user, loading } = useAuth();
+  
+  if (loading) {
+    return <div style={{ padding: '20px' }}>Lade...</div>;
+  }
+  
+  return user ? <>{children}</> : <Navigate to="/login" replace />;
+};
+
+const PublicRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { user, loading } = useAuth();
+  
+  if (loading) {
+    return <div style={{ padding: '20px' }}>Lade...</div>;
+  }
+  
+  return !user ? <>{children}</> : <Navigate to="/" replace />;
+};
+
+function AppRoutes() {
+  return (
+    <Routes>
+      {/* Public Route - nur für nicht eingeloggte User */}
+      <Route path="/login" element={
+        <PublicRoute>
+          <Login />
+        </PublicRoute>
+      } />
+      
+      {/* Protected Routes - nur für eingeloggte User */}
+      <Route path="/" element={
+        <ProtectedRoute>
+          <Dashboard />
+        </ProtectedRoute>
+      } />
+      
+      <Route path="/shift-templates" element={
+        <ProtectedRoute>
+          <ShiftTemplateList />
+        </ProtectedRoute>
+      } />
+      
+      <Route path="/shift-templates/new" element={
+        <ProtectedRoute>
+          <ShiftTemplateEditor />
+        </ProtectedRoute>
+      } />
+      
+      <Route path="/shift-templates/:id" element={
+        <ProtectedRoute>
+          <ShiftTemplateEditor />
+        </ProtectedRoute>
+      } />
+      
+      {/* Fallback Route */}
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}
+
+function App() {
+  return (
+    <AuthProvider>
+      <Router>
+        <AppRoutes />
+      </Router>
+    </AuthProvider>
+  );
+}
+
+export default App;

frontend/src/contexts/AuthContext.tsx

@@ -0,0 +1,69 @@
+// frontend/src/contexts/AuthContext.tsx
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { authService, User, LoginRequest, RegisterRequest } from '../services/authService';
+
+interface AuthContextType {
+  user: User | null;
+  login: (credentials: LoginRequest) => Promise<void>;
+  register: (userData: RegisterRequest) => Promise<void>;
+  logout: () => void;
+  hasRole: (roles: string[]) => boolean;
+  loading: boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Beim Start User aus localStorage laden
+    const savedUser = authService.getCurrentUser();
+    if (savedUser) {
+      setUser(savedUser);
+    }
+    setLoading(false);
+  }, []);
+
+  const login = async (credentials: LoginRequest) => {
+    try {
+      const response = await authService.login(credentials);
+      setUser(response.user);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const register = async (userData: RegisterRequest) => {
+    try {
+      const response = await authService.register(userData);
+      setUser(response.user);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const logout = () => {
+    authService.logout();
+    setUser(null);
+  };
+
+  const hasRole = (roles: string[]) => {
+    return user ? roles.includes(user.role) : false;
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, login, register, logout, hasRole, loading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

frontend/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

frontend/src/pages/Auth/Login.tsx

@@ -0,0 +1,109 @@
+// frontend/src/pages/Auth/Login.tsx
+import React, { useState } from 'react';
+import { useAuth } from '../../contexts/AuthContext';
+import { useNavigate } from 'react-router-dom';
+
+const Login: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  
+  const { login, user } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      console.log('Versuche Login...');
+      await login({ email, password });
+      console.log('Login erfolgreich!', 'User:', user);
+      console.log('Navigiere zu /');
+      navigate('/', { replace: true });
+    } catch (err: any) {
+      console.error('Login Fehler:', err);
+      setError(err.message || 'Login fehlgeschlagen');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ 
+      maxWidth: '400px', 
+      margin: '100px auto', 
+      padding: '20px',
+      border: '1px solid #ddd',
+      borderRadius: '8px'
+    }}>
+      <h2>Anmelden</h2>
+      
+      {error && (
+        <div style={{ 
+          color: 'red', 
+          backgroundColor: '#ffe6e6',
+          padding: '10px',
+          borderRadius: '4px',
+          marginBottom: '15px'
+        }}>
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <div style={{ marginBottom: '15px' }}>
+          <label style={{ display: 'block', marginBottom: '5px' }}>
+            E-Mail:
+          </label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+          />
+        </div>
+
+        <div style={{ marginBottom: '15px' }}>
+          <label style={{ display: 'block', marginBottom: '5px' }}>
+            Passwort:
+          </label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+          />
+        </div>
+
+        <button 
+          type="submit" 
+          disabled={loading}
+          style={{ 
+            width: '100%', 
+            padding: '10px', 
+            backgroundColor: loading ? '#ccc' : '#007bff',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: loading ? 'not-allowed' : 'pointer'
+          }}
+        >
+          {loading ? 'Anmeldung...' : 'Anmelden'}
+        </button>
+      </form>
+
+      <div style={{ marginTop: '15px', textAlign: 'center' }}>
+        <p>Test Account:</p>
+        <p><strong>Email:</strong> admin@schichtplan.de</p>
+        <p><strong>Passwort:</strong> admin123</p>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

frontend/src/pages/Dashboard/Dashboard.tsx

@@ -0,0 +1,163 @@
+// frontend/src/pages/Dashboard/Dashboard.tsx
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+
+const Dashboard: React.FC = () => {
+  const { user, logout, hasRole } = useAuth();
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '30px' }}>
+        <h1>Schichtplan Dashboard</h1>
+        <div>
+          <span style={{ marginRight: '15px' }}>Eingeloggt als: <strong>{user?.name}</strong> ({user?.role})</span>
+          <button 
+            onClick={logout}
+            style={{ 
+              padding: '8px 16px', 
+              backgroundColor: '#dc3545', 
+              color: 'white', 
+              border: 'none', 
+              borderRadius: '4px' 
+            }}
+          >
+            Abmelden
+          </button>
+        </div>
+      </div>
+
+      {/* Admin/Instandhalter Funktionen */}
+      {hasRole(['admin', 'instandhalter']) && (
+        <div style={{ 
+          display: 'grid', 
+          gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', 
+          gap: '20px', 
+          marginBottom: '40px' 
+        }}>
+          <div style={{ 
+            border: '1px solid #007bff', 
+            padding: '20px', 
+            borderRadius: '8px',
+            backgroundColor: '#f8f9fa'
+          }}>
+            <h3>Schichtplan erstellen</h3>
+            <p>Neuen Schichtplan erstellen und verwalten</p>
+            <Link to="/shift-plans/new">
+              <button style={{ 
+                padding: '10px 20px', 
+                backgroundColor: '#007bff', 
+                color: 'white', 
+                border: 'none', 
+                borderRadius: '4px' 
+              }}>
+                Erstellen
+              </button>
+            </Link>
+          </div>
+
+          <div style={{ 
+            border: '1px solid #28a745', 
+            padding: '20px', 
+            borderRadius: '8px',
+            backgroundColor: '#f8f9fa'
+          }}>
+            <h3>Vorlagen verwalten</h3>
+            <p>Schichtplan Vorlagen erstellen und bearbeiten</p>
+            <Link to="/shift-templates">
+              <button style={{ 
+                padding: '10px 20px', 
+                backgroundColor: '#28a745', 
+                color: 'white', 
+                border: 'none', 
+                borderRadius: '4px' 
+              }}>
+                Verwalten
+              </button>
+            </Link>
+          </div>
+
+          {hasRole(['admin']) && (
+            <div style={{ 
+              border: '1px solid #6f42c1', 
+              padding: '20px', 
+              borderRadius: '8px',
+              backgroundColor: '#f8f9fa'
+            }}>
+              <h3>Benutzer verwalten</h3>
+              <p>Benutzerkonten erstellen und verwalten</p>
+              <Link to="/user-management">
+                <button style={{ 
+                  padding: '10px 20px', 
+                  backgroundColor: '#6f42c1', 
+                  color: 'white', 
+                  border: 'none', 
+                  borderRadius: '4px' 
+                }}>
+                  Verwalten
+                </button>
+              </Link>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Aktuelle Schichtpläne */}
+      <div style={{ 
+        border: '1px solid #ddd', 
+        padding: '20px', 
+        borderRadius: '8px'
+      }}>
+        <h2>Aktuelle Schichtpläne</h2>
+        <div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
+          <p>Noch keine Schichtpläne vorhanden.</p>
+          {hasRole(['admin', 'instandhalter']) && (
+            <Link to="/shift-plans/new">
+              <button style={{ 
+                padding: '10px 20px', 
+                backgroundColor: '#007bff', 
+                color: 'white', 
+                border: 'none', 
+                borderRadius: '4px' 
+              }}>
+                Ersten Schichtplan erstellen
+              </button>
+            </Link>
+          )}
+        </div>
+      </div>
+
+      {/* Schnellzugriff für alle User */}
+      <div style={{ marginTop: '30px' }}>
+        <h3>Schnellzugriff</h3>
+        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+          <Link to="/shift-templates">
+            <button style={{ 
+              padding: '8px 16px', 
+              border: '1px solid #007bff', 
+              backgroundColor: 'white', 
+              color: '#007bff',
+              borderRadius: '4px' 
+            }}>
+              Vorlagen ansehen
+            </button>
+          </Link>
+          
+          {hasRole(['user']) && (
+            <button style={{ 
+              padding: '8px 16px', 
+              border: '1px solid #28a745', 
+              backgroundColor: 'white', 
+              color: '#28a745',
+              borderRadius: '4px' 
+            }}>
+              Meine Schichten
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

frontend/src/pages/ShiftPlans/ShiftPlanCreate.tsx

@@ -0,0 +1,56 @@
+// frontend/src/pages/ShiftPlans/ShiftPlanCreate.tsx
+import React, { useState } from 'react';
+
+const ShiftPlanCreate: React.FC = () => {
+  const [planName, setPlanName] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [selectedTemplate, setSelectedTemplate] = useState('');
+
+  const handleCreate = async () => {
+    // API Call zum Erstellen
+  };
+
+  return (
+    <div>
+      <h1>Neuen Schichtplan erstellen</h1>
+      
+      <div>
+        <label>Plan Name:</label>
+        <input 
+          type="text" 
+          value={planName}
+          onChange={(e) => setPlanName(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label>Von:</label>
+        <input 
+          type="date" 
+          value={startDate}
+          onChange={(e) => setStartDate(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label>Bis:</label>
+        <input 
+          type="date" 
+          value={endDate}
+          onChange={(e) => setEndDate(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label>Vorlage verwenden:</label>
+        <select value={selectedTemplate} onChange={(e) => setSelectedTemplate(e.target.value)}>
+          <option value="">Keine Vorlage</option>
+          {/* Vorlagen laden */}
+        </select>
+      </div>
+
+      <button onClick={handleCreate}>Schichtplan erstellen</button>
+    </div>
+  );
+};

frontend/src/pages/ShiftTemplates/ShiftTemplateEditor.tsx

@@ -0,0 +1,189 @@
+// frontend/src/pages/ShiftTemplates/ShiftTemplateEditor.tsx
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { ShiftTemplate, TemplateShift, DEFAULT_DAYS } from '../../types/shiftTemplate';
+import { shiftTemplateService } from '../../services/shiftTemplateService';
+import ShiftDayEditor from './components/ShiftDayEditor';
+
+const defaultShift: Omit<TemplateShift, 'id'> = {
+  dayOfWeek: 1, // Montag
+  name: '',
+  startTime: '08:00',
+  endTime: '12:00',
+  requiredEmployees: 1,
+  color: '#3498db'
+};
+
+const ShiftTemplateEditor: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const isEditing = !!id;
+
+  const [template, setTemplate] = useState<Omit<ShiftTemplate, 'id' | 'createdAt' | 'createdBy'>>({
+    name: '',
+    description: '',
+    shifts: [],
+    isDefault: false
+  });
+  const [loading, setLoading] = useState(isEditing);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      loadTemplate();
+    }
+  }, [id]);
+
+  const loadTemplate = async () => {
+    try {
+      if (!id) return;
+      const data = await shiftTemplateService.getTemplate(id);
+      setTemplate({
+        name: data.name,
+        description: data.description,
+        shifts: data.shifts,
+        isDefault: data.isDefault
+      });
+    } catch (error) {
+      console.error('Fehler beim Laden:', error);
+      alert('Vorlage konnte nicht geladen werden');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    if (!template.name.trim()) {
+      alert('Bitte geben Sie einen Namen für die Vorlage ein');
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (isEditing && id) {
+        await shiftTemplateService.updateTemplate(id, template);
+      } else {
+        await shiftTemplateService.createTemplate(template);
+      }
+      navigate('/shift-templates');
+    } catch (error) {
+      console.error('Speichern fehlgeschlagen:', error);
+      alert('Fehler beim Speichern der Vorlage');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const addShift = (dayOfWeek: number) => {
+    const newShift: TemplateShift = {
+      ...defaultShift,
+      id: Date.now().toString(),
+      dayOfWeek,
+      name: `Schicht ${template.shifts.filter(s => s.dayOfWeek === dayOfWeek).length + 1}`
+    };
+    
+    setTemplate(prev => ({
+      ...prev,
+      shifts: [...prev.shifts, newShift]
+    }));
+  };
+
+  const updateShift = (shiftId: string, updates: Partial<TemplateShift>) => {
+    setTemplate(prev => ({
+      ...prev,
+      shifts: prev.shifts.map(shift =>
+        shift.id === shiftId ? { ...shift, ...updates } : shift
+      )
+    }));
+  };
+
+  const removeShift = (shiftId: string) => {
+    setTemplate(prev => ({
+      ...prev,
+      shifts: prev.shifts.filter(shift => shift.id !== shiftId)
+    }));
+  };
+
+  if (loading) return <div>Lade Vorlage...</div>;
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '30px' }}>
+        <h1>{isEditing ? 'Vorlage bearbeiten' : 'Neue Vorlage erstellen'}</h1>
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <button 
+            onClick={() => navigate('/shift-templates')}
+            style={{ padding: '10px 20px', border: '1px solid #6c757d', background: 'white', color: '#6c757d' }}
+          >
+            Abbrechen
+          </button>
+          <button 
+            onClick={handleSave}
+            disabled={saving}
+            style={{ padding: '10px 20px', backgroundColor: saving ? '#6c757d' : '#007bff', color: 'white', border: 'none' }}
+          >
+            {saving ? 'Speichern...' : 'Speichern'}
+          </button>
+        </div>
+      </div>
+
+      {/* Template Meta Information */}
+      <div style={{ marginBottom: '30px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
+        <div style={{ marginBottom: '15px' }}>
+          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+            Vorlagenname *
+          </label>
+          <input
+            type="text"
+            value={template.name}
+            onChange={(e) => setTemplate(prev => ({ ...prev, name: e.target.value }))}
+            style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+            placeholder="z.B. Standard Woche, Teilzeit Modell, etc."
+          />
+        </div>
+
+        <div style={{ marginBottom: '15px' }}>
+          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+            Beschreibung
+          </label>
+          <textarea
+            value={template.description || ''}
+            onChange={(e) => setTemplate(prev => ({ ...prev, description: e.target.value }))}
+            style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px', minHeight: '60px' }}
+            placeholder="Beschreibung der Vorlage (optional)"
+          />
+        </div>
+
+        <div>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+            <input
+              type="checkbox"
+              checked={template.isDefault}
+              onChange={(e) => setTemplate(prev => ({ ...prev, isDefault: e.target.checked }))}
+            />
+            Als Standardvorlage festlegen
+          </label>
+        </div>
+      </div>
+
+      {/* Schichten pro Tag */}
+      <div>
+        <h2 style={{ marginBottom: '20px' }}>Schichten pro Wochentag</h2>
+        <div style={{ display: 'grid', gap: '20px' }}>
+          {DEFAULT_DAYS.map(day => (
+            <ShiftDayEditor
+              key={day.id}
+              day={day}
+              shifts={template.shifts.filter(s => s.dayOfWeek === day.id)}
+              onAddShift={() => addShift(day.id)}
+              onUpdateShift={updateShift}
+              onRemoveShift={removeShift}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ShiftTemplateEditor;

frontend/src/pages/ShiftTemplates/ShiftTemplateList.tsx

@@ -0,0 +1,118 @@
+// frontend/src/pages/ShiftTemplates/ShiftTemplateList.tsx
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { ShiftTemplate } from '../../types/shiftTemplate';
+import { shiftTemplateService } from '../../services/shiftTemplateService';
+import { useAuth } from '../../contexts/AuthContext';
+
+const ShiftTemplateList: React.FC = () => {
+  const [templates, setTemplates] = useState<ShiftTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { hasRole } = useAuth();
+
+  useEffect(() => {
+    loadTemplates();
+  }, []);
+
+  const loadTemplates = async () => {
+    try {
+      const data = await shiftTemplateService.getTemplates();
+      setTemplates(data);
+    } catch (error) {
+      console.error('Fehler:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!window.confirm('Vorlage wirklich löschen?')) return;
+    
+    try {
+      await shiftTemplateService.deleteTemplate(id);
+      setTemplates(templates.filter(t => t.id !== id));
+    } catch (error) {
+      console.error('Löschen fehlgeschlagen:', error);
+    }
+  };
+
+  if (loading) return <div>Lade Vorlagen...</div>;
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+        <h1>Schichtplan Vorlagen</h1>
+        {hasRole(['admin', 'instandhalter']) && (
+          <Link to="/shift-templates/new">
+            <button style={{ padding: '10px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px' }}>
+              Neue Vorlage
+            </button>
+          </Link>
+        )}
+      </div>
+
+      <div style={{ display: 'grid', gap: '15px' }}>
+        {templates.map(template => (
+          <div key={template.id} style={{ 
+            border: '1px solid #ddd', 
+            padding: '15px', 
+            borderRadius: '8px',
+            backgroundColor: '#f9f9f9'
+          }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <div>
+                <h3 style={{ margin: '0 0 5px 0' }}>{template.name}</h3>
+                {template.description && (
+                  <p style={{ margin: '0 0 10px 0', color: '#666' }}>{template.description}</p>
+                )}
+                <div style={{ fontSize: '14px', color: '#888' }}>
+                  {template.shifts.length} Schichttypen • Erstellt am {new Date(template.createdAt).toLocaleDateString('de-DE')}
+                  {template.isDefault && <span style={{ color: 'green', marginLeft: '10px' }}>• Standard</span>}
+                </div>
+              </div>
+              
+              <div style={{ display: 'flex', gap: '10px' }}>
+                <Link to={`/shift-templates/${template.id}`}>
+                  <button style={{ padding: '5px 10px', border: '1px solid #007bff', color: '#007bff', background: 'white' }}>
+                    {hasRole(['admin', 'instandhalter']) ? 'Bearbeiten' : 'Ansehen'}
+                  </button>
+                </Link>
+                
+                {hasRole(['admin', 'instandhalter']) && (
+                  <>
+                    <Link to={`/shift-plans/new?template=${template.id}`}>
+                      <button style={{ padding: '5px 10px', backgroundColor: '#28a745', color: 'white', border: 'none' }}>
+                        Verwenden
+                      </button>
+                    </Link>
+                    <button 
+                      onClick={() => handleDelete(template.id)}
+                      style={{ padding: '5px 10px', backgroundColor: '#dc3545', color: 'white', border: 'none' }}
+                    >
+                      Löschen
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+        
+        {templates.length === 0 && (
+          <div style={{ textAlign: 'center', padding: '40px', color: '#666' }}>
+            <p>Noch keine Vorlagen vorhanden.</p>
+            {hasRole(['admin', 'instandhalter']) && (
+              <Link to="/shift-templates/new">
+                <button style={{ padding: '10px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px' }}>
+                  Erste Vorlage erstellen
+                </button>
+              </Link>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ShiftTemplateList;

frontend/src/pages/ShiftTemplates/components/ShiftDayEditor.tsx

@@ -0,0 +1,112 @@
+// frontend/src/pages/ShiftTemplates/components/ShiftDayEditor.tsx
+import React from 'react';
+import { TemplateShift } from '../../../types/shiftTemplate';
+
+interface ShiftDayEditorProps {
+  day: { id: number; name: string };
+  shifts: TemplateShift[];
+  onAddShift: () => void;
+  onUpdateShift: (shiftId: string, updates: Partial<TemplateShift>) => void;
+  onRemoveShift: (shiftId: string) => void;
+}
+
+const ShiftDayEditor: React.FC<ShiftDayEditorProps> = ({
+  day,
+  shifts,
+  onAddShift,
+  onUpdateShift,
+  onRemoveShift
+}) => {
+  return (
+    <div style={{ border: '1px solid #e0e0e0', borderRadius: '8px', padding: '20px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
+        <h3 style={{ margin: 0 }}>{day.name}</h3>
+        <button
+          onClick={onAddShift}
+          style={{ padding: '8px 16px', backgroundColor: '#28a745', color: 'white', border: 'none', borderRadius: '4px' }}
+        >
+          Schicht hinzufügen
+        </button>
+      </div>
+
+      {shifts.length === 0 ? (
+        <div style={{ textAlign: 'center', padding: '20px', color: '#999', fontStyle: 'italic' }}>
+          Keine Schichten für {day.name}
+        </div>
+      ) : (
+        <div style={{ display: 'grid', gap: '15px' }}>
+          {shifts.map((shift, index) => (
+            <div key={shift.id} style={{ 
+              display: 'grid', 
+              gridTemplateColumns: '2fr 1fr 1fr 1fr auto',
+              gap: '10px',
+              alignItems: 'center',
+              padding: '15px',
+              border: '1px solid #f0f0f0',
+              borderRadius: '4px',
+              backgroundColor: '#fafafa'
+            }}>
+              {/* Schicht Name */}
+              <div>
+                <input
+                  type="text"
+                  value={shift.name}
+                  onChange={(e) => onUpdateShift(shift.id, { name: e.target.value })}
+                  placeholder="Schichtname"
+                  style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+                />
+              </div>
+
+              {/* Startzeit */}
+              <div>
+                <label style={{ fontSize: '12px', display: 'block', marginBottom: '2px' }}>Start</label>
+                <input
+                  type="time"
+                  value={shift.startTime}
+                  onChange={(e) => onUpdateShift(shift.id, { startTime: e.target.value })}
+                  style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+                />
+              </div>
+
+              {/* Endzeit */}
+              <div>
+                <label style={{ fontSize: '12px', display: 'block', marginBottom: '2px' }}>Ende</label>
+                <input
+                  type="time"
+                  value={shift.endTime}
+                  onChange={(e) => onUpdateShift(shift.id, { endTime: e.target.value })}
+                  style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+                />
+              </div>
+
+              {/* Benötigte Mitarbeiter */}
+              <div>
+                <label style={{ fontSize: '12px', display: 'block', marginBottom: '2px' }}>Mitarbeiter</label>
+                <input
+                  type="number"
+                  min="1"
+                  value={shift.requiredEmployees}
+                  onChange={(e) => onUpdateShift(shift.id, { requiredEmployees: parseInt(e.target.value) || 1 })}
+                  style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+                />
+              </div>
+
+              {/* Löschen Button */}
+              <div>
+                <button
+                  onClick={() => onRemoveShift(shift.id)}
+                  style={{ padding: '8px 12px', backgroundColor: '#dc3545', color: 'white', border: 'none', borderRadius: '4px' }}
+                  title="Schicht löschen"
+                >
+                  ×
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ShiftDayEditor;

frontend/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

frontend/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/services/authService.ts

@@ -0,0 +1,100 @@
+// frontend/src/services/authService.ts
+const API_BASE = 'http://localhost:3001/api';
+
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface RegisterRequest {
+  email: string;
+  password: string;
+  name: string;
+  role?: string;
+}
+
+export interface AuthResponse {
+  user: User;
+  token: string;
+  expiresIn: string;
+}
+
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  role: 'admin' | 'instandhalter' | 'user';
+  createdAt: string;
+}
+
+class AuthService {
+  private token: string | null = null;
+
+  async login(credentials: LoginRequest): Promise<AuthResponse> {
+    const response = await fetch(`${API_BASE}/auth/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(credentials)
+    });
+
+    if (!response.ok) {
+      throw new Error('Login fehlgeschlagen');
+    }
+
+    const data: AuthResponse = await response.json();
+    this.token = data.token;
+    localStorage.setItem('token', data.token);
+    localStorage.setItem('user', JSON.stringify(data.user));
+    
+    return data;
+  }
+
+  async register(userData: RegisterRequest): Promise<AuthResponse> {
+    const response = await fetch(`${API_BASE}/auth/register`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(userData)
+    });
+
+    if (!response.ok) {
+      throw new Error('Registrierung fehlgeschlagen');
+    }
+
+    const data: AuthResponse = await response.json();
+    this.token = data.token;
+    localStorage.setItem('token', data.token);
+    localStorage.setItem('user', JSON.stringify(data.user));
+    
+    return data;
+  }
+
+  logout(): void {
+    this.token = null;
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+  }
+
+  getToken(): string | null {
+    if (!this.token) {
+      this.token = localStorage.getItem('token');
+    }
+    return this.token;
+  }
+
+  getCurrentUser(): User | null {
+    const userStr = localStorage.getItem('user');
+    return userStr ? JSON.parse(userStr) : null;
+  }
+
+  isAuthenticated(): boolean {
+    return this.getToken() !== null;
+  }
+
+  // Für API Calls mit Authentication
+  getAuthHeaders(): HeadersInit {
+    const token = this.getToken();
+    return token ? { 'Authorization': `Bearer ${token}` } : {};
+  }
+}
+
+export const authService = new AuthService();

frontend/src/services/shiftTemplateService.ts

@@ -0,0 +1,104 @@
+// frontend/src/services/shiftTemplateService.ts
+import { ShiftTemplate, TemplateShift } from '../types/shiftTemplate';
+import { authService } from './authService';
+
+const API_BASE = 'http://localhost:3001/api/shift-templates';
+
+export const shiftTemplateService = {
+  async getTemplates(): Promise<ShiftTemplate[]> {
+    const response = await fetch(API_BASE, {
+      headers: {
+        'Content-Type': 'application/json',
+        ...authService.getAuthHeaders()
+      }
+    });
+    
+    if (!response.ok) {
+      if (response.status === 401) {
+        authService.logout();
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      throw new Error('Fehler beim Laden der Vorlagen');
+    }
+    
+    return response.json();
+  },
+
+  async getTemplate(id: string): Promise<ShiftTemplate> {
+    const response = await fetch(`${API_BASE}/${id}`, {
+      headers: {
+        'Content-Type': 'application/json',
+        ...authService.getAuthHeaders()
+      }
+    });
+    
+    if (!response.ok) {
+      if (response.status === 401) {
+        authService.logout();
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      throw new Error('Vorlage nicht gefunden');
+    }
+    
+    return response.json();
+  },
+
+  async createTemplate(template: Omit<ShiftTemplate, 'id' | 'createdAt' | 'createdBy'>): Promise<ShiftTemplate> {
+    const response = await fetch(API_BASE, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...authService.getAuthHeaders()
+      },
+      body: JSON.stringify(template)
+    });
+    
+    if (!response.ok) {
+      if (response.status === 401) {
+        authService.logout();
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      throw new Error('Fehler beim Erstellen der Vorlage');
+    }
+    
+    return response.json();
+  },
+
+  async updateTemplate(id: string, template: Partial<ShiftTemplate>): Promise<ShiftTemplate> {
+    const response = await fetch(`${API_BASE}/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        ...authService.getAuthHeaders()
+      },
+      body: JSON.stringify(template)
+    });
+    
+    if (!response.ok) {
+      if (response.status === 401) {
+        authService.logout();
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      throw new Error('Fehler beim Aktualisieren der Vorlage');
+    }
+    
+    return response.json();
+  },
+
+  async deleteTemplate(id: string): Promise<void> {
+    const response = await fetch(`${API_BASE}/${id}`, {
+      method: 'DELETE',
+      headers: {
+        ...authService.getAuthHeaders()
+      }
+    });
+    
+    if (!response.ok) {
+      if (response.status === 401) {
+        authService.logout();
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      throw new Error('Fehler beim Löschen der Vorlage');
+    }
+  }
+};

frontend/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

frontend/src/types/shiftTemplate.ts

@@ -0,0 +1,30 @@
+// frontend/src/types/shiftTemplate.ts
+export interface ShiftTemplate {
+  id: string;
+  name: string;
+  description?: string;
+  shifts: TemplateShift[];
+  createdBy: string;
+  createdAt: string;
+  isDefault: boolean;
+}
+
+export interface TemplateShift {
+  id: string;
+  dayOfWeek: number; // 0-6 (Sonntag=0, Montag=1, ...)
+  name: string;
+  startTime: string; // "08:00"
+  endTime: string;   // "12:00"
+  requiredEmployees: number;
+  color?: string; // Für visuelle Darstellung
+}
+
+export const DEFAULT_DAYS = [
+  { id: 1, name: 'Montag' },
+  { id: 2, name: 'Dienstag' },
+  { id: 3, name: 'Donnerstag' },
+  { id: 4, name: 'Mittwoch' },
+  { id: 5, name: 'Freitag' },
+  { id: 6, name: 'Samstag' },
+  { id: 0, name: 'Sonntag' }
+];

frontend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "ignoreDeprecations": "6.0",
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}