refactor(supplies): create modular block components

ЭТАП 1.3: Безопасное создание блок-компонентов

- Create SuppliersBlock.tsx: горизонтальный скролл поставщиков с поиском
- Create ProductCardsBlock.tsx: мини-превью товаров поставщика
- Create CartBlock.tsx: корзина товаров и настройки поставки
- Create DetailedCatalogBlock.tsx: детальный каталог с рецептурой

Каждый блок является самостоятельным компонентом:
- Четко определенные props интерфейсы
- Изолированная UI логика
- Соответствие дизайн-системе проекта
- Полная типизация TypeScript (исправлены any → строгие типы)
- Адаптивная верстка и accessibility
- Соответствие ESLint правилам проекта

Блоки готовы к интеграции в главный компонент.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/supplies/create-suppliers/blocks/DetailedCatalogBlock.tsx

@@ -0,0 +1,389 @@
+/**
+ * БЛОК ДЕТАЛЬНОГО КАТАЛОГА С РЕЦЕПТУРОЙ
+ *
+ * Выделен из create-suppliers-supply-page.tsx
+ * Детальный просмотр товаров с настройкой рецептуры и панелью управления
+ */
+
+'use client'
+
+import { Package, Settings, Building2 } from 'lucide-react'
+import Image from 'next/image'
+
+import { Badge } from '@/components/ui/badge'
+import { DatePicker } from '@/components/ui/date-picker'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+
+import type {
+  DetailedCatalogBlockProps,
+  GoodsProduct,
+  ProductRecipe,
+  FulfillmentService,
+  FulfillmentConsumable,
+  SellerConsumable,
+} from '../types/supply-creation.types'
+
+export function DetailedCatalogBlock({
+  allSelectedProducts,
+  productRecipes,
+  fulfillmentServices,
+  fulfillmentConsumables,
+  sellerConsumables,
+  deliveryDate,
+  selectedFulfillment,
+  allCounterparties,
+  onQuantityChange,
+  onRecipeChange,
+  onDeliveryDateChange,
+  onFulfillmentChange,
+  onProductRemove,
+}: DetailedCatalogBlockProps) {
+  const fulfillmentCenters = allCounterparties?.filter((partner) => partner.type === 'FULFILLMENT') || []
+
+  return (
+    <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl">
+      {/* Панель управления */}
+      <div className="p-6 border-b border-white/10">
+        <h3 className="text-white font-semibold text-lg mb-4 flex items-center">
+          <Settings className="h-5 w-5 mr-2" />
+          3. Настройки поставки
+        </h3>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {/* Дата поставки */}
+          <div>
+            <label className="text-white/90 text-sm font-medium mb-2 block">Дата поставки*</label>
+            <DatePicker
+              selected={deliveryDate ? new Date(deliveryDate) : null}
+              onSelect={(date) => {
+                if (date) {
+                  onDeliveryDateChange(date.toISOString().split('T')[0])
+                }
+              }}
+              className="w-full"
+            />
+          </div>
+
+          {/* Фулфилмент-центр */}
+          <div>
+            <label className="text-white/90 text-sm font-medium mb-2 block">Фулфилмент-центр*</label>
+            <Select value={selectedFulfillment} onValueChange={onFulfillmentChange}>
+              <SelectTrigger className="glass-input text-white">
+                <SelectValue placeholder="Выберите фулфилмент-центр" />
+              </SelectTrigger>
+              <SelectContent>
+                {fulfillmentCenters.map((center) => (
+                  <SelectItem key={center.id} value={center.id}>
+                    <div className="flex items-center gap-2">
+                      <Building2 className="h-4 w-4" />
+                      {center.name || center.fullName}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+
+      {/* Каталог товаров с рецептурой */}
+      <div className="p-6">
+        <h4 className="text-white font-semibold text-md mb-4">Товары в поставке ({allSelectedProducts.length})</h4>
+
+        {allSelectedProducts.length === 0 ? (
+          <div className="text-center py-12">
+            <div className="bg-gradient-to-br from-gray-500/20 to-gray-600/20 rounded-full p-6 w-fit mx-auto mb-4">
+              <Package className="h-10 w-10 text-gray-300" />
+            </div>
+            <p className="text-white/60 text-sm font-medium mb-2">Товары не добавлены</p>
+            <p className="text-white/40 text-xs">Выберите товары из каталога выше для настройки рецептуры</p>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {allSelectedProducts.map((product) => {
+              const recipe = productRecipes[product.id]
+              const selectedServicesIds = recipe?.selectedServices || []
+              const selectedFFConsumablesIds = recipe?.selectedFFConsumables || []
+              const selectedSellerConsumablesIds = recipe?.selectedSellerConsumables || []
+
+              return (
+                <ProductDetailCard
+                  key={product.id}
+                  product={product}
+                  recipe={recipe}
+                  fulfillmentServices={fulfillmentServices}
+                  fulfillmentConsumables={fulfillmentConsumables}
+                  sellerConsumables={sellerConsumables}
+                  selectedServicesIds={selectedServicesIds}
+                  selectedFFConsumablesIds={selectedFFConsumablesIds}
+                  selectedSellerConsumablesIds={selectedSellerConsumablesIds}
+                  onQuantityChange={onQuantityChange}
+                  onRecipeChange={onRecipeChange}
+                  onRemove={onProductRemove}
+                />
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Компонент детальной карточки товара с рецептурой
+interface ProductDetailCardProps {
+  product: GoodsProduct & { selectedQuantity: number }
+  recipe?: ProductRecipe
+  fulfillmentServices: FulfillmentService[]
+  fulfillmentConsumables: FulfillmentConsumable[]
+  sellerConsumables: SellerConsumable[]
+  selectedServicesIds: string[]
+  selectedFFConsumablesIds: string[]
+  selectedSellerConsumablesIds: string[]
+  onQuantityChange: (productId: string, quantity: number) => void
+  onRecipeChange: (productId: string, recipe: ProductRecipe) => void
+  onRemove: (productId: string) => void
+}
+
+function ProductDetailCard({
+  product,
+  selectedServicesIds,
+  selectedFFConsumablesIds,
+  selectedSellerConsumablesIds,
+  fulfillmentServices,
+  fulfillmentConsumables,
+  sellerConsumables,
+  onQuantityChange,
+  onRemove,
+}: ProductDetailCardProps) {
+  return (
+    <div className="glass-card border-white/10 hover:border-white/20 transition-all duration-300 group relative">
+      <div className="flex gap-4">
+        {/* 1. ИЗОБРАЖЕНИЕ ТОВАРА (фиксированная ширина) */}
+        <div className="w-24 flex-shrink-0">
+          <div className="relative w-24 h-24 rounded-lg overflow-hidden bg-white/5">
+            {product.mainImage || (product.images && product.images[0]) ? (
+              <Image src={product.mainImage || product.images[0]} alt={product.name} fill className="object-cover" />
+            ) : (
+              <div className="flex items-center justify-center h-full">
+                <Package className="h-8 w-8 text-white/30" />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 2. ОСНОВНАЯ ИНФОРМАЦИЯ (flex-1) */}
+        <div className="flex-1 p-3 min-w-0">
+          <div className="flex items-start justify-between mb-2">
+            <div className="flex-1 min-w-0 mr-3">
+              <h5 className="text-white font-medium text-sm leading-tight line-clamp-2">{product.name}</h5>
+              {product.article && <p className="text-white/50 text-xs mt-1">Арт: {product.article}</p>}
+            </div>
+            <button
+              onClick={() => onRemove(product.id)}
+              className="text-white/40 hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100"
+            >
+              ✕
+            </button>
+          </div>
+
+          {product.category?.name && (
+            <Badge variant="secondary" className="text-xs mb-2 bg-white/10 text-white/70">
+              {product.category.name}
+            </Badge>
+          )}
+
+          <div className="text-white/80 font-semibold text-sm">
+            {product.price.toLocaleString('ru-RU')} ₽/{product.unit || 'шт'}
+          </div>
+        </div>
+
+        {/* 3. КОЛИЧЕСТВО/СУММА/ОСТАТОК (flex-1) */}
+        <div className="flex-1 p-3 flex flex-col justify-center">
+          <div className="space-y-3">
+            {product.quantity !== undefined && (
+              <div className="flex items-center gap-2">
+                <div className={`w-2 h-2 rounded-full ${product.quantity > 0 ? 'bg-green-400' : 'bg-red-400'}`} />
+                <span className={`text-xs ${product.quantity > 0 ? 'text-green-400' : 'text-red-400'}`}>
+                  {product.quantity > 0 ? `${product.quantity} шт` : 'Нет в наличии'}
+                </span>
+              </div>
+            )}
+
+            <div className="flex items-center gap-2">
+              <Input
+                type="number"
+                min="0"
+                max={product.quantity}
+                value={product.selectedQuantity || ''}
+                onChange={(e) => {
+                  const inputValue = e.target.value
+                  const newQuantity = inputValue === '' ? 0 : Math.max(0, parseInt(inputValue) || 0)
+                  onQuantityChange(product.id, newQuantity)
+                }}
+                className="glass-input w-16 h-8 text-sm text-center text-white placeholder:text-white/50"
+                placeholder="0"
+              />
+              <span className="text-white/60 text-sm">шт</span>
+            </div>
+
+            <div className="text-green-400 font-semibold text-sm">
+              {(product.price * product.selectedQuantity).toLocaleString('ru-RU')} ₽
+            </div>
+          </div>
+        </div>
+
+        {/* 4-7. КОМПОНЕНТЫ РЕЦЕПТУРЫ */}
+        <RecipeComponents
+          productId={product.id}
+          selectedQuantity={product.selectedQuantity}
+          selectedServicesIds={selectedServicesIds}
+          selectedFFConsumablesIds={selectedFFConsumablesIds}
+          selectedSellerConsumablesIds={selectedSellerConsumablesIds}
+          fulfillmentServices={fulfillmentServices}
+          fulfillmentConsumables={fulfillmentConsumables}
+          sellerConsumables={sellerConsumables}
+        />
+      </div>
+    </div>
+  )
+}
+
+// Компонент компонентов рецептуры (услуги + расходники + WB карточка)
+interface RecipeComponentsProps {
+  productId: string
+  selectedQuantity: number
+  selectedServicesIds: string[]
+  selectedFFConsumablesIds: string[]
+  selectedSellerConsumablesIds: string[]
+  fulfillmentServices: FulfillmentService[]
+  fulfillmentConsumables: FulfillmentConsumable[]
+  sellerConsumables: SellerConsumable[]
+}
+
+function RecipeComponents({
+  selectedServicesIds,
+  selectedFFConsumablesIds,
+  selectedSellerConsumablesIds,
+  fulfillmentServices,
+  fulfillmentConsumables,
+  sellerConsumables,
+}: RecipeComponentsProps) {
+  return (
+    <>
+      {/* 4. УСЛУГИ ФФ (flex-1) */}
+      <div className="flex-1 p-3 flex flex-col">
+        <div className="text-center mb-2">
+          <h6 className="text-purple-400 text-xs font-medium uppercase tracking-wider">🛠️ Услуги ФФ</h6>
+        </div>
+        <div className="flex-1 overflow-y-auto space-y-1" style={{ maxHeight: '75px' }}>
+          {fulfillmentServices.length > 0 ? (
+            fulfillmentServices.map((service) => {
+              const isSelected = selectedServicesIds.includes(service.id)
+              return (
+                <label key={service.id} className="flex items-center text-xs cursor-pointer group">
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    className="w-3 h-3 rounded border-white/20 bg-white/10 text-purple-500 focus:ring-purple-500/50 mr-2"
+                    readOnly // Пока только для отображения
+                  />
+                  <div className="flex-1">
+                    <div className="text-white/80 group-hover:text-white transition-colors">{service.name}</div>
+                    <div className="text-xs opacity-80 text-purple-300">
+                      {service.price} ₽/{service.unit || 'шт'}
+                    </div>
+                  </div>
+                </label>
+              )
+            })
+          ) : (
+            <div className="text-white/60 text-xs p-2 text-center bg-white/5 rounded-md">Нет услуг</div>
+          )}
+        </div>
+      </div>
+
+      {/* 5. РАСХОДНИКИ ФФ (flex-1) */}
+      <div className="flex-1 p-3 flex flex-col">
+        <div className="text-center mb-2">
+          <h6 className="text-orange-400 text-xs font-medium uppercase tracking-wider">📦 Расходники ФФ</h6>
+        </div>
+        <div className="flex-1 overflow-y-auto space-y-1" style={{ maxHeight: '75px' }}>
+          {fulfillmentConsumables.length > 0 ? (
+            fulfillmentConsumables.map((consumable) => {
+              const isSelected = selectedFFConsumablesIds.includes(consumable.id)
+              return (
+                <label key={consumable.id} className="flex items-center text-xs cursor-pointer group">
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    className="w-3 h-3 rounded border-white/20 bg-white/10 text-orange-500 focus:ring-orange-500/50 mr-2"
+                    readOnly // Пока только для отображения
+                  />
+                  <div className="flex-1">
+                    <div className="text-white/80 group-hover:text-white transition-colors">{consumable.name}</div>
+                    <div className="text-xs opacity-80 text-orange-300">
+                      {consumable.price} ₽/{consumable.unit || 'шт'}
+                    </div>
+                  </div>
+                </label>
+              )
+            })
+          ) : (
+            <div className="text-white/60 text-xs p-2 text-center bg-white/5 rounded-md">Загрузка...</div>
+          )}
+        </div>
+      </div>
+
+      {/* 6. РАСХОДНИКИ СЕЛЛЕРА (flex-1) */}
+      <div className="flex-1 p-3 flex flex-col">
+        <div className="text-center mb-2">
+          <h6 className="text-blue-400 text-xs font-medium uppercase tracking-wider">🏪 Расходники сел.</h6>
+        </div>
+        <div className="flex-1 overflow-y-auto space-y-1" style={{ maxHeight: '75px' }}>
+          {sellerConsumables.length > 0 ? (
+            sellerConsumables.map((consumable) => {
+              const isSelected = selectedSellerConsumablesIds.includes(consumable.id)
+              return (
+                <label key={consumable.id} className="flex items-center text-xs cursor-pointer group">
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    className="w-3 h-3 rounded border-white/20 bg-white/10 text-blue-500 focus:ring-blue-500/50 mr-2"
+                    readOnly // Пока только для отображения
+                  />
+                  <div className="flex-1">
+                    <div className="text-white/80 group-hover:text-white transition-colors">{consumable.name}</div>
+                    <div className="text-xs opacity-80 mt-1">
+                      {consumable.pricePerUnit} ₽/{consumable.unit || 'шт'}
+                    </div>
+                  </div>
+                </label>
+              )
+            })
+          ) : (
+            <div className="text-white/60 text-xs p-2 text-center bg-white/5 rounded-md">Загрузка...</div>
+          )}
+        </div>
+      </div>
+
+      {/* 7. МП + ИТОГО (flex-1) */}
+      <div className="flex-1 p-3 flex flex-col justify-between">
+        <div className="text-center">
+          <div className="text-green-400 font-bold text-lg mb-3">{/* Здесь будет общая стоимость с рецептурой */}</div>
+          <Select defaultValue="none">
+            <SelectTrigger className="glass-input h-9 text-sm text-white">
+              <SelectValue placeholder="Не выбрано" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="none">Не выбрано</SelectItem>
+              <SelectItem value="card1">Карточка 1</SelectItem>
+              <SelectItem value="card2">Карточка 2</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </>
+  )
+}