Consolidation pass: HR-only access, effective-dated mutations, data integrity guards, test suite

Reworks the app from a two-role (hr_admin/manager) model to a single
HR-only role gated by profiles.is_active, fixes transfer/promote/karenz/
reorg RPCs to actually defer future-dated changes via a new
pending_org_changes table instead of writing them immediately (applied
by a daily Vercel Cron route), makes reorg undo append-only instead of
deleting history, adds Karenz-return and history-date integrity guards,
deprecates the salary column, and adds explicit schema grants + perf
indexes needed to run against a fresh (non-hosted) Postgres instance.

Adds vitest unit + integration test suites (the latter against a real
local Supabase instance) covering all of the above, plus lint/typecheck/
build wiring (`npm run check`).

components/ui/CountryPicker.tsx

@@ -14,10 +14,18 @@ type CountryPickerProps = {
 // value, not an object with its own detail fields.
 export function CountryPicker({ value, onChange, countries, placeholder = "Land suchen…" }: CountryPickerProps) {
   const [query, setQuery] = useState(value);
+  const [prevValue, setPrevValue] = useState(value);
   const [open, setOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => setQuery(value), [value]);
+  // Re-sync the local draft text when `value` changes externally (e.g. the
+  // surrounding form loads a different employee). Adjusting state directly
+  // during render — rather than in an effect — avoids an extra render pass
+  // and the synchronous setState-in-effect this used to do.
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setQuery(value);
+  }
 
   useEffect(() => {
     function onClickOutside(e: MouseEvent) {

components/ui/Lookup.tsx

@@ -18,30 +18,38 @@ export function Lookup<T>({ placeholder = "Suchen…", onSearch, renderResult, o
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<T[]>([]);
   const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
+  // Derived from "have we finished searching for the current query yet",
+  // rather than a separate state flag flipped synchronously at the top of
+  // the effect below — the effect only ever sets state from the async
+  // search's own completion callback now.
+  const [lastSearchedQuery, setLastSearchedQuery] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  const tooShort = query.trim().length < minChars;
+  const loading = !tooShort && lastSearchedQuery !== query.trim();
+
   useEffect(() => {
-    if (query.trim().length < minChars) {
-      setResults([]);
-      setOpen(false);
-      return;
-    }
+    if (tooShort) return;
     let cancelled = false;
-    setLoading(true);
     const timeout = setTimeout(() => {
       onSearch(query.trim()).then((res) => {
         if (cancelled) return;
         setResults(res);
         setOpen(true);
-        setLoading(false);
+        setLastSearchedQuery(query.trim());
       });
     }, 200);
     return () => {
       cancelled = true;
       clearTimeout(timeout);
     };
-  }, [query, minChars, onSearch]);
+  }, [query, minChars, onSearch, tooShort]);
+
+  // Derived rather than reset via effect: once the query drops below
+  // minChars, hide the dropdown and any stale results immediately without
+  // needing a synchronous setState inside the effect above.
+  const showDropdown = open && !tooShort;
+  const visibleResults = tooShort ? [] : results;
 
   useEffect(() => {
     function onClickOutside(e: MouseEvent) {
@@ -77,12 +85,12 @@ export function Lookup<T>({ placeholder = "Suchen…", onSearch, renderResult, o
           </button>
         )}
       </div>
-      {open && (
+      {showDropdown && (
         <div className="absolute z-20 mt-1 max-h-64 w-full overflow-y-auto rounded border border-border bg-white shadow-lg">
           {loading && <div className="px-3 py-2 text-sm text-ink-muted">Suche…</div>}
-          {!loading && results.length === 0 && <div className="px-3 py-2 text-sm text-ink-muted">Keine Treffer</div>}
+          {!loading && visibleResults.length === 0 && <div className="px-3 py-2 text-sm text-ink-muted">Keine Treffer</div>}
           {!loading &&
-            results.map((item, i) => (
+            visibleResults.map((item, i) => (
               <button
                 key={i}
                 type="button"