From 3815ac767cf0a622f7488e9f81105968a7e9ee1b Mon Sep 17 00:00:00 2001
From: "Nik (Claude)" <nik@zeroday.su>
Date: Tue, 16 Jun 2026 14:08:36 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20spending=20=E2=80=94=20beautiful=20prov?=
 =?UTF-8?q?ider=20cards=20with=20progress=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AdminPanel.js | 116 ++++++++++++++++++++-------------------
 1 file changed, 59 insertions(+), 57 deletions(-)

diff --git a/components/AdminPanel.js b/components/AdminPanel.js
index b207794..cb0103e 100644
--- a/components/AdminPanel.js
+++ b/components/AdminPanel.js
@@ -339,65 +339,67 @@ function SpendingSection() {
           ))}
         </div>
 
-        {/* По провайдерам */}
-        <div className="grid grid-cols-2 gap-3">
-          {[
-            { key: 'aiprimetech', label: 'aiprimetech.io', icon: '💬', desc: 'Текст' },
-            { key: 'routerai',    label: 'routerai.ru',    icon: '🖼', desc: 'Картинки' },
-          ].map(({ key, label, icon, desc }) => {
-            const d = byProv?.breakdown?.find(b => b.key === key);
-            return (
-              <div key={key} className="card p-4">
-                <div className="flex items-center gap-2 mb-2">
-                  <span className="text-lg">{icon}</span>
-                  <div>
-                    <div className="font-medium text-sm">{label}</div>
-                    <div className="text-xs text-gray-500">{desc}</div>
+        {/* По провайдерам — крупные карточки */}
+        {(() => {
+          const providers = [
+            { 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 totalRub = providers.reduce((sum, p) => {
+            const d = byProv?.breakdown?.find(b => b.key === p.key);
+            return sum + Number(d?.cost_rub || 0);
+          }, 0);
+          return (
+            <div className="space-y-3">
+              <div className="text-xs text-gray-500 uppercase tracking-wide font-medium">Расходы по провайдерам</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 className="ml-auto text-accent font-bold">₽ {fmt(d?.cost_rub)}</div>
-                </div>
-                <div className="grid grid-cols-3 gap-1 text-xs text-gray-400">
-                  <div><div className="font-medium text-gray-200">{fmtI(d?.calls)}</div>запросов</div>
-                  <div><div className="font-medium text-red-400">{d?.failed||0}</div>ошибок</div>
-                  <div><div className="font-medium text-gray-200">{fmtI(d?.image_count || (d?.prompt_tokens||0)+(d?.completion_tokens||0))}</div>{key==='routerai'?'картинок':'токенов'}</div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-
-        {/* Все провайдеры (включая fallback) */}
-        {byProv?.breakdown?.length > 2 && (
-          <div className="card overflow-hidden">
-            <div className="px-4 py-3 bg-surface2 text-xs text-gray-400 font-medium uppercase tracking-wide">
-              Все провайдеры
+                );
+              })}
             </div>
-            <table className="w-full text-sm">
-              <thead className="text-xs text-gray-500 bg-surface2/50">
-                <tr>
-                  <th className="px-4 py-2 text-left">Провайдер</th>
-                  <th className="px-4 py-2 text-right">Запросов</th>
-                  <th className="px-4 py-2 text-right">Ошибок</th>
-                  <th className="px-4 py-2 text-right">Объём</th>
-                  <th className="px-4 py-2 text-right">Стоимость</th>
-                </tr>
-              </thead>
-              <tbody>
-                {byProv.breakdown.map((row, i) => (
-                  <tr key={i} className="border-t border-border hover:bg-surface2/50">
-                    <td className="px-4 py-2.5 font-medium">{row.key}</td>
-                    <td className="px-4 py-2.5 text-right text-gray-300">{fmtI(row.calls)}</td>
-                    <td className="px-4 py-2.5 text-right text-red-400">{row.failed||0}</td>
-                    <td className="px-4 py-2.5 text-right text-gray-400 text-xs">
-                      {row.image_count > 0 ? `${row.image_count} шт.` : fmtI((row.prompt_tokens||0)+(row.completion_tokens||0))}
-                    </td>
-                    <td className="px-4 py-2.5 text-right font-medium text-accent">₽ {fmt(row.cost_rub)}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
+          );
+        })()}
 
         {/* Таблица по операциям */}
         <div className="card overflow-hidden">