mirror of
https://github.com/donpat1to/Schichtenplaner.git
synced 2025-11-30 22:45:46 +01:00
1413 lines
43 KiB
TypeScript
1413 lines
43 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { Employee, CreateEmployeeRequest, UpdateEmployeeRequest } from '../../../models/Employee';
|
||
import { ROLE_CONFIG, EMPLOYEE_TYPE_CONFIG } from '../../../models/defaults/employeeDefaults';
|
||
import { employeeService } from '../../../services/employeeService';
|
||
import { useAuth } from '../../../contexts/AuthContext';
|
||
import { useBackendValidation } from '../../../hooks/useBackendValidation';
|
||
import { useNotification } from '../../../contexts/NotificationContext';
|
||
|
||
interface EmployeeFormProps {
|
||
mode: 'create' | 'edit';
|
||
employee?: Employee;
|
||
onSuccess: () => void;
|
||
onCancel: () => void;
|
||
}
|
||
|
||
type EmployeeType = 'manager' | 'personell' | 'apprentice' | 'guest';
|
||
type ContractType = 'small' | 'large' | 'flexible';
|
||
|
||
// ===== TYP-DEFINITIONEN =====
|
||
interface EmployeeFormData {
|
||
// Step 1: Grundinformationen
|
||
firstname: string;
|
||
lastname: string;
|
||
email: string;
|
||
password: string;
|
||
|
||
// Step 2: Mitarbeiterkategorie
|
||
employeeType: EmployeeType;
|
||
contractType: ContractType | undefined;
|
||
isTrainee: boolean;
|
||
|
||
// Step 3: Berechtigungen & Status
|
||
roles: string[];
|
||
canWorkAlone: boolean;
|
||
isActive: boolean;
|
||
}
|
||
|
||
interface PasswordFormData {
|
||
newPassword: string;
|
||
confirmPassword: string;
|
||
}
|
||
|
||
// ===== HOOK FÜR FORMULAR-LOGIK =====
|
||
const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
|
||
const {
|
||
validationErrors,
|
||
getFieldError,
|
||
hasErrors,
|
||
executeWithValidation,
|
||
isSubmitting,
|
||
clearErrors
|
||
} = useBackendValidation();
|
||
|
||
const [currentStep, setCurrentStep] = useState(0);
|
||
const [formData, setFormData] = useState<EmployeeFormData>({
|
||
firstname: '',
|
||
lastname: '',
|
||
email: '',
|
||
password: '',
|
||
employeeType: 'personell',
|
||
contractType: 'small',
|
||
isTrainee: false,
|
||
roles: ['user'],
|
||
canWorkAlone: false,
|
||
isActive: true
|
||
});
|
||
|
||
const [passwordForm, setPasswordForm] = useState<PasswordFormData>({
|
||
newPassword: '',
|
||
confirmPassword: ''
|
||
});
|
||
|
||
const [showPasswordSection, setShowPasswordSection] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
|
||
|
||
// Steps definition
|
||
const steps = [
|
||
{
|
||
id: 'basic-info',
|
||
title: 'Grundinformationen',
|
||
subtitle: 'Name und Kontaktdaten'
|
||
},
|
||
{
|
||
id: 'employee-category',
|
||
title: 'Mitarbeiterkategorie',
|
||
subtitle: 'Typ und Vertrag'
|
||
},
|
||
{
|
||
id: 'permissions',
|
||
title: 'Berechtigungen',
|
||
subtitle: 'Rollen und Eigenständigkeit'
|
||
}
|
||
];
|
||
|
||
// Add password step for edit mode
|
||
if (mode === 'edit') {
|
||
steps.push({
|
||
id: 'security',
|
||
title: 'Sicherheit',
|
||
subtitle: 'Passwort und Status'
|
||
});
|
||
}
|
||
|
||
// Generate email preview
|
||
const generateEmailPreview = (firstname: string, lastname: string): string => {
|
||
const convertUmlauts = (str: string): string => {
|
||
return str
|
||
.toLowerCase()
|
||
.replace(/ü/g, 'ue')
|
||
.replace(/ö/g, 'oe')
|
||
.replace(/ä/g, 'ae')
|
||
.replace(/ß/g, 'ss');
|
||
};
|
||
|
||
const cleanFirstname = convertUmlauts(firstname).replace(/[^a-z0-9]/g, '');
|
||
const cleanLastname = convertUmlauts(lastname).replace(/[^a-z0-9]/g, '');
|
||
|
||
return `${cleanFirstname}.${cleanLastname}@sp.de`;
|
||
};
|
||
|
||
const emailPreview = generateEmailPreview(formData.firstname, formData.lastname);
|
||
|
||
// Initialize form data when employee is provided
|
||
useEffect(() => {
|
||
if (mode === 'edit' && employee) {
|
||
setFormData({
|
||
firstname: employee.firstname,
|
||
lastname: employee.lastname,
|
||
email: employee.email,
|
||
password: '',
|
||
employeeType: employee.employeeType,
|
||
contractType: employee.contractType,
|
||
isTrainee: employee.isTrainee || false,
|
||
roles: employee.roles || ['user'],
|
||
canWorkAlone: employee.canWorkAlone,
|
||
isActive: employee.isActive
|
||
});
|
||
}
|
||
}, [mode, employee]);
|
||
|
||
// ===== SIMPLE FRONTEND VALIDATION (ONLY FOR REQUIRED FIELDS) =====
|
||
const validateStep1 = (): boolean => {
|
||
// Only check for empty required fields - let backend handle everything else
|
||
if (!formData.firstname.trim()) {
|
||
setError('Bitte geben Sie einen Vornamen ein.');
|
||
return false;
|
||
}
|
||
if (!formData.lastname.trim()) {
|
||
setError('Bitte geben Sie einen Nachnamen ein.');
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
const validateStep2 = (): boolean => {
|
||
if (!formData.employeeType) {
|
||
setError('Bitte wählen Sie eine Mitarbeiterkategorie aus.');
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
const validateCurrentStep = (stepIndex: number): boolean => {
|
||
switch (stepIndex) {
|
||
case 0:
|
||
return validateStep1();
|
||
case 1:
|
||
return validateStep2();
|
||
default:
|
||
return true;
|
||
}
|
||
};
|
||
|
||
// ===== NAVIGATIONS-FUNKTIONEN =====
|
||
const goToNextStep = (): void => {
|
||
setError('');
|
||
clearErrors(); // Clear previous validation errors
|
||
|
||
if (!validateCurrentStep(currentStep)) {
|
||
return;
|
||
}
|
||
|
||
if (currentStep < steps.length - 1) {
|
||
setCurrentStep(prev => prev + 1);
|
||
}
|
||
};
|
||
|
||
const goToPrevStep = (): void => {
|
||
setError('');
|
||
clearErrors(); // Clear validation errors when going back
|
||
if (currentStep > 0) {
|
||
setCurrentStep(prev => prev - 1);
|
||
}
|
||
};
|
||
|
||
const handleStepChange = (stepIndex: number): void => {
|
||
setError('');
|
||
clearErrors(); // Clear validation errors when changing steps
|
||
|
||
// Nur erlauben, zu bereits validierten Schritten zu springen
|
||
if (stepIndex <= currentStep + 1) {
|
||
// Vor dem Wechsel validieren
|
||
if (stepIndex > currentStep && !validateCurrentStep(currentStep)) {
|
||
return;
|
||
}
|
||
setCurrentStep(stepIndex);
|
||
}
|
||
};
|
||
|
||
// ===== FORM HANDLER =====
|
||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||
const { name, value, type } = e.target;
|
||
|
||
setFormData(prev => ({
|
||
...prev,
|
||
[name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value
|
||
}));
|
||
|
||
// Clear field-specific error when user starts typing
|
||
if (validationErrors.length > 0) {
|
||
clearErrors();
|
||
}
|
||
};
|
||
|
||
const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const { name, value } = e.target;
|
||
setPasswordForm(prev => ({
|
||
...prev,
|
||
[name]: value
|
||
}));
|
||
|
||
// Clear password errors when user starts typing
|
||
if (validationErrors.length > 0) {
|
||
clearErrors();
|
||
}
|
||
};
|
||
|
||
const handleRoleChange = (role: string, checked: boolean) => {
|
||
setFormData(prev => {
|
||
if (checked) {
|
||
return {
|
||
...prev,
|
||
roles: [role]
|
||
};
|
||
} else {
|
||
const newRoles = prev.roles.filter(r => r !== role);
|
||
return {
|
||
...prev,
|
||
roles: newRoles.length > 0 ? newRoles : ['user']
|
||
};
|
||
}
|
||
});
|
||
};
|
||
|
||
const handleEmployeeTypeChange = (employeeType: EmployeeType) => {
|
||
// Determine contract type based on employee type
|
||
let contractType: ContractType | undefined;
|
||
if (employeeType === 'manager' || employeeType === 'apprentice') {
|
||
contractType = 'flexible';
|
||
} else if (employeeType !== 'guest') {
|
||
contractType = 'small';
|
||
}
|
||
|
||
// Determine if can work alone based on employee type
|
||
const canWorkAlone = employeeType === 'manager' ||
|
||
(employeeType === 'personell' && !formData.isTrainee);
|
||
|
||
// Reset isTrainee if not personell
|
||
const isTrainee = employeeType === 'personell' ? formData.isTrainee : false;
|
||
|
||
setFormData(prev => ({
|
||
...prev,
|
||
employeeType,
|
||
contractType,
|
||
canWorkAlone,
|
||
isTrainee
|
||
}));
|
||
};
|
||
|
||
const handleTraineeChange = (isTrainee: boolean) => {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
isTrainee,
|
||
canWorkAlone: prev.employeeType === 'personell' ? !isTrainee : prev.canWorkAlone
|
||
}));
|
||
};
|
||
|
||
const handleContractTypeChange = (contractType: ContractType) => {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
contractType
|
||
}));
|
||
};
|
||
|
||
const handleSubmit = async (): Promise<void> => {
|
||
setLoading(true);
|
||
setError('');
|
||
clearErrors();
|
||
|
||
try {
|
||
if (mode === 'create') {
|
||
const createData: CreateEmployeeRequest = {
|
||
firstname: formData.firstname.trim(),
|
||
lastname: formData.lastname.trim(),
|
||
password: formData.password,
|
||
roles: formData.roles,
|
||
employeeType: formData.employeeType,
|
||
contractType: formData.employeeType !== 'guest' ? formData.contractType : undefined,
|
||
canWorkAlone: formData.canWorkAlone,
|
||
isTrainee: formData.isTrainee
|
||
};
|
||
|
||
// Use executeWithValidation ONLY for the API call
|
||
await executeWithValidation(() =>
|
||
employeeService.createEmployee(createData)
|
||
);
|
||
} else if (employee) {
|
||
const updateData: UpdateEmployeeRequest = {
|
||
firstname: formData.firstname.trim(),
|
||
lastname: formData.lastname.trim(),
|
||
roles: formData.roles,
|
||
employeeType: formData.employeeType,
|
||
contractType: formData.employeeType !== 'guest' ? formData.contractType : undefined,
|
||
canWorkAlone: formData.canWorkAlone,
|
||
isActive: formData.isActive,
|
||
isTrainee: formData.isTrainee
|
||
};
|
||
|
||
// Use executeWithValidation for the update call
|
||
await executeWithValidation(() =>
|
||
employeeService.updateEmployee(employee.id, updateData)
|
||
);
|
||
|
||
// Password change logic - backend will validate password requirements
|
||
if (showPasswordSection && passwordForm.newPassword) {
|
||
if (passwordForm.newPassword !== passwordForm.confirmPassword) {
|
||
throw new Error('Die Passwörter stimmen nicht überein');
|
||
}
|
||
|
||
// Use executeWithValidation for password change too
|
||
await executeWithValidation(() =>
|
||
employeeService.changePassword(employee.id, {
|
||
currentPassword: '',
|
||
newPassword: passwordForm.newPassword,
|
||
confirmPassword: passwordForm.confirmPassword
|
||
})
|
||
);
|
||
}
|
||
}
|
||
|
||
return Promise.resolve();
|
||
} catch (err: any) {
|
||
// Only set error if it's not a validation error (validation errors are handled by the hook)
|
||
if (!err.validationErrors) {
|
||
setError(err.message || `Fehler beim ${mode === 'create' ? 'Erstellen' : 'Aktualisieren'} des Mitarbeiters`);
|
||
}
|
||
return Promise.reject(err);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const isStepCompleted = (stepIndex: number): boolean => {
|
||
switch (stepIndex) {
|
||
case 0:
|
||
return !!formData.firstname.trim() &&
|
||
!!formData.lastname.trim();
|
||
// REMOVE: (mode === 'edit' || formData.password.length >= 6)
|
||
case 1:
|
||
return !!formData.employeeType;
|
||
case 2:
|
||
return true; // Permissions step is always valid
|
||
case 3:
|
||
return true; // Security step is always valid
|
||
default:
|
||
return false;
|
||
}
|
||
};
|
||
|
||
return {
|
||
// State
|
||
currentStep,
|
||
formData,
|
||
passwordForm,
|
||
loading: loading || isSubmitting,
|
||
error,
|
||
steps,
|
||
emailPreview,
|
||
showPasswordSection,
|
||
validationErrors,
|
||
getFieldError,
|
||
hasErrors,
|
||
|
||
// Actions
|
||
goToNextStep,
|
||
goToPrevStep,
|
||
handleStepChange,
|
||
handleInputChange,
|
||
handlePasswordChange,
|
||
handleRoleChange,
|
||
handleEmployeeTypeChange,
|
||
handleTraineeChange,
|
||
handleContractTypeChange,
|
||
handleSubmit,
|
||
setShowPasswordSection,
|
||
clearErrors,
|
||
|
||
// Helpers
|
||
isStepCompleted
|
||
};
|
||
};
|
||
|
||
// ===== STEP-INHALTS-KOMPONENTEN =====
|
||
interface StepContentProps {
|
||
formData: EmployeeFormData;
|
||
passwordForm: PasswordFormData;
|
||
onInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
|
||
onPasswordChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||
onRoleChange: (role: string, checked: boolean) => void;
|
||
onEmployeeTypeChange: (employeeType: EmployeeType) => void;
|
||
onTraineeChange: (isTrainee: boolean) => void;
|
||
onContractTypeChange: (contractType: ContractType) => void;
|
||
emailPreview: string;
|
||
mode: 'create' | 'edit';
|
||
showPasswordSection: boolean;
|
||
onShowPasswordSection: (show: boolean) => void;
|
||
hasRole: (roles: string[]) => boolean;
|
||
getFieldError: (fieldName: string) => string | null;
|
||
hasErrors: (fieldName?: string) => boolean;
|
||
}
|
||
|
||
const Step1Content: React.FC<StepContentProps> = ({
|
||
formData,
|
||
onInputChange,
|
||
emailPreview,
|
||
mode
|
||
}) => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
|
||
<div>
|
||
<label style={{
|
||
display: 'block',
|
||
marginBottom: '0.5rem',
|
||
fontWeight: '600',
|
||
color: '#495057'
|
||
}}>
|
||
Vorname *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="firstname"
|
||
value={formData.firstname}
|
||
onChange={onInputChange}
|
||
required
|
||
style={{
|
||
width: '100%',
|
||
padding: '0.75rem',
|
||
border: '1px solid #ced4da',
|
||
borderRadius: '6px',
|
||
fontSize: '1rem'
|
||
}}
|
||
placeholder="Max"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label style={{
|
||
display: 'block',
|
||
marginBottom: '0.5rem',
|
||
fontWeight: '600',
|
||
color: '#495057'
|
||
}}>
|
||
Nachname *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="lastname"
|
||
value={formData.lastname}
|
||
onChange={onInputChange}
|
||
required
|
||
style={{
|
||
width: '100%',
|
||
padding: '0.75rem',
|
||
border: '1px solid #ced4da',
|
||
borderRadius: '6px',
|
||
fontSize: '1rem'
|
||
}}
|
||
placeholder="Mustermann"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Email Preview */}
|
||
<div>
|
||
<label style={{
|
||
display: 'block',
|
||
marginBottom: '0.5rem',
|
||
fontWeight: '600',
|
||
color: '#495057'
|
||
}}>
|
||
E-Mail Adresse (automatisch generiert)
|
||
</label>
|
||
<div style={{
|
||
padding: '0.75rem',
|
||
backgroundColor: '#e9ecef',
|
||
border: '1px solid #ced4da',
|
||
borderRadius: '6px',
|
||
color: '#495057',
|
||
fontWeight: '500',
|
||
fontFamily: 'monospace'
|
||
}}>
|
||
{emailPreview || 'max.mustermann@sp.de'}
|
||
</div>
|
||
<div style={{
|
||
fontSize: '0.875rem',
|
||
color: '#6c757d',
|
||
marginTop: '0.25rem'
|
||
}}>
|
||
Die E-Mail Adresse wird automatisch aus Vorname und Nachname generiert.
|
||
</div>
|
||
</div>
|
||
|
||
{mode === 'create' && (
|
||
<div>
|
||
<label style={{
|
||
display: 'block',
|
||
marginBottom: '0.5rem',
|
||
fontWeight: '600',
|
||
color: '#495057'
|
||
}}>
|
||
Passwort *
|
||
</label>
|
||
<input
|
||
type="password"
|
||
name="password"
|
||
value={formData.password}
|
||
onChange={onInputChange}
|
||
required
|
||
style={{
|
||
width: '100%',
|
||
padding: '0.75rem',
|
||
border: '1px solid #ced4da',
|
||
borderRadius: '6px',
|
||
fontSize: '1rem'
|
||
}}
|
||
placeholder="Passwort eingeben"
|
||
/>
|
||
<div style={{
|
||
fontSize: '0.875rem',
|
||
color: '#6c757d',
|
||
marginTop: '0.25rem'
|
||
}}>
|
||
Das Passwort muss mindestens 8 Zeichen lang sein und Groß-/Kleinbuchstaben, Zahlen und Sonderzeichen enthalten.
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
|
||
const Step2Content: React.FC<StepContentProps> = ({
|
||
formData,
|
||
onEmployeeTypeChange,
|
||
onTraineeChange,
|
||
onContractTypeChange,
|
||
hasRole,
|
||
getFieldError
|
||
}) => {
|
||
const contractTypeOptions = [
|
||
{ value: 'small' as const, label: 'Kleiner Vertrag', description: '1 Schicht pro Woche' },
|
||
{ value: 'large' as const, label: 'Großer Vertrag', description: '2 Schichten pro Woche' },
|
||
{ value: 'flexible' as const, label: 'Flexibler Vertrag', description: 'Flexible Arbeitszeiten' }
|
||
];
|
||
|
||
const showContractType = formData.employeeType !== 'guest';
|
||
const employeeTypeError = getFieldError('employeeType');
|
||
const contractTypeError = getFieldError('contractType');
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||
{/* Mitarbeiter Kategorie */}
|
||
<div>
|
||
<h3 style={{ margin: '0 0 1rem 0', color: '#495057' }}>👥 Mitarbeiter Kategorie</h3>
|
||
|
||
{employeeTypeError && (
|
||
<div style={{
|
||
color: '#dc3545',
|
||
fontSize: '0.875rem',
|
||
marginBottom: '1rem',
|
||
padding: '0.5rem',
|
||
backgroundColor: '#f8d7da',
|
||
border: '1px solid #f5c6cb',
|
||
borderRadius: '4px'
|
||
}}>
|
||
{employeeTypeError}
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||
{Object.values(EMPLOYEE_TYPE_CONFIG).map(type => (
|
||
<div
|
||
key={type.value}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'flex-start',
|
||
padding: '1rem',
|
||
border: `2px solid ${formData.employeeType === type.value ? type.color : '#e0e0e0'}`,
|
||
borderRadius: '8px',
|
||
backgroundColor: formData.employeeType === type.value ? '#f8fafc' : 'white',
|
||
cursor: 'pointer',
|
||
transition: 'all 0.2s'
|
||
}}
|
||
onClick={() => onEmployeeTypeChange(type.value)}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="employeeType"
|
||
value={type.value}
|
||
checked={formData.employeeType === type.value}
|
||
onChange={() => onEmployeeTypeChange(type.value)}
|
||
style={{
|
||
marginRight: '12px',
|
||
marginTop: '2px',
|
||
width: '18px',
|
||
height: '18px'
|
||
}}
|
||
/>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{
|
||
fontWeight: 'bold',
|
||
color: '#2c3e50',
|
||
marginBottom: '4px',
|
||
fontSize: '16px'
|
||
}}>
|
||
{type.label}
|
||
</div>
|
||
<div style={{
|
||
fontSize: '14px',
|
||
color: '#7f8c8d',
|
||
lineHeight: '1.4'
|
||
}}>
|
||
{type.description}
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
padding: '6px 12px',
|
||
backgroundColor: type.color,
|
||
color: 'white',
|
||
borderRadius: '15px',
|
||
fontSize: '12px',
|
||
fontWeight: 'bold'
|
||
}}>
|
||
{type.value.toUpperCase()}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Trainee checkbox for personell type */}
|
||
{formData.employeeType === 'personell' && (
|
||
<div style={{
|
||
marginTop: '1rem',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '10px',
|
||
padding: '1rem',
|
||
border: '1px solid #e0e0e0',
|
||
borderRadius: '6px',
|
||
backgroundColor: '#fff'
|
||
}}>
|
||
<input
|
||
type="checkbox"
|
||
name="isTrainee"
|
||
id="isTrainee"
|
||
checked={formData.isTrainee}
|
||
onChange={(e) => onTraineeChange(e.target.checked)}
|
||
style={{ width: '18px', height: '18px' }}
|
||
/>
|
||
<div>
|
||
<label htmlFor="isTrainee" style={{ fontWeight: 'bold', color: '#2c3e50', display: 'block' }}>
|
||
Als Neuling markieren
|
||
</label>
|
||
<div style={{ fontSize: '12px', color: '#7f8c8d' }}>
|
||
Neulinge benötigen zusätzliche Betreuung und können nicht eigenständig arbeiten.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Vertragstyp (nur für Admins und interne Mitarbeiter) */}
|
||
{hasRole(['admin']) && showContractType && (
|
||
<div>
|
||
<h3 style={{ margin: '0 0 1rem 0', color: '#0c5460' }}>📝 Vertragstyp</h3>
|
||
|
||
{contractTypeError && (
|
||
<div style={{
|
||
color: '#dc3545',
|
||
fontSize: '0.875rem',
|
||
marginBottom: '1rem',
|
||
padding: '0.5rem',
|
||
backgroundColor: '#f8d7da',
|
||
border: '1px solid #f5c6cb',
|
||
borderRadius: '4px'
|
||
}}>
|
||
{contractTypeError}
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||
{contractTypeOptions.map(contract => {
|
||
const isFlexibleDisabled = contract.value === 'flexible' && formData.employeeType === 'personell';
|
||
const isSmallLargeDisabled = (contract.value === 'small' || contract.value === 'large') &&
|
||
(formData.employeeType === 'manager' || formData.employeeType === 'apprentice');
|
||
const isDisabled = isFlexibleDisabled || isSmallLargeDisabled;
|
||
|
||
return (
|
||
<div
|
||
key={contract.value}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'flex-start',
|
||
padding: '1rem',
|
||
border: `2px solid ${formData.contractType === contract.value ? '#3498db' : '#e0e0e0'}`,
|
||
borderRadius: '8px',
|
||
backgroundColor: formData.contractType === contract.value ? '#f0f8ff' : 'white',
|
||
cursor: isDisabled ? 'not-allowed' : 'pointer',
|
||
transition: 'all 0.2s',
|
||
opacity: isDisabled ? 0.6 : 1
|
||
}}
|
||
onClick={isDisabled ? undefined : () => onContractTypeChange(contract.value)}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="contractType"
|
||
value={contract.value}
|
||
checked={formData.contractType === contract.value}
|
||
onChange={isDisabled ? undefined : () => onContractTypeChange(contract.value)}
|
||
disabled={isDisabled}
|
||
style={{
|
||
marginRight: '12px',
|
||
marginTop: '2px',
|
||
width: '18px',
|
||
height: '18px'
|
||
}}
|
||
/>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{
|
||
fontWeight: 'bold',
|
||
color: '#2c3e50',
|
||
marginBottom: '4px',
|
||
fontSize: '16px'
|
||
}}>
|
||
{contract.label}
|
||
{isFlexibleDisabled && (
|
||
<span style={{
|
||
fontSize: '12px',
|
||
color: '#e74c3c',
|
||
marginLeft: '8px',
|
||
fontWeight: 'normal'
|
||
}}>
|
||
(Nicht verfügbar für Personell)
|
||
</span>
|
||
)}
|
||
{isSmallLargeDisabled && (
|
||
<span style={{
|
||
fontSize: '12px',
|
||
color: '#e74c3c',
|
||
marginLeft: '8px',
|
||
fontWeight: 'normal'
|
||
}}>
|
||
(Nicht verfügbar für {formData.employeeType === 'manager' ? 'Manager' : 'Auszubildende'})
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div style={{
|
||
fontSize: '14px',
|
||
color: '#7f8c8d',
|
||
lineHeight: '1.4'
|
||
}}>
|
||
{contract.description}
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
padding: '6px 12px',
|
||
backgroundColor: isDisabled ? '#95a5a6' : (formData.contractType === contract.value ? '#3498db' : '#95a5a6'),
|
||
color: 'white',
|
||
borderRadius: '15px',
|
||
fontSize: '12px',
|
||
fontWeight: 'bold'
|
||
}}>
|
||
{contract.value.toUpperCase()}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const Step3Content: React.FC<StepContentProps> = ({
|
||
formData,
|
||
onInputChange,
|
||
onRoleChange,
|
||
hasRole,
|
||
getFieldError
|
||
}) => {
|
||
const rolesError = getFieldError('roles');
|
||
const canWorkAloneError = getFieldError('canWorkAlone');
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||
{/* Eigenständigkeit */}
|
||
<div>
|
||
<h3 style={{ margin: '0 0 1rem 0', color: '#495057' }}>🎯 Eigenständigkeit</h3>
|
||
|
||
{canWorkAloneError && (
|
||
<div style={{
|
||
color: '#dc3545',
|
||
fontSize: '0.875rem',
|
||
marginBottom: '1rem',
|
||
padding: '0.5rem',
|
||
backgroundColor: '#f8d7da',
|
||
border: '1px solid #f5c6cb',
|
||
borderRadius: '4px'
|
||
}}>
|
||
{canWorkAloneError}
|
||
</div>
|
||
)}
|
||
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '15px',
|
||
padding: '1rem',
|
||
border: '1px solid #e0e0e0',
|
||
borderRadius: '6px',
|
||
backgroundColor: '#fff'
|
||
}}>
|
||
<input
|
||
type="checkbox"
|
||
name="canWorkAlone"
|
||
id="canWorkAlone"
|
||
checked={formData.canWorkAlone}
|
||
onChange={onInputChange}
|
||
disabled={formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)}
|
||
style={{
|
||
width: '20px',
|
||
height: '20px',
|
||
opacity: (formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) ? 0.5 : 1
|
||
}}
|
||
/>
|
||
<div style={{ flex: 1 }}>
|
||
<label htmlFor="canWorkAlone" style={{
|
||
fontWeight: 'bold',
|
||
color: '#2c3e50',
|
||
display: 'block',
|
||
opacity: (formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) ? 0.5 : 1
|
||
}}>
|
||
Als ausreichend eigenständig markieren
|
||
{(formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) && ' (Automatisch festgelegt)'}
|
||
</label>
|
||
<div style={{ fontSize: '14px', color: '#7f8c8d' }}>
|
||
{formData.employeeType === 'manager'
|
||
? 'Chefs sind automatisch als eigenständig markiert.'
|
||
: formData.employeeType === 'personell' && formData.isTrainee
|
||
? 'Auszubildende können nicht als eigenständig markiert werden.'
|
||
: 'Dieser Mitarbeiter kann komplexe Aufgaben eigenständig lösen und benötigt keine ständige Betreuung.'
|
||
}
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
padding: '6px 12px',
|
||
backgroundColor: formData.canWorkAlone ? '#27ae60' : '#e74c3c',
|
||
color: 'white',
|
||
borderRadius: '15px',
|
||
fontSize: '12px',
|
||
fontWeight: 'bold',
|
||
opacity: (formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) ? 0.7 : 1
|
||
}}>
|
||
{formData.canWorkAlone ? 'EIGENSTÄNDIG' : 'BETREUUNG'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Systemrollen (nur für Admins) */}
|
||
{hasRole(['admin']) && (
|
||
<div>
|
||
<h3 style={{ margin: '0 0 1rem 0', color: '#856404' }}>⚙️ Systemrollen</h3>
|
||
|
||
{rolesError && (
|
||
<div style={{
|
||
color: '#dc3545',
|
||
fontSize: '0.875rem',
|
||
marginBottom: '1rem',
|
||
padding: '0.5rem',
|
||
backgroundColor: '#f8d7da',
|
||
border: '1px solid #f5c6cb',
|
||
borderRadius: '4px'
|
||
}}>
|
||
{rolesError}
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||
{ROLE_CONFIG.map(role => (
|
||
<div
|
||
key={role.value}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'flex-start',
|
||
padding: '0.75rem',
|
||
border: `2px solid ${formData.roles.includes(role.value) ? '#f39c12' : '#e0e0e0'}`,
|
||
borderRadius: '6px',
|
||
backgroundColor: formData.roles.includes(role.value) ? '#fef9e7' : 'white',
|
||
cursor: 'pointer'
|
||
}}
|
||
onClick={() => onRoleChange(role.value, !formData.roles.includes(role.value))}
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
name="roles"
|
||
value={role.value}
|
||
checked={formData.roles.includes(role.value)}
|
||
onChange={(e) => onRoleChange(role.value, e.target.checked)}
|
||
style={{
|
||
marginRight: '10px',
|
||
marginTop: '2px'
|
||
}}
|
||
/>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ fontWeight: 'bold', color: '#2c3e50' }}>
|
||
{role.label}
|
||
</div>
|
||
<div style={{ fontSize: '14px', color: '#7f8c8d' }}>
|
||
{role.description}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div style={{ fontSize: '12px', color: '#7f8c8d', marginTop: '0.5rem' }}>
|
||
<strong>Hinweis:</strong> Ein Mitarbeiter kann mehrere Rollen haben.
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const Step4Content: React.FC<StepContentProps> = ({
|
||
formData,
|
||
passwordForm,
|
||
onInputChange,
|
||
onPasswordChange,
|
||
showPasswordSection,
|
||
onShowPasswordSection,
|
||
mode,
|
||
getFieldError
|
||
}) => {
|
||
const newPasswordError = getFieldError('newPassword');
|
||
const confirmPasswordError = getFieldError('confirmPassword');
|
||
const isActiveError = getFieldError('isActive');
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||
{/* Passwort ändern */}
|
||
<div>
|
||
<h3 style={{ margin: '0 0 1rem 0', color: '#856404' }}>🔒 Passwort zurücksetzen</h3>
|
||
|
||
{!showPasswordSection ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => onShowPasswordSection(true)}
|
||
style={{
|
||
padding: '0.75rem 1.5rem',
|
||
backgroundColor: '#f39c12',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '6px',
|
||
cursor: 'pointer',
|
||
fontWeight: 'bold'
|
||
}}
|
||
>
|
||
🔑 Passwort zurücksetzen
|
||
</button>
|
||
) : (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||
<div>
|
||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 'bold', color: '#2c3e50' }}>
|
||
Neues Passwort *
|
||
</label>
|
||
<input
|
||
type="password"
|
||
name="newPassword"
|
||
value={passwordForm.newPassword}
|
||
onChange={onPasswordChange}
|
||
required
|
||
style={{
|
||
width: '100%',
|
||
padding: '0.75rem',
|
||
border: `1px solid ${newPasswordError ? '#dc3545' : '#ced4da'}`,
|
||
borderRadius: '6px',
|
||
fontSize: '1rem'
|
||
}}
|
||
placeholder="Mindestens 6 Zeichen"
|
||
/>
|
||
{newPasswordError && (
|
||
<div style={{
|
||
color: '#dc3545',
|
||
fontSize: '0.875rem',
|
||
marginTop: '0.25rem'
|
||
}}>
|
||
{newPasswordError}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div>
|
||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 'bold', color: '#2c3e50' }}>
|
||
Passwort bestätigen *
|
||
</label>
|
||
<input
|
||
type="password"
|
||
name="confirmPassword"
|
||
value={passwordForm.confirmPassword}
|
||
onChange={onPasswordChange}
|
||
required
|
||
style={{
|
||
width: '100%',
|
||
padding: '0.75rem',
|
||
border: `1px solid ${confirmPasswordError ? '#dc3545' : '#ced4da'}`,
|
||
borderRadius: '6px',
|
||
fontSize: '1rem'
|
||
}}
|
||
placeholder="Passwort wiederholen"
|
||
/>
|
||
{confirmPasswordError && (
|
||
<div style={{
|
||
color: '#dc3545',
|
||
fontSize: '0.875rem',
|
||
marginTop: '0.25rem'
|
||
}}>
|
||
{confirmPasswordError}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div style={{ fontSize: '0.875rem', color: '#6c757d' }}>
|
||
<strong>Hinweis:</strong> Als Administrator können Sie das Passwort des Benutzers ohne Kenntnis des aktuellen Passworts zurücksetzen.
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => onShowPasswordSection(false)}
|
||
style={{
|
||
padding: '0.5rem 1rem',
|
||
backgroundColor: '#95a5a6',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
alignSelf: 'flex-start'
|
||
}}
|
||
>
|
||
Abbrechen
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Aktiv Status */}
|
||
{mode === 'edit' && (
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '10px',
|
||
padding: '1rem',
|
||
border: `1px solid ${isActiveError ? '#dc3545' : '#e0e0e0'}`,
|
||
borderRadius: '6px',
|
||
backgroundColor: '#f8f9fa'
|
||
}}>
|
||
<input
|
||
type="checkbox"
|
||
name="isActive"
|
||
id="isActive"
|
||
checked={formData.isActive}
|
||
onChange={onInputChange}
|
||
style={{ width: '18px', height: '18px' }}
|
||
/>
|
||
<div>
|
||
<label htmlFor="isActive" style={{ fontWeight: 'bold', color: '#2c3e50', display: 'block' }}>
|
||
Mitarbeiter ist aktiv
|
||
</label>
|
||
<div style={{ fontSize: '12px', color: '#7f8c8d' }}>
|
||
Inaktive Mitarbeiter können sich nicht anmelden und werden nicht für Schichten eingeplant.
|
||
</div>
|
||
{isActiveError && (
|
||
<div style={{
|
||
color: '#dc3545',
|
||
fontSize: '0.875rem',
|
||
marginTop: '0.25rem'
|
||
}}>
|
||
{isActiveError}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// ===== HAUPTKOMPONENTE =====
|
||
const EmployeeForm: React.FC<EmployeeFormProps> = ({
|
||
mode,
|
||
employee,
|
||
onSuccess,
|
||
onCancel
|
||
}) => {
|
||
const { hasRole } = useAuth();
|
||
const { showNotification } = useNotification();
|
||
const {
|
||
currentStep,
|
||
formData,
|
||
passwordForm,
|
||
loading,
|
||
error,
|
||
steps,
|
||
emailPreview,
|
||
showPasswordSection,
|
||
validationErrors,
|
||
getFieldError,
|
||
hasErrors,
|
||
goToNextStep,
|
||
goToPrevStep,
|
||
handleStepChange,
|
||
handleInputChange,
|
||
handlePasswordChange,
|
||
handleRoleChange,
|
||
handleEmployeeTypeChange,
|
||
handleTraineeChange,
|
||
handleContractTypeChange,
|
||
handleSubmit,
|
||
setShowPasswordSection,
|
||
clearErrors
|
||
} = useEmployeeForm(mode, employee);
|
||
|
||
// Inline Step Indicator Komponente (wie in Setup.tsx)
|
||
const StepIndicator: React.FC = () => (
|
||
<div style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: '2.5rem',
|
||
position: 'relative',
|
||
width: '100%'
|
||
}}>
|
||
{/* Verbindungslinien */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: '12px',
|
||
left: '0',
|
||
right: '0',
|
||
height: '2px',
|
||
backgroundColor: '#e9ecef',
|
||
zIndex: 1
|
||
}} />
|
||
|
||
{steps.map((step, index) => {
|
||
const isCompleted = index < currentStep;
|
||
const isCurrent = index === currentStep;
|
||
const isClickable = index <= currentStep + 1;
|
||
|
||
return (
|
||
<div
|
||
key={step.id}
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
zIndex: 2,
|
||
position: 'relative',
|
||
flex: 1
|
||
}}
|
||
>
|
||
<button
|
||
onClick={() => isClickable && handleStepChange(index)}
|
||
disabled={!isClickable}
|
||
style={{
|
||
width: '28px',
|
||
height: '28px',
|
||
borderRadius: '50%',
|
||
border: '2px solid',
|
||
borderColor: isCompleted || isCurrent ? '#51258f' : '#e9ecef',
|
||
backgroundColor: isCompleted ? '#51258f' : 'white',
|
||
color: isCompleted ? 'white' : (isCurrent ? '#51258f' : '#6c757d'),
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: '14px',
|
||
fontWeight: 'bold',
|
||
cursor: isClickable ? 'pointer' : 'not-allowed',
|
||
transition: 'all 0.3s ease',
|
||
marginBottom: '8px'
|
||
}}
|
||
>
|
||
{index + 1}
|
||
</button>
|
||
|
||
<div style={{ textAlign: 'center' }}>
|
||
<div style={{
|
||
fontSize: '14px',
|
||
fontWeight: isCurrent ? '600' : '400',
|
||
color: isCurrent ? '#51258f' : '#6c757d'
|
||
}}>
|
||
{step.title}
|
||
</div>
|
||
{step.subtitle && (
|
||
<div style={{
|
||
fontSize: '12px',
|
||
color: '#6c757d',
|
||
marginTop: '2px'
|
||
}}>
|
||
{step.subtitle}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
|
||
const renderStepContent = (): React.ReactNode => {
|
||
const stepProps = {
|
||
formData,
|
||
passwordForm,
|
||
onInputChange: handleInputChange,
|
||
onPasswordChange: handlePasswordChange,
|
||
onRoleChange: handleRoleChange,
|
||
onEmployeeTypeChange: handleEmployeeTypeChange,
|
||
onTraineeChange: handleTraineeChange,
|
||
onContractTypeChange: handleContractTypeChange,
|
||
emailPreview,
|
||
mode,
|
||
showPasswordSection,
|
||
onShowPasswordSection: setShowPasswordSection,
|
||
hasRole,
|
||
getFieldError,
|
||
hasErrors
|
||
};
|
||
|
||
switch (currentStep) {
|
||
case 0:
|
||
return <Step1Content {...stepProps} />;
|
||
case 1:
|
||
return <Step2Content {...stepProps} />;
|
||
case 2:
|
||
return <Step3Content {...stepProps} />;
|
||
case 3:
|
||
return <Step4Content {...stepProps} />;
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const handleFinalSubmit = async (): Promise<void> => {
|
||
try {
|
||
await handleSubmit();
|
||
// Show success notification
|
||
showNotification({ // Changed from addNotification to showNotification
|
||
type: 'success',
|
||
title: 'Erfolg',
|
||
message: mode === 'create'
|
||
? 'Mitarbeiter wurde erfolgreich erstellt'
|
||
: 'Mitarbeiter wurde erfolgreich aktualisiert'
|
||
});
|
||
onSuccess();
|
||
} catch (err) {
|
||
// Errors are already handled by the hook and shown as notifications
|
||
}
|
||
};
|
||
|
||
const getNextButtonText = (): string => {
|
||
if (loading) return '⏳ Wird gespeichert...';
|
||
|
||
if (currentStep === steps.length - 1) {
|
||
return mode === 'create' ? 'Mitarbeiter erstellen' : 'Änderungen speichern';
|
||
}
|
||
|
||
return 'Weiter →';
|
||
};
|
||
|
||
const isLastStep = currentStep === steps.length - 1;
|
||
|
||
return (
|
||
<div style={{
|
||
maxWidth: '700px',
|
||
margin: '0 auto',
|
||
backgroundColor: 'white',
|
||
padding: '2rem',
|
||
borderRadius: '8px',
|
||
border: '1px solid #e0e0e0',
|
||
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
|
||
}}>
|
||
<h2 style={{
|
||
margin: '0 0 1.5rem 0',
|
||
color: '#2c3e50',
|
||
borderBottom: '2px solid #f0f0f0',
|
||
paddingBottom: '1rem',
|
||
textAlign: 'center'
|
||
}}>
|
||
{mode === 'create' ? '👤 Neuen Mitarbeiter erstellen' : '✏️ Mitarbeiter bearbeiten'}
|
||
</h2>
|
||
|
||
{/* Inline Step Indicator */}
|
||
<StepIndicator />
|
||
|
||
{/* Aktueller Schritt Titel und Beschreibung */}
|
||
<div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
|
||
<h3 style={{
|
||
fontSize: '1.25rem',
|
||
fontWeight: 'bold',
|
||
marginBottom: '0.5rem',
|
||
color: '#2c3e50'
|
||
}}>
|
||
{steps[currentStep].title}
|
||
</h3>
|
||
{steps[currentStep].subtitle && (
|
||
<p style={{
|
||
color: '#6c757d',
|
||
fontSize: '1rem'
|
||
}}>
|
||
{steps[currentStep].subtitle}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* Schritt-Inhalt */}
|
||
<div style={{ minHeight: '300px' }}>
|
||
{renderStepContent()}
|
||
</div>
|
||
|
||
{/* Navigations-Buttons */}
|
||
<div style={{
|
||
marginTop: '2rem',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center'
|
||
}}>
|
||
<button
|
||
onClick={currentStep === 0 ? onCancel : goToPrevStep}
|
||
disabled={loading}
|
||
style={{
|
||
padding: '0.75rem 1.5rem',
|
||
color: loading ? '#adb5bd' : '#6c757d',
|
||
border: `1px solid ${loading ? '#adb5bd' : '#6c757d'}`,
|
||
background: 'none',
|
||
borderRadius: '6px',
|
||
cursor: loading ? 'not-allowed' : 'pointer',
|
||
fontWeight: '500',
|
||
opacity: loading ? 0.6 : 1
|
||
}}
|
||
>
|
||
{currentStep === 0 ? 'Abbrechen' : '← Zurück'}
|
||
</button>
|
||
|
||
<button
|
||
onClick={isLastStep ? handleFinalSubmit : goToNextStep}
|
||
disabled={loading}
|
||
style={{
|
||
padding: '0.75rem 2rem',
|
||
backgroundColor: loading ? '#6c757d' : (isLastStep ? '#51258f' : '#51258f'),
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '6px',
|
||
cursor: loading ? 'not-allowed' : 'pointer',
|
||
fontWeight: '600',
|
||
fontSize: '1rem',
|
||
transition: 'background-color 0.3s ease'
|
||
}}
|
||
>
|
||
{getNextButtonText()}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Zusätzliche Informationen */}
|
||
{isLastStep && !loading && (
|
||
<div style={{
|
||
marginTop: '1.5rem',
|
||
textAlign: 'center',
|
||
color: '#6c757d',
|
||
fontSize: '0.9rem',
|
||
padding: '1rem',
|
||
backgroundColor: '#f8f9fa',
|
||
borderRadius: '6px'
|
||
}}>
|
||
{mode === 'create'
|
||
? 'Überprüfen Sie alle Daten, bevor Sie den Mitarbeiter erstellen'
|
||
: 'Überprüfen Sie alle Änderungen, bevor Sie sie speichern'
|
||
}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default EmployeeForm; |