From 06c93ba05ca60ccb3fc4d4b1f86b04cc1bac03b2 Mon Sep 17 00:00:00 2001
From: Martin Porwoll <martin.porwoll@complexcaresolutions.de>
Date: Fri, 13 Feb 2026 13:50:35 +0000
Subject: [PATCH] feat: add YouTube Analytics Dashboard custom admin view

Custom admin view at /admin/youtube-analytics with 4 tabs:
- Performance: Views, Watch Time, CTR, Subscribers with period comparison
- Pipeline: Status distribution, scheduled videos, overdue tasks
- Goals: Monthly target progress bars and custom KPIs
- Community: Sentiment analysis, response time, top topics

Includes channel selector, period selector (7d/30d/90d), and
sidebar nav link in the YouTube section.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ...2-13-youtube-analytics-dashboard-design.md | 155 +++
 .../2026-02-13-youtube-analytics-dashboard.md | 971 ++++++++++++++++++
 src/app/(payload)/admin/importMap.js          |   4 +
 .../(payload)/api/youtube/analytics/route.ts  | 442 ++++++++
 .../admin/YouTubeAnalyticsDashboard.scss      | 722 +++++++++++++
 .../admin/YouTubeAnalyticsDashboard.tsx       | 865 ++++++++++++++++
 .../admin/YouTubeAnalyticsDashboardView.tsx   |  10 +
 .../admin/YouTubeAnalyticsNavLinks.scss       |  87 ++
 .../admin/YouTubeAnalyticsNavLinks.tsx        |  45 +
 src/payload.config.ts                         |  11 +-
 10 files changed, 3309 insertions(+), 3 deletions(-)
 create mode 100644 docs/plans/2026-02-13-youtube-analytics-dashboard-design.md
 create mode 100644 docs/plans/2026-02-13-youtube-analytics-dashboard.md
 create mode 100644 src/app/(payload)/api/youtube/analytics/route.ts
 create mode 100644 src/components/admin/YouTubeAnalyticsDashboard.scss
 create mode 100644 src/components/admin/YouTubeAnalyticsDashboard.tsx
 create mode 100644 src/components/admin/YouTubeAnalyticsDashboardView.tsx
 create mode 100644 src/components/admin/YouTubeAnalyticsNavLinks.scss
 create mode 100644 src/components/admin/YouTubeAnalyticsNavLinks.tsx

diff --git a/docs/plans/2026-02-13-youtube-analytics-dashboard-design.md b/docs/plans/2026-02-13-youtube-analytics-dashboard-design.md
new file mode 100644
index 0000000..981ec44
--- /dev/null
+++ b/docs/plans/2026-02-13-youtube-analytics-dashboard-design.md
@@ -0,0 +1,155 @@
+# YouTube Analytics Dashboard - Design
+
+**Datum:** 2026-02-13
+**Status:** Approved
+
+## Übersicht
+
+Custom Admin View für YouTube Analytics unter `/admin/youtube-analytics`.
+Kombiniertes Dashboard mit 4 Tabs: Performance, Pipeline, Goals, Community.
+Channel-Selector + Period-Selector oben. Sidebar Nav-Link im YouTube-Bereich.
+
+## Architektur
+
+### Ansatz
+Einzelnes Dashboard mit Tab-Navigation (Ansatz A).
+Jeder Tab lädt Daten lazy beim Wechsel über eine gemeinsame API-Route.
+
+### Dateien
+
+```
+src/
+├── components/admin/
+│   ├── YouTubeAnalyticsDashboard.tsx       # Haupt-Component (Client)
+│   ├── YouTubeAnalyticsDashboardView.tsx   # Wrapper für Payload Custom View
+│   ├── YouTubeAnalyticsDashboard.scss      # BEM-Styling
+│   └── YouTubeAnalyticsNavLinks.tsx        # Sidebar Nav-Link Component
+├── app/(payload)/api/youtube/
+│   └── analytics/route.ts                  # API-Route für alle Tabs
+```
+
+### Registrierung (payload.config.ts)
+
+```typescript
+admin: {
+  components: {
+    afterNavLinks: [
+      '@/components/admin/CommunityNavLinks#CommunityNavLinks',
+      '@/components/admin/YouTubeAnalyticsNavLinks#YouTubeAnalyticsNavLinks',
+    ],
+    views: {
+      TenantDashboard: { ... },
+      YouTubeAnalyticsDashboard: {
+        Component: '@/components/admin/YouTubeAnalyticsDashboardView#YouTubeAnalyticsDashboardView',
+        path: '/youtube-analytics',
+      },
+    },
+  },
+},
+```
+
+### Datenfluss
+
+```
+Browser → YouTubeAnalyticsDashboard (Client Component)
+  → fetch('/api/youtube/analytics?tab=X&channel=Y&period=Z')
+    → API Route → payload.find() / payload.count() parallel
+      → Aggregierte JSON-Response
+```
+
+## Tab-Struktur & Metriken
+
+### Tab 1: Performance
+
+**Stat-Cards:**
+- Gesamt-Views (Zeitraum) mit Trend vs. Vorperiode
+- Gesamt Watch Time (Stunden)
+- Durchschnittliche CTR (%)
+- Subscriber-Gewinn (Zeitraum)
+
+**Sektionen:**
+- Top 5 Videos (nach Views): Thumbnail-Text, Title, Views, CTR, Avg. Retention
+- Bottom 5 Videos (nach Views): gleiche Felder
+- Engagement-Übersicht: Likes, Comments, Shares aggregiert
+
+### Tab 2: Pipeline
+
+**Stat-Cards:**
+- Videos in Produktion (status < published)
+- Diese Woche geplant
+- Überfällige Aufgaben
+- Offene Approvals
+
+**Sektionen:**
+- Pipeline-Balken: Visueller Balken mit Anzahl pro Status-Stufe (idea → published)
+- Nächste Veröffentlichungen: Liste der scheduled Videos mit Datum
+- Überfällige Tasks: Liste mit Assignee, Deadline, Video-Titel
+
+### Tab 3: Goals
+
+**Stat-Cards:**
+- Content-Ziel-Fortschritt (z.B. "8/12 Videos")
+- Subscriber-Ziel-Fortschritt
+- Views-Ziel-Fortschritt
+- Gesamt-Zielerreichung (%)
+
+**Sektionen:**
+- Monatsziele-Übersicht: Alle Goals mit Progress-Bars (Target vs. Current)
+- Custom Goals: User-definierte Metriken aus YtMonthlyGoals
+
+### Tab 4: Community
+
+**Stat-Cards:**
+- Unbearbeitete Kommentare
+- Sentiment-Verteilung (% positiv)
+- Durchschnittliche Antwortzeit
+- Eskalationen offen
+
+**Sektionen:**
+- Sentiment-Breakdown: Positiv/Neutral/Negativ mit Zähler
+- Letzte Interaktionen: 5 neueste unbearbeitete Kommentare
+- Top-Themen: Häufigste Topics aus AI-Analyse
+
+## API-Route
+
+**Endpoint:** `GET /api/youtube/analytics`
+
+| Param | Werte | Default |
+|-------|-------|---------|
+| `tab` | `performance`, `pipeline`, `goals`, `community` | `performance` |
+| `channel` | `all` oder Channel-ID | `all` |
+| `period` | `7d`, `30d`, `90d` | `30d` |
+
+**Auth:** Cookie-basiert, YouTube-Access Check.
+**Response:** Tab-spezifisches JSON. Nur Daten des angeforderten Tabs.
+
+## UI/Styling
+
+- BEM mit `.yt-analytics` Prefix
+- Payload CSS-Variablen (`--theme-elevation-*`, `--theme-success-*`, etc.)
+- Tab-Bar: Horizontal unter Header, aktiver Tab mit Border-Bottom
+- Stat-Cards: 4er Grid mit farbigen Left-Borders (wie TenantDashboard)
+- Pipeline-Balken: Horizontal segmentiert, jede Status-Stufe eine Farbe
+- Progress-Bars: Success-Color für On-Track, Warning für At-Risk
+- Responsive: 2-Spalten Grid auf Mobile, Tabs horizontal scrollbar
+- Dark Mode: `.dark .yt-analytics` Overrides
+
+## Datenquellen
+
+| Collection | Verwendung |
+|------------|------------|
+| YouTubeContent | Performance-Metriken, Pipeline-Status, Veröffentlichungen |
+| YouTubeChannels | Channel-Liste für Selector, Subscriber-Count |
+| YtMonthlyGoals | Goals-Tab: Target vs. Current |
+| YtTasks | Pipeline-Tab: Überfällige Tasks, Workload |
+| YtBatches | Pipeline-Tab: Batch-Fortschritt |
+| CommunityInteractions | Community-Tab: Sentiment, Antwortzeit, Themen |
+
+## Patterns (aus TenantDashboard)
+
+- `useTenantSelection()` für Tenant-Kontext
+- `useState` + `useEffect` + `useCallback` für Daten-Fetching
+- `credentials: 'include'` für Auth-Cookies
+- Loading/Error States mit Spinner/Error-Box
+- Period-Selector als `<select>`
+- Refresh-Button mit Spin-Animation
diff --git a/docs/plans/2026-02-13-youtube-analytics-dashboard.md b/docs/plans/2026-02-13-youtube-analytics-dashboard.md
new file mode 100644
index 0000000..e2bb516
--- /dev/null
+++ b/docs/plans/2026-02-13-youtube-analytics-dashboard.md
@@ -0,0 +1,971 @@
+# YouTube Analytics Dashboard Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Build a custom admin view at `/admin/youtube-analytics` with 4 tabs (Performance, Pipeline, Goals, Community), channel/period selectors, and a sidebar nav link.
+
+**Architecture:** Single client component with tab navigation. One API route serves all tabs via `?tab=X` query parameter, loading data lazily per tab switch. Follows the TenantDashboard pattern (BEM CSS, Payload variables, `useTenantSelection()`).
+
+**Tech Stack:** React 19, Next.js 16, Payload CMS 3.76.1, SCSS (BEM), Payload CSS variables
+
+**Design doc:** `docs/plans/2026-02-13-youtube-analytics-dashboard-design.md`
+
+---
+
+### Task 1: API Route — Performance Tab
+
+**Files:**
+- Create: `src/app/(payload)/api/youtube/analytics/route.ts`
+
+**Step 1: Create the API route with performance tab handler**
+
+```typescript
+// src/app/(payload)/api/youtube/analytics/route.ts
+
+import { getPayload } from 'payload'
+import config from '@payload-config'
+import { NextRequest, NextResponse } from 'next/server'
+import { subDays } from 'date-fns'
+
+interface UserWithYouTubeRole {
+  id: number
+  isSuperAdmin?: boolean
+  youtubeRole?: string
+}
+
+function getPeriodDates(period: string) {
+  const now = new Date()
+  switch (period) {
+    case '7d':
+      return { start: subDays(now, 7), prevStart: subDays(now, 14), prevEnd: subDays(now, 7) }
+    case '90d':
+      return { start: subDays(now, 90), prevStart: subDays(now, 180), prevEnd: subDays(now, 90) }
+    default:
+      return { start: subDays(now, 30), prevStart: subDays(now, 60), prevEnd: subDays(now, 30) }
+  }
+}
+
+async function getPerformanceData(payload: any, channel: string, period: string) {
+  const { start, prevStart, prevEnd } = getPeriodDates(period)
+
+  // Build where clause for published videos with performance data
+  const where: Record<string, unknown> = {
+    status: { equals: 'published' },
+    actualPublishDate: { greater_than_equal: start.toISOString() },
+  }
+  if (channel !== 'all') {
+    where.channel = { equals: parseInt(channel) }
+  }
+
+  // Previous period where clause
+  const prevWhere: Record<string, unknown> = {
+    status: { equals: 'published' },
+    actualPublishDate: {
+      greater_than_equal: prevStart.toISOString(),
+      less_than: prevEnd.toISOString(),
+    },
+  }
+  if (channel !== 'all') {
+    prevWhere.channel = { equals: parseInt(channel) }
+  }
+
+  const [current, previous] = await Promise.all([
+    payload.find({
+      collection: 'youtube-content',
+      where,
+      limit: 100,
+      depth: 0,
+      sort: '-performance.views',
+    }),
+    payload.find({
+      collection: 'youtube-content',
+      where: prevWhere,
+      limit: 100,
+      depth: 0,
+    }),
+  ])
+
+  const docs = current.docs
+  const prevDocs = previous.docs
+
+  // Aggregate current period
+  let totalViews = 0, totalWatchTime = 0, totalCtr = 0, totalSubscribers = 0
+  let totalLikes = 0, totalComments = 0, totalShares = 0
+  let ctrCount = 0
+
+  for (const doc of docs) {
+    const p = doc.performance || {}
+    totalViews += p.views || 0
+    totalWatchTime += p.watchTimeMinutes || 0
+    if (p.ctr != null) { totalCtr += p.ctr; ctrCount++ }
+    totalSubscribers += p.subscribersGained || 0
+    totalLikes += p.likes || 0
+    totalComments += p.comments || 0
+    totalShares += p.shares || 0
+  }
+
+  // Aggregate previous period
+  let prevViews = 0, prevWatchTime = 0, prevSubscribers = 0
+  for (const doc of prevDocs) {
+    const p = doc.performance || {}
+    prevViews += p.views || 0
+    prevWatchTime += p.watchTimeMinutes || 0
+    prevSubscribers += p.subscribersGained || 0
+  }
+
+  // Top 5 and Bottom 5
+  const sorted = [...docs].sort((a, b) => (b.performance?.views || 0) - (a.performance?.views || 0))
+  const mapVideo = (d: any) => ({
+    id: d.id,
+    title: d.title,
+    thumbnailText: d.thumbnailText || '',
+    views: d.performance?.views || 0,
+    ctr: d.performance?.ctr || 0,
+    avgRetention: d.performance?.avgViewPercentage || 0,
+    likes: d.performance?.likes || 0,
+  })
+
+  return {
+    stats: {
+      totalViews,
+      totalWatchTimeHours: Math.round((totalWatchTime / 60) * 10) / 10,
+      avgCtr: ctrCount > 0 ? Math.round((totalCtr / ctrCount) * 100) / 100 : 0,
+      subscribersGained: totalSubscribers,
+    },
+    comparison: {
+      views: prevViews > 0 ? Math.round(((totalViews - prevViews) / prevViews) * 100) : 0,
+      watchTime: prevWatchTime > 0 ? Math.round(((totalWatchTime - prevWatchTime) / prevWatchTime) * 100) : 0,
+      subscribers: prevSubscribers > 0 ? Math.round(((totalSubscribers - prevSubscribers) / prevSubscribers) * 100) : 0,
+    },
+    topVideos: sorted.slice(0, 5).map(mapVideo),
+    bottomVideos: sorted.length > 5 ? sorted.slice(-5).reverse().map(mapVideo) : [],
+    engagement: { likes: totalLikes, comments: totalComments, shares: totalShares },
+  }
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const payload = await getPayload({ config })
+    const { user } = await payload.auth({ headers: req.headers })
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const typedUser = user as UserWithYouTubeRole
+    if (!typedUser.isSuperAdmin && (!typedUser.youtubeRole || typedUser.youtubeRole === 'none')) {
+      return NextResponse.json({ error: 'No YouTube access' }, { status: 403 })
+    }
+
+    const { searchParams } = new URL(req.url)
+    const tab = searchParams.get('tab') || 'performance'
+    const channel = searchParams.get('channel') || 'all'
+    const period = searchParams.get('period') || '30d'
+
+    // Channels always needed for selector
+    const channels = await payload.find({
+      collection: 'youtube-channels',
+      where: { status: { equals: 'active' } },
+      depth: 0,
+      limit: 50,
+    })
+
+    let tabData: unknown = {}
+
+    switch (tab) {
+      case 'performance':
+        tabData = await getPerformanceData(payload, channel, period)
+        break
+      // Pipeline, Goals, Community added in subsequent tasks
+      default:
+        tabData = {}
+    }
+
+    return NextResponse.json({
+      tab,
+      channel,
+      period,
+      channels: channels.docs.map((c: any) => ({ id: c.id, name: c.name, slug: c.slug })),
+      data: tabData,
+    })
+  } catch (error) {
+    console.error('[YouTube Analytics] Error:', error)
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 },
+    )
+  }
+}
+
+export const dynamic = 'force-dynamic'
+```
+
+**Step 2: Verify route loads**
+
+Run: `curl -s -o /dev/null -w '%{http_code}' https://pl.porwoll.tech/api/youtube/analytics`
+Expected: 401 (no auth) — confirms route is registered
+
+**Step 3: Commit**
+
+```bash
+git add src/app/\(payload\)/api/youtube/analytics/route.ts
+git commit -m "feat(yt-analytics): add API route with performance tab"
+```
+
+---
+
+### Task 2: API Route — Pipeline, Goals, Community Tabs
+
+**Files:**
+- Modify: `src/app/(payload)/api/youtube/analytics/route.ts`
+
+**Step 1: Add pipeline tab handler**
+
+Add this function before the `GET` handler:
+
+```typescript
+async function getPipelineData(payload: any, channel: string) {
+  const channelFilter: Record<string, unknown> = channel !== 'all'
+    ? { channel: { equals: parseInt(channel) } }
+    : {}
+
+  // Pipeline status counts (parallel)
+  const statuses = ['idea', 'script_draft', 'script_review', 'script_approved',
+    'shoot_scheduled', 'shot', 'rough_cut', 'fine_cut', 'final_review',
+    'approved', 'upload_scheduled', 'published']
+
+  const counts = await Promise.all(
+    statuses.map((s) =>
+      payload.count({
+        collection: 'youtube-content',
+        where: { status: { equals: s }, ...channelFilter },
+      }),
+    ),
+  )
+
+  const pipeline: Record<string, number> = {}
+  statuses.forEach((s, i) => { pipeline[s] = counts[i].totalDocs })
+
+  // In production count (everything between idea and published exclusive)
+  const inProduction = Object.entries(pipeline)
+    .filter(([k]) => k !== 'published')
+    .reduce((sum, [, v]) => sum + v, 0)
+
+  // This week scheduled
+  const weekStart = new Date()
+  weekStart.setHours(0, 0, 0, 0)
+  const weekEnd = new Date(weekStart)
+  weekEnd.setDate(weekEnd.getDate() + 7)
+
+  const weekWhere: Record<string, unknown> = {
+    scheduledPublishDate: {
+      greater_than_equal: weekStart.toISOString(),
+      less_than: weekEnd.toISOString(),
+    },
+    ...channelFilter,
+  }
+
+  const [thisWeek, overdueTasks, pendingApprovals] = await Promise.all([
+    payload.find({
+      collection: 'youtube-content',
+      where: weekWhere,
+      sort: 'scheduledPublishDate',
+      depth: 1,
+      limit: 20,
+    }),
+    payload.find({
+      collection: 'yt-tasks',
+      where: {
+        and: [
+          { status: { not_in: ['done', 'cancelled'] } },
+          { dueDate: { less_than: new Date().toISOString() } },
+          ...(channel !== 'all' ? [{ channel: { equals: parseInt(channel) } }] : []),
+        ],
+      },
+      depth: 1,
+      limit: 20,
+      sort: 'dueDate',
+    }),
+    payload.count({
+      collection: 'youtube-content',
+      where: {
+        status: { in: ['script_review', 'final_review'] },
+        ...channelFilter,
+      },
+    }),
+  ])
+
+  return {
+    stats: {
+      inProduction,
+      thisWeekCount: thisWeek.totalDocs,
+      overdueTasksCount: overdueTasks.totalDocs,
+      pendingApprovals: pendingApprovals.totalDocs,
+    },
+    pipeline,
+    thisWeekVideos: thisWeek.docs.map((d: any) => ({
+      id: d.id,
+      title: d.title,
+      status: d.status,
+      scheduledPublishDate: d.scheduledPublishDate,
+      channel: typeof d.channel === 'object' ? d.channel?.name : d.channel,
+    })),
+    overdueTasks: overdueTasks.docs.map((d: any) => ({
+      id: d.id,
+      title: d.title,
+      dueDate: d.dueDate,
+      assignedTo: typeof d.assignedTo === 'object' ? d.assignedTo?.email : d.assignedTo,
+      video: typeof d.video === 'object' ? d.video?.title : null,
+    })),
+  }
+}
+```
+
+**Step 2: Add goals tab handler**
+
+```typescript
+async function getGoalsData(payload: any, channel: string) {
+  // Find current month's goals
+  const now = new Date()
+  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1)
+  const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0)
+
+  const where: Record<string, unknown> = {
+    month: {
+      greater_than_equal: monthStart.toISOString(),
+      less_than_equal: monthEnd.toISOString(),
+    },
+  }
+  if (channel !== 'all') {
+    where.channel = { equals: parseInt(channel) }
+  }
+
+  const goals = await payload.find({
+    collection: 'yt-monthly-goals',
+    where,
+    depth: 1,
+    limit: 10,
+  })
+
+  if (goals.docs.length === 0) {
+    return { stats: { contentProgress: 0, subscriberProgress: 0, viewsProgress: 0, overall: 0 }, goals: [], customGoals: [] }
+  }
+
+  // Aggregate across all matching goals (could be multiple channels)
+  let totalContentTarget = 0, totalContentCurrent = 0
+  let totalSubsTarget = 0, totalSubsCurrent = 0
+  let totalViewsTarget = 0, totalViewsCurrent = 0
+  const allCustomGoals: any[] = []
+
+  for (const goal of goals.docs) {
+    const c = goal.contentGoals || {}
+    totalContentTarget += (c.longformsTarget || 0) + (c.shortsTarget || 0)
+    totalContentCurrent += (c.longformsCurrent || 0) + (c.shortsCurrent || 0)
+
+    const a = goal.audienceGoals || {}
+    totalSubsTarget += a.subscribersTarget || 0
+    totalSubsCurrent += a.subscribersCurrent || 0
+    totalViewsTarget += a.viewsTarget || 0
+    totalViewsCurrent += a.viewsCurrent || 0
+
+    if (goal.customGoals) {
+      for (const cg of goal.customGoals) {
+        allCustomGoals.push({
+          metric: cg.metric,
+          target: cg.target,
+          current: cg.current,
+          status: cg.status,
+        })
+      }
+    }
+  }
+
+  const pct = (current: number, target: number) => target > 0 ? Math.round((current / target) * 100) : 0
+  const contentPct = pct(totalContentCurrent, totalContentTarget)
+  const subsPct = pct(totalSubsCurrent, totalSubsTarget)
+  const viewsPct = pct(totalViewsCurrent, totalViewsTarget)
+  const overall = Math.round((contentPct + subsPct + viewsPct) / 3)
+
+  return {
+    stats: {
+      contentProgress: contentPct,
+      contentLabel: `${totalContentCurrent}/${totalContentTarget}`,
+      subscriberProgress: subsPct,
+      subscriberLabel: `${totalSubsCurrent}/${totalSubsTarget}`,
+      viewsProgress: viewsPct,
+      viewsLabel: `${totalViewsCurrent}/${totalViewsTarget}`,
+      overall,
+    },
+    goals: goals.docs.map((g: any) => ({
+      id: g.id,
+      channel: typeof g.channel === 'object' ? g.channel?.name : g.channel,
+      month: g.month,
+      contentGoals: g.contentGoals,
+      audienceGoals: g.audienceGoals,
+      engagementGoals: g.engagementGoals,
+      businessGoals: g.businessGoals,
+      notes: g.notes,
+    })),
+    customGoals: allCustomGoals,
+  }
+}
+```
+
+**Step 3: Add community tab handler**
+
+```typescript
+async function getCommunityData(payload: any, channel: string, period: string) {
+  const { start } = getPeriodDates(period)
+
+  const where: Record<string, unknown> = {
+    publishedAt: { greater_than_equal: start.toISOString() },
+  }
+  if (channel !== 'all') {
+    where.socialAccount = { equals: parseInt(channel) }
+  }
+
+  const [interactions, unresolved, escalations] = await Promise.all([
+    payload.find({
+      collection: 'community-interactions',
+      where,
+      limit: 500,
+      depth: 0,
+    }),
+    payload.count({
+      collection: 'community-interactions',
+      where: { ...where, status: { equals: 'new' } },
+    }),
+    payload.count({
+      collection: 'community-interactions',
+      where: { ...where, 'flags.requiresEscalation': { equals: true }, status: { not_equals: 'resolved' } },
+    }),
+  ])
+
+  const docs = interactions.docs
+
+  // Sentiment distribution
+  const sentiment = { positive: 0, neutral: 0, negative: 0, question: 0 }
+  for (const d of docs) {
+    const s = d.analysis?.sentiment as string
+    if (s && s in sentiment) sentiment[s as keyof typeof sentiment]++
+  }
+  const total = docs.length
+  const positivePct = total > 0 ? Math.round((sentiment.positive / total) * 100) : 0
+
+  // Avg response time (hours)
+  let totalResponseTime = 0, responseCount = 0
+  for (const d of docs) {
+    if (d.response?.sentAt && d.publishedAt) {
+      const diff = new Date(d.response.sentAt as string).getTime() - new Date(d.publishedAt as string).getTime()
+      totalResponseTime += diff / (1000 * 60 * 60)
+      responseCount++
+    }
+  }
+  const avgResponseHours = responseCount > 0 ? Math.round(totalResponseTime / responseCount * 10) / 10 : 0
+
+  // Top topics
+  const topicMap = new Map<string, number>()
+  for (const d of docs) {
+    const topics = d.analysis?.topics as string[] | undefined
+    if (topics) {
+      for (const t of topics) { topicMap.set(t, (topicMap.get(t) || 0) + 1) }
+    }
+  }
+  const topTopics = [...topicMap.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 10)
+    .map(([topic, count]) => ({ topic, count }))
+
+  // Recent unresolved (newest 5)
+  const recent = await payload.find({
+    collection: 'community-interactions',
+    where: { ...where, status: { equals: 'new' } },
+    sort: '-publishedAt',
+    limit: 5,
+    depth: 0,
+  })
+
+  return {
+    stats: {
+      unresolvedCount: unresolved.totalDocs,
+      positivePct,
+      avgResponseHours,
+      escalationsCount: escalations.totalDocs,
+    },
+    sentiment,
+    topTopics,
+    recentUnresolved: recent.docs.map((d: any) => ({
+      id: d.id,
+      message: (d.message as string || '').slice(0, 120),
+      authorName: d.author?.name || 'Unknown',
+      authorHandle: d.author?.handle || '',
+      publishedAt: d.publishedAt,
+      platform: d.platform,
+      sentiment: d.analysis?.sentiment,
+    })),
+  }
+}
+```
+
+**Step 4: Wire all tabs into the switch statement**
+
+In the `GET` handler, replace the switch:
+
+```typescript
+    switch (tab) {
+      case 'performance':
+        tabData = await getPerformanceData(payload, channel, period)
+        break
+      case 'pipeline':
+        tabData = await getPipelineData(payload, channel)
+        break
+      case 'goals':
+        tabData = await getGoalsData(payload, channel)
+        break
+      case 'community':
+        tabData = await getCommunityData(payload, channel, period)
+        break
+      default:
+        tabData = await getPerformanceData(payload, channel, period)
+    }
+```
+
+**Step 5: Commit**
+
+```bash
+git add src/app/\(payload\)/api/youtube/analytics/route.ts
+git commit -m "feat(yt-analytics): add pipeline, goals, community tab handlers"
+```
+
+---
+
+### Task 3: Nav Link Component
+
+**Files:**
+- Create: `src/components/admin/YouTubeAnalyticsNavLinks.tsx`
+- Create: `src/components/admin/YouTubeAnalyticsNavLinks.scss`
+
+**Step 1: Create nav link component**
+
+Follow the exact pattern from `CommunityNavLinks.tsx`:
+
+```typescript
+// src/components/admin/YouTubeAnalyticsNavLinks.tsx
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+import './YouTubeAnalyticsNavLinks.scss'
+
+export const YouTubeAnalyticsNavLinks: React.FC = () => {
+  const pathname = usePathname()
+
+  const links = [
+    {
+      href: '/admin/youtube-analytics',
+      label: 'YouTube Analytics',
+      icon: '📈',
+    },
+  ]
+
+  return (
+    <div className="yt-nav-links">
+      <div className="yt-nav-links__header">
+        <span className="yt-nav-links__icon">🎬</span>
+        <span className="yt-nav-links__title">YouTube</span>
+      </div>
+      <nav className="yt-nav-links__list">
+        {links.map((link) => {
+          const isActive = pathname === link.href
+          return (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={`yt-nav-links__link ${isActive ? 'yt-nav-links__link--active' : ''}`}
+            >
+              <span className="yt-nav-links__link-icon">{link.icon}</span>
+              <span className="yt-nav-links__link-label">{link.label}</span>
+            </Link>
+          )
+        })}
+      </nav>
+    </div>
+  )
+}
+
+export default YouTubeAnalyticsNavLinks
+```
+
+**Step 2: Create nav link SCSS**
+
+```scss
+// src/components/admin/YouTubeAnalyticsNavLinks.scss
+.yt-nav-links {
+  padding: 0 var(--base);
+  margin-top: var(--base);
+  border-top: 1px solid var(--theme-elevation-100);
+  padding-top: var(--base);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--theme-elevation-500);
+  }
+
+  &__icon {
+    font-size: 14px;
+  }
+
+  &__title {
+    flex: 1;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border-radius: 4px;
+    text-decoration: none;
+    color: var(--theme-elevation-800);
+    font-size: 13px;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background-color: var(--theme-elevation-50);
+      color: var(--theme-elevation-900);
+    }
+
+    &--active {
+      background-color: var(--theme-elevation-100);
+      color: var(--theme-text);
+      font-weight: 500;
+
+      &:hover {
+        background-color: var(--theme-elevation-150);
+      }
+    }
+  }
+
+  &__link-icon {
+    font-size: 16px;
+    width: 20px;
+    text-align: center;
+  }
+
+  &__link-label {
+    flex: 1;
+  }
+}
+
+[data-theme='dark'] {
+  .yt-nav-links {
+    &__link {
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+
+      &--active {
+        background-color: var(--theme-elevation-150);
+
+        &:hover {
+          background-color: var(--theme-elevation-200);
+        }
+      }
+    }
+  }
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/components/admin/YouTubeAnalyticsNavLinks.tsx src/components/admin/YouTubeAnalyticsNavLinks.scss
+git commit -m "feat(yt-analytics): add sidebar nav link component"
+```
+
+---
+
+### Task 4: View Wrapper + Registration in payload.config.ts
+
+**Files:**
+- Create: `src/components/admin/YouTubeAnalyticsDashboardView.tsx`
+- Modify: `src/payload.config.ts:128-141`
+
+**Step 1: Create wrapper component**
+
+```typescript
+// src/components/admin/YouTubeAnalyticsDashboardView.tsx
+'use client'
+
+import React from 'react'
+import { YouTubeAnalyticsDashboard } from './YouTubeAnalyticsDashboard'
+
+export const YouTubeAnalyticsDashboardView: React.FC = () => {
+  return <YouTubeAnalyticsDashboard />
+}
+
+export default YouTubeAnalyticsDashboardView
+```
+
+Note: The `YouTubeAnalyticsDashboard` component is created in Task 5. This wrapper will fail to compile until Task 5 is done — that's expected.
+
+**Step 2: Register in payload.config.ts**
+
+Change lines 130-140 from:
+
+```typescript
+    components: {
+      // Community Management Nav Links
+      afterNavLinks: ['@/components/admin/CommunityNavLinks#CommunityNavLinks'],
+      // Custom Views - re-enabled after Payload 3.76.1 upgrade (Issue #15241 test)
+      views: {
+        TenantDashboard: {
+          Component: '@/components/admin/TenantDashboardView#TenantDashboardView',
+          path: '/tenant-dashboard',
+        },
+      },
+    },
+```
+
+To:
+
+```typescript
+    components: {
+      afterNavLinks: [
+        '@/components/admin/CommunityNavLinks#CommunityNavLinks',
+        '@/components/admin/YouTubeAnalyticsNavLinks#YouTubeAnalyticsNavLinks',
+      ],
+      views: {
+        TenantDashboard: {
+          Component: '@/components/admin/TenantDashboardView#TenantDashboardView',
+          path: '/tenant-dashboard',
+        },
+        YouTubeAnalyticsDashboard: {
+          Component: '@/components/admin/YouTubeAnalyticsDashboardView#YouTubeAnalyticsDashboardView',
+          path: '/youtube-analytics',
+        },
+      },
+    },
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/components/admin/YouTubeAnalyticsDashboardView.tsx src/payload.config.ts
+git commit -m "feat(yt-analytics): register custom view and nav link in config"
+```
+
+---
+
+### Task 5: Main Dashboard Component — Shell with Tabs
+
+**Files:**
+- Create: `src/components/admin/YouTubeAnalyticsDashboard.tsx`
+- Create: `src/components/admin/YouTubeAnalyticsDashboard.scss`
+
+**Step 1: Create main component with tab shell, channel/period selectors, loading/error states**
+
+The component structure:
+- Header with title, channel selector, period selector, refresh button
+- Tab bar (Performance | Pipeline | Goals | Community)
+- Tab content area (renders based on `activeTab` state)
+- Each tab is a separate render function within the component
+- Data fetched via `useEffect` when tab/channel/period changes
+
+The component should follow the TenantDashboard pattern exactly:
+- `'use client'` directive
+- `useTenantSelection()` for tenant context
+- `useState` for: `activeTab`, `data`, `loading`, `error`, `channel`, `period`, `channels`
+- `useCallback` for `fetchData`
+- `useEffect` to trigger `fetchData` on tab/channel/period change
+- `credentials: 'include'` on fetch
+- Loading spinner, error display, no-tenant fallback
+
+Key types to define:
+
+```typescript
+type Tab = 'performance' | 'pipeline' | 'goals' | 'community'
+type Period = '7d' | '30d' | '90d'
+
+interface Channel { id: number; name: string; slug: string }
+
+// Performance tab types
+interface PerformanceData {
+  stats: { totalViews: number; totalWatchTimeHours: number; avgCtr: number; subscribersGained: number }
+  comparison: { views: number; watchTime: number; subscribers: number }
+  topVideos: VideoSummary[]
+  bottomVideos: VideoSummary[]
+  engagement: { likes: number; comments: number; shares: number }
+}
+interface VideoSummary { id: number; title: string; thumbnailText: string; views: number; ctr: number; avgRetention: number; likes: number }
+
+// Pipeline tab types
+interface PipelineData {
+  stats: { inProduction: number; thisWeekCount: number; overdueTasksCount: number; pendingApprovals: number }
+  pipeline: Record<string, number>
+  thisWeekVideos: { id: number; title: string; status: string; scheduledPublishDate: string; channel: string }[]
+  overdueTasks: { id: number; title: string; dueDate: string; assignedTo: string; video: string | null }[]
+}
+
+// Goals tab types
+interface GoalsData {
+  stats: { contentProgress: number; contentLabel: string; subscriberProgress: number; subscriberLabel: string; viewsProgress: number; viewsLabel: string; overall: number }
+  goals: any[]
+  customGoals: { metric: string; target: string; current: string; status: string }[]
+}
+
+// Community tab types
+interface CommunityData {
+  stats: { unresolvedCount: number; positivePct: number; avgResponseHours: number; escalationsCount: number }
+  sentiment: { positive: number; neutral: number; negative: number; question: number }
+  topTopics: { topic: string; count: number }[]
+  recentUnresolved: { id: number; message: string; authorName: string; authorHandle: string; publishedAt: string; platform: string; sentiment: string }[]
+}
+```
+
+Tab rendering sections:
+
+**Performance tab:**
+- 4 stat cards (Views, Watch Time, CTR, Subscribers) — each with comparison arrow
+- "Top 5 Videos" section with table rows
+- "Bottom 5 Videos" section
+- "Engagement" section with 3 inline stats
+
+**Pipeline tab:**
+- 4 stat cards (In Production, This Week, Overdue Tasks, Pending Approvals)
+- Pipeline bar: horizontal segmented bar showing count per status
+- "Nächste Veröffentlichungen" list
+- "Überfällige Aufgaben" list
+
+**Goals tab:**
+- 4 stat cards (Content %, Subscribers %, Views %, Overall %)
+- Progress bars for each goal category
+- Custom goals list with status badges
+
+**Community tab:**
+- 4 stat cards (Unresolved, Positive %, Avg Response Time, Escalations)
+- Sentiment breakdown (colored bars)
+- Recent unresolved list
+- Top topics list
+
+**Step 2: Create SCSS**
+
+BEM structure with `.yt-analytics` prefix. Key classes:
+
+```
+.yt-analytics                    — container
+.yt-analytics__header            — title row
+.yt-analytics__controls          — channel + period selectors + refresh
+.yt-analytics__tabs              — tab bar
+.yt-analytics__tab               — single tab
+.yt-analytics__tab--active       — active tab
+.yt-analytics__content           — tab content area
+.yt-analytics__stats-grid        — 4-card grid (reuse TenantDashboard pattern)
+.yt-analytics__stat-card         — single stat card
+.yt-analytics__stat-card--up     — green trend arrow
+.yt-analytics__stat-card--down   — red trend arrow
+.yt-analytics__section           — content section
+.yt-analytics__pipeline-bar      — horizontal pipeline visualization
+.yt-analytics__pipeline-segment  — single pipeline segment
+.yt-analytics__progress-bar      — goals progress bar
+.yt-analytics__progress-fill     — progress bar fill
+.yt-analytics__video-row         — video list item
+.yt-analytics__topic-tag         — topic pill
+.yt-analytics__comment-item      — community comment preview
+```
+
+Colors for pipeline segments (CSS custom properties):
+- idea: `--theme-elevation-300`
+- script: `#6366f1` (indigo)
+- review: `#f59e0b` (amber)
+- production: `#3b82f6` (blue)
+- editing: `#8b5cf6` (violet)
+- ready: `#10b981` (emerald)
+- published: `var(--theme-success-500)`
+
+Responsive: `@media (max-width: 768px)` — 2-col stat grid, stacked layout
+
+**Step 3: Commit**
+
+```bash
+git add src/components/admin/YouTubeAnalyticsDashboard.tsx src/components/admin/YouTubeAnalyticsDashboard.scss
+git commit -m "feat(yt-analytics): add main dashboard component with all 4 tabs"
+```
+
+---
+
+### Task 6: Build, Generate ImportMap, Deploy to Staging
+
+**Files:**
+- Modify: `src/app/(payload)/admin/importMap.js` (auto-generated)
+
+**Step 1: Generate importMap**
+
+```bash
+pnpm payload generate:importmap
+```
+
+Expected: importMap.js updated with new component paths
+
+**Step 2: Build**
+
+```bash
+pm2 stop payload && NODE_OPTIONS="--no-deprecation --max-old-space-size=2048" pnpm build
+```
+
+Expected: Build succeeds without errors
+
+**Step 3: Start and verify**
+
+```bash
+pm2 start payload
+```
+
+Test endpoints:
+- `curl -s -o /dev/null -w '%{http_code}' https://pl.porwoll.tech/admin/youtube-analytics` → 200
+- Login via browser and navigate to `/admin/youtube-analytics`
+- Verify nav link appears in sidebar
+- Verify all 4 tabs load data
+
+**Step 4: Commit build artifacts**
+
+```bash
+git add src/app/\(payload\)/admin/importMap.js
+git commit -m "chore: regenerate importMap for YouTube Analytics Dashboard"
+```
+
+---
+
+### Task 7: Final Commit + Push
+
+**Step 1: Push to develop**
+
+```bash
+git push origin develop
+```
+
+**Step 2: Verify on staging**
+
+Browser test:
+1. Navigate to `https://pl.porwoll.tech/admin`
+2. Login
+3. Check sidebar for "YouTube" section with "YouTube Analytics" link
+4. Click link → Dashboard loads
+5. Switch tabs: Performance, Pipeline, Goals, Community
+6. Change channel selector
+7. Change period selector
+8. Click refresh button
diff --git a/src/app/(payload)/admin/importMap.js b/src/app/(payload)/admin/importMap.js
index 438b175..bb66d81 100644
--- a/src/app/(payload)/admin/importMap.js
+++ b/src/app/(payload)/admin/importMap.js
@@ -26,9 +26,11 @@ import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997e
 import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { CommunityNavLinks as CommunityNavLinks_4431db66fbe96916dda5fdbfa979ee1e } from '@/components/admin/CommunityNavLinks'
+import { YouTubeAnalyticsNavLinks as YouTubeAnalyticsNavLinks_aa7af5798b0ff987bb9dde0b50fc07dc } from '@/components/admin/YouTubeAnalyticsNavLinks'
 import { TenantSelector as TenantSelector_d6d5f193a167989e2ee7d14202901e62 } from '@payloadcms/plugin-multi-tenant/rsc'
 import { TenantSelectionProvider as TenantSelectionProvider_d6d5f193a167989e2ee7d14202901e62 } from '@payloadcms/plugin-multi-tenant/rsc'
 import { TenantDashboardView as TenantDashboardView_1468a86d093d5b2444131ed5ce14599e } from '@/components/admin/TenantDashboardView'
+import { YouTubeAnalyticsDashboardView as YouTubeAnalyticsDashboardView_cda40d57a6ea0fffb8f4ea8808c0cdea } from '@/components/admin/YouTubeAnalyticsDashboardView'
 import { CollectionCards as CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1 } from '@payloadcms/next/rsc'
 
 export const importMap = {
@@ -60,8 +62,10 @@ export const importMap = {
   "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@/components/admin/CommunityNavLinks#CommunityNavLinks": CommunityNavLinks_4431db66fbe96916dda5fdbfa979ee1e,
+  "@/components/admin/YouTubeAnalyticsNavLinks#YouTubeAnalyticsNavLinks": YouTubeAnalyticsNavLinks_aa7af5798b0ff987bb9dde0b50fc07dc,
   "@payloadcms/plugin-multi-tenant/rsc#TenantSelector": TenantSelector_d6d5f193a167989e2ee7d14202901e62,
   "@payloadcms/plugin-multi-tenant/rsc#TenantSelectionProvider": TenantSelectionProvider_d6d5f193a167989e2ee7d14202901e62,
   "@/components/admin/TenantDashboardView#TenantDashboardView": TenantDashboardView_1468a86d093d5b2444131ed5ce14599e,
+  "@/components/admin/YouTubeAnalyticsDashboardView#YouTubeAnalyticsDashboardView": YouTubeAnalyticsDashboardView_cda40d57a6ea0fffb8f4ea8808c0cdea,
   "@payloadcms/next/rsc#CollectionCards": CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1
 }
diff --git a/src/app/(payload)/api/youtube/analytics/route.ts b/src/app/(payload)/api/youtube/analytics/route.ts
new file mode 100644
index 0000000..42bd868
--- /dev/null
+++ b/src/app/(payload)/api/youtube/analytics/route.ts
@@ -0,0 +1,442 @@
+import { getPayload } from 'payload'
+import config from '@payload-config'
+import { NextRequest, NextResponse } from 'next/server'
+import { subDays } from 'date-fns'
+
+interface UserWithYouTubeRole {
+  id: number
+  isSuperAdmin?: boolean
+  youtubeRole?: string
+}
+
+function getPeriodDates(period: string) {
+  const now = new Date()
+  switch (period) {
+    case '7d':
+      return { start: subDays(now, 7), prevStart: subDays(now, 14), prevEnd: subDays(now, 7) }
+    case '90d':
+      return { start: subDays(now, 90), prevStart: subDays(now, 180), prevEnd: subDays(now, 90) }
+    default:
+      return { start: subDays(now, 30), prevStart: subDays(now, 60), prevEnd: subDays(now, 30) }
+  }
+}
+
+async function getPerformanceData(payload: any, channel: string, period: string) {
+  const { start, prevStart, prevEnd } = getPeriodDates(period)
+
+  const where: Record<string, unknown> = {
+    status: { equals: 'published' },
+    actualPublishDate: { greater_than_equal: start.toISOString() },
+  }
+  if (channel !== 'all') {
+    where.channel = { equals: parseInt(channel) }
+  }
+
+  const prevWhere: Record<string, unknown> = {
+    status: { equals: 'published' },
+    actualPublishDate: {
+      greater_than_equal: prevStart.toISOString(),
+      less_than: prevEnd.toISOString(),
+    },
+  }
+  if (channel !== 'all') {
+    prevWhere.channel = { equals: parseInt(channel) }
+  }
+
+  const [current, previous] = await Promise.all([
+    payload.find({
+      collection: 'youtube-content',
+      where,
+      limit: 100,
+      depth: 0,
+      sort: '-performance.views',
+    }),
+    payload.find({
+      collection: 'youtube-content',
+      where: prevWhere,
+      limit: 100,
+      depth: 0,
+    }),
+  ])
+
+  const docs = current.docs
+  const prevDocs = previous.docs
+
+  let totalViews = 0, totalWatchTime = 0, totalCtr = 0, totalSubscribers = 0
+  let totalLikes = 0, totalComments = 0, totalShares = 0
+  let ctrCount = 0
+
+  for (const doc of docs) {
+    const p = doc.performance || {}
+    totalViews += p.views || 0
+    totalWatchTime += p.watchTimeMinutes || 0
+    if (p.ctr != null) { totalCtr += p.ctr; ctrCount++ }
+    totalSubscribers += p.subscribersGained || 0
+    totalLikes += p.likes || 0
+    totalComments += p.comments || 0
+    totalShares += p.shares || 0
+  }
+
+  let prevViews = 0, prevWatchTime = 0, prevSubscribers = 0
+  for (const doc of prevDocs) {
+    const p = doc.performance || {}
+    prevViews += p.views || 0
+    prevWatchTime += p.watchTimeMinutes || 0
+    prevSubscribers += p.subscribersGained || 0
+  }
+
+  const sorted = [...docs].sort((a, b) => (b.performance?.views || 0) - (a.performance?.views || 0))
+  const mapVideo = (d: any) => ({
+    id: d.id,
+    title: d.title,
+    thumbnailText: d.thumbnailText || '',
+    views: d.performance?.views || 0,
+    ctr: d.performance?.ctr || 0,
+    avgRetention: d.performance?.avgViewPercentage || 0,
+    likes: d.performance?.likes || 0,
+  })
+
+  return {
+    stats: {
+      totalViews,
+      totalWatchTimeHours: Math.round((totalWatchTime / 60) * 10) / 10,
+      avgCtr: ctrCount > 0 ? Math.round((totalCtr / ctrCount) * 100) / 100 : 0,
+      subscribersGained: totalSubscribers,
+    },
+    comparison: {
+      views: prevViews > 0 ? Math.round(((totalViews - prevViews) / prevViews) * 100) : 0,
+      watchTime: prevWatchTime > 0 ? Math.round(((totalWatchTime - prevWatchTime) / prevWatchTime) * 100) : 0,
+      subscribers: prevSubscribers > 0 ? Math.round(((totalSubscribers - prevSubscribers) / prevSubscribers) * 100) : 0,
+    },
+    topVideos: sorted.slice(0, 5).map(mapVideo),
+    bottomVideos: sorted.length > 5 ? sorted.slice(-5).reverse().map(mapVideo) : [],
+    engagement: { likes: totalLikes, comments: totalComments, shares: totalShares },
+  }
+}
+
+async function getPipelineData(payload: any, channel: string) {
+  const channelFilter: Record<string, unknown> = channel !== 'all'
+    ? { channel: { equals: parseInt(channel) } }
+    : {}
+
+  const statuses = ['idea', 'script_draft', 'script_review', 'script_approved',
+    'shoot_scheduled', 'shot', 'rough_cut', 'fine_cut', 'final_review',
+    'approved', 'upload_scheduled', 'published']
+
+  const counts = await Promise.all(
+    statuses.map((s) =>
+      payload.count({
+        collection: 'youtube-content',
+        where: { status: { equals: s }, ...channelFilter },
+      }),
+    ),
+  )
+
+  const pipeline: Record<string, number> = {}
+  statuses.forEach((s, i) => { pipeline[s] = counts[i].totalDocs })
+
+  const inProduction = Object.entries(pipeline)
+    .filter(([k]) => k !== 'published')
+    .reduce((sum, [, v]) => sum + v, 0)
+
+  const weekStart = new Date()
+  weekStart.setHours(0, 0, 0, 0)
+  const weekEnd = new Date(weekStart)
+  weekEnd.setDate(weekEnd.getDate() + 7)
+
+  const weekWhere: Record<string, unknown> = {
+    scheduledPublishDate: {
+      greater_than_equal: weekStart.toISOString(),
+      less_than: weekEnd.toISOString(),
+    },
+    ...channelFilter,
+  }
+
+  const [thisWeek, overdueTasks, pendingApprovals] = await Promise.all([
+    payload.find({
+      collection: 'youtube-content',
+      where: weekWhere,
+      sort: 'scheduledPublishDate',
+      depth: 1,
+      limit: 20,
+    }),
+    payload.find({
+      collection: 'yt-tasks',
+      where: {
+        and: [
+          { status: { not_in: ['done', 'cancelled'] } },
+          { dueDate: { less_than: new Date().toISOString() } },
+          ...(channel !== 'all' ? [{ channel: { equals: parseInt(channel) } }] : []),
+        ],
+      },
+      depth: 1,
+      limit: 20,
+      sort: 'dueDate',
+    }),
+    payload.count({
+      collection: 'youtube-content',
+      where: {
+        status: { in: ['script_review', 'final_review'] },
+        ...channelFilter,
+      },
+    }),
+  ])
+
+  return {
+    stats: {
+      inProduction,
+      thisWeekCount: thisWeek.totalDocs,
+      overdueTasksCount: overdueTasks.totalDocs,
+      pendingApprovals: pendingApprovals.totalDocs,
+    },
+    pipeline,
+    thisWeekVideos: thisWeek.docs.map((d: any) => ({
+      id: d.id,
+      title: d.title,
+      status: d.status,
+      scheduledPublishDate: d.scheduledPublishDate,
+      channel: typeof d.channel === 'object' ? d.channel?.name : d.channel,
+    })),
+    overdueTasks: overdueTasks.docs.map((d: any) => ({
+      id: d.id,
+      title: d.title,
+      dueDate: d.dueDate,
+      assignedTo: typeof d.assignedTo === 'object' ? d.assignedTo?.email : d.assignedTo,
+      video: typeof d.video === 'object' ? d.video?.title : null,
+    })),
+  }
+}
+
+async function getGoalsData(payload: any, channel: string) {
+  const now = new Date()
+  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1)
+  const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0)
+
+  const where: Record<string, unknown> = {
+    month: {
+      greater_than_equal: monthStart.toISOString(),
+      less_than_equal: monthEnd.toISOString(),
+    },
+  }
+  if (channel !== 'all') {
+    where.channel = { equals: parseInt(channel) }
+  }
+
+  const goals = await payload.find({
+    collection: 'yt-monthly-goals',
+    where,
+    depth: 1,
+    limit: 10,
+  })
+
+  if (goals.docs.length === 0) {
+    return { stats: { contentProgress: 0, contentLabel: '0/0', subscriberProgress: 0, subscriberLabel: '0/0', viewsProgress: 0, viewsLabel: '0/0', overall: 0 }, goals: [], customGoals: [] }
+  }
+
+  let totalContentTarget = 0, totalContentCurrent = 0
+  let totalSubsTarget = 0, totalSubsCurrent = 0
+  let totalViewsTarget = 0, totalViewsCurrent = 0
+  const allCustomGoals: { metric: string; target: string; current: string; status: string }[] = []
+
+  for (const goal of goals.docs) {
+    const c = (goal as any).contentGoals || {}
+    totalContentTarget += (c.longformsTarget || 0) + (c.shortsTarget || 0)
+    totalContentCurrent += (c.longformsCurrent || 0) + (c.shortsCurrent || 0)
+
+    const a = (goal as any).audienceGoals || {}
+    totalSubsTarget += a.subscribersTarget || 0
+    totalSubsCurrent += a.subscribersCurrent || 0
+    totalViewsTarget += a.viewsTarget || 0
+    totalViewsCurrent += a.viewsCurrent || 0
+
+    if ((goal as any).customGoals) {
+      for (const cg of (goal as any).customGoals) {
+        allCustomGoals.push({
+          metric: cg.metric,
+          target: cg.target,
+          current: cg.current,
+          status: cg.status,
+        })
+      }
+    }
+  }
+
+  const pct = (current: number, target: number) => target > 0 ? Math.round((current / target) * 100) : 0
+  const contentPct = pct(totalContentCurrent, totalContentTarget)
+  const subsPct = pct(totalSubsCurrent, totalSubsTarget)
+  const viewsPct = pct(totalViewsCurrent, totalViewsTarget)
+  const overall = Math.round((contentPct + subsPct + viewsPct) / 3)
+
+  return {
+    stats: {
+      contentProgress: contentPct,
+      contentLabel: `${totalContentCurrent}/${totalContentTarget}`,
+      subscriberProgress: subsPct,
+      subscriberLabel: `${totalSubsCurrent}/${totalSubsTarget}`,
+      viewsProgress: viewsPct,
+      viewsLabel: `${totalViewsCurrent}/${totalViewsTarget}`,
+      overall,
+    },
+    goals: goals.docs.map((g: any) => ({
+      id: g.id,
+      channel: typeof g.channel === 'object' ? g.channel?.name : g.channel,
+      month: g.month,
+      contentGoals: g.contentGoals,
+      audienceGoals: g.audienceGoals,
+      engagementGoals: g.engagementGoals,
+      businessGoals: g.businessGoals,
+      notes: g.notes,
+    })),
+    customGoals: allCustomGoals,
+  }
+}
+
+async function getCommunityData(payload: any, channel: string, period: string) {
+  const { start } = getPeriodDates(period)
+
+  const where: Record<string, unknown> = {
+    publishedAt: { greater_than_equal: start.toISOString() },
+  }
+  if (channel !== 'all') {
+    where.socialAccount = { equals: parseInt(channel) }
+  }
+
+  const [interactions, unresolved, escalations] = await Promise.all([
+    payload.find({
+      collection: 'community-interactions',
+      where,
+      limit: 500,
+      depth: 0,
+    }),
+    payload.count({
+      collection: 'community-interactions',
+      where: { ...where, status: { equals: 'new' } },
+    }),
+    payload.count({
+      collection: 'community-interactions',
+      where: { ...where, 'flags.requiresEscalation': { equals: true }, status: { not_equals: 'resolved' } },
+    }),
+  ])
+
+  const docs = interactions.docs
+
+  const sentiment: Record<string, number> = { positive: 0, neutral: 0, negative: 0, question: 0 }
+  for (const d of docs) {
+    const s = (d as any).analysis?.sentiment as string
+    if (s && s in sentiment) sentiment[s]++
+  }
+  const total = docs.length
+  const positivePct = total > 0 ? Math.round((sentiment.positive / total) * 100) : 0
+
+  let totalResponseTime = 0, responseCount = 0
+  for (const d of docs) {
+    if ((d as any).response?.sentAt && d.publishedAt) {
+      const diff = new Date((d as any).response.sentAt as string).getTime() - new Date(d.publishedAt as string).getTime()
+      totalResponseTime += diff / (1000 * 60 * 60)
+      responseCount++
+    }
+  }
+  const avgResponseHours = responseCount > 0 ? Math.round(totalResponseTime / responseCount * 10) / 10 : 0
+
+  const topicMap = new Map<string, number>()
+  for (const d of docs) {
+    const topics = (d as any).analysis?.topics as string[] | undefined
+    if (topics) {
+      for (const t of topics) { topicMap.set(t, (topicMap.get(t) || 0) + 1) }
+    }
+  }
+  const topTopics = [...topicMap.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 10)
+    .map(([topic, count]) => ({ topic, count }))
+
+  const recent = await payload.find({
+    collection: 'community-interactions',
+    where: { ...where, status: { equals: 'new' } },
+    sort: '-publishedAt',
+    limit: 5,
+    depth: 0,
+  })
+
+  return {
+    stats: {
+      unresolvedCount: unresolved.totalDocs,
+      positivePct,
+      avgResponseHours,
+      escalationsCount: escalations.totalDocs,
+    },
+    sentiment,
+    topTopics,
+    recentUnresolved: recent.docs.map((d: any) => ({
+      id: d.id,
+      message: (d.message as string || '').slice(0, 120),
+      authorName: d.author?.name || 'Unknown',
+      authorHandle: d.author?.handle || '',
+      publishedAt: d.publishedAt,
+      platform: d.platform,
+      sentiment: d.analysis?.sentiment,
+    })),
+  }
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const payload = await getPayload({ config })
+    const { user } = await payload.auth({ headers: req.headers })
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const typedUser = user as UserWithYouTubeRole
+    if (!typedUser.isSuperAdmin && (!typedUser.youtubeRole || typedUser.youtubeRole === 'none')) {
+      return NextResponse.json({ error: 'No YouTube access' }, { status: 403 })
+    }
+
+    const { searchParams } = new URL(req.url)
+    const tab = searchParams.get('tab') || 'performance'
+    const channel = searchParams.get('channel') || 'all'
+    const period = searchParams.get('period') || '30d'
+
+    const channels = await payload.find({
+      collection: 'youtube-channels',
+      where: { status: { equals: 'active' } },
+      depth: 0,
+      limit: 50,
+    })
+
+    let tabData: unknown = {}
+
+    switch (tab) {
+      case 'performance':
+        tabData = await getPerformanceData(payload, channel, period)
+        break
+      case 'pipeline':
+        tabData = await getPipelineData(payload, channel)
+        break
+      case 'goals':
+        tabData = await getGoalsData(payload, channel)
+        break
+      case 'community':
+        tabData = await getCommunityData(payload, channel, period)
+        break
+      default:
+        tabData = await getPerformanceData(payload, channel, period)
+    }
+
+    return NextResponse.json({
+      tab,
+      channel,
+      period,
+      channels: channels.docs.map((c: any) => ({ id: c.id, name: c.name, slug: c.slug })),
+      data: tabData,
+    })
+  } catch (error) {
+    console.error('[YouTube Analytics] Error:', error)
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 },
+    )
+  }
+}
+
+export const dynamic = 'force-dynamic'
diff --git a/src/components/admin/YouTubeAnalyticsDashboard.scss b/src/components/admin/YouTubeAnalyticsDashboard.scss
new file mode 100644
index 0000000..8f40049
--- /dev/null
+++ b/src/components/admin/YouTubeAnalyticsDashboard.scss
@@ -0,0 +1,722 @@
+.yt-analytics {
+  padding: 1.5rem;
+  max-width: 1200px;
+
+  // Header
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1.5rem;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  &__title-section {
+    h2 {
+      margin: 0 0 0.25rem 0;
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: var(--theme-elevation-800);
+    }
+
+    p {
+      margin: 0;
+      font-size: 0.875rem;
+      color: var(--theme-elevation-500);
+    }
+  }
+
+  &__controls {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  &__channel-select,
+  &__period-select {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--theme-elevation-250);
+    border-radius: var(--style-radius-s, 4px);
+    background-color: var(--theme-elevation-0);
+    color: var(--theme-elevation-800);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: border-color 0.15s ease;
+
+    &:hover {
+      border-color: var(--theme-elevation-400);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--theme-success-500);
+    }
+  }
+
+  &__refresh-btn {
+    padding: 0.5rem;
+    border: 1px solid var(--theme-elevation-250);
+    border-radius: var(--style-radius-s, 4px);
+    background-color: var(--theme-elevation-0);
+    color: var(--theme-elevation-600);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover:not(:disabled) {
+      background-color: var(--theme-elevation-100);
+      border-color: var(--theme-elevation-400);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  // Tabs
+  &__tabs {
+    display: flex;
+    gap: 0;
+    border-bottom: 2px solid var(--theme-elevation-150);
+    margin-bottom: 1.5rem;
+  }
+
+  &__tab {
+    padding: 0.75rem 1.25rem;
+    border: none;
+    background: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--theme-elevation-500);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    &:hover {
+      color: var(--theme-elevation-700);
+    }
+
+    &--active {
+      color: var(--theme-success-500);
+      border-bottom-color: var(--theme-success-500);
+      font-weight: 600;
+    }
+  }
+
+  // Stats Grid
+  &__stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  &__stat-card {
+    padding: 1.25rem;
+    background-color: var(--theme-elevation-0);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: var(--style-radius-m, 8px);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    border-left: 3px solid var(--theme-elevation-150);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    &--views {
+      border-left-color: #3b82f6;
+    }
+
+    &--time {
+      border-left-color: #8b5cf6;
+    }
+
+    &--ctr {
+      border-left-color: #f59e0b;
+    }
+
+    &--subs {
+      border-left-color: #10b981;
+    }
+
+    &--production {
+      border-left-color: #6366f1;
+    }
+
+    &--warning {
+      border-left-color: var(--theme-warning-500);
+    }
+
+    &--error {
+      border-left-color: var(--theme-error-500);
+    }
+
+    &--success {
+      border-left-color: var(--theme-success-500);
+    }
+  }
+
+  &__stat-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  &__stat-icon {
+    display: flex;
+    color: var(--theme-elevation-500);
+  }
+
+  &__stat-label {
+    font-size: 0.8125rem;
+    color: var(--theme-elevation-500);
+    font-weight: 500;
+  }
+
+  &__stat-value {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--theme-elevation-800);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  // Trend
+  &__trend {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    font-size: 0.75rem;
+    font-weight: 500;
+
+    &--up {
+      color: var(--theme-success-500);
+    }
+
+    &--down {
+      color: var(--theme-error-500);
+    }
+  }
+
+  // Content
+  &__content {
+    margin-top: 1rem;
+  }
+
+  // Section
+  &__section {
+    margin-bottom: 1.5rem;
+    padding: 1.25rem;
+    background-color: var(--theme-elevation-50);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: var(--style-radius-m, 8px);
+  }
+
+  &__section-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0 0 1rem 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--theme-elevation-700);
+  }
+
+  // Video List
+  &__video-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &__video-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem;
+    background-color: var(--theme-elevation-100);
+    border-radius: var(--style-radius-s, 4px);
+  }
+
+  &__video-title {
+    flex: 1;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--theme-elevation-800);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__video-metric {
+    font-size: 0.8125rem;
+    color: var(--theme-elevation-600);
+    min-width: 60px;
+    text-align: right;
+  }
+
+  // Engagement
+  &__engagement-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+  }
+
+  &__engagement-item {
+    text-align: center;
+    padding: 1rem;
+    background-color: var(--theme-elevation-100);
+    border-radius: var(--style-radius-s, 4px);
+  }
+
+  &__engagement-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--theme-elevation-800);
+  }
+
+  &__engagement-label {
+    font-size: 0.8125rem;
+    color: var(--theme-elevation-500);
+  }
+
+  // Pipeline Bar
+  &__pipeline-bar {
+    display: flex;
+    height: 40px;
+    border-radius: var(--style-radius-s, 4px);
+    overflow: hidden;
+    margin-bottom: 1rem;
+  }
+
+  &__pipeline-segment {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 600;
+    min-width: 30px;
+    transition: flex-basis 0.3s ease;
+    position: relative;
+
+    &--idea {
+      background-color: var(--theme-elevation-400);
+    }
+
+    &--script {
+      background-color: #6366f1;
+    }
+
+    &--review {
+      background-color: #f59e0b;
+    }
+
+    &--production {
+      background-color: #3b82f6;
+    }
+
+    &--editing {
+      background-color: #8b5cf6;
+    }
+
+    &--ready {
+      background-color: #10b981;
+    }
+
+    &--published {
+      background-color: var(--theme-success-500);
+    }
+  }
+
+  &__pipeline-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    font-size: 0.75rem;
+  }
+
+  &__legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  &__legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+  }
+
+  // Progress (Goals)
+  &__progress-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+  }
+
+  &__progress-label {
+    width: 100px;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--theme-elevation-600);
+  }
+
+  &__progress-bar {
+    flex: 1;
+    height: 8px;
+    background-color: var(--theme-elevation-150);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__progress-fill {
+    height: 100%;
+    border-radius: 4px;
+    background-color: var(--theme-success-500);
+    transition: width 0.5s ease;
+
+    &--at-risk {
+      background-color: var(--theme-warning-500);
+    }
+
+    &--missed {
+      background-color: var(--theme-error-500);
+    }
+  }
+
+  &__progress-value {
+    width: 60px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--theme-elevation-700);
+    text-align: right;
+  }
+
+  // Status Badge
+  &__status-badge {
+    display: inline-block;
+    padding: 0.125rem 0.5rem;
+    border-radius: 10px;
+    font-size: 0.75rem;
+    font-weight: 500;
+
+    &--on_track {
+      background-color: rgba(16, 185, 129, 0.1);
+      color: #10b981;
+    }
+
+    &--at_risk {
+      background-color: rgba(245, 158, 11, 0.1);
+      color: #f59e0b;
+    }
+
+    &--achieved {
+      background-color: rgba(59, 130, 246, 0.1);
+      color: #3b82f6;
+    }
+
+    &--missed {
+      background-color: rgba(239, 68, 68, 0.1);
+      color: #ef4444;
+    }
+  }
+
+  // Community - Comments
+  &__comment-item {
+    padding: 0.75rem;
+    background-color: var(--theme-elevation-100);
+    border-radius: var(--style-radius-s, 4px);
+    margin-bottom: 0.5rem;
+  }
+
+  &__comment-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.25rem;
+  }
+
+  &__comment-author {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--theme-elevation-800);
+  }
+
+  &__comment-meta {
+    font-size: 0.75rem;
+    color: var(--theme-elevation-500);
+  }
+
+  &__comment-message {
+    font-size: 0.8125rem;
+    color: var(--theme-elevation-600);
+    line-height: 1.4;
+  }
+
+  // Community - Topics
+  &__topic-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  &__topic-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.75rem;
+    background-color: var(--theme-elevation-100);
+    border-radius: 12px;
+    font-size: 0.8125rem;
+    color: var(--theme-elevation-700);
+  }
+
+  &__topic-count {
+    font-weight: 600;
+    color: var(--theme-elevation-500);
+    font-size: 0.75rem;
+  }
+
+  // Community - Sentiment
+  &__sentiment-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  &__sentiment-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  &__sentiment-label {
+    width: 80px;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--theme-elevation-600);
+  }
+
+  &__sentiment-bar-track {
+    flex: 1;
+    height: 8px;
+    background-color: var(--theme-elevation-150);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__sentiment-bar-fill {
+    height: 100%;
+    border-radius: 4px;
+    transition: width 0.5s ease;
+
+    &--positive {
+      background-color: var(--theme-success-500);
+    }
+
+    &--neutral {
+      background-color: var(--theme-elevation-400);
+    }
+
+    &--negative {
+      background-color: var(--theme-error-500);
+    }
+
+    &--question {
+      background-color: #3b82f6;
+    }
+  }
+
+  &__sentiment-count {
+    width: 40px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--theme-elevation-700);
+    text-align: right;
+  }
+
+  // Pipeline - Schedule
+  &__schedule-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    background-color: var(--theme-elevation-100);
+    border-radius: var(--style-radius-s, 4px);
+    margin-bottom: 0.5rem;
+  }
+
+  &__schedule-title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--theme-elevation-800);
+    flex: 1;
+  }
+
+  &__schedule-date {
+    font-size: 0.8125rem;
+    color: var(--theme-elevation-500);
+  }
+
+  // Pipeline - Tasks
+  &__task-item {
+    padding: 0.75rem;
+    background-color: rgba(var(--theme-error-500-rgb), 0.05);
+    border: 1px solid rgba(var(--theme-error-500-rgb), 0.2);
+    border-radius: var(--style-radius-s, 4px);
+    margin-bottom: 0.5rem;
+  }
+
+  &__task-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.25rem;
+  }
+
+  &__task-title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--theme-elevation-800);
+  }
+
+  &__task-meta {
+    font-size: 0.75rem;
+    color: var(--theme-elevation-500);
+  }
+
+  &__task-detail {
+    font-size: 0.8125rem;
+    color: var(--theme-elevation-600);
+  }
+
+  // Loading State
+  &__loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 1rem;
+    color: var(--theme-elevation-500);
+    gap: 1rem;
+
+    p {
+      margin: 0;
+      font-size: 0.875rem;
+    }
+  }
+
+  // Error State
+  &__error {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+    background-color: rgba(var(--theme-error-500-rgb), 0.1);
+    border: 1px solid rgba(var(--theme-error-500-rgb), 0.2);
+    border-radius: var(--style-radius-s, 4px);
+    color: var(--theme-error-500);
+
+    p {
+      margin: 0;
+      font-size: 0.875rem;
+    }
+  }
+
+  // Spinner
+  &__spinner {
+    animation: yt-analytics-spin 1s linear infinite;
+  }
+}
+
+// Dark Mode
+.dark .yt-analytics {
+  &__stat-card {
+    background-color: var(--theme-elevation-100);
+    border-color: var(--theme-elevation-200);
+  }
+
+  &__section {
+    background-color: var(--theme-elevation-100);
+    border-color: var(--theme-elevation-200);
+  }
+
+  &__video-row,
+  &__engagement-item,
+  &__comment-item,
+  &__schedule-item {
+    background-color: var(--theme-elevation-200);
+  }
+
+  &__topic-tag {
+    background-color: var(--theme-elevation-200);
+  }
+}
+
+// Responsive
+@media (max-width: 768px) {
+  .yt-analytics {
+    padding: 1rem;
+
+    &__header {
+      flex-direction: column;
+    }
+
+    &__stats-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    &__tabs {
+      overflow-x: auto;
+    }
+
+    &__engagement-grid {
+      grid-template-columns: 1fr;
+    }
+
+    &__stat-card {
+      padding: 1rem;
+    }
+
+    &__stat-value {
+      font-size: 1.5rem;
+    }
+
+    &__video-row {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    &__video-metric {
+      text-align: left;
+    }
+
+    &__schedule-item {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.25rem;
+    }
+  }
+}
+
+// Keyframes
+@keyframes yt-analytics-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/admin/YouTubeAnalyticsDashboard.tsx b/src/components/admin/YouTubeAnalyticsDashboard.tsx
new file mode 100644
index 0000000..003addf
--- /dev/null
+++ b/src/components/admin/YouTubeAnalyticsDashboard.tsx
@@ -0,0 +1,865 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import './YouTubeAnalyticsDashboard.scss'
+
+// Types
+type Tab = 'performance' | 'pipeline' | 'goals' | 'community'
+type Period = '7d' | '30d' | '90d'
+
+interface Channel {
+  id: number
+  name: string
+  slug: string
+}
+
+interface VideoSummary {
+  id: number
+  title: string
+  thumbnailText: string
+  views: number
+  ctr: number
+  avgRetention: number
+  likes: number
+}
+
+interface PerformanceData {
+  stats: {
+    totalViews: number
+    totalWatchTimeHours: number
+    avgCtr: number
+    subscribersGained: number
+  }
+  comparison: {
+    views: number
+    watchTime: number
+    subscribers: number
+  }
+  topVideos: VideoSummary[]
+  bottomVideos: VideoSummary[]
+  engagement: {
+    likes: number
+    comments: number
+    shares: number
+  }
+}
+
+interface PipelineData {
+  stats: {
+    inProduction: number
+    thisWeekCount: number
+    overdueTasksCount: number
+    pendingApprovals: number
+  }
+  pipeline: Record<string, number>
+  thisWeekVideos: Array<{
+    id: number
+    title: string
+    status: string
+    scheduledPublishDate: string
+    channel: string
+  }>
+  overdueTasks: Array<{
+    id: number
+    title: string
+    dueDate: string
+    assignedTo: string
+    video: string | null
+  }>
+}
+
+interface GoalsData {
+  stats: {
+    contentProgress: number
+    contentLabel: string
+    subscriberProgress: number
+    subscriberLabel: string
+    viewsProgress: number
+    viewsLabel: string
+    overall: number
+  }
+  goals: any[]
+  customGoals: Array<{
+    metric: string
+    target: string
+    current: string
+    status: string
+  }>
+}
+
+interface CommunityData {
+  stats: {
+    unresolvedCount: number
+    positivePct: number
+    avgResponseHours: number
+    escalationsCount: number
+  }
+  sentiment: Record<string, number>
+  topTopics: Array<{
+    topic: string
+    count: number
+  }>
+  recentUnresolved: Array<{
+    id: number
+    message: string
+    authorName: string
+    authorHandle: string
+    publishedAt: string
+    platform: string
+    sentiment: string
+  }>
+}
+
+interface ApiResponse {
+  tab: string
+  channel: string
+  period: string
+  channels: Channel[]
+  data: PerformanceData | PipelineData | GoalsData | CommunityData
+}
+
+const tabConfig: Array<{ key: Tab; label: string; icon: JSX.Element }> = [
+  {
+    key: 'performance',
+    label: 'Performance',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+    ),
+  },
+  {
+    key: 'pipeline',
+    label: 'Pipeline',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M12 2L2 7l10 5 10-5-10-5z" />
+        <path d="M2 17l10 5 10-5M2 12l10 5 10-5" />
+      </svg>
+    ),
+  },
+  {
+    key: 'goals',
+    label: 'Ziele',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="12" cy="12" r="10" />
+        <circle cx="12" cy="12" r="6" />
+        <circle cx="12" cy="12" r="2" />
+      </svg>
+    ),
+  },
+  {
+    key: 'community',
+    label: 'Community',
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+        <circle cx="9" cy="7" r="4" />
+        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+      </svg>
+    ),
+  },
+]
+
+const periodLabels: Record<Period, string> = {
+  '7d': 'Letzte 7 Tage',
+  '30d': 'Letzte 30 Tage',
+  '90d': 'Letzte 90 Tage',
+}
+
+const statusLabels: Record<string, string> = {
+  idea: 'Idee',
+  script_draft: 'Skript',
+  script_review: 'Review',
+  script_approved: 'Skript',
+  shoot_scheduled: 'Produktion',
+  shot: 'Produktion',
+  rough_cut: 'Schnitt',
+  fine_cut: 'Schnitt',
+  final_review: 'Review',
+  approved: 'Bereit',
+  upload_scheduled: 'Bereit',
+  published: 'Veröffentlicht',
+}
+
+const formatNumber = (n: number): string => {
+  if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}K`
+  return n.toString()
+}
+
+const formatDate = (dateString: string): string => {
+  return new Date(dateString).toLocaleString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+const renderTrend = (value: number): JSX.Element | null => {
+  if (value === 0) return null
+  const isUp = value > 0
+  return (
+    <span
+      className={`yt-analytics__trend ${isUp ? 'yt-analytics__trend--up' : 'yt-analytics__trend--down'}`}
+    >
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        {isUp ? (
+          <polyline points="18 15 12 9 6 15" />
+        ) : (
+          <polyline points="6 9 12 15 18 9" />
+        )}
+      </svg>
+      {Math.abs(value)}%
+    </span>
+  )
+}
+
+export const YouTubeAnalyticsDashboard: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<Tab>('performance')
+  const [period, setPeriod] = useState<Period>('30d')
+  const [channel, setChannel] = useState<string>('all')
+  const [channels, setChannels] = useState<Channel[]>([])
+  const [data, setData] = useState<ApiResponse['data'] | null>(null)
+  const [loading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch(
+        `/api/youtube/analytics?tab=${activeTab}&channel=${channel}&period=${period}`,
+        {
+          credentials: 'include',
+        },
+      )
+
+      if (!response.ok) {
+        throw new Error(`API returned ${response.status}`)
+      }
+
+      const result: ApiResponse = await response.json()
+
+      if (result.channels && result.channels.length > 0) {
+        setChannels(result.channels)
+      }
+
+      setData(result.data)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler beim Laden der Daten')
+    } finally {
+      setLoading(false)
+    }
+  }, [activeTab, channel, period])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  const renderPerformance = () => {
+    const perfData = data as PerformanceData
+    if (!perfData) return null
+
+    return (
+      <>
+        <div className="yt-analytics__stats-grid">
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--views">
+            <div className="yt-analytics__stat-header">
+              <div className="yt-analytics__stat-icon">
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                  <circle cx="12" cy="12" r="3" />
+                </svg>
+              </div>
+              <span className="yt-analytics__stat-label">Aufrufe</span>
+            </div>
+            <div className="yt-analytics__stat-value">
+              {formatNumber(perfData.stats.totalViews)}
+              {renderTrend(perfData.comparison.views)}
+            </div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--time">
+            <div className="yt-analytics__stat-header">
+              <div className="yt-analytics__stat-icon">
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <polyline points="12 6 12 12 16 14" />
+                </svg>
+              </div>
+              <span className="yt-analytics__stat-label">Wiedergabezeit</span>
+            </div>
+            <div className="yt-analytics__stat-value">
+              {formatNumber(perfData.stats.totalWatchTimeHours)}h
+              {renderTrend(perfData.comparison.watchTime)}
+            </div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--ctr">
+            <div className="yt-analytics__stat-header">
+              <div className="yt-analytics__stat-icon">
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <circle cx="12" cy="12" r="6" />
+                  <circle cx="12" cy="12" r="2" />
+                </svg>
+              </div>
+              <span className="yt-analytics__stat-label">CTR</span>
+            </div>
+            <div className="yt-analytics__stat-value">{perfData.stats.avgCtr.toFixed(1)}%</div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--subs">
+            <div className="yt-analytics__stat-header">
+              <div className="yt-analytics__stat-icon">
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                  <circle cx="9" cy="7" r="4" />
+                  <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                  <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                </svg>
+              </div>
+              <span className="yt-analytics__stat-label">Neue Abos</span>
+            </div>
+            <div className="yt-analytics__stat-value">
+              {formatNumber(perfData.stats.subscribersGained)}
+              {renderTrend(perfData.comparison.subscribers)}
+            </div>
+          </div>
+        </div>
+
+        {perfData.topVideos && perfData.topVideos.length > 0 && (
+          <div className="yt-analytics__section">
+            <h3 className="yt-analytics__section-title">Top 5 Videos</h3>
+            <div className="yt-analytics__video-list">
+              {perfData.topVideos.map((video) => (
+                <div key={video.id} className="yt-analytics__video-row">
+                  <div className="yt-analytics__video-title">{video.title}</div>
+                  <div className="yt-analytics__video-metric">{formatNumber(video.views)} Aufrufe</div>
+                  <div className="yt-analytics__video-metric">{video.ctr.toFixed(1)}% CTR</div>
+                  <div className="yt-analytics__video-metric">
+                    {video.avgRetention.toFixed(0)}% Retention
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {perfData.bottomVideos && perfData.bottomVideos.length > 0 && (
+          <div className="yt-analytics__section">
+            <h3 className="yt-analytics__section-title">Schwächste Videos</h3>
+            <div className="yt-analytics__video-list">
+              {perfData.bottomVideos.map((video) => (
+                <div key={video.id} className="yt-analytics__video-row">
+                  <div className="yt-analytics__video-title">{video.title}</div>
+                  <div className="yt-analytics__video-metric">{formatNumber(video.views)} Aufrufe</div>
+                  <div className="yt-analytics__video-metric">{video.ctr.toFixed(1)}% CTR</div>
+                  <div className="yt-analytics__video-metric">
+                    {video.avgRetention.toFixed(0)}% Retention
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="yt-analytics__section">
+          <h3 className="yt-analytics__section-title">Engagement</h3>
+          <div className="yt-analytics__engagement-grid">
+            <div className="yt-analytics__engagement-item">
+              <div className="yt-analytics__engagement-value">
+                {formatNumber(perfData.engagement.likes)}
+              </div>
+              <div className="yt-analytics__engagement-label">Likes</div>
+            </div>
+            <div className="yt-analytics__engagement-item">
+              <div className="yt-analytics__engagement-value">
+                {formatNumber(perfData.engagement.comments)}
+              </div>
+              <div className="yt-analytics__engagement-label">Kommentare</div>
+            </div>
+            <div className="yt-analytics__engagement-item">
+              <div className="yt-analytics__engagement-value">
+                {formatNumber(perfData.engagement.shares)}
+              </div>
+              <div className="yt-analytics__engagement-label">Shares</div>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  const renderPipeline = () => {
+    const pipeData = data as PipelineData
+    if (!pipeData) return null
+
+    // Group statuses for pipeline bar
+    const statusGroups: Record<string, { label: string; className: string }> = {
+      idea: { label: 'Idee', className: 'idea' },
+      script: { label: 'Skript', className: 'script' },
+      review: { label: 'Review', className: 'review' },
+      production: { label: 'Produktion', className: 'production' },
+      editing: { label: 'Schnitt', className: 'editing' },
+      ready: { label: 'Bereit', className: 'ready' },
+      published: { label: 'Veröffentlicht', className: 'published' },
+    }
+
+    const grouped = {
+      idea: (pipeData.pipeline.idea || 0),
+      script: (pipeData.pipeline.script_draft || 0) + (pipeData.pipeline.script_approved || 0),
+      review: (pipeData.pipeline.script_review || 0) + (pipeData.pipeline.final_review || 0),
+      production: (pipeData.pipeline.shoot_scheduled || 0) + (pipeData.pipeline.shot || 0),
+      editing: (pipeData.pipeline.rough_cut || 0) + (pipeData.pipeline.fine_cut || 0),
+      ready: (pipeData.pipeline.approved || 0) + (pipeData.pipeline.upload_scheduled || 0),
+      published: (pipeData.pipeline.published || 0),
+    }
+
+    const total = Object.values(grouped).reduce((sum, val) => sum + val, 0)
+
+    return (
+      <>
+        <div className="yt-analytics__stats-grid">
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--production">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">In Produktion</span>
+            </div>
+            <div className="yt-analytics__stat-value">{pipeData.stats.inProduction}</div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--success">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">Diese Woche</span>
+            </div>
+            <div className="yt-analytics__stat-value">{pipeData.stats.thisWeekCount}</div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--error">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">Überfällige Tasks</span>
+            </div>
+            <div className="yt-analytics__stat-value">{pipeData.stats.overdueTasksCount}</div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--warning">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">Offene Freigaben</span>
+            </div>
+            <div className="yt-analytics__stat-value">{pipeData.stats.pendingApprovals}</div>
+          </div>
+        </div>
+
+        <div className="yt-analytics__section">
+          <h3 className="yt-analytics__section-title">Pipeline Übersicht</h3>
+          <div className="yt-analytics__pipeline-legend">
+            {Object.entries(statusGroups).map(([key, { label, className }]) => (
+              <div key={key} className="yt-analytics__legend-item">
+                <div className={`yt-analytics__legend-dot yt-analytics__pipeline-segment--${className}`} />
+                <span>{label}</span>
+              </div>
+            ))}
+          </div>
+          <div className="yt-analytics__pipeline-bar">
+            {Object.entries(grouped).map(([key, count]) => {
+              const percentage = total > 0 ? (count / total) * 100 : 0
+              const { label, className } = statusGroups[key]
+              return count > 0 ? (
+                <div
+                  key={key}
+                  className={`yt-analytics__pipeline-segment yt-analytics__pipeline-segment--${className}`}
+                  style={{ flexBasis: `${percentage}%` }}
+                  title={`${label}: ${count}`}
+                >
+                  {percentage > 5 && `${count}`}
+                </div>
+              ) : null
+            })}
+          </div>
+        </div>
+
+        {pipeData.thisWeekVideos && pipeData.thisWeekVideos.length > 0 && (
+          <div className="yt-analytics__section">
+            <h3 className="yt-analytics__section-title">Nächste Veröffentlichungen</h3>
+            {pipeData.thisWeekVideos.map((video) => (
+              <div key={video.id} className="yt-analytics__schedule-item">
+                <div className="yt-analytics__schedule-title">{video.title}</div>
+                <div className="yt-analytics__schedule-date">
+                  {formatDate(video.scheduledPublishDate)} • {video.channel}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {pipeData.overdueTasks && pipeData.overdueTasks.length > 0 && (
+          <div className="yt-analytics__section">
+            <h3 className="yt-analytics__section-title">Überfällige Aufgaben</h3>
+            {pipeData.overdueTasks.map((task) => (
+              <div key={task.id} className="yt-analytics__task-item">
+                <div className="yt-analytics__task-header">
+                  <div className="yt-analytics__task-title">{task.title}</div>
+                  <div className="yt-analytics__task-meta">Fällig: {formatDate(task.dueDate)}</div>
+                </div>
+                <div className="yt-analytics__task-detail">
+                  {task.assignedTo}
+                  {task.video && ` • ${task.video}`}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </>
+    )
+  }
+
+  const renderGoals = () => {
+    const goalsData = data as GoalsData
+    if (!goalsData) return null
+
+    return (
+      <>
+        <div className="yt-analytics__stats-grid">
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--production">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">Content</span>
+            </div>
+            <div className="yt-analytics__stat-value">{goalsData.stats.contentLabel}</div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--subs">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">Abonnenten</span>
+            </div>
+            <div className="yt-analytics__stat-value">{goalsData.stats.subscriberLabel}</div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--views">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">Aufrufe</span>
+            </div>
+            <div className="yt-analytics__stat-value">{goalsData.stats.viewsLabel}</div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--success">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">Gesamt</span>
+            </div>
+            <div className="yt-analytics__stat-value">{goalsData.stats.overall.toFixed(0)}%</div>
+          </div>
+        </div>
+
+        <div className="yt-analytics__section">
+          <h3 className="yt-analytics__section-title">Fortschritt</h3>
+          <div className="yt-analytics__progress-item">
+            <div className="yt-analytics__progress-label">Content</div>
+            <div className="yt-analytics__progress-bar">
+              <div
+                className="yt-analytics__progress-fill"
+                style={{ width: `${Math.min(goalsData.stats.contentProgress, 100)}%` }}
+              />
+            </div>
+            <div className="yt-analytics__progress-value">{goalsData.stats.contentLabel}</div>
+          </div>
+
+          <div className="yt-analytics__progress-item">
+            <div className="yt-analytics__progress-label">Abonnenten</div>
+            <div className="yt-analytics__progress-bar">
+              <div
+                className="yt-analytics__progress-fill"
+                style={{ width: `${Math.min(goalsData.stats.subscriberProgress, 100)}%` }}
+              />
+            </div>
+            <div className="yt-analytics__progress-value">{goalsData.stats.subscriberLabel}</div>
+          </div>
+
+          <div className="yt-analytics__progress-item">
+            <div className="yt-analytics__progress-label">Aufrufe</div>
+            <div className="yt-analytics__progress-bar">
+              <div
+                className="yt-analytics__progress-fill"
+                style={{ width: `${Math.min(goalsData.stats.viewsProgress, 100)}%` }}
+              />
+            </div>
+            <div className="yt-analytics__progress-value">{goalsData.stats.viewsLabel}</div>
+          </div>
+        </div>
+
+        {goalsData.customGoals && goalsData.customGoals.length > 0 && (
+          <div className="yt-analytics__section">
+            <h3 className="yt-analytics__section-title">Benutzerdefinierte Ziele</h3>
+            {goalsData.customGoals.map((goal, index) => (
+              <div key={index} className="yt-analytics__video-row">
+                <div className="yt-analytics__video-title">{goal.metric}</div>
+                <div className="yt-analytics__video-metric">
+                  {goal.current} / {goal.target}
+                </div>
+                <span className={`yt-analytics__status-badge yt-analytics__status-badge--${goal.status}`}>
+                  {goal.status === 'on_track' && 'Im Plan'}
+                  {goal.status === 'at_risk' && 'Gefährdet'}
+                  {goal.status === 'achieved' && 'Erreicht'}
+                  {goal.status === 'missed' && 'Verfehlt'}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </>
+    )
+  }
+
+  const renderCommunity = () => {
+    const commData = data as CommunityData
+    if (!commData) return null
+
+    const sentimentMax = Math.max(...Object.values(commData.sentiment))
+
+    return (
+      <>
+        <div className="yt-analytics__stats-grid">
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--warning">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">Unbearbeitet</span>
+            </div>
+            <div className="yt-analytics__stat-value">{commData.stats.unresolvedCount}</div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--success">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">Positiv</span>
+            </div>
+            <div className="yt-analytics__stat-value">{commData.stats.positivePct.toFixed(0)}%</div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--production">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">Antwortzeit</span>
+            </div>
+            <div className="yt-analytics__stat-value">{commData.stats.avgResponseHours.toFixed(1)}h</div>
+          </div>
+
+          <div className="yt-analytics__stat-card yt-analytics__stat-card--error">
+            <div className="yt-analytics__stat-header">
+              <span className="yt-analytics__stat-label">Eskalationen</span>
+            </div>
+            <div className="yt-analytics__stat-value">{commData.stats.escalationsCount}</div>
+          </div>
+        </div>
+
+        <div className="yt-analytics__section">
+          <h3 className="yt-analytics__section-title">Sentiment</h3>
+          <div className="yt-analytics__sentiment-list">
+            {Object.entries(commData.sentiment).map(([sentiment, count]) => {
+              const percentage = sentimentMax > 0 ? (count / sentimentMax) * 100 : 0
+              return (
+                <div key={sentiment} className="yt-analytics__sentiment-item">
+                  <div className="yt-analytics__sentiment-label">
+                    {sentiment === 'positive' && 'Positiv'}
+                    {sentiment === 'neutral' && 'Neutral'}
+                    {sentiment === 'negative' && 'Negativ'}
+                    {sentiment === 'question' && 'Frage'}
+                  </div>
+                  <div className="yt-analytics__sentiment-bar-track">
+                    <div
+                      className={`yt-analytics__sentiment-bar-fill yt-analytics__sentiment-bar-fill--${sentiment}`}
+                      style={{ width: `${percentage}%` }}
+                    />
+                  </div>
+                  <div className="yt-analytics__sentiment-count">{count}</div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        {commData.topTopics && commData.topTopics.length > 0 && (
+          <div className="yt-analytics__section">
+            <h3 className="yt-analytics__section-title">Top-Themen</h3>
+            <div className="yt-analytics__topic-list">
+              {commData.topTopics.map((topic, index) => (
+                <div key={index} className="yt-analytics__topic-tag">
+                  {topic.topic}
+                  <span className="yt-analytics__topic-count">{topic.count}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {commData.recentUnresolved && commData.recentUnresolved.length > 0 && (
+          <div className="yt-analytics__section">
+            <h3 className="yt-analytics__section-title">Neueste unbearbeitete Kommentare</h3>
+            {commData.recentUnresolved.map((comment) => (
+              <div key={comment.id} className="yt-analytics__comment-item">
+                <div className="yt-analytics__comment-header">
+                  <div className="yt-analytics__comment-author">
+                    {comment.authorName} (@{comment.authorHandle})
+                  </div>
+                  <div className="yt-analytics__comment-meta">
+                    {comment.platform} • {formatDate(comment.publishedAt)}
+                  </div>
+                </div>
+                <div className="yt-analytics__comment-message">{comment.message}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <div className="yt-analytics">
+      <div className="yt-analytics__header">
+        <div className="yt-analytics__title-section">
+          <h2>YouTube Analytics</h2>
+          <p>Übersicht über Performance, Pipeline, Ziele und Community</p>
+        </div>
+        <div className="yt-analytics__controls">
+          <select
+            className="yt-analytics__channel-select"
+            value={channel}
+            onChange={(e) => setChannel(e.target.value)}
+          >
+            <option value="all">Alle Kanäle</option>
+            {channels.map((ch) => (
+              <option key={ch.id} value={ch.slug}>
+                {ch.name}
+              </option>
+            ))}
+          </select>
+          <select
+            className="yt-analytics__period-select"
+            value={period}
+            onChange={(e) => setPeriod(e.target.value as Period)}
+          >
+            {Object.entries(periodLabels).map(([key, label]) => (
+              <option key={key} value={key}>
+                {label}
+              </option>
+            ))}
+          </select>
+          <button
+            className="yt-analytics__refresh-btn"
+            onClick={fetchData}
+            disabled={loading}
+            aria-label="Aktualisieren"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              className={loading ? 'yt-analytics__spinner' : ''}
+            >
+              <path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className="yt-analytics__tabs">
+        {tabConfig.map((tab) => (
+          <button
+            key={tab.key}
+            className={`yt-analytics__tab ${activeTab === tab.key ? 'yt-analytics__tab--active' : ''}`}
+            onClick={() => setActiveTab(tab.key)}
+          >
+            {tab.icon}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {loading && !data && (
+        <div className="yt-analytics__loading">
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            className="yt-analytics__spinner"
+          >
+            <path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16" />
+          </svg>
+          <p>Lade Daten...</p>
+        </div>
+      )}
+
+      {error && (
+        <div className="yt-analytics__error">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+          <p>{error}</p>
+        </div>
+      )}
+
+      {!loading && !error && data && (
+        <div className="yt-analytics__content">
+          {activeTab === 'performance' && renderPerformance()}
+          {activeTab === 'pipeline' && renderPipeline()}
+          {activeTab === 'goals' && renderGoals()}
+          {activeTab === 'community' && renderCommunity()}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default YouTubeAnalyticsDashboard
diff --git a/src/components/admin/YouTubeAnalyticsDashboardView.tsx b/src/components/admin/YouTubeAnalyticsDashboardView.tsx
new file mode 100644
index 0000000..34d83bf
--- /dev/null
+++ b/src/components/admin/YouTubeAnalyticsDashboardView.tsx
@@ -0,0 +1,10 @@
+'use client'
+
+import React from 'react'
+import { YouTubeAnalyticsDashboard } from './YouTubeAnalyticsDashboard'
+
+export const YouTubeAnalyticsDashboardView: React.FC = () => {
+  return <YouTubeAnalyticsDashboard />
+}
+
+export default YouTubeAnalyticsDashboardView
diff --git a/src/components/admin/YouTubeAnalyticsNavLinks.scss b/src/components/admin/YouTubeAnalyticsNavLinks.scss
new file mode 100644
index 0000000..287791f
--- /dev/null
+++ b/src/components/admin/YouTubeAnalyticsNavLinks.scss
@@ -0,0 +1,87 @@
+.yt-nav-links {
+  padding: 0 var(--base);
+  margin-top: var(--base);
+  border-top: 1px solid var(--theme-elevation-100);
+  padding-top: var(--base);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--theme-elevation-500);
+  }
+
+  &__icon {
+    font-size: 14px;
+  }
+
+  &__title {
+    flex: 1;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border-radius: 4px;
+    text-decoration: none;
+    color: var(--theme-elevation-800);
+    font-size: 13px;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background-color: var(--theme-elevation-50);
+      color: var(--theme-elevation-900);
+    }
+
+    &--active {
+      background-color: var(--theme-elevation-100);
+      color: var(--theme-text);
+      font-weight: 500;
+
+      &:hover {
+        background-color: var(--theme-elevation-150);
+      }
+    }
+  }
+
+  &__link-icon {
+    font-size: 16px;
+    width: 20px;
+    text-align: center;
+  }
+
+  &__link-label {
+    flex: 1;
+  }
+}
+
+[data-theme='dark'] {
+  .yt-nav-links {
+    &__link {
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+
+      &--active {
+        background-color: var(--theme-elevation-150);
+
+        &:hover {
+          background-color: var(--theme-elevation-200);
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/admin/YouTubeAnalyticsNavLinks.tsx b/src/components/admin/YouTubeAnalyticsNavLinks.tsx
new file mode 100644
index 0000000..1e51fb1
--- /dev/null
+++ b/src/components/admin/YouTubeAnalyticsNavLinks.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+import './YouTubeAnalyticsNavLinks.scss'
+
+export const YouTubeAnalyticsNavLinks: React.FC = () => {
+  const pathname = usePathname()
+
+  const links = [
+    {
+      href: '/admin/youtube-analytics',
+      label: 'YouTube Analytics',
+      icon: '📈',
+    },
+  ]
+
+  return (
+    <div className="yt-nav-links">
+      <div className="yt-nav-links__header">
+        <span className="yt-nav-links__icon">🎬</span>
+        <span className="yt-nav-links__title">YouTube</span>
+      </div>
+      <nav className="yt-nav-links__list">
+        {links.map((link) => {
+          const isActive = pathname === link.href
+          return (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={`yt-nav-links__link ${isActive ? 'yt-nav-links__link--active' : ''}`}
+            >
+              <span className="yt-nav-links__link-icon">{link.icon}</span>
+              <span className="yt-nav-links__link-label">{link.label}</span>
+            </Link>
+          )
+        })}
+      </nav>
+    </div>
+  )
+}
+
+export default YouTubeAnalyticsNavLinks
diff --git a/src/payload.config.ts b/src/payload.config.ts
index c621713..4fbcc2e 100644
--- a/src/payload.config.ts
+++ b/src/payload.config.ts
@@ -128,14 +128,19 @@ export default buildConfig({
   admin: {
     user: Users.slug,
     components: {
-      // Community Management Nav Links
-      afterNavLinks: ['@/components/admin/CommunityNavLinks#CommunityNavLinks'],
-      // Custom Views - re-enabled after Payload 3.76.1 upgrade (Issue #15241 test)
+      afterNavLinks: [
+        '@/components/admin/CommunityNavLinks#CommunityNavLinks',
+        '@/components/admin/YouTubeAnalyticsNavLinks#YouTubeAnalyticsNavLinks',
+      ],
       views: {
         TenantDashboard: {
           Component: '@/components/admin/TenantDashboardView#TenantDashboardView',
           path: '/tenant-dashboard',
         },
+        YouTubeAnalyticsDashboard: {
+          Component: '@/components/admin/YouTubeAnalyticsDashboardView#YouTubeAnalyticsDashboardView',
+          path: '/youtube-analytics',
+        },
       },
     },
   },