mirror of
https://github.com/complexcaresolutions/cms.c2sgmbh.git
synced 2026-03-17 22:04:10 +00:00
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>
This commit is contained in:
parent
8b037c91af
commit
06c93ba05c
10 changed files with 3309 additions and 3 deletions
155
docs/plans/2026-02-13-youtube-analytics-dashboard-design.md
Normal file
155
docs/plans/2026-02-13-youtube-analytics-dashboard-design.md
Normal file
|
|
@ -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
|
||||||
971
docs/plans/2026-02-13-youtube-analytics-dashboard.md
Normal file
971
docs/plans/2026-02-13-youtube-analytics-dashboard.md
Normal file
|
|
@ -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
|
||||||
|
|
@ -26,9 +26,11 @@ import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997e
|
||||||
import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
|
import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
|
||||||
import { ItalicFeatureClient as ItalicFeatureClient_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 { 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 { TenantSelector as TenantSelector_d6d5f193a167989e2ee7d14202901e62 } from '@payloadcms/plugin-multi-tenant/rsc'
|
||||||
import { TenantSelectionProvider as TenantSelectionProvider_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 { 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'
|
import { CollectionCards as CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1 } from '@payloadcms/next/rsc'
|
||||||
|
|
||||||
export const importMap = {
|
export const importMap = {
|
||||||
|
|
@ -60,8 +62,10 @@ export const importMap = {
|
||||||
"@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
|
"@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
|
||||||
"@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
|
"@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
|
||||||
"@/components/admin/CommunityNavLinks#CommunityNavLinks": CommunityNavLinks_4431db66fbe96916dda5fdbfa979ee1e,
|
"@/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#TenantSelector": TenantSelector_d6d5f193a167989e2ee7d14202901e62,
|
||||||
"@payloadcms/plugin-multi-tenant/rsc#TenantSelectionProvider": TenantSelectionProvider_d6d5f193a167989e2ee7d14202901e62,
|
"@payloadcms/plugin-multi-tenant/rsc#TenantSelectionProvider": TenantSelectionProvider_d6d5f193a167989e2ee7d14202901e62,
|
||||||
"@/components/admin/TenantDashboardView#TenantDashboardView": TenantDashboardView_1468a86d093d5b2444131ed5ce14599e,
|
"@/components/admin/TenantDashboardView#TenantDashboardView": TenantDashboardView_1468a86d093d5b2444131ed5ce14599e,
|
||||||
|
"@/components/admin/YouTubeAnalyticsDashboardView#YouTubeAnalyticsDashboardView": YouTubeAnalyticsDashboardView_cda40d57a6ea0fffb8f4ea8808c0cdea,
|
||||||
"@payloadcms/next/rsc#CollectionCards": CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1
|
"@payloadcms/next/rsc#CollectionCards": CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1
|
||||||
}
|
}
|
||||||
|
|
|
||||||
442
src/app/(payload)/api/youtube/analytics/route.ts
Normal file
442
src/app/(payload)/api/youtube/analytics/route.ts
Normal file
|
|
@ -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'
|
||||||
722
src/components/admin/YouTubeAnalyticsDashboard.scss
Normal file
722
src/components/admin/YouTubeAnalyticsDashboard.scss
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
865
src/components/admin/YouTubeAnalyticsDashboard.tsx
Normal file
865
src/components/admin/YouTubeAnalyticsDashboard.tsx
Normal file
|
|
@ -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
|
||||||
10
src/components/admin/YouTubeAnalyticsDashboardView.tsx
Normal file
10
src/components/admin/YouTubeAnalyticsDashboardView.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { YouTubeAnalyticsDashboard } from './YouTubeAnalyticsDashboard'
|
||||||
|
|
||||||
|
export const YouTubeAnalyticsDashboardView: React.FC = () => {
|
||||||
|
return <YouTubeAnalyticsDashboard />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default YouTubeAnalyticsDashboardView
|
||||||
87
src/components/admin/YouTubeAnalyticsNavLinks.scss
Normal file
87
src/components/admin/YouTubeAnalyticsNavLinks.scss
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
45
src/components/admin/YouTubeAnalyticsNavLinks.tsx
Normal file
45
src/components/admin/YouTubeAnalyticsNavLinks.tsx
Normal file
|
|
@ -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
|
||||||
|
|
@ -128,14 +128,19 @@ export default buildConfig({
|
||||||
admin: {
|
admin: {
|
||||||
user: Users.slug,
|
user: Users.slug,
|
||||||
components: {
|
components: {
|
||||||
// Community Management Nav Links
|
afterNavLinks: [
|
||||||
afterNavLinks: ['@/components/admin/CommunityNavLinks#CommunityNavLinks'],
|
'@/components/admin/CommunityNavLinks#CommunityNavLinks',
|
||||||
// Custom Views - re-enabled after Payload 3.76.1 upgrade (Issue #15241 test)
|
'@/components/admin/YouTubeAnalyticsNavLinks#YouTubeAnalyticsNavLinks',
|
||||||
|
],
|
||||||
views: {
|
views: {
|
||||||
TenantDashboard: {
|
TenantDashboard: {
|
||||||
Component: '@/components/admin/TenantDashboardView#TenantDashboardView',
|
Component: '@/components/admin/TenantDashboardView#TenantDashboardView',
|
||||||
path: '/tenant-dashboard',
|
path: '/tenant-dashboard',
|
||||||
},
|
},
|
||||||
|
YouTubeAnalyticsDashboard: {
|
||||||
|
Component: '@/components/admin/YouTubeAnalyticsDashboardView#YouTubeAnalyticsDashboardView',
|
||||||
|
path: '/youtube-analytics',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue