Обновление системной документации и UI Kit админ панели

- Обновлен CLAUDE.md с добавлением принципов качества кода
- Расширен interaction-integrity-rules.md новыми правилами взаимодействия
- Дополнен rules-complete.md техническими требованиями
- Добавлен демо-компонент вариантов кнопки "Назад" в UI Kit
- Обновлены компоненты админ панели и страницы создания расходников
- Уточнены visual-design-rules.md для компонента BackButton
- Исправлены ESLint ошибки и предупреждения

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/admin/admin-dashboard.tsx

@@ -43,9 +43,9 @@ const AdminDashboard = React.memo(() => {
   }, [activeSection])
 
   return (
-    <div className="min-h-screen bg-gradient-smooth flex">
+    <div className="h-screen bg-gradient-smooth flex overflow-hidden">
       <AdminSidebar activeSection={activeSection} onSectionChange={handleSectionChange} />
-      <main className="flex-1 ml-64">{renderContent}</main>
+      <main className="flex-1 ml-64 overflow-y-auto">{renderContent}</main>
     </div>
   )
 })

src/components/admin/ui-kit-section.tsx

@@ -5,6 +5,7 @@ import React from 'react'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 
 import { AnimationsDemo } from './ui-kit/animations-demo'
+import { BackButtonVariantsDemo } from './ui-kit/back-button-variants-demo'
 import { BusinessDemo } from './ui-kit/business-demo'
 import { BusinessProcessesDemo } from './ui-kit/business-processes-demo'
 import { ButtonsDemo } from './ui-kit/buttons-demo'
@@ -84,6 +85,12 @@ const UIKitSection = React.memo(() => {
           >
             Навигация
           </TabsTrigger>
+          <TabsTrigger
+            value="back-button-variants"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
+            Кнопки Назад
+          </TabsTrigger>
           <TabsTrigger
             value="specialized"
             className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
@@ -243,6 +250,9 @@ const UIKitSection = React.memo(() => {
         <TabsContent value="supplies-navigation" className="space-y-6">
           <SuppliesNavigationDemo />
         </TabsContent>
+        <TabsContent value="back-button-variants" className="space-y-6">
+          <BackButtonVariantsDemo />
+        </TabsContent>
 
         <TabsContent value="business-processes" className="space-y-6">
           <BusinessProcessesDemo />

src/components/admin/ui-kit/back-button-variants-demo.tsx

@@ -0,0 +1,234 @@
+'use client'
+
+import { ArrowLeft, Building2 } from 'lucide-react'
+import React from 'react'
+
+export function BackButtonVariantsDemo() {
+  return (
+    <div className="space-y-12 p-6">
+      <div>
+        <h2 className="text-2xl font-bold text-white mb-2">Варианты кнопки &quot;Назад&quot;</h2>
+        <p className="text-white/60 mb-8">
+          Интерактивные варианты размещения кнопки навигации между сайдбаром и контентом
+        </p>
+      </div>
+
+      {/* ВАРИАНТ 1: ПЛАВАЮЩАЯ КНОПКА СЛЕВА */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-white">🌟 Вариант 1: Плавающая кнопка слева</h3>
+        <div className="bg-white/5 rounded-lg p-6 border border-white/10">
+          <div className="flex gap-4 h-48">
+            {/* Sidebar Mock */}
+            <div className="w-60 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-4 flex flex-col">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-8 h-8 bg-purple-500 rounded-full"></div>
+                <span className="text-sm text-white">Rennel</span>
+              </div>
+              <div className="space-y-2">
+                <div className="text-sm text-white/60">Главная</div>
+                <div className="text-sm text-white/60">Маркет</div>
+                <div className="text-sm text-white/60">Мессенджер</div>
+              </div>
+            </div>
+
+            {/* Floating Back Button */}
+            <div className="relative">
+              <button className="absolute left-0 top-6 z-10 w-8 h-8 bg-white/10 backdrop-blur-xl border border-white/20 hover:border-white/40 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110 hover:bg-white/20 group">
+                <ArrowLeft className="h-4 w-4 text-white/70 group-hover:text-white group-hover:h-5 group-hover:w-5 transition-all" />
+              </button>
+            </div>
+
+            {/* Block 1 Mock */}
+            <div className="flex-1 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Building2 className="h-5 w-5 text-blue-400" />
+                  <h2 className="text-lg font-semibold text-white">Поставщики</h2>
+                </div>
+                <div className="w-64 bg-white/10 border border-white/20 rounded-full px-3 py-1.5 text-sm">
+                  <span className="text-white/60">Поиск поставщиков...</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ВАРИАНТ 2: ПОЛОСА НАВИГАЦИИ СВЕРХУ */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-white">📍 Вариант 2: Полоса навигации сверху</h3>
+        <div className="bg-white/5 rounded-lg p-6 border border-white/10">
+          <div className="flex gap-4">
+            {/* Sidebar Mock */}
+            <div className="w-60 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-4 flex flex-col h-48">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-8 h-8 bg-purple-500 rounded-full"></div>
+                <span className="text-sm text-white">Rennel</span>
+              </div>
+              <div className="space-y-2">
+                <div className="text-sm text-white/60">Главная</div>
+                <div className="text-sm text-white/60">Маркет</div>
+                <div className="text-sm text-white/60">Мессенджер</div>
+              </div>
+            </div>
+
+            {/* Content Area */}
+            <div className="flex-1">
+              {/* Navigation Bar */}
+              <div className="flex items-center justify-start mb-4">
+                <button className="w-6 h-6 hover:w-8 hover:h-8 bg-gradient-to-r from-purple-500/20 to-blue-500/20 hover:from-purple-500/40 hover:to-blue-500/40 rounded-full flex items-center justify-center transition-all duration-300 backdrop-blur-sm border border-white/10 hover:border-white/30 group">
+                  <ArrowLeft className="h-3 w-3 group-hover:h-4 group-hover:w-4 text-white/60 group-hover:text-white transition-all" />
+                </button>
+              </div>
+
+              {/* Block 1 Mock */}
+              <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4 h-[180px]">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <Building2 className="h-5 w-5 text-blue-400" />
+                    <h2 className="text-lg font-semibold text-white">Поставщики</h2>
+                  </div>
+                  <div className="w-64 bg-white/10 border border-white/20 rounded-full px-3 py-1.5 text-sm">
+                    <span className="text-white/60">Поиск поставщиков...</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ВАРИАНТ 3: КНОПКА В РАЗРЫВЕ */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-white">🎯 Вариант 3: Кнопка в разрыве</h3>
+        <div className="bg-white/5 rounded-lg p-6 border border-white/10">
+          <div className="flex gap-4 h-48 relative">
+            {/* Sidebar Mock */}
+            <div className="w-60 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-4 flex flex-col">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-8 h-8 bg-purple-500 rounded-full"></div>
+                <span className="text-sm text-white">Rennel</span>
+              </div>
+              <div className="space-y-2">
+                <div className="text-sm text-white/60">Главная</div>
+                <div className="text-sm text-white/60">Маркет</div>
+                <div className="text-sm text-white/60">Мессенджер</div>
+              </div>
+            </div>
+
+            {/* Button in Gap */}
+            <div className="w-0 flex items-center justify-center relative">
+              <button className="absolute w-10 h-10 bg-white/5 hover:bg-white/15 rounded-xl border border-white/10 hover:border-purple-400/50 flex items-center justify-center transition-all duration-500 hover:scale-125 hover:rotate-12 group backdrop-blur-md">
+                <ArrowLeft className="h-4 w-4 text-white/50 group-hover:text-purple-300 transition-colors" />
+              </button>
+            </div>
+
+            {/* Block 1 Mock */}
+            <div className="flex-1 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Building2 className="h-5 w-5 text-blue-400" />
+                  <h2 className="text-lg font-semibold text-white">Поставщики</h2>
+                </div>
+                <div className="w-64 bg-white/10 border border-white/20 rounded-full px-3 py-1.5 text-sm">
+                  <span className="text-white/60">Поиск поставщиков...</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ВАРИАНТ 4: BREADCRUMB СТИЛЬ */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-white">🍞 Вариант 4: Breadcrumb стиль</h3>
+        <div className="bg-white/5 rounded-lg p-6 border border-white/10">
+          <div className="flex gap-4">
+            {/* Sidebar Mock */}
+            <div className="w-60 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-4 flex flex-col h-48">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-8 h-8 bg-purple-500 rounded-full"></div>
+                <span className="text-sm text-white">Rennel</span>
+              </div>
+              <div className="space-y-2">
+                <div className="text-sm text-white/60">Главная</div>
+                <div className="text-sm text-white/60">Маркет</div>
+                <div className="text-sm text-white/60">Мессенджер</div>
+              </div>
+            </div>
+
+            {/* Content Area */}
+            <div className="flex-1">
+              {/* Breadcrumb */}
+              <div className="flex items-center gap-2 mb-2 pl-2">
+                <button className="p-1 hover:p-2 bg-white/0 hover:bg-white/10 rounded-lg transition-all duration-300 group">
+                  <ArrowLeft className="h-3 w-3 group-hover:h-4 group-hover:w-4 text-white/40 group-hover:text-white transition-all" />
+                </button>
+                <span className="text-white/20 text-sm">•</span>
+                <span className="text-white/60 text-sm">Поставщики</span>
+              </div>
+
+              {/* Block 1 Mock */}
+              <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4 h-[180px]">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <Building2 className="h-5 w-5 text-blue-400" />
+                    <h2 className="text-lg font-semibold text-white">Поставщики</h2>
+                  </div>
+                  <div className="w-64 bg-white/10 border border-white/20 rounded-full px-3 py-1.5 text-sm">
+                    <span className="text-white/60">Поиск поставщиков...</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ВАРИАНТ 5: ВЕРТИКАЛЬНАЯ ПАНЕЛЬ */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-white">🔥 Вариант 5: Вертикальная панель</h3>
+        <div className="bg-white/5 rounded-lg p-6 border border-white/10">
+          <div className="flex gap-4 h-48">
+            {/* Sidebar Mock */}
+            <div className="w-60 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-4 flex flex-col">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-8 h-8 bg-purple-500 rounded-full"></div>
+                <span className="text-sm text-white">Rennel</span>
+              </div>
+              <div className="space-y-2">
+                <div className="text-sm text-white/60">Главная</div>
+                <div className="text-sm text-white/60">Маркет</div>
+                <div className="text-sm text-white/60">Мессенджер</div>
+              </div>
+            </div>
+
+            {/* Vertical Panel */}
+            <div className="w-8 flex flex-col items-center py-4">
+              <button className="w-6 h-6 hover:w-7 hover:h-7 bg-gradient-to-b from-purple-500/10 to-transparent hover:from-purple-500/30 hover:to-purple-400/10 rounded-full flex items-center justify-center transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20 group">
+                <ArrowLeft className="h-3 w-3 group-hover:h-4 group-hover:w-4 text-white/50 group-hover:text-purple-300 transition-all duration-300" />
+              </button>
+            </div>
+
+            {/* Block 1 Mock */}
+            <div className="flex-1 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Building2 className="h-5 w-5 text-blue-400" />
+                  <h2 className="text-lg font-semibold text-white">Поставщики</h2>
+                </div>
+                <div className="w-64 bg-white/10 border border-white/20 rounded-full px-3 py-1.5 text-sm">
+                  <span className="text-white/60">Поиск поставщиков...</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="text-center text-white/60 mt-8 p-4 bg-white/5 rounded-lg border border-white/10">
+        <p>Наведите курсор на кнопки для просмотра hover эффектов</p>
+      </div>
+    </div>
+  )
+}

src/components/supplies/create-consumables-supply-page.tsx

@@ -1,16 +1,7 @@
 'use client'
 
 import { useQuery, useMutation } from '@apollo/client'
-import {
-  ArrowLeft,
-  Building2,
-  Search,
-  Package,
-  Plus,
-  Minus,
-  ShoppingCart,
-  Wrench,
-} from 'lucide-react'
+import { ArrowLeft, Building2, Search, Package, Plus, Minus, ShoppingCart, Wrench } from 'lucide-react'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import React, { useState } from 'react'
@@ -131,7 +122,6 @@ export function CreateConsumablesSupplyPage() {
     }).format(amount)
   }
 
-
   const updateConsumableQuantity = (productId: string, quantity: number) => {
     const product = supplierProducts.find((p: ConsumableProduct) => p.id === productId)
     if (!product || !selectedSupplier) return
@@ -358,12 +348,8 @@ export function CreateConsumablesSupplyPage() {
       <Sidebar />
       <main className={`flex-1 ${getSidebarMargin()} overflow-auto transition-all duration-300 p-4`}>
         <div className="min-h-full w-full flex flex-col gap-4">
-          {/* Заголовок */}
-          <div className="flex items-center justify-between flex-shrink-0">
-            <div>
-              <h1 className="text-xl font-bold text-white mb-1">Создание поставки расходников</h1>
-              <p className="text-white/60 text-sm">Выберите поставщика и добавьте расходники в заказ</p>
-            </div>
+          {/* Кнопка назад без заголовка */}
+          <div className="flex items-center justify-end flex-shrink-0">
             <Button
               variant="ghost"
               size="sm"
@@ -429,11 +415,14 @@ export function CreateConsumablesSupplyPage() {
                       {filteredSuppliers.slice(0, 7).map((supplier: ConsumableSupplier, index) => (
                         <Card
                           key={supplier.id}
-                          className={`relative cursor-pointer transition-all duration-300 border flex-shrink-0 rounded-xl overflow-hidden group ${
-                            selectedSupplier?.id === supplier.id
-                              ? 'bg-gradient-to-br from-orange-500/30 via-orange-400/20 to-orange-500/30 border-orange-400/60 shadow-lg shadow-orange-500/25'
-                              : 'bg-gradient-to-br from-white/10 via-white/5 to-white/10 border-white/20 hover:from-white/20 hover:via-white/10 hover:to-white/20 hover:border-white/40'
-                          }`}
+                          className={`relative cursor-pointer transition-all duration-300 border 
+                            flex-shrink-0 rounded-xl overflow-hidden group ${
+                              selectedSupplier?.id === supplier.id
+                                ? 'bg-gradient-to-br from-orange-500/30 via-orange-400/20 to-orange-500/30 ' +
+                                  'border-orange-400/60 shadow-lg shadow-orange-500/25'
+                                : 'bg-gradient-to-br from-white/10 via-white/5 to-white/10 border-white/20 ' +
+                                  'hover:from-white/20 hover:via-white/10 hover:to-white/20 hover:border-white/40'
+                            }`}
                           style={{
                             width: 'calc((100% - 48px) / 7)', // 48px = 6 gaps * 8px each
                             animationDelay: `${index * 100}ms`,
@@ -545,11 +534,15 @@ export function CreateConsumablesSupplyPage() {
                         return (
                           <Card
                             key={product.id}
-                            className={`relative bg-gradient-to-br from-white/10 via-white/5 to-white/10 backdrop-blur border border-white/20 p-3 rounded-xl overflow-hidden group hover:shadow-xl transition-all duration-300 ${
-                              selectedQuantity > 0
-                                ? 'ring-2 ring-green-400/50 bg-gradient-to-br from-green-500/20 via-green-400/10 to-green-500/20'
-                                : 'hover:from-white/20 hover:via-white/10 hover:to-white/20 hover:border-white/40'
-                            }`}
+                            className={`relative bg-gradient-to-br from-white/10 via-white/5 
+                              to-white/10 backdrop-blur border border-white/20 p-3 rounded-xl 
+                              overflow-hidden group hover:shadow-xl transition-all duration-300 ${
+                                selectedQuantity > 0
+                                  ? 'ring-2 ring-green-400/50 bg-gradient-to-br from-green-500/20 ' +
+                                    'via-green-400/10 to-green-500/20'
+                                  : 'hover:from-white/20 hover:via-white/10 hover:to-white/20 ' +
+                                    'hover:border-white/40'
+                              }`}
                             style={{
                               animationDelay: `${index * 50}ms`,
                               minHeight: '200px',