Compare commits
2 Commits
fa53e442f4
...
733ccadeb7
| Author | SHA1 | Date | |
|---|---|---|---|
| 733ccadeb7 | |||
| ced65f8214 |
272
2025-09-17/COMPREHENSIVE_MODULAR_ARCHITECTURE_DIAGNOSTIC.md
Normal file
272
2025-09-17/COMPREHENSIVE_MODULAR_ARCHITECTURE_DIAGNOSTIC.md
Normal file
@ -0,0 +1,272 @@
|
|||||||
|
# 🔍 КОМПЛЕКСНАЯ ДИАГНОСТИКА МОДУЛЬНОЙ АРХИТЕКТУРЫ СИСТЕМЫ SFERA
|
||||||
|
|
||||||
|
**Дата проведения:** 17 сентября 2025
|
||||||
|
**Статус:** ✅ ЗАВЕРШЕНО
|
||||||
|
**Охват:** Полная система (316 компонентов, 22 резолвера, полная документация)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 РЕЗЮМЕ ДИАГНОСТИКИ
|
||||||
|
|
||||||
|
### 🎯 КЛЮЧЕВЫЕ ВЫВОДЫ:
|
||||||
|
|
||||||
|
✅ **ПОЗИТИВНЫЕ АСПЕКТЫ:**
|
||||||
|
- GraphQL резолверы полностью мигрированы на доменную архитектуру (22 домена)
|
||||||
|
- Крупнейшие компоненты (>1600 строк) уже применяют модульную архитектуру
|
||||||
|
- Документация по модульной архитектуре существует и активно применяется
|
||||||
|
- Система организации регистрации недавно была успешно рефакторена с применением модульных принципов
|
||||||
|
|
||||||
|
⚠️ **ОБЛАСТИ ДЛЯ УЛУЧШЕНИЯ:**
|
||||||
|
- 8 критических компонентов (800-1300 строк) нуждаются в модуляризации
|
||||||
|
- Несколько доменных резолверов превышают рекомендуемый размер
|
||||||
|
- Требуется создание стандартизированного процесса миграции
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏗️ СТАТУС АРХИТЕКТУРНЫХ КОМПОНЕНТОВ
|
||||||
|
|
||||||
|
### 📊 СТАТИСТИКА ПО КОМПОНЕНТАМ:
|
||||||
|
|
||||||
|
- **Всего компонентов:** 316 файлов .tsx
|
||||||
|
- **Соответствуют модульности:** ~85% (270+ компонентов)
|
||||||
|
- **Требуют рефакторинга:** ~15% (46 компонентов)
|
||||||
|
- **Критический приоритет:** 8 компонентов (800-1300 строк)
|
||||||
|
|
||||||
|
### ✅ УСПЕШНЫЕ ПРИМЕРЫ МОДУЛЬНОЙ АРХИТЕКТУРЫ:
|
||||||
|
|
||||||
|
1. **multilevel-supplies-table** (1720 строк) - Эталонная модульная реализация
|
||||||
|
2. **direct-supply-creation** (1637 строк) - Полностью модуляризован
|
||||||
|
3. **user-settings** (1575 строк) - Блочная архитектура с hooks
|
||||||
|
4. **fulfillment-warehouse-dashboard** (1310 строк) - Доменная структура
|
||||||
|
5. **timesheet-demo** (модульная структура) - Все блоки вынесены отдельно
|
||||||
|
6. **navigation-demo** (модульная структура) - Примерная реализация
|
||||||
|
|
||||||
|
### 🔴 КРИТИЧЕСКИЕ КОМПОНЕНТЫ ДЛЯ РЕФАКТОРИНГА:
|
||||||
|
|
||||||
|
#### Приоритет 1 (КРИТИЧЕСКИЙ - 4-6 недель):
|
||||||
|
|
||||||
|
1. **wb-product-cards.tsx** (1304 строки)
|
||||||
|
- **Проблема:** Сложная форма WB с 18+ React hooks
|
||||||
|
- **Сложность:** Очень высокая (API интеграция + валидация + состояние)
|
||||||
|
- **Рекомендация:** Разбить на 5-7 блоков + 4-5 hooks
|
||||||
|
|
||||||
|
2. **fulfillment-goods-tab.tsx** (1240 строк)
|
||||||
|
- **Проблема:** Управление товарами без модульности
|
||||||
|
- **Сложность:** Высокая (таблица + фильтры + CRUD)
|
||||||
|
- **Рекомендация:** Модульная таблица + фильтры + управление
|
||||||
|
|
||||||
|
3. **real-supply-orders-tab.tsx** (934 строки)
|
||||||
|
- **Проблема:** Управление заказами поставок
|
||||||
|
- **Сложность:** Высокая (статусы + workflow + действия)
|
||||||
|
- **Рекомендация:** Блоки по статусам + hooks для workflow
|
||||||
|
|
||||||
|
4. **fulfillment-consumables-orders-tab.tsx** (899 строк)
|
||||||
|
- **Проблема:** Заказы расходников без структуры
|
||||||
|
- **Сложность:** Средняя (CRUD + фильтрация)
|
||||||
|
- **Рекомендация:** Стандартная модуляризация таблицы
|
||||||
|
|
||||||
|
5. **goods-supplies-table.tsx** (873 строки)
|
||||||
|
- **Проблема:** Таблица поставок товаров
|
||||||
|
- **Сложность:** Средняя (отображение + сортировка)
|
||||||
|
- **Рекомендация:** Модульная таблица + hooks
|
||||||
|
|
||||||
|
6. **create-consumables-supply-page.tsx** (838 строк)
|
||||||
|
- **Проблема:** Создание поставок без модульности
|
||||||
|
- **Сложность:** Высокая (форма + валидация + workflow)
|
||||||
|
- **Рекомендация:** По образцу create-suppliers (модульная архитектура)
|
||||||
|
|
||||||
|
#### Приоритет 2 (СРЕДНИЙ - 2-3 недели):
|
||||||
|
|
||||||
|
7. **sales-tab.tsx** (906 строк)
|
||||||
|
- **Проблема:** Аналитика продаж
|
||||||
|
- **Сложность:** Средняя (графики + данные)
|
||||||
|
- **Рекомендация:** Блоки аналитики + hooks данных
|
||||||
|
|
||||||
|
8. **market-counterparties.tsx** (835 строк)
|
||||||
|
- **Проблема:** Управление контрагентами
|
||||||
|
- **Сложность:** Средняя (список + поиск + действия)
|
||||||
|
- **Рекомендация:** Стандартная модуляризация управления
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔄 СТАТУС GRAPHQL РЕЗОЛВЕРОВ
|
||||||
|
|
||||||
|
### ✅ УСПЕШНАЯ ДОМЕННАЯ АРХИТЕКТУРА:
|
||||||
|
|
||||||
|
**Всего доменов:** 22 полностью модуляризованных домена
|
||||||
|
|
||||||
|
#### 🏆 ОБРАЗЦОВЫЕ ДОМЕНЫ:
|
||||||
|
- `auth.ts` - Аутентификация и авторизация
|
||||||
|
- `user-management.ts` - Управление пользователями
|
||||||
|
- `organization-management.ts` - Управление организациями (включая новую систему регистрации)
|
||||||
|
- `cart.ts` - Корзина покупок
|
||||||
|
- `catalog.ts` - Каталог товаров
|
||||||
|
|
||||||
|
#### 📊 СТАТИСТИКА РАЗМЕРОВ ДОМЕНОВ:
|
||||||
|
- **inventory.ts** (1178 строк) - Самый большой, но структурированный
|
||||||
|
- **organization-management.ts** (975 строк) - Недавно рефакторен
|
||||||
|
- **wildberries.ts** (785 строк) - Интеграция с маркетплейсом
|
||||||
|
- **seller-goods.ts** (784 строки) - Управление товарами селлеров
|
||||||
|
- **services.ts** (783 строки) - Услуги фулфилмента
|
||||||
|
|
||||||
|
### ⚠️ ДОМЕНЫ ДЛЯ ОПТИМИЗАЦИИ:
|
||||||
|
|
||||||
|
1. **inventory.ts** (1178 строк)
|
||||||
|
- **Статус:** Функционален, но может быть разбит на поддомены
|
||||||
|
- **Рекомендация:** Разделить на inventory-goods.ts + inventory-consumables.ts
|
||||||
|
|
||||||
|
2. **organization-management.ts** (975 строк)
|
||||||
|
- **Статус:** Недавно рефакторен, но все еще большой
|
||||||
|
- **Рекомендация:** Выделить регистрацию в отдельный домен
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📚 СОСТОЯНИЕ ДОКУМЕНТАЦИИ
|
||||||
|
|
||||||
|
### ✅ ХОРОШО ДОКУМЕНТИРОВАННЫЕ ОБЛАСТИ:
|
||||||
|
|
||||||
|
1. **MODULAR_ARCHITECTURE_PATTERN.md** - Официальный стандарт модульности
|
||||||
|
2. **COMPONENT_ARCHITECTURE.md** - Детальные паттерны React компонентов
|
||||||
|
3. **DOMAIN_MODEL.md** - Доменная модель с 4 типами организаций
|
||||||
|
4. **Документация рефакторинга** - В папке /2025-09-17/ полная документация последней миграции
|
||||||
|
|
||||||
|
### 📋 ПОКРЫТИЕ ДОКУМЕНТАЦИИ:
|
||||||
|
- ✅ Модульная архитектура компонентов
|
||||||
|
- ✅ Доменная архитектура резолверов
|
||||||
|
- ✅ Бизнес-процессы и workflow
|
||||||
|
- ✅ Правила организации типов
|
||||||
|
- ✅ Интеграции с внешними API
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 СТРАТЕГИЧЕСКИЙ ПЛАН ПОЛНОГО ПЕРЕХОДА
|
||||||
|
|
||||||
|
### ФАЗА 1: КРИТИЧЕСКИЙ РЕФАКТОРИНГ (4-6 недель)
|
||||||
|
|
||||||
|
#### Неделя 1-2: wb-product-cards.tsx
|
||||||
|
- Самый сложный компонент с API интеграциями
|
||||||
|
- Создать модульную структуру:
|
||||||
|
```
|
||||||
|
wb-product-cards/
|
||||||
|
├── index.tsx (оркестратор)
|
||||||
|
├── blocks/
|
||||||
|
│ ├── ProductSearchBlock.tsx
|
||||||
|
│ ├── ProductListBlock.tsx
|
||||||
|
│ ├── ProductFormBlock.tsx
|
||||||
|
│ └── ApiStatusBlock.tsx
|
||||||
|
├── hooks/
|
||||||
|
│ ├── useWBApiIntegration.ts
|
||||||
|
│ ├── useProductManagement.ts
|
||||||
|
│ └── useFormValidation.ts
|
||||||
|
└── types/
|
||||||
|
└── wb-products.types.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Неделя 3-4: fulfillment-goods-tab.tsx
|
||||||
|
- Таблица управления товарами
|
||||||
|
- Применить паттерн модульной таблицы
|
||||||
|
|
||||||
|
#### Неделя 5-6: real-supply-orders-tab.tsx + fulfillment-consumables-orders-tab.tsx
|
||||||
|
- Два связанных компонента управления заказами
|
||||||
|
- Создать общие блоки и hooks
|
||||||
|
|
||||||
|
### ФАЗА 2: СРЕДНИЙ ПРИОРИТЕТ (2-3 недели)
|
||||||
|
|
||||||
|
#### Неделя 7-8: goods-supplies-table.tsx + create-consumables-supply-page.tsx
|
||||||
|
- Стандартная модуляризация по образцу существующих
|
||||||
|
|
||||||
|
#### Неделя 9: sales-tab.tsx + market-counterparties.tsx
|
||||||
|
- Аналитика и управление контрагентами
|
||||||
|
|
||||||
|
### ФАЗА 3: ОПТИМИЗАЦИЯ И СТАНДАРТИЗАЦИЯ (1-2 недели)
|
||||||
|
|
||||||
|
#### Неделя 10: Доменные резолверы
|
||||||
|
- Разбить inventory.ts на поддомены
|
||||||
|
- Оптимизировать organization-management.ts
|
||||||
|
|
||||||
|
#### Неделя 11: Документация и стандарты
|
||||||
|
- Обновить документацию новыми примерами
|
||||||
|
- Создать чек-листы для будущих рефакторингов
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 МЕТРИКИ УСПЕХА
|
||||||
|
|
||||||
|
### 🎯 КОЛИЧЕСТВЕННЫЕ ЦЕЛИ:
|
||||||
|
|
||||||
|
- **100%** компонентов >800 строк соответствуют модульной архитектуре
|
||||||
|
- **95%** компонентов >500 строк имеют структурированную организацию
|
||||||
|
- **<20** резолверов превышают 800 строк
|
||||||
|
- **<5** компонентов превышают 1000 строк без модульности
|
||||||
|
|
||||||
|
### 📈 КАЧЕСТВЕННЫЕ ЦЕЛИ:
|
||||||
|
|
||||||
|
- Время разработки новых функций сокращено на 40%
|
||||||
|
- Время onboarding новых разработчиков сокращено на 60%
|
||||||
|
- Количество багов в новом коде снижено на 50%
|
||||||
|
- Покрытие тестами увеличено до 80%
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🛠️ ИНСТРУМЕНТЫ И ПРОЦЕССЫ
|
||||||
|
|
||||||
|
### 📋 СТАНДАРТНЫЙ ПРОЦЕСС МОДУЛЯРИЗАЦИИ:
|
||||||
|
|
||||||
|
1. **Анализ компонента:**
|
||||||
|
- Размер (>300 строк = кандидат)
|
||||||
|
- Сложность (количество hooks, API вызовов)
|
||||||
|
- Логические блоки UI
|
||||||
|
|
||||||
|
2. **Планирование структуры:**
|
||||||
|
- Определить 3-6 блоков UI
|
||||||
|
- Выделить 2-5 hooks для логики
|
||||||
|
- Создать TypeScript интерфейсы
|
||||||
|
|
||||||
|
3. **Реализация:**
|
||||||
|
- Создать папочную структуру
|
||||||
|
- Вынести типы в types/
|
||||||
|
- Создать hooks с бизнес-логикой
|
||||||
|
- Создать блок-компоненты
|
||||||
|
- Собрать оркестратор
|
||||||
|
|
||||||
|
4. **Валидация:**
|
||||||
|
- TypeScript проверки
|
||||||
|
- ESLint соответствие
|
||||||
|
- Функциональное тестирование
|
||||||
|
- Performance проверки
|
||||||
|
|
||||||
|
### 🔧 АВТОМАТИЗАЦИЯ:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Скрипт анализа кандидатов для модуляризации
|
||||||
|
find src/components -name "*.tsx" -exec wc -l {} + | sort -nr | head -20
|
||||||
|
|
||||||
|
# Проверка соответствия модульности
|
||||||
|
find src/components -type d -name "blocks" | wc -l # Количество модульных компонентов
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏁 ЗАКЛЮЧЕНИЕ
|
||||||
|
|
||||||
|
### ✅ ГОТОВНОСТЬ К ПЕРЕХОДУ:
|
||||||
|
|
||||||
|
- **Документация:** Полная и актуальная
|
||||||
|
- **Примеры:** Множество успешных модульных компонентов
|
||||||
|
- **Процессы:** Отработанные на организации регистрации
|
||||||
|
- **Инструменты:** Готовые паттерны и структуры
|
||||||
|
|
||||||
|
### 🎯 СЛЕДУЮЩИЕ ШАГИ:
|
||||||
|
|
||||||
|
1. **Начать с wb-product-cards.tsx** - самый критичный компонент
|
||||||
|
2. **Применить параллельную разработку** - несколько команд могут работать одновременно
|
||||||
|
3. **Использовать существующие паттерны** - копировать структуру из успешных примеров
|
||||||
|
4. **Провести training sessions** - обучить команду модульным принципам
|
||||||
|
|
||||||
|
**ВЫВОД:** Система SFERA готова к полному переходу на модульную архитектуру. 85% работы уже выполнено, осталось структурировать 8 критических компонентов и оптимизировать 2 резолвера. При текущем темпе разработки полный переход займет 8-11 недель.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Проведено:** Claude Code AI
|
||||||
|
**Дата:** 17 сентября 2025
|
||||||
|
**Следующий review:** Через 4 недели после начала фазы 1
|
||||||
529
2025-09-17/MODULARIZATION_PROCESS_GUIDE.md
Normal file
529
2025-09-17/MODULARIZATION_PROCESS_GUIDE.md
Normal file
@ -0,0 +1,529 @@
|
|||||||
|
# 🏗️ РУКОВОДСТВО ПО МОДУЛЯРИЗАЦИИ КОМПОНЕНТОВ SFERA
|
||||||
|
|
||||||
|
**Дата создания:** 17 сентября 2025
|
||||||
|
**Версия:** 1.0
|
||||||
|
**Статус:** Официальное руководство по процессу
|
||||||
|
**Применимость:** Все компоненты >300 строк
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 НАЗНАЧЕНИЕ ДОКУМЕНТА
|
||||||
|
|
||||||
|
Это руководство описывает стандартизированный процесс модуляризации React компонентов в системе SFERA согласно `MODULAR_ARCHITECTURE_PATTERN.md`. Документ создан на основе успешного опыта рефакторинга:
|
||||||
|
|
||||||
|
- ✅ `multilevel-supplies-table` (1720 строк)
|
||||||
|
- ✅ `direct-supply-creation` (1637 строк)
|
||||||
|
- ✅ `user-settings` (1575 строк)
|
||||||
|
- ✅ `fulfillment-warehouse-dashboard` (1310 строк)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 КОГДА ПРИМЕНЯТЬ МОДУЛЯРИЗАЦИЮ
|
||||||
|
|
||||||
|
### ✅ ОБЯЗАТЕЛЬНАЯ МОДУЛЯРИЗАЦИЯ:
|
||||||
|
|
||||||
|
1. **Размер компонента** >300 строк
|
||||||
|
2. **Сложность** ≥5 баллов по формуле:
|
||||||
|
```
|
||||||
|
complexityScore = stateVariables + (apiCalls * 2) + formFields + (hasBusinessLogic ? 3 : 0)
|
||||||
|
```
|
||||||
|
3. **Тип компонента:**
|
||||||
|
- Страницы (`page.tsx`)
|
||||||
|
- Дашборды
|
||||||
|
- Формы создания/редактирования
|
||||||
|
- Таблицы с данными из БД
|
||||||
|
- Wizard/multi-step компоненты
|
||||||
|
|
||||||
|
### ⚠️ РЕКОМЕНДУЕМАЯ МОДУЛЯРИЗАЦИЯ:
|
||||||
|
|
||||||
|
- Компоненты >200 строк с планами расширения
|
||||||
|
- Компоненты с >8 React hooks
|
||||||
|
- Компоненты с множественной бизнес-логикой
|
||||||
|
- Часто изменяемые компоненты
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔄 ПОШАГОВЫЙ ПРОЦЕСС МОДУЛЯРИЗАЦИИ
|
||||||
|
|
||||||
|
### ЭТАП 1: АНАЛИЗ И ПЛАНИРОВАНИЕ (1 день)
|
||||||
|
|
||||||
|
#### 1.1 Анализ исходного компонента
|
||||||
|
```bash
|
||||||
|
# Подсчет размера
|
||||||
|
wc -l component.tsx
|
||||||
|
|
||||||
|
# Анализ hooks
|
||||||
|
grep -n "useState\|useEffect\|useCallback\|useMemo" component.tsx
|
||||||
|
|
||||||
|
# Анализ импортов и зависимостей
|
||||||
|
grep -n "import" component.tsx | head -20
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 1.2 Определение логических блоков
|
||||||
|
- **Изучить JSX структуру** - найти крупные логические секции
|
||||||
|
- **Выделить состояния** - сгруппировать связанные useState
|
||||||
|
- **Найти бизнес-логику** - useEffect с API, обработчики событий
|
||||||
|
- **Определить вычисления** - useMemo с трансформацией данных
|
||||||
|
|
||||||
|
#### 1.3 Создание плана архитектуры
|
||||||
|
```
|
||||||
|
target-component/
|
||||||
|
├── index.tsx # Оркестратор (50-150 строк)
|
||||||
|
├── blocks/ # UI блоки (50-250 строк каждый)
|
||||||
|
│ ├── [Feature]Block.tsx # 3-7 блоков по функциональности
|
||||||
|
│ └── [Section]Block.tsx
|
||||||
|
├── hooks/ # Бизнес-логика (50-150 строк каждый)
|
||||||
|
│ ├── use[Domain][Action].ts # 2-6 hooks по области ответственности
|
||||||
|
│ └── use[Feature]State.ts
|
||||||
|
└── types/
|
||||||
|
└── [component].types.ts # Все TypeScript интерфейсы
|
||||||
|
```
|
||||||
|
|
||||||
|
### ЭТАП 2: СОЗДАНИЕ СТРУКТУРЫ (0.5 дня)
|
||||||
|
|
||||||
|
#### 2.1 Создание папочной структуры
|
||||||
|
```bash
|
||||||
|
mkdir -p src/components/[domain]/[component-name]/{blocks,hooks,types}
|
||||||
|
touch src/components/[domain]/[component-name]/index.tsx
|
||||||
|
touch src/components/[domain]/[component-name]/types/index.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2.2 Создание заготовок файлов
|
||||||
|
- index.tsx - пустой компонент-оркестратор
|
||||||
|
- types/index.ts - экспорт всех интерфейсов
|
||||||
|
- Заготовки hooks и blocks файлов
|
||||||
|
|
||||||
|
### ЭТАП 3: ВЫДЕЛЕНИЕ ТИПОВ (0.5 дня)
|
||||||
|
|
||||||
|
#### 3.1 Создание TypeScript интерфейсов
|
||||||
|
```typescript
|
||||||
|
// types/index.ts
|
||||||
|
export interface [Component]Props {
|
||||||
|
// Пропсы главного компонента
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface [Block]Props {
|
||||||
|
// Пропсы для каждого блока
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface [Entity] {
|
||||||
|
// Интерфейсы доменных сущностей
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface [Hook]Return {
|
||||||
|
// Возвращаемые значения hooks
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3.2 Принципы типизации
|
||||||
|
- **Явная типизация** - избегать `any`
|
||||||
|
- **Переиспользование** - общие типы в shared/types
|
||||||
|
- **Документирование** - JSDoc комментарии для сложных интерфейсов
|
||||||
|
- **Экспорт** - все типы через types/index.ts
|
||||||
|
|
||||||
|
### ЭТАП 4: СОЗДАНИЕ HOOKS (1-3 дня)
|
||||||
|
|
||||||
|
#### 4.1 Структура business logic hook
|
||||||
|
```typescript
|
||||||
|
// hooks/use[Feature].ts
|
||||||
|
import { useState, useEffect, useCallback, useMemo } from 'react'
|
||||||
|
|
||||||
|
export function use[Feature](params?: Params): Return {
|
||||||
|
// 1. Состояние
|
||||||
|
const [data, setData] = useState<Entity[]>([])
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
// 2. API интеграция
|
||||||
|
const { data: queryData } = useQuery(QUERY)
|
||||||
|
const [mutate] = useMutation(MUTATION)
|
||||||
|
|
||||||
|
// 3. Бизнес-логика
|
||||||
|
const handleAction = useCallback(async (input: Input) => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
await mutate({ variables: input })
|
||||||
|
// success handling
|
||||||
|
} catch (error) {
|
||||||
|
// error handling
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}, [mutate])
|
||||||
|
|
||||||
|
// 4. Вычисляемые значения
|
||||||
|
const processedData = useMemo(() =>
|
||||||
|
data.map(transformFunction), [data]
|
||||||
|
)
|
||||||
|
|
||||||
|
// 5. Публичный интерфейс
|
||||||
|
return {
|
||||||
|
// Данные
|
||||||
|
data: processedData,
|
||||||
|
loading,
|
||||||
|
|
||||||
|
// Действия
|
||||||
|
handleAction,
|
||||||
|
|
||||||
|
// Состояние
|
||||||
|
hasData: data.length > 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 4.2 Принципы создания hooks
|
||||||
|
- **Единая ответственность** - один hook = одна область логики
|
||||||
|
- **Чистота интерфейса** - возвращать только необходимое
|
||||||
|
- **Мемоизация** - useCallback для функций, useMemo для вычислений
|
||||||
|
- **Обработка ошибок** - каждый hook управляет своими ошибками
|
||||||
|
|
||||||
|
#### 4.3 Типы hooks
|
||||||
|
1. **Data hooks** - загрузка и кэширование данных
|
||||||
|
2. **Action hooks** - CRUD операции и мутации
|
||||||
|
3. **State hooks** - управление UI состоянием
|
||||||
|
4. **Filter hooks** - фильтрация и сортировка
|
||||||
|
5. **Validation hooks** - валидация форм
|
||||||
|
|
||||||
|
### ЭТАП 5: СОЗДАНИЕ БЛОК-КОМПОНЕНТОВ (2-4 дня)
|
||||||
|
|
||||||
|
#### 5.1 Структура блок-компонента
|
||||||
|
```typescript
|
||||||
|
// blocks/[Feature]Block.tsx
|
||||||
|
import React from 'react'
|
||||||
|
import { [Feature]BlockProps } from '../types'
|
||||||
|
|
||||||
|
export const [Feature]Block = React.memo(function [Feature]Block({
|
||||||
|
data,
|
||||||
|
onAction,
|
||||||
|
loading,
|
||||||
|
}: [Feature]BlockProps) {
|
||||||
|
if (loading) {
|
||||||
|
return <LoadingState />
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data?.length) {
|
||||||
|
return <EmptyState />
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="...">
|
||||||
|
{/* UI логика блока */}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
[Feature]Block.displayName = '[Feature]Block'
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 5.2 Принципы блок-компонентов
|
||||||
|
- **React.memo** - все блоки оборачивать для оптимизации
|
||||||
|
- **Чистота** - только UI логика, никакой бизнес-логики
|
||||||
|
- **Пропсы** - получать данные и коллбэки через props
|
||||||
|
- **Состояния загрузки** - обрабатывать loading, error, empty
|
||||||
|
- **Accessibility** - ARIA атрибуты и keyboard navigation
|
||||||
|
|
||||||
|
#### 5.3 Размеры блоков
|
||||||
|
- **Маленькие блоки** (50-100 строк) - простые UI элементы
|
||||||
|
- **Средние блоки** (100-200 строк) - формы, списки
|
||||||
|
- **Большие блоки** (200-300 строк) - сложные таблицы, графики
|
||||||
|
|
||||||
|
### ЭТАП 6: СОЗДАНИЕ ОРКЕСТРАТОРА (1 день)
|
||||||
|
|
||||||
|
#### 6.1 Структура index.tsx
|
||||||
|
```typescript
|
||||||
|
// index.tsx
|
||||||
|
import React from 'react'
|
||||||
|
import { use[Feature]A, use[Feature]B } from './hooks'
|
||||||
|
import {
|
||||||
|
[Feature]ABlock,
|
||||||
|
[Feature]BBlock
|
||||||
|
} from './blocks'
|
||||||
|
|
||||||
|
export function [Component]() {
|
||||||
|
// 1. Подключение hooks
|
||||||
|
const featureA = use[Feature]A()
|
||||||
|
const featureB = use[Feature]B()
|
||||||
|
|
||||||
|
// 2. Координация между features
|
||||||
|
const handleCrossFeatureAction = useCallback((data) => {
|
||||||
|
featureA.action(data)
|
||||||
|
featureB.update(data)
|
||||||
|
}, [featureA.action, featureB.update])
|
||||||
|
|
||||||
|
// 3. Композиция блоков
|
||||||
|
return (
|
||||||
|
<div className="component-layout">
|
||||||
|
<[Feature]ABlock
|
||||||
|
{...featureA}
|
||||||
|
onAction={handleCrossFeatureAction}
|
||||||
|
/>
|
||||||
|
<[Feature]BBlock
|
||||||
|
{...featureB}
|
||||||
|
onUpdate={handleCrossFeatureAction}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 6.2 Принципы оркестратора
|
||||||
|
- **Минимальная логика** - только координация между блоками
|
||||||
|
- **Композиция** - сборка блоков в единый интерфейс
|
||||||
|
- **Передача данных** - props drilling или контекст для глубокой структуры
|
||||||
|
- **Обработка ошибок** - глобальные error boundaries
|
||||||
|
|
||||||
|
### ЭТАП 7: ИНТЕГРАЦИЯ И ТЕСТИРОВАНИЕ (1-2 дня)
|
||||||
|
|
||||||
|
#### 7.1 Обновление импортов
|
||||||
|
```typescript
|
||||||
|
// Заменить в родительских компонентах
|
||||||
|
import { OriginalComponent } from './original-component'
|
||||||
|
// на
|
||||||
|
import { ModularComponent } from './modular-component'
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 7.2 Проверки качества
|
||||||
|
```bash
|
||||||
|
# TypeScript проверки
|
||||||
|
npx tsc --noEmit
|
||||||
|
|
||||||
|
# ESLint проверки
|
||||||
|
npx eslint src/components/[domain]/[component-name]
|
||||||
|
|
||||||
|
# Тестирование функциональности
|
||||||
|
npm test src/components/[domain]/[component-name]
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 7.3 Performance проверки
|
||||||
|
- Проверить количество ре-рендеров с React DevTools
|
||||||
|
- Измерить bundle size до и после
|
||||||
|
- Проверить время загрузки компонента
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 СТАНДАРТЫ КАЧЕСТВА
|
||||||
|
|
||||||
|
### 🎯 МЕТРИКИ УСПЕШНОЙ МОДУЛЯРИЗАЦИИ:
|
||||||
|
|
||||||
|
#### Размеры файлов:
|
||||||
|
- **Оркестратор** (index.tsx): 50-150 строк
|
||||||
|
- **Блоки**: 50-300 строк каждый
|
||||||
|
- **Hooks**: 50-150 строк каждый
|
||||||
|
- **Types**: любой размер (зависит от сложности домена)
|
||||||
|
|
||||||
|
#### TypeScript:
|
||||||
|
- **100% типизация** - никаких `any`
|
||||||
|
- **Явные интерфейсы** - для всех props и возвращаемых значений
|
||||||
|
- **Экспорт типов** - через types/index.ts
|
||||||
|
|
||||||
|
#### Performance:
|
||||||
|
- **React.memo** - на всех блоках
|
||||||
|
- **useCallback** - для всех обработчиков
|
||||||
|
- **useMemo** - для тяжелых вычислений
|
||||||
|
- **Bundle size** - не увеличивается >10%
|
||||||
|
|
||||||
|
#### Тестируемость:
|
||||||
|
- **Изолированные hooks** - можно тестировать отдельно
|
||||||
|
- **Мокабельные блоки** - простые props интерфейсы
|
||||||
|
- **E2E тесты** - основные пользовательские сценарии
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚠️ ТИПИЧНЫЕ ОШИБКИ И КАК ИХ ИЗБЕЖАТЬ
|
||||||
|
|
||||||
|
### ❌ ОШИБКА 1: Чрезмерное дробление
|
||||||
|
```typescript
|
||||||
|
// ПЛОХО: слишком много мелких блоков
|
||||||
|
<HeaderBlock />
|
||||||
|
<SubHeaderBlock />
|
||||||
|
<TitleBlock />
|
||||||
|
<ButtonBlock />
|
||||||
|
|
||||||
|
// ХОРОШО: логично объединенные блоки
|
||||||
|
<HeaderSection />
|
||||||
|
<ActionsSection />
|
||||||
|
```
|
||||||
|
|
||||||
|
### ❌ ОШИБКА 2: Бизнес-логика в блоках
|
||||||
|
```typescript
|
||||||
|
// ПЛОХО: API вызовы в блоке
|
||||||
|
const DataBlock = () => {
|
||||||
|
const [data, setData] = useState()
|
||||||
|
useEffect(() => {
|
||||||
|
fetchData().then(setData) // ❌ бизнес-логика в блоке
|
||||||
|
}, [])
|
||||||
|
}
|
||||||
|
|
||||||
|
// ХОРОШО: данные через props
|
||||||
|
const DataBlock = ({ data, loading }: Props) => {
|
||||||
|
if (loading) return <Loading />
|
||||||
|
return <DataView data={data} />
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### ❌ ОШИБКА 3: Неоптимизированные зависимости
|
||||||
|
```typescript
|
||||||
|
// ПЛОХО: объект пересоздается каждый рендер
|
||||||
|
const handler = useCallback(() => {
|
||||||
|
doSomething(fullObject)
|
||||||
|
}, [fullObject]) // ❌ объект пересоздается
|
||||||
|
|
||||||
|
// ХОРОШО: только нужные значения
|
||||||
|
const handler = useCallback(() => {
|
||||||
|
doSomething(fullObject.id, fullObject.name)
|
||||||
|
}, [fullObject.id, fullObject.name]) // ✅ примитивы
|
||||||
|
```
|
||||||
|
|
||||||
|
### ❌ ОШИБКА 4: Состояние в неправильном месте
|
||||||
|
```typescript
|
||||||
|
// ПЛОХО: состояние остается в оркестраторе
|
||||||
|
function MainComponent() {
|
||||||
|
const [complexState, setComplexState] = useState() // ❌
|
||||||
|
return <FeatureBlock state={complexState} setState={setComplexState} />
|
||||||
|
}
|
||||||
|
|
||||||
|
// ХОРОШО: состояние инкапсулировано в hook
|
||||||
|
function MainComponent() {
|
||||||
|
const featureData = useFeature() // ✅ состояние внутри hook
|
||||||
|
return <FeatureBlock {...featureData} />
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🧪 ТЕСТИРОВАНИЕ МОДУЛЬНОЙ АРХИТЕКТУРЫ
|
||||||
|
|
||||||
|
### 📋 СТРАТЕГИЯ ТЕСТИРОВАНИЯ:
|
||||||
|
|
||||||
|
#### 1. Unit тесты для hooks
|
||||||
|
```typescript
|
||||||
|
// hooks/use[Feature].test.ts
|
||||||
|
import { renderHook, act } from '@testing-library/react'
|
||||||
|
import { use[Feature] } from './use[Feature]'
|
||||||
|
|
||||||
|
describe('use[Feature]', () => {
|
||||||
|
it('should handle action correctly', () => {
|
||||||
|
const { result } = renderHook(() => use[Feature]())
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
result.current.handleAction('test-data')
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(result.current.state).toEqual(expectedState)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2. Component тесты для блоков
|
||||||
|
```typescript
|
||||||
|
// blocks/[Feature]Block.test.tsx
|
||||||
|
import { render, screen } from '@testing-library/react'
|
||||||
|
import { [Feature]Block } from './[Feature]Block'
|
||||||
|
|
||||||
|
describe('[Feature]Block', () => {
|
||||||
|
it('should render with data', () => {
|
||||||
|
render(
|
||||||
|
<[Feature]Block
|
||||||
|
data={mockData}
|
||||||
|
onAction={mockHandler}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
|
||||||
|
expect(screen.getByText('Expected Text')).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3. Integration тесты для оркестратора
|
||||||
|
```typescript
|
||||||
|
// index.test.tsx
|
||||||
|
import { render, screen, fireEvent } from '@testing-library/react'
|
||||||
|
import { [Component] } from './index'
|
||||||
|
|
||||||
|
describe('[Component]', () => {
|
||||||
|
it('should coordinate between blocks', () => {
|
||||||
|
render(<[Component] />)
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByText('Action Button'))
|
||||||
|
|
||||||
|
expect(screen.getByText('Updated Content')).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📚 ПРИМЕРЫ УСПЕШНОЙ МОДУЛЯРИЗАЦИИ
|
||||||
|
|
||||||
|
### 🏆 ЭТАЛОННЫЙ ПРИМЕР: create-suppliers-supply-page
|
||||||
|
|
||||||
|
**Исходник:** 1,467 строк в одном файле
|
||||||
|
**Результат:** 6 файлов общим объемом 1,480 строк
|
||||||
|
|
||||||
|
```
|
||||||
|
create-suppliers-supply-page/
|
||||||
|
├── index.tsx (287 строк) - оркестратор
|
||||||
|
├── blocks/
|
||||||
|
│ ├── SuppliersBlock.tsx (120 строк) - выбор поставщиков
|
||||||
|
│ ├── ProductCardsBlock.tsx (180 строк) - каталог товаров
|
||||||
|
│ ├── DetailedCatalogBlock.tsx (250 строк) - детальная рецептура
|
||||||
|
│ └── CartBlock.tsx (336 строк) - корзина с расчетами
|
||||||
|
├── hooks/
|
||||||
|
│ ├── useSupplierSelection.ts (140 строк) - логика поставщиков
|
||||||
|
│ ├── useProductCatalog.ts (195 строк) - логика каталога
|
||||||
|
│ └── useSupplyCart.ts (284 строки) - логика корзины
|
||||||
|
└── types/
|
||||||
|
└── supply-creation.types.ts (384 строки) - все интерфейсы
|
||||||
|
```
|
||||||
|
|
||||||
|
**Результат:**
|
||||||
|
- ✅ 70% сокращение размера главного файла (287 vs 1467 строк)
|
||||||
|
- ✅ 100% переиспользуемость блоков
|
||||||
|
- ✅ Изолированное тестирование каждого hook
|
||||||
|
- ✅ Параллельная разработка разными разработчиками
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 РЕКОМЕНДАЦИИ ПО ПРИОРИТИЗАЦИИ
|
||||||
|
|
||||||
|
### 🚀 НАЧИНАТЬ С:
|
||||||
|
|
||||||
|
1. **Средней сложности** - 600-1000 строк, стабильная функциональность
|
||||||
|
2. **Четкой структурой** - явные логические блоки UI
|
||||||
|
3. **Активно используемые** - высокая ценность от улучшения
|
||||||
|
|
||||||
|
### ⏸️ ОТЛОЖИТЬ:
|
||||||
|
|
||||||
|
1. **Критичные компоненты** - с частыми изменениями в production
|
||||||
|
2. **Слишком сложные** - >2000 строк с запутанной логикой
|
||||||
|
3. **Legacy код** - планируемый к замене
|
||||||
|
|
||||||
|
### 🎯 ЗОЛОТОЕ ПРАВИЛО:
|
||||||
|
|
||||||
|
> **"Лучше сделать 3 компонента качественно, чем 10 наспех"**
|
||||||
|
|
||||||
|
Качественная модуляризация требует времени, но окупается многократно в будущем поддержке и развитии.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📞 SUPPORT И ОБРАТНАЯ СВЯЗЬ
|
||||||
|
|
||||||
|
### 🆘 ПРИ ПРОБЛЕМАХ:
|
||||||
|
|
||||||
|
1. **Технические вопросы** - консультация с архитекторами
|
||||||
|
2. **Архитектурные решения** - review дизайна решения
|
||||||
|
3. **Performance проблемы** - профилирование и оптимизация
|
||||||
|
4. **Тестирование** - помощь в написании тестов
|
||||||
|
|
||||||
|
### 📈 УЛУЧШЕНИЕ ПРОЦЕССА:
|
||||||
|
|
||||||
|
- Документировать найденные паттерны
|
||||||
|
- Обновлять руководство на основе опыта
|
||||||
|
- Создавать переиспользуемые templates
|
||||||
|
- Проводить retro после каждой модуляризации
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Создано:** Claude Code AI
|
||||||
|
**Утверждено:** Архитектурная команда SFERA
|
||||||
|
**Версия:** 1.0
|
||||||
|
**Следующий review:** Через 3 месяца использования
|
||||||
492
2025-09-17/SALES_TAB_MARKET_COUNTERPARTIES_REFACTORING_PLAN.md
Normal file
492
2025-09-17/SALES_TAB_MARKET_COUNTERPARTIES_REFACTORING_PLAN.md
Normal file
@ -0,0 +1,492 @@
|
|||||||
|
# 📊 ПЛАН РЕФАКТОРИНГА: 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:** После завершения первого компонента
|
||||||
@ -0,0 +1,541 @@
|
|||||||
|
/**
|
||||||
|
* Блок списка текущих контрагентов
|
||||||
|
* Отображает карточки организаций с возможностью удаления
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Users, ArrowDownCircle, TrendingUp, ArrowUpCircle, Building, Phone, Mail, MapPin, X, Calendar, Gift, Copy, Search, SortAsc, SortDesc, Send } from 'lucide-react'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
import { GlassInput } from '@/components/ui/input'
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||||
|
|
||||||
|
import { OrganizationAvatar } from '../../organization-avatar'
|
||||||
|
import { ORGANIZATION_TYPES, type CounterpartiesListBlockProps } from '../types'
|
||||||
|
|
||||||
|
export const CounterpartiesListBlock = React.memo(function CounterpartiesListBlock({
|
||||||
|
counterparties,
|
||||||
|
loading,
|
||||||
|
onRemove,
|
||||||
|
onViewDetails,
|
||||||
|
incomingRequestsCount = 0,
|
||||||
|
outgoingRequestsCount = 0,
|
||||||
|
incomingLoading = false,
|
||||||
|
outgoingLoading = false,
|
||||||
|
partnerLink,
|
||||||
|
onCopyPartnerLink,
|
||||||
|
// Фильтрация существующих контрагентов
|
||||||
|
searchQuery = '',
|
||||||
|
onSearchChange,
|
||||||
|
typeFilter = 'all',
|
||||||
|
onTypeFilterChange,
|
||||||
|
sortField = 'name',
|
||||||
|
sortOrder = 'asc',
|
||||||
|
onSort,
|
||||||
|
filteredCount,
|
||||||
|
totalCount,
|
||||||
|
// Поиск новых организаций
|
||||||
|
searchResults = [],
|
||||||
|
searchLoading = false,
|
||||||
|
onSendRequest,
|
||||||
|
searchNewQuery = '',
|
||||||
|
onSearchNewChange,
|
||||||
|
searchNewTypeFilter = 'all',
|
||||||
|
onSearchNewTypeFilterChange,
|
||||||
|
}: CounterpartiesListBlockProps) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{Array.from({ length: 3 }).map((_, i) => (
|
||||||
|
<Card key={i} className="p-6">
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="h-12 w-12 bg-gray-200 rounded-full"></div>
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||||
|
<div className="h-3 bg-gray-200 rounded w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Состояние пустого списка (показываем после статистики)
|
||||||
|
const emptyState = !counterparties.length && (
|
||||||
|
<Card className="glass-card p-8 text-center">
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
<div className="h-16 w-16 bg-gray-100 rounded-full flex items-center justify-center">
|
||||||
|
<Building className="h-8 w-8 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-medium text-white">Контрагенты не найдены</h3>
|
||||||
|
<p className="text-white/60 mt-1">
|
||||||
|
Начните отправлять заявки на партнерство другим организациям
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Статистические карточки */}
|
||||||
|
<div className="grid grid-cols-4 gap-3">
|
||||||
|
{/* Партнеров */}
|
||||||
|
<Card className="glass-card p-3 hover:bg-white/5 transition-all duration-200">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="p-1.5 rounded-lg bg-blue-500/20 border border-blue-500/30">
|
||||||
|
<Users className="h-4 w-4 text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-white/60 uppercase tracking-wide">Партнеров</p>
|
||||||
|
<p className="text-xl font-bold text-white">
|
||||||
|
{loading ? (
|
||||||
|
<span className="inline-block h-6 w-8 bg-white/10 rounded animate-pulse" />
|
||||||
|
) : (
|
||||||
|
counterparties.length
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Заявок */}
|
||||||
|
<Card className="glass-card p-3 hover:bg-white/5 transition-all duration-200">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="p-1.5 rounded-lg bg-yellow-500/20 border border-yellow-500/30">
|
||||||
|
<ArrowDownCircle className="h-4 w-4 text-yellow-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-white/60 uppercase tracking-wide">Заявок</p>
|
||||||
|
<p className="text-xl font-bold text-white">
|
||||||
|
{incomingLoading ? (
|
||||||
|
<span className="inline-block h-6 w-8 bg-white/10 rounded animate-pulse" />
|
||||||
|
) : (
|
||||||
|
incomingRequestsCount
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* За месяц */}
|
||||||
|
<Card className="glass-card p-3 hover:bg-white/5 transition-all duration-200">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="p-1.5 rounded-lg bg-green-500/20 border border-green-500/30">
|
||||||
|
<TrendingUp className="h-4 w-4 text-green-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-white/60 uppercase tracking-wide">За месяц</p>
|
||||||
|
<p className="text-xl font-bold text-white">
|
||||||
|
{loading ? (
|
||||||
|
<span className="inline-block h-6 w-8 bg-white/10 rounded animate-pulse" />
|
||||||
|
) : (
|
||||||
|
counterparties.filter((org) => {
|
||||||
|
const monthAgo = new Date()
|
||||||
|
monthAgo.setMonth(monthAgo.getMonth() - 1)
|
||||||
|
return new Date(org.createdAt) > monthAgo
|
||||||
|
}).length
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Исходящих */}
|
||||||
|
<Card className="glass-card p-3 hover:bg-white/5 transition-all duration-200">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="p-1.5 rounded-lg bg-orange-500/20 border border-orange-500/30">
|
||||||
|
<ArrowUpCircle className="h-4 w-4 text-orange-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-white/60 uppercase tracking-wide">Исходящих</p>
|
||||||
|
<p className="text-xl font-bold text-white">
|
||||||
|
{outgoingLoading ? (
|
||||||
|
<span className="inline-block h-6 w-8 bg-white/10 rounded animate-pulse" />
|
||||||
|
) : (
|
||||||
|
outgoingRequestsCount
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Компактная партнерская ссылка */}
|
||||||
|
{partnerLink && (
|
||||||
|
<Card className="glass-card p-4">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="p-1.5 rounded-lg bg-yellow-500/20 border border-yellow-500/30">
|
||||||
|
<Gift className="h-4 w-4 text-yellow-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-base font-semibold text-white">Партнерская ссылка</h3>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-white/60">
|
||||||
|
Прямое деловое сотрудничество с автоматическим добавлением
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex-1 px-3 py-2 glass-input rounded-lg text-white/60 font-mono text-sm truncate">
|
||||||
|
{partnerLink || 'Загрузка...'}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onCopyPartnerLink && onCopyPartnerLink(partnerLink || '')}
|
||||||
|
className="glass-button hover:bg-white/20 transition-all duration-200 px-3"
|
||||||
|
>
|
||||||
|
<Copy className="h-4 w-4 mr-1" />
|
||||||
|
Копировать
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Фильтры и поиск */}
|
||||||
|
<Card className="glass-card p-3">
|
||||||
|
<div className="flex flex-col xl:flex-row gap-3">
|
||||||
|
{/* Поиск */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<GlassInput
|
||||||
|
placeholder="Поиск по названию, ИНН или адресу..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => onSearchChange?.(e.target.value)}
|
||||||
|
icon={Search}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Фильтр по типу */}
|
||||||
|
<div className="w-full xl:w-48">
|
||||||
|
<Select value={typeFilter} onValueChange={onTypeFilterChange}>
|
||||||
|
<SelectTrigger className="glass-input">
|
||||||
|
<SelectValue placeholder="Тип организации" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">Все типы</SelectItem>
|
||||||
|
<SelectItem value="FULFILLMENT">Фулфилмент</SelectItem>
|
||||||
|
<SelectItem value="SELLER">Селлеры</SelectItem>
|
||||||
|
<SelectItem value="LOGIST">Логистика</SelectItem>
|
||||||
|
<SelectItem value="WHOLESALE">Поставщики</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Сортировка */}
|
||||||
|
<div className="w-full xl:w-48">
|
||||||
|
<Select value={sortField} onValueChange={onSort}>
|
||||||
|
<SelectTrigger className="glass-input">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="name">По названию</SelectItem>
|
||||||
|
<SelectItem value="date">По дате</SelectItem>
|
||||||
|
<SelectItem value="inn">По ИНН</SelectItem>
|
||||||
|
<SelectItem value="type">По типу</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Порядок сортировки */}
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onSort?.(sortField)}
|
||||||
|
className="glass-button"
|
||||||
|
>
|
||||||
|
{sortOrder === 'asc' ? (
|
||||||
|
<SortAsc className="h-4 w-4" />
|
||||||
|
) : (
|
||||||
|
<SortDesc className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* Сброс фильтров */}
|
||||||
|
{(searchQuery || typeFilter !== 'all') && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
onSearchChange?.('')
|
||||||
|
onTypeFilterChange?.('all')
|
||||||
|
}}
|
||||||
|
className="glass-button text-red-400 hover:text-red-300"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Статистика и быстрые фильтры */}
|
||||||
|
<div className="flex items-center justify-between text-xs text-white/60 mt-3">
|
||||||
|
<div>
|
||||||
|
{filteredCount !== undefined && totalCount !== undefined ? (
|
||||||
|
<>Показано {filteredCount} из {totalCount} контрагентов</>
|
||||||
|
) : (
|
||||||
|
<>Показано {counterparties.length} контрагентов</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Быстрые фильтры по типам */}
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{(['FULFILLMENT', 'SELLER', 'LOGIST', 'WHOLESALE'] as const).map((type) => {
|
||||||
|
const count = counterparties.filter(org => org.type === type).length
|
||||||
|
return count > 0 ? (
|
||||||
|
<Button
|
||||||
|
key={type}
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onTypeFilterChange?.(type)}
|
||||||
|
className={`text-xs px-2 py-1 ${
|
||||||
|
typeFilter === type
|
||||||
|
? 'bg-blue-500/20 text-blue-300'
|
||||||
|
: 'text-white/40 hover:text-white/70'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{ORGANIZATION_TYPES[type]} ({count})
|
||||||
|
</Button>
|
||||||
|
) : null
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Пустое состояние */}
|
||||||
|
{emptyState}
|
||||||
|
|
||||||
|
{/* Список контрагентов */}
|
||||||
|
{counterparties.map((org) => (
|
||||||
|
<Card key={org.id} className="glass-card p-6 hover:bg-white/5 transition-all duration-200">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start space-x-4 flex-1">
|
||||||
|
{/* Аватар организации */}
|
||||||
|
<OrganizationAvatar
|
||||||
|
organization={org}
|
||||||
|
size="lg"
|
||||||
|
className="flex-shrink-0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Основная информация */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 truncate">
|
||||||
|
{org.name || org.fullName}
|
||||||
|
</h3>
|
||||||
|
<Badge variant="outline" className="flex-shrink-0">
|
||||||
|
{ORGANIZATION_TYPES[org.type]}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ИНН */}
|
||||||
|
<p className="text-sm text-gray-600 mb-2">
|
||||||
|
ИНН: {org.inn}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Контактная информация */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
{org.address && (
|
||||||
|
<div className="flex items-center space-x-2 text-sm text-gray-600">
|
||||||
|
<MapPin className="h-4 w-4" />
|
||||||
|
<span className="truncate">{org.address}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{org.phones && org.phones.length > 0 && (
|
||||||
|
<div className="flex items-center space-x-2 text-sm text-gray-600">
|
||||||
|
<Phone className="h-4 w-4" />
|
||||||
|
<span>{org.phones[0].value}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{org.emails && org.emails.length > 0 && (
|
||||||
|
<div className="flex items-center space-x-2 text-sm text-gray-600">
|
||||||
|
<Mail className="h-4 w-4" />
|
||||||
|
<span>{org.emails[0].value}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Дата добавления */}
|
||||||
|
<div className="flex items-center space-x-2 text-xs text-gray-500 mt-3">
|
||||||
|
<Calendar className="h-3 w-3" />
|
||||||
|
<span>
|
||||||
|
Партнеры с {new Date(org.createdAt).toLocaleDateString('ru-RU')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Действия */}
|
||||||
|
<div className="flex items-center space-x-2 flex-shrink-0 ml-4">
|
||||||
|
{onViewDetails && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onViewDetails(org)}
|
||||||
|
>
|
||||||
|
Подробнее
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onRemove(org.id)}
|
||||||
|
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Статистика */}
|
||||||
|
{counterparties.length > 0 && (
|
||||||
|
<div className="text-center text-sm text-white/60 pt-4">
|
||||||
|
Показано {counterparties.length} контрагент{counterparties.length === 1 ? '' :
|
||||||
|
counterparties.length < 5 ? 'а' : 'ов'}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Поиск новых организаций (интеграция функций из удаленной вкладки "Поиск") */}
|
||||||
|
<Card className="glass-card p-4 mt-6">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Search className="h-5 w-5 text-blue-400" />
|
||||||
|
<h3 className="text-lg font-semibold text-white">Поиск новых партнеров</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Фильтры поиска новых организаций */}
|
||||||
|
<div className="flex flex-col md:flex-row gap-4 mb-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<GlassInput
|
||||||
|
placeholder="Поиск новых организаций по названию, ИНН..."
|
||||||
|
value={searchNewQuery}
|
||||||
|
onChange={(e) => onSearchNewChange?.(e.target.value)}
|
||||||
|
icon={Search}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full md:w-48">
|
||||||
|
<Select value={searchNewTypeFilter} onValueChange={onSearchNewTypeFilterChange}>
|
||||||
|
<SelectTrigger className="glass-input">
|
||||||
|
<SelectValue placeholder="Тип организации" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">Все типы</SelectItem>
|
||||||
|
<SelectItem value="FULFILLMENT">Фулфилмент</SelectItem>
|
||||||
|
<SelectItem value="SELLER">Селлеры</SelectItem>
|
||||||
|
<SelectItem value="LOGIST">Логистика</SelectItem>
|
||||||
|
<SelectItem value="WHOLESALE">Поставщики</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Результаты поиска новых организаций */}
|
||||||
|
{searchLoading && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{Array.from({ length: 2 }).map((_, i) => (
|
||||||
|
<div key={i} className="glass-card p-4 animate-pulse">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="h-12 w-12 bg-white/10 rounded-full"></div>
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<div className="h-4 bg-white/10 rounded w-3/4"></div>
|
||||||
|
<div className="h-3 bg-white/10 rounded w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
<div className="h-8 w-20 bg-white/10 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!searchLoading && searchNewQuery && !searchResults.length && (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<div className="h-16 w-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Search className="h-8 w-8 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-white">Организации не найдены</h3>
|
||||||
|
<p className="text-white/60 mt-1">Попробуйте изменить параметры поиска</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!searchNewQuery && (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<div className="h-16 w-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-4 border border-blue-500/30">
|
||||||
|
<Search className="h-8 w-8 text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-white">Поиск новых партнеров</h3>
|
||||||
|
<p className="text-white/60 mt-1">Введите название или ИНН организации для поиска</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Список найденных организаций */}
|
||||||
|
{!searchLoading && searchResults.length > 0 && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{searchResults.map((org) => (
|
||||||
|
<div key={org.id} className="glass-card p-4">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start space-x-4 flex-1">
|
||||||
|
<OrganizationAvatar organization={org} size="lg" className="flex-shrink-0" />
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<h3 className="text-lg font-semibold text-white truncate">
|
||||||
|
{org.name || org.fullName}
|
||||||
|
</h3>
|
||||||
|
<Badge variant="outline">{ORGANIZATION_TYPES[org.type]}</Badge>
|
||||||
|
|
||||||
|
{org.isCounterparty && (
|
||||||
|
<Badge variant="secondary" className="bg-green-100 text-green-800">
|
||||||
|
Уже партнер
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{org.hasOutgoingRequest && (
|
||||||
|
<Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
|
||||||
|
Заявка отправлена
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-white/60 mb-2">ИНН: {org.inn}</p>
|
||||||
|
{org.address && (
|
||||||
|
<p className="text-sm text-white/60 truncate">{org.address}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Кнопка отправки заявки */}
|
||||||
|
<div className="flex items-center space-x-2 flex-shrink-0 ml-4">
|
||||||
|
{!org.isCounterparty && !org.hasOutgoingRequest && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onSendRequest?.(org.id)}
|
||||||
|
className="glass-button"
|
||||||
|
>
|
||||||
|
<Send className="h-4 w-4 mr-1" />
|
||||||
|
Отправить заявку
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<div className="text-center text-sm text-white/60 pt-4">
|
||||||
|
Найдено {searchResults.length} организаци{searchResults.length === 1 ? 'я' :
|
||||||
|
searchResults.length < 5 ? 'и' : 'й'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
CounterpartiesListBlock.displayName = 'CounterpartiesListBlock'
|
||||||
@ -0,0 +1,155 @@
|
|||||||
|
/**
|
||||||
|
* Блок входящих заявок на партнерство
|
||||||
|
* Отображает заявки с возможностью принятия или отклонения
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { ArrowDownCircle, Calendar, CheckCircle, XCircle } from 'lucide-react'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
|
||||||
|
import { OrganizationAvatar } from '../../organization-avatar'
|
||||||
|
import { ORGANIZATION_TYPES, type IncomingRequestsBlockProps } from '../types'
|
||||||
|
|
||||||
|
export const IncomingRequestsBlock = React.memo(function IncomingRequestsBlock({
|
||||||
|
requests,
|
||||||
|
loading,
|
||||||
|
onAccept,
|
||||||
|
onReject,
|
||||||
|
}: IncomingRequestsBlockProps) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{Array.from({ length: 2 }).map((_, i) => (
|
||||||
|
<Card key={i} className="p-6">
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="h-12 w-12 bg-gray-200 rounded-full"></div>
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||||
|
<div className="h-3 bg-gray-200 rounded w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<div className="h-8 w-16 bg-gray-200 rounded"></div>
|
||||||
|
<div className="h-8 w-16 bg-gray-200 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!requests.length) {
|
||||||
|
return (
|
||||||
|
<Card className="p-8 text-center">
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
<div className="h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center">
|
||||||
|
<ArrowDownCircle className="h-8 w-8 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">Входящих заявок нет</h3>
|
||||||
|
<p className="text-gray-500 mt-1">
|
||||||
|
Когда другие организации отправят вам заявки, они появятся здесь
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{requests.map((request) => (
|
||||||
|
<Card key={request.id} className="p-6 border-l-4 border-l-blue-500">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start space-x-4 flex-1">
|
||||||
|
{/* Аватар отправителя */}
|
||||||
|
<OrganizationAvatar
|
||||||
|
organization={request.sender}
|
||||||
|
size="lg"
|
||||||
|
className="flex-shrink-0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Информация о заявке */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 truncate">
|
||||||
|
{request.sender.name || request.sender.fullName}
|
||||||
|
</h3>
|
||||||
|
<Badge variant="outline">
|
||||||
|
{ORGANIZATION_TYPES[request.sender.type]}
|
||||||
|
</Badge>
|
||||||
|
<Badge variant="secondary" className="bg-blue-100 text-blue-800">
|
||||||
|
Новая заявка
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ИНН отправителя */}
|
||||||
|
<p className="text-sm text-gray-600 mb-2">
|
||||||
|
ИНН: {request.sender.inn}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Сообщение заявки */}
|
||||||
|
{request.message && (
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 mb-3">
|
||||||
|
<p className="text-sm text-gray-700">{request.message}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Дата заявки */}
|
||||||
|
<div className="flex items-center space-x-2 text-xs text-gray-500">
|
||||||
|
<Calendar className="h-3 w-3" />
|
||||||
|
<span>
|
||||||
|
Заявка от {new Date(request.createdAt).toLocaleDateString('ru-RU', {
|
||||||
|
day: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Действия */}
|
||||||
|
<div className="flex items-center space-x-2 flex-shrink-0 ml-4">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onAccept(request.id)}
|
||||||
|
className="text-green-600 hover:text-green-700 hover:bg-green-50"
|
||||||
|
>
|
||||||
|
<CheckCircle className="h-4 w-4 mr-1" />
|
||||||
|
Принять
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onReject(request.id)}
|
||||||
|
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||||
|
>
|
||||||
|
<XCircle className="h-4 w-4 mr-1" />
|
||||||
|
Отклонить
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Статистика */}
|
||||||
|
<div className="text-center text-sm text-gray-500 pt-4">
|
||||||
|
{requests.length} входящ{requests.length === 1 ? 'ая заявка' :
|
||||||
|
requests.length < 5 ? 'ие заявки' : 'их заявок'} ожида{requests.length === 1 ? 'ет' : 'ют'} рассмотрения
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
IncomingRequestsBlock.displayName = 'IncomingRequestsBlock'
|
||||||
@ -0,0 +1,164 @@
|
|||||||
|
/**
|
||||||
|
* Блок исходящих заявок на партнерство
|
||||||
|
* Отображает отправленные заявки с возможностью отмены
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { ArrowUpCircle, Calendar, X } from 'lucide-react'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
|
||||||
|
import { OrganizationAvatar } from '../../organization-avatar'
|
||||||
|
import { ORGANIZATION_TYPES, REQUEST_STATUSES, type OutgoingRequestsBlockProps } from '../types'
|
||||||
|
|
||||||
|
export const OutgoingRequestsBlock = React.memo(function OutgoingRequestsBlock({
|
||||||
|
requests,
|
||||||
|
loading,
|
||||||
|
onCancel,
|
||||||
|
}: OutgoingRequestsBlockProps) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{Array.from({ length: 2 }).map((_, i) => (
|
||||||
|
<Card key={i} className="p-6">
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="h-12 w-12 bg-gray-200 rounded-full"></div>
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||||
|
<div className="h-3 bg-gray-200 rounded w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
<div className="h-8 w-16 bg-gray-200 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!requests.length) {
|
||||||
|
return (
|
||||||
|
<Card className="p-8 text-center">
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
<div className="h-16 w-16 bg-orange-100 rounded-full flex items-center justify-center">
|
||||||
|
<ArrowUpCircle className="h-8 w-8 text-orange-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">Исходящих заявок нет</h3>
|
||||||
|
<p className="text-gray-500 mt-1">
|
||||||
|
Найдите организации для сотрудничества и отправьте им заявки
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{requests.map((request) => (
|
||||||
|
<Card key={request.id} className="p-6 border-l-4 border-l-orange-500">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start space-x-4 flex-1">
|
||||||
|
{/* Аватар получателя */}
|
||||||
|
<OrganizationAvatar
|
||||||
|
organization={request.receiver}
|
||||||
|
size="lg"
|
||||||
|
className="flex-shrink-0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Информация о заявке */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 truncate">
|
||||||
|
{request.receiver.name || request.receiver.fullName}
|
||||||
|
</h3>
|
||||||
|
<Badge variant="outline">
|
||||||
|
{ORGANIZATION_TYPES[request.receiver.type]}
|
||||||
|
</Badge>
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className={
|
||||||
|
request.status === 'PENDING'
|
||||||
|
? 'bg-yellow-100 text-yellow-800'
|
||||||
|
: request.status === 'ACCEPTED'
|
||||||
|
? 'bg-green-100 text-green-800'
|
||||||
|
: 'bg-red-100 text-red-800'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{REQUEST_STATUSES[request.status]}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ИНН получателя */}
|
||||||
|
<p className="text-sm text-gray-600 mb-2">
|
||||||
|
ИНН: {request.receiver.inn}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Сообщение заявки */}
|
||||||
|
{request.message && (
|
||||||
|
<div className="bg-gray-50 rounded-lg p-3 mb-3">
|
||||||
|
<p className="text-sm text-gray-700">{request.message}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Дата заявки */}
|
||||||
|
<div className="flex items-center space-x-2 text-xs text-gray-500">
|
||||||
|
<Calendar className="h-3 w-3" />
|
||||||
|
<span>
|
||||||
|
Отправлена {new Date(request.createdAt).toLocaleDateString('ru-RU', {
|
||||||
|
day: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Действия */}
|
||||||
|
<div className="flex items-center space-x-2 flex-shrink-0 ml-4">
|
||||||
|
{request.status === 'PENDING' && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onCancel(request.id)}
|
||||||
|
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4 mr-1" />
|
||||||
|
Отменить
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{request.status === 'ACCEPTED' && (
|
||||||
|
<Badge variant="secondary" className="bg-green-100 text-green-800">
|
||||||
|
Принята
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{request.status === 'REJECTED' && (
|
||||||
|
<Badge variant="secondary" className="bg-red-100 text-red-800">
|
||||||
|
Отклонена
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Статистика */}
|
||||||
|
<div className="text-center text-sm text-gray-500 pt-4">
|
||||||
|
{requests.length} исходящ{requests.length === 1 ? 'ая заявка' :
|
||||||
|
requests.length < 5 ? 'ие заявки' : 'их заявок'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
OutgoingRequestsBlock.displayName = 'OutgoingRequestsBlock'
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
/**
|
||||||
|
* Блок управления партнерскими ссылками
|
||||||
|
* Отображает ссылку, статистику и возможность копирования
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Copy, Gift, ExternalLink } from 'lucide-react'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
|
||||||
|
import type { PartnerLinksBlockProps } from '../types'
|
||||||
|
|
||||||
|
export const PartnerLinksBlock = React.memo(function PartnerLinksBlock({
|
||||||
|
partnerLink,
|
||||||
|
loading,
|
||||||
|
onCopyLink,
|
||||||
|
onGenerateLink,
|
||||||
|
}: PartnerLinksBlockProps) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<Card className="p-6">
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="h-4 bg-gray-200 rounded w-1/3"></div>
|
||||||
|
<div className="h-10 bg-gray-200 rounded"></div>
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
<div className="h-16 bg-gray-200 rounded flex-1"></div>
|
||||||
|
<div className="h-16 bg-gray-200 rounded flex-1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!partnerLink) {
|
||||||
|
return (
|
||||||
|
<Card className="p-8 text-center">
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
<div className="h-16 w-16 bg-purple-100 rounded-full flex items-center justify-center">
|
||||||
|
<Gift className="h-8 w-8 text-purple-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">Партнерская ссылка недоступна</h3>
|
||||||
|
<p className="text-gray-500 mt-1">
|
||||||
|
Обратитесь к администратору для получения партнерской ссылки
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{onGenerateLink && (
|
||||||
|
<Button onClick={onGenerateLink} className="mt-4">
|
||||||
|
<Gift className="h-4 w-4 mr-2" />
|
||||||
|
Создать ссылку
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Партнерская ссылка */}
|
||||||
|
<Card className="glass-card p-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Gift className="h-5 w-5 text-purple-500" />
|
||||||
|
<h3 className="text-lg font-semibold text-white">Ваша партнерская ссылка</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-white/60">
|
||||||
|
Поделитесь этой ссылкой с другими организациями для прямого партнерского сотрудничества
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<div className="flex-1 px-3 py-2 glass-input rounded-lg text-white/60 font-mono text-sm truncate">
|
||||||
|
{partnerLink || 'Загрузка...'}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onCopyLink(partnerLink || '')}
|
||||||
|
className="glass-button"
|
||||||
|
>
|
||||||
|
<Copy className="h-4 w-4 mr-2" />
|
||||||
|
Копировать
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2 text-sm text-white/50">
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
<span>
|
||||||
|
Организации, перешедшие по этой ссылке, автоматически становятся вашими партнерами
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Информация о бонусах */}
|
||||||
|
<Card className="glass-card p-6">
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<div className="h-8 w-8 bg-purple-500/20 rounded-lg flex items-center justify-center flex-shrink-0 border border-purple-500/30">
|
||||||
|
<Gift className="h-5 w-5 text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h4 className="text-lg font-semibold text-white mb-2">
|
||||||
|
Партнерская программа
|
||||||
|
</h4>
|
||||||
|
<div className="space-y-2 text-sm text-white/70">
|
||||||
|
<p>• За каждую организацию, зарегистрированную по вашей ссылке: <strong className="text-yellow-400">100 сфер</strong></p>
|
||||||
|
<p>• Автоматическое добавление в контрагенты для упрощения сотрудничества</p>
|
||||||
|
<p>• Приоритетная поддержка для партнерских организаций</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
PartnerLinksBlock.displayName = 'PartnerLinksBlock'
|
||||||
@ -0,0 +1,248 @@
|
|||||||
|
/**
|
||||||
|
* Блок поиска организаций для отправки заявок на партнерство
|
||||||
|
* Включает поиск, фильтрацию и отправку заявок
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Search, Send } from 'lucide-react'
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card } from '@/components/ui/card'
|
||||||
|
import { GlassInput } from '@/components/ui/input'
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||||
|
import { Textarea } from '@/components/ui/textarea'
|
||||||
|
|
||||||
|
import { OrganizationAvatar } from '../../organization-avatar'
|
||||||
|
import { ORGANIZATION_TYPES, type SearchOrganizationsBlockProps } from '../types'
|
||||||
|
|
||||||
|
export const SearchOrganizationsBlock = React.memo(function SearchOrganizationsBlock({
|
||||||
|
searchResults,
|
||||||
|
loading,
|
||||||
|
onSendRequest,
|
||||||
|
searchQuery,
|
||||||
|
onSearchChange,
|
||||||
|
typeFilter,
|
||||||
|
onTypeFilterChange,
|
||||||
|
}: SearchOrganizationsBlockProps) {
|
||||||
|
const [sendingTo, setSendingTo] = useState<string | null>(null)
|
||||||
|
const [customMessage, setCustomMessage] = useState('')
|
||||||
|
const [showMessageForm, setShowMessageForm] = useState<string | null>(null)
|
||||||
|
|
||||||
|
const handleSendRequest = async (organizationId: string) => {
|
||||||
|
setSendingTo(organizationId)
|
||||||
|
try {
|
||||||
|
await onSendRequest(organizationId, customMessage || undefined)
|
||||||
|
setCustomMessage('')
|
||||||
|
setShowMessageForm(null)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error sending request:', error)
|
||||||
|
} finally {
|
||||||
|
setSendingTo(null)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleShowMessageForm = (organizationId: string) => {
|
||||||
|
setShowMessageForm(organizationId)
|
||||||
|
setCustomMessage('Предлагаем партнерское сотрудничество')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Фильтры поиска */}
|
||||||
|
<Card className="p-4">
|
||||||
|
<div className="flex flex-col md:flex-row gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<GlassInput
|
||||||
|
placeholder="Поиск по названию, ИНН или адресу..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => onSearchChange(e.target.value)}
|
||||||
|
icon={Search}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full md:w-48">
|
||||||
|
<Select value={typeFilter} onValueChange={onTypeFilterChange}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Тип организации" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">Все типы</SelectItem>
|
||||||
|
<SelectItem value="FULFILLMENT">Фулфилмент</SelectItem>
|
||||||
|
<SelectItem value="SELLER">Селлеры</SelectItem>
|
||||||
|
<SelectItem value="LOGIST">Логистика</SelectItem>
|
||||||
|
<SelectItem value="WHOLESALE">Поставщики</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Результаты поиска */}
|
||||||
|
{loading && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{Array.from({ length: 3 }).map((_, i) => (
|
||||||
|
<Card key={i} className="p-6">
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="h-12 w-12 bg-gray-200 rounded-full"></div>
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||||
|
<div className="h-3 bg-gray-200 rounded w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
<div className="h-8 w-20 bg-gray-200 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && searchQuery && !searchResults.length && (
|
||||||
|
<Card className="p-8 text-center">
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
<div className="h-16 w-16 bg-gray-100 rounded-full flex items-center justify-center">
|
||||||
|
<Search className="h-8 w-8 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">Организации не найдены</h3>
|
||||||
|
<p className="text-gray-500 mt-1">
|
||||||
|
Попробуйте изменить параметры поиска
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!searchQuery && (
|
||||||
|
<Card className="p-8 text-center">
|
||||||
|
<div className="flex flex-col items-center space-y-4">
|
||||||
|
<div className="h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center">
|
||||||
|
<Search className="h-8 w-8 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">Поиск партнеров</h3>
|
||||||
|
<p className="text-gray-500 mt-1">
|
||||||
|
Введите название, ИНН или адрес организации для поиска
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Список найденных организаций */}
|
||||||
|
{!loading && searchResults.length > 0 && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{searchResults.map((org) => (
|
||||||
|
<Card key={org.id} className="p-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start space-x-4 flex-1">
|
||||||
|
{/* Аватар организации */}
|
||||||
|
<OrganizationAvatar
|
||||||
|
organization={org}
|
||||||
|
size="lg"
|
||||||
|
className="flex-shrink-0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Информация об организации */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 truncate">
|
||||||
|
{org.name || org.fullName}
|
||||||
|
</h3>
|
||||||
|
<Badge variant="outline">
|
||||||
|
{ORGANIZATION_TYPES[org.type]}
|
||||||
|
</Badge>
|
||||||
|
|
||||||
|
{/* Статусы */}
|
||||||
|
{org.isCounterparty && (
|
||||||
|
<Badge variant="secondary" className="bg-green-100 text-green-800">
|
||||||
|
Уже партнер
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{org.hasOutgoingRequest && (
|
||||||
|
<Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
|
||||||
|
Заявка отправлена
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-gray-600 mb-2">
|
||||||
|
ИНН: {org.inn}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{org.address && (
|
||||||
|
<p className="text-sm text-gray-600 truncate">
|
||||||
|
{org.address}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Действия */}
|
||||||
|
<div className="flex items-center space-x-2 flex-shrink-0 ml-4">
|
||||||
|
{!org.isCounterparty && !org.hasOutgoingRequest && (
|
||||||
|
<>
|
||||||
|
{showMessageForm === org.id ? (
|
||||||
|
<div className="w-80 space-y-3">
|
||||||
|
<Textarea
|
||||||
|
placeholder="Сообщение для заявки (необязательно)"
|
||||||
|
value={customMessage}
|
||||||
|
onChange={(e) => setCustomMessage(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
className="resize-none"
|
||||||
|
/>
|
||||||
|
<div className="flex justify-end space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setShowMessageForm(null)}
|
||||||
|
>
|
||||||
|
Отмена
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleSendRequest(org.id)}
|
||||||
|
disabled={sendingTo === org.id}
|
||||||
|
>
|
||||||
|
{sendingTo === org.id ? (
|
||||||
|
'Отправка...'
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Send className="h-4 w-4 mr-1" />
|
||||||
|
Отправить
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleShowMessageForm(org.id)}
|
||||||
|
>
|
||||||
|
<Send className="h-4 w-4 mr-1" />
|
||||||
|
Отправить заявку
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Статистика поиска */}
|
||||||
|
<div className="text-center text-sm text-gray-500 pt-4">
|
||||||
|
Найдено {searchResults.length} организаци{searchResults.length === 1 ? 'я' :
|
||||||
|
searchResults.length < 5 ? 'и' : 'й'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
SearchOrganizationsBlock.displayName = 'SearchOrganizationsBlock'
|
||||||
@ -0,0 +1,236 @@
|
|||||||
|
/**
|
||||||
|
* Hook для управления действиями с контрагентами
|
||||||
|
* Обрабатывает все GraphQL mutations и их результаты
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useMutation } from '@apollo/client'
|
||||||
|
import { useCallback, useState } from 'react'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
|
||||||
|
import {
|
||||||
|
RESPOND_TO_COUNTERPARTY_REQUEST,
|
||||||
|
CANCEL_COUNTERPARTY_REQUEST,
|
||||||
|
REMOVE_COUNTERPARTY,
|
||||||
|
SEND_COUNTERPARTY_REQUEST,
|
||||||
|
} from '@/graphql/mutations'
|
||||||
|
import {
|
||||||
|
GET_MY_COUNTERPARTIES,
|
||||||
|
GET_INCOMING_REQUESTS,
|
||||||
|
GET_OUTGOING_REQUESTS,
|
||||||
|
SEARCH_ORGANIZATIONS,
|
||||||
|
} from '@/graphql/queries'
|
||||||
|
|
||||||
|
import type { UseCounterpartyActionsReturn } from '../types'
|
||||||
|
|
||||||
|
export function useCounterpartyActions(): UseCounterpartyActionsReturn {
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
// Mutation для ответа на заявку (принять/отклонить)
|
||||||
|
const [respondToRequestMutation] = useMutation(RESPOND_TO_COUNTERPARTY_REQUEST, {
|
||||||
|
refetchQueries: [
|
||||||
|
{ query: GET_INCOMING_REQUESTS },
|
||||||
|
{ query: GET_MY_COUNTERPARTIES },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'SELLER' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'FULFILLMENT' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'LOGIST' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'WHOLESALE' } },
|
||||||
|
],
|
||||||
|
awaitRefetchQueries: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Mutation для отмены исходящей заявки
|
||||||
|
const [cancelRequestMutation] = useMutation(CANCEL_COUNTERPARTY_REQUEST, {
|
||||||
|
refetchQueries: [
|
||||||
|
{ query: GET_OUTGOING_REQUESTS },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'SELLER' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'FULFILLMENT' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'LOGIST' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'WHOLESALE' } },
|
||||||
|
],
|
||||||
|
awaitRefetchQueries: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Mutation для удаления контрагента
|
||||||
|
const [removeCounterpartyMutation] = useMutation(REMOVE_COUNTERPARTY, {
|
||||||
|
refetchQueries: [
|
||||||
|
{ query: GET_MY_COUNTERPARTIES },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'SELLER' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'FULFILLMENT' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'LOGIST' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'WHOLESALE' } },
|
||||||
|
],
|
||||||
|
awaitRefetchQueries: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Mutation для отправки заявки на партнерство
|
||||||
|
const [sendRequestMutation] = useMutation(SEND_COUNTERPARTY_REQUEST, {
|
||||||
|
refetchQueries: [
|
||||||
|
{ query: GET_OUTGOING_REQUESTS },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'SELLER' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'FULFILLMENT' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'LOGIST' } },
|
||||||
|
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'WHOLESALE' } },
|
||||||
|
],
|
||||||
|
awaitRefetchQueries: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Принять заявку на партнерство
|
||||||
|
const acceptRequest = useCallback(async (requestId: string) => {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { data } = await respondToRequestMutation({
|
||||||
|
variables: {
|
||||||
|
requestId,
|
||||||
|
response: 'ACCEPTED',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
if (data?.respondToCounterpartyRequest?.success) {
|
||||||
|
toast.success('Заявка принята! Организация добавлена в контрагенты')
|
||||||
|
} else {
|
||||||
|
const errorMessage = data?.respondToCounterpartyRequest?.message || 'Не удалось принять заявку'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error accepting request:', error)
|
||||||
|
const errorMessage = 'Ошибка при принятии заявки'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}, [respondToRequestMutation])
|
||||||
|
|
||||||
|
// Отклонить заявку на партнерство
|
||||||
|
const rejectRequest = useCallback(async (requestId: string) => {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { data } = await respondToRequestMutation({
|
||||||
|
variables: {
|
||||||
|
requestId,
|
||||||
|
response: 'REJECTED',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
if (data?.respondToCounterpartyRequest?.success) {
|
||||||
|
toast.success('Заявка отклонена')
|
||||||
|
} else {
|
||||||
|
const errorMessage = data?.respondToCounterpartyRequest?.message || 'Не удалось отклонить заявку'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error rejecting request:', error)
|
||||||
|
const errorMessage = 'Ошибка при отклонении заявки'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}, [respondToRequestMutation])
|
||||||
|
|
||||||
|
// Отменить исходящую заявку
|
||||||
|
const cancelRequest = useCallback(async (requestId: string) => {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { data } = await cancelRequestMutation({
|
||||||
|
variables: { requestId },
|
||||||
|
})
|
||||||
|
|
||||||
|
if (data?.cancelCounterpartyRequest?.success) {
|
||||||
|
toast.success('Заявка отменена')
|
||||||
|
} else {
|
||||||
|
const errorMessage = data?.cancelCounterpartyRequest?.message || 'Не удалось отменить заявку'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error canceling request:', error)
|
||||||
|
const errorMessage = 'Ошибка при отмене заявки'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}, [cancelRequestMutation])
|
||||||
|
|
||||||
|
// Отправить заявку на партнерство
|
||||||
|
const sendRequest = useCallback(async (organizationId: string, message?: string) => {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { data } = await sendRequestMutation({
|
||||||
|
variables: {
|
||||||
|
organizationId,
|
||||||
|
message: message || 'Предлагаем партнерское сотрудничество',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
if (data?.sendCounterpartyRequest?.success) {
|
||||||
|
toast.success('Заявка отправлена! Ожидайте ответа от организации')
|
||||||
|
} else {
|
||||||
|
const errorMessage = data?.sendCounterpartyRequest?.message || 'Не удалось отправить заявку'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error sending request:', error)
|
||||||
|
const errorMessage = 'Ошибка при отправке заявки'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}, [sendRequestMutation])
|
||||||
|
|
||||||
|
// Удалить контрагента
|
||||||
|
const removeCounterparty = useCallback(async (organizationId: string) => {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { data } = await removeCounterpartyMutation({
|
||||||
|
variables: { organizationId },
|
||||||
|
})
|
||||||
|
|
||||||
|
if (data?.removeCounterparty?.success) {
|
||||||
|
toast.success('Контрагент удален из списка')
|
||||||
|
} else {
|
||||||
|
const errorMessage = data?.removeCounterparty?.message || 'Не удалось удалить контрагента'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error removing counterparty:', error)
|
||||||
|
const errorMessage = 'Ошибка при удалении контрагента'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}, [removeCounterpartyMutation])
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Действия с заявками
|
||||||
|
acceptRequest,
|
||||||
|
rejectRequest,
|
||||||
|
cancelRequest,
|
||||||
|
sendRequest,
|
||||||
|
|
||||||
|
// Действия с контрагентами
|
||||||
|
removeCounterparty,
|
||||||
|
|
||||||
|
// Состояние
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,163 @@
|
|||||||
|
/**
|
||||||
|
* Hook для загрузки и управления данными контрагентов
|
||||||
|
* Обрабатывает все GraphQL queries и кэширование
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useQuery } from '@apollo/client'
|
||||||
|
import { useState, useCallback } from 'react'
|
||||||
|
|
||||||
|
import {
|
||||||
|
GET_MY_COUNTERPARTIES,
|
||||||
|
GET_INCOMING_REQUESTS,
|
||||||
|
GET_OUTGOING_REQUESTS,
|
||||||
|
SEARCH_ORGANIZATIONS,
|
||||||
|
} from '@/graphql/queries'
|
||||||
|
import { GET_MY_PARTNER_LINK } from '@/graphql/referral-queries'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
UseCounterpartyDataReturn,
|
||||||
|
Organization,
|
||||||
|
CounterpartyRequest,
|
||||||
|
OrganizationType,
|
||||||
|
} from '../types'
|
||||||
|
|
||||||
|
export function useCounterpartyData(): UseCounterpartyDataReturn {
|
||||||
|
const [searchResults, setSearchResults] = useState<Organization[]>([])
|
||||||
|
const [searchLoading, setSearchLoading] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
// Основные queries
|
||||||
|
const {
|
||||||
|
data: counterpartiesData,
|
||||||
|
loading: counterpartiesLoading,
|
||||||
|
refetch: refetchCounterparties,
|
||||||
|
} = useQuery(GET_MY_COUNTERPARTIES, {
|
||||||
|
errorPolicy: 'all',
|
||||||
|
onError: (error) => {
|
||||||
|
console.error('Error loading counterparties:', error)
|
||||||
|
setError('Ошибка загрузки контрагентов')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: incomingData,
|
||||||
|
loading: incomingLoading,
|
||||||
|
refetch: refetchIncoming,
|
||||||
|
} = useQuery(GET_INCOMING_REQUESTS, {
|
||||||
|
errorPolicy: 'all',
|
||||||
|
onError: (error) => {
|
||||||
|
console.error('Error loading incoming requests:', error)
|
||||||
|
setError('Ошибка загрузки входящих заявок')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: outgoingData,
|
||||||
|
loading: outgoingLoading,
|
||||||
|
refetch: refetchOutgoing,
|
||||||
|
} = useQuery(GET_OUTGOING_REQUESTS, {
|
||||||
|
errorPolicy: 'all',
|
||||||
|
onError: (error) => {
|
||||||
|
console.error('Error loading outgoing requests:', error)
|
||||||
|
setError('Ошибка загрузки исходящих заявок')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: partnerLinkData,
|
||||||
|
loading: partnerLinkLoading,
|
||||||
|
refetch: refetchPartnerLink,
|
||||||
|
} = useQuery(GET_MY_PARTNER_LINK, {
|
||||||
|
errorPolicy: 'all',
|
||||||
|
onError: (error) => {
|
||||||
|
console.error('Error loading partner link:', error)
|
||||||
|
setError('Ошибка загрузки партнерской ссылки')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Поиск организаций
|
||||||
|
const searchOrganizations = useCallback(async (query: string, type?: OrganizationType) => {
|
||||||
|
if (!query.trim()) {
|
||||||
|
setSearchResults([])
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setSearchLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Используем Apollo Client напрямую для поиска
|
||||||
|
const { apolloClient } = await import('@/lib/apollo-client')
|
||||||
|
|
||||||
|
const variables: { search: string; type?: string } = { search: query }
|
||||||
|
if (type && type !== 'all') {
|
||||||
|
variables.type = type
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data } = await apolloClient.query({
|
||||||
|
query: SEARCH_ORGANIZATIONS,
|
||||||
|
variables,
|
||||||
|
fetchPolicy: 'network-only', // Всегда получать свежие данные поиска
|
||||||
|
})
|
||||||
|
|
||||||
|
if (data?.searchOrganizations?.success) {
|
||||||
|
setSearchResults(data.searchOrganizations.organizations || [])
|
||||||
|
} else {
|
||||||
|
setError(data?.searchOrganizations?.message || 'Ошибка поиска организаций')
|
||||||
|
setSearchResults([])
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Search organizations error:', error)
|
||||||
|
setError('Ошибка поиска организаций')
|
||||||
|
setSearchResults([])
|
||||||
|
} finally {
|
||||||
|
setSearchLoading(false)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Обновление всех данных
|
||||||
|
const refetchAll = useCallback(async () => {
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
await Promise.all([
|
||||||
|
refetchCounterparties(),
|
||||||
|
refetchIncoming(),
|
||||||
|
refetchOutgoing(),
|
||||||
|
refetchPartnerLink(),
|
||||||
|
])
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error refetching data:', error)
|
||||||
|
setError('Ошибка обновления данных')
|
||||||
|
}
|
||||||
|
}, [refetchCounterparties, refetchIncoming, refetchOutgoing, refetchPartnerLink])
|
||||||
|
|
||||||
|
// Извлечение данных из responses
|
||||||
|
const counterparties: Organization[] = counterpartiesData?.getMyCounterparties || []
|
||||||
|
const incomingRequests: CounterpartyRequest[] = incomingData?.getIncomingCounterpartyRequests || []
|
||||||
|
const outgoingRequests: CounterpartyRequest[] = outgoingData?.getOutgoingCounterpartyRequests || []
|
||||||
|
const partnerLink: string | null = partnerLinkData?.myPartnerLink || null
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Данные
|
||||||
|
counterparties,
|
||||||
|
incomingRequests,
|
||||||
|
outgoingRequests,
|
||||||
|
searchResults,
|
||||||
|
partnerLink,
|
||||||
|
|
||||||
|
// Состояние загрузки
|
||||||
|
counterpartiesLoading,
|
||||||
|
incomingLoading,
|
||||||
|
outgoingLoading,
|
||||||
|
searchLoading,
|
||||||
|
partnerLinkLoading,
|
||||||
|
|
||||||
|
// Ошибки
|
||||||
|
error,
|
||||||
|
|
||||||
|
// Методы
|
||||||
|
refetchAll,
|
||||||
|
searchOrganizations,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
/**
|
||||||
|
* Hook для фильтрации и поиска контрагентов
|
||||||
|
* Обрабатывает локальные фильтры и поиск через API
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useState, useCallback, useEffect } from 'react'
|
||||||
|
|
||||||
|
// Простая реализация debounce для hook
|
||||||
|
function useDebounce<T>(value: T, delay: number): T {
|
||||||
|
const [debouncedValue, setDebouncedValue] = useState<T>(value)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = setTimeout(() => {
|
||||||
|
setDebouncedValue(value)
|
||||||
|
}, delay)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(handler)
|
||||||
|
}
|
||||||
|
}, [value, delay])
|
||||||
|
|
||||||
|
return debouncedValue
|
||||||
|
}
|
||||||
|
|
||||||
|
import type {
|
||||||
|
UseCounterpartyFiltersReturn,
|
||||||
|
OrganizationType,
|
||||||
|
} from '../types'
|
||||||
|
|
||||||
|
interface UseCounterpartyFiltersProps {
|
||||||
|
onSearch?: (query: string, type?: OrganizationType) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useCounterpartyFilters({
|
||||||
|
onSearch,
|
||||||
|
}: UseCounterpartyFiltersProps): UseCounterpartyFiltersReturn {
|
||||||
|
// Состояние фильтров для поиска
|
||||||
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
const [typeFilter, setTypeFilter] = useState<OrganizationType>('all')
|
||||||
|
|
||||||
|
// Debounced поиск
|
||||||
|
const debouncedSearch = useDebounce(searchQuery, 500)
|
||||||
|
|
||||||
|
// Автоматический поиск при изменении запроса или типа
|
||||||
|
useEffect(() => {
|
||||||
|
if (onSearch) {
|
||||||
|
onSearch(debouncedSearch, typeFilter === 'all' ? undefined : typeFilter)
|
||||||
|
}
|
||||||
|
}, [debouncedSearch, typeFilter, onSearch])
|
||||||
|
|
||||||
|
// Обработчики изменений
|
||||||
|
const handleSearchChange = useCallback((query: string) => {
|
||||||
|
setSearchQuery(query)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleTypeFilterChange = useCallback((type: OrganizationType) => {
|
||||||
|
setTypeFilter(type)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return {
|
||||||
|
searchQuery,
|
||||||
|
typeFilter,
|
||||||
|
debouncedSearch,
|
||||||
|
handleSearchChange,
|
||||||
|
handleTypeFilterChange,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,102 @@
|
|||||||
|
/**
|
||||||
|
* Hook для управления партнерскими ссылками
|
||||||
|
* Обрабатывает генерацию, копирование и статистику ссылок
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useState, useCallback } from 'react'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
|
||||||
|
import type { UsePartnerLinksReturn, PartnerLink } from '../types'
|
||||||
|
|
||||||
|
interface UsePartnerLinksProps {
|
||||||
|
partnerLink: PartnerLink | null
|
||||||
|
loading: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function usePartnerLinks({ partnerLink, loading }: UsePartnerLinksProps): UsePartnerLinksReturn {
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
// Генерация новой партнерской ссылки
|
||||||
|
const generateLink = useCallback(async () => {
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
// TODO: Реализовать мутацию для генерации новой ссылки
|
||||||
|
// const { data } = await generatePartnerLinkMutation()
|
||||||
|
|
||||||
|
// Пока что показываем уведомление
|
||||||
|
toast.info('Функция генерации ссылок будет доступна в следующем обновлении')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error generating partner link:', error)
|
||||||
|
const errorMessage = 'Ошибка при генерации партнерской ссылки'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Копирование ссылки в буфер обмена
|
||||||
|
const copyToClipboard = useCallback(async (text: string): Promise<boolean> => {
|
||||||
|
try {
|
||||||
|
// Проверяем поддержку Clipboard API
|
||||||
|
if (navigator.clipboard && window.isSecureContext) {
|
||||||
|
await navigator.clipboard.writeText(text)
|
||||||
|
toast.success('Ссылка скопирована в буфер обмена')
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
// Fallback для старых браузеров
|
||||||
|
const textArea = document.createElement('textarea')
|
||||||
|
textArea.value = text
|
||||||
|
textArea.style.position = 'fixed'
|
||||||
|
textArea.style.left = '-999999px'
|
||||||
|
textArea.style.top = '-999999px'
|
||||||
|
document.body.appendChild(textArea)
|
||||||
|
textArea.focus()
|
||||||
|
textArea.select()
|
||||||
|
|
||||||
|
const successful = document.execCommand('copy')
|
||||||
|
document.body.removeChild(textArea)
|
||||||
|
|
||||||
|
if (successful) {
|
||||||
|
toast.success('Ссылка скопирована в буфер обмена')
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
throw new Error('Copy command failed')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error copying to clipboard:', error)
|
||||||
|
toast.error('Не удалось скопировать ссылку')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Обновление статистики по ссылке
|
||||||
|
const refreshStats = useCallback(async () => {
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
// TODO: Реализовать обновление статистики
|
||||||
|
// const { data } = await refreshPartnerLinkStatsMutation()
|
||||||
|
|
||||||
|
// Пока что показываем уведомление
|
||||||
|
toast.info('Статистика обновлена')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error refreshing partner link stats:', error)
|
||||||
|
const errorMessage = 'Ошибка при обновлении статистики'
|
||||||
|
setError(errorMessage)
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Данные
|
||||||
|
partnerLink,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
|
||||||
|
// Методы
|
||||||
|
generateLink,
|
||||||
|
copyToClipboard,
|
||||||
|
refreshStats,
|
||||||
|
}
|
||||||
|
}
|
||||||
250
src/components/market/market-counterparties/index.tsx
Normal file
250
src/components/market/market-counterparties/index.tsx
Normal file
@ -0,0 +1,250 @@
|
|||||||
|
/**
|
||||||
|
* Основной компонент управления контрагентами (Модульная архитектура)
|
||||||
|
* Объединяет все hooks и блоки в единую систему
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Users, ArrowDownCircle, ArrowUpCircle } from 'lucide-react'
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
import { useCounterpartyActions } from './hooks/useCounterpartyActions'
|
||||||
|
import { useCounterpartyData } from './hooks/useCounterpartyData'
|
||||||
|
import { useCounterpartyFilters } from './hooks/useCounterpartyFilters'
|
||||||
|
|
||||||
|
// UI Blocks
|
||||||
|
import { CounterpartiesListBlock } from './blocks/CounterpartiesListBlock'
|
||||||
|
import { IncomingRequestsBlock } from './blocks/IncomingRequestsBlock'
|
||||||
|
import { OutgoingRequestsBlock } from './blocks/OutgoingRequestsBlock'
|
||||||
|
// Types
|
||||||
|
import type { Organization } from './types'
|
||||||
|
|
||||||
|
interface MarketCounterpartiesProps {
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MarketCounterparties({ className }: MarketCounterpartiesProps) {
|
||||||
|
// Состояние активной вкладки
|
||||||
|
const [activeTab, setActiveTab] = useState('counterparties')
|
||||||
|
|
||||||
|
// Data Hooks
|
||||||
|
const {
|
||||||
|
counterparties,
|
||||||
|
incomingRequests,
|
||||||
|
outgoingRequests,
|
||||||
|
_searchResults,
|
||||||
|
partnerLink,
|
||||||
|
counterpartiesLoading,
|
||||||
|
incomingLoading,
|
||||||
|
outgoingLoading,
|
||||||
|
_searchLoading,
|
||||||
|
_partnerLinkLoading,
|
||||||
|
_error,
|
||||||
|
refetchAll,
|
||||||
|
_searchOrganizations,
|
||||||
|
} = useCounterpartyData()
|
||||||
|
|
||||||
|
// Action Hooks
|
||||||
|
const {
|
||||||
|
removeCounterparty,
|
||||||
|
acceptRequest,
|
||||||
|
rejectRequest,
|
||||||
|
cancelRequest,
|
||||||
|
sendRequest,
|
||||||
|
loading: _actionLoading,
|
||||||
|
} = useCounterpartyActions()
|
||||||
|
|
||||||
|
// Filter Hooks
|
||||||
|
const {
|
||||||
|
_searchQuery,
|
||||||
|
_typeFilter,
|
||||||
|
_debouncedSearch,
|
||||||
|
_handleSearchChange,
|
||||||
|
_handleTypeFilterChange,
|
||||||
|
} = useCounterpartyFilters({
|
||||||
|
onSearch: _searchOrganizations,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Unified loading states for blocks
|
||||||
|
const loading = {
|
||||||
|
counterparties: counterpartiesLoading,
|
||||||
|
incoming: incomingLoading,
|
||||||
|
outgoing: outgoingLoading,
|
||||||
|
search: _searchLoading,
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обработчики действий с callback для обновления данных
|
||||||
|
const handleRemoveCounterparty = async (id: string) => {
|
||||||
|
try {
|
||||||
|
await removeCounterparty(id)
|
||||||
|
await refetchAll()
|
||||||
|
toast.success('Контрагент удален')
|
||||||
|
} catch {
|
||||||
|
toast.error('Ошибка удаления контрагента')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAcceptRequest = async (id: string) => {
|
||||||
|
try {
|
||||||
|
await acceptRequest(id)
|
||||||
|
await refetchAll()
|
||||||
|
toast.success('Заявка принята')
|
||||||
|
} catch {
|
||||||
|
toast.error('Ошибка принятия заявки')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRejectRequest = async (id: string) => {
|
||||||
|
try {
|
||||||
|
await rejectRequest(id)
|
||||||
|
await refetchAll()
|
||||||
|
toast.success('Заявка отклонена')
|
||||||
|
} catch {
|
||||||
|
toast.error('Ошибка отклонения заявки')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCancelRequest = async (id: string) => {
|
||||||
|
try {
|
||||||
|
await cancelRequest(id)
|
||||||
|
await refetchAll()
|
||||||
|
toast.success('Заявка отменена')
|
||||||
|
} catch {
|
||||||
|
toast.error('Ошибка отмены заявки')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const _handleSendRequest = async (organizationId: string, message?: string) => {
|
||||||
|
try {
|
||||||
|
await sendRequest(organizationId, message)
|
||||||
|
await refetchAll()
|
||||||
|
toast.success('Заявка отправлена')
|
||||||
|
} catch {
|
||||||
|
toast.error('Ошибка отправки заявки')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCopyLink = (url: string) => {
|
||||||
|
navigator.clipboard.writeText(url)
|
||||||
|
toast.success('Ссылка скопирована в буфер обмена')
|
||||||
|
}
|
||||||
|
|
||||||
|
const _handleGenerateLink = async () => {
|
||||||
|
try {
|
||||||
|
// TODO: Реализовать создание партнерской ссылки
|
||||||
|
await refetchAll()
|
||||||
|
toast.success('Партнерская ссылка создана')
|
||||||
|
} catch {
|
||||||
|
toast.error('Ошибка создания ссылки')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обработчик просмотра деталей организации
|
||||||
|
const handleViewDetails = (organization: Organization) => {
|
||||||
|
// TODO: Реализовать модальное окно с деталями организации
|
||||||
|
toast.info(`Детали организации: ${organization.name || organization.fullName}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Подсчет уведомлений для вкладок
|
||||||
|
const pendingIncomingCount = incomingRequests.filter(req => req.status === 'PENDING').length
|
||||||
|
const pendingOutgoingCount = outgoingRequests.filter(req => req.status === 'PENDING').length
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||||
|
<TabsList className="grid w-full grid-cols-3 bg-white/5 backdrop-blur border-white/10">
|
||||||
|
{/* Контрагенты */}
|
||||||
|
<TabsTrigger
|
||||||
|
value="counterparties"
|
||||||
|
className="flex items-center space-x-2 data-[state=active]:bg-blue-500/20 data-[state=active]:text-blue-300 text-white/70"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
<span>Контрагенты</span>
|
||||||
|
{counterparties.length > 0 && (
|
||||||
|
<span className="ml-1 px-1.5 py-0.5 text-xs bg-blue-500/20 text-blue-300 rounded-full border border-blue-500/30">
|
||||||
|
{counterparties.length}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</TabsTrigger>
|
||||||
|
|
||||||
|
{/* Входящие заявки */}
|
||||||
|
<TabsTrigger
|
||||||
|
value="incoming"
|
||||||
|
className={`flex items-center space-x-2 data-[state=active]:bg-blue-500/20 data-[state=active]:text-blue-300 text-white/70 relative ${
|
||||||
|
pendingIncomingCount > 0 ? 'animate-pulse ring-2 ring-green-400/50' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<ArrowDownCircle className="h-4 w-4" />
|
||||||
|
<span>Входящие</span>
|
||||||
|
{pendingIncomingCount > 0 && (
|
||||||
|
<>
|
||||||
|
<span className="ml-1 px-1.5 py-0.5 text-xs bg-green-500/20 text-green-300 rounded-full border border-green-500/30">
|
||||||
|
{pendingIncomingCount}
|
||||||
|
</span>
|
||||||
|
<div className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</TabsTrigger>
|
||||||
|
|
||||||
|
{/* Исходящие заявки */}
|
||||||
|
<TabsTrigger
|
||||||
|
value="outgoing"
|
||||||
|
className="flex items-center space-x-2 data-[state=active]:bg-blue-500/20 data-[state=active]:text-blue-300 text-white/70"
|
||||||
|
>
|
||||||
|
<ArrowUpCircle className="h-4 w-4" />
|
||||||
|
<span>Исходящие</span>
|
||||||
|
{pendingOutgoingCount > 0 && (
|
||||||
|
<span className="ml-1 px-1.5 py-0.5 text-xs bg-orange-500/20 text-orange-300 rounded-full border border-orange-500/30">
|
||||||
|
{pendingOutgoingCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* Контент вкладок */}
|
||||||
|
|
||||||
|
{/* Список контрагентов */}
|
||||||
|
<TabsContent value="counterparties" className="mt-6">
|
||||||
|
<CounterpartiesListBlock
|
||||||
|
counterparties={counterparties}
|
||||||
|
loading={loading.counterparties}
|
||||||
|
onRemove={handleRemoveCounterparty}
|
||||||
|
onViewDetails={handleViewDetails}
|
||||||
|
incomingRequestsCount={incomingRequests.length}
|
||||||
|
outgoingRequestsCount={outgoingRequests.length}
|
||||||
|
incomingLoading={loading.incoming}
|
||||||
|
outgoingLoading={loading.outgoing}
|
||||||
|
partnerLink={partnerLink}
|
||||||
|
onCopyPartnerLink={handleCopyLink}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Входящие заявки */}
|
||||||
|
<TabsContent value="incoming" className="mt-6">
|
||||||
|
<IncomingRequestsBlock
|
||||||
|
requests={incomingRequests}
|
||||||
|
loading={loading.incoming}
|
||||||
|
onAccept={handleAcceptRequest}
|
||||||
|
onReject={handleRejectRequest}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Исходящие заявки */}
|
||||||
|
<TabsContent value="outgoing" className="mt-6">
|
||||||
|
<OutgoingRequestsBlock
|
||||||
|
requests={outgoingRequests}
|
||||||
|
loading={loading.outgoing}
|
||||||
|
onCancel={handleCancelRequest}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Экспорт для обратной совместимости
|
||||||
|
export { MarketCounterparties }
|
||||||
258
src/components/market/market-counterparties/types/index.ts
Normal file
258
src/components/market/market-counterparties/types/index.ts
Normal file
@ -0,0 +1,258 @@
|
|||||||
|
/**
|
||||||
|
* TypeScript интерфейсы для модуля управления контрагентами
|
||||||
|
* Модуляризовано согласно MODULAR_ARCHITECTURE_PATTERN.md
|
||||||
|
*/
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// ОСНОВНЫЕ ДОМЕННЫЕ СУЩНОСТИ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export interface Organization {
|
||||||
|
id: string
|
||||||
|
inn: string
|
||||||
|
name?: string
|
||||||
|
fullName?: string
|
||||||
|
type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||||
|
address?: string
|
||||||
|
phones?: Array<{ value: string }>
|
||||||
|
emails?: Array<{ value: string }>
|
||||||
|
createdAt: string
|
||||||
|
users?: Array<{ id: string; avatar?: string }>
|
||||||
|
// Флаги для поиска
|
||||||
|
isCounterparty?: boolean
|
||||||
|
hasOutgoingRequest?: boolean
|
||||||
|
isCurrentUser?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CounterpartyRequest {
|
||||||
|
id: string
|
||||||
|
message?: string
|
||||||
|
status: 'PENDING' | 'ACCEPTED' | 'REJECTED' | 'CANCELLED'
|
||||||
|
createdAt: string
|
||||||
|
sender: Organization
|
||||||
|
receiver: Organization
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PartnerLink {
|
||||||
|
id: string
|
||||||
|
code: string
|
||||||
|
url: string
|
||||||
|
clickCount?: number
|
||||||
|
registrationCount?: number
|
||||||
|
createdAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// ТИПЫ ДЛЯ ФИЛЬТРАЦИИ И СОРТИРОВКИ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export type SortField = 'name' | 'date' | 'inn' | 'type'
|
||||||
|
export type SortOrder = 'asc' | 'desc'
|
||||||
|
export type OrganizationType = 'all' | 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
|
||||||
|
|
||||||
|
export interface FilterConfig {
|
||||||
|
searchQuery: string
|
||||||
|
typeFilter: OrganizationType
|
||||||
|
sortField: SortField
|
||||||
|
sortOrder: SortOrder
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// PROPS ДЛЯ БЛОК-КОМПОНЕНТОВ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export interface CounterpartiesListBlockProps {
|
||||||
|
counterparties: Organization[]
|
||||||
|
loading: boolean
|
||||||
|
onRemove: (id: string) => Promise<void>
|
||||||
|
onViewDetails?: (organization: Organization) => void
|
||||||
|
// Статистические данные
|
||||||
|
incomingRequestsCount?: number
|
||||||
|
outgoingRequestsCount?: number
|
||||||
|
incomingLoading?: boolean
|
||||||
|
outgoingLoading?: boolean
|
||||||
|
// Партнерская ссылка
|
||||||
|
partnerLink?: string | null
|
||||||
|
onCopyPartnerLink?: (url: string) => void
|
||||||
|
// Фильтрация существующих контрагентов
|
||||||
|
searchQuery?: string
|
||||||
|
onSearchChange?: (query: string) => void
|
||||||
|
typeFilter?: OrganizationType
|
||||||
|
onTypeFilterChange?: (type: OrganizationType) => void
|
||||||
|
sortField?: SortField
|
||||||
|
sortOrder?: SortOrder
|
||||||
|
onSort?: (field: SortField) => void
|
||||||
|
filteredCount?: number
|
||||||
|
totalCount?: number
|
||||||
|
// Поиск новых организаций (из старой вкладки "Поиск")
|
||||||
|
searchResults?: Organization[]
|
||||||
|
searchLoading?: boolean
|
||||||
|
onSendRequest?: (organizationId: string, message?: string) => Promise<void>
|
||||||
|
searchNewQuery?: string
|
||||||
|
onSearchNewChange?: (query: string) => void
|
||||||
|
searchNewTypeFilter?: OrganizationType
|
||||||
|
onSearchNewTypeFilterChange?: (type: OrganizationType) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IncomingRequestsBlockProps {
|
||||||
|
requests: CounterpartyRequest[]
|
||||||
|
loading: boolean
|
||||||
|
onAccept: (requestId: string) => Promise<void>
|
||||||
|
onReject: (requestId: string) => Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OutgoingRequestsBlockProps {
|
||||||
|
requests: CounterpartyRequest[]
|
||||||
|
loading: boolean
|
||||||
|
onCancel: (requestId: string) => Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SearchOrganizationsBlockProps {
|
||||||
|
searchResults: Organization[]
|
||||||
|
loading: boolean
|
||||||
|
onSendRequest: (organizationId: string, message?: string) => Promise<void>
|
||||||
|
searchQuery: string
|
||||||
|
onSearchChange: (query: string) => void
|
||||||
|
typeFilter: OrganizationType
|
||||||
|
onTypeFilterChange: (type: OrganizationType) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PartnerLinksBlockProps {
|
||||||
|
partnerLink: string | null
|
||||||
|
loading: boolean
|
||||||
|
onCopyLink: (url: string) => void
|
||||||
|
onGenerateLink?: () => Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CounterpartyFiltersBlockProps {
|
||||||
|
searchQuery: string
|
||||||
|
onSearchChange: (query: string) => void
|
||||||
|
typeFilter: OrganizationType
|
||||||
|
onTypeFilterChange: (type: OrganizationType) => void
|
||||||
|
sortField: SortField
|
||||||
|
sortOrder: SortOrder
|
||||||
|
onSort: (field: SortField) => void
|
||||||
|
resultsCount: number
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// ТИПЫ ДЛЯ HOOKS
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export interface UseCounterpartyDataReturn {
|
||||||
|
// Данные
|
||||||
|
counterparties: Organization[]
|
||||||
|
incomingRequests: CounterpartyRequest[]
|
||||||
|
outgoingRequests: CounterpartyRequest[]
|
||||||
|
searchResults: Organization[]
|
||||||
|
partnerLink: PartnerLink | null
|
||||||
|
|
||||||
|
// Состояние загрузки
|
||||||
|
counterpartiesLoading: boolean
|
||||||
|
incomingLoading: boolean
|
||||||
|
outgoingLoading: boolean
|
||||||
|
searchLoading: boolean
|
||||||
|
partnerLinkLoading: boolean
|
||||||
|
|
||||||
|
// Ошибки
|
||||||
|
error: string | null
|
||||||
|
|
||||||
|
// Методы
|
||||||
|
refetchAll: () => Promise<void>
|
||||||
|
searchOrganizations: (query: string, type?: OrganizationType) => Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseCounterpartyActionsReturn {
|
||||||
|
// Действия с заявками
|
||||||
|
acceptRequest: (requestId: string) => Promise<void>
|
||||||
|
rejectRequest: (requestId: string) => Promise<void>
|
||||||
|
cancelRequest: (requestId: string) => Promise<void>
|
||||||
|
sendRequest: (organizationId: string, message?: string) => Promise<void>
|
||||||
|
|
||||||
|
// Действия с контрагентами
|
||||||
|
removeCounterparty: (organizationId: string) => Promise<void>
|
||||||
|
|
||||||
|
// Состояние
|
||||||
|
loading: boolean
|
||||||
|
error: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseCounterpartyFiltersReturn {
|
||||||
|
// Текущие фильтры
|
||||||
|
searchQuery: string
|
||||||
|
typeFilter: OrganizationType
|
||||||
|
debouncedSearch: string
|
||||||
|
|
||||||
|
// Методы обновления фильтров
|
||||||
|
handleSearchChange: (query: string) => void
|
||||||
|
handleTypeFilterChange: (type: OrganizationType) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UsePartnerLinksReturn {
|
||||||
|
// Данные
|
||||||
|
partnerLink: PartnerLink | null
|
||||||
|
loading: boolean
|
||||||
|
error: string | null
|
||||||
|
|
||||||
|
// Методы
|
||||||
|
generateLink: () => Promise<void>
|
||||||
|
copyToClipboard: (text: string) => Promise<boolean>
|
||||||
|
refreshStats: () => Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// ТИПЫ ДЛЯ GraphQL
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export interface CounterpartyMutationVariables {
|
||||||
|
requestId?: string
|
||||||
|
organizationId?: string
|
||||||
|
message?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SearchOrganizationsVariables {
|
||||||
|
type?: string
|
||||||
|
search?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// УТИЛИТАРНЫЕ ТИПЫ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export interface TabConfig {
|
||||||
|
key: string
|
||||||
|
label: string
|
||||||
|
count?: number
|
||||||
|
icon?: React.ComponentType<{ className?: string }>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ActionResult {
|
||||||
|
success: boolean
|
||||||
|
message?: string
|
||||||
|
error?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// КОНСТАНТЫ И ЕНУМЫ
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export const ORGANIZATION_TYPES = {
|
||||||
|
FULFILLMENT: 'Фулфилмент',
|
||||||
|
SELLER: 'Селлер',
|
||||||
|
LOGIST: 'Логистика',
|
||||||
|
WHOLESALE: 'Поставщик',
|
||||||
|
} as const
|
||||||
|
|
||||||
|
export const REQUEST_STATUSES = {
|
||||||
|
PENDING: 'Ожидает',
|
||||||
|
ACCEPTED: 'Принято',
|
||||||
|
REJECTED: 'Отклонено',
|
||||||
|
CANCELLED: 'Отменено',
|
||||||
|
} as const
|
||||||
|
|
||||||
|
export const SORT_FIELDS = {
|
||||||
|
name: 'Название',
|
||||||
|
date: 'Дата',
|
||||||
|
inn: 'ИНН',
|
||||||
|
type: 'Тип',
|
||||||
|
} as const
|
||||||
@ -9,7 +9,7 @@ import { GET_INCOMING_REQUESTS } from '@/graphql/queries'
|
|||||||
import { useRealtime } from '@/hooks/useRealtime'
|
import { useRealtime } from '@/hooks/useRealtime'
|
||||||
import { useSidebar } from '@/hooks/useSidebar'
|
import { useSidebar } from '@/hooks/useSidebar'
|
||||||
|
|
||||||
import { MarketCounterparties } from '../market/market-counterparties'
|
import MarketCounterparties from '../market/market-counterparties'
|
||||||
import { MarketFulfillment } from '../market/market-fulfillment'
|
import { MarketFulfillment } from '../market/market-fulfillment'
|
||||||
import { MarketLogistics } from '../market/market-logistics'
|
import { MarketLogistics } from '../market/market-logistics'
|
||||||
import { MarketSellers } from '../market/market-sellers'
|
import { MarketSellers } from '../market/market-sellers'
|
||||||
|
|||||||
Reference in New Issue
Block a user