Sfera/sfera-new
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: завершение модуляризации системы и финальная организация проекта

Browse Source 
## Структурные изменения:

### 📁 Организация архивных файлов:
- Перенос всех устаревших правил в legacy-rules/
- Создание структуры docs-and-reports/ для отчетов
- Архивация backup файлов в legacy-rules/backups/

### 🔧 Критические компоненты:
- src/components/supplies/multilevel-supplies-table.tsx - многоуровневая таблица поставок
- src/components/supplies/components/recipe-display.tsx - отображение рецептур
- src/components/fulfillment-supplies/fulfillment-goods-orders-tab.tsx - вкладка товарных заказов

### 🎯 GraphQL обновления:
- Обновление mutations.ts, queries.ts, resolvers.ts, typedefs.ts
- Синхронизация с Prisma schema.prisma
- Backup файлы для истории изменений

### 🛠️ Утилитарные скрипты:
- 12 новых скриптов в scripts/ для анализа данных
- Скрипты проверки фулфилмент-пользователей
- Утилиты очистки и фиксации данных поставок

### 📊 Тестирование:
- test-fulfillment-filtering.js - тестирование фильтрации фулфилмента
- test-full-workflow.js - полный workflow тестирование

### 📝 Документация:
- logistics-statistics-warehouse-rules.md - объединенные правила модулей
- Обновление журналов модуляризации и разработки

### ✅ Исправления ESLint:
- Исправлены критические ошибки в sidebar.tsx
- Исправлены ошибки типизации в multilevel-supplies-table.tsx
- Исправлены неиспользуемые переменные в goods-supplies-table.tsx
- Заменены типы any на строгую типизацию
- Исправлены console.log на console.warn

## Результат:
- Завершена полная модуляризация системы
- Организована архитектура legacy файлов
- Добавлены критически важные компоненты таблиц
- Создана полная инфраструктура тестирования
- Исправлены все критические ESLint ошибки
- Сохранены 103 незакоммиченных изменения

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Veronika Smirnova
2025-08-22 10:31:43 +03:00
parent 621770e765
commit 89257c75b5
86 changed files with 25406 additions and 942 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1115
legacy-rules/visual-design-rules.md Normal file
View File

@ -0,0 +1,1115 @@
# ОБЩИЕ ПРАВИЛА ВИЗУАЛЬНОГО ДИЗАЙНА 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 Кнопки
**ВАРИАНТЫ**:
```css
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 Карточки
**БАЗОВЫЕ СТИЛИ**:
```css
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 Формы
**ИНПУТЫ**:
```css
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 эффекты
**МАСШТАБИРОВАНИЕ**:
```css
hover:scale-105 - легкое увеличение
hover:scale-110 - заметное увеличение
hover:scale-95 - уменьшение при нажатии
hover:-translate-y-1 - поднятие
```
**ЦВЕТОВЫЕ ИЗМЕНЕНИЯ**:
```css
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**:
```css
sm: 640px - мобильные
md: 768px - планшеты
lg: 1024px - десктопы
xl: 1280px - широкие экраны
```
**GRID PATTERNS**:
```css
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](./partners-rules.md#🎨-uiux-правила-раздела-партнеры)
**КРИТИЧЕСКИ ВАЖНО**: Все вкладки раздела "Партнеры" должны иметь единую структуру:
#### Обязательные принципы:
- **Блоки статистики**: `grid grid-cols-4 gap-3` с отдельными `glass-card`
- **ЗАПРЕЩЕНО**: Дополнительные обертки `glass-card` в TabsContent
- **Цвета ссылок**: желтая схема (`bg-yellow-500/20`)
- **Табличный формат**: вместо карточного grid-layout
#### Структура блоков статистики:
```tsx
{
/* ПРАВИЛЬНО */
}
;<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**:
```css
bg-green-500/10 border-green-500/30 text-green-300
CheckCircle - иконка успеха
```
**ERROR STATES**:
```css
bg-red-500/10 border-red-500/30 text-red-300
XCircle - иконка ошибки
```
**WARNING STATES**:
```css
bg-yellow-500/10 border-yellow-500/30 text-yellow-300
AlertTriangle - иконка предупреждения
```
**INFO STATES**:
```css
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**:
```css
Мобильные: overlay sidebar
Планшеты: collapsible sidebar
Десктоп: full sidebar
```
**CARDS**:
```css
Мобильные: 1 колонка
Планшеты: 2 колонки
Десктоп: 3-4 колонки
```
**FORMS**:
```css
Мобильные: stack layout
Планшеты: 2-column layout
Десктоп: optimized layout
```
---
## ♿ **8. ДОСТУПНОСТЬ**
### 8.1 Контрастность
**МИНИМАЛЬНЫЕ ТРЕБОВАНИЯ**:
- Текст на фоне: 4.5:1
- Иконки и элементы: 3:1
- Интерактивные элементы: 4.5:1
**ПРОВЕРКА КОНТРАСТА**:
```css
text-white на bg-white/10 ✅
text-white/70 на bg-white/5 ✅
text-white/40 на bg-white/10 ⚠️
```
### 8.2 Фокус и навигация
**FOCUS STYLES**:
```css
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**:
```css
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. ТАБЫ ОТДЕЛЕНЫ ОТ РАБОЧЕГО ПРОСТРАНСТВА
**СТИЛИ БЛОКА ТАБОВ**:
```css
bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-6
```
**СТИЛИ РАБОЧЕГО ПРОСТРАНСТВА**:
```css
bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl
```
**ЗАПРЕЩЕНО**:
- Размещать табы в блоке с другими модулями
- Смешивать табы с основным контентом
- Использовать glass-card вместо правильных стилей сайдбара
- Объединять блок табов с рабочим пространством
### 10.2 Визуальная иерархия
**УРОВЕНЬ 1 (Главные табы)**:
```css
h-11 /* Высота 44px */
bg-white/15 /* Контрастный фон */
border-white/30 /* Яркая граница */
rounded-xl /* Крупное скругление */
font-semibold /* Жирный шрифт */
purple-500/40 /* Интенсивный градиент */
shadow-lg /* Глубокая тень */
```
**УРОВЕНЬ 2 (Подтабы)**:
```css
h-9 /* Высота 36px */
bg-white/8 /* Средний фон */
border-white/20 /* Средняя граница */
rounded-lg /* Среднее скругление */
font-medium /* Средний шрифт */
white/15 /* Простая активация */
ml-4 /* Отступ показывает иерархию */
```
**УРОВЕНЬ 3 (Подподтабы)**:
```css
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 Техническая реализация
**✅ ПРАВИЛЬНО:**
```jsx
<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>
```
**❌ НЕПРАВИЛЬНО:**
```jsx
// НЕ ИСПОЛЬЗОВАТЬ 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 Базовая карточка
```tsx
<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 Интерактивная кнопка
```tsx
<Button variant="glass" className="hover:scale-105 transition-transform" onClick={handleClick}>
<Icon className="h-4 w-4 mr-2" />
Действие
</Button>
```
### 13.3 Форма с валидацией
```tsx
<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 Правильное выравнивание с сайдбаром
```tsx
// ✅ ПРАВИЛЬНАЯ структура страницы с сайдбаром
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 - Структура кабинетов](#3--структура-кабинетов)
### 14.1 Кабинет фулфилмента
#### 14.1.1 Визуальная система 6 модулей склада
**ЦВЕТОВОЕ КОДИРОВАНИЕ** (обязательная последовательность):
```css
/* 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-уровневая иерархия склада
**ВИЗУАЛЬНАЯ СТРУКТУРА**:
```tsx
// УРОВЕНЬ 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):
```css
/* 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):
```tsx
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 Система партнерства - визуальные индикаторы
**ТИПЫ ПАРТНЕРОВ**:
```css
/* 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 - Кабинет селлера](#9--кабинет-селлера-детальные-правила)
#### 14.5.1 Трёхблочная архитектура страницы "Мои поставки"
**КРИТИЧЕСКИ ВАЖНО**: Правильное выравнивание с сайдбаром
```tsx
// ✅ ПРАВИЛЬНАЯ архитектура (согласно 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 Контекстная статистика по табам
**Для пути "Фулфилмент → Товар → Карточки/Поставщики":**
```tsx
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' },
]
```
**Для пути "Фулфилмент → Расходники селлера":**
```tsx
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":**
```tsx
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 Система создания поставок
**Выбор типа поставки:**
```tsx
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-блочная структура создания рецептуры:**
```tsx
// БЛОК 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:**
```css
/* Успешная синхронизация */
.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