Zwiscshenstand - laufende Version

frontend/src/views/EmployeeForm.tsx

@@ -4,6 +4,7 @@ import type { Employee } from '@skillmate/shared'
 import { employeeApi } from '../services/api'
 import { SKILL_HIERARCHY, LANGUAGE_LEVELS } from '../data/skillCategories'
 import PhotoPreview from '../components/PhotoPreview'
+import OrganizationSelector from '../components/OrganizationSelector'
 
 export default function EmployeeForm() {
   const navigate = useNavigate()
@@ -28,6 +29,8 @@ export default function EmployeeForm() {
     languages: [] as string[],
     specializations: [] as string[]
   })
+  const [primaryUnitId, setPrimaryUnitId] = useState<string | null>(null)
+  const [primaryUnitName, setPrimaryUnitName] = useState<string>('')
   
   const [employeePhoto, setEmployeePhoto] = useState<string | null>(null)
   const [photoFile, setPhotoFile] = useState<File | null>(null)
@@ -178,6 +181,7 @@ export default function EmployeeForm() {
     if (!formData.email.trim()) errors.email = 'E-Mail ist erforderlich'
     else if (!/\S+@\S+\.\S+/.test(formData.email)) errors.email = 'Ungültige E-Mail-Adresse'
     if (!formData.phone.trim()) errors.phone = 'Telefonnummer ist erforderlich'
+    if (!primaryUnitId) errors.primaryUnitId = 'Organisatorische Einheit ist erforderlich'
     
     setValidationErrors(errors)
     return Object.keys(errors).length === 0
@@ -220,7 +224,7 @@ export default function EmployeeForm() {
         createdBy: 'admin'
       }
 
-      const result = await employeeApi.create(newEmployee)
+      const result = await employeeApi.create({ ...newEmployee, primaryUnitId })
       const newEmployeeId = result.data.id
       
       // Upload photo if we have one
@@ -407,6 +411,23 @@ export default function EmployeeForm() {
               )}
             </div>
 
+            <div className="md:col-span-2">
+              <label className="block text-sm font-medium text-secondary mb-2">
+                Organisatorische Einheit (Primär) *
+              </label>
+              <OrganizationSelector
+                value={primaryUnitId || undefined}
+                onChange={(unitId, unitName) => {
+                  setPrimaryUnitId(unitId)
+                  setPrimaryUnitName(unitName)
+                }}
+              />
+              <p className="text-tertiary text-sm mt-2">{primaryUnitName || 'Bitte auswählen'}</p>
+              {validationErrors.primaryUnitId && (
+                <p className="mt-1 text-sm text-red-600">{validationErrors.primaryUnitId}</p>
+              )}
+            </div>
+
             <div>
               <label className="block text-sm font-medium text-secondary mb-2">
                 Telefon *