feat: creats frontend for the project

2026-03-02 00:33:09 +03:00
parent 4d67636633
commit cd56e2bf9d
37 changed files with 3762 additions and 0 deletions
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,114 @@
+# 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` — редактирование транзакций