donpat1to/Schichtenplaner
1
0
Fork 0
mirror of https://github.com/donpat1to/Schichtenplaner.git synced 2025-12-01 15:05:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

removed phone and departement as user attribute

Browse Source
This commit is contained in:
Patrick Mahnke-Hartmann
2025-10-10 18:22:13 +02:00
parent 6a9ddea0c5
commit e1e435a811
21 changed files with 1508 additions and 888 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
frontend/src/pages/Auth/Login.tsx
View File

@@ -1,109 +1,140 @@
// frontend/src/pages/Auth/Login.tsx - KORRIGIERT
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import { useNotification } from '../../contexts/NotificationContext';
const Login: React.FC = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const { login, user } = useAuth(); // user hinzugefügt für Debugging
const { login, user } = useAuth();
const { showNotification } = useNotification();
const navigate = useNavigate();
console.log('🔍 Login Component - Current user:', user);
// 🔥 NEU: Redirect wenn bereits eingeloggt
useEffect(() => {
if (user) {
console.log('✅ User already logged in, redirecting to dashboard');
navigate('/');
}
}, [user, navigate]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError('');
setLoading(true);
try {
console.log('🚀 Starting login process...');
console.log('🔐 Attempting login for:', email);
await login({ email, password });
console.log('✅ Login process completed');
// Navigation passiert automatisch durch AuthContext
// 🔥 WICHTIG: Erfolgsmeldung und Redirect
console.log('✅ Login successful, redirecting to dashboard');
showNotification({
type: 'success',
title: 'Erfolgreich angemeldet',
message: `Willkommen zurück!`
});
} catch (err: any) {
console.error('❌ Login error:', err);
setError(err.message || 'Login fehlgeschlagen');
// Navigiere zur Startseite
navigate('/');
} catch (error: any) {
console.error('❌ Login error:', error);
showNotification({
type: 'error',
title: 'Anmeldung fehlgeschlagen',
message: error.message || 'Bitte überprüfen Sie Ihre Anmeldedaten'
});
} finally {
setLoading(false);
}
};
// Wenn bereits eingeloggt, zeige Ladeanzeige
if (user) {
return (
<div style={{ textAlign: 'center', padding: '40px' }}>
<div>⏳ Weiterleiten...</div>
</div>
);
}
return (
<div style={{
maxWidth: '400px',
margin: '100px auto',
padding: '20px',
border: '1px solid #ddd',
borderRadius: '8px'
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '100vh',
backgroundColor: '#f5f5f5'
}}>
<h2>Anmelden</h2>
{error && (
<div style={{
color: 'red',
backgroundColor: '#ffe6e6',
padding: '10px',
borderRadius: '4px',
marginBottom: '15px'
}}>
<strong>Fehler:</strong> {error}
</div>
)}
<form onSubmit={handleSubmit}>
<div style={{ marginBottom: '15px' }}>
<label style={{ display: 'block', marginBottom: '5px' }}>
E-Mail:
<form onSubmit={handleSubmit} style={{
backgroundColor: 'white',
padding: '40px',
borderRadius: '8px',
boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
width: '100%',
maxWidth: '400px'
}}>
<h2 style={{ textAlign: 'center', marginBottom: '30px' }}>Anmeldung</h2>
<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
E-Mail
</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
style={{
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '16px'
}}
placeholder="ihre-email@example.com"
/>
</div>
<div style={{ marginBottom: '15px' }}>
<label style={{ display: 'block', marginBottom: '5px' }}>
Passwort:
<div style={{ marginBottom: '30px' }}>
<label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
Passwort
</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
style={{
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '16px'
}}
placeholder="Ihr Passwort"
/>
</div>
<button
type="submit"
<button
type="submit"
disabled={loading}
style={{
width: '100%',
padding: '10px',
style={{
width: '100%',
padding: '12px',
backgroundColor: loading ? '#ccc' : '#007bff',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '16px',
cursor: loading ? 'not-allowed' : 'pointer'
}}
>
{loading ? 'Anmeldung...' : 'Anmelden'}
{loading ? '⏳ Wird angemeldet...' : 'Anmelden'}
</button>
</form>
<div style={{ marginTop: '15px', textAlign: 'center' }}>
<p><strong>Test Accounts:</strong></p>
<p>admin@schichtplan.de / admin123</p>
<p>instandhalter@schichtplan.de / instandhalter123</p>
<p>user@schichtplan.de / user123</p>
</div>
</div>
);
};

491
frontend/src/pages/Employees/components/EmployeeForm.tsx
View File

@@ -1,4 +1,4 @@
// frontend/src/pages/Employees/components/EmployeeForm.tsx
// frontend/src/pages/Employees/components/EmployeeForm.tsx - VEREINFACHT
import React, { useState, useEffect } from 'react';
import { Employee, CreateEmployeeRequest, UpdateEmployeeRequest } from '../../../types/employee';
import { employeeService } from '../../../services/employeeService';
@@ -18,6 +18,28 @@ const ROLE_OPTIONS = [
{ value: 'admin', label: 'Administrator', description: 'Voller Zugriff auf alle Funktionen' }
] as const;
// Mitarbeiter Typen Definition
const EMPLOYEE_TYPE_OPTIONS = [
{
value: 'chef',
label: '👨‍💼 Chef/Administrator',
description: 'Vollzugriff auf alle Funktionen und Mitarbeiterverwaltung',
color: '#e74c3c'
},
{
value: 'erfahren',
label: '👴 Erfahren',
description: 'Langjährige Erfahrung, kann komplexe Aufgaben übernehmen',
color: '#3498db'
},
{
value: 'neuling',
label: '👶 Neuling',
description: 'Benötigt Einarbeitung und Unterstützung',
color: '#27ae60'
}
] as const;
const EmployeeForm: React.FC<EmployeeFormProps> = ({
mode,
employee,
@@ -29,8 +51,9 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
email: '',
password: '',
role: 'user' as 'admin' | 'instandhalter' | 'user',
phone: '',
department: '',
employeeType: 'neuling' as 'chef' | 'neuling' | 'erfahren',
isSufficientlyIndependent: false,
notes: '',
isActive: true
});
const [loading, setLoading] = useState(false);
@@ -42,16 +65,17 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
setFormData({
name: employee.name,
email: employee.email,
password: '', // Passwort wird beim Editieren nicht angezeigt
password: '',
role: employee.role,
phone: employee.phone || '',
department: employee.department || '',
employeeType: employee.employeeType,
isSufficientlyIndependent: employee.isSufficientlyIndependent,
notes: employee.notes || '',
isActive: employee.isActive
});
}
}, [mode, employee]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
const { name, value, type } = e.target;
setFormData(prev => ({
...prev,
@@ -59,7 +83,6 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
}));
};
// NEU: Checkbox für Rollen
const handleRoleChange = (roleValue: 'admin' | 'instandhalter' | 'user') => {
setFormData(prev => ({
...prev,
@@ -67,6 +90,16 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
}));
};
const handleEmployeeTypeChange = (employeeType: 'chef' | 'neuling' | 'erfahren') => {
setFormData(prev => ({
...prev,
employeeType,
// Automatische Werte basierend auf Typ
isSufficientlyIndependent: employeeType === 'chef' ? true :
employeeType === 'erfahren' ? true : false
}));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
@@ -79,17 +112,19 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
email: formData.email,
password: formData.password,
role: formData.role,
phone: formData.phone || undefined,
department: formData.department || undefined
employeeType: formData.employeeType,
isSufficientlyIndependent: formData.isSufficientlyIndependent,
notes: formData.notes || undefined
};
await employeeService.createEmployee(createData);
} else if (employee) {
const updateData: UpdateEmployeeRequest = {
name: formData.name,
role: formData.role,
employeeType: formData.employeeType,
isSufficientlyIndependent: formData.isSufficientlyIndependent,
isActive: formData.isActive,
phone: formData.phone || undefined,
department: formData.department || undefined
notes: formData.notes || undefined
};
await employeeService.updateEmployee(employee.id, updateData);
}
@@ -111,22 +146,21 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
return formData.name.trim() && formData.email.trim();
};
// Bestimme welche Rollen der aktuelle Benutzer vergeben darf
const getAvailableRoles = () => {
if (hasRole(['admin'])) {
return ROLE_OPTIONS; // Admins können alle Rollen vergeben
return ROLE_OPTIONS;
}
if (hasRole(['instandhalter'])) {
return ROLE_OPTIONS.filter(role => role.value !== 'admin'); // Instandhalter können keine Admins erstellen
return ROLE_OPTIONS.filter(role => role.value !== 'admin');
}
return ROLE_OPTIONS.filter(role => role.value === 'user'); // Normale User können gar nichts (sollte nicht vorkommen)
return ROLE_OPTIONS.filter(role => role.value === 'user');
};
const availableRoles = getAvailableRoles();
return (
<div style={{
maxWidth: '600px',
maxWidth: '700px',
margin: '0 auto',
backgroundColor: 'white',
padding: '30px',
@@ -158,179 +192,119 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
<form onSubmit={handleSubmit}>
<div style={{ display: 'grid', gap: '20px' }}>
{/* Name */}
<div>
<label style={{
display: 'block',
marginBottom: '8px',
fontWeight: 'bold',
color: '#2c3e50'
}}>
Vollständiger Name *
</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
required
style={{
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '16px'
}}
placeholder="Max Mustermann"
/>
</div>
{/* Grundinformationen */}
<div style={{
padding: '20px',
backgroundColor: '#f8f9fa',
borderRadius: '8px',
border: '1px solid #e9ecef'
}}>
<h3 style={{ margin: '0 0 15px 0', color: '#495057' }}>📋 Grundinformationen</h3>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
<div>
<label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold', color: '#2c3e50' }}>
Vollständiger Name *
</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
required
style={{
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '16px'
}}
placeholder="Max Mustermann"
/>
</div>
{/* E-Mail */}
<div>
<label style={{
display: 'block',
marginBottom: '8px',
fontWeight: 'bold',
color: '#2c3e50'
}}>
E-Mail Adresse *
</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
required
style={{
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '16px'
}}
placeholder="max.mustermann@example.com"
/>
</div>
{/* Passwort (nur bei Erstellung) */}
{mode === 'create' && (
<div>
<label style={{
display: 'block',
marginBottom: '8px',
fontWeight: 'bold',
color: '#2c3e50'
}}>
Passwort *
</label>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
required
minLength={6}
style={{
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '16px'
}}
placeholder="Mindestens 6 Zeichen"
/>
<div style={{ fontSize: '12px', color: '#7f8c8d', marginTop: '5px' }}>
Das Passwort muss mindestens 6 Zeichen lang sein.
<div>
<label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold', color: '#2c3e50' }}>
E-Mail Adresse *
</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
required
style={{
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '16px'
}}
placeholder="max.mustermann@example.com"
/>
</div>
</div>
)}
{/* Telefon */}
<div>
<label style={{
display: 'block',
marginBottom: '8px',
fontWeight: 'bold',
color: '#2c3e50'
}}>
Telefonnummer
</label>
<input
type="tel"
name="phone"
value={formData.phone}
onChange={handleChange}
style={{
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '16px'
}}
placeholder="+49 123 456789"
/>
{mode === 'create' && (
<div style={{ marginTop: '15px' }}>
<label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold', color: '#2c3e50' }}>
Passwort *
</label>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
required
minLength={6}
style={{
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '16px'
}}
placeholder="Mindestens 6 Zeichen"
/>
<div style={{ fontSize: '12px', color: '#7f8c8d', marginTop: '5px' }}>
Das Passwort muss mindestens 6 Zeichen lang sein.
</div>
</div>
)}
</div>
{/* Abteilung */}
<div>
<label style={{
display: 'block',
marginBottom: '8px',
fontWeight: 'bold',
color: '#2c3e50'
}}>
Abteilung
</label>
<input
type="text"
name="department"
value={formData.department}
onChange={handleChange}
style={{
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '16px'
}}
placeholder="z.B. Produktion, Logistik, Verwaltung"
/>
</div>
{/* NEU: Rollen als Checkboxes */}
<div>
<label style={{
display: 'block',
marginBottom: '12px',
fontWeight: 'bold',
color: '#2c3e50'
}}>
Rolle *
</label>
{/* Mitarbeiter Kategorie */}
<div style={{
padding: '20px',
backgroundColor: '#f8f9fa',
borderRadius: '8px',
border: '1px solid #e9ecef'
}}>
<h3 style={{ margin: '0 0 15px 0', color: '#495057' }}>👥 Mitarbeiter Kategorie</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
{availableRoles.map(role => (
{EMPLOYEE_TYPE_OPTIONS.map(type => (
<div
key={role.value}
key={type.value}
style={{
display: 'flex',
alignItems: 'flex-start',
padding: '5px',
border: `2px solid ${formData.role === role.value ? '#3498db' : '#e0e0e0'}`,
padding: '15px',
border: `2px solid ${formData.employeeType === type.value ? type.color : '#e0e0e0'}`,
borderRadius: '8px',
backgroundColor: formData.role === role.value ? '#f8fafc' : 'white',
backgroundColor: formData.employeeType === type.value ? '#f8fafc' : 'white',
cursor: 'pointer',
transition: 'all 0.2s'
}}
onClick={() => handleRoleChange(role.value)}
onClick={() => handleEmployeeTypeChange(type.value)}
>
<input
type="radio"
name="role"
value={role.value}
checked={formData.role === role.value}
onChange={() => handleRoleChange(role.value)}
name="employeeType"
value={type.value}
checked={formData.employeeType === type.value}
onChange={() => handleEmployeeTypeChange(type.value)}
style={{
marginRight: '12px',
marginTop: '2px',
@@ -342,53 +316,180 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
<div style={{
fontWeight: 'bold',
color: '#2c3e50',
marginBottom: '4px'
marginBottom: '4px',
fontSize: '16px'
}}>
{role.label}
{type.label}
</div>
<div style={{
fontSize: '14px',
color: '#7f8c8d',
lineHeight: '1.4'
}}>
{role.description}
{type.description}
</div>
</div>
{/* Role Badge */}
<div style={{
padding: '4px 8px',
backgroundColor:
role.value === 'admin' ? '#e74c3c' :
role.value === 'instandhalter' ? '#3498db' : '#27ae60',
padding: '6px 12px',
backgroundColor: type.color,
color: 'white',
borderRadius: '12px',
borderRadius: '15px',
fontSize: '12px',
fontWeight: 'bold'
}}>
{role.value.toUpperCase()}
{type.value.toUpperCase()}
</div>
</div>
))}
</div>
</div>
{/* Eigenständigkeit */}
<div style={{
padding: '20px',
backgroundColor: '#f8f9fa',
borderRadius: '8px',
border: '1px solid #e9ecef'
}}>
<h3 style={{ margin: '0 0 15px 0', color: '#495057' }}>🎯 Eigenständigkeit</h3>
{/* Info über Berechtigungen */}
<div style={{
marginTop: '10px',
padding: '10px',
backgroundColor: '#e8f4fd',
border: '1px solid #b6d7e8',
borderRadius: '4px',
fontSize: '12px',
color: '#2c3e50'
display: 'flex',
alignItems: 'center',
gap: '15px',
padding: '15px',
border: '1px solid #e0e0e0',
borderRadius: '6px',
backgroundColor: '#fff'
}}>
<strong>Info:</strong> {
formData.role === 'admin' ? 'Administratoren haben vollen Zugriff auf alle Funktionen.' :
formData.role === 'instandhalter' ? 'Instandhalter können Schichtpläne erstellen und Mitarbeiter verwalten.' :
'Mitarbeiter können ihre eigenen Schichten und Verfügbarkeiten einsehen.'
}
<input
type="checkbox"
name="isSufficientlyIndependent"
id="isSufficientlyIndependent"
checked={formData.isSufficientlyIndependent}
onChange={handleChange}
disabled={formData.employeeType === 'chef'}
style={{
width: '20px',
height: '20px',
opacity: formData.employeeType === 'chef' ? 0.5 : 1
}}
/>
<div style={{ flex: 1 }}>
<label htmlFor="isSufficientlyIndependent" style={{
fontWeight: 'bold',
color: '#2c3e50',
display: 'block',
opacity: formData.employeeType === 'chef' ? 0.5 : 1
}}>
Als ausreichend eigenständig markieren
{formData.employeeType === 'chef' && ' (Automatisch für Chefs)'}
</label>
<div style={{ fontSize: '14px', color: '#7f8c8d' }}>
{formData.employeeType === 'chef'
? 'Chefs sind automatisch als eigenständig markiert.'
: '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.isSufficientlyIndependent ? '#27ae60' : '#e74c3c',
color: 'white',
borderRadius: '15px',
fontSize: '12px',
fontWeight: 'bold',
opacity: formData.employeeType === 'chef' ? 0.7 : 1
}}>
{formData.isSufficientlyIndependent ? 'EIGENSTÄNDIG' : 'BETREUUNG'}
</div>
</div>
</div>
{/* Bemerkungen */}
<div style={{
padding: '20px',
backgroundColor: '#f8f9fa',
borderRadius: '8px',
border: '1px solid #e9ecef'
}}>
<h3 style={{ margin: '0 0 15px 0', color: '#495057' }}>ℹ️ Bemerkungen</h3>
<div>
<label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold', color: '#2c3e50' }}>
Notizen & Hinweise
</label>
<textarea
name="notes"
value={formData.notes}
onChange={handleChange}
rows={3}
style={{
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '16px',
resize: 'vertical'
}}
placeholder="Besondere Fähigkeiten, Einschränkungen, Schulungen, wichtige Hinweise..."
/>
<div style={{ fontSize: '12px', color: '#7f8c8d', marginTop: '5px' }}>
Optionale Notizen für interne Zwecke
</div>
</div>
</div>
{/* Systemrolle (nur für Admins) */}
{hasRole(['admin']) && (
<div style={{
padding: '20px',
backgroundColor: '#fff3cd',
borderRadius: '8px',
border: '1px solid #ffeaa7'
}}>
<h3 style={{ margin: '0 0 15px 0', color: '#856404' }}>⚙️ Systemrolle</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
{availableRoles.map(role => (
<div
key={role.value}
style={{
display: 'flex',
alignItems: 'flex-start',
padding: '12px',
border: `2px solid ${formData.role === role.value ? '#f39c12' : '#e0e0e0'}`,
borderRadius: '6px',
backgroundColor: formData.role === role.value ? '#fef9e7' : 'white',
cursor: 'pointer'
}}
onClick={() => handleRoleChange(role.value)}
>
<input
type="radio"
name="role"
value={role.value}
checked={formData.role === role.value}
onChange={() => handleRoleChange(role.value)}
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>
)}
{/* Aktiv Status (nur beim Bearbeiten) */}
{mode === 'edit' && (
<div style={{

150
frontend/src/pages/Employees/components/EmployeeList.tsx
View File

@@ -6,12 +6,11 @@ import { useAuth } from '../../../contexts/AuthContext';
interface EmployeeListProps {
employees: Employee[];
onEdit: (employee: Employee) => void;
onDelete: (employee: Employee) => void; // Jetzt mit Employee-Objekt
onDelete: (employee: Employee) => void;
onManageAvailability: (employee: Employee) => void;
currentUserRole: 'admin' | 'instandhalter';
}
const EmployeeList: React.FC<EmployeeListProps> = ({
employees,
onEdit,
@@ -34,7 +33,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
return (
employee.name.toLowerCase().includes(term) ||
employee.email.toLowerCase().includes(term) ||
employee.department?.toLowerCase().includes(term) ||
employee.employeeType.toLowerCase().includes(term) ||
employee.role.toLowerCase().includes(term)
);
}
@@ -51,13 +50,28 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
}
};
const getEmployeeTypeBadge = (type: string) => {
switch (type) {
case 'chef': return { text: '👨‍💼 CHEF', color: '#e74c3c', bgColor: '#fadbd8' };
case 'erfahren': return { text: '👴 ERFAHREN', color: '#3498db', bgColor: '#d6eaf8' };
case 'neuling': return { text: '👶 NEULING', color: '#27ae60', bgColor: '#d5f4e6' };
default: return { text: 'UNBEKANNT', color: '#95a5a6', bgColor: '#ecf0f1' };
}
};
const getIndependenceBadge = (isIndependent: boolean) => {
return isIndependent
? { text: '✅ Eigenständig', color: '#27ae60', bgColor: '#d5f4e6' }
: { text: '❌ Betreuung', color: '#e74c3c', bgColor: '#fadbd8' };
};
const getStatusBadge = (isActive: boolean) => {
return isActive
? { text: 'Aktiv', color: '#27ae60', bgColor: '#d5f4e6' }
: { text: 'Inaktiv', color: '#e74c3c', bgColor: '#fadbd8' };
};
// NEU: Kann Benutzer löschen?
// Kann Benutzer löschen?
const canDeleteEmployee = (employee: Employee): boolean => {
// Nur Admins können löschen
if (currentUserRole !== 'admin') return false;
@@ -71,7 +85,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
return true;
};
// NEU: Kann Benutzer bearbeiten?
// Kann Benutzer bearbeiten?
const canEditEmployee = (employee: Employee): boolean => {
// Admins können alle bearbeiten
if (currentUserRole === 'admin') return true;
@@ -134,7 +148,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
<label style={{ fontWeight: 'bold', color: '#2c3e50' }}>Suchen:</label>
<input
type="text"
placeholder="Nach Name, E-Mail oder Abteilung suchen..."
placeholder="Nach Name, E-Mail oder Typ suchen..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
style={{
@@ -152,7 +166,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
</div>
</div>
{/* Mitarbeiter Tabelle - SYMMETRISCH KORRIGIERT */}
{/* Mitarbeiter Tabelle */}
<div style={{
backgroundColor: 'white',
borderRadius: '8px',
@@ -160,10 +174,10 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
overflow: 'hidden',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
}}>
{/* Tabellen-Header - SYMMETRISCH */}
{/* Tabellen-Header */}
<div style={{
display: 'grid',
gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr 120px', // Feste Breite für Aktionen
gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr 1fr 120px',
gap: '15px',
padding: '15px 20px',
backgroundColor: '#f8f9fa',
@@ -173,7 +187,8 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
alignItems: 'center'
}}>
<div>Name & E-Mail</div>
<div>Abteilung</div>
<div>Typ</div>
<div style={{ textAlign: 'center' }}>Eigenständigkeit</div>
<div style={{ textAlign: 'center' }}>Rolle</div>
<div style={{ textAlign: 'center' }}>Status</div>
<div style={{ textAlign: 'center' }}>Letzter Login</div>
@@ -181,7 +196,10 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
</div>
{filteredEmployees.map(employee => {
const status = getStatusBadge(employee.isActive ?? true);
const employeeType = getEmployeeTypeBadge(employee.employeeType);
const independence = getIndependenceBadge(employee.isSufficientlyIndependent);
const roleColor = getRoleBadgeColor(employee.role);
const status = getStatusBadge(employee.isActive);
const canEdit = canEditEmployee(employee);
const canDelete = canDeleteEmployee(employee);
@@ -190,7 +208,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
key={employee.id}
style={{
display: 'grid',
gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr 120px', // Gleiche Spalten wie Header
gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr 1fr 120px',
gap: '15px',
padding: '15px 20px',
borderBottom: '1px solid #f0f0f0',
@@ -217,18 +235,45 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
</div>
</div>
{/* Abteilung */}
<div style={{ color: '#666' }}>
{employee.department || (
<span style={{ color: '#999', fontStyle: 'italic' }}>Nicht zugewiesen</span>
)}
</div>
{/* Rolle - ZENTRIERT */}
{/* Mitarbeiter Typ */}
<div style={{ textAlign: 'center' }}>
<span
style={{
backgroundColor: getRoleBadgeColor(employee.role),
backgroundColor: employeeType.bgColor,
color: employeeType.color,
padding: '6px 12px',
borderRadius: '15px',
fontSize: '12px',
fontWeight: 'bold',
display: 'inline-block'
}}
>
{employeeType.text}
</span>
</div>
{/* Eigenständigkeit */}
<div style={{ textAlign: 'center' }}>
<span
style={{
backgroundColor: independence.bgColor,
color: independence.color,
padding: '6px 12px',
borderRadius: '15px',
fontSize: '12px',
fontWeight: 'bold',
display: 'inline-block'
}}
>
{independence.text}
</span>
</div>
{/* Rolle */}
<div style={{ textAlign: 'center' }}>
<span
style={{
backgroundColor: roleColor,
color: 'white',
padding: '6px 12px',
borderRadius: '15px',
@@ -243,7 +288,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
</span>
</div>
{/* Status - ZENTRIERT */}
{/* Status */}
<div style={{ textAlign: 'center' }}>
<span
style={{
@@ -261,7 +306,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
</span>
</div>
{/* Letzter Login - ZENTRIERT */}
{/* Letzter Login */}
<div style={{ textAlign: 'center', fontSize: '14px', color: '#666' }}>
{employee.lastLogin
? new Date(employee.lastLogin).toLocaleDateString('de-DE')
@@ -269,14 +314,14 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
}
</div>
{/* Aktionen - ZENTRIERT und SYMMETRISCH */}
{/* Aktionen */}
<div style={{
display: 'flex',
gap: '8px',
justifyContent: 'center',
flexWrap: 'wrap'
}}>
{/* Verfügbarkeit Button - immer sichtbar für berechtigte */}
{/* Verfügbarkeit Button */}
{(currentUserRole === 'admin' || currentUserRole === 'instandhalter') && (
<button
onClick={() => onManageAvailability(employee)}
@@ -318,7 +363,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
</button>
)}
{/* Löschen Button - NUR FÜR ADMINS */}
{/* Löschen Button */}
{canDelete && (
<button
onClick={() => onDelete(employee)}
@@ -333,13 +378,13 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
minWidth: '32px',
height: '32px'
}}
title="Mitarbeiter deaktivieren"
title="Mitarbeiter löschen"
>
🗑️
</button>
)}
{/* Platzhalter für Symmetrie wenn keine Aktionen */}
{/* Platzhalter für Symmetrie */}
{!canEdit && !canDelete && (currentUserRole !== 'admin' && currentUserRole !== 'instandhalter') && (
<div style={{ width: '32px', height: '32px' }}></div>
)}
@@ -349,7 +394,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
})}
</div>
{/* NEU: Info-Box über Berechtigungen */}
{/* Info-Box über Berechtigungen */}
<div style={{
marginTop: '20px',
padding: '15px',
@@ -367,6 +412,53 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
<li>Benutzer können sich <strong>nicht selbst löschen</strong></li>
</ul>
</div>
{/* Legende für Mitarbeiter Typen */}
<div style={{
marginTop: '20px',
padding: '15px',
backgroundColor: '#f8f9fa',
border: '1px solid #e9ecef',
borderRadius: '6px',
fontSize: '14px'
}}>
<strong>🎯 Legende Mitarbeiter Typen:</strong>
<div style={{ display: 'flex', gap: '15px', marginTop: '10px', flexWrap: 'wrap' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
<span style={{
backgroundColor: '#fadbd8',
color: '#e74c3c',
padding: '4px 8px',
borderRadius: '12px',
fontSize: '11px',
fontWeight: 'bold'
}}>👨‍💼 CHEF</span>
<span style={{ fontSize: '12px', color: '#666' }}>Vollzugriff</span>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
<span style={{
backgroundColor: '#d6eaf8',
color: '#3498db',
padding: '4px 8px',
borderRadius: '12px',
fontSize: '11px',
fontWeight: 'bold'
}}>👴 ERFAHREN</span>
<span style={{ fontSize: '12px', color: '#666' }}>Langjährige Erfahrung</span>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
<span style={{
backgroundColor: '#d5f4e6',
color: '#27ae60',
padding: '4px 8px',
borderRadius: '12px',
fontSize: '11px',
fontWeight: 'bold'
}}>👶 NEULING</span>
<span style={{ fontSize: '12px', color: '#666' }}>Benötigt Einarbeitung</span>
</div>
</div>
</div>
</div>
);
};

255
frontend/src/pages/Setup/Setup.tsx
View File

@@ -1,6 +1,5 @@
// frontend/src/pages/Setup/Setup.tsx
// frontend/src/pages/Setup/Setup.tsx - KORRIGIERT
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
const Setup: React.FC = () => {
@@ -8,14 +7,11 @@ const Setup: React.FC = () => {
const [formData, setFormData] = useState({
password: '',
confirmPassword: '',
name: '',
phone: '',
department: ''
name: ''
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const navigate = useNavigate();
const { login, checkSetupStatus } = useAuth();
const { checkSetupStatus } = useAuth();
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
@@ -66,12 +62,10 @@ const Setup: React.FC = () => {
const payload = {
password: formData.password,
name: formData.name,
...(formData.phone ? { phone: formData.phone } : {}),
...(formData.department ? { department: formData.department } : {})
name: formData.name
};
console.log('🚀 Sending setup request with payload:', payload);
console.log('🚀 Sending setup request...');
const response = await fetch('http://localhost:3002/api/setup/admin', {
method: 'POST',
@@ -81,66 +75,110 @@ const Setup: React.FC = () => {
body: JSON.stringify(payload),
});
const responseText = await response.text();
console.log('📨 Setup response:', responseText);
let result;
try {
result = JSON.parse(responseText);
} catch (parseError) {
console.error('❌ Failed to parse response as JSON:', responseText);
throw new Error('Invalid server response');
}
if (!response.ok) {
throw new Error(result.error || 'Setup fehlgeschlagen');
const data = await response.json();
throw new Error(data.error || 'Setup fehlgeschlagen');
}
const result = await response.json();
console.log('✅ Setup successful:', result);
// WICHTIG: Setup Status neu prüfen und dann zu Login navigieren
// Setup Status neu prüfen
await checkSetupStatus();
// Kurze Verzögerung damit der State aktualisiert werden kann
setTimeout(() => {
navigate('/login');
}, 100);
} catch (err: any) {
console.error('❌ Setup error:', err);
setError(typeof err === 'string' ? err : err.message || 'Ein unerwarteter Fehler ist aufgetreten');
setError(err.message || 'Ein unerwarteter Fehler ist aufgetreten');
} finally {
setLoading(false);
}
};
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8">
<div className="text-center mb-8">
<h1 className="text-3xl font-bold mb-2">Erstkonfiguration</h1>
<p className="text-gray-600">
Konfigurieren Sie den Administrator-Account
<div style={{
minHeight: '100vh',
backgroundColor: '#f8f9fa',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '2rem'
}}>
<div style={{
backgroundColor: 'white',
padding: '3rem',
borderRadius: '12px',
boxShadow: '0 10px 30px rgba(0,0,0,0.1)',
width: '100%',
maxWidth: '500px',
border: '1px solid #e9ecef'
}}>
<div style={{ textAlign: 'center', marginBottom: '2rem' }}>
<h1 style={{
fontSize: '2rem',
fontWeight: 'bold',
marginBottom: '0.5rem',
color: '#2c3e50'
}}>
🚀 Erstkonfiguration
</h1>
<p style={{
color: '#6c757d',
fontSize: '1.1rem'
}}>
Richten Sie Ihren Administrator-Account ein
</p>
</div>
{error && (
<div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
<div style={{
backgroundColor: '#f8d7da',
border: '1px solid #f5c6cb',
color: '#721c24',
padding: '1rem',
borderRadius: '6px',
marginBottom: '1.5rem'
}}>
{error}
</div>
)}
{step === 1 && (
<div className="space-y-4">
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Admin E-Mail
<label style={{
display: 'block',
marginBottom: '0.5rem',
fontWeight: '600',
color: '#495057'
}}>
Administrator E-Mail
</label>
<div className="p-2 bg-gray-100 border rounded">
<div style={{
padding: '0.75rem',
backgroundColor: '#e9ecef',
border: '1px solid #ced4da',
borderRadius: '6px',
color: '#495057',
fontWeight: '500'
}}>
admin@instandhaltung.de
</div>
<div style={{
fontSize: '0.875rem',
color: '#6c757d',
marginTop: '0.25rem'
}}>
Diese E-Mail wird für den Administrator-Account verwendet
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label style={{
display: 'block',
marginBottom: '0.5rem',
fontWeight: '600',
color: '#495057'
}}>
Passwort
</label>
<input
@@ -148,13 +186,26 @@ const Setup: React.FC = () => {
name="password"
value={formData.password}
onChange={handleInputChange}
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
style={{
width: '100%',
padding: '0.75rem',
border: '1px solid #ced4da',
borderRadius: '6px',
fontSize: '1rem',
transition: 'border-color 0.3s ease'
}}
placeholder="Mindestens 6 Zeichen"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label style={{
display: 'block',
marginBottom: '0.5rem',
fontWeight: '600',
color: '#495057'
}}>
Passwort bestätigen
</label>
<input
@@ -162,7 +213,14 @@ const Setup: React.FC = () => {
name="confirmPassword"
value={formData.confirmPassword}
onChange={handleInputChange}
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
style={{
width: '100%',
padding: '0.75rem',
border: '1px solid #ced4da',
borderRadius: '6px',
fontSize: '1rem',
transition: 'border-color 0.3s ease'
}}
placeholder="Passwort wiederholen"
required
/>
@@ -171,76 +229,95 @@ const Setup: React.FC = () => {
)}
{step === 2 && (
<div className="space-y-4">
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Name
<label style={{
display: 'block',
marginBottom: '0.5rem',
fontWeight: '600',
color: '#495057'
}}>
Vollständiger Name
</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleInputChange}
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Vollständiger Name"
style={{
width: '100%',
padding: '0.75rem',
border: '1px solid #ced4da',
borderRadius: '6px',
fontSize: '1rem'
}}
placeholder="Max Mustermann"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Telefon (optional)
</label>
<input
type="tel"
name="phone"
value={formData.phone}
onChange={handleInputChange}
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="+49 123 456789"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Abteilung (optional)
</label>
<input
type="text"
name="department"
value={formData.department}
onChange={handleInputChange}
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="z.B. IT"
/>
</div>
</div>
)}
<div className="mt-6 flex justify-between">
<div style={{
marginTop: '2rem',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
}}>
{step === 2 && (
<button
onClick={handleBack}
className="px-4 py-2 text-gray-600 hover:text-gray-800"
style={{
padding: '0.75rem 1.5rem',
color: '#6c757d',
border: '1px solid #6c757d',
background: 'none',
borderRadius: '6px',
cursor: 'pointer',
fontWeight: '500'
}}
disabled={loading}
>
Zurück
← Zurück
</button>
)}
<button
onClick={handleNext}
disabled={loading}
className={`px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 ${
step === 1 ? 'ml-auto' : ''
}`}
style={{
padding: '0.75rem 2rem',
backgroundColor: loading ? '#6c757d' : '#007bff',
color: 'white',
border: 'none',
borderRadius: '6px',
cursor: loading ? 'not-allowed' : 'pointer',
fontWeight: '600',
fontSize: '1rem',
marginLeft: step === 1 ? 'auto' : '0',
transition: 'background-color 0.3s ease'
}}
>
{loading ? (
'⏳ Verarbeite...'
) : step === 1 ? (
'Weiter'
) : (
'Setup abschließen'
)}
{loading ? '⏳ Wird verarbeitet...' :
step === 1 ? 'Weiter →' : 'Setup abschließen'}
</button>
</div>
{step === 2 && (
<div style={{
marginTop: '1.5rem',
textAlign: 'center',
color: '#6c757d',
fontSize: '0.9rem',
padding: '1rem',
backgroundColor: '#e7f3ff',
borderRadius: '6px',
border: '1px solid #b6d7e8'
}}>
💡 Nach dem erfolgreichen Setup werden Sie zur Anmeldeseite weitergeleitet,
wo Sie sich mit Ihren Zugangsdaten anmelden können.
</div>
)}
</div>
</div>
);