Обновление системной документации и 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>
+  )
+}