fix: savings widget uses /savings/categories API directly

src/app/api/savings/route.ts

@@ -19,36 +19,32 @@ async function getAccessToken(): Promise<string> {
 export async function GET() {
   try {
     const token = await getAccessToken();
-    
-    const res = await fetch(`${PULSE_API}/finance/transactions?limit=200&type=expense`, {
+
+    const res = await fetch(`${PULSE_API}/savings/categories`, {
       headers: { Authorization: `Bearer ${token}` },
       signal: AbortSignal.timeout(8000),
     });
-    const txs = await res.json();
-    
-    // Группируем накопления по цели
-    const groups: Record<string, number> = {};
-    for (const t of txs) {
-      if (t.category_emoji === "💎") {
-        // Нормализуем название
-        const desc = t.description as string;
-        let key = "Другое";
-        if (desc.toLowerCase().includes("квартир")) key = "🏠 Квартира";
-        else if (desc.toLowerCase().includes("отпуск") || desc.toLowerCase().includes("путешеств")) key = "✈️ Отпуск";
-        else if (desc.toLowerCase().includes("машин") || desc.toLowerCase().includes("авто")) key = "🚗 Машина";
-        else key = desc;
-        groups[key] = (groups[key] || 0) + (t.amount as number);
-      }
-    }
-    
-    const goals = Object.entries(groups)
-      .map(([name, amount]) => ({ name, amount }))
-      .sort((a, b) => b.amount - a.amount);
-    
-    const total = goals.reduce((s, g) => s + g.amount, 0);
-    
-    return NextResponse.json({ goals, total });
+    const categories = await res.json();
+
+    const items = (Array.isArray(categories) ? categories : [])
+      .filter((c: any) => !c.is_closed && c.current_amount > 0)
+      .map((c: any) => ({
+        id: c.id,
+        name: c.name,
+        amount: c.current_amount as number,
+        isDeposit: c.is_deposit as boolean,
+        isAccount: c.is_account as boolean,
+        isMulti: c.is_multi as boolean,
+        interestRate: c.interest_rate as number,
+        depositEndDate: c.deposit_end_date as string | null,
+        targetAmount: c.final_amount > 0 ? c.final_amount : null,
+      }))
+      .sort((a: any, b: any) => b.amount - a.amount);
+
+    const total = items.reduce((s: number, i: any) => s + i.amount, 0);
+
+    return NextResponse.json({ items, total });
   } catch (e) {
-    return NextResponse.json({ error: String(e), goals: [], total: 0 }, { status: 500 });
+    return NextResponse.json({ error: String(e), items: [], total: 0 }, { status: 500 });
   }
 }

src/components/widgets/SavingsWidget.tsx

@@ -1,27 +1,48 @@
 "use client";
 import { useEffect, useState, useCallback } from "react";
-import { RefreshCw, PiggyBank } from "lucide-react";
+import { RefreshCw, TrendingUp, Wallet, PiggyBank } from "lucide-react";
 
-interface Goal {
+interface SavingsItem {
+  id: number;
   name: string;
   amount: number;
+  isDeposit: boolean;
+  isAccount: boolean;
+  isMulti: boolean;
+  interestRate: number;
+  depositEndDate: string | null;
+  targetAmount: number | null;
 }
 
 interface SavingsData {
-  goals: Goal[];
+  items: SavingsItem[];
   total: number;
   error?: string;
 }
 
 function formatMoney(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(2).replace(/\.?0+$/, "") + " М ₽";
   return n.toLocaleString("ru-RU") + " ₽";
 }
 
-// Целевые суммы (максимум для прогресс-бара)
-const TARGETS: Record<string, number> = {
-  "🏠 Квартира": 500000,
-  "✈️ Отпуск": 200000,
-};
+function getIcon(item: SavingsItem) {
+  if (item.isDeposit) return "🏦";
+  if (item.isAccount) return "💳";
+  return "🐷";
+}
+
+function getColor(item: SavingsItem, index: number): string {
+  const colors = ["#6366f1", "#f59e0b", "#10b981", "#06b6d4", "#8b5cf6", "#f43f5e"];
+  if (item.isDeposit) return "#f59e0b";
+  if (item.isAccount) return "#06b6d4";
+  return colors[index % colors.length];
+}
+
+function getBadge(item: SavingsItem): string | null {
+  if (item.isDeposit && item.interestRate > 0) return `${item.interestRate}%`;
+  if (item.isMulti) return "общая";
+  return null;
+}
 
 export function SavingsWidget() {
   const [data, setData] = useState<SavingsData | null>(null);
@@ -33,7 +54,7 @@ export function SavingsWidget() {
       const res = await fetch("/api/savings", { cache: "no-store" });
       setData(await res.json());
     } catch {
-      setData({ goals: [], total: 0, error: "Ошибка загрузки" });
+      setData({ items: [], total: 0, error: "Ошибка загрузки" });
     } finally {
       setLoading(false);
     }
@@ -43,6 +64,7 @@ export function SavingsWidget() {
 
   return (
     <div className="card p-5 space-y-4" style={{ borderTop: "2px solid #10b981" }}>
+      {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: "rgba(16,185,129,0.15)" }}>
@@ -56,46 +78,64 @@ export function SavingsWidget() {
       </div>
 
       {loading ? (
-        <div className="space-y-3 animate-pulse">
-          {[1, 2].map(i => <div key={i} className="h-12 bg-white/5 rounded-xl" />)}
+        <div className="space-y-2 animate-pulse">
+          {[1,2,3,4].map(i => <div key={i} className="h-10 bg-white/5 rounded-xl" />)}
         </div>
       ) : data?.error ? (
         <div className="text-xs text-slate-600 text-center py-4">{data.error}</div>
       ) : (
         <>
-          {/* Total */}
+          {/* Итого */}
           <div className="flex justify-between items-center py-2 px-3 rounded-xl" style={{ background: "rgba(16,185,129,0.08)" }}>
-            <span className="text-xs text-slate-400">Итого накоплено</span>
+            <span className="text-xs text-slate-400">Всего накоплено</span>
             <span className="text-base font-bold text-white">{formatMoney(data?.total || 0)}</span>
           </div>
 
-          {/* Goals */}
-          <div className="space-y-3">
-            {(data?.goals || []).map(goal => {
-              const target = TARGETS[goal.name];
-              const pct = target ? Math.min(100, (goal.amount / target) * 100) : null;
-              const color = goal.name.includes("Квартир") ? "#6366f1" :
-                            goal.name.includes("Отпуск") ? "#f59e0b" : "#10b981";
+          {/* Категории */}
+          <div className="space-y-2">
+            {(data?.items || []).map((item, i) => {
+              const color = getColor(item, i);
+              const badge = getBadge(item);
+              const pct = item.targetAmount ? Math.min(100, (item.amount / item.targetAmount) * 100) : null;
+
               return (
-                <div key={goal.name} className="space-y-1.5">
-                  <div className="flex justify-between text-xs">
-                    <span className="text-slate-300">{goal.name}</span>
-                    <div className="flex items-center gap-1.5">
-                      <span className="text-white font-medium">{formatMoney(goal.amount)}</span>
-                      {target && <span className="text-slate-600">/ {formatMoney(target)}</span>}
-                    </div>
+                <div key={item.id} className="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors hover:bg-white/3">
+                  {/* Icon */}
+                  <div className="w-8 h-8 rounded-lg flex items-center justify-center text-base flex-shrink-0"
+                    style={{ background: `${color}18` }}>
+                    {getIcon(item)}
                   </div>
-                  {pct !== null && (
-                    <div className="h-1.5 rounded-full" style={{ background: "rgba(255,255,255,0.06)" }}>
-                      <div
-                        className="h-full rounded-full transition-all duration-700"
-                        style={{ width: `${pct}%`, background: color, boxShadow: `0 0 8px ${color}50` }}
-                      />
+
+                  {/* Name + badge */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-sm text-slate-200 truncate">{item.name}</span>
+                      {badge && (
+                        <span className="text-[10px] px-1.5 py-0.5 rounded-md flex-shrink-0"
+                          style={{ background: `${color}20`, color }}>
+                          {badge}
+                        </span>
+                      )}
                     </div>
-                  )}
-                  {target && (
-                    <div className="text-[10px] text-slate-600 text-right">{pct?.toFixed(0)}% от цели</div>
-                  )}
+                    {/* Прогресс-бар если есть цель */}
+                    {pct !== null && (
+                      <div className="mt-1 h-1 rounded-full" style={{ background: "rgba(255,255,255,0.06)" }}>
+                        <div className="h-full rounded-full transition-all duration-700"
+                          style={{ width: `${pct}%`, background: color }} />
+                      </div>
+                    )}
+                    {/* Дата окончания вклада */}
+                    {item.depositEndDate && (
+                      <div className="text-[10px] text-slate-600 mt-0.5">
+                        до {new Date(item.depositEndDate).toLocaleDateString("ru-RU", { day: "numeric", month: "short", year: "numeric" })}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Amount */}
+                  <span className="text-sm font-semibold text-white flex-shrink-0">
+                    {formatMoney(item.amount)}
+                  </span>
                 </div>
               );
             })}