finaudit

Веб-приложение для личного финансового аудита: учёт доходов и расходов по категориям, активов, автоматический расчёт сводки (постоянные/переменные расходы, доли, свободный остаток) и визуализация в виде графиков.

Аналог Excel-таблицы, но с автосохранением, экспортом/импортом и диаграммами.

Возможности

• Сводка — доходы, расходы, доход−расход, переменные (VC) и постоянные (FC) расходы, их доли в %, свободный остаток. Всё пересчитывается автоматически.
• Редактируемые таблицы — расходы (с типом FC/VC), доходы и активы. Добавление, изменение и удаление строк.
• Графики — структура расходов (кольцевая), соотношение FC/VC, доходы vs расходы.
• Сохранение между перезагрузками — данные хранятся в localStorage браузера.
• Экспорт / импорт — выгрузка и загрузка данных в формате JSON.
• Экспорт картинки — сохранение всей таблицы в PNG.

Технологии

• Vite + React 19 + TypeScript
• Tailwind CSS v4 — стили
• Recharts — графики
• html-to-image — экспорт PNG

Запуск

npm install
npm run dev      # запуск в режиме разработки
npm run lint     # проверка кода ESLint

Структура проекта

src/
  types.ts                 # модель данных
  lib/
    calc.ts                # вычисление сводки
    format.ts              # форматирование чисел/процентов
    storage.ts             # сохранение/загрузка localStorage + нормализация
    exporter.ts            # экспорт JSON/PNG, импорт JSON
    sampleData.ts          # демо-данные
    id.ts                  # генерация id
  store/
    useFinanceStore.ts     # состояние приложения + автосохранение
  components/
    Header.tsx
    Toolbar.tsx            # экспорт/импорт/сброс
    Panel.tsx              # карточка-панель
    SummaryPanel.tsx       # сводка
    ExpensesPanel.tsx      # расходы (FC/VC)
    SimpleListPanel.tsx    # доходы и активы
    ChartsPanel.tsx        # графики
    MoneyInput.tsx         # поле ввода суммы
    icons.tsx
  App.tsx