Создан единый источник истины rules-complete.md v9.1 с полной интеграцией всех правил системы. Консолидированы правила создания предметов по ролям, уточнен статус брака (НЕ РЕАЛИЗОВАНО), обновлен механизм учета ПЛАН/ФАКТ с заменой брака на потери при пересчете. Добавлен экономический учет расходников фулфилмента для селлера через рецептуру. Удалены дублирующие файлы правил (CLAUDE.md, development-checklist.md, work-protocols.md, violation-prevention-protocol.md, self-validation.md, description.md). Интегрированы UI структуры создания поставок и концепция многоуровневых таблиц.
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Veronika Smirnova
@ -702,6 +702,380 @@ function PageWithSidebar() {
|
||||
|
||||
---
|
||||
|
||||
**📊 СТАТУС**: Действующие правила v1.0
|
||||
**🔄 ОБНОВЛЕНО**: На основе анализа UI Kit системы
|
||||
**📅 ДАТА**: Основано на текущем состоянии проекта
|
||||
## 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'
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
#### 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
|
||||
|
||||
Reference in New Issue
Block a user