family_budget/frontend

Frontend — Family Budget SPA

React SPA для учёта семейного бюджета: импорт банковских выписок, категоризация операций, аналитика.

Стек

• React 19 + TypeScript
• Vite — сборка и dev-сервер
• React Router 7 — маршрутизация
• Recharts — графики (столбиковые, круговые)
• @family-budget/shared — общие TypeScript-типы (API-контракты)

Структура

frontend/
├── index.html                  — точка входа
├── vite.config.ts              — конфигурация Vite (прокси на backend)
├── tsconfig.json
└── src/
    ├── main.tsx                — рендер корневого компонента
    ├── App.tsx                 — маршруты и проверка авторизации
    ├── styles/
    │   └── index.css           — глобальные стили, CSS-переменные
    ├── api/                    — модули запросов к backend
    │   ├── client.ts           — fetch-обёртка с обработкой 401
    │   ├── auth.ts             — login, logout, me
    │   ├── transactions.ts     — GET/PUT /api/transactions
    │   ├── accounts.ts         — GET/PUT /api/accounts
    │   ├── categories.ts       — GET /api/categories
    │   ├── rules.ts            — CRUD /api/category-rules
    │   ├── analytics.ts        — summary, by-category, timeseries
    │   └── import.ts           — POST /api/import/statement
    ├── context/
    │   └── AuthContext.tsx      — провайдер авторизации
    ├── pages/
    │   ├── LoginPage.tsx        — форма входа
    │   ├── HistoryPage.tsx      — таблица операций с фильтрами
    │   ├── AnalyticsPage.tsx    — сводка, графики, категории
    │   └── SettingsPage.tsx     — счета, категории, правила
    ├── components/
    │   ├── Layout.tsx           — боковое меню, обёртка
    │   ├── TransactionFilters.tsx
    │   ├── TransactionTable.tsx
    │   ├── Pagination.tsx
    │   ├── EditTransactionModal.tsx
    │   ├── ImportModal.tsx
    │   ├── PeriodSelector.tsx
    │   ├── SummaryCards.tsx
    │   ├── TimeseriesChart.tsx
    │   ├── CategoryChart.tsx
    │   ├── AccountsList.tsx
    │   ├── CategoriesList.tsx
    │   └── RulesList.tsx
    └── utils/
        └── format.ts           — форматирование сумм и дат

Экраны

Экран	Маршрут	Описание
Логин	—	Отображается при отсутствии сессии
Операции	/history	Таблица транзакций, фильтры, импорт, редактирование
Аналитика	/analytics	Сводка, динамика (bar chart), расходы по категориям
Настройки	/settings	Счета (алиасы), категории (просмотр), правила

Требования

• Node.js >= 20
• Собранный пакет @family-budget/shared (см. корневой README)
• Запущенный backend на http://localhost:3000

Команды

# Установка зависимостей (из корня монорепо)
npm install

# Сборка shared-типов (если ещё не собраны)
npm run build -w shared

# Запуск dev-сервера (порт 5173, прокси /api → localhost:3000)
npm run dev -w frontend

# Production-сборка
npm run build -w frontend

# Предпросмотр production-сборки
npm run preview -w frontend

Прокси

В dev-режиме Vite проксирует все запросы /api/* на http://localhost:3000 (см. vite.config.ts). В production фронтенд отдаётся как статика, а проксирование настраивается на уровне reverse proxy (nginx и т.п.).

Авторизация

• При загрузке SPA выполняется GET /api/auth/me.
• Если сессия не активна — отображается форма логина.
• При получении 401 от любого API-запроса — автоматический сброс состояния и возврат к форме логина.
• Таймаут сессии — 3 часа бездействия (управляется backend).

API-контракты

Типы запросов и ответов определены в @family-budget/shared и описаны в спецификациях:

• docs/backlog/auth.md — авторизация
• docs/backlog/api_history.md — история операций
• docs/backlog/api_import.md — импорт выписок
• docs/backlog/api_reference_accounts_categories.md — справочники
• docs/backlog/api_rules.md — правила категоризации
• docs/backlog/analytics.md — аналитика
• docs/backlog/edit_and_rules.md — редактирование транзакций