Analyzer — Аналізатор Продажів

Інтерактивна панель для вводу, аналізу та візуалізації даних про продажі. Підтримує фільтри, сортування, KPI‑картки, графіки, а також імпорт/експорт CSV. Дані зберігаються у браузері (LocalStorage).

Можливості

• Додавання продажів через зручну форму з валідацією полів
• Редагування та видалення записів у таблиці
• Фільтри за товаром, категорією, діапазоном цін та датою
• Сортування за полями: дата, товар, категорія, ціна, кількість, сума
• KPI‑картки: кількість продажів, продані одиниці, середня покупка, середній дохід на місяць, загальний дохід
• Візуалізація (Chart.js): стовпчики за категоріями та лінійний графік доходу за місяцями
• Модуль попереджень про аномалії: знаходить нетипові транзакції/сплески, денні просідання та повторні замовлення, має фільтри і детальну розшифровку метрик
• Імпорт даних з CSV із попереднім переглядом та підказками
• Експорт відфільтрованих/відсортованих даних у CSV
• Підсвітка найкращого місяця за доходом та його вклад у загальний дохід
• Збереження стану у LocalStorage (sales_data), щоб дані не зникали між перезавантаженнями

Демонстраційні дані

У репозиторії є два CSV:

• public/example-sales.csv — компактний приклад для швидкого старту;
• public/test-data.csv — розширений набір із піками, просіданнями та повторними закупівлями для перевірки модуля попереджень. Обидва файли можна завантажити з модального вікна імпорту.

Формат CSV

Перший рядок — заголовки. Очікувані стовпці в такому порядку:

1. ID — унікальний ідентифікатор запису
2. Товар — назва товару
3. Категорія — назва категорії
4. Ціна — число (десятковий роздільник — крапка)
5. Кількість — ціле число > 0
6. Дата — формат YYYY-MM-DD

Поради:

• Значення можна брати у лапки. Парсер коректно обробляє коми всередині лапок.
• Порожні або некоректні рядки ігноруються під час імпорту.
• Валюта в інтерфейсі — гривня (₴), локаль форматування — uk-UA.

Швидкий старт

Вимоги:

• Node.js 18+ (рекомендовано LTS)

Команди:

npm install
npm run dev     # запуск у режимі розробки
npm run build   # продакшн-збірка в папку dist
npm run preview # локальний перегляд зібраної версії
npm run lint    # перевірка ESLint

Після npm run dev відкрийте адрес, який покаже Vite (звичайно http://localhost:5173/).

Як користуватися

• Додавання: перейдіть до блоку «Додати продаж», заповніть поля та натисніть «Додати продаж».
• Редагування/видалення: у таблиці натисніть ✎, внесіть зміни та підтвердьте, або натисніть × для видалення.
• Фільтри: використовуйте поле пошуку, вибір категорії, межі цін і діапазон дат.
• Сортування: клік по заголовку стовпця (стрілка ↑/↓).
• Графіки: секція «Дохід по категоріях» і «Дохід по місяцях» оновлюються автоматично при зміні даних.
• Попередження: у блоці «Попередження про нетипові продажі» вибирайте типи аномалій (транзакції, піки, просідання, місячні тренди, популярні товари), відкривайте метрики й аналізуйте причину сповіщення.
• Імпорт: кнопка «Імпорт з CSV» (доступно зверху таблиці або коли таблиця порожня) — при імпорті нові дані повністю заміняють старі.
• Експорт: «Експорт в CSV» експортує саме поточну вибірку (з урахуванням фільтрів і сортування).

Технології

• React 19 + TypeScript
• Vite 7 (швидкий DevServer і продакшн‑збірка)
• Tailwind CSS 4 (стилі та утиліти)
• Chart.js 4 (графіки)
• Lodash (агрегації, групування)

Архітектура та основні файли

• src/App.tsx — кореневий компонент, керує станом продажів і передає колбеки
• src/components/StatsPanel.tsx — KPI‑картки, форма, таблиця, блоки категорій/місяців
• src/components/SalesForm.tsx — форма створення продажу з валідацією
• src/components/SalesTable.tsx — фільтри, сортування, редагування, імпорт/експорт
• src/components/ImportModal.tsx — імпорт CSV із попереднім переглядом
• src/components/SalesChart.tsx — два графіки: категорії (bar) і місяці (line)
• src/components/AnomalyAlerts.tsx — панель попереджень з фільтрами, показом метрик і підказками
• src/utils/calc.ts — підрахунок агрегованих метрик (суми, середні, категорії)
• src/utils/storage.ts — LocalStorage, фільтрація/сортування, експорт/імпорт CSV
• src/utils/constants.ts — категорії, ліміти/формати, назви місяців
• src/utils/anomalies.ts — виявлення нетипових транзакцій, денних піків/просідань, місячних трендів і серій повторних замовлень
• src/utils/format.ts — форматування сум та середніх значень
• public/example-sales.csv — приклад даних

Збереження даних

Дані зберігаються у LocalStorage браузера під ключем sales_data. Це зручно для демо і локальної роботи, але не є серверною персистенцією. Очистка кешу/даних браузера призведе до втрати локальних записів.

Поради щодо імпорту CSV

• Для коректної обробки використовуйте кодування UTF‑8.
• Дати — у форматі YYYY-MM-DD.
• Десяткові дроби — через крапку (.).
• Якщо кількість колонок чи порядок відрізняється від очікуваного — рядок буде пропущено.

Збірка та деплой

Створіть продакшн‑збірку:

npm run build

У результаті з’явиться папка dist/, придатна для розміщення на будь‑якому статичному хостингу (GitHub Pages, Netlify, Vercel, S3 тощо). Для локальної перевірки використовуйте npm run preview.

Відомі обмеження

• Збереження — лише в LocalStorage, без бекенду.
• Імпортер CSV покриває типові сценарії (лапки, коми), але не є повноцінним RFC‑парсером.
• Валюта і локаль зафіксовані як UAH/uk-UA.