1118 lines
80 KiB
JavaScript
1118 lines
80 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { useAuth } from '../context/AuthContext';
|
||
import onboardingService from '../services/onboardingService';
|
||
import offboardingService from '../services/offboardingService';
|
||
import userService from '../services/userService';
|
||
import assetService from '../services/assetService';
|
||
import onboardingProcessService from '../services/onboardingProcessService';
|
||
import ProcessManagementPage from './ProcessManagementPage';
|
||
import LoadingSpinner from '../components/common/LoadingSpinner';
|
||
import { toast } from 'react-toastify';
|
||
|
||
// ── Inline Prozess-Checkliste ─────────────────────────────────────────────────
|
||
const TAG_COLORS = { critical: '#ef4444', important: '#f59e0b', normal: '#64748b' };
|
||
const TAG_LABELS = { critical: 'Kritisch', important: 'Wichtig', normal: 'Standard' };
|
||
const TEAM_COLORS = { it: '#3b82f6', hr: '#10b981', buchhaltung: '#8b5cf6' };
|
||
const TEAM_ICONS = { it: '💻', hr: '🧑💼', buchhaltung: '💶' };
|
||
const TEAM_LABELS = { it: 'IT', hr: 'HR / Personal', buchhaltung: 'Buchhaltung' };
|
||
|
||
const ProcessChecklist = ({ processes, checkedItems, onChange, disabled = false, userTeam = null }) => {
|
||
if (!processes || processes.length === 0) {
|
||
return <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>Keine Prozesse konfiguriert. Bitte unter ⚙️ Prozesse verwalten.</p>;
|
||
}
|
||
|
||
// Group by responsible_team
|
||
const teams = ['it', 'hr', 'buchhaltung'];
|
||
const teamMap = {};
|
||
teams.forEach(t => { teamMap[t] = []; });
|
||
processes.forEach(p => {
|
||
if (teamMap[p.responsible_team]) teamMap[p.responsible_team].push(p);
|
||
});
|
||
|
||
const totalItems = processes.length;
|
||
const totalChecked = processes.filter(p => !!checkedItems[`proc_${p.id}`]).length;
|
||
const totalPct = totalItems > 0 ? Math.round((totalChecked / totalItems) * 100) : 0;
|
||
|
||
return (
|
||
<div>
|
||
{/* Progress bar */}
|
||
<div style={{ marginBottom: 14, padding: '10px 14px', background: 'var(--bg-secondary)', borderRadius: 8, border: '1px solid var(--border-color)' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 5 }}>
|
||
<span style={{ fontSize: '11px', fontWeight: 700, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Gesamtfortschritt</span>
|
||
<span style={{ fontSize: '12px', fontFamily: 'monospace', color: totalPct === 100 ? '#10b981' : 'var(--text-muted)' }}>
|
||
{totalChecked} / {totalItems} · {totalPct}%
|
||
</span>
|
||
</div>
|
||
<div style={{ height: 4, background: 'var(--border-color)', borderRadius: 2, overflow: 'hidden' }}>
|
||
<div style={{ height: '100%', width: `${totalPct}%`, background: totalPct === 100 ? '#10b981' : 'var(--cereda-primary)', borderRadius: 2, transition: 'width 0.3s' }} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Teams */}
|
||
{teams.map(team => {
|
||
const items = teamMap[team];
|
||
if (items.length === 0) return null;
|
||
const tc = TEAM_COLORS[team];
|
||
const isMyTeam = !userTeam || userTeam === team;
|
||
const grpChecked = items.filter(p => !!checkedItems[`proc_${p.id}`]).length;
|
||
const grpPct = Math.round((grpChecked / items.length) * 100);
|
||
|
||
return (
|
||
<div key={team} style={{ marginBottom: 10, border: `1px solid var(--border-color)`, borderLeft: `3px solid ${tc}`, borderRadius: 8, overflow: 'hidden', opacity: isMyTeam ? 1 : 0.5 }}>
|
||
{/* Team header */}
|
||
<div style={{ padding: '8px 14px', background: 'var(--bg-tertiary)', borderBottom: '1px solid var(--border-color)', display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<span>{TEAM_ICONS[team]}</span>
|
||
<span style={{ fontWeight: 700, fontSize: '0.85rem', flex: 1, color: tc }}>{TEAM_LABELS[team]}</span>
|
||
<span style={{ fontSize: '11px', fontFamily: 'monospace', color: grpPct === 100 ? '#10b981' : 'var(--text-muted)' }}>
|
||
{grpChecked}/{items.length}
|
||
</span>
|
||
<div style={{ width: 50, height: 3, background: 'var(--border-color)', borderRadius: 2, overflow: 'hidden' }}>
|
||
<div style={{ height: '100%', width: `${grpPct}%`, background: grpPct === 100 ? '#10b981' : tc, transition: 'width 0.3s' }} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Processes */}
|
||
<div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'column', gap: 5 }}>
|
||
{items.map(proc => {
|
||
const key = `proc_${proc.id}`;
|
||
const checked = !!checkedItems[key];
|
||
const tagColor = TAG_COLORS[proc.tag] || '#64748b';
|
||
const editable = !disabled && isMyTeam;
|
||
return (
|
||
<div
|
||
key={key}
|
||
onClick={() => editable && onChange({ ...checkedItems, [key]: !checked })}
|
||
style={{
|
||
padding: '7px 10px', borderRadius: 6, cursor: editable ? 'pointer' : 'default',
|
||
background: checked ? `${tagColor}0d` : 'var(--bg-secondary)',
|
||
border: `1px solid ${checked ? `${tagColor}40` : 'var(--border-color)'}`,
|
||
transition: 'all 0.15s',
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
|
||
<div style={{
|
||
width: 15, height: 15, flexShrink: 0, marginTop: 1,
|
||
border: `1.5px solid ${checked ? tagColor : 'var(--border-color)'}`,
|
||
borderRadius: 3, background: checked ? tagColor : 'transparent',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
fontSize: 9, color: '#fff',
|
||
}}>
|
||
{checked ? '✓' : ''}
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{
|
||
fontSize: '12px', fontWeight: 600, lineHeight: 1.4,
|
||
color: checked ? 'var(--text-muted)' : 'var(--text-primary)',
|
||
textDecoration: checked ? 'line-through' : 'none',
|
||
}}>
|
||
{proc.title}
|
||
</div>
|
||
{proc.description && (
|
||
<div style={{ fontSize: '11px', color: 'var(--text-muted)', marginTop: 2, lineHeight: 1.35 }}>
|
||
{proc.description}
|
||
</div>
|
||
)}
|
||
{proc.tag !== 'normal' && (
|
||
<span style={{ display: 'inline-block', marginTop: 3, fontSize: '10px', fontFamily: 'monospace', padding: '1px 5px', borderRadius: 3, background: `${tagColor}20`, color: tagColor }}>
|
||
{proc.tag === 'critical' ? '🔴 ' : '⚡ '}{TAG_LABELS[proc.tag]}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/* eslint-disable no-unused-vars */
|
||
// Legacy hardcoded checklist kept for reference – replaced by configurable processes from API
|
||
const ON_CHECKLIST_LEGACY = [
|
||
// ── Phase 1: Sofort nach Vertragsunterzeichnung ────────────────────────
|
||
{ key: 'p1_hr_personalakte', phase: 'Phase 1 — Sofort nach Vertragsunterzeichnung', dept: 'HR', label: 'Personalakte anlegen', detail: 'Digitale Akte · Vertragskopie · Eintrittsdatum', tag: 'critical' },
|
||
{ key: 'p1_hr_abt_info', phase: 'Phase 1 — Sofort nach Vertragsunterzeichnung', dept: 'HR', label: 'Alle Abteilungen informieren', detail: 'IT, Vorgesetzten & Buchhaltung: Name, Position, Startdatum, Abteilung', tag: 'critical' },
|
||
{ key: 'p1_hr_bg_anmeldung', phase: 'Phase 1 — Sofort nach Vertragsunterzeichnung', dept: 'HR', label: 'Berufsgenossenschaft vorbereiten', detail: 'BG-Anmeldung vorbereiten', tag: 'normal' },
|
||
{ key: 'p1_it_ticket', phase: 'Phase 1 — Sofort nach Vertragsunterzeichnung', dept: 'IT', label: 'IT-Onboarding-Ticket anlegen', detail: 'Ticket im Helpdesk erstellen · startet alle IT-Aufgaben', tag: 'critical' },
|
||
{ key: 'p1_it_hardware_check', phase: 'Phase 1 — Sofort nach Vertragsunterzeichnung', dept: 'IT', label: 'Hardware prüfen & ggf. bestellen', detail: 'Verfügbaren Laptop prüfen · ggf. Neubestellung (Lieferzeit beachten!)', tag: 'critical' },
|
||
{ key: 'p1_vg_buddy', phase: 'Phase 1 — Sofort nach Vertragsunterzeichnung', dept: 'VG', label: 'Buddy / Paten benennen & informieren', detail: 'Erfahrenen Kollegen als Begleitung für die ersten Wochen auswählen', tag: 'critical' },
|
||
{ key: 'p1_vg_einarbeitungsplan',phase: 'Phase 1 — Sofort nach Vertragsunterzeichnung',dept: 'VG', label: '30-Tage-Einarbeitungsplan erstellen', detail: 'Aufgaben, Ziele, erste Projekte, Schulungsbedarf', tag: 'important'},
|
||
{ key: 'p1_bk_datev', phase: 'Phase 1 — Sofort nach Vertragsunterzeichnung', dept: 'BK', label: 'Mitarbeiter in DATEV anlegen', detail: 'Stammdaten · Eintrittsdatum · Kostenstelle · Abteilung', tag: 'critical' },
|
||
{ key: 'p1_bk_bankdaten', phase: 'Phase 1 — Sofort nach Vertragsunterzeichnung', dept: 'BK', label: 'Bankdaten & Steuerklasse anfordern', detail: 'IBAN-Formular senden · Steuerklasse · SV-Nummer anfordern', tag: 'important'},
|
||
|
||
// ── Phase 2: 2 Wochen vor Start ────────────────────────────────────────
|
||
{ key: 'p2_hr_welcome_mail', phase: 'Phase 2 — 2 Wochen vor Arbeitsbeginn', dept: 'HR', label: 'Willkommens-E-Mail senden', detail: 'Startzeit, Ansprechpartner, Parkplatz, Dresscode, Ausweis mitbringen', tag: 'important'},
|
||
{ key: 'p2_hr_formulare', phase: 'Phase 2 — 2 Wochen vor Arbeitsbeginn', dept: 'HR', label: 'Formulare vorbereiten', detail: 'Datenschutz · IT-Nutzungsordnung · Betriebsordnung · Schweigepflicht', tag: 'normal' },
|
||
{ key: 'p2_hr_ausweis', phase: 'Phase 2 — 2 Wochen vor Arbeitsbeginn', dept: 'HR', label: 'Mitarbeiterausweis beantragen', detail: 'Foto anfordern oder Fototermin Tag 1 planen', tag: 'normal' },
|
||
{ key: 'p2_it_ad_account', phase: 'Phase 2 — 2 Wochen vor Arbeitsbeginn', dept: 'IT', label: 'AD-Account erstellen', detail: 'Benutzername nach Konvention · Temp-Passwort · Gruppe/Abteilung', tag: 'critical' },
|
||
{ key: 'p2_it_email', phase: 'Phase 2 — 2 Wochen vor Arbeitsbeginn', dept: 'IT', label: 'E-Mail-Adresse einrichten', detail: 'Postfach anlegen · Signatur vorkonfigurieren · Verteiler aufnehmen', tag: 'critical' },
|
||
{ key: 'p2_it_hardware_setup', phase: 'Phase 2 — 2 Wochen vor Arbeitsbeginn', dept: 'IT', label: 'Hardware aufsetzen', detail: 'OS-Image · Windows Updates · Antivirus · Endpoint-Agent · Asset erfassen', tag: 'important'},
|
||
{ key: 'p2_vg_team_inform', phase: 'Phase 2 — 2 Wochen vor Arbeitsbeginn', dept: 'VG', label: 'Team informieren', detail: 'Teammitglieder über neuen Kollegen informieren · Buddy briefen', tag: 'important'},
|
||
{ key: 'p2_vg_arbeitsplatz', phase: 'Phase 2 — 2 Wochen vor Arbeitsbeginn', dept: 'VG', label: 'Arbeitsplatz vorbereiten', detail: 'Schreibtisch · Stuhl · Namensschild · Willkommensmappe bereitstellen', tag: 'normal' },
|
||
{ key: 'p2_bk_lohnkonto', phase: 'Phase 2 — 2 Wochen vor Arbeitsbeginn', dept: 'BK', label: 'Lohnkonto einrichten', detail: 'Gehaltsgruppe · Steuerklasse · Krankenkasse · Urlaubsanspruch', tag: 'important'},
|
||
{ key: 'p2_bk_sv_anmeldung', phase: 'Phase 2 — 2 Wochen vor Arbeitsbeginn', dept: 'BK', label: 'Sozialversicherung anmelden', detail: 'SV-Anmeldung bei Krankenkasse einreichen', tag: 'normal' },
|
||
|
||
// ── Phase 3: 1 Woche vor Start ────────────────────────────────────────
|
||
{ key: 'p3_hr_vollstaendigkeit', phase: 'Phase 3 — 1 Woche vor Arbeitsbeginn', dept: 'HR', label: 'Vollständigkeits-Check', detail: 'Alle Dokumente vollständig? IBAN? SV-Nummer? Unterweisungen geplant?', tag: 'critical' },
|
||
{ key: 'p3_hr_unterweisungen', phase: 'Phase 3 — 1 Woche vor Arbeitsbeginn', dept: 'HR', label: 'Pflichtunterweisungen planen', detail: 'Arbeitssicherheit · Brandschutz · Datenschutz in KW 1', tag: 'important'},
|
||
{ key: 'p3_it_systemtest', phase: 'Phase 3 — 1 Woche vor Arbeitsbeginn', dept: 'IT', label: 'Kompletttest aller Systeme', detail: 'Login · E-Mail · VPN · Netzlaufwerke · Teams testen', tag: 'critical' },
|
||
{ key: 'p3_it_software', phase: 'Phase 3 — 1 Woche vor Arbeitsbeginn', dept: 'IT', label: 'Software installieren', detail: 'Office 365 · VPN-Client · Teams · ERP/CRM · abteilungsspezifische Tools', tag: 'critical'},
|
||
{ key: 'p3_it_telefon', phase: 'Phase 3 — 1 Woche vor Arbeitsbeginn', dept: 'IT', label: 'Telefon / Durchwahl einrichten', detail: 'IP-Telefon oder Softphone · Durchwahl zuweisen · Mailbox konfigurieren', tag: 'important'},
|
||
{ key: 'p3_it_begruessung', phase: 'Phase 3 — 1 Woche vor Arbeitsbeginn', dept: 'IT', label: 'IT-Begrüßungsmappe drucken', detail: 'Quick-Start-Guide: Login, Helpdesk, WLAN, Drucker, wichtige URLs', tag: 'normal' },
|
||
{ key: 'p3_vg_erste_aufgaben', phase: 'Phase 3 — 1 Woche vor Arbeitsbeginn', dept: 'VG', label: 'Erste Aufgaben vorbereiten', detail: '2–3 konkrete, überschaubare Aufgaben für Tag 1 und Woche 1 definieren', tag: 'important'},
|
||
{ key: 'p3_vg_checkins', phase: 'Phase 3 — 1 Woche vor Arbeitsbeginn', dept: 'VG', label: 'Check-in-Termine planen', detail: 'Tägliche 15-Min-Calls Woche 1 · Wöchentliche 30-Min-Gespräche Monat 1', tag: 'normal' },
|
||
{ key: 'p3_bk_gehaltsabrechnung',phase: 'Phase 3 — 1 Woche vor Arbeitsbeginn',dept: 'BK', label: 'Gehaltsabrechnung vorbereiten', detail: 'Erstes Gehalt anteilig berechnen · Auszahlungstermin prüfen', tag: 'important'},
|
||
{ key: 'p3_bk_reisekosten', phase: 'Phase 3 — 1 Woche vor Arbeitsbeginn', dept: 'BK', label: 'Reisekostenformulare bereitstellen', detail: 'Spesenabrechnungsformulare und -richtlinien übergeben', tag: 'normal' },
|
||
|
||
// ── Phase 4: Erster Arbeitstag ────────────────────────────────────────
|
||
{ key: 'p4_hr_empfang', phase: 'Phase 4 — Erster Arbeitstag', dept: 'HR', label: 'Empfang & Begrüßung', detail: 'MA am Empfang abholen · Rundgang · Schlüssel/Badge · Parkausweis', tag: 'critical' },
|
||
{ key: 'p4_hr_formulare_sign', phase: 'Phase 4 — Erster Arbeitstag', dept: 'HR', label: 'Alle Formulare unterzeichnen', detail: 'Betriebsordnung · Datenschutz · IT-Nutzungsordnung · Schweigepflicht', tag: 'critical' },
|
||
{ key: 'p4_hr_willkommensmappe',phase: 'Phase 4 — Erster Arbeitstag', dept: 'HR', label: 'Willkommensmappe übergeben', detail: 'Unternehmensinfos · Organigramm · Notfallnummern · Kantineninfos', tag: 'normal' },
|
||
{ key: 'p4_it_hardware_uebergabe',phase: 'Phase 4 — Erster Arbeitstag',dept: 'IT', label: 'Hardware-Übergabe mit Protokoll', detail: 'Laptop + Zubehör übergeben · Übergabeprotokoll unterzeichnen lassen', tag: 'critical' },
|
||
{ key: 'p4_it_erster_login', phase: 'Phase 4 — Erster Arbeitstag', dept: 'IT', label: 'Ersten Login begleiten', detail: 'Passwort ändern · MFA einrichten · E-Mail · VPN · Teams testen', tag: 'critical' },
|
||
{ key: 'p4_it_it_mappe', phase: 'Phase 4 — Erster Arbeitstag', dept: 'IT', label: 'IT-Begrüßungsmappe übergeben', detail: 'Helpdesk-Kontakt · Passwortregeln · wichtige URLs · Verhaltensregeln', tag: 'important'},
|
||
{ key: 'p4_vg_begruessung', phase: 'Phase 4 — Erster Arbeitstag', dept: 'VG', label: 'Persönliche Begrüßung (nicht delegieren)', detail: 'Vorgesetzter begrüßt persönlich · Teamvorstellung · Buddy vorstellen', tag: 'critical' },
|
||
{ key: 'p4_vg_einarbeitungsplan',phase: 'Phase 4 — Erster Arbeitstag',dept: 'VG', label: 'Einarbeitungsplan besprechen', detail: 'Ziele Probezeit · erste Aufgaben · Erwartungen · Fragen beantworten', tag: 'important'},
|
||
{ key: 'p4_vg_mittagessen', phase: 'Phase 4 — Erster Arbeitstag', dept: 'VG', label: 'Gemeinsames Mittagessen mit Team', detail: 'Sozialer Anschluss ist entscheidend!', tag: 'normal' },
|
||
{ key: 'p4_bk_bankverbindung', phase: 'Phase 4 — Erster Arbeitstag', dept: 'BK', label: 'Bankverbindung bestätigen', detail: 'IBAN im System prüfen · erste Gehaltsabrechnung korrekt hinterlegt?', tag: 'important'},
|
||
{ key: 'p4_bk_zeiterfassung', phase: 'Phase 4 — Erster Arbeitstag', dept: 'BK', label: 'Zeiterfassung erklären', detail: 'System vorstellen · ersten Einstempeln begleiten · Urlaubsantragsprozess', tag: 'normal' },
|
||
];
|
||
/* eslint-enable no-unused-vars */
|
||
|
||
// Mapping: system role → responsible_team
|
||
const ROLE_TO_TEAM = {
|
||
'hr_personal': 'hr',
|
||
'buchhaltung': 'buchhaltung',
|
||
'support': 'it',
|
||
};
|
||
|
||
const STATUS_LABEL = { pending: 'Ausstehend', in_progress: 'In Bearbeitung', completed: 'Abgeschlossen' };
|
||
const STATUS_CSS = { pending: 'status-pending', in_progress: 'status-in_progress', completed: 'status-completed' };
|
||
|
||
const formatDate = (d) => d ? new Date(d).toLocaleDateString('de-DE') : '—';
|
||
|
||
// ── Kleine Hilfstabelle ───────────────────────────────────────────────────────
|
||
const ProtocolTable = ({ protocols, dateKey, dateLabel, onEdit, onOpen, onAction, actionLabel, actionClass, onDelete, onDownload, canDelete = true }) => (
|
||
<div className="card" style={{ overflowX: 'auto' }}>
|
||
<table className="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Mitarbeiter</th>
|
||
<th>{dateLabel}</th>
|
||
<th>Status</th>
|
||
<th>PDF</th>
|
||
<th>Erstellt von</th>
|
||
<th>Aktionen</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{protocols.length === 0 ? (
|
||
<tr><td colSpan="6" style={{ textAlign: 'center', color: 'var(--text-muted)', padding: '2rem' }}>Keine Protokolle vorhanden</td></tr>
|
||
) : protocols.map(p => (
|
||
<tr key={p.id}>
|
||
<td>
|
||
<div style={{ fontWeight: 600 }}>
|
||
{(p.emp_first_name || p.employee_sys_first_name || '')} {(p.emp_last_name || p.employee_sys_last_name || '')}
|
||
</div>
|
||
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>
|
||
{p.emp_private_email || p.employee_email || p.department || ''}
|
||
</div>
|
||
</td>
|
||
<td>{formatDate(p[dateKey])}</td>
|
||
<td>
|
||
<span className={`status-badge ${STATUS_CSS[p.status] || ''}`}>{STATUS_LABEL[p.status] || p.status}</span>
|
||
{p.employee_confirmed_at && (
|
||
<div style={{ marginTop: 4 }}>
|
||
<span style={{ fontSize: '0.7rem', background: '#dcfce7', color: '#16a34a', borderRadius: 4, padding: '1px 6px', fontWeight: 600 }}>
|
||
✅ Bestätigt {formatDate(p.employee_confirmed_at)}
|
||
</span>
|
||
</div>
|
||
)}
|
||
{!p.employee_confirmed_at && p.confirm_token && (
|
||
<div style={{ marginTop: 4 }}>
|
||
<span style={{ fontSize: '0.7rem', background: '#fef9c3', color: '#ca8a04', borderRadius: 4, padding: '1px 6px', fontWeight: 600 }}>
|
||
⏳ Ausstehend
|
||
</span>
|
||
</div>
|
||
)}
|
||
</td>
|
||
<td>
|
||
{p.pdf_file_path
|
||
? <button onClick={() => onDownload(p)} className="btn btn-success btn-small">📄 Download</button>
|
||
: <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem' }}>—</span>}
|
||
</td>
|
||
<td style={{ fontSize: '0.85rem' }}>{p.created_by_username}</td>
|
||
<td>
|
||
<div className="table-actions">
|
||
{onOpen
|
||
? <button onClick={() => onOpen(p)} className="btn btn-primary btn-small">Öffnen →</button>
|
||
: <>
|
||
<button onClick={() => onEdit(p)} className="btn btn-primary btn-small">Bearbeiten</button>
|
||
{onAction && <button onClick={() => onAction(p)} className={`btn ${actionClass} btn-small`}>{actionLabel}</button>}
|
||
{canDelete && <button onClick={() => onDelete(p.id)} className="btn btn-danger btn-small">Löschen</button>}
|
||
</>
|
||
}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
|
||
// ── Hauptkomponente ───────────────────────────────────────────────────────────
|
||
const OnOffboardingPage = () => {
|
||
const navigate = useNavigate();
|
||
const { user, isAdmin, isSuperAdmin, canViewLifecycle } = useAuth();
|
||
const canManage = isAdmin() || isSuperAdmin();
|
||
const canCreate = canViewLifecycle(); // hr_personal + buchhaltung dürfen anlegen
|
||
const [tab, setTab] = useState('onboarding');
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
// Shared data
|
||
const [users, setUsers] = useState([]);
|
||
const [assets, setAssets] = useState([]); // eslint-disable-line no-unused-vars
|
||
|
||
// Onboarding state
|
||
const [onProtocols, setOnProtocols] = useState([]);
|
||
const [showOnModal, setShowOnModal] = useState(false);
|
||
const [wizardStep, setWizardStep] = useState(1);
|
||
const [wizardForm, setWizardForm] = useState({
|
||
emp_first_name: '', emp_last_name: '', emp_private_email: '', emp_phone: '',
|
||
emp_address: '', department: '', position: '', work_location: 'Büro',
|
||
hours_model: 'Vollzeit (40h)', vacation_model: '30 Tage', start_date: '', notes: '',
|
||
dept_contacts: { VG: '' },
|
||
});
|
||
const [entraLoading, setEntraLoading] = useState(false);
|
||
const [entraSearchQuery, setEntraSearchQuery] = useState('');
|
||
const [entraSearchResults, setEntraSearchResults] = useState(null); // null=no search yet, []=no results
|
||
const [showOnDetail, setShowOnDetail] = useState(false);
|
||
const [editingOn, setEditingOn] = useState(null);
|
||
const [onForm, setOnForm] = useState({ employee_user_id: '', start_date: today(), status: 'pending', checklist_data: {}, notes: '', asset_ids: [] });
|
||
|
||
// Offboarding state
|
||
const [offProtocols, setOffProtocols] = useState([]);
|
||
const [showOffModal, setShowOffModal] = useState(false);
|
||
const [showOffDetail, setShowOffDetail] = useState(false);
|
||
const [showReturnModal, setShowReturnModal] = useState(false);
|
||
const [editingOff, setEditingOff] = useState(null);
|
||
const [offForm, setOffForm] = useState({ employee_user_id: '', exit_date: today(), status: 'pending', checklist_data: {}, notes: '' });
|
||
const [assignedAssets, setAssignedAssets] = useState([]);
|
||
const [assetReturns, setAssetReturns] = useState([]);
|
||
|
||
// Configurable departments + processes (loaded from API)
|
||
const [departments, setDepartments] = useState([]);
|
||
const [onProcesses, setOnProcesses] = useState([]);
|
||
const [offProcesses, setOffProcesses] = useState([]);
|
||
|
||
function today() { return new Date().toISOString().split('T')[0]; }
|
||
|
||
useEffect(() => { loadAll(); }, []);
|
||
|
||
const loadAll = async () => {
|
||
try {
|
||
const [on, off, u, a, depts, onProcs, offProcs] = await Promise.all([
|
||
onboardingService.getAll().catch(() => []),
|
||
offboardingService.getAll().catch(() => []),
|
||
userService.getAll().catch(() => []),
|
||
assetService.getAll().catch(() => []),
|
||
onboardingProcessService.getDepartments().catch(() => []),
|
||
onboardingProcessService.getChecklistProcesses('onboarding').catch(() => []),
|
||
onboardingProcessService.getChecklistProcesses('offboarding').catch(() => []),
|
||
]);
|
||
setOnProtocols(on);
|
||
setOffProtocols(off);
|
||
setUsers(u.filter(x => x.is_active));
|
||
setAssets(a.filter(x => x.status === 'verfuegbar'));
|
||
setDepartments(depts);
|
||
setOnProcesses(onProcs);
|
||
setOffProcesses(offProcs);
|
||
} catch { toast.error('Fehler beim Laden'); }
|
||
finally { setLoading(false); }
|
||
};
|
||
|
||
// ── Onboarding handlers ───────────────────────────────────────────────────
|
||
const openOnCreate = () => {
|
||
setEditingOn(null);
|
||
setWizardStep(1);
|
||
setWizardForm({
|
||
emp_first_name: '', emp_last_name: '', emp_private_email: '', emp_phone: '',
|
||
emp_address: '', department: '', position: '', work_location: 'Büro',
|
||
hours_model: 'Vollzeit (40h)', vacation_model: '30 Tage',
|
||
start_date: today(), notes: '',
|
||
dept_contacts: { VG: '' },
|
||
});
|
||
setEntraSearchQuery('');
|
||
setEntraSearchResults(null);
|
||
setShowOnModal(true);
|
||
};
|
||
|
||
const openOnEdit = (p) => {
|
||
setEditingOn(p);
|
||
setOnForm({ employee_user_id: p.employee_user_id, start_date: p.start_date, status: p.status, checklist_data: p.checklist_data ? JSON.parse(p.checklist_data) : {}, notes: p.notes || '', asset_ids: [] });
|
||
setShowOnDetail(true);
|
||
};
|
||
|
||
// Helper: get display name for a protocol
|
||
const getOnName = (p) => {
|
||
const first = p.emp_first_name || p.employee_sys_first_name || '';
|
||
const last = p.emp_last_name || p.employee_sys_last_name || '';
|
||
return `${first} ${last}`.trim() || p.employee_username || '—';
|
||
};
|
||
|
||
// Returns the user's responsible_team (for ProcessChecklist visual highlight + edit control)
|
||
const getUserTeam = () => ROLE_TO_TEAM[user?.role_name] || null;
|
||
|
||
// Whether current user may edit the checklist
|
||
const canEditChecklist = (protocol) => {
|
||
if (isAdmin() || isSuperAdmin()) return true;
|
||
if (ROLE_TO_TEAM[user?.role_name]) return true; // role-based team user
|
||
try {
|
||
const dc = protocol?.dept_contacts ? JSON.parse(protocol.dept_contacts) : {};
|
||
return String(dc.VG) === String(user?.id); // VG from Entra lookup
|
||
} catch { return false; }
|
||
};
|
||
|
||
const submitWizardStep1 = (e) => {
|
||
e.preventDefault();
|
||
setWizardStep(2);
|
||
};
|
||
|
||
const searchEntraByName = async () => {
|
||
if (!entraSearchQuery || entraSearchQuery.trim().length < 2) return;
|
||
setEntraLoading(true);
|
||
setEntraSearchResults(null);
|
||
try {
|
||
const res = await import('../services/api').then(m => m.default.get(`/onboarding/entra-search?name=${encodeURIComponent(entraSearchQuery.trim())}`));
|
||
setEntraSearchResults(res.data.data || []);
|
||
} catch { setEntraSearchResults([]); }
|
||
finally { setEntraLoading(false); }
|
||
};
|
||
|
||
const submitWizard = async (e) => {
|
||
e.preventDefault();
|
||
try {
|
||
const payload = {
|
||
...wizardForm,
|
||
status: 'pending',
|
||
checklist_data: {},
|
||
};
|
||
const np = await onboardingService.create(payload);
|
||
toast.success('Onboarding erstellt');
|
||
setShowOnModal(false);
|
||
await loadAll();
|
||
const fresh = await onboardingService.getById(np.id);
|
||
openOnEdit(fresh);
|
||
} catch (err) { toast.error(err.message || 'Fehler'); }
|
||
};
|
||
|
||
const submitOn = async (e) => {
|
||
e.preventDefault();
|
||
try {
|
||
await onboardingService.update(editingOn.id, { status: onForm.status, checklist_data: onForm.checklist_data, notes: onForm.notes });
|
||
toast.success('Gespeichert');
|
||
setShowOnDetail(false);
|
||
loadAll();
|
||
} catch (err) { toast.error(err.message || 'Fehler'); }
|
||
};
|
||
|
||
const completeOn = async () => {
|
||
const relevantProcesses = onProcesses.filter(p => !editingOn?.department || p.department_name === editingOn.department);
|
||
const unchecked = relevantProcesses.filter(p => !onForm.checklist_data[`proc_${p.id}`]);
|
||
if (unchecked.length > 0) {
|
||
toast.error(`Noch ${unchecked.length} Aufgabe(n) offen — bitte zuerst alle Punkte abhaken.`);
|
||
return;
|
||
}
|
||
try {
|
||
await onboardingService.update(editingOn.id, { status: 'completed', checklist_data: onForm.checklist_data, notes: onForm.notes, completion_date: today() });
|
||
toast.success('Onboarding abgeschlossen!');
|
||
setShowOnDetail(false);
|
||
loadAll();
|
||
} catch (err) { toast.error(err.message || 'Fehler'); }
|
||
};
|
||
|
||
const regenerateOnPdf = async () => {
|
||
try {
|
||
await onboardingService.regeneratePdf(editingOn.id);
|
||
toast.success('PDF wurde neu erstellt');
|
||
await loadAll();
|
||
const fresh = await onboardingService.getById(editingOn.id);
|
||
setEditingOn(fresh);
|
||
} catch (err) { toast.error(err.message || 'Fehler'); }
|
||
};
|
||
|
||
const sendOnConfirmationEmail = async () => {
|
||
if (!editingOn.emp_private_email) {
|
||
toast.error('Keine private E-Mail-Adresse beim Mitarbeiter hinterlegt');
|
||
return;
|
||
}
|
||
try {
|
||
await onboardingService.sendConfirmationEmail(editingOn.id);
|
||
toast.success(`📧 Bestätigungsmail an ${editingOn.emp_private_email} gesendet`);
|
||
} catch (err) { toast.error(err.message || 'Fehler beim Senden'); }
|
||
};
|
||
|
||
const regenerateOffPdf = async () => {
|
||
try {
|
||
await offboardingService.regeneratePdf(editingOff.id);
|
||
toast.success('PDF wurde neu erstellt');
|
||
loadAll();
|
||
} catch (err) { toast.error(err.message || 'Fehler'); }
|
||
};
|
||
|
||
const deleteOn = async (id) => {
|
||
if (!window.confirm('Protokoll wirklich löschen?')) return;
|
||
try { await onboardingService.delete(id); toast.success('Gelöscht'); loadAll(); }
|
||
catch (err) { toast.error(err.message || 'Fehler'); }
|
||
};
|
||
|
||
// ── Offboarding handlers ──────────────────────────────────────────────────
|
||
const openOffCreate = () => {
|
||
setEditingOff(null);
|
||
setOffForm({ employee_user_id: '', exit_date: today(), status: 'pending', checklist_data: {}, notes: '' });
|
||
setShowOffModal(true);
|
||
};
|
||
|
||
const openOffEdit = (p) => {
|
||
setEditingOff(p);
|
||
setOffForm({ employee_user_id: p.employee_user_id, exit_date: p.exit_date, status: p.status, checklist_data: p.checklist_data ? JSON.parse(p.checklist_data) : {}, notes: p.notes || '' });
|
||
setShowOffDetail(true);
|
||
};
|
||
|
||
const openReturnAssets = async (p) => {
|
||
setEditingOff(p);
|
||
try {
|
||
const all = await assetService.getAll();
|
||
const ua = all.filter(a => a.assigned_to_user_id === p.employee_user_id && a.status === 'zugewiesen');
|
||
setAssignedAssets(ua);
|
||
setAssetReturns(ua.map(a => ({ asset_id: a.id, condition: 'gut' })));
|
||
setShowReturnModal(true);
|
||
} catch { toast.error('Fehler beim Laden der Assets'); }
|
||
};
|
||
|
||
const submitOff = async (e) => {
|
||
e.preventDefault();
|
||
try {
|
||
if (editingOff) {
|
||
await offboardingService.update(editingOff.id, { status: offForm.status, checklist_data: offForm.checklist_data, notes: offForm.notes });
|
||
toast.success('Gespeichert');
|
||
setShowOffDetail(false);
|
||
} else {
|
||
const np = await offboardingService.create(offForm);
|
||
toast.success('Offboarding erstellt');
|
||
setShowOffModal(false);
|
||
await loadAll();
|
||
const fresh = await offboardingService.getById(np.id);
|
||
openReturnAssets(fresh);
|
||
}
|
||
loadAll();
|
||
} catch (err) { toast.error(err.message || 'Fehler'); }
|
||
};
|
||
|
||
const submitReturn = async (e) => {
|
||
e.preventDefault();
|
||
try {
|
||
await offboardingService.returnAssets(editingOff.id, assetReturns);
|
||
toast.success('Assets zurückgegeben & PDF erstellt');
|
||
setShowReturnModal(false);
|
||
loadAll();
|
||
} catch (err) { toast.error(err.message || 'Fehler'); }
|
||
};
|
||
|
||
const completeOff = async () => {
|
||
const relevantProcesses = offProcesses.filter((p, i, arr) =>
|
||
arr.findIndex(x => x.responsible_team === p.responsible_team && x.title === p.title) === i
|
||
);
|
||
const unchecked = relevantProcesses.filter(p => !offForm.checklist_data[`proc_${p.id}`]);
|
||
if (unchecked.length > 0) {
|
||
toast.error(`Noch ${unchecked.length} Aufgabe(n) offen — bitte zuerst alle Punkte abhaken.`);
|
||
return;
|
||
}
|
||
try {
|
||
await offboardingService.update(editingOff.id, { status: 'completed', checklist_data: offForm.checklist_data, notes: offForm.notes, completion_date: today() });
|
||
toast.success('Offboarding abgeschlossen!');
|
||
setShowOffDetail(false);
|
||
loadAll();
|
||
} catch (err) { toast.error(err.message || 'Fehler'); }
|
||
};
|
||
|
||
const deleteOff = async (id) => {
|
||
if (!window.confirm('Protokoll wirklich löschen?')) return;
|
||
try { await offboardingService.delete(id); toast.success('Gelöscht'); loadAll(); }
|
||
catch (err) { toast.error(err.message || 'Fehler'); }
|
||
};
|
||
|
||
if (loading) return <div className="main-content"><LoadingSpinner /></div>;
|
||
|
||
// Dept-contacts only see onboardings where they are assigned; hr_personal sees all
|
||
const visibleOnProtocols = canCreate
|
||
? onProtocols
|
||
: onProtocols.filter(p => {
|
||
try {
|
||
const dc = p.dept_contacts ? JSON.parse(p.dept_contacts) : {};
|
||
return Object.values(dc).some(uid => String(uid) === String(user?.id));
|
||
} catch { return false; }
|
||
});
|
||
|
||
const onPending = visibleOnProtocols.filter(p => p.status !== 'completed').length;
|
||
const offPending = offProtocols.filter(p => p.status !== 'completed').length;
|
||
|
||
return (
|
||
<div className="main-content">
|
||
<div className="container">
|
||
{/* Header */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
|
||
<div>
|
||
<h1 style={{ margin: 0, fontSize: '1.5rem', fontWeight: 700 }}>👥 Mitarbeiter-Lifecycle</h1>
|
||
<p style={{ margin: '4px 0 0', color: 'var(--text-muted)', fontSize: '0.875rem' }}>
|
||
On- und Offboarding-Protokolle verwalten
|
||
</p>
|
||
</div>
|
||
{canCreate && tab !== 'prozesse' && (
|
||
<button
|
||
className="btn btn-primary"
|
||
onClick={tab === 'onboarding' ? openOnCreate : openOffCreate}
|
||
>
|
||
+ {tab === 'onboarding' ? 'Neues Onboarding' : 'Neues Offboarding'}
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div style={{ display: 'flex', gap: 4, marginBottom: 20, borderBottom: '1px solid var(--border-color)', paddingBottom: 0 }}>
|
||
{[
|
||
{ key: 'onboarding', label: '🟢 Onboarding', count: onPending },
|
||
{ key: 'offboarding', label: '🔴 Offboarding', count: offPending },
|
||
{ key: 'prozesse', label: '⚙️ Prozesse', count: 0 },
|
||
].map(t => (
|
||
<button
|
||
key={t.key}
|
||
onClick={() => setTab(t.key)}
|
||
style={{
|
||
padding: '10px 20px', border: 'none', background: 'none', cursor: 'pointer',
|
||
fontWeight: 600, fontSize: '0.9rem',
|
||
color: tab === t.key ? 'var(--primary)' : 'var(--text-muted)',
|
||
borderBottom: tab === t.key ? '2px solid var(--primary)' : '2px solid transparent',
|
||
marginBottom: -1, transition: 'all 0.15s',
|
||
}}
|
||
>
|
||
{t.label}
|
||
{t.count > 0 && (
|
||
<span style={{ marginLeft: 6, background: tab === t.key ? 'var(--primary)' : 'var(--text-muted)', color: '#fff', borderRadius: 10, padding: '1px 7px', fontSize: '0.72rem' }}>
|
||
{t.count}
|
||
</span>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Content */}
|
||
{tab === 'onboarding' && (
|
||
<ProtocolTable
|
||
protocols={visibleOnProtocols}
|
||
dateKey="start_date" dateLabel="Startdatum"
|
||
onEdit={openOnEdit}
|
||
onDelete={deleteOn}
|
||
canDelete={canManage}
|
||
onDownload={p => p.pdf_file_path && window.open(onboardingService.downloadPdf(p.pdf_file_path), '_blank')}
|
||
/>
|
||
)}
|
||
{tab === 'offboarding' && (
|
||
<ProtocolTable
|
||
protocols={offProtocols}
|
||
dateKey="exit_date" dateLabel="Austrittsdatum"
|
||
onOpen={p => navigate(`/lifecycle/offboarding/${p.id}`)}
|
||
onDownload={p => p.pdf_file_path && window.open(offboardingService.downloadPdf(p.pdf_file_path), '_blank')}
|
||
/>
|
||
)}
|
||
{tab === 'prozesse' && <ProcessManagementPage embedded />}
|
||
</div>
|
||
|
||
{/* ── Onboarding: Wizard Modal ──────────────────────────────────────── */}
|
||
{showOnModal && (
|
||
<div className="modal-overlay" onClick={() => setShowOnModal(false)}>
|
||
<div className="modal-content modal-large" onClick={e => e.stopPropagation()} style={{ maxWidth: 680 }}>
|
||
{/* Wizard header */}
|
||
<div className="modal-header">
|
||
<div>
|
||
<h2 className="modal-title" style={{ marginBottom: 2 }}>Neues Onboarding</h2>
|
||
<div style={{ fontSize: '12px', color: 'var(--text-muted)' }}>
|
||
Schritt {wizardStep} von 2 — {wizardStep === 1 ? 'Mitarbeiterdaten' : 'Abteilungen & Verantwortliche'}
|
||
</div>
|
||
</div>
|
||
<button className="modal-close" onClick={() => setShowOnModal(false)}>×</button>
|
||
</div>
|
||
|
||
{/* Step indicator */}
|
||
<div style={{ padding: '12px 24px 0', display: 'flex', gap: 16, alignItems: 'center' }}>
|
||
{[{ n: 1, label: 'Persönliche Daten' }, { n: 2, label: 'Abteilungen' }].map((s, i) => (
|
||
<React.Fragment key={s.n}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||
<div style={{
|
||
width: 26, height: 26, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
fontSize: '11px', fontWeight: 700,
|
||
background: wizardStep >= s.n ? 'var(--cereda-primary)' : 'var(--bg-tertiary)',
|
||
color: wizardStep >= s.n ? '#fff' : 'var(--text-muted)',
|
||
border: `2px solid ${wizardStep >= s.n ? 'var(--cereda-primary)' : 'var(--border-color)'}`,
|
||
}}>{wizardStep > s.n ? '✓' : s.n}</div>
|
||
<span style={{ fontSize: '12px', fontWeight: 600, color: wizardStep >= s.n ? 'var(--text-primary)' : 'var(--text-muted)' }}>{s.label}</span>
|
||
</div>
|
||
{i < 1 && <div style={{ flex: 1, height: 2, background: wizardStep > s.n ? 'var(--cereda-primary)' : 'var(--border-color)', borderRadius: 2 }} />}
|
||
</React.Fragment>
|
||
))}
|
||
</div>
|
||
|
||
{/* Step 1: Personal data */}
|
||
{wizardStep === 1 && (
|
||
<form onSubmit={submitWizardStep1}>
|
||
<div style={{ padding: '20px 24px' }}>
|
||
{/* Name row */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
|
||
<div className="form-group" style={{ margin: 0 }}>
|
||
<label className="form-label">Vorname *</label>
|
||
<input className="form-input" type="text" placeholder="Max" required
|
||
value={wizardForm.emp_first_name}
|
||
onChange={e => setWizardForm({ ...wizardForm, emp_first_name: e.target.value })} />
|
||
</div>
|
||
<div className="form-group" style={{ margin: 0 }}>
|
||
<label className="form-label">Nachname *</label>
|
||
<input className="form-input" type="text" placeholder="Mustermann" required
|
||
value={wizardForm.emp_last_name}
|
||
onChange={e => setWizardForm({ ...wizardForm, emp_last_name: e.target.value })} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contact row */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
|
||
<div className="form-group" style={{ margin: 0 }}>
|
||
<label className="form-label">Private E-Mail *</label>
|
||
<input className="form-input" type="email" placeholder="max@privat.de" required
|
||
value={wizardForm.emp_private_email}
|
||
onChange={e => setWizardForm({ ...wizardForm, emp_private_email: e.target.value })} />
|
||
</div>
|
||
<div className="form-group" style={{ margin: 0 }}>
|
||
<label className="form-label">Telefonnummer</label>
|
||
<input className="form-input" type="tel" placeholder="+49 151 1234567"
|
||
value={wizardForm.emp_phone}
|
||
onChange={e => setWizardForm({ ...wizardForm, emp_phone: e.target.value })} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Address */}
|
||
<div className="form-group" style={{ marginBottom: 16 }}>
|
||
<label className="form-label">Adresse</label>
|
||
<input className="form-input" type="text" placeholder="Musterstraße 1, 12345 Musterstadt"
|
||
value={wizardForm.emp_address}
|
||
onChange={e => setWizardForm({ ...wizardForm, emp_address: e.target.value })} />
|
||
</div>
|
||
|
||
{/* Job info row */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
|
||
<div className="form-group" style={{ margin: 0 }}>
|
||
<label className="form-label">Abteilung *</label>
|
||
<select className="form-select" required
|
||
value={wizardForm.department}
|
||
onChange={e => setWizardForm({ ...wizardForm, department: e.target.value })}>
|
||
<option value="">— Bitte wählen —</option>
|
||
{departments.map(d => <option key={d.id} value={d.name}>{d.icon} {d.name}</option>)}
|
||
</select>
|
||
</div>
|
||
<div className="form-group" style={{ margin: 0 }}>
|
||
<label className="form-label">Position *</label>
|
||
<input className="form-input" type="text" placeholder="z.B. Softwareentwickler" required
|
||
value={wizardForm.position}
|
||
onChange={e => setWizardForm({ ...wizardForm, position: e.target.value })} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Start date + work location */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
|
||
<div className="form-group" style={{ margin: 0 }}>
|
||
<label className="form-label">Startdatum *</label>
|
||
<input className="form-input" type="date" required
|
||
value={wizardForm.start_date}
|
||
onChange={e => setWizardForm({ ...wizardForm, start_date: e.target.value })} />
|
||
</div>
|
||
<div className="form-group" style={{ margin: 0 }}>
|
||
<label className="form-label">Arbeitsort</label>
|
||
<select className="form-select" value={wizardForm.work_location} onChange={e => setWizardForm({ ...wizardForm, work_location: e.target.value })}>
|
||
<option>Büro</option>
|
||
<option>Homeoffice</option>
|
||
<option>Hybrid</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Hours + vacation model */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
|
||
<div className="form-group" style={{ margin: 0 }}>
|
||
<label className="form-label">Stundenmodell</label>
|
||
<select className="form-select" value={wizardForm.hours_model} onChange={e => setWizardForm({ ...wizardForm, hours_model: e.target.value })}>
|
||
<option>Vollzeit (40h)</option>
|
||
<option>Vollzeit (38h)</option>
|
||
<option>Teilzeit (30h)</option>
|
||
<option>Teilzeit (20h)</option>
|
||
<option>Minijob</option>
|
||
</select>
|
||
</div>
|
||
<div className="form-group" style={{ margin: 0 }}>
|
||
<label className="form-label">Urlaubsmodell</label>
|
||
<select className="form-select" value={wizardForm.vacation_model} onChange={e => setWizardForm({ ...wizardForm, vacation_model: e.target.value })}>
|
||
<option>25 Tage</option>
|
||
<option>27 Tage</option>
|
||
<option>28 Tage</option>
|
||
<option>30 Tage</option>
|
||
<option>Gesetzlich (20 Tage)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Notes */}
|
||
<div className="form-group" style={{ marginBottom: 0 }}>
|
||
<label className="form-label">Interne Notizen</label>
|
||
<textarea className="form-textarea" rows="2" placeholder="Besonderheiten, Hinweise für IT / HR…"
|
||
value={wizardForm.notes}
|
||
onChange={e => setWizardForm({ ...wizardForm, notes: e.target.value })} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card-footer">
|
||
<button type="button" className="btn btn-secondary" onClick={() => setShowOnModal(false)}>Abbrechen</button>
|
||
<button type="submit" className="btn btn-primary">Weiter →</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
|
||
{/* Step 2: Rollen-Info + Vorgesetzter via Entra */}
|
||
{wizardStep === 2 && (
|
||
<form onSubmit={submitWizard}>
|
||
<div style={{ padding: '20px 24px' }}>
|
||
|
||
{/* Role-based info */}
|
||
<div style={{ marginBottom: 20, padding: '14px 16px', background: 'var(--bg-secondary)', borderRadius: 8, border: '1px solid var(--border-color)' }}>
|
||
<div style={{ fontSize: '12px', fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>
|
||
Rollenbasierte Sichtbarkeit
|
||
</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
|
||
{[
|
||
{ color: '#3b82f6', label: '🧑💼 HR / Personal', role: 'hr_personal', desc: 'Personalakte, Formulare, Empfang' },
|
||
{ color: '#10b981', label: '💻 IT', role: 'support', desc: 'Accounts, Hardware, Software' },
|
||
{ color: '#a78bfa', label: '💶 Buchhaltung', role: 'buchhaltung', desc: 'DATEV, Lohnkonto, SV-Anmeldung' },
|
||
].map(d => (
|
||
<div key={d.role} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, padding: '8px 10px', borderRadius: 6, borderLeft: `3px solid ${d.color}`, background: d.color + '0a' }}>
|
||
<div>
|
||
<div style={{ fontSize: '12px', fontWeight: 700, color: d.color }}>{d.label}</div>
|
||
<div style={{ fontSize: '11px', color: 'var(--text-muted)' }}>
|
||
Rolle: <code style={{ background: 'var(--bg-tertiary)', padding: '1px 5px', borderRadius: 3 }}>{d.role}</code>
|
||
</div>
|
||
<div style={{ fontSize: '11px', color: 'var(--text-muted)', marginTop: 2 }}>{d.desc}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* VG via Entra Namenssuche */}
|
||
<div style={{ padding: '14px 16px', border: `1px solid ${wizardForm.dept_contacts.VG ? '#f59e0b60' : 'var(--border-color)'}`, borderLeft: '4px solid #f59e0b', borderRadius: 8, background: wizardForm.dept_contacts.VG ? '#f59e0b0a' : 'var(--bg-secondary)' }}>
|
||
<div style={{ marginBottom: 10 }}>
|
||
<div style={{ fontSize: '13px', fontWeight: 700, color: '#f59e0b', marginBottom: 2 }}>👔 Vorgesetzter</div>
|
||
<div style={{ fontSize: '11px', color: 'var(--text-muted)' }}>Einarbeitungsplan, Buddy, Team-Integration</div>
|
||
</div>
|
||
|
||
{/* Entra name search */}
|
||
<div style={{ fontSize: '11px', color: 'var(--text-muted)', marginBottom: 6 }}>In Entra nach Name suchen:</div>
|
||
<div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
|
||
<input className="form-input" style={{ fontSize: '13px', flex: 1 }}
|
||
type="text" placeholder="Name eingeben (mind. 2 Zeichen)…"
|
||
value={entraSearchQuery}
|
||
onChange={e => setEntraSearchQuery(e.target.value)}
|
||
onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), searchEntraByName())} />
|
||
<button type="button" className="btn btn-secondary" style={{ fontSize: '12px', padding: '6px 12px', whiteSpace: 'nowrap' }}
|
||
onClick={searchEntraByName}
|
||
disabled={entraLoading || entraSearchQuery.trim().length < 2}>
|
||
{entraLoading ? '⏳' : '🔍 Suchen'}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Search results */}
|
||
{entraSearchResults !== null && entraSearchResults.length === 0 && (
|
||
<div style={{ fontSize: '12px', color: 'var(--text-muted)', fontStyle: 'italic', marginBottom: 10 }}>
|
||
Keine Ergebnisse für „{entraSearchQuery}".
|
||
</div>
|
||
)}
|
||
{entraSearchResults && entraSearchResults.length > 0 && (
|
||
<div style={{ marginBottom: 10, borderRadius: 6, border: '1px solid var(--border-color)', overflow: 'hidden' }}>
|
||
{entraSearchResults.map(u => (
|
||
<div key={u.entraId} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', borderBottom: '1px solid var(--border-color)', background: 'var(--bg-primary)', gap: 8 }}>
|
||
<div>
|
||
<div style={{ fontSize: '13px', fontWeight: 600 }}>{u.displayName}</div>
|
||
<div style={{ fontSize: '11px', color: 'var(--text-muted)' }}>
|
||
{[u.jobTitle, u.department, u.mail].filter(Boolean).join(' · ')}
|
||
</div>
|
||
</div>
|
||
<button type="button" className="btn btn-primary" style={{ fontSize: '11px', padding: '4px 10px', whiteSpace: 'nowrap' }}
|
||
onClick={() => {
|
||
const match = users.find(x => x.email?.toLowerCase() === u.mail?.toLowerCase());
|
||
setWizardForm({ ...wizardForm, dept_contacts: { ...wizardForm.dept_contacts, VG: match ? String(match.id) : u.mail } });
|
||
setEntraSearchResults(null);
|
||
setEntraSearchQuery('');
|
||
}}>
|
||
✓ Wählen
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Manual fallback */}
|
||
<div style={{ fontSize: '11px', color: 'var(--text-muted)', marginBottom: 6 }}>Oder direkt aus Systembenutzer wählen:</div>
|
||
<select className="form-select" style={{ fontSize: '13px' }}
|
||
value={wizardForm.dept_contacts.VG}
|
||
onChange={e => setWizardForm({ ...wizardForm, dept_contacts: { ...wizardForm.dept_contacts, VG: e.target.value } })}>
|
||
<option value="">— Kein Vorgesetzter zugewiesen —</option>
|
||
{users.map(u => <option key={u.id} value={u.id}>{u.first_name} {u.last_name}</option>)}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card-footer">
|
||
<button type="button" className="btn btn-secondary" onClick={() => setWizardStep(1)}>← Zurück</button>
|
||
<button type="submit" className="btn btn-primary">Onboarding starten ✓</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── Onboarding: Edit/Detail Modal ──────────────────────────────────── */}
|
||
{showOnDetail && editingOn && (
|
||
<div className="modal-overlay" onClick={() => setShowOnDetail(false)}>
|
||
<div className="modal-content modal-large" onClick={e => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h2 className="modal-title">Onboarding: {getOnName(editingOn)}</h2>
|
||
<button className="modal-close" onClick={() => setShowOnDetail(false)}>×</button>
|
||
</div>
|
||
<form onSubmit={submitOn}>
|
||
{/* Employee info summary */}
|
||
{editingOn && (editingOn.emp_first_name || editingOn.department) && (() => {
|
||
const dc = editingOn.dept_contacts ? JSON.parse(editingOn.dept_contacts) : {};
|
||
const deptLabels = { HR: '🧑💼 HR', IT: '💻 IT', VG: '👔 VG', BK: '💶 BK' };
|
||
const deptColors = { HR: '#3b82f6', IT: '#10b981', VG: '#f59e0b', BK: '#a78bfa' };
|
||
const getUserName = (uid) => {
|
||
const u = users.find(x => String(x.id) === String(uid));
|
||
return u ? `${u.first_name} ${u.last_name}` : null;
|
||
};
|
||
return (
|
||
<div style={{ margin: '0 0 0', background: 'var(--bg-secondary)', borderBottom: '1px solid var(--border-color)' }}>
|
||
{/* Personal info row */}
|
||
<div style={{ padding: '10px 24px', display: 'flex', flexWrap: 'wrap', gap: '16px', borderBottom: '1px solid var(--border-color)' }}>
|
||
{editingOn.emp_private_email && <div style={{ fontSize: '12px' }}><span style={{ color: 'var(--text-muted)' }}>E-Mail: </span><span style={{ fontWeight: 600 }}>{editingOn.emp_private_email}</span></div>}
|
||
{editingOn.department && <div style={{ fontSize: '12px' }}><span style={{ color: 'var(--text-muted)' }}>Abteilung: </span><span style={{ fontWeight: 600 }}>{editingOn.department}</span></div>}
|
||
{editingOn.position && <div style={{ fontSize: '12px' }}><span style={{ color: 'var(--text-muted)' }}>Position: </span><span style={{ fontWeight: 600 }}>{editingOn.position}</span></div>}
|
||
{editingOn.start_date && <div style={{ fontSize: '12px' }}><span style={{ color: 'var(--text-muted)' }}>Start: </span><span style={{ fontWeight: 600 }}>{formatDate(editingOn.start_date)}</span></div>}
|
||
{editingOn.hours_model && <div style={{ fontSize: '12px' }}><span style={{ color: 'var(--text-muted)' }}>Stunden: </span><span style={{ fontWeight: 600 }}>{editingOn.hours_model}</span></div>}
|
||
{editingOn.vacation_model && <div style={{ fontSize: '12px' }}><span style={{ color: 'var(--text-muted)' }}>Urlaub: </span><span style={{ fontWeight: 600 }}>{editingOn.vacation_model}</span></div>}
|
||
{editingOn.work_location && <div style={{ fontSize: '12px' }}><span style={{ color: 'var(--text-muted)' }}>Ort: </span><span style={{ fontWeight: 600 }}>{editingOn.work_location}</span></div>}
|
||
{editingOn.employee_confirmed_at
|
||
? <div style={{ fontSize: '12px' }}><span style={{ background: '#dcfce7', color: '#16a34a', borderRadius: 4, padding: '2px 8px', fontWeight: 600 }}>✅ Bestätigt am {formatDate(editingOn.employee_confirmed_at)}</span></div>
|
||
: editingOn.confirm_token
|
||
? <div style={{ fontSize: '12px' }}><span style={{ background: '#fef9c3', color: '#ca8a04', borderRadius: 4, padding: '2px 8px', fontWeight: 600 }}>⏳ Bestätigung ausstehend</span></div>
|
||
: null
|
||
}
|
||
</div>
|
||
{/* Dept contacts row */}
|
||
{Object.keys(dc).some(k => dc[k]) && (
|
||
<div style={{ padding: '8px 24px', display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
|
||
{Object.entries(dc).filter(([, v]) => v).map(([k, v]) => {
|
||
const name = getUserName(v);
|
||
return name ? (
|
||
<div key={k} style={{ fontSize: '11px', display: 'flex', alignItems: 'center', gap: 4 }}>
|
||
<span style={{ color: deptColors[k], fontWeight: 700 }}>{deptLabels[k]}:</span>
|
||
<span style={{ color: 'var(--text-primary)' }}>{name}</span>
|
||
</div>
|
||
) : null;
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})()}
|
||
{canManage && (
|
||
<div className="form-group">
|
||
<label className="form-label">Status *</label>
|
||
<select className="form-select" value={onForm.status} onChange={e => setOnForm({ ...onForm, status: e.target.value })} required>
|
||
<option value="pending">Ausstehend</option>
|
||
<option value="in_progress">In Bearbeitung</option>
|
||
<option value="completed">Abgeschlossen</option>
|
||
</select>
|
||
</div>
|
||
)}
|
||
<div className="form-group">
|
||
<label className="form-label">
|
||
Checkliste
|
||
{editingOn && !canManage && (() => {
|
||
const dc = editingOn.dept_contacts ? JSON.parse(editingOn.dept_contacts) : {};
|
||
const myDept = Object.entries(dc).find(([, uid]) => String(uid) === String(user?.id));
|
||
return myDept ? (
|
||
<span style={{ marginLeft: 8, fontSize: '11px', padding: '2px 7px', borderRadius: 4, background: 'rgba(16,185,129,0.12)', color: '#10b981', fontWeight: 600 }}>
|
||
Deine Aufgaben ({myDept[0]})
|
||
</span>
|
||
) : null;
|
||
})()}
|
||
</label>
|
||
<ProcessChecklist
|
||
processes={onProcesses.filter(p => !editingOn?.department || p.department_name === editingOn.department)}
|
||
checkedItems={onForm.checklist_data}
|
||
onChange={ci => setOnForm({ ...onForm, checklist_data: ci })}
|
||
disabled={editingOn ? !canEditChecklist(editingOn) : false}
|
||
userTeam={(!canManage && !isSuperAdmin()) ? getUserTeam() : null}
|
||
/>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="form-label">Notizen</label>
|
||
<textarea className="form-textarea" rows="4" value={onForm.notes} onChange={e => setOnForm({ ...onForm, notes: e.target.value })}
|
||
disabled={editingOn ? !canEditChecklist(editingOn) : false} />
|
||
</div>
|
||
<div className="card-footer">
|
||
<button type="button" className="btn btn-secondary" onClick={() => setShowOnDetail(false)}>Schließen</button>
|
||
{canEditChecklist(editingOn) && <button type="submit" className="btn btn-primary">Speichern</button>}
|
||
{canManage && <button type="button" className="btn btn-secondary" onClick={regenerateOnPdf}>📄 PDF neu erstellen</button>}
|
||
{editingOn?.emp_private_email && <button type="button" className="btn btn-secondary" onClick={sendOnConfirmationEmail} title={`Bestätigungsmail an ${editingOn.emp_private_email} senden`}>📧 Protokoll zusenden</button>}
|
||
{canManage && onForm.status !== 'completed' && <button type="button" className="btn btn-success" onClick={completeOn}>✓ Abschließen</button>}
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── Offboarding: Create Modal ─────────────────────────────────────── */}
|
||
{showOffModal && (
|
||
<div className="modal-overlay" onClick={() => setShowOffModal(false)}>
|
||
<div className="modal-content" onClick={e => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h2 className="modal-title">Neues Offboarding</h2>
|
||
<button className="modal-close" onClick={() => setShowOffModal(false)}>×</button>
|
||
</div>
|
||
<form onSubmit={submitOff}>
|
||
<div className="form-group">
|
||
<label className="form-label">Mitarbeiter *</label>
|
||
<select className="form-select" value={offForm.employee_user_id} onChange={e => setOffForm({ ...offForm, employee_user_id: e.target.value })} required>
|
||
<option value="">-- Bitte wählen --</option>
|
||
{users.map(u => <option key={u.id} value={u.id}>{u.first_name} {u.last_name} ({u.username})</option>)}
|
||
</select>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="form-label">Austrittsdatum *</label>
|
||
<input type="date" className="form-input" value={offForm.exit_date} onChange={e => setOffForm({ ...offForm, exit_date: e.target.value })} required />
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="form-label">Notizen</label>
|
||
<textarea className="form-textarea" rows="3" value={offForm.notes} onChange={e => setOffForm({ ...offForm, notes: e.target.value })} />
|
||
</div>
|
||
<div className="card-footer">
|
||
<button type="button" className="btn btn-secondary" onClick={() => setShowOffModal(false)}>Abbrechen</button>
|
||
<button type="submit" className="btn btn-primary">Erstellen</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── Offboarding: Edit/Detail Modal ─────────────────────────────────── */}
|
||
{showOffDetail && editingOff && (
|
||
<div className="modal-overlay" onClick={() => setShowOffDetail(false)}>
|
||
<div className="modal-content modal-large" onClick={e => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h2 className="modal-title">Offboarding: {editingOff.employee_sys_first_name || editingOff.employee_first_name} {editingOff.employee_sys_last_name || editingOff.employee_last_name}</h2>
|
||
<button className="modal-close" onClick={() => setShowOffDetail(false)}>×</button>
|
||
</div>
|
||
<form onSubmit={submitOff}>
|
||
<div className="form-group">
|
||
<label className="form-label">Status *</label>
|
||
<select className="form-select" value={offForm.status} onChange={e => setOffForm({ ...offForm, status: e.target.value })} required>
|
||
<option value="pending">Ausstehend</option>
|
||
<option value="in_progress">In Bearbeitung</option>
|
||
<option value="completed">Abgeschlossen</option>
|
||
</select>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="form-label">Checkliste</label>
|
||
<ProcessChecklist
|
||
processes={offProcesses.filter((p, i, arr) =>
|
||
arr.findIndex(x => x.responsible_team === p.responsible_team && x.title === p.title) === i
|
||
)}
|
||
checkedItems={offForm.checklist_data}
|
||
onChange={ci => setOffForm({ ...offForm, checklist_data: ci })}
|
||
userTeam={(!canManage && !isSuperAdmin()) ? getUserTeam() : null}
|
||
/>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="form-label">Notizen</label>
|
||
<textarea className="form-textarea" rows="4" value={offForm.notes} onChange={e => setOffForm({ ...offForm, notes: e.target.value })} />
|
||
</div>
|
||
<div className="card-footer">
|
||
<button type="button" className="btn btn-secondary" onClick={() => setShowOffDetail(false)}>Abbrechen</button>
|
||
<button type="submit" className="btn btn-primary">Speichern</button>
|
||
{canManage && <button type="button" className="btn btn-secondary" onClick={regenerateOffPdf}>📄 PDF neu erstellen</button>}
|
||
{offForm.status !== 'completed' && <button type="button" className="btn btn-success" onClick={completeOff}>✓ Abschließen</button>}
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── Offboarding: Asset-Rückgabe Modal ─────────────────────────────── */}
|
||
{showReturnModal && (
|
||
<div className="modal-overlay" onClick={() => setShowReturnModal(false)}>
|
||
<div className="modal-content modal-large" onClick={e => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h2 className="modal-title">Assets zurückgeben</h2>
|
||
<button className="modal-close" onClick={() => setShowReturnModal(false)}>×</button>
|
||
</div>
|
||
<form onSubmit={submitReturn}>
|
||
<div className="form-group">
|
||
<label className="form-label">Zugewiesene Assets</label>
|
||
{assignedAssets.length === 0 ? (
|
||
<p style={{ color: 'var(--text-muted)' }}>Keine Assets zugewiesen</p>
|
||
) : (
|
||
<table className="table">
|
||
<thead><tr><th>Typ</th><th>Name</th><th>Seriennummer</th><th>Zustand</th></tr></thead>
|
||
<tbody>
|
||
{assignedAssets.map(a => (
|
||
<tr key={a.id}>
|
||
<td>{a.type}</td>
|
||
<td>{a.name}</td>
|
||
<td style={{ fontFamily: 'monospace', fontSize: '0.8rem' }}>{a.serial_number}</td>
|
||
<td>
|
||
<select className="form-select" value={assetReturns.find(r => r.asset_id === a.id)?.condition || 'gut'} onChange={e => setAssetReturns(assetReturns.map(r => r.asset_id === a.id ? { ...r, condition: e.target.value } : r))}>
|
||
<option value="gut">Gut</option>
|
||
<option value="beschaedigt">Beschädigt</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</div>
|
||
<div className="card-footer">
|
||
<button type="button" className="btn btn-secondary" onClick={() => setShowReturnModal(false)}>Abbrechen</button>
|
||
<button type="submit" className="btn btn-primary">Assets zurückgeben & PDF erstellen</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default OnOffboardingPage;
|