From 54114b5b9f274079b9181bd814dd6216cdad3bbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Gr=C3=BCssing?= <gruessing@cereda-systems.de>
Date: Thu, 11 Jun 2026 12:36:12 +0200
Subject: [PATCH] =?UTF-8?q?Add:=20PDF-Viewer=20inline=20+=20Team-Fortschri?=
 =?UTF-8?q?tt=20auf=20=C3=9Cbersicht-Tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/OffboardingDetailPage.jsx | 65 +++++++++++++++++---
 1 file changed, 55 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/OffboardingDetailPage.jsx b/frontend/src/pages/OffboardingDetailPage.jsx
index a6d1e2f..2813195 100644
--- a/frontend/src/pages/OffboardingDetailPage.jsx
+++ b/frontend/src/pages/OffboardingDetailPage.jsx
@@ -372,6 +372,45 @@ export default function OffboardingDetailPage() {
                         ))}
                     </div>
 
+                    {/* Team-Fortschritt */}
+                    <div style={{ gridColumn: '1 / -1', background: 'var(--bg-secondary)', border: '1px solid var(--border-color)', borderRadius: 12, padding: 18 }}>
+                        <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '.5px', marginBottom: 14 }}>👥 Checklisten-Fortschritt nach Team</div>
+                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
+                            {['it', 'hr', 'buchhaltung'].map(team => {
+                                const teamProcs = processes.filter(p => p.responsible_team === team);
+                                if (!teamProcs.length) return null;
+                                const done = teamProcs.filter(p => !!checklist[`proc_${p.id}`]).length;
+                                const pctT = Math.round(done / teamProcs.length * 100);
+                                const tc = TEAM_COLORS[team];
+                                const isMyTeam = userTeam === team;
+                                return (
+                                    <div key={team} style={{ border: `1px solid ${isMyTeam ? tc : 'var(--border-color)'}`, borderLeft: `3px solid ${tc}`, borderRadius: 8, padding: '12px 14px', background: isMyTeam ? `${tc}0a` : 'transparent' }}>
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+                                            <span style={{ fontSize: 16 }}>{TEAM_ICONS[team]}</span>
+                                            <span style={{ fontWeight: 600, fontSize: 13, color: tc }}>{TEAM_LABELS[team]}</span>
+                                            {isMyTeam && <span style={{ fontSize: 10, background: `${tc}20`, color: tc, borderRadius: 4, padding: '1px 6px', fontWeight: 700, marginLeft: 'auto' }}>Dein Team</span>}
+                                        </div>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                                            <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{done} / {teamProcs.length} erledigt</span>
+                                            <span style={{ fontSize: 12, fontWeight: 700, color: pctT === 100 ? '#10b981' : 'var(--text-primary)' }}>{pctT}%</span>
+                                        </div>
+                                        <div style={{ height: 6, background: 'var(--border-color)', borderRadius: 3, overflow: 'hidden' }}>
+                                            <div style={{ height: '100%', width: `${pctT}%`, background: pctT === 100 ? '#10b981' : tc, borderRadius: 3, transition: 'width .3s' }} />
+                                        </div>
+                                        {pctT < 100 && (
+                                            <div style={{ marginTop: 8, fontSize: 11, color: '#f59e0b' }}>
+                                                ⚠ {teamProcs.length - done} Aufgabe{teamProcs.length - done !== 1 ? 'n' : ''} offen
+                                            </div>
+                                        )}
+                                        {pctT === 100 && (
+                                            <div style={{ marginTop: 8, fontSize: 11, color: '#10b981' }}>✓ Vollständig abgehakt</div>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+
                     {/* Allgemeine Infos */}
                     <div style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-color)', borderRadius: 12, padding: 18 }}>
                         <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '.5px', marginBottom: 12 }}>📋 Allgemeine Infos</div>
@@ -489,25 +528,31 @@ export default function OffboardingDetailPage() {
                         )}
                     </div>
                     <div style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-color)', borderRadius: 12, padding: 20 }}>
-                        <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 16, textTransform: 'uppercase', letterSpacing: '.5px' }}>📄 PDF-Dokument</div>
-                        {protocol.pdf_path ? (
-                            <div>
-                                <div style={{ fontSize: 13, color: 'var(--text-primary)', marginBottom: 14 }}>PDF vorhanden</div>
+                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
+                            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '.5px' }}>📄 PDF-Dokument</div>
+                            {protocol.pdf_file_path && (
                                 <div style={{ display: 'flex', gap: 8 }}>
-                                    <a href={offboardingService.downloadPdf(protocol.pdf_path)} target="_blank" rel="noreferrer"
-                                        style={{ background: 'var(--cereda-primary)', border: 'none', borderRadius: 8, color: '#fff', padding: '7px 16px', fontSize: 13, textDecoration: 'none', fontWeight: 600 }}>
+                                    <a href={offboardingService.downloadPdf(protocol.pdf_file_path)} target="_blank" rel="noreferrer"
+                                        style={{ background: 'var(--cereda-primary)', border: 'none', borderRadius: 6, color: '#fff', padding: '5px 12px', fontSize: 12, textDecoration: 'none', fontWeight: 600 }}>
                                         📥 Download
                                     </a>
                                     {canAct && (
                                         <button onClick={regeneratePdf}
-                                            style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)', borderRadius: 8, color: 'var(--text-primary)', padding: '7px 14px', fontSize: 13, cursor: 'pointer' }}>
-                                            🔄 Neu erstellen
+                                            style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)', borderRadius: 6, color: 'var(--text-primary)', padding: '5px 12px', fontSize: 12, cursor: 'pointer' }}>
+                                            🔄 Neu
                                         </button>
                                     )}
                                 </div>
-                            </div>
+                            )}
+                        </div>
+                        {protocol.pdf_file_path ? (
+                            <iframe
+                                src={offboardingService.downloadPdf(protocol.pdf_file_path)}
+                                title="Offboarding PDF"
+                                style={{ width: '100%', height: 600, border: 'none', borderRadius: 8, background: '#fff' }}
+                            />
                         ) : (
-                            <div style={{ textAlign: 'center', padding: '24px 0', color: 'var(--text-muted)' }}>
+                            <div style={{ textAlign: 'center', padding: '32px 0', color: 'var(--text-muted)' }}>
                                 <div style={{ fontSize: 36, marginBottom: 10 }}>📄</div>
                                 <div style={{ fontSize: 13, marginBottom: 14 }}>Noch kein PDF generiert</div>
                                 {canAct && (