changed from SolveWithSolutionCallback to Solver as of OR-Tools version change

README.md

@@ -1,6 +1,91 @@
 # Schichtenplaner
-Aufteilung der Schichten unter Mitarbeitern
 
+A web application for planning and distributing work shifts among employees. Manage your team's schedules, handle employee availability, and automatically generate optimized shift plans.
+
+## Features
+
+- Employee management with availability tracking
+- Shift plan creation and management
+- Automated scheduling optimization using constraint programming (OR-Tools CP-SAT)
+- Excel export functionality
+- User authentication with JWT
+- Responsive web interface
+
+---
+
+## For Developers
+
+### Tech Stack
+
+**Frontend:**
+- React 19 with TypeScript
+- Vite 6 (build tool & dev server)
+- React Router DOM (routing)
+- date-fns (date handling)
+- Framer Motion (animations)
+
+**Backend:**
+- Express.js with TypeScript
+- SQLite3 (database)
+- JWT authentication
+- Helmet (security headers)
+- express-rate-limit (rate limiting)
+- OR-Tools CP-SAT (Python - scheduling optimization)
+- ExcelJS (Excel exports)
+
+**Infrastructure:**
+- npm workspaces (monorepo)
+- Docker support
+
+### Prerequisites
+
+- Node.js (v18+)
+- Python 3 with OR-Tools (`pip install ortools`)
+- npm
+
+### Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server (frontend + backend)
+npm run dev
+
+# Build all packages
+npm run build:all
+```
+
+### Project Structure
+
+```
+schichtenplaner/
+├── frontend/     # React application
+├── backend/      # Express API server
+├── premium/      # Premium features (optional)
+└── package.json  # Root monorepo config
+```
+
+### Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start both frontend and backend in development mode |
+| `npm run dev:frontend` | Start frontend only |
+| `npm run dev:backend` | Start backend only |
+| `npm run build:all` | Build frontend and backend |
+| `npm run docker:build` | Build Docker image |
+| `npm run docker:run` | Run Docker container |
+
+### Environment Variables
+
+The backend requires these environment variables in production:
+- `NODE_ENV` - Set to `production` or `development`
+- `JWT_SECRET` - Secret key for JWT token signing
+- `TRUST_PROXY_ENABLED` - Enable/disable proxy trust (default: true)
+- `TRUSTED_PROXY_IPS` - Comma-separated list of trusted proxy IPs
+
+---
 
 ## 🧾 License
 

backend/src/controllers/shiftPlanController.ts

@@ -472,8 +472,8 @@ export const updateShiftPlan = async (req: Request, res: Response): Promise<void
       // Update plan
       if (name !== undefined || description !== undefined || startDate !== undefined || endDate !== undefined || status !== undefined) {
         await db.run(
-          `UPDATE shift_plans 
-           SET name = COALESCE(?, name), 
+          `UPDATE shift_plans
+           SET name = COALESCE(?, name),
                description = COALESCE(?, description),
                start_date = COALESCE(?, start_date),
                end_date = COALESCE(?, end_date),
@@ -483,35 +483,90 @@ export const updateShiftPlan = async (req: Request, res: Response): Promise<void
         );
       }
 
-      // If updating time slots, replace all time slots
+      // If updating time slots, use ID-preserving logic
       if (timeSlots) {
-        // Delete existing time slots
-        await db.run('DELETE FROM time_slots WHERE plan_id = ?', [id]);
+        const existingSlots = await db.all<any>('SELECT id FROM time_slots WHERE plan_id = ?', [id]);
+        const existingIds = new Set(existingSlots.map(s => s.id));
+        const incomingIds = new Set(timeSlots.filter((ts: any) => ts.id).map((ts: any) => ts.id));
 
-        // Insert new time slots - always generate new IDs
         for (const timeSlot of timeSlots) {
-          const timeSlotId = uuidv4();
-          await db.run(
-            `INSERT INTO time_slots (id, plan_id, name, start_time, end_time, description) 
-             VALUES (?, ?, ?, ?, ?, ?)`,
-            [timeSlotId, id, timeSlot.name, timeSlot.startTime, timeSlot.endTime, timeSlot.description || '']
-          );
+          if ((timeSlot as any).id && existingIds.has((timeSlot as any).id)) {
+            // UPDATE existing time slot - preserve ID
+            await db.run(
+              `UPDATE time_slots SET name = ?, start_time = ?, end_time = ?, description = ? WHERE id = ?`,
+              [timeSlot.name, timeSlot.startTime, timeSlot.endTime, timeSlot.description || '', (timeSlot as any).id]
+            );
+          } else {
+            // INSERT new time slot
+            const newId = (timeSlot as any).id || uuidv4();
+            await db.run(
+              `INSERT INTO time_slots (id, plan_id, name, start_time, end_time, description)
+               VALUES (?, ?, ?, ?, ?, ?)`,
+              [newId, id, timeSlot.name, timeSlot.startTime, timeSlot.endTime, timeSlot.description || '']
+            );
+          }
+        }
+
+        // DELETE removed time slots (only if no shifts reference them)
+        for (const existingId of existingIds) {
+          if (!incomingIds.has(existingId)) {
+            const hasShifts = await db.get('SELECT 1 FROM shifts WHERE time_slot_id = ?', [existingId]);
+            if (hasShifts) {
+              await db.run('ROLLBACK');
+              res.status(400).json({
+                error: 'Cannot delete time slot',
+                message: `Time slot ${existingId} is referenced by shifts. Remove the shifts first.`
+              });
+              return;
+            }
+            await db.run('DELETE FROM time_slots WHERE id = ?', [existingId]);
+          }
         }
       }
 
-      // If updating shifts, replace all shifts
+      // If updating shifts, use ID-preserving logic
       if (shifts) {
-        // Delete existing shifts
-        await db.run('DELETE FROM shifts WHERE plan_id = ?', [id]);
+        const existingShifts = await db.all<any>('SELECT id FROM shifts WHERE plan_id = ?', [id]);
+        const existingShiftIds = new Set(existingShifts.map(s => s.id));
+        const incomingShiftIds = new Set(shifts.filter((s: any) => s.id).map((s: any) => s.id));
 
-        // Insert new shifts - use new timeSlotId (they should reference the newly created time slots)
         for (const shift of shifts) {
-          const shiftId = uuidv4();
-          await db.run(
-            `INSERT INTO shifts (id, plan_id, day_of_week, time_slot_id, required_employees, color) 
-             VALUES (?, ?, ?, ?, ?, ?)`,
-            [shiftId, id, shift.dayOfWeek, shift.timeSlotId, shift.requiredEmployees, shift.color || '#3498db']
+          // Validate time_slot_id exists
+          const timeSlotExists = await db.get(
+            'SELECT id FROM time_slots WHERE id = ? AND plan_id = ?',
+            [shift.timeSlotId, id]
           );
+          if (!timeSlotExists) {
+            await db.run('ROLLBACK');
+            res.status(400).json({
+              error: 'Invalid time slot',
+              message: `Time slot ${shift.timeSlotId} not found in this plan`
+            });
+            return;
+          }
+
+          if ((shift as any).id && existingShiftIds.has((shift as any).id)) {
+            // UPDATE existing shift - preserve ID
+            await db.run(
+              `UPDATE shifts SET day_of_week = ?, time_slot_id = ?, required_employees = ?, color = ? WHERE id = ?`,
+              [shift.dayOfWeek, shift.timeSlotId, shift.requiredEmployees, shift.color || '#3498db', (shift as any).id]
+            );
+          } else {
+            // INSERT new shift
+            const newId = (shift as any).id || uuidv4();
+            await db.run(
+              `INSERT INTO shifts (id, plan_id, day_of_week, time_slot_id, required_employees, color)
+               VALUES (?, ?, ?, ?, ?, ?)`,
+              [newId, id, shift.dayOfWeek, shift.timeSlotId, shift.requiredEmployees, shift.color || '#3498db']
+            );
+          }
+        }
+
+        // DELETE removed shifts
+        for (const existingShiftId of existingShiftIds) {
+          if (!incomingShiftIds.has(existingShiftId)) {
+            await db.run('DELETE FROM shifts WHERE id = ?', [existingShiftId]);
+          }
         }
       }
 
@@ -553,6 +608,247 @@ export const deleteShiftPlan = async (req: Request, res: Response): Promise<void
   }
 };
 
+// ===== GRANULAR TIME SLOT ENDPOINTS =====
+
+export const addTimeSlot = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+    const { name, startTime, endTime, description } = req.body;
+
+    // Check if plan exists
+    const existingPlan = await db.get('SELECT * FROM shift_plans WHERE id = ?', [id]);
+    if (!existingPlan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+
+    const timeSlotId = uuidv4();
+    await db.run(
+      `INSERT INTO time_slots (id, plan_id, name, start_time, end_time, description)
+       VALUES (?, ?, ?, ?, ?, ?)`,
+      [timeSlotId, id, name, startTime, endTime, description || '']
+    );
+
+    res.status(201).json({
+      id: timeSlotId,
+      planId: id,
+      name,
+      startTime,
+      endTime,
+      description: description || ''
+    });
+  } catch (error) {
+    console.error('Error adding time slot:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const updateTimeSlot = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id, slotId } = req.params;
+    const { name, startTime, endTime, description } = req.body;
+
+    // Check if time slot exists and belongs to this plan
+    const existingSlot = await db.get<any>(
+      'SELECT * FROM time_slots WHERE id = ? AND plan_id = ?',
+      [slotId, id]
+    );
+    if (!existingSlot) {
+      res.status(404).json({ error: 'Time slot not found in this plan' });
+      return;
+    }
+
+    await db.run(
+      `UPDATE time_slots
+       SET name = COALESCE(?, name),
+           start_time = COALESCE(?, start_time),
+           end_time = COALESCE(?, end_time),
+           description = COALESCE(?, description)
+       WHERE id = ?`,
+      [name, startTime, endTime, description, slotId]
+    );
+
+    const updatedSlot = await db.get<any>('SELECT * FROM time_slots WHERE id = ?', [slotId]);
+    res.json({
+      id: updatedSlot.id,
+      planId: updatedSlot.plan_id,
+      name: updatedSlot.name,
+      startTime: updatedSlot.start_time,
+      endTime: updatedSlot.end_time,
+      description: updatedSlot.description
+    });
+  } catch (error) {
+    console.error('Error updating time slot:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const deleteTimeSlot = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id, slotId } = req.params;
+
+    // Check if time slot exists and belongs to this plan
+    const existingSlot = await db.get(
+      'SELECT id FROM time_slots WHERE id = ? AND plan_id = ?',
+      [slotId, id]
+    );
+    if (!existingSlot) {
+      res.status(404).json({ error: 'Time slot not found in this plan' });
+      return;
+    }
+
+    // Check if any shifts reference this time slot
+    const dependentShifts = await db.all<any>(
+      'SELECT id FROM shifts WHERE plan_id = ? AND time_slot_id = ?',
+      [id, slotId]
+    );
+
+    if (dependentShifts.length > 0) {
+      res.status(400).json({
+        error: 'Cannot delete time slot',
+        message: `${dependentShifts.length} shift(s) reference this time slot. Remove them first.`,
+        dependentShiftIds: dependentShifts.map(s => s.id)
+      });
+      return;
+    }
+
+    await db.run('DELETE FROM time_slots WHERE id = ? AND plan_id = ?', [slotId, id]);
+    res.status(204).send();
+  } catch (error) {
+    console.error('Error deleting time slot:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+// ===== GRANULAR SHIFT ENDPOINTS =====
+
+export const addShift = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+    const { timeSlotId, dayOfWeek, requiredEmployees, color } = req.body;
+
+    // Check if plan exists
+    const existingPlan = await db.get('SELECT * FROM shift_plans WHERE id = ?', [id]);
+    if (!existingPlan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+
+    // Validate time slot exists and belongs to this plan
+    const timeSlot = await db.get(
+      'SELECT id FROM time_slots WHERE id = ? AND plan_id = ?',
+      [timeSlotId, id]
+    );
+    if (!timeSlot) {
+      res.status(400).json({ error: 'Time slot not found in this plan' });
+      return;
+    }
+
+    // Check for duplicate (same plan + time slot + day)
+    const existing = await db.get(
+      'SELECT id FROM shifts WHERE plan_id = ? AND time_slot_id = ? AND day_of_week = ?',
+      [id, timeSlotId, dayOfWeek]
+    );
+    if (existing) {
+      res.status(409).json({ error: 'Shift already exists for this day and time slot' });
+      return;
+    }
+
+    const shiftId = uuidv4();
+    await db.run(
+      `INSERT INTO shifts (id, plan_id, time_slot_id, day_of_week, required_employees, color)
+       VALUES (?, ?, ?, ?, ?, ?)`,
+      [shiftId, id, timeSlotId, dayOfWeek, requiredEmployees || 2, color || '#3498db']
+    );
+
+    res.status(201).json({
+      id: shiftId,
+      planId: id,
+      timeSlotId,
+      dayOfWeek,
+      requiredEmployees: requiredEmployees || 2,
+      color: color || '#3498db'
+    });
+  } catch (error) {
+    console.error('Error adding shift:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const updateShift = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id, shiftId } = req.params;
+    const { requiredEmployees, color, timeSlotId, dayOfWeek } = req.body;
+
+    // Check if shift exists and belongs to this plan
+    const existingShift = await db.get<any>(
+      'SELECT * FROM shifts WHERE id = ? AND plan_id = ?',
+      [shiftId, id]
+    );
+    if (!existingShift) {
+      res.status(404).json({ error: 'Shift not found in this plan' });
+      return;
+    }
+
+    // If changing time slot, validate it exists
+    if (timeSlotId) {
+      const timeSlot = await db.get(
+        'SELECT id FROM time_slots WHERE id = ? AND plan_id = ?',
+        [timeSlotId, id]
+      );
+      if (!timeSlot) {
+        res.status(400).json({ error: 'Time slot not found in this plan' });
+        return;
+      }
+    }
+
+    await db.run(
+      `UPDATE shifts
+       SET required_employees = COALESCE(?, required_employees),
+           color = COALESCE(?, color),
+           time_slot_id = COALESCE(?, time_slot_id),
+           day_of_week = COALESCE(?, day_of_week)
+       WHERE id = ?`,
+      [requiredEmployees, color, timeSlotId, dayOfWeek, shiftId]
+    );
+
+    const updatedShift = await db.get<any>('SELECT * FROM shifts WHERE id = ?', [shiftId]);
+    res.json({
+      id: updatedShift.id,
+      planId: updatedShift.plan_id,
+      timeSlotId: updatedShift.time_slot_id,
+      dayOfWeek: updatedShift.day_of_week,
+      requiredEmployees: updatedShift.required_employees,
+      color: updatedShift.color
+    });
+  } catch (error) {
+    console.error('Error updating shift:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
+export const deleteShift = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id, shiftId } = req.params;
+
+    // Check if shift exists and belongs to this plan
+    const existingShift = await db.get(
+      'SELECT id FROM shifts WHERE id = ? AND plan_id = ?',
+      [shiftId, id]
+    );
+    if (!existingShift) {
+      res.status(404).json({ error: 'Shift not found in this plan' });
+      return;
+    }
+
+    await db.run('DELETE FROM shifts WHERE id = ? AND plan_id = ?', [shiftId, id]);
+    res.status(204).send();
+  } catch (error) {
+    console.error('Error deleting shift:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+};
+
 // Helper function to get plan by ID
 async function getShiftPlanById(planId: string): Promise<any> {
   const plan = await db.get<any>(`

backend/src/middleware/rateLimit.ts

@@ -5,11 +5,11 @@ import { Request } from 'express';
 const getClientIP = (req: Request): string => {
   // Read from environment which header to trust
   const trustedHeader = process.env.TRUSTED_PROXY_HEADER || 'x-forwarded-for';
-  
+
   const forwarded = req.headers[trustedHeader];
   const realIp = req.headers['x-real-ip'];
   const cfConnectingIp = req.headers['cf-connecting-ip']; // Cloudflare
-  
+
   // If we have a forwarded header and trust proxy is configured
   if (forwarded) {
     if (Array.isArray(forwarded)) {
@@ -22,66 +22,96 @@ const getClientIP = (req: Request): string => {
       return firstIP;
     }
   }
-  
+
   // Cloudflare support
   if (cfConnectingIp) {
     console.log(`🔍 Using Cloudflare IP: ${cfConnectingIp}`);
     return cfConnectingIp.toString();
   }
-  
+
   // Fallback to x-real-ip
   if (realIp) {
     console.log(`🔍 Using x-real-ip: ${realIp}`);
     return realIp.toString();
   }
-  
+
   // Final fallback to connection remote address
   const remoteAddress = req.socket.remoteAddress || req.ip || 'unknown';
   console.log(`🔍 Using remote address: ${remoteAddress}`);
   return remoteAddress;
 };
 
+// Helper to check if an IP is a loopback address (IPv4 or IPv6)
+const isLoopbackAddress = (ip: string): boolean => {
+  // IPv4 loopback: 127.0.0.0/8
+  if (ip.startsWith('127.') || ip === 'localhost') {
+    return true;
+  }
+
+  // IPv6 loopback: ::1
+  // Also handle IPv4-mapped IPv6 addresses like ::ffff:127.0.0.1
+  if (ip === '::1' || ip === '::ffff:127.0.0.1') {
+    return true;
+  }
+
+  // Handle full IPv6 loopback notation
+  if (ip.toLowerCase().startsWith('0000:0000:0000:0000:0000:0000:0000:0001') ||
+    ip.toLowerCase() === '0:0:0:0:0:0:0:1') {
+    return true;
+  }
+
+  return false;
+};
+
 // Helper to check if request should be limited
 const shouldSkipLimit = (req: Request): boolean => {
   const skipPaths = [
-    '/api/health', 
+    '/api/health',
     '/api/setup/status',
-    '/api/auth/validate'
+    '/api/auth/validate',
+    '/api/auth/me',
   ];
-  
+
   // Skip for successful GET requests (data fetching)
   if (req.method === 'GET' && req.path.startsWith('/api/')) {
     return true;
   }
-  
+
+  const clientIP = getClientIP(req);
+
+  // Skip for loopback addresses (local development)
+  if (isLoopbackAddress(clientIP)) {
+    console.log(`✅ Loopback address skipped: ${clientIP}`);
+    return true;
+  }
+
   // Skip for whitelisted IPs from environment
   const whitelist = process.env.RATE_LIMIT_WHITELIST?.split(',') || [];
-  const clientIP = getClientIP(req);
   if (whitelist.includes(clientIP)) {
     console.log(`✅ IP whitelisted: ${clientIP}`);
     return true;
   }
-  
+
   return skipPaths.includes(req.path);
 };
 
 // Environment-based configuration
 const getRateLimitConfig = () => {
   const isProduction = process.env.NODE_ENV === 'production';
-  
+
   return {
     windowMs: parseInt(process.env.RATE_LIMIT_WINDOW_MS || '900000'), // 15 minutes default
-    max: isProduction 
-      ? parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '1000')  // Stricter in production
-      : parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '5000'), // More lenient in development
-    
+    max: isProduction
+      ? parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '50')  // Stricter in production
+      : parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '100'), // More lenient in development
+
     // Development-specific relaxations
     skip: (req: Request) => {
       // Skip all GET requests in development for easier testing
       if (!isProduction && req.method === 'GET') {
         return true;
       }
-      
+
       return shouldSkipLimit(req);
     }
   };
@@ -90,8 +120,8 @@ const getRateLimitConfig = () => {
 // Main API limiter - nur für POST/PUT/DELETE
 export const apiLimiter = rateLimit({
   ...getRateLimitConfig(),
-  message: { 
-    error: 'Zu viele Anfragen, bitte verlangsamen Sie Ihre Aktionen' 
+  message: {
+    error: 'Zu viele Anfragen, bitte verlangsamen Sie Ihre Aktionen'
   },
   standardHeaders: true,
   legacyHeaders: false,
@@ -99,8 +129,8 @@ export const apiLimiter = rateLimit({
   handler: (req, res) => {
     const clientIP = getClientIP(req);
     console.warn(`🚨 Rate limit exceeded for IP: ${clientIP}, Path: ${req.path}, Method: ${req.method}`);
-    
-    res.status(429).json({ 
+
+    res.status(429).json({
       error: 'Zu viele Anfragen',
       message: 'Bitte versuchen Sie es später erneut',
       retryAfter: '15 Minuten',
@@ -112,9 +142,9 @@ export const apiLimiter = rateLimit({
 // Strict limiter for auth endpoints
 export const authLimiter = rateLimit({
   windowMs: 15 * 60 * 1000,
-  max: parseInt(process.env.AUTH_RATE_LIMIT_MAX_REQUESTS || '100'),
-  message: { 
-    error: 'Zu viele Login-Versuche, bitte versuchen Sie es später erneut' 
+  max: parseInt(process.env.AUTH_RATE_LIMIT_MAX_REQUESTS || '50'),
+  message: {
+    error: 'Zu viele Login-Versuche, bitte versuchen Sie es später erneut'
   },
   standardHeaders: true,
   legacyHeaders: false,
@@ -123,8 +153,8 @@ export const authLimiter = rateLimit({
   handler: (req, res) => {
     const clientIP = getClientIP(req);
     console.warn(`🚨 Auth rate limit exceeded for IP: ${clientIP}`);
-    
-    res.status(429).json({ 
+
+    res.status(429).json({
       error: 'Zu viele Login-Versuche',
       message: 'Aus Sicherheitsgründen wurde Ihr Konto temporär gesperrt',
       retryAfter: '15 Minuten'
@@ -135,7 +165,7 @@ export const authLimiter = rateLimit({
 // Separate limiter for expensive endpoints
 export const expensiveEndpointLimiter = rateLimit({
   windowMs: 15 * 60 * 1000,
-  max: parseInt(process.env.EXPENSIVE_ENDPOINT_LIMIT || '100'),
+  max: parseInt(process.env.EXPENSIVE_ENDPOINT_LIMIT || '20'),
   message: {
     error: 'Zu viele Anfragen für diese Ressource'
   },

backend/src/middleware/validation.ts

@@ -388,6 +388,111 @@ export const validateCreateFromPreset = [
     .withMessage('isTemplate must be a boolean')
 ];
 
+// ===== TIME SLOT VALIDATION =====
+export const validateTimeSlot = [
+  body('name')
+    .isLength({ min: 1, max: 100 })
+    .withMessage('Time slot name must be between 1-100 characters')
+    .trim()
+    .escape(),
+
+  body('startTime')
+    .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
+    .withMessage('Start time must be in HH:MM format'),
+
+  body('endTime')
+    .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
+    .withMessage('End time must be in HH:MM format'),
+
+  body('description')
+    .optional()
+    .isLength({ max: 500 })
+    .withMessage('Description cannot exceed 500 characters')
+    .trim()
+    .escape()
+];
+
+export const validateTimeSlotUpdate = [
+  body('name')
+    .optional()
+    .isLength({ min: 1, max: 100 })
+    .withMessage('Time slot name must be between 1-100 characters')
+    .trim()
+    .escape(),
+
+  body('startTime')
+    .optional()
+    .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
+    .withMessage('Start time must be in HH:MM format'),
+
+  body('endTime')
+    .optional()
+    .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
+    .withMessage('End time must be in HH:MM format'),
+
+  body('description')
+    .optional()
+    .isLength({ max: 500 })
+    .withMessage('Description cannot exceed 500 characters')
+    .trim()
+    .escape()
+];
+
+export const validateSlotId = [
+  param('slotId')
+    .isUUID()
+    .withMessage('Slot ID must be a valid UUID')
+];
+
+// ===== SHIFT VALIDATION =====
+export const validateShiftCreate = [
+  body('timeSlotId')
+    .isUUID()
+    .withMessage('Time slot ID must be a valid UUID'),
+
+  body('dayOfWeek')
+    .isInt({ min: 1, max: 7 })
+    .withMessage('Day of week must be between 1-7 (Monday-Sunday)'),
+
+  body('requiredEmployees')
+    .optional()
+    .isInt({ min: 1, max: 10 })
+    .withMessage('Required employees must be between 1-10'),
+
+  body('color')
+    .optional()
+    .isHexColor()
+    .withMessage('Color must be a valid hex color')
+];
+
+export const validateShiftUpdate = [
+  body('timeSlotId')
+    .optional()
+    .isUUID()
+    .withMessage('Time slot ID must be a valid UUID'),
+
+  body('dayOfWeek')
+    .optional()
+    .isInt({ min: 1, max: 7 })
+    .withMessage('Day of week must be between 1-7 (Monday-Sunday)'),
+
+  body('requiredEmployees')
+    .optional()
+    .isInt({ min: 1, max: 10 })
+    .withMessage('Required employees must be between 1-10'),
+
+  body('color')
+    .optional()
+    .isHexColor()
+    .withMessage('Color must be a valid hex color')
+];
+
+export const validateShiftId = [
+  param('shiftId')
+    .isUUID()
+    .withMessage('Shift ID must be a valid UUID')
+];
+
 // ===== SCHEDULED SHIFTS VALIDATION =====
 export const validateScheduledShiftUpdate = [
   body('assignedEmployees')

backend/src/python-scripts/scheduling_solver.py

@@ -201,7 +201,7 @@ class UniversalSchedulingSolver:
             
             # Solve with callback
             callback = SimpleSolutionCallback()
-            status = self.solver.SolveWithSolutionCallback(self.model, callback)
+            status = self.solver.Solve(self.model, callback)
             
             result = self._format_solution(status, cp_vars, model_data)
             result['metadata']['constraintsAdded'] = constraints_added

backend/src/routes/shiftPlans.ts

@@ -1,22 +1,34 @@
 import express from 'express';
 import { authMiddleware, requireRole } from '../middleware/auth.js';
-import { 
-  getShiftPlans, 
-  getShiftPlan, 
-  createShiftPlan, 
-  updateShiftPlan, 
+import {
+  getShiftPlans,
+  getShiftPlan,
+  createShiftPlan,
+  updateShiftPlan,
   deleteShiftPlan,
   createFromPreset,
   clearAssignments,
   exportShiftPlanToExcel,
-  exportShiftPlanToPDF
+  exportShiftPlanToPDF,
+  addTimeSlot,
+  updateTimeSlot,
+  deleteTimeSlot,
+  addShift,
+  updateShift,
+  deleteShift
 } from '../controllers/shiftPlanController.js';
-import { 
-  validateShiftPlan, 
-  validateShiftPlanUpdate, 
-  validateCreateFromPreset, 
-  handleValidationErrors, 
-  validateId 
+import {
+  validateShiftPlan,
+  validateShiftPlanUpdate,
+  validateCreateFromPreset,
+  handleValidationErrors,
+  validateId,
+  validateTimeSlot,
+  validateTimeSlotUpdate,
+  validateShiftCreate,
+  validateShiftUpdate,
+  validateSlotId,
+  validateShiftId
 } from '../middleware/validation.js';
 
 const router = express.Router();
@@ -35,4 +47,14 @@ router.post('/:id/clear-assignments', validateId, handleValidationErrors, requir
 router.get('/:id/export/excel', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), exportShiftPlanToExcel);
 router.get('/:id/export/pdf', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), exportShiftPlanToPDF);
 
+// Time slot management
+router.post('/:id/time-slots', validateId, validateTimeSlot, handleValidationErrors, requireRole(['admin', 'maintenance']), addTimeSlot);
+router.put('/:id/time-slots/:slotId', validateId, validateSlotId, validateTimeSlotUpdate, handleValidationErrors, requireRole(['admin', 'maintenance']), updateTimeSlot);
+router.delete('/:id/time-slots/:slotId', validateId, validateSlotId, handleValidationErrors, requireRole(['admin', 'maintenance']), deleteTimeSlot);
+
+// Shift management
+router.post('/:id/shifts', validateId, validateShiftCreate, handleValidationErrors, requireRole(['admin', 'maintenance']), addShift);
+router.patch('/:id/shifts/:shiftId', validateId, validateShiftId, validateShiftUpdate, handleValidationErrors, requireRole(['admin', 'maintenance']), updateShift);
+router.delete('/:id/shifts/:shiftId', validateId, validateShiftId, handleValidationErrors, requireRole(['admin', 'maintenance']), deleteShift);
+
 export default router;

frontend/src/components/Modal/Modal.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect } from 'react';
+import { BUTTON_COLORS } from '../../utils/buttonStyles';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  width?: string;
+}
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  width = '400px'
+}) => {
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const overlayStyle: React.CSSProperties = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 9999,
+  };
+
+  const modalStyle: React.CSSProperties = {
+    backgroundColor: 'white',
+    borderRadius: '8px',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.2)',
+    width: width,
+    maxWidth: '90vw',
+    maxHeight: '90vh',
+    overflow: 'auto',
+  };
+
+  const headerStyle: React.CSSProperties = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '16px 20px',
+    borderBottom: '1px solid #dee2e6',
+    backgroundColor: BUTTON_COLORS.primary,
+    color: 'white',
+    borderRadius: '8px 8px 0 0',
+  };
+
+  const titleStyle: React.CSSProperties = {
+    margin: 0,
+    fontSize: '18px',
+    fontWeight: 'bold',
+  };
+
+  const closeButtonStyle: React.CSSProperties = {
+    background: 'none',
+    border: 'none',
+    color: 'white',
+    fontSize: '24px',
+    cursor: 'pointer',
+    padding: '0',
+    lineHeight: 1,
+    opacity: 0.8,
+  };
+
+  const contentStyle: React.CSSProperties = {
+    padding: '20px',
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div style={overlayStyle} onClick={handleOverlayClick}>
+      <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
+        <div style={headerStyle}>
+          <h3 style={titleStyle}>{title}</h3>
+          <button
+            onClick={onClose}
+            style={closeButtonStyle}
+            onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; }}
+            onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.8'; }}
+          >
+            &times;
+          </button>
+        </div>
+        <div style={contentStyle}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

frontend/src/pages/Employees/components/EmployeeList.tsx

@@ -4,6 +4,7 @@ import { ROLE_CONFIG, EMPLOYEE_TYPE_CONFIG } from '../../../models/defaults/empl
 import { Employee } from '../../../models/Employee';
 import { useAuth } from '../../../contexts/AuthContext';
 import { useNotification } from '../../../contexts/NotificationContext';
+import { ICONS, iconButtonStyle, BUTTON_COLORS } from '../../../utils/buttonStyles';
 
 interface EmployeeListProps {
   employees: Employee[];
@@ -455,40 +456,20 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                 {/* Verfügbarkeit Button */}
                 <button
                   onClick={() => onManageAvailability(employee)}
-                  style={{
-                    padding: '6px 8px',
-                    backgroundColor: '#3498db',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    cursor: 'pointer',
-                    fontSize: '12px',
-                    minWidth: '32px',
-                    height: '32px'
-                  }}
+                  style={iconButtonStyle(BUTTON_COLORS.info, false)}
                   title="Verfügbarkeit verwalten"
                 >
-                  📅
+                  {ICONS.calendar}
                 </button>
 
                 {/* Bearbeiten Button */}
                 {canEdit && (
                   <button
                     onClick={() => onEdit(employee)}
-                    style={{
-                      padding: '6px 8px',
-                      backgroundColor: '#f39c12',
-                      color: 'white',
-                      border: 'none',
-                      borderRadius: '4px',
-                      cursor: 'pointer',
-                      fontSize: '12px',
-                      minWidth: '32px',
-                      height: '32px'
-                    }}
+                    style={iconButtonStyle(BUTTON_COLORS.edit, false)}
                     title="Mitarbeiter bearbeiten"
                   >
-                    ✏️
+                    {ICONS.edit}
                   </button>
                 )}
 
@@ -496,20 +477,10 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                 {canDelete && (
                   <button
                     onClick={() => handleDeleteClick(employee)}
-                    style={{
-                      padding: '6px 8px',
-                      backgroundColor: '#e74c3c',
-                      color: 'white',
-                      border: 'none',
-                      borderRadius: '4px',
-                      cursor: 'pointer',
-                      fontSize: '12px',
-                      minWidth: '32px',
-                      height: '32px'
-                    }}
+                    style={iconButtonStyle(BUTTON_COLORS.delete, false)}
                     title="Mitarbeiter löschen"
                   >
-                    🗑️
+                    {ICONS.delete}
                   </button>
                 )}
 

frontend/src/pages/ShiftPlans/ShiftPlanEdit.tsx

@@ -1,33 +1,67 @@
 // frontend/src/pages/ShiftPlans/ShiftPlanEdit.tsx
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { shiftPlanService } from '../../services/shiftPlanService';
-import { ShiftPlan, Shift, ScheduledShift } from '../../models/ShiftPlan';
+import { ShiftPlan, Shift, TimeSlot } from '../../models/ShiftPlan';
 import { useNotification } from '../../contexts/NotificationContext';
 import { useBackendValidation } from '../../hooks/useBackendValidation';
+import { formatTime } from '../../utils/foramatters';
+import {
+  ICONS,
+  smallDeleteButton,
+  addTextButton,
+  cancelTextButton,
+  addOutlineButton,
+  BUTTON_COLORS,
+} from '../../utils/buttonStyles';
+import ShiftCell from './components/ShiftCell';
+import TimeSlotEditor from './components/TimeSlotEditor';
+import AddDayButton from './components/AddDayButton';
+
+const DAYS_OF_WEEK = [
+  { id: 1, name: 'Montag', shortName: 'Mo' },
+  { id: 2, name: 'Dienstag', shortName: 'Di' },
+  { id: 3, name: 'Mittwoch', shortName: 'Mi' },
+  { id: 4, name: 'Donnerstag', shortName: 'Do' },
+  { id: 5, name: 'Freitag', shortName: 'Fr' },
+  { id: 6, name: 'Samstag', shortName: 'Sa' },
+  { id: 7, name: 'Sonntag', shortName: 'So' },
+];
 
 const ShiftPlanEdit: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const { showNotification, confirmDialog } = useNotification();
   const { executeWithValidation, isSubmitting } = useBackendValidation();
-  
+
   const [shiftPlan, setShiftPlan] = useState<ShiftPlan | null>(null);
   const [loading, setLoading] = useState(true);
-  const [editingShift, setEditingShift] = useState<Shift | null>(null);
-  const [newShift, setNewShift] = useState<Partial<Shift>>({
-    timeSlotId: '',
-    dayOfWeek: 1,
-    requiredEmployees: 1
+  const [activeDays, setActiveDays] = useState<number[]>([]);
+
+  // New time slot form state
+  const [showAddTimeSlot, setShowAddTimeSlot] = useState(false);
+  const [newTimeSlot, setNewTimeSlot] = useState({
+    name: '',
+    startTime: '08:00',
+    endTime: '12:00',
+    description: '',
   });
 
   useEffect(() => {
     loadShiftPlan();
   }, [id]);
 
+  useEffect(() => {
+    if (shiftPlan) {
+      // Determine active days from existing shifts
+      const daysWithShifts = new Set(shiftPlan.shifts.map(s => s.dayOfWeek));
+      setActiveDays(Array.from(daysWithShifts).sort((a, b) => a - b));
+    }
+  }, [shiftPlan]);
+
   const loadShiftPlan = async () => {
     if (!id) return;
-    
+
     await executeWithValidation(async () => {
       try {
         const plan = await shiftPlanService.getShiftPlan(id);
@@ -41,68 +75,223 @@ const ShiftPlanEdit: React.FC = () => {
     });
   };
 
-  const handleUpdateShift = async (shift: Shift) => {
-    if (!shiftPlan || !id) return;
-    
-    await executeWithValidation(async () => {
-      // Update logic here - will be implemented when backend API is available
-      // For now, just simulate success
-      console.log('Updating shift:', shift);
-      
-      loadShiftPlan();
-      setEditingShift(null);
-      
-      showNotification({
-        type: 'success',
-        title: 'Erfolg',
-        message: 'Schicht wurde erfolgreich aktualisiert.'
-      });
-    });
+  // Get shift for a specific cell
+  const getShift = (timeSlotId: string, dayOfWeek: number): Shift | null => {
+    if (!shiftPlan) return null;
+    return shiftPlan.shifts.find(
+      s => s.timeSlotId === timeSlotId && s.dayOfWeek === dayOfWeek
+    ) || null;
   };
 
-  const handleAddShift = async () => {
-    if (!shiftPlan || !id) return;
-    
-    // Basic frontend validation only
-    if (!newShift.timeSlotId) {
-      showNotification({
-        type: 'error',
-        title: 'Fehlende Angaben',
-        message: 'Bitte wählen Sie einen Zeit-Slot aus.'
-      });
-      return;
+  // Count shifts for a time slot
+  const getShiftsCountForSlot = (slotId: string): number => {
+    if (!shiftPlan) return 0;
+    return shiftPlan.shifts.filter(s => s.timeSlotId === slotId).length;
+  };
+
+  // Sort time slots by start time (early to late)
+  const sortedTimeSlots = useMemo(() => {
+    if (!shiftPlan) return [];
+
+    const timeToMinutes = (timeStr: string): number => {
+      if (!timeStr) return 0;
+      const [hours, minutes] = timeStr.split(':').map(Number);
+      return hours * 60 + minutes;
+    };
+
+    return [...shiftPlan.timeSlots].sort((a, b) => {
+      const minutesA = timeToMinutes(a.startTime);
+      const minutesB = timeToMinutes(b.startTime);
+      return minutesA - minutesB;
+    });
+  }, [shiftPlan]);
+
+  // Add a new day column
+  const handleAddDay = (dayOfWeek: number) => {
+    if (!activeDays.includes(dayOfWeek)) {
+      setActiveDays([...activeDays, dayOfWeek].sort((a, b) => a - b));
     }
-    
-    if (!newShift.requiredEmployees || newShift.requiredEmployees < 1) {
+  };
+
+  // Remove a day column (delete all shifts for that day)
+  const handleRemoveDay = async (dayOfWeek: number) => {
+    if (!shiftPlan || !id) return;
+
+    const shiftsForDay = shiftPlan.shifts.filter(s => s.dayOfWeek === dayOfWeek);
+
+    if (shiftsForDay.length > 0) {
+      const confirmed = await confirmDialog({
+        title: 'Tag entfernen',
+        message: `Dieser Tag enthält ${shiftsForDay.length} Schicht(en). Alle Schichten für diesen Tag werden gelöscht. Fortfahren?`,
+        confirmText: 'Löschen',
+        cancelText: 'Abbrechen',
+        type: 'warning'
+      });
+
+      if (!confirmed) return;
+
+      // Delete all shifts for this day
+      await executeWithValidation(async () => {
+        for (const shift of shiftsForDay) {
+          await shiftPlanService.deleteShift(id, shift.id);
+        }
+        await loadShiftPlan();
+        showNotification({
+          type: 'success',
+          title: 'Erfolg',
+          message: `Alle Schichten für diesen Tag wurden gelöscht.`
+        });
+      });
+    }
+
+    setActiveDays(activeDays.filter(d => d !== dayOfWeek));
+  };
+
+  // Add a new time slot
+  const handleAddTimeSlot = async () => {
+    if (!id || !newTimeSlot.name || !newTimeSlot.startTime || !newTimeSlot.endTime) {
       showNotification({
         type: 'error',
         title: 'Fehlende Angaben',
-        message: 'Bitte geben Sie die Anzahl der benötigten Mitarbeiter an.'
+        message: 'Bitte füllen Sie alle Pflichtfelder aus.'
       });
       return;
     }
 
     await executeWithValidation(async () => {
-      // Add shift logic here - will be implemented when backend API is available
-      // For now, just simulate success
-      console.log('Adding shift:', newShift);
-      
+      await shiftPlanService.addTimeSlot(id, {
+        name: newTimeSlot.name,
+        startTime: newTimeSlot.startTime,
+        endTime: newTimeSlot.endTime,
+        description: newTimeSlot.description || undefined,
+      });
+
       showNotification({
         type: 'success',
         title: 'Erfolg',
-        message: 'Neue Schicht wurde hinzugefügt.'
+        message: 'Zeit-Slot wurde hinzugefügt.'
       });
-      
-      setNewShift({
-        timeSlotId: '',
-        dayOfWeek: 1,
-        requiredEmployees: 1
-      });
-      loadShiftPlan();
+
+      setNewTimeSlot({ name: '', startTime: '08:00', endTime: '12:00', description: '' });
+      setShowAddTimeSlot(false);
+      await loadShiftPlan();
     });
   };
 
+  // Update a time slot
+  const handleUpdateTimeSlot = async (
+    slot: TimeSlot,
+    name: string,
+    startTime: string,
+    endTime: string,
+    description?: string
+  ) => {
+    if (!id) return;
+
+    await executeWithValidation(async () => {
+      await shiftPlanService.updateTimeSlot(id, slot.id, {
+        name,
+        startTime,
+        endTime,
+        description,
+      });
+
+      showNotification({
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Zeit-Slot wurde aktualisiert.'
+      });
+
+      await loadShiftPlan();
+    });
+  };
+
+  // Delete a time slot
+  const handleDeleteTimeSlot = async (slotId: string) => {
+    if (!id || !shiftPlan) return;
+
+    const shiftsCount = getShiftsCountForSlot(slotId);
+
+    const confirmed = await confirmDialog({
+      title: 'Zeit-Slot löschen',
+      message: shiftsCount > 0
+        ? `Dieser Zeit-Slot enthält ${shiftsCount} Schicht(en). Alle zugehörigen Schichten werden ebenfalls gelöscht. Fortfahren?`
+        : 'Möchten Sie diesen Zeit-Slot wirklich löschen?',
+      confirmText: 'Löschen',
+      cancelText: 'Abbrechen',
+      type: 'warning'
+    });
+
+    if (!confirmed) return;
+
+    await executeWithValidation(async () => {
+      await shiftPlanService.deleteTimeSlot(id, slotId);
+
+      showNotification({
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Zeit-Slot wurde gelöscht.'
+      });
+
+      await loadShiftPlan();
+    });
+  };
+
+  // Add a new shift
+  const handleAddShift = async (
+    dayOfWeek: number,
+    timeSlotId: string,
+    requiredEmployees: number,
+    color: string
+  ) => {
+    if (!id) return;
+
+    await executeWithValidation(async () => {
+      await shiftPlanService.addShift(id, {
+        dayOfWeek,
+        timeSlotId,
+        requiredEmployees,
+        color,
+      });
+
+      showNotification({
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Schicht wurde hinzugefügt.'
+      });
+
+      await loadShiftPlan();
+    });
+  };
+
+  // Update a shift
+  const handleUpdateShift = async (
+    shift: Shift,
+    requiredEmployees: number,
+    color: string
+  ) => {
+    if (!id) return;
+
+    await executeWithValidation(async () => {
+      await shiftPlanService.updateShift(id, shift.id, {
+        requiredEmployees,
+        color,
+      });
+
+      showNotification({
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Schicht wurde aktualisiert.'
+      });
+
+      await loadShiftPlan();
+    });
+  };
+
+  // Delete a shift
   const handleDeleteShift = async (shiftId: string) => {
+    if (!id) return;
+
     const confirmed = await confirmDialog({
       title: 'Schicht löschen',
       message: 'Möchten Sie diese Schicht wirklich löschen?',
@@ -114,20 +303,19 @@ const ShiftPlanEdit: React.FC = () => {
     if (!confirmed) return;
 
     await executeWithValidation(async () => {
-      // Delete logic here - will be implemented when backend API is available
-      // For now, just simulate success
-      console.log('Deleting shift:', shiftId);
-      
-      loadShiftPlan();
-      
+      await shiftPlanService.deleteShift(id, shiftId);
+
       showNotification({
         type: 'success',
         title: 'Erfolg',
-        message: 'Schicht wurde erfolgreich gelöscht.'
+        message: 'Schicht wurde gelöscht.'
       });
+
+      await loadShiftPlan();
     });
   };
 
+  // Publish the shift plan
   const handlePublish = async () => {
     if (!shiftPlan || !id) return;
 
@@ -136,21 +324,21 @@ const ShiftPlanEdit: React.FC = () => {
         ...shiftPlan,
         status: 'published'
       });
-      
+
       showNotification({
         type: 'success',
         title: 'Erfolg',
         message: 'Schichtplan wurde veröffentlicht.'
       });
-      
-      loadShiftPlan();
+
+      await loadShiftPlan();
     });
   };
 
   if (loading) {
     return (
-      <div style={{ 
-        textAlign: 'center', 
+      <div style={{
+        textAlign: 'center',
         padding: '40px',
         fontSize: '18px',
         color: '#666'
@@ -162,8 +350,8 @@ const ShiftPlanEdit: React.FC = () => {
 
   if (!shiftPlan) {
     return (
-      <div style={{ 
-        textAlign: 'center', 
+      <div style={{
+        textAlign: 'center',
         padding: '40px',
         fontSize: '18px',
         color: '#e74c3c'
@@ -173,34 +361,19 @@ const ShiftPlanEdit: React.FC = () => {
     );
   }
 
-  // Group shifts by dayOfWeek
-  const shiftsByDay = shiftPlan.shifts.reduce((acc, shift) => {
-    if (!acc[shift.dayOfWeek]) {
-      acc[shift.dayOfWeek] = [];
-    }
-    acc[shift.dayOfWeek].push(shift);
-    return acc;
-  }, {} as Record<number, typeof shiftPlan.shifts>);
-
-  const daysOfWeek = [
-    { id: 1, name: 'Montag' },
-    { id: 2, name: 'Dienstag' },
-    { id: 3, name: 'Mittwoch' },
-    { id: 4, name: 'Donnerstag' },
-    { id: 5, name: 'Freitag' },
-    { id: 6, name: 'Samstag' },
-    { id: 7, name: 'Sonntag' }
-  ];
+  const hasTimeSlots = shiftPlan.timeSlots.length > 0;
+  const hasActiveDays = activeDays.length > 0;
 
   return (
     <div style={{ padding: '20px' }}>
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'space-between', 
+      {/* Header */}
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: '30px' 
+        marginBottom: '30px'
       }}>
-        <h1>{shiftPlan.name} bearbeiten</h1>
+        <h1 style={{ margin: 0 }}>{shiftPlan.name} bearbeiten</h1>
         <div>
           {shiftPlan.status === 'draft' && (
             <button
@@ -238,214 +411,332 @@ const ShiftPlanEdit: React.FC = () => {
         </div>
       </div>
 
-      {/* Add new shift form */}
-      <div style={{
-        backgroundColor: 'white',
-        borderRadius: '8px',
-        padding: '20px',
-        marginBottom: '20px',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-      }}>
-        <h3>Neue Schicht hinzufügen</h3>
-        <div style={{ display: 'grid', gap: '15px', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
-          <div>
-            <label>Wochentag</label>
-            <select
-              value={newShift.dayOfWeek}
-              onChange={(e) => setNewShift({ ...newShift, dayOfWeek: parseInt(e.target.value) })}
-              style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
-              disabled={isSubmitting}
-            >
-              {daysOfWeek.map(day => (
-                <option key={day.id} value={day.id}>{day.name}</option>
-              ))}
-            </select>
+      {/* Empty State */}
+      {!hasTimeSlots && !hasActiveDays && (
+        <div style={{
+          backgroundColor: 'white',
+          borderRadius: '8px',
+          padding: '60px 40px',
+          textAlign: 'center',
+          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          marginBottom: '20px',
+        }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px', opacity: 0.5 }}>
+            📋
           </div>
-          <div>
-            <label>Zeit-Slot</label>
-            <select
-              value={newShift.timeSlotId}
-              onChange={(e) => setNewShift({ ...newShift, timeSlotId: e.target.value })}
-              style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
-              disabled={isSubmitting}
-            >
-              <option value="">Bitte auswählen...</option>
-              {shiftPlan.timeSlots.map(slot => (
-                <option key={slot.id} value={slot.id}>
-                  {slot.name} ({slot.startTime}-{slot.endTime})
-                </option>
-              ))}
-            </select>
+          <h2 style={{ color: '#2c3e50', marginBottom: '8px' }}>
+            Keine Schichten vorhanden
+          </h2>
+          <p style={{ color: '#666', marginBottom: '24px' }}>
+            Fügen Sie zunächst einen Zeit-Slot hinzu und wählen Sie dann die Tage aus,
+            an denen Schichten stattfinden sollen.
+          </p>
+          <button
+            onClick={() => setShowAddTimeSlot(true)}
+            style={{
+              ...addTextButton(false),
+              padding: '12px 24px',
+              fontSize: '16px',
+            }}
+          >
+            {ICONS.add} Zeit-Slot hinzufügen
+          </button>
+        </div>
+      )}
+
+      {/* Grid Editor */}
+      {(hasTimeSlots || hasActiveDays) && (
+        <div style={{
+          marginBottom: '30px',
+          border: '1px solid #e0e0e0',
+          borderRadius: '8px',
+          overflow: 'hidden'
+        }}>
+          {/* Header bar matching ShiftPlanView */}
+          <div style={{
+            backgroundColor: '#2c3e50',
+            color: 'white',
+            padding: '15px 20px',
+            fontWeight: 'bold'
+          }}>
+            Schichtplan bearbeiten
+            <div style={{ fontSize: '14px', fontWeight: 'normal', marginTop: '5px' }}>
+              {sortedTimeSlots.length} Zeitslots • {activeDays.length} Tage
+            </div>
           </div>
-          <div>
-            <label>Benötigte Mitarbeiter</label>
-            <input
-              type="number"
-              min="1"
-              value={newShift.requiredEmployees}
-              onChange={(e) => setNewShift({ ...newShift, requiredEmployees: parseInt(e.target.value) || 1 })}
-              style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
-              disabled={isSubmitting}
-            />
+
+          <div style={{ overflowX: 'auto' }}>
+            <table style={{
+              width: '100%',
+              borderCollapse: 'collapse',
+              backgroundColor: 'white'
+            }}>
+              <thead>
+                <tr style={{ backgroundColor: '#f8f9fa' }}>
+                  <th style={{
+                    padding: '12px 16px',
+                    textAlign: 'left',
+                    border: '1px solid #dee2e6',
+                    fontWeight: 'bold',
+                    minWidth: '180px'
+                  }}>
+                    Schicht (Zeit)
+                  </th>
+                  {activeDays.map(dayId => {
+                    const day = DAYS_OF_WEEK.find(d => d.id === dayId);
+                    return (
+                      <th key={dayId} style={{
+                        padding: '12px 16px',
+                        textAlign: 'center',
+                        border: '1px solid #dee2e6',
+                        fontWeight: 'bold',
+                        minWidth: '120px'
+                      }}>
+                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}>
+                          <span>{day?.name}</span>
+                          <button
+                            onClick={() => handleRemoveDay(dayId)}
+                            disabled={isSubmitting}
+                            style={smallDeleteButton(isSubmitting)}
+                            title="Tag entfernen"
+                          >
+                            {ICONS.delete}
+                          </button>
+                        </div>
+                      </th>
+                    );
+                  })}
+                  <th style={{
+                    padding: '12px 16px',
+                    textAlign: 'center',
+                    border: '1px solid #dee2e6',
+                    minWidth: '70px',
+                    backgroundColor: '#f8f9fa',
+                  }}>
+                    <AddDayButton
+                      activeDays={activeDays}
+                      onAddDay={handleAddDay}
+                      disabled={isSubmitting}
+                    />
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {sortedTimeSlots.map((slot, index) => (
+                  <tr key={slot.id} style={{
+                    backgroundColor: index % 2 === 0 ? 'white' : '#f8f9fa'
+                  }}>
+                    <td style={{
+                      padding: '12px 16px',
+                      border: '1px solid #dee2e6',
+                      fontWeight: '500',
+                      backgroundColor: '#f8f9fa',
+                      position: 'sticky',
+                      left: 0
+                    }}>
+                      <TimeSlotEditor
+                        slot={slot}
+                        onUpdate={handleUpdateTimeSlot}
+                        onDelete={handleDeleteTimeSlot}
+                        shiftsCount={getShiftsCountForSlot(slot.id)}
+                        disabled={isSubmitting}
+                      />
+                    </td>
+                    {activeDays.map(dayId => (
+                      <ShiftCell
+                        key={`${slot.id}-${dayId}`}
+                        shift={getShift(slot.id, dayId)}
+                        dayOfWeek={dayId}
+                        timeSlotId={slot.id}
+                        onAdd={handleAddShift}
+                        onEdit={handleUpdateShift}
+                        onDelete={handleDeleteShift}
+                        disabled={isSubmitting}
+                      />
+                    ))}
+                    <td style={{
+                      border: '1px solid #dee2e6',
+                      padding: '8px',
+                      textAlign: 'center',
+                    }}>
+                      <button
+                        onClick={() => handleDeleteTimeSlot(slot.id)}
+                        disabled={isSubmitting}
+                        style={smallDeleteButton(isSubmitting)}
+                        title="Zeit-Slot löschen"
+                      >
+                        {ICONS.delete}
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+
+                {/* Add Time Slot Row */}
+                <tr>
+                  <td colSpan={activeDays.length + 2} style={{
+                    padding: '16px',
+                    borderTop: '2px solid #dee2e6',
+                  }}>
+                    {showAddTimeSlot ? (
+                      <div style={{
+                        display: 'flex',
+                        gap: '12px',
+                        alignItems: 'flex-end',
+                        flexWrap: 'wrap',
+                      }}>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: '#666' }}>
+                            Name *
+                          </label>
+                          <input
+                            type="text"
+                            value={newTimeSlot.name}
+                            onChange={(e) => setNewTimeSlot({ ...newTimeSlot, name: e.target.value })}
+                            placeholder="z.B. Vormittag"
+                            style={{
+                              padding: '8px',
+                              borderRadius: '4px',
+                              border: '1px solid #ddd',
+                              width: '150px',
+                            }}
+                            disabled={isSubmitting}
+                          />
+                        </div>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: '#666' }}>
+                            Startzeit *
+                          </label>
+                          <input
+                            type="time"
+                            value={newTimeSlot.startTime}
+                            onChange={(e) => setNewTimeSlot({ ...newTimeSlot, startTime: e.target.value })}
+                            style={{
+                              padding: '8px',
+                              borderRadius: '4px',
+                              border: '1px solid #ddd',
+                            }}
+                            disabled={isSubmitting}
+                          />
+                        </div>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: '#666' }}>
+                            Endzeit *
+                          </label>
+                          <input
+                            type="time"
+                            value={newTimeSlot.endTime}
+                            onChange={(e) => setNewTimeSlot({ ...newTimeSlot, endTime: e.target.value })}
+                            style={{
+                              padding: '8px',
+                              borderRadius: '4px',
+                              border: '1px solid #ddd',
+                            }}
+                            disabled={isSubmitting}
+                          />
+                        </div>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: '#666' }}>
+                            Beschreibung
+                          </label>
+                          <input
+                            type="text"
+                            value={newTimeSlot.description}
+                            onChange={(e) => setNewTimeSlot({ ...newTimeSlot, description: e.target.value })}
+                            placeholder="Optional"
+                            style={{
+                              padding: '8px',
+                              borderRadius: '4px',
+                              border: '1px solid #ddd',
+                              width: '150px',
+                            }}
+                            disabled={isSubmitting}
+                          />
+                        </div>
+                        <button
+                          onClick={handleAddTimeSlot}
+                          disabled={isSubmitting || !newTimeSlot.name}
+                          style={addTextButton(isSubmitting || !newTimeSlot.name)}
+                        >
+                          {ICONS.add} Hinzufügen
+                        </button>
+                        <button
+                          onClick={() => {
+                            setShowAddTimeSlot(false);
+                            setNewTimeSlot({ name: '', startTime: '08:00', endTime: '12:00', description: '' });
+                          }}
+                          disabled={isSubmitting}
+                          style={cancelTextButton(isSubmitting)}
+                        >
+                          Abbrechen
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => setShowAddTimeSlot(true)}
+                        disabled={isSubmitting}
+                        style={addOutlineButton(isSubmitting)}
+                        onMouseEnter={(e) => {
+                          if (!isSubmitting) {
+                            e.currentTarget.style.backgroundColor = '#f0fff4';
+                          }
+                        }}
+                        onMouseLeave={(e) => {
+                          e.currentTarget.style.backgroundColor = 'transparent';
+                        }}
+                      >
+                        {ICONS.add} Neuer Zeit-Slot hinzufügen
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
-        <button
-          onClick={handleAddShift}
-          disabled={isSubmitting || !newShift.timeSlotId || !newShift.requiredEmployees}
-          style={{
-            marginTop: '15px',
-            padding: '8px 16px',
-            backgroundColor: isSubmitting ? '#bdc3c7' : '#3498db',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: isSubmitting ? 'not-allowed' : 'pointer',
-            opacity: (!newShift.timeSlotId || !newShift.requiredEmployees) ? 0.6 : 1
-          }}
-        >
-          {isSubmitting ? 'Wird hinzugefügt...' : 'Schicht hinzufügen'}
-        </button>
-      </div>
+      )}
 
-      {/* Existing shifts */}
-      <div style={{ display: 'grid', gap: '20px' }}>
-        {daysOfWeek.map(day => {
-          const shifts = shiftsByDay[day.id] || [];
-          if (shifts.length === 0) return null;
-          
-          return (
-            <div key={day.id} style={{
-              backgroundColor: 'white',
-              borderRadius: '8px',
-              padding: '20px',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-            }}>
-              <h3 style={{ marginTop: 0 }}>{day.name}</h3>
-              <div style={{ display: 'grid', gap: '15px' }}>
-                {shifts.map(shift => {
-                  const timeSlot = shiftPlan.timeSlots.find(ts => ts.id === shift.timeSlotId);
-                  return (
-                    <div key={shift.id} style={{
-                      backgroundColor: '#f8f9fa',
-                      padding: '15px',
-                      borderRadius: '6px',
-                      boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
-                    }}>
-                      {editingShift?.id === shift.id ? (
-                        <div style={{ display: 'grid', gap: '10px', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
-                          <div>
-                            <label>Zeit-Slot</label>
-                            <select
-                              value={editingShift.timeSlotId}
-                              onChange={(e) => setEditingShift({ ...editingShift, timeSlotId: e.target.value })}
-                              style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
-                              disabled={isSubmitting}
-                            >
-                              {shiftPlan.timeSlots.map(slot => (
-                                <option key={slot.id} value={slot.id}>
-                                  {slot.name} ({slot.startTime}-{slot.endTime})
-                                </option>
-                              ))}
-                            </select>
-                          </div>
-                          <div>
-                            <label>Benötigte Mitarbeiter</label>
-                            <input
-                              type="number"
-                              min="1"
-                              value={editingShift.requiredEmployees}
-                              onChange={(e) => setEditingShift({ ...editingShift, requiredEmployees: parseInt(e.target.value) || 1 })}
-                              style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
-                              disabled={isSubmitting}
-                            />
-                          </div>
-                          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-end' }}>
-                            <button
-                              onClick={() => handleUpdateShift(editingShift)}
-                              disabled={isSubmitting}
-                              style={{
-                                padding: '8px 16px',
-                                backgroundColor: isSubmitting ? '#bdc3c7' : '#2ecc71',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '4px',
-                                cursor: isSubmitting ? 'not-allowed' : 'pointer'
-                              }}
-                            >
-                              {isSubmitting ? 'Speichern...' : 'Speichern'}
-                            </button>
-                            <button
-                              onClick={() => setEditingShift(null)}
-                              disabled={isSubmitting}
-                              style={{
-                                padding: '8px 16px',
-                                backgroundColor: '#95a5a6',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '4px',
-                                cursor: isSubmitting ? 'not-allowed' : 'pointer',
-                                opacity: isSubmitting ? 0.6 : 1
-                              }}
-                            >
-                              Abbrechen
-                            </button>
-                          </div>
-                        </div>
-                      ) : (
-                        <>
-                          <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>
-                            {timeSlot?.name} ({timeSlot?.startTime?.substring(0, 5)} - {timeSlot?.endTime?.substring(0, 5)})
-                          </div>
-                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                            <div style={{ fontSize: '14px', color: '#666' }}>
-                              <span>Benötigte Mitarbeiter: {shift.requiredEmployees}</span>
-                            </div>
-                            <div>
-                              <button
-                                onClick={() => setEditingShift(shift)}
-                                disabled={isSubmitting}
-                                style={{
-                                  padding: '6px 12px',
-                                  backgroundColor: isSubmitting ? '#bdc3c7' : '#f1c40f',
-                                  color: 'white',
-                                  border: 'none',
-                                  borderRadius: '4px',
-                                  cursor: isSubmitting ? 'not-allowed' : 'pointer',
-                                  marginRight: '8px',
-                                  opacity: isSubmitting ? 0.6 : 1
-                                }}
-                              >
-                                Bearbeiten
-                              </button>
-                              <button
-                                onClick={() => handleDeleteShift(shift.id)}
-                                disabled={isSubmitting}
-                                style={{
-                                  padding: '6px 12px',
-                                  backgroundColor: isSubmitting ? '#bdc3c7' : '#e74c3c',
-                                  color: 'white',
-                                  border: 'none',
-                                  borderRadius: '4px',
-                                  cursor: isSubmitting ? 'not-allowed' : 'pointer',
-                                  opacity: isSubmitting ? 0.6 : 1
-                                }}
-                              >
-                                Löschen
-                              </button>
-                            </div>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        })}
+      {/* Legend */}
+      <div style={{
+        marginTop: '20px',
+        padding: '16px',
+        backgroundColor: 'white',
+        borderRadius: '8px',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+      }}>
+        <h4 style={{ margin: '0 0 12px 0', color: '#2c3e50' }}>Legende</h4>
+        <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', fontSize: '13px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div style={{
+              width: '24px',
+              height: '24px',
+              backgroundColor: '#d5f4e6',
+              border: `2px solid ${BUTTON_COLORS.add}`,
+              borderRadius: '4px',
+            }} />
+            <span>Aktive Schicht (klicken zum Bearbeiten)</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div style={{
+              width: '24px',
+              height: '24px',
+              backgroundColor: '#f8f9fa',
+              border: '2px dashed #dee2e6',
+              borderRadius: '4px',
+            }} />
+            <span>Leere Zelle (klicken zum Hinzufügen)</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span style={{ color: BUTTON_COLORS.edit, fontSize: '16px' }}>{ICONS.edit}</span>
+            <span>Zeit-Slot bearbeiten</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span style={{ color: BUTTON_COLORS.delete, fontSize: '16px' }}>{ICONS.delete}</span>
+            <span>Löschen</span>
+          </div>
+        </div>
       </div>
     </div>
   );
 };
 
-export default ShiftPlanEdit;
+export default ShiftPlanEdit;

frontend/src/pages/ShiftPlans/ShiftPlanList.tsx

@@ -13,7 +13,7 @@ const ShiftPlanList: React.FC = () => {
   const navigate = useNavigate();
   const { showNotification, confirmDialog } = useNotification();
   const { executeWithValidation, isSubmitting } = useBackendValidation();
-  
+
   const [shiftPlans, setShiftPlans] = useState<ShiftPlan[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -48,13 +48,13 @@ const ShiftPlanList: React.FC = () => {
 
     await executeWithValidation(async () => {
       await shiftPlanService.deleteShiftPlan(id);
-      
+
       showNotification({
         type: 'success',
         title: 'Erfolg',
         message: 'Der Schichtplan wurde erfolgreich gelöscht.'
       });
-      
+
       loadShiftPlans();
     });
   };
@@ -87,8 +87,8 @@ const ShiftPlanList: React.FC = () => {
 
   if (loading) {
     return (
-      <div style={{ 
-        textAlign: 'center', 
+      <div style={{
+        textAlign: 'center',
         padding: '40px',
         fontSize: '18px',
         color: '#666'
@@ -100,34 +100,34 @@ const ShiftPlanList: React.FC = () => {
 
   return (
     <div>
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'space-between', 
-        alignItems: 'center', 
-        marginBottom: '30px' 
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '30px'
       }}>
         <h1>📅 Schichtpläne</h1>
         {hasRole(['admin', 'maintenance']) && (
           <Link to="/shift-plans/new">
-            <button style={{ 
-              padding: '10px 20px', 
-              backgroundColor: '#51258f', 
-              color: 'white', 
-              border: 'none', 
+            <button style={{
+              padding: '10px 20px',
+              backgroundColor: '#51258f',
+              color: 'white',
+              border: 'none',
               borderRadius: '4px',
               cursor: 'pointer'
             }}>
-              + Neuen Plan
+              + Neuer Plan
             </button>
           </Link>
         )}
       </div>
 
       {shiftPlans.length === 0 ? (
-        <div style={{ 
-          padding: '40px', 
-          textAlign: 'center', 
-          backgroundColor: '#f8f9fa', 
+        <div style={{
+          padding: '40px',
+          textAlign: 'center',
+          backgroundColor: '#f8f9fa',
           borderRadius: '8px',
           border: '2px dashed #dee2e6'
         }}>
@@ -136,12 +136,12 @@ const ShiftPlanList: React.FC = () => {
           <p>Erstellen Sie Ihren ersten Schichtplan!</p>
           {hasRole(['admin', 'maintenance']) && (
             <Link to="/shift-plans/new">
-              <button style={{ 
+              <button style={{
                 marginTop: '15px',
-                padding: '10px 20px', 
-                backgroundColor: '#51258f', 
-                color: 'white', 
-                border: 'none', 
+                padding: '10px 20px',
+                backgroundColor: '#51258f',
+                color: 'white',
+                border: 'none',
                 borderRadius: '4px',
                 cursor: 'pointer'
               }}>
@@ -153,7 +153,7 @@ const ShiftPlanList: React.FC = () => {
       ) : (
         <div style={{ display: 'grid', gap: '20px' }}>
           {shiftPlans.map(plan => (
-            <div 
+            <div
               key={plan.id}
               style={{
                 padding: '20px',
@@ -246,7 +246,7 @@ const ShiftPlanList: React.FC = () => {
           fontSize: '14px',
           color: '#2c3e50'
         }}>
-          <strong>ℹ️ Informationen:</strong> Sie können Schichtpläne nur anzeigen. 
+          <strong>ℹ️ Informationen:</strong> Sie können Schichtpläne nur anzeigen.
           Bearbeitungsrechte benötigen Admin- oder Instandhalter-Berechtigungen.
         </div>
       )}

frontend/src/pages/ShiftPlans/components/AddDayButton.tsx

@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { ICONS, addIconButton, addTextButton, cancelTextButton } from '../../../utils/buttonStyles';
+import Modal from '../../../components/Modal/Modal';
+
+interface DayOption {
+  id: number;
+  name: string;
+}
+
+interface AddDayButtonProps {
+  activeDays: number[];
+  onAddDay: (dayOfWeek: number) => void;
+  disabled?: boolean;
+}
+
+const ALL_DAYS: DayOption[] = [
+  { id: 1, name: 'Montag' },
+  { id: 2, name: 'Dienstag' },
+  { id: 3, name: 'Mittwoch' },
+  { id: 4, name: 'Donnerstag' },
+  { id: 5, name: 'Freitag' },
+  { id: 6, name: 'Samstag' },
+  { id: 7, name: 'Sonntag' },
+];
+
+const AddDayButton: React.FC<AddDayButtonProps> = ({
+  activeDays,
+  onAddDay,
+  disabled = false
+}) => {
+  const [showModal, setShowModal] = useState(false);
+  const [selectedDay, setSelectedDay] = useState<number | null>(null);
+
+  const availableDays = ALL_DAYS.filter(day => !activeDays.includes(day.id));
+
+  const handleAddDay = () => {
+    if (selectedDay !== null) {
+      onAddDay(selectedDay);
+      setShowModal(false);
+      setSelectedDay(null);
+    }
+  };
+
+  const isDisabled = disabled || availableDays.length === 0;
+
+  if (availableDays.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setShowModal(true)}
+        style={addIconButton(isDisabled)}
+        disabled={isDisabled}
+        title="Tag hinzufügen"
+      >
+        {ICONS.add}
+      </button>
+
+      <Modal
+        isOpen={showModal}
+        onClose={() => {
+          setShowModal(false);
+          setSelectedDay(null);
+        }}
+        title="Tag hinzufügen"
+        width="350px"
+      >
+        <div style={{ marginBottom: '16px' }}>
+          <label style={{
+            display: 'block',
+            marginBottom: '8px',
+            fontWeight: 'bold',
+            fontSize: '14px',
+            color: '#2c3e50'
+          }}>
+            Wählen Sie einen Tag:
+          </label>
+          <select
+            value={selectedDay ?? ''}
+            onChange={(e) => setSelectedDay(e.target.value ? Number(e.target.value) : null)}
+            style={{
+              width: '100%',
+              padding: '10px',
+              borderRadius: '4px',
+              border: '1px solid #ddd',
+              fontSize: '14px',
+            }}
+          >
+            <option value="">-- Tag auswählen --</option>
+            {availableDays.map(day => (
+              <option key={day.id} value={day.id}>
+                {day.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+          <button
+            onClick={handleAddDay}
+            disabled={selectedDay === null}
+            style={addTextButton(selectedDay === null)}
+          >
+            {ICONS.add} Hinzufügen
+          </button>
+          <button
+            onClick={() => {
+              setShowModal(false);
+              setSelectedDay(null);
+            }}
+            style={cancelTextButton(false)}
+          >
+            Abbrechen
+          </button>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default AddDayButton;

frontend/src/pages/ShiftPlans/components/ShiftCell.tsx

@@ -0,0 +1,234 @@
+import React, { useState, useEffect } from 'react';
+import { Shift } from '../../../models/ShiftPlan';
+import {
+  ICONS,
+  addTextButton,
+  deleteTextButton,
+  cancelTextButton,
+  BUTTON_COLORS,
+} from '../../../utils/buttonStyles';
+import Modal from '../../../components/Modal/Modal';
+
+interface ShiftCellProps {
+  shift: Shift | null;
+  dayOfWeek: number;
+  timeSlotId: string;
+  onAdd: (dayOfWeek: number, timeSlotId: string, requiredEmployees: number, color: string) => void;
+  onEdit: (shift: Shift, requiredEmployees: number, color: string) => void;
+  onDelete: (shiftId: string) => void;
+  disabled?: boolean;
+}
+
+const COLORS = [
+  '#3498db', // Blue (default)
+  '#27ae60', // Green
+  '#e74c3c', // Red
+  '#f39c12', // Orange
+  '#9b59b6', // Purple
+  '#1abc9c', // Teal
+  '#e91e63', // Pink
+  '#795548', // Brown
+];
+
+const ShiftCell: React.FC<ShiftCellProps> = ({
+  shift,
+  dayOfWeek,
+  timeSlotId,
+  onAdd,
+  onEdit,
+  onDelete,
+  disabled = false
+}) => {
+  const [showModal, setShowModal] = useState(false);
+  const [requiredEmployees, setRequiredEmployees] = useState(shift?.requiredEmployees || 2);
+  const [selectedColor, setSelectedColor] = useState(shift?.color || '#3498db');
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    if (shift) {
+      setRequiredEmployees(shift.requiredEmployees);
+      setSelectedColor(shift.color || '#3498db');
+    } else {
+      setRequiredEmployees(2);
+      setSelectedColor('#3498db');
+    }
+  }, [shift]);
+
+  const handleCellClick = () => {
+    if (disabled) return;
+    setShowModal(true);
+  };
+
+  const handleSave = () => {
+    if (shift) {
+      onEdit(shift, requiredEmployees, selectedColor);
+    } else {
+      onAdd(dayOfWeek, timeSlotId, requiredEmployees, selectedColor);
+    }
+    setShowModal(false);
+  };
+
+  const handleDelete = () => {
+    if (shift) {
+      onDelete(shift.id);
+    }
+    setShowModal(false);
+  };
+
+  const handleClose = () => {
+    if (shift) {
+      setRequiredEmployees(shift.requiredEmployees);
+      setSelectedColor(shift.color || '#3498db');
+    } else {
+      setRequiredEmployees(2);
+      setSelectedColor('#3498db');
+    }
+    setShowModal(false);
+  };
+
+  const cellStyle: React.CSSProperties = {
+    padding: '8px',
+    textAlign: 'center',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    minWidth: '80px',
+    height: '60px',
+    verticalAlign: 'middle',
+    transition: 'all 0.2s ease',
+    border: '1px solid #dee2e6',
+    ...(shift ? {
+      backgroundColor: shift.color ? `${shift.color}20` : '#d5f4e6',
+      borderColor: shift.color || '#27ae60',
+      borderWidth: '2px',
+    } : {
+      backgroundColor: isHovered ? '#f0fff4' : '#f8f9fa',
+      borderStyle: 'dashed',
+      borderColor: isHovered ? BUTTON_COLORS.add : '#dee2e6',
+    }),
+    opacity: disabled ? 0.6 : 1,
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    padding: '10px',
+    borderRadius: '4px',
+    border: '1px solid #ddd',
+    fontSize: '14px',
+    boxSizing: 'border-box',
+  };
+
+  const labelStyle: React.CSSProperties = {
+    display: 'block',
+    marginBottom: '6px',
+    fontWeight: 'bold',
+    fontSize: '14px',
+    color: '#2c3e50',
+  };
+
+  return (
+    <>
+      <td
+        style={cellStyle}
+        onClick={handleCellClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {shift ? (
+          <div>
+            <div style={{
+              width: '28px',
+              height: '28px',
+              borderRadius: '50%',
+              backgroundColor: shift.color || '#27ae60',
+              margin: '0 auto 4px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+              <span style={{ color: 'white', fontSize: '12px', fontWeight: 'bold' }}>
+                {shift.requiredEmployees}
+              </span>
+            </div>
+            <span style={{ fontSize: '11px', color: '#666' }}>
+              Mitarbeiter
+            </span>
+          </div>
+        ) : (
+          <div style={{
+            color: BUTTON_COLORS.add,
+            fontSize: '24px',
+            opacity: isHovered ? 1 : 0.4,
+            transition: 'opacity 0.2s ease',
+          }}>
+            {ICONS.add}
+          </div>
+        )}
+      </td>
+
+      <Modal
+        isOpen={showModal}
+        onClose={handleClose}
+        title={shift ? 'Schicht bearbeiten' : 'Schicht hinzufügen'}
+        width="380px"
+      >
+        <div style={{ marginBottom: '16px' }}>
+          <label style={labelStyle}>Benötigte Mitarbeiter *</label>
+          <input
+            type="number"
+            min="1"
+            max="99"
+            value={requiredEmployees}
+            onChange={(e) => setRequiredEmployees(parseInt(e.target.value) || 1)}
+            style={inputStyle}
+          />
+        </div>
+
+        <div style={{ marginBottom: '20px' }}>
+          <label style={labelStyle}>Farbe</label>
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+            {COLORS.map((color) => (
+              <button
+                key={color}
+                onClick={() => setSelectedColor(color)}
+                style={{
+                  width: '36px',
+                  height: '36px',
+                  borderRadius: '6px',
+                  backgroundColor: color,
+                  border: selectedColor === color ? '3px solid #2c3e50' : '2px solid transparent',
+                  cursor: 'pointer',
+                  transition: 'transform 0.1s ease',
+                }}
+                title={color}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+          <button
+            onClick={handleSave}
+            style={{ ...addTextButton(false), flex: 1 }}
+          >
+            {shift ? 'Speichern' : `${ICONS.add} Hinzufügen`}
+          </button>
+          {shift && (
+            <button
+              onClick={handleDelete}
+              style={deleteTextButton(false)}
+            >
+              {ICONS.delete} Löschen
+            </button>
+          )}
+          <button
+            onClick={handleClose}
+            style={cancelTextButton(false)}
+          >
+            Abbrechen
+          </button>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default ShiftCell;

frontend/src/pages/ShiftPlans/components/TimeSlotEditor.tsx

@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from 'react';
+import { TimeSlot } from '../../../models/ShiftPlan';
+import {
+  ICONS,
+  addTextButton,
+  deleteTextButton,
+  cancelTextButton,
+  borderlessEditButton,
+} from '../../../utils/buttonStyles';
+import Modal from '../../../components/Modal/Modal';
+
+interface TimeSlotEditorProps {
+  slot: TimeSlot;
+  onUpdate: (slot: TimeSlot, name: string, startTime: string, endTime: string, description?: string) => void;
+  onDelete: (slotId: string) => void;
+  shiftsCount: number;
+  disabled?: boolean;
+}
+
+const TimeSlotEditor: React.FC<TimeSlotEditorProps> = ({
+  slot,
+  onUpdate,
+  onDelete,
+  shiftsCount,
+  disabled = false
+}) => {
+  const [showModal, setShowModal] = useState(false);
+  const [name, setName] = useState(slot.name);
+  const [startTime, setStartTime] = useState(slot.startTime);
+  const [endTime, setEndTime] = useState(slot.endTime);
+  const [description, setDescription] = useState(slot.description || '');
+
+  useEffect(() => {
+    setName(slot.name);
+    setStartTime(slot.startTime);
+    setEndTime(slot.endTime);
+    setDescription(slot.description || '');
+  }, [slot]);
+
+  const handleEditClick = () => {
+    if (disabled) return;
+    setShowModal(true);
+  };
+
+  const handleSave = () => {
+    onUpdate(slot, name, startTime, endTime, description || undefined);
+    setShowModal(false);
+  };
+
+  const handleDelete = () => {
+    onDelete(slot.id);
+    setShowModal(false);
+  };
+
+  const handleClose = () => {
+    setName(slot.name);
+    setStartTime(slot.startTime);
+    setEndTime(slot.endTime);
+    setDescription(slot.description || '');
+    setShowModal(false);
+  };
+
+  const formatTime = (time: string) => {
+    return time.substring(0, 5);
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    padding: '10px',
+    borderRadius: '4px',
+    border: '1px solid #ddd',
+    fontSize: '14px',
+    boxSizing: 'border-box',
+  };
+
+  const labelStyle: React.CSSProperties = {
+    display: 'block',
+    marginBottom: '6px',
+    fontWeight: 'bold',
+    fontSize: '14px',
+    color: '#2c3e50',
+  };
+
+  return (
+    <>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+      }}>
+        <button
+          onClick={handleEditClick}
+          style={borderlessEditButton(disabled)}
+          title="Zeit-Slot bearbeiten"
+          disabled={disabled}
+        >
+          {ICONS.edit}
+        </button>
+        <div>
+          <div style={{ fontWeight: 'bold', fontSize: '14px', color: '#2c3e50' }}>
+            {slot.name}
+          </div>
+          <div style={{ fontSize: '12px', color: '#666' }}>
+            {formatTime(slot.startTime)} - {formatTime(slot.endTime)}
+          </div>
+        </div>
+      </div>
+
+      <Modal
+        isOpen={showModal}
+        onClose={handleClose}
+        title="Zeit-Slot bearbeiten"
+        width="400px"
+      >
+        <div style={{ marginBottom: '16px' }}>
+          <label style={labelStyle}>Name *</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            style={inputStyle}
+            placeholder="z.B. Vormittag"
+          />
+        </div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
+          <div>
+            <label style={labelStyle}>Startzeit *</label>
+            <input
+              type="time"
+              value={startTime}
+              onChange={(e) => setStartTime(e.target.value)}
+              style={inputStyle}
+            />
+          </div>
+          <div>
+            <label style={labelStyle}>Endzeit *</label>
+            <input
+              type="time"
+              value={endTime}
+              onChange={(e) => setEndTime(e.target.value)}
+              style={inputStyle}
+            />
+          </div>
+        </div>
+
+        <div style={{ marginBottom: '20px' }}>
+          <label style={labelStyle}>Beschreibung (optional)</label>
+          <input
+            type="text"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            style={inputStyle}
+            placeholder="Optionale Beschreibung"
+          />
+        </div>
+
+        {shiftsCount > 0 && (
+          <div style={{
+            marginBottom: '16px',
+            padding: '12px',
+            backgroundColor: '#fff3cd',
+            borderRadius: '4px',
+            fontSize: '13px',
+            color: '#856404',
+            border: '1px solid #ffc107',
+          }}>
+            Dieser Zeit-Slot enthält {shiftsCount} Schicht(en). Beim Löschen werden alle zugehörigen Schichten entfernt.
+          </div>
+        )}
+
+        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+          <button
+            onClick={handleSave}
+            disabled={!name}
+            style={addTextButton(!name)}
+          >
+            Speichern
+          </button>
+          <button
+            onClick={handleDelete}
+            style={deleteTextButton(false)}
+            title={shiftsCount > 0 ? `Enthält ${shiftsCount} Schicht(en)` : undefined}
+          >
+            {ICONS.delete} Löschen
+          </button>
+          <button
+            onClick={handleClose}
+            style={cancelTextButton(false)}
+          >
+            Abbrechen
+          </button>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default TimeSlotEditor;

frontend/src/services/shiftPlanService.ts

@@ -1,7 +1,34 @@
-import { ShiftPlan, CreateShiftPlanRequest } from '../models/ShiftPlan';
+import { ShiftPlan, CreateShiftPlanRequest, TimeSlot, Shift } from '../models/ShiftPlan';
 import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults';
 import { apiClient } from './apiClient';
 
+// Request types for time slot and shift operations
+export interface CreateTimeSlotRequest {
+  name: string;
+  startTime: string;
+  endTime: string;
+  description?: string;
+}
+
+export interface UpdateTimeSlotRequest {
+  name?: string;
+  startTime?: string;
+  endTime?: string;
+  description?: string;
+}
+
+export interface CreateShiftRequest {
+  timeSlotId: string;
+  dayOfWeek: number;
+  requiredEmployees: number;
+  color?: string;
+}
+
+export interface UpdateShiftRequest {
+  requiredEmployees?: number;
+  color?: string;
+}
+
 export const shiftPlanService = {
   async getShiftPlans(): Promise<ShiftPlan[]> {
     try {
@@ -158,28 +185,108 @@ export const shiftPlanService = {
   async exportShiftPlanToPDF(planId: string): Promise<Blob> {
     try {
       console.log('📄 Exporting shift plan to PDF:', planId);
-      
+
       // Use the apiClient with blob response handling
       const blob = await apiClient.request<Blob>(`/shift-plans/${planId}/export/pdf`, {
         method: 'GET',
       }, 'blob');
-      
+
       console.log('✅ PDF export successful');
       return blob;
     } catch (error: any) {
       console.error('❌ Error exporting to PDF:', error);
-      
+
       if (error.statusCode === 401) {
         localStorage.removeItem('token');
         localStorage.removeItem('employee');
         throw new Error('Nicht authorisiert - bitte erneut anmelden');
       }
-      
+
       if (error.statusCode === 404) {
         throw new Error('Schichtplan nicht gefunden');
       }
-      
+
       throw new Error('Fehler beim PDF-Export des Schichtplans');
     }
   },
+
+  // Time Slot operations
+  async addTimeSlot(planId: string, timeSlot: CreateTimeSlotRequest): Promise<TimeSlot> {
+    try {
+      return await apiClient.post<TimeSlot>(`/shift-plans/${planId}/time-slots`, timeSlot);
+    } catch (error: any) {
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      throw new Error('Fehler beim Hinzufügen des Zeit-Slots');
+    }
+  },
+
+  async updateTimeSlot(planId: string, slotId: string, data: UpdateTimeSlotRequest): Promise<TimeSlot> {
+    try {
+      return await apiClient.put<TimeSlot>(`/shift-plans/${planId}/time-slots/${slotId}`, data);
+    } catch (error: any) {
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      throw new Error('Fehler beim Aktualisieren des Zeit-Slots');
+    }
+  },
+
+  async deleteTimeSlot(planId: string, slotId: string): Promise<void> {
+    try {
+      await apiClient.delete(`/shift-plans/${planId}/time-slots/${slotId}`);
+    } catch (error: any) {
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      throw new Error('Fehler beim Löschen des Zeit-Slots');
+    }
+  },
+
+  // Shift operations
+  async addShift(planId: string, shift: CreateShiftRequest): Promise<Shift> {
+    try {
+      return await apiClient.post<Shift>(`/shift-plans/${planId}/shifts`, shift);
+    } catch (error: any) {
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      throw new Error('Fehler beim Hinzufügen der Schicht');
+    }
+  },
+
+  async updateShift(planId: string, shiftId: string, data: UpdateShiftRequest): Promise<Shift> {
+    try {
+      return await apiClient.patch<Shift>(`/shift-plans/${planId}/shifts/${shiftId}`, data);
+    } catch (error: any) {
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      throw new Error('Fehler beim Aktualisieren der Schicht');
+    }
+  },
+
+  async deleteShift(planId: string, shiftId: string): Promise<void> {
+    try {
+      await apiClient.delete(`/shift-plans/${planId}/shifts/${shiftId}`);
+    } catch (error: any) {
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      throw new Error('Fehler beim Löschen der Schicht');
+    }
+  },
 };

frontend/src/utils/buttonStyles.ts

@@ -0,0 +1,150 @@
+// Unified button styles for consistent UI across the application
+
+import React from 'react';
+
+// Color palette
+export const BUTTON_COLORS = {
+  delete: '#e74c3c',
+  add: '#27ae60',
+  edit: '#f39c12',
+  cancel: '#95a5a6',
+  info: '#3498db',
+  primary: '#2c3e50',
+};
+
+// Icon constants for uniform usage
+export const ICONS = {
+  delete: '-',
+  add: '+',
+  edit: '✎',
+  close: '✕',
+  calendar: '📅',
+};
+
+// Base button style
+const baseButtonStyle: React.CSSProperties = {
+  border: 'none',
+  borderRadius: '4px',
+  cursor: 'pointer',
+  fontWeight: 'bold',
+  transition: 'opacity 0.2s ease',
+};
+
+// Icon button (small, square) - for inline actions
+export const iconButtonStyle = (
+  color: string,
+  disabled = false
+): React.CSSProperties => ({
+  ...baseButtonStyle,
+  padding: '6px 8px',
+  backgroundColor: color,
+  color: 'white',
+  fontSize: '14px',
+  minWidth: '32px',
+  height: '32px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? 0.5 : 1,
+});
+
+// Small inline icon button (for table cells, headers)
+export const smallIconButtonStyle = (
+  color: string,
+  disabled = false
+): React.CSSProperties => ({
+  ...baseButtonStyle,
+  padding: '4px 8px',
+  backgroundColor: color,
+  color: 'white',
+  fontSize: '12px',
+  minWidth: '24px',
+  height: '24px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? 0.5 : 1,
+});
+
+// Text button with icon prefix
+export const textButtonStyle = (
+  color: string,
+  disabled = false
+): React.CSSProperties => ({
+  ...baseButtonStyle,
+  padding: '8px 16px',
+  backgroundColor: color,
+  color: 'white',
+  fontSize: '14px',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? 0.6 : 1,
+});
+
+// Outline/dashed button for "add new" actions
+export const outlineButtonStyle = (
+  color: string,
+  disabled = false
+): React.CSSProperties => ({
+  ...baseButtonStyle,
+  padding: '10px 20px',
+  backgroundColor: 'transparent',
+  color: color,
+  border: `2px dashed ${color}`,
+  fontSize: '14px',
+  width: '100%',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? 0.6 : 1,
+});
+
+// Borderless icon button (for minimal UI elements)
+export const borderlessIconButtonStyle = (
+  color: string,
+  disabled = false
+): React.CSSProperties => ({
+  background: 'none',
+  border: 'none',
+  color: color,
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  fontSize: '16px',
+  padding: '4px 8px',
+  opacity: disabled ? 0.5 : 1,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+// Preset button styles for common actions
+export const deleteIconButton = (disabled = false) =>
+  iconButtonStyle(BUTTON_COLORS.delete, disabled);
+
+export const addIconButton = (disabled = false) =>
+  iconButtonStyle(BUTTON_COLORS.add, disabled);
+
+export const editIconButton = (disabled = false) =>
+  iconButtonStyle(BUTTON_COLORS.edit, disabled);
+
+export const deleteTextButton = (disabled = false) =>
+  textButtonStyle(BUTTON_COLORS.delete, disabled);
+
+export const addTextButton = (disabled = false) =>
+  textButtonStyle(BUTTON_COLORS.add, disabled);
+
+export const cancelTextButton = (disabled = false) =>
+  textButtonStyle(BUTTON_COLORS.cancel, disabled);
+
+export const addOutlineButton = (disabled = false) =>
+  outlineButtonStyle(BUTTON_COLORS.add, disabled);
+
+export const smallDeleteButton = (disabled = false) =>
+  smallIconButtonStyle(BUTTON_COLORS.delete, disabled);
+
+export const smallAddButton = (disabled = false) =>
+  smallIconButtonStyle(BUTTON_COLORS.add, disabled);
+
+export const borderlessDeleteButton = (disabled = false) =>
+  borderlessIconButtonStyle(BUTTON_COLORS.delete, disabled);
+
+export const borderlessEditButton = (disabled = false) =>
+  borderlessIconButtonStyle(BUTTON_COLORS.edit, disabled);