added admin setup

frontend/src/pages/ShiftPlans/ShiftPlanCreate.module.css

@@ -0,0 +1,125 @@
+.container {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 24px;
+  color: #2c3e50;
+}
+
+.backButton {
+  padding: 8px 16px;
+  background-color: #f1f1f1;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #333;
+}
+
+.backButton:hover {
+  background-color: #e4e4e4;
+}
+
+.form {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.formGroup {
+  margin-bottom: 20px;
+}
+
+.formGroup label {
+  display: block;
+  margin-bottom: 8px;
+  color: #34495e;
+  font-weight: 500;
+}
+
+.formGroup input,
+.formGroup select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.formGroup select.empty {
+  color: #999;
+}
+
+.dateGroup {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.error {
+  background-color: #fde8e8;
+  color: #c53030;
+  padding: 12px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.noTemplates {
+  color: #666;
+  margin-top: 8px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.linkButton {
+  background: none;
+  border: none;
+  color: #3498db;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.linkButton:hover {
+  color: #2980b9;
+}
+
+.actions {
+  margin-top: 30px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.createButton {
+  padding: 10px 20px;
+  background-color: #2ecc71;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.createButton:hover {
+  background-color: #27ae60;
+}
+
+.createButton:disabled {
+  background-color: #95a5a6;
+  cursor: not-allowed;
+}

frontend/src/pages/ShiftPlans/ShiftPlanCreate.tsx

@@ -1,56 +1,169 @@
 // frontend/src/pages/ShiftPlans/ShiftPlanCreate.tsx
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { shiftTemplateService } from '../../services/shiftTemplateService';
+import { shiftPlanService } from '../../services/shiftPlanService';
+import { ShiftTemplate } from '../../types/shiftTemplate';
+import styles from './ShiftPlanCreate.module.css';
 
 const ShiftPlanCreate: React.FC = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  
   const [planName, setPlanName] = useState('');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
   const [selectedTemplate, setSelectedTemplate] = useState('');
+  const [templates, setTemplates] = useState<ShiftTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const handleCreate = async () => {
-    // API Call zum Erstellen
+  useEffect(() => {
+    loadTemplates();
+  }, []);
+
+  useEffect(() => {
+    // Template aus URL-Parameter setzen, falls vorhanden
+    const templateId = searchParams.get('template');
+    if (templateId) {
+      setSelectedTemplate(templateId);
+    }
+  }, [searchParams]);
+
+  const loadTemplates = async () => {
+    try {
+      const data = await shiftTemplateService.getTemplates();
+      setTemplates(data);
+      
+      // Wenn keine Template-ID in der URL ist, setze die Standard-Vorlage
+      if (!searchParams.get('template')) {
+        const defaultTemplate = data.find(t => t.isDefault);
+        if (defaultTemplate) {
+          setSelectedTemplate(defaultTemplate.id);
+        }
+      }
+    } catch (error) {
+      console.error('Fehler beim Laden der Vorlagen:', error);
+      setError('Vorlagen konnten nicht geladen werden');
+    } finally {
+      setLoading(false);
+    }
   };
 
+  const handleCreate = async () => {
+    try {
+      if (!planName.trim()) {
+        setError('Bitte geben Sie einen Namen für den Schichtplan ein');
+        return;
+      }
+      if (!startDate) {
+        setError('Bitte wählen Sie ein Startdatum');
+        return;
+      }
+      if (!endDate) {
+        setError('Bitte wählen Sie ein Enddatum');
+        return;
+      }
+      if (new Date(endDate) < new Date(startDate)) {
+        setError('Das Enddatum muss nach dem Startdatum liegen');
+        return;
+      }
+
+      await shiftPlanService.createShiftPlan({
+        name: planName,
+        startDate,
+        endDate,
+        templateId: selectedTemplate || undefined
+      });
+
+      // Nach erfolgreicher Erstellung zur Liste der Schichtpläne navigieren
+      navigate('/shift-plans');
+    } catch (error) {
+      console.error('Fehler beim Erstellen des Schichtplans:', error);
+      setError('Der Schichtplan konnte nicht erstellt werden. Bitte versuchen Sie es später erneut.');
+    }
+  };
+
+  if (loading) {
+    return <div>Lade Vorlagen...</div>;
+  }
+
   return (
-    <div>
-      <h1>Neuen Schichtplan erstellen</h1>
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>Neuen Schichtplan erstellen</h1>
+        <button onClick={() => navigate(-1)} className={styles.backButton}>
+          Zurück
+        </button>
+      </div>
+
+      {error && (
+        <div className={styles.error}>
+          {error}
+        </div>
+      )}
       
-      <div>
-        <label>Plan Name:</label>
-        <input 
-          type="text" 
-          value={planName}
-          onChange={(e) => setPlanName(e.target.value)}
-        />
-      </div>
+      <div className={styles.form}>
+        <div className={styles.formGroup}>
+          <label>Plan Name:</label>
+          <input 
+            type="text" 
+            value={planName}
+            onChange={(e) => setPlanName(e.target.value)}
+            placeholder="z.B. KW 42 2025"
+          />
+        </div>
 
-      <div>
-        <label>Von:</label>
-        <input 
-          type="date" 
-          value={startDate}
-          onChange={(e) => setStartDate(e.target.value)}
-        />
-      </div>
+        <div className={styles.dateGroup}>
+          <div className={styles.formGroup}>
+            <label>Von:</label>
+            <input 
+              type="date" 
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+            />
+          </div>
 
-      <div>
-        <label>Bis:</label>
-        <input 
-          type="date" 
-          value={endDate}
-          onChange={(e) => setEndDate(e.target.value)}
-        />
-      </div>
+          <div className={styles.formGroup}>
+            <label>Bis:</label>
+            <input 
+              type="date" 
+              value={endDate}
+              onChange={(e) => setEndDate(e.target.value)}
+            />
+          </div>
+        </div>
 
-      <div>
-        <label>Vorlage verwenden:</label>
-        <select value={selectedTemplate} onChange={(e) => setSelectedTemplate(e.target.value)}>
-          <option value="">Keine Vorlage</option>
-          {/* Vorlagen laden */}
-        </select>
-      </div>
+        <div className={styles.formGroup}>
+          <label>Vorlage verwenden:</label>
+          <select 
+            value={selectedTemplate} 
+            onChange={(e) => setSelectedTemplate(e.target.value)}
+            className={templates.length === 0 ? styles.empty : ''}
+          >
+            <option value="">Keine Vorlage</option>
+            {templates.map(template => (
+              <option key={template.id} value={template.id}>
+                {template.name} {template.isDefault ? '(Standard)' : ''}
+              </option>
+            ))}
+          </select>
+          {templates.length === 0 && (
+            <p className={styles.noTemplates}>
+              Keine Vorlagen verfügbar. 
+              <button onClick={() => navigate('/shift-templates/new')} className={styles.linkButton}>
+                Neue Vorlage erstellen
+              </button>
+            </p>
+          )}
+        </div>
 
-      <button onClick={handleCreate}>Schichtplan erstellen</button>
+        <div className={styles.actions}>
+          <button onClick={handleCreate} className={styles.createButton} disabled={!selectedTemplate}>
+            Schichtplan erstellen
+          </button>
+        </div>
+      </div>
     </div>
   );
 };