From d78adb497c03da188451986bff697dad71200f7d Mon Sep 17 00:00:00 2001
From: Bivekich <biveki-dev@yandex.ru>
Date: Mon, 28 Jul 2025 10:09:17 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=B4=D0=B8=D0=B0=D0=BB=D0=BE=D0=B3=20=D0=B4=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D1=83=D0=B2=D0=B5=D0=BB=D0=B8=D1=87=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D0=B8=D0=B7=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D1=82=D0=BE=D0=B2=D0=B0=D1=80=D0=B0=20=D0=B2=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=B5=20?=
 =?UTF-8?q?ProductCard.=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B4=D0=BB=D1=8F=20?=
 =?UTF-8?q?=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D0=B8=D0=B7=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B9=20=D0=B2=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=B5=20ProductForm,=20=D0=B8=D0=B7=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B5=D0=BD=20=D0=BA=D0=BB=D0=B0=D1=81=D1=81=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20object-contain=20=D0=B4=D0=BB=D1=8F=20=D0=BB?=
 =?UTF-8?q?=D1=83=D1=87=D1=88=D0=B5=D0=B3=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F.=20=D0=9E=D0=BF?=
 =?UTF-8?q?=D1=82=D0=B8=D0=BC=D0=B8=D0=B7=D0=B8=D1=80=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D0=B0=20=D0=BE?=
 =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B8=20=D1=81=D0=BE?=
 =?UTF-8?q?=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8=D1=8F=20=D0=B4=D0=B8=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=B3=D0=B0.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/warehouse/product-card.tsx | 40 ++++++++++++++++++-----
 src/components/warehouse/product-form.tsx |  2 +-
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/warehouse/product-card.tsx b/src/components/warehouse/product-card.tsx
index f27d5a4..3cc688f 100644
--- a/src/components/warehouse/product-card.tsx
+++ b/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
-            src={product.mainImage || product.images[0]}
-            alt={product.name}
-            width={300}
-            height={200}
-            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
-          />
+          <Dialog open={imageDialogOpen} onOpenChange={setImageDialogOpen}>
+            <DialogTrigger asChild>
+              <div className="cursor-zoom-in w-full h-full flex items-center justify-center">
+                <Image
+                  src={product.mainImage || product.images[0]}
+                  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" />
diff --git a/src/components/warehouse/product-form.tsx b/src/components/warehouse/product-form.tsx
index dfb874d..9336cca 100644
--- a/src/components/warehouse/product-form.tsx
+++ b/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"
                     />
                     
                     {/* Индикатор главного изображения */}