admin/postcast-tool
1
0
Fork 0
forked from admin/zeropost-tool
Code Pull Requests Activity

feat: P4 ChannelAnalytics tab; P5 FromUrlModal + URL→draft in ChannelView

Browse Source
This commit is contained in:
Nik (Claude)
2026-06-08 11:09:03 +03:00
parent b8a570f04a
commit eac6e2ed13
7 changed files with 555 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ChannelAnalytics.js
+255
View File
@@ -0,0 +1,255 @@
'use client';
/**
* ChannelAnalytics — вкладка аналитики в ChannelView.
* Props: channelId, channelName
*/
import { useState, useEffect, useCallback } from 'react';
import { BarChart2, TrendingUp, Clock, RefreshCw,
Heart, Share2, Eye, AlertCircle, Calendar } from 'lucide-react';
const DOW_SHORT = ['Пн','Вт','Ср','Чт','Пт','Сб','Вс'];
const BAR_HEIGHT = 80;
// ── Мини-бар для гистограммы ──────────────────────────────────────────────────
function Bar({ value, max, label, highlight }) {
const pct = max > 0 ? (value / max) : 0;
return (
<div className="flex flex-col items-center gap-1 flex-1">
<span className="text-[10px] text-text-mute">{value > 0 ? value : ''}</span>
<div className="w-full rounded-t-sm" style={{
height: BAR_HEIGHT,
display: 'flex',
alignItems: 'flex-end',
}}>
<div
className={`w-full rounded-t-sm transition-all ${highlight ? 'bg-accent' : 'bg-accent/30'}`}
style={{ height: `${Math.max(pct * BAR_HEIGHT, value > 0 ? 4 : 0)}px` }}
/>
</div>
<span className="text-[10px] text-text-mute">{label}</span>
</div>
);
}
// ── Карточка метрики ──────────────────────────────────────────────────────────
function MetricCard({ Icon, label, value, sub, color = 'text-accent' }) {
return (
<div className="card p-4 flex items-center gap-3">
<div className={`p-2 rounded-lg bg-surface2 ${color}`}>
<Icon className="w-5 h-5" />
</div>
<div>
<div className="text-xl font-bold">{value ?? '—'}</div>
<div className="text-xs text-text-mute">{label}</div>
{sub && <div className="text-xs text-text-mute mt-0.5">{sub}</div>}
</div>
</div>
);
}
// ── Строка реакций ────────────────────────────────────────────────────────────
function ReactionBar({ reactions }) {
if (!reactions || !Object.keys(reactions).length) return null;
const total = Object.values(reactions).reduce((s, v) => s + v, 0);
return (
<div className="flex items-center gap-2 flex-wrap">
{Object.entries(reactions)
.sort((a, b) => b[1] - a[1])
.map(([emoji, count]) => (
<span key={emoji} className="flex items-center gap-1 text-sm bg-surface2 px-2 py-0.5 rounded-full border border-border">
{emoji} <span className="text-xs text-text-mute">{count}</span>
</span>
))}
<span className="text-xs text-text-mute ml-auto">всего {total}</span>
</div>
);
}
// ── Главный компонент ─────────────────────────────────────────────────────────
export default function ChannelAnalytics({ channelId, channelName }) {
const [metrics, setMetrics] = useState(null);
const [bestTime, setBestTime] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [days, setDays] = useState(30);
const load = useCallback(async () => {
setLoading(true);
setError('');
try {
const [m, b] = await Promise.all([
fetch(`/api/metrics/channel/${channelId}?days=${days}`).then(r => r.json()),
fetch(`/api/metrics/best-time/${channelId}?days=90`).then(r => r.json()),
]);
if (m.error) throw new Error(m.error);
setMetrics(m);
setBestTime(b);
} catch (e) {
setError(e.message);
} finally {
setLoading(false);
}
}, [channelId, days]);
useEffect(() => { load(); }, [load]);
const totals = metrics?.totals || {};
const topPosts = metrics?.top_posts || [];
const reactionTotals = metrics?.reaction_totals || [];
const totalReactions = reactionTotals.reduce((s, r) => s + parseInt(r.total), 0);
// Лучший день недели по кол-ву публикаций
const dowData = Array.from({ length: 7 }, (_, i) => {
const d = bestTime?.by_dow?.find(r => parseInt(r.dow) === i + 1);
return { label: DOW_SHORT[i], value: d?.count || 0 };
});
const maxDow = Math.max(...dowData.map(d => d.value), 1);
const bestDow = dowData.reduce((best, d, i) => d.value > best.value ? { ...d, i } : best, { value: 0, i: -1 });
// Лучший час
const hourData = Array.from({ length: 24 }, (_, h) => {
const d = bestTime?.by_hour?.find(r => parseInt(r.hour) === h);
return { label: `${h}`, value: d?.count || 0 };
});
const maxHour = Math.max(...hourData.map(d => d.value), 1);
const bestHour = hourData.reduce((best, d, i) => d.value > best.value ? { ...d, i } : best, { value: 0, i: -1 });
return (
<div className="flex flex-col gap-5">
{/* Тулбар */}
<div className="flex items-center justify-between flex-wrap gap-2">
<h3 className="font-semibold flex items-center gap-2">
<BarChart2 className="w-4 h-4 text-accent" />
Аналитика
</h3>
<div className="flex items-center gap-2">
<select
className="input py-1 text-sm w-32"
value={days}
onChange={e => setDays(parseInt(e.target.value))}
>
<option value={7}>7 дней</option>
<option value={30}>30 дней</option>
<option value={90}>90 дней</option>
</select>
<button onClick={load} className="btn-ghost p-1.5 rounded-lg" title="Обновить">
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
</button>
</div>
</div>
{error && (
<div className="card p-3 text-sm text-red-400 flex items-center gap-2">
<AlertCircle className="w-4 h-4 shrink-0" /> {error}
</div>
)}
{/* Карточки-цифры */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
<MetricCard Icon={Calendar} label={`Постов за ${days} дн.`} value={totals.total_posts || 0} />
<MetricCard Icon={Eye} label="Опубликовано в TG" value={totals.published_to_tg || 0} />
<MetricCard Icon={Heart} label="Реакций за период" value={totalReactions || 0} color="text-pink-400" />
<MetricCard Icon={Share2} label="Пересылок" value={totals.total_forwards || 0} color="text-blue-400" />
</div>
{/* Топ реакций */}
{reactionTotals.length > 0 && (
<div className="card p-4">
<div className="text-sm font-semibold mb-3 flex items-center gap-2">
<Heart className="w-4 h-4 text-pink-400" /> Реакции за {days} дней
</div>
<div className="flex items-center gap-2 flex-wrap">
{reactionTotals.map(r => (
<span key={r.emoji} className="flex items-center gap-1.5 text-sm bg-surface2 px-3 py-1 rounded-full border border-border">
{r.emoji}
<span className="font-semibold">{r.total}</span>
</span>
))}
</div>
</div>
)}
{/* Лучший день недели */}
<div className="card p-4">
<div className="text-sm font-semibold mb-1 flex items-center gap-2">
<TrendingUp className="w-4 h-4 text-accent" /> Активность по дням недели
</div>
{bestDow.value > 0 && (
<p className="text-xs text-text-mute mb-3">
Чаще всего публикуешь в <span className="text-accent font-medium">{DOW_SHORT[bestDow.i]}</span>
</p>
)}
<div className="flex gap-1 items-end" style={{ height: BAR_HEIGHT + 32 }}>
{dowData.map((d, i) => (
<Bar key={i} value={d.value} max={maxDow} label={d.label} highlight={i === bestDow.i} />
))}
</div>
</div>
{/* Лучший час */}
<div className="card p-4">
<div className="text-sm font-semibold mb-1 flex items-center gap-2">
<Clock className="w-4 h-4 text-accent" /> Активность по часам (МСК, 90 дн.)
</div>
{bestHour.value > 0 && (
<p className="text-xs text-text-mute mb-3">
Пик публикаций в <span className="text-accent font-medium">{bestHour.i}:00</span>
</p>
)}
<div className="flex gap-px items-end overflow-x-auto" style={{ height: BAR_HEIGHT + 32 }}>
{hourData.map((d, i) => (
<Bar key={i} value={d.value} max={maxHour} label={i % 4 === 0 ? String(i) : ''} highlight={i === bestHour.i} />
))}
</div>
</div>
{/* Топ постов по реакциям */}
{topPosts.length > 0 && (
<div className="card p-4">
<div className="text-sm font-semibold mb-3 flex items-center gap-2">
<Heart className="w-4 h-4 text-pink-400" /> Топ постов по реакциям
</div>
<div className="flex flex-col gap-3">
{topPosts.map(p => (
<div key={p.id} className="p-3 rounded-lg bg-surface2 border border-border">
<div className="text-xs text-text-soft line-clamp-2 mb-2">{p.preview}</div>
<div className="flex items-center gap-3 flex-wrap">
<ReactionBar reactions={p.reactions} />
{p.forwards > 0 && (
<span className="text-xs text-text-mute flex items-center gap-1">
<Share2 className="w-3 h-3" /> {p.forwards}
</span>
)}
<span className="text-xs text-text-mute ml-auto">
{p.published_at ? new Date(p.published_at).toLocaleDateString('ru', { day:'numeric', month:'short' }) : ''}
</span>
{p.tg_message_id && (
<a
href={`https://t.me/${channelName?.replace('@','')}/${p.tg_message_id}`}
target="_blank" rel="noopener noreferrer"
className="text-xs text-accent hover:underline"
>
Открыть
</a>
)}
</div>
</div>
))}
</div>
</div>
)}
{/* Нет данных */}
{!loading && metrics && topPosts.length === 0 && reactionTotals.length === 0 && (
<div className="card p-8 text-center text-text-mute">
<BarChart2 className="w-8 h-8 mx-auto mb-3 opacity-30" />
<p>Пока нет данных для отображения</p>
<p className="text-xs mt-1">Реакции появятся после первых публикаций через этот канал</p>
</div>
)}
</div>
);
}
components/ChannelView.js
+43
View File
@@ -9,6 +9,8 @@ import {
import PhotoSearchModal from './PhotoSearchModal';
import PostPreview from './PostPreview';
import PostTemplates from './PostTemplates';
import ChannelAnalytics from './ChannelAnalytics';
import FromUrlModal from './FromUrlModal';
const GOAL_LABELS = {
educational: 'Обучение', news: 'Новости',
@@ -53,6 +55,7 @@ export default function ChannelView({ channel }) {
// Photo search modal
const [showPhotoSearch, setShowPhotoSearch] = useState(false);
const [showFromUrl, setShowFromUrl] = useState(false);
// Трансформации
const [transforming, setTransforming] = useState(false);
@@ -85,6 +88,7 @@ export default function ChannelView({ channel }) {
// Сохранение и публикация
const [savedPostId, setSavedPostId] = useState(null);
const [publishing, setPublishing] = useState(false);
const [activeTab, setActiveTab] = useState('generate'); // generate | analytics
const [showScheduler, setShowScheduler] = useState(false);
const [scheduleAt, setScheduleAt] = useState('');
const [history, setHistory] = useState([]);
@@ -118,6 +122,13 @@ export default function ChannelView({ channel }) {
setShowPhotoSearch(false);
}
function applyFromUrl({ content, imageUrl, title }) {
setPost(content);
if (imageUrl) setImage(imageUrl);
if (title && !topic.trim()) setTopic(title.slice(0, 120));
setSavedPostId(null);
}
async function savePost(status = 'draft', scheduledAt = null) {
if (!post) return;
setPublishing(true);
@@ -330,6 +341,22 @@ export default function ChannelView({ channel }) {
</Link>
</div>
{/* Вкладки */}
<div className="flex items-center gap-0.5 rounded-lg p-0.5 bg-surface2 border border-border self-start mb-2">
{[['generate','Создать пост'],['analytics','Аналитика']].map(([id,label]) => (
<button key={id} onClick={() => setActiveTab(id)}
className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors
${activeTab===id ? 'bg-surface text-text shadow-sm' : 'text-text-soft hover:text-text'}`}>
{label}
</button>
))}
</div>
{activeTab === 'analytics' && (
<ChannelAnalytics channelId={channel.id} channelName={channel.tg_username} />
)}
{activeTab === 'generate' && <>
{/* Generator */}
<div className="card p-5 mb-6">
<div className="flex items-center justify-between mb-3 flex-wrap gap-2">
@@ -339,6 +366,13 @@ export default function ChannelView({ channel }) {
</h2>
<div className="flex items-center gap-3">
<PostTemplates onSelect={applyTemplate} disabled={generating} />
<button
onClick={() => setShowFromUrl(true)}
className="text-xs inline-flex items-center gap-1 text-accent hover:underline"
>
<Link2 className="w-3.5 h-3.5" />
По ссылке
</button>
<button
onClick={fetchIdeas}
disabled={loadingIdeas}
@@ -613,6 +647,14 @@ export default function ChannelView({ channel }) {
</div>
)}
{/* From URL modal */}
<FromUrlModal
open={showFromUrl}
channelId={channel.id}
onClose={() => setShowFromUrl(false)}
onApply={applyFromUrl}
/>
{/* Photo search modal */}
<PhotoSearchModal
open={showPhotoSearch}
@@ -709,6 +751,7 @@ export default function ChannelView({ channel }) {
</div>
</div>
)}
</> }
</main>
);
}
components/FromUrlModal.js
+191
View File
@@ -0,0 +1,191 @@
'use client';
/**
* FromUrlModal — модальное окно «URL → черновик».
* Props:
* open — bool
* channelId — number
* onClose()
* onApply({ content, imageUrl, title }) — вызывается с результатом
*/
import { useState } from 'react';
import { X, Link2, Loader2, Youtube, Globe, Send, AlertCircle } from 'lucide-react';
function detectSource(url) {
try {
const u = new URL(url);
if (u.hostname.includes('youtube.com') || u.hostname.includes('youtu.be')) return 'youtube';
if (u.hostname === 't.me') return 'telegram';
return 'web';
} catch { return 'web'; }
}
const SOURCE_ICONS = {
youtube: { Icon: Youtube, label: 'YouTube', color: 'text-red-400' },
telegram: { Icon: Send, label: 'Telegram', color: 'text-blue-400' },
web: { Icon: Globe, label: 'Сайт', color: 'text-text-mute' },
};
export default function FromUrlModal({ open, channelId, onClose, onApply }) {
const [url, setUrl] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [result, setResult] = useState(null);
const [edited, setEdited] = useState('');
if (!open) return null;
const source = detectSource(url);
const { Icon: SrcIcon, label: srcLabel, color: srcColor } = SOURCE_ICONS[source] || SOURCE_ICONS.web;
async function generate() {
if (!url.trim()) return;
setLoading(true);
setError('');
setResult(null);
try {
const res = await fetch('/api/generate/from-url', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ channelId, url: url.trim() }),
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Ошибка генерации');
setResult(data);
setEdited(data.content);
} catch (e) {
setError(e.message);
} finally {
setLoading(false);
}
}
function apply() {
if (!edited.trim()) return;
onApply({
content: edited,
imageUrl: result?.imageUrl || null,
title: result?.title || '',
});
handleClose();
}
function handleClose() {
setUrl('');
setResult(null);
setEdited('');
setError('');
onClose();
}
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
<div className="w-full max-w-lg rounded-2xl bg-surface border border-border shadow-2xl flex flex-col max-h-[90vh]">
{/* Шапка */}
<div className="flex items-center justify-between px-5 py-4 border-b border-border shrink-0">
<h2 className="font-semibold flex items-center gap-2">
<Link2 className="w-4 h-4 text-accent" />
URL → черновик
</h2>
<button onClick={handleClose} className="btn-ghost p-1.5 rounded-lg">
<X className="w-4 h-4" />
</button>
</div>
{/* Контент */}
<div className="flex flex-col gap-4 p-5 overflow-y-auto">
{/* Инпут URL */}
<div>
<label className="label">Ссылка на статью, YouTube-видео или Telegram-пост</label>
<div className="relative">
<div className={`absolute left-3 top-1/2 -translate-y-1/2 ${srcColor}`}>
<SrcIcon className="w-4 h-4" />
</div>
<input
type="url"
className="input pl-9 pr-3"
placeholder="https://..."
value={url}
onChange={e => { setUrl(e.target.value); setResult(null); setError(''); }}
disabled={loading}
onKeyDown={e => e.key === 'Enter' && !loading && generate()}
/>
</div>
{url && (
<p className="hint mt-1">Источник: {srcLabel}</p>
)}
</div>
{/* Кнопка генерации */}
{!result && (
<button
onClick={generate}
disabled={loading || !url.trim()}
className="btn-primary w-full"
>
{loading ? (
<><Loader2 className="w-4 h-4 animate-spin" /> Читаю и генерирую…</>
) : (
<><Link2 className="w-4 h-4" /> Сгенерировать пост</>
)}
</button>
)}
{/* Ошибка */}
{error && (
<div className="card p-3 text-sm text-red-400 flex items-center gap-2">
<AlertCircle className="w-4 h-4 shrink-0" /> {error}
</div>
)}
{/* Результат */}
{result && (
<>
{result.title && (
<div className="text-xs text-text-mute border-l-2 border-accent/40 pl-3 py-1">
Источник: {result.title}
</div>
)}
<div>
<label className="label">Черновик поста — отредактируй и применяй</label>
<textarea
className="input min-h-[180px] text-sm leading-relaxed"
value={edited}
onChange={e => setEdited(e.target.value)}
autoFocus
/>
<p className="hint">{edited.length} символов</p>
</div>
{result.imageUrl && (
<div>
<label className="label">Обложка из источника</label>
<img
src={result.imageUrl}
alt=""
className="w-full rounded-lg max-h-40 object-cover"
referrerPolicy="no-referrer"
onError={e => { e.target.style.display = 'none'; }}
/>
</div>
)}
<div className="flex gap-2">
<button onClick={apply} className="btn-primary flex-1">
Применить в редактор
</button>
<button onClick={() => { setResult(null); setEdited(''); }} className="btn-ghost">
Заново
</button>
</div>
</>
)}
</div>
</div>
</div>
);
}