Bicycle/App/design_handoff_personal_finance

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.