# 📊 ПЛАН РЕФАКТОРИНГА: 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 строк)
```typescript
export function useSalesData(period: string, startDate?: string, endDate?: string) {
  // GraphQL запросы к WB API
  // Кэширование и обновление данных
  // Обработка ошибок
  return {
    salesData,
    loading,
    error,
    refetch,
    getCachedData,
    setCachedData
  }
}
```

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

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

**useSalesTable.ts** (~90 строк)
```typescript
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 строк)
```typescript
export function useCounterpartyData() {
  // GraphQL queries: counterparties, incoming, outgoing, search
  // Управление загрузкой данных
  // Кэширование результатов
  return {
    counterparties,
    incomingRequests,
    outgoingRequests,
    searchResults,
    loading,
    error,
    refetch
  }
}
```

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

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

**usePartnerLinks.ts** (~60 строк)
```typescript
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:** После завершения первого компонента