Merge pull request 'ci: add eslint, vitest coverage, improved CI and deploy workflows' (#2) from dev into main

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitea/workflows/ci.yml

@@ -2,10 +2,12 @@ name: CI
 
 on:
   push:
-    branches: [dev]
+    branches-ignore: [main]
+  pull_request:
+    branches: [main]
 
 jobs:
-  ci:
+  lint-test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -18,10 +20,12 @@ jobs:
         run: npm ci
 
       - name: Lint
-        run: npx eslint src/ --ext .js,.jsx,.ts,.tsx --max-warnings 0 || true
+        run: npx eslint src/ --max-warnings 0
 
       - name: Test
-        run: npx vitest run --reporter=verbose
+        run: npx vitest run --coverage --reporter=verbose
 
-      - name: Build
+      - name: Coverage Check
-        run: npm run build
+        run: |
+          npx vitest run --coverage 2>&1 | tee coverage-output.txt
+          echo "Coverage report generated"

.gitea/workflows/deploy-prod.yml

@@ -1,4 +1,4 @@
-name: Deploy Production
+name: Deploy
 
 on:
   push:
@@ -8,14 +8,18 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - name: Deploy pulse-web
-
+        run: |
-      - uses: actions/setup-node@v4
+          cd /opt/digital-home/pulse-web
-        with:
+          docker compose pull
-          node-version: '20'
+          docker compose up -d --build
-
+          echo "Waiting for container..."
-      - name: Install dependencies
+          sleep 5
-        run: npm ci
+          STATUS=$(docker inspect --format='{{.State.Status}}' pulse-web 2>/dev/null || echo "unknown")
-
+          echo "Container status: $STATUS"
-      - name: Build
+          if [ "$STATUS" != "running" ]; then
-        run: npm run build
+            echo "::error::Container is not running after deploy"
+            docker logs pulse-web --tail=20
+            exit 1
+          fi
+          echo "Deploy successful!"

package.json

@@ -35,7 +35,12 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^4.1.2",
     "autoprefixer": "^10.4.17",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
     "jsdom": "^28.1.0",
     "postcss": "^8.4.33",
     "storybook": "^8.5.0",

src/components/finance/FinanceAnalytics.jsx

@@ -1,32 +1,83 @@
 import { useState, useEffect } from "react"
 import {
   BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer,
-  PieChart, Pie, Cell, LineChart, Line,
+  PieChart, Pie, Cell, LineChart, Line, LabelList,
 } from "recharts"
 import { financeApi } from "../../api/finance"
 
-const COLORS = [
+const CATEGORY_COLORS = {
-  "#0D4F4F", "#F7B538", "#6366f1", "#22c55e", "#ef4444",
+  "Жильё": "#ef4444",
-  "#8b5cf6", "#0ea5e9", "#f97316", "#ec4899", "#14b8a6",
+  "Еда": "#f97316",
-  "#64748b", "#a855f7", "#78716c",
+  "Транспорт": "#6366f1",
+  "Одежда": "#8b5cf6",
+  "Здоровье": "#22c55e",
+  "Развлечения": "#ec4899",
+  "Связь / Подписки": "#0ea5e9",
+  "Путешествия": "#14b8a6",
+  "Подарки": "#a855f7",
+  "Бытовое": "#64748b",
+  "Маркетплейсы": "#F7B538",
+  "Накопления": "#0D4F4F",
+  "Другое": "#78716c",
+  "Красота": "#f472b6",
+}
+
+const COLORS_FALLBACK = [
+  "#6366f1", "#22c55e", "#ef4444", "#f97316", "#8b5cf6",
+  "#0ea5e9", "#ec4899", "#14b8a6", "#64748b", "#a855f7",
 ]
 
+const getColor = (name, i) => {
+  const clean = name.replace(/^[\p{Emoji}\s]+/u, "").trim()
+  return CATEGORY_COLORS[clean] || COLORS_FALLBACK[i % COLORS_FALLBACK.length]
+}
+
 const fmt = (n) => Number(n).toLocaleString("ru-RU") + " ₽"
+const fmtShort = (n) => {
+  if (n >= 1000) return Math.round(n / 1000).toLocaleString("ru-RU") + "к"
+  return n.toLocaleString("ru-RU")
+}
 
 const MONTH_NAMES = [
   "", "Янв", "Фев", "Мар", "Апр", "Май", "Июн",
   "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек",
 ]
 
+const SAVINGS_NAMES = ["накопления"]
+
+const CustomTooltip = ({ active, payload, label }) => {
+  if (!active || !payload?.length) return null
+  return (
+    <div className="bg-gray-900 text-white text-xs px-3 py-2 rounded-lg shadow-lg">
+      {payload.map((p, i) => (
+        <div key={i}>
+          <span className="font-medium">{p.name || label}: </span>
+          <span>{fmt(p.value)}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const BarLabel = ({ x, y, width, height, value }) => {
+  if (!value) return null
+  return (
+    <text x={x + width + 6} y={y + height / 2} dy={4} fontSize={11} fill="#94a3b8">
+      {fmtShort(value)}
+    </text>
+  )
+}
+
 export default function FinanceAnalytics({ month, year }) {
   const [analytics, setAnalytics] = useState(null)
   const [summary, setSummary] = useState(null)
   const [loading, setLoading] = useState(true)
+  const [showSavings, setShowSavings] = useState(false)
 
   useEffect(() => {
     setLoading(true)
     Promise.all([
-      financeApi.getAnalytics({ months: 6 }),
+      financeApi.getAnalytics({ months: 6, month, year }),
       financeApi.getSummary({ month, year }),
     ])
       .then(([a, s]) => {
@@ -51,15 +102,33 @@ export default function FinanceAnalytics({ month, year }) {
 
   if (!analytics || !summary) return null
 
-  const expenseCategories = (summary.by_category || []).filter(
+  const allExpenseCategories = (summary.by_category || []).filter(
     (c) => c.type === "expense"
   )
-  const barData = expenseCategories.map((c) => ({
+  const isSavings = (c) =>
-    name: c.category_emoji + " " + c.category_name,
+    SAVINGS_NAMES.includes(c.category_name?.toLowerCase?.())
-    value: c.amount,
+  
-  }))
+  const expenseCategories = showSavings
+    ? allExpenseCategories
+    : allExpenseCategories.filter((c) => !isSavings(c))
+  
+  const hasSavings = allExpenseCategories.some(isSavings)
+
+  const barData = expenseCategories
+    .sort((a, b) => b.amount - a.amount)
+    .map((c, i) => ({
+      name: (c.category_emoji || "") + " " + c.category_name,
+      shortName: c.category_name?.length > 10
+        ? c.category_name.slice(0, 10) + "…"
+        : c.category_name,
+      value: c.amount,
+      fill: getColor(c.category_name, i),
+    }))
+
   const pieData = barData
 
+  const filteredTotal = expenseCategories.reduce((s, c) => s + c.amount, 0)
+
   const monthlyData = (analytics.monthly_trend || []).map((m) => ({
     month: MONTH_NAMES[parseInt(m.month.slice(5))] || m.month,
     income: m.income,
@@ -67,8 +136,10 @@ export default function FinanceAnalytics({ month, year }) {
   }))
 
   const comp = analytics.comparison_prev_month
-  const diffPct = Math.abs(Math.round(comp.diff_percent))
+  const diffPct = Math.abs(Math.round(comp?.diff_percent || 0))
-  const isUp = comp.diff_percent > 0
+  const isUp = (comp?.diff_percent || 0) > 0
+
+  const barChartHeight = Math.max(400, barData.length * 44)
 
   return (
     <div className="space-y-6">
@@ -98,30 +169,41 @@ export default function FinanceAnalytics({ month, year }) {
 
       {barData.length > 0 && (
         <div className="card p-5">
-          <h3 className="font-display font-bold text-gray-900 dark:text-white mb-4">
+          <div className="flex items-center justify-between mb-4">
-            Расходы по категориям
+            <h3 className="font-display font-bold text-gray-900 dark:text-white">
-          </h3>
+              Расходы по категориям
-          <div className="h-64">
+            </h3>
+            {hasSavings && (
+              <button
+                onClick={() => setShowSavings(!showSavings)}
+                className="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
+              >
+                {showSavings ? "Скрыть" : "Показать"} накопления
+              </button>
+            )}
+          </div>
+          <div style={{ height: barChartHeight }}>
             <ResponsiveContainer>
-              <BarChart data={barData} layout="vertical" margin={{ left: 10 }}>
+              <BarChart data={barData} layout="vertical" margin={{ left: 0, right: 50 }}>
                 <XAxis
                   type="number"
                   tick={{ fontSize: 10 }}
                   stroke="#94a3b8"
-                  tickFormatter={(v) => v / 1000 + "к"}
+                  tickFormatter={fmtShort}
                 />
                 <YAxis
                   type="category"
                   dataKey="name"
                   tick={{ fontSize: 11 }}
                   stroke="#94a3b8"
-                  width={120}
+                  width={130}
                 />
-                <Tooltip formatter={(v) => fmt(v)} />
+                <Tooltip content={<CustomTooltip />} />
-                <Bar dataKey="value" radius={[0, 6, 6, 0]}>
+                <Bar dataKey="value" radius={[0, 6, 6, 0]} barSize={24}>
-                  {barData.map((_, i) => (
+                  {barData.map((entry, i) => (
-                    <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                    <Cell key={i} fill={entry.fill} />
                   ))}
+                  <LabelList content={<BarLabel />} />
                 </Bar>
               </BarChart>
             </ResponsiveContainer>
@@ -145,29 +227,28 @@ export default function FinanceAnalytics({ month, year }) {
                     dataKey="value"
                     stroke="none"
                   >
-                    {pieData.map((_, i) => (
+                    {pieData.map((entry, i) => (
-                      <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                      <Cell key={i} fill={entry.fill} />
                     ))}
                   </Pie>
-                  <Tooltip formatter={(v) => fmt(v)} />
+                  <Tooltip content={<CustomTooltip />} />
                 </PieChart>
               </ResponsiveContainer>
             </div>
-            <div className="space-y-1.5 pt-2">
+            <div className="space-y-1.5 pt-2 min-w-0 flex-1">
               {pieData.map((c, i) => (
                 <div key={i} className="flex items-center gap-2 text-xs">
                   <div
                     className="w-2.5 h-2.5 rounded-full flex-shrink-0"
-                    style={{ backgroundColor: COLORS[i] }}
+                    style={{ backgroundColor: c.fill }}
                   />
-                  <span className="text-gray-600 dark:text-gray-400 truncate max-w-[100px]">
+                  <span className="text-gray-600 dark:text-gray-400 truncate">
                     {c.name}
                   </span>
-                  <span className="ml-auto font-semibold text-gray-900 dark:text-white">
+                  <span className="ml-auto font-semibold text-gray-900 dark:text-white whitespace-nowrap">
                     {Math.round(
-                      (c.value / summary.total_expense) * 100
+                      (c.value / filteredTotal) * 100
-                    )}
+                    )}%
-                    %
                   </span>
                 </div>
               ))}
@@ -192,9 +273,9 @@ export default function FinanceAnalytics({ month, year }) {
                 <YAxis
                   tick={{ fontSize: 10 }}
                   stroke="#94a3b8"
-                  tickFormatter={(v) => v / 1000 + "к"}
+                  tickFormatter={fmtShort}
                 />
-                <Tooltip formatter={(v) => fmt(v)} />
+                <Tooltip content={<CustomTooltip />} />
                 <Line
                   type="monotone"
                   dataKey="income"

src/components/finance/FinanceDashboard.jsx

@@ -37,7 +37,7 @@ export default function FinanceDashboard({ month, year }) {
     )
   }
 
-  if (!summary || (summary.total_income === 0 && summary.total_expense === 0)) {
+  if (!summary || (summary.total_income === 0 && summary.total_expense === 0 && (summary.carried_over || 0) === 0)) {
     return (
       <div className="card p-12 text-center">
         <span className="text-5xl block mb-4">📊</span>
@@ -64,7 +64,12 @@ export default function FinanceDashboard({ month, year }) {
   return (
     <div className="space-y-6">
       <div className="card p-6 bg-gradient-to-br from-primary-950 to-primary-800 text-white">
-        <p className="text-sm opacity-70">Баланс за месяц</p>
+        {summary.carried_over !== 0 && (
+          <p className="text-xs opacity-60 mb-1">
+            Остаток с прошлого месяца: <span className={summary.carried_over > 0 ? "text-green-300" : "text-red-300"}>{fmt(summary.carried_over)}</span>
+          </p>
+        )}
+        <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>

vitest.config.js

@@ -7,5 +7,23 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: './src/__tests__/setup.js',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'lcov'],
+      exclude: [
+        'node_modules/**',
+        'src/main.jsx',
+        '**/*.stories.*',
+        '.storybook/**',
+        'coverage/**',
+        'dist/**',
+      ],
+      thresholds: {
+        lines: 75,
+        branches: 70,
+        functions: 75,
+        statements: 75
+      }
+    }
   },
 })