Maximilian Stubhan
366731ec85
- supabase/functions.sql, functions_2.sql: Postgres RPCs for every employee/position/reorg mutation (hire, terminate, transfer, promote, start/adjust/return karenz, change data, rehire, create position, staff internally, apply/undo reorg). Each resolves manager_id server-side, writes history + audit atomically, and enforces hr_admin via require_hr_admin() (backed by the existing RLS policy). - actions/employees.ts, positions.ts, reorg.ts: Server Actions wrapping the RPCs, returning success/error for client-side toast handling. - Employees list (search/filter/pagination) and detail (4 tabs: Stammdaten, Vertrag & Gehalt, Organisation, Historie) reading from employees_directory. - 6 action slide-over panels: Transfer, Promote, Karenz (start/adjust/ return), Daten aendern (person+contract diffing), Terminate (with direct- report reparenting warning + offboarding checklist), Rehire. - lib/org.ts: shared division/department/team/location lookups. Verified live: promote mutation updates salary, writes history/audit, and the detail page reflects it after refresh, no console errors. Note: the spec's Karenz-verwalten panel only covers employees already on Karenz; added a start-Karenz mode (Karenzbeginn/geplante Rueckkehr) to cover the Aktiv-employee case implied by the header button but not specified in the panel list.
91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { Search } from "lucide-react";
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
|
|
type EmployeeFiltersProps = {
|
|
divisions: { id: string; name: string }[];
|
|
locations: { id: string; name: string }[];
|
|
};
|
|
|
|
const STATUS_OPTIONS = ["Aktiv", "Karenz", "Geplant", "Ausgetreten"] as const;
|
|
|
|
export function EmployeeFilters({ divisions, locations }: EmployeeFiltersProps) {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
const [q, setQ] = useState(searchParams.get("q") ?? "");
|
|
|
|
useEffect(() => {
|
|
const handle = setTimeout(() => {
|
|
const current = new URLSearchParams(searchParams.toString());
|
|
if (q) current.set("q", q);
|
|
else current.delete("q");
|
|
current.delete("page");
|
|
const next = current.toString();
|
|
if (next !== searchParams.toString()) router.push(`${pathname}?${next}`);
|
|
}, 300);
|
|
return () => clearTimeout(handle);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [q]);
|
|
|
|
function updateParam(key: string, value: string) {
|
|
const params = new URLSearchParams(searchParams.toString());
|
|
if (value) params.set(key, value);
|
|
else params.delete(key);
|
|
params.delete("page");
|
|
router.push(`${pathname}?${params.toString()}`);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<div className="flex min-w-[240px] flex-1 items-center gap-2 rounded border border-border bg-white px-3 py-2">
|
|
<Search className="h-4 w-4 shrink-0 text-ink-muted" />
|
|
<input
|
|
value={q}
|
|
onChange={(e) => setQ(e.target.value)}
|
|
placeholder="Name, Pers.-Nr., Titel…"
|
|
className="w-full text-sm text-ink outline-none placeholder:text-ink-muted"
|
|
/>
|
|
</div>
|
|
<select
|
|
defaultValue={searchParams.get("division") ?? ""}
|
|
onChange={(e) => updateParam("division", e.target.value)}
|
|
className="rounded border border-border bg-white px-3 py-2 text-sm text-ink"
|
|
>
|
|
<option value="">Alle Bereiche</option>
|
|
{divisions.map((d) => (
|
|
<option key={d.id} value={d.id}>
|
|
{d.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
defaultValue={searchParams.get("status") ?? ""}
|
|
onChange={(e) => updateParam("status", e.target.value)}
|
|
className="rounded border border-border bg-white px-3 py-2 text-sm text-ink"
|
|
>
|
|
<option value="">Alle Status</option>
|
|
{STATUS_OPTIONS.map((s) => (
|
|
<option key={s} value={s}>
|
|
{s}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
defaultValue={searchParams.get("location") ?? ""}
|
|
onChange={(e) => updateParam("location", e.target.value)}
|
|
className="rounded border border-border bg-white px-3 py-2 text-sm text-ink"
|
|
>
|
|
<option value="">Alle Standorte</option>
|
|
{locations.map((l) => (
|
|
<option key={l.id} value={l.id}>
|
|
{l.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
}
|