# Frontend — Family Budget SPA

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

## Стек

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

## Структура

```text
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`

## Команды

```bash
# Установка зависимостей (из корня монорепо)
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` — редактирование транзакций