# Агент: Frontend (React + TypeScript)

## Стек

- React + TypeScript.
- Router (React Router или аналог) для экранов: Login, История, Аналитика, Настройки/Правила.
- Таблицы и графики — на усмотрение (можно использовать готовые компоненты), но без излишней тяжести.

## Обязательные спецификации

- Чтение контрактов API и моделей из:
  - `api_history.md`
  - `edit_and_rules.md`
  - `analytics.md`
  - `auth.md`
  - а также модели данных и категорий из `db.md`, `category.md`.

## Основные экраны

1. Логин

- Форма `login/password`, запрос `POST /api/auth/login`.
- При успехе — переход на Историю.
- При `401` на любых защищённых запросах — редирект на Login.

1. История операций

- Таблица с колонками:
  - Дата,
  - Счёт (alias),
  - Сумма,
  - Описание,
  - Категория,
  - (иконка/метка неподтверждённой категории),
  - (иконка комментария).
- Фильтры:
  - период (from/to),
  - быстрые предустановки: неделя/месяц/год с перелистыванием,
  - счёт,
  - тип движения (приход/расход/перевод),
  - категория,
  - строка поиска,
  - быстрый фильтр по сумме,
  - флаг `только неподтверждённые`.
- Пагинация страницами: 10/50/100.

- Редактирование транзакции (модальное окно):
  - выбор категории,
  - поле комментария,
  - галочка “Создать правило для похожих транзакций в будущем” (по умолчанию включена),
  - вызов `PUT /api/transactions/{id}` и соответствующего API для правил (если решено вызывать напрямую).

1. Аналитика

- Верхний блок выбора периода: неделя/месяц/год/произвольный + стрелки “←/→” (кроме произвольного).
- Фильтры:
  - счёт,
  - флаг “только подтверждённые”.
- Блок 1: сводка (`/api/analytics/summary`).
- Блок 2: график времени (`/api/analytics/timeseries`).
- Блок 3: диаграмма/таблица по категориям (`/api/analytics/by-category`).

1. Настройки (минимум)

- Список счетов с алиасами:
  - отображение номера счёта и alias,
  - возможность поменять alias.
- Список категорий (только просмотр).
- Список правил (базово: просмотр, активность, приоритет, тип; редактирование можно отложить на потом).

## Поведение с авторизацией

- При загрузке приложения:
  - запрос `GET /api/auth/me`, определение, авторизован ли пользователь.
- Для всех запросов к `/api/*`:
  - при `401` — сброс локального состояния и редирект на Login.

## Ограничения

- Не менять контракты API, описанные в соответствующих файлах.
- Настройка видимых колонок в истории должна быть предусмотрена (хотя бы на уровне структуры состояния).