sfera-new/2025-09-17/SALES_TAB_MARKET_COUNTERPARTIES_REFACTORING_PLAN.md

📊 ПЛАН РЕФАКТОРИНГА: SALES-TAB & MARKET-COUNTERPARTIES

Дата создания: 17 сентября 2025
Компоненты: 2 компонента средней сложности
Цель: Модуляризация согласно MODULAR_ARCHITECTURE_PATTERN.md
Приоритет: Средний (хорошие кандидаты для начала)

---

📋 АНАЛИЗ КОМПОНЕНТОВ

📊 SALES-TAB.TSX (906 строк)

🔍 ТЕКУЩАЯ СТРУКТУРА:

• Размер: 906 строк
• React Hooks: 13 использований (useState, useEffect, useMemo, useCallback)
• Сложность: Средняя
• Назначение: Аналитика продаж Wildberries с графиками и таблицами

📈 ФУНКЦИОНАЛЬНЫЕ БЛОКИ:

1. Период и фильтры - выбор временного диапазона
2. График продаж - визуализация метрик (Bar Chart)
3. Таблица детальных данных - табличное представление
4. Метрики видимости - переключение отображения метрик
5. Сортировка и агрегация - обработка данных

⚙️ ТЕХНИЧЕСКИЕ ДЕТАЛИ:

• GraphQL интеграция с Wildberries API
• Recharts для визуализации
• Кэширование данных
• Mock данные для разработки

---

🤝 MARKET-COUNTERPARTIES.TSX (835 строк)

🔍 ТЕКУЩАЯ СТРУКТУРА:

• Размер: 835 строк
• React Hooks: 6 использований (useState, useMemo)
• Сложность: Средняя
• Назначение: Управление контрагентами (поиск, заявки, партнерские ссылки)

🏢 ФУНКЦИОНАЛЬНЫЕ БЛОКИ:

1. Список контрагентов - отображение существующих партнеров
2. Входящие заявки - управление входящими запросами
3. Исходящие заявки - управление отправленными запросами
4. Поиск организаций - поиск новых партнеров
5. Партнерские ссылки - генерация и управление
6. Фильтрация и сортировка - обработка списков

⚙️ ТЕХНИЧЕСКИЕ ДЕТАЛИ:

• 4 GraphQL queries (counterparties, incoming, outgoing, search)
• 3 GraphQL mutations (respond, cancel, remove)
• Табы для разных разделов
• Фильтрация по типу организации

---

🏗️ ДЕТАЛЬНЫЙ ПЛАН МОДУЛЯРИЗАЦИИ

📊 SALES-TAB МОДУЛЯРИЗАЦИЯ

🎯 ЦЕЛЕВАЯ СТРУКТУРА:

src/components/seller-statistics/sales-tab/
├── index.tsx                          # Главный оркестратор
├── blocks/                            # UI блоки
│   ├── PeriodFilterBlock.tsx         # Выбор периода + кэш контроль
│   ├── SalesChartBlock.tsx           # График продаж (Recharts)
│   ├── SalesTableBlock.tsx           # Таблица с данными
│   ├── MetricsToggleBlock.tsx        # Переключение видимости метрик
│   └── StatsSummaryBlock.tsx         # Агрегированная статистика
├── hooks/                            # Бизнес-логика
│   ├── useSalesData.ts              # Загрузка и кэширование данных WB
│   ├── useSalesFilters.ts           # Фильтрация и сортировка
│   ├── useSalesChart.ts             # Логика графика и метрик
│   └── useSalesTable.ts             # Логика таблицы и агрегации
└── types/
    └── sales-analytics.types.ts      # TypeScript интерфейсы

📦 РАЗБИВКА ПО БЛОКАМ:

1. PeriodFilterBlock.tsx (~80 строк)

• Выбор периода (week, month, custom dates)
• Кэш контроль и перезагрузка данных
• Props: selectedPeriod, onPeriodChange, cacheControls

2. SalesChartBlock.tsx (~150 строк)

• Recharts Bar Chart с конфигурацией
• Переключение видимых метрик
• Props: chartData, visibleMetrics, chartConfig

3. SalesTableBlock.tsx (~200 строк)

• Таблица с сортировкой
• Пагинация и итоги
• Props: tableData, sortConfig, onSort

4. MetricsToggleBlock.tsx (~60 строк)

• Чекбоксы для включения/выключения метрик
• Props: visibleMetrics, onMetricsChange

5. StatsSummaryBlock.tsx (~80 строк)

• Агрегированная статистика (итоги)
• Props: totals, period

⚙️ HOOKS СТРУКТУРА:

useSalesData.ts (~120 строк)

export function useSalesData(period: string, startDate?: string, endDate?: string) {
  // GraphQL запросы к WB API
  // Кэширование и обновление данных
  // Обработка ошибок
  return {
    salesData,
    loading,
    error,
    refetch,
    getCachedData,
    setCachedData
  }
}

useSalesFilters.ts (~80 строк)

export function useSalesFilters(rawData: SalesData[]) {
  // Фильтрация по датам
  // Сортировка таблицы
  // Управление видимыми метриками
  return {
    filteredData,
    visibleMetrics,
    sortConfig,
    updateFilters,
    toggleMetric
  }
}

useSalesChart.ts (~60 строк)

export function useSalesChart(data: SalesData[], visibleMetrics: MetricsConfig) {
  // Подготовка данных для Recharts
  // Расчет цветов и конфигурации
  return {
    chartData,
    chartConfig,
    isCollapsed,
    toggleCollapse
  }
}

useSalesTable.ts (~90 строк)

export function useSalesTable(data: SalesData[]) {
  // Сортировка таблицы
  // Агрегация итогов
  // Пагинация
  return {
    sortedData,
    totals,
    sortField,
    sortDirection,
    handleSort
  }
}

---

🤝 MARKET-COUNTERPARTIES МОДУЛЯРИЗАЦИЯ

🎯 ЦЕЛЕВАЯ СТРУКТУРА:

src/components/market/market-counterparties/
├── index.tsx                          # Главный оркестратор
├── blocks/                            # UI блоки
│   ├── CounterpartiesListBlock.tsx   # Список текущих контрагентов
│   ├── IncomingRequestsBlock.tsx     # Входящие заявки
│   ├── OutgoingRequestsBlock.tsx     # Исходящие заявки
│   ├── SearchOrganizationsBlock.tsx  # Поиск новых партнеров
│   ├── PartnerLinksBlock.tsx         # Партнерские ссылки
│   └── CounterpartyFiltersBlock.tsx  # Фильтры и сортировка
├── hooks/                            # Бизнес-логика
│   ├── useCounterpartyData.ts        # Загрузка данных GraphQL
│   ├── useCounterpartyActions.ts     # CRUD операции с заявками
│   ├── useCounterpartyFilters.ts     # Фильтрация и сортировка
│   └── usePartnerLinks.ts            # Управление партнерскими ссылками
└── types/
    └── counterparty-management.types.ts # TypeScript интерфейсы

📦 РАЗБИВКА ПО БЛОКАМ:

1. CounterpartiesListBlock.tsx (~150 строк)

• Список текущих контрагентов с карточками
• Действия: удалить, посмотреть детали
• Props: counterparties, onRemove, onViewDetails

2. IncomingRequestsBlock.tsx (~120 строк)

• Входящие заявки на партнерство
• Действия: принять, отклонить
• Props: requests, onAccept, onReject

3. OutgoingRequestsBlock.tsx (~100 строк)

• Исходящие заявки
• Действия: отменить заявку
• Props: requests, onCancel

4. SearchOrganizationsBlock.tsx (~180 строк)

• Поиск и фильтрация организаций
• Отправка заявок на партнерство
• Props: searchResults, onSendRequest, filters

5. PartnerLinksBlock.tsx (~120 строк)

• Генерация и копирование партнерских ссылок
• Статистика по ссылкам
• Props: partnerLink, onCopyLink, stats

6. CounterpartyFiltersBlock.tsx (~80 строк)

• Поиск по названию/ИНН
• Фильтр по типу организации
• Сортировка списков
• Props: filters, onFiltersChange

⚙️ HOOKS СТРУКТУРА:

useCounterpartyData.ts (~100 строк)

export function useCounterpartyData() {
  // GraphQL queries: counterparties, incoming, outgoing, search
  // Управление загрузкой данных
  // Кэширование результатов
  return {
    counterparties,
    incomingRequests,
    outgoingRequests,
    searchResults,
    loading,
    error,
    refetch
  }
}

useCounterpartyActions.ts (~120 строк)

export function useCounterpartyActions() {
  // GraphQL mutations: respond, cancel, remove
  // Обработка успешных операций
  // Обновление кэша после операций
  return {
    acceptRequest,
    rejectRequest,
    cancelRequest,
    removeCounterparty,
    sendRequest,
    loading
  }
}

useCounterpartyFilters.ts (~80 строк)

export function useCounterpartyFilters(data: Organization[]) {
  // Поиск по названию/ИНН
  // Фильтрация по типу
  // Сортировка по полям
  return {
    filteredData,
    searchQuery,
    typeFilter,
    sortConfig,
    updateFilters,
    updateSort
  }
}

usePartnerLinks.ts (~60 строк)

export function usePartnerLinks() {
  // Генерация партнерских ссылок
  // Копирование в буфер обмена
  // Статистика переходов
  return {
    partnerLink,
    generateLink,
    copyToClipboard,
    linkStats
  }
}

---

📋 ЧЕКЛИСТ РЕАЛИЗАЦИИ

🔄 ЭТАП 1: ПОДГОТОВКА (1 день)

Для Sales-Tab:

• Создать папочную структуру sales-tab/
• Создать заготовки файлов (index.tsx, blocks/, hooks/, types/)
• Определить TypeScript интерфейсы в sales-analytics.types.ts
• Проанализировать зависимости (Recharts, GraphQL queries)

Для Market-Counterparties:

• Создать папочную структуру market-counterparties/
• Создать заготовки файлов (index.tsx, blocks/, hooks/, types/)
• Определить TypeScript интерфейсы в counterparty-management.types.ts
• Проанализировать GraphQL queries и mutations

🔄 ЭТАП 2: ТИПЫ И HOOKS (2-3 дня)

Sales-Tab:

• Реализовать sales-analytics.types.ts с интерфейсами
• Создать useSalesData.ts - основной hook для данных
• Создать useSalesFilters.ts - фильтрация и сортировка
• Создать useSalesChart.ts - логика графика
• Создать useSalesTable.ts - логика таблицы
• Покрыть hooks тестами

Market-Counterparties:

• Реализовать counterparty-management.types.ts
• Создать useCounterpartyData.ts - GraphQL интеграция
• Создать useCounterpartyActions.ts - мутации
• Создать useCounterpartyFilters.ts - фильтрация
• Создать usePartnerLinks.ts - партнерские ссылки
• Покрыть hooks тестами

🔄 ЭТАП 3: UI БЛОКИ (3-4 дня)

Sales-Tab Блоки:

• PeriodFilterBlock.tsx - фильтры периода
• SalesChartBlock.tsx - график с Recharts
• SalesTableBlock.tsx - таблица данных
• MetricsToggleBlock.tsx - переключение метрик
• StatsSummaryBlock.tsx - итоговая статистика

Market-Counterparties Блоки:

• CounterpartiesListBlock.tsx - список контрагентов
• IncomingRequestsBlock.tsx - входящие заявки
• OutgoingRequestsBlock.tsx - исходящие заявки
• SearchOrganizationsBlock.tsx - поиск организаций
• PartnerLinksBlock.tsx - партнерские ссылки
• CounterpartyFiltersBlock.tsx - фильтры

🔄 ЭТАП 4: ИНТЕГРАЦИЯ (1-2 дня)

Оркестраторы:

• Реализовать sales-tab/index.tsx - композиция блоков
• Реализовать market-counterparties/index.tsx - композиция блоков
• Обновить импорты в родительских компонентах
• Проверить TypeScript ошибки
• Запустить линтер

🔄 ЭТАП 5: ТЕСТИРОВАНИЕ И ОПТИМИЗАЦИЯ (1-2 дня)

Функциональное тестирование:

• Проверить все функции Sales-Tab
• Проверить все функции Market-Counterparties
• Проверить GraphQL интеграции
• Проверить производительность

Оптимизация:

• Добавить React.memo где необходимо
• Оптимизировать useCallback/useMemo
• Проверить bundle size
• Исправить ESLint warnings

---

📊 МЕТРИКИ УСПЕХА

🎯 КОЛИЧЕСТВЕННЫЕ ЦЕЛИ:

До рефакторинга:

• Sales-Tab: 906 строк, 13 hooks, средняя сложность
• Market-Counterparties: 835 строк, 6 hooks, средняя сложность

После рефакторинга:

• Главные файлы: <100 строк каждый
• Блоки: 60-200 строк каждый
• Hooks: 60-120 строк каждый
• TypeScript coverage: 100%
• ESLint warnings: 0

📈 КАЧЕСТВЕННЫЕ ЦЕЛИ:

• Легкость добавления новых метрик в Sales-Tab
• Простота добавления новых типов заявок в Market-Counterparties
• Переиспользование блоков в других компонентах
• Улучшение производительности (lazy loading, memoization)
• Упрощение тестирования (изолированные hooks и блоки)

---

🔧 ИНСТРУМЕНТЫ И ТЕХНОЛОГИИ

📚 ИСПОЛЬЗУЕМЫЕ БИБЛИОТЕКИ:

Sales-Tab:

• Recharts (графики)
• Apollo Client (GraphQL)
• Lucide React (иконки)
• Shadcn/ui (UI компоненты)

Market-Counterparties:

• Apollo Client (GraphQL)
• Sonner (уведомления)
• Lucide React (иконки)
• Shadcn/ui (UI компоненты)

🛠️ ВСПОМОГАТЕЛЬНЫЕ ИНСТРУМЕНТЫ:

• TypeScript для типизации
• ESLint для качества кода
• Jest для тестирования hooks
• React Testing Library для UI тестов

---

📅 ВРЕМЕННЫЕ РАМКИ

📊 SALES-TAB: 7-8 дней

• Подготовка: 1 день
• Hooks: 3 дня
• Блоки: 3 дня
• Интеграция: 1 день

🤝 MARKET-COUNTERPARTIES: 6-7 дней

• Подготовка: 1 день
• Hooks: 2 дня
• Блоки: 3 дня
• Интеграция: 1 день

🎯 ОБЩЕЕ ВРЕМЯ: 13-15 дней (2-3 недели)

Можно выполнять параллельно двумя разработчиками для ускорения.

---

🚨 РИСКИ И МИТИГАЦИИ

⚠️ ПОТЕНЦИАЛЬНЫЕ РИСКИ:

1. GraphQL интеграции - сложные queries/mutations

   • Митигация: Тщательное тестирование с mock данными

2. Recharts конфигурация - сложная настройка графиков

   • Митигация: Изолировать логику графика в отдельный hook

3. Состояние фильтров - сложная синхронизация

   • Митигация: Использовать центральный state management hook

4. Performance - много перерендеров

   • Митигация: React.memo + оптимизированные callbacks

🛡️ СТРАТЕГИИ ОТКАТА:

• Сохранить исходные файлы с суффиксом .backup
• Использовать feature branch для разработки
• Постепенная миграция блок за блоком
• Возможность откатиться на любом этапе

---

🏁 СЛЕДУЮЩИЕ ШАГИ

🎯 ГОТОВНОСТЬ К СТАРТУ:

1. Определить исполнителей - 1-2 разработчика
2. Выбрать компонент для начала - Sales-Tab или Market-Counterparties
3. Создать feature branch - например feature/modular-sales-tab
4. Начать с этапа 1 - создание папочной структуры

🚀 РЕКОМЕНДАЦИИ:

• Начать с Market-Counterparties - проще, меньше зависимостей
• Использовать парное программирование для ускорения
• Тестировать каждый этап перед переходом к следующему
• Документировать изменения для будущих рефакторингов

---

Создано: Claude Code AI
Дата: 17 сентября 2025
Статус: Готов к реализации
Следующий review: После завершения первого компонента