115 lines
5.6 KiB
Markdown
115 lines
5.6 KiB
Markdown
# 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`
|
||
|
||
## Команды
|
||
|
||
```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` — редактирование транзакций
|