Merge branch 'main' of https://gittea.biveki.ru/Sfera/sfera

src/components/supplies/wb-product-cards.tsx

@@ -8,6 +8,8 @@ import { Badge } from '@/components/ui/badge'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Calendar as CalendarComponent } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Sidebar } from '@/components/dashboard/sidebar'
 import { useSidebar } from '@/hooks/useSidebar'
 import { 
@@ -34,6 +36,8 @@ import { apolloClient } from '@/lib/apollo-client'
 import { GET_MY_COUNTERPARTIES, GET_COUNTERPARTY_SERVICES, GET_COUNTERPARTY_SUPPLIES } from '@/graphql/queries'
 import { CREATE_WILDBERRIES_SUPPLY } from '@/graphql/mutations'
 import { toast } from 'sonner'
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale'
 import { SelectedCard, FulfillmentService, ConsumableService, WildberriesCard } from '@/types/supplies'
 
 
@@ -56,8 +60,10 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
   const [searchTerm, setSearchTerm] = useState('')
   const [loading, setLoading] = useState(false)
   const [wbCards, setWbCards] = useState<WildberriesCard[]>([])
-  const [selectedCards, setSelectedCards] = useState<SelectedCard[]>([])
+  const [selectedCards, setSelectedCards] = useState<SelectedCard[]>([]) // Товары в корзине
+  const [preparingCards, setPreparingCards] = useState<SelectedCard[]>([]) // Товары, готовящиеся к добавлению
   const [showSummary, setShowSummary] = useState(false)
+  const [globalDeliveryDate, setGlobalDeliveryDate] = useState<Date | undefined>(undefined)
   const [fulfillmentServices, setFulfillmentServices] = useState<FulfillmentService[]>([])
   const [organizationServices, setOrganizationServices] = useState<{[orgId: string]: Array<{id: string, name: string, description?: string, price: number}>}>({})
   const [organizationSupplies, setOrganizationSupplies] = useState<{[orgId: string]: Array<{id: string, name: string, description?: string, price: number}>}>({})
@@ -436,7 +442,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
       const filteredCards = mockCards.filter(card => 
         card.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
         card.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        card.vendorCode.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        card.nmID.toString().includes(searchTerm.toLowerCase()) ||
         card.object?.toLowerCase().includes(searchTerm.toLowerCase())
       )
 
@@ -449,7 +455,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
       const filteredCards = mockCards.filter(card => 
         card.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
         card.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        card.vendorCode.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        card.nmID.toString().includes(searchTerm.toLowerCase()) ||
         card.object?.toLowerCase().includes(searchTerm.toLowerCase())
       )
       setWbCards(filteredCards)
@@ -460,7 +466,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
   }
 
   const updateCardSelection = (card: WildberriesCard, field: keyof SelectedCard, value: string | number | string[]) => {
-    setSelectedCards(prev => {
+    setPreparingCards(prev => {
       const existing = prev.find(sc => sc.card.nmID === card.nmID)
       
       if (field === 'selectedQuantity' && typeof value === 'number' && value === 0) {
@@ -468,10 +474,15 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
       }
       
       if (existing) {
+        const updatedCard = { ...existing, [field]: value }
+        
+        // При изменении количества сбрасываем цену, чтобы пользователь ввел новую
+        if (field === 'selectedQuantity' && typeof value === 'number' && existing.customPrice > 0) {
+          updatedCard.customPrice = 0
+        }
+        
         return prev.map(sc => 
-          sc.card.nmID === card.nmID 
+          sc.card.nmID === card.nmID ? updatedCard : sc
-            ? { ...sc, [field]: value }
-            : sc
         )
       } else if (field === 'selectedQuantity' && typeof value === 'number' && value > 0) {
         const newSelectedCard: SelectedCard = {
@@ -496,11 +507,73 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
     })
   }
 
+  // Функция для получения цены за единицу товара
+  const getSelectedUnitPrice = (card: WildberriesCard): number => {
+    const selected = preparingCards.find(sc => sc.card.nmID === card.nmID)
+    if (!selected || selected.selectedQuantity === 0) return 0
+    return selected.customPrice / selected.selectedQuantity
+  }
+
+  // Функция для получения общей стоимости товара
+  const getSelectedTotalPrice = (card: WildberriesCard): number => {
+    const selected = preparingCards.find(sc => sc.card.nmID === card.nmID)
+    return selected ? selected.customPrice : 0
+  }
+
   const getSelectedQuantity = (card: WildberriesCard): number => {
-    const selected = selectedCards.find(sc => sc.card.nmID === card.nmID)
+    const selected = preparingCards.find(sc => sc.card.nmID === card.nmID)
     return selected ? selected.selectedQuantity : 0
   }
 
+  // Функция для добавления подготовленных товаров в корзину
+  const addToCart = () => {
+    const validCards = preparingCards.filter(card => 
+      card.selectedQuantity > 0 && card.customPrice > 0
+    )
+    
+    if (validCards.length === 0) {
+      toast.error('Выберите товары и укажите цены')
+      return
+    }
+
+    if (!globalDeliveryDate) {
+      toast.error('Выберите дату поставки')
+      return
+    }
+
+    setSelectedCards(prev => {
+      const newCards = [...prev]
+      validCards.forEach(prepCard => {
+        const cardWithDate = {
+          ...prepCard,
+          deliveryDate: globalDeliveryDate.toISOString().split('T')[0]
+        }
+        const existingIndex = newCards.findIndex(sc => sc.card.nmID === prepCard.card.nmID)
+        if (existingIndex >= 0) {
+          // Обновляем существующий товар
+          newCards[existingIndex] = cardWithDate
+        } else {
+          // Добавляем новый товар
+          newCards.push(cardWithDate)
+        }
+      })
+      return newCards
+    })
+
+    // Очищаем подготовленные товары
+    setPreparingCards([])
+    toast.success(`Добавлено ${validCards.length} товар(ов) в корзину`)
+  }
+
+  // Функции подсчета для подготовленных товаров
+  const getPreparingTotalItems = () => {
+    return preparingCards.reduce((sum, card) => sum + card.selectedQuantity, 0)
+  }
+
+  const getPreparingTotalAmount = () => {
+    return preparingCards.reduce((sum, card) => sum + card.customPrice, 0)
+  }
+
   const formatCurrency = (amount: number) => {
     return new Intl.NumberFormat('ru-RU', {
       style: 'currency',
@@ -665,7 +738,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
                     <div className="flex-1 space-y-4">
                       <div>
                         <h3 className="text-white font-medium">{sc.card.title}</h3>
-                        <p className="text-white/60 text-sm">{sc.card.vendorCode}</p>
+                                                    <p className="text-white/60 text-sm">WB: {sc.card.nmID}</p>
                       </div>
                       
                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -734,15 +807,6 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
                               return null
                             })()}
                           </div>
-                          <div>
-                            <label className="text-white/60 text-sm">Дата поставки:</label>
-                            <Input
-                              type="date"
-                              value={sc.deliveryDate}
-                              onChange={(e) => updateCardSelection(sc.card, 'deliveryDate', e.target.value)}
-                              className="bg-white/5 border-white/20 text-white mt-1"
-                            />
-                          </div>
                         </div>
 
                         {/* Услуги */}
@@ -966,24 +1030,92 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
       </div>
 
       {/* Поиск */}
-      <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
+      {/* Поиск товаров и выбор даты поставки */}
-        <div className="flex space-x-3">
+      <Card className="bg-white/10 backdrop-blur border-white/20 p-3">
+        <div className="flex space-x-2 items-center">
+          {/* Поиск */}
           <div className="flex-1">
             <Input
-              placeholder="Поиск товаров по названию, артикулу или бренду..."
+              placeholder="Поиск товаров..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="bg-white/5 border-white/20 text-white placeholder-white/50"
+              className="bg-white/5 border-white/20 text-white placeholder-white/50 h-9"
               onKeyPress={(e) => e.key === 'Enter' && searchCards()}
             />
           </div>
+          
+          {/* Выбор даты поставки */}
+          <div className="w-44">
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-full justify-start text-left font-normal bg-white/5 border-white/20 text-white hover:bg-white/10 hover:text-white h-9 text-xs"
+                >
+                  <Calendar className="mr-1 h-3 w-3" />
+                  {globalDeliveryDate ? (
+                    format(globalDeliveryDate, "dd.MM.yy", { locale: ru })
+                  ) : (
+                    <span className="text-white/50">Дата поставки</span>
+                  )}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-72 p-0 glass-card" align="end">
+                <div className="p-4 border-b border-white/10">
+                  <p className="text-white font-medium text-sm">Дата поставки</p>
+                  <p className="text-white/60 text-xs">Выберите дату для всех товаров</p>
+                </div>
+                <CalendarComponent
+                  mode="single"
+                  selected={globalDeliveryDate}
+                  onSelect={setGlobalDeliveryDate}
+                  disabled={(date) => date < new Date()}
+                  initialFocus
+                  locale={ru}
+                  className="glass-card border-0 p-3"
+                  classNames={{
+                    months: "flex flex-col space-y-3",
+                    month: "space-y-3",
+                    caption: "flex justify-center pt-2 relative items-center",
+                    caption_label: "text-sm font-medium text-white",
+                    nav: "space-x-1 flex items-center",
+                    nav_button: "h-7 w-7 glass-secondary text-white hover:bg-white/20 hover:text-white rounded-md border-white/20",
+                    nav_button_previous: "absolute left-1",
+                    nav_button_next: "absolute right-1",
+                    table: "w-full border-collapse space-y-1",
+                    head_row: "flex",
+                    head_cell: "text-white/70 rounded-md w-9 font-normal text-xs",
+                    row: "flex w-full mt-2",
+                    cell: "h-9 w-9 text-center text-xs p-0 relative focus-within:relative focus-within:z-20",
+                    day: "h-9 w-9 p-0 font-normal text-white hover:bg-white/15 hover:text-white rounded-md transition-colors",
+                    day_selected: "glass-button text-white hover:bg-gradient-to-r hover:from-purple-500 hover:to-pink-500",
+                    day_today: "bg-white/15 text-white font-semibold border border-white/30",
+                    day_outside: "text-white/30 opacity-50",
+                    day_disabled: "text-white/20 opacity-30",
+                  }}
+                />
+                {globalDeliveryDate && (
+                  <div className="p-4 border-t border-white/10">
+                    <Badge className="glass-secondary text-white border-white/20 text-xs">
+                      <Calendar className="h-3 w-3 mr-1" />
+                      {format(globalDeliveryDate, "dd MMMM yyyy", { locale: ru })}
+                    </Badge>
+                  </div>
+                )}
+              </PopoverContent>
+            </Popover>
+          </div>
+          
+          {/* Кнопка поиска */}
           <Button 
             onClick={searchCards}
             disabled={loading || !searchTerm.trim()}
-            className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600"
+            variant="glass"
+            size="sm"
+            className="h-9 px-3"
           >
-            <Search className="h-4 w-4 mr-2" />
+            <Search className="h-3 w-3" />
-            {loading ? 'Поиск...' : 'Найти'}
           </Button>
         </div>
       </Card>
@@ -1017,7 +1149,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
 
             return (
               <Card key={card.nmID} className={`bg-white/10 backdrop-blur border-white/20 transition-all hover:scale-105 hover:shadow-2xl group ${isSelected ? 'ring-2 ring-purple-500/50 bg-purple-500/10' : ''} relative overflow-hidden`}>
-                <div className="p-3 space-y-3">
+                <div className="p-2 space-y-2">
                   {/* Изображение и основная информация */}
                   <div className="space-y-2">
                     <div className="relative">
@@ -1039,9 +1171,9 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
                         {/* Индикатор выбранного товара */}
                         {isSelected && (
                           <div className="absolute top-2 left-2">
-                            <Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs font-medium">
+                            <Badge className="bg-gradient-to-r from-orange-500 to-amber-500 text-white border-0 text-xs font-medium">
-                              <ShoppingCart className="h-3 w-3 mr-1" />
+                              <Package className="h-3 w-3 mr-1" />
-                              В корзине
+                              Подготовлен
                             </Badge>
                           </div>
                         )}
@@ -1073,7 +1205,6 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
                         <h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight cursor-pointer hover:text-purple-300 transition-colors" onClick={() => handleCardClick(card)}>
                           {card.title}
                         </h3>
-                        <p className="text-white/60 text-xs mb-2">Артикул: {card.vendorCode}</p>
                       </div>
 
                       {/* Информация о товаре */}
@@ -1085,56 +1216,89 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
                     </div>
                   </div>
 
-                  {/* Управление количеством */}
+                  {/* Компактное управление */}
                   <div className="space-y-2 bg-white/5 rounded-lg p-2">
-                    <div className="flex items-center justify-center mb-1">
+                    {/* Количество - компактно */}
-                      <span className="text-white/60 text-xs font-medium">Добавить в поставку:</span>
+                    <div className="flex items-center space-x-1">
-                    </div>
-                    <div className="flex items-center space-x-2">
                       <Button
                         variant="ghost"
                         size="sm"
-                        onClick={() => updateCardSelection(card, 'selectedQuantity', Math.max(0, selectedQuantity - 1))}
+                        onClick={() => {
+                          const newQuantity = Math.max(0, selectedQuantity - 1)
+                          updateCardSelection(card, 'selectedQuantity', newQuantity)
+                        }}
                         disabled={selectedQuantity <= 0}
-                        className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20 disabled:opacity-50"
+                        className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20 disabled:opacity-50"
                       >
                         <Minus className="h-3 w-3" />
                       </Button>
-                      <div className="flex-1">
+                      <input
-                        <input
+                        type="text"
-                          type="text"
+                        inputMode="numeric"
-                          inputMode="numeric"
+                        pattern="[0-9]*"
-                          pattern="[0-9]*"
+                        value={selectedQuantity}
-                          value={selectedQuantity}
+                        onChange={(e) => {
-                          onChange={(e) => {
+                          const value = e.target.value.replace(/[^0-9]/g, '')
-                            const value = e.target.value.replace(/[^0-9]/g, '')
+                          const numValue = Math.max(0, parseInt(value) || 0)
-                            const numValue = Math.max(0, parseInt(value) || 0)
+                          updateCardSelection(card, 'selectedQuantity', numValue)
-                            updateCardSelection(card, 'selectedQuantity', numValue)
+                        }}
-                          }}
+                        onFocus={(e) => e.target.select()}
-                          onFocus={(e) => e.target.select()}
+                        className="flex-1 h-7 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                          className="h-8 w-full text-center bg-white/10 border border-white/20 text-white text-sm rounded focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                        placeholder="Кол-во"
-                          placeholder="0"
+                      />
-                        />
-                      </div>
                       <Button
                         variant="ghost"
                         size="sm"
-                        onClick={() => updateCardSelection(card, 'selectedQuantity', selectedQuantity + 1)}
+                        onClick={() => {
-                        className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
+                          const newQuantity = selectedQuantity + 1
+                          updateCardSelection(card, 'selectedQuantity', newQuantity)
+                        }}
+                        className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
                       >
                         <Plus className="h-3 w-3" />
                       </Button>
                     </div>
 
-                    {/* Указание что настройки в корзине */}
+                    {/* Цена - компактно, показывается только если есть количество */}
                     {selectedQuantity > 0 && (
-                      <div className="bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-500/30 rounded p-2 mt-2">
+                      <input
-                        <div className="text-center">
+                        type="text"
-                          <span className="text-blue-300 text-xs">В корзине: {selectedQuantity} шт</span>
+                        inputMode="decimal"
-                          <p className="text-blue-200 text-xs mt-1">Настройте цену и услуги в корзине</p>
+                        value={getSelectedTotalPrice(card) || ''}
+                        onChange={(e) => {
+                          const value = e.target.value.replace(/[^0-9.,]/g, '').replace(',', '.')
+                          const totalPrice = parseFloat(value) || 0
+                          updateCardSelection(card, 'customPrice', totalPrice)
+                        }}
+                        onFocus={(e) => e.target.select()}
+                        className="w-full h-7 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-green-500 focus:border-transparent"
+                        placeholder={`Общая цена за ${selectedQuantity} шт`}
+                      />
+                    )}
+
+                    {/* Результат - очень компактно */}
+                    {selectedQuantity > 0 && getSelectedTotalPrice(card) > 0 && (
+                      <div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-1.5">
+                        <div className="text-center space-y-0.5">
+                          <div className="text-green-300 text-xs font-medium">
+                            {formatCurrency(getSelectedTotalPrice(card))}
+                          </div>
+                          <div className="text-green-200 text-[10px]">
+                            ~{formatCurrency(getSelectedUnitPrice(card))}/шт
+                          </div>
                         </div>
                       </div>
                     )}
+
+                    {/* Индикатор подготовки к добавлению */}
+                    {selectedQuantity > 0 && (
+                      <div className="flex items-center justify-center">
+                        <Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-[10px] px-2 py-0.5">
+                          <Package className="h-2.5 w-2.5 mr-1" />
+                          Подготовлен
+                        </Badge>
+                      </div>
+                    )}
                   </div>
                 </div>
               </Card>
@@ -1143,15 +1307,15 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
         </div>
       )}
 
-      {/* Плавающая корзина */}
+      {/* Плавающая кнопка "В корзину" для подготовленных товаров */}
-      {selectedCards.length > 0 && !showSummary && (
+      {preparingCards.length > 0 && getPreparingTotalItems() > 0 && (
         <div className="fixed bottom-6 right-6 z-50">
           <Button 
-            onClick={() => setShowSummary(true)}
+            onClick={addToCart}
-            className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg h-12 px-6"
+            className="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white shadow-lg h-12 px-6"
           >
             <ShoppingCart className="h-5 w-5 mr-2" />
-            Корзина ({getTotalItems()}) • {formatCurrency(getTotalAmount())}
+            В корзину ({getPreparingTotalItems()}) • {formatCurrency(getPreparingTotalAmount())}
           </Button>
         </div>
       )}
@@ -1197,149 +1361,87 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
 
       {/* Модальное окно с детальной информацией о товаре */}
       <Dialog open={!!selectedCardForDetails} onOpenChange={(open) => !open && closeDetailsModal()}>
-        <DialogContent className="max-w-6xl w-[95vw] max-h-[95vh] bg-black/95 backdrop-blur-xl border border-white/20 p-0 overflow-hidden">
+        <DialogContent className="glass-card border-white/10 max-w-2xl">
-          <DialogHeader className="sr-only">
+          <DialogHeader>
-            <DialogTitle>Детальная информация о товаре</DialogTitle>
+            <DialogTitle className="text-white">Информация о товаре</DialogTitle>
           </DialogHeader>
           {selectedCardForDetails && (
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-0 h-full max-w-full">
+            <div className="space-y-4">
-              {/* Изображения */}
+              {/* Изображение */}
-              <div className="p-4 lg:p-6 space-y-4 overflow-hidden">
+              <div className="relative">
-                <div className="relative">
+                <img
-                  <img
+                  src={WildberriesService.getCardImages(selectedCardForDetails)[currentImageIndex] || '/api/placeholder/400/400'}
-                    src={WildberriesService.getCardImages(selectedCardForDetails)[currentImageIndex] || '/api/placeholder/400/400'}
+                  alt={selectedCardForDetails.title}
-                    alt={selectedCardForDetails.title}
+                  className="w-full aspect-video rounded-lg object-cover"
-                    className="w-full aspect-square rounded-lg object-cover"
+                />
-                  />
-                  
-                  {/* Навигация по изображениям */}
-                  {WildberriesService.getCardImages(selectedCardForDetails).length > 1 && (
-                    <>
-                      <button
-                        onClick={prevImage}
-                        className="absolute left-3 top-1/2 -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white p-2 rounded-full transition-all"
-                      >
-                        <ChevronLeft className="h-5 w-5" />
-                      </button>
-                      <button
-                        onClick={nextImage}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white p-2 rounded-full transition-all"
-                      >
-                        <ChevronRight className="h-5 w-5" />
-                      </button>
-                      
-                      <div className="absolute bottom-3 left-1/2 -translate-x-1/2 bg-black/70 px-3 py-1 rounded-full text-white text-sm">
-                        {currentImageIndex + 1} из {WildberriesService.getCardImages(selectedCardForDetails).length}
-                      </div>
-                    </>
-                  )}
-                </div>
                 
-                {/* Миниатюры изображений */}
+                {/* Навигация по изображениям */}
                 {WildberriesService.getCardImages(selectedCardForDetails).length > 1 && (
-                  <div className="w-full overflow-hidden">
+                  <>
-                    <div className="flex space-x-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
+                    <button
-                      {WildberriesService.getCardImages(selectedCardForDetails).map((image, index) => (
+                      onClick={prevImage}
-                        <img
+                      className="absolute left-3 top-1/2 -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white p-2 rounded-full transition-all"
-                          key={index}
+                    >
-                          src={image}
+                      <ChevronLeft className="h-4 w-4" />
-                          alt={`${selectedCardForDetails.title} ${index + 1}`}
+                    </button>
-                          className={`w-16 h-16 rounded-lg object-cover cursor-pointer flex-shrink-0 transition-all ${
+                    <button
-                            index === currentImageIndex ? 'ring-2 ring-purple-500' : 'opacity-60 hover:opacity-100'
+                      onClick={nextImage}
-                          }`}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white p-2 rounded-full transition-all"
-                          onClick={() => setCurrentImageIndex(index)}
+                    >
-                        />
+                      <ChevronRight className="h-4 w-4" />
-                      ))}
+                    </button>
+                    
+                    <div className="absolute bottom-3 left-1/2 -translate-x-1/2 bg-black/70 px-3 py-1 rounded-full text-white text-sm">
+                      {currentImageIndex + 1} из {WildberriesService.getCardImages(selectedCardForDetails).length}
                     </div>
-                  </div>
+                  </>
                 )}
               </div>
 
-              {/* Информация о товаре */}
+              {/* Основная информация */}
-              <div className="p-4 lg:p-6 overflow-y-auto max-h-[95vh] space-y-4 max-w-full">
+              <div className="space-y-3">
                 <div>
-                  <h2 className="text-xl font-bold text-white mb-2 leading-tight">{selectedCardForDetails.title}</h2>
+                  <h3 className="text-white font-semibold text-lg">{selectedCardForDetails.title}</h3>
-                  <p className="text-white/60 mb-3 text-sm">Артикул: {selectedCardForDetails.vendorCode}</p>
+                  <p className="text-white/60 text-sm">Артикул WB: {selectedCardForDetails.nmID}</p>
-                  
+                </div>
-                  <div className="grid grid-cols-1 gap-3 text-sm bg-white/5 rounded-lg p-4">
+                
-                    <div className="flex justify-between items-start gap-2">
+                <div className="grid grid-cols-2 gap-4 text-sm">
-                      <span className="text-white/60 flex-shrink-0">Бренд:</span>
+                  <div className="flex justify-between">
-                      <span className="text-white font-medium text-right break-words">{selectedCardForDetails.brand}</span>
+                    <span className="text-white/60">Бренд:</span>
-                    </div>
+                    <span className="text-white font-medium">{selectedCardForDetails.brand}</span>
-                    <div className="flex justify-between items-start gap-2">
+                  </div>
-                      <span className="text-white/60 flex-shrink-0">Категория:</span>
+                  <div className="flex justify-between">
-                      <span className="text-white font-medium text-right break-words">{selectedCardForDetails.object}</span>
+                    <span className="text-white/60">Категория:</span>
-                    </div>
+                    <span className="text-white font-medium">{selectedCardForDetails.object}</span>
-                    <div className="flex justify-between items-start gap-2">
-                      <span className="text-white/60 flex-shrink-0">Родительская:</span>
-                      <span className="text-white font-medium text-right break-words">{selectedCardForDetails.parent}</span>
-                    </div>
-                    <div className="flex justify-between items-start gap-2">
-                      <span className="text-white/60 flex-shrink-0">Страна:</span>
-                      <span className="text-white font-medium text-right break-words">{selectedCardForDetails.countryProduction}</span>
-                    </div>
                   </div>
                 </div>
 
                 {selectedCardForDetails.description && (
                   <div>
-                    <h3 className="text-white font-semibold mb-2 text-lg">Описание</h3>
+                    <h4 className="text-white font-medium mb-2">Описание</h4>
-                    <div className="bg-white/5 rounded-lg p-4 max-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
+                    <p className="text-white/70 text-sm leading-relaxed max-h-32 overflow-y-auto">
-                      <p className="text-white/80 text-sm leading-relaxed whitespace-pre-wrap break-words">
+                      {selectedCardForDetails.description}
-                        {selectedCardForDetails.description}
+                    </p>
-                      </p>
-                    </div>
                   </div>
                 )}
-
-                {/* Размеры и цены */}
-                <div>
-                  <h3 className="text-white font-semibold mb-3 text-lg">Доступные варианты</h3>
-                  <div className="space-y-2">
-                    {selectedCardForDetails.sizes.map((size) => (
-                      <div key={size.chrtID} className="bg-white/5 border border-white/10 rounded-lg p-4">
-                        <div className="flex justify-between items-center mb-2">
-                          <span className="text-white font-medium">{size.wbSize}</span>
-                          <Badge className={`${size.quantity > 10 ? 'bg-green-500/30 text-green-200' : size.quantity > 0 ? 'bg-yellow-500/30 text-yellow-200' : 'bg-red-500/30 text-red-200'} font-medium`}>
-                            {size.quantity} шт.
-                          </Badge>
-                        </div>
-                        <div className="flex justify-between items-center text-sm">
-                          <span className="text-white/60">Размер: {size.techSize}</span>
-                          <div className="text-right">
-                            <div className="text-white font-bold text-base">{formatCurrency(size.discountedPrice || size.price)}</div>
-                            {size.discountedPrice && size.discountedPrice < size.price && (
-                              <div className="text-white/40 line-through text-xs">{formatCurrency(size.price)}</div>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-                 
-                {/* Кнопки действий в модальном окне */}
-                <div className="flex gap-3 pt-4 border-t border-white/20 sticky bottom-0 bg-black/50 backdrop-blur">
-                  <Button
-                    className="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium"
-                    onClick={() => {
-                      const currentQuantity = getSelectedQuantity(selectedCardForDetails)
-                      updateCardSelection(selectedCardForDetails, 'selectedQuantity', currentQuantity + 1)
-                      closeDetailsModal()
-                    }}
-                  >
-                    <Plus className="h-4 w-4 mr-2" />
-                    Добавить в корзину
-                  </Button>
-                  <Button
-                    variant="outline"
-                    className="border-white/20 text-white hover:bg-white/10"
-                    onClick={closeDetailsModal}
-                  >
-                    Закрыть
-                  </Button>
-                </div>
               </div>
+
+              {/* Миниатюры изображений */}
+              {WildberriesService.getCardImages(selectedCardForDetails).length > 1 && (
+                <div className="flex space-x-2 overflow-x-auto pb-2">
+                  {WildberriesService.getCardImages(selectedCardForDetails).map((image, index) => (
+                    <img
+                      key={index}
+                      src={image}
+                      alt={`${selectedCardForDetails.title} ${index + 1}`}
+                      className={`w-16 h-16 rounded-lg object-cover cursor-pointer flex-shrink-0 transition-all ${
+                        index === currentImageIndex ? 'ring-2 ring-purple-500' : 'opacity-60 hover:opacity-100'
+                      }`}
+                      onClick={() => setCurrentImageIndex(index)}
+                    />
+                  ))}
+                </div>
+              )}
             </div>
           )}
         </DialogContent>