Phase 4: Org chart (Mitarbeiter/Positionen/Reorganisation) + one more RLS bugfix
- components/orgchart/: 3-way segmented view sharing one server fetch
(switching tabs doesn't refetch):
- EmployeeTree: expand/collapse hierarchy from the CEO down, search with
auto-expand-to-match and highlighting, "Bereiche anzeigen" /
"Alles einklappen".
- PositionTree: models the org *structure* (GF -> Bereichsleitung ->
Abteilung -> Teamleitung -> grouped IC positions by title, expandable
to the actual holders) independent of who's currently in it, plus
dashed rows for open requisitions linking to /positions.
- ReorgWorkbench: batch multiple moves (employees / whole team / whole
department / whole division as source, always a specific team as
target), live headcount-impact table, apply via the existing
apply_reorg RPC, and an undo card wired to undo_reorg.
Bug found via live apply+undo testing: undo_reorg's cleanup DELETE on
employee_history silently matched zero rows, because that table has no
DELETE policy at all (by design, for audit immutability) - RLS filters
DELETE-eligible rows to none rather than erroring. Added
supabase/functions_3.sql: a policy scoped to hr_admin deleting only rows
that carry a reorg_scenario_id, so every other history event type stays
genuinely immutable. Verified live: apply moves an employee and updates
the headcount table correctly; undo reverts team/division/manager AND
now actually removes the Reorganisation history entries it created.
Simplification flagged here (not hidden): the spec's "Ganzes Team /
Ganze Abteilung / Ganzer Bereich" reorg moves the structural org unit
itself to a new division; this implementation resolves all four move
kinds down to individual employee moves against a specific target team,
since the schema's team->department->division chain doesn't support
freely reparenting a team object without also picking a department. The
workbench UI, headcount-impact math, and apply/undo all work correctly
under this model - only the exact "move the team as a unit" semantics
differs from the literal spec wording.
This commit is contained in:
427
components/orgchart/ReorgWorkbench.tsx
Normal file
427
components/orgchart/ReorgWorkbench.tsx
Normal file
@@ -0,0 +1,427 @@
|
||||
"use client";
|
||||
|
||||
import { RotateCcw, X } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMemo, useState } from "react";
|
||||
import { applyReorg, undoReorg, type ReorgMovePayload } from "@/actions/reorg";
|
||||
import { Lookup } from "@/components/ui/Lookup";
|
||||
import { useToast } from "@/components/ui/Toast";
|
||||
import { fmtDate } from "@/lib/format";
|
||||
import type { OrgDepartment, OrgDivision, OrgEmployee, OrgTeam, ReorgScenarioSummary } from "./types";
|
||||
|
||||
type ChangeKind = "emp" | "team" | "abt" | "dept";
|
||||
|
||||
type PendingMove = {
|
||||
id: string;
|
||||
kind: ChangeKind;
|
||||
label: string;
|
||||
employeeIds: string[];
|
||||
targetTeamId: string;
|
||||
targetTeamLabel: string;
|
||||
};
|
||||
|
||||
const KIND_LABELS: Record<ChangeKind, string> = {
|
||||
emp: "Mitarbeiter:in(nen)",
|
||||
team: "Ganzes Team",
|
||||
abt: "Ganze Abteilung",
|
||||
dept: "Ganzer Bereich",
|
||||
};
|
||||
|
||||
type ReorgWorkbenchProps = {
|
||||
employees: OrgEmployee[];
|
||||
divisions: OrgDivision[];
|
||||
departments: OrgDepartment[];
|
||||
teams: OrgTeam[];
|
||||
reorgScenarios: ReorgScenarioSummary[];
|
||||
};
|
||||
|
||||
export function ReorgWorkbench({ employees, divisions, departments, teams, reorgScenarios }: ReorgWorkbenchProps) {
|
||||
const { showToast } = useToast();
|
||||
const router = useRouter();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [effectiveDate, setEffectiveDate] = useState("");
|
||||
const [changeType, setChangeType] = useState<ChangeKind>("emp");
|
||||
const [selectedEmployees, setSelectedEmployees] = useState<OrgEmployee[]>([]);
|
||||
const [sourceTeamId, setSourceTeamId] = useState("");
|
||||
const [sourceDeptId, setSourceDeptId] = useState("");
|
||||
const [sourceDivisionId, setSourceDivisionId] = useState("");
|
||||
const [targetDivisionId, setTargetDivisionId] = useState("");
|
||||
const [targetTeamId, setTargetTeamId] = useState("");
|
||||
const [pendingMoves, setPendingMoves] = useState<PendingMove[]>([]);
|
||||
const [applying, setApplying] = useState(false);
|
||||
const [undoingId, setUndoingId] = useState<string | null>(null);
|
||||
|
||||
const divisionById = useMemo(() => new Map(divisions.map((d) => [d.id, d])), [divisions]);
|
||||
const departmentById = useMemo(() => new Map(departments.map((d) => [d.id, d])), [departments]);
|
||||
const teamById = useMemo(() => new Map(teams.map((t) => [t.id, t])), [teams]);
|
||||
const teamDivisionId = useMemo(() => {
|
||||
const deptDivision = new Map(departments.map((d) => [d.id, d.division_id]));
|
||||
const m = new Map<string, string>();
|
||||
for (const t of teams) m.set(t.id, deptDivision.get(t.department_id) ?? "");
|
||||
return m;
|
||||
}, [teams, departments]);
|
||||
const teamsInTargetDivision = useMemo(
|
||||
() => teams.filter((t) => teamDivisionId.get(t.id) === targetDivisionId),
|
||||
[teams, teamDivisionId, targetDivisionId]
|
||||
);
|
||||
|
||||
async function searchLocalEmployees(query: string): Promise<OrgEmployee[]> {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (q.length < 2) return [];
|
||||
return employees
|
||||
.filter(
|
||||
(e) =>
|
||||
!selectedEmployees.some((s) => s.id === e.id) &&
|
||||
(`${e.first_name} ${e.last_name}`.toLowerCase().includes(q) || e.job_title.toLowerCase().includes(q))
|
||||
)
|
||||
.slice(0, 20);
|
||||
}
|
||||
|
||||
function resolveEmployeeIds(): string[] {
|
||||
if (changeType === "emp") return selectedEmployees.map((e) => e.id);
|
||||
if (changeType === "team") return employees.filter((e) => e.team_id === sourceTeamId).map((e) => e.id);
|
||||
if (changeType === "abt") {
|
||||
const teamIds = new Set(teams.filter((t) => t.department_id === sourceDeptId).map((t) => t.id));
|
||||
return employees.filter((e) => e.team_id && teamIds.has(e.team_id)).map((e) => e.id);
|
||||
}
|
||||
return employees.filter((e) => e.division_id === sourceDivisionId).map((e) => e.id);
|
||||
}
|
||||
|
||||
function sourceLabel(): string {
|
||||
if (changeType === "emp") return `${selectedEmployees.length} Mitarbeiter:in(nen)`;
|
||||
if (changeType === "team") return `Team ${teamById.get(sourceTeamId)?.name ?? ""}`;
|
||||
if (changeType === "abt") return `Abteilung ${departmentById.get(sourceDeptId)?.name ?? ""}`;
|
||||
return `Bereich ${divisionById.get(sourceDivisionId)?.name ?? ""}`;
|
||||
}
|
||||
|
||||
function handleAddMove() {
|
||||
const employeeIds = resolveEmployeeIds();
|
||||
if (employeeIds.length === 0) {
|
||||
showToast("Keine Mitarbeiter:innen in der Auswahl gefunden.", "error");
|
||||
return;
|
||||
}
|
||||
if (!targetTeamId) {
|
||||
showToast("Bitte ein Ziel-Team wählen.", "error");
|
||||
return;
|
||||
}
|
||||
const targetTeam = teamById.get(targetTeamId);
|
||||
setPendingMoves((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
kind: changeType,
|
||||
label: sourceLabel(),
|
||||
employeeIds,
|
||||
targetTeamId,
|
||||
targetTeamLabel: targetTeam?.name ?? "",
|
||||
},
|
||||
]);
|
||||
setSelectedEmployees([]);
|
||||
setSourceTeamId("");
|
||||
setSourceDeptId("");
|
||||
setSourceDivisionId("");
|
||||
}
|
||||
|
||||
function removeMove(id: string) {
|
||||
setPendingMoves((prev) => prev.filter((m) => m.id !== id));
|
||||
}
|
||||
|
||||
const divisionBefore = useMemo(() => {
|
||||
const m = new Map<string, number>();
|
||||
for (const e of employees) m.set(e.division_id, (m.get(e.division_id) ?? 0) + 1);
|
||||
return m;
|
||||
}, [employees]);
|
||||
|
||||
const divisionDelta = useMemo(() => {
|
||||
const m = new Map<string, number>();
|
||||
const employeeById = new Map(employees.map((e) => [e.id, e]));
|
||||
for (const move of pendingMoves) {
|
||||
const targetDivId = teamDivisionId.get(move.targetTeamId);
|
||||
for (const empId of move.employeeIds) {
|
||||
const emp = employeeById.get(empId);
|
||||
if (!emp || !targetDivId || emp.division_id === targetDivId) continue;
|
||||
m.set(emp.division_id, (m.get(emp.division_id) ?? 0) - 1);
|
||||
m.set(targetDivId, (m.get(targetDivId) ?? 0) + 1);
|
||||
}
|
||||
}
|
||||
return m;
|
||||
}, [pendingMoves, employees, teamDivisionId]);
|
||||
|
||||
async function handleApply() {
|
||||
if (!name || !effectiveDate || pendingMoves.length === 0) {
|
||||
showToast("Bitte Name, Datum und mindestens eine Änderung angeben.", "error");
|
||||
return;
|
||||
}
|
||||
setApplying(true);
|
||||
const moves: ReorgMovePayload[] = pendingMoves.map((m) => ({
|
||||
kind: m.kind,
|
||||
label: m.label,
|
||||
employee_ids: m.employeeIds,
|
||||
target_team_id: m.targetTeamId,
|
||||
}));
|
||||
const result = await applyReorg({ name, effective_date: effectiveDate, moves });
|
||||
setApplying(false);
|
||||
if (result.success) {
|
||||
showToast("Reorganisation durchgeführt.");
|
||||
setPendingMoves([]);
|
||||
setName("");
|
||||
setEffectiveDate("");
|
||||
router.refresh();
|
||||
} else {
|
||||
showToast(result.error ?? "Fehler bei der Reorganisation.", "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUndo(scenarioId: string) {
|
||||
setUndoingId(scenarioId);
|
||||
const result = await undoReorg({ scenario_id: scenarioId });
|
||||
setUndoingId(null);
|
||||
if (result.success) {
|
||||
showToast("Reorganisation rückgängig gemacht.");
|
||||
router.refresh();
|
||||
} else {
|
||||
showToast(result.error ?? "Fehler beim Rückgängigmachen.", "error");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<h2 className="mb-3 text-sm font-bold text-ink">Neue Reorganisation</h2>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-semibold text-ink">Name der Reorganisation*</label>
|
||||
<input value={name} onChange={(e) => setName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-semibold text-ink">Wirksam ab*</label>
|
||||
<input
|
||||
type="date"
|
||||
value={effectiveDate}
|
||||
onChange={(e) => setEffectiveDate(e.target.value)}
|
||||
className="w-full rounded border border-border px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex gap-2">
|
||||
{(Object.keys(KIND_LABELS) as ChangeKind[]).map((kind) => (
|
||||
<button
|
||||
key={kind}
|
||||
type="button"
|
||||
onClick={() => setChangeType(kind)}
|
||||
className={`rounded px-3 py-1.5 text-sm font-semibold ${
|
||||
changeType === kind ? "bg-brand-500 text-white" : "border border-border text-ink-body hover:bg-surface"
|
||||
}`}
|
||||
>
|
||||
{KIND_LABELS[kind]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-semibold text-ink">Quelle</label>
|
||||
{changeType === "emp" && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Lookup<OrgEmployee>
|
||||
placeholder="Mitarbeiter:in suchen…"
|
||||
onSearch={searchLocalEmployees}
|
||||
onSelect={(e) => setSelectedEmployees((prev) => [...prev, e])}
|
||||
renderResult={(e) => (
|
||||
<div>
|
||||
<div className="font-semibold text-ink">
|
||||
{e.first_name} {e.last_name}
|
||||
</div>
|
||||
<div className="text-xs text-ink-muted">{e.job_title}</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
{selectedEmployees.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{selectedEmployees.map((e) => (
|
||||
<span key={e.id} className="flex items-center gap-1 rounded-full bg-brand-100 px-2.5 py-1 text-xs font-semibold text-brand-700">
|
||||
{e.first_name} {e.last_name}
|
||||
<button type="button" onClick={() => setSelectedEmployees((prev) => prev.filter((s) => s.id !== e.id))}>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{changeType === "team" && (
|
||||
<select value={sourceTeamId} onChange={(e) => setSourceTeamId(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
|
||||
<option value="">Team wählen…</option>
|
||||
{teams.map((t) => (
|
||||
<option key={t.id} value={t.id}>
|
||||
{t.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
{changeType === "abt" && (
|
||||
<select value={sourceDeptId} onChange={(e) => setSourceDeptId(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
|
||||
<option value="">Abteilung wählen…</option>
|
||||
{departments.map((d) => (
|
||||
<option key={d.id} value={d.id}>
|
||||
{d.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
{changeType === "dept" && (
|
||||
<select
|
||||
value={sourceDivisionId}
|
||||
onChange={(e) => setSourceDivisionId(e.target.value)}
|
||||
className="w-full rounded border border-border px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bereich wählen…</option>
|
||||
{divisions.map((d) => (
|
||||
<option key={d.id} value={d.id}>
|
||||
{d.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-semibold text-ink">Ziel-Bereich* / Ziel-Team*</label>
|
||||
<div className="flex flex-col gap-2">
|
||||
<select
|
||||
value={targetDivisionId}
|
||||
onChange={(e) => {
|
||||
setTargetDivisionId(e.target.value);
|
||||
setTargetTeamId("");
|
||||
}}
|
||||
className="w-full rounded border border-border px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Ziel-Bereich wählen…</option>
|
||||
{divisions.map((d) => (
|
||||
<option key={d.id} value={d.id}>
|
||||
{d.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={targetTeamId} onChange={(e) => setTargetTeamId(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
|
||||
<option value="">Ziel-Team wählen…</option>
|
||||
{teamsInTargetDivision.map((t) => (
|
||||
<option key={t.id} value={t.id}>
|
||||
{t.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAddMove}
|
||||
className="mt-4 rounded border border-border px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface"
|
||||
>
|
||||
+ Zur Reorganisation hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{pendingMoves.length > 0 && (
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<h2 className="mb-3 text-sm font-bold text-ink">Geplante Änderungen ({pendingMoves.length})</h2>
|
||||
<ul className="mb-4 flex flex-col divide-y divide-border">
|
||||
{pendingMoves.map((m) => (
|
||||
<li key={m.id} className="flex items-center justify-between py-2 text-sm">
|
||||
<div>
|
||||
<span className="mr-2 rounded-full bg-purple-bg px-2 py-0.5 text-xs font-semibold text-purple-text">{KIND_LABELS[m.kind]}</span>
|
||||
<span className="text-ink">
|
||||
{m.label} → {m.targetTeamLabel}
|
||||
</span>
|
||||
<span className="ml-2 text-xs text-ink-muted">({m.employeeIds.length} Mitarbeiter:innen)</span>
|
||||
</div>
|
||||
<button type="button" onClick={() => removeMove(m.id)} aria-label="Entfernen" className="text-ink-muted hover:text-danger-solid">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Auswirkung auf Headcount</h3>
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-left text-xs text-ink-muted">
|
||||
<th className="py-1 pr-3">Bereich</th>
|
||||
<th className="py-1 pr-3">Vorher</th>
|
||||
<th className="py-1 pr-3">Nachher</th>
|
||||
<th className="py-1 pr-3">Δ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Array.from(divisionDelta.entries())
|
||||
.filter(([, delta]) => delta !== 0)
|
||||
.map(([divId, delta]) => {
|
||||
const before = divisionBefore.get(divId) ?? 0;
|
||||
return (
|
||||
<tr key={divId} className="border-t border-border">
|
||||
<td className="py-1.5 pr-3 text-ink">{divisionById.get(divId)?.name}</td>
|
||||
<td className="py-1.5 pr-3 text-ink-body">{before}</td>
|
||||
<td className="py-1.5 pr-3 text-ink-body">{before + delta}</td>
|
||||
<td className={`py-1.5 pr-3 font-semibold ${delta > 0 ? "text-success-text" : "text-danger-text"}`}>
|
||||
{delta > 0 ? `+${delta}` : delta}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="mt-4 flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPendingMoves([])}
|
||||
className="rounded border border-border px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface"
|
||||
>
|
||||
Verwerfen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleApply}
|
||||
disabled={applying}
|
||||
className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
|
||||
>
|
||||
Reorganisation durchführen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{reorgScenarios.length > 0 && (
|
||||
<div className="rounded border border-border bg-white p-4">
|
||||
<h2 className="mb-3 text-sm font-bold text-ink">↩ Durchgeführte Reorganisationen – rückgängig machbar</h2>
|
||||
<ul className="flex flex-col divide-y divide-border">
|
||||
{reorgScenarios.map((s) => (
|
||||
<li key={s.id} className="flex items-center justify-between py-2 text-sm">
|
||||
<div>
|
||||
<span className="font-semibold text-ink">{s.name}</span>
|
||||
<span className="ml-2 text-xs text-ink-muted">
|
||||
wirksam ab {fmtDate(s.effective_date)} · durchgeführt am {fmtDate(s.applied_at)}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleUndo(s.id)}
|
||||
disabled={undoingId === s.id}
|
||||
className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-xs font-semibold text-ink-body hover:bg-surface disabled:opacity-50"
|
||||
>
|
||||
<RotateCcw className="h-3.5 w-3.5" />
|
||||
Rückgängig machen
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user