Give exits their own checklist, next to the entry one

The offboarding list was a checkbox fieldset inside the exit panel — four
items, never sent anywhere. Nothing in terminateEmployee's payload
carried them; ticking a box there recorded exactly nothing.

It's replaced with the same kind of list the entries got: its own tab,
appearing the moment an exit is recorded, with one item per row, a
comment on each, and — unlike the fieldset — a record of who touched it
and when.

The eleven items come from the same printed sheet as the entry list.
Nine are plain checkboxes. Two are text fields under "Vermerke":
remaining vacation and the balance transferred for payout — the sheet
names "Überleitung Salden für Auszahlung" twice, once as a task to do
and once as the actual figure, and those are genuinely two different
questions, kept as two items. Where the sheet still says "GKK" rather
than today's "ÖGK", it's left as written — that's the name the process
runs under internally, not a typo.

No Show gets no list. Never having worked a single day, there's no IT
access to revoke, no GKK registration to undo, no Dienstzettel to
collect — an empty checklist there would be a label with nothing behind
it. Both the tab and the auto-creation on exit check for this
specifically, not just the "Ausgetreten" status that No Show shares with
a real exit. Rehiring the same person hides the tab again — the data
stays, since it happened, but a checklist for someone currently working
has nothing to point at.

The engine (what counts as done, how progress is computed) moved into
lib/checklist.ts so onboarding and offboarding can't drift into two
different ideas of "done" the way two independent copies eventually do;
lib/onboarding.ts and lib/offboarding.ts bind it to their own item list,
and the tab UI is a single ChecklistPanel bound the same way.

Checked against the real database: a real exit creates all eleven items
in the same transaction as the exit itself; a No Show creates none;
rehiring flips the tab off while the old answers stay queryable. One
false alarm during that check turned out to be the user's own clicks on
a real employee's onboarding list, made in the browser while trying the
earlier feature — left untouched, not test debris.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

components/employees/EmployeeDetail.tsx

@@ -6,8 +6,10 @@ import { useState } from "react";
 import { Avatar } from "@/components/ui/Avatar";
 import { Button } from "@/components/ui/Button";
 import { StatusChip } from "@/components/ui/StatusChip";
+import type { AufgabenStand } from "@/lib/checklist";
 import { fmtFullName, tenure } from "@/lib/format";
-import { fortschritt, type AufgabenStand } from "@/lib/onboarding";
+import { fortschritt as fortschrittOffboarding, gehoertOffboarding } from "@/lib/offboarding";
+import { fortschritt as fortschrittOnboarding } from "@/lib/onboarding";
 import type { OpenPositionResolved } from "@/lib/positions";
 import type { Database } from "@/lib/supabase/types";
 import { DatenAendernPanel } from "./panels/DatenAendernPanel";
@@ -18,6 +20,7 @@ import { TerminatePanel } from "./panels/TerminatePanel";
 import { TransferPanel } from "./panels/TransferPanel";
 import { HistorieTab } from "./tabs/HistorieTab";
 import { NotizenTab } from "./tabs/NotizenTab";
+import { OffboardingTab } from "./tabs/OffboardingTab";
 import { OnboardingTab } from "./tabs/OnboardingTab";
 import { OrganisationTab } from "./tabs/OrganisationTab";
 import { StammdatenTab } from "./tabs/StammdatenTab";
@@ -40,6 +43,8 @@ type EmployeeDetailProps = {
   kostenstelle: { code: string; name: string } | null;
   /** Der Stand der Onboarding-Checkliste; leer heisst: es gibt keine. */
   onboarding: AufgabenStand[];
+  /** Der Stand der Offboarding-Checkliste; leer heisst: es gibt keine. */
+  offboarding: AufgabenStand[];
   manager: MiniEmployee | null;
   /** Nur gesetzt, wenn die zuständige Leitung abwesend ist und vertreten wird. */
   formalManager: MiniEmployee | null;
@@ -52,17 +57,22 @@ type EmployeeDetailProps = {
 };
 
 type PanelType = "transfer" | "promote" | "karenz" | "daten" | "terminate" | "rehire" | null;
-const TABS = ["Stammdaten", "Vertrag", "Organisation", "Onboarding", "Historie", "HR-Notizen"] as const;
+const ALLE_TABS = ["Stammdaten", "Vertrag", "Organisation", "Onboarding", "Offboarding", "Historie", "HR-Notizen"] as const;
+type Tab = (typeof ALLE_TABS)[number];
 
 export function EmployeeDetail(props: EmployeeDetailProps) {
-  const { employee, placement, breadcrumb, kostenstelle, onboarding, manager, formalManager, directReports, history, dependents, notes, locations, openPositions } = props;
-  const [tab, setTab] = useState<(typeof TABS)[number]>("Stammdaten");
+  const { employee, placement, breadcrumb, kostenstelle, onboarding, offboarding, manager, formalManager, directReports, history, dependents, notes, locations, openPositions } = props;
+  const [tab, setTab] = useState<Tab>("Stammdaten");
   const [panel, setPanel] = useState<PanelType>(null);
 
   const location = locations.find((l) => l.id === employee.location_id);
   // Am Reiter steht, was noch aussteht — sonst müsste man hineinsehen, um zu
   // erfahren, dass nichts zu tun ist.
-  const offeneAufgaben = onboarding.length > 0 ? fortschritt(onboarding).gesamt - fortschritt(onboarding).erledigt : 0;
+  const offeneOnboarding = onboarding.length > 0 ? fortschrittOnboarding(onboarding).gesamt - fortschrittOnboarding(onboarding).erledigt : 0;
+  const offeneOffboarding = offboarding.length > 0 ? fortschrittOffboarding(offboarding).gesamt - fortschrittOffboarding(offboarding).erledigt : 0;
+
+  const zeigtOffboarding = gehoertOffboarding(employee);
+  const tabs = ALLE_TABS.filter((t) => t !== "Offboarding" || zeigtOffboarding);
 
   const isActive = employee.status === "Aktiv" || employee.status === "Karenz";
   const canEditData = employee.status !== "Ausgetreten";
@@ -143,7 +153,7 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
       {/* Tabs, so the list gets the tablist role and each button says
           whether it is the selected one. */}
       <div role="tablist" aria-label="Mitarbeiterdetails" className="flex gap-1 overflow-x-auto border-b border-border">
-        {TABS.map((t) => (
+        {tabs.map((t) => (
           <button
             key={t}
             role="tab"
@@ -153,7 +163,13 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
               tab === t ? "border-brand-500 text-brand-700" : "border-transparent text-ink-muted hover:text-ink"
             }`}
           >
-            {t === "HR-Notizen" ? `HR-Notizen ${notes.length}` : t === "Onboarding" && offeneAufgaben > 0 ? `Onboarding ${offeneAufgaben}` : t}
+            {t === "HR-Notizen"
+              ? `HR-Notizen ${notes.length}`
+              : t === "Onboarding" && offeneOnboarding > 0
+                ? `Onboarding ${offeneOnboarding}`
+                : t === "Offboarding" && offeneOffboarding > 0
+                  ? `Offboarding ${offeneOffboarding}`
+                  : t}
           </button>
         ))}
       </div>
@@ -174,6 +190,9 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
         {tab === "Onboarding" && (
           <OnboardingTab employeeId={employee.id} staende={onboarding} vorhanden={onboarding.length > 0} />
         )}
+        {tab === "Offboarding" && zeigtOffboarding && (
+          <OffboardingTab employeeId={employee.id} staende={offboarding} vorhanden={offboarding.length > 0} />
+        )}
         {tab === "Historie" && <HistorieTab history={history} employeeId={employee.id} />}
         {tab === "HR-Notizen" && <NotizenTab employeeId={employee.id} notes={notes} />}
       </div>