Show people surname first

Employee names now read "Winkler, Hannah" wherever a person appears in a
list, a table, a heading or a tree node. That is the order a personnel
list is kept in, it is the order people are looked up in, and it finally
matches the sorting — the employee list has always been ordered by
surname, which made an alphabetical page look unsorted.

The name was being assembled inline in about twenty places. A rename
that catches half of them is worse than none, so it now goes through
fmtName in lib/format.ts and every display site calls it.

Sentences keep the natural order: "Hannah Winkler wurde versetzt" reads
like German, "Winkler, Hannah wurde versetzt" reads like a form. So the
toasts are unchanged and only labels moved.

Two things the change would have quietly broken:

The org chart's own filter matched against "first last". It now matches
either order, with or without the comma, so typing what you see works
and so does typing what you remember.

The print model sorted by the last word of the composed name, which
happened to be the surname and is now the first name — every printed
unit would have come out sorted by first name. It sorts on the surname
field itself now, which is what it meant all along.

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

app/(app)/employees/page.tsx

@@ -9,7 +9,7 @@ import { currentUserId } from "@/lib/auth/session";
 import { sql, withUser } from "@/lib/db";
 import { istPersonalnummer, suchMuster } from "@/lib/employee-search";
 import { derivedStatusFilter } from "@/lib/employee-status-filter";
-import { fmtDate, todayIso } from "@/lib/format";
+import { fmtDate, fmtName, todayIso } from "@/lib/format";
 import { breadcrumbLabel, divisionOf, loadOrgMaps, subtreeOf, unitOf } from "@/lib/org";
 import { loadPlacements } from "@/lib/placement";
 import type { EmploymentStatus } from "@/lib/supabase/types";
@@ -240,7 +240,7 @@ export default async function EmployeesPage({ searchParams }: EmployeesPageProps
                       <Avatar firstName={e.first_name} lastName={e.last_name} />
                       <div className="min-w-0">
                         <div className="truncate font-semibold text-ink">
-                          {e.first_name} {e.last_name}
+                          {fmtName(e.first_name, e.last_name)}
                         </div>
                         <div className="truncate text-xs text-ink-muted">{placement?.jobTitle ?? e.job_title}</div>
                       </div>

app/(app)/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { DraftsCard } from "@/components/dashboard/DraftsCard";
 import { Card, CARD_CLASS, CardTitle } from "@/components/ui/Card";
 import { actionBadgeStyle } from "@/lib/colors";
-import { addDaysIso, fmtDate, todayIso } from "@/lib/format";
+import { addDaysIso, fmtDate, fmtName, todayIso } from "@/lib/format";
 import { divisionOf, loadOrgMaps } from "@/lib/org";
 import { loadPlacements } from "@/lib/placement";
 import { loadOpenPositions } from "@/lib/positions";
@@ -205,19 +205,19 @@ export default async function DashboardPage() {
   const upcoming: UpcomingItem[] = [
     ...(upcomingHires).map((e) => ({
       id: e.id,
-      label: `${e.first_name} ${e.last_name}`,
+      label: fmtName(e.first_name, e.last_name),
       date: e.entry_date,
       kind: "hire" as const,
     })),
     ...(upcomingExits).map((e) => ({
       id: e.id,
-      label: `${e.first_name} ${e.last_name}`,
+      label: fmtName(e.first_name, e.last_name),
       date: e.exit_date!,
       kind: "exit" as const,
     })),
     ...(upcomingReturns).map((e) => ({
       id: e.id,
-      label: `${e.first_name} ${e.last_name}`,
+      label: fmtName(e.first_name, e.last_name),
       date: e.karenz_return_date!,
       kind: "return" as const,
     })),
@@ -338,7 +338,7 @@ export default async function DashboardPage() {
                 <span className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${DOT_STYLES[h.event_type] ?? "bg-ink-muted"}`} aria-hidden />
                 <div className="min-w-0 flex-1">
                   <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
-                    <span className="text-sm font-semibold text-ink">{h.first_name && h.last_name ? `${h.first_name} ${h.last_name}` : "Unbekannt"}</span>
+                    <span className="text-sm font-semibold text-ink">{h.first_name && h.last_name ? fmtName(h.first_name, h.last_name) : "Unbekannt"}</span>
                     <span className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${actionBadgeStyle(h.event_type)}`}>
                       {h.event_type}
                     </span>

app/api/export/employees/route.ts

@@ -1,7 +1,7 @@
 import { NextResponse, type NextRequest } from "next/server";
 import { statusLabel } from "@/lib/absence";
 import { exportFilename, exportResponseHeaders, toCsv, toXlsx, type ExportColumn } from "@/lib/export";
-import { todayIso } from "@/lib/format";
+import { fmtName, todayIso } from "@/lib/format";
 import { subtreeOf } from "@/lib/org";
 import { loadPlacements, loadReportingLineMap } from "@/lib/placement";
 import { LEERE_CRITERIA, parseCriteria, passtImSpeicher } from "@/lib/report-criteria";
@@ -76,7 +76,7 @@ export async function GET(request: NextRequest) {
     }
   );
 
-  const managerName = new Map(allEmployees.map((e) => [e.id, `${e.first_name} ${e.last_name}`]));
+  const managerName = new Map(allEmployees.map((e) => [e.id, fmtName(e.first_name, e.last_name)]));
   // Der Einheitenfilter meint den ganzen Teilbaum — sonst enthielte ein
   // Export für "Produktion" nur die Bereichsleitung.
   const allowedUnits = filters.division ? new Set(subtreeOf(orgMaps, filters.division)) : null;