Maximilian Stubhan
8a76b3688f
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>
83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
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 };
|
|
|
|
type OrganisationTabProps = {
|
|
employeeId: string;
|
|
manager: MiniEmployee | null;
|
|
/** Nur gesetzt, wenn die zuständige Leitung abwesend ist und vertreten wird. */
|
|
formalManager: MiniEmployee | null;
|
|
directReports: MiniEmployee[];
|
|
breadcrumb: string;
|
|
};
|
|
|
|
export function OrganisationTab({ employeeId, manager, formalManager, directReports, breadcrumb }: OrganisationTabProps) {
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<h3 className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Organisationseinheit</h3>
|
|
<p className="mt-1 text-sm text-ink">{breadcrumb}</p>
|
|
</div>
|
|
{/* ?focus= drives the same highlight/auto-expand path the org chart
|
|
search already uses, so the person is unfolded and centred on
|
|
arrival instead of the user hunting for them. */}
|
|
<Link href={`/orgchart?focus=${employeeId}`} className={LINK_BUTTON_CLASS}>
|
|
<Network className="h-4 w-4" />
|
|
Im Organigramm anzeigen
|
|
</Link>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">
|
|
{formalManager ? "Führungskraft (Vertretung)" : "Führungskraft"}
|
|
</h3>
|
|
{formalManager && (
|
|
<p className="mb-2 text-xs text-ink-muted">
|
|
Zuständig ist {fmtName(formalManager.first_name, formalManager.last_name)}; während der Abwesenheit übernimmt die nächste
|
|
besetzte Ebene.
|
|
</p>
|
|
)}
|
|
{manager ? (
|
|
<Link href={`/employees/${manager.id}`} className="flex w-fit items-center gap-3 rounded border border-border p-3 hover:bg-surface">
|
|
<Avatar firstName={manager.first_name} lastName={manager.last_name} />
|
|
<div>
|
|
<div className="text-sm font-semibold text-ink">
|
|
{fmtName(manager.first_name, manager.last_name)}
|
|
</div>
|
|
<div className="text-xs text-ink-muted">{manager.job_title}</div>
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<p className="text-sm text-ink-muted">Keine Führungskraft (Geschäftsführung)</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Direkte Berichte ({directReports.length})</h3>
|
|
{directReports.length > 0 ? (
|
|
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
|
{directReports.map((r) => (
|
|
<Link key={r.id} href={`/employees/${r.id}`} className="flex items-center gap-3 rounded border border-border p-3 hover:bg-surface">
|
|
<Avatar firstName={r.first_name} lastName={r.last_name} />
|
|
<div>
|
|
<div className="text-sm font-semibold text-ink">
|
|
{fmtName(r.first_name, r.last_name)}
|
|
</div>
|
|
<div className="text-xs text-ink-muted">{r.job_title}</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-ink-muted">Keine direkten Berichte.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|