82 lines
3.8 KiB
Markdown
82 lines
3.8 KiB
Markdown
# Агент: 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, описанные в соответствующих файлах.
|
||
- Настройка видимых колонок в истории должна быть предусмотрена (хотя бы на уровне структуры состояния).
|