Добавлен диалог для увеличения изображения товара в компоненте ProductCard. Обновлены стили для отображения изображений в компоненте ProductForm, изменен класс на object-contain для лучшего отображения. Оптимизирована логика обработки состояния диалога.

src/components/warehouse/product-card.tsx

@@ -1,12 +1,13 @@
 "use client"
 
+import { useState } from 'react'
 import Image from 'next/image'
-
 import { useMutation } from '@apollo/client'
 import { Card } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { DELETE_PRODUCT } from '@/graphql/mutations'
 import { Edit3, Trash2, Package, Eye, EyeOff } from 'lucide-react'
 import { toast } from 'sonner'
@@ -40,6 +41,7 @@ interface ProductCardProps {
 
 export function ProductCard({ product, onEdit, onDeleted }: ProductCardProps) {
   const [deleteProduct, { loading: deleting }] = useMutation(DELETE_PRODUCT)
+  const [imageDialogOpen, setImageDialogOpen] = useState(false)
 
   const handleDelete = async () => {
     try {
@@ -79,15 +81,35 @@ export function ProductCard({ product, onEdit, onDeleted }: ProductCardProps) {
   return (
     <Card className="glass-card group relative overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:shadow-purple-500/20">
       {/* Изображение товара */}
-      <div className="relative h-48 bg-white/5 overflow-hidden">
+      <div className="relative h-48 bg-white/5 overflow-hidden flex items-center justify-center">
         {product.mainImage || product.images[0] ? (
-          <Image
+          <Dialog open={imageDialogOpen} onOpenChange={setImageDialogOpen}>
-            src={product.mainImage || product.images[0]}
+            <DialogTrigger asChild>
-            alt={product.name}
+              <div className="cursor-zoom-in w-full h-full flex items-center justify-center">
-            width={300}
+                <Image
-            height={200}
+                  src={product.mainImage || product.images[0]}
-            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                  alt={product.name}
-          />
+                  width={300}
+                  height={200}
+                  className="w-full h-full object-contain transition-transform duration-300 group-hover:scale-110"
+                />
+              </div>
+            </DialogTrigger>
+            <DialogContent className="glass-card max-w-4xl max-h-[90vh] p-2">
+              <DialogHeader>
+                <DialogTitle className="text-white">{product.name}</DialogTitle>
+              </DialogHeader>
+              <div className="flex items-center justify-center p-4">
+                <Image
+                  src={product.mainImage || product.images[0]}
+                  alt={product.name}
+                  width={800}
+                  height={600}
+                  className="max-w-full max-h-[70vh] object-contain rounded-lg"
+                />
+              </div>
+            </DialogContent>
+          </Dialog>
         ) : (
           <div className="w-full h-full flex items-center justify-center">
             <Package className="h-16 w-16 text-white/30" />

src/components/warehouse/product-form.tsx

@@ -426,7 +426,7 @@ export function ProductForm({ product, onSave, onCancel }: ProductFormProps) {
                       alt={`Товар ${index + 1}`}
                       width={200}
                       height={150}
-                      className="w-full aspect-square object-cover rounded-lg"
+                      className="w-full aspect-square object-contain rounded-lg bg-white/5"
                     />
                     
                     {/* Индикатор главного изображения */}