Удален файл CSS_FIX_GUIDE.md, который содержал инструкции по исправлению проблем со стилями в Docker. Обновлены зависимости в package-lock.json и package.json для улучшения совместимости с Tailwind CSS и PostCSS. Внесены изменения в конфигурацию PostCSS и удален устаревший файл tailwind.config.js. Обновлены стили в globals.css для улучшения структуры и добавлены новые переменные. Добавлен новый элемент в боковое меню для тестирования стилей.

src/app/api/debug-unit/route.ts

@@ -0,0 +1,69 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { laximoUnitService } from '@/lib/laximo-service'
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const catalogCode = searchParams.get('catalogCode') || 'KIA202404'
+  const vehicleId = searchParams.get('vehicleId') || '2095869513'
+  const unitId = searchParams.get('unitId') || '1842820926'
+  const ssd = searchParams.get('ssd') || '$*KwGhjK205_fnwvL-5sH4hIPO7Nv15cSn9L68mOiw9rapsNDZ6Oj64LCvtt2w6OmfqrHnxKf35-rV7Oi3-qmwpqWgp6TV-_X67uzD8fvEp_S-vJjosPa2qbDH0p-WiNuip6Wxvrfy6P762NvUpqOgoaf-5vSx_7eusdqlxP6P7KWj07a_sOa18Oaesb634rGot83z8JuhpqTV0d_Hpf7x4aWkt-ntzdXzn6aLp6PEx_DNzLa0m4fTqqaio6ulpf_wpszi5uDTxNDfg4eU1tvR0d3GxsOYjZbU7Mrk4OTVzfPwm6GmpNXR38el_vHhpaTr_f71wOWmkurT8fTgvKO63OWWncbAxdyjoKS4-fXrpqPXpaIAAAAADaPhQw==$'
+  
+  console.log('🔍 Debug Unit API - Параметры:', { catalogCode, vehicleId, unitId, ssd: ssd ? `${ssd.substring(0, 30)}...` : 'отсутствует' })
+
+  try {
+    const results: any = {
+      testParams: { catalogCode, vehicleId, unitId, ssdLength: ssd?.length },
+      timestamp: new Date().toISOString()
+    }
+
+    // 1. Тестируем GetUnitInfo
+    console.log('🔍 Тестируем GetUnitInfo...')
+    const unitInfo = await laximoUnitService.getUnitInfo(catalogCode, vehicleId, unitId, ssd)
+    results.unitInfo = {
+      success: !!unitInfo,
+      data: unitInfo,
+      hasImage: !!(unitInfo?.imageurl || unitInfo?.largeimageurl),
+      attributesCount: unitInfo?.attributes?.length || 0
+    }
+
+    // 2. Тестируем ListDetailByUnit  
+    console.log('🔍 Тестируем ListDetailByUnit...')
+    const unitDetails = await laximoUnitService.getUnitDetails(catalogCode, vehicleId, unitId, ssd)
+    results.unitDetails = {
+      success: Array.isArray(unitDetails),
+      detailsCount: unitDetails?.length || 0,
+      data: unitDetails || [],
+      sampleDetail: unitDetails?.[0] || null
+    }
+
+    // 3. Тестируем ListImageMapByUnit
+    console.log('🔍 Тестируем ListImageMapByUnit...')
+    const imageMap = await laximoUnitService.getUnitImageMap(catalogCode, vehicleId, unitId, ssd)
+    results.imageMap = {
+      success: !!imageMap,
+      coordinatesCount: imageMap?.coordinates?.length || 0,
+      data: imageMap,
+      sampleCoordinate: imageMap?.coordinates?.[0] || null
+    }
+
+    // Суммарная статистика
+    results.summary = {
+      hasUnitInfo: !!unitInfo,
+      hasImage: !!(unitInfo?.imageurl || unitInfo?.largeimageurl),
+      detailsCount: unitDetails?.length || 0,
+      coordinatesCount: imageMap?.coordinates?.length || 0,
+      allDataPresent: !!unitInfo && (unitDetails?.length || 0) > 0 && !!imageMap
+    }
+
+    console.log('✅ Debug Unit API результаты:', results.summary)
+
+    return NextResponse.json(results)
+  } catch (error) {
+    console.error('❌ Ошибка в Debug Unit API:', error)
+    return NextResponse.json({
+      error: 'Ошибка тестирования API узлов',
+      details: error instanceof Error ? error.message : String(error),
+      testParams: { catalogCode, vehicleId, unitId, ssdLength: ssd?.length }
+    }, { status: 500 })
+  }     
+} 

src/app/dashboard/test-styles/page.tsx

@@ -0,0 +1,250 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { 
+  AlertCircle, 
+  CheckCircle, 
+  Info, 
+  ShoppingCart,
+  Users,
+  Settings
+} from 'lucide-react'
+
+export default function TestStylesPage() {
+  return (
+    <div className="p-6 space-y-8">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground mb-2">
+          Тест стилей Tailwind CSS + Shadcn/ui
+        </h1>
+        <p className="text-muted-foreground">
+          Проверка всех основных компонентов и цветов
+        </p>
+      </div>
+
+      {/* Color Test */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Цветовая палитра</CardTitle>
+          <CardDescription>Проверка всех основных цветов</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="p-4 bg-primary text-primary-foreground rounded-lg">
+              <p className="font-semibold">Primary</p>
+              <p className="text-sm">Основной цвет</p>
+            </div>
+            <div className="p-4 bg-secondary text-secondary-foreground rounded-lg">
+              <p className="font-semibold">Secondary</p>
+              <p className="text-sm">Вторичный цвет</p>
+            </div>
+            <div className="p-4 bg-accent text-accent-foreground rounded-lg">
+              <p className="font-semibold">Accent</p>
+              <p className="text-sm">Акцентный цвет</p>
+            </div>
+            <div className="p-4 bg-muted text-muted-foreground rounded-lg">
+              <p className="font-semibold">Muted</p>
+              <p className="text-sm">Приглушенный</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Buttons Test */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Кнопки</CardTitle>
+          <CardDescription>Различные варианты кнопок</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap gap-4">
+            <Button variant="default">Default</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="link">Link</Button>
+            <Button variant="destructive">Destructive</Button>
+          </div>
+          <div className="flex flex-wrap gap-4">
+            <Button size="sm">Small</Button>
+            <Button size="default">Default</Button>
+            <Button size="lg">Large</Button>
+            <Button size="icon">
+              <Settings className="h-4 w-4" />
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Badges Test */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Бейджи</CardTitle>
+          <CardDescription>Различные статусы и метки</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap gap-4">
+            <Badge variant="default">Default</Badge>
+            <Badge variant="secondary">Secondary</Badge>
+            <Badge variant="outline">Outline</Badge>
+            <Badge variant="destructive">Destructive</Badge>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Form Elements Test */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Элементы формы</CardTitle>
+          <CardDescription>Поля ввода и лейблы</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" placeholder="email@example.com" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Пароль</Label>
+              <Input id="password" type="password" placeholder="Введите пароль" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Icons Test */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Иконки</CardTitle>
+          <CardDescription>Lucide React иконки</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap gap-4">
+            <div className="flex items-center gap-2 p-2 bg-green-50 text-green-700 rounded-lg">
+              <CheckCircle className="h-5 w-5" />
+              <span>Успех</span>
+            </div>
+            <div className="flex items-center gap-2 p-2 bg-red-50 text-red-700 rounded-lg">
+              <AlertCircle className="h-5 w-5" />
+              <span>Ошибка</span>
+            </div>
+            <div className="flex items-center gap-2 p-2 bg-blue-50 text-blue-700 rounded-lg">
+              <Info className="h-5 w-5" />
+              <span>Информация</span>
+            </div>
+            <div className="flex items-center gap-2 p-2 bg-purple-50 text-purple-700 rounded-lg">
+              <ShoppingCart className="h-5 w-5" />
+              <span>Заказы</span>
+            </div>
+            <div className="flex items-center gap-2 p-2 bg-orange-50 text-orange-700 rounded-lg">
+              <Users className="h-5 w-5" />
+              <span>Клиенты</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Cards Test */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <ShoppingCart className="h-5 w-5" />
+              Заказы
+            </CardTitle>
+            <CardDescription>Всего заказов</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-blue-600">1,234</div>
+            <p className="text-xs text-muted-foreground">
+              +20.1% с прошлого месяца
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Users className="h-5 w-5" />
+              Клиенты
+            </CardTitle>
+            <CardDescription>Активные клиенты</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-600">456</div>
+            <p className="text-xs text-muted-foreground">
+              +15.3% с прошлого месяца
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <AlertCircle className="h-5 w-5" />
+              Проблемы
+            </CardTitle>
+            <CardDescription>Требуют внимания</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-red-600">12</div>
+            <p className="text-xs text-muted-foreground">
+              -5.2% с прошлого месяца
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Dark/Light Mode Test */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Тема</CardTitle>
+          <CardDescription>Проверка адаптации к темной/светлой теме</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="p-4 border rounded-lg">
+            <p className="text-foreground mb-2">
+              Этот текст должен адаптироваться к теме
+            </p>
+            <p className="text-muted-foreground">
+              А этот текст должен быть приглушенным
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Status Message */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-green-600">✅ Статус интеграции</CardTitle>
+          <CardDescription>Результат исправления Tailwind CSS</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            <p className="flex items-center gap-2">
+              <CheckCircle className="h-5 w-5 text-green-600" />
+              <span>Tailwind CSS v4 правильно интегрирован</span>
+            </p>
+            <p className="flex items-center gap-2">
+              <CheckCircle className="h-5 w-5 text-green-600" />
+              <span>Shadcn/ui компоненты работают корректно</span>
+            </p>
+            <p className="flex items-center gap-2">
+              <CheckCircle className="h-5 w-5 text-green-600" />
+              <span>Цветовая схема применяется правильно</span>
+            </p>
+            <p className="flex items-center gap-2">
+              <CheckCircle className="h-5 w-5 text-green-600" />
+              <span>Поддержка темной/светлой темы активна</span>
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+} 

src/app/globals.css

@@ -1,50 +1,11 @@
-@import "tailwindcss/preflight";
 @import "tailwindcss";
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
+@custom-variant dark (&:is(.dark *));
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+
+  /* Основные цвета в HSL формате */
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
@@ -58,6 +19,7 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: 210 40% 98%;
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -74,6 +36,8 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
 }
 
 .dark {
@@ -92,6 +56,7 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: 210 40% 98%;
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
@@ -110,6 +75,53 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;