Rollen Chunk 6: Team-Tab mit Matrix-Kalender und Genehmigungen

src/app/page.tsx

@@ -31,6 +31,7 @@ import { OvertimeHistory } from "@/components/OvertimeHistory";
 import { SettingsTabs } from "@/components/SettingsTabs";
 import { SickDayForm } from "@/components/SickDayForm";
 import { ThemeToggle, LogoutIcon } from "@/components/ThemeToggle";
+import { TeamTab } from "@/components/TeamTab";
 import { VacationForm, type VacationPreset } from "@/components/VacationForm";
 import { VacationHistory } from "@/components/VacationHistory";
 import { VacationTrash } from "@/components/VacationTrash";
@@ -56,6 +57,7 @@ const TABS = [
   { id: "zeiterfassung", label: "Zeiterfassung" },
   { id: "feiertage", label: "Feiertage" },
   { id: "jahr", label: "Verlauf" },
+  { id: "team", label: "Team" },
   { id: "einstellungen", label: "Einstellungen" },
 ] as const;
 
@@ -157,13 +159,16 @@ export default function Home() {
   }, [activeTab]);
 
   function selectTab(index: number) {
-    const tab = TABS[(index + TABS.length) % TABS.length];
+    const tab = visibleTabs[(index + visibleTabs.length) % visibleTabs.length];
+    if (!tab) {
+      return;
+    }
     setActiveTab(tab.id);
-    tabRefs.current[TABS.indexOf(tab)]?.focus();
+    tabRefs.current[visibleTabs.indexOf(tab)]?.focus();
   }
 
   function onTabKeyDown(event: React.KeyboardEvent) {
-    const current = TABS.findIndex((tab) => tab.id === activeTab);
+    const current = visibleTabs.findIndex((tab) => tab.id === activeTab);
     if (event.key === "ArrowRight") {
       event.preventDefault();
       selectTab(current + 1);
@@ -298,6 +303,12 @@ export default function Home() {
     );
   }
 
+  const visibleTabs = TABS.filter(
+    (tab) =>
+      tab.id !== "team" ||
+      authStatus?.user?.role === "admin" ||
+      authStatus?.user?.role === "teamleiter",
+  );
   return (
     <main className="app">
       <header className="app-header">
@@ -325,7 +336,7 @@ export default function Home() {
         className="app-tabs"
         onKeyDown={onTabKeyDown}
       >
-        {TABS.map((tab, index) => (
+        {visibleTabs.map((tab, index) => (
           <button
             key={tab.id}
             ref={(element) => {
@@ -594,6 +605,14 @@ export default function Home() {
           />
         </div>
       </div>
+      <div
+        role="tabpanel"
+        id="panel-team"
+        aria-labelledby="tab-team"
+        hidden={activeTab !== "team"}
+      >
+        <TeamTab year={year} active={activeTab === "team"} onReloaded={reload} />
+      </div>
       <div
         role="tabpanel"
         id="panel-einstellungen"