s.status !== 'offboarded').length} Team · ${store.staff.filter(s => s.status === 'onboarding').length} im Onboarding · ${store.staff.filter(s => s.status === 'offboarding').length} im Austritt`}
actions={}
/>
{/* Tabs */}
{tabs.map(t => (
))}
{tab === 'overview' && }
{tab === 'onboarding' && s.onboarding && s.onboarding.status !== 'complete')} onSelect={setSelectedId} />}
{tab === 'offboarding' && s.offboarding && s.offboarding.status !== 'complete')} onSelect={setSelectedId} />}
{tab === 'hours' && }
{tab === 'export' && }
{/* Personnel file drawer */}
{selected && setSelectedId(null)} />}
{showHire && setShowHire(false)} />}
);
}
// ─── Overview ──────────────────────────────────────────────────────────────────
function StaffOverview({ staff, onSelect }) {
const [area, setArea] = React.useState('Alle');
const [status, setStatus] = React.useState('Alle');
const AREAS = ['Alle', 'Küche', 'Service', 'Management'];
const STATUSES = ['Alle', 'active', 'onboarding', 'offboarding'];
const STATUS_LABEL = { 'Alle': 'Alle Status', active: 'Aktiv', onboarding: 'Onboarding', offboarding: 'Offboarding' };
const filtered = staff.filter(s => (area === 'Alle' || s.area === area) && (status === 'Alle' || s.status === status));
// quick stats
const active = staff.filter(s => s.status === 'active' || s.status === 'onboarding').length;
const totalHours = staff.reduce((s, u) => s + (u.contractHours || 0), 0);
const avgTenure = Math.round(staff.filter(s=>s.hiredAt).reduce((sum, u) => sum + daysSince(u.hiredAt), 0) / staff.length / 30);
const expiringCerts = staff.reduce((n, u) => n + u.certifications.filter(c => c.status === 'expiring' || c.status === 'expired').length, 0);
return (
{/* KPIs */}
0 ? 'ember' : 'leaf'} />
{/* Filters */}
Bereich
{AREAS.map(a => (
))}
Status
{STATUSES.map(s => (
))}
{/* Employee cards */}
{filtered.map(u => {
const tenure = daysSince(u.hiredAt);
const tenureLabel = tenure < 30 ? `${tenure}T` : tenure < 365 ? `${Math.floor(tenure/30)}M` : `${(tenure/365).toFixed(1)}J`;
const hasExpiring = u.certifications.some(c => c.status === 'expiring' || c.status === 'expired');
return (
onSelect(u.id)}>
{u.area}
{u.employmentType}
{hasExpiring &&
Zert. prüfen}
Std./W
{u.contractHours}h
Urlaub
{u.vacation.entitled - u.vacation.taken - u.vacation.pending}T
);
})}
Onboarding-Pipeline
{staff.length} Mitarbeiter gerade im Einarbeitungsprozess. 10 Schritte gemäß Standard-Checkliste.
{staff.length === 0 && (
Aktuell niemand im Onboarding.
)}
{staff.map(u => {
const done = u.onboarding.steps.filter(s => s.done).length;
const total = u.onboarding.steps.length;
const pct = Math.round((done / total) * 100);
const daysInProcess = daysSince(u.onboarding.startedAt);
return (
{u.name}
{u.role} · {u.area} · seit {fmtDateShort(u.hiredAt)} · Tag {daysInProcess + 1}
{/* Progress */}
Fortschritt
{done}/{total} · {pct}%
{/* Checklist grid */}
{u.onboarding.steps.map(step => (
))}
);
})}
);
}
// ─── Offboarding Board ─────────────────────────────────────────────────────────
function OffboardingBoard({ staff, onSelect }) {
return (
Offboarding-Pipeline
{staff.length} Austritt(e) in Bearbeitung. 8 Schritte — Schlüssel, Zugänge, Endabrechnung, Zeugnis.
{staff.length === 0 && (
Kein Austritt in Bearbeitung.
)}
{staff.map(u => {
const done = u.offboarding.steps.filter(s => s.done).length;
const total = u.offboarding.steps.length;
const pct = Math.round((done / total) * 100);
const daysLeft = u.offboarding.lastDay ? Math.ceil((new Date(u.offboarding.lastDay) - new Date()) / (1000 * 60 * 60 * 24)) : null;
return (
{u.name}
{u.role} · Letzter Tag: {fmtDate(u.offboarding.lastDay)} {daysLeft !== null && · noch {daysLeft}T}
{u.offboarding.reason &&
Grund: {u.offboarding.reason}
}
Fortschritt
{done}/{total} · {pct}%
{u.offboarding.steps.map(step => (
))}
);
})}
);
}
// ─── Hours Dashboard ───────────────────────────────────────────────────────────
function HoursDashboard({ staff, entries }) {
const today = new Date(); today.setHours(0,0,0,0);
const [month, setMonth] = React.useState(today.toISOString().slice(0,7));
const [selectedUid, setSelectedUid] = React.useState(staff[0]?.id);
const monthEntries = entries.filter(e => e.date.startsWith(month));
// Aggregate per user
const perUser = staff.map(u => {
const ue = monthEntries.filter(e => e.uid === u.id);
const hours = ue.reduce((s, e) => s + e.hoursWorked, 0);
const overtime = ue.reduce((s, e) => s + e.overtime, 0);
const night = ue.reduce((s, e) => s + e.nightHours, 0);
const days = ue.length;
const contractMonthly = u.contractHours * 4.33;
return { u, hours: Math.round(hours*10)/10, overtime: Math.round(overtime*10)/10, night: Math.round(night*10)/10, days, contractMonthly, delta: Math.round((hours - contractMonthly)*10)/10 };
}).sort((a,b) => b.hours - a.hours);
const totalHours = perUser.reduce((s,p) => s + p.hours, 0);
const totalOvertime = perUser.reduce((s,p) => s + p.overtime, 0);
const totalLabor = perUser.reduce((s,p) => s + p.hours * p.u.wage, 0);
const selected = perUser.find(p => p.u.id === selectedUid);
// Month options (last 6 months)
const monthOpts = [];
for (let i = 0; i < 6; i++) {
const d = new Date(today); d.setMonth(d.getMonth() - i); d.setDate(1);
monthOpts.push(d.toISOString().slice(0,7));
}
return (
{/* Month selector + KPIs */}
Abrechnungsmonat
p.hours>0).length} Mitarbeiter`} />
40 ? 'ember' : 'default'} />
p.hours>0).length)).toFixed(1)} />
{/* Per-user list */}
Mitarbeiter · {new Date(month + '-01').toLocaleDateString('de-DE', { month: 'long', year: 'numeric' })}
{perUser.map(p => {
const isSel = selectedUid === p.u.id;
const fulfillment = p.contractMonthly > 0 ? Math.round((p.hours / p.contractMonthly) * 100) : 0;
return (
);
})}
{/* Selected user detail */}
{selected && (
{selected.u.name}
{selected.u.role} · {selected.u.employmentType} · {selected.u.contractHours}h/Woche
10 ? 'ember' : undefined} />
{/* Entry list */}
Zeiteinträge (neueste zuerst)
{monthEntries.filter(e => e.uid === selected.u.id).length} Tage
Datum
Start
Ende
Pause
Std.
ÜS
OK
{monthEntries.filter(e => e.uid === selected.u.id).sort((a,b) => b.date.localeCompare(a.date)).map(e => (
{fmtDateShort(e.date)}
{fmtTime(e.clockIn)}
{fmtTime(e.clockOut)}
{e.breakMin}'
{e.hoursWorked.toFixed(1)}
0 ? 'var(--mc-ember-700)' : 'var(--mc-ink-dim)' }}>{e.overtime > 0 ? e.overtime.toFixed(1) : '—'}
{e.approved
? ✓
:
}
))}
)}
{/* Left: Config */}
Automatischer Export
Lohnabrechnung · Stunden-Export
Läuft automatisch nach Konfiguration. Manueller Lauf jederzeit möglich.
patch({ time: e.target.value })} disabled={!cfg.autoEnabled} style={cfgSelect} />
patch({ email: e.target.value })} style={cfgSelect} />
Nächster Lauf
{cfg.autoEnabled ? fmtDate(cfg.nextRun) + ' · ' + cfg.time : 'Deaktiviert'}
Letzter Lauf
{fmtDate(cfg.lastRun)}
{/* Manual run */}
Jetzt exportieren
Alle Mitarbeiter · {new Date(currentMonth + '-01').toLocaleDateString('de-DE', { month: 'long', year: 'numeric' })}
{currentEntries.length} Einträge · {currentHours.toFixed(1)}h Gesamtstunden · {staff.filter(s=>s.status!=='offboarded').length} Mitarbeiter
{/* Right: History */}
Export-Historie
Vergangene Läufe
{cfg.history.map(h => (
{new Date(h.period + '-01').toLocaleDateString('de-DE', { month: 'long', year: 'numeric' })}
{h.employees} MA · {h.hours.toFixed(1)}h · {h.format} · {fmtDate(h.runAt)}
))}
{label}
{value}
{sub &&
{sub}
}
);
}
// Build CSV content
function buildCsv(entries, staff, month) {
const header = 'Personalnr;Name;Rolle;Datum;Start;Ende;Pause(Min);Stunden;Überstunden;Nachtstunden;Stundensatz;Brutto\n';
const rows = entries.filter(e => e.date.startsWith(month)).map(e => {
const u = staff.find(s => s.id === e.uid);
if (!u) return '';
const brutto = (e.hoursWorked * u.wage).toFixed(2).replace('.', ',');
return [
u.id, u.name, u.role, e.date,
new Date(e.clockIn).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }),
new Date(e.clockOut).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }),
e.breakMin, e.hoursWorked.toFixed(2).replace('.', ','),
e.overtime.toFixed(2).replace('.', ','), e.nightHours.toFixed(2).replace('.', ','),
u.wage.toFixed(2).replace('.', ','), brutto,
].join(';');
}).filter(Boolean).join('\n');
return header + rows;
}
Object.assign(window, { StaffScreen, PersonnelDrawer: null, HireModal: null });