m.stubhan/alpenwerk-hr
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Show people surname first

Browse Source 
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>
This commit is contained in:
Maximilian Stubhan
2026-08-14 11:44:03 +02:00
parent a3fac47f47
commit 8a76b3688f
18 changed files with 120 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/employees/panels/KarenzPanel.tsx
View File

@@ -9,7 +9,7 @@ import { SegmentedControl } from "@/components/ui/SegmentedControl";
import { SlideOver } from "@/components/ui/SlideOver";
import { useToast } from "@/components/ui/Toast";
import { ABSENCE_TYPES, absenceLabel } from "@/lib/absence";
import { fmtDate } from "@/lib/format";
import { fmtDate, fmtName } from "@/lib/format";
import type { Database } from "@/lib/supabase/types";
type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
@@ -127,7 +127,7 @@ export function KarenzPanel({ open, onClose, employee }: { open: boolean; onClos
open={open}
onClose={onClose}
title={isOnKarenz ? "Langzeitabwesenheit verwalten" : "Langzeitabwesenheit erfassen"}
subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
subtitle={`${fmtName(employee.first_name, employee.last_name)} · ${employee.job_title}`}
footer={
<>
<Button variant="ghost" onClick={onClose}>

3
components/employees/panels/PromotePanel.tsx
View File

@@ -8,6 +8,7 @@ import { SelectField, TextField } from "@/components/ui/Field";
import { SlideOver } from "@/components/ui/SlideOver";
import { useToast } from "@/components/ui/Toast";
import type { Database, PaygradeType } from "@/lib/supabase/types";
import { fmtName } from "@/lib/format";
type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
@@ -55,7 +56,7 @@ export function PromotePanel({ open, onClose, employee }: { open: boolean; onClo
open={open}
onClose={onClose}
title="Beförderung"
subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
subtitle={`${fmtName(employee.first_name, employee.last_name)} · ${employee.job_title}`}
footer={
<>
<Button variant="ghost" onClick={onClose}>

4
components/employees/panels/RehirePanel.tsx
View File

@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/Button";
import { SelectField, TextField } from "@/components/ui/Field";
import { SlideOver } from "@/components/ui/SlideOver";
import { useToast } from "@/components/ui/Toast";
import { fmtDate } from "@/lib/format";
import { fmtDate, fmtName } from "@/lib/format";
import type { OpenPositionResolved } from "@/lib/positions";
import type { Database } from "@/lib/supabase/types";
@@ -87,7 +87,7 @@ export function RehirePanel({
open={open}
onClose={onClose}
title="Wiedereinstellung"
subtitle={`${employee.first_name} ${employee.last_name}`}
subtitle={fmtName(employee.first_name, employee.last_name)}
footer={
<>
<Button variant="ghost" onClick={onClose}>

3
components/employees/panels/TerminatePanel.tsx
View File

@@ -8,6 +8,7 @@ import { SelectField, TextField, TextareaField } from "@/components/ui/Field";
import { SlideOver } from "@/components/ui/SlideOver";
import { useToast } from "@/components/ui/Toast";
import type { Database } from "@/lib/supabase/types";
import { fmtName } from "@/lib/format";
type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
@@ -52,7 +53,7 @@ export function TerminatePanel({ open, onClose, employee, directReportCount }: T
open={open}
onClose={onClose}
title="Austritt"
subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
subtitle={`${fmtName(employee.first_name, employee.last_name)} · ${employee.job_title}`}
footer={
<>
<Button variant="ghost" onClick={onClose}>

3
components/employees/panels/TransferPanel.tsx
View File

@@ -9,6 +9,7 @@ import { SlideOver } from "@/components/ui/SlideOver";
import { useToast } from "@/components/ui/Toast";
import type { OpenPositionResolved } from "@/lib/positions";
import type { Database } from "@/lib/supabase/types";
import { fmtName } from "@/lib/format";
type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
@@ -68,7 +69,7 @@ export function TransferPanel({ open, onClose, employee, openPositions }: Transf
open={open}
onClose={onClose}
title="Versetzung"
subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
subtitle={`${fmtName(employee.first_name, employee.last_name)} · ${employee.job_title}`}
footer={
<>
<Button variant="ghost" onClick={onClose}>

7
components/employees/tabs/OrganisationTab.tsx
View File

@@ -2,6 +2,7 @@ import { Network } from "lucide-react";
import Link from "next/link";
import { Avatar } from "@/components/ui/Avatar";
import { LINK_BUTTON_CLASS } from "@/components/ui/Button";
import { fmtName } from "@/lib/format";
type MiniEmployee = { id: string; first_name: string; last_name: string; job_title: string; status?: string };
@@ -37,7 +38,7 @@ export function OrganisationTab({ employeeId, manager, formalManager, directRepo
</h3>
{formalManager && (
<p className="mb-2 text-xs text-ink-muted">
Zuständig ist {formalManager.first_name} {formalManager.last_name}; während der Abwesenheit übernimmt die nächste
Zuständig ist {fmtName(formalManager.first_name, formalManager.last_name)}; während der Abwesenheit übernimmt die nächste
besetzte Ebene.
</p>
)}
@@ -46,7 +47,7 @@ export function OrganisationTab({ employeeId, manager, formalManager, directRepo
<Avatar firstName={manager.first_name} lastName={manager.last_name} />
<div>
<div className="text-sm font-semibold text-ink">
{manager.first_name} {manager.last_name}
{fmtName(manager.first_name, manager.last_name)}
</div>
<div className="text-xs text-ink-muted">{manager.job_title}</div>
</div>
@@ -65,7 +66,7 @@ export function OrganisationTab({ employeeId, manager, formalManager, directRepo
<Avatar firstName={r.first_name} lastName={r.last_name} />
<div>
<div className="text-sm font-semibold text-ink">
{r.first_name} {r.last_name}
{fmtName(r.first_name, r.last_name)}
</div>
<div className="text-xs text-ink-muted">{r.job_title}</div>
</div>

18
components/orgchart/EmployeeTree.tsx
View File

@@ -9,6 +9,7 @@ import { SearchInput } from "@/components/ui/SearchInput";
import { SegmentedControl } from "@/components/ui/SegmentedControl";
import { LazyGraphOrgChart } from "./LazyGraphOrgChart";
import type { ChartNode, OrgEmployee } from "./types";
import { fmtName } from "@/lib/format";
type ViewMode = "list" | "graph";
@@ -53,7 +54,7 @@ export function EmployeeTree({ employees, focusId = null }: { employees: OrgEmpl
// Both badges name a person by id, so the lookup is shared rather than
// rebuilt per node.
const nameById = useMemo(() => new Map(employees.map((e) => [e.id, `${e.first_name} ${e.last_name}`])), [employees]);
const nameById = useMemo(() => new Map(employees.map((e) => [e.id, fmtName(e.first_name, e.last_name)])), [employees]);
const nameOf = useCallback((id: string | null) => (id ? nameById.get(id) : undefined), [nameById]);
const matchIds = useMemo(() => {
@@ -64,8 +65,17 @@ export function EmployeeTree({ employees, focusId = null }: { employees: OrgEmpl
const q = query.trim().toLowerCase();
const matches = new Set<string>();
for (const e of employees) {
// Beide Reihenfolgen: angezeigt wird „Winkler, Hannah", im Kopf hat man
// aber je nach Anlass das eine oder das andere zuerst. Wer abtippt, was
// er sieht, soll ebenso fündig werden wie jemand, der „hannah winkler"
// eingibt.
const vorNach = `${e.first_name} ${e.last_name}`.toLowerCase();
const nachVor = fmtName(e.first_name, e.last_name).toLowerCase();
if (
`${e.first_name} ${e.last_name}`.toLowerCase().includes(q) ||
vorNach.includes(q) ||
nachVor.includes(q) ||
// Ohne den Beistrich, falls jemand ihn beim Abtippen weglässt.
nachVor.replace(",", "").includes(q) ||
e.job_title.toLowerCase().includes(q) ||
String(e.personnel_number).includes(q)
) {
@@ -118,7 +128,7 @@ export function EmployeeTree({ employees, focusId = null }: { employees: OrgEmpl
return {
id: e.id,
kind: "person",
label: `${e.first_name} ${e.last_name}`,
label: fmtName(e.first_name, e.last_name),
sublabel: e.job_title,
href: `/employees/${e.id}`,
avatar: { firstName: e.first_name, lastName: e.last_name },
@@ -159,7 +169,7 @@ export function EmployeeTree({ employees, focusId = null }: { employees: OrgEmpl
<Avatar firstName={e.first_name} lastName={e.last_name} size="sm" />
<Link href={`/employees/${e.id}`} className="min-w-0 flex-1 hover:underline">
<span className="text-sm font-semibold text-ink">
{e.first_name} {e.last_name}
{fmtName(e.first_name, e.last_name)}
</span>
<span className="ml-2 text-xs text-ink-muted">{e.job_title}</span>
</Link>

5
components/orgchart/PositionTree.tsx
View File

@@ -6,6 +6,7 @@ import { useCallback, useMemo, useState } from "react";
import { SegmentedControl } from "@/components/ui/SegmentedControl";
import { LazyGraphOrgChart } from "./LazyGraphOrgChart";
import type { ChartNode, OrgEmployee, OrgUnitNode, OrgVacancy } from "./types";
import { fmtName } from "@/lib/format";
// Die Struktursicht. Sie folgt jetzt org_units.parent_id statt einer fest
// verdrahteten Abfolge Bereich → Abteilung → Team: eine fünfte Ebene ist
@@ -178,7 +179,7 @@ export function buildUnitTree(units: OrgUnitNode[], employees: OrgEmployee[], va
.map((p) => ({
id: p.id,
kind: "person" as const,
label: `${p.first_name} ${p.last_name}`,
label: fmtName(p.first_name, p.last_name),
href: `/employees/${p.id}`,
avatar: { firstName: p.first_name, lastName: p.last_name },
absent: p.absent,
@@ -204,7 +205,7 @@ export function buildUnitTree(units: OrgUnitNode[], employees: OrgEmployee[], va
kind: "role",
label: `${unit.org_number} · ${unit.name}`,
sublabel: chief
? `Leitung: ${chief.first_name} ${chief.last_name}${chief.absent ? " (abwesend)" : ""}`
? `Leitung: ${fmtName(chief.first_name, chief.last_name)}${chief.absent ? " (abwesend)" : ""}`
: "Leitung vakant",
vacant: !chief,
children: [...subUnits, ...titleGroups, ...vacancyNodes],