Sfera/sfera
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f6a40414ab8bd3e587346e4622b215d74d868aab
sfera/visual-design-rules.md

35 KiB
Raw Blame History

ОБЩИЕ ПРАВИЛА ВИЗУАЛЬНОГО ДИЗАЙНА 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 Визуальные индикаторы

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'
  }
];

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