forked from admin/zeropost-tool
feat: spending — 2 separate provider blocks side by side
This commit is contained in:
Nik (Claude)
+65
-60
@@ -339,67 +339,72 @@ function SpendingSection() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* По провайдерам — крупные карточки */}
|
{/* 2 отдельных блока — aiprimetech и routerai */}
|
||||||
{(() => {
|
<div className="grid grid-cols-2 gap-4">
|
||||||
const providers = [
|
{/* aiprimetech — текст */}
|
||||||
{ key: 'aiprimetech', label: 'aiprimetech.io', icon: '💬', desc: 'Текст — статьи и посты', color: 'text-blue-400', bg: 'bg-blue-500/10', border: 'border-blue-500/20' },
|
{(() => {
|
||||||
{ key: 'routerai', label: 'routerai.ru', icon: '🖼', desc: 'Картинки к постам', color: 'text-purple-400', bg: 'bg-purple-500/10', border: 'border-purple-500/20' },
|
const d = byProv?.breakdown?.find(b => b.key === 'aiprimetech');
|
||||||
];
|
const rub = Number(d?.cost_rub || 0);
|
||||||
const totalRub = providers.reduce((sum, p) => {
|
return (
|
||||||
const d = byProv?.breakdown?.find(b => b.key === p.key);
|
<div className="card p-5 border border-blue-500/20 bg-blue-500/5 space-y-4">
|
||||||
return sum + Number(d?.cost_rub || 0);
|
<div className="flex items-center gap-3">
|
||||||
}, 0);
|
<div className="w-10 h-10 rounded-xl bg-blue-500/20 flex items-center justify-center text-xl">💬</div>
|
||||||
return (
|
<div>
|
||||||
<div className="space-y-3">
|
<div className="font-semibold text-sm text-blue-400">aiprimetech.io</div>
|
||||||
<div className="text-xs text-gray-500 uppercase tracking-wide font-medium">Расходы по провайдерам</div>
|
<div className="text-xs text-gray-400">Текст — статьи и посты</div>
|
||||||
{providers.map(({ key, label, icon, desc, color, bg, border }) => {
|
|
||||||
const d = byProv?.breakdown?.find(b => b.key === key);
|
|
||||||
const rub = Number(d?.cost_rub || 0);
|
|
||||||
const pct = totalRub > 0 ? Math.round(rub / totalRub * 100) : 0;
|
|
||||||
const vol = key === 'routerai'
|
|
||||||
? `${fmtI(d?.image_count || 0)} картинок`
|
|
||||||
: `${fmtI((d?.prompt_tokens||0)+(d?.completion_tokens||0))} токенов`;
|
|
||||||
return (
|
|
||||||
<div key={key} className={`card p-5 border ${border} ${bg}`}>
|
|
||||||
<div className="flex items-start justify-between mb-3">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<span className="text-2xl">{icon}</span>
|
|
||||||
<div>
|
|
||||||
<div className={`font-semibold text-sm ${color}`}>{label}</div>
|
|
||||||
<div className="text-xs text-gray-400 mt-0.5">{desc}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<div className={`text-2xl font-bold ${color}`}>₽ {fmt(rub)}</div>
|
|
||||||
<div className="text-xs text-gray-500 mt-0.5">{pct}% от общего</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Прогресс-бар */}
|
|
||||||
<div className="h-1.5 bg-surface2 rounded-full mb-3">
|
|
||||||
<div className={`h-1.5 rounded-full ${color.replace('text-','bg-')}`}
|
|
||||||
style={{ width: `${pct}%` }} />
|
|
||||||
</div>
|
|
||||||
{/* Метрики */}
|
|
||||||
<div className="grid grid-cols-3 gap-3 text-xs">
|
|
||||||
<div className="bg-surface2/50 rounded-lg p-2 text-center">
|
|
||||||
<div className="font-bold text-base text-gray-200">{fmtI(d?.calls)}</div>
|
|
||||||
<div className="text-gray-500 mt-0.5">запросов</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-surface2/50 rounded-lg p-2 text-center">
|
|
||||||
<div className={`font-bold text-base ${(d?.failed||0) > 0 ? 'text-red-400' : 'text-gray-200'}`}>{d?.failed||0}</div>
|
|
||||||
<div className="text-gray-500 mt-0.5">ошибок</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-surface2/50 rounded-lg p-2 text-center">
|
|
||||||
<div className="font-bold text-sm text-gray-200">{vol}</div>
|
|
||||||
<div className="text-gray-500 mt-0.5">объём</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
})}
|
<div className="text-3xl font-bold text-blue-400">₽ {fmt(rub)}</div>
|
||||||
</div>
|
<div className="grid grid-cols-3 gap-2 text-xs">
|
||||||
);
|
<div className="bg-surface2/60 rounded-lg p-2.5 text-center">
|
||||||
})()}
|
<div className="font-bold text-lg text-gray-200">{fmtI(d?.calls)}</div>
|
||||||
|
<div className="text-gray-500 mt-0.5">запросов</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-surface2/60 rounded-lg p-2.5 text-center">
|
||||||
|
<div className={`font-bold text-lg ${(d?.failed||0) > 0 ? 'text-red-400' : 'text-gray-200'}`}>{d?.failed||0}</div>
|
||||||
|
<div className="text-gray-500 mt-0.5">ошибок</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-surface2/60 rounded-lg p-2.5 text-center">
|
||||||
|
<div className="font-bold text-sm text-gray-200">{fmtI((d?.prompt_tokens||0)+(d?.completion_tokens||0))}</div>
|
||||||
|
<div className="text-gray-500 mt-0.5">токенов</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
|
||||||
|
{/* routerai — картинки */}
|
||||||
|
{(() => {
|
||||||
|
const d = byProv?.breakdown?.find(b => b.key === 'routerai');
|
||||||
|
const rub = Number(d?.cost_rub || 0);
|
||||||
|
return (
|
||||||
|
<div className="card p-5 border border-purple-500/20 bg-purple-500/5 space-y-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-purple-500/20 flex items-center justify-center text-xl">🖼</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-sm text-purple-400">routerai.ru</div>
|
||||||
|
<div className="text-xs text-gray-400">Картинки к постам</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl font-bold text-purple-400">₽ {fmt(rub)}</div>
|
||||||
|
<div className="grid grid-cols-3 gap-2 text-xs">
|
||||||
|
<div className="bg-surface2/60 rounded-lg p-2.5 text-center">
|
||||||
|
<div className="font-bold text-lg text-gray-200">{fmtI(d?.calls)}</div>
|
||||||
|
<div className="text-gray-500 mt-0.5">запросов</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-surface2/60 rounded-lg p-2.5 text-center">
|
||||||
|
<div className={`font-bold text-lg ${(d?.failed||0) > 0 ? 'text-red-400' : 'text-gray-200'}`}>{d?.failed||0}</div>
|
||||||
|
<div className="text-gray-500 mt-0.5">ошибок</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-surface2/60 rounded-lg p-2.5 text-center">
|
||||||
|
<div className="font-bold text-lg text-gray-200">{fmtI(d?.image_count||0)}</div>
|
||||||
|
<div className="text-gray-500 mt-0.5">картинок</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Таблица по операциям */}
|
{/* Таблица по операциям */}
|
||||||
<div className="card overflow-hidden">
|
<div className="card overflow-hidden">
|
||||||
|
|||||||
Reference in New Issue
Block a user