family_budget/docs/agents/agent_frontend.md

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

Стек

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

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

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

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

1 Логин

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

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

• Таблица с колонками:

  • Дата,
  • Счёт (alias),
  • Сумма,
  • Описание,
  • Категория,
  • (иконка/метка неподтверждённой категории),
  • (иконка комментария).

• Фильтры:

  • период (from/to),
  • быстрые предустановки: неделя/месяц/год с перелистыванием,
  • счёт,
  • тип движения (приход/расход/перевод),
  • категория,
  • строка поиска,
  • быстрый фильтр по сумме,
  • флаг только неподтверждённые.

• Пагинация страницами: 10/50/100.

• Редактирование транзакции (модальное окно):

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

3 Аналитика

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

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

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

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

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

Ограничения

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