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>
86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
"use client";
|
||
|
||
import { useRouter } from "next/navigation";
|
||
import { useState } from "react";
|
||
import { promoteEmployee } from "@/actions/employees";
|
||
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 type { Database, PaygradeType } from "@/lib/supabase/types";
|
||
import { fmtName } from "@/lib/format";
|
||
|
||
type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
|
||
|
||
const PAYGRADES: { value: PaygradeType; label: string }[] = [
|
||
{ value: "A", label: "A – Einstieg" },
|
||
{ value: "B", label: "B – Qualifiziert" },
|
||
{ value: "C", label: "C – Erfahren" },
|
||
{ value: "D", label: "D – Spezialist:in" },
|
||
{ value: "E", label: "E – Teamleitung" },
|
||
{ value: "F", label: "F – Bereichsleitung / GF" },
|
||
];
|
||
|
||
export function PromotePanel({ open, onClose, employee }: { open: boolean; onClose: () => void; employee: EmployeeRow }) {
|
||
const { showToast } = useToast();
|
||
const router = useRouter();
|
||
const [effectiveDate, setEffectiveDate] = useState("");
|
||
const [newTitle, setNewTitle] = useState(employee.job_title);
|
||
const [paygrade, setPaygrade] = useState<PaygradeType>(employee.paygrade);
|
||
const [pending, setPending] = useState(false);
|
||
|
||
async function handleSubmit() {
|
||
if (!effectiveDate || !newTitle) {
|
||
showToast("Bitte alle Pflichtfelder ausfüllen.", "error");
|
||
return;
|
||
}
|
||
setPending(true);
|
||
const result = await promoteEmployee({
|
||
employee_id: employee.id,
|
||
effective_date: effectiveDate,
|
||
new_title: newTitle,
|
||
new_paygrade: paygrade,
|
||
});
|
||
setPending(false);
|
||
if (result.success) {
|
||
showToast(`${employee.first_name} ${employee.last_name} wurde befördert.`);
|
||
router.refresh();
|
||
onClose();
|
||
} else {
|
||
showToast(result.error ?? "Fehler beim Speichern.", "error");
|
||
}
|
||
}
|
||
|
||
return (
|
||
<SlideOver
|
||
open={open}
|
||
onClose={onClose}
|
||
title="Beförderung"
|
||
subtitle={`${fmtName(employee.first_name, employee.last_name)} · ${employee.job_title}`}
|
||
footer={
|
||
<>
|
||
<Button variant="ghost" onClick={onClose}>
|
||
Abbrechen
|
||
</Button>
|
||
{/* Promotion keeps its own purple, matching the Beförderung badge
|
||
used in the history tab. */}
|
||
<Button onClick={handleSubmit} pending={pending} className="!bg-purple-text text-white hover:brightness-110">
|
||
Befördern
|
||
</Button>
|
||
</>
|
||
}
|
||
>
|
||
<div className="flex flex-col gap-4">
|
||
<TextField label="Wirksam ab" required type="date" value={effectiveDate} onChange={setEffectiveDate} />
|
||
<TextField label="Neue Position" required value={newTitle} onChange={setNewTitle} />
|
||
<SelectField
|
||
label="Paygrade"
|
||
value={paygrade}
|
||
onChange={(v) => setPaygrade(v as PaygradeType)}
|
||
options={PAYGRADES}
|
||
/>
|
||
</div>
|
||
</SlideOver>
|
||
);
|
||
}
|