iistwin/.superpowers/sdd/di2-restyle/plan.md

# План: удаление старого модуля финансов + рестайл DI2 под дизайн iistwin

Репозиторий: `C:\1Ai\1iistwin\1Project` (main, автодеплой через push). Субапп DI2 уже в проде на `/di2` (server/finance-di2 + client-di2).

Решения пользователя (зафиксированы): /salary удалить и вести на /di2; рестайл = мост токенов + точечные правки (без замены 45 shadcn-компонентов); мобильная навигация = нижняя панель.

---

## Этап 1 — Удаление старого модуля финансов

### 1.1 Сервер
1. **Перенос пула БД**: содержимое `server/finance/db-client.ts` → новый `server/finance-di2/db-core.ts` (правка внутренних импортов: там только fs/path/pg). Обновить `server/finance-di2/db-client.ts`: реэкспорт из `./db-core` вместо `../finance/db-client`. Удалить папку `server/finance/` целиком (19 файлов).
2. **Шедулер аудита**: создать `server/finance-di2/audit-scheduler.ts` — порт `startAuditScheduler` (cron 03:00 МСК) из удаляемого `server/finance/audit.ts:524`, но вызывающий DI2-функцию `runIntegrityAudit` из `./audit-agent`. Запускать из `registerDi2Routes` (server/finance-di2/index.ts). Реализация — setInterval-проверка времени (как в оригинале) или порт через обычный таймер; node-cron НЕ добавлять.
3. **Персистентность истории аудита**: в `server/finance-di2/audit-agent.ts` добавить загрузку/запись `data/finance-audit-history.json` (порт логики из старого audit.ts): загрузка при старте модуля, append после каждого `runIntegrityAudit`. Сейчас история в памяти и теряется при рестарте.
4. **Регистрация**: `server/routes/index.ts` — убрать `import { registerFinanceRoutes }` (стр. 33) и вызов (стр. 116), оставить `registerDi2Routes`.
5. **Env сервера** (проверка, не код): DI2 Google-флоу использует `GOOGLE_CLIENT_ID`/`GOOGLE_CLIENT_SECRET` — проверить наличие в `.env` сервера; старый `FINANCE_GOOGLE_REDIRECT_URI` больше не нужен.

### 1.2 Клиент (основное приложение)
1. Удалить: `client/src/pages/finance/` (14 файлов), `client/src/components/finance/` (22 файла), `client/src/hooks/useFinance.ts`, `client/src/hooks/useColumnLabels.ts`, `client/src/lib/format.ts`, `client/src/pages/salary.tsx`.
   - Перед удалением: `grep -rn "lib/format\|useFinance" client/src --include=*.tsx --include=*.ts` — все внешние импорты должны отсутствовать (по разведке используются только удаляемыми файлами — перепроверить!).
2. `client/src/index.css` — удалить блок `.hover-elevate`/`.hover-elevate-2` (строки ~343-374, использовался только finance DataTable).
3. `client/src/App.tsx`:
   - Убрать lazy-импорты finance-страниц (строки 61-72) и роуты `/finance`, `/finance/debt`, `/finance/calculations`, `/finance/audit`, `/income*`, `/expenses*`, `/salary` (строки 117-120, 187-200).
   - ROUTE_TITLES: убрать записи этих путей.
4. Навигация:
   - `client/src/components/Sidebar.tsx` (строки 1084-1122, 1544, 1641-1645): `FinanceNavItem` и пункт «Финансы» в меню профиля → внешняя ссылка `<a href="/di2" target="_blank" rel="noopener">` (паттерн как в FinanceSidebar.tsx:88-99), гейт `moduleAccess.finance !== false && (isAdmin || hasPermission('finance.view'))` сохранить.
   - `client/src/components/MobileBottomNav.tsx` (строки 383-389): пункт «Финансы» → `/di2`.
5. **Не трогать**: сиды прав `finance.view/manage` (`server/storage/roles.storage.ts:300-301` — gate DI2 ломается без них), `finance_access` (shared/schema.ts, module-access, Users.tsx матрица доступа).

### 1.3 Проверка этапа
`npm run check` + `npm run build` чисто; ключевые API DI2 авторизованно 200 (список из этапа 4).

---

## Этап 2 — Мост тем/скинов iistwin в DI2

Ключевая несовместимость: DI2 ждёт голые HSL-тройки (`hsl(var(--x) / <alpha>)`), скины iistwin генерируют полные значения (`hsl(...)`). Решение — перевод DI2 на формат основного клиента + общий generated-skins.css + свой провайдер.

### 2.1 Общий код тем
- Vite-алиас в `vite.config.di2.ts`: `"@skin": path.resolve(import.meta.dirname, "client/src/themes")` (через `../client` → фактически `1Project/client/src/themes`); пути в `client-di2/tsconfig.json`: `"@skin/*": ["../client/src/themes/*"]`.
- Импортируемые модули (чистый TS, без React): `tokens.ts` (`generateSkinCss`, `Skin` типы), `skins/index.ts` (`BUILT_IN_SKINS`, `DEFAULT_SKIN_ID`, `getBuiltInSkinById`), `styles/generated-skins.css` — через CSS-`@import` в index.css (путь `../../client/src/themes/styles/generated-skins.css` первой строкой).

### 2.2 Di2ThemeProvider — `client-di2/src/themes/Di2ThemeProvider.tsx`
Порт логики `client/src/themes/ThemeProvider.tsx` (строки 75-92, 151-209) минус useAuth/useQuery:
- Приоритет скина: `localStorage['skin']` (если id валиден среди BUILT_IN_SKINS + кастомных с сервера) → `GET /api/organization/current-skin` (`{skinId, skin}`) → `'iistwin'`.
- Кастомные скины: список через `GET /api/organization/skins`, токены через `GET /api/organization/skins/:id` (только для не-встроенного текущего).
- Тема: `localStorage['theme']` → `prefers-color-scheme` + слушатель.
- На `<html>`: `data-skin`, `data-theme`, класс `light|dark`; для кастомного скина — `<style id="skin-runtime">` с `generateSkinCss(skin, theme)`.
- Ключи localStorage `'skin'`/`'theme'` — **те же**, что в основном приложении: выбор пользователя синхронизируется между iistwin и /di2 автоматически.
- В `client-di2/src/main.tsx`: `<Router base="/di2"><Di2ThemeProvider><App/></Di2ThemeProvider></Router>`.

### 2.3 Перевод DI2 на полный формат токенов
1. `client-di2/tailwind.config.ts`: все цвета `hsl(var(--x) / <alpha-value>)` → `var(--x)` (как в корневом `tailwind.config.ts`); `borderRadius`: хардкод lg/md/sm → `var(--radius)` + каскад `calc(var(--radius) - 2px)`/`-4px` (скопировать блок из корневого конфига); добавить `warning/success/info` из var(--warning) и т.д. Если DI2 использует alpha-модификаторы семантических цветов (`bg-primary/50`) — заменить на `color-mix(in oklab, var(--primary) 50%, transparent)` (grep при исполнении).
2. `client-di2/src/index.css`:
   - Заменить собственные `:root`/`.dark` HSL-тройки (строки 9-169) на fallback-блоки, скопированные из `client/src/index.css:13-80` (iistwin light/dark до гидратации).
   - DI2-only переменные — переопределить от семантических токенов через `color-mix`: `--card-border`/`--popover-border` → `var(--border)`; `--primary-border`, `--secondary-border`, `--muted-border`, `--accent-border`, `--destructive-border`, `--sidebar-primary-border`, `--sidebar-accent-border` → `color-mix(in oklab, var(--X) 82%, black)`; `--button-outline` → `color-mix(in oklab, var(--primary) 35%, transparent)`; `--badge-outline` → `color-mix(in oklab, var(--muted-foreground) 35%, transparent)`; `--elevate-1/2` → `rgba(0,0,0,.05/.08)` (в `.dark` — светлые значения). Убрать `--opaque-button-border-intensity` и `hsl(from ...)` relative-color вычисления.
3. `client-di2/index.html`: `lang="ru"`; убрать оба preconnect и мега-link Google Fonts (23 семейства) → оставить только Inter (+DM Mono) как в `client/index.html:23`; viewport — убрать `maximum-scale=1`, добавить `interactive-widget=resizes-content` (паттерн фикса 2026-08-26).
4. Шрифты приходят из скина: `generateSkinCss` эмитит `--font-sans`/`--font-mono` — в index.css DI2 удалить жёсткие `--font-sans: Open Sans`.

### 2.4 Проверка этапа
`npm run check`, `npm run build`; визуально: `/di2` рендерится, светлая/тёмная тема переключается; смена скина в `/settings/appearance` основного приложения меняет вид `/di2` после обновления (проверить `data-skin` на `<html>`).

---

## Этап 3 — Визуальный рестайл (точечный)

1. **Графики recharts**: заменить hex-палитры (77 вхождений: `#2563eb` и т.п. в income/expenses-overview, debt, calculations, planning, dashboard, heatmap, salary) на `var(--chart-1..5)` для палитр и `var(--success)`/`var(--destructive)`/`var(--warning)` для семантики. Recharts принимает CSS-переменные в fill/stroke.
2. **Хардкод Tailwind-цветов** (133 вхождения `text-red-500`, `bg-amber-50`, `text-green-600` и т.п.): заменить на семантические классы (`text-destructive`, `text-success`, `bg-warning/10` + парные `dark:` где отсутствуют). Механическая замена по всем страницам client-di2.
3. **Таблицы по UI Style Guide**: `client-di2/src/components/ui/table.tsx` — шапка `bg-muted/50 text-[12px] font-medium text-muted-foreground`, строки `h-[var(--table-row-height,40px)]`, hover `bg-muted/40`, ячейки `px-3` (как в основном клиенте). Density из Темы 2.0 подхватится автоматически.
4. **Контролы**: скопировать `client/src/components/fields/field-styles.ts` в `client-di2/src/lib/field-styles.ts` (зависит только от `cn`), применить `fieldControlClass` в кастомных компонентах DI2 (column-filter, draggable-column-list, copyable-cell) — density/control-вид скина применится.
5. **app-sidebar**: активный пункт через `sidebar-accent` (уже так), убраить лишние отступы, привести брендинг-блок к нашему виду (оставить «ОмегаПром / Финансы»).
6. **Мобильная нижняя панель** — новый `client-di2/src/components/bottom-nav.tsx` по образцу `client/src/components/finance/FinanceBottomNav.tsx` (удаляемого — скопировать логику до удаления): три кнопки «Обзор» (дашборд), «Разделы» (dropdown: Доходы, Расходы, Дебиторка, Расчёты, Планирование, Зарплата, Аудит, Прибыльность, Тепловая карта), «Настройки»; видна только `<md`, контент получает `pb-20 md:pb-0`, сайдбар на мобильном скрывается (`hidden md:flex` на обёртке + отключить Sheet-триггер). Переходы — wouter Link (base-aware).
7. **Переключатель темы** в хедере DI2 (App.tsx): кнопка Sun/Moon, пишет `localStorage['theme']` и дергает перерендер Di2ThemeProvider (через кастомное событие/контекст — проще: Di2ThemeProvider экспортирует контекст с toggleTheme, как основной ThemeProvider).
8. Хедер/страницы: page-gutter через `var(--page-gutter, 1rem)` где уместно; крупные заголовки страниц — `text-lg font-semibold` (как основной клиент).

---

## Этап 4 — Проверка, деплой, документация

1. `npm run check` (оба tsc) + `npm run build` (main → di2 → server) — чисто.
2. Авторизованный smoke прод-API DI2: `/api/di2/dashboard`, `/api/income/tree-summary`, `/api/debt/analytics`, `/api/connection`, `/api/audit/history` — 200.
3. После деплоя: `/finance`, `/salary`, `/income` → 404/редирект (страниц нет); «Финансы» в Sidebar/MobileBottomNav открывает `/di2`; `/di2` светлая+тёмная, скин организации применяется; мобильная нижняя панель на телефоне.
4. Документация: AGENTS.md — удалить устаревшие разделы старого модуля (мобильная навигация финансов, деревья категорий, баг дебиторки, Google-флоу `/api/finance/google/*`) и дописать раздел про /di2 (мост тем, Di2ThemeProvider, нижняя панель); новая Obsidian-заметка `Features/2026-09-0X — Finance module replaced by Data-Insight2 subapp.md` + ссылка в Agent Guide Index; пометить устаревшей заметку `2026-09-05 — Finance debt calculations audit and Data-Insight2 migration`.
5. **Ручной шаг пользователя** (вне кода): Google Cloud Console — в OAuth-клиент добавить redirect URI `https://iistwin.ru/api/auth/google/callback` (нужен для синхронизации зарплаты из Google Sheets в DI2; старый `/api/finance/google/callback` удаляется вместе с модулем).

## Риски и ограничения
- Удаление `lib/format.ts`/`useFinance.ts` — только после grep-подтверждения отсутствия внешних импортов.
- `/api/finance-settings`, `/api/audit/status`, customer-sync/contract-sync, `/api/finance/google/*` умирают с модулем — потребителей кроме удаляемого UI нет (по разведке).
- Docker-compose не меняется → бэкап serverfix не нужен; миграций БД нет (iistwin-БД не трогаем; внешняя финансовая БД — только чтение + override-таблицы DI2, которые уже созданы).
- Если замена хардкод-цветов в графиках сломает читаемость в тёмной теме — вернуть семантические пары вручную (проверить глазами ключевые страницы).