feat(dashboard): 5 Tabs — Home, E-Mail, Kalender, Aufgaben, Kontakte

Tab-Leiste auf Dashboard-Seite. Home zeigt bisherigen Inhalt,
restliche Tabs als Platzhalter (Inhalt folgt).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/frontend/src/shell/DashboardPage.module.css

@@ -17,3 +17,80 @@
   margin: 0;
   color: var(--color-text);
 }
+
+/* ── Tabs ── */
+
+.tabBar {
+  display: flex;
+  gap: 0;
+  border-bottom: 2px solid var(--color-border);
+  margin-bottom: 1.75rem;
+}
+
+.tab {
+  padding: 0.625rem 1.375rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  white-space: nowrap;
+}
+
+.tab:hover {
+  color: var(--color-text);
+}
+
+.activeTab {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+  font-weight: 600;
+}
+
+.tabContent {
+  min-height: 200px;
+}
+
+/* ── Platzhalter für bestehenden Home-Inhalt ── */
+
+.placeholder {
+  background: var(--color-bg-card);
+  border-radius: var(--radius-md);
+  padding: 1.5rem;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--color-border);
+}
+
+/* ── Coming Soon ── */
+
+.comingSoon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  text-align: center;
+  gap: 0.5rem;
+}
+
+.comingSoonIcon {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.comingSoonTitle {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.comingSoonSub {
+  font-size: 0.9375rem;
+  color: var(--color-text-muted);
+  margin: 0;
+}

packages/frontend/src/shell/DashboardPage.tsx

@@ -1,38 +1,95 @@
+import { useState } from 'react';
 import { useAuth } from '../auth/AuthContext';
 import { WeatherWidget } from '../components/WeatherWidget';
 import { EventCountdownTiles } from '../components/EventCountdownTiles';
 import styles from './DashboardPage.module.css';
 
-export function DashboardPage() {
+type DashboardTab = 'home' | 'emails' | 'calendar' | 'tasks' | 'contacts';
-  const { user } = useAuth();
 
+const TABS: { id: DashboardTab; label: string }[] = [
+  { id: 'home',     label: 'Home'     },
+  { id: 'emails',   label: 'E-Mail'   },
+  { id: 'calendar', label: 'Kalender' },
+  { id: 'tasks',    label: 'Aufgaben' },
+  { id: 'contacts', label: 'Kontakte' },
+];
+
+// ── Tab-Inhalte ───────────────────────────────────────────────────────────────
+
+function HomeTab({ firstName, lastName, city, role }: {
+  firstName?: string;
+  lastName?: string;
+  city?: string | null;
+  role?: string;
+}) {
   return (
-    <div>
+    <>
-      {/* Header: Titel links, Wetter rechts */}
       <div className={styles.header}>
         <h1 className={styles.title}>
-          Willkommen, {user?.firstName} {user?.lastName}
+          Willkommen, {firstName} {lastName}
         </h1>
-        <WeatherWidget city={user?.city} />
+        <WeatherWidget city={city ?? undefined} />
       </div>
-
-      {/* Messe-Countdown-Kacheln */}
       <EventCountdownTiles />
-
+      <div className={styles.placeholder}>
-      <div style={{
-        background: 'var(--color-bg-card)',
-        borderRadius: 'var(--radius-md)',
-        padding: '1.5rem',
-        boxShadow: 'var(--shadow-sm)',
-        border: '1px solid var(--color-border)',
-      }}>
         <p style={{ color: 'var(--color-text-secondary)' }}>
           INSIGHT Platform - Sprint 1 Alpha
         </p>
         <p style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem', marginTop: '0.5rem' }}>
-          Rolle: {user?.role}
+          Rolle: {role}
         </p>
       </div>
+    </>
+  );
+}
+
+function ComingSoonTab({ label }: { label: string }) {
+  return (
+    <div className={styles.comingSoon}>
+      <span className={styles.comingSoonIcon}>🚧</span>
+      <p className={styles.comingSoonTitle}>{label}</p>
+      <p className={styles.comingSoonSub}>Inhalt folgt in Kürze.</p>
+    </div>
+  );
+}
+
+// ── Main ──────────────────────────────────────────────────────────────────────
+
+export function DashboardPage() {
+  const { user } = useAuth();
+  const [activeTab, setActiveTab] = useState<DashboardTab>('home');
+
+  return (
+    <div>
+      {/* Tab-Leiste */}
+      <div className={styles.tabBar}>
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            className={`${styles.tab} ${activeTab === tab.id ? styles.activeTab : ''}`}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab-Inhalt */}
+      <div className={styles.tabContent}>
+        {activeTab === 'home' && (
+          <HomeTab
+            firstName={user?.firstName}
+            lastName={user?.lastName}
+            city={user?.city}
+            role={user?.role}
+          />
+        )}
+        {activeTab === 'emails'   && <ComingSoonTab label="E-Mail" />}
+        {activeTab === 'calendar' && <ComingSoonTab label="Kalender" />}
+        {activeTab === 'tasks'    && <ComingSoonTab label="Aufgaben" />}
+        {activeTab === 'contacts' && <ComingSoonTab label="Kontakte" />}
+      </div>
     </div>
   );
 }