sfera-new/docs/presentation-layer/COMPONENT_ARCHITECTURE.md

АРХИТЕКТУРА REACT КОМПОНЕНТОВ СИСТЕМЫ SFERA

🎯 ОБЩИЕ ПРИНЦИПЫ АРХИТЕКТУРЫ

1. МОДУЛЬНАЯ АРХИТЕКТУРА (Официальный стандарт)

Применяется для компонентов >500 строк (обязательно) и >800 строк (рефакторинг)

// ✅ Модульная структура (пример: create-suppliers)
src/components/supplies/create-suppliers/
├── index.tsx                    // Главный компонент-оркестратор
├── blocks/                      // UI блок-компоненты
│   ├── SuppliersBlock.tsx      // Выбор поставщиков
│   ├── ProductCardsBlock.tsx   // Каталог товаров
│   ├── DetailedCatalogBlock.tsx // Детальный каталог
│   └── CartBlock.tsx           // Корзина заказа
├── hooks/                       // Бизнес-логика
│   ├── useSupplierSelection.ts  // Логика выбора поставщиков
│   ├── useProductCatalog.ts     // Логика каталога
│   ├── useRecipeBuilder.ts      // Построение рецептур
│   └── useSupplyCart.ts         // Управление корзиной
└── types/
    └── supply-creation.types.ts // TypeScript интерфейсы

2. ПРИНЦИП КОМПОЗИЦИИ КОМПОНЕНТОВ

// ✅ Главный компонент как оркестратор
export function CreateSuppliersSupplyPage() {
  // Подключение hooks для бизнес-логики
  const supplierLogic = useSupplierSelection()
  const catalogLogic = useProductCatalog()
  const cartLogic = useSupplyCart()

  return (
    <div className="flex flex-col h-full">
      {/* Композиция из блок-компонентов */}
      <SuppliersBlock {...supplierLogic} />
      <ProductCardsBlock {...catalogLogic} />
      <DetailedCatalogBlock {...catalogLogic} />
      <CartBlock {...cartLogic} />
    </div>
  )
}

3. РАЗДЕЛЕНИЕ ОТВЕТСТВЕННОСТИ

// ✅ Четкое разделение ролей
interface ComponentRoles {
  index.tsx: "Композиция блоков + координация между ними"
  blocks/: "UI представление + локальная логика взаимодействия"
  hooks/: "Бизнес-логика + API взаимодействие + состояние"
  types/: "TypeScript контракты + интерфейсы данных"
}

🧩 ТИПЫ КОМПОНЕНТОВ В СИСТЕМЕ

1. DASHBOARD КОМПОНЕНТЫ

Назначение: Главные экраны кабинетов организаций

// Паттерн: [OrganizationType]-[Feature]-dashboard
src/components/dashboard/
├── dashboard.tsx                    // Общий роутер по типам
├── fulfillment-dashboard.tsx       // Специализированный дашборд
├── seller-dashboard.tsx
├── wholesale-dashboard.tsx
└── logist-dashboard.tsx

// Структура dashboard компонента:
export function FulfillmentDashboard() {
  const { organization } = useAuth()

  // Условная маршрутизация по функциям
  if (activeTab === 'supplies') return <FulfillmentSuppliesTab />
  if (activeTab === 'warehouse') return <WarehouseDashboard />
  if (activeTab === 'orders') return <OrdersManagement />
}

2. CREATION/FORM КОМПОНЕНТЫ

Назначение: Создание сущностей, сложные формы

// Паттерн: create-[entity]-[action]-page
src/components/supplies/
├── create-suppliers/              // Модульная архитектура
├── create-supply-page.tsx        // Простая форма
├── create-consumables-supply-page.tsx
└── direct-supply-creation/       // Модульная архитектура

// Принципы создания форм:
const CreateEntityForm = () => {
  // 1. Валидация данных
  const { register, handleSubmit, errors } = useForm()

  // 2. API интеграция
  const { createEntity, loading } = useEntityCreation()

  // 3. Навигация после создания
  const router = useRouter()

  const onSubmit = async (data) => {
    await createEntity(data)
    router.push('/success-page')
  }
}

3. LISTING/TABLE КОМПОНЕНТЫ

Назначение: Списки, таблицы, отображение данных

// Паттерн: [entity]-[action]-tab или [entity]-list
src/components/supplies/
├── goods-supplies-table.tsx       // Таблица товаров
├── multilevel-supplies-table.tsx  // Многоуровневая таблица
├── fulfillment-supplies/
│   ├── all-supplies-tab.tsx      // Табы для группировки
│   ├── fulfillment-supplies-tab.tsx
│   └── seller-supply-orders-tab.tsx

// Структура listing компонента:
const EntityListingTab = () => {
  // 1. Загрузка данных
  const { entities, loading, error } = useEntityList()

  // 2. Фильтрация и поиск
  const { filteredEntities, searchQuery, setSearchQuery } = useEntityFilters(entities)

  // 3. Пагинация
  const { currentPage, pageSize, paginatedEntities } = usePagination(filteredEntities)

  return (
    <div>
      <SearchHeader onSearch={setSearchQuery} />
      <EntityTable entities={paginatedEntities} />
      <PaginationControls {...paginationProps} />
    </div>
  )
}

4. MODAL/DIALOG КОМПОНЕНТЫ

Назначение: Всплывающие окна, детальные формы

// Паттерн: [entity]-[action]-modal
src/components/market/
├── organization-details-modal.tsx  // Детали организации
└── product-details-modal.tsx       // Детали товара

src/components/supplies/
└── add-goods-modal.tsx             // Добавление товаров

// Структура modal компонента:
interface ModalProps {
  isOpen: boolean
  onClose: () => void
  entityId?: string  // Для редактирования существующей сущности
}

const EntityDetailsModal = ({ isOpen, onClose, entityId }: ModalProps) => {
  // Загрузка данных при открытии
  const { entity, loading } = useEntityDetails(entityId, isOpen)

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent>
        {loading ? <LoadingSpinner /> : <EntityForm entity={entity} />}
      </DialogContent>
    </Dialog>
  )
}

🔗 ПРАВИЛА ИНТЕГРАЦИИ С HOOKS

1. BUSINESS LOGIC HOOKS

// ✅ Правильная структура business hook
const useEntityManagement = (params?: EntityParams) => {
  // Состояние
  const [entities, setEntities] = useState<Entity[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  // API интеграция
  const { mutate: createEntity } = useMutation(CREATE_ENTITY_MUTATION)
  const { data, loading: queryLoading } = useQuery(GET_ENTITIES_QUERY)

  // Публичный интерфейс
  return {
    // Данные
    entities,
    loading: loading || queryLoading,
    error,

    // Действия
    createEntity: async (data: EntityInput) => { ... },
    updateEntity: async (id: string, data: Partial<Entity>) => { ... },
    deleteEntity: async (id: string) => { ... },

    // Вычисляемые значения
    totalCount: entities.length,
    hasEntities: entities.length > 0,
  }
}

2. UI STATE HOOKS

// ✅ Правильная структура UI state hook
const useEntityFilters = (entities: Entity[]) => {
  const [searchQuery, setSearchQuery] = useState('')
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')

  // Мемоизация вычислений
  const filteredEntities = useMemo(() => {
    return entities
      .filter(
        (entity) =>
          entity.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
          (selectedCategory ? entity.category === selectedCategory : true),
      )
      .sort((a, b) => (sortOrder === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)))
  }, [entities, searchQuery, selectedCategory, sortOrder])

  return {
    // Состояние фильтров
    searchQuery,
    setSearchQuery,
    selectedCategory,
    setSelectedCategory,
    sortOrder,
    setSortOrder,

    // Результат фильтрации
    filteredEntities,
    totalCount: filteredEntities.length,

    // Утилиты
    clearFilters: () => {
      setSearchQuery('')
      setSelectedCategory(null)
      setSortOrder('asc')
    },
  }
}

3. ФОРМАТИРОВАНИЕ ДАННЫХ

// ✅ Правильная структура data formatting hook
const useEntityFormatting = () => {
  // Форматирование для UI
  const formatEntityForDisplay = useCallback(
    (entity: Entity) => ({
      id: entity.id,
      displayName: `${entity.name} (${entity.code})`,
      statusBadge: {
        text: entity.status,
        variant: entity.status === 'active' ? 'success' : 'warning',
      },
      formattedPrice: new Intl.NumberFormat('ru-RU', {
        style: 'currency',
        currency: 'RUB',
      }).format(entity.price),
      formattedDate: format(entity.createdAt, 'dd.MM.yyyy HH:mm'),
    }),
    [],
  )

  return {
    formatEntityForDisplay,
    formatPrice: (price: number) => `${price} ₽`,
    formatDate: (date: Date) => format(date, 'dd.MM.yyyy'),
  }
}

🎨 UI КОМПОНЕНТЫ И PATTERNS

1. SHADCN/UI ИНТЕГРАЦИЯ

// ✅ Правильное использование базовых UI компонентов
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

// Создание составных компонентов на основе базовых
const EntityCard = ({ entity, onEdit }: EntityCardProps) => (
  <Card className="hover:shadow-md transition-shadow">
    <CardHeader>
      <CardTitle>{entity.name}</CardTitle>
    </CardHeader>
    <CardContent>
      <div className="flex justify-between items-center">
        <span className="text-muted-foreground">{entity.code}</span>
        <Button variant="outline" size="sm" onClick={() => onEdit(entity)}>
          Редактировать
        </Button>
      </div>
    </CardContent>
  </Card>
)

2. LAYOUT PATTERNS

// ✅ Стандартная структура page layout
const PageLayout = ({ children }: { children: React.ReactNode }) => {
  const { getSidebarMargin } = useSidebar()

  return (
    <div className="flex h-screen bg-gray-50">
      <Sidebar />
      <main className={`flex-1 overflow-hidden ${getSidebarMargin()}`}>
        <div className="h-full flex flex-col">
          {children}
        </div>
      </main>
    </div>
  )
}

// ✅ Стандартная структура content area
const ContentArea = ({ title, actions, children }: ContentAreaProps) => (
  <div className="flex flex-col h-full">
    {/* Header */}
    <div className="flex items-center justify-between p-6 border-b bg-white">
      <h1 className="text-2xl font-semibold text-gray-900">{title}</h1>
      <div className="flex gap-2">{actions}</div>
    </div>

    {/* Content */}
    <div className="flex-1 p-6 overflow-auto">
      {children}
    </div>
  </div>
)

3. СОСТОЯНИЯ ЗАГРУЗКИ И ОШИБОК

// ✅ Стандартные компоненты для состояний
const LoadingState = () => (
  <div className="flex items-center justify-center h-64">
    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
    <span className="ml-2 text-muted-foreground">Загрузка...</span>
  </div>
)

const ErrorState = ({ error, onRetry }: { error: string, onRetry?: () => void }) => (
  <div className="flex flex-col items-center justify-center h-64 text-center">
    <p className="text-red-600 mb-4">{error}</p>
    {onRetry && (
      <Button variant="outline" onClick={onRetry}>
        Попробовать снова
      </Button>
    )}
  </div>
)

const EmptyState = ({ message, action }: { message: string, action?: React.ReactNode }) => (
  <div className="flex flex-col items-center justify-center h-64 text-center">
    <p className="text-muted-foreground mb-4">{message}</p>
    {action}
  </div>
)

🔄 ПРАВИЛА РЕФАКТОРИНГА

1. КРИТЕРИИ ДЛЯ РЕФАКТОРИНГА

// ❌ Кандидаты для рефакторинга:
const ProblematicComponent = () => {
  // 1. Много useState (>8-10)
  const [state1, setState1] = useState()
  const [state2, setState2] = useState()
  // ... еще 8 useState

  // 2. Длинные useEffect (>20 строк)
  useEffect(() => {
    // 50+ строк логики
  }, [])

  // 3. Встроенная бизнес-логика в JSX
  return (
    <div>
      {data.map(item => {
        // 20+ строк трансформации данных прямо в JSX
        const processedItem = complexProcessing(item)
        return <ItemCard key={item.id} item={processedItem} />
      })}
    </div>
  )
}

2. СТРАТЕГИЯ РЕФАКТОРИНГА

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

// 1. Выделение business logic в hooks
const useItemsLogic = () => {
  const { items, loading } = useQuery(GET_ITEMS)
  const processedItems = useMemo(() =>
    items.map(complexProcessing), [items]
  )

  return { processedItems, loading }
}

// 2. Выделение UI блоков
const ItemsList = ({ items }: { items: ProcessedItem[] }) => (
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {items.map(item => (
      <ItemCard key={item.id} item={item} />
    ))}
  </div>
)

// 3. Чистый главный компонент
const RefactoredComponent = () => {
  const { processedItems, loading } = useItemsLogic()

  if (loading) return <LoadingState />

  return (
    <ContentArea title="Элементы">
      <ItemsList items={processedItems} />
    </ContentArea>
  )
}

3. MIGRATION CHECKLIST

// ✅ Чек-лист рефакторинга:
const RefactoringChecklist = {
  before: [
    '✅ Проанализировать размер компонента (>500 строк)',
    '✅ Выделить логические блоки UI',
    '✅ Найти повторяющиеся паттерны useState',
    '✅ Определить бизнес-логику для вынесения в hooks',
  ],

  during: [
    '✅ Создать папочную структуру модуля',
    '✅ Определить TypeScript интерфейсы в types/',
    '✅ Вынести бизнес-логику в hooks/',
    '✅ Создать блок-компоненты в blocks/',
    '✅ Собрать главный компонент как оркестратор',
  ],

  after: [
    '✅ Проверить TypeScript ошибки',
    '✅ Запустить линтер',
    '✅ Протестировать функциональность',
    '✅ Обновить импорты в других файлах',
  ],
}

🚀 ПРОИЗВОДИТЕЛЬНОСТЬ И ОПТИМИЗАЦИЯ

1. МЕМОИЗАЦИЯ КОМПОНЕНТОВ

// ✅ Правильная мемоизация
const ExpensiveComponent = React.memo(({ data, onAction }: Props) => {
  // Мемоизация вычислений
  const processedData = useMemo(() =>
    expensiveDataProcessing(data), [data]
  )

  // Мемоизация коллбэков
  const handleAction = useCallback((id: string) => {
    onAction(id)
  }, [onAction])

  return <div>...</div>
})

// ✅ Оптимизация списков
const OptimizedList = ({ items }: { items: Item[] }) => {
  return (
    <div>
      {items.map(item => (
        <MemoizedItemCard
          key={item.id}
          item={item}
        />
      ))}
    </div>
  )
}

const MemoizedItemCard = React.memo(({ item }: { item: Item }) => (
  <Card>
    <CardContent>{item.name}</CardContent>
  </Card>
))

2. LAZY LOADING КОМПОНЕНТОВ

// ✅ Ленивая загрузка тяжелых компонентов
const HeavyDashboard = lazy(() => import('./heavy-dashboard'))
const ComplexChart = lazy(() => import('./complex-chart'))

const ComponentWithLazyLoading = () => {
  const [showHeavyContent, setShowHeavyContent] = useState(false)

  return (
    <div>
      <Button onClick={() => setShowHeavyContent(true)}>
        Загрузить детали
      </Button>

      {showHeavyContent && (
        <Suspense fallback={<LoadingState />}>
          <HeavyDashboard />
        </Suspense>
      )}
    </div>
  )
}

📋 КОНКРЕТНЫЕ ПРИМЕРЫ ИЗ РЕАЛЬНОЙ СИСТЕМЫ

1. МОДУЛЬНЫЙ КОМПОНЕНТ СОЗДАНИЯ ПОСТАВОК

Файл: src/components/supplies/create-suppliers/

Структура модульного компонента:

src/components/supplies/create-suppliers/
├── index.tsx                    // 🎯 Главный оркестратор - 287 строк
├── blocks/                      // 🧱 UI блок-компоненты
│   ├── SuppliersBlock.tsx      //    Выбор поставщиков
│   ├── ProductCardsBlock.tsx   //    Превью товаров
│   ├── DetailedCatalogBlock.tsx//    Детальный каталог с рецептурой
│   └── CartBlock.tsx           //    Корзина с расчетами - 336 строк
├── hooks/                       // ⚙️ Бизнес-логика (custom hooks)
│   ├── useSupplierSelection.ts //    Управление поставщиками
│   ├── useProductCatalog.ts    //    Каталог товаров
│   ├── useRecipeBuilder.ts     //    Построение рецептур
│   └── useSupplyCart.ts        //    Логика корзины - 284 строки
└── types/                       // 📝 TypeScript определения
    └── supply-creation.types.ts //    Интерфейсы - 384 строки

Архитектурные принципы реализации:

1. ОРКЕСТРАТОР (index.tsx) - 287 строк:

/**
 * СОЗДАНИЕ ПОСТАВОК ПОСТАВЩИКОВ - НОВАЯ МОДУЛЬНАЯ АРХИТЕКТУРА
 * Композиция из блок-компонентов с использованием custom hooks
 */
export function CreateSuppliersSupplyPage() {
  const router = useRouter()
  const { getSidebarMargin } = useSidebar()

  // 1. ХУКА ВЫБОРА ПОСТАВЩИКОВ
  const {
    selectedSupplier,
    setSelectedSupplier,
    searchQuery,
    setSearchQuery,
    suppliers,
    allCounterparties,
    loading: suppliersLoading,
    error: suppliersError,
  } = useSupplierSelection()

  // 2. ХУКА КАТАЛОГА ТОВАРОВ
  const {
    products,
    allSelectedProducts,
    setAllSelectedProducts,
    getProductQuantity,
    addProductToSelected,
    updateSelectedProductQuantity,
    removeProductFromSelected,
  } = useProductCatalog({ selectedSupplier })

  // 3. ХУКА ПОСТРОЕНИЯ РЕЦЕПТУР
  const {
    productRecipes,
    setProductRecipes,
    fulfillmentServices,
    fulfillmentConsumables,
    sellerConsumables,
    initializeProductRecipe,
  } = useRecipeBuilder({ selectedFulfillment })

  // 4. ХУКА КОРЗИНЫ ПОСТАВОК
  const {
    selectedGoods,
    deliveryDate,
    selectedFulfillment,
    totalGoodsAmount,
    isFormValid,
    addToCart,
    handleCreateSupply,
  } = useSupplyCart({
    selectedSupplier,
    allCounterparties,
    productRecipes: productRecipes,
  })

  // 🎨 КОМПОЗИЦИЯ БЛОКОВ
  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className={`flex-1 ${getSidebarMargin()} overflow-hidden transition-all duration-300`}>
        <div className="h-full flex gap-2 pt-4 pb-4">
          {/* ЛЕВАЯ ЧАСТЬ - ЗАГОЛОВОК И БЛОКИ 1-3 */}
          <div className="flex-1 flex flex-col">
            {/* ЗАГОЛОВОК И НАВИГАЦИЯ */}
            <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4 mb-2">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <Button onClick={() => router.push('/supplies')}>
                    <ArrowLeft className="h-4 w-4 mr-2" />
                    Назад к поставкам
                  </Button>
                  <h1 className="text-white font-semibold text-lg">
                    Создание поставки от поставщика
                  </h1>
                </div>
              </div>
            </div>

            {/* БЛОКИ 1-3 */}
            <div className="flex-1 flex flex-col gap-2 min-h-0">
              {/* БЛОК 1: ВЫБОР ПОСТАВЩИКОВ */}
              <div className="h-32">
                <SuppliersBlock
                  suppliers={suppliers}
                  selectedSupplier={selectedSupplier}
                  searchQuery={searchQuery}
                  loading={suppliersLoading}
                  onSupplierSelect={handleSupplierSelect}
                  onSearchChange={setSearchQuery}
                />
              </div>

              {/* БЛОК 2: КАРТОЧКИ ТОВАРОВ */}
              <div className="h-[196px]">
                <ProductCardsBlock
                  products={products}
                  selectedSupplier={selectedSupplier}
                  selectedProducts={allSelectedProducts}
                  onProductAdd={handleProductAdd}
                />
              </div>

              {/* БЛОК 3: ДЕТАЛЬНЫЙ КАТАЛОГ С РЕЦЕПТУРОЙ */}
              <div className="flex-1 min-h-0">
                <DetailedCatalogBlock
                  allSelectedProducts={allSelectedProducts}
                  productRecipes={productRecipes}
                  fulfillmentServices={fulfillmentServices}
                  fulfillmentConsumables={fulfillmentConsumables}
                  sellerConsumables={sellerConsumables}
                  deliveryDate={deliveryDate}
                  selectedFulfillment={selectedFulfillment}
                  allCounterparties={allCounterparties}
                  onQuantityChange={handleQuantityChange}
                  onRecipeChange={handleRecipeChange}
                  onDeliveryDateChange={setDeliveryDate}
                  onFulfillmentChange={setSelectedFulfillment}
                />
              </div>
            </div>
          </div>

          {/* ПРАВАЯ КОЛОНКА - БЛОК 4: КОРЗИНА */}
          <CartBlock
            selectedGoods={selectedGoods}
            totalAmount={totalGoodsAmount}
            isFormValid={isFormValid}
            onCreateSupply={handleCreateSupply}
            // Данные для расчета с рецептурой
            allSelectedProducts={allSelectedProducts}
            productRecipes={productRecipes}
            fulfillmentServices={fulfillmentServices}
            fulfillmentConsumables={fulfillmentConsumables}
            sellerConsumables={sellerConsumables}
          />
        </div>
      </main>
    </div>
  )
}

2. СЛОЖНЫЙ HOOK - ЛОГИКА КОРЗИНЫ (useSupplyCart.ts) - 284 строки:

/**
 * ХУКА ДЛЯ ЛОГИКИ КОРЗИНЫ ПОСТАВОК
 * Управляет корзиной товаров и настройками поставки
 */
export function useSupplyCart({ selectedSupplier, allCounterparties, productRecipes }: UseSupplyCartProps) {
  const router = useRouter()

  // Состояния корзины и настроек
  const [selectedGoods, setSelectedGoods] = useState<SelectedGoodsItem[]>([])
  const [deliveryDate, setDeliveryDate] = useState(() => {
    const tomorrow = new Date()
    tomorrow.setDate(tomorrow.getDate() + 1)
    return tomorrow.toISOString().split('T')[0] // Формат YYYY-MM-DD
  })
  const [selectedLogistics, setSelectedLogistics] = useState<string>('auto')
  const [selectedFulfillment, setSelectedFulfillment] = useState<string>('')
  const [isCreatingSupply, setIsCreatingSupply] = useState(false)

  // Мутация создания поставки
  const [createSupplyOrder] = useMutation(CREATE_SUPPLY_ORDER)

  // Получаем логистические компании
  const logisticsCompanies = useMemo(() => {
    return allCounterparties?.filter((partner) => partner.type === 'LOGIST') || []
  }, [allCounterparties])

  // Добавление товара в корзину
  const addToCart = (product: GoodsProduct, quantity: number, additionalData?: object) => {
    if (!selectedSupplier) {
      toast.error('Сначала выберите поставщика')
      return
    }

    if (quantity <= 0) {
      toast.error('Укажите количество товара')
      return
    }

    const existingItemIndex = selectedGoods.findIndex((item) => item.id === product.id)

    if (existingItemIndex >= 0) {
      // Обновляем существующий товар
      setSelectedGoods((prev) => {
        const updated = [...prev]
        updated[existingItemIndex] = {
          ...updated[existingItemIndex],
          selectedQuantity: quantity,
          ...additionalData,
        }
        return updated
      })
      toast.success('Количество товара обновлено')
    } else {
      // Добавляем новый товар
      const newItem: SelectedGoodsItem = {
        id: product.id,
        name: product.name,
        sku: product.article,
        price: product.price,
        selectedQuantity: quantity,
        supplierId: selectedSupplier?.id || '',
        supplierName: selectedSupplier?.name || selectedSupplier?.fullName || '',
        ...additionalData,
      }

      setSelectedGoods((prev) => [...prev, newItem])
      toast.success('Товар добавлен в корзину')
    }
  }

  // Функция расчета полной стоимости товара с рецептурой
  const getProductTotalWithRecipe = useCallback(
    (productId: string, quantity: number) => {
      const product = selectedGoods.find((p) => p.id === productId)
      if (!product) return 0

      const baseTotal = product.price * quantity
      const recipe = productRecipes[productId]

      if (!recipe) return baseTotal

      // Здесь будет логика расчета стоимости услуг и расходников
      // Пока возвращаем базовую стоимость
      return baseTotal
    },
    [selectedGoods, productRecipes],
  )

  // БИЗНЕС-ВАЛИДАЦИЯ (реактивная)
  const hasRequiredServices = useMemo(() => {
    return selectedGoods.every((item) => {
      const hasServices = productRecipes[item.id]?.selectedServices?.length > 0
      return hasServices
    })
  }, [selectedGoods, productRecipes])

  const isFormValid = useMemo(() => {
    return selectedSupplier && selectedGoods.length > 0 && deliveryDate && selectedFulfillment && hasRequiredServices
  }, [selectedSupplier, selectedGoods.length, deliveryDate, selectedFulfillment, hasRequiredServices])

  // Создание поставки
  const handleCreateSupply = async () => {
    if (!isFormValid) {
      if (!hasRequiredServices) {
        toast.error('Каждый товар должен иметь минимум 1 услугу фулфилмента')
      } else {
        toast.error('Заполните все обязательные поля')
      }
      return
    }

    setIsCreatingSupply(true)

    try {
      const inputData = {
        partnerId: selectedSupplier?.id || '',
        fulfillmentCenterId: selectedFulfillment,
        deliveryDate: new Date(deliveryDate).toISOString(), // Конвертируем в ISO string
        logisticsPartnerId: selectedLogistics === 'auto' ? null : selectedLogistics,
        items: selectedGoods.map((item) => {
          const recipe = productRecipes[item.id] || {
            selectedServices: [],
            selectedFFConsumables: [],
            selectedSellerConsumables: [],
          }
          return {
            productId: item.id,
            quantity: item.selectedQuantity,
            recipe: {
              services: recipe.selectedServices || [],
              fulfillmentConsumables: recipe.selectedFFConsumables || [],
              sellerConsumables: recipe.selectedSellerConsumables || [],
              marketplaceCardId: recipe.selectedWBCard || null,
            },
          }
        }),
      }

      await createSupplyOrder({ variables: { input: inputData } })

      toast.success('Поставка успешно создана!')
      router.push('/supplies')
    } catch (error) {
      console.error('❌ Ошибка создания поставки:', error)
      toast.error('Ошибка при создании поставки')
    } finally {
      setIsCreatingSupply(false)
    }
  }

  return {
    // Состояние корзины
    selectedGoods,
    deliveryDate,
    selectedFulfillment,
    isCreatingSupply,

    // Расчеты
    totalGoodsAmount,

    // Валидация
    hasRequiredServices,
    isFormValid,

    // Функции управления корзиной
    addToCart,
    removeFromCart,
    getProductTotalWithRecipe,
    handleCreateSupply,
  }
}

3. БЛОК С БИЗНЕС-ЛОГИКОЙ (CartBlock.tsx) - 336 строк:

/**
 * БЛОК КОРЗИНЫ И НАСТРОЕК ПОСТАВКИ
 * КЛЮЧЕВЫЕ ФУНКЦИИ:
 * 1. Отображение товаров в корзине с детализацией рецептуры
 * 2. Расчет полной стоимости с учетом услуг и расходников ФФ/селлера
 * 3. Настройки поставки (дата, фулфилмент, логистика)
 * 4. Валидация и создание поставки
 *
 * БИЗНЕС-ЛОГИКА РАСЧЕТА ЦЕН:
 * - Базовая цена товара × количество
 * - + Услуги фулфилмента × количество
 * - + Расходники фулфилмента × количество
 * - + Расходники селлера × количество
 * = Итоговая стоимость за товар
 */
export const CartBlock = React.memo(function CartBlock({
  selectedGoods,
  productRecipes,
  fulfillmentServices,
  fulfillmentConsumables,
  sellerConsumables,
  onCreateSupply,
}: CartBlockProps) {
  return (
    <div className="w-72 flex-shrink-0 h-full">
      <div className="bg-white/10 backdrop-blur border-white/20 p-4 rounded-2xl h-full flex flex-col">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-white font-semibold flex items-center text-sm">
            <ShoppingCart className="h-4 w-4 mr-2" />
            Корзина
          </h3>
          <div className="bg-white/10 px-2 py-1 rounded-full">
            <span className="text-white/80 text-xs font-medium">{selectedGoods.length} шт</span>
          </div>
        </div>

        {selectedGoods.length === 0 ? (
          <div className="text-center py-8 flex-1 flex flex-col justify-center">
            <div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full p-6 w-fit mx-auto mb-4">
              <ShoppingCart className="h-10 w-10 text-purple-300" />
            </div>
            <p className="text-white/60 text-sm font-medium mb-2">Корзина пуста</p>
            <p className="text-white/40 text-xs leading-relaxed">
              Добавьте товары из каталога<br />
              для создания поставки
            </p>
          </div>
        ) : (
          <>
            {/* Список товаров в корзине - компактная область */}
            <div className="mb-4">
              <div className="space-y-2">
                {selectedGoods.map((item) => {
                  /**
                   * АЛГОРИТМ РАСЧЕТА ПОЛНОЙ СТОИМОСТИ ТОВАРА
                   *
                   * 1. Базовая стоимость = цена товара × количество
                   * 2. Услуги ФФ = сумма всех выбранных услуг × количество товара
                   * 3. Расходники ФФ = сумма всех выбранных расходников × количество
                   * 4. Расходники селлера = сумма расходников селлера × количество
                   * 5. Итого = базовая + услуги + расходники ФФ + расходники селлера
                   */
                  const recipe = productRecipes[item.id]
                  const baseCost = item.price * item.selectedQuantity

                  // РАСЧЕТ УСЛУГ ФУЛФИЛМЕНТА
                  // Каждая услуга применяется к каждой единице товара
                  const servicesCost = (recipe?.selectedServices || []).reduce((sum, serviceId) => {
                    const service = fulfillmentServices.find(s => s.id === serviceId)
                    return sum + (service ? service.price * item.selectedQuantity : 0)
                  }, 0)

                  // РАСЧЕТ РАСХОДНИКОВ ФУЛФИЛМЕНТА
                  // Расходники ФФ тоже масштабируются по количеству товара
                  const ffConsumablesCost = (recipe?.selectedFFConsumables || []).reduce((sum, consumableId) => {
                    const consumable = fulfillmentConsumables.find(c => c.id === consumableId)
                    return sum + (consumable ? consumable.price * item.selectedQuantity : 0)
                  }, 0)

                  // РАСЧЕТ РАСХОДНИКОВ СЕЛЛЕРА
                  // Используется pricePerUnit как цена за единицу расходника
                  const sellerConsumablesCost = (recipe?.selectedSellerConsumables || []).reduce((sum, consumableId) => {
                    const consumable = sellerConsumables.find(c => c.id === consumableId)
                    return sum + (consumable ? (consumable.pricePerUnit || 0) * item.selectedQuantity : 0)
                  }, 0)

                  const totalItemCost = baseCost + servicesCost + ffConsumablesCost + sellerConsumablesCost
                  const hasRecipe = servicesCost > 0 || ffConsumablesCost > 0 || sellerConsumablesCost > 0

                  return (
                    <div key={item.id} className="bg-white/5 rounded-lg p-3 space-y-2">
                      {/* Основная информация о товаре */}
                      <div className="flex items-center justify-between">
                        <div className="flex-1 min-w-0">
                          <h4 className="text-white text-sm font-medium truncate">{item.name}</h4>
                          <div className="flex items-center gap-2 text-xs text-white/60">
                            <span>{item.price.toLocaleString('ru-RU')} ₽</span>
                            <span>×</span>
                            <span>{item.selectedQuantity}</span>
                            <span>=</span>
                            <span className="text-white/80">{baseCost.toLocaleString('ru-RU')} ₽</span>
                          </div>
                        </div>
                      </div>

                      {/* Детализация рецептуры */}
                      {hasRecipe && (
                        <div className="space-y-1 text-xs">
                          {servicesCost > 0 && (
                            <div className="flex justify-between text-purple-300">
                              <span>+ Услуги ФФ:</span>
                              <span>{servicesCost.toLocaleString('ru-RU')} ₽</span>
                            </div>
                          )}
                          {ffConsumablesCost > 0 && (
                            <div className="flex justify-between text-orange-300">
                              <span>+ Расходники ФФ:</span>
                              <span>{ffConsumablesCost.toLocaleString('ru-RU')} ₽</span>
                            </div>
                          )}
                          {sellerConsumablesCost > 0 && (
                            <div className="flex justify-between text-blue-300">
                              <span>+ Расходники сел.:</span>
                              <span>{sellerConsumablesCost.toLocaleString('ru-RU')} ₽</span>
                            </div>
                          )}
                          <div className="border-t border-white/10 pt-1 mt-1">
                            <div className="flex justify-between font-medium text-green-400">
                              <span>Итого за товар:</span>
                              <span>{totalItemCost.toLocaleString('ru-RU')} ₽</span>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  )
                })}
              </div>
            </div>

            <Button
              onClick={onCreateSupply}
              className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white disabled:opacity-50 h-8 text-sm"
            >
              Создать поставку
            </Button>
          </>
        )}
      </div>
    </div>
  )
})

4. СТРОГАЯ ТИПИЗАЦИЯ (supply-creation.types.ts) - 384 строки:

/**
 * ТИПЫ ДЛЯ СОЗДАНИЯ ПОСТАВОК ПОСТАВЩИКОВ
 * Согласно модульной архитектуре
 */

// Основные сущности
export interface GoodsSupplier {
  id: string
  inn: string
  name?: string
  fullName?: string
  type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
  address?: string
  phones?: Array<{ value: string }>
  emails?: Array<{ value: string }>
  users?: Array<{ id: string; avatar?: string; managerName?: string }>
  createdAt: string
  rating?: number
  market?: string // Принадлежность к рынку
}

export interface GoodsProduct {
  id: string
  name: string
  description?: string
  price: number
  category?: { name: string }
  images: string[]
  mainImage?: string
  article: string // Артикул поставщика
  organization: {
    id: string
    name: string
  }
  quantity?: number
  unit?: string
  weight?: number
  dimensions?: {
    length: number
    width: number
    height: number
  }
}

export interface SelectedGoodsItem {
  id: string
  name: string
  sku: string
  price: number
  selectedQuantity: number
  unit?: string
  category?: string
  supplierId: string
  supplierName: string
  completeness?: string // Комплектность
  recipe?: string // Рецептура/состав
  specialRequirements?: string // Особые требования
  parameters?: Array<{ name: string; value: string }> // Параметры товара
}

// Компоненты рецептуры
export interface FulfillmentService {
  id: string
  name: string
  description?: string
  price: number
  category?: string
}

export interface FulfillmentConsumable {
  id: string
  name: string
  price: number
  quantity: number
  unit?: string
}

export interface SellerConsumable {
  id: string
  name: string
  pricePerUnit: number
  warehouseStock: number
  unit?: string
}

export interface ProductRecipe {
  productId: string
  selectedServices: string[]
  selectedFFConsumables: string[]
  selectedSellerConsumables: string[]
  selectedWBCard?: string
}

// Пропсы для блок-компонентов
export interface CartBlockProps {
  selectedGoods: SelectedGoodsItem[]
  selectedSupplier: GoodsSupplier | null
  deliveryDate: string
  selectedFulfillment: string
  selectedLogistics: string
  allCounterparties: GoodsSupplier[]
  totalAmount: number
  isFormValid: boolean
  isCreatingSupply: boolean
  // Новые поля для расчета с рецептурой
  allSelectedProducts: Array<GoodsProduct & { selectedQuantity: number }>
  productRecipes: Record<string, ProductRecipe>
  fulfillmentServices: FulfillmentService[]
  fulfillmentConsumables: FulfillmentConsumable[]
  sellerConsumables: SellerConsumable[]
  onLogisticsChange: (logistics: string) => void
  onCreateSupply: () => void
  onItemRemove: (itemId: string) => void
}

// === РАСШИРЕННАЯ СИСТЕМА ДЛЯ МНОГОУРОВНЕВЫХ ПОСТАВОК ===

// Расширенный интерфейс поставки для многоуровневой таблицы
export interface MultiLevelSupplyOrder {
  id: string
  organizationId: string
  partnerId: string
  partner: GoodsSupplier
  deliveryDate: string
  status: SupplyOrderStatus
  totalAmount: number
  totalItems: number
  fulfillmentCenterId?: string
  fulfillmentCenter?: GoodsSupplier
  logisticsPartnerId?: string
  logisticsPartner?: GoodsSupplier
  // Новые поля
  packagesCount?: number // Количество грузовых мест
  volume?: number // Объём товара в м³
  responsibleEmployee?: string // ID ответственного сотрудника ФФ
  employee?: Employee // Ответственный сотрудник
  notes?: string // Заметки
  routes: SupplyRoute[] // Маршруты поставки
  items: MultiLevelSupplyOrderItem[]
  createdAt: string
  updatedAt: string
  organization: GoodsSupplier
}

// Развернутая рецептура с детализацией
export interface ExpandedProductRecipe {
  services: FulfillmentService[]
  fulfillmentConsumables: FulfillmentConsumable[]
  sellerConsumables: SellerConsumable[]
  marketplaceCardId?: string
  totalServicesCost: number
  totalConsumablesCost: number
  totalRecipeCost: number
}

// Статусы поставок
export type SupplyOrderStatus =
  | 'PENDING' // Ожидает одобрения поставщика
  | 'SUPPLIER_APPROVED' // Поставщик одобрил
  | 'LOGISTICS_CONFIRMED' // Логистика подтвердила
  | 'SHIPPED' // Отправлено поставщиком
  | 'IN_TRANSIT' // В пути
  | 'DELIVERED' // Доставлено
  | 'CANCELLED' // Отменено

---

Создано на основе анализа: модульная архитектура, паттерны компонентов, hooks система
Дата: 2025-08-21
Основано на коде: src/components/, MODULAR_ARCHITECTURE_PATTERN.md