feat: add finance module UI

- Finance.jsx: main page with tabs (Dashboard/Transactions/Analytics)
- FinanceDashboard: balance card, top categories, pie chart, daily line chart
- TransactionList: filtered list with search, type/category filters
- AddTransactionModal: bottom sheet with quick templates
- FinanceAnalytics: bar chart, donut chart, monthly trend
- finance.js: API layer
- Navigation: added Wallet icon for Finance
- App.jsx: added /finance route

Design matches Storybook mockups (glassmorphism, Deep Teal palette)

src/components/finance/FinanceDashboard.jsx

@@ -0,0 +1,201 @@
+import { useState, useEffect } from "react"
+import {
+  PieChart, Pie, Cell, LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer,
+} from "recharts"
+import { financeApi } from "../../api/finance"
+
+const COLORS = [
+  "#0D4F4F", "#F7B538", "#6366f1", "#22c55e", "#ef4444",
+  "#8b5cf6", "#0ea5e9", "#f97316", "#ec4899", "#14b8a6",
+  "#64748b", "#a855f7", "#78716c",
+]
+
+const fmt = (n) => Number(n).toLocaleString("ru-RU") + " ₽"
+
+export default function FinanceDashboard() {
+  const [summary, setSummary] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const now = new Date()
+    financeApi
+      .getSummary({ month: now.getMonth() + 1, year: now.getFullYear() })
+      .then(setSummary)
+      .catch(console.error)
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="card p-6 animate-pulse">
+            <div className="h-8 bg-gray-200 dark:bg-gray-800 rounded w-1/2" />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  if (!summary || (summary.total_income === 0 && summary.total_expense === 0)) {
+    return (
+      <div className="card p-12 text-center">
+        <span className="text-5xl block mb-4">📊</span>
+        <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">
+          Нет данных
+        </h3>
+        <p className="text-gray-500 dark:text-gray-400">
+          Добавьте первую транзакцию
+        </p>
+      </div>
+    )
+  }
+
+  const expenseCategories = summary.by_category.filter((c) => c.type === "expense")
+  const pieData = expenseCategories.map((c) => ({
+    name: c.category_emoji + " " + c.category_name,
+    value: c.amount,
+  }))
+  const dailyData = summary.daily.map((d) => ({
+    day: d.date.slice(8, 10),
+    amount: d.amount,
+  }))
+
+  return (
+    <div className="space-y-6">
+      {/* Balance Card */}
+      <div className="card p-6 bg-gradient-to-br from-primary-950 to-primary-800 text-white">
+        <p className="text-sm opacity-70">Баланс за месяц</p>
+        <p className="text-3xl font-bold mt-1">{fmt(summary.balance)}</p>
+        <div className="flex gap-6 mt-4">
+          <div>
+            <p className="text-xs opacity-60">Доходы</p>
+            <p className="text-lg font-semibold text-green-300">
+              +{fmt(summary.total_income)}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs opacity-60">Расходы</p>
+            <p className="text-lg font-semibold text-red-300">
+              -{fmt(summary.total_expense)}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Top Categories */}
+      {expenseCategories.length > 0 && (
+        <div className="card p-5">
+          <h3 className="font-display font-bold text-gray-900 dark:text-white mb-4">
+            Топ расходов
+          </h3>
+          <div className="space-y-3">
+            {expenseCategories.slice(0, 5).map((c, i) => (
+              <div key={i} className="flex items-center gap-3">
+                <span className="text-xl w-8 text-center">
+                  {c.category_emoji}
+                </span>
+                <div className="flex-1">
+                  <div className="flex justify-between mb-1">
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                      {c.category_name}
+                    </span>
+                    <span className="text-sm font-semibold text-gray-900 dark:text-white">
+                      {fmt(c.amount)}
+                    </span>
+                  </div>
+                  <div className="h-2 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
+                    <div
+                      className="h-full rounded-full"
+                      style={{
+                        width: Math.round(c.percentage) + "%",
+                        backgroundColor: COLORS[i % COLORS.length],
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Donut Chart */}
+      {pieData.length > 0 && (
+        <div className="card p-5">
+          <h3 className="font-display font-bold text-gray-900 dark:text-white mb-4">
+            По категориям
+          </h3>
+          <div className="flex items-center gap-4">
+            <div className="w-40 h-40">
+              <ResponsiveContainer>
+                <PieChart>
+                  <Pie
+                    data={pieData}
+                    innerRadius={40}
+                    outerRadius={70}
+                    dataKey="value"
+                    stroke="none"
+                  >
+                    {pieData.map((_, i) => (
+                      <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                    ))}
+                  </Pie>
+                  <Tooltip formatter={(v) => fmt(v)} />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+            <div className="flex-1 space-y-1">
+              {pieData.slice(0, 6).map((c, i) => (
+                <div key={i} className="flex items-center gap-2 text-xs">
+                  <div
+                    className="w-2.5 h-2.5 rounded-full"
+                    style={{ backgroundColor: COLORS[i] }}
+                  />
+                  <span className="text-gray-600 dark:text-gray-400 truncate">
+                    {c.name}
+                  </span>
+                  <span className="ml-auto font-medium text-gray-900 dark:text-white">
+                    {Math.round(
+                      (c.value / summary.total_expense) * 100
+                    )}
+                    %
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Daily Line Chart */}
+      {dailyData.length > 0 && (
+        <div className="card p-5">
+          <h3 className="font-display font-bold text-gray-900 dark:text-white mb-4">
+            Расходы по дням
+          </h3>
+          <div className="h-48">
+            <ResponsiveContainer>
+              <LineChart data={dailyData}>
+                <XAxis dataKey="day" tick={{ fontSize: 12 }} stroke="#94a3b8" />
+                <YAxis
+                  tick={{ fontSize: 10 }}
+                  stroke="#94a3b8"
+                  tickFormatter={(v) => v / 1000 + "к"}
+                />
+                <Tooltip formatter={(v) => fmt(v)} />
+                <Line
+                  type="monotone"
+                  dataKey="amount"
+                  stroke="#0D4F4F"
+                  strokeWidth={2}
+                  dot={{ r: 4, fill: "#0D4F4F" }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}