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>

components/dashboard/AnstehendFilter.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { SegmentedControl } from "@/components/ui/SegmentedControl";
+import { actionBadgeStyle } from "@/lib/colors";
+import {
+  ANSTEHEND_ARTEN,
+  STANDARD_ZEITRAUM,
+  ZEITRAEUME,
+  type AnstehendArt,
+  type Zeitraum,
+} from "@/lib/dashboard-filter";
+
+// Die Auswahl wandert in die Adresse; die Seite baut sich damit neu. Das ist
+// hier nötig und nicht bloss ordentlich: ein längerer Zeitraum bringt Zeilen
+// ins Spiel, die vorher gar nicht geladen waren.
+//
+// router.replace statt push, damit der Zurück-Knopf nicht durch jede einzelne
+// Filterstellung zurückläuft, und ohne Sprung nach oben — die Karte steht in
+// der unteren Hälfte, und dorthin sieht gerade, wer hier klickt.
+
+export function AnstehendFilter({ zeitraum, arten }: { zeitraum: Zeitraum; arten: AnstehendArt[] }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  function setzen(key: string, wert: string | null) {
+    const params = new URLSearchParams(searchParams.toString());
+    if (wert) params.set(key, wert);
+    else params.delete(key);
+    const query = params.toString();
+    router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+  }
+
+  function artUmschalten(art: AnstehendArt) {
+    const alle = ANSTEHEND_ARTEN.map((a) => a.value);
+    const naechste = arten.includes(art) ? arten.filter((a) => a !== art) : [...arten, art];
+    // Nichts ausgewählt heisst wieder alles: eine leere Karte ist keine
+    // Antwort, und der Weg dorthin wäre ein Klick zu weit.
+    setzen("arten", naechste.length === 0 || naechste.length === alle.length ? null : naechste.join(","));
+  }
+
+  return (
+    <div className="mb-2 flex flex-wrap items-center gap-2">
+      <SegmentedControl<string>
+        value={String(zeitraum)}
+        onChange={(v) => setzen("tage", v === String(STANDARD_ZEITRAUM) ? null : v)}
+        options={ZEITRAEUME.map((t) => ({ value: String(t), label: `${t} Tage` }))}
+      />
+      <div className="flex flex-wrap items-center gap-1.5">
+        {ANSTEHEND_ARTEN.map((a) => {
+          const aktiv = arten.includes(a.value);
+          return (
+            <button
+              key={a.value}
+              type="button"
+              onClick={() => artUmschalten(a.value)}
+              aria-pressed={aktiv}
+              className={`rounded-full px-2 py-0.5 text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 ${
+                aktiv ? actionBadgeStyle(a.label) : "bg-surface text-ink-muted hover:text-ink"
+              }`}
+            >
+              {a.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}