Обновление системной документации и 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>
This commit is contained in:
Veronika Smirnova
2025-08-12 10:21:12 +03:00
parent 5a51ec32f6
commit c586ddc868
9 changed files with 735 additions and 118 deletions

View File

@ -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',