Implement missing UI button features, filters, search, and view toggles across all modules

src/app/dashboard/kalender/page.tsx

@@ -5,15 +5,15 @@ import {
   TerminType,
   UserRole,
 } from "@prisma/client";
-import { HelpCircle, ListFilter, Search } from "lucide-react";
+import { HelpCircle } from "lucide-react";
 
 import { requireKitaSession } from "@/lib/auth-utils";
 import { prisma } from "@/lib/prisma";
-import { Input } from "@/components/ui/input";
 import { AdminTerminModal } from "./_components/admin-termin-modal";
 import { PendingAnfragen, type PendingTerminDto } from "./_components/pending-anfragen";
-import { TerminList, type CalendarListItemDto } from "./_components/termin-list";
+import { type CalendarListItemDto } from "./_components/termin-list";
 import { TerminRequestModal } from "./_components/termin-request-modal";
+import { CalendarOverviewClient } from "./_components/calendar-overview-client";
 
 export const metadata = { title: "Terminkalender · Kita-Planer" };
 
@@ -253,7 +253,7 @@ export default async function KalenderPage({
 
           <div>
             {currentTab === "übersicht" ? (
-              <CalendarOverview
+              <CalendarOverviewClient
                 termine={allUserTermine}
                 userId={session.user.id}
                 isAdmin={isAdmin}
@@ -261,7 +261,7 @@ export default async function KalenderPage({
             ) : currentTab === "anfragen" ? (
               <PendingAnfragen termine={allPendingTermine} />
             ) : (
-              <CalendarOverview
+              <CalendarOverviewClient
                 termine={[]}
                 userId={session.user.id}
                 isAdmin={isAdmin}
@@ -270,7 +270,7 @@ export default async function KalenderPage({
           </div>
         </div>
       ) : (
-        <CalendarOverview
+        <CalendarOverviewClient
           termine={allUserTermine}
           userId={session.user.id}
           isAdmin={isAdmin}
@@ -280,49 +280,7 @@ export default async function KalenderPage({
   );
 }
 
-function CalendarOverview({
-  termine,
-  userId,
-  isAdmin,
-}: {
-  termine: CalendarListItemDto[];
-  userId: string;
-  isAdmin: boolean;
-}) {
-  return (
-    <div className="space-y-5">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div className="inline-flex overflow-hidden rounded-full border border-[var(--hairline)] bg-[var(--surface)]">
-          {["Liste", "Monat", "Agenda"].map((label, index) => (
-            <button
-              key={label}
-              type="button"
-              className={[
-                "h-9 px-4 text-[13px] font-semibold transition",
-                index > 0 ? "border-l border-[var(--hairline-soft)]" : "",
-                index === 0
-                  ? "bg-[var(--accent-soft)] text-[var(--accent-deep)]"
-                  : "text-[var(--ink-soft)] hover:bg-[var(--surface-2)] hover:text-[var(--ink)]",
-              ].join(" ")}
-            >
-              {label}
-            </button>
-          ))}
-        </div>
 
-        <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
-          <CategoryChips />
-          <div className="relative min-w-56">
-            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ink-muted)] [stroke-width:1.7]" />
-            <Input placeholder="Termine suchen" className="h-9 pl-9" />
-          </div>
-        </div>
-      </div>
-
-      <TerminList termine={termine} userId={userId} isAdmin={isAdmin} />
-    </div>
-  );
-}
 
 function TabBar({
   currentTab,
@@ -400,50 +358,4 @@ function TabLink({
   );
 }
 
-function CategoryChips() {
-  const categories = [
-    ["Schließtag", TerminType.SCHLIESSTAG],
-    ["Teamtag", TerminType.TEAMTAG],
-    ["Elternabend", TerminType.ELTERNABEND],
-    ["Fest", TerminType.KITA_FEST],
-    ["Geburtstag", TerminType.GEBURTSTAG_INTERN],
-    ["Sonstiges", TerminType.SONSTIGES],
-  ] as const;
 
-  return (
-    <div className="flex flex-wrap gap-1.5">
-      <span className="inline-flex h-9 items-center gap-1.5 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-medium text-[var(--ink-soft)]">
-        <ListFilter className="h-3.5 w-3.5 [stroke-width:1.7]" />
-        Filter
-      </span>
-      {categories.map(([label, type]) => (
-        <span
-          key={label}
-          className="inline-flex h-9 items-center gap-1.5 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-medium text-[var(--ink-soft)]"
-        >
-          <span
-            className="h-2 w-2 rounded-full"
-            style={{ backgroundColor: getCategoryColor(type) }}
-          />
-          {label}
-        </span>
-      ))}
-    </div>
-  );
-}
-
-function getCategoryColor(type: TerminType) {
-  switch (type) {
-    case TerminType.SCHLIESSTAG:
-    case TerminType.TEAMTAG:
-      return "var(--danger)";
-    case TerminType.ELTERNABEND:
-      return "oklch(0.50 0.10 280)";
-    case TerminType.KITA_FEST:
-      return "var(--good)";
-    case TerminType.GEBURTSTAG_INTERN:
-      return "oklch(0.50 0.10 320)";
-    default:
-      return "var(--ink-muted)";
-  }
-}