diff --git a/docs/api-layer/GRAPHQL_CACHE_RULES.md b/docs/api-layer/GRAPHQL_CACHE_RULES.md
new file mode 100644
index 0000000..cbc82f3
--- /dev/null
+++ b/docs/api-layer/GRAPHQL_CACHE_RULES.md
@@ -0,0 +1,390 @@
+# 🔄 ПРАВИЛА КЕШИРОВАНИЯ GRAPHQL И FETCHPOLICY
+
+> **Цель:** Обеспечить корректное кеширование GraphQL данных и предотвратить проблемы синхронизации между компонентами
+
+## 📋 **ОСНОВНЫЕ ПРИНЦИПЫ КЕШИРОВАНИЯ**
+
+### 1. **СИНХРОНИЗАЦИЯ СВЯЗАННЫХ КОМПОНЕНТОВ**
+
+```typescript
+// ✅ ПРАВИЛЬНО - одинаковые настройки для связанных данных
+const masterComponent = useQuery(GET_WAREHOUSE_STATS, {
+  fetchPolicy: 'cache-and-network',
+  pollInterval: 30000,
+  errorPolicy: 'all',
+})
+
+const detailComponent = useQuery(GET_SUPPLIES_DETAILS, {
+  fetchPolicy: 'cache-and-network', // ← ОБЯЗАТЕЛЬНО то же самое!
+  pollInterval: 30000, // ← ОБЯЗАТЕЛЬНО то же самое!
+  errorPolicy: 'all', // ← ОБЯЗАТЕЛЬНО то же самое!
+})
+```
+
+```typescript
+// ❌ НЕПРАВИЛЬНО - разные настройки создают рассинхронизацию
+const masterComponent = useQuery(GET_WAREHOUSE_STATS, {
+  fetchPolicy: 'cache-and-network',
+})
+
+const detailComponent = useQuery(GET_SUPPLIES_DETAILS, {
+  // default fetchPolicy: 'cache-first' - СОЗДАЁТ ПРОБЛЕМУ!
+})
+```
+
+### 2. **ОБЯЗАТЕЛЬНЫЕ FETCH POLICIES ПО ТИПАМ КОМПОНЕНТОВ**
+
+#### **Dashboard и Статистика**
+
+```typescript
+useQuery(DASHBOARD_QUERY, {
+  fetchPolicy: 'cache-and-network', // Всегда актуальные данные
+  pollInterval: 30000, // Обновление каждые 30 сек
+  errorPolicy: 'all', // Показывать частичные данные при ошибках
+})
+```
+
+#### **Связанные компоненты (Master-Detail)**
+
+```typescript
+// Все компоненты одной функциональности ДОЛЖНЫ иметь идентичные настройки
+const sharedQueryOptions = {
+  fetchPolicy: 'cache-and-network' as const,
+  pollInterval: 30000,
+  errorPolicy: 'all' as const,
+}
+
+// Применение во всех связанных компонентах
+useQuery(MASTER_QUERY, sharedQueryOptions)
+useQuery(DETAIL_QUERY, sharedQueryOptions)
+useQuery(STATS_QUERY, sharedQueryOptions)
+```
+
+#### **Списки и таблицы**
+
+```typescript
+useQuery(LIST_QUERY, {
+  fetchPolicy: 'cache-and-network', // Актуальные данные
+  pollInterval: 60000, // 1 минута для списков
+  notifyOnNetworkStatusChange: true, // Показывать статус загрузки
+})
+```
+
+#### **Редко изменяющиеся данные**
+
+```typescript
+useQuery(STATIC_DATA_QUERY, {
+  fetchPolicy: 'cache-first', // Кеш приоритетен
+  pollInterval: 300000, // 5 минут
+  errorPolicy: 'ignore', // Не показывать ошибки для статичных данных
+})
+```
+
+---
+
+## 🏢 **СПЕЦИФИЧЕСКИЕ ПРАВИЛА ДЛЯ ФУЛФИЛМЕНТА**
+
+### **ГРУППЫ СИНХРОНИЗИРОВАННЫХ КОМПОНЕНТОВ**
+
+#### **Группа 1: Складская статистика**
+
+```typescript
+// Все эти компоненты ДОЛЖНЫ использовать одинаковые настройки:
+const warehouseStatsOptions = {
+  fetchPolicy: 'cache-and-network' as const,
+  pollInterval: 30000,
+  errorPolicy: 'all' as const,
+}
+
+// 1. Главный dashboard (/fulfillment-warehouse)
+useQuery(GET_WAREHOUSE_STATS, warehouseStatsOptions)
+
+// 2. Подраздел расходников (/fulfillment-warehouse/supplies)
+useQuery(GET_SUPPLIES_STATS, warehouseStatsOptions)
+
+// 3. Раздел услуг (/services) - вкладка "Расходники"
+useQuery(GET_SERVICE_SUPPLIES, warehouseStatsOptions)
+```
+
+#### **Группа 2: История поставок**
+
+```typescript
+const suppliesHistoryOptions = {
+  fetchPolicy: 'cache-and-network' as const,
+  pollInterval: 30000,
+  errorPolicy: 'all' as const,
+}
+
+// 1. Основные поставки (главная таблица)
+useQuery(GET_MY_FULFILLMENT_SUPPLIES, suppliesHistoryOptions)
+
+// 2. Детали поставок (раскрывающиеся строки)
+useQuery(GET_MY_FULFILLMENT_CONSUMABLE_SUPPLIES, suppliesHistoryOptions)
+```
+
+---
+
+## 🚨 **КРИТИЧЕСКИЕ АНТИ-ПАТТЕРНЫ**
+
+### **❌ НИКОГДА НЕ ДЕЛАЙТЕ:**
+
+#### **1. Разные fetchPolicy для связанных данных**
+
+```typescript
+// ❌ СОЗДАЁТ РАССИНХРОНИЗАЦИЮ
+const warehouse = useQuery(GET_WAREHOUSE, { fetchPolicy: 'cache-and-network' })
+const supplies = useQuery(GET_SUPPLIES, {}) // default cache-first
+
+// Результат: warehouse показывает новые данные, supplies - старые
+```
+
+#### **2. Разные pollInterval для одной функциональности**
+
+```typescript
+// ❌ СОЗДАЁТ НЕСОГЛАСОВАННОСТЬ
+const stats = useQuery(GET_STATS, { pollInterval: 30000 })
+const details = useQuery(GET_DETAILS, { pollInterval: 60000 })
+
+// Результат: stats обновляется чаще details - значения не совпадают
+```
+
+#### **3. Смешивание cache-first и cache-and-network**
+
+```typescript
+// ❌ КЛАССИЧЕСКАЯ ОШИБКА
+const mainData = useQuery(MAIN_QUERY, { fetchPolicy: 'cache-and-network' })
+const relatedData = useQuery(RELATED_QUERY, { fetchPolicy: 'cache-first' })
+
+// Результат: mainData актуальные, relatedData устаревшие
+```
+
+#### **4. Игнорирование ошибок в критических компонентах**
+
+```typescript
+// ❌ СКРЫВАЕТ ПРОБЛЕМЫ
+useQuery(CRITICAL_DATA_QUERY, {
+  errorPolicy: 'ignore', // Не показывает ошибки когда нужно!
+})
+```
+
+---
+
+## 📊 **ПРАВИЛА ПО ТИПАМ ДАННЫХ**
+
+### **СТАТИСТИКА И DASHBOARD**
+
+```typescript
+const dashboardOptions = {
+  fetchPolicy: 'cache-and-network', // Всегда актуальные данные
+  pollInterval: 30000, // 30 сек - критическая актуальность
+  errorPolicy: 'all', // Показывать частичные данные
+  notifyOnNetworkStatusChange: true, // Показывать индикатор обновления
+}
+```
+
+### **ИНВЕНТАРЬ И ОСТАТКИ**
+
+```typescript
+const inventoryOptions = {
+  fetchPolicy: 'cache-and-network', // Остатки должны быть точными
+  pollInterval: 30000, // Частое обновление
+  errorPolicy: 'all', // Критические данные
+}
+```
+
+### **ИСТОРИЯ И ЛОГИ**
+
+```typescript
+const historyOptions = {
+  fetchPolicy: 'cache-first', // История не меняется часто
+  pollInterval: 120000, // 2 минуты достаточно
+  errorPolicy: 'all', // Показывать что есть
+}
+```
+
+### **СПРАВОЧНИКИ И КАТАЛОГИ**
+
+```typescript
+const catalogOptions = {
+  fetchPolicy: 'cache-first', // Справочники стабильны
+  pollInterval: 300000, // 5 минут
+  errorPolicy: 'ignore', // Не критично
+}
+```
+
+---
+
+## 🔧 **ПРАКТИЧЕСКИЕ ПРИМЕРЫ ИСПРАВЛЕНИЙ**
+
+### **ПРИМЕР 1: Рассинхронизация карточек статистики**
+
+**❌ Проблема:**
+
+```typescript
+// Главный dashboard
+const warehouseStats = useQuery(GET_WAREHOUSE_STATS, {
+  fetchPolicy: 'cache-and-network',
+})
+
+// Подраздел supplies
+const suppliesStats = useQuery(GET_SUPPLIES_STATS, {
+  // default fetchPolicy: 'cache-first' - ПРОБЛЕМА!
+})
+
+// Результат: карточка "РАСХОДНИКИ ФУЛФИЛМЕНТА" = 130, карточка "ОСТАТОК" = 160
+```
+
+**✅ Решение:**
+
+```typescript
+// Общие настройки для всех статистических компонентов
+const statsOptions = {
+  fetchPolicy: 'cache-and-network' as const,
+  pollInterval: 30000,
+  errorPolicy: 'all' as const,
+}
+
+// Применяем везде одинаково
+const warehouseStats = useQuery(GET_WAREHOUSE_STATS, statsOptions)
+const suppliesStats = useQuery(GET_SUPPLIES_STATS, statsOptions)
+```
+
+### **ПРИМЕР 2: История поставок не синхронизируется с основной таблицей**
+
+**❌ Проблема:**
+
+```typescript
+// Основная таблица
+const supplies = useQuery(GET_SUPPLIES, { fetchPolicy: 'cache-and-network' })
+
+// История в раскрывающихся строках
+const history = useQuery(GET_SUPPLY_HISTORY, {}) // default cache-first
+
+// Результат: основная таблица обновилась, история показывает старые данные
+```
+
+**✅ Решение:**
+
+```typescript
+const syncedOptions = {
+  fetchPolicy: 'cache-and-network',
+  pollInterval: 30000,
+}
+
+const supplies = useQuery(GET_SUPPLIES, syncedOptions)
+const history = useQuery(GET_SUPPLY_HISTORY, syncedOptions)
+```
+
+---
+
+## 🎯 **ЧЕКЛИСТ НАСТРОЙКИ КЕШИРОВАНИЯ**
+
+### **Перед релизом компонента:**
+
+- [ ] Определили группу связанных компонентов
+- [ ] Выбрали единую fetchPolicy для группы
+- [ ] Установили одинаковые pollInterval значения
+- [ ] Настроили errorPolicy в соответствии с критичностью
+- [ ] Протестировали синхронизацию данных
+
+### **При обнаружении рассинхронизации:**
+
+- [ ] Проверили fetchPolicy всех связанных запросов
+- [ ] Сравнили pollInterval значения
+- [ ] Убедились в использовании одних таблиц БД
+- [ ] Проверили последовательность обновления данных
+
+---
+
+## 📈 **МОНИТОРИНГ И ОТЛАДКА**
+
+### **DEBUG ЛОГИ ДЛЯ КЕШИРОВАНИЯ**
+
+```typescript
+// Добавляйте в компоненты для контроля кеширования
+useQuery(QUERY, {
+  fetchPolicy: 'cache-and-network',
+  onCompleted: (data) => {
+    console.log('CACHE DEBUG:', {
+      query: 'QUERY_NAME',
+      timestamp: new Date().toISOString(),
+      dataLength: data?.items?.length,
+      source: 'network/cache',
+    })
+  },
+  onError: (error) => {
+    console.error('CACHE ERROR:', {
+      query: 'QUERY_NAME',
+      error: error.message,
+      networkError: error.networkError?.message,
+    })
+  },
+})
+```
+
+### **ПРОВЕРКА СИНХРОНИЗАЦИИ**
+
+```typescript
+// Контрольные точки для проверки консистентности
+useEffect(() => {
+  if (masterData && detailData) {
+    const masterValue = masterData.total
+    const detailValue = detailData.reduce((sum, item) => sum + item.value, 0)
+
+    if (Math.abs(masterValue - detailValue) > 0) {
+      console.error('🚨 CACHE SYNC ERROR:', {
+        component: 'ComponentName',
+        master: masterValue,
+        detail: detailValue,
+        diff: masterValue - detailValue,
+      })
+    }
+  }
+}, [masterData, detailData])
+```
+
+---
+
+## 🚀 **РЕКОМЕНДАЦИИ ПО ПРОИЗВОДИТЕЛЬНОСТИ**
+
+### **ОПТИМИЗАЦИЯ POLLING**
+
+```typescript
+// Адаптивные интервалы в зависимости от активности пользователя
+const useAdaptivePolling = () => {
+  const [isActive, setIsActive] = useState(true)
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      setIsActive(!document.hidden)
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    return () => document.removeEventListener('visibilitychange', handleVisibilityChange)
+  }, [])
+
+  return {
+    pollInterval: isActive ? 30000 : 120000, // Реже обновляем неактивные вкладки
+  }
+}
+```
+
+### **УСЛОВНОЕ КЕШИРОВАНИЕ**
+
+```typescript
+// Разные стратегии для разных сценариев
+const getCachePolicy = (dataType: string) => {
+  switch (dataType) {
+    case 'critical-stats':
+      return { fetchPolicy: 'cache-and-network', pollInterval: 30000 }
+    case 'user-lists':
+      return { fetchPolicy: 'cache-and-network', pollInterval: 60000 }
+    case 'reference-data':
+      return { fetchPolicy: 'cache-first', pollInterval: 300000 }
+    default:
+      return { fetchPolicy: 'cache-first' }
+  }
+}
+```
+
+**Следование этим правилам обеспечит стабильное кеширование и синхронизацию GraphQL данных!** 🚀
diff --git a/docs/presentation-layer/CSS_LAYOUT_SCROLL_RULES.md b/docs/presentation-layer/CSS_LAYOUT_SCROLL_RULES.md
new file mode 100644
index 0000000..3ad6112
--- /dev/null
+++ b/docs/presentation-layer/CSS_LAYOUT_SCROLL_RULES.md
@@ -0,0 +1,489 @@
+# 🎨 ПРАВИЛА CSS LAYOUT И СКРОЛЛА
+
+> **Цель:** Предотвратить проблемы с overflow, scroll и позиционированием в Next.js 15 + React 19 приложении
+
+## 📋 **ОСНОВНЫЕ ПРИНЦИПЫ LAYOUT**
+
+### 1. **БАЗОВАЯ АРХИТЕКТУРА LAYOUT**
+
+```typescript
+// ✅ ПРАВИЛЬНАЯ структура для всех страниц приложения
+<div className="h-screen flex overflow-hidden">  {/* Контейнер полной высоты */}
+  <Sidebar />                                    {/* Фиксированная боковая панель */}
+  <main className={`
+    flex-1                                       /* Занимает оставшееся место */
+    ${getSidebarMargin()}                        /* Динамический отступ */
+    px-4 py-3                                    /* Внутренние отступы */
+    flex flex-col                                /* Вертикальная компоновка */
+    transition-all duration-300                  /* Плавные анимации */
+    overflow-hidden                              /* Предотвращение двойного скролла */
+  `}>
+    <div className="flex-1 overflow-y-auto space-y-6">  {/* ЕДИНСТВЕННАЯ зона скролла */}
+      {/* Весь контент здесь */}
+    </div>
+  </main>
+</div>
+```
+
+### 2. **КРИТИЧЕСКИЕ ПРАВИЛА OVERFLOW**
+
+#### **✅ ПРАВИЛЬНО: Один уровень overflow**
+
+```css
+/* Родительский контейнер */
+.container {
+  height: 100vh;
+  overflow: hidden; /* Запрещаем скролл на уровне экрана */
+}
+
+/* Дочерний скроллируемый контейнер */
+.scrollable-content {
+  flex: 1;
+  overflow-y: auto; /* ЕДИНСТВЕННАЯ зона скролла */
+}
+```
+
+#### **❌ НЕПРАВИЛЬНО: Множественные overflow зоны**
+
+```css
+/* Создаёт конфликты скролла */
+.parent {
+  overflow-y: auto; /* Первый скролл */
+}
+.child {
+  overflow-y: auto; /* Второй скролл - ПРОБЛЕМА! */
+}
+```
+
+---
+
+## 🚨 **ТИПИЧНЫЕ ПРОБЛЕМЫ И РЕШЕНИЯ**
+
+### **ПРОБЛЕМА 1: Контент смещается вправо**
+
+**❌ Причина:**
+
+```jsx
+<div style={{ minHeight: '200vh' }}>
+  {' '}
+  {/* Принудительная высота */}
+  <div className="overflow-hidden">
+    {' '}
+    {/* Скрывает контент */}
+    {/* Контент не помещается и смещается */}
+  </div>
+</div>
+```
+
+**✅ Решение:**
+
+```jsx
+<div className="space-y-6">
+  {' '}
+  {/* Простая вертикальная компоновка */}
+  {/* Контент автоматически размещается правильно */}
+</div>
+```
+
+### **ПРОБЛЕМА 2: Скролл не работает**
+
+**❌ Причина:**
+
+```jsx
+<div className="h-screen overflow-hidden">
+  {' '}
+  {/* Блокирует скролл */}
+  <div className="overflow-hidden">
+    {' '}
+    {/* Дублирует блокировку */}
+    <div className="min-h-[200vh]">
+      {' '}
+      {/* Создаёт контент больше экрана */}
+      {/* Контент не скроллится */}
+    </div>
+  </div>
+</div>
+```
+
+**✅ Решение:**
+
+```jsx
+<div className="h-screen flex flex-col overflow-hidden">
+  <div className="flex-1 overflow-y-auto">
+    {' '}
+    {/* ЕДИНСТВЕННАЯ зона скролла */}
+    {/* Контент свободно скроллится */}
+  </div>
+</div>
+```
+
+### **ПРОБЛЕМА 3: Двойной sidebar в layout**
+
+**❌ Причина:**
+
+```jsx
+// В page.tsx
+<div className="flex">
+  <Sidebar /> {/* Первый sidebar */}
+  <main>
+    <div className="flex">
+      <Sidebar /> {/* Второй sidebar - ДУБЛИРОВАНИЕ! */}
+      <content />
+    </div>
+  </main>
+</div>
+```
+
+**✅ Решение:**
+
+```jsx
+// В page.tsx - УБРАТЬ дублирование
+<div className="h-screen flex overflow-hidden">
+  <Sidebar /> {/* ЕДИНСТВЕННЫЙ sidebar */}
+  <main className={`flex-1 ${getSidebarMargin()} overflow-hidden`}>
+    <div className="flex-1 overflow-y-auto space-y-6">{/* Весь контент */}</div>
+  </main>
+</div>
+```
+
+---
+
+## 🏗️ **АРХИТЕКТУРНЫЕ ПАТТЕРНЫ**
+
+### **ПАТТЕРН 1: Dashboard с статистикой**
+
+```jsx
+export function DashboardPage() {
+  return (
+    <div className="h-screen flex overflow-hidden">
+      <Sidebar />
+      <main className={`flex-1 ${getSidebarMargin()} px-4 py-3 flex flex-col overflow-hidden`}>
+        <div className="flex-1 overflow-y-auto space-y-6">
+          {/* Заголовок */}
+          <Header />
+
+          {/* Статистические карточки */}
+          <StatsCards />
+
+          {/* Основное содержимое */}
+          <MainContent />
+        </div>
+      </main>
+    </div>
+  )
+}
+```
+
+### **ПАТТЕРН 2: Таблица с фильтрами**
+
+```jsx
+export function TablePage() {
+  return (
+    <div className="h-screen flex overflow-hidden">
+      <Sidebar />
+      <main className={`flex-1 ${getSidebarMargin()} px-4 py-3 flex flex-col overflow-hidden`}>
+        <div className="flex-1 overflow-y-auto space-y-6">
+          {/* Фильтры (фиксированные) */}
+          <FiltersPanel />
+
+          {/* Таблица (скроллируемая) */}
+          <div className="flex-1 overflow-y-auto">
+            <DataTable />
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}
+```
+
+### **ПАТТЕРН 3: Модальные окна**
+
+```jsx
+// ✅ Модалки не должны влиять на основной скролл
+<Dialog>
+  <div className="max-h-[80vh] overflow-y-auto">
+    {' '}
+    {/* Скролл только внутри модалки */}
+    <ModalContent />
+  </div>
+</Dialog>
+```
+
+---
+
+## 📱 **RESPONSIVE DESIGN ПРАВИЛА**
+
+### **АДАПТИВНЫЕ КОНТЕЙНЕРЫ**
+
+```jsx
+<div
+  className="
+  grid 
+  grid-cols-1           /* Мобильные: 1 колонка */
+  md:grid-cols-2        /* Планшеты: 2 колонки */
+  lg:grid-cols-4        /* Десктоп: 4 колонки */
+  xl:grid-cols-6        /* Большие экраны: 6 колонок */
+  gap-4 
+"
+>
+  {/* Карточки адаптивно размещаются */}
+</div>
+```
+
+### **АДАПТИВНЫЕ ОТСТУПЫ**
+
+```jsx
+<main className={`
+  flex-1
+  ${getSidebarMargin()}         /* Динамический отступ для sidebar */
+  px-4 py-3                     /* Базовые отступы */
+  lg:px-6 lg:py-4              /* Увеличенные отступы на больших экранах */
+  overflow-hidden
+`}>
+```
+
+---
+
+## 🎯 **СПЕЦИФИЧЕСКИЕ ПРАВИЛА ДЛЯ SFERA**
+
+### **ПРАВИЛА ДЛЯ ФУЛФИЛМЕНТ КОМПОНЕНТОВ**
+
+#### **1. Главная страница склада**
+
+```jsx
+// src/app/fulfillment-warehouse/page.tsx
+<div className="h-screen flex overflow-hidden">
+  <Sidebar />
+  <main className={`flex-1 ${getSidebarMargin()} px-4 py-3 flex flex-col overflow-hidden`}>
+    <div className="flex-1 overflow-y-auto space-y-6">
+      <WarehouseHeader />
+      <WarehouseStats /> {/* Статистика - НЕ скроллится */}
+      <WarehouseContent /> {/* Контент - скроллится */}
+    </div>
+  </main>
+</div>
+```
+
+#### **2. Таблицы поставок**
+
+```jsx
+// src/components/fulfillment-warehouse/fulfillment-supplies-page.tsx
+<div className="h-screen flex overflow-hidden">
+  <Sidebar />
+  <main className={`flex-1 ${getSidebarMargin()} px-4 py-3 flex flex-col overflow-hidden`}>
+    <div className="flex-1 overflow-y-auto space-y-6">
+      {' '}
+      {/* ← КЛЮЧЕВОЙ ЭЛЕМЕНТ */}
+      <SuppliesHeader /> {/* Фильтры */}
+      <SuppliesStats /> {/* Статистика */}
+      <SuppliesList /> {/* Основная таблица - скроллируется естественно */}
+    </div>
+  </main>
+</div>
+```
+
+#### **3. Раскрывающиеся детали (Master-Detail)**
+
+```jsx
+// Детали поставок в раскрывающихся строках
+<tr className="border-t border-white/10">
+  <td colSpan="100%" className="p-0">
+    <div className="max-h-96 overflow-y-auto bg-white/5">
+      {' '}
+      {/* Локальный скролл */}
+      <DeliveryDetails />
+    </div>
+  </td>
+</tr>
+```
+
+---
+
+## ⚡ **ПРОИЗВОДИТЕЛЬНОСТЬ И ОПТИМИЗАЦИЯ**
+
+### **ВИРТУАЛИЗАЦИЯ ДЛЯ БОЛЬШИХ СПИСКОВ**
+
+```jsx
+// Для таблиц с >100 строк
+import { FixedSizeList as List } from 'react-window'
+
+;<div className="h-96 overflow-hidden">
+  {' '}
+  {/* Контейнер фиксированной высоты */}
+  <List
+    height={384} // Высота контейнера
+    itemCount={items.length} // Количество элементов
+    itemSize={64} // Высота каждого элемента
+    className="scrollbar-thin" // Кастомный скроллбар
+  >
+    {({ index, style }) => (
+      <div style={style}>
+        <TableRow item={items[index]} />
+      </div>
+    )}
+  </List>
+</div>
+```
+
+### **LAZY LOADING ДЛЯ КОНТЕНТА**
+
+```jsx
+const LazyTableSection = lazy(() => import('./TableSection'))
+
+// В компоненте
+<div className="flex-1 overflow-y-auto space-y-6">
+  <StatsSection />  {/* Загружается сразу */}
+  <Suspense fallback={<div>Загрузка...</div>}>
+    <LazyTableSection />  {/* Загружается по требованию */}
+  </Suspense>
+</div>
+```
+
+---
+
+## 🚨 **АНТИ-ПАТТЕРНЫ И ЗАПРЕТЫ**
+
+### **❌ НИКОГДА НЕ ДЕЛАЙТЕ:**
+
+#### **1. Принудительные размеры**
+
+```jsx
+// ❌ Создаёт проблемы с layout
+<div style={{ minHeight: '200vh' }}>
+<div className="h-[2000px]">
+```
+
+#### **2. Множественные overflow зоны**
+
+```jsx
+// ❌ Конфликты скролла
+<div className="overflow-y-auto">
+  <div className="overflow-y-auto">
+    <div className="overflow-y-auto">
+```
+
+#### **3. Смешивание fixed и sticky позиционирования**
+
+```jsx
+// ❌ Непредсказуемое поведение
+<div className="fixed top-0">
+  <div className="sticky top-0">
+```
+
+#### **4. Игнорирование responsive дизайна**
+
+```jsx
+// ❌ Не адаптируется к мобильным устройствам
+<div className="grid grid-cols-6 gap-4">  {/* Сломается на мобильных */}
+```
+
+---
+
+## 🔧 **ИНСТРУМЕНТЫ ОТЛАДКИ**
+
+### **CSS DEBUG КЛАССЫ**
+
+```css
+/* Добавьте для визуализации проблем */
+.debug-borders * {
+  border: 1px solid red !important;
+}
+
+.debug-overflow {
+  overflow: visible !important;
+  background: rgba(255, 0, 0, 0.1) !important;
+}
+
+.debug-scroll {
+  scrollbar-color: red transparent !important;
+  scrollbar-width: thick !important;
+}
+```
+
+### **REACT DevTools**
+
+```jsx
+// Добавьте data-атрибуты для отладки
+<div
+  className="overflow-y-auto"
+  data-scroll-zone="main-content"
+  data-debug="scroll-container"
+>
+```
+
+### **КОНСОЛЬНЫЕ ЛОГИ ДЛЯ РАЗМЕРОВ**
+
+```jsx
+useEffect(() => {
+  const element = ref.current
+  if (element) {
+    console.log('LAYOUT DEBUG:', {
+      scrollHeight: element.scrollHeight,
+      clientHeight: element.clientHeight,
+      offsetHeight: element.offsetHeight,
+      hasOverflow: element.scrollHeight > element.clientHeight,
+    })
+  }
+}, [])
+```
+
+---
+
+## 📊 **ЧЕКЛИСТ ПРОВЕРКИ LAYOUT**
+
+### **Перед релизом:**
+
+- [ ] Единственная зона скролла на странице
+- [ ] Нет принудительных высот (`minHeight: '200vh'`)
+- [ ] Правильная структура с `h-screen` и `overflow-hidden`
+- [ ] Responsive дизайн для мобильных устройств
+- [ ] Sidebar не дублируется в компонентах
+- [ ] Модальные окна не влияют на основной скролл
+
+### **При проблемах со скроллом:**
+
+- [ ] Проверить количество `overflow-y-auto` в иерархии
+- [ ] Убедиться в отсутствии `overflow-hidden` на скроллируемом контейнере
+- [ ] Проверить наличие `flex-1` у родительского контейнера
+- [ ] Убрать принудительные размеры (`min-height`, `height: 200vh`)
+
+---
+
+## 🎨 **КАСТОМНЫЕ СКРОЛЛБАРЫ**
+
+### **TAILWIND CLASSES**
+
+```jsx
+<div className="
+  overflow-y-auto
+  scrollbar-thin          /* Тонкий скроллбар */
+  scrollbar-track-transparent
+  scrollbar-thumb-white/20
+  hover:scrollbar-thumb-white/30
+">
+```
+
+### **CUSTOM CSS**
+
+```css
+/* Кастомные скроллбары для SFERA */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+```
+
+**Следование этим правилам обеспечит корректную работу layout и скролла во всех компонентах!** 🚀
diff --git a/docs/presentation-layer/DATA_SYNCHRONIZATION_RULES.md b/docs/presentation-layer/DATA_SYNCHRONIZATION_RULES.md
new file mode 100644
index 0000000..015ee46
--- /dev/null
+++ b/docs/presentation-layer/DATA_SYNCHRONIZATION_RULES.md
@@ -0,0 +1,286 @@
+# 🔄 ПРАВИЛА СИНХРОНИЗАЦИИ ДАННЫХ МЕЖДУ КОМПОНЕНТАМИ
+
+> **Цель:** Обеспечить консистентность данных между различными компонентами системы SFERA
+
+## 📋 **ОСНОВНЫЕ ПРИНЦИПЫ**
+
+### 1. **ЕДИНЫЙ ИСТОЧНИК ИСТИНЫ (Single Source of Truth)**
+
+- ✅ **Один резолвер = одна таблица БД** для одного типа данных
+- ✅ **V2 система** - приоритет над legacy кодом
+- ❌ **Никогда не дублируйте** одни данные в разных резолверах
+
+### 2. **КОНСИСТЕНТНАЯ CACHE POLICY**
+
+```typescript
+// ✅ ПРАВИЛЬНО - одинаковая policy для связанных данных
+const query1 = useQuery(QUERY_A, { fetchPolicy: 'cache-and-network' })
+const query2 = useQuery(QUERY_B, { fetchPolicy: 'cache-and-network' })
+
+// ❌ НЕПРАВИЛЬНО - разные policies создают рассинхронизацию
+const query1 = useQuery(QUERY_A, { fetchPolicy: 'cache-and-network' })
+const query2 = useQuery(QUERY_B, {}) // default cache-first policy
+```
+
+### 3. **ОБЯЗАТЕЛЬНЫЕ FETCH POLICIES**
+
+#### **Для связанных компонентов:**
+
+```typescript
+fetchPolicy: 'cache-and-network', // Всегда актуальные данные
+pollInterval: 30000,              // Автообновление каждые 30 сек
+```
+
+#### **Для dashboard/статистики:**
+
+```typescript
+fetchPolicy: 'cache-and-network', // Синхронизация с основными данными
+pollInterval: 30000,              // Регулярное обновление
+errorPolicy: 'all',               // Показывать частичные данные при ошибках
+```
+
+---
+
+## 🏢 **ПРАВИЛА ДЛЯ ФУЛФИЛМЕНТА**
+
+### **ТАБЛИЦЫ V2 СИСТЕМЫ**
+
+- **`fulfillmentConsumableInventory`** - складские остатки расходников
+- **`fulfillmentConsumableSupplyOrder`** - поставки расходников
+- **`fulfillmentInventoryV2`** - общий инвентарь фулфилмента
+
+### **СВЯЗАННЫЕ КОМПОНЕНТЫ**
+
+```typescript
+// Все эти компоненты должны использовать одинаковые данные:
+
+1. Главный dashboard склада (/fulfillment-warehouse)
+   - Карточка "РАСХОДНИКИ ФУЛФИЛМЕНТА"
+
+2. Подраздел расходников (/fulfillment-warehouse/supplies)
+   - Карточка "ОСТАТОК"
+   - Главная таблица поставок
+
+3. Раздел услуг (/services)
+   - Вкладка "Расходники"
+
+4. История поставок
+   - Раскрывающиеся детали каждого товара
+```
+
+### **СИНХРОНИЗИРОВАННЫЕ ПОЛЯ**
+
+```typescript
+interface SynchronizedData {
+  currentStock: number // Текущий остаток (одинаковый везде)
+  totalReceived: number // Общее количество поступлений
+  productId: string // ID для группировки истории поставок
+  fulfillmentCenterId: string // ID фулфилмент-центра
+}
+```
+
+---
+
+## 📊 **ПРАВИЛА ДЛЯ СТАТИСТИЧЕСКИХ КОМПОНЕНТОВ**
+
+### **1. АРХИТЕКТУРА MASTER-DETAIL**
+
+```typescript
+// MASTER компонент (главный раздел)
+const masterStats = useQuery(GET_WAREHOUSE_STATS, {
+  fetchPolicy: 'cache-and-network',
+  pollInterval: 30000,
+})
+
+// DETAIL компонент (подраздел)
+const detailStats = useQuery(GET_DETAILED_SUPPLIES, {
+  fetchPolicy: 'cache-and-network', // ← ОБЯЗАТЕЛЬНО то же самое!
+  pollInterval: 30000, // ← ОБЯЗАТЕЛЬНО то же самое!
+})
+
+// Вычисление должно давать одинаковые результаты
+const masterValue = masterStats.data?.fulfillmentSupplies?.current
+const detailValue = detailStats.data?.supplies?.reduce((sum, s) => sum + s.currentStock, 0)
+// masterValue === detailValue ← ОБЯЗАТЕЛЬНО!
+```
+
+### **2. ПРАВИЛА АГРЕГАЦИИ**
+
+```typescript
+// ✅ ПРАВИЛЬНО - агрегация из одного источника данных
+const totalStock = inventoryItems.reduce((sum, item) => sum + item.currentStock, 0)
+
+// ❌ НЕПРАВИЛЬНО - агрегация из разных источников
+const totalStock1 = supplies.reduce((sum, s) => sum + s.currentStock, 0) // источник A
+const totalStock2 = inventory.reduce((sum, i) => sum + i.remainingStock, 0) // источник B
+```
+
+---
+
+## 🔗 **ПРАВИЛА СВЯЗЫВАНИЯ ДАННЫХ**
+
+### **ОБЯЗАТЕЛЬНЫЕ ПОЛЯ ДЛЯ СВЯЗИ**
+
+```typescript
+// В GraphQL схемах ОБЯЗАТЕЛЬНО указывать связующие поля:
+
+type Supply {
+  id: ID!
+  productId: ID!           // ← Для фильтрации истории поставок
+  fulfillmentCenterId: ID  // ← Для привязки к фулфилменту
+}
+
+type SupplyOrder {
+  id: ID!
+  fulfillmentCenterId: ID! // ← Для фильтрации по фулфилменту
+  items: [SupplyOrderItem!]!
+}
+
+type SupplyOrderItem {
+  productId: ID!           // ← Для связи с inventory
+  requestedQuantity: Int!
+  receivedQuantity: Int!   // ← Для подсчёта остатков
+}
+```
+
+### **ФИЛЬТРАЦИЯ ПО СВЯЗАННЫМ ДАННЫМ**
+
+```typescript
+// ✅ ПРАВИЛЬНО - фильтрация по ID
+const getSupplyHistory = (supply: Supply) => {
+  return allDeliveries.filter((delivery) => delivery.items?.some((item) => item.productId === supply.productId))
+}
+
+// ❌ НЕПРАВИЛЬНО - фильтрация по названию (может быть дубли)
+const getSupplyHistory = (supply: Supply) => {
+  return allDeliveries.filter((delivery) => delivery.name === supply.name && delivery.category === supply.category)
+}
+```
+
+---
+
+## ⚡ **ПРАВИЛА REAL-TIME ОБНОВЛЕНИЙ**
+
+### **АВТОМАТИЧЕСКАЯ СИНХРОНИЗАЦИЯ**
+
+```typescript
+// Компоненты должны обновляться автоматически при изменениях
+
+// 1. При приёме поставки на склад
+prisma.fulfillmentConsumableInventory.update({
+  where: { id: itemId },
+  data: { currentStock: newStock },
+})
+// → Автоматически обновятся: статистика, таблица, услуги
+
+// 2. При отгрузке товаров
+prisma.fulfillmentConsumableInventory.update({
+  where: { id: itemId },
+  data: { currentStock: { decrement: shippedQuantity } },
+})
+// → Автоматически обновятся все связанные компоненты
+```
+
+### **POLLING ИНТЕРВАЛЫ**
+
+```typescript
+pollInterval: 30000 // 30 сек - для статистики и dashboard
+pollInterval: 60000 // 1 мин - для списков и таблиц
+pollInterval: 120000 // 2 мин - для отчётов и архивных данных
+```
+
+---
+
+## 🚨 **АНТИ-ПАТТЕРНЫ И ТИПИЧНЫЕ ОШИБКИ**
+
+### **❌ НИКОГДА НЕ ДЕЛАЙТЕ:**
+
+#### **1. Разные источники для одних данных**
+
+```typescript
+// ❌ ПЛОХО
+const stats = useQuery(GET_OLD_SUPPLIES) // legacy таблица
+const details = useQuery(GET_NEW_SUPPLIES) // V2 таблица
+```
+
+#### **2. Разные cache policies для связанных данных**
+
+```typescript
+// ❌ ПЛОХО
+const master = useQuery(QUERY_A, { fetchPolicy: 'cache-and-network' })
+const detail = useQuery(QUERY_B, {}) // default cache-first
+```
+
+#### **3. Ручная синхронизация через состояние**
+
+```typescript
+// ❌ ПЛОХО
+const [manualSync, setManualSync] = useState(0)
+useEffect(() => {
+  // Попытка ручной синхронизации через state
+}, [manualSync])
+```
+
+#### **4. Группировка по нестабильным полям**
+
+```typescript
+// ❌ ПЛОХО - названия могут изменяться
+supplies.filter((s) => s.name === targetName)
+
+// ✅ ХОРОШО - ID стабильны
+supplies.filter((s) => s.productId === targetProductId)
+```
+
+---
+
+## 🎯 **ЧЕКЛИСТ СИНХРОНИЗАЦИИ**
+
+### **При создании связанных компонентов:**
+
+- [ ] Используют одну таблицу БД как источник данных
+- [ ] Одинаковые `fetchPolicy` настройки
+- [ ] Одинаковые `pollInterval` значения
+- [ ] Связь через стабильные ID поля
+- [ ] Одинаковая логика агрегации/фильтрации
+- [ ] Обработка ошибок и loading состояний
+
+### **При тестировании синхронизации:**
+
+- [ ] Изменение данных обновляет все связанные компоненты
+- [ ] Значения в master и detail компонентах совпадают
+- [ ] Нет задержек между обновлениями (< 30 сек)
+- [ ] Ошибки в одном компоненте не ломают другие
+
+---
+
+## 📈 **МОНИТОРИНГ СИНХРОНИЗАЦИИ**
+
+### **DEBUG ЛОГИ**
+
+```typescript
+// Добавляйте логи для контроля синхронизации
+console.warn('SYNC CHECK:', {
+  masterValue: masterData?.totalStock,
+  detailValue: detailData?.reduce(sum, 0),
+  timestamp: new Date().toISOString(),
+  source: 'fulfillmentInventorySync',
+})
+```
+
+### **УВЕДОМЛЕНИЯ О РАССИНХРОНИЗАЦИИ**
+
+```typescript
+// Проверка консистентности данных
+if (Math.abs(masterValue - detailValue) > 0) {
+  console.error('🚨 DATA SYNCHRONIZATION ERROR', {
+    master: masterValue,
+    detail: detailValue,
+    component: 'FulfillmentStats',
+  })
+
+  // Отправка уведомления разработчикам
+  toast.error('Обнаружена рассинхронизация данных')
+}
+```
+
+**Следование этим правилам обеспечит надёжную синхронизацию данных между всеми компонентами системы!** 🚀
diff --git a/docs/presentation-layer/STATISTICAL_COMPONENTS_RULES.md b/docs/presentation-layer/STATISTICAL_COMPONENTS_RULES.md
new file mode 100644
index 0000000..d30a220
--- /dev/null
+++ b/docs/presentation-layer/STATISTICAL_COMPONENTS_RULES.md
@@ -0,0 +1,598 @@
+# 📊 ПРАВИЛА СТАТИСТИЧЕСКИХ КОМПОНЕНТОВ
+
+> **Цель:** Обеспечить корректную работу, синхронизацию и консистентность статистических компонентов в системе SFERA
+
+## 📋 **ОСНОВНЫЕ ПРИНЦИПЫ СТАТИСТИЧЕСКИХ КОМПОНЕНТОВ**
+
+### 1. **АРХИТЕКТУРА MASTER-DETAIL**
+
+```typescript
+// ✅ ПРАВИЛЬНАЯ архитектура связанных статистических компонентов
+interface StatisticsHierarchy {
+  masterComponent: {
+    location: '/fulfillment-warehouse'
+    cards: ['РАСХОДНИКИ ФУЛФИЛМЕНТА', 'ТОВАРЫ СЕЛЛЕРОВ', ...]
+    role: 'Обзор всего склада'
+  }
+
+  detailComponent: {
+    location: '/fulfillment-warehouse/supplies'
+    cards: ['ВСЕГО ПОЗИЦИЙ', 'ДОСТУПНО', 'ОСТАТОК', 'НЕТ В НАЛИЧИИ', ...]
+    role: 'Детализация расходников'
+  }
+
+  // ОБЯЗАТЕЛЬНО: masterComponent.cards[X] === sum(detailComponent.items)
+  consistency: 'Значения master должны равняться агрегации detail'
+}
+```
+
+### 2. **ЕДИНЫЕ ИСТОЧНИКИ ДАННЫХ**
+
+```typescript
+// ✅ ПРАВИЛЬНО - один источник данных для связанных статистик
+const warehouseQuery = useQuery(GET_WAREHOUSE_STATS, {
+  fetchPolicy: 'cache-and-network',
+  pollInterval: 30000,
+})
+
+const suppliesQuery = useQuery(GET_SUPPLIES_STATS, {
+  fetchPolicy: 'cache-and-network', // ← ОБЯЗАТЕЛЬНО то же самое!
+  pollInterval: 30000, // ← ОБЯЗАТЕЛЬНО то же самое!
+})
+
+// ОБЯЗАТЕЛЬНАЯ проверка консистентности
+useEffect(() => {
+  const masterValue = warehouseQuery.data?.fulfillmentSupplies?.current
+  const detailValue = suppliesQuery.data?.supplies?.reduce((sum, s) => sum + s.currentStock, 0)
+
+  if (masterValue !== detailValue) {
+    console.error('🚨 STATISTICS SYNC ERROR:', { masterValue, detailValue })
+  }
+}, [warehouseQuery.data, suppliesQuery.data])
+```
+
+---
+
+## 🎯 **ТИПЫ СТАТИСТИЧЕСКИХ КАРТОЧЕК**
+
+### **ТИП 1: Счётчики (Counters)**
+
+```jsx
+// Подсчёт количества элементов
+;<StatCard title="Всего позиций" value={supplies.length} icon={Package} color="blue" format="number" />
+
+// Логика расчёта
+const totalItems = supplies.length
+const availableItems = supplies.filter((s) => s.currentStock > 0).length
+const outOfStockItems = supplies.filter((s) => s.currentStock === 0).length
+```
+
+### **ТИП 2: Агрегаторы (Aggregators)**
+
+```jsx
+// Суммирование значений
+;<StatCard
+  title="Остаток"
+  value={supplies.reduce((sum, s) => sum + s.currentStock, 0)}
+  unit="шт"
+  icon={Package}
+  color="blue"
+  format="number"
+/>
+
+// Логика расчёта
+const totalStock = supplies.reduce((sum, supply) => sum + supply.currentStock, 0)
+const totalValue = supplies.reduce((sum, supply) => sum + supply.price * supply.currentStock, 0)
+```
+
+### **ТИП 3: Индикаторы состояния (Status Indicators)**
+
+```jsx
+// Показатели состояния системы
+<StatCard
+  title="Доступно"
+  value={availableSupplies.length}
+  icon={CheckCircle}
+  color="green"
+  subtitle={`из ${totalSupplies} позиций`}
+  trend={{ value: +5, period: 'за неделю' }}
+/>
+```
+
+### **ТИП 4: Финансовые показатели (Financial)**
+
+```jsx
+// Денежные значения
+<StatCard
+  title="Общая стоимость"
+  value={totalInventoryValue}
+  icon={DollarSign}
+  color="purple"
+  format="currency"
+  currency="RUB"
+/>
+```
+
+---
+
+## 🏢 **СПЕЦИФИЧЕСКИЕ ПРАВИЛА ДЛЯ ФУЛФИЛМЕНТА**
+
+### **КАРТОЧКИ ГЛАВНОГО DASHBOARD (/fulfillment-warehouse)**
+
+```typescript
+interface WarehouseMasterStats {
+  'РАСХОДНИКИ ФУЛФИЛМЕНТА': {
+    source: 'fulfillmentConsumableInventory'
+    calculation: 'SUM(currentStock)'
+    syncWith: '/fulfillment-warehouse/supplies - карточка ОСТАТОК'
+  }
+
+  'ТОВАРЫ СЕЛЛЕРОВ': {
+    source: 'sellerInventoryOnWarehouse'
+    calculation: 'SUM(currentStock)'
+    syncWith: 'Таблица товаров селлеров'
+  }
+
+  'АКТИВНЫЕ ЗАКАЗЫ': {
+    source: 'supplyOrders'
+    calculation: 'COUNT where status IN [PENDING, SHIPPED]'
+    syncWith: 'Раздел входящих заказов'
+  }
+}
+```
+
+### **КАРТОЧКИ ПОДРАЗДЕЛА РАСХОДНИКОВ (/fulfillment-warehouse/supplies)**
+
+```typescript
+interface SuppliesDetailStats {
+  'ВСЕГО ПОЗИЦИЙ': {
+    calculation: 'COUNT(DISTINCT productId)'
+    description: 'Количество уникальных товаров'
+  }
+
+  ДОСТУПНО: {
+    calculation: 'COUNT WHERE currentStock > 0'
+    description: 'Товары в наличии'
+  }
+
+  ОСТАТОК: {
+    calculation: 'SUM(currentStock)'
+    description: 'Общее количество единиц товара'
+    syncWith: 'Master: РАСХОДНИКИ ФУЛФИЛМЕНТА' // ← КРИТИЧЕСКАЯ СИНХРОНИЗАЦИЯ
+  }
+
+  'НЕТ В НАЛИЧИИ': {
+    calculation: 'COUNT WHERE currentStock = 0'
+    description: 'Товары с нулевыми остатками'
+  }
+
+  'ОБЩАЯ СТОИМОСТЬ': {
+    calculation: 'SUM(price * currentStock)'
+    format: 'currency'
+  }
+
+  'В ПУТИ': {
+    calculation: 'COUNT WHERE status = "shipped"'
+    description: 'Товары в транспортировке'
+  }
+}
+```
+
+---
+
+## 🔄 **ПРАВИЛА СИНХРОНИЗАЦИИ СТАТИСТИК**
+
+### **1. ОБЯЗАТЕЛЬНАЯ КОНСИСТЕНТНОСТЬ MASTER-DETAIL**
+
+```typescript
+// ✅ ПРАВИЛЬНАЯ реализация проверки синхронизации
+const validateStatisticsConsistency = (masterData: any, detailData: any[]) => {
+  const masterValue = masterData?.fulfillmentSupplies?.current || 0
+  const detailValue = detailData.reduce((sum, item) => sum + item.currentStock, 0)
+
+  const tolerance = 0 // Для inventory данных - точное соответствие!
+  const isConsistent = Math.abs(masterValue - detailValue) <= tolerance
+
+  if (!isConsistent) {
+    console.error('🚨 CRITICAL STATISTICS INCONSISTENCY:', {
+      component: 'FulfillmentStatistics',
+      masterValue,
+      detailValue,
+      difference: masterValue - detailValue,
+      timestamp: new Date().toISOString(),
+      requiresAttention: true,
+    })
+
+    // Уведомление пользователя о проблеме
+    toast.error('Обнаружена несогласованность данных статистики')
+
+    // Попытка принудительного обновления
+    refetchMasterData()
+    refetchDetailData()
+  }
+
+  return isConsistent
+}
+
+// Использование в компонентах
+useEffect(() => {
+  validateStatisticsConsistency(warehouseMasterData, suppliesDetailData)
+}, [warehouseMasterData, suppliesDetailData])
+```
+
+### **2. АВТОМАТИЧЕСКОЕ ОБНОВЛЕНИЕ СВЯЗАННЫХ СТАТИСТИК**
+
+```typescript
+// При изменении данных - все связанные статистики обновляются
+const handleInventoryUpdate = async (inventoryChange: InventoryChange) => {
+  // 1. Обновляем основные данные
+  await updateInventoryRecord(inventoryChange)
+
+  // 2. Принудительное обновление всех связанных статистик
+  await Promise.all([
+    refetchWarehouseStats(), // Master dashboard
+    refetchSuppliesStats(), // Detail dashboard
+    refetchServiceStats(), // Services section
+  ])
+
+  // 3. Проверяем консистентность после обновления
+  setTimeout(() => validateStatisticsConsistency(), 1000)
+}
+```
+
+---
+
+## 🎨 **ДИЗАЙН И UI ПРАВИЛА**
+
+### **СТАНДАРТНАЯ СТРУКТУРА КАРТОЧКИ**
+
+```jsx
+<Card className="glass-card p-4">
+  <div className="flex items-center justify-between">
+    <div>
+      {/* Основная информация */}
+      <p className="text-xs font-medium text-white/60 uppercase tracking-wider">{title}</p>
+      <p className="text-2xl font-bold text-{color}-300 mt-1">
+        {formattedValue} {unit && <span className="text-sm">{unit}</span>}
+      </p>
+
+      {/* Дополнительная информация */}
+      {subtitle && <p className="text-xs text-white/40 mt-1">{subtitle}</p>}
+    </div>
+
+    {/* Иконка */}
+    <div className="p-2 bg-{color}-500/20 rounded-lg">
+      <Icon className="h-5 w-5 text-{color}-300" />
+    </div>
+  </div>
+</Card>
+```
+
+### **ЦВЕТОВЫЕ СХЕМЫ ПО ТИПАМ**
+
+```typescript
+const StatCardColors = {
+  // Позитивные показатели (наличие, доступность)
+  positive: {
+    background: 'bg-green-500/20',
+    text: 'text-green-300',
+    icon: 'text-green-300',
+  },
+
+  // Нейтральные показатели (общие счётчики)
+  neutral: {
+    background: 'bg-blue-500/20',
+    text: 'text-blue-300',
+    icon: 'text-blue-300',
+  },
+
+  // Внимание требующие (мало на складе)
+  warning: {
+    background: 'bg-yellow-500/20',
+    text: 'text-yellow-300',
+    icon: 'text-yellow-300',
+  },
+
+  // Негативные показатели (отсутствие, проблемы)
+  negative: {
+    background: 'bg-red-500/20',
+    text: 'text-red-300',
+    icon: 'text-red-300',
+  },
+
+  // Финансовые показатели
+  financial: {
+    background: 'bg-purple-500/20',
+    text: 'text-purple-300',
+    icon: 'text-purple-300',
+  },
+
+  // Процессы и активность
+  process: {
+    background: 'bg-orange-500/20',
+    text: 'text-orange-300',
+    icon: 'text-orange-300',
+  },
+}
+```
+
+---
+
+## 📈 **ФОРМАТИРОВАНИЕ ДАННЫХ**
+
+### **ЧИСЛОВЫЕ ФОРМАТЫ**
+
+```typescript
+const formatStatValue = (value: number, type: StatType) => {
+  switch (type) {
+    case 'currency':
+      return new Intl.NumberFormat('ru-RU', {
+        style: 'currency',
+        currency: 'RUB',
+        minimumFractionDigits: 0,
+      }).format(value)
+
+    case 'number':
+      return new Intl.NumberFormat('ru-RU').format(value)
+
+    case 'percentage':
+      return new Intl.NumberFormat('ru-RU', {
+        style: 'percent',
+        minimumFractionDigits: 1,
+      }).format(value / 100)
+
+    case 'compact':
+      return new Intl.NumberFormat('ru-RU', {
+        notation: 'compact',
+        compactDisplay: 'short',
+      }).format(value)
+
+    default:
+      return String(value)
+  }
+}
+
+// Примеры использования
+formatStatValue(1500, 'number') // "1 500"
+formatStatValue(25000, 'currency') // "25 000 ₽"
+formatStatValue(1500000, 'compact') // "1,5 млн"
+```
+
+### **ЕДИНИЦЫ ИЗМЕРЕНИЯ**
+
+```typescript
+const StatUnits = {
+  quantity: 'шт',
+  weight: 'кг',
+  volume: 'л',
+  currency: '₽',
+  percentage: '%',
+  count: '', // без единицы для простых счётчиков
+  days: 'дн.',
+  hours: 'ч',
+}
+```
+
+---
+
+## 🚨 **АНТИ-ПАТТЕРНЫ И ТИПИЧНЫЕ ОШИБКИ**
+
+### **❌ НИКОГДА НЕ ДЕЛАЙТЕ:**
+
+#### **1. Разные источники данных для связанных статистик**
+
+```typescript
+// ❌ ПЛОХО - создаёт несогласованность
+const masterStats = useQuery(GET_OLD_WAREHOUSE_DATA) // legacy таблица
+const detailStats = useQuery(GET_NEW_SUPPLIES_DATA) // V2 таблица
+
+// Результат: разные значения в связанных карточках
+```
+
+#### **2. Игнорирование ошибок в статистике**
+
+```typescript
+// ❌ ПЛОХО - скрывает проблемы с данными
+const { data, error } = useQuery(STATS_QUERY, {
+  errorPolicy: 'ignore', // Ошибки не видны!
+})
+
+// ✅ ПРАВИЛЬНО
+const { data, error } = useQuery(STATS_QUERY, {
+  errorPolicy: 'all', // Показываем ошибки
+  onError: (error) => {
+    console.error('Stats error:', error)
+    toast.error('Ошибка загрузки статистики')
+  },
+})
+```
+
+#### **3. Вычисления на фронтенде вместо БД**
+
+```typescript
+// ❌ ПЛОХО - медленно и неточно
+const totalValue = supplies.map(s => s.price * s.quantity).reduce((a, b) => a + b, 0)
+
+// ✅ ПРАВИЛЬНО - вычисления в GraphQL resolver
+query GetSuppliesStats {
+  suppliesStats {
+    totalValue    # Рассчитано на сервере
+    totalStock    # Рассчитано на сервере
+  }
+}
+```
+
+#### **4. Отсутствие проверки синхронизации**
+
+```typescript
+// ❌ ПЛОХО - не контролируем консистентность
+const Stats = () => {
+  const master = useQuery(MASTER_QUERY)
+  const detail = useQuery(DETAIL_QUERY)
+
+  return <div>{master.value} vs {detail.sum}</div>  // Может не совпадать!
+}
+
+// ✅ ПРАВИЛЬНО - с проверкой синхронизации
+const Stats = () => {
+  const master = useQuery(MASTER_QUERY)
+  const detail = useQuery(DETAIL_QUERY)
+
+  useEffect(() => {
+    validateConsistency(master.data, detail.data)
+  }, [master.data, detail.data])
+
+  return <ValidatedStatsView />
+}
+```
+
+---
+
+## 🔧 **ИНСТРУМЕНТЫ ОТЛАДКИ И МОНИТОРИНГА**
+
+### **DEBUG КОМПОНЕНТ ДЛЯ СТАТИСТИКИ**
+
+```jsx
+const StatisticsDebugPanel = ({ masterData, detailData }) => {
+  if (process.env.NODE_ENV !== 'development') return null
+
+  return (
+    <div className="fixed bottom-4 right-4 bg-black/80 p-4 rounded-lg text-xs text-white">
+      <h3>Statistics Debug</h3>
+      <div>Master: {masterData?.value}</div>
+      <div>Detail Sum: {detailData?.reduce((sum, item) => sum + item.value, 0)}</div>
+      <div>Sync: {masterData?.value === detailSum ? '✅' : '❌'}</div>
+      <div>Last Update: {new Date().toLocaleTimeString()}</div>
+    </div>
+  )
+}
+```
+
+### **АВТОМАТИЧЕСКИЕ ТЕСТЫ СИНХРОНИЗАЦИИ**
+
+```typescript
+// Тест для проверки синхронизации статистик
+describe('Statistics Synchronization', () => {
+  it('должен синхронизировать master и detail значения', async () => {
+    const { masterValue } = await fetchMasterStats()
+    const detailItems = await fetchDetailItems()
+    const detailSum = detailItems.reduce((sum, item) => sum + item.value, 0)
+
+    expect(masterValue).toBe(detailSum)
+  })
+
+  it('должен обновлять связанные статистики при изменении данных', async () => {
+    const initialStats = await fetchStats()
+    await updateInventory({ productId: '1', change: +10 })
+
+    // Ждём обновления
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    const updatedStats = await fetchStats()
+    expect(updatedStats.totalStock).toBe(initialStats.totalStock + 10)
+  })
+})
+```
+
+---
+
+## 📊 **ШАБЛОНЫ КОМПОНЕНТОВ**
+
+### **БАЗОВЫЙ СТАТИСТИЧЕСКИЙ КОМПОНЕНТ**
+
+```tsx
+interface StatCardProps {
+  title: string
+  value: number | string
+  icon: React.ComponentType
+  color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'orange'
+  unit?: string
+  subtitle?: string
+  trend?: { value: number; period: string }
+  format?: 'number' | 'currency' | 'percentage' | 'compact'
+  loading?: boolean
+  error?: string
+}
+
+export const StatCard: React.FC<StatCardProps> = ({
+  title,
+  value,
+  icon: Icon,
+  color,
+  unit,
+  subtitle,
+  trend,
+  format = 'number',
+  loading,
+  error,
+}) => {
+  const formattedValue = useMemo(() => {
+    if (loading) return '...'
+    if (error) return 'Ошибка'
+    return formatStatValue(Number(value), format)
+  }, [value, format, loading, error])
+
+  return (
+    <Card className="glass-card p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-xs font-medium text-white/60 uppercase tracking-wider">{title}</p>
+          <p className={`text-2xl font-bold text-${color}-300 mt-1`}>
+            {formattedValue}
+            {unit && <span className="text-sm ml-1">{unit}</span>}
+          </p>
+          {subtitle && <p className="text-xs text-white/40 mt-1">{subtitle}</p>}
+          {trend && (
+            <p className="text-xs text-white/50 mt-1">
+              {trend.value > 0 ? '+' : ''}
+              {trend.value} {trend.period}
+            </p>
+          )}
+        </div>
+        <div className={`p-2 bg-${color}-500/20 rounded-lg`}>
+          <Icon className={`h-5 w-5 text-${color}-300`} />
+        </div>
+      </div>
+    </Card>
+  )
+}
+```
+
+### **КОМПОНЕНТ ГРУППЫ СТАТИСТИК**
+
+```tsx
+interface StatsGridProps {
+  stats: Array<StatCardProps & { id: string }>
+  columns?: 1 | 2 | 3 | 4 | 6
+  loading?: boolean
+  error?: string
+}
+
+export const StatsGrid: React.FC<StatsGridProps> = ({ stats, columns = 6, loading, error }) => {
+  if (error) {
+    return (
+      <Card className="glass-card p-4">
+        <div className="text-red-300 text-center">Ошибка загрузки статистики: {error}</div>
+      </Card>
+    )
+  }
+
+  return (
+    <div
+      className={`
+      grid grid-cols-1 
+      md:grid-cols-2 
+      lg:grid-cols-${Math.min(columns, 4)} 
+      xl:grid-cols-${columns} 
+      gap-4
+    `}
+    >
+      {stats.map((stat) => (
+        <StatCard key={stat.id} {...stat} loading={loading} />
+      ))}
+    </div>
+  )
+}
+```
+
+**Следование этим правилам обеспечит надёжную работу статистических компонентов!** 🚀