sfera/visual-design-rules.md

ОБЩИЕ ПРАВИЛА ВИЗУАЛЬНОГО ДИЗАЙНА SFERA

📋 Базовые принципы дизайна системы управления складами и поставками

---

🎨 1. ЦВЕТОВАЯ СИСТЕМА

1.1 Основная палитра

PRIMARY COLORS (OKLCH):

• Primary: oklch(0.65 0.28 315) - основной фиолетовый
• Primary Foreground: oklch(0.985 0 0) - белый текст
• Secondary: oklch(0.94 0.08 315) - светло-фиолетовый
• Background: oklch(0.98 0.02 320) - светлый фон

GLASS SYSTEM:

• Base: bg-white/10 backdrop-blur border-white/20
• Cards: bg-white/5 backdrop-blur border-white/10
• Buttons: glass-button / glass-secondary

1.2 Функциональные цвета

STATUS COLORS:

• 🟢 Success: green-400/500 - завершенные операции
• 🔴 Error: red-400/500 - ошибки и критичные состояния
• 🟡 Warning: yellow-400/500 - предупреждения
• 🔵 Info: blue-400/500 - информационные сообщения
• 🟣 Processing: purple-400/500 - процессы в работе

CABINET COLORS:

• Селлер: blue-400 - синий
• Фулфилмент: purple-400 - фиолетовый
• Поставщик: green-400 - зеленый
• Логистика: orange-400 - оранжевый

1.3 Иерархическая цветовая схема

УРОВНИ ДЕТАЛИЗАЦИИ (для фулфилмента):

• 🔵 Уровень 1 (Магазины): уникальные цвета
  • ТехноМир: blue-400/500
  • Стиль и Комфорт: pink-400/500
  • Зелёный Дом: emerald-400/500
• 🟢 Уровень 2 (Товары): green-500
• 🟠 Уровень 3 (Варианты): orange-500

---

🔤 2. ТИПОГРАФИКА

2.1 Шрифты

FAMILY:

• Sans: var(--font-geist-sans) - основной шрифт
• Mono: var(--font-geist-mono) - код и техническая информация

2.2 Размеры и веса

HEADINGS:

• H1: text-3xl font-bold text-white - заголовки страниц
• H2: text-2xl font-semibold text-white - секции
• H3: text-xl font-semibold text-white - подразделы
• H4: text-lg font-medium text-white - карточки

BODY TEXT:

• Primary: text-white - основной текст
• Secondary: text-white/70 - вспомогательный
• Muted: text-white/60 - дополнительный
• Disabled: text-white/40 - отключенные элементы

CODE & TECHNICAL:

• Code: font-mono text-xs text-white/60 - техническая информация
• Badges: text-xs font-medium - статусы и метки

---

🧩 3. КОМПОНЕНТЫ

3.1 Кнопки

ВАРИАНТЫ:

default: bg-primary hover:bg-primary/90
glass: glass-button (основной стиль)
glass-secondary: glass-secondary hover:text-white/90
outline: border hover:bg-accent
ghost: hover:bg-accent/50
destructive: bg-destructive hover:bg-destructive/90

РАЗМЕРЫ:

• sm: h-8 px-3 - компактные формы
• default: h-9 px-4 - стандартные
• lg: h-10 px-6 - акцентные действия
• icon: size-9 - иконочные кнопки

ГРАДИЕНТЫ:

• Accent: bg-gradient-to-r from-purple-600 to-pink-600
• Success: bg-gradient-to-r from-green-500 to-emerald-500
• Info: bg-gradient-to-r from-blue-500 to-cyan-500

3.2 Карточки

БАЗОВЫЕ СТИЛИ:

glass-card: bg-white/5 backdrop-blur border-white/10
hover: border-white/20 transition-all
interactive: cursor-pointer group

ИНТЕРАКТИВНОСТЬ:

• Hover: hover:border-white/20 hover:bg-white/10
• Scale: hover:scale-105 transition-transform
• Shadow: hover:shadow-xl hover:shadow-purple-500/20

3.3 Формы

ИНПУТЫ:

glass-input: backdrop-blur border-white/20
placeholder: placeholder:text-white/50
focus: focus-visible:ring-ring/50
invalid: aria-invalid:border-destructive

СОСТОЯНИЯ:

• Default: glass-input text-white
• Error: border-red-500/50 ring-red-500/20
• Success: border-green-500/50 ring-green-500/20
• Disabled: opacity-50 pointer-events-none

---

✨ 4. АНИМАЦИИ И ПЕРЕХОДЫ

4.1 Стандартные переходы

DURATION:

• Fast: duration-200 - hover эффекты
• Normal: duration-300 - стандартные переходы
• Slow: duration-500 - сложные анимации

EASING:

• Default: transition-all - универсальный
• Transform: transition-transform - масштабирование
• Colors: transition-colors - смена цветов

4.2 Hover эффекты

МАСШТАБИРОВАНИЕ:

hover:scale-105 - легкое увеличение
hover:scale-110 - заметное увеличение
hover:scale-95 - уменьшение при нажатии
hover:-translate-y-1 - поднятие

ЦВЕТОВЫЕ ИЗМЕНЕНИЯ:

hover:bg-white/10 - осветление фона
hover:text-white - усиление текста
hover:border-white/40 - усиление границ

4.3 Системные анимации

LOADING:

• Spin: animate-spin - индикаторы загрузки
• Pulse: animate-pulse - уведомления
• Bounce: animate-bounce - привлечение внимания
• Ping: animate-ping - статусы онлайн

---

📐 5. СЕТКИ И ОТСТУПЫ

5.1 Spacing система

ВНУТРЕННИЕ ОТСТУПЫ:

• xs: p-2 (8px) - плотные элементы
• sm: p-3 (12px) - компактные карточки
• md: p-4 (16px) - стандартные карточки
• lg: p-6 (24px) - основные секции
• xl: p-8 (32px) - страницы

ВНЕШНИЕ ОТСТУПЫ:

• Между элементами: space-y-4 / gap-4
• Между секциями: space-y-6 / gap-6
• Между страницами: space-y-8

5.2 Responsive сетки

BREAKPOINTS:

sm: 640px - мобильные
md: 768px - планшеты
lg: 1024px - десктопы
xl: 1280px - широкие экраны

GRID PATTERNS:

grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4
grid-cols-2 md:grid-cols-4 lg:grid-cols-6
flex flex-wrap gap-4

---

🔄 6. УНИФИКАЦИЯ ИНТЕРФЕЙСОВ

6.1 Раздел "Партнеры" - специальные правила

📋 Детальные правила: См. partners-rules.md

КРИТИЧЕСКИ ВАЖНО: Все вкладки раздела "Партнеры" должны иметь единую структуру:

Обязательные принципы:

• Блоки статистики: grid grid-cols-4 gap-3 с отдельными glass-card
• ЗАПРЕЩЕНО: Дополнительные обертки glass-card в TabsContent
• Цвета ссылок: желтая схема (bg-yellow-500/20)
• Табличный формат: вместо карточного grid-layout

Структура блоков статистики:

{
  /* ПРАВИЛЬНО */
}
;<div className="grid grid-cols-4 gap-3">
  <Card className="glass-card p-3">...</Card>
</div>

{
  /* ЗАПРЕЩЕНО */
}
;<Card className="glass-card">
  <div className="grid...">...</div>
</Card>

---

🎯 7. СОСТОЯНИЯ И СТАТУСЫ

6.1 Визуальные индикаторы

SUCCESS STATES:

bg-green-500/10 border-green-500/30 text-green-300
CheckCircle - иконка успеха

ERROR STATES:

bg-red-500/10 border-red-500/30 text-red-300
XCircle - иконка ошибки

WARNING STATES:

bg-yellow-500/10 border-yellow-500/30 text-yellow-300
AlertTriangle - иконка предупреждения

INFO STATES:

bg-blue-500/10 border-blue-500/30 text-blue-300
Info - иконка информации

6.2 Бейджи и метки

СТАТУСЫ WORKFLOW:

• Pending: bg-yellow-500/20 text-yellow-300
• Approved: bg-green-500/20 text-green-300
• In Progress: bg-blue-500/20 text-blue-300
• Completed: bg-emerald-500/20 text-emerald-300
• Cancelled: bg-red-500/20 text-red-300

---

📱 7. АДАПТИВНОСТЬ

7.1 Mobile-first подход

ПРИНЦИПЫ:

• Базовые стили для мобильных
• Прогрессивное улучшение для больших экранов
• Минимальная ширина 320px
• Максимальная производительность

7.2 Responsive компоненты

SIDEBAR:

Мобильные: overlay sidebar
Планшеты: collapsible sidebar
Десктоп: full sidebar

CARDS:

Мобильные: 1 колонка
Планшеты: 2 колонки
Десктоп: 3-4 колонки

FORMS:

Мобильные: stack layout
Планшеты: 2-column layout
Десктоп: optimized layout

---

♿ 8. ДОСТУПНОСТЬ

8.1 Контрастность

МИНИМАЛЬНЫЕ ТРЕБОВАНИЯ:

• Текст на фоне: 4.5:1
• Иконки и элементы: 3:1
• Интерактивные элементы: 4.5:1

ПРОВЕРКА КОНТРАСТА:

text-white на bg-white/10 ✅
text-white/70 на bg-white/5 ✅
text-white/40 на bg-white/10 ⚠️

8.2 Фокус и навигация

FOCUS STYLES:

focus-visible:ring-ring/50 focus-visible:ring-[3px]
focus-visible:border-ring
outline-none

KEYBOARD NAVIGATION:

• Tab order логичен
• Все интерактивные элементы доступны
• Escape закрывает модалы
• Enter активирует кнопки

---

🔧 9. ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ

9.1 CSS Architecture

UTILITY-FIRST:

• Tailwind CSS как основа
• Custom CSS только для уникальных компонентов
• CSS переменные для тем

NAMING CONVENTIONS:

glass-card - основные карточки
glass-button - стеклянные кнопки
glass-input - поля ввода
glass-secondary - вторичные элементы

9.2 Performance

ОПТИМИЗАЦИЯ:

• Minimal CSS bundle
• Tree-shaking неиспользуемых стилей
• Critical CSS inline
• Progressive enhancement

LAZY LOADING:

• Изображения: loading="lazy"
• Компоненты: React.lazy()
• Анимации: только при необходимости

---

🎯 10. ПРАВИЛА ИЕРАРХИИ ТАБОВ

10.1 Принцип отдельного блока табов

ОБЯЗАТЕЛЬНЫЕ ПРАВИЛА:

1. ТАБЫ ВСЕГДА НАХОДЯТСЯ В ОТДЕЛЬНОМ БЛОКЕ, независимо от количества уровней иерархии
2. БЛОК ТАБОВ ИМЕЕТ СТИЛИ КАК У САЙДБАРА
3. ТАБЫ ОТДЕЛЕНЫ ОТ РАБОЧЕГО ПРОСТРАНСТВА

СТИЛИ БЛОКА ТАБОВ:

bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-6

СТИЛИ РАБОЧЕГО ПРОСТРАНСТВА:

bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl

ЗАПРЕЩЕНО:

• Размещать табы в блоке с другими модулями
• Смешивать табы с основным контентом
• Использовать glass-card вместо правильных стилей сайдбара
• Объединять блок табов с рабочим пространством

10.2 Визуальная иерархия

УРОВЕНЬ 1 (Главные табы):

h-11                    /* Высота 44px */
bg-white/15             /* Контрастный фон */
border-white/30         /* Яркая граница */
rounded-xl              /* Крупное скругление */
font-semibold           /* Жирный шрифт */
purple-500/40           /* Интенсивный градиент */
shadow-lg               /* Глубокая тень */

УРОВЕНЬ 2 (Подтабы):

h-9                     /* Высота 36px */
bg-white/8              /* Средний фон */
border-white/20         /* Средняя граница */
rounded-lg              /* Среднее скругление */
font-medium             /* Средний шрифт */
white/15                /* Простая активация */
ml-4                    /* Отступ показывает иерархию */

УРОВЕНЬ 3 (Подподтабы):

h-8                     /* Высота 32px */
bg-white/5              /* Слабый фон */
border-white/15         /* Деликатная граница */
rounded-md              /* Мелкое скругление */
font-normal             /* Обычный шрифт */
white/10                /* Слабая активация */
ml-8                    /* Больший отступ */
text-white/50           /* Приглушенный текст */

10.3 Отступы и spacing

ИЕРАРХИЧЕСКИЕ ОТСТУПЫ:

• Уровень 1: ml-0 - прижат к краю
• Уровень 2: ml-4 - показывает подчинение
• Уровень 3: ml-8 - максимальная вложенность

ВЕРТИКАЛЬНЫЕ ОТСТУПЫ:

• Между уровнями: space-y-3
• После TabsList: mb-3
• В контенте: space-y-0 (без лишних отступов)

10.4 Размеры элементов

ПРОГРЕССИВНОЕ УМЕНЬШЕНИЕ:

• Высота табов: 44px → 36px → 32px
• Размер иконок: 16px → 12px → 10px
• Размер текста: sm → xs → xs
• Толщина шрифта: semibold → medium → normal

10.5 Цветовая деградация

КОНТРАСТНОСТЬ:

• Уровень 1: Максимальная (white/15, border-white/30)
• Уровень 2: Средняя (white/8, border-white/20)
• Уровень 3: Минимальная (white/5, border-white/15)

АКТИВАЦИЯ:

• Уровень 1: Градиент + тень + border
• Уровень 2: Простой фон white/15
• Уровень 3: Слабый фон white/10

---

📐 11. ПРАВИЛО ВЫРАВНИВАНИЯ БЛОКОВ С САЙДБАРОМ

11.1 Принцип выравнивания

🎯 ОСНОВНОЙ ПРИНЦИП:

Все блоки контента справа от сайдбара должны быть выровнены точно по верхнему и нижнему краю сайдбара без отступов.

📐 ВИЗУАЛЬНАЯ СХЕМА:

┌─────────────────────────────────────┐
│ SIDEBAR    │ ← блоки начинаются     │ ← ТОП САЙДБАРА
│            │   точно здесь          │
│            │                        │
│            │ [КОНТЕНТ БЛОКИ]        │
│            │                        │
│            │ ← блоки заканчиваются  │ ← НИЗ САЙДБАРА
│            │   точно здесь          │
└─────────────────────────────────────┘

11.2 Техническая реализация

✅ ПРАВИЛЬНО:

<div className="h-screen flex overflow-hidden">
  <Sidebar />
  <main className={`flex-1 ${getSidebarMargin()} overflow-hidden transition-all duration-300`}>
    <div className="h-full flex flex-col">
      {/* Блоки занимают всю доступную область */}
      <div className="flex-1 flex gap-2 min-h-0">{/* Блоки без внешних отступов */}</div>
    </div>
  </main>
</div>

❌ НЕПРАВИЛЬНО:

// НЕ ИСПОЛЬЗОВАТЬ px-2 py-2 в main контейнере!
<main className={`flex-1 ${getSidebarMargin()} px-2 py-2 overflow-hidden`}>

11.3 Требования к структуре

MAIN КОНТЕЙНЕР:

• ✅ БЕЗ px-2 py-2 отступов
• ✅ Только overflow-hidden и transition-all duration-300
• ✅ Использовать ${getSidebarMargin()} для отступа от сайдбара

БЛОКИ КОНТЕНТА:

• ✅ Занимают всю высоту: h-full flex flex-col
• ✅ Минимальные gap между блоками: gap-2
• ✅ Начинаются от самого верха экрана
• ✅ Заканчиваются у самого низа экрана

SPACING МЕЖДУ БЛОКАМИ:

• ✅ Горизонтальный gap: gap-2 (8px)
• ✅ Вертикальный gap: gap-2 (8px)
• ❌ НЕ использовать внешние отступы px-* py-*

11.4 Области применения

✅ ПРИМЕНЯЕТСЯ К:

• Все страницы с сайдбаром
• Дашборды и кабинеты пользователей
• Модальные окна полной высоты
• Списки, таблицы и каталоги
• Формы создания и редактирования

❌ ИСКЛЮЧЕНИЯ:

• Модальные окна (центрированные)
• Всплывающие уведомления (toast)
• Dropdown меню
• Контекстные меню

11.5 Проверка соответствия

КРИТЕРИИ СООТВЕТСТВИЯ:

1. Верхний край: Первый блок начинается на уровне верха сайдбара
2. Нижний край: Последний блок заканчивается на уровне низа сайдбара
3. Без отступов: Отсутствуют px-* py-* отступы в main
4. Только gap: Используется только gap-2 между блоками

ИНСТРУМЕНТЫ ПРОВЕРКИ:

• Инспектор браузера для проверки CSS
• Визуальное сравнение с краями сайдбара
• Проверка на разных размерах экрана

---

📋 12. ЧЕКЛИСТ ПРИМЕНЕНИЯ

12.1 Перед внедрением компонента

• Соответствует цветовой палитре системы
• Использует правильную типографику
• Имеет корректные состояния (hover, focus, disabled)
• Адаптивен для всех breakpoints
• Соответствует требованиям доступности
• Использует стандартные анимации
• Оптимизирован для производительности
• Блоки выровнены с сайдбаром (правило 11)

12.2 При создании новых компонентов

• Базируется на существующих паттернах
• Совместим с UI Kit системы
• Документирован в Storybook/UI Kit демо
• Протестирован на различных устройствах
• Соответствует принципам дизайн-системы
• Применяет правило выравнивания с сайдбаром

---

🎨 13. ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ

13.1 Базовая карточка

<Card className="glass-card border-white/10 hover:border-white/20 transition-all">
  <CardHeader>
    <CardTitle className="text-white">Заголовок</CardTitle>
    <CardDescription className="text-white/70">Описание</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-white/80">Содержимое карточки</p>
  </CardContent>
</Card>

13.2 Интерактивная кнопка

<Button variant="glass" className="hover:scale-105 transition-transform" onClick={handleClick}>
  <Icon className="h-4 w-4 mr-2" />
  Действие
</Button>

13.3 Форма с валидацией

<div className="space-y-2">
  <Label className="text-white/90">Поле ввода</Label>
  <Input className="glass-input text-white placeholder:text-white/50" placeholder="Введите значение..." />
  {error && <p className="text-red-300 text-xs">{error}</p>}
</div>

13.4 Правильное выравнивание с сайдбаром

// ✅ ПРАВИЛЬНАЯ структура страницы с сайдбаром
function PageWithSidebar() {
  const { getSidebarMargin } = useSidebar()

  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 flex-col">
          {/* Структура из 3 блоков согласно rules1.md */}
          <div className="flex-1 flex gap-2 min-h-0">
            {/* Левые блоки */}
            <div className="flex-1 flex flex-col gap-2 min-h-0">
              <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl">
                {/* Блок 1: Основной контент */}
              </div>
              <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl flex-1">
                {/* Блок 2: Дополнительный контент */}
              </div>
            </div>
            {/* Правый блок */}
            <div className="w-96 flex-shrink-0">
              <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl h-full">
                {/* Блок 3: Боковая панель */}
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}

---

14. 🏢 КАБИНЕТ-СПЕЦИФИЧНЫЕ КОМПОНЕНТЫ

📌 СВЯЗАНО С: rules-complete.md - Структура кабинетов

14.1 Кабинет фулфилмента

14.1.1 Визуальная система 6 модулей склада

ЦВЕТОВОЕ КОДИРОВАНИЕ (обязательная последовательность):

/* 1. ПРОДУКТЫ - готовые к отправке */
.module-products {
  @apply bg-green-500/20 border-green-400 text-green-100;
  --icon-color: #10b981; /* emerald-500 */
}

/* 2. ТОВАРЫ - базовые товары */
.module-goods {
  @apply bg-blue-500/20 border-blue-400 text-blue-100;
  --icon-color: #3b82f6; /* blue-500 */
}

/* 3. БРАК - дефектные товары */
.module-defect {
  @apply bg-red-500/20 border-red-400 text-red-100;
  --icon-color: #ef4444; /* red-500 */
}

/* 4. ВОЗВРАТЫ С ПВЗ - возвращенные товары */
.module-returns {
  @apply bg-yellow-500/20 border-yellow-400 text-yellow-100;
  --icon-color: #eab308; /* yellow-500 */
}

/* 5. РАСХОДНИКИ СЕЛЛЕРОВ - материалы клиентов */
.module-seller-supplies {
  @apply bg-purple-500/20 border-purple-400 text-purple-100;
  --icon-color: #a855f7; /* purple-500 */
}

/* 6. РАСХОДНИКИ ФУЛФИЛМЕНТА - операционные материалы (КЛИКАБЕЛЬНЫЙ) */
.module-ff-supplies {
  @apply bg-orange-500/20 border-orange-400 text-orange-100 cursor-pointer hover:bg-orange-400/30;
  --icon-color: #f97316; /* orange-500 */
  transition: all 0.2s ease-in-out;
}

14.1.2 3-уровневая иерархия склада

ВИЗУАЛЬНАЯ СТРУКТУРА:

// УРОВЕНЬ 1: МАГАЗИНЫ (синий - крупные блоки)
<div className="border-l-4 border-blue-500 bg-blue-500/10 pl-4 mb-3">
  <div className="flex items-center gap-3">
    <div className="w-4 h-4 rounded-full bg-blue-500"></div>
    <span className="text-blue-100 font-semibold text-lg">ТехноМир</span>
  </div>

  {/* УРОВЕНЬ 2: ТОВАРЫ (зеленый - средние блоки) */}
  <div className="border-l-4 border-green-500 bg-green-500/10 pl-6 ml-2 mt-2 mb-2">
    <div className="flex items-center gap-2">
      <div className="w-3 h-3 rounded-full bg-green-500"></div>
      <span className="text-green-100 font-medium">Смартфон iPhone 15</span>
    </div>

    {/* УРОВЕНЬ 3: ВАРИАНТЫ (оранжевый - мелкие блоки) */}
    <div className="border-l-2 border-orange-500 bg-orange-500/10 pl-4 ml-1 mt-1">
      <div className="flex items-center gap-2">
        <div className="w-2 h-2 rounded-full bg-orange-500"></div>
        <span className="text-orange-100 text-sm">128GB Space Black</span>
      </div>
    </div>
  </div>
</div>

14.2 Статусы поставок - расширенная цветовая система

8 СТАТУСОВ WORKFLOW (согласно rules-complete.md):

/* 1. PENDING - ожидает подтверждения */
.status-pending {
  @apply bg-gray-500/20 border-gray-400 text-gray-100;
  --dot-color: #6b7280;
}

/* 2. SUPPLIER_APPROVED - подтверждено поставщиком */
.status-supplier-approved {
  @apply bg-blue-500/20 border-blue-400 text-blue-100;
  --dot-color: #3b82f6;
}

/* 3. CONFIRMED - подтверждено системой */
.status-confirmed {
  @apply bg-cyan-500/20 border-cyan-400 text-cyan-100;
  --dot-color: #06b6d4;
}

/* 4. LOGISTICS_CONFIRMED - подтверждено логистикой */
.status-logistics-confirmed {
  @apply bg-indigo-500/20 border-indigo-400 text-indigo-100;
  --dot-color: #6366f1;
}

/* 5. SHIPPED - отправлено */
.status-shipped {
  @apply bg-purple-500/20 border-purple-400 text-purple-100;
  --dot-color: #a855f7;
}

/* 6. IN_TRANSIT - в пути */
.status-in-transit {
  @apply bg-yellow-500/20 border-yellow-400 text-yellow-100;
  --dot-color: #eab308;
}

/* 7. DELIVERED - доставлено */
.status-delivered {
  @apply bg-green-500/20 border-green-400 text-green-100;
  --dot-color: #22c55e;
}

/* 8. COMPLETED - завершено (только для фулфилмента) */
.status-completed {
  @apply bg-emerald-600/20 border-emerald-500 text-emerald-100;
  --dot-color: #059669;
}

14.3 Процесс создания продукта - визуальный workflow

ПОШАГОВЫЙ ИНДИКАТОР (5 шагов согласно rules-complete.md):

const productCreationSteps = [
  { id: 'recipe', label: 'Рецептура задана', status: 'completed' },
  { id: 'arrival', label: 'Поступление на склад', status: 'completed' },
  { id: 'planning', label: 'Планирование работы', status: 'active' },
  { id: 'processing', label: 'Обработка товара', status: 'pending' },
  { id: 'quality', label: 'Контроль качества', status: 'pending' },
  { id: 'completion', label: 'Завершение', status: 'pending' },
]

// Визуальный компонент
;<div className="flex items-center justify-between mb-6">
  {productCreationSteps.map((step, index) => (
    <div key={step.id} className="flex items-center">
      <div
        className={`
        flex items-center justify-center w-10 h-10 rounded-full border-2 text-sm font-semibold
        ${step.status === 'completed' ? 'bg-green-500 border-green-500 text-white' : ''}
        ${step.status === 'active' ? 'bg-blue-500 border-blue-500 text-white animate-pulse' : ''}
        ${step.status === 'pending' ? 'bg-white/10 border-white/30 text-white/50' : ''}
      `}
      >
        {step.status === 'completed' ? '✓' : index + 1}
      </div>
      <span className="ml-2 text-sm text-white/70">{step.label}</span>
      {index < productCreationSteps.length - 1 && <div className="w-12 h-0.5 bg-white/20 mx-4"></div>}
    </div>
  ))}
</div>

14.4 Система партнерства - визуальные индикаторы

ТИПЫ ПАРТНЕРОВ:

/* WHOLESALE - поставщики */
.partner-wholesale {
  @apply bg-emerald-500/20 border-emerald-400;
  --icon: '🏭'; /* factory */
}

/* SELLER - селлеры */
.partner-seller {
  @apply bg-blue-500/20 border-blue-400;
  --icon: '🛍️'; /* shopping */
}

/* FULFILLMENT - фулфилмент центры */
.partner-fulfillment {
  @apply bg-purple-500/20 border-purple-400;
  --icon: '📦'; /* package */
}

/* LOGIST - логистические компании */
.partner-logist {
  @apply bg-orange-500/20 border-orange-400;
  --icon: '🚚'; /* truck */
}

14.5 Кабинет селлера

📌 СВЯЗАНО С: rules-complete.md - Кабинет селлера

14.5.1 Трёхблочная архитектура страницы "Мои поставки"

КРИТИЧЕСКИ ВАЖНО: Правильное выравнивание с сайдбаром

// ✅ ПРАВИЛЬНАЯ архитектура (согласно rules-complete.md)
export function SuppliesPage() {
  const { getSidebarMargin } = useSidebar();

  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 flex-col">
          {/* БЛОК 1: ТАБЫ - фиксированная высота, glass-эффект */}
          <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-6 mb-2">
            <TabNavigation />
          </div>

          {/* БЛОК 2: СТАТИСТИКА - контекстные метрики */}
          <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4 mb-2">
            <SupplyStatistics />
          </div>

          {/* БЛОК 3: ОСНОВНОЙ КОНТЕНТ - до низа sidebar */}
          <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl flex-1 overflow-hidden">
            <SupplyContent />
          </div>
        </div>
      </main>
    </div>
  );
}

// ❌ НЕПРАВИЛЬНО (текущее состояние)
<div className="px-2 py-2"> {/* Нарушает архитектуру! */}

14.5.2 Контекстная статистика по табам

Для пути "Фулфилмент → Товар → Карточки/Поставщики":

const suppliesStats = [
  { label: 'Всего поставок', value: '24', color: 'text-blue-400' },
  { label: 'Активных поставок', value: '8', color: 'text-green-400' },
  { label: 'Сумма активных поставок', value: '₽142,350', color: 'text-yellow-400' },
  { label: 'В пути', value: '3', color: 'text-purple-400' },
]

Для пути "Фулфилмент → Расходники селлера":

const consumablesStats = [
  { label: 'Всего поставок', value: '12', color: 'text-blue-400' },
  { label: 'Активных поставок', value: '4', color: 'text-green-400' },
  { label: 'Видов расходников', value: '18', color: 'text-orange-400' },
  { label: 'Критические остатки', value: '2', color: 'text-red-400' },
]

Для путей "Маркетплейсы → Wildberries/Ozon":

const marketplaceStats = [
  { label: 'Поставок на маркетплейс', value: '15', color: 'text-blue-400' },
  { label: 'Товаров отправлено', value: '347', color: 'text-green-400' },
  { label: 'Возвраты за неделю', value: '12', color: 'text-yellow-400' },
  { label: 'Эффективность поставок', value: '94%', color: 'text-emerald-400' },
]

14.5.3 Система создания поставок

Выбор типа поставки:

const supplyTypes = [
  {
    id: 'goods-cards',
    title: 'Карточки товаров',
    description: 'Импорт через WB API с автосозданием поставки',
    icon: '📱',
    color: 'bg-blue-500/20 border-blue-400',
  },
  {
    id: 'goods-suppliers',
    title: 'Поставщики товаров',
    description: 'Прямой заказ с указанием рецептуры',
    icon: '🏭',
    color: 'bg-emerald-500/20 border-emerald-400',
  },
  {
    id: 'consumables',
    title: 'Расходники селлера',
    description: 'Материалы для производства',
    icon: '🔧',
    color: 'bg-purple-500/20 border-purple-400',
    // ВАЖНО: На странице /supplies/create-consumables НЕ отображается заголовок и описание
    pageHeader: false,
  },
]

14.5.4 Интерфейс рецептуры продукта

3-блочная структура создания рецептуры:

// БЛОК 1: БАЗОВЫЙ ТОВАР (слева)
<div className="w-1/3 bg-white/5 border border-white/10 rounded-xl p-4">
  <h3 className="text-white font-semibold mb-3">1. Базовый товар</h3>
  <ProductSelector
    placeholder="Выберите товар от поставщика"
    filterType="PRODUCT"
  />
</div>

// БЛОК 2: УСЛУГИ ФУЛФИЛМЕНТА (центр)
<div className="w-1/3 bg-white/5 border border-white/10 rounded-xl p-4">
  <h3 className="text-white font-semibold mb-3">2. Услуги ФФ</h3>
  <ServicesSelector
    placeholder="Упаковка, маркировка..."
    multiSelect={true}
  />
</div>

// БЛОК 3: РАСХОДНИКИ (справа)
<div className="w-1/3 bg-white/5 border border-white/10 rounded-xl p-4">
  <h3 className="text-white font-semibold mb-3">3. Расходники</h3>
  <ConsumablesSelector
    placeholder="Материалы для производства"
    filterType="CONSUMABLE"
  />
</div>

14.5.5 WB интеграция - визуальные индикаторы

Статусы синхронизации с WB API:

/* Успешная синхронизация */
.wb-sync-success {
  @apply bg-green-500/20 border-green-400 text-green-100;
  --status-icon: '✅';
}

/* Ошибка синхронизации */
.wb-sync-error {
  @apply bg-red-500/20 border-red-400 text-red-100;
  --status-icon: '❌';
}

/* В процессе синхронизации */
.wb-sync-loading {
  @apply bg-yellow-500/20 border-yellow-400 text-yellow-100;
  --status-icon: '⏳';
  animation: pulse 2s infinite;
}

/* Не настроена */
.wb-sync-none {
  @apply bg-gray-500/20 border-gray-400 text-gray-100;
  --status-icon: '⚠️';
}

---

📊 СТАТУС: Действующие правила v1.2 (добавлен кабинет селлера)
🔄 ОБНОВЛЕНО: Интеграция с rules-complete.md v6.2
📅 ДАТА: 2025, полная синхронизация с техническими требованиями

🆕 ДОБАВЛЕНИЯ v1.2:

• ✅ Детальные правила для кабинета селлера (раздел 14.5)
• ✅ Трёхблочная архитектура страницы "Мои поставки"
• ✅ Контекстная статистика по типам поставок
• ✅ Визуальные компоненты создания рецептуры
• ✅ WB интеграция и статусы синхронизации
• ✅ Исправление архитектурного нарушения px-2 py-2