# Handoff: Личные финансы (Dashboard / План на год / Аналитика)

## Overview
Адаптивный (комп/планшет/телефон) прототип системы личных финансов: дашборд, годовой план по месяцам с CRUD статей доходов/расходов (категории + подкатегории, с формулой-привязкой доход→расход), экран транзакций, аналитика. Нижняя навигация: Дашборд / Бюджет / Транзакции / Аналитика / Настройки.

## About the Design Files
Файлы в этой папке (`Личные финансы.dc.html`, `nocturne.css`) — **дизайн-референс на HTML**, не production-код. Задача разработчика — **пересобрать эти экраны в целевом окружении проекта** (в вашем случае — существующее приложение "Bicycle", PHP-бэкенд + фронтенд-шаблоны в `App/view/`), используя его текущие паттерны (layout.html, контроллеры, существующий CSS), а не копировать HTML как есть.

## Fidelity
**Hi-fi.** Финальные цвета, типографика, отступы и интерактивные состояния — DC-файл можно открыть в браузере и использовать как эталон 1:1.

## Design system
Nocturne (dark, mono-accent). Токены — в `nocturne.css` (`:root`): `--color-bg #161826`, `--color-surface #232532`, `--color-text #e9e9ed`, `--color-accent #9184d9` (+ тональные рампы 100–900 для accent/accent-2/neutral). Шрифт: Inter (`--font-heading`/`--font-body`). Радиусы/тени — `--radius-*`, `--shadow-sm/md/lg`. Разноцветные акценты счетов/статей в дашборде заданы прямыми `oklch()` — не входят в токены Nocturne, подобраны под ту же светлоту/насыщенность.

## Screens
1. **Дашборд** — статус-бар (дата, бюджет %, дельта, курс), доступно сейчас (крупная сумма), карточки счетов (⋮-меню: редактировать/удалить, кнопка «+» → модалка «Новый счёт» → «Новый кредит»), копилки/цели (кольцевой прогресс, ⋮-меню), список статей доходов (прогресс-бар план/факт), бюджет по группам (то же, с перерасходом >100% — красный).
2. **План на год** (`planStyle`) — таблица статей × 12 месяцев (план), группы доходов/расходов, инлайн-редактируемые ячейки; на телефоне — аккордеон по группам. Кнопка «Статьи» открывает CRUD-модалку категорий (группы + подкатегории, add/edit/delete, поле формулы для доходов).
3. **Транзакции** (`transactionsStyle`) — список операций (дата, категория, сумма, доход зелёным).
4. **Аналитика** (`analyticsStyle`) — динамика доходов/расходов (SVG-полилиния), структура расходов (donut), план vs факт (бары), тренд/прогноз, год к году (столбцы по кварталам).

Модалки: «Новый счёт» (тип: расчётный/накопительный/наличные/кредит-карта, цвет, валюта, приватность, учёт в общем балансе), «Новый кредит» (новый/уже выплачиваю, 4 типа: потребительский/ипотека/авто/кредитная карта, поля ставки/срока/платежа/остатка), «Статьи доходов и расходов» (CRUD дерева категорий).

## Interactions
- Верхний свитчер экрана + свитчер устройства (комп/планшет/телефон, 1280/834/390px) — только для превью в самом DC-файле, в продакшене не нужен.
- Нижняя навигация — плавающая пилюля, 5 иконок, активная подсвечена акцентным кружком (важно: во React/Vue-эквиваленте стилизовать активный пункт целиком одним объектом стилей — не смешивать динамический style-объект с литеральной строкой CSS в одном атрибуте, как в исходном DC один раз аукнулось).
- ⋮-меню на карточках счетов/целей — клик открывает мини-дропдаун (редактировать/удалить), закрывается повторным кликом.
- CRUD статей: добавление/редактирование через инлайн-форму внутри модалки, удаление — сразу.

## Assets
Иконки — инлайн SVG-спрайт (`<symbol>` в начале файла), в духе Phosphor (design-system требует Phosphor — при переносе на реальный icon-set заменить на настоящие Phosphor-иконки: home, chart, sliders, gear, wallet, card, piggy-bank, folder, trash, pencil, plus, bank, bag, bolt, car, coin).

## Files
- `Личные финансы.dc.html` — весь прототип (все экраны + модалки + логика состояния в одном файле).
- `nocturne.css` — токены и базовые компоненты дизайн-системы Nocturne.