Let the overview say what "upcoming" means

Sixty days and all three kinds was a guess, and it was the only one on
offer. Payroll cares about next month; the person filling a vacancy
cares about entries and nothing else. The card now takes a period and a
set of kinds.

The choice lives in the address rather than in the browser, because it
has to: the page is built on the server, and ninety days pulls in rows
that were never loaded at sixty. Filtering client-side would silently
cap the answer at whatever the first query happened to fetch. It also
means a filtered overview can be sent to someone and opened again the
same way.

Deselecting every kind returns to all of them. An empty card is not an
answer to a question nobody asked, and the way back would otherwise be
one click further than the way in. The default period and the full set
are absent from the URL instead of written into it, so a shared link
carries only what was actually chosen.

Anything the address cannot be trusted to hold is rejected: an unknown
period falls back to sixty rather than reaching the query, which would
otherwise be an invitation to ask for ten years of rows through a link.

Eight rows still, with a count of what did not fit underneath — this is
an overview, and the employee list is where lists belong.

Not verified in a browser: the built-in preview has no company sign-in,
so the page redirects to the login before it renders. Types, lint and
386 tests pass, and the filter's behaviour is covered directly.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

tests/components/AnstehendFilter.test.tsx

@@ -0,0 +1,98 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { AnstehendFilter } from "@/components/dashboard/AnstehendFilter";
+
+// Die Auswahl muss in die Adresse, nicht in den Browser-Zustand: die
+// Übersicht wird auf dem Server gebaut, und ein längerer Zeitraum bringt
+// Zeilen ins Spiel, die im Browser gar nicht liegen. Geprüft wird deshalb
+// genau das — was in der Adresse landet.
+
+const replace = vi.fn();
+let suchString = "";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ replace }),
+  usePathname: () => "/",
+  useSearchParams: () => new URLSearchParams(suchString),
+}));
+
+const ALLE = ["hire", "exit", "return"] as const;
+
+beforeEach(() => {
+  replace.mockClear();
+  suchString = "";
+});
+
+describe("AnstehendFilter", () => {
+  it("schreibt einen gewählten Zeitraum in die Adresse", async () => {
+    const user = userEvent.setup();
+    render(<AnstehendFilter zeitraum={60} arten={[...ALLE]} />);
+    await user.click(screen.getByRole("button", { name: "90 Tage" }));
+    expect(replace).toHaveBeenCalledWith("/?tage=90", { scroll: false });
+  });
+
+  it("lässt den Standard aus der Adresse verschwinden statt ihn hineinzuschreiben", async () => {
+    // Sonst trüge jede geteilte Adresse einen Filter, den niemand gesetzt hat.
+    const user = userEvent.setup();
+    suchString = "tage=90";
+    render(<AnstehendFilter zeitraum={90} arten={[...ALLE]} />);
+    await user.click(screen.getByRole("button", { name: "60 Tage" }));
+    expect(replace).toHaveBeenCalledWith("/", { scroll: false });
+  });
+
+  it("nimmt eine abgewählte Art aus der Auswahl", async () => {
+    const user = userEvent.setup();
+    render(<AnstehendFilter zeitraum={60} arten={[...ALLE]} />);
+    await user.click(screen.getByRole("button", { name: "Austritt" }));
+    expect(replace).toHaveBeenCalledWith("/?arten=hire%2Creturn", { scroll: false });
+  });
+
+  it("nimmt eine wieder hinzugewählte Art auf", async () => {
+    const user = userEvent.setup();
+    suchString = "arten=hire";
+    render(<AnstehendFilter zeitraum={60} arten={["hire"]} />);
+    await user.click(screen.getByRole("button", { name: "Rückkehr" }));
+    expect(replace).toHaveBeenCalledWith("/?arten=hire%2Creturn", { scroll: false });
+  });
+
+  it("führt die letzte abgewählte Art auf alle zurück, nicht auf keine", async () => {
+    // Eine leere Karte ist keine Antwort, und der Weg zurück wäre sonst ein
+    // Klick zu weit.
+    const user = userEvent.setup();
+    suchString = "arten=hire";
+    render(<AnstehendFilter zeitraum={60} arten={["hire"]} />);
+    await user.click(screen.getByRole("button", { name: "Eintritt" }));
+    expect(replace).toHaveBeenCalledWith("/", { scroll: false });
+  });
+
+  it("lässt vollständige Auswahl gar nicht erst in der Adresse stehen", async () => {
+    const user = userEvent.setup();
+    suchString = "arten=hire,exit";
+    render(<AnstehendFilter zeitraum={60} arten={["hire", "exit"]} />);
+    await user.click(screen.getByRole("button", { name: "Rückkehr" }));
+    expect(replace).toHaveBeenCalledWith("/", { scroll: false });
+  });
+
+  it("behält andere Angaben in der Adresse bei", async () => {
+    const user = userEvent.setup();
+    suchString = "arten=hire";
+    render(<AnstehendFilter zeitraum={60} arten={["hire"]} />);
+    await user.click(screen.getByRole("button", { name: "30 Tage" }));
+    expect(replace).toHaveBeenCalledWith("/?arten=hire&tage=30", { scroll: false });
+  });
+
+  it("zeigt am Knopf an, was gerade gewählt ist", () => {
+    render(<AnstehendFilter zeitraum={60} arten={["hire"]} />);
+    expect(screen.getByRole("button", { name: "Eintritt" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("button", { name: "Austritt" })).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("springt beim Filtern nicht an den Seitenanfang", async () => {
+    // Die Karte steht in der unteren Hälfte; dorthin sieht gerade, wer klickt.
+    const user = userEvent.setup();
+    render(<AnstehendFilter zeitraum={60} arten={[...ALLE]} />);
+    await user.click(screen.getByRole("button", { name: "30 Tage" }));
+    expect(replace.mock.calls[0][1]).toEqual({ scroll: false });
+  });
+});

tests/unit/dashboard-filter.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+import {
+  ANSTEHEND_ARTEN,
+  STANDARD_ZEITRAUM,
+  istEingeschraenkt,
+  parseArten,
+  parseZeitraum,
+} from "@/lib/dashboard-filter";
+
+// Die Auswahl steht in der Adresse, und dort kann alles stehen: eine
+// veraltete Verknüpfung, ein Tippfehler, ein abgeschnittener Wert. Sie darf
+// die Übersicht weder leeren noch mit einem Zeitraum laden, den niemand
+// gewählt hat.
+
+describe("parseZeitraum", () => {
+  it("nimmt die angebotenen Zeiträume", () => {
+    expect(parseZeitraum("30")).toBe(30);
+    expect(parseZeitraum("180")).toBe(180);
+  });
+
+  it("fällt ohne Angabe auf den Standard zurück", () => {
+    expect(parseZeitraum(undefined)).toBe(STANDARD_ZEITRAUM);
+    expect(parseZeitraum("")).toBe(STANDARD_ZEITRAUM);
+  });
+
+  it("lässt sich keinen beliebigen Zeitraum unterschieben", () => {
+    // Sonst liesse sich über die Adresse ein Lesevorgang über Jahre auslösen.
+    expect(parseZeitraum("3650")).toBe(STANDARD_ZEITRAUM);
+    expect(parseZeitraum("-5")).toBe(STANDARD_ZEITRAUM);
+    expect(parseZeitraum("60; drop")).toBe(STANDARD_ZEITRAUM);
+  });
+});
+
+describe("parseArten", () => {
+  const alle = ANSTEHEND_ARTEN.map((a) => a.value);
+
+  it("versteht eine Auswahl", () => {
+    expect(parseArten("hire,exit")).toEqual(["hire", "exit"]);
+  });
+
+  it("liest ohne Angabe alle — eine leere Karte wäre die falsche Antwort", () => {
+    expect(parseArten(undefined)).toEqual(alle);
+    expect(parseArten("")).toEqual(alle);
+  });
+
+  it("verwirft Unbekanntes und behält den Rest", () => {
+    expect(parseArten("hire,unfug")).toEqual(["hire"]);
+  });
+
+  it("führt eine Auswahl aus lauter Unbekanntem auf alle zurück", () => {
+    expect(parseArten("unfug,quatsch")).toEqual(alle);
+  });
+
+  it("stört sich nicht an Leerzeichen", () => {
+    expect(parseArten(" hire , return ")).toEqual(["hire", "return"]);
+  });
+});
+
+describe("istEingeschraenkt", () => {
+  const alle = ANSTEHEND_ARTEN.map((a) => a.value);
+
+  it("erkennt den unveränderten Zustand", () => {
+    expect(istEingeschraenkt(STANDARD_ZEITRAUM, alle)).toBe(false);
+  });
+
+  it("erkennt einen anderen Zeitraum", () => {
+    expect(istEingeschraenkt(90, alle)).toBe(true);
+  });
+
+  it("erkennt eine engere Auswahl", () => {
+    expect(istEingeschraenkt(STANDARD_ZEITRAUM, ["hire"])).toBe(true);
+  });
+});